fix: increase memory threshold and optimize performance monitoring

- Increase memory limit from 100MB to 256MB for modern web apps
- Optimize DOM node counting to only check chat container
- Reduce frequency of memory and DOM updates to minimize overhead
- Improve error messages to include threshold values
- Add tests for new threshold values

This prevents false positive performance warnings at normal memory usage levels.

Author: hannesrudolph

webview-ui/src/components/chat/hooks/useOptimizedVirtualization.ts

@@ -92,7 +92,11 @@ export function useOptimizedVirtualization({
 	}
 
 	if (!performanceMonitorRef.current) {
-		performanceMonitorRef.current = new PerformanceMonitor({}, onPerformanceIssue)
+		// Use higher memory limit for chat apps (256MB instead of default 100MB)
+		const performanceThresholds = {
+			maxMemoryUsage: 256 * 1024 * 1024, // 256MB - reasonable for modern chat apps
+		}
+		performanceMonitorRef.current = new PerformanceMonitor(performanceThresholds, onPerformanceIssue)
 	}
 
 	const stateManager = stateManagerRef.current
@@ -255,15 +259,26 @@ export function useOptimizedVirtualization({
 		if (!isHidden) {
 			performanceMonitor.startMonitoring()
 
-			// Update metrics periodically
+			// Update metrics periodically with optimized frequency
 			const intervalId = setInterval(() => {
-				performanceMonitor.updateMemoryUsage()
-				performanceMonitor.updateDOMNodeCount()
+				// Only update memory usage every other cycle to reduce overhead
+				const shouldUpdateMemory = Date.now() % 2 === 0
+				if (shouldUpdateMemory) {
+					performanceMonitor.updateMemoryUsage()
+				}
+
+				// DOM node count is less critical, update less frequently
+				if (Date.now() % 3 === 0) {
+					performanceMonitor.updateDOMNodeCount()
+				}
 
 				// Log metrics in development
 				const report = performanceMonitor.getReport()
 				console.log("[VIRTUALIZATION] Performance report:", {
-					metrics: report.metrics,
+					metrics: {
+						...report.metrics,
+						memoryUsageMB: (report.metrics.memoryUsage / 1024 / 1024).toFixed(2),
+					},
 					issues: report.issues,
 					timestamp: new Date().toISOString(),
 				})

webview-ui/src/components/chat/utils/performanceMonitor.ts

@@ -24,7 +24,7 @@ export interface PerformanceThresholds {
 const DEFAULT_THRESHOLDS: PerformanceThresholds = {
 	maxRenderTime: 16.67, // 60 FPS target
 	minScrollFPS: 30,
-	maxMemoryUsage: 100 * 1024 * 1024, // 100MB
+	maxMemoryUsage: 256 * 1024 * 1024, // 256MB - more reasonable for modern web apps
 	maxDOMNodes: 5000,
 }
 
@@ -206,7 +206,10 @@ export class PerformanceMonitor {
 	 * Update DOM node count
 	 */
 	updateDOMNodeCount(): void {
-		this.metrics.domNodeCount = document.querySelectorAll("*").length
+		// Use a more efficient method to count DOM nodes
+		// Only count nodes within the chat container to reduce overhead
+		const chatContainer = document.querySelector('[data-testid="chat-messages-container"]') || document.body
+		this.metrics.domNodeCount = chatContainer.getElementsByTagName("*").length
 
 		// Check threshold
 		if (this.metrics.domNodeCount > this.thresholds.maxDOMNodes) {
@@ -282,7 +285,9 @@ export class PerformanceMonitor {
 		}
 
 		if (this.metrics.memoryUsage > this.thresholds.maxMemoryUsage) {
-			issues.push(`Memory usage (${(this.metrics.memoryUsage / 1024 / 1024).toFixed(2)}MB) exceeds limit`)
+			issues.push(
+				`Memory usage (${(this.metrics.memoryUsage / 1024 / 1024).toFixed(2)}MB) exceeds limit (${(this.thresholds.maxMemoryUsage / 1024 / 1024).toFixed(0)}MB)`,
+			)
 		}
 
 		if (this.metrics.domNodeCount > this.thresholds.maxDOMNodes) {