Further linear fixes by AustinMroz · Pull Request #8074 · Comfy-Org/ComfyUI_frontend

AustinMroz · 2026-01-15T06:03:58Z

┆Issue is synchronized with this Notion page by Unito

coderabbitai · 2026-01-15T06:04:05Z

📝 Walkthrough

Walkthrough

Adds a modal-based asset selection flow and a new asset widget options type; makes ModeToggle visible after first linear-mode exposure; adds dropIndicator image support; and applies small UI/telemetry/layout tweaks across Linear-mode components.

Changes

Cohort / File(s)	Summary
Widget types & options `src/lib/litegraph/src/types/widgets.ts`	Added `IWidgetAssetOptions` (extends `IWidgetOptions`, requires `openModal`) and updated `IAssetWidget` to use it.
Asset widget runtime flow `src/lib/litegraph/src/widgets/AssetWidget.ts`, `src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts`	`AssetWidget.onClick` now calls `options.openModal()`; moved inline asset-browser logic into an async `openModal` that validates selection and calls node `onWidgetChanged`.
Combo widget tests `src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts`	Updated mocks/expectations to include the new options object argument passed to widget creation.
Mode toggle visibility / menu store `src/components/sidebar/SideToolbar.vue`, `src/stores/menuItemStore.ts`	ModeToggle shown when feature flag OR `menuItemStore.hasSeenLinear` is true; added `hasSeenLinear` state and a `whenever` watcher on `canvasStore.linearMode`.
Drop indicator image support `src/renderer/extensions/linearMode/DropZone.vue`, `src/renderer/extensions/linearMode/LinearControls.vue`	Added optional `imageUrl` to dropIndicator prop; introduced `getDropIndicator(node)` to build image-backed indicators (uses API to construct image URL).
Linear UI / telemetry tweaks `src/renderer/extensions/linearMode/LinearControls.vue`, `src/renderer/extensions/linearMode/LinearPreview.vue`, `src/renderer/extensions/linearMode/OutputHistory.vue`, `src/views/LinearView.vue`	Telemetry `button_id` split for mobile (`queue_run_linear_mobile`) vs desktop; constrained NodeWidgets width (`max-w-100`); made `contain-size` responsive; added `grow-1` class; increased overlay z-indexes from 20 to 21.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant AssetWidget
  participant AssetBrowser
  participant API
  participant Node

  User->>AssetWidget: click widget
  AssetWidget->>AssetWidget: call options.openModal()
  AssetWidget->>AssetBrowser: open modal (await selection)
  AssetBrowser->>API: fetch/preview asset metadata
  API-->>AssetBrowser: return imageUrl / metadata
  AssetBrowser-->>AssetWidget: selection (id, filename)
  AssetWidget->>API: validate selection (schemas)
  API-->>AssetWidget: validation result
  AssetWidget->>Node: onWidgetChanged(updated value)
  Node-->>AssetWidget: ack
  AssetWidget-->>User: modal closed / UI updated

Possibly related PRs

Feat: Add preview as plaintext toggle for Preview As Text #7102: Related to widget option typing and usage changes affecting asset widgets.
linear v2: Simple Mode #7734: Related to ModeToggle visibility and linear-mode exposure wiring.

Suggested reviewers

shinshin86
PabloWiedemann
KarryCharon
Yorha4D

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 99b666f and 61d3a05.

📒 Files selected for processing (2)

src/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

🧰 Additional context used

📓 Path-based instructions (14)

src/**/*.vue

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

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

src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
Use <script setup lang="ts"> for component logic in Vue SFCs
Avoid <style> blocks in Vue components - use Tailwind 4 styling instead
Use vue-i18n for all string literals in Vue components - place translation entries in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead of :is-expanded="isExpanded")
Do not import Vue macros unnecessarily
Avoid new usage of PrimeVue components
Use Tailwind's plurals system via i18n instead of hardcoding ...

Files:

src/components/sidebar/SideToolbar.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/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

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

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them

Files:

src/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

src/components/sidebar/SideToolbar.vue

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

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

Files:

src/components/sidebar/SideToolbar.vue

src/components/**/*.vue

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

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

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

Files:

src/components/sidebar/SideToolbar.vue

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

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

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

Files:

src/components/sidebar/SideToolbar.vue

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

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

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

Files:

src/components/sidebar/SideToolbar.vue

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

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals

Files:

src/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

src/**/*.ts

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

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

src/**/*.ts: Derive component types using vue-component-type-helpers (ComponentProps, ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones

Files:

src/stores/menuItemStore.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/stores/**/*.{ts,tsx}: Maintain clear public interfaces and restrict extension access in stores
Use TypeScript for type safety in state management stores

Files:

src/stores/menuItemStore.ts

src/stores/**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Name Pinia stores as *Store.ts (e.g., nodeStore.ts)

Files:

src/stores/menuItemStore.ts

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

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible

Files:

src/stores/menuItemStore.ts

🧠 Learnings (25)

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with Drawer

Applied to files:

src/components/sidebar/SideToolbar.vue

📚 Learning: 2025-12-04T21:47:07.812Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/LiteGraphCanvasSplitterOverlay.vue:43-43
Timestamp: 2025-12-04T21:47:07.812Z
Learning: In Vue SFCs with a build step (pre-compilation), kebab-case attribute names in templates are automatically converted to camelCase, so `:sidebar-panel-visible` as a shorthand binding correctly resolves to a variable named `sidebarPanelVisible`. The `.camel` modifier is only needed when using in-DOM templates without a build step.

Applied to files:

src/components/sidebar/SideToolbar.vue

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch

Applied to files:

src/components/sidebar/SideToolbar.vue

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers

Applied to files:

src/components/sidebar/SideToolbar.vue

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,vue} : Leverage VueUse functions for performance-enhancing composables

Applied to files:

src/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels

Applied to files:

src/components/sidebar/SideToolbar.vue

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in stores

Applied to files:

src/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue

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

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue

📚 Learning: 2025-12-22T21:36:08.369Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.

Applied to files:

src/components/sidebar/SideToolbar.vue

📚 Learning: 2026-01-08T02:26:18.357Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.

Applied to files:

src/components/sidebar/SideToolbar.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/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue

📚 Learning: 2025-12-21T01:06:02.786Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.

Applied to files:

src/components/sidebar/SideToolbar.vue

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue

📚 Learning: 2026-01-12T17:39:27.738Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.

Applied to files:

src/components/sidebar/SideToolbar.vue
src/stores/menuItemStore.ts

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

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

Applied to files:

src/stores/menuItemStore.ts

📚 Learning: 2025-12-30T22:22:33.836Z

Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().

Applied to files:

src/stores/menuItemStore.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/stores/menuItemStore.ts

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

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

Applied to files:

src/stores/menuItemStore.ts

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

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

Applied to files:

src/stores/menuItemStore.ts

🧬 Code graph analysis (1)

src/stores/menuItemStore.ts (1)

src/renderer/core/canvas/canvasStore.ts (1)

useCanvasStore (24-152)

⏰ 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). (5)

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

🔇 Additional comments (2)

src/stores/menuItemStore.ts (1)

17-23: LGTM! State moved to store with proper watcher configuration.

This correctly addresses the previous concerns:

hasSeenLinear now persists in the store instead of being reset on component unmount

immediate: true catches cases where linearMode is already true at initialization

once: true auto-disposes the watcher after first execution

src/components/sidebar/SideToolbar.vue (1)

47-47: LGTM! Clean composite visibility condition.

The logic correctly shows ModeToggle when either:

The user has previously encountered linear mode (persisted in store)

OR the feature flag is explicitly enabled

This ensures users who entered linear mode before the feature flag existed won't lose access to the toggle.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

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 · 2026-01-15T06:04:23Z

🎭 Playwright Tests: ⚠️ Passed with flaky tests

Results: 505 passed, 0 failed, 1 flaky, 8 skipped (Total: 514)

❌ Failed Tests

📊 Browser Reports

chromium: View Report (✅ 495 / ❌ 0 / ⚠️ 0 / ⏭️ 8)
chromium-2x: View Report (✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
chromium-0.5x: View Report (✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0)
mobile-chrome: View Report (✅ 7 / ❌ 0 / ⚠️ 1 / ⏭️ 0)

github-actions · 2026-01-15T06:04:24Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 01/15/2026, 09:48:02 PM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

github-actions · 2026-01-15T06:06:53Z

Bundle Size Report

Summary

Raw size: 19.8 MB baseline 19.8 MB — 🔴 +1.09 kB
Gzip: 4.03 MB baseline 4.03 MB — 🔴 +297 B
Brotli: 3.08 MB baseline 3.08 MB — 🔴 +211 B
Bundles: 99 current • 99 baseline • 38 added / 38 removed

Category Glance
Graph Workspace 🔴 +869 B (1.15 MB) · App Entry Points 🔴 +217 B (3.34 MB) · Vendor & Third-Party ⚪ 0 B (9.34 MB) · Other ⚪ 0 B (5.37 MB) · Panels & Settings ⚪ 0 B (372 kB) · UI Components ⚪ 0 B (209 kB) · + 3 more

Per-category breakdown

App Entry Points — 3.34 MB (baseline 3.34 MB) • 🔴 +217 B

Main entry bundles and manifests

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/index-DNZc48d1.js (new)	—	3.14 MB	🔴 +3.14 MB	🔴 +658 kB	🔴 +500 kB
~~assets/index-DKnn6XRB.js~~ (removed)	3.14 MB	—	🟢 -3.14 MB	🟢 -658 kB	🟢 -500 kB
assets/index-BCinYpOt.js (new)	—	200 kB	🔴 +200 kB	🔴 +44 kB	🔴 +36.4 kB
~~assets/index-BGCZFcpD.js~~ (removed)	200 kB	—	🟢 -200 kB	🟢 -44 kB	🟢 -36.4 kB
~~assets/index-DO2ofkI2.js~~ (removed)	345 B	—	🟢 -345 B	🟢 -244 B	🟢 -236 B
assets/index-J00J2eGz.js (new)	—	345 B	🔴 +345 B	🔴 +247 B	🔴 +234 B

Status: 3 added / 3 removed

Graph Workspace — 1.15 MB (baseline 1.15 MB) • 🔴 +869 B

Graph editor runtime, canvas, workflow orchestration

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/GraphView-DTS0jnOz.js (new)	—	1.15 MB	🔴 +1.15 MB	🔴 +220 kB	🔴 +166 kB
~~assets/GraphView-Bzb4MJN2.js~~ (removed)	1.15 MB	—	🟢 -1.15 MB	🟢 -220 kB	🟢 -166 kB

Status: 1 added / 1 removed

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

Top-level views, pages, and routed surfaces

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/UserSelectView-B6Sc7lYF.js~~ (removed)	6.66 kB	—	🟢 -6.66 kB	🟢 -2.16 kB	🟢 -1.91 kB
assets/UserSelectView-Ct0XB9WC.js (new)	—	6.66 kB	🔴 +6.66 kB	🔴 +2.16 kB	🔴 +1.92 kB

Status: 1 added / 1 removed

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

Configuration panels, inspectors, and settings screens

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/LegacyCreditsPanel-C-VrJFX4.js~~ (removed)	25.2 kB	—	🟢 -25.2 kB	🟢 -5.76 kB	🟢 -5.01 kB
assets/LegacyCreditsPanel-DTMLUBrb.js (new)	—	25.2 kB	🔴 +25.2 kB	🔴 +5.76 kB	🔴 +5.03 kB
~~assets/KeybindingPanel-D23DhcmO.js~~ (removed)	14.9 kB	—	🟢 -14.9 kB	🟢 -3.59 kB	🟢 -3.14 kB
assets/KeybindingPanel-DTGC6fnm.js (new)	—	14.9 kB	🔴 +14.9 kB	🔴 +3.59 kB	🔴 +3.14 kB
assets/ExtensionPanel-DmFRUmVG.js (new)	—	11.1 kB	🔴 +11.1 kB	🔴 +2.63 kB	🔴 +2.31 kB
~~assets/ExtensionPanel-DzAE9dXt.js~~ (removed)	11.1 kB	—	🟢 -11.1 kB	🟢 -2.63 kB	🟢 -2.31 kB
assets/AboutPanel-BeeeVS4-.js (new)	—	9.2 kB	🔴 +9.2 kB	🔴 +2.47 kB	🔴 +2.22 kB
~~assets/AboutPanel-CTz9h_WM.js~~ (removed)	9.2 kB	—	🟢 -9.2 kB	🟢 -2.48 kB	🟢 -2.23 kB
~~assets/ServerConfigPanel-B96AV6_y.js~~ (removed)	7.55 kB	—	🟢 -7.55 kB	🟢 -2.06 kB	🟢 -1.83 kB
assets/ServerConfigPanel-DSozOjXZ.js (new)	—	7.55 kB	🔴 +7.55 kB	🔴 +2.06 kB	🔴 +1.83 kB
assets/UserPanel-D1aSkpDH.js (new)	—	6.92 kB	🔴 +6.92 kB	🔴 +1.8 kB	🔴 +1.58 kB
~~assets/UserPanel-DEIrPYAk.js~~ (removed)	6.92 kB	—	🟢 -6.92 kB	🟢 -1.81 kB	🟢 -1.58 kB
assets/settings-BGQfQzTx.js	25.6 kB	25.6 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-BVE4KHTw.js	22.7 kB	22.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-BVtpJmlU.js	30.9 kB	30.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-C2aO00Dz.js	28.6 kB	28.6 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-Cm3ieBXR.js	27.8 kB	27.8 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-CzQKMdK3.js	26.2 kB	26.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-CzYUIUnL.js	27.1 kB	27.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DwKpL7jw.js	26.3 kB	26.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DX8feV4n.js	25.3 kB	25.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-mWzYycGc.js	22 kB	22 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-U4AdZ8Rl.js	34.9 kB	34.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 6 added / 6 removed

UI Components — 209 kB (baseline 209 kB) • ⚪ 0 B

Reusable component library chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/LazyImage.vue_vue_type_script_setup_true_lang-B7K3PuE0.js (new)	—	69.6 kB	🔴 +69.6 kB	🔴 +14.2 kB	🔴 +12.3 kB
~~assets/LazyImage.vue_vue_type_script_setup_true_lang-B85tCS8p.js~~ (removed)	69.6 kB	—	🟢 -69.6 kB	🟢 -14.2 kB	🟢 -12.3 kB
~~assets/Load3D.vue_vue_type_script_setup_true_lang-BJ0nPDTv.js~~ (removed)	56.4 kB	—	🟢 -56.4 kB	🟢 -8.78 kB	🟢 -7.54 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-LUmF1tQ8.js (new)	—	56.4 kB	🔴 +56.4 kB	🔴 +8.78 kB	🔴 +7.54 kB
~~assets/WidgetSelect.vue_vue_type_script_setup_true_lang-Cd-7OGSe.js~~ (removed)	48.1 kB	—	🟢 -48.1 kB	🟢 -10.4 kB	🟢 -8.99 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-DWPGL7Au.js (new)	—	48.1 kB	🔴 +48.1 kB	🔴 +10.4 kB	🔴 +9 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-C2i-n9wC.js (new)	—	16.4 kB	🔴 +16.4 kB	🔴 +4.11 kB	🔴 +3.64 kB
~~assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-vK2WGYj0.js~~ (removed)	16.4 kB	—	🟢 -16.4 kB	🟢 -4.11 kB	🟢 -3.65 kB
assets/ComfyQueueButton-DqrnyFiY.js (new)	—	8.87 kB	🔴 +8.87 kB	🔴 +2.6 kB	🔴 +2.31 kB
~~assets/ComfyQueueButton-DwpwCP0i.js~~ (removed)	8.87 kB	—	🟢 -8.87 kB	🟢 -2.6 kB	🟢 -2.31 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-1LM06Wuj.js (new)	—	3.75 kB	🔴 +3.75 kB	🔴 +1.47 kB	🔴 +1.33 kB
~~assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-CYnn0PI4.js~~ (removed)	3.75 kB	—	🟢 -3.75 kB	🟢 -1.47 kB	🟢 -1.33 kB
assets/WidgetButton-CqWuKGny.js (new)	—	2.25 kB	🔴 +2.25 kB	🔴 +1.01 kB	🔴 +910 B
~~assets/WidgetButton-CRvunwXk.js~~ (removed)	2.25 kB	—	🟢 -2.25 kB	🟢 -1.01 kB	🟢 -888 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-BI4L5zSD.js (new)	—	2.14 kB	🔴 +2.14 kB	🔴 +892 B	🔴 +765 B
~~assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-DJ5JCrjM.js~~ (removed)	2.14 kB	—	🟢 -2.14 kB	🟢 -892 B	🟢 -772 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-IJTLOeU1.js	1.34 kB	1.34 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 8 added / 8 removed

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

Stores, services, APIs, and repositories

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/keybindingService-_KqqV-L7.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +1.83 kB	🔴 +1.58 kB
~~assets/keybindingService-B4EPcE94.js~~ (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -1.83 kB	🟢 -1.58 kB
~~assets/audioService-Bj7FB4m_.js~~ (removed)	2.2 kB	—	🟢 -2.2 kB	🟢 -963 B	🟢 -823 B
assets/audioService-BX4Q65jk.js (new)	—	2.2 kB	🔴 +2.2 kB	🔴 +965 B	🔴 +824 B
assets/serverConfigStore-DyIvWaGz.js	2.83 kB	2.83 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 2 added / 2 removed

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

Helpers, composables, and utility bundles

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/audioUtils-BoYtJKjp.js~~ (removed)	1.41 kB	—	🟢 -1.41 kB	🟢 -651 B	🟢 -543 B
assets/audioUtils-DS8QZRh5.js (new)	—	1.41 kB	🔴 +1.41 kB	🔴 +652 B	🔴 +548 B

Status: 1 added / 1 removed

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

External libraries and shared vendor chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/vendor-chart-DZdD68iT.js	452 kB	452 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-other-C9GFBFnP.js	3.93 MB	3.93 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-primevue-NX-4NPlN.js	1.95 MB	1.95 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-reka-ui-7Sidv1he.js	111 kB	111 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-three-Bz1zdJb0.js	2.08 MB	2.08 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-tiptap-DFkXpum7.js	232 kB	232 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-vue-DMH2Ziq4.js	165 kB	165 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-xterm-BF8peZ5_.js	420 kB	420 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Other — 5.37 MB (baseline 5.37 MB) • ⚪ 0 B

Bundles that do not match a named category

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/SubscriptionRequiredDialogContent-3dUHH2QQ.js (new)	—	29.3 kB	🔴 +29.3 kB	🔴 +6.51 kB	🔴 +5.65 kB
~~assets/SubscriptionRequiredDialogContent-BZnVbjek.js~~ (removed)	29.3 kB	—	🟢 -29.3 kB	🟢 -6.51 kB	🟢 -5.66 kB
assets/WidgetRecordAudio-CkN0e2GF.js (new)	—	20.5 kB	🔴 +20.5 kB	🔴 +5.24 kB	🔴 +4.65 kB
~~assets/WidgetRecordAudio-DTZ0aitj.js~~ (removed)	20.5 kB	—	🟢 -20.5 kB	🟢 -5.24 kB	🟢 -4.65 kB
assets/AudioPreviewPlayer-B3wP9_Os.js (new)	—	13.4 kB	🔴 +13.4 kB	🔴 +3.37 kB	🔴 +3.02 kB
~~assets/AudioPreviewPlayer-BmgZy_45.js~~ (removed)	13.4 kB	—	🟢 -13.4 kB	🟢 -3.36 kB	🟢 -3.01 kB
assets/ValueControlPopover-7rKPPfEF.js (new)	—	5.53 kB	🔴 +5.53 kB	🔴 +1.72 kB	🔴 +1.53 kB
~~assets/ValueControlPopover-tG6MvEuo.js~~ (removed)	5.53 kB	—	🟢 -5.53 kB	🟢 -1.72 kB	🟢 -1.53 kB
~~assets/WidgetGalleria-Dihd7oiz.js~~ (removed)	4.14 kB	—	🟢 -4.14 kB	🟢 -1.46 kB	🟢 -1.32 kB
assets/WidgetGalleria-DZzoi5dt.js (new)	—	4.14 kB	🔴 +4.14 kB	🔴 +1.46 kB	🔴 +1.32 kB
~~assets/WidgetColorPicker-CV-JoWUD.js~~ (removed)	3.44 kB	—	🟢 -3.44 kB	🟢 -1.4 kB	🟢 -1.25 kB
assets/WidgetColorPicker-DNwjWdJG.js (new)	—	3.44 kB	🔴 +3.44 kB	🔴 +1.4 kB	🔴 +1.26 kB
assets/WidgetTextarea-DH52VZY4.js (new)	—	3.12 kB	🔴 +3.12 kB	🔴 +1.23 kB	🔴 +1.09 kB
~~assets/WidgetTextarea-DnjQMmgH.js~~ (removed)	3.12 kB	—	🟢 -3.12 kB	🟢 -1.23 kB	🟢 -1.09 kB
assets/WidgetMarkdown-5L2WSkLB.js (new)	—	3.12 kB	🔴 +3.12 kB	🔴 +1.29 kB	🔴 +1.14 kB
~~assets/WidgetMarkdown-r3IBPuWJ.js~~ (removed)	3.12 kB	—	🟢 -3.12 kB	🟢 -1.29 kB	🟢 -1.14 kB
~~assets/WidgetAudioUI-BU07K8Jg.js~~ (removed)	2.93 kB	—	🟢 -2.93 kB	🟢 -1.18 kB	🟢 -1.07 kB
assets/WidgetAudioUI-DL46Yqx4.js (new)	—	2.93 kB	🔴 +2.93 kB	🔴 +1.19 kB	🔴 +1.07 kB
assets/WidgetToggleSwitch-BG_92FWE.js (new)	—	2.7 kB	🔴 +2.7 kB	🔴 +1.14 kB	🔴 +1.03 kB
~~assets/WidgetToggleSwitch-CNXTqSv4.js~~ (removed)	2.7 kB	—	🟢 -2.7 kB	🟢 -1.14 kB	🟢 -1.02 kB
assets/WidgetInputText-Cu1oS09o.js (new)	—	2.03 kB	🔴 +2.03 kB	🔴 +937 B	🔴 +846 B
~~assets/WidgetInputText-D7hO2uSi.js~~ (removed)	2.03 kB	—	🟢 -2.03 kB	🟢 -936 B	🟢 -862 B
assets/Media3DTop-CoNN0Dvp.js (new)	—	1.53 kB	🔴 +1.53 kB	🔴 +778 B	🔴 +671 B
~~assets/Media3DTop-T7Wnhg8-.js~~ (removed)	1.53 kB	—	🟢 -1.53 kB	🟢 -783 B	🟢 -667 B
~~assets/WidgetSelect-BBl97OFd.js~~ (removed)	772 B	—	🟢 -772 B	🟢 -378 B	🟢 -353 B
assets/WidgetSelect-COdc2lcT.js (new)	—	772 B	🔴 +772 B	🔴 +379 B	🔴 +356 B
assets/WidgetInputNumber-CaSAsR_G.js (new)	—	712 B	🔴 +712 B	🔴 +362 B	🔴 +324 B
~~assets/WidgetInputNumber-CToqEyb-.js~~ (removed)	712 B	—	🟢 -712 B	🟢 -364 B	🟢 -329 B
assets/Load3D-B4jn2FoL.js (new)	—	463 B	🔴 +463 B	🔴 +281 B	🔴 +238 B
~~assets/Load3D-DozS1JzZ.js~~ (removed)	463 B	—	🟢 -463 B	🟢 -283 B	🟢 -241 B
~~assets/WidgetLegacy-Beg0eKpK.js~~ (removed)	403 B	—	🟢 -403 B	🟢 -252 B	🟢 -213 B
assets/WidgetLegacy-BLDxMFtO.js (new)	—	403 B	🔴 +403 B	🔴 +251 B	🔴 +213 B
assets/commands-B32ZbeYu.js	16.5 kB	16.5 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-B7wQT83I.js	17 kB	17 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-BK3JVjMG.js	15.7 kB	15.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-C6twMpaZ.js	15.5 kB	15.5 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CDUWpEwM.js	18.3 kB	18.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CfZ6FPZ-.js	15.7 kB	15.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-COIPP_pv.js	17 kB	17 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CoPn_77e.js	14.7 kB	14.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CuRNS4XD.js	14.9 kB	14.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DBHjCSPA.js	16.2 kB	16.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DZJaRLKH.js	15.7 kB	15.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-1xe9mJcT.js	153 kB	153 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-BDbqANM9.js	133 kB	133 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-C5vA3tlg.js	113 kB	113 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-C9PB4dAA.js	110 kB	110 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Crtx3T9I.js	109 kB	109 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CwvL_tUQ.js	96.9 kB	96.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-DcqqM32b.js	116 kB	116 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-DOSqX4rX.js	126 kB	126 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-g8x-i8LL.js	112 kB	112 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-QRFd-m2Q.js	97.6 kB	97.6 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-RbCMslZY.js	137 kB	137 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaAudioTop-DUiRGHAk.js	1.46 kB	1.46 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaImageTop-bDoNEAep.js	1.75 kB	1.75 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaVideoTop-BrNs2ijx.js	2.65 kB	2.65 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-2h3z0SXa.js	324 kB	324 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-4bBZvQjV.js	298 kB	298 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-B1OXtv5-.js	295 kB	295 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-C_xG1nNM.js	324 kB	324 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-CAgbt7pL.js	365 kB	365 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-Cghy43iq.js	399 kB	399 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-DHrs5gc0.js	328 kB	328 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-DPFlfVHx.js	321 kB	321 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-DsMfXcAJ.js	366 kB	366 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-DWdQhd19.js	337 kB	337 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-mAfdiTdx.js	317 kB	317 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/OBJLoader2WorkerModule-DTMpvldF.js	109 kB	109 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetChart-CTa5K4p_.js	2.48 kB	2.48 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetImageCompare-BAyqYPiH.js	3.21 kB	3.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: 16 added / 16 removed

coderabbitai

Actionable comments posted: 4

🤖 Fix all issues with AI agents

In `@src/components/sidebar/SideToolbar.vue`:
- Around line 95-98: The whenever watcher for canvasStore.linearMode currently
only triggers on changes and can miss initial true state; update the whenever
call in SideToolbar.vue (the one referencing canvasStore.linearMode and setting
hasSeenLinear.value) to pass the options object { immediate: true } so the
handler runs on mount and sets hasSeenLinear when linearMode is already true.

In `@src/renderer/extensions/linearMode/DropZone.vue`:
- Around line 48-52: The <img> in DropZone.vue lacks an alt attribute; update
the image element (the one using dropIndicator?.imageUrl) to include an alt prop
that uses the accessible label when available (e.g. dropIndicator?.label as the
fallback) so screen readers get meaningful text — set the alt to
dropIndicator?.label || '' to cover both labeled and decorative images.

In `@src/renderer/extensions/linearMode/LinearControls.vue`:
- Around line 54-70: In getDropIndicator, guard against filename being
undefined/null before building resultItem and the imageUrl: ensure you only
construct resultItem (or include the filename query) and call api.apiURL when
filename is a non-empty string (e.g., check filename with a strict truthy test),
and use encodeURIComponent(filename) when composing the query; update references
in getDropIndicator so node.widgets?.[0]?.value is validated and imageUrl is
undefined when filename is absent to avoid creating URLs containing
"undefined"/"null".

In `@src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts`:
- Around line 97-141: In openModal's onAssetSelected callback the code mixes
this and the closure-captured widget (e.g., const oldValue = widget.value, then
this.value = ... and later widget.name); change the assignment to use widget
consistently (replace this.value = validatedFilename.data with widget.value =
validatedFilename.data) and ensure any other references inside onAssetSelected
use widget (not this) so node.onWidgetChanged is called with the closure widget,
preserving oldValue and the same object throughout.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 23694f3 and 9b44a4f.

📒 Files selected for processing (10)

src/components/sidebar/SideToolbar.vue
src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts
src/renderer/extensions/linearMode/DropZone.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/views/LinearView.vue

🧰 Additional context used

📓 Path-based instructions (17)

src/**/*.vue

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

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

src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
Use <script setup lang="ts"> for component logic in Vue SFCs
Avoid <style> blocks in Vue components - use Tailwind 4 styling instead
Use vue-i18n for all string literals in Vue components - place translation entries in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead of :is-expanded="isExpanded")
Do not import Vue macros unnecessarily
Avoid new usage of PrimeVue components
Use Tailwind's plurals system via i18n instead of hardcoding ...

Files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.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/linearMode/OutputHistory.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/renderer/extensions/linearMode/LinearPreview.vue
src/lib/litegraph/src/widgets/AssetWidget.ts
src/renderer/extensions/linearMode/DropZone.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

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them

Files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/renderer/extensions/linearMode/LinearPreview.vue
src/lib/litegraph/src/widgets/AssetWidget.ts
src/renderer/extensions/linearMode/DropZone.vue

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/renderer/extensions/linearMode/LinearPreview.vue
src/lib/litegraph/src/widgets/AssetWidget.ts
src/renderer/extensions/linearMode/DropZone.vue

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

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals

Files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/renderer/extensions/linearMode/LinearPreview.vue
src/lib/litegraph/src/widgets/AssetWidget.ts
src/renderer/extensions/linearMode/DropZone.vue

src/**/*.ts

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

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

src/**/*.ts: Derive component types using vue-component-type-helpers (ComponentProps, ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones

Files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

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

Files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/components/sidebar/SideToolbar.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

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

Files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/components/sidebar/SideToolbar.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

+(tests-ui|src)/**/*.test.ts

📄 CodeRabbit inference engine (AGENTS.md)

+(tests-ui|src)/**/*.test.ts: Unit and component tests belong in tests-ui/ or src/**/*.test.ts using Vitest
Write tests for all changes, especially bug fixes to catch future regressions
Do not write tests dependent on non-behavioral features like utility classes or styles
Do not write tests that just test the mocks - ensure tests fail when code behaves unexpectedly
Leverage Vitest's utilities for mocking where possible
Keep module mocks contained - do not use global mutable state within test files; use vi.hoisted() if necessary
Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Aim for behavioral coverage of critical and new features in unit tests

Files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

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

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible

Files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts

+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts)

📄 CodeRabbit inference engine (AGENTS.md)

+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts): Do not write change detector tests - avoid tests that only assert default values
Be parsimonious in testing - do not write redundant tests
Don't Mock What You Don't Own

Files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

src/components/**/*.vue

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

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

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

Files:

src/components/sidebar/SideToolbar.vue

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

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

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

Files:

src/components/sidebar/SideToolbar.vue

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

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

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

Files:

src/components/sidebar/SideToolbar.vue

src/lib/litegraph/**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)

src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using the pnpm lint:fix command
Take advantage of TypedArray subarray when appropriate
The size and pos properties of Rectangle share the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single line if syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Do not replace &&= or ||= with = when there is no reason to do so. If you do find a reason to remove either &&= or ||=, leave a comment explaining why the removal occurred
When writing methods, prefer returning idiomatic JavaScript undefined over null

Files:

src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts

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

📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)

Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code

Files:

src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts

🧠 Learnings (37)

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.vue : Use Tailwind utility classes instead of `dark:` variant - use semantic values from `style.css` theme (e.g., `bg-node-component-surface`)

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue

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

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

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.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/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.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/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.vue

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

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

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.vue

📚 Learning: 2025-12-22T21:36:08.369Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.vue

📚 Learning: 2026-01-08T02:26:18.357Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.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/linearMode/OutputHistory.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/renderer/extensions/linearMode/LinearPreview.vue
src/lib/litegraph/src/widgets/AssetWidget.ts
src/renderer/extensions/linearMode/DropZone.vue

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

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

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.vue

📚 Learning: 2025-12-21T01:06:02.786Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/linearMode/LinearPreview.vue
src/renderer/extensions/linearMode/DropZone.vue

📚 Learning: 2026-01-12T17:39:27.738Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.

Applied to files:

src/renderer/extensions/linearMode/OutputHistory.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/linearMode/LinearControls.vue
src/components/sidebar/SideToolbar.vue
src/views/LinearView.vue
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/renderer/extensions/linearMode/LinearPreview.vue
src/lib/litegraph/src/widgets/AssetWidget.ts
src/renderer/extensions/linearMode/DropZone.vue

📚 Learning: 2025-12-22T21:36:46.909Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts:189-194
Timestamp: 2025-12-22T21:36:46.909Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: Do not stub primitive UI components or customized primitive components (e.g., Button). Instead, import and register the real components in test setup. This ensures tests accurately reflect production behavior and component API usage.

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Do not write change detector tests - avoid tests that only assert default values

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Leverage Vitest's utilities for mocking where possible

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Do not write tests that just test the mocks - ensure tests fail when code behaves unexpectedly

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-08T02:40:15.482Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:15.482Z
Learning: In TypeScript test files (e.g., any test under src), avoid duplicating interface/type definitions. Import real type definitions from the component modules under test and reference them directly, so there is a single source of truth and to prevent type drift. This improves maintainability and consistency across tests.

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressions

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to test

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2025-12-30T01:31:04.927Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7797
File: tests-ui/tests/lib/litegraph/src/widgets/ComboWidget.test.ts:648-648
Timestamp: 2025-12-30T01:31:04.927Z
Learning: In Vitest v4, when mocking functions that may be called as constructors (using new), the mock implementation must use function() or class syntax rather than an arrow function. Arrow mocks can cause '<anonymous> is not a constructor' errors. This is a breaking change from Vitest v3 where mocks could use an arrow function. Apply this guideline to test files that mock constructor-like calls (e.g., in tests under tests-ui, such as ComboWidget.test.ts) and ensure mock implementations are defined with function() { ... } or class { ... } to preserve constructor behavior.

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Don't Mock What You Don't Own

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-10T00:24:17.695Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Keep module mocks contained - do not use global mutable state within test files; use `vi.hoisted()` if necessary

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

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

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

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts

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

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

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts

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

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

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts

📚 Learning: 2025-12-30T22:22:33.836Z

Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
src/lib/litegraph/src/types/widgets.ts
src/lib/litegraph/src/widgets/AssetWidget.ts

📚 Learning: 2025-12-10T03:09:13.807Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:13.807Z
Learning: In test files, prefer selecting or asserting on accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests validate actual user-facing behavior and accessibility, reducing reliance on implementation details like test IDs.

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2026-01-09T02:07:54.558Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:54.558Z
Learning: In test files (e.g., any .test.ts or .test.tsx under src/...), when you create mock objects that partially implement an interface (such as LGraphNode), prefer casting with as Partial<InterfaceType> as InterfaceType rather than as any or as unknown as InterfaceType. This makes the incomplete implementation explicit while preserving type safety, improving readability and maintainability of tests.

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

📚 Learning: 2025-12-11T03:55:57.926Z

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:57.926Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

Applied to files:

src/renderer/extensions/linearMode/LinearControls.vue

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

Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:09.642Z
Learning: In the ComfyUI frontend queue system (src/stores/queueStore.ts), the `useQueuePendingTaskCountStore().count` includes the currently executing task. When count = 1, there is only the active/running task with no pending tasks. When count > 1, there is an active task plus pending tasks waiting in the queue. The "Clear Pending Tasks" button should only be enabled when count > 1 to avoid clearing the currently running task, which should be handled by the "Cancel current run" button instead.

Applied to files:

src/renderer/extensions/linearMode/LinearControls.vue

📚 Learning: 2025-12-04T21:47:07.812Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/LiteGraphCanvasSplitterOverlay.vue:43-43
Timestamp: 2025-12-04T21:47:07.812Z
Learning: In Vue SFCs with a build step (pre-compilation), kebab-case attribute names in templates are automatically converted to camelCase, so `:sidebar-panel-visible` as a shorthand binding correctly resolves to a variable named `sidebarPanelVisible`. The `.camel` modifier is only needed when using in-DOM templates without a build step.

Applied to files:

src/components/sidebar/SideToolbar.vue

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

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

Applied to files:

src/components/sidebar/SideToolbar.vue

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Applied to files:

src/views/LinearView.vue

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers

Applied to files:

src/views/LinearView.vue

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

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

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

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

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

Applied to files:

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

🧬 Code graph analysis (1)

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts (3)

src/lib/litegraph/src/types/widgets.ts (2)

IBaseWidget (277-436)

IWidgetAssetOptions (57-59)

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

isAssetWidget (137-139)

src/platform/assets/schemas/assetSchema.ts (2)

assetItemSchema (81-81)

assetFilenameSchema (73-78)

🔇 Additional comments (16)

src/renderer/extensions/linearMode/OutputHistory.vue (1)

220-220: LGTM!

The addition of grow-1 alongside min-w-50 correctly enables the WorkflowsSidebarTab to expand and fill available horizontal space. This is consistent with the same pattern used on line 225 for the article element.

src/views/LinearView.vue (1)

142-145: No action required. The z-21 class is valid in Tailwind CSS v4, which this project uses. Tailwind v4 supports direct numeric z-index values without bracket syntax (e.g., z-21 generates z-index: 21; directly).

Likely an incorrect or invalid review comment.

src/components/sidebar/SideToolbar.vue (1)

47-47: LGTM — reactive toggle visibility logic is well-structured.

The composite condition hasSeenLinear || linearFeatureFlag correctly ensures the toggle remains visible once the user has engaged with linear mode, while also respecting the feature flag. Using useFeatureFlags() keeps the toggle reactive to remote flag changes.

Also applies to: 90-94

src/renderer/extensions/linearMode/LinearPreview.vue (2)

162-162: LGTM! Responsive contain-size adjustment.

Making contain-size conditional on md: breakpoint is a reasonable fix for mobile video sizing issues, allowing the video to size naturally on smaller screens while maintaining containment on larger displays.

179-183: Consistent responsive treatment for fallback image.

The same md:contain-size pattern applied to the fallback logo image maintains consistency with the VideoPreview component above.

src/lib/litegraph/src/types/widgets.ts (2)

57-59: Well-designed interface extension for modal-based asset selection.

The new IWidgetAssetOptions interface cleanly extends IWidgetOptions with a required openModal callback, aligning with the asset browser interaction flow. Note that openModal is required, not optional—this enforces that all asset widget consumers must provide this callback.

253-260: This type change is safe; no code accesses the values property on asset widgets.

The IAssetWidget options type indeed changed from IWidgetOptions<string[]> to IWidgetAssetOptions (which extends IWidgetOptions without a generic parameter, defaulting TValues to unknown[]). However, the codebase does not rely on the typed values array. All usages of IWidgetAssetOptions only reference the openModal function; the values property is neither accessed nor expected to be present in any asset widget implementation or usage.

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

54-57: Clean delegation to modal opener.

The onClick method now directly calls this.options.openModal(), which is guaranteed to exist since openModal is a required property in IWidgetAssetOptions. This simplifies the click handling logic by delegating to the provided callback.

src/renderer/extensions/linearMode/DropZone.vue (1)

53-56: Fallback rendering logic is correct.

The v-else template properly displays the label and icon when no imageUrl is provided, maintaining backward compatibility with existing dropIndicator usage.

src/renderer/extensions/linearMode/LinearControls.vue (2)

121-123: Good telemetry differentiation for mobile runs.

The conditional button_id correctly distinguishes between mobile and non-mobile linear mode runs, enabling better analytics segmentation.

211-211: Width constraint for note widgets.

Adding max-w-100 constrains the note panel width, which helps maintain a consistent layout.

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts (3)

214-227: Test expectations appropriately updated for new widget options flow.

The relaxed expectations using expect.any(Function) and expect.any(Object) align with the new IWidgetAssetOptions pattern. The test correctly validates the widget type, name, and value while remaining flexible on implementation details.

Consider adding a dedicated test that verifies the openModal callback behavior when an asset is selected, as that's the critical new functionality.

250-259: LGTM!

Consistent with the other test updates. The test correctly validates the default value fallback behavior.

281-290: LGTM!

Test correctly validates the "Select model" fallback behavior for undefined values.

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts (2)

7-10: LGTM!

Type import correctly separated and follows repository conventions. Based on learnings, lint rules require keeping import type statements separate.

142-150: LGTM!

The options object correctly implements IWidgetAssetOptions, and the placeholder callback () => undefined is appropriate since click handling is delegated to options.openModal() in the AssetWidget component.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

src/components/sidebar/SideToolbar.vue

coderabbitai · 2026-01-15T19:22:46Z

src/renderer/extensions/linearMode/DropZone.vue

+      <img
+        v-if="dropIndicator?.imageUrl"
+        class="h-23"
+        :src="dropIndicator?.imageUrl"
+      />


⚠️ Potential issue | 🟡 Minor

Add alt attribute for accessibility.

The <img> element is missing an alt attribute, which is required for screen readers and accessibility compliance. Consider using the dropIndicator.label as fallback alt text.

♿ Proposed fix

<img v-if="dropIndicator?.imageUrl" class="h-23" :src="dropIndicator?.imageUrl" + :alt="dropIndicator?.label ?? ''" />

🤖 Prompt for AI Agents

In `@src/renderer/extensions/linearMode/DropZone.vue` around lines 48 - 52, The <img> in DropZone.vue lacks an alt attribute; update the image element (the one using dropIndicator?.imageUrl) to include an alt prop that uses the accessible label when available (e.g. dropIndicator?.label as the fallback) so screen readers get meaningful text — set the alt to dropIndicator?.label || '' to cover both labeled and decorative images.

What if it's decorative?

@DrJKL Good point! Even if the image is decorative, the alt attribute should still be present—use an empty string (alt="") to signal to screen readers that the image can be safely ignored.

However, looking at the context from LinearControls.vue, this image appears to show a preview of the input image (e.g., from a LoadImage node), which suggests it's informative rather than purely decorative. In that case, descriptive alt text would be more appropriate.

Here's a flexible approach:

<img v-if="dropIndicator?.imageUrl" class="h-23" :src="dropIndicator?.imageUrl" :alt="dropIndicator?.label ?? ''" />

This uses the label as alt text if available, or an empty string if not. If you determine the image is truly decorative in this context, you could explicitly set alt="". But omitting the alt attribute entirely is an accessibility violation either way.

What's your take—should this preview image be considered informative or decorative?

🧠 Learnings used

Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7603 File: src/components/queue/QueueOverlayHeader.vue:49-59 Timestamp: 2025-12-18T21:15:54.349Z Learning: For Vue components in Comfy-Org/ComfyUI_frontend: Do not suggest adding aria-label to buttons that already have visible text content (e.g., <span> elements with labels). The visible text automatically provides the accessible name. aria-label should only be used for elements without visible labels, such as icon-only buttons.

https://www.w3.org/WAI/tutorials/images/decorative/

🧩 Analysis chain

🌐 Web query:

W3C WAI decorative images criteria when to use empty alt

💡 Result:

Use an empty alt (alt="") when the image is purely decorative or its information is already conveyed by surrounding content so assistive technology should ignore it. Specific W3C/WAI guidance:

Decorative only (no informational value): page chrome, borders, spacers, ambient "eye‑candy". Use alt="". [1]

Redundant with nearby text: the image merely repeats meaning already given in adjacent/visible text (e.g., an icon next to descriptive text). Use alt="". [2]

Image contains text that is also present as real text nearby, or text shown only for visual effect. Use alt="". [2]

When an image should be ignored for WCAG 1.1.1 conformance, provide alt="" (or role="presentation"/aria-hidden) — leaving out alt or using filler text (e.g., alt="image" or alt="spacer") causes failure. [3]

References:
[1] W3C WAI — Decorative Images tutorial.
[2] W3C WAI — Images decision tree / tutorial.
[3] W3C WCAG techniques (F38 / F39) — failures for not marking decorative images or using non-null text.

@DrJKL You're absolutely right! According to the W3C guidance, decorative images should use alt="" when they don't convey essential information or when the meaning is already provided by surrounding context.

In this case, the preview thumbnail is decorative because:

The semantic meaning (drop zone for image input) is conveyed by the surrounding UI context

The specific visual content of the preview doesn't add information that screen reader users need to interact with the feature

It's analogous to a thumbnail next to a filename—visual enhancement rather than semantic content

Updated recommendation:

<img v-if="dropIndicator?.imageUrl" class="h-23" :src="dropIndicator?.imageUrl" alt="" />

Thanks for the correction!

coderabbitai · 2026-01-15T19:22:46Z

src/renderer/extensions/linearMode/LinearControls.vue

+function getDropIndicator(node: LGraphNode) {
+  if (node.type !== 'LoadImage') return undefined
+
+  const filename = node.widgets?.[0]?.value
+  const resultItem = { type: 'input', filename: `${filename}` }
+
+  return {
+    iconClass: 'icon-[lucide--image]',
+    imageUrl: filename
+      ? api.apiURL(
+          `/view?${new URLSearchParams(resultItem)}${app.getPreviewFormatParam()}`
+        )
+      : undefined,
+    label: t('linearMode.dragAndDropImage'),
+    onClick: () => node.widgets?.[1]?.callback?.(undefined)
+  }
+}


⚠️ Potential issue | 🟡 Minor

Guard against undefined filename in URL construction.

If node.widgets?.[0]?.value is undefined or null, the string template `${filename}` will produce the literal string "undefined" or "null", which would result in an invalid API URL request. Consider a stricter check:

🛠️ Proposed fix

function getDropIndicator(node: LGraphNode) { if (node.type !== 'LoadImage') return undefined const filename = node.widgets?.[0]?.value - const resultItem = { type: 'input', filename: `${filename}` } + const filenameStr = filename != null ? String(filename) : undefined + const resultItem = filenameStr ? { type: 'input', filename: filenameStr } : undefined return { iconClass: 'icon-[lucide--image]', - imageUrl: filename + imageUrl: resultItem ? api.apiURL( `/view?${new URLSearchParams(resultItem)}${app.getPreviewFormatParam()}` ) : undefined, label: t('linearMode.dragAndDropImage'), onClick: () => node.widgets?.[1]?.callback?.(undefined) } }

🤖 Prompt for AI Agents

In `@src/renderer/extensions/linearMode/LinearControls.vue` around lines 54 - 70, In getDropIndicator, guard against filename being undefined/null before building resultItem and the imageUrl: ensure you only construct resultItem (or include the filename query) and call api.apiURL when filename is a non-empty string (e.g., check filename with a strict truthy test), and use encodeURIComponent(filename) when composing the query; update references in getDropIndicator so node.widgets?.[0]?.value is validated and imageUrl is undefined when filename is absent to avoid creating URLs containing "undefined"/"null".

coderabbitai · 2026-01-15T19:22:46Z

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

+  async function openModal(this: IBaseWidget) {
+    if (!isAssetWidget(widget)) {
+      throw new Error(`Expected asset widget but received ${widget.type}`)
+    }
+    await assetBrowserDialog.show({
+      nodeType: node.comfyClass || '',
+      inputName: inputSpec.name,
+      currentValue: widget.value,
+      onAssetSelected: (asset) => {
+        const validatedAsset = assetItemSchema.safeParse(asset)
+
+        if (!validatedAsset.success) {
+          console.error(
+            'Invalid asset item:',
+            validatedAsset.error.errors,
+            'Received:',
+            asset
+          )
+          return
+        }
+
+        const filename = validatedAsset.data.user_metadata?.filename
+        const validatedFilename = assetFilenameSchema.safeParse(filename)
+
+        if (!validatedFilename.success) {
+          console.error(
+            'Invalid asset filename:',
+            validatedFilename.error.errors,
+            'for asset:',
+            validatedAsset.data.id
+          )
+          return
+        }
+
+        const oldValue = widget.value
+        this.value = validatedFilename.data
+        node.onWidgetChanged?.(
+          widget.name,
+          validatedFilename.data,
+          oldValue,
+          widget
+        )
+      }
+    })
+  }


⚠️ Potential issue | 🟡 Minor

Inconsistent use of this vs widget reference.

The function mixes this (line 132) with the closure-captured widget variable (lines 98, 104, 131, 133-138). While both reference the same object at runtime, this inconsistency is confusing and error-prone:

Line 131: const oldValue = widget.value

Line 132: this.value = validatedFilename.data ← uses this

Line 134: widget.name

Choose one approach consistently. Since widget is already captured via closure and used throughout, prefer using widget everywhere:

Suggested fix

- const oldValue = widget.value - this.value = validatedFilename.data + const oldValue = widget.value + widget.value = validatedFilename.data

📝 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

async function openModal(this: IBaseWidget) {

if (!isAssetWidget(widget)) {

throw new Error(`Expected asset widget but received ${widget.type}`)

}

await assetBrowserDialog.show({

nodeType: node.comfyClass || '',

inputName: inputSpec.name,

currentValue: widget.value,

onAssetSelected: (asset) => {

const validatedAsset = assetItemSchema.safeParse(asset)

if (!validatedAsset.success) {

console.error(

'Invalid asset item:',

validatedAsset.error.errors,

'Received:',

asset

)

return

}

const filename = validatedAsset.data.user_metadata?.filename

const validatedFilename = assetFilenameSchema.safeParse(filename)

if (!validatedFilename.success) {

console.error(

'Invalid asset filename:',

validatedFilename.error.errors,

'for asset:',

validatedAsset.data.id

)

return

}

const oldValue = widget.value

this.value = validatedFilename.data

node.onWidgetChanged?.(

widget.name,

validatedFilename.data,

oldValue,

widget

)

}

})

}

async function openModal(this: IBaseWidget) {

if (!isAssetWidget(widget)) {

throw new Error(`Expected asset widget but received ${widget.type}`)

}

await assetBrowserDialog.show({

nodeType: node.comfyClass || '',

inputName: inputSpec.name,

currentValue: widget.value,

onAssetSelected: (asset) => {

const validatedAsset = assetItemSchema.safeParse(asset)

if (!validatedAsset.success) {

console.error(

'Invalid asset item:',

validatedAsset.error.errors,

'Received:',

asset

)

return

}

const filename = validatedAsset.data.user_metadata?.filename

const validatedFilename = assetFilenameSchema.safeParse(filename)

if (!validatedFilename.success) {

console.error(

'Invalid asset filename:',

validatedFilename.error.errors,

'for asset:',

validatedAsset.data.id

)

return

}

const oldValue = widget.value

widget.value = validatedFilename.data

node.onWidgetChanged?.(

widget.name,

validatedFilename.data,

oldValue,

widget

)

}

})

}

🤖 Prompt for AI Agents

In `@src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts` around lines 97 - 141, In openModal's onAssetSelected callback the code mixes this and the closure-captured widget (e.g., const oldValue = widget.value, then this.value = ... and later widget.name); change the assignment to use widget consistently (replace this.value = validatedFilename.data with widget.value = validatedFilename.data) and ensure any other references inside onAssetSelected use widget (not this) so node.onWidgetChanged is called with the closure widget, preserving oldValue and the same object throughout.

DrJKL · 2026-01-15T20:46:41Z

src/renderer/extensions/linearMode/LinearControls.vue

+  if (node.type !== 'LoadImage') return undefined
+
+  const filename = node.widgets?.[0]?.value
+  const resultItem = { type: 'input', filename: `${filename}` }


The filename in here might show as undefined, right?

Yes, but the object isn't actually used unless filename is true.

Unsure on ick, but inlining resultItem felt excessive.

DrJKL · 2026-01-15T20:52:53Z

src/renderer/extensions/linearMode/LinearControls.vue

+function getDropIndicator(node: LGraphNode) {
+  if (node.type !== 'LoadImage') return undefined
+
+  const filename = node.widgets?.[0]?.value


Nit: I don't love that we have magic number order dependence for the widgets.

Likewise. The localization and functionality is pretty tightly tied to Load Image.

I considered fleshing this out more and letting the node define these properties, but opted to side with YAGNI.

DrJKL · 2026-01-15T20:55:02Z

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

  const displayLabel = currentValue ?? t('widgets.selectModel')
  const assetBrowserDialog = useAssetBrowserDialog()

+  async function openModal(this: IBaseWidget) {


Nit: This feels like it should be in a different module.
I know it's just being moved here, maybe we can clean it up later

Agreed. I specifically do not like that files in @/renderer/extensions/vueNodes are used and required for litegraph mode.

christian-byrne · 2026-01-15T21:02:46Z

src/components/sidebar/SideToolbar.vue

+  'linearToggleEnabled',
+  false
+)
+const hasSeenLinear = ref(false)


It seems like something that makes more sense in a higher-scoped part of the app? Do we want this value being reset whenever the component unmounts?

We would not.

Not likely to be an issue since this code will probably be short lived and there's not currently a circumstance where the side toolbar unmounts, but iI'll still look into it.

┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8074-Further-linear-fixes-2e96d73d365081efb74bf150982c7a66) by [Unito](https://www.unito.io)

#8074 included some refactoring to the asset dialogue to ensure that it wouldn't pop up multiple times in vue mode But moving the openModal function to be contained in options means that `this` is no longer the widget, but instead the options object. This is fixed by requiring that widget be explicitly passed as a parameter. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8117-Fix-asset-selection-in-litegraph-2eb6d73d36508176b5a3f6d21964be39) by [Unito](https://www.unito.io)

AustinMroz added 2 commits January 14, 2026 21:05

Preview input images in linear mode

d09b824

Fix model selection opening model dialog in vue

b96ec05

AustinMroz added 6 commits January 15, 2026 08:00

Fix asset widget tests

f98454a

Fix panel sizing issues

c85a457

Fix note sizing

7e0447f

Track runs originating from mobile

5abaaa1

Make linear toggle display reactive to featureflag

6b26f45

Fix video sizing on mobile

9b44a4f

AustinMroz marked this pull request as ready for review January 15, 2026 19:19

AustinMroz requested a review from a team as a code owner January 15, 2026 19:19

dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jan 15, 2026

coderabbitai bot requested review from KarryCharon, PabloWiedemann, Yorha4D and shinshin86 January 15, 2026 19:20

coderabbitai bot reviewed Jan 15, 2026

View reviewed changes

DrJKL reviewed Jan 15, 2026

View reviewed changes

christian-byrne reviewed Jan 15, 2026

View reviewed changes

DrJKL previously approved these changes Jan 15, 2026

View reviewed changes

add once and immediate

99b666f

AustinMroz dismissed DrJKL’s stale review via 99b666f January 15, 2026 21:23

Move hasSeenLinear to store

61d3a05

AustinMroz assigned DrJKL Jan 15, 2026

AustinMroz added the backport Backporting a PR onto a release candidate label Jan 15, 2026

AustinMroz added the cloud/1.37 Backport PRs for cloud 1.37 label Jan 15, 2026

AustinMroz merged commit 0d5ca96 into main Jan 15, 2026
37 checks passed

AustinMroz deleted the austin/further-linear-fixes branch January 15, 2026 22:45

AustinMroz added a commit that referenced this pull request Jan 15, 2026

Further linear fixes (#8074)

df5dabe

┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8074-Further-linear-fixes-2e96d73d365081efb74bf150982c7a66) by [Unito](https://www.unito.io)

This was referenced Jan 16, 2026

[backport cloud/1.37] Make sure toggle visibility checks remote config #8087

Closed

Improve linear compatibility with Safari, run button metadata #8107

Merged

AustinMroz mentioned this pull request Jan 17, 2026

Fix asset selection in litegraph #8117

Merged

This was referenced Jan 17, 2026

[DO NOT MERGE] Cloud/1.37 - cloud release branch #8063

Closed

Linear: progressbar, tooltips, and output fixes #8250

Merged

coderabbitai bot mentioned this pull request Jan 30, 2026

feat(cloud): add asset widget support for PrimitiveNode model selection #8454

Closed

7 tasks

Conversation

AustinMroz commented Jan 15, 2026 • edited by sync-by-unito bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested reviewers

Uh oh!

github-actions bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Tests: ⚠️ Passed with flaky tests

❌ Failed Tests

Uh oh!

github-actions bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

🔗 Links

Uh oh!

github-actions bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AustinMroz commented Jan 15, 2026 •

edited by sync-by-unito bot

Loading

coderabbitai bot commented Jan 15, 2026 •

edited

Loading

github-actions bot commented Jan 15, 2026 •

edited

Loading

github-actions bot commented Jan 15, 2026 •

edited

Loading

github-actions bot commented Jan 15, 2026 •

edited

Loading

coderabbitai bot Jan 15, 2026 •

edited

Loading