* feat(web): tool progress toasts + persist tool selection/result across navigation (#1414)
Surface incoming notifications/progress as toasts so the user can watch a
long-running tool's progress without leaving the tool view — the v2 replacement
for v1's always-visible "Server Notifications" shelf. Toasts are keyed by
progress stream and updated (not stacked) per tick so a chatty server updates
one toast rather than flooding the corner. Progress notifications still land in
the History tab via the existing transport-level tracking.
Companion change: lift the selected tool and its form values into App.tsx
alongside the already-lifted toolCallState, make ToolsScreen controlled, and
drop the clear-on-unmount effect. Leaving the Tools tab and returning now
preserves selection, inputs, and result. All three reset together on
disconnect via resetSessionScopedUiState, preserving the #1368/#1394 behavior.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* feat(web): persist per-screen selection/search/filter across navigation (#1417)
Lift every screen's selection, form, search, and filter state out of the
screen components into session-scoped state owned by App, passed down as
controlled props. The screens unmount on tab switch, so this is what keeps
the user's context in place when they navigate away and back within a live
session. State is cleared only on disconnect (resetSessionScopedUiState) or
an explicit user action — never on plain navigation.
Lifted per screen:
- Tools: sidebar search (selection/form/result were lifted in #1414)
- Prompts: selected prompt, argument values, submitted marker, search
- Resources: selected resource/template URI, originating-template marker,
search, accordion open-sections
- Apps: selected app, form values, search (running/maximized stay local —
they're tied to the live iframe/bridge that is torn down on unmount)
- Tasks: search + status filter
- Logs: filter text + visible-level set
- History: search + method filter
- Network: filter text + visible-category set
The four sidebar *Controls (Tool/Prompt/App/Resource) become controlled for
search; ResourceControls also controls accordion open-sections. Level/category
default maps move to logLevels.ts / fetchCategories.ts so the screen files
keep a single component export.
Pagination already persists (it lives in the App-level Paged*State managers),
so no work was needed there.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* feat(web): persist list scroll position across navigation + reset tests (#1417)
Add useScrollMemory: a module-keyed hook that remembers a Mantine ScrollArea's
offset across unmount/remount (the screens unmount on tab switch). Scroll lives
in a module-scope map rather than threaded App state — it's ephemeral DOM state,
and threading ~16 more props would balloon the surface for no benefit. App calls
clearScrollMemory() in resetSessionScopedUiState so offsets clear on disconnect
alongside the lifted selection/filter state.
Wired into the four main list panels (Logs, History, Network, Tasks) and the
Tools/Prompts/Apps sidebar lists. Pagination already persists via the App-level
Paged*State managers.
Tests: useScrollMemory unit test (save/restore, key isolation, clear), and the
App disconnect test now also exercises representative lifted UI state (tool
search, prompt selection, log filter) clearing on disconnect.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* refactor(web): collapse per-screen lifted state into one {screen}Ui object
Replace the ~46 individual selection/search/filter props threaded App →
InspectorView → screen with one `{screen}Ui` object + one `on{Screen}UiChange`
setter per screen (8 pairs). Each screen reads its fields from `ui` and updates
via `onUiChange({ ...ui, field })`; the in-flight result panels
(toolCallState / getPromptState / readResourceState) stay separate since
they're written by App's async action handlers, not the screens.
The `*UiState` interfaces live with their screens; the empty-state defaults are
gathered in screenUiState.ts so the screen files keep a single component export
(react-refresh), mirroring logLevels.ts / fetchCategories.ts.
Trims InspectorView's prop surface substantially and keeps the persistence
behavior identical. Tests/stories collapse their stateful wrappers to a single
ui object; added Tools/Tasks/History interaction tests to keep per-file
coverage above the gate.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* fix(web): dismiss visible progress toasts on client teardown (#1414 review)
The progressNotification effect cleanup cleared its id-tracking set but left
on-screen "Tool progress" toasts to auto-close up to 5s later — they could
linger into the next session, and the lingering toast's onClose could delete an
id from the new session's set and trigger a duplicate-id re-show. Hide each
tracked toast in cleanup so both gaps close. Addresses @claude review note #2.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* feat(web): clear the tool result when a different tool is selected
The Tools result panel renders `toolCallState` regardless of which tool is
selected, so selecting a new tool used to leave the previous tool's result
showing beneath it. Route tools UI changes through an App handler that drops
`toolCallState` whenever `selectedToolName` changes; search/form edits keep the
selection (and the result) intact. Tests cover both the clear-on-switch and
keep-on-search paths.
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(sort): add SortToggle for Logs, History, and Network (#1371)
Introduces a reusable SortToggle element and wires it into the Logs,
History, and Network screens so users can flip chronological order.
Selection is persisted per-screen to localStorage under the
inspector.sortDirection.* namespace, with invalid stored values falling
back to the newest-first default.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(logs): move auto-scroll checkbox left of the sort selector
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* refactor(logs): remove auto-scroll checkbox; ListToggle left of SortToggle
- Drops the Logs auto-scroll checkbox and its plumbing through
LoggingScreen / InspectorView.
- Moves the ListToggle to the left of the SortToggle on the History
and Network panel toolbars.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* refactor(sort): address review on #1372
- Hydrate sort direction synchronously (getInitialValueInEffect: false)
to remove the one-frame newest-first flicker on first paint.
- Drop the redundant `[...matched].sort()` copy across the three panels;
`.filter()` already returns a fresh array.
- Document why serializeSortDirection bypasses Mantine's default JSON
stringify (raw enum value in storage).
- MemoryStorage.getItem: collapse `has` + `!` to `?? null`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(history): default the request list to collapsed for parity with Network
The History list opened expanded while Network opened collapsed; align
History with Network so both panels start in the same compact view.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(history,network): persist list compact state to localStorage
Lifts the per-panel `compact` flag out of HistoryListPanel /
NetworkStreamPanel and into InspectorView's localStorage hooks, mirroring
the sort-direction shape:
inspector.listCompact.history
inspector.listCompact.network
Defaults to collapsed (compact=true) on both, with a corrupted-value
deserializer that clamps unknown strings back to the default.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(servers,resources): persist ListToggle state to localStorage
Lifts the per-screen compact preference out of ServerListScreen and
ResourceControls into InspectorView's localStorage hooks, matching the
History/Network shape:
inspector.listCompact.servers
inspector.listCompact.resources
Servers and Resources both default to expanded (compact=false). For
ResourceControls the displayed compact is still derived from openSections
(so per-section accordion clicks still work locally), and only explicit
ListToggle clicks update the persisted preference — the handler computes
the next compact value from the click outcome rather than blindly
flipping, so a half-open accordion still records the right post-state.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* refactor(sort-toggle): switch to icon button matching ListToggle style
Replaces the Mantine Select with a subtle Button (or ActionIcon for the
subtle variant), using TbSortDescending2 for newest-first and
TbSortAscending2 for oldest-first. Clicking the button flips between the
two values.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* refactor(sort-toggle): restore Select with sort icon in rightSection
Reverts SortToggle to a Mantine Select with simplified labels ("Newest
First" / "Oldest First") and the corresponding TbSortDescending2 /
TbSortAscending2 icon in the rightSection, replacing the default chevron.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(sort-toggle): swap icons so they match label direction
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(sort-toggle): use down arrow for newest, up arrow for oldest
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* refactor(inspector-view): extract useSortDirection / useListCompact
Collapses seven near-identical useLocalStorage call sites in
InspectorView into two scoped helpers. Each helper carries the shared
namespace, serialize/deserialize adapters, and getInitialValueInEffect:
false; the call sites now read as "this screen has sort persisted to
this scope" rather than re-stating the storage shape every time.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(sort-toggle): apply prettier formatting
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (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>
* Expose live resource subscriptions via a hook (#1325)
Add ResourceSubscriptionsState that mirrors InspectorClient's subscribed
URIs as InspectorResourceSubscription[], resolving each URI against the
managed resources list (so the subscription tile shows server-supplied
name/title) and stamping lastUpdated on notifications/resources/updated.
Pair it with useResourceSubscriptions and wire App.tsx so the Resources
screen reflects subscribe/unsubscribe actions in real time.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Address review notes on resourceSubscriptionsState
- Soften the onResourceUpdated comment: the client's dispatch is already
guarded by subscribedResources.has(uri), so the re-check is true
defense-in-depth rather than guarding a known hazard.
- Use this.getSubscriptions() in the statusChange handler so every emit
goes through the defensive-copy path.
- Document the deliberate fallback to a synthetic Resource when a
previously-listed resource is removed from the managed list while
the user is still subscribed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Reflect subscribed state in preview + compact subscribed tile labels
- Wire `isSubscribed` on the ReadResourceState passed to ResourcesScreen
by deriving it from the live subscriptions list in App.tsx. The
ResourcePreviewPanel's SubscribeButton already flips its label to
"Unsubscribe" when subscribed; without this derivation isSubscribed
was always false and the button looked stuck on "Subscribe".
- In ResourceSubscribedItem, display only the last URI path segment
(truncated with ellipsis if it still overflows) and surface the full
URI via a hover tooltip. Keeps the Subscriptions pleat readable when
resources have long path-style URIs.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Auto-read resource on sidebar click
Clicking a resource in the URIs accordion now triggers onReadResource
in addition to setting the selection, so the preview panel jumps
straight to the pending → ok render path. Removes the unreachable
"Click to read this resource" placeholder, since the loader / preview /
error states always cover the rendered output for a selected resource.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Render markdown resources via react-markdown + fix preview overflow
- Add react-markdown / remark-gfm dependencies.
- ContentViewer accepts an optional mimeType prop; when it matches
text/markdown (or text/x-markdown), text blocks render via
react-markdown wrapped in a `.markdown-content` container. Non-markdown
text now uses the existing Code "wrapping" variant so long lines stay
inside the panel.
- ResourcePreviewPanel infers `text/markdown` from a `.md` / `.markdown`
URI suffix when the server didn't supply a mimeType, and threads the
effective mime through to ContentViewer per content item.
- ResourcesScreen flex children get miw=0 so a long unwrappable line in
the resource body can no longer push the preview past the viewport's
right edge.
- App.css gains a `.markdown-content` ruleset constraining nested pre,
table, code, and img elements to the container's width.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Contain resource preview: sticky header/footer, scrollable body
Restructure ResourcePreviewPanel into a fixed-height column with the
resource title + URI pinned to the top and the timestamp / annotations /
subscribe-refresh actions pinned to the bottom. The content viewer area
in the middle now owns its own ScrollArea, so a long markdown body
scrolls within the panel instead of pushing the subscribe button below
the viewport.
In ResourcesScreen, the selectedResource branch (and the template
branch's right pane) now hosts the panel inside a PreviewPane Flex
column with the screen's max-height, and renderReadState wraps in a
FillDetailCard sized to fill that column. The legacy outer
ScrollArea.Autosize is removed for these panes since scrolling is
internal now.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Auto-hide template after read; size preview to content with cap
- After the user clicks Read Resource on the template form,
handleReadResource now clears selectedTemplateUri so the screen
swaps from the template form to the resource preview. Previously
both panels stayed mounted side-by-side.
- The preview no longer hard-fills the viewport. The Card uses a new
"preview" theme variant (overflow: hidden) and is content-sized,
capped at SCROLL_MAX_HEIGHT. ResourcePreviewPanel's flex column
marks the header / meta / footer rows as `flex: 0 0 auto` and the
ContentScroll as `flex: 0 1 auto` with `mih: 0`, so:
- short content → card hugs it, footer sits right under the body
- long content → card caps at viewport, ContentScroll shrinks
and scrolls internally, footer stays pinned at the cap
- ScrollArea / Group imports in ResourcesScreen pruned to match the
simpler single-pane layout.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Cap template form panel at 40% width
A bare text input + Read Resource button stretched across the whole
main content area looks awkward on wide displays. Apply maw=40% to
the PreviewPane in the template branch so the form keeps a reasonable
form-field width regardless of viewport.
The preview branch is unaffected — resource bodies still get the full
main area for content.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Live completion/complete suggestions on resource template inputs
Wires the server's `completions` capability through to the resource
template form so each variable's input becomes an Autocomplete that
fires `completion/complete` (debounced, 300ms) on every keystroke and
surfaces the returned values as a dropdown — mirroring v1's behavior.
- core/mcp/inspectorClientProtocol.ts: surface getCompletions on the
protocol so non-runtime callers (state managers, hooks, tests) can
depend on it. FakeInspectorClient gains a vi.fn-backed stub.
- ResourceTemplatePanel: accepts onCompleteArgument + completionsSupported.
When both are present it renders Mantine Autocomplete instead of
TextInput, debounces keystrokes via per-arg timers, aborts in-flight
requests on the next keystroke, and disables client-side filtering
(the server already filtered for the typed prefix).
- ResourcesScreen / InspectorView: thread the props through; the
screen-level callback re-injects the active template's URI as the
`ref: "ref/resource"` so the panel-level callback stays ref-free.
- App.tsx: wires onCompleteArgument to inspectorClient.getCompletions
and derives completionsSupported from `capabilities?.completions`.
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>
The ResourceSelected story passed both sampleResources and
sampleSubscriptions, each of which renders 'config.json' as text. The
play helper's canvas.findByText('config.json') matched two nodes and
rejected.
Extends clickByText to accept an optional regionName regex; ResourceSelected
now scopes the click to within the 'URIs' Accordion panel by aria-region
name, so the subscriptions panel's matching label is filtered out without
changing what the story demonstrates.
Full storybook suite now green (273/273), unblocking #1251.
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- ToolsScreen.fixtures.ts: replace empty `{}` schemas in query_database
params and post_request body with explicit `type` for consistency
- ToolControls WithSearch story: add play function that types "git" so
the story actually demonstrates filtering
- ResourcesScreen stories: comment expandUserProfileTemplate to document
the userId/readUserProfileState.uri coupling
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Selecting a resource now clears the active template selection (and vice
versa), so the right-hand panel reflects what the user just clicked.
The template's Read Resource button still only sets the resource URI,
preserving the template-with-preview layout for the read flow.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ToolsScreen, PromptsScreen, and ResourcesScreen each tracked the user's
current selection via `selectedXxxName` / `onSelectXxx` props, hoisting
screen-local UI state into whatever rendered them. InspectorView never
threaded those callbacks anywhere, so clicks in the controls panel did
not display the matching detail panel — the detail panel only rendered
if a parent fed selection back in.
Move selection into `useState` inside each screen and drop the
`selectedXxxName` / `onSelectXxx` props. MCP-derived data (`callState`,
`getPromptState`, `readState`) keeps flowing in from `InspectorView` as
props. ResourcesScreen wraps `onReadResource` so a template-expanded URI
becomes the selected resource for preview rendering.
Update each screen's stories to drop the deleted props. Stories that
need a pre-selected item use a `play` function to click it — no
component coupling to Storybook.
Add Phase 4.3 to the interfaces plan describing the rule.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Fix template-expanded URIs not rendering: construct synthetic Resource
from readState.uri when the URI is absent from the resources list
- Fix non-image blob content rendering raw base64: show placeholder
message; also handle audio blobs properly
- Hide mimeType display when multiple content items to avoid confusion
- Rename ResourceControls selectedTemplate → selectedTemplateUri for
consistency with selectedUri and selectedResourceUri
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace ad hoc local types with MCP SDK schema types across the Resources
group components and ResourcesScreen, per the v2 UX interfaces plan.
- ResourceListItem: accept `resource: Resource | ResourceTemplate` instead
of flat `name`/`uri`; render `title ?? name`; delete local
`ResourceAnnotations` type
- ResourceControls: accept `Resource[]`, `ResourceTemplate[]`,
`InspectorResourceSubscription[]` + `selectedUri`/`selectedTemplate`
instead of `ResourceItem[]`/`TemplateListItem[]`/`SubscriptionItem[]`;
no-op on re-selecting
- ResourcePreviewPanel: accept `resource: Resource` +
`contents: (TextResourceContents | BlobResourceContents)[]` instead of
flat `content: string`; use SDK `Annotations` (audience as Role[]);
`lastUpdated` as `Date` not `string`
- ResourceTemplatePanel: accept `template: ResourceTemplate` instead of
flat props; use SDK `Annotations`
- ResourceSubscribedItem: accept `subscription: InspectorResourceSubscription`
instead of flat `name`/`lastUpdated`; `lastUpdated` as `Date`
- ResourcesScreen: accept `Resource[]`, `ResourceTemplate[]`,
`InspectorResourceSubscription[]` + `selectedResourceUri`/
`selectedTemplateUri` + `ReadResourceState`; derive selections via
`find()`; add loading/error states
- Delete local `ResourceItem`, `TemplateListItem`, `SubscriptionItem`,
`SelectedResource`, `SelectedTemplate`, `ResourceAnnotations` types
- Update all stories with real SDK fixtures
- Update ConnectedView ResourcesActive story
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replaces inline style and opacity prop on ServerCard with a new
'disabled' variant on the Card theme, per AGENTS.md rules against
inline styles on components. Also picks up prettier formatting on
ResourcesScreen.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ResourceControls now manages its own search state internally and filters
all three accordion sections (URIs, Templates, Subscriptions) by name
and URI. Added ListToggle to expand/collapse all sections. Moved Export
JSON and Clear All buttons from HistoryControls sidebar to the
HistoryListPanel header for better proximity to the data they act on.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Place ListChangedIndicator on same line as section titles using Group with space-between in ToolControls, ResourceControls, and PromptControls
- Add ListChanged stories for ResourceControls and show indicators in ConnectedView stories
- Normalize ScreenLayout gap from "xl" to "md" across all screens for consistent spacing
- Rename ResultPanel to ToolResultPanel (component, interface, files, and stories)
- Replace Grid layout in ToolsScreen with equal-width flex children for detail and result panels
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Extract ResourceControls group component from ResourcesScreen:
title, search, list-changed indicator, and three-section accordion
(URIs, Templates, Subscriptions) with per-panel ScrollArea.Autosize
- Refactor ResourcesScreen to sidebar+panel Flex layout matching
HistoryScreen/LoggingScreen pattern (ScreenLayout, Sidebar, SidebarCard)
- Each accordion panel dynamically computes max height based on how many
sections are open, dividing available space evenly
- Accordion uses controlled state (value/onChange) to track open sections
- Sidebar card sizes to content naturally (compact when collapsed,
grows with open sections, capped by scroll areas)
- Right panel wrapped in ScrollArea.Autosize for long content
- Add AllSections story with 20 URIs, 7 templates, 8 subscriptions
- Add more templates and subscriptions to ConnectedView ResourcesActive
- Add ResourceControls stories (Default, WithSearch, Empty)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Rename ResourceTemplateInput to ResourceTemplatePanel with panel layout
(title header, URI with live variable preview, labeled inputs, Read Resource button)
- ResourceTemplatePanel manages its own variable state via useState;
single onReadResource(uri) callback returns fully resolved URI
- Extract ResourceSubscribedItem group component with name, timestamp, and
subtle Unsubscribe button
- Add hover state to listItem variant via theme classNames + App.css pseudo-selector
- Add Refresh button to ResourcePreviewPanel
- Refactor ResourcesScreen callbacks: onSelectUri, onSelectTemplate,
onReadResource, onSubscribeResource, onUnsubscribeResource replace
per-item onClick/onUnsubscribe props; screen wires callbacks to children
- Define data-only types (ResourceItem, TemplateListItem, SubscriptionItem,
SelectedResource, SelectedTemplate) separating data from callbacks
- Extract named .withProps() subcomponents (FooterRow, AnnotationGroup,
ActionGroup, Spacer) for AGENTS.md compliance
- Update all stories (ResourceTemplatePanel, ResourcesScreen, ConnectedView)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Cliff Hall