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

package/ui/web/src/components/Timeline.module.css

@@ -0,0 +1,151 @@
+/**
+ * Timeline styling — horizontal status-colored bars per agent.
+ */
+
+.container {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-subtle);
+  padding: var(--space-4);
+}
+
+.title {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.timelineContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 160px 1fr 80px;
+  gap: var(--space-3);
+  align-items: center;
+}
+
+.rowLabel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-size: var(--font-size-sm);
+  overflow: hidden;
+}
+
+.agentId {
+  font-family: var(--font-mono);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+  word-break: break-all;
+}
+
+.agentStatus {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+}
+
+.barContainer {
+  height: 24px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  position: relative;
+}
+
+.bar {
+  height: 100%;
+  border-radius: var(--radius-sm);
+  transition: width var(--transition-normal);
+  min-width: 5%;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: var(--space-2);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-inverse);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* Status color classes */
+.status-ok {
+  background: var(--color-status-ok);
+}
+
+.status-info {
+  background: var(--color-status-info);
+}
+
+.status-warn {
+  background: var(--color-status-warn);
+}
+
+.status-error {
+  background: var(--color-status-error);
+}
+
+.status-neutral {
+  background: var(--color-status-neutral);
+}
+
+.rowDuration {
+  text-align: right;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-mono);
+  color: var(--color-text-muted);
+  min-width: 60px;
+}
+
+.footer {
+  margin-top: var(--space-4);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-border-subtle);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+.legend {
+  display: inline-block;
+  line-height: var(--line-height-normal);
+}
+
+/* Responsive: stack on small screens */
+@media (max-width: 768px) {
+  .row {
+    grid-template-columns: 1fr;
+    gap: var(--space-2);
+  }
+
+  .rowLabel {
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-2);
+    align-items: baseline;
+  }
+
+  .barContainer {
+    order: 3;
+    grid-column: 1;
+  }
+
+  .rowDuration {
+    order: 2;
+    text-align: left;
+  }
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .bar {
+    transition: none;
+  }
+}

package/ui/web/src/components/Timeline.test.tsx

@@ -0,0 +1,215 @@
+/**
+ * Timeline — Horizontal per-agent bars from startedAt/lastActivity/runtimeSeconds.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Timeline from './Timeline';
+import { fixtureAgents } from '../test/fixtures';
+import { TESTIDS } from '../test/fixtures';
+import type { Agent } from '../lib/types';
+
+describe('Timeline', () => {
+  it('renders timeline container with testid', () => {
+    render(<Timeline agents={fixtureAgents} />);
+    expect(screen.getByTestId(TESTIDS.timeline)).toBeInTheDocument();
+  });
+
+  it('renders one bar per agent', () => {
+    render(<Timeline agents={fixtureAgents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBe(fixtureAgents.length);
+  });
+
+  it('shows agent id in bar label', () => {
+    render(<Timeline agents={fixtureAgents} />);
+    fixtureAgents.forEach((agent) => {
+      expect(screen.getByText(agent.id)).toBeInTheDocument();
+    });
+  });
+
+  it('shows agent status in bar label', () => {
+    render(<Timeline agents={fixtureAgents} />);
+    const statusElements = screen.getAllByText(/running/i);
+    expect(statusElements.length).toBeGreaterThan(0); // At least one "running"
+    // Check for idle and SUSPICIOUS in aria-labels instead
+    fixtureAgents.forEach((agent) => {
+      const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+      const agentBar = bars.find((bar) => bar.getAttribute('aria-label')?.includes(agent.id));
+      expect(agentBar?.getAttribute('aria-label')).toContain(agent.status);
+    });
+  });
+
+  it('shows runtime duration in bar label', () => {
+    render(<Timeline agents={fixtureAgents} />);
+    // Should format the runtimeSeconds as a human-readable duration
+    // First agent has runtimeSeconds: 1776, which is 29m 36s
+    const container = screen.getByTestId(TESTIDS.timeline);
+    const text = container.textContent || '';
+    expect(text).toContain('29m'); // Should contain formatted duration
+  });
+
+  it('applies status-based color to bars via theme tokens', () => {
+    render(<Timeline agents={fixtureAgents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBeGreaterThan(0);
+
+    // Check that bars have role-based styling (via CSS class or style)
+    bars.forEach((bar) => {
+      const style = window.getComputedStyle(bar);
+      // Color should be set via theme tokens (will be computed CSS variable)
+      expect(style.backgroundColor || style.color).toBeDefined();
+    });
+  });
+
+  it('handles missing startedAt gracefully (null)', () => {
+    const agents: Agent[] = [
+      {
+        ...fixtureAgents[0],
+        startedAt: null,
+      },
+    ];
+    render(<Timeline agents={agents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBe(1);
+    expect(bars[0]).toBeInTheDocument();
+    // Should still show agent id and status
+    expect(screen.getByText(agents[0].id)).toBeInTheDocument();
+  });
+
+  it('handles missing lastActivity gracefully (null)', () => {
+    const agents: Agent[] = [
+      {
+        ...fixtureAgents[0],
+        lastActivity: null,
+      },
+    ];
+    render(<Timeline agents={agents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBe(1);
+    expect(bars[0]).toBeInTheDocument();
+  });
+
+  it('handles garbage/invalid ISO timestamps (falls back to sensible default)', () => {
+    const agents: Agent[] = [
+      {
+        ...fixtureAgents[0],
+        startedAt: 'not-a-date',
+        lastActivity: 'garbage',
+      },
+    ];
+    render(<Timeline agents={agents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBe(1);
+    expect(bars[0]).toBeInTheDocument();
+    // Should not throw, should render with fallback values
+    expect(screen.getByText(agents[0].id)).toBeInTheDocument();
+  });
+
+  it('clamps timeline when runtimeSeconds is 0 or negative', () => {
+    const agents: Agent[] = [
+      {
+        ...fixtureAgents[0],
+        runtimeSeconds: -5,
+      },
+    ];
+    render(<Timeline agents={agents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBe(1);
+    const bar = bars[0];
+    expect(bar).toBeInTheDocument();
+    // Should render without NaN or invalid dimensions
+    const style = window.getComputedStyle(bar);
+    expect(style.width).not.toContain('NaN');
+  });
+
+  it('clamps timeline when runtimeSeconds is extremely large', () => {
+    const agents: Agent[] = [
+      {
+        ...fixtureAgents[0],
+        runtimeSeconds: 999999999,
+      },
+    ];
+    render(<Timeline agents={agents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBe(1);
+    const bar = bars[0];
+    expect(bar).toBeInTheDocument();
+    // Should not overflow, should be clamped
+    const style = window.getComputedStyle(bar);
+    expect(style.width).not.toContain('NaN');
+  });
+
+  it('computes bar width proportionally from startedAt to lastActivity', () => {
+    const now = new Date().toISOString();
+    const oneHourAgo = new Date(Date.now() - 3600000).toISOString();
+    const agents: Agent[] = [
+      {
+        ...fixtureAgents[0],
+        startedAt: oneHourAgo,
+        lastActivity: now,
+      },
+    ];
+    render(<Timeline agents={agents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBe(1);
+    const bar = bars[0];
+    expect(bar).toBeInTheDocument();
+    // Bar should have a width reflecting the time span
+    const style = window.getComputedStyle(bar);
+    expect(style.width).toBeDefined();
+    expect(style.width).not.toBe('0px');
+  });
+
+  it('shows empty state when no agents', () => {
+    render(<Timeline agents={[]} />);
+    const container = screen.getByTestId(TESTIDS.timeline);
+    expect(container.textContent).toContain('no agents');
+  });
+
+  it('each bar is a labeled element for accessibility', () => {
+    render(<Timeline agents={fixtureAgents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    bars.forEach((bar, i) => {
+      const agent = fixtureAgents[i];
+      // Should have aria-label or be a semantic element with accessible name
+      const label = bar.getAttribute('aria-label') || bar.textContent || '';
+      expect(label).toContain(agent.id);
+      expect(label).toContain(agent.status);
+    });
+  });
+
+  it('handles all status colors: running, idle, SUSPICIOUS, HIGH, DRIFT, MED', () => {
+    const agentsWithStatuses: Agent[] = [
+      { ...fixtureAgents[0], status: 'running' },
+      { ...fixtureAgents[0], id: 'idle-agent', status: 'idle' },
+      { ...fixtureAgents[0], id: 'sus-agent', status: 'SUSPICIOUS' },
+      { ...fixtureAgents[0], id: 'high-agent', status: 'HIGH' },
+      { ...fixtureAgents[0], id: 'drift-agent', status: 'DRIFT' },
+      { ...fixtureAgents[0], id: 'med-agent', status: 'MED' },
+    ];
+    render(<Timeline agents={agentsWithStatuses} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBe(6);
+  });
+
+  it('respects prefers-reduced-motion for animations', () => {
+    // Mock matchMedia to return reduced motion preference
+    const mockMatchMedia = (query: string) => ({
+      matches: query === '(prefers-reduced-motion: reduce)',
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => true,
+    });
+    Object.defineProperty(window, 'matchMedia', { value: mockMatchMedia, writable: true });
+
+    render(<Timeline agents={fixtureAgents} />);
+    const bars = screen.getAllByTestId(TESTIDS.timelineBar);
+    expect(bars.length).toBeGreaterThan(0);
+    // Should render without issues even with reduced motion preference
+  });
+});

package/ui/web/src/components/Timeline.tsx

@@ -0,0 +1,99 @@
+/**
+ * Timeline — Horizontal per-agent bars from startedAt/lastActivity/runtimeSeconds.
+ * Bars are status-colored via theme tokens. Includes sensible clamping for edge cases.
+ */
+
+import { formatAge } from '../lib/format';
+import { TESTIDS } from '../test/fixtures';
+import type { Agent } from '../lib/types';
+import styles from './Timeline.module.css';
+
+interface Props {
+  agents: Agent[];
+}
+
+// Status to CSS class mapping
+function getStatusClass(status: string): string {
+  if (status === 'running') return 'status-ok';
+  if (status === 'idle') return 'status-info';
+  if (status === 'SUSPICIOUS' || status === 'HIGH') return 'status-error';
+  if (status === 'DRIFT' || status === 'MED') return 'status-warn';
+  return 'status-neutral';
+}
+
+// Compute bar width percentage based on time span
+function computeBarWidth(startedAt: string | null, lastActivity: string | null, runtimeSeconds: number): number {
+  // If we have both timestamps, use them to compute the span
+  if (startedAt && lastActivity) {
+    try {
+      const start = new Date(startedAt).getTime();
+      const end = new Date(lastActivity).getTime();
+      const span = (end - start) / 1000; // convert to seconds
+
+      if (span > 0) {
+        // Progress from start to end relative to runtime
+        const progress = Math.min(span / Math.max(runtimeSeconds, 1), 1);
+        return Math.max(5, Math.min(100, progress * 100)); // Clamp between 5% and 100%
+      }
+    } catch (err) {
+      // Fall through to runtime-based calculation
+    }
+  }
+
+  // Fallback: use runtimeSeconds to estimate visibility
+  if (runtimeSeconds > 0) {
+    // Clamp very large values
+    const clamped = Math.min(runtimeSeconds, 86400); // Max 1 day
+    return Math.max(5, Math.min(100, (clamped / 3600) * 10)); // Normalize to 5-100%
+  }
+
+  return 10; // Default minimum width
+}
+
+export default function Timeline({ agents }: Props) {
+  if (agents.length === 0) {
+    return (
+      <div data-testid={TESTIDS.timeline} className={styles.container}>
+        <h3 className={styles.title}>Agent Timeline</h3>
+        <div className={styles.emptyState}>(no agents)</div>
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid={TESTIDS.timeline} className={styles.container}>
+      <h3 className={styles.title}>Agent Timeline</h3>
+      <div className={styles.timelineContent}>
+        {agents.map((agent) => {
+          const barWidth = computeBarWidth(agent.startedAt, agent.lastActivity, agent.runtimeSeconds ?? 0);
+          const statusClass = getStatusClass(agent.status);
+          const duration = formatAge(agent.runtimeSeconds ?? 0);
+
+          return (
+            <div key={agent.id} className={styles.row}>
+              <div className={styles.rowLabel}>
+                <span className={styles.agentId}>{agent.id}</span>
+                <span className={styles.agentStatus}>{agent.status}</span>
+              </div>
+              <div className={styles.barContainer}>
+                <div
+                  data-testid={TESTIDS.timelineBar}
+                  className={`${styles.bar} ${styles[statusClass]}`}
+                  style={{ width: `${barWidth}%` }}
+                  aria-label={`Agent ${agent.id} (${agent.status}, ${duration})`}
+                  role="presentation"
+                />
+              </div>
+              <div className={styles.rowDuration}>{duration}</div>
+            </div>
+          );
+        })}
+      </div>
+      <div className={styles.footer}>
+        <span className={styles.legend}>
+          Green = running · Blue = idle · Orange = warn/drift · Red = error/suspicious
+        </span>
+      </div>
+    </div>
+  );
+}

package/ui/web/src/components/TrackerBoard.test.tsx

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { TrackerBoard } from './TrackerBoard';
+import { fixtureTrackerItems } from '../test/fixtures';
+import { TESTIDS } from '../test/fixtures';
+
+describe('TrackerBoard', () => {
+  it('renders all 4 lanes', () => {
+    render(<TrackerBoard items={fixtureTrackerItems} />);
+
+    // Use role queries to be specific about lane headers
+    // Lane headers have format: "LaneName <span>Count</span>"
+    // So we need to check if the text starts with the lane name
+    const headers = screen.getAllByRole('heading', { level: 2 });
+    const laneNames = headers.map((h) => {
+      // Get the text before the count span
+      const firstNode = h.firstChild;
+      if (firstNode && firstNode.nodeType === Node.TEXT_NODE) {
+        return firstNode.textContent?.trim() || '';
+      }
+      return h.textContent || '';
+    });
+
+    expect(laneNames.some((name) => name.includes('Proposed'))).toBe(true);
+    expect(laneNames.some((name) => name.includes('Ranked'))).toBe(true);
+    expect(laneNames.some((name) => name.includes('In Progress'))).toBe(true);
+  });
+
+  it('buckets items correctly by lane', () => {
+    render(<TrackerBoard items={fixtureTrackerItems} />);
+
+    // fixtureTrackerItems[0] has lane: 'in-progress'
+    // fixtureTrackerItems[1] has lane: 'done'
+    // fixtureTrackerItems[2] has lane: 'ranked'
+    // fixtureTrackerItems[3] has lane: 'proposed'
+    // fixtureTrackerItems[4] has lane: 'done' (archived status)
+
+    expect(screen.getByText('Dashboard rewrite: foundation scaffold')).toBeInTheDocument();
+    expect(screen.getByText('Cost collector parses OUTCOMES-LEDGER.md')).toBeInTheDocument();
+    expect(screen.getByText('Agent timeline read-only v1')).toBeInTheDocument();
+    expect(screen.getByText('Replay slider for agent timeline')).toBeInTheDocument();
+  });
+
+  it('displays lane counts with accessible labels', () => {
+    render(<TrackerBoard items={fixtureTrackerItems} />);
+
+    // Should have accessible labels for counts
+    const laneCountSpans = screen.getAllByLabelText(/items in/);
+    expect(laneCountSpans.length).toBeGreaterThan(0);
+
+    laneCountSpans.forEach((span) => {
+      expect(span).toHaveAttribute('aria-label');
+    });
+  });
+
+  it('routes unknown lanes to proposed', () => {
+    const unknownLaneItem = {
+      ...fixtureTrackerItems[0],
+      lane: 'undefined-lane' as any,
+    };
+
+    render(<TrackerBoard items={[unknownLaneItem]} />);
+
+    // Should appear under Proposed
+    const proposedLane = screen.getByText('Proposed').closest('section');
+    expect(proposedLane).toBeInTheDocument();
+    expect(proposedLane?.textContent).toContain(unknownLaneItem.title);
+  });
+
+  it('separates archived items from active lanes', () => {
+    const archivedItem = fixtureTrackerItems[4]; // status: archived
+    expect(archivedItem.status).toBe('archived');
+
+    render(<TrackerBoard items={[archivedItem]} />);
+
+    // Should appear in archived section, not in any lane
+    expect(screen.getByText('Archived (1)')).toBeInTheDocument();
+    expect(screen.getByText(archivedItem.title)).toBeInTheDocument();
+  });
+
+  it('shows archived summary with item count', () => {
+    const archived1 = { ...fixtureTrackerItems[1], status: 'archived' as const };
+    const archived2 = { ...fixtureTrackerItems[4], status: 'archived' as const };
+
+    render(<TrackerBoard items={[archived1, archived2]} />);
+
+    expect(screen.getByText('Archived (2)')).toBeInTheDocument();
+  });
+
+  it('lanes with no items show "No items" placeholder', () => {
+    const singleItem = fixtureTrackerItems.slice(0, 1); // only 1 item in in-progress
+
+    render(<TrackerBoard items={singleItem} />);
+
+    const emptyMessages = screen.getAllByText('No items');
+    expect(emptyMessages.length).toBeGreaterThan(0); // At least 3 empty lanes
+  });
+
+  it('renders tracker cards in each lane', () => {
+    render(<TrackerBoard items={fixtureTrackerItems} />);
+
+    const cards = screen.getAllByTestId(TESTIDS.trackerCard);
+    // Should have 4 active cards (5 total minus 1 archived)
+    expect(cards.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it('bucket test: unknown lane maps to proposed', () => {
+    const testItems = [
+      {
+        ...fixtureTrackerItems[0],
+        lane: 'some-random-lane' as any,
+        title: 'Unknown lane item',
+      },
+    ];
+
+    render(<TrackerBoard items={testItems} />);
+
+    const proposedSection = screen.getByText('Proposed').closest('section');
+    expect(proposedSection?.textContent).toContain('Unknown lane item');
+  });
+});

package/ui/web/src/components/TrackerBoard.tsx

@@ -0,0 +1,107 @@
+/**
+ * TrackerBoard — kanban-style layout with 4 lanes + archived summary.
+ * Lane bucketing: proposed/ranked/in-progress/done.
+ * Unknown lanes -> proposed. Empty lanes compact.
+ * Lane counts with accessible labels and health badges.
+ */
+
+import { TESTIDS } from '../test/fixtures';
+import type { TrackerItem } from '../lib/types';
+import { TrackerCard } from './TrackerCard';
+
+interface TrackerBoardProps {
+  items: TrackerItem[];
+  onUpdate?: (item: TrackerItem) => void;
+}
+
+const LANE_ORDER = ['proposed', 'ranked', 'in-progress', 'done'] as const;
+type Lane = (typeof LANE_ORDER)[number];
+
+function getLaneLabel(lane: Lane): string {
+  return {
+    proposed: 'Proposed',
+    ranked: 'Ranked',
+    'in-progress': 'In Progress',
+    done: 'Done',
+  }[lane];
+}
+
+function normalizeLane(lane: string | undefined): Lane {
+  const normalized = lane?.toLowerCase();
+  if (LANE_ORDER.includes(normalized as Lane)) {
+    return normalized as Lane;
+  }
+  return 'proposed'; // unknown lane -> proposed
+}
+
+export function TrackerBoard({ items, onUpdate }: TrackerBoardProps) {
+  // Separate active items from archived
+  const activeItems = items.filter((item) => item.status !== 'archived');
+  const archivedItems = items.filter((item) => item.status === 'archived');
+
+  // Bucket active items by lane
+  const laneMap = new Map<Lane, TrackerItem[]>();
+  LANE_ORDER.forEach((lane) => laneMap.set(lane, []));
+
+  activeItems.forEach((item) => {
+    const lane = normalizeLane(item.lane);
+    laneMap.get(lane)?.push(item);
+  });
+
+  // Render lanes
+  const renderedLanes = LANE_ORDER.map((lane) => {
+    const items = laneMap.get(lane) || [];
+
+    // Calculate health badge info (done/total where derivable)
+    let badgeText = `${items.length} items`;
+    if (lane === 'done') {
+      badgeText = `${items.length}/${items.length} done`;
+    } else if (items.length > 0) {
+      const doneCount = items.filter((item) => item.status === 'done').length;
+      if (doneCount > 0) {
+        badgeText = `${doneCount}/${items.length} done`;
+      }
+    }
+
+    return (
+      <section key={lane} className="tracker-lane" data-testid={TESTIDS.trackerLane}>
+        <h2 className="lane-header">
+          {getLaneLabel(lane)}
+          <span
+            className={`lane-badge ${items.length === 0 ? 'lane-badge--empty' : 'lane-badge--active'}`}
+            aria-label={`${badgeText} in ${getLaneLabel(lane)}`}
+          >
+            {badgeText}
+          </span>
+        </h2>
+        <div className="lane-content">
+          {items.length === 0 ? (
+            <p className="lane-empty">No items</p>
+          ) : (
+            items.map((item) => <TrackerCard key={item.id} item={item} onUpdate={onUpdate} />)
+          )}
+        </div>
+      </section>
+    );
+  });
+
+  return (
+    <div className="tracker-board" data-testid={TESTIDS.trackerBoard}>
+      <div className="lanes-container">{renderedLanes}</div>
+
+      {archivedItems.length > 0 && (
+        <section className="archived-summary">
+          <h3>Archived ({archivedItems.length})</h3>
+          <ul className="archived-list">
+            {archivedItems.map((item) => (
+              <li key={item.id} className="archived-item">
+                <span className="archived-title">{item.title}</span>
+                <span className="archived-priority">{item.priority}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+}