Add search to sessions list (#2439)

2025-05-06 16:34:11 -07:00
parent 392a101078
commit 9417e54593
5 changed files with 565 additions and 385 deletions
@@ -1,4 +1,4 @@
-import React, { useEffect, KeyboardEvent, useState, useCallback } from 'react';
+import React, { useEffect, useState, useRef, KeyboardEvent } from 'react';
 import { Search as SearchIcon } from 'lucide-react';
 import { ArrowDown, ArrowUp, Close } from '../icons';
 import { debounce } from 'lodash';
@@ -26,13 +26,6 @@ interface SearchBarProps {

 /**
 * SearchBar provides a search input with case-sensitive toggle and result navigation.
- * Features:
- * - Case-sensitive search toggle
- * - Result count display
- * - Navigation between results with arrows
- * - Keyboard shortcuts (↑/↓ for navigation, Esc to close)
- * - Smooth animations for enter/exit
- * - Debounced search for better performance
 */
 export const SearchBar: React.FC<SearchBarProps> = ({
  onSearch,
@@ -41,23 +34,26 @@ export const SearchBar: React.FC<SearchBarProps> = ({
  searchResults,
  inputRef: externalInputRef,
  initialSearchTerm = '',
-}) => {
+}: SearchBarProps) => {
  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
-  const [displayTerm, setDisplayTerm] = useState(initialSearchTerm); // For immediate visual feedback
  const [caseSensitive, setCaseSensitive] = useState(false);
  const [isExiting, setIsExiting] = useState(false);
  const internalInputRef = React.useRef<HTMLInputElement>(null);
  const inputRef = externalInputRef || internalInputRef;
+  const debouncedSearchRef = useRef<ReturnType<typeof debounce>>();

  // Create debounced search function
-  const debouncedSearch = useCallback(
-    (term: string, isCaseSensitive: boolean) => {
-      debounce((searchTerm: string, caseSensitive: boolean) => {
-        onSearch(searchTerm, caseSensitive);
-      }, 150)(term, isCaseSensitive);
-    },
-    [onSearch]
-  );
+  useEffect(() => {
+    const debouncedFn = debounce((term: string, caseSensitive: boolean) => {
+      onSearch(term, caseSensitive);
+    }, 200);
+
+    debouncedSearchRef.current = debouncedFn;
+
+    return () => {
+      debouncedFn.cancel();
+    };
+  }, [onSearch]);

  useEffect(() => {
    inputRef.current?.focus();
@@ -67,29 +63,48 @@ export const SearchBar: React.FC<SearchBarProps> = ({
  useEffect(() => {
    if (initialSearchTerm) {
      setSearchTerm(initialSearchTerm);
-      setDisplayTerm(initialSearchTerm);
-      debouncedSearch(initialSearchTerm, caseSensitive);
+      if (initialSearchTerm.length >= 2) {
+        debouncedSearchRef.current?.(initialSearchTerm, caseSensitive);
+      }
    }
-  }, [initialSearchTerm, caseSensitive, debouncedSearch]);
+  }, [initialSearchTerm, caseSensitive, debouncedSearchRef]);

-  // Cleanup debounced function on unmount
+  const [localSearchResults, setLocalSearchResults] = useState<typeof searchResults>(null);
+
+  // Sync external search results with local state
  useEffect(() => {
-    return () => {
-      debouncedSearch.cancel?.();
-    };
-  }, [debouncedSearch]);
+    // Only set results if we have a search term
+    if (!searchTerm) {
+      setLocalSearchResults(null);
+    } else {
+      setLocalSearchResults(searchResults);
+    }
+  }, [searchResults, searchTerm]);

  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
-    setDisplayTerm(value); // Update display immediately
-    setSearchTerm(value); // Update actual term
-    debouncedSearch(value, caseSensitive);
+
+    // Always cancel pending searches first
+    if (debouncedSearchRef.current) {
+      debouncedSearchRef.current.cancel();
+    }
+
+    // Update display term immediately for UI feedback
+    setSearchTerm(value);
+
+    // Only trigger search if we have 2 or more characters
+    if (value.length >= 2) {
+      debouncedSearchRef.current?.(value, caseSensitive);
+    } else {
+      // Clear results if less than 2 characters
+      onSearch('', caseSensitive);
+    }
  };

  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'ArrowUp') {
      handleNavigate('prev', event);
-    } else if (event.key === 'ArrowDown') {
+    } else if (event.key === 'ArrowDown' || event.key === 'Enter') {
      handleNavigate('next', event);
    } else if (event.key === 'Escape') {
      event.preventDefault();
@@ -99,26 +114,32 @@ export const SearchBar: React.FC<SearchBarProps> = ({

  const handleNavigate = (direction: 'next' | 'prev', e?: React.MouseEvent | KeyboardEvent) => {
    e?.preventDefault();
-    onNavigate?.(direction);
-    inputRef.current?.focus();
+    if (searchResults && searchResults.count > 0) {
+      inputRef.current?.focus();
+      onNavigate?.(direction);
+    }
  };

  const toggleCaseSensitive = () => {
    const newCaseSensitive = !caseSensitive;
    setCaseSensitive(newCaseSensitive);
    // Immediately trigger a new search with updated case sensitivity
-    debouncedSearch(searchTerm, newCaseSensitive);
+    if (searchTerm) {
+      debouncedSearchRef.current?.(searchTerm, newCaseSensitive);
+    }
    inputRef.current?.focus();
  };

  const handleClose = () => {
    setIsExiting(true);
-    debouncedSearch.cancel?.(); // Cancel any pending searches
+    debouncedSearchRef.current?.cancel(); // Cancel any pending searches
    setTimeout(() => {
      onClose();
    }, 150); // Match animation duration
  };

+  const hasResults = searchResults && searchResults.count > 0;
+
  return (
    <div
      className={`sticky top-0 bg-bgAppInverse text-textProminentInverse z-50 ${
@@ -133,60 +154,74 @@ export const SearchBar: React.FC<SearchBarProps> = ({
              ref={inputRef}
              id="search-input"
              type="text"
-              value={displayTerm}
+              value={searchTerm}
              onChange={handleSearch}
              onKeyDown={handleKeyDown}
              placeholder="Search conversation..."
-              className="w-full text-sm pl-9 pr-10 py-3 bg-bgAppInverse
+              className="w-full text-sm pl-9 pr-24 py-3 bg-bgAppInverse
                      placeholder:text-textSubtleInverse focus:outline-none 
                       active:border-borderProminent"
            />
          </div>

-          <div className="absolute right-3 flex h-full items-center justify-center text-sm text-textStandardInverse">
-            {searchResults && searchResults.count}
+          <div className="absolute right-3 flex h-full items-center justify-end">
+            <div className="flex items-center gap-1">
+              <div className="w-16 text-right text-sm text-textStandardInverse flex items-center justify-end">
+                {(() => {
+                  return localSearchResults?.count > 0 && searchTerm
+                    ? `${localSearchResults.currentIndex}/${localSearchResults.count}`
+                    : null;
+                })()}
+              </div>
+            </div>
          </div>
        </div>

        <div className="flex items-center justify-center h-auto px-4 gap-2">
          <button
            onClick={toggleCaseSensitive}
-            className={`flex items-center justify-center case-sensitive-btn px-2 ${
+            className={`flex items-center justify-center min-w-[32px] h-[28px] rounded transition-all duration-150 ${
              caseSensitive
-                ? 'text-textStandardInverse bg-bgHover'
-                : 'text-textSubtleInverse hover:text-textStandardInverse'
+                ? 'bg-white/20 shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)]'
+                : 'text-textSubtleInverse hover:text-textStandardInverse hover:bg-white/5'
            }`}
            title="Case Sensitive"
          >
-            <span className="text-md font-medium">Aa</span>
+            <span className="text-md font-normal">Aa</span>
          </button>

-          <button
-            onClick={(e) => handleNavigate('prev', e)}
-            className={`p-1 text-textSubtleInverse ${!searchResults || searchResults.count === 0 ? '' : 'hover:text-textStandardInverse'}`}
-            title="Previous (↑)"
-            disabled={!searchResults || searchResults.count === 0}
-          >
-            <ArrowUp className="h-5 w-5" />
-          </button>
-          <button
-            onClick={(e) => handleNavigate('next', e)}
-            className={`p-1 text-textSubtleInverse ${!searchResults || searchResults.count === 0 ? '' : 'hover:text-textStandardInverse'}`}
-            title="Next (↓)"
-            disabled={!searchResults || searchResults.count === 0}
-          >
-            <ArrowDown className="h-5 w-5" />
-          </button>
+          <div className="flex items-center gap-2">
+            <button onClick={(e) => handleNavigate('prev', e)} className="p-1" title="Previous (↑)">
+              <ArrowUp
+                className={`h-5 w-5 transition-opacity ${
+                  !hasResults
+                    ? 'opacity-30'
+                    : 'text-textSubtleInverse hover:text-textStandardInverse'
+                }`}
+              />
+            </button>
+            <button
+              onClick={(e) => handleNavigate('next', e)}
+              className="p-1"
+              title="Next (↓ or Enter)"
+            >
+              <ArrowDown
+                className={`h-5 w-5 transition-opacity ${
+                  !hasResults
+                    ? 'opacity-30'
+                    : 'text-textSubtleInverse hover:text-textStandardInverse'
+                }`}
+              />
+            </button>
+          </div>

-          <button
-            onClick={handleClose}
-            className="p-1 text-textSubtleInverse hover:text-textStandardInverse"
-            title="Close (Esc)"
-          >
-            <Close className="h-5 w-5" />
+          <button onClick={handleClose} className="p-1" title="Close (Esc)">
+            <Close className="h-5 w-5 text-textSubtleInverse hover:text-textStandardInverse" />
          </button>
        </div>
      </div>
    </div>
  );
 };
+
+export default SearchBar;
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, PropsWithChildren, useCallback } from 'react';
-import { SearchBar } from './SearchBar';
+import SearchBar from './SearchBar';
 import { SearchHighlighter } from '../../utils/searchHighlighter';
 import { debounce } from 'lodash';
 import '../../styles/search.css';
@@ -10,6 +10,19 @@ import '../../styles/search.css';
 interface SearchViewProps {
  /** Optional CSS class name */
  className?: string;
+  /** Optional callback for search term changes */
+  onSearch?: (term: string, caseSensitive: boolean) => void;
+  /** Optional callback for navigating between search results */
+  onNavigate?: (direction: 'next' | 'prev') => void;
+  /** Current search results state */
+  searchResults?: {
+    count: number;
+    currentIndex: number;
+  } | null;
+}
+
+interface SearchContainerElement extends HTMLDivElement {
+  _searchHighlighter: SearchHighlighter | null;
 }

 /**
@@ -20,17 +33,20 @@ interface SearchViewProps {
 export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
  className = '',
  children,
+  onSearch,
+  onNavigate,
+  searchResults,
 }) => {
  const [isSearchVisible, setIsSearchVisible] = useState(false);
  const [initialSearchTerm, setInitialSearchTerm] = useState('');
-  const [searchResults, setSearchResults] = useState<{
+  const [internalSearchResults, setInternalSearchResults] = useState<{
    currentIndex: number;
    count: number;
  } | null>(null);

  const searchInputRef = React.useRef<HTMLInputElement>(null);
  const highlighterRef = React.useRef<SearchHighlighter | null>(null);
-  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const containerRef = React.useRef<SearchContainerElement | null>(null);
  const lastSearchRef = React.useRef<{ term: string; caseSensitive: boolean }>({
    term: '',
    caseSensitive: false,
@@ -39,23 +55,37 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
  // Create debounced highlight function
  const debouncedHighlight = useCallback(
    (term: string, caseSensitive: boolean, highlighter: SearchHighlighter) => {
-      debounce(
-        (searchTerm: string, isCaseSensitive: boolean, searchHighlighter: SearchHighlighter) => {
-          const highlights = searchHighlighter.highlight(searchTerm, isCaseSensitive);
-          const count = highlights.length;
+      const performHighlight = () => {
+        const highlights = highlighter.highlight(term, caseSensitive);
+        const count = highlights.length;

-          if (count > 0) {
-            setSearchResults({
-              currentIndex: 1,
-              count,
-            });
-            searchHighlighter.setCurrentMatch(0, true); // Explicitly scroll when setting initial match
-          } else {
-            setSearchResults(null);
-          }
-        },
-        150
-      )(term, caseSensitive, highlighter);
+        if (count > 0) {
+          setInternalSearchResults({
+            currentIndex: 1,
+            count,
+          });
+          highlighter.setCurrentMatch(0, true);
+        } else {
+          setInternalSearchResults(null);
+        }
+      };
+
+      // If this is a case sensitivity change (same term, different case setting),
+      // execute immediately
+      if (
+        term === lastSearchRef.current.term &&
+        caseSensitive !== lastSearchRef.current.caseSensitive
+      ) {
+        performHighlight();
+        return;
+      }
+
+      // Create a debounced version of performHighlight
+      const debouncedFn = debounce(performHighlight, 150);
+      debouncedFn();
+
+      // Store the debounced function for potential cancellation
+      return debouncedFn;
    },
    []
  );
@@ -69,10 +99,18 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
  const handleSearch = useCallback(
    (term: string, caseSensitive: boolean) => {
      // Store the latest search parameters
+      const isCaseChange =
+        term === lastSearchRef.current.term &&
+        caseSensitive !== lastSearchRef.current.caseSensitive;
+
      lastSearchRef.current = { term, caseSensitive };

+      // Call the onSearch callback if provided
+      onSearch?.(term, caseSensitive);
+
+      // If empty, clear everything and return
      if (!term) {
-        setSearchResults(null);
+        setInternalSearchResults(null);
        if (highlighterRef.current) {
          highlighterRef.current.clearHighlights();
        }
@@ -82,62 +120,73 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
      const container = containerRef.current;
      if (!container) return;

-      if (!highlighterRef.current) {
-        highlighterRef.current = new SearchHighlighter(container, (count) => {
-          // Only update if this is still the latest search
-          if (
-            lastSearchRef.current.term === term &&
-            lastSearchRef.current.caseSensitive === caseSensitive
-          ) {
-            if (count > 0) {
-              setSearchResults((prev) => ({
-                currentIndex: prev?.currentIndex || 1,
-                count,
-              }));
-            } else {
-              setSearchResults(null);
-            }
-          }
-        });
+      // For case sensitivity changes, reuse existing highlighter
+      if (isCaseChange && highlighterRef.current) {
+        debouncedHighlight(term, caseSensitive, highlighterRef.current);
+        return;
      }

-      // Debounce the highlight operation
+      // Otherwise create new highlighter
+      if (highlighterRef.current) {
+        highlighterRef.current.clearHighlights();
+        highlighterRef.current.destroy();
+      }
+
+      highlighterRef.current = new SearchHighlighter(container, (count) => {
+        // Only update if this is still the latest search
+        if (
+          lastSearchRef.current.term === term &&
+          lastSearchRef.current.caseSensitive === caseSensitive
+        ) {
+          if (count > 0) {
+            setInternalSearchResults({
+              currentIndex: 1,
+              count,
+            });
+          } else {
+            setInternalSearchResults(null);
+          }
+        }
+      });
+
      debouncedHighlight(term, caseSensitive, highlighterRef.current);
    },
-    [debouncedHighlight]
+    [debouncedHighlight, onSearch]
  );

  /**
   * Navigates between search results in the specified direction.
   * @param direction - Direction to navigate ('next' or 'prev')
   */
-  const navigateResults = useCallback(
+  const handleNavigate = useCallback(
    (direction: 'next' | 'prev') => {
-      if (!searchResults || searchResults.count === 0 || !highlighterRef.current) return;
-
-      let newIndex: number;
-      const currentIdx = searchResults.currentIndex - 1; // Convert to 0-based
-
-      if (direction === 'next') {
-        newIndex = currentIdx + 1;
-        if (newIndex >= searchResults.count) {
-          newIndex = 0;
-        }
-      } else {
-        newIndex = currentIdx - 1;
-        if (newIndex < 0) {
-          newIndex = searchResults.count - 1;
-        }
+      // If external navigation is provided, use that
+      if (onNavigate) {
+        onNavigate(direction);
+        return;
      }

-      setSearchResults({
-        ...searchResults,
-        currentIndex: newIndex + 1,
+      // Otherwise use internal navigation
+      if (!internalSearchResults || !highlighterRef.current) return;
+
+      let newIndex: number;
+      if (direction === 'next') {
+        newIndex = (internalSearchResults.currentIndex % internalSearchResults.count) + 1;
+      } else {
+        newIndex =
+          internalSearchResults.currentIndex === 1
+            ? internalSearchResults.count
+            : internalSearchResults.currentIndex - 1;
+      }
+
+      setInternalSearchResults({
+        ...internalSearchResults,
+        currentIndex: newIndex,
      });

-      highlighterRef.current.setCurrentMatch(newIndex, true); // Explicitly scroll when navigating
+      highlighterRef.current.setCurrentMatch(newIndex - 1, true);
    },
-    [searchResults]
+    [internalSearchResults, onNavigate]
  );

  const handleFindCommand = useCallback(() => {
@@ -151,15 +200,15 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({

  const handleFindNext = useCallback(() => {
    if (isSearchVisible) {
-      navigateResults('next');
+      handleNavigate('next');
    }
-  }, [isSearchVisible, navigateResults]);
+  }, [isSearchVisible, handleNavigate]);

  const handleFindPrevious = useCallback(() => {
    if (isSearchVisible) {
-      navigateResults('prev');
+      handleNavigate('prev');
    }
-  }, [isSearchVisible, navigateResults]);
+  }, [isSearchVisible, handleNavigate]);

  const handleUseSelectionFind = useCallback(() => {
    const selection = window.getSelection()?.toString().trim();
@@ -173,13 +222,21 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
   */
  const handleCloseSearch = useCallback(() => {
    setIsSearchVisible(false);
-    setSearchResults(null);
+    setInternalSearchResults(null);
+    lastSearchRef.current = { term: '', caseSensitive: false };
+
    if (highlighterRef.current) {
      highlighterRef.current.clearHighlights();
+      highlighterRef.current.destroy();
+      highlighterRef.current = null;
    }
+
    // Cancel any pending highlight operations
    debouncedHighlight.cancel?.();
-  }, [debouncedHighlight]);
+
+    // Clear search when closing
+    onSearch?.('', false);
+  }, [debouncedHighlight, onSearch]);

  // Clean up highlighter and debounced functions on unmount
  useEffect(() => {
@@ -228,10 +285,10 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
        e.preventDefault();
        if (e.shiftKey) {
          // ⇧⌘G - Find Previous
-          navigateResults('prev');
+          handleNavigate('prev');
        } else {
          // ⌘G - Find Next
-          navigateResults('next');
+          handleNavigate('next');
        }
      }
    };
@@ -240,7 +297,7 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
-  }, [isSearchVisible, navigateResults, handleSearch, handleUseSelectionFind]);
+  }, [isSearchVisible, handleNavigate, handleSearch, handleUseSelectionFind]);

  // Listen for Find menu commands
  useEffect(() => {
@@ -258,13 +315,22 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
  }, [handleFindCommand, handleFindNext, handleFindPrevious, handleUseSelectionFind]);

  return (
-    <div ref={containerRef} className={`search-container ${className}`}>
+    <div
+      ref={(el) => {
+        if (el) {
+          containerRef.current = el;
+          // Expose the highlighter instance
+          containerRef.current._searchHighlighter = highlighterRef.current;
+        }
+      }}
+      className={`search-container ${className}`}
+    >
      {isSearchVisible && (
        <SearchBar
          onSearch={handleSearch}
          onClose={handleCloseSearch}
-          onNavigate={navigateResults}
-          searchResults={searchResults}
+          onNavigate={handleNavigate}
+          searchResults={searchResults || internalSearchResults}
          inputRef={searchInputRef}
          initialSearchTerm={initialSearchTerm}
        />
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import {
  MessageSquareText,
  Target,
@@ -16,129 +16,288 @@ import { ScrollArea } from '../ui/scroll-area';
 import { View, ViewOptions } from '../../App';
 import { formatMessageTimestamp } from '../../utils/timeUtils';
 import MoreMenuLayout from '../more_menu/MoreMenuLayout';
+import { SearchView } from '../conversation/SearchView';
+import { SearchHighlighter } from '../../utils/searchHighlighter';
+
+interface SearchContainerElement extends HTMLDivElement {
+  _searchHighlighter: SearchHighlighter | null;
+}

 interface SessionListViewProps {
  setView: (view: View, viewOptions?: ViewOptions) => void;
  onSelectSession: (sessionId: string) => void;
 }

+const ITEM_HEIGHT = 90; // Adjust based on your card height
+const BUFFER_SIZE = 5; // Number of items to render above/below viewport
+
 const SessionListView: React.FC<SessionListViewProps> = ({ setView, onSelectSession }) => {
  const [sessions, setSessions] = useState<Session[]>([]);
+  const [filteredSessions, setFilteredSessions] = useState<Session[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
+  const [searchResults, setSearchResults] = useState<{
+    count: number;
+    currentIndex: number;
+  } | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 20 });

  useEffect(() => {
-    // Load sessions on component mount
    loadSessions();
  }, []);

+  // Handle scroll events to update visible range
+  useEffect(() => {
+    const viewportEl = containerRef.current?.closest('[data-radix-scroll-area-viewport]');
+    if (!viewportEl) return;
+
+    const handleScroll = () => {
+      const scrollTop = viewportEl.scrollTop;
+      const viewportHeight = viewportEl.clientHeight;
+
+      const start = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER_SIZE);
+      const end = Math.min(
+        filteredSessions.length,
+        Math.ceil((scrollTop + viewportHeight) / ITEM_HEIGHT) + BUFFER_SIZE
+      );
+
+      setVisibleRange({ start, end });
+    };
+
+    handleScroll(); // Initial calculation
+    viewportEl.addEventListener('scroll', handleScroll);
+
+    const resizeObserver = new ResizeObserver(handleScroll);
+    resizeObserver.observe(viewportEl);
+
+    return () => {
+      viewportEl.removeEventListener('scroll', handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, [filteredSessions.length]);
+
+  // Filter sessions when search term or case sensitivity changes
+  const handleSearch = (term: string, caseSensitive: boolean) => {
+    if (!term) {
+      setFilteredSessions(sessions);
+      setSearchResults(null);
+      return;
+    }
+
+    const searchTerm = caseSensitive ? term : term.toLowerCase();
+    const filtered = sessions.filter((session) => {
+      const description = session.metadata.description || session.id;
+      const path = session.path;
+      const workingDir = session.metadata.working_dir;
+
+      if (caseSensitive) {
+        return (
+          description.includes(searchTerm) ||
+          path.includes(searchTerm) ||
+          workingDir.includes(searchTerm)
+        );
+      } else {
+        return (
+          description.toLowerCase().includes(searchTerm) ||
+          path.toLowerCase().includes(searchTerm) ||
+          workingDir.toLowerCase().includes(searchTerm)
+        );
+      }
+    });
+
+    setFilteredSessions(filtered);
+    setSearchResults(filtered.length > 0 ? { count: filtered.length, currentIndex: 1 } : null);
+
+    // Reset scroll position when search changes
+    const viewportEl = containerRef.current?.closest('[data-radix-scroll-area-viewport]');
+    if (viewportEl) {
+      viewportEl.scrollTop = 0;
+    }
+    setVisibleRange({ start: 0, end: 20 });
+  };
+
  const loadSessions = async () => {
    setIsLoading(true);
    setError(null);
    try {
      const sessions = await fetchSessions();
      setSessions(sessions);
+      setFilteredSessions(sessions);
    } catch (err) {
      console.error('Failed to load sessions:', err);
      setError('Failed to load sessions. Please try again later.');
      setSessions([]);
+      setFilteredSessions([]);
    } finally {
      setIsLoading(false);
    }
  };

-  return (
-    <div className="h-screen w-full">
-      <MoreMenuLayout showMenu={false} />
+  // Handle search result navigation
+  const handleSearchNavigation = (direction: 'next' | 'prev') => {
+    if (!searchResults || filteredSessions.length === 0) return;

-      <ScrollArea className="h-full w-full">
-        <div className="flex flex-col pb-24">
-          <div className="px-8 pt-6 pb-4">
-            <BackButton onClick={() => setView('chat')} />
-          </div>
+    let newIndex: number;
+    if (direction === 'next') {
+      newIndex = (searchResults.currentIndex % filteredSessions.length) + 1;
+    } else {
+      newIndex =
+        searchResults.currentIndex === 1 ? filteredSessions.length : searchResults.currentIndex - 1;
+    }

-          {/* Content Area */}
-          <div className="flex flex-col mb-6 px-8">
-            <h1 className="text-3xl font-medium text-textStandard">Previous goose sessions</h1>
-            <h3 className="text-sm text-textSubtle mt-2">
-              View previous goose sessions and their contents to pick up where you left off.
+    setSearchResults({ ...searchResults, currentIndex: newIndex });
+
+    // Find the SearchView's container element
+    const searchContainer =
+      containerRef.current?.querySelector<SearchContainerElement>('.search-container');
+    if (searchContainer?._searchHighlighter) {
+      // Update the current match in the highlighter
+      searchContainer._searchHighlighter.setCurrentMatch(newIndex - 1, true);
+    }
+  };
+
+  // Render a session item
+  const SessionItem = React.memo(function SessionItem({ session }: { session: Session }) {
+    return (
+      <Card
+        onClick={() => onSelectSession(session.id)}
+        className="p-2 mx-4 mb-2 bg-bgSecondary hover:bg-bgSubtle cursor-pointer transition-all duration-150"
+      >
+        <div className="flex justify-between items-start gap-4">
+          <div className="min-w-0 flex-1">
+            <h3 className="text-base font-medium text-textStandard truncate max-w-[50vw]">
+              {session.metadata.description || session.id}
            </h3>
+            <div className="flex gap-3 min-w-0">
+              <div className="flex items-center text-textSubtle text-sm shrink-0">
+                <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
+                <span>{formatMessageTimestamp(Date.parse(session.modified) / 1000)}</span>
+              </div>
+              <div className="flex items-center text-textSubtle text-sm min-w-0">
+                <Folder className="w-3 h-3 mr-1 flex-shrink-0" />
+                <span className="truncate">{session.metadata.working_dir}</span>
+              </div>
+            </div>
          </div>
-          <div className="flex-1 overflow-y-auto p-4">
-            {isLoading ? (
-              <div className="flex justify-center items-center h-full">
-                <LoaderCircle className="h-8 w-8 animate-spin text-textPrimary" />
-              </div>
-            ) : error ? (
-              <div className="flex flex-col items-center justify-center h-full text-textSubtle">
-                <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
-                <p className="text-lg mb-2">Error Loading Sessions</p>
-                <p className="text-sm text-center mb-4">{error}</p>
-                <Button onClick={loadSessions} variant="default">
-                  Try Again
-                </Button>
-              </div>
-            ) : sessions.length > 0 ? (
-              <div className="grid gap-2">
-                {sessions.map((session) => (
-                  <Card
-                    key={session.id}
-                    onClick={() => onSelectSession(session.id)}
-                    className="p-2 bg-bgSecondary hover:bg-bgSubtle cursor-pointer transition-all duration-150"
-                  >
-                    <div className="flex justify-between items-start gap-4">
-                      <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-textStandard truncate max-w-[50vw]">
-                          {session.metadata.description || session.id}
-                        </h3>
-                        <div className="flex gap-3 min-w-0">
-                          <div className="flex items-center text-textSubtle text-sm shrink-0">
-                            <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
-                            <span>
-                              {formatMessageTimestamp(Date.parse(session.modified) / 1000)}
-                            </span>
-                          </div>
-                          <div className="flex items-center text-textSubtle text-sm min-w-0">
-                            <Folder className="w-3 h-3 mr-1 flex-shrink-0" />
-                            <span className="truncate">{session.metadata.working_dir}</span>
-                          </div>
-                        </div>
-                      </div>

-                      <div className="flex items-center gap-3 shrink-0">
-                        <div className="flex flex-col items-end">
-                          <div className="flex items-center text-sm text-textSubtle">
-                            <span>{session.path.split('/').pop() || session.path}</span>
-                          </div>
-                          <div className="flex items-center mt-1 space-x-3 text-sm text-textSubtle">
-                            <div className="flex items-center">
-                              <MessageSquareText className="w-3 h-3 mr-1" />
-                              <span>{session.metadata.message_count}</span>
-                            </div>
-                            {session.metadata.total_tokens !== null && (
-                              <div className="flex items-center">
-                                <Target className="w-3 h-3 mr-1" />
-                                <span>{session.metadata.total_tokens.toLocaleString()}</span>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                        <ChevronRight className="w-8 h-5 text-textSubtle" />
-                      </div>
-                    </div>
-                  </Card>
-                ))}
+          <div className="flex items-center gap-3 shrink-0">
+            <div className="flex flex-col items-end">
+              <div className="flex items-center text-sm text-textSubtle">
+                <span>{session.path.split('/').pop() || session.path}</span>
              </div>
-            ) : (
-              <div className="flex flex-col items-center justify-center h-full text-textSubtle">
-                <MessageSquareText className="h-12 w-12 mb-4" />
-                <p className="text-lg mb-2">No chat sessions found</p>
-                <p className="text-sm">Your chat history will appear here</p>
+              <div className="flex items-center mt-1 space-x-3 text-sm text-textSubtle">
+                <div className="flex items-center">
+                  <MessageSquareText className="w-3 h-3 mr-1" />
+                  <span>{session.metadata.message_count}</span>
+                </div>
+                {session.metadata.total_tokens !== null && (
+                  <div className="flex items-center">
+                    <Target className="w-3 h-3 mr-1" />
+                    <span>{session.metadata.total_tokens.toLocaleString()}</span>
+                  </div>
+                )}
              </div>
-            )}
+            </div>
+            <ChevronRight className="w-8 h-5 text-textSubtle" />
          </div>
        </div>
-      </ScrollArea>
+      </Card>
+    );
+  });
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex justify-center items-center h-full">
+          <LoaderCircle className="h-8 w-8 animate-spin text-textPrimary" />
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full text-textSubtle">
+          <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
+          <p className="text-lg mb-2">Error Loading Sessions</p>
+          <p className="text-sm text-center mb-4">{error}</p>
+          <Button onClick={loadSessions} variant="default">
+            Try Again
+          </Button>
+        </div>
+      );
+    }
+
+    if (filteredSessions.length === 0) {
+      if (searchResults === null && sessions.length > 0) {
+        return (
+          <div className="flex flex-col items-center justify-center h-full text-textSubtle mt-4">
+            <MessageSquareText className="h-12 w-12 mb-4" />
+            <p className="text-lg mb-2">No matching sessions found</p>
+            <p className="text-sm">Try adjusting your search terms</p>
+          </div>
+        );
+      }
+      return (
+        <div className="flex flex-col items-center justify-center h-full text-textSubtle">
+          <MessageSquareText className="h-12 w-12 mb-4" />
+          <p className="text-lg mb-2">No chat sessions found</p>
+          <p className="text-sm">Your chat history will appear here</p>
+        </div>
+      );
+    }
+
+    const visibleSessions = filteredSessions.slice(visibleRange.start, visibleRange.end);
+
+    return (
+      <div style={{ height: filteredSessions.length * ITEM_HEIGHT }} className="relative">
+        <div
+          style={{
+            position: 'absolute',
+            top: visibleRange.start * ITEM_HEIGHT,
+            width: '100%',
+          }}
+        >
+          {visibleSessions.map((session) => (
+            <SessionItem key={session.id} session={session} />
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-screen w-full flex flex-col">
+      <MoreMenuLayout showMenu={false} />
+
+      <div className="flex-1 flex flex-col min-h-0">
+        <div className="px-8 pt-6 pb-4">
+          <BackButton onClick={() => setView('chat')} />
+        </div>
+
+        {/* Content Area */}
+        <div className="flex flex-col mb-6 px-8">
+          <h1 className="text-3xl font-medium text-textStandard">Previous goose sessions</h1>
+          <h3 className="text-sm text-textSubtle mt-2">
+            View previous goose sessions and their contents to pick up where you left off.
+          </h3>
+        </div>
+
+        <div className="flex-1 min-h-0 relative">
+          <ScrollArea className="h-full" data-search-scroll-area>
+            <div ref={containerRef} className="h-full relative">
+              <SearchView
+                onSearch={handleSearch}
+                onNavigate={handleSearchNavigation}
+                searchResults={searchResults}
+                className="relative"
+              >
+                {renderContent()}
+              </SearchView>
+            </div>
+          </ScrollArea>
+        </div>
+      </div>
    </div>
  );
 };
@@ -21,7 +21,7 @@ const SharedSessionView: React.FC<SharedSessionViewProps> = ({
 }) => {
  return (
    <div className="h-screen w-full flex flex-col">
-      <div className="relative flex items-center h-[36px] w-full"></div>
+      <div className="relative flex items-center h-14 w-full"></div>

      {/* Top Row - back, info (fixed) */}
      <SessionHeaderCard onBack={onBack}>