Agentic UI: Rework the signed-out Studio Code prompt into a feature carousel with animated demos by shaunandrews · Pull Request #4767 · Automattic/studio

shaunandrews · 2026-09-03T20:01:59Z

Related issues

Related to STU-2402

How AI was used in this PR

Built with Claude Code, directed step by step (copy, layout, and each demo's storyboard); all output reviewed in the running app in light and dark.

Proposed Changes

Signed-out users opening Studio Code now see a single pitch — "Your personal WordPress expert" — instead of the tabbed Point/Ask/Review walkthrough.
Three animated demos in a carousel, one per signed-in benefit, each modeled on the real UI:
- Studio Code: a prompt is typed and sent, the agent works through tool calls with the real working indicator and elapsed timer, the reply streams in.
- Annotations: the camera opens on the preview's Annotate button, picks three elements on a mock blog with the real inspector popup, sends them to chat, and the agent's edits land in the preview while the chat pane works.
- Sync: the real push dialog (specific files: two plugins and a theme), then the sidebar row's syncing mark and the "Push complete" toast.
Each slide runs ~20–25 s and auto-advances; a ring around the active dot shows progress, a scrubber appears on hover at the bottom of the stage, and clicking the stage pauses/resumes. Demos are not interactive otherwise.
The mock site inverts against the app scheme (dark page in light mode, light in dark) so it reads as a site rather than more UI.
useTimeline (onboarding illustrations) gained an optional host-driven playback (pause, restart, seek, progress, end) — the onboarding guide's scenes are unchanged.

Testing Instructions

Sign out (Log out in App settings), open a site, and go to the chat view: the prompt replaces the composer.
Let all three slides play through; use the arrows/dots, scrub the bar at the bottom of the stage, click the stage to pause and resume.
Check both light and dark, and a narrow window (the stage scales down instead of clipping).
npm test -- apps/ui/src/components/agentic-signin-banner apps/ui/src/components/onboarding-guide

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

… animated demos

…w-we-encourage-users-to-log-in-with-their-dotcom # Conflicts: # apps/ui/src/components/site-overview-view/index.test.tsx

…ate API The signed-out carousel never advanced under reduced motion, could skip a slide when paused near the end, kept a stale progress ring on dots it had left, and ignored a click on the already-active dot after a scrub. Pausing was also mouse-only, though the deck auto-advances and loops. The two new demo scenes reached ThemeProvider through unlock( privateApis ), which is deprecated in @wordpress/theme 2.0 and logged on every render. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Signing in from the signed-out prompt left the feature carousel on screen until the user switched to another site and back. Two things kept it there. The auth listener removed the user query and invalidated it, but a sign-in can land while the first lookup is still in flight — the removal dropped the refetch and the stale request settled the cache with the pre-login answer. And the prompt watched for a signed-out to signed-in transition, which it never saw, because the reason for disabled agentic features dips through "auth pending" on the way. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

wojtekn

@shaunandrews it looks good in general. I fixed some minor issues and improved edge-case handling.

I'm wondering if we should make it a bit less aggressive:

the carousel state resets when switching sites - both the progress and the play/pause state. If you pause and switch sites, it starts playing again. Should we move that state above so it survives?
Should the carousel stop after one full pass? Right now it loops indefinitely. Stopping would be calmer, but someone who looks away may miss part of the carousel.

CC @Poliuk

wpmobilebot · 2026-09-08T13:53:37Z

📊 Performance Test Results

Comparing 7d5785b vs trunk

app-size

Metric	trunk	`7d5785b`	Diff	Change
App Size (Mac)	1456.65 MB	1447.59 MB	9.06 MB	🟢 -0.6%

site-editor

Metric	trunk	`7d5785b`	Diff	Change
load	1169 ms	1174 ms	+5 ms	⚪ 0.0%

site-startup

Metric	trunk	`7d5785b`	Diff	Change
siteCreation	7533 ms	7534 ms	+1 ms	⚪ 0.0%
siteStartup	3395 ms	2882 ms	513 ms	🟢 -15.1%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

Poliuk · 2026-09-09T16:44:40Z

I've been testing it. I like the approach, but I share @wojtekn's concerns about the carousel being infinite.

To fix it, I propose letting users dismiss the carousel so they can return to the site overview (which is still accessible from the icon next to the Site name in the sidebar, but I don't think that's enough). I think a "skip" button in the top-right corner should be enough. Ideally, we shouldn't show the carousel again on the specific sites the user has already pressed "skip" on.

I would also change the "Your Personal WordPress Expert" H1, we could re-use the same one we display in the Classic UI: There's a new way to build in Studio.

Other than that, LGTM

…way to Overview

shaunandrews · 2026-09-09T17:46:03Z

Thanks for the review's y'all! I made some updates:

I noticed the switch to disable agentic features regressed; its now been fixed.
The carousel now remembers the slide, pause state, and progress across remounts; so when switching sites the carousel appears to continue without starting over.
Tried an ending slide or something, but I prefer the looping.
Replaced the dots with three labels (Chat, Annotate, Sync) to help explain the demo's, and simplify the UI.
Cleaned up spacing and layout at narrow widths, tighter line-height for the heading, lighter shadow with hairline border for dark mode, and a bigger play button while paused.
Added a new "Switch to Overview" button and modal to let people disable agentic features and make Overview their default.
Added a new, simple nudge on the Overview screen to enable agentic features again.

Poliuk · 2026-09-09T18:37:37Z

Looking good.

Added a new, simple nudge on the Overview screen to enable agentic features again.

Let's not introduce a new concept, "agentic chat"; I think we can use "Studio Code" instead: "Turn on Studio Code". WDYT?

Rework the signed-out Studio Code prompt into a feature carousel with…

5886d0c

… animated demos

github-actions Bot assigned shaunandrews Sep 3, 2026

shaunandrews changed the title ~~Rework the signed-out Studio Code prompt into a feature carousel with animated demos~~ Agentic UI: Rework the signed-out Studio Code prompt into a feature carousel with animated demos Sep 4, 2026

wojtekn and others added 2 commits September 8, 2026 13:16

Merge remote-tracking branch 'origin/trunk' into stu-2402-re-think-ho…

dfc41f4

…w-we-encourage-users-to-log-in-with-their-dotcom # Conflicts: # apps/ui/src/components/site-overview-view/index.test.tsx

wojtekn marked this pull request as ready for review September 8, 2026 13:35

wojtekn approved these changes Sep 8, 2026

View reviewed changes

Keep the sign-in carousel's slide and pause state when switching sites

32261c5

shaunandrews added 3 commits September 9, 2026 13:35

Send signed-out users to Overview when agentic features are switched off

e2f5dff

Resume the sign-in carousel mid-slide, label the slides, and offer a …

3dda0cd

…way to Overview

Nudge users to turn agentic chat back on from the site overview

7d5785b

Navigation Menu

Uh oh!

Agentic UI: Rework the signed-out Studio Code prompt into a feature carousel with animated demos - #4767

Agentic UI: Rework the signed-out Studio Code prompt into a feature carousel with animated demos#4767
shaunandrews wants to merge 8 commits into
trunkfrom
stu-2402-re-think-how-we-encourage-users-to-log-in-with-their-dotcom

shaunandrews commented Sep 3, 2026 •

edited by wojtekn

Loading

Uh oh!

wojtekn left a comment

Uh oh!

wpmobilebot commented Sep 8, 2026 •

edited

Loading

Uh oh!

Poliuk commented Sep 9, 2026 •

edited

Loading

Uh oh!

shaunandrews commented Sep 9, 2026

Uh oh!

Poliuk commented Sep 9, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

shaunandrews commented Sep 3, 2026 • edited by wojtekn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

How AI was used in this PR

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

wojtekn left a comment

Choose a reason for hiding this comment

Uh oh!

wpmobilebot commented Sep 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

Poliuk commented Sep 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shaunandrews commented Sep 9, 2026

Uh oh!

Poliuk commented Sep 9, 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

shaunandrews commented Sep 3, 2026 •

edited by wojtekn

Loading

wpmobilebot commented Sep 8, 2026 •

edited

Loading

Poliuk commented Sep 9, 2026 •

edited

Loading

Poliuk commented Sep 9, 2026 •

edited

Loading