Skip to content

Agentic UI: Add a first-run orientation guide - #4331

Open
bcotrim wants to merge 5 commits into
trunkfrom
stu-2016-add-orientation-guide
Open

Agentic UI: Add a first-run orientation guide#4331
bcotrim wants to merge 5 commits into
trunkfrom
stu-2016-add-orientation-guide

Conversation

@bcotrim

@bcotrim bcotrim commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

Implemented with Claude Code; Reviewed and tested manually.

Proposed Changes

Adds a first-run orientation guide to the agentic UI — a focused three-page modal that introduces the sidebar, Studio Code, and the live preview. It opens once on first arrival in the workbench and can be reopened anytime from Help ▸ Getting Started.

The copy adapts to the user:

  • New vs migrating (page 1): a fresh install is welcomed to Studio; someone coming from classic Studio is reassured their sites and files carried over.
  • Studio Code available vs not (pages 2–3): when chat is on, the guide teaches building by asking and the realtime preview; when it isn't — signed out, offline, or turned off in Settings → AI — it points to the site overview and the plain preview instead.

Seen-state persists (desktop app.json, browser localStorage) and is versioned, so it never nags but can be re-shown after a redesign.

Step 1 Step 2 Step 3
image image image
image image image

Testing Instructions

  1. Enable the Agentic UI beta feature and open a site's workbench.
  2. Choose Help ▸ Getting Started — the guide opens.
  3. Page through it: Back appears from page 2, the dots stay centered, the last button (Let's go) closes it. Confirm Esc and the ✕ Skip button also close it.
  4. Signed in with Studio Code on, pages 2–3 read Build by asking / See your site update in realtime.
  5. Turn agentic features off in Settings → AI (or sign out), reopen from Help — pages 2–3 now read Manage your site / See your site inline.
  6. Verify in both light and dark mode.

Pre-merge Checklist

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

@bcotrim bcotrim changed the title Agentic UI: Add a first-run orientation guide, replayable from Help Agentic UI: Add a first-run orientation guide Jul 24, 2026
@bcotrim
bcotrim marked this pull request as ready for review August 1, 2026 11:27
@wpmobilebot

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 13dc62f vs trunk

app-size

Metric trunk 13dc62f Diff Change
App Size (Mac) 1372.96 MB 1372.98 MB +0.02 MB ⚪ 0.0%

site-editor

Metric trunk 13dc62f Diff Change
load 1083 ms 1080 ms 3 ms ⚪ 0.0%

site-startup

Metric trunk 13dc62f Diff Change
siteCreation 6477 ms 6550 ms +73 ms 🔴 1.1%
siteStartup 2391 ms 2392 ms +1 ms ⚪ 0.0%

Results are median values from multiple test runs.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants