fix(web): stop MCP server snippet code from inheriting the inline-code chip

[maxmilian]

Fixes #4509

Why

Scratching the issue's itch (reported by @NightGlowww, root cause confirmed with @lefarcen). In Settings → MCP server, the generated CLI command (claude mcp add-json … for Claude Code, and the other clients) renders inside a dark <pre><code> block. The inner <code> had no style of its own, so it inherited the global inline-code chip rule from primitives.css (background: var(--bg-subtle) + padding: 1px 5px + rounded corners). On the wrapped bash one-liner (white-space: pre-wrap; word-break: break-all) each wrapped segment painted its own light rounded rectangle — which reads as the command being permanently selected, and makes the MCP setup UI look broken.

What users will see

The MCP server setup command now renders as clean monospaced code on the dark block — no light rectangles behind wrapped lines, stable contrast, and no selection-like highlights unless you actually select text. Applies to every CLI client (Claude Code / Codex / …) since they share the snippet block.

Surface area

• UI — fixes the MCP server snippet rendering in Settings (apps/web)
• Keyboard shortcut
• CLI / env var
• API / contract
• Extension point
• i18n keys
• New top-level dependency
• Default behavior change
• None

Screenshots

Settings → MCP server, Claude Code snippet (the wrapped claude mcp add-json one-liner):

Before	After
light rounded rectangles behind every wrapped segment (selection-like)	clean monospaced code, no highlight artifacts

Bug fix verification

• Test path: e2e/ui/settings-mcp-snippet-chip.test.ts → MCP server snippet code stays transparent, not the inline-code chip (#4509)
• Did the test go red on main and green on this branch? yes — the test navigates to Settings → MCP server and reads the snippet <code> computed style. On main it fails: background is rgb(244, 245, 247) (the --bg-subtle chip) with 1px 5px padding. On this branch it passes: background is rgba(0, 0, 0, 0) (transparent), padding 0px.

Validation

• pnpm typecheck — clean (apps/web Done)
• New Playwright UI test passes; verified the real claude mcp add-json snippet renders against the e2e mock daemon and the <code> no longer carries the chip background (before/after screenshots above)

Implementation note: the fix is a small inline-style reset on the snippet's inner <code> (background: transparent; padding: 0; border-radius: 0; color/font: inherit) so it stops inheriting the global inline-code chip styling and instead inherits the dark block's own color and monospace font. Nothing else in the MCP setup card changes.

[lefarcen]

Hi @maxmilian! 👋

Thanks for opening this draft PR — the write-up, before/after framing, and regression path are all very clear.
We'll let the draft breathe for now; once you mark it ready for review, the requested reviewers can pick it up from there.

[maxmilian]

Heads-up on CI: the Web workspace tests / Validate workspace red is a flaky failure unrelated to this change. It's tests/components/ProjectView.run-cleanup.test.tsx:1483 ("does not replay a terminal succeeded row …", fetchChatRunStatus called once with run-replay) — run-replay logic this PR doesn't touch.

This diff only edits apps/web/src/components/SettingsDialog.tsx (one inline style on the snippet <code>) and adds e2e/ui/settings-mcp-snippet-chip.test.ts; the same run-cleanup test passed on my other open PR's run against the same base. Happy to rebase/re-push if you'd like a clean run, but there's nothing in the diff that could affect it — a re-run should go green.

[PerishCode]

@maxmilian I reviewed the changed Settings MCP snippet range and the new Playwright regression. The inline reset is scoped to the snippet's child code element and directly neutralizes the global inline-code chip styles without changing the surrounding MCP setup behavior; the regression asserts the computed transparent background and zero padding in the real Settings flow. Nice focused fix with a clear red/green path for #4509.

I was not able to rerun the package typechecks in this prepared worktree because node_modules is absent and tsc is not installed locally, so this approval is based on diff review plus the PR's reported validation.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

[lefarcen]

🧪 This PR has changes that need a manual QA pass before merge — please hold off self-merging for now; we'll loop QA in once it's merge-ready (and design/product have signed off, where applicable).

[chaoxiaoche]

UI/design LGTM. This is a focused visual cleanup for the MCP snippet: the command now reads as clean code inside the dark block instead of inheriting the inline-code chip background.

The before/after screenshots cover the change clearly, and I do not see any interaction concern from the UI side.