fix(ui): redesign the MCP page on Astryx primitives

[Astro-Han]

Problem

mcp-page.tsx:4 takes Collapsible, EmptyState, Item, Tab, TabList from Astryx, then eleven @maka/ui components (Badge, IconButton, RadioList, Selector, Switch, TextArea, TextInput, PageHeader, …) on the next lines, backed by styles/module-pages/mcp.css at 468 lines. Visible consequences: the setup panel is permanent chrome holding three cards, which is then followed by a second card grid for the marketplace; the three header actions (刷新 / JSON 导入 / 添加 MCP) each use a different button treatment; the 远程 HTTP setup card renders visually inert next to its two siblings.

Desired outcome

One connector-management structure. Setup guidance appears conditional on the state that needs it, not as permanent chrome. Marketplace discovery and installed-connector management stay visually distinct without stacking framed regions. Header keeps at most one primary action. Astryx primitives supply geometry; mcp.css shrinks to layout and product-only chrome.

Verification

Storybook states for setup-required, marketplace, installed, connection-failed and narrow; live-app before/after; existing MCP E2E journeys green.

Note

Supersedes the MCP section of #1452, restated for the post-Astryx component vocabulary.

[xuruiray]

@Astro-Han I would like to take this issue.

I will keep the PR focused on the page-level Astryx redesign described here:

• consolidate setup guidance, discovery, and configured-connector management without changing MCP runtime behavior, IPC contracts, credentials, catalog data, or connection lifecycle;
• preserve the existing user actions and states while reducing stacked chrome and keeping at most one primary header action;
• validate setup-required, marketplace, installed, connection-failed, and narrow states with Storybook, live-app before/after evidence, and the existing MCP E2E journeys.

I will start from the current main and open a Draft PR for product and code review.

[Astro-Han]

Assigned!