feat(web): add per-server Roots config + client roots capability (#1425) (#1431)

* feat(web): add per-server Roots config + client roots capability (#1425)

Add MCP roots support to the v2 web Inspector as a per-server config
section in the server settings form (no separate Roots tab/screen).

- Persistence: add `roots: Root[]` to `InspectorServerSettings` and
  `StoredMCPServer`; thread through serverList converters (lift on read,
  drop empty-uri rows / blank names on write, omit when empty) and the
  remote server's read-side drop guard + `validateSettings`.
- Capability: `setupClientForServer` always advertises the roots
  capability (`roots: cleanRoots(savedSettings?.roots ?? [])`) so the
  server can issue `roots/list` and receive `roots/list_changed`.
- Live apply: edits to a connected server's roots are pushed via
  `inspectorClient.setRoots(...)` once, on settings-dialog close — diffed
  against the client's current roots — rather than per keystroke, to
  avoid flooding the server with `roots/list_changed` / `roots/list`.
- Form: new Roots accordion section with a required URI and an optional
  name per row (unlike v1, which was URI-only), + Add Root, and remove.

Tests cover the persistence round-trip (serverList + servers-route),
the form/modal section, and reuse the existing InspectorClient
roots/`setRoots` integration coverage.

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

* refactor(roots): address review — dedup guards/cleanRoots, preserve extra fields, test live-apply

Responding to the PR #1431 code review:

- Dedup `isRootArray`: drop the copy inside `validateSettings` and reuse the
  module-scope guard the read path uses, so the two can't drift
  (core/mcp/remote/node/server.ts).
- Dedup the clean-roots normalizer: hoist a single exported `cleanRoots`
  into core/mcp/serverList.ts and reuse it from both
  `inspectorSettingsToStoredFields` and App.tsx (drops the local copy).
- Preserve non-form root fields (e.g. `_meta`): `cleanRoots` now spreads the
  carried-through fields and only normalizes uri/name, and the modal's
  `handleRootChange` spreads the existing root on edit — so a hand-edited
  root's `_meta` survives load + persist + edit instead of being silently
  dropped.
- Test the App live-apply-on-close path: new App.test.tsx cases assert
  setRoots is called once with cleaned roots when changed on the active
  server, and not called when the cleaned roots already match what the
  client advertises. Adds a cleanRoots unit test (blank drop + _meta
  preserve).

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

---------

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

clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx

@@ -20,6 +20,10 @@ const initialSettings: InspectorServerSettings = {
   oauthClientId: "my-client-id",
   oauthClientSecret: "super-secret-value",
   oauthScopes: "read write",
+  roots: [
+    { uri: "file:///home/user/project", name: "Project" },
+    { uri: "file:///tmp" },
+  ],
 };
 
 function InteractiveRender(args: ServerSettingsModalProps) {
@@ -69,6 +73,7 @@ export const EmptySettings: Story = {
       connectionTimeout: 30000,
       requestTimeout: 60000,
       taskTtl: 60000,
+      roots: [],
     },
   },
 };

clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.test.tsx

@@ -13,6 +13,7 @@ const initialSettings: InspectorServerSettings = {
   oauthClientId: "cid",
   oauthClientSecret: "secret",
   oauthScopes: "read",
+  roots: [{ uri: "file:///project", name: "Project" }],
 };
 
 const emptySettings: InspectorServerSettings = {
@@ -21,6 +22,7 @@ const emptySettings: InspectorServerSettings = {
   connectionTimeout: 30000,
   requestTimeout: 60000,
   taskTtl: 60000,
+  roots: [],
 };
 
 describe("ServerSettingsModal", () => {
@@ -225,6 +227,67 @@ describe("ServerSettingsModal", () => {
     expect(call.oauthClientId).toBe("a");
   });
 
+  it("calls onSettingsChange with a blank row when adding a root", async () => {
+    const user = userEvent.setup();
+    const onSettingsChange = vi.fn();
+    renderWithMantine(
+      <ServerSettingsModal
+        opened
+        settings={emptySettings}
+        onClose={vi.fn()}
+        onSettingsChange={onSettingsChange}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Roots" }));
+    await user.click(screen.getByRole("button", { name: "+ Add Root" }));
+    expect(onSettingsChange).toHaveBeenCalledWith({
+      ...emptySettings,
+      roots: [{ uri: "", name: "" }],
+    });
+  });
+
+  it("calls onSettingsChange when removing a root", async () => {
+    const user = userEvent.setup();
+    const onSettingsChange = vi.fn();
+    renderWithMantine(
+      <ServerSettingsModal
+        opened
+        settings={initialSettings}
+        onClose={vi.fn()}
+        onSettingsChange={onSettingsChange}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Roots" }));
+    const removeButtons = screen.getAllByRole("button", { name: "X" });
+    // The roots X is the last one (headers section is also expanded).
+    await user.click(removeButtons[removeButtons.length - 1]);
+    expect(onSettingsChange).toHaveBeenCalledWith({
+      ...initialSettings,
+      roots: [],
+    });
+  });
+
+  it("calls onSettingsChange when editing a root uri/name", async () => {
+    const user = userEvent.setup();
+    const onSettingsChange = vi.fn();
+    renderWithMantine(
+      <ServerSettingsModal
+        opened
+        settings={initialSettings}
+        onClose={vi.fn()}
+        onSettingsChange={onSettingsChange}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Roots" }));
+    const uriInput = screen.getByDisplayValue("file:///project");
+    await user.type(uriInput, "/src");
+    expect(onSettingsChange).toHaveBeenCalled();
+    const lastCall =
+      onSettingsChange.mock.calls[onSettingsChange.mock.calls.length - 1][0];
+    expect(lastCall.roots[0].name).toBe("Project");
+    expect(lastCall.roots[0].uri).toContain("file:///project");
+  });
+
   it("toggles all accordion sections when ListToggle button is clicked", async () => {
     const user = userEvent.setup();
     renderWithMantine(
@@ -243,6 +306,7 @@ describe("ServerSettingsModal", () => {
     });
     const timeoutsControl = screen.getByRole("button", { name: "Timeouts" });
     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");
@@ -255,6 +319,7 @@ describe("ServerSettingsModal", () => {
     expect(metadataControl.getAttribute("aria-expanded")).toBe("true");
     expect(timeoutsControl.getAttribute("aria-expanded")).toBe("true");
     expect(oauthControl.getAttribute("aria-expanded")).toBe("true");
+    expect(rootsControl.getAttribute("aria-expanded")).toBe("true");
 
     // After expanding every section the toggle flips to "Collapse all".
     await user.click(screen.getByRole("button", { name: "Collapse all" }));

clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx

@@ -15,6 +15,7 @@ const ALL_SECTIONS: ServerSettingsSection[] = [
   "metadata",
   "timeouts",
   "oauth",
+  "roots",
 ];
 
 export interface ServerSettingsModalProps {
@@ -98,6 +99,29 @@ export function ServerSettingsModal({
     });
   }
 
+  function handleAddRoot() {
+    onSettingsChange({
+      ...settings,
+      roots: [...settings.roots, { uri: "", name: "" }],
+    });
+  }
+
+  function handleRemoveRoot(index: number) {
+    onSettingsChange({
+      ...settings,
+      roots: settings.roots.filter((_, i) => i !== index),
+    });
+  }
+
+  function handleRootChange(index: number, uri: string, name: string) {
+    // Spread the existing root so any non-form fields (e.g. `_meta` from a
+    // hand-edited mcp.json) survive an edit; only `uri`/`name` are overwritten.
+    const roots = settings.roots.map((r, i) =>
+      i === index ? { ...r, uri, name } : r,
+    );
+    onSettingsChange({ ...settings, roots });
+  }
+
   return (
     <Modal
       opened={opened}
@@ -130,6 +154,9 @@ export function ServerSettingsModal({
           onMetadataChange={handleMetadataChange}
           onTimeoutChange={handleTimeoutChange}
           onOAuthChange={handleOAuthChange}
+          onAddRoot={handleAddRoot}
+          onRemoveRoot={handleRemoveRoot}
+          onRootChange={handleRootChange}
         />
       </Stack>
     </Modal>