Skip to content

feat: ui: visual redesign of graph mode#886

Merged
gioelecerati merged 7 commits intomainfrom
gio/ui/redesign
Apr 17, 2026
Merged

feat: ui: visual redesign of graph mode#886
gioelecerati merged 7 commits intomainfrom
gio/ui/redesign

Conversation

@gioelecerati
Copy link
Copy Markdown
Contributor

@gioelecerati gioelecerati commented Apr 9, 2026

Graph node visual redesign

  • Refined node card palette: darker body (#242424), subtle rgba(255,255,255,0.06) borders, soft drop shadow, and rounded-lg corners replacing the previous #2a2a2a / heavier border look
  • Updated header styling with tighter typography (text-[11px] font-semibold tracking-tight)
  • Pills and inputs switched from rounded-full to rounded-md
  • Refined label/primary text colors and a new uppercase

More compact parameter layout

  • Reduced node body padding (py-2 → py-1) and inter-row gap (gap-1 → gap-0.5)
  • Shorter parameter rows (min-h-[22px] → min-h-[18px]) and tighter pill padding (py-1 → py-0.5)
  • Nodes fit significantly more parameters in the same vertical space

Smaller connectors, same hit area

  • Handle visuals shrunk from 10px to a 6px dot via a CSS radial-gradient mask in index.css
  • Full 10px hoverable/clickable area preserved, so drawing edges feels identical
  • PrimitiveNode handles now anchor to their parameter row via useHandlePositions instead of a hardcoded offset

Edges & context menu polish

  • Edge endpoint circles reduced (r=5 → r=4) with stronger stroke, and default edge color muted (#9ca3af → #6b7280)
  • Added LoRA edge coloring via new COLOR_LORA branch in getEdgeColor
  • Context menu and submenus restyled: darker background (#141414), softer rgba(255,255,255,0.05) hover, and a larger drop shadow

Toolbar updates

  • Slightly brighter toolbar hover, punchier Run/Stop hero button states
  • New dev-only “Debug Nodes” menu entry that spawns one of every node type in a fixed reference layout for design QA

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 9, 2026 •
edited
Loading

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: cbda0b8c-f7e6-422c-a95d-80effbfbb8d8

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 gio/ui/redesign

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
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 9, 2026 •
edited
Loading

🚀 fal.ai Preview Deployment
App ID daydream/scope-pr-886--preview
WebSocket wss://fal.run/daydream/scope-pr-886--preview/ws
Commit 7fcae5f

Livepeer Runner
App ID daydream/scope-livepeer-pr-886--preview
WebSocket wss://fal.run/daydream/scope-livepeer-pr-886--preview/ws
Auth private

Testing Livepeer Mode

SCOPE_CLOUD_MODE=livepeer SCOPE_CLOUD_APP_ID="daydream/scope-livepeer-pr-886--preview/ws" uv run daydream-scope

@gioelecerati
feat: ui: graph mode redesign
05bf49f 
Signed-off-by: gioelecerati <gioele@cerati.org>
@gioelecerati
better params
de626d2 
Signed-off-by: gioelecerati <gioele@cerati.org>
@gioelecerati
smaller connectors
d228f4b 
Signed-off-by: gioelecerati <gioele@cerati.org>
@gioelecerati
better resize, better selected, better margins
f5ee721 
Signed-off-by: gioelecerati <gioele@cerati.org>
@gioelecerati
remove border
18764ab 
Signed-off-by: gioelecerati <gioele@cerati.org>
@gioelecerati
prettier
6fcb050 
Signed-off-by: gioelecerati <gioele@cerati.org>
@gioelecerati
fix build
7fcae5f 
Signed-off-by: gioelecerati <gioele@cerati.org>
@gioelecerati gioelecerati merged commit c46e50f into main Apr 17, 2026
10 checks passed
@emranemran emranemran mentioned this pull request Apr 20, 2026
Closed
3 tasks
emranemran added a commit that referenced this pull request Apr 20, 2026
@emranemran @claude
fix(e2e): update cloud-streaming test for graph-mode UI redesign
2a455b9 
The redesign in #886 replaced the streaming-first landing with a
Workflow/Perform toggle and removed the "Daydream Scope" heading the
test was polling for. The test has been dead since then.

Updates:
- Wait on the Perform-mode toggle appearing instead of the missing heading
- Explicitly switch to Perform mode before the cloud/pipeline/stream
  steps — default is now Workflow (graph mode) where those controls
  aren't rendered
- Find the cloud button by title attribute (covers all three states:
  "Connect to cloud", "Connecting to cloud...", "Cloud connected")
- Bump the cloud-connect timeout to 180s so fal cold-starts have room
- Verify frame flow by polling any <video> element rather than locating
  the old "Video Output" card wrapper
- Stop uses the start-stream-button toggle (PlayOverlay changes role
  when streaming) with a text-based fallback

Verified locally: full flow passes in ~3 minutes against a warm fal
deploy with the passthrough pipeline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: emranemran <emran.mah@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@leszko leszko leszko approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@gioelecerati @leszko