Agentic UI: Sites and Chat illustrations for the orientation guide

[shaunandrews]

Related issues

• Part of STU-2016
• Stacked on Agentic UI: Add a first-run orientation guide #4331 (base branch is stu-2016-add-orientation-guide); retarget to trunk once that merges.

⚠️ Visual change: needs human review in light + dark mode.

How AI was used in this PR

Built and iterated interactively with Claude Code.

Proposed Changes

Replaces the orientation guide's placeholder header art with animated illustrations that show the workbench rather than describe it.

• Page 1 (sites): a real-looking sidebar row where a cursor drifts in, hovers the site-overview button, then clicks the status button to start the site — stopped → starting → running — with the tooltips it would really show. Loops.
• Page 2, signed in (chat): a one-time playback of Studio Code — the composer types a prompt, sends it (dropping off-stage and flipping to its busy state) as the prompt becomes a user bubble, the reply streams in, and a tool call appears and keeps working. A subtle Replay control restarts it.

Both are theme-adaptive and respect reduced motion. They're built as a small reusable system (a Stage + Cursor and an id-keyed scene registry) so more scenes can be added without bespoke plumbing. The "manage your site" (overview) and preview illustrations remain placeholders for follow-up.

Testing Instructions

1. npm run cli:build:ui (the agentic UI isn't rebuilt by the normal dev watcher).
2. Enable the Agentic UI beta and open a site's workbench.
3. Help ▸ Getting Started — page 1 shows the sites animation.
4. Signed in with Studio Code on, page 2 shows the chat animation; the Replay control (top-left) restarts it.
5. Verify in light and dark, and with reduced motion enabled (scenes settle on a clean static frame).

Pre-merge Checklist

• TypeScript / lint / build pass for the changed files.
• Human visual review in light + dark mode.

[katinthehatsite]

A subtle Replay control restarts it.

I saw this button on the second page but it was not on the first page:

So it seems that we can replay the second page but not the first one? Should we have it on both pages? I see that the first page loops though. I am wondering if it would be more consistent to have either replay on both or loop on both. What do you think?

[katinthehatsite]

Nice, the illustration worked well for RTL ❤️

[shaunandrews]

So it seems that we can replay the second page but not the first one? Should we have it on both pages? I see that the first page loops though. I am wondering if it would be more consistent to have either replay on both or loop on both. What do you think?

I didn't have it on the first step because, as you said, it loops and the replay button wouldn't do anything obvious; showing it might make people think something is broken. I thought about have a pause/play control, but it just didn't seem necessary.

[katinthehatsite]

I didn't have it on the first step because, as you said, it loops and the replay button wouldn't do anything obvious; showing it might make people think something is broken. I thought about have a pause/play control, but it just didn't seem necessary.

Alright, makes sense 👍 In that case, I did not have any other concerns and it worked well across different modes (light and dark) and languages.