@matt82198/aesop 0.1.0-beta.4 → 0.1.0-beta.5

package/ui/web/src/test/fixtures.ts

@@ -0,0 +1,385 @@
+/**
+ * Shared test fixtures + the data-testid naming contract.
+ *
+ * TESTIDS is the SINGLE SOURCE OF TRUTH for data-testid values across the app.
+ * U4–U7 components MUST attach these testids; U8's Playwright proofs assert
+ * ONLY via these hooks (never CSS internals). Add new ids here first, then
+ * use them from components — never inline a bare testid string.
+ *
+ * Fixture objects are realistic samples of every API payload type in
+ * src/lib/types.ts. U4–U7 import these for component tests.
+ */
+
+import type {
+  Agent,
+  AgentDetail,
+  Alert,
+  AuditBacklog,
+  CostSummary,
+  DashboardData,
+  FullState,
+  HeartbeatStatus,
+  Message,
+  OrchestratorStatus,
+  RepoStatus,
+  TrackerItem,
+  TrackerSnapshot,
+} from '../lib/types';
+
+/* ------------------------------------------------------------------ */
+/* data-testid contract                                                */
+/* ------------------------------------------------------------------ */
+
+export const TESTIDS = {
+  // Health header (sticky, always visible)
+  healthHeader: 'health-header',
+  healthWatchdog: 'health-watchdog',
+  healthMonitor: 'health-monitor',
+  healthOrchestrator: 'health-orchestrator',
+  healthAgentsCount: 'health-agents-count',
+  healthAlertsCount: 'health-alerts-count',
+  sseStatus: 'sse-status',
+  themeToggle: 'theme-toggle',
+  refreshButton: 'refresh-button',
+
+  // Overview view
+  viewOverview: 'view-overview',
+  agentRow: 'agent-row',
+  agentRowDetail: 'agent-row-detail',
+  alertLine: 'alert-line',
+  alertsPanel: 'alerts-panel',
+  eventsFeed: 'events-feed',
+  reposPanel: 'repos-panel',
+  inboxForm: 'inbox-form',
+  inboxInput: 'inbox-input',
+  inboxSubmit: 'inbox-submit',
+
+  // Work view
+  viewWork: 'view-work',
+  trackerBoard: 'tracker-board',
+  trackerLane: 'tracker-lane',
+  trackerCard: 'tracker-card',
+  trackerForm: 'tracker-form',
+  trackerFormTitle: 'tracker-form-title',
+  trackerFormSubmit: 'tracker-form-submit',
+  backlogPanel: 'backlog-panel',
+
+  // Activity view
+  viewActivity: 'view-activity',
+  timeline: 'timeline',
+  timelineBar: 'timeline-bar',
+  messagesTail: 'messages-tail',
+  messagesFollowToggle: 'messages-follow-toggle',
+
+  // Cost view
+  viewCost: 'view-cost',
+  costTable: 'cost-table',
+  costChart: 'cost-chart',
+  scorecard: 'scorecard',
+} as const;
+
+export type TestId = (typeof TESTIDS)[keyof typeof TESTIDS];
+
+/* ------------------------------------------------------------------ */
+/* Fixtures                                                            */
+/* ------------------------------------------------------------------ */
+
+export const fixtureWatchdog: HeartbeatStatus = {
+  alive: 'ALIVE',
+  age: 3,
+  threshold: 300,
+};
+
+export const fixtureWatchdogStale: HeartbeatStatus = {
+  alive: 'STALE',
+  age: 642,
+  threshold: 300,
+};
+
+export const fixtureMonitor: HeartbeatStatus = {
+  alive: 'ALIVE',
+  age: 45,
+  threshold: 3600,
+};
+
+export const fixtureMonitorNotRunning: HeartbeatStatus = {
+  alive: 'not running',
+  age: -1,
+  threshold: 3600,
+};
+
+export const fixtureAgents: Agent[] = [
+  {
+    id: 'a77b995bcdb95',
+    project: 'aesop',
+    status: 'running',
+    age_s: 12,
+    hint: 'wave-14 U4 overview components',
+    startedAt: '2026-07-13T14:02:11.000Z',
+    lastActivity: '2026-07-13T14:31:47.000Z',
+    runtimeSeconds: 1776,
+    tokensUsed: 48213,
+    taskLabel: 'Wave-14 unit U4 (overview view components) for aesop.',
+    promptFull: 'Wave-14 unit U4 (overview view components) for aesop. Read the plan first.',
+  },
+  {
+    id: 'b12c4d99ef012',
+    project: 'aesop',
+    status: 'idle',
+    age_s: 341,
+    hint: 'tracker lane bucketing tests',
+    startedAt: '2026-07-13T13:40:00.000Z',
+    lastActivity: '2026-07-13T14:26:02.000Z',
+    runtimeSeconds: 2762,
+    tokensUsed: 102455,
+    taskLabel: 'Wave-14 unit U5 (work view components) for aesop.',
+    promptFull: 'Wave-14 unit U5 (work view components) for aesop.',
+  },
+  {
+    id: 'c99ff00aa1122',
+    project: 'tr-sample-tracker',
+    status: 'SUSPICIOUS',
+    age_s: 45,
+    hint: 'unexpected file write outside worktree',
+    startedAt: '2026-07-13T14:20:00.000Z',
+    lastActivity: '2026-07-13T14:31:15.000Z',
+    runtimeSeconds: 675,
+    tokensUsed: 8102,
+    taskLabel: 'Fix flaky test in sample tracker suite.',
+    promptFull: 'Fix flaky test in sample tracker suite.',
+  },
+];
+
+export const fixtureAgentDetail: AgentDetail = {
+  id: 'a77b995bcdb95',
+  dispatch_prompt:
+    'Wave-14 unit U4 (overview view components) for aesop. Read the plan FIRST, then implement AgentsPanel, AlertsPanel, EventsFeed with tests.',
+  dispatcher: 'main thread',
+  model: 'claude-haiku-4-5-20251001',
+  message_count: 87,
+  first_seen: 1783346531,
+  last_activity: 1783348307,
+};
+
+export const fixtureAlerts: Alert = {
+  count: 2,
+  lines: [
+    '2026-07-13T09:11:02Z HIGH agent-c99ff00 wrote outside its worktree: C:/Users/matt8/aesop/ui/serve.py',
+    '2026-07-13T11:45:38Z MED agent-b12c4d9 3 consecutive test failures on feat/wave14-u5-work',
+  ],
+};
+
+export const fixtureAlertsEmpty: Alert = { count: 0, lines: [] };
+
+export const fixtureRepos: RepoStatus[] = [
+  { repo: 'aesop', state: 'clean' },
+  { repo: 'tr-sample-tracker', state: 'dirty: 3 files' },
+  { repo: 'ecm-ai', state: 'clean' },
+];
+
+export const fixtureEvents: string[] = [
+  '2026-07-13 14:00:01 BACKUP aesop -> bundle OK (12.4 MB)',
+  '2026-07-13 14:00:04 BACKUP tr-sample-tracker -> bundle OK (3.1 MB)',
+  '2026-07-13 14:05:00 SCAN secret_scan --staged exit 0',
+  '2026-07-13 14:10:22 PUSH aesop feat/wave14-u1-foundation OK',
+];
+
+export const fixtureMessages: Message[] = [
+  {
+    role: 'user',
+    text: 'Run wave 14: dashboard rewrite, start with the foundation unit.',
+    timestamp: '2026-07-13T14:00:12.000Z',
+  },
+  {
+    role: 'assistant',
+    text: 'Dispatching U1 (foundation) to a worktree agent; U3 cost collector runs in parallel.',
+    timestamp: '2026-07-13T14:01:03.000Z',
+  },
+  {
+    role: 'assistant',
+    text: 'U1 scaffold complete: vite build green, vitest 41 passing. Moving to fixtures.',
+    timestamp: '2026-07-13T14:29:44.000Z',
+  },
+];
+
+export const fixtureDashboardData: DashboardData = {
+  watchdog: fixtureWatchdog,
+  monitor: fixtureMonitor,
+  agents: fixtureAgents,
+  repos: fixtureRepos,
+  events: fixtureEvents,
+  alerts: fixtureAlerts,
+  messages: fixtureMessages,
+};
+
+export const fixtureBacklog: AuditBacklog = {
+  tiers: [
+    {
+      tier: 'P0',
+      items: [
+        { status: '✅', tag: '[sec]', title: 'Origin fail-closed on /api/session' },
+        { status: '🔵', tag: '[ui]', title: 'Dashboard rewrite foundation (U1)' },
+        { status: '⬜', tag: '[ui]', title: 'Cutover / to dist index (U9)' },
+      ],
+      done: 1,
+      inflight: 1,
+      todo: 1,
+      total: 3,
+    },
+    {
+      tier: 'P1',
+      items: [
+        { status: '⬜', tag: '[perf]', title: 'SSE keepalive tuning' },
+        { status: '⏸', tag: '[arch]', title: 'Hierarchical orchestration seams' },
+      ],
+      done: 0,
+      inflight: 0,
+      todo: 1,
+      total: 2,
+    },
+  ],
+};
+
+export const fixtureTrackerItems: TrackerItem[] = [
+  {
+    id: '3f9a1b2c4d5e',
+    title: 'Dashboard rewrite: foundation scaffold',
+    priority: 'P0',
+    status: 'in-progress',
+    lane: 'in-progress',
+    source: 'wave14-plan',
+    tags: ['ui', 'wave-14'],
+    notes: 'U1 trunk unit; U4-U7 build on its types/fixtures/shell.',
+    pr_link: 'https://github.com/matt82198/aesop/pull/113',
+    created_at: '2026-07-12T18:30:00Z',
+    completed_at: null,
+  },
+  {
+    id: '8c7d6e5f4a3b',
+    title: 'Cost collector parses OUTCOMES-LEDGER.md',
+    priority: 'P1',
+    status: 'done',
+    lane: 'done',
+    source: 'wave14-plan',
+    tags: ['cost'],
+    notes: null,
+    pr_link: null,
+    created_at: '2026-07-12T18:31:00Z',
+    completed_at: '2026-07-13T09:15:00Z',
+  },
+  {
+    id: '1a2b3c4d5e6f',
+    title: 'Agent timeline read-only v1',
+    priority: 'P2',
+    status: 'todo',
+    lane: 'ranked',
+    source: 'audit-backlog-migration',
+    tags: ['activity'],
+    notes: null,
+    pr_link: null,
+    created_at: '2026-07-11T10:00:00Z',
+    completed_at: null,
+  },
+  {
+    id: '9e8d7c6b5a40',
+    title: 'Replay slider for agent timeline',
+    priority: 'P2',
+    status: 'todo',
+    lane: 'proposed',
+    source: 'ideation',
+    tags: ['activity', 'later'],
+    notes: 'v2 — read-only timeline ships first.',
+    pr_link: null,
+    created_at: '2026-07-11T10:05:00Z',
+    completed_at: null,
+  },
+  {
+    id: 'aa11bb22cc33',
+    title: 'Old dashboard patch attempt (superseded)',
+    priority: 'P2',
+    status: 'archived',
+    lane: 'done',
+    source: 'manual',
+    tags: [],
+    notes: null,
+    pr_link: 'javascript:alert(1)', // deliberately hostile: must render inert via sanitizeUrl
+    created_at: '2026-07-01T08:00:00Z',
+    completed_at: '2026-07-02T08:00:00Z',
+  },
+];
+
+export const fixtureTracker: TrackerSnapshot = { items: fixtureTrackerItems };
+
+export const fixtureStatus: OrchestratorStatus = {
+  orchestrators: [
+    {
+      id: 'main',
+      role: 'orchestrator',
+      age_seconds: 42,
+      stale: false,
+      updated_at: '2026-07-13T14:31:00Z',
+    },
+  ],
+};
+
+export const fixtureCost: CostSummary = {
+  models: {
+    'claude-haiku-4-5-20251001': {
+      runs: 128,
+      tokens_in: 2140050,
+      tokens_out: 512300,
+      verdicts: { OK: 119, FAILED: 6, EMPTY: 2, HUNG: 1 },
+    },
+    'claude-sonnet-4-5-20250929': {
+      runs: 14,
+      tokens_in: 890120,
+      tokens_out: 210440,
+      verdicts: { OK: 13, FAILED: 1, EMPTY: 0, HUNG: 0 },
+    },
+  },
+  daily_totals: {
+    '2026-07-11': { tokens_in: 1204000, tokens_out: 280100 },
+    '2026-07-12': { tokens_in: 986170, tokens_out: 262300 },
+    '2026-07-13': { tokens_in: 840000, tokens_out: 180340 },
+  },
+  overall_scorecard: {
+    total_runs: 142,
+    ok_count: 132,
+    failed_count: 7,
+    empty_count: 2,
+    hung_count: 1,
+    ok_rate: 0.9296,
+    failed_rate: 0.0493,
+    empty_rate: 0.0141,
+    hung_rate: 0.007,
+  },
+  skipped_lines: 3,
+  has_pricing: false,
+  estimates_by_model: {},
+};
+
+export const fixtureCostWithPricing: CostSummary = {
+  ...fixtureCost,
+  has_pricing: true,
+  estimates_by_model: {
+    'claude-haiku-4-5-20251001': {
+      input_cost: 2.14,
+      output_cost: 2.05,
+      total_cost: 4.19,
+    },
+    'claude-sonnet-4-5-20250929': {
+      input_cost: 2.67,
+      output_cost: 3.16,
+      total_cost: 5.83,
+    },
+  },
+};
+
+export const fixtureFullState: FullState = {
+  data: fixtureDashboardData,
+  backlog: fixtureBacklog,
+  agents: fixtureAgents,
+  tracker: fixtureTracker,
+  status: fixtureStatus,
+  cost: fixtureCost,
+};

package/ui/web/src/test/setup.ts

@@ -0,0 +1,49 @@
+/**
+ * Vitest setup — jsdom environment extensions shared by all test files.
+ */
+import '@testing-library/jest-dom/vitest';
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// Unmount React trees between tests.
+afterEach(() => {
+  cleanup();
+});
+
+// jsdom does not implement EventSource; give tests a minimal stub so code
+// under test (useSSE) can construct one without exploding. Tests that need
+// to drive SSE events should replace this with their own mock.
+if (typeof (globalThis as any).EventSource === 'undefined') {
+  class StubEventSource {
+    url: string;
+    readyState = 0;
+    onerror: ((ev: unknown) => void) | null = null;
+    onmessage: ((ev: unknown) => void) | null = null;
+    onopen: ((ev: unknown) => void) | null = null;
+    private listeners = new Map<string, Set<(ev: MessageEvent) => void>>();
+
+    constructor(url: string) {
+      this.url = url;
+    }
+
+    addEventListener(type: string, cb: (ev: MessageEvent) => void) {
+      if (!this.listeners.has(type)) this.listeners.set(type, new Set());
+      this.listeners.get(type)!.add(cb);
+    }
+
+    removeEventListener(type: string, cb: (ev: MessageEvent) => void) {
+      this.listeners.get(type)?.delete(cb);
+    }
+
+    /** Test helper: dispatch a named SSE event with a JSON payload. */
+    emit(type: string, data: string) {
+      const ev = new MessageEvent(type, { data });
+      this.listeners.get(type)?.forEach((cb) => cb(ev));
+    }
+
+    close() {
+      this.readyState = 2;
+    }
+  }
+  (globalThis as any).EventSource = StubEventSource;
+}

package/ui/web/src/views/Activity.module.css

@@ -0,0 +1,43 @@
+/**
+ * Activity view layout — timeline + messages tail stacked vertically.
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  height: 100%;
+  overflow-y: auto;
+}
+
+.section {
+  flex: 0 1 auto;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.section:first-child {
+  flex: 0 1 40%;
+}
+
+.section:last-child {
+  flex: 1 1 60%;
+}
+
+/* Responsive: allow more height for each section on small screens */
+@media (max-width: 768px) {
+  .container {
+    gap: var(--space-4);
+  }
+
+  .section:first-child {
+    flex: 0 1 auto;
+    min-height: auto;
+  }
+
+  .section:last-child {
+    flex: 1 1 auto;
+    min-height: 250px;
+  }
+}

package/ui/web/src/views/Activity.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * Activity view — agent timeline + main-thread messages tail.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Activity from './Activity';
+import { fixtureAgents, fixtureMessages } from '../test/fixtures';
+import { TESTIDS } from '../test/fixtures';
+import type { FullState } from '../lib/types';
+
+describe('Activity view', () => {
+  const fixtureState: FullState = {
+    data: {
+      watchdog: { alive: 'ALIVE', age: 3, threshold: 300 },
+      monitor: { alive: 'ALIVE', age: 45, threshold: 3600 },
+      agents: fixtureAgents,
+      repos: [],
+      events: [],
+      alerts: { count: 0, lines: [] },
+      messages: fixtureMessages,
+    },
+    backlog: { tiers: [] },
+    agents: fixtureAgents,
+    tracker: { items: [] },
+    status: { orchestrators: [] },
+  };
+
+  it('renders activity view container with testid', () => {
+    render(<Activity state={fixtureState} />);
+    expect(screen.getByTestId(TESTIDS.viewActivity)).toBeInTheDocument();
+  });
+
+  it('renders timeline component with agents', () => {
+    render(<Activity state={fixtureState} />);
+    expect(screen.getByTestId(TESTIDS.timeline)).toBeInTheDocument();
+    // Timeline should render agent ids
+    fixtureAgents.forEach((agent) => {
+      expect(screen.getByText(agent.id)).toBeInTheDocument();
+    });
+  });
+
+  it('renders messages tail component', () => {
+    render(<Activity state={fixtureState} />);
+    expect(screen.getByTestId(TESTIDS.messagesTail)).toBeInTheDocument();
+    // Should render messages
+    expect(screen.getByText(/Run wave 14/)).toBeInTheDocument();
+  });
+
+  it('shows empty state when no agents or messages', () => {
+    const emptyState: FullState = {
+      ...fixtureState,
+      agents: [],
+      data: {
+        ...fixtureState.data,
+        agents: [],
+        messages: [],
+      },
+    };
+    render(<Activity state={emptyState} />);
+    const timeline = screen.getByTestId(TESTIDS.timeline);
+    expect(timeline.textContent).toContain('no agents');
+  });
+
+  it('handles partial data gracefully (no messages)', () => {
+    const partialState: FullState = {
+      ...fixtureState,
+      data: {
+        ...fixtureState.data,
+        messages: [],
+      },
+    };
+    render(<Activity state={partialState} />);
+    expect(screen.getByTestId(TESTIDS.viewActivity)).toBeInTheDocument();
+    const messagesTail = screen.getByTestId(TESTIDS.messagesTail);
+    expect(messagesTail.textContent).toContain('no messages');
+  });
+
+  it('renders timeline above messages (visual hierarchy)', () => {
+    render(<Activity state={fixtureState} />);
+    const timeline = screen.getByTestId(TESTIDS.timeline);
+    const messagesTail = screen.getByTestId(TESTIDS.messagesTail);
+
+    // Timeline should appear before messages in DOM (by finding their positions)
+    const timelinePosition = timeline.compareDocumentPosition(messagesTail);
+    // DOCUMENT_POSITION_FOLLOWING = 4, meaning timeline comes before messages
+    expect(timelinePosition & 4).toBe(4);
+  });
+});

package/ui/web/src/views/Activity.tsx

@@ -0,0 +1,31 @@
+/**
+ * Activity view — Agent timeline + main-thread messages tail.
+ * Read-only observability: shows agent execution spans and orchestrator reasoning.
+ */
+
+import Timeline from '../components/Timeline';
+import MessagesTail from '../components/MessagesTail';
+import { TESTIDS } from '../test/fixtures';
+import type { SSEState } from '../lib/useSSE';
+import styles from './Activity.module.css';
+
+interface Props {
+  state: Pick<SSEState, 'agents' | 'data'>;
+}
+
+export default function Activity({ state }: Props) {
+  const agents = state.agents || [];
+  const messages = state.data?.messages || [];
+
+  return (
+    <div data-testid={TESTIDS.viewActivity} className={styles.container}>
+      <section className={styles.section}>
+        <Timeline agents={agents} />
+      </section>
+
+      <section className={styles.section}>
+        <MessagesTail messages={messages} />
+      </section>
+    </div>
+  );
+}

package/ui/web/src/views/Cost.css

@@ -0,0 +1,87 @@
+/* Cost view — layout for table, chart, scorecard */
+
+.view-cost {
+  padding: var(--space-5);
+  max-width: var(--content-max-width);
+}
+
+.view-cost h2 {
+  margin-top: 0;
+  margin-bottom: var(--space-5);
+  font-size: var(--font-size-xl);
+  color: var(--color-text);
+}
+
+.view-cost h3 {
+  font-size: var(--font-size-lg);
+  color: var(--color-text);
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-3);
+}
+
+/* Configure pricing callout */
+.cost-callout {
+  padding: var(--space-4);
+  border-left: 4px solid var(--color-accent);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-subtle);
+  margin-bottom: var(--space-5);
+}
+
+.cost-callout h3 {
+  margin-top: 0;
+  margin-bottom: var(--space-2);
+  font-size: var(--font-size-md);
+}
+
+.cost-callout p {
+  margin: 0;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+}
+
+.cost-callout code {
+  background: var(--color-bg-inset);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+.cost-callout--info {
+  border-left-color: var(--color-status-info);
+}
+
+/* Layout for the three sections */
+.cost-layout {
+  display: grid;
+  gap: var(--space-5);
+}
+
+.cost-section {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  background: var(--color-surface);
+}
+
+.cost-section h3 {
+  margin-top: 0;
+  margin-bottom: var(--space-3);
+}
+
+/* Responsive: stack sections vertically on smaller screens */
+@media (max-width: 768px) {
+  .view-cost {
+    padding: var(--space-3);
+  }
+
+  .cost-layout {
+    gap: var(--space-4);
+  }
+
+  .cost-section {
+    padding: var(--space-3);
+  }
+}