fix(prompts): bound version-history refetch cost to actual changes

useInfiniteQuery refetches every already-loaded page sequentially on any
trigger, and the Diff/Deploy menus can load many pages for large prompts —
so the prior refetchInterval/refetchOnWindowFocus multiplied request volume
by however many pages a session had loaded. Drop those from the infinite
query and instead poll the cheap prompt object (version_count) on the same
interval, invalidating the versions list only when that count actually
changes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: natagh23

apps/opik-frontend/src/api/prompts/usePromptVersionsByIdInfinite.ts

@@ -18,6 +18,7 @@ type UsePromptVersionsByIdInfiniteParams = {
 type UsePromptVersionsByIdInfiniteOptions = {
   enabled?: boolean;
   refetchInterval?: number;
+  refetchOnWindowFocus?: boolean;
 };
 
 export default function usePromptVersionsByIdInfinite(

apps/opik-frontend/src/v2/pages/PromptPage/PromptPage.tsx

@@ -27,7 +27,13 @@ const PromptPage: React.FunctionComponent = () => {
 
   const promptId = usePromptIdFromURL();
 
-  const { data: prompt } = usePromptById({ promptId }, { enabled: !!promptId });
+  // Cheap poll so the (unbounded) paginated version list can detect other
+  // users' changes without itself refetching every loaded page on a timer —
+  // see usePromptVersionHistory's version_count watcher.
+  const { data: prompt } = usePromptById(
+    { promptId },
+    { enabled: !!promptId, refetchInterval: 30000 },
+  );
   const promptName = prompt?.name || "";
   const setBreadcrumbParam = useBreadcrumbsStore((state) => state.setParam);
 

apps/opik-frontend/src/v2/pages/PromptPage/PromptTab/usePromptVersionHistory.ts

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
-import { keepPreviousData } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { keepPreviousData, useQueryClient } from "@tanstack/react-query";
 import { StringParam, useQueryParam } from "use-query-params";
 import {
   PromptVersion,
@@ -25,6 +25,8 @@ export default function usePromptVersionHistory(
     StringParam,
   );
 
+  const queryClient = useQueryClient();
+
   const {
     data,
     isLoading: isVersionsLoading,
@@ -40,10 +42,39 @@ export default function usePromptVersionHistory(
     },
     {
       enabled: !!prompt?.id,
-      refetchInterval: 30000,
+      // No refetchInterval/refetchOnWindowFocus here: useInfiniteQuery
+      // refetches every already-loaded page sequentially, and the Diff/Deploy
+      // menus deliberately load every page for large prompts — polling or
+      // refocus-refetching that unconditionally would multiply request volume
+      // by however many pages got loaded that session. Instead, the cheap
+      // `prompt` query below polls `version_count` and this list only
+      // refetches (own mutations aside) when that actually changes.
     },
   );
 
+  // `prompt` is polled (see PromptPage) so `version_count` changing is a
+  // cheap signal that some version was added/removed elsewhere — only then
+  // do we pay for the expensive full-history refetch.
+  const versionCountRef = useRef(prompt?.version_count);
+  useEffect(() => {
+    if (
+      prompt?.id &&
+      prompt.version_count !== undefined &&
+      versionCountRef.current !== undefined &&
+      prompt.version_count !== versionCountRef.current
+    ) {
+      queryClient.invalidateQueries({
+        predicate: (query) =>
+          query.queryKey[0] === "prompt-versions" &&
+          typeof query.queryKey[1] === "object" &&
+          query.queryKey[1] !== null &&
+          "promptId" in query.queryKey[1] &&
+          query.queryKey[1].promptId === prompt.id,
+      });
+    }
+    versionCountRef.current = prompt?.version_count;
+  }, [prompt?.id, prompt?.version_count, queryClient]);
+
   const versions = useMemo(
     () =>
       data?.pages.flatMap((p) => p.content) as