repoburg 1.3.202 → 1.3.204

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

@@ -1,143 +0,0 @@
-import { describe, it, expect, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import AskUserItem, { resetAskUserStore, buildSelectionPrompt } from './AskUserItem.tsx';
-import { useStore } from '../store/store.ts';
-import { resetStore } from '../test/component-helpers.ts';
-import { makeTurn, makeItem, makeDetail } from '../test/fixtures.ts';
-import type { Item, Turn } from '@agentpane/shared';
-
-const GROUPS = [
-  { question: 'Which database?', selections: ['Postgres', 'SQLite'] },
-  { question: 'Proceed?', selections: ['yes', 'no'] },
-];
-
-function askItem(id: string, turnId: string, data: Record<string, unknown> | null): Item {
-  const item = makeItem(id, turnId, 'ask_user');
-  item.data = data;
-  return item;
-}
-
-function setup(turn: Turn, isRunning = 0) {
-  resetStore({
-    activeSessionId: turn.session_id,
-    sessionDetails: { [turn.session_id]: { ...makeDetail(turn.session_id, [turn]), is_running: isRunning } },
-  });
-  render(<AskUserItem item={turn.items[turn.items.length - 1]} turn={turn} />);
-}
-
-function makeAskTurn(items: Item[]): Turn {
-  return makeTurn('t1', 's1', { items, status: 'completed' });
-}
-
-describe('AskUserItem', () => {
-  afterEach(() => {
-    cleanup();
-    resetAskUserStore();
-    resetStore();
-  });
-
-  it('renders all groups with their options', () => {
-    const turn = makeAskTurn([askItem('i1', 't1', { question: '', groups: GROUPS })]);
-    setup(turn);
-    expect(screen.getByText('Which database?')).toBeInTheDocument();
-    expect(screen.getByText('Proceed?')).toBeInTheDocument();
-    expect(screen.getByText('Postgres')).toBeInTheDocument();
-    expect(screen.getByText('SQLite')).toBeInTheDocument();
-    expect(screen.getByText('yes')).toBeInTheDocument();
-    expect(screen.getByText('no')).toBeInTheDocument();
-  });
-
-  it('toggles one answer per group; re-click deselects', () => {
-    const turn = makeAskTurn([askItem('i1', 't1', { question: '', groups: GROUPS })]);
-    setup(turn);
-
-    const send = screen.getByRole('button', { name: /send/i });
-    expect(send).toBeDisabled();
-
-    fireEvent.click(screen.getByText('Postgres'));
-    expect(send).toBeEnabled();
-
-    // Selecting another option in the same group replaces the answer.
-    fireEvent.click(screen.getByText('SQLite'));
-    expect(screen.getByText('SQLite').className).toContain('selected');
-    expect(screen.getByText('Postgres').className).not.toContain('selected');
-
-    // Re-click deselects.
-    fireEvent.click(screen.getByText('SQLite'));
-    expect(screen.getByText('SQLite').className).not.toContain('selected');
-    expect(send).toBeDisabled();
-  });
-
-  it('submits the combined prompt for all selected groups in ONE send', () => {
-    const turn = makeAskTurn([askItem('i1', 't1', { question: '', groups: GROUPS })]);
-    setup(turn);
-    const submitPrompt = vi.fn();
-    useStore.setState({ submitPrompt });
-
-    fireEvent.click(screen.getByText('Postgres'));
-    fireEvent.click(screen.getByText('yes'));
-    fireEvent.click(screen.getByRole('button', { name: /send/i }));
-
-    expect(submitPrompt).toHaveBeenCalledTimes(1);
-    expect(submitPrompt).toHaveBeenCalledWith('> Which database?\nPostgres\n\n> Proceed?\nyes');
-    expect(screen.getByText('Answer sent')).toBeInTheDocument();
-  });
-
-  it('submits answers from MULTIPLE ask_user items in one turn together, sorted by item order', () => {
-    const turn = makeAskTurn([
-      askItem('i1', 't1', { question: '', groups: [GROUPS[0]] }),
-      askItem('i2', 't1', { question: '', groups: [GROUPS[1]] }),
-    ]);
-    resetStore({
-      activeSessionId: 's1',
-      sessionDetails: { s1: makeDetail('s1', [turn]) },
-    });
-    const submitPrompt = vi.fn();
-    useStore.setState({ submitPrompt });
-
-    const { rerender } = render(<AskUserItem item={turn.items[0]} turn={turn} />);
-    fireEvent.click(screen.getByText('Postgres'));
-
-    // Select on the SECOND card; its Send must carry the FIRST card's answer too.
-    rerender(<AskUserItem item={turn.items[1]} turn={turn} />);
-    fireEvent.click(screen.getByText('yes'));
-    fireEvent.click(screen.getByRole('button', { name: /send/i }));
-
-    expect(submitPrompt).toHaveBeenCalledTimes(1);
-    expect(submitPrompt).toHaveBeenCalledWith('> Which database?\nPostgres\n\n> Proceed?\nyes');
-  });
-
-  it('disables buttons while the session is running', () => {
-    const turn = makeAskTurn([askItem('i1', 't1', { question: '', groups: GROUPS })]);
-    setup(turn, 1);
-    expect(screen.getByText('Postgres')).toBeDisabled();
-    // No send affordance while disabled.
-    expect(screen.queryByRole('button', { name: /send/i })).not.toBeInTheDocument();
-  });
-
-  it('renders a plain-text fallback for malformed selections payloads', () => {
-    const turn = makeAskTurn([askItem('i1', 't1', { question: 'Plain question?', groups: [] })]);
-    setup(turn);
-    expect(screen.getByText('Plain question?')).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /send/i })).not.toBeInTheDocument();
-  });
-
-  it('renders the waiting note when there is no payload', () => {
-    const turn = makeAskTurn([askItem('i1', 't1', null)]);
-    setup(turn);
-    expect(screen.getByText(/Waiting for user response/i)).toBeInTheDocument();
-  });
-});
-
-describe('buildSelectionPrompt', () => {
-  it('sorts by item index then group index and joins with \\n\\n', () => {
-    const prompt = buildSelectionPrompt([
-      { itemIndex: 1, groupIndex: 0, question: 'Second?', answer: 'b' },
-      { itemIndex: 0, groupIndex: 1, question: 'First group 2?', answer: 'a2' },
-      { itemIndex: 0, groupIndex: 0, question: 'First group 1?', answer: 'a1' },
-    ]);
-    expect(prompt).toBe(
-      '> First group 1?\na1\n\n> First group 2?\na2\n\n> Second?\nb',
-    );
-  });
-});

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

@@ -1,207 +0,0 @@
-/**
- * AskUserItem — renders the runtime's ask_user action as clickable
- * selection buttons (platform parity: SelectionButtons in the webcoder
- * platform frontend).
- *
- * Behavior:
- *  - All groups render; selection is a TOGGLE (one answer per group).
- *  - Selection state is shared PER TURN (module store keyed by turn id) —
- *    if a turn ever holds multiple ask_user items, ONE Send submits ALL
- *    selected answers together as a single user_prompt.
- *  - Combined prompt = `> ${question}\n${answer}` per selected group,
- *    sorted by item order then group index, joined with `\n\n`.
- *  - Disabled once the turn is submitted, the session is running, or a
- *    newer turn exists.
- */
-import { useCallback, useMemo, useSyncExternalStore } from 'react';
-import { CircleHelp, Send } from 'lucide-react';
-import type { AskUserItemData, Item, Turn } from '../types/index.ts';
-import { useStore } from '../store/store.ts';
-
-/** One selected answer with its ordering key. */
-interface SelectionEntry {
-  itemIndex: number;
-  groupIndex: number;
-  question: string;
-  answer: string;
-}
-
-// --- Per-turn shared selection store (module-scope, tiny pub/sub) ---
-const turnSelections = new Map<string, Map<string, SelectionEntry>>();
-const submittedTurns = new Set<string>();
-const listeners = new Set<() => void>();
-const EMPTY = new Map<string, SelectionEntry>();
-
-function notify(): void {
-  listeners.forEach((l) => l());
-}
-
-export function selectionKey(itemIndex: number, groupIndex: number): string {
-  return `${itemIndex}:${groupIndex}`;
-}
-
-export function toggleSelection(
-  turnId: string,
-  itemIndex: number,
-  groupIndex: number,
-  question: string,
-  answer: string,
-): void {
-  const key = selectionKey(itemIndex, groupIndex);
-  const current = turnSelections.get(turnId) ?? new Map<string, SelectionEntry>();
-  const next = new Map(current);
-  if (next.get(key)?.answer === answer) {
-    next.delete(key); // re-click deselects
-  } else {
-    next.set(key, { itemIndex, groupIndex, question, answer });
-  }
-  turnSelections.set(turnId, next);
-  notify();
-}
-
-export function clearTurnSelections(turnId: string): void {
-  turnSelections.delete(turnId);
-  notify();
-}
-
-export function markSubmitted(turnId: string): void {
-  submittedTurns.add(turnId);
-  clearTurnSelections(turnId);
-}
-
-/** Reset state (used by tests). */
-export function resetAskUserStore(): void {
-  turnSelections.clear();
-  submittedTurns.clear();
-  notify();
-}
-
-function useTurnSelections(turnId: string): Map<string, SelectionEntry> {
-  const subscribe = useCallback((cb: () => void) => {
-    listeners.add(cb);
-    return () => {
-      listeners.delete(cb);
-    };
-  }, []);
-  return useSyncExternalStore(
-    subscribe,
-    () => turnSelections.get(turnId) ?? EMPTY,
-    () => EMPTY,
-  );
-}
-
-/** Build the combined prompt (platform parity: sorted, `> q\nanswer`, `\n\n` join). */
-export function buildSelectionPrompt(entries: SelectionEntry[]): string {
-  return [...entries]
-    .sort((a, b) => a.itemIndex - b.itemIndex || a.groupIndex - b.groupIndex)
-    .map((e) => `> ${e.question}\n${e.answer}`)
-    .join('\n\n');
-}
-
-interface Props {
-  item: Item;
-  turn: Turn;
-}
-
-export default function AskUserItem({ item, turn }: Props) {
-  const data = (item.data ?? {}) as Partial<AskUserItemData>;
-  const groups = useMemo(
-    () =>
-      Array.isArray(data.groups)
-        ? data.groups.filter(
-            (g): g is { question: string; selections: string[] } =>
-              !!g && Array.isArray(g.selections) && g.selections.length > 0,
-          )
-        : [],
-    [data.groups],
-  );
-
-  const selections = useTurnSelections(turn.id);
-  const detail = useStore((s) =>
-    turn.session_id ? s.sessionDetails[turn.session_id] : null,
-  );
-  const activeSessionId = useStore((s) => s.activeSessionId);
-
-  const itemIndex = turn.items.findIndex((i) => i.id === item.id);
-  const isLastTurn = detail
-    ? detail.turns[detail.turns.length - 1]?.id === turn.id
-    : true;
-  const submitted = submittedTurns.has(turn.id);
-  const disabled =
-    submitted ||
-    detail?.is_running === 1 ||
-    !isLastTurn ||
-    turn.session_id !== activeSessionId;
-
-  const handleToggle = (groupIndex: number, question: string, answer: string) => {
-    if (disabled) return;
-    toggleSelection(turn.id, itemIndex, groupIndex, question, answer);
-  };
-
-  const handleSend = () => {
-    const entries = [...selections.values()];
-    if (entries.length === 0) return;
-    const prompt = buildSelectionPrompt(entries);
-    markSubmitted(turn.id);
-    void useStore.getState().submitPrompt(prompt);
-  };
-
-  return (
-    <div className="render-content ask-user-card">
-      <div className="turn-header">
-        <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-          <CircleHelp size={14} />
-        </span>
-        <span className="turn-header-title">Question</span>
-        {submitted && <span className="turn-header-meta">answered</span>}
-      </div>
-
-      {groups.length > 0 ? (
-        <div className="ask-user-groups">
-          {groups.map((group, gi) => (
-            <div key={gi} className="ask-user-group">
-              {group.question && <div className="ask-user-question">{group.question}</div>}
-              <div className="ask-user-options">
-                {group.selections.map((option) => {
-                  const selected =
-                    selections.get(selectionKey(itemIndex, gi))?.answer === option;
-                  return (
-                    <button
-                      key={option}
-                      type="button"
-                      className={`ask-user-option ${selected ? 'selected' : ''}`}
-                      disabled={disabled}
-                      onClick={() => handleToggle(gi, group.question, option)}
-                    >
-                      {option}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          ))}
-          {disabled ? (
-            submitted && <div className="ask-user-submitted">Answer sent</div>
-          ) : (
-            <button
-              type="button"
-              className="ask-user-send"
-              disabled={selections.size === 0}
-              onClick={handleSend}
-            >
-              <Send size={12} />
-              Send
-            </button>
-          )}
-        </div>
-      ) : data.question ? (
-        // Malformed payload fallback — plain-text question.
-        <p className="user-message">{data.question}</p>
-      ) : (
-        <p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>
-          Waiting for user response
-        </p>
-      )}
-    </div>
-  );
-}

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

@@ -1,49 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import CollapsibleToolCalls, { isToolItem } from './CollapsibleToolCalls.tsx';
-import { makeItem, makeTurn } from '../test/fixtures.ts';
-
-describe('isToolItem', () => {
-  it('returns true for tool types', () => {
-    expect(isToolItem(makeItem('i1', 't1', 'command_execution'))).toBe(true);
-    expect(isToolItem(makeItem('i2', 't1', 'file_change'))).toBe(true);
-    expect(isToolItem(makeItem('i3', 't1', 'mcp_tool_call'))).toBe(true);
-    expect(isToolItem(makeItem('i4', 't1', 'web_search'))).toBe(true);
-  });
-
-  it('returns false for non-tool types', () => {
-    expect(isToolItem(makeItem('i1', 't1', 'agent_message'))).toBe(false);
-    expect(isToolItem(makeItem('i2', 't1', 'reasoning'))).toBe(false);
-    expect(isToolItem(makeItem('i3', 't1', 'todo_list'))).toBe(false);
-    expect(isToolItem(makeItem('i4', 't1', 'error'))).toBe(false);
-  });
-});
-
-describe('CollapsibleToolCalls', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('returns null when items is empty', () => {
-    const { container } = render(<CollapsibleToolCalls items={[]} turn={makeTurn('t1', 's1')} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('shows collapsed state by default (no item content visible)', () => {
-    const item = makeItem('i1', 't1', 'command_execution');
-    item.data = { command: 'ls', aggregated_output: '' };
-    render(<CollapsibleToolCalls items={[item]} turn={makeTurn('t1', 's1')} />);
-    expect(screen.getByText(/1 tool call/)).toBeInTheDocument();
-    // Item card content should NOT be rendered when collapsed
-    expect(screen.queryByText('Command')).not.toBeInTheDocument();
-  });
-
-  it('expands on header click and shows item cards', () => {
-    const item = makeItem('i1', 't1', 'command_execution');
-    item.data = { command: 'echo hello', aggregated_output: 'hello' };
-    render(<CollapsibleToolCalls items={[item]} turn={makeTurn('t1', 's1')} />);
-    const header = document.querySelector('.tool-calls-header')!;
-    fireEvent.click(header);
-    expect(screen.getByText('Command')).toBeInTheDocument();
-  });
-});

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

@@ -1,56 +0,0 @@
-import { useState } from 'react';
-import { Wrench, ChevronRight } from 'lucide-react';
-import { MemoItemCard } from './TurnContent.tsx';
-import type { Item, Turn, DiscussionThread } from '../types/index.ts';
-
-const TOOL_TYPES = new Set(['command_execution', 'file_change', 'mcp_tool_call', 'web_search']);
-
-export function isToolItem(item: Item): boolean {
-  return TOOL_TYPES.has(item.type);
-}
-
-interface Props {
-  items: Item[];
-  runtimeType?: string;
-  turn: Turn;
-  threads?: DiscussionThread[];
-}
-
-export default function CollapsibleToolCalls({ items, runtimeType, turn, threads = [] }: Props) {
-  const [expanded, setExpanded] = useState(false);
-
-  if (items.length === 0) return null;
-
-  const count = items.length;
-
-  return (
-    <div className="tool-calls">
-      <div className="tool-calls-header" onClick={() => setExpanded((e) => !e)}>
-        <span className="tool-calls-icon">
-          <Wrench size={12} />
-        </span>
-        <span className="tool-calls-summary">
-          {count} tool call{count > 1 ? 's' : ''}
-        </span>
-        <ChevronRight
-          size={14}
-          className="tool-calls-chevron"
-          style={{ transform: expanded ? 'rotate(90deg)' : 'none' }}
-        />
-      </div>
-      {expanded && (
-        <div className="tool-calls-body">
-          {items.map((item) => (
-            <MemoItemCard
-              key={item.id}
-              item={item}
-              runtimeType={runtimeType}
-              turn={turn}
-              threads={threads}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,133 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-
-// Mock useProvider to avoid async fetch in tests
-vi.mock('../hooks/useProvider.ts', () => ({
-  useProvider: () => ({
-    provider: { id: 'codex', label: 'Codex', available: true, capabilities: {
-      dynamicModels: true, skills: true, plugins: true, mcpServers: true,
-      imageAttachments: true, sandbox: true, webSearch: true, networkAccess: true, fileReferences: true,
-    } },
-    capabilities: {
-      dynamicModels: true, skills: true, plugins: true, mcpServers: true,
-      imageAttachments: true, sandbox: true, webSearch: true, networkAccess: true, fileReferences: true,
-    },
-    loading: false,
-  }),
-}));
-
-import CommandInputBar from './CommandInputBar.tsx';
-import { useStore } from '../store/store.ts';
-import { resetStore } from '../test/component-helpers.ts';
-import { makeSession, makeDetail } from '../test/fixtures.ts';
-
-describe('CommandInputBar', () => {
-  beforeEach(() => {
-    vi.stubGlobal('requestAnimationFrame', (cb: () => void) => cb());
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-    vi.unstubAllGlobals();
-  });
-
-  it('shows "Select or create a session…" placeholder when no active session', () => {
-    render(<CommandInputBar />);
-    expect(screen.getByPlaceholderText('Select or create a session…')).toBeInTheDocument();
-  });
-
-  it('shows "Agent is running…" placeholder when is_running=1', () => {
-    const detail = makeDetail('s1', [], { is_running: 1 });
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, sessions: [makeSession('s1')] });
-    render(<CommandInputBar />);
-    expect(screen.getByPlaceholderText('Agent is running…')).toBeInTheDocument();
-  });
-
-  it('shows "Type a message…" placeholder when idle', () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, sessions: [makeSession('s1')] });
-    render(<CommandInputBar />);
-    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
-    expect(textarea.placeholder).toMatch(/Type a message/);
-  });
-
-  it('disables textarea when no active session', () => {
-    render(<CommandInputBar />);
-    expect(screen.getByRole('textbox')).toBeDisabled();
-  });
-
-  it('sends prompt on Cmd+Enter and clears input', async () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, sessions: [makeSession('s1')] });
-    const submitPrompt = vi.fn().mockResolvedValue(undefined);
-    useStore.setState({ submitPrompt });
-
-    render(<CommandInputBar />);
-    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
-    fireEvent.change(textarea, { target: { value: 'hello world' } });
-    fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true });
-
-    expect(submitPrompt).toHaveBeenCalledWith('hello world', undefined);
-  });
-
-  it('send button calls submitPrompt with trimmed value', async () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, sessions: [makeSession('s1')] });
-    const submitPrompt = vi.fn().mockResolvedValue(undefined);
-    useStore.setState({ submitPrompt });
-
-    render(<CommandInputBar />);
-    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
-    fireEvent.change(textarea, { target: { value: '  test  ' } });
-    const sendBtn = document.querySelector('.cmd-send-btn') as HTMLElement;
-    fireEvent.click(sendBtn);
-
-    expect(submitPrompt).toHaveBeenCalledWith('test', undefined);
-  });
-
-  it('send button is disabled when input is empty', () => {
-    const detail = makeDetail('s1', []);
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, sessions: [makeSession('s1')] });
-    render(<CommandInputBar />);
-    const sendBtn = document.querySelector('.cmd-send-btn') as HTMLButtonElement;
-    expect(sendBtn.disabled).toBe(true);
-  });
-
-  it('stop button is visible when running and calls cancelTurn', async () => {
-    const detail = makeDetail('s1', [], { is_running: 1 });
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, sessions: [makeSession('s1')] });
-    const cancelTurn = vi.fn().mockResolvedValue(undefined);
-    useStore.setState({ cancelTurn });
-
-    render(<CommandInputBar />);
-    const stopBtn = document.querySelector('.cmd-stop-btn') as HTMLElement;
-    expect(stopBtn).toBeInTheDocument();
-    fireEvent.click(stopBtn);
-    expect(cancelTurn).toHaveBeenCalled();
-  });
-
-  it('ESC key calls cancelTurn when running', () => {
-    const detail = makeDetail('s1', [], { is_running: 1 });
-    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, sessions: [makeSession('s1')] });
-    const cancelTurn = vi.fn().mockResolvedValue(undefined);
-    useStore.setState({ cancelTurn });
-
-    render(<CommandInputBar />);
-    fireEvent.keyDown(window, { key: 'Escape' });
-    expect(cancelTurn).toHaveBeenCalled();
-  });
-
-  it('restoredPrompt sets textarea value and clears store', () => {
-    const detail = makeDetail('s1', []);
-    resetStore({
-      activeSessionId: 's1',
-      sessionDetails: { s1: detail },
-      sessions: [makeSession('s1')],
-      restoredPrompt: 'restored text',
-    });
-    render(<CommandInputBar />);
-    const textarea = screen.getByRole('textbox') as HTMLTextAreaElement;
-    expect(textarea.value).toBe('restored text');
-    expect(useStore.getState().restoredPrompt).toBeNull();
-  });
-});