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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+{
+  "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

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

@@ -0,0 +1,12 @@
+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}'],
+  },
+});