feat(web): catalog vs read-only session launch model + apply --header (#1481, #1483) (#1496)

* feat(web): catalog vs read-only session launch model + apply --header (#1481, #1483)

Per specification/v2_catalog_launch_config.md, `mcp-inspector --web` now selects
the backend's server-list source and a session-wide writability, instead of
seeding an inert `initialMcpConfig` the UI never read:

- `--catalog <path>` (and `MCP_CATALOG_PATH`) → active WRITABLE catalog
  (seed/CRUD/watch), like the default catalog.
- `--config <path>` → READ-ONLY session file: served in the UI but never
  written, seeded, or plaintext-secret-migrated — safe to point at a foreign
  config (e.g. claude_desktop_config.json).
- ad-hoc `--server-url`/command (+ `--header`) → one server held IN MEMORY
  (no file written); `--header` is lifted onto the entry so the seeded
  connection actually uses it (closes the #1483 warn-only no-op).
- nothing → default catalog (writable), unchanged.

Backend (`createRemoteApp`): new `writable` + `initialServers` options. GET
/api/servers branches three ways (in-memory / read-only file with no
seed+no migrate / writable catalog); the four mutating routes return 403 when
read-only; `/api/config` carries `writable`; the file watcher is skipped for
in-memory sessions. `--catalog`/`--config` are mutually exclusive and neither
combines with an ad-hoc target or `--header`; `--header` requires an ad-hoc
HTTP/SSE server (clear errors otherwise — no silent no-op).

UI: `useServerListWritable` reads `writable` from /api/config; the Servers
screen hides add/edit/clone/remove/reorder/settings and shows a read-only
banner when false. All new props default to writable=true (back-compatible).

Docs: spec gaps G2/G3/G4 updated; launcher README documents the flags.

Verified end-to-end against the built launcher: --config (writable:false,
file byte-stable, mutations 403), ad-hoc --header (in-memory, header lifted),
and --catalog (writable:true, POST persists).

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

* refactor(web): address review — Mantine <Code> in read-only banner, clarify watcher comment

- Replace raw <code> with Mantine <Code> in the read-only-session Alert
  (repo convention: prefer Mantine primitives over raw HTML).
- Add a comment near `watchable` clarifying that a read-only `--config` file
  is still watched on purpose (read-only blocks UI writes, not external
  observation; `writable` does not gate watching).

Deferred (per reviewer): consolidating useSandboxUrl + useServerListWritable
into one useConfig hook to avoid the duplicate /api/config fetch — optional
follow-up. The redundant ad-hoc header type-guard is kept as defensive.

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

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall 2026-06-16 14:24:58 -04:00 • committed by GitHub
commit 91f02fd6db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 1281 additions and 157 deletions

View file

@ -247,4 +247,34 @@ describe("ServerCard", () => {
Node.DOCUMENT_POSITION_FOLLOWING,
);
});
describe("read-only (writable=false)", () => {
it("hides Clone/Edit/Remove/Settings but keeps connect + Connection Info", () => {
renderWithMantine(<ServerCard {...baseProps} writable={false} />);
expect(
screen.queryByRole("button", { name: "Clone" }),
).not.toBeInTheDocument();
expect(
screen.queryByRole("button", { name: "Edit" }),
).not.toBeInTheDocument();
expect(
screen.queryByRole("button", { name: "Remove" }),
).not.toBeInTheDocument();
expect(
screen.queryByRole("button", { name: "Settings" }),
).not.toBeInTheDocument();
// connection === connected, so Connection Info stays available.
expect(
screen.getByRole("button", { name: "Connection Info" }),
).toBeInTheDocument();
});
it("shows mutation actions when writable (default)", () => {
renderWithMantine(<ServerCard {...baseProps} />);
expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Settings" }),
).toBeInTheDocument();
});
});
});

View file

@ -19,6 +19,12 @@ export interface ServerCardProps extends ServerEntry {
onClone: (id: string) => void;
onRemove: (id: string) => void;
compact?: boolean;
/**
* When false (read-only session), the catalog mutation actions
* (Clone / Edit / Remove / Settings) are hidden; connect and Connection Info
* remain. Defaults to true.
*/
writable?: boolean;
/**
* Optional drag-handle affordance rendered at the start of the card header,
* before the server name. Supplied by the sortable wrapper
@ -112,6 +118,7 @@ export function ServerCard({
onClone,
onRemove,
compact = false,
writable = true,
dragHandle,
}: ServerCardProps) {
const isDimmed = activeServer !== undefined && activeServer !== id;
@ -165,9 +172,17 @@ export function ServerCard({
<Group justify="space-between">
<ActionsRow>
<SubtleButton onClick={() => onClone(id)}>Clone</SubtleButton>
<SubtleButton onClick={() => onEdit(id)}>Edit</SubtleButton>
<RemoveButton onClick={() => onRemove(id)}>Remove</RemoveButton>
{writable && (
<>
<SubtleButton onClick={() => onClone(id)}>
Clone
</SubtleButton>
<SubtleButton onClick={() => onEdit(id)}>Edit</SubtleButton>
<RemoveButton onClick={() => onRemove(id)}>
Remove
</RemoveButton>
</>
)}
</ActionsRow>
<ActionsRow>
{connection.status === "connected" && (
@ -175,9 +190,11 @@ export function ServerCard({
Connection Info
</SubtleButton>
)}
<SubtleButton onClick={() => onSettings(id)}>
Settings
</SubtleButton>
{writable && (
<SubtleButton onClick={() => onSettings(id)}>
Settings
</SubtleButton>
)}
</ActionsRow>
</Group>
</>