@google/gemini-cli 0.19.0-nightly.20251121.5982abeff → 0.19.0-nightly.20251123.dadd606c0

package/dist/src/ui/components/QuittingDisplay.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { render } from '../../test-utils/render.js';
+import { QuittingDisplay } from './QuittingDisplay.js';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { useUIState } from '../contexts/UIStateContext.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+vi.mock('../contexts/UIStateContext.js');
+vi.mock('../hooks/useTerminalSize.js');
+vi.mock('./HistoryItemDisplay.js', async () => {
+    const { Text } = await vi.importActual('ink');
+    return {
+        HistoryItemDisplay: ({ item }) => React.createElement(Text, null, item.content),
+    };
+});
+describe('QuittingDisplay', () => {
+    const mockUseUIState = vi.mocked(useUIState);
+    const mockUseTerminalSize = vi.mocked(useTerminalSize);
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockUseTerminalSize.mockReturnValue({ rows: 20, columns: 80 });
+    });
+    it('renders nothing when no quitting messages', () => {
+        mockUseUIState.mockReturnValue({
+            quittingMessages: null,
+        });
+        const { lastFrame } = render(_jsx(QuittingDisplay, {}));
+        expect(lastFrame()).toBe('');
+    });
+    it('renders quitting messages', () => {
+        const mockMessages = [
+            { id: '1', type: 'user', content: 'Goodbye' },
+            { id: '2', type: 'model', content: 'See you later' },
+        ];
+        mockUseUIState.mockReturnValue({
+            quittingMessages: mockMessages,
+            constrainHeight: false,
+        });
+        const { lastFrame } = render(_jsx(QuittingDisplay, {}));
+        expect(lastFrame()).toContain('Goodbye');
+        expect(lastFrame()).toContain('See you later');
+    });
+});
+//# sourceMappingURL=QuittingDisplay.test.js.map

package/dist/src/ui/components/QuittingDisplay.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuittingDisplay.test.js","sourceRoot":"","sources":["../../../../src/ui/components/QuittingDisplay.test.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgB,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,EAAE,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;AACzC,EAAE,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;AACvC,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO;QACL,kBAAkB,EAAE,CAAC,EAAE,IAAI,EAAiC,EAAE,EAAE,CAC9D,KAAK,CAAC,aAAa,CAAC,IAA2B,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC;KACvE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,MAAM,cAAc,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,mBAAmB,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;IAEvD,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,CAAC,aAAa,EAAE,CAAC;QACnB,mBAAmB,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACnD,cAAc,CAAC,eAAe,CAAC;YAC7B,gBAAgB,EAAE,IAAI;SACD,CAAC,CAAC;QACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,eAAe,KAAG,CAAC,CAAC;QAClD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,YAAY,GAAG;YACnB,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;YAC7C,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE;SACrD,CAAC;QACF,cAAc,CAAC,eAAe,CAAC;YAC7B,gBAAgB,EAAE,YAAY;YAC9B,eAAe,EAAE,KAAK;SACD,CAAC,CAAC;QACzB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,eAAe,KAAG,CAAC,CAAC;QAClD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/src/ui/components/RawMarkdownIndicator.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};

package/dist/src/ui/components/RawMarkdownIndicator.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { render } from '../../test-utils/render.js';
+import { RawMarkdownIndicator } from './RawMarkdownIndicator.js';
+import { describe, it, expect, afterEach } from 'vitest';
+describe('RawMarkdownIndicator', () => {
+    const originalPlatform = process.platform;
+    afterEach(() => {
+        Object.defineProperty(process, 'platform', {
+            value: originalPlatform,
+        });
+    });
+    it('renders correct key binding for darwin', () => {
+        Object.defineProperty(process, 'platform', {
+            value: 'darwin',
+        });
+        const { lastFrame } = render(_jsx(RawMarkdownIndicator, {}));
+        expect(lastFrame()).toContain('raw markdown mode');
+        expect(lastFrame()).toContain('option+m to toggle');
+    });
+    it('renders correct key binding for other platforms', () => {
+        Object.defineProperty(process, 'platform', {
+            value: 'linux',
+        });
+        const { lastFrame } = render(_jsx(RawMarkdownIndicator, {}));
+        expect(lastFrame()).toContain('raw markdown mode');
+        expect(lastFrame()).toContain('alt+m to toggle');
+    });
+});
+//# sourceMappingURL=RawMarkdownIndicator.test.js.map

package/dist/src/ui/components/RawMarkdownIndicator.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RawMarkdownIndicator.test.js","sourceRoot":"","sources":["../../../../src/ui/components/RawMarkdownIndicator.test.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzD,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,MAAM,gBAAgB,GAAG,OAAO,CAAC,QAAQ,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE;YACzC,KAAK,EAAE,gBAAgB;SACxB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE;YACzC,KAAK,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC;QACvD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;QACnD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,GAAG,EAAE;QACzD,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE;YACzC,KAAK,EAAE,OAAO;SACf,CAAC,CAAC;QACH,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,oBAAoB,KAAG,CAAC,CAAC;QACvD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;QACnD,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/src/ui/components/SessionBrowser.d.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type React from 'react';
+import type { Config } from '@google/gemini-cli-core';
+import type { SessionInfo } from '../../utils/sessionUtils.js';
+/**
+ * Props for the main SessionBrowser component.
+ */
+export interface SessionBrowserProps {
+    /** Application configuration object */
+    config: Config;
+    /** Callback when user selects a session to resume */
+    onResumeSession: (session: SessionInfo) => void;
+    /** Callback when user deletes a session */
+    onDeleteSession?: (session: SessionInfo) => void;
+    /** Callback when user exits the session browser */
+    onExit: () => void;
+}
+/**
+ * Centralized state interface for SessionBrowser component.
+ * Eliminates prop drilling by providing all state in a single object.
+ */
+export interface SessionBrowserState {
+    /** All loaded sessions */
+    sessions: SessionInfo[];
+    /** Sessions after filtering and sorting */
+    filteredAndSortedSessions: SessionInfo[];
+    /** Whether sessions are currently loading */
+    loading: boolean;
+    /** Error message if loading failed */
+    error: string | null;
+    /** Index of currently selected session */
+    activeIndex: number;
+    /** Current scroll offset for pagination */
+    scrollOffset: number;
+    /** Terminal width for layout calculations */
+    terminalWidth: number;
+    /** Current search query string */
+    searchQuery: string;
+    /** Whether user is in search input mode */
+    isSearchMode: boolean;
+    /** Whether full content has been loaded for search */
+    hasLoadedFullContent: boolean;
+    /** Current sort criteria */
+    sortOrder: 'date' | 'messages' | 'name';
+    /** Whether sort order is reversed */
+    sortReverse: boolean;
+    /** Total number of filtered sessions */
+    totalSessions: number;
+    /** Start index for current page */
+    startIndex: number;
+    /** End index for current page */
+    endIndex: number;
+    /** Sessions visible on current page */
+    visibleSessions: SessionInfo[];
+    /** Update sessions array */
+    setSessions: React.Dispatch<React.SetStateAction<SessionInfo[]>>;
+    /** Update loading state */
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Update error state */
+    setError: React.Dispatch<React.SetStateAction<string | null>>;
+    /** Update active session index */
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+    /** Update scroll offset */
+    setScrollOffset: React.Dispatch<React.SetStateAction<number>>;
+    /** Update search query */
+    setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
+    /** Update search mode state */
+    setIsSearchMode: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Update sort order */
+    setSortOrder: React.Dispatch<React.SetStateAction<'date' | 'messages' | 'name'>>;
+    /** Update sort reverse flag */
+    setSortReverse: React.Dispatch<React.SetStateAction<boolean>>;
+    setHasLoadedFullContent: React.Dispatch<React.SetStateAction<boolean>>;
+}
+/**
+ * Hook to manage all SessionBrowser state.
+ */
+export declare const useSessionBrowserState: (initialSessions?: SessionInfo[], initialLoading?: boolean, initialError?: string | null) => SessionBrowserState;
+/**
+ * Hook to handle selection movement.
+ */
+export declare const useMoveSelection: (state: SessionBrowserState) => (delta: number) => void;
+/**
+ * Hook to handle sort order cycling.
+ */
+export declare const useCycleSortOrder: (state: SessionBrowserState) => () => void;
+/**
+ * Hook to handle SessionBrowser input.
+ */
+export declare const useSessionBrowserInput: (state: SessionBrowserState, moveSelection: (delta: number) => void, cycleSortOrder: () => void, onResumeSession: (session: SessionInfo) => void, onDeleteSession: ((session: SessionInfo) => void) | undefined, onExit: () => void) => void;
+export declare function SessionBrowserView({ state, }: {
+    state: SessionBrowserState;
+}): React.JSX.Element;
+export declare function SessionBrowser({ config, onResumeSession, onDeleteSession, onExit, }: SessionBrowserProps): React.JSX.Element;

package/dist/src/ui/components/SessionBrowser.js

@@ -0,0 +1,457 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { useKeypress } from '../hooks/useKeypress.js';
+import path from 'node:path';
+import { cleanMessage, formatRelativeTime, getSessionFiles, } from '../../utils/sessionUtils.js';
+const SESSIONS_PER_PAGE = 20;
+// Approximate total width reserved for non-message columns and separators
+// (prefix, index, message count, age, pipes, and padding) in a session row.
+// If the SessionItem layout changes, update this accordingly.
+const FIXED_SESSION_COLUMNS_WIDTH = 30;
+const Kbd = ({ name, shortcut }) => (_jsxs(_Fragment, { children: [name, ": ", _jsx(Text, { bold: true, children: shortcut })] }));
+/**
+ * Loading state component displayed while sessions are being loaded.
+ */
+const SessionBrowserLoading = () => (_jsx(Box, { flexDirection: "column", paddingX: 1, children: _jsx(Text, { color: Colors.Gray, children: "Loading sessions\u2026" }) }));
+/**
+ * Error state component displayed when session loading fails.
+ */
+const SessionBrowserError = ({ state, }) => (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { color: Colors.AccentRed, children: ["Error: ", state.error] }), _jsx(Text, { color: Colors.Gray, children: "Press q to exit" })] }));
+/**
+ * Empty state component displayed when no sessions are found.
+ */
+const SessionBrowserEmpty = () => (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: Colors.Gray, children: "No auto-saved conversations found." }), _jsx(Text, { color: Colors.Gray, children: "Press q to exit" })] }));
+/**
+ * Sorts an array of sessions by the specified criteria.
+ * @param sessions - Array of sessions to sort
+ * @param sortBy - Sort criteria: 'date' (lastUpdated), 'messages' (messageCount), or 'name' (displayName)
+ * @param reverse - Whether to reverse the sort order (ascending instead of descending)
+ * @returns New sorted array of sessions
+ */
+const sortSessions = (sessions, sortBy, reverse) => {
+    const sorted = [...sessions].sort((a, b) => {
+        switch (sortBy) {
+            case 'date':
+                return (new Date(b.lastUpdated).getTime() - new Date(a.lastUpdated).getTime());
+            case 'messages':
+                return b.messageCount - a.messageCount;
+            case 'name':
+                return a.displayName.localeCompare(b.displayName);
+            default:
+                return 0;
+        }
+    });
+    return reverse ? sorted.reverse() : sorted;
+};
+/**
+ * Finds all text matches for a search query within conversation messages.
+ * Creates TextMatch objects with context (10 chars before/after) and role information.
+ * @param messages - Array of messages to search through
+ * @param query - Search query string (case-insensitive)
+ * @returns Array of TextMatch objects containing match context and metadata
+ */
+const findTextMatches = (messages, query) => {
+    if (!query.trim())
+        return [];
+    const lowerQuery = query.toLowerCase();
+    const matches = [];
+    for (const message of messages) {
+        const m = cleanMessage(message.content);
+        const lowerContent = m.toLowerCase();
+        let startIndex = 0;
+        while (true) {
+            const matchIndex = lowerContent.indexOf(lowerQuery, startIndex);
+            if (matchIndex === -1)
+                break;
+            const contextStart = Math.max(0, matchIndex - 10);
+            const contextEnd = Math.min(m.length, matchIndex + query.length + 10);
+            const snippet = m.slice(contextStart, contextEnd);
+            const relativeMatchStart = matchIndex - contextStart;
+            const relativeMatchEnd = relativeMatchStart + query.length;
+            let before = snippet.slice(0, relativeMatchStart);
+            const match = snippet.slice(relativeMatchStart, relativeMatchEnd);
+            let after = snippet.slice(relativeMatchEnd);
+            if (contextStart > 0)
+                before = '…' + before;
+            if (contextEnd < m.length)
+                after = after + '…';
+            matches.push({ before, match, after, role: message.role });
+            startIndex = matchIndex + 1;
+        }
+    }
+    return matches;
+};
+/**
+ * Filters sessions based on a search query, checking titles, IDs, and full content.
+ * Also populates matchSnippets and matchCount for sessions with content matches.
+ * @param sessions - Array of sessions to filter
+ * @param query - Search query string (case-insensitive)
+ * @returns Filtered array of sessions that match the query
+ */
+const filterSessions = (sessions, query) => {
+    if (!query.trim()) {
+        return sessions.map((session) => ({
+            ...session,
+            matchSnippets: undefined,
+            matchCount: undefined,
+        }));
+    }
+    const lowerQuery = query.toLowerCase();
+    return sessions.filter((session) => {
+        const titleMatch = session.displayName.toLowerCase().includes(lowerQuery) ||
+            session.id.toLowerCase().includes(lowerQuery) ||
+            session.firstUserMessage.toLowerCase().includes(lowerQuery);
+        const contentMatch = session.fullContent
+            ?.toLowerCase()
+            .includes(lowerQuery);
+        if (titleMatch || contentMatch) {
+            if (session.messages) {
+                session.matchSnippets = findTextMatches(session.messages, query);
+                session.matchCount = session.matchSnippets.length;
+            }
+            return true;
+        }
+        return false;
+    });
+};
+/**
+ * Search input display component.
+ */
+const SearchModeDisplay = ({ state, }) => (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: Colors.Gray, children: "Search: " }), _jsx(Text, { color: Colors.AccentPurple, children: state.searchQuery }), _jsx(Text, { color: Colors.Gray, children: " (Esc to cancel)" })] }));
+/**
+ * Header component showing session count and sort information.
+ */
+const SessionListHeader = ({ state, }) => (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Text, { color: Colors.AccentPurple, children: ["Chat Sessions (", state.totalSessions, " total", state.searchQuery ? `, filtered` : '', ")"] }), _jsxs(Text, { color: Colors.Gray, children: ["sorted by ", state.sortOrder, " ", state.sortReverse ? 'asc' : 'desc'] })] }));
+/**
+ * Navigation help component showing keyboard shortcuts.
+ */
+const NavigationHelp = () => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: Colors.Gray, children: [_jsx(Kbd, { name: "Navigate", shortcut: "\u2191/\u2193" }), '   ', _jsx(Kbd, { name: "Resume", shortcut: "Enter" }), '   ', _jsx(Kbd, { name: "Search", shortcut: "/" }), '   ', _jsx(Kbd, { name: "Delete", shortcut: "x" }), '   ', _jsx(Kbd, { name: "Quit", shortcut: "q" })] }), _jsxs(Text, { color: Colors.Gray, children: [_jsx(Kbd, { name: "Sort", shortcut: "s" }), '         ', _jsx(Kbd, { name: "Reverse", shortcut: "r" }), '      ', _jsx(Kbd, { name: "First/Last", shortcut: "g/G" })] })] }));
+/**
+ * Table header component with column labels and scroll indicators.
+ */
+const SessionTableHeader = ({ state, }) => (_jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { children: state.scrollOffset > 0 ? _jsx(Text, { children: "\u25B2 " }) : '  ' }), _jsx(Box, { width: 5, flexShrink: 0, children: _jsx(Text, { color: Colors.Gray, bold: true, children: "Index" }) }), _jsx(Text, { color: Colors.Gray, children: " \u2502 " }), _jsx(Box, { width: 4, flexShrink: 0, children: _jsx(Text, { color: Colors.Gray, bold: true, children: "Msgs" }) }), _jsx(Text, { color: Colors.Gray, children: " \u2502 " }), _jsx(Box, { width: 4, flexShrink: 0, children: _jsx(Text, { color: Colors.Gray, bold: true, children: "Age" }) }), _jsx(Text, { color: Colors.Gray, children: " \u2502 " }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: Colors.Gray, bold: true, children: state.searchQuery ? 'Match' : 'Name' }) })] }));
+/**
+ * No results display component for empty search results.
+ */
+const NoResultsDisplay = ({ state, }) => (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: Colors.Gray, dimColor: true, children: ["No sessions found matching '", state.searchQuery, "'."] }) }));
+/**
+ * Match snippet display component for search results.
+ */
+const MatchSnippetDisplay = ({ session, textColor, }) => {
+    if (!session.matchSnippets || session.matchSnippets.length === 0) {
+        return null;
+    }
+    const firstMatch = session.matchSnippets[0];
+    const rolePrefix = firstMatch.role === 'user' ? 'You:   ' : 'Gemini:';
+    const roleColor = textColor(firstMatch.role === 'user' ? Colors.AccentGreen : Colors.AccentBlue);
+    return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: roleColor, bold: true, children: [rolePrefix, ' '] }), firstMatch.before, _jsx(Text, { color: textColor(Colors.AccentRed), bold: true, children: firstMatch.match }), firstMatch.after] }));
+};
+/**
+ * Individual session row component.
+ */
+const SessionItem = ({ session, state, terminalWidth, formatRelativeTime, }) => {
+    const originalIndex = state.startIndex + state.visibleSessions.indexOf(session);
+    const isActive = originalIndex === state.activeIndex;
+    const isDisabled = session.isCurrentSession;
+    const textColor = (c = Colors.Foreground) => {
+        if (isDisabled) {
+            return Colors.Gray;
+        }
+        return isActive ? Colors.AccentPurple : c;
+    };
+    const prefix = isActive ? '❯ ' : '  ';
+    let additionalInfo = '';
+    let matchDisplay = null;
+    // Add "(current)" label for the current session
+    if (session.isCurrentSession) {
+        additionalInfo = ' (current)';
+    }
+    // Show match snippets if searching and matches exist
+    if (state.searchQuery &&
+        session.matchSnippets &&
+        session.matchSnippets.length > 0) {
+        matchDisplay = (_jsx(MatchSnippetDisplay, { session: session, textColor: textColor }));
+        if (session.matchCount && session.matchCount > 1) {
+            additionalInfo += ` (+${session.matchCount - 1} more)`;
+        }
+    }
+    const availableMessageWidth = Math.max(20, terminalWidth - FIXED_SESSION_COLUMNS_WIDTH);
+    const truncatedMessage = matchDisplay ||
+        (session.displayName.length === 0 ? (_jsx(Text, { color: textColor(Colors.Gray), dimColor: true, children: "(No messages)" })) : session.displayName.length > availableMessageWidth ? (session.displayName.slice(0, availableMessageWidth - 1) + '…') : (session.displayName));
+    return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: textColor(), dimColor: isDisabled, children: prefix }), _jsx(Box, { width: 5, children: _jsxs(Text, { color: textColor(), dimColor: isDisabled, children: ["#", originalIndex + 1] }) }), _jsxs(Text, { color: textColor(Colors.Gray), dimColor: isDisabled, children: [' ', "\u2502", ' '] }), _jsx(Box, { width: 4, children: _jsx(Text, { color: textColor(), dimColor: isDisabled, children: session.messageCount }) }), _jsxs(Text, { color: textColor(Colors.Gray), dimColor: isDisabled, children: [' ', "\u2502", ' '] }), _jsx(Box, { width: 4, children: _jsx(Text, { color: textColor(), dimColor: isDisabled, children: formatRelativeTime(session.lastUpdated, 'short') }) }), _jsxs(Text, { color: textColor(Colors.Gray), dimColor: isDisabled, children: [' ', "\u2502", ' '] }), _jsx(Box, { flexGrow: 1, children: _jsxs(Text, { color: textColor(Colors.Comment), dimColor: isDisabled, children: [truncatedMessage, additionalInfo && (_jsx(Text, { color: textColor(Colors.Gray), dimColor: true, bold: false, children: additionalInfo }))] }) })] }));
+};
+/**
+ * Session list container component.
+ */
+const SessionList = ({ state, formatRelativeTime, }) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", children: [!state.isSearchMode && _jsx(NavigationHelp, {}), _jsx(SessionTableHeader, { state: state })] }), state.visibleSessions.map((session) => (_jsx(SessionItem, { session: session, state: state, terminalWidth: state.terminalWidth, formatRelativeTime: formatRelativeTime }, session.id))), _jsx(Text, { color: Colors.Gray, children: state.endIndex < state.totalSessions ? _jsx(_Fragment, { children: "\u25BC" }) : _jsx(Text, { dimColor: true, children: "\u25BC" }) })] }));
+/**
+ * Hook to manage all SessionBrowser state.
+ */
+export const useSessionBrowserState = (initialSessions = [], initialLoading = true, initialError = null) => {
+    const { columns: terminalWidth } = useTerminalSize();
+    const [sessions, setSessions] = useState(initialSessions);
+    const [loading, setLoading] = useState(initialLoading);
+    const [error, setError] = useState(initialError);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [sortOrder, setSortOrder] = useState('date');
+    const [sortReverse, setSortReverse] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isSearchMode, setIsSearchMode] = useState(false);
+    const [hasLoadedFullContent, setHasLoadedFullContent] = useState(false);
+    const loadingFullContentRef = useRef(false);
+    const filteredAndSortedSessions = useMemo(() => {
+        const filtered = filterSessions(sessions, searchQuery);
+        return sortSessions(filtered, sortOrder, sortReverse);
+    }, [sessions, searchQuery, sortOrder, sortReverse]);
+    // Reset full content flag when search is cleared
+    useEffect(() => {
+        if (!searchQuery) {
+            setHasLoadedFullContent(false);
+            loadingFullContentRef.current = false;
+        }
+    }, [searchQuery]);
+    const totalSessions = filteredAndSortedSessions.length;
+    const startIndex = scrollOffset;
+    const endIndex = Math.min(scrollOffset + SESSIONS_PER_PAGE, totalSessions);
+    const visibleSessions = filteredAndSortedSessions.slice(startIndex, endIndex);
+    const state = {
+        sessions,
+        setSessions,
+        loading,
+        setLoading,
+        error,
+        setError,
+        activeIndex,
+        setActiveIndex,
+        scrollOffset,
+        setScrollOffset,
+        searchQuery,
+        setSearchQuery,
+        isSearchMode,
+        setIsSearchMode,
+        hasLoadedFullContent,
+        setHasLoadedFullContent,
+        sortOrder,
+        setSortOrder,
+        sortReverse,
+        setSortReverse,
+        terminalWidth,
+        filteredAndSortedSessions,
+        totalSessions,
+        startIndex,
+        endIndex,
+        visibleSessions,
+    };
+    return state;
+};
+/**
+ * Hook to load sessions on mount.
+ */
+const useLoadSessions = (config, state) => {
+    const { setSessions, setLoading, setError, isSearchMode, hasLoadedFullContent, setHasLoadedFullContent, } = state;
+    useEffect(() => {
+        const loadSessions = async () => {
+            try {
+                const chatsDir = path.join(config.storage.getProjectTempDir(), 'chats');
+                const sessionData = await getSessionFiles(chatsDir, config.getSessionId());
+                setSessions(sessionData);
+                setLoading(false);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to load sessions');
+                setLoading(false);
+            }
+        };
+        loadSessions();
+    }, [config, setSessions, setLoading, setError]);
+    useEffect(() => {
+        const loadFullContent = async () => {
+            if (isSearchMode && !hasLoadedFullContent) {
+                try {
+                    const chatsDir = path.join(config.storage.getProjectTempDir(), 'chats');
+                    const sessionData = await getSessionFiles(chatsDir, config.getSessionId(), { includeFullContent: true });
+                    setSessions(sessionData);
+                    setHasLoadedFullContent(true);
+                }
+                catch (err) {
+                    setError(err instanceof Error
+                        ? err.message
+                        : 'Failed to load full session content');
+                }
+            }
+        };
+        loadFullContent();
+    }, [
+        isSearchMode,
+        hasLoadedFullContent,
+        config,
+        setSessions,
+        setHasLoadedFullContent,
+        setError,
+    ]);
+};
+/**
+ * Hook to handle selection movement.
+ */
+export const useMoveSelection = (state) => {
+    const { totalSessions, activeIndex, scrollOffset, setActiveIndex, setScrollOffset, } = state;
+    return useCallback((delta) => {
+        const newIndex = Math.max(0, Math.min(totalSessions - 1, activeIndex + delta));
+        setActiveIndex(newIndex);
+        // Adjust scroll offset if needed
+        if (newIndex < scrollOffset) {
+            setScrollOffset(newIndex);
+        }
+        else if (newIndex >= scrollOffset + SESSIONS_PER_PAGE) {
+            setScrollOffset(newIndex - SESSIONS_PER_PAGE + 1);
+        }
+    }, [totalSessions, activeIndex, scrollOffset, setActiveIndex, setScrollOffset]);
+};
+/**
+ * Hook to handle sort order cycling.
+ */
+export const useCycleSortOrder = (state) => {
+    const { sortOrder, setSortOrder } = state;
+    return useCallback(() => {
+        const orders = [
+            'date',
+            'messages',
+            'name',
+        ];
+        const currentIndex = orders.indexOf(sortOrder);
+        const nextIndex = (currentIndex + 1) % orders.length;
+        setSortOrder(orders[nextIndex]);
+    }, [sortOrder, setSortOrder]);
+};
+/**
+ * Hook to handle SessionBrowser input.
+ */
+export const useSessionBrowserInput = (state, moveSelection, cycleSortOrder, onResumeSession, onDeleteSession, onExit) => {
+    useKeypress((key) => {
+        if (state.isSearchMode) {
+            // Search-specific input handling.  Only control/symbols here.
+            if (key.name === 'escape') {
+                state.setIsSearchMode(false);
+                state.setSearchQuery('');
+                state.setActiveIndex(0);
+                state.setScrollOffset(0);
+            }
+            else if (key.name === 'backspace') {
+                state.setSearchQuery((prev) => prev.slice(0, -1));
+                state.setActiveIndex(0);
+                state.setScrollOffset(0);
+            }
+            else if (key.sequence &&
+                !key.ctrl &&
+                !key.meta &&
+                key.sequence.length === 1) {
+                state.setSearchQuery((prev) => prev + key.sequence);
+                state.setActiveIndex(0);
+                state.setScrollOffset(0);
+            }
+        }
+        else {
+            // Navigation mode input handling.  We're keeping the letter-based controls for non-search
+            // mode only, because the letters need to act as input for the search.
+            if (key.sequence === 'g') {
+                state.setActiveIndex(0);
+                state.setScrollOffset(0);
+            }
+            else if (key.sequence === 'G') {
+                state.setActiveIndex(state.totalSessions - 1);
+                state.setScrollOffset(Math.max(0, state.totalSessions - SESSIONS_PER_PAGE));
+            }
+            // Sorting controls.
+            else if (key.sequence === 's') {
+                cycleSortOrder();
+            }
+            else if (key.sequence === 'r') {
+                state.setSortReverse(!state.sortReverse);
+            }
+            // Searching and exit controls.
+            else if (key.sequence === '/') {
+                state.setIsSearchMode(true);
+            }
+            else if (key.sequence === 'q' ||
+                key.sequence === 'Q' ||
+                key.name === 'escape') {
+                onExit();
+            }
+            // Delete session control.
+            else if (key.sequence === 'x' || key.sequence === 'X') {
+                const selectedSession = state.filteredAndSortedSessions[state.activeIndex];
+                if (selectedSession &&
+                    !selectedSession.isCurrentSession &&
+                    onDeleteSession) {
+                    try {
+                        onDeleteSession(selectedSession);
+                        // Remove the session from the state
+                        state.setSessions(state.sessions.filter((s) => s.id !== selectedSession.id));
+                        // Adjust active index if needed
+                        if (state.activeIndex >=
+                            state.filteredAndSortedSessions.length - 1) {
+                            state.setActiveIndex(Math.max(0, state.filteredAndSortedSessions.length - 2));
+                        }
+                    }
+                    catch (error) {
+                        state.setError(`Failed to delete session: ${error instanceof Error ? error.message : 'Unknown error'}`);
+                    }
+                }
+            }
+            // less-like u/d controls.
+            else if (key.sequence === 'd') {
+                moveSelection(-Math.round(SESSIONS_PER_PAGE / 2));
+            }
+            else if (key.sequence === 'u') {
+                moveSelection(Math.round(SESSIONS_PER_PAGE / 2));
+            }
+        }
+        // Handling regardless of search mode.
+        if (key.name === 'return' &&
+            state.filteredAndSortedSessions[state.activeIndex]) {
+            const selectedSession = state.filteredAndSortedSessions[state.activeIndex];
+            // Don't allow resuming the current session
+            if (!selectedSession.isCurrentSession) {
+                onResumeSession(selectedSession);
+            }
+        }
+        else if (key.name === 'up') {
+            moveSelection(-1);
+        }
+        else if (key.name === 'down') {
+            moveSelection(1);
+        }
+        else if (key.name === 'pageup') {
+            moveSelection(-SESSIONS_PER_PAGE);
+        }
+        else if (key.name === 'pagedown') {
+            moveSelection(SESSIONS_PER_PAGE);
+        }
+    }, { isActive: true });
+};
+export function SessionBrowserView({ state, }) {
+    if (state.loading) {
+        return _jsx(SessionBrowserLoading, {});
+    }
+    if (state.error) {
+        return _jsx(SessionBrowserError, { state: state });
+    }
+    if (state.sessions.length === 0) {
+        return _jsx(SessionBrowserEmpty, {});
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(SessionListHeader, { state: state }), state.isSearchMode && _jsx(SearchModeDisplay, { state: state }), state.totalSessions === 0 ? (_jsx(NoResultsDisplay, { state: state })) : (_jsx(SessionList, { state: state, formatRelativeTime: formatRelativeTime }))] }));
+}
+export function SessionBrowser({ config, onResumeSession, onDeleteSession, onExit, }) {
+    // Use all our custom hooks
+    const state = useSessionBrowserState();
+    useLoadSessions(config, state);
+    const moveSelection = useMoveSelection(state);
+    const cycleSortOrder = useCycleSortOrder(state);
+    useSessionBrowserInput(state, moveSelection, cycleSortOrder, onResumeSession, onDeleteSession, onExit);
+    return _jsx(SessionBrowserView, { state: state });
+}
+//# sourceMappingURL=SessionBrowser.js.map