feat(client, server): infinite scroll for tools

mcpjam-inspector/client/src/components/ToolsTab.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type {
   CallToolResult,
   ElicitRequest,
@@ -116,7 +116,7 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
     useState<"not_applicable" | "valid" | "invalid_json" | "schema_mismatch">(
       "not_applicable",
     );
-  const [loading, setLoading] = useState(false);
+  const [loadingExecuteTool, setLoadingExecuteTool] = useState(false);
   const [fetchingTools, setFetchingTools] = useState(false);
   const [error, setError] = useState<string>("");
   const [activeElicitation, setActiveElicitation] =
@@ -147,6 +147,9 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
     useState<TaskCapabilities | null>(null);
   // TTL for task execution (milliseconds, 0 = no expiration)
   const [taskTtl, setTaskTtl] = useState<number>(0);
+  // Infinite scroll state
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const [cursor, setCursor] = useState<string | undefined>(undefined);
   const serverKey = useMemo(() => {
     if (!serverConfig) return "none";
     try {
@@ -267,7 +270,6 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
 
     setFetchingTools(true);
     setError("");
-    setTools({});
     setSelectedTool("");
     setFormFields([]);
     setResult(null);
@@ -277,12 +279,14 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
     setUnstructuredValidationResult("not_applicable");
 
     try {
-      const data = await listTools(serverName);
+      // Call to get all of the tools for server
+      const data = await listTools(serverName, undefined, cursor);
       const toolArray = data.tools ?? [];
       const dictionary = Object.fromEntries(
         toolArray.map((tool: Tool) => [tool.name, tool]),
       );
-      setTools(dictionary);
+      setTools((prev) => ({ ...prev, ...dictionary }));
+      setCursor(data.nextCursor);
       logger.info("Tools fetched", {
         serverId: serverName,
         toolCount: toolArray.length,
@@ -427,7 +431,7 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
       return;
     }
 
-    setLoading(true);
+    setLoadingExecuteTool(true);
     setError("");
     setResult(null);
     setStructuredResult(null);
@@ -473,15 +477,20 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
       });
       setError(message);
     } finally {
-      setLoading(false);
+      setLoadingExecuteTool(false);
     }
   };
 
   // Handle Enter key to execute tool globally
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Check if Enter is pressed (not Shift+Enter)
-      if (e.key === "Enter" && !e.shiftKey && selectedTool && !loading) {
+      if (
+        e.key === "Enter" &&
+        !e.shiftKey &&
+        selectedTool &&
+        !loadingExecuteTool
+      ) {
         // Don't trigger if user is typing in an input, textarea, or contenteditable
         const target = e.target as HTMLElement;
         const tagName = target.tagName;
@@ -498,7 +507,7 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [selectedTool, loading]);
+  }, [selectedTool, loadingExecuteTool]);
 
   const handleElicitationResponse = async (
     action: "accept" | "decline" | "cancel",
@@ -576,6 +585,29 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
       })
     : toolNames;
 
+  // IntersectionObserver for infinite scroll
+  useEffect(() => {
+    if (!sentinelRef.current) return;
+    if (activeTab !== "tools") return; // Only observe when tools tab is active
+
+    const element = sentinelRef.current;
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (!entry.isIntersecting) return;
+      if (!cursor || fetchingTools) return;
+
+      // Load more tools
+      fetchTools();
+    });
+
+    observer.observe(element);
+
+    return () => {
+      observer.unobserve(element);
+      observer.disconnect();
+    };
+  }, [filteredToolNames.length, activeTab]);
+
   const filteredSavedRequests = searchQuery.trim()
     ? savedRequests.filter((tool) => {
         const haystack =
@@ -588,11 +620,9 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
     ? {
         requestId: activeElicitation.requestId,
         message: activeElicitation.request.message,
-        schema: (
-          activeElicitation.request as unknown as {
-            requestedSchema?: Record<string, unknown>;
-          }
-        ).requestedSchema as Record<string, unknown> | undefined,
+        schema: (activeElicitation.request as any).requestedSchema as
+          | Record<string, unknown>
+          | undefined,
         timestamp: activeElicitation.timestamp,
       }
     : null;
@@ -630,6 +660,10 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
               onRenameRequest={handleRenameRequest}
               onDuplicateRequest={handleDuplicateRequest}
               onDeleteRequest={handleDeleteRequest}
+              displayedToolCount={toolNames.length}
+              sentinelRef={sentinelRef}
+              loadingMore={fetchingTools}
+              cursor={cursor ?? ""}
             />
             <ResizableHandle withHandle />
             {selectedTool ? (
@@ -638,7 +672,7 @@ export function ToolsTab({ serverConfig, serverName }: ToolsTabProps) {
                 toolDescription={tools[selectedTool]?.description}
                 formFields={formFields}
                 onToggleField={updateFieldIsSet}
-                loading={loading}
+                loading={loadingExecuteTool}
                 waitingOnElicitation={!!activeElicitation}
                 onExecute={executeTool}
                 onSave={handleSaveCurrent}

mcpjam-inspector/client/src/components/tools/ToolsSidebar.tsx

@@ -1,5 +1,6 @@
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Wrench, RefreshCw } from "lucide-react";
+import type { RefObject } from "react";
 import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { ScrollArea } from "../ui/scroll-area";
@@ -28,6 +29,10 @@ interface ToolsSidebarProps {
   onRenameRequest: (req: SavedRequest) => void;
   onDuplicateRequest: (req: SavedRequest) => void;
   onDeleteRequest: (id: string) => void;
+  displayedToolCount: number;
+  sentinelRef: RefObject<HTMLDivElement | null>;
+  loadingMore: boolean;
+  cursor: string;
 }
 
 export function ToolsSidebar({
@@ -48,6 +53,10 @@ export function ToolsSidebar({
   onRenameRequest,
   onDuplicateRequest,
   onDeleteRequest,
+  displayedToolCount,
+  sentinelRef,
+  loadingMore,
+  cursor,
 }: ToolsSidebarProps) {
   const posthog = usePostHog();
   return (
@@ -146,17 +155,39 @@ export function ToolsSidebar({
                     </p>
                   </div>
                 ) : (
-                  <div className="grid grid-cols-1 gap-2">
-                    {filteredToolNames.map((name) => (
-                      <ToolItem
-                        key={name}
-                        tool={tools[name]}
-                        name={name}
-                        isSelected={selectedToolName === name}
-                        onClick={() => onSelectTool(name)}
-                      />
-                    ))}
-                  </div>
+                  <>
+                    <div className="grid grid-cols-1 gap-2">
+                      {filteredToolNames
+                        .slice(0, displayedToolCount)
+                        .map((name) => (
+                          <ToolItem
+                            key={name}
+                            tool={tools[name]}
+                            name={name}
+                            isSelected={selectedToolName === name}
+                            onClick={() => onSelectTool(name)}
+                          />
+                        ))}
+                    </div>
+
+                    {/* Sentinel observed by IntersectionObserver */}
+                    <div ref={sentinelRef} className="h-4" />
+
+                    {loadingMore && (
+                      <div className="flex items-center justify-center py-3 text-xs text-muted-foreground gap-2">
+                        <RefreshCw className="h-3 w-3 animate-spin" />
+                        <span>Loading more tools…</span>
+                      </div>
+                    )}
+
+                    {!cursor &&
+                      filteredToolNames.length > 0 &&
+                      !loadingMore && (
+                        <div className="text-center py-3 text-xs text-muted-foreground">
+                          No more tools
+                        </div>
+                      )}
+                  </>
                 )}
               </div>
             </ScrollArea>

mcpjam-inspector/client/src/hooks/use-app-state.ts

@@ -907,7 +907,15 @@ export function useAppState() {
         toast.error(`Network error: ${errorMessage}`);
       }
     },
-    [appState.servers, appState.workspaces, appState.activeWorkspaceId, isAuthenticated, logger, fetchAndStoreInitInfo, syncServerToConvex],
+    [
+      appState.servers,
+      appState.workspaces,
+      appState.activeWorkspaceId,
+      isAuthenticated,
+      logger,
+      fetchAndStoreInitInfo,
+      syncServerToConvex,
+    ],
   );
 
   const saveServerConfigWithoutConnecting = useCallback(

mcpjam-inspector/client/src/lib/apis/mcp-tools-api.ts

@@ -44,11 +44,12 @@ export type ToolExecutionResponse =
 export async function listTools(
   serverId: string,
   modelId?: string,
+  cursor?: string,
 ): Promise<ListToolsResultWithMetadata> {
   const res = await fetch("/api/mcp/tools/list", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ serverId, modelId }),
+    body: JSON.stringify({ serverId, modelId, cursor }),
   });
   let body: any = null;
   try {

mcpjam-inspector/server/routes/mcp/tools.ts

@@ -166,9 +166,10 @@ function jsonError(c: any, error: unknown, fallbackStatus = 500) {
 
 tools.post("/list", async (c) => {
   try {
-    const { serverId, modelId } = (await c.req.json()) as {
+    const { serverId, modelId, cursor } = (await c.req.json()) as {
       serverId?: string;
       modelId?: string;
+      cursor?: string;
     };
     if (!serverId) {
       return c.json({ error: "serverId is required" }, 400);
@@ -191,6 +192,7 @@ tools.post("/list", async (c) => {
 
     const result = (await c.mcpClientManager.listTools(
       normalizedServerId,
+      cursor ? { cursor } : undefined,
     )) as ListToolsResult;
 
     // Get cached metadata map for O(1) frontend lookups
@@ -203,7 +205,12 @@ tools.post("/list", async (c) => {
       tokenCount = await countToolsTokens(result.tools, modelId);
     }
 
-    return c.json({ ...result, toolsMetadata, tokenCount });
+    return c.json({
+      ...result,
+      toolsMetadata,
+      tokenCount,
+      nextCursor: result.nextCursor,
+    });
   } catch (error) {
     return jsonError(c, error, 500);
   }