## Summary
Putting the litegraph specific pieces into litegraph itself, using the
CanvasGraph and LiteGraphGlobal to coordinate options.
This was one part of the Image Previews reloading/calculating with every
canvas draw.
## Review Focus
Is this keeping things decoupled enough?
Is this the right place to put things?
Are there assumptions about the options that I'm missing here?
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5902-WIP-Removing-monkeypatches-for-litegraph-logic-2816d73d3650818b860ec73579b89b54)
by [Unito](https://www.unito.io)
---------
Co-authored-by: github-actions <github-actions@github.com>
## Summary
Simplify default scripts. Filtering is still available to users, we can
revisit tagging or grouping later.
This fixes the issue where we had tests that were in the codebase but
never run because they weren't under `/src/components`
Also deletes the duplicate litegraph tests and their associated vitest
config file.
## Changes
- **What**: Test cleanup
## Review Focus
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5888-Tests-Vitest-configuration-cleanup-2806d73d36508197b800f68f0b028279)
by [Unito](https://www.unito.io)
This pull request improves the selection and movement logic for groups
and nodes on the LiteGraph canvas, especially when using Vue-based node
rendering. The most notable changes are the addition of proper bounding
box handling for groups and a new coordinated movement mechanism that
updates both LiteGraph internals and the Vue layout store when dragging
nodes and groups.
**Selection and bounding box calculation:**
* Added support for including `LGraphGroup` bounding rectangles when
calculating the selection toolbox position, so groups are now properly
considered in selection overlays.
[[1]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713L8-R8)
[[2]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713R95-R97)
**Node and group movement synchronization (Vue nodes mode):**
* Introduced a new movement logic in `LGraphCanvas` for Vue nodes mode:
when dragging, groups and their child nodes are moved together, and all
affected node positions are batch-updated in both LiteGraph and the Vue
layout store via `moveNode`. This ensures canvas and UI stay in sync.
* Added imports for layout mutation operations and types to support the
above synchronization.
These changes make group selection and movement more robust and ensure
that UI and internal state remain consistent when using the Vue-based
node system.
https://github.com/user-attachments/assets/153792dc-08f2-4b53-b2bf-b0591ee76559
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5886-Move-Frame-Vue-Nodes-2806d73d365081e48b5ef96d6c6b6d6b)
by [Unito](https://www.unito.io)
The third PR for managing display of widgets on subgraph nodes. This is
the one that actually makes the functionality usable and user visible.
Adds
- A right-side modal for configuring which widgets are promoted,
accessed by right click or selection toolbar
- This menu allows for re-arranging widget order by dragging and
dropping.
- Indicators inside the subgraph for which widgets have been promoted.
- Context menu options for promoting or demoting widget inside of a
subgraph.
<img width="767" height="694" alt="image"
src="https://github.com/user-attachments/assets/4f78645d-7b26-48ba-8c49-78f4807e89e8"
/>
<img width="784" height="435" alt="image"
src="https://github.com/user-attachments/assets/7005c730-a732-481e-befb-57019a8a31a7"
/>
Known issues
- Some preview widgets are not added to a node until a draw operation
occurs. The code does not yet have a way of determining which nodes
should have draw operations forced to facilitate initial widget
creation.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5826-Add-UI-code-for-configuring-subgraphNode-widgets-27c6d73d36508146accbf395e5bcd36a)
by [Unito](https://www.unito.io)
## Summary
Hide Google/GitHub SSO login options when the UI is accessed from
**non‑local** addresses.
This PR also adds a **static whitelist** (editable in code) so we can
allow additional hosts if needed.
Default whitelisted addresses:
1. `localhost` and any subdomain: `*.localhost`
2. IPv4 loopback `127.0.0.0/8` (e.g., `127.x.y.z`)
4. IPv6 loopback `::1` (including equivalent textual forms such as
`::0001`)
## Changes
- **What**:
* Add `src/utils/hostWhitelist.ts` with `normalizeHost` and
`isHostWhitelisted` helpers.
* Update `SignInContent.vue` to **hide** SSO options when
`isHostWhitelisted(normalizeHost(window.location.hostname))` returns
`false`.
- **Breaking**:
* Users accessing from Runpod or other previously allowed **non‑local**
hosts will **lose** SSO login options.
If we need to keep SSO there, we should add those hosts to the whitelist
in `hostWhitelist.ts`.
## Review Focus
1. Verify that logging in from local addresses (`localhost`,
`*.localhost`, `127.0.0.1`, `::1`) **does not change** the current
behavior: SSO is visible.
2. Verify that from a **non‑local** address, SSO options are **not**
displayed.
## Screenshots (if applicable)
UI opened from `192.168.2.109` address:
<img width="500" height="990" alt="Screenshot From 2025-09-27 13-22-15"
src="https://github.com/user-attachments/assets/c97b10a1-b069-43e4-a26b-a71eeb228a51"
/>
UI opened from default `127.0.0.1` address(nothing changed):
<img width="462" height="955" alt="Screenshot From 2025-09-27 13-35-27"
src="https://github.com/user-attachments/assets/bb2bf21c-dc8d-49cb-b48e-8fc6e408023c"
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5815-feat-auth-Allow-SSO-login-only-for-whitelisted-addresses-localhost-27b6d73d365081ccbe84c034cf8e416d)
by [Unito](https://www.unito.io)
This PR introduces a reusable composite action for Playwright setup to
reduce duplication across workflows.
## Changes
- Created `.github/actions/setup-playwright/action.yml` composite action
that:
- Detects or uses provided Playwright version
- Caches Playwright browsers with intelligent cache keys
- Installs browsers only when cache miss occurs
- Installs OS dependencies when cache hit occurs
## Technical Details
- **Important:** The composite action requires `shell: bash` for all
`run` steps as per [GitHub Actions requirements for composite
actions](https://docs.github.com/en/actions/creating-actions/creating-a-composite-action#creating-an-action-metadata-file).
This is a mandatory field for composite actions, unlike regular workflow
steps.
- Updated workflow paths to account for repository checkout locations
(some workflows checkout to subdirectories like `ComfyUI_frontend/`)
- Uses conditional caching to avoid redundant browser installations
## Benefits
- Reduces code duplication across 6 workflow files
- Centralizes Playwright caching logic
- Consistent browser setup across all workflows
- Easier maintenance and updates
- Faster CI runs through intelligent caching
## Affected Workflows
- `.github/workflows/test-ui.yaml` (2 uses)
- `.github/workflows/i18n-custom-nodes.yaml`
- `.github/workflows/i18n-node-defs.yaml`
- `.github/workflows/i18n.yaml`
- `.github/workflows/test-browser-exp.yaml`
---------
Co-authored-by: GitHub Action <action@github.com>
## Summary
Fixes two errors with subgraph progress states:
1. Nodes inside subgraphs were not having progress state shown
2. Subgraph nodes (outer representation) themselves did not have a
visible progress state
1 is fixed by using locator IDs instead of local node IDs.
2 is fixed by ensuring the subgraph title button does not wrap to a
newline and thus block the progress bar under the node header.
## Changes
- **What**: Updated `useNodeExecutionState` composable to use
`nodeLocatorId` for tracking execution state across subgraph boundaries
- **What**: Modified NodeHeader layout to fix subgraph enter button
positioning with proper flexbox gap
## Review Focus
Execution state tracking accuracy for nested subgraph nodes and
NodeHeader layout consistency across different node types.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5842-fix-progress-state-on-Vue-nodes-in-subgraphs-27c6d73d365081cb8335c8bb5dbd74f7)
by [Unito](https://www.unito.io)
---------
Co-authored-by: github-actions <github-actions@github.com>
## Summary
Extracts shared formatting and network utilities into dedicated
workspace package.
## Changes
- **What**: Created `@comfyorg/shared-frontend-utils` package containing
formatUtil and networkUtil
- **Breaking**: None - utilities remain accessible via path aliases in
`tsconfig`
Split `createAnnotatedPath` and `electronMirrorCheck` out and left in
frontend, due to their tightly-coupled nature. See [discussion on this
PR](https://github.com/Comfy-Org/ComfyUI_frontend/pull/5843#issuecomment-3344724727).
## Summary
Increase functionality for slots and links, covered with playwright
tests.
## Features
- Allow for reroute anchors to work when dragging from input slot
- Allow for dragging existing links from input slot
- Allow for ctrl/command + alt to create new link from input slot
- Allow shift to drag all connected links on output slot
- Connect links with reroutes (only when dragged from vue slot)
## Tests Added
### Playwright
- Dragging input to input drags existing link
- Dropping an input link back on its slot restores the original
connection
- Ctrl+alt drag from an input starts a fresh link
- Should reuse the existing origin when dragging an input link
- Shift-dragging an output with multiple links should drag all links
- Rerouted input drag preview remains anchored to reroute
- Rerouted output shift-drag preview remains anchored to reroute
## Notes
The double rendering system for links being dragged, it works right now,
maybe they can be coalesced later.
Edit: As in the adapter, can be removed in a followup PR
Also, it's known that more features will arrive in smaller PRs, this PR
actually should've been much smaller.
The next ones coming up are drop on canvas support, snap to node, type
compatibility highlighting, and working with subgraphs.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5710-Increase-vue-slot-link-functionality-2756d73d3650814f8995f7782244803b)
by [Unito](https://www.unito.io)
---------
Co-authored-by: github-actions <github-actions@github.com>
## Summary
Added `canvasOnly` flag to runtime-generated widgets to prevent Vue
renderer from displaying them while keeping canvas functionality intact.
## Changes
- **What**: Added `canvasOnly` widget option to hide upload, webcam, and
refresh widgets from Vue renderer
In the Canvas (LiteGraph) system, there was a small set of widgets with
strictly defined components. There, if we wanted some unique or
relatively complex behavior (like an upload butotn), we needed to create
a separate widget that would be coupled to the original widget at
runtime (and would not be serialized).
In the Vue renderer system, we can simply add flags to the inputSpec or
widget options and conditionally render complex UI additions -- i.e.,
there is no need for the hard-to-maintain runtime widget associations.
Expressing such things entirely in the view layer simplifies business
logic related to graph state, as we no longer need to account for
preserving the connections between runtime widgets and their special
siblings -- we also do not need to worry about the implications for
state serialization.
## Related
- https://github.com/Comfy-Org/ComfyUI_frontend/pull/5798
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5831-designate-canvasOnly-on-runtime-generated-virtual-widgets-so-they-are-hidden-in-Vue-ren-27c6d73d365081fb8641feec010190df)
by [Unito](https://www.unito.io)
---------
Co-authored-by: github-actions <github-actions@github.com>
## Summary
Extracts ComfyUI registry types into a dedicated workspace package for
better modularity.
## Changes
- **What**: Created `@comfyorg/registry-types` package to house
generated type definitions
- **Breaking**: None - maintains backward compatibility through
re-exports at original path
- **Dependencies**: Added `@comfyorg/registry-types` as workspace
dependency
## Review Focus
Is this the right granularity for package extraction, or should registry
types be part of a larger shared package?
PR split into two tiny diffs:
- [Part
one](f8d3d2fa01)
- [Part
two](f8d3d2fa01..c48ca84336)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5840-Extract-registry-types-into-workspace-package-27c6d73d365081dbb824d680ce739316)
by [Unito](https://www.unito.io)
## Summary
Error states were not getting propagated down to the InputSlots from the
API Repsonse
I created a provider and injected error state. It seemed like a way
better idea than prop drilling or building a composable that only two
nodes (`InputSlot` and `OutputSlot`) would need.
## Changes
The follow are now error code red when an input node has errors:
1. There's a error round border around the dot.
2. The dot is error colored.
3. The input text is error colored.
This treatment was okay after feedback from design.
## Screenshots - Error State
<img width="749" height="616" alt="Screenshot 2025-09-26 at 9 02 58 PM"
src="https://github.com/user-attachments/assets/55c7edc9-081b-4a9d-9753-120465959b5d"
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5813-fix-add-InputSlot-and-dot-error-state-27b6d73d36508151a955e485f00a2d05)
by [Unito](https://www.unito.io)
---------
Co-authored-by: github-actions <github-actions@github.com>
## Summary
Cleanup and fixes to the existing syncing logic.
## Review Focus
This is probably enough to review and test now.
Main things that should still work:
- moving nodes around
- adding new ones
- switching back and forth between Vue and Litegraph
Let me know if you find any bugs that weren't already present there.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5789-WIP-Litegraph-Vue-synchronization-work-27a6d73d3650811682cacacb82367b9e)
by [Unito](https://www.unito.io)
## Summary
Enforced test file naming conventions with ESLint rules and renamed 26
test files from `.spec.ts` to `.test.ts`.
## Changes
- **What**: Added ESLint rules to enforce `.spec.ts` files only in
`browser_tests/tests/` and `.test.ts` files only in `src/`
- **What**: Renamed 26 component/unit test files from `.spec.ts` to
`.test.ts` to comply with new convention
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5820-enforce-test-file-naming-rule-27b6d73d365081269b32ddcc9d3a5048)
by [Unito](https://www.unito.io)
## Summary
Implemented fit-to-view functionality for Vue nodes with bounds
calculation and viewport animation support.
https://github.com/user-attachments/assets/2ec221f1-9194-4564-95f9-ad4da80f190a
## Changes
- **What**: Added Vue nodes support to fit-to-view command with [bounds
calculation](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
and LiteGraph integration
- **Dependencies**: Added dependency on `layoutStore` and
`selectionBounds` utility
## Review Focus
Bounds calculation accuracy for complex node layouts and animation
performance with large node selections. Verify proper fallback to legacy
LiteGraph behavior when Vue nodes disabled.
```mermaid
graph TD
A[Fit to View Command] --> B{Vue Nodes Enabled?}
B -->|Yes| C[Get Selected Nodes]
B -->|No| D[Legacy LiteGraph Method]
C --> E{Nodes Selected?}
E -->|Yes| F[Calculate Selected Bounds]
E -->|No| G[Calculate All Nodes Bounds]
F --> H[Convert to LiteGraph Format]
G --> H
H --> I[Animate to Bounds]
D --> J[Canvas fitViewToSelectionAnimated]
style A fill:#f9f9f9,stroke:#333,color:#333
style I fill:#f9f9f9,stroke:#333,color:#333
style J fill:#f9f9f9,stroke:#333,color:#333
```
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5782-Implement-fit-to-view-for-Vue-nodes-27a6d73d365081cb822cd93f557e77b2)
by [Unito](https://www.unito.io)
---------
Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>
This pull request enhances the responsiveness of the `CommandMenubar`
component by introducing a "compact" mode for screens with limited
vertical space. When the window height is less than 700px, the menubar
adapts its submenu positioning and styling to improve usability on
smaller displays. The most important changes are grouped below:
**Responsive Behavior and State Management:**
* Added a reactive `windowHeight` reference and a computed
`isCompactHeight` property to detect when the window height is below
700px, enabling "compact" mode for the menubar. Event listeners for
window resize are now managed using `onMounted` and `onUnmounted`
lifecycle hooks to keep the state updated.
[[1]](diffhunk://#diff-10ee0e60e600a168bdd45e0b9f05a148f5b9ee48f54e6c7dee737ebe7b6192e6R314-R326)
[[2]](diffhunk://#diff-10ee0e60e600a168bdd45e0b9f05a148f5b9ee48f54e6c7dee737ebe7b6192e6L103-R104)
**Dynamic Styling and Class Application:**
* Updated the root element's class bindings to apply the
`comfy-command-menu-compact` class when `isCompactHeight` is true,
enabling conditional styling for compact mode.
**Compact Mode Styling:**
* Introduced new CSS rules for `.comfy-command-menu-compact` to force
submenus to open to the right and align with the top of the menu
container, ensuring better usability on short screens. Adjustments
include submenu positioning, alignment for nested menus, and ensuring
the submenu container uses the full available height.
*
/fix #5289https://github.com/user-attachments/assets/e7908b57-3f07-4fc4-a119-66f2b7e398c5
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5323-Add-compact-menu-style-for-smaller-window-heights-2636d73d3650816cb5aaf4ac76c39739)
by [Unito](https://www.unito.io)
## Summary
Fixed increment/decrement button lockup in number widgets when values
exceed JavaScript's safe integer limit (2^53 - 1).
## Changes
- **What**: Added precision-aware button disabling and user feedback to
`WidgetInputNumberInput` component using
[Number.isSafeInteger()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger)
- We still need to support values greater than 2^53 because they may be
in workflows.
## Review Focus
JavaScript floating-point precision behavior at scale - buttons hide
when arithmetic operations like `value + 1` would be unreliable due to
IEEE 754 limitations. Test coverage includes edge cases (NaN, Infinity)
and boundary conditions at MAX_SAFE_INTEGER.
```mermaid
graph TD
A[User Input] --> B{Value > 2^53?}
B -->|No| C[Show Buttons]
B -->|Yes| D[Hide Buttons]
D --> E[Show Tooltip]
E --> F[User Can Still Type]
style A fill:#f9f9f9,stroke:#333,color:#000
style F fill:#f9f9f9,stroke:#333,color:#000
```
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5787-fix-large-integer-precision-handling-in-Vue-int-widgets-27a6d73d365081d9ae00e485740cfafb)
by [Unito](https://www.unito.io)
