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

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

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

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

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