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

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

@@ -0,0 +1,208 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { InboxForm } from './InboxForm';
+import { TESTIDS } from '../test/fixtures';
+import * as api from '../lib/api';
+
+vi.mock('../lib/api', () => ({
+  submitInbox: vi.fn(),
+}));
+
+describe('InboxForm', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders form with input and submit button', () => {
+    render(<InboxForm />);
+
+    expect(screen.getByTestId(TESTIDS.inboxForm)).toBeInTheDocument();
+    expect(screen.getByTestId(TESTIDS.inboxInput)).toBeInTheDocument();
+    expect(screen.getByTestId(TESTIDS.inboxSubmit)).toBeInTheDocument();
+  });
+
+  it('displays placeholder text', () => {
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput) as HTMLInputElement;
+    expect(input).toHaveAttribute('placeholder', 'Add a task or note…');
+  });
+
+  it('disables submit button when input is empty', () => {
+    render(<InboxForm />);
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit) as HTMLButtonElement;
+    expect(submitButton).toBeDisabled();
+  });
+
+  it('enables submit button when input has text', async () => {
+    const user = userEvent.setup();
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput);
+    await user.type(input, 'Test message');
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit) as HTMLButtonElement;
+    expect(submitButton).not.toBeDisabled();
+  });
+
+  it('submits form on button click', async () => {
+    const user = userEvent.setup();
+    const mockSubmit = vi.mocked(api.submitInbox);
+    mockSubmit.mockResolvedValueOnce({ ok: true });
+
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput);
+    await user.type(input, 'Test message');
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit);
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockSubmit).toHaveBeenCalledWith('Test message');
+    });
+  });
+
+  it('clears input on successful submission', async () => {
+    const user = userEvent.setup();
+    const mockSubmit = vi.mocked(api.submitInbox);
+    mockSubmit.mockResolvedValueOnce({ ok: true });
+
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput) as HTMLInputElement;
+    await user.type(input, 'Test message');
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit);
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(input.value).toBe('');
+    });
+  });
+
+  it('displays success message after submission', async () => {
+    const user = userEvent.setup();
+    const mockSubmit = vi.mocked(api.submitInbox);
+    mockSubmit.mockResolvedValueOnce({ ok: true });
+
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput);
+    await user.type(input, 'Test message');
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit);
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Message submitted!')).toBeInTheDocument();
+    });
+  });
+
+  it('handles submission error', async () => {
+    const user = userEvent.setup();
+    const mockSubmit = vi.mocked(api.submitInbox);
+    mockSubmit.mockRejectedValueOnce(new Error('Network error'));
+
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput);
+    await user.type(input, 'Test message');
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit);
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Error: Network error/)).toBeInTheDocument();
+    });
+  });
+
+  it('disables input while submitting', async () => {
+    const user = userEvent.setup();
+    const mockSubmit = vi.mocked(api.submitInbox);
+    mockSubmit.mockImplementationOnce(
+      () =>
+        new Promise((resolve) =>
+          setTimeout(() => resolve({ ok: true }), 100)
+        )
+    );
+
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput) as HTMLInputElement;
+    await user.type(input, 'Test message');
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit);
+    await user.click(submitButton);
+
+    expect(input).toBeDisabled();
+
+    await waitFor(() => {
+      expect(input).not.toBeDisabled();
+    });
+  });
+
+  it('calls onSubmitSuccess callback after successful submission', async () => {
+    const user = userEvent.setup();
+    const mockSubmit = vi.mocked(api.submitInbox);
+    const mockCallback = vi.fn();
+    mockSubmit.mockResolvedValueOnce({ ok: true });
+
+    render(<InboxForm onSubmitSuccess={mockCallback} />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput);
+    await user.type(input, 'Test message');
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit);
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockCallback).toHaveBeenCalled();
+    });
+  });
+
+  it('has proper accessibility attributes', () => {
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput);
+    expect(input).toHaveAttribute('id', 'inbox-input');
+
+    const label = screen.getByLabelText('Message');
+    expect(label).toBe(input);
+  });
+
+  it('submits on Enter key in input', async () => {
+    const user = userEvent.setup();
+    const mockSubmit = vi.mocked(api.submitInbox);
+    mockSubmit.mockResolvedValueOnce({ ok: true });
+
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput);
+    await user.type(input, 'Test message{Enter}');
+
+    await waitFor(() => {
+      expect(mockSubmit).toHaveBeenCalledWith('Test message');
+    });
+  });
+
+  it('trims whitespace from submission', async () => {
+    const user = userEvent.setup();
+    const mockSubmit = vi.mocked(api.submitInbox);
+    mockSubmit.mockResolvedValueOnce({ ok: true });
+
+    render(<InboxForm />);
+
+    const input = screen.getByTestId(TESTIDS.inboxInput);
+    await user.type(input, '  Test message  ');
+
+    const submitButton = screen.getByTestId(TESTIDS.inboxSubmit);
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockSubmit).toHaveBeenCalledWith('Test message');
+    });
+  });
+});

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

@@ -0,0 +1,116 @@
+/**
+ * InboxForm — Quick inbox submit form with aria-live announcement.
+ *
+ * D5: real <form> and <button> elements, labeled input, success/error
+ * announced to an aria-live region.
+ */
+
+import { useState, useRef, useCallback } from 'react';
+import { submitInbox } from '../lib/api';
+import { TESTIDS } from '../test/fixtures';
+import './InboxForm.css';
+
+interface InboxFormProps {
+  onSubmitSuccess?: () => void;
+}
+
+export function InboxForm({ onSubmitSuccess }: InboxFormProps) {
+  const [input, setInput] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const liveRegionRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      if (!input.trim()) {
+        setError('Please enter a message');
+        return;
+      }
+
+      setIsSubmitting(true);
+      setError(null);
+      setSuccess(false);
+
+      try {
+        await submitInbox(input.trim());
+        setInput('');
+        setSuccess(true);
+        // Announce to live region
+        if (liveRegionRef.current) {
+          liveRegionRef.current.textContent = `Message submitted: "${input.trim()}"`;
+        }
+        onSubmitSuccess?.();
+        // Clear success message after 3 seconds
+        setTimeout(() => setSuccess(false), 3000);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to submit';
+        setError(message);
+        // Announce error to live region
+        if (liveRegionRef.current) {
+          liveRegionRef.current.textContent = `Error: ${message}`;
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [input, onSubmitSuccess]
+  );
+
+  return (
+    <section className="inbox-form" data-testid={TESTIDS.inboxForm}>
+      <h2>Quick Inbox</h2>
+      <form onSubmit={handleSubmit} className="inbox-form__form">
+        <div className="inbox-form__group">
+          <label htmlFor="inbox-input" className="sr-only">
+            Message
+          </label>
+          <input
+            ref={inputRef}
+            id="inbox-input"
+            type="text"
+            className="inbox-form__input"
+            data-testid={TESTIDS.inboxInput}
+            placeholder="Add a task or note…"
+            value={input}
+            onChange={(e) => setInput(e.currentTarget.value)}
+            disabled={isSubmitting}
+            aria-describedby={error ? 'inbox-error' : undefined}
+          />
+          <button
+            type="submit"
+            className="inbox-form__submit"
+            data-testid={TESTIDS.inboxSubmit}
+            disabled={isSubmitting || !input.trim()}
+            aria-label={isSubmitting ? 'Submitting…' : 'Submit message'}
+          >
+            {isSubmitting ? 'Submitting…' : 'Submit'}
+          </button>
+        </div>
+
+        {error && (
+          <div className="inbox-form__error" id="inbox-error">
+            {error}
+          </div>
+        )}
+
+        {success && (
+          <div className="inbox-form__success">
+            Message submitted!
+          </div>
+        )}
+      </form>
+
+      <div
+        ref={liveRegionRef}
+        className="sr-only"
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+      />
+    </section>
+  );
+}

package/ui/web/src/components/MessagesTail.module.css

@@ -0,0 +1,144 @@
+/**
+ * MessagesTail styling — role-colored messages with smooth scrolling.
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-subtle);
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-border-subtle);
+  background: var(--color-bg);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.toggleButton {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.toggleButton:hover {
+  background: var(--color-bg-inset);
+  color: var(--color-text);
+}
+
+.toggleButton:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.toggleButton[aria-pressed='true'] {
+  background: var(--color-status-ok-bg);
+  color: var(--color-status-ok);
+  border-color: var(--color-status-ok);
+}
+
+.messagesBox {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  scroll-behavior: smooth;
+}
+
+.emptyState {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  padding: var(--space-8) var(--space-4);
+}
+
+.message {
+  padding: var(--space-3) var(--space-4);
+  border-left: 3px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  font-size: var(--font-size-sm);
+}
+
+/* Role-based coloring */
+.role-user {
+  border-left-color: var(--color-status-info);
+  background: rgba(9, 105, 218, 0.04); /* info with opacity */
+}
+
+.role-assistant {
+  border-left-color: var(--color-status-ok);
+  background: rgba(26, 127, 55, 0.04); /* ok with opacity */
+}
+
+.role {
+  display: inline-block;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  font-size: var(--font-size-xs);
+  margin-right: var(--space-2);
+}
+
+.role-user .role {
+  color: var(--color-status-info);
+}
+
+.role-assistant .role {
+  color: var(--color-status-ok);
+}
+
+.timestamp {
+  display: inline-block;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+  margin-left: var(--space-2);
+}
+
+.text {
+  margin-top: var(--space-2);
+  color: var(--color-text);
+  line-height: var(--line-height-normal);
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.footer {
+  padding: var(--space-2) var(--space-4);
+  border-top: 1px solid var(--color-border-subtle);
+  background: var(--color-bg);
+  text-align: right;
+  font-size: var(--font-size-xs);
+}
+
+.footerTimestamp {
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .messagesBox {
+    scroll-behavior: auto;
+  }
+}

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

@@ -0,0 +1,176 @@
+/**
+ * MessagesTail — Last ~12 messages with role coloring and auto-follow toggle.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import MessagesTail from './MessagesTail';
+import { fixtureMessages } from '../test/fixtures';
+import { TESTIDS } from '../test/fixtures';
+
+describe('MessagesTail', () => {
+  it('renders the messages tail container with testid', () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    expect(screen.getByTestId(TESTIDS.messagesTail)).toBeInTheDocument();
+  });
+
+  it('renders all messages with role and text', () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    expect(screen.getByText('Run wave 14: dashboard rewrite, start with the foundation unit.')).toBeInTheDocument();
+    expect(screen.getByText('Dispatching U1 (foundation) to a worktree agent; U3 cost collector runs in parallel.')).toBeInTheDocument();
+  });
+
+  it('renders messages with role-based styling', () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    const messages = screen.getAllByTestId(/message-\d+/);
+    expect(messages.length).toBe(fixtureMessages.length);
+  });
+
+  it('formats timestamps using format.ts', () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    // The formatTimestamp should produce relative times (e.g., "now", "2m ago")
+    // Just verify timestamps are rendered (exact format depends on current time)
+    const container = screen.getByTestId(TESTIDS.messagesTail);
+    const textContent = container.textContent || '';
+    expect(textContent.length > 0).toBe(true);
+  });
+
+  it('shows empty state when no messages', () => {
+    render(<MessagesTail messages={[]} />);
+    const container = screen.getByTestId(TESTIDS.messagesTail);
+    expect(container.textContent).toContain('no messages');
+  });
+
+  it('renders follow toggle as a real button', () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    const toggleButton = screen.getByTestId(TESTIDS.messagesFollowToggle);
+    expect(toggleButton).toBeInstanceOf(HTMLButtonElement);
+    expect(toggleButton).toHaveTextContent(/follow|scroll/i);
+  });
+
+  it('follow toggle is checked by default', () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    const toggleButton = screen.getByTestId(TESTIDS.messagesFollowToggle);
+    expect(toggleButton).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('pause follow when user scrolls up manually', async () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    const toggleButton = screen.getByTestId(TESTIDS.messagesFollowToggle);
+
+    // Toggle button starts in "following" state
+    expect(toggleButton).toHaveAttribute('aria-pressed', 'true');
+
+    // Simulate user scrolling - this would normally set isFollowing to false
+    // In real browser: scroll event triggers handleScroll which checks distance from bottom
+    // For testing, we'll just click to simulate the behavior
+    fireEvent.click(toggleButton);
+
+    await waitFor(() => {
+      expect(toggleButton).toHaveAttribute('aria-pressed', 'false');
+    });
+  });
+
+  it('resume follow when toggle is clicked', async () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    const toggleButton = screen.getByTestId(TESTIDS.messagesFollowToggle);
+
+    // Start in following state
+    expect(toggleButton).toHaveAttribute('aria-pressed', 'true');
+
+    // Click to pause
+    fireEvent.click(toggleButton);
+    expect(toggleButton).toHaveAttribute('aria-pressed', 'false');
+
+    // Click again to resume
+    fireEvent.click(toggleButton);
+
+    await waitFor(() => {
+      expect(toggleButton).toHaveAttribute('aria-pressed', 'true');
+    });
+  });
+
+  it('auto-scrolls when follow is enabled and new messages arrive', async () => {
+    const { rerender } = render(<MessagesTail messages={fixtureMessages} />);
+
+    const newMessages = [
+      ...fixtureMessages,
+      {
+        role: 'user' as const,
+        text: 'New message',
+        timestamp: '2026-07-13T14:35:00.000Z',
+      },
+    ];
+
+    rerender(<MessagesTail messages={newMessages} />);
+
+    // Should have auto-scrolled to bottom
+    expect(screen.getByText('New message')).toBeInTheDocument();
+  });
+
+  it('does not auto-scroll when follow is disabled', async () => {
+    const { rerender } = render(<MessagesTail messages={fixtureMessages} />);
+    const toggleButton = screen.getByTestId(TESTIDS.messagesFollowToggle);
+
+    // Disable follow
+    fireEvent.click(toggleButton);
+
+    await waitFor(() => {
+      expect(toggleButton).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    // Add new message
+    const newMessages = [
+      ...fixtureMessages,
+      {
+        role: 'assistant' as const,
+        text: 'Another message',
+        timestamp: '2026-07-13T14:36:00.000Z',
+      },
+    ];
+
+    rerender(<MessagesTail messages={newMessages} />);
+
+    // New message should be in DOM but scroll position should not change
+    expect(screen.getByText('Another message')).toBeInTheDocument();
+  });
+
+  it('renders messages with distinct role styling (user vs assistant)', () => {
+    render(<MessagesTail messages={fixtureMessages} />);
+    // First message is user, should have different styling than assistant messages
+    const userMessage = screen.getByText('Run wave 14: dashboard rewrite, start with the foundation unit.');
+    const userMessageContainer = userMessage.closest('[data-testid^="message-"]') as HTMLElement;
+    expect(userMessageContainer?.className).toContain('role-user');
+
+    // Check for an assistant message
+    const assistantMessage = screen.getByText('Dispatching U1 (foundation) to a worktree agent; U3 cost collector runs in parallel.');
+    const assistantMessageContainer = assistantMessage.closest('[data-testid^="message-"]') as HTMLElement;
+    expect(assistantMessageContainer?.className).toContain('role-assistant');
+  });
+
+  it('handles null/undefined messages gracefully', () => {
+    const edgeCaseMessages = [
+      ...fixtureMessages,
+      {
+        role: 'assistant' as const,
+        text: '',
+        timestamp: '2026-07-13T14:37:00.000Z',
+      },
+    ];
+    render(<MessagesTail messages={edgeCaseMessages} />);
+    expect(screen.getByTestId(TESTIDS.messagesTail)).toBeInTheDocument();
+  });
+
+  it('limits to last ~12 messages if more provided', () => {
+    const manyMessages: Array<typeof fixtureMessages[0]> = Array.from({ length: 20 }, (_, i) => ({
+      role: i % 2 === 0 ? ('user' as const) : ('assistant' as const),
+      text: `Message ${i}`,
+      timestamp: new Date(Date.now() - i * 60000).toISOString(),
+    }));
+
+    render(<MessagesTail messages={manyMessages} />);
+    const container = screen.getByTestId(TESTIDS.messagesTail);
+    const messageElements = container.querySelectorAll('[data-testid^="message-"]');
+    expect(messageElements.length).toBeLessThanOrEqual(12);
+  });
+});