fix(ui): paginate the prompt versions list so versions past the first 50 load

js/app/src/Routes.tsx

@@ -172,6 +172,23 @@ export const revalidateOnProjectChange: ShouldRevalidateFunction = ({
   return currentParams.projectId !== nextParams.projectId;
 };
 
+// :promptId's loader always revalidates so versions saved elsewhere show up,
+// except when opening or switching versions of the same prompt: its query
+// holds only the first page of the paginated versions list, so re-running it
+// would drop the pages already scrolled in, including the version just clicked.
+const revalidatePromptUnlessOpeningVersion: ShouldRevalidateFunction = ({
+  currentUrl,
+  nextUrl,
+  currentParams,
+  nextParams,
+}) => {
+  if (currentUrl.href === nextUrl.href) return true;
+  const isOpeningVersion =
+    currentParams.promptId === nextParams.promptId &&
+    nextParams.versionId != null;
+  return !isOpeningVersion;
+};
+
 // Shared by the traces and spans tabs, which both host the compare drawer
 const compareTracesRouteHandle = {
   agentRoute: {
@@ -844,9 +861,7 @@ export const appRouteObjects = createRoutesFromElements(
           <Route
             path=":promptId"
             loader={promptLoader}
-            // force this route to always revalidate, preventing stale versions from being
-            // displayed when navigating back to the prompt page after gql mutation
-            shouldRevalidate={() => true}
+            shouldRevalidate={revalidatePromptUnlessOpeningVersion}
             handle={{
               crumb: (data: PromptLoaderData) => {
                 if (data?.prompt?.__typename === "Prompt") {

js/app/src/components/prompt/TagPromptVersionButton.tsx

@@ -14,11 +14,14 @@ import {
   PopoverArrow,
   View,
 } from "@phoenix/components";
+import type { TagPromptVersionButtonSetTagMutation } from "@phoenix/components/prompt/__generated__/TagPromptVersionButtonSetTagMutation.graphql";
 import type { TagPromptVersionButtonTagsQuery } from "@phoenix/components/prompt/__generated__/TagPromptVersionButtonTagsQuery.graphql";
 import { DEFAULT_PROMPT_VERSION_TAGS } from "@phoenix/constants";
 import { useNotifySuccess } from "@phoenix/contexts";
 import { NewPromptVersionDialog } from "@phoenix/pages/prompt/NewPromptVersionTagDialog";
 
+import { movePromptVersionTag } from "./movePromptVersionTag";
+
 type TagPromptVersionButtonProps = {
   promptId: string;
   versionId: string;
@@ -93,6 +96,7 @@ export function TagPromptVersionButton({
         }}
       >
         <NewPromptVersionDialog
+          promptId={promptId}
           promptVersionId={versionId}
           onDismiss={() => setShowNewTagDialog(false)}
           onNewTagCreated={(newTag) => {
@@ -163,22 +167,20 @@ function TagList({
     );
   }, [allVersionTags]);
 
-  const [commitSetTag, isCommitting] = useMutation(graphql`
-    mutation TagPromptVersionButtonSetTagMutation(
-      $input: SetPromptVersionTagInput!
-      $promptId: ID!
-    ) {
-      setPromptVersionTag(input: $input) {
-        query {
-          prompt: node(id: $promptId) {
-            ... on Prompt {
-              ...PromptVersionsList__main
-            }
+  const [commitSetTag, isCommitting] =
+    useMutation<TagPromptVersionButtonSetTagMutation>(graphql`
+      mutation TagPromptVersionButtonSetTagMutation(
+        $input: SetPromptVersionTagInput!
+      ) {
+        setPromptVersionTag(input: $input) {
+          promptVersionTag {
+            id
+            name
+            promptVersionId
           }
         }
       }
-    }
-  `);
+    `);
   return (
     <ul>
       {allVersionTagsWithDefaults.map((tagName: string) => {
@@ -213,7 +215,18 @@ function TagList({
                           promptVersionId: versionId,
                           description,
                         },
-                        promptId: promptId,
+                      },
+                      updater: (store, data) => {
+                        const tagId =
+                          data?.setPromptVersionTag.promptVersionTag?.id;
+                        if (tagId) {
+                          movePromptVersionTag({
+                            store,
+                            promptId,
+                            versionId,
+                            tagId,
+                          });
+                        }
                       },
                       onCompleted: () => {
                         onTagSet(tagName);