repoburg 1.3.202 → 1.3.209

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

@@ -1,226 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import CommandPalette from './CommandPalette.tsx';
-import { resetStore } from '../test/component-helpers.ts';
-import { makeSession, makeDetail } from '../test/fixtures.ts';
-
-describe('CommandPalette', () => {
-  beforeEach(() => {
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('returns null when show=false', () => {
-    const { container } = render(<CommandPalette />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders search input when show=true', () => {
-    resetStore({ showCommandPalette: true });
-    render(<CommandPalette />);
-    expect(screen.getByPlaceholderText('Type a command…')).toBeInTheDocument();
-  });
-
-  it('shows all available commands when query is empty', () => {
-    resetStore({ showCommandPalette: true });
-    render(<CommandPalette />);
-    // "New Session" is always available
-    expect(screen.getByText('New Session')).toBeInTheDocument();
-  });
-
-  it('filters commands by query', () => {
-    resetStore({ showCommandPalette: true });
-    render(<CommandPalette />);
-    const input = screen.getByPlaceholderText('Type a command…');
-    fireEvent.change(input, { target: { value: 'new' } });
-    expect(screen.getByText('New Session')).toBeInTheDocument();
-    expect(screen.queryByText('Close Tab')).not.toBeInTheDocument();
-  });
-
-  it('shows "No matching commands" when filter empty', () => {
-    resetStore({ showCommandPalette: true });
-    render(<CommandPalette />);
-    const input = screen.getByPlaceholderText('Type a command…');
-    fireEvent.change(input, { target: { value: 'xyzzy' } });
-    expect(screen.getByText('No matching commands')).toBeInTheDocument();
-  });
-
-  it('ArrowDown moves selection down', () => {
-    // Need active session so multiple commands are available
-    const session = makeSession('s1');
-    const detail = makeDetail('s1', []);
-    resetStore({ showCommandPalette: true, activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
-    render(<CommandPalette />);
-    const input = screen.getByPlaceholderText('Type a command…');
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    const items = document.querySelectorAll('.palette-item');
-    expect(items[1]).toHaveClass('selected');
-  });
-
-  it('ArrowUp moves selection up', () => {
-    const session = makeSession('s1');
-    const detail = makeDetail('s1', []);
-    resetStore({ showCommandPalette: true, activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
-    render(<CommandPalette />);
-    const input = screen.getByPlaceholderText('Type a command…');
-    // Move down twice, then up once
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.keyDown(input, { key: 'ArrowUp' });
-    const items = document.querySelectorAll('.palette-item');
-    expect(items[1]).toHaveClass('selected');
-  });
-
-  it('Enter executes selected command and closes palette', () => {
-    const setShowCommandPalette = vi.fn();
-    const setShowNewSessionDialog = vi.fn();
-    resetStore({ showCommandPalette: true, setShowCommandPalette, setShowNewSessionDialog });
-    render(<CommandPalette />);
-    const input = screen.getByPlaceholderText('Type a command…');
-    fireEvent.keyDown(input, { key: 'Enter' });
-    // First command is "New Session" — always available
-    expect(setShowNewSessionDialog).toHaveBeenCalledWith(true);
-    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
-  });
-
-  it('ESC closes palette', () => {
-    const setShowCommandPalette = vi.fn();
-    resetStore({ showCommandPalette: true, setShowCommandPalette });
-    render(<CommandPalette />);
-    fireEvent.keyDown(screen.getByPlaceholderText('Type a command…'), { key: 'Escape' });
-    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
-  });
-
-  it('click on command executes and closes', () => {
-    const setShowCommandPalette = vi.fn();
-    const setShowNewSessionDialog = vi.fn();
-    resetStore({ showCommandPalette: true, setShowCommandPalette, setShowNewSessionDialog });
-    render(<CommandPalette />);
-    fireEvent.click(screen.getByText('New Session'));
-    expect(setShowNewSessionDialog).toHaveBeenCalledWith(true);
-    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
-  });
-
-  // --- command actions ---
-
-  it('Delete Session action calls deleteSession', () => {
-    const setShowCommandPalette = vi.fn();
-    const deleteSession = vi.fn().mockResolvedValue(undefined);
-    const session = makeSession('s1');
-    resetStore({
-      showCommandPalette: true,
-      activeSessionId: 's1',
-      sessions: [session],
-      setShowCommandPalette,
-      deleteSession,
-    });
-    render(<CommandPalette />);
-    fireEvent.click(screen.getByText('Delete Session'));
-    expect(deleteSession).toHaveBeenCalledWith('s1');
-    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
-  });
-
-  it('Send Message action focuses .cmd-input element', () => {
-    // Stub a mock input element with focus
-    const mockFocus = vi.fn();
-    const mockInput = { focus: mockFocus } as unknown as HTMLInputElement;
-    const origQuery = document.querySelector;
-    document.querySelector = vi.fn((sel: string) =>
-      sel === '.cmd-input' ? mockInput : origQuery.call(document, sel),
-    ) as typeof document.querySelector;
-
-    const session = makeSession('s1');
-    const detail = makeDetail('s1', []);
-    resetStore({
-      showCommandPalette: true,
-      activeSessionId: 's1',
-      sessions: [session],
-      sessionDetails: { s1: detail },
-    });
-    render(<CommandPalette />);
-    fireEvent.click(screen.getByText('Send Message'));
-    expect(mockFocus).toHaveBeenCalled();
-    document.querySelector = origQuery;
-  });
-
-  it('Cancel Turn action calls cancelTurn when running', () => {
-    const setShowCommandPalette = vi.fn();
-    const cancelTurn = vi.fn().mockResolvedValue(undefined);
-    const session = makeSession('s1', { is_running: 1 });
-    const detail = makeDetail('s1', [], { is_running: 1 });
-    resetStore({
-      showCommandPalette: true,
-      activeSessionId: 's1',
-      sessions: [session],
-      sessionDetails: { s1: detail },
-      setShowCommandPalette,
-      cancelTurn,
-    });
-    render(<CommandPalette />);
-    fireEvent.click(screen.getByText('Cancel Turn'));
-    expect(cancelTurn).toHaveBeenCalled();
-  });
-
-  it('tab-switch commands call switchRightTab with correct tab', () => {
-    const switchRightTab = vi.fn();
-    const session = makeSession('s1');
-    const detail = makeDetail('s1', []);
-    resetStore({
-      showCommandPalette: true,
-      activeSessionId: 's1',
-      sessions: [session],
-      sessionDetails: { s1: detail },
-      switchRightTab,
-    });
-    render(<CommandPalette />);
-    fireEvent.click(screen.getByText('Switch to Turns Tab'));
-    expect(switchRightTab).toHaveBeenCalledWith('turns');
-    fireEvent.click(screen.getByText('Switch to Changes Tab'));
-    expect(switchRightTab).toHaveBeenCalledWith('changes');
-  });
-
-  it('Close Tab action calls closeTab', () => {
-    const setShowCommandPalette = vi.fn();
-    const closeTab = vi.fn().mockResolvedValue(undefined);
-    const session = makeSession('s1');
-    resetStore({
-      showCommandPalette: true,
-      activeSessionId: 's1',
-      sessions: [session],
-      setShowCommandPalette,
-      closeTab,
-    });
-    render(<CommandPalette />);
-    fireEvent.click(screen.getByText('Close Tab'));
-    expect(closeTab).toHaveBeenCalledWith('s1');
-  });
-
-  // --- UI interactions ---
-
-  it('overlay click closes palette', () => {
-    const setShowCommandPalette = vi.fn();
-    resetStore({ showCommandPalette: true, setShowCommandPalette });
-    render(<CommandPalette />);
-    fireEvent.click(document.querySelector('.palette-overlay')!);
-    expect(setShowCommandPalette).toHaveBeenCalledWith(false);
-  });
-
-  it('mouse enter on item sets selected class', () => {
-    const session = makeSession('s1');
-    const detail = makeDetail('s1', []);
-    resetStore({
-      showCommandPalette: true,
-      activeSessionId: 's1',
-      sessions: [session],
-      sessionDetails: { s1: detail },
-    });
-    render(<CommandPalette />);
-    const items = document.querySelectorAll('.palette-item');
-    // Hover over second item
-    fireEvent.mouseEnter(items[1]);
-    expect(items[1]).toHaveClass('selected');
-    expect(items[0]).not.toHaveClass('selected');
-  });
-});

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

@@ -1,194 +0,0 @@
-import { useState, useEffect, useRef, useMemo } from 'react';
-import { useStore } from '../store/store.ts';
-import { Plus, Trash2, Send, Square, List, FileCode, X, CornerDownLeft } from 'lucide-react';
-import type { RightTab } from '../types/index.ts';
-
-interface Command {
-  id: string;
-  label: string;
-  hint: string;
-  icon: typeof Plus;
-  action: () => void;
-  available: boolean;
-}
-
-export default function CommandPalette() {
-  const show = useStore((s) => s.showCommandPalette);
-  const setShow = useStore((s) => s.setShowCommandPalette);
-  const store = useStore();
-
-  const [query, setQuery] = useState('');
-  const [selectedIdx, setSelectedIdx] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Build commands
-  const commands: Command[] = useMemo(() => {
-    const detail = store.activeSessionId ? store.sessionDetails[store.activeSessionId] : null;
-    const isRunning = detail?.is_running === 1;
-
-    return [
-      {
-        id: 'new-session',
-        label: 'New Session',
-        hint: 'Create a new Codex session',
-        icon: Plus,
-        action: () => store.setShowNewSessionDialog(true),
-        available: true,
-      },
-      {
-        id: 'delete-session',
-        label: 'Delete Session',
-        hint: 'Delete the active session',
-        icon: Trash2,
-        action: () => {
-          if (store.activeSessionId) store.deleteSession(store.activeSessionId);
-        },
-        available: !!store.activeSessionId,
-      },
-      {
-        id: 'send-message',
-        label: 'Send Message',
-        hint: 'Focus the message input',
-        icon: Send,
-        action: () => {
-          const el = document.querySelector<HTMLInputElement>('.cmd-input');
-          el?.focus();
-        },
-        available: !!store.activeSessionId && !isRunning,
-      },
-      {
-        id: 'cancel-turn',
-        label: 'Cancel Turn',
-        hint: 'Cancel the running turn',
-        icon: Square,
-        action: () => store.cancelTurn(),
-        available: isRunning,
-      },
-      {
-        id: 'tab-turns',
-        label: 'Switch to Turns Tab',
-        hint: 'View conversation timeline',
-        icon: List,
-        action: () => store.switchRightTab('turns' as RightTab),
-        available: !!store.activeSessionId,
-      },
-      {
-        id: 'tab-changes',
-        label: 'Switch to Changes Tab',
-        hint: 'View file changes',
-        icon: FileCode,
-        action: () => store.switchRightTab('changes' as RightTab),
-        available: !!store.activeSessionId,
-      },
-      {
-        id: 'close-tab',
-        label: 'Close Tab',
-        hint: 'Close the active session tab',
-        icon: X,
-        action: () => {
-          if (store.activeSessionId) store.closeTab(store.activeSessionId);
-        },
-        available: !!store.activeSessionId,
-      },
-    ];
-  }, [store]);
-
-  // Filter commands
-  const filtered = useMemo(() => {
-    const q = query.toLowerCase().trim();
-    const available = commands.filter((c) => c.available);
-    if (!q) return available;
-    return available.filter((c) => c.label.toLowerCase().includes(q) || c.hint.toLowerCase().includes(q));
-  }, [commands, query]);
-
-  // Reset on open
-  useEffect(() => {
-    if (show) {
-      setQuery('');
-      setSelectedIdx(0);
-      setTimeout(() => inputRef.current?.focus(), 50);
-    }
-  }, [show]);
-
-  // Keyboard navigation
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setSelectedIdx((i) => Math.min(i + 1, filtered.length - 1));
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setSelectedIdx((i) => Math.max(i - 1, 0));
-    } else if (e.key === 'Enter') {
-      e.preventDefault();
-      const cmd = filtered[selectedIdx];
-      if (cmd) {
-        cmd.action();
-        setShow(false);
-      }
-    } else if (e.key === 'Escape') {
-      setShow(false);
-    }
-  }
-
-  if (!show) return null;
-
-  return (
-    <div className="palette-overlay" onClick={() => setShow(false)}>
-      <div className="palette" onClick={(e) => e.stopPropagation()}>
-        <div className="palette-search">
-          <input
-            ref={inputRef}
-            type="text"
-            placeholder="Type a command…"
-            value={query}
-            onChange={(e) => {
-              setQuery(e.target.value);
-              setSelectedIdx(0);
-            }}
-            onKeyDown={handleKeyDown}
-          />
-          <span className="palette-esc">ESC</span>
-        </div>
-        {filtered.length === 0 ? (
-          <div className="palette-empty">No matching commands</div>
-        ) : (
-          <div className="palette-list">
-            {filtered.map((cmd, i) => {
-              const Icon = cmd.icon;
-              return (
-                <div
-                  key={cmd.id}
-                  className={`palette-item ${i === selectedIdx ? 'selected' : ''}`}
-                  onClick={() => {
-                    cmd.action();
-                    setShow(false);
-                  }}
-                  onMouseEnter={() => setSelectedIdx(i)}
-                >
-                  <span className="palette-item-icon">
-                    <Icon size={16} />
-                  </span>
-                  <span className="palette-item-label">{cmd.label}</span>
-                  <span className="palette-item-hint">{cmd.hint}</span>
-                  {i === selectedIdx && <CornerDownLeft size={12} className="palette-item-enter" />}
-                </div>
-              );
-            })}
-          </div>
-        )}
-        <div className="palette-footer">
-          <span className="palette-footer-hint">
-            <span className="kbd">↑</span>
-            <span className="kbd">↓</span> Navigate
-          </span>
-          <span className="palette-footer-hint">
-            <span className="kbd">↵</span> Select
-          </span>
-          <span className="palette-footer-hint">
-            <span className="kbd">Esc</span> Close
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,196 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, cleanup, act } from '@testing-library/react';
-import CommentableText from './CommentableText.tsx';
-import { resetStore } from '../test/component-helpers.ts';
-import { useStore } from '../store/store.ts';
-
-const CONTENT = 'Hello world this is a line of text';
-
-/**
- * Select a character range within the rendered markdown container's text node.
- * `backward` emulates a drag selection from end -> start by collapsing the
- * caret to the end and extending it back to the start (anchor after focus).
- */
-function selectChars(startChar: number, endChar: number, backward: boolean): void {
-  const p = screen.getByText(CONTENT);
-  const textNode = p.firstChild as Text;
-  const sel = window.getSelection()!;
-  sel.removeAllRanges();
-  if (backward) {
-    // anchor at the end, then extend the focus back to the start
-    sel.collapse(textNode, endChar);
-    sel.extend(textNode, startChar);
-  } else {
-    sel.collapse(textNode, startChar);
-    sel.extend(textNode, endChar);
-  }
-}
-
-/** Dispatch a native `mouseup` whose target is OUTSIDE the markdown container
- *  (on document.body), eminating a release in the surrounding padding/gutter. */
-function dispatchMouseUpOutside(): void {
-  const evt = new MouseEvent('mouseup', { bubbles: true });
-  document.body.dispatchEvent(evt);
-}
-
-/** Open the discuss popover via a backward selection + Discuss click. Returns the textarea. */
-function openDiscuss(): HTMLTextAreaElement {
-  selectChars(0, 5, true);
-  act(() => {
-    dispatchMouseUpOutside();
-  });
-  fireEvent.click(screen.getByText('Discuss'));
-  return screen.getByPlaceholderText('Ask about this text…') as HTMLTextAreaElement;
-}
-
-describe('CommentableText — selection quote button', () => {
-  beforeEach(() => {
-    resetStore();
-    // jsdom has no layout engine, so Range lacks getBoundingClientRect/getClientRects.
-    // Polyfill with zero rects so the production positioning code can run.
-    const zeroRect = {
-      x: 0, y: 0, top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0,
-      toJSON: () => ({}),
-    };
-    (Range.prototype as unknown as { getBoundingClientRect: unknown }).getBoundingClientRect =
-      () => zeroRect;
-    (Range.prototype as unknown as { getClientRects: unknown }).getClientRects = () => [];
-    // jsdom has no layout, so offsetWidth/offsetHeight are 0. Mock the popover
-    // dimensions so the viewport-clamp logic in useLayoutEffect can be exercised.
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, get: () => 320 });
-    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { configurable: true, get: () => 140 });
-  });
-  afterEach(() => {
-    cleanup();
-    window.getSelection()?.removeAllRanges();
-  });
-
-  it('shows the Quote button when a forward selection is released outside the container', () => {
-    render(
-      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
-    );
-
-    selectChars(0, 5, false);
-    act(() => {
-      dispatchMouseUpOutside();
-    });
-
-    // Before the fix, the container-only onMouseUp never fired for a release
-    // outside the container, so the button did not appear.
-    expect(screen.getByText('Quote')).toBeInTheDocument();
-    expect(screen.getByText('Discuss')).toBeInTheDocument();
-  });
-
-  it('shows the Quote button for a backward selection dragged to the line start (the reported bug)', () => {
-    render(
-      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
-    );
-
-    // Drag from the very end back to the very start (line start).
-    selectChars(0, CONTENT.length, true);
-    act(() => {
-      dispatchMouseUpOutside();
-    });
-
-    expect(screen.getByText('Quote')).toBeInTheDocument();
-    expect(screen.getByText('Discuss')).toBeInTheDocument();
-  });
-
-  it('populates the store quotedText when Quote is clicked after a backward selection', () => {
-    render(
-      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
-    );
-
-    selectChars(0, 5, true);
-    act(() => {
-      dispatchMouseUpOutside();
-    });
-
-    fireEvent.click(screen.getByText('Quote'));
-
-    const quoted = useStore.getState().quotedText;
-    expect(quoted).toBeTruthy();
-    expect(quoted).toContain('QUOTE');
-    expect(quoted).toContain('Hello');
-  });
-
-  it('keeps the discuss popover on-screen for a backward selection near the left edge', () => {
-    render(
-      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
-    );
-
-    // Backward selection near the start anchors the button at the left edge.
-    selectChars(0, 5, true);
-    act(() => {
-      dispatchMouseUpOutside();
-    });
-
-    fireEvent.click(screen.getByText('Discuss'));
-
-    const popover = document.querySelector('.thread-create-popover') as HTMLElement;
-    expect(popover).toBeTruthy();
-    const left = parseFloat(popover.style.left);
-    const top = parseFloat(popover.style.top);
-    // Popover opens to the left via translateX(-100%): visible left edge = left - 320.
-    // It must stay on-screen: left edge >= 8 → left >= 328.
-    expect(left).toBeGreaterThanOrEqual(328);
-    // Right edge (= left) must not overflow the viewport right.
-    expect(left).toBeLessThanOrEqual(window.innerWidth - 8);
-    // Top edge must be within the viewport.
-    expect(top).toBeGreaterThanOrEqual(8);
-    expect(top + 140).toBeLessThanOrEqual(window.innerHeight - 8);
-  });
-
-  it('auto-dismisses the popover on outside click when empty', () => {
-    render(
-      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
-    );
-    openDiscuss();
-    expect(screen.queryByPlaceholderText('Ask about this text…')).toBeInTheDocument();
-    fireEvent.mouseDown(document.body);
-    expect(screen.queryByPlaceholderText('Ask about this text…')).not.toBeInTheDocument();
-  });
-
-  it('does not auto-dismiss the popover on outside click when it has typed text', () => {
-    render(
-      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
-    );
-    const ta = openDiscuss();
-    fireEvent.change(ta, { target: { value: 'a note' } });
-
-    // Outside click must NOT close a popover that has typed text.
-    fireEvent.mouseDown(document.body);
-    const still = screen.getByPlaceholderText('Ask about this text…') as HTMLTextAreaElement;
-    expect(still).toBeInTheDocument();
-    expect(still.value).toBe('a note');
-
-    // The X button closes explicitly regardless of content.
-    fireEvent.click(document.querySelector('.thread-create-close') as HTMLElement);
-    expect(screen.queryByPlaceholderText('Ask about this text…')).not.toBeInTheDocument();
-  });
-
-  it('closes the popover on a single Esc when empty', () => {
-    render(
-      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
-    );
-    const ta = openDiscuss();
-    fireEvent.keyDown(ta, { key: 'Escape' });
-    expect(screen.queryByPlaceholderText('Ask about this text…')).not.toBeInTheDocument();
-  });
-
-  it('requires double Esc to close the popover when it has typed text', () => {
-    render(
-      <CommentableText itemId="i1" turnId="t1" sessionId="s1" content={CONTENT} threads={[]} />,
-    );
-    const ta = openDiscuss();
-    fireEvent.change(ta, { target: { value: 'a note' } });
-
-    // First Esc: protected — must not close.
-    fireEvent.keyDown(ta, { key: 'Escape' });
-    expect(screen.queryByPlaceholderText('Ask about this text…')).toBeInTheDocument();
-
-    // Second Esc within the window: closes.
-    fireEvent.keyDown(ta, { key: 'Escape' });
-    expect(screen.queryByPlaceholderText('Ask about this text…')).not.toBeInTheDocument();
-  });
-});