feat(dashboard): zero-friction onboarding page

[aschkanAH]

Summary

Adds a /onboarding route shown immediately after native registration. The page renders inside the existing authenticated app shell (sidebar retained) but uses a slim header that only carries a "Skip to Dashboard" affordance.

Headline: "From zero to inference in seconds."
Subheading: "Your workspace is fully provisioned. Run a sample payload right from your browser to see Doubleword in action."

Routing & layout

• New lazy-loaded route /onboarding, gated by ProtectedRoute so unauthenticated users get bounced to login.
• The route deliberately does not wrap with <AppLayout> because the spec asks for a header that only contains "Skip to Dashboard". Instead the component composes SidebarProvider + AppSidebar + SidebarInset directly so the standard sidebar is retained but the header is bespoke.
• RegisterForm post-signup landing logic is layered:
  1. Explicit ?redirect= (e.g. org invite acceptance) wins.
  2. Server-driven onboarding_redirect_url (when the user cache entry populated by AuthProvider.checkAuthStatus carries one) — AuthProvider initiates a hard window.location.href redirect for that case, so we deliberately do not call navigate() in the form handler to avoid racing the pending hard nav.
  3. Default to /onboarding for the zero-friction flow.
• "Skip to Dashboard" and the post-success redirect both navigate to /models via react-router rather than app.doubleword.ai/models so this works on self-hosted/non-prod origins.

Interactive sections

1. Live API key — On mount, calls the existing useCreateApiKey hook to mint a real realtime key against currentUser.id. Failures are surfaced inline (with a hint to use the API Keys page) and don't block the rest of the flow. Copy uses the shared copyToClipboard util and flips to a checkmark for 2s.
2. Workload runner — Three coupled toggles:
   • Async (default) vs Batch — swaps the cost copy ($1.87 / 25%, $1.25 / 50%) and the rendered payload (single JSON vs three-row JSONL).
   • Browser vs Terminal — Browser mode shows the JSON/JSONL payload + a "Run Now" button. Terminal mode shows Python/cURL snippets with the freshly-minted key pre-injected, plus a "Listening for your request…" indicator that flips to success when clicked.
   • Python vs cURL — only relevant in Terminal mode.
   • "Run Now" cycles through idle → running → success on a 2.5s timer (per spec). Behind the scenes it fires a real upload + useCreateBatch so a job actually appears in the dashboard the user is about to land on. The timer-based UX path is independent of the network call so the redirect is predictable even when the upload is slow.
   • Either success state schedules a 2s redirect to /models.
   • Payloads are built as JS objects and serialized via JSON.stringify; model alias and API key are escaped via JSON.stringify inner-string form before being interpolated into Python and cURL snippets, so aliases containing quotes / backslashes / control characters do not produce malformed code.
3. Team invite — Configured per-environment via VITE_INVITE_WEBHOOK_URL (typically the Growth team's Zapier Catch Hook). The form is hidden entirely when the env var is unset, so no environment silently drops invite submissions. POST is fire-and-forget under mode: 'no-cors' because the Zapier host doesn't return CORS headers; body is sent as application/x-www-form-urlencoded via URLSearchParams rather than JSON, because no-cors silently downgrades non-safelisted content-types and Zapier won't auto-parse text/plain into structured fields.

Background "Hello World" batch & toast

On mount, an info toast ("Sample Batch Started…") is fired with a 6s duration via the existing sonner toaster. In parallel, a one-row JSONL is uploaded and a batch is created via the same hooks the dashboard uses elsewhere, so the user actually has data to look at after they land on /models. Both the toast and the background job are gated by an idempotency ref so React StrictMode double-invokes don't double-fire.

The shared Toaster was also fixed in this PR: the existing wiring forwarded the bare HSL-component shadcn tokens (var(--popover) resolves to 0 0% 100%) into sonner's --normal-bg, producing invalid CSS and falling through to sonner's translucent default. This made every toast in the app illegible when overlaying content. Tokens are now wrapped in hsl(...) so the resolved background is a real opaque color.

Configuration

Env var	Purpose	Default
VITE_INVITE_WEBHOOK_URL	URL of the Zapier (or other) Catch Hook used by the onboarding "invite a teammate" form.	unset → invite section hidden

Design system compliance

• Reuses Button, SidebarProvider, SidebarInset, SidebarTrigger, and the AppSidebar directly.
• Uses doubleword-* color tokens (doubleword-primary, doubleword-red-50/-300/-light/-dark, doubleword-text-*, doubleword-border*, doubleword-neutral-*) for all branded surfaces. The Async card and primary CTA pick up the doubleword red; Batch keeps the existing blue accent for differentiation.
• Sonner toasts are reused as the "Sample Batch Started" notification rather than a bespoke toast component.
• No new fonts introduced; inherits the global Space Grotesk / sans stack.

QA

• pnpm run lint clean.
• pnpm exec tsc -b tsconfig.app.json clean.
• pnpm run build succeeds.
• pnpm test -- --run: 498 / 498 passing.

Notes / risks

• The Zapier webhook call is fire-and-forget (opaque response under no-cors); we can't detect transport failures from the browser.
• The "Run Now" UX intentionally simulates a 2.5s success regardless of the underlying batch outcome. If the real upload fails we log a warning but don't surface the error in the UI — the user is about to be redirected anyway, and they'll see the actual job state on /models.
• Background API key creation runs on every visit to /onboarding. Combined with the "won't be shown again" copy, that's intentional for the first-visit flow but means revisiting the page for any reason will mint a new throwaway key. If we want to avoid that, follow-up work should gate this behind the same onboarding_completed_${userId} localStorage flag the auth context already uses.
• The sonner background fix is global. Toasts elsewhere in the app will gain an opaque card-style background instead of their previous translucent fallback. Any component that relied on toasts being see-through will need to be revisited, but I didn't find any in tree.

  

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

There are 3 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit f8ee3a7. Configure here.}