feat(history): enhance search functionality with state persistence and tests

- Implement persistent search state management across tab switches
- Add useHistorySearch hook for centralized search state handling
- Refactor search components to use controlled state pattern
- Add comprehensive test coverage for history search features
- Move search state responsibility to parent CodyPanel component
- Update search bar with reset and submit handlers
- Improve variable replacement in workflow execution
- Enhance CLI command sanitization and execution safety
- Bump version to 1.67.0+2

The changes improve search functionality in the history tab while maintaining state across navigation, add robust testing, and include important workflow execution safety improvements.

Author: PriNova

pnpm-lock.yaml

@@ -3,7 +3,7 @@
   "name": "cody-ai",
   "private": true,
   "displayName": "Cody: AI Code Assistant",
-  "version": "1.67.0+1",
+  "version": "1.67.0+2",
   "publisher": "sourcegraph",
   "license": "Apache-2.0",
   "icon": "resources/sourcegraph.png",
@@ -1615,6 +1615,7 @@
     "franc-min": "^6.2.0",
     "fs-extra": "^11.2.0",
     "fuzzysort": "^2.0.4",
+    "happy-dom": "^14.3.10",
     "htmlnano": "^2.1.1",
     "http-proxy-middleware": "^3.0.0",
     "immer": "^10.1.1",

vscode/package.json

@@ -122,9 +122,10 @@ export async function executeWorkflow(
             switch (node.type) {
                 case NodeType.CLI: {
                     try {
-                        const inputs = combineParentOutputsByConnectionOrder(node.id, context).map(
+                        const inputs = combineParentOutputsByConnectionOrder(node.id, context)
+                        /*.map(
                             output => sanitizeForShell(output)
-                        )
+                        )*/
                         const command = (node as CLINode).data.content
                             ? replaceIndexedInputs((node as CLINode).data.content, inputs, context)
                             : ''
@@ -386,31 +387,33 @@ export function replaceIndexedInputs(
     parentOutputs: string[],
     context?: IndexedExecutionContext
 ): string {
-    let result = template.replace(/\${(\d+)}/g, (_match, index) => {
+    // Only replace numbered placeholders that match exactly ${1}, ${2}, etc.
+    let result = template.replace(/\${(\d+)}(?!\w)/g, (_match, index) => {
         const adjustedIndex = Number.parseInt(index, 10) - 1
         return adjustedIndex >= 0 && adjustedIndex < parentOutputs.length
             ? parentOutputs[adjustedIndex]
             : ''
     })
 
     if (context) {
-        // Replace loop variables
+        // Only replace loop variables that are explicitly defined in the context
         for (const [, loopState] of context.loopStates) {
             result = result.replace(
-                new RegExp(`\\$\{${loopState.variable}}`, 'g'),
+                new RegExp(`\\$\{${loopState.variable}}(?!\\w)`, 'g'),
                 String(loopState.currentIteration)
             )
         }
-        result = result.replace(/\${(\w+)}/g, (_match, variableName) => {
-            // Matches any word character after ${
-            if (
-                !/^\d+$/.test(variableName) &&
-                !Object.values(context.loopStates).some(loopState => loopState.variable === variableName)
-            ) {
-                return context.accumulatorValues?.get(variableName) || ''
-            }
-            return _match
-        })
+
+        // Only replace accumulator variables that are explicitly defined
+        const accumulatorVars = context.accumulatorValues
+            ? Array.from(context.accumulatorValues.keys())
+            : []
+        for (const varName of accumulatorVars) {
+            result = result.replace(
+                new RegExp(`\\$\{${varName}}(?!\\w)`, 'g'),
+                context.accumulatorValues?.get(varName) || ''
+            )
+        }
     }
 
     return result
@@ -488,14 +491,13 @@ export async function executeCLINode(
                 result: `${filteredCommand}`,
             },
         } as ExtensionToWorkflow)
-
         const approval = await approvalHandler(node.id)
         if (approval.command) {
-            filteredCommand = approval.command
+            filteredCommand = sanitizeForShell(approval.command)
         }
     }
 
-    if (commandsNotAllowed.some(cmd => filteredCommand.startsWith(cmd))) {
+    if (commandsNotAllowed.some(cmd => sanitizeForShell(filteredCommand).startsWith(cmd))) {
         void vscode.window.showErrorMessage('Cody cannot execute this command')
         throw new Error('Cody cannot execute this command')
     }

vscode/src/workflow/workflow-executor.ts

@@ -11,7 +11,7 @@ import {
 } from '@sourcegraph/cody-shared'
 import { useExtensionAPI, useObservable } from '@sourcegraph/prompt-editor'
 import type React from 'react'
-import { type FunctionComponent, useEffect, useMemo, useRef } from 'react'
+import { type FunctionComponent, useEffect, useMemo, useRef, useState } from 'react'
 import type { ConfigurationSubsetForWebview, LocalEnv } from '../src/chat/protocol'
 import styles from './App.module.css'
 import { Chat } from './Chat'
@@ -109,6 +109,8 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
         }
     }, [api.clientActionBroadcast])
 
+    const [historySearchQuery, setHistorySearchQuery] = useState('')
+
     return (
         <TabViewContext.Provider value={useMemo(() => ({ view, setView }), [view, setView])}>
             <TabRoot
@@ -153,6 +155,8 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
                             setView={setView}
                             webviewType={config.webviewType}
                             multipleWebviewsEnabled={config.multipleWebviewsEnabled}
+                            searchQuery={historySearchQuery}
+                            onSearchQueryChange={setHistorySearchQuery}
                         />
                     )}
                     {view === View.Toolbox && config.webviewType === 'sidebar' && (

vscode/webviews/CodyPanel.tsx

@@ -1,22 +1,79 @@
 import { CodyIDE } from '@sourcegraph/cody-shared'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, test, vi } from 'vitest'
 import { AppWrapperForTest } from '../AppWrapperForTest'
 import { HistoryTabWithData } from './HistoryTab'
 
 describe('HistoryTabWithData', () => {
+    const defaultProps = {
+        IDE: CodyIDE.VSCode,
+        setView: vi.fn(),
+        searchQuery: '',
+        onSearchQueryChange: vi.fn(),
+    }
+
     test('renders empty state when there are no non-empty chats', () => {
-        const mockSetView = vi.fn()
         const emptyChats = [
             { id: '1', interactions: [], lastInteractionTimestamp: new Date().toISOString() },
             { id: '2', interactions: [], lastInteractionTimestamp: new Date().toISOString() },
         ]
 
-        render(<HistoryTabWithData IDE={CodyIDE.VSCode} setView={mockSetView} chats={emptyChats} />, {
+        render(<HistoryTabWithData {...defaultProps} chats={emptyChats} />, {
             wrapper: AppWrapperForTest,
         })
 
         expect(screen.getByText('You have no chat history')).toBeInTheDocument()
         expect(screen.getByText('Start a new chat')).toBeInTheDocument()
     })
+
+    test('search functionality works correctly', () => {
+        const chats = [
+            {
+                id: '1',
+                interactions: [
+                    {
+                        humanMessage: { text: 'test message', speaker: 'human' as const },
+                        assistantMessage: { text: 'response', speaker: 'assistant' as const },
+                    },
+                ],
+                lastInteractionTimestamp: new Date().toISOString(),
+                chatTitle: '',
+                speaker: 'human' as const,
+            },
+        ]
+
+        render(<HistoryTabWithData {...defaultProps} chats={chats} />, {
+            wrapper: AppWrapperForTest,
+        })
+
+        const searchInput = screen.getByPlaceholderText('Search in chat history...')
+        fireEvent.change(searchInput, { target: { value: 'test' } })
+        fireEvent.click(screen.getByTitle('Search'))
+
+        expect(defaultProps.onSearchQueryChange).toHaveBeenCalledWith('test')
+    })
+
+    test('search can be cleared', () => {
+        const chats = [
+            {
+                id: '1',
+                interactions: [
+                    {
+                        humanMessage: { text: 'test message', speaker: 'human' as const },
+                        assistantMessage: { text: 'response', speaker: 'assistant' as const },
+                    },
+                ],
+                lastInteractionTimestamp: new Date().toISOString(),
+                chatTitle: '',
+                speaker: 'human' as const,
+            },
+        ]
+
+        render(<HistoryTabWithData {...defaultProps} chats={chats} searchQuery="test" />, {
+            wrapper: AppWrapperForTest,
+        })
+
+        fireEvent.click(screen.getByTitle('Clear search'))
+        expect(defaultProps.onSearchQueryChange).toHaveBeenCalledWith('')
+    })
 })

vscode/webviews/tabs/HistoryTab.test.tsx

@@ -10,7 +10,7 @@ import {
 import { SearchIcon } from 'lucide-react'
 import { XCircleIcon } from 'lucide-react'
 import type React from 'react'
-import { memo, useCallback, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { WebviewType } from '../../src/chat/protocol'
 import { getRelativeChatPeriod } from '../../src/common/time-date'
 import { LoadingDots } from '../chat/components/LoadingDots'
@@ -26,6 +26,8 @@ interface HistoryTabProps {
     setView: (view: View) => void
     webviewType?: WebviewType | undefined | null
     multipleWebviewsEnabled?: boolean | undefined | null
+    searchQuery: string
+    onSearchQueryChange: (query: string) => void
 }
 
 export const HistoryTab: React.FC<HistoryTabProps> = props => {
@@ -74,20 +76,20 @@ const filterChatsBySearch = (chats: SerializedChatTranscript[], term: string) =>
 
 export const HistoryTabWithData: React.FC<
     HistoryTabProps & { chats: UserLocalHistory['chat'][string][] }
-> = ({ IDE, webviewType, multipleWebviewsEnabled, setView, chats }) => {
+> = ({
+    IDE,
+    webviewType,
+    multipleWebviewsEnabled,
+    setView,
+    chats,
+    searchQuery,
+    onSearchQueryChange,
+}) => {
     const [editingId, setEditingId] = useState<string | null>(null)
     const [newTitle, setNewTitle] = useState('')
     const inputRef = useRef<HTMLInputElement>(null)
-    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')
 
-    const filteredChats = useMemo(
-        () =>
-            filterChatsBySearch(
-                chats.filter(chat => chat.interactions.length > 0),
-                debouncedSearchTerm
-            ),
-        [chats, debouncedSearchTerm]
-    )
+    const { filteredChats, handleSearch } = useHistorySearch(chats, searchQuery)
 
     const chatByPeriod = useMemo(
         () =>
@@ -153,12 +155,20 @@ export const HistoryTabWithData: React.FC<
     )
 
     const SearchBar = memo(
-        ({ initialValue, onSearch }: { initialValue: string; onSearch: (term: string) => void }) => {
-            const [inputValue, setInputValue] = useState(initialValue)
+        ({ value, onSearchSubmit }: { value: string; onSearchSubmit: (term: string) => void }) => {
+            const [inputValue, setInputValue] = useState(value)
+
+            useEffect(() => {
+                setInputValue(value)
+            }, [value])
 
             const handleReset = () => {
                 setInputValue('')
-                onSearch('')
+                onSearchSubmit('') // Clear search by submitting empty term
+            }
+
+            const submitSearch = () => {
+                onSearchSubmit(inputValue) // Submit current input value
             }
 
             return (
@@ -168,11 +178,7 @@ export const HistoryTabWithData: React.FC<
                         placeholder="Search in chat history..."
                         value={inputValue}
                         onChange={e => setInputValue(e.target.value)}
-                        onKeyDown={e => {
-                            if (e.key === 'Enter') {
-                                onSearch(inputValue)
-                            }
-                        }}
+                        onKeyDown={e => e.key === 'Enter' && submitSearch()}
                         className="tw-flex-1 tw-text-sm tw-text-muted-foreground [::placeholder:tw-text-sm] [::placeholder:tw-text-muted-foreground] tw-h-10"
                         variant="search"
                     />
@@ -181,7 +187,7 @@ export const HistoryTabWithData: React.FC<
                             <XCircleIcon size={14} strokeWidth={1.25} />
                         </Button>
                     )}
-                    <Button variant="secondary" onClick={() => onSearch(inputValue)} title="Search">
+                    <Button variant="secondary" onClick={submitSearch} title="Search">
                         <SearchIcon size={14} strokeWidth={1.25} />
                     </Button>
                 </div>
@@ -191,7 +197,10 @@ export const HistoryTabWithData: React.FC<
 
     return (
         <div className="tw-flex tw-flex-col tw-gap-6">
-            <SearchBar initialValue={debouncedSearchTerm} onSearch={setDebouncedSearchTerm} />
+            <SearchBar
+                value={searchQuery}
+                onSearchSubmit={term => onSearchQueryChange(handleSearch(term))} // Update searchQuery in parent
+            />
             {chatByPeriod.map(([period, chats]) => (
                 <CollapsiblePanel
                     id={`history-${period}`.replaceAll(' ', '-').toLowerCase()}
@@ -324,3 +333,26 @@ function useUserHistory(): UserLocalHistory | null | undefined {
     const userHistory = useExtensionAPI().userHistory
     return useObservable(useMemo(() => userHistory(), [userHistory])).value
 }
+
+function useHistorySearch(chats: SerializedChatTranscript[], initialSearchTerm: string) {
+    const activeSearchTerm = initialSearchTerm // Directly use the prop
+
+    const filteredChats = useMemo(
+        () =>
+            filterChatsBySearch(
+                chats.filter(chat => chat.interactions.length > 0),
+                activeSearchTerm
+            ),
+        [chats, activeSearchTerm]
+    )
+
+    // handleSearch now just updates the external search term (passed via callback)
+    const handleSearch = (term: string) => {
+        return term // Return the term, the parent component will handle state update
+    }
+
+    return {
+        filteredChats,
+        handleSearch,
+    }
+}