feat(web): list-changed handling — indicator, pull-on-demand default, and per-server auto-refresh opt-in (#1402) (#1443)

* feat(web): wire the listChanged indicator across all screens (#1402)

The per-screen list-changed indicator was hardcoded false in
InspectorView for Tools, Apps, Prompts, and Resources, so it could
never light up. Source it from the managed-state layer instead.

Each ManagedXState now tracks a listChanged flag: set true when its
*/list_changed notification arrives (the existing auto-refresh leaves
it set), exposed via getListChanged()/a listChangedChange event, and
cleared by clearListChanged() or on disconnect. The useManagedX hooks
surface the flag and clear it on a user-initiated refresh (the
indicator's Refresh button = acknowledge). App threads the three flags
to InspectorView, which maps them to the screens — Apps shares the
tools flag since apps are a filtered view of tools.

Tests cover set/clear/disconnect at the state-manager layer, the hook
subscription + refresh-clears behavior, and the InspectorView routing
(including Apps sharing the tools flag and no cross-wiring between
screens).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(core): close clear-after-await race in managed-list refresh (#1402 review)

The useManagedX refresh() callbacks cleared the listChanged flag AFTER
awaiting the fetch. If a */list_changed arrived mid-fetch, the state
re-set the flag (and auto-refreshed), then the trailing clear wiped that
genuinely-new signal. Clear BEFORE the await instead: the user's refresh
acknowledges only the change in hand, and a mid-fetch change re-sets the
flag and survives. Adds a race regression test on the tools hook.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): drop duplicate Refresh on the Apps screen (#1402)

AppControls uniquely had a standalone toolbar Refresh button AND the
ListChangedIndicator on a separate row, so once the indicator could
actually appear (this PR), the Apps screen showed two Refresh buttons.
Match the other three controls (Tools/Prompts/Resources): the indicator
is the single header-right refresh affordance. Updates AppControls and
AppsScreen tests to assert exactly one Refresh (and none when the list
hasn't changed).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(core): stop auto-invoking */list on list_changed; user pulls via Refresh (#1402)

With auto-refresh on, the list was already current by the time the
list-changed indicator appeared, making its Refresh button moot. Now the
managed Tools/Prompts/Resources state managers only flag the change on
*/list_changed (they no longer auto-refresh); the list stays as-is until
the user clicks Refresh, which fetches the new list and clears the
indicator. The connect-time initial load is unchanged.

Resource templates (no own indicator, part of the Resources screen) also
stop auto-refreshing; onRefreshResources now refreshes both resources and
templates, since a single resources/list_changed covers both. Tasks are
left auto-refreshing — they have no list-changed indicator and need live
status updates.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs(core): correct ManagedResourceTemplatesState header comments (#1402 review)

The class no longer subscribes to resourceTemplatesListChanged; update
the stale file/class docstrings that still claimed it syncs on that
notification to reflect connect + statusChange only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(web): add per-server 'Auto Refresh on List Changed Notifications' option (#1402)

New Options section in ServerSettingsForm with a single checkbox. When
checked, the managed Tools/Prompts/Resources (and resource templates)
state auto-refreshes on */list_changed notifications; when unchecked
(default) the notification only lights the list-changed indicator and the
user pulls via Refresh.

Plumbing: new optional autoRefreshOnListChanged on InspectorServerSettings
and StoredMCPServer, round-tripped through serverList (lifted with a false
default, persisted only when true, added to the exhaustive field-key map);
surfaced from InspectorClient via a new getServerSettings() on the protocol;
the state managers read it live at notification time to decide auto-refresh
vs flag-only. Resource templates re-subscribe to their list_changed but only
auto-refresh when the option is on (they have no indicator of their own).

Tests cover the round-trip (true persists, false omitted), the form
section (render/checked/toggle), and each state manager's on/off branch.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(server): persist autoRefreshOnListChanged through validateSettings (#1402)

The PUT /api/servers write path runs settings through validateSettings,
which rebuilds the value from explicitly-named fields and silently drops
unknown keys — so autoRefreshOnListChanged never reached disk (the
serverList round-trip test passed because it calls
inspectorSettingsToStoredFields directly, bypassing this path). Validate
it as an optional boolean and include it in the built value; false is
omitted on disk by inspectorSettingsToStoredFields as before.

Adds integration tests over the real PUT path: true persists, false is
omitted, and a non-boolean is rejected (400).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(web): default the Server Settings modal to the Options section (#1402)

Open 'Options' instead of 'Custom Headers' when the Server Settings modal
first opens, so the new Auto Refresh toggle is the first thing surfaced.
Updates the modal default-expanded section, the modal test's initial-state
assertions, the three header tests (now expand 'Custom Headers' first since
it's no longer open by default), and the story defaults.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore: drop accidentally-committed Inspector history dump; gitignore the class

83076441 swept an exported Inspector message-history JSON (manual-testing
artifact at the repo root) into the tree via git add -A. Untrack it and
extend the existing repo-root debug-artifact .gitignore block (alongside
/*.png) to cover /inspector-history-*.json so these can't be re-added.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall 2026-06-08 12:58:21 -04:00 • committed by GitHub
commit b0a024269e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
36 changed files with 1109 additions and 93 deletions

6
.gitignore vendored
View file

@ -8,6 +8,8 @@ test-servers/build
.env
/.playwright-mcp/
# Local debugging screenshots dropped at the repo root (e.g. attached to
# Claude Code conversations). Should never be part of the source tree.
# Local debugging artifacts dropped at the repo root (e.g. attached to
# Claude Code conversations): screenshots and exported Inspector history
# dumps. Should never be part of the source tree.
/*.png
/inspector-history-*.json

View file

@ -183,7 +183,10 @@ vi.mock("@inspector/core/react/useManagedResources.js", () => ({
useManagedResources: vi.fn(() => ({ resources: [], refresh: vi.fn() })),
}));
vi.mock("@inspector/core/react/useManagedResourceTemplates.js", () => ({
useManagedResourceTemplates: vi.fn(() => ({ resourceTemplates: [] })),
useManagedResourceTemplates: vi.fn(() => ({
resourceTemplates: [],
refresh: vi.fn(),
})),
}));
vi.mock("@inspector/core/react/useManagedRequestorTasks.js", () => ({
useManagedRequestorTasks: vi.fn(() => ({

View file

@ -277,6 +277,7 @@ const EMPTY_SETTINGS: InspectorServerSettings = {
connectionTimeout: 0,
requestTimeout: 0,
taskTtl: DEFAULT_TASK_TTL_MS,
autoRefreshOnListChanged: false,
roots: [],
};
@ -602,22 +603,23 @@ function App() {
instructions,
protocolVersion,
} = useInspectorClient(inspectorClient);
const { tools, refresh: refreshTools } = useManagedTools(
inspectorClient,
managedToolsState,
);
const { prompts, refresh: refreshPrompts } = useManagedPrompts(
inspectorClient,
managedPromptsState,
);
const { resources, refresh: refreshResources } = useManagedResources(
inspectorClient,
managedResourcesState,
);
const { resourceTemplates } = useManagedResourceTemplates(
inspectorClient,
managedResourceTemplatesState,
);
const {
tools,
listChanged: toolsListChanged,
refresh: refreshTools,
} = useManagedTools(inspectorClient, managedToolsState);
const {
prompts,
listChanged: promptsListChanged,
refresh: refreshPrompts,
} = useManagedPrompts(inspectorClient, managedPromptsState);
const {
resources,
listChanged: resourcesListChanged,
refresh: refreshResources,
} = useManagedResources(inspectorClient, managedResourcesState);
const { resourceTemplates, refresh: refreshResourceTemplates } =
useManagedResourceTemplates(inspectorClient, managedResourceTemplatesState);
const {
tasks,
refresh: refreshTasks,
@ -1677,8 +1679,12 @@ function App() {
void refreshPrompts();
}, [refreshPrompts]);
const onRefreshResources = useCallback(() => {
// Refresh both lists shown on the Resources screen. A single
// `notifications/resources/list_changed` covers resources and templates,
// and neither auto-refreshes anymore, so the user's Refresh pulls both.
void refreshResources();
}, [refreshResources]);
void refreshResourceTemplates();
}, [refreshResources, refreshResourceTemplates]);
const onRefreshTasks = useCallback(() => {
// Surface list failures (e.g. the MAX_PAGES guard or a tasks/list error)
// instead of letting the rejected promise go unhandled.
@ -2095,6 +2101,9 @@ function App() {
prompts={prompts}
resources={resources}
resourceTemplates={resourceTemplates}
toolsListChanged={toolsListChanged}
promptsListChanged={promptsListChanged}
resourcesListChanged={resourcesListChanged}
subscriptions={subscriptions}
logs={logs}
tasks={tasks}

View file

@ -119,33 +119,28 @@ describe("AppControls", () => {
expect(onSelectApp).not.toHaveBeenCalled();
});
it("invokes onRefreshList when the toolbar Refresh button is clicked", async () => {
const user = userEvent.setup();
const onRefreshList = vi.fn();
renderWithMantine(
<AppControls {...baseProps} onRefreshList={onRefreshList} />,
);
await user.click(screen.getByRole("button", { name: "Refresh" }));
expect(onRefreshList).toHaveBeenCalledTimes(1);
});
it("does not show the list-changed indicator when listChanged is false", () => {
it("does not show the list-changed indicator (and no Refresh) when listChanged is false", () => {
renderWithMantine(<AppControls {...baseProps} />);
expect(screen.queryByText("List updated")).not.toBeInTheDocument();
// The indicator is the sole refresh affordance, so there's no standalone
// toolbar Refresh button to duplicate it.
expect(
screen.queryByRole("button", { name: "Refresh" }),
).not.toBeInTheDocument();
});
it("shows the list-changed indicator when listChanged is true", async () => {
it("shows a single Refresh via the list-changed indicator when listChanged is true", async () => {
const user = userEvent.setup();
const onRefreshList = vi.fn();
renderWithMantine(
<AppControls {...baseProps} listChanged onRefreshList={onRefreshList} />,
);
expect(screen.getByText("List updated")).toBeInTheDocument();
// Both the toolbar button and the list-changed indicator's button render
// as "Refresh"; either one should drive onRefreshList.
// Exactly one Refresh button — the indicator's — not a duplicate alongside
// a standalone toolbar button.
const refreshButtons = screen.getAllByRole("button", { name: "Refresh" });
expect(refreshButtons).toHaveLength(2);
await user.click(refreshButtons[1]);
expect(refreshButtons).toHaveLength(1);
await user.click(refreshButtons[0]);
expect(onRefreshList).toHaveBeenCalledTimes(1);
});
});

View file

@ -1,5 +1,4 @@
import {
Button,
Group,
ScrollArea,
Stack,
@ -27,11 +26,6 @@ export interface AppControlsProps {
const LIST_MAX_HEIGHT =
"calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 220px)";
const ToolbarButton = Button.withProps({
variant: "subtle",
size: "sm",
});
const EmptyState = Text.withProps({
c: "dimmed",
ta: "center",
@ -61,9 +55,8 @@ export function AppControls({
<Stack gap="sm">
<Group justify="space-between">
<Title order={4}>MCP Apps ({tools.length})</Title>
<ToolbarButton onClick={onRefreshList}>Refresh</ToolbarButton>
<ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
</Group>
<ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
<TextInput
placeholder="Search apps..."
value={searchText}

View file

@ -90,6 +90,12 @@ function InteractiveRender(args: ServerSettingsFormProps) {
settings: { ...args.settings, [field]: value },
});
}}
onAutoRefreshChange={(value) => {
args.onAutoRefreshChange(value);
updateArgs({
settings: { ...args.settings, autoRefreshOnListChanged: value },
});
}}
onOAuthChange={(oauth) => {
args.onOAuthChange(oauth);
updateArgs({
@ -110,7 +116,7 @@ const meta: Meta<typeof ServerSettingsForm> = {
component: ServerSettingsForm,
render: InteractiveRender,
args: {
expandedSections: ["headers"],
expandedSections: ["options"],
onExpandedSectionsChange: fn(),
onAddHeader: fn(),
onRemoveHeader: fn(),
@ -119,6 +125,7 @@ const meta: Meta<typeof ServerSettingsForm> = {
onRemoveMetadata: fn(),
onMetadataChange: fn(),
onTimeoutChange: fn(),
onAutoRefreshChange: fn(),
onOAuthChange: fn(),
},
};
@ -134,6 +141,7 @@ export const DefaultSettings: Story = {
export const WithHeaders: Story = {
args: {
expandedSections: ["headers"],
settings: {
...defaultSettings,
headers: [

View file

@ -45,6 +45,7 @@ const baseHandlers = {
onRemoveMetadata: vi.fn(),
onMetadataChange: vi.fn(),
onTimeoutChange: vi.fn(),
onAutoRefreshChange: vi.fn(),
onOAuthChange: vi.fn(),
onAddRoot: vi.fn(),
onRemoveRoot: vi.fn(),
@ -236,6 +237,54 @@ describe("ServerSettingsForm", () => {
expect(screen.getByLabelText(/Task TTL/)).toHaveValue("45000 ms");
});
it("renders the Options section with the Auto Refresh checkbox unchecked by default", () => {
renderWithMantine(
<ServerSettingsForm
{...baseHandlers}
settings={emptySettings}
expandedSections={["options"]}
/>,
);
const checkbox = screen.getByRole("checkbox", {
name: /Auto Refresh on List Changed Notifications/,
});
expect(checkbox).not.toBeChecked();
});
it("reflects autoRefreshOnListChanged=true as a checked box", () => {
renderWithMantine(
<ServerSettingsForm
{...baseHandlers}
settings={{ ...emptySettings, autoRefreshOnListChanged: true }}
expandedSections={["options"]}
/>,
);
expect(
screen.getByRole("checkbox", {
name: /Auto Refresh on List Changed Notifications/,
}),
).toBeChecked();
});
it("invokes onAutoRefreshChange when the Auto Refresh checkbox is toggled", async () => {
const user = userEvent.setup();
const onAutoRefreshChange = vi.fn();
renderWithMantine(
<ServerSettingsForm
{...baseHandlers}
onAutoRefreshChange={onAutoRefreshChange}
settings={emptySettings}
expandedSections={["options"]}
/>,
);
await user.click(
screen.getByRole("checkbox", {
name: /Auto Refresh on List Changed Notifications/,
}),
);
expect(onAutoRefreshChange).toHaveBeenCalledWith(true);
});
it("invokes onOAuthChange when typing in client id", async () => {
const user = userEvent.setup();
const onOAuthChange = vi.fn();

View file

@ -2,6 +2,7 @@ import {
Accordion,
ActionIcon,
Button,
Checkbox,
Group,
NumberInput,
Stack,
@ -15,6 +16,7 @@ import type {
import type { Root } from "@modelcontextprotocol/sdk/types.js";
export type ServerSettingsSection =
| "options"
| "headers"
| "metadata"
| "timeouts"
@ -35,6 +37,7 @@ export interface ServerSettingsFormProps {
field: "connectionTimeout" | "requestTimeout" | "taskTtl",
value: number,
) => void;
onAutoRefreshChange: (value: boolean) => void;
onOAuthChange: (oauth: OAuthSettings) => void;
onAddRoot: () => void;
onRemoveRoot: (index: number) => void;
@ -143,6 +146,7 @@ export function ServerSettingsForm({
onRemoveMetadata,
onMetadataChange,
onTimeoutChange,
onAutoRefreshChange,
onOAuthChange,
onAddRoot,
onRemoveRoot,
@ -173,6 +177,20 @@ export function ServerSettingsForm({
}
variant="separated"
>
<Accordion.Item value="options">
<Accordion.Control>Options</Accordion.Control>
<Accordion.Panel>
<Stack gap="md">
<Checkbox
label="Auto Refresh on List Changed Notifications"
description="When checked, tool/prompt/resource lists refresh automatically when the server sends a */list_changed notification. When unchecked, the list-changed indicator appears and you refresh on demand."
checked={settings.autoRefreshOnListChanged ?? false}
onChange={(e) => onAutoRefreshChange(e.currentTarget.checked)}
/>
</Stack>
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="headers">
<Accordion.Control>Custom Headers</Accordion.Control>
<Accordion.Panel>

View file

@ -71,7 +71,7 @@ describe("ServerSettingsModal", () => {
expect(onClose).toHaveBeenCalled();
});
it("calls onSettingsChange when adding a header", async () => {
it("calls onSettingsChange when adding a header after expanding the section", async () => {
const user = userEvent.setup();
const onSettingsChange = vi.fn();
renderWithMantine(
@ -82,6 +82,7 @@ describe("ServerSettingsModal", () => {
onSettingsChange={onSettingsChange}
/>,
);
await user.click(screen.getByRole("button", { name: "Custom Headers" }));
await user.click(screen.getByRole("button", { name: "+ Add Header" }));
expect(onSettingsChange).toHaveBeenCalledWith({
...emptySettings,
@ -100,6 +101,7 @@ describe("ServerSettingsModal", () => {
onSettingsChange={onSettingsChange}
/>,
);
await user.click(screen.getByRole("button", { name: "Custom Headers" }));
const removeButtons = screen.getAllByRole("button", { name: "X" });
await user.click(removeButtons[0]);
expect(onSettingsChange).toHaveBeenCalledWith({
@ -119,6 +121,7 @@ describe("ServerSettingsModal", () => {
onSettingsChange={onSettingsChange}
/>,
);
await user.click(screen.getByRole("button", { name: "Custom Headers" }));
const valueInput = screen.getByDisplayValue("Bearer abc");
await user.type(valueInput, "1");
expect(onSettingsChange).toHaveBeenCalled();
@ -298,6 +301,7 @@ describe("ServerSettingsModal", () => {
onSettingsChange={vi.fn()}
/>,
);
const optionsControl = screen.getByRole("button", { name: "Options" });
const headersControl = screen.getByRole("button", {
name: "Custom Headers",
});
@ -308,14 +312,15 @@ describe("ServerSettingsModal", () => {
const oauthControl = screen.getByRole("button", { name: "OAuth Settings" });
const rootsControl = screen.getByRole("button", { name: "Roots" });
// Initially only "headers" is expanded.
expect(headersControl.getAttribute("aria-expanded")).toBe("true");
expect(metadataControl.getAttribute("aria-expanded")).toBe("false");
// Initially only "options" is expanded.
expect(optionsControl.getAttribute("aria-expanded")).toBe("true");
expect(headersControl.getAttribute("aria-expanded")).toBe("false");
// Not every section is expanded → ListToggle starts in compact mode
// and exposes "Expand all" as its aria-label.
await user.click(screen.getByRole("button", { name: "Expand all" }));
expect(headersControl.getAttribute("aria-expanded")).toBe("true");
expect(metadataControl.getAttribute("aria-expanded")).toBe("true");
expect(timeoutsControl.getAttribute("aria-expanded")).toBe("true");
expect(oauthControl.getAttribute("aria-expanded")).toBe("true");
@ -323,7 +328,7 @@ describe("ServerSettingsModal", () => {
// After expanding every section the toggle flips to "Collapse all".
await user.click(screen.getByRole("button", { name: "Collapse all" }));
expect(optionsControl.getAttribute("aria-expanded")).toBe("false");
expect(headersControl.getAttribute("aria-expanded")).toBe("false");
expect(metadataControl.getAttribute("aria-expanded")).toBe("false");
});
});

View file

@ -11,6 +11,7 @@ import {
} from "../ServerSettingsForm/ServerSettingsForm";
const ALL_SECTIONS: ServerSettingsSection[] = [
"options",
"headers",
"metadata",
"timeouts",
@ -33,7 +34,7 @@ export function ServerSettingsModal({
}: ServerSettingsModalProps) {
const [expandedSections, setExpandedSections] = useState<
ServerSettingsSection[]
>(["headers"]);
>(["options"]);
const allExpanded = expandedSections.length === ALL_SECTIONS.length;
@ -99,6 +100,10 @@ export function ServerSettingsModal({
});
}
function handleAutoRefreshChange(value: boolean) {
onSettingsChange({ ...settings, autoRefreshOnListChanged: value });
}
function handleAddRoot() {
onSettingsChange({
...settings,
@ -153,6 +158,7 @@ export function ServerSettingsModal({
onRemoveMetadata={handleRemoveMetadata}
onMetadataChange={handleMetadataChange}
onTimeoutChange={handleTimeoutChange}
onAutoRefreshChange={handleAutoRefreshChange}
onOAuthChange={handleOAuthChange}
onAddRoot={handleAddRoot}
onRemoveRoot={handleRemoveRoot}

View file

@ -288,27 +288,26 @@ describe("AppsScreen", () => {
).toBeInTheDocument();
});
it("renders the ListChangedIndicator when listChanged is true", async () => {
it("renders a single Refresh via the ListChangedIndicator when listChanged is true", async () => {
const user = userEvent.setup();
const onRefreshList = vi.fn();
renderWithMantine(
<AppsScreen {...buildProps({ listChanged: true, onRefreshList })} />,
);
// The indicator and toolbar both render "Refresh" buttons; the indicator
// is a sibling of the "List updated" label, so target it via that label.
// The indicator's Refresh is the only refresh affordance — no standalone
// toolbar button duplicating it.
expect(screen.getByText("List updated")).toBeInTheDocument();
const refreshButtons = screen.getAllByRole("button", { name: "Refresh" });
expect(refreshButtons).toHaveLength(2);
expect(refreshButtons).toHaveLength(1);
await user.click(refreshButtons[0]);
expect(onRefreshList).toHaveBeenCalledTimes(1);
});
it("invokes onRefreshList when the toolbar Refresh button is clicked", async () => {
const user = userEvent.setup();
const onRefreshList = vi.fn();
renderWithMantine(<AppsScreen {...buildProps({ onRefreshList })} />);
await user.click(screen.getByRole("button", { name: "Refresh" }));
expect(onRefreshList).toHaveBeenCalledTimes(1);
it("shows no Refresh button when listChanged is false", () => {
renderWithMantine(<AppsScreen {...buildProps()} />);
expect(
screen.queryByRole("button", { name: "Refresh" }),
).not.toBeInTheDocument();
});
it("renders the tool icon next to the header title when present", async () => {

View file

@ -56,6 +56,9 @@ function makeProps(
prompts: [],
resources: [],
resourceTemplates: [],
toolsListChanged: false,
promptsListChanged: false,
resourcesListChanged: false,
subscriptions: [],
logs: [],
tasks: [],
@ -585,4 +588,104 @@ describe("InspectorView", () => {
await screen.findByRole("button", { name: "Expand all" }),
).toBeInTheDocument();
});
describe("listChanged indicator wiring (#1402)", () => {
// The indicator only mounts on the active screen, so each case connects,
// navigates to the target tab, and asserts the "List updated" affordance.
async function gotoTab(tab: string) {
const user = userEvent.setup();
const tabSelect = await screen.findByDisplayValue("Servers");
await user.click(tabSelect);
await user.click(await screen.findByText(tab));
return user;
}
it("routes toolsListChanged to the Tools screen indicator", async () => {
renderWithMantine(
<InspectorView
{...makeProps({
servers: [sampleServer],
activeServer: "alpha",
connectionStatus: "connected",
initializeResult: connectedInit,
toolsListChanged: true,
})}
/>,
);
await gotoTab("Tools");
expect(await screen.findByText("List updated")).toBeInTheDocument();
});
it("shares the tools flag with the Apps screen (apps are filtered tools)", async () => {
renderWithMantine(
<InspectorView
{...makeProps({
servers: [sampleServer],
activeServer: "alpha",
connectionStatus: "connected",
initializeResult: connectedInit,
toolsListChanged: true,
})}
/>,
);
await gotoTab("Apps");
expect(await screen.findByText("List updated")).toBeInTheDocument();
});
it("routes promptsListChanged to the Prompts screen indicator", async () => {
renderWithMantine(
<InspectorView
{...makeProps({
servers: [sampleServer],
activeServer: "alpha",
connectionStatus: "connected",
initializeResult: connectedInit,
promptsListChanged: true,
})}
/>,
);
await gotoTab("Prompts");
expect(await screen.findByText("List updated")).toBeInTheDocument();
});
it("routes resourcesListChanged to the Resources screen indicator", async () => {
renderWithMantine(
<InspectorView
{...makeProps({
servers: [sampleServer],
activeServer: "alpha",
connectionStatus: "connected",
initializeResult: connectedInit,
resourcesListChanged: true,
})}
/>,
);
await gotoTab("Resources");
expect(await screen.findByText("List updated")).toBeInTheDocument();
});
it("does not show the indicator on a screen whose flag is false (no cross-wiring)", async () => {
renderWithMantine(
<InspectorView
{...makeProps({
servers: [sampleServer],
activeServer: "alpha",
connectionStatus: "connected",
initializeResult: connectedInit,
// Tools changed, but Prompts did not — the Prompts screen must
// stay quiet.
toolsListChanged: true,
promptsListChanged: false,
})}
/>,
);
await gotoTab("Prompts");
// The Prompts screen has mounted (its heading is present)...
expect(
await screen.findByRole("heading", { name: "Prompts" }),
).toBeInTheDocument();
// ...but the indicator is not, since promptsListChanged is false.
expect(screen.queryByText("List updated")).not.toBeInTheDocument();
});
});
});

View file

@ -201,6 +201,13 @@ export interface InspectorViewProps {
resources: Resource[];
resourceTemplates: ResourceTemplate[];
subscriptions: InspectorResourceSubscription[];
// "List changed since last refresh" flags, sourced from the managed-state
// layer (#1402). They light the per-screen list-changed indicator. Apps is a
// filtered view of tools, so it shares the tools flag.
toolsListChanged: boolean;
promptsListChanged: boolean;
resourcesListChanged: boolean;
logs: LogEntryData[];
tasks: Task[];
progressByTaskId?: Record<string, TaskProgress>;
@ -336,6 +343,9 @@ export function InspectorView({
prompts,
resources,
resourceTemplates,
toolsListChanged,
promptsListChanged,
resourcesListChanged,
subscriptions,
logs,
tasks,
@ -548,7 +558,7 @@ export function InspectorView({
tools={tools}
callState={toolCallState}
ui={toolsUi}
listChanged={false}
listChanged={toolsListChanged}
serverSupportsTaskToolCalls={serverSupportsTaskToolCalls}
onUiChange={onToolsUiChange}
onRefreshList={onRefreshTools}
@ -560,7 +570,7 @@ export function InspectorView({
<ScreenStage active={activeTab === "Apps"}>
<AppsScreen
tools={appTools}
listChanged={false}
listChanged={toolsListChanged}
sandboxPath={sandboxPath}
bridgeFactory={bridgeFactory}
rendererRef={appRendererRef}
@ -578,7 +588,7 @@ export function InspectorView({
prompts={prompts}
getPromptState={getPromptState}
ui={promptsUi}
listChanged={false}
listChanged={promptsListChanged}
completionsSupported={completionsSupported}
onUiChange={onPromptsUiChange}
onRefreshList={onRefreshPrompts}
@ -594,7 +604,7 @@ export function InspectorView({
subscriptions={subscriptions}
readState={readResourceState}
ui={resourcesUi}
listChanged={false}
listChanged={resourcesListChanged}
completionsSupported={completionsSupported}
onUiChange={onResourcesUiChange}
onRefreshList={onRefreshResources}

View file

@ -209,6 +209,44 @@ describe("serverEntriesToMcpConfig", () => {
expect(round).toEqual(original);
});
it("round-trips autoRefreshOnListChanged: lifts true to settings and back to disk", () => {
const original: MCPConfig = {
mcpServers: {
delta: {
type: "streamable-http",
url: "https://x.test/mcp",
autoRefreshOnListChanged: true,
},
},
};
const [entry] = mcpConfigToServerEntries(original);
expect(entry?.settings?.autoRefreshOnListChanged).toBe(true);
const round = serverEntriesToMcpConfig(mcpConfigToServerEntries(original));
expect(round).toEqual(original);
});
it("omits autoRefreshOnListChanged from disk when false (the default)", () => {
// Absent on disk lifts to false in memory; writing it back must NOT inject
// the field, keeping the diff minimal for the default-off case. A benign
// inspector field (connectionTimeout) is present so `settings` is built.
const original: MCPConfig = {
mcpServers: {
epsilon: {
type: "streamable-http",
url: "https://x.test/mcp",
connectionTimeout: 5000,
},
},
};
const [entry] = mcpConfigToServerEntries(original);
expect(entry?.settings?.autoRefreshOnListChanged).toBe(false);
const round = serverEntriesToMcpConfig(mcpConfigToServerEntries(original));
expect("autoRefreshOnListChanged" in (round.mcpServers.epsilon ?? {})).toBe(
false,
);
expect(round).toEqual(original);
});
it("lifts top-level Inspector-extension fields onto ServerEntry.settings (form shape)", () => {
const cfg: MCPConfig = {
mcpServers: {
@ -229,6 +267,8 @@ describe("serverEntriesToMcpConfig", () => {
requestTimeout: 0,
// Absent taskTtl on disk → product default in memory (for the form)
taskTtl: 60000,
// Absent autoRefreshOnListChanged on disk → false in memory (for the form)
autoRefreshOnListChanged: false,
// Absent roots on disk → empty list in memory (for the form)
roots: [],
// Nested oauth on disk → flat oauthClientId in memory

View file

@ -1,5 +1,6 @@
import { describe, it, expect, beforeEach } from "vitest";
import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
import { ManagedPromptsState } from "@inspector/core/mcp/state/managedPromptsState";
import { FakeInspectorClient } from "@inspector/core/mcp/__tests__/fakeInspectorClient";
@ -7,6 +8,16 @@ function prompt(name: string): Prompt {
return { name };
}
const AUTO_REFRESH_SETTINGS: InspectorServerSettings = {
headers: [],
metadata: [],
connectionTimeout: 0,
requestTimeout: 0,
taskTtl: 60000,
autoRefreshOnListChanged: true,
roots: [],
};
function waitForPromptsChange(state: ManagedPromptsState): Promise<Prompt[]> {
return new Promise((resolve) => {
state.addEventListener("promptsChange", (e) => resolve(e.detail), {
@ -124,13 +135,29 @@ describe("ManagedPromptsState", () => {
expect(next.map((p) => p.name)).toEqual(["a"]);
});
it("promptsListChanged event triggers a refresh", async () => {
it("promptsListChanged does NOT auto-refresh by default (the user pulls via Refresh)", async () => {
client.setStatus("connected");
client.queuePromptPages({ prompts: [prompt("a"), prompt("b")] });
const changePromise = waitForPromptsChange(state);
client.dispatchTypedEvent("promptsListChanged");
const next = await changePromise;
expect(next.map((p) => p.name)).toEqual(["a", "b"]);
// Yield so a stray refresh would have landed.
await Promise.resolve();
await Promise.resolve();
expect(client.listPrompts).not.toHaveBeenCalled();
expect(state.getPrompts()).toEqual([]);
});
it("promptsListChanged auto-refreshes when the server opts in", async () => {
const autoClient = new FakeInspectorClient({
capabilities: { prompts: {} },
serverSettings: AUTO_REFRESH_SETTINGS,
});
autoClient.setStatus("connected");
const autoState = new ManagedPromptsState(autoClient);
autoClient.queuePromptPages({ prompts: [prompt("a")] });
const changed = waitForPromptsChange(autoState);
autoClient.dispatchTypedEvent("promptsListChanged");
expect((await changed).map((p) => p.name)).toEqual(["a"]);
expect(autoClient.listPrompts).toHaveBeenCalled();
});
it("statusChange to disconnected clears prompts and dispatches promptsChange", async () => {
@ -178,6 +205,62 @@ describe("ManagedPromptsState", () => {
expect(state.getPrompts()).toEqual([]);
});
describe("listChanged (#1402)", () => {
function waitForListChanged(s: ManagedPromptsState): Promise<boolean> {
return new Promise((resolve) => {
s.addEventListener("listChangedChange", (e) => resolve(e.detail), {
once: true,
});
});
}
it("starts cleared", () => {
expect(state.getListChanged()).toBe(false);
});
it("promptsListChanged sets the flag and dispatches listChangedChange", async () => {
client.setStatus("connected");
client.queuePromptPages({ prompts: [prompt("a")] });
const changed = waitForListChanged(state);
client.dispatchTypedEvent("promptsListChanged");
expect(await changed).toBe(true);
expect(state.getListChanged()).toBe(true);
});
it("clearListChanged resets the flag and dispatches false", async () => {
client.setStatus("connected");
client.queuePromptPages({ prompts: [prompt("a")] });
client.dispatchTypedEvent("promptsListChanged");
expect(state.getListChanged()).toBe(true);
const changed = waitForListChanged(state);
state.clearListChanged();
expect(await changed).toBe(false);
expect(state.getListChanged()).toBe(false);
});
it("clearListChanged is a no-op (no event) when already cleared", () => {
let fired = false;
state.addEventListener("listChangedChange", () => {
fired = true;
});
state.clearListChanged();
expect(fired).toBe(false);
});
it("disconnect clears the flag", async () => {
client.setStatus("connected");
client.queuePromptPages({ prompts: [prompt("a")] });
client.dispatchTypedEvent("promptsListChanged");
expect(state.getListChanged()).toBe(true);
const changed = waitForListChanged(state);
client.setStatus("disconnected");
expect(await changed).toBe(false);
expect(state.getListChanged()).toBe(false);
});
});
it("destroy is idempotent", () => {
state.destroy();
expect(() => state.destroy()).not.toThrow();

View file

@ -1,5 +1,6 @@
import { describe, it, expect, beforeEach } from "vitest";
import type { ResourceTemplate } from "@modelcontextprotocol/sdk/types.js";
import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
import { ManagedResourceTemplatesState } from "@inspector/core/mcp/state/managedResourceTemplatesState";
import { FakeInspectorClient } from "@inspector/core/mcp/__tests__/fakeInspectorClient";
@ -7,6 +8,16 @@ function template(name: string): ResourceTemplate {
return { uriTemplate: `tpl://{${name}}`, name };
}
const AUTO_REFRESH_SETTINGS: InspectorServerSettings = {
headers: [],
metadata: [],
connectionTimeout: 0,
requestTimeout: 0,
taskTtl: 60000,
autoRefreshOnListChanged: true,
roots: [],
};
function waitForChange(
state: ManagedResourceTemplatesState,
): Promise<ResourceTemplate[]> {
@ -136,15 +147,33 @@ describe("ManagedResourceTemplatesState", () => {
expect(next.map((t) => t.name)).toEqual(["a"]);
});
it("resourceTemplatesListChanged event triggers a refresh", async () => {
it("resourceTemplatesListChanged does NOT auto-refresh by default (refreshed via the Resources Refresh)", async () => {
client.setStatus("connected");
client.queueResourceTemplatePages({
resourceTemplates: [template("a"), template("b")],
});
const changePromise = waitForChange(state);
client.dispatchTypedEvent("resourceTemplatesListChanged");
const next = await changePromise;
expect(next.map((t) => t.name)).toEqual(["a", "b"]);
// Yield so a stray refresh would have landed.
await Promise.resolve();
await Promise.resolve();
expect(client.listResourceTemplates).not.toHaveBeenCalled();
expect(state.getResourceTemplates()).toEqual([]);
});
it("resourceTemplatesListChanged auto-refreshes when the server opts in", async () => {
const autoClient = new FakeInspectorClient({
capabilities: { resources: {} },
serverSettings: AUTO_REFRESH_SETTINGS,
});
autoClient.setStatus("connected");
const autoState = new ManagedResourceTemplatesState(autoClient);
autoClient.queueResourceTemplatePages({
resourceTemplates: [template("a")],
});
const changed = waitForChange(autoState);
autoClient.dispatchTypedEvent("resourceTemplatesListChanged");
expect((await changed).map((t) => t.name)).toEqual(["a"]);
expect(autoClient.listResourceTemplates).toHaveBeenCalled();
});
it("statusChange to disconnected clears templates and dispatches change", async () => {

View file

@ -1,5 +1,6 @@
import { describe, it, expect, beforeEach } from "vitest";
import type { Resource } from "@modelcontextprotocol/sdk/types.js";
import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
import { ManagedResourcesState } from "@inspector/core/mcp/state/managedResourcesState";
import { FakeInspectorClient } from "@inspector/core/mcp/__tests__/fakeInspectorClient";
@ -7,6 +8,16 @@ function resource(uri: string): Resource {
return { uri, name: uri };
}
const AUTO_REFRESH_SETTINGS: InspectorServerSettings = {
headers: [],
metadata: [],
connectionTimeout: 0,
requestTimeout: 0,
taskTtl: 60000,
autoRefreshOnListChanged: true,
roots: [],
};
function waitForResourcesChange(
state: ManagedResourcesState,
): Promise<Resource[]> {
@ -131,15 +142,31 @@ describe("ManagedResourcesState", () => {
expect(next.map((r) => r.uri)).toEqual(["a://1"]);
});
it("resourcesListChanged event triggers a refresh", async () => {
it("resourcesListChanged does NOT auto-refresh by default (the user pulls via Refresh)", async () => {
client.setStatus("connected");
client.queueResourcePages({
resources: [resource("a://1"), resource("a://2")],
});
const changePromise = waitForResourcesChange(state);
client.dispatchTypedEvent("resourcesListChanged");
const next = await changePromise;
expect(next.map((r) => r.uri)).toEqual(["a://1", "a://2"]);
// Yield so a stray refresh would have landed.
await Promise.resolve();
await Promise.resolve();
expect(client.listResources).not.toHaveBeenCalled();
expect(state.getResources()).toEqual([]);
});
it("resourcesListChanged auto-refreshes when the server opts in", async () => {
const autoClient = new FakeInspectorClient({
capabilities: { resources: {} },
serverSettings: AUTO_REFRESH_SETTINGS,
});
autoClient.setStatus("connected");
const autoState = new ManagedResourcesState(autoClient);
autoClient.queueResourcePages({ resources: [resource("a://1")] });
const changed = waitForResourcesChange(autoState);
autoClient.dispatchTypedEvent("resourcesListChanged");
expect((await changed).map((r) => r.uri)).toEqual(["a://1"]);
expect(autoClient.listResources).toHaveBeenCalled();
});
it("statusChange to disconnected clears resources and dispatches resourcesChange", async () => {
@ -187,6 +214,62 @@ describe("ManagedResourcesState", () => {
expect(state.getResources()).toEqual([]);
});
describe("listChanged (#1402)", () => {
function waitForListChanged(s: ManagedResourcesState): Promise<boolean> {
return new Promise((resolve) => {
s.addEventListener("listChangedChange", (e) => resolve(e.detail), {
once: true,
});
});
}
it("starts cleared", () => {
expect(state.getListChanged()).toBe(false);
});
it("resourcesListChanged sets the flag and dispatches listChangedChange", async () => {
client.setStatus("connected");
client.queueResourcePages({ resources: [resource("a://1")] });
const changed = waitForListChanged(state);
client.dispatchTypedEvent("resourcesListChanged");
expect(await changed).toBe(true);
expect(state.getListChanged()).toBe(true);
});
it("clearListChanged resets the flag and dispatches false", async () => {
client.setStatus("connected");
client.queueResourcePages({ resources: [resource("a://1")] });
client.dispatchTypedEvent("resourcesListChanged");
expect(state.getListChanged()).toBe(true);
const changed = waitForListChanged(state);
state.clearListChanged();
expect(await changed).toBe(false);
expect(state.getListChanged()).toBe(false);
});
it("clearListChanged is a no-op (no event) when already cleared", () => {
let fired = false;
state.addEventListener("listChangedChange", () => {
fired = true;
});
state.clearListChanged();
expect(fired).toBe(false);
});
it("disconnect clears the flag", async () => {
client.setStatus("connected");
client.queueResourcePages({ resources: [resource("a://1")] });
client.dispatchTypedEvent("resourcesListChanged");
expect(state.getListChanged()).toBe(true);
const changed = waitForListChanged(state);
client.setStatus("disconnected");
expect(await changed).toBe(false);
expect(state.getListChanged()).toBe(false);
});
});
it("destroy is idempotent", () => {
state.destroy();
expect(() => state.destroy()).not.toThrow();

View file

@ -1,5 +1,6 @@
import { describe, it, expect, beforeEach } from "vitest";
import type { Tool } from "@modelcontextprotocol/sdk/types.js";
import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
import { ManagedToolsState } from "@inspector/core/mcp/state/managedToolsState";
import { FakeInspectorClient } from "@inspector/core/mcp/__tests__/fakeInspectorClient";
@ -7,6 +8,16 @@ function tool(name: string): Tool {
return { name, inputSchema: { type: "object" } };
}
const AUTO_REFRESH_SETTINGS: InspectorServerSettings = {
headers: [],
metadata: [],
connectionTimeout: 0,
requestTimeout: 0,
taskTtl: 60000,
autoRefreshOnListChanged: true,
roots: [],
};
function waitForToolsChange(state: ManagedToolsState): Promise<Tool[]> {
return new Promise((resolve) => {
state.addEventListener("toolsChange", (e) => resolve(e.detail), {
@ -122,13 +133,29 @@ describe("ManagedToolsState", () => {
expect(next.map((t) => t.name)).toEqual(["a"]);
});
it("toolsListChanged event triggers a refresh", async () => {
it("toolsListChanged does NOT auto-refresh by default (the user pulls via Refresh)", async () => {
client.setStatus("connected");
client.queueToolPages({ tools: [tool("a"), tool("b")] });
const changePromise = waitForToolsChange(state);
client.dispatchTypedEvent("toolsListChanged");
const next = await changePromise;
expect(next.map((t) => t.name)).toEqual(["a", "b"]);
// Yield so a stray refresh would have landed.
await Promise.resolve();
await Promise.resolve();
expect(client.listTools).not.toHaveBeenCalled();
expect(state.getTools()).toEqual([]);
});
it("toolsListChanged auto-refreshes when the server opts in", async () => {
const autoClient = new FakeInspectorClient({
capabilities: { tools: {} },
serverSettings: AUTO_REFRESH_SETTINGS,
});
autoClient.setStatus("connected");
const autoState = new ManagedToolsState(autoClient);
autoClient.queueToolPages({ tools: [tool("a")] });
const changed = waitForToolsChange(autoState);
autoClient.dispatchTypedEvent("toolsListChanged");
expect((await changed).map((t) => t.name)).toEqual(["a"]);
expect(autoClient.listTools).toHaveBeenCalled();
});
it("statusChange to disconnected clears tools and dispatches toolsChange", async () => {
@ -179,6 +206,62 @@ describe("ManagedToolsState", () => {
expect(state.getTools()).toEqual([]);
});
describe("listChanged (#1402)", () => {
function waitForListChanged(s: ManagedToolsState): Promise<boolean> {
return new Promise((resolve) => {
s.addEventListener("listChangedChange", (e) => resolve(e.detail), {
once: true,
});
});
}
it("starts cleared", () => {
expect(state.getListChanged()).toBe(false);
});
it("toolsListChanged sets the flag and dispatches listChangedChange", async () => {
client.setStatus("connected");
client.queueToolPages({ tools: [tool("a")] });
const changed = waitForListChanged(state);
client.dispatchTypedEvent("toolsListChanged");
expect(await changed).toBe(true);
expect(state.getListChanged()).toBe(true);
});
it("clearListChanged resets the flag and dispatches false", async () => {
client.setStatus("connected");
client.queueToolPages({ tools: [tool("a")] });
client.dispatchTypedEvent("toolsListChanged");
expect(state.getListChanged()).toBe(true);
const changed = waitForListChanged(state);
state.clearListChanged();
expect(await changed).toBe(false);
expect(state.getListChanged()).toBe(false);
});
it("clearListChanged is a no-op (no event) when already cleared", () => {
let fired = false;
state.addEventListener("listChangedChange", () => {
fired = true;
});
state.clearListChanged();
expect(fired).toBe(false);
});
it("disconnect clears the flag", async () => {
client.setStatus("connected");
client.queueToolPages({ tools: [tool("a")] });
client.dispatchTypedEvent("toolsListChanged");
expect(state.getListChanged()).toBe(true);
const changed = waitForListChanged(state);
client.setStatus("disconnected");
expect(await changed).toBe(false);
expect(state.getListChanged()).toBe(false);
});
});
it("destroy is idempotent", () => {
state.destroy();
expect(() => state.destroy()).not.toThrow();

View file

@ -102,4 +102,41 @@ describe("useManagedPrompts", () => {
expect(result.current.prompts).toEqual([]);
});
describe("listChanged (#1402)", () => {
it("starts false and reflects listChangedChange from the state", async () => {
const { result } = renderHook(() => useManagedPrompts(client, state));
expect(result.current.listChanged).toBe(false);
client.queuePromptPages({ prompts: [prompt("a")] });
act(() => {
client.dispatchTypedEvent("promptsListChanged");
});
await waitFor(() => {
expect(result.current.listChanged).toBe(true);
});
});
it("refresh() clears the indicator", async () => {
const { result } = renderHook(() => useManagedPrompts(client, state));
client.queuePromptPages({ prompts: [prompt("a")] });
act(() => {
client.dispatchTypedEvent("promptsListChanged");
});
await waitFor(() => expect(result.current.listChanged).toBe(true));
client.queuePromptPages({ prompts: [prompt("a")] });
await act(async () => {
await result.current.refresh();
});
await waitFor(() => {
expect(result.current.listChanged).toBe(false);
});
});
it("defaults to false when state is null", () => {
const { result } = renderHook(() => useManagedPrompts(client, null));
expect(result.current.listChanged).toBe(false);
});
});
});

View file

@ -107,4 +107,41 @@ describe("useManagedResources", () => {
expect(result.current.resources).toEqual([]);
});
describe("listChanged (#1402)", () => {
it("starts false and reflects listChangedChange from the state", async () => {
const { result } = renderHook(() => useManagedResources(client, state));
expect(result.current.listChanged).toBe(false);
client.queueResourcePages({ resources: [resource("a://1")] });
act(() => {
client.dispatchTypedEvent("resourcesListChanged");
});
await waitFor(() => {
expect(result.current.listChanged).toBe(true);
});
});
it("refresh() clears the indicator", async () => {
const { result } = renderHook(() => useManagedResources(client, state));
client.queueResourcePages({ resources: [resource("a://1")] });
act(() => {
client.dispatchTypedEvent("resourcesListChanged");
});
await waitFor(() => expect(result.current.listChanged).toBe(true));
client.queueResourcePages({ resources: [resource("a://1")] });
await act(async () => {
await result.current.refresh();
});
await waitFor(() => {
expect(result.current.listChanged).toBe(false);
});
});
it("defaults to false when state is null", () => {
const { result } = renderHook(() => useManagedResources(client, null));
expect(result.current.listChanged).toBe(false);
});
});
});

Some files were not shown because too many files have changed in this diff Show more