Setup v3

[skyfallwastaken]

Summary of the problem

Setup was confusing people :(

Describe your changes

Makes setup less confusing?

Screenshots / Media

---

TO-DOs

• Make Codespaces blog post more prominent
• Finish Codespaces flow
• Finish VSCode flow

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​types/​canvas-confetti@​1.9.0
	npm/​canvas-confetti@​1.9.4

View full report

[greptile-apps]

Greptile Summary

This PR replaces the multi-step WakatimeSetup flow (4 separate routes/pages) with a single-page wizard at /setup that uses client-side step routing via URL query params (?step=…). All old routes are redirected to /setup, the onboarding mailer and setup notice links are updated, and a new system test covers the terminal and Codespaces paths.

• New setup wizard (Setup/Index.svelte): A client-side step machine rendered from a single controller action (users#setup), replacing the four old wakatime_setup_* actions with one consolidated action that passes all needed props upfront.
• OS detection improved: detect_setup_os now distinguishes Windows, macOS, Linux, and falls back to macOS, feeding the new four-tab terminal command screen.
• Backwards compatibility preserved: All old /my/wakatime_setup* paths redirect to /setup so bookmarked or linked URLs keep working.

Confidence Score: 5/5

Safe to merge — the change consolidates four server routes into one and moves step management to the client, with backwards-compatible redirects preserving all old URLs.

The controller simplification is clean, old routes redirect correctly, and the new system tests cover the two main new paths. Remaining gaps are cosmetic or minor coverage improvements that do not affect correctness.

No files require special attention for correctness; ScreenHeader.svelte has a dead prop and an {@html} pattern worth tidying before the component is reused more widely.

Important Files Changed

Filename	Overview
app/javascript/pages/Setup/Index.svelte	New single-page setup wizard with URL-param step routing; logic is clean and step derivation from page.url is safe.
app/javascript/pages/Setup/Finish.svelte	Fair Play Policy acknowledgement screen; pointer-events-none CTA bypass concern is tracked in a prior thread.
app/javascript/pages/Setup/TerminalCommand.svelte	Four-OS tab terminal command screen; macCmd reused for linux/wsl correctly; API key embedded in command is standard for this pattern.
app/javascript/pages/Setup/VsCodeSteps.svelte	VSCode extension install steps with zoomable screenshots; contains a profane inline comment on line 15.
app/javascript/pages/Setup/components/ScreenHeader.svelte	Required emoji prop is fully dead (image rendering is commented out); {@html html} renders trusted dev-authored markup but uses a generic prop name.
app/controllers/users_controller.rb	Consolidated four setup actions into one; OS detection improved to distinguish mac/linux; theme override for setup layout is clean.
config/routes.rb	Old wakatime_setup routes preserved as permanent redirects to /setup; new route uses as: :setup named helper correctly.
test/system/setup_test.rb	New system tests cover redirect, terminal, and Codespaces flows; VSCode download path (yes-to-programs branch) is not yet tested.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A([New user signs in]) --> B["GET /setup"]
    B --> C{skip_setup_flow?}
    C -- yes --> G[finish]
    C -- no --> D[welcome]
    D -- has editor --> E[terminal-choice]
    D -- no editor --> F[install-programs]
    E -- terminal --> H[terminal-command]
    E -- manual --> I(["/docs"])
    F -- can install --> J[vscode-download]
    F -- cannot install --> K[codespaces-link]
    J --> L[vscode-steps]
    K --> L
    H --> G
    L --> G
    G([finish - Fair Play Policy])

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A([New user signs in]) --> B["GET /setup"]
    B --> C{skip_setup_flow?}
    C -- yes --> G[finish]
    C -- no --> D[welcome]
    D -- has editor --> E[terminal-choice]
    D -- no editor --> F[install-programs]
    E -- terminal --> H[terminal-command]
    E -- manual --> I(["/docs"])
    F -- can install --> J[vscode-download]
    F -- cannot install --> K[codespaces-link]
    J --> L[vscode-steps]
    K --> L
    H --> G
    L --> G
    G([finish - Fair Play Policy])

Loading

_{Reviews (2): Last reviewed commit: "Merge branch 'setup-v3' of github.com:ha..." | Re-trigger Greptile}

[Copilot]

Pull request overview

This PR replaces the old multi-step /my/wakatime_setup onboarding with a new, simplified /setup flow and updates internal links/redirects accordingly to reduce setup confusion.

Changes:

• Introduces a new /setup Inertia/Svelte setup wizard (terminal + Codespaces + finish screens) and removes the legacy WakatimeSetup/* pages.
• Adds routing + link updates (including legacy redirects) so old setup URLs send users to /setup.
• Updates frontend dependencies/assets and styling (adds canvas-confetti, adds new emoji SVGs, switches default UI font styling to self-hosted Inter).

Reviewed changes

Copilot reviewed 41 out of 52 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
test/system/wakatime_setup_test.rb	Removes legacy system test for the old WakaTime setup UI.
test/system/setup_test.rb	Adds system coverage for the new /setup flow + legacy redirect behavior.
public/images/emojis/ms-tada.svg	Adds new emoji asset used by the finish screen.
public/images/emojis/ms-lightning.svg	Adds new emoji asset used by the terminal screen header.
public/images/emojis/ms-hugging-face.svg	Adds new emoji asset used by the “no editor installed” screen header.
public/images/emojis/ms-grinning.svg	Adds new emoji asset used by the welcome screen header.
public/images/emojis/ms-cool.svg	Adds new emoji asset used by the terminal choice screen header.
public/images/emojis/ms-computer.svg	Adds new emoji asset used by the VS Code download screen header.
public/images/emojis/ms-cloud.svg	Adds new emoji asset used by Codespaces screens.
package.json	Adds canvas-confetti + types for the finish animation.
bun.lock	Locks updated frontend dependencies (incl. canvas-confetti, Inertia bump).
config/routes.rb	Adds /setup route and redirects legacy /my/wakatime_setup* paths.
config/initializers/js_from_routes.rb	Exports setup route and removes old wakatime_setup exports.
app/controllers/users_controller.rb	Replaces old setup actions with a single setup action rendering Setup/Index and forces a dedicated setup theme/layout.
app/controllers/sessions_controller.rb	Sends new users (and relevant flows) to /setup instead of the legacy setup path.
app/views/onboarding_mailer/welcome.text.erb	Updates onboarding email link to /setup.
app/views/onboarding_mailer/welcome.html.erb	Updates onboarding email link to /setup.
app/views/layouts/inertia.html.erb	Minor layout adjustment (whitespace).
app/views/layouts/application.html.erb	Removes Google Fonts link block (aligning with self-hosted font direction).
app/javascript/pages/WakatimeSetup/Stepper.svelte	Removes old setup stepper component.
app/javascript/pages/WakatimeSetup/Step4.svelte	Removes old setup “finish” step page.
app/javascript/pages/WakatimeSetup/Step3.svelte	Removes old editor-specific setup step page.
app/javascript/pages/WakatimeSetup/Step2.svelte	Removes old editor picker step page.
app/javascript/pages/WakatimeSetup/Index.svelte	Removes old setup “step 1” page.
app/javascript/pages/WakatimeSetup/components/VideoTutorial.svelte	Removes old setup helper component.
app/javascript/pages/WakatimeSetup/components/NumberedStep.svelte	Removes old setup helper component.
app/javascript/pages/WakatimeSetup/components/HowDoIKnow.svelte	Removes old setup helper component.
app/javascript/pages/WakatimeSetup/components/HeartbeatPanel.svelte	Removes old setup helper component.
app/javascript/pages/WakatimeSetup/components/EditorCard.svelte	Removes old setup helper component.
app/javascript/pages/WakatimeSetup/components/CodeBlock.svelte	Removes old setup helper component.
app/javascript/pages/Setup/Index.svelte	Adds the new multi-step setup wizard (URL-driven steps).
app/javascript/pages/Setup/TerminalCommand.svelte	Adds OS-tabbed terminal command screen for automatic setup.
app/javascript/pages/Setup/CodespacesSteps.svelte	Adds Codespaces extension installation step walkthrough.
app/javascript/pages/Setup/LinkScreen.svelte	Adds reusable “go to this URL” screen (Codespaces + VS Code download).
app/javascript/pages/Setup/Finish.svelte	Adds finish screen with fair play policy confirmation + confetti.
app/javascript/pages/Setup/transitions.ts	Adds UI transition helper for step changes.
app/javascript/pages/Setup/components/ScreenHeader.svelte	Adds shared header component for setup screens.
app/javascript/pages/Setup/components/TwoChoiceLayout.svelte	Adds shared 2-choice layout for decision screens.
app/javascript/pages/Setup/components/TwoChoiceCard.svelte	Adds shared choice-card button component.
app/javascript/pages/Setup/components/SetupCodeBlock.svelte	Adds command code block with copy-to-clipboard.
app/javascript/pages/Setup/components/VideoTutorial.svelte	Adds setup-specific expandable YouTube tutorial component.
app/javascript/pages/WakatimeAlternative.svelte	Updates setup link to /setup.
app/javascript/pages/Users/Settings/Setup.svelte	Updates “setup guide” link to the new users.setup.path() route.
app/javascript/pages/Home/signedIn/SetupNotice.svelte	Updates “get set up” CTA to the new setup route.
app/javascript/pages/Docs/Index.svelte	Updates docs “Quick Start” link to /setup.
app/javascript/entrypoints/inertia.ts	Updates prefetch “likely next page” to Setup/Index.
app/javascript/components/Button.svelte	Tweaks active press scaling + adds motion-reduce handling.
app/assets/tailwind/main.css	Adds self-hosted Inter font-face + adjusts tracking defaults.
app/assets/tailwind/application.css	Sets Tailwind theme --font-sans to Inter stack.
.gitignore	Ignores plans/ directory.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.