@adventurelabs/scout-core 2.0.14 → 2.0.16

package/dist/hooks/useInfiniteQuery.js

@@ -1,7 +1,226 @@
 "use client";
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import { useGetSessionsInfiniteByHerdQuery, useGetSessionsInfiniteByDeviceQuery, useGetEventsInfiniteByHerdQuery, useGetEventsInfiniteByDeviceQuery, useGetArtifactsInfiniteByHerdQuery, useGetArtifactsInfiniteByDeviceQuery, useGetFeedInfiniteByHerdQuery, useGetFeedInfiniteByDeviceQuery, useGetAnalysisJobsInfiniteQuery, useGetAnalysisTasksInfiniteQuery, } from "../store/api";
-function useInfiniteFiltersKey(options) {
+/** Signed media URLs are re-minted on every fetch, so they never indicate a changed row. */
+const REMINTED_URL_KEYS = new Set(["media_url", "thumbnail_url", "proxy_url"]);
+function rowsEqual(left, right) {
+    if (left === right)
+        return true;
+    if (typeof left !== "object" ||
+        typeof right !== "object" ||
+        left === null ||
+        right === null) {
+        return false;
+    }
+    if (Array.isArray(left) || Array.isArray(right)) {
+        return (Array.isArray(left) &&
+            Array.isArray(right) &&
+            left.length === right.length &&
+            left.every((item, index) => rowsEqual(item, right[index])));
+    }
+    const keys = Object.keys(left).filter((key) => !REMINTED_URL_KEYS.has(key));
+    const rightKeys = Object.keys(right).filter((key) => !REMINTED_URL_KEYS.has(key));
+    return (keys.length === rightKeys.length &&
+        keys.every((key) => Object.prototype.hasOwnProperty.call(right, key) &&
+            rowsEqual(Reflect.get(left, key), Reflect.get(right, key))));
+}
+/**
+ * Reuse the previous row object when a refetch returned the same content, so consumers
+ * can memoize on row identity. Rows that only differ by a re-minted signed URL keep the
+ * earlier object, and therefore the earlier URL, until the row itself changes.
+ */
+function preserveRowReferences(previous, next, rowKey) {
+    const previousByKey = new Map(previous
+        .map((row) => [rowKey(row), row])
+        .filter(([key]) => key != null));
+    return next.map((row) => {
+        const key = rowKey(row);
+        const previousRow = key == null ? undefined : previousByKey.get(key);
+        return previousRow && rowsEqual(previousRow, row) ? previousRow : row;
+    });
+}
+/** Cursors are flat records of scalars, so a shallow comparison identifies a page. */
+function sameCursor(left, right) {
+    if (left === right)
+        return true;
+    if (left === null || right === null)
+        return false;
+    const keys = Object.keys(left);
+    return (keys.length === Object.keys(right).length &&
+        keys.every((key) => Reflect.get(left, key) === Reflect.get(right, key)));
+}
+const rowId = (row) => row.id;
+const feedRowKey = (row) => `${row.sort_ts ?? ""}_${row.sort_id ?? ""}_${row.feed_type ?? ""}`;
+const emptyPaging = (key) => ({
+    key,
+    cursor: null,
+    pages: [],
+    refreshQueue: null,
+});
+/**
+ * Holds the paging state for `key`, read by the query args and by the engine.
+ *
+ * State carrying a stale key reads as empty, so a new entity starts from its first page in
+ * the same render rather than waiting for an effect to clear the previous one.
+ */
+function usePaging(key) {
+    const [stored, setStored] = useState(() => emptyPaging(key));
+    // Memoized so the empty fallback keeps a stable identity: `items` is derived from
+    // `state.pages`, and a fresh array each render would churn consumer dependencies.
+    const state = useMemo(() => (stored.key === key ? stored : emptyPaging(key)), [key, stored]);
+    const update = useCallback((change) => setStored((previous) => change(previous.key === key ? previous : emptyPaging(key))), [key]);
+    return { cursor: state.cursor, state, update };
+}
+function upsertPage(state, page, rowKey) {
+    const index = state.pages.findIndex((loaded) => sameCursor(loaded.cursor, page.cursor));
+    if (index === -1) {
+        return { ...state, pages: [...state.pages, page] };
+    }
+    const loaded = state.pages[index];
+    const rows = preserveRowReferences(loaded.rows, page.rows, rowKey);
+    const unchanged = loaded.hasMore === page.hasMore &&
+        sameCursor(loaded.nextCursor, page.nextCursor) &&
+        loaded.rows.length === rows.length &&
+        rows.every((row, position) => row === loaded.rows[position]);
+    if (unchanged)
+        return state;
+    const pages = [...state.pages];
+    pages[index] = { ...page, rows };
+    return { ...state, pages };
+}
+const dropRefreshedCursor = (state) => {
+    if (!state.refreshQueue)
+        return state;
+    const remaining = state.refreshQueue.slice(1);
+    return { ...state, refreshQueue: remaining.length > 0 ? remaining : null };
+};
+/**
+ * Accumulates cursor-paginated responses into a list.
+ *
+ * A single query subscription serves every page: the paging state's cursor decides which
+ * page is being requested, and each response is upserted into `pages` under that cursor. A
+ * preserve-pages refresh walks the cursor back through the loaded pages one at a time,
+ * replacing each in place. Changing entity or filters changes the paging key, which empties
+ * the list and abandons any refresh in the same render.
+ */
+function useInfinitePages({ cursor, state, update }, query, mapping) {
+    const latest = useRef({ query, mapping });
+    latest.current = { query, mapping };
+    const setCursor = useCallback((next) => update((previous) => sameCursor(previous.cursor, next)
+        ? previous
+        : { ...previous, cursor: next }), [update]);
+    /**
+     * Re-requests the page the query currently points at. RTK's `refetch` throws
+     * synchronously when the query is skipped, so callers see a rejection instead of a fault
+     * at the call site.
+     */
+    const requestPage = useCallback(async () => latest.current.query.refetch().unwrap(), []);
+    const { currentData, isFetching } = query;
+    const page = useMemo(() => currentData === undefined
+        ? undefined
+        : latest.current.mapping.toPage(currentData), [currentData]);
+    useEffect(() => {
+        if (!page)
+            return;
+        update((previous) => upsertPage(previous, { ...page, cursor }, latest.current.mapping.rowKey));
+    }, [cursor, page, update]);
+    useEffect(() => {
+        const queue = state.refreshQueue;
+        if (!queue)
+            return;
+        const [refreshing] = queue;
+        if (!sameCursor(cursor, refreshing)) {
+            setCursor(refreshing);
+            return;
+        }
+        let cancelled = false;
+        // A refresh that cannot run drops its cursor and moves on, so a rejection never leaves
+        // the queue stuck.
+        void (async () => {
+            try {
+                const response = await requestPage();
+                if (cancelled)
+                    return;
+                const { mapping } = latest.current;
+                const refreshed = mapping.toPage(response);
+                update((previous) => 
+                // Only apply while this cursor is still the one being refreshed.
+                previous.refreshQueue &&
+                    sameCursor(previous.refreshQueue[0], refreshing)
+                    ? dropRefreshedCursor(upsertPage(previous, { ...refreshed, cursor: refreshing }, mapping.rowKey))
+                    : previous);
+            }
+            catch {
+                if (!cancelled)
+                    update(dropRefreshedCursor);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [cursor, requestPage, setCursor, state.refreshQueue, update]);
+    /** Both modes queue the cursors to re-request, so a refetch always reaches the network. */
+    const refetch = useCallback((options) => {
+        update((previous) => options?.preservePages && previous.pages.length > 0
+            ? {
+                ...previous,
+                refreshQueue: previous.pages.map((loaded) => loaded.cursor),
+            }
+            : { ...emptyPaging(previous.key), refreshQueue: [null] });
+    }, [update]);
+    const lastPage = state.pages[state.pages.length - 1];
+    const nextCursor = lastPage?.nextCursor ?? null;
+    const hasMore = Boolean(lastPage?.hasMore) && nextCursor !== null;
+    const isRefreshing = state.refreshQueue !== null;
+    const loadMore = useCallback(() => {
+        if (!hasMore || nextCursor === null || isFetching || isRefreshing)
+            return;
+        // The cursor already resting on `nextCursor` means that page's request failed, since a
+        // loaded page would have moved `nextCursor` on. Re-setting it would be a no-op, so the
+        // failed request is retried instead of leaving the list unable to advance.
+        if (sameCursor(cursor, nextCursor)) {
+            void requestPage().catch(() => { });
+            return;
+        }
+        setCursor(nextCursor);
+    }, [
+        cursor,
+        hasMore,
+        isFetching,
+        isRefreshing,
+        nextCursor,
+        requestPage,
+        setCursor,
+    ]);
+    const items = useMemo(() => {
+        const seen = new Set();
+        return state.pages
+            .flatMap((loaded) => loaded.rows)
+            .filter((row) => {
+            const rowIdentity = latest.current.mapping.rowKey(row);
+            if (rowIdentity == null)
+                return true;
+            if (seen.has(rowIdentity))
+                return false;
+            seen.add(rowIdentity);
+            return true;
+        });
+    }, [state.pages]);
+    return {
+        items,
+        isLoading: state.pages.length === 0 && (isFetching || isRefreshing),
+        isRefreshing,
+        isLoadingMore: isFetching && state.pages.length > 0 && !isRefreshing,
+        hasMore,
+        loadMore,
+        refetch,
+        error: query.error,
+    };
+}
+// =====================================================
+// SHARED QUERY ARGS AND RESPONSE MAPPING
+// =====================================================
+function useFiltersKey(options) {
     return useMemo(() => JSON.stringify({
         rangeStart: options.rangeStart ?? null,
         rangeEnd: options.rangeEnd ?? null,
@@ -14,947 +233,165 @@ function useInfiniteFiltersKey(options) {
         options.minFlightDistanceMeters,
     ]);
 }
+const rangeArgs = (options) => ({
+    limit: options.limit || 20,
+    supabase: options.supabase,
+    rangeStart: options.rangeStart ?? null,
+    rangeEnd: options.rangeEnd ?? null,
+});
+const flightArgs = (options) => ({
+    ...rangeArgs(options),
+    minFlightTimeMinutes: options.minFlightTimeMinutes ?? null,
+    minFlightDistanceMeters: options.minFlightDistanceMeters ?? null,
+});
+const sessionsPage = (response) => ({
+    rows: response.sessions,
+    nextCursor: response.nextCursor,
+    hasMore: response.hasMore,
+});
+const eventsPage = (response) => ({
+    rows: response.events,
+    nextCursor: response.nextCursor,
+    hasMore: response.hasMore,
+});
+const artifactsPage = (response) => ({
+    rows: response.artifacts,
+    nextCursor: response.nextCursor,
+    hasMore: response.hasMore,
+});
+const feedPage = (response) => {
+    const rows = Array.isArray(response.items) ? response.items : [];
+    return {
+        rows,
+        nextCursor: response.nextCursor,
+        // The feed RPC can return fewer rows than the limit while more still exist, so any
+        // non-empty page with a next cursor means there is more to load.
+        hasMore: rows.length > 0 && response.nextCursor !== null,
+    };
+};
+const analysisJobsPage = (response) => ({
+    rows: response.jobs,
+    nextCursor: response.nextCursor,
+    hasMore: response.hasMore,
+});
+const analysisTasksPage = (response) => ({
+    rows: response.tasks,
+    nextCursor: response.nextCursor,
+    hasMore: response.hasMore,
+});
 // =====================================================
-// SESSIONS INFINITE SCROLL HOOKS
+// SESSIONS
 // =====================================================
 export const useInfiniteSessionsByHerd = (herdId, options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const prevHerdIdRef = useRef();
-    const infiniteFiltersKey = useInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const currentQuery = useGetSessionsInfiniteByHerdQuery({
-        herdId,
-        limit: options.limit || 20,
-        cursor: currentCursor,
-        supabase: options.supabase,
-        rangeStart: options.rangeStart ?? null,
-        rangeEnd: options.rangeEnd ?? null,
-        minFlightTimeMinutes: options.minFlightTimeMinutes ?? null,
-        minFlightDistanceMeters: options.minFlightDistanceMeters ?? null,
-    }, {
-        skip: !options.enabled || !herdId,
+    const filtersKey = useFiltersKey(options);
+    const paging = usePaging(`herd:${herdId}|${filtersKey}`);
+    const query = useGetSessionsInfiniteByHerdQuery({ herdId, cursor: paging.cursor, ...flightArgs(options) }, { skip: !options.enabled || !herdId });
+    return useInfinitePages(paging, query, {
+        toPage: sessionsPage,
+        rowKey: rowId,
     });
-    // Reset state when herdId changes
-    useEffect(() => {
-        if (prevHerdIdRef.current !== undefined &&
-            prevHerdIdRef.current !== herdId &&
-            options.enabled &&
-            herdId) {
-            setPages([]);
-            setCurrentCursor(null);
-        }
-        prevHerdIdRef.current = herdId;
-    }, [herdId, options.enabled]);
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            setPages([]);
-            setCurrentCursor(null);
-        }
-    }, [infiniteFiltersKey]);
-    // Update pages when new data arrives
-    useEffect(() => {
-        if (currentQuery.data && !currentQuery.isLoading) {
-            setPages((prev) => {
-                const existingPage = prev.find((p) => (p.cursor === null && currentCursor === null) ||
-                    (p.cursor &&
-                        currentCursor &&
-                        p.cursor.id === currentCursor.id &&
-                        p.cursor.timestamp === currentCursor.timestamp));
-                if (!existingPage) {
-                    return [
-                        ...prev,
-                        { cursor: currentCursor, data: currentQuery.data.sessions },
-                    ];
-                }
-                return prev;
-            });
-        }
-    }, [currentQuery.data, currentQuery.isLoading, currentCursor]);
-    const loadMore = useCallback(() => {
-        if (currentQuery.data?.hasMore &&
-            currentQuery.data.nextCursor &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(currentQuery.data.nextCursor);
-        }
-    }, [currentQuery.data, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        setPages([]);
-        setCurrentCursor(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    // Flatten all pages into single array
-    const allItems = useMemo(() => {
-        return pages.flatMap((page) => page.data);
-    }, [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: currentQuery.data?.hasMore || false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
 };
 export const useInfiniteSessionsByDevice = (deviceId, options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const prevDeviceIdRef = useRef();
-    const infiniteFiltersKey = useInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const currentQuery = useGetSessionsInfiniteByDeviceQuery({
-        deviceId,
-        limit: options.limit || 20,
-        cursor: currentCursor,
-        supabase: options.supabase,
-        rangeStart: options.rangeStart ?? null,
-        rangeEnd: options.rangeEnd ?? null,
-        minFlightTimeMinutes: options.minFlightTimeMinutes ?? null,
-        minFlightDistanceMeters: options.minFlightDistanceMeters ?? null,
-    }, {
-        skip: !options.enabled || !deviceId,
+    const filtersKey = useFiltersKey(options);
+    const paging = usePaging(`device:${deviceId}|${filtersKey}`);
+    const query = useGetSessionsInfiniteByDeviceQuery({ deviceId, cursor: paging.cursor, ...flightArgs(options) }, { skip: !options.enabled || !deviceId });
+    return useInfinitePages(paging, query, {
+        toPage: sessionsPage,
+        rowKey: rowId,
     });
-    // Reset state when deviceId changes
-    useEffect(() => {
-        if (prevDeviceIdRef.current !== undefined &&
-            prevDeviceIdRef.current !== deviceId &&
-            options.enabled &&
-            deviceId) {
-            setPages([]);
-            setCurrentCursor(null);
-        }
-        prevDeviceIdRef.current = deviceId;
-    }, [deviceId, options.enabled]);
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            setPages([]);
-            setCurrentCursor(null);
-        }
-    }, [infiniteFiltersKey]);
-    useEffect(() => {
-        if (currentQuery.data && !currentQuery.isLoading) {
-            setPages((prev) => {
-                const existingPage = prev.find((p) => (p.cursor === null && currentCursor === null) ||
-                    (p.cursor &&
-                        currentCursor &&
-                        p.cursor.id === currentCursor.id &&
-                        p.cursor.timestamp === currentCursor.timestamp));
-                if (!existingPage) {
-                    return [
-                        ...prev,
-                        { cursor: currentCursor, data: currentQuery.data.sessions },
-                    ];
-                }
-                return prev;
-            });
-        }
-    }, [currentQuery.data, currentQuery.isLoading, currentCursor]);
-    const loadMore = useCallback(() => {
-        if (currentQuery.data?.hasMore &&
-            currentQuery.data.nextCursor &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(currentQuery.data.nextCursor);
-        }
-    }, [currentQuery.data, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        setPages([]);
-        setCurrentCursor(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => {
-        return pages.flatMap((page) => page.data);
-    }, [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: currentQuery.data?.hasMore || false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
 };
 // =====================================================
-// EVENTS INFINITE SCROLL HOOKS
+// EVENTS
 // =====================================================
 export const useInfiniteEventsByHerd = (herdId, options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const prevHerdIdRef = useRef();
-    const infiniteFiltersKey = useInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const currentQuery = useGetEventsInfiniteByHerdQuery({
-        herdId,
-        limit: options.limit || 20,
-        cursor: currentCursor,
-        supabase: options.supabase,
-        rangeStart: options.rangeStart ?? null,
-        rangeEnd: options.rangeEnd ?? null,
-    }, {
-        skip: !options.enabled || !herdId,
+    const filtersKey = useFiltersKey(options);
+    const paging = usePaging(`herd:${herdId}|${filtersKey}`);
+    const query = useGetEventsInfiniteByHerdQuery({ herdId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !herdId });
+    return useInfinitePages(paging, query, {
+        toPage: eventsPage,
+        rowKey: rowId,
     });
-    // Reset state when herdId changes
-    useEffect(() => {
-        if (prevHerdIdRef.current !== undefined &&
-            prevHerdIdRef.current !== herdId &&
-            options.enabled &&
-            herdId) {
-            setPages([]);
-            setCurrentCursor(null);
-        }
-        prevHerdIdRef.current = herdId;
-    }, [herdId, options.enabled]);
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            setPages([]);
-            setCurrentCursor(null);
-        }
-    }, [infiniteFiltersKey]);
-    useEffect(() => {
-        if (currentQuery.data && !currentQuery.isLoading) {
-            setPages((prev) => {
-                const existingPage = prev.find((p) => (p.cursor === null && currentCursor === null) ||
-                    (p.cursor &&
-                        currentCursor &&
-                        p.cursor.id === currentCursor.id &&
-                        p.cursor.timestamp === currentCursor.timestamp));
-                if (!existingPage) {
-                    return [
-                        ...prev,
-                        { cursor: currentCursor, data: currentQuery.data.events },
-                    ];
-                }
-                return prev;
-            });
-        }
-    }, [currentQuery.data, currentQuery.isLoading, currentCursor]);
-    const loadMore = useCallback(() => {
-        if (currentQuery.data?.hasMore &&
-            currentQuery.data.nextCursor &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(currentQuery.data.nextCursor);
-        }
-    }, [currentQuery.data, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        setPages([]);
-        setCurrentCursor(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => {
-        return pages.flatMap((page) => page.data);
-    }, [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: currentQuery.data?.hasMore || false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
 };
 export const useInfiniteEventsByDevice = (deviceId, options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const prevDeviceIdRef = useRef();
-    const infiniteFiltersKey = useInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const currentQuery = useGetEventsInfiniteByDeviceQuery({
-        deviceId,
-        limit: options.limit || 20,
-        cursor: currentCursor,
-        supabase: options.supabase,
-        rangeStart: options.rangeStart ?? null,
-        rangeEnd: options.rangeEnd ?? null,
-    }, {
-        skip: !options.enabled || !deviceId,
+    const filtersKey = useFiltersKey(options);
+    const paging = usePaging(`device:${deviceId}|${filtersKey}`);
+    const query = useGetEventsInfiniteByDeviceQuery({ deviceId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !deviceId });
+    return useInfinitePages(paging, query, {
+        toPage: eventsPage,
+        rowKey: rowId,
     });
-    // Reset state when deviceId changes
-    useEffect(() => {
-        if (prevDeviceIdRef.current !== undefined &&
-            prevDeviceIdRef.current !== deviceId &&
-            options.enabled &&
-            deviceId) {
-            setPages([]);
-            setCurrentCursor(null);
-        }
-        prevDeviceIdRef.current = deviceId;
-    }, [deviceId, options.enabled]);
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            setPages([]);
-            setCurrentCursor(null);
-        }
-    }, [infiniteFiltersKey]);
-    useEffect(() => {
-        if (currentQuery.data && !currentQuery.isLoading) {
-            setPages((prev) => {
-                const existingPage = prev.find((p) => (p.cursor === null && currentCursor === null) ||
-                    (p.cursor &&
-                        currentCursor &&
-                        p.cursor.id === currentCursor.id &&
-                        p.cursor.timestamp === currentCursor.timestamp));
-                if (!existingPage) {
-                    return [
-                        ...prev,
-                        { cursor: currentCursor, data: currentQuery.data.events },
-                    ];
-                }
-                return prev;
-            });
-        }
-    }, [currentQuery.data, currentQuery.isLoading, currentCursor]);
-    const loadMore = useCallback(() => {
-        if (currentQuery.data?.hasMore &&
-            currentQuery.data.nextCursor &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(currentQuery.data.nextCursor);
-        }
-    }, [currentQuery.data, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        setPages([]);
-        setCurrentCursor(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => {
-        return pages.flatMap((page) => page.data);
-    }, [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: currentQuery.data?.hasMore || false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
 };
 // =====================================================
-// ARTIFACTS INFINITE SCROLL HOOKS
+// ARTIFACTS
 // =====================================================
 export const useInfiniteArtifactsByHerd = (herdId, options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const prevHerdIdRef = useRef();
-    const infiniteFiltersKey = useInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const currentQuery = useGetArtifactsInfiniteByHerdQuery({
-        herdId,
-        limit: options.limit || 20,
-        cursor: currentCursor,
-        supabase: options.supabase,
-        rangeStart: options.rangeStart ?? null,
-        rangeEnd: options.rangeEnd ?? null,
-    }, {
-        skip: !options.enabled || !herdId,
+    const filtersKey = useFiltersKey(options);
+    const paging = usePaging(`herd:${herdId}|${filtersKey}`);
+    const query = useGetArtifactsInfiniteByHerdQuery({ herdId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !herdId });
+    return useInfinitePages(paging, query, {
+        toPage: artifactsPage,
+        rowKey: rowId,
     });
-    // Reset state when herdId changes
-    useEffect(() => {
-        if (prevHerdIdRef.current !== undefined &&
-            prevHerdIdRef.current !== herdId &&
-            options.enabled &&
-            herdId) {
-            setPages([]);
-            setCurrentCursor(null);
-        }
-        prevHerdIdRef.current = herdId;
-    }, [herdId, options.enabled]);
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            setPages([]);
-            setCurrentCursor(null);
-        }
-    }, [infiniteFiltersKey]);
-    useEffect(() => {
-        if (currentQuery.data && !currentQuery.isLoading) {
-            setPages((prev) => {
-                const existingPage = prev.find((p) => (p.cursor === null && currentCursor === null) ||
-                    (p.cursor &&
-                        currentCursor &&
-                        p.cursor.id === currentCursor.id &&
-                        p.cursor.timestamp === currentCursor.timestamp));
-                if (!existingPage) {
-                    return [
-                        ...prev,
-                        { cursor: currentCursor, data: currentQuery.data.artifacts },
-                    ];
-                }
-                return prev;
-            });
-        }
-    }, [currentQuery.data, currentQuery.isLoading, currentCursor]);
-    const loadMore = useCallback(() => {
-        if (currentQuery.data?.hasMore &&
-            currentQuery.data.nextCursor &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(currentQuery.data.nextCursor);
-        }
-    }, [currentQuery.data, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        setPages([]);
-        setCurrentCursor(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => {
-        return pages.flatMap((page) => page.data);
-    }, [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: currentQuery.data?.hasMore || false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
 };
 export const useInfiniteArtifactsByDevice = (deviceId, options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const prevDeviceIdRef = useRef();
-    const infiniteFiltersKey = useInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const currentQuery = useGetArtifactsInfiniteByDeviceQuery({
-        deviceId,
-        limit: options.limit || 20,
-        cursor: currentCursor,
-        supabase: options.supabase,
-        rangeStart: options.rangeStart ?? null,
-        rangeEnd: options.rangeEnd ?? null,
-    }, {
-        skip: !options.enabled || !deviceId,
+    const filtersKey = useFiltersKey(options);
+    const paging = usePaging(`device:${deviceId}|${filtersKey}`);
+    const query = useGetArtifactsInfiniteByDeviceQuery({ deviceId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !deviceId });
+    return useInfinitePages(paging, query, {
+        toPage: artifactsPage,
+        rowKey: rowId,
     });
-    // Reset state when deviceId changes
-    useEffect(() => {
-        if (prevDeviceIdRef.current !== undefined &&
-            prevDeviceIdRef.current !== deviceId &&
-            options.enabled &&
-            deviceId) {
-            setPages([]);
-            setCurrentCursor(null);
-        }
-        prevDeviceIdRef.current = deviceId;
-    }, [deviceId, options.enabled]);
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            setPages([]);
-            setCurrentCursor(null);
-        }
-    }, [infiniteFiltersKey]);
-    useEffect(() => {
-        if (currentQuery.data && !currentQuery.isLoading) {
-            setPages((prev) => {
-                const existingPage = prev.find((p) => (p.cursor === null && currentCursor === null) ||
-                    (p.cursor &&
-                        currentCursor &&
-                        p.cursor.id === currentCursor.id &&
-                        p.cursor.timestamp === currentCursor.timestamp));
-                if (!existingPage) {
-                    return [
-                        ...prev,
-                        { cursor: currentCursor, data: currentQuery.data.artifacts },
-                    ];
-                }
-                return prev;
-            });
-        }
-    }, [currentQuery.data, currentQuery.isLoading, currentCursor]);
-    const loadMore = useCallback(() => {
-        if (currentQuery.data?.hasMore &&
-            currentQuery.data.nextCursor &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(currentQuery.data.nextCursor);
-        }
-    }, [currentQuery.data, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        setPages([]);
-        setCurrentCursor(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => {
-        return pages.flatMap((page) => page.data);
-    }, [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: currentQuery.data?.hasMore || false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
-};
-const feedCursorEq = (a, b) => {
-    if (a === b)
-        return true;
-    if (a == null || b == null)
-        return false;
-    return (a.timestamp === b.timestamp &&
-        a.id === b.id &&
-        a.feed_type === b.feed_type);
 };
-/** useInfiniteFeedByHerd: logic matches useInfiniteFeedByHerdDummy verbatim; only the fetch is via API (RTK Query) instead of supabase.rpc. */
+// =====================================================
+// FEED (merged events + artifacts)
+// =====================================================
 export const useInfiniteFeedByHerd = (herdId, options) => {
-    const limit = options.limit ?? 20;
-    const enabled = !!(options.enabled && herdId);
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const [currentResult, setCurrentResult] = useState(null);
-    const prevHerdIdRef = useRef(undefined);
-    const lastAddedCursorRef = useRef(undefined);
-    const pagesLengthRef = useRef(0);
-    /** When true, pass null to the query so we don't request (newHerdId, oldCursor) before state commits. */
-    const forceNullCursorRef = useRef(false);
-    const infiniteFiltersKey = useInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const cursorForQuery = forceNullCursorRef.current ? null : currentCursor;
-    const currentQuery = useGetFeedInfiniteByHerdQuery({
-        herdId,
-        limit,
-        cursor: cursorForQuery,
-        supabase: options.supabase,
-        rangeStart: options.rangeStart ?? null,
-        rangeEnd: options.rangeEnd ?? null,
-    }, { skip: !enabled });
-    const isLoading = currentQuery.isLoading;
-    useEffect(() => {
-        pagesLengthRef.current = pages.length;
-    }, [pages.length]);
-    // Reset when herd changes (match dummy: prev !== herdId && enabled && herdId)
-    useEffect(() => {
-        if (prevHerdIdRef.current !== undefined &&
-            prevHerdIdRef.current !== herdId &&
-            enabled &&
-            herdId) {
-            forceNullCursorRef.current = true;
-            setPages([]);
-            setCurrentCursor(null);
-            setCurrentResult(null);
-            lastAddedCursorRef.current = undefined;
-        }
-        prevHerdIdRef.current = herdId;
-    }, [herdId, enabled]);
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            forceNullCursorRef.current = true;
-            setPages([]);
-            setCurrentCursor(null);
-            setCurrentResult(null);
-            lastAddedCursorRef.current = undefined;
-        }
-    }, [infiniteFiltersKey]);
-    // When cursor changes, clear ref so we merge the new response
-    useEffect(() => {
-        lastAddedCursorRef.current = undefined;
-    }, [currentCursor]);
-    // Merge when we have data (mirror dummy's .then() logic; fetch is done by RTK Query)
-    useEffect(() => {
-        if (!currentQuery.data || currentQuery.isLoading)
-            return;
-        const cursor = cursorForQuery;
-        const items = Array.isArray(currentQuery.data.items)
-            ? currentQuery.data.items
-            : [];
-        const nextCursor = currentQuery.data.nextCursor ?? null;
-        // Derive hasMore from items we received (like dummy), so we don't get stuck when API
-        // returns hasMore: false e.g. due to RPC/PostgREST returning fewer rows than limit.
-        const hasMore = (items.length >= limit || (items.length > 0 && items.length < limit)) &&
-            nextCursor != null;
-        // After herd switch we force null cursor; once we've merged that first page, allow normal cursor again
-        if (cursor === null) {
-            forceNullCursorRef.current = false;
-        }
-        // Only update currentResult for successful response (match dummy)
-        if (items.length === 0 && cursor === null) {
-            // Leave currentResult unchanged on spurious empty first page
-        }
-        else {
-            setCurrentResult({
-                hasMore,
-                nextCursor,
-            });
-        }
-        if (items.length === 0)
-            return;
-        // Skip merge exactly like dummy: full page already added for this cursor and we have pages
-        if (items.length >= limit &&
-            feedCursorEq(lastAddedCursorRef.current ?? null, cursor) &&
-            pagesLengthRef.current > 0) {
-            return;
-        }
-        setPages((prev) => {
-            const existingPage = prev.find((p) => feedCursorEq(p.cursor, cursor));
-            const next = !existingPage
-                ? [...prev, { cursor, data: items }]
-                : items.length > existingPage.data.length
-                    ? prev.map((p) => feedCursorEq(p.cursor, cursor) ? { cursor, data: items } : p)
-                    : prev;
-            if (!existingPage && items.length >= limit) {
-                lastAddedCursorRef.current = cursor;
-            }
-            if (existingPage &&
-                items.length > existingPage.data.length &&
-                items.length >= limit) {
-                lastAddedCursorRef.current = cursor;
-            }
-            return next;
-        });
-    }, [
-        currentQuery.data,
-        currentQuery.isLoading,
-        cursorForQuery,
-        pages.length,
-        limit,
-    ]);
-    const loadMore = useCallback(() => {
-        if (currentResult?.hasMore &&
-            currentResult.nextCursor != null &&
-            !isLoading) {
-            setCurrentCursor(currentResult.nextCursor);
-        }
-    }, [currentResult, isLoading]);
-    const refetch = useCallback(() => {
-        forceNullCursorRef.current = true;
-        setPages([]);
-        setCurrentCursor(null);
-        setCurrentResult(null);
-        lastAddedCursorRef.current = undefined;
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => {
-        const sorted = [...pages].sort((a, b) => {
-            if (feedCursorEq(a.cursor, b.cursor))
-                return 0;
-            if (a.cursor === null)
-                return -1;
-            if (b.cursor === null)
-                return 1;
-            const ta = a.cursor.timestamp ?? '';
-            const tb = b.cursor.timestamp ?? '';
-            return tb.localeCompare(ta);
-        });
-        const seen = new Set();
-        return sorted.flatMap((p) => p.data).filter((item) => {
-            const key = `${item.sort_ts ?? ''}_${item.sort_id ?? ''}_${item.feed_type ?? ''}`;
-            if (seen.has(key))
-                return false;
-            seen.add(key);
-            return true;
-        });
-    }, [pages]);
-    return {
-        items: allItems,
-        isLoading: isLoading && pages.length === 0,
-        isLoadingMore: isLoading && pages.length > 0,
-        hasMore: currentResult?.hasMore ??
-            (currentCursor !== null && pages.length > 0) ??
-            false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
+    const filtersKey = useFiltersKey(options);
+    const paging = usePaging(`herd:${herdId}|${filtersKey}`);
+    const query = useGetFeedInfiniteByHerdQuery({ herdId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !herdId });
+    return useInfinitePages(paging, query, {
+        toPage: feedPage,
+        rowKey: feedRowKey,
+    });
 };
 export const useInfiniteFeedByDevice = (deviceId, options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const [lastResult, setLastResult] = useState(null);
-    const prevDeviceIdRef = useRef(undefined);
-    const lastAddedCursorRef = useRef(undefined);
-    const pagesLengthRef = useRef(0);
-    const forceNullCursorRef = useRef(false);
-    const infiniteFiltersKey = useInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const cursorForQuery = forceNullCursorRef.current ? null : currentCursor;
-    const currentQuery = useGetFeedInfiniteByDeviceQuery({
-        deviceId,
-        limit: options.limit || 20,
-        cursor: cursorForQuery,
-        supabase: options.supabase,
-        rangeStart: options.rangeStart ?? null,
-        rangeEnd: options.rangeEnd ?? null,
-    }, { skip: !options.enabled || !deviceId });
-    useEffect(() => {
-        pagesLengthRef.current = pages.length;
-    }, [pages.length]);
-    // Clear all state whenever device id changes (including to/from undefined)
-    useEffect(() => {
-        if (prevDeviceIdRef.current !== undefined &&
-            prevDeviceIdRef.current !== deviceId) {
-            forceNullCursorRef.current = true;
-            setPages([]);
-            setCurrentCursor(null);
-            lastAddedCursorRef.current = undefined;
-            setLastResult(null);
-        }
-        prevDeviceIdRef.current = deviceId;
-    }, [deviceId]);
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            forceNullCursorRef.current = true;
-            setPages([]);
-            setCurrentCursor(null);
-            lastAddedCursorRef.current = undefined;
-            setLastResult(null);
-        }
-    }, [infiniteFiltersKey]);
-    // When we request a new page (cursor changed), clear ref so we merge the new response
-    useEffect(() => {
-        lastAddedCursorRef.current = undefined;
-    }, [currentCursor]);
-    useEffect(() => {
-        if (!currentQuery.data || currentQuery.isLoading)
-            return;
-        const cursor = cursorForQuery;
-        if (cursor === null) {
-            forceNullCursorRef.current = false;
-        }
-        if (pagesLengthRef.current > 0 &&
-            feedCursorEq(lastAddedCursorRef.current ?? null, cursor))
-            return;
-        const items = Array.isArray(currentQuery.data?.items)
-            ? currentQuery.data.items
-            : [];
-        const limitForPage = options.limit || 20;
-        const nextCursor = currentQuery.data?.nextCursor ?? null;
-        const hasMore = (items.length >= limitForPage ||
-            (items.length > 0 && items.length < limitForPage)) &&
-            nextCursor != null;
-        setLastResult({ hasMore, nextCursor });
-        setPages((prev) => {
-            const existingPage = prev.find((p) => feedCursorEq(p.cursor, cursor));
-            if (!existingPage) {
-                if (items.length >= limitForPage) {
-                    lastAddedCursorRef.current = cursor;
-                }
-                return [
-                    ...prev,
-                    { cursor, data: items },
-                ];
-            }
-            return prev;
-        });
-    }, [
-        currentQuery.data,
-        currentQuery.isLoading,
-        cursorForQuery,
-        pages.length,
-        options.limit,
-    ]);
-    const loadMore = useCallback(() => {
-        if (lastResult?.hasMore &&
-            lastResult.nextCursor != null &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(lastResult.nextCursor);
-        }
-    }, [lastResult, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        forceNullCursorRef.current = true;
-        setPages([]);
-        setCurrentCursor(null);
-        lastAddedCursorRef.current = undefined;
-        setLastResult(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => {
-        const seen = new Set();
-        return pages.flatMap((p) => p.data).filter((item) => {
-            const key = `${item.sort_ts ?? ''}_${item.sort_id ?? ''}_${item.feed_type ?? ''}`;
-            if (seen.has(key))
-                return false;
-            seen.add(key);
-            return true;
-        });
-    }, [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: (lastResult?.hasMore ??
-            (currentCursor !== null && pages.length > 0)) ??
-            false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
+    const filtersKey = useFiltersKey(options);
+    const paging = usePaging(`device:${deviceId}|${filtersKey}`);
+    const query = useGetFeedInfiniteByDeviceQuery({ deviceId, cursor: paging.cursor, ...rangeArgs(options) }, { skip: !options.enabled || !deviceId });
+    return useInfinitePages(paging, query, {
+        toPage: feedPage,
+        rowKey: feedRowKey,
+    });
 };
-function useAnalysisJobsInfiniteFiltersKey(options) {
-    return useMemo(() => JSON.stringify({ status: options.status ?? null }), [options.status]);
-}
 export const useInfiniteAnalysisJobs = (options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const infiniteFiltersKey = useAnalysisJobsInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const currentQuery = useGetAnalysisJobsInfiniteQuery({
+    const status = options.status ?? null;
+    const paging = usePaging(`status:${status}`);
+    const query = useGetAnalysisJobsInfiniteQuery({
+        cursor: paging.cursor,
+        status,
         limit: options.limit || 20,
-        cursor: currentCursor,
         supabase: options.supabase,
-        status: options.status ?? null,
-    }, {
-        skip: !options.enabled,
+    }, { skip: !options.enabled });
+    return useInfinitePages(paging, query, {
+        toPage: analysisJobsPage,
+        rowKey: rowId,
     });
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            setPages([]);
-            setCurrentCursor(null);
-        }
-    }, [infiniteFiltersKey]);
-    useEffect(() => {
-        if (currentQuery.data && !currentQuery.isLoading) {
-            setPages((prev) => {
-                const existingPage = prev.find((p) => (p.cursor === null && currentCursor === null) ||
-                    (p.cursor != null &&
-                        currentCursor != null &&
-                        p.cursor.id === currentCursor.id));
-                if (!existingPage) {
-                    return [
-                        ...prev,
-                        { cursor: currentCursor, data: currentQuery.data.jobs },
-                    ];
-                }
-                return prev;
-            });
-        }
-    }, [currentQuery.data, currentQuery.isLoading, currentCursor]);
-    const loadMore = useCallback(() => {
-        if (currentQuery.data?.hasMore &&
-            currentQuery.data.nextCursor &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(currentQuery.data.nextCursor);
-        }
-    }, [currentQuery.data, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        setPages([]);
-        setCurrentCursor(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => pages.flatMap((page) => page.data), [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: currentQuery.data?.hasMore || false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
 };
-function useAnalysisTasksInfiniteFiltersKey(options) {
-    return useMemo(() => JSON.stringify({
-        job_id: options.job_id ?? null,
-        status: options.status ?? null,
-    }), [options.job_id, options.status]);
-}
 export const useInfiniteAnalysisTasks = (options) => {
-    const [pages, setPages] = useState([]);
-    const [currentCursor, setCurrentCursor] = useState(null);
-    const infiniteFiltersKey = useAnalysisTasksInfiniteFiltersKey(options);
-    const prevInfiniteFiltersKeyRef = useRef(null);
-    const currentQuery = useGetAnalysisTasksInfiniteQuery({
+    const status = options.status ?? null;
+    const jobId = options.job_id ?? null;
+    const paging = usePaging(`job:${jobId}|status:${status}`);
+    const query = useGetAnalysisTasksInfiniteQuery({
+        cursor: paging.cursor,
+        status,
+        job_id: jobId,
         limit: options.limit || 20,
-        cursor: currentCursor,
         supabase: options.supabase,
-        job_id: options.job_id ?? null,
-        status: options.status ?? null,
-    }, {
-        skip: !options.enabled,
+    }, { skip: !options.enabled });
+    return useInfinitePages(paging, query, {
+        toPage: analysisTasksPage,
+        rowKey: rowId,
     });
-    useEffect(() => {
-        if (prevInfiniteFiltersKeyRef.current === null) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            return;
-        }
-        if (prevInfiniteFiltersKeyRef.current !== infiniteFiltersKey) {
-            prevInfiniteFiltersKeyRef.current = infiniteFiltersKey;
-            setPages([]);
-            setCurrentCursor(null);
-        }
-    }, [infiniteFiltersKey]);
-    useEffect(() => {
-        if (currentQuery.data && !currentQuery.isLoading) {
-            setPages((prev) => {
-                const existingPage = prev.find((p) => (p.cursor === null && currentCursor === null) ||
-                    (p.cursor != null &&
-                        currentCursor != null &&
-                        p.cursor.id === currentCursor.id));
-                if (!existingPage) {
-                    return [
-                        ...prev,
-                        { cursor: currentCursor, data: currentQuery.data.tasks },
-                    ];
-                }
-                return prev;
-            });
-        }
-    }, [currentQuery.data, currentQuery.isLoading, currentCursor]);
-    const loadMore = useCallback(() => {
-        if (currentQuery.data?.hasMore &&
-            currentQuery.data.nextCursor &&
-            !currentQuery.isLoading) {
-            setCurrentCursor(currentQuery.data.nextCursor);
-        }
-    }, [currentQuery.data, currentQuery.isLoading]);
-    const refetch = useCallback(() => {
-        setPages([]);
-        setCurrentCursor(null);
-        currentQuery.refetch();
-    }, [currentQuery]);
-    const allItems = useMemo(() => pages.flatMap((page) => page.data), [pages]);
-    return {
-        items: allItems,
-        isLoading: currentQuery.isLoading && pages.length === 0,
-        isLoadingMore: currentQuery.isLoading && pages.length > 0,
-        hasMore: currentQuery.data?.hasMore || false,
-        loadMore,
-        refetch,
-        error: currentQuery.error,
-    };
 };
 export const useIntersectionObserver = (callback, options = {}) => {
     const [element, setElement] = useState(null);