Agents Manager: Add zoom toggle action and improve copy action by wellyshen · Pull Request #109764 · Automattic/wp-calypso

wellyshen · 2026-04-01T10:06:58Z

Proposed Changes

Add ZoomActionButton that toggles the Gutenberg editor canvas zoom on show_component tool messages
Convert useCopyAction to CopyActionButton component with copied state feedback
Add order to all message actions to control rendering position
Add shared unlock-private-apis and canvas-zoom utilities
Align pickers' active effect with BS
(Extra) Install missing deps

Why are these changes being made?

When the AI agent renders a site preview via show_component, users need a quick way to zoom the editor canvas in/out without navigating to the editor toolbar. Converting actions to component action types enables richer UI (reactive state, visual feedback) that button actions can't provide.

Testing Instructions

Check out this PR
Go to the site editor
The zoom action button should work as expected:
- The picker activated effect should be a blue outline

2026-04-02.6.13.29.mov

The copy action now has a copied state

2026-04-02.6.15.55.mov

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

Register a zoom-in/zoom-out message action on `show_component` tool messages that toggles the Gutenberg editor canvas between default and zoom-out mode using the block editor's private zoom APIs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-01T10:07:11Z

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174725

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174725&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174725&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174725&env=dashboard

Dashboard Live (CIAB) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174725&env=dashboard-ciab

matticbot · 2026-04-01T10:13:51Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

agents-manager
help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/am-zoom-action on your sandbox.

…blue Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Move zoom logic into reusable `canvas-zoom.ts` and create a shared `unlock-private-apis.ts` utility for accessing WordPress private APIs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Switch from button action to component action type using the updated agenttic-client package. Add ZoomToggleButton component with its own styles matching existing action button sizing. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…action - Use `useSelect` for reactive zoom state instead of imperative reads - Use component action type with `ZoomToggleButton` component - Dynamic label based on zoom state (Zoom in / Zoom out) - Style zoom button to match existing action buttons - Remove redundant `isZoomedOut` export from canvas-zoom utility - Update agenttic-client and agenttic-ui to 0.1.56 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Add CopyActionButton component with copied state feedback (check icon) - Clean up timer on unmount, handle rapid clicks - Remove dead .agents-manager-message-action-icon--copy style - Remove unnecessary label from zoom action registration Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Checkpoint (1), Feedback thumbs up/down (2-3), Zoom (4), Copy (5). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…1.57 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Adds richer, ordered message actions to the Agents Manager chat UI—most notably a zoom toggle for show_component previews in the Gutenberg editor and an improved copy action with “copied” feedback.

Changes:

Introduces a Zoom action (hook + button) that toggles the block editor canvas zoom for big_sky__show_component tool messages.
Refactors the copy action into a CopyActionButton component with “copied” state feedback.
Adds order to message actions (checkpoint/feedback/zoom/copy) and aligns picker active styling with Big Sky.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
yarn.lock	Updates lock metadata to reflect new peer deps.
packages/agents-manager/package.json	Adds peer deps for `@wordpress/block-editor` and `@wordpress/private-apis`.
packages/agents-manager/src/utils/unlock-private-apis.ts	Centralizes Gutenberg private API opt-in and re-exports `unlock`.
packages/agents-manager/src/utils/canvas-zoom.ts	Adds zoom in/out/toggle helpers using block-editor dispatch/select.
packages/agents-manager/src/hooks/use-zoom-action.ts	Registers a zoom toggle action for `show_component` messages.
packages/agents-manager/src/components/zoom-action-button/index.tsx	Implements the zoom toggle UI via a compact WP Button.
packages/agents-manager/src/components/zoom-action-button/style.scss	Styles the zoom action button pressed/hover states.
packages/agents-manager/src/hooks/use-copy-action.ts	Switches from inline action to component-based copy action.
packages/agents-manager/src/components/copy-action-button/index.tsx	New copy button with “copied” icon/label and timeout reset.
packages/agents-manager/src/components/copy-action-button/style.scss	Styles the new copy action button icon/focus behavior.
packages/agents-manager/src/hooks/use-feedback-action.ts	Applies deterministic `order` to feedback actions.
packages/agents-manager/src/hooks/use-checkpoint-action.ts	Applies deterministic `order` to checkpoint/undo action.
packages/agents-manager/src/components/orchestrator-chat/index.tsx	Registers the new zoom action hook.
packages/agents-manager/src/components/agent-dock/style.scss	Adjusts message-action icon sizing and picker active outline styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/agents-manager/src/hooks/use-zoom-action.ts

packages/agents-manager/src/components/zoom-action-button/index.tsx

packages/agents-manager/src/components/copy-action-button/index.tsx

These were declared as peerDependencies but most consuming packages don't provide them, causing 16 YN0002 warnings that fail CI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…ional Moving these to dependencies caused transitive react-dom conflicts. Instead, keep them as peer deps but mark optional so consumers that don't provide them won't trigger YN0002 warnings that fail CI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Moving these packages to regular dependencies fixes the CI yarn install failure (YN0060) caused by react-autosize-textarea (a transitive dep of block-editor) requiring react-dom ^0.14.0 || ^15.0.0 || ^16.0.0, which conflicts with the project's react-dom 18.3.1. As regular dependencies they no longer create a peer requirement chain that Yarn validates. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Move react and react-dom from peerDependencies to devDependencies to fix a Yarn peer dependency resolution error (YN0060) that caused CI to fail during yarn install. The error occurred because calypso@workspace:client depends on both agents-manager (which declared react-dom as a peer dep) and @wordpress/edit-post (which transitively depends on react-autosize-textarea@7.1.0 — an abandoned package declaring react-dom: ^0.14 || ^15 || ^16). Yarn merged these into one resolution context and found non-overlapping ranges. Placing react/react-dom in devDependencies avoids triggering Yarn's peer dependency validation across the merged context, while still making them available for builds and tests. This follows the pattern used by @automattic/block-renderer. Also fixes dependency hygiene: - Add missing runtime deps: @automattic/viewport, @automattic/zendesk-client, @wordpress/blocks, @wordpress/html-entities, history - Add missing dev deps: @testing-library/react, @testing-library/user-event, smooch (type-only import) - Move @wordpress/base-styles to devDependencies (SCSS-only import) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

wellyshen · 2026-04-03T16:00:13Z

CI failed because edit-post pulls react-autosize-textarea@7.1.0 (supports react-dom ≤16), which conflicts with React 18 when Yarn merges peer deps.

Moving them to devDependencies skips peer validation while keeping React for builds and tests.

@testing-library/user-event requires @testing-library/dom as a peer dependency. Without it, Yarn fails with YN0002 in CI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

wellyshen self-assigned this Apr 1, 2026

Welly Shen and others added 9 commits April 1, 2026 19:48

Agents Manager: Align variation picker active highlight with Big Sky …

f58da09

…blue Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge branch 'trunk' into add/am-zoom-action

81f1f75

Agents Manager: Extract canvas-zoom and unlock-private-apis utilities

9408b22

Move zoom logic into reusable `canvas-zoom.ts` and create a shared `unlock-private-apis.ts` utility for accessing WordPress private APIs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Agents Manager: Rename ZoomToggleButton to ZoomActionButton

9b3443d

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Agents Manager: Simplify cleanup effect in CopyActionButton

ee87f46

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Agents Manager: Add action ordering

7d2fa30

Checkpoint (1), Feedback thumbs up/down (2-3), Zoom (4), Copy (5). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

wellyshen changed the title ~~Agents Manager: Add zoom toggle action for editor canvas~~ Agents Manager: Add zoom toggle action and improve copy action Apr 2, 2026

Welly Shen and others added 5 commits April 2, 2026 18:21

Merge branch 'trunk' into add/am-zoom-action

04c74a8

Merge branch 'trunk' into add/am-zoom-action

05b051a

Update @automattic/agenttic-ui and @automattic/agenttic-client to v0.…

0613ea0

…1.57 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge branch 'trunk' into add/am-zoom-action

d292d4b

Merge branch 'trunk' into add/am-zoom-action

3d6f003

wellyshen marked this pull request as ready for review April 3, 2026 10:01

Copilot AI review requested due to automatic review settings April 3, 2026 10:01

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 3, 2026

wellyshen requested a review from a team April 3, 2026 10:02

Copilot started reviewing on behalf of wellyshen April 3, 2026 10:02 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

Copilot started work on behalf of wellyshen April 3, 2026 10:58 View session

Copilot finished work on behalf of wellyshen April 3, 2026 10:59

Welly Shen added 2 commits April 3, 2026 20:06

Merge branch 'trunk' into add/am-zoom-action

c5c9ad7

Improve readability

58576c8

wellyshen force-pushed the add/am-zoom-action branch from 35ad905 to 58576c8 Compare April 3, 2026 12:08

Welly Shen and others added 6 commits April 3, 2026 20:48

Move block-editor and private-apis from peerDependencies to dependencies

37031b6

These were declared as peerDependencies but most consuming packages don't provide them, causing 16 YN0002 warnings that fail CI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge branch 'trunk' into add/am-zoom-action

30f0dc1

Merge branch 'trunk' into add/am-zoom-action

f7eb9fb

Welly Shen and others added 2 commits April 4, 2026 00:01

Merge branch 'trunk' into add/am-zoom-action

a708302

Agents Manager: Add missing @testing-library/dom peer dep

4a08af8

@testing-library/user-event requires @testing-library/dom as a peer dependency. Without it, Yarn fails with YN0002 in CI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Agents Manager: Add zoom toggle action and improve copy action#109764

Agents Manager: Add zoom toggle action and improve copy action#109764
wellyshen wants to merge 25 commits intotrunkfrom
add/am-zoom-action

wellyshen commented Apr 1, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 1, 2026 •

edited by matticbot

Loading

Uh oh!

matticbot commented Apr 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wellyshen commented Apr 3, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

wellyshen commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Apr 1, 2026 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

wellyshen commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wellyshen commented Apr 1, 2026 •

edited

Loading

github-actions bot commented Apr 1, 2026 •

edited by matticbot

Loading

matticbot commented Apr 1, 2026 •

edited

Loading

wellyshen commented Apr 3, 2026 •

edited

Loading