Fixed Run as Task support (UX and CallToolStream support). Fixed resources/prompts/tools tab layout issue where the lists didn't take up all available vertical space.

Author: BobDickinson

docs/inspector-client-todo.md

@@ -85,12 +85,20 @@ Goal: Parity with v1 client
 Goal: Bring Inspector Web support to current spec
 
 - URL elicitation (already in InspectorClient, just need UX)
+  - https://github.com/modelcontextprotocol/inspector/issues/929
+  - https://github.com/modelcontextprotocol/inspector/pull/994
 - Add "sampling with tools" support
   - https://github.com/modelcontextprotocol/inspector/issues/932
 - Review v1 project boards for any feature deficiencies
 
 Goal: Inspector Web quality
 
+- Flaky test (fails maybe 1 time out of 20):
+  - **tests**/inspectorClient-oauth-e2e.test.ts > InspectorClient OAuth E2E > Storage path (custom) ('SSE') > should persist OAuth state to custom storagePath
+    ```
+    Error: waitForStateFile failed: JSON parse error (file may be mid-write or corrupt). File: /var/folders/c8/jr_qy1fs1cj3hfhr5m_2f4c40000gn/T/mcp-inspector-e2e-1771550464080-66tdoqzpfxo.json. Attempts: 40. Raw snippet: {"state":{"servers":{"http://localhost:51796/sse":{"preregisteredClientInformation":{"client_id":"test-storage-path","client_secret":"test-secret-sp"},"codeVerifier":"U8mEkBln9JtFLMzC3b50kj0QtubtwpDPU... (405 chars total). Run with DEBUG_WAIT_FOR_STATE_FILE=1 for per-attempt logs.
+    ❯ vi.waitFor.timeout.timeout test/test-helpers.ts:138:15
+    ```
 - Review open v1 bugs (esp auth bugs) to see which ones still apply
 
 Misc

web/src/App.tsx

@@ -1280,142 +1280,123 @@ const App = () => {
       throw new Error("InspectorClient is not connected");
     }
 
-    try {
-      // Find the tool schema to clean parameters properly
-      const tool = inspectorTools.find((t) => t.name === name);
-      const cleanedParams = tool?.inputSchema
-        ? cleanParams(params, tool.inputSchema as JsonSchemaType)
-        : params;
-
-      // Merge general metadata with tool-specific metadata
-      // Tool-specific metadata takes precedence over general metadata
-      const generalMetadata = {
-        ...metadata, // General metadata
-        progressToken: String(progressTokenRef.current++),
-      };
-      const toolSpecificMetadata = toolMetadata
-        ? Object.fromEntries(
-            Object.entries(toolMetadata).map(([k, v]) => [k, String(v)]),
-          )
-        : undefined;
+    const tool = inspectorTools.find((t) => t.name === name);
+    const taskSupport = tool?.execution?.taskSupport ?? "forbidden";
+    const effectiveRunAsTask =
+      taskSupport === "required" ||
+      (taskSupport === "optional" && runAsTask === true);
+
+    const cleanedParams = tool?.inputSchema
+      ? cleanParams(params, tool.inputSchema as JsonSchemaType)
+      : params;
+    const generalMetadata = {
+      ...metadata,
+      progressToken: String(progressTokenRef.current++),
+    };
+    const toolSpecificMetadata = toolMetadata
+      ? Object.fromEntries(
+          Object.entries(toolMetadata).map(([k, v]) => [k, String(v)]),
+        )
+      : undefined;
+    const taskOptions = effectiveRunAsTask
+      ? { ttl: getMCPTaskTtl(config) }
+      : undefined;
 
-      const taskOptions =
-        runAsTask === true ? { ttl: getMCPTaskTtl(config) } : undefined;
+    try {
+      if (effectiveRunAsTask) {
+        // Use callToolStream for task-augmented execution (required or optional+checked)
+        let currentTaskId: string | undefined;
+
+        const onTaskCreated = (
+          e: CustomEvent<{ taskId: string; task: { taskId: string } }>,
+        ) => {
+          const { taskId } = e.detail;
+          currentTaskId = taskId;
+          setToolResult({
+            content: [
+              {
+                type: "text",
+                text: `Task created: ${taskId}. Polling for status...`,
+              },
+            ],
+            _meta: {
+              "io.modelcontextprotocol/related-task": { taskId },
+            },
+          } as CompatibilityCallToolResult);
+        };
 
-      const invocation = await inspectorClient.callTool(
-        name,
-        cleanedParams as Record<string, JsonValue>,
-        generalMetadata,
-        toolSpecificMetadata,
-        taskOptions,
-      );
+        const onTaskStatusChange = (
+          e: CustomEvent<{
+            taskId: string;
+            task: { status: string; statusMessage?: string };
+          }>,
+        ) => {
+          const { taskId, task } = e.detail;
+          if (currentTaskId !== taskId) return;
+          setToolResult({
+            content: [
+              {
+                type: "text",
+                text: `Task status: ${task.status}${task.statusMessage ? ` - ${task.statusMessage}` : ""}. Polling...`,
+              },
+            ],
+            _meta: {
+              "io.modelcontextprotocol/related-task": { taskId },
+            },
+          } as CompatibilityCallToolResult);
+          void inspectorClient.listRequestorTasks();
+        };
 
-      // Check if server returned a task reference (task-augmented execution)
-      const rawResult = invocation.result as
-        | (Record<string, unknown> & {
-            task?: { taskId: string; status: string; pollInterval?: number };
-          })
-        | null
-        | undefined;
-      const isTaskResult = (
-        res: unknown,
-      ): res is {
-        task: { taskId: string; status: string; pollInterval?: number };
-      } =>
-        !!res &&
-        typeof res === "object" &&
-        "task" in res &&
-        !!(res as Record<string, unknown>).task &&
-        typeof (res as Record<string, unknown>).task === "object" &&
-        "taskId" in (res as { task: Record<string, unknown> }).task;
-
-      if (runAsTask && rawResult && isTaskResult(rawResult)) {
-        const taskId = rawResult.task.taskId;
-        const pollInterval = rawResult.task.pollInterval ?? 1000;
+        inspectorClient.addEventListener("taskCreated", onTaskCreated);
+        inspectorClient.addEventListener(
+          "taskStatusChange",
+          onTaskStatusChange,
+        );
         setIsPollingTask(true);
-        const initialResponseMeta =
-          rawResult && typeof rawResult === "object" && "_meta" in rawResult
-            ? ((rawResult as { _meta?: Record<string, unknown> })._meta ?? {})
-            : undefined;
-        setToolResult({
-          content: [
-            {
-              type: "text",
-              text: `Task created: ${taskId}. Polling for status...`,
-            },
-          ],
-          _meta: {
-            ...(initialResponseMeta || {}),
-            "io.modelcontextprotocol/related-task": { taskId },
-          },
-        } as CompatibilityCallToolResult);
-
-        let taskCompleted = false;
-        while (!taskCompleted) {
-          try {
-            await new Promise((resolve) => setTimeout(resolve, pollInterval));
-            const taskStatus = await inspectorClient.getRequestorTask(taskId);
-
-            if (
-              taskStatus.status === "completed" ||
-              taskStatus.status === "failed" ||
-              taskStatus.status === "cancelled"
-            ) {
-              taskCompleted = true;
-              if (taskStatus.status === "completed") {
-                const result =
-                  await inspectorClient.getRequestorTaskResult(taskId);
-                setToolResult(result as CompatibilityCallToolResult);
-              } else {
-                setToolResult({
+
+        try {
+          const invocation = await inspectorClient.callToolStream(
+            name,
+            cleanedParams as Record<string, JsonValue>,
+            generalMetadata,
+            toolSpecificMetadata,
+            taskOptions,
+          );
+
+          const compatibilityResult: CompatibilityCallToolResult =
+            invocation.result
+              ? {
+                  content: invocation.result.content || [],
+                  isError: false,
+                }
+              : {
                   content: [
                     {
                       type: "text",
-                      text: `Task ${taskStatus.status}: ${taskStatus.statusMessage ?? "No additional information"}`,
+                      text: invocation.error || "Tool call failed",
                     },
                   ],
                   isError: true,
-                });
-              }
-              void inspectorClient.listRequestorTasks();
-            } else {
-              const pollingResponseMeta =
-                rawResult &&
-                typeof rawResult === "object" &&
-                "_meta" in rawResult
-                  ? ((rawResult as { _meta?: Record<string, unknown> })._meta ??
-                    {})
-                  : undefined;
-              setToolResult({
-                content: [
-                  {
-                    type: "text",
-                    text: `Task status: ${taskStatus.status}${taskStatus.statusMessage ? ` - ${taskStatus.statusMessage}` : ""}. Polling...`,
-                  },
-                ],
-                _meta: {
-                  ...(pollingResponseMeta || {}),
-                  "io.modelcontextprotocol/related-task": { taskId },
-                },
-              } as CompatibilityCallToolResult);
-              void inspectorClient.listRequestorTasks();
-            }
-          } catch (pollingError) {
-            setToolResult({
-              content: [
-                {
-                  type: "text",
-                  text: `Error polling task status: ${pollingError instanceof Error ? pollingError.message : String(pollingError)}`,
-                },
-              ],
-              isError: true,
-            });
-            taskCompleted = true;
-          }
+                };
+          setToolResult(compatibilityResult);
+        } finally {
+          inspectorClient.removeEventListener("taskCreated", onTaskCreated);
+          inspectorClient.removeEventListener(
+            "taskStatusChange",
+            onTaskStatusChange,
+          );
+          setIsPollingTask(false);
         }
-        setIsPollingTask(false);
       } else {
-        // Convert ToolCallInvocation to CompatibilityCallToolResult
+        // Use callTool for non-task execution
+        const invocation = await inspectorClient.callTool(
+          name,
+          cleanedParams as Record<string, JsonValue>,
+          generalMetadata,
+          toolSpecificMetadata,
+          undefined, // no task options
+        );
+
         const compatibilityResult: CompatibilityCallToolResult =
           invocation.result
             ? {
@@ -1433,21 +1414,18 @@ const App = () => {
               };
         setToolResult(compatibilityResult);
       }
-      // Clear any validation errors since tool execution completed
       setErrors((prev) => ({ ...prev, tools: null }));
     } catch (e) {
       setIsPollingTask(false);
-      const toolResult: CompatibilityCallToolResult = {
+      setToolResult({
         content: [
           {
             type: "text",
             text: (e as Error).message ?? String(e),
           },
         ],
         isError: true,
-      };
-      setToolResult(toolResult);
-      // Clear validation errors - tool execution errors are shown in ToolResults
+      });
       setErrors((prev) => ({ ...prev, tools: null }));
     }
   };

web/src/components/ListPane.tsx

@@ -12,6 +12,8 @@ type ListPaneProps<T> = {
   title: string;
   buttonText: string;
   isButtonDisabled?: boolean;
+  /** When true, the list scroll area fills available vertical space instead of max-h-96 */
+  fillHeight?: boolean;
 };
 
 const ListPane = <T extends object>({
@@ -23,6 +25,7 @@ const ListPane = <T extends object>({
   title,
   buttonText,
   isButtonDisabled,
+  fillHeight = false,
 }: ListPaneProps<T>) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [isSearchExpanded, setIsSearchExpanded] = useState(false);
@@ -56,8 +59,10 @@ const ListPane = <T extends object>({
   };
 
   return (
-    <div className="bg-card border border-border rounded-lg shadow">
-      <div className="p-4 border-b border-gray-200 dark:border-border">
+    <div
+      className={`bg-card border border-border rounded-lg shadow ${fillHeight ? "flex flex-col h-full min-h-0 overflow-hidden" : ""}`}
+    >
+      <div className="p-4 flex-shrink-0 border-b border-gray-200 dark:border-border">
         <div className="flex items-center justify-between gap-4">
           <h3 className="font-semibold dark:text-white flex-shrink-0">
             {title}
@@ -92,7 +97,9 @@ const ListPane = <T extends object>({
           </div>
         </div>
       </div>
-      <div className="p-4">
+      <div
+        className={`p-4 ${fillHeight ? "flex flex-col flex-1 min-h-0 overflow-hidden" : ""}`}
+      >
         <Button
           variant="outline"
           className="w-full mb-4"
@@ -111,7 +118,9 @@ const ListPane = <T extends object>({
             Clear
           </Button>
         )}
-        <div className="space-y-2 overflow-y-auto max-h-96">
+        <div
+          className={`space-y-2 overflow-y-auto ${fillHeight ? "flex-1 min-h-0" : "max-h-96"}`}
+        >
           {filteredItems.map((item, index) => (
             <div
               key={index}

web/src/components/PromptsTab.tsx

@@ -101,11 +101,12 @@ const PromptsTab = ({
   };
 
   return (
-    <TabsContent value="prompts">
-      <div className="grid grid-cols-2 gap-4">
+    <TabsContent value="prompts" className="flex-1 flex flex-col min-h-0 mt-0">
+      <div className="grid flex-1 min-h-0 grid-cols-2 grid-rows-[1fr] gap-4">
         <ListPane
           items={prompts}
           listItems={listPrompts}
+          fillHeight
           clearItems={() => {
             clearPrompts();
             setSelectedPrompt(null);
@@ -133,8 +134,8 @@ const PromptsTab = ({
           isButtonDisabled={!nextCursor && prompts.length > 0}
         />
 
-        <div className="bg-card border border-border rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 dark:border-border">
+        <div className="flex flex-col h-full min-h-0 overflow-hidden bg-card border border-border rounded-lg shadow">
+          <div className="p-4 flex-shrink-0 border-b border-gray-200 dark:border-border">
             <div className="flex items-center gap-2">
               {selectedPrompt && (
                 <IconDisplay
@@ -147,7 +148,7 @@ const PromptsTab = ({
               </h3>
             </div>
           </div>
-          <div className="p-4">
+          <div className="flex-1 min-h-0 overflow-y-auto p-4">
             {error ? (
               <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />