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

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

@@ -0,0 +1,94 @@
+/**
+ * MessagesTail — Role-colored recent main-thread messages with auto-follow toggle.
+ * Scrolls to bottom when new messages arrive (if follow enabled).
+ * User scroll up pauses auto-follow; toggle re-enables it.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { formatTimestamp } from '../lib/format';
+import { TESTIDS } from '../test/fixtures';
+import type { Message } from '../lib/types';
+import styles from './MessagesTail.module.css';
+
+const FOLLOW_THRESHOLD = 50; // pixels from bottom
+const MAX_MESSAGES = 12; // Display last ~12 messages
+
+interface Props {
+  messages: Message[];
+}
+
+export default function MessagesTail({ messages }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isFollowing, setIsFollowing] = useState(true);
+
+  // Detect if user scrolled up manually
+  const handleScroll = () => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    if (distanceFromBottom > FOLLOW_THRESHOLD) {
+      setIsFollowing(false);
+    }
+  };
+
+  // Auto-scroll to bottom when new messages arrive (if following)
+  useEffect(() => {
+    if (!isFollowing || !containerRef.current) return;
+
+    // Wait for DOM to update
+    setTimeout(() => {
+      const lastMessage = containerRef.current?.lastElementChild as HTMLElement;
+      if (lastMessage?.scrollIntoView) {
+        lastMessage.scrollIntoView({ behavior: 'smooth' });
+      } else if (containerRef.current) {
+        // Fallback for test environment
+        containerRef.current.scrollTop = containerRef.current.scrollHeight;
+      }
+    }, 0);
+  }, [messages, isFollowing]);
+
+  const displayMessages = messages.slice(-MAX_MESSAGES);
+  const lastMessageTimestamp = displayMessages.length > 0 ? displayMessages[displayMessages.length - 1].timestamp : null;
+
+  return (
+    <div data-testid={TESTIDS.messagesTail} className={styles.container} aria-live="polite" aria-label="Main-thread messages">
+      <div className={styles.header}>
+        <h3 className={styles.title}>Main-Thread Messages</h3>
+        <button
+          type="button"
+          data-testid={TESTIDS.messagesFollowToggle}
+          aria-pressed={isFollowing}
+          onClick={() => setIsFollowing(!isFollowing)}
+          className={styles.toggleButton}
+          title={isFollowing ? 'Stop auto-following' : 'Resume auto-following'}
+        >
+          {isFollowing ? '📌 Following' : '📌 Paused'}
+        </button>
+      </div>
+
+      <div ref={containerRef} className={styles.messagesBox} onScroll={handleScroll}>
+        {displayMessages.length === 0 ? (
+          <div className={styles.emptyState}>(no messages)</div>
+        ) : (
+          displayMessages.map((msg, idx) => (
+            <div
+              key={idx}
+              data-testid={`message-${idx}`}
+              className={`${styles.message} ${styles[`role-${msg.role}`]}`}
+            >
+              <span className={styles.role}>{msg.role}</span>
+              <span className={styles.timestamp}>{formatTimestamp(msg.timestamp)}</span>
+              <div className={styles.text}>{msg.text}</div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {lastMessageTimestamp && (
+        <div className={styles.footer}>
+          <span className={styles.footerTimestamp}>updated {formatTimestamp(lastMessageTimestamp)}</span>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+.repos-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);
+}
+
+.repos-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);
+}
+
+.repos-panel__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.repos-panel__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+}
+
+.repos-panel__item[data-severity='ok'] {
+  background: var(--color-status-ok-bg);
+  border-color: var(--color-status-ok);
+}
+
+.repos-panel__item[data-severity='warn'] {
+  background: var(--color-status-warn-bg);
+  border-color: var(--color-status-warn);
+}
+
+.repos-panel__item[data-severity='error'] {
+  background: var(--color-status-error-bg);
+  border-color: var(--color-status-error);
+}
+
+.repos-panel__name {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text);
+  font-family: var(--font-mono);
+}
+
+.repos-panel__state {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  text-align: right;
+}
+
+.empty-state {
+  padding: var(--space-4);
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+@media (max-width: 768px) {
+  .repos-panel {
+    padding: var(--space-3);
+  }
+
+  .repos-panel h2 {
+    font-size: var(--font-size-md);
+  }
+
+  .repos-panel__item {
+    padding: var(--space-2);
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .repos-panel__state {
+    text-align: left;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ReposPanel } from './ReposPanel';
+import { fixtureRepos, TESTIDS } from '../test/fixtures';
+
+describe('ReposPanel', () => {
+  it('renders repos list', () => {
+    render(<ReposPanel repos={fixtureRepos} />);
+
+    expect(screen.getByTestId(TESTIDS.reposPanel)).toBeInTheDocument();
+    expect(screen.getByText('aesop')).toBeInTheDocument();
+    expect(screen.getByText('tr-sample-tracker')).toBeInTheDocument();
+  });
+
+  it('renders repo status', () => {
+    render(<ReposPanel repos={fixtureRepos} />);
+
+    // Multiple repos have "clean" status, so use getAllByText
+    const cleanElements = screen.getAllByText('clean');
+    expect(cleanElements.length).toBeGreaterThan(0);
+    expect(screen.getByText(/dirty/)).toBeInTheDocument();
+  });
+
+  it('renders empty state when no repos', () => {
+    render(<ReposPanel repos={[]} />);
+
+    expect(screen.getByText('No repositories.')).toBeInTheDocument();
+  });
+
+  it('renders empty state when repos is null', () => {
+    render(<ReposPanel repos={null} />);
+
+    expect(screen.getByText('No repositories.')).toBeInTheDocument();
+  });
+
+  it('applies severity-based styling based on repo state', () => {
+    render(<ReposPanel repos={fixtureRepos} />);
+
+    const items = screen.getAllByRole('listitem');
+    // First repo is clean
+    expect(items[0]).toHaveAttribute('data-severity', 'ok');
+    // Second repo is dirty
+    expect(items[1]).toHaveAttribute('data-severity', 'warn');
+  });
+});

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

@@ -0,0 +1,67 @@
+/**
+ * ReposPanel — Repository status display.
+ */
+
+import type { RepoStatus } from '../lib/types';
+import { TESTIDS } from '../test/fixtures';
+import './ReposPanel.css';
+
+interface ReposPanelProps {
+  repos: RepoStatus[] | null;
+}
+
+/**
+ * Determine repo state severity for color coding.
+ */
+function getRepoSeverity(state: unknown): 'ok' | 'warn' | 'error' {
+  if (typeof state === 'string') {
+    if (state.toLowerCase().includes('clean')) return 'ok';
+    if (state.toLowerCase().includes('dirty')) return 'warn';
+    return 'error';
+  }
+  return 'ok';
+}
+
+export function ReposPanel({ repos }: ReposPanelProps) {
+  const hasRepos = repos && repos.length > 0;
+
+  return (
+    <section className="repos-panel" data-testid={TESTIDS.reposPanel}>
+      <h2>Repositories</h2>
+      {!hasRepos ? (
+        <p className="empty-state">No repositories.</p>
+      ) : (
+        <ul className="repos-panel__list">
+          {repos.map((repo, idx) => {
+            const repoName = repo.repo || `Repo ${idx + 1}`;
+            const repoState = repo.state ? String(repo.state) : 'unknown';
+            const severity = getRepoSeverity(repoState);
+
+            return (
+              <li
+                key={idx}
+                className="repos-panel__item"
+                data-severity={severity}
+              >
+                <span className="repos-panel__name">{repoName}</span>
+                <span
+                  className="repos-panel__state"
+                  style={{
+                    color:
+                      severity === 'ok'
+                        ? 'var(--color-status-ok)'
+                        : severity === 'warn'
+                          ? 'var(--color-status-warn)'
+                          : 'var(--color-status-error)',
+                  }}
+                >
+                  {repoState}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,106 @@
+/* Scorecard — accessible stat tiles for run verdicts */
+
+.scorecard {
+  padding: var(--space-5);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+.scorecard-header {
+  margin-bottom: var(--space-4);
+}
+
+.scorecard-header h3 {
+  margin: 0 0 var(--space-2) 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.scorecard-total {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.scorecard-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.scorecard-tile {
+  padding: var(--space-3);
+  border-radius: var(--radius-md);
+  text-align: center;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-subtle);
+}
+
+.tile-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-1);
+}
+
+.tile-percent {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-1);
+}
+
+.tile-count {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+/* Severity coloring */
+.scorecard-tile--ok {
+  border-color: var(--color-status-ok);
+  background: var(--color-status-ok-bg);
+}
+
+.scorecard-tile--ok .tile-label,
+.scorecard-tile--ok .tile-percent {
+  color: var(--color-status-ok);
+}
+
+.scorecard-tile--error {
+  border-color: var(--color-status-error);
+  background: var(--color-status-error-bg);
+}
+
+.scorecard-tile--error .tile-label,
+.scorecard-tile--error .tile-percent {
+  color: var(--color-status-error);
+}
+
+.scorecard-tile--warn {
+  border-color: var(--color-status-warn);
+  background: var(--color-status-warn-bg);
+}
+
+.scorecard-tile--warn .tile-label,
+.scorecard-tile--warn .tile-percent {
+  color: var(--color-status-warn);
+}
+
+.scorecard-tile--neutral {
+  border-color: var(--color-status-neutral);
+}
+
+.scorecard-tile--neutral .tile-label,
+.scorecard-tile--neutral .tile-percent {
+  color: var(--color-status-neutral);
+}
+
+.scorecard-footer {
+  border-top: 1px solid var(--color-border-subtle);
+  padding-top: var(--space-3);
+}
+
+.scorecard-footer small {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}

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

@@ -0,0 +1,117 @@
+/**
+ * Scorecard component tests — stat tiles for run verdicts.
+ * Tests both modes: with pricing and without. Tests empty data handling.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Scorecard } from './Scorecard';
+import { fixtureCost, fixtureCostWithPricing, TESTIDS } from '../test/fixtures';
+
+describe('Scorecard', () => {
+  it('renders scorecard with fixture data', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    expect(screen.getByTestId(TESTIDS.scorecard)).toBeInTheDocument();
+  });
+
+  it('displays total runs count', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    expect(scorecard.textContent).toContain('142');
+  });
+
+  it('displays OK rate as percentage', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    // ok_rate is 0.9296, should display as "92.96%"
+    expect(scorecard.textContent).toMatch(/92\.9\d%|93\.0%/);
+  });
+
+  it('displays FAILED rate', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    // failed_rate is 0.0493, should display as "4.9%" or similar
+    expect(scorecard.textContent).toMatch(/4\.\d%|5\.0%/);
+  });
+
+  it('displays EMPTY rate', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    // empty_rate is 0.0141, should display as "1.4%" or "1.5%"
+    expect(scorecard.textContent).toMatch(/1\.\d%|1\.4%/);
+  });
+
+  it('displays HUNG rate', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    // hung_rate is 0.007, should display as "0.7%" or similar
+    expect(scorecard.textContent).toMatch(/0\.\d%/);
+  });
+
+  it('shows severity coloring for OK stat', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    // Should have some indication of OK status (class or style)
+    expect(scorecard.innerHTML).toContain('OK');
+  });
+
+  it('shows severity coloring for FAILED stat', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    expect(scorecard.innerHTML).toContain('FAILED');
+  });
+
+  it('shows skipped_lines footnote when > 0', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    // skipped_lines is 3
+    expect(scorecard.textContent).toContain('3');
+  });
+
+  it('does not show skipped_lines footnote when 0', () => {
+    const noskip = {
+      ...fixtureCost,
+      skipped_lines: 0,
+    };
+    render(<Scorecard cost={noskip} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    // Should not mention skipped lines
+    const text = scorecard.textContent || '';
+    // This is a loose check — just ensure no excessive mention
+    const skipMentions = (text.match(/skipped/gi) || []).length;
+    expect(skipMentions).toBeLessThanOrEqual(1); // tolerance for "skipped" in any case
+  });
+
+  it('works with pricing fixture data', () => {
+    render(<Scorecard cost={fixtureCostWithPricing} />);
+    expect(screen.getByTestId(TESTIDS.scorecard)).toBeInTheDocument();
+  });
+
+  it('handles empty scorecard (0 runs)', () => {
+    const empty = {
+      ...fixtureCost,
+      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(<Scorecard cost={empty} />);
+    expect(screen.getByTestId(TESTIDS.scorecard)).toBeInTheDocument();
+    expect(screen.getByTestId(TESTIDS.scorecard).textContent).toContain('0');
+  });
+
+  it('uses theme color tokens for status colors', () => {
+    render(<Scorecard cost={fixtureCost} />);
+    const scorecard = screen.getByTestId(TESTIDS.scorecard);
+    // Verify that no inline hex colors are used (must use CSS vars)
+    const html = scorecard.innerHTML;
+    expect(html).not.toMatch(/#[0-9a-fA-F]{3,6}/);
+  });
+});

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

@@ -0,0 +1,85 @@
+/**
+ * Scorecard component — accessible stat tiles for run verdicts.
+ * Displays OK/FAILED/EMPTY/HUNG rates as percentages and counts.
+ * Severity coloring uses theme color tokens.
+ * Includes skipped_lines footnote when > 0.
+ */
+
+import type { CostSummary } from '../lib/types';
+import { formatPercent } from '../lib/format';
+import { TESTIDS } from '../test/fixtures';
+import './Scorecard.css';
+
+interface ScorecardProps {
+  cost: CostSummary;
+}
+
+interface StatTile {
+  label: string;
+  count: number;
+  rate: number;
+  severity: 'ok' | 'error' | 'warn' | 'neutral';
+}
+
+export function Scorecard({ cost }: ScorecardProps) {
+  const { overall_scorecard: sc, skipped_lines } = cost;
+
+  const stats: StatTile[] = [
+    {
+      label: 'OK',
+      count: sc.ok_count,
+      rate: sc.ok_rate,
+      severity: 'ok',
+    },
+    {
+      label: 'FAILED',
+      count: sc.failed_count,
+      rate: sc.failed_rate,
+      severity: 'error',
+    },
+    {
+      label: 'EMPTY',
+      count: sc.empty_count,
+      rate: sc.empty_rate,
+      severity: 'warn',
+    },
+    {
+      label: 'HUNG',
+      count: sc.hung_count,
+      rate: sc.hung_rate,
+      severity: 'error',
+    },
+  ];
+
+  return (
+    <section
+      className="scorecard"
+      data-testid={TESTIDS.scorecard}
+      aria-label="Fleet quality scorecard"
+    >
+      <header className="scorecard-header">
+        <h3>Run Verdict Rates</h3>
+        <div className="scorecard-total">Total runs: {sc.total_runs}</div>
+      </header>
+      <div className="scorecard-tiles">
+        {stats.map((stat) => (
+          <article
+            key={stat.label}
+            className={`scorecard-tile scorecard-tile--${stat.severity}`}
+          >
+            <div className="tile-label">{stat.label}</div>
+            <div className="tile-percent">{formatPercent(stat.rate)}</div>
+            <div className="tile-count">{stat.count} runs</div>
+          </article>
+        ))}
+      </div>
+      {skipped_lines > 0 && (
+        <footer className="scorecard-footer">
+          <small>
+            Data quality note: {skipped_lines} line(s) in the ledger could not be parsed.
+          </small>
+        </footer>
+      )}
+    </section>
+  );
+}