Skip to content

Conversation

@AustinMroz
Copy link
Collaborator

@AustinMroz AustinMroz commented Nov 27, 2025

Continuation of #6034 with

  • Updated synchronization for seed
  • Properly truncates the displayed widget value for the button
  • Synchronizes control after generate state with litegraph and allows for serialization

Several issues from original PR have not (yet) been addressed, but are likely better moved to future PR

image

┆Issue is synchronized with this Notion page by Unito

christian-byrne and others added 12 commits November 11, 2025 11:49
The @PointerUp.stop was breaking reka ui NumberFields.

IIRC, this was added to allow selecting text without dragging nodes.
Current testing suggests this isn't required for pointerup

This reduces the margins some on number inputs. It's trivial to add a
px-2.5, but helps with information density
@dosubot dosubot bot added the size:XXL This PR changes 1000+ lines, ignoring generated files. label Nov 27, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 27, 2025

📝 Walkthrough

Walkthrough

Adds number-control support for numeric widgets: new types, composables, UI components, a registry service, wiring to widget generation/serialization, locale entries, and tests. Registry callbacks are executed before and after prompt queuing.

Changes

Cohort / File(s) Summary
Type Definitions
src/types/simplifiedWidget.ts
Added CONTROL_OPTIONS, ControlOptions, normalizeControlOption, SafeControlWidget and extended SimplifiedWidget with optional controlWidget.
Control Logic Composables
src/renderer/extensions/vueNodes/widgets/composables/useStepperControl.ts, src/renderer/extensions/vueNodes/widgets/composables/useNumberStepCalculation.ts
Added useStepperControl (NumberControlMode enum, applyControl, registry integration) and useNumberStepCalculation to centralize step/precision logic.
Control UI Components
src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue, src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberWithControl.vue
New NumberControlPopover for selecting control modes and new WidgetInputNumberWithControl composing input + control button + popover.
Number Input Component Updates
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue, .../WidgetInputNumberInput.vue, .../WidgetInputNumberSlider.vue
Conditionally render control-enabled input when controlWidget exists; adjust input padding/slot handling; refactor slider to use useNumberStepCalculation.
Control Registry Service
src/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.ts
New NumberControlRegistry class, singleton numberControlRegistry, and executeNumberControls(phase) to register/unregister and execute control callbacks gated by settings.
Graph Node Manager
src/composables/graph/useGraphNodeManager.ts
Added controlWidget to SafeWidgetData, getControlWidget helper, and mapped controlWidget into safeWidgetMapper.
Widget Serialization
src/renderer/extensions/vueNodes/components/NodeWidgets.vue
Include controlWidget in simplified widget serialization.
Widget Composable Integration
src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts, .../useIntWidget.ts, .../useComboWidget.ts
Link control widgets when control_after_generate is enabled using addValueControlWidget and transformInputSpecV2ToV1.
App Integration
src/scripts/app.ts, src/scripts/utils.ts
Call executeNumberControls('before') and executeNumberControls('after') around prompt queuing; removed two JSDoc annotations.
Localization
src/locales/en/main.json
Added widgets.numberControl block with header and control option labels/descriptions.
Dropdown Component Refactor
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
Removed assetData early return; made items concatenation explicit for all branches.
Tests
tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useStepperControl.test.ts, .../NumberControlRegistry.test.ts, .../useWidgetRenderer.test.ts
Added tests for useStepperControl (modes, bounds, callbacks), NumberControlRegistry (register/unregister/execute), and Pinia setup in widget renderer tests.
Browser Tests & Fixtures
browser_tests/fixtures/VueNodeHelpers.ts, browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts
Selector adjustment for decrement button (nth(1)), and deterministic widget selection via .first().
Desktop UI Update
apps/desktop-ui/src/components/install/InstallFooter.vue
Removed disableMigrationStep prop from InstallFooter.
Script Cleanup
scripts/cicd/resolve-comfyui-release.ts
Removed ESLint directive preceding console output.
Layout/CSS tweak
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
Removed space-y-1 vertical spacing utility from inner div classes.

Sequence Diagram(s)

mermaid
sequenceDiagram
autonumber
actor User
participant Widget as WidgetInputNumberWithControl
participant Popover as NumberControlPopover
participant Registry as NumberControlRegistry
participant App as queuePrompt (app.ts)
participant Settings as SettingStore

Note over Widget,Popover: Control mode selection flow
User->>Widget: click control button
Widget->>Popover: open popover
Popover->>Widget: emit update:controlMode
Widget->>Widget: widget.controlWidget.update(mode)

Note over Widget,Registry,App: Prompt queue flow
Widget->>Registry: register(applyFn) on mount
User->>App: trigger prompt queue
App->>Settings: read Comfy.WidgetControlMode
App->>Registry: executeNumberControls('before')
Registry->>Widget: invoke applyFn (if phase matches)
App->>App: queue prompt / dispatch
App->>Settings: read Comfy.WidgetControlMode
App->>Registry: executeNumberControls('after')
Registry->>Widget: invoke applyFn (if phase matches)
Widget->>Registry: unregister(id) on unmount

Possibly related PRs

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch austin/vue-control-after-generate

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 488922a and 437880c.

⛔ Files ignored due to path filters (21)
  • browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png is excluded by !**/*.png
  • browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png is excluded by !**/*.png
📒 Files selected for processing (1)
  • src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue (1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

  • src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use <script setup lang="ts"> for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use withDefaults or runtime props declaration
Prefer useModel to separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using <style> blocks in Vue components
Use semantic Tailwind values from style.css theme instead of the dark: variant; for example, use bg-node-component-surface instead of dark: prefixes
Always use cn() utility from @/utils/tailwindUtil to merge Tailwind class names; do not use :class="[]" syntax
Use ref for reactive state in Vue Composition API components
Implement computed properties with computed() from Vue; avoid using a ref with a watch if a computed would work instead
Use watch and watchEffect for side effects in Vue components
Implement lifecycle hooks using onMounted, onUpdated, and other Vue lifecycle functions
Use provide/inject for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundant computed, and prefer computed over watch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries in src/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead

Files:

  • src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
**/*.{ts,tsx,js,jsx,vue,json}

📄 CodeRabbit inference engine (AGENTS.md)

Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see .prettierrc)

Files:

  • src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; run pnpm format before committing
Use TypeScript for type safety; never use any type - use proper TypeScript types
Never use as any type assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nested if or for statements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones

Files:

  • src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
🧠 Learnings (4)
📚 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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
📚 Learning: 2025-12-11T03:55:51.755Z
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In Vue components under src/renderer/extensions/vueNodes (e.g., ImagePreview.vue and LGraphNode.vue), implement image gallery keyboard navigation so that it responds to the node's focus state rather than requiring focus inside the image preview wrapper. Achieve this by wiring keyEvent handling at the node focus level and injecting or propagating key events (arrow keys) to the gallery when the node is focused/selected. This improves accessibility and aligns navigation with node-level focus behavior.

Applied to files:

  • src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
📚 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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
🔇 Additional comments (1)
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue (1)

31-31: No action needed. The removal of space-y-1 is safe and does not cause layout regressions. WidgetLayoutField is designed to wrap a single child element via its slot, and space-y-1 (which applies vertical spacing between sibling elements) has no visual effect on single-child containers. This holds true for both existing widgets and the newly introduced control widgets.


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
Copy link

github-actions bot commented Nov 27, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 12/13/2025, 11:40:14 AM UTC

🔗 Links


🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Nov 27, 2025

🎭 Playwright Test Results

Some tests failed

⏰ Completed at: 12/13/2025, 11:51:29 AM UTC

📈 Summary

  • Total Tests: 486
  • Passed: 456 ✅
  • Failed: 19 ❌
  • Flaky: 2 ⚠️
  • Skipped: 9 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 444 / ❌ 19 / ⚠️ 2 / ⏭️ 9
  • 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
Copy link

github-actions bot commented Nov 27, 2025

Bundle Size Report

Summary

  • Raw size: 17.1 MB baseline 17.1 MB — 🔴 +17 kB
  • Gzip: 3.39 MB baseline 3.39 MB — 🔴 +4.61 kB
  • Brotli: 2.6 MB baseline 2.6 MB — 🔴 +3.86 kB
  • Bundles: 98 current • 97 baseline • 40 added / 39 removed

Category Glance
Other 🔴 +7.49 kB (3.82 MB) · UI Components 🔴 +6.48 kB (184 kB) · App Entry Points 🔴 +2.26 kB (3.25 MB) · Graph Workspace 🔴 +794 B (986 kB) · Vendor & Third-Party ⚪ 0 B (8.56 MB) · Panels & Settings ⚪ 0 B (298 kB) · + 3 more

Per-category breakdown
App Entry Points — 3.25 MB (baseline 3.24 MB) • 🔴 +2.26 kB

Main entry bundles and manifests

File Before After Δ Raw Δ Gzip Δ Brotli
assets/index-CkRsBy47.js (new) 3.02 MB 🔴 +3.02 MB 🔴 +627 kB 🔴 +477 kB
assets/index-CtLncRtg.js (removed) 3.02 MB 🟢 -3.02 MB 🟢 -627 kB 🟢 -477 kB
assets/index-BWyJ4qpi.js (removed) 227 kB 🟢 -227 kB 🟢 -48.6 kB 🟢 -39.8 kB
assets/index-Dkrx_0HW.js (new) 227 kB 🔴 +227 kB 🔴 +48.6 kB 🔴 +39.8 kB
assets/index-Dvia7EsI.js (new) 345 B 🔴 +345 B 🔴 +245 B 🔴 +211 B
assets/index-EaBrhMxi.js (removed) 345 B 🟢 -345 B 🟢 -241 B 🟢 -200 B

Status: 3 added / 3 removed

Graph Workspace — 986 kB (baseline 985 kB) • 🔴 +794 B

Graph editor runtime, canvas, workflow orchestration

File Before After Δ Raw Δ Gzip Δ Brotli
assets/GraphView-VoGhRazQ.js (new) 986 kB 🔴 +986 kB 🔴 +191 kB 🔴 +146 kB
assets/GraphView-DESgvpoF.js (removed) 985 kB 🟢 -985 kB 🟢 -191 kB 🟢 -145 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-CjUISDp7.js (removed) 6.54 kB 🟢 -6.54 kB 🟢 -2.14 kB 🟢 -1.89 kB
assets/UserSelectView-Wm-hk0Qq.js (new) 6.54 kB 🔴 +6.54 kB 🔴 +2.14 kB 🔴 +1.89 kB

Status: 1 added / 1 removed

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

Configuration panels, inspectors, and settings screens

File Before After Δ Raw Δ Gzip Δ Brotli
assets/LegacyCreditsPanel-BIaVe1j8.js (removed) 21.4 kB 🟢 -21.4 kB 🟢 -5.15 kB 🟢 -4.5 kB
assets/LegacyCreditsPanel-BxEM5wN2.js (new) 21.4 kB 🔴 +21.4 kB 🔴 +5.16 kB 🔴 +4.5 kB
assets/KeybindingPanel-AzLVKe2E.js (removed) 13.6 kB 🟢 -13.6 kB 🟢 -3.42 kB 🟢 -3.01 kB
assets/KeybindingPanel-zbia-I8i.js (new) 13.6 kB 🔴 +13.6 kB 🔴 +3.42 kB 🔴 +3.01 kB
assets/ExtensionPanel-DsVrdgPR.js (removed) 10.8 kB 🟢 -10.8 kB 🟢 -2.57 kB 🟢 -2.26 kB
assets/ExtensionPanel-DZAtDPdk.js (new) 10.8 kB 🔴 +10.8 kB 🔴 +2.57 kB 🔴 +2.26 kB
assets/AboutPanel-BV3z-Sd8.js (removed) 9.16 kB 🟢 -9.16 kB 🟢 -2.46 kB 🟢 -2.21 kB
assets/AboutPanel-DO_DRwiP.js (new) 9.16 kB 🔴 +9.16 kB 🔴 +2.46 kB 🔴 +2.21 kB
assets/ServerConfigPanel-CKtPvzpt.js (removed) 6.56 kB 🟢 -6.56 kB 🟢 -1.83 kB 🟢 -1.63 kB
assets/ServerConfigPanel-CsvBAGUQ.js (new) 6.56 kB 🔴 +6.56 kB 🔴 +1.83 kB 🔴 +1.63 kB
assets/UserPanel-CENxTdsM.js (removed) 6.23 kB 🟢 -6.23 kB 🟢 -1.72 kB 🟢 -1.51 kB
assets/UserPanel-DDuJCp80.js (new) 6.23 kB 🔴 +6.23 kB 🔴 +1.72 kB 🔴 +1.51 kB
assets/settings-B_sqawkt.js 27.3 kB 27.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-BhbWhsRg.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-BlDXT7wp.js 21.7 kB 21.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-Bz8HAvJu.js 21.1 kB 21.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C2vW8UNv.js 24.2 kB 24.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C9vsDM17.js 25.1 kB 25.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DWD49kQp.js 33.3 kB 33.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DZE27_Iz.js 25.9 kB 25.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-OXaZPcZF.js 26.6 kB 26.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-RbkKsnDG.js 25.2 kB 25.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 6 added / 6 removed

UI Components — 184 kB (baseline 178 kB) • 🔴 +6.48 kB

Reusable component library chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/Load3D.vue_vue_type_script_setup_true_lang-BXiw7OO3.js (new) 53.7 kB 🔴 +53.7 kB 🔴 +8.49 kB 🔴 +7.29 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-CEyz60a2.js (removed) 53.7 kB 🟢 -53.7 kB 🟢 -8.49 kB 🟢 -7.29 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-brXdE0o2.js (removed) 48.1 kB 🟢 -48.1 kB 🟢 -10.4 kB 🟢 -8.99 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-D0zTx6o7.js (new) 48 kB 🔴 +48 kB 🔴 +10.3 kB 🔴 +8.98 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-BxPM1k4w.js (new) 48 kB 🔴 +48 kB 🔴 +10.6 kB 🔴 +9.32 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-C9N7tfSQ.js (removed) 48 kB 🟢 -48 kB 🟢 -10.6 kB 🟢 -9.32 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-kv_Wg_uK.js (new) 19.5 kB 🔴 +19.5 kB 🔴 +5.04 kB 🔴 +4.47 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-DXmg7_k4.js (removed) 12.9 kB 🟢 -12.9 kB 🟢 -3.37 kB 🟢 -2.98 kB
assets/ComfyQueueButton-BRWFM9Qn.js (removed) 8.44 kB 🟢 -8.44 kB 🟢 -2.48 kB 🟢 -2.22 kB
assets/ComfyQueueButton-Tmt5jjat.js (new) 8.44 kB 🔴 +8.44 kB 🔴 +2.48 kB 🔴 +2.21 kB
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-COj6XUUj.js (removed) 2.15 kB 🟢 -2.15 kB 🟢 -897 B 🟢 -768 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-1tev-0A0.js (new) 2.14 kB 🔴 +2.14 kB 🔴 +889 B 🔴 +761 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-BariaGQm.js (removed) 897 B 🟢 -897 B 🟢 -500 B 🟢 -432 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-Xo9jNmwu.js (new) 897 B 🔴 +897 B 🔴 +502 B 🔴 +435 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-Bjfb_hoW.js 1.34 kB 1.34 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetButton-Bm2lwPFd.js 2.04 kB 2.04 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 7 added / 7 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-CGBcBDHZ.js (new) 7.51 kB 🔴 +7.51 kB 🔴 +1.84 kB 🔴 +1.59 kB
assets/keybindingService-qJCUdWkx.js (removed) 7.51 kB 🟢 -7.51 kB 🟢 -1.83 kB 🟢 -1.58 kB
assets/audioService-DTgCxhhP.js (removed) 2.2 kB 🟢 -2.2 kB 🟢 -959 B 🟢 -829 B
assets/audioService-UO9JgxOz.js (new) 2.2 kB 🔴 +2.2 kB 🔴 +964 B 🔴 +825 B
assets/serverConfigStore-BP9UaJXd.js 2.83 kB 2.83 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 2 added / 2 removed

Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 B

Helpers, composables, and utility bundles

File Before After Δ Raw Δ Gzip Δ Brotli
assets/audioUtils-BHuZ1j8O.js (new) 1.41 kB 🔴 +1.41 kB 🔴 +652 B 🔴 +547 B
assets/audioUtils-D_4KkRdG.js (removed) 1.41 kB 🟢 -1.41 kB 🟢 -650 B 🟢 -542 B
assets/mathUtil-CD4DsosH.js 1.32 kB 1.32 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeFilterUtil-CXKCRJ-m.js 460 B 460 B ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 1 added / 1 removed

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

External libraries and shared vendor chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/vendor-chart-W_3Knk2t.js 452 kB 452 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-other-BzuNIfYH.js 3.98 MB 3.98 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-primevue-CmhMHYBF.js 1.96 MB 1.96 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-three-aR6ntw5X.js 1.37 MB 1.37 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-tiptap-DCLYW5rb.js 232 kB 232 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-vue-C3MDzIsc.js 160 kB 160 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-xterm-BZLod3g9.js 407 kB 407 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
Other — 3.82 MB (baseline 3.81 MB) • 🔴 +7.49 kB

Bundles that do not match a named category

File Before After Δ Raw Δ Gzip Δ Brotli
assets/WidgetRecordAudio-C2eFpbl1.js (new) 20.4 kB 🔴 +20.4 kB 🔴 +5.24 kB 🔴 +4.63 kB
assets/WidgetRecordAudio-C6YNC7eo.js (removed) 20.4 kB 🟢 -20.4 kB 🟢 -5.23 kB 🟢 -4.63 kB
assets/AudioPreviewPlayer-B4hKeUfo.js (removed) 13.4 kB 🟢 -13.4 kB 🟢 -3.37 kB 🟢 -3.02 kB
assets/AudioPreviewPlayer-ConsWrTD.js (new) 13.4 kB 🔴 +13.4 kB 🔴 +3.37 kB 🔴 +3.01 kB
assets/NumberControlPopover-DuuhnR-h.js (new) 7.49 kB 🔴 +7.49 kB 🔴 +2.15 kB 🔴 +1.91 kB
assets/WidgetGalleria-BADvyW_z.js (removed) 4.1 kB 🟢 -4.1 kB 🟢 -1.44 kB 🟢 -1.3 kB
assets/WidgetGalleria-D3ZT9GJa.js (new) 4.1 kB 🔴 +4.1 kB 🔴 +1.45 kB 🔴 +1.3 kB
assets/WidgetColorPicker-DaSsK7ky.js (removed) 3.41 kB 🟢 -3.41 kB 🟢 -1.38 kB 🟢 -1.24 kB
assets/WidgetColorPicker-MJHLWM5d.js (new) 3.41 kB 🔴 +3.41 kB 🔴 +1.38 kB 🔴 +1.23 kB
assets/WidgetTextarea-BfSXT5NZ.js (new) 3.08 kB 🔴 +3.08 kB 🔴 +1.21 kB 🔴 +1.08 kB
assets/WidgetTextarea-Ce6gMNps.js (removed) 3.08 kB 🟢 -3.08 kB 🟢 -1.21 kB 🟢 -1.08 kB
assets/WidgetMarkdown-CA6yigHA.js (new) 3.08 kB 🔴 +3.08 kB 🔴 +1.28 kB 🔴 +1.12 kB
assets/WidgetMarkdown-Cg0qylZB.js (removed) 3.08 kB 🟢 -3.08 kB 🟢 -1.28 kB 🟢 -1.13 kB
assets/WidgetAudioUI-188xbvpA.js (removed) 2.86 kB 🟢 -2.86 kB 🟢 -1.16 kB 🟢 -1.05 kB
assets/WidgetAudioUI-CYNRMtOE.js (new) 2.86 kB 🔴 +2.86 kB 🔴 +1.17 kB 🔴 +1.06 kB
assets/WidgetInputText-BoZhPaeO.js (new) 1.99 kB 🔴 +1.99 kB 🔴 +917 B 🔴 +853 B
assets/WidgetInputText-CsV49T0c.js (removed) 1.99 kB 🟢 -1.99 kB 🟢 -916 B 🟢 -851 B
assets/WidgetToggleSwitch-CEWSsrI9.js (removed) 1.76 kB 🟢 -1.76 kB 🟢 -831 B 🟢 -736 B
assets/WidgetToggleSwitch-DgjjxHqt.js (new) 1.76 kB 🔴 +1.76 kB 🔴 +834 B 🔴 +731 B
assets/MediaImageBottom-B3atqB1A.js (new) 1.55 kB 🔴 +1.55 kB 🔴 +735 B 🔴 +639 B
assets/MediaImageBottom-D5A5e2sv.js (removed) 1.55 kB 🟢 -1.55 kB 🟢 -734 B 🟢 -641 B
assets/MediaAudioBottom-CPy7CrBr.js (removed) 1.51 kB 🟢 -1.51 kB 🟢 -731 B 🟢 -651 B
assets/MediaAudioBottom-QOMXZChL.js (new) 1.51 kB 🔴 +1.51 kB 🔴 +735 B 🔴 +655 B
assets/Media3DBottom-3nsXIKhD.js (removed) 1.5 kB 🟢 -1.5 kB 🟢 -734 B 🟢 -654 B
assets/Media3DBottom-hFywTRJl.js (new) 1.5 kB 🔴 +1.5 kB 🔴 +735 B 🔴 +651 B
assets/MediaVideoBottom-BRDfzTlq.js (removed) 1.5 kB 🟢 -1.5 kB 🟢 -734 B 🟢 -649 B
assets/MediaVideoBottom-CpGe4qRM.js (new) 1.5 kB 🔴 +1.5 kB 🔴 +732 B 🔴 +653 B
assets/Media3DTop-DrnAmwzn.js (removed) 1.49 kB 🟢 -1.49 kB 🟢 -763 B 🟢 -653 B
assets/Media3DTop-J-FXbavt.js (new) 1.49 kB 🔴 +1.49 kB 🔴 +766 B 🔴 +653 B
assets/WidgetSelect-D5Sk8Ydx.js (new) 655 B 🔴 +655 B 🔴 +343 B 🔴 +287 B
assets/WidgetSelect-DVgMq3zq.js (removed) 655 B 🟢 -655 B 🟢 -342 B 🟢 -286 B
assets/WidgetInputNumber-DhQmX4-3.js (removed) 595 B 🟢 -595 B 🟢 -328 B 🟢 -276 B
assets/WidgetInputNumber-kbTcZVHO.js (new) 595 B 🔴 +595 B 🔴 +330 B 🔴 +275 B
assets/Load3D-DIpC76F2.js (removed) 424 B 🟢 -424 B 🟢 -265 B 🟢 -222 B
assets/Load3D-Drw1iex6.js (new) 424 B 🔴 +424 B 🔴 +266 B 🔴 +224 B
assets/WidgetLegacy-CrTgNTND.js (new) 364 B 🔴 +364 B 🔴 +236 B 🔴 +223 B
assets/WidgetLegacy-DTDVSSHF.js (removed) 364 B 🟢 -364 B 🟢 -235 B 🟢 -194 B
assets/commands-_s-RvhJR.js 13.6 kB 13.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BuUILW6P.js 13 kB 13 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BV4R6fLx.js 14.9 kB 14.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BWp4HdfU.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CLwPdnT6.js 14.2 kB 14.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CWMchBmd.js 15.9 kB 15.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DazTQhtc.js 12.9 kB 12.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DmWrOe93.js 13.7 kB 13.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DwiH7Kr6.js 13.8 kB 13.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-mS3LCNPn.js 14.5 kB 14.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-BMi-Aksj.js 99 kB 99 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-CqR8skJT.js 73.1 kB 73.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Cw9RZWRY.js 89 B 89 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DcRHAFEy.js 81.7 kB 81.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DdFdLxku.js 72.2 kB 72.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DJAtuVu5.js 84.3 kB 84.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DK8I9Rk3.js 114 kB 114 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-gP_ssnMb.js 83.4 kB 83.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-nxXY9vGp.js 94 kB 94 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Ycd3gqkA.js 86.5 kB 86.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaAudioTop-taU5Yj_Q.js 1.46 kB 1.46 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaImageTop-BoT3yC-l.js 1.75 kB 1.75 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaVideoTop-Csf8f_9c.js 2.65 kB 2.65 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-_qLI3Y-X.js 317 kB 317 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BoBMp_wf.js 307 kB 307 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Bw_Jitw_.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Ce9u3PlO.js 342 kB 342 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CgjGEDDp.js 285 kB 285 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CL3A8ieS.js 306 kB 306 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DNUc-sw4.js 303 kB 303 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DxUbhTnC.js 282 kB 282 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-i8mv_3Jj.js 369 kB 369 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-wCFicyab.js 310 kB 310 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetChart-CWEwKtMY.js 2.48 kB 2.48 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetImageCompare-DSf2ZEwg.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: 19 added / 18 removed

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (8)
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue (2)

148-165: Unified dropdownItems logic looks correct

The refactor to have asset mode always use allItems and non-asset “all” explicitly concatenate inputItems and outputItems is consistent with the surrounding data flow; no functional issues stand out. If you want to reduce duplication, the 'all' branch could just return allItems.value, but that’s purely optional.


70-81: Localize user-facing strings and tighten upload error messaging

Several strings are user-visible but not run through vue-i18n, which conflicts with the repo guidelines:

  • Filter option labels: 'All', 'Inputs', 'Outputs' (Lines 76–79).
  • Toast messages: File upload failed, Upload failed: ${error} (Lines 296, 320).

Consider:

  • Replacing these literals with t(...) calls and adding appropriate entries in src/locales/en/main.json.
  • For the upload error toast, deriving a readable message (e.g. error instanceof Error ? error.message : String(error)) rather than stringifying the raw error object.

This keeps UX consistent and ready for localization without changing behavior.

Also applies to: 263-264, 295-321

tests-ui/tests/stores/globalSeedStore.test.ts (1)

21-28: Consider replacing the probabilistic assertion.

This test relies on random seed generation to be different across store instances, which introduces non-determinism. While the 1-in-1,000,000 chance is low, flaky tests can cause false failures in CI/CD pipelines.

Consider one of these alternatives:

  1. Mock Math.random() to return predictable values
  2. Test that the seed is within the valid range instead of comparing uniqueness
  3. Accept the low flakiness risk and document it clearly

Example with mocking:

 it('should create different seeds for different store instances', () => {
+  const mockRandom = vi.spyOn(Math, 'random')
+  mockRandom.mockReturnValueOnce(0.5)
   const store1 = useGlobalSeedStore()
   setActivePinia(createPinia()) // Reset pinia
+  mockRandom.mockReturnValueOnce(0.7)
   const store2 = useGlobalSeedStore()

-  // Very unlikely to be the same (1 in 1,000,000 chance)
-  expect(store1.globalSeed).not.toBe(store2.globalSeed)
+  expect(store1.globalSeed).toBe(500000)
+  expect(store2.globalSeed).toBe(700000)
+  mockRandom.mockRestore()
 })
src/types/simplifiedWidget.ts (1)

18-26: Consider adding 'link-to-global' to ControlWidgetOptions type.

The NumberControlPopover.vue component references a LINK_TO_GLOBAL mode (currently disabled via feature flag), but this option is missing from the ControlWidgetOptions type union. While the feature is disabled now, including it in the type definition would ensure type safety when the feature is enabled.

 export type ControlWidgetOptions =
   | 'fixed'
   | 'increment'
   | 'decrement'
   | 'randomize'
+  | 'link-to-global'
src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue (1)

29-29: Document the LINK_TO_GLOBAL feature flag.

The ENABLE_LINK_TO_GLOBAL constant is hardcoded to false, but there's no comment explaining why this feature is disabled or what would be required to enable it. Consider adding a comment to guide future development.

+// TODO: Enable LINK_TO_GLOBAL once global seed synchronization is fully implemented
 const ENABLE_LINK_TO_GLOBAL = false
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberWithControl.vue (1)

57-64: Consider using cn() utility for class merging.

Per coding guidelines, prefer using the cn() utility from @/utils/tailwindUtil for class merging instead of template string interpolation.

-        <i :class="`${controlButtonIcon} text-blue-100 text-xs`" />
+        <i :class="cn(controlButtonIcon, 'text-blue-100 text-xs')" />

You'll need to import cn from @/utils/tailwindUtil.

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue (1)

123-128: Remove potentially dead PrimeVue CSS.

This scoped CSS targets .p-inputnumber-input, a PrimeVue class. Since the component now uses Reka UI's NumberFieldRoot/NumberFieldInput, this CSS may no longer apply and could be removed.

src/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.ts (1)

27-34: Consider wrapping callback execution in try-catch for resilience.

If one registered applyFn throws an error, it will prevent subsequent controls from being applied. Consider wrapping each callback in a try-catch to ensure all controls are executed.

   executeControls(phase: 'before' | 'after'): void {
     const settingStore = useSettingStore()
     if (settingStore.get('Comfy.WidgetControlMode') === phase) {
       for (const applyFn of this.controls.values()) {
-        applyFn()
+        try {
+          applyFn()
+        } catch (error) {
+          console.error('Error executing number control:', error)
+        }
       }
     }
   }

Comment on lines 54 to 67
if (typeof window !== 'undefined') {
import('@/base/common/downloadUtil')
.then((module) => {
const fn = (
module as {
downloadBlob?: typeof import('@/base/common/downloadUtil').downloadBlob
}
).downloadBlob
if (typeof fn === 'function') {
;(window as any).downloadBlob = fn
}
})
.catch(() => {})
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix TypeScript violations: avoid as any and improve error handling.

This code violates two explicit coding guidelines:

  1. Line 63 uses as any type assertion
  2. Line 66 silently swallows errors

As per coding guidelines, never use as any type assertions and implement proper error handling.

Apply this diff to fix both issues:

+declare global {
+  interface Window {
+    downloadBlob?: typeof import('@/base/common/downloadUtil').downloadBlob
+  }
+}
+
 if (typeof window !== 'undefined') {
   import('@/base/common/downloadUtil')
     .then((module) => {
       const fn = (
         module as {
           downloadBlob?: typeof import('@/base/common/downloadUtil').downloadBlob
         }
       ).downloadBlob
       if (typeof fn === 'function') {
-        ;(window as any).downloadBlob = fn
+        window.downloadBlob = fn
       }
     })
-    .catch(() => {})
+    .catch((error) => {
+      console.error('Failed to load downloadBlob utility:', error)
+    })
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (typeof window !== 'undefined') {
import('@/base/common/downloadUtil')
.then((module) => {
const fn = (
module as {
downloadBlob?: typeof import('@/base/common/downloadUtil').downloadBlob
}
).downloadBlob
if (typeof fn === 'function') {
;(window as any).downloadBlob = fn
}
})
.catch(() => {})
}
declare global {
interface Window {
downloadBlob?: typeof import('@/base/common/downloadUtil').downloadBlob
}
}
if (typeof window !== 'undefined') {
import('@/base/common/downloadUtil')
.then((module) => {
const fn = (
module as {
downloadBlob?: typeof import('@/base/common/downloadUtil').downloadBlob
}
).downloadBlob
if (typeof fn === 'function') {
window.downloadBlob = fn
}
})
.catch((error) => {
console.error('Failed to load downloadBlob utility:', error)
})
}

@DrJKL DrJKL added the New Browser Test Expectations New browser test screenshot should be set by github action label Nov 27, 2025
@github-actions
Copy link

Updating Playwright Expectations

@github-actions github-actions bot removed the New Browser Test Expectations New browser test screenshot should be set by github action label Nov 27, 2025
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:XXL This PR changes 1000+ lines, ignoring generated files. labels Nov 27, 2025
@github-actions github-actions bot removed the New Browser Test Expectations New browser test screenshot should be set by github action label Dec 10, 2025
@dosubot dosubot bot added size:XS This PR changes 0-9 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Dec 10, 2025
@dosubot dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:XS This PR changes 0-9 lines, ignoring generated files. labels Dec 12, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
src/locales/en/main.json (1)

2059-2060: Verify intentional ALL CAPS for mode labels.

Lines 2059-2060 use ALL CAPS for "AFTER" and "BEFORE" while surrounding text uses mixed case. ALL CAPS in UI text is generally less accessible and harder to read.

Please confirm this capitalization is intentional for design/UX reasons. If emphasis is needed, consider applying it via CSS styling in the component rather than hardcoding capitalization in the localization string (e.g., use "after"/"before" or "After"/"Before" here, then apply font-weight: bold or text-transform: uppercase in the component).

Alternative structure (as suggested by DrJKL in a previous comment):

"controlHeader": {
  "prefix": "Automatically update the value",
  "after": "after",
  "before": "before",
  "postfix": "running the workflow:"
}

Then apply visual emphasis via component styling rather than text capitalization.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 70f6d5b and ed25f72.

📒 Files selected for processing (4)
  • src/locales/en/main.json (1 hunks)
  • src/renderer/extensions/vueNodes/components/NodeWidgets.vue (1 hunks)
  • src/scripts/app.ts (1 hunks)
  • src/scripts/utils.ts (0 hunks)
💤 Files with no reviewable changes (1)
  • src/scripts/utils.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/scripts/app.ts
  • src/renderer/extensions/vueNodes/components/NodeWidgets.vue
src/**/*.ts

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

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

Minimize the surface area (exported values) of each module and composable

Files:

  • src/scripts/app.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/scripts/app.ts
  • src/renderer/extensions/vueNodes/components/NodeWidgets.vue
src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

  • src/scripts/app.ts
  • src/renderer/extensions/vueNodes/components/NodeWidgets.vue
**/*.{ts,tsx,js,jsx,vue,json}

📄 CodeRabbit inference engine (AGENTS.md)

Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see .prettierrc)

Files:

  • src/scripts/app.ts
  • src/renderer/extensions/vueNodes/components/NodeWidgets.vue
  • src/locales/en/main.json
**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; run pnpm format before committing
Use TypeScript for type safety; never use any type - use proper TypeScript types
Never use as any type assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nested if or for statements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones

Files:

  • src/scripts/app.ts
  • src/renderer/extensions/vueNodes/components/NodeWidgets.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/renderer/extensions/vueNodes/components/NodeWidgets.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/renderer/extensions/vueNodes/components/NodeWidgets.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/renderer/extensions/vueNodes/components/NodeWidgets.vue
**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use <script setup lang="ts"> for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use withDefaults or runtime props declaration
Prefer useModel to separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using <style> blocks in Vue components
Use semantic Tailwind values from style.css theme instead of the dark: variant; for example, use bg-node-component-surface instead of dark: prefixes
Always use cn() utility from @/utils/tailwindUtil to merge Tailwind class names; do not use :class="[]" syntax
Use ref for reactive state in Vue Composition API components
Implement computed properties with computed() from Vue; avoid using a ref with a watch if a computed would work instead
Use watch and watchEffect for side effects in Vue components
Implement lifecycle hooks using onMounted, onUpdated, and other Vue lifecycle functions
Use provide/inject for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundant computed, and prefer computed over watch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries in src/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead

Files:

  • src/renderer/extensions/vueNodes/components/NodeWidgets.vue
🧠 Learnings (6)
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Vue components must use `<script setup lang="ts">` for component logic

Applied to files:

  • src/scripts/app.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/scripts/app.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/scripts/app.ts
  • src/renderer/extensions/vueNodes/components/NodeWidgets.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/renderer/extensions/vueNodes/components/NodeWidgets.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/renderer/extensions/vueNodes/components/NodeWidgets.vue
📚 Learning: 2025-12-11T03:55:51.755Z
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In Vue components under src/renderer/extensions/vueNodes (e.g., ImagePreview.vue and LGraphNode.vue), implement image gallery keyboard navigation so that it responds to the node's focus state rather than requiring focus inside the image preview wrapper. Achieve this by wiring keyEvent handling at the node focus level and injecting or propagating key events (arrow keys) to the gallery when the node is focused/selected. This improves accessibility and aligns navigation with node-level focus behavior.

Applied to files:

  • src/renderer/extensions/vueNodes/components/NodeWidgets.vue
🪛 GitHub Actions: CI: Size Data
src/scripts/app.ts

[error] 34-34: TS6133: 'executeNumberControls' is declared but its value is never read.

🪛 GitHub Check: collect
src/scripts/app.ts

[failure] 34-34:
'executeNumberControls' is declared but its value is never read.

⏰ 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). (3)
  • GitHub Check: test
  • GitHub Check: lint-and-format
  • GitHub Check: setup
🔇 Additional comments (1)
src/renderer/extensions/vueNodes/components/NodeWidgets.vue (1)

175-176: LGTM! Clean extension of the simplified widget model.

The addition of borderStyle and controlWidget to the simplified widget construction properly enables serialization of control widget state. The implementation correctly sources both fields from the widget object, and the trailing comma on line 175 follows modern conventions.

@christian-byrne christian-byrne linked an issue Dec 13, 2025 that may be closed by this pull request
@christian-byrne
Copy link
Contributor

Confirmed all test failures are from the seed control, re-generating baseline snapshots now!

@christian-byrne christian-byrne added New Browser Test Expectations New browser test screenshot should be set by github action and removed claude-review Add to trigger a PR code review from Claude Code labels Dec 13, 2025
@dosubot dosubot bot removed the size:XXL This PR changes 1000+ lines, ignoring generated files. label Dec 13, 2025
@github-actions github-actions bot removed the New Browser Test Expectations New browser test screenshot should be set by github action label Dec 13, 2025
@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Dec 13, 2025
@christian-byrne christian-byrne merged commit b22ba97 into main Dec 13, 2025
8 checks passed
@christian-byrne christian-byrne deleted the austin/vue-control-after-generate branch December 13, 2025 12:23
DrJKL added a commit that referenced this pull request Dec 16, 2025
github-actions bot pushed a commit that referenced this pull request Dec 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Nodes v2 - Seeds dont behave as expected

5 participants