Skip to content

Surface backend-side HTTP fetch log in a Network screen #1355

@cliffhall

Description

@cliffhall

Summary

The v2 web client already collects HTTP-level fetch metadata (per-request headers, status, duration) into FetchRequestLogState for every InspectorClient, but never displays it. There is no UI surface for HTTP-layer information. This is the source of the confusion observed during #1352 review — custom headers set in ServerSettingsForm do reach the upstream MCP server (confirmed by the e2e test added in PR #1353), but the user has no way to see them in the Inspector.

Files

  • clients/web/src/App.tsx already instantiates FetchRequestLogState and destroys it on session boundaries. It just isn't routed to a screen.
  • core/mcp/state/fetchRequestLogState.ts exposes getFetchRequests() and dispatches fetchRequest / fetchRequestsChange events.
  • core/react/useFetchRequestLog.ts exists as a hook over the state.

Proposal

Add a new NetworkScreen (sibling of HistoryScreen / LoggingScreen with comparable children) under clients/web/src/components/screens/NetworkScreen/ that:

  • Consumes useFetchRequestLog and renders entries grouped by category (auth vs transport).
  • Per entry, shows: method, URL, status code, duration, request headers, response headers, body preview if small.
  • Reuses the controls / panel pattern (NetworkControls + NetworkStreamPanel) already used by Logs and History screens.
  • Adds a Network tab to InspectorView's activeTab switch alongside History / Logs.
  • Wires onClearNetwork, onExportNetwork handlers from App.tsx (the export handler can share the JSON-download approach from Wire Export JSON on the History and Logging screens #1354).

Test plan

  • Storybook stories for the new screen with mock fetch entries (auth + transport categories, success + error rows).
  • A unit test that asserts the screen filters by category and renders each entry's headers.
  • A manual check: connect to a server with a settings.headers entry of X-Test: hello, navigate to the Network tab, and confirm X-Test: hello shows up on the entry's request headers list.

Out of scope

  • Replay / cURL export from a network entry — separate feature.
  • Aggregating cross-server network history — Network is per-session, scoped to the active client.

Metadata

Metadata

Assignees

Labels

v2Issues and PRs for v2

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions