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

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

@@ -0,0 +1,93 @@
+/* CostTable — per-model cost and token display */
+
+.cost-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  background: var(--color-surface);
+}
+
+.cost-table caption {
+  text-align: left;
+  padding: var(--space-2);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  caption-side: top;
+}
+
+.cost-table thead {
+  background: var(--color-bg-inset);
+  border-bottom: 2px solid var(--color-border);
+}
+
+.cost-table th {
+  padding: var(--space-2) var(--space-3);
+  text-align: left;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
+.cost-table th.col-numeric {
+  text-align: right;
+}
+
+.cost-table tbody tr {
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.cost-table tbody tr:hover {
+  background: var(--color-bg-subtle);
+}
+
+.cost-table td {
+  padding: var(--space-2) var(--space-3);
+  text-align: left;
+  color: var(--color-text);
+}
+
+.cost-table td.col-numeric {
+  text-align: right;
+  font-family: var(--font-mono);
+}
+
+.cost-table .model-name {
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  word-break: break-word;
+  max-width: 180px;
+}
+
+/* Verdict severity indicators */
+.cost-table .verdict-failed {
+  color: var(--color-status-error);
+}
+
+.cost-table .verdict-empty {
+  color: var(--color-status-warn);
+}
+
+.cost-table .verdict-hung {
+  color: var(--color-status-error);
+}
+
+/* Total cost column emphasis */
+.cost-table .col-total {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Responsive: overflow on smaller screens */
+@media (max-width: 768px) {
+  .cost-table {
+    font-size: var(--font-size-xs);
+  }
+
+  .cost-table th,
+  .cost-table td {
+    padding: var(--space-1) var(--space-2);
+  }
+
+  .cost-table .model-name {
+    max-width: 100px;
+  }
+}

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

@@ -0,0 +1,165 @@
+/**
+ * CostTable component tests — per-model cost and token display.
+ * Tests tokens-only mode (no pricing) and pricing mode separately.
+ * Tests proper table semantics, caption, thead/tbody, scope attributes.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { CostTable } from './CostTable';
+import { fixtureCost, fixtureCostWithPricing, TESTIDS } from '../test/fixtures';
+
+describe('CostTable', () => {
+  it('renders table with testid', () => {
+    render(<CostTable cost={fixtureCost} />);
+    expect(screen.getByTestId(TESTIDS.costTable)).toBeInTheDocument();
+  });
+
+  it('renders as a proper <table> element', () => {
+    render(<CostTable cost={fixtureCost} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    expect(table.tagName).toBe('TABLE');
+  });
+
+  it('has a caption describing the table', () => {
+    render(<CostTable cost={fixtureCost} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    const caption = table.querySelector('caption');
+    expect(caption).toBeInTheDocument();
+    expect(caption?.textContent).toBeTruthy();
+  });
+
+  it('has proper thead and tbody structure', () => {
+    render(<CostTable cost={fixtureCost} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    expect(table.querySelector('thead')).toBeInTheDocument();
+    expect(table.querySelector('tbody')).toBeInTheDocument();
+  });
+
+  it('has column headers with scope="col"', () => {
+    render(<CostTable cost={fixtureCost} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    const ths = table.querySelectorAll('th[scope="col"]');
+    expect(ths.length).toBeGreaterThan(0);
+  });
+
+  it('lists all models in fixture data', () => {
+    render(<CostTable cost={fixtureCost} />);
+    expect(screen.getByText(/haiku/i)).toBeInTheDocument();
+    expect(screen.getByText(/sonnet/i)).toBeInTheDocument();
+  });
+
+  it('displays runs count for each model', () => {
+    render(<CostTable cost={fixtureCost} />);
+    // haiku has 128 runs
+    expect(screen.getByText('128')).toBeInTheDocument();
+    // sonnet has 14 runs
+    expect(screen.getByText('14')).toBeInTheDocument();
+  });
+
+  it('displays token counts in readable format (e.g., "2.1M")', () => {
+    render(<CostTable cost={fixtureCost} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    // haiku tokens_in is 2140050, should display as "2.1M"
+    expect(table.textContent).toContain('2.1M');
+  });
+
+  it('displays verdict counts (OK/FAILED/EMPTY/HUNG)', () => {
+    render(<CostTable cost={fixtureCost} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    // haiku has verdicts: OK: 119, FAILED: 6, EMPTY: 2, HUNG: 1
+    expect(table.textContent).toContain('119');
+    expect(table.textContent).toContain('6');
+    expect(table.textContent).toContain('2');
+    expect(table.textContent).toContain('1');
+  });
+
+  describe('tokens-only mode (no pricing)', () => {
+    it('shows tokens columns but no currency columns when has_pricing=false', () => {
+      render(<CostTable cost={fixtureCost} />);
+      const table = screen.getByTestId(TESTIDS.costTable);
+      // Should have "tokens in/out" headers (case-insensitive)
+      expect(table.textContent).toMatch(/tokens\s+in/i);
+      expect(table.textContent).toMatch(/tokens\s+out/i);
+      // Should NOT have a $ symbol (currency) or "estimate" label
+      expect(table.innerHTML).not.toContain('$');
+    });
+  });
+
+  describe('pricing mode', () => {
+    it('shows currency columns labeled "estimate" when has_pricing=true', () => {
+      render(<CostTable cost={fixtureCostWithPricing} />);
+      const table = screen.getByTestId(TESTIDS.costTable);
+      // Should show "estimate" label for pricing
+      expect(table.textContent).toContain('estimate');
+      // Should show $ symbols
+      expect(table.innerHTML).toContain('$');
+    });
+
+    it('displays dollar amounts for input cost', () => {
+      render(<CostTable cost={fixtureCostWithPricing} />);
+      const table = screen.getByTestId(TESTIDS.costTable);
+      // haiku input_cost is 2.14
+      expect(table.textContent).toContain('2.14');
+    });
+
+    it('displays dollar amounts for output cost', () => {
+      render(<CostTable cost={fixtureCostWithPricing} />);
+      const table = screen.getByTestId(TESTIDS.costTable);
+      // haiku output_cost is 2.05
+      expect(table.textContent).toContain('2.05');
+    });
+
+    it('displays total cost', () => {
+      render(<CostTable cost={fixtureCostWithPricing} />);
+      const table = screen.getByTestId(TESTIDS.costTable);
+      // haiku total_cost is 4.19
+      expect(table.textContent).toContain('4.19');
+    });
+  });
+
+  it('handles single row (1 model) without breaking layout', () => {
+    const single = {
+      ...fixtureCost,
+      models: {
+        'claude-haiku-4-5-20251001': fixtureCost.models['claude-haiku-4-5-20251001'],
+      },
+    };
+    render(<CostTable cost={single} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    const rows = table.querySelectorAll('tbody tr');
+    expect(rows.length).toBe(1);
+  });
+
+  it('handles many rows without breaking layout', () => {
+    const many = {
+      ...fixtureCost,
+      models: {
+        ...fixtureCost.models,
+        'model-1': {
+          runs: 10,
+          tokens_in: 1000,
+          tokens_out: 500,
+          verdicts: { OK: 9, FAILED: 1, EMPTY: 0, HUNG: 0 },
+        },
+        'model-2': {
+          runs: 20,
+          tokens_in: 2000,
+          tokens_out: 1000,
+          verdicts: { OK: 18, FAILED: 2, EMPTY: 0, HUNG: 0 },
+        },
+      },
+    };
+    render(<CostTable cost={many} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    const rows = table.querySelectorAll('tbody tr');
+    expect(rows.length).toBeGreaterThan(2);
+  });
+
+  it('uses theme color tokens (no hex colors in output)', () => {
+    render(<CostTable cost={fixtureCost} />);
+    const table = screen.getByTestId(TESTIDS.costTable);
+    // Should not have inline hex color styles
+    expect(table.innerHTML).not.toMatch(/#[0-9a-fA-F]{3,6}(?![0-9a-fA-F])/);
+  });
+});

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

@@ -0,0 +1,94 @@
+/**
+ * CostTable component — per-model cost and token summary table.
+ * Proper table semantics: caption, thead with scope="col", tbody.
+ * Columns: Model | Runs | Tokens In | Tokens Out | Verdicts (OK/FAILED/EMPTY/HUNG) | [Pricing if has_pricing]
+ * Dollar columns labeled "estimate" when pricing is available.
+ * Uses formatTokens() for readable token display.
+ */
+
+import type { CostSummary, CostModelStats } from '../lib/types';
+import { formatTokens, formatCurrency } from '../lib/format';
+import { TESTIDS } from '../test/fixtures';
+import './CostTable.css';
+
+interface CostTableProps {
+  cost: CostSummary;
+}
+
+export function CostTable({ cost }: CostTableProps) {
+  const { models, has_pricing, estimates_by_model } = cost;
+  const modelIds = Object.keys(models).sort();
+
+  return (
+    <table className="cost-table" data-testid={TESTIDS.costTable}>
+      <caption>Per-model cost and token usage summary</caption>
+      <thead>
+        <tr>
+          <th scope="col">Model</th>
+          <th scope="col" className="col-numeric">
+            Runs
+          </th>
+          <th scope="col" className="col-numeric">
+            Tokens In
+          </th>
+          <th scope="col" className="col-numeric">
+            Tokens Out
+          </th>
+          <th scope="col" className="col-numeric">
+            OK
+          </th>
+          <th scope="col" className="col-numeric">
+            FAILED
+          </th>
+          <th scope="col" className="col-numeric">
+            EMPTY
+          </th>
+          <th scope="col" className="col-numeric">
+            HUNG
+          </th>
+          {has_pricing && (
+            <>
+              <th scope="col" className="col-numeric">
+                Input (estimate)
+              </th>
+              <th scope="col" className="col-numeric">
+                Output (estimate)
+              </th>
+              <th scope="col" className="col-numeric">
+                Total (estimate)
+              </th>
+            </>
+          )}
+        </tr>
+      </thead>
+      <tbody>
+        {modelIds.map((modelId) => {
+          const stats = models[modelId] as CostModelStats;
+          const estimate = has_pricing ? estimates_by_model[modelId] : null;
+
+          return (
+            <tr key={modelId}>
+              <td className="model-name">{modelId}</td>
+              <td className="col-numeric">{stats.runs}</td>
+              <td className="col-numeric">{formatTokens(stats.tokens_in)}</td>
+              <td className="col-numeric">{formatTokens(stats.tokens_out)}</td>
+              <td className="col-numeric">{stats.verdicts.OK}</td>
+              <td className="col-numeric verdict-failed">{stats.verdicts.FAILED}</td>
+              <td className="col-numeric verdict-empty">{stats.verdicts.EMPTY}</td>
+              <td className="col-numeric verdict-hung">{stats.verdicts.HUNG}</td>
+              {has_pricing && estimate && (
+                <>
+                  <td className="col-numeric">{formatCurrency(estimate.input_cost)}</td>
+                  <td className="col-numeric">{formatCurrency(estimate.output_cost)}</td>
+                  <td className="col-numeric col-total">
+                    {formatCurrency(estimate.total_cost)}
+                  </td>
+                </>
+              )}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}

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

@@ -0,0 +1,68 @@
+.events-feed {
+  flex: 1;
+  min-width: 0;
+  padding: var(--space-5);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.events-feed h2 {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
+.events-feed__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.events-feed__item {
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-bg-inset);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-muted);
+}
+
+.events-feed__item code {
+  font-family: var(--font-mono);
+  color: var(--color-text);
+  word-break: break-word;
+}
+
+.empty-state {
+  padding: var(--space-4);
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+@media (max-width: 768px) {
+  .events-feed {
+    padding: var(--space-3);
+  }
+
+  .events-feed h2 {
+    font-size: var(--font-size-md);
+  }
+
+  .events-feed__list {
+    max-height: 200px;
+  }
+
+  .events-feed__item {
+    padding: var(--space-2);
+    font-size: var(--font-size-xs);
+  }
+}

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

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { EventsFeed } from './EventsFeed';
+import { fixtureEvents, TESTIDS } from '../test/fixtures';
+
+describe('EventsFeed', () => {
+  it('renders events list', () => {
+    render(<EventsFeed events={fixtureEvents} />);
+
+    expect(screen.getByTestId(TESTIDS.eventsFeed)).toBeInTheDocument();
+    fixtureEvents.forEach((event) => {
+      expect(screen.getByText(event)).toBeInTheDocument();
+    });
+  });
+
+  it('renders empty state when no events', () => {
+    render(<EventsFeed events={[]} />);
+
+    expect(screen.getByText('No events.')).toBeInTheDocument();
+  });
+
+  it('renders empty state when events is null', () => {
+    render(<EventsFeed events={null} />);
+
+    expect(screen.getByText('No events.')).toBeInTheDocument();
+  });
+
+  it('displays events in monospace font', () => {
+    render(<EventsFeed events={fixtureEvents} />);
+
+    const codeElements = screen.getAllByText(/BACKUP|SCAN|PUSH/);
+    codeElements.forEach((el) => {
+      expect(el.tagName).toBe('CODE');
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+/**
+ * EventsFeed — FLEET-BACKUP.log tail (recent events).
+ */
+
+import { TESTIDS } from '../test/fixtures';
+import './EventsFeed.css';
+
+interface EventsFeedProps {
+  events: string[] | null;
+}
+
+export function EventsFeed({ events }: EventsFeedProps) {
+  const hasEvents = events && events.length > 0;
+
+  return (
+    <section className="events-feed" data-testid={TESTIDS.eventsFeed}>
+      <h2>Recent Events</h2>
+      {!hasEvents ? (
+        <p className="empty-state">No events.</p>
+      ) : (
+        <ul className="events-feed__list">
+          {events.map((event, idx) => (
+            <li key={idx} className="events-feed__item">
+              <code>{event}</code>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,137 @@
+.health-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--space-3) var(--space-5);
+}
+
+.health-header__cells {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  align-items: center;
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+}
+
+.health-header__cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-fast), border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.health-header__cell:hover {
+  background: var(--color-bg-inset);
+  border-color: var(--color-border);
+}
+
+.health-header__cell:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.health-header__label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.health-header__status {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
+.health-header__count {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-accent);
+}
+
+.health-header__badge {
+  display: inline-block;
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-status-warn-bg);
+  color: var(--color-status-warn);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+}
+
+.health-header__icon {
+  font-size: var(--font-size-lg);
+  line-height: 1;
+}
+
+.health-header__cell--sse {
+  cursor: default;
+}
+
+.health-header__cell--sse:hover {
+  background: var(--color-bg-subtle);
+  border-color: var(--color-border-subtle);
+}
+
+.health-header__cell--timestamp {
+  cursor: default;
+}
+
+.health-header__cell--timestamp:hover {
+  background: var(--color-bg-subtle);
+  border-color: var(--color-border-subtle);
+}
+
+.health-header__cell--stale {
+  background: var(--color-status-warn-bg);
+  border-color: var(--color-status-warn);
+}
+
+.health-header__cell--stale:hover {
+  background: var(--color-status-warn-bg);
+  border-color: var(--color-status-warn);
+}
+
+.health-header__cell--theme,
+.health-header__cell--refresh {
+  margin-left: auto;
+}
+
+@media (max-width: 768px) {
+  .health-header {
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .health-header__cells {
+    gap: var(--space-3);
+  }
+
+  .health-header__cell {
+    padding: var(--space-2);
+    font-size: var(--font-size-xs);
+  }
+
+  .health-header__count {
+    font-size: var(--font-size-md);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .health-header__cell {
+    transition: none;
+  }
+}