@matt82198/aesop 0.1.0-beta.5 → 0.1.0

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

@@ -1,142 +0,0 @@
-/**
- * Cost view tests — composition of CostTable, CostChart, and Scorecard.
- * Tests empty state (has_pricing=false) with configure callout.
- * Tests full state rendering.
- */
-
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Cost } from './Cost';
-import { fixtureCost, fixtureCostWithPricing, TESTIDS } from '../test/fixtures';
-
-describe('Cost view', () => {
-  it('renders with testid', () => {
-    render(<Cost cost={fixtureCost} />);
-    expect(screen.getByTestId(TESTIDS.viewCost)).toBeInTheDocument();
-  });
-
-  it('renders cost table, chart, and scorecard', () => {
-    render(<Cost cost={fixtureCostWithPricing} />);
-    expect(screen.getByTestId(TESTIDS.costTable)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.costChart)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.scorecard)).toBeInTheDocument();
-  });
-
-  describe('tokens-only mode (has_pricing=false)', () => {
-    it('shows "configure pricing" empty-state callout', () => {
-      render(<Cost cost={fixtureCost} />);
-      const view = screen.getByTestId(TESTIDS.viewCost);
-      // Should mention configure or pricing
-      expect(view.textContent).toMatch(/configure|pricing|aesop\.config/i);
-    });
-
-    it('callout references aesop.config.json', () => {
-      render(<Cost cost={fixtureCost} />);
-      const view = screen.getByTestId(TESTIDS.viewCost);
-      expect(view.textContent).toContain('aesop.config.json');
-    });
-
-    it('provides instructions for pricing configuration', () => {
-      render(<Cost cost={fixtureCost} />);
-      const view = screen.getByTestId(TESTIDS.viewCost);
-      // Should have some instructional text
-      expect(view.textContent?.length).toBeGreaterThan(50);
-    });
-
-    it('still renders table and chart even without pricing', () => {
-      render(<Cost cost={fixtureCost} />);
-      // Should show token data even without pricing
-      expect(screen.getByTestId(TESTIDS.costTable)).toBeInTheDocument();
-      expect(screen.getByTestId(TESTIDS.costChart)).toBeInTheDocument();
-    });
-  });
-
-  describe('pricing mode (has_pricing=true)', () => {
-    it('does not show "configure pricing" callout', () => {
-      render(<Cost cost={fixtureCostWithPricing} />);
-      const view = screen.getByTestId(TESTIDS.viewCost);
-      // Should NOT emphasize configuration when pricing exists
-      expect(view.textContent).not.toMatch(/configure pricing/i);
-    });
-
-    it('renders cost columns with dollar amounts', () => {
-      render(<Cost cost={fixtureCostWithPricing} />);
-      const table = screen.getByTestId(TESTIDS.costTable);
-      // Should display pricing info
-      expect(table.innerHTML).toContain('$');
-    });
-  });
-
-  it('renders as a proper section element', () => {
-    render(<Cost cost={fixtureCost} />);
-    const view = screen.getByTestId(TESTIDS.viewCost) as HTMLElement;
-    expect(['SECTION', 'DIV'].includes(view.tagName)).toBe(true);
-  });
-
-  it('has aria-label or heading describing the view', () => {
-    render(<Cost cost={fixtureCost} />);
-    const view = screen.getByTestId(TESTIDS.viewCost);
-    // Should have descriptive content or aria-label
-    expect(view.getAttribute('aria-label') || view.textContent).toBeTruthy();
-  });
-
-  it('layout is readable with all three components visible', () => {
-    render(<Cost cost={fixtureCostWithPricing} />);
-    // Should have all three sections rendered
-    expect(screen.getByTestId(TESTIDS.costTable)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.costChart)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.scorecard)).toBeInTheDocument();
-  });
-
-  it('scorecard displays verdict statistics', () => {
-    render(<Cost cost={fixtureCost} />);
-    // Should show total runs count
-    expect(screen.getByTestId(TESTIDS.scorecard).textContent).toContain('142');
-  });
-
-  it('chart shows per-day trend', () => {
-    render(<Cost cost={fixtureCost} />);
-    const chart = screen.getByTestId(TESTIDS.costChart);
-    // Should render 6 bars for the 3 days (2 per day: in/out)
-    const bars = chart.querySelectorAll('rect[data-day]');
-    expect(bars.length).toBe(6);
-  });
-
-  it('table shows per-model breakdown', () => {
-    render(<Cost cost={fixtureCost} />);
-    const table = screen.getByTestId(TESTIDS.costTable);
-    // Should list haiku and sonnet models
-    expect(table.textContent).toContain('haiku');
-    expect(table.textContent).toContain('sonnet');
-  });
-
-  it('handles cost object with skipped_lines footnote', () => {
-    render(<Cost cost={fixtureCost} />);
-    // scorecard mentions skipped lines when > 0
-    // At least the component renders without error
-    expect(screen.getByTestId(TESTIDS.viewCost)).toBeInTheDocument();
-  });
-
-  it('empty cost (0 runs) still renders all panels', () => {
-    const empty = {
-      ...fixtureCost,
-      models: {},
-      daily_totals: {},
-      overall_scorecard: {
-        total_runs: 0,
-        ok_count: 0,
-        failed_count: 0,
-        empty_count: 0,
-        hung_count: 0,
-        ok_rate: 0,
-        failed_rate: 0,
-        empty_rate: 0,
-        hung_rate: 0,
-      },
-    };
-    render(<Cost cost={empty} />);
-    expect(screen.getByTestId(TESTIDS.viewCost)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.costTable)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.costChart)).toBeInTheDocument();
-  });
-});

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

@@ -1,54 +0,0 @@
-/**
- * Cost view — composition of cost table, chart, and scorecard.
- * Shows per-model breakdowns, per-day trends, and verdict quality metrics.
- * When has_pricing=false, shows a "configure pricing" empty-state callout.
- * When has_pricing=true, displays dollar estimates alongside tokens.
- */
-
-import type { CostSummary } from '../lib/types';
-import { CostTable } from '../components/CostTable';
-import { CostChart } from '../components/CostChart';
-import { Scorecard } from '../components/Scorecard';
-import { TESTIDS } from '../test/fixtures';
-import './Cost.css';
-
-interface CostProps {
-  cost: CostSummary;
-}
-
-export function Cost({ cost }: CostProps) {
-  return (
-    <section className="view-cost" data-testid={TESTIDS.viewCost} aria-label="Cost analytics">
-      <h2>Cost Analytics</h2>
-
-      {!cost.has_pricing && (
-        <div className="cost-callout cost-callout--info" role="status">
-          <h3>Configure Pricing</h3>
-          <p>
-            To see cost estimates, add a <code>pricing</code> map to your{' '}
-            <code>aesop.config.json</code> with per-model input and output rates (e.g.{' '}
-            <code>{'{input: 0.003, output: 0.015}'}</code>). Without pricing, token counts are
-            shown; no estimates are computed.
-          </p>
-        </div>
-      )}
-
-      <div className="cost-layout">
-        <div className="cost-section">
-          <h3>By Model</h3>
-          <CostTable cost={cost} />
-        </div>
-
-        <div className="cost-section">
-          <h3>Daily Trend</h3>
-          <CostChart cost={cost} />
-        </div>
-
-        <div className="cost-section">
-          <h3>Quality Scorecard</h3>
-          <Scorecard cost={cost} />
-        </div>
-      </div>
-    </section>
-  );
-}

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

@@ -1,51 +0,0 @@
-.overview {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-  padding: var(--space-6);
-  max-width: var(--content-max-width);
-  margin: 0 auto;
-  width: 100%;
-}
-
-.overview__section {
-  display: flex;
-  gap: var(--space-5);
-}
-
-.overview__section--full {
-  width: 100%;
-}
-
-.overview__section--row {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-5);
-}
-
-@media (max-width: 1200px) {
-  .overview__section--row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .overview {
-    gap: var(--space-4);
-    padding: var(--space-4);
-  }
-
-  .overview__section {
-    gap: var(--space-3);
-  }
-
-  .overview__section--row {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .overview {
-    scroll-behavior: auto;
-  }
-}

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

@@ -1,76 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Overview } from './Overview';
-import {
-  fixtureAgents,
-  fixtureAlerts,
-  fixtureEvents,
-  fixtureRepos,
-  TESTIDS,
-} from '../test/fixtures';
-
-vi.mock('../components/AgentsPanel', () => ({
-  AgentsPanel: () => <div data-testid="agents-panel-mock">AgentsPanel</div>,
-}));
-
-vi.mock('../components/AlertsPanel', () => ({
-  AlertsPanel: () => <div data-testid="alerts-panel-mock">AlertsPanel</div>,
-}));
-
-vi.mock('../components/EventsFeed', () => ({
-  EventsFeed: () => <div data-testid="events-feed-mock">EventsFeed</div>,
-}));
-
-vi.mock('../components/ReposPanel', () => ({
-  ReposPanel: () => <div data-testid="repos-panel-mock">ReposPanel</div>,
-}));
-
-vi.mock('../components/InboxForm', () => ({
-  InboxForm: () => <div data-testid="inbox-form-mock">InboxForm</div>,
-}));
-
-describe('Overview', () => {
-  it('renders overview view with all components', () => {
-    render(
-      <Overview
-        agents={fixtureAgents}
-        alerts={fixtureAlerts}
-        events={fixtureEvents}
-        repos={fixtureRepos}
-      />
-    );
-
-    expect(screen.getByTestId(TESTIDS.viewOverview)).toBeInTheDocument();
-    expect(screen.getByTestId('agents-panel-mock')).toBeInTheDocument();
-    expect(screen.getByTestId('alerts-panel-mock')).toBeInTheDocument();
-    expect(screen.getByTestId('events-feed-mock')).toBeInTheDocument();
-    expect(screen.getByTestId('repos-panel-mock')).toBeInTheDocument();
-    expect(screen.getByTestId('inbox-form-mock')).toBeInTheDocument();
-  });
-
-  it('handles null values gracefully', () => {
-    render(
-      <Overview
-        agents={null}
-        alerts={null}
-        events={null}
-        repos={null}
-      />
-    );
-
-    expect(screen.getByTestId(TESTIDS.viewOverview)).toBeInTheDocument();
-  });
-
-  it('renders with empty arrays', () => {
-    render(
-      <Overview
-        agents={[]}
-        alerts={{ count: 0, lines: [] }}
-        events={[]}
-        repos={[]}
-      />
-    );
-
-    expect(screen.getByTestId(TESTIDS.viewOverview)).toBeInTheDocument();
-  });
-});

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

@@ -1,46 +0,0 @@
-/**
- * Overview view — main dashboard combining all overview components.
- *
- * Layout:
- * - Top: AgentsPanel (full width)
- * - Middle row: AlertsPanel | EventsFeed | ReposPanel
- * - Bottom: InboxForm
- *
- * Props passed from App.tsx via SSE state.
- */
-
-import type { Agent, Alert } from '../lib/types';
-import { AgentsPanel } from '../components/AgentsPanel';
-import { AlertsPanel } from '../components/AlertsPanel';
-import { EventsFeed } from '../components/EventsFeed';
-import { ReposPanel } from '../components/ReposPanel';
-import { InboxForm } from '../components/InboxForm';
-import { TESTIDS } from '../test/fixtures';
-import './Overview.css';
-
-interface OverviewProps {
-  agents: Agent[] | null;
-  alerts: Alert | null;
-  events: string[] | null;
-  repos: any[] | null;
-}
-
-export function Overview({ agents, alerts, events, repos }: OverviewProps) {
-  return (
-    <div className="overview" data-testid={TESTIDS.viewOverview}>
-      <section className="overview__section overview__section--full">
-        <AgentsPanel agents={agents} />
-      </section>
-
-      <section className="overview__section overview__section--row">
-        <AlertsPanel alerts={alerts} />
-        <EventsFeed events={events} />
-        <ReposPanel repos={repos} />
-      </section>
-
-      <section className="overview__section overview__section--full">
-        <InboxForm />
-      </section>
-    </div>
-  );
-}

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

@@ -1,82 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Work } from './Work';
-import { fixtureTrackerItems, fixtureBacklog, TESTIDS } from '../test/fixtures';
-
-// Mock useSSE hook
-vi.mock('../lib/useSSE', () => ({
-  useSSE: () => ({
-    tracker: { items: fixtureTrackerItems },
-    backlog: fixtureBacklog,
-    data: null,
-    agents: null,
-    status: null,
-    cost: null,
-    connectionStatus: { status: 'live' as const },
-  }),
-}));
-
-describe('Work view', () => {
-  it('renders the work view with correct testid', () => {
-    render(<Work />);
-
-    expect(screen.getByTestId(TESTIDS.viewWork)).toBeInTheDocument();
-  });
-
-  it('renders tracker board heading', () => {
-    render(<Work />);
-
-    expect(screen.getByText('Tracker Kanban')).toBeInTheDocument();
-  });
-
-  it('renders the add item button', () => {
-    render(<Work />);
-
-    const addButton = screen.getByRole('button', { name: /Add Item/ });
-    expect(addButton).toBeInTheDocument();
-  });
-
-  it('shows form when add item button is clicked', () => {
-    render(<Work />);
-
-    const addButton = screen.getByRole('button', { name: /Add Item/ });
-    expect(addButton).toHaveAttribute('aria-expanded', 'false');
-
-    // Form inputs should not be visible initially
-    expect(screen.queryByLabelText('Title')).not.toBeInTheDocument();
-  });
-
-  it('displays tracker board with items', () => {
-    render(<Work />);
-
-    expect(screen.getByTestId(TESTIDS.trackerBoard)).toBeInTheDocument();
-  });
-
-  it('displays backlog panel', () => {
-    render(<Work />);
-
-    expect(screen.getByTestId(TESTIDS.backlogPanel)).toBeInTheDocument();
-  });
-
-  it('renders all tracker lanes', () => {
-    render(<Work />);
-
-    // Be specific to avoid duplicate "Done" matching
-    // Lane headers include counts, e.g., "Proposed1", so check by prefix
-    const sections = screen.getAllByRole('heading', { level: 2 });
-    const laneTexts = sections.map((s) => s.textContent || '');
-
-    expect(laneTexts.some((t) => t.startsWith('Proposed'))).toBe(true);
-    expect(laneTexts.some((t) => t.startsWith('Ranked'))).toBe(true);
-    expect(laneTexts.some((t) => t.startsWith('In Progress'))).toBe(true);
-  });
-
-  it('renders backlog audit tier headers', () => {
-    render(<Work />);
-
-    expect(screen.getByText('Audit Backlog')).toBeInTheDocument();
-    // Use context to avoid matching P0 in tracker cards
-    const backlogPanel = screen.getByTestId(TESTIDS.backlogPanel);
-    expect(backlogPanel.textContent).toContain('P0');
-  });
-});

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

@@ -1,79 +0,0 @@
-/**
- * Work view — tracker kanban board + backlog panel + form.
- * Binds TrackerBoard, TrackerCard, TrackerForm, BacklogPanel.
- * Reads tracker + backlog from SSE, allows mutations.
- */
-
-import { useEffect, useState } from 'react';
-import { useSSE } from '../lib/useSSE';
-import { TrackerBoard } from '../components/TrackerBoard';
-import { TrackerForm } from '../components/TrackerForm';
-import { BacklogPanel } from '../components/BacklogPanel';
-import { TESTIDS } from '../test/fixtures';
-import type { TrackerItem, AuditBacklog } from '../lib/types';
-import '../styles/work.css';
-
-export function Work() {
-  const sse = useSSE();
-  const [trackerItems, setTrackerItems] = useState<TrackerItem[]>([]);
-  const [backlog, setBacklog] = useState<AuditBacklog | null>(null);
-  const [showForm, setShowForm] = useState(false);
-
-  useEffect(() => {
-    if (sse.tracker?.items !== undefined && sse.tracker?.items !== null) {
-      setTrackerItems(sse.tracker.items);
-    } else if (sse.tracker === null) {
-      // Treat null items as empty array
-      setTrackerItems([]);
-    }
-  }, [sse.tracker]);
-
-  useEffect(() => {
-    if (sse.backlog) {
-      setBacklog(sse.backlog);
-    }
-  }, [sse.backlog]);
-
-  const handleItemUpdate = (updated: TrackerItem) => {
-    setTrackerItems((prev) =>
-      prev.map((item) => (item.id === updated.id ? updated : item))
-    );
-  };
-
-  const handleFormSuccess = () => {
-    setShowForm(false);
-    // Tracker board will update via SSE
-  };
-
-  return (
-    <section className="work-view" data-testid={TESTIDS.viewWork} aria-label="Work view">
-      <div className="work-container">
-        <div className="work-board">
-          <div className="board-header">
-            <h2>Tracker Kanban</h2>
-            <button
-              type="button"
-              className="add-item-button"
-              onClick={() => setShowForm(!showForm)}
-              aria-expanded={showForm}
-            >
-              {showForm ? 'Cancel' : '+ Add Item'}
-            </button>
-          </div>
-
-          {showForm && (
-            <div className="form-container">
-              <TrackerForm onSuccess={handleFormSuccess} />
-            </div>
-          )}
-
-          <TrackerBoard items={trackerItems} onUpdate={handleItemUpdate} />
-        </div>
-
-        <aside className="work-sidebar">
-          <BacklogPanel backlog={backlog} />
-        </aside>
-      </div>
-    </section>
-  );
-}

package/ui/web/src/vite-env.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="vite/client" />
-
-interface Window {
-  /**
-   * CSRF token injected by ui/render.py's sentinel substitution in the built
-   * index.html; absent on the raw Vite dev server (api.ts then falls back to
-   * GET /api/session).
-   */
-  __AESOP_CSRF_TOKEN__?: string;
-}

package/ui/web/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}

package/ui/web/vite.config.ts

@@ -1,25 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 5173,
-    proxy: {
-      '/data': 'http://localhost:8770',
-      '/api': 'http://localhost:8770',
-      '/agent': 'http://localhost:8770',
-      '/events': 'http://localhost:8770',
-      '/submit': 'http://localhost:8770',
-    },
-  },
-  build: {
-    outDir: 'dist',
-    sourcemap: false,
-    rollupOptions: {
-      output: {
-        manualChunks: undefined,
-      },
-    },
-  },
-});

package/ui/web/vitest.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: 'jsdom',
-    setupFiles: ['src/test/setup.ts'],
-    globals: true,
-    include: ['src/**/*.test.{ts,tsx}'],
-  },
-});