@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/components/events/__tests__/event-item.test.tsx

@@ -0,0 +1,211 @@
+import { render, screen, setupUser } from '@/test/test-utils';
+import { EventItem } from '../event-item';
+import { createMockJournalEvent } from '@/test/fixtures';
+
+describe('EventItem', () => {
+  // -----------------------------------------------------------------------
+  // RUN_CREATED
+  // -----------------------------------------------------------------------
+  describe('RUN_CREATED event', () => {
+    it('renders the "Created" badge', () => {
+      const event = createMockJournalEvent({
+        type: 'RUN_CREATED',
+        payload: { processId: 'data-pipeline/ingest' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('Created')).toBeInTheDocument();
+    });
+
+    it('displays the processId from the payload', () => {
+      const event = createMockJournalEvent({
+        type: 'RUN_CREATED',
+        payload: { processId: 'data-pipeline/ingest' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('data-pipeline/ingest')).toBeInTheDocument();
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // EFFECT_REQUESTED
+  // -----------------------------------------------------------------------
+  describe('EFFECT_REQUESTED event', () => {
+    it('renders the "Requested" badge', () => {
+      const event = createMockJournalEvent({
+        type: 'EFFECT_REQUESTED',
+        payload: { label: 'run-task-abc', kind: 'agent', effectId: 'eff-1', stepId: 'step-1', taskId: 'task-1' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('Requested')).toBeInTheDocument();
+    });
+
+    it('displays the label from the payload', () => {
+      const event = createMockJournalEvent({
+        type: 'EFFECT_REQUESTED',
+        payload: { label: 'my-task-label', kind: 'shell', effectId: 'eff-1' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('my-task-label')).toBeInTheDocument();
+    });
+
+    it('shows the kind badge when present', () => {
+      const event = createMockJournalEvent({
+        type: 'EFFECT_REQUESTED',
+        payload: { label: 'my-task', kind: 'agent', effectId: 'eff-1' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('agent')).toBeInTheDocument();
+    });
+
+    it('falls back to "Task" when label is empty', () => {
+      const event = createMockJournalEvent({
+        type: 'EFFECT_REQUESTED',
+        payload: { label: '', kind: 'node', effectId: 'eff-1' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('Task')).toBeInTheDocument();
+    });
+
+    it('renders step and task metadata when present', () => {
+      const event = createMockJournalEvent({
+        type: 'EFFECT_REQUESTED',
+        payload: { label: 'x', kind: 'node', effectId: 'eff-1', stepId: 'step-42', taskId: 'task-99' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText(/step: step-42/)).toBeInTheDocument();
+      expect(screen.getByText(/task: task-99/)).toBeInTheDocument();
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // EFFECT_RESOLVED
+  // -----------------------------------------------------------------------
+  describe('EFFECT_RESOLVED event', () => {
+    it('renders the "Resolved" badge', () => {
+      const event = createMockJournalEvent({
+        type: 'EFFECT_RESOLVED',
+        payload: { effectId: 'eff-1', status: 'ok' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('Resolved')).toBeInTheDocument();
+    });
+
+    it('displays label when available', () => {
+      const event = createMockJournalEvent({
+        type: 'EFFECT_RESOLVED',
+        payload: { label: 'completed-task', effectId: 'eff-1', status: 'ok' },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('completed-task')).toBeInTheDocument();
+    });
+
+    it('displays duration when startedAt and finishedAt are present', () => {
+      const start = '2025-01-01T00:00:00.000Z';
+      const finish = '2025-01-01T00:00:03.000Z'; // 3 seconds later
+      const event = createMockJournalEvent({
+        type: 'EFFECT_RESOLVED',
+        payload: { effectId: 'eff-1', status: 'ok', startedAt: start, finishedAt: finish },
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('3s')).toBeInTheDocument();
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // RUN_COMPLETED
+  // -----------------------------------------------------------------------
+  describe('RUN_COMPLETED event', () => {
+    it('renders the "Completed" badge and success message', () => {
+      const event = createMockJournalEvent({
+        type: 'RUN_COMPLETED',
+        payload: {},
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('Completed')).toBeInTheDocument();
+      expect(screen.getByText('Run finished successfully')).toBeInTheDocument();
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // RUN_FAILED
+  // -----------------------------------------------------------------------
+  describe('RUN_FAILED event', () => {
+    it('renders the "Failed" badge and failure message', () => {
+      const event = createMockJournalEvent({
+        type: 'RUN_FAILED',
+        payload: {},
+      });
+
+      render(<EventItem event={event} />);
+
+      expect(screen.getByText('Failed')).toBeInTheDocument();
+      expect(screen.getByText('Run failed')).toBeInTheDocument();
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Timestamp display
+  // -----------------------------------------------------------------------
+  it('displays a relative timestamp', () => {
+    // Create an event with a recent timestamp
+    const event = createMockJournalEvent({
+      ts: new Date(Date.now() - 30000).toISOString(), // 30 seconds ago
+      type: 'RUN_CREATED',
+      payload: { processId: 'p1' },
+    });
+
+    render(<EventItem event={event} />);
+
+    // formatRelativeTime for 30s ago returns "30s ago"
+    expect(screen.getByText('30s ago')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Click handler
+  // -----------------------------------------------------------------------
+  it('calls onClick when the item is clicked', async () => {
+    const user = setupUser();
+    const handleClick = vi.fn();
+    const event = createMockJournalEvent({
+      type: 'RUN_CREATED',
+      payload: { processId: 'p1' },
+    });
+
+    render(<EventItem event={event} onClick={handleClick} />);
+
+    await user.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders without crashing when onClick is not provided', () => {
+    const event = createMockJournalEvent({
+      type: 'RUN_CREATED',
+      payload: { processId: 'p1' },
+    });
+
+    const { container } = render(<EventItem event={event} />);
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+});

package/src/components/events/__tests__/event-stream.test.tsx

@@ -0,0 +1,225 @@
+import { render, screen, setupUser } from '@/test/test-utils';
+import { EventStream } from '../event-stream';
+import { createMockJournalEvent } from '@/test/fixtures';
+import type { JournalEvent } from '@/types';
+
+describe('EventStream', () => {
+  function makeEvents(count: number, type: JournalEvent['type'] = 'EFFECT_REQUESTED'): JournalEvent[] {
+    return Array.from({ length: count }, (_, i) =>
+      createMockJournalEvent({
+        seq: i,
+        id: `evt-${i}`,
+        ts: new Date(Date.now() - (count - i) * 1000).toISOString(),
+        type,
+        payload: { effectId: `eff-${i}`, label: `task-${i}`, kind: 'node' },
+      }),
+    );
+  }
+
+  // -----------------------------------------------------------------------
+  // Empty state
+  // -----------------------------------------------------------------------
+  it('shows "No events yet" when the events array is empty', () => {
+    render(<EventStream events={[]} />);
+
+    expect(screen.getByText('No events yet')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Renders event list
+  // -----------------------------------------------------------------------
+  it('renders a list of events', () => {
+    const events = [
+      createMockJournalEvent({
+        seq: 0,
+        type: 'RUN_CREATED',
+        payload: { processId: 'pipeline/ingest' },
+      }),
+      createMockJournalEvent({
+        seq: 1,
+        type: 'EFFECT_REQUESTED',
+        payload: { label: 'task-alpha', kind: 'agent', effectId: 'e1' },
+      }),
+    ];
+
+    render(<EventStream events={events} />);
+
+    expect(screen.getByText('task-alpha')).toBeInTheDocument();
+    expect(screen.getByText('pipeline/ingest')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Event count display
+  // -----------------------------------------------------------------------
+  it('shows the total event count', () => {
+    const events = makeEvents(5);
+
+    render(<EventStream events={events} />);
+
+    expect(screen.getByText('5 events')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Filter buttons
+  // -----------------------------------------------------------------------
+  it('renders filter buttons: All, Tasks, Results, Errors', () => {
+    render(<EventStream events={[]} />);
+
+    expect(screen.getByText('All')).toBeInTheDocument();
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+    expect(screen.getByText('Results')).toBeInTheDocument();
+    expect(screen.getByText('Errors')).toBeInTheDocument();
+  });
+
+  it('filters events by type when a filter button is clicked', async () => {
+    const user = setupUser();
+    const events = [
+      createMockJournalEvent({
+        seq: 0,
+        type: 'EFFECT_REQUESTED',
+        payload: { label: 'requested-task', kind: 'node', effectId: 'e1' },
+      }),
+      createMockJournalEvent({
+        seq: 1,
+        type: 'EFFECT_RESOLVED',
+        payload: { label: 'resolved-task', effectId: 'e2', status: 'ok' },
+      }),
+    ];
+
+    render(<EventStream events={events} />);
+
+    // Both visible initially
+    expect(screen.getByText('requested-task')).toBeInTheDocument();
+    expect(screen.getByText('resolved-task')).toBeInTheDocument();
+
+    // Click "Tasks" filter (EFFECT_REQUESTED only)
+    await user.click(screen.getByText('Tasks'));
+
+    expect(screen.getByText('requested-task')).toBeInTheDocument();
+    expect(screen.queryByText('resolved-task')).not.toBeInTheDocument();
+
+    // Click "Results" filter (EFFECT_RESOLVED only)
+    await user.click(screen.getByText('Results'));
+
+    expect(screen.queryByText('requested-task')).not.toBeInTheDocument();
+    expect(screen.getByText('resolved-task')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Stats bar
+  // -----------------------------------------------------------------------
+  it('displays summary stats when events are present', () => {
+    const events = [
+      createMockJournalEvent({ seq: 0, type: 'EFFECT_REQUESTED', payload: { effectId: 'e1', label: 'l1', kind: 'node' } }),
+      createMockJournalEvent({ seq: 1, type: 'EFFECT_RESOLVED', payload: { effectId: 'e2', status: 'ok' } }),
+      createMockJournalEvent({ seq: 2, type: 'RUN_FAILED', payload: {} }),
+    ];
+
+    render(<EventStream events={events} />);
+
+    // Check stats are rendered
+    expect(screen.getByText('Tasks:')).toBeInTheDocument();
+    expect(screen.getByText('Completed:')).toBeInTheDocument();
+    expect(screen.getByText('Errors:')).toBeInTheDocument();
+  });
+
+  it('does not display summary stats bar when no events', () => {
+    render(<EventStream events={[]} />);
+
+    expect(screen.queryByText('Tasks:')).not.toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Event click handler
+  // -----------------------------------------------------------------------
+  it('calls onEventClick when an event is clicked', async () => {
+    const user = setupUser();
+    const handleClick = vi.fn();
+    const events = [
+      createMockJournalEvent({
+        seq: 0,
+        type: 'RUN_COMPLETED',
+        payload: {},
+      }),
+    ];
+
+    render(<EventStream events={events} onEventClick={handleClick} />);
+
+    await user.click(screen.getByText('Run finished successfully'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleClick).toHaveBeenCalledWith(events[0]);
+  });
+
+  // -----------------------------------------------------------------------
+  // "Show more" pagination
+  // -----------------------------------------------------------------------
+  it('shows a "Show more" button when there are more than 20 events', () => {
+    // Create 25 events (page size is 20)
+    const events = makeEvents(25);
+
+    render(<EventStream events={events} />);
+
+    expect(screen.getByText(/Show .* more/)).toBeInTheDocument();
+  });
+
+  it('does not show "Show more" when there are 20 or fewer events', () => {
+    const events = makeEvents(10);
+
+    render(<EventStream events={events} />);
+
+    expect(screen.queryByText(/Show .* more/)).not.toBeInTheDocument();
+  });
+
+  it('loads more events when "Show more" is clicked', async () => {
+    const user = setupUser();
+    const events = makeEvents(25);
+
+    render(<EventStream events={events} />);
+
+    const showMoreBtn = screen.getByText(/Show .* more/);
+    await user.click(showMoreBtn);
+
+    // After loading more, the "Show more" button should be gone (all 25 visible)
+    expect(screen.queryByText(/Show .* more/)).not.toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Event grouping (3+ consecutive same-type events are collapsed)
+  // -----------------------------------------------------------------------
+  it('groups 3+ consecutive same-type events into a collapsed row', () => {
+    // 4 consecutive EFFECT_REQUESTED events
+    const events = makeEvents(4, 'EFFECT_REQUESTED');
+
+    render(<EventStream events={events} />);
+
+    // The group summary should show "4x" and "Requested"
+    expect(screen.getByText('4x')).toBeInTheDocument();
+    expect(screen.getByText('Requested')).toBeInTheDocument();
+  });
+
+  it('expands a collapsed group when clicked', async () => {
+    const user = setupUser();
+    const events = makeEvents(4, 'EFFECT_REQUESTED');
+
+    render(<EventStream events={events} />);
+
+    // Initially, individual labels should not be visible (collapsed)
+    expect(screen.queryByText('task-0')).not.toBeInTheDocument();
+
+    // Click the group header to expand
+    await user.click(screen.getByText('4x'));
+
+    // After expansion, individual items should be visible
+    expect(screen.getByText('task-0')).toBeInTheDocument();
+    expect(screen.getByText('task-1')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // "Event Stream" heading
+  // -----------------------------------------------------------------------
+  it('renders the "Event Stream" heading', () => {
+    render(<EventStream events={[]} />);
+
+    expect(screen.getByText('Event Stream')).toBeInTheDocument();
+  });
+});

package/src/components/events/event-item.tsx

@@ -0,0 +1,121 @@
+import { memo } from "react";
+import { cn } from "@/lib/cn";
+import { Badge } from "@/components/ui/badge";
+import { formatRelativeTime, formatDuration } from "@/lib/utils";
+import { TruncatedId } from "@/components/shared/truncated-id";
+import type { JournalEvent } from "@/types";
+
+const typeConfig: Record<string, { variant: "success" | "error" | "info" | "warning" | "default"; label: string }> = {
+  RUN_CREATED: { variant: "info", label: "Created" },
+  EFFECT_REQUESTED: { variant: "default", label: "Requested" },
+  EFFECT_RESOLVED: { variant: "success", label: "Resolved" },
+  RUN_COMPLETED: { variant: "success", label: "Completed" },
+  RUN_FAILED: { variant: "error", label: "Failed" },
+};
+
+const kindColors: Record<string, string> = {
+  agent: "bg-primary/15 text-primary",
+  shell: "bg-secondary/15 text-secondary",
+  breakpoint: "bg-warning/15 text-warning",
+  node: "bg-info/15 text-info",
+  skill: "bg-success/15 text-success",
+  sleep: "bg-foreground-muted/15 text-foreground-muted",
+};
+
+interface EventItemProps {
+  event: JournalEvent;
+  onClick?: () => void;
+}
+
+export const EventItem = memo(function EventItem({ event, onClick }: EventItemProps) {
+  const config = typeConfig[event.type] || typeConfig.EFFECT_REQUESTED;
+  const payload = event.payload as Record<string, unknown>;
+  const label = (payload.label as string) || "";
+  const effectId = (payload.effectId as string) || "";
+  const kind = (payload.kind as string) || "";
+  const status = (payload.status as string) || "";
+  const processId = (payload.processId as string) || "";
+  const stepId = (payload.stepId as string) || "";
+  const taskId = (payload.taskId as string) || "";
+
+  // Compute duration from startedAt/finishedAt in resolved payloads
+  const startedAt = payload.startedAt as string | undefined;
+  const finishedAt = payload.finishedAt as string | undefined;
+  const resolvedDuration =
+    startedAt && finishedAt
+      ? new Date(finishedAt).getTime() - new Date(startedAt).getTime()
+      : undefined;
+
+  return (
+    <button
+      data-testid={`event-item-${event.seq}`}
+      data-event-type={event.type}
+      onClick={onClick}
+      className="w-full text-left px-3 py-2 hover:bg-primary-muted/40 rounded transition-all duration-150"
+    >
+      {/* Primary line */}
+      <div className="flex items-center gap-2">
+        <span className="font-mono text-xs leading-tight text-secondary shrink-0 tabular-nums w-12 text-right">
+          {formatRelativeTime(event.ts)}
+        </span>
+        <Badge variant={config.variant} className="text-xs leading-tight shrink-0">
+          {config.label}
+        </Badge>
+
+        {event.type === "EFFECT_REQUESTED" && (
+          <>
+            <span className="text-xs text-foreground truncate font-medium">{label || "Task"}</span>
+            {kind && (
+              <span className={cn("rounded px-1.5 py-0.5 text-xs leading-tight font-medium shrink-0", kindColors[kind] || "bg-muted text-foreground-muted")}>
+                {kind}
+              </span>
+            )}
+          </>
+        )}
+
+        {event.type === "EFFECT_RESOLVED" && (
+          <>
+            {label && <span className="text-xs text-foreground truncate font-medium">{label}</span>}
+            {!label && effectId && <TruncatedId id={effectId} chars={4} className="text-foreground-secondary" />}
+            <span className={cn(
+              "inline-block h-2 w-2 rounded-full shrink-0",
+              status === "ok" ? "bg-success shadow-[0_0_4px_var(--success)]" : status === "error" ? "bg-error shadow-[0_0_4px_var(--error)]" : "bg-foreground-muted"
+            )} />
+            {resolvedDuration != null && resolvedDuration > 0 && (
+              <span className="text-xs leading-tight font-mono text-foreground-muted shrink-0">{formatDuration(resolvedDuration)}</span>
+            )}
+          </>
+        )}
+
+        {event.type === "RUN_CREATED" && processId && (
+          <span className="text-xs text-foreground-secondary truncate">{processId}</span>
+        )}
+
+        {event.type === "RUN_COMPLETED" && (
+          <span className="text-xs text-success truncate">Run finished successfully</span>
+        )}
+
+        {event.type === "RUN_FAILED" && (
+          <span className="text-xs text-error truncate">Run failed</span>
+        )}
+
+        {/* Fallback for unknown types */}
+        {!["EFFECT_REQUESTED", "EFFECT_RESOLVED", "RUN_CREATED", "RUN_COMPLETED", "RUN_FAILED"].includes(event.type) && (
+          label ? (
+            <span className="text-xs text-foreground-secondary truncate">{label}</span>
+          ) : effectId ? (
+            <TruncatedId id={effectId} chars={4} className="text-foreground-secondary" />
+          ) : null
+        )}
+      </div>
+
+      {/* Secondary metadata line */}
+      {(stepId || taskId) && (
+        <div className="flex items-center gap-2 mt-0.5 ml-14 text-xs leading-tight text-foreground-muted">
+          {stepId && <span className="font-mono truncate">step: {stepId}</span>}
+          {taskId && <span className="font-mono truncate">task: {taskId}</span>}
+        </div>
+      )}
+    </button>
+  );
+});