[backport core/1.38] fix: prevent XSS vulnerability in context menu labels (#8922)

Backport of #8887 to `core/1.38`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8922-backport-core-1-38-fix-prevent-XSS-vulnerability-in-context-menu-labels-3096d73d3650811a9448fc9b2344a88b)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: github-actions <github-actions@github.com>

.agents/checks/accessibility.md

@@ -1,28 +0,0 @@
----
-name: accessibility
-description: Reviews UI code for WCAG 2.2 AA accessibility violations
-severity-default: medium
-tools: [Read, Grep]
----
-
-You are an accessibility auditor reviewing a code diff for WCAG 2.2 AA compliance. Focus on UI changes that affect users with disabilities.
-
-Check for:
-
-1. **Missing form labels** - inputs, selects, textareas without associated `<label>` or `aria-label`/`aria-labelledby`
-2. **Missing alt text** - images without `alt` attributes, or decorative images missing `alt=""`
-3. **Keyboard navigation** - interactive elements not focusable, custom widgets missing keyboard handlers (Enter, Space, Escape, Arrow keys), focus traps without escape
-4. **Focus management** - modals/dialogs that don't trap focus, dynamic content that doesn't move focus appropriately, removed elements without focus recovery
-5. **ARIA misuse** - invalid `aria-*` attributes, roles without required children/properties, `aria-hidden` on focusable elements
-6. **Color as sole indicator** - using color alone to convey meaning (errors, status) without text/icon alternative
-7. **Touch targets** - interactive elements smaller than 24x24 CSS pixels (WCAG 2.2 SC 2.5.8)
-8. **Screen reader support** - dynamic content changes without `aria-live` announcements, unlabeled icon buttons, links with only "click here"
-9. **Heading hierarchy** - skipped heading levels (h1 → h3), missing page landmarks
-
-Rules:
-
-- Focus on NEW or CHANGED UI in the diff — do not audit the entire existing codebase
-- Only flag issues in .vue, .tsx, .jsx, .html, or template-containing files
-- Skip non-UI files entirely (stores, services, utils)
-- Skip canvas-based content: the LiteGraph node editor renders on `<canvas>` elements, not DOM-based UI. WCAG rules don't fully apply to canvas rendering internals — only audit the DOM-based controls around it (toolbars, panels, dialogs)
-- "Critical" for completely inaccessible interactive elements, "major" for missing labels/ARIA, "minor" for enhancement opportunities

.agents/checks/api-contract.md

@@ -1,35 +0,0 @@
----
-name: api-contract
-description: Catches breaking changes to public interfaces, window-exposed APIs, event contracts, and exported symbols
-severity-default: high
-tools: [Grep, Read, glob]
----
-
-You are an API contract reviewer. Your job is to catch breaking changes and contract violations in public-facing interfaces.
-
-## What to Check
-
-1. **Breaking changes to globally exposed APIs** — anything on `window` or other global objects that consumers depend on. Renamed properties, removed methods, changed signatures, changed return types.
-2. **Event contract changes** — renamed events, changed event payloads, removed events that listeners may depend on.
-3. **Changed function signatures** — parameters reordered, required params added, return type changed on exported functions.
-4. **Removed or renamed exports** — any `export` that was previously available and is now gone or renamed without a re-export alias.
-5. **REST API changes** — changed endpoints, added required fields, removed response fields, changed status codes.
-6. **Type contract narrowing** — a function that used to accept `string | number` now only accepts `string`, or a return type that narrows unexpectedly.
-7. **Default value changes** — changing defaults on optional parameters that consumers may rely on.
-8. **Store/state shape changes** — renamed store properties, changed state structure that computed properties or watchers may depend on.
-
-## How to Identify the Public API
-
-- Check `package.json` for `"exports"` or `"main"` fields.
-- **Window globals**: This repo exposes LiteGraph classes on `window` (e.g., `window['LiteGraph']`, `window['LGraphNode']`, `window['LGraphCanvas']`) and `window['__COMFYUI_FRONTEND_VERSION__']`. These are consumed by custom node extensions and must not be renamed or removed.
-- **Extension hooks**: The `app` object and its extension registration system (`app.registerExtension`) is a public contract for third-party custom nodes. Changes to `ComfyApp`, `ComfyApi`, or the extension lifecycle are breaking changes.
-- Check AGENTS.md for project-specific API surface definitions.
-- Any exported symbol from common entry points (e.g., `src/types/index.ts`) should be treated as potentially public.
-
-## Rules
-
-- ONLY flag changes that break existing consumers.
-- Do NOT flag additions (new methods, new exports, new endpoints).
-- Do NOT flag internal/private API changes.
-- Always check if a re-export or compatibility shim was added before flagging.
-- Critical for removed/renamed globals, high for changed export signatures, medium for changed defaults.

.agents/checks/architecture-reviewer.md

@@ -1,27 +0,0 @@
----
-name: architecture-reviewer
-description: Reviews code for architectural issues like over-engineering, SOLID violations, coupling, and API design
-severity-default: medium
-tools: [Grep, Read, glob]
----
-
-You are a software architect reviewing a code diff. Focus on structural and design issues.
-
-## What to Check
-
-1. **Over-engineering** — abstractions for single-use cases, premature generalization, unnecessary indirection layers
-2. **SOLID violations** — god classes, mixed responsibilities, rigid coupling, interface segregation issues
-3. **Separation of concerns** — business logic in UI components, data access in controllers, mixed layers
-4. **API design** — inconsistent interfaces, leaky abstractions, unclear contracts
-5. **Coupling** — tight coupling between modules, circular dependencies, feature envy
-6. **Consistency** — breaking established patterns without justification, inconsistent approaches to similar problems
-7. **Dependency direction** — imports going the wrong way in the architecture, lower layers depending on higher
-8. **Change amplification** — designs requiring changes in many places for simple feature additions
-
-## Rules
-
-- Focus on structural issues that affect maintainability and evolution.
-- Do NOT report bugs, security, or performance issues (other checks handle those).
-- Consider whether the code is proportional to the problem it solves.
-- "Under-engineering" (missing useful abstractions) is as valid as over-engineering.
-- Rate severity by impact on future maintainability.

.agents/checks/bug-hunter.md

@@ -1,34 +0,0 @@
----
-name: bug-hunter
-description: Finds logic errors, off-by-ones, null safety issues, race conditions, and edge cases
-severity-default: high
-tools: [Read, Grep]
----
-
-You are a bug hunter reviewing a code diff. Your ONLY job is to find bugs - logic errors that will cause incorrect behavior at runtime.
-
-Focus areas:
-
-1. **Off-by-one errors** in loops, slices, and indices
-2. **Null/undefined dereferences** - any path where a value could be null but isn't checked
-3. **Race conditions** - shared mutable state, async ordering assumptions
-4. **Edge cases** - empty arrays, zero values, empty strings, boundary conditions
-5. **Type coercion bugs** - loose equality, implicit conversions
-6. **Error handling gaps** - unhandled promise rejections, swallowed errors
-7. **State mutation bugs** - mutating props, shared references, stale closures
-8. **Incorrect boolean logic** - flipped conditions, missing negation, wrong operator precedence
-
-Rules:
-
-- ONLY report actual bugs that will cause wrong behavior
-- Do NOT report style issues, naming, or performance
-- Do NOT report hypothetical bugs that require implausible inputs
-- Each finding must explain the specific runtime failure scenario
-
-## Repo-Specific Bug Patterns
-
-- `z.any()` in Zod schemas disables validation and propagates `any` into TypeScript types — always flag
-- Destructuring reactive objects (props, reactive()) without `toRefs()` loses reactivity — flag outside of `defineProps` destructuring
-- `ComputedRef<T>` exposed via `defineExpose` or public API should be unwrapped first
-- LiteGraph node operations: check for missing null guards on `node.graph` (can be null when node is removed)
-- Watch/watchEffect without cleanup for side effects (timers, listeners) — leak on component unmount

.agents/checks/coderabbit.md

@@ -1,50 +0,0 @@
----
-name: coderabbit
-description: Runs CodeRabbit CLI for AST-aware code quality review
-severity-default: medium
-tools: [Bash, Read]
----
-
-Run CodeRabbit CLI review on the current changes.
-
-## Steps
-
-1. Check if CodeRabbit CLI is installed:
-
-   ```bash
-   which coderabbit
-   ```
-
-   If not installed, skip this check and report:
-   "Skipped: CodeRabbit CLI not installed. Install and authenticate:
-
-   ```
-   npm install -g coderabbit
-   coderabbit auth login
-   ```
-
-   See https://docs.coderabbit.ai/guides/cli for setup."
-
-2. Run review:
-
-   ```bash
-   coderabbit --prompt-only --type uncommitted
-   ```
-
-   If there are committed but unpushed changes, use `--type committed` instead.
-
-3. Parse CodeRabbit's output. Each finding should include:
-   - File path and line number
-   - Severity mapped from CodeRabbit's own levels
-   - Category (logic, security, performance, style, test, architecture, dx)
-   - Description and suggested fix
-
-## Rate Limiting
-
-If a rate limit is hit, skip and note it. Prefer reading the current quota from CLI/API output rather than assuming a fixed reviews/hour limit.
-
-## Error Handling
-
-- Auth expired: skip and report "CodeRabbit auth expired, run: coderabbit auth login"
-- CLI timeout (>120s): skip and note
-- Parse error: return raw output with a warning

.agents/checks/complexity.md

@@ -1,28 +0,0 @@
----
-name: complexity
-description: Reviews code for excessive complexity and suggests refactoring opportunities
-severity-default: medium
-tools: [Grep, Read, glob]
----
-
-You are a complexity and refactoring advisor reviewing a code diff. Focus on code that is unnecessarily complex and will be hard to maintain.
-
-## What to Check
-
-1. **High cyclomatic complexity** — functions with many branching paths (if/else chains, switch statements with >7 cases, nested ternaries). Threshold: complexity >10 is high severity, >15 is critical.
-2. **Deep nesting** — code nested >4 levels deep (nested if/for/try blocks). Suggest guard clauses, early returns, or extraction.
-3. **Oversized functions** — functions >50 lines that do multiple things. Suggest extraction of cohesive sub-functions.
-4. **God classes/modules** — files >500 lines mixing multiple responsibilities. Suggest splitting by concern.
-5. **Long parameter lists** — functions with >5 parameters. Suggest parameter objects or builder patterns.
-6. **Complex boolean expressions** — conditions with >3 clauses that are hard to parse. Suggest extracting to named boolean variables.
-7. **Feature envy** — methods that use data from another class more than their own, suggesting the method belongs elsewhere.
-8. **Duplicate logic** — two or more code blocks in the diff doing essentially the same thing with minor variations.
-9. **Unnecessary indirection** — wrapper functions that add no value, abstractions for single-use cases, premature generalization.
-
-## Rules
-
-- Only flag complexity in NEW or SIGNIFICANTLY CHANGED code.
-- Do NOT suggest refactoring stable, well-tested code that happens to be complex.
-- Do NOT flag complexity that is inherent to the problem domain (e.g., state machines, protocol handlers).
-- Provide a concrete refactoring approach, not just "this is too complex".
-- High severity for code that will likely cause bugs during future modifications, medium for readability improvements, low for optional simplifications.

.agents/checks/ddd-structure.md

@@ -1,86 +0,0 @@
----
-name: ddd-structure
-description: Reviews whether new code is placed in the right domain/layer and follows domain-driven structure principles
-severity-default: medium
-tools: [Grep, Read, glob]
----
-
-You are a domain-driven design reviewer. Your job is to check whether new or moved code is placed in the correct architectural layer and domain folder.
-
-## Principles
-
-1. **Domain over Technical Layer** — code should be organized by what it does (domain/feature), not by what it is (component/service/store). New files in flat technical folders like `src/components/`, `src/services/`, `src/stores/`, `src/utils/` are a smell if the repo already has domain folders.
-
-2. **Cohesion** — files that change together should live together. A component, its store, its service, and its types for a single feature should be co-located.
-
-3. **Import Direction** — lower layers must not import from higher layers. Check that imports flow in the allowed direction (see Layer Architecture below).
-
-4. **Bounded Contexts** — each domain/feature should have clear boundaries. Cross-domain imports should go through public interfaces, not reach into internal files.
-
-5. **Naming** — folders and files should reflect domain concepts, not technical roles. `workflowExecution.ts` > `service.ts`.
-
-## Layer Architecture
-
-This repo uses a VSCode-style layered architecture with strict unidirectional imports:
-
-```
-base → platform → workbench → renderer
-```
-
-| Layer        | Purpose                                | Can Import From                    |
-| ------------ | -------------------------------------- | ---------------------------------- |
-| `base/`      | Pure utilities, no framework deps      | Nothing                            |
-| `platform/`  | Core domain services, business logic   | `base/`                            |
-| `workbench/` | Features, workspace orchestration      | `base/`, `platform/`               |
-| `renderer/`  | UI layer (Vue components, composables) | `base/`, `platform/`, `workbench/` |
-
-### Import Direction Violations to Check
-
-```bash
-# platform must NOT import from workbench or renderer
-grep -r "from '@/renderer'" src/platform/ --include="*.ts" --include="*.vue"
-grep -r "from '@/workbench'" src/platform/ --include="*.ts" --include="*.vue"
-# base must NOT import from platform, workbench, or renderer
-grep -r "from '@/platform'" src/base/ --include="*.ts" --include="*.vue"
-grep -r "from '@/workbench'" src/base/ --include="*.ts" --include="*.vue"
-grep -r "from '@/renderer'" src/base/ --include="*.ts" --include="*.vue"
-# workbench must NOT import from renderer
-grep -r "from '@/renderer'" src/workbench/ --include="*.ts" --include="*.vue"
-```
-
-### Legacy Flat Folders
-
-Flag NEW files added to these legacy flat folders (they should go in a domain folder under the appropriate layer instead):
-
-- `src/components/` → should be in `src/renderer/` or `src/workbench/extensions/{feature}/components/`
-- `src/stores/` → should be in `src/platform/{domain}/` or `src/workbench/extensions/{feature}/stores/`
-- `src/services/` → should be in `src/platform/{domain}/`
-- `src/composables/` → should be in `src/renderer/` or `src/platform/{domain}/ui/`
-
-Do NOT flag modifications to existing files in legacy folders — only flag NEW files.
-
-## How to Review
-
-1. Look at the diff to see where new files are created or where code is added.
-2. Check if the repo has an established domain folder structure (look for domain-organized directories like `src/platform/`, `src/workbench/`, `src/renderer/`, `src/base/`, or similar).
-3. If domain folders exist but new code was placed in a flat technical folder, flag it.
-4. Run import direction checks:
-   - Use `Grep` or `Read` to check if new imports violate layer boundaries.
-   - Flag any imports from a higher layer to a lower one using the rules above.
-5. Check for new files in legacy flat folders and flag them per the Legacy Flat Folders section.
-
-## Generic Checks (when no domain structure is detected)
-
-- God files (>500 lines mixing concerns)
-- Circular imports between modules
-- Business logic in UI components
-
-## Severity Guidelines
-
-| Issue                                                         | Severity |
-| ------------------------------------------------------------- | -------- |
-| Import direction violation (lower layer imports higher layer) | high     |
-| New file in legacy flat folder when domain folders exist      | medium   |
-| Business logic in UI component                                | medium   |
-| Missing domain boundary (cross-cutting import into internals) | low      |
-| Naming uses technical role instead of domain concept          | low      |

.agents/checks/dep-secrets-scan.md

@@ -1,66 +0,0 @@
----
-name: dep-secrets-scan
-description: Runs dependency vulnerability audit and secrets detection
-severity-default: critical
-tools: [Bash, Read]
----
-
-Run dependency audit and secrets scan to detect known CVEs in dependencies and leaked secrets in code.
-
-## Steps
-
-1. Check which tools are available:
-
-   ```bash
-   pnpm --version
-   gitleaks version
-   ```
-
-   - If **neither** is installed, skip this check and report: "Skipped: neither pnpm nor gitleaks installed. Install pnpm: `npm i -g pnpm`. Install gitleaks: `brew install gitleaks` or see https://github.com/gitleaks/gitleaks#installing"
-   - If only one is available, run that one and note the other was skipped.
-
-2. **Dependency audit** (if pnpm is available):
-
-   ```bash
-   pnpm audit --json 2>/dev/null || true
-   ```
-
-   Parse the JSON output. Map advisory severity:
-   - `critical` advisory → `critical`
-   - `high` advisory → `major`
-   - `moderate` advisory → `minor`
-   - `low` advisory → `nitpick`
-
-   Report each finding with: package name, version, advisory title, CVE, and suggested patched version.
-
-3. **Secrets detection** (if gitleaks is available):
-
-   ```bash
-   gitleaks detect --no-banner --report-format json --source . 2>/dev/null || true
-   ```
-
-   Parse the JSON output. All secret findings are `critical` severity.
-
-   Report each finding with: file and line, rule description, and a redacted match. Always suggest removing the secret and rotating credentials.
-
-## What This Catches
-
-### Dependency Audit
-
-- Known CVEs in direct and transitive dependencies
-- Vulnerable packages from the npm advisory database
-
-### Secrets Detection
-
-- API keys and tokens in code
-- AWS credentials, GCP service account keys
-- Database connection strings with passwords
-- Private keys and certificates
-- Generic high-entropy secrets
-
-## Error Handling
-
-- If pnpm audit fails, log the error and continue with gitleaks.
-- If gitleaks fails, log the error and continue with audit results.
-- If JSON parsing fails for either tool, include raw output with a warning.
-- If both tools produce no findings, report "No issues found."

.agents/checks/doc-freshness.md

@@ -1,40 +0,0 @@
----
-name: doc-freshness
-description: Reviews whether code changes are reflected in documentation
-severity-default: medium
-tools: [Read, Grep]
----
-
-You are a documentation freshness reviewer. Your job is to check whether code changes are properly reflected in documentation, and whether new features need documentation.
-
-Check for:
-
-1. **Stale README sections** - code changes that invalidate setup instructions, API examples, or architecture descriptions in README.md
-2. **Outdated code comments** - comments referencing removed functions, old parameter names, previous behavior, or TODO items that are now done
-3. **Missing JSDoc on public APIs** - exported functions, classes, or interfaces without JSDoc descriptions, especially those used by consumers of the library
-4. **Changed behavior without changelog** - user-facing behavior changes that should be noted in a changelog or release notes
-5. **Dead documentation links** - links in markdown files pointing to moved or deleted files
-6. **Missing migration guidance** - breaking changes without upgrade instructions
-
-Rules:
-
-- Focus on documentation that needs to CHANGE due to the diff — don't audit all existing docs
-- Do NOT flag missing comments on internal/private functions
-- Do NOT flag missing changelog entries for purely internal refactors
-- "Major" for stale docs that will mislead users, "minor" for missing JSDoc on public APIs, "nitpick" for minor doc improvements
-
-## ComfyUI_frontend Documentation
-
-This repository's public APIs are used by custom node and extension authors. Documentation lives at [docs.comfy.org](https://docs.comfy.org) (repo: Comfy-Org/docs).
-
-For any NEW API, event, hook, or configuration that extensions or custom nodes can use:
-
-- Flag with a suggestion to open a PR to Comfy-Org/docs to document the new API
-- Example: "This new extension API should be documented at docs.comfy.org — consider opening a PR to Comfy-Org/docs"
-
-For changes to existing extension-facing APIs:
-
-- Check if the existing docs at docs.comfy.org may need updating
-- Flag stale references in CONTRIBUTING.md or developer guides
-
-Anything relevant to custom extension authors should trigger a documentation suggestion.

.agents/checks/dx-readability.md

@@ -1,25 +0,0 @@
----
-name: dx-readability
-description: Reviews code for developer experience issues including naming clarity, cognitive complexity, dead code, and confusing patterns
-severity-default: low
-tools: [Read, Grep]
----
-
-You are a developer experience reviewer. Focus on code that will confuse the next developer who reads it.
-
-Check for:
-
-1. **Unclear naming** - variables/functions that don't communicate intent, abbreviations, misleading names
-2. **Cognitive complexity** - deeply nested conditions, long functions doing multiple things, complex boolean expressions
-3. **Dead code** - unreachable branches, unused variables, commented-out code, vestigial parameters
-4. **Confusing patterns** - clever tricks over simple code, implicit behavior, action-at-a-distance, surprising side effects
-5. **Missing context** - complex business logic without explaining why, non-obvious algorithms without comments
-6. **Inconsistent abstractions** - mixing raw and wrapped APIs, different error handling styles in same module
-7. **Implicit knowledge** - code that only works because of undocumented assumptions or conventions
-
-Rules:
-
-- Only flag things that would genuinely confuse a competent developer
-- Do NOT flag established project conventions even if you'd prefer different ones
-- "Minor" for things that slow comprehension, "nitpick" for pure style preferences
-- Major is reserved for genuinely misleading code (names that lie, silent behavior changes)

.agents/checks/ecosystem-compat.md

@@ -1,58 +0,0 @@
----
-name: ecosystem-compat
-description: Checks whether changes break exported symbols that downstream consumers may depend on
-severity-default: high
-tools: [Grep, Read, glob, mcp__comfy_codesearch__search_code]
----
-
-Check whether this PR introduces breaking changes to exported symbols that downstream consumers may depend on.
-
-## What to Check
-
-- Renamed or removed exported functions/classes/types
-- Changed function signatures (parameters added/removed/reordered)
-- Changed return types
-- Removed or renamed CSS classes used for selectors
-- Changed event names or event payload shapes
-- Changed global registrations or extension hooks
-- Modified integration points with external systems
-
-## Method
-
-1. Read the diff and identify any changes to exported symbols.
-2. For each potentially breaking change, try to determine if downstream consumers exist:
-   - If `mcp__comfy_codesearch__search_code` is available, search for usages of the changed symbol across downstream repositories.
-   - Otherwise, use `Grep` to search for usages within the current repository and note that external usage could not be verified.
-3. If consumers are found using the changed API, report it as a finding.
-
-## Severity Guidelines
-
-| Ecosystem Usage | Severity | Guidance                                                     |
-| --------------- | -------- | ------------------------------------------------------------ |
-| 5+ consumers    | critical | Must address before merge                                    |
-| 2-4 consumers   | high     | Should address or document                                   |
-| 1 consumer      | medium   | Note in PR, author decides                                   |
-| 0 consumers     | low      | Note potential risk only                                     |
-| Unknown usage   | medium   | Require explicit note that external usage was not verifiable |
-
-## Suggestion Template
-
-When a breaking change is found, suggest:
-
-- Keeping the old export alongside the new one
-- Adding a deprecation wrapper
-- Explicitly noting this as a breaking change in the PR description so consumers can update
-
-## ComfyUI Code Search MCP
-
-This check works best with the ComfyUI code search MCP tool, which searches across all custom node repositories for usage of changed symbols.
-
-If the `mcp__comfy_codesearch__search_code` tool is not available, install it:
-
-```
-amp mcp add comfy-codesearch https://comfy-codesearch.vercel.app/api/mcp
-# OR for Claude Code:
-claude mcp add -t http comfy-codesearch https://comfy-codesearch.vercel.app/api/mcp
-```
-
-Without this MCP, the check will fall back to searching within the current repository only, and cannot verify external ecosystem usage.

.agents/checks/error-handling.md

@@ -1,38 +0,0 @@
----
-name: error-handling
-description: Reviews error handling patterns for empty catches, swallowed errors, missing async error handling, and generic error UX
-severity-default: high
-tools: [Read, Grep]
----
-
-You are an error handling auditor reviewing a code diff. Focus exclusively on how errors are handled, propagated, and surfaced.
-
-Check for:
-
-1. **Empty catch blocks** - errors caught and silently swallowed with no logging or re-throw
-2. **Generic catches** - catching all errors without distinguishing types, losing context
-3. **Missing async error handling** - unhandled promise rejections, async functions without try/catch or .catch()
-4. **Swallowed errors** - errors caught and replaced with a return value that hides the failure
-5. **Missing error boundaries** - Vue/React component trees without error boundaries around risky subtrees
-6. **No retry or fallback** - network calls, file I/O, or external service calls with no retry logic or graceful degradation
-7. **Generic error UX** - user-facing code showing "Something went wrong" without actionable guidance or error codes
-8. **Missing cleanup on error** - resources (connections, file handles, timers) not cleaned up in error paths
-9. **Error propagation breaks** - catching errors mid-chain and not re-throwing, breaking caller's ability to handle
-
-Rules:
-
-- Focus on NEW or CHANGED error handling in the diff
-- Do NOT flag existing error handling patterns in untouched code
-- Do NOT suggest adding error handling to code that legitimately cannot fail (pure functions, type-safe internal calls)
-- "Critical" for swallowed errors in data-mutation paths, "major" for missing error handling on external calls, "minor" for missing logging
-
-## Repo-Specific Error Handling
-
-- User-facing error messages must be actionable and friendly (per AGENTS.md)
-- Use the shared `useErrorHandling` composable (`src/composables/useErrorHandling.ts`) for centralized error handling:
-  - `wrapWithErrorHandling` / `wrapWithErrorHandlingAsync` automatically catch errors and surface them as toast notifications via `useToastStore`
-  - `toastErrorHandler` can be used directly for custom error handling flows
-  - Supports `ErrorRecoveryStrategy` for retry/fallback patterns (e.g., reauthentication, network reconnect)
-- API errors from `api.get()`/`api.post()` should be caught and surfaced to the user via `useToastStore` (`src/platform/updates/common/toastStore.ts`)
-- Electron/desktop code paths: IPC errors should be caught and not crash the renderer process
-- Workflow execution errors should be displayed in the UI status bar, not silently swallowed

.agents/checks/eslint.strict.config.js

@@ -1,60 +0,0 @@
-/**
- * Strict ESLint config for the sonarjs-lint review check.
- *
- * Uses eslint-plugin-sonarjs to get SonarQube-grade analysis without a server.
- * This config is NOT used for regular development linting — only for the
- * code review checks' static analysis pass.
- *
- * Install: pnpm add -D eslint eslint-plugin-sonarjs
- * Run:     pnpm dlx eslint --no-config-lookup --config .agents/checks/eslint.strict.config.js --ext .ts,.js,.vue {files}
- */
-
-import sonarjs from 'eslint-plugin-sonarjs'
-
-export default [
-  sonarjs.configs.recommended,
-  {
-    plugins: {
-      sonarjs
-    },
-    rules: {
-      // Bug detection
-      'sonarjs/no-all-duplicated-branches': 'error',
-      'sonarjs/no-element-overwrite': 'error',
-      'sonarjs/no-identical-conditions': 'error',
-      'sonarjs/no-identical-expressions': 'error',
-      'sonarjs/no-one-iteration-loop': 'error',
-      'sonarjs/no-use-of-empty-return-value': 'error',
-      'sonarjs/no-collection-size-mischeck': 'error',
-      'sonarjs/no-duplicated-branches': 'error',
-      'sonarjs/no-identical-functions': 'error',
-      'sonarjs/no-redundant-jump': 'error',
-      'sonarjs/no-unused-collection': 'error',
-      'sonarjs/no-gratuitous-expressions': 'error',
-
-      // Code smell detection
-      'sonarjs/cognitive-complexity': ['error', 15],
-      'sonarjs/no-duplicate-string': ['error', { threshold: 3 }],
-      'sonarjs/no-redundant-boolean': 'error',
-      'sonarjs/no-small-switch': 'error',
-      'sonarjs/prefer-immediate-return': 'error',
-      'sonarjs/prefer-single-boolean-return': 'error',
-      'sonarjs/no-inverted-boolean-check': 'error',
-      'sonarjs/no-nested-template-literals': 'error'
-    },
-    languageOptions: {
-      ecmaVersion: 2024,
-      sourceType: 'module'
-    }
-  },
-  {
-    ignores: [
-      '**/node_modules/**',
-      '**/dist/**',
-      '**/build/**',
-      '**/*.config.*',
-      '**/*.test.*',
-      '**/*.spec.*'
-    ]
-  }
-]

.agents/checks/import-graph.md

@@ -1,72 +0,0 @@
----
-name: import-graph
-description: Validates import rules, detects circular dependencies, and enforces layer boundaries using dependency-cruiser
-severity-default: high
-tools: [Bash, Read]
----
-
-Run dependency-cruiser import graph analysis on changed files to detect circular dependencies, orphan modules, and import rule violations.
-
-> **Note:** The circular dependency scan in step 4 targets `src/` specifically, since this is a frontend app with source code under `src/`.
-
-## Steps
-
-1. Check if dependency-cruiser is available:
-   ```bash
-   pnpm dlx dependency-cruiser --version
-   ```
-   If not available, skip this check and report: "Skipped: dependency-cruiser not available. Install with: `pnpm add -D dependency-cruiser`"
-
-> **Install:** `pnpm add -D dependency-cruiser`
-
-2. Identify changed directories from the diff.
-
-3. Determine config to use:
-   - If `.dependency-cruiser.js` or `.dependency-cruiser.cjs` exists in the repo root, use it (dependency-cruiser auto-detects it). This config may enforce layer architecture rules (e.g., base → platform → workbench → renderer import direction):
-     ```bash
-     pnpm dlx dependency-cruiser --output-type json <changed_directories> 2>/dev/null
-     ```
-   - If no config exists, run with built-in defaults:
-     ```bash
-     pnpm dlx dependency-cruiser --no-config --output-type json <changed_directories> 2>/dev/null
-     ```
-
-4. Also check for circular dependencies specifically across `src/`:
-
-   ```bash
-   pnpm dlx dependency-cruiser --no-config --output-type json --do-not-follow "node_modules" --include-only "^src" src 2>/dev/null
-   ```
-
-   Look for modules where `.circular == true` in the output.
-
-5. Parse the JSON output. Each violation has:
-   - `rule.name`: the violated rule
-   - `rule.severity`: error, warn, info
-   - `from`: importing module
-   - `to`: imported module
-
-6. Map violation severity:
-   - `error` → `major`
-   - `warn` → `minor`
-   - `info` → `nitpick`
-   - Circular dependencies → `major` (category: architecture)
-   - Orphan modules → `nitpick` (category: dx)
-
-7. Report each violation with: the rule name, source and target modules, file path, and a suggestion (usually move the import or extract an interface).
-
-## What It Catches
-
-| Rule                     | What It Detects                                      |
-| ------------------------ | ---------------------------------------------------- |
-| `no-circular`            | Circular dependency chains (A → B → C → A)           |
-| `no-orphans`             | Modules with no incoming or outgoing dependencies    |
-| `not-to-dev-dep`         | Production code importing devDependencies            |
-| `no-duplicate-dep-types` | Same dependency in multiple sections of package.json |
-| Custom layer rules       | Import direction violations (e.g., base → platform)  |
-
-## Error Handling
-
-- If pnpm dlx is not available, skip and report the error.
-- If the config file fails to parse, fall back to `--no-config`.
-- If there are more than 50 violations, report the first 20 and note the total count.
-- If no violations are found, report "No issues found."

.agents/checks/memory-leak.md

@@ -1,27 +0,0 @@
----
-name: memory-leak
-description: Scans for memory leak patterns including event listeners without cleanup, timers not cleared, and unbounded caches
-severity-default: high
-tools: [Read, Grep]
----
-
-You are a memory leak specialist reviewing a code diff. Focus exclusively on patterns that cause memory to grow unboundedly over time.
-
-Check for:
-
-1. **Event listeners without cleanup** - addEventListener without corresponding removeEventListener, especially in Vue onMounted without onBeforeUnmount cleanup
-2. **Timers not cleared** - setInterval/setTimeout started in component lifecycle without clearInterval/clearTimeout on unmount
-3. **Observer patterns without disconnect** - MutationObserver, IntersectionObserver, ResizeObserver created without .disconnect() on cleanup
-4. **WebSocket/Worker connections** - opened connections never closed on component unmount or route change
-5. **Unbounded caches** - Maps, Sets, or arrays that grow with usage but never evict entries, especially keyed by user input or dynamic IDs
-6. **Stale closures holding references** - closures in event handlers or callbacks that capture large objects or DOM nodes and prevent garbage collection
-7. **RequestAnimationFrame without cancel** - rAF loops started without cancelAnimationFrame on cleanup
-8. **Vue-specific leaks** - watch/watchEffect without stop(), computed that captures reactive dependencies it shouldn't, provide/inject holding stale references
-9. **Global state accumulation** - pushing to global arrays/maps without ever removing entries, console.log keeping object references in dev
-
-Rules:
-
-- Focus on NEW leak patterns introduced in the diff
-- Do NOT flag existing cleanup patterns that are correct
-- Every finding must explain the specific lifecycle scenario where the leak occurs (e.g., "when user navigates away from this view, the interval keeps running")
-- "Critical" for leaks in hot paths or long-lived pages, "major" for component-level leaks, "minor" for dev-only or cold-path leaks

.agents/checks/pattern-compliance.md

@@ -1,60 +0,0 @@
----
-name: pattern-compliance
-description: Checks code against repository conventions from AGENTS.md and established patterns
-severity-default: medium
-tools: [Read, Grep]
----
-
-Check code against repository conventions and framework patterns.
-
-Steps:
-
-1. Read AGENTS.md (and any directory-specific guidance files) for project-specific conventions
-2. Read each changed file
-3. Check against the conventions found in AGENTS.md and these standard patterns:
-
-### TypeScript
-
-- No `any` types or `as any` assertions
-- No `@ts-ignore` without explanatory comment
-- Separate type imports (`import type { ... }`)
-- Use `import type { ... }` for type-only imports
-- Explicit return types on exported functions
-- Use `es-toolkit` for utility functions, NOT lodash. Flag any new `import ... from 'lodash'` or `import ... from 'lodash/*'`
-- Never use `z.any()` in Zod schemas — use `z.unknown()` and narrow
-
-### Vue (if applicable)
-
-- Composition API with `<script setup lang="ts">`
-- Reactive props destructuring (not `withDefaults` pattern)
-- New components must use `<script setup lang="ts">` with reactive props destructuring (Vue 3.5 style): `const { color = 'blue' } = defineProps<Props>()`
-- Separate type imports from value imports
-- All user-facing strings must use `vue-i18n` (`$t()` in templates, `t()` in script). Flag hardcoded English strings in templates that should be translated. The locale file is `src/locales/en/main.json`
-
-### Tailwind (if applicable)
-
-- No `dark:` variants (use semantic theme tokens)
-- Use `cn()` utility for conditional classes
-- No `!important` in utility classes
-- Tailwind 4: CSS variable references use parentheses syntax: `h-(--my-var)` NOT `h-[--my-var]`
-- Use design tokens: `bg-secondary-background`, `text-muted-foreground`, `border-border-default`
-- No `<style>` blocks in Vue SFCs — use inline Tailwind only
-
-### Testing
-
-- Behavioral tests, not change detectors
-- No mock-heavy tests that don't test real behavior
-- Test names describe behavior, not implementation
-
-### General
-
-- No commented-out code
-- No `console.log` in production code (unless intentional logging)
-- No hardcoded URLs, credentials, or environment-specific values
-- Package manager is `pnpm`. Never use `npm`, `npx`, or `yarn`. Use `pnpm dlx` for one-off package execution
-- Sanitize HTML with `DOMPurify.sanitize()`, never raw `innerHTML` or `v-html` without it
-
-Rules:
-
-- Only flag ACTUAL violations, not hypothetical ones
-- AGENTS.md conventions take priority over default patterns if they conflict

.agents/checks/performance-profiler.md

@@ -1,35 +0,0 @@
----
-name: performance-profiler
-description: Reviews code for performance issues including algorithmic complexity, unnecessary work, and bundle size impact
-severity-default: medium
-tools: [Read, Grep]
----
-
-You are a performance engineer reviewing a code diff. Focus exclusively on performance issues.
-
-Check for:
-
-1. **Algorithmic complexity** - O(n²) or worse in loops, nested iterations over large collections
-2. **Unnecessary re-computation** - repeated work in render cycles, missing memoization for expensive ops
-3. **Memory leaks** - event listeners not cleaned up, growing caches without eviction, closures holding references
-4. **N+1 queries** - database/API calls inside loops
-5. **Bundle size** - large imports that could be tree-shaken, dynamic imports for heavy modules
-6. **Rendering performance** - unnecessary re-renders, layout thrashing, expensive computed properties
-7. **Data structures** - using arrays for lookups instead of maps/sets, unnecessary copying of large objects
-8. **Async patterns** - sequential awaits that could be parallel, missing abort controllers
-
-Rules:
-
-- ONLY report actual performance issues, not premature optimization suggestions
-- Distinguish between hot paths (major) and cold paths (minor)
-- Include Big-O analysis when relevant
-- Do NOT suggest micro-optimizations that a JIT compiler handles
-- Quantify the impact when possible: "This is O(n²) where n = number of users"
-
-## Repo-Specific Performance Concerns
-
-- **LiteGraph canvas rendering** is the primary hot path. Operations inside `LGraphNode.onDrawForeground`, `onDrawBackground`, `processMouseMove` run every frame at 60fps. Any O(n) or worse operation here on the node/link collections is critical.
-- **Node definition lookups** happen frequently — these should use Maps, not array.find()
-- **Workflow serialization/deserialization** can involve large JSON objects (1000+ nodes). Watch for deep copies or unnecessary re-parsing.
-- **Vue reactivity in canvas code** — reactive getters triggered during canvas render cause performance issues. Canvas-facing code should read raw values, not reactive refs.
-- **Bundle size** — check for large imports that could be dynamically imported. The build uses Vite with `build:analyze` for bundle visualization.

.agents/checks/regression-risk.md

@@ -1,44 +0,0 @@
----
-name: regression-risk
-description: Detects potential regressions by analyzing git blame history of modified lines
-severity-default: high
-tools: [Bash, Read, Grep]
----
-
-Perform regression risk analysis on the current changes using git blame.
-
-## Method
-
-1. Determine the base branch by examining git context (e.g., `git merge-base origin/main HEAD`, or check the PR's target branch). Never use `HEAD~1` as the base — it compares against the PR's own prior commit and causes false positives.
-2. Get the PR's own commits: `git log --format=%H <base>..HEAD`
-3. For each changed file, run: `git diff <base>...HEAD -- <file>`
-4. Extract the modified line ranges from the diff (lines removed or changed in the base version).
-5. For each modified line range, check git blame in the base version:
-   `git blame <base> -L <start>,<end> -- <file>`
-6. Look for blame commits whose messages match bugfix patterns:
-   - Contains: fix, bug, patch, hotfix, revert, regression, CVE
-   - Ignore: "fix lint", "fix typo", "fix format", "fix style"
-7. **Filter out false positives.** If the blamed commit SHA is in the PR's own commits, skip it.
-8. For each verified bugfix line being modified, report as a finding.
-
-## What to Report
-
-For each finding, include:
-
-- The file and line number
-- The original bugfix commit (short SHA and subject)
-- The date of the original fix
-- A suggestion to verify the original bug scenario still works and to add a regression test if one doesn't exist
-
-## Shallow Clone Limitations
-
-When working with shallow clones, `git blame` may not have full history. If blame fails with "no such path in revision" or shows truncated history, report only findings where blame succeeds and note the limitation.
-
-## Edge Cases
-
-| Situation                | Action                           |
-| ------------------------ | -------------------------------- |
-| Shallow clone (no blame) | Report what succeeds, note limit |
-| Blame shows PR's own SHA | Skip finding (false positive)    |
-| File renamed             | Try blame with `--follow`        |
-| Binary file              | Skip file                        |

.agents/checks/security-auditor.md

@@ -1,34 +0,0 @@
----
-name: security-auditor
-description: Reviews code for security vulnerabilities aligned with OWASP Top 10
-severity-default: critical
-tools: [Read, Grep]
----
-
-You are a security auditor reviewing a code diff. Focus exclusively on security vulnerabilities.
-
-Check for:
-
-1. **Injection** - SQL injection, command injection, template injection, XSS (stored/reflected/DOM)
-2. **Authentication/Authorization** - auth bypass, privilege escalation, missing access checks
-3. **Data exposure** - secrets in code, PII in logs, sensitive data in error messages, overly broad API responses
-4. **Cryptography** - weak algorithms, hardcoded keys, predictable tokens, missing encryption
-5. **Input validation** - missing sanitization, path traversal, SSRF, open redirects
-6. **Dependency risks** - known vulnerable patterns, unsafe deserialization
-7. **Configuration** - CORS misconfiguration, missing security headers, debug mode in production
-8. **Race conditions with security impact** - TOCTOU, double-spend, auth state races
-
-Rules:
-
-- ONLY report security issues, not general bugs or style
-- All findings must be severity "critical" or "major"
-- Explain the attack vector: who can exploit this and how
-- Do NOT report theoretical issues without a plausible attack scenario
-- Reference OWASP category when applicable
-
-## Repo-Specific Patterns
-
-- HTML sanitization must use `DOMPurify.sanitize()` — flag any `v-html` or `innerHTML` without DOMPurify
-- API calls should use `api.get(api.apiURL(...))` helpers, not raw `fetch('/api/...')` — direct URL construction can bypass auth
-- Firebase/Sentry credentials are configured via environment — flag any hardcoded Firebase config objects
-- Electron IPC: check for unsafe `ipcRenderer.send` patterns in desktop code paths

.agents/checks/semgrep-sast.md

@@ -1,54 +0,0 @@
----
-name: semgrep-sast
-description: Runs Semgrep SAST with auto-configured rules for JS/TS/Vue
-severity-default: high
-tools: [Bash, Read]
----
-
-Run Semgrep static analysis on changed files to detect security vulnerabilities, dangerous patterns, and framework-specific issues.
-
-## Steps
-
-1. Check if semgrep is installed:
-
-   ```bash
-   semgrep --version
-   ```
-
-   If not installed, skip this check and report: "Skipped: semgrep not installed. Install with: `pip3 install semgrep`"
-
-2. Identify changed files (`.ts`, `.js`, `.vue`) from the diff.
-   If none are found, skip and report: "Skipped: no changed JS/TS/Vue files."
-
-3. Run semgrep against changed files:
-
-   ```bash
-   semgrep --config=auto --json --quiet <changed_files>
-   ```
-
-4. Parse the JSON output (`.results[]` array). For each finding, map severity:
-   - Semgrep `ERROR` → `critical`
-   - Semgrep `WARNING` → `major`
-   - Semgrep `INFO` → `minor`
-
-5. Report each finding with:
-   - The semgrep rule ID (`check_id`)
-   - File path and line number (`path`, `start.line`)
-   - The message from `extra.message`
-   - A fix suggestion from `extra.fix` if available, otherwise general remediation advice
-
-## What Semgrep Catches
-
-With `--config=auto`, Semgrep loads community-maintained rules for:
-
-- **Security vulnerabilities:** injection, XSS, SSRF, path traversal, open redirect
-- **Dangerous patterns:** eval(), innerHTML, dangerouslySetInnerHTML, exec()
-- **Crypto issues:** weak hashing, hardcoded secrets, insecure random
-- **Best practices:** missing security headers, unsafe deserialization
-- **Framework-specific:** Express, React, Vue security patterns
-
-## Error Handling
-
-- If semgrep config download fails, skip and report the error.
-- If semgrep fails to parse a specific file, skip that file and continue with others.
-- If semgrep produces no findings, report "No issues found."

.agents/checks/sonarjs-lint.md

@@ -1,59 +0,0 @@
----
-name: sonarjs-lint
-description: Runs SonarQube-grade static analysis using eslint-plugin-sonarjs
-severity-default: high
-tools: [Bash, Read]
----
-
-Run eslint-plugin-sonarjs analysis on changed files to detect bugs, code smells, and security patterns without needing a SonarQube server.
-
-## Steps
-
-1. Check if eslint is available:
-
-   ```bash
-   pnpm dlx eslint --version
-   ```
-
-   If pnpm dlx or eslint is unavailable, skip this check and report: "Skipped: eslint not available. Ensure Node.js and pnpm dlx are installed."
-
-2. Identify changed files (`.ts`, `.js`, `.vue`) from the diff.
-
-3. Determine eslint config to use. This check uses a **strict sonarjs-specific config** (not the project's own eslint config, which is less strict):
-   - Look for the colocated strict config at `.agents/checks/eslint.strict.config.js`
-   - If found, run with `--config .agents/checks/eslint.strict.config.js`
-   - **Fallback:** if the strict config cannot be found or fails to load, skip this check and report: "Skipped: .agents/checks/eslint.strict.config.js missing; SonarJS rules require explicit config."
-
-4. Run eslint against changed files:
-
-   ```bash
-   # Use the strict config
-   pnpm dlx --yes --package eslint-plugin-sonarjs eslint --no-config-lookup --config .agents/checks/eslint.strict.config.js --format json <changed_files> 2>/dev/null || true
-   ```
-
-5. Parse the JSON array of file results. For each eslint message, map severity:
-   - `severity 2` (error) → `major`
-   - `severity 1` (warning) → `minor`
-
-6. Categorize findings by rule ID:
-   - Rule IDs starting with `sonarjs/no-` → category: `logic`
-   - Rule IDs containing `cognitive-complexity` → category: `dx`
-   - Other sonarjs rules → category: `style`
-
-7. Report each finding with:
-   - The rule ID
-   - File path and line number
-   - The message from eslint
-   - A fix suggestion based on the rule
-
-## What This Catches
-
-- **Bug detection:** duplicated branches, element overwrite, identical conditions/expressions, one-iteration loops, empty return values
-- **Code smells:** cognitive complexity (threshold: 15), duplicate strings, redundant booleans, small switches
-- **Security patterns:** via sonarjs recommended ruleset
-
-## Error Handling
-
-- If eslint fails to parse a Vue file, skip that file and continue with others.
-- If the plugin fails to install, skip and report the error.
-- If eslint produces no output or errors, report "No issues found."

.agents/checks/test-quality.md

@@ -1,37 +0,0 @@
----
-name: test-quality
-description: Reviews test code for quality issues and coverage gaps
-severity-default: medium
-tools: [Read, Grep]
----
-
-You are a test quality reviewer. Evaluate the tests included with (or missing from) this code change.
-
-Check for:
-
-1. **Missing tests** - new behavior without test coverage, modified logic without updated tests
-2. **Change-detector tests** - tests that assert implementation details instead of behavior (testing that a function was called, not what it produces)
-3. **Mock-heavy tests** - tests with so many mocks they don't test real behavior
-4. **Snapshot abuse** - large snapshots that no one reviews, snapshots of implementation details
-5. **Fragile assertions** - tests that break on unrelated changes, order-dependent tests
-6. **Missing edge cases** - happy path only, no empty/null/error scenarios tested
-7. **Test readability** - unclear test names, complex setup that obscures intent, shared mutable state between tests
-8. **Test isolation** - tests depending on execution order, shared state, external services without mocking
-
-Rules:
-
-- Focus on test quality and coverage gaps, not production code bugs
-- "Major" for missing tests on critical logic, "minor" for missing edge case tests
-- A change that adds no tests is only an issue if the change adds behavior
-- Refactors without behavior changes don't need new tests
-- Prefer behavioral tests: test inputs and outputs, not internal implementation
-- This repo uses **colocated tests**: `.test.ts` files live next to their source files (e.g., `MyComponent.test.ts` beside `MyComponent.vue`). When checking for missing tests, look for a colocated `.test.ts` file, not a separate `tests/` directory
-
-## Repo-Specific Testing Conventions
-
-- Tests use **Vitest** (not Jest) — run with `pnpm test:unit`
-- Test files are **colocated**: `MyComponent.test.ts` next to `MyComponent.vue`
-- Use `@vue/test-utils` for component testing, `@pinia/testing` (`createTestingPinia`) for store tests
-- Browser/E2E tests use **Playwright** in `browser_tests/` — run with `pnpm test:browser:local`
-- Mock composables using the singleton factory pattern inside `vi.mock()` — see `docs/testing/unit-testing.md` for the pattern
-- Never use `any` in test code either — proper typing applies to tests too

.agents/checks/vue-patterns.md

@@ -1,47 +0,0 @@
----
-name: vue-patterns
-description: Reviews Vue 3.5+ code for framework-specific anti-patterns
-severity-default: medium
-tools: [Read, Grep]
----
-
-You are a Vue 3.5 framework specialist reviewing a code diff. Focus on Vue-specific patterns, anti-patterns, and missed framework features.
-
-Check for:
-
-1. **Options API in new files** - new .vue files using Options API instead of Composition API with `<script setup>`. Modifications to existing Options API files are fine.
-2. **Reactivity anti-patterns** - destructuring reactive objects losing reactivity, using `ref()` for objects that should be `reactive()`, accessing `.value` inside templates, incorrectly using `toRefs`/`toRef`
-3. **Watch/watchEffect cleanup** - watchers without cleanup functions when they set up side effects (timers, listeners, subscriptions)
-4. **Flush timing issues** - DOM access in watch callbacks without `{ flush: 'post' }`, `nextTick` misuse, accessing template refs before mount
-5. **defineEmits typing** - using array syntax `defineEmits(['event'])` instead of TypeScript syntax `defineEmits<{...}>()`
-6. **defineExpose misuse** - exposing internal state via `defineExpose` when events would be more appropriate (expose is for imperative methods: validate, focus, open)
-7. **Prop drilling** - passing props through 3+ component levels where provide/inject would be cleaner
-8. **VueUse opportunities** - manual implementations of common composables that VueUse already provides (useLocalStorage, useEventListener, useDebounceFn, useIntersectionObserver, etc.)
-9. **Computed vs method** - methods used in templates for derived state that should be computed properties, or computed properties that have side effects
-10. **PrimeVue usage in new code** - New components must NOT use PrimeVue. This project is migrating to shadcn-vue (Reka UI primitives). If new code imports from `primevue/*`, flag it and suggest the shadcn-vue equivalent.
-
-Available shadcn-vue replacements in `src/components/ui/`:
-
-- `button/` — Button, variants
-- `select/` — Select, SelectTrigger, SelectContent, SelectItem
-- `textarea/` — Textarea
-- `toggle-group/` — ToggleGroup, ToggleGroupItem
-- `slider/` — Slider
-- `skeleton/` — Skeleton
-- `stepper/` — Stepper
-- `tags-input/` — TagsInput
-- `search-input/` — SearchInput
-- `Popover.vue` — Popover
-
-For Reka UI primitives not yet wrapped, create a new component in `src/components/ui/` following the pattern in existing components (see `src/components/ui/AGENTS.md`): use `useForwardProps`, `cn()`, design tokens.
-
-Modifications to existing PrimeVue-based components are acceptable but should note the migration opportunity.
-
-Rules:
-
-- Only review .vue and composable .ts files — skip stores, services, utils
-- Do NOT flag existing Options API files being modified (only flag NEW files)
-- Flag new PrimeVue imports — the project is migrating to shadcn-vue/Reka UI
-- When suggesting shadcn-vue alternatives, reference `src/components/ui/AGENTS.md` for the component creation pattern
-- Use Iconify icons (`<i class="icon-[lucide--check]" />`) not PrimeIcons
-- "Major" for reactivity bugs and flush timing, "minor" for API style and VueUse opportunities, "nitpick" for preference-level patterns

.claude/commands/create-frontend-release.md

@@ -391,7 +391,7 @@ echo "Last stable release: $LAST_STABLE"
 
 ```bash
 # Trigger the workflow
-gh workflow run release-version-bump.yaml -f version_type=${VERSION_TYPE}
+gh workflow run version-bump.yaml -f version_type=${VERSION_TYPE}
 
 # Workflow runs quickly - usually creates PR within 30 seconds
 echo "Workflow triggered. Waiting for PR creation..."
@@ -443,21 +443,28 @@ echo "Workflow triggered. Waiting for PR creation..."
    gh pr view ${PR_NUMBER} --json labels | jq -r '.labels[].name' | grep -q "Release" || \
      echo "ERROR: Release label missing! Add it immediately!"
    ```
-2. Verify version number in package.json
-3. Review all changed files
-4. Ensure no unintended changes included
-5. Wait for required PR checks:
+2. Check for update-locales commits:
+   ```bash
+   # WARNING: update-locales may add [skip ci] which blocks release workflow!
+   gh pr view ${PR_NUMBER} --json commits | grep -q "skip ci" && \
+     echo "WARNING: [skip ci] detected - release workflow may not trigger!"
+   ```
+3. Verify version number in package.json
+4. Review all changed files
+5. Ensure no unintended changes included
+6. Wait for required PR checks:
    ```bash
    gh pr checks ${PR_NUMBER} --watch
    ```
-6. **FINAL CODE REVIEW**: Release label present and no [skip ci]?
+7. **FINAL CODE REVIEW**: Release label present and no [skip ci]?
 
 ### Step 12: Pre-Merge Validation
 
 1. **Review Requirements**: Release PRs require approval
-2. Monitor CI checks
-3. Check no new commits to main since PR creation
-4. **DEPLOYMENT READINESS**: Ready to merge?
+2. Monitor CI checks - watch for update-locales
+3. **CRITICAL WARNING**: If update-locales adds [skip ci], the release workflow won't trigger!
+4. Check no new commits to main since PR creation
+5. **DEPLOYMENT READINESS**: Ready to merge?
 
 ### Step 13: Execute Release
 

.claude/skills/regenerating-screenshots/SKILL.md

@@ -1,83 +0,0 @@
----
-name: regenerating-screenshots
-description: 'Creates a PR to regenerate Playwright screenshot expectations. Use when screenshot tests are failing on main or PRs due to stale golden images. Triggers on: regen screenshots, regenerate screenshots, update expectations, fix screenshot tests.'
----
-
-# Regenerating Playwright Screenshot Expectations
-
-Automates the process of triggering the `PR: Update Playwright Expectations`
-GitHub Action by creating a labeled PR from `origin/main`.
-
-## Steps
-
-1. **Fetch latest main**
-
-   ```bash
-   git fetch origin main
-   ```
-
-2. **Create a timestamped branch** from `origin/main`
-
-   Format: `regen-screenshots/YYYY-MM-DDTHH` (hour resolution, local time)
-
-   ```bash
-   git checkout -b regen-screenshots/<datetime> origin/main
-   ```
-
-3. **Create an empty commit**
-
-   ```bash
-   git commit --allow-empty -m "test: regenerate screenshot expectations"
-   ```
-
-4. **Push the branch**
-
-   ```bash
-   git push origin regen-screenshots/<datetime>
-   ```
-
-5. **Generate a poem** about regenerating screenshots. Be creative — a
-   new, unique poem every time. Short (4–8 lines). Can be funny, wistful,
-   epic, haiku-style, limerick, sonnet fragment — vary the form.
-
-6. **Create the PR** with the poem as the body (no label yet).
-
-   Write the poem to a temp file and use `--body-file`:
-
-   ```bash
-   # Write poem to temp file
-   # Create PR:
-   gh pr create \
-     --base main \
-     --head regen-screenshots/<datetime> \
-     --title "test: regenerate screenshot expectations" \
-     --body-file <temp-file>
-   ```
-
-7. **Add the label** as a separate step to trigger the GitHub Action.
-
-   The `labeled` event only fires when a label is added after PR
-   creation, not when applied during creation via `--label`.
-
-   Use the GitHub API directly (`gh pr edit --add-label` fails due to
-   deprecated Projects Classic GraphQL errors):
-
-   ```bash
-   gh api repos/{owner}/{repo}/issues/<pr-number>/labels \
-     -f "labels[]=New Browser Test Expectations" --method POST
-   ```
-
-8. **Report the result** to the user:
-   - PR URL
-   - Branch name
-   - Note that the GitHub Action will run automatically and commit
-     updated screenshots to the branch.
-
-## Notes
-
-- The `New Browser Test Expectations` label triggers the
-  `pr-update-playwright-expectations.yaml` workflow.
-- The workflow runs Playwright with `--update-snapshots`, commits results
-  back to the PR branch, then removes the label.
-- This is fire-and-forget — no need to wait for or monitor the Action.
-- Always return to the original branch/worktree state after pushing.

.claude/skills/writing-playwright-tests/SKILL.md

@@ -1,200 +0,0 @@
----
-name: writing-playwright-tests
-description: 'Writes Playwright e2e tests for ComfyUI_frontend. Use when creating, modifying, or debugging browser tests. Triggers on: playwright, e2e test, browser test, spec file.'
----
-
-# Writing Playwright Tests for ComfyUI_frontend
-
-## Golden Rules
-
-1. **ALWAYS look at existing tests first.** Search `browser_tests/tests/` for similar patterns before writing new tests.
-
-2. **ALWAYS read the fixture code.** The APIs are in `browser_tests/fixtures/` - read them directly instead of guessing.
-
-3. **Use premade JSON workflow assets** instead of building workflows programmatically.
-   - Assets live in `browser_tests/assets/`
-   - Load with `await comfyPage.workflow.loadWorkflow('feature/my_workflow')`
-   - Create new assets by starting with `browser_tests/assets/default.json` and manually editing the JSON to match your desired graph state
-
-## Vue Nodes vs LiteGraph: Decision Guide
-
-Choose based on **what you're testing**, not personal preference:
-
-| Testing...                                     | Use                              | Why                                      |
-| ---------------------------------------------- | -------------------------------- | ---------------------------------------- |
-| Vue-rendered node UI, DOM widgets, CSS states  | `comfyPage.vueNodes.*`           | Nodes are DOM elements, use locators     |
-| Canvas interactions, connections, legacy nodes | `comfyPage.nodeOps.*`            | Canvas-based, use coordinates/references |
-| Both in same test                              | Pick primary, minimize switching | Avoid confusion                          |
-
-**Vue Nodes requires explicit opt-in:**
-
-```typescript
-await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-await comfyPage.vueNodes.waitForNodes()
-```
-
-**Vue Node state uses CSS classes:**
-
-```typescript
-const BYPASS_CLASS = /before:bg-bypass\/60/
-await expect(node).toHaveClass(BYPASS_CLASS)
-```
-
-## Common Issues
-
-These are frequent causes of flaky tests - check them first, but investigate if they don't apply:
-
-| Symptom                            | Common Cause              | Typical Fix                                                                            |
-| ---------------------------------- | ------------------------- | -------------------------------------------------------------------------------------- |
-| Test passes locally, fails in CI   | Missing nextFrame()       | Add `await comfyPage.nextFrame()` after canvas ops (not needed after `loadWorkflow()`) |
-| Keyboard shortcuts don't work      | Missing focus             | Add `await comfyPage.canvas.click()` first                                             |
-| Double-click doesn't trigger       | Timing too fast           | Add `{ delay: 5 }` option                                                              |
-| Elements end up in wrong position  | Drag animation incomplete | Use `{ steps: 10 }` not `{ steps: 1 }`                                                 |
-| Widget value wrong after drag-drop | Upload incomplete         | Add `{ waitForUpload: true }`                                                          |
-| Test fails when run with others    | Test pollution            | Add `afterEach` with `resetView()`                                                     |
-| Local screenshots don't match CI   | Platform differences      | Screenshots are Linux-only, use PR label                                               |
-
-## Test Tags
-
-Add appropriate tags to every test:
-
-| Tag           | When to Use                               |
-| ------------- | ----------------------------------------- |
-| `@smoke`      | Quick essential tests                     |
-| `@slow`       | Tests > 10 seconds                        |
-| `@screenshot` | Visual regression tests                   |
-| `@canvas`     | Canvas interactions                       |
-| `@node`       | Node-related                              |
-| `@widget`     | Widget-related                            |
-| `@mobile`     | Mobile viewport (runs on Pixel 5 project) |
-| `@2x`         | HiDPI tests (runs on 2x scale project)    |
-
-```typescript
-test.describe('Feature', { tag: ['@screenshot', '@canvas'] }, () => {
-```
-
-## Retry Patterns
-
-**Never use `waitForTimeout`** - it's always wrong.
-
-| Pattern                  | Use Case                                             |
-| ------------------------ | ---------------------------------------------------- |
-| Auto-retrying assertions | `toBeVisible()`, `toHaveText()`, etc. (prefer these) |
-| `expect.poll()`          | Single value polling                                 |
-| `expect().toPass()`      | Multiple assertions that must all pass               |
-
-```typescript
-// Prefer auto-retrying assertions when possible
-await expect(node).toBeVisible()
-
-// Single value polling
-await expect.poll(() => widget.getValue(), { timeout: 2000 }).toBe(100)
-
-// Multiple conditions
-await expect(async () => {
-  expect(await node1.getValue()).toBe('foo')
-  expect(await node2.getValue()).toBe('bar')
-}).toPass({ timeout: 2000 })
-```
-
-## Screenshot Baselines
-
-- **Screenshots are Linux-only.** Don't commit local screenshots.
-- **To update baselines:** Add PR label `New Browser Test Expectations`
-- **Mask dynamic content:**
-  ```typescript
-  await expect(comfyPage.canvas).toHaveScreenshot('page.png', {
-    mask: [page.locator('.timestamp')]
-  })
-  ```
-
-## CI Debugging
-
-1. Download artifacts from failed CI run
-2. Extract and view trace: `npx playwright show-trace trace.zip`
-3. CI deploys HTML report to Cloudflare Pages (link in PR comment)
-4. Reproduce CI: `CI=true pnpm test:browser`
-5. Local runs: `pnpm test:browser:local`
-
-## Anti-Patterns
-
-Avoid these common mistakes:
-
-1. **Arbitrary waits** - Use retrying assertions instead
-
-   ```typescript
-   // ❌ await page.waitForTimeout(500)
-   // ✅ await expect(element).toBeVisible()
-   ```
-
-2. **Implementation-tied selectors** - Use test IDs or semantic selectors
-
-   ```typescript
-   // ❌ page.locator('div.container > button.btn-primary')
-   // ✅ page.getByTestId('submit-button')
-   ```
-
-3. **Missing nextFrame after canvas ops** - Canvas needs sync time
-
-   ```typescript
-   await node.drag({ x: 50, y: 50 })
-   await comfyPage.nextFrame() // Required
-   ```
-
-4. **Shared state between tests** - Tests must be independent
-   ```typescript
-   // ❌ let sharedData  // Outside test
-   // ✅ Define state inside each test
-   ```
-
-## Quick Start Template
-
-```typescript
-// Path depends on test file location - adjust '../' segments accordingly
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('FeatureName', { tag: ['@canvas'] }, () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.canvasOps.resetView()
-  })
-
-  test('should do something', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('myWorkflow')
-
-    const node = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    // ... test logic
-
-    await expect(comfyPage.canvas).toHaveScreenshot('expected.png')
-  })
-})
-```
-
-## Finding Patterns
-
-```bash
-# Find similar tests
-grep -r "KSampler" browser_tests/tests/
-
-# Find usage of a fixture method
-grep -r "loadWorkflow" browser_tests/tests/
-
-# Find tests with specific tag
-grep -r '@screenshot' browser_tests/tests/
-```
-
-## Key Files to Read
-
-| Purpose           | Path                                       |
-| ----------------- | ------------------------------------------ |
-| Main fixture      | `browser_tests/fixtures/ComfyPage.ts`      |
-| Helper classes    | `browser_tests/fixtures/helpers/`          |
-| Component objects | `browser_tests/fixtures/components/`       |
-| Test selectors    | `browser_tests/fixtures/selectors.ts`      |
-| Vue Node helpers  | `browser_tests/fixtures/VueNodeHelpers.ts` |
-| Test assets       | `browser_tests/assets/`                    |
-| Existing tests    | `browser_tests/tests/`                     |
-
-**Read the fixture code directly** - it's the source of truth for available methods.

.coderabbit.yaml

@@ -1,14 +0,0 @@
-issue_enrichment:
-  auto_enrich:
-    enabled: true
-reviews:
-  high_level_summary: false
-  auto_review:
-    drafts: true
-    ignore_title_keywords:
-      - '[release]'
-      - '[backport'
-    ignore_usernames:
-      - comfy-pr-bot
-      - github-actions
-      - github-actions[bot]

.gitattributes

@@ -1,5 +1,16 @@
-# Force all text files to use LF line endings
-* text=auto eol=lf
+# Default
+* text=auto
+
+# Force TS to LF to make the unixy scripts not break on Windows
+*.cjs text eol=lf
+*.js text eol=lf
+*.json text eol=lf
+*.mjs text eol=lf
+*.mts text eol=lf
+*.snap text eol=lf
+*.ts text eol=lf
+*.vue text eol=lf
+*.yaml text eol=lf
 
 # Generated files
 packages/registry-types/src/comfyRegistryTypes.ts linguist-generated=true

.github/AGENTS.md

@@ -13,11 +13,3 @@ This automated review performs comprehensive analysis:
 - Integration concerns
 
 For implementation details, see `.claude/commands/comprehensive-pr-review.md`.
-
-## GitHub Actions: Fork PR Permissions
-
-Fork PRs get a **read-only `GITHUB_TOKEN`** — no PR comments, no secret access, no pushing.
-
-Any workflow that needs write access must use the **two-workflow split**: a `pull_request`-triggered `ci-*.yaml` uploads artifacts (including PR metadata), then a `workflow_run`-triggered `pr-*.yaml` downloads them and posts comments with write permissions. See `ci-size-data` → `pr-size-report` or `ci-perf-report` → `pr-perf-report`. Use `.github/actions/post-pr-report-comment` for the comment step.
-
-Never write PR comments directly from `pull_request` workflows or use `pull_request_target` to run untrusted code.

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -10,7 +10,10 @@ body:
       options:
         - label: I am running the latest version of ComfyUI
           required: true
-        - label: I have custom nodes enabled
+        - label: I have searched existing issues to make sure this isn't a duplicate
+          required: true
+        - label: I have tested with all custom nodes disabled ([see how](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled))
+          required: true
 
   - type: textarea
     id: description

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -4,6 +4,13 @@ labels: []
 type: Feature
 
 body:
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the problem you're experiencing, and that it's not addressed in a recent build/commit.
+      options:
+        - label: I have searched the existing issues and checked the recent builds/commits
+          required: true
   - type: markdown
     attributes:
       value: |

.github/actions/comment-release-links/action.yaml

@@ -104,14 +104,14 @@ runs:
 
     - name: Find existing comment
       id: find
-      uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
+      uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
       with:
         issue-number: ${{ inputs.issue-number || github.event.pull_request.number }}
         comment-author: github-actions[bot]
         body-includes: ${{ steps.build.outputs.marker_search }}
 
     - name: Post or update comment
-      uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
+      uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
       with:
         issue-number: ${{ inputs.issue-number || github.event.pull_request.number }}
         comment-id: ${{ steps.find.outputs.comment-id }}

.github/actions/post-pr-report-comment/action.yaml

@@ -1,35 +0,0 @@
-name: Post PR Report Comment
-description: Reads a markdown report file and posts/updates a single idempotent comment on a PR.
-
-inputs:
-  pr-number:
-    description: PR number to comment on
-    required: true
-  report-file:
-    description: Path to the markdown report file
-    required: true
-  comment-marker:
-    description: HTML comment marker for idempotent matching
-    required: true
-  token:
-    description: GitHub token with pull-requests write permission
-    required: true
-
-runs:
-  using: composite
-  steps:
-    - name: Read report
-      id: report
-      uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-      with:
-        path: ${{ inputs.report-file }}
-
-    - name: Create or update PR comment
-      uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b # v3.2.0
-      with:
-        token: ${{ inputs.token }}
-        number: ${{ inputs.pr-number }}
-        body: |
-          ${{ steps.report.outputs.content }}
-          ${{ inputs.comment-marker }}
-        body-include: ${{ inputs.comment-marker }}

.github/actions/setup-comfyui-server/action.yml

@@ -16,7 +16,7 @@ runs:
 
     # Checkout ComfyUI repo, install the dev_tools node and start server
     - name: Checkout ComfyUI
-      uses: actions/checkout@v6
+      uses: actions/checkout@v5
       with:
         repository: 'comfyanonymous/ComfyUI'
         path: 'ComfyUI'
@@ -33,7 +33,7 @@ runs:
         fi
 
     - name: Setup Python
-      uses: actions/setup-python@v6
+      uses: actions/setup-python@v4
       with:
         python-version: '3.10'
 

.github/actions/setup-frontend/action.yml

@@ -12,17 +12,29 @@ runs:
 
     # Install pnpm, Node.js, build frontend
     - name: Install pnpm
-      uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+      uses: pnpm/action-setup@v4
       with:
         version: 10
 
     - name: Setup Node.js
-      uses: actions/setup-node@v6
+      uses: actions/setup-node@v4
       with:
         node-version: 'lts/*'
         cache: 'pnpm'
         cache-dependency-path: './pnpm-lock.yaml'
 
+    # Restore tool caches before running any build/lint operations
+    - name: Restore tool output cache
+      uses: actions/cache/restore@v4
+      with:
+        path: |
+          ./.cache
+          ./tsconfig.tsbuildinfo
+        key: tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-${{ hashFiles('./src/**/*.{ts,vue,js,mts}', './*.config.*') }}
+        restore-keys: |
+          tool-cache-${{ runner.os }}-${{ hashFiles('./pnpm-lock.yaml') }}-
+          tool-cache-${{ runner.os }}-
+
     - name: Install dependencies
       shell: bash
       run: pnpm install --frozen-lockfile

.github/actions/setup-playwright/action.yml

@@ -11,7 +11,7 @@ runs:
         echo "playwright-version=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT
 
     - name: Cache Playwright Browsers
-      uses: actions/cache@v5 # v5.0.2
+      uses: actions/cache@v4
       id: cache-playwright-browsers
       with:
         path: '~/.cache/ms-playwright'

.github/license-clarifications.json

@@ -1,3 +0,0 @@
-{
-  "posthog-js@*": { "licenses": "Apache-2.0" }
-}

.github/workflows/api-update-electron-api-types.yaml

@@ -13,17 +13,17 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Update electron types
@@ -36,7 +36,7 @@ jobs:
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'

.github/workflows/api-update-manager-api-types.yaml

@@ -18,24 +18,24 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Checkout ComfyUI-Manager repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           repository: Comfy-Org/ComfyUI-Manager
           path: ComfyUI-Manager
@@ -86,7 +86,7 @@ jobs:
 
       - name: Create Pull Request
         if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update ComfyUI-Manager API types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}'

.github/workflows/api-update-registry-api-types.yaml

@@ -17,24 +17,24 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Checkout comfy-api repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           repository: Comfy-Org/comfy-api
           path: comfy-api
@@ -87,7 +87,7 @@ jobs:
 
       - name: Create Pull Request
         if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -1,100 +0,0 @@
-name: 'CI: Dist Telemetry Scan'
-
-on:
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  scan:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
-        with:
-          version: 10
-
-      - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build project
-        run: pnpm build
-        env:
-          DISTRIBUTION: localhost
-
-      - name: Scan dist for GTM telemetry references
-        run: |
-          set -euo pipefail
-          echo '🔍 Scanning for Google Tag Manager references...'
-          if rg --no-ignore -n \
-            -g '*.html' \
-            -g '*.js' \
-            -e 'Google Tag Manager' \
-            -e '(?i)\bgtm\.js\b' \
-            -e '(?i)googletagmanager\.com/gtm\.js\\?id=' \
-            -e '(?i)googletagmanager\.com/ns\.html\\?id=' \
-            dist; then
-            echo '❌ ERROR: Google Tag Manager references found in dist assets!'
-            echo 'GTM must be properly tree-shaken from OSS builds.'
-            exit 1
-          fi
-          echo '✅ No GTM references found'
-
-      - name: Scan dist for Mixpanel telemetry references
-        run: |
-          set -euo pipefail
-          echo '🔍 Scanning for Mixpanel references...'
-          if rg --no-ignore -n \
-            -g '*.html' \
-            -g '*.js' \
-            -e '(?i)mixpanel\.init' \
-            -e '(?i)mixpanel\.identify' \
-            -e 'MixpanelTelemetryProvider' \
-            -e 'mp\.comfy\.org' \
-            -e 'mixpanel-browser' \
-            -e '(?i)mixpanel\.track\(' \
-            dist; then
-            echo '❌ ERROR: Mixpanel references found in dist assets!'
-            echo 'Mixpanel must be properly tree-shaken from OSS builds.'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
-            echo '2. Call telemetry via useTelemetry() hook'
-            echo '3. Use conditional dynamic imports behind isCloud checks'
-            exit 1
-          fi
-          echo '✅ No Mixpanel references found'
-
-      - name: Scan dist for PostHog telemetry references
-        run: |
-          set -euo pipefail
-          echo '🔍 Scanning for PostHog references...'
-          if rg --no-ignore -n \
-            -g '*.html' \
-            -g '*.js' \
-            -e '(?i)posthog\.init' \
-            -e '(?i)posthog\.capture' \
-            -e 'PostHogTelemetryProvider' \
-            -e 'ph\.comfy\.org' \
-            -e 'posthog-js' \
-            dist; then
-            echo '❌ ERROR: PostHog references found in dist assets!'
-            echo 'PostHog must be properly tree-shaken from OSS builds.'
-            exit 1
-          fi
-          echo '✅ No PostHog references found'

.github/workflows/ci-json-validation.yaml

@@ -13,6 +13,6 @@ jobs:
   json-lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
       - name: Validate JSON syntax
         run: ./scripts/cicd/check-json.sh

.github/workflows/ci-lint-format.yaml

@@ -18,21 +18,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout PR
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
-          token: ${{ !github.event.pull_request.head.repo.fork && secrets.PR_GH_TOKEN || github.token }}
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Detect browser_tests changes
-        id: changed-paths
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          filters: |
-            browser_tests:
-              - 'browser_tests/**'
+          version: 10
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
@@ -68,14 +70,10 @@ jobs:
           pnpm format:check
           pnpm knip
 
-      - name: Typecheck browser tests
-        if: steps.changed-paths.outputs.browser_tests == 'true'
-        run: pnpm typecheck:browser
-
       - name: Comment on PR about auto-fix
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
         continue-on-error: true
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             github.rest.issues.createComment({
@@ -88,7 +86,7 @@ jobs:
       - name: Comment on PR about manual fix needed
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
         continue-on-error: true
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             github.rest.issues.createComment({

.github/workflows/ci-oss-assets-validation.yaml

@@ -1,119 +0,0 @@
-name: 'CI: OSS Assets Validation'
-
-on:
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-  push:
-    branches: [main, dev*]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  validate-fonts:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
-        with:
-          version: 10
-
-      - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build project
-        run: pnpm build
-        env:
-          DISTRIBUTION: localhost
-
-      - name: Check for proprietary fonts in dist
-        run: |
-          set -euo pipefail
-          echo '🔍 Checking dist for proprietary ABCROM fonts...'
-
-          if [ ! -d "dist" ] || [ -z "$(ls -A dist)" ]; then
-            echo '❌ ERROR: dist/ directory missing or empty!'
-            exit 1
-          fi
-
-          # Check for ABCROM font files
-          if find dist/ -type f -iname '*abcrom*' \
-            \( -name '*.woff' -o -name '*.woff2' -o -name '*.ttf' -o -name '*.otf' \) \
-            -print -quit | grep -q .; then
-            echo ''
-            echo '❌ ERROR: Found proprietary ABCROM font files in dist!'
-            echo ''
-            find dist/ -type f -iname '*abcrom*' \
-              \( -name '*.woff' -o -name '*.woff2' -o -name '*.ttf' -o -name '*.otf' \)
-            echo ''
-            echo 'ABCROM fonts are proprietary and should not ship to OSS builds.'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Use conditional font loading based on isCloud'
-            echo '2. Ensure fonts are dynamically imported, not bundled'
-            echo '3. Check vite config for font handling'
-            exit 1
-          fi
-
-          echo '✅ No proprietary fonts found in dist'
-
-  validate-licenses:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
-        with:
-          version: 10
-
-      - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Validate production dependency licenses
-        run: |
-          set -euo pipefail
-          echo '🔍 Checking production dependency licenses...'
-
-          # Use license-checker-rseidelsohn (actively maintained fork, handles monorepos)
-          # Exclude internal @comfyorg packages from license check
-          # Run in if condition to capture exit code
-          if npx license-checker-rseidelsohn@4 \
-            --production \
-            --summary \
-            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
-            --clarificationsFile .github/license-clarifications.json \
-            --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
-            echo ''
-            echo '✅ All production dependency licenses are approved!'
-          else
-            echo ''
-            echo '❌ ERROR: Found dependencies with non-approved licenses!'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Check the license of the problematic package'
-            echo '2. Find an alternative package with an approved license'
-            echo '3. If the license is safe and OSI-approved, add it to the --onlyAllow list'
-            echo ''
-            echo 'For more info on OSI-approved licenses:'
-            echo 'https://opensource.org/licenses'
-            exit 1
-          fi

.github/workflows/ci-perf-report.yaml

@@ -1,70 +0,0 @@
-name: 'CI: Performance Report'
-
-on:
-  push:
-    branches: [main, core/*]
-    paths-ignore: ['**/*.md']
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
-
-concurrency:
-  group: perf-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  perf-tests:
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-    permissions:
-      contents: read
-      packages: read
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
-
-      - name: Run performance tests
-        id: perf
-        continue-on-error: true
-        run: pnpm exec playwright test --project=performance --workers=1 --repeat-each=3
-
-      - name: Upload perf metrics
-        if: always()
-        uses: actions/upload-artifact@v6
-        with:
-          name: perf-metrics
-          path: test-results/perf-metrics.json
-          retention-days: 30
-          if-no-files-found: warn
-
-      - name: Save PR metadata
-        if: github.event_name == 'pull_request'
-        run: |
-          mkdir -p temp/perf-meta
-          echo "${{ github.event.number }}" > temp/perf-meta/number.txt
-          echo "${{ github.event.pull_request.base.ref }}" > temp/perf-meta/base.txt
-
-      - name: Upload PR metadata
-        if: github.event_name == 'pull_request'
-        uses: actions/upload-artifact@v6
-        with:
-          name: perf-meta
-          path: temp/perf-meta/

.github/workflows/ci-python-validation.yaml

@@ -16,10 +16,10 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v5
         with:
           python-version: '3.11'
 

.github/workflows/ci-size-data.yaml

@@ -17,10 +17,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+        with:
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Build project
         run: pnpm build
@@ -35,7 +46,7 @@ jobs:
           echo ${{ github.base_ref }} > ./temp/size/base.txt
 
       - name: Upload size data
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: size-data
           path: temp/size

.github/workflows/ci-tests-e2e-forks.yaml

@@ -6,6 +6,9 @@ on:
     workflows: ['CI: Tests E2E']
     types: [requested, completed]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -28,11 +31,11 @@ jobs:
           echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Get PR Number
         id: pr
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             const { data: prs } = await github.rest.pulls.list({
@@ -60,11 +63,12 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}

.github/workflows/ci-tests-e2e.yaml

@@ -4,11 +4,9 @@ name: 'CI: Tests E2E'
 on:
   push:
     branches: [main, master, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
-  workflow_dispatch:
+    branches-ignore:
+      [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -19,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
         with:
@@ -27,7 +25,7 @@ jobs:
 
       # Upload only built dist/ (containerized test jobs will pnpm install without cache)
       - name: Upload built frontend
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: frontend-dist
           path: dist/
@@ -39,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 60
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.10
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -53,9 +51,9 @@ jobs:
         shardTotal: [8]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Download built frontend
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: frontend-dist
           path: dist/
@@ -74,7 +72,7 @@ jobs:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
 
       - name: Upload blob report
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: blob-report-chromium-${{ matrix.shardIndex }}
@@ -87,7 +85,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.10
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -100,9 +98,9 @@ jobs:
         browser: [chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Download built frontend
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: frontend-dist
           path: dist/
@@ -130,7 +128,7 @@ jobs:
           pnpm exec playwright merge-reports --reporter=json ./blob-report
 
       - name: Upload Playwright report
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report-${{ matrix.browser }}
@@ -143,13 +141,16 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ !cancelled() }}
     steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Download blob reports
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           path: ./all-blob-reports
           pattern: blob-report-chromium-*
@@ -164,7 +165,7 @@ jobs:
           pnpm dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
 
       - name: Upload HTML report
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: playwright-report-chromium
           path: ./playwright-report/
@@ -182,7 +183,11 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
+
+      - name: Get start time
+        id: start-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
 
       - name: Post starting comment
         env:
@@ -192,7 +197,8 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting"
+            "starting" \
+            "${{ steps.start-time.outputs.time }}"
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:
@@ -204,10 +210,10 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Download all playwright reports
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           pattern: playwright-report-*
           path: reports

.github/workflows/ci-tests-storybook-forks.yaml

@@ -6,6 +6,9 @@ on:
     workflows: ['CI: Tests Storybook']
     types: [requested, completed]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -28,11 +31,11 @@ jobs:
           echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Get PR Number
         id: pr
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             const { data: prs } = await github.rest.pulls.list({
@@ -60,11 +63,12 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
 
       - name: Download and Deploy Storybook
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}

.github/workflows/ci-tests-storybook.yaml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Post starting comment
         env:
@@ -24,7 +24,8 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting"
+            "starting" \
+            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:
@@ -35,10 +36,21 @@ jobs:
       workflow-url: ${{ steps.workflow-url.outputs.url }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build Storybook
         run: pnpm build-storybook
@@ -57,7 +69,7 @@ jobs:
 
       - name: Upload Storybook build
         if: success() && github.event.pull_request.head.repo.fork == false
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: storybook-static
           path: storybook-static/
@@ -74,16 +86,27 @@ jobs:
       chromatic-storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0 # Required for Chromatic baseline
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build Storybook and run Chromatic
         id: chromatic
-        uses: chromaui/action@07791f8243f4cb2698bf4d00426baf4b2d1cb7e0 # v13.3.5
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: build-storybook
@@ -113,11 +136,11 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Download Storybook build
         if: needs.storybook-build.outputs.conclusion == 'success'
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: storybook-static
           path: storybook-static
@@ -147,7 +170,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Update comment with Chromatic URLs
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';

.github/workflows/ci-tests-unit.yaml

@@ -4,10 +4,8 @@ name: 'CI: Tests Unit'
 on:
   push:
     branches: [main, master, dev*, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -18,10 +16,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Run Vitest tests
         run: pnpm test:unit

.github/workflows/ci-validate-action-pins.yaml

@@ -1,21 +0,0 @@
-name: Validate Action SHA Pins
-
-on:
-  pull_request:
-    paths:
-      - '.github/workflows/**'
-      - '.github/actions/**'
-      - '.pinact.yaml'
-
-permissions:
-  contents: read
-
-jobs:
-  validate-pins:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: suzuki-shunsuke/pinact-action@3d49c6412901042473ffa78becddab1aea46bbea # v1.3.1
-        with:
-          skip_push: 'true'

.github/workflows/ci-yaml-validation.yaml

@@ -17,10 +17,10 @@ jobs:
   yaml-lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v5
         with:
           python-version: '3.x'
 

.github/workflows/cloud-backport-tag.yaml

@@ -18,12 +18,12 @@ jobs:
 
     steps:
       - name: Checkout merge commit
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.pull_request.merge_commit_sha }}
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
           node-version-file: '.nvmrc'
 

.github/workflows/cloud-dispatch-build.yaml

@@ -1,69 +0,0 @@
----
-# Dispatches a frontend-asset-build event to the cloud repo on push to
-# cloud/* branches and main. The cloud repo handles the actual build,
-# GCS upload, and secret management (Sentry, Algolia, GCS creds).
-#
-# This is fire-and-forget — it does NOT wait for the cloud workflow to
-# complete. Status is visible in the cloud repo's Actions tab.
-
-name: Cloud Frontend Build Dispatch
-
-on:
-  push:
-    branches:
-      - 'cloud/*'
-      - 'main'
-  pull_request:
-    types: [labeled, synchronize]
-  workflow_dispatch:
-
-permissions: {}
-
-concurrency:
-  group: cloud-dispatch-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  dispatch:
-    # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch for preview labels.
-    # - labeled: fires when a label is added; check the added label name.
-    # - synchronize: fires on push; check existing labels on the PR.
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      (github.event_name != 'pull_request' ||
-       (github.event.action == 'labeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-       (github.event.action == 'synchronize' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
-    runs-on: ubuntu-latest
-    steps:
-      - name: Build client payload
-        id: payload
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          PR_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-          PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
-        run: |
-          if [ "${EVENT_NAME}" = "pull_request" ]; then
-            REF="${PR_HEAD_SHA}"
-            BRANCH="${PR_HEAD_REF}"
-          else
-            REF="${GITHUB_SHA}"
-            BRANCH="${GITHUB_REF_NAME}"
-          fi
-          payload="$(jq -nc \
-            --arg ref "${REF}" \
-            --arg branch "${BRANCH}" \
-            '{ref: $ref, branch: $branch}')"
-          echo "json=${payload}" >> "${GITHUB_OUTPUT}"
-
-      - name: Dispatch to cloud repo
-        uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4.0.1
-        with:
-          token: ${{ secrets.CLOUD_DISPATCH_TOKEN }}
-          repository: Comfy-Org/cloud
-          event-type: frontend-asset-build
-          client-payload: ${{ steps.payload.outputs.json }}

.github/workflows/i18n-update-core.yaml

@@ -16,9 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
-        with:
-          token: ${{ secrets.PR_GH_TOKEN }}
+        uses: actions/checkout@v5
 
       # Setup playwright environment
       - name: Setup ComfyUI Frontend

.github/workflows/i18n-update-custom-nodes.yaml

@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       # Setup playwright environment with custom node repository
       - name: Setup ComfyUI Server (without launching)
@@ -36,7 +36,7 @@ jobs:
 
       # Install the custom node repository
       - name: Checkout custom node repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           repository: ${{ inputs.owner }}/${{ inputs.repository }}
           path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
@@ -113,7 +113,7 @@ jobs:
           git commit -m "Update locales"
 
       - name: Install SSH key For PUSH
-        uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4 # v2.7.0
+        uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4
         with:
           # PR private key from action server
           key: ${{ secrets.PR_SSH_PRIVATE_KEY }}

.github/workflows/i18n-update-nodes.yaml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       # Setup playwright environment
       - name: Setup ComfyUI Server (and start)
         uses: ./.github/actions/setup-comfyui-server
@@ -40,7 +40,7 @@ jobs:
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: 'Update locales for node definitions'

.github/workflows/pr-backport.yaml

@@ -64,7 +64,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
 

.github/workflows/pr-claude-review.yaml

@@ -23,20 +23,20 @@ jobs:
     timeout-minutes: 30
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
           ref: refs/pull/${{ github.event.pull_request.number }}/head
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools
@@ -44,7 +44,7 @@ jobs:
           pnpm install -g typescript @vue/compiler-sfc
 
       - name: Run Claude PR Review
-        uses: anthropics/claude-code-action@ff34ce0ff04a470bd3fa56c1ef391c8f1c19f8e9 # v1.0.38
+        uses: anthropics/claude-code-action@v1.0.6
         with:
           label_trigger: 'claude-review'
           prompt: |

.github/workflows/pr-perf-report.yaml

@@ -1,102 +0,0 @@
-name: 'PR: Performance Report'
-
-on:
-  workflow_run:
-    workflows: ['CI: Performance Report']
-    types:
-      - completed
-
-permissions:
-  contents: read
-  pull-requests: write
-  issues: write
-
-jobs:
-  comment:
-    runs-on: ubuntu-latest
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      github.event.workflow_run.event == 'pull_request' &&
-      github.event.workflow_run.conclusion == 'success'
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Setup Node
-        uses: actions/setup-node@v6
-        with:
-          node-version-file: '.nvmrc'
-
-      - name: Download PR metadata
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          name: perf-meta
-          run_id: ${{ github.event.workflow_run.id }}
-          path: temp/perf-meta/
-
-      - name: Resolve and validate PR metadata
-        id: pr-meta
-        uses: actions/github-script@v8
-        with:
-          script: |
-            const fs = require('fs');
-            const artifactPr = Number(fs.readFileSync('temp/perf-meta/number.txt', 'utf8').trim());
-            const artifactBase = fs.readFileSync('temp/perf-meta/base.txt', 'utf8').trim();
-
-            // Resolve PR from trusted workflow context
-            let pr = context.payload.workflow_run.pull_requests?.[0];
-            if (!pr) {
-              const { data: prs } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                commit_sha: context.payload.workflow_run.head_sha,
-              });
-              pr = prs.find(p => p.state === 'open');
-            }
-
-            if (!pr) {
-              core.setFailed('Unable to resolve PR from workflow_run context.');
-              return;
-            }
-
-            if (Number(pr.number) !== artifactPr) {
-              core.setFailed(`Artifact PR number (${artifactPr}) does not match trusted context (${pr.number}).`);
-              return;
-            }
-
-            const trustedBase = pr.base?.ref;
-            if (!trustedBase || artifactBase !== trustedBase) {
-              core.setFailed(`Artifact base (${artifactBase}) does not match trusted context (${trustedBase}).`);
-              return;
-            }
-
-            core.setOutput('number', String(pr.number));
-            core.setOutput('base', trustedBase);
-
-      - name: Download PR perf metrics
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          name: perf-metrics
-          run_id: ${{ github.event.workflow_run.id }}
-          path: test-results/
-
-      - name: Download baseline perf metrics
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          branch: ${{ steps.pr-meta.outputs.base }}
-          workflow: ci-perf-report.yaml
-          event: push
-          name: perf-metrics
-          path: temp/perf-baseline/
-          if_no_artifact_found: warn
-
-      - name: Generate perf report
-        run: npx --yes tsx scripts/perf-report.ts > perf-report.md
-
-      - name: Post PR comment
-        uses: ./.github/actions/post-pr-report-comment
-        with:
-          pr-number: ${{ steps.pr-meta.outputs.number }}
-          report-file: ./perf-report.md
-          comment-marker: '<!-- COMFYUI_FRONTEND_PERF -->'
-          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-size-report.yaml

@@ -33,88 +33,51 @@ jobs:
         github.event_name == 'workflow_dispatch'
       )
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.1.0
+        with:
+          version: 10
+
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24.x'
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Download size data
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        uses: dawidd6/action-download-artifact@v11
         with:
           name: size-data
           run_id: ${{ github.event_name == 'workflow_dispatch' && inputs.run_id || github.event.workflow_run.id }}
           path: temp/size
 
-      - name: Resolve and validate PR metadata
-        id: pr-meta
-        uses: actions/github-script@v8
-        with:
-          script: |
-            const fs = require('fs');
+      - name: Set PR number
+        id: pr-number
+        run: |
+          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
+            echo "content=${{ inputs.pr_number }}" >> $GITHUB_OUTPUT
+          else
+            echo "content=$(cat temp/size/number.txt)" >> $GITHUB_OUTPUT
+          fi
 
-            // workflow_dispatch: validate artifact metadata against API-resolved PR
-            if (context.eventName === 'workflow_dispatch') {
-              const pullNumber = Number('${{ inputs.pr_number }}');
-              const { data: dispatchPr } = await github.rest.pulls.get({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                pull_number: pullNumber,
-              });
-
-              const artifactPr = Number(fs.readFileSync('temp/size/number.txt', 'utf8').trim());
-              const artifactBase = fs.readFileSync('temp/size/base.txt', 'utf8').trim();
-
-              if (artifactPr !== dispatchPr.number) {
-                core.setFailed(`Artifact PR number (${artifactPr}) does not match dispatch PR (${dispatchPr.number}).`);
-                return;
-              }
-              if (artifactBase !== dispatchPr.base.ref) {
-                core.setFailed(`Artifact base (${artifactBase}) does not match dispatch PR base (${dispatchPr.base.ref}).`);
-                return;
-              }
-
-              core.setOutput('number', String(dispatchPr.number));
-              core.setOutput('base', dispatchPr.base.ref);
-              return;
-            }
-
-            // workflow_run: validate artifact metadata against trusted context
-            const artifactPr = Number(fs.readFileSync('temp/size/number.txt', 'utf8').trim());
-            const artifactBase = fs.readFileSync('temp/size/base.txt', 'utf8').trim();
-
-            let pr = context.payload.workflow_run.pull_requests?.[0];
-            if (!pr) {
-              const { data: prs } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                commit_sha: context.payload.workflow_run.head_sha,
-              });
-              pr = prs.find(p => p.state === 'open');
-            }
-
-            if (!pr) {
-              core.setFailed('Unable to resolve PR from workflow_run context.');
-              return;
-            }
-
-            if (Number(pr.number) !== artifactPr) {
-              core.setFailed(`Artifact PR number (${artifactPr}) does not match trusted context (${pr.number}).`);
-              return;
-            }
-
-            const trustedBase = pr.base?.ref;
-            if (!trustedBase || artifactBase !== trustedBase) {
-              core.setFailed(`Artifact base (${artifactBase}) does not match trusted context (${trustedBase}).`);
-              return;
-            }
-
-            core.setOutput('number', String(pr.number));
-            core.setOutput('base', trustedBase);
+      - name: Set base branch
+        id: pr-base
+        run: |
+          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
+            echo "content=main" >> $GITHUB_OUTPUT
+          else
+            echo "content=$(cat temp/size/base.txt)" >> $GITHUB_OUTPUT
+          fi
 
       - name: Download previous size data
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        uses: dawidd6/action-download-artifact@v11
         with:
-          branch: ${{ steps.pr-meta.outputs.base }}
+          branch: ${{ steps.pr-base.outputs.content }}
           workflow: ci-size-data.yaml
           event: push
           name: size-data
@@ -124,10 +87,18 @@ jobs:
       - name: Generate size report
         run: node scripts/size-report.js > size-report.md
 
-      - name: Post PR comment
-        uses: ./.github/actions/post-pr-report-comment
+      - name: Read size report
+        id: size-report
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./size-report.md
+
+      - name: Create or update PR comment
+        uses: actions-cool/maintain-one-comment@v3
         with:
-          pr-number: ${{ steps.pr-meta.outputs.number }}
-          report-file: ./size-report.md
-          comment-marker: '<!-- COMFYUI_FRONTEND_SIZE -->'
           token: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ steps.pr-number.outputs.content }}
+          body: |
+            ${{ steps.size-report.outputs.content }}
+            <!-- COMFYUI_FRONTEND_SIZE -->
+          body-include: '<!-- COMFYUI_FRONTEND_SIZE -->'

.github/workflows/pr-update-playwright-expectations.yaml

@@ -38,7 +38,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Find Update Comment
-        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
+        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad
         id: 'find-update-comment'
         with:
           issue-number: ${{ steps.pr-info.outputs.pr-number }}
@@ -46,7 +46,7 @@ jobs:
           body-includes: 'Updating Playwright Expectations'
 
       - name: Add Starting Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
         with:
           comment-id: ${{ steps.find-update-comment.outputs.comment-id }}
           issue-number: ${{ steps.pr-info.outputs.pr-number }}
@@ -56,7 +56,7 @@ jobs:
           reactions: eyes
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ steps.pr-info.outputs.branch }}
       - name: Setup frontend
@@ -66,7 +66,7 @@ jobs:
 
       # Upload built dist/ (containerized test jobs will pnpm install without cache)
       - name: Upload built frontend
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: frontend-dist
           path: dist/
@@ -77,7 +77,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.10
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -91,11 +91,11 @@ jobs:
         shardTotal: [4]
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ needs.setup.outputs.branch }}
       - name: Download built frontend
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: frontend-dist
           path: dist/
@@ -109,7 +109,7 @@ jobs:
       # Run sharded tests with snapshot updates (browsers pre-installed in container)
       - name: Update snapshots (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright-tests
-        run: pnpm exec playwright test --update-snapshots --grep @screenshot --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        run: pnpm exec playwright test --update-snapshots --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         continue-on-error: true
 
       - name: Stage changed snapshot files
@@ -149,7 +149,7 @@ jobs:
 
       # Upload ONLY the changed files from this shard
       - name: Upload changed snapshots
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         if: steps.changed-snapshots.outputs.has-changes == 'true'
         with:
           name: snapshots-shard-${{ matrix.shardIndex }}
@@ -157,7 +157,7 @@ jobs:
           retention-days: 1
 
       - name: Upload test report
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report-shard-${{ matrix.shardIndex }}
@@ -170,18 +170,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ needs.setup.outputs.branch }}
-          token: ${{ secrets.PR_GH_TOKEN }}
 
       # Download all changed snapshot files from shards
       - name: Download snapshot artifacts
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           pattern: snapshots-shard-*
           path: ./downloaded-snapshots
-          merge-multiple: true
+          merge-multiple: false
 
       - name: List downloaded files
         run: |
@@ -207,13 +206,13 @@ jobs:
           echo "MERGING CHANGED SNAPSHOTS"
           echo "=========================================="
 
-          # Check if any artifacts were downloaded (merge-multiple puts files directly in path)
+          # Check if any artifacts were downloaded
           if [ ! -d "./downloaded-snapshots" ]; then
             echo "No snapshot artifacts to merge"
             echo "=========================================="
             echo "MERGE COMPLETE"
             echo "=========================================="
-            echo "Files merged: 0"
+            echo "Shards merged: 0"
             exit 0
           fi
 
@@ -223,29 +222,37 @@ jobs:
             exit 1
           fi
 
-          # Count files to merge
-          file_count=$(find ./downloaded-snapshots -type f | wc -l)
+          merged_count=0
 
-          if [ "$file_count" -eq 0 ]; then
-            echo "No snapshot files found in downloaded artifacts"
-            echo "=========================================="
-            echo "MERGE COMPLETE"
-            echo "=========================================="
-            echo "Files merged: 0"
-            exit 0
-          fi
+          # For each shard's changed files, copy them directly
+          for shard_dir in ./downloaded-snapshots/snapshots-shard-*/; do
+            if [ ! -d "$shard_dir" ]; then
+              continue
+            fi
 
-          echo "Merging $file_count snapshot file(s)..."
+            shard_name=$(basename "$shard_dir")
+            file_count=$(find "$shard_dir" -type f | wc -l)
 
-          # Copy all files directly, preserving directory structure
-          # With merge-multiple: true, files are directly in ./downloaded-snapshots/ without shard subdirs
-          cp -v -r ./downloaded-snapshots/* browser_tests/ 2>&1 | sed 's/^/  /'
+            if [ "$file_count" -eq 0 ]; then
+              echo "  $shard_name: no files"
+              continue
+            fi
+
+            echo "Processing $shard_name ($file_count file(s))..."
+
+            # Copy files directly, preserving directory structure
+            # Since files are already in correct structure (no browser_tests/ prefix), just copy them all
+            cp -v -r "$shard_dir"* browser_tests/ 2>&1 | sed 's/^/  /'
+
+            merged_count=$((merged_count + 1))
+            echo "  ✓ Merged"
+            echo ""
+          done
 
-          echo ""
           echo "=========================================="
           echo "MERGE COMPLETE"
           echo "=========================================="
-          echo "Files merged: $file_count"
+          echo "Shards merged: $merged_count"
 
       - name: Show changes
         run: |
@@ -294,7 +301,7 @@ jobs:
           echo "✓ Commit and push successful"
 
       - name: Add Done Reaction
-        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
         if: github.event_name == 'issue_comment' && steps.commit.outputs.has-changes == 'true'
         with:
           comment-id: ${{ needs.setup.outputs.comment-id }}

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -20,15 +20,15 @@ jobs:
       dist_tag: ${{ steps.dist.outputs.dist_tag }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.pull_request.merge_commit_sha }}
           persist-credentials: false
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
 
       - name: Read desktop-ui version
         id: get_version
@@ -71,7 +71,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout merge commit
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.pull_request.merge_commit_sha }}
           fetch-depth: 2

.github/workflows/publish-desktop-ui.yaml

@@ -77,21 +77,21 @@ jobs:
           fi
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ steps.resolve_ref.outputs.ref }}
           fetch-depth: 1
           persist-credentials: false
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-biweekly-comfyui.yaml

@@ -61,13 +61,13 @@ jobs:
 
     steps:
       - name: Checkout ComfyUI_frontend
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
           path: frontend
 
       - name: Checkout ComfyUI (sparse)
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           repository: Comfy-Org/ComfyUI
           sparse-checkout: |
@@ -75,14 +75,14 @@ jobs:
           path: comfyui
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version-file: 'frontend/.nvmrc'
+          node-version: lts/*
 
       - name: Install dependencies
         working-directory: frontend
@@ -169,7 +169,7 @@ jobs:
 
     steps:
       - name: Checkout ComfyUI fork
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           repository: ${{ inputs.comfyui_fork || 'Comfy-Org/ComfyUI' }}
           token: ${{ secrets.PR_GH_TOKEN }}

.github/workflows/release-branch-create.yaml

@@ -18,15 +18,15 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
           token: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
 
       - name: Check version bump type
         id: check_version

.github/workflows/release-draft-create.yaml

@@ -19,14 +19,14 @@ jobs:
       is_prerelease: ${{ steps.check_prerelease.outputs.is_prerelease }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Get current version
@@ -50,43 +50,37 @@ jobs:
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
           ENABLE_MINIFY: 'true'
           USE_PROD_CONFIG: 'true'
-          IS_NIGHTLY: ${{  case(github.ref == 'refs/heads/main', 'true', 'false') }}
         run: |
           pnpm install --frozen-lockfile
-
-          # Desktop-specific release artifact with desktop distribution flags.
-          DISTRIBUTION=desktop pnpm build
-          pnpm zipdist ./dist ./dist-desktop.zip
-
-          # Default release artifact for core/PyPI.
-          NX_SKIP_NX_CACHE=true pnpm build
+          pnpm build
           pnpm zipdist
       - name: Upload dist artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: dist-files
           path: |
             dist/
             dist.zip
-            dist-desktop.zip
 
   draft_release:
     needs: build
     runs-on: ubuntu-latest
     steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
       - name: Download dist artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: dist-files
       - name: Create release
         id: create_release
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: >-
+          softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           files: |
             dist.zip
-            dist-desktop.zip
           tag_name: v${{ needs.build.outputs.version }}
           target_commitish: ${{ github.event.pull_request.base.ref }}
           make_latest: >-
@@ -104,13 +98,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Download dist artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: dist-files
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v4
         with:
           python-version: '3.x'
       - name: Install build dependencies
@@ -125,7 +119,8 @@ jobs:
         env:
           COMFYUI_FRONTEND_VERSION: ${{ needs.build.outputs.version }}
       - name: Publish pypi package
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        uses: >-
+          pypa/gh-action-pypi-publish@76f52bc884231f62b9a034ebfe128415bbaabdfc
         with:
           password: ${{ secrets.PYPI_TOKEN }}
           packages-dir: comfyui_frontend_package/dist
@@ -152,7 +147,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout merge commit
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.pull_request.merge_commit_sha }}
           fetch-depth: 2

.github/workflows/release-npm-types.yaml

@@ -69,20 +69,20 @@ jobs:
           fi
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ steps.resolve_ref.outputs.ref }}
           fetch-depth: 1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-pypi-dev.yaml

@@ -15,14 +15,14 @@ jobs:
       version: ${{ steps.current_version.outputs.version }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Get current version
@@ -40,7 +40,7 @@ jobs:
           pnpm build
           pnpm zipdist
       - name: Upload dist artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: dist-files
           path: |
@@ -52,13 +52,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Download dist artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: dist-files
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v4
         with:
           python-version: '3.x'
       - name: Install build dependencies
@@ -73,7 +73,7 @@ jobs:
         env:
           COMFYUI_FRONTEND_VERSION: ${{ format('{0}.dev{1}', needs.build.outputs.version, inputs.devVersion) }}
       - name: Publish pypi package
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        uses: pypa/gh-action-pypi-publish@76f52bc884231f62b9a034ebfe128415bbaabdfc
         with:
           password: ${{ secrets.PYPI_TOKEN }}
           packages-dir: comfyui_frontend_package/dist

.github/workflows/release-version-bump.yaml

@@ -65,7 +65,7 @@ jobs:
 
       - name: Close stale nightly version bump PRs
         if: github.event_name == 'schedule'
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           github-token: ${{ github.token }}
           script: |
@@ -118,7 +118,7 @@ jobs:
             core.info(`Closed ${closed.length} stale PR(s).`)
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ steps.prepared-inputs.outputs.branch }}
           fetch-depth: 0
@@ -142,14 +142,14 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
 
       - name: Bump version
         id: bump-version
@@ -180,7 +180,7 @@ jobs:
           echo "capitalised=${CAPITALISED_TYPE@u}" >> "$GITHUB_OUTPUT"
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[release] Increment version to ${{ steps.bump-version.outputs.NEW_VERSION }}'

.github/workflows/version-bump-desktop-ui.yaml

@@ -29,7 +29,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           ref: ${{ github.event.inputs.branch }}
           fetch-depth: 0
@@ -51,14 +51,14 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
           cache: 'pnpm'
 
       - name: Bump desktop-ui version
@@ -79,7 +79,7 @@ jobs:
           echo "capitalised=${VERSION_TYPE@u}" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[release] Increment desktop-ui to ${{ steps.bump-version.outputs.NEW_VERSION }}'

.github/workflows/weekly-docs-check.yaml

@@ -22,20 +22,20 @@ jobs:
     timeout-minutes: 45
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
-          fetch-depth: 50
+          fetch-depth: 0
           ref: main
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools
@@ -49,7 +49,7 @@ jobs:
           fi
 
       - name: Run Claude Documentation Review
-        uses: anthropics/claude-code-action@ff34ce0ff04a470bd3fa56c1ef391c8f1c19f8e9 # v1.0.38
+        uses: anthropics/claude-code-action@v1.0.6
         with:
           prompt: |
             Is all documentation still 100% accurate?
@@ -130,7 +130,7 @@ jobs:
 
       - name: Create or Update Pull Request
         if: steps.check_changes.outputs.has_changes == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: 'docs: weekly documentation accuracy update'

.gitignore

@@ -64,7 +64,6 @@ browser_tests/local/
 dist.zip
 
 /temp/
-/tmp/
 
 # Generated JSON Schemas
 /schemas/
@@ -97,5 +96,3 @@ vitest.config.*.timestamp*
 
 # Weekly docs check output
 /output.txt
-
-.amp

.oxlintrc.json

@@ -35,7 +35,7 @@
       }
     ],
     "no-control-regex": "off",
-    "no-eval": "error",
+    "no-eval": "off",
     "no-redeclare": "error",
     "no-restricted-imports": [
       "error",
@@ -60,6 +60,11 @@
           {
             "name": "primevue/sidebar",
             "message": "Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from 'primevue/drawer'"
+          },
+          {
+            "name": "@/i18n--to-enable",
+            "importNames": ["st", "t", "te", "d"],
+            "message": "Don't import `@/i18n` directly, prefer `useI18n()`"
           }
         ]
       }
@@ -96,7 +101,6 @@
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
     "typescript/no-floating-promises": "error",
-    "typescript/no-explicit-any": "error",
     "vue/no-import-compiler-macros": "error",
     "vue/no-dupe-keys": "error"
   },
@@ -106,17 +110,6 @@
       "rules": {
         "no-console": "allow"
       }
-    },
-    {
-      "files": ["browser_tests/**/*.ts"],
-      "rules": {
-        "typescript/no-explicit-any": "error",
-        "no-async-promise-executor": "error",
-        "no-control-regex": "error",
-        "no-useless-rename": "error",
-        "no-unused-private-class-members": "error",
-        "unicorn/no-empty-file": "error"
-      }
     }
   ]
 }

.pinact.yaml

@@ -1,24 +0,0 @@
-# pinact configuration
-# https://github.com/suzuki-shunsuke/pinact
-version: 3
-
-files:
-  - pattern: .github/workflows/*.yaml
-  - pattern: .github/actions/**/*.yaml
-
-# Actions that don't need SHA pinning (official GitHub actions are trusted)
-ignore_actions:
-  - name: actions/cache
-    ref: v5
-  - name: actions/checkout
-    ref: v6
-  - name: actions/setup-node
-    ref: v6
-  - name: actions/setup-python
-    ref: v6
-  - name: actions/upload-artifact
-    ref: v6
-  - name: actions/download-artifact
-    ref: v7
-  - name: actions/github-script
-    ref: v8

.storybook/main.ts

@@ -98,10 +98,12 @@ const config: StorybookConfig = {
       },
       build: {
         rolldownOptions: {
+          experimental: {
+            strictExecutionOrder: true
+          },
           treeshake: false,
           output: {
-            keepNames: true,
-            strictExecutionOrder: true
+            keepNames: true
           },
           onwarn: (warning, warn) => {
             // Suppress specific warnings

.storybook/preview.ts

@@ -90,6 +90,7 @@ const preview: Preview = {
           { value: 'light', icon: 'sun', title: 'Light' },
           { value: 'dark', icon: 'moon', title: 'Dark' }
         ],
+        showName: true,
         dynamicTitle: true
       }
     }

.stylelintrc.json

@@ -40,27 +40,26 @@
     "block-no-empty": true,
     "no-descending-specificity": null,
     "no-duplicate-at-import-rules": true,
-    "at-rule-disallowed-list": ["apply"],
     "at-rule-no-unknown": [
       true,
       {
         "ignoreAtRules": [
           "tailwind",
+          "apply",
           "layer",
           "config",
           "theme",
           "reference",
           "plugin",
           "custom-variant",
-          "utility",
-          "source"
+          "utility"
         ]
       }
     ],
     "function-no-unknown": [
       true,
       {
-        "ignoreFunctions": ["theme", "v-bind", "from-folder", "from-json"]
+        "ignoreFunctions": ["theme", "v-bind"]
       }
     ]
   },

.yamllint

@@ -8,6 +8,3 @@ rules:
   line-length: disable
   document-start: disable
   truthy: disable
-  comments: 
-    min-spaces-from-content: 1
-  

AGENTS.md

@@ -21,7 +21,7 @@ See @docs/guidance/\*.md for file-type-specific conventions (auto-loaded by glob
 - i18n: `src/i18n.ts`,
 - Entry Point: `src/main.ts`.
 - Tests:
-  - unit/component in `src/**/*.test.ts`
+  - unit/component in `tests-ui/` and `src/**/*.test.ts`
   - E2E (Playwright) in `browser_tests/**/*.spec.ts`
 - Public assets: `public/`
 - Build output: `dist/`
@@ -37,10 +37,6 @@ See @docs/guidance/\*.md for file-type-specific conventions (auto-loaded by glob
 
 The project uses **Nx** for build orchestration and task management
 
-## Package Manager
-
-This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g., `pnpm test:unit`, `pnpm lint`). To run arbitrary packages not in scripts, use `pnpx` or `pnpm dlx` — never `npx`.
-
 ## Build, Test, and Development Commands
 
 - `pnpm dev`: Start Vite dev server.
@@ -48,7 +44,7 @@ This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g
 - `pnpm build`: Type-check then production build to `dist/`
 - `pnpm preview`: Preview the production build locally
 - `pnpm test:unit`: Run Vitest unit tests
-- `pnpm test:browser:local`: Run Playwright E2E tests (`browser_tests/`)
+- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`)
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
 - `pnpm format` / `pnpm format:check`: oxfmt
 - `pnpm typecheck`: Vue TSC type checking
@@ -268,7 +264,7 @@ A particular type of complexity is over-engineering, where developers have made
 
 ## Repository Navigation
 
-- Check README files in key folders (browser_tests, composables, etc.)
+- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
 - Prefer running single tests for performance
 - Use --help for unfamiliar CLI tools
 

CODEOWNERS

@@ -2,57 +2,57 @@
 *                                                 @Comfy-org/comfy_frontend_devs
 
 # Desktop/Electron
-/apps/desktop-ui/                                 @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/stores/electronDownloadStore.ts              @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/extensions/core/electronAdapter.ts           @benceruleanlu @Comfy-org/comfy_frontend_devs
-/vite.electron.config.mts                         @benceruleanlu @Comfy-org/comfy_frontend_devs
+/apps/desktop-ui/                                 @benceruleanlu
+/src/stores/electronDownloadStore.ts              @benceruleanlu
+/src/extensions/core/electronAdapter.ts           @benceruleanlu
+/vite.electron.config.mts                         @benceruleanlu
 
 # Common UI Components
-/src/components/chip/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/card/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/button/                           @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/input/                            @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/chip/                             @viva-jinyi
+/src/components/card/                             @viva-jinyi
+/src/components/button/                           @viva-jinyi
+/src/components/input/                            @viva-jinyi
 
 # Topbar
-/src/components/topbar/                           @pythongosssss @Comfy-org/comfy_frontend_devs
+/src/components/topbar/                           @pythongosssss
 
 # Thumbnail
-/src/renderer/core/thumbnail/                     @pythongosssss @Comfy-org/comfy_frontend_devs
+/src/renderer/core/thumbnail/                     @pythongosssss
 
 # Legacy UI
-/scripts/ui/                                      @pythongosssss @Comfy-org/comfy_frontend_devs
+/scripts/ui/                                      @pythongosssss
 
 # Link rendering
-/src/renderer/core/canvas/links/                  @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/renderer/core/canvas/links/                  @benceruleanlu
 
 # Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @Comfy-org/comfy_frontend_devs
+/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88
 
 # Node help system
-/src/utils/nodeHelpUtil.ts                        @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/services/nodeHelpService.ts                  @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
+/src/services/nodeHelpService.ts                  @benceruleanlu
 
 # Selection toolbox
-/src/components/graph/selectionToolbox/           @Myestery @Comfy-org/comfy_frontend_devs
+/src/components/graph/selectionToolbox/           @Myestery
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery @Comfy-org/comfy_frontend_devs
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
 
 # Workflow Templates
-/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
-/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
 
 # 3D
-/src/extensions/core/load3d.ts                    @jtydhr88 @Comfy-org/comfy_frontend_devs
-/src/components/load3d/                           @jtydhr88 @Comfy-org/comfy_frontend_devs
+/src/extensions/core/load3d.ts                    @jtydhr88
+/src/components/load3d/                           @jtydhr88
 
 # Manager
-/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata @Comfy-org/comfy_frontend_devs
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
 /src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (see `.nvmrc`, currently v24) and pnpm
+  - Node.js (v24) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 
@@ -201,7 +201,7 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Tailwind CSS icon classes (`icon-[comfy--template]`) are provided by `@iconify/tailwind4`, configured in `packages/design-system/src/css/style.css`. Custom icons are stored in `packages/design-system/src/icons/` and loaded via `from-folder` at build time.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
 
 For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).
 

apps/desktop-ui/package.json

@@ -61,7 +61,8 @@
           "^build"
         ],
         "options": {
-          "command": "vite build --config apps/desktop-ui/vite.config.mts"
+          "cwd": "apps/desktop-ui",
+          "command": "vite build --config vite.config.mts"
         },
         "outputs": [
           "{projectRoot}/dist"

apps/desktop-ui/src/assets/css/style.css

@@ -4,39 +4,3 @@
   position: absolute;
   inset: 0;
 }
-
-.p-button-secondary {
-  border: none;
-  background-color: var(--color-neutral-600);
-  color: var(--color-white);
-}
-
-.p-button-secondary:hover {
-  background-color: var(--color-neutral-550);
-}
-
-.p-button-secondary:active {
-  background-color: var(--color-neutral-500);
-}
-
-.p-button-danger {
-  background-color: var(--color-coral-red-600);
-}
-
-.p-button-danger:hover {
-  background-color: var(--color-coral-red-500);
-}
-
-.p-button-danger:active {
-  background-color: var(--color-coral-red-400);
-}
-
-.task-div .p-card {
-  transition: opacity var(--default-transition-duration);
-  --p-card-background: var(--p-button-secondary-background);
-  opacity: 0.9;
-}
-
-.task-div .p-card:hover {
-  opacity: 1;
-}

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,7 +1,10 @@
 <template>
-  <div ref="rootEl" class="relative size-full overflow-hidden bg-neutral-900">
-    <div class="p-terminal size-full rounded-none p-2">
-      <div ref="terminalEl" class="terminal-host h-full" />
+  <div
+    ref="rootEl"
+    class="relative overflow-hidden h-full w-full bg-neutral-900"
+  >
+    <div class="p-terminal rounded-none h-full w-full p-2">
+      <div ref="terminalEl" class="h-full terminal-host" />
     </div>
     <Button
       v-tooltip.left="{
@@ -13,7 +16,7 @@
       size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'pointer-events-none opacity-0 select-none': !isHovered
+          'opacity-0 pointer-events-none select-none': !isHovered
         })
       "
       :aria-label="tooltipText"
@@ -98,15 +101,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* xterm renders its internal DOM outside Vue templates, so :deep selectors are
- * required to style those generated nodes.
- */
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-terminal) .xterm {
-  overflow: hidden;
+  @apply overflow-hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  overflow: hidden;
-  background-color: var(--color-neutral-900);
+  @apply bg-neutral-900 overflow-hidden;
 }
 </style>

apps/desktop-ui/src/components/common/LanguageSelector.vue

@@ -7,7 +7,7 @@
     option-value="value"
     :disabled="isSwitching"
     :pt="dropdownPt"
-    :size="size"
+    :size="props.size"
     class="language-selector"
     @change="onLocaleChange"
   >
@@ -36,10 +36,16 @@ import { i18n, loadLocale, st } from '@/i18n'
 type VariantKey = 'dark' | 'light'
 type SizeKey = 'small' | 'large'
 
-const { variant = 'dark', size = 'small' } = defineProps<{
-  variant?: VariantKey
-  size?: SizeKey
-}>()
+const props = withDefaults(
+  defineProps<{
+    variant?: VariantKey
+    size?: SizeKey
+  }>(),
+  {
+    variant: 'dark',
+    size: 'small'
+  }
+)
 
 const dropdownId = `language-select-${Math.random().toString(36).slice(2)}`
 
@@ -98,8 +104,10 @@ const VARIANT_PRESETS = {
 const selectedLocale = ref<string>(i18n.global.locale.value)
 const isSwitching = ref(false)
 
-const sizePreset = computed(() => SIZE_PRESETS[size])
-const variantPreset = computed(() => VARIANT_PRESETS[variant])
+const sizePreset = computed(() => SIZE_PRESETS[props.size as SizeKey])
+const variantPreset = computed(
+  () => VARIANT_PRESETS[props.variant as VariantKey]
+)
 
 const dropdownPt = computed(() => ({
   root: {
@@ -187,17 +195,13 @@ async function onLocaleChange(event: SelectChangeEvent) {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.p-dropdown-panel .p-dropdown-item) {
-  transition-property: color, background-color, border-color;
-  transition-duration: var(--default-transition-duration);
+  @apply transition-colors;
 }
 
 :deep(.p-dropdown) {
-  &:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 2px var(--color-neutral-900),
-      0 0 0 4px color-mix(in srgb, var(--color-brand-yellow) 60%, transparent);
-  }
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2;
 }
 </style>

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="mx-auto flex w-full max-w-3xl flex-col gap-8 select-none">
+  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
     <!-- Installation Path Section -->
-    <div class="flex grow flex-col gap-6 text-neutral-300">
-      <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
+    <div class="grow flex flex-col gap-6 text-neutral-300">
+      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
         {{ $t('install.locationPicker.title') }}
       </h2>
 
-      <p class="px-12 text-center text-neutral-400">
+      <p class="text-center text-neutral-400 px-12">
         {{ $t('install.locationPicker.subtitle') }}
       </p>
 
@@ -15,7 +15,7 @@
         <InputText
           v-model="installPath"
           :placeholder="$t('install.locationPicker.pathPlaceholder')"
-          class="flex-1 border-neutral-700 bg-neutral-800/50 text-neutral-200 placeholder:text-neutral-500"
+          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validatePath"
           @focus="onFocus"
@@ -23,7 +23,7 @@
         <Button
           icon="pi pi-folder-open"
           severity="secondary"
-          class="border-0 bg-neutral-700 hover:bg-neutral-600"
+          class="bg-neutral-700 hover:bg-neutral-600 border-0"
           @click="browsePath"
         />
       </div>
@@ -33,7 +33,7 @@
         <Message
           v-if="pathError"
           severity="error"
-          class="w-full whitespace-pre-line"
+          class="whitespace-pre-line w-full"
         >
           {{ pathError }}
         </Message>
@@ -269,43 +269,26 @@ const onFocus = async () => {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.location-picker-accordion) {
-  padding-inline: calc(var(--spacing) * 12);
+  @apply px-12;
 
   .p-accordionpanel {
-    border: 0;
-    background-color: transparent;
+    @apply border-0 bg-transparent;
   }
 
   .p-accordionheader {
-    margin-top: calc(var(--spacing) * 2);
-    border: 0;
-    border-radius: var(--radius-xl);
-    background-color: color-mix(
-      in srgb,
-      var(--color-neutral-800) 50%,
-      transparent
-    );
+    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
     transition:
       background-color 0.2s ease,
       border-radius 0.5s ease;
-
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--color-neutral-700) 50%,
-        transparent
-      );
-    }
   }
 
   /* When panel is expanded, adjust header border radius */
   .p-accordionpanel-active {
     .p-accordionheader {
-      border-top-left-radius: var(--radius-xl);
-      border-top-right-radius: var(--radius-xl);
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+      @apply rounded-t-xl rounded-b-none;
     }
 
     .p-accordionheader-toggle-icon {
@@ -316,24 +299,11 @@ const onFocus = async () => {
   }
 
   .p-accordioncontent {
-    border: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: var(--radius-xl);
-    border-bottom-left-radius: var(--radius-xl);
-    background-color: color-mix(
-      in srgb,
-      var(--color-neutral-800) 50%,
-      transparent
-    );
+    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
   }
 
   .p-accordioncontent-content {
-    background-color: transparent;
-    padding-top: calc(var(--spacing) * 3);
-    padding-right: calc(var(--spacing) * 5);
-    padding-bottom: calc(var(--spacing) * 5);
-    padding-left: calc(var(--spacing) * 5);
+    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
   }
 
   /* Override default chevron icons to use up/down */

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -1,20 +1,11 @@
 <template>
   <div
-    :class="
-      cn(
-        'task-div group/task-card relative grid min-h-52 max-w-48',
-        isLoading && 'opacity-75'
-      )
-    "
+    class="task-div relative grid min-h-52 max-w-48"
+    :class="{ 'opacity-75': isLoading }"
   >
     <Card
-      :class="
-        cn(
-          'relative h-full max-w-48 overflow-hidden',
-          runner.state !== 'error' && 'opacity-65'
-        )
-      "
-      :pt="cardPt"
+      class="relative h-full max-w-48 overflow-hidden"
+      :class="{ 'opacity-65': runner.state !== 'error' }"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
@@ -26,7 +17,7 @@
         <img
           v-if="task.headerImg"
           :src="task.headerImg"
-          class="size-full object-contain px-4 pt-4 opacity-25"
+          class="h-full w-full object-contain px-4 pt-4 opacity-25"
         />
       </template>
       <template #title>
@@ -52,7 +43,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 z-10 col-span-full row-span-full text-[4rem] text-green-500 opacity-100 transition-opacity [text-shadow:0.25rem_0_0.5rem_black] group-hover/task-card:opacity-20"
+      class="task-card-ok pi pi-check"
     />
   </div>
 </template>
@@ -64,7 +55,6 @@ import { computed } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { cn } from '@/utils/tailwindUtil'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 const taskStore = useMaintenanceTaskStore()
@@ -93,9 +83,51 @@ const reactiveExecuting = computed(() => !!runner.value.executing)
 
 const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
 const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
-
-const cardPt = {
-  header: { class: 'z-0' },
-  body: { class: 'z-[1] grow justify-between' }
-}
 </script>
+
+<style scoped>
+@reference '../../assets/css/style.css';
+
+.task-card-ok {
+  @apply text-green-500 absolute -right-4 -bottom-4 opacity-100 row-span-full col-span-full transition-opacity;
+
+  font-size: 4rem;
+  text-shadow: 0.25rem 0 0.5rem black;
+  z-index: 10;
+}
+
+.p-card {
+  @apply transition-opacity;
+
+  --p-card-background: var(--p-button-secondary-background);
+  opacity: 0.9;
+
+  &.opacity-65 {
+    opacity: 0.4;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+:deep(.p-card-header) {
+  z-index: 0;
+}
+
+:deep(.p-card-body) {
+  z-index: 1;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
+.task-div {
+  > i {
+    pointer-events: none;
+  }
+
+  &:hover > i {
+    opacity: 0.2;
+  }
+}
+</style>

apps/desktop-ui/src/components/maintenance/TaskListPanel.vue

@@ -4,7 +4,7 @@
     <template v-if="filter.tasks.length === 0">
       <!-- Empty filter -->
       <Divider />
-      <p class="w-full text-center text-neutral-400">
+      <p class="text-neutral-400 w-full text-center">
         {{ $t('maintenance.allOk') }}
       </p>
     </template>
@@ -25,7 +25,7 @@
 
       <!-- Display: Cards -->
       <template v-else>
-        <div class="pad-y my-4 flex flex-wrap justify-evenly gap-8">
+        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
           <TaskCard
             v-for="task in filter.tasks"
             :key="task.id"
@@ -45,8 +45,7 @@ import { useConfirm, useToast } from 'primevue'
 import ConfirmPopup from 'primevue/confirmpopup'
 import Divider from 'primevue/divider'
 
-import { useI18n } from 'vue-i18n'
-
+import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type {
   MaintenanceFilter,
@@ -56,7 +55,6 @@ import type {
 import TaskCard from './TaskCard.vue'
 import TaskListItem from './TaskListItem.vue'
 
-const { t } = useI18n()
 const toast = useToast()
 const confirm = useConfirm()
 const taskStore = useMaintenanceTaskStore()
@@ -82,7 +80,8 @@ const executeTask = async (task: MaintenanceTask) => {
   toast.add({
     severity: 'error',
     summary: t('maintenance.error.toastTitle'),
-    detail: message ?? t('maintenance.error.defaultDescription')
+    detail: message ?? t('maintenance.error.defaultDescription'),
+    life: 10_000
   })
 }
 

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex size-full flex-col justify-between rounded-lg p-6">
-    <h1 class="m-0 font-inter text-xl font-semibold italic">
-      {{ $t(`desktopDialogs.${id}.title`, title) }}
+  <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
+    <h1 class="font-inter font-semibold text-xl m-0 italic">
+      {{ t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">
-      {{ $t(`desktopDialogs.${id}.message`, message) }}
+      {{ t(`desktopDialogs.${id}.message`, message) }}
     </p>
     <div class="flex w-full gap-2">
       <Button
@@ -12,7 +12,7 @@
         :key="button.label"
         class="rounded-lg first:mr-auto"
         :label="
-          $t(
+          t(
             `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
             button.label
           )
@@ -31,6 +31,7 @@ import { useRoute } from 'vue-router'
 
 import { getDialog } from '@/constants/desktopDialogs'
 import type { DialogAction } from '@/constants/desktopDialogs'
+import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 const route = useRoute()
@@ -40,3 +41,31 @@ const handleButtonClick = async (button: DialogAction) => {
   await electronAPI().Dialog.clickButton(button.returnValue)
 }
 </script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+.p-button-secondary {
+  @apply text-white border-none bg-neutral-600;
+}
+
+.p-button-secondary:hover {
+  @apply bg-neutral-550;
+}
+
+.p-button-secondary:active {
+  @apply bg-neutral-500;
+}
+
+.p-button-danger {
+  @apply bg-coral-red-600;
+}
+
+.p-button-danger:hover {
+  @apply bg-coral-red-500;
+}
+
+.p-button-danger:active {
+  @apply bg-coral-red-400;
+}
+</style>

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -1,25 +1,25 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="grid h-screen w-screen items-center justify-around overflow-y-auto"
+      class="h-screen w-screen grid items-center justify-around overflow-y-auto"
     >
       <div class="relative m-8 text-center">
         <!-- Header -->
         <h1 class="download-bg pi-download text-4xl font-bold">
-          {{ $t('desktopUpdate.title') }}
+          {{ t('desktopUpdate.title') }}
         </h1>
 
         <div class="m-8">
-          <span>{{ $t('desktopUpdate.description') }}</span>
+          <span>{{ t('desktopUpdate.description') }}</span>
         </div>
 
-        <ProgressSpinner class="m-8 size-48" />
+        <ProgressSpinner class="m-8 w-48 h-48" />
 
         <!-- Console button -->
         <Button
           style="transform: translateX(-50%)"
           class="fixed bottom-0 left-1/2 my-8"
-          :label="$t('maintenance.consoleLogs')"
+          :label="t('maintenance.consoleLogs')"
           icon="pi pi-desktop"
           icon-pos="left"
           severity="secondary"
@@ -28,8 +28,8 @@
 
         <TerminalOutputDrawer
           v-model="terminalVisible"
-          :header="$t('g.terminal')"
-          :default-message="$t('desktopUpdate.terminalDefaultMessage')"
+          :header="t('g.terminal')"
+          :default-message="t('desktopUpdate.terminalDefaultMessage')"
         />
       </div>
     </div>
@@ -44,6 +44,7 @@ import Toast from 'primevue/toast'
 import { onUnmounted, ref } from 'vue'
 
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
+import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 import BaseViewTemplate from './templates/BaseViewTemplate.vue'
@@ -60,10 +61,10 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .download-bg::before {
-  position: absolute;
-  margin: 0;
-  color: var(--muted-foreground);
+  @apply m-0 absolute text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;

apps/desktop-ui/src/views/InstallView.stories.ts

@@ -1,8 +1,6 @@
 // eslint-disable-next-line storybook/no-renderer-packages
 import type { Meta, StoryObj } from '@storybook/vue3'
-import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
 import { nextTick, provide } from 'vue'
-import type { ElectronWindow } from '@/utils/envUtil'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
 import InstallView from './InstallView.vue'
@@ -44,21 +42,16 @@ const meta: Meta<typeof InstallView> = {
       const router = createMockRouter()
 
       // Mock electron API
-      ;(window as ElectronWindow).electronAPI = {
+      ;(window as any).electronAPI = {
         getPlatform: () => 'darwin',
         Config: {
           getDetectedGpu: () => Promise.resolve('mps')
         },
         Events: {
-          trackEvent: (
-            _eventName: string,
-            _data?: Record<string, unknown>
-          ) => {}
+          trackEvent: (_eventName: string, _data?: any) => {}
         },
-        installComfyUI: (
-          _options: Parameters<ElectronAPI['installComfyUI']>[0]
-        ) => {},
-        changeTheme: (_theme: Parameters<ElectronAPI['changeTheme']>[0]) => {},
+        installComfyUI: (_options: any) => {},
+        changeTheme: (_theme: any) => {},
         getSystemPaths: () =>
           Promise.resolve({
             defaultInstallPath: '/Users/username/ComfyUI'
@@ -247,8 +240,8 @@ export const DesktopSettings: Story = {
 export const WindowsPlatform: Story = {
   render: () => {
     // Override the platform to Windows
-    ;(window as ElectronWindow).electronAPI.getPlatform = () => 'win32'
-    ;(window as ElectronWindow).electronAPI.Config.getDetectedGpu = () =>
+    ;(window as any).electronAPI.getPlatform = () => 'win32'
+    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
       Promise.resolve('nvidia')
 
     return {
@@ -266,8 +259,8 @@ export const MacOSPlatform: Story = {
   name: 'macOS Platform',
   render: () => {
     // Override the platform to macOS
-    ;(window as ElectronWindow).electronAPI.getPlatform = () => 'darwin'
-    ;(window as ElectronWindow).electronAPI.Config.getDetectedGpu = () =>
+    ;(window as any).electronAPI.getPlatform = () => 'darwin'
+    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
       Promise.resolve('mps')
 
     return {
@@ -334,7 +327,7 @@ export const ManualInstall: Story = {
 export const ErrorState: Story = {
   render: () => {
     // Override validation to return an error
-    ;(window as ElectronWindow).electronAPI.validateInstallPath = () =>
+    ;(window as any).electronAPI.validateInstallPath = () =>
       Promise.resolve({
         isValid: false,
         exists: false,
@@ -382,7 +375,7 @@ export const ErrorState: Story = {
 export const WarningState: Story = {
   render: () => {
     // Override validation to return a warning about non-default drive
-    ;(window as ElectronWindow).electronAPI.validateInstallPath = () =>
+    ;(window as any).electronAPI.validateInstallPath = () =>
       Promise.resolve({
         isValid: true,
         exists: false,

apps/desktop-ui/src/views/InstallView.vue

@@ -1,10 +1,10 @@
 <template>
   <BaseViewTemplate dark>
     <!-- Fixed height container with flexbox layout for proper content management -->
-    <div class="flex size-full flex-col">
+    <div class="w-full h-full flex flex-col">
       <Stepper
         v-model:value="currentStep"
-        class="flex h-full flex-col"
+        class="flex flex-col h-full"
         @update:value="handleStepChange"
       >
         <!-- Main content area that grows to fill available space -->
@@ -37,7 +37,7 @@
 
         <!-- Install footer with navigation -->
         <InstallFooter
-          class="mx-auto my-6 w-full max-w-2xl"
+          class="w-full max-w-2xl my-6 mx-auto"
           :current-step
           :can-proceed
           :disable-location-step="noGpu"
@@ -183,37 +183,33 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 :deep(.p-steppanel) {
-  margin-top: calc(var(--spacing) * 8);
-  display: flex;
-  justify-content: center;
-  background-color: transparent;
+  @apply mt-8 flex justify-center bg-transparent;
 }
 
 /* Remove default padding/margin from StepPanels to make scrollbar flush */
 :deep(.p-steppanels) {
-  margin: 0;
-  padding: 0;
+  @apply p-0 m-0;
 }
 
 /* Ensure StepPanel content container has no top/bottom padding */
 :deep(.p-steppanel-content) {
-  padding: 0;
+  @apply p-0;
 }
 
 /* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
 :deep(.p-steppanels::-webkit-scrollbar) {
-  width: calc(var(--spacing) * 4);
+  @apply w-4;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-track) {
-  background-color: transparent;
+  @apply bg-transparent;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-thumb) {
-  border: 4px solid transparent;
-  border-radius: var(--radius-lg);
-  background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
+  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
   background-clip: content-box;
 }
 </style>

apps/desktop-ui/src/views/MaintenanceView.stories.ts

@@ -77,7 +77,7 @@ const createMockElectronAPI = () => {
 }
 
 const ensureElectronAPI = () => {
-  const globalWindow = window as { electronAPI?: unknown }
+  const globalWindow = window as unknown as { electronAPI?: unknown }
   if (!globalWindow.electronAPI) {
     globalWindow.electronAPI = createMockElectronAPI()
   }

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -1,21 +1,21 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="dark-theme grid h-screen min-h-full w-screen min-w-full justify-around overflow-y-auto bg-neutral-900 font-sans text-neutral-300"
+      class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
     >
-      <div class="relative m-8 w-screen max-w-(--breakpoint-sm)">
+      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
         <!-- Header -->
         <h1 class="backspan pi-wrench text-4xl font-bold">
           {{ t('maintenance.title') }}
         </h1>
 
         <!-- Toolbar -->
-        <div class="flex w-full flex-wrap items-center gap-4">
+        <div class="w-full flex flex-wrap gap-4 items-center">
           <span class="grow">
             {{ t('maintenance.status') }}:
             <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
           </span>
-          <div class="flex items-center gap-4">
+          <div class="flex gap-4 items-center">
             <SelectButton
               v-model="displayAsList"
               :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
@@ -56,10 +56,10 @@
               :value="t('icon.exclamation-triangle')"
             />
             <span>
-              <strong class="mb-1 block">
+              <strong class="block mb-1">
                 {{ t('maintenance.unsafeMigration.title') }}
               </strong>
-              <span class="mb-1 block">
+              <span class="block mb-1">
                 {{ unsafeReasonText }}
               </span>
               <span class="block text-sm text-neutral-400">
@@ -71,13 +71,13 @@
 
         <!-- Tasks -->
         <TaskListPanel
-          class="border-x-0 border-y border-solid border-neutral-700"
+          class="border-neutral-700 border-solid border-x-0 border-y"
           :filter
           :display-as-list
         />
 
         <!-- Actions -->
-        <div class="flex flex-row justify-between gap-4">
+        <div class="flex justify-between gap-4 flex-row">
           <Button
             :label="t('maintenance.consoleLogs')"
             icon="pi pi-desktop"
@@ -114,12 +114,12 @@ import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
 import TaskListPanel from '@/components/maintenance/TaskListPanel.vue'
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
+import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'
 import { electronAPI } from '@/utils/envUtil'
@@ -129,7 +129,6 @@ import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 
 const electron = electronAPI()
 const toast = useToast()
-const { t } = useI18n()
 const taskStore = useMaintenanceTaskStore()
 const { clearResolved, processUpdate, refreshDesktopTasks } = taskStore
 
@@ -189,7 +188,8 @@ const completeValidation = async () => {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: t('maintenance.error.cannotContinue')
+      detail: t('maintenance.error.cannotContinue'),
+      life: 5_000
     })
   }
 }
@@ -220,14 +220,14 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 :deep(.p-tag) {
   --p-tag-gap: 0.375rem;
 }
 
 .backspan::before {
-  position: absolute;
-  margin: 0;
-  color: var(--muted-foreground);
+  @apply m-0 absolute text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: -2rem;

apps/desktop-ui/src/views/MetricsConsentView.vue

@@ -1,8 +1,8 @@
 <template>
   <BaseViewTemplate dark hide-language-selector>
-    <div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
+    <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
       <div
-        class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
+        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
       >
         <h2 class="text-3xl font-semibold text-neutral-100">
           {{ $t('install.helpImprove') }}
@@ -15,7 +15,7 @@
           <a
             href="https://comfy.org/privacy"
             target="_blank"
-            class="text-blue-400 underline hover:text-blue-300"
+            class="text-blue-400 hover:text-blue-300 underline"
           >
             {{ $t('install.privacyPolicy') }} </a
           >.
@@ -33,7 +33,7 @@
             }}
           </span>
         </div>
-        <div class="flex justify-end pt-6">
+        <div class="flex pt-6 justify-end">
           <Button
             :label="$t('g.ok')"
             icon="pi pi-check"
@@ -72,7 +72,8 @@ const updateConsent = async () => {
     toast.add({
       severity: 'error',
       summary: t('install.settings.errorUpdatingConsent'),
-      detail: t('install.settings.errorUpdatingConsentDetail')
+      detail: t('install.settings.errorUpdatingConsentDetail'),
+      life: 3000
     })
   } finally {
     isUpdating.value = false

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseViewTemplate>
-    <div class="sad-container grid items-center justify-evenly">
+    <div class="sad-container">
       <!-- Right side image -->
       <img
         class="sad-girl"
@@ -9,7 +9,7 @@
       />
 
       <div class="no-drag sad-text flex items-center">
-        <div class="flex min-w-110 flex-col gap-8 p-8">
+        <div class="flex flex-col gap-8 p-8 min-w-110">
           <!-- Header -->
           <h1 class="text-4xl font-bold text-red-500">
             {{ $t('notSupported.title') }}
@@ -20,7 +20,7 @@
             <p class="text-xl">
               {{ $t('notSupported.message') }}
             </p>
-            <ul class="list-inside list-disc space-y-1 text-neutral-800">
+            <ul class="list-disc list-inside space-y-1 text-neutral-800">
               <li>{{ $t('notSupported.supportedDevices.macos') }}</li>
               <li>{{ $t('notSupported.supportedDevices.windows') }}</li>
             </ul>
@@ -79,7 +79,10 @@ const continueToInstall = async () => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .sad-container {
+  @apply grid items-center justify-evenly;
   grid-template-columns: 25rem 1fr;
 
   & > * {