refactor(desktop): rebuild MCP page with Astryx

[xuruiray]

Closes #1900

Summary

• rebuild the MCP page with Astryx Banner, Card, Item, and IconButton primitives
• reduce the header to one primary Add MCP action; keep JSON import inside the existing add dialog and move refresh into the command bar
• replace the permanent custom hero with conditional setup guidance that disappears after a server is configured
• preserve marketplace install/cancel/manage behavior and every configured-server state and action
• add responsive MCP layouts for wide, compact, and minimum-width windows

Scope boundary

This is a renderer-only product refactor plus test and visual evidence:

• no Runtime or production main-process changes
• no IPC or preload changes
• no credential handling changes
• no MCP catalog data changes
• no connection lifecycle or status mapping changes

The window.maka.mcp call sites are unchanged. The only files outside renderer, Storybook, and E2E assertions are test-fixture comments and the screenshots below.

Before / after

Marketplace

Before	After

Configured servers

Before	After

All four images use the same real Electron module-mcp fixture at 1280x900. The after images were recaptured from the exact current head after restoring the shared 900px content boundary.

Storybook coverage

• setup required
• marketplace
• connected and disabled servers
• connection failure
• narrow configured layout

These states cover light and dark themes plus the applicable wide, compact, and minimum-width viewports.

Verification

Current head 2f7c0e66d is rebased onto main@512efea09 and is mergeable without conflicts.

Local verification on the exact current head:

• npm run format:check — 1,491 files
• npm run lint — 2,427 files
• npm run typecheck
• Storybook production build
• MCP Playwright E2E — 6/6, including exact 900px wide alignment, 700/500px description ellipsis, editor scroll behavior, and add/discover/disable/import/delete flow
• MCP Storybook visual matrix — 36/36 renders (6 MCP stories × light/dark × 1280/700/500px), with no console/page errors or document overflow
• real Electron before/after capture review at 1280x900

npm test completed all affected production workspaces. Three pre-existing stderr-contract assertions fail under the local Node 22 runtime because node:sqlite emits its ExperimentalWarning (Storage: 1, CLI: 2); this PR has no Storage, CLI, Runtime, Core, or dependency diff. The same three assertions reproduce when those workspaces run alone.

GitHub CI is green on the exact current head: changes, typecheck, test_workspaces, both E2E shards, alignment_audit, storybook, aggregate test, and aggregate e2e all passed; the unaffected Runtime Host and Headless lanes were skipped by the impact plan.

The two unrelated smoke-harness false failures discovered during UI regression are tracked separately in #2096 and Draft PR #2101.

Overlap audit

No open PR modifies this MCP renderer scope. The follow-up in #2101 is limited to test infrastructure and has no production overlap with this PR.

[xuruiray]

@Astro-Han When you have a moment, could you please review this PR? It is rebased on main, CI is green, and the scope remains limited to the MCP page Astryx redesign without Runtime, IPC, credential, catalog, or connection-lifecycle changes. The PR includes real-app before/after evidence, Storybook coverage, and MCP E2E verification. Thank you.

[Astro-Han]

Thanks for the careful rebase and verification. The component choices are solid — TabList/Tab matches the skills page, Card+Item is the right shape for the market grid, and the Banner/EmptyState/Dialog usage is consistent. Two issues I'd like addressed before merge, plus a few nits.

1. Workspace width no longer aligns with the page header (regression)
mcp.css sets .maka-mcp-workspace to width: min(100%, 960px) while .maka-module-main-header stays at min(100%, 900px) (module-shell.css). At window widths ≥ ~1270px the workspace/card region extends ~30px beyond the header on each side — reproduced in the built app; the other module pages (e.g. Daily Review's .maka-daily-review-panel) pin content to 900px to match the header. Please revert to 900px — the header is shared across modules, so that's the low-risk fix.

2. Server description gets hard-clipped at compact widths
Around 700–500px window widths the .maka-mcp-server-description row overflows its container (measured 148px @ 700px, 348px @ 500px), and the new overflow: hidden on the server Card turns the previous visible bleed into hard clipping — no ellipsis. Item only auto-truncates string labels/descriptions; this one is a ReactNode carrying a <code> child. The compact E2E asserts main-overflow and centering but nothing about row-internal clipping. Please constrain the Item slot properly and add an assertion for it.

Nits (optional)

• The server list is a Card + hand-rolled div role="listitem" + Item + hand-written borders instead of Astryx List/ListItem. ListItem has no children slot, so the error Banner/Collapsible can't ride it — fine to keep the current structure, but worth a comment explaining why.
• .maka-mcp-command-bar could carry role="toolbar" + aria-label like the Daily Review toolbar.
• The market grid collapses to a single full-width column below ~920px window width (page height ~1900px+ with the current catalog) — pre-existing on main (min 320px vs 300px now), so not blocking, but it sits inside the PR body's "responsive MCP layouts" claim.

[xuruiray]

Thanks for the detailed review — I rebased onto main@512efea09 and addressed both blockers plus the first two low-risk nits in 2f7c0e66d:

• restored the MCP workspace to the shared 900px module boundary; E2E now asserts exact header/workspace edge alignment at 1280px and 1440px
• moved description truncation to the Astryx Item slot with descriptionLines={1}, constrained the nested ReactNode, and added a real Electron regression using a long endpoint at both 700px and 500px
• documented why the server row keeps the semantic listitem wrapper instead of Astryx ListItem
• added a localized accessible toolbar name
• recaptured both real-app after images from the exact head with the same module-mcp fixture at 1280x900

Local evidence on this head:

• format, lint, and typecheck pass
• MCP Playwright E2E: 6/6
• MCP Storybook visual matrix: 36/36 (6 stories, light/dark, 1280/700/500px)
• manual screenshot review confirms the 500px ellipsis is visibly painted rather than hard-clipped

The PR is Draft again while exact-head CI reruns. The full local npm test also exposed three baseline Node 22 stderr assertions (Storage 1, CLI 2) caused solely by the node:sqlite ExperimentalWarning; this PR has no affected-workspace or dependency diff, and all three reproduce in isolated workspace runs.

[Astro-Han]

LGTM, Merging!