Skip to content

fix(ui): keep MCP connection toasts above native dialogs - #5871

Merged
Astro-Han merged 2 commits into
apache:mainfrom
liuxiaocs7:fix/toasts-above-mcp-dialogs
Oct 3, 2026
Merged

Astro-Han merged 2 commits into
apache:mainfrom
liuxiaocs7:fix/toasts-above-mcp-dialogs

Conversation

@liuxiaocs7

@liuxiaocs7 liuxiaocs7 commented Sep 30, 2026 •

Copy link
Copy Markdown
Member

Summary

Fixes #5870

Testing an MCP connection while its detail dialog is open now shows a readable, dismissible result above the backdrop. Astryx's shared toast viewport uses a stable portal host inside the active native modal, then opens its popover; raising z-index or reopening a popover outside the modal leaves the notification obscured or inert. The host moves back when the dialog closes without remounting toast rows. Environments without native popover and modal-selector support retain the inline viewport.

The change extends the existing Astryx dependency patch (source and distributed JavaScript), documents its removal condition, and adds browser hit-testing, keyboard-focus and dismissal assertions to the existing MCP detail story.

Before After
Toast blurred behind dialog Toast readable above dialog

Dark-mode capture

Verification

  • Regression reproduced before the patch: the toast-center hit test returned the native dialog, and the new Storybook assertion failed. It passes with the patch.
  • Storybook build and 10 focused smoke jobs passed: all six Toast stories, MCP detail, removal confirmation, and editor in light/dark.
  • Additional Chromium checks passed in light/dark at 1280 × 900 and light at 720 × 900; the same toast remains connected and clickable after the detail dialog closes.
  • Full @maka/ui test suite: 694 passed. Full @maka/desktop test suite: 3070 passed, including the LinkeDOM and minimal DOM component tests that exposed the missing capability guard in the initial CI run.
  • npm run lint, npm run build, npm run typecheck, and both required knip workspace checks passed.
  • Formatting passed for all Git-tracked files. npm run format:check also scanned 16 pre-existing untracked research/probe files and reported formatting errors there; those files are excluded from this PR.
  • The full workspace test suite was not run locally; CI will run it.

AI use

  • No generative tool made a substantive contribution
  • Generative tooling made a substantive contribution

Tool(s) and scope: Codex implemented the patch and regression assertions, ran validation, and prepared this issue/PR on behalf of @liuxiaocs7. The commit includes Generated-by: Codex.

Checklist

  • Tests cover the change and fail without it
  • Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

  • Yes — described under Summary above
  • No

Move the shared toast portal host into the active modal so the MCP test result stays above its backdrop and accepts pointer and keyboard input. Preserve the host across dialog transitions and cover the production MCP detail flow in Storybook.

Fixes apache#5870

Generated-by: Codex
@github-actions github-actions Bot added the effort/M Under 500 readable lines label Sep 30, 2026
Detect popover methods and modal selector support before creating the modal-aware portal host. Retain inline rendering in LinkeDOM and minimal DOM environments so the provider does not query unsupported selectors or rely on missing DOM methods.

Validation: all 694 UI and 3070 Desktop tests pass; Storybook build and 10 focused toast/MCP smoke jobs pass.

Generated-by: Codex

@hqhq1025 hqhq1025 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed exact head 9dbae97160fb289f3a999dd501e3ae446092196e. The Astryx dependency patch now portals one toast viewport into the active native modal and reopens its popover after modal transitions (patches/@astryxdesign+core+0.6.3.patch, ToastViewport source and distributed JS hunks). It retains inline rendering when native popover or modal-selector support is absent. The MCP detail story exercises the production test-connection toast with hit-testing, focus, dismissal, and continued access to the dialog (apps/desktop/stories/module-hubs.stories.tsx:1256-1288). The patch removal condition is documented in patches/README.md:179.

I found no substantiated P0-P3 issue in the changed modal/top-layer, fallback, or Storybook paths. Node 24 clean npm ci and build:test passed, as did the focused UI toast tests (3/3). This exact head's hosted CI test and Windows recovery passed; the CI test job explicitly passed Build Storybook and Storybook smoke. Diff check and static merge against current main ed38ccbb were clean. I did not run a local native Electron window or verify other browsers' top-layer behavior; those remain outside this check. GitHub still requires its normal review gate; this comment is not merge approval.

Automated review notice: This comment was posted by an automated review agent operated by hqhq1025. It is not an independent human review and does not replace one.

@Astro-Han Astro-Han left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved at @Astro-Han's explicit request: no blocking findings in our automated reviews of this head, and CI is green.

@Astro-Han
Astro-Han merged commit a58495a into apache:main Oct 3, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

effort/M Under 500 readable lines

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(desktop): MCP connection result toast is obscured by the detail dialog

3 participants