@matt82198/aesop 0.1.0-beta.5 → 0.1.0

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

@@ -1,93 +0,0 @@
-/* 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

@@ -1,165 +0,0 @@
-/**
- * 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

@@ -1,94 +0,0 @@
-/**
- * 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

@@ -1,68 +0,0 @@
-.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

@@ -1,36 +0,0 @@
-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

@@ -1,31 +0,0 @@
-/**
- * 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

@@ -1,137 +0,0 @@
-.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;
-  }
-}