feat(portal): always show MCP section with inline create in run/profile flows

[Cedric Vidal (cedricvidal)]

Original author: Wassim Chegham (@manekinekko)

Resolves #1105.

Problem

On the Submit Run and Profile create / New Version screens, the "MCP Servers" section was only rendered when at least one MCP server was already registered. With zero servers, the section disappeared entirely, so there was no entry point to add one without leaving the run-creation flow.

Changes

• Extracted the form from CreateMcpServer.tsx into a reusable McpServerForm component (callback-driven, no navigation) and a shared McpServerCreateDialog wrapper (scrollable body + sticky footer), matching the in-place creation pattern used for profiles.
• CreateMcpServer page is now a thin wrapper around McpServerForm — unchanged page UX, including the duplicate-slug guard that landed on main (now lives in McpServerForm, so the dialog gets it too).
• Submit Run, Profile create, and New Profile Version now render the MCP section whenever the selected agent supports MCP servers, even with zero servers, with an empty-state message and an inline "New MCP server…" action.
• After inline creation, McpServerForm upserts the server into the shared ["mcp-servers"] query (then invalidates), and the host flow auto-selects it.
• Submit Run also lists selected servers that are no longer in the active project (e.g. carried in from a profile or resubmit) as unavailable, so they're visible and can be cleared instead of hidden behind an empty state.

Rebase follow-ups (after rebasing onto main)

• Preserved the agent capability gate (supportsMcpServers, from Discover workers dynamically and present registry agent names #1381) — the section is still hidden for agents that don't support MCP; only the "≥1 server" condition was removed.
• Fixed run being submitted on inline create: Submit Run is a <form>, and React bubbles synthetic events through portals, so submitting the dialog form also fired SubmitRun.handleSubmit. McpServerForm now stops submit propagation.
• Fixed Cmd/Ctrl+Enter inside the dialog submitting the run: the "Create Server" button is marked data-command-enter, so the dialog claims the shortcut before the page-level useCommandEnter handler.
• Slug HTML pattern now matches SLUG_REGEX / API (1-char slugs allowed).

Acceptance criteria

• Submit Run shows the MCP section with zero servers
• Profile create / new version shows the MCP section with zero servers
• Inline "New MCP server…" opens an in-place dialog reusing the CreateMcpServer form and keeps the user on the page
• Newly created server appears in the list and is immediately selected
• Section visibility follows the selected agent's supportsMcpServers capability (consistent with Skills/Extensions)

Verification

• McpServerForm.test.tsx (new): duplicate slug blocked; create seeds cache before onCreated; submit does not propagate to an enclosing form across a portal; Cmd/Ctrl+Enter is claimed by the dialog. The last two fail without the fix.
• McpServerCreateDialog.stories.tsx (new): Default, DuplicateSlug, CreateAndSelect — play functions pass in Storybook.
• Portal: tsc -b ✅, vite build ✅, vitest run apps/portal → 69 files / 471 tests ✅

[Cedric Vidal (cedricvidal)]

Original author: @github-actions[bot]

Test Results (Node.js 22)

test: Run #1995

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
2133	2133	0	0	0	0	0	2m15s

🎉 All tests passed!

Github Test Reporter

[Cedric Vidal (cedricvidal)]

Original author: copilot-pull-request-reviewer[bot]

Pull request overview

This PR improves Portal run/profile creation UX by always rendering the “MCP Servers” section (including an empty state) and enabling inline MCP server creation via a reusable form + dialog, so users can add an MCP server without leaving Submit Run / Profile flows.

Changes:

• Replaces conditional MCP section rendering with an always-visible section + empty-state message and “New MCP server…” action.
• Extracts the MCP server creation UI into a reusable McpServerForm and a McpServerCreateDialog wrapper for in-flow creation.
• Seeds/invalidates the ["mcp-servers"] query after creation and auto-selects the newly created server in the current flow.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
apps/portal/src/pages/SubmitRun.tsx	Always shows MCP section; adds inline MCP create dialog and auto-selects newly created server for the run.
apps/portal/src/pages/NewProfileVersion.tsx	Always shows MCP section; adds inline MCP create dialog and auto-selects newly created server for the version.
apps/portal/src/pages/CreateMcpServer.tsx	Refactors page to be a thin wrapper around the reusable McpServerForm.
apps/portal/src/components/ProfileCreateForm.tsx	Always shows MCP section; adds inline MCP create dialog and auto-selects newly created server for the profile.
apps/portal/src/components/McpServerForm.tsx	New reusable MCP server creation form extracted from the page implementation.
apps/portal/src/components/McpServerCreateDialog.tsx	New dialog wrapper providing scrollable body + sticky footer for in-flow MCP creation.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Cedric Vidal (cedricvidal)]

Original author: Copilot

The HTML pattern on the slug input currently requires at least 2 characters ([a-z0-9]...[a-z0-9]), but both SLUG_REGEX here and the API route validation allow a 1-character slug. This creates a client/server validation mismatch where the UI can block slugs that the backend accepts.

[Copilot]

[Copilot]

[github-actions]

Test Results (Node.js 22)

test: Run #173

Tests 📝	Passed ✅	Failed ❌	Skipped ⏭️	Pending ⏳	Other ❓	Flaky 🍂	Duration ⏱️
3181	3181	0	0	0	0	0	1m26s

🎉 All tests passed!

Github Test Reporter