fix: Improve search box user experience in replay history

- Fixed clunky search behavior where input lost focus after each character
- Added debouncing to search input (300ms delay) to prevent excessive API calls
- Updated state management to use debounced search term for API calls
- Improved page reset logic to work with debounced search
- Enhanced user experience with smooth, continuous typing in search field
- Reduced server load with fewer API requests during typing
- Updated CHANGELOG.md with comprehensive fix documentation

This resolves the issue where users had to click the search box again
after typing each character, making search much more user-friendly.

Author: blink-zero

CHANGELOG.md

@@ -14,11 +14,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Enhanced error logging to show all attempted paths for better debugging
   - Improved fallback version handling for container environments
 
+- **Search Input Focus Issue**: Fixed clunky search behavior in replay history
+  - Added debouncing to search input to prevent excessive API calls
+  - Fixed search box losing focus after each character typed
+  - Improved user experience with smooth, continuous typing in search field
+  - Search now waits 300ms after user stops typing before triggering API call
+
 ### Technical Improvements
 - VERSION file now properly copied into Docker container at `/app/VERSION`
 - Version endpoint tries Docker-specific paths first for better container compatibility
 - Enhanced logging provides better visibility into version file resolution process
 - Robust fallback ensures version display even if file reading fails
+- Debounced search reduces server load and improves frontend responsiveness
+- Better state management prevents unnecessary component re-renders during search
 
 ## [1.2.0] - 2025-07-29
 

frontend/src/components/ReplayHistory.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
   Box,
   Card,
@@ -44,12 +44,22 @@ const ReplayHistory = ({ onReplayStart }) => {
   const [replayingId, setReplayingId] = useState(null);
   const [filterStatus, setFilterStatus] = useState('ALL');
   const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
 
   // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
   const [totalCount, setTotalCount] = useState(0);
   const itemsPerPage = 20;
 
+  // Debounce search term to avoid excessive API calls
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 300); // 300ms delay
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
   const loadHistory = React.useCallback(async () => {
     try {
       setLoading(true);
@@ -58,7 +68,7 @@ const ReplayHistory = ({ onReplayStart }) => {
       const response = await apiService.getReplayHistory(
         itemsPerPage, 
         offset, 
-        searchTerm, 
+        debouncedSearchTerm, 
         filterStatus
       );
 
@@ -70,7 +80,7 @@ const ReplayHistory = ({ onReplayStart }) => {
     } finally {
       setLoading(false);
     }
-  }, [currentPage, itemsPerPage, searchTerm, filterStatus]);
+  }, [currentPage, itemsPerPage, debouncedSearchTerm, filterStatus]);
 
   useEffect(() => {
     loadHistory();
@@ -81,7 +91,7 @@ const ReplayHistory = ({ onReplayStart }) => {
     if (currentPage !== 1) {
       setCurrentPage(1);
     }
-  }, [filterStatus, searchTerm, currentPage]);
+  }, [filterStatus, debouncedSearchTerm, currentPage]);
 
   const handleReplayAgain = async (historyItem) => {
     try {