feat(ui): add swimlane view for config changes

Replace scatter-plot timeline with a hand-rolled swimlane that scales
to many configs and bursty change patterns:

- Hierarchical grouping by config name prefix with collapse/expand
- Sticky header row and resizable resource column (150-500px)
- Bucket-based anti-overlap rendering using flex-wrap
- Severity badges with multi-change counts and filtered tooltips
- Pre-range indicator (gray dot in-range, ↩ badge for pre-range)
- Infinite scroll via useGetAllConfigsChangesInfiniteQuery (200/page)
- URL-param backed Table/Graph toggle (?view=)
- Live tail remains, scoped to Table view

Adds ConfigChangesSwimlane plus Legend, Tooltip, and Utils components
with unit and integration test coverage backed by a real HAR fixture.

Author: moshloop

src/api/query-hooks/useConfigChangesHooks.ts

@@ -4,7 +4,11 @@ import { useConfigChangesArbitraryFilters } from "@flanksource-ui/hooks/useConfi
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
 import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
-import { UseQueryOptions, useQuery } from "@tanstack/react-query";
+import {
+  UseQueryOptions,
+  useInfiniteQuery,
+  useQuery
+} from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { usePrefixedSearchParams } from "@flanksource-ui/hooks/usePrefixedSearchParams";
@@ -167,3 +171,56 @@ export function useGetConfigChangesByIDQuery(
     ...queryOptions
   });
 }
+
+export function useGetAllConfigsChangesInfiniteQuery({
+  pageSize = 200,
+  paramPrefix
+}: {
+  pageSize?: number;
+  paramPrefix?: string;
+} = {}) {
+  const showChangesFromDeletedConfigs = useShowDeletedConfigs();
+  const { timeRangeValue } = useTimeRangeParams(
+    configChangesDefaultDateFilter,
+    paramPrefix
+  );
+  const [params] = usePrefixedSearchParams(paramPrefix, false, {
+    sortBy: "created_at",
+    sortDirection: "desc"
+  });
+  const changeType = params.get("changeType") ?? undefined;
+  const severity = params.get("severity") ?? undefined;
+  const configType = params.get("configType") ?? undefined;
+  const from = timeRangeValue?.from ?? undefined;
+  const to = timeRangeValue?.to ?? undefined;
+  const [sortBy] = useReactTableSortState({ paramPrefix });
+  const configTypes = params.get("configTypes") ?? "all";
+  const tags = useConfigChangesTagsFilter(paramPrefix);
+  const arbitraryFilter = useConfigChangesArbitraryFilters(paramPrefix);
+
+  const filterProps = {
+    include_deleted_configs: showChangesFromDeletedConfigs,
+    changeType,
+    severity,
+    from,
+    to,
+    configTypes,
+    configType,
+    sortBy: sortBy[0]?.id,
+    sortOrder: (sortBy[0]?.desc ? "desc" : "asc") as "asc" | "desc",
+    pageSize,
+    arbitraryFilter,
+    tags
+  };
+
+  return useInfiniteQuery({
+    queryKey: ["configs", "changes", "infinite", filterProps],
+    queryFn: ({ pageParam = 0 }) =>
+      getConfigsChanges({ ...filterProps, pageIndex: pageParam }),
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.changes && lastPage.changes.length < pageSize
+        ? undefined
+        : allPages.length,
+    keepPreviousData: true
+  });
+}