snow-ai 0.3.16 → 0.3.18

package/dist/ui/components/AgentPickerPanel.js

@@ -0,0 +1,74 @@
+import React, { memo, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { Alert } from '@inkjs/ui';
+import { getSubAgents } from '../../utils/subAgentConfig.js';
+const AgentPickerPanel = memo(({ selectedIndex, visible, maxHeight }) => {
+    // Fixed maximum display items to prevent rendering issues
+    const MAX_DISPLAY_ITEMS = 5;
+    const effectiveMaxItems = maxHeight
+        ? Math.min(maxHeight, MAX_DISPLAY_ITEMS)
+        : MAX_DISPLAY_ITEMS;
+    // Load sub-agents
+    const agents = useMemo(() => getSubAgents(), []);
+    // Limit displayed agents
+    const displayedAgents = useMemo(() => {
+        if (agents.length <= effectiveMaxItems) {
+            return agents;
+        }
+        // Show agents around the selected index
+        const halfWindow = Math.floor(effectiveMaxItems / 2);
+        let startIndex = Math.max(0, selectedIndex - halfWindow);
+        let endIndex = Math.min(agents.length, startIndex + effectiveMaxItems);
+        // Adjust if we're near the end
+        if (endIndex - startIndex < effectiveMaxItems) {
+            startIndex = Math.max(0, endIndex - effectiveMaxItems);
+        }
+        return agents.slice(startIndex, endIndex);
+    }, [agents, selectedIndex, effectiveMaxItems]);
+    // Calculate actual selected index in the displayed subset
+    const displayedSelectedIndex = useMemo(() => {
+        return displayedAgents.findIndex(agent => {
+            const originalIndex = agents.indexOf(agent);
+            return originalIndex === selectedIndex;
+        });
+    }, [displayedAgents, agents, selectedIndex]);
+    // Don't show panel if not visible
+    if (!visible) {
+        return null;
+    }
+    // Show message if no agents configured
+    if (agents.length === 0) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, { width: "100%" },
+                React.createElement(Box, { flexDirection: "column", width: "100%" },
+                    React.createElement(Box, null,
+                        React.createElement(Text, { color: "yellow", bold: true }, "Sub-Agent Selection")),
+                    React.createElement(Box, { marginTop: 1 },
+                        React.createElement(Alert, { variant: "warning" }, "No sub-agents configured. Please configure sub-agents first."))))));
+    }
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Box, { width: "100%" },
+            React.createElement(Box, { flexDirection: "column", width: "100%" },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: "yellow", bold: true },
+                        "Select Sub-Agent",
+                        ' ',
+                        agents.length > effectiveMaxItems &&
+                            `(${selectedIndex + 1}/${agents.length})`)),
+                displayedAgents.map((agent, index) => (React.createElement(Box, { key: agent.id, flexDirection: "column", width: "100%" },
+                    React.createElement(Text, { color: index === displayedSelectedIndex ? 'green' : 'gray', bold: true },
+                        index === displayedSelectedIndex ? '❯ ' : '  ',
+                        "#",
+                        agent.name),
+                    React.createElement(Box, { marginLeft: 3 },
+                        React.createElement(Text, { color: index === displayedSelectedIndex ? 'green' : 'gray', dimColor: true },
+                            "\u2514\u2500 ",
+                            agent.description || 'No description'))))),
+                agents.length > effectiveMaxItems && (React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: "gray", dimColor: true },
+                        "\u2191\u2193 to scroll \u00B7 ",
+                        agents.length - effectiveMaxItems,
+                        " more hidden")))))));
+});
+AgentPickerPanel.displayName = 'AgentPickerPanel';
+export default AgentPickerPanel;

package/dist/ui/components/ChatInput.js

@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Box, Text } from 'ink';
-import { cpSlice, cpLen } from '../../utils/textUtils.js';
+import { cpSlice } from '../../utils/textUtils.js';
 import CommandPanel from './CommandPanel.js';
 import FileList from './FileList.js';
+import AgentPickerPanel from './AgentPickerPanel.js';
+import TodoPickerPanel from './TodoPickerPanel.js';
 import { useInputBuffer } from '../../hooks/useInputBuffer.js';
 import { useCommandPanel } from '../../hooks/useCommandPanel.js';
 import { useFilePicker } from '../../hooks/useFilePicker.js';
@@ -11,6 +13,8 @@ import { useClipboard } from '../../hooks/useClipboard.js';
 import { useKeyboardInput } from '../../hooks/useKeyboardInput.js';
 import { useTerminalSize } from '../../hooks/useTerminalSize.js';
 import { useTerminalFocus } from '../../hooks/useTerminalFocus.js';
+import { useAgentPicker } from '../../hooks/useAgentPicker.js';
+import { useTodoPicker } from '../../hooks/useTodoPicker.js';
 /**
  * Calculate context usage percentage
  * This is the same logic used in ChatInput to display usage
@@ -46,9 +50,13 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
     // Use command panel hook
     const { showCommands, setShowCommands, commandSelectedIndex, setCommandSelectedIndex, getFilteredCommands, updateCommandPanelState, isProcessing: commandPanelIsProcessing, } = useCommandPanel(buffer, isProcessing);
     // Use file picker hook
-    const { showFilePicker, setShowFilePicker, fileSelectedIndex, setFileSelectedIndex, fileQuery, setFileQuery, atSymbolPosition, setAtSymbolPosition, filteredFileCount, updateFilePickerState, handleFileSelect, handleFilteredCountChange, fileListRef, } = useFilePicker(buffer, triggerUpdate);
+    const { showFilePicker, setShowFilePicker, fileSelectedIndex, setFileSelectedIndex, fileQuery, setFileQuery, atSymbolPosition, setAtSymbolPosition, filteredFileCount, searchMode, updateFilePickerState, handleFileSelect, handleFilteredCountChange, fileListRef, } = useFilePicker(buffer, triggerUpdate);
     // Use history navigation hook
     const { showHistoryMenu, setShowHistoryMenu, historySelectedIndex, setHistorySelectedIndex, escapeKeyCount, setEscapeKeyCount, escapeKeyTimer, getUserMessages, handleHistorySelect, currentHistoryIndex, navigateHistoryUp, navigateHistoryDown, resetHistoryNavigation, saveToHistory, } = useHistoryNavigation(buffer, triggerUpdate, chatHistory, onHistorySelect);
+    // Use agent picker hook
+    const { showAgentPicker, setShowAgentPicker, agentSelectedIndex, setAgentSelectedIndex, agents, handleAgentSelect, } = useAgentPicker(buffer, triggerUpdate);
+    // Use todo picker hook
+    const { showTodoPicker, setShowTodoPicker, todoSelectedIndex, setTodoSelectedIndex, todos, selectedTodos, toggleTodoSelection, confirmTodoSelection, isLoading: todoIsLoading, searchQuery: todoSearchQuery, setSearchQuery: setTodoSearchQuery, totalTodoCount, } = useTodoPicker(buffer, triggerUpdate, process.cwd());
     // Use clipboard hook
     const { pasteFromClipboard } = useClipboard(buffer, updateCommandPanelState, updateFilePickerState, triggerUpdate);
     // Use keyboard input hook
@@ -93,6 +101,22 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
         pasteFromClipboard,
         onSubmit,
         ensureFocus,
+        showAgentPicker,
+        setShowAgentPicker,
+        agentSelectedIndex,
+        setAgentSelectedIndex,
+        agents,
+        handleAgentSelect,
+        showTodoPicker,
+        setShowTodoPicker,
+        todoSelectedIndex,
+        setTodoSelectedIndex,
+        todos,
+        selectedTodos,
+        toggleTodoSelection,
+        confirmTodoSelection,
+        todoSearchQuery,
+        setTodoSearchQuery,
     });
     // Set initial content when provided (e.g., when rolling back to first message)
     useEffect(() => {
@@ -181,101 +205,18 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
             return React.createElement(Text, null, char);
         }
     }, [hasFocus]);
-    // Render content with cursor and paste placeholders
+    // Render content with cursor (treat all text including placeholders as plain text)
     const renderContent = useCallback(() => {
         if (buffer.text.length > 0) {
-            // 使用buffer的内部文本而不是getFullText()，这样可以显示占位符
+            // 使用buffer的内部文本,将占位符当作普通文本处理
             const displayText = buffer.text;
             const cursorPos = buffer.getCursorPosition();
-            const hasPastePlaceholder = displayText.includes('[Paste ') &&
-                displayText.includes(' characters #');
-            const hasImagePlaceholder = displayText.includes('[image #');
-            const focusTokenPattern = /(\x1b)?\[[IO]/g;
-            const cleanedText = displayText.replace(focusTokenPattern, '').trim();
-            // 检查是否只有换行符或焦点标记
-            const hasOnlyNewlines = /^[\n\s]*$/.test(displayText.replace(focusTokenPattern, ''));
-            const isFocusNoise = cleanedText.length === 0 && !hasOnlyNewlines;
-            if (hasPastePlaceholder || hasImagePlaceholder || isFocusNoise) {
-                const atCursor = (() => {
-                    const charInfo = buffer.getCharAtCursor();
-                    return charInfo.char === '\n' ? ' ' : charInfo.char;
-                })();
-                // 分割文本并高亮占位符（粘贴和图片）
-                const parts = displayText.split(/(\[Paste \d+ characters #\d+\]|\[image #\d+\])/);
-                // 先构建带位置信息的数据结构
-                const partsWithPosition = [];
-                let processedLength = 0;
-                for (let i = 0; i < parts.length; i++) {
-                    const part = parts[i] || '';
-                    const isPastePlaceholder = !!part.match(/^\[Paste \d+ characters #\d+\]$/);
-                    const isImagePlaceholder = !!part.match(/^\[image #\d+\]$/);
-                    const partStart = processedLength;
-                    const partEnd = processedLength + cpLen(part);
-                    processedLength = partEnd;
-                    if (part.length > 0) {
-                        partsWithPosition.push({
-                            part,
-                            partStart,
-                            partEnd,
-                            isPastePlaceholder,
-                            isImagePlaceholder,
-                            originalIndex: i,
-                        });
-                    }
-                }
-                let cursorRendered = false;
-                const elements = [];
-                let elementKey = 0;
-                for (const item of partsWithPosition) {
-                    const { part, partStart, partEnd, isPastePlaceholder, isImagePlaceholder, originalIndex } = item;
-                    const isPlaceholder = isPastePlaceholder || isImagePlaceholder;
-                    // 检查光标是否在这个部分
-                    if (cursorPos >= partStart && cursorPos < partEnd) {
-                        cursorRendered = true;
-                        const beforeCursorInPart = cpSlice(part, 0, cursorPos - partStart);
-                        const afterCursorInPart = cpSlice(part, cursorPos - partStart + 1);
-                        if (isPlaceholder) {
-                            if (beforeCursorInPart) {
-                                elements.push(React.createElement(Text, { key: `${originalIndex}-before`, color: isImagePlaceholder ? 'magenta' : 'cyan', dimColor: true }, beforeCursorInPart));
-                            }
-                            elements.push(React.createElement(React.Fragment, { key: `cursor-${elementKey++}` }, renderCursor(atCursor)));
-                            if (afterCursorInPart) {
-                                elements.push(React.createElement(Text, { key: `${originalIndex}-after`, color: isImagePlaceholder ? 'magenta' : 'cyan', dimColor: true }, afterCursorInPart));
-                            }
-                        }
-                        else {
-                            if (beforeCursorInPart) {
-                                elements.push(React.createElement(Text, { key: `${originalIndex}-before` }, beforeCursorInPart));
-                            }
-                            elements.push(React.createElement(React.Fragment, { key: `cursor-${elementKey++}` }, renderCursor(atCursor)));
-                            if (afterCursorInPart) {
-                                elements.push(React.createElement(Text, { key: `${originalIndex}-after` }, afterCursorInPart));
-                            }
-                        }
-                    }
-                    else {
-                        if (isPlaceholder) {
-                            elements.push(React.createElement(Text, { key: originalIndex, color: isImagePlaceholder ? 'magenta' : 'cyan', dimColor: true }, part));
-                        }
-                        else {
-                            elements.push(React.createElement(Text, { key: originalIndex }, part));
-                        }
-                    }
-                }
-                if (!cursorRendered) {
-                    elements.push(React.createElement(React.Fragment, { key: `cursor-final` }, renderCursor(' ')));
-                }
-                return React.createElement(React.Fragment, null, elements);
-            }
-            else {
-                // 普通文本渲染
-                const charInfo = buffer.getCharAtCursor();
-                const atCursor = charInfo.char === '\n' ? ' ' : charInfo.char;
-                return (React.createElement(Text, null,
-                    cpSlice(displayText, 0, cursorPos),
-                    renderCursor(atCursor),
-                    cpSlice(displayText, cursorPos + 1)));
-            }
+            const charInfo = buffer.getCharAtCursor();
+            const atCursor = charInfo.char === '\n' ? ' ' : charInfo.char;
+            return (React.createElement(Text, null,
+                cpSlice(displayText, 0, cursorPos),
+                renderCursor(atCursor),
+                cpSlice(displayText, cursorPos + 1)));
         }
         else {
             return (React.createElement(React.Fragment, null,
@@ -342,7 +283,9 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                 React.createElement(Text, { color: "gray" }, '─'.repeat(terminalWidth - 2))),
             React.createElement(CommandPanel, { commands: getFilteredCommands(), selectedIndex: commandSelectedIndex, query: buffer.getFullText().slice(1), visible: showCommands, isProcessing: commandPanelIsProcessing }),
             React.createElement(Box, null,
-                React.createElement(FileList, { ref: fileListRef, query: fileQuery, selectedIndex: fileSelectedIndex, visible: showFilePicker, maxItems: 10, rootPath: process.cwd(), onFilteredCountChange: handleFilteredCountChange })),
+                React.createElement(FileList, { ref: fileListRef, query: fileQuery, selectedIndex: fileSelectedIndex, visible: showFilePicker, maxItems: 10, rootPath: process.cwd(), onFilteredCountChange: handleFilteredCountChange, searchMode: searchMode })),
+            React.createElement(AgentPickerPanel, { selectedIndex: agentSelectedIndex, visible: showAgentPicker, maxHeight: 5 }),
+            React.createElement(TodoPickerPanel, { todos: todos, selectedIndex: todoSelectedIndex, selectedTodos: selectedTodos, visible: showTodoPicker, maxHeight: 5, isLoading: todoIsLoading, searchQuery: todoSearchQuery, totalCount: totalTodoCount }),
             yoloMode && (React.createElement(Box, { marginTop: 1 },
                 React.createElement(Text, { color: "yellow", dimColor: true }, "\u2741 YOLO MODE ACTIVE - All tools will be auto-approved without confirmation"))),
             contextUsage && (React.createElement(Box, { marginTop: 1 },
@@ -409,9 +352,11 @@ export default function ChatInput({ onSubmit, onCommand, placeholder = 'Type you
                 React.createElement(Text, null, showCommands && getFilteredCommands().length > 0
                     ? 'Type to filter commands'
                     : showFilePicker
-                        ? 'Type to filter files • Tab/Enter to select • ESC to cancel'
+                        ? searchMode === 'content'
+                            ? 'Content search • Tab/Enter to select • ESC to cancel'
+                            : 'Type to filter files • Tab/Enter to select • ESC to cancel'
                         : (() => {
                             const pasteKey = process.platform === 'darwin' ? 'Ctrl+V' : 'Alt+V';
-                            return `Ctrl+L: delete to start • Ctrl+R: delete to end • ${pasteKey}: paste images • '@': files • '/': commands`;
+                            return `Ctrl+L: delete to start • Ctrl+R: delete to end • ${pasteKey}: paste images • '@': files • '@@': search content • '/': commands`;
                         })()))))));
 }

package/dist/ui/components/FileList.d.ts

@@ -6,6 +6,7 @@ type Props = {
     maxItems?: number;
     rootPath?: string;
     onFilteredCountChange?: (count: number) => void;
+    searchMode?: 'file' | 'content';
 };
 export type FileListRef = {
     getSelectedFile: () => string | null;

package/dist/ui/components/FileList.js

@@ -2,9 +2,12 @@ import React, { useState, useEffect, useMemo, useCallback, forwardRef, useImpera
 import { Box, Text } from 'ink';
 import fs from 'fs';
 import path from 'path';
-const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10, rootPath = process.cwd(), onFilteredCountChange, }, ref) => {
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10, rootPath = process.cwd(), onFilteredCountChange, searchMode = 'file', }, ref) => {
     const [files, setFiles] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    // Get terminal size for dynamic content display
+    const { columns: terminalWidth } = useTerminalSize();
     // Fixed maximum display items to prevent rendering issues
     const MAX_DISPLAY_ITEMS = 5;
     const effectiveMaxItems = useMemo(() => {
@@ -94,35 +97,169 @@ const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10
         setFiles(fileList);
         setIsLoading(false);
     }, [rootPath]);
+    // Search file content for content search mode
+    const searchFileContent = useCallback(async (query) => {
+        if (!query.trim()) {
+            return [];
+        }
+        const results = [];
+        const queryLower = query.toLowerCase();
+        const maxResults = 100; // Limit results for performance
+        // Text file extensions to search
+        const textExtensions = new Set([
+            '.js',
+            '.jsx',
+            '.ts',
+            '.tsx',
+            '.py',
+            '.java',
+            '.c',
+            '.cpp',
+            '.h',
+            '.hpp',
+            '.cs',
+            '.go',
+            '.rs',
+            '.rb',
+            '.php',
+            '.swift',
+            '.kt',
+            '.scala',
+            '.sh',
+            '.bash',
+            '.zsh',
+            '.fish',
+            '.ps1',
+            '.html',
+            '.css',
+            '.scss',
+            '.sass',
+            '.less',
+            '.xml',
+            '.json',
+            '.yaml',
+            '.yml',
+            '.toml',
+            '.ini',
+            '.conf',
+            '.config',
+            '.txt',
+            '.md',
+            '.markdown',
+            '.rst',
+            '.tex',
+            '.sql',
+            '.graphql',
+            '.proto',
+            '.vue',
+            '.svelte',
+        ]);
+        // Filter to only text files
+        const filesToSearch = files.filter(f => {
+            if (f.isDirectory)
+                return false;
+            const ext = path.extname(f.path).toLowerCase();
+            return textExtensions.has(ext);
+        });
+        // Process files in batches to avoid blocking
+        const batchSize = 10;
+        for (let batchStart = 0; batchStart < filesToSearch.length; batchStart += batchSize) {
+            if (results.length >= maxResults) {
+                break;
+            }
+            const batch = filesToSearch.slice(batchStart, batchStart + batchSize);
+            // Process batch files concurrently but with limit
+            const batchPromises = batch.map(async (file) => {
+                const fileResults = [];
+                try {
+                    const fullPath = path.join(rootPath, file.path);
+                    const content = await fs.promises.readFile(fullPath, 'utf-8');
+                    const lines = content.split('\n');
+                    // Search each line for the query
+                    for (let i = 0; i < lines.length; i++) {
+                        if (fileResults.length >= 10) {
+                            // Max 10 results per file
+                            break;
+                        }
+                        const line = lines[i];
+                        if (line && line.toLowerCase().includes(queryLower)) {
+                            const maxLineLength = Math.max(40, terminalWidth - 10);
+                            fileResults.push({
+                                name: file.name,
+                                path: file.path,
+                                isDirectory: false,
+                                lineNumber: i + 1,
+                                lineContent: line.trim().slice(0, maxLineLength),
+                            });
+                        }
+                    }
+                }
+                catch (error) {
+                    // Skip files that can't be read (binary or encoding issues)
+                }
+                return fileResults;
+            });
+            // Wait for batch to complete
+            const batchResults = await Promise.all(batchPromises);
+            // Flatten and add to results
+            for (const fileResults of batchResults) {
+                if (results.length >= maxResults) {
+                    break;
+                }
+                results.push(...fileResults.slice(0, maxResults - results.length));
+            }
+        }
+        return results;
+    }, [files, rootPath, terminalWidth]);
     // Load files on mount - only once when visible
     useEffect(() => {
         if (visible && files.length === 0) {
             loadFiles();
         }
     }, [visible, loadFiles]);
-    // Filter files based on query (no limit here, we'll slice for display)
-    const allFilteredFiles = useMemo(() => {
-        if (!query.trim()) {
-            return files;
-        }
-        const queryLower = query.toLowerCase();
-        const filtered = files.filter(file => {
-            const fileName = file.name.toLowerCase();
-            const filePath = file.path.toLowerCase();
-            return fileName.includes(queryLower) || filePath.includes(queryLower);
-        });
-        // Sort by relevance (exact name matches first, then path matches)
-        filtered.sort((a, b) => {
-            const aNameMatch = a.name.toLowerCase().startsWith(queryLower);
-            const bNameMatch = b.name.toLowerCase().startsWith(queryLower);
-            if (aNameMatch && !bNameMatch)
-                return -1;
-            if (!aNameMatch && bNameMatch)
-                return 1;
-            return a.name.localeCompare(b.name);
-        });
-        return filtered;
-    }, [files, query]);
+    // State for filtered files (needed for async content search)
+    const [allFilteredFiles, setAllFilteredFiles] = useState([]);
+    // Filter files based on query and search mode with debounce
+    useEffect(() => {
+        const performSearch = async () => {
+            if (!query.trim()) {
+                setAllFilteredFiles(files);
+                return;
+            }
+            if (searchMode === 'content') {
+                // Content search mode (@@)
+                const results = await searchFileContent(query);
+                setAllFilteredFiles(results);
+            }
+            else {
+                // File name search mode (@)
+                const queryLower = query.toLowerCase();
+                const filtered = files.filter(file => {
+                    const fileName = file.name.toLowerCase();
+                    const filePath = file.path.toLowerCase();
+                    return (fileName.includes(queryLower) || filePath.includes(queryLower));
+                });
+                // Sort by relevance (exact name matches first, then path matches)
+                filtered.sort((a, b) => {
+                    const aNameMatch = a.name.toLowerCase().startsWith(queryLower);
+                    const bNameMatch = b.name.toLowerCase().startsWith(queryLower);
+                    if (aNameMatch && !bNameMatch)
+                        return -1;
+                    if (!aNameMatch && bNameMatch)
+                        return 1;
+                    return a.name.localeCompare(b.name);
+                });
+                setAllFilteredFiles(filtered);
+            }
+        };
+        // Debounce search to avoid excessive updates during fast typing
+        // Use shorter delay for file search (150ms) and longer for content search (500ms)
+        const debounceDelay = searchMode === 'content' ? 500 : 150;
+        const timer = setTimeout(() => {
+            performSearch();
+        }, debounceDelay);
+        return () => clearTimeout(timer);
+    }, [files, query, searchMode, searchFileContent]);
     // Display with scrolling window
     const filteredFiles = useMemo(() => {
         if (allFilteredFiles.length <= effectiveMaxItems) {
@@ -150,7 +287,12 @@ const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10
             if (allFilteredFiles.length > 0 &&
                 selectedIndex < allFilteredFiles.length &&
                 allFilteredFiles[selectedIndex]) {
-                return allFilteredFiles[selectedIndex].path;
+                const selectedFile = allFilteredFiles[selectedIndex];
+                // For content search mode, include line number
+                if (selectedFile.lineNumber !== undefined) {
+                    return `${selectedFile.path}:${selectedFile.lineNumber}`;
+                }
+                return selectedFile.path;
             }
             return null;
         },
@@ -167,26 +309,33 @@ const FileList = memo(forwardRef(({ query, selectedIndex, visible, maxItems = 10
         return null;
     }
     if (isLoading) {
-        return (React.createElement(Box, { borderStyle: "round", borderColor: "blue", paddingX: 1, marginTop: 1 },
-            React.createElement(Text, { color: "blue" }, "Loading files...")));
+        return (React.createElement(Box, { paddingX: 1, marginTop: 1 },
+            React.createElement(Text, { color: "blue", dimColor: true }, "Loading files...")));
     }
     if (filteredFiles.length === 0) {
-        return (React.createElement(Box, { borderStyle: "round", borderColor: "gray", paddingX: 1, marginTop: 1 },
-            React.createElement(Text, { color: "gray" }, "No files found")));
+        return (React.createElement(Box, { paddingX: 1, marginTop: 1 },
+            React.createElement(Text, { color: "gray", dimColor: true }, "No files found")));
     }
     return (React.createElement(Box, { paddingX: 1, marginTop: 1, flexDirection: "column" },
         React.createElement(Box, { marginBottom: 1 },
             React.createElement(Text, { color: "blue", bold: true },
-                "\u2261 Files",
+                searchMode === 'content' ? '≡ Content Search' : '≡ Files',
                 ' ',
                 allFilteredFiles.length > effectiveMaxItems &&
                     `(${selectedIndex + 1}/${allFilteredFiles.length})`)),
-        filteredFiles.map((file, index) => (React.createElement(Box, { key: file.path },
+        filteredFiles.map((file, index) => (React.createElement(Box, { key: `${file.path}-${file.lineNumber || 0}`, flexDirection: "column" },
             React.createElement(Text, { backgroundColor: index === displaySelectedIndex ? '#1E3A8A' : undefined, color: index === displaySelectedIndex
                     ? '#FFFFFF'
                     : file.isDirectory
                         ? 'yellow'
-                        : 'white' }, file.isDirectory ? '◇ ' + file.path : '◆ ' + file.path)))),
+                        : 'white' }, searchMode === 'content' && file.lineNumber !== undefined
+                ? `${file.path}:${file.lineNumber}`
+                : file.isDirectory
+                    ? '◇ ' + file.path
+                    : '◆ ' + file.path),
+            searchMode === 'content' && file.lineContent && (React.createElement(Text, { backgroundColor: index === displaySelectedIndex ? '#1E3A8A' : undefined, color: index === displaySelectedIndex ? '#D1D5DB' : 'gray', dimColor: true },
+                '  ',
+                file.lineContent))))),
         allFilteredFiles.length > effectiveMaxItems && (React.createElement(Box, { marginTop: 1 },
             React.createElement(Text, { color: "gray", dimColor: true },
                 "\u2191\u2193 to scroll \u00B7 ",

package/dist/ui/components/TodoPickerPanel.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TodoItem } from '../../utils/todoScanner.js';
+interface Props {
+    todos: TodoItem[];
+    selectedIndex: number;
+    selectedTodos: Set<string>;
+    visible: boolean;
+    maxHeight?: number;
+    isLoading?: boolean;
+    searchQuery?: string;
+    totalCount?: number;
+}
+declare const TodoPickerPanel: React.MemoExoticComponent<({ todos, selectedIndex, selectedTodos, visible, maxHeight, isLoading, searchQuery, totalCount, }: Props) => React.JSX.Element | null>;
+export default TodoPickerPanel;