Add onboarding flow for new users by hthillman · Pull Request #697 · daydreamlive/scope

hthillman · 2026-03-16T22:07:18Z

Summary

Adds multi-phase onboarding flow: inference mode selection (cloud vs local), cloud auth sign-in, starter workflow picker, and interactive workspace tour
Backend persistence via GET/PUT /api/v1/onboarding/status with dual localStorage + API file storage layer
data-tour attribute anchoring system with custom portal-based tour popover (avoids focus-trap conflicts with graph canvas)
Analytics stubs and "Show onboarding again" reset in Settings > General

Remaining TODOs

Update welcome/inference step copy to final text
Wire real workflow JSON into the 3 starter workflow cards
Fix thumbnail images rendering as black
Delay tour start until workflow import completes
Remove "Skip for now" from CloudAuthStep (all users must sign in)
Auto-enable remote inference after cloud sign-in

Test plan

Fresh user (no ~/.daydream-scope/onboarding.json) sees full onboarding flow
Returning user skips directly to workspace
Cloud auth → local toggle paths both work
Workflow picker imports selected workflow into graph
Tour highlights correct elements in sequence
"Show onboarding again" in Settings resets flow
Build passes (npm run build)

🤖 Generated with Claude Code

coderabbitai · 2026-03-16T22:07:29Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 32514471-9d1c-4e08-8c33-45accad65996

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch hunter/onboarding-flow

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-03-16T22:13:01Z

🚀 fal.ai Preview Deployment


App ID	`daydream/scope-pr-697--preview`
WebSocket	`wss://fal.run/daydream/scope-pr-697--preview/ws`
Commit	`391d84d`

Testing

Connect to this preview deployment by running this on your branch:

uv run build && SCOPE_CLOUD_APP_ID="daydream/scope-pr-697--preview/ws" uv run daydream-scope

🧪 E2E tests will run automatically against this deployment.

github-actions · 2026-03-16T22:14:57Z

✅ E2E Tests passed


Status	passed
fal App	`daydream/scope-pr-697--preview`
Run	View logs

Test Artifacts

Check the workflow run for screenshots.

…ow support Cherry-picked from 7d1eb0e with conflict resolution. Signed-off-by: Rafał Leszko <rafal@livepeer.org> Signed-off-by: gioelecerati <gioele@cerati.org> Signed-off-by: Hunter Hillman <hthillman@gmail.com> # Conflicts: # frontend/src/components/graph/AddNodeModal.tsx # frontend/src/components/graph/ContextMenu.tsx # frontend/src/components/graph/CustomEdge.tsx # frontend/src/components/graph/GraphEditor.tsx # frontend/src/components/graph/constants.ts # frontend/src/components/graph/nodes/BoolNode.tsx # frontend/src/components/graph/nodes/ControlNode.tsx # frontend/src/components/graph/nodes/ImageNode.tsx # frontend/src/components/graph/nodes/KnobsNode.tsx # frontend/src/components/graph/nodes/MathNode.tsx # frontend/src/components/graph/nodes/MidiNode.tsx # frontend/src/components/graph/nodes/NoteNode.tsx # frontend/src/components/graph/nodes/OutputNode.tsx # frontend/src/components/graph/nodes/PipelineNode.tsx # frontend/src/components/graph/nodes/PrimitiveNode.tsx # frontend/src/components/graph/nodes/RerouteNode.tsx # frontend/src/components/graph/nodes/SinkNode.tsx # frontend/src/components/graph/nodes/SliderNode.tsx # frontend/src/components/graph/nodes/SourceNode.tsx # frontend/src/components/graph/nodes/TupleNode.tsx # frontend/src/components/graph/nodes/VaceNode.tsx # frontend/src/components/graph/nodes/XYPadNode.tsx # frontend/src/components/graph/ui/NodeBody.tsx # frontend/src/components/graph/ui/NodeCard.tsx # frontend/src/components/graph/ui/NodeHeader.tsx # frontend/src/components/graph/ui/NodePillSearchableSelect.tsx # frontend/src/components/graph/ui/NodePillTextarea.tsx # frontend/src/components/graph/ui/index.ts # frontend/src/components/graph/ui/tokens.ts # frontend/src/hooks/useUnifiedWebRTC.ts # frontend/src/hooks/useVideoSource.ts # frontend/src/lib/graphUtils.ts # frontend/src/pages/StreamPage.tsx

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Signed-off-by: Rafał Leszko <rafal@livepeer.org> Signed-off-by: gioelecerati <gioele@cerati.org> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

Signed-off-by: gioelecerati <gioele@cerati.org> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

Implements the H181 onboarding spec with inference mode selection, cloud auth, workflow picker, and workspace tour. Includes backend persistence endpoints and dual localStorage/API storage layer. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

- Fix black thumbnails: use URL strings for public/ assets instead of module imports that Vite can't resolve for public dir files - Delay tour start until first anchor element exists in DOM (polls up to 5s), preventing tour from appearing over blank canvas during workflow import - Remove skipAuth action and UI path — all cloud users must sign in - Refresh cloud status after onboarding auth so the "Remote Inference" toggle reflects the connecting/connected state immediately Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

…fix workflow import - Add Manrope as the global app font via Google Fonts + Tailwind config - Add interactive fog-of-war WebGL background to onboarding overlay - Remove workspace tour phase (stub WorkspaceTour, strip tour from context) - Fix workflow import by dismissing overlay before opening import dialog - Update VRAM copy on Run Locally card Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

The onboarding overlay creates a second h1 ("Welcome to Daydream Scope") which causes a strict mode violation in the Playwright locator. Pre-set localStorage to skip onboarding and use exact heading match. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

…ding, Manrope in Electron app - Replace localStorage cache with loading phase + API-only onboarding status - Add FogOfWarBackground + blur veil to Electron ServerLoading screen - Update e2e test to mock onboarding API instead of localStorage - Add Manrope font to all Electron app screens (CSP + Google Fonts link) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

…h import - Add cloud_connecting phase between auth and workflow picker — waits for cloud relay to connect before showing workflow selection - CloudConnectingStep triggers activateCloudRelay on mount and shows rotating status messages while waiting - Use sessionStorage to resume onboarding after full-page auth redirect (replaces broken inference_mode-based resume that skipped selection) - Add graph field to all starter workflows so the graph editor renders the pipeline topology after import Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

The graph editor didn't pick up the loaded workflow until the user switched modes and back (causing a remount). Call refreshGraph() after handleWorkflowLoad so the graph renders immediately. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

…nboarding API - Save workflow graph to localStorage during import so graph editor loads it - Refresh graph editor pipeline list when cloud connects (removes false "not installed" warnings) - Merge locally installed plugin pipeline IDs into available list so plugin pipelines (e.g. yolo_mask) show as available in cloud mode - Make onboarding PUT endpoint accept partial updates (fixes 422 errors) - Add independent polling in CloudConnectingStep to reliably detect connection Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com> # Conflicts: # frontend/src/components/graph/GraphEditor.tsx # Conflicts: # frontend/src/components/graph/hooks/graph/useGraphState.ts

…rial notes All three starter workflows now use full explicit graph definitions exported from Scope (with note nodes, passthrough→rife dropdown tutorial, LoRA/VACE ui_state). Removes buildGraph helper since it's no longer needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

hthillman force-pushed the hunter/onboarding-flow branch 3 times, most recently from 6c06866 to 93cda83 Compare March 18, 2026 20:46

hthillman changed the base branch from rafal/graph-mode-frontend to rafal/graph-mode-frontend-rebased March 18, 2026 20:46

gioelecerati force-pushed the rafal/graph-mode-frontend-rebased branch from f88bb22 to 27c0870 Compare March 19, 2026 15:36

hthillman force-pushed the hunter/onboarding-flow branch from 31cecf9 to 211c580 Compare March 19, 2026 20:57

hthillman and others added 11 commits March 20, 2026 10:10

fix linting

9f659b5

Signed-off-by: gioelecerati <gioele@cerati.org> Signed-off-by: Hunter Hillman <hthillman@gmail.com>

hthillman force-pushed the hunter/onboarding-flow branch from 211c580 to 81ac985 Compare March 20, 2026 17:13

hthillman marked this pull request as ready for review March 20, 2026 23:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add onboarding flow for new users#697

Add onboarding flow for new users#697
hthillman wants to merge 12 commits intorafal/graph-mode-frontend-rebasedfrom
hunter/onboarding-flow

hthillman commented Mar 16, 2026

Uh oh!

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

Review skipped

Uh oh!

github-actions bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

hthillman commented Mar 16, 2026

Summary

Remaining TODOs

Test plan

Uh oh!

coderabbitai bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 fal.ai Preview Deployment

Testing

Uh oh!

github-actions bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ E2E Tests passed

Test Artifacts

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

github-actions bot commented Mar 16, 2026 •

edited

Loading

github-actions bot commented Mar 16, 2026 •

edited

Loading