feat(network): add Network screen surfacing backend fetch log (#1355)

Routes `FetchRequestLogState` to a new Network tab so users can inspect
HTTP-layer request/response headers, status, duration, and category
(auth vs transport) of every fetch the backend makes for an active
session. Adds `NetworkControls` + `NetworkStreamPanel` + `NetworkEntry`
groups, a `monoBreak` Text theme variant for long header values, and
wires onClearNetwork / onExportNetwork (JSON download) from `App.tsx`.

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

Author: cliffhall

clients/web/src/App.tsx

@@ -38,6 +38,7 @@ import { useManagedResourceTemplates } from "@inspector/core/react/useManagedRes
 import { useManagedRequestorTasks } from "@inspector/core/react/useManagedRequestorTasks.js";
 import { useResourceSubscriptions } from "@inspector/core/react/useResourceSubscriptions.js";
 import { useMessageLog } from "@inspector/core/react/useMessageLog.js";
+import { useFetchRequestLog } from "@inspector/core/react/useFetchRequestLog.js";
 import { InspectorView } from "./components/views/InspectorView/InspectorView";
 import type { ToolCallState } from "./components/screens/ToolsScreen/ToolsScreen";
 import type { GetPromptState } from "./components/screens/PromptsScreen/PromptsScreen";
@@ -268,6 +269,7 @@ function App() {
     resourceSubscriptionsState,
   );
   const { messages } = useMessageLog(messageLogState);
+  const { fetchRequests } = useFetchRequestLog(fetchRequestLogState);
 
   // Capture observed handshake latency at the connecting → connected edge.
   // Reset when the status leaves "connected" so the next connect starts
@@ -671,6 +673,15 @@ function App() {
     messageLogState?.clearMessages();
   }, [messageLogState]);
 
+  const onClearNetwork = useCallback(() => {
+    fetchRequestLogState?.clearFetchRequests();
+  }, [fetchRequestLogState]);
+
+  const onExportNetwork = useCallback(() => {
+    if (fetchRequests.length === 0) return;
+    downloadJsonFile("network.json", JSON.stringify(fetchRequests, null, 2));
+  }, [fetchRequests]);
+
   // Action stubs — these UI affordances exist but require additional
   // wiring (server CRUD, history pinning, app sandbox round-trip, log
   // export). Tracked separately; the noop keeps the prop interface
@@ -857,6 +868,7 @@ function App() {
         logs={logs}
         tasks={tasks}
         history={messages}
+        network={fetchRequests}
         toolCallState={toolCallState}
         getPromptState={getPromptState}
         readResourceState={effectiveReadResourceState}
@@ -910,6 +922,8 @@ function App() {
         onExportHistory={todoNoop}
         onReplayHistory={todoNoop}
         onTogglePinHistory={todoNoop}
+        onClearNetwork={onClearNetwork}
+        onExportNetwork={onExportNetwork}
         onSelectApp={todoNoop}
         onOpenApp={todoNoop}
         onCloseApp={todoNoop}

clients/web/src/components/groups/NetworkControls/NetworkControls.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { NetworkControls } from "./NetworkControls";
+
+const meta: Meta<typeof NetworkControls> = {
+  title: "Groups/NetworkControls",
+  component: NetworkControls,
+  args: {
+    filterText: "",
+    visibleCategories: { auth: true, transport: true },
+    onFilterChange: fn(),
+    onToggleCategory: fn(),
+    onToggleAllCategories: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NetworkControls>;
+
+export const AllVisible: Story = {};
+
+export const NoneVisible: Story = {
+  args: {
+    visibleCategories: { auth: false, transport: false },
+  },
+};
+
+export const OnlyAuth: Story = {
+  args: {
+    visibleCategories: { auth: true, transport: false },
+  },
+};

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

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { NetworkControls } from "./NetworkControls";
+
+const baseProps = {
+  filterText: "",
+  visibleCategories: { auth: true, transport: true } as const,
+  onFilterChange: vi.fn(),
+  onToggleCategory: vi.fn(),
+  onToggleAllCategories: vi.fn(),
+};
+
+describe("NetworkControls", () => {
+  it("renders the title and inputs", () => {
+    renderWithMantine(<NetworkControls {...baseProps} />);
+    expect(screen.getByText("Network")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "auth" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "transport" }),
+    ).toBeInTheDocument();
+  });
+
+  it("fires onFilterChange when the user types", async () => {
+    const user = userEvent.setup();
+    const onFilterChange = vi.fn();
+    renderWithMantine(
+      <NetworkControls {...baseProps} onFilterChange={onFilterChange} />,
+    );
+    await user.type(screen.getByPlaceholderText("Search..."), "x");
+    expect(onFilterChange).toHaveBeenLastCalledWith("x");
+  });
+
+  it("fires onToggleCategory with inverted visibility when clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleCategory = vi.fn();
+    renderWithMantine(
+      <NetworkControls {...baseProps} onToggleCategory={onToggleCategory} />,
+    );
+    await user.click(screen.getByRole("button", { name: "auth" }));
+    expect(onToggleCategory).toHaveBeenCalledWith("auth", false);
+  });
+
+  it("toggles between Select All and Deselect All", () => {
+    const { rerender } = renderWithMantine(<NetworkControls {...baseProps} />);
+    expect(
+      screen.getByRole("button", { name: "Deselect All" }),
+    ).toBeInTheDocument();
+    rerender(
+      <NetworkControls
+        {...baseProps}
+        visibleCategories={{ auth: false, transport: false }}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Select All" }),
+    ).toBeInTheDocument();
+  });
+
+  it("fires onToggleAllCategories when the toggle button is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleAllCategories = vi.fn();
+    renderWithMantine(
+      <NetworkControls
+        {...baseProps}
+        onToggleAllCategories={onToggleAllCategories}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Deselect All" }));
+    expect(onToggleAllCategories).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,77 @@
+import {
+  Button,
+  Group,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  UnstyledButton,
+} from "@mantine/core";
+import type { FetchRequestCategory } from "@inspector/core/mcp/types.js";
+
+const NETWORK_CATEGORIES: FetchRequestCategory[] = ["auth", "transport"];
+
+const CATEGORY_COLORS: Record<FetchRequestCategory, string> = {
+  auth: "violet",
+  transport: "blue",
+};
+
+const SubtleButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+});
+
+export interface NetworkControlsProps {
+  filterText: string;
+  visibleCategories: Record<FetchRequestCategory, boolean>;
+  onFilterChange: (text: string) => void;
+  onToggleCategory: (category: FetchRequestCategory, visible: boolean) => void;
+  onToggleAllCategories: () => void;
+}
+
+export function NetworkControls({
+  filterText,
+  visibleCategories,
+  onFilterChange,
+  onToggleCategory,
+  onToggleAllCategories,
+}: NetworkControlsProps) {
+  const allSelected = NETWORK_CATEGORIES.every((c) => visibleCategories[c]);
+  return (
+    <Stack gap="md">
+      <Title order={4}>Network</Title>
+
+      <TextInput
+        placeholder="Search..."
+        value={filterText}
+        onChange={(e) => onFilterChange(e.currentTarget.value)}
+      />
+
+      <Group justify="space-between">
+        <Title order={5}>Filter by Category</Title>
+        <SubtleButton onClick={onToggleAllCategories}>
+          {allSelected ? "Deselect All" : "Select All"}
+        </SubtleButton>
+      </Group>
+      <Stack gap="xs">
+        {NETWORK_CATEGORIES.map((category) => {
+          const active = visibleCategories[category];
+          return (
+            <UnstyledButton
+              key={category}
+              w="100%"
+              p="sm"
+              variant="listItem"
+              bg={active ? "var(--mantine-primary-color-light)" : undefined}
+              onClick={() => onToggleCategory(category, !active)}
+            >
+              <Text c={CATEGORY_COLORS[category]} ta="center" fw={500}>
+                {category}
+              </Text>
+            </UnstyledButton>
+          );
+        })}
+      </Stack>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { FetchRequestEntry } from "../../../../../../core/mcp/types.js";
+import { NetworkEntry } from "./NetworkEntry";
+
+const meta: Meta<typeof NetworkEntry> = {
+  title: "Groups/NetworkEntry",
+  component: NetworkEntry,
+};
+
+export default meta;
+type Story = StoryObj<typeof NetworkEntry>;
+
+const transportEntry: FetchRequestEntry = {
+  id: "n-1",
+  timestamp: new Date("2026-03-17T10:30:00Z"),
+  method: "POST",
+  url: "https://example.com/mcp",
+  requestHeaders: {
+    "content-type": "application/json",
+    "x-test": "hello",
+  },
+  requestBody: '{"jsonrpc":"2.0","method":"initialize","id":1}',
+  responseStatus: 200,
+  responseStatusText: "OK",
+  responseHeaders: { "content-type": "application/json" },
+  responseBody: '{"jsonrpc":"2.0","id":1,"result":{}}',
+  duration: 45,
+  category: "transport",
+};
+
+const authEntry: FetchRequestEntry = {
+  id: "n-2",
+  timestamp: new Date("2026-03-17T10:30:05Z"),
+  method: "POST",
+  url: "https://example.com/oauth/token",
+  requestHeaders: { "content-type": "application/x-www-form-urlencoded" },
+  requestBody: "grant_type=authorization_code&code=abc",
+  responseStatus: 200,
+  responseStatusText: "OK",
+  responseHeaders: { "content-type": "application/json" },
+  responseBody: '{"access_token":"x","token_type":"bearer"}',
+  duration: 120,
+  category: "auth",
+};
+
+const errorEntry: FetchRequestEntry = {
+  id: "n-3",
+  timestamp: new Date("2026-03-17T10:30:10Z"),
+  method: "POST",
+  url: "https://example.com/mcp",
+  requestHeaders: { "content-type": "application/json" },
+  responseStatus: 500,
+  responseStatusText: "Internal Server Error",
+  responseHeaders: { "content-type": "text/plain" },
+  responseBody: "Unhandled exception",
+  duration: 1200,
+  category: "transport",
+};
+
+const transportError: FetchRequestEntry = {
+  id: "n-4",
+  timestamp: new Date("2026-03-17T10:30:15Z"),
+  method: "POST",
+  url: "https://example.com/mcp",
+  requestHeaders: {},
+  error: "fetch failed: ECONNREFUSED",
+  category: "transport",
+};
+
+export const TransportSuccessCollapsed: Story = {
+  args: { entry: transportEntry, isListExpanded: false },
+};
+
+export const TransportSuccessExpanded: Story = {
+  args: { entry: transportEntry, isListExpanded: true },
+};
+
+export const AuthSuccess: Story = {
+  args: { entry: authEntry, isListExpanded: true },
+};
+
+export const HttpError: Story = {
+  args: { entry: errorEntry, isListExpanded: true },
+};
+
+export const FetchError: Story = {
+  args: { entry: transportError, isListExpanded: true },
+};