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

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

@@ -0,0 +1,207 @@
+/**
+ * AgentRow — Expandable agent row with lazy-loaded dispatch prompt.
+ *
+ * Expansion is keyboard-operable (Enter/Space on button) and scroll-preserving
+ * across prop updates (via key-based row identity).
+ *
+ * Expanded state shows:
+ * - Task/status/runtime/tokens + dispatch prompt (fetched from /agent?id=)
+ * - Cached with simple eviction (100-item LRU cache per session)
+ *
+ * D5: all interactive elements are real <button>/<a>, status colors from theme.
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import type { Agent } from '../lib/types';
+import { fetchAgent } from '../lib/api';
+import { TESTIDS } from '../test/fixtures';
+import './AgentRow.css';
+
+interface AgentRowProps {
+  agent: Agent;
+}
+
+// Simple LRU cache for agent details
+const agentDetailCache = new Map<string, { data: any; timestamp: number }>();
+const MAX_CACHE_SIZE = 100;
+const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
+
+function getCachedAgentDetail(id: string): any | null {
+  const cached = agentDetailCache.get(id);
+  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
+    return cached.data;
+  }
+  if (cached) {
+    agentDetailCache.delete(id);
+  }
+  return null;
+}
+
+function setCachedAgentDetail(id: string, data: any) {
+  if (agentDetailCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = agentDetailCache.keys().next().value;
+    if (firstKey !== undefined) {
+      agentDetailCache.delete(firstKey);
+    }
+  }
+  agentDetailCache.set(id, { data, timestamp: Date.now() });
+}
+
+/**
+ * Determine status color.
+ */
+function getStatusColor(status: string): string {
+  if (status === 'running') return 'var(--color-status-ok)';
+  if (status === 'idle') return 'var(--color-status-info)';
+  if (status === 'SUSPICIOUS' || status === 'HIGH') return 'var(--color-status-error)';
+  if (status === 'MED' || status === 'DRIFT') return 'var(--color-status-warn)';
+  return 'var(--color-status-neutral)';
+}
+
+export function AgentRow({ agent }: AgentRowProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [detail, setDetail] = useState<any | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const expandButtonRef = useRef<HTMLButtonElement>(null);
+
+  // Load agent detail on expansion
+  useEffect(() => {
+    if (!isExpanded) return;
+
+    const cached = getCachedAgentDetail(agent.id);
+    if (cached) {
+      setDetail(cached);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    fetchAgent(agent.id)
+      .then((data) => {
+        setCachedAgentDetail(agent.id, data);
+        setDetail(data);
+      })
+      .catch((err) => {
+        setError(err.message || 'Failed to load agent details');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [isExpanded, agent.id]);
+
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <li className="agent-row" data-testid={TESTIDS.agentRow} key={agent.id}>
+      <button
+        type="button"
+        ref={expandButtonRef}
+        className="agent-row__toggle"
+        onClick={handleToggle}
+        aria-expanded={isExpanded}
+        aria-controls={`agent-detail-${agent.id}`}
+        aria-label={`${isExpanded ? 'Collapse' : 'Expand'} agent ${agent.id}`}
+      >
+        <span className="agent-row__toggle-icon">{isExpanded ? '▼' : '▶'}</span>
+      </button>
+
+      <div className="agent-row__header">
+        <span
+          className="agent-row__status-icon"
+          style={{ color: getStatusColor(agent.status) }}
+          aria-label={`Status: ${agent.status}`}
+          title={`Status: ${agent.status}`}
+        >
+          ●
+        </span>
+
+        <span className="agent-row__id">{agent.id}</span>
+
+        <span className="agent-row__age">
+          {agent.age_s < 60 ? `${agent.age_s}s` : `${Math.floor(agent.age_s / 60)}m`}
+        </span>
+
+        <span className="agent-row__hint">{agent.hint}</span>
+      </div>
+
+      {isExpanded && (
+        <div className="agent-row__detail" id={`agent-detail-${agent.id}`} data-testid={TESTIDS.agentRowDetail}>
+          <div className="agent-row__detail-row">
+            <span className="agent-row__detail-label">Project:</span>
+            <span className="agent-row__detail-value">{agent.project}</span>
+          </div>
+
+          <div className="agent-row__detail-row">
+            <span className="agent-row__detail-label">Status:</span>
+            <span
+              className="agent-row__detail-value"
+              style={{ color: getStatusColor(agent.status) }}
+            >
+              {agent.status}
+            </span>
+          </div>
+
+          <div className="agent-row__detail-row">
+            <span className="agent-row__detail-label">Started:</span>
+            <span className="agent-row__detail-value">
+              {agent.startedAt ? new Date(agent.startedAt).toLocaleString() : 'unknown'}
+            </span>
+          </div>
+
+          <div className="agent-row__detail-row">
+            <span className="agent-row__detail-label">Last Activity:</span>
+            <span className="agent-row__detail-value">
+              {agent.lastActivity ? new Date(agent.lastActivity).toLocaleString() : 'unknown'}
+            </span>
+          </div>
+
+          <div className="agent-row__detail-row">
+            <span className="agent-row__detail-label">Runtime:</span>
+            <span className="agent-row__detail-value">
+              {typeof agent.runtimeSeconds === 'number'
+                ? `${Math.floor(agent.runtimeSeconds / 60)}m ${agent.runtimeSeconds % 60}s`
+                : 'unknown'}
+            </span>
+          </div>
+
+          <div className="agent-row__detail-row">
+            <span className="agent-row__detail-label">Tokens Used:</span>
+            <span className="agent-row__detail-value">
+              {typeof agent.tokensUsed === 'number' ? agent.tokensUsed.toLocaleString() : 'unknown'}
+            </span>
+          </div>
+
+          <div className="agent-row__detail-row">
+            <span className="agent-row__detail-label">Task:</span>
+            <span className="agent-row__detail-value">{agent.taskLabel}</span>
+          </div>
+
+          {isLoading && (
+            <div className="agent-row__prompt">
+              <span className="agent-row__prompt-label">Dispatch Prompt:</span>
+              <div className="agent-row__prompt-loading">Loading...</div>
+            </div>
+          )}
+
+          {error && (
+            <div className="agent-row__prompt">
+              <span className="agent-row__prompt-label">Dispatch Prompt:</span>
+              <div className="agent-row__prompt-error">Error: {error}</div>
+            </div>
+          )}
+
+          {detail && !isLoading && (
+            <div className="agent-row__prompt">
+              <span className="agent-row__prompt-label">Dispatch Prompt:</span>
+              <pre className="agent-row__prompt-text">{detail.dispatch_prompt}</pre>
+            </div>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}

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

@@ -0,0 +1,108 @@
+.agents-panel {
+  flex: 1;
+  min-width: 0;
+  padding: var(--space-5);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.agents-panel h2 {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
+.agents-panel__summaries {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+  padding: var(--space-3);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+}
+
+.agent-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+}
+
+.agent-summary__project {
+  flex: 0 0 auto;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+  min-width: fit-content;
+}
+
+.agent-summary__status {
+  flex: 0 0 auto;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.agent-summary__status--running {
+  background: var(--color-status-ok-bg);
+  color: var(--color-status-ok);
+}
+
+.agent-summary__status--idle {
+  background: var(--color-status-info-bg);
+  color: var(--color-status-info);
+}
+
+.agent-summary__status--SUSPICIOUS,
+.agent-summary__status--HIGH {
+  background: var(--color-status-error-bg);
+  color: var(--color-status-error);
+}
+
+.agent-summary__status--MED,
+.agent-summary__status--DRIFT {
+  background: var(--color-status-warn-bg);
+  color: var(--color-status-warn);
+}
+
+.agent-summary__runtime {
+  flex: 1;
+  text-align: right;
+  font-family: var(--font-mono);
+  color: var(--color-text-muted);
+  min-width: fit-content;
+}
+
+.agents-panel__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-top: var(--space-4);
+}
+
+.empty-state {
+  padding: var(--space-4);
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+@media (max-width: 768px) {
+  .agents-panel {
+    padding: var(--space-3);
+  }
+
+  .agents-panel h2 {
+    font-size: var(--font-size-md);
+  }
+}

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

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AgentsPanel } from './AgentsPanel';
+import { fixtureAgents, TESTIDS } from '../test/fixtures';
+
+vi.mock('./AgentRow', () => ({
+  AgentRow: ({ agent }: any) => <div data-testid="agent-row-mock">{agent.id}</div>,
+}));
+
+describe('AgentsPanel', () => {
+  it('renders agents list with count', () => {
+    render(<AgentsPanel agents={fixtureAgents} />);
+
+    expect(screen.getByText(`Fleet Agents (${fixtureAgents.length})`)).toBeInTheDocument();
+  });
+
+  it('renders each agent row', () => {
+    render(<AgentsPanel agents={fixtureAgents} />);
+
+    const rows = screen.getAllByTestId('agent-row-mock');
+    expect(rows).toHaveLength(fixtureAgents.length);
+  });
+
+  it('renders empty state when no agents', () => {
+    render(<AgentsPanel agents={[]} />);
+
+    expect(screen.getByText('No agents running.')).toBeInTheDocument();
+  });
+
+  it('renders empty state when agents is null', () => {
+    render(<AgentsPanel agents={null} />);
+
+    expect(screen.getByText('No agents running.')).toBeInTheDocument();
+  });
+
+  it('has correct data-testid', () => {
+    render(<AgentsPanel agents={fixtureAgents} />);
+
+    expect(screen.getByTestId(TESTIDS.agentRow)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,58 @@
+/**
+ * AgentsPanel — Fleet agents list with expandable rows.
+ * Each agent row displays project · status · runtime at a glance.
+ */
+
+import type { Agent } from '../lib/types';
+import { AgentRow } from './AgentRow';
+import { TESTIDS } from '../test/fixtures';
+import './AgentsPanel.css';
+
+/**
+ * Format runtime in seconds to a readable string.
+ */
+function formatRuntime(seconds: number | undefined): string {
+  if (!seconds || seconds < 0) return 'unknown';
+  if (seconds < 60) return `${Math.floor(seconds)}s`;
+  const mins = Math.floor(seconds / 60);
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.floor(seconds / 3600);
+  return `${hours}h`;
+}
+
+interface AgentsPanelProps {
+  agents: Agent[] | null;
+}
+
+export function AgentsPanel({ agents }: AgentsPanelProps) {
+  if (!agents || agents.length === 0) {
+    return (
+      <section className="agents-panel" data-testid={TESTIDS.agentRow}>
+        <h2>Fleet Agents</h2>
+        <p className="empty-state">No agents running.</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="agents-panel" data-testid={TESTIDS.agentRow}>
+      <h2>Fleet Agents ({agents.length})</h2>
+      <div className="agents-panel__summaries">
+        {agents.map((agent) => (
+          <div key={`${agent.id}-summary`} className="agent-summary">
+            <span className="agent-summary__project">{agent.project}</span>
+            <span className={`agent-summary__status agent-summary__status--${agent.status}`}>
+              {agent.status}
+            </span>
+            <span className="agent-summary__runtime">{formatRuntime(agent.runtimeSeconds)}</span>
+          </div>
+        ))}
+      </div>
+      <ul className="agents-panel__list">
+        {agents.map((agent) => (
+          <AgentRow key={agent.id} agent={agent} />
+        ))}
+      </ul>
+    </section>
+  );
+}

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

@@ -0,0 +1,88 @@
+.alerts-panel {
+  flex: 1;
+  min-width: 0;
+  padding: var(--space-5);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.alerts-panel h2 {
+  margin: 0 0 var(--space-4) 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+}
+
+.alerts-panel__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.alerts-panel__item {
+  display: flex;
+  gap: var(--space-3);
+  align-items: flex-start;
+  padding: var(--space-3);
+  background: var(--color-bg-subtle);
+  border-left: 4px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  word-break: break-word;
+}
+
+.alerts-panel__item[data-severity='error'] {
+  background: var(--color-status-error-bg);
+}
+
+.alerts-panel__item[data-severity='warn'] {
+  background: var(--color-status-warn-bg);
+}
+
+.alerts-panel__item[data-severity='info'] {
+  background: var(--color-status-info-bg);
+}
+
+.alerts-panel__severity {
+  display: inline-block;
+  min-width: 50px;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  flex-shrink: 0;
+}
+
+.alerts-panel__text {
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  flex-grow: 1;
+}
+
+.empty-state {
+  padding: var(--space-4);
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+@media (max-width: 768px) {
+  .alerts-panel {
+    padding: var(--space-3);
+  }
+
+  .alerts-panel h2 {
+    font-size: var(--font-size-md);
+  }
+
+  .alerts-panel__item {
+    padding: var(--space-2);
+    gap: var(--space-2);
+  }
+}

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

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AlertsPanel } from './AlertsPanel';
+import { fixtureAlerts, fixtureAlertsEmpty, TESTIDS } from '../test/fixtures';
+
+describe('AlertsPanel', () => {
+  it('renders alerts with severity styling', () => {
+    render(<AlertsPanel alerts={fixtureAlerts} />);
+
+    expect(screen.getByTestId(TESTIDS.alertsPanel)).toBeInTheDocument();
+    const alertLines = screen.getAllByTestId(TESTIDS.alertLine);
+    expect(alertLines).toHaveLength(fixtureAlerts.lines.length);
+  });
+
+  it('displays alert severity as text', () => {
+    render(<AlertsPanel alerts={fixtureAlerts} />);
+
+    // First line has HIGH
+    expect(screen.getByText(/HIGH/)).toBeInTheDocument();
+  });
+
+  it('renders empty state when no alerts', () => {
+    render(<AlertsPanel alerts={fixtureAlertsEmpty} />);
+
+    expect(screen.getByText('No alerts.')).toBeInTheDocument();
+  });
+
+  it('renders empty state when alerts is null', () => {
+    render(<AlertsPanel alerts={null} />);
+
+    expect(screen.getByText('No alerts.')).toBeInTheDocument();
+  });
+
+  it('applies severity-based styling to alert items', () => {
+    render(<AlertsPanel alerts={fixtureAlerts} />);
+
+    const alertItems = screen.getAllByTestId(TESTIDS.alertLine);
+    // First alert has HIGH severity
+    expect(alertItems[0]).toHaveAttribute('data-severity', 'error');
+    // Second alert has MED severity
+    expect(alertItems[1]).toHaveAttribute('data-severity', 'warn');
+  });
+
+  it('displays alert text content', () => {
+    render(<AlertsPanel alerts={fixtureAlerts} />);
+
+    fixtureAlerts.lines.forEach((line) => {
+      expect(screen.getByText(line)).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,67 @@
+/**
+ * AlertsPanel — Security alerts with severity styling.
+ */
+
+import type { Alert } from '../lib/types';
+import { TESTIDS } from '../test/fixtures';
+import './AlertsPanel.css';
+
+interface AlertsPanelProps {
+  alerts: Alert | null;
+}
+
+/**
+ * Determine severity level from alert line.
+ */
+function getSeverity(line: string): 'error' | 'warn' | 'info' {
+  if (line.includes('HIGH') || line.includes('SUSPICIOUS')) return 'error';
+  if (line.includes('MED') || line.includes('DRIFT')) return 'warn';
+  return 'info';
+}
+
+/**
+ * Get color for severity level.
+ */
+function getSeverityColor(severity: 'error' | 'warn' | 'info'): string {
+  if (severity === 'error') return 'var(--color-status-error)';
+  if (severity === 'warn') return 'var(--color-status-warn)';
+  return 'var(--color-status-info)';
+}
+
+export function AlertsPanel({ alerts }: AlertsPanelProps) {
+  const hasAlerts = alerts && alerts.lines.length > 0;
+
+  return (
+    <section className="alerts-panel" data-testid={TESTIDS.alertsPanel}>
+      <h2>Security Alerts</h2>
+      {!hasAlerts ? (
+        <p className="empty-state">No alerts.</p>
+      ) : (
+        <ul className="alerts-panel__list">
+          {alerts.lines.map((line, idx) => {
+            const severity = getSeverity(line);
+            return (
+              <li
+                key={idx}
+                className="alerts-panel__item"
+                data-testid={TESTIDS.alertLine}
+                data-severity={severity}
+                style={{
+                  borderLeftColor: getSeverityColor(severity),
+                }}
+              >
+                <span
+                  className="alerts-panel__severity"
+                  style={{ color: getSeverityColor(severity) }}
+                >
+                  {severity.toUpperCase()}
+                </span>
+                <span className="alerts-panel__text">{line}</span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}