Sync node help with selection and add watcher tests #7105

benceruleanlu · 2025-12-02T23:20:02Z

Summary

add a watcher to sync the node help panel with the currently selected node
add unit coverage for help auto-switching and guard cases

Testing

pnpm typecheck
pnpm lint:fix
pnpm exec vitest tests-ui/tests/composables/graph/useSelectionState.test.ts

┆Issue is synchronized with this Notion page by Unito

coderabbitai · 2025-12-02T23:20:16Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Adds automatic synchronization of the Node Help panel with the current selection (watcher in NodeHelpPage), adjusts useSelectionState typing to use optional chaining, and updates tests to mount the composable and verify the new behavior; a browser test removes a redundant UI interaction.

Changes

Cohort / File(s)	Summary
Selection state composable `src/composables/graph/useSelectionState.ts`	Replaces explicit `any` on `currentHelpNode` with inferred typing and uses optional chaining (`currentHelpNode?.nodePath`) for safe comparisons; no public API signature changes.
Node Help page component `src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue`	Adds a `whenever` watcher that, when help is open and the selected node differs from the shown help, calls `nodeHelpStore.openHelp(def)` to update the help content.
Composable tests (mounting pattern) `tests-ui/tests/composables/graph/useSelectionState.test.ts`	Converts tests to mount the composable via a helper, tracks mounted wrappers for teardown, replaces direct `useSelectionState()` usage with the mounted `selectionState`, and adds `flushPromises` where needed.
NodeHelpPage component tests `tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts`	New tests that mock `useSelectionState` and `useNodeHelpStore` and assert that `openHelp` is called when selection changes to a different node while help is open, and not called when selection is unchanged or help is closed.
Browser test tweak `browser_tests/tests/nodeHelp.spec.ts`	Removes a redundant click that re-opened the help panel after switching nodes; the test now verifies automatic help content updates after selection change.

Sequence Diagram(s)

sequenceDiagram
    participant User as User / UI
    participant Sel as useSelectionState (composable)
    participant Page as NodeHelpPage (watcher)
    participant Help as nodeHelpStore

    User->>Sel: selectNode(nodePath)
    Sel-->>Page: reactive selected node changes (nodeDef)
    Page->>Page: whenever (helpOpen && nodeDef differs)
    alt help open AND different node selected
        Page->>Help: openHelp(nodeDef)
        Help-->>Page: currentHelpNode updated
    else help closed OR same node
        Page-->>Help: (no action)
    end

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/help-help-sync

📜 Recent review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 65d07a0 and 07e0b31.

📒 Files selected for processing (3)

browser_tests/tests/nodeHelp.spec.ts (0 hunks)
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue (1 hunks)
src/composables/graph/useSelectionState.ts (1 hunks)

💤 Files with no reviewable changes (1)

browser_tests/tests/nodeHelp.spec.ts

🧰 Additional context used

📓 Path-based instructions (15)

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

src/**/*.{vue,ts}: Avoid using ref and watch together - use computed instead if possible
Do not add ref if a prop would suffice; do not add computed if the ref/prop directly would work; use watch only when computed won't accomplish the goal
Leverage VueUse functions for performance-enhancing styles

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

src/**/*.ts: Extract complex type definitions that are inlined in multiple related places - name them for reuse
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones

Files:

src/composables/graph/useSelectionState.ts

src/**/{services,composables}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/{services,composables}/**/*.{ts,tsx}: Use api.apiURL() for backend endpoints instead of constructing URLs directly
Use api.fileURL() for static file access instead of constructing URLs directly

Files:

src/composables/graph/useSelectionState.ts

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: ESLint rules: Vue + TS rules, no floating promises, unused imports disallowed, i18n raw text restrictions in templates
Use es-toolkit for utility functions
Avoid mutable state - prefer immutability and assignment at point of declaration
Never use any type - use proper TypeScript types
Never use as any type assertions - fix the underlying type issue

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/*.{js,ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript exclusively - no new JavaScript files

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/composables/**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Composables must follow the naming pattern useXyz.ts

Files:

src/composables/graph/useSelectionState.ts

src/**/*.{ts,tsx,vue,js}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx,vue,js}: Indent with 2 spaces, use single quotes, no trailing semicolons, line width 80 - see .prettierrc
Sort and group imports by plugin, run pnpm format before committing

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Do not use function expressions - use function declarations instead when possible

Files:

src/composables/graph/useSelectionState.ts

src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

src/**/*.vue: Vue 3 SFCs must use Composition API only - no Options API
Use <script setup lang="ts"> for component logic
Use Tailwind 4 utility classes for styling - avoid <style> blocks
Use cn() utility from @/utils/tailwindUtil to merge Tailwind class names - never use :class="[]" syntax
Never use the dark: Tailwind variant - use semantic values from style.css theme instead (e.g., bg-node-component-surface)
Use Vue 3.5+ TypeScript style default prop declaration with reactive destructuring - prefer useModel to prop/emit pairs, do not use withDefaults
Do not import Vue macros unnecessarily
Use vue-i18n in composition API for string literals - place translation entries in src/locales/en/main.json
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Avoid new usage of PrimeVue components

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Vue components must be named in PascalCase (e.g., MenuHamburger.vue)

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/components/**/*.{vue,css}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/components/**/*.{vue,ts,js}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

🧠 Learnings (18)

📓 Common learnings

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to tests-ui/**/*.test.ts : Aim for behavioral coverage of critical and new features

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7415
File: browser_tests/tests/mobileBaseline.spec.ts:17-22
Timestamp: 2025-12-13T05:54:35.779Z
Learning: In browser_tests tests for the Comfy-Org/ComfyUI_frontend repository, the `comfyPage.loadWorkflow()` method already handles all necessary synchronization and waiting. No additional `await comfyPage.nextFrame()` call is needed before taking screenshots after loading a workflow.

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:34.324Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-12-13T05:34:22.209Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7415
File: browser_tests/tests/mobileBaseline.spec.ts:7-15
Timestamp: 2025-12-13T05:34:22.209Z
Learning: In Playwright tests in the Comfy-Org/ComfyUI_frontend repository, the `toPass()` assertion method implements incremental backoff during retries, so increasing the timeout value (e.g., to 5000ms) is sufficient for handling async operations without being overly aggressive.

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-12-17T01:01:03.609Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to tests-ui/**/*.test.ts : Aim for behavioral coverage of critical and new features

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-12-09T03:39:54.501Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-12-13T11:03:11.264Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-12-17T00:40:09.635Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-12-11T12:25:15.470Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.

Applied to files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-09T03:49:52.828Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-17T01:01:03.609Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Use `<script setup lang="ts">` for component logic

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-09T21:40:12.361Z

Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.

Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-16T22:26:49.463Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-18T21:15:46.862Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-18T16:03:02.066Z

Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: setup
GitHub Check: lint-and-format
GitHub Check: test
GitHub Check: collect

🔇 Additional comments (3)

src/composables/graph/useSelectionState.ts (1)

108-112: LGTM! Type safety improvement.

The refactoring removes explicit any typing and uses optional chaining, which improves type safety and code clarity. This aligns well with the coding guidelines that prohibit any types.

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue (2)

22-28: LGTM! Proper use of VueUse composable.

The imports correctly bring in whenever from VueUse and the necessary composables/stores to implement the selection-to-help synchronization feature. This follows the coding guideline to leverage VueUse functions.

36-48: LGTM! Watcher correctly implements help synchronization.

The whenever watcher appropriately syncs the help panel with the current selection. The logic correctly:

Only fires when help is open and a single node is selected

Avoids redundant updates when the same node is already shown

Handles edge cases (multiple selection, no selection, help closed)

The null check on line 43 is technically redundant since whenever only fires on truthy values, but it serves as defensive programming and doesn't harm readability.

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 · 2025-12-02T23:20:26Z

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 12/20/2025, 12:11:03 AM UTC

📈 Summary

Total Tests: 509
Passed: 500 ✅
Failed: 0
Flaky: 1 ⚠️
Skipped: 8 ⏭️

📊 Test Reports by Browser

✅ chromium: View Report • ✅ 488 / ❌ 0 / ⚠️ 1 / ⏭️ 8
✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ mobile-chrome: View Report • ✅ 9 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

github-actions · 2025-12-02T23:20:26Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 12/20/2025, 12:02:56 AM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

github-actions · 2025-12-02T23:22:30Z

Bundle Size Report

Summary

Raw size: 16.6 MB baseline 16.6 MB — 🟢 -144 B
Gzip: 3.37 MB baseline 3.37 MB — 🟢 -48 B
Brotli: 2.6 MB baseline 2.6 MB — 🟢 -465 B
Bundles: 98 current • 99 baseline • 42 added / 43 removed

Category Glance
App Entry Points 🔴 +4.01 kB (3.21 MB) · Graph Workspace 🟢 -3.53 kB (994 kB) · Utilities & Hooks 🟢 -460 B (1.41 kB) · Other 🟢 -131 B (3.44 MB) · UI Components 🟢 -39 B (184 kB) · Vendor & Third-Party ⚪ 0 B (8.46 MB) · + 3 more

Per-category breakdown

App Entry Points — 3.21 MB (baseline 3.21 MB) • 🔴 +4.01 kB

Main entry bundles and manifests

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/index-ClqIKLH0.js (new)	—	2.99 MB	🔴 +2.99 MB	🔴 +630 kB	🔴 +479 kB
~~assets/index-Upoe8wyt.js~~ (removed)	2.98 MB	—	🟢 -2.98 MB	🟢 -629 kB	🟢 -478 kB
assets/index-C-fwTJ_f.js (new)	—	227 kB	🔴 +227 kB	🔴 +48.5 kB	🔴 +39.8 kB
~~assets/index-lKBweIFw.js~~ (removed)	227 kB	—	🟢 -227 kB	🟢 -48.5 kB	🟢 -39.9 kB
~~assets/index-CRJzceZS.js~~ (removed)	345 B	—	🟢 -345 B	🟢 -243 B	🟢 -210 B
assets/index-DSDQKvCb.js (new)	—	345 B	🔴 +345 B	🔴 +246 B	🔴 +230 B

Status: 3 added / 3 removed

Graph Workspace — 994 kB (baseline 998 kB) • 🟢 -3.53 kB

Graph editor runtime, canvas, workflow orchestration

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/GraphView-CvY0iJQa.js~~ (removed)	998 kB	—	🟢 -998 kB	🟢 -195 kB	🟢 -148 kB
assets/GraphView-WyRW_Q8I.js (new)	—	994 kB	🔴 +994 kB	🔴 +194 kB	🔴 +148 kB

Status: 1 added / 1 removed

Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 B

Top-level views, pages, and routed surfaces

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/UserSelectView-BBDZQVGD.js (new)	—	6.54 kB	🔴 +6.54 kB	🔴 +2.14 kB	🔴 +1.9 kB
~~assets/UserSelectView-D_aY4olf.js~~ (removed)	6.54 kB	—	🟢 -6.54 kB	🟢 -2.14 kB	🟢 -1.89 kB

Status: 1 added / 1 removed

Panels & Settings — 297 kB (baseline 297 kB) • ⚪ 0 B

Configuration panels, inspectors, and settings screens

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/LegacyCreditsPanel-C4BvYUtD.js (new)	—	21.4 kB	🔴 +21.4 kB	🔴 +5.16 kB	🔴 +4.5 kB
~~assets/LegacyCreditsPanel-oMO5peQ_.js~~ (removed)	21.4 kB	—	🟢 -21.4 kB	🟢 -5.16 kB	🟢 -4.5 kB
assets/KeybindingPanel-C8YJAY-Y.js (new)	—	13.6 kB	🔴 +13.6 kB	🔴 +3.42 kB	🔴 +3.02 kB
~~assets/KeybindingPanel-lcYlE9FC.js~~ (removed)	13.6 kB	—	🟢 -13.6 kB	🟢 -3.42 kB	🟢 -3.01 kB
assets/ExtensionPanel-CbwLE0FZ.js (new)	—	10.8 kB	🔴 +10.8 kB	🔴 +2.57 kB	🔴 +2.24 kB
~~assets/ExtensionPanel-CY-NkEzU.js~~ (removed)	10.8 kB	—	🟢 -10.8 kB	🟢 -2.57 kB	🟢 -2.24 kB
assets/AboutPanel-B3EsmyrF.js (new)	—	9.16 kB	🔴 +9.16 kB	🔴 +2.46 kB	🔴 +2.2 kB
~~assets/AboutPanel-BY6-rUD9.js~~ (removed)	9.16 kB	—	🟢 -9.16 kB	🟢 -2.46 kB	🟢 -2.2 kB
~~assets/ServerConfigPanel-BqAPOp5c.js~~ (removed)	7.07 kB	—	🟢 -7.07 kB	🟢 -1.98 kB	🟢 -1.76 kB
assets/ServerConfigPanel-Cf8c5owy.js (new)	—	7.07 kB	🔴 +7.07 kB	🔴 +1.98 kB	🔴 +1.76 kB
assets/UserPanel-BfnekHBk.js (new)	—	6.23 kB	🔴 +6.23 kB	🔴 +1.71 kB	🔴 +1.5 kB
~~assets/UserPanel-Z7fdyhdR.js~~ (removed)	6.23 kB	—	🟢 -6.23 kB	🟢 -1.71 kB	🟢 -1.5 kB
assets/settings-BhbWhsRg.js	101 B	101 B	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-BvFz-TmQ.js	33.1 kB	33.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-BxYnTA2y.js	21.5 kB	21.5 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-C6bMjAne.js	27.1 kB	27.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-C7Yhp7H7.js	24 kB	24 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-CsnOn8G0.js	25.7 kB	25.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-D5BGNZ7M.js	24.8 kB	24.8 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-D7k3huHm.js	25 kB	25 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DamkILzl.js	26.4 kB	26.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-s1k0gw1Y.js	20.9 kB	20.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 6 added / 6 removed

UI Components — 184 kB (baseline 184 kB) • 🟢 -39 B

Reusable component library chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/Load3D.vue_vue_type_script_setup_true_lang-D83xTMGR.js~~ (removed)	53.5 kB	—	🟢 -53.5 kB	🟢 -8.45 kB	🟢 -7.25 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-zC6Bj2nG.js (new)	—	53.5 kB	🔴 +53.5 kB	🔴 +8.45 kB	🔴 +7.25 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-Ad9Nih_b.js (new)	—	48.8 kB	🔴 +48.8 kB	🔴 +10.5 kB	🔴 +9.15 kB
~~assets/WidgetSelect.vue_vue_type_script_setup_true_lang-CQLmiVka.js~~ (removed)	48.8 kB	—	🟢 -48.8 kB	🟢 -10.5 kB	🟢 -9.14 kB
~~assets/LazyImage.vue_vue_type_script_setup_true_lang-DL3X1K3L.js~~ (removed)	48.4 kB	—	🟢 -48.4 kB	🟢 -10.6 kB	🟢 -9.3 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-ZcZ-Gk1m.js (new)	—	48.4 kB	🔴 +48.4 kB	🔴 +10.6 kB	🔴 +9.31 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-Bmgideey.js (new)	—	14.3 kB	🔴 +14.3 kB	🔴 +3.74 kB	🔴 +3.28 kB
~~assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-BO2oW8W7.js~~ (removed)	14.3 kB	—	🟢 -14.3 kB	🟢 -3.73 kB	🟢 -3.29 kB
~~assets/ComfyQueueButton-CS2E3hiP.js~~ (removed)	8.49 kB	—	🟢 -8.49 kB	🟢 -2.48 kB	🟢 -2.22 kB
assets/ComfyQueueButton-CxVFUneI.js (new)	—	8.45 kB	🔴 +8.45 kB	🔴 +2.47 kB	🔴 +2.2 kB
~~assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-sBzbuq-J.js~~ (removed)	3.68 kB	—	🟢 -3.68 kB	🟢 -1.45 kB	🟢 -1.3 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-zijAkHzg.js (new)	—	3.68 kB	🔴 +3.68 kB	🔴 +1.45 kB	🔴 +1.3 kB
~~assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-Bihho4mE.js~~ (removed)	2.14 kB	—	🟢 -2.14 kB	🟢 -887 B	🟢 -767 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-D_7i5qrU.js (new)	—	2.14 kB	🔴 +2.14 kB	🔴 +890 B	🔴 +761 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-BGU2GBgG.js (new)	—	897 B	🔴 +897 B	🔴 +505 B	🔴 +470 B
~~assets/MediaTitle.vue_vue_type_script_setup_true_lang-Biwui5pX.js~~ (removed)	897 B	—	🟢 -897 B	🟢 -498 B	🟢 -432 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-Bumg4_L2.js	1.34 kB	1.34 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetButton-z3dAsplW.js	2.04 kB	2.04 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 8 added / 8 removed

Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 B

Stores, services, APIs, and repositories

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/keybindingService-Bx6-XRWz.js~~ (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -1.83 kB	🟢 -1.58 kB
assets/keybindingService-C4T0Wif3.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +1.83 kB	🔴 +1.58 kB
~~assets/audioService-DkThSIiD.js~~ (removed)	2.2 kB	—	🟢 -2.2 kB	🟢 -960 B	🟢 -825 B
assets/audioService-OOa2P-gG.js (new)	—	2.2 kB	🔴 +2.2 kB	🔴 +962 B	🔴 +828 B
assets/serverConfigStore-7JI8VFS2.js	2.83 kB	2.83 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 2 added / 2 removed

Utilities & Hooks — 1.41 kB (baseline 1.86 kB) • 🟢 -460 B

Helpers, composables, and utility bundles

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/audioUtils-CRXFcRZl.js (new)	—	1.41 kB	🔴 +1.41 kB	🔴 +651 B	🔴 +550 B
~~assets/audioUtils-DZ_N9Zjj.js~~ (removed)	1.41 kB	—	🟢 -1.41 kB	🟢 -650 B	🟢 -544 B
~~assets/nodeFilterUtil-CXKCRJ-m.js~~ (removed)	460 B	—	🟢 -460 B	🟢 -275 B	🟢 -227 B

Status: 1 added / 2 removed

Vendor & Third-Party — 8.46 MB (baseline 8.46 MB) • ⚪ 0 B

External libraries and shared vendor chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/vendor-chart-DaR9dw3X.js	452 kB	452 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-other-Cf7iqkoX.js	3.86 MB	3.86 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-primevue-DZ--Ysu_.js	1.96 MB	1.96 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-three-C1LfRdh4.js	1.37 MB	1.37 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-tiptap-C1NB2Q_L.js	232 kB	232 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-vue-DSfeuQOV.js	160 kB	160 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-xterm-BF8peZ5_.js	420 kB	420 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Other — 3.44 MB (baseline 3.44 MB) • 🟢 -131 B

Bundles that do not match a named category

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/SubscriptionRequiredDialogContent-Birt0W5X.js~~ (removed)	28.1 kB	—	🟢 -28.1 kB	🟢 -6.35 kB	🟢 -5.51 kB
assets/SubscriptionRequiredDialogContent-CLNRHsq4.js (new)	—	28 kB	🔴 +28 kB	🔴 +6.34 kB	🔴 +5.49 kB
~~assets/WidgetRecordAudio-qiiF9qL1.js~~ (removed)	20.4 kB	—	🟢 -20.4 kB	🟢 -5.23 kB	🟢 -4.63 kB
assets/WidgetRecordAudio-xQeyYf7t.js (new)	—	20.4 kB	🔴 +20.4 kB	🔴 +5.23 kB	🔴 +4.64 kB
~~assets/AudioPreviewPlayer-gHE4Ot-o.js~~ (removed)	13.4 kB	—	🟢 -13.4 kB	🟢 -3.37 kB	🟢 -3.01 kB
assets/AudioPreviewPlayer-Dki3JO7Y.js (new)	—	13.3 kB	🔴 +13.3 kB	🔴 +3.35 kB	🔴 +2.99 kB
~~assets/ValueControlPopover-3mxX-uGT.js~~ (removed)	5.49 kB	—	🟢 -5.49 kB	🟢 -1.7 kB	🟢 -1.51 kB
assets/ValueControlPopover-nnVwNKMn.js (new)	—	5.49 kB	🔴 +5.49 kB	🔴 +1.7 kB	🔴 +1.51 kB
~~assets/WidgetGalleria-C-VRIkRb.js~~ (removed)	4.1 kB	—	🟢 -4.1 kB	🟢 -1.44 kB	🟢 -1.3 kB
assets/WidgetGalleria-ws_QjtSF.js (new)	—	4.1 kB	🔴 +4.1 kB	🔴 +1.44 kB	🔴 +1.3 kB
assets/WidgetColorPicker-BgFK5Ncp.js (new)	—	3.41 kB	🔴 +3.41 kB	🔴 +1.38 kB	🔴 +1.23 kB
~~assets/WidgetColorPicker-CLkRITse.js~~ (removed)	3.41 kB	—	🟢 -3.41 kB	🟢 -1.38 kB	🟢 -1.23 kB
assets/WidgetTextarea-BEsf35-z.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.21 kB	🔴 +1.08 kB
~~assets/WidgetTextarea-DnqTmZ3N.js~~ (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.21 kB	🟢 -1.08 kB
assets/WidgetMarkdown-D1j3E4wR.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.28 kB	🔴 +1.13 kB
~~assets/WidgetMarkdown-DhGh8PCS.js~~ (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.28 kB	🟢 -1.13 kB
~~assets/WidgetAudioUI-OGHDDmw_.js~~ (removed)	2.94 kB	—	🟢 -2.94 kB	🟢 -1.18 kB	🟢 -1.07 kB
assets/WidgetAudioUI-B1nnVbmK.js (new)	—	2.89 kB	🔴 +2.89 kB	🔴 +1.17 kB	🔴 +1.06 kB
assets/WidgetInputText-CZMhRPZk.js (new)	—	1.99 kB	🔴 +1.99 kB	🔴 +919 B	🔴 +848 B
~~assets/WidgetInputText-WBB2Ihp3.js~~ (removed)	1.99 kB	—	🟢 -1.99 kB	🟢 -916 B	🟢 -841 B
~~assets/WidgetToggleSwitch-Cyif9_3K.js~~ (removed)	1.76 kB	—	🟢 -1.76 kB	🟢 -831 B	🟢 -730 B
assets/WidgetToggleSwitch-Dc5lLqEz.js (new)	—	1.76 kB	🔴 +1.76 kB	🔴 +833 B	🔴 +735 B
~~assets/MediaImageBottom-DMi0WAcr.js~~ (removed)	1.55 kB	—	🟢 -1.55 kB	🟢 -730 B	🟢 -639 B
assets/MediaImageBottom-JY4lXpU5.js (new)	—	1.55 kB	🔴 +1.55 kB	🔴 +735 B	🔴 +642 B
~~assets/MediaAudioBottom-D4FBjNd2.js~~ (removed)	1.51 kB	—	🟢 -1.51 kB	🟢 -727 B	🟢 -644 B
assets/MediaAudioBottom-DkyUNPGE.js (new)	—	1.51 kB	🔴 +1.51 kB	🔴 +732 B	🔴 +649 B
assets/Media3DBottom-Bdo7cjFj.js (new)	—	1.5 kB	🔴 +1.5 kB	🔴 +730 B	🔴 +646 B
~~assets/Media3DBottom-JHbVClwo.js~~ (removed)	1.5 kB	—	🟢 -1.5 kB	🟢 -730 B	🟢 -644 B
assets/MediaVideoBottom-CKzRjvf_.js (new)	—	1.5 kB	🔴 +1.5 kB	🔴 +729 B	🔴 +643 B
~~assets/MediaVideoBottom-DYnOMgAa.js~~ (removed)	1.5 kB	—	🟢 -1.5 kB	🟢 -725 B	🟢 -643 B
assets/Media3DTop-19XN_KaO.js (new)	—	1.49 kB	🔴 +1.49 kB	🔴 +765 B	🔴 +655 B
~~assets/Media3DTop-C6Ztrp4O.js~~ (removed)	1.49 kB	—	🟢 -1.49 kB	🟢 -761 B	🟢 -654 B
assets/WidgetSelect-BXO7qAbU.js (new)	—	733 B	🔴 +733 B	🔴 +361 B	🔴 +322 B
~~assets/WidgetSelect-DFnPZYN9.js~~ (removed)	733 B	—	🟢 -733 B	🟢 -364 B	🟢 -328 B
assets/WidgetInputNumber-BMmOi_Ep.js (new)	—	673 B	🔴 +673 B	🔴 +346 B	🔴 +293 B
~~assets/WidgetInputNumber-C2sVxtJ_.js~~ (removed)	673 B	—	🟢 -673 B	🟢 -345 B	🟢 -287 B
assets/Load3D-g4078JCQ.js (new)	—	424 B	🔴 +424 B	🔴 +270 B	🔴 +230 B
~~assets/Load3D-M5rKVtcG.js~~ (removed)	424 B	—	🟢 -424 B	🟢 -269 B	🟢 -230 B
~~assets/WidgetLegacy-Cc_tERHw.js~~ (removed)	364 B	—	🟢 -364 B	🟢 -236 B	🟢 -194 B
assets/WidgetLegacy-nnxZlBmP.js (new)	—	364 B	🔴 +364 B	🔴 +236 B	🔴 +199 B
assets/commands-BWp4HdfU.js	101 B	101 B	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CcfGaui5.js	14.4 kB	14.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CisfgZf5.js	13.7 kB	13.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CkU12Foh.js	13 kB	13 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CoH2DJa6.js	14.2 kB	14.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-COSt-Bjx.js	14.9 kB	14.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DalfIW5f.js	15.9 kB	15.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DfTl0eCm.js	13.5 kB	13.5 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DwSJL865.js	13.7 kB	13.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-Zxyx15Vd.js	12.8 kB	12.8 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-BDhxs-bB.js	79.9 kB	79.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-BtXVDFw6.js	84.7 kB	84.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Buv6RhU4.js	82.4 kB	82.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CgJ6zvJL.js	97.2 kB	97.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CI9qb0E5.js	112 kB	112 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Cu4LqtW0.js	81.6 kB	81.6 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Cw9RZWRY.js	89 B	89 B	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Dm19QY4N.js	92.2 kB	92.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Tihe0h_r.js	71.3 kB	71.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-wPWMutMw.js	70.4 kB	70.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaAudioTop-Dr0afgCA.js	1.46 kB	1.46 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaImageTop-BXa-oKEc.js	1.75 kB	1.75 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaVideoTop-BVdg2b8C.js	2.65 kB	2.65 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-1Vh3MCrN.js	240 kB	240 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-aW9En70v.js	260 kB	260 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-BIckSVgU.js	273 kB	273 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-BiYpVi7D.js	263 kB	263 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-Bw_Jitw_.js	101 B	101 B	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-CCEXtYfM.js	243 kB	243 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-CvmVDWYd.js	323 kB	323 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-D_wreoPJ.js	267 kB	267 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-Dz-0ZIBN.js	297 kB	297 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-VZsNmhG7.js	264 kB	264 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetChart-DT6E_SOn.js	2.48 kB	2.48 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetImageCompare-BB9nVmFq.js	2.21 kB	2.21 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/widgetPropFilter-BIbGSUAt.js	1.28 kB	1.28 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 20 added / 20 removed

christian-byrne · 2025-12-03T02:42:10Z

It seems the test is broken?

tests-ui/tests/composables/graph/useSelectionState.test.ts

src/composables/graph/useSelectionState.ts

Copilot

Pull request overview

This PR adds automatic synchronization of the node help panel with the currently selected node and includes comprehensive unit tests. The composable is refactored to use Vue's shared composable pattern for better instance management.

Implements a watcher using VueUse's whenever to automatically sync the help panel when selection changes
Adds unit tests covering help auto-switching behavior and guard conditions
Refactors useSelectionState to use createSharedComposable for proper instance sharing

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/composables/graph/useSelectionState.ts	Adds `whenever` watcher for help panel sync, wraps composable with `createSharedComposable`, and improves type safety by removing `any` annotations
tests-ui/tests/composables/graph/useSelectionState.test.ts	Adds test infrastructure with component mounting helpers, updates existing tests to use mounted components, adds new test suite for help sync behavior, and includes proper cleanup in `afterEach`

src/composables/graph/useSelectionState.ts

tests-ui/tests/composables/graph/useSelectionState.test.ts

coderabbitai

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

tests-ui/tests/composables/graph/useSelectionState.test.ts (1)
186-204: Critical: Mock isHelpOpen must be reactive for watcher tests to work correctly.

The mock nodeHelpStore.isHelpOpen is a plain boolean property, but in the real store it's a computed ref. The watcher in useSelectionState watches () => (nodeHelpStore.isHelpOpen ? nodeDef.value : null), which depends on isHelpOpen being reactive. Directly assigning to the mock property (lines 356, 362) won't trigger the watcher because Vue's reactivity system won't track changes to plain properties.

To fix this, make the mock reactive using a ref with a getter:
+  const mockIsHelpOpen = ref(false)
+  const mockCurrentHelpNode = ref(null)
   const mockOpenHelp = vi.fn()
   const mockCloseHelp = vi.fn()
   const mockNodeHelpStore = {
-    isHelpOpen: false,
-    currentHelpNode: null,
+    get isHelpOpen() {
+      return mockIsHelpOpen.value
+    },
+    set isHelpOpen(value: boolean) {
+      mockIsHelpOpen.value = value
+    },
+    get currentHelpNode() {
+      return mockCurrentHelpNode.value
+    },
+    set currentHelpNode(value: any) {
+      mockCurrentHelpNode.value = value
+    },
     openHelp: mockOpenHelp,
     closeHelp: mockCloseHelp,
     // Add minimal required properties for the store
Then update the test to use the refs:
   test('opens help for newly selected node when help is open', async () => {
     const nodeHelpStore = useNodeHelpStore() as any
-    nodeHelpStore.isHelpOpen = true
-    nodeHelpStore.currentHelpNode = { nodePath: 'NodeA' }
+    mockIsHelpOpen.value = true
+    mockCurrentHelpNode.value = { nodePath: 'NodeA' }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4c3718f and 19e1ede.

📒 Files selected for processing (2)

src/composables/graph/useSelectionState.ts (5 hunks)
tests-ui/tests/composables/graph/useSelectionState.test.ts (7 hunks)

🧰 Additional context used

📓 Path-based instructions (16)

**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json

Files:

src/composables/graph/useSelectionState.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursorrules)

Use es-toolkit for utility functions

Files:

src/composables/graph/useSelectionState.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

Use TypeScript for type safety

**/*.{ts,tsx}: Never use any type - use proper TypeScript types
Never use as any type assertions - fix the underlying type issue

Files:

src/composables/graph/useSelectionState.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (.cursorrules)

Implement proper error handling in components and services

**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in .prettierrc
Organize imports by sorting and grouping by plugin, and run pnpm format before committing

Files:

src/composables/graph/useSelectionState.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

src/composables/graph/useSelectionState.ts

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

Files:

src/composables/graph/useSelectionState.ts

**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use camelCase for variable and setting names in TypeScript/Vue files

Files:

src/composables/graph/useSelectionState.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,vue}: Use const settingStore = useSettingStore() and settingStore.get('Comfy.SomeSetting') to retrieve settings in TypeScript/Vue files
Use await settingStore.set('Comfy.SomeSetting', newValue) to update settings in TypeScript/Vue files
Check server capabilities using api.serverSupportsFeature('feature_name') before using enhanced features
Use api.getServerFeature('config_name', defaultValue) to retrieve server feature configuration

Enforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates

Files:

src/composables/graph/useSelectionState.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
Use defaultsByInstallVersion property for gradual feature rollout based on version in settings configuration

Files:

src/composables/graph/useSelectionState.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

src/**/{services,composables}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/{services,composables}/**/*.{ts,tsx}: Use api.apiURL() for backend endpoints instead of constructing URLs directly
Use api.fileURL() for static file access instead of constructing URLs directly

Files:

src/composables/graph/useSelectionState.ts

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

Files:

src/composables/graph/useSelectionState.ts

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

src/composables/graph/useSelectionState.ts

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/composables/graph/useSelectionState.ts

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

src/composables/graph/useSelectionState.ts

tests-ui/**/*.test.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)

tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocks

Files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

**/*.{test,spec}.{ts,tsx,js}

📄 CodeRabbit inference engine (AGENTS.md)

Unit and component tests should be located in tests-ui/ or co-located with components as src/components/**/*.{test,spec}.ts; E2E tests should be in browser_tests/

Files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

🧠 Learnings (27)

📓 Common learnings

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features

📚 Learning: 2025-11-24T19:46:52.279Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilities

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:46:52.279Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Applied to files:

src/composables/graph/useSelectionState.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement computed properties with computed()

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:46:52.279Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Implement computed properties with computed() function

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:56.371Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilities

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebase

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:56.371Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use Suspense for async components

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:46:52.279Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Use Suspense for async components in Vue 3

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:23.088Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T19:48:23.088Z
Learning: Use Vitest (with happy-dom) for unit and component tests, and Playwright for E2E tests

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use Teleport/Suspense when needed for component rendering

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Check tests-ui/README.md for test guidelines

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `vitest` for unit testing in this project

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `test` instead of `it` for defining test cases in vitest

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

🧬 Code graph analysis (1)

tests-ui/tests/composables/graph/useSelectionState.test.ts (2)

src/composables/graph/useSelectionState.ts (1)

useSelectionState (156-158)

browser_tests/fixtures/utils/litegraphUtils.ts (2)

isBypassed (354-356)

isPinned (348-350)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

GitHub Check: CodeQL analysis (javascript-typescript)
GitHub Check: Agent
GitHub Check: setup
GitHub Check: lint-and-format
GitHub Check: test
GitHub Check: collect

🔇 Additional comments (5)

tests-ui/tests/composables/graph/useSelectionState.test.ts (2)

84-126: LGTM: Well-structured mount helpers.

The mount helpers follow Vue Test Utils best practices and properly integrate with the component lifecycle. The mountHelpSyncHarness provides a clean way to test the watcher behavior through user interactions.

228-230: LGTM: Proper cleanup prevents memory leaks.

The afterEach hook correctly unmounts all test components, preventing memory leaks between tests.

src/composables/graph/useSelectionState.ts (3)

1-1: LGTM: Proper use of VueUse utilities.

Using createSharedComposable ensures all callers get the same instance, which is essential for the help sync watcher to work correctly. This prevents multiple watcher instances from independently trying to manage the help panel.

As per coding guidelines: Leveraging VueUse functions for performance-enhancing utilities.

Also applies to: 156-158

98-107: LGTM: Well-implemented help synchronization.

The whenever watcher correctly:

Watches a conditional expression that returns nodeDef only when help is open

Includes a guard to prevent redundant openHelp calls when the same node is already displayed

Leverages VueUse's type narrowing to exclude null from the callback parameter

The logic ensures help content stays synchronized with the selected node when the panel is open.

120-124: LGTM: Safer type handling with optional chaining.

The optional chaining on currentHelpNode?.nodePath properly handles the case where currentHelpNode is null, which aligns with its type definition Ref<ComfyNodeDefImpl | null>.

tests-ui/tests/composables/graph/useSelectionState.test.ts

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 19e1ede and 5ff1e8b.

📒 Files selected for processing (2)

browser_tests/tests/nodeHelp.spec.ts (0 hunks)
src/composables/graph/useSelectionState.ts (5 hunks)

💤 Files with no reviewable changes (1)

browser_tests/tests/nodeHelp.spec.ts

🧰 Additional context used

📓 Path-based instructions (10)

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

src/composables/graph/useSelectionState.ts

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

Files:

src/composables/graph/useSelectionState.ts

src/**/{services,composables}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/{services,composables}/**/*.{ts,tsx}: Use api.apiURL() for backend endpoints instead of constructing URLs directly
Use api.fileURL() for static file access instead of constructing URLs directly

Files:

src/composables/graph/useSelectionState.ts

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

Files:

src/composables/graph/useSelectionState.ts

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

src/composables/graph/useSelectionState.ts

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/composables/graph/useSelectionState.ts

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

src/composables/graph/useSelectionState.ts

**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript exclusively; no new JavaScript code

Files:

src/composables/graph/useSelectionState.ts

**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,vue}: Use camelCase for variable and function names
Indent with 2 spaces (see .prettierrc)
Use single quotes for strings (see .prettierrc)
No trailing semicolons (see .prettierrc)
Maximum line width of 80 characters (see .prettierrc)
Sort and group imports by plugin (run pnpm format before committing)
Never use any type; use proper TypeScript types instead
Never use as any type assertions; fix the underlying type issue instead
Avoid code comments unless absolutely necessary; write expressive, self-documenting code instead
When writing new code, ask if there is a simpler way to introduce the same functionality; if yes, choose the simpler approach
Use refactoring to make complex code simpler
Use es-toolkit for utility functions
Use Vite for fast development and building
Implement proper error handling
Write tests for all changes, especially bug fixes to catch future regressions

Files:

src/composables/graph/useSelectionState.ts

**/composables/**/use*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Name composables with useXyz.ts pattern

Files:

src/composables/graph/useSelectionState.ts

🧠 Learnings (6)

📓 Common learnings

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features

📚 Learning: 2025-11-24T19:47:34.324Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-12-06T00:52:35.750Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T00:52:35.750Z
Learning: Applies to **/*.vue : Use `computed` instead of a `ref` and `watch` if possible

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

src/composables/graph/useSelectionState.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: test
GitHub Check: setup
GitHub Check: lint-and-format
GitHub Check: collect

🔇 Additional comments (3)

src/composables/graph/useSelectionState.ts (3)

1-2: LGTM!

Good use of whenever from VueUse (preferred over manual ref + watch per coding guidelines) and getActivePinia for the per-Pinia instance caching pattern.

98-107: LGTM — whenever ensures def is truthy.

The whenever callback only fires when the source returns a truthy value. Since the getter returns null when help is closed or when there's no single-node selection, def will always be the valid node definition when the callback executes.

The previous Copilot suggestion for a null check is unnecessary here due to whenever's semantics.

120-124: LGTM!

Good use of optional chaining for null-safety, consistent with the pattern in the whenever callback.

src/composables/graph/useSelectionState.ts

christian-byrne

Would it be possible for the node help component to observe the selection state rather than making the selection state push signals to the node help system?

benceruleanlu · 2025-12-09T11:28:25Z

Would it be possible for the node help component to observe the selection state rather than making the selection state push signals to the node help system?

Sure

coderabbitai

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5ff1e8b and 65d07a0.

📒 Files selected for processing (4)

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue (2 hunks)
src/composables/graph/useSelectionState.ts (4 hunks)
tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts (1 hunks)
tests-ui/tests/composables/graph/useSelectionState.test.ts (7 hunks)

🧰 Additional context used

📓 Path-based instructions (17)

tests-ui/**/*.test.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)

tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocks

Files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

**/*.{js,ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript exclusively (no new JavaScript)

Files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts
src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Do not use any type in TypeScript code
Do not use as any type assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; run pnpm format before committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates

Files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts
src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

**/*.test.ts

📄 CodeRabbit inference engine (AGENTS.md)

**/*.test.ts: Write unit and component tests in **/*.test.ts
Use Vitest with happy-dom for unit and component tests

Files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

Use vue-i18n in Composition API for string literals and place new translation entries in src/locales/en/main.json

Files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts
src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/*.{vue,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions

Files:

src/composables/graph/useSelectionState.ts

src/**/{services,composables}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/{services,composables}/**/*.{ts,tsx}: Use api.apiURL() for backend endpoints instead of constructing URLs directly
Use api.fileURL() for static file access instead of constructing URLs directly

Files:

src/composables/graph/useSelectionState.ts

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g., if () { ... } or for () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Name Vue components in PascalCase (e.g., MenuHamburger.vue)

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/components/**/*.{vue,css}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

src/components/**/*.{vue,ts,js}

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3 SFCs with Composition API only (.vue files)
Use Tailwind 4 styling and avoid <style> blocks in Vue components
Use <script setup lang="ts"> for component logic in Vue components
Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Do not use withDefaults or runtime props declaration in Vue components
Prefer useModel to separately defining a prop and emit in Vue components
Use ref for reactive state in Vue components
Implement computed properties with computed() instead of using ref and watch
Use watch and watchEffect for side effects in Vue components
Use provide/inject for dependency injection only when simpler alternatives (Store or composable) are not suitable
Do not use the dark: Tailwind variant; use semantic values from style.css theme instead (e.g., bg-node-component-surface)
Use import { cn } from '@/utils/tailwindUtil' to merge class names instead of :class="[]"
Avoid new usage of PrimeVue components
Use VueUse functions for performance-enhancing styles in Vue components
Do not import Vue macros unnecessarily in components
Be judicious with addition of new refs or other state; prefer using props or composables when possible
Do not add a computed if it's possible to use a ref or prop directly
Do not use a watch if a computed would work instead
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

Files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

🧠 Learnings (37)

📓 Common learnings

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features

📚 Learning: 2025-11-24T19:47:56.371Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebase

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilities

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.test.ts : Write unit and component tests in `**/*.test.ts`

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.test.ts : Use Vitest with happy-dom for unit and component tests

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `vitest` for unit testing in this project

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Check tests-ui/README.md for test guidelines

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:22.909Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test across multiple viewports

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts

📚 Learning: 2025-12-09T03:39:54.501Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.

Applied to files:

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts
tests-ui/tests/composables/graph/useSelectionState.test.ts
src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:34.324Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:22.909Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:56.371Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/composables/use*.ts : Name composables as `useXyz.ts`

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use Suspense for async components

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use Suspense for async components

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use Teleport/Suspense when needed for component rendering

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:22.909Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:56.371Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts
src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `test` instead of `it` for defining test cases in vitest

Applied to files:

tests-ui/tests/composables/graph/useSelectionState.test.ts

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/stores/*Store.ts : Name Pinia stores as `*Store.ts`

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Do not use a `watch` if a `computed` would work instead

Applied to files:

src/composables/graph/useSelectionState.ts

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

src/composables/graph/useSelectionState.ts
src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-09T03:49:52.828Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-04T21:43:49.363Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0
Timestamp: 2025-12-04T21:43:49.363Z
Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue components

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state; prefer using props or composables when possible

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

📚 Learning: 2025-12-09T02:44:38.234Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` for component logic in Vue components

Applied to files:

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

🧬 Code graph analysis (2)

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts (2)

src/composables/graph/useSelectionState.ts (1)

useSelectionState (149-159)

src/stores/workspace/nodeHelpStore.ts (1)

useNodeHelpStore (10-69)

tests-ui/tests/composables/graph/useSelectionState.test.ts (3)

src/composables/graph/useSelectionState.ts (1)

useSelectionState (149-159)

browser_tests/fixtures/utils/litegraphUtils.ts (3)

isBypassed (354-356)

isPinned (348-350)

isCollapsed (351-353)

src/lib/litegraph/src/litegraph.ts (1)

LGraphEventMode (127-127)

🔇 Additional comments (2)

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue (1)

87-87: Help/selection sync watcher looks correct and well‑scoped

The new whenever watcher correctly:

Gates on nodeHelpStore.isHelpOpen and a single nodeDef

Avoids redundant openHelp when the same node is already shown

Delegates to the existing store API without changing sidebar/tab behavior

This aligns with the intended “only sync while help is open” semantics and keeps the logic nicely localized to the help page.

Also applies to: 93-93, 101-101, 123-132

src/composables/graph/useSelectionState.ts (1)

25-42: Per‑Pinia caching and typed currentHelpNode look good

The refactor to:

Move the core logic into useSelectionStateInternal,

Cache its result per active Pinia instance via selectionStateByPinia, and

Use a properly typed currentHelpNode with currentHelpNode?.nodePath in showNodeHelp

provides a single shared selection state per app, avoids duplicated watchers, and removes the implicit any around the help node comparison without changing behavior.

This is a solid structural improvement and keeps the public API of useSelectionState intact.

Also applies to: 80-101, 106-113, 144-159

coderabbitai · 2025-12-09T11:44:57Z

tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts

+  const selection = ref<any | null>(null)
+  let openHelp: ReturnType<typeof vi.fn>
+
+  const mountPage = () =>
+    mount(NodeHelpPage, {
+      props: { node: baseNode as any },
+      global: {
+        stubs: {
+          ProgressSpinner: true,
+          Button: true
+        }
+      }
+    })
+
+  beforeEach(() => {
+    vi.resetAllMocks()
+    selection.value = null
+    openHelp = vi.fn()
+
+    vi.mocked(useSelectionState).mockReturnValue({
+      nodeDef: computed(() => selection.value)
+    } as any)
+
+    vi.mocked(useNodeHelpStore).mockReturnValue({
+      renderedHelpHtml: ref('<p>help</p>'),
+      isLoading: ref(false),
+      error: ref(null),
+      isHelpOpen: true,
+      currentHelpNode: { nodePath: 'NodeA' },
+      openHelp,
+      closeHelp: vi.fn()
+    } as any)


🛠️ Refactor suggestion | 🟠 Major

Avoid any / as any in test typings

This test uses ref<any | null> and several as any assertions for props and mocked composables. Given the repo guidelines for TypeScript, it would be better to give these values concrete structural types.

For example:

Type selection as ref<{ nodePath: string } | null> instead of any.

Type the mocked useSelectionState return as Pick<ReturnType<typeof useSelectionState>, 'nodeDef'> (or a small local interface) instead of as any.

Likewise, type the useNodeHelpStore mock as Partial<ReturnType<typeof useNodeHelpStore>> and satisfy only the fields this test needs.

This keeps tests aligned with the real APIs and avoids any while remaining lightweight.

Also applies to: 58-61, 66-87

🤖 Prompt for AI Agents

In tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts around lines 21-52 (also applies to lines 58-61 and 66-87), the test uses broad any/as any typings for selection, props and mocked composables; replace these with concrete lightweight types: declare selection as ref<{ nodePath: string } | null>, type the mocked useSelectionState return as Pick<ReturnType<typeof useSelectionState>, 'nodeDef'> (or a small local interface exposing nodeDef), and type the useNodeHelpStore mock as Partial<ReturnType<typeof useNodeHelpStore>> providing only renderedHelpHtml, isLoading, error, isHelpOpen, currentHelpNode, openHelp and closeHelp; update the mount props to match the component prop type rather than using as any so the test uses real structural types without introducing heavy typings.

coderabbitai · 2025-12-09T11:44:57Z

tests-ui/tests/composables/graph/useSelectionState.test.ts

+  const mountedWrappers: VueWrapper[] = []
  // Mock store instances
  let mockSelectedItems: Ref<MockedItem[]>

+  const mountSelectionStateComposable = () => {
+    let selectionState: ReturnType<typeof useSelectionState>
+    const wrapper = mount({
+      template: '<div />',
+      setup() {
+        selectionState = useSelectionState()
+        return {}
+      }
+    })
+    mountedWrappers.push(wrapper)
+    return { selectionState: selectionState! }
+  }


🛠️ Refactor suggestion | 🟠 Major

Tighten mock typings to avoid any / as any

The mocks for the Pinia stores and composables (useCanvasStore, useNodeDefStore, useSidebarTabStore, useNodeHelpStore, useNodeLibrarySidebarTab, filterOutputNodes, etc.) all return objects cast with as any.

To stay within the TypeScript guidelines, consider:

Typing each mock as Partial<ReturnType<typeof useXxxStore>> (or Pick of the fields you actually use), and

Letting TS infer shapes instead of blanket as any.

This keeps the tests closer to the real store contracts without adding much verbosity.

Also applies to: 101-199

🤖 Prompt for AI Agents

In tests-ui/tests/composables/graph/useSelectionState.test.ts around lines 84-99 (and similarly for 101-199), the store/composable mocks are typed with "as any"; tighten those typings by declaring each mock as Partial<ReturnType<typeof useCanvasStore>> (or Pick<ReturnType<typeof useXxxStore>, 'fieldA' | 'fieldB'> for only the fields used) instead of using any, instantiate the mock objects with just the properties the code under test needs so TypeScript can infer shapes, and update any usages to match the narrowed types (adjust Ref/Reactive wrappers where necessary) to remove the blanket casts and satisfy TS type checks.

coderabbitai · 2025-12-09T11:44:57Z

tests-ui/tests/composables/graph/useSelectionState.test.ts

+    test('should provide non-reactive state computation', async () => {
      // Update the mock data before creating the composable
      const node = createTestNode({ pinned: true })
      mockSelectedItems.value = [node]

-      const { selectedNodes } = useSelectionState()
-      const isPinned = selectedNodes.value.some((n) => n.pinned === true)
-      const isCollapsed = selectedNodes.value.some(
+      const { selectionState } = mountSelectionStateComposable()
+      const isPinned = selectionState.selectedNodes.value.some(
+        (n) => n.pinned === true
+      )
+      const isCollapsed = selectionState.selectedNodes.value.some(
        (n) => n.flags?.collapsed === true
      )
-      const isBypassed = selectedNodes.value.some(
+      const isBypassed = selectionState.selectedNodes.value.some(
        (n) => n.mode === LGraphEventMode.BYPASS
      )

      expect(isPinned).toBe(true)
      expect(isCollapsed).toBe(false)
      expect(isBypassed).toBe(false)

-      // Test with empty selection using new composable instance
+      // Test with empty selection using updated selection
      mockSelectedItems.value = []
-      const { selectedNodes: newSelectedNodes } = useSelectionState()
-      const newIsPinned = newSelectedNodes.value.some((n) => n.pinned === true)
+      await flushPromises()
+
+      const newIsPinned = selectionState.selectedNodes.value.some(
+        (n) => n.pinned === true
+      )
      expect(newIsPinned).toBe(false)
    })


⚠️ Potential issue | 🟡 Minor

Align test name with behavior or exercise computeSelectionFlags

test('should provide non-reactive state computation', ...) currently only inspects selectionState.selectedNodes.value before and after updating mockSelectedItems, and does not call selectionState.computeSelectionFlags().

Either:

Update the test to call computeSelectionFlags() and assert on the returned NodeSelectionState, or

Rename the test to reflect that it verifies reactive updates to selectedNodes after selection changes.

This will make the intent of the test clearer and keep it in sync with the composable API.

🤖 Prompt for AI Agents

tests-ui/tests/composables/graph/useSelectionState.test.ts lines 268-296: the test name says "non-reactive state computation" but the code only inspects selectionState.selectedNodes and never calls selectionState.computeSelectionFlags(); either rename the test to reflect reactive selectedNodes behavior or (preferred) call selectionState.computeSelectionFlags() after creating the composable and after updating mockSelectedItems, then assert on the returned NodeSelectionState properties (e.g., pinned/collapsed/mode flags) to verify the computed, non-reactive snapshot; update assertions accordingly and keep the existing flushPromises before the second compute call.

christian-byrne · 2025-12-12T05:27:50Z

The unit tests seem to be failing

benceruleanlu · 2025-12-18T03:38:29Z

Missed this notification, going to fix soon

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

benceruleanlu · 2025-12-20T04:46:07Z

refactor node help watch source #7660
Sync node help with selection and add watcher tests #7105 👈 (View in Graphite)
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

benceruleanlu added 2 commits December 2, 2025 14:20

Sync node help with selection

a436c94

Test: auto-sync node help on selection change

4c3718f

benceruleanlu requested a review from a team as a code owner December 2, 2025 23:20

dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Dec 2, 2025

DrJKL reviewed Dec 3, 2025

View reviewed changes

tests-ui/tests/composables/graph/useSelectionState.test.ts Outdated Show resolved Hide resolved

DrJKL reviewed Dec 3, 2025

View reviewed changes

src/composables/graph/useSelectionState.ts Outdated Show resolved Hide resolved

DrJKL reviewed Dec 3, 2025

View reviewed changes

src/composables/graph/useSelectionState.ts Outdated Show resolved Hide resolved

benceruleanlu added 3 commits December 5, 2025 14:13

switch to whenever

82e13d4

switch to shared composable

00aaa14

Test: drive help sync via mounted harness

19e1ede

Copilot AI review requested due to automatic review settings December 5, 2025 22:16

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:M This PR changes 30-99 lines, ignoring generated files. labels Dec 5, 2025

benceruleanlu requested a review from DrJKL December 5, 2025 22:16

Copilot started reviewing on behalf of benceruleanlu December 5, 2025 22:16 View session

Copilot AI reviewed Dec 5, 2025

View reviewed changes

src/composables/graph/useSelectionState.ts Outdated Show resolved Hide resolved

tests-ui/tests/composables/graph/useSelectionState.test.ts Outdated Show resolved Hide resolved

coderabbitai bot reviewed Dec 5, 2025

View reviewed changes

tests-ui/tests/composables/graph/useSelectionState.test.ts Outdated Show resolved Hide resolved

benceruleanlu added 2 commits December 5, 2025 20:31

Update browser test

22cdd36

Scope selection state per pinia

5ff1e8b

coderabbitai bot reviewed Dec 6, 2025

View reviewed changes

src/composables/graph/useSelectionState.ts Outdated Show resolved Hide resolved

christian-byrne reviewed Dec 9, 2025

View reviewed changes

benceruleanlu added 2 commits December 9, 2025 03:37

Move whenever to NodeHelpPage.vue

65d07a0

Revert changes for better diff

d859246

coderabbitai bot reviewed Dec 9, 2025

View reviewed changes

Merge remote-tracking branch 'origin/main'

b9f22c3

Mock $t

07e0b31

benceruleanlu requested a review from christian-byrne December 20, 2025 00:09

christian-byrne approved these changes Dec 20, 2025

View reviewed changes

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue Show resolved Hide resolved

christian-byrne assigned benceruleanlu Dec 20, 2025

benceruleanlu mentioned this pull request Dec 20, 2025

refactor node help watch source #7660

Open

benceruleanlu merged commit f6bc10b into main Dec 20, 2025
27 checks passed

benceruleanlu deleted the feat/help-help-sync branch December 20, 2025 04:51

Sync node help with selection and add watcher tests #7105

Sync node help with selection and add watcher tests #7105

Conversation

benceruleanlu commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Testing

Uh oh!

coderabbitai bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

github-actions bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Test Results

📈 Summary

📊 Test Reports by Browser

Uh oh!

github-actions bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

🔗 Links

Uh oh!

github-actions bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

Uh oh!

christian-byrne commented Dec 3, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

christian-byrne left a comment

Choose a reason for hiding this comment

Uh oh!

benceruleanlu commented Dec 9, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

christian-byrne commented Dec 12, 2025

Uh oh!

benceruleanlu commented Dec 18, 2025

Uh oh!

Uh oh!

benceruleanlu commented Dec 20, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

benceruleanlu commented Dec 2, 2025 •

edited

Loading

coderabbitai bot commented Dec 2, 2025 •

edited

Loading

github-actions bot commented Dec 2, 2025 •

edited

Loading

github-actions bot commented Dec 2, 2025 •

edited

Loading

github-actions bot commented Dec 2, 2025 •

edited

Loading