fix(network): capture response bodies via async body-update events

Two related fixes:

1. The fetch tracker was marking every streamable-HTTP POST /mcp call as
   "not captured" because the response content-type is text/event-stream.
   In practice those streams are bounded — the server sends the
   JSON-RPC reply (sometimes preceded by progress events) and closes —
   so we can clone the body and read it. Only GET + SSE / ndjson is the
   unbounded long-lived channel that has to stay uncaptured.

2. Reading the body inline blocked the transport from processing
   progress notifications until the entire stream finished, breaking the
   `resetTimeoutOnProgress` integration test. The body is now read in
   the background and dispatched via a new `fetchRequestBodyUpdate`
   event that the FetchRequestLogState patches into the matching entry
   by id. Plumbing wires through node/transport, the remote SSE channel
   (RemoteSession, RemoteClientTransport), and the remote event types.

Also hides the Network tab when the active server is stdio (no HTTP
traffic to surface) and bumps the inline body preview limit to 100 KB
so typical tools/list responses render rather than tripping the "too
large" notice.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: cliffhall

clients/web/src/components/groups/NetworkEntry/NetworkEntry.test.tsx

@@ -110,21 +110,35 @@ describe("NetworkEntry", () => {
     expect(screen.getAllByText("(none)").length).toBe(2);
   });
 
-  it("shows a 'streaming' placeholder when responseBody is missing but content-type is SSE", async () => {
+  it("shows a 'long-lived stream' placeholder when a GET SSE response has no body", async () => {
     const user = userEvent.setup();
     const sse: FetchRequestEntry = {
       ...baseEntry,
+      method: "GET",
       responseHeaders: { "content-type": "text/event-stream" },
       responseBody: undefined,
     };
     renderWithMantine(<NetworkEntry entry={sse} isListExpanded={false} />);
     await user.click(screen.getByRole("button", { name: "Expand" }));
     expect(screen.getByText("Response Body")).toBeInTheDocument();
     expect(
-      screen.getByText(/Streaming response — body not captured/),
+      screen.getByText(/Long-lived stream — body not captured/),
     ).toBeInTheDocument();
   });
 
+  it("shows '(empty)' for a POST SSE response with no body (bounded stream where capture failed)", async () => {
+    const user = userEvent.setup();
+    const sse: FetchRequestEntry = {
+      ...baseEntry,
+      method: "POST",
+      responseHeaders: { "content-type": "text/event-stream" },
+      responseBody: undefined,
+    };
+    renderWithMantine(<NetworkEntry entry={sse} isListExpanded={false} />);
+    await user.click(screen.getByRole("button", { name: "Expand" }));
+    expect(screen.getByText("(empty)")).toBeInTheDocument();
+  });
+
   it("shows '(empty)' for a non-streaming response with no body", async () => {
     const user = userEvent.setup();
     const empty: FetchRequestEntry = {
@@ -155,7 +169,7 @@ describe("NetworkEntry", () => {
 
   it("shows a 'too large' notice when a body exceeds the inline preview limit", async () => {
     const user = userEvent.setup();
-    const huge = "x".repeat(5000);
+    const huge = "x".repeat(150_000);
     const big: FetchRequestEntry = {
       ...baseEntry,
       requestBody: huge,

clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx

@@ -50,7 +50,7 @@ const SubtleButton = Button.withProps({
   size: "xs",
 });
 
-const MAX_INLINE_BODY_BYTES = 4096;
+const MAX_INLINE_BODY_BYTES = 100_000;
 
 function formatDuration(ms: number): string {
   return `${ms}ms`;
@@ -83,7 +83,11 @@ function categoryColor(category: FetchRequestEntry["category"]): string {
   return category === "auth" ? "violet" : "blue";
 }
 
-function isStreamingResponse(entry: FetchRequestEntry): boolean {
+function isLongLivedStream(entry: FetchRequestEntry): boolean {
+  // Matches the fetch tracker's `isLongLivedStream` rule. Only the GET +
+  // SSE / ndjson case is unbounded; bounded POST SSE responses now have
+  // their bodies captured, so they would not reach this placeholder.
+  if (entry.method !== "GET") return false;
   const contentType = entry.responseHeaders?.["content-type"] ?? "";
   return (
     contentType.includes("text/event-stream") ||
@@ -201,8 +205,8 @@ export function NetworkEntry({ entry, isListExpanded }: NetworkEntryProps) {
                   <BodyPreview body={entry.responseBody} />
                 ) : (
                   <Text size="xs" c="dimmed">
-                    {isStreamingResponse(entry)
-                      ? "Streaming response — body not captured"
+                    {isLongLivedStream(entry)
+                      ? "Long-lived stream — body not captured"
                       : "(empty)"}
                   </Text>
                 )}

clients/web/src/components/views/InspectorView/InspectorView.test.tsx

@@ -215,6 +215,52 @@ describe("InspectorView", () => {
     ).toBeInTheDocument();
   });
 
+  it("hides the Network tab when the active server is stdio", async () => {
+    renderWithMantine(
+      <InspectorView
+        {...makeProps({
+          servers: [sampleServer],
+          activeServer: "alpha",
+          connectionStatus: "connected",
+          initializeResult: connectedInit,
+        })}
+      />,
+    );
+    // ViewHeader renders the tab radiogroup as accessible radios; check the
+    // radio list directly so the assertion isn't fooled by hidden options.
+    const radios = await screen.findAllByRole("radio");
+    const labels = radios.map((r) => r.getAttribute("value"));
+    expect(labels).toContain("Tools");
+    expect(labels).not.toContain("Network");
+  });
+
+  it("shows the Network tab when the active server is streamable-http", async () => {
+    const httpServer: ServerEntry = {
+      id: "beta",
+      name: "Beta",
+      config: { type: "streamable-http", url: "http://localhost:3000/mcp" },
+      connection: { status: "connected" },
+    };
+    const httpInit: InitializeResult = {
+      protocolVersion: "2025-06-18",
+      capabilities: {},
+      serverInfo: { name: "Beta", version: "1.0.0" },
+    };
+    renderWithMantine(
+      <InspectorView
+        {...makeProps({
+          servers: [httpServer],
+          activeServer: "beta",
+          connectionStatus: "connected",
+          initializeResult: httpInit,
+        })}
+      />,
+    );
+    const radios = await screen.findAllByRole("radio");
+    const labels = radios.map((r) => r.getAttribute("value"));
+    expect(labels).toContain("Network");
+  });
+
   it("filters tools to apps and auto-launches a no-fields app on the Apps tab", async () => {
     const user = userEvent.setup();
     const opsApp: Tool = {

clients/web/src/components/views/InspectorView/InspectorView.tsx

@@ -42,8 +42,10 @@ import { TasksScreen } from "../../screens/TasksScreen/TasksScreen";
 import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
 import { HistoryScreen } from "../../screens/HistoryScreen/HistoryScreen";
 import { NetworkScreen } from "../../screens/NetworkScreen/NetworkScreen";
+import { getServerType } from "@inspector/core/mcp/config.js";
 
 const SERVERS_TAB = "Servers";
+const NETWORK_TAB = "Network";
 
 const ALL_TABS: string[] = [
   SERVERS_TAB,
@@ -54,7 +56,7 @@ const ALL_TABS: string[] = [
   "Tasks",
   "Logs",
   "History",
-  "Network",
+  NETWORK_TAB,
 ];
 
 const SCREEN_ENTER_MS = 350;
@@ -287,13 +289,17 @@ export function InspectorView({
   const [autoScroll, setAutoScroll] = useState<boolean>(true);
   const appRendererRef = useRef<AppRendererHandle>(null);
 
-  // Only show the non-Servers tabs when actually connected. Capability-aware
+  // Only show the non-Servers tabs when actually connected. Network is
+  // additionally hidden for stdio servers — there is no HTTP traffic to
+  // surface there, so the tab would always be empty. Capability-aware
   // tab gating (hide Tools when the server doesn't advertise `tools`, etc.)
   // can layer in later once the parent passes capabilities through.
-  const availableTabs = useMemo<string[]>(
-    () => (connectionStatus === "connected" ? ALL_TABS : [SERVERS_TAB]),
-    [connectionStatus],
-  );
+  const availableTabs = useMemo<string[]>(() => {
+    if (connectionStatus !== "connected") return [SERVERS_TAB];
+    const active = serversInput.find((s) => s.id === activeServer);
+    const isStdio = active ? getServerType(active.config) === "stdio" : false;
+    return isStdio ? ALL_TABS.filter((t) => t !== NETWORK_TAB) : ALL_TABS;
+  }, [connectionStatus, serversInput, activeServer]);
 
   // Clamp the rendered tab to whatever's currently available. If the user
   // had "Tools" selected and the connection drops, `availableTabs` becomes

clients/web/src/test/core/mcp/fetchTracking.test.ts

@@ -2,8 +2,14 @@ import { describe, it, expect, vi } from "vitest";
 import { createFetchTracker } from "@inspector/core/mcp/fetchTracking.js";
 import type { FetchRequestEntryBase } from "@inspector/core/mcp/types.js";
 
+// The tracker fires `trackRequest` synchronously with an entry whose
+// responseBody is always undefined, then reads the body in the background
+// and calls `updateResponseBody(id, body)` when done. This helper waits a
+// microtask so the background read can complete before assertions.
+const flush = () => new Promise((r) => setTimeout(r, 0));
+
 describe("createFetchTracker", () => {
-  it("tracks a successful GET request with response body", async () => {
+  it("tracks a successful GET request and emits the response body asynchronously", async () => {
     const baseFetch = vi.fn(
       async () =>
         new Response("hello", {
@@ -13,17 +19,22 @@ describe("createFetchTracker", () => {
         }),
     );
     const tracked: FetchRequestEntryBase[] = [];
+    const bodies: Array<{ id: string; body: string }> = [];
     const fetcher = createFetchTracker(baseFetch as typeof fetch, {
       trackRequest: (entry) => tracked.push(entry),
+      updateResponseBody: (id, body) => bodies.push({ id, body }),
     });
 
     const res = await fetcher("https://example.com/data");
     expect(res.status).toBe(200);
     expect(tracked).toHaveLength(1);
     expect(tracked[0]?.method).toBe("GET");
     expect(tracked[0]?.url).toBe("https://example.com/data");
-    expect(tracked[0]?.responseBody).toBe("hello");
+    expect(tracked[0]?.responseBody).toBeUndefined();
     expect(tracked[0]?.responseStatus).toBe(200);
+
+    await flush();
+    expect(bodies).toEqual([{ id: tracked[0]!.id, body: "hello" }]);
   });
 
   it("accepts URL objects and Request instances as input", async () => {
@@ -99,29 +110,114 @@ describe("createFetchTracker", () => {
     expect(tracked[0]?.error).toBe("stringly-typed");
   });
 
-  it("skips body reading on event-stream responses", async () => {
+  it("skips body reading on GET event-stream responses (long-lived stream)", async () => {
     const baseFetch = vi.fn(
       async () =>
         new Response("ignored", {
           headers: { "content-type": "text/event-stream" },
         }),
     );
     const tracked: FetchRequestEntryBase[] = [];
+    const bodies: Array<{ id: string; body: string }> = [];
     const fetcher = createFetchTracker(baseFetch as typeof fetch, {
       trackRequest: (entry) => tracked.push(entry),
+      updateResponseBody: (id, body) => bodies.push({ id, body }),
     });
-    await fetcher("https://example.com/events");
+    await fetcher("https://example.com/events", { method: "GET" });
+    await flush();
     expect(tracked[0]?.responseBody).toBeUndefined();
+    expect(bodies).toHaveLength(0);
+  });
+
+  it("skips body reading on GET application/x-ndjson responses", async () => {
+    const baseFetch = vi.fn(
+      async () =>
+        new Response("ignored", {
+          headers: { "content-type": "application/x-ndjson" },
+        }),
+    );
+    const tracked: FetchRequestEntryBase[] = [];
+    const bodies: Array<{ id: string; body: string }> = [];
+    const fetcher = createFetchTracker(baseFetch as typeof fetch, {
+      trackRequest: (entry) => tracked.push(entry),
+      updateResponseBody: (id, body) => bodies.push({ id, body }),
+    });
+    await fetcher("https://example.com/events", { method: "GET" });
+    await flush();
+    expect(bodies).toHaveLength(0);
   });
 
-  it("skips body reading for POST /mcp streamable responses", async () => {
-    const baseFetch = vi.fn(async () => new Response("streamed"));
+  it("emits the body for a POST event-stream response after the stream closes (bounded)", async () => {
+    // Streamable HTTP POST /mcp answers with SSE that closes after the
+    // reply. The tracker must NOT block on this read — the transport
+    // needs to consume the stream first to drive progress notifications.
+    // Body therefore arrives asynchronously via updateResponseBody.
+    const sse =
+      'event: message\ndata: {"jsonrpc":"2.0","id":1,"result":{"tools":[]}}\n\n';
+    const baseFetch = vi.fn(
+      async () =>
+        new Response(sse, {
+          headers: { "content-type": "text/event-stream" },
+        }),
+    );
     const tracked: FetchRequestEntryBase[] = [];
+    const bodies: Array<{ id: string; body: string }> = [];
     const fetcher = createFetchTracker(baseFetch as typeof fetch, {
       trackRequest: (entry) => tracked.push(entry),
+      updateResponseBody: (id, body) => bodies.push({ id, body }),
     });
     await fetcher("https://example.com/mcp", { method: "POST" });
     expect(tracked[0]?.responseBody).toBeUndefined();
+    await flush();
+    expect(bodies).toEqual([{ id: tracked[0]!.id, body: sse }]);
+  });
+
+  it("emits the body for a POST /mcp JSON response asynchronously", async () => {
+    const baseFetch = vi.fn(
+      async () =>
+        new Response('{"jsonrpc":"2.0","id":1,"result":{"tools":[]}}', {
+          status: 200,
+          statusText: "OK",
+          headers: { "content-type": "application/json" },
+        }),
+    );
+    const tracked: FetchRequestEntryBase[] = [];
+    const bodies: Array<{ id: string; body: string }> = [];
+    const fetcher = createFetchTracker(baseFetch as typeof fetch, {
+      trackRequest: (entry) => tracked.push(entry),
+      updateResponseBody: (id, body) => bodies.push({ id, body }),
+    });
+    await fetcher("https://example.com/mcp", { method: "POST" });
+    expect(tracked[0]?.responseBody).toBeUndefined();
+    await flush();
+    expect(bodies).toEqual([
+      {
+        id: tracked[0]!.id,
+        body: '{"jsonrpc":"2.0","id":1,"result":{"tools":[]}}',
+      },
+    ]);
+  });
+
+  it("does not block the caller awaiting the response body", async () => {
+    // If the body promise hangs forever (simulating a long-lived stream
+    // mid-flight), the tracker still has to resolve the outer fetcher
+    // promise immediately. Otherwise the transport blocks waiting on us.
+    const neverEnding = new ReadableStream({
+      start() {
+        // Never enqueue, never close — `.text()` on a clone of this would hang.
+      },
+    });
+    const baseFetch = vi.fn(
+      async () => new Response(neverEnding, { status: 200 }),
+    );
+    const tracked: FetchRequestEntryBase[] = [];
+    const fetcher = createFetchTracker(baseFetch as typeof fetch, {
+      trackRequest: (entry) => tracked.push(entry),
+    });
+    const res = await fetcher("https://example.com/slow", { method: "POST" });
+    expect(res.status).toBe(200);
+    expect(tracked).toHaveLength(1);
+    expect(tracked[0]?.responseBody).toBeUndefined();
   });
 
   it("survives a Request whose body cannot be cloned/read", async () => {
@@ -145,8 +241,9 @@ describe("createFetchTracker", () => {
     expect(tracked[0]?.requestBody).toBeUndefined();
   });
 
-  it("falls back to undefined when response.clone() throws", async () => {
+  it("does not call updateResponseBody when response.clone() throws", async () => {
     const tracked: FetchRequestEntryBase[] = [];
+    const bodies: Array<{ id: string; body: string }> = [];
     const baseFetch = vi.fn(async () => {
       const r = new Response("body");
       Object.defineProperty(r, "clone", {
@@ -158,8 +255,11 @@ describe("createFetchTracker", () => {
     });
     const fetcher = createFetchTracker(baseFetch as typeof fetch, {
       trackRequest: (entry) => tracked.push(entry),
+      updateResponseBody: (id, body) => bodies.push({ id, body }),
     });
     await fetcher("https://example.com/data");
+    await flush();
     expect(tracked[0]?.responseBody).toBeUndefined();
+    expect(bodies).toHaveLength(0);
   });
 });

clients/web/src/test/core/mcp/state/fetchRequestLogState.test.ts

@@ -102,6 +102,35 @@ describe("FetchRequestLogState", () => {
     expect(dispatched).toBe(false);
   });
 
+  it("patches the matching entry's responseBody and re-emits on fetchRequestBodyUpdate", () => {
+    client.dispatchTypedEvent("fetchRequest", entry("a"));
+    client.dispatchTypedEvent("fetchRequest", entry("b"));
+    const seen: FetchRequestEntry[][] = [];
+    state.addEventListener("fetchRequestsChange", (e) => seen.push(e.detail));
+
+    client.dispatchTypedEvent("fetchRequestBodyUpdate", {
+      id: "b",
+      responseBody: "hello",
+    });
+
+    const entries = state.getFetchRequests();
+    expect(entries.map((e) => e.id)).toEqual(["a", "b"]);
+    expect(entries[0]?.responseBody).toBeUndefined();
+    expect(entries[1]?.responseBody).toBe("hello");
+    expect(seen).toHaveLength(1);
+  });
+
+  it("ignores fetchRequestBodyUpdate for unknown ids", () => {
+    client.dispatchTypedEvent("fetchRequest", entry("a"));
+    let changes = 0;
+    state.addEventListener("fetchRequestsChange", () => changes++);
+    client.dispatchTypedEvent("fetchRequestBodyUpdate", {
+      id: "nonexistent",
+      responseBody: "x",
+    });
+    expect(changes).toBe(0);
+  });
+
   it("does NOT clear on connect or disconnect", () => {
     client.dispatchTypedEvent("fetchRequest", entry("a"));
     client.dispatchTypedEvent("connect");