repoburg 1.3.202 → 1.3.204

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

@@ -1,379 +0,0 @@
-import { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-import { MessageSquarePlus, X, Send, Quote } from 'lucide-react';
-import type { DiscussionThread } from '../types/index.ts';
-import { useStore } from '../store/store.ts';
-
-marked.setOptions({ breaks: true, gfm: true });
-
-function renderMarkdown(content: string): string {
-  const raw = marked.parse(content) as string;
-  return DOMPurify.sanitize(raw);
-}
-
-/** Find the text node and offset within it that corresponds to a character offset in the container's textContent. */
-function findTextNode(
-  container: HTMLElement,
-  charOffset: number,
-): { node: Text; offset: number } | null {
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
-  let count = 0;
-  while (walker.nextNode()) {
-    const node = walker.currentNode as Text;
-    const len = node.textContent?.length ?? 0;
-    if (count + len > charOffset) {
-      return { node, offset: charOffset - count };
-    }
-    count += len;
-  }
-  return null;
-}
-
-/** Highlight all thread anchors in the container by wrapping selected text in <mark> elements. */
-function applyHighlights(container: HTMLElement, threads: DiscussionThread[]): void {
-  // Remove existing marks (unwrap them back to plain text)
-  container.querySelectorAll('mark[data-thread-id]').forEach((mark) => {
-    const parent = mark.parentNode;
-    if (!parent) return;
-    const text = document.createTextNode(mark.textContent || '');
-    parent.replaceChild(text, mark);
-    parent.normalize();
-  });
-
-  for (const thread of threads) {
-    const start = findTextNode(container, thread.start_offset);
-    const end = findTextNode(container, thread.end_offset);
-    if (!start || !end) continue;
-
-    const range = document.createRange();
-    range.setStart(start.node, start.offset);
-    range.setEnd(end.node, end.offset);
-
-    const mark = document.createElement('mark');
-    mark.setAttribute('data-thread-id', thread.id);
-    if (thread.status === 'resolved') mark.classList.add('thread-mark-resolved');
-
-    try {
-      range.surroundContents(mark);
-    } catch {
-      // Range spans element boundaries — extract and wrap
-      const fragment = range.extractContents();
-      mark.appendChild(fragment);
-      range.insertNode(mark);
-    }
-  }
-}
-
-/** Compute character offsets of the current selection within the container's textContent. */
-function getSelectionOffsets(container: HTMLElement): { start: number; end: number; text: string } | null {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return null;
-  const range = sel.getRangeAt(0);
-  if (range.collapsed) return null;
-  if (!container.contains(range.commonAncestorContainer)) return null;
-
-  const preRange = document.createRange();
-  preRange.setStart(container, 0);
-  preRange.setEnd(range.startContainer, range.startOffset);
-  const start = preRange.toString().length;
-  const text = range.toString();
-  return { start, end: start + text.length, text };
-}
-
-interface Props {
-  itemId: string;
-  turnId: string;
-  sessionId: string;
-  content: string;
-  threads: DiscussionThread[];
-  runtimeType?: string;
-}
-
-export default function CommentableText({ itemId, turnId, sessionId, content, threads }: Props) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  // Refs to read the current message and Esc timing from stable-closure
-  // handlers (handleGlobalMouseDown / handleMouseDown are bound with empty deps).
-  const messageRef = useRef('');
-  const lastEscRef = useRef(0);
-  const [showDiscussBtn, setShowDiscussBtn] = useState(false);
-  const [btnPos, setBtnPos] = useState({ x: 0, y: 0 });
-  const [showPopover, setShowPopover] = useState(false);
-  const [popoverPos, setPopoverPos] = useState({ x: 0, y: 0 });
-  const [message, setMessage] = useState('');
-  const [selectionInfo, setSelectionInfo] = useState<{ start: number; end: number; text: string } | null>(null);
-  const { createThread, switchRightTab } = useStore();
-
-  // Handle Quote button click — populate command input with selected text
-  const handleQuoteClick = useCallback(() => {
-    if (!selectionInfo) return;
-    const formatted = `\n\`\`\`QUOTE\n${selectionInfo.text}\n\`\`\`\n\n`;
-    useStore.setState({ quotedText: formatted });
-    setShowDiscussBtn(false);
-    setSelectionInfo(null);
-    window.getSelection()?.removeAllRanges();
-  }, [selectionInfo]);
-  const threadsForItem = threads.filter((t) => t.item_id === itemId);
-
-  // Render markdown + apply highlights after each render
-  useEffect(() => {
-    if (containerRef.current) {
-      applyHighlights(containerRef.current, threadsForItem);
-    }
-  });
-
-  // Keep messageRef in sync so the stable-closure dismiss handlers can read
-  // the current message without re-subscribing on every keystroke.
-  useEffect(() => {
-    messageRef.current = message;
-  }, [message]);
-
-  // Dismiss button + popover when clicking outside the wrapper
-  useEffect(() => {
-    function handleGlobalMouseDown(e: MouseEvent) {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
-        setShowDiscussBtn(false);
-        // Don't auto-dismiss a popover that has typed text — require Esc/X.
-        if (!messageRef.current.trim()) {
-          setShowPopover(false);
-        }
-      }
-    }
-    document.addEventListener('mousedown', handleGlobalMouseDown);
-    return () => document.removeEventListener('mousedown', handleGlobalMouseDown);
-  }, []);
-
-  // Handle mousedown in container — hide everything (new selection starting or click).
-  // Protect a popover that has typed text: only auto-close when it's empty.
-  const handleMouseDown = useCallback(() => {
-    setShowDiscussBtn(false);
-    if (!messageRef.current.trim()) {
-      setShowPopover(false);
-    }
-  }, []);
-
-  // Check the current text selection within the container and position the
-  // floating Discuss/Quote buttons. Direction-aware (handles backward
-  // selections) and clamps into the viewport so the buttons stay visible.
-  const checkSelection = useCallback(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const result = getSelectionOffsets(container);
-    if (result && result.text.trim().length > 0) {
-      const sel = window.getSelection();
-      if (sel && sel.rangeCount > 0 && sel.anchorNode && sel.focusNode) {
-        const range = sel.getRangeAt(0);
-        // Use viewport coordinates (position:fixed) — avoids overflow clipping
-        // and stacking-context issues from nested containers.
-        const selRect = range.getBoundingClientRect();
-        const BUTTON_HEIGHT = 28;
-        const GAP = 6;
-        const BUTTON_WIDTH_EST = 170;
-
-        // Detect backward selection: compare anchor (press) and focus (release)
-        // endpoints in document order. anchor after focus => user dragged
-        // backwards, so the release point is at the start/left of the text.
-        let backward = false;
-        try {
-          const fr = document.createRange();
-          fr.setStart(sel.focusNode, sel.focusOffset);
-          fr.setEnd(sel.focusNode, sel.focusOffset);
-          const ar = document.createRange();
-          ar.setStart(sel.anchorNode, sel.anchorOffset);
-          ar.setEnd(sel.anchorNode, sel.anchorOffset);
-          backward = ar.compareBoundaryPoints(Range.START_TO_START, fr) > 0;
-        } catch {
-          backward = false;
-        }
-
-        let btnY = selRect.top - BUTTON_HEIGHT - GAP;
-        if (btnY < 8) btnY = selRect.bottom + GAP;
-
-        // Anchor near the release end and keep the whole bar on-screen.
-        let btnX = backward ? selRect.left - BUTTON_WIDTH_EST : selRect.right;
-        btnX = Math.max(8, Math.min(btnX, window.innerWidth - BUTTON_WIDTH_EST - 8));
-
-        setBtnPos({ x: btnX, y: btnY });
-        setShowDiscussBtn(true);
-        setSelectionInfo(result);
-      }
-    } else {
-      setShowDiscussBtn(false);
-    }
-  }, []);
-
-  // Detect text selections on mouseup anywhere in the document — not just
-  // inside the container. When dragging a selection backwards to a line
-  // start, the mouse is frequently released in the surrounding padding/gutter
-  // (outside the container element), which would otherwise miss a container-
-  // bound onMouseUp and never show the quote button.
-  useEffect(() => {
-    function onDocMouseUp(e: MouseEvent) {
-      const t = e.target as HTMLElement | null;
-      // Ignore clicks on our own floating buttons/popover — their handlers
-      // manage state and may clear the selection themselves.
-      if (t && (t.closest('.selection-actions') || t.closest('.thread-create-popover'))) return;
-      checkSelection();
-    }
-    document.addEventListener('mouseup', onDocMouseUp);
-    return () => document.removeEventListener('mouseup', onDocMouseUp);
-  }, [checkSelection]);
-
-  // Handle Discuss button click
-  const handleDiscussClick = useCallback(() => {
-    setShowDiscussBtn(false);
-    setShowPopover(true);
-    // Position popover where the button was — button is hidden, popover takes its place
-    setPopoverPos({ x: btnPos.x, y: btnPos.y });
-  }, [btnPos]);
-
-  // Clamp the discuss popover into the viewport once it mounts. The popover
-  // uses `transform: translateX(-100%)`, so its visible right edge sits at
-  // `left` and it opens to the LEFT. For backward selections the button is
-  // anchored near the left edge, which would push the (wider) popover off the
-  // left side; for selections near the top it would overflow above. Measure
-  // the real size and reposition before paint (no flash).
-  useLayoutEffect(() => {
-    if (!showPopover) return;
-    const el = popoverRef.current;
-    if (!el) return;
-    const w = el.offsetWidth;
-    const h = el.offsetHeight;
-    const MARGIN = 8;
-    // Visible box is [x - w, x] horizontally (translateX(-100%)) and [y, y + h] vertically.
-    let x = btnPos.x;
-    let y = btnPos.y;
-    if (x - w < MARGIN) x = w + MARGIN;            // would overflow left → shift right
-    if (x > window.innerWidth - MARGIN) x = window.innerWidth - MARGIN; // overflow right
-    if (y < MARGIN) y = MARGIN;                    // overflow top
-    if (y + h > window.innerHeight - MARGIN) y = window.innerHeight - h - MARGIN; // overflow bottom
-    setPopoverPos({ x, y });
-  }, [showPopover, btnPos]);
-
-  // Handle submit — create thread
-  const handleSubmit = useCallback(async () => {
-    if (!selectionInfo || !message.trim()) return;
-    await createThread(sessionId, {
-      itemId,
-      turnId,
-      startOffset: selectionInfo.start,
-      endOffset: selectionInfo.end,
-      selectedText: selectionInfo.text,
-      message: message.trim(),
-    });
-    setMessage('');
-    setShowPopover(false);
-    setSelectionInfo(null);
-    // Clear selection
-    window.getSelection()?.removeAllRanges();
-    // Switch to Threads tab
-    switchRightTab('threads');
-  }, [selectionInfo, message, createThread, sessionId, itemId, turnId, switchRightTab]);
-
-  // Handle mark click — navigate to Threads tab
-  const handleMarkClick = useCallback(
-    (e: React.MouseEvent) => {
-      const target = e.target as HTMLElement;
-      if (target.tagName === 'MARK' && target.hasAttribute('data-thread-id')) {
-        e.preventDefault();
-        switchRightTab('threads');
-        const threadId = target.getAttribute('data-thread-id');
-        // Scroll to thread card after a brief delay
-        setTimeout(() => {
-          const card = document.getElementById(`thread-${threadId}`);
-          if (card) {
-            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            card.classList.add('thread-card-highlighted');
-            setTimeout(() => card.classList.remove('thread-card-highlighted'), 1500);
-          }
-        }, 100);
-      }
-    },
-    [switchRightTab],
-  );
-
-  return (
-    <div style={{ position: 'relative' }} ref={wrapperRef}>
-      <div
-        ref={containerRef}
-        dangerouslySetInnerHTML={{ __html: renderMarkdown(content || '…') }}
-        onMouseDown={handleMouseDown}
-        onClick={handleMarkClick}
-      />
-
-      {/* Floating "Discuss" + "Quote" buttons */}
-      {showDiscussBtn && !showPopover && (
-        <div className="selection-actions" style={{ left: btnPos.x, top: btnPos.y }}>
-          <button
-            className="discuss-button"
-            onClick={handleDiscussClick}
-            title="Start a discussion about this text"
-          >
-            <MessageSquarePlus size={14} />
-            <span>Discuss</span>
-          </button>
-          <button
-            className="discuss-button"
-            onClick={handleQuoteClick}
-            title="Quote this text in your message"
-          >
-            <Quote size={14} />
-            <span>Quote</span>
-          </button>
-        </div>
-      )}
-
-      {/* Thread creation popover */}
-      {showPopover && (
-        <div ref={popoverRef} className="thread-create-popover" style={{ left: popoverPos.x, top: popoverPos.y }}>
-          <div className="thread-create-header">
-            <span className="thread-create-quote">"{selectionInfo?.text.slice(0, 80)}{selectionInfo && selectionInfo.text.length > 80 ? '…' : ''}"</span>
-            <button className="thread-create-close" onClick={() => { setShowPopover(false); setSelectionInfo(null); }}>
-              <X size={14} />
-            </button>
-          </div>
-          <textarea
-            className="thread-create-input"
-            placeholder="Ask about this text…"
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            autoFocus
-            rows={2}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                e.preventDefault();
-                handleSubmit();
-              }
-              if (e.key === 'Escape') {
-                if (messageRef.current.trim()) {
-                  // Protect typed text: require a second Esc within 400ms to close.
-                  const now = Date.now();
-                  if (lastEscRef.current && now - lastEscRef.current < 400) {
-                    lastEscRef.current = 0;
-                    setShowPopover(false);
-                    setSelectionInfo(null);
-                  } else {
-                    lastEscRef.current = now;
-                  }
-                } else {
-                  setShowPopover(false);
-                  setSelectionInfo(null);
-                }
-              }
-            }}
-          />
-          <div className="thread-create-footer">
-            <span className="thread-create-hint">⌘↵ to send · Esc to cancel</span>
-            <button className="thread-create-send" onClick={handleSubmit} disabled={!message.trim()}>
-              <Send size={13} />
-              <span>Send</span>
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,39 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { render, cleanup, act } from '@testing-library/react';
-import IdeWorkspace from './IdeWorkspace.tsx';
-import { resetStore } from '../test/component-helpers.ts';
-import { useStore } from '../store/store.ts';
-
-describe('IdeWorkspace', () => {
-  beforeEach(() => {
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('renders two resize handles (left & right)', () => {
-    render(<IdeWorkspace />);
-    const handles = document.querySelectorAll('.resize-handle');
-    expect(handles).toHaveLength(2);
-    expect(handles[0].className).toContain('left');
-    expect(handles[1].className).toContain('right');
-  });
-
-  it('applies a 5-track grid reflecting store widths', () => {
-    resetStore({ sidebarWidth: 200, rightPanelWidth: 400 });
-    render(<IdeWorkspace />);
-    const layout = document.querySelector('.ide-layout') as HTMLElement;
-    expect(layout.style.gridTemplateColumns).toBe('200px 6px 1fr 6px 400px');
-  });
-
-  it('updates grid when store widths change', () => {
-    render(<IdeWorkspace />);
-    act(() => {
-      useStore.getState().setSidebarWidth(180);
-      useStore.getState().setRightPanelWidth(500);
-    });
-    const layout = document.querySelector('.ide-layout') as HTMLElement;
-    expect(layout.style.gridTemplateColumns).toBe('180px 6px 1fr 6px 500px');
-  });
-});

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

@@ -1,51 +0,0 @@
-import WorkspaceSidebar from './WorkspaceSidebar.tsx';
-import SessionTabs from './SessionTabs.tsx';
-import RenderArea from './RenderArea.tsx';
-import CommandInputBar from './CommandInputBar.tsx';
-import RightPanel from './RightPanel.tsx';
-import StatusBar from './StatusBar.tsx';
-import ResizeHandle from './ResizeHandle.tsx';
-import { useStore } from '../store/store.ts';
-import { SIDEBAR_MIN, SIDEBAR_MAX, RIGHT_PANEL_MIN, RIGHT_PANEL_MAX } from '../store/uiSlice.ts';
-
-export default function IdeWorkspace() {
-  const sidebarWidth = useStore((s) => s.sidebarWidth);
-  const rightPanelWidth = useStore((s) => s.rightPanelWidth);
-  const setSidebarWidth = useStore((s) => s.setSidebarWidth);
-  const setRightPanelWidth = useStore((s) => s.setRightPanelWidth);
-
-  // 5 grid columns: sidebar | handle | center | handle | right panel.
-  // Handles occupy a 6px track each; center stays 1fr so it absorbs slack.
-  const gridTemplateColumns = `${sidebarWidth}px 6px 1fr 6px ${rightPanelWidth}px`;
-
-  return (
-    <div className="ide-root">
-      <div className="ide-layout" style={{ gridTemplateColumns }}>
-        <WorkspaceSidebar />
-        <ResizeHandle
-          side="left"
-          minWidth={SIDEBAR_MIN}
-          maxWidth={SIDEBAR_MAX}
-          getWidth={() => useStore.getState().sidebarWidth}
-          setWidth={setSidebarWidth}
-        />
-        <div className="ide-center">
-          <SessionTabs />
-          <div className="ide-render">
-            <RenderArea />
-          </div>
-          <CommandInputBar />
-        </div>
-        <ResizeHandle
-          side="right"
-          minWidth={RIGHT_PANEL_MIN}
-          maxWidth={RIGHT_PANEL_MAX}
-          getWidth={() => useStore.getState().rightPanelWidth}
-          setWidth={setRightPanelWidth}
-        />
-        <RightPanel />
-      </div>
-      <StatusBar />
-    </div>
-  );
-}

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

@@ -1,129 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import ModelSelector from './ModelSelector.tsx';
-import { resetStore } from '../test/component-helpers.ts';
-import { makeSession } from '../test/fixtures.ts';
-
-describe('ModelSelector', () => {
-  beforeEach(() => {
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('returns null when no active session', () => {
-    const { container } = render(<ModelSelector />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders button with provider and model label', () => {
-    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
-    resetStore({ activeSessionId: 's1', sessions: [session] });
-    render(<ModelSelector />);
-    const btn = document.querySelector('.model-selector-btn') as HTMLElement;
-    expect(btn.textContent).toContain('Codex');
-    expect(btn.textContent).toContain('GPT-5.6-Sol');
-  });
-
-  it('opens popover with 3 columns on button click', () => {
-    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
-    resetStore({ activeSessionId: 's1', sessions: [session] });
-    render(<ModelSelector />);
-    const btn = document.querySelector('.model-selector-btn') as HTMLElement;
-    fireEvent.click(btn);
-    expect(document.querySelector('.model-selector-popover')).toBeInTheDocument();
-    const headers = document.querySelectorAll('.model-selector-col-header');
-    expect(headers).toHaveLength(3);
-    expect(headers[0].textContent).toBe('Provider');
-    expect(headers[1].textContent).toBe('Model');
-    expect(headers[2].textContent).toBe('Thinking');
-  });
-
-  it('selecting a model calls updateModelConfig and closes popover', async () => {
-    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
-    const updateModelConfig = vi.fn().mockResolvedValue(undefined);
-    resetStore({ activeSessionId: 's1', sessions: [session], updateModelConfig });
-    render(<ModelSelector />);
-    fireEvent.click(document.querySelector('.model-selector-btn')!);
-    // Click on "GPT-5.6-Terra" model
-    const terraItem = Array.from(document.querySelectorAll('.model-selector-item')).find((el) =>
-      el.textContent?.includes('GPT-5.6-Terra'),
-    )!;
-    fireEvent.click(terraItem);
-    expect(updateModelConfig).toHaveBeenCalledWith('gpt-5.6-terra', expect.any(String));
-  });
-
-  it('selecting reasoning calls updateModelConfig with current model', async () => {
-    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
-    const updateModelConfig = vi.fn().mockResolvedValue(undefined);
-    resetStore({ activeSessionId: 's1', sessions: [session], updateModelConfig });
-    render(<ModelSelector />);
-    fireEvent.click(document.querySelector('.model-selector-btn')!);
-    // Click on "High" reasoning level
-    const highItem = Array.from(document.querySelectorAll('.model-selector-item')).find((el) =>
-      el.textContent?.trim() === 'High',
-    )!;
-    fireEvent.click(highItem);
-    expect(updateModelConfig).toHaveBeenCalledWith('gpt-5.6-sol', 'high');
-  });
-
-  it('reasoning cascade: switching to model without current reasoning level switches to default', async () => {
-    // gpt-5.5 has levels [low, medium, high, xhigh] — no "max" or "ultra"
-    // gpt-5.6-sol has levels [low, medium, high, xhigh, max, ultra]
-    // Switch from gpt-5.6-sol (reasoning=ultra) to gpt-5.5 → ultra not supported → default for gpt-5.5 is "medium"
-    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'ultra' });
-    const updateModelConfig = vi.fn().mockResolvedValue(undefined);
-    resetStore({ activeSessionId: 's1', sessions: [session], updateModelConfig });
-    render(<ModelSelector />);
-    fireEvent.click(document.querySelector('.model-selector-btn')!);
-    // Click on "GPT-5.5" model
-    const gpt55Item = Array.from(document.querySelectorAll('.model-selector-item')).find((el) =>
-      el.textContent?.includes('GPT-5.5'),
-    )!;
-    fireEvent.click(gpt55Item);
-    // gpt-5.5 defaultReasoning is "medium"
-    expect(updateModelConfig).toHaveBeenCalledWith('gpt-5.5', 'medium');
-  });
-
-  it('clicking a different provider calls updateModelConfig with runtimeType and keeps popover open', async () => {
-    const session = makeSession('s1', { runtime_type: 'codex', model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
-    const updateModelConfig = vi.fn().mockResolvedValue(undefined);
-    resetStore({ activeSessionId: 's1', sessions: [session], updateModelConfig });
-    render(<ModelSelector />);
-    fireEvent.click(document.querySelector('.model-selector-btn')!);
-    // Click on "Claude" provider
-    const claudeItem = Array.from(document.querySelectorAll('.model-selector-item')).find((el) =>
-      el.textContent?.includes('Claude'),
-    )!;
-    fireEvent.click(claudeItem);
-    expect(updateModelConfig).toHaveBeenCalledWith('', '', 'claude');
-    // Popover should stay open
-    expect(document.querySelector('.model-selector-popover')).toBeInTheDocument();
-  });
-
-  it('outside click closes popover', () => {
-    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
-    resetStore({ activeSessionId: 's1', sessions: [session] });
-    render(
-      <div>
-        <div data-testid="outside">Outside</div>
-        <ModelSelector />
-      </div>,
-    );
-    fireEvent.click(document.querySelector('.model-selector-btn')!);
-    expect(document.querySelector('.model-selector-popover')).toBeInTheDocument();
-    fireEvent.mouseDown(screen.getByTestId('outside'));
-    expect(document.querySelector('.model-selector-popover')).toBeNull();
-  });
-
-  it('ESC closes popover', () => {
-    const session = makeSession('s1', { model: 'gpt-5.6-sol', model_reasoning_effort: 'low' });
-    resetStore({ activeSessionId: 's1', sessions: [session] });
-    render(<ModelSelector />);
-    fireEvent.click(document.querySelector('.model-selector-btn')!);
-    expect(document.querySelector('.model-selector-popover')).toBeInTheDocument();
-    fireEvent.keyDown(document, { key: 'Escape' });
-    expect(document.querySelector('.model-selector-popover')).toBeNull();
-  });
-});