improv: ui, pagination

Author: tomasz-stefaniak

core/control-plane/client.ts

@@ -501,9 +501,13 @@ export class ControlPlaneClient {
   /**
    * List all background agents for the current user or organization
    * @param organizationId - Optional organization ID to filter agents by organization scope
+   * @param limit - Optional limit for number of agents to return (default: 5)
    */
-  public async listBackgroundAgents(organizationId?: string): Promise<
-    Array<{
+  public async listBackgroundAgents(
+    organizationId?: string,
+    limit?: number,
+  ): Promise<{
+    agents: Array<{
       id: string;
       name: string | null;
       status: string;
@@ -512,43 +516,56 @@ export class ControlPlaneClient {
       metadata?: {
         github_repo?: string;
       };
-    }>
-  > {
+    }>;
+    totalCount: number;
+  }> {
     if (!(await this.isSignedIn())) {
-      return [];
+      return { agents: [], totalCount: 0 };
     }
 
     try {
-      // Build URL with optional organizationId query parameter
-      let url = "agents";
+      // Build URL with query parameters
+      const params = new URLSearchParams();
       if (organizationId) {
-        url += `?organizationId=${encodeURIComponent(organizationId)}`;
+        params.set("organizationId", organizationId);
       }
+      if (limit !== undefined) {
+        params.set("limit", limit.toString());
+      }
+
+      const url = `agents${params.toString() ? `?${params.toString()}` : ""}`;
 
       const resp = await this.requestAndHandleError(url, {
         method: "GET",
       });
 
-      const agents = (await resp.json()) as any[];
+      const result = (await resp.json()) as {
+        agents: any[];
+        totalCount: number;
+      };
 
-      return agents.map((agent: any) => ({
-        id: agent.id,
-        name: agent.name || agent.metadata?.name || null,
-        status: agent.status,
-        repoUrl: agent.metadata?.repo_url || agent.repo_url || "",
-        createdAt:
-          agent.created_at || agent.create_time_ms
-            ? new Date(agent.created_at || agent.create_time_ms).toISOString()
-            : new Date().toISOString(),
-        metadata: {
-          github_repo: agent.metadata?.github_repo || agent.metadata?.repo_url,
-        },
-      }));
+      return {
+        agents: result.agents.map((agent: any) => ({
+          id: agent.id,
+          name: agent.name || agent.metadata?.name || null,
+          status: agent.status,
+          repoUrl: agent.metadata?.repo_url || agent.repo_url || "",
+          createdAt:
+            agent.created_at || agent.create_time_ms
+              ? new Date(agent.created_at || agent.create_time_ms).toISOString()
+              : new Date().toISOString(),
+          metadata: {
+            github_repo:
+              agent.metadata?.github_repo || agent.metadata?.repo_url,
+          },
+        })),
+        totalCount: result.totalCount,
+      };
     } catch (e) {
       Logger.error(e, {
         context: "control_plane_list_background_agents",
       });
-      return [];
+      return { agents: [], totalCount: 0 };
     }
   }
 }

core/protocol/ideWebview.ts

@@ -62,17 +62,20 @@ export type ToIdeFromWebviewProtocol = ToIdeFromWebviewOrCoreProtocol & {
     void,
   ];
   listBackgroundAgents: [
-    { organizationId?: string },
-    Array<{
-      id: string;
-      name: string | null;
-      status: string;
-      repoUrl: string;
-      createdAt: string;
-      metadata?: {
-        github_repo?: string;
-      };
-    }>,
+    { organizationId?: string; limit?: number },
+    {
+      agents: Array<{
+        id: string;
+        name: string | null;
+        status: string;
+        repoUrl: string;
+        createdAt: string;
+        metadata?: {
+          github_repo?: string;
+        };
+      }>;
+      totalCount: number;
+    },
   ];
 };
 

extensions/vscode/src/extension/VsCodeMessenger.ts

@@ -391,17 +391,18 @@ export class VsCodeMessenger {
 
     this.onWebview("listBackgroundAgents", async (msg) => {
       const configHandler = await configHandlerPromise;
-      const { organizationId } = msg.data;
+      const { organizationId, limit } = msg.data;
 
       try {
-        const agents =
+        const result =
           await configHandler.controlPlaneClient.listBackgroundAgents(
             organizationId,
+            limit,
           );
-        return agents;
+        return result;
       } catch (e) {
         console.error("Error listing background agents:", e);
-        return [];
+        return { agents: [], totalCount: 0 };
       }
     });
 

gui/src/components/BackgroundMode/AgentsList.tsx

@@ -25,12 +25,14 @@ export function AgentsList({ isCreatingAgent = false }: AgentsListProps) {
   const ideMessenger = useContext(IdeMessengerContext);
   const currentOrg = useAppSelector(selectCurrentOrg);
   const [agents, setAgents] = useState<Agent[] | null>(null);
+  const [totalCount, setTotalCount] = useState<number>(0);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     async function fetchAgents() {
       if (!session) {
         setAgents([]);
+        setTotalCount(0);
         return;
       }
 
@@ -39,21 +41,30 @@ export function AgentsList({ isCreatingAgent = false }: AgentsListProps) {
           currentOrg?.id !== "personal" ? currentOrg?.id : undefined;
         const result = await ideMessenger.request("listBackgroundAgents", {
           organizationId,
+          limit: 5,
         });
 
         if ("status" in result && result.status === "success") {
-          setAgents(Array.isArray(result.content) ? result.content : []);
+          const content = result.content as {
+            agents: Agent[];
+            totalCount: number;
+          };
+          setAgents(content.agents || []);
+          setTotalCount(content.totalCount || 0);
           setError(null);
         } else if ("error" in result) {
           setError(result.error);
           setAgents([]);
+          setTotalCount(0);
         } else {
           setAgents([]);
+          setTotalCount(0);
         }
       } catch (err: any) {
         console.error("Failed to fetch agents:", err);
         setError(err.message || "Failed to load agents");
         setAgents([]);
+        setTotalCount(0);
       }
     }
 
@@ -127,6 +138,21 @@ export function AgentsList({ isCreatingAgent = false }: AgentsListProps) {
             </div>
           </div>
         ))}
+        {totalCount > agents.length && (
+          <div className="mt-2">
+            <button
+              onClick={() => {
+                ideMessenger.post("controlPlane/openUrl", {
+                  path: "agents",
+                  orgSlug: currentOrg?.slug,
+                });
+              }}
+              className="text-link w-full cursor-pointer border-none bg-transparent p-0 text-center text-sm font-medium no-underline hover:underline"
+            >
+              See all {totalCount} tasks →
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );