Migrate all three clients + core + test-servers from
@modelcontextprotocol/sdk@1.29 to SDK v2 (2.0.0-beta.4), keeping behavior
identical against legacy (2025-11-25) servers. Foundation for the SDK V2 +
New Spec stack.
Packages
- Split @modelcontextprotocol/sdk -> @modelcontextprotocol/client (Client,
transports, OAuth, error taxonomy, protocol types) + core (Zod schemas);
stdio -> client/stdio, Ajv -> client/validators/ajv. Test-servers ->
@modelcontextprotocol/server (+ server-legacy/sse). Deterministic import
rewrite (schemas -> core, everything else -> client); the codemod misroutes
client code to /server so it was not used for path routing.
- new Client(..., { versionNegotiation: { mode: 'legacy' } }) — nothing
2026-era goes on the wire.
Runtime (core/mcp/inspectorClient.ts)
- Error taxonomy: McpError -> ProtocolError, ErrorCode -> ProtocolErrorCode;
RequestTimeout -> SdkError/SdkErrorCode.
- Handlers take method strings; task methods (tasks/*, notifications/tasks/*)
use the 3-arg custom form (excluded from v2's spec-method set).
- Legacy tasks kept working (per project requirement): requestor tasks re-
implemented over raw client.request + explicit deprecated schemas;
experimental.tasks.callToolStream replaced by a local pollTaskToolCall
async generator (with _progressHandlers revival so task-execution progress
still reaches the caller). Receiver (server-initiated) tasks: the v2 Client
validates a sampling/elicit handler result and rejects the legacy { task }
response with -32602 — installReceiverTaskResponseBypass swaps the wrapped
entry in the private _requestHandlers map for the task-augmented branch so
{ task } reaches the wire (fixes server-initiated sampling-via-task).
- Pagination: list verbs use raw client.request({method}, List*ResultSchema)
for single-page behavior (v2's client.listX() auto-aggregate all pages).
Web / auth / apps
- Rename local JsonSchemaType -> InspectorFormSchema + add toFormSchema()
structural narrowing at the SDK-schema -> form boundary.
- ext-apps still peers on SDK v1: one compat boundary with documented casts
(remove when ext-apps#702 lands a v2 peer).
- OAuth provider saveClientInformation reconciled with v2's
OAuthClientInformationContext; InvalidClientMetadataError re-homed as a
local class (server-legacy/auth is not browser-safe).
- vitest.shared.mts dedupes @modelcontextprotocol/client+core to one copy so
vi.mock intercepts the SUT's import.
Accepted v2 behavior changes (per #1624 / spec §9.2): unknown-tool call
rejects with -32602; cancellation is stream-abort (no guaranteed
notifications/cancelled frame); output-schema strictness restored via the
Inspector's own Ajv check on the default path.
npm run ci green: validate (web 3087 / cli 212 / tui 274 / launcher 5),
coverage (>=90 per-file, all clients), smoke (launcher/cli/web), storybook
(410).
Closes#1624
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: accessible light/dark color palette + dark-mode legibility fixes (#1678)
Ports the design system's accessible palette. Colors are defined once as Mantine
color tuples in theme.ts (shade 0 lightest → 9 darkest); every `--inspector-*`
token in App.css references `--mantine-color-*`, so improving the tuples cascades
through the whole UI.
- theme.ts: full accessible tuple set (inspector/gray/dark/green/red/yellow/blue/
teal/violet), WCAG-AA at the primary shades. Tuples are the one place literal
hex belongs — the token source. Primary stays inspector-7 (light) / -8 (dark).
- theme/ActionIcon.ts: default `color: "gray"` so chrome icons (settings, theme
toggle, sidebar, pin, sort, replay) render neutral grey instead of inheriting
the blue primary. Icons that set their own color/variant still override.
- App.css: fix light surfaces (`surface-body` gray-0, `surface-card` white — the
body token pointed at near-black dark-9); add direction/method badge tokens;
lift the semantic status/log/task/history colors 1–2 steps in the dark scheme
(the shared `*-6` shade sat too dark on charcoal). Light `:root` keeps `*-6`.
- Badges: MessageDirectionBadge + new MethodBadge element driven by
`--inspector-badge-*` tokens (deep fill + light text in dark, tinted in light)
via Mantine `bg`/`c` style props with `autoContrast={false}`; swaps
`<Badge color="dark">{method}</Badge>` in ProtocolEntry/NetworkEntry (their
Badge import stays — both still use it for status/category chips). Stories +
test added for MethodBadge (≥90 coverage gate).
Domain badge semantics live in the element components, not theme files. No raw
hex outside the tuples; no inline styles. Supersedes the reverted #1677.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw
* web: WCAG AA accessibility pass — contrast, labels, names, roles (#1678)
Drives the axe-core ruleset (the engine behind Storybook's a11y addon) to
zero violations across all stories in light and dark mode.
Contrast (805 → 0 hits):
- Darken Mantine `*-light-color` + `dimmed` in light mode (and lift dark
`dimmed`) via `!important` App.css overrides — Mantine injects these at
runtime at matching specificity, so specificity alone loses the tie.
- `filledBadgeColor` pins amber (orange/yellow) filled badges to shade 5 so
`autoContrast` (JS-computed from the theme shade, not CSS vars) picks black.
- `accessibleTextColor` routes colored log/filter text through the scheme-aware
`-light-color` token so it clears AA on light and dark surfaces.
- `status` Badge variant: amber statuses use black-on-amber (orange text can't
reach AA on light at any Mantine shade).
- Resource URIs use `-light-color` (blue-4 was 4.38:1 in dark).
Names / roles:
- `aria-dialog-name`: custom-header modals use `Modal.Title` (wires the
dialog's `aria-labelledby`) instead of a bare `Title` + a root `aria-label`
(which also tripped `aria-prohibited-attr`).
- `button-name`: a `Modal` theme default labels every built-in close button.
- `label`: `aria-label` on the previously-unlabelled Textarea/Select inputs.
- `scrollable-region-focusable`: keyboard-focusable content Code/ScrollArea
viewports; long OAuth values wrap instead of scrolling.
- `heading-order`: correct heading levels (keeping visual size via `size`) so
outlines don't skip a level under the h2 modal/section titles.
Scrollbars: `type="scroll"` ScrollArea theme default — scrollbars auto-hide and
show only while scrolling (a deliberate product choice over the always-visible
a11y default).
`region` is disabled in the Storybook a11y config: isolated component/screen
stories render outside the app's `AppShell` landmarks, so it's a page-level
concern the components can't own.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: let the resource template form fill the main-area width (#1678)
Drop the maw=40% cap on the template-form pane so the URI preview and
variable inputs use the full width beside the sidebar, matching the
resource preview pane.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: left-align + reverse the input-panel action rows (#1678)
Move the footer action buttons to the left (justify flex-start) and put
the primary action first on the Tool / Prompt / Resource-preview /
Resource-template panels — Subscribe, Refresh, View Source on the
preview panel; Execute before Cancel on the tool panel. Shortens the
pointer travel from the sidebar controls / the form fields above to the
actions, which matters most when the monitoring sidebar is hidden and
the form is wide.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: match the dark-mode body background to the header tab bar (#1678)
Set the dark `--inspector-surface-body` to `dark-8` (the Mantine
SegmentedControl fill used by the header tab bar) instead of `dark-9`,
mirroring light mode where the body and the tab bar share `gray-1`.
Cards (`gray-9`) still sit a step above the body, and the contrast audit
stays at zero AA violations on the slightly lighter background.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: enforce the a11y gate + fix modal-overlay heading-order (review #1679)
Address the code review:
- Flip the Storybook a11y addon from test: 'todo' to 'error' so axe
violations fail the play-function tests in CI — the zero-violation
state is now gated, not point-in-time.
- Enforcing it surfaced a real heading-order skip: the Tools screen's
h4 'Tools'/'Results' sit under an h2 Modal.Title when a sampling/
elicitation request modal opens over them. Lift both to h3 (size h4
preserves the look) so h2→h3 is valid in any DOM order.
- Comment the intentional color+c pairing on the Remove/Disconnect
danger buttons.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: brighter warning alerts + pin the elicitation form's actions (#1678)
- Add a 'warning' Alert variant: a bright light-yellow fill (yellow-1)
with crisp near-black text and a bright yellow-5 left accent, instead
of the muddy brown a tinted yellow alert produced once
yellow-light-color was darkened to yellow-9 for contrast. Dark mode
keeps the light-on-dark-tint treatment. Applied to all five yellow
warning/notice alerts.
- Elicitation form: scroll only the form fields (capped ScrollArea),
keeping the quoted message, warning, and Cancel/Decline/Submit buttons
in view. The modal has no other close affordance, so the actions must
never scroll out of reach.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: robustly pin the elicitation form's actions (#1678)
The previous approach capped only the fields' ScrollArea with a fixed
rem reserve for the pinned chrome, which underestimated it on some
viewports — the whole modal then overflowed and the buttons clipped
half-off-screen. Instead cap the whole panel below the modal height and
lay it out as a flex column: the message and the warning + buttons are
pinned (flex: 0 0 auto) and only the fields (flex: 1) shrink and scroll.
Verified the buttons stay within the panel and the modal fits the
viewport down to very short heights.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: fix elicitation form scrolling — fields scroll, actions pinned (#1678)
The prior fix capped the panel with a bare max-height, but a flex:1
ScrollArea's viewport won't bound against a max-height (not fixed-height)
parent, so a tall form's fields overflowed unscrollably (clipped) rather
than scrolling. Adopt ToolDetailPanel's pattern instead: the modal gives
its body a bounded flex column, the panel fills it, and the fields use a
flex: "0 1 auto" ScrollArea — which sizes to content when the form is
short (modal stays compact, nothing scrolls) and shrinks + scrolls once
the panel is capped at the modal height, keeping the message, warning,
and Cancel/Decline/Submit pinned in view. Add a ManyFields story (with a
bounded-height decorator mirroring the modal) to cover the scroll case.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: fix elicitation scrolling in the real modal (cap fields, not flex)
The flex-column approach (panel flex:1 in a flex-column modal body, fields
flex:"0 1 auto") worked in a fixed-height Storybook decorator but NOT in the
real modal: the modal body is bounded by max-height, not an explicit height,
so the fields' ScrollArea viewport still couldn't bound — a tall form's
fields overflowed and pushed the warning + Cancel/Decline/Submit off-screen.
Drop the flex plumbing (and the modal-body styles) and cap the fields
directly with ScrollArea.Autosize mah=calc(90dvh - 22rem): it sizes to
content when the form is short (modal compact, nothing scrolls) and scrolls
once the fields hit the cap. The 22rem reserve = the measured non-field
chrome (modal header/padding + message + warning + buttons + gaps), so the
whole modal stays within 90dvh and the actions are always in view. Verified
in the real PendingClientRequestModal (new ElicitationFormTall story) for
both short and tall forms.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* web: pin the sampling modal's actions too (#1678)
Apply the elicitation-form treatment to SamplingRequestPanel: wrap the
request/response content in a ScrollArea.Autosize capped at
calc(90dvh - 10rem) so it scrolls while the Reject / Send Response buttons
stay pinned in view (the modal has no other close affordance). The 10rem
reserve is the pinned chrome (modal header/padding + the actions + gaps) —
smaller than the elicitation form's 22rem since there's no warning banner.
Add a SamplingTall story (8 messages + preferences) to cover the scroll
case in the real PendingClientRequestModal.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(web): section-header hover outline + clear buttons out of tab order (#1487)
Two button-behavior adjustments:
1. History section headers (Pinned / History) now use the filter-toggle
style — a thin outline on hover instead of a background fill — by pointing
the `sectionHeader` Group variant at the shared `.filter-toggle` class. The
open section keeps its filled background (passed per-instance via `bg`).
2. Every input clear button added in #1448 is removed from the keyboard tab
order via `tabIndex={-1}` (CloseButton clear buttons app-wide, plus the
Autocomplete clear button through `theme/Autocomplete.ts` clearButtonProps),
so tabbing through a form moves to the next field, not onto the clear button.
The buttons stay mouse-clickable.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(web): apply filter-toggle hover outline to Resources accordion headers (#1487)
The Resources screen `disclosure` accordion controls now share the same
outline-on-hover treatment as the filter toggle buttons and History section
headers: a thin border on hover instead of a background fill, plus a filled
background when the section is open (keyed off `aria-expanded`). The `.filter-
toggle` class is added to the disclosure control slot; the default-variant
accordion (Server Settings) keeps its background-fill hover via a `:not(.filter-
toggle)` guard.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* refactor(web): extract ClearButton element, replace 34 inline clear buttons
Addresses the code-review suggestion on PR #1488: the same five-line
`CloseButton` clear-affordance block (aria-label="Clear" + tabIndex={-1} +
onClick) was hand-copied across 17 files. Extract a single
`elements/ClearButton` (Mantine `CloseButton.withProps` with the aria-label and
tabIndex baked in) and replace all 34 call sites, so the clear-button contract
lives in one place. A global CloseButton theme default would be wrong here — it
would also catch tabbable modal-close X buttons and the Select clear buttons —
so a dedicated element is the right altitude.
Net -151 lines. Adds element unit tests + a Storybook play test covering the
aria-label / tabIndex / clickable contract for all sites at once.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* feat(web): add Mantine clear buttons to text inputs app-wide (#1333)
Add a clear (×) affordance to every user-editable text input across the
web client so a populated field can be reset in one click.
- Autocomplete: enable `clearable` by default via the theme
(`theme/Autocomplete.ts`) — covers the prompt-argument and
resource-template variable autocomplete branches.
- TextInput / Textarea: Mantine v8 does not expose a public `clearable`
prop on these primitives (only the combobox-based components do), so
add the clear button manually via `rightSection` + `CloseButton`
(aria-label="Clear") shown only when the field has a value, wired to
reset the field's controlled value to "".
Applied to sidebar search inputs (prompts, tools, apps, tasks, history,
resources, network, logs), prompt-argument and resource-template
variable inputs, the sampling response/model fields, server config &
settings forms, roots table, schema form, experimental features panel,
and the server.json import panel. Read-only/display Textareas
(OutputValidationModal, UrlElicitationErrorModal) are intentionally left
untouched.
Tests cover the clear behavior on representative inputs from each
category (sidebar search, prompt argument, resource-template variable,
sampling response, plus the config/settings forms).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(web): disable ServerConfigModal clear buttons while submitting
Address review #2 on #1448: the clear CloseButton sat in `rightSection`
with `rightSectionPointerEvents="auto"`, so it stayed clickable even
while the field was `disabled={submitting}`, letting a user wipe a field
mid-submit. Forward `disabled={submitting}` to each clear button so it
locks together with its input.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* refactor(web): remove redundant Auto-respond from SamplingRequestPanel
The sampling modal pre-loads its draft with the default stub result, and
"Send Response" sends that draft — so on an untouched form "Auto-respond"
did exactly the same thing as "Send Response", just with a fresh copy of
the same defaults. Drop the redundant button and its `onAutoRespond` prop;
"Send Response" now covers both the unedited (stub) and edited cases.
The InlineSamplingRequest variant keeps its Auto-respond button — there it
is the quick path versus "Edit & Send" (which opens this editable modal),
not a duplicate of an adjacent send action.
Updated PendingClientRequestModal wiring, stories, and tests accordingly.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* feat(web): render pending sampling/elicitation requests (#1407)
Server-initiated sampling and elicitation requests never reached the v2
web UI: the InspectorClient queued them and returned a Promise that only
resolved on a user response, but nothing subscribed to the pending-change
events or rendered the (already-built) request components. A tool that
triggered one spun the Execute button forever.
Wire the queues to the UI:
- Add usePendingClientRequests() (core/react) subscribing to
pendingSamplesChange / pendingElicitationsChange and returning the live
arrays. Expose getPendingSamples() / getPendingElicitations() on
InspectorClientProtocol (and the test fake) so hooks can read them.
- Add PendingClientRequestModal, an App-level modal that surfaces one
queued request at a time (sampling-first) via the existing
SamplingRequestPanel / ElicitationFormPanel / ElicitationUrlPanel. It is
non-dismissable so the blocked call only resolves via an explicit action.
- Wire it in App.tsx: responding/rejecting resolves the client's handler
Promise, which unblocks the originating call and clears the spinner.
Also fold in two issues surfaced while verifying:
- SchemaForm rendered an `array` + `items.enum` (multi-select enum) as a
JSON textarea because only `items.anyOf` had a branch; add a MultiSelect
branch with enumNames label support.
- ToolsScreen's result lives in App and outlived the screen's local
selection (reset on tab-switch unmount), leaving a result with no
selected tool. Clear the result on unmount for a clean slate on return.
Prompts/Resources gate their preview on selection, so they are unaffected.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(elicitation): support explicit decline; honest queue label; review polish
Address @claude review on #1411:
- Add an explicit "Decline" action to ElicitationFormPanel so the spec's
decline (refusal) is distinguishable from cancel (dismissal); the JSDoc
claimed accept/decline/cancel but only accept/cancel were wired. Wire the
modal body to emit { action: "decline" }.
- Replace the misleading "1 of N" queue label (the leading 1 never changed
since the modal always shows the head) with an "N pending" hint, hidden when
nothing else is queued.
- Make the dead useMemo honest: derive the head request inside the memo from
the source arrays so it actually caches (the inline activeElicitation had a
fresh identity every render).
- Document the URL elicitation accept-on-open semantic with a comment pointing
at the follow-up (#1415).
- Add an App-level round-trip test driving pendingSamplesChange end-to-end
(modal opens, respond() fires, empty event closes it).
Follow-ups filed: #1415 (URL two-step completion flow), #1416 (form required-
field submit gate + double-submit guard).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(elicitation): include untouched schema defaults in submitted content
The schema form displays a field's default via resolveValue(), but onChange
only writes a field into `values` once the user edits it. So an elicitation
submitted with default-only fields left untouched dropped them entirely —
v2 sent just the manually-edited fields while v1 sent defaults too (reported
with the everything server: firstLine/integer/number/enum defaults missing).
Add collectSchemaDefaults() to jsonUtils (recurses nested objects, omits
fields with no default) and seed ElicitationFormModalBody's values state with
it via a lazy initializer. The modal body is keyed by request id, so it
re-seeds per request; user edits still override seeded defaults via the
existing onChange merge.
Tests: collectSchemaDefaults unit tests (field types, nested, empty) in
jsonUtils.test; a modal test asserting an untouched-default form still submits
its defaults in content.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(forms): seed schema defaults for tool-call and app-launch forms too
Extend the elicitation defaults fix (collectSchemaDefaults) to the other two
SchemaForm consumers that own form state and submit it: ToolsScreen (tool
execute args) and AppsScreen (app launch args). Both reset formValues to {} on
selection, so default-only fields the user never edited were dropped from the
submitted args — same root cause as the elicitation modal.
Seed formValues from the selected tool/app inputSchema defaults on select.
User edits still override via the existing onFormChange merge.
(InlineElicitationRequest has no consumers wired up, so it's left as-is.)
Tests: ToolsScreen sends a tool's default on Execute without editing;
AppsScreen sends an app's default on Open App without editing.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* feat(elicitation): gate form submit on required fields; guard double-submit (#1416)
Fold the #1416 hardening into this PR:
- Gate the elicitation form's Submit button on required fields. Promote the
hasMissingRequiredFields helper out of AppDetailPanel into jsonUtils (shared)
and use it in ElicitationFormPanel so Submit is disabled until every required
field has a value.
- Guard against double-submit. Add an optional `busy` prop to the sampling,
elicitation-form, and elicitation-url panels that disables their responding
actions. PendingClientRequestModal's bodies use a new ref-guarded
useRespondOnce() hook: the first action dispatches and locks the panel; later
clicks no-op. This stops a fast double-click from calling respond()/reject()
twice (which throws and produced an unhandled rejection). Copy URL stays
enabled — it doesn't resolve the request.
Tests: hasMissingRequiredFields unit tests; ElicitationFormPanel submit-gate
and busy-lock tests; a modal double-click-resolves-once test.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(tools): cap detail/result panels at viewport and scroll internally
The Tools screen's detail and result columns sized to their content and bled
past the bottom of the viewport on long output (e.g. the env dump or a long
elicitation result). Cap each column at the screen's available height and let
its panel scroll internally instead.
- ToolsScreen: drop `align: flex-start` and wrap each column in a stretched
`ContentPane` (Flex column, capped by `mah` = viewport − header − xl*2). The
pane's definite height is what lets the card's inner ScrollArea know how far
to shrink — a bare `mah` on the card does not (the card sizes to content, so
the scroll region renders full-height and overflow:hidden just clips it,
unreachable). Mirrors the proven Prompts/Resources preview panes.
- ToolResultPanel: pinned header + inner ScrollArea (flex 0 1 auto, mih 0).
- ToolDetailPanel: pinned title/annotations header, scrolling body
(description + form + progress), pinned Execute footer.
Audited the other screens: Prompts/Resources already use this pattern,
ServerList and the four list panels (Logging/Network/History/Tasks) already cap
via ScrollArea.Autosize. Only AppsScreen's app-input form had the same gap —
fixed it the same way: AppDetailPanel now scrolls internally and the card uses
variant="preview" so the running app's iframe and a long form both stay within
the viewport.
Verified in-browser against the everything server: the get-env result now
stops at the viewport bottom with margin and scrolls within the card
(clientHeight 502 vs scrollHeight 1931), header pinned.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* test(remote): use sync pino destinations in logging tests to fix teardown race
CI flaked with an uncaught `ENOENT: ... /tmp/inspector-log-unknown-level-*/app.log`
that failed an unrelated later test. The remote-logging integration tests create
`pino.destination(logFile)` loggers (async sonic-boom streams) and rmSync the temp
dir in finally/afterEach without closing the stream — a buffered background flush
then fires after the dir is gone and throws an uncaught error, which Vitest counts
as a run failure even though all tests pass.
Make those destinations `sync: true` so the write lands during the request instead
of on a later flush, removing the race. Test-only; unrelated to this PR's feature
work but it was blocking the PR's CI.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* Port resource preview UX improvements to PromptsScreen (#1328)
Brings the prompt-fetching flow up to parity with the resource preview
work from #1326:
- Cap the argument-form pane at maw=40% so a bare input + button doesn't
stretch across wide displays.
- Auto-fetch no-argument prompts the moment they're picked from the
sidebar (handleSelectPrompt routes them straight to onGetPrompt({})),
and hide the form once the user clicks Get Prompt — the result panel
takes the same fixed-height column the resource preview uses.
- Apply the PreviewCard variant=preview pattern: card sizes to content
but caps at viewport, PromptMessagesDisplay pins its header (flex 0 0
auto) and lets the inner ScrollArea (flex 0 1 auto, mih 0) absorb
overflow.
- Tag getPromptState with the prompt name in App.tsx so the screen can
ignore a stale result whose name no longer matches the selection.
- MessageBubble now routes each content block through ContentViewer
(markdown for text via mimeType="text/markdown", image/audio/resource
via existing ContentViewer branches). Non-renderable block types
(tool_use, tool_result) are filtered out; the role-label header keeps
the bubble visible regardless.
- PromptArgumentsForm gains onCompleteArgument + completionsSupported;
when both are set, each input becomes Mantine Autocomplete with the
same per-arg AbortController + per-arg debounce timer pattern as
ResourceTemplatePanel. PromptsScreen + InspectorView + App.tsx wire
the callback to inspectorClient.getCompletions with a
ref/prompt envelope.
Closes#1328.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Add close (X) buttons to ResourcePreviewPanel and PromptMessagesDisplay
A top-left CloseButton dismisses the preview panel. The host screen
decides what to fall back to:
- ResourcesScreen remembers the originating template URI when the user
reads from a template form (originatingTemplateUri); closing the
preview restores the template form. Plain-resource reads (sidebar
selection) just empty the selection and return to the empty state.
Picking a different template / resource from the sidebar clears the
back-trail.
- PromptsScreen flips submittedFor back to undefined when the closed
prompt has arguments — the argument form re-renders with the
user's values preserved so they can edit and re-submit. No-arg
prompts have nothing to fall back to, so the selection is dropped
and the empty state appears.
The X button is hidden when the host omits onClose, so callers that
don't want a dismiss control keep their existing rendering.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Add close button to pending and error preview states
The OK-state preview already had its X button (inside the panel
component itself). Pending and error states were inline cards in
renderReadState / renderPreview with no way to dismiss them, so a
user who submitted bad input to a resource template or prompt was
stuck staring at the error until they picked a different sidebar
item. Adds a top-left CloseButton row to both states on both screens,
wired to the same handleClosePreview handler — so the template form
or argument form re-appears on close just like it does from the OK
state.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Fire prompt completions on focus and send every sibling in context
Two fixes to the PromptArgumentsForm autocomplete:
- Focusing an argument input now fires completion/complete immediately
(handleFocus) — the dropdown is populated as soon as the user clicks
in, not only after they start typing. Any in-flight debounce timer
for the same arg is cancelled so a stale keystroke request can't
overwrite the fresh focus response.
- The completion context now includes every declared prompt argument
(with "" for ones the user hasn't typed into yet), minus the one
being completed. Previously the context only carried args the user
had touched, so servers that disambiguate based on co-arguments
couldn't see the full picture on the first keystroke.
Tests cover both: a focus-only path that fires before any keystroke,
and a typing path that asserts the empty sibling is sent through.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Fire resource-template completions on focus
Mirrors the prompt-side change: focusing a template variable input
now fires completion/complete immediately so the dropdown populates
the moment the user clicks in, rather than waiting for the first
keystroke + 300ms debounce. Any pending debounce timer for the same
variable is cancelled first so a stale keystroke response can't
overwrite the focus response.
The sibling-context coverage was already correct here — `variables`
is seeded with empty strings for every declared template variable at
mount and on template switch, so the context payload always carries
the full variable set minus the one being completed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Style Autocomplete dropdowns to match the rest of the app
Two fixes so the completion dropdowns on prompt-argument and
resource-template inputs look like every other dropdown in the app:
- App.css: the dark-mode dropdown / option-hover rules used to target
.mantine-Select-* only, so the Autocomplete dropdowns shipped with
Mantine's default surface color and a different hover background.
Re-scoped to .mantine-Combobox-* so every Combobox-built input
(Select, Autocomplete, MultiSelect, …) inherits the same styling.
- theme/Autocomplete.ts: new theme module setting `radius: "md"` so
Autocomplete matches the default Select / TextInput corner radius.
Wired through theme/index.ts and theme/theme.ts.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Fix dropdown styling — Select and Autocomplete need separate selectors
The previous commit re-scoped the dark-mode dropdown rules from
`.mantine-Select-*` to `.mantine-Combobox-*` on the assumption that
both Select and Autocomplete share a Combobox class on the dropdown
root. They don't — Mantine's Combobox factory takes
`__staticSelector` from the parent component, so Select emits
`mantine-Select-dropdown` and Autocomplete emits
`mantine-Autocomplete-dropdown` with no shared `Combobox` class on
that element. The `.mantine-Combobox-*` selector matched nothing,
so the TaskControls filter (and every other Select) lost its gray
surface and reverted to Mantine's default brown-ish dark background.
List both selectors so Select dropdowns keep their styling and
Autocomplete dropdowns pick it up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Address review feedback: canSubmit, fire-time context, re-click guard
- PromptArgumentsForm: add a canSubmit guard that disables Get Prompt
until every required argument has a value, matching the resource
template form's symmetry. Optional args may stay blank.
- Both forms: capture sibling context inside the debounce callback,
not at schedule time. Hold the latest argumentValues / variables
in a ref + sync via useEffect, and call buildContext() at fire
time. Without this, typing in arg A then arg B within the 300ms
window would ship A's request with B's pre-keystroke value.
- PromptsScreen.handleSelectPrompt: early-return when the user
re-clicks the already-selected prompt — sidebar is for navigation,
✕ is for dismiss. Previously a re-click wiped form values and
re-fired the auto-fetch for no-arg prompts.
- MessageBubble: expand the comment on effectiveMimeForBlock to flag
the unconditional markdown promotion as a known asymmetry with
the resource side (which only promotes when the server signals it),
pending a per-block mimeType in the spec.
- New tests: canSubmit disabled / enabled transitions, fire-time
context capture across siblings, abort-path verification (a stale
in-flight response must not overwrite the fresh one), and the
no-op re-click guard on PromptsScreen.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Address follow-up review nits: ghost suggestions, dead previewActive branch
- Clear `completions[name]` at the top of handleChange in both
PromptArgumentsForm and ResourceTemplatePanel so the dropdown
doesn't show stale options from the previous prefix during the
300ms debounce + network window.
- Simplify previewActive in PromptsScreen to drop the unreachable
`!getPromptState?.promptName` fallback. App.tsx tags every prompt
state transition with `promptName`, so the fallback was dead code
that obscured the actual runtime invariant.
- Add a focused test for each form that asserts stale dropdown
options vanish the instant a new keystroke arrives.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245)
Establishes the unit-test runtime AGENTS.md mandates: a vitest "unit"
project alongside the existing storybook project, RTL + jest-dom +
happy-dom, a Mantine-aware render helper, and a 90%-line per-file
coverage gate enforced by CI. Adds 66 test files covering all 62
components under elements/groups/screens/views, plus core/mcp and
clients/web/src/utils. Total: 577 tests, 98.7% line coverage globally.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* test(coverage): address PR #1269 review feedback
- AGENTS.md: correct coverage gate description (lines ≥ 90, statements ≥ 85,
functions ≥ 80, branches ≥ 50) with rationale for the relaxed branch
threshold
- InspectorView.test.tsx: document what the Math.random() mock values
(0.1 / 0.99) control vs. STUB_SUCCESS_RATE in InspectorView.tsx
- vite.config.ts / tsconfig.test.json: drop unused `globals: true` and the
`vitest/globals` type now that every test file imports describe/it/expect/vi
explicitly; manual `afterEach(cleanup)` in setup.ts remains required because
testing-library auto-cleanup relies on globalThis.afterEach
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Tighten ElicitationFormPanel story fixtures from
satisfies ElicitRequest["params"] to satisfies ElicitRequestFormParams
- Show model preferences container when modelPreferences exists even
without hints, so costPriority/speedPriority/intelligencePriority
are visible independently
- Fix stop reason ordering to match SDK enum: endTurn, stopSequence,
maxTokens
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Filter undefined model hint names in SamplingRequestPanel, matching
the pattern already used in InlineSamplingRequest
- Narrow ElicitationFormPanel to accept ElicitRequestFormParams instead
of the full ElicitRequest['params'] union; removes the 'requestedSchema
in request' guard and renders the schema unconditionally
- Add isUrlMode type guard in InlineElicitationRequest to properly
narrow the URL variant; eliminates the 'as { url: string }' cast
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace ad hoc local types with SDK schema types across the Sampling
and Elicitation group components.
- SamplingRequestPanel: accept `request: CreateMessageRequestParams` +
`draftResult: CreateMessageResult` instead of 16 flat props; derive
messages, model preferences, and parameters from the request object;
drop `tools`/`toolChoice` (not in MCP 2025-11-25 CreateMessageRequest)
- InlineSamplingRequest: accept `request: CreateMessageRequestParams`;
derive messagePreview and modelHints from the request
- ElicitationFormPanel: accept `request: ElicitRequest['params']` +
`serverName`; pass requestedSchema directly to SchemaForm
- ElicitationUrlPanel: rename `elicitationId` to `requestId`
- InlineElicitationRequest: accept `request: ElicitRequest['params']`;
discriminate form vs URL mode on request shape instead of `mode` prop
- PendingClientRequests: unchanged (children-based wrapper)
- Delete local `SamplingTool` type
- Update all stories with real SDK type fixtures
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
cliffhall