From dde43ae47c3e2f0ef4f2f2cc834bf5203ffa4497 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 27 Apr 2026 09:51:02 -0400
Subject: [PATCH 1/2] Phase 5 audit: annotate spec, close HistoryControls
 partial

Audited every component under clients/web/src/components/ against its
v2_ux_interfaces.md entry. Added an "Audit results" section near the top
of the spec with the verified count (57/62 satisfied, 5 partial) and the
specific gaps still open.

While auditing, closed the HistoryControls gap directly:

- Added RequestMethod union type to core/mcp/types.ts, derived from the
  SDK's Client/Server Request and Notification schemas plus a synthetic
  "response" entry for result/error MessageEntries.
- Typed methodFilter and onMethodFilterChange in HistoryControls,
  HistoryListPanel, historyUtils.extractMethod with RequestMethod.
- Lifted the hardcoded METHOD_OPTIONS list out of HistoryControls into
  a required availableMethods prop. HistoryScreen now derives it from
  the live entries via useMemo + extractMethod.
- Updated HistoryControls.stories.tsx to pass availableMethods.

The remaining 5 partials (ElicitationUrlPanel, InlineElicitationRequest,
InlineSamplingRequest, ExperimentalFeaturesPanel, ResourceListItem) are
either blocked on the v2 core hook layer effort or call out follow-up
work that has its own design questions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../HistoryControls.stories.tsx               | 12 +++++
 .../HistoryControls/HistoryControls.tsx       | 24 ++++------
 .../HistoryListPanel/HistoryListPanel.tsx     |  9 ++--
 .../web/src/components/groups/historyUtils.ts |  9 ++--
 .../screens/HistoryScreen/HistoryScreen.tsx   | 16 +++++--
 core/mcp/types.ts                             | 12 +++++
 specification/v2_ux_interfaces.md             | 46 +++++++++++++++++++
 7 files changed, 104 insertions(+), 24 deletions(-)

diff --git a/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx b/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx
index d2cdad7f..ed24eabc 100644
--- a/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx
+++ b/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx
@@ -2,11 +2,23 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { HistoryControls } from "./HistoryControls";
 
+const SAMPLE_METHODS = [
+  "tools/call",
+  "tools/list",
+  "resources/read",
+  "resources/list",
+  "prompts/get",
+  "prompts/list",
+  "sampling/createMessage",
+  "elicitation/create",
+] as const;
+
 const meta: Meta<typeof HistoryControls> = {
   title: "Groups/HistoryControls",
   component: HistoryControls,
   args: {
     searchText: "",
+    availableMethods: [...SAMPLE_METHODS],
     onSearchChange: fn(),
     onMethodFilterChange: fn(),
   },
diff --git a/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx b/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
index b5756c9d..1fc6add8 100644
--- a/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
+++ b/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
@@ -1,26 +1,18 @@
 import { Select, Stack, TextInput, Title } from "@mantine/core";
-
-const METHOD_OPTIONS = [
-  "tools/call",
-  "tools/list",
-  "resources/read",
-  "resources/list",
-  "prompts/get",
-  "prompts/list",
-  "sampling/createMessage",
-  "elicitation/create",
-];
+import type { RequestMethod } from "@inspector/core/mcp/types.js";
 
 export interface HistoryControlsProps {
   searchText: string;
-  methodFilter?: string;
+  methodFilter?: RequestMethod;
+  availableMethods: RequestMethod[];
   onSearchChange: (text: string) => void;
-  onMethodFilterChange: (method: string | undefined) => void;
+  onMethodFilterChange: (method: RequestMethod | undefined) => void;
 }
 
 export function HistoryControls({
   searchText,
   methodFilter,
+  availableMethods,
   onSearchChange,
   onMethodFilterChange,
 }: HistoryControlsProps) {
@@ -36,9 +28,11 @@ export function HistoryControls({
       <Title order={6}>Filter by Method</Title>
       <Select
         placeholder="All methods"
-        data={METHOD_OPTIONS}
+        data={availableMethods}
         value={methodFilter ?? null}
-        onChange={(value) => onMethodFilterChange(value ?? undefined)}
+        onChange={(value) =>
+          onMethodFilterChange((value as RequestMethod | null) ?? undefined)
+        }
         clearable
       />
     </Stack>
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index dbda18f1..6e15d725 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@@ -8,7 +8,10 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import type { MessageEntry } from "../../../../../../core/mcp/types.js";
+import type {
+  MessageEntry,
+  RequestMethod,
+} from "../../../../../../core/mcp/types.js";
 import { HistoryEntry } from "../HistoryEntry/HistoryEntry";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
 import { extractMethod } from "../historyUtils.js";
@@ -17,7 +20,7 @@ export interface HistoryListPanelProps {
   entries: MessageEntry[];
   pinnedIds: Set<string>;
   searchText: string;
-  methodFilter?: string;
+  methodFilter?: RequestMethod;
   onClearAll: () => void;
   onExport: () => void;
   onReplay: (id: string) => void;
@@ -53,7 +56,7 @@ function formatHistoryTitle(count: number): string {
 function matchesFilters(
   entry: MessageEntry,
   searchText: string,
-  methodFilter?: string,
+  methodFilter?: RequestMethod,
 ): boolean {
   const method = extractMethod(entry);
   if (methodFilter && method !== methodFilter) return false;
diff --git a/clients/web/src/components/groups/historyUtils.ts b/clients/web/src/components/groups/historyUtils.ts
index 6180feb8..820d05fa 100644
--- a/clients/web/src/components/groups/historyUtils.ts
+++ b/clients/web/src/components/groups/historyUtils.ts
@@ -1,8 +1,11 @@
-import type { MessageEntry } from "../../../../../core/mcp/types.js";
+import type {
+  MessageEntry,
+  RequestMethod,
+} from "../../../../../core/mcp/types.js";
 
-export function extractMethod(entry: MessageEntry): string {
+export function extractMethod(entry: MessageEntry): RequestMethod {
   if ("method" in entry.message) {
-    return entry.message.method;
+    return entry.message.method as RequestMethod;
   }
   return "response";
 }
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
index 0917322c..052673f2 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
@@ -1,8 +1,12 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
-import type { MessageEntry } from "../../../../../../core/mcp/types.js";
+import type {
+  MessageEntry,
+  RequestMethod,
+} from "../../../../../../core/mcp/types.js";
 import { HistoryControls } from "../../groups/HistoryControls/HistoryControls";
 import { HistoryListPanel } from "../../groups/HistoryListPanel/HistoryListPanel.js";
+import { extractMethod } from "../../groups/historyUtils.js";
 
 export interface HistoryScreenProps {
   entries: MessageEntry[];
@@ -39,7 +43,12 @@ export function HistoryScreen({
   onTogglePin,
 }: HistoryScreenProps) {
   const [searchText, setSearchText] = useState("");
-  const [methodFilter, setMethodFilter] = useState<string | undefined>();
+  const [methodFilter, setMethodFilter] = useState<RequestMethod | undefined>();
+
+  const availableMethods = useMemo(
+    () => Array.from(new Set(entries.map(extractMethod))).sort(),
+    [entries],
+  );
 
   return (
     <ScreenLayout>
@@ -48,6 +57,7 @@ export function HistoryScreen({
           <HistoryControls
             searchText={searchText}
             methodFilter={methodFilter}
+            availableMethods={availableMethods}
             onSearchChange={setSearchText}
             onMethodFilterChange={setMethodFilter}
           />
diff --git a/core/mcp/types.ts b/core/mcp/types.ts
index 6a450a28..ed6e005b 100644
--- a/core/mcp/types.ts
+++ b/core/mcp/types.ts
@@ -1,5 +1,7 @@
 import type {
   CallToolResult,
+  ClientNotification,
+  ClientRequest,
   GetPromptResult,
   Implementation,
   JSONRPCErrorResponse,
@@ -10,6 +12,8 @@ import type {
   ReadResourceResult,
   Resource,
   ServerCapabilities,
+  ServerNotification,
+  ServerRequest,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import type { JsonValue } from "../json/jsonUtils.js";
@@ -98,6 +102,14 @@ export interface MessageEntry {
   duration?: number; // Time between request and response in ms
 }
 
+/** Method name for any MessageEntry traffic, plus synthetic "response" for result/error entries. */
+export type RequestMethod =
+  | ClientRequest["method"]
+  | ClientNotification["method"]
+  | ServerRequest["method"]
+  | ServerNotification["method"]
+  | "response";
+
 export type FetchRequestCategory = "auth" | "transport";
 
 export interface FetchRequestEntry {
diff --git a/specification/v2_ux_interfaces.md b/specification/v2_ux_interfaces.md
index 049379ab..354b08db 100644
--- a/specification/v2_ux_interfaces.md
+++ b/specification/v2_ux_interfaces.md
@@ -94,6 +94,52 @@ For each component, the plan records:
 
 ---
 
+## Audit results (Phase 5 close-out, 2026-04-26)
+
+After Phases 0–5 of [`v2_ux_interfaces_plan.md`](v2_ux_interfaces_plan.md), the
+component layer was audited against this spec by reading every component file
+under `clients/web/src/components/` and comparing its exported props interface
+and internal rendering against the corresponding entry's **Target props** and
+**Internal refactors** here. Spec entries that reference `Inspector*`
+placeholder names map to v1.5 actual names per the plan's
+"Name-mapping correction" table — components using those v1.5 names
+(`MCPServerConfig`, `ServerType`, `Task`, `MessageEntry`, etc.) are treated
+as satisfied.
+
+**Result: 57 of 62 satisfied, 5 partial, 0 unstarted.**
+
+### Partials still open
+
+- **ElicitationUrlPanel** — accepts scalar `message` / `url` / `requestId`
+  props. Spec target wraps these in `InspectorUrlElicitRequest`. **Blocked
+  on the v2 core hook layer effort** — the wrapper type was deferred from
+  Phase 0.2 and was not added to `core/mcp/types.ts` because URL-mode
+  elicitation has no dedicated handler in this repo yet.
+- **InlineElicitationRequest** — accepts only `ElicitRequest['params']`
+  (form variant). Spec target is a discriminated union over
+  `ElicitRequest | InspectorUrlElicitRequest`. **Same blocker as above.**
+- **InlineSamplingRequest** — exposes a flat `responseText: string` prop.
+  Spec target is `draftResult?: CreateMessageResult`. In-scope to fix
+  without the hook layer; deferred to a follow-up because the inline card's
+  draft-editing UX is co-evolving with `SamplingRequestPanel`.
+- **ExperimentalFeaturesPanel** — accepts a local
+  `clientToggles: ClientExperimentalToggle[]` prop. Spec target is the
+  freeform `clientExperimental: ClientCapabilities['experimental']` record
+  iterated in-component. The local-toggle shape was retained because the
+  panel needs per-toggle metadata (label, description) that the bare
+  capabilities record doesn't carry; reconciling the two shapes is a
+  follow-up.
+- **ResourceListItem** — props match the target shape, but the entry's
+  internal-refactor bullet ("Actually render the annotations currently
+  received but unused") is unimplemented; the component still ignores
+  `resource.annotations`.
+
+The component contracts produced by this refactor are the input spec for
+the upcoming v2 `core/` hook layer effort. The two blocked partials above
+will close out as part of that work.
+
+---
+
 ## Section 1 — Elements (`clients/web/src/components/elements/`)
 
 > Small, focused presentational primitives. Each renders a single MCP concept

From 6b3cecd73688228a53ba5ee4fd3aa81a088febc2 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Mon, 27 Apr 2026 10:24:30 -0400
Subject: [PATCH 2/2] Address PR #1236 review feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename RequestMethod → MessageMethod. The type covers notifications and
  results, not just requests; the new name matches the JSDoc.
- Normalize imports to the @inspector/core/mcp/types.js path alias in
  HistoryListPanel, historyUtils, and HistoryScreen (HistoryControls was
  already using the alias).
- Document the cast invariant in extractMethod: SDK types message.method
  as string, but every MessageEntry in this app originates from SDK
  schemas, so the narrowing is safe.
- Type SAMPLE_METHODS as MessageMethod[] in HistoryControls stories so
  the literal-type narrowing isn't lost across the spread.

Skipped two reviewer suggestions: the Mantine Select inline cast (reviewer
self-resolved) and the stale-methodFilter-on-clear UX edge case (deferred
as a separate follow-up — not a Phase 5 audit gap).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../HistoryControls/HistoryControls.stories.tsx       |  7 ++++---
 .../groups/HistoryControls/HistoryControls.tsx        | 10 +++++-----
 .../groups/HistoryListPanel/HistoryListPanel.tsx      |  9 +++------
 clients/web/src/components/groups/historyUtils.ts     | 11 +++++------
 .../screens/HistoryScreen/HistoryScreen.tsx           |  7 ++-----
 core/mcp/types.ts                                     |  2 +-
 specification/v2_ux_interfaces.md                     |  2 +-
 7 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx b/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx
index ed24eabc..938e31d5 100644
--- a/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx
+++ b/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx
@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
+import type { MessageMethod } from "@inspector/core/mcp/types.js";
 import { HistoryControls } from "./HistoryControls";
 
-const SAMPLE_METHODS = [
+const SAMPLE_METHODS: MessageMethod[] = [
   "tools/call",
   "tools/list",
   "resources/read",
@@ -11,14 +12,14 @@ const SAMPLE_METHODS = [
   "prompts/list",
   "sampling/createMessage",
   "elicitation/create",
-] as const;
+];
 
 const meta: Meta<typeof HistoryControls> = {
   title: "Groups/HistoryControls",
   component: HistoryControls,
   args: {
     searchText: "",
-    availableMethods: [...SAMPLE_METHODS],
+    availableMethods: SAMPLE_METHODS,
     onSearchChange: fn(),
     onMethodFilterChange: fn(),
   },
diff --git a/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx b/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
index 1fc6add8..32ba944d 100644
--- a/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
+++ b/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
@@ -1,12 +1,12 @@
 import { Select, Stack, TextInput, Title } from "@mantine/core";
-import type { RequestMethod } from "@inspector/core/mcp/types.js";
+import type { MessageMethod } from "@inspector/core/mcp/types.js";
 
 export interface HistoryControlsProps {
   searchText: string;
-  methodFilter?: RequestMethod;
-  availableMethods: RequestMethod[];
+  methodFilter?: MessageMethod;
+  availableMethods: MessageMethod[];
   onSearchChange: (text: string) => void;
-  onMethodFilterChange: (method: RequestMethod | undefined) => void;
+  onMethodFilterChange: (method: MessageMethod | undefined) => void;
 }
 
 export function HistoryControls({
@@ -31,7 +31,7 @@ export function HistoryControls({
         data={availableMethods}
         value={methodFilter ?? null}
         onChange={(value) =>
-          onMethodFilterChange((value as RequestMethod | null) ?? undefined)
+          onMethodFilterChange((value as MessageMethod | null) ?? undefined)
         }
         clearable
       />
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index 6e15d725..0bd6a6f7 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@@ -8,10 +8,7 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import type {
-  MessageEntry,
-  RequestMethod,
-} from "../../../../../../core/mcp/types.js";
+import type { MessageEntry, MessageMethod } from "@inspector/core/mcp/types.js";
 import { HistoryEntry } from "../HistoryEntry/HistoryEntry";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
 import { extractMethod } from "../historyUtils.js";
@@ -20,7 +17,7 @@ export interface HistoryListPanelProps {
   entries: MessageEntry[];
   pinnedIds: Set<string>;
   searchText: string;
-  methodFilter?: RequestMethod;
+  methodFilter?: MessageMethod;
   onClearAll: () => void;
   onExport: () => void;
   onReplay: (id: string) => void;
@@ -56,7 +53,7 @@ function formatHistoryTitle(count: number): string {
 function matchesFilters(
   entry: MessageEntry,
   searchText: string,
-  methodFilter?: RequestMethod,
+  methodFilter?: MessageMethod,
 ): boolean {
   const method = extractMethod(entry);
   if (methodFilter && method !== methodFilter) return false;
diff --git a/clients/web/src/components/groups/historyUtils.ts b/clients/web/src/components/groups/historyUtils.ts
index 820d05fa..f6258b10 100644
--- a/clients/web/src/components/groups/historyUtils.ts
+++ b/clients/web/src/components/groups/historyUtils.ts
@@ -1,11 +1,10 @@
-import type {
-  MessageEntry,
-  RequestMethod,
-} from "../../../../../core/mcp/types.js";
+import type { MessageEntry, MessageMethod } from "@inspector/core/mcp/types.js";
 
-export function extractMethod(entry: MessageEntry): RequestMethod {
+export function extractMethod(entry: MessageEntry): MessageMethod {
   if ("method" in entry.message) {
-    return entry.message.method as RequestMethod;
+    // Cast: SDK types message.method as `string`, but every entry in this
+    // app's MessageEntry log originates from MCP SDK schemas.
+    return entry.message.method as MessageMethod;
   }
   return "response";
 }
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
index 052673f2..1e1a499e 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
@@ -1,9 +1,6 @@
 import { useMemo, useState } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
-import type {
-  MessageEntry,
-  RequestMethod,
-} from "../../../../../../core/mcp/types.js";
+import type { MessageEntry, MessageMethod } from "@inspector/core/mcp/types.js";
 import { HistoryControls } from "../../groups/HistoryControls/HistoryControls";
 import { HistoryListPanel } from "../../groups/HistoryListPanel/HistoryListPanel.js";
 import { extractMethod } from "../../groups/historyUtils.js";
@@ -43,7 +40,7 @@ export function HistoryScreen({
   onTogglePin,
 }: HistoryScreenProps) {
   const [searchText, setSearchText] = useState("");
-  const [methodFilter, setMethodFilter] = useState<RequestMethod | undefined>();
+  const [methodFilter, setMethodFilter] = useState<MessageMethod | undefined>();
 
   const availableMethods = useMemo(
     () => Array.from(new Set(entries.map(extractMethod))).sort(),
diff --git a/core/mcp/types.ts b/core/mcp/types.ts
index ed6e005b..8f0f1c6c 100644
--- a/core/mcp/types.ts
+++ b/core/mcp/types.ts
@@ -103,7 +103,7 @@ export interface MessageEntry {
 }
 
 /** Method name for any MessageEntry traffic, plus synthetic "response" for result/error entries. */
-export type RequestMethod =
+export type MessageMethod =
   | ClientRequest["method"]
   | ClientNotification["method"]
   | ServerRequest["method"]
diff --git a/specification/v2_ux_interfaces.md b/specification/v2_ux_interfaces.md
index 354b08db..0c906d28 100644
--- a/specification/v2_ux_interfaces.md
+++ b/specification/v2_ux_interfaces.md
@@ -356,7 +356,7 @@ will close out as part of that work.
 - **Purpose**: Search + method filter sidebar for the history screen.
 - **Current props**: `searchText`, `methodFilter`, `onSearchChange`, `onMethodFilterChange`.
 - **MCP schema touch points**: Method filter values are MCP `Request.method` literals.
-- **Target props**: `searchText`, `methodFilter?: RequestMethod`, `availableMethods: RequestMethod[]`, `onSearchChange`, `onMethodFilterChange`.
+- **Target props**: `searchText`, `methodFilter?: MessageMethod`, `availableMethods: MessageMethod[]`, `onSearchChange`, `onMethodFilterChange`.
 - **Callbacks → core hook**: `useMessageLog`.
 - **Internal refactors**: Type the method filter as a union of MCP method strings.