Each ComfyUI tab talks to its viewer on a session channel. Pings run only while
connected, status follows pings, and a hidden glass keeps feeding the viewer.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Resolve the viewer from import.meta.url, open it as a popup window, and
render data:image values and node ids without raw HTML or inline handlers.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Paint Vue nodes under the glass from the DOM, since the canvas capture
has none of them.
- Resolve the Inspector's hovered node from the Vue node element under
the cursor, falling back to the canvas hit test in pan mode.
- Fit the node highlight to collapsed nodes in both modes.
- Draw Node Title Emphasis on the title bar instead of the first slot
row, and skip nodes without a title bar such as Reroute.
- Fill the glass with the page background so it is not half-empty at
the canvas edge or wrong at zoom 1.5 and above.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Restyle the panel on ComfyUI palette tokens and drop the built-in themes.
Add a header with Back/Forward, Prev/Next, Focus, Lock and a searchable
Go to node picker, a subgraph/group breadcrumb, and simplified modes:
Follow glass or Float, plus Sticky, Follow selection and Lock to node
(replaces Hold).
Fix widget edits (step2 steps, INT/FLOAT, commit on Enter/blur, undo),
subgraph lookups, orphaned dropdown menus, global arrow-key capture,
the pop-out editor, and remove Google Fonts loading and dead code.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Make the sidebar tab wrapper fill the panel, and let the content keep its
natural height when the parent has none, so the settings no longer collapse
to a 16px scroller.
- Only measure DOM images and videos under the glass, so per-frame work scales
with what is under the glass instead of all media on the page.
- Cap Virtual Zoom near 60 fps again, so high-refresh displays do not run two
full graph draws every frame.
- Cull nodes with LiteGraph's boundingRect and keep collapsed nodes, so title
bars and collapsed nodes in front of a preview stay on top in the glass.
- Drop the self-min on the title width and the dead pos/size guards.
- Remove the stale web/shared/settings.js build output.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Updated `sanitizeElement` to strictly remove whitespace and control characters from URI attributes before validation.
This prevents bypasses like `java\tscript:` in `href`, `src`, `action`, and `formaction` attributes.
Added comprehensive unit tests covering these bypass vectors.
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
Added `sanitizeElement` utility to recursively remove inline event handlers (on*) and javascript: URIs from HTML elements.
Applied sanitization in `MagnifyGlass.renderHtmlOverlays` when cloning nodes for the magnifying glass view.
Added unit tests to verify sanitization logic.
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
- Replaced read-only hex code span with an editable text input in `createColorPicker`
- Implemented bidirectional sync between text input and color picker
- Added validation for hex codes and auto-correction on change/blur
- Ensured keydown propagation is stopped to prevent triggering global shortcuts
- Added aria-label for accessibility
- Updated unit tests to verify sync logic and event handling
- Added CSS styles for `magnify-color-preview` input to match UI design
- Ran build script to update `web/` artifacts
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
Added `sanitizeElement` utility to recursively remove inline event handlers (on*) from HTML elements.
Applied sanitization in `MagnifyGlass.renderHtmlOverlays` when cloning nodes for the magnifying glass view.
Added unit tests to verify sanitization logic.
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
Re-verified tests after checking PR comments.
Optimized node rendering by caching visible nodes.
Reduced redundant iterations over `app.graph._nodes` in `OffscreenRenderer`.
Implemented `getVisibleNodes` to calculate visible nodes once per frame (O(N)) and reused this list for text, title, and image preview rendering passes (O(M)).
This improves performance for large graphs by replacing multiple O(N) traversals with a single O(N) traversal followed by O(M) traversals where M << N.
Added unit tests in `tests/unit/OffscreenRenderer.test.ts` to verify node visibility culling logic.
Updated `.jules/bolt.md` with performance learnings.
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
- Replaced read-only hex code span with an editable text input in `createColorPicker`
- Implemented bidirectional sync between text input and color picker
- Added validation for hex codes and auto-correction on change/blur
- Ensured keydown propagation is stopped to prevent triggering global shortcuts
- Added aria-label for accessibility
- Updated unit tests to verify sync logic and event handling
- Added CSS styles for `magnify-color-preview` input to match UI design
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
Reduced redundant iterations over `app.graph._nodes` in `OffscreenRenderer`.
Implemented `getVisibleNodes` to calculate visible nodes once per frame (O(N)) and reused this list for text, title, and image preview rendering passes (O(M)).
This improves performance for large graphs by replacing multiple O(N) traversals with a single O(N) traversal followed by O(M) traversals where M << N.
Added unit tests in `tests/unit/OffscreenRenderer.test.ts` to verify node visibility culling logic.
Updated `.jules/bolt.md` with performance learnings.
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
- Replaced read-only hex code span with an editable text input in `createColorPicker`
- Implemented bidirectional sync between text input and color picker
- Added validation for hex codes and auto-correction on blur
- Ensured keydown propagation is stopped to prevent triggering global shortcuts
- Added aria-label for accessibility
- Updated unit tests to verify sync logic and event handling
- Added CSS styles for `magnify-color-preview` input to match UI design
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
Removed the `isHtml` flag support in `UIManager`, which allowed bypassing HTML escaping.
Replaced it with a `specialType` mechanism (specifically 'focus-node') to render trusted
HTML structures internally while ensuring dynamic values are always escaped.
Updated `Security.test.ts` to verify the fix and prevent regression.
Fixes: Potential XSS vulnerability via unchecked HTML injection.
Refactors `MagnifyGlass.updateMagnifiedView` and `calculateSourceRegion` to accept an optional cached `DOMRect`. This allows `EventHandler` to pass the canvas dimensions it read before updating the glass position, preventing a forced synchronous reflow (Read-Write-Read cycle) that was previously occurring on every mouse move frame.
Optimizes the hot path for mouse movement and magnifier updates.
- Add visible focus indicators for interactive elements in the sidebar
- Add aria-valuetext to sliders to announce values with units
- Update journal with accessibility learnings
- Implemented 'onWidgetEdit' listener in 'InfoPanel' to force refresh when popout widgets change.
- Refactored 'NodeDataExtractor' to display all widgets in the inspector (matching popout behavior) and removed aggressive deduplication.
- Fixed theme update logic in 'UIManager' to correctly handle hyphenated theme names.
- Enhanced combo box editing in 'popout-viewer.html' with better selection and blur handling.
