@matt82198/aesop 0.1.0-beta.5 → 0.1.0

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

@@ -1,278 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { HealthHeader } from './HealthHeader';
-import {
-  fixtureWatchdog,
-  fixtureWatchdogStale,
-  fixtureMonitor,
-  fixtureAlerts,
-  fixtureAlertsEmpty,
-  fixtureAgents,
-  fixtureStatus,
-  TESTIDS,
-} from '../test/fixtures';
-
-describe('HealthHeader', () => {
-  const mockThemeToggle = vi.fn();
-  const mockRefresh = vi.fn();
-
-  it('renders all health cells', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlerts}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    expect(screen.getByTestId(TESTIDS.healthHeader)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.healthWatchdog)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.healthMonitor)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.healthOrchestrator)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.healthAgentsCount)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.healthAlertsCount)).toBeInTheDocument();
-  });
-
-  it('displays watchdog ALIVE status', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const watchdogCell = screen.getByTestId(TESTIDS.healthWatchdog);
-    expect(watchdogCell).toHaveTextContent('ALIVE');
-  });
-
-  it('displays watchdog STALE status with age', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdogStale}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const watchdogCell = screen.getByTestId(TESTIDS.healthWatchdog);
-    expect(watchdogCell).toHaveTextContent('STALE');
-    expect(watchdogCell).toHaveTextContent('10m');
-  });
-
-  it('displays monitor status', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const monitorCell = screen.getByTestId(TESTIDS.healthMonitor);
-    expect(monitorCell).toHaveTextContent('ALIVE');
-  });
-
-  it('displays agent count', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const agentsCell = screen.getByTestId(TESTIDS.healthAgentsCount);
-    expect(agentsCell).toHaveTextContent('3');
-  });
-
-  it('displays alerts count', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlerts}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const alertsCell = screen.getByTestId(TESTIDS.healthAlertsCount);
-    expect(alertsCell).toHaveTextContent('2');
-  });
-
-  it('displays SSE live status', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const sseCell = screen.getByTestId(TESTIDS.sseStatus);
-    expect(sseCell).toHaveTextContent('Live');
-  });
-
-  it('displays SSE reconnecting status', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'reconnecting' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const sseCell = screen.getByTestId(TESTIDS.sseStatus);
-    expect(sseCell).toHaveTextContent('Reconnecting');
-  });
-
-  it('calls onThemeToggle when theme button clicked', async () => {
-    const user = userEvent.setup();
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const themeButton = screen.getByTestId(TESTIDS.themeToggle);
-    await user.click(themeButton);
-    expect(mockThemeToggle).toHaveBeenCalled();
-  });
-
-  it('calls onRefresh when refresh button clicked', async () => {
-    const user = userEvent.setup();
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const refreshButton = screen.getByTestId(TESTIDS.refreshButton);
-    await user.click(refreshButton);
-    expect(mockRefresh).toHaveBeenCalled();
-  });
-
-  it('is keyboard accessible (buttons can receive focus)', () => {
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={fixtureStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const themeButton = screen.getByTestId(TESTIDS.themeToggle);
-    const refreshButton = screen.getByTestId(TESTIDS.refreshButton);
-
-    expect(themeButton).toHaveAttribute('type', 'button');
-    expect(refreshButton).toHaveAttribute('type', 'button');
-  });
-
-  it('handles null values gracefully', () => {
-    render(
-      <HealthHeader
-        watchdog={null}
-        monitor={null}
-        orchestrator={null}
-        agents={null}
-        alerts={null}
-        connectionStatus={{ status: 'error' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    expect(screen.getByTestId(TESTIDS.healthHeader)).toBeInTheDocument();
-    expect(screen.getByTestId(TESTIDS.healthWatchdog)).toHaveTextContent('unknown');
-  });
-
-  it('displays audit phase badge when orchestrator is in audit phase', () => {
-    const auditStatus = {
-      orchestrators: [
-        {
-          id: 'main',
-          role: 'orchestrator',
-          activity: 'running audit',
-          phase: 'audit',
-          age_seconds: 42,
-          stale: false,
-        },
-      ],
-    };
-
-    render(
-      <HealthHeader
-        watchdog={fixtureWatchdog}
-        monitor={fixtureMonitor}
-        orchestrator={auditStatus}
-        agents={fixtureAgents}
-        alerts={fixtureAlertsEmpty}
-        connectionStatus={{ status: 'live' }}
-        onThemeToggle={mockThemeToggle}
-        onRefresh={mockRefresh}
-      />
-    );
-
-    const orchestratorCell = screen.getByTestId(TESTIDS.healthOrchestrator);
-    expect(orchestratorCell).toHaveTextContent('Audit');
-  });
-});

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

@@ -1,281 +0,0 @@
-/**
- * HealthHeader — Sticky status header (always visible, D4).
- *
- * Displays: watchdog ALIVE/STALE+age · monitor status · orchestrator
- * activity/phase · running-agents count · unreviewed-alerts count
- * (severity-colored) · SSE connection state · theme toggle · manual refresh.
- *
- * Every cell is a clickable element jumping to its corresponding view (#/overview, #/activity, etc).
- * Props driven by App.tsx; no local state beyond focus/hover.
- */
-
-import { useCallback } from 'react';
-import type { HeartbeatStatus, Agent, OrchestratorStatus, Alert, SSEConnectionStatus } from '../lib/types';
-import { TESTIDS } from '../test/fixtures';
-import './HealthHeader.css';
-
-interface HealthHeaderProps {
-  watchdog: HeartbeatStatus | null;
-  monitor: HeartbeatStatus | null;
-  orchestrator: OrchestratorStatus | null;
-  agents: Agent[] | null;
-  alerts: Alert | null;
-  connectionStatus: SSEConnectionStatus;
-  dataTimestamp: number | null; // Epoch ms when last SSE payload was received
-  onThemeToggle: () => void;
-  onRefresh: () => void;
-}
-
-/**
- * Format age in seconds as a readable duration.
- */
-function formatAge(ageSeconds: number): string {
-  if (ageSeconds < 0) return 'unknown';
-  if (ageSeconds < 60) return `${ageSeconds}s`;
-  const minutes = Math.floor(ageSeconds / 60);
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.floor(ageSeconds / 3600);
-  return `${hours}h`;
-}
-
-/**
- * Determine status color based on alert severity or status.
- */
-function getStatusColor(status: string): string {
-  if (status === 'HIGH' || status === 'SUSPICIOUS') return 'var(--color-status-error)';
-  if (status === 'MED' || status === 'DRIFT') return 'var(--color-status-warn)';
-  if (status === 'ALIVE' || status === 'running' || status === 'OK') return 'var(--color-status-ok)';
-  if (status === 'STALE') return 'var(--color-status-error)';
-  if (status === 'idle') return 'var(--color-status-info)';
-  return 'var(--color-status-neutral)';
-}
-
-/**
- * Format a timestamp as a relative time string (e.g., "1m ago", "15s ago").
- */
-function formatRelativeTime(epochMs: number): string {
-  const ageMs = Date.now() - epochMs;
-  const ageSecs = Math.floor(ageMs / 1000);
-
-  if (ageSecs < 60) return `${ageSecs}s ago`;
-  const mins = Math.floor(ageSecs / 60);
-  if (mins < 60) return `${mins}m ago`;
-  const hours = Math.floor(ageSecs / 3600);
-  return `${hours}h ago`;
-}
-
-export function HealthHeader({
-  watchdog,
-  monitor,
-  orchestrator,
-  agents,
-  alerts,
-  connectionStatus,
-  dataTimestamp,
-  onThemeToggle,
-  onRefresh,
-}: HealthHeaderProps) {
-  const handleWatchdogClick = useCallback(() => {
-    window.location.hash = '#/activity';
-  }, []);
-
-  const handleMonitorClick = useCallback(() => {
-    window.location.hash = '#/activity';
-  }, []);
-
-  const handleOrchestratorClick = useCallback(() => {
-    window.location.hash = '#/activity';
-  }, []);
-
-  const handleAlertsClick = useCallback(() => {
-    window.location.hash = '#/';
-  }, []);
-
-  // Determine audit phase badge — the status file signals via phase/activity, not role
-  const isAuditPhase =
-    orchestrator?.orchestrators.some(
-      (o) => o.phase?.toLowerCase().includes('audit') || o.activity?.toLowerCase().includes('audit'),
-    ) ?? false;
-  const orchestratorActivity =
-    orchestrator?.orchestrators.map((o) => o.activity || o.phase).filter(Boolean)[0] ?? 'no active session';
-
-  const agentsCount = agents?.length ?? 0;
-  const alertsCount = alerts?.count ?? 0;
-
-  // Compute data staleness (stale if > 60 seconds old)
-  const dataAgeMs = dataTimestamp ? Date.now() - dataTimestamp : -1;
-  const isDataStale = dataAgeMs > 60000;
-  const dataTimeStr = dataTimestamp ? formatRelativeTime(dataTimestamp) : 'unknown';
-
-  // Determine max severity for alerts color
-  let maxAlertSeverity = 'neutral';
-  if (alertsCount > 0 && alerts?.lines.length) {
-    const firstLine = alerts.lines[0] || '';
-    if (firstLine.includes('HIGH') || firstLine.includes('SUSPICIOUS')) {
-      maxAlertSeverity = 'error';
-    } else if (firstLine.includes('MED') || firstLine.includes('DRIFT')) {
-      maxAlertSeverity = 'warn';
-    }
-  }
-
-  return (
-    <header className="health-header" data-testid={TESTIDS.healthHeader} role="banner">
-      <div className="health-header__cells">
-        {/* Watchdog cell */}
-        <button
-          type="button"
-          className="health-header__cell health-header__cell--watchdog"
-          data-testid={TESTIDS.healthWatchdog}
-          onClick={handleWatchdogClick}
-          aria-label={`Watchdog: ${watchdog?.alive ?? 'unknown'} (age: ${formatAge(watchdog?.age ?? -1)})`}
-        >
-          <span className="health-header__label">Watchdog</span>
-          <span
-            className={`health-header__status text-status-${
-              watchdog?.alive === 'ALIVE'
-                ? 'ok'
-                : watchdog?.alive === 'STALE'
-                  ? 'error'
-                  : 'neutral'
-            }`}
-          >
-            {watchdog?.alive ?? 'unknown'}
-            {watchdog && watchdog.age >= 0 && ` +${formatAge(watchdog.age)}`}
-          </span>
-        </button>
-
-        {/* Monitor cell */}
-        <button
-          type="button"
-          className="health-header__cell health-header__cell--monitor"
-          data-testid={TESTIDS.healthMonitor}
-          onClick={handleMonitorClick}
-          aria-label={`Monitor: ${monitor?.alive ?? 'unknown'}`}
-        >
-          <span className="health-header__label">Monitor</span>
-          <span
-            className={`health-header__status text-status-${
-              monitor?.alive === 'ALIVE' ? 'ok' : 'neutral'
-            }`}
-          >
-            {monitor?.alive ?? 'unknown'}
-          </span>
-        </button>
-
-        {/* Orchestrator cell */}
-        <button
-          type="button"
-          className="health-header__cell health-header__cell--orchestrator"
-          data-testid={TESTIDS.healthOrchestrator}
-          onClick={handleOrchestratorClick}
-          aria-label="Orchestrator status"
-        >
-          <span className="health-header__label">Orchestrator</span>
-          {isAuditPhase && (
-            <span className="health-header__badge" role="status">
-              Audit
-            </span>
-          )}
-          <span className="health-header__status">{orchestratorActivity}</span>
-        </button>
-
-        {/* Agents count */}
-        <button
-          type="button"
-          className="health-header__cell health-header__cell--agents"
-          data-testid={TESTIDS.healthAgentsCount}
-          onClick={handleAlertsClick}
-          aria-label={`${agentsCount} agents running`}
-        >
-          <span className="health-header__label">Agents</span>
-          <span className="health-header__count">{agentsCount}</span>
-        </button>
-
-        {/* Alerts count */}
-        <button
-          type="button"
-          className={`health-header__cell health-header__cell--alerts ${
-            maxAlertSeverity === 'error'
-              ? 'text-status-error'
-              : maxAlertSeverity === 'warn'
-                ? 'text-status-warn'
-                : ''
-          }`}
-          data-testid={TESTIDS.healthAlertsCount}
-          onClick={handleAlertsClick}
-          aria-label={`${alertsCount} alerts`}
-        >
-          <span className="health-header__label">Alerts</span>
-          <span className="health-header__count">{alertsCount}</span>
-        </button>
-
-        {/* Data timestamp */}
-        <span
-          className={`health-header__cell health-header__cell--timestamp ${
-            isDataStale ? 'health-header__cell--stale' : ''
-          }`}
-          data-testid="health-data-timestamp"
-          role="status"
-          aria-live="polite"
-          aria-label={`Data as of ${dataTimeStr}`}
-        >
-          <span className="health-header__label">Data</span>
-          <span className={`health-header__status ${isDataStale ? 'text-status-warn' : 'text-status-ok'}`}>
-            {dataTimeStr}
-          </span>
-        </span>
-
-        {/* SSE status */}
-        <span
-          className="health-header__cell health-header__cell--sse"
-          data-testid={TESTIDS.sseStatus}
-          data-status={connectionStatus.status}
-          role="status"
-          aria-live="polite"
-          aria-label={`Connection: ${connectionStatus.status}`}
-        >
-          <span className="health-header__label">SSE</span>
-          <span
-            className={`health-header__status text-status-${
-              connectionStatus.status === 'live'
-                ? 'ok'
-                : connectionStatus.status === 'reconnecting'
-                  ? 'warn'
-                  : 'error'
-            }`}
-          >
-            {connectionStatus.status === 'live'
-              ? 'Live'
-              : connectionStatus.status === 'reconnecting'
-                ? 'Reconnecting'
-                : 'Error'}
-          </span>
-        </span>
-
-        {/* Theme toggle */}
-        <button
-          type="button"
-          className="health-header__cell health-header__cell--theme"
-          data-testid={TESTIDS.themeToggle}
-          onClick={onThemeToggle}
-          aria-label="Toggle color theme"
-        >
-          <span className="health-header__label">Theme</span>
-          <span className="health-header__icon">◐</span>
-        </button>
-
-        {/* Refresh button */}
-        <button
-          type="button"
-          className="health-header__cell health-header__cell--refresh"
-          data-testid={TESTIDS.refreshButton}
-          onClick={onRefresh}
-          aria-label="Refresh data"
-        >
-          <span className="health-header__label">Refresh</span>
-          <span className="health-header__icon">↻</span>
-        </button>
-      </div>
-    </header>
-  );
-}

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

@@ -1,135 +0,0 @@
-.inbox-form {
-  padding: var(--space-5);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-}
-
-.inbox-form h2 {
-  margin: 0 0 var(--space-4) 0;
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-text);
-}
-
-.inbox-form__form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.inbox-form__group {
-  display: flex;
-  gap: var(--space-2);
-  align-items: stretch;
-}
-
-.inbox-form__input {
-  flex: 1;
-  min-width: 0;
-  padding: var(--space-3) var(--space-4);
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-  font-family: var(--font-sans);
-  color: var(--color-text);
-  line-height: var(--line-height-normal);
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.inbox-form__input:focus-visible {
-  outline: 2px solid var(--color-focus-ring);
-  outline-offset: 2px;
-  border-color: var(--color-accent);
-}
-
-.inbox-form__input::placeholder {
-  color: var(--color-text-muted);
-}
-
-.inbox-form__input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.inbox-form__submit {
-  padding: var(--space-3) var(--space-5);
-  background: var(--color-accent);
-  color: var(--color-text-inverse);
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-bold);
-  cursor: pointer;
-  transition: background-color var(--transition-fast);
-}
-
-.inbox-form__submit:hover:not(:disabled) {
-  background: var(--color-accent-emphasis);
-}
-
-.inbox-form__submit:focus-visible {
-  outline: 2px solid var(--color-focus-ring);
-  outline-offset: 2px;
-}
-
-.inbox-form__submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.inbox-form__error {
-  padding: var(--space-3);
-  background: var(--color-status-error-bg);
-  color: var(--color-status-error);
-  border-left: 4px solid var(--color-status-error);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-}
-
-.inbox-form__success {
-  padding: var(--space-3);
-  background: var(--color-status-ok-bg);
-  color: var(--color-status-ok);
-  border-left: 4px solid var(--color-status-ok);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-sm);
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-@media (max-width: 768px) {
-  .inbox-form {
-    padding: var(--space-3);
-  }
-
-  .inbox-form h2 {
-    font-size: var(--font-size-md);
-  }
-
-  .inbox-form__group {
-    flex-direction: column;
-  }
-
-  .inbox-form__submit {
-    width: 100%;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .inbox-form__input,
-  .inbox-form__submit {
-    transition: none;
-  }
-}