Function QuickOpenDialog

src/components/QuickOpenDialog.tsx:28–165

({ onDone, onInsert }: Props)

 * Fuzzy file finder with a syntax-highlighted preview of the focused file.
 */
export function QuickOpenDialog({ onDone, onInsert }: Props): React.ReactNode {
  useRegisterOverlay('quick-open');
  const { columns, rows } = useTerminalSize();
  // Chrome (title + search + hints + pane border + gaps) eats ~14 rows.
  // Shrink the list on short terminals so the dialog doesn't clip.
  const visibleResults = Math.min(VISIBLE_RESULTS, Math.max(4, rows - 14));

  const [results, setResults] = useState<string[]>([]);
  const [query, setQuery] = useState('');
  const [focusedPath, setFocusedPath] = useState<string | undefined>(undefined);
  const [preview, setPreview] = useState<{
    path: string;
    content: string;
  } | null>(null);
  const queryGenRef = useRef(0);
  useEffect(() => () => void queryGenRef.current++, []);

  const previewOnRight = columns >= 120;
  // Side preview sits in a fixed-height row alongside the list (visibleCount
  // rows), so overflowing that height garbles the layout — cap to fit, minus
  // one for the path header line.
  const effectivePreviewLines = previewOnRight ? VISIBLE_RESULTS - 1 : PREVIEW_LINES;

  // A generation counter invalidates stale results if the user types faster
  // than the index can respond.
  const handleQueryChange = (q: string) => {
    setQuery(q);
    const gen = ++queryGenRef.current;
    if (!q.trim()) {
      // generateFileSuggestions('') returns raw readdir() of cwd (designed for
      // @-mentions). For Quick Open that's just noise — show the empty state.
      setResults([]);
      return;
    }
    void generateFileSuggestions(q, true).then(items => {
      if (gen !== queryGenRef.current) return;
      // Filter out directory entries — they come back with a trailing path.sep
      // from getTopLevelPaths() and would cause readFileInRange to throw EISDIR,
      // leaving the preview pane stuck on "Loading preview…".
      // Normalize separators to '/' so truncatePathMiddle (which uses
      // lastIndexOf('/')) can find the filename on Windows too.
      const paths = items
        .filter(i => i.id.startsWith('file-'))
        .map(i => i.displayText)
        .filter(p => !p.endsWith(path.sep))
        .map(p => p.split(path.sep).join('/'));
      setResults(paths);
    });
  };

  // Load a short preview of the focused file. Each navigation aborts the
  // previous read so holding ↓ doesn't pile up whole-file reads and so a
  // slow early read can't overwrite a faster later one. The stale preview
  // stays visible until the new one arrives — renderPreview overlays a dim
  // loading indicator rather than blanking the pane.
  useEffect(() => {
    if (!focusedPath) {
      // No results — clear so the empty-state renders instead of a stale