filters with search autofill

crates/api/src/dto/event.rs

@@ -144,6 +144,10 @@ pub struct EventQueryParams {
     #[param(example = "core.webhook")]
     pub trigger_ref: Option<String>,
 
+    /// Filter by rule reference
+    #[param(example = "core.on_webhook")]
+    pub rule_ref: Option<String>,
+
     /// Filter by source ID
     #[param(example = 1)]
     pub source: Option<Id>,

crates/api/src/routes/events.rs

@@ -237,6 +237,16 @@ pub async fn list_events(
         filtered_events.retain(|e| e.source == Some(source_id));
     }
 
+    if let Some(rule_ref) = &query.rule_ref {
+        let rule_ref_lower = rule_ref.to_lowercase();
+        filtered_events.retain(|e| {
+            e.rule_ref
+                .as_ref()
+                .map(|r| r.to_lowercase().contains(&rule_ref_lower))
+                .unwrap_or(false)
+        });
+    }
+
     // Calculate pagination
     let total = filtered_events.len() as u64;
     let start = query.offset() as usize;

web/src/api/services/EventsService.ts

@@ -2,12 +2,12 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { ApiResponse_EventResponse } from '../models/ApiResponse_EventResponse';
+import type { ApiResponse_EventResponse } from "../models/ApiResponse_EventResponse";
-import type { i64 } from '../models/i64';
+import type { i64 } from "../models/i64";
-import type { PaginatedResponse_EventSummary } from '../models/PaginatedResponse_EventSummary';
+import type { PaginatedResponse_EventSummary } from "../models/PaginatedResponse_EventSummary";
-import type { CancelablePromise } from '../core/CancelablePromise';
+import type { CancelablePromise } from "../core/CancelablePromise";
-import { OpenAPI } from '../core/OpenAPI';
+import { OpenAPI } from "../core/OpenAPI";
-import { request as __request } from '../core/request';
+import { request as __request } from "../core/request";
 export class EventsService {
   /**
    * List all events with pagination and optional filters
@@ -17,6 +17,7 @@ export class EventsService {
   public static listEvents({
     trigger,
     triggerRef,
+    ruleRef,
     source,
     page,
     perPage,
@@ -24,33 +25,38 @@ export class EventsService {
     /**
      * Filter by trigger ID
      */
-        trigger?: (null | i64),
+    trigger?: null | i64;
     /**
      * Filter by trigger reference
      */
-        triggerRef?: string | null,
+    triggerRef?: string | null;
+    /**
+     * Filter by rule reference
+     */
+    ruleRef?: string | null;
     /**
      * Filter by source ID
      */
-        source?: (null | i64),
+    source?: null | i64;
     /**
      * Page number (1-indexed)
      */
-        page?: number,
+    page?: number;
     /**
      * Items per page
      */
-        perPage?: number,
+    perPage?: number;
   }): CancelablePromise<PaginatedResponse_EventSummary> {
     return __request(OpenAPI, {
-            method: 'GET',
+      method: "GET",
-            url: '/api/v1/events',
+      url: "/api/v1/events",
       query: {
-                'trigger': trigger,
+        trigger: trigger,
-                'trigger_ref': triggerRef,
+        trigger_ref: triggerRef,
-                'source': source,
+        rule_ref: ruleRef,
-                'page': page,
+        source: source,
-                'per_page': perPage,
+        page: page,
+        per_page: perPage,
       },
       errors: {
         401: `Unauthorized`,
@@ -69,13 +75,13 @@ export class EventsService {
     /**
      * Event ID
      */
-        id: number,
+    id: number;
   }): CancelablePromise<ApiResponse_EventResponse> {
     return __request(OpenAPI, {
-            method: 'GET',
+      method: "GET",
-            url: '/api/v1/events/{id}',
+      url: "/api/v1/events/{id}",
       path: {
-                'id': id,
+        id: id,
       },
       errors: {
         401: `Unauthorized`,

web/src/components/common/AutocompleteInput.tsx

@@ -0,0 +1,216 @@
+import { useState, useRef, useEffect, useCallback, memo } from "react";
+
+interface AutocompleteInputProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  suggestions: string[];
+  placeholder?: string;
+}
+
+/**
+ * A text input with dropdown autocomplete suggestions.
+ * Allows free-text entry — selecting a suggestion simply fills the input.
+ * Memoized so it only re-renders when its own props change, not when
+ * sibling components (e.g. a results table) update.
+ */
+const AutocompleteInput = memo(
+  ({
+    label,
+    value,
+    onChange,
+    suggestions,
+    placeholder = "",
+  }: AutocompleteInputProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const listRef = useRef<HTMLUListElement>(null);
+
+    // Filter suggestions based on current input value (case-insensitive substring)
+    const filtered =
+      value.length === 0
+        ? suggestions
+        : suggestions.filter((s) =>
+            s.toLowerCase().includes(value.toLowerCase()),
+          );
+
+    // Clamp the highlighted index when the filtered list shrinks
+    const safeIndex =
+      highlightedIndex >= filtered.length ? -1 : highlightedIndex;
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(event.target as Node)
+        ) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    // Scroll highlighted item into view
+    useEffect(() => {
+      if (safeIndex >= 0 && listRef.current) {
+        const items = listRef.current.children;
+        if (items[safeIndex]) {
+          (items[safeIndex] as HTMLElement).scrollIntoView({
+            block: "nearest",
+          });
+        }
+      }
+    }, [safeIndex]);
+
+    const selectSuggestion = useCallback(
+      (suggestion: string) => {
+        onChange(suggestion);
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        // Keep focus on input after selection
+        inputRef.current?.focus();
+      },
+      [onChange],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (!isOpen || filtered.length === 0) {
+          // Open dropdown on arrow down even if closed
+          if (e.key === "ArrowDown" && filtered.length > 0) {
+            e.preventDefault();
+            setIsOpen(true);
+            setHighlightedIndex(0);
+          }
+          return;
+        }
+
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex((prev) =>
+              prev < filtered.length - 1 ? prev + 1 : 0,
+            );
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex((prev) =>
+              prev > 0 ? prev - 1 : filtered.length - 1,
+            );
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (safeIndex >= 0 && safeIndex < filtered.length) {
+              selectSuggestion(filtered[safeIndex]);
+            }
+            break;
+          case "Escape":
+            e.preventDefault();
+            setIsOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          case "Tab":
+            setIsOpen(false);
+            setHighlightedIndex(-1);
+            break;
+        }
+      },
+      [isOpen, filtered, safeIndex, selectSuggestion],
+    );
+
+    const handleInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange(e.target.value);
+        setIsOpen(true);
+        setHighlightedIndex(-1);
+      },
+      [onChange],
+    );
+
+    const handleFocus = useCallback(() => {
+      if (suggestions.length > 0) {
+        setIsOpen(true);
+      }
+    }, [suggestions.length]);
+
+    return (
+      <div ref={containerRef} className="relative">
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+        </label>
+        <input
+          ref={inputRef}
+          type="text"
+          value={value}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          autoComplete="off"
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+
+        {isOpen && filtered.length > 0 && (
+          <ul
+            ref={listRef}
+            className="absolute z-50 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-48 overflow-y-auto"
+          >
+            {filtered.map((suggestion, index) => {
+              const isHighlighted = index === safeIndex;
+              // Highlight the matching substring
+              const matchIndex = suggestion
+                .toLowerCase()
+                .indexOf(value.toLowerCase());
+              const before =
+                matchIndex >= 0
+                  ? suggestion.slice(0, matchIndex)
+                  : suggestion;
+              const match =
+                matchIndex >= 0
+                  ? suggestion.slice(matchIndex, matchIndex + value.length)
+                  : "";
+              const after =
+                matchIndex >= 0
+                  ? suggestion.slice(matchIndex + value.length)
+                  : "";
+
+              return (
+                <li
+                  key={suggestion}
+                  onMouseDown={(e) => {
+                    // Use mousedown instead of click to fire before input blur
+                    e.preventDefault();
+                    selectSuggestion(suggestion);
+                  }}
+                  onMouseEnter={() => setHighlightedIndex(index)}
+                  className={`px-3 py-2 text-sm cursor-pointer ${
+                    isHighlighted ? "bg-blue-50 text-blue-900" : "text-gray-900"
+                  } hover:bg-blue-50`}
+                >
+                  {value.length > 0 && matchIndex >= 0 ? (
+                    <>
+                      {before}
+                      <span className="font-semibold">{match}</span>
+                      {after}
+                    </>
+                  ) : (
+                    suggestion
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    );
+  },
+);
+
+AutocompleteInput.displayName = "AutocompleteInput";
+
+export default AutocompleteInput;

web/src/hooks/useEvents.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { EventsService, EnforcementsService, EnforcementStatus } from "@/api";
 import type { i64 } from "@/api";
 
@@ -7,6 +7,7 @@ interface EventsQueryParams {
   pageSize?: number;
   trigger?: i64 | null;
   triggerRef?: string | null;
+  ruleRef?: string | null;
   source?: i64 | null;
 }
 
@@ -29,10 +30,12 @@ export function useEvents(params?: EventsQueryParams) {
         perPage: params?.pageSize || 50,
         trigger: params?.trigger,
         triggerRef: params?.triggerRef,
+        ruleRef: params?.ruleRef,
         source: params?.source,
       });
     },
     staleTime: 30000, // 30 seconds
+    placeholderData: keepPreviousData,
   });
 }
 
@@ -63,6 +66,7 @@ export function useEnforcements(params?: EnforcementsQueryParams) {
       });
     },
     staleTime: 30000,
+    placeholderData: keepPreviousData,
   });
 }
 

web/src/hooks/useExecutions.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { ExecutionsService } from "@/api";
 import type { ExecutionStatus } from "@/api";
 
@@ -43,6 +43,8 @@ export function useExecutions(params?: ExecutionsQueryParams) {
     staleTime: hasFilters ? 5000 : 30000,
     // Refetch in background when filters change to get latest data
     refetchOnMount: hasFilters ? "always" : true,
+    // Keep previous results visible while new data loads (prevents flash of empty state)
+    placeholderData: keepPreviousData,
   });
 }
 

web/src/hooks/useFilterSuggestions.ts

@@ -0,0 +1,91 @@
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  PacksService,
+  RulesService,
+  ActionsService,
+  TriggersService,
+} from "@/api";
+import type {
+  PaginatedResponse_PackSummary,
+  PaginatedResponse_RuleSummary,
+  PaginatedResponse_ActionSummary,
+  PaginatedResponse_TriggerSummary,
+} from "@/api";
+
+/**
+ * Fetches all packs, rules, actions, and triggers and returns sorted
+ * arrays of their refs for use as autocomplete suggestions.
+ *
+ * Data is cached with a long staleTime (5 minutes) since entity definitions
+ * change infrequently.  Individual pages can augment these base suggestions
+ * with refs discovered via WebSocket notifications.
+ */
+export function useFilterSuggestions() {
+  const { data: packsData } = useQuery<PaginatedResponse_PackSummary>({
+    queryKey: ["filter-suggestions", "packs"],
+    queryFn: () => PacksService.listPacks({ page: 1, pageSize: 200 }),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: rulesData } = useQuery<PaginatedResponse_RuleSummary>({
+    queryKey: ["filter-suggestions", "rules"],
+    queryFn: () => RulesService.listRules({ page: 1, pageSize: 200 }),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: actionsData } = useQuery<PaginatedResponse_ActionSummary>({
+    queryKey: ["filter-suggestions", "actions"],
+    queryFn: () => ActionsService.listActions({ page: 1, pageSize: 200 }),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: triggersData } = useQuery<PaginatedResponse_TriggerSummary>({
+    queryKey: ["filter-suggestions", "triggers"],
+    queryFn: () => TriggersService.listTriggers({ page: 1, pageSize: 200 }),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const packNames = useMemo(() => {
+    const refs = packsData?.data?.map((p) => p.ref) || [];
+    return [...new Set(refs)].sort();
+  }, [packsData]);
+
+  const ruleRefs = useMemo(() => {
+    const refs = rulesData?.data?.map((r) => r.ref) || [];
+    return [...new Set(refs)].sort();
+  }, [rulesData]);
+
+  const actionRefs = useMemo(() => {
+    const refs = actionsData?.data?.map((a) => a.ref) || [];
+    return [...new Set(refs)].sort();
+  }, [actionsData]);
+
+  const triggerRefs = useMemo(() => {
+    const refs = triggersData?.data?.map((t) => t.ref) || [];
+    return [...new Set(refs)].sort();
+  }, [triggersData]);
+
+  return { packNames, ruleRefs, actionRefs, triggerRefs };
+}
+
+/**
+ * Merge base suggestion arrays with additional refs discovered at runtime
+ * (e.g. from WebSocket notifications or loaded page data).
+ * Returns a new sorted, deduplicated array only when the inputs change.
+ */
+export function useMergedSuggestions(
+  base: string[],
+  ...additionalSets: string[][]
+): string[] {
+  return useMemo(() => {
+    const hasAdditional = additionalSets.some((s) => s.length > 0);
+    if (!hasAdditional) return base;
+    const merged = new Set(base);
+    for (const set of additionalSets) {
+      for (const item of set) merged.add(item);
+    }
+    return [...merged].sort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [base, ...additionalSets]);
+}

web/src/pages/enforcements/EnforcementsPage.tsx

@@ -5,8 +5,13 @@ import { EnforcementStatus } from "@/api";
 import { useState, useMemo, memo, useCallback, useEffect } from "react";
 import { Search, X } from "lucide-react";
 import MultiSelect from "@/components/common/MultiSelect";
+import AutocompleteInput from "@/components/common/AutocompleteInput";
+import {
+  useFilterSuggestions,
+  useMergedSuggestions,
+} from "@/hooks/useFilterSuggestions";
 
-// Memoized filter input component to prevent re-render on WebSocket updates
+// Memoized filter input component for non-ref fields (e.g. Event ID)
 const FilterInput = memo(
   ({
     label,
@@ -43,136 +48,7 @@ const STATUS_OPTIONS = [
   { value: EnforcementStatus.DISABLED, label: "Disabled" },
 ];
 
-export default function EnforcementsPage() {
+const getStatusColor = (status: EnforcementStatus) => {
-  const [searchParams] = useSearchParams();
-
-  // Initialize filters from URL query parameters
-  const [page, setPage] = useState(1);
-  const pageSize = 50;
-  const [searchFilters, setSearchFilters] = useState({
-    rule: searchParams.get("rule_ref") || "",
-    trigger: searchParams.get("trigger_ref") || "",
-    event: searchParams.get("event") || "",
-  });
-  const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
-    const status = searchParams.get("status");
-    return status ? [status] : [];
-  });
-
-  // Debounced filter state for API calls
-  const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
-  const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
-
-  // Debounce filter changes (500ms delay)
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedFilters(searchFilters);
-    }, 500);
-
-    return () => clearTimeout(timer);
-  }, [searchFilters]);
-
-  // Debounce status changes (300ms delay - shorter since it's a selection)
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedStatuses(selectedStatuses);
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, [selectedStatuses]);
-
-  const queryParams = useMemo(() => {
-    const params: any = { page, pageSize };
-    if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
-    if (debouncedFilters.event) {
-      const eventId = parseInt(debouncedFilters.event, 10);
-      if (!isNaN(eventId)) {
-        params.event = eventId;
-      }
-    }
-
-    // Include status filter if exactly one status is selected
-    // API only supports single status, so we use the first one for filtering
-    // and show all results if multiple are selected
-    if (debouncedStatuses.length === 1) {
-      params.status = debouncedStatuses[0] as EnforcementStatus;
-    }
-
-    return params;
-  }, [page, pageSize, debouncedFilters, debouncedStatuses]);
-
-  const { data, isLoading, error } = useEnforcements(queryParams);
-
-  // Subscribe to real-time updates for all enforcements
-  const { isConnected } = useEnforcementStream({ enabled: true });
-
-  const enforcements = data?.data || [];
-  const total = data?.pagination?.total_items || 0;
-  const totalPages = Math.ceil(total / pageSize);
-
-  // Client-side filtering for multiple status selection and rule_ref (when > 1 status selected)
-  const filteredEnforcements = useMemo(() => {
-    let filtered = enforcements;
-
-    // Filter by rule_ref (client-side since API doesn't support it)
-    if (debouncedFilters.rule) {
-      filtered = filtered.filter((enf: any) =>
-        enf.rule_ref
-          .toLowerCase()
-          .includes(debouncedFilters.rule.toLowerCase()),
-      );
-    }
-
-    // If multiple statuses selected, filter client-side
-    if (debouncedStatuses.length > 1) {
-      filtered = filtered.filter((enf: any) =>
-        debouncedStatuses.includes(enf.status),
-      );
-    }
-
-    return filtered;
-  }, [enforcements, debouncedFilters.rule, debouncedStatuses]);
-
-  const handleFilterChange = useCallback((field: string, value: string) => {
-    setSearchFilters((prev) => ({ ...prev, [field]: value }));
-    setPage(1); // Reset to first page on filter change
-  }, []);
-
-  const clearFilters = useCallback(() => {
-    setSearchFilters({
-      rule: "",
-      trigger: "",
-      event: "",
-    });
-    setSelectedStatuses([]);
-    setPage(1); // Reset to first page
-  }, []);
-
-  const hasActiveFilters =
-    Object.values(searchFilters).some((v) => v !== "") ||
-    selectedStatuses.length > 0;
-
-  if (isLoading) {
-    return (
-      <div className="p-6">
-        <div className="flex items-center justify-center h-64">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="p-6">
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
-          <p>Error: {(error as Error).message}</p>
-        </div>
-      </div>
-    );
-  }
-
-  const getStatusColor = (status: EnforcementStatus) => {
   switch (status) {
     case EnforcementStatus.PROCESSED:
       return "bg-green-100 text-green-800";
@@ -183,19 +59,17 @@ export default function EnforcementsPage() {
     default:
       return "bg-gray-100 text-gray-800";
   }
-  };
+};
 
-  const getConditionBadge = (condition: string) => {
+const getConditionBadge = (condition: string) => {
-    const colors = {
+  const colors: Record<string, string> = {
     all: "bg-purple-100 text-purple-800",
     any: "bg-indigo-100 text-indigo-800",
   };
-    return (
+  return colors[condition] || "bg-gray-100 text-gray-800";
-      colors[condition as keyof typeof colors] || "bg-gray-100 text-gray-800"
+};
-    );
-  };
 
-  const formatTime = (timestamp: string) => {
+const formatTime = (timestamp: string) => {
   const date = new Date(timestamp);
   const now = new Date();
   const diff = now.getTime() - date.getTime();
@@ -204,87 +78,68 @@ export default function EnforcementsPage() {
   if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
   if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
   return date.toLocaleDateString();
-  };
+};
 
-  const formatDate = (dateString: string) => {
+const formatDate = (dateString: string) => {
   return new Date(dateString).toLocaleString();
-  };
+};
 
+// Memoized results table component - only re-renders when query data changes,
+// NOT when the user types in filter inputs.
+const EnforcementsResultsTable = memo(
+  ({
+    enforcements,
+    isLoading,
+    isFetching,
+    error,
+    hasActiveFilters,
+    clearFilters,
+    page,
+    setPage,
+    pageSize,
+    total,
+  }: {
+    enforcements: any[];
+    isLoading: boolean;
+    isFetching: boolean;
+    error: Error | null;
+    hasActiveFilters: boolean;
+    clearFilters: () => void;
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    total: number;
+  }) => {
+    const totalPages = Math.ceil(total / pageSize);
+
+    // Initial load (no cached data yet)
+    if (isLoading && enforcements.length === 0) {
       return (
-    <div className="p-6">
+        <div className="bg-white shadow rounded-lg">
-      <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center justify-center h-64">
-        <div>
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
-          <h1 className="text-3xl font-bold">Enforcements</h1>
-          {isLoading && hasActiveFilters && (
-            <p className="text-sm text-gray-500 mt-1">
-              Searching enforcements...
-            </p>
-          )}
           </div>
-        {isConnected && (
-          <div className="flex items-center gap-2 text-sm text-green-600">
-            <div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
-            <span>Live Updates</span>
-          </div>
-        )}
         </div>
+      );
+    }
 
-      {/* Search Filters */}
+    // Error with no cached data to show
-      <div className="bg-white shadow rounded-lg p-4 mb-6">
+    if (error && enforcements.length === 0) {
-        <div className="flex items-center justify-between mb-4">
+      return (
-          <div className="flex items-center gap-2">
+        <div className="bg-white shadow rounded-lg">
-            <Search className="h-5 w-5 text-gray-400" />
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
-            <h2 className="text-lg font-semibold">Filter Enforcements</h2>
+            <p>Error: {error.message}</p>
-          </div>
-          {hasActiveFilters && (
-            <button
-              onClick={clearFilters}
-              className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
-            >
-              <X className="h-4 w-4" />
-              Clear Filters
-            </button>
-          )}
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <FilterInput
-            label="Rule"
-            value={searchFilters.rule}
-            onChange={(value) => handleFilterChange("rule", value)}
-            placeholder="e.g., core.on_timer"
-          />
-          <FilterInput
-            label="Trigger"
-            value={searchFilters.trigger}
-            onChange={(value) => handleFilterChange("trigger", value)}
-            placeholder="e.g., core.webhook"
-          />
-          <FilterInput
-            label="Event ID"
-            value={searchFilters.event}
-            onChange={(value) => handleFilterChange("event", value)}
-            placeholder="e.g., 123"
-          />
-          <div>
-            <MultiSelect
-              label="Status"
-              options={STATUS_OPTIONS}
-              value={selectedStatuses}
-              onChange={setSelectedStatuses}
-              placeholder="All Statuses"
-            />
-          </div>
           </div>
         </div>
+      );
+    }
 
-      {filteredEnforcements.length === 0 ? (
+    // Empty results
+    if (enforcements.length === 0) {
+      return (
         <div className="bg-white p-12 text-center rounded-lg shadow">
-          <p>
+          <p>No enforcements found</p>
-            {enforcements.length === 0
+          {hasActiveFilters && (
-              ? "No enforcements found"
-              : "No enforcements match the selected filters"}
-          </p>
-          {enforcements.length > 0 && hasActiveFilters && (
             <button
               onClick={clearFilters}
               className="mt-3 text-sm text-blue-600 hover:text-blue-800"
@@ -293,8 +148,25 @@ export default function EnforcementsPage() {
             </button>
           )}
         </div>
-      ) : (
+      );
-        <>
+    }
+
+    return (
+      <div className="relative">
+        {/* Inline loading overlay - shows on top of previous results while fetching */}
+        {isFetching && (
+          <div className="absolute inset-0 bg-white/60 z-10 flex items-center justify-center rounded-lg">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+          </div>
+        )}
+
+        {/* Non-fatal error banner (data still shown from cache) */}
+        {error && (
+          <div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+            <p>Error refreshing: {error.message}</p>
+          </div>
+        )}
+
         <div className="bg-white shadow rounded-lg overflow-hidden">
           <table className="min-w-full">
             <thead className="bg-gray-50">
@@ -323,7 +195,7 @@ export default function EnforcementsPage() {
               </tr>
             </thead>
             <tbody className="bg-white divide-y divide-gray-200">
-                {filteredEnforcements.map((enforcement: any) => (
+              {enforcements.map((enforcement: any) => (
                 <tr key={enforcement.id} className="hover:bg-gray-50">
                   <td className="px-6 py-4 font-mono text-sm">
                     <Link
@@ -446,8 +318,219 @@ export default function EnforcementsPage() {
             </div>
           </div>
         )}
-        </>
+      </div>
+    );
+  },
+);
+
+EnforcementsResultsTable.displayName = "EnforcementsResultsTable";
+
+export default function EnforcementsPage() {
+  const [searchParams] = useSearchParams();
+
+  // --- Filter input state (updates immediately on keystroke) ---
+  const [page, setPage] = useState(1);
+  const pageSize = 50;
+  const [searchFilters, setSearchFilters] = useState({
+    rule: searchParams.get("rule_ref") || "",
+    trigger: searchParams.get("trigger_ref") || "",
+    event: searchParams.get("event") || "",
+  });
+  const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
+    const status = searchParams.get("status");
+    return status ? [status] : [];
+  });
+
+  // --- Debounced filter state (drives API calls, updates after delay) ---
+  const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
+  const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedFilters(searchFilters);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchFilters]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedStatuses(selectedStatuses);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [selectedStatuses]);
+
+  // --- Autocomplete suggestions ---
+  const baseSuggestions = useFilterSuggestions();
+
+  // --- Build query params from debounced state ---
+  const queryParams = useMemo(() => {
+    const params: any = { page, pageSize };
+    if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
+    if (debouncedFilters.event) {
+      const eventId = parseInt(debouncedFilters.event, 10);
+      if (!isNaN(eventId)) {
+        params.event = eventId;
+      }
+    }
+    if (debouncedStatuses.length === 1) {
+      params.status = debouncedStatuses[0] as EnforcementStatus;
+    }
+    return params;
+  }, [page, pageSize, debouncedFilters, debouncedStatuses]);
+
+  const { data, isLoading, isFetching, error } = useEnforcements(queryParams);
+  const { isConnected } = useEnforcementStream({ enabled: true });
+
+  const enforcements = useMemo(() => data?.data || [], [data]);
+  const total = data?.pagination?.total_items || 0;
+
+  // Derive refs from currently-loaded enforcement data (no setState needed)
+  const loadedRefs = useMemo(() => {
+    const rules = new Set<string>();
+    const triggers = new Set<string>();
+
+    for (const enf of enforcements) {
+      if (enf.rule_ref) rules.add(enf.rule_ref as string);
+      if (enf.trigger_ref) triggers.add(enf.trigger_ref as string);
+    }
+
+    return {
+      rules: [...rules],
+      triggers: [...triggers],
+    };
+  }, [enforcements]);
+
+  // Merge base entity suggestions + loaded data refs
+  const ruleSuggestions = useMergedSuggestions(
+    baseSuggestions.ruleRefs,
+    loadedRefs.rules,
+  );
+  const triggerSuggestions = useMergedSuggestions(
+    baseSuggestions.triggerRefs,
+    loadedRefs.triggers,
+  );
+
+  // Client-side filtering for rule_ref and multiple status selection
+  const filteredEnforcements = useMemo(() => {
+    let filtered = enforcements;
+
+    // Filter by rule_ref (client-side since API doesn't support it)
+    if (debouncedFilters.rule) {
+      filtered = filtered.filter((enf: any) =>
+        enf.rule_ref
+          .toLowerCase()
+          .includes(debouncedFilters.rule.toLowerCase()),
+      );
+    }
+
+    // If multiple statuses selected, filter client-side
+    if (debouncedStatuses.length > 1) {
+      filtered = filtered.filter((enf: any) =>
+        debouncedStatuses.includes(enf.status),
+      );
+    }
+
+    return filtered;
+  }, [enforcements, debouncedFilters.rule, debouncedStatuses]);
+
+  const handleFilterChange = useCallback((field: string, value: string) => {
+    setSearchFilters((prev) => ({ ...prev, [field]: value }));
+    setPage(1);
+  }, []);
+
+  const clearFilters = useCallback(() => {
+    setSearchFilters({ rule: "", trigger: "", event: "" });
+    setSelectedStatuses([]);
+    setPage(1);
+  }, []);
+
+  const hasActiveFilters =
+    Object.values(searchFilters).some((v) => v !== "") ||
+    selectedStatuses.length > 0;
+
+  return (
+    <div className="p-6">
+      {/* Header - always visible */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold">Enforcements</h1>
+          {isFetching && hasActiveFilters && (
+            <p className="text-sm text-gray-500 mt-1">
+              Searching enforcements...
+            </p>
           )}
         </div>
+        {isConnected && (
+          <div className="flex items-center gap-2 text-sm text-green-600">
+            <div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
+            <span>Live Updates</span>
+          </div>
+        )}
+      </div>
+
+      {/* Filter section - always mounted, never unmounts during loading */}
+      <div className="bg-white shadow rounded-lg p-4 mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Search className="h-5 w-5 text-gray-400" />
+            <h2 className="text-lg font-semibold">Filter Enforcements</h2>
+          </div>
+          {hasActiveFilters && (
+            <button
+              onClick={clearFilters}
+              className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
+            >
+              <X className="h-4 w-4" />
+              Clear Filters
+            </button>
+          )}
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <AutocompleteInput
+            label="Rule"
+            value={searchFilters.rule}
+            onChange={(value) => handleFilterChange("rule", value)}
+            suggestions={ruleSuggestions}
+            placeholder="e.g., core.on_timer"
+          />
+          <AutocompleteInput
+            label="Trigger"
+            value={searchFilters.trigger}
+            onChange={(value) => handleFilterChange("trigger", value)}
+            suggestions={triggerSuggestions}
+            placeholder="e.g., core.webhook"
+          />
+          <FilterInput
+            label="Event ID"
+            value={searchFilters.event}
+            onChange={(value) => handleFilterChange("event", value)}
+            placeholder="e.g., 123"
+          />
+          <div>
+            <MultiSelect
+              label="Status"
+              options={STATUS_OPTIONS}
+              value={selectedStatuses}
+              onChange={setSelectedStatuses}
+              placeholder="All Statuses"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Results section - isolated from filter state, only depends on query results */}
+      <EnforcementsResultsTable
+        enforcements={filteredEnforcements}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        error={error as Error | null}
+        hasActiveFilters={hasActiveFilters}
+        clearFilters={clearFilters}
+        page={page}
+        setPage={setPage}
+        pageSize={pageSize}
+        total={total}
+      />
+    </div>
   );
 }

web/src/pages/events/EventsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo, memo, useEffect } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEvents } from "@/hooks/useEvents";
@@ -6,98 +6,19 @@ import {
   useEntityNotifications,
   Notification,
 } from "@/contexts/WebSocketContext";
+import { Search, X } from "lucide-react";
+import AutocompleteInput from "@/components/common/AutocompleteInput";
+import {
+  useFilterSuggestions,
+  useMergedSuggestions,
+} from "@/hooks/useFilterSuggestions";
 import type { EventSummary } from "@/api";
 
-export default function EventsPage() {
+const formatDate = (dateString: string) => {
-  const [searchParams] = useSearchParams();
-  const queryClient = useQueryClient();
-  const [page, setPage] = useState(1);
-  const [triggerFilter, setTriggerFilter] = useState<string>(
-    searchParams.get("trigger_ref") || "",
-  );
-  const pageSize = 50;
-
-  // Set up WebSocket for real-time event updates with stable callback
-  const handleEventNotification = useCallback(
-    (notification: Notification) => {
-      // Extract event data from notification payload (flat structure)
-      if (notification.notification_type === "event_created") {
-        const payload = notification.payload as any;
-
-        // Create EventSummary from notification data
-        const newEvent: EventSummary = {
-          id: payload.id,
-          trigger: payload.trigger,
-          trigger_ref: payload.trigger_ref,
-          rule: payload.rule,
-          rule_ref: payload.rule_ref,
-          source: payload.source,
-          source_ref: payload.source_ref,
-          has_payload:
-            payload.payload !== null && payload.payload !== undefined,
-          created: payload.created,
-        };
-
-        // Update the query cache directly instead of invalidating
-        queryClient.setQueryData(
-          [
-            "events",
-            { page, pageSize, triggerRef: triggerFilter || undefined },
-          ],
-          (oldData: any) => {
-            if (!oldData) return oldData;
-
-            // Check if filtering and event matches filter
-            if (triggerFilter && newEvent.trigger_ref !== triggerFilter) {
-              return oldData;
-            }
-
-            // Add new event to the beginning of the list if on first page
-            if (page === 1) {
-              return {
-                ...oldData,
-                data: [newEvent, ...oldData.data].slice(0, pageSize),
-                pagination: {
-                  ...oldData.pagination,
-                  total_items: (oldData.pagination?.total_items || 0) + 1,
-                },
-              };
-            }
-
-            // For other pages, just update the total count
-            return {
-              ...oldData,
-              pagination: {
-                ...oldData.pagination,
-                total_items: (oldData.pagination?.total_items || 0) + 1,
-              },
-            };
-          },
-        );
-      }
-    },
-    [queryClient, page, pageSize, triggerFilter],
-  );
-
-  const { connected: wsConnected } = useEntityNotifications(
-    "event",
-    handleEventNotification,
-  );
-
-  const { data, isLoading, error } = useEvents({
-    page,
-    pageSize,
-    triggerRef: triggerFilter || undefined,
-  });
-
-  const events = data?.data || [];
-  const total = data?.pagination?.total_items || 0;
-
-  const formatDate = (dateString: string) => {
   return new Date(dateString).toLocaleString();
-  };
+};
 
-  const formatTime = (timestamp: string) => {
+const formatTime = (timestamp: string) => {
   const date = new Date(timestamp);
   const now = new Date();
   const diff = now.getTime() - date.getTime();
@@ -106,90 +27,62 @@ export default function EventsPage() {
   if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
   if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
   return date.toLocaleDateString();
-  };
+};
 
+// Memoized results table component - only re-renders when query data changes,
+// NOT when the user types in filter inputs.
+const EventsResultsTable = memo(
+  ({
+    events,
+    isLoading,
+    isFetching,
+    error,
+    hasActiveFilters,
+    clearFilters,
+    page,
+    setPage,
+    pageSize,
+    total,
+  }: {
+    events: EventSummary[];
+    isLoading: boolean;
+    isFetching: boolean;
+    error: Error | null;
+    hasActiveFilters: boolean;
+    clearFilters: () => void;
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    total: number;
+  }) => {
     const totalPages = total ? Math.ceil(total / pageSize) : 0;
 
+    // Initial load (no cached data yet)
+    if (isLoading && events.length === 0) {
       return (
-    <div className="p-6">
+        <div className="bg-white shadow rounded-lg">
-      {/* Header */}
+          <div className="flex items-center justify-center h-64">
-      <div className="mb-6">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
-        <div className="flex items-center justify-between">
+            <p className="ml-4 text-gray-600">Loading events...</p>
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">Events</h1>
-            <p className="mt-2 text-gray-600">
-              Event instances generated by sensors and triggers
-            </p>
-          </div>
-          {wsConnected && (
-            <div className="flex items-center gap-2 text-sm text-green-600">
-              <div className="w-2 h-2 bg-green-600 rounded-full animate-pulse"></div>
-              <span>Live updates</span>
-            </div>
-          )}
           </div>
         </div>
+      );
+    }
 
-      {/* Filters */}
+    // Error with no cached data to show
-      <div className="bg-white rounded-lg shadow mb-6 p-4">
+    if (error && events.length === 0) {
-        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+      return (
-          <div className="flex-1 max-w-md">
+        <div className="bg-white shadow rounded-lg p-12 text-center">
-            <label
-              htmlFor="trigger-filter"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Filter by Trigger
-            </label>
-            <input
-              id="trigger-filter"
-              type="text"
-              value={triggerFilter}
-              onChange={(e) => {
-                setTriggerFilter(e.target.value);
-                setPage(1); // Reset to first page on filter change
-              }}
-              placeholder="e.g., core.webhook"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
-
-          {triggerFilter && (
-            <button
-              onClick={() => {
-                setTriggerFilter("");
-                setPage(1);
-              }}
-              className="px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
-            >
-              Clear Filter
-            </button>
-          )}
-        </div>
-
-        {data && (
-          <div className="mt-3 text-sm text-gray-600">
-            Showing {events.length} of {total} events
-            {triggerFilter && ` (filtered by "${triggerFilter}")`}
-          </div>
-        )}
-      </div>
-
-      {/* Events List */}
-      <div className="bg-white rounded-lg shadow overflow-hidden">
-        {isLoading ? (
-          <div className="p-12 text-center">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-            <p className="mt-4 text-gray-600">Loading events...</p>
-          </div>
-        ) : error ? (
-          <div className="p-12 text-center">
           <p className="text-red-600">Failed to load events</p>
-            <p className="text-sm text-gray-600 mt-2">
+          <p className="text-sm text-gray-600 mt-2">{error.message}</p>
-              {error instanceof Error ? error.message : "Unknown error"}
-            </p>
         </div>
-        ) : !events || events.length === 0 ? (
+      );
-          <div className="p-12 text-center">
+    }
+
+    // Empty results
+    if (events.length === 0) {
+      return (
+        <div className="bg-white shadow rounded-lg p-12 text-center">
           <svg
             className="mx-auto h-12 w-12 text-gray-400"
             fill="none"
@@ -205,13 +98,39 @@ export default function EventsPage() {
           </svg>
           <p className="mt-4 text-gray-600">No events found</p>
           <p className="text-sm text-gray-500 mt-1">
-              {triggerFilter
+            {hasActiveFilters
-                ? "Try adjusting your filter"
+              ? "Try adjusting your filters"
               : "Events will appear here when triggers fire"}
           </p>
+          {hasActiveFilters && (
+            <button
+              onClick={clearFilters}
+              className="mt-3 text-sm text-blue-600 hover:text-blue-800"
+            >
+              Clear filters
+            </button>
+          )}
         </div>
-        ) : (
+      );
-          <>
+    }
+
+    return (
+      <div className="relative">
+        {/* Inline loading overlay - shows on top of previous results while fetching */}
+        {isFetching && (
+          <div className="absolute inset-0 bg-white/60 z-10 flex items-center justify-center rounded-lg">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+          </div>
+        )}
+
+        {/* Non-fatal error banner (data still shown from cache) */}
+        {error && (
+          <div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+            <p>Error refreshing: {error.message}</p>
+          </div>
+        )}
+
+        <div className="bg-white shadow rounded-lg overflow-hidden">
           <div className="overflow-x-auto">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
@@ -231,18 +150,18 @@ export default function EventsPage() {
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                     Created
                   </th>
-                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Actions
-                    </th>
                 </tr>
               </thead>
               <tbody className="bg-white divide-y divide-gray-200">
                 {events.map((event) => (
                   <tr key={event.id} className="hover:bg-gray-50">
                     <td className="px-6 py-4 whitespace-nowrap">
-                        <span className="text-sm font-mono text-gray-900">
+                      <Link
-                          {event.id}
+                        to={`/events/${event.id}`}
-                        </span>
+                        className="text-sm font-mono text-blue-600 hover:text-blue-800"
+                      >
+                        #{event.id}
+                      </Link>
                     </td>
                     <td className="px-6 py-4">
                       <div className="text-sm">
@@ -297,19 +216,12 @@ export default function EventsPage() {
                         {formatDate(event.created)}
                       </div>
                     </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                        <Link
-                          to={`/events/${event.id}`}
-                          className="text-blue-600 hover:text-blue-900"
-                        >
-                          View Details
-                        </Link>
-                      </td>
                   </tr>
                 ))}
               </tbody>
             </table>
           </div>
+        </div>
 
         {/* Pagination */}
         {totalPages > 1 && (
@@ -358,9 +270,263 @@ export default function EventsPage() {
             </div>
           </div>
         )}
-          </>
+      </div>
+    );
+  },
+);
+
+EventsResultsTable.displayName = "EventsResultsTable";
+
+export default function EventsPage() {
+  const [searchParams] = useSearchParams();
+  const queryClient = useQueryClient();
+
+  // --- Filter input state (updates immediately on keystroke) ---
+  const [page, setPage] = useState(1);
+  const pageSize = 50;
+  const [searchFilters, setSearchFilters] = useState({
+    trigger: searchParams.get("trigger_ref") || "",
+    rule: searchParams.get("rule_ref") || "",
+  });
+
+  // --- Debounced filter state (drives API calls, updates after delay) ---
+  const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedFilters(searchFilters);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchFilters]);
+
+  // --- Autocomplete suggestions ---
+  const baseSuggestions = useFilterSuggestions();
+
+  // Additional refs discovered via WebSocket notifications (accumulated over time)
+  const [wsRefs, setWsRefs] = useState<{
+    triggers: string[];
+    rules: string[];
+  }>({ triggers: [], rules: [] });
+
+  // --- Build query params from debounced state ---
+  const queryParams = useMemo(() => {
+    const params: any = { page, pageSize };
+    if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
+    if (debouncedFilters.rule) params.ruleRef = debouncedFilters.rule;
+    return params;
+  }, [page, pageSize, debouncedFilters]);
+
+  // Set up WebSocket for real-time event updates with stable callback
+  const handleEventNotification = useCallback(
+    (notification: Notification) => {
+      if (notification.notification_type === "event_created") {
+        const payload = notification.payload as any;
+
+        const newEvent: EventSummary = {
+          id: payload.id,
+          trigger: payload.trigger,
+          trigger_ref: payload.trigger_ref,
+          rule: payload.rule,
+          rule_ref: payload.rule_ref,
+          source: payload.source,
+          source_ref: payload.source_ref,
+          has_payload:
+            payload.payload !== null && payload.payload !== undefined,
+          created: payload.created,
+        };
+
+        // Augment autocomplete suggestions with new refs from notification
+        setWsRefs((prev) => {
+          const newTriggers = new Set(prev.triggers);
+          const newRules = new Set(prev.rules);
+          let changed = false;
+
+          if (newEvent.trigger_ref && !newTriggers.has(newEvent.trigger_ref)) {
+            newTriggers.add(newEvent.trigger_ref);
+            changed = true;
+          }
+          if (newEvent.rule_ref && !newRules.has(newEvent.rule_ref)) {
+            newRules.add(newEvent.rule_ref);
+            changed = true;
+          }
+
+          if (!changed) return prev;
+          return {
+            triggers: [...newTriggers],
+            rules: [...newRules],
+          };
+        });
+
+        queryClient.setQueryData(["events", queryParams], (oldData: any) => {
+          if (!oldData) return oldData;
+
+          // Check if filtering and event matches filter
+          if (
+            debouncedFilters.trigger &&
+            newEvent.trigger_ref !== debouncedFilters.trigger
+          ) {
+            return oldData;
+          }
+          if (
+            debouncedFilters.rule &&
+            newEvent.rule_ref !== debouncedFilters.rule
+          ) {
+            return oldData;
+          }
+
+          // Add new event to the beginning of the list if on first page
+          if (page === 1) {
+            return {
+              ...oldData,
+              data: [newEvent, ...oldData.data].slice(0, pageSize),
+              pagination: {
+                ...oldData.pagination,
+                total_items: (oldData.pagination?.total_items || 0) + 1,
+              },
+            };
+          }
+
+          // For other pages, just update the total count
+          return {
+            ...oldData,
+            pagination: {
+              ...oldData.pagination,
+              total_items: (oldData.pagination?.total_items || 0) + 1,
+            },
+          };
+        });
+      }
+    },
+    [queryClient, queryParams, page, pageSize, debouncedFilters],
+  );
+
+  const { connected: wsConnected } = useEntityNotifications(
+    "event",
+    handleEventNotification,
+  );
+
+  const { data, isLoading, isFetching, error } = useEvents(queryParams);
+
+  const events = useMemo(() => data?.data || [], [data]);
+  const total = data?.pagination?.total_items || 0;
+
+  // Derive refs from currently-loaded event data (no setState needed)
+  const loadedRefs = useMemo(() => {
+    const triggers = new Set<string>();
+    const rules = new Set<string>();
+
+    for (const event of events) {
+      if (event.trigger_ref) triggers.add(event.trigger_ref);
+      if (event.rule_ref) rules.add(event.rule_ref);
+    }
+
+    return {
+      triggers: [...triggers],
+      rules: [...rules],
+    };
+  }, [events]);
+
+  // Merge base entity suggestions + loaded data refs + WebSocket refs
+  const triggerSuggestions = useMergedSuggestions(
+    baseSuggestions.triggerRefs,
+    loadedRefs.triggers,
+    wsRefs.triggers,
+  );
+  const ruleSuggestions = useMergedSuggestions(
+    baseSuggestions.ruleRefs,
+    loadedRefs.rules,
+    wsRefs.rules,
+  );
+
+  const handleFilterChange = useCallback((field: string, value: string) => {
+    setSearchFilters((prev) => ({ ...prev, [field]: value }));
+    setPage(1);
+  }, []);
+
+  const clearFilters = useCallback(() => {
+    setSearchFilters({ trigger: "", rule: "" });
+    setPage(1);
+  }, []);
+
+  const hasActiveFilters = Object.values(searchFilters).some((v) => v !== "");
+
+  return (
+    <div className="p-6">
+      {/* Header - always visible */}
+      <div className="mb-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Events</h1>
+            <p className="mt-2 text-gray-600">
+              Event instances generated by sensors and triggers
+            </p>
+            {isFetching && hasActiveFilters && (
+              <p className="text-sm text-gray-500 mt-1">Searching events...</p>
+            )}
+          </div>
+          {wsConnected && (
+            <div className="flex items-center gap-2 text-sm text-green-600">
+              <div className="w-2 h-2 bg-green-600 rounded-full animate-pulse"></div>
+              <span>Live updates</span>
+            </div>
           )}
         </div>
       </div>
+
+      {/* Filter section - always mounted, never unmounts during loading */}
+      <div className="bg-white shadow rounded-lg p-4 mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Search className="h-5 w-5 text-gray-400" />
+            <h2 className="text-lg font-semibold">Filter Events</h2>
+          </div>
+          {hasActiveFilters && (
+            <button
+              onClick={clearFilters}
+              className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
+            >
+              <X className="h-4 w-4" />
+              Clear Filters
+            </button>
+          )}
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <AutocompleteInput
+            label="Trigger"
+            value={searchFilters.trigger}
+            onChange={(value) => handleFilterChange("trigger", value)}
+            suggestions={triggerSuggestions}
+            placeholder="e.g., core.webhook"
+          />
+          <AutocompleteInput
+            label="Rule"
+            value={searchFilters.rule}
+            onChange={(value) => handleFilterChange("rule", value)}
+            suggestions={ruleSuggestions}
+            placeholder="e.g., core.on_webhook"
+          />
+        </div>
+        {data && (
+          <div className="mt-3 text-sm text-gray-600">
+            Showing {events.length} of {total} events
+            {hasActiveFilters && " (filtered)"}
+          </div>
+        )}
+      </div>
+
+      {/* Results section - isolated from filter state, only depends on query results */}
+      <EventsResultsTable
+        events={events}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        error={error as Error | null}
+        hasActiveFilters={hasActiveFilters}
+        clearFilters={clearFilters}
+        page={page}
+        setPage={setPage}
+        pageSize={pageSize}
+        total={total}
+      />
+    </div>
   );
 }

web/src/pages/executions/ExecutionsPage.tsx

@@ -5,8 +5,13 @@ import { ExecutionStatus } from "@/api";
 import { useState, useMemo, memo, useCallback, useEffect } from "react";
 import { Search, X } from "lucide-react";
 import MultiSelect from "@/components/common/MultiSelect";
+import AutocompleteInput from "@/components/common/AutocompleteInput";
+import {
+  useFilterSuggestions,
+  useMergedSuggestions,
+} from "@/hooks/useFilterSuggestions";
 
-// Memoized filter input component to prevent re-render on WebSocket updates
+// Memoized filter input component for non-ref fields (e.g. Executor ID)
 const FilterInput = memo(
   ({
     label,
@@ -50,128 +55,7 @@ const STATUS_OPTIONS = [
   { value: ExecutionStatus.ABANDONED, label: "Abandoned" },
 ];
 
-export default function ExecutionsPage() {
+const getStatusColor = (status: ExecutionStatus) => {
-  const [searchParams] = useSearchParams();
-
-  // Initialize filters from URL query parameters
-  const [page, setPage] = useState(1);
-  const pageSize = 50;
-  const [searchFilters, setSearchFilters] = useState({
-    pack: searchParams.get("pack_name") || "",
-    rule: searchParams.get("rule_ref") || "",
-    action: searchParams.get("action_ref") || "",
-    trigger: searchParams.get("trigger_ref") || "",
-    executor: searchParams.get("executor") || "",
-  });
-  const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
-    const status = searchParams.get("status");
-    return status ? [status] : [];
-  });
-
-  // Debounced filter state for API calls
-  const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
-  const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
-
-  // Debounce filter changes (500ms delay)
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedFilters(searchFilters);
-    }, 500);
-
-    return () => clearTimeout(timer);
-  }, [searchFilters]);
-
-  // Debounce status changes (300ms delay - shorter since it's a selection)
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedStatuses(selectedStatuses);
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, [selectedStatuses]);
-
-  const queryParams = useMemo(() => {
-    const params: any = { page, pageSize };
-    if (debouncedFilters.pack) params.packName = debouncedFilters.pack;
-    if (debouncedFilters.rule) params.ruleRef = debouncedFilters.rule;
-    if (debouncedFilters.action) params.actionRef = debouncedFilters.action;
-    if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
-    if (debouncedFilters.executor)
-      params.executor = parseInt(debouncedFilters.executor, 10);
-
-    // Include status filter if exactly one status is selected
-    // API only supports single status, so we use the first one for filtering
-    // and show all results if multiple are selected
-    if (debouncedStatuses.length === 1) {
-      params.status = debouncedStatuses[0] as ExecutionStatus;
-    }
-
-    return params;
-  }, [page, pageSize, debouncedFilters, debouncedStatuses]);
-
-  const { data, isLoading, error } = useExecutions(queryParams);
-
-  // Subscribe to real-time updates for all executions
-  const { isConnected } = useExecutionStream({ enabled: true });
-
-  const executions = data?.data || [];
-  const total = data?.pagination?.total_items || 0;
-  const totalPages = Math.ceil(total / pageSize);
-
-  // Client-side filtering for multiple status selection (when > 1 selected)
-  const filteredExecutions = useMemo(() => {
-    // If no statuses selected or only one (already filtered by API), show all
-    if (debouncedStatuses.length <= 1) {
-      return executions;
-    }
-    // If multiple statuses selected, filter client-side
-    return executions.filter((exec: any) =>
-      debouncedStatuses.includes(exec.status),
-    );
-  }, [executions, debouncedStatuses]);
-
-  const handleFilterChange = useCallback((field: string, value: string) => {
-    setSearchFilters((prev) => ({ ...prev, [field]: value }));
-    setPage(1); // Reset to first page on filter change
-  }, []);
-
-  const clearFilters = useCallback(() => {
-    setSearchFilters({
-      pack: "",
-      rule: "",
-      action: "",
-      trigger: "",
-      executor: "",
-    });
-    setSelectedStatuses([]);
-    setPage(1); // Reset to first page
-  }, []);
-
-  const hasActiveFilters =
-    Object.values(searchFilters).some((v) => v !== "") ||
-    selectedStatuses.length > 0;
-
-  if (isLoading) {
-    return (
-      <div className="p-6">
-        <div className="flex items-center justify-center h-64">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="p-6">
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
-          <p>Error: {(error as Error).message}</p>
-        </div>
-      </div>
-    );
-  }
-
-  const getStatusColor = (status: ExecutionStatus) => {
   switch (status) {
     case ExecutionStatus.COMPLETED:
       return "bg-green-100 text-green-800";
@@ -187,95 +71,64 @@ export default function ExecutionsPage() {
     default:
       return "bg-gray-100 text-gray-800";
   }
-  };
+};
 
+// Memoized results table component - only re-renders when query data changes,
+// NOT when the user types in filter inputs.
+const ExecutionsResultsTable = memo(
+  ({
+    executions,
+    isLoading,
+    isFetching,
+    error,
+    hasActiveFilters,
+    clearFilters,
+    page,
+    setPage,
+    pageSize,
+    total,
+  }: {
+    executions: any[];
+    isLoading: boolean;
+    isFetching: boolean;
+    error: Error | null;
+    hasActiveFilters: boolean;
+    clearFilters: () => void;
+    page: number;
+    setPage: (page: number) => void;
+    pageSize: number;
+    total: number;
+  }) => {
+    const totalPages = Math.ceil(total / pageSize);
+
+    // Initial load (no cached data yet)
+    if (isLoading && executions.length === 0) {
       return (
-    <div className="p-6">
+        <div className="bg-white shadow rounded-lg">
-      <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center justify-center h-64">
-        <div>
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
-          <h1 className="text-3xl font-bold">Executions</h1>
-          {isLoading && hasActiveFilters && (
-            <p className="text-sm text-gray-500 mt-1">
-              Searching executions...
-            </p>
-          )}
           </div>
-        {isConnected && (
-          <div className="flex items-center gap-2 text-sm text-green-600">
-            <div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
-            <span>Live Updates</span>
-          </div>
-        )}
         </div>
+      );
+    }
 
-      {/* Search Filters */}
+    // Error with no cached data to show
-      <div className="bg-white shadow rounded-lg p-4 mb-6">
+    if (error && executions.length === 0) {
-        <div className="flex items-center justify-between mb-4">
+      return (
-          <div className="flex items-center gap-2">
+        <div className="bg-white shadow rounded-lg">
-            <Search className="h-5 w-5 text-gray-400" />
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
-            <h2 className="text-lg font-semibold">Filter Executions</h2>
+            <p>Error: {error.message}</p>
-          </div>
-          {hasActiveFilters && (
-            <button
-              onClick={clearFilters}
-              className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
-            >
-              <X className="h-4 w-4" />
-              Clear Filters
-            </button>
-          )}
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
-          <FilterInput
-            label="Pack"
-            value={searchFilters.pack}
-            onChange={(value) => handleFilterChange("pack", value)}
-            placeholder="e.g., core"
-          />
-          <FilterInput
-            label="Rule"
-            value={searchFilters.rule}
-            onChange={(value) => handleFilterChange("rule", value)}
-            placeholder="e.g., core.on_timer"
-          />
-          <FilterInput
-            label="Action"
-            value={searchFilters.action}
-            onChange={(value) => handleFilterChange("action", value)}
-            placeholder="e.g., core.echo"
-          />
-          <FilterInput
-            label="Trigger"
-            value={searchFilters.trigger}
-            onChange={(value) => handleFilterChange("trigger", value)}
-            placeholder="e.g., core.timer"
-          />
-          <FilterInput
-            label="Executor ID"
-            value={searchFilters.executor}
-            onChange={(value) => handleFilterChange("executor", value)}
-            placeholder="e.g., 1"
-          />
-          <div>
-            <MultiSelect
-              label="Status"
-              options={STATUS_OPTIONS}
-              value={selectedStatuses}
-              onChange={setSelectedStatuses}
-              placeholder="All Statuses"
-            />
-          </div>
           </div>
         </div>
+      );
+    }
 
-      {filteredExecutions.length === 0 ? (
+    // Empty results
+    if (executions.length === 0) {
+      return (
         <div className="bg-white p-12 text-center rounded-lg shadow">
-          <p>
+          <p>No executions found</p>
-            {executions.length === 0
+          {hasActiveFilters && (
-              ? "No executions found"
-              : "No executions match the selected filters"}
-          </p>
-          {executions.length > 0 && hasActiveFilters && (
             <button
               onClick={clearFilters}
               className="mt-3 text-sm text-blue-600 hover:text-blue-800"
@@ -284,8 +137,25 @@ export default function ExecutionsPage() {
             </button>
           )}
         </div>
-      ) : (
+      );
-        <>
+    }
+
+    return (
+      <div className="relative">
+        {/* Inline loading overlay - shows on top of previous results while fetching */}
+        {isFetching && (
+          <div className="absolute inset-0 bg-white/60 z-10 flex items-center justify-center rounded-lg">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+          </div>
+        )}
+
+        {/* Non-fatal error banner (data still shown from cache) */}
+        {error && (
+          <div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+            <p>Error refreshing: {error.message}</p>
+          </div>
+        )}
+
         <div className="bg-white shadow rounded-lg overflow-hidden">
           <table className="min-w-full">
             <thead className="bg-gray-50">
@@ -311,7 +181,7 @@ export default function ExecutionsPage() {
               </tr>
             </thead>
             <tbody className="bg-white divide-y divide-gray-200">
-                {filteredExecutions.map((exec: any) => (
+              {executions.map((exec: any) => (
                 <tr key={exec.id} className="hover:bg-gray-50">
                   <td className="px-6 py-4 font-mono text-sm">
                     <Link
@@ -359,6 +229,8 @@ export default function ExecutionsPage() {
             </tbody>
           </table>
         </div>
+
+        {/* Pagination */}
         {totalPages > 1 && (
           <div className="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
             <div className="flex-1 flex justify-between sm:hidden">
@@ -384,12 +256,11 @@ export default function ExecutionsPage() {
                   <span className="font-medium">
                     {(page - 1) * pageSize + 1}
                   </span>{" "}
-                    to
+                  to{" "}
                   <span className="font-medium">
                     {Math.min(page * pageSize, total)}
                   </span>{" "}
-                    of &nbsp;
+                  of <span className="font-medium">{total}</span> executions
-                    <span className="font-medium">{total}</span> executions
                 </p>
               </div>
               <div>
@@ -413,8 +284,242 @@ export default function ExecutionsPage() {
             </div>
           </div>
         )}
-        </>
+      </div>
+    );
+  },
+);
+
+ExecutionsResultsTable.displayName = "ExecutionsResultsTable";
+
+export default function ExecutionsPage() {
+  const [searchParams] = useSearchParams();
+
+  // --- Filter input state (updates immediately on keystroke) ---
+  const [page, setPage] = useState(1);
+  const pageSize = 50;
+  const [searchFilters, setSearchFilters] = useState({
+    pack: searchParams.get("pack_name") || "",
+    rule: searchParams.get("rule_ref") || "",
+    action: searchParams.get("action_ref") || "",
+    trigger: searchParams.get("trigger_ref") || "",
+    executor: searchParams.get("executor") || "",
+  });
+  const [selectedStatuses, setSelectedStatuses] = useState<string[]>(() => {
+    const status = searchParams.get("status");
+    return status ? [status] : [];
+  });
+
+  // --- Debounced filter state (drives API calls, updates after delay) ---
+  const [debouncedFilters, setDebouncedFilters] = useState(searchFilters);
+  const [debouncedStatuses, setDebouncedStatuses] = useState(selectedStatuses);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedFilters(searchFilters);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchFilters]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedStatuses(selectedStatuses);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [selectedStatuses]);
+
+  // --- Autocomplete suggestions ---
+  const baseSuggestions = useFilterSuggestions();
+
+  // --- Build query params from debounced state ---
+  const queryParams = useMemo(() => {
+    const params: any = { page, pageSize };
+    if (debouncedFilters.pack) params.packName = debouncedFilters.pack;
+    if (debouncedFilters.rule) params.ruleRef = debouncedFilters.rule;
+    if (debouncedFilters.action) params.actionRef = debouncedFilters.action;
+    if (debouncedFilters.trigger) params.triggerRef = debouncedFilters.trigger;
+    if (debouncedFilters.executor)
+      params.executor = parseInt(debouncedFilters.executor, 10);
+    if (debouncedStatuses.length === 1) {
+      params.status = debouncedStatuses[0] as ExecutionStatus;
+    }
+    return params;
+  }, [page, pageSize, debouncedFilters, debouncedStatuses]);
+
+  const { data, isLoading, isFetching, error } = useExecutions(queryParams);
+  const { isConnected } = useExecutionStream({ enabled: true });
+
+  const executions = useMemo(() => data?.data || [], [data]);
+  const total = data?.pagination?.total_items || 0;
+
+  // Derive refs from currently-loaded execution data (no setState needed)
+  const loadedRefs = useMemo(() => {
+    const packs = new Set<string>();
+    const rules = new Set<string>();
+    const actions = new Set<string>();
+    const triggers = new Set<string>();
+
+    for (const exec of executions) {
+      if (exec.action_ref) {
+        const pack = (exec.action_ref as string).split(".")[0];
+        if (pack) packs.add(pack);
+        actions.add(exec.action_ref as string);
+      }
+      if (exec.rule_ref) rules.add(exec.rule_ref as string);
+      if (exec.trigger_ref) triggers.add(exec.trigger_ref as string);
+    }
+
+    return {
+      packs: [...packs],
+      rules: [...rules],
+      actions: [...actions],
+      triggers: [...triggers],
+    };
+  }, [executions]);
+
+  // Merge base entity suggestions + loaded data refs
+  const packSuggestions = useMergedSuggestions(
+    baseSuggestions.packNames,
+    loadedRefs.packs,
+  );
+  const ruleSuggestions = useMergedSuggestions(
+    baseSuggestions.ruleRefs,
+    loadedRefs.rules,
+  );
+  const actionSuggestions = useMergedSuggestions(
+    baseSuggestions.actionRefs,
+    loadedRefs.actions,
+  );
+  const triggerSuggestions = useMergedSuggestions(
+    baseSuggestions.triggerRefs,
+    loadedRefs.triggers,
+  );
+
+  // Client-side filtering for multiple status selection (when > 1 selected)
+  const filteredExecutions = useMemo(() => {
+    if (debouncedStatuses.length <= 1) return executions;
+    return executions.filter((exec: any) =>
+      debouncedStatuses.includes(exec.status),
+    );
+  }, [executions, debouncedStatuses]);
+
+  const handleFilterChange = useCallback((field: string, value: string) => {
+    setSearchFilters((prev) => ({ ...prev, [field]: value }));
+    setPage(1);
+  }, []);
+
+  const clearFilters = useCallback(() => {
+    setSearchFilters({
+      pack: "",
+      rule: "",
+      action: "",
+      trigger: "",
+      executor: "",
+    });
+    setSelectedStatuses([]);
+    setPage(1);
+  }, []);
+
+  const hasActiveFilters =
+    Object.values(searchFilters).some((v) => v !== "") ||
+    selectedStatuses.length > 0;
+
+  return (
+    <div className="p-6">
+      {/* Header - always visible */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-3xl font-bold">Executions</h1>
+          {isFetching && hasActiveFilters && (
+            <p className="text-sm text-gray-500 mt-1">
+              Searching executions...
+            </p>
           )}
         </div>
+        {isConnected && (
+          <div className="flex items-center gap-2 text-sm text-green-600">
+            <div className="h-2 w-2 rounded-full bg-green-600 animate-pulse" />
+            <span>Live Updates</span>
+          </div>
+        )}
+      </div>
+
+      {/* Filter section - always mounted, never unmounts during loading */}
+      <div className="bg-white shadow rounded-lg p-4 mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Search className="h-5 w-5 text-gray-400" />
+            <h2 className="text-lg font-semibold">Filter Executions</h2>
+          </div>
+          {hasActiveFilters && (
+            <button
+              onClick={clearFilters}
+              className="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900"
+            >
+              <X className="h-4 w-4" />
+              Clear Filters
+            </button>
+          )}
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
+          <AutocompleteInput
+            label="Pack"
+            value={searchFilters.pack}
+            onChange={(value) => handleFilterChange("pack", value)}
+            suggestions={packSuggestions}
+            placeholder="e.g., core"
+          />
+          <AutocompleteInput
+            label="Rule"
+            value={searchFilters.rule}
+            onChange={(value) => handleFilterChange("rule", value)}
+            suggestions={ruleSuggestions}
+            placeholder="e.g., core.on_timer"
+          />
+          <AutocompleteInput
+            label="Action"
+            value={searchFilters.action}
+            onChange={(value) => handleFilterChange("action", value)}
+            suggestions={actionSuggestions}
+            placeholder="e.g., core.echo"
+          />
+          <AutocompleteInput
+            label="Trigger"
+            value={searchFilters.trigger}
+            onChange={(value) => handleFilterChange("trigger", value)}
+            suggestions={triggerSuggestions}
+            placeholder="e.g., core.timer"
+          />
+          <FilterInput
+            label="Executor ID"
+            value={searchFilters.executor}
+            onChange={(value) => handleFilterChange("executor", value)}
+            placeholder="e.g., 1"
+          />
+          <div>
+            <MultiSelect
+              label="Status"
+              options={STATUS_OPTIONS}
+              value={selectedStatuses}
+              onChange={setSelectedStatuses}
+              placeholder="All Statuses"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Results section - isolated from filter state, only depends on query results */}
+      <ExecutionsResultsTable
+        executions={filteredExecutions}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        error={error as Error | null}
+        hasActiveFilters={hasActiveFilters}
+        clearFilters={clearFilters}
+        page={page}
+        setPage={setPage}
+        pageSize={pageSize}
+        total={total}
+      />
+    </div>
   );
 }