refactor(web): rename "History" tab/feature to "Protocol" (#1623)

Rename the web client's History tab and its supporting code to Protocol
so the feature reads as the MCP "Protocol" view.

- Tab renders as "Protocol"; INSPECTOR_TAB_IDS, InspectorView tab
  constants/MonitorTab, TAB_UI_REGISTRY key, and navigation.ts tab id all
  updated to Protocol.
- Rename components + folders: HistoryScreen -> ProtocolScreen,
  HistoryListPanel -> ProtocolListPanel, HistoryEntry -> ProtocolEntry,
  HistoryControls -> ProtocolControls, historyUtils -> protocolUtils
  (plus their tests and stories, and exported types).
- Rename App/InspectorView plumbing: historyUi, pinnedHistoryIds,
  on*History* handlers/props, replayHistoryRequest,
  isReplayableHistoryMethod, sort/compact scopes, etc. -> Protocol names.
- Export filenames use the "protocol" slug (buildExportFilename +
  ExportKind).

Preserved (per issue #1623 decisions):
- The in-panel section discriminator keeps its "pinned" | "history"
  values, and the sub-sections stay labeled Pinned / History.
- window.history and core message-log/replay concepts are untouched.

npm run ci passes (format, lint, build, unit tests, >=90 per-file
coverage gate, smoke, Storybook).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw

clients/web/src/components/elements/EmbeddableScrollArea/EmbeddableScrollArea.tsx

@@ -20,7 +20,7 @@ export interface EmbeddableScrollAreaProps {
 }
 
 /**
- * The scroll region shared by the Logs / History / Network stream panels, which
+ * The scroll region shared by the Logs / Protocol / Network stream panels, which
  * render both full-size (their own tab) and embedded (the monitoring column).
  * Centralizes the one layout difference between those two hosts.
  */

clients/web/src/components/elements/ExpandToggle/ExpandToggle.tsx

@@ -8,7 +8,7 @@ export interface ExpandToggleProps {
 }
 
 /**
- * Icon toggle for a per-entry expand/collapse control (History, Network, and
+ * Icon toggle for a per-entry expand/collapse control (Protocol, Network, and
  * Task cards). Uses the same expand/collapse-vertical icons as the list-level
  * ListToggle: collapsed shows the expand icon, expanded shows the collapse
  * icon. The aria-label stays "Expand"/"Collapse" so it reads the same as the

clients/web/src/components/elements/FilterToggleButton/FilterToggleButton.tsx

@@ -17,7 +17,7 @@ const ToggleLabel = Text.withProps({
 });
 
 /**
- * A single full-width filter toggle used by the Logging, History, and Network
+ * A single full-width filter toggle used by the Logging, Protocol, and Network
  * controls. The `filterToggle` theme variant + `.filter-toggle` rules own the
  * styling: hover shows a thin border, the active (`aria-pressed`) state shows a
  * filled background. Keeping hover as a border (not a fill) means toggling a

clients/web/src/components/elements/MessageDirectionBadge/MessageDirectionBadge.tsx

@@ -15,10 +15,10 @@ const LABEL: Record<MessageDirectionBadgeProps["direction"], string> = {
 };
 
 /**
- * Dual-state badge showing which way a History/Network entry traveled. Outgoing
+ * Dual-state badge showing which way a Protocol/Network entry traveled. Outgoing
  * (client → server) is green; incoming (client ← server) is purple — not yellow,
  * which (paired with green) reads as caution/ok status rather than direction.
- * Shared by `HistoryEntry` and `NetworkEntry`.
+ * Shared by `ProtocolEntry` and `NetworkEntry`.
  */
 export function MessageDirectionBadge({
   direction,

clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx

@@ -7,7 +7,7 @@ export interface PinColumnButtonProps {
 }
 
 /**
- * Toolbar button that pins the owning monitor screen (Logs / History / Network)
+ * Toolbar button that pins the owning monitor screen (Logs / Protocol / Network)
  * into the resizable column on the right of the InspectorView (#1616). Distinct
  * from `PinToggle` (which pins individual history entries) — this one opens a
  * side column, so it uses a right-sidebar glyph and an "as column" label. Styled

clients/web/src/components/elements/ReplayButton/ReplayButton.tsx

@@ -7,7 +7,7 @@ export interface ReplayButtonProps {
 }
 
 /**
- * Icon form of the "Replay" action, used in the compact (column) HistoryEntry
+ * Icon form of the "Replay" action, used in the compact (column) ProtocolEntry
  * layout where the text button is replaced by a replay icon sitting next to the
  * pin toggle (#1616). Matches PinToggle's subtle gray icon-button styling.
  */

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

@@ -28,7 +28,7 @@ export interface MessageDirectionFilterProps {
 /**
  * "Filter by Message Direction" section — a Select/Deselect All control plus a
  * FilterToggleButton per direction (client → server / client ← server). Used by
- * the History controls. (Kept as its own component so the section is testable in
+ * the Protocol controls. (Kept as its own component so the section is testable in
  * isolation and reusable if another screen ever needs a direction filter.)
  */
 export function MessageDirectionFilter({

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

@@ -6,7 +6,7 @@ const meta: Meta<typeof MonitoringControls> = {
   title: "Groups/MonitoringControls",
   component: MonitoringControls,
   args: {
-    tabs: ["Logs", "History", "Network"],
+    tabs: ["Logs", "Protocol", "Network"],
     value: "Logs",
     onChange: fn(),
     searchValue: "",
@@ -29,7 +29,7 @@ export const AllTabs: Story = {
 };
 
 export const StdioServer: Story = {
-  args: { tabs: ["Logs", "History"], value: "History" },
+  args: { tabs: ["Logs", "Protocol"], value: "Protocol" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     expect(canvas.queryByRole("radio", { name: "Network" })).toBeNull();

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

@@ -6,7 +6,7 @@ import {
   type MonitoringControlsProps,
 } from "./MonitoringControls";
 
-const TABS = ["Logs", "History", "Network"];
+const TABS = ["Logs", "Protocol", "Network"];
 
 function renderControls(overrides: Partial<MonitoringControlsProps> = {}) {
   const props: MonitoringControlsProps = {
@@ -31,7 +31,7 @@ describe("MonitoringControls", () => {
   });
 
   it("renders only the tabs it is given", () => {
-    renderControls({ tabs: ["Logs", "History"] });
+    renderControls({ tabs: ["Logs", "Protocol"] });
     expect(screen.getAllByRole("radio")).toHaveLength(2);
     expect(screen.queryByRole("radio", { name: "Network" })).toBeNull();
   });
@@ -53,8 +53,8 @@ describe("MonitoringControls", () => {
   });
 
   it("marks the active tab as selected", () => {
-    renderControls({ value: "History" });
-    expect(screen.getByRole("radio", { name: "History" })).toBeChecked();
+    renderControls({ value: "Protocol" });
+    expect(screen.getByRole("radio", { name: "Protocol" })).toBeChecked();
   });
 
   it("calls onChange when a different tab is chosen", async () => {

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

@@ -3,7 +3,7 @@ import { TbLayoutSidebarRightCollapse } from "react-icons/tb";
 import { ClearButton } from "../../elements/ClearButton/ClearButton";
 
 export interface MonitoringControlsProps {
-  /** The monitor screens currently available to pin (e.g. Logs/History/Network). */
+  /** The monitor screens currently available to pin (e.g. Logs/Protocol/Network). */
   tabs: string[];
   /** The active monitor tab shown in the column below. */
   value: string;

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

@@ -9,7 +9,7 @@ const demoScreens = {
       <Text>Log stream</Text>
     </Box>
   ),
-  History: (
+  Protocol: (
     <Box p="md">
       <Text>Request history</Text>
     </Box>
@@ -32,7 +32,7 @@ const meta: Meta<typeof MonitoringScreen> = {
     ),
   ],
   args: {
-    tabs: ["Logs", "History", "Network"],
+    tabs: ["Logs", "Protocol", "Network"],
     value: "Logs",
     onChange: fn(),
     searchValue: "",
@@ -52,8 +52,8 @@ export const Logs: Story = {
   },
 };
 
-export const History: Story = {
-  args: { value: "History" },
+export const Protocol: Story = {
+  args: { value: "Protocol" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     expect(canvas.getByText("Request history")).toBeInTheDocument();

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

@@ -6,12 +6,12 @@ import {
   type MonitoringScreenProps,
 } from "./MonitoringScreen";
 
-const TABS = ["Logs", "History", "Network"];
+const TABS = ["Logs", "Protocol", "Network"];
 
 function screens() {
   return {
     Logs: <div>logs-body</div>,
-    History: <div>history-body</div>,
+    Protocol: <div>history-body</div>,
     Network: <div>network-body</div>,
   };
 }
@@ -33,7 +33,7 @@ function renderScreen(overrides: Partial<MonitoringScreenProps> = {}) {
 
 describe("MonitoringScreen", () => {
   it("renders the screen for the active tab", () => {
-    renderScreen({ value: "History" });
+    renderScreen({ value: "Protocol" });
     expect(screen.getByText("history-body")).toBeInTheDocument();
     expect(screen.queryByText("logs-body")).toBeNull();
     expect(screen.queryByText("network-body")).toBeNull();

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

@@ -3,7 +3,7 @@ import { Divider, Stack } from "@mantine/core";
 import { MonitoringControls } from "../MonitoringControls/MonitoringControls";
 
 export interface MonitoringScreenProps {
-  /** Available monitor tabs (Logs/History/Network, filtered by capability). */
+  /** Available monitor tabs (Logs/Protocol/Network, filtered by capability). */
   tabs: string[];
   /** Active monitor tab; keys into `screens` to pick what renders below. */
   value: string;

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

@@ -58,7 +58,7 @@ const UrlScroll = Text.withProps({
   variant: "nowrap",
 });
 
-// Left / right clusters for a compact header line (mirrors HistoryEntry).
+// Left / right clusters for a compact header line (mirrors ProtocolEntry).
 const HeaderCluster = Group.withProps({
   gap: "sm",
   wrap: "nowrap",
@@ -240,7 +240,7 @@ export function NetworkEntry({
   // The list-level Expand/Collapse toggle is authoritative: each time the
   // parent changes `isListExpanded`, every entry snaps to that state and
   // any per-entry override is intentionally discarded. Mirrors
-  // HistoryEntry; do not change without aligning both. This re-runs on
+  // ProtocolEntry; do not change without aligning both. This re-runs on
   // re-render when `isListExpanded` keeps its reference, but the setter
   // is a no-op when the next value equals the current one.
   useEffect(() => {

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import type { MessageMethod } from "@inspector/core/mcp/types.js";
+import { ProtocolControls } from "./ProtocolControls";
+
+const SAMPLE_METHODS: MessageMethod[] = [
+  "tools/call",
+  "tools/list",
+  "resources/read",
+  "resources/list",
+  "prompts/get",
+  "prompts/list",
+  "sampling/createMessage",
+  "elicitation/create",
+];
+
+const meta: Meta<typeof ProtocolControls> = {
+  title: "Groups/ProtocolControls",
+  component: ProtocolControls,
+  args: {
+    searchText: "",
+    availableMethods: SAMPLE_METHODS,
+    visibleDirections: { client: true, server: true },
+    onSearchChange: fn(),
+    onMethodFilterChange: fn(),
+    onToggleDirection: fn(),
+    onToggleAllDirections: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProtocolControls>;
+
+export const Default: Story = {};
+
+export const WithFilters: Story = {
+  args: {
+    searchText: "tools",
+    methodFilter: "tools/call",
+  },
+};

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

@@ -0,0 +1,122 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { MessageMethod } from "@inspector/core/mcp/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ProtocolControls } from "./ProtocolControls";
+
+const baseProps = {
+  searchText: "",
+  availableMethods: ["tools/list", "prompts/list"] as MessageMethod[],
+  visibleDirections: { client: true, server: true },
+  onSearchChange: vi.fn(),
+  onMethodFilterChange: vi.fn(),
+  onToggleDirection: vi.fn(),
+  onToggleAllDirections: vi.fn(),
+};
+
+describe("ProtocolControls", () => {
+  it("renders the title and search input", () => {
+    renderWithMantine(<ProtocolControls {...baseProps} />);
+    expect(screen.getByText("Protocol")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+  });
+
+  it("invokes onSearchChange when typing in the search input", async () => {
+    const user = userEvent.setup();
+    const onSearchChange = vi.fn();
+    renderWithMantine(
+      <ProtocolControls {...baseProps} onSearchChange={onSearchChange} />,
+    );
+    await user.type(screen.getByPlaceholderText("Search..."), "a");
+    expect(onSearchChange).toHaveBeenCalledWith("a");
+  });
+
+  it("clears the search input when the Clear button is clicked", async () => {
+    const user = userEvent.setup();
+    const onSearchChange = vi.fn();
+    renderWithMantine(
+      <ProtocolControls
+        {...baseProps}
+        searchText="abc"
+        onSearchChange={onSearchChange}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+    expect(onSearchChange).toHaveBeenCalledWith("");
+  });
+
+  it("keeps the search Clear button out of the keyboard tab order", () => {
+    renderWithMantine(<ProtocolControls {...baseProps} searchText="abc" />);
+    expect(screen.getByRole("button", { name: "Clear" })).toHaveAttribute(
+      "tabindex",
+      "-1",
+    );
+  });
+
+  it("renders the method filter placeholder", () => {
+    renderWithMantine(<ProtocolControls {...baseProps} />);
+    expect(screen.getByPlaceholderText("All methods")).toBeInTheDocument();
+  });
+
+  it("displays the active method filter value", () => {
+    renderWithMantine(
+      <ProtocolControls {...baseProps} methodFilter="tools/list" />,
+    );
+    const inputs = screen.getAllByDisplayValue("tools/list");
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  it("invokes onMethodFilterChange with undefined when cleared", async () => {
+    const user = userEvent.setup();
+    const onMethodFilterChange = vi.fn();
+    const { container } = renderWithMantine(
+      <ProtocolControls
+        {...baseProps}
+        methodFilter="tools/list"
+        onMethodFilterChange={onMethodFilterChange}
+      />,
+    );
+    const clearButton = container.querySelector(
+      "button.mantine-InputClearButton-root",
+    ) as HTMLButtonElement | null;
+    expect(clearButton).not.toBeNull();
+    await user.click(clearButton!);
+    expect(onMethodFilterChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it("renders the Filter by Message Direction section with both directions", () => {
+    renderWithMantine(<ProtocolControls {...baseProps} />);
+    expect(screen.getByText("Filter by Message Direction")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "client → server" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "client ← server" }),
+    ).toBeInTheDocument();
+  });
+
+  it("toggles a direction's visibility when its button is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleDirection = vi.fn();
+    renderWithMantine(
+      <ProtocolControls {...baseProps} onToggleDirection={onToggleDirection} />,
+    );
+    // Currently visible → clicking turns it off.
+    await user.click(screen.getByRole("button", { name: "client ← server" }));
+    expect(onToggleDirection).toHaveBeenCalledWith("server", false);
+  });
+
+  it("invokes onToggleAllDirections from the Deselect/Select All control", async () => {
+    const user = userEvent.setup();
+    const onToggleAllDirections = vi.fn();
+    renderWithMantine(
+      <ProtocolControls
+        {...baseProps}
+        onToggleAllDirections={onToggleAllDirections}
+      />,
+    );
+    // Both visible → the control reads "Deselect All".
+    await user.click(screen.getByRole("button", { name: "Deselect All" }));
+    expect(onToggleAllDirections).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,61 @@
+import { Select, Stack, TextInput, Title } from "@mantine/core";
+import { ClearButton } from "../../elements/ClearButton/ClearButton";
+import type {
+  MessageMethod,
+  MessageOrigin,
+} from "@inspector/core/mcp/types.js";
+import { MessageDirectionFilter } from "../MessageDirectionFilter/MessageDirectionFilter";
+
+export interface ProtocolControlsProps {
+  searchText: string;
+  methodFilter?: MessageMethod;
+  availableMethods: MessageMethod[];
+  visibleDirections: Record<MessageOrigin, boolean>;
+  onSearchChange: (text: string) => void;
+  onMethodFilterChange: (method: MessageMethod | undefined) => void;
+  onToggleDirection: (direction: MessageOrigin, visible: boolean) => void;
+  onToggleAllDirections: () => void;
+}
+
+export function ProtocolControls({
+  searchText,
+  methodFilter,
+  availableMethods,
+  visibleDirections,
+  onSearchChange,
+  onMethodFilterChange,
+  onToggleDirection,
+  onToggleAllDirections,
+}: ProtocolControlsProps) {
+  return (
+    <Stack gap="md">
+      <Title order={4}>Protocol</Title>
+      <TextInput
+        placeholder="Search..."
+        value={searchText}
+        onChange={(event) => onSearchChange(event.currentTarget.value)}
+        rightSectionPointerEvents="auto"
+        rightSection={
+          searchText ? <ClearButton onClick={() => onSearchChange("")} /> : null
+        }
+      />
+
+      <Title order={6}>Filter by Method</Title>
+      <Select
+        placeholder="All methods"
+        data={availableMethods}
+        value={methodFilter ?? null}
+        onChange={(value) =>
+          onMethodFilterChange((value as MessageMethod | null) ?? undefined)
+        }
+        clearable
+      />
+
+      <MessageDirectionFilter
+        visibleDirections={visibleDirections}
+        onToggleDirection={onToggleDirection}
+        onToggleAllDirections={onToggleAllDirections}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { MessageEntry } from "../../../../../../core/mcp/types.js";
+import { fn } from "storybook/test";
+import { ProtocolEntry } from "./ProtocolEntry";
+
+const meta: Meta<typeof ProtocolEntry> = {
+  title: "Groups/ProtocolEntry",
+  component: ProtocolEntry,
+  args: {
+    onReplay: fn(),
+    onTogglePin: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProtocolEntry>;
+
+const toolCallEntry: MessageEntry = {
+  id: "req-1",
+  timestamp: new Date("2026-03-17T10:30:00Z"),
+  direction: "request",
+  origin: "client",
+  message: {
+    jsonrpc: "2.0",
+    id: 1,
+    method: "tools/call",
+    params: { name: "get_weather", arguments: { city: "San Francisco" } },
+  },
+  response: {
+    jsonrpc: "2.0",
+    id: 1,
+    result: {
+      content: [{ type: "text", text: "18°C, partly cloudy" }],
+    },
+  },
+  duration: 142,
+};
+
+const errorEntry: MessageEntry = {
+  id: "req-2",
+  timestamp: new Date("2026-03-17T10:31:15Z"),
+  direction: "request",
+  origin: "client",
+  message: {
+    jsonrpc: "2.0",
+    id: 2,
+    method: "tools/call",
+    params: { name: "query_database" },
+  },
+  response: {
+    jsonrpc: "2.0",
+    id: 2,
+    error: { code: -32000, message: "Connection timeout" },
+  },
+  duration: 3200,
+};
+
+const resourceReadEntry: MessageEntry = {
+  id: "req-3",
+  timestamp: new Date("2026-03-17T10:33:00Z"),
+  direction: "request",
+  origin: "client",
+  message: {
+    jsonrpc: "2.0",
+    id: 3,
+    method: "resources/read",
+    params: { uri: "file:///config.json" },
+  },
+  response: {
+    jsonrpc: "2.0",
+    id: 3,
+    result: {
+      contents: [{ uri: "file:///config.json", text: '{"debug": true}' }],
+    },
+  },
+  duration: 45,
+};
+
+const pendingEntry: MessageEntry = {
+  id: "req-4",
+  timestamp: new Date("2026-03-17T10:34:00Z"),
+  direction: "request",
+  origin: "client",
+  message: {
+    jsonrpc: "2.0",
+    id: 4,
+    method: "tools/call",
+    params: { name: "long_operation" },
+  },
+};
+
+export const SuccessCollapsed: Story = {
+  args: {
+    entry: toolCallEntry,
+    isPinned: false,
+    isListExpanded: false,
+  },
+};
+
+export const SuccessExpanded: Story = {
+  args: {
+    entry: toolCallEntry,
+    isPinned: false,
+    isListExpanded: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    entry: errorEntry,
+    isPinned: false,
+    isListExpanded: true,
+  },
+};
+
+export const Pinned: Story = {
+  args: {
+    entry: resourceReadEntry,
+    isPinned: true,
+    isListExpanded: false,
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    entry: pendingEntry,
+    isPinned: false,
+    isListExpanded: false,
+  },
+};

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

@@ -0,0 +1,355 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import type { MessageEntry } from "@inspector/core/mcp/types.js";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { ProtocolEntry } from "./ProtocolEntry";
+
+const successEntry: MessageEntry = {
+  id: "req-1",
+  timestamp: new Date("2026-03-17T10:30:00Z"),
+  direction: "request",
+  origin: "client",
+  message: {
+    jsonrpc: "2.0",
+    id: 1,
+    method: "tools/call",
+    params: { name: "get_weather", arguments: { city: "San Francisco" } },
+  },
+  response: {
+    jsonrpc: "2.0",
+    id: 1,
+    result: {
+      content: [{ type: "text", text: "18C" }],
+    },
+  },
+  duration: 142,
+};
+
+const errorEntry: MessageEntry = {
+  id: "req-2",
+  timestamp: new Date("2026-03-17T10:31:15Z"),
+  direction: "request",
+  message: {
+    jsonrpc: "2.0",
+    id: 2,
+    method: "tools/call",
+    params: { name: "query_database" },
+  },
+  response: {
+    jsonrpc: "2.0",
+    id: 2,
+    error: { code: -32000, message: "Connection timeout" },
+  },
+  duration: 3200,
+};
+
+const resourceReadEntry: MessageEntry = {
+  id: "req-3",
+  timestamp: new Date("2026-03-17T10:33:00Z"),
+  direction: "request",
+  message: {
+    jsonrpc: "2.0",
+    id: 3,
+    method: "resources/read",
+    params: { uri: "file:///config.json" },
+  },
+  response: {
+    jsonrpc: "2.0",
+    id: 3,
+    result: {
+      contents: [{ uri: "file:///config.json", text: '{"debug": true}' }],
+    },
+  },
+  duration: 45,
+};
+
+const pendingEntry: MessageEntry = {
+  id: "req-4",
+  timestamp: new Date("2026-03-17T10:34:00Z"),
+  direction: "request",
+  message: {
+    jsonrpc: "2.0",
+    id: 4,
+    method: "tools/call",
+    params: { name: "long_operation" },
+  },
+};
+
+const noParamsEntry: MessageEntry = {
+  id: "req-5",
+  timestamp: new Date("2026-03-17T10:35:00Z"),
+  direction: "request",
+  message: {
+    jsonrpc: "2.0",
+    id: 5,
+    method: "tools/list",
+  },
+  response: {
+    jsonrpc: "2.0",
+    id: 5,
+    result: { tools: [] },
+  },
+};
+
+const notificationEntry: MessageEntry = {
+  id: "note-1",
+  timestamp: new Date("2026-03-17T10:36:00Z"),
+  direction: "notification",
+  origin: "server",
+  message: {
+    jsonrpc: "2.0",
+    method: "notifications/message",
+    params: {
+      level: "info",
+      logger: "everything-server",
+      data: "Roots updated: 2 root(s) received from client",
+    },
+  },
+};
+
+const baseProps = {
+  isPinned: false,
+  isListExpanded: false,
+  onReplay: vi.fn(),
+  onTogglePin: vi.fn(),
+};
+
+describe("ProtocolEntry", () => {
+  it("renders the method, target name, status OK, and duration", () => {
+    renderWithMantine(<ProtocolEntry {...baseProps} entry={successEntry} />);
+    expect(screen.getByText("tools/call")).toBeInTheDocument();
+    expect(screen.getByText("get_weather")).toBeInTheDocument();
+    expect(screen.getByText("OK")).toBeInTheDocument();
+    expect(screen.getByText("142ms")).toBeInTheDocument();
+  });
+
+  it("renders the URI target for resources/read", () => {
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={resourceReadEntry} />,
+    );
+    expect(screen.getByText("file:///config.json")).toBeInTheDocument();
+    expect(screen.getByText("resources/read")).toBeInTheDocument();
+  });
+
+  it("renders Error status when response has error", () => {
+    renderWithMantine(<ProtocolEntry {...baseProps} entry={errorEntry} />);
+    expect(screen.getByText("Error")).toBeInTheDocument();
+  });
+
+  it("renders Pending status when no response present", () => {
+    renderWithMantine(<ProtocolEntry {...baseProps} entry={pendingEntry} />);
+    expect(screen.getByText("Pending")).toBeInTheDocument();
+  });
+
+  it("renders no request-style status badge for a notification", () => {
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={notificationEntry} />,
+    );
+    // The method badge still labels it; there is no Pending/OK/Error badge,
+    // since a fire-and-forget notification has no request lifecycle.
+    expect(screen.getByText("notifications/message")).toBeInTheDocument();
+    expect(screen.queryByText("Pending")).not.toBeInTheDocument();
+    expect(screen.queryByText("OK")).not.toBeInTheDocument();
+    expect(screen.queryByText("Error")).not.toBeInTheDocument();
+  });
+
+  it("shows client → server for a client-originated entry", () => {
+    renderWithMantine(<ProtocolEntry {...baseProps} entry={successEntry} />);
+    expect(screen.getByText("client → server")).toBeInTheDocument();
+  });
+
+  it("shows client ← server for a server-originated entry", () => {
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={notificationEntry} />,
+    );
+    expect(screen.getByText("client ← server")).toBeInTheDocument();
+  });
+
+  it("renders Pin label when not pinned", () => {
+    renderWithMantine(<ProtocolEntry {...baseProps} entry={successEntry} />);
+    expect(screen.getByRole("button", { name: "Pin" })).toBeInTheDocument();
+  });
+
+  it("renders Unpin label when pinned", () => {
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={successEntry} isPinned={true} />,
+    );
+    expect(screen.getByRole("button", { name: "Unpin" })).toBeInTheDocument();
+  });
+
+  it("invokes onReplay when Replay button is clicked", async () => {
+    const user = userEvent.setup();
+    const onReplay = vi.fn();
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={successEntry} onReplay={onReplay} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Replay" }));
+    expect(onReplay).toHaveBeenCalledTimes(1);
+  });
+
+  it("hides the Replay button for a method that can't be replayed", () => {
+    // A notification isn't a replayable client→server request.
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={notificationEntry} />,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Replay" }),
+    ).not.toBeInTheDocument();
+    // Pin stays available.
+    expect(screen.getByRole("button", { name: "Pin" })).toBeInTheDocument();
+  });
+
+  it("orders the actions Replay, then Pin, then the expand toggle on the right", () => {
+    renderWithMantine(<ProtocolEntry {...baseProps} entry={successEntry} />);
+    const names = screen
+      .getAllByRole("button")
+      .map((b) => b.getAttribute("aria-label") ?? b.textContent);
+    expect(names.indexOf("Replay")).toBeLessThan(names.indexOf("Pin"));
+    expect(names.indexOf("Pin")).toBeLessThan(names.indexOf("Expand"));
+  });
+
+  it("renders the compact two-line layout with Replay as an icon when embedded", () => {
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={successEntry} embedded />,
+    );
+    // Line 1 essentials plus the method are still shown. The timestamp is the
+    // compact time-only form (not the full ISO) to fit the narrow line.
+    expect(screen.getByText("10:30:00")).toBeInTheDocument();
+    expect(
+      screen.queryByText("2026-03-17T10:30:00.000Z"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("client → server")).toBeInTheDocument();
+    expect(screen.getByText("142ms")).toBeInTheDocument();
+    expect(screen.getByText("OK")).toBeInTheDocument();
+    expect(screen.getByText("tools/call")).toBeInTheDocument();
+    // Replay is an icon button (aria-label), not the text button.
+    expect(screen.getByRole("button", { name: "Replay" })).toBeInTheDocument();
+    expect(screen.queryByText("Replay")).toBeNull();
+  });
+
+  it("keeps action order Replay, Pin, Expand in the compact layout", () => {
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={successEntry} embedded />,
+    );
+    const names = screen
+      .getAllByRole("button")
+      .map((b) => b.getAttribute("aria-label") ?? b.textContent);
+    expect(names.indexOf("Replay")).toBeLessThan(names.indexOf("Pin"));
+    expect(names.indexOf("Pin")).toBeLessThan(names.indexOf("Expand"));
+  });
+
+  it("does not render a Replay icon for a non-replayable method when embedded", () => {
+    // A server→client response isn't replayable.
+    const responseEntry: MessageEntry = {
+      id: "resp-1",
+      timestamp: new Date("2026-03-17T10:30:00Z"),
+      direction: "response",
+      origin: "server",
+      message: { jsonrpc: "2.0", id: 1, result: {} },
+    };
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={responseEntry} embedded />,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Replay" }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Pin" })).toBeInTheDocument();
+  });
+
+  it("invokes onTogglePin when Pin button is clicked", async () => {
+    const user = userEvent.setup();
+    const onTogglePin = vi.fn();
+    renderWithMantine(
+      <ProtocolEntry
+        {...baseProps}
+        entry={successEntry}
+        onTogglePin={onTogglePin}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Pin" }));
+    expect(onTogglePin).toHaveBeenCalledTimes(1);
+  });
+
+  it("toggles the local expand/collapse state when clicking Expand/Collapse", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<ProtocolEntry {...baseProps} entry={successEntry} />);
+    expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Expand" }));
+    expect(
+      screen.getByRole("button", { name: "Collapse" }),
+    ).toBeInTheDocument();
+  });
+
+  it("toggles the local expand/collapse state when clicking Expand/Collapse in the compact layout", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={successEntry} embedded />,
+    );
+    expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Expand" }));
+    expect(
+      screen.getByRole("button", { name: "Collapse" }),
+    ).toBeInTheDocument();
+  });
+
+  it("starts expanded when isListExpanded is true and shows Parameters and Response", () => {
+    renderWithMantine(
+      <ProtocolEntry
+        {...baseProps}
+        entry={successEntry}
+        isListExpanded={true}
+      />,
+    );
+    expect(screen.getByText("Parameters:")).toBeInTheDocument();
+    expect(screen.getByText("Response:")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Collapse" }),
+    ).toBeInTheDocument();
+  });
+
+  it("syncs the local expanded state when isListExpanded prop changes", () => {
+    const { rerender } = renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={successEntry} />,
+    );
+    expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
+    rerender(
+      <ProtocolEntry
+        {...baseProps}
+        entry={successEntry}
+        isListExpanded={true}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Collapse" }),
+    ).toBeInTheDocument();
+  });
+
+  it("does not render the Parameters section when message has no params", () => {
+    renderWithMantine(
+      <ProtocolEntry
+        {...baseProps}
+        entry={noParamsEntry}
+        isListExpanded={true}
+      />,
+    );
+    expect(screen.queryByText("Parameters:")).not.toBeInTheDocument();
+    expect(screen.getByText("Response:")).toBeInTheDocument();
+  });
+
+  it("does not render the Response section when no response is present", () => {
+    renderWithMantine(
+      <ProtocolEntry
+        {...baseProps}
+        entry={pendingEntry}
+        isListExpanded={true}
+      />,
+    );
+    expect(screen.getByText("Parameters:")).toBeInTheDocument();
+    expect(screen.queryByText("Response:")).not.toBeInTheDocument();
+  });
+
+  it("does not render duration when duration is undefined", () => {
+    renderWithMantine(<ProtocolEntry {...baseProps} entry={pendingEntry} />);
+    expect(screen.queryByText(/ms$/)).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,264 @@
+import { useEffect, useState } from "react";
+import {
+  Badge,
+  Button,
+  Card,
+  Collapse,
+  Divider,
+  Group,
+  Stack,
+  Text,
+} from "@mantine/core";
+import type { MessageEntry } from "../../../../../../core/mcp/types.js";
+import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
+import { MessageDirectionBadge } from "../../elements/MessageDirectionBadge/MessageDirectionBadge";
+import { ExpandToggle } from "../../elements/ExpandToggle/ExpandToggle";
+import { PinToggle } from "../../elements/PinToggle/PinToggle";
+import { ReplayButton } from "../../elements/ReplayButton/ReplayButton";
+import { extractMethod, isReplayableProtocolMethod } from "../protocolUtils.js";
+
+export interface ProtocolEntryProps {
+  entry: MessageEntry;
+  isPinned: boolean;
+  isListExpanded: boolean;
+  onReplay: () => void;
+  onTogglePin: () => void;
+  /**
+   * Compact two-line header for the narrow monitoring column (#1616): line 1 is
+   * time + direction + duration + status; line 2 is the method (and target) with
+   * the controls — Replay as an icon — on the right.
+   */
+  embedded?: boolean;
+}
+
+const EntryContainer = Card.withProps({
+  withBorder: true,
+  padding: "md",
+});
+
+const HeaderRow = Group.withProps({
+  justify: "space-between",
+  wrap: "nowrap",
+});
+
+// Left / right clusters within a compact header line. The left cluster shrinks
+// (`miw: 0`) so a long target can truncate rather than push the row wider.
+const HeaderCluster = Group.withProps({
+  gap: "sm",
+  wrap: "nowrap",
+  miw: 0,
+});
+
+const ControlsCluster = Group.withProps({
+  gap: "xs",
+  wrap: "nowrap",
+});
+
+const TimestampText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+  ff: "monospace",
+});
+
+const TargetText = Text.withProps({
+  size: "sm",
+  fw: 500,
+});
+
+const DurationText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const SubtleButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+});
+
+function formatDuration(ms: number): string {
+  return `${ms}ms`;
+}
+
+function formatTimestamp(date: Date): string {
+  return date.toISOString();
+}
+
+// Time-only (HH:MM:SS, UTC) for the compact column header, where the full ISO
+// string would eat most of the narrow line-1 width (#1616).
+function formatTimestampCompact(date: Date): string {
+  return date.toISOString().slice(11, 19);
+}
+
+function extractTarget(entry: MessageEntry): string | undefined {
+  const msg = entry.message;
+  if (!("params" in msg) || !msg.params) return undefined;
+  const params = msg.params as Record<string, unknown>;
+  if (typeof params.name === "string") return params.name;
+  if (typeof params.uri === "string") return params.uri;
+  return undefined;
+}
+
+// The pending → OK/Error lifecycle only applies to requests: messageLogState
+// attaches a `response` to request entries by JSON-RPC id. A notification is
+// fire-and-forget (no id, no response, ever) and an unmatched standalone
+// response has none either — so those carry no request-style status ("none")
+// and render no badge, rather than a misleading permanent "Pending".
+function extractStatus(
+  entry: MessageEntry,
+): "success" | "error" | "pending" | "none" {
+  if (entry.direction !== "request") return "none";
+  if (!entry.response) return "pending";
+  if ("error" in entry.response) return "error";
+  return "success";
+}
+
+function statusColor(status: "success" | "error" | "pending"): string {
+  if (status === "success") return "green";
+  if (status === "error") return "red";
+  return "gray";
+}
+
+function statusLabel(status: "success" | "error" | "pending"): string {
+  if (status === "success") return "OK";
+  if (status === "error") return "Error";
+  return "Pending";
+}
+
+function serializeMessage(value: unknown): string {
+  return JSON.stringify(value);
+}
+
+export function ProtocolEntry({
+  entry,
+  isPinned,
+  isListExpanded,
+  onReplay,
+  onTogglePin,
+  embedded = false,
+}: ProtocolEntryProps) {
+  const [isExpanded, setIsExpanded] = useState(isListExpanded);
+  const method = extractMethod(entry);
+  const target = extractTarget(entry);
+  const status = extractStatus(entry);
+  const canReplay = isReplayableProtocolMethod(method);
+
+  useEffect(() => {
+    setIsExpanded(isListExpanded);
+  }, [isListExpanded]);
+
+  const directionBadge = entry.origin && (
+    <MessageDirectionBadge
+      direction={entry.origin === "client" ? "outgoing" : "incoming"}
+    />
+  );
+  const statusBadge = status !== "none" && (
+    <Badge color={statusColor(status)}>{statusLabel(status)}</Badge>
+  );
+  const durationText = entry.duration != null && (
+    <DurationText>{formatDuration(entry.duration)}</DurationText>
+  );
+
+  return (
+    <EntryContainer>
+      <Stack gap="sm">
+        {embedded ? (
+          // Compact two-line header for the narrow column.
+          <Stack gap="xs">
+            <HeaderRow>
+              <HeaderCluster>
+                <TimestampText>
+                  {formatTimestampCompact(entry.timestamp)}
+                </TimestampText>
+                {directionBadge}
+              </HeaderCluster>
+              <ControlsCluster>
+                {durationText}
+                {statusBadge}
+              </ControlsCluster>
+            </HeaderRow>
+            <HeaderRow>
+              <HeaderCluster flex={1}>
+                <Badge color="dark">{method}</Badge>
+                {target && (
+                  <TargetText truncate="end" miw={0}>
+                    {target}
+                  </TargetText>
+                )}
+              </HeaderCluster>
+              <ControlsCluster>
+                {canReplay && <ReplayButton onReplay={onReplay} />}
+                <PinToggle pinned={isPinned} onToggle={onTogglePin} />
+                <ExpandToggle
+                  expanded={isExpanded}
+                  onToggle={() => setIsExpanded((v) => !v)}
+                />
+              </ControlsCluster>
+            </HeaderRow>
+          </Stack>
+        ) : (
+          <>
+            <HeaderRow>
+              <Group gap="sm">
+                <TimestampText>
+                  {formatTimestamp(entry.timestamp)}
+                </TimestampText>
+                {directionBadge}
+                <Badge color="dark">{method}</Badge>
+                {target && <TargetText>{target}</TargetText>}
+              </Group>
+              <Group gap="sm">
+                {durationText}
+                {statusBadge}
+              </Group>
+            </HeaderRow>
+
+            <Group gap="xs" justify="space-between">
+              <Group gap="xs">
+                {canReplay && (
+                  <SubtleButton onClick={onReplay}>Replay</SubtleButton>
+                )}
+              </Group>
+              <Group gap="xs">
+                <PinToggle pinned={isPinned} onToggle={onTogglePin} />
+                <ExpandToggle
+                  expanded={isExpanded}
+                  onToggle={() => setIsExpanded((v) => !v)}
+                />
+              </Group>
+            </Group>
+          </>
+        )}
+
+        <Collapse in={isExpanded}>
+          <Stack gap="sm">
+            <Divider />
+            {"params" in entry.message && entry.message.params && (
+              <Stack gap="xs">
+                <Text size="sm">Parameters:</Text>
+                <ContentViewer
+                  block={{
+                    type: "text",
+                    text: serializeMessage(entry.message.params),
+                  }}
+                  copyable
+                />
+              </Stack>
+            )}
+            {entry.response && (
+              <Stack gap="xs">
+                <Text size="sm">Response:</Text>
+                <ContentViewer
+                  block={{
+                    type: "text",
+                    text: serializeMessage(entry.response),
+                  }}
+                  copyable
+                />
+              </Stack>
+            )}
+          </Stack>
+        </Collapse>
+      </Stack>
+    </EntryContainer>
+  );
+}