feat(frontend): README install badges ("Share this server")

[GallaGit]

Closes #1012

What

• New packages/frontend/src/lib/mcp-install-links.ts: pure builders taking { name, url }. The existing cursor:// / vscode: deep links moved here unchanged; https variants sit next to them:
  • Cursor: https://cursor.com/en/install-mcp?name=<slug>&config=<base64 {"url"}>
  • VS Code: https://vscode.dev/redirect/mcp/install?name=<slug>&config=<URL-encoded {"name","type":"http","url"}>
• "Share this server" card below "Connect your MCP client":
  • local HTML/CSS preview of both badges (no remote images, works on offline installs);
  • Copy Markdown / Copy HTML buttons via handleCopy, so client_config_copied is recorded;
  • the snippet in a code block.
• Shown only when mcpAuthMode is oauth2 or both; in legacy/none the card shows a one-line explanation instead.
• Warning when the endpoint host is localhost or 127.0.0.1 (also ::1 and *.localhost).
• Snippets contain only the MCP URL: no API key, token or cookie.
• Docs: "Share a server with your team" in docs/guides.md.

Badge images: Cursor's official button (cursor.com/deeplink/mcp-install-dark.svg) and a shields.io static badge for VS Code (no official button). Only in the copied snippet, never loaded by the page. Happy to switch Cursor to shields.io too if you prefer.

Docs referenced

• https://cursor.com/docs/context/mcp/install-links
• https://code.visualstudio.com/docs/copilot/customization/mcp-servers

Tests

New tests in mcp-server-connect-clients.spec.ts check that:

• the copied Markdown has https links whose decoded config matches the server endpoint exactly;
• the copied text contains no cursor://, vscode:, X-API-Key, token or cookie;
• the HTML snippet is correct and the preview loads no images;
• page.on('request') sees no request to a third-party host;
• the localhost warning shows;
• the in-app Cursor and VS Code links are byte-identical to the previous builders;
• legacy mode shows the explanation instead of the badges.

Playwright: 10/10 passing. Lint and tsc --noEmit clean.

Manual verification

Pasted the generated Markdown badges (server anythingmcp-test, URL https://example.com/mcp) into a secret GitHub gist README. Both badges rendered. "Add to Cursor" opened Cursor and installed the server with the correct URL; "Add to VS Code" opened VS Code and installed the server with the correct URL. Tested on Windows, 2026-10-16.

@helpcodeai ready for review.

[helpcodeai]

Thanks @GallaGit, this is really clean work. The lib split is nice, the in-app deep links are unchanged, and the tests cover exactly what the issue asked (decoded config, no third-party requests, legacy mode). I checked both https formats against the live endpoints: cursor.com/en/install-mcp redirects to /install-mcp and decodes a padded, URL-encoded config correctly, and vscode.dev/redirect/mcp/install redirects to vscode:mcp/install with the right config. tsc, eslint and the full Playwright suite (191) pass, also merged onto current main.

One thing to fix before merge:

• Parentheses in the slug break the Markdown snippet. encodeURIComponent leaves ( and ) alone, and the backend accepts any slug string. With the slug x)(www.evil.example, GitHub ends the badge link at name=x and turns www.evil.example… into a clickable link in the README. Could you percent-encode ( and ) (ideally !*' too) in cursorInstallUrl / vscodeInstallUrl, and add a test with such a slug? The HTML snippet is already fine.

Smaller things, up to you:

1. Could the preview badges link to the https install URLs, so the preview behaves like what gets shared? Right now a right-click copy gives a cursor:// link that GitHub drops.
2. While /health/server-info is loading, or if it fails, the card shows only its title. Maybe hide the card until the auth mode is known.
3. The code block adds a third "Copy" button, logged as modal-Markdown. Showing the snippet in a plain <pre> would avoid the duplicate.
4. The VS Code image text ("Install MCP server") and its alt text ("Add to VS Code") don't match. Also, white on #0098FF is about 3:1, so a darker blue would pass AA.

Thanks again, almost there!

[GallaGit]

Thanks for the thorough review! Pushed fixes:

• Parens in slugs: the https install URLs now also percent-encode ( ) ! * ', so a slug like x)(www.evil.example can't break out of the Markdown link. Added an e2e test with such a slug that checks the snippet has no raw parens in the URLs and decodes back to the original name.
• Preview badges now link to the same https install URLs as the copied snippet; the in-app "Open in …" deep-link buttons are unchanged.
• The Share card stays hidden until /health/server-info returns an auth mode, including when it fails.
• The snippet is now a plain <pre>, so there's no third copy button.
• The VS Code badge now reads "Add to VS Code" to match its alt text, on #0066CC, which gives white text ~5.57:1 contrast (WCAG AA).

tsc and eslint are clean (0 errors), and the full frontend e2e suite passes: 193 tests (191 + 2 new).