fix(history): auto-apply history filters and remove explicit buttons

HistoryPage no longer requires Apply/Clear; filter state auto-syncs with query. Added guard to avoid redundant state updates. Updated task list in Docs/Tasks.md to mark completion.

frontend/src/pages/HistoryPage.tsx

@@ -6,7 +6,7 @@
  * Rows with repeatedly-banned IPs are highlighted in amber.
  */
 
-import { useCallback, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Badge,
   Button,
@@ -136,6 +136,24 @@ const useStyles = makeStyles({
   },
 });
 
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+
+function areHistoryQueriesEqual(
+  a: HistoryQuery,
+  b: HistoryQuery,
+): boolean {
+  return (
+    a.range === b.range &&
+    a.origin === b.origin &&
+    a.jail === b.jail &&
+    a.ip === b.ip &&
+    a.page === b.page &&
+    a.page_size === b.page_size
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Column definitions for the main history table
 // ---------------------------------------------------------------------------
@@ -372,6 +390,7 @@ function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
 
 export function HistoryPage(): React.JSX.Element {
   const styles = useStyles();
+  const cardStyles = useCardStyles();
 
   // Filter state
   const [range, setRange] = useState<TimeRange>("24h");
@@ -388,15 +407,23 @@ export function HistoryPage(): React.JSX.Element {
   const { items, total, page, loading, error, setPage, refresh } =
     useHistory(appliedQuery);
 
-  const applyFilters = useCallback((): void => {
-    setAppliedQuery({
-      range: range,
+  useEffect((): void => {
+    const nextQuery: HistoryQuery = {
+      range,
       origin: originFilter !== "all" ? originFilter : undefined,
       jail: jailFilter.trim() || undefined,
       ip: ipFilter.trim() || undefined,
+      page: 1,
       page_size: PAGE_SIZE,
-    });
-  }, [range, originFilter, jailFilter, ipFilter]);
+    };
+
+    if (areHistoryQueriesEqual(nextQuery, appliedQuery)) {
+      return;
+    }
+
+    setPage(1);
+    setAppliedQuery(nextQuery);
+  }, [range, originFilter, jailFilter, ipFilter, setPage, appliedQuery]);
 
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
 
@@ -458,7 +485,7 @@ export function HistoryPage(): React.JSX.Element {
           }}
         />
 
-        <div className={styles.filterLabel}>
+        <div className={`${styles.filterLabel} ${cardStyles.card}`}>
           <Text size={200}>Jail</Text>
           <Input
             placeholder="e.g. sshd"
@@ -470,7 +497,7 @@ export function HistoryPage(): React.JSX.Element {
           />
         </div>
 
-        <div className={styles.filterLabel}>
+        <div className={`${styles.filterLabel} ${cardStyles.card}`}>
           <Text size={200}>IP Address</Text>
           <Input
             placeholder="e.g. 192.168"
@@ -479,29 +506,9 @@ export function HistoryPage(): React.JSX.Element {
               setIpFilter(data.value);
             }}
             size="small"
-            onKeyDown={(e): void => {
-              if (e.key === "Enter") applyFilters();
-            }}
           />
         </div>
 
-        <Button appearance="primary" size="small" onClick={applyFilters}>
-          Apply
-        </Button>
-
-        <Button
-          appearance="subtle"
-          size="small"
-          onClick={(): void => {
-            setRange("24h");
-            setOriginFilter("all");
-            setJailFilter("");
-            setIpFilter("");
-            setAppliedQuery({ page_size: PAGE_SIZE });
-          }}
-        >
-          Clear
-        </Button>
       </div>
 
       {/* ---------------------------------------------------------------- */}