Skip to content

polish(desktop): illustrated tutorial panel with a progress track - #3383

Merged
janicduplessis merged 3 commits into
mainfrom
feat/3376-tutorial-panel-visuals
Oct 10, 2026
Merged

janicduplessis merged 3 commits into
mainfrom
feat/3376-tutorial-panel-visuals

Conversation

@janicduplessis

@janicduplessis janicduplessis commented Oct 10, 2026 •

Copy link
Copy Markdown
Collaborator

Description

Second step of #3376. #3379 shipped the tutorial illustrations; this PR shows them in the Desktop tutorial panel, with a progress track. It reads no new Stim data: everything comes from the TutorialSnapshot the panel already gets. It builds on #3380's Next button and step copy.

Solution

There are three commits:

  • fix: end each tutorial marker on its own last frame: each step marker in the timeline used to end on the first frame of the next segment. A play-once step would then hold someone else's pose, and the last step held an empty frame. The generator now ends each marker one frame earlier, and the JSON is regenerated.
  • Step illustration: TutorialIllustration sits under the panel header and shows the current step. When the timeline has a from>to transition it plays it, then loops the step's marker, or plays it once when stim.modes says once (Finish, Delete). Any other change, such as a skip or a restart, cross-fades over 0.25 s.
    • It pauses on the step's .still frame under Reduce Motion and while the window is hidden (the existing pausesHiddenFrames preference), and on the step's rest pose when the step failed, so a failed build never shows a check.
    • Fixture renders draw the still frame with the main-thread engine, because ImageRenderer can't capture an NSView.
  • Progress track: a row of nodes under the header, next to the existing "n of N" count. Required steps are solid rings and optional steps smaller dashed rings. A done node is a green check, a skipped one a dash, a failed one red, the current one has a dot. When a step becomes done, its node plays the stim-step-done badge once. Under Reduce Motion, and on the first snapshot after launch (when resuming can complete several steps at once), it doesn't play.

Light, from the left: Get the Test App, Make a Change, Parallel, Finish, Delete, and a failed build:
Tutorial panel, light

Dark:
Tutorial panel, dark

Test plan

  • STIM_TUTORIAL_SHOTS=<dir> swift test --filter TutorialScreenshotTests renders every step and variant in both schemes; the screenshots above come from it.
  • stim macos from apps/desktop builds and launches with a seeded tutorial record, and stim logs --errors is empty.
  • Not done yet: watching the live animation in the running app (Core Animation engine). This Mac's screen was locked, so screenshots and accessibility snapshots failed. lottie-ios picks Core Animation for these files with no fallback warnings. I'll check transitions, loops, play-once and Reduce Motion on screen before marking this ready.

Refs #3376

@janicduplessis

Copy link
Copy Markdown
Collaborator Author

Review: clear. Marker ends stop one frame before the next segment (generator rerun leaves git clean), the playback modes (bridge marker, loop vs once from stim.modes, reduce-motion/hidden/failed pauses, cross-fade fallback) and the track's first-snapshot-only badge are correct, all three commits fit the polish definition, and swift build -Xswiftc -warnings-as-errors, format and ASCII checks pass. Live Core Animation playback is unverified, as disclosed.

@janicduplessis janicduplessis added the review: ai-approved A fresh AI review found nothing left to fix label Oct 10, 2026
@janicduplessis

Copy link
Copy Markdown
Collaborator Author

Core Animation playback was not watched live: the Mac's screen was locked, so window capture, agent-device screenshots and accessibility snapshots all failed. lottie-ios selects the Core Animation engine for these files with no fallback warnings, and the fixture renders cover every step's still frame. Merging without the on-screen check, per the maintainer.

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

Labels

area: desktop apps/desktop area: website website/ review: ai-approved A fresh AI review found nothing left to fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant