fix(ai): UI polish fixes for Jetpack MCP settings page by eoigal · Pull Request #48524 · Automattic/jetpack

eoigal · 2026-05-05T11:00:08Z

Fixes https://linear.app/a8c/issue/AIINT-392/jetpack-ai-mcp-settings-ui-polish-fixes

Proposed changes

Browser Back button: navigating to a sub-view (Read/Write/Setup) now uses pushState so the browser Back button returns to the MCP hub rather than leaving the AI admin page entirely. The breadcrumb "AI" link calls history.back() to pop the same entry, keeping history clean.
Setup unordered list: Quick setup instructions changed from <ol> (numbered) to <ul> (bulleted) for Claude and Claude Code clients. Added ul.jetpack-ai-mcp-setup__steps { list-style: disc } at top-level scope to restore bullets overridden by the wp-admin global reset.
Toggle help-text spacing: Reduce margin-top on .components-base-control__help from 8px to 4px for more even visual rhythm between tool toggle rows.
MCP tool sub-grouping: Align categories.js with wp-calypso — navigation, menus, and themes tools (API category sites) are moved to the Design card using tool ID prefix matching (wpcom-mcp/navigation-*, wpcom-mcp/menus-*, wpcom-mcp/menu-items-*, wpcom-mcp/theme-*, wpcom-mcp/themes-*). The Design card gains sub-categories: Themes, Patterns, Templates, Global styles, Navigation, Blocks (divided by CardDividers, no visible labels). Sites and Posts cards also get sub-category dividers.
Badge vertical alignment: Fix the "All enabled" badge icon+text being off-centre — set vertical-align: center on .jetpack-ai-mcp__badge-content to counteract the inline-flex baseline shift inside the Badge component.
Activity log URL: On self-hosted (non-Atomic) sites, the activity log link now points to the local wp-admin/admin.php?page=jetpack-activity-log page instead of the cloud.jetpack.com redirect.

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Go to wp-admin/admin.php?page=ai on a site with an AI account that has MCP access.
Browser Back button: Click "Read" or "Write" to navigate to a sub-view. Press the browser Back button — you should return to the MCP hub (not leave the page). Click "Read" again, then click the "AI" breadcrumb — you should also return to hub.
Setup unordered list: Click "Connect external AI agent", select "Claude" or "Claude Code". The Quick setup steps should be bulleted (unordered) with visible bullet points.
Tool sub-grouping: In the Read or Write views, the Sites card should have sub-groups divided by lines (Site info / Site settings / Media / Analytics). The Design card should have sub-groups for Themes, Patterns, Templates, Global styles, Navigation, Blocks. Navigation and menus tools should appear under Design → Navigation, not under Sites.
"All enabled" badge: In the hub view, verify the badge icon and text are vertically centred within the green pill.
Activity log link (self-hosted only): Verify the activity log link in the hub goes to the local Jetpack activity log page, not cloud.jetpack.com.
"Enable all" toggle: In Read/Write category headers, verify the "Enable all" label is vertically centred with the toggle switch.

github-actions · 2026-05-05T11:00:51Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2026-05-05T11:01:11Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

Jetpack plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

jp-launch-control · 2026-05-05T11:09:17Z

Code Coverage Summary

Coverage changed in 3 files.

File	Coverage	Δ%	Δ Uncovered
projects/plugins/jetpack/_inc/client/ai/main.jsx	0/30 (0.00%)	0.00%	12 💔
projects/plugins/jetpack/_inc/client/ai/mcp/categories.js	0/26 (0.00%)	0.00%	10 💔
projects/packages/my-jetpack/src/products/class-jetpack-ai.php	82/250 (32.80%)	-0.80%	2 ❤️‍🩹

Full summary · PHP report · JS report

_{Coverage check overridden by

I don't care about code coverage for this PR
Use this label to ignore the check for insufficient code coveage.
.}

- Fix browser Back button: use pushState/popstate so the Back button returns to the hub instead of leaving the AI page entirely - Change quick setup instructions from <ol> to <ul> in the Setup view - Fix 'All enabled' label vertical alignment in category headers - Tighten toggle help-text margin-top from 8px to 4px for more even visual rhythm between tool toggle rows Fixes AIINT-392. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Add NAVIGATION sub-category to Sites section (menus, navigation tools) - Rename SITES sub-category to SITE_INFO, ACCOUNT to PROFILE - Add BILLING as a separate Account sub-category - Move list_themes to SITE_SETTINGS sub-group via tool-ID overrides - Restore <ol> ordered list for quick setup instructions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…y log URL - Replace exact tool-ID map with prefix-based matching (wpcom-mcp/navigation-, wpcom-mcp/menus-, wpcom-mcp/menu-items- → Navigation sub-group; wpcom-mcp/themes-, wpcom-mcp/theme- → Site settings sub-group) - On self-hosted sites, link activity log to local wp-admin page (admin.php?page=jetpack-activity-log) instead of cloud.jetpack.com Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

… to Design card Port the exact same logic from wp-calypso categories.ts: - Navigation, menus and themes tools (category: 'sites') are moved to the Design display card via tool ID prefix matching in getDisplayCategory - Design card gains sub-categories: Themes, Patterns, Templates, Global styles, Navigation, Blocks — ordered and divided exactly as in calypso - Sites card sub-groups revert to: Sites, Plugins, Site settings, Media, Analytics - Account sub-groups revert to: Account, Notifications (billing maps to Account) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

wp-admin resets list-style to none globally; add ul.jetpack-ai-mcp-setup__steps { list-style: disc } to restore bullets for the unordered steps list. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

inline-flex aligns to the text baseline by default, which shifts the icon+text span down inside the Badge component. vertical-align: middle centres it correctly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Setting line-height:1 eliminates the descender space that caused the inline-flex span to drift off the visual centre of the Badge. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

The rule was nested inside .jetpack-ai-mcp-setup{} which compiled it to a descendant selector — no such ancestor exists in the markup, so the wp-admin ul { list-style: none } reset was winning. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

This PR polishes the Jetpack AI MCP settings admin experience by improving sub-view navigation behavior, refining tool grouping/presentation, and correcting the activity log destination for self-hosted sites.

Changes:

Update sub-view navigation to use history.pushState/popstate so browser Back returns to the MCP hub.
Refine MCP UI styling (setup list bullets, toggle spacing, badge/label alignment).
Adjust tool categorization/sub-grouping to align with wp-calypso and change the self-hosted activity log URL to the local wp-admin page.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes	Adds a changelog entry for the MCP settings UI polish work.
projects/plugins/jetpack/_inc/lib/admin-pages/class-jetpack-ai-page.php	Updates the activity log link behavior to use WPCOM on Atomic and local wp-admin on self-hosted.
projects/plugins/jetpack/_inc/client/ai/mcp/style.scss	Tweaks MCP settings page styling for badge alignment, toggle label alignment, help-text spacing, and list bullets.
projects/plugins/jetpack/_inc/client/ai/mcp/setup.jsx	Switches quick-setup steps from ordered to unordered lists.
projects/plugins/jetpack/_inc/client/ai/mcp/categories.js	Updates tool category/sub-category mapping and routes certain `sites` tools into the Design card via tool ID prefix matching.
projects/plugins/jetpack/_inc/client/ai/main.jsx	Implements pushState-based view navigation and breadcrumb Back behavior.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…et_long_description_by_usage_tier() Cast $tier to (int) before using as array key so that null returned by get_next_usage_tier() maps to 0 rather than triggering the PHP 8.1+ "Using null as an array offset is deprecated" notice. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tbradsha · 2026-05-06T19:18:32Z

null as well

@param

…tch statement Per review feedback: replace the sparse-keyed array + isset pattern with a switch on (int) $tier. Same behavior (null still maps to default), more readable. Also widen the @param to int|null since get_next_usage_tier() documents a null return. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

eoigal added the [Status] Needs Review This PR is ready for review. label May 5, 2026

eoigal self-assigned this May 5, 2026

github-actions Bot added [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ Admin Page React-powered dashboard under the Jetpack menu labels May 5, 2026

eoigal added the I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage. label May 5, 2026

eoigal and others added 3 commits May 5, 2026 17:55

eoigal force-pushed the aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes branch from 16ab6dc to 38a2728 Compare May 5, 2026 16:57

eoigal and others added 6 commits May 6, 2026 09:24

fix(ai): use unordered list for setup steps with explicit bullet restore

9668130

wp-admin resets list-style to none globally; add ul.jetpack-ai-mcp-setup__steps { list-style: disc } to restore bullets for the unordered steps list. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(ai): vertically centre badge content within the Badge line box

853f4dc

inline-flex aligns to the text baseline by default, which shifts the icon+text span down inside the Badge component. vertical-align: middle centres it correctly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(ai): collapse badge-content line-height to fix vertical alignment

a9fc332

Setting line-height:1 eliminates the descender space that caused the inline-flex span to drift off the visual centre of the Badge. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(ai): use vertical-align: center to centre badge content

21a299e

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

eoigal requested a review from Copilot May 6, 2026 10:20

Copilot started reviewing on behalf of eoigal May 6, 2026 10:20 View session

Copilot AI reviewed May 6, 2026

View reviewed changes

Comment thread projects/plugins/jetpack/changelog/aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes Outdated

Comment thread projects/plugins/jetpack/_inc/client/ai/mcp/style.scss

Comment thread projects/plugins/jetpack/_inc/client/ai/mcp/categories.js Outdated

eoigal and others added 3 commits May 6, 2026 19:01

Potential fix for pull request finding

7a8479c

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

00f98fc

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

github-actions Bot added the [Package] My Jetpack label May 6, 2026

tbradsha reviewed May 6, 2026

View reviewed changes

Comment thread projects/packages/my-jetpack/src/products/class-jetpack-ai.php Outdated

tbradsha reviewed May 6, 2026

View reviewed changes

Comment thread projects/packages/my-jetpack/src/products/class-jetpack-ai.php Outdated

Copy link
Copy Markdown

Contributor

tbradsha May 6, 2026

Choose a reason for hiding this comment

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

null as well

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ai): UI polish fixes for Jetpack MCP settings page#48524

fix(ai): UI polish fixes for Jetpack MCP settings page#48524
eoigal wants to merge 13 commits intotrunkfrom
aiint-392-jetpack-ai-mcp-settings-ui-polish-fixes

eoigal commented May 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 5, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented May 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tbradsha May 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

eoigal commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Does this pull request change what data or activity we track or use?

Testing instructions

Uh oh!

github-actions Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tbradsha May 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

eoigal commented May 5, 2026 •

edited

Loading

github-actions Bot commented May 5, 2026 •

edited

Loading

github-actions Bot commented May 5, 2026 •

edited

Loading

jp-launch-control Bot commented May 5, 2026 •

edited

Loading