@matt82198/aesop 0.1.0-beta.5 → 0.1.0

package/ui/web/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "aesop-ui-web",
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "test": "vitest"
-  },
-  "dependencies": {
-    "react": "19.2.7",
-    "react-dom": "19.2.7"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "6.0.3",
-    "jsdom": "29.1.1",
-    "typescript": "6.0.2",
-    "vite": "8.1.1",
-    "vitest": "4.1.10"
-  }
-}

package/ui/web/src/App.test.tsx

@@ -1,74 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, screen, act, fireEvent } from '@testing-library/react';
-import App from './App';
-import { TESTIDS } from './test/fixtures';
-
-function setHash(hash: string) {
-  window.location.hash = hash;
-  window.dispatchEvent(new HashChangeEvent('hashchange'));
-}
-
-afterEach(() => {
-  window.location.hash = '';
-  document.documentElement.removeAttribute('data-theme');
-  localStorage.clear();
-});
-
-describe('App shell', () => {
-  it('renders the health header and nav', () => {
-    render(<App />);
-    expect(screen.getByTestId(TESTIDS.healthHeader)).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Overview' })).toHaveAttribute('href', '#/');
-    expect(screen.getByRole('link', { name: 'Work' })).toHaveAttribute('href', '#/work');
-    expect(screen.getByRole('link', { name: 'Activity' })).toHaveAttribute('href', '#/activity');
-    expect(screen.getByRole('link', { name: 'Cost' })).toHaveAttribute('href', '#/cost');
-  });
-
-  it('renders the overview placeholder by default', () => {
-    render(<App />);
-    expect(screen.getByTestId(TESTIDS.viewOverview)).toBeInTheDocument();
-  });
-
-  it('switches views on hash change', () => {
-    render(<App />);
-    act(() => setHash('#/work'));
-    expect(screen.getByTestId(TESTIDS.viewWork)).toBeInTheDocument();
-    expect(screen.queryByTestId(TESTIDS.viewOverview)).not.toBeInTheDocument();
-
-    act(() => setHash('#/cost'));
-    expect(screen.getByTestId(TESTIDS.viewCost)).toBeInTheDocument();
-
-    act(() => setHash('#/activity'));
-    expect(screen.getByTestId(TESTIDS.viewActivity)).toBeInTheDocument();
-  });
-
-  it('marks the active tab with aria-current', () => {
-    render(<App />);
-    act(() => setHash('#/work'));
-    expect(screen.getByRole('link', { name: 'Work' })).toHaveAttribute('aria-current', 'page');
-    expect(screen.getByRole('link', { name: 'Overview' })).not.toHaveAttribute('aria-current');
-  });
-
-  it('exposes the SSE connection status as a live region', () => {
-    render(<App />);
-    const status = screen.getByTestId(TESTIDS.sseStatus);
-    expect(status).toHaveAttribute('role', 'status');
-    expect(status).toHaveAttribute('aria-live', 'polite');
-  });
-
-  it('theme toggle is a real button and persists to localStorage', () => {
-    render(<App />);
-    const toggle = screen.getByTestId(TESTIDS.themeToggle);
-    expect(toggle.tagName).toBe('BUTTON');
-
-    fireEvent.click(toggle);
-    const stored = localStorage.getItem('aesop-theme');
-    expect(stored === 'light' || stored === 'dark').toBe(true);
-    expect(document.documentElement.getAttribute('data-theme')).toBe(stored);
-
-    // Toggling again flips the theme
-    fireEvent.click(toggle);
-    const flipped = localStorage.getItem('aesop-theme');
-    expect(flipped).not.toBe(stored);
-  });
-});

package/ui/web/src/App.tsx

@@ -1,142 +0,0 @@
-/**
- * App shell — sticky HealthHeader slot + hash-tab nav + view slots (D4).
- *
- * U1 renders placeholder views; U4–U7 replace the placeholders with real
- * components. The header slot, nav, theme toggle, and SSE plumbing are the
- * stable shell contract.
- *
- * A11y baseline (D5): all interactive elements are real <button>/<a>,
- * nav uses aria-current="page", the SSE status is a role="status" live region.
- */
-import { useCallback, useEffect, useState } from 'react';
-import { useHashRoute, type Route } from './lib/useHashRoute';
-import { useSSE } from './lib/useSSE';
-import { HealthHeader } from './components/HealthHeader';
-import { Overview } from './views/Overview';
-import { Work } from './views/Work';
-import Activity from './views/Activity';
-import { Cost } from './views/Cost';
-import { TESTIDS } from './test/fixtures';
-
-const THEME_STORAGE_KEY = 'aesop-theme';
-type Theme = 'light' | 'dark' | null; // null = follow OS preference
-
-function readStoredTheme(): Theme {
-  try {
-    const v = localStorage.getItem(THEME_STORAGE_KEY);
-    return v === 'light' || v === 'dark' ? v : null;
-  } catch {
-    return null;
-  }
-}
-
-function applyTheme(theme: Theme) {
-  const root = document.documentElement;
-  if (theme === null) {
-    root.removeAttribute('data-theme');
-  } else {
-    root.setAttribute('data-theme', theme);
-  }
-}
-
-function useTheme() {
-  const [theme, setTheme] = useState<Theme>(readStoredTheme);
-
-  useEffect(() => {
-    applyTheme(theme);
-    try {
-      if (theme === null) {
-        localStorage.removeItem(THEME_STORAGE_KEY);
-      } else {
-        localStorage.setItem(THEME_STORAGE_KEY, theme);
-      }
-    } catch {
-      // localStorage unavailable (private mode) — theme still applies for this session
-    }
-  }, [theme]);
-
-  const toggle = useCallback(() => {
-    setTheme((prev) => {
-      const osPrefersDark =
-        typeof matchMedia !== 'undefined' &&
-        matchMedia('(prefers-color-scheme: dark)').matches;
-      const effective = prev ?? (osPrefersDark ? 'dark' : 'light');
-      return effective === 'dark' ? 'light' : 'dark';
-    });
-  }, []);
-
-  return { theme, toggle };
-}
-
-const NAV_ITEMS: Array<{ hash: Route; label: string }> = [
-  { hash: '#/', label: 'Overview' },
-  { hash: '#/work', label: 'Work' },
-  { hash: '#/activity', label: 'Activity' },
-  { hash: '#/cost', label: 'Cost' },
-];
-
-function Placeholder({ name, testid }: { name: string; testid: string }) {
-  return (
-    <section className="view-placeholder" data-testid={testid} aria-label={`${name} view`}>
-      <h2>{name}</h2>
-      <p>{name} view lands in a later unit of wave 14.</p>
-    </section>
-  );
-}
-
-export default function App() {
-  const route = useHashRoute();
-  const sseState = useSSE();
-  const { toggle } = useTheme();
-  const [dataTimestamp, setDataTimestamp] = useState<number | null>(null);
-
-  const connection = sseState.connectionStatus;
-
-  // Update timestamp whenever any SSE section updates
-  useEffect(() => {
-    if (sseState.data || sseState.agents || sseState.tracker || sseState.cost) {
-      setDataTimestamp(Date.now());
-    }
-  }, [sseState.data, sseState.agents, sseState.tracker, sseState.cost]);
-
-  const handleRefresh = useCallback(() => {
-    window.location.reload();
-  }, []);
-
-  return (
-    <>
-      <HealthHeader
-        watchdog={sseState.data?.watchdog ?? null}
-        monitor={sseState.data?.monitor ?? null}
-        orchestrator={sseState.status ?? null}
-        agents={sseState.agents ?? null}
-        alerts={sseState.data?.alerts ?? null}
-        connectionStatus={connection}
-        dataTimestamp={dataTimestamp}
-        onThemeToggle={toggle}
-        onRefresh={handleRefresh}
-      />
-      <nav className="app-nav" aria-label="Views">
-        {NAV_ITEMS.map(({ hash, label }) => (
-          <a key={hash} href={hash} aria-current={route === hash ? 'page' : undefined} className="app-nav__link">
-            {label}
-          </a>
-        ))}
-      </nav>
-      <main className="app-main">
-        {route === '#/' && (
-          <Overview
-            agents={sseState.agents ?? null}
-            alerts={sseState.data?.alerts ?? null}
-            events={sseState.data?.events ?? null}
-            repos={sseState.data?.repos ?? null}
-          />
-        )}
-        {route === '#/work' && <Work />}
-        {route === '#/activity' && <Activity state={sseState} />}
-        {route === '#/cost' &&
-          (sseState.cost ? <Cost cost={sseState.cost} /> : <Placeholder name="Cost" testid={TESTIDS.viewCost} />)}
-      </main>
-    </>
-  );
-}

package/ui/web/src/CONTRIBUTING-UI.md

@@ -1,49 +0,0 @@
-# Contributing to the Aesop dashboard UI — the rules (one page)
-
-These are the baseline rules every component in `ui/web/src/` must follow.
-They are enforced by the wave-14 proofs (`tools/verify_dash.py` + vitest); a
-violation is a CI failure, not a style nit.
-
-## Interactive elements are real elements
-
-- Anything clickable is a `<button type="button">` (actions) or an `<a href>`
-  (navigation). **Never** a `div`/`span` with `onClick`/`tabIndex` — the old
-  dashboard's div-with-tabIndex pattern is banned (plan D5).
-- Anything focusable must show the focus ring. Do not add `outline: none`
-  anywhere; `global.css` already provides `:focus-visible` rings.
-- Form controls get a `<label>` (visually hidden with `.sr-only` if needed).
-
-## data-testid contract
-
-- Every testid comes from the `TESTIDS` map in `src/test/fixtures.ts`.
-  Add new ids there first; never inline a bare string. U8's Playwright proofs
-  assert only via these hooks — renaming one breaks CI.
-
-## Types and fixtures
-
-- All API payload types live in `src/lib/types.ts` — import them, don't
-  redeclare shapes. New endpoint? Add the type there in the same PR.
-- Component tests render from the fixtures in `src/test/fixtures.ts`.
-  Extend the fixtures rather than hand-rolling payload literals per test.
-
-## Styling
-
-- Colors/spacing/type come from the custom properties in
-  `src/styles/theme.css` (the design-tokens file — named `theme.css`, not
-  `tokens.css`, because the pre-push secret-scan gate blocks any filename
-  matching `*token*`). No hex literals in components — both themes must
-  work, and tokens are the only way that stays true.
-- Honor `prefers-reduced-motion`: the global block handles CSS transitions;
-  don't add JS-driven animation without a reduced-motion check.
-
-## Safety
-
-- Any URL that ends up in an `href` goes through `src/lib/sanitizeUrl.ts`.
-  When it returns `null`, render the text without an href (inert).
-- All mutations go through `src/lib/api.ts` (CSRF header handled there).
-  Never call `fetch` with `method: 'POST'` directly from a component.
-
-## Build discipline (D2)
-
-- If you change `ui/web/src/**`, run `npm run build` and commit `ui/web/dist/`
-  in the same PR — CI's drift gate rebuilds and compares.

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

@@ -1,187 +0,0 @@
-.agent-row {
-  list-style: none;
-  border-bottom: 1px solid var(--color-border-subtle);
-  padding: var(--space-3) 0;
-}
-
-.agent-row:last-child {
-  border-bottom: none;
-}
-
-.agent-row__toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--space-5);
-  height: var(--space-5);
-  padding: 0;
-  margin-right: var(--space-2);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text-muted);
-  transition: color var(--transition-fast);
-}
-
-.agent-row__toggle:hover {
-  color: var(--color-accent);
-}
-
-.agent-row__toggle:focus-visible {
-  outline: 2px solid var(--color-focus-ring);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
-}
-
-.agent-row__toggle-icon {
-  display: inline-block;
-  font-size: var(--font-size-xs);
-  line-height: 1;
-}
-
-.agent-row__header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-}
-
-.agent-row__status-icon {
-  display: inline-block;
-  font-size: var(--font-size-lg);
-  flex-shrink: 0;
-}
-
-.agent-row__id {
-  font-family: var(--font-mono);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-accent);
-  flex-shrink: 0;
-  min-width: 100px;
-}
-
-.agent-row__age {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-xs);
-  color: var(--color-text-muted);
-  flex-shrink: 0;
-  min-width: 50px;
-}
-
-.agent-row__hint {
-  color: var(--color-text);
-  flex-grow: 1;
-  word-break: break-word;
-}
-
-.agent-row__detail {
-  margin-top: var(--space-3);
-  margin-left: calc(var(--space-5) + var(--space-2));
-  padding: var(--space-3);
-  background: var(--color-bg-subtle);
-  border-left: 2px solid var(--color-accent);
-  border-radius: var(--radius-md);
-  animation: expand-in 150ms ease;
-}
-
-@keyframes expand-in {
-  from {
-    opacity: 0;
-    max-height: 0;
-  }
-  to {
-    opacity: 1;
-    max-height: 100vh;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .agent-row__detail {
-    animation: none;
-  }
-}
-
-.agent-row__detail-row {
-  display: grid;
-  grid-template-columns: 120px 1fr;
-  gap: var(--space-3);
-  align-items: baseline;
-  margin-bottom: var(--space-2);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-}
-
-.agent-row__detail-label {
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-muted);
-  text-align: right;
-}
-
-.agent-row__detail-value {
-  color: var(--color-text);
-  font-family: var(--font-mono);
-  word-break: break-word;
-}
-
-.agent-row__prompt {
-  margin-top: var(--space-4);
-  padding-top: var(--space-3);
-  border-top: 1px solid var(--color-border-subtle);
-}
-
-.agent-row__prompt-label {
-  display: block;
-  margin-bottom: var(--space-2);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text-muted);
-  font-size: var(--font-size-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.agent-row__prompt-text {
-  background: var(--color-bg-inset);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-3);
-  margin: 0;
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-normal);
-  color: var(--color-text);
-  font-family: var(--font-mono);
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.agent-row__prompt-loading,
-.agent-row__prompt-error {
-  background: var(--color-bg-inset);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-3);
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-}
-
-.agent-row__prompt-loading {
-  color: var(--color-text-muted);
-}
-
-.agent-row__prompt-error {
-  color: var(--color-status-error);
-}
-
-@media (max-width: 768px) {
-  .agent-row__detail-row {
-    grid-template-columns: 1fr;
-    gap: var(--space-2);
-  }
-
-  .agent-row__detail-label {
-    text-align: left;
-    font-weight: var(--font-weight-bold);
-  }
-}

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

@@ -1,209 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { AgentRow } from './AgentRow';
-import { fixtureAgents, fixtureAgentDetail, TESTIDS } from '../test/fixtures';
-import * as api from '../lib/api';
-
-vi.mock('../lib/api', () => ({
-  fetchAgent: vi.fn(),
-}));
-
-describe('AgentRow', () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders agent row with basic info', () => {
-    render(<AgentRow agent={fixtureAgents[0]} />);
-
-    expect(screen.getByTestId(TESTIDS.agentRow)).toBeInTheDocument();
-    expect(screen.getByText(fixtureAgents[0].id)).toBeInTheDocument();
-    expect(screen.getByText(fixtureAgents[0].hint)).toBeInTheDocument();
-  });
-
-  it('displays status indicator with correct color mapping', () => {
-    const runningAgent = fixtureAgents[0]; // status: 'running'
-    const { container } = render(<AgentRow agent={runningAgent} />);
-
-    const statusIcon = container.querySelector('.agent-row__status-icon');
-    expect(statusIcon).toBeInTheDocument();
-    expect(statusIcon).toHaveTextContent('●');
-  });
-
-  it('displays age in appropriate format (seconds/minutes)', () => {
-    const agent = { ...fixtureAgents[0], age_s: 45 };
-    render(<AgentRow agent={agent} />);
-    expect(screen.getByText('45s')).toBeInTheDocument();
-
-    const { unmount } = render(<AgentRow agent={{ ...fixtureAgents[1], age_s: 341 }} />);
-    expect(screen.getByText('5m')).toBeInTheDocument();
-    unmount();
-  });
-
-  it('expands and collapses on toggle click', async () => {
-    const user = userEvent.setup();
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValueOnce(fixtureAgentDetail);
-
-    render(<AgentRow agent={fixtureAgents[0]} />);
-
-    const toggleButton = screen.getByLabelText(/expand/i);
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
-
-    await user.click(toggleButton);
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
-
-    await waitFor(() => {
-      expect(screen.getByTestId(TESTIDS.agentRowDetail)).toBeInTheDocument();
-    });
-
-    await user.click(toggleButton);
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('fetches agent detail on expansion', async () => {
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValue(fixtureAgentDetail);
-
-    render(<AgentRow agent={fixtureAgents[0]} />);
-
-    const toggleButton = screen.getByLabelText(/expand/i);
-    await userEvent.click(toggleButton);
-
-    const prompt = await screen.findByText(fixtureAgentDetail.dispatch_prompt);
-    expect(prompt).toBeInTheDocument();
-  });
-
-  it('displays dispatch prompt after fetch completes', async () => {
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValue(fixtureAgentDetail);
-
-    render(<AgentRow agent={fixtureAgents[0]} />);
-
-    const toggleButton = screen.getByLabelText(/expand/i);
-    await userEvent.click(toggleButton);
-
-    const prompt = await screen.findByText(fixtureAgentDetail.dispatch_prompt);
-    expect(prompt).toBeInTheDocument();
-  });
-
-  it('caches agent detail on subsequent expansions', async () => {
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValueOnce(fixtureAgentDetail);
-
-    const { rerender } = render(<AgentRow agent={fixtureAgents[0]} />);
-
-    // First expansion
-    let toggleButton = screen.getByLabelText(/expand/i);
-    await userEvent.click(toggleButton);
-
-    await waitFor(() => {
-      expect(screen.getByText(fixtureAgentDetail.dispatch_prompt)).toBeInTheDocument();
-    });
-
-    const callCountAfterFirstExpand = mockFetch.mock.calls.length;
-
-    // Collapse
-    await userEvent.click(toggleButton);
-
-    // Re-render with same agent
-    rerender(<AgentRow agent={fixtureAgents[0]} />);
-
-    // Second expansion (should use cache)
-    toggleButton = screen.getByLabelText(/expand/i);
-    await userEvent.click(toggleButton);
-
-    // Should still only have been called once (from cache on second expansion)
-    expect(mockFetch.mock.calls.length).toBe(callCountAfterFirstExpand);
-  });
-
-  it('is keyboard accessible (toggle button can be focused and activated)', async () => {
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValueOnce(fixtureAgentDetail);
-
-    render(<AgentRow agent={fixtureAgents[0]} />);
-
-    const toggleButton = screen.getByLabelText(/expand/i);
-
-    // Should be focusable
-    toggleButton.focus();
-    expect(document.activeElement).toBe(toggleButton);
-
-    // Should be activatable with Enter
-    await userEvent.keyboard('{Enter}');
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
-
-    await waitFor(() => {
-      expect(screen.getByTestId(TESTIDS.agentRowDetail)).toBeInTheDocument();
-    });
-  });
-
-  it('expansion survives prop updates with same agent (keyed row identity)', async () => {
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValueOnce(fixtureAgentDetail);
-
-    const { rerender } = render(<AgentRow agent={fixtureAgents[0]} />);
-
-    // Expand
-    const toggleButton = screen.getByLabelText(/expand/i);
-    await userEvent.click(toggleButton);
-
-    await waitFor(() => {
-      expect(screen.getByTestId(TESTIDS.agentRowDetail)).toBeInTheDocument();
-    });
-
-    // Re-render with same agent (simulating parent re-render)
-    rerender(<AgentRow agent={fixtureAgents[0]} />);
-
-    // Expanded detail should still be visible
-    expect(screen.getByTestId(TESTIDS.agentRowDetail)).toBeInTheDocument();
-    expect(toggleButton).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('displays all detail fields when expanded', async () => {
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValueOnce(fixtureAgentDetail);
-
-    const agent = fixtureAgents[0];
-    render(<AgentRow agent={agent} />);
-
-    const toggleButton = screen.getByLabelText(/expand/i);
-    await userEvent.click(toggleButton);
-
-    await waitFor(() => {
-      expect(screen.getByText(agent.project)).toBeInTheDocument();
-      expect(screen.getByText(agent.taskLabel)).toBeInTheDocument();
-    });
-  });
-
-  it('formats runtime duration correctly', async () => {
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValueOnce(fixtureAgentDetail);
-
-    const agent = { ...fixtureAgents[0], runtimeSeconds: 125 }; // 2m 5s
-    render(<AgentRow agent={agent} />);
-
-    const toggleButton = screen.getByLabelText(/expand/i);
-    await userEvent.click(toggleButton);
-
-    await waitFor(() => {
-      expect(screen.getByText('2m 5s')).toBeInTheDocument();
-    });
-  });
-
-  it('formats token count with commas', async () => {
-    const mockFetch = vi.mocked(api.fetchAgent);
-    mockFetch.mockResolvedValueOnce(fixtureAgentDetail);
-
-    const agent = { ...fixtureAgents[0], tokensUsed: 48213 };
-    render(<AgentRow agent={agent} />);
-
-    const toggleButton = screen.getByLabelText(/expand/i);
-    await userEvent.click(toggleButton);
-
-    await waitFor(() => {
-      expect(screen.getByText('48,213')).toBeInTheDocument();
-    });
-  });
-});