feat: Onboarding Pill

[camielvs]

Description

Second PR in the onboarding series (stacked on #2421). Makes onboarding progress visible from anywhere in the app, not just the Learning Hub.

• Top-nav OnboardingNavPill — a compact Onboarding · X/Y pill that opens a popover with the full checklist. Mounted in both the v1 and v2 editor navs (hidden in tour mode). It hides itself once onboarding is complete or dismissed.
• Provider readiness gating — adds isReady / isResolved so the pill (and other surfaces) only render once backend state has actually resolved, avoiding a flash of default/incorrect state on load.
• Toasts — fire when a step is completed, when onboarding is fully complete, and an informational toast on dismiss ("you can resume from the Learning Hub").

No new routes or page-level changes — purely an always-available entry point plus the supporting provider state.

Stacked PR — base: Onboarding Checklist (#2421). Followed by the Onboarding Welcome Page (#2435).

Related Issue and Pull requests

Progresses https://github.com/Shopify/oasis-frontend/issues/622

Stacked on #2421 → followed by #2435

Type of Change

• New feature

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

1. With onboarding in progress, confirm the Onboarding · X/Y pill appears in the top nav in both the v1 and v2 editors.
2. Open the pill — the popover should show the same checklist as the Learning Hub.
3. Complete a step — a success toast should appear and the pill count should update.
4. Complete all steps — a completion toast should fire and the pill should disappear.
5. Dismiss onboarding — an info toast should appear and the pill should hide.
6. Confirm the pill does not flash on initial load before backend state resolves, and is hidden in tour mode.

Additional Comments

Gating is on isResolved (backend resolved + state loaded) rather than isReady, so the pill never renders against unresolved state.

[github-actions]

🎩 Preview

A preview build has been created at: 06-18-feat_onboarding_pill/9daead8

[camielvs]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat: Onboarding Welcome Page #2435
• feat: Onboarding Pill #2440 👈 (View in Graphite)
• feat: Onboarding Checklist #2421
• feat: Learning Hub - Milestone 2 #2416
• feat: Guided Tours Cleanup #2417
• feat: Guided Tours E2E Tests #2415
• feat: Guided Tours Completion Metrics #2412
• feat: Guided Tour - Secrets #2406
• feat: Guided Tours Framework (Secrets) #2405
• feat: Guided Tour - Subgraphs #2366
• feat: Guided Tours Framework (Subgraphs) #2365
• feat: Guided Tour - First Pipeline #2312
• feat: Guided Tours Framework (First Pipeline) #2347
• feat: Guided Tour - Navigating the Editor #2306 : 1 other dependent PR (#2307 )
• feat: Guided Tours Framework (Navigating the Editor) #2299
• feat: Guided Tours End Screen #2339
• feat: Guided Tours Ephemeral Pipelines #2334
• feat: Guided Tours Custom Navigation #2340
• feat: Guided Tours Foundation #2348
• feat: Learning Hub Guided Tours #2297
• feat: Learning Hub - Milestone 1 #2341
• feat: Learning Hub Tip of the Day #2292
• feat: Learning Hub Tip Browser #2291
• feat: Learning Hub Example Pipelines #2283
• feat: Learning Hub Documentation & FAQ #2282
• feat: Learning Hub Dashboard #2281
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[camielvs]

Pill + readiness gating + toasts look good. The isResolved = (backendReady || !configured) && isReady contract is a clean way to avoid the flash, and the completedRef baseline correctly suppresses toast spam on first load. Two inline notes.

[maxy-shpfy]

🤖 This is an AI-generated code review comment.

The new component passes raw Tailwind className values into Tangle UI primitives (Button and PopoverContent), including hard-coded sizing, spacing, rounded, and color classes. That bypasses the primitive API and makes the pill harder to keep consistent with the design system.

Suggestion: Move this styling behind a semantic primitive/variant or a co-located higher-level pattern for the onboarding pill, and avoid passing className directly to UI primitives. For the popover width, prefer a semantic prop/pattern or a dedicated wrapper rather than className="w-96".

Rule: CLAUDE.md UI rule: never pass className to a Tangle UI primitive; .cursorrules UI Primitives: prefer primitives and semantic props over raw utility styling.

[maxy-shpfy]

🤖 This is an AI-generated code review comment.

FTA reports OnboardingProvider.tsx cyclomatic complexity increased from 13 to 24 after this PR, crossing the >20 threshold. The new effect combines resolution gating, set diffing, completion handling, label lookup, and toast dispatch in one block, and it also depends on desiredSteps, a fresh object created during render, so the effect is scheduled on every render.

Suggestion: Extract pure helpers for completed-step calculation and newly-completed diffing, then keep the effect focused on side effects. Replace the object dependency with stable primitive dependencies such as individual step booleans or a derived primitive key.

Rule: static-analysis skill: flag cyclomatic complexity >20; docs/react-best-practices.md: dependencies should be stable.