fix(network): include request / response bodies in search filter

Headers were already covered but bodies were not, so searches for
strings that live inside the JSON-RPC payload (e.g. "jsonrpc",
"initialize", a tool name) silently returned no matches.

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

Author: cliffhall

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

@@ -9,8 +9,15 @@ const entry: FetchRequestEntry = {
   timestamp: new Date("2026-03-17T10:00:00Z"),
   method: "POST",
   url: "https://example.com/mcp",
-  requestHeaders: { authorization: "Bearer abc" },
+  requestHeaders: {
+    authorization: "Bearer abc",
+    "content-type": "application/json",
+  },
+  requestBody: '{"jsonrpc":"2.0","method":"initialize","id":1}',
   responseStatus: 200,
+  responseStatusText: "OK",
+  responseHeaders: { "content-type": "application/json" },
+  responseBody: '{"jsonrpc":"2.0","id":1,"result":{}}',
   category: "transport",
 };
 
@@ -51,6 +58,39 @@ describe("NetworkStreamPanel", () => {
     expect(screen.getByText("https://example.com/mcp")).toBeInTheDocument();
   });
 
+  it("matches against header keys and values", () => {
+    renderWithMantine(
+      <NetworkStreamPanel {...baseProps} filterText="content-type" />,
+    );
+    expect(screen.getByText("https://example.com/mcp")).toBeInTheDocument();
+  });
+
+  it("matches against the request body", () => {
+    renderWithMantine(
+      <NetworkStreamPanel {...baseProps} filterText="initialize" />,
+    );
+    expect(screen.getByText("https://example.com/mcp")).toBeInTheDocument();
+  });
+
+  it("matches against the response body", () => {
+    renderWithMantine(
+      <NetworkStreamPanel {...baseProps} filterText="jsonrpc" />,
+    );
+    expect(screen.getByText("https://example.com/mcp")).toBeInTheDocument();
+  });
+
+  it("matches against responseStatusText", () => {
+    renderWithMantine(<NetworkStreamPanel {...baseProps} filterText="ok" />);
+    expect(screen.getByText("https://example.com/mcp")).toBeInTheDocument();
+  });
+
+  it("is case-insensitive", () => {
+    renderWithMantine(
+      <NetworkStreamPanel {...baseProps} filterText="CONTENT-TYPE" />,
+    );
+    expect(screen.getByText("https://example.com/mcp")).toBeInTheDocument();
+  });
+
   it("invokes onClear and onExport", async () => {
     const user = userEvent.setup();
     const onClear = vi.fn();

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

@@ -40,6 +40,13 @@ function formatTitle(count: number): string {
   return `Requests (${count})`;
 }
 
+function headersToString(headers: Record<string, string> | undefined): string {
+  if (!headers) return "";
+  return Object.entries(headers)
+    .map(([k, v]) => `${k}: ${v}`)
+    .join("\n");
+}
+
 function matchesFilters(
   entry: FetchRequestEntry,
   filterText: string,
@@ -48,18 +55,21 @@ function matchesFilters(
   if (!visibleCategories[entry.category]) return false;
   if (filterText) {
     const term = filterText.toLowerCase();
-    const requestHeadersText = Object.entries(entry.requestHeaders)
-      .map(([k, v]) => `${k}: ${v}`)
-      .join("\n");
-    const responseHeadersText = entry.responseHeaders
-      ? Object.entries(entry.responseHeaders)
-          .map(([k, v]) => `${k}: ${v}`)
-          .join("\n")
-      : "";
     const status =
       entry.responseStatus !== undefined ? String(entry.responseStatus) : "";
-    const searchable =
-      `${entry.method} ${entry.url} ${status} ${requestHeadersText} ${responseHeadersText} ${entry.error ?? ""}`.toLowerCase();
+    const searchable = [
+      entry.method,
+      entry.url,
+      status,
+      entry.responseStatusText ?? "",
+      headersToString(entry.requestHeaders),
+      headersToString(entry.responseHeaders),
+      entry.requestBody ?? "",
+      entry.responseBody ?? "",
+      entry.error ?? "",
+    ]
+      .join(" ")
+      .toLowerCase();
     if (!searchable.includes(term)) return false;
   }
   return true;