fix(frontend/library): Show total runs count above runs list (#10832)

- Resolves #10831

### Changes 🏗️

- Show number of total runs instead of currently loaded runs
- Show loading spinner instead of zero while loading

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Counter shows number of total runs, even if it exceeds number of
currently loaded items

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-runs-selector-list.tsx

@@ -15,7 +15,7 @@ import { cn } from "@/lib/utils";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/atoms/Button/Button";
-import LoadingBox from "@/components/ui/loading";
+import LoadingBox, { LoadingSpinner } from "@/components/ui/loading";
 import { PlusIcon } from "@phosphor-icons/react";
 import { Separator } from "@/components/ui/separator";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -49,6 +49,7 @@ export function AgentRunsSelectorList({
   agent,
   agentRunsQuery: {
     agentRuns,
+    agentRunCount,
     agentRunsLoading,
     hasMoreRuns,
     fetchMoreRuns,
@@ -113,7 +114,9 @@ export function AgentRunsSelectorList({
           onClick={() => setActiveListTab("runs")}
         >
           <span>Runs</span>
-          <span className="text-neutral-600">{agentRuns.length}</span>
+          <span className="text-neutral-600">
+            {agentRunCount ?? <LoadingSpinner className="size-4" />}
+          </span>
         </Badge>
 
         <Badge

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/use-agent-runs.ts

@@ -86,16 +86,16 @@ export const useAgentRunsInfinite = (graphID?: GraphID) => {
       return response.executions;
     }) ?? [];
 
-  const agentRunCount = queryResults?.pages[-1]
-    ? (queryResults.pages[-1].data as GraphExecutionsPaginated).pagination
-        .total_items
-    : 0;
+  const agentRunCount = (
+    queryResults?.pages.at(-1)?.data as GraphExecutionsPaginated | undefined
+  )?.pagination.total_items;
 
   const upsertAgentRun = (newAgentRun: GraphExecutionMeta) => {
     queryClient.setQueryData(
       queryKey,
       (currentQueryData: typeof queryResults) => {
-        if (!currentQueryData?.pages) return currentQueryData;
+        if (!currentQueryData?.pages || agentRunCount === undefined)
+          return currentQueryData;
 
         const exists = currentQueryData.pages.some((page) => {
           if (page.status !== 200) return false;
@@ -147,7 +147,22 @@ export const useAgentRunsInfinite = (graphID?: GraphID) => {
         const updatedPages = [updatedPage, ...currentQueryData.pages.slice(1)];
         return {
           ...currentQueryData,
-          pages: updatedPages,
+          pages: updatedPages.map(
+            // Increment the total runs count in the pagination info of all pages
+            (page) =>
+              page.status === 200
+                ? {
+                    ...page,
+                    data: {
+                      ...page.data,
+                      pagination: {
+                        ...page.data.pagination,
+                        total_items: agentRunCount + 1,
+                      },
+                    },
+                  }
+                : page,
+          ),
         };
       },
     );