From 8427cb993dc647058cbecbc7337264395a22d262 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 10:47:22 -0400
Subject: [PATCH 01/16] feat(web,core): import client configs and registry
 server.json (#1348)

Wire up the two server-import affordances that were previously todoNoop:

- Import config: source picker (Claude Desktop / Cursor / Cline / VS Code)
  read on the backend via a new GET /api/import-source, plus a file-upload
  fallback. Per-server review with import/skip on new servers and
  overwrite/skip/rename on id conflicts, then a per-server outcome summary.
- Import server.json: parse the MCP registry single-server format
  (npm/pypi/oci packages + remotes, env vars, package/runtime args, URL
  template vars) into a runnable config, with a file picker and debounced
  live validation; Add Server is disabled until validation passes.

Core gains an isomorphic import strategy layer (core/mcp/import) with a
strategy registry, client-config + server.json parsers, a strategy-agnostic
merge, and a dependency-injected source resolver. useServers exposes
importSource(). Modal headers are bold and the redundant server.json section
header is folded into the modal title.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 AGENTS.md                                     |   5 +
 clients/web/src/App.tsx                       |  33 +-
 .../ImportServerJsonPanel.stories.tsx         |   1 -
 .../ImportServerJsonPanel.test.tsx            |  67 ++-
 .../ImportServerJsonPanel.tsx                 |  35 +-
 .../ServerConfigModal/ServerConfigModal.tsx   |   3 +-
 .../ServerImportConfigModal.stories.tsx       |  83 +++
 .../ServerImportConfigModal.test.tsx          | 342 +++++++++++++
 .../ServerImportConfigModal.tsx               | 481 ++++++++++++++++++
 .../ServerImportJsonModal.stories.tsx         |  53 ++
 .../ServerImportJsonModal.test.tsx            | 304 +++++++++++
 .../ServerImportJsonModal.tsx                 | 309 +++++++++++
 .../src/test/core/react/useServers.test.tsx   |  23 +
 .../mcp/import/clientConfig.test.ts           |  94 ++++
 .../test/integration/mcp/import/merge.test.ts |  51 ++
 .../mcp/import/resolveSource.test.ts          |  64 +++
 .../integration/mcp/import/serverJson.test.ts | 334 ++++++++++++
 .../integration/mcp/import/strategies.test.ts |  84 +++
 .../mcp/remote/servers-route.test.ts          |  30 ++
 core/mcp/import/clientConfig.ts               |  87 ++++
 core/mcp/import/index.ts                      |  32 ++
 core/mcp/import/merge.ts                      |  64 +++
 core/mcp/import/resolveSource.ts              |  57 +++
 core/mcp/import/serverJson.ts                 | 337 ++++++++++++
 core/mcp/import/strategies.ts                 | 116 +++++
 core/mcp/import/types.ts                      |  60 +++
 core/mcp/remote/node/server.ts                |  64 ++-
 core/react/useServers.ts                      |  23 +
 28 files changed, 3181 insertions(+), 55 deletions(-)
 create mode 100644 clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.stories.tsx
 create mode 100644 clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
 create mode 100644 clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
 create mode 100644 clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.stories.tsx
 create mode 100644 clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
 create mode 100644 clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
 create mode 100644 clients/web/src/test/integration/mcp/import/clientConfig.test.ts
 create mode 100644 clients/web/src/test/integration/mcp/import/merge.test.ts
 create mode 100644 clients/web/src/test/integration/mcp/import/resolveSource.test.ts
 create mode 100644 clients/web/src/test/integration/mcp/import/serverJson.test.ts
 create mode 100644 clients/web/src/test/integration/mcp/import/strategies.test.ts
 create mode 100644 core/mcp/import/clientConfig.ts
 create mode 100644 core/mcp/import/index.ts
 create mode 100644 core/mcp/import/merge.ts
 create mode 100644 core/mcp/import/resolveSource.ts
 create mode 100644 core/mcp/import/serverJson.ts
 create mode 100644 core/mcp/import/strategies.ts
 create mode 100644 core/mcp/import/types.ts

diff --git a/AGENTS.md b/AGENTS.md
index 4f7bb68b62..4a0201cfcb 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -29,6 +29,11 @@ inspector/
 │   ├── json/                           # JSON utilities and parameter/argument conversion
 │   ├── logging/                        # Silent pino logger singleton
 │   ├── mcp/                            # InspectorClient runtime + state stores
+│   │   ├── import/                     # Config import strategies (#1348): client-config parsers
+│   │   │                               #   (Claude Desktop/Cursor/Cline/VS Code), registry
+│   │   │                               #   server.json parser, strategy registry + well-known
+│   │   │                               #   paths, strategy-agnostic merge. Pure/isomorphic;
+│   │   │                               #   used by the web file-upload path + /api/import-source.
 │   │   ├── node/                       # Node stdio transport factory
 │   │   ├── remote/                     # Browser HTTP/SSE transport + remote logger/fetch
 │   │   │   └── node/                   # Hono-based remote server backend (used by remote/ above)
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 544cd5e478..8241ab9796 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -107,6 +107,8 @@ import {
   type ServerConfigModalMode,
 } from "./components/groups/ServerConfigModal/ServerConfigModal";
 import { ServerSettingsModal } from "./components/groups/ServerSettingsModal/ServerSettingsModal";
+import { ServerImportConfigModal } from "./components/groups/ServerImportConfigModal/ServerImportConfigModal";
+import { ServerImportJsonModal } from "./components/groups/ServerImportJsonModal/ServerImportJsonModal";
 import { ConnectionInfoModal } from "./components/groups/ConnectionInfoModal/ConnectionInfoModal";
 import { OutputValidationModal } from "./components/groups/OutputValidationModal/OutputValidationModal";
 import { UrlElicitationErrorModal } from "./components/groups/UrlElicitationErrorModal/UrlElicitationErrorModal";
@@ -489,6 +491,7 @@ function App() {
     updateServerSettings,
     removeServer,
     reorderServers,
+    importSource,
   } = useServers({
     baseUrl:
       typeof window !== "undefined"
@@ -503,6 +506,10 @@ function App() {
     mode: ServerConfigModalMode;
     targetId?: string;
   } | null>(null);
+  // Import-flow modals (#1348): "Import config" (other-client config merge) and
+  // "Import server.json" (registry single-server import).
+  const [importConfigOpen, setImportConfigOpen] = useState(false);
+  const [importJsonOpen, setImportJsonOpen] = useState(false);
   const [settingsModalTargetId, setSettingsModalTargetId] = useState<
     string | undefined
   >(undefined);
@@ -2083,14 +2090,6 @@ function App() {
     );
   }, [logs, activeServerId]);
 
-  // Action stubs — these UI affordances exist but require additional
-  // wiring (server CRUD, history pinning, app sandbox round-trip, log
-  // export). Tracked separately; the noop keeps the prop interface
-  // satisfied without lying about behavior.
-  const todoNoop = useCallback(() => {
-    /* TODO: not wired yet */
-  }, []);
-
   // Download the current server list as a canonical mcp.json file. Uses the
   // in-memory `servers` list (kept in sync with disk by useServers' refresh-
   // after-mutate flow) so there's no extra HTTP roundtrip. Serialization
@@ -2400,8 +2399,8 @@ function App() {
           void onDisconnect();
         }}
         onServerAdd={() => setConfigModal({ mode: "add" })}
-        onServerImportConfig={todoNoop}
-        onServerImportJson={todoNoop}
+        onServerImportConfig={() => setImportConfigOpen(true)}
+        onServerImportJson={() => setImportJsonOpen(true)}
         onServerExport={onServerExport}
         onConnectionInfo={() => setConnectionInfoModalOpen(true)}
         onServerSettings={(id) => setSettingsModalTargetId(id)}
@@ -2490,6 +2489,20 @@ function App() {
         onClose={() => setConfigModal(null)}
         onSubmit={onConfigSubmit}
       />
+      <ServerImportConfigModal
+        opened={importConfigOpen}
+        existingIds={existingIds}
+        onClose={() => setImportConfigOpen(false)}
+        onFetchSource={importSource}
+        onAddServer={addServer}
+        onUpdateServer={updateServer}
+      />
+      <ServerImportJsonModal
+        opened={importJsonOpen}
+        existingIds={existingIds}
+        onClose={() => setImportJsonOpen(false)}
+        onAddServer={addServer}
+      />
       <ServerSettingsModal
         // Remount per open (and per target server) so the accordion resets to
         // its initial "options" section — the body-dropped toast deep-links
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
index 1b84e31672..df7ed0a185 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
@@ -13,7 +13,6 @@ const meta: Meta<typeof ImportServerJsonPanel> = {
   component: ImportServerJsonPanel,
   args: {
     onJsonChange: fn(),
-    onValidate: fn(),
     onSelectPackage: fn(),
     onEnvVarChange: fn(),
     onServerNameChange: fn(),
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
index 4fdb9ffd85..b7e4047cb2 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
@@ -16,7 +16,6 @@ const emptyDraft: InspectorServerJsonDraft = {
 
 const baseHandlers = {
   onJsonChange: vi.fn(),
-  onValidate: vi.fn(),
   onSelectPackage: vi.fn(),
   onEnvVarChange: vi.fn(),
   onServerNameChange: vi.fn(),
@@ -25,7 +24,7 @@ const baseHandlers = {
 };
 
 describe("ImportServerJsonPanel", () => {
-  it("renders the title and the action buttons", () => {
+  it("renders the action buttons", () => {
     renderWithMantine(
       <ImportServerJsonPanel
         {...baseHandlers}
@@ -34,12 +33,6 @@ describe("ImportServerJsonPanel", () => {
         envVars={[]}
       />,
     );
-    expect(
-      screen.getByText("Import MCP Registry server.json"),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: "Validate Again" }),
-    ).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "Add Server" }),
@@ -65,15 +58,26 @@ describe("ImportServerJsonPanel", () => {
     expect(onJsonChange).toHaveBeenCalledWith("x");
   });
 
-  it("invokes onValidate, onCancel, and onAddServer when their buttons are clicked", async () => {
+  it("disables the Add Server button when addDisabled is set", () => {
+    renderWithMantine(
+      <ImportServerJsonPanel
+        {...baseHandlers}
+        addDisabled
+        draft={emptyDraft}
+        validation={[]}
+        envVars={[]}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Add Server" })).toBeDisabled();
+  });
+
+  it("invokes onCancel and onAddServer when their buttons are clicked", async () => {
     const user = userEvent.setup();
-    const onValidate = vi.fn();
     const onCancel = vi.fn();
     const onAddServer = vi.fn();
     renderWithMantine(
       <ImportServerJsonPanel
         {...baseHandlers}
-        onValidate={onValidate}
         onCancel={onCancel}
         onAddServer={onAddServer}
         draft={emptyDraft}
@@ -81,10 +85,8 @@ describe("ImportServerJsonPanel", () => {
         envVars={[]}
       />,
     );
-    await user.click(screen.getByRole("button", { name: "Validate Again" }));
     await user.click(screen.getByRole("button", { name: "Cancel" }));
     await user.click(screen.getByRole("button", { name: "Add Server" }));
-    expect(onValidate).toHaveBeenCalledTimes(1);
     expect(onCancel).toHaveBeenCalledTimes(1);
     expect(onAddServer).toHaveBeenCalledTimes(1);
   });
@@ -230,6 +232,45 @@ describe("ImportServerJsonPanel", () => {
     expect(onServerNameChange).toHaveBeenCalledWith("");
   });
 
+  it("does not render the file picker when onPickFile is absent", () => {
+    renderWithMantine(
+      <ImportServerJsonPanel
+        {...baseHandlers}
+        draft={emptyDraft}
+        validation={[]}
+        envVars={[]}
+      />,
+    );
+    expect(
+      screen.queryByRole("button", { name: /Choose file/ }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders a file picker and invokes onPickFile on upload", async () => {
+    const user = userEvent.setup();
+    const onPickFile = vi.fn();
+    renderWithMantine(
+      <ImportServerJsonPanel
+        {...baseHandlers}
+        onPickFile={onPickFile}
+        draft={emptyDraft}
+        validation={[]}
+        envVars={[]}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: /Choose file/ }),
+    ).toBeInTheDocument();
+    const file = new File(["{}"], "server.json", {
+      type: "application/json",
+    });
+    const input = document.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
+    await user.upload(input, file);
+    expect(onPickFile).toHaveBeenCalledTimes(1);
+  });
+
   it("renders the existing nameOverride value", () => {
     renderWithMantine(
       <ImportServerJsonPanel
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index 49a3279430..228406216d 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -1,6 +1,7 @@
 import {
   Button,
   Divider,
+  FileButton,
   Group,
   Radio,
   Stack,
@@ -36,12 +37,19 @@ export interface ImportServerJsonPanelProps {
   packages?: PackageInfo[];
   envVars: EnvVarInfo[];
   onJsonChange: (content: string) => void;
-  onValidate: () => void;
   onSelectPackage: (index: number) => void;
   onEnvVarChange: (name: string, value: string) => void;
   onServerNameChange: (name: string) => void;
   onAddServer: () => void;
+  /** Disables the Add Server button while the pasted content isn't valid. */
+  addDisabled?: boolean;
   onCancel: () => void;
+  /**
+   * Load server.json content from a file. When provided, a "Choose file…"
+   * button is rendered next to the paste hint; the handler reads the file and
+   * feeds its text back through `onJsonChange`.
+   */
+  onPickFile?: (file: File | null) => void;
 }
 
 const validationIcons: Record<
@@ -69,18 +77,28 @@ export function ImportServerJsonPanel({
   packages,
   envVars,
   onJsonChange,
-  onValidate,
   onSelectPackage,
   onEnvVarChange,
   onServerNameChange,
   onAddServer,
+  addDisabled,
   onCancel,
+  onPickFile,
 }: ImportServerJsonPanelProps) {
   return (
     <Stack gap="md">
-      <Title order={4}>Import MCP Registry server.json</Title>
-
-      <HintText>Paste server.json content or drag and drop a file:</HintText>
+      <Group justify="space-between" align="center" wrap="nowrap">
+        <HintText>Paste server.json content, or load it from a file:</HintText>
+        {onPickFile ? (
+          <FileButton accept="application/json,.json" onChange={onPickFile}>
+            {(props) => (
+              <Button {...props} variant="default" size="xs">
+                Choose file…
+              </Button>
+            )}
+          </FileButton>
+        ) : null}
+      </Group>
 
       <Textarea
         value={draft.rawText}
@@ -174,13 +192,12 @@ export function ImportServerJsonPanel({
       />
 
       <Group justify="flex-end">
-        <Button variant="light" onClick={onValidate}>
-          Validate Again
-        </Button>
         <Button variant="light" onClick={onCancel}>
           Cancel
         </Button>
-        <Button onClick={onAddServer}>Add Server</Button>
+        <Button onClick={onAddServer} disabled={addDisabled}>
+          Add Server
+        </Button>
       </Group>
     </Stack>
   );
diff --git a/clients/web/src/components/groups/ServerConfigModal/ServerConfigModal.tsx b/clients/web/src/components/groups/ServerConfigModal/ServerConfigModal.tsx
index 4a6cf570fd..f2fff8226b 100644
--- a/clients/web/src/components/groups/ServerConfigModal/ServerConfigModal.tsx
+++ b/clients/web/src/components/groups/ServerConfigModal/ServerConfigModal.tsx
@@ -51,6 +51,7 @@ interface FormState {
 const SectionStack = Stack.withProps({ gap: "md" });
 const FieldGrid = Stack.withProps({ gap: "sm" });
 const Actions = Group.withProps({ justify: "flex-end", gap: "sm", mt: "md" });
+const ModalTitle = Text.withProps({ fw: 700, span: true });
 
 const MODE_TITLES: Record<ServerConfigModalMode, string> = {
   add: "Add server",
@@ -255,7 +256,7 @@ export function ServerConfigModal({
       onClose={onClose}
       size="lg"
       centered
-      title={MODE_TITLES[mode]}
+      title={<ModalTitle>{MODE_TITLES[mode]}</ModalTitle>}
     >
       <SectionStack>
         <FieldGrid>
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.stories.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.stories.tsx
new file mode 100644
index 0000000000..e85cb25fce
--- /dev/null
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.stories.tsx
@@ -0,0 +1,83 @@
+import { AppShell } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { useArgs } from "storybook/preview-api";
+import type { ImportSourceResult } from "@inspector/core/mcp/import/index.js";
+import {
+  ServerImportConfigModal,
+  type ServerImportConfigModalProps,
+} from "./ServerImportConfigModal";
+
+function InteractiveRender(args: ServerImportConfigModalProps) {
+  const [, updateArgs] = useArgs<ServerImportConfigModalProps>();
+  return (
+    <AppShell>
+      <AppShell.Main>
+        <ServerImportConfigModal
+          {...args}
+          onClose={() => {
+            args.onClose();
+            updateArgs({ opened: false });
+          }}
+        />
+      </AppShell.Main>
+    </AppShell>
+  );
+}
+
+const fetchResult: ImportSourceResult = {
+  type: "cursor",
+  found: true,
+  path: "/home/u/.cursor/mcp.json",
+  searched: ["/home/u/.cursor/mcp.json"],
+  config: {
+    mcpServers: {
+      "new-server": { type: "stdio", command: "npx", args: ["-y", "demo"] },
+      existing: { type: "streamable-http", url: "https://example.com/mcp" },
+    },
+  },
+};
+
+const meta: Meta<typeof ServerImportConfigModal> = {
+  title: "Groups/ServerImportConfigModal",
+  component: ServerImportConfigModal,
+  parameters: { layout: "fullscreen" },
+  render: InteractiveRender,
+  args: {
+    opened: true,
+    existingIds: ["existing"],
+    onClose: fn(),
+    onFetchSource: fn(async () => fetchResult),
+    onAddServer: fn(async () => undefined),
+    onUpdateServer: fn(async () => undefined),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServerImportConfigModal>;
+
+export const SourcePicker: Story = {
+  play: async ({ canvasElement }) => {
+    const body = within(canvasElement.ownerDocument.body);
+    await expect(await body.findByLabelText("Client")).toBeInTheDocument();
+    await expect(
+      body.getByRole("button", { name: "Import" }),
+    ).toBeInTheDocument();
+    await expect(
+      body.getByRole("button", { name: /From file/ }),
+    ).toBeInTheDocument();
+  },
+};
+
+export const ReviewWithConflict: Story = {
+  play: async ({ canvasElement }) => {
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.selectOptions(
+      await body.findByLabelText("Client"),
+      "Cursor",
+    );
+    await userEvent.click(body.getByRole("button", { name: "Import" }));
+    await expect(await body.findByText("New servers (1)")).toBeInTheDocument();
+    await expect(body.getByText("Already exists (1)")).toBeInTheDocument();
+  },
+};
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
new file mode 100644
index 0000000000..e59e3f7f40
--- /dev/null
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
@@ -0,0 +1,342 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import {
+  renderWithMantine,
+  screen,
+  waitFor,
+  within,
+} from "../../../test/renderWithMantine";
+import type { ImportSourceResult } from "@inspector/core/mcp/import/index.js";
+import { ServerImportConfigModal } from "./ServerImportConfigModal";
+
+const sourceWithConflict: ImportSourceResult = {
+  type: "cursor",
+  found: true,
+  path: "/home/u/.cursor/mcp.json",
+  searched: ["/home/u/.cursor/mcp.json"],
+  config: {
+    mcpServers: {
+      alpha: { type: "stdio", command: "a" },
+      existing: { type: "stdio", command: "e" },
+    },
+  },
+};
+
+interface Handlers {
+  onClose: ReturnType<typeof vi.fn>;
+  onFetchSource: ReturnType<typeof vi.fn>;
+  onAddServer: ReturnType<typeof vi.fn>;
+  onUpdateServer: ReturnType<typeof vi.fn>;
+}
+
+function setup(
+  fetchResult: ImportSourceResult | Error = sourceWithConflict,
+  existingIds: string[] = ["existing"],
+): Handlers & { container: HTMLElement } {
+  const onClose = vi.fn();
+  const onFetchSource = vi.fn(() =>
+    fetchResult instanceof Error
+      ? Promise.reject(fetchResult)
+      : Promise.resolve(fetchResult),
+  );
+  const onAddServer = vi.fn().mockResolvedValue(undefined);
+  const onUpdateServer = vi.fn().mockResolvedValue(undefined);
+  const { container } = renderWithMantine(
+    <ServerImportConfigModal
+      opened
+      existingIds={existingIds}
+      onClose={onClose}
+      onFetchSource={onFetchSource}
+      onAddServer={onAddServer}
+      onUpdateServer={onUpdateServer}
+    />,
+  );
+  return { onClose, onFetchSource, onAddServer, onUpdateServer, container };
+}
+
+/** Choose a client in the source dropdown and click Import. */
+async function pickClientAndImport(
+  user: ReturnType<typeof userEvent.setup>,
+  label: string,
+) {
+  await user.selectOptions(screen.getByLabelText("Client"), label);
+  await user.click(screen.getByRole("button", { name: "Import" }));
+}
+
+describe("ServerImportConfigModal", () => {
+  it("renders nothing when closed", () => {
+    renderWithMantine(
+      <ServerImportConfigModal
+        opened={false}
+        existingIds={[]}
+        onClose={vi.fn()}
+        onFetchSource={vi.fn()}
+        onAddServer={vi.fn()}
+        onUpdateServer={vi.fn()}
+      />,
+    );
+    expect(screen.queryByText("Import config")).not.toBeInTheDocument();
+  });
+
+  it("renders a client dropdown, an Import button, and a file picker", () => {
+    setup();
+    // Import is disabled until a client is chosen.
+    expect(screen.getByRole("button", { name: "Import" })).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: /From file/ }),
+    ).toBeInTheDocument();
+    // The dropdown exposes every strategy as an option.
+    for (const label of ["Claude Desktop", "Cursor", "Cline", "VS Code"]) {
+      expect(screen.getByRole("option", { name: label })).toBeInTheDocument();
+    }
+  });
+
+  it("enables Import once a client is selected", async () => {
+    const user = userEvent.setup();
+    setup();
+    await user.selectOptions(screen.getByLabelText("Client"), "Cursor");
+    expect(screen.getByRole("button", { name: "Import" })).toBeEnabled();
+  });
+
+  it("fetches a source and shows additions + conflicts in review", async () => {
+    const user = userEvent.setup();
+    const h = setup();
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() =>
+      expect(screen.getByText("New servers (1)")).toBeInTheDocument(),
+    );
+    expect(h.onFetchSource).toHaveBeenCalledWith("cursor");
+    expect(screen.getByText("alpha")).toBeInTheDocument();
+    expect(screen.getByText("Already exists (1)")).toBeInTheDocument();
+    expect(screen.getByText("existing")).toBeInTheDocument();
+  });
+
+  it("imports additions and skips conflicts by default", async () => {
+    const user = userEvent.setup();
+    const h = setup();
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("New servers (1)"));
+    // Default: 1 addition + 0 non-skipped conflicts.
+    await user.click(screen.getByRole("button", { name: /Import 1 server/ }));
+    await waitFor(() =>
+      expect(screen.getByText("Import complete")).toBeInTheDocument(),
+    );
+    expect(h.onAddServer).toHaveBeenCalledWith("alpha", {
+      type: "stdio",
+      command: "a",
+    });
+    expect(h.onUpdateServer).not.toHaveBeenCalled();
+    const addedRow = screen.getByText("alpha").parentElement as HTMLElement;
+    expect(within(addedRow).getByText("Imported")).toBeInTheDocument();
+    const skippedRow = screen.getByText("existing")
+      .parentElement as HTMLElement;
+    expect(within(skippedRow).getByText("Skipped")).toBeInTheDocument();
+  });
+
+  it("lets the user skip an individual new server", async () => {
+    const user = userEvent.setup();
+    setup();
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("New servers (1)"));
+    // Toggle the new server "alpha" to Skip (its row's segmented control).
+    const alphaRow = screen.getByText("alpha").parentElement as HTMLElement;
+    await user.click(within(alphaRow).getByText("Skip"));
+    // alpha skipped + conflict "existing" skipped by default → nothing to import.
+    expect(
+      screen.getByRole("button", { name: /Import 0 servers/ }),
+    ).toBeDisabled();
+  });
+
+  it("skips a deselected new server while still importing others", async () => {
+    const user = userEvent.setup();
+    const h = setup();
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("New servers (1)"));
+    const alphaRow = screen.getByText("alpha").parentElement as HTMLElement;
+    await user.click(within(alphaRow).getByText("Skip"));
+    // Overwrite the conflict so there's still one server to import.
+    await user.click(screen.getByText("Overwrite"));
+    await user.click(screen.getByRole("button", { name: /Import 1 server/ }));
+    await waitFor(() => screen.getByText("Import complete"));
+    expect(h.onAddServer).not.toHaveBeenCalled();
+    expect(h.onUpdateServer).toHaveBeenCalledWith("existing", "existing", {
+      type: "stdio",
+      command: "e",
+    });
+    const alphaSummaryRow = screen.getByText("alpha")
+      .parentElement as HTMLElement;
+    expect(within(alphaSummaryRow).getByText("Skipped")).toBeInTheDocument();
+  });
+
+  it("overwrites a conflict when chosen", async () => {
+    const user = userEvent.setup();
+    const h = setup();
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("Already exists (1)"));
+    await user.click(screen.getByText("Overwrite"));
+    await user.click(screen.getByRole("button", { name: /Import 2 servers/ }));
+    await waitFor(() => screen.getByText("Import complete"));
+    expect(h.onUpdateServer).toHaveBeenCalledWith("existing", "existing", {
+      type: "stdio",
+      command: "e",
+    });
+  });
+
+  it("renames a conflict to the supplied id", async () => {
+    const user = userEvent.setup();
+    const h = setup();
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("Already exists (1)"));
+    await user.click(screen.getByText("Rename"));
+    const renameInput = screen.getByLabelText("New id for existing");
+    // Default rename value is existing-2.
+    expect((renameInput as HTMLInputElement).value).toBe("existing-2");
+    await user.clear(renameInput);
+    await user.type(renameInput, "existing-copy");
+    await user.click(screen.getByRole("button", { name: /Import 2 servers/ }));
+    await waitFor(() => screen.getByText("Import complete"));
+    expect(h.onAddServer).toHaveBeenCalledWith("existing-copy", {
+      type: "stdio",
+      command: "e",
+    });
+  });
+
+  it("reports a per-server failure in the summary", async () => {
+    const user = userEvent.setup();
+    const h = setup();
+    h.onAddServer.mockRejectedValueOnce(new Error("boom"));
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("New servers (1)"));
+    await user.click(screen.getByRole("button", { name: /Import 1 server/ }));
+    await waitFor(() => screen.getByText("Import complete"));
+    const failedRow = screen.getByText("alpha").parentElement as HTMLElement;
+    expect(within(failedRow).getByText("Failed")).toBeInTheDocument();
+    expect(screen.getByText("boom")).toBeInTheDocument();
+  });
+
+  it("shows the searched-paths notice when no config is found", async () => {
+    const user = userEvent.setup();
+    setup({
+      type: "cursor",
+      found: false,
+      searched: ["/home/u/.cursor/mcp.json"],
+    });
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() =>
+      expect(screen.getByText(/No config found/)).toBeInTheDocument(),
+    );
+  });
+
+  it("shows an error when the source has a parse error", async () => {
+    const user = userEvent.setup();
+    setup({
+      type: "cursor",
+      found: true,
+      error: "Invalid JSON: bad",
+      searched: ["/home/u/.cursor/mcp.json"],
+    });
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() =>
+      expect(screen.getByText(/Invalid JSON: bad/)).toBeInTheDocument(),
+    );
+  });
+
+  it("shows an error when the fetch rejects", async () => {
+    const user = userEvent.setup();
+    setup(new Error("network down"));
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() =>
+      expect(screen.getByText(/network down/)).toBeInTheDocument(),
+    );
+  });
+
+  it("parses an uploaded file (mcpServers) into review", async () => {
+    const user = userEvent.setup();
+    setup();
+    const file = new File(
+      [JSON.stringify({ mcpServers: { fromfile: { command: "x" } } })],
+      "mcp.json",
+      { type: "application/json" },
+    );
+    const input = document.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
+    await user.upload(input, file);
+    await waitFor(() =>
+      expect(screen.getByText("fromfile")).toBeInTheDocument(),
+    );
+  });
+
+  it("parses an uploaded VS Code file (servers) into review", async () => {
+    const user = userEvent.setup();
+    setup();
+    const file = new File(
+      [JSON.stringify({ servers: { vscodesrv: { command: "x" } } })],
+      "mcp.json",
+      { type: "application/json" },
+    );
+    const input = document.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
+    await user.upload(input, file);
+    await waitFor(() =>
+      expect(screen.getByText("vscodesrv")).toBeInTheDocument(),
+    );
+  });
+
+  it("shows an error for an unparseable uploaded file", async () => {
+    const user = userEvent.setup();
+    setup();
+    const file = new File(["{not json"], "mcp.json", {
+      type: "application/json",
+    });
+    const input = document.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
+    await user.upload(input, file);
+    await waitFor(() =>
+      expect(screen.getByText(/Invalid JSON/)).toBeInTheDocument(),
+    );
+  });
+
+  it("reports when the selected source has no servers", async () => {
+    const user = userEvent.setup();
+    setup({
+      type: "cursor",
+      found: true,
+      searched: [],
+      config: { mcpServers: {} },
+    });
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() =>
+      expect(screen.getByText(/No servers found/)).toBeInTheDocument(),
+    );
+  });
+
+  it("goes back from review to the source picker", async () => {
+    const user = userEvent.setup();
+    setup();
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("New servers (1)"));
+    await user.click(screen.getByRole("button", { name: "Back" }));
+    // Back to the source picker (dropdown + Import button).
+    expect(screen.getByLabelText("Client")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Import" })).toBeInTheDocument();
+  });
+
+  it("closes from the summary via Done", async () => {
+    const user = userEvent.setup();
+    const h = setup({
+      type: "cursor",
+      found: true,
+      searched: [],
+      config: { mcpServers: { only: { command: "x" } } },
+    });
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("New servers (1)"));
+    await user.click(screen.getByRole("button", { name: /Import 1 server/ }));
+    await waitFor(() => screen.getByText("Import complete"));
+    await user.click(screen.getByRole("button", { name: "Done" }));
+    expect(h.onClose).toHaveBeenCalled();
+  });
+});
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
new file mode 100644
index 0000000000..8526561496
--- /dev/null
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
@@ -0,0 +1,481 @@
+import { useMemo, useState } from "react";
+import {
+  Alert,
+  Badge,
+  Button,
+  FileButton,
+  Group,
+  Loader,
+  Modal,
+  NativeSelect,
+  SegmentedControl,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import {
+  IMPORT_STRATEGY_LIST,
+  parseMcpServersConfig,
+  parseVsCodeConfig,
+  planImport,
+  uniqueId,
+  type ImportSourceResult,
+  type ConflictResolution,
+} from "@inspector/core/mcp/import/index.js";
+import type { MCPConfig, MCPServerConfig } from "@inspector/core/mcp/types.js";
+
+export interface ServerImportConfigModalProps {
+  opened: boolean;
+  /** Ids already in the catalog — drives conflict detection + rename defaults. */
+  existingIds: string[];
+  onClose: () => void;
+  /** Read a client's well-known config on the backend (authed GET). */
+  onFetchSource: (type: string) => Promise<ImportSourceResult>;
+  onAddServer: (id: string, config: MCPServerConfig) => Promise<void>;
+  onUpdateServer: (
+    originalId: string,
+    newId: string,
+    config: MCPServerConfig,
+  ) => Promise<void>;
+}
+
+type Phase = "select" | "loading" | "review" | "summary";
+
+interface Resolution {
+  action: ConflictResolution;
+  renameTo: string;
+}
+
+/** Per-row choice for a brand-new (non-conflicting) server. */
+type AdditionAction = "import" | "skip";
+
+interface ImportOutcome {
+  id: string;
+  status: "added" | "overwritten" | "renamed" | "skipped" | "failed";
+  detail?: string;
+}
+
+const SectionStack = Stack.withProps({ gap: "md" });
+const SourceRow = Group.withProps({
+  gap: "sm",
+  align: "flex-end",
+  wrap: "nowrap",
+});
+const Actions = Group.withProps({ justify: "flex-end", gap: "sm", mt: "md" });
+const RowGroup = Group.withProps({
+  justify: "space-between",
+  wrap: "nowrap",
+  gap: "sm",
+});
+const DimText = Text.withProps({ size: "sm", c: "dimmed" });
+const ModalTitle = Text.withProps({ fw: 700, span: true });
+
+/**
+ * Source-picker dropdown options, derived from the strategy registry. A leading
+ * empty option acts as the "nothing selected yet" placeholder (Import stays
+ * disabled until a real client is chosen).
+ */
+const SOURCE_OPTIONS = [
+  { value: "", label: "Select a client…" },
+  ...IMPORT_STRATEGY_LIST.map((s) => ({ value: s.id, label: s.label })),
+];
+
+const RESOLUTION_DATA = [
+  { value: "overwrite", label: "Overwrite" },
+  { value: "skip", label: "Skip" },
+  { value: "rename", label: "Rename" },
+];
+
+const ADDITION_DATA = [
+  { value: "import", label: "Import" },
+  { value: "skip", label: "Skip" },
+];
+
+/** Display label + badge color for each per-server import outcome. */
+const OUTCOME_META: Record<
+  ImportOutcome["status"],
+  { label: string; color: string }
+> = {
+  added: { label: "Imported", color: "green" },
+  overwritten: { label: "Overwritten", color: "blue" },
+  renamed: { label: "Renamed", color: "blue" },
+  skipped: { label: "Skipped", color: "gray" },
+  failed: { label: "Failed", color: "red" },
+};
+
+/** Try the standard `{ mcpServers }` shape first, then VS Code's `servers`. */
+function parseAnyClientConfig(raw: string): MCPConfig {
+  try {
+    return parseMcpServersConfig(raw);
+  } catch (mcpErr) {
+    try {
+      return parseVsCodeConfig(raw);
+    } catch {
+      // Surface the primary parser's message — it's the common case.
+      throw mcpErr instanceof Error ? mcpErr : new Error(String(mcpErr));
+    }
+  }
+}
+
+/**
+ * Source picker + conflict-resolution flow for importing another MCP client's
+ * config (#1348). Phase 1 lets the user pick a known client (read on the
+ * backend) or upload a file; phase 2 reviews the parsed servers, resolving any
+ * id collisions (overwrite / skip / rename) before writing them through the
+ * add/update callbacks; phase 3 shows a per-server outcome summary.
+ */
+export function ServerImportConfigModal({
+  opened,
+  existingIds,
+  onClose,
+  onFetchSource,
+  onAddServer,
+  onUpdateServer,
+}: ServerImportConfigModalProps) {
+  const [phase, setPhase] = useState<Phase>("select");
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [notice, setNotice] = useState<string | undefined>(undefined);
+  const [incoming, setIncoming] = useState<MCPConfig | null>(null);
+  const [resolutions, setResolutions] = useState<Record<string, Resolution>>(
+    {},
+  );
+  const [additionActions, setAdditionActions] = useState<
+    Record<string, AdditionAction>
+  >({});
+  const [outcomes, setOutcomes] = useState<ImportOutcome[]>([]);
+  const [selectedType, setSelectedType] = useState<string | null>(null);
+
+  // Reset the wizard each time the modal transitions to open. Done during
+  // render (React's "adjust state when a prop changes" pattern) rather than in
+  // an effect so there's no extra commit/cascade.
+  const [prevOpened, setPrevOpened] = useState(opened);
+  if (opened !== prevOpened) {
+    setPrevOpened(opened);
+    if (opened) {
+      setPhase("select");
+      setError(undefined);
+      setNotice(undefined);
+      setIncoming(null);
+      setResolutions({});
+      setAdditionActions({});
+      setOutcomes([]);
+      setSelectedType(null);
+    }
+  }
+
+  const plan = useMemo(
+    () => (incoming ? planImport(incoming, existingIds) : null),
+    [incoming, existingIds],
+  );
+
+  function beginReview(config: MCPConfig) {
+    const entries = Object.keys(config.mcpServers);
+    if (entries.length === 0) {
+      setError("No servers found in the selected source.");
+      setPhase("select");
+      return;
+    }
+    const fresh = planImport(config, existingIds);
+    const taken = [...existingIds, ...fresh.additions.map((a) => a.id)];
+    const initial: Record<string, Resolution> = {};
+    for (const conflict of fresh.conflicts) {
+      initial[conflict.id] = {
+        action: "skip",
+        renameTo: uniqueId(conflict.id, taken),
+      };
+    }
+    // New servers default to "import"; the user can opt individual ones out.
+    const initialAdds: Record<string, AdditionAction> = {};
+    for (const add of fresh.additions) {
+      initialAdds[add.id] = "import";
+    }
+    setIncoming(config);
+    setResolutions(initial);
+    setAdditionActions(initialAdds);
+    setError(undefined);
+    setPhase("review");
+  }
+
+  async function handlePickSource(type: string) {
+    setPhase("loading");
+    setError(undefined);
+    setNotice(undefined);
+    try {
+      const result = await onFetchSource(type);
+      if (result.error) {
+        setError(result.error);
+        setPhase("select");
+        return;
+      }
+      if (!result.found || !result.config) {
+        setNotice(
+          `No config found. Searched: ${result.searched.join(", ")}. Try uploading a file instead.`,
+        );
+        setPhase("select");
+        return;
+      }
+      beginReview(result.config);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setPhase("select");
+    }
+  }
+
+  async function handlePickFile(file: File | null) {
+    if (!file) return;
+    setError(undefined);
+    setNotice(undefined);
+    try {
+      const raw = await file.text();
+      beginReview(parseAnyClientConfig(raw));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  function setResolution(id: string, action: ConflictResolution) {
+    setResolutions((r) => ({ ...r, [id]: { ...r[id], action } }));
+  }
+
+  function setRenameTo(id: string, renameTo: string) {
+    setResolutions((r) => ({ ...r, [id]: { ...r[id], renameTo } }));
+  }
+
+  function setAdditionAction(id: string, action: AdditionAction) {
+    setAdditionActions((a) => ({ ...a, [id]: action }));
+  }
+
+  async function applyEntry(
+    id: string,
+    outcome: ImportOutcome["status"],
+    write: () => Promise<void>,
+  ): Promise<ImportOutcome> {
+    try {
+      await write();
+      return { id, status: outcome };
+    } catch (err) {
+      return {
+        id,
+        status: "failed",
+        detail: err instanceof Error ? err.message : String(err),
+      };
+    }
+  }
+
+  async function handleImport() {
+    if (!plan) return;
+    setPhase("loading");
+    const results: ImportOutcome[] = [];
+    for (const add of plan.additions) {
+      if ((additionActions[add.id] ?? "import") === "skip") {
+        results.push({ id: add.id, status: "skipped" });
+        continue;
+      }
+      results.push(
+        await applyEntry(add.id, "added", () =>
+          Promise.resolve(onAddServer(add.id, add.config)),
+        ),
+      );
+    }
+    for (const conflict of plan.conflicts) {
+      const res = resolutions[conflict.id] ?? {
+        action: "skip",
+        renameTo: conflict.id,
+      };
+      if (res.action === "skip") {
+        results.push({ id: conflict.id, status: "skipped" });
+      } else if (res.action === "overwrite") {
+        results.push(
+          await applyEntry(conflict.id, "overwritten", () =>
+            onUpdateServer(conflict.id, conflict.id, conflict.config),
+          ),
+        );
+      } else {
+        const newId = res.renameTo.trim() || conflict.id;
+        results.push(
+          await applyEntry(newId, "renamed", () =>
+            Promise.resolve(onAddServer(newId, conflict.config)),
+          ),
+        );
+      }
+    }
+    setOutcomes(results);
+    setPhase("summary");
+  }
+
+  const importCount = plan
+    ? plan.additions.filter(
+        (a) => (additionActions[a.id] ?? "import") === "import",
+      ).length +
+      plan.conflicts.filter(
+        (c) => (resolutions[c.id]?.action ?? "skip") !== "skip",
+      ).length
+    : 0;
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="lg"
+      centered
+      title={<ModalTitle>Import config</ModalTitle>}
+    >
+      <SectionStack>
+        {error ? (
+          <Alert color="red" title="Import error">
+            {error}
+          </Alert>
+        ) : null}
+        {notice ? <Alert color="yellow">{notice}</Alert> : null}
+
+        {phase === "select" ? (
+          <SectionStack>
+            <DimText>
+              Import MCP servers from another client. Choose a known client
+              (read on this machine) or upload its config file.
+            </DimText>
+            <SourceRow>
+              <NativeSelect
+                label="Client"
+                data={SOURCE_OPTIONS}
+                value={selectedType ?? ""}
+                onChange={(e) => setSelectedType(e.currentTarget.value || null)}
+                flex={1}
+              />
+              <Button
+                disabled={!selectedType}
+                onClick={() => {
+                  if (selectedType) void handlePickSource(selectedType);
+                }}
+              >
+                Import
+              </Button>
+              <FileButton
+                accept="application/json,.json"
+                onChange={handlePickFile}
+              >
+                {(props) => (
+                  <Button {...props} variant="default">
+                    From file…
+                  </Button>
+                )}
+              </FileButton>
+            </SourceRow>
+          </SectionStack>
+        ) : null}
+
+        {phase === "loading" ? (
+          <Group gap="sm">
+            <Loader size="sm" />
+            <Text size="sm">Working…</Text>
+          </Group>
+        ) : null}
+
+        {phase === "review" && plan ? (
+          <SectionStack>
+            {plan.additions.length > 0 ? (
+              <Stack gap="xs">
+                <Text fw={600} size="sm">
+                  New servers ({plan.additions.length})
+                </Text>
+                {plan.additions.map((a) => (
+                  <RowGroup key={a.id}>
+                    <Text size="sm">{a.id}</Text>
+                    <SegmentedControl
+                      size="xs"
+                      data={ADDITION_DATA}
+                      value={additionActions[a.id] ?? "import"}
+                      onChange={(value) =>
+                        setAdditionAction(a.id, value as AdditionAction)
+                      }
+                    />
+                  </RowGroup>
+                ))}
+              </Stack>
+            ) : null}
+
+            {plan.conflicts.length > 0 ? (
+              <Stack gap="xs">
+                <Text fw={600} size="sm">
+                  Already exists ({plan.conflicts.length})
+                </Text>
+                {plan.conflicts.map((conflict) => {
+                  const res = resolutions[conflict.id];
+                  return (
+                    <Stack key={conflict.id} gap="xs">
+                      <RowGroup>
+                        <Text size="sm">{conflict.id}</Text>
+                        <SegmentedControl
+                          size="xs"
+                          data={RESOLUTION_DATA}
+                          value={res?.action ?? "skip"}
+                          onChange={(value) =>
+                            setResolution(
+                              conflict.id,
+                              value as ConflictResolution,
+                            )
+                          }
+                        />
+                      </RowGroup>
+                      {res?.action === "rename" ? (
+                        <TextInput
+                          size="xs"
+                          aria-label={`New id for ${conflict.id}`}
+                          value={res.renameTo}
+                          onChange={(e) =>
+                            setRenameTo(conflict.id, e.currentTarget.value)
+                          }
+                        />
+                      ) : null}
+                    </Stack>
+                  );
+                })}
+              </Stack>
+            ) : null}
+
+            <Actions>
+              <Button variant="default" onClick={() => setPhase("select")}>
+                Back
+              </Button>
+              <Button
+                onClick={() => void handleImport()}
+                disabled={importCount === 0}
+              >
+                Import {importCount} server{importCount === 1 ? "" : "s"}
+              </Button>
+            </Actions>
+          </SectionStack>
+        ) : null}
+
+        {phase === "summary" ? (
+          <SectionStack>
+            <Text fw={600} size="sm">
+              Import complete
+            </Text>
+            {outcomes.map((o) => {
+              const meta = OUTCOME_META[o.status];
+              return (
+                <Stack key={`${o.id}-${o.status}`} gap={2}>
+                  <RowGroup>
+                    <Text size="sm">{o.id}</Text>
+                    <Badge color={meta.color} variant="light">
+                      {meta.label}
+                    </Badge>
+                  </RowGroup>
+                  {o.detail ? (
+                    <Text size="xs" c="var(--inspector-status-error)">
+                      {o.detail}
+                    </Text>
+                  ) : null}
+                </Stack>
+              );
+            })}
+            <Actions>
+              <Button onClick={onClose}>Done</Button>
+            </Actions>
+          </SectionStack>
+        ) : null}
+      </SectionStack>
+    </Modal>
+  );
+}
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.stories.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.stories.tsx
new file mode 100644
index 0000000000..fb815aefc0
--- /dev/null
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.stories.tsx
@@ -0,0 +1,53 @@
+import { AppShell } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, within } from "storybook/test";
+import { useArgs } from "storybook/preview-api";
+import {
+  ServerImportJsonModal,
+  type ServerImportJsonModalProps,
+} from "./ServerImportJsonModal";
+
+function InteractiveRender(args: ServerImportJsonModalProps) {
+  const [, updateArgs] = useArgs<ServerImportJsonModalProps>();
+  return (
+    <AppShell>
+      <AppShell.Main>
+        <ServerImportJsonModal
+          {...args}
+          onClose={() => {
+            args.onClose();
+            updateArgs({ opened: false });
+          }}
+        />
+      </AppShell.Main>
+    </AppShell>
+  );
+}
+
+const meta: Meta<typeof ServerImportJsonModal> = {
+  title: "Groups/ServerImportJsonModal",
+  component: ServerImportJsonModal,
+  parameters: { layout: "fullscreen" },
+  render: InteractiveRender,
+  args: {
+    opened: true,
+    existingIds: [],
+    onClose: fn(),
+    onAddServer: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServerImportJsonModal>;
+
+export const Empty: Story = {
+  play: async ({ canvasElement }) => {
+    const body = within(canvasElement.ownerDocument.body);
+    await expect(
+      await body.findByText("Import MCP Registry server.json"),
+    ).toBeInTheDocument();
+    await expect(
+      body.getByRole("button", { name: "Add Server" }),
+    ).toBeInTheDocument();
+  },
+};
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
new file mode 100644
index 0000000000..c7ea5e8316
--- /dev/null
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
@@ -0,0 +1,304 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import {
+  renderWithMantine,
+  screen,
+  fireEvent,
+  waitFor,
+} from "../../../test/renderWithMantine";
+import { ServerImportJsonModal } from "./ServerImportJsonModal";
+
+const npmJson = JSON.stringify({
+  name: "io.github.me/weather",
+  packages: [
+    {
+      registryType: "npm",
+      identifier: "@me/weather",
+      version: "1.0.0",
+      environmentVariables: [
+        { name: "API_KEY", isRequired: true },
+        { name: "LOG_LEVEL", default: "info" },
+      ],
+    },
+  ],
+});
+
+const multiPackageJson = JSON.stringify({
+  name: "io.github.me/multi",
+  packages: [
+    { registryType: "npm", identifier: "@me/multi" },
+    { registryType: "pypi", identifier: "multi-py" },
+  ],
+});
+
+/** The JSON textarea is the first textbox the panel renders. */
+function pasteJson(text: string) {
+  const textarea = screen.getAllByRole("textbox")[0];
+  fireEvent.change(textarea, { target: { value: text } });
+}
+
+describe("ServerImportJsonModal", () => {
+  it("renders nothing actionable when closed", () => {
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened={false}
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    expect(
+      screen.queryByText("Import MCP Registry server.json"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows an info prompt before any JSON is pasted", () => {
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    expect(
+      screen.getByText(/Paste server.json content to validate/),
+    ).toBeInTheDocument();
+  });
+
+  it("validates a pasted npm server.json and surfaces env vars", async () => {
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    pasteJson(npmJson);
+    // Validation is debounced, so it appears after a short pause.
+    expect(
+      await screen.findByText(/Valid server.json for "io.github.me\/weather"/),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/1 runnable option/)).toBeInTheDocument();
+    // Env var inputs are rendered (required one + defaulted one).
+    expect(screen.getByLabelText(/API_KEY/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/LOG_LEVEL/)).toBeInTheDocument();
+  });
+
+  it("reports a parse error for malformed JSON", async () => {
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    pasteJson("{not json");
+    expect(await screen.findByText(/Invalid JSON/)).toBeInTheDocument();
+  });
+
+  it("warns when the derived id already exists", async () => {
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={["weather"]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    pasteJson(npmJson);
+    expect(
+      await screen.findByText(/A server with id "weather" already exists/),
+    ).toBeInTheDocument();
+  });
+
+  it("builds the config with env overrides and calls onAddServer", async () => {
+    const user = userEvent.setup();
+    const onAddServer = vi.fn().mockResolvedValue(undefined);
+    const onClose = vi.fn();
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={onClose}
+        onAddServer={onAddServer}
+      />,
+    );
+    pasteJson(npmJson);
+    // The env-var inputs appear after the debounced parse.
+    await user.type(await screen.findByLabelText(/API_KEY/), "secret");
+    await user.click(screen.getByRole("button", { name: "Add Server" }));
+    await waitFor(() => expect(onAddServer).toHaveBeenCalledTimes(1));
+    const [id, config] = onAddServer.mock.calls[0];
+    expect(id).toBe("weather");
+    expect(config).toMatchObject({
+      type: "stdio",
+      command: "npx",
+      args: ["-y", "@me/weather@1.0.0"],
+      env: { API_KEY: "secret", LOG_LEVEL: "info" },
+    });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("honors a server name override", async () => {
+    const user = userEvent.setup();
+    const onAddServer = vi.fn().mockResolvedValue(undefined);
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={onAddServer}
+      />,
+    );
+    pasteJson(npmJson);
+    await user.type(screen.getByLabelText(/Server Name/), "my-weather");
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Add Server" })).toBeEnabled(),
+    );
+    await user.click(screen.getByRole("button", { name: "Add Server" }));
+    await waitFor(() => expect(onAddServer).toHaveBeenCalled());
+    expect(onAddServer.mock.calls[0][0]).toBe("my-weather");
+  });
+
+  it("lets the user pick among multiple packages", async () => {
+    const user = userEvent.setup();
+    const onAddServer = vi.fn().mockResolvedValue(undefined);
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={onAddServer}
+      />,
+    );
+    pasteJson(multiPackageJson);
+    // The package radios appear after the debounced parse.
+    await user.click(await screen.findByLabelText(/pypi: multi-py/));
+    await user.click(screen.getByRole("button", { name: "Add Server" }));
+    await waitFor(() => expect(onAddServer).toHaveBeenCalled());
+    expect(onAddServer.mock.calls[0][1]).toMatchObject({ command: "uvx" });
+  });
+
+  it("surfaces an onAddServer rejection instead of closing", async () => {
+    const user = userEvent.setup();
+    const onAddServer = vi.fn().mockRejectedValue(new Error("disk full"));
+    const onClose = vi.fn();
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={onClose}
+        onAddServer={onAddServer}
+      />,
+    );
+    pasteJson(npmJson);
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Add Server" })).toBeEnabled(),
+    );
+    await user.click(screen.getByRole("button", { name: "Add Server" }));
+    await waitFor(() =>
+      expect(screen.getByText(/disk full/)).toBeInTheDocument(),
+    );
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("disables Add Server until valid content is present", () => {
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Add Server" })).toBeDisabled();
+  });
+
+  it("guards against a live edit made before the debounce re-validates", async () => {
+    const onAddServer = vi.fn();
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={onAddServer}
+      />,
+    );
+    pasteJson(npmJson);
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Add Server" })).toBeEnabled(),
+    );
+    // Replace with invalid content; the button hasn't re-disabled yet (the
+    // debounce is still pending), so clicking exercises the submit-time guard.
+    pasteJson("{not json");
+    fireEvent.click(screen.getByRole("button", { name: "Add Server" }));
+    expect(onAddServer).not.toHaveBeenCalled();
+    expect(
+      await screen.findByText(/Fix the validation errors/),
+    ).toBeInTheDocument();
+  });
+
+  it("loads server.json from a chosen file", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    const file = new File([npmJson], "server.json", {
+      type: "application/json",
+    });
+    // The Modal is portaled, so query the file input from the document.
+    const input = document.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
+    await user.upload(input, file);
+    await waitFor(() =>
+      expect(
+        screen.getByText(/Valid server.json for "io.github.me\/weather"/),
+      ).toBeInTheDocument(),
+    );
+  });
+
+  it("rejects an invalid id override and blocks Add Server", async () => {
+    const user = userEvent.setup();
+    const onAddServer = vi.fn();
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={onAddServer}
+      />,
+    );
+    pasteJson(npmJson);
+    await user.type(screen.getByLabelText(/Server Name/), "bad id!");
+    expect(
+      await screen.findByText(/Server id must use only letters/),
+    ).toBeInTheDocument();
+    // An invalid id keeps the Add button disabled.
+    expect(screen.getByRole("button", { name: "Add Server" })).toBeDisabled();
+    expect(onAddServer).not.toHaveBeenCalled();
+  });
+
+  it("closes via Cancel", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={onClose}
+        onAddServer={vi.fn()}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
new file mode 100644
index 0000000000..5cd51ba476
--- /dev/null
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
@@ -0,0 +1,309 @@
+import { useEffect, useMemo, useState } from "react";
+import { Modal, Text } from "@mantine/core";
+import {
+  parseServerJson,
+  buildServerConfig,
+  type ParsedServerJson,
+  type ServerJsonOption,
+} from "@inspector/core/mcp/import/serverJson.js";
+import type {
+  InspectorServerJsonDraft,
+  MCPServerConfig,
+} from "@inspector/core/mcp/types.js";
+import {
+  ImportServerJsonPanel,
+  type EnvVarInfo,
+  type PackageInfo,
+  type ValidationResult,
+} from "../ImportServerJsonPanel/ImportServerJsonPanel";
+
+/** Allowed id pattern — mirrors validateStoreId in core/storage/store-io.ts. */
+const ID_PATTERN = /^[a-zA-Z0-9_-]+$/;
+
+const ModalTitle = Text.withProps({ fw: 700, span: true });
+
+export interface ServerImportJsonModalProps {
+  opened: boolean;
+  /** Ids already in use — drives the duplicate-id warning. */
+  existingIds: string[];
+  onClose: () => void;
+  /** Persist the chosen server. Resolves once the catalog has been updated. */
+  onAddServer: (id: string, config: MCPServerConfig) => Promise<void> | void;
+}
+
+const EMPTY_DRAFT: InspectorServerJsonDraft = {
+  rawText: "",
+  envOverrides: {},
+};
+
+/** Result of parsing the current draft text. */
+type ParseState =
+  | { ok: true; parsed: ParsedServerJson }
+  | { ok: false; error: string }
+  | { ok: null };
+
+function parseDraft(rawText: string): ParseState {
+  if (!rawText.trim()) return { ok: null };
+  try {
+    return { ok: true, parsed: parseServerJson(rawText) };
+  } catch (err) {
+    return {
+      ok: false,
+      error: err instanceof Error ? err.message : String(err),
+    };
+  }
+}
+
+/** The id the chosen server will be saved under. */
+function resolveId(
+  parsed: ParsedServerJson | undefined,
+  override: string | undefined,
+): string {
+  const trimmed = (override ?? "").trim();
+  if (trimmed) return trimmed;
+  return parsed?.serverName ?? "";
+}
+
+/** Debounce (ms) before a textarea edit re-triggers parse/validation. */
+const VALIDATE_DEBOUNCE_MS = 300;
+
+interface Selection {
+  parsed?: ParsedServerJson;
+  selectedIndex: number;
+  selectedOption?: ServerJsonOption;
+  targetId: string;
+  idIsValid: boolean;
+  idIsDuplicate: boolean;
+}
+
+/**
+ * Derive the chosen package/remote, the resulting id, and its validity from a
+ * parse state + the current draft. Pure, so the render path (debounced parse)
+ * and the submit path (live parse) can share it.
+ */
+function computeSelection(
+  parseState: ParseState,
+  draft: InspectorServerJsonDraft,
+  existingIds: string[],
+): Selection {
+  const parsed = parseState.ok === true ? parseState.parsed : undefined;
+  const selectedIndex = Math.min(
+    draft.selectedPackageIndex ?? 0,
+    Math.max((parsed?.options.length ?? 1) - 1, 0),
+  );
+  const selectedOption = parsed?.options[selectedIndex];
+  const targetId = resolveId(parsed, draft.nameOverride);
+  const idIsValid = targetId === "" || ID_PATTERN.test(targetId);
+  const idIsDuplicate = targetId !== "" && existingIds.includes(targetId);
+  return {
+    parsed,
+    selectedIndex,
+    selectedOption,
+    targetId,
+    idIsValid,
+    idIsDuplicate,
+  };
+}
+
+/**
+ * Wiring layer for the registry `server.json` import (#1348). Owns the draft +
+ * parse state and feeds the dumb `ImportServerJsonPanel`; on "Add Server" it
+ * builds the runnable config for the selected package/remote (merging the env
+ * overrides the user typed) and hands it to `onAddServer`.
+ */
+export function ServerImportJsonModal({
+  opened,
+  existingIds,
+  onClose,
+  onAddServer,
+}: ServerImportJsonModalProps) {
+  const [draft, setDraft] = useState<InspectorServerJsonDraft>(EMPTY_DRAFT);
+  const [submitError, setSubmitError] = useState<string | undefined>(undefined);
+  // Debounced copy of the raw text that drives parsing/validation, so typing
+  // doesn't re-parse on every keystroke. The textarea itself stays bound to the
+  // live `draft.rawText`.
+  const [debouncedText, setDebouncedText] = useState<string>(
+    EMPTY_DRAFT.rawText,
+  );
+
+  // Reset the draft each time the modal transitions to open. Done during render
+  // (React's "adjust state when a prop changes" pattern) rather than in an
+  // effect so there's no extra commit/cascade.
+  const [prevOpened, setPrevOpened] = useState(opened);
+  if (opened !== prevOpened) {
+    setPrevOpened(opened);
+    if (opened) {
+      setDraft(EMPTY_DRAFT);
+      setSubmitError(undefined);
+      setDebouncedText(EMPTY_DRAFT.rawText);
+    }
+  }
+
+  // Re-validate after the user pauses typing. setState lives in the timeout
+  // callback (not the effect body), so this doesn't cascade-render.
+  useEffect(() => {
+    const id = setTimeout(
+      () => setDebouncedText(draft.rawText),
+      VALIDATE_DEBOUNCE_MS,
+    );
+    return () => clearTimeout(id);
+  }, [draft.rawText]);
+
+  const parseState = useMemo(() => parseDraft(debouncedText), [debouncedText]);
+  const {
+    parsed,
+    selectedIndex,
+    selectedOption,
+    targetId,
+    idIsValid,
+    idIsDuplicate,
+  } = useMemo(
+    () => computeSelection(parseState, draft, existingIds),
+    [parseState, draft, existingIds],
+  );
+
+  // The Add button is enabled only when the (debounced) content validates: a
+  // parseable server.json with a runnable option and a valid, non-duplicate id.
+  const canAdd =
+    parsed !== undefined &&
+    selectedOption !== undefined &&
+    idIsValid &&
+    !idIsDuplicate;
+
+  const packages: PackageInfo[] | undefined = parsed?.options.map((o) => ({
+    registryType: o.registryType,
+    identifier: o.identifier,
+    runtimeHint: o.runtimeHint,
+  }));
+
+  const envVars: EnvVarInfo[] = (selectedOption?.envVars ?? []).map((v) => ({
+    name: v.name,
+    description: v.description,
+    required: v.required,
+    value: draft.envOverrides[v.name] ?? v.default ?? "",
+  }));
+
+  const validation: ValidationResult[] = useMemo(() => {
+    if (parseState.ok === null) {
+      return [
+        { type: "info", message: "Paste server.json content to validate." },
+      ];
+    }
+    if (parseState.ok === false) {
+      return [{ type: "error", message: parseState.error }];
+    }
+    const results: ValidationResult[] = [
+      {
+        type: "success",
+        message: `Valid server.json for "${parseState.parsed.fullName}".`,
+      },
+      {
+        type: "info",
+        message: `${parseState.parsed.options.length} runnable option(s) found.`,
+      },
+    ];
+    if (!idIsValid) {
+      results.push({
+        type: "error",
+        message:
+          "Server id must use only letters, numbers, hyphens, underscores.",
+      });
+    } else if (idIsDuplicate) {
+      results.push({
+        type: "warning",
+        message: `A server with id "${targetId}" already exists.`,
+      });
+    }
+    return results;
+  }, [parseState, idIsValid, idIsDuplicate, targetId]);
+
+  function setRawText(content: string) {
+    setSubmitError(undefined);
+    setDraft((d) => ({ ...d, rawText: content }));
+  }
+
+  function selectPackage(index: number) {
+    setDraft((d) => ({ ...d, selectedPackageIndex: index }));
+  }
+
+  function setEnvVar(name: string, value: string) {
+    setDraft((d) => ({
+      ...d,
+      envOverrides: { ...d.envOverrides, [name]: value },
+    }));
+  }
+
+  function setServerName(name: string) {
+    setDraft((d) => ({ ...d, nameOverride: name }));
+  }
+
+  async function pickFile(file: File | null) {
+    if (!file) return;
+    setSubmitError(undefined);
+    try {
+      const text = await file.text();
+      setDraft((d) => ({ ...d, rawText: text }));
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function handleAddServer() {
+    setSubmitError(undefined);
+    // Parse the live text (not the debounced copy) so a click in the brief
+    // window after an edit (before the Add button has re-disabled) still sees
+    // the latest content rather than importing stale input.
+    const sel = computeSelection(parseDraft(draft.rawText), draft, existingIds);
+    if (
+      !sel.parsed ||
+      !sel.selectedOption ||
+      !sel.idIsValid ||
+      sel.idIsDuplicate
+    ) {
+      setSubmitError("Fix the validation errors before adding the server.");
+      return;
+    }
+    // Only pass overrides for env vars the selected option declares.
+    const overrides: Record<string, string> = {};
+    for (const v of sel.selectedOption.envVars) {
+      const value = draft.envOverrides[v.name];
+      if (value !== undefined) overrides[v.name] = value;
+    }
+    const config = buildServerConfig(sel.selectedOption, overrides);
+    try {
+      await onAddServer(sel.targetId, config);
+      onClose();
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  const allValidation = submitError
+    ? [...validation, { type: "error" as const, message: submitError }]
+    : validation;
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="lg"
+      centered
+      title={<ModalTitle>Import MCP Registry server.json</ModalTitle>}
+    >
+      <ImportServerJsonPanel
+        draft={{ ...draft, selectedPackageIndex: selectedIndex }}
+        validation={allValidation}
+        packages={packages}
+        envVars={envVars}
+        onJsonChange={setRawText}
+        onSelectPackage={selectPackage}
+        onEnvVarChange={setEnvVar}
+        onServerNameChange={setServerName}
+        onAddServer={() => void handleAddServer()}
+        addDisabled={!canAdd}
+        onCancel={onClose}
+        onPickFile={(file) => void pickFile(file)}
+      />
+    </Modal>
+  );
+}
diff --git a/clients/web/src/test/core/react/useServers.test.tsx b/clients/web/src/test/core/react/useServers.test.tsx
index a63212fdc7..f2669dfff3 100644
--- a/clients/web/src/test/core/react/useServers.test.tsx
+++ b/clients/web/src/test/core/react/useServers.test.tsx
@@ -123,6 +123,29 @@ describe("useServers", () => {
     });
   });
 
+  it("importSource returns a result for a known source type", async () => {
+    const { result } = renderHook(() =>
+      useServers({ baseUrl: "http://test.local", fetchFn: h.fetchFn }),
+    );
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    const res = await result.current.importSource("cursor");
+    expect(res.type).toBe("cursor");
+    expect(typeof res.found).toBe("boolean");
+    expect(Array.isArray(res.searched)).toBe(true);
+  });
+
+  it("importSource throws on an unknown source type", async () => {
+    const { result } = renderHook(() =>
+      useServers({ baseUrl: "http://test.local", fetchFn: h.fetchFn }),
+    );
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    await expect(result.current.importSource("bogus")).rejects.toThrow(
+      /Unknown import source/,
+    );
+  });
+
   it("addServer throws on 409 (duplicate id)", async () => {
     const { result } = renderHook(() =>
       useServers({ baseUrl: "http://test.local", fetchFn: h.fetchFn }),
diff --git a/clients/web/src/test/integration/mcp/import/clientConfig.test.ts b/clients/web/src/test/integration/mcp/import/clientConfig.test.ts
new file mode 100644
index 0000000000..602c6d7a49
--- /dev/null
+++ b/clients/web/src/test/integration/mcp/import/clientConfig.test.ts
@@ -0,0 +1,94 @@
+import { describe, it, expect } from "vitest";
+import {
+  parseMcpServersConfig,
+  parseVsCodeConfig,
+} from "@inspector/core/mcp/import/clientConfig.js";
+
+describe("parseMcpServersConfig", () => {
+  it("parses a standard { mcpServers } file and normalizes types", () => {
+    const raw = JSON.stringify({
+      mcpServers: {
+        local: { command: "npx", args: ["-y", "server-everything"] },
+        remote: { type: "http", url: "https://example.com/mcp" },
+        sse: { type: "sse", url: "https://example.com/sse" },
+      },
+    });
+    const config = parseMcpServersConfig(raw);
+    // Missing type defaults to stdio.
+    expect(config.mcpServers.local.type).toBe("stdio");
+    // "http" alias normalizes to streamable-http.
+    expect(config.mcpServers.remote.type).toBe("streamable-http");
+    expect(config.mcpServers.sse.type).toBe("sse");
+  });
+
+  it("preserves extension fields (env, headers) on entries", () => {
+    const raw = JSON.stringify({
+      mcpServers: {
+        s: {
+          command: "node",
+          args: ["server.js"],
+          env: { API_KEY: "abc" },
+        },
+      },
+    });
+    const config = parseMcpServersConfig(raw);
+    const entry = config.mcpServers.s;
+    expect(entry.type).toBe("stdio");
+    if (entry.type === "stdio") {
+      expect(entry.env).toEqual({ API_KEY: "abc" });
+    }
+  });
+
+  it("skips non-object server entries", () => {
+    const raw = JSON.stringify({
+      mcpServers: {
+        good: { command: "node" },
+        bad: null,
+        alsoBad: 42,
+        arr: [],
+      },
+    });
+    const config = parseMcpServersConfig(raw);
+    expect(Object.keys(config.mcpServers)).toEqual(["good"]);
+  });
+
+  it("throws on invalid JSON", () => {
+    expect(() => parseMcpServersConfig("{not json")).toThrow(/Invalid JSON/);
+  });
+
+  it("throws when the top level is not an object", () => {
+    expect(() => parseMcpServersConfig("[]")).toThrow(/top level/);
+    expect(() => parseMcpServersConfig("42")).toThrow(/top level/);
+  });
+
+  it("throws when mcpServers is missing or not an object", () => {
+    expect(() => parseMcpServersConfig("{}")).toThrow(/mcpServers/);
+    expect(() => parseMcpServersConfig('{"mcpServers": []}')).toThrow(
+      /mcpServers/,
+    );
+  });
+});
+
+describe("parseVsCodeConfig", () => {
+  it("parses VS Code's top-level servers map", () => {
+    const raw = JSON.stringify({
+      servers: {
+        gh: { type: "http", url: "https://api.example.com/mcp" },
+        local: { command: "uvx", args: ["my-server"] },
+      },
+      inputs: [{ id: "token", type: "promptString" }],
+    });
+    const config = parseVsCodeConfig(raw);
+    expect(config.mcpServers.gh.type).toBe("streamable-http");
+    expect(config.mcpServers.local.type).toBe("stdio");
+  });
+
+  it("throws when there is no servers object", () => {
+    expect(() => parseVsCodeConfig("{}")).toThrow(/servers/);
+    expect(() => parseVsCodeConfig('{"servers": 1}')).toThrow(/servers/);
+  });
+
+  it("throws on invalid JSON", () => {
+    expect(() => parseVsCodeConfig("nope")).toThrow(/Invalid JSON/);
+  });
+});
diff --git a/clients/web/src/test/integration/mcp/import/merge.test.ts b/clients/web/src/test/integration/mcp/import/merge.test.ts
new file mode 100644
index 0000000000..22a57ab49d
--- /dev/null
+++ b/clients/web/src/test/integration/mcp/import/merge.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { planImport, uniqueId } from "@inspector/core/mcp/import/merge.js";
+import type { MCPConfig } from "@inspector/core/mcp/types.js";
+
+const incoming: MCPConfig = {
+  mcpServers: {
+    alpha: { type: "stdio", command: "a" },
+    beta: { type: "stdio", command: "b" },
+    gamma: { type: "stdio", command: "g" },
+  },
+};
+
+describe("planImport", () => {
+  it("splits incoming servers into additions and conflicts", () => {
+    const plan = planImport(incoming, ["beta"]);
+    expect(plan.additions.map((a) => a.id)).toEqual(["alpha", "gamma"]);
+    expect(plan.conflicts.map((c) => c.id)).toEqual(["beta"]);
+    expect(plan.conflicts[0].config).toEqual({ type: "stdio", command: "b" });
+  });
+
+  it("treats everything as an addition when nothing collides", () => {
+    const plan = planImport(incoming, []);
+    expect(plan.additions).toHaveLength(3);
+    expect(plan.conflicts).toHaveLength(0);
+  });
+
+  it("preserves source map order", () => {
+    const plan = planImport(incoming, []);
+    expect(plan.additions.map((a) => a.id)).toEqual(["alpha", "beta", "gamma"]);
+  });
+});
+
+describe("uniqueId", () => {
+  it("returns the base when free", () => {
+    expect(uniqueId("github", ["slack"])).toBe("github");
+  });
+
+  it("suffixes -2, -3 … when taken", () => {
+    expect(uniqueId("github", ["github"])).toBe("github-2");
+    expect(uniqueId("github", ["github", "github-2"])).toBe("github-3");
+  });
+
+  it("sanitizes the base to the allowed charset", () => {
+    expect(uniqueId("My Server!", [])).toBe("My-Server");
+  });
+
+  it("falls back to 'server' for an all-invalid base", () => {
+    expect(uniqueId("!!!", [])).toBe("server");
+    expect(uniqueId("!!!", ["server"])).toBe("server-2");
+  });
+});
diff --git a/clients/web/src/test/integration/mcp/import/resolveSource.test.ts b/clients/web/src/test/integration/mcp/import/resolveSource.test.ts
new file mode 100644
index 0000000000..7b3959ff78
--- /dev/null
+++ b/clients/web/src/test/integration/mcp/import/resolveSource.test.ts
@@ -0,0 +1,64 @@
+import { describe, it, expect } from "vitest";
+import { resolveImportSource } from "@inspector/core/mcp/import/resolveSource.js";
+
+const HOME = "/home/alice";
+const cursorPath = "/home/alice/.cursor/mcp.json";
+
+describe("resolveImportSource", () => {
+  it("returns null for an unknown strategy id", () => {
+    expect(resolveImportSource("bogus", "linux", HOME, () => null)).toBeNull();
+  });
+
+  it("returns found:false with the searched paths when no file exists", () => {
+    const result = resolveImportSource("cursor", "linux", HOME, () => null);
+    expect(result).toEqual({
+      type: "cursor",
+      found: false,
+      searched: [cursorPath],
+    });
+  });
+
+  it("parses the first existing well-known path", () => {
+    const raw = JSON.stringify({ mcpServers: { s: { command: "node" } } });
+    const result = resolveImportSource("cursor", "linux", HOME, (p) =>
+      p === cursorPath ? raw : null,
+    );
+    expect(result).toMatchObject({
+      type: "cursor",
+      found: true,
+      path: cursorPath,
+    });
+    expect(result?.config?.mcpServers.s.type).toBe("stdio");
+  });
+
+  it("walks to the second path when the first does not exist (Cline)", () => {
+    const fallback = "/home/alice/Documents/Cline/MCP/cline_mcp_settings.json";
+    const raw = JSON.stringify({ mcpServers: { c: { command: "node" } } });
+    const result = resolveImportSource("cline", "linux", HOME, (p) =>
+      p === fallback ? raw : null,
+    );
+    expect(result?.found).toBe(true);
+    expect(result?.path).toBe(fallback);
+  });
+
+  it("returns found:true with an error when the file will not parse", () => {
+    const result = resolveImportSource(
+      "cursor",
+      "linux",
+      HOME,
+      () => "{not json",
+    );
+    expect(result?.found).toBe(true);
+    expect(result?.path).toBe(cursorPath);
+    expect(result?.error).toMatch(/Invalid JSON/);
+    expect(result?.config).toBeUndefined();
+  });
+
+  it("returns found:true with a read error when the reader throws", () => {
+    const result = resolveImportSource("cursor", "linux", HOME, () => {
+      throw new Error("EACCES");
+    });
+    expect(result?.found).toBe(true);
+    expect(result?.error).toMatch(/Failed to read .*EACCES/);
+  });
+});
diff --git a/clients/web/src/test/integration/mcp/import/serverJson.test.ts b/clients/web/src/test/integration/mcp/import/serverJson.test.ts
new file mode 100644
index 0000000000..20e0113278
--- /dev/null
+++ b/clients/web/src/test/integration/mcp/import/serverJson.test.ts
@@ -0,0 +1,334 @@
+import { describe, it, expect } from "vitest";
+import {
+  parseServerJson,
+  buildServerConfig,
+  deriveServerId,
+} from "@inspector/core/mcp/import/serverJson.js";
+
+const npmServerJson = JSON.stringify({
+  $schema:
+    "https://static.modelcontextprotocol.io/schemas/2025-12-11/server.schema.json",
+  name: "io.github.my-username/weather",
+  description: "An MCP server for weather information.",
+  version: "1.0.1",
+  packages: [
+    {
+      registryType: "npm",
+      identifier: "@my-username/mcp-weather-server",
+      version: "1.0.1",
+      transport: { type: "stdio" },
+      environmentVariables: [
+        {
+          description: "Your API key",
+          isRequired: true,
+          isSecret: true,
+          name: "YOUR_API_KEY",
+        },
+        { name: "LOG_LEVEL", default: "info" },
+      ],
+    },
+  ],
+});
+
+describe("deriveServerId", () => {
+  it("takes the last path segment and sanitizes it", () => {
+    expect(deriveServerId("io.github.user/weather")).toBe("weather");
+    expect(deriveServerId("com.example/My Server!")).toBe("My-Server");
+    expect(deriveServerId("plain-name")).toBe("plain-name");
+  });
+
+  it("falls back to 'server' when nothing usable remains", () => {
+    expect(deriveServerId("io.github.user/")).toBe("server");
+    expect(deriveServerId("///")).toBe("server");
+  });
+});
+
+describe("parseServerJson — packages", () => {
+  it("parses an npm package into an npx stdio config", () => {
+    const parsed = parseServerJson(npmServerJson);
+    expect(parsed.serverName).toBe("weather");
+    expect(parsed.fullName).toBe("io.github.my-username/weather");
+    expect(parsed.options).toHaveLength(1);
+    const opt = parsed.options[0];
+    expect(opt.registryType).toBe("npm");
+    expect(opt.runtimeHint).toBe("npx");
+    expect(opt.baseConfig).toMatchObject({
+      type: "stdio",
+      command: "npx",
+      args: ["-y", "@my-username/mcp-weather-server@1.0.1"],
+    });
+    // Only the var with a default goes into base env; the required secret is
+    // surfaced for the user to fill.
+    if (opt.baseConfig.type === "stdio") {
+      expect(opt.baseConfig.env).toEqual({ LOG_LEVEL: "info" });
+    }
+    expect(opt.envVars).toEqual([
+      {
+        name: "YOUR_API_KEY",
+        description: "Your API key",
+        required: true,
+        isSecret: true,
+      },
+      { name: "LOG_LEVEL", required: false, default: "info" },
+    ]);
+  });
+
+  it("maps pypi/oci/nuget registry types to their runtimes", () => {
+    const make = (registryType: string, identifier: string) =>
+      parseServerJson(
+        JSON.stringify({
+          name: "com.example/x",
+          packages: [{ registryType, identifier, version: "2.0.0" }],
+        }),
+      ).options[0];
+
+    expect(make("pypi", "weather-py").baseConfig).toMatchObject({
+      command: "uvx",
+      args: ["weather-py"],
+    });
+    expect(make("oci", "docker.io/u/app:1.0.0").baseConfig).toMatchObject({
+      command: "docker",
+      args: ["run", "-i", "--rm", "docker.io/u/app:1.0.0"],
+    });
+    expect(make("nuget", "Acme.Mcp").baseConfig).toMatchObject({
+      command: "dnx",
+      args: ["Acme.Mcp@2.0.0"],
+    });
+  });
+
+  it("resolves runtime and package arguments in order", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/args",
+        packages: [
+          {
+            registryType: "npm",
+            identifier: "pkg",
+            runtimeArguments: [
+              { type: "named", name: "--node-opt", value: "x" },
+            ],
+            packageArguments: [
+              { type: "positional", value: "subcommand" },
+              { type: "named", name: "--port", value: "8080" },
+              { type: "named", name: "--flag" },
+              { type: "named", value: "orphan" }, // named without a name → skipped
+              { type: "positional" },
+              "not-an-object",
+            ],
+          },
+        ],
+      }),
+    );
+    expect(parsed.options[0].baseConfig).toMatchObject({
+      command: "npx",
+      args: [
+        "--node-opt",
+        "x",
+        "-y",
+        "pkg",
+        "subcommand",
+        "--port",
+        "8080",
+        "--flag",
+      ],
+    });
+  });
+
+  it("appends docker package args after the image", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/d",
+        packages: [
+          {
+            registryType: "oci",
+            identifier: "img:1",
+            packageArguments: [{ type: "positional", value: "--inside" }],
+          },
+        ],
+      }),
+    );
+    expect(parsed.options[0].baseConfig).toMatchObject({
+      args: ["run", "-i", "--rm", "img:1", "--inside"],
+    });
+  });
+
+  it("skips unsupported (mcpb) and malformed packages", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/mix",
+        packages: [
+          { registryType: "mcpb", identifier: "https://x/y.mcpb" },
+          { registryType: "npm" }, // missing identifier
+          null,
+          { registryType: "npm", identifier: "good" },
+        ],
+      }),
+    );
+    expect(parsed.options).toHaveLength(1);
+    expect(parsed.options[0].identifier).toBe("good");
+  });
+});
+
+describe("parseServerJson — remotes", () => {
+  it("parses streamable-http and sse remotes", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/acme",
+        remotes: [
+          { type: "streamable-http", url: "https://a.example.com/mcp" },
+          { type: "sse", url: "https://a.example.com/sse" },
+        ],
+      }),
+    );
+    expect(parsed.options).toHaveLength(2);
+    // Remotes are labeled "remote", with the transport carried in runtimeHint.
+    expect(parsed.options[0].registryType).toBe("remote");
+    expect(parsed.options[0].runtimeHint).toBe("streamable-http");
+    expect(parsed.options[1].registryType).toBe("remote");
+    expect(parsed.options[1].runtimeHint).toBe("sse");
+    expect(parsed.options[0].baseConfig).toEqual({
+      type: "streamable-http",
+      url: "https://a.example.com/mcp",
+    });
+    expect(parsed.options[1].baseConfig).toEqual({
+      type: "sse",
+      url: "https://a.example.com/sse",
+    });
+  });
+
+  it("substitutes URL template variables with their defaults", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/multi",
+        remotes: [
+          {
+            type: "streamable-http",
+            url: "https://api.example.com/{region}/mcp",
+            variables: { region: { default: "us-east-1" } },
+          },
+        ],
+      }),
+    );
+    expect(parsed.options[0].identifier).toBe(
+      "https://api.example.com/us-east-1/mcp",
+    );
+  });
+
+  it("leaves a template token intact when no default is declared", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/t",
+        remotes: [
+          {
+            type: "streamable-http",
+            url: "https://{tenant}.example.com/mcp",
+            variables: { tenant: { isRequired: true } },
+          },
+        ],
+      }),
+    );
+    expect(parsed.options[0].identifier).toBe(
+      "https://{tenant}.example.com/mcp",
+    );
+  });
+
+  it("skips remotes without a url", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/r",
+        remotes: [
+          { type: "streamable-http" },
+          { type: "sse", url: "https://x/sse" },
+        ],
+      }),
+    );
+    expect(parsed.options).toHaveLength(1);
+  });
+});
+
+describe("parseServerJson — wrapper + snake_case + errors", () => {
+  it("accepts a { server: {...} } wrapper", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        server: {
+          name: "com.example/wrapped",
+          packages: [{ registryType: "npm", identifier: "p" }],
+        },
+      }),
+    );
+    expect(parsed.fullName).toBe("com.example/wrapped");
+  });
+
+  it("reads snake_case registry fields", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/snake",
+        packages: [
+          {
+            registry_type: "npm",
+            identifier: "snake-pkg",
+            environment_variables: [
+              { name: "TOKEN", is_required: true, is_secret: true },
+            ],
+            package_arguments: [{ type: "positional", value: "go" }],
+          },
+        ],
+      }),
+    );
+    const opt = parsed.options[0];
+    expect(opt.registryType).toBe("npm");
+    expect(opt.baseConfig).toMatchObject({ args: ["-y", "snake-pkg", "go"] });
+    expect(opt.envVars[0]).toMatchObject({ required: true, isSecret: true });
+  });
+
+  it("throws on invalid JSON, non-object, and missing name", () => {
+    expect(() => parseServerJson("nope")).toThrow(/Invalid JSON/);
+    expect(() => parseServerJson("[]")).toThrow(/top level/);
+    expect(() => parseServerJson("{}")).toThrow(/name/);
+  });
+
+  it("throws when there is no runnable package or remote", () => {
+    expect(() =>
+      parseServerJson(
+        JSON.stringify({
+          name: "com.example/empty",
+          packages: [{ registryType: "mcpb", identifier: "x.mcpb" }],
+        }),
+      ),
+    ).toThrow(/No runnable/);
+  });
+});
+
+describe("buildServerConfig", () => {
+  it("merges env overrides over declared defaults", () => {
+    const opt = parseServerJson(npmServerJson).options[0];
+    const config = buildServerConfig(opt, {
+      YOUR_API_KEY: "secret",
+      LOG_LEVEL: "debug",
+    });
+    expect(config).toMatchObject({
+      type: "stdio",
+      command: "npx",
+      env: { YOUR_API_KEY: "secret", LOG_LEVEL: "debug" },
+    });
+  });
+
+  it("drops env keys whose override is empty", () => {
+    const opt = parseServerJson(npmServerJson).options[0];
+    const config = buildServerConfig(opt, { LOG_LEVEL: "" });
+    if (config.type === "stdio") {
+      expect(config.env).toBeUndefined();
+    }
+  });
+
+  it("returns a remote config unchanged (ignores env overrides)", () => {
+    const opt = parseServerJson(
+      JSON.stringify({
+        name: "com.example/r",
+        remotes: [{ type: "streamable-http", url: "https://x/mcp" }],
+      }),
+    ).options[0];
+    const config = buildServerConfig(opt, { ANYTHING: "x" });
+    expect(config).toEqual({ type: "streamable-http", url: "https://x/mcp" });
+  });
+});
diff --git a/clients/web/src/test/integration/mcp/import/strategies.test.ts b/clients/web/src/test/integration/mcp/import/strategies.test.ts
new file mode 100644
index 0000000000..c26f0d7a26
--- /dev/null
+++ b/clients/web/src/test/integration/mcp/import/strategies.test.ts
@@ -0,0 +1,84 @@
+import { describe, it, expect } from "vitest";
+import {
+  IMPORT_STRATEGIES,
+  IMPORT_STRATEGY_LIST,
+  getImportStrategy,
+} from "@inspector/core/mcp/import/strategies.js";
+
+const HOME = "/home/alice";
+
+describe("import strategy registry", () => {
+  it("exposes claude-desktop, cursor, cline, and vscode", () => {
+    expect(IMPORT_STRATEGY_LIST.map((s) => s.id)).toEqual([
+      "claude-desktop",
+      "cursor",
+      "cline",
+      "vscode",
+    ]);
+  });
+
+  it("resolves strategies by id and returns undefined for unknown", () => {
+    expect(getImportStrategy("cursor")?.label).toBe("Cursor");
+    expect(getImportStrategy("nope")).toBeUndefined();
+    expect(IMPORT_STRATEGIES["vscode"].label).toBe("VS Code");
+  });
+
+  it("delegates parse to the shared mcpServers parser for standard clients", () => {
+    const raw = JSON.stringify({ mcpServers: { s: { command: "node" } } });
+    const config = getImportStrategy("claude-desktop")!.parse(raw);
+    expect(config.mcpServers.s.type).toBe("stdio");
+  });
+
+  it("delegates parse to the VS Code parser for vscode", () => {
+    const raw = JSON.stringify({ servers: { s: { command: "node" } } });
+    const config = getImportStrategy("vscode")!.parse(raw);
+    expect(config.mcpServers.s.type).toBe("stdio");
+  });
+});
+
+describe("platform-aware default paths", () => {
+  it("Claude Desktop per platform", () => {
+    expect(
+      getImportStrategy("claude-desktop")!.defaultPaths("darwin", HOME),
+    ).toEqual([
+      "/home/alice/Library/Application Support/Claude/claude_desktop_config.json",
+    ]);
+    expect(
+      getImportStrategy("claude-desktop")!.defaultPaths("linux", HOME),
+    ).toEqual(["/home/alice/.config/Claude/claude_desktop_config.json"]);
+    expect(
+      getImportStrategy("claude-desktop")!.defaultPaths(
+        "win32",
+        "C:/Users/alice",
+      ),
+    ).toEqual([
+      "C:/Users/alice/AppData/Roaming/Claude/claude_desktop_config.json",
+    ]);
+  });
+
+  it("Cursor is home-relative on every platform", () => {
+    expect(getImportStrategy("cursor")!.defaultPaths("darwin", HOME)).toEqual([
+      "/home/alice/.cursor/mcp.json",
+    ]);
+  });
+
+  it("Cline lists the editor globalStorage path then the Documents fallback", () => {
+    const paths = getImportStrategy("cline")!.defaultPaths("darwin", HOME);
+    expect(paths).toHaveLength(2);
+    expect(paths[0]).toContain(
+      "Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json",
+    );
+    expect(paths[1]).toBe(
+      "/home/alice/Documents/Cline/MCP/cline_mcp_settings.json",
+    );
+  });
+
+  it("VS Code native mcp.json per platform", () => {
+    expect(getImportStrategy("vscode")!.defaultPaths("linux", HOME)).toEqual([
+      "/home/alice/.config/Code/User/mcp.json",
+    ]);
+    expect(getImportStrategy("vscode")!.defaultPaths("darwin", HOME)).toEqual([
+      "/home/alice/Library/Application Support/Code/User/mcp.json",
+    ]);
+  });
+});
diff --git a/clients/web/src/test/integration/mcp/remote/servers-route.test.ts b/clients/web/src/test/integration/mcp/remote/servers-route.test.ts
index 8bd827da97..83435b1248 100644
--- a/clients/web/src/test/integration/mcp/remote/servers-route.test.ts
+++ b/clients/web/src/test/integration/mcp/remote/servers-route.test.ts
@@ -95,6 +95,36 @@ describe("/api/servers routes", () => {
     await teardown(h);
   });
 
+  describe("GET /api/import-source", () => {
+    it("rejects an unknown source type with 400", async () => {
+      const res = await fetch(`${h.baseUrl}/api/import-source?type=bogus`);
+      expect(res.status).toBe(400);
+      const body = (await res.json()) as { error: string };
+      expect(body.error).toMatch(/Unknown import source/);
+    });
+
+    it("rejects a missing source type with 400", async () => {
+      const res = await fetch(`${h.baseUrl}/api/import-source`);
+      expect(res.status).toBe(400);
+    });
+
+    it("returns a 200 result for a known source type", async () => {
+      // Host-independent: whether the well-known file exists or not, a known
+      // strategy returns 200 with the resolved type + searched paths.
+      const res = await fetch(`${h.baseUrl}/api/import-source?type=cursor`);
+      expect(res.status).toBe(200);
+      const body = (await res.json()) as {
+        type: string;
+        found: boolean;
+        searched: string[];
+      };
+      expect(body.type).toBe("cursor");
+      expect(typeof body.found).toBe("boolean");
+      expect(Array.isArray(body.searched)).toBe(true);
+      expect(body.searched.length).toBeGreaterThan(0);
+    });
+  });
+
   describe("GET /api/servers", () => {
     it("writes the seed config and returns it on first read (file absent)", async () => {
       expect(existsSync(h.configPath)).toBe(false);
diff --git a/core/mcp/import/clientConfig.ts b/core/mcp/import/clientConfig.ts
new file mode 100644
index 0000000000..73c8ae0ce9
--- /dev/null
+++ b/core/mcp/import/clientConfig.ts
@@ -0,0 +1,87 @@
+/**
+ * Parsers that turn another MCP client's config file into the canonical
+ * Inspector `MCPConfig`. Pure + isomorphic (no Node deps).
+ *
+ * Two shapes are handled:
+ *  - the common `{ mcpServers: { ... } }` shape used by Claude Desktop, Cursor,
+ *    Cline, Claude Code (`parseMcpServersConfig`);
+ *  - VS Code's native MCP shape with a top-level `servers` map (and an optional
+ *    `inputs` array we ignore) (`parseVsCodeConfig`).
+ *
+ * Both delegate per-server normalization to `normalizeServerType` so a missing
+ * `type` defaults to `stdio` and the `http` alias maps to `streamable-http`,
+ * matching how Inspector reads its own `mcp.json`.
+ */
+import type { MCPConfig, StoredMCPServer } from "../types.js";
+import { normalizeServerType } from "../serverList.js";
+
+/** Parse JSON, throwing a uniform, human-readable message on failure. */
+function parseJsonObject(raw: string): Record<string, unknown> {
+  let data: unknown;
+  try {
+    data = JSON.parse(raw);
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : String(err);
+    throw new Error(`Invalid JSON: ${detail}`);
+  }
+  if (!data || typeof data !== "object" || Array.isArray(data)) {
+    throw new Error("Expected a JSON object at the top level");
+  }
+  return data as Record<string, unknown>;
+}
+
+/**
+ * Normalize a raw server map (`Record<id, rawConfig>`) into canonical
+ * `mcpServers`. Non-object entries are skipped (a hand-edited file can carry a
+ * `null` or a stray scalar); each surviving entry has its `type` normalized and
+ * any Inspector-extension fields preserved as-is on the `StoredMCPServer`.
+ */
+function normalizeServerMap(
+  servers: Record<string, unknown>,
+): Record<string, StoredMCPServer> {
+  const out: Record<string, StoredMCPServer> = {};
+  for (const [id, raw] of Object.entries(servers)) {
+    if (!raw || typeof raw !== "object" || Array.isArray(raw)) continue;
+    const normalized = normalizeServerType(
+      raw as Record<string, unknown> & { type?: unknown },
+    );
+    // Carry through any extra keys (headers, env, oauth, …) the source file
+    // had; normalizeServerType already spreads them, we just widen the type.
+    out[id] = normalized as StoredMCPServer;
+  }
+  return out;
+}
+
+/**
+ * Parse the common `{ mcpServers: { ... } }` config shape. Used by Claude
+ * Desktop, Cursor, Cline, and Claude Code. Throws when no `mcpServers` object
+ * is present.
+ */
+export function parseMcpServersConfig(raw: string): MCPConfig {
+  const data = parseJsonObject(raw);
+  const servers = data.mcpServers;
+  if (!servers || typeof servers !== "object" || Array.isArray(servers)) {
+    throw new Error("No 'mcpServers' object found in config file");
+  }
+  return {
+    mcpServers: normalizeServerMap(servers as Record<string, unknown>),
+  };
+}
+
+/**
+ * Parse VS Code's native MCP config, which uses a top-level `servers` map
+ * instead of `mcpServers` (and an optional `inputs` array of prompt
+ * placeholders we don't import — the `${input:…}` references are left intact in
+ * the server entries for the user to resolve via the edit form). Throws when no
+ * `servers` object is present.
+ */
+export function parseVsCodeConfig(raw: string): MCPConfig {
+  const data = parseJsonObject(raw);
+  const servers = data.servers;
+  if (!servers || typeof servers !== "object" || Array.isArray(servers)) {
+    throw new Error("No 'servers' object found in VS Code config file");
+  }
+  return {
+    mcpServers: normalizeServerMap(servers as Record<string, unknown>),
+  };
+}
diff --git a/core/mcp/import/index.ts b/core/mcp/import/index.ts
new file mode 100644
index 0000000000..4473e6bfd5
--- /dev/null
+++ b/core/mcp/import/index.ts
@@ -0,0 +1,32 @@
+/**
+ * Barrel for the MCP config import layer (#1348). Re-exports the strategy
+ * registry, the client-config + registry-server.json parsers, and the
+ * strategy-agnostic merge helpers. Pure + isomorphic — safe to import from the
+ * browser and from the Node backend route alike.
+ */
+export type { ImportStrategy, ImportSourceResult } from "./types.js";
+export { parseMcpServersConfig, parseVsCodeConfig } from "./clientConfig.js";
+export {
+  parseServerJson,
+  buildServerConfig,
+  deriveServerId,
+} from "./serverJson.js";
+export type {
+  ParsedServerJson,
+  ServerJsonOption,
+  ServerJsonEnvVar,
+} from "./serverJson.js";
+export {
+  IMPORT_STRATEGIES,
+  IMPORT_STRATEGY_LIST,
+  getImportStrategy,
+} from "./strategies.js";
+export { resolveImportSource } from "./resolveSource.js";
+export type { ImportFileReader } from "./resolveSource.js";
+export { planImport, uniqueId } from "./merge.js";
+export type {
+  ImportPlan,
+  ImportAddition,
+  ImportConflict,
+  ConflictResolution,
+} from "./merge.js";
diff --git a/core/mcp/import/merge.ts b/core/mcp/import/merge.ts
new file mode 100644
index 0000000000..36fc8484a4
--- /dev/null
+++ b/core/mcp/import/merge.ts
@@ -0,0 +1,64 @@
+/**
+ * Strategy-agnostic merge helpers (#1348). Operate purely on the canonical
+ * `MCPConfig` a strategy produces, so they don't care which client the servers
+ * came from. The UI uses `planImport` to split incoming servers into
+ * conflict-free additions vs. id collisions, then drives the per-conflict
+ * resolution (overwrite / skip / rename) and calls the add/update endpoints.
+ */
+import type { MCPConfig, StoredMCPServer } from "../types.js";
+
+/** How the user chose to resolve a single id collision. */
+export type ConflictResolution = "overwrite" | "skip" | "rename";
+
+/** One incoming server whose id already exists in the current catalog. */
+export interface ImportConflict {
+  id: string;
+  config: StoredMCPServer;
+}
+
+/** One incoming server whose id is free to add as-is. */
+export interface ImportAddition {
+  id: string;
+  config: StoredMCPServer;
+}
+
+export interface ImportPlan {
+  /** Servers whose ids are not yet taken — safe to add directly. */
+  additions: ImportAddition[];
+  /** Servers whose ids collide with an existing one — need a resolution. */
+  conflicts: ImportConflict[];
+}
+
+/**
+ * Split an incoming config into conflict-free additions and id collisions
+ * against the set of ids already present. Order of the source map is preserved.
+ */
+export function planImport(
+  incoming: MCPConfig,
+  existingIds: readonly string[],
+): ImportPlan {
+  const taken = new Set(existingIds);
+  const additions: ImportAddition[] = [];
+  const conflicts: ImportConflict[] = [];
+  for (const [id, config] of Object.entries(incoming.mcpServers)) {
+    if (taken.has(id)) conflicts.push({ id, config });
+    else additions.push({ id, config });
+  }
+  return { additions, conflicts };
+}
+
+/**
+ * Produce an id derived from `base` that isn't in `taken`. Tries `base`,
+ * `base-2`, `base-3`, … and sanitizes `base` to the allowed id charset
+ * (`[A-Za-z0-9_-]`) first so a renamed id always validates server-side.
+ */
+export function uniqueId(base: string, taken: readonly string[]): string {
+  const takenSet = new Set(taken);
+  const cleaned =
+    base.replace(/[^A-Za-z0-9_-]/g, "-").replace(/^-+|-+$/g, "") || "server";
+  if (!takenSet.has(cleaned)) return cleaned;
+  for (let n = 2; ; n++) {
+    const candidate = `${cleaned}-${n}`;
+    if (!takenSet.has(candidate)) return candidate;
+  }
+}
diff --git a/core/mcp/import/resolveSource.ts b/core/mcp/import/resolveSource.ts
new file mode 100644
index 0000000000..ff2e645e4c
--- /dev/null
+++ b/core/mcp/import/resolveSource.ts
@@ -0,0 +1,57 @@
+/**
+ * Resolve an import source (#1348): walk a strategy's well-known paths, read the
+ * first that exists, and parse it into the canonical `MCPConfig`. Kept pure by
+ * dependency injection — `platform`, `homeDir`, and a `readFile` reader are
+ * passed in — so it's fully unit-testable without touching the real filesystem
+ * or home directory. The Node backend route supplies `process.platform`,
+ * `os.homedir()`, and an `fs`-backed reader.
+ */
+import type { ImportSourceResult } from "./types.js";
+import { getImportStrategy } from "./strategies.js";
+
+/**
+ * Read a file's contents, or return `null` when the path does not exist. Throw
+ * to signal a genuine read failure (permission denied, etc.) — that surfaces as
+ * `{ found: true, error }` so the UI can offer the file-upload fallback.
+ */
+export type ImportFileReader = (path: string) => string | null;
+
+/**
+ * Resolve a strategy's well-known config into an `ImportSourceResult`. Returns
+ * `null` for an unknown strategy id so the caller can map it to a 400. The first
+ * existing path wins; a read or parse failure short-circuits with an `error`.
+ */
+export function resolveImportSource(
+  type: string,
+  platform: NodeJS.Platform,
+  homeDir: string,
+  readFile: ImportFileReader,
+): ImportSourceResult | null {
+  const strategy = getImportStrategy(type);
+  if (!strategy) return null;
+  const searched = strategy.defaultPaths(platform, homeDir);
+  for (const path of searched) {
+    let raw: string | null;
+    try {
+      raw = readFile(path);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      return {
+        type,
+        found: true,
+        path,
+        error: `Failed to read ${path}: ${msg}`,
+        searched,
+      };
+    }
+    if (raw === null) continue;
+    try {
+      const config = strategy.parse(raw);
+      return { type, found: true, path, config, searched };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      return { type, found: true, path, error: msg, searched };
+    }
+  }
+  return { type, found: false, searched };
+}
diff --git a/core/mcp/import/serverJson.ts b/core/mcp/import/serverJson.ts
new file mode 100644
index 0000000000..814ae0afe0
--- /dev/null
+++ b/core/mcp/import/serverJson.ts
@@ -0,0 +1,337 @@
+/**
+ * Parser for the official MCP Registry `server.json` format (the file
+ * `mcp-publisher init` generates and publishes). Distinct from the client-config
+ * parsers: a `server.json` describes a *single* server via one or more runnable
+ * `packages` and/or `remotes`, and carries publish-time metadata
+ * (`environmentVariables`, `packageArguments`, URL `variables`) that has to be
+ * mapped onto a runnable Inspector `MCPServerConfig`.
+ *
+ * Pure + isomorphic (no Node deps). The web wiring layer (`useServerJsonImport`)
+ * turns the parsed options into the props the dumb `ImportServerJsonPanel`
+ * renders, then calls `buildServerConfig` once the user has filled in env vars.
+ *
+ * Schema reference: https://static.modelcontextprotocol.io/schemas/2025-12-11/server.schema.json
+ * The published `server.json` file uses camelCase keys (`registryType`,
+ * `runtimeHint`, `environmentVariables`, …); the registry REST API has
+ * historically returned the same fields in snake_case. We read both so a blob
+ * copied from either source imports cleanly.
+ */
+import type { MCPServerConfig, StdioServerConfig } from "../types.js";
+
+/** A registry package's environment-variable declaration. */
+export interface ServerJsonEnvVar {
+  name: string;
+  description?: string;
+  required: boolean;
+  /** Declared default/value, pre-filled into the form when present. */
+  default?: string;
+  isSecret?: boolean;
+}
+
+/**
+ * One runnable way to launch the server — either a package (npm/pypi/oci/nuget)
+ * resolved to a stdio command, or a remote (streamable-http/sse) URL. The dumb
+ * panel renders these as the package-selection radios; `buildServerConfig`
+ * turns the chosen one + env overrides into the final config.
+ */
+export interface ServerJsonOption {
+  /** Registry/transport label source: "npm" | "pypi" | "oci" | "nuget" | "streamable-http" | "sse". */
+  registryType: string;
+  /** Package identifier or remote URL — shown in the radio label. */
+  identifier: string;
+  /** The runtime/transport used to launch it (e.g. "npx", "uvx", "docker", "streamable-http"). */
+  runtimeHint: string;
+  /**
+   * The runnable config with all statically-known values resolved (runtime
+   * command, args, declared env defaults, URL variable defaults). Env vars the
+   * user must supply are surfaced via `envVars` and merged in by
+   * `buildServerConfig`.
+   */
+  baseConfig: MCPServerConfig;
+  /** Env vars declared for this option (empty for remotes). */
+  envVars: ServerJsonEnvVar[];
+}
+
+export interface ParsedServerJson {
+  /** Sanitized default server id, derived from the last segment of `name`. */
+  serverName: string;
+  /** The full registry name (e.g. "io.github.foo/weather"). */
+  fullName: string;
+  /** Runnable launch options, packages first then remotes. */
+  options: ServerJsonOption[];
+}
+
+/** Read a field by its camelCase or snake_case key. */
+function pick(
+  obj: Record<string, unknown>,
+  camel: string,
+  snake: string,
+): unknown {
+  return obj[camel] !== undefined ? obj[camel] : obj[snake];
+}
+
+function asString(value: unknown): string | undefined {
+  return typeof value === "string" ? value : undefined;
+}
+
+function asObject(value: unknown): Record<string, unknown> | undefined {
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : undefined;
+}
+
+function asArray(value: unknown): unknown[] {
+  return Array.isArray(value) ? value : [];
+}
+
+/**
+ * Derive a safe Inspector server id from a registry name. The registry name is
+ * a reverse-DNS-ish string ("io.github.user/weather"); we take the segment
+ * after the last "/" and strip anything outside `[A-Za-z0-9_-]`. Falls back to
+ * "server" when nothing usable remains.
+ */
+export function deriveServerId(fullName: string): string {
+  const lastSegment = fullName.split("/").pop() ?? fullName;
+  const cleaned = lastSegment
+    .replace(/[^A-Za-z0-9_-]/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return cleaned || "server";
+}
+
+/** Parse an `environmentVariables` array into our env-var descriptors. */
+function parseEnvVars(rawList: unknown[]): ServerJsonEnvVar[] {
+  const out: ServerJsonEnvVar[] = [];
+  for (const entry of rawList) {
+    const obj = asObject(entry);
+    if (!obj) continue;
+    const name = asString(obj.name);
+    if (!name) continue;
+    const required = Boolean(pick(obj, "isRequired", "is_required"));
+    const isSecret = Boolean(pick(obj, "isSecret", "is_secret"));
+    const def = asString(obj.default) ?? asString(obj.value);
+    out.push({
+      name,
+      description: asString(obj.description),
+      required,
+      ...(def !== undefined ? { default: def } : {}),
+      ...(isSecret ? { isSecret: true } : {}),
+    });
+  }
+  return out;
+}
+
+/**
+ * Resolve a registry `Argument` list (positional/named) into argv strings.
+ * Best-effort: positional args contribute their `value`/`default`; named args
+ * contribute their flag `name` plus any `value`/`default`. Arguments with
+ * neither a value nor a default are skipped (the user can add them via the edit
+ * form afterward); advanced features (`isRepeated`, `variables`) are ignored.
+ */
+function resolveArguments(rawList: unknown[]): string[] {
+  const out: string[] = [];
+  for (const entry of rawList) {
+    const obj = asObject(entry);
+    if (!obj) continue;
+    const type = asString(obj.type) ?? "positional";
+    const value = asString(obj.value) ?? asString(obj.default);
+    if (type === "named") {
+      const name = asString(obj.name);
+      if (!name) continue;
+      out.push(name);
+      if (value !== undefined) out.push(value);
+    } else {
+      if (value !== undefined) out.push(value);
+    }
+  }
+  return out;
+}
+
+/** Build the env map for a package: declared defaults only (overrides applied later). */
+function defaultEnv(envVars: ServerJsonEnvVar[]): Record<string, string> {
+  const env: Record<string, string> = {};
+  for (const v of envVars) {
+    if (v.default !== undefined) env[v.name] = v.default;
+  }
+  return env;
+}
+
+/** runtime command + base args for a given registry package type, or null if unsupported. */
+function runtimeForPackage(
+  registryType: string,
+  identifier: string,
+  version: string | undefined,
+): { command: string; runtimeHint: string; ref: string } | null {
+  const versioned = (sep: string) =>
+    version ? `${identifier}${sep}${version}` : identifier;
+  switch (registryType) {
+    case "npm":
+      return { command: "npx", runtimeHint: "npx", ref: versioned("@") };
+    case "pypi":
+      return { command: "uvx", runtimeHint: "uvx", ref: identifier };
+    case "oci":
+      return { command: "docker", runtimeHint: "docker", ref: identifier };
+    case "nuget":
+      return { command: "dnx", runtimeHint: "dnx", ref: versioned("@") };
+    // mcpb artifacts are downloadable bundles, not a runnable command — skip.
+    default:
+      return null;
+  }
+}
+
+/** Map a single `packages[]` entry to a launch option, or null if unsupported. */
+function parsePackage(raw: Record<string, unknown>): ServerJsonOption | null {
+  const registryType =
+    asString(pick(raw, "registryType", "registry_type")) ?? "";
+  const identifier = asString(raw.identifier) ?? "";
+  if (!registryType || !identifier) return null;
+  const version = asString(raw.version);
+  const runtime = runtimeForPackage(registryType, identifier, version);
+  if (!runtime) return null;
+
+  const envVars = parseEnvVars(
+    asArray(pick(raw, "environmentVariables", "environment_variables")),
+  );
+  const runtimeArgs = resolveArguments(
+    asArray(pick(raw, "runtimeArguments", "runtime_arguments")),
+  );
+  const packageArgs = resolveArguments(
+    asArray(pick(raw, "packageArguments", "package_arguments")),
+  );
+
+  // docker needs `run -i --rm` before the image; package args go to the
+  // container after the image. Other runtimes take the package ref then args.
+  const args =
+    runtime.command === "docker"
+      ? ["run", "-i", "--rm", ...runtimeArgs, runtime.ref, ...packageArgs]
+      : registryType === "npm"
+        ? [...runtimeArgs, "-y", runtime.ref, ...packageArgs]
+        : [...runtimeArgs, runtime.ref, ...packageArgs];
+
+  const env = defaultEnv(envVars);
+  const baseConfig: StdioServerConfig = {
+    type: "stdio",
+    command: runtime.command,
+    ...(args.length > 0 ? { args } : {}),
+    ...(Object.keys(env).length > 0 ? { env } : {}),
+  };
+  return {
+    registryType,
+    identifier,
+    runtimeHint: runtime.runtimeHint,
+    baseConfig,
+    envVars,
+  };
+}
+
+/** Substitute `{var}` template tokens in a remote URL with their declared defaults. */
+function resolveRemoteUrl(
+  url: string,
+  variables: Record<string, unknown> | undefined,
+): string {
+  if (!variables) return url;
+  return url.replace(/\{([^}]+)\}/g, (match, name: string) => {
+    const v = asObject(variables[name]);
+    const def = v ? asString(v.default) : undefined;
+    return def ?? match;
+  });
+}
+
+/** Map a single `remotes[]` entry to a launch option, or null if unsupported. */
+function parseRemote(raw: Record<string, unknown>): ServerJsonOption | null {
+  const type = asString(raw.type);
+  const url = asString(raw.url);
+  if (!url) return null;
+  const transport = type === "sse" ? "sse" : "streamable-http";
+  const resolvedUrl = resolveRemoteUrl(url, asObject(raw.variables));
+  const baseConfig: MCPServerConfig =
+    transport === "sse"
+      ? { type: "sse", url: resolvedUrl }
+      : { type: "streamable-http", url: resolvedUrl };
+  // Label remotes as "remote" (the install method); the transport variant
+  // (streamable-http / sse) is carried in runtimeHint so the picker shows
+  // e.g. "remote: https://… (streamable-http)".
+  return {
+    registryType: "remote",
+    identifier: resolvedUrl,
+    runtimeHint: transport,
+    baseConfig,
+    envVars: [],
+  };
+}
+
+/**
+ * Parse a registry `server.json` blob into its runnable options. Accepts either
+ * a bare server object or a `{ server: {...} }` wrapper (some registry API
+ * responses nest it). Throws when the blob is not a server object or exposes no
+ * runnable package/remote.
+ */
+export function parseServerJson(raw: string): ParsedServerJson {
+  let data: unknown;
+  try {
+    data = JSON.parse(raw);
+  } catch (err) {
+    const detail = err instanceof Error ? err.message : String(err);
+    throw new Error(`Invalid JSON: ${detail}`);
+  }
+  const top = asObject(data);
+  if (!top) throw new Error("Expected a JSON object at the top level");
+  const server = asObject(top.server) ?? top;
+
+  const fullName = asString(server.name);
+  if (!fullName) {
+    throw new Error("server.json is missing a 'name' field");
+  }
+
+  const options: ServerJsonOption[] = [];
+  for (const pkg of asArray(server.packages)) {
+    const obj = asObject(pkg);
+    if (!obj) continue;
+    const option = parsePackage(obj);
+    if (option) options.push(option);
+  }
+  for (const remote of asArray(server.remotes)) {
+    const obj = asObject(remote);
+    if (!obj) continue;
+    const option = parseRemote(obj);
+    if (option) options.push(option);
+  }
+
+  if (options.length === 0) {
+    throw new Error(
+      "No runnable package or remote found in server.json (mcpb-only or unsupported registry types are not importable)",
+    );
+  }
+
+  return {
+    serverName: deriveServerId(fullName),
+    fullName,
+    options,
+  };
+}
+
+/**
+ * Build the final runnable config for a chosen option, merging user-supplied
+ * env overrides over the declared defaults. Empty-string values are dropped so
+ * an untouched required var doesn't persist as `KEY=""`. Remotes ignore env
+ * overrides (their config carries no env).
+ */
+export function buildServerConfig(
+  option: ServerJsonOption,
+  envOverrides: Record<string, string>,
+): MCPServerConfig {
+  if (option.baseConfig.type !== "stdio") {
+    return { ...option.baseConfig };
+  }
+  const merged: Record<string, string> = { ...(option.baseConfig.env ?? {}) };
+  for (const [key, value] of Object.entries(envOverrides)) {
+    if (value === "") delete merged[key];
+    else merged[key] = value;
+  }
+  const config: StdioServerConfig = {
+    ...option.baseConfig,
+    ...(Object.keys(merged).length > 0 ? { env: merged } : {}),
+  };
+  // Strip an env key that ended up empty after overrides.
+  if (Object.keys(merged).length === 0) delete config.env;
+  return config;
+}
diff --git a/core/mcp/import/strategies.ts b/core/mcp/import/strategies.ts
new file mode 100644
index 0000000000..0bc82993ab
--- /dev/null
+++ b/core/mcp/import/strategies.ts
@@ -0,0 +1,116 @@
+/**
+ * Registry of import strategies (#1348). Each entry knows its well-known
+ * config locations per platform and how to parse that client's file into the
+ * canonical `MCPConfig`. The source picker enumerates `IMPORT_STRATEGY_LIST`;
+ * the backend `GET /api/import-source` route and the browser file-upload path
+ * both resolve a strategy via `getImportStrategy(id)`.
+ *
+ * Adding a new client = add one entry here (+ a fixture test). Clients that use
+ * the standard `{ mcpServers: {...} }` shape reuse `parseMcpServersConfig` and
+ * only differ by `defaultPaths`; VS Code's `servers`/`inputs` variant gets its
+ * own `parseVsCodeConfig`.
+ *
+ * Pure + isomorphic: `defaultPaths` receives `platform` + `homeDir` so this file
+ * never imports Node `os`/`path`. Paths are joined with `/`, which Node `fs`
+ * accepts on every platform.
+ */
+import type { ImportStrategy } from "./types.js";
+import { parseMcpServersConfig, parseVsCodeConfig } from "./clientConfig.js";
+
+/** Join path segments with `/`, trimming a trailing slash on the base. */
+function join(...segments: string[]): string {
+  return segments
+    .map((s, i) =>
+      i === 0 ? s.replace(/\/+$/, "") : s.replace(/^\/+|\/+$/g, ""),
+    )
+    .filter((s) => s.length > 0)
+    .join("/");
+}
+
+/** Windows `%APPDATA%` (Roaming) under the user's home directory. */
+function appData(homeDir: string): string {
+  return join(homeDir, "AppData", "Roaming");
+}
+
+/**
+ * Per-platform application-support directory for a given app folder name.
+ * macOS: `~/Library/Application Support/<app>`; Windows: `%APPDATA%\<app>`;
+ * Linux/other: `~/.config/<app>`.
+ */
+function appSupportDir(
+  platform: NodeJS.Platform,
+  homeDir: string,
+  app: string,
+): string {
+  if (platform === "darwin") {
+    return join(homeDir, "Library", "Application Support", app);
+  }
+  if (platform === "win32") {
+    return join(appData(homeDir), app);
+  }
+  return join(homeDir, ".config", app);
+}
+
+const claudeDesktop: ImportStrategy = {
+  id: "claude-desktop",
+  label: "Claude Desktop",
+  defaultPaths: (platform, homeDir) => [
+    join(
+      appSupportDir(platform, homeDir, "Claude"),
+      "claude_desktop_config.json",
+    ),
+  ],
+  parse: parseMcpServersConfig,
+};
+
+const cursor: ImportStrategy = {
+  id: "cursor",
+  label: "Cursor",
+  defaultPaths: (_platform, homeDir) => [join(homeDir, ".cursor", "mcp.json")],
+  parse: parseMcpServersConfig,
+};
+
+const cline: ImportStrategy = {
+  id: "cline",
+  label: "Cline",
+  defaultPaths: (platform, homeDir) => [
+    // Cline (VS Code extension) global settings live under the editor's
+    // globalStorage; the documented cross-platform fallback is ~/Documents.
+    join(
+      appSupportDir(platform, homeDir, "Code"),
+      "User",
+      "globalStorage",
+      "saoudrizwan.claude-dev",
+      "settings",
+      "cline_mcp_settings.json",
+    ),
+    join(homeDir, "Documents", "Cline", "MCP", "cline_mcp_settings.json"),
+  ],
+  parse: parseMcpServersConfig,
+};
+
+const vscode: ImportStrategy = {
+  id: "vscode",
+  label: "VS Code",
+  defaultPaths: (platform, homeDir) => [
+    join(appSupportDir(platform, homeDir, "Code"), "User", "mcp.json"),
+  ],
+  parse: parseVsCodeConfig,
+};
+
+/** All strategies in source-picker display order. */
+export const IMPORT_STRATEGY_LIST: readonly ImportStrategy[] = [
+  claudeDesktop,
+  cursor,
+  cline,
+  vscode,
+];
+
+/** Map of `id → ImportStrategy` for resolution. */
+export const IMPORT_STRATEGIES: Readonly<Record<string, ImportStrategy>> =
+  Object.fromEntries(IMPORT_STRATEGY_LIST.map((s) => [s.id, s]));
+
+/** Resolve a strategy by id, or undefined for an unknown id. */
+export function getImportStrategy(id: string): ImportStrategy | undefined {
+  return IMPORT_STRATEGIES[id];
+}
diff --git a/core/mcp/import/types.ts b/core/mcp/import/types.ts
new file mode 100644
index 0000000000..395fc03faf
--- /dev/null
+++ b/core/mcp/import/types.ts
@@ -0,0 +1,60 @@
+/**
+ * Import strategy pattern (#1348). Each strategy knows how to identify itself,
+ * provide platform-aware well-known locations for another MCP client's config
+ * file, and parse that file's raw contents into the canonical Inspector
+ * `MCPConfig` (`{ mcpServers: { ... } }`) shape.
+ *
+ * Everything here is pure and isomorphic — no Node `fs`/`os`/`path` imports — so
+ * it can be reused by the browser (file-upload parse), the web backend
+ * (well-known-path read), and any future CLI/TUI import. The Node-only pieces
+ * (resolving the home dir, reading the file) live in the backend route that
+ * consumes these strategies; `defaultPaths` takes `platform` + `homeDir` as
+ * inputs rather than reaching for `os.homedir()` itself.
+ */
+import type { MCPConfig } from "../types.js";
+
+/**
+ * A single importable source (Claude Desktop, Cursor, Cline, VS Code, …). The
+ * registry in `strategies.ts` maps `id → ImportStrategy`; the source picker
+ * enumerates the registry and the import flow resolves against it. Adding a new
+ * client is a small, isolated unit of work: add one strategy + register it.
+ */
+export interface ImportStrategy {
+  /** Stable id used by the source picker and the backend `?type=` query. */
+  id: string;
+  /** Human-readable label shown in the source picker. */
+  label: string;
+  /**
+   * Platform-aware well-known locations, in priority order. Pure: the caller
+   * supplies the running platform and the user's home directory so this never
+   * touches Node APIs. Paths are joined with `/`, which Node's `fs` accepts on
+   * every platform (including Windows).
+   */
+  defaultPaths(platform: NodeJS.Platform, homeDir: string): string[];
+  /**
+   * Parse raw file contents into the canonical `MCPConfig`. Throws on malformed
+   * input (bad JSON, missing server map) — callers surface the message.
+   */
+  parse(raw: string): MCPConfig;
+}
+
+/**
+ * Response shape for `GET /api/import-source?type=<id>`. `found` is false when
+ * none of the strategy's well-known paths exist on the backend host; `error` is
+ * set when a path was found but its contents could not be parsed (so the UI can
+ * offer the file-upload fallback instead of silently showing nothing).
+ */
+export interface ImportSourceResult {
+  /** The strategy id that was resolved. */
+  type: string;
+  /** True when one of the well-known paths existed and was read. */
+  found: boolean;
+  /** The path that was read (only when `found`). */
+  path?: string;
+  /** Parsed canonical config (only when `found` and parse succeeded). */
+  config?: MCPConfig;
+  /** Parse error message (only when `found` but parse failed). */
+  error?: string;
+  /** The well-known paths that were searched, in priority order. */
+  searched: string[];
+}
diff --git a/core/mcp/remote/node/server.ts b/core/mcp/remote/node/server.ts
index bdaee1b118..e5700f8f31 100644
--- a/core/mcp/remote/node/server.ts
+++ b/core/mcp/remote/node/server.ts
@@ -1,11 +1,13 @@
 /**
  * Hono-based remote server for MCP transports.
  * Hosts /api/config, /api/mcp/connect, send, events, disconnect, /api/fetch, /api/log,
- * /api/storage/:storeId, /api/servers (+ /api/servers/:id).
+ * /api/storage/:storeId, /api/servers (+ /api/servers/:id), /api/import-source.
  */
 
 import { randomBytes, timingSafeEqual } from "node:crypto";
+import { existsSync, readFileSync } from "node:fs";
 import { stat as fsStat } from "node:fs/promises";
+import { homedir } from "node:os";
 import type pino from "pino";
 import {
   getDefaultStorageDir,
@@ -25,7 +27,10 @@ import { streamSSE } from "hono/streaming";
 import { watch as chokidarWatch, type FSWatcher } from "chokidar";
 import { createTransportNode } from "../../node/transport.js";
 import type { RemoteConnectRequest, RemoteSendRequest } from "../types.js";
-import { DEFAULT_MAX_FETCH_REQUESTS, DEFAULT_TASK_TTL_MS } from "../../types.js";
+import {
+  DEFAULT_MAX_FETCH_REQUESTS,
+  DEFAULT_TASK_TTL_MS,
+} from "../../types.js";
 import type {
   InspectorServerSettings,
   MCPConfig,
@@ -43,6 +48,7 @@ import {
   storedFieldsToInspectorSettings,
   stripInspectorFields,
 } from "../../serverList.js";
+import { resolveImportSource } from "../../import/resolveSource.js";
 import { RemoteSession } from "./remote-session.js";
 import { createTokenAuthProvider } from "./tokenAuthProvider.js";
 import { API_SERVER_ENV_VARS } from "../constants.js";
@@ -423,10 +429,7 @@ export function createRemoteApp(
     if (event !== "unlink") {
       try {
         const s = await fsStat(mcpConfigPath);
-        if (
-          lastWrittenMtimeMs !== null &&
-          s.mtimeMs === lastWrittenMtimeMs
-        ) {
+        if (lastWrittenMtimeMs !== null && s.mtimeMs === lastWrittenMtimeMs) {
           return;
         }
       } catch {
@@ -915,9 +918,7 @@ export function createRemoteApp(
   // A roots array: each entry must have a string `uri` and, when present, a
   // string `name` (SDK `Root`). Other keys (e.g. `_meta`) pass through — we
   // only gate the two fields the Inspector reads/writes.
-  const isRootArray = (
-    v: unknown,
-  ): v is { uri: string; name?: string }[] => {
+  const isRootArray = (v: unknown): v is { uri: string; name?: string }[] => {
     if (!Array.isArray(v)) return false;
     return v.every((e) => {
       if (e === null || typeof e !== "object") return false;
@@ -1328,7 +1329,9 @@ export function createRemoteApp(
     fields: string[],
   ): Promise<Record<string, string>> => {
     const values = await Promise.all(
-      fields.map(async (field) => [field, await secretStore.get(id, field)] as const),
+      fields.map(
+        async (field) => [field, await secretStore.get(id, field)] as const,
+      ),
     );
     const out: Record<string, string> = {};
     for (const [field, v] of values) {
@@ -1468,10 +1471,7 @@ export function createRemoteApp(
   // 404). Returns a Response to short-circuit, or undefined to proceed.
   const requireWritable = (c: Context): Response | undefined => {
     if (writable) return undefined;
-    return c.json(
-      { error: "Server list is read-only for this session." },
-      403,
-    );
+    return c.json({ error: "Server list is read-only for this session." }, 403);
   };
 
   app.get("/api/servers", async (c) => {
@@ -1529,9 +1529,9 @@ export function createRemoteApp(
           await writeMcpAndTrackMtime(serializeStore(DEFAULT_SEED_CONFIG));
           return DEFAULT_SEED_CONFIG;
         }
-        const parsedInside = parseStore(rawInside) as
-          | { mcpServers?: unknown }
-          | null;
+        const parsedInside = parseStore(rawInside) as {
+          mcpServers?: unknown;
+        } | null;
         const inside: MCPConfig = {
           mcpServers: normalizeMcpServers(parsedInside?.mcpServers),
         };
@@ -1554,6 +1554,31 @@ export function createRemoteApp(
     }
   });
 
+  // Read another MCP client's well-known config file on this host and return
+  // its servers in canonical form, for the "Import config" source picker
+  // (#1348). Read-only: it never writes, so it's allowed even in a read-only
+  // session (the subsequent POST /api/servers per chosen entry is what's gated).
+  // `?type=` selects the strategy (claude-desktop | cursor | cline | vscode);
+  // an unknown type is a 400. When none of the strategy's well-known paths exist
+  // the response is `{ found: false, searched }` so the UI can fall back to the
+  // file picker; when a path exists but won't parse, `{ found: true, error }`.
+  app.get("/api/import-source", (c) => {
+    const type = c.req.query("type") ?? "";
+    const result = resolveImportSource(
+      type,
+      process.platform,
+      homedir(),
+      (path) => (existsSync(path) ? readFileSync(path, "utf-8") : null),
+    );
+    if (!result) {
+      return c.json(
+        { error: `Unknown import source: ${type || "(none)"}` },
+        400,
+      );
+    }
+    return c.json(result);
+  });
+
   app.post("/api/servers", async (c) => {
     const ro = requireWritable(c);
     if (ro) return ro;
@@ -1758,10 +1783,7 @@ export function createRemoteApp(
           // The `in` check above guarantees this branch is unreachable;
           // narrowing without the non-null assertion keeps TS happy and
           // makes the contract explicit for future refactors.
-          return c.json(
-            { error: `Server '${originalId}' not found` },
-            404,
-          );
+          return c.json({ error: `Server '${originalId}' not found` }, 404);
         }
         // Split the existing entry into its SDK-only config (no Inspector-
         // extension fields) and its lifted settings, then apply patch
diff --git a/core/react/useServers.ts b/core/react/useServers.ts
index 29c04c5019..010a1e9171 100644
--- a/core/react/useServers.ts
+++ b/core/react/useServers.ts
@@ -7,6 +7,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { mcpConfigToServerEntries } from "../mcp/serverList.js";
+import type { ImportSourceResult } from "../mcp/import/types.js";
 import type {
   InspectorServerSettings,
   MCPConfig,
@@ -52,6 +53,13 @@ export interface UseServersResult {
    * back to disk truth. Routes through `PUT /api/servers/order`.
    */
   reorderServers: (orderedIds: string[]) => Promise<void>;
+  /**
+   * Read another MCP client's well-known config on the backend host and return
+   * its servers in canonical form (#1348). `type` is an import-strategy id
+   * (e.g. "claude-desktop"). Used by the "Import config" source picker; the
+   * resulting servers are written via `addServer` / `updateServer`.
+   */
+  importSource: (type: string) => Promise<ImportSourceResult>;
 }
 
 function buildHeaders(
@@ -191,6 +199,20 @@ export function useServers(opts: UseServersOptions): UseServersResult {
     [base, authToken, doFetch, refresh],
   );
 
+  const importSource = useCallback(
+    async (type: string): Promise<ImportSourceResult> => {
+      const res = await doFetch(
+        `${base}/api/import-source?type=${encodeURIComponent(type)}`,
+        { headers: buildHeaders(authToken, false) },
+      );
+      if (!res.ok) {
+        throw new Error(await readErrorMessage(res));
+      }
+      return (await res.json()) as ImportSourceResult;
+    },
+    [base, authToken, doFetch],
+  );
+
   const updateServer = useCallback(
     async (
       originalId: string,
@@ -309,5 +331,6 @@ export function useServers(opts: UseServersOptions): UseServersResult {
     updateServerSettings,
     removeServer,
     reorderServers,
+    importSource,
   };
 }

From da21e36d3403532e5dae9647c04c1180c719f5a3 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 11:18:52 -0400
Subject: [PATCH 02/16] feat(web): collapse the server.json textarea into a
 File Contents disclosure

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ImportServerJsonPanel.tsx                 | 36 ++++++++-----
 inspector-v1-multi.server.json                | 53 +++++++++++++++++++
 2 files changed, 75 insertions(+), 14 deletions(-)
 create mode 100644 inspector-v1-multi.server.json

diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index 228406216d..aff1dff160 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -1,4 +1,5 @@
 import {
+  Accordion,
   Button,
   Divider,
   FileButton,
@@ -100,20 +101,27 @@ export function ImportServerJsonPanel({
         ) : null}
       </Group>
 
-      <Textarea
-        value={draft.rawText}
-        onChange={(e) => onJsonChange(e.currentTarget.value)}
-        ff="monospace"
-        autosize
-        minRows={8}
-        maxRows={15}
-        rightSectionPointerEvents="auto"
-        rightSection={
-          draft.rawText ? (
-            <ClearButton onClick={() => onJsonChange("")} />
-          ) : null
-        }
-      />
+      <Accordion variant="separated" defaultValue="file-contents">
+        <Accordion.Item value="file-contents">
+          <Accordion.Control>File Contents</Accordion.Control>
+          <Accordion.Panel>
+            <Textarea
+              value={draft.rawText}
+              onChange={(e) => onJsonChange(e.currentTarget.value)}
+              ff="monospace"
+              autosize
+              minRows={8}
+              maxRows={15}
+              rightSectionPointerEvents="auto"
+              rightSection={
+                draft.rawText ? (
+                  <ClearButton onClick={() => onJsonChange("")} />
+                ) : null
+              }
+            />
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
 
       <Divider />
 
diff --git a/inspector-v1-multi.server.json b/inspector-v1-multi.server.json
new file mode 100644
index 0000000000..1e6fbc1749
--- /dev/null
+++ b/inspector-v1-multi.server.json
@@ -0,0 +1,53 @@
+{
+  "$schema": "https://static.modelcontextprotocol.io/schemas/2025-12-11/server.schema.json",
+  "name": "io.github.modelcontextprotocol/inspector-multi",
+  "title": "MCP Inspector (multiple install methods)",
+  "description": "Sample registry entry describing one server (the MCP Inspector) installable several ways — npm, an OCI/Docker image, or a hosted remote — to exercise the package-selection UI.",
+  "repository": {
+    "url": "https://github.com/modelcontextprotocol/inspector",
+    "source": "github"
+  },
+  "version": "0.16.5",
+  "packages": [
+    {
+      "registryType": "npm",
+      "identifier": "@modelcontextprotocol/inspector",
+      "version": "0.16.5",
+      "transport": {
+        "type": "stdio"
+      },
+      "environmentVariables": [
+        {
+          "name": "MCP_PROXY_AUTH_TOKEN",
+          "description": "Optional bearer token used to authenticate to the inspector proxy server.",
+          "isRequired": false,
+          "isSecret": true
+        },
+        {
+          "name": "MCP_AUTO_OPEN_ENABLED",
+          "description": "Whether the inspector auto-opens a browser tab on launch.",
+          "default": "true"
+        }
+      ]
+    },
+    {
+      "registryType": "oci",
+      "identifier": "docker.io/modelcontextprotocol/inspector:0.16.5",
+      "transport": {
+        "type": "stdio"
+      }
+    }
+  ],
+  "remotes": [
+    {
+      "type": "streamable-http",
+      "url": "https://{region}.inspector.example.com/mcp",
+      "variables": {
+        "region": {
+          "description": "Hosted inspector region.",
+          "default": "us-east-1"
+        }
+      }
+    }
+  ]
+}

From 40061fc1a70e9644f61d1580be635527c50fc763 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 11:32:56 -0400
Subject: [PATCH 03/16] feat(web): auto-collapse File Contents disclosure after
 content loads

Once content is pasted or a file is loaded, collapse the File Contents
disclosure after ~1s with Mantine's built-in accordion animation, signaling
the input was accepted and surfacing the validation/env-var sections. The
disclosure becomes controlled by the modal; clearing the textarea re-opens it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ImportServerJsonPanel.tsx                 | 20 ++++++++++-
 .../ServerImportJsonModal.test.tsx            | 35 +++++++++++++++++++
 .../ServerImportJsonModal.tsx                 | 25 +++++++++++++
 3 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index aff1dff160..f634a5a987 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -44,6 +44,13 @@ export interface ImportServerJsonPanelProps {
   onAddServer: () => void;
   /** Disables the Add Server button while the pasted content isn't valid. */
   addDisabled?: boolean;
+  /**
+   * Controls the "File Contents" disclosure. When `onFileContentsChange` is
+   * provided the disclosure is controlled (the wiring layer can auto-collapse
+   * it after content loads); otherwise it's uncontrolled and defaults to open.
+   */
+  fileContentsOpen?: boolean;
+  onFileContentsChange?: (open: boolean) => void;
   onCancel: () => void;
   /**
    * Load server.json content from a file. When provided, a "Choose file…"
@@ -83,6 +90,8 @@ export function ImportServerJsonPanel({
   onServerNameChange,
   onAddServer,
   addDisabled,
+  fileContentsOpen,
+  onFileContentsChange,
   onCancel,
   onPickFile,
 }: ImportServerJsonPanelProps) {
@@ -101,7 +110,16 @@ export function ImportServerJsonPanel({
         ) : null}
       </Group>
 
-      <Accordion variant="separated" defaultValue="file-contents">
+      <Accordion
+        variant="separated"
+        {...(onFileContentsChange
+          ? {
+              value: fileContentsOpen ? "file-contents" : null,
+              onChange: (value: string | null) =>
+                onFileContentsChange(value === "file-contents"),
+            }
+          : { defaultValue: "file-contents" })}
+      >
         <Accordion.Item value="file-contents">
           <Accordion.Control>File Contents</Accordion.Control>
           <Accordion.Panel>
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
index c7ea5e8316..9ae7b268be 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
@@ -266,6 +266,41 @@ describe("ServerImportJsonModal", () => {
     );
   });
 
+  it("auto-collapses the File Contents disclosure after content loads", async () => {
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    const disclosure = screen.getByRole("button", { name: "File Contents" });
+    expect(disclosure).toHaveAttribute("aria-expanded", "true");
+    pasteJson(npmJson);
+    await waitFor(
+      () => expect(disclosure).toHaveAttribute("aria-expanded", "false"),
+      { timeout: 3000 },
+    );
+  });
+
+  it("re-opens File Contents when the textarea is cleared", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ServerImportJsonModal
+        opened
+        existingIds={[]}
+        onClose={vi.fn()}
+        onAddServer={vi.fn()}
+      />,
+    );
+    pasteJson(npmJson);
+    const disclosure = screen.getByRole("button", { name: "File Contents" });
+    // Clear via the textarea's Clear button while still expanded.
+    await user.click(screen.getAllByRole("button", { name: "Clear" })[0]);
+    expect(disclosure).toHaveAttribute("aria-expanded", "true");
+  });
+
   it("rejects an invalid id override and blocks Add Server", async () => {
     const user = userEvent.setup();
     const onAddServer = vi.fn();
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
index 5cd51ba476..8165e2d62e 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
@@ -67,6 +67,12 @@ function resolveId(
 /** Debounce (ms) before a textarea edit re-triggers parse/validation. */
 const VALIDATE_DEBOUNCE_MS = 300;
 
+/**
+ * Delay (ms) after content is loaded/pasted before the File Contents disclosure
+ * auto-collapses — long enough to read as "the content was accepted".
+ */
+const COLLAPSE_DELAY_MS = 1000;
+
 interface Selection {
   parsed?: ParsedServerJson;
   selectedIndex: number;
@@ -125,6 +131,9 @@ export function ServerImportJsonModal({
   const [debouncedText, setDebouncedText] = useState<string>(
     EMPTY_DRAFT.rawText,
   );
+  // The File Contents disclosure starts open and auto-collapses shortly after
+  // content is loaded/pasted (see the effect below).
+  const [fileContentsOpen, setFileContentsOpen] = useState(true);
 
   // Reset the draft each time the modal transitions to open. Done during render
   // (React's "adjust state when a prop changes" pattern) rather than in an
@@ -136,6 +145,7 @@ export function ServerImportJsonModal({
       setDraft(EMPTY_DRAFT);
       setSubmitError(undefined);
       setDebouncedText(EMPTY_DRAFT.rawText);
+      setFileContentsOpen(true);
     }
   }
 
@@ -149,6 +159,16 @@ export function ServerImportJsonModal({
     return () => clearTimeout(id);
   }, [draft.rawText]);
 
+  // Once there's content, collapse the File Contents disclosure after a beat so
+  // the (animated) collapse signals that the paste/file load was accepted and
+  // surfaces the validation / env-var sections below. Clearing the textarea
+  // re-opens it (handled in setRawText).
+  useEffect(() => {
+    if (!draft.rawText.trim()) return;
+    const id = setTimeout(() => setFileContentsOpen(false), COLLAPSE_DELAY_MS);
+    return () => clearTimeout(id);
+  }, [draft.rawText]);
+
   const parseState = useMemo(() => parseDraft(debouncedText), [debouncedText]);
   const {
     parsed,
@@ -220,6 +240,9 @@ export function ServerImportJsonModal({
   function setRawText(content: string) {
     setSubmitError(undefined);
     setDraft((d) => ({ ...d, rawText: content }));
+    // Re-open the disclosure when the textarea is cleared so it's ready to paste
+    // into again.
+    if (!content.trim()) setFileContentsOpen(true);
   }
 
   function selectPackage(index: number) {
@@ -301,6 +324,8 @@ export function ServerImportJsonModal({
         onServerNameChange={setServerName}
         onAddServer={() => void handleAddServer()}
         addDisabled={!canAdd}
+        fileContentsOpen={fileContentsOpen}
+        onFileContentsChange={setFileContentsOpen}
         onCancel={onClose}
         onPickFile={(file) => void pickFile(file)}
       />

From d0d832787f49405f87e7dca2f36db2ff188ae0bc Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 12:21:26 -0400
Subject: [PATCH 04/16] feat(web): flash File Contents hover highlight before
 auto-collapse

Before the File Contents disclosure auto-collapses, paint it with its hover
background for 250ms, then run the collapse over a 325ms animation, so the
collapse reads as intentional.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ImportServerJsonPanel.test.tsx            | 15 ++++++++
 .../ImportServerJsonPanel.tsx                 | 18 ++++++++-
 .../ServerImportJsonModal.tsx                 | 38 +++++++++++++++----
 3 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
index b7e4047cb2..04dcedd8b6 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
@@ -71,6 +71,21 @@ describe("ImportServerJsonPanel", () => {
     expect(screen.getByRole("button", { name: "Add Server" })).toBeDisabled();
   });
 
+  it("renders the File Contents control with the highlight background", () => {
+    renderWithMantine(
+      <ImportServerJsonPanel
+        {...baseHandlers}
+        fileContentsHighlight
+        draft={emptyDraft}
+        validation={[]}
+        envVars={[]}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "File Contents" }),
+    ).toBeInTheDocument();
+  });
+
   it("invokes onCancel and onAddServer when their buttons are clicked", async () => {
     const user = userEvent.setup();
     const onCancel = vi.fn();
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index f634a5a987..19b65d9d49 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -51,6 +51,12 @@ export interface ImportServerJsonPanelProps {
    */
   fileContentsOpen?: boolean;
   onFileContentsChange?: (open: boolean) => void;
+  /**
+   * When true, the "File Contents" control is painted with its hover
+   * background — used as a brief pre-collapse flash so the auto-collapse reads
+   * intentionally.
+   */
+  fileContentsHighlight?: boolean;
   onCancel: () => void;
   /**
    * Load server.json content from a file. When provided, a "Choose file…"
@@ -92,6 +98,7 @@ export function ImportServerJsonPanel({
   addDisabled,
   fileContentsOpen,
   onFileContentsChange,
+  fileContentsHighlight,
   onCancel,
   onPickFile,
 }: ImportServerJsonPanelProps) {
@@ -112,6 +119,7 @@ export function ImportServerJsonPanel({
 
       <Accordion
         variant="separated"
+        transitionDuration={325}
         {...(onFileContentsChange
           ? {
               value: fileContentsOpen ? "file-contents" : null,
@@ -121,7 +129,15 @@ export function ImportServerJsonPanel({
           : { defaultValue: "file-contents" })}
       >
         <Accordion.Item value="file-contents">
-          <Accordion.Control>File Contents</Accordion.Control>
+          <Accordion.Control
+            bg={
+              fileContentsHighlight
+                ? "var(--mantine-color-default-hover)"
+                : undefined
+            }
+          >
+            File Contents
+          </Accordion.Control>
           <Accordion.Panel>
             <Textarea
               value={draft.rawText}
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
index 8165e2d62e..d394ab6f76 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
@@ -73,6 +73,12 @@ const VALIDATE_DEBOUNCE_MS = 300;
  */
 const COLLAPSE_DELAY_MS = 1000;
 
+/**
+ * How long (ms) to flash the disclosure with its hover background just before it
+ * collapses, so the collapse reads as intentional rather than abrupt.
+ */
+const HIGHLIGHT_DURATION_MS = 250;
+
 interface Selection {
   parsed?: ParsedServerJson;
   selectedIndex: number;
@@ -132,8 +138,10 @@ export function ServerImportJsonModal({
     EMPTY_DRAFT.rawText,
   );
   // The File Contents disclosure starts open and auto-collapses shortly after
-  // content is loaded/pasted (see the effect below).
+  // content is loaded/pasted (see the effect below). `highlight` paints its
+  // hover background for a beat right before it collapses.
   const [fileContentsOpen, setFileContentsOpen] = useState(true);
+  const [fileContentsHighlight, setFileContentsHighlight] = useState(false);
 
   // Reset the draft each time the modal transitions to open. Done during render
   // (React's "adjust state when a prop changes" pattern) rather than in an
@@ -146,6 +154,7 @@ export function ServerImportJsonModal({
       setSubmitError(undefined);
       setDebouncedText(EMPTY_DRAFT.rawText);
       setFileContentsOpen(true);
+      setFileContentsHighlight(false);
     }
   }
 
@@ -159,14 +168,25 @@ export function ServerImportJsonModal({
     return () => clearTimeout(id);
   }, [draft.rawText]);
 
-  // Once there's content, collapse the File Contents disclosure after a beat so
-  // the (animated) collapse signals that the paste/file load was accepted and
-  // surfaces the validation / env-var sections below. Clearing the textarea
-  // re-opens it (handled in setRawText).
+  // Once there's content, flash the disclosure's hover highlight and then
+  // collapse it, so the (animated) collapse signals that the paste/file load
+  // was accepted and surfaces the validation / env-var sections below. Clearing
+  // the textarea re-opens it (handled in setRawText). setState lives only in the
+  // timeout callbacks, so this doesn't cascade-render.
   useEffect(() => {
     if (!draft.rawText.trim()) return;
-    const id = setTimeout(() => setFileContentsOpen(false), COLLAPSE_DELAY_MS);
-    return () => clearTimeout(id);
+    let collapseTimer: ReturnType<typeof setTimeout> | undefined;
+    const highlightTimer = setTimeout(() => {
+      setFileContentsHighlight(true);
+      collapseTimer = setTimeout(() => {
+        setFileContentsHighlight(false);
+        setFileContentsOpen(false);
+      }, HIGHLIGHT_DURATION_MS);
+    }, COLLAPSE_DELAY_MS);
+    return () => {
+      clearTimeout(highlightTimer);
+      if (collapseTimer) clearTimeout(collapseTimer);
+    };
   }, [draft.rawText]);
 
   const parseState = useMemo(() => parseDraft(debouncedText), [debouncedText]);
@@ -240,6 +260,8 @@ export function ServerImportJsonModal({
   function setRawText(content: string) {
     setSubmitError(undefined);
     setDraft((d) => ({ ...d, rawText: content }));
+    // A fresh edit cancels any in-flight pre-collapse highlight.
+    setFileContentsHighlight(false);
     // Re-open the disclosure when the textarea is cleared so it's ready to paste
     // into again.
     if (!content.trim()) setFileContentsOpen(true);
@@ -263,6 +285,7 @@ export function ServerImportJsonModal({
   async function pickFile(file: File | null) {
     if (!file) return;
     setSubmitError(undefined);
+    setFileContentsHighlight(false);
     try {
       const text = await file.text();
       setDraft((d) => ({ ...d, rawText: text }));
@@ -326,6 +349,7 @@ export function ServerImportJsonModal({
         addDisabled={!canAdd}
         fileContentsOpen={fileContentsOpen}
         onFileContentsChange={setFileContentsOpen}
+        fileContentsHighlight={fileContentsHighlight}
         onCancel={onClose}
         onPickFile={(file) => void pickFile(file)}
       />

From 425ca4485fff47c70c82e63b1db159e316db31fb Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 12:48:00 -0400
Subject: [PATCH 05/16] feat(web): rename "Import server.json" to "Import from
 registry config"

Rename the Add Servers menu entry and the modal header.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 clients/web/src/App.tsx                                       | 2 +-
 .../components/groups/ServerAddMenu/ServerAddMenu.test.tsx    | 4 ++--
 .../web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx | 4 +++-
 .../ServerImportJsonModal/ServerImportJsonModal.stories.tsx   | 2 +-
 .../ServerImportJsonModal/ServerImportJsonModal.test.tsx      | 2 +-
 .../groups/ServerImportJsonModal/ServerImportJsonModal.tsx    | 2 +-
 6 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 8241ab9796..d06110b46c 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -507,7 +507,7 @@ function App() {
     targetId?: string;
   } | null>(null);
   // Import-flow modals (#1348): "Import config" (other-client config merge) and
-  // "Import server.json" (registry single-server import).
+  // "Import from registry config" (registry single-server import).
   const [importConfigOpen, setImportConfigOpen] = useState(false);
   const [importJsonOpen, setImportJsonOpen] = useState(false);
   const [settingsModalTargetId, setSettingsModalTargetId] = useState<
diff --git a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
index c0c96f9e5b..f27da6dd0a 100644
--- a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
+++ b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
@@ -55,7 +55,7 @@ describe("ServerAddMenu", () => {
     expect(onImportConfig).toHaveBeenCalledTimes(1);
   });
 
-  it("invokes onImportServerJson when 'Import server.json' is clicked", async () => {
+  it("invokes onImportServerJson when 'Import from registry config' is clicked", async () => {
     const user = userEvent.setup();
     const onImportServerJson = vi.fn();
     renderWithMantine(
@@ -67,7 +67,7 @@ describe("ServerAddMenu", () => {
     );
     await user.click(screen.getByRole("button", { name: /Add Servers/ }));
     const item = screen.getByRole("menuitem", {
-      name: /Import server\.json/,
+      name: /Import from registry config/,
       hidden: true,
     });
     await user.click(item);
diff --git a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
index 862a676fc3..06b844883f 100644
--- a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
+++ b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
@@ -21,7 +21,9 @@ export function ServerAddMenu({
       <Menu.Dropdown>
         <Menu.Item onClick={onAddManually}>+ Add manually</Menu.Item>
         <Menu.Item onClick={onImportConfig}>Import config</Menu.Item>
-        <Menu.Item onClick={onImportServerJson}>Import server.json</Menu.Item>
+        <Menu.Item onClick={onImportServerJson}>
+          Import from registry config
+        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.stories.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.stories.tsx
index fb815aefc0..659f591ba6 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.stories.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.stories.tsx
@@ -44,7 +44,7 @@ export const Empty: Story = {
   play: async ({ canvasElement }) => {
     const body = within(canvasElement.ownerDocument.body);
     await expect(
-      await body.findByText("Import MCP Registry server.json"),
+      await body.findByText("Import from registry config"),
     ).toBeInTheDocument();
     await expect(
       body.getByRole("button", { name: "Add Server" }),
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
index 9ae7b268be..7bdc1c33fb 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
@@ -48,7 +48,7 @@ describe("ServerImportJsonModal", () => {
       />,
     );
     expect(
-      screen.queryByText("Import MCP Registry server.json"),
+      screen.queryByText("Import from registry config"),
     ).not.toBeInTheDocument();
   });
 
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
index d394ab6f76..7f0aa7ddad 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
@@ -334,7 +334,7 @@ export function ServerImportJsonModal({
       onClose={onClose}
       size="lg"
       centered
-      title={<ModalTitle>Import MCP Registry server.json</ModalTitle>}
+      title={<ModalTitle>Import from registry config</ModalTitle>}
     >
       <ImportServerJsonPanel
         draft={{ ...draft, selectedPackageIndex: selectedIndex }}

From dc3a1ca8a894772d881fd512376db9e43b3bcff2 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 12:50:48 -0400
Subject: [PATCH 06/16] feat(web): rename "Import config" to "Import client
 config"

Rename the Add Servers menu entry and the modal header.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 clients/web/src/App.tsx                                       | 4 ++--
 .../components/groups/ServerAddMenu/ServerAddMenu.test.tsx    | 4 ++--
 .../web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx | 2 +-
 .../ServerImportConfigModal/ServerImportConfigModal.test.tsx  | 2 +-
 .../ServerImportConfigModal/ServerImportConfigModal.tsx       | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index d06110b46c..2a0a6561fe 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -506,8 +506,8 @@ function App() {
     mode: ServerConfigModalMode;
     targetId?: string;
   } | null>(null);
-  // Import-flow modals (#1348): "Import config" (other-client config merge) and
-  // "Import from registry config" (registry single-server import).
+  // Import-flow modals (#1348): "Import client config" (other-client config
+  // merge) and "Import from registry config" (registry single-server import).
   const [importConfigOpen, setImportConfigOpen] = useState(false);
   const [importJsonOpen, setImportJsonOpen] = useState(false);
   const [settingsModalTargetId, setSettingsModalTargetId] = useState<
diff --git a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
index f27da6dd0a..f2e115aaac 100644
--- a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
+++ b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
@@ -36,7 +36,7 @@ describe("ServerAddMenu", () => {
     expect(onAddManually).toHaveBeenCalledTimes(1);
   });
 
-  it("invokes onImportConfig when 'Import config' is clicked", async () => {
+  it("invokes onImportConfig when 'Import client config' is clicked", async () => {
     const user = userEvent.setup();
     const onImportConfig = vi.fn();
     renderWithMantine(
@@ -48,7 +48,7 @@ describe("ServerAddMenu", () => {
     );
     await user.click(screen.getByRole("button", { name: /Add Servers/ }));
     const item = screen.getByRole("menuitem", {
-      name: /Import config/,
+      name: /Import client config/,
       hidden: true,
     });
     await user.click(item);
diff --git a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
index 06b844883f..7a7da065da 100644
--- a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
+++ b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
@@ -20,7 +20,7 @@ export function ServerAddMenu({
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item onClick={onAddManually}>+ Add manually</Menu.Item>
-        <Menu.Item onClick={onImportConfig}>Import config</Menu.Item>
+        <Menu.Item onClick={onImportConfig}>Import client config</Menu.Item>
         <Menu.Item onClick={onImportServerJson}>
           Import from registry config
         </Menu.Item>
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
index e59e3f7f40..0c36f26aad 100644
--- a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
@@ -75,7 +75,7 @@ describe("ServerImportConfigModal", () => {
         onUpdateServer={vi.fn()}
       />,
     );
-    expect(screen.queryByText("Import config")).not.toBeInTheDocument();
+    expect(screen.queryByText("Import client config")).not.toBeInTheDocument();
   });
 
   it("renders a client dropdown, an Import button, and a file picker", () => {
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
index 8526561496..6bd6df4b5a 100644
--- a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
@@ -318,7 +318,7 @@ export function ServerImportConfigModal({
       onClose={onClose}
       size="lg"
       centered
-      title={<ModalTitle>Import config</ModalTitle>}
+      title={<ModalTitle>Import client config</ModalTitle>}
     >
       <SectionStack>
         {error ? (

From 27b6c309981231b523b4a129d4a9681622af4bc6 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 14:31:52 -0400
Subject: [PATCH 07/16] refactor(web,core): move import orchestration into core
 helpers + web hooks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the import logic reusable by CLI/TUI and keep the modals display-only:

- core/mcp/import: add parseClientConfig (mcpServers→servers fallback),
  resolveServerId, selectServerJsonOption, and buildServerConfigForSelection,
  so the full import (parse → select → build → merge) is callable from any
  environment.
- core/storage: extract the pure validateStoreId into a Node-free store-id
  module (store-io re-exports it) so the isomorphic import layer can validate
  ids without pulling Node deps into the browser bundle.
- clients/web/hooks: useServerJsonImport and useImportClientConfig own all the
  wizard/parse/debounce/apply state; ServerImportConfigModal and
  ServerImportJsonModal are now thin display shells over the dumb panel.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ServerImportConfigModal.tsx               | 285 +++-----------
 .../ServerImportJsonModal.tsx                 | 347 ++----------------
 .../web/src/hooks/useImportClientConfig.ts    | 273 ++++++++++++++
 clients/web/src/hooks/useServerJsonImport.ts  | 305 +++++++++++++++
 .../mcp/import/clientConfig.test.ts           |  25 ++
 .../integration/mcp/import/serverJson.test.ts |  71 ++++
 .../test/integration/storage/store-id.test.ts |  21 ++
 core/mcp/import/clientConfig.ts               |  18 +
 core/mcp/import/index.ts                      |  10 +-
 core/mcp/import/serverJson.ts                 |  63 ++++
 core/storage/store-id.ts                      |  15 +
 core/storage/store-io.ts                      |  13 +-
 12 files changed, 872 insertions(+), 574 deletions(-)
 create mode 100644 clients/web/src/hooks/useImportClientConfig.ts
 create mode 100644 clients/web/src/hooks/useServerJsonImport.ts
 create mode 100644 clients/web/src/test/integration/storage/store-id.test.ts
 create mode 100644 core/storage/store-id.ts

diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
index 6bd6df4b5a..59530b969f 100644
--- a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
@@ -1,4 +1,3 @@
-import { useMemo, useState } from "react";
 import {
   Alert,
   Badge,
@@ -15,14 +14,15 @@ import {
 } from "@mantine/core";
 import {
   IMPORT_STRATEGY_LIST,
-  parseMcpServersConfig,
-  parseVsCodeConfig,
-  planImport,
-  uniqueId,
-  type ImportSourceResult,
   type ConflictResolution,
+  type ImportSourceResult,
 } from "@inspector/core/mcp/import/index.js";
-import type { MCPConfig, MCPServerConfig } from "@inspector/core/mcp/types.js";
+import type { MCPServerConfig } from "@inspector/core/mcp/types.js";
+import {
+  useImportClientConfig,
+  type AdditionAction,
+  type ImportOutcome,
+} from "../../../hooks/useImportClientConfig";
 
 export interface ServerImportConfigModalProps {
   opened: boolean;
@@ -39,22 +39,6 @@ export interface ServerImportConfigModalProps {
   ) => Promise<void>;
 }
 
-type Phase = "select" | "loading" | "review" | "summary";
-
-interface Resolution {
-  action: ConflictResolution;
-  renameTo: string;
-}
-
-/** Per-row choice for a brand-new (non-conflicting) server. */
-type AdditionAction = "import" | "skip";
-
-interface ImportOutcome {
-  id: string;
-  status: "added" | "overwritten" | "renamed" | "skipped" | "failed";
-  detail?: string;
-}
-
 const SectionStack = Stack.withProps({ gap: "md" });
 const SourceRow = Group.withProps({
   gap: "sm",
@@ -103,26 +87,10 @@ const OUTCOME_META: Record<
   failed: { label: "Failed", color: "red" },
 };
 
-/** Try the standard `{ mcpServers }` shape first, then VS Code's `servers`. */
-function parseAnyClientConfig(raw: string): MCPConfig {
-  try {
-    return parseMcpServersConfig(raw);
-  } catch (mcpErr) {
-    try {
-      return parseVsCodeConfig(raw);
-    } catch {
-      // Surface the primary parser's message — it's the common case.
-      throw mcpErr instanceof Error ? mcpErr : new Error(String(mcpErr));
-    }
-  }
-}
-
 /**
- * Source picker + conflict-resolution flow for importing another MCP client's
- * config (#1348). Phase 1 lets the user pick a known client (read on the
- * backend) or upload a file; phase 2 reviews the parsed servers, resolving any
- * id collisions (overwrite / skip / rename) before writing them through the
- * add/update callbacks; phase 3 shows a per-server outcome summary.
+ * Display shell for the "Import client config" flow (#1348): a source picker /
+ * file upload, a per-server review with conflict resolution, and an outcome
+ * summary. All orchestration lives in `useImportClientConfig`.
  */
 export function ServerImportConfigModal({
   opened,
@@ -132,185 +100,14 @@ export function ServerImportConfigModal({
   onAddServer,
   onUpdateServer,
 }: ServerImportConfigModalProps) {
-  const [phase, setPhase] = useState<Phase>("select");
-  const [error, setError] = useState<string | undefined>(undefined);
-  const [notice, setNotice] = useState<string | undefined>(undefined);
-  const [incoming, setIncoming] = useState<MCPConfig | null>(null);
-  const [resolutions, setResolutions] = useState<Record<string, Resolution>>(
-    {},
-  );
-  const [additionActions, setAdditionActions] = useState<
-    Record<string, AdditionAction>
-  >({});
-  const [outcomes, setOutcomes] = useState<ImportOutcome[]>([]);
-  const [selectedType, setSelectedType] = useState<string | null>(null);
-
-  // Reset the wizard each time the modal transitions to open. Done during
-  // render (React's "adjust state when a prop changes" pattern) rather than in
-  // an effect so there's no extra commit/cascade.
-  const [prevOpened, setPrevOpened] = useState(opened);
-  if (opened !== prevOpened) {
-    setPrevOpened(opened);
-    if (opened) {
-      setPhase("select");
-      setError(undefined);
-      setNotice(undefined);
-      setIncoming(null);
-      setResolutions({});
-      setAdditionActions({});
-      setOutcomes([]);
-      setSelectedType(null);
-    }
-  }
-
-  const plan = useMemo(
-    () => (incoming ? planImport(incoming, existingIds) : null),
-    [incoming, existingIds],
-  );
-
-  function beginReview(config: MCPConfig) {
-    const entries = Object.keys(config.mcpServers);
-    if (entries.length === 0) {
-      setError("No servers found in the selected source.");
-      setPhase("select");
-      return;
-    }
-    const fresh = planImport(config, existingIds);
-    const taken = [...existingIds, ...fresh.additions.map((a) => a.id)];
-    const initial: Record<string, Resolution> = {};
-    for (const conflict of fresh.conflicts) {
-      initial[conflict.id] = {
-        action: "skip",
-        renameTo: uniqueId(conflict.id, taken),
-      };
-    }
-    // New servers default to "import"; the user can opt individual ones out.
-    const initialAdds: Record<string, AdditionAction> = {};
-    for (const add of fresh.additions) {
-      initialAdds[add.id] = "import";
-    }
-    setIncoming(config);
-    setResolutions(initial);
-    setAdditionActions(initialAdds);
-    setError(undefined);
-    setPhase("review");
-  }
-
-  async function handlePickSource(type: string) {
-    setPhase("loading");
-    setError(undefined);
-    setNotice(undefined);
-    try {
-      const result = await onFetchSource(type);
-      if (result.error) {
-        setError(result.error);
-        setPhase("select");
-        return;
-      }
-      if (!result.found || !result.config) {
-        setNotice(
-          `No config found. Searched: ${result.searched.join(", ")}. Try uploading a file instead.`,
-        );
-        setPhase("select");
-        return;
-      }
-      beginReview(result.config);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-      setPhase("select");
-    }
-  }
-
-  async function handlePickFile(file: File | null) {
-    if (!file) return;
-    setError(undefined);
-    setNotice(undefined);
-    try {
-      const raw = await file.text();
-      beginReview(parseAnyClientConfig(raw));
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    }
-  }
-
-  function setResolution(id: string, action: ConflictResolution) {
-    setResolutions((r) => ({ ...r, [id]: { ...r[id], action } }));
-  }
-
-  function setRenameTo(id: string, renameTo: string) {
-    setResolutions((r) => ({ ...r, [id]: { ...r[id], renameTo } }));
-  }
-
-  function setAdditionAction(id: string, action: AdditionAction) {
-    setAdditionActions((a) => ({ ...a, [id]: action }));
-  }
-
-  async function applyEntry(
-    id: string,
-    outcome: ImportOutcome["status"],
-    write: () => Promise<void>,
-  ): Promise<ImportOutcome> {
-    try {
-      await write();
-      return { id, status: outcome };
-    } catch (err) {
-      return {
-        id,
-        status: "failed",
-        detail: err instanceof Error ? err.message : String(err),
-      };
-    }
-  }
-
-  async function handleImport() {
-    if (!plan) return;
-    setPhase("loading");
-    const results: ImportOutcome[] = [];
-    for (const add of plan.additions) {
-      if ((additionActions[add.id] ?? "import") === "skip") {
-        results.push({ id: add.id, status: "skipped" });
-        continue;
-      }
-      results.push(
-        await applyEntry(add.id, "added", () =>
-          Promise.resolve(onAddServer(add.id, add.config)),
-        ),
-      );
-    }
-    for (const conflict of plan.conflicts) {
-      const res = resolutions[conflict.id] ?? {
-        action: "skip",
-        renameTo: conflict.id,
-      };
-      if (res.action === "skip") {
-        results.push({ id: conflict.id, status: "skipped" });
-      } else if (res.action === "overwrite") {
-        results.push(
-          await applyEntry(conflict.id, "overwritten", () =>
-            onUpdateServer(conflict.id, conflict.id, conflict.config),
-          ),
-        );
-      } else {
-        const newId = res.renameTo.trim() || conflict.id;
-        results.push(
-          await applyEntry(newId, "renamed", () =>
-            Promise.resolve(onAddServer(newId, conflict.config)),
-          ),
-        );
-      }
-    }
-    setOutcomes(results);
-    setPhase("summary");
-  }
-
-  const importCount = plan
-    ? plan.additions.filter(
-        (a) => (additionActions[a.id] ?? "import") === "import",
-      ).length +
-      plan.conflicts.filter(
-        (c) => (resolutions[c.id]?.action ?? "skip") !== "skip",
-      ).length
-    : 0;
+  const vm = useImportClientConfig({
+    opened,
+    existingIds,
+    onFetchSource,
+    onAddServer,
+    onUpdateServer,
+  });
+  const { plan } = vm;
 
   return (
     <Modal
@@ -321,14 +118,14 @@ export function ServerImportConfigModal({
       title={<ModalTitle>Import client config</ModalTitle>}
     >
       <SectionStack>
-        {error ? (
+        {vm.error ? (
           <Alert color="red" title="Import error">
-            {error}
+            {vm.error}
           </Alert>
         ) : null}
-        {notice ? <Alert color="yellow">{notice}</Alert> : null}
+        {vm.notice ? <Alert color="yellow">{vm.notice}</Alert> : null}
 
-        {phase === "select" ? (
+        {vm.phase === "select" ? (
           <SectionStack>
             <DimText>
               Import MCP servers from another client. Choose a known client
@@ -338,21 +135,23 @@ export function ServerImportConfigModal({
               <NativeSelect
                 label="Client"
                 data={SOURCE_OPTIONS}
-                value={selectedType ?? ""}
-                onChange={(e) => setSelectedType(e.currentTarget.value || null)}
+                value={vm.selectedType ?? ""}
+                onChange={(e) =>
+                  vm.setSelectedType(e.currentTarget.value || null)
+                }
                 flex={1}
               />
               <Button
-                disabled={!selectedType}
+                disabled={!vm.selectedType}
                 onClick={() => {
-                  if (selectedType) void handlePickSource(selectedType);
+                  if (vm.selectedType) void vm.pickSource(vm.selectedType);
                 }}
               >
                 Import
               </Button>
               <FileButton
                 accept="application/json,.json"
-                onChange={handlePickFile}
+                onChange={(file) => void vm.pickFile(file)}
               >
                 {(props) => (
                   <Button {...props} variant="default">
@@ -364,14 +163,14 @@ export function ServerImportConfigModal({
           </SectionStack>
         ) : null}
 
-        {phase === "loading" ? (
+        {vm.phase === "loading" ? (
           <Group gap="sm">
             <Loader size="sm" />
             <Text size="sm">Working…</Text>
           </Group>
         ) : null}
 
-        {phase === "review" && plan ? (
+        {vm.phase === "review" && plan ? (
           <SectionStack>
             {plan.additions.length > 0 ? (
               <Stack gap="xs">
@@ -384,9 +183,9 @@ export function ServerImportConfigModal({
                     <SegmentedControl
                       size="xs"
                       data={ADDITION_DATA}
-                      value={additionActions[a.id] ?? "import"}
+                      value={vm.additionActions[a.id] ?? "import"}
                       onChange={(value) =>
-                        setAdditionAction(a.id, value as AdditionAction)
+                        vm.setAdditionAction(a.id, value as AdditionAction)
                       }
                     />
                   </RowGroup>
@@ -400,7 +199,7 @@ export function ServerImportConfigModal({
                   Already exists ({plan.conflicts.length})
                 </Text>
                 {plan.conflicts.map((conflict) => {
-                  const res = resolutions[conflict.id];
+                  const res = vm.resolutions[conflict.id];
                   return (
                     <Stack key={conflict.id} gap="xs">
                       <RowGroup>
@@ -410,7 +209,7 @@ export function ServerImportConfigModal({
                           data={RESOLUTION_DATA}
                           value={res?.action ?? "skip"}
                           onChange={(value) =>
-                            setResolution(
+                            vm.setResolution(
                               conflict.id,
                               value as ConflictResolution,
                             )
@@ -423,7 +222,7 @@ export function ServerImportConfigModal({
                           aria-label={`New id for ${conflict.id}`}
                           value={res.renameTo}
                           onChange={(e) =>
-                            setRenameTo(conflict.id, e.currentTarget.value)
+                            vm.setRenameTo(conflict.id, e.currentTarget.value)
                           }
                         />
                       ) : null}
@@ -434,25 +233,25 @@ export function ServerImportConfigModal({
             ) : null}
 
             <Actions>
-              <Button variant="default" onClick={() => setPhase("select")}>
+              <Button variant="default" onClick={vm.back}>
                 Back
               </Button>
               <Button
-                onClick={() => void handleImport()}
-                disabled={importCount === 0}
+                onClick={() => void vm.runImport()}
+                disabled={vm.importCount === 0}
               >
-                Import {importCount} server{importCount === 1 ? "" : "s"}
+                Import {vm.importCount} server{vm.importCount === 1 ? "" : "s"}
               </Button>
             </Actions>
           </SectionStack>
         ) : null}
 
-        {phase === "summary" ? (
+        {vm.phase === "summary" ? (
           <SectionStack>
             <Text fw={600} size="sm">
               Import complete
             </Text>
-            {outcomes.map((o) => {
+            {vm.outcomes.map((o) => {
               const meta = OUTCOME_META[o.status];
               return (
                 <Stack key={`${o.id}-${o.status}`} gap={2}>
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
index 7f0aa7ddad..4e4588cdfb 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
@@ -1,24 +1,7 @@
-import { useEffect, useMemo, useState } from "react";
 import { Modal, Text } from "@mantine/core";
-import {
-  parseServerJson,
-  buildServerConfig,
-  type ParsedServerJson,
-  type ServerJsonOption,
-} from "@inspector/core/mcp/import/serverJson.js";
-import type {
-  InspectorServerJsonDraft,
-  MCPServerConfig,
-} from "@inspector/core/mcp/types.js";
-import {
-  ImportServerJsonPanel,
-  type EnvVarInfo,
-  type PackageInfo,
-  type ValidationResult,
-} from "../ImportServerJsonPanel/ImportServerJsonPanel";
-
-/** Allowed id pattern — mirrors validateStoreId in core/storage/store-io.ts. */
-const ID_PATTERN = /^[a-zA-Z0-9_-]+$/;
+import type { MCPServerConfig } from "@inspector/core/mcp/types.js";
+import { useServerJsonImport } from "../../../hooks/useServerJsonImport";
+import { ImportServerJsonPanel } from "../ImportServerJsonPanel/ImportServerJsonPanel";
 
 const ModalTitle = Text.withProps({ fw: 700, span: true });
 
@@ -31,97 +14,10 @@ export interface ServerImportJsonModalProps {
   onAddServer: (id: string, config: MCPServerConfig) => Promise<void> | void;
 }
 
-const EMPTY_DRAFT: InspectorServerJsonDraft = {
-  rawText: "",
-  envOverrides: {},
-};
-
-/** Result of parsing the current draft text. */
-type ParseState =
-  | { ok: true; parsed: ParsedServerJson }
-  | { ok: false; error: string }
-  | { ok: null };
-
-function parseDraft(rawText: string): ParseState {
-  if (!rawText.trim()) return { ok: null };
-  try {
-    return { ok: true, parsed: parseServerJson(rawText) };
-  } catch (err) {
-    return {
-      ok: false,
-      error: err instanceof Error ? err.message : String(err),
-    };
-  }
-}
-
-/** The id the chosen server will be saved under. */
-function resolveId(
-  parsed: ParsedServerJson | undefined,
-  override: string | undefined,
-): string {
-  const trimmed = (override ?? "").trim();
-  if (trimmed) return trimmed;
-  return parsed?.serverName ?? "";
-}
-
-/** Debounce (ms) before a textarea edit re-triggers parse/validation. */
-const VALIDATE_DEBOUNCE_MS = 300;
-
-/**
- * Delay (ms) after content is loaded/pasted before the File Contents disclosure
- * auto-collapses — long enough to read as "the content was accepted".
- */
-const COLLAPSE_DELAY_MS = 1000;
-
-/**
- * How long (ms) to flash the disclosure with its hover background just before it
- * collapses, so the collapse reads as intentional rather than abrupt.
- */
-const HIGHLIGHT_DURATION_MS = 250;
-
-interface Selection {
-  parsed?: ParsedServerJson;
-  selectedIndex: number;
-  selectedOption?: ServerJsonOption;
-  targetId: string;
-  idIsValid: boolean;
-  idIsDuplicate: boolean;
-}
-
-/**
- * Derive the chosen package/remote, the resulting id, and its validity from a
- * parse state + the current draft. Pure, so the render path (debounced parse)
- * and the submit path (live parse) can share it.
- */
-function computeSelection(
-  parseState: ParseState,
-  draft: InspectorServerJsonDraft,
-  existingIds: string[],
-): Selection {
-  const parsed = parseState.ok === true ? parseState.parsed : undefined;
-  const selectedIndex = Math.min(
-    draft.selectedPackageIndex ?? 0,
-    Math.max((parsed?.options.length ?? 1) - 1, 0),
-  );
-  const selectedOption = parsed?.options[selectedIndex];
-  const targetId = resolveId(parsed, draft.nameOverride);
-  const idIsValid = targetId === "" || ID_PATTERN.test(targetId);
-  const idIsDuplicate = targetId !== "" && existingIds.includes(targetId);
-  return {
-    parsed,
-    selectedIndex,
-    selectedOption,
-    targetId,
-    idIsValid,
-    idIsDuplicate,
-  };
-}
-
 /**
- * Wiring layer for the registry `server.json` import (#1348). Owns the draft +
- * parse state and feeds the dumb `ImportServerJsonPanel`; on "Add Server" it
- * builds the runnable config for the selected package/remote (merging the env
- * overrides the user typed) and hands it to `onAddServer`.
+ * Display shell for the registry `server.json` import (#1348). All orchestration
+ * (parsing, debounced validation, selection, auto-collapse, submit) lives in
+ * `useServerJsonImport`; this component only renders the modal + dumb panel.
  */
 export function ServerImportJsonModal({
   opened,
@@ -129,204 +25,7 @@ export function ServerImportJsonModal({
   onClose,
   onAddServer,
 }: ServerImportJsonModalProps) {
-  const [draft, setDraft] = useState<InspectorServerJsonDraft>(EMPTY_DRAFT);
-  const [submitError, setSubmitError] = useState<string | undefined>(undefined);
-  // Debounced copy of the raw text that drives parsing/validation, so typing
-  // doesn't re-parse on every keystroke. The textarea itself stays bound to the
-  // live `draft.rawText`.
-  const [debouncedText, setDebouncedText] = useState<string>(
-    EMPTY_DRAFT.rawText,
-  );
-  // The File Contents disclosure starts open and auto-collapses shortly after
-  // content is loaded/pasted (see the effect below). `highlight` paints its
-  // hover background for a beat right before it collapses.
-  const [fileContentsOpen, setFileContentsOpen] = useState(true);
-  const [fileContentsHighlight, setFileContentsHighlight] = useState(false);
-
-  // Reset the draft each time the modal transitions to open. Done during render
-  // (React's "adjust state when a prop changes" pattern) rather than in an
-  // effect so there's no extra commit/cascade.
-  const [prevOpened, setPrevOpened] = useState(opened);
-  if (opened !== prevOpened) {
-    setPrevOpened(opened);
-    if (opened) {
-      setDraft(EMPTY_DRAFT);
-      setSubmitError(undefined);
-      setDebouncedText(EMPTY_DRAFT.rawText);
-      setFileContentsOpen(true);
-      setFileContentsHighlight(false);
-    }
-  }
-
-  // Re-validate after the user pauses typing. setState lives in the timeout
-  // callback (not the effect body), so this doesn't cascade-render.
-  useEffect(() => {
-    const id = setTimeout(
-      () => setDebouncedText(draft.rawText),
-      VALIDATE_DEBOUNCE_MS,
-    );
-    return () => clearTimeout(id);
-  }, [draft.rawText]);
-
-  // Once there's content, flash the disclosure's hover highlight and then
-  // collapse it, so the (animated) collapse signals that the paste/file load
-  // was accepted and surfaces the validation / env-var sections below. Clearing
-  // the textarea re-opens it (handled in setRawText). setState lives only in the
-  // timeout callbacks, so this doesn't cascade-render.
-  useEffect(() => {
-    if (!draft.rawText.trim()) return;
-    let collapseTimer: ReturnType<typeof setTimeout> | undefined;
-    const highlightTimer = setTimeout(() => {
-      setFileContentsHighlight(true);
-      collapseTimer = setTimeout(() => {
-        setFileContentsHighlight(false);
-        setFileContentsOpen(false);
-      }, HIGHLIGHT_DURATION_MS);
-    }, COLLAPSE_DELAY_MS);
-    return () => {
-      clearTimeout(highlightTimer);
-      if (collapseTimer) clearTimeout(collapseTimer);
-    };
-  }, [draft.rawText]);
-
-  const parseState = useMemo(() => parseDraft(debouncedText), [debouncedText]);
-  const {
-    parsed,
-    selectedIndex,
-    selectedOption,
-    targetId,
-    idIsValid,
-    idIsDuplicate,
-  } = useMemo(
-    () => computeSelection(parseState, draft, existingIds),
-    [parseState, draft, existingIds],
-  );
-
-  // The Add button is enabled only when the (debounced) content validates: a
-  // parseable server.json with a runnable option and a valid, non-duplicate id.
-  const canAdd =
-    parsed !== undefined &&
-    selectedOption !== undefined &&
-    idIsValid &&
-    !idIsDuplicate;
-
-  const packages: PackageInfo[] | undefined = parsed?.options.map((o) => ({
-    registryType: o.registryType,
-    identifier: o.identifier,
-    runtimeHint: o.runtimeHint,
-  }));
-
-  const envVars: EnvVarInfo[] = (selectedOption?.envVars ?? []).map((v) => ({
-    name: v.name,
-    description: v.description,
-    required: v.required,
-    value: draft.envOverrides[v.name] ?? v.default ?? "",
-  }));
-
-  const validation: ValidationResult[] = useMemo(() => {
-    if (parseState.ok === null) {
-      return [
-        { type: "info", message: "Paste server.json content to validate." },
-      ];
-    }
-    if (parseState.ok === false) {
-      return [{ type: "error", message: parseState.error }];
-    }
-    const results: ValidationResult[] = [
-      {
-        type: "success",
-        message: `Valid server.json for "${parseState.parsed.fullName}".`,
-      },
-      {
-        type: "info",
-        message: `${parseState.parsed.options.length} runnable option(s) found.`,
-      },
-    ];
-    if (!idIsValid) {
-      results.push({
-        type: "error",
-        message:
-          "Server id must use only letters, numbers, hyphens, underscores.",
-      });
-    } else if (idIsDuplicate) {
-      results.push({
-        type: "warning",
-        message: `A server with id "${targetId}" already exists.`,
-      });
-    }
-    return results;
-  }, [parseState, idIsValid, idIsDuplicate, targetId]);
-
-  function setRawText(content: string) {
-    setSubmitError(undefined);
-    setDraft((d) => ({ ...d, rawText: content }));
-    // A fresh edit cancels any in-flight pre-collapse highlight.
-    setFileContentsHighlight(false);
-    // Re-open the disclosure when the textarea is cleared so it's ready to paste
-    // into again.
-    if (!content.trim()) setFileContentsOpen(true);
-  }
-
-  function selectPackage(index: number) {
-    setDraft((d) => ({ ...d, selectedPackageIndex: index }));
-  }
-
-  function setEnvVar(name: string, value: string) {
-    setDraft((d) => ({
-      ...d,
-      envOverrides: { ...d.envOverrides, [name]: value },
-    }));
-  }
-
-  function setServerName(name: string) {
-    setDraft((d) => ({ ...d, nameOverride: name }));
-  }
-
-  async function pickFile(file: File | null) {
-    if (!file) return;
-    setSubmitError(undefined);
-    setFileContentsHighlight(false);
-    try {
-      const text = await file.text();
-      setDraft((d) => ({ ...d, rawText: text }));
-    } catch (err) {
-      setSubmitError(err instanceof Error ? err.message : String(err));
-    }
-  }
-
-  async function handleAddServer() {
-    setSubmitError(undefined);
-    // Parse the live text (not the debounced copy) so a click in the brief
-    // window after an edit (before the Add button has re-disabled) still sees
-    // the latest content rather than importing stale input.
-    const sel = computeSelection(parseDraft(draft.rawText), draft, existingIds);
-    if (
-      !sel.parsed ||
-      !sel.selectedOption ||
-      !sel.idIsValid ||
-      sel.idIsDuplicate
-    ) {
-      setSubmitError("Fix the validation errors before adding the server.");
-      return;
-    }
-    // Only pass overrides for env vars the selected option declares.
-    const overrides: Record<string, string> = {};
-    for (const v of sel.selectedOption.envVars) {
-      const value = draft.envOverrides[v.name];
-      if (value !== undefined) overrides[v.name] = value;
-    }
-    const config = buildServerConfig(sel.selectedOption, overrides);
-    try {
-      await onAddServer(sel.targetId, config);
-      onClose();
-    } catch (err) {
-      setSubmitError(err instanceof Error ? err.message : String(err));
-    }
-  }
-
-  const allValidation = submitError
-    ? [...validation, { type: "error" as const, message: submitError }]
-    : validation;
+  const vm = useServerJsonImport({ opened, existingIds, onAddServer });
 
   return (
     <Modal
@@ -337,21 +36,25 @@ export function ServerImportJsonModal({
       title={<ModalTitle>Import from registry config</ModalTitle>}
     >
       <ImportServerJsonPanel
-        draft={{ ...draft, selectedPackageIndex: selectedIndex }}
-        validation={allValidation}
-        packages={packages}
-        envVars={envVars}
-        onJsonChange={setRawText}
-        onSelectPackage={selectPackage}
-        onEnvVarChange={setEnvVar}
-        onServerNameChange={setServerName}
-        onAddServer={() => void handleAddServer()}
-        addDisabled={!canAdd}
-        fileContentsOpen={fileContentsOpen}
-        onFileContentsChange={setFileContentsOpen}
-        fileContentsHighlight={fileContentsHighlight}
+        draft={vm.draft}
+        validation={vm.validation}
+        packages={vm.packages}
+        envVars={vm.envVars}
+        addDisabled={!vm.canAdd}
+        fileContentsOpen={vm.fileContentsOpen}
+        onFileContentsChange={vm.setFileContentsOpen}
+        fileContentsHighlight={vm.fileContentsHighlight}
+        onJsonChange={vm.setRawText}
+        onSelectPackage={vm.selectPackage}
+        onEnvVarChange={vm.setEnvVar}
+        onServerNameChange={vm.setServerName}
+        onAddServer={() => {
+          void vm.submit().then((added) => {
+            if (added) onClose();
+          });
+        }}
+        onPickFile={(file) => void vm.pickFile(file)}
         onCancel={onClose}
-        onPickFile={(file) => void pickFile(file)}
       />
     </Modal>
   );
diff --git a/clients/web/src/hooks/useImportClientConfig.ts b/clients/web/src/hooks/useImportClientConfig.ts
new file mode 100644
index 0000000000..909004cd2c
--- /dev/null
+++ b/clients/web/src/hooks/useImportClientConfig.ts
@@ -0,0 +1,273 @@
+import { useMemo, useState } from "react";
+import {
+  parseClientConfig,
+  planImport,
+  uniqueId,
+  type ConflictResolution,
+  type ImportPlan,
+  type ImportSourceResult,
+} from "@inspector/core/mcp/import/index.js";
+import type { MCPConfig, MCPServerConfig } from "@inspector/core/mcp/types.js";
+
+export type ImportPhase = "select" | "loading" | "review" | "summary";
+
+export interface ConflictResolutionState {
+  action: ConflictResolution;
+  renameTo: string;
+}
+
+/** Per-row choice for a brand-new (non-conflicting) server. */
+export type AdditionAction = "import" | "skip";
+
+export interface ImportOutcome {
+  id: string;
+  status: "added" | "overwritten" | "renamed" | "skipped" | "failed";
+  detail?: string;
+}
+
+export interface UseImportClientConfigOptions {
+  opened: boolean;
+  /** Ids already in the catalog — drives conflict detection + rename defaults. */
+  existingIds: string[];
+  /** Read a client's well-known config on the backend (authed GET). */
+  onFetchSource: (type: string) => Promise<ImportSourceResult>;
+  onAddServer: (id: string, config: MCPServerConfig) => Promise<void>;
+  onUpdateServer: (
+    originalId: string,
+    newId: string,
+    config: MCPServerConfig,
+  ) => Promise<void>;
+}
+
+export interface ImportClientConfigViewModel {
+  phase: ImportPhase;
+  error?: string;
+  notice?: string;
+  plan: ImportPlan | null;
+  resolutions: Record<string, ConflictResolutionState>;
+  additionActions: Record<string, AdditionAction>;
+  outcomes: ImportOutcome[];
+  selectedType: string | null;
+  importCount: number;
+  setSelectedType: (type: string | null) => void;
+  pickSource: (type: string) => Promise<void>;
+  pickFile: (file: File | null) => Promise<void>;
+  setResolution: (id: string, action: ConflictResolution) => void;
+  setRenameTo: (id: string, renameTo: string) => void;
+  setAdditionAction: (id: string, action: AdditionAction) => void;
+  runImport: () => Promise<void>;
+  back: () => void;
+}
+
+/**
+ * Wiring for the "Import client config" flow (#1348): owns the wizard phase,
+ * the parsed plan, per-server resolutions, and the apply loop. Keeps
+ * `ServerImportConfigModal` a thin display component; the reusable parsing +
+ * merge logic lives in `core/mcp/import`.
+ */
+export function useImportClientConfig({
+  opened,
+  existingIds,
+  onFetchSource,
+  onAddServer,
+  onUpdateServer,
+}: UseImportClientConfigOptions): ImportClientConfigViewModel {
+  const [phase, setPhase] = useState<ImportPhase>("select");
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [notice, setNotice] = useState<string | undefined>(undefined);
+  const [incoming, setIncoming] = useState<MCPConfig | null>(null);
+  const [resolutions, setResolutions] = useState<
+    Record<string, ConflictResolutionState>
+  >({});
+  const [additionActions, setAdditionActions] = useState<
+    Record<string, AdditionAction>
+  >({});
+  const [outcomes, setOutcomes] = useState<ImportOutcome[]>([]);
+  const [selectedType, setSelectedType] = useState<string | null>(null);
+
+  // Reset the wizard each time the modal transitions to open. Done during
+  // render (React's "adjust state when a prop changes" pattern) rather than in
+  // an effect so there's no extra commit/cascade.
+  const [prevOpened, setPrevOpened] = useState(opened);
+  if (opened !== prevOpened) {
+    setPrevOpened(opened);
+    if (opened) {
+      setPhase("select");
+      setError(undefined);
+      setNotice(undefined);
+      setIncoming(null);
+      setResolutions({});
+      setAdditionActions({});
+      setOutcomes([]);
+      setSelectedType(null);
+    }
+  }
+
+  const plan = useMemo(
+    () => (incoming ? planImport(incoming, existingIds) : null),
+    [incoming, existingIds],
+  );
+
+  function beginReview(config: MCPConfig) {
+    const fresh = planImport(config, existingIds);
+    if (fresh.additions.length === 0 && fresh.conflicts.length === 0) {
+      setError("No servers found in the selected source.");
+      setPhase("select");
+      return;
+    }
+    const taken = [...existingIds, ...fresh.additions.map((a) => a.id)];
+    const initial: Record<string, ConflictResolutionState> = {};
+    for (const conflict of fresh.conflicts) {
+      initial[conflict.id] = {
+        action: "skip",
+        renameTo: uniqueId(conflict.id, taken),
+      };
+    }
+    // New servers default to "import"; the user can opt individual ones out.
+    const initialAdds: Record<string, AdditionAction> = {};
+    for (const add of fresh.additions) {
+      initialAdds[add.id] = "import";
+    }
+    setIncoming(config);
+    setResolutions(initial);
+    setAdditionActions(initialAdds);
+    setError(undefined);
+    setPhase("review");
+  }
+
+  async function pickSource(type: string) {
+    setPhase("loading");
+    setError(undefined);
+    setNotice(undefined);
+    try {
+      const result = await onFetchSource(type);
+      if (result.error) {
+        setError(result.error);
+        setPhase("select");
+        return;
+      }
+      if (!result.found || !result.config) {
+        setNotice(
+          `No config found. Searched: ${result.searched.join(", ")}. Try uploading a file instead.`,
+        );
+        setPhase("select");
+        return;
+      }
+      beginReview(result.config);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setPhase("select");
+    }
+  }
+
+  async function pickFile(file: File | null) {
+    if (!file) return;
+    setError(undefined);
+    setNotice(undefined);
+    try {
+      const raw = await file.text();
+      beginReview(parseClientConfig(raw));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  function setResolution(id: string, action: ConflictResolution) {
+    setResolutions((r) => ({ ...r, [id]: { ...r[id], action } }));
+  }
+
+  function setRenameTo(id: string, renameTo: string) {
+    setResolutions((r) => ({ ...r, [id]: { ...r[id], renameTo } }));
+  }
+
+  function setAdditionAction(id: string, action: AdditionAction) {
+    setAdditionActions((a) => ({ ...a, [id]: action }));
+  }
+
+  async function applyEntry(
+    id: string,
+    outcome: ImportOutcome["status"],
+    write: () => Promise<void>,
+  ): Promise<ImportOutcome> {
+    try {
+      await write();
+      return { id, status: outcome };
+    } catch (err) {
+      return {
+        id,
+        status: "failed",
+        detail: err instanceof Error ? err.message : String(err),
+      };
+    }
+  }
+
+  async function runImport() {
+    if (!plan) return;
+    setPhase("loading");
+    const results: ImportOutcome[] = [];
+    for (const add of plan.additions) {
+      if ((additionActions[add.id] ?? "import") === "skip") {
+        results.push({ id: add.id, status: "skipped" });
+        continue;
+      }
+      results.push(
+        await applyEntry(add.id, "added", () =>
+          Promise.resolve(onAddServer(add.id, add.config)),
+        ),
+      );
+    }
+    for (const conflict of plan.conflicts) {
+      const res = resolutions[conflict.id] ?? {
+        action: "skip",
+        renameTo: conflict.id,
+      };
+      if (res.action === "skip") {
+        results.push({ id: conflict.id, status: "skipped" });
+      } else if (res.action === "overwrite") {
+        results.push(
+          await applyEntry(conflict.id, "overwritten", () =>
+            onUpdateServer(conflict.id, conflict.id, conflict.config),
+          ),
+        );
+      } else {
+        const newId = res.renameTo.trim() || conflict.id;
+        results.push(
+          await applyEntry(newId, "renamed", () =>
+            Promise.resolve(onAddServer(newId, conflict.config)),
+          ),
+        );
+      }
+    }
+    setOutcomes(results);
+    setPhase("summary");
+  }
+
+  const importCount = plan
+    ? plan.additions.filter(
+        (a) => (additionActions[a.id] ?? "import") === "import",
+      ).length +
+      plan.conflicts.filter(
+        (c) => (resolutions[c.id]?.action ?? "skip") !== "skip",
+      ).length
+    : 0;
+
+  return {
+    phase,
+    error,
+    notice,
+    plan,
+    resolutions,
+    additionActions,
+    outcomes,
+    selectedType,
+    importCount,
+    setSelectedType,
+    pickSource,
+    pickFile,
+    setResolution,
+    setRenameTo,
+    setAdditionAction,
+    runImport,
+    back: () => setPhase("select"),
+  };
+}
diff --git a/clients/web/src/hooks/useServerJsonImport.ts b/clients/web/src/hooks/useServerJsonImport.ts
new file mode 100644
index 0000000000..ef332fcb13
--- /dev/null
+++ b/clients/web/src/hooks/useServerJsonImport.ts
@@ -0,0 +1,305 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  parseServerJson,
+  buildServerConfigForSelection,
+  selectServerJsonOption,
+  type ParsedServerJson,
+} from "@inspector/core/mcp/import/index.js";
+import type {
+  InspectorServerJsonDraft,
+  MCPServerConfig,
+} from "@inspector/core/mcp/types.js";
+import type {
+  EnvVarInfo,
+  PackageInfo,
+  ValidationResult,
+} from "../components/groups/ImportServerJsonPanel/ImportServerJsonPanel";
+
+/** Debounce (ms) before a textarea edit re-triggers parse/validation. */
+const VALIDATE_DEBOUNCE_MS = 300;
+
+/**
+ * Delay (ms) after content is loaded/pasted before the File Contents disclosure
+ * auto-collapses — long enough to read as "the content was accepted".
+ */
+const COLLAPSE_DELAY_MS = 1000;
+
+/**
+ * How long (ms) to flash the disclosure with its hover background just before it
+ * collapses, so the collapse reads as intentional rather than abrupt.
+ */
+const HIGHLIGHT_DURATION_MS = 250;
+
+const EMPTY_DRAFT: InspectorServerJsonDraft = {
+  rawText: "",
+  envOverrides: {},
+};
+
+/** Result of parsing the current draft text. */
+type ParseState =
+  | { ok: true; parsed: ParsedServerJson }
+  | { ok: false; error: string }
+  | { ok: null };
+
+function parseDraft(rawText: string): ParseState {
+  if (!rawText.trim()) return { ok: null };
+  try {
+    return { ok: true, parsed: parseServerJson(rawText) };
+  } catch (err) {
+    return {
+      ok: false,
+      error: err instanceof Error ? err.message : String(err),
+    };
+  }
+}
+
+export interface UseServerJsonImportOptions {
+  /** Whether the host modal is open — drives the per-open reset. */
+  opened: boolean;
+  /** Ids already in use — drives the duplicate-id warning. */
+  existingIds: string[];
+  /** Persist the chosen server. Resolves once the catalog has been updated. */
+  onAddServer: (id: string, config: MCPServerConfig) => Promise<void> | void;
+}
+
+/** View-model the dumb `ImportServerJsonPanel` renders from. */
+export interface ServerJsonImportViewModel {
+  draft: InspectorServerJsonDraft;
+  validation: ValidationResult[];
+  packages?: PackageInfo[];
+  envVars: EnvVarInfo[];
+  canAdd: boolean;
+  fileContentsOpen: boolean;
+  fileContentsHighlight: boolean;
+  setRawText: (content: string) => void;
+  selectPackage: (index: number) => void;
+  setEnvVar: (name: string, value: string) => void;
+  setServerName: (name: string) => void;
+  pickFile: (file: File | null) => Promise<void>;
+  setFileContentsOpen: (open: boolean) => void;
+  /** Build + persist the selected server. Resolves to true when it was added. */
+  submit: () => Promise<boolean>;
+}
+
+/**
+ * Wiring for the registry `server.json` import (#1348): owns the draft + parse
+ * state, the debounced validation, and the File Contents auto-collapse, and
+ * builds/persists the selected server on submit. Keeps `ServerImportJsonModal`
+ * a thin display component; the reusable parsing/selection lives in
+ * `core/mcp/import`.
+ */
+export function useServerJsonImport({
+  opened,
+  existingIds,
+  onAddServer,
+}: UseServerJsonImportOptions): ServerJsonImportViewModel {
+  const [draft, setDraft] = useState<InspectorServerJsonDraft>(EMPTY_DRAFT);
+  const [submitError, setSubmitError] = useState<string | undefined>(undefined);
+  // Debounced copy of the raw text that drives parsing/validation, so typing
+  // doesn't re-parse on every keystroke. The textarea stays bound to live text.
+  const [debouncedText, setDebouncedText] = useState<string>(
+    EMPTY_DRAFT.rawText,
+  );
+  // The File Contents disclosure starts open and auto-collapses shortly after
+  // content is loaded/pasted; `highlight` flashes its hover bg before collapse.
+  const [fileContentsOpen, setFileContentsOpen] = useState(true);
+  const [fileContentsHighlight, setFileContentsHighlight] = useState(false);
+
+  // Reset each time the modal transitions to open. Done during render (React's
+  // "adjust state when a prop changes" pattern) so there's no extra commit.
+  const [prevOpened, setPrevOpened] = useState(opened);
+  if (opened !== prevOpened) {
+    setPrevOpened(opened);
+    if (opened) {
+      setDraft(EMPTY_DRAFT);
+      setSubmitError(undefined);
+      setDebouncedText(EMPTY_DRAFT.rawText);
+      setFileContentsOpen(true);
+      setFileContentsHighlight(false);
+    }
+  }
+
+  // Re-validate after the user pauses typing. setState lives in the timeout
+  // callback (not the effect body), so this doesn't cascade-render.
+  useEffect(() => {
+    const id = setTimeout(
+      () => setDebouncedText(draft.rawText),
+      VALIDATE_DEBOUNCE_MS,
+    );
+    return () => clearTimeout(id);
+  }, [draft.rawText]);
+
+  // Once there's content, flash the disclosure's hover highlight and then
+  // collapse it, signalling the paste/file load was accepted and surfacing the
+  // validation / env-var sections. Clearing re-opens it (see setRawText).
+  useEffect(() => {
+    if (!draft.rawText.trim()) return;
+    let collapseTimer: ReturnType<typeof setTimeout> | undefined;
+    const highlightTimer = setTimeout(() => {
+      setFileContentsHighlight(true);
+      collapseTimer = setTimeout(() => {
+        setFileContentsHighlight(false);
+        setFileContentsOpen(false);
+      }, HIGHLIGHT_DURATION_MS);
+    }, COLLAPSE_DELAY_MS);
+    return () => {
+      clearTimeout(highlightTimer);
+      if (collapseTimer) clearTimeout(collapseTimer);
+    };
+  }, [draft.rawText]);
+
+  const parseState = useMemo(() => parseDraft(debouncedText), [debouncedText]);
+  const selection = useMemo(() => {
+    if (parseState.ok !== true) return undefined;
+    return selectServerJsonOption(parseState.parsed, {
+      selectedIndex: draft.selectedPackageIndex,
+      idOverride: draft.nameOverride,
+      existingIds,
+    });
+  }, [parseState, draft.selectedPackageIndex, draft.nameOverride, existingIds]);
+
+  const selectedIndex = selection?.selectedIndex ?? 0;
+  const selectedOption = selection?.selectedOption;
+  const parsed = parseState.ok === true ? parseState.parsed : undefined;
+
+  // The Add button is enabled only when the (debounced) content validates.
+  const canAdd =
+    selection !== undefined && selection.idIsValid && !selection.idIsDuplicate;
+
+  const packages: PackageInfo[] | undefined = parsed?.options.map((o) => ({
+    registryType: o.registryType,
+    identifier: o.identifier,
+    runtimeHint: o.runtimeHint,
+  }));
+
+  const envVars: EnvVarInfo[] = (selectedOption?.envVars ?? []).map((v) => ({
+    name: v.name,
+    description: v.description,
+    required: v.required,
+    value: draft.envOverrides[v.name] ?? v.default ?? "",
+  }));
+
+  const validation: ValidationResult[] = useMemo(() => {
+    if (parseState.ok === null) {
+      return [
+        { type: "info", message: "Paste server.json content to validate." },
+      ];
+    }
+    if (parseState.ok === false) {
+      return [{ type: "error", message: parseState.error }];
+    }
+    const results: ValidationResult[] = [
+      {
+        type: "success",
+        message: `Valid server.json for "${parseState.parsed.fullName}".`,
+      },
+      {
+        type: "info",
+        message: `${parseState.parsed.options.length} runnable option(s) found.`,
+      },
+    ];
+    if (selection && !selection.idIsValid) {
+      results.push({
+        type: "error",
+        message:
+          "Server id must use only letters, numbers, hyphens, underscores.",
+      });
+    } else if (selection?.idIsDuplicate) {
+      results.push({
+        type: "warning",
+        message: `A server with id "${selection.serverId}" already exists.`,
+      });
+    }
+    return results;
+  }, [parseState, selection]);
+
+  const allValidation = submitError
+    ? [...validation, { type: "error" as const, message: submitError }]
+    : validation;
+
+  function setRawText(content: string) {
+    setSubmitError(undefined);
+    setDraft((d) => ({ ...d, rawText: content }));
+    // A fresh edit cancels any in-flight pre-collapse highlight.
+    setFileContentsHighlight(false);
+    // Re-open the disclosure when the textarea is cleared so it's ready to paste
+    // into again.
+    if (!content.trim()) setFileContentsOpen(true);
+  }
+
+  function selectPackage(index: number) {
+    setDraft((d) => ({ ...d, selectedPackageIndex: index }));
+  }
+
+  function setEnvVar(name: string, value: string) {
+    setDraft((d) => ({
+      ...d,
+      envOverrides: { ...d.envOverrides, [name]: value },
+    }));
+  }
+
+  function setServerName(name: string) {
+    setDraft((d) => ({ ...d, nameOverride: name }));
+  }
+
+  async function pickFile(file: File | null) {
+    if (!file) return;
+    setSubmitError(undefined);
+    setFileContentsHighlight(false);
+    try {
+      const text = await file.text();
+      setDraft((d) => ({ ...d, rawText: text }));
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function submit(): Promise<boolean> {
+    setSubmitError(undefined);
+    // Parse the live text (not the debounced copy) so a click in the brief
+    // window after an edit (before the button re-disables) sees the latest
+    // content rather than importing stale input.
+    const live = parseDraft(draft.rawText);
+    if (live.ok !== true) {
+      setSubmitError("Fix the validation errors before adding the server.");
+      return false;
+    }
+    const sel = selectServerJsonOption(live.parsed, {
+      selectedIndex: draft.selectedPackageIndex,
+      idOverride: draft.nameOverride,
+      existingIds,
+    });
+    if (!sel.idIsValid || sel.idIsDuplicate) {
+      setSubmitError("Fix the validation errors before adding the server.");
+      return false;
+    }
+    const config = buildServerConfigForSelection(
+      sel.selectedOption,
+      draft.envOverrides,
+    );
+    try {
+      await onAddServer(sel.serverId, config);
+      return true;
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : String(err));
+      return false;
+    }
+  }
+
+  return {
+    draft: { ...draft, selectedPackageIndex: selectedIndex },
+    validation: allValidation,
+    packages,
+    envVars,
+    canAdd,
+    fileContentsOpen,
+    fileContentsHighlight,
+    setRawText,
+    selectPackage,
+    setEnvVar,
+    setServerName,
+    pickFile,
+    setFileContentsOpen,
+    submit,
+  };
+}
diff --git a/clients/web/src/test/integration/mcp/import/clientConfig.test.ts b/clients/web/src/test/integration/mcp/import/clientConfig.test.ts
index 602c6d7a49..d5531826cf 100644
--- a/clients/web/src/test/integration/mcp/import/clientConfig.test.ts
+++ b/clients/web/src/test/integration/mcp/import/clientConfig.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect } from "vitest";
 import {
   parseMcpServersConfig,
   parseVsCodeConfig,
+  parseClientConfig,
 } from "@inspector/core/mcp/import/clientConfig.js";
 
 describe("parseMcpServersConfig", () => {
@@ -92,3 +93,27 @@ describe("parseVsCodeConfig", () => {
     expect(() => parseVsCodeConfig("nope")).toThrow(/Invalid JSON/);
   });
 });
+
+describe("parseClientConfig (unknown shape)", () => {
+  it("parses the { mcpServers } shape", () => {
+    const config = parseClientConfig(
+      JSON.stringify({ mcpServers: { a: { command: "node" } } }),
+    );
+    expect(config.mcpServers.a.type).toBe("stdio");
+  });
+
+  it("falls back to the VS Code { servers } shape", () => {
+    const config = parseClientConfig(
+      JSON.stringify({ servers: { b: { command: "node" } } }),
+    );
+    expect(config.mcpServers.b.type).toBe("stdio");
+  });
+
+  it("surfaces the mcpServers error when neither shape matches", () => {
+    expect(() => parseClientConfig("{}")).toThrow(/mcpServers/);
+  });
+
+  it("surfaces invalid JSON", () => {
+    expect(() => parseClientConfig("nope")).toThrow(/Invalid JSON/);
+  });
+});
diff --git a/clients/web/src/test/integration/mcp/import/serverJson.test.ts b/clients/web/src/test/integration/mcp/import/serverJson.test.ts
index 20e0113278..4252d92ade 100644
--- a/clients/web/src/test/integration/mcp/import/serverJson.test.ts
+++ b/clients/web/src/test/integration/mcp/import/serverJson.test.ts
@@ -2,7 +2,10 @@ import { describe, it, expect } from "vitest";
 import {
   parseServerJson,
   buildServerConfig,
+  buildServerConfigForSelection,
   deriveServerId,
+  resolveServerId,
+  selectServerJsonOption,
 } from "@inspector/core/mcp/import/serverJson.js";
 
 const npmServerJson = JSON.stringify({
@@ -332,3 +335,71 @@ describe("buildServerConfig", () => {
     expect(config).toEqual({ type: "streamable-http", url: "https://x/mcp" });
   });
 });
+
+describe("resolveServerId", () => {
+  it("uses the trimmed override when present, else the derived name", () => {
+    const parsed = parseServerJson(npmServerJson);
+    expect(resolveServerId(parsed)).toBe("weather");
+    expect(resolveServerId(parsed, "  custom  ")).toBe("custom");
+    expect(resolveServerId(parsed, "   ")).toBe("weather");
+  });
+});
+
+describe("selectServerJsonOption", () => {
+  const multi = JSON.stringify({
+    name: "com.example/multi",
+    packages: [
+      { registryType: "npm", identifier: "@me/a" },
+      { registryType: "pypi", identifier: "b" },
+    ],
+  });
+
+  it("defaults to the first option with a valid, free id", () => {
+    const sel = selectServerJsonOption(parseServerJson(npmServerJson));
+    expect(sel.selectedIndex).toBe(0);
+    expect(sel.selectedOption.registryType).toBe("npm");
+    expect(sel.serverId).toBe("weather");
+    expect(sel.idIsValid).toBe(true);
+    expect(sel.idIsDuplicate).toBe(false);
+  });
+
+  it("clamps an out-of-range selected index", () => {
+    const sel = selectServerJsonOption(parseServerJson(multi), {
+      selectedIndex: 5,
+    });
+    expect(sel.selectedIndex).toBe(1);
+    expect(sel.selectedOption.registryType).toBe("pypi");
+  });
+
+  it("flags an invalid id override", () => {
+    const sel = selectServerJsonOption(parseServerJson(npmServerJson), {
+      idOverride: "bad id!",
+    });
+    expect(sel.serverId).toBe("bad id!");
+    expect(sel.idIsValid).toBe(false);
+  });
+
+  it("flags a duplicate id against existingIds", () => {
+    const sel = selectServerJsonOption(parseServerJson(npmServerJson), {
+      existingIds: ["weather"],
+    });
+    expect(sel.idIsDuplicate).toBe(true);
+  });
+});
+
+describe("buildServerConfigForSelection", () => {
+  it("merges only the selected option's declared env vars", () => {
+    const opt = parseServerJson(npmServerJson).options[0];
+    const config = buildServerConfigForSelection(opt, {
+      YOUR_API_KEY: "secret",
+      NOT_DECLARED: "ignored",
+    });
+    expect(config).toMatchObject({
+      type: "stdio",
+      env: { YOUR_API_KEY: "secret", LOG_LEVEL: "info" },
+    });
+    if (config.type === "stdio") {
+      expect(config.env?.NOT_DECLARED).toBeUndefined();
+    }
+  });
+});
diff --git a/clients/web/src/test/integration/storage/store-id.test.ts b/clients/web/src/test/integration/storage/store-id.test.ts
new file mode 100644
index 0000000000..9bac81a5b5
--- /dev/null
+++ b/clients/web/src/test/integration/storage/store-id.test.ts
@@ -0,0 +1,21 @@
+import { describe, it, expect } from "vitest";
+import { validateStoreId } from "@inspector/core/storage/store-id.js";
+import { validateStoreId as reexported } from "@inspector/core/storage/store-io.js";
+
+describe("validateStoreId", () => {
+  it("accepts alphanumerics, hyphens, and underscores", () => {
+    expect(validateStoreId("my-server_1")).toBe(true);
+    expect(validateStoreId("Server")).toBe(true);
+  });
+
+  it("rejects empty or out-of-charset ids", () => {
+    expect(validateStoreId("")).toBe(false);
+    expect(validateStoreId("bad id")).toBe(false);
+    expect(validateStoreId("nope!")).toBe(false);
+    expect(validateStoreId("a/b")).toBe(false);
+  });
+
+  it("is re-exported from store-io for back-compat", () => {
+    expect(reexported).toBe(validateStoreId);
+  });
+});
diff --git a/core/mcp/import/clientConfig.ts b/core/mcp/import/clientConfig.ts
index 73c8ae0ce9..20c9818ff8 100644
--- a/core/mcp/import/clientConfig.ts
+++ b/core/mcp/import/clientConfig.ts
@@ -85,3 +85,21 @@ export function parseVsCodeConfig(raw: string): MCPConfig {
     mcpServers: normalizeServerMap(servers as Record<string, unknown>),
   };
 }
+
+/**
+ * Parse a client config of unknown shape: try the common `{ mcpServers }` form
+ * first, then VS Code's `{ servers }` form. Used by the file-upload path where
+ * the source client isn't known up front. Surfaces the primary parser's error
+ * message (the common case) when neither shape matches.
+ */
+export function parseClientConfig(raw: string): MCPConfig {
+  try {
+    return parseMcpServersConfig(raw);
+  } catch (mcpErr) {
+    try {
+      return parseVsCodeConfig(raw);
+    } catch {
+      throw mcpErr instanceof Error ? mcpErr : new Error(String(mcpErr));
+    }
+  }
+}
diff --git a/core/mcp/import/index.ts b/core/mcp/import/index.ts
index 4473e6bfd5..db7e56a5fb 100644
--- a/core/mcp/import/index.ts
+++ b/core/mcp/import/index.ts
@@ -5,16 +5,24 @@
  * browser and from the Node backend route alike.
  */
 export type { ImportStrategy, ImportSourceResult } from "./types.js";
-export { parseMcpServersConfig, parseVsCodeConfig } from "./clientConfig.js";
+export {
+  parseMcpServersConfig,
+  parseVsCodeConfig,
+  parseClientConfig,
+} from "./clientConfig.js";
 export {
   parseServerJson,
   buildServerConfig,
+  buildServerConfigForSelection,
   deriveServerId,
+  resolveServerId,
+  selectServerJsonOption,
 } from "./serverJson.js";
 export type {
   ParsedServerJson,
   ServerJsonOption,
   ServerJsonEnvVar,
+  ServerJsonSelection,
 } from "./serverJson.js";
 export {
   IMPORT_STRATEGIES,
diff --git a/core/mcp/import/serverJson.ts b/core/mcp/import/serverJson.ts
index 814ae0afe0..d3207399b9 100644
--- a/core/mcp/import/serverJson.ts
+++ b/core/mcp/import/serverJson.ts
@@ -17,6 +17,7 @@
  * copied from either source imports cleanly.
  */
 import type { MCPServerConfig, StdioServerConfig } from "../types.js";
+import { validateStoreId } from "../../storage/store-id.js";
 
 /** A registry package's environment-variable declaration. */
 export interface ServerJsonEnvVar {
@@ -335,3 +336,65 @@ export function buildServerConfig(
   if (Object.keys(merged).length === 0) delete config.env;
   return config;
 }
+
+/** The id a parsed server.json will be saved under: the override (if any) wins. */
+export function resolveServerId(
+  parsed: ParsedServerJson,
+  idOverride?: string,
+): string {
+  const trimmed = (idOverride ?? "").trim();
+  return trimmed || parsed.serverName;
+}
+
+/** The chosen launch option plus the resulting id and its validity. */
+export interface ServerJsonSelection {
+  selectedIndex: number;
+  selectedOption: ServerJsonOption;
+  serverId: string;
+  idIsValid: boolean;
+  idIsDuplicate: boolean;
+}
+
+/**
+ * Resolve which option a parsed server.json will import as, the id it will use,
+ * and whether that id is valid + free. Pure, so both the web wiring and a future
+ * CLI/TUI import can share the selection logic. `selectedIndex` is clamped to the
+ * available options.
+ */
+export function selectServerJsonOption(
+  parsed: ParsedServerJson,
+  opts: {
+    selectedIndex?: number;
+    idOverride?: string;
+    existingIds?: readonly string[];
+  } = {},
+): ServerJsonSelection {
+  const selectedIndex = Math.min(
+    opts.selectedIndex ?? 0,
+    Math.max(parsed.options.length - 1, 0),
+  );
+  const serverId = resolveServerId(parsed, opts.idOverride);
+  return {
+    selectedIndex,
+    selectedOption: parsed.options[selectedIndex],
+    serverId,
+    idIsValid: validateStoreId(serverId),
+    idIsDuplicate: (opts.existingIds ?? []).includes(serverId),
+  };
+}
+
+/**
+ * Merge the user's env overrides for the *selected* option only (env vars the
+ * option doesn't declare are ignored) and build the runnable config.
+ */
+export function buildServerConfigForSelection(
+  option: ServerJsonOption,
+  envOverrides: Record<string, string>,
+): MCPServerConfig {
+  const overrides: Record<string, string> = {};
+  for (const v of option.envVars) {
+    const value = envOverrides[v.name];
+    if (value !== undefined) overrides[v.name] = value;
+  }
+  return buildServerConfig(option, overrides);
+}
diff --git a/core/storage/store-id.ts b/core/storage/store-id.ts
new file mode 100644
index 0000000000..48dfc5e6d4
--- /dev/null
+++ b/core/storage/store-id.ts
@@ -0,0 +1,15 @@
+/**
+ * Pure, Node-free store-id validation. Lives apart from `store-io.ts` (which
+ * imports `node:fs`/`node:path`) so isomorphic code — e.g. the browser import
+ * flow in `core/mcp/import` — can validate ids without pulling Node deps into
+ * the browser bundle. `store-io.ts` re-exports this so existing importers are
+ * unaffected.
+ */
+
+/**
+ * A store id must be non-empty and contain only alphanumerics, hyphens, and
+ * underscores (it becomes a filename and an `mcpServers` map key).
+ */
+export function validateStoreId(storeId: string): boolean {
+  return /^[a-zA-Z0-9_-]+$/.test(storeId) && storeId.length > 0;
+}
diff --git a/core/storage/store-io.ts b/core/storage/store-io.ts
index d42129efec..8b8fa3d9ad 100644
--- a/core/storage/store-io.ts
+++ b/core/storage/store-io.ts
@@ -7,6 +7,11 @@ import * as path from "node:path";
 import * as fs from "node:fs/promises";
 import { readFile, writeFile } from "atomically";
 
+// Re-export the pure id validator so existing `store-io` importers are
+// unaffected; the implementation lives in the Node-free `store-id` module so
+// isomorphic code can reuse it without pulling Node deps into the browser.
+export { validateStoreId } from "./store-id.js";
+
 /**
  * Default storage directory (~/.mcp-inspector/storage or %USERPROFILE%\.mcp-inspector\storage on Windows).
  */
@@ -32,14 +37,6 @@ export function getStoreFilePath(storageDir: string, storeId: string): string {
   return path.join(storageDir, `${storeId}.json`);
 }
 
-/**
- * Validate storeId to prevent path traversal.
- * Store IDs must be alphanumeric, hyphens, underscores only, and not empty.
- */
-export function validateStoreId(storeId: string): boolean {
-  return /^[a-zA-Z0-9_-]+$/.test(storeId) && storeId.length > 0;
-}
-
 /**
  * Read store file atomically. Returns null if the file does not exist (ENOENT).
  * @throws on other read errors or parse errors (caller may use parseStore on the string).

From 6fdc0d964cdc5f9f449089b695b1b4df3687db5f Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 14:56:44 -0400
Subject: [PATCH 08/16] feat(web): rename "Import client config" to "Import
 from client config"

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 clients/web/src/App.tsx                                      | 5 +++--
 .../components/groups/ServerAddMenu/ServerAddMenu.test.tsx   | 4 ++--
 .../src/components/groups/ServerAddMenu/ServerAddMenu.tsx    | 4 +++-
 .../ServerImportConfigModal/ServerImportConfigModal.test.tsx | 4 +++-
 .../ServerImportConfigModal/ServerImportConfigModal.tsx      | 4 ++--
 clients/web/src/hooks/useImportClientConfig.ts               | 2 +-
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 2a0a6561fe..9c1c9c2ebc 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -506,8 +506,9 @@ function App() {
     mode: ServerConfigModalMode;
     targetId?: string;
   } | null>(null);
-  // Import-flow modals (#1348): "Import client config" (other-client config
-  // merge) and "Import from registry config" (registry single-server import).
+  // Import-flow modals (#1348): "Import from client config" (other-client
+  // config merge) and "Import from registry config" (registry single-server
+  // import).
   const [importConfigOpen, setImportConfigOpen] = useState(false);
   const [importJsonOpen, setImportJsonOpen] = useState(false);
   const [settingsModalTargetId, setSettingsModalTargetId] = useState<
diff --git a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
index f2e115aaac..5c2836cd21 100644
--- a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
+++ b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.test.tsx
@@ -36,7 +36,7 @@ describe("ServerAddMenu", () => {
     expect(onAddManually).toHaveBeenCalledTimes(1);
   });
 
-  it("invokes onImportConfig when 'Import client config' is clicked", async () => {
+  it("invokes onImportConfig when 'Import from client config' is clicked", async () => {
     const user = userEvent.setup();
     const onImportConfig = vi.fn();
     renderWithMantine(
@@ -48,7 +48,7 @@ describe("ServerAddMenu", () => {
     );
     await user.click(screen.getByRole("button", { name: /Add Servers/ }));
     const item = screen.getByRole("menuitem", {
-      name: /Import client config/,
+      name: /Import from client config/,
       hidden: true,
     });
     await user.click(item);
diff --git a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
index 7a7da065da..651235a212 100644
--- a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
+++ b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
@@ -20,7 +20,9 @@ export function ServerAddMenu({
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item onClick={onAddManually}>+ Add manually</Menu.Item>
-        <Menu.Item onClick={onImportConfig}>Import client config</Menu.Item>
+        <Menu.Item onClick={onImportConfig}>
+          Import from client config
+        </Menu.Item>
         <Menu.Item onClick={onImportServerJson}>
           Import from registry config
         </Menu.Item>
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
index 0c36f26aad..286a2f972c 100644
--- a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
@@ -75,7 +75,9 @@ describe("ServerImportConfigModal", () => {
         onUpdateServer={vi.fn()}
       />,
     );
-    expect(screen.queryByText("Import client config")).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("Import from client config"),
+    ).not.toBeInTheDocument();
   });
 
   it("renders a client dropdown, an Import button, and a file picker", () => {
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
index 59530b969f..89edcb76cc 100644
--- a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
@@ -88,7 +88,7 @@ const OUTCOME_META: Record<
 };
 
 /**
- * Display shell for the "Import client config" flow (#1348): a source picker /
+ * Display shell for the "Import from client config" flow (#1348): a source picker /
  * file upload, a per-server review with conflict resolution, and an outcome
  * summary. All orchestration lives in `useImportClientConfig`.
  */
@@ -115,7 +115,7 @@ export function ServerImportConfigModal({
       onClose={onClose}
       size="lg"
       centered
-      title={<ModalTitle>Import client config</ModalTitle>}
+      title={<ModalTitle>Import from client config</ModalTitle>}
     >
       <SectionStack>
         {vm.error ? (
diff --git a/clients/web/src/hooks/useImportClientConfig.ts b/clients/web/src/hooks/useImportClientConfig.ts
index 909004cd2c..92246634b7 100644
--- a/clients/web/src/hooks/useImportClientConfig.ts
+++ b/clients/web/src/hooks/useImportClientConfig.ts
@@ -60,7 +60,7 @@ export interface ImportClientConfigViewModel {
 }
 
 /**
- * Wiring for the "Import client config" flow (#1348): owns the wizard phase,
+ * Wiring for the "Import from client config" flow (#1348): owns the wizard phase,
  * the parsed plan, per-server resolutions, and the apply loop. Keeps
  * `ServerImportConfigModal` a thin display component; the reusable parsing +
  * merge logic lives in `core/mcp/import`.

From ba7cb106be24eff1ea9b3a0771b05663b1467d14 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 14:56:52 -0400
Subject: [PATCH 09/16] feat(web): remove the Cancel button from the registry
 import modal

The modal header X (and Escape) still dismiss it; drop the redundant Cancel
button (and the panel onCancel prop).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ImportServerJsonPanel.stories.tsx               |  1 -
 .../ImportServerJsonPanel.test.tsx                  | 13 +++++--------
 .../ImportServerJsonPanel/ImportServerJsonPanel.tsx |  5 -----
 .../ServerImportJsonModal.test.tsx                  |  7 +++++--
 .../ServerImportJsonModal/ServerImportJsonModal.tsx |  1 -
 5 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
index df7ed0a185..78787eac4b 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
@@ -17,7 +17,6 @@ const meta: Meta<typeof ImportServerJsonPanel> = {
     onEnvVarChange: fn(),
     onServerNameChange: fn(),
     onAddServer: fn(),
-    onCancel: fn(),
     envVars: [],
     validation: [],
   },
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
index 04dcedd8b6..8dcab94bcb 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
@@ -20,11 +20,10 @@ const baseHandlers = {
   onEnvVarChange: vi.fn(),
   onServerNameChange: vi.fn(),
   onAddServer: vi.fn(),
-  onCancel: vi.fn(),
 };
 
 describe("ImportServerJsonPanel", () => {
-  it("renders the action buttons", () => {
+  it("renders the Add Server action", () => {
     renderWithMantine(
       <ImportServerJsonPanel
         {...baseHandlers}
@@ -33,10 +32,12 @@ describe("ImportServerJsonPanel", () => {
         envVars={[]}
       />,
     );
-    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "Add Server" }),
     ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Cancel" }),
+    ).not.toBeInTheDocument();
   });
 
   it("invokes onJsonChange when typing in the textarea", async () => {
@@ -86,23 +87,19 @@ describe("ImportServerJsonPanel", () => {
     ).toBeInTheDocument();
   });
 
-  it("invokes onCancel and onAddServer when their buttons are clicked", async () => {
+  it("invokes onAddServer when the Add Server button is clicked", async () => {
     const user = userEvent.setup();
-    const onCancel = vi.fn();
     const onAddServer = vi.fn();
     renderWithMantine(
       <ImportServerJsonPanel
         {...baseHandlers}
-        onCancel={onCancel}
         onAddServer={onAddServer}
         draft={emptyDraft}
         validation={[]}
         envVars={[]}
       />,
     );
-    await user.click(screen.getByRole("button", { name: "Cancel" }));
     await user.click(screen.getByRole("button", { name: "Add Server" }));
-    expect(onCancel).toHaveBeenCalledTimes(1);
     expect(onAddServer).toHaveBeenCalledTimes(1);
   });
 
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index 19b65d9d49..0558eb9ddd 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -57,7 +57,6 @@ export interface ImportServerJsonPanelProps {
    * intentionally.
    */
   fileContentsHighlight?: boolean;
-  onCancel: () => void;
   /**
    * Load server.json content from a file. When provided, a "Choose file…"
    * button is rendered next to the paste hint; the handler reads the file and
@@ -99,7 +98,6 @@ export function ImportServerJsonPanel({
   fileContentsOpen,
   onFileContentsChange,
   fileContentsHighlight,
-  onCancel,
   onPickFile,
 }: ImportServerJsonPanelProps) {
   return (
@@ -234,9 +232,6 @@ export function ImportServerJsonPanel({
       />
 
       <Group justify="flex-end">
-        <Button variant="light" onClick={onCancel}>
-          Cancel
-        </Button>
         <Button onClick={onAddServer} disabled={addDisabled}>
           Add Server
         </Button>
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
index 7bdc1c33fb..0d0047597a 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
@@ -322,7 +322,7 @@ describe("ServerImportJsonModal", () => {
     expect(onAddServer).not.toHaveBeenCalled();
   });
 
-  it("closes via Cancel", async () => {
+  it("closes via the Escape key (no Cancel button)", async () => {
     const user = userEvent.setup();
     const onClose = vi.fn();
     renderWithMantine(
@@ -333,7 +333,10 @@ describe("ServerImportJsonModal", () => {
         onAddServer={vi.fn()}
       />,
     );
-    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(
+      screen.queryByRole("button", { name: "Cancel" }),
+    ).not.toBeInTheDocument();
+    await user.keyboard("{Escape}");
     expect(onClose).toHaveBeenCalled();
   });
 });
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
index 4e4588cdfb..dcf300af9e 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
@@ -54,7 +54,6 @@ export function ServerImportJsonModal({
           });
         }}
         onPickFile={(file) => void vm.pickFile(file)}
-        onCancel={onClose}
       />
     </Modal>
   );

From 3484819c84674d727e00ef490c92de6166bcdbc6 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 15:13:22 -0400
Subject: [PATCH 10/16] feat(web): hide validation results + name override
 until content is present

In the registry import modal, the Validation Results section and the Server
Name override field stay hidden until something has been pasted/loaded into the
textarea.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ImportServerJsonPanel.test.tsx            |  49 +++++-
 .../ImportServerJsonPanel.tsx                 | 141 +++++++++---------
 .../ServerImportJsonModal.test.tsx            |   7 +-
 3 files changed, 120 insertions(+), 77 deletions(-)

diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
index 8dcab94bcb..fc4a75ba7f 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
@@ -14,6 +14,14 @@ const emptyDraft: InspectorServerJsonDraft = {
   envOverrides: {},
 };
 
+// Validation results, package selection, env vars, and the name override are
+// only shown once content has been pasted/loaded, so tests for those sections
+// use a draft with non-empty rawText.
+const draftWithContent: InspectorServerJsonDraft = {
+  rawText: '{"name":"x"}',
+  envOverrides: {},
+};
+
 const baseHandlers = {
   onJsonChange: vi.fn(),
   onSelectPackage: vi.fn(),
@@ -113,7 +121,7 @@ describe("ImportServerJsonPanel", () => {
     renderWithMantine(
       <ImportServerJsonPanel
         {...baseHandlers}
-        draft={emptyDraft}
+        draft={draftWithContent}
         validation={validation}
         envVars={[]}
       />,
@@ -131,7 +139,7 @@ describe("ImportServerJsonPanel", () => {
     renderWithMantine(
       <ImportServerJsonPanel
         {...baseHandlers}
-        draft={emptyDraft}
+        draft={draftWithContent}
         validation={[]}
         envVars={[]}
         packages={packages}
@@ -151,7 +159,7 @@ describe("ImportServerJsonPanel", () => {
       <ImportServerJsonPanel
         {...baseHandlers}
         onSelectPackage={onSelectPackage}
-        draft={emptyDraft}
+        draft={draftWithContent}
         validation={[]}
         envVars={[]}
         packages={packages}
@@ -181,7 +189,7 @@ describe("ImportServerJsonPanel", () => {
       <ImportServerJsonPanel
         {...baseHandlers}
         onEnvVarChange={onEnvVarChange}
-        draft={emptyDraft}
+        draft={draftWithContent}
         validation={[]}
         envVars={envVars}
       />,
@@ -200,7 +208,7 @@ describe("ImportServerJsonPanel", () => {
       <ImportServerJsonPanel
         {...baseHandlers}
         onServerNameChange={onServerNameChange}
-        draft={emptyDraft}
+        draft={draftWithContent}
         validation={[]}
         envVars={[]}
       />,
@@ -287,11 +295,40 @@ describe("ImportServerJsonPanel", () => {
     renderWithMantine(
       <ImportServerJsonPanel
         {...baseHandlers}
-        draft={{ ...emptyDraft, nameOverride: "Custom Name" }}
+        draft={{ ...draftWithContent, nameOverride: "Custom Name" }}
         validation={[]}
         envVars={[]}
       />,
     );
     expect(screen.getByDisplayValue("Custom Name")).toBeInTheDocument();
   });
+
+  it("hides validation results and the name override until content is present", () => {
+    const validation: ValidationResult[] = [
+      { type: "info", message: "Paste server.json content to validate." },
+    ];
+    const { rerender } = renderWithMantine(
+      <ImportServerJsonPanel
+        {...baseHandlers}
+        draft={emptyDraft}
+        validation={validation}
+        envVars={[]}
+      />,
+    );
+    // Empty draft: gated sections hidden.
+    expect(screen.queryByText("Validation Results:")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/Server Name/)).not.toBeInTheDocument();
+
+    // Once content is present, they appear.
+    rerender(
+      <ImportServerJsonPanel
+        {...baseHandlers}
+        draft={draftWithContent}
+        validation={validation}
+        envVars={[]}
+      />,
+    );
+    expect(screen.getByText("Validation Results:")).toBeInTheDocument();
+    expect(screen.getByLabelText(/Server Name/)).toBeInTheDocument();
+  });
 });
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index 0558eb9ddd..213d7c3e33 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -100,6 +100,9 @@ export function ImportServerJsonPanel({
   fileContentsHighlight,
   onPickFile,
 }: ImportServerJsonPanelProps) {
+  // Validation results + the name-override field only make sense once there's
+  // something to validate, so they stay hidden until content is pasted/loaded.
+  const hasContent = draft.rawText.trim().length > 0;
   return (
     <Stack gap="md">
       <Group justify="space-between" align="center" wrap="nowrap">
@@ -155,82 +158,86 @@ export function ImportServerJsonPanel({
         </Accordion.Item>
       </Accordion>
 
-      <Divider />
-
-      <Title order={5}>Validation Results:</Title>
-
-      {validation.map((result, index) => {
-        const { icon, color } = validationIcons[result.type];
-        return (
-          <Group key={index} gap="xs">
-            <Text c={color}>{icon}</Text>
-            <Text size="sm">{result.message}</Text>
-          </Group>
-        );
-      })}
-
-      {packages && packages.length > 1 && (
+      {hasContent && (
         <>
           <Divider />
-          <Title order={5}>Package Selection:</Title>
-          <Radio.Group
-            value={String(draft.selectedPackageIndex ?? 0)}
-            onChange={(value) => onSelectPackage(Number(value))}
-          >
-            <Stack gap="xs">
-              {packages.map((pkg, index) => (
-                <Radio
-                  key={index}
-                  value={String(index)}
-                  label={formatPackageLabel(pkg)}
+
+          <Title order={5}>Validation Results:</Title>
+
+          {validation.map((result, index) => {
+            const { icon, color } = validationIcons[result.type];
+            return (
+              <Group key={index} gap="xs">
+                <Text c={color}>{icon}</Text>
+                <Text size="sm">{result.message}</Text>
+              </Group>
+            );
+          })}
+
+          {packages && packages.length > 1 && (
+            <>
+              <Divider />
+              <Title order={5}>Package Selection:</Title>
+              <Radio.Group
+                value={String(draft.selectedPackageIndex ?? 0)}
+                onChange={(value) => onSelectPackage(Number(value))}
+              >
+                <Stack gap="xs">
+                  {packages.map((pkg, index) => (
+                    <Radio
+                      key={index}
+                      value={String(index)}
+                      label={formatPackageLabel(pkg)}
+                    />
+                  ))}
+                </Stack>
+              </Radio.Group>
+            </>
+          )}
+
+          {envVars.length > 0 && (
+            <>
+              <Divider />
+              <Title order={5}>Environment Variables:</Title>
+              {envVars.map((envVar) => (
+                <TextInput
+                  key={envVar.name}
+                  label={envVar.name}
+                  description={envVar.description}
+                  withAsterisk={envVar.required}
+                  value={envVar.value}
+                  onChange={(e) =>
+                    onEnvVarChange(envVar.name, e.currentTarget.value)
+                  }
+                  rightSectionPointerEvents="auto"
+                  rightSection={
+                    envVar.value ? (
+                      <ClearButton
+                        onClick={() => onEnvVarChange(envVar.name, "")}
+                      />
+                    ) : null
+                  }
                 />
               ))}
-            </Stack>
-          </Radio.Group>
-        </>
-      )}
+            </>
+          )}
 
-      {envVars.length > 0 && (
-        <>
           <Divider />
-          <Title order={5}>Environment Variables:</Title>
-          {envVars.map((envVar) => (
-            <TextInput
-              key={envVar.name}
-              label={envVar.name}
-              description={envVar.description}
-              withAsterisk={envVar.required}
-              value={envVar.value}
-              onChange={(e) =>
-                onEnvVarChange(envVar.name, e.currentTarget.value)
-              }
-              rightSectionPointerEvents="auto"
-              rightSection={
-                envVar.value ? (
-                  <ClearButton
-                    onClick={() => onEnvVarChange(envVar.name, "")}
-                  />
-                ) : null
-              }
-            />
-          ))}
+
+          <TextInput
+            label="Server Name (optional override)"
+            value={draft.nameOverride ?? ""}
+            onChange={(e) => onServerNameChange(e.currentTarget.value)}
+            rightSectionPointerEvents="auto"
+            rightSection={
+              draft.nameOverride ? (
+                <ClearButton onClick={() => onServerNameChange("")} />
+              ) : null
+            }
+          />
         </>
       )}
 
-      <Divider />
-
-      <TextInput
-        label="Server Name (optional override)"
-        value={draft.nameOverride ?? ""}
-        onChange={(e) => onServerNameChange(e.currentTarget.value)}
-        rightSectionPointerEvents="auto"
-        rightSection={
-          draft.nameOverride ? (
-            <ClearButton onClick={() => onServerNameChange("")} />
-          ) : null
-        }
-      />
-
       <Group justify="flex-end">
         <Button onClick={onAddServer} disabled={addDisabled}>
           Add Server
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
index 0d0047597a..4c9e1791e6 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
@@ -52,7 +52,7 @@ describe("ServerImportJsonModal", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("shows an info prompt before any JSON is pasted", () => {
+  it("hides validation results and the name override before any JSON is pasted", () => {
     renderWithMantine(
       <ServerImportJsonModal
         opened
@@ -61,9 +61,8 @@ describe("ServerImportJsonModal", () => {
         onAddServer={vi.fn()}
       />,
     );
-    expect(
-      screen.getByText(/Paste server.json content to validate/),
-    ).toBeInTheDocument();
+    expect(screen.queryByText("Validation Results:")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/Server Name/)).not.toBeInTheDocument();
   });
 
   it("validates a pasted npm server.json and surfaces env vars", async () => {

From 893dd623312960db7a3ecbcb94b039191692d15a Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 15:33:54 -0400
Subject: [PATCH 11/16] feat(web): make Validation Results a collapsible
 disclosure

Wrap the registry import modal's validation results in a Mantine accordion
disclosure (default open), matching the File Contents section.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ImportServerJsonPanel.test.tsx            |  4 +--
 .../ImportServerJsonPanel.tsx                 | 31 +++++++++++--------
 .../ServerImportJsonModal.test.tsx            |  2 +-
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
index fc4a75ba7f..ba74f8c35b 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
@@ -316,7 +316,7 @@ describe("ImportServerJsonPanel", () => {
       />,
     );
     // Empty draft: gated sections hidden.
-    expect(screen.queryByText("Validation Results:")).not.toBeInTheDocument();
+    expect(screen.queryByText("Validation Results")).not.toBeInTheDocument();
     expect(screen.queryByLabelText(/Server Name/)).not.toBeInTheDocument();
 
     // Once content is present, they appear.
@@ -328,7 +328,7 @@ describe("ImportServerJsonPanel", () => {
         envVars={[]}
       />,
     );
-    expect(screen.getByText("Validation Results:")).toBeInTheDocument();
+    expect(screen.getByText("Validation Results")).toBeInTheDocument();
     expect(screen.getByLabelText(/Server Name/)).toBeInTheDocument();
   });
 });
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index 213d7c3e33..74920b804c 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -160,19 +160,24 @@ export function ImportServerJsonPanel({
 
       {hasContent && (
         <>
-          <Divider />
-
-          <Title order={5}>Validation Results:</Title>
-
-          {validation.map((result, index) => {
-            const { icon, color } = validationIcons[result.type];
-            return (
-              <Group key={index} gap="xs">
-                <Text c={color}>{icon}</Text>
-                <Text size="sm">{result.message}</Text>
-              </Group>
-            );
-          })}
+          <Accordion variant="separated" defaultValue="validation">
+            <Accordion.Item value="validation">
+              <Accordion.Control>Validation Results</Accordion.Control>
+              <Accordion.Panel>
+                <Stack gap="xs">
+                  {validation.map((result, index) => {
+                    const { icon, color } = validationIcons[result.type];
+                    return (
+                      <Group key={index} gap="xs">
+                        <Text c={color}>{icon}</Text>
+                        <Text size="sm">{result.message}</Text>
+                      </Group>
+                    );
+                  })}
+                </Stack>
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion>
 
           {packages && packages.length > 1 && (
             <>
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
index 4c9e1791e6..5cb407ee84 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
@@ -61,7 +61,7 @@ describe("ServerImportJsonModal", () => {
         onAddServer={vi.fn()}
       />,
     );
-    expect(screen.queryByText("Validation Results:")).not.toBeInTheDocument();
+    expect(screen.queryByText("Validation Results")).not.toBeInTheDocument();
     expect(screen.queryByLabelText(/Server Name/)).not.toBeInTheDocument();
   });
 

From 5513db537f1a4d48595e3c67877f27433f2bdc08 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 15:43:01 -0400
Subject: [PATCH 12/16] feat(web): Server Name disclosure with read-only
 derived name + override

Make Server Name a collapsible disclosure containing a read-only "From
configuration" field (the id derived from the server.json name) and the
editable Override field.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ImportServerJsonPanel.test.tsx            | 21 +++++++--
 .../ImportServerJsonPanel.tsx                 | 44 +++++++++++++------
 .../ServerImportJsonModal.test.tsx            |  6 +--
 .../ServerImportJsonModal.tsx                 |  1 +
 clients/web/src/hooks/useServerJsonImport.ts  |  3 ++
 5 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
index ba74f8c35b..f060547ca3 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.test.tsx
@@ -213,7 +213,7 @@ describe("ImportServerJsonPanel", () => {
         envVars={[]}
       />,
     );
-    const nameInput = screen.getByLabelText(/Server Name/);
+    const nameInput = screen.getByLabelText("Override");
     await user.type(nameInput, "X");
     expect(onServerNameChange).toHaveBeenCalledWith("X");
   });
@@ -303,6 +303,21 @@ describe("ImportServerJsonPanel", () => {
     expect(screen.getByDisplayValue("Custom Name")).toBeInTheDocument();
   });
 
+  it("shows the derived name in a read-only From configuration field", () => {
+    renderWithMantine(
+      <ImportServerJsonPanel
+        {...baseHandlers}
+        draft={draftWithContent}
+        defaultServerName="weather"
+        validation={[]}
+        envVars={[]}
+      />,
+    );
+    const fromConfig = screen.getByLabelText("From configuration");
+    expect(fromConfig).toHaveValue("weather");
+    expect(fromConfig).toHaveAttribute("readonly");
+  });
+
   it("hides validation results and the name override until content is present", () => {
     const validation: ValidationResult[] = [
       { type: "info", message: "Paste server.json content to validate." },
@@ -317,7 +332,7 @@ describe("ImportServerJsonPanel", () => {
     );
     // Empty draft: gated sections hidden.
     expect(screen.queryByText("Validation Results")).not.toBeInTheDocument();
-    expect(screen.queryByLabelText(/Server Name/)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Override")).not.toBeInTheDocument();
 
     // Once content is present, they appear.
     rerender(
@@ -329,6 +344,6 @@ describe("ImportServerJsonPanel", () => {
       />,
     );
     expect(screen.getByText("Validation Results")).toBeInTheDocument();
-    expect(screen.getByLabelText(/Server Name/)).toBeInTheDocument();
+    expect(screen.getByLabelText("Override")).toBeInTheDocument();
   });
 });
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index 74920b804c..bd3f9a2071 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -41,6 +41,9 @@ export interface ImportServerJsonPanelProps {
   onSelectPackage: (index: number) => void;
   onEnvVarChange: (name: string, value: string) => void;
   onServerNameChange: (name: string) => void;
+  /** The id derived from the server.json `name`, shown read-only in the
+   *  Server Name disclosure (the override field replaces it when set). */
+  defaultServerName?: string;
   onAddServer: () => void;
   /** Disables the Add Server button while the pasted content isn't valid. */
   addDisabled?: boolean;
@@ -93,6 +96,7 @@ export function ImportServerJsonPanel({
   onSelectPackage,
   onEnvVarChange,
   onServerNameChange,
+  defaultServerName,
   onAddServer,
   addDisabled,
   fileContentsOpen,
@@ -227,19 +231,33 @@ export function ImportServerJsonPanel({
             </>
           )}
 
-          <Divider />
-
-          <TextInput
-            label="Server Name (optional override)"
-            value={draft.nameOverride ?? ""}
-            onChange={(e) => onServerNameChange(e.currentTarget.value)}
-            rightSectionPointerEvents="auto"
-            rightSection={
-              draft.nameOverride ? (
-                <ClearButton onClick={() => onServerNameChange("")} />
-              ) : null
-            }
-          />
+          <Accordion variant="separated" defaultValue="server-name">
+            <Accordion.Item value="server-name">
+              <Accordion.Control>Server Name</Accordion.Control>
+              <Accordion.Panel>
+                <Stack gap="sm">
+                  <TextInput
+                    label="From configuration"
+                    description="The id derived from the server.json name."
+                    value={defaultServerName ?? ""}
+                    readOnly
+                  />
+                  <TextInput
+                    label="Override"
+                    description="Optional. Used instead of the name above."
+                    value={draft.nameOverride ?? ""}
+                    onChange={(e) => onServerNameChange(e.currentTarget.value)}
+                    rightSectionPointerEvents="auto"
+                    rightSection={
+                      draft.nameOverride ? (
+                        <ClearButton onClick={() => onServerNameChange("")} />
+                      ) : null
+                    }
+                  />
+                </Stack>
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion>
         </>
       )}
 
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
index 5cb407ee84..baedb66860 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.test.tsx
@@ -62,7 +62,7 @@ describe("ServerImportJsonModal", () => {
       />,
     );
     expect(screen.queryByText("Validation Results")).not.toBeInTheDocument();
-    expect(screen.queryByLabelText(/Server Name/)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Override")).not.toBeInTheDocument();
   });
 
   it("validates a pasted npm server.json and surfaces env vars", async () => {
@@ -153,7 +153,7 @@ describe("ServerImportJsonModal", () => {
       />,
     );
     pasteJson(npmJson);
-    await user.type(screen.getByLabelText(/Server Name/), "my-weather");
+    await user.type(screen.getByLabelText("Override"), "my-weather");
     await waitFor(() =>
       expect(screen.getByRole("button", { name: "Add Server" })).toBeEnabled(),
     );
@@ -312,7 +312,7 @@ describe("ServerImportJsonModal", () => {
       />,
     );
     pasteJson(npmJson);
-    await user.type(screen.getByLabelText(/Server Name/), "bad id!");
+    await user.type(screen.getByLabelText("Override"), "bad id!");
     expect(
       await screen.findByText(/Server id must use only letters/),
     ).toBeInTheDocument();
diff --git a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
index dcf300af9e..a9115c69a8 100644
--- a/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
+++ b/clients/web/src/components/groups/ServerImportJsonModal/ServerImportJsonModal.tsx
@@ -48,6 +48,7 @@ export function ServerImportJsonModal({
         onSelectPackage={vm.selectPackage}
         onEnvVarChange={vm.setEnvVar}
         onServerNameChange={vm.setServerName}
+        defaultServerName={vm.defaultServerName}
         onAddServer={() => {
           void vm.submit().then((added) => {
             if (added) onClose();
diff --git a/clients/web/src/hooks/useServerJsonImport.ts b/clients/web/src/hooks/useServerJsonImport.ts
index ef332fcb13..6736ec6cf2 100644
--- a/clients/web/src/hooks/useServerJsonImport.ts
+++ b/clients/web/src/hooks/useServerJsonImport.ts
@@ -69,6 +69,8 @@ export interface ServerJsonImportViewModel {
   packages?: PackageInfo[];
   envVars: EnvVarInfo[];
   canAdd: boolean;
+  /** Derived id from the server.json `name` (before any override). */
+  defaultServerName: string;
   fileContentsOpen: boolean;
   fileContentsHighlight: boolean;
   setRawText: (content: string) => void;
@@ -292,6 +294,7 @@ export function useServerJsonImport({
     packages,
     envVars,
     canAdd,
+    defaultServerName: parsed?.serverName ?? "",
     fileContentsOpen,
     fileContentsHighlight,
     setRawText,

From e008c061cc32a0f92eb6d03835e2d2a269915024 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 16:08:15 -0400
Subject: [PATCH 13/16] feat(web): scroll to and highlight a freshly-added
 server

After a manual add/clone or an import (client config / registry), the new
server's card scrolls into view and draws an animated border (Mantine Border
Animate); clicking anywhere on the card dismisses it.

- App tracks highlightedServerId; addServerHighlighted sets it (edits and
  conflict-overwrites don't). Threaded through InspectorView -> ServerListScreen
  -> ServerCard.
- ServerCard scrolls into view on highlight and wraps in <BorderAnimate>;
  onClick clears the highlight.
- Pin @gfazioli/mantine-border-animate@2.0.3 (Mantine 8 compatible; 2.0.4+
  requires Mantine 9).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 clients/web/package-lock.json                 | 42 ++++++++++++++++
 clients/web/package.json                      |  1 +
 clients/web/src/App.tsx                       | 26 ++++++++--
 .../groups/ServerCard/ServerCard.test.tsx     | 50 +++++++++++++++++++
 .../groups/ServerCard/ServerCard.tsx          | 35 ++++++++++++-
 .../ServerListScreen/ServerListScreen.tsx     |  8 +++
 .../views/InspectorView/InspectorView.tsx     |  8 +++
 clients/web/src/main.tsx                      |  1 +
 8 files changed, 165 insertions(+), 6 deletions(-)

diff --git a/clients/web/package-lock.json b/clients/web/package-lock.json
index a14dc7d556..e6de271ae2 100644
--- a/clients/web/package-lock.json
+++ b/clients/web/package-lock.json
@@ -12,6 +12,7 @@
         "@dnd-kit/sortable": "^8.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@emotion/react": "^11.14.0",
+        "@gfazioli/mantine-border-animate": "^2.0.3",
         "@hono/node-server": "^1.19.14",
         "@mantine/core": "^8.3.17",
         "@mantine/form": "^8.3.17",
@@ -1241,6 +1242,19 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
+    "node_modules/@gfazioli/mantine-border-animate": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@gfazioli/mantine-border-animate/-/mantine-border-animate-2.0.3.tgz",
+      "integrity": "sha512-6JmO4Cox2KAjIXWWNIewwuudTtTGS5QrcWqjgch8Kn1Zu2bwhZAk4n1y2z7YNJsnfZGVM3XcxLbdGivJcCiNMQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@mantine/core": ">=7.0.0",
+        "@mantine/hooks": ">=7.0.0",
+        "@tabler/icons-react": "^3.34.0",
+        "react": "^18.x || ^19.x",
+        "react-dom": "^18.x || ^19.x"
+      }
+    },
     "node_modules/@hono/node-server": {
       "version": "1.19.14",
       "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.14.tgz",
@@ -2675,6 +2689,34 @@
         }
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.44.0.tgz",
+      "integrity": "sha512-Wn0AOZG9sg0L+bjfMqq4eNhC6pQjIrk94LvvWYNYkY8KH8wC3YILRzQlrnVJc4FUeMxH/AK97QsYCX35H3LndA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.44.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.44.0.tgz",
+      "integrity": "sha512-8+rvzBbVm/1Z3sG3x7GUNAaxIKxwgz8xaMhRs23nrCnMTKRFAhEC+82zAIFeAA0seXdrAGX5HFCkaLpGK2rVHg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@tabler/icons": "3.44.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
diff --git a/clients/web/package.json b/clients/web/package.json
index 9c3e075d18..791ad1c60f 100644
--- a/clients/web/package.json
+++ b/clients/web/package.json
@@ -36,6 +36,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.14.0",
+    "@gfazioli/mantine-border-animate": "^2.0.3",
     "@hono/node-server": "^1.19.14",
     "@mantine/core": "^8.3.17",
     "@mantine/form": "^8.3.17",
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 9c1c9c2ebc..42f4cc7d6a 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -511,6 +511,11 @@ function App() {
   // import).
   const [importConfigOpen, setImportConfigOpen] = useState(false);
   const [importJsonOpen, setImportJsonOpen] = useState(false);
+  // Id of a freshly-added server (manual or import) — the list scrolls to it and
+  // draws an animated border until the card is clicked. (#1348)
+  const [highlightedServerId, setHighlightedServerId] = useState<string | null>(
+    null,
+  );
   const [settingsModalTargetId, setSettingsModalTargetId] = useState<
     string | undefined
   >(undefined);
@@ -2156,6 +2161,17 @@ function App() {
 
   // Submit handler for the Add / Edit / Clone modal. Add and Clone both go
   // through addServer; Edit uses updateServer (which supports id rename).
+  // Add a server, then mark it as the freshly-added one so the list scrolls to
+  // it and highlights it. Used by manual add/clone and both import flows; edits
+  // and conflict-overwrites (updateServer) intentionally don't highlight.
+  const addServerHighlighted = useCallback(
+    async (id: string, config: MCPServerConfig) => {
+      await addServer(id, config);
+      setHighlightedServerId(id);
+    },
+    [addServer],
+  );
+
   // On rename of the active server, keep activeServerId pointed at the new id.
   const onConfigSubmit = useCallback(
     async (id: string, config: MCPServerConfig) => {
@@ -2168,9 +2184,9 @@ function App() {
         return;
       }
       // add or clone
-      await addServer(id, config);
+      await addServerHighlighted(id, config);
     },
-    [configModal, addServer, updateServer, activeServerId],
+    [configModal, addServerHighlighted, updateServer, activeServerId],
   );
 
   // Derive the existingIds list the modal uses for uniqueness validation.
@@ -2425,6 +2441,8 @@ function App() {
             });
           });
         }}
+        highlightedServerId={highlightedServerId ?? undefined}
+        onClearHighlight={() => setHighlightedServerId(null)}
         serverSupportsTaskToolCalls={
           !!capabilities?.tasks?.requests?.tools?.call
         }
@@ -2495,14 +2513,14 @@ function App() {
         existingIds={existingIds}
         onClose={() => setImportConfigOpen(false)}
         onFetchSource={importSource}
-        onAddServer={addServer}
+        onAddServer={addServerHighlighted}
         onUpdateServer={updateServer}
       />
       <ServerImportJsonModal
         opened={importJsonOpen}
         existingIds={existingIds}
         onClose={() => setImportJsonOpen(false)}
-        onAddServer={addServer}
+        onAddServer={addServerHighlighted}
       />
       <ServerSettingsModal
         // Remount per open (and per target server) so the accordion resets to
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx
index 3976c2f271..cee8921cbd 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx
@@ -277,4 +277,54 @@ describe("ServerCard", () => {
       ).toBeInTheDocument();
     });
   });
+
+  describe("freshly-added highlight", () => {
+    it("scrolls into view when highlighted", () => {
+      const scrollIntoView = vi.fn();
+      const orig = Element.prototype.scrollIntoView;
+      Element.prototype.scrollIntoView = scrollIntoView;
+      try {
+        renderWithMantine(<ServerCard {...baseProps} highlighted />);
+        expect(scrollIntoView).toHaveBeenCalled();
+      } finally {
+        Element.prototype.scrollIntoView = orig;
+      }
+    });
+
+    it("does not scroll when not highlighted", () => {
+      const scrollIntoView = vi.fn();
+      const orig = Element.prototype.scrollIntoView;
+      Element.prototype.scrollIntoView = scrollIntoView;
+      try {
+        renderWithMantine(<ServerCard {...baseProps} />);
+        expect(scrollIntoView).not.toHaveBeenCalled();
+      } finally {
+        Element.prototype.scrollIntoView = orig;
+      }
+    });
+
+    it("clears the highlight when the card is clicked", async () => {
+      const user = userEvent.setup();
+      const onClearHighlight = vi.fn();
+      renderWithMantine(
+        <ServerCard
+          {...baseProps}
+          highlighted
+          onClearHighlight={onClearHighlight}
+        />,
+      );
+      await user.click(screen.getByText("My MCP Server"));
+      expect(onClearHighlight).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not clear on click when not highlighted", async () => {
+      const user = userEvent.setup();
+      const onClearHighlight = vi.fn();
+      renderWithMantine(
+        <ServerCard {...baseProps} onClearHighlight={onClearHighlight} />,
+      );
+      await user.click(screen.getByText("My MCP Server"));
+      expect(onClearHighlight).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index da1bdc1c94..6fe5196410 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@@ -1,5 +1,6 @@
-import type { ReactNode } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import { Badge, Button, Card, Group, Stack, Text } from "@mantine/core";
+import { BorderAnimate } from "@gfazioli/mantine-border-animate";
 import type {
   MCPServerConfig,
   ServerEntry,
@@ -33,6 +34,14 @@ export interface ServerCardProps extends ServerEntry {
    * drag-and-drop.
    */
   dragHandle?: ReactNode;
+  /**
+   * When true, the card is freshly added: it scrolls into view and draws an
+   * animated border (Mantine Border Animate) to draw the eye. Cleared by
+   * `onClearHighlight` on any click on the card.
+   */
+  highlighted?: boolean;
+  /** Called when a highlighted card is clicked, to dismiss the animated border. */
+  onClearHighlight?: () => void;
 }
 
 const HeaderLeft = Group.withProps({
@@ -120,19 +129,32 @@ export function ServerCard({
   compact = false,
   writable = true,
   dragHandle,
+  highlighted = false,
+  onClearHighlight,
 }: ServerCardProps) {
   const isDimmed = activeServer !== undefined && activeServer !== id;
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // When freshly added, bring the card into view (it may be far down a long
+  // list). Fires on the false→true transition only.
+  useEffect(() => {
+    if (highlighted) {
+      rootRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [highlighted]);
   const transport = getTransport(config);
   const commandOrUrl = getCommandOrUrl(config);
   const version = info?.version;
   const protocolVersion =
     connection.status === "connected" ? connection.protocolVersion : undefined;
 
-  return (
+  const card = (
     <Card
+      ref={rootRef}
       withBorder
       padding="lg"
       variant={isDimmed ? "disabled" : undefined}
+      onClick={highlighted ? onClearHighlight : undefined}
       {...(isDimmed ? { "aria-disabled": true, inert: true } : {})}
     >
       <Stack gap="sm">
@@ -202,4 +224,13 @@ export function ServerCard({
       </Stack>
     </Card>
   );
+
+  if (highlighted) {
+    return (
+      <BorderAnimate show animate radius="md">
+        {card}
+      </BorderAnimate>
+    );
+  }
+  return card;
 }
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
index 84b8b5293e..9eedb4fa2a 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
@@ -55,6 +55,10 @@ export interface ServerListScreenProps {
    * the desired order. Omit to render the list without reorder affordances.
    */
   onReorder?: (orderedIds: string[]) => void;
+  /** Id of a freshly-added server to scroll to and highlight (animated border). */
+  highlightedServerId?: string;
+  /** Clears the highlight (called when the highlighted card is clicked). */
+  onClearHighlight?: () => void;
   compact: boolean;
   onToggleCompact: () => void;
 }
@@ -84,6 +88,8 @@ export function ServerListScreen({
   onClone,
   onRemove,
   onReorder,
+  highlightedServerId,
+  onClearHighlight,
   compact,
   onToggleCompact,
 }: ServerListScreenProps) {
@@ -123,6 +129,8 @@ export function ServerListScreen({
     onEdit,
     onClone,
     onRemove,
+    highlighted: server.id === highlightedServerId,
+    onClearHighlight,
     ...server,
   });
 
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index d0ce045b28..e239171d9c 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -277,6 +277,10 @@ export interface InspectorViewProps {
   onServerRemove: (id: string) => void;
   /** Persist a new server ordering (drag-and-drop / keyboard reorder). */
   onServerReorder: (orderedIds: string[]) => void;
+  /** Id of a freshly-added server to scroll to and highlight on the list. */
+  highlightedServerId?: string;
+  /** Clears the freshly-added highlight (on click of the highlighted card). */
+  onClearHighlight?: () => void;
 
   // Per-primitive actions (route to `inspectorClient` methods / hook refresh).
   // Each `on{Screen}UiChange` persists that screen's lifted UI state (#1417).
@@ -402,6 +406,8 @@ export function InspectorView({
   onServerClone,
   onServerRemove,
   onServerReorder,
+  highlightedServerId,
+  onClearHighlight,
   serverSupportsTaskToolCalls,
   onToolsUiChange,
   onCallTool,
@@ -610,6 +616,8 @@ export function InspectorView({
               onClone={onServerClone}
               onRemove={onServerRemove}
               onReorder={onServerReorder}
+              highlightedServerId={highlightedServerId}
+              onClearHighlight={onClearHighlight}
               compact={serversCompact}
               onToggleCompact={() => setServersCompact((c) => !c)}
             />
diff --git a/clients/web/src/main.tsx b/clients/web/src/main.tsx
index 662352e8a9..486061ca05 100644
--- a/clients/web/src/main.tsx
+++ b/clients/web/src/main.tsx
@@ -4,6 +4,7 @@ import { MantineProvider, type CSSVariablesResolver } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
+import "@gfazioli/mantine-border-animate/styles.css";
 import "./App.css";
 import { theme } from "./theme/theme";
 import App from "./App";

From eaf8e4f2836e8171bc54a79c90a61c9e6e12aec8 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 16:37:35 -0400
Subject: [PATCH 14/16] fix(web): highlighted card fills its cell and its
 controls work on first click

- The BorderAnimate wrapper is display:flex, so the card was shrinking to
  content width while the border spanned the cell. Stretch the card with
  w=100% (and the wrapper).
- Always render BorderAnimate and toggle show/animate instead of conditionally
  wrapping: swapping the element type on clear remounted the card, swallowing
  the click that triggered it (e.g. the connect toggle fired clear but not
  connect, needing a second click). Verified: one click now connects + clears.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../groups/ServerCard/ServerCard.test.tsx     | 20 ++++++++++++++
 .../groups/ServerCard/ServerCard.tsx          | 26 +++++++++++++------
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx
index cee8921cbd..bc5b74e658 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx
@@ -326,5 +326,25 @@ describe("ServerCard", () => {
       await user.click(screen.getByText("My MCP Server"));
       expect(onClearHighlight).not.toHaveBeenCalled();
     });
+
+    it("still toggles the connection when the switch is clicked while highlighted", async () => {
+      const user = userEvent.setup();
+      const onToggleConnection = vi.fn();
+      const onClearHighlight = vi.fn();
+      renderWithMantine(
+        <ServerCard
+          {...baseProps}
+          connection={disconnected}
+          highlighted
+          onToggleConnection={onToggleConnection}
+          onClearHighlight={onClearHighlight}
+        />,
+      );
+      // A single click both connects and dismisses the highlight — the card
+      // isn't remounted, so the toggle's action isn't swallowed.
+      await user.click(screen.getByRole("switch"));
+      expect(onToggleConnection).toHaveBeenCalledWith("srv-1");
+      expect(onClearHighlight).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index 6fe5196410..fa35bbb878 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@@ -153,6 +153,10 @@ export function ServerCard({
       ref={rootRef}
       withBorder
       padding="lg"
+      // BorderAnimate's wrapper is display:flex, so the card must stretch to
+      // fill it — otherwise the card shrinks to content width while the
+      // animated border spans the full grid cell.
+      w="100%"
       variant={isDimmed ? "disabled" : undefined}
       onClick={highlighted ? onClearHighlight : undefined}
       {...(isDimmed ? { "aria-disabled": true, inert: true } : {})}
@@ -225,12 +229,18 @@ export function ServerCard({
     </Card>
   );
 
-  if (highlighted) {
-    return (
-      <BorderAnimate show animate radius="md">
-        {card}
-      </BorderAnimate>
-    );
-  }
-  return card;
+  // Always render the wrapper and toggle `show`/`animate` rather than
+  // conditionally wrapping — swapping the element type on clear would remount
+  // the card (and its connect toggle / buttons), swallowing the click that
+  // triggered the clear.
+  return (
+    <BorderAnimate
+      show={highlighted}
+      animate={highlighted}
+      radius="md"
+      w="100%"
+    >
+      {card}
+    </BorderAnimate>
+  );
 }

From e6756804bee957f0bf26e428431ff9041ccee5db Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 17:25:24 -0400
Subject: [PATCH 15/16] =?UTF-8?q?fix(web,core):=20address=20review=20?=
 =?UTF-8?q?=E2=80=94=20OCI=20env,=20untrack=20fixture,=20rename=20validati?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Untrack the stray inspector-v1-multi.server.json (accidentally committed) and
  gitignore root *.server.json fixtures.
- core/mcp/import/serverJson: forward declared env vars into OCI containers via
  '-e KEY' docker args (they previously only set the docker CLI process env);
  add a test. Clarify buildServerConfig (destructure env out instead of
  spread-then-delete) and document value-vs-default env handling.
- useImportClientConfig: validate 'rename' targets inline (invalid charset /
  collision with existing, additions, or other renames) and gate the Import
  button on canImport; surface the error on the field.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .gitignore                                    |  6 ++-
 .../ServerImportConfigModal.test.tsx          | 36 +++++++++++++
 .../ServerImportConfigModal.tsx               |  3 +-
 .../web/src/hooks/useImportClientConfig.ts    | 48 +++++++++++++++++
 .../integration/mcp/import/serverJson.test.ts | 28 ++++++++++
 core/mcp/import/serverJson.ts                 | 36 ++++++++++---
 inspector-v1-multi.server.json                | 53 -------------------
 7 files changed, 146 insertions(+), 64 deletions(-)
 delete mode 100644 inspector-v1-multi.server.json

diff --git a/.gitignore b/.gitignore
index e9e5db735a..1e68696672 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,9 @@ test-servers/build
 /.playwright-mcp/
 
 # 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.
+# Claude Code conversations): screenshots, exported Inspector history dumps,
+# and ad-hoc registry/client config fixtures used for manual import testing.
+# Should never be part of the source tree.
 /*.png
 /inspector-history-*.json
+/*.server.json
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
index 286a2f972c..895189be4c 100644
--- a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.test.tsx
@@ -203,6 +203,42 @@ describe("ServerImportConfigModal", () => {
     });
   });
 
+  it("flags an invalid/colliding rename target and blocks import", async () => {
+    const user = userEvent.setup();
+    setup();
+    await pickClientAndImport(user, "Cursor");
+    await waitFor(() => screen.getByText("Already exists (1)"));
+    await user.click(screen.getByText("Rename"));
+    const renameInput = screen.getByLabelText("New id for existing");
+
+    // Collides with the incoming addition "alpha".
+    await user.clear(renameInput);
+    await user.type(renameInput, "alpha");
+    expect(await screen.findByText(/already in use/)).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Import \d server/ }),
+    ).toBeDisabled();
+
+    // Invalid characters.
+    await user.clear(renameInput);
+    await user.type(renameInput, "bad id!");
+    expect(
+      await screen.findByText(/letters, numbers, hyphens/),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /Import \d server/ }),
+    ).toBeDisabled();
+
+    // A unique, valid id clears the error and re-enables import.
+    await user.clear(renameInput);
+    await user.type(renameInput, "existing-copy");
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: /Import 2 servers/ }),
+      ).toBeEnabled(),
+    );
+  });
+
   it("reports a per-server failure in the summary", async () => {
     const user = userEvent.setup();
     const h = setup();
diff --git a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
index 89edcb76cc..c9d9232a9f 100644
--- a/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
+++ b/clients/web/src/components/groups/ServerImportConfigModal/ServerImportConfigModal.tsx
@@ -221,6 +221,7 @@ export function ServerImportConfigModal({
                           size="xs"
                           aria-label={`New id for ${conflict.id}`}
                           value={res.renameTo}
+                          error={vm.renameErrors[conflict.id]}
                           onChange={(e) =>
                             vm.setRenameTo(conflict.id, e.currentTarget.value)
                           }
@@ -238,7 +239,7 @@ export function ServerImportConfigModal({
               </Button>
               <Button
                 onClick={() => void vm.runImport()}
-                disabled={vm.importCount === 0}
+                disabled={!vm.canImport}
               >
                 Import {vm.importCount} server{vm.importCount === 1 ? "" : "s"}
               </Button>
diff --git a/clients/web/src/hooks/useImportClientConfig.ts b/clients/web/src/hooks/useImportClientConfig.ts
index 92246634b7..61a01478f8 100644
--- a/clients/web/src/hooks/useImportClientConfig.ts
+++ b/clients/web/src/hooks/useImportClientConfig.ts
@@ -7,6 +7,7 @@ import {
   type ImportPlan,
   type ImportSourceResult,
 } from "@inspector/core/mcp/import/index.js";
+import { validateStoreId } from "@inspector/core/storage/store-id.js";
 import type { MCPConfig, MCPServerConfig } from "@inspector/core/mcp/types.js";
 
 export type ImportPhase = "select" | "loading" | "review" | "summary";
@@ -49,6 +50,10 @@ export interface ImportClientConfigViewModel {
   outcomes: ImportOutcome[];
   selectedType: string | null;
   importCount: number;
+  /** Per-conflict validation message for an invalid/colliding rename target. */
+  renameErrors: Record<string, string>;
+  /** True when there's something to import and no rename is invalid. */
+  canImport: boolean;
   setSelectedType: (type: string | null) => void;
   pickSource: (type: string) => Promise<void>;
   pickFile: (file: File | null) => Promise<void>;
@@ -251,6 +256,47 @@ export function useImportClientConfig({
       ).length
     : 0;
 
+  // Validate each "rename" target inline: it must be a syntactically valid id
+  // that doesn't collide with an existing server, an imported addition, or
+  // another rename target — so the user learns before submitting rather than
+  // getting a 409 in the summary.
+  const renameErrors = useMemo<Record<string, string>>(() => {
+    if (!plan) return {};
+    const errors: Record<string, string> = {};
+    for (const conflict of plan.conflicts) {
+      const res = resolutions[conflict.id];
+      if (res?.action !== "rename") continue;
+      const newId = res.renameTo.trim();
+      if (!newId) {
+        errors[conflict.id] = "A new id is required.";
+        continue;
+      }
+      if (!validateStoreId(newId)) {
+        errors[conflict.id] =
+          "Use only letters, numbers, hyphens, underscores.";
+        continue;
+      }
+      // Ids that would already exist alongside this rename.
+      const taken = new Set<string>(existingIds);
+      for (const add of plan.additions) {
+        if ((additionActions[add.id] ?? "import") === "import") {
+          taken.add(add.id);
+        }
+      }
+      for (const other of plan.conflicts) {
+        if (other.id === conflict.id) continue;
+        const r = resolutions[other.id];
+        if (r?.action === "rename") taken.add(r.renameTo.trim());
+      }
+      if (taken.has(newId)) {
+        errors[conflict.id] = `"${newId}" is already in use.`;
+      }
+    }
+    return errors;
+  }, [plan, resolutions, additionActions, existingIds]);
+
+  const canImport = importCount > 0 && Object.keys(renameErrors).length === 0;
+
   return {
     phase,
     error,
@@ -261,6 +307,8 @@ export function useImportClientConfig({
     outcomes,
     selectedType,
     importCount,
+    renameErrors,
+    canImport,
     setSelectedType,
     pickSource,
     pickFile,
diff --git a/clients/web/src/test/integration/mcp/import/serverJson.test.ts b/clients/web/src/test/integration/mcp/import/serverJson.test.ts
index 4252d92ade..b1f335f2d9 100644
--- a/clients/web/src/test/integration/mcp/import/serverJson.test.ts
+++ b/clients/web/src/test/integration/mcp/import/serverJson.test.ts
@@ -155,6 +155,34 @@ describe("parseServerJson — packages", () => {
     });
   });
 
+  it("forwards declared env vars into OCI containers via -e flags", () => {
+    const parsed = parseServerJson(
+      JSON.stringify({
+        name: "com.example/d",
+        packages: [
+          {
+            registryType: "oci",
+            identifier: "img:1",
+            environmentVariables: [
+              { name: "API_KEY", isRequired: true },
+              { name: "LOG", default: "info" },
+            ],
+          },
+        ],
+      }),
+    );
+    const opt = parsed.options[0];
+    // -e KEY flags go before the image so docker forwards them into the
+    // container (sourced from config.env at connect time).
+    expect(opt.baseConfig).toMatchObject({
+      command: "docker",
+      args: ["run", "-i", "--rm", "-e", "API_KEY", "-e", "LOG", "img:1"],
+    });
+    if (opt.baseConfig.type === "stdio") {
+      expect(opt.baseConfig.env).toEqual({ LOG: "info" });
+    }
+  });
+
   it("skips unsupported (mcpb) and malformed packages", () => {
     const parsed = parseServerJson(
       JSON.stringify({
diff --git a/core/mcp/import/serverJson.ts b/core/mcp/import/serverJson.ts
index d3207399b9..3652cd430b 100644
--- a/core/mcp/import/serverJson.ts
+++ b/core/mcp/import/serverJson.ts
@@ -109,6 +109,10 @@ function parseEnvVars(rawList: unknown[]): ServerJsonEnvVar[] {
     if (!name) continue;
     const required = Boolean(pick(obj, "isRequired", "is_required"));
     const isSecret = Boolean(pick(obj, "isSecret", "is_secret"));
+    // The schema's `value` is a *fixed* value and `default` a suggestion; we
+    // prefill both as the (editable) input value. We don't currently lock a
+    // fixed `value` against editing — acceptable for an import preview the user
+    // reviews before saving.
     const def = asString(obj.default) ?? asString(obj.value);
     out.push({
       name,
@@ -199,16 +203,31 @@ function parsePackage(raw: Record<string, unknown>): ServerJsonOption | null {
     asArray(pick(raw, "packageArguments", "package_arguments")),
   );
 
+  const env = defaultEnv(envVars);
+
   // docker needs `run -i --rm` before the image; package args go to the
-  // container after the image. Other runtimes take the package ref then args.
+  // container after the image. Declared env vars must be forwarded into the
+  // container with `-e KEY` flags — otherwise they'd only set the `docker` CLI
+  // process's environment (via config.env) and never reach the server. `-e KEY`
+  // (no value) tells docker to pass KEY through from that process env, which is
+  // where buildServerConfig merges the user-supplied values. Other runtimes
+  // inherit config.env directly, so they need no extra flags.
+  const dockerEnvArgs = envVars.flatMap((v) => ["-e", v.name]);
   const args =
     runtime.command === "docker"
-      ? ["run", "-i", "--rm", ...runtimeArgs, runtime.ref, ...packageArgs]
+      ? [
+          "run",
+          "-i",
+          "--rm",
+          ...runtimeArgs,
+          ...dockerEnvArgs,
+          runtime.ref,
+          ...packageArgs,
+        ]
       : registryType === "npm"
         ? [...runtimeArgs, "-y", runtime.ref, ...packageArgs]
         : [...runtimeArgs, runtime.ref, ...packageArgs];
 
-  const env = defaultEnv(envVars);
   const baseConfig: StdioServerConfig = {
     type: "stdio",
     command: runtime.command,
@@ -328,13 +347,14 @@ export function buildServerConfig(
     if (value === "") delete merged[key];
     else merged[key] = value;
   }
-  const config: StdioServerConfig = {
-    ...option.baseConfig,
+  // Drop the original `env` from the base (via destructure) so it isn't spread
+  // back in; re-add it only when the merged map is non-empty. This keeps an
+  // entry whose overrides emptied everything out from persisting a stale env.
+  const { env: _baseEnv, ...base } = option.baseConfig;
+  return {
+    ...base,
     ...(Object.keys(merged).length > 0 ? { env: merged } : {}),
   };
-  // Strip an env key that ended up empty after overrides.
-  if (Object.keys(merged).length === 0) delete config.env;
-  return config;
 }
 
 /** The id a parsed server.json will be saved under: the override (if any) wins. */
diff --git a/inspector-v1-multi.server.json b/inspector-v1-multi.server.json
deleted file mode 100644
index 1e6fbc1749..0000000000
--- a/inspector-v1-multi.server.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "$schema": "https://static.modelcontextprotocol.io/schemas/2025-12-11/server.schema.json",
-  "name": "io.github.modelcontextprotocol/inspector-multi",
-  "title": "MCP Inspector (multiple install methods)",
-  "description": "Sample registry entry describing one server (the MCP Inspector) installable several ways — npm, an OCI/Docker image, or a hosted remote — to exercise the package-selection UI.",
-  "repository": {
-    "url": "https://github.com/modelcontextprotocol/inspector",
-    "source": "github"
-  },
-  "version": "0.16.5",
-  "packages": [
-    {
-      "registryType": "npm",
-      "identifier": "@modelcontextprotocol/inspector",
-      "version": "0.16.5",
-      "transport": {
-        "type": "stdio"
-      },
-      "environmentVariables": [
-        {
-          "name": "MCP_PROXY_AUTH_TOKEN",
-          "description": "Optional bearer token used to authenticate to the inspector proxy server.",
-          "isRequired": false,
-          "isSecret": true
-        },
-        {
-          "name": "MCP_AUTO_OPEN_ENABLED",
-          "description": "Whether the inspector auto-opens a browser tab on launch.",
-          "default": "true"
-        }
-      ]
-    },
-    {
-      "registryType": "oci",
-      "identifier": "docker.io/modelcontextprotocol/inspector:0.16.5",
-      "transport": {
-        "type": "stdio"
-      }
-    }
-  ],
-  "remotes": [
-    {
-      "type": "streamable-http",
-      "url": "https://{region}.inspector.example.com/mcp",
-      "variables": {
-        "region": {
-          "description": "Hosted inspector region.",
-          "default": "us-east-1"
-        }
-      }
-    }
-  ]
-}

From 0648936500428c34f9776eb9e1823efd2949c6f1 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 23 Jun 2026 18:05:15 -0400
Subject: [PATCH 16/16] feat(web): highlight all servers from a batch import,
 not just the last

Track highlighted servers as a set of ids instead of one. addServerHighlighted
accumulates each id (a multi-server client-config import highlights them all);
opening an add/import modal starts a fresh batch. Clicking a card clears only
that card's highlight; only the first highlighted card scrolls into view.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 clients/web/src/App.tsx                       | 44 ++++++++++++-----
 .../groups/ServerCard/ServerCard.tsx          | 20 +++++---
 .../ServerListScreen.test.tsx                 | 47 +++++++++++++++++++
 .../ServerListScreen/ServerListScreen.tsx     | 25 +++++++---
 .../views/InspectorView/InspectorView.tsx     | 12 ++---
 5 files changed, 118 insertions(+), 30 deletions(-)

diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 42f4cc7d6a..9bdf0b1825 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -511,10 +511,17 @@ function App() {
   // import).
   const [importConfigOpen, setImportConfigOpen] = useState(false);
   const [importJsonOpen, setImportJsonOpen] = useState(false);
-  // Id of a freshly-added server (manual or import) — the list scrolls to it and
-  // draws an animated border until the card is clicked. (#1348)
-  const [highlightedServerId, setHighlightedServerId] = useState<string | null>(
-    null,
+  // Ids of freshly-added servers (manual or import) — their cards draw an
+  // animated border (and the first scrolls into view) until clicked. A batch
+  // import accumulates all of its ids here; opening an add/import modal starts a
+  // fresh batch. (#1348)
+  const [highlightedServerIds, setHighlightedServerIds] = useState<string[]>(
+    [],
+  );
+  const clearHighlight = useCallback(
+    (id: string) =>
+      setHighlightedServerIds((ids) => ids.filter((x) => x !== id)),
+    [],
   );
   const [settingsModalTargetId, setSettingsModalTargetId] = useState<
     string | undefined
@@ -2164,10 +2171,13 @@ function App() {
   // Add a server, then mark it as the freshly-added one so the list scrolls to
   // it and highlights it. Used by manual add/clone and both import flows; edits
   // and conflict-overwrites (updateServer) intentionally don't highlight.
+  // Accumulates into the current highlight batch (a multi-server import adds
+  // each id), deduped. The batch is reset to empty when an add/import modal
+  // opens (see the menu handlers).
   const addServerHighlighted = useCallback(
     async (id: string, config: MCPServerConfig) => {
       await addServer(id, config);
-      setHighlightedServerId(id);
+      setHighlightedServerIds((ids) => (ids.includes(id) ? ids : [...ids, id]));
     },
     [addServer],
   );
@@ -2415,14 +2425,26 @@ function App() {
         onDisconnect={() => {
           void onDisconnect();
         }}
-        onServerAdd={() => setConfigModal({ mode: "add" })}
-        onServerImportConfig={() => setImportConfigOpen(true)}
-        onServerImportJson={() => setImportJsonOpen(true)}
+        onServerAdd={() => {
+          setHighlightedServerIds([]);
+          setConfigModal({ mode: "add" });
+        }}
+        onServerImportConfig={() => {
+          setHighlightedServerIds([]);
+          setImportConfigOpen(true);
+        }}
+        onServerImportJson={() => {
+          setHighlightedServerIds([]);
+          setImportJsonOpen(true);
+        }}
         onServerExport={onServerExport}
         onConnectionInfo={() => setConnectionInfoModalOpen(true)}
         onServerSettings={(id) => setSettingsModalTargetId(id)}
         onServerEdit={(id) => setConfigModal({ mode: "edit", targetId: id })}
-        onServerClone={(id) => setConfigModal({ mode: "clone", targetId: id })}
+        onServerClone={(id) => {
+          setHighlightedServerIds([]);
+          setConfigModal({ mode: "clone", targetId: id });
+        }}
         onServerRemove={(id) => {
           const target = servers.find((s) => s.id === id);
           if (target) setRemoveTarget(target);
@@ -2441,8 +2463,8 @@ function App() {
             });
           });
         }}
-        highlightedServerId={highlightedServerId ?? undefined}
-        onClearHighlight={() => setHighlightedServerId(null)}
+        highlightedServerIds={highlightedServerIds}
+        onClearHighlight={clearHighlight}
         serverSupportsTaskToolCalls={
           !!capabilities?.tasks?.requests?.tools?.call
         }
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index fa35bbb878..864ccf6a2b 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@@ -35,11 +35,18 @@ export interface ServerCardProps extends ServerEntry {
    */
   dragHandle?: ReactNode;
   /**
-   * When true, the card is freshly added: it scrolls into view and draws an
-   * animated border (Mantine Border Animate) to draw the eye. Cleared by
-   * `onClearHighlight` on any click on the card.
+   * When true, the card is freshly added: it draws an animated border (Mantine
+   * Border Animate) to draw the eye. Cleared by `onClearHighlight` on any click
+   * on the card.
    */
   highlighted?: boolean;
+  /**
+   * Whether a highlighted card scrolls itself into view. When several cards are
+   * highlighted at once (a batch import) only the first should scroll, so the
+   * list jumps to the start of the batch rather than fighting over the viewport.
+   * Defaults to true.
+   */
+  scrollOnHighlight?: boolean;
   /** Called when a highlighted card is clicked, to dismiss the animated border. */
   onClearHighlight?: () => void;
 }
@@ -130,18 +137,19 @@ export function ServerCard({
   writable = true,
   dragHandle,
   highlighted = false,
+  scrollOnHighlight = true,
   onClearHighlight,
 }: ServerCardProps) {
   const isDimmed = activeServer !== undefined && activeServer !== id;
   const rootRef = useRef<HTMLDivElement>(null);
 
   // When freshly added, bring the card into view (it may be far down a long
-  // list). Fires on the false→true transition only.
+  // list). Only the designated card scrolls (the first of a highlighted batch).
   useEffect(() => {
-    if (highlighted) {
+    if (highlighted && scrollOnHighlight) {
       rootRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
     }
-  }, [highlighted]);
+  }, [highlighted, scrollOnHighlight]);
   const transport = getTransport(config);
   const commandOrUrl = getCommandOrUrl(config);
   const version = info?.version;
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
index 9869601bf0..19b7bf2a87 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
@@ -135,4 +135,51 @@ describe("ServerListScreen", () => {
       expect(screen.queryByText("Read-only session")).not.toBeInTheDocument();
     });
   });
+
+  describe("freshly-added highlight", () => {
+    it("draws an animated border on every highlighted server", () => {
+      const { container } = renderWithMantine(
+        <ServerListScreen
+          {...baseProps}
+          highlightedServerIds={["alpha", "beta"]}
+        />,
+      );
+      // One animated border per highlighted card.
+      expect(
+        container.querySelectorAll(".mantine-BorderAnimate-border"),
+      ).toHaveLength(2);
+    });
+
+    it("scrolls only the first highlighted card into view", () => {
+      const scrollIntoView = vi.fn();
+      const orig = Element.prototype.scrollIntoView;
+      Element.prototype.scrollIntoView = scrollIntoView;
+      try {
+        renderWithMantine(
+          <ServerListScreen
+            {...baseProps}
+            highlightedServerIds={["alpha", "beta"]}
+          />,
+        );
+        // Both highlighted, but only the first (alpha) scrolls.
+        expect(scrollIntoView).toHaveBeenCalledTimes(1);
+      } finally {
+        Element.prototype.scrollIntoView = orig;
+      }
+    });
+
+    it("clears the highlight for the clicked card by id", async () => {
+      const user = userEvent.setup();
+      const onClearHighlight = vi.fn();
+      renderWithMantine(
+        <ServerListScreen
+          {...baseProps}
+          highlightedServerIds={["alpha", "beta"]}
+          onClearHighlight={onClearHighlight}
+        />,
+      );
+      await user.click(screen.getByText("Beta"));
+      expect(onClearHighlight).toHaveBeenCalledWith("beta");
+    });
+  });
 });
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
index 9eedb4fa2a..e0e31e1f81 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
@@ -55,10 +55,11 @@ export interface ServerListScreenProps {
    * the desired order. Omit to render the list without reorder affordances.
    */
   onReorder?: (orderedIds: string[]) => void;
-  /** Id of a freshly-added server to scroll to and highlight (animated border). */
-  highlightedServerId?: string;
-  /** Clears the highlight (called when the highlighted card is clicked). */
-  onClearHighlight?: () => void;
+  /** Ids of freshly-added servers to highlight (animated border); the first is
+   *  also scrolled into view. */
+  highlightedServerIds?: string[];
+  /** Clears the highlight for a server (called when its card is clicked). */
+  onClearHighlight?: (id: string) => void;
   compact: boolean;
   onToggleCompact: () => void;
 }
@@ -88,7 +89,7 @@ export function ServerListScreen({
   onClone,
   onRemove,
   onReorder,
-  highlightedServerId,
+  highlightedServerIds,
   onClearHighlight,
   compact,
   onToggleCompact,
@@ -119,6 +120,13 @@ export function ServerListScreen({
     ? buildReorderAnnouncements(servers)
     : undefined;
 
+  // Only the first highlighted card (in display order) scrolls into view so a
+  // batch import jumps to the start of the batch instead of fighting over the
+  // viewport.
+  const firstHighlightedId = servers.find((s) =>
+    highlightedServerIds?.includes(s.id),
+  )?.id;
+
   const cardProps = (server: ServerEntry) => ({
     compact,
     writable,
@@ -129,8 +137,11 @@ export function ServerListScreen({
     onEdit,
     onClone,
     onRemove,
-    highlighted: server.id === highlightedServerId,
-    onClearHighlight,
+    highlighted: highlightedServerIds?.includes(server.id) ?? false,
+    scrollOnHighlight: server.id === firstHighlightedId,
+    onClearHighlight: onClearHighlight
+      ? () => onClearHighlight(server.id)
+      : undefined,
     ...server,
   });
 
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index e239171d9c..29fd8c1628 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -277,10 +277,10 @@ export interface InspectorViewProps {
   onServerRemove: (id: string) => void;
   /** Persist a new server ordering (drag-and-drop / keyboard reorder). */
   onServerReorder: (orderedIds: string[]) => void;
-  /** Id of a freshly-added server to scroll to and highlight on the list. */
-  highlightedServerId?: string;
-  /** Clears the freshly-added highlight (on click of the highlighted card). */
-  onClearHighlight?: () => void;
+  /** Ids of freshly-added servers to highlight on the list (first is scrolled to). */
+  highlightedServerIds?: string[];
+  /** Clears the freshly-added highlight for a server (on click of its card). */
+  onClearHighlight?: (id: string) => void;
 
   // Per-primitive actions (route to `inspectorClient` methods / hook refresh).
   // Each `on{Screen}UiChange` persists that screen's lifted UI state (#1417).
@@ -406,7 +406,7 @@ export function InspectorView({
   onServerClone,
   onServerRemove,
   onServerReorder,
-  highlightedServerId,
+  highlightedServerIds,
   onClearHighlight,
   serverSupportsTaskToolCalls,
   onToolsUiChange,
@@ -616,7 +616,7 @@ export function InspectorView({
               onClone={onServerClone}
               onRemove={onServerRemove}
               onReorder={onServerReorder}
-              highlightedServerId={highlightedServerId}
+              highlightedServerIds={highlightedServerIds}
               onClearHighlight={onClearHighlight}
               compact={serversCompact}
               onToggleCompact={() => setServersCompact((c) => !c)}