repoburg 1.3.201 → 1.3.204

package/agent-pane/frontend/src/components/StatusDot.tsx

@@ -1,8 +0,0 @@
-interface Props {
-  status: string;
-  size?: number;
-}
-
-export default function StatusDot({ status, size = 6 }: Props) {
-  return <span className={`status-dot ${status}`} style={size !== 6 ? { width: size, height: size } : undefined} />;
-}

package/agent-pane/frontend/src/components/Toast.test.tsx

@@ -1,79 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import Toast from './Toast.tsx';
-import { useStore } from '../store/store.ts';
-import { resetStore } from '../test/component-helpers.ts';
-
-describe('Toast', () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-    vi.useRealTimers();
-  });
-
-  it('returns null when no toasts', () => {
-    const { container } = render(<Toast />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders toast container with toast items', () => {
-    useStore.setState({ toasts: [{ id: 't1', type: 'info', message: 'Hello' }] });
-    render(<Toast />);
-    expect(screen.getByText('Hello')).toBeInTheDocument();
-    expect(screen.getByText('Hello').closest('.toast')).toHaveClass('toast-info');
-  });
-
-  it('auto-dismisses after 4000ms', () => {
-    useStore.setState({ toasts: [{ id: 't1', type: 'success', message: 'Auto dismiss' }] });
-    render(<Toast />);
-    expect(useStore.getState().toasts).toHaveLength(1);
-    vi.advanceTimersByTime(4000);
-    expect(useStore.getState().toasts).toHaveLength(0);
-  });
-
-  it('hover pauses auto-dismiss timer', () => {
-    useStore.setState({ toasts: [{ id: 't1', type: 'info', message: 'Hover test' }] });
-    render(<Toast />);
-    const toastEl = screen.getByText('Hover test').closest('.toast')!;
-    fireEvent.mouseEnter(toastEl);
-    vi.advanceTimersByTime(4000);
-    // Still present — timer was cleared
-    expect(useStore.getState().toasts).toHaveLength(1);
-  });
-
-  it('mouse leave restarts timer with 2000ms delay', () => {
-    useStore.setState({ toasts: [{ id: 't1', type: 'info', message: 'Mouse leave' }] });
-    render(<Toast />);
-    const toastEl = screen.getByText('Mouse leave').closest('.toast')!;
-    fireEvent.mouseEnter(toastEl);
-    fireEvent.mouseLeave(toastEl);
-    vi.advanceTimersByTime(1999);
-    expect(useStore.getState().toasts).toHaveLength(1);
-    vi.advanceTimersByTime(1);
-    expect(useStore.getState().toasts).toHaveLength(0);
-  });
-
-  it('undo button calls undoAction then removes toast', () => {
-    const undoFn = vi.fn();
-    useStore.setState({
-      toasts: [{ id: 't1', type: 'error', message: 'Deleted', undoAction: undoFn, undoLabel: 'Undo' }],
-    });
-    render(<Toast />);
-    const undoBtn = document.querySelector('.toast-undo') as HTMLElement;
-    fireEvent.click(undoBtn);
-    expect(undoFn).toHaveBeenCalled();
-    expect(useStore.getState().toasts).toHaveLength(0);
-  });
-
-  it('close button removes toast', () => {
-    useStore.setState({ toasts: [{ id: 't1', type: 'warn', message: 'Warning' }] });
-    render(<Toast />);
-    // The close button contains an X icon — find by the .toast-close class
-    const closeBtn = document.querySelector('.toast-close') as HTMLElement;
-    fireEvent.click(closeBtn);
-    expect(useStore.getState().toasts).toHaveLength(0);
-  });
-});

package/agent-pane/frontend/src/components/Toast.tsx

@@ -1,76 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useStore } from '../store/store.ts';
-import { X, CheckCircle, AlertCircle, Info, AlertTriangle, Undo2 } from 'lucide-react';
-import type { Toast as ToastType } from '../store/store.ts';
-
-const ICONS: Record<ToastType['type'], typeof CheckCircle> = {
-  success: CheckCircle,
-  error: AlertCircle,
-  info: Info,
-  warn: AlertTriangle,
-};
-
-const AUTO_DISMISS_MS = 4000;
-
-function ToastItem({ toast }: { toast: ToastType }) {
-  const removeToast = useStore((s) => s.removeToast);
-  const Icon = ICONS[toast.type];
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Manage auto-dismiss with hover-to-pause
-  useEffect(() => {
-    function startTimer() {
-      timerRef.current = setTimeout(() => removeToast(toast.id), AUTO_DISMISS_MS);
-    }
-    startTimer();
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [toast.id, removeToast]);
-
-  function handleMouseEnter() {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  }
-
-  function handleMouseLeave() {
-    timerRef.current = setTimeout(() => removeToast(toast.id), 2000);
-  }
-
-  return (
-    <div className={`toast toast-${toast.type}`} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      <Icon size={16} />
-      <span className="toast-message">{toast.message}</span>
-      {toast.undoAction && (
-        <button
-          className="toast-undo"
-          onClick={() => {
-            toast.undoAction?.();
-            removeToast(toast.id);
-          }}
-        >
-          <Undo2 size={12} /> {toast.undoLabel || 'Undo'}
-        </button>
-      )}
-      <button className="toast-close" onClick={() => removeToast(toast.id)}>
-        <X size={14} />
-      </button>
-    </div>
-  );
-}
-
-export default function Toast() {
-  const toasts = useStore((s) => s.toasts);
-
-  if (toasts.length === 0) return null;
-
-  return (
-    <div className="toast-container">
-      {toasts.map((toast) => (
-        <ToastItem key={toast.id} toast={toast} />
-      ))}
-    </div>
-  );
-}

package/agent-pane/frontend/src/components/TurnContent.test.tsx

@@ -1,298 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import TurnContent from './TurnContent.tsx';
-import { makeTurn, makeItem } from '../test/fixtures.ts';
-import type { Turn, Item } from '@agentpane/shared';
-
-/** Helper: build a turn with items. */
-function turnWithItems(items: Item[], overrides: Partial<Turn> = {}): Turn {
-  return makeTurn('t1', 's1', { items, ...overrides });
-}
-
-/** Non-tool items (reasoning, todo_list, error) are in otherItems — visible when intermediate expanded. */
-function turnWithNonToolItem(item: Item): Turn {
-  return turnWithItems([item], { status: 'running' });
-}
-
-/** Tool items (command_execution, file_change, mcp_tool_call, web_search) go after agent_message — always visible. */
-function turnWithToolItem(item: Item): Turn {
-  const agentMsg = makeItem('i-agent', 't1', 'agent_message');
-  agentMsg.data = { text: 'Done' };
-  return turnWithItems([agentMsg, item], { status: 'completed', agent_response: 'Done' });
-}
-
-describe('TurnContent', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('renders user_prompt at top', () => {
-    const turn = turnWithItems([], { user_prompt: 'Fix the bug' });
-    render(<TurnContent turn={turn} />);
-    expect(screen.getByText('Fix the bug')).toBeInTheDocument();
-  });
-
-  it('renders agent_message item with markdown', () => {
-    const item = makeItem('i1', 't1', 'agent_message');
-    item.data = { text: 'Hello **world**' };
-    const turn = turnWithItems([item], { agent_response: 'Hello **world**' });
-    render(<TurnContent turn={turn} />);
-    expect(screen.getByText('world').tagName).toBe('STRONG');
-  });
-
-  it('renders Claude icon (CL / ic-claude) when runtimeType is "claude"', () => {
-    const item = makeItem('i1', 't1', 'agent_message');
-    item.data = { text: 'Hello' };
-    const turn = turnWithItems([item], { agent_response: 'Hello' });
-    render(<TurnContent turn={turn} runtimeType="claude" />);
-    const icon = document.querySelector('.ic-claude');
-    expect(icon).toBeTruthy();
-    expect(icon?.textContent).toBe('CL');
-  });
-
-  it('renders reasoning item with "Reasoning" header', () => {
-    const item = makeItem('i1', 't1', 'reasoning');
-    item.data = { text: 'Thinking about it' };
-    render(<TurnContent turn={turnWithNonToolItem(item)} />);
-    expect(screen.getByText('Reasoning')).toBeInTheDocument();
-  });
-
-  it('renders command_execution item with command in pre', () => {
-    const item = makeItem('i1', 't1', 'command_execution');
-    item.data = { command: '/bin/zsh -lc "echo hello"', aggregated_output: 'hello', exit_code: 0 };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('Command')).toBeInTheDocument();
-    expect(screen.getByText('echo hello')).toBeInTheDocument();
-    expect(screen.getByText('exit 0')).toBeInTheDocument();
-  });
-
-  it('shows truncation toggle when output exceeds 10KB', () => {
-    const item = makeItem('i1', 't1', 'command_execution');
-    const longOutput = 'x'.repeat(11_000);
-    item.data = { command: 'ls', aggregated_output: longOutput, exit_code: 0 };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText(/Show full output/)).toBeInTheDocument();
-  });
-
-  it('renders file_change item with file list and A/D/M status', () => {
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = { changes: [{ path: 'src/new.ts', kind: 'add' }, { path: 'src/old.ts', kind: 'delete' }] };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('src/new.ts')).toBeInTheDocument();
-    expect(screen.getByText('src/old.ts')).toBeInTheDocument();
-    expect(screen.getByText('A')).toBeInTheDocument();
-    expect(screen.getByText('D')).toBeInTheDocument();
-  });
-
-  it('renders mcp_tool_call item with tool name and server', () => {
-    const item = makeItem('i1', 't1', 'mcp_tool_call');
-    item.data = { tool: 'search', server: 'my-server', arguments: { query: 'test' } };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText(/search/)).toBeInTheDocument();
-    expect(screen.getByText('my-server')).toBeInTheDocument();
-  });
-
-  it('renders web_search item with query', () => {
-    const item = makeItem('i1', 't1', 'web_search');
-    item.data = { query: 'how to test react' };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('Web Search')).toBeInTheDocument();
-    expect(screen.getByText('how to test react')).toBeInTheDocument();
-  });
-
-  it('renders todo_list item with completed and pending items', () => {
-    const item = makeItem('i1', 't1', 'todo_list');
-    item.data = { items: [{ text: 'Task 1', completed: true }, { text: 'Task 2', completed: false }] };
-    render(<TurnContent turn={turnWithNonToolItem(item)} />);
-    expect(screen.getByText(/Task 1/)).toBeInTheDocument();
-    expect(screen.getByText(/Task 2/)).toBeInTheDocument();
-  });
-
-  it('renders error item with error message', () => {
-    const item = makeItem('i1', 't1', 'error');
-    item.data = { message: 'Something broke' };
-    render(<TurnContent turn={turnWithNonToolItem(item)} />);
-    expect(screen.getByText('Error')).toBeInTheDocument();
-    expect(screen.getByText('Something broke')).toBeInTheDocument();
-  });
-
-  it('auto-expands intermediate steps when turn status is running', () => {
-    const cmd = makeItem('i1', 't1', 'command_execution');
-    cmd.data = { command: 'ls', aggregated_output: 'output', exit_code: 0 };
-    const agentMsg = makeItem('i2', 't1', 'agent_message');
-    agentMsg.data = { text: 'Done' };
-    // Command is intermediate (before final agent_message)
-    const turn = turnWithItems([cmd, agentMsg], { status: 'running', agent_response: 'Done' });
-    render(<TurnContent turn={turn} />);
-    // Auto-expanded — Level 2 nested tool-calls header (wrench icon) visible
-    expect(document.querySelectorAll('.lucide-wrench').length).toBe(1);
-  });
-
-  it('auto-collapses intermediate steps when turn status is completed', () => {
-    const cmd = makeItem('i1', 't1', 'command_execution');
-    cmd.data = { command: 'ls', aggregated_output: 'out', exit_code: 0 };
-    const agentMsg = makeItem('i2', 't1', 'agent_message');
-    agentMsg.data = { text: 'Done' };
-    const turn = turnWithItems([cmd, agentMsg], { status: 'completed', agent_response: 'Done' });
-    render(<TurnContent turn={turn} />);
-    // Collapsed — command header not visible
-    expect(screen.queryByText('Command')).not.toBeInTheDocument();
-  });
-
-  it('intermediate steps header click toggles expand', () => {
-    const cmd = makeItem('i1', 't1', 'command_execution');
-    cmd.data = { command: 'ls', aggregated_output: 'output', exit_code: 0 };
-    const agentMsg = makeItem('i2', 't1', 'agent_message');
-    agentMsg.data = { text: 'Done' };
-    const turn = turnWithItems([cmd, agentMsg], { status: 'completed', agent_response: 'Done' });
-    render(<TurnContent turn={turn} />);
-    // Initially collapsed — Level 2 nested header (wrench icon) not visible
-    expect(document.querySelectorAll('.lucide-wrench').length).toBe(0);
-    // Click Level 1 header to expand
-    const header = document.querySelector('.tool-calls-header')!;
-    fireEvent.click(header);
-    // Level 2 header now visible
-    expect(document.querySelectorAll('.lucide-wrench').length).toBe(1);
-  });
-
-  it('shows "Waiting to start…" for pending turn with no items', () => {
-    const turn = turnWithItems([], { status: 'pending' });
-    render(<TurnContent turn={turn} />);
-    expect(screen.getByText('Waiting to start…')).toBeInTheDocument();
-  });
-
-  it('shows "Agent is thinking…" for running turn with no items', () => {
-    const turn = turnWithItems([], { status: 'running' });
-    render(<TurnContent turn={turn} />);
-    expect(screen.getByText('Agent is thinking…')).toBeInTheDocument();
-  });
-
-  // --- command_execution edge cases ---
-
-  it('command_execution in_progress shows "running…" summary', () => {
-    const item = makeItem('i1', 't1', 'command_execution');
-    item.status = 'in_progress';
-    item.data = { command: 'ls', aggregated_output: 'partial', exit_code: null };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('running…')).toBeInTheDocument();
-  });
-
-  it('command_execution with no output renders no output pre', () => {
-    const item = makeItem('i1', 't1', 'command_execution');
-    item.data = { command: 'ls', exit_code: 0 };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('ls')).toBeInTheDocument();
-    expect(document.querySelector('.cmd-output')).not.toBeInTheDocument();
-  });
-
-  it('command_execution truncate toggle click expands and collapses', () => {
-    const item = makeItem('i1', 't1', 'command_execution');
-    item.data = { command: 'ls', aggregated_output: 'x'.repeat(11_000), exit_code: 0 };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    const toggle = screen.getByText(/Show full output/);
-    fireEvent.click(toggle);
-    expect(screen.getByText('Show less')).toBeInTheDocument();
-    fireEvent.click(screen.getByText('Show less'));
-    expect(screen.getByText(/Show full output/)).toBeInTheDocument();
-  });
-
-  // --- file_change edge cases ---
-
-  it('file_change with single file shows singular "file"', () => {
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = { changes: [{ path: 'src/one.ts', kind: 'modify' }] };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('1 file')).toBeInTheDocument();
-    expect(screen.getByText('M')).toBeInTheDocument();
-  });
-
-  it('file_change with modify kind shows M and fc-mod class', () => {
-    const item = makeItem('i1', 't1', 'file_change');
-    item.data = { changes: [{ path: 'src/mod.ts', kind: 'modify' }] };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    const statusSpan = document.querySelector('.fc-status')!;
-    expect(statusSpan).toHaveClass('fc-mod');
-    expect(statusSpan.textContent).toBe('M');
-  });
-
-  // --- mcp_tool_call edge cases ---
-
-  it('mcp_tool_call failed status shows "failed" summary', () => {
-    const item = makeItem('i1', 't1', 'mcp_tool_call');
-    item.status = 'failed';
-    item.data = { tool: 'broken', server: 'srv' };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('failed')).toBeInTheDocument();
-  });
-
-  it('mcp_tool_call with code arg renders in pre block', () => {
-    const item = makeItem('i1', 't1', 'mcp_tool_call');
-    item.data = { tool: 'exec', arguments: { code: 'console.log(1)' } };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('console.log(1)')).toBeInTheDocument();
-  });
-
-  it('mcp_tool_call with non-string arg renders JSON', () => {
-    const item = makeItem('i1', 't1', 'mcp_tool_call');
-    item.data = { tool: 'exec', arguments: { count: 42 } };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('42')).toBeInTheDocument();
-  });
-
-  it('mcp_tool_call with result text renders pre', () => {
-    const item = makeItem('i1', 't1', 'mcp_tool_call');
-    item.data = {
-      tool: 'query',
-      result: { content: [{ type: 'text', text: 'result here' }] },
-    };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('result here')).toBeInTheDocument();
-  });
-
-  it('mcp_tool_call with error renders error in red pre', () => {
-    const item = makeItem('i1', 't1', 'mcp_tool_call');
-    item.data = { tool: 'fail', error: 'MCP failed' };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText('MCP failed')).toBeInTheDocument();
-  });
-
-  it('mcp_tool_call with no args and no server renders minimal', () => {
-    const item = makeItem('i1', 't1', 'mcp_tool_call');
-    item.data = { tool: 'noop' };
-    render(<TurnContent turn={turnWithToolItem(item)} />);
-    expect(screen.getByText(/noop/)).toBeInTheDocument();
-    expect(document.querySelector('.mcp-args')).not.toBeInTheDocument();
-  });
-
-  // --- turn-level edge cases ---
-
-  it('renders turn.error in error block', () => {
-    const turn = turnWithItems([], { status: 'failed', error: 'Turn failed' });
-    render(<TurnContent turn={turn} />);
-    expect(screen.getByText('Turn failed')).toBeInTheDocument();
-  });
-
-  it('renders items after final agent_message', () => {
-    const agentMsg = makeItem('i1', 't1', 'agent_message');
-    agentMsg.data = { text: 'Final answer' };
-    const errorItem = makeItem('i2', 't1', 'error');
-    errorItem.data = { message: 'Post-error' };
-    const turn = turnWithItems([agentMsg, errorItem], { status: 'completed', agent_response: 'Final answer' });
-    render(<TurnContent turn={turn} />);
-    expect(screen.getByText('Final answer')).toBeInTheDocument();
-    expect(screen.getByText('Post-error')).toBeInTheDocument();
-  });
-
-  it('unknown item type renders null (default case)', () => {
-    const item = makeItem('i1', 't1', 'unknown_type' as never);
-    item.data = {};
-    const agentMsg = makeItem('i2', 't1', 'agent_message');
-    agentMsg.data = { text: 'Done' };
-    const turn = turnWithItems([item, agentMsg], { status: 'completed', agent_response: 'Done' });
-    render(<TurnContent turn={turn} />);
-    // Agent message renders, unknown item produces no content card
-    expect(screen.getByText('Done')).toBeInTheDocument();
-    // The unknown item is intermediate — no card for it
-    expect(document.querySelectorAll('.render-content').length).toBeLessThan(3);
-  });
-});