Skip to content

AI prompt, guided tour and on-boarding improvements#2868

Merged
abose merged 19 commits intomainfrom
ai
Apr 30, 2026
Merged

AI prompt, guided tour and on-boarding improvements#2868
abose merged 19 commits intomainfrom
ai

Conversation

@abose
Copy link
Copy Markdown
Member

@abose abose commented Apr 29, 2026

No description provided.

abose added 15 commits April 29, 2026 23:25
…tion tooling

Tells Claude that the live preview supports both HTML/CSS/JS/SVG and
Markdown, frames the preview tools as active-iteration debugging
(takeScreenshot, execJsInLivePreview, resizeLivePreview, controlEditor,
getEditorState), and notes that the preview normally follows the active
file — only check livePreviewFile if a screenshot mismatches the recent
edit, to avoid defensive round trips for the rare pinned case.
Expose reload to the AI in two complementary forms:
- controlEditor gains a reloadLivePreview operation that runs
  CMD_RELOAD_LIVE_PREVIEW (also broadcasts to popped-out tabs).
- takeScreenshot gains a reload boolean — reloads then captures in one
  tool call, saving a round-trip when the AI is about to screenshot
  anyway. The controlEditor op description hints at this combined call.

Also adds the AI_CHAT_SURPRISE_ME_USER_MSG string used by the pro
Surprise Me onboarding flow.
Tells the AI to default to real <img> tags so the user can swap,
inspect, and resize images in the editor, only falling back to
background-image when an effect genuinely requires it.
Upgrade flows can boot Phoenix with the sidebar hidden (restored from a
previous session), which hides the AI tab (step 2) and the new-project
button (step 3) the tour points at. Because both are visibility:hidden
rather than display:none, getBoundingClientRect still returns positive
dimensions, so the existing rect-zero gate in _trackTarget didn't catch
this — the overlay would silently point at invisible UI.

Verified the failure mode and the fix in a connected electron instance:
the AI tab and new-project button switch from visibility:hidden to
visibility:visible after SidebarView.show().
The fourth step points at the LP panel's Edit Mode button. Before it
runs, the tour ensures the welcome project is open, the active editor
shows phoenix-pro.html (preferred) or index.html, and the LP panel is
visible — each branch a no-op when already in that state. Falls back
to completing the tour if the button still can't be located (custom
server, unsupported file).

Step 3's Dismiss button becomes Next, advancing to step 4 where the
new Dismiss lives. CURRENT_TOUR_VERSION stays at 1 — only users who
haven't completed the tour will see the new step.
Replaces the centered icon/title/message layout with a left-aligned
header (Design, fix and build faster), the existing video card,
three info cards (Generate Layout / Fix Bugs / Suggest improvements
with FA icons table-cells-large, bug-slash, wand-sparkles), the
desktop-only body copy, and a full-width CTA.

Strings: adds AI_CHAT_PLACEHOLDER_* keys (title, subtitle, three
card title/desc pairs); reuses AI_CHAT_DESKTOP_ONLY for the body to
avoid duplicating what the cards already say. Drops the now-unused
AI_CHAT_TITLE_NO_AI from the root locale (other locale files will
re-sync via GitHub Actions).

CSS: new .ai-placeholder column styles with min-width:0 and explicit
white-space:normal so text wraps when the sidebar is narrow (the
panel inherits white-space:nowrap from chat-message defaults). The
CTA gets a 14px-padded, 8px-radius treatment that matches the cards
and beats the shared .btn.btn-primary override; the shared override
itself is widened to also re-apply the standard primary look inside
.ai-placeholder.
proTrialStartDialogDismissed is guaranteed to resolve on every boot
path (including builds where the dialog isn't shown), so the 60s
fallback was dead code. Just await the deferred.
Replaces the cross-fade-only transition between feature carousel slides
with a slide-and-fade. Each slide lives at one of three transform
positions (translateX(100%) default, 0 when active, -100% when .is-left)
so the outgoing slide can animate left while the incoming one comes in
from the right (and vice versa for backward navigation). The .is-active
rule is defined after .is-left so a slide flipping from parked-left to
active animates directly from -100% to 0, no intermediate jump.

Same treatment is applied to .feature-info-slide so the text block
below the video animates in lockstep with the stage.
PROMO_CARD_2 reframes the AI value-prop as 'sees what you see' rather
than 'sees your UI', emphasizing exploration/build/fix tasks. PROMO_CARD_3
swaps 'site' for 'page' to match the term used elsewhere in the dialog.
AI_CHAT_LOGIN_TITLE: 'Sign In to Use AI' → 'Sign in to get started with AI'.
Used by the new login UI which reuses the placeholder card layout, so
the title pairs with the placeholder header to read as an inviting
call-to-action rather than a gating message.
abose added 4 commits April 29, 2026 23:33
The CLI-not-installed and Claude-needs-setup screens now share the
.ai-placeholder layout with the login/placeholder screens — left-
aligned header, intro video, body copy, full-width CTA, footer help
link — for one consistent visual language across the four 'AI gated'
surfaces.

Per designer spec, the primary CTAs on these setup-on-dark screens
flip from blue to a white pill (kept blue on the login/placeholder
to keep the desktop-app upsell action distinct). Selector chains
.btn.btn-primary.ai-placeholder-cta-on-dark to beat the dark-mode
.dark .btn.btn-primary !important rule that would otherwise force
blue.

Adds a .ai-placeholder-cta-secondary outlined style for the
'Add Custom Provider' option on the setup screen, plus a centered
'Need Help? Learn More' footer link.

Strings: drops the inline learn-more anchors in CLI_INSTALL_MSG /
CLAUDE_LOGIN_MSG (footer link replaces them), updates
INTRO_CONFIGURE_DESC to match the new subtitle copy, adds
SETUP_NEED_HELP and SETUP_LEARN_MORE.
@sonarqubecloud
Copy link
Copy Markdown

@abose abose merged commit 1e26a90 into main Apr 30, 2026
14 of 21 checks passed
@abose abose deleted the ai branch April 30, 2026 01:49
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.

1 participant