feat: add limit filter to history view

Added a limit filter dropdown to the history view that allows users to control
how many results are displayed. The filter:
- Defaults to 50 items
- Offers options for 50, 100, 200, 500, 1000 items or all results
- Shows loading spinner when changing limits
- Integrates with existing workspace and sort filters
- Maintains consistent search options across operations

Signed-off-by: Eric Wheeler <[email protected]>

Author: Eric Wheeler

webview-ui/src/components/history/HistoryView.tsx

@@ -49,7 +49,9 @@ const HistoryView = memo(({ onDone }: HistoryViewProps) => {
 		workspaceItems,
 		workspacePath,
 		setWorkspacePath,
-	} = useTaskSearch({ workspacePath: WORKSPACE_CURRENT })
+		resultLimit,
+		setResultLimit,
+	} = useTaskSearch({ workspacePath: WORKSPACE_CURRENT, limit: 50 })
 	const { t } = useAppTranslation()
 
 	const [deleteTaskId, setDeleteTaskId] = useState<string | null>(null)
@@ -174,12 +176,15 @@ const HistoryView = memo(({ onDone }: HistoryViewProps) => {
 							setIsFilterActive={setIsFilterActive}
 							t={t}
 						/>
-						<SortSelector
-							sortOption={sortOption}
-							setSortOption={setSortOption}
-							searchQuery={searchQuery}
-							t={t}
-						/>
+						<div className="flex gap-2 flex-1">
+							<SortSelector
+								sortOption={sortOption}
+								setSortOption={setSortOption}
+								searchQuery={searchQuery}
+								t={t}
+							/>
+							<LimitSelector resultLimit={resultLimit} setResultLimit={setResultLimit} t={t} />
+						</div>
 					</div>
 
 					{/* Select all control in selection mode */}
@@ -589,4 +594,68 @@ const SortSelector = memo(
 	},
 )
 
+// Memoized limit selector component
+const LimitSelector = memo(
+	({
+		resultLimit,
+		setResultLimit,
+		t,
+	}: {
+		resultLimit: number | undefined
+		setResultLimit: (value: number | undefined) => void
+		t: any
+	}) => {
+		return (
+			<Select
+				value={resultLimit?.toString() || "all"}
+				onValueChange={(value) => setResultLimit(value === "all" ? undefined : parseInt(value, 10))}>
+				<SelectTrigger className="flex-1">
+					<SelectValue>
+						{t("history:limit.prefix")}{" "}
+						{resultLimit ? t(`history:limit.${resultLimit}`) : t("history:limit.all")}
+					</SelectValue>
+				</SelectTrigger>
+				<SelectContent className="max-h-[80vh] overflow-auto">
+					<SelectItem value="50" data-testid="select-limit-50">
+						<div className="flex items-center gap-2">
+							<span className="codicon codicon-list-filter" />
+							{t("history:limit.50")}
+						</div>
+					</SelectItem>
+					<SelectItem value="100" data-testid="select-limit-100">
+						<div className="flex items-center gap-2">
+							<span className="codicon codicon-list-filter" />
+							{t("history:limit.100")}
+						</div>
+					</SelectItem>
+					<SelectItem value="200" data-testid="select-limit-200">
+						<div className="flex items-center gap-2">
+							<span className="codicon codicon-list-filter" />
+							{t("history:limit.200")}
+						</div>
+					</SelectItem>
+					<SelectItem value="500" data-testid="select-limit-500">
+						<div className="flex items-center gap-2">
+							<span className="codicon codicon-list-filter" />
+							{t("history:limit.500")}
+						</div>
+					</SelectItem>
+					<SelectItem value="1000" data-testid="select-limit-1000">
+						<div className="flex items-center gap-2">
+							<span className="codicon codicon-list-filter" />
+							{t("history:limit.1000")}
+						</div>
+					</SelectItem>
+					<SelectItem value="all" data-testid="select-limit-all">
+						<div className="flex items-center gap-2">
+							<span className="codicon codicon-list-unfiltered" />
+							{t("history:limit.all")}
+						</div>
+					</SelectItem>
+				</SelectContent>
+			</Select>
+		)
+	},
+)
+
 export default HistoryView

webview-ui/src/components/history/useTaskSearch.ts

@@ -26,9 +26,10 @@ export const useTaskSearch = (options: HistorySearchOptions = {}) => {
 	const [lastNonRelevantSort, setLastNonRelevantSort] = useState<HistorySortOption | null>("newest")
 	const [workspaceItems, setWorkspaceItems] = useState<HistoryWorkspaceItem[]>([])
 	const [workspacePath, setWorkspacePath] = useState<string | undefined>(options.workspacePath)
+	const [resultLimit, setResultLimit] = useState<number | undefined>(options.limit)
 	const currentRequestId = useRef<string>("")
 
-	// Wrap setWorkspacePath to set loading state when workspace changes
+	// Wrap state setters to set loading state when values change
 	const setWorkspacePathWithLoading = useCallback(
 		(path: string) => {
 			if (path !== workspacePath) {
@@ -39,6 +40,11 @@ export const useTaskSearch = (options: HistorySearchOptions = {}) => {
 		[workspacePath],
 	)
 
+	const setResultLimitWithLoading = useCallback((limit: number | undefined) => {
+		setLoading(true)
+		setResultLimit(limit)
+	}, [])
+
 	// Debounced search query setter
 	const debouncedSetSearchQuery = useCallback((query: string) => {
 		if (searchTimeoutRef.current) {
@@ -118,14 +124,7 @@ export const useTaskSearch = (options: HistorySearchOptions = {}) => {
 
 				vscode.postMessage({
 					type: "getHistoryItems",
-					historySearchOptions: {
-						searchQuery,
-						sortOption,
-						// If workspacePath is undefined, show all workspaces
-						// Otherwise, use the specified workspacePath (which could be empty string for "(unknown)")
-						workspacePath,
-						limit: options.limit,
-					},
+					historySearchOptions: searchOptions,
 					requestId: refreshRequestId,
 				})
 			}
@@ -138,10 +137,10 @@ export const useTaskSearch = (options: HistorySearchOptions = {}) => {
 		const searchOptions: HistorySearchOptions = {
 			searchQuery,
 			sortOption,
-			// If workspacePath is undefined, show all workspaces
-			// Otherwise, use the specified workspacePath (which could be empty string for "(unknown)")
+			// If workspacePath is undefined, so current workspace
+			// Otherwise, use the specified workspacePath
 			workspacePath,
-			limit: options.limit,
+			limit: resultLimit,
 		}
 
 		// Generate a new request ID for this search
@@ -160,7 +159,7 @@ export const useTaskSearch = (options: HistorySearchOptions = {}) => {
 		}
 		// Intentionally excluding tasks from deps to prevent infinite loop and flickering
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [searchQuery, sortOption, workspacePath, cwd, options.limit])
+	}, [searchQuery, sortOption, workspacePath, cwd, resultLimit])
 
 	return {
 		tasks,
@@ -175,5 +174,7 @@ export const useTaskSearch = (options: HistorySearchOptions = {}) => {
 		workspaceItems,
 		workspacePath,
 		setWorkspacePath: setWorkspacePathWithLoading,
+		resultLimit,
+		setResultLimit: setResultLimitWithLoading,
 	}
 }

webview-ui/src/i18n/locales/en/history.json

@@ -45,6 +45,15 @@
 		"mostTokens": "Most Tokens",
 		"mostRelevant": "Most Relevant"
 	},
-	"viewAllHistory": "View all tasks"
+	"viewAllHistory": "View all tasks",
+	"limit": {
+		"prefix": "Limit:",
+		"50": "50",
+		"100": "100",
+		"200": "200",
+		"500": "500",
+		"1000": "1000",
+		"all": "All"
+	},
 	"noItemsFound": "No items found"
 }