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: a7ff06d5-1464-4fb9-a12e-ba473b81cd60

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	`7bd153b`

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.

leszko · 2026-03-24T13:39:52Z

There is something wrong with the image for the Mythical Creature Workflow.

The mythical-creature.webp asset was missing from frontend/public/assets/onboarding/, causing a broken image icon on the first workflow card in the onboarding picker. - Add placeholder thumbnail (replace with final art before merge) - Add onError handler to hide broken img element gracefully Fixes: #697 Signed-off-by: livepeer-robot <[email protected]>

livepeer-tessa · 2026-03-24T13:42:02Z

Root cause found + fix pushed

The Mythical Creature card shows a broken image because mythical-creature.webp was never committed to frontend/public/assets/onboarding/. The other two assets (dissolving-cat.webp, pixel-art.png) are present, so only this one card is affected.

What I pushed to the branch (`efbc441`)

Placeholder thumbnail — Added mythical-creature.webp as a temporary purple-toned placeholder so the card renders something visible. Please replace this with the real thumbnail artwork before merge.
onError fallback on the <img> in WorkflowPickerStep.tsx — hides the broken-image icon gracefully if an asset ever fails to load in the future.

To do before merge

Replace frontend/public/assets/onboarding/mythical-creature.webp with the real screenshot/preview image for this workflow

leszko · 2026-03-24T13:53:09Z

For the "Dissolving Cat Flowers" workflow, we should do 2 changes:

Remove passthrough pipeline => It does nothing, so it can be misleading to the user
Connect Recording node to the last pipelines's output (for now it does not matter, but soon we'll have multiple sinks, so then it will matter to wich node you connect the recording)

Also, this may not be related to your onboarding, but either to my rebase or something wrong in the Workflow Builder, but when I use cloud, I use this workflow, click play and see nothing in the Sink.

leszko · 2026-03-24T13:56:25Z

After choosing cloud at the beginning, I'm not able to disconnect from the cloud

leszko

Added a few comments, one more is that I think that if you run on Mac and select "Local" it would be nice to have some non-gpu-friendly workflow to choose. E.g. kaleido-scope or a simple pipeline like gray. Just something that you can run on Mac.

livepeer-tessa · 2026-03-24T14:10:19Z

Root cause + fix (`659215b`)

Two bugs combined to make the Remote Inference toggle unclickable after cloud onboarding:

1. `useState(false)` initial value

DaydreamAccountSection initialised isSignedIn as false, then corrected it inside a useEffect. On the very first render the toggle was disabled even if the user was fully authenticated. Changed to a lazy initialiser so the correct value is read synchronously at mount:

// Before
const [isSignedIn, setIsSignedIn] = useState(false);

// After
const [isSignedIn, setIsSignedIn] = useState(() => isAuthenticated());

2. `!isSignedIn` was required even to disconnect

The disabled condition was:

disabled={disabled || !isSignedIn || isDisconnecting}

This means that if isAuthenticated() returns false for any reason — e.g. the env API key path (VITE_DAYDREAM_API_KEY set but no userId in localStorage yet, a failed profile fetch, etc.) — the toggle stays green/on but is completely unclickable. Disconnecting doesn't require auth; only connecting does. Fixed to:

disabled={
  disabled ||
  isDisconnecting ||
  // Sign-in only required to *connect*; disconnecting is always allowed
  (!(status.connected || status.connecting) && !isSignedIn)
}

Also tightened the "Log in required" helper text so it only shows when the cloud is currently off (and sign-in is actually needed).

hthillman · 2026-03-25T00:22:13Z

@leszko addressed almost all of the comments - I will handle the workflow connections (Dissolving cat) when we finalize the workflows.

leszko

@hthillman I pushed a few changes into your branch. Hope you don't mind. Other than that, added 2 inline comments. PTAL.

I think what's missing before merging this PR:

You addressing these 2 comments
Complete sample workflows (including Mac-friendly)
Fix Electron App
Testing more Workflow Builder and the decision to use it by default
@gioelecerati addressing (some of) the missing features

leszko · 2026-03-25T09:34:32Z

src/scope/server/app.py

+    use_case: str | None = None
+
+
+@app.get("/api/v1/onboarding/status", response_model=OnboardingStatusResponse)


@hthillman I wonder, wouldn't it be better to not store the info about the onboarding in the backend server, but rather store it in the frontend browser data? We currently do this for Graph caching, so when a user closes the app and opens again, they see the same graph as before. Wdyt?

@leszko Would we ever want a user to see the onboarding again? what if browser data gets cleared?

Showing onboarding again is a worse UX than the graph cache case, where re-showing a graph is often helpful

leszko · 2026-03-25T09:37:11Z

frontend/src/components/onboarding/starterWorkflows.ts

+                nodeType: "lora",
+                loras: [
+                  {
+                    path: "/tmp/.daydream-scope/assets/lora/diffslime_acidzlime-000016.safetensors",


This should not contain paths like this.

Also I wonder that maybe instead of hardcoding the workflows here, we should take them from https://app.daydream.live/ Wdyt?

@leszko

we need the "teaching" workflows, which... I guess we could put on daydream.live?

Whoops, nice catch

My other worry about pulling from daydream.live - what if daydream.live is ever down? would that affect local experience?

leszko · 2026-03-25T10:06:02Z

There is something wrong with Electron App. This is what I see when I start it. But maybe first address the other comments, because maybe if we move the backend part to the frontend it will just start working again 🙃

- Add onboarding flow for new users with fog-of-war background, Manrope font - Cloud onboarding: connecting step, auth redirect resume, graph import - Add API key warning to workflow import review screen - Replace starter workflow graphs with exported versions including tutorial notes - Add provenance to all starter workflow LoRAs for auto-download - Add Workflows tab to PluginsDialog, rename plugin to node in UI - Fix build errors after rebase, restore onboarding integration in StreamPage - Fix workflow graph import, pipeline availability in cloud mode - Fix e2e test: skip onboarding overlay in cloud streaming test Signed-off-by: Rafał Leszko <[email protected]>

The mythical-creature.webp asset was missing from frontend/public/assets/onboarding/, causing a broken image icon on the first workflow card in the onboarding picker. - Add placeholder thumbnail (replace with final art before merge) - Add onError handler to hide broken img element gracefully Fixes: #697 Signed-off-by: livepeer-robot <[email protected]>

Two bugs prevented disconnecting after cloud onboarding: 1. useState(false) initial value — isSignedIn was false on the first render, making the toggle disabled until the useEffect fired. Fixed by using a lazy initialiser: useState(() => isAuthenticated()). 2. disabled condition checked !isSignedIn unconditionally — if isAuthenticated() returned false for any reason (env-key with no userId in localStorage, network hiccup during profile fetch, etc.) the toggle appeared green but was unclickable. Disconnecting cloud does not require authentication; only *connecting* does. Fixed by only gating on isSignedIn when the toggle action would trigger a connect (i.e. when currently disconnected). Also tightens the 'Log in required' hint so it only shows when the cloud is off and sign-in is actually needed. Signed-off-by: livepeer-robot <[email protected]>

…oltips - Add interstitial survey screens during cloud connecting (referral source, use case, onboarding style choice) that run concurrently with cloud relay - Add simple-mode starter workflows (Mythical Creature, Kubakub Butterfly, Pixel Art) with complete graph including source nodes and connections - Re-enable workspace tour with two-step tooltip flow: play button hint then workflows discovery, with text varying by onboarding style - Fix tour arrow positioning to point at actual anchor after viewport clamping - Tour waits for workflow import dialog to close before showing - Update Mythical Creature thumbnail image - Header: rename "Enable Remote Inference" to "Connect to Cloud", add Nodes/ Workflows/Settings buttons, fix Nodes button linking to wrong tab - Update inference mode descriptions for cloud and local options - Persist survey answers to backend onboarding.json Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

When onboardingStyle is null (e.g. local mode), getWorkflowsForStyle was returning all 6 workflows (3 teaching + 3 simple), causing duplicates. Now defaults to "teaching" set. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

Fix getDaydreamUserDisplayName being passed as a function reference instead of being called, extract duplicated activateCloudRelay into shared onboardingStorage module, and remove redundant inline json imports in app.py. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafal Leszko <[email protected]>

Add DAYDREAM_SCOPE_DIR env var and get_base_dir() to core/config.py so the onboarding file path is no longer hardcoded to ~/.daydream-scope. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafal Leszko <[email protected]>

Remove unused reducer actions (SELECT_WORKFLOW, START_DOWNLOADING, DOWNLOAD_FAILED, COMPLETE), dead state fields (selectedWorkflowId, downloadFailures), and unreachable phases (downloading, completed). Remove dead re-export in WorkflowPickerStep, console.log traces in GeneralTab, and simplify backend onboarding update with model_dump. Add missing hasFinePointer mobile guard to app FogOfWarBackground. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafal Leszko <[email protected]>

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafał Leszko <[email protected]>

The WebGL fog-of-war component was duplicated nearly identically in both app/ and frontend/. Keep the frontend copy as the canonical source and import it into the Electron renderer via a @shared Vite alias, avoiding future drift between the two copies. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafał Leszko <[email protected]>

Use bare filenames instead of full /tmp/.daydream-scope/assets/lora/ paths in ui_state LoRA nodes. LoraNode auto-resolves filenames to full paths via resolveLoRAPath() at runtime. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

- Replace Cyborg with Paint Blobs (BlobMe workflow with acid slime LoRA) - Replace Kubakub Butterfly with Dissolving Sunflower (depth + dissolve) - Paint Blobs teaching note mentions changing source to Camera - Add starter workflows chip on canvas showing untried workflow thumbnail - Add "Getting Started" section in Workflows tab with all starter workflows - Workflows tab and chip always show simple-mode workflows (no teaching notes) - New thumbnail images for Paint Blobs and Dissolving Sunflower Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

The @shared alias imports FogOfWarBackground from frontend/src/, but its React imports resolved to frontend/node_modules/react (19.1.1) instead of app/node_modules/react (19.2.0). Two React instances in one tree causes an Invalid Hook Call error caught by the ErrorBoundary. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafał Leszko <[email protected]>

The record node was present in all 6 starter workflows but had no edge connecting it to the video stream. Added stream:video edges from the last pipeline node (rife or pipeline) to the record node. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafal Leszko <[email protected]>

- Add Camera Preview workflow for local mode (passthrough pipeline, no GPU required) with note about 24GB VRAM requirement and Cloud recommendation - WorkflowPickerStep shows local-only workflows when inferenceMode is local, with adjusted heading/description and single-card layout - Add back button to all onboarding steps (except first) with proper phase transitions through the flow - Fix fog-of-war background not showing on Windows touchscreen laptops: use "any-pointer: fine" instead of "pointer: fine" so a connected mouse is detected even when primary pointer is touch Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

- Survey screens now have internal back button to navigate between steps - Pressing back on intro screen bubbles up to cloud_auth phase - Overlay back button hidden during cloud_connecting (survey handles it) - Camera Preview workflow shown as additional 4th option when running locally, alongside the normal teaching/simple workflows - Grid adapts to 4 columns when 4 workflows are present Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

- Widen container to max-w-5xl when 4+ workflows shown so cards don't get too tall - Swap Camera Preview workflow data with exported camera_check.json (record node connected to output, proper positions) - Show camera icon on slate gradient background when thumbnail is empty Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

Check hardware info when in local mode — show GPU-requiring workflows only when a GPU is detected, otherwise show only Camera Preview. Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafał Leszko <[email protected]>

Add data-tour attributes to the redesigned toolbar for onboarding popovers, rename Plugins menu item to Nodes, add Default Workflow menu item with confirmation dialog, prevent text selection on toolbar buttons, and update starter workflow notes to reference the Run button in the upper right corner. Signed-off-by: gioelecerati <[email protected]> Made-with: Cursor

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 2 times, most recently from 211c580 to 81ac985 Compare March 20, 2026 17:13

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

leszko force-pushed the rafal/graph-mode-frontend-rebased branch from dcf827d to 0da42df Compare March 23, 2026 10:23

hthillman force-pushed the hunter/onboarding-flow branch from 697d64c to bdf92d6 Compare March 23, 2026 16:35

leszko self-requested a review March 24, 2026 13:20

leszko force-pushed the hunter/onboarding-flow branch from 6521512 to 2bcc925 Compare March 24, 2026 13:34

leszko changed the base branch from rafal/graph-mode-frontend-rebased to main March 24, 2026 13:35

leszko requested changes Mar 24, 2026

View reviewed changes

leszko requested changes Mar 25, 2026

View reviewed changes

leszko approved these changes Mar 27, 2026

View reviewed changes

leszko and others added 3 commits March 27, 2026 10:08

hthillman and others added 17 commits March 27, 2026 10:08

style: fix Prettier formatting in 10 frontend files

367c3f1

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Rafał Leszko <[email protected]>

fix: move survey back button to upper-left corner for consistency

b41a5d3

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]> Signed-off-by: Hunter Hillman <[email protected]>

gioelecerati force-pushed the hunter/onboarding-flow branch from 5bbdb97 to 7bd153b Compare March 27, 2026 09:35

gioelecerati merged commit 8f650cb into main Mar 27, 2026
10 checks passed

		use_case: str \| None = None


		@app.get("/api/v1/onboarding/status", response_model=OnboardingStatusResponse)

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!

leszko commented Mar 24, 2026

Uh oh!

livepeer-tessa commented Mar 24, 2026

Root cause found + fix pushed

What I pushed to the branch (efbc441)

To do before merge

Uh oh!

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

Uh oh!

Uh oh!

leszko commented Mar 24, 2026

Uh oh!

leszko left a comment

Choose a reason for hiding this comment

Uh oh!

livepeer-tessa commented Mar 24, 2026

Root cause + fix (659215b)

1. useState(false) initial value

2. !isSignedIn was required even to disconnect

Uh oh!

hthillman commented Mar 25, 2026

Uh oh!

leszko left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leszko Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

hthillman Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

hthillman Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

leszko Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

hthillman Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hthillman Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

leszko commented Mar 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 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

What I pushed to the branch (`efbc441`)

leszko commented Mar 24, 2026 •

edited

Loading

Root cause + fix (`659215b`)

1. `useState(false)` initial value

2. `!isSignedIn` was required even to disconnect

leszko left a comment •

edited

Loading

hthillman Mar 25, 2026 •

edited

Loading