feat(ui): add filter bars to Errors and Logs tabs

packages/spotlight/src/ui/telemetry/components/events/EventList.tsx

@@ -1,55 +1,86 @@
 import CardList from "@spotlight/ui/telemetry/components/shared/CardList";
 import { OriginBadge } from "@spotlight/ui/telemetry/components/shared/OriginBadge";
 import TimeSince from "@spotlight/ui/telemetry/components/shared/TimeSince";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useSentryEvents } from "../../data/useSentryEvents";
+import useErrorFiltering from "../../hooks/useErrorFiltering";
 import { isErrorEvent } from "../../utils/sentry";
 import { truncateId } from "../../utils/text";
 import EmptyState from "../shared/EmptyState";
+import ListFilter from "../shared/ListFilter";
 import PlatformIcon from "../shared/PlatformIcon";
 import { EventSummary } from "./Event";
 
 export default function EventList({ traceId }: { traceId?: string }) {
   const events = useSentryEvents(traceId);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeFilters, setActiveFilters] = useState<string[]>([]);
 
-  const matchingEvents = events.filter(isErrorEvent);
+  const errorEvents = events.filter(isErrorEvent);
+  const { ERROR_FILTER_CONFIGS, filteredEvents } = useErrorFiltering(errorEvents, activeFilters, searchQuery);
 
-  return matchingEvents.length !== 0 ? (
-    <CardList>
-      {matchingEvents.map(e => {
-        return (
-          <Link
-            className="hover:bg-primary-900 flex cursor-pointer items-center gap-x-4 px-6 py-2"
-            key={e.event_id}
-            to={`/telemetry/errors/${e.event_id}/details`}
-          >
-            <PlatformIcon event={e} className="text-primary-300 rounded-md" />
-            <div className="text-primary-300 flex w-48 flex-col truncate font-mono text-sm">
-              <div className="flex items-center gap-x-2">
-                <div>{truncateId(e.event_id)}</div>
-                <OriginBadge sourceType={e.__sourceType} />
+  // Filtering is only exposed on the top-level Errors tab, not inside a trace's error list.
+  const showFilter = !traceId && errorEvents.length > 0;
+  const matchingEvents = traceId ? errorEvents : filteredEvents;
+
+  const list =
+    matchingEvents.length !== 0 ? (
+      <CardList>
+        {matchingEvents.map(e => {
+          return (
+            <Link
+              className="hover:bg-primary-900 flex cursor-pointer items-center gap-x-4 px-6 py-2"
+              key={e.event_id}
+              to={`/telemetry/errors/${e.event_id}/details`}
+            >
+              <PlatformIcon event={e} className="text-primary-300 rounded-md" />
+              <div className="text-primary-300 flex w-48 flex-col truncate font-mono text-sm">
+                <div className="flex items-center gap-x-2">
+                  <div>{truncateId(e.event_id)}</div>
+                  <OriginBadge sourceType={e.__sourceType} />
+                </div>
+                <span />
+                <TimeSince date={e.timestamp} />
+              </div>
+              <div className="flex-1 overflow-hidden">
+                <EventSummary event={e} />
               </div>
-              <span />
-              <TimeSince date={e.timestamp} />
-            </div>
-            <div className="flex-1 overflow-hidden">
-              <EventSummary event={e} />
-            </div>
-          </Link>
-        );
-      })}
-    </CardList>
-  ) : (
-    <EmptyState
-      variant={!traceId ? "full" : "simple"}
-      className={!traceId ? "h-full" : undefined}
-      title={!traceId ? "No Errors" : undefined}
-      description={
-        !traceId
-          ? "No errors captured yet. That's either very good news or your SDK isn't set up."
-          : "No errors in this trace."
-      }
-      showDocsLink={!traceId}
-    />
+            </Link>
+          );
+        })}
+      </CardList>
+    ) : (
+      <EmptyState
+        variant={!traceId ? "full" : "simple"}
+        className={!traceId ? "h-full" : undefined}
+        title={!traceId ? "No Errors" : undefined}
+        description={
+          !traceId
+            ? showFilter
+              ? "No errors match the current filters."
+              : "No errors captured yet. That's either very good news or your SDK isn't set up."
+            : "No errors in this trace."
+        }
+        showDocsLink={!traceId && !showFilter}
+      />
+    );
+
+  if (!showFilter) {
+    return list;
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <ListFilter
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        activeFilters={activeFilters}
+        setActiveFilters={setActiveFilters}
+        filterConfigs={ERROR_FILTER_CONFIGS}
+        searchPlaceholder="Search by message or exception type..."
+      />
+      <div className="flex-1 overflow-auto">{list}</div>
+    </div>
   );
 }

packages/spotlight/src/ui/telemetry/components/log/LogsList.tsx

@@ -13,16 +13,18 @@ import {
   DropdownMenuTrigger,
 } from "@spotlight/ui/ui/dropdownMenu";
 import Table from "@spotlight/ui/ui/table";
-import { type KeyboardEvent, useMemo } from "react";
+import { type KeyboardEvent, useMemo, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { LOGS_HEADERS, LOGS_SORT_KEYS, LOG_LEVEL_COLORS } from "../../constants";
 import { useSentryLogs } from "../../data/useSentryLogs";
 import useColumnVisibility from "../../hooks/useColumnVisibility";
+import useLogsFiltering from "../../hooks/useLogsFiltering";
 import useSort from "../../hooks/useSort";
 import type { SentryLogEventItem } from "../../types";
 import { formatTimestamp } from "../../utils/duration";
 import AnsiText from "../shared/AnsiText";
 import EmptyState from "../shared/EmptyState";
+import ListFilter from "../shared/ListFilter";
 import LogDetails from "./LogDetail";
 
 type LogsComparator = (a: SentryLogEventItem, b: SentryLogEventItem) => number;
@@ -50,16 +52,24 @@ const LogsList = ({ traceId }: { traceId?: string }) => {
   const { id: selectedLogId } = useParams();
   const navigate = useNavigate();
   const allLogs = useSentryLogs(traceId);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeFilters, setActiveFilters] = useState<string[]>([]);
   const { sort, toggleSortOrder } = useSort({ defaultSortType: LOGS_SORT_KEYS.timestamp });
   const { isColumnVisible, toggleColumn } = useColumnVisibility(LOGS_HEADERS.map(h => h.id));
 
+  const { LOGS_FILTER_CONFIGS, filteredLogs } = useLogsFiltering(allLogs, activeFilters, searchQuery);
+
+  // Filtering is only exposed on the top-level Logs tab, not inside a trace's log list.
+  const showFilter = !traceId && allLogs.length > 0;
+  const logs = traceId ? allLogs : filteredLogs;
+
   const logsData = useMemo(() => {
     const compareLogData = COMPARATORS[sort.active] || COMPARATORS[LOGS_SORT_KEYS.timestamp];
 
-    return allLogs.sort((a, b) => {
+    return [...logs].sort((a, b) => {
       return sort.asc ? compareLogData(a, b) : compareLogData(b, a);
     });
-  }, [allLogs, sort.active, sort.asc]);
+  }, [logs, sort.active, sort.asc]);
 
   const handleRowClick = (log: SentryLogEventItem) => {
     navigate(`/telemetry/logs/${log.id}`);
@@ -73,7 +83,8 @@ const LogsList = ({ traceId }: { traceId?: string }) => {
 
   const visibleHeaders = LOGS_HEADERS.filter(header => isColumnVisible(header.id));
 
-  if (logsData.length === 0) {
+  // No logs at all (ignoring filters): show the docs-linked empty state.
+  if (allLogs.length === 0) {
     return (
       <EmptyState
         variant={!traceId ? "full" : "simple"}
@@ -85,8 +96,33 @@ const LogsList = ({ traceId }: { traceId?: string }) => {
     );
   }
 
+  const filterBar = showFilter ? (
+    <ListFilter
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+      activeFilters={activeFilters}
+      setActiveFilters={setActiveFilters}
+      filterConfigs={LOGS_FILTER_CONFIGS}
+      searchPlaceholder="Search by message..."
+    />
+  ) : null;
+
+  // Logs exist but the current filters exclude all of them. Still render
+  // LogDetails so a directly-linked /telemetry/logs/:id panel opens even when
+  // the row is filtered out of the list.
+  if (logsData.length === 0) {
+    return (
+      <CardList>
+        {filterBar}
+        <EmptyState variant="simple" description="No logs match the current filters." />
+        {selectedLogId && <LogDetails id={selectedLogId} />}
+      </CardList>
+    );
+  }
+
   return (
     <CardList>
+      {filterBar}
       <div className="flex justify-end px-6 py-3">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>

packages/spotlight/src/ui/telemetry/components/shared/ListFilter.tsx

@@ -0,0 +1,134 @@
+import { ReactComponent as X } from "@spotlight/ui/assets/cross.svg";
+import { ReactComponent as Search } from "@spotlight/ui/assets/search.svg";
+
+import { Badge } from "@spotlight/ui/ui/badge";
+import { Button } from "@spotlight/ui/ui/button";
+import { Input } from "@spotlight/ui/ui/input";
+import { useCallback, useMemo } from "react";
+import type { FilterConfigs } from "../../hooks/filterTypes";
+import { FilterDropdown } from "./FilterDropdown";
+
+interface ListFilterProps {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  activeFilters: string[];
+  setActiveFilters: React.Dispatch<React.SetStateAction<string[]>>;
+  filterConfigs: FilterConfigs;
+  searchPlaceholder?: string;
+}
+
+export default function ListFilter({
+  searchQuery,
+  setSearchQuery,
+  activeFilters,
+  setActiveFilters,
+  filterConfigs,
+  searchPlaceholder = "Search...",
+}: ListFilterProps) {
+  const handleFilterChange = useCallback(
+    (value: string, checked: boolean, type: "checkbox" | "radio") => {
+      if (type === "checkbox") {
+        if (checked) {
+          setActiveFilters(prev => [...prev, value]);
+        } else {
+          setActiveFilters(prev => prev.filter(f => f !== value));
+        }
+      } else if (type === "radio") {
+        if (checked) {
+          setActiveFilters([value]);
+        } else {
+          setActiveFilters([]);
+        }
+      }
+    },
+    [setActiveFilters],
+  );
+
+  const clearAllFilters = useCallback(() => {
+    setActiveFilters([]);
+    setSearchQuery("");
+  }, [setSearchQuery, setActiveFilters]);
+
+  const visibleFilterConfigs = useMemo(
+    () => Object.entries(filterConfigs).filter(([, config]) => config.show),
+    [filterConfigs],
+  );
+
+  const labelForValue = useCallback(
+    (value: string) => {
+      for (const config of Object.values(filterConfigs)) {
+        const option = config.options.find(o => o.value === value);
+        if (option) return option.label;
+      }
+      return value;
+    },
+    [filterConfigs],
+  );
+
+  return (
+    <div className="p-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative min-w-[250px] flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+          <Input
+            type="text"
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            className="border-primary-700 bg-primary-950 w-full pl-9 text-white placeholder:text-gray-400"
+          />
+          {searchQuery && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 h-5 w-5 -translate-y-1/2 transform text-gray-400"
+              onClick={() => setSearchQuery("")}
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {visibleFilterConfigs.map(([key, config]) => (
+            <FilterDropdown
+              key={key}
+              icon={config.icon}
+              label={config.label}
+              options={config.options}
+              type={config.type}
+              activeFilters={activeFilters}
+              onFilterChange={(value, checked) => handleFilterChange(value, checked, config.type)}
+            />
+          ))}
+        </div>
+      </div>
+
+      {activeFilters.length > 0 && (
+        <div className="mt-4 flex flex-wrap gap-2">
+          {activeFilters.map(filter => (
+            <Badge key={filter} className="text-white">
+              {labelForValue(filter)}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="ml-1 h-4 w-4 text-gray-400 hover:bg-transparent hover:text-white"
+                onClick={() => setActiveFilters(prev => prev.filter(f => f !== filter))}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </Badge>
+          ))}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-xs text-gray-400 hover:bg-transparent hover:text-white"
+            onClick={clearAllFilters}
+          >
+            Clear all
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

packages/spotlight/src/ui/telemetry/hooks/filterTypes.ts

@@ -0,0 +1,16 @@
+import type { ElementType } from "react";
+
+export interface FilterOption {
+  label: string;
+  value: string;
+}
+
+export interface FilterConfig {
+  icon: ElementType;
+  label: string;
+  options: FilterOption[];
+  show: boolean;
+  type: "checkbox" | "radio";
+}
+
+export type FilterConfigs = Record<string, FilterConfig>;