Repository navigation
feat(tour): add an app tour that walks through every part of the window - #46
Merged
Merged
Conversation
A spotlight glides from one part of the window to the next while a card says what each part is for: the sidebar, starting a session, Command center and Prompts, the three session views (including editing files in Files), the composer, Project terminals, the Details, Activity and Notes tabs, the command palette, Focus mode and Settings. It opens on its own once for anyone who has not seen it, including people updating from a build before the tour existed. Finishing or skipping saves layout.tourSeen. Anyone can replay it from Help -> Kriyon Tour, the command palette or Settings -> Layout. The tour is built in-house rather than on a library so it follows every theme through the existing tokens (ADR 0054). Co-Authored-By: Claude Opus 5.5 <[email protected]>
The tour's welcome card now opens with an illustration of the Visor mascot at a mission-control desk. The picture runs edge to edge across the top of the card, fades into it at the bottom and eases in with a slow zoom. The welcome card is wider so the picture has room, and the card slides back to its usual width on the next step. Co-Authored-By: Claude Opus 5.5 <[email protected]>
While the tour was up, Tab could move focus out of the card to controls under the scrim, so Enter clicked hidden buttons and typing reached the terminal. App shortcuts (⌘K, ⌘⇧K, ⌘, and others) still ran and opened their views behind the tour, where they took keys out of sight. When the tour ended, focus was left on nothing. Overlay's focus trap is now a shared useFocusTrap hook, and the tour card uses it: focus starts on Next, Tab wraps inside the card, and focus goes back where it was when the tour ends. The hook only gives focus back when it still holds it, so a dialog that opened on top (About, from the app menu mid-tour) keeps focus when the tour ends. The tour's capture-phase key handler now also holds every ⌘ or Ctrl shortcut until it ends. ADR 0054 now describes the keyboard handling the code actually does. Co-Authored-By: Claude Opus 5.5 <[email protected]>
The card re-spelled every property of the overlayPanel() recipe. It now spreads the recipe and sets only its own animation, placement and size, so a change to the floating panel look reaches the tour card too. Co-Authored-By: Claude Opus 5.5 <[email protected]>
Member
Author
Review and fix — pass 1Full review of the PR, then fixes on top (8c0daa8..e8ee580). 20 candidates scored, 4 kept and fixed; a re-review of the fixes found 1 more, also fixed. All checks green.
Fixed this pass
Checked by 4 finders (correctness, processes & lifecycle, tests, boundary & safety, contract, public text, architecture: step 5 re-check of the fixes, step 5 re-check of the fixes) · architecture review · scorer: 22 scored, 5 kept. Ready to merge, as far as this review can see. Nothing is open from this pass or any pass before it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
Kriyon now has an app tour. A spotlight glides from one part of the window to the next, and a card beside it says what that part is for. It has 14 steps: welcome, the sidebar, starting a session (⌘N), Command center and Prompts, the Structured / Session / Files tabs (including editing files yourself in Files), the composer, Project terminals, the Details, Activity and Notes tabs (each step opens its tab), the command palette (⌘K), Focus mode, Settings (⌘,), and a closing step.
layout.tourSeen, so it does not come back on its own.Why
New people see a terminal and a sidebar and find the rest of the window by accident: worktree sessions, the Command center, the three session views, Project terminals, Activity, Notes and the palette. People who already use Kriyon also wanted a way to see what they missed.
The tour is built in-house rather than on a library. driver.js and react-joyride bring their own styles, which would fight the theme seam (ADR 0007) across the twenty themes. Shepherd.js and Intro.js need a paid licence for commercial use, which does not suit an Apache-2.0 app. ADR 0054 records the decision. "App tour" is added to the glossary.
How I tested it
src/tour/placement.test.ts: which side the card goes and how it stays inside the window.src/state/tour.test.ts: walking the steps, finishing, starting only when unseen, and the tab steps.src/tour/AppTour.test.tsx: buttons, keys, the spotlight with a target present and absent, and the delayed first-run start.tourSeen, plus tests for the Help menu event, the palette item and the Settings button.Checklist
dev.pnpm checkpasses.🤖 Generated with Claude Code