[QPOv2] Add stories for list view and general job card

[benceruleanlu]

Add stories for the media assets sidebar tab for easier prototyping.

Includes mocks for storybook.

Because some functions in the mocks are only used in the storybook main.ts resolve, knip flags them as unused because it doesn't check that path. So knipIgnoreUnusedButUsedByStorybook was added.

Part of the QPO v2 iteration, figma design can be found here. This will be implemented in a series of stacked PRs that can be reviewed and merged individually.

main <-- #7737, #7743, #7745

┆Issue is synchronized with this Notion page by Unito

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds Storybook testing infrastructure by creating mock implementations for useJobList and useJobActions composables, introducing a new story for AssetsSidebarListView, and updating Storybook configuration to resolve mocked modules. Exports the JobAction type for external use in mock implementations.

Changes

Cohort / File(s)	Summary
Storybook Configuration .storybook/main.ts, knip.config.ts	Updated Vite alias config to use array-based alias entries for mocking support; added storybook mocks path pattern to knip workspace configuration
Storybook Mock Modules src/storybook/mocks/useJobActions.ts, src/storybook/mocks/useJobList.ts	New mock implementations of composables with reactive state management; useJobActions provides getJobActions and runJobAction functions; useJobList exposes job state, grouping, filtering, and sorting utilities for story testing
Storybook Stories src/components/sidebar/tabs/AssetsSidebarListView.stories.ts	New story file for AssetsSidebarListView component with sample data setup, decorator configuration, and RunningAndGenerated story variant that wires mocks for rendering
Type Exports src/composables/queue/useJobActions.ts	Elevated JobAction type from internal to exported for use in mock modules and external implementations

✨ 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 a77d803 and f6cbf02.

📒 Files selected for processing (4)

• .storybook/main.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
• src/composables/queue/useJobActions.ts

🧰 Additional context used

📓 Path-based instructions (11)

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/composables/queue/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/composables/queue/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/composables/queue/useJobActions.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/composables/queue/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/composables/queue/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

• src/composables/queue/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/composables/queue/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

src/composables/**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Name composables as useXyz.ts (e.g., useForm.ts)

Files:

• src/composables/queue/useJobActions.ts

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/composables/queue/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/composables/queue/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

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/tabs/AssetsSidebarListView.stories.ts

🧠 Learnings (22)

📓 Common learnings

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.

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:22.621Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: When testing components, import the real type definitions from the component files instead of duplicating interface definitions in the test files. This prevents type drift and maintains consistency.

📚 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/composables/queue/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/composables/queue/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/composables/queue/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/composables/queue/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

📚 Learning: 2025-12-11T12:25:15.470Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.

Applied to files:

• src/composables/queue/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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:

• .storybook/main.ts
• knip.config.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:

• knip.config.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,tsx,vue} : Use separate `import type` statements instead of inline `type` in mixed imports

Applied to files:

• knip.config.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:

• knip.config.ts

📚 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/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebase

Applied to files:

• knip.config.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,tsx} : Minimize nesting (if statements, for loops, etc.)

Applied to files:

• knip.config.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/**/*.{js,jsx} : Use TypeScript exclusively - no new JavaScript files

Applied to files:

• knip.config.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 : Minimize the surface area (exported values) of each module and composable

Applied to files:

• knip.config.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:

• knip.config.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 : Unit and component tests belong in `tests-ui/` or `src/**/*.test.ts` using Vitest

Applied to files:

• knip.config.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible

Applied to files:

• knip.config.ts

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Check assets/ directory for test data when writing tests

Applied to files:

• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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 : Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files

Applied to files:

• knip.config.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `vitest` for unit testing in this project

Applied to files:

• knip.config.ts

📚 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/**/*.{ts,tsx,vue} : Use es-toolkit for utility functions instead of other utility libraries

Applied to files:

• knip.config.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 : Use es-toolkit for utility functions

Applied to files:

• knip.config.ts

🧬 Code graph analysis (1)

src/components/sidebar/tabs/AssetsSidebarListView.stories.ts (6)

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

• AssetItem (86-86)

src/composables/queue/useJobActions.ts (1)

• JobAction (10-14)

src/components/input/SingleSelect.stories.ts (1)

• Story (40-40)

src/utils/queueDisplay.ts (1)

• iconForJobState (27-42)

src/storybook/mocks/useJobList.ts (1)

• setMockJobItems (42-44)

src/storybook/mocks/useJobActions.ts (1)

• setMockJobActions (16-18)

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

• GitHub Check: playwright-tests-chromium-sharded (7, 8)
• GitHub Check: playwright-tests-chromium-sharded (8, 8)
• GitHub Check: playwright-tests-chromium-sharded (1, 8)
• GitHub Check: playwright-tests-chromium-sharded (2, 8)
• GitHub Check: playwright-tests-chromium-sharded (5, 8)
• GitHub Check: playwright-tests-chromium-sharded (3, 8)
• GitHub Check: playwright-tests-chromium-sharded (4, 8)
• GitHub Check: playwright-tests (chromium-0.5x)
• GitHub Check: playwright-tests-chromium-sharded (6, 8)
• GitHub Check: playwright-tests (mobile-chrome)
• GitHub Check: playwright-tests (chromium-2x)
• GitHub Check: lint-and-format
• GitHub Check: test
• GitHub Check: collect

🔇 Additional comments (5)

knip.config.ts (1)

11-12: LGTM! Proper Knip configuration for Storybook mocks.

The entry pattern correctly includes Storybook mock files, preventing Knip from incorrectly flagging mock functions as unused when they're resolved via Storybook's module aliasing.

src/composables/queue/useJobActions.ts (1)

10-10: LGTM! Type export enables Storybook mock typing.

Exporting the JobAction type allows the Storybook mock implementation to maintain type safety while providing mock data for stories.

.storybook/main.ts (1)

72-97: LGTM! Proper module aliasing for Storybook mocks.

The array-based alias configuration correctly:

• Prioritizes specific mock replacements for useJobList and useJobActions
• Redirects shared utilities to the correct package paths
• Maintains the catch-all @ alias with appropriate precedence

The ordering ensures specific patterns match before the generic @ alias, preventing resolution conflicts.

src/components/sidebar/tabs/AssetsSidebarListView.stories.ts (2)

1-17: LGTM! Proper imports and type definitions.

The imports correctly use separate import type statements as required by lint rules, and the StoryArgs interface appropriately types the story arguments with optional fields for flexible story configuration.

---

19-154: LGTM! Well-structured Storybook story.

The story implementation follows best practices:

• Uses function declarations per coding guidelines
• Properly sets up mocks before rendering with setMockJobItems and setMockJobActions
• Provides realistic mock data with varied asset types and job states
• Creates an efficient isSelected predicate using a Set for O(1) lookups
• Uses valid Tailwind v4 syntax for styling

The hardcoded strings in mock data (job titles, action labels) are appropriate for Storybook stories—production code correctly uses i18n for user-facing strings.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎭 Playwright Test Results

✅ All tests passed!

⏰ Completed at: 01/10/2026, 08:54:21 PM UTC

📈 Summary

• Total Tests: 514
• Passed: 506 ✅
• Failed: 0
• Flaky: 0
• Skipped: 8 ⏭️

📊 Test Reports by Browser

• ✅ chromium: View Report • ✅ 494 / ❌ 0 / ⚠️ 0 / ⏭️ 8
• ✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
• ✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
• ✅ mobile-chrome: View Report • ✅ 9 / ❌ 0 / ⚠️ 0 / ⏭️ 0

---

🎉 Click on the links above to view detailed test results for each browser configuration.

[github-actions]

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 01/10/2026, 08:49:18 PM UTC

🔗 Links

• 📊 View Workflow Run
• 🎨 View Storybook

---

🎉 Your Storybook is ready for review!

[Copilot]

Pull request overview

This PR adds Storybook stories for the media assets sidebar tab to support prototyping for QPOv2. The changes include mock implementations of composables used by the stories and configuration updates to enable the mocks in Storybook.

• Adds mock implementations for useJobList and useJobActions composables
• Creates comprehensive stories for AssetsListCard component covering different job states and asset types
• Creates stories for AssetsSidebarListView component demonstrating running jobs and generated assets
• Updates Storybook and knip configuration to support the mocks

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/storybook/mocks/useJobList.ts	Mock implementation of useJobList composable for storybook stories
src/storybook/mocks/useJobActions.ts	Mock implementation of useJobActions composable for storybook stories
src/platform/assets/components/AssetsListCard.stories.ts	Comprehensive stories for AssetsListCard component covering job states and asset types
src/components/sidebar/tabs/AssetsSidebarListView.stories.ts	Stories for AssetsSidebarListView component with mock data
knip.config.ts	Adds knip ignore tag for storybook-specific exports
.storybook/main.ts	Updates alias configuration to use mocks for storybook environment

[DrJKL]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8fb9eb8 and a77d803.

📒 Files selected for processing (6)

• .storybook/main.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• src/storybook/mocks/useJobList.ts

🧰 Additional context used

📓 Path-based instructions (11)

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/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

src/**/*.ts

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

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

Files:

• src/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

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

Files:

• src/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

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

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

• src/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

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

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Use TypeScript exclusively; do not write new JavaScript code
Use sorted and grouped imports organized by plugin/source
Enforce ESLint rules including Vue + TypeScript rules, disallow floating promises, disallow unused imports, and restrict i18n raw text in templates
Do not use any type or as any type assertions; fix the underlying type issue instead
Write code that is expressive and self-documenting; avoid redundant comments and clean as you go
Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Use function declarations instead of function expressions when possible
Use es-toolkit for utility functions
Implement proper error handling in code

Files:

• src/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

**/**/use[A-Z]*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Name composables using the pattern useXyz.ts

Files:

• src/storybook/mocks/useJobList.ts
• src/storybook/mocks/useJobActions.ts

**/*.{ts,tsx,vue,js,jsx,json,css}

📄 CodeRabbit inference engine (AGENTS.md)

Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, and 80-character line width

Files:

• src/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

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

Files:

• src/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/platform/assets/components/AssetsListCard.stories.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/platform/assets/components/AssetsListCard.stories.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

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/tabs/AssetsSidebarListView.stories.ts

🧠 Learnings (14)

📓 Common learnings

Learnt from: Myestery
Repo: Comfy-Org/ComfyUI_frontend PR: 7422
File: .github/workflows/pr-update-playwright-expectations.yaml:131-135
Timestamp: 2025-12-12T23:02:37.473Z
Learning: In the `.github/workflows/pr-update-playwright-expectations.yaml` workflow in the Comfy-Org/ComfyUI_frontend repository, the snapshot update process is intentionally scoped to only add and update snapshot images. Deletions of snapshot files are handled explicitly outside this workflow and should not be suggested as part of this automation.

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests

Applied to files:

• src/storybook/mocks/useJobList.ts
• src/storybook/mocks/useJobActions.ts
• .storybook/main.ts

📚 Learning: 2025-11-24T19:48:09.318Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible

Applied to files:

• src/storybook/mocks/useJobList.ts

📚 Learning: 2025-12-21T06:04:12.562Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.test.ts : For mocking in tests, leverage Vitest utilities; keep module mocks contained and avoid global mutable state within test files

Applied to files:

• src/storybook/mocks/useJobList.ts
• src/storybook/mocks/useJobActions.ts
• .storybook/main.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/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.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/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

📚 Learning: 2025-12-11T12:25:15.470Z

Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.

Applied to files:

• src/storybook/mocks/useJobList.ts
• src/platform/assets/components/AssetsListCard.stories.ts
• src/storybook/mocks/useJobActions.ts
• knip.config.ts
• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

📚 Learning: 2025-12-16T17:30:29.719Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7559
File: .storybook/preview.ts:61-61
Timestamp: 2025-12-16T17:30:29.719Z
Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.

Applied to files:

• src/platform/assets/components/AssetsListCard.stories.ts

📚 Learning: 2025-12-21T06:04:12.562Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to browser_tests/**/*.spec.ts : Use tags like `mobile` and `2x` in Playwright tests for relevant test variations; tags are respected by config

Applied to files:

• knip.config.ts

📚 Learning: 2025-12-16T17:41:58.464Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-16T17:41:58.464Z
Learning: Prerequisites for repository setup: Node.js >= 24, Git repository, available ports for dev server and storybook

Applied to files:

• knip.config.ts

📚 Learning: 2025-11-24T19:48:03.270Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks

Applied to files:

• .storybook/main.ts

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

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Check assets/ directory for test data when writing tests

Applied to files:

• src/components/sidebar/tabs/AssetsSidebarListView.stories.ts

🧬 Code graph analysis (4)

src/storybook/mocks/useJobList.ts (2)

src/composables/queue/useJobList.ts (3)

• JobGroup (49-53)
• JobTab (25-25)
• JobSortMode (28-28)

src/stores/queueStore.ts (1)

• TaskItemImpl (216-475)

src/platform/assets/components/AssetsListCard.stories.ts (2)

src/components/input/SingleSelect.stories.ts (1)

• Story (40-40)

src/utils/queueDisplay.ts (1)

• iconForJobState (27-42)

src/storybook/mocks/useJobActions.ts (1)

src/composables/queue/useJobActions.ts (1)

• JobAction (11-16)

src/components/sidebar/tabs/AssetsSidebarListView.stories.ts (5)

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

• AssetItem (74-74)

src/composables/queue/useJobActions.ts (1)

• JobAction (11-16)

src/utils/queueDisplay.ts (1)

• iconForJobState (27-42)

src/storybook/mocks/useJobList.ts (1)

• setMockJobItems (42-44)

src/storybook/mocks/useJobActions.ts (1)

• setMockJobActions (8-10)

🔇 Additional comments (11)

knip.config.ts (1)

67-71: LGTM!

The new -knipIgnoreUnusedButUsedByStorybook tag follows the established naming convention and correctly uses the minus prefix for exclusion. This will properly suppress knip warnings for Storybook-only mock exports.

.storybook/main.ts (1)

72-97: LGTM!

The alias array is correctly ordered with more specific paths before the generic @ alias, ensuring proper module resolution. The mock aliases will intercept imports to useJobList and useJobActions composables in Storybook, redirecting them to mock implementations.

src/components/sidebar/tabs/AssetsSidebarListView.stories.ts (3)

1-39: LGTM!

Imports are properly organized with type imports separated from value imports. The StoryArgs type provides good type safety for story arguments, and the meta configuration follows Storybook conventions. Function declarations are used appropriately per repository guidelines.

---

43-121: LGTM!

Sample data is comprehensive, covering multiple job states (pending, initialization, running) and asset types (image, video, audio, 3D). Using iconForJobState utility ensures consistency with the actual application. The cancelAction definition follows the JobAction type structure correctly.

---

136-155: Consider cleaning up mock state between stories.

The mock state is set in setup() but never reset. If multiple stories run sequentially or a user navigates between stories, stale mock data could persist. Consider adding cleanup in a beforeEach or using Storybook's play function lifecycle, or document that stories should set all required mock state explicitly.

Since setMockJobItems and setMockJobActions replace the entire state (not append), this may be acceptable if every story explicitly sets its required mocks. The current implementation does this correctly.

⛔ Skipped due to learnings

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible

src/storybook/mocks/useJobList.ts (2)

3-9: Relative imports are intentionally used here.

Using ../../composables/... and ../../stores/... instead of @/ aliases is correct. The @/composables/queue/useJobList alias in Storybook points to this mock file, so using the alias here would create a circular reference.

---

46-59: Mock API already matches the real useJobList composable perfectly.

The mock returns all properties that the real composable exports: selectedJobTab, selectedWorkflowFilter, selectedSortMode, hasFailedJobs, allTasksSorted, filteredTasks, jobItems, groupedJobItems, and currentNodeName. No discrepancies exist between the two implementations.

Likely an incorrect or invalid review comment.

src/storybook/mocks/useJobActions.ts (1)

1-10: LGTM!

Clean implementation with proper type imports and relative paths to avoid alias circular references. The setMockJobActions function provides a straightforward way to inject mock actions per job ID.

src/platform/assets/components/AssetsListCard.stories.ts (3)

4-16: LGTM!

Good refactoring to use iconForJobState utility for consistent icon names across stories. The centeredDecorator function follows the repository's preference for function declarations over function expressions.

---

33-113: Comprehensive story coverage.

Excellent coverage of different component states:

• Job states: pending, initialization, running, failed
• Generated asset types: image, video, audio, 3D

Each story clearly demonstrates a specific use case with appropriate props. Using constants for preview URLs (IMAGE_PREVIEW, VIDEO_PREVIEW) improves maintainability.

---

115-133: LGTM!

The renderRunningJobWithActions helper demonstrates the #actions slot usage with a cancel button. Using a dedicated render function keeps the story definition clean while showing the slot API.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find the real useJobActions composable and extract its return statement
find . -path "*/composables/queue/useJobActions.ts" -o -path "*/composables/*useJobActions.ts" | head -5

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 110

---

🏁 Script executed:

#!/bin/bash
# Extract the return statement and function signatures from real useJobActions
cat -n src/composables/queue/useJobActions.ts | grep -A 100 "export function useJobActions"

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 1377

---

🏁 Script executed:

#!/bin/bash
# Read the complete mock file to understand full context
cat -n src/storybook/mocks/useJobActions.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 877

---

Fix runJobAction signature to match the real composable interface.

The mock's runJobAction does not match the real composable. The real function accepts (action: JobAction, job: JobListItem) parameters and performs actual job cancellation logic, but the mock accepts no parameters and returns undefined. Additionally, getJobActions uses a different lookup strategy (job.id) instead of the real implementation's logic based on job.state and job.showClear. The mock should either properly emulate the real behavior or document that it's a simplified stub unsuitable for integration testing.

[christian-byrne]

nit: https://knip.dev/reference/plugins/storybook

The knip mocks should be accessed via the entry point for storybook, should we explore why that is not happening automatically?

[benceruleanlu]

I just moved stsorybook/mocks/** to knip entry

[github-actions]

Bundle Size Report

Summary

• Raw size: 18.8 MB baseline 18.8 MB — ⚪ 0 B
• Gzip: 3.85 MB baseline 3.85 MB — 🟢 -42 B
• Brotli: 2.93 MB baseline 2.93 MB — 🔴 +174 B
• Bundles: 94 current • 94 baseline • 38 added / 38 removed

Category Glance
Vendor & Third-Party ⚪ 0 B (9.19 MB) · Other ⚪ 0 B (4.73 MB) · App Entry Points ⚪ 0 B (3.31 MB) · Graph Workspace ⚪ 0 B (1.03 MB) · Panels & Settings ⚪ 0 B (337 kB) · UI Components ⚪ 0 B (199 kB) · + 3 more

Per-category breakdown

App Entry Points — 3.31 MB (baseline 3.31 MB) • ⚪ 0 B

Main entry bundles and manifests

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/index-DStzPM54.js (removed)	3.11 MB	—	🟢 -3.11 MB	🟢 -652 kB	🟢 -495 kB
assets/index-DvdU8l_R.js (new)	—	3.11 MB	🔴 +3.11 MB	🔴 +652 kB	🔴 +495 kB
assets/index-DRIx3toQ.js (new)	—	195 kB	🔴 +195 kB	🔴 +42.7 kB	🔴 +35.3 kB
assets/index-t8kabU8G.js (removed)	195 kB	—	🟢 -195 kB	🟢 -42.7 kB	🟢 -35.3 kB
assets/index-OpMIj5gb.js (removed)	345 B	—	🟢 -345 B	🟢 -245 B	🟢 -234 B
assets/index-RlVSwz8g.js (new)	—	345 B	🔴 +345 B	🔴 +244 B	🔴 +228 B

Status: 3 added / 3 removed

Graph Workspace — 1.03 MB (baseline 1.03 MB) • ⚪ 0 B

Graph editor runtime, canvas, workflow orchestration

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/GraphView-C2vaELst.js (new)	—	1.03 MB	🔴 +1.03 MB	🔴 +199 kB	🔴 +150 kB
assets/GraphView-DcLCk4tq.js (removed)	1.03 MB	—	🟢 -1.03 MB	🟢 -199 kB	🟢 -150 kB

Status: 1 added / 1 removed

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

Top-level views, pages, and routed surfaces

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/UserSelectView-7zdQPP1h.js (removed)	6.63 kB	—	🟢 -6.63 kB	🟢 -2.15 kB	🟢 -1.9 kB
assets/UserSelectView-pmKsNsXG.js (new)	—	6.63 kB	🔴 +6.63 kB	🔴 +2.15 kB	🔴 +1.9 kB

Status: 1 added / 1 removed

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

Configuration panels, inspectors, and settings screens

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/LegacyCreditsPanel-B0LzgSSN.js (new)	—	25.1 kB	🔴 +25.1 kB	🔴 +5.74 kB	🔴 +5 kB
assets/LegacyCreditsPanel-CXsGLwAM.js (removed)	25.1 kB	—	🟢 -25.1 kB	🟢 -5.74 kB	🟢 -5 kB
assets/KeybindingPanel-CdQBoMve.js (new)	—	14.8 kB	🔴 +14.8 kB	🔴 +3.57 kB	🔴 +3.12 kB
assets/KeybindingPanel-Dsm7uLH1.js (removed)	14.8 kB	—	🟢 -14.8 kB	🟢 -3.57 kB	🟢 -3.12 kB
assets/ExtensionPanel-HM6K46o2.js (new)	—	11.1 kB	🔴 +11.1 kB	🔴 +2.62 kB	🔴 +2.3 kB
assets/ExtensionPanel-RCyezyCX.js (removed)	11.1 kB	—	🟢 -11.1 kB	🟢 -2.62 kB	🟢 -2.3 kB
assets/AboutPanel-csWcUAYw.js (new)	—	9.16 kB	🔴 +9.16 kB	🔴 +2.46 kB	🔴 +2.21 kB
assets/AboutPanel-CYf8QhD6.js (removed)	9.16 kB	—	🟢 -9.16 kB	🟢 -2.46 kB	🟢 -2.22 kB
assets/ServerConfigPanel-BI7zdxHJ.js (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -2.04 kB	🟢 -1.81 kB
assets/ServerConfigPanel-CIvm70gz.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +2.04 kB	🔴 +1.81 kB
assets/UserPanel-C4vaD75f.js (removed)	6.88 kB	—	🟢 -6.88 kB	🟢 -1.79 kB	🟢 -1.56 kB
assets/UserPanel-CtGIbWZQ.js (new)	—	6.88 kB	🔴 +6.88 kB	🔴 +1.79 kB	🔴 +1.57 kB
assets/settings-BbW1wrcp.js	25.2 kB	25.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-CtIClcWI.js	26 kB	26 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-D_f3uAqO.js	22.4 kB	22.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DiVjuKQX.js	34.4 kB	34.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DJiF1Y59.js	25.8 kB	25.8 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DKkx6nFR.js	28.2 kB	28.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DX5qVgIQ.js	24.9 kB	24.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-MzsBgiwB.js	21.7 kB	21.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-pR7Ue3ei.js	26.7 kB	26.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-y_-zNlA6.js	27.5 kB	27.5 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 6 added / 6 removed

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

Reusable component library chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/LazyImage.vue_vue_type_script_setup_true_lang-BLOLLcQh.js (new)	—	64.5 kB	🔴 +64.5 kB	🔴 +13.1 kB	🔴 +11.4 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-CFYldF1z.js (removed)	64.5 kB	—	🟢 -64.5 kB	🟢 -13.1 kB	🟢 -11.4 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-BqD4Asus.js (removed)	56.4 kB	—	🟢 -56.4 kB	🟢 -8.78 kB	🟢 -7.53 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-u5jitUsW.js (new)	—	56.4 kB	🔴 +56.4 kB	🔴 +8.78 kB	🔴 +7.54 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-BZapduNg.js (removed)	49 kB	—	🟢 -49 kB	🟢 -10.5 kB	🟢 -9.15 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-C5lJrZ_N.js (new)	—	49 kB	🔴 +49 kB	🔴 +10.5 kB	🔴 +9.15 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-ClAhNy9z.js (new)	—	10.9 kB	🔴 +10.9 kB	🔴 +2.89 kB	🔴 +2.55 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-CVnofgg3.js (removed)	10.9 kB	—	🟢 -10.9 kB	🟢 -2.9 kB	🟢 -2.56 kB
assets/ComfyQueueButton-CW5K65Gc.js (new)	—	8.83 kB	🔴 +8.83 kB	🔴 +2.58 kB	🔴 +2.29 kB
assets/ComfyQueueButton-D7gzzZFY.js (removed)	8.83 kB	—	🟢 -8.83 kB	🟢 -2.58 kB	🟢 -2.29 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-DlcXyMML.js (new)	—	3.72 kB	🔴 +3.72 kB	🔴 +1.45 kB	🔴 +1.32 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-DPROtCaA.js (removed)	3.72 kB	—	🟢 -3.72 kB	🟢 -1.45 kB	🟢 -1.32 kB
assets/WidgetButton-D8S02B1L.js (new)	—	2.21 kB	🔴 +2.21 kB	🔴 +997 B	🔴 +876 B
assets/WidgetButton-YMNp8rMi.js (removed)	2.21 kB	—	🟢 -2.21 kB	🟢 -998 B	🟢 -898 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-BFQ3UyJU.js (removed)	2.14 kB	—	🟢 -2.14 kB	🟢 -892 B	🟢 -772 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-CceBw86i.js (new)	—	2.14 kB	🔴 +2.14 kB	🔴 +889 B	🔴 +769 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-CmvGBeCh.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-C4655Mb-.js (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -1.83 kB	🟢 -1.58 kB
assets/keybindingService-CByk4cxo.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +1.83 kB	🔴 +1.58 kB
assets/audioService-CSPMyST5.js (removed)	2.2 kB	—	🟢 -2.2 kB	🟢 -963 B	🟢 -828 B
assets/audioService-Cwi8Lh2k.js (new)	—	2.2 kB	🔴 +2.2 kB	🔴 +962 B	🔴 +827 B
assets/serverConfigStore-lZrt20fn.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-D5eFM989.js (removed)	1.41 kB	—	🟢 -1.41 kB	🟢 -652 B	🟢 -551 B
assets/audioUtils-DzmtO1F2.js (new)	—	1.41 kB	🔴 +1.41 kB	🔴 +649 B	🔴 +552 B

Status: 1 added / 1 removed

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

External libraries and shared vendor chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/vendor-chart-C2WamoVK.js	452 kB	452 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-other-Da7BzmIq.js	3.9 MB	3.9 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-primevue-CIEAfgED.js	1.95 MB	1.95 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-three-Ds3gPtNh.js	2.08 MB	2.08 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-tiptap-WJL3cqV8.js	232 kB	232 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-vue-E9hBZNUh.js	160 kB	160 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-xterm-BF8peZ5_.js	420 kB	420 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

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

Bundles that do not match a named category

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/SubscriptionRequiredDialogContent-B2AiyzPu.js (new)	—	29.3 kB	🔴 +29.3 kB	🔴 +6.5 kB	🔴 +5.66 kB
assets/SubscriptionRequiredDialogContent-C2elZNrG.js (removed)	29.3 kB	—	🟢 -29.3 kB	🟢 -6.51 kB	🟢 -5.64 kB
assets/WidgetRecordAudio-_PH3bWzk.js (removed)	20.4 kB	—	🟢 -20.4 kB	🟢 -5.24 kB	🟢 -4.64 kB
assets/WidgetRecordAudio-CF2DUbDq.js (new)	—	20.4 kB	🔴 +20.4 kB	🔴 +5.23 kB	🔴 +4.63 kB
assets/AudioPreviewPlayer-98Lh6g5l.js (new)	—	13.3 kB	🔴 +13.3 kB	🔴 +3.35 kB	🔴 +3 kB
assets/AudioPreviewPlayer-DmpgfS_Q.js (removed)	13.3 kB	—	🟢 -13.3 kB	🟢 -3.35 kB	🟢 -3 kB
assets/ValueControlPopover-DMAWMVY4.js (removed)	5.49 kB	—	🟢 -5.49 kB	🟢 -1.71 kB	🟢 -1.52 kB
assets/ValueControlPopover-pn8nF7JU.js (new)	—	5.49 kB	🔴 +5.49 kB	🔴 +1.71 kB	🔴 +1.52 kB
assets/WidgetGalleria-BBCnScMY.js (removed)	4.1 kB	—	🟢 -4.1 kB	🟢 -1.45 kB	🟢 -1.3 kB
assets/WidgetGalleria-BlmobUvg.js (new)	—	4.1 kB	🔴 +4.1 kB	🔴 +1.45 kB	🔴 +1.3 kB
assets/WidgetColorPicker-DdPNMQMY.js (new)	—	3.41 kB	🔴 +3.41 kB	🔴 +1.38 kB	🔴 +1.24 kB
assets/WidgetColorPicker-DYx6nstb.js (removed)	3.41 kB	—	🟢 -3.41 kB	🟢 -1.38 kB	🟢 -1.24 kB
assets/WidgetTextarea-Bv7P6_F2.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.22 kB	🔴 +1.07 kB
assets/WidgetTextarea-CR4UEbCb.js (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.21 kB	🟢 -1.07 kB
assets/WidgetMarkdown-DG3izQ3P.js (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.28 kB	🟢 -1.13 kB
assets/WidgetMarkdown-DlYoCsED.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.28 kB	🔴 +1.13 kB
assets/WidgetAudioUI-BJ7uiM3W.js (removed)	2.89 kB	—	🟢 -2.89 kB	🟢 -1.17 kB	🟢 -1.06 kB
assets/WidgetAudioUI-BmwyykkG.js (new)	—	2.89 kB	🔴 +2.89 kB	🔴 +1.17 kB	🔴 +1.06 kB
assets/WidgetToggleSwitch-0DJchWTo.js (new)	—	2.66 kB	🔴 +2.66 kB	🔴 +1.13 kB	🔴 +1.03 kB
assets/WidgetToggleSwitch-Cq-iwhYN.js (removed)	2.66 kB	—	🟢 -2.66 kB	🟢 -1.13 kB	🟢 -1.03 kB
assets/WidgetInputText-BvKW-KOy.js (new)	—	1.99 kB	🔴 +1.99 kB	🔴 +922 B	🔴 +851 B
assets/WidgetInputText-BZSWwswR.js (removed)	1.99 kB	—	🟢 -1.99 kB	🟢 -923 B	🟢 -855 B
assets/Media3DTop-_WP0KTCC.js (new)	—	1.49 kB	🔴 +1.49 kB	🔴 +767 B	🔴 +655 B
assets/Media3DTop-CCbhyn4s.js (removed)	1.49 kB	—	🟢 -1.49 kB	🟢 -767 B	🟢 -651 B
assets/WidgetSelect-8KpssnJJ.js (removed)	733 B	—	🟢 -733 B	🟢 -361 B	🟢 -335 B
assets/WidgetSelect-wdy2WVaL.js (new)	—	733 B	🔴 +733 B	🔴 +361 B	🔴 +333 B
assets/WidgetInputNumber-Dm6eCfZW.js (removed)	673 B	—	🟢 -673 B	🟢 -349 B	🟢 -291 B
assets/WidgetInputNumber-DwoMMYqs.js (new)	—	673 B	🔴 +673 B	🔴 +347 B	🔴 +288 B
assets/Load3D-C12QoBX3.js (removed)	424 B	—	🟢 -424 B	🟢 -269 B	🟢 -222 B
assets/Load3D-tGSIZV1t.js (new)	—	424 B	🔴 +424 B	🔴 +266 B	🔴 +223 B
assets/WidgetLegacy-ANC2EsoB.js (new)	—	364 B	🔴 +364 B	🔴 +237 B	🔴 +196 B
assets/WidgetLegacy-f9cPgqOz.js (removed)	364 B	—	🟢 -364 B	🟢 -238 B	🟢 -193 B
assets/commands-BtYX0Lg9.js	17.7 kB	17.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-BwenEAzL.js	14.2 kB	14.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CXF6rcF5.js	14.9 kB	14.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CyGop0zh.js	15.1 kB	15.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DDahbUT-.js	15.7 kB	15.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DlbDMAz3.js	15.2 kB	15.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DLFlLaoZ.js	16.4 kB	16.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-edqUNgZp.js	16 kB	16 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-SQ5j-1oJ.js	14.3 kB	14.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-zgiVm_G2.js	15.1 kB	15.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-7lTF3od4.js	148 kB	148 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-B2EzieSY.js	108 kB	108 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-B9UYJSy5.js	106 kB	106 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-BKj_6mJM.js	109 kB	109 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-BQbZqz2p.js	128 kB	128 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Byq_ZSjS.js	122 kB	122 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CCgU1dqT.js	106 kB	106 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CeY1eBVB.js	94.4 kB	94.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CM3nY77t.js	93.7 kB	93.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CzXbUjyx.js	112 kB	112 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaAudioTop-DIQlZoPQ.js	1.46 kB	1.46 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaImageTop-C3CvQRZ8.js	1.75 kB	1.75 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaVideoTop-euoHxxM5.js	2.65 kB	2.65 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-B-XzzBeS.js	317 kB	317 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-BGwoeek4.js	329 kB	329 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-C6xl5-mL.js	358 kB	358 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-CRZGOJB7.js	310 kB	310 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-D8-Yzlzh.js	289 kB	289 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-Du8VrAwA.js	320 kB	320 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-jjlLVrIs.js	317 kB	317 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-JQwk1kgy.js	292 kB	292 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-JuuXdMpv.js	391 kB	391 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-l2Y20bod.js	314 kB	314 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/OBJLoader2WorkerModule-DTMpvldF.js	109 kB	109 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetChart-DJzJLSiP.js	2.48 kB	2.48 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetImageCompare-DOYclIRS.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

[christian-byrne]

LGTM!