## Summary
I want to take a more general look at `comfyApp.graph.onTrigger` but
this is the cleanest fix I could come up with for #5694.
I will explore simplifying onTrigger in a separate PR.
## Changes
1. Create a `node:slot-errors:changed` trigger.
2. Trigger it if we find any of the node slots have errors.
3. Check each node to see if there is any error present.
4. Add an error class if there are.
## Screenshots (if applicable)
Working error states!
<img width="1049" height="987" alt="Screenshot 2025-09-23 at 8 40 04 PM"
src="https://github.com/user-attachments/assets/30e13283-129c-4d9c-b342-e7037582998a"
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5758-fix-properly-show-error-states-2786d73d365081cbbf62c314c7f5f380)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Alexander Brown <drjkl@comfy.org>
## Summary
Refactored `onUserResolved` function in auth composable to use VueUse
`whenever` utility instead of manual watch implementation and use
`immediate` option instead of invoking manually before creating watcher.
## Changes
- **What**: Replaced manual watch + immediate check pattern with [VueUse
whenever](https://vueuse.org/shared/whenever/) utility in
`useCurrentUser.ts:37`
## Review Focus
Behavioral equivalence verification - `whenever` with `immediate: true`
should maintain identical callback timing and cleanup semantics.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5718-refactor-Simplify-current-user-resolved-hook-implementation-2766d73d365081008b6de156dd78f940)
by [Unito](https://www.unito.io)
## Summary
Prerequisite refactor/cleanup to use a global store instead of having
nodes throw up events to a parent component that stores a reference to a
singleton service that itself bootstraps and synchronizes with a
separate service to maintain a partially reactive but not fully reactive
set of states that describe some but not all aspects of the nodes on
either the litegraph, the vue side, or both.
## Changes
- **What**: Refactoring, the behavior should not change.
- **Dependencies**: A type utility to help with Vue component props
## Review Focus
Is there something about the current structure that this could affect
that would not be caught by our tests or using the application?
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5695-Refactor-Composable-disentangling-2746d73d365081e6938ce656932f3e36)
by [Unito](https://www.unito.io)
## Summary
- Replace custom `compareVersions()` with `semver.compare()`
- Replace custom `isSemVer()` with `semver.valid()`
- Remove deprecated version comparison functions from `formatUtil.ts`
- Update all version comparison logic across components and stores
- Fix tests to use semver mocking instead of formatUtil mocking
## Benefits
- **Industry standard**: Uses well-maintained, battle-tested `semver`
package
- **Better reliability**: Handles edge cases more robustly than custom
implementation
- **Consistent behavior**: All version comparisons now use the same
underlying logic
- **Type safety**: Better TypeScript support with proper semver types
Fixes#4787
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5653-refactor-Replace-manual-semantic-version-utilities-functions-with-semver-package-2736d73d365081fb8498ee11cbcc10e2)
by [Unito](https://www.unito.io)
---------
Co-authored-by: DrJKL <DrJKL@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Reorganized custom nodes manager functionality from scattered technical
layers into a cohesive domain-focused module following [domain-driven
design](https://en.wikipedia.org/wiki/Domain-driven_design) principles.
## Changes
- **What**: Migrated all manager code from technical layers
(`src/components/`, `src/stores/`, etc.) to unified domain structure at
`src/workbench/extensions/manager/`
- **Breaking**: Import paths changed for all manager-related modules
(40+ files updated)
## Review Focus
Verify all import path updates are correct and no circular dependencies
introduced. Check that [Vue 3 composition
API](https://vuejs.org/guide/reusability/composables.html) patterns
remain consistent across relocated composables.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5662-refactor-Migrate-manager-code-to-DDD-structure-2736d73d3650812c87faf6ed0fffb196)
by [Unito](https://www.unito.io)
## Summary
Integrated Vue node components with canvas panning mode to prevent UI
interference during navigation.
## Changes
- **What**: Added
[canCapturePointerEvents](https://docs.comfy.org/guide/vue-nodes)
computed property to `useCanvasInteractions` composable that checks
canvas read-only state
- **What**: Modified Vue node components (LGraphNode, NodeWidgets) to
conditionally handle pointer events based on canvas navigation mode
- **What**: Updated node event handlers to respect panning mode and
forward events to canvas when appropriate
## Review Focus
Event forwarding logic in panning mode and pointer event capture state
management across Vue node hierarchy.
```mermaid
graph TD
A[User Interaction] --> B{Canvas in Panning Mode?}
B -->|Yes| C[Forward to Canvas]
B -->|No| D[Handle in Vue Component]
C --> E[Canvas Navigation]
D --> F[Node Selection/Widget Interaction]
G[canCapturePointerEvents] --> H{read_only === false}
H -->|Yes| I[Allow Vue Events]
H -->|No| J[Block Vue Events]
style A fill:#f9f9f9,stroke:#333,color:#000
style E fill:#f9f9f9,stroke:#333,color:#000
style F fill:#f9f9f9,stroke:#333,color:#000
style I fill:#e1f5fe,stroke:#01579b,color:#000
style J fill:#ffebee,stroke:#c62828,color:#000
```
## Screenshots
https://github.com/user-attachments/assets/00dc5e4a-2b56-43be-b92e-eaf511e52542
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5574-Make-Vue-nodes-read-only-when-in-panning-mode-26f6d73d3650818c951cd82c8fe58972)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <action@github.com>
## Summary
- Updated frontend to align with backend changes in ComfyUI core PR
#7555
- Changed manager startup argument from `--disable-manager` (opt-out) to
`--enable-manager` (opt-in)
- Manager is now disabled by default unless explicitly enabled
## Changes
- Modified `useManagerState.ts` to check for `--enable-manager` flag
presence
- Inverted logic: manager is disabled when the flag is NOT present
- Updated all related tests to reflect the new opt-in behavior
- Fixed edge case where `systemStats` is null
## Related
- Backend PR: https://github.com/comfyanonymous/ComfyUI/pull/7555
## Test Plan
- [x] All unit tests pass
- [x] Verified manager state logic with different flag combinations
- [x] TypeScript type checking passes
- [x] Linting passes
🤖 Generated with [Claude Code](https://claude.ai/code)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5635-refactor-Change-manager-flag-from-disable-manager-to-enable-manager-2726d73d36508153a88bd9f152132b2a)
by [Unito](https://www.unito.io)
This pull request improves the selection toolbox behavior during node
dragging by ensuring that it correctly responds to both LiteGraph and
Vue node drag events. The main changes introduce a reactive drag state
for Vue nodes in the layout store and update the selection toolbox
composable and Vue node component to use this state.
**Selection toolbox behavior improvements:**
* Added a helper function and separate watchers in
`useSelectionToolboxPosition.ts` to hide the selection toolbox when
either LiteGraph or Vue nodes are being dragged. This ensures consistent
UI feedback regardless of node type.
[[1]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713L171-R172)
[[2]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713R212-R224)
**Vue node drag state management:**
* Added a reactive `isDraggingVueNodes` property to the
`LayoutStoreImpl` class, along with getter and setter methods to manage
Vue node drag state. This allows other components to reactively track
when Vue nodes are being dragged.
[[1]](diffhunk://#diff-80d32fe0fb72730c16cf7259adef8b20732ff214df240b1d39ae516737beaf3bR133-R135)
[[2]](diffhunk://#diff-80d32fe0fb72730c16cf7259adef8b20732ff214df240b1d39ae516737beaf3bR354-R367)
* Updated `LGraphNode.vue` to set and clear the Vue node dragging state
in the layout store during pointer down and up events, ensuring the
selection toolbox is hidden while dragging Vue nodes.
[[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R357-R360)
[[2]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R376-R378)
**Dependency updates:**
* Imported the `layoutStore` in `LGraphNode.vue` to access the new drag
state management methods.
* Added missing `ref` import in `layoutStore.ts` to support the new
reactive property.
https://github.com/user-attachments/assets/d6e9c15e-63b5-4de2-9688-ebbc6a3be545
---------
Co-authored-by: GitHub Action <action@github.com>
* [refactor] Move update-related functionality to platform/updates domain
Reorganizes release management, version compatibility, and notification functionality
following Domain-Driven Design principles, mirroring VSCode's architecture pattern.
- Move releaseService.ts to platform/updates/common/
- Move releaseStore.ts to platform/updates/common/
- Move versionCompatibilityStore.ts to platform/updates/common/
- Move useFrontendVersionMismatchWarning.ts to platform/updates/common/
- Move toastStore.ts to platform/updates/common/
- Move ReleaseNotificationToast.vue to platform/updates/components/
- Move WhatsNewPopup.vue to platform/updates/components/
- Update 25+ import paths across codebase and tests
This creates a cohesive "updates" domain containing all functionality related to
software updates, version checking, release notifications, and user communication
about application state changes.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix imports
---------
Co-authored-by: Claude <noreply@anthropic.com>
* refactor: move settingStore to platform/settings
Move src/stores/settingStore.ts to src/platform/settings/settingStore.ts
to separate platform infrastructure from domain logic following DDD principles.
Updates all import references across ~70 files to maintain compatibility.
* fix: update remaining settingStore imports after rebase
* fix: complete remaining settingStore import updates
* fix: update vi.mock paths for settingStore in tests
Update all test files to mock the new settingStore location at
@/platform/settings/settingStore instead of @/stores/settingStore
* fix: resolve remaining settingStore imports and unused imports after rebase
* fix: update settingStore mock path in SelectionToolbox test
Fix vi.mock path from @/stores/settingStore to @/platform/settings/settingStore
to resolve failing Load3D viewer button test.
* refactor: complete comprehensive settings migration to platform layer
This commit completes the migration of all settings-related code to the platform layer
as part of the Domain-Driven Design (DDD) architecture refactoring.
- constants/coreSettings.ts → platform/settings/constants/coreSettings.ts
- types/settingTypes.ts → platform/settings/types.ts
- stores/settingStore.ts → platform/settings/settingStore.ts (already moved)
- composables/setting/useSettingUI.ts → platform/settings/composables/useSettingUI.ts
- composables/setting/useSettingSearch.ts → platform/settings/composables/useSettingSearch.ts
- composables/useLitegraphSettings.ts → platform/settings/composables/useLitegraphSettings.ts
- components/dialog/content/SettingDialogContent.vue → platform/settings/components/SettingDialogContent.vue
- components/dialog/content/setting/SettingItem.vue → platform/settings/components/SettingItem.vue
- components/dialog/content/setting/SettingGroup.vue → platform/settings/components/SettingGroup.vue
- components/dialog/content/setting/SettingsPanel.vue → platform/settings/components/SettingsPanel.vue
- components/dialog/content/setting/ColorPaletteMessage.vue → platform/settings/components/ColorPaletteMessage.vue
- components/dialog/content/setting/ExtensionPanel.vue → platform/settings/components/ExtensionPanel.vue
- components/dialog/content/setting/ServerConfigPanel.vue → platform/settings/components/ServerConfigPanel.vue
- ~100+ import statements updated across the codebase
- Test file imports corrected
- Component imports fixed in dialog service and command menubar
- Composable imports updated in GraphCanvas.vue
```
src/platform/settings/
├── components/ # All settings UI components
├── composables/ # Settings-related composables
├── constants/ # Core settings definitions
├── types.ts # Settings type definitions
└── settingStore.ts # Central settings state management
```
✅ TypeScript compilation successful
✅ All tests passing (settings store, search functionality, UI components)
✅ Production build successful
✅ Domain boundaries properly established
This migration consolidates all settings functionality into a cohesive platform domain,
improving maintainability and following DDD principles for better code organization.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix: format and lint after rebase conflict resolution
* fix: update remaining import paths to platform settings
- Fix browser test import: extensionAPI.spec.ts
- Fix script import: collect-i18n-general.ts
- Complete settings migration import path updates
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
* [refactor] move workflow domain to its own folder
* [refactor] Fix workflow platform architecture organization
- Move workflow rendering functionality to renderer/thumbnail domain
- Rename ui folder to management for better semantic clarity
- Update all import paths to reflect proper domain boundaries
- Fix test imports to use new structure
Architecture improvements:
- rendering → renderer/thumbnail (belongs with other rendering logic)
- ui → management (better name for state management and UI integration)
This ensures proper separation of concerns and domain boundaries.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [fix] Resolve circular dependency between nodeDefStore and subgraphStore
* [fix] Update browser test imports to use new workflow platform paths
---------
Co-authored-by: Claude <noreply@anthropic.com>
* [refactor] Improve renderer architecture organization
Building on PR #5388, this refines the renderer domain structure:
**Key improvements:**
- Group all transform utilities in `transform/` subdirectory for better cohesion
- Move canvas state to dedicated `renderer/core/canvas/` domain
- Consolidate coordinate system logic (TransformPane, useTransformState, sync utilities)
**File organization:**
- `renderer/core/canvas/canvasStore.ts` (was `stores/graphStore.ts`)
- `renderer/core/layout/transform/` contains all coordinate system utilities
- Transform sync utilities co-located with core transform logic
This creates clearer domain boundaries and groups related functionality
while building on the foundation established in PR #5388.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix: Clean up linter-modified files
* Fix import paths and clean up unused imports after rebase
- Update all remaining @/stores/graphStore references to @/renderer/core/canvas/canvasStore
- Remove unused imports from selection toolbox components
- All tests pass, only reka-ui upstream issue remains in typecheck
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [auto-fix] Apply ESLint and Prettier fixes
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
* add missing node error border
* update vue node data after configure
* provide locatorId of execution error node to vue nodes
* [refactor] use execution store directly instead of provide/inject pattern
- Add lastExecutionErrorNodeId computed property to execution store
- Replace inject() with useExecutionStore() in LGraphNode component
- Remove useExecutionErrorProvider composable and provider call
- Clean up unused ExecutionErrorNodeIdKey injection key
- Add explicit return type annotation to hasAnyError computed
Addresses @DrJKL's architecture feedback and type safety suggestions.
* simplify error styling to match main branch conventions
Remove redundant dark-theme prefixes from border-error and outline-error
classes since these CSS custom properties handle both themes automatically.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* address review feedback on hasAnyError computed function
- Add explicit boolean return type
- Destructure props with defaults for cleaner code
- Use \!\! for proper boolean conversion to satisfy TypeScript
Addresses @DrJKL review comment on error state computation.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* destructure props at top level as suggested in review
Replace `props.nodeData` and `props.error` references with destructured
variables for cleaner code and proper defaults.
Addresses @DrJKL review comment about props destructuring.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix rebase issues: correct node ID comparison and border colors
- Use lastExecutionErrorNodeId instead of lastExecutionErrorNodeLocatorId
for proper comparison with nodeData.id (both are local node IDs)
- Restore border-blue-100 colors that were incorrectly changed during rebase
- These were unrelated changes that snuck in during conflict resolution
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* remove unused lastExecutionErrorNodeLocatorId from exports
The computed property is defined but not used by any external modules.
Only lastExecutionErrorNodeId is actually consumed by components.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
Replace duplicated download implementation in saveImage function with
the existing downloadFile utility from downloadUtil. This removes 18
lines of duplicate code while maintaining identical functionality.
Changes:
- Import downloadFile from @/base/common/downloadUtil
- Replace manual anchor element creation with downloadFile call
- Maintain same URL preprocessing (removing preview parameter)
- Keep existing error handling
The downloadFile utility already includes comprehensive test coverage
and handles filename extraction, DOM manipulation, and cleanup.
* add image outputs on Vue nodes
* add unit tests and update cursor pointer
* use testing pinia
* properly mock i18n in component test
* get node via current graph
* use subgraph ID from node creation
* add better error handling for downloadFile util
* refactor: simplify image preview component architecture
- Replace awkward composable pattern with standard Vue component state
- Fix reactivity issues where images didn't update on new outputs
- Add proper subgraph-aware node resolution using NodeLocatorId
- Enhance accessibility with keyboard navigation and ARIA labels
- Add comprehensive error handling and loading states
- Include PrimeVue Skeleton for better loading UX
- Remove unused composable and test files
The image preview now properly updates when new outputs are generated
and follows standard Vue reactivity patterns.
* resolve merge conflict with main
- Keep both subgraphId field and hasErrors field from main
- No conflicts in other files (LGraphNode.vue and main.json merged cleanly)
* Fix LGraphNode test by adding proper Pinia testing setup
Added createTestingPinia and i18n configuration following the pattern
from working ImagePreview tests. Resolves test failures due to missing
Pinia store dependencies. All 6 tests now pass successfully.
* WIP
* WIP: UI design for right click menu
* feat: add composable for node customization and information handling
* fix: correct v-show directive in MaskEditorButton and enhance MoreOptions functionality
* feat: add selection and subgraph operations composables for enhanced graph management
* fix: update computed properties to use 'void' for non-reactive calls and add MenuOptionItem component
* feat: add composables for More Options menu and submenu positioning logic
* feat: refactor MoreOptions component to use MenuOptionItem for menu rendering and streamline submenu handling
* feat: implement SubmenuPopover component for enhanced submenu functionality and selection handling
* feat: add 'More Options' label and enhance shape options in localization file
* refactor: simplify shape name handling by removing Pascal case conversion and using localized names
* refactor: enhance submenu handling by dynamically setting refs and improving key assignment
* feat: implement useNodeArrangement composable for node alignment and distribution functionality
* feat: enhance useMoreOptionsMenu with image node operations and alignment options
* feat: localize context menu options and enhance submenu handling
* refactor: improve type safety for title assignment in selection operations and enhance color option retrieval in node customization
* fix: adjust component order in SelectionToolbox for improved layout
* feat: update FrameNodes button visibility and tooltip, and add localization for frameNodes
* feat: enhance button visibility logic in SelectionToolbox based on selection types
* refactor: reorganize properties panel option in More Options menu for single nodes
* remove excessive logging and alerts
* fix component tests
* ad browser tests
* feat: enhance popover behavior in MoreOptions component to manage visibility state during selection overlay changes
* refactor: update visibility logic for buttons in SelectionToolbox and ExecuteButton components
* refactor: remove duplicate shape option and clean up shapeOptions array
* refactor: update help toggle logic in InfoButton and useMoreOptionsMenu to manage sidebar and help state
* refactor: streamline node info handling and integrate output node filtering in useNodeInfo and useMoreOptionsMenu
* Added useSelectionState composable consolidating all selection-derived state and the node help toggle
* Updated toolbox buttons (InfoButton, BookmarkButton, BypassButton, MaskEditorButton, ConvertToSubgraphButton, PinButton, DeleteButton, ColorPickerButton, ExecuteButton, FrameNodes, Load3DViewerButton) to remove duplicated selection logic and use useSelectionState
* Introduced HideReason ('manual' | 'drag') to differentiate drag-induced hides from manual/outside hides in MoreOptions
* refactor: enhance popover visibility handling during drag events using canvas state
* fix: update shape option name from 'default' to 'box' and add localization for 'box'
* refactor: streamline BypassButton logic and enhance MoreOptions menu with state bumping
* refactor: remove toast notifications from subgraph operations for cleaner logic
* refactor: ensure menu options re-compute when selection flags change
* feat: Enhance MoreOptions behavior with drag-and-drop support
* fix: Update mask icon class for consistent styling in MaskEditorButton
* refactor: Standardize icon sizes and classes across selection toolbox buttons
* refactor: Update layout and styling in SelectionToolbox and MoreOptions components
* refactor: Improve selection toolbox behavior with more options state management
* Refactor: Remove unused imports and conditionally add subgraph option in menu
* Enhance popover behavior: add show/hide event handlers and improve positioning logic
* Cleanup: Remove debug comments from popover functions for clarity
* Refactor: Clean up FrameNodes component and add MenuOptionBadge for better option display
* Cleanup: Remove debug comments from useSelectionToolboxPosition for clarity
* Add useFrameNodes composable for grouping selected nodes
* Refactor: Update shape options in useNodeCustomization and localize frame nodes label
* fix tests
* Cleanup: Remove packageManager entry from package.json
* Refactor: Replace ILucide icons with named imports from lucide-vue-next
* Refactor: Update shape selection and improve color picker behavior in selection toolbox
* Update test expectations [skip ci]
* feat: Enhance More Options Menu for group node management and update localization strings
* refactor: Comment out PublishButton
* refactor: Comment out test for bookmark button visibility in SelectionToolbox
* refactor: Update class names for dark theme compatibility in ExecuteButton and MenuOptionItem components
* refactor: Modularize menu options by creating dedicated composables for group, image, node, and selection operations
* refactor: Update selectors in tests to match design changes
* refactor: Update help button selector in Node Help tests
* refactor: Update getGroupColorOptions to accept groupContext and bump parameters
* Update test expectations [skip ci]
* refactor: Center KSampler node before interaction in More Options submenu tests
* refactor: Adjust KSampler node positioning and simplify button click in More Options submenu tests
* refactor: Rename comfyPageFixture import for clarity
* refactor: use gap-1 instead of the explicit gap-[4px]
* refactor: Replace app.canvas with canvasStore.getCanvas for state management
* refactor: Simplify prop access by removing 'props.' prefix in MenuOptionItem component
* refactor: Remove explicit type annotation for item in buildSelectionSignature function
* refactor: Replace Lucide icons with string-based icon references in menu options
* refactor: Remove export from interface declarations for improved clarity
* refactor: Simplify class binding in BypassButton component for improved readability
* refactor: Update button class for consistent sizing in ExecuteButton component
* refactor: Update help button locator class for consistency in Node Help tests
* fix node help test
* refactor: Remove unused imports and simplify visibility conditions in selection toolbox components
* feat: Add 3D node selection logic and cleanup on unmount for selection toolbox
* refactor: Update help button locator to use consistent data-testid in Node Help tests
* fix: Correct help button locator syntax in Node Help tests
* refactor: Change resetMoreOptionsState to an internal function in useSelectionToolboxPosition
* test: Add Load3D node visibility logic for ColorPickerButton and remove redundant test case
* fix: Increase tooltip show delay for ColorPickerButton
* fix: Update selectedOutputNodes computation to filter by isLGraphNode
* fix: Remove unused nodeDef reference from InfoButton and submenu trigger from MenuOptionItem
* fix: Update showInfoButton logic to depend on nodeDef value
* refactor: Remove deprecated getBasicNodeOptions function for cleaner code
* refactor: Replace useNodeInfo with useSelectedNodeActions
* refactor: Integrate useNodeDefStore for improved node definition handling in SelectionToolbox and InfoButton tests
* refactor: Introduce useCanvasRefresh composable for consistent canvas refresh logic across node operations
* refactor: Remove irrelevant append-to attribute from Popover
* refactor: Use storeToRefs for selectedItems in useSelectionState and add tests for selection logic
* refactor: Update ExecuteButton to use hasOutputNodesSelected for visibility and remove unnecessary computed property
* refactor: move display of execution button tests to selectionToolbox
---------
Co-authored-by: github-actions <github-actions@github.com>
* add missing node error border
* update vue node data after configure
* [refactor] extract node type resolution to named const - addresses @DrJKL's readability concern
Extracted the multi-fallback type resolution logic into a clearly named
variable for improved readability and maintainability.
* [refactor] convert watch to computed pattern - addresses @DrJKL's structure comment
Replaced ref + watch pattern with computed for displayTitle, providing cleaner
reactive behavior and eliminating the need for manual sync logic.
Previously, when toggling the mode of multiple nodes, each node would
have its state individually toggled. Now it enables mode if any node is
not currently set to that mode and only disables if all already match.
* fix: Forward the scrolling events to the litegraph canvas.
* prior-art: Use the existing event forwarding logic from useCanvasInteractions (h/t Ben)
* fix: Get proper scaling from properties in the original event, fix browser zoom
* tests: Fix missing property on mock
* types: Cleanup type annotations in the test
* cleanup: Initialize the mocks in place.
* tests: extract createMockPointerEvent
* tests: extract createMockWheelEvent
* tests: extract createMockLGraphCanvas
* tests: Add additional assertion for stopPropagation
* tests: Comment pruning, test rename suggested by @arjansingh
* [feat] Improve UX for disabled node packs in Manager dialog
- Hide "Update All" button when only disabled packs have updates
- Add tooltip on "Update All" hover to indicate disabled nodes won't be updated
- Disable version selector and show tooltip for disabled node packs
- Filter updates to only show enabled packs in the update queue
- Add visual indicators (opacity, cursor) for disabled pack cards
- Add comprehensive test coverage for new functionality
This improves the user experience by clearly indicating which packs
can be updated and preventing confusion about disabled packs.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* chore: missing nodes description added
* test: test code modified
---------
Co-authored-by: Claude <noreply@anthropic.com>
* fix z-index on selection for vue nodes
* fix unused export
* refactor to DDD
* Use Tailwind utility for pointer events instead of inline style
Move pointer-events: auto from inline style to Tailwind class
pointer-events-auto as suggested in PR review.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Rename defaultSource to layoutSource parameter
Rename parameter in useNodeZIndex options interface for better
clarity as suggested in PR review.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Improve test mocking pattern with vi.mocked approach
Replace global mock object with per-test vi.mocked pattern
and proper Partial typing instead of as any, as suggested
in PR review.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [auto-fix] Apply ESLint and Prettier fixes
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
* [feat] Refactor overlay compatibility into reusable composable
- Create useTransformCompatOverlayProps composable for centralized overlay prop management
- Update Select, MultiSelect, TreeSelect, and FileUpload components to use composable
- Provides appendTo='self' for transform inheritance in CSS-transformed parents
- Enables easy future additions of other transform compatibility props
- Fix duplicate v-bind attributes by combining props into single computed object
* fix: Keep the canvas container from being scrolled by children
* types: Align the appendTo type with primevue internals
* Update test expectations [skip ci]
---------
Co-authored-by: bymyself <cbyrne@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
* let canvas continue to own selection state management
* fix merge error
* refactor: use computed instead of watcher for selectedNodeIds
Replace watcher pattern with computed for better Vue idioms:
- More reactive and efficient
- Automatically recomputes when dependencies change
- Simpler, more declarative code
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix: improve injection error handling for selectedNodeIds
Replace silent fallback with explicit error when SelectedNodeIds
is not provided:
- Fail fast instead of silently using empty Set
- Clear error message for debugging
- Prevents nodes appearing unselected due to missing provider
Addresses DrJKL's concern about injection default behavior.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* test: improve mocking patterns using vi.mockObject
Replace manual mock interfaces with vi.mockObject for better type safety:
- Use Vitest's built-in mocking utilities instead of manual interfaces
- Properly configure mock return values
- Remove unnecessary type assertions
Addresses DrJKL's feedback on test mocking patterns.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* test: extract repeated nodeData for clarity
Extract common test nodeData object to reduce duplication:
- Move repeated VueNodeData object to describe scope
- Replace 6 instances of identical nodeData declarations
- Maintain different nodeData for specific test cases
Addresses DrJKL's suggestion to extract repeated test data.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* add type safety to mocks
---------
Co-authored-by: Claude <noreply@anthropic.com>
* knip: Don't ignore exports that are only used within a given file
* knip: More pruning after rebase
* knip: Vite plugin config fix
* knip: vitest plugin config
* knip: Playwright config, remove unnecessary ignores.
* knip: Simplify project file enumeration.
* knip: simplify the config file patterns ?(.optional_segment)
* knip: tailwind v4 fix
* knip: A little more, explain some of the deps.
Should be good for this PR.
* knip: remove unused disabling of classMembers.
It's opt-in, which we should probably do.
* knip: floating comments
We should probably delete _one_ of these parallell trees, right?
* knip: Add additional entrypoints
* knip: Restore UserData that's exposed via the types for now.
* knip: Add as an entry file even though knip says it's not necessary.
* knip: re-export functions used by nodes (h/t @christian-byrne)
* fix: normalize pack IDs to fix version detection for disabled packs
When a pack is disabled, ComfyUI-Manager returns it with a version suffix
(e.g., "ComfyUI-GGUF@1_1_4") while enabled packs don't have this suffix.
This inconsistency caused disabled packs to incorrectly show as having
updates available even when they were on the latest version.
Changes:
- Add normalizePackId utility to consistently remove version suffixes
- Apply normalization in refreshInstalledList and WebSocket updates
- Use the utility across conflict detection and node help modules
- Ensure pack version info is preserved in the object's ver field
This fixes the "Update Available" indicator incorrectly showing for
disabled packs that are already on the latest version.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* feature: test code added
* test: packUtils test code added
* test: address PR review feedback for test
improvements
- Remove unnecessary .not.toThrow() assertion
in useManagerQueue test
- Add clarifying comments for version
normalization test logic
- Replace 'as any' with vi.mocked() for better
type safety
---------
Co-authored-by: Claude <noreply@anthropic.com>
* Implement subgraph publishing
* Add missing null check
* Fix subgraph blueprint display in workflows tab
* Fix demotion of subgraph blueprints on reload
* Update locales [skip ci]
* Update blueprint def on save, cleanup
* Fix skipped tracking on subgraph publish
When a subgraph is first published, it previously was not added to the
subgraphCache. This would cause deletion to fail until a reload occurred.
* Fix failing vite tests
A couple of tests that were mocking classes broke SubgraphBlueprint
inheritance. Since they aren't testing anythign related to subgraph
blueprints, the subgraph store is mocked as well.
* Make blueprint breadcrumb badge clickable
* Add confirmation for overwrite on publish
* Simplify blueprint badge naming
* Swap to promise.allSettled when fetching subgraphs
* Navigate into subgraph on blueprint edit
* Revert mission of value in blueprint breadcrumb
This was causing the blueprint badge to always display
* Misc code quality fixes
* Set subgraphNode title on blueprint add.
When a subgraph blueprint is added to the graph, the title of the
subgraphNode is now set to be the title of the blueprint.
NOTE: The name of the subgraph node when a blueprint is edited is left
unchanged. This may cause minor user confusion.
* Add "Delete Blueprint" option to breadcrumb
When editing a blueprint, the options provided for the root graph of the
breadcrumb included a Delete Workflow option. This still functioned for
deleting the current blueprint when selected, but didn't make sense. It
has been updated to instead describe that it deletes the current
blueprint
* Extract subgraph load code as function
* Fix subgraphs appearing in library after refresh
Subgraph nodes were hidden from the node library and context menu by
setting skip_list to true. Unfortunately, this causes them to be
mistakenly be caught and registered as vue nodes when a refresh is
performed. This is fixed by adding a check for skip_list.
* Add delete button and confirmation for deletion
* Use more specific warning for blueprint deletion
* At success toast on subgraph publish
Will return later to potentially add a node library link to the toast
* Don't apply subgraph context menu to normal nodes
Subgraph blueprints have a right click -> delete option in the node
library. This was incorrectly being dislplayed on non blueprint nodes.
* Remove hardcoded subgraphs path
Rather happy with this change. Rather than trying to introduce a
recursive import to pass a magic string, this solution is both
sufficient AND allows potential future extensions with less breakage.
* Fix nodeDef update on save
Wait to update the node def cache until after a blueprint has been
saved. Before, changes to links weren't actually being made visisble.
* Fix SaveAs with subgraph blueprints
* Remove ugly serialize/deserialize
Thought I had already tested this, and found that the mere existence of
proxies was causing issues, but simply adding a correct annotation is
sufficient now.
* Improve error specificity
* Framework for user defined blueprint descriptions
BlueprintDescription can be added to a workflows extra field to provide
more useful information about a blueprint's purpose
Actually hooking this up in a way that is user accessible is out of
scope for right now, but this will simplify future implementation.
* Cleanup breadcrumb dropdown options
Removes Dupliate for blueprints, adds a publish subgraph option.
The publish subgraph button currently routes through the save as logic.
Unforunately, this results in the prompt for name referencing workflows.
The cleanest way to resolve this is still being considered
* Move blueprint renaming into blueprint load
Blueprints should automatically set the name of the added node to the
filename when added. This mostly worked, but created uglier edgecases:
The subgraph itself wasn't renamed, and it would need to be
reimplemented to apply when editing a blueprint.
Instead, this is now applied when a subgraphBlueprint is first loaded.
This keeps all the logic routed through a single point
* Move saveAs prompt into workflow class
Ensures that the correct publish text is displayed when editing
blueprints without making an awful mess of imports
* Fix tests by making subgraphBlueprint internal
This has the added benefit of forcing better organization.
Reverts the useWorkflowThumbnail patch as it is no longer required.
* Add tests for subgraph blueprints
* Rewrite confirmation dialog
* Fix overwrite on publish new subgraph
1 is used as a placeholder size as -1 indicates the baking userFile is
temporary, not persisted, and therefore, not able to overwrite when
saved.
* When editing blueprint, tint background blue
* Fix blueprint tint at low LOD
* Set node source for blueprints to Blueprint
* Fix publish test
Making subgraph blueprints non temporary on publish made it so the
following load actually occurs. A mock has been added for this load.
* Fix multiple nits
* Further cleanup: error handling, and comments
* Fixing failing test cases
This also moves the bg tinting to a property of the workflow,
which makes things more extensible in the future.
* Fix temporary marking on publish.
The prior fix to allow overwrite of an existing blueprint on publish was
misguided. By marking a not-yet-loaded file as non-temporary, the load
performed prior to saving was actually fetching the file off disk and
discarding the existing changes. This additionally entirely prevented
publishing when a blueprint did not already exist with the current name.
To fix this, the blueprint is not marked as non-temporary until after
the load occurs. Note that this load is still required as it initializes
the change tracker state required for saving.
* Block unloading subgraph blueprints
Will need to be revisited if lazy loading is implemented, but this
requires solving some ugly sync/async issues.
---------
Co-authored-by: github-actions <github-actions@github.com>
* standardize graph cleanup
* test: fix useCoreCommands tests and add regression test
- Fix mocking to properly simulate app.clean() calling graph.clear()
- Add intelligent subgraph detection in mock to match real implementation
- Add regression test for Vue node cleanup bug to prevent future regressions
- Ensures app.clean() properly triggers onNodeRemoved events through graph.clear()
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix unit tests
* move beforeLoadNewGraph to before graph is cleaned
---------
Co-authored-by: Claude <noreply@anthropic.com>
* fix: Replace reactive feature flags with non-reactive approach
- Changed managerUIState from computed to getManagerUIState() function
- Ensures fresh computation on each call to avoid timing issues
- Updates all consumers to use the new function-based approach
- Fixes manager UI state determination issues
This change addresses the reactivity issues where feature flags were not
updating properly due to Vue's reactive system limitations with external
API values.
* fix: Add HelpCenter manager state handling and API version switching
- Fixed HelpCenter manager extension to check manager state
- Fixed 'Manager' command to respect manager state
- Added dynamic API prefix switching based on manager state
- Added debug logging for manager state determination
This ensures legacy manager uses /api/ prefix and new manager uses /api/v2/ prefix
* fix: Simplify manager state determination and fix API timing issues
- Remove unnecessary extension check from manager state store
- Use only feature flags (client and server) for state determination
- Default to NEW_UI when server flags not loaded (safer default)
- Fix ImportFailInfoBulk to not send empty requests
- Resolves initial 404 errors on installed API calls
* fix: Correct manager state determination for non-v4 servers
- Fix serverSupportsV4=false returning DISABLED instead of LEGACY_UI
- Server without v4 support should use legacy manager, not disable it
- Clarify condition for server v4 + client non-v4 case
* chore: Remove debug console.log statements
- Remove all debug logging from manager state store
- Remove logging from comfy manager service
- Clean up code for production
* test: Update manager state store tests to match new logic
- Update test expectations for server feature flags undefined case (returns NEW_UI)
- Update test expectations for server not supporting v4 case (returns LEGACY_UI)
- Tests now correctly reflect the actual behavior of the manager state logic
* fix: Remove dynamic API version handling in manager service
- Remove getApiBaseURL() function and axios interceptor
- Always use /api/v2/ for New Manager (hardcoded)
- Add isManagerServiceAvailable() to block service calls when not in NEW_UI state
- Simplify API handling as manager packages are now completely separated
* refactor: Add helper functions to managerStateStore for better code reuse
- Add isManagerEnabled(), isNewManagerUI(), isLegacyManagerUI() helpers
- Add shouldShowInstallButton(), shouldShowManagerButtons() for UI logic
- Update components to use helper functions where applicable
- Add comprehensive tests for new helper functions
- Centralize state checking logic to reduce duplication
* fix: Ensure SystemStats is loaded before conflict detection
- Move conflict detection from App.vue to GraphCanvas.vue
- Check manager state before running conflict detection
- Ensures SystemStats and feature flags are loaded first
- Prevents unnecessary API calls when manager is disabled
* docs: Clarify feature flag default behavior in manager state
- Add detailed comments explaining why NEW_UI is the default
- Clarify that undefined state is temporary during WebSocket connection
- Document graceful error handling when server doesn't support v2 API
* fix: Ensure consistent manager state handling for legacy commands
- Legacy commands now show error toast in NEW_UI mode
- Settings fallback for DISABLED mode
- Consistent error handling across all manager entry points
- Legacy commands only work in LEGACY_UI mode as expected
* refactor: centralize manager opening logic into managerStateStore
- Create openManager() function in managerStateStore to eliminate duplicate code
- Replace 8+ repeated switch statements across different files with single function
- Fix inconsistency where legacy command failure in LEGACY_UI mode incorrectly opened new manager
- Add support for legacy-only commands that should show error in NEW_UI mode
- Ensure all manager entry points behave consistently according to feature flags
- Clean up unused imports and fix ESLint errors
This addresses Christian's code review feedback about duplicate switch statements
and improves maintainability by providing a single source of truth for manager
opening logic.
* fix: use correct i18n import in managerStateStore
- Replace useI18n with direct t import from @/i18n
- Fixes issue where error messages showed as numbers (e.g. '26') instead of text
- Ensures toast messages display correctly in NEW_UI mode when legacy commands are invoked
* feature: initial tab fix
* test: Fix managerStateStore test failures by adding missing mocks
The test was failing because managerStateStore imports dialogService,
which imports ErrorDialogContent.vue that instantiates the app object.
This caused api.addEventListener errors in tests.
Added proper mocks for:
- dialogService
- commandStore
- toastStore
This prevents the problematic import chain and fixes the test failures.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* refactor: convert managerStateStore to composable
- Move managerStateStore from store to composable pattern
- All functions are non-reactive utilities that don't need state management
- Follows Pinia guideline: "If it's not reactive, it shouldn't be in a store"
- Update all import paths across 8 files
- Move and update test file accordingly
This change improves architecture consistency as other utility functions
in the codebase also use composables rather than stores when reactivity
is not required.
* refactor: use readonly computed properties instead of getter methods
- Convert all getter methods to readonly computed properties
- Follows Vue conventions for better performance through caching
- Change access pattern from function calls to .value properties
- Update all usages across 6 files
- Thanks to @DrJKL for the suggestion
This improves performance by caching computed values and aligns
with Vue's reactive system patterns.
* fix: check isManagerEnabled check to GraphCanvas.vue to avoid the side-effects of calling useConflictDetection which include calling useComfyManagerStore
* chore: console.log to console.debug
* chore: useConflictDetection().initializeConflictDetection()
* test: add mockManagerDisabled option to disable manager in Playwright tests
- Add mockManagerDisabled parameter to ComfyPage.setup() (defaults to true)
- Override api.getServerFeature() to return false for manager feature flag
- Prevents manager initialization from interfering with subgraph tests
- Individual tests can still enable manager when needed by passing mockManagerDisabled: false
* chore: text modified
* fix: resolve CI/CD failures by fixing manager initialization timing
## Problem
GraphCanvas.vue was initializing conflict detection during component setup,
causing side effects in test environment where manager is disabled. This led
to 4 Playwright test failures in PR #5317.
## Root Cause
- GraphCanvas.vue called useConflictDetection() in setup phase
- This triggered store side effects even when manager was disabled
- systemStats wasn't ready when checking manager state
## Solution
1. Removed conflict detection initialization from GraphCanvas.vue entirely
2. Refactored systemStatsStore to use VueUse's useAsyncState pattern
3. Added isInitialized check in useManagerState to wait for systemStats
4. Updated useConflictDetection to check manager state internally
## Changes
- **GraphCanvas.vue**: Removed all conflict detection code
- **systemStatsStore**: Implemented useAsyncState for proper async handling
- **useManagerState**: Added isInitialized check before checking manager state
- **useConflictDetection**: Added internal manager state validation
- **App.vue**: Removed unnecessary fetchSystemStats calls
- **Tests**: Updated unit tests for new async behavior
## Test Results
All 4 previously failing Playwright tests now pass:
- featureFlags.spec.ts (feature flag handling)
- subgraph.spec.ts (breadcrumb updates, DOM cleanup)
- widget.spec.ts (image changes)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* chore: modified the note
* fix: test code modified
* fix: when manager is new manager ui, conflict detectetion should work
* fix: ensure fetch system stats before determine manager stats & when new ui & call legacy ui, open new manger dialog by default
* chore: unnecessary .value deleted & fetch name modified to refetch
* fix: ref type .value needed
* chore: vue use until pattern for waiting initializing
* fix: .value added
* fix: useManagerState test to properly mock reactive refs
The test was failing because it was mocking systemStats and isInitialized as plain values instead of reactive refs. The actual composable uses storeToRefs which returns refs with .value properties.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* fix: when system stats initialized, use until(systemStatsStore.isInitialized)
* fix: test
---------
Co-authored-by: Claude <noreply@anthropic.com>
* refactor: Extract Vue node entry point logic into focused composables
- Extract logic from GraphCanvas.vue (735→200 lines) into 3 composables:
- useVueNodeLifecycle: Node manager initialization and cleanup
- useViewportCulling: Viewport culling with transform sync
- useNodeEventHandlers: Node selection, collapse, title handlers
- Remove type assertions by using comfyApp.canvas instead of canvasStore.canvas
- Eliminate getter anti-pattern with proper Vue reactive refs
- Fix all TypeScript compatibility issues without workarounds
- Maintain proper separation of concerns and Vue-idiomatic patterns
* style: Remove extra comments from return statement
* [auto-fix] Apply ESLint and Prettier fixes
* style: Remove conversational comments
- Remove temporary comments that only made sense in refactoring context
- Clean up comment wording to be more permanent/professional
- Keep meaningful comments about code behavior and architecture
---------
Co-authored-by: GitHub Action <action@github.com>
