inspector/core/react/usePagedResourceTemplates.ts
cliffhall b33532c024 feat: allow complex JSON values in request _meta
Closes #1910

`_meta` was typed `Record<string, string>` end to end in the Inspector —
on disk as a `{ key, value }[]` pair array, in the Server Settings form as
key/value rows, and in every request verb's per-call metadata parameter.
Nothing in the MCP spec restricts a `_meta` value to a string, and the SDK
models the field as a `z.looseObject`, so the restriction was ours alone.

Widen the whole path to `RequestMetadata` (`Record<string, JsonValue>`):

- Per-server default metadata is a JSON **object** on disk and in memory.
  The pre-#1910 pair array is still read (`normalizeStoredMetadata`) so an
  existing `mcp.json` keeps working; it is never written back, so a save
  migrates the entry.
- The Server Settings → Request Metadata section is a JSON editor
  (`JsonObjectInput`) instead of key/value rows — rows cannot express an
  object value. It keeps the typed text as the display source and emits
  only parsed JSON, the same draft split `SchemaJsonField` uses, so the box
  stays typeable; invalid text is flagged inline and not applied.
- The CLI stops flattening `--metadata` / `--tool-metadata` through
  `metaValueToString`. Those values were already JSON-parsed, so
  `trace={"id":"abc"}` used to reach the wire as the *string* `{"id":"abc"}`
  and now reaches it as an object.
- `servers/show` redaction replaces a sensitive key's whole value rather
  than a string, so a structured value cannot leak through its members.
- `progressTokenOf` narrows the reserved `progressToken` key back to
  `string | number` before it reaches the SDK; any other JSON still travels
  inside `_meta` but wires up no progress callback.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0177mPHAdECD18nLLCTwR5rh
Signed-off-by: cliffhall <cliff@futurescale.com>
2026-08-23 12:23:40 -04:00

82 lines
2.5 KiB
TypeScript

import { useState, useEffect, useCallback } from "react";
import type { InspectorClientProtocol } from "../mcp/inspectorClientProtocol.js";
import type { RequestMetadata } from "../mcp/types.js";
import type {
PagedResourceTemplatesState,
PagedResourceTemplatesStateEventMap,
LoadPageResult,
} from "../mcp/state/pagedResourceTemplatesState.js";
import type { ResourceTemplateType as ResourceTemplate } from "@modelcontextprotocol/client";
import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
export interface UsePagedResourceTemplatesResult {
resourceTemplates: ResourceTemplate[];
loadPage: (
cursor?: string,
metadata?: RequestMetadata,
) => Promise<LoadPageResult>;
clear: () => void;
}
/**
* React hook that subscribes to PagedResourceTemplatesState and returns
* resource templates + loadPage.
*/
export function usePagedResourceTemplates(
client: InspectorClientProtocol | null,
pagedResourceTemplatesState: PagedResourceTemplatesState | null,
): UsePagedResourceTemplatesResult {
const [resourceTemplates, setResourceTemplates] = useState<
ResourceTemplate[]
>(pagedResourceTemplatesState?.getResourceTemplates() ?? []);
useEffect(() => {
if (!pagedResourceTemplatesState) {
setResourceTemplates([]);
return;
}
setResourceTemplates(pagedResourceTemplatesState.getResourceTemplates());
const onResourceTemplatesChange = (
event: TypedEventGeneric<
PagedResourceTemplatesStateEventMap,
"resourceTemplatesChange"
>,
) => {
setResourceTemplates(event.detail);
};
pagedResourceTemplatesState.addEventListener(
"resourceTemplatesChange",
onResourceTemplatesChange,
);
return () => {
pagedResourceTemplatesState.removeEventListener(
"resourceTemplatesChange",
onResourceTemplatesChange,
);
};
}, [pagedResourceTemplatesState]);
const loadPage = useCallback(
async (
cursor?: string,
metadata?: RequestMetadata,
): Promise<LoadPageResult> => {
if (!pagedResourceTemplatesState || !client) {
return { resourceTemplates: [], nextCursor: undefined };
}
const result = await pagedResourceTemplatesState.loadPage(
cursor,
metadata,
);
setResourceTemplates(pagedResourceTemplatesState.getResourceTemplates());
return result;
},
[client, pagedResourceTemplatesState],
);
const clear = useCallback(() => {
pagedResourceTemplatesState?.clear();
}, [pagedResourceTemplatesState]);
return { resourceTemplates, loadPage, clear };
}