@matt82198/aesop 0.1.0-beta.5 → 0.1.0

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

@@ -1,180 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { TrackerCard } from './TrackerCard';
-import { fixtureTrackerItems } from '../test/fixtures';
-import * as api from '../lib/api';
-
-vi.mock('../lib/api');
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
-describe('TrackerCard', () => {
-  it('renders title, priority chip, and tags', () => {
-    const item = fixtureTrackerItems[0]; // P0 in-progress item
-    render(<TrackerCard item={item} />);
-
-    expect(screen.getByText(item.title)).toBeInTheDocument();
-    expect(screen.getByText(item.priority)).toBeInTheDocument();
-    expect(screen.getByText('ui')).toBeInTheDocument();
-    expect(screen.getByText('wave-14')).toBeInTheDocument();
-  });
-
-  it('shows expand/collapse button and toggles details on click', async () => {
-    const item = fixtureTrackerItems[0];
-    render(<TrackerCard item={item} />);
-
-    const expandButton = screen.getByRole('button', { name: /expand/i });
-    expect(expandButton).toHaveAttribute('aria-expanded', 'false');
-
-    // Initially details should not be visible
-    expect(screen.queryByText(/Created/)).not.toBeInTheDocument();
-
-    fireEvent.click(expandButton);
-    await waitFor(() => {
-      expect(expandButton).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    // Now details should be visible
-    expect(screen.getByText(/Created/)).toBeInTheDocument();
-  });
-
-  it('displays notes in expanded state', () => {
-    const item = fixtureTrackerItems[0];
-    render(<TrackerCard item={item} />);
-
-    // Expand
-    fireEvent.click(screen.getByRole('button', { name: /expand/i }));
-
-    expect(screen.getByText(item.notes!)).toBeInTheDocument();
-  });
-
-  it('displays created and completed timestamps when expanded', () => {
-    const item = fixtureTrackerItems[1]; // This one has completed_at
-    render(<TrackerCard item={item} />);
-
-    fireEvent.click(screen.getByRole('button', { name: /expand/i }));
-
-    const times = screen.getAllByRole('time');
-    expect(times.length).toBeGreaterThanOrEqual(2); // created + completed
-  });
-
-  it('renders pr_link as inert text when URL is malicious (javascript:)', async () => {
-    const item = fixtureTrackerItems[4]; // The hostile javascript: pr_link
-    expect(item.pr_link).toBe('javascript:alert(1)');
-
-    render(<TrackerCard item={item} />);
-    fireEvent.click(screen.getByRole('button', { name: /expand/i }));
-
-    await waitFor(() => {
-      // Should render as <code class="pr-link-inert"> not as <a href>
-      const code = screen.getByText('javascript:alert(1)');
-      expect(code.tagName).toBe('CODE');
-      expect(code).toHaveClass('pr-link-inert');
-    });
-
-    // Assert no <a> element exists
-    expect(screen.queryByRole('link', { name: 'javascript:alert(1)' })).not.toBeInTheDocument();
-  });
-
-  it('renders pr_link as clickable anchor when URL is https://', async () => {
-    const item = {
-      ...fixtureTrackerItems[0],
-      pr_link: 'https://github.com/matt82198/aesop/pull/113',
-    };
-
-    render(<TrackerCard item={item} />);
-    fireEvent.click(screen.getByRole('button', { name: /expand/i }));
-
-    await waitFor(() => {
-      const link = screen.getByRole('link', { name: /github.com/ });
-      expect(link).toHaveAttribute('href', item.pr_link);
-      expect(link).toHaveAttribute('target', '_blank');
-    });
-  });
-
-  it('renders action buttons for the tracker item', () => {
-    const item = fixtureTrackerItems[0];
-
-    render(<TrackerCard item={item} />);
-
-    // Find all buttons
-    const buttons = screen.getAllByRole('button');
-    const actionButtons = buttons.filter((b) => {
-      const text = b.textContent?.trim() || '';
-      return text === 'Claim' || text === 'Done' || text === 'Archive';
-    });
-
-    // Should have at least 3 action buttons
-    expect(actionButtons.length).toBeGreaterThanOrEqual(3);
-  });
-
-  it('Done button updates status to done', async () => {
-    const item = fixtureTrackerItems[0];
-    const mockUpdate = vi.fn();
-    const updated = { ...item, status: 'done' as const, lane: 'done' as const };
-
-    vi.mocked(api.updateTrackerItem).mockResolvedValue(updated);
-
-    render(<TrackerCard item={item} onUpdate={mockUpdate} />);
-
-    // Find the Done button within the actions section
-    const buttons = screen.getAllByRole('button');
-    const doneButton = buttons.find((b) => b.textContent === 'Done');
-    expect(doneButton).toBeDefined();
-
-    fireEvent.click(doneButton!);
-
-    await waitFor(() => {
-      expect(api.updateTrackerItem).toHaveBeenCalledWith(item.id, {
-        lane: 'done',
-        status: 'done',
-      });
-    });
-  });
-
-  it('Archive button updates status to archived', async () => {
-    const item = fixtureTrackerItems[0];
-    const mockUpdate = vi.fn();
-    const updated = { ...item, status: 'archived' as const, lane: 'done' as const };
-
-    vi.mocked(api.updateTrackerItem).mockResolvedValue(updated);
-
-    render(<TrackerCard item={item} onUpdate={mockUpdate} />);
-
-    const archiveButton = screen.getByRole('button', { name: /Archive/ });
-    fireEvent.click(archiveButton);
-
-    await waitFor(() => {
-      expect(api.updateTrackerItem).toHaveBeenCalledWith(item.id, {
-        status: 'archived',
-        lane: 'done',
-      });
-    });
-  });
-
-  it('renders all action buttons', () => {
-    const item = fixtureTrackerItems[0];
-
-    render(<TrackerCard item={item} />);
-
-    // Verify all action buttons are present
-    const buttons = screen.getAllByRole('button');
-    const claimButton = buttons.find((b) => b.textContent?.trim() === 'Claim');
-    const doneButton = buttons.find((b) => b.textContent?.trim() === 'Done');
-    const archiveButton = buttons.find((b) => b.textContent?.trim() === 'Archive');
-
-    expect(claimButton).toBeDefined();
-    expect(doneButton).toBeDefined();
-    expect(archiveButton).toBeDefined();
-  });
-
-  it('buttons are disabled when status already matches action', () => {
-    const item = { ...fixtureTrackerItems[0], status: 'in-progress' as const };
-    render(<TrackerCard item={item} />);
-
-    const claimButton = screen.getByRole('button', { name: /Claim/ });
-    expect(claimButton).toBeDisabled();
-  });
-});

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

@@ -1,160 +0,0 @@
-/**
- * TrackerCard — individual tracker item card.
- * Renders priority chip, tags, expandable details (notes, timestamps, sanitized pr_link).
- * Actions: Claim (move to in-progress), Done (move to done), Archive.
- * Errors announced via aria-live.
- */
-
-import { useState } from 'react';
-import { TESTIDS } from '../test/fixtures';
-import type { TrackerItem } from '../lib/types';
-import { updateTrackerItem } from '../lib/api';
-import { sanitizeUrl } from '../lib/sanitizeUrl';
-
-interface TrackerCardProps {
-  item: TrackerItem;
-  onUpdate?: (updated: TrackerItem) => void;
-}
-
-const PRIORITY_STYLES: Record<string, string> = {
-  P0: '--color-status-error',
-  P1: '--color-status-warn',
-  P2: '--color-status-info',
-};
-
-export function TrackerCard({ item, onUpdate }: TrackerCardProps) {
-  const [expanded, setExpanded] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleAction(action: 'claim' | 'done' | 'archive') {
-    setLoading(true);
-    setError(null);
-    try {
-      const updates: Record<string, string> = {};
-      if (action === 'claim') {
-        updates.lane = 'in-progress';
-        updates.status = 'in-progress';
-      } else if (action === 'done') {
-        updates.lane = 'done';
-        updates.status = 'done';
-      } else if (action === 'archive') {
-        updates.status = 'archived';
-        updates.lane = 'done';
-      }
-      const updated = await updateTrackerItem(item.id, updates);
-      onUpdate?.(updated);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Action failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  const priorityColor = PRIORITY_STYLES[item.priority] || '--color-status-neutral';
-  const sanitized = sanitizeUrl(item.pr_link);
-
-  return (
-    <div className="tracker-card" data-testid={TESTIDS.trackerCard}>
-      <div className="tracker-card-header">
-        <div className="tracker-card-title-row">
-          <span
-            className="priority-chip"
-            style={{ backgroundColor: `var(${priorityColor})` }}
-          >
-            {item.priority}
-          </span>
-          <h3 className="tracker-card-title">{item.title}</h3>
-        </div>
-        <button
-          type="button"
-          className="expand-button"
-          onClick={() => setExpanded(!expanded)}
-          aria-expanded={expanded}
-          aria-label={`${expanded ? 'Collapse' : 'Expand'} details for ${item.title}`}
-        >
-          {expanded ? '▼' : '▶'}
-        </button>
-      </div>
-
-      {item.tags.length > 0 && (
-        <div className="tracker-card-tags">
-          {item.tags.map((tag) => (
-            <span key={tag} className="tag">
-              {tag}
-            </span>
-          ))}
-        </div>
-      )}
-
-      {expanded && (
-        <div className="tracker-card-details">
-          {item.notes && (
-            <div className="detail-section">
-              <label className="detail-label">Notes</label>
-              <p>{item.notes}</p>
-            </div>
-          )}
-
-          <div className="detail-section">
-            <label className="detail-label">Created</label>
-            <time>{new Date(item.created_at).toLocaleString()}</time>
-          </div>
-
-          {item.completed_at && (
-            <div className="detail-section">
-              <label className="detail-label">Completed</label>
-              <time>{new Date(item.completed_at).toLocaleString()}</time>
-            </div>
-          )}
-
-          {item.pr_link && (
-            <div className="detail-section">
-              <label className="detail-label">PR Link</label>
-              {sanitized ? (
-                <a href={sanitized} target="_blank" rel="noopener noreferrer">
-                  {item.pr_link}
-                </a>
-              ) : (
-                <code className="pr-link-inert">{item.pr_link}</code>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      <div className="tracker-card-actions">
-        <button
-          type="button"
-          disabled={loading || item.status === 'in-progress'}
-          onClick={() => handleAction('claim')}
-          aria-label={`Claim: ${item.title}`}
-        >
-          Claim
-        </button>
-        <button
-          type="button"
-          disabled={loading || item.status === 'done'}
-          onClick={() => handleAction('done')}
-          aria-label={`Mark done: ${item.title}`}
-        >
-          Done
-        </button>
-        <button
-          type="button"
-          disabled={loading || item.status === 'archived'}
-          onClick={() => handleAction('archive')}
-          aria-label={`Archive: ${item.title}`}
-        >
-          Archive
-        </button>
-      </div>
-
-      {error && (
-        <div className="card-error" role="alert" aria-live="assertive">
-          {error}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,189 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { TrackerForm } from './TrackerForm';
-import { fixtureTrackerItems } from '../test/fixtures';
-import * as api from '../lib/api';
-
-vi.mock('../lib/api');
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
-describe('TrackerForm', () => {
-  it('renders form with labeled inputs', () => {
-    render(<TrackerForm />);
-
-    expect(screen.getByLabelText('Title')).toBeInTheDocument();
-    expect(screen.getByLabelText('Priority')).toBeInTheDocument();
-    expect(screen.getByLabelText(/Tags/)).toBeInTheDocument();
-    expect(screen.getByLabelText('Notes')).toBeInTheDocument();
-  });
-
-  it('title field is required and form does not submit without it', async () => {
-    const newItem = fixtureTrackerItems[0];
-    vi.mocked(api.createTrackerItem).mockResolvedValue(newItem);
-
-    render(<TrackerForm />);
-
-    const submitButton = screen.getByRole('button', { name: /Create Item/ });
-    fireEvent.click(submitButton);
-
-    // createTrackerItem should NOT be called since title is empty
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    expect(api.createTrackerItem).not.toHaveBeenCalled();
-  });
-
-  it('calls createTrackerItem with form data and announces success', async () => {
-    const mockSuccess = vi.fn();
-    const newItem = fixtureTrackerItems[0];
-
-    vi.mocked(api.createTrackerItem).mockResolvedValue(newItem);
-
-    render(<TrackerForm onSuccess={mockSuccess} />);
-
-    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Test item' } });
-    fireEvent.change(screen.getByLabelText('Priority'), { target: { value: 'P0' } });
-    fireEvent.change(screen.getByLabelText(/Tags/), { target: { value: 'tag1, tag2' } });
-    fireEvent.change(screen.getByLabelText('Notes'), { target: { value: 'Test notes' } });
-
-    const submitButton = screen.getByRole('button', { name: /Create Item/ });
-    fireEvent.click(submitButton);
-
-    await waitFor(() => {
-      expect(api.createTrackerItem).toHaveBeenCalledWith({
-        title: 'Test item',
-        priority: 'P0',
-        tags: ['tag1', 'tag2'],
-        notes: 'Test notes',
-      });
-      expect(mockSuccess).toHaveBeenCalled();
-    });
-
-    // Success message should be announced
-    const successMsg = screen.getByText('Item created successfully!');
-    expect(successMsg).toHaveAttribute('role', 'status');
-    expect(successMsg).toHaveAttribute('aria-live', 'polite');
-  });
-
-  it('parses comma-separated tags correctly', async () => {
-    const newItem = fixtureTrackerItems[0];
-    vi.mocked(api.createTrackerItem).mockResolvedValue(newItem);
-
-    render(<TrackerForm />);
-
-    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Test' } });
-    fireEvent.change(screen.getByLabelText(/Tags/), { target: { value: '  ui , wave-14 , critical  ' } });
-
-    fireEvent.click(screen.getByRole('button', { name: /Create Item/ }));
-
-    await waitFor(() => {
-      expect(api.createTrackerItem).toHaveBeenCalledWith(
-        expect.objectContaining({
-          tags: ['ui', 'wave-14', 'critical'],
-        })
-      );
-    });
-  });
-
-  it('trims whitespace from title and notes', async () => {
-    const newItem = fixtureTrackerItems[0];
-    vi.mocked(api.createTrackerItem).mockResolvedValue(newItem);
-
-    render(<TrackerForm />);
-
-    fireEvent.change(screen.getByLabelText('Title'), { target: { value: '  Test item  ' } });
-    fireEvent.change(screen.getByLabelText('Notes'), { target: { value: '  Some notes  ' } });
-
-    fireEvent.click(screen.getByRole('button', { name: /Create Item/ }));
-
-    await waitFor(() => {
-      expect(api.createTrackerItem).toHaveBeenCalledWith(
-        expect.objectContaining({
-          title: 'Test item',
-          notes: 'Some notes',
-        })
-      );
-    });
-  });
-
-  it('clears form after successful submission', async () => {
-    const newItem = fixtureTrackerItems[0];
-    vi.mocked(api.createTrackerItem).mockResolvedValue(newItem);
-
-    render(<TrackerForm />);
-
-    const titleInput = screen.getByLabelText('Title') as HTMLInputElement;
-    fireEvent.change(titleInput, { target: { value: 'Test item' } });
-    fireEvent.change(screen.getByLabelText('Priority'), { target: { value: 'P0' } });
-    fireEvent.change(screen.getByLabelText(/Tags/), { target: { value: 'tag1' } });
-
-    fireEvent.click(screen.getByRole('button', { name: /Create Item/ }));
-
-    await waitFor(() => {
-      expect(titleInput.value).toBe('');
-    });
-  });
-
-  it('announces errors via aria-live=assertive', async () => {
-    vi.mocked(api.createTrackerItem).mockRejectedValue(new Error('Network error'));
-
-    render(<TrackerForm />);
-
-    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Test' } });
-    fireEvent.click(screen.getByRole('button', { name: /Create Item/ }));
-
-    await waitFor(() => {
-      const errorMsg = screen.getByText('Network error');
-      expect(errorMsg).toHaveAttribute('role', 'alert');
-      expect(errorMsg).toHaveAttribute('aria-live', 'assertive');
-    });
-  });
-
-  it('disables inputs and button while loading', async () => {
-    vi.mocked(api.createTrackerItem).mockImplementation(
-      () => new Promise((resolve) => setTimeout(() => resolve(fixtureTrackerItems[0]), 100))
-    );
-
-    render(<TrackerForm />);
-
-    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Test' } });
-    const submitButton = screen.getByRole('button', { name: /Create Item/ });
-
-    fireEvent.click(submitButton);
-
-    expect(submitButton).toBeDisabled();
-    expect(screen.getByLabelText('Title')).toBeDisabled();
-
-    await waitFor(() => {
-      expect(submitButton).not.toBeDisabled();
-    });
-  });
-
-  it('default priority is P1', () => {
-    render(<TrackerForm />);
-
-    const prioritySelect = screen.getByLabelText('Priority') as HTMLSelectElement;
-    expect(prioritySelect.value).toBe('P1');
-  });
-
-  it('omits notes if empty', async () => {
-    const newItem = fixtureTrackerItems[0];
-    vi.mocked(api.createTrackerItem).mockResolvedValue(newItem);
-
-    render(<TrackerForm />);
-
-    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Test' } });
-    // Don't set notes
-
-    fireEvent.click(screen.getByRole('button', { name: /Create Item/ }));
-
-    await waitFor(() => {
-      expect(api.createTrackerItem).toHaveBeenCalledWith(
-        expect.not.objectContaining({
-          notes: '',
-        })
-      );
-    });
-  });
-});

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

@@ -1,144 +0,0 @@
-/**
- * TrackerForm — form to create new tracker items.
- * Labeled inputs for title, priority, tags, notes.
- * Submit via api.ts with CSRF.
- * Validation, success/error announced via aria-live.
- */
-
-import { useState } from 'react';
-import { TESTIDS } from '../test/fixtures';
-import { createTrackerItem } from '../lib/api';
-
-interface TrackerFormProps {
-  onSuccess?: () => void;
-}
-
-export function TrackerForm({ onSuccess }: TrackerFormProps) {
-  const [title, setTitle] = useState('');
-  const [priority, setPriority] = useState('P1');
-  const [tags, setTags] = useState('');
-  const [notes, setNotes] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setError(null);
-    setSuccess(false);
-
-    // Validation
-    if (!title.trim()) {
-      setError('Title is required');
-      return;
-    }
-
-    // If validation passes, proceed with async submit
-    performSubmit();
-  }
-
-  async function performSubmit() {
-
-    const tagArray = tags
-      .split(',')
-      .map((t) => t.trim())
-      .filter((t) => t.length > 0);
-
-    setLoading(true);
-    try {
-      await createTrackerItem({
-        title: title.trim(),
-        priority,
-        tags: tagArray,
-        notes: notes.trim() || undefined,
-      });
-
-      setSuccess(true);
-      setTitle('');
-      setPriority('P1');
-      setTags('');
-      setNotes('');
-      onSuccess?.();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to create item');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <form className="tracker-form" data-testid={TESTIDS.trackerForm} onSubmit={handleSubmit}>
-      <div className="form-group">
-        <label htmlFor="tracker-title">Title</label>
-        <input
-          id="tracker-title"
-          type="text"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder="Enter item title"
-          disabled={loading}
-          required
-          data-testid={TESTIDS.trackerFormTitle}
-        />
-      </div>
-
-      <div className="form-group">
-        <label htmlFor="tracker-priority">Priority</label>
-        <select
-          id="tracker-priority"
-          value={priority}
-          onChange={(e) => setPriority(e.target.value)}
-          disabled={loading}
-        >
-          <option value="P0">P0 (Critical)</option>
-          <option value="P1">P1 (High)</option>
-          <option value="P2">P2 (Medium)</option>
-        </select>
-      </div>
-
-      <div className="form-group">
-        <label htmlFor="tracker-tags">Tags (comma-separated)</label>
-        <input
-          id="tracker-tags"
-          type="text"
-          value={tags}
-          onChange={(e) => setTags(e.target.value)}
-          placeholder="e.g., ui, wave-14, critical"
-          disabled={loading}
-        />
-      </div>
-
-      <div className="form-group">
-        <label htmlFor="tracker-notes">Notes</label>
-        <textarea
-          id="tracker-notes"
-          value={notes}
-          onChange={(e) => setNotes(e.target.value)}
-          placeholder="Optional notes"
-          rows={3}
-          disabled={loading}
-        />
-      </div>
-
-      <button
-        type="submit"
-        disabled={loading}
-        data-testid={TESTIDS.trackerFormSubmit}
-      >
-        {loading ? 'Creating...' : 'Create Item'}
-      </button>
-
-      {error && (
-        <div className="form-error" role="alert" aria-live="assertive">
-          {error}
-        </div>
-      )}
-
-      {success && (
-        <div className="form-success" role="status" aria-live="polite">
-          Item created successfully!
-        </div>
-      )}
-    </form>
-  );
-}