feat: add Vue node display settings

[r-vage]

Summary

Adds independent Nodes 2.0 settings for title-sized collapsed nodes and permanently hiding Muted/Bypassed status badges, while preserving existing behavior by default.

Changes

• What: Adds experimental Compact collapsed nodes and Hide node status badges settings under Comfy → Nodes 2.0.
• Keeps API pricing controlled by Show API node pricing badge; compact nodes suppress pricing only while collapsed.
• Sizes compact collapsed nodes from their header content, capped at the expanded width, and restores their expanded bounds on reopen.
• Keeps the pin indicator independent from status badges.
• Adds unit and browser coverage for all four setting combinations, mounted setting changes, status modes, pricing, and width behavior.

Review Focus

Compact	Hide status	Collapsed behavior
Off	Off	Existing width; status and pricing shown
Off	On	Existing width; status hidden; pricing shown
On	Off	Title-sized; status and pricing hidden while collapsed
On	On	Title-sized; status always hidden; pricing hidden while collapsed

Please review the intrinsic width cap and the separation between status, pricing, and pin visibility.

Testing

• pnpm typecheck
• pnpm typecheck:browser
• Focused NodeHeader Vitest coverage: 12 tests passed
• New Playwright setting matrix and live-toggle coverage: 5 tests passed
• Playwright screenshot matrix: 4 tests passed
• Focused ESLint and oxfmt checks passed
• E2E regression coverage for this fix: browser_tests/tests/vueNodes/interactions/node/collapsedStacking.spec.ts
• git diff --check

The browser coverage activates the real collapse button by keyboard because the
current upstream northwest resize handle intercepts pointer clicks. The existing
Vue node collapse regression test reproduces that issue independently.

Screenshots

Default: status and pricing shown	Hide status: pricing shown

Compact collapsed	Compact collapsed with hide status enabled

[github-actions]

🎨 Storybook: 🚧 Building...

🎭 Playwright: ⏳ Running...

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8662ca33-c046-4354-9387-0c40c29a8a77

📥 Commits

Reviewing files that changed from the base of the PR and between d21d7ed and 38e2160.

📒 Files selected for processing (2)

• src/platform/settings/constants/coreSettings.ts
• src/schemas/apiSchema.ts

---

📝 Walkthrough

Walkthrough

Adds two Vue Nodes settings for compact collapsed nodes and hidden status badges. The settings are added to schemas and metadata, applied to LGraphNode and NodeHeader, and covered by component and browser tests.

Changes

Vue Nodes badge and collapsed layout behavior

Layer / File(s)	Summary
Vue Nodes settings contract src/schemas/apiSchema.ts, src/platform/settings/constants/coreSettings.ts, src/locales/en/settings.json	Adds boolean settings for compact collapsed nodes and hidden status badges, including metadata, defaults, localization, and schema support.
Header badge visibility contract src/renderer/extensions/vueNodes/components/NodeHeader.vue, src/renderer/extensions/vueNodes/components/NodeHeader.test.ts	Adds configurable status badge rendering while retaining pricing badge and pin indicator behavior.
Collapsed node integration and browser coverage src/renderer/extensions/vueNodes/components/LGraphNode.vue, browser_tests/fixtures/ComfyPage.ts, browser_tests/tests/creditHelpers.spec.ts	Applies compact sizing and setting-driven badge visibility to Vue nodes, with coverage for setting combinations and runtime updates.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• Comfy-Org/ComfyUI_frontend#11578: Modifies related credit pricing badge assertions and Vue Nodes header testing.

Suggested reviewers: christian-byrne

Sequence Diagram(s)

sequenceDiagram
  participant Settings
  participant LGraphNode
  participant NodeHeader
  participant BrowserTests
  Settings->>LGraphNode: provide compact and hide-status values
  LGraphNode->>LGraphNode: compute collapsed width and badge visibility
  LGraphNode->>NodeHeader: pass pricing badges and status visibility
  NodeHeader->>BrowserTests: render badge and layout state
  BrowserTests->>Settings: update settings and recheck rendering

Loading

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the main change: new Vue node display settings.
Description check	✅ Passed	The description follows the template well with Summary, Changes, Review Focus, Testing, and Screenshots sections.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
End-To-End Regression Coverage For Fixes	✅ Passed	No bug-fix language appears in the PR title, browser_tests were added, and the description clearly explains the regression coverage added.
Adr Compliance For Entity/Litegraph Changes	✅ Passed	Changed files are outside src/lib/litegraph/, src/ecs/, and graph entity paths, so ADR 0003/0008 checks do not apply.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[r-vage]

@coderabbitai full review

[coderabbitai]

✅ Action performed

Full review finished.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@browser_tests/tests/creditHelpers.spec.ts`:
- Around line 256-258: Replace the icon-class selector used for pricing in
browser_tests/tests/creditHelpers.spec.ts lines 256-258 with a header-scoped
locator matching the exact pricing text, preserving the existing header scope
and assertion behavior. Apply the same semantic pricing locator at lines
327-329; both sites must avoid dependence on CreditBadge styling or Iconify
classes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d64b2f71-322f-46a8-a077-197474705e65

📥 Commits

Reviewing files that changed from the base of the PR and between 7a92e80 and 3e3472b.

📒 Files selected for processing (8)

• browser_tests/fixtures/ComfyPage.ts
• browser_tests/tests/creditHelpers.spec.ts
• src/locales/en/settings.json
• src/platform/settings/constants/coreSettings.ts
• src/renderer/extensions/vueNodes/components/LGraphNode.vue
• src/renderer/extensions/vueNodes/components/NodeHeader.test.ts
• src/renderer/extensions/vueNodes/components/NodeHeader.vue
• src/schemas/apiSchema.ts