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
This commit is contained in:
cliffhall
parent
0fde2d0024
commit
ace4250d31
3 changed files with 413 additions and 405 deletions
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue