build(ui): migrate to React 19 and Primer React 38

[SamMorrowDrums]

Summary

Migrate the four MCP Apps views to React/React DOM 19.3.0, their 19.3.0 types, and Primer React 38.40.1. Replace removed styling APIs rather than adding the temporary styled-components compatibility package.

Why

Follow-up to #3370, which deferred these major upgrades for separate visual review. Based on latest main at cd50233; no issue closed.

What changed

• Upgrade React, React DOM and their types to 19.3.0; upgrade Primer React to 38.40.1 and add the directly imported Primer primitives 11.10.0.
• Replace every removed Box and sx/styled-system call site with native HTML/styles and CSS Modules for Markdown and nested selectors. Preserve layout scales, raw direct gap values, truncation, custom-label colors and Markdown interactions.
• Load bundled primitive CSS and light/dark themes; use the CSS-based ThemeProvider from @primer/react/next instead of the deprecated JavaScript theme provider.
• Replace deprecated Flash with accessible critical Banner components; augment react/jsx-runtime for the Markdown custom elements. Existing createRoot, refs and function defaults already meet React 19 requirements; no propTypes/legacy React DOM APIs were present.
• Document the UI workflow in CONTRIBUTING.md. No changes to @modelcontextprotocol/ext-apps (1.7.5), TypeScript (5.9.3), @types/node (25.9.9), or their lock entries.

Visual review

Captured baseline and upgraded builds in Chrome with a local JSON-RPC MCP Apps host fixture, using the actual built single-file HTML. Compared all four views in light/dark themes at 720px and 360px, plus Markdown previews, metadata menus, submitted success/error states and narrow custom issue fields. No new horizontal overflow or browser errors/warnings in the exercised flows.

Expected differences: Primer 38's token colors/borders and label typography differ slightly, especially in dark mode. Error messages now use a critical Banner with an icon and accessible region instead of deprecated Flash. Layout, form data, editor behavior and submission payloads remain unchanged.

Each comparison has before on the left, after on the right; rows are labeled by view. Screenshot data is synthetic and all tool calls are mocked.

All four views — light, 720px

All four views — dark, 720px

All four views — light, 360px

All four views — dark, 360px

Markdown previews — all three form views, light and dark

Error presentation — Flash to Banner

Submitted success states — all three form views

Metadata menus and narrow custom issue fields

Remaining risks

Draft intentionally pending human visual sign-off. Browser coverage used mocked tool responses in Chrome, not live authenticated VS Code/other MCP hosts or Firefox/Safari; host-specific rendering/focus should be checked before marking ready. The pre-existing Vite warning about a future native config loader and __dirname remains; Vite is not changed here. The UI package has no existing npm test script.

Upgrade references reviewed: React 19 upgrade guide, Primer 37/38 changelog.

MCP impact

• No tool or API changes — UI dependencies, styles and error presentation only; Go tool schemas, resource URIs and protocol integration are unchanged.
• Tool schema or behavior changed
• New tool added

Prompts tested (tool changes only)

• N/A: no tool changes. Browser fixtures exercised profile, issue create, PR create and PR edit views.

Security / limits

• No security or limits impact — permissions, CSP and external resource policy unchanged; CSS/JS remain bundled in each HTML resource. npm audit reports zero vulnerabilities.
• Auth / permissions considered
• Data exposure, filtering, or token/size limits considered

Tool renaming

• I am renaming tools as part of this PR (e.g. a part of a consolidation effort)
  • I have added the new tool aliases in deprecated_tool_aliases.go
• I am not renaming tools as part of this PR — all names unchanged.

Note: if you're renaming tools, you must add the tool aliases. For more information on how to do so, please refer to the official docs.

Lint & tests

• Linted locally with ./script/lint — GOTOOLCHAIN=go1.26.8 script/lint passed with 0 issues (installed Go 1.27 is too new for the pinned linter).
• Tested locally with ./script/test — GOTOOLCHAIN=go1.26.8 script/test passed, including the full Go race suite with the upgraded UI built.

Additional evidence:

• cd ui && npm ci && npm run typecheck && npm run build && npm audit — passed; all four self-contained HTML resources emitted, zero vulnerabilities.
• cd ui && npm ls --all — passed; no invalid peer dependencies.
• GOTOOLCHAIN=go1.26.8 go test ./pkg/github -run 'TestRegisterUIResources_ReadableViaClient|TestNewMCPServer_RegistersUIResources' -v — passed without skips; all four upgraded UI resources are embedded and readable through the Go MCP server.
• Session-local Playwright capture.mjs before/after — passed: 16 view/theme/width combinations and 12 preview screenshots per build.
• Session-local Playwright interactions.mjs before/after — passed: all three forms in both themes, exact bold-toolbar output, list continuation/exit, preview, metadata selections, submitted title/body/reviewer/label payloads, success/error states and narrow custom fields. Upgraded inactive-tab hover and Banner region assertions also passed.
• git diff --check — passed.
• Live PAT-dependent e2e tests were not run. No tool/toolset definitions changed, so toolsnap/doc generation is not applicable.

Docs

• Not needed
• Updated (README / docs / examples) — CONTRIBUTING.md documents React 19/Primer 38 styling, build and visual-review requirements.

[Copilot]

Copilot review overview

🟡 Changes recommended

Native numeric gaps incorrectly collapse Primer spacing, and reviewer-label backgrounds use an invalid CSS color token.

Review effort: Balanced
Findings: 5

Open (5)

• Loading spinner-to-text gap shrinks from 8px to 2px · New
• Issue success-card gaps shrink from 8px to 2px · New
• Success-card gaps shrink from 8px to 2px · New
• Success-card gaps shrink from 8px to 2px · New
• Footer gap shrinks from 4px to 1px · New

What changed in this PR

Migrates all four MCP Apps views to React 19 and Primer React 38 without retaining styled-components compatibility.

Changes:

• Upgrades React, Primer, types, and lockfile dependencies.
• Replaces Box/sx styling with native styles and CSS Modules.
• Adopts CSS themes and accessible critical banners.

File	Description
CONTRIBUTING.md	Documents UI development and visual-review workflow.
ui/​package.json	Upgrades React and Primer dependencies.
ui/​package-lock.json	Locks the upgraded dependency graph.
ui/​src/​styles.module.css	Adds Markdown and truncation styles.
ui/​src/​components/​AppProvider.tsx	Loads CSS themes and the new provider.
ui/​src/​components/​FeedbackFooter.tsx	Replaces Box styling.
ui/​src/​components/​MarkdownEditor.tsx	Migrates editor styling and JSX types.
ui/​src/​apps/​get-me/​App.tsx	Migrates profile-view styling.
ui/​src/​apps/​issue-write/​App.tsx	Migrates issue form and banners.
ui/​src/​apps/​pr-write/​App.tsx	Migrates PR creation UI.
ui/​src/​apps/​pr-edit/​App.tsx	Migrates PR editing UI.

Files not reviewed (1)

• ui/package-lock.json: Generated file

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[SamMorrowDrums]

Review follow-up: fixed the valid reviewer-label background issue mentioned in the review overview in ad936a1. Both PR forms now use var(--bgColor-inset) rather than the invalid inline CSS value canvas.inset. Browser checks confirmed the intended backgrounds in both themes at 360px and 720px, with no horizontal overflow.

The five gap threads have been replied to and resolved: their premise that bare Box gap props were theme-scaled is incorrect for Primer 36. The newly effective small native gaps are intentionally retained following visual review; the temporary local removals were fully undone and never committed.

Validation passed: cd ui && npm ci, npm run typecheck, npm run build, npm audit (zero vulnerabilities), GOTOOLCHAIN=go1.26.8 script/lint, GOTOOLCHAIN=go1.26.8 script/test, and the targeted embedded-resource tests.