feat(ui): CLI download buttons + desktop-app disambiguation in onboarding (#49)#51
Merged
Merged
Conversation
…o onboarding Non-technical users (e.g. recruiters) routinely install the wrong thing — confusing the Claude *desktop app* with the Claude Code *CLI* that pupila shells out to. The onboarding provider step now: - Shows a friendly label per provider (Claude Code, Codex CLI, Gemini CLI, opencode) from a new PROVIDER_META map in settings/types.ts. - Renders a Download ↗ link next to each *uninstalled* provider, aimed at that CLI's official install/quickstart docs (opens in a new tab, rel=noopener). - Adds a callout clarifying these are command-line tools run in a terminal — not desktop apps — and that Claude Code is the CLI, not the desktop app. - Adds a Re-check button that re-probes /api/llm-detect so a user who just installed a CLI in another terminal sees it without a page refresh (detection logic extracted into a reusable `probe` useCallback). - Drops the duplicate Provider/ProviderChoice/PROVIDERS defs in favor of the shared definitions in settings/types.ts. Closes #49.
docs.claude.com/.../quickstart 301-redirects to code.claude.com/docs/en/quickstart. Aim non-technical users straight at the live 200 URL so the Download link can't silently 404 if the old redirect is ever retired. (Review follow-up on #49.)
4 tasks
FranRom
approved these changes
May 28, 2026
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
2 participants
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.
Summary
Closes #49. Helps non-technical users (e.g. recruiters trying pupila) install the right tool during first-run onboarding.
The core pain: people confuse the Claude desktop app with the Claude Code CLI that pupila shells out to, and install the wrong thing — then nothing works. (This is also the misattribution called out in #50: the reporter blamed their LLM CLI subscription for a
spawn pnpm ENOENTfetch failure. #50 fixes the spawn + error copy; this PR fixes the install-the-wrong-thing confusion at the source.)Changes
ui/src/Onboarding.tsx,ui/src/Onboarding.module.css,ui/src/settings/types.ts,ui/src/Onboarding.test.tsx:Download ↗link aimed at its official install/quickstart docs —target="_blank"+rel="noopener noreferrer"./api/llm-detectso a user who just installed a CLI in another terminal sees it without a page refresh. Detection logic extracted into a reusableprobeuseCallback.PROVIDER_METAmap (label + installUrl) insettings/types.ts; status copy changednot on PATH→not installed.Onboarding.tsxnow importsProvider/ProviderChoice/PROVIDERSfromsettings/types.tsinstead of redefining them locally.Test plan
pnpm test— 413 passing (40 files), incl. 4 newOnboarding.test.tsxcases: disambiguation text, correct per-provider download hrefs + safe-tab attrs, link hides once installed, Re-check re-probes.pnpm run typecheck— clean (3 tsconfigs)pnpm run lint:ui-patterns— cleanpnpm run ui:build— builds; Onboarding chunk 4.82 kB gzipped, bundle within budget