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/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>
+  );
+}