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

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

@@ -0,0 +1,126 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BacklogPanel } from './BacklogPanel';
+import { fixtureBacklog } from '../test/fixtures';
+import { TESTIDS } from '../test/fixtures';
+
+describe('BacklogPanel', () => {
+  it('renders empty state when backlog is null', () => {
+    render(<BacklogPanel backlog={null} />);
+
+    expect(screen.getByText('No backlog items')).toBeInTheDocument();
+  });
+
+  it('renders empty state when backlog has no tiers', () => {
+    render(<BacklogPanel backlog={{ tiers: [] }} />);
+
+    expect(screen.getByText('No backlog items')).toBeInTheDocument();
+  });
+
+  it('renders backlog title and audit tiers', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    expect(screen.getByText('Audit Backlog')).toBeInTheDocument();
+    expect(screen.getByText('P0')).toBeInTheDocument();
+    expect(screen.getByText('P1')).toBeInTheDocument();
+  });
+
+  it('displays tier counts (done, inflight, todo)', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    // P0 tier has done: 1, inflight: 1, todo: 1
+    expect(screen.getByText('1 done, 1 inflight, 1 todo')).toBeInTheDocument();
+
+    // P1 tier has done: 0, inflight: 0, todo: 1
+    expect(screen.getByText('0 done, 0 inflight, 1 todo')).toBeInTheDocument();
+  });
+
+  it('renders progress bar segments with correct widths', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    const doneSegments = screen.getAllByLabelText(/done/);
+    expect(doneSegments.length).toBeGreaterThan(0);
+
+    // P0 has 1/3 done, so should be 33%
+    const p0DoneSegment = doneSegments[0];
+    expect(p0DoneSegment).toHaveStyle('width: 33.33333333333333%');
+  });
+
+  it('renders progress bar for all segment types', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    // P0 tier should have all three segment types
+    const allSegments = screen.getAllByLabelText(/(done|in flight|to do)/);
+    expect(allSegments.length).toBeGreaterThan(0);
+  });
+
+  it('renders all backlog items with status emoji and tags', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    // P0 items: "Origin fail-closed on /api/session", etc.
+    expect(screen.getByText('Origin fail-closed on /api/session')).toBeInTheDocument();
+    expect(screen.getByText('Dashboard rewrite foundation (U1)')).toBeInTheDocument();
+    expect(screen.getByText('Cutover / to dist index (U9)')).toBeInTheDocument();
+
+    // Check that tags are present
+    expect(screen.getAllByText('[sec]').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('[ui]').length).toBeGreaterThan(0);
+  });
+
+  it('skips rendering tiers with zero items', () => {
+    const emptyTier = {
+      tier: 'P0' as const,
+      items: [],
+      done: 0,
+      inflight: 0,
+      todo: 0,
+      total: 0,
+    };
+
+    const backlog = {
+      tiers: [emptyTier, fixtureBacklog.tiers[0]],
+    };
+
+    render(<BacklogPanel backlog={backlog} />);
+
+    // Should render P0 from fixture but not the empty one
+    expect(screen.getByText('Dashboard rewrite foundation (U1)')).toBeInTheDocument();
+  });
+
+  it('has correct testid and renders panel container', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    const panel = screen.getByTestId(TESTIDS.backlogPanel);
+    expect(panel).toBeInTheDocument();
+  });
+
+  it('status emojis have proper aria-labels', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    // Look for aria-labels on status emojis
+    const statusSpans = screen.getAllByLabelText(/Done|In progress|To do|Blocked/);
+    expect(statusSpans.length).toBeGreaterThan(0);
+
+    statusSpans.forEach((span) => {
+      expect(span).toHaveAttribute('aria-label');
+    });
+  });
+
+  it('progress segments have proper titles and aria-labels', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    const doneSegments = screen.getAllByLabelText(/done/);
+    doneSegments.forEach((segment) => {
+      expect(segment).toHaveAttribute('title');
+      expect(segment).toHaveAttribute('aria-label');
+    });
+  });
+
+  it('renders P1 tier items correctly', () => {
+    render(<BacklogPanel backlog={fixtureBacklog} />);
+
+    // P1 items from fixture
+    expect(screen.getByText('SSE keepalive tuning')).toBeInTheDocument();
+    expect(screen.getByText('Hierarchical orchestration seams')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,122 @@
+/**
+ * BacklogPanel — Audit backlog with tier progress bars.
+ * Shows done/in-flight/todo counts and a list of items per tier.
+ * Handles overflow with fade-out effect, empty state.
+ */
+
+import { TESTIDS } from '../test/fixtures';
+import type { AuditBacklog } from '../lib/types';
+
+interface BacklogPanelProps {
+  backlog: AuditBacklog | null;
+}
+
+function statusEmoji(status: string): string {
+  switch (status) {
+    case '✅':
+      return '✅';
+    case '🔵':
+      return '🔵';
+    case '⬜':
+      return '⬜';
+    case '⏸':
+      return '⏸';
+    default:
+      return '❓';
+  }
+}
+
+function statusLabel(status: string): string {
+  switch (status) {
+    case '✅':
+      return 'Done';
+    case '🔵':
+      return 'In progress';
+    case '⬜':
+      return 'To do';
+    case '⏸':
+      return 'Blocked';
+    default:
+      return 'Unknown';
+  }
+}
+
+export function BacklogPanel({ backlog }: BacklogPanelProps) {
+  if (!backlog || backlog.tiers.length === 0) {
+    return (
+      <div className="backlog-panel" data-testid={TESTIDS.backlogPanel}>
+        <h3>Audit Backlog</h3>
+        <p className="empty-state">No backlog items</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="backlog-panel" data-testid={TESTIDS.backlogPanel}>
+      <h3>Audit Backlog</h3>
+
+      {backlog.tiers.map((tier) => {
+        const total = tier.total;
+        if (total === 0) return null;
+
+        const donePercent = total > 0 ? (tier.done / total) * 100 : 0;
+        const inflightPercent = total > 0 ? (tier.inflight / total) * 100 : 0;
+        const todoPercent = total > 0 ? (tier.todo / total) * 100 : 0;
+
+        return (
+          <div key={tier.tier} className="backlog-tier">
+            <div className="tier-header">
+              <h4>{tier.tier}</h4>
+              <span className="tier-counts">
+                {tier.done} done, {tier.inflight} inflight, {tier.todo} todo
+              </span>
+            </div>
+
+            <div className="tier-progress-bar">
+              {tier.done > 0 && (
+                <div
+                  className="progress-segment done"
+                  style={{ width: `${donePercent}%` }}
+                  title={`Done: ${tier.done}`}
+                  aria-label={`${tier.done} items done`}
+                />
+              )}
+              {tier.inflight > 0 && (
+                <div
+                  className="progress-segment inflight"
+                  style={{ width: `${inflightPercent}%` }}
+                  title={`In flight: ${tier.inflight}`}
+                  aria-label={`${tier.inflight} items in flight`}
+                />
+              )}
+              {tier.todo > 0 && (
+                <div
+                  className="progress-segment todo"
+                  style={{ width: `${todoPercent}%` }}
+                  title={`To do: ${tier.todo}`}
+                  aria-label={`${tier.todo} items to do`}
+                />
+              )}
+            </div>
+
+            <div className="tier-items-list">
+              {tier.items.map((item, idx) => (
+                <div key={idx} className="backlog-item">
+                  <span
+                    className="item-status"
+                    title={statusLabel(item.status)}
+                    aria-label={statusLabel(item.status)}
+                  >
+                    {statusEmoji(item.status)}
+                  </span>
+                  <span className="item-tag">{item.tag}</span>
+                  <span className="item-title">{item.title}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/ui/web/src/components/CostChart.css

@@ -0,0 +1,110 @@
+/* CostChart — SVG bar chart for daily token usage */
+
+.chart-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.chart-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 250px;
+  padding: var(--space-6);
+  text-align: center;
+}
+
+.chart-empty-message {
+  margin: 0 0 var(--space-2) 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.chart-empty-hint {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.cost-chart-svg {
+  max-width: 100%;
+  height: auto;
+  overflow: visible;
+  display: block;
+}
+
+.chart-footer {
+  padding: var(--space-2) var(--space-4);
+  border-top: 1px solid var(--color-border-subtle);
+  background: var(--color-bg);
+  text-align: right;
+  font-size: var(--font-size-xs);
+}
+
+.chart-footer-timestamp {
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+}
+
+/* Chart axes and styling */
+.chart-axis {
+  stroke: var(--color-border);
+  stroke-width: 2;
+}
+
+.chart-label-x,
+.chart-label-y {
+  font-size: 12px;
+  fill: var(--color-text-muted);
+  font-family: var(--font-sans);
+}
+
+/* Bar segments — stacked bars showing in/out tokens */
+.bar-segment {
+  stroke: var(--color-border-subtle);
+  stroke-width: 0.5;
+  transition: opacity var(--transition-fast);
+  cursor: pointer;
+}
+
+.bar-segment:hover {
+  opacity: 0.8;
+}
+
+.bar-input {
+  fill: var(--color-status-info);
+}
+
+.bar-output {
+  fill: var(--color-accent);
+}
+
+/* Legend */
+.chart-legend {
+  font-size: 12px;
+}
+
+.legend-text {
+  fill: var(--color-text-muted);
+  font-family: var(--font-sans);
+  font-size: 12px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .cost-chart-svg {
+    width: 100%;
+  }
+
+  .chart-label-x,
+  .chart-label-y,
+  .legend-text {
+    font-size: 10px;
+  }
+}

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

@@ -0,0 +1,144 @@
+/**
+ * CostChart component tests — pure SVG bar chart for per-day tokens.
+ * Tests empty data, single day, many days, axis labels, titles.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { CostChart } from './CostChart';
+import { fixtureCost, fixtureCostWithPricing, TESTIDS } from '../test/fixtures';
+
+describe('CostChart', () => {
+  it('renders chart with testid', () => {
+    render(<CostChart cost={fixtureCost} />);
+    expect(screen.getByTestId(TESTIDS.costChart)).toBeInTheDocument();
+  });
+
+  it('renders as an SVG element (inside container)', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('renders bars for each day in daily_totals', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg') as SVGElement;
+    // fixture has 3 days: 2026-07-11, 2026-07-12, 2026-07-13
+    // Each day has 2 bars (input and output), so 6 rects total
+    const rects = svg.querySelectorAll('rect[data-day]');
+    expect(rects.length).toBe(6);
+  });
+
+  it('sets data-day attribute on each bar for testability', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg') as SVGElement;
+    expect(svg.querySelector('rect[data-day="2026-07-11"]')).toBeInTheDocument();
+    expect(svg.querySelector('rect[data-day="2026-07-12"]')).toBeInTheDocument();
+    expect(svg.querySelector('rect[data-day="2026-07-13"]')).toBeInTheDocument();
+  });
+
+  it('includes <title> elements for accessibility on each bar', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg') as SVGElement;
+    const titles = svg.querySelectorAll('title');
+    expect(titles.length).toBeGreaterThan(0);
+  });
+
+  it('scales bars proportionally to token counts', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg') as SVGElement;
+    const day11 = svg.querySelector('rect[data-day="2026-07-11"]') as SVGElement;
+    const day12 = svg.querySelector('rect[data-day="2026-07-12"]') as SVGElement;
+    // day11: 1204000 tokens, day12: 986170 tokens
+    // day11 should be taller than day12
+    const height11 = parseFloat(day11?.getAttribute('height') || '0');
+    const height12 = parseFloat(day12?.getAttribute('height') || '0');
+    expect(height11).toBeGreaterThan(height12);
+  });
+
+  it('handles single day without breaking layout', () => {
+    const single = {
+      ...fixtureCost,
+      daily_totals: {
+        '2026-07-13': fixtureCost.daily_totals['2026-07-13'],
+      },
+    };
+    render(<CostChart cost={single} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg') as SVGElement;
+    const rects = svg.querySelectorAll('rect[data-day]');
+    // Single day has 2 bars (input and output)
+    expect(rects.length).toBe(2);
+  });
+
+  it('handles empty daily_totals gracefully', () => {
+    const empty = {
+      ...fixtureCost,
+      daily_totals: {},
+    };
+    render(<CostChart cost={empty} />);
+    const chart = screen.getByTestId(TESTIDS.costChart);
+    // Should still render (possibly with placeholder or empty state)
+    expect(chart).toBeInTheDocument();
+  });
+
+  it('provides axis labels for readability', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg') as SVGElement;
+    // Should have text elements for dates or axis labels
+    const texts = svg.querySelectorAll('text');
+    expect(texts.length).toBeGreaterThan(0);
+  });
+
+  it('uses theme color tokens (no hex colors)', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg') as SVGElement;
+    // Should use CSS vars, not inline hex
+    const style = svg.getAttribute('style') || '';
+    expect(style).not.toMatch(/#[0-9a-fA-F]{3,6}(?![0-9a-fA-F])/);
+  });
+
+  it('works with pricing fixture', () => {
+    render(<CostChart cost={fixtureCostWithPricing} />);
+    expect(screen.getByTestId(TESTIDS.costChart)).toBeInTheDocument();
+  });
+
+  it('does not overflow parent container', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg');
+    const viewBox = svg?.getAttribute('viewBox');
+    expect(viewBox).toBeTruthy();
+    // SVG should use viewBox for responsive scaling
+  });
+
+  it('clamping: does not break with extreme token counts', () => {
+    const extreme = {
+      ...fixtureCost,
+      daily_totals: {
+        '2026-07-13': {
+          tokens_in: 999999999,
+          tokens_out: 999999999,
+        },
+      },
+    };
+    render(<CostChart cost={extreme} />);
+    expect(screen.getByTestId(TESTIDS.costChart)).toBeInTheDocument();
+  });
+
+  it('chart has proper SVG structure (g elements for groups)', () => {
+    render(<CostChart cost={fixtureCost} />);
+    const container = screen.getByTestId(TESTIDS.costChart);
+    const svg = container.querySelector('svg') as SVGElement;
+    // Should use <g> for grouping logical elements
+    const groups = svg.querySelectorAll('g');
+    expect(groups.length).toBeGreaterThan(0);
+  });
+});

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

@@ -0,0 +1,152 @@
+/**
+ * CostChart component — pure SVG bar chart showing per-day token usage.
+ * No external chart libraries; uses SVG primitives (<rect>, <text>, <title>).
+ * Responsive via viewBox; theme colors via CSS variables.
+ * Handles empty data, single day, and many days gracefully.
+ */
+
+import type { CostSummary } from '../lib/types';
+import { formatTimestamp } from '../lib/format';
+import { TESTIDS } from '../test/fixtures';
+import './CostChart.css';
+
+interface CostChartProps {
+  cost: CostSummary;
+}
+
+export function CostChart({ cost }: CostChartProps) {
+  const { daily_totals, overall_scorecard } = cost;
+  const days = Object.keys(daily_totals).sort();
+  const lastDayKey = days.length > 0 ? days[days.length - 1] : null;
+
+  if (days.length === 0 || overall_scorecard.total_runs === 0) {
+    return (
+      <div className="chart-container" data-testid={TESTIDS.costChart}>
+        <div className="chart-empty">
+          <p className="chart-empty-message">No ledger data yet</p>
+          <p className="chart-empty-hint">Cost data will appear as agents complete runs.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Calculate max for scaling
+  const allTokens = days.flatMap((day) => [
+    daily_totals[day].tokens_in,
+    daily_totals[day].tokens_out,
+  ]);
+  const maxTokens = Math.max(...allTokens, 1);
+
+  // SVG layout
+  const SVG_WIDTH = 600;
+  const SVG_HEIGHT = 250;
+  const CHART_MARGIN = 40;
+  const CHART_AREA_WIDTH = SVG_WIDTH - CHART_MARGIN * 2;
+  const CHART_AREA_HEIGHT = SVG_HEIGHT - CHART_MARGIN * 2;
+  const BAR_WIDTH = CHART_AREA_WIDTH / (days.length * 2.5);
+  const BAR_GROUP_SPACING = BAR_WIDTH * 1.5;
+
+  return (
+    <div className="chart-container" data-testid={TESTIDS.costChart}>
+      <svg
+        viewBox={`0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`}
+        className="cost-chart-svg"
+        role="img"
+        aria-label="Daily token usage by model"
+      >
+      {/* Axes */}
+      <line
+        x1={CHART_MARGIN}
+        y1={SVG_HEIGHT - CHART_MARGIN}
+        x2={SVG_WIDTH - CHART_MARGIN}
+        y2={SVG_HEIGHT - CHART_MARGIN}
+        className="chart-axis"
+      />
+      <line
+        x1={CHART_MARGIN}
+        y1={CHART_MARGIN}
+        x2={CHART_MARGIN}
+        y2={SVG_HEIGHT - CHART_MARGIN}
+        className="chart-axis"
+      />
+
+      {/* Y-axis label */}
+      <text x={15} y={CHART_MARGIN} className="chart-label-y">
+        Tokens
+      </text>
+
+      {/* Bars and labels */}
+      {days.map((day, i) => {
+        const totals = daily_totals[day];
+        const totalTokens = totals.tokens_in + totals.tokens_out;
+        const barHeight = (totalTokens / maxTokens) * CHART_AREA_HEIGHT;
+        const xPos = CHART_MARGIN + i * BAR_GROUP_SPACING;
+
+        return (
+          <g key={day} className="bar-group">
+            {/* Stacked bar */}
+            <g>
+              {/* Input tokens (bottom) */}
+              <rect
+                x={xPos}
+                y={SVG_HEIGHT - CHART_MARGIN - (totals.tokens_in / maxTokens) * CHART_AREA_HEIGHT}
+                width={BAR_WIDTH * 0.35}
+                height={(totals.tokens_in / maxTokens) * CHART_AREA_HEIGHT}
+                className="bar-segment bar-input"
+                data-day={day}
+              >
+                <title>
+                  {day}: {totals.tokens_in.toLocaleString()} tokens in
+                </title>
+              </rect>
+
+              {/* Output tokens (top) */}
+              <rect
+                x={xPos + BAR_WIDTH * 0.4}
+                y={SVG_HEIGHT - CHART_MARGIN - barHeight}
+                width={BAR_WIDTH * 0.35}
+                height={(totals.tokens_out / maxTokens) * CHART_AREA_HEIGHT}
+                className="bar-segment bar-output"
+                data-day={day}
+              >
+                <title>
+                  {day}: {totals.tokens_out.toLocaleString()} tokens out
+                </title>
+              </rect>
+            </g>
+
+            {/* Date label */}
+            <text
+              x={xPos + BAR_WIDTH * 0.35}
+              y={SVG_HEIGHT - CHART_MARGIN + 20}
+              className="chart-label-x"
+              textAnchor="middle"
+            >
+              {day.split('-')[2]}
+            </text>
+          </g>
+        );
+      })}
+
+      {/* Legend */}
+      <g className="chart-legend">
+        <rect x={SVG_WIDTH - 150} y={15} width={12} height={12} className="bar-input" />
+        <text x={SVG_WIDTH - 135} y={25} className="legend-text">
+          In
+        </text>
+
+        <rect x={SVG_WIDTH - 150} y={35} width={12} height={12} className="bar-output" />
+        <text x={SVG_WIDTH - 135} y={45} className="legend-text">
+          Out
+        </text>
+      </g>
+      </svg>
+
+      {lastDayKey && (
+        <div className="chart-footer">
+          <span className="chart-footer-timestamp">updated {formatTimestamp(lastDayKey + 'T23:59:59Z')}</span>
+        </div>
+      )}
+    </div>
+  );
+}