fix: a11y: localize aria-valuetext in ColorPickerSaturationValue (#9798)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.agents/checks/accessibility.md

@@ -0,0 +1,28 @@
+---
+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

@@ -0,0 +1,35 @@
+---
+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

@@ -0,0 +1,27 @@
+---
+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

@@ -0,0 +1,34 @@
+---
+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

@@ -0,0 +1,50 @@
+---
+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

@@ -0,0 +1,28 @@
+---
+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

@@ -0,0 +1,86 @@
+---
+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

@@ -0,0 +1,66 @@
+---
+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

@@ -0,0 +1,40 @@
+---
+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

@@ -0,0 +1,25 @@
+---
+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

@@ -0,0 +1,58 @@
+---
+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

@@ -0,0 +1,38 @@
+---
+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

@@ -0,0 +1,60 @@
+/**
+ * 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

@@ -0,0 +1,72 @@
+---
+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

@@ -0,0 +1,27 @@
+---
+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

@@ -0,0 +1,60 @@
+---
+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

@@ -0,0 +1,35 @@
+---
+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

@@ -0,0 +1,44 @@
+---
+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

@@ -0,0 +1,34 @@
+---
+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

@@ -0,0 +1,54 @@
+---
+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

@@ -0,0 +1,59 @@
+---
+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

@@ -0,0 +1,37 @@
+---
+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

@@ -0,0 +1,47 @@
+---
+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/skills/backport-management/SKILL.md

@@ -0,0 +1,150 @@
+---
+name: backport-management
+description: Manages cherry-pick backports across stable release branches. Discovers candidates from Slack/git, analyzes dependencies, resolves conflicts via worktree, and logs results. Use when asked to backport, cherry-pick to stable, manage release branches, do stable branch maintenance, or run a backport session.
+---
+
+# Backport Management
+
+Cherry-pick backport management for Comfy-Org/ComfyUI_frontend stable release branches.
+
+## Quick Start
+
+1. **Discover** — Collect candidates from Slack bot + git log gap (`reference/discovery.md`)
+2. **Analyze** — Categorize MUST/SHOULD/SKIP, check deps (`reference/analysis.md`)
+3. **Plan** — Order by dependency (leaf fixes first), group into waves per branch
+4. **Execute** — Label-driven automation → worktree fallback for conflicts (`reference/execution.md`)
+5. **Verify** — After each wave, verify branch integrity before proceeding
+6. **Log & Report** — Generate session report with mermaid diagram (`reference/logging.md`)
+
+## System Context
+
+| Item           | Value                                             |
+| -------------- | ------------------------------------------------- |
+| Repo           | `~/ComfyUI_frontend` (Comfy-Org/ComfyUI_frontend) |
+| Merge strategy | Squash merge (`gh pr merge --squash --admin`)     |
+| Automation     | `pr-backport.yaml` GitHub Action (label-driven)   |
+| Tracking dir   | `~/temp/backport-session/`                        |
+
+## Branch Scope Rules
+
+**Critical: Match PRs to the correct target branches.**
+
+| Branch prefix | Scope                          | Example                                   |
+| ------------- | ------------------------------ | ----------------------------------------- |
+| `cloud/*`     | Cloud-hosted ComfyUI only      | App mode, cloud auth, cloud-specific UI   |
+| `core/*`      | Local/self-hosted ComfyUI only | Core editor, local workflows, node system |
+
+**⚠️ NEVER backport cloud-only PRs to `core/*` branches.** Cloud-only changes (app mode, cloud auth, cloud billing UI, cloud-specific API calls) are irrelevant to local users and waste effort. Before backporting any PR to a `core/*` branch, check:
+
+- Does the PR title/description mention "app mode", "cloud", or cloud-specific features?
+- Does the PR only touch files like `appModeStore.ts`, cloud auth, or cloud-specific components?
+- If yes → skip for `core/*` branches (may still apply to `cloud/*` branches)
+
+## ⚠️ Gotchas (Learn from Past Sessions)
+
+### Use `gh api` for Labels — NOT `gh pr edit`
+
+`gh pr edit --add-label` triggers Projects Classic deprecation errors. Always use:
+
+```bash
+gh api repos/Comfy-Org/ComfyUI_frontend/issues/$PR/labels \
+  -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH"
+```
+
+### Automation Over-Reports Conflicts
+
+The `pr-backport.yaml` action reports more conflicts than reality. `git cherry-pick -m 1` with git auto-merge handles many cases the automation can't. Always attempt manual cherry-pick before skipping.
+
+### Never Skip Based on Conflict File Count
+
+12 or 27 conflicting files can be trivial (snapshots, new files). **Categorize conflicts first**, then decide. See Conflict Triage below.
+
+## Conflict Triage
+
+**Always categorize before deciding to skip. High conflict count ≠ hard conflicts.**
+
+| Type                         | Symptom                              | Resolution                                                      |
+| ---------------------------- | ------------------------------------ | --------------------------------------------------------------- |
+| **Binary snapshots (PNGs)**  | `.png` files in conflict list        | `git checkout --theirs $FILE && git add $FILE` — always trivial |
+| **Modify/delete (new file)** | PR introduces files not on target    | `git add $FILE` — keep the new file                             |
+| **Modify/delete (removed)**  | Target removed files the PR modifies | `git rm $FILE` — file no longer relevant                        |
+| **Content conflicts**        | Marker-based (`<<<<<<<`)             | Accept theirs via python regex (see below)                      |
+| **Add/add**                  | Both sides added same file           | Accept theirs, verify no logic conflict                         |
+| **Locale/JSON files**        | i18n key additions                   | Accept theirs, validate JSON after                              |
+
+```python
+# Accept theirs for content conflicts
+import re
+pattern = r'<<<<<<< HEAD\n(.*?)=======\n(.*?)>>>>>>> [^\n]+\n?'
+content = re.sub(pattern, r'\2', content, flags=re.DOTALL)
+```
+
+### Escalation Triggers (Flag for Human)
+
+- **Package.json/lockfile changes** → skip on stable (transitive dep regression risk)
+- **Core type definition changes** → requires human judgment
+- **Business logic conflicts** (not just imports/exports) → requires domain knowledge
+- **Admin-merged conflict resolutions** → get human review of the resolution before continuing the wave
+
+## Auto-Skip Categories
+
+Skip these without discussion:
+
+- **Dep refresh PRs** — Risk of transitive dep regressions on stable. Cherry-pick individual CVE fixes instead.
+- **CI/tooling changes** — Not user-facing
+- **Test-only / lint rule changes** — Not user-facing
+- **Revert pairs** — If PR A reverted by PR B, skip both. If fixed version (PR C) exists, backport only C.
+- **Features not on target branch** — e.g., Painter, GLSLShader, appModeStore on core/1.40
+- **Cloud-only PRs on core/\* branches** — App mode, cloud auth, cloud billing. These only affect cloud-hosted ComfyUI.
+
+## Wave Verification
+
+After merging each wave of PRs to a target branch, verify branch integrity before proceeding:
+
+```bash
+# Fetch latest state of target branch
+git fetch origin TARGET_BRANCH
+
+# Quick smoke check: does the branch build?
+git worktree add /tmp/verify-TARGET origin/TARGET_BRANCH
+cd /tmp/verify-TARGET
+source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck
+git worktree remove /tmp/verify-TARGET --force
+```
+
+If typecheck fails, stop and investigate before continuing. A broken branch after wave N means all subsequent waves will compound the problem.
+
+## Continuous Backporting Recommendation
+
+Large backport sessions (50+ PRs) are expensive and error-prone. Prefer continuous backporting:
+
+- Backport bug fixes as they merge to main (same day or next day)
+- Use the automation labels immediately after merge
+- Reserve session-style bulk backporting for catching up after gaps
+- When a release branch is created, immediately start the continuous process
+
+## Quick Reference
+
+### Label-Driven Automation (default path)
+
+```bash
+gh api repos/Comfy-Org/ComfyUI_frontend/issues/$PR/labels \
+  -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH"
+# Wait 3 min, check: gh pr list --base TARGET_BRANCH --state open
+```
+
+### Manual Worktree Cherry-Pick (conflict fallback)
+
+```bash
+git worktree add /tmp/backport-$BRANCH origin/$BRANCH
+cd /tmp/backport-$BRANCH
+git checkout -b backport-$PR-to-$BRANCH origin/$BRANCH
+git cherry-pick -m 1 $MERGE_SHA
+# Resolve conflicts, push, create PR, merge
+```
+
+### PR Title Convention
+
+```
+[backport TARGET_BRANCH] Original Title (#ORIGINAL_PR)
+```

.claude/skills/backport-management/reference/analysis.md

@@ -0,0 +1,68 @@
+# Analysis & Decision Framework
+
+## Categorization
+
+| Category             | Criteria                                                                                                  | Action                                                                     |
+| -------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| **MUST**             | User-facing bug, crash, data corruption, security. Clear breakage that users will hit.                    | Backport (with deps if needed)                                             |
+| **SHOULD**           | UX improvement, minor bug, small dep chain. No user-visible breakage if skipped, but improves experience. | Backport if clean cherry-pick; defer if conflict resolution is non-trivial |
+| **SKIP**             | CI/tooling, test-only, lint rules, cosmetic, dep refresh                                                  | Skip with documented reason                                                |
+| **NEEDS DISCUSSION** | Large dep chain, unclear risk/benefit, touches core types                                                 | Flag for human                                                             |
+
+### MUST vs SHOULD Decision Guide
+
+When unsure, ask: "If a user on this stable branch reports this issue, would we consider it a bug?"
+
+- **Yes** → MUST. The fix addresses broken behavior.
+- **No, but it's noticeably better** → SHOULD. The fix is a quality-of-life improvement.
+- **No, and it's cosmetic or internal** → SKIP.
+
+For SHOULD items with conflicts: if conflict resolution requires more than trivial accept-theirs patterns (content conflicts in business logic, not just imports), downgrade to SKIP or escalate to NEEDS DISCUSSION.
+
+## Branch Scope Filtering
+
+**Before categorizing, filter by branch scope:**
+
+| Target branch | Skip if PR is...                                                    |
+| ------------- | ------------------------------------------------------------------- |
+| `core/*`      | Cloud-only (app mode, cloud auth, cloud billing, cloud-specific UI) |
+| `cloud/*`     | Local-only features not present on cloud branch                     |
+
+Cloud-only PRs backported to `core/*` are wasted effort — `core/*` branches serve local/self-hosted users who never see cloud features. Check PR titles, descriptions, and files changed for cloud-specific indicators.
+
+## Features Not on Stable Branches
+
+Check before backporting — these don't exist on older branches:
+
+- **Painter** (`src/extensions/core/painter.ts`) — not on core/1.40
+- **GLSLShader** — not on core/1.40
+- **App builder** — check per branch
+- **appModeStore.ts** — not on core/1.40
+
+## Dep Refresh PRs
+
+Always SKIP on stable branches. Risk of transitive dependency regressions outweighs audit cleanup benefit. If a specific CVE fix is needed, cherry-pick that individual fix instead.
+
+## Revert Pairs
+
+If PR A is reverted by PR B:
+
+- Skip BOTH A and B
+- If a fixed version exists (PR C), backport only C
+
+## Dependency Analysis
+
+```bash
+# Find other PRs that touched the same files
+gh pr view $PR --json files --jq '.files[].path' | while read f; do
+  git log --oneline origin/TARGET..$MERGE_SHA -- "$f"
+done
+```
+
+## Human Review Checkpoint
+
+Present decisions.md before execution. Include:
+
+1. All MUST/SHOULD/SKIP categorizations with rationale
+2. Questions for human (feature existence, scope, deps)
+3. Estimated effort per branch

.claude/skills/backport-management/reference/discovery.md

@@ -0,0 +1,42 @@
+# Discovery — Candidate Collection
+
+## Source 1: Slack Backport-Checker Bot
+
+Use `slackdump` skill to export `#frontend-releases` channel (C09K9TPU2G7):
+
+```bash
+slackdump export -o ~/slack-exports/frontend-releases.zip C09K9TPU2G7
+```
+
+Parse bot messages for PRs flagged "Might need backport" per release version.
+
+## Source 2: Git Log Gap Analysis
+
+```bash
+# Count gap
+git log --oneline origin/TARGET..origin/main | wc -l
+
+# List gap commits
+git log --oneline origin/TARGET..origin/main
+
+# Check if a PR is already on target
+git log --oneline origin/TARGET --grep="#PR_NUMBER"
+
+# Check for existing backport PRs
+gh pr list --base TARGET --state all --search "backport PR_NUMBER"
+```
+
+## Source 3: GitHub PR Details
+
+```bash
+# Get merge commit SHA
+gh pr view $PR --json mergeCommit,title --jq '"Title: \(.title)\nMerge: \(.mergeCommit.oid)"'
+
+# Get files changed
+gh pr view $PR --json files --jq '.files[].path'
+```
+
+## Output: candidate_list.md
+
+Table per target branch:
+| PR# | Title | Category | Flagged by Bot? | Decision |

.claude/skills/backport-management/reference/execution.md

@@ -0,0 +1,150 @@
+# Execution Workflow
+
+## Per-Branch Execution Order
+
+1. Smallest gap first (validation run)
+2. Medium gap next (quick win)
+3. Largest gap last (main effort)
+
+## Step 1: Label-Driven Automation (Batch)
+
+```bash
+# Add labels to all candidates for a target branch
+for pr in $PR_LIST; do
+  gh api repos/Comfy-Org/ComfyUI_frontend/issues/$pr/labels \
+    -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH" --silent
+  sleep 2
+done
+
+# Wait 3 minutes for automation
+sleep 180
+
+# Check which got auto-PRs
+gh pr list --base TARGET_BRANCH --state open --limit 50 --json number,title
+```
+
+## Step 2: Review & Merge Clean Auto-PRs
+
+```bash
+for pr in $AUTO_PRS; do
+  # Check size
+  gh pr view $pr --json title,additions,deletions,changedFiles \
+    --jq '"Files: \(.changedFiles), +\(.additions)/-\(.deletions)"'
+  # Admin merge
+  gh pr merge $pr --squash --admin
+  sleep 3
+done
+```
+
+## Step 3: Manual Worktree for Conflicts
+
+```bash
+git fetch origin TARGET_BRANCH
+git worktree add /tmp/backport-TARGET origin/TARGET_BRANCH
+cd /tmp/backport-TARGET
+
+for PR in ${CONFLICT_PRS[@]}; do
+  # Refresh target ref so each branch is based on current HEAD
+  git fetch origin TARGET_BRANCH
+  git checkout origin/TARGET_BRANCH
+
+  git checkout -b backport-$PR-to-TARGET origin/TARGET_BRANCH
+  git cherry-pick -m 1 $MERGE_SHA
+
+  # If conflict — NEVER skip based on file count alone!
+  # Categorize conflicts first: binary PNGs, modify/delete, content, add/add
+  # See SKILL.md Conflict Triage table for resolution per type.
+
+  # Resolve all conflicts, then:
+  git add .
+  GIT_EDITOR=true git cherry-pick --continue
+
+  git push origin backport-$PR-to-TARGET
+  NEW_PR=$(gh pr create --base TARGET_BRANCH --head backport-$PR-to-TARGET \
+    --title "[backport TARGET] TITLE (#$PR)" \
+    --body "Backport of #$PR..." | grep -oP '\d+$')
+  gh pr merge $NEW_PR --squash --admin
+  sleep 3
+done
+
+# Cleanup
+cd -
+git worktree remove /tmp/backport-TARGET --force
+```
+
+**⚠️ Human review for conflict resolutions:** When admin-merging a PR where you manually resolved conflicts (especially content conflicts beyond trivial accept-theirs), pause and present the resolution diff to the human for review before merging. Trivial resolutions (binary snapshots, modify/delete, locale key additions) can proceed without review.
+
+## Step 4: Wave Verification
+
+After completing all PRs in a wave for a target branch:
+
+```bash
+git fetch origin TARGET_BRANCH
+git worktree add /tmp/verify-TARGET origin/TARGET_BRANCH
+cd /tmp/verify-TARGET
+source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck
+git worktree remove /tmp/verify-TARGET --force
+```
+
+If verification fails, stop and fix before proceeding to the next wave. Do not compound problems across waves.
+
+## Conflict Resolution Patterns
+
+### 1. Content Conflicts (accept theirs)
+
+```python
+import re
+pattern = r'<<<<<<< HEAD\n(.*?)=======\n(.*?)>>>>>>> [^\n]+\n?'
+content = re.sub(pattern, r'\2', content, flags=re.DOTALL)
+```
+
+### 2. Modify/Delete (two cases!)
+
+```bash
+# Case A: PR introduces NEW files not on target → keep them
+git add $FILE
+
+# Case B: Target REMOVED files the PR modifies → drop them
+git rm $FILE
+```
+
+### 3. Binary Files (snapshots)
+
+```bash
+git checkout --theirs $FILE && git add $FILE
+```
+
+### 4. Locale Files
+
+Usually adding new i18n keys — accept theirs, validate JSON:
+
+```bash
+python3 -c "import json; json.load(open('src/locales/en/main.json'))" && echo "Valid"
+```
+
+## Merge Conflicts After Other Merges
+
+When merging multiple PRs to the same branch, later PRs may conflict with earlier merges:
+
+```bash
+git fetch origin TARGET_BRANCH
+git rebase origin/TARGET_BRANCH
+# Resolve new conflicts
+git push --force origin backport-$PR-to-TARGET
+sleep 20  # Wait for GitHub to recompute merge state
+gh pr merge $PR --squash --admin
+```
+
+## Lessons Learned
+
+1. **Automation reports more conflicts than reality** — `cherry-pick -m 1` with git auto-merge handles many "conflicts" the automation can't
+2. **Never skip based on conflict file count** — 12 or 27 conflicts can be trivial (snapshots, new files). Categorize first: binary PNGs, modify/delete, content, add/add.
+3. **Modify/delete goes BOTH ways** — if the PR introduces new files (not on target), `git add` them. If target deleted files the PR modifies, `git rm`.
+4. **Binary snapshot PNGs** — always `git checkout --theirs && git add`. Never skip a PR just because it has many snapshot conflicts.
+5. **Batch label additions need 2s delay** between API calls to avoid rate limits
+6. **Merging 6+ PRs rapidly** can cause later PRs to become unmergeable — wait 20-30s for GitHub to recompute merge state
+7. **appModeStore.ts, painter files, GLSLShader files** don't exist on core/1.40 — `git rm` these
+8. **Always validate JSON** after resolving locale file conflicts
+9. **Dep refresh PRs** — skip on stable branches. Risk of transitive dep regressions outweighs audit cleanup. Cherry-pick individual CVE fixes instead.
+10. **Verify after each wave** — run `pnpm typecheck` on the target branch after merging a batch. Catching breakage early prevents compounding errors.
+11. **Cloud-only PRs don't belong on core/\* branches** — app mode, cloud auth, and cloud-specific UI changes are irrelevant to local users. Always check PR scope against branch scope before backporting.

.claude/skills/backport-management/reference/logging.md

@@ -0,0 +1,96 @@
+# Logging & Session Reports
+
+## During Execution
+
+Maintain `execution-log.md` with per-branch tables:
+
+```markdown
+| PR#   | Title | Status                            | Backport PR | Notes   |
+| ----- | ----- | --------------------------------- | ----------- | ------- |
+| #XXXX | Title | ✅ Merged / ⏭️ Skip / ⏸️ Deferred | #YYYY       | Details |
+```
+
+## Wave Verification Log
+
+Track verification results per wave:
+
+```markdown
+## Wave N Verification — TARGET_BRANCH
+
+- PRs merged: #A, #B, #C
+- Typecheck: ✅ Pass / ❌ Fail
+- Issues found: (if any)
+- Human review needed: (list any non-trivial conflict resolutions)
+```
+
+## Session Report Template
+
+```markdown
+# Backport Session Report
+
+## Summary
+
+| Branch | Candidates | Merged | Skipped | Deferred | Rate |
+| ------ | ---------- | ------ | ------- | -------- | ---- |
+
+## Deferred Items (Needs Human)
+
+| PR# | Title | Branch | Issue |
+
+## Conflict Resolutions Requiring Review
+
+| PR# | Branch | Conflict Type | Resolution Summary |
+
+## Automation Performance
+
+| Metric                      | Value |
+| --------------------------- | ----- |
+| Auto success rate           | X%    |
+| Manual resolution rate      | X%    |
+| Overall clean rate          | X%    |
+| Wave verification pass rate | X%    |
+
+## Process Recommendations
+
+- Were there clusters of related PRs that should have been backported together?
+- Any PRs that should have been backported sooner (continuous backporting candidates)?
+- Feature branches that need tracking for future sessions?
+```
+
+## Final Deliverable: Visual Summary
+
+At session end, generate a **mermaid diagram** showing all backported PRs organized by target branch and category (MUST/SHOULD), plus a summary table. Present this to the user as the final output.
+
+```mermaid
+graph TD
+    subgraph branch1["☁️ cloud/X.XX — N PRs"]
+        C1["#XXXX title"]
+        C2["#XXXX title"]
+    end
+
+    subgraph branch2must["🔴 core/X.XX MUST — N PRs"]
+        M1["#XXXX title"]
+    end
+
+    subgraph branch2should["🟡 core/X.XX SHOULD — N PRs"]
+        S1["#XXXX-#XXXX N auto-merged"]
+        S2["#XXXX-#XXXX N manual picks"]
+    end
+
+    classDef cloudStyle fill:#1a3a5c,stroke:#4da6ff,color:#e0f0ff
+    classDef coreStyle fill:#1a4a2e,stroke:#4dff88,color:#e0ffe8
+    classDef mustStyle fill:#5c1a1a,stroke:#ff4d4d,color:#ffe0e0
+    classDef shouldStyle fill:#4a3a1a,stroke:#ffcc4d,color:#fff5e0
+```
+
+Use the `mermaid` tool to render this diagram and present it alongside the summary table as the session's final deliverable.
+
+## Files to Track
+
+- `candidate_list.md` — all candidates per branch
+- `decisions.md` — MUST/SHOULD/SKIP with rationale
+- `wave-plan.md` — execution order
+- `execution-log.md` — real-time status
+- `backport-session-report.md` — final summary
+
+All in `~/temp/backport-session/`.

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

@@ -0,0 +1,83 @@
+---
+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.

.coderabbit.yaml

@@ -5,3 +5,10 @@ reviews:
   high_level_summary: false
   auto_review:
     drafts: true
+    ignore_title_keywords:
+      - '[release]'
+      - '[backport'
+    ignore_usernames:
+      - comfy-pr-bot
+      - github-actions
+      - github-actions[bot]

.env_example

@@ -38,6 +38,9 @@ TEST_COMFYUI_DIR=/home/ComfyUI
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 
+# Enable PostHog debug logging in the browser console.
+# VITE_POSTHOG_DEBUG=true
+
 # Sentry ENV vars replace with real ones for debugging
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org

.github/AGENTS.md

@@ -13,3 +13,11 @@ 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/actions/post-pr-report-comment/action.yaml

@@ -0,0 +1,35 @@
+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/license-clarifications.json

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

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

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Update electron types

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

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -79,3 +79,22 @@ jobs:
             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-lint-format.yaml

@@ -26,6 +26,14 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
+      - name: Detect browser_tests changes
+        id: changed-paths
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        with:
+          filters: |
+            browser_tests:
+              - 'browser_tests/**'
+
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
 
@@ -60,6 +68,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

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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,70 @@
+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-tests-e2e-forks.yaml

@@ -6,9 +6,6 @@ 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
@@ -63,8 +60,7 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting" \
-            "$(date -u '${{ env.DATE_FORMAT }}')"
+            "starting"
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'

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

@@ -4,8 +4,10 @@ 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:
 
 concurrency:
@@ -37,7 +39,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 60
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -85,7 +87,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -182,10 +184,6 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - 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:
           GITHUB_TOKEN: ${{ github.token }}
@@ -194,8 +192,7 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting" \
-            "${{ steps.start-time.outputs.time }}"
+            "starting"
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:

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

@@ -6,9 +6,6 @@ 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
@@ -63,8 +60,7 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting" \
-            "$(date -u '${{ env.DATE_FORMAT }}')"
+            "starting"
 
       - name: Download and Deploy Storybook
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'

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

@@ -4,6 +4,8 @@ name: 'CI: Tests Storybook'
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
+  push:
+    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs
@@ -24,8 +26,7 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting" \
-            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
+            "starting"
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:
@@ -139,6 +140,29 @@ jobs:
             "${{ github.head_ref }}" \
             "completed"
 
+  # Deploy Storybook to production URL on main branch push
+  deploy-production:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+
+      - name: Deploy to Cloudflare Pages (production)
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+        run: |
+          npx wrangler@^4.0.0 pages deploy storybook-static \
+            --project-name=comfy-storybook \
+            --branch=main
+
   # Update comment with Chromatic URLs for version-bump branches
   update-comment-with-chromatic:
     needs: [chromatic-deployment, deploy-and-comment]

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

@@ -4,8 +4,10 @@ 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 }}

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

@@ -0,0 +1,81 @@
+---
+# 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 }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          ACTION: ${{ github.event.action }}
+          LABEL_NAME: ${{ github.event.label.name }}
+          PR_LABELS: ${{ toJson(github.event.pull_request.labels.*.name) }}
+        run: |
+          if [ "${EVENT_NAME}" = "pull_request" ]; then
+            REF="${PR_HEAD_SHA}"
+            BRANCH="${PR_HEAD_REF}"
+
+            # Derive variant from all PR labels (default to cpu for frontend-only previews)
+            VARIANT="cpu"
+            echo "${PR_LABELS}" | grep -q '"preview-gpu"' && VARIANT="gpu"
+          else
+            REF="${GITHUB_SHA}"
+            BRANCH="${GITHUB_REF_NAME}"
+            PR_NUMBER=""
+            VARIANT=""
+          fi
+          payload="$(jq -nc \
+            --arg ref "${REF}" \
+            --arg branch "${BRANCH}" \
+            --arg pr_number "${PR_NUMBER}" \
+            --arg variant "${VARIANT}" \
+            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
+          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/cloud-dispatch-cleanup.yaml

@@ -0,0 +1,39 @@
+---
+# Dispatches a frontend-preview-cleanup event to the cloud repo when a
+# frontend PR with a preview label is closed or has its preview label
+# removed. The cloud repo handles the actual environment teardown.
+#
+# 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 Preview Cleanup Dispatch
+
+on:
+  pull_request:
+    types: [closed, unlabeled]
+
+permissions: {}
+
+jobs:
+  dispatch:
+    # Only dispatch when:
+    # - PR closed AND had a preview label
+    # - Preview label specifically removed
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      ((github.event.action == 'closed' &&
+        (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'))) ||
+       (github.event.action == 'unlabeled' &&
+        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)))
+    runs-on: ubuntu-latest
+    steps:
+      - 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-preview-cleanup
+          client-payload: >-
+            {"pr_number": "${{ github.event.pull_request.number }}"}

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

@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

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

@@ -0,0 +1,102 @@
+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

@@ -45,28 +45,76 @@ jobs:
           run_id: ${{ github.event_name == 'workflow_dispatch' && inputs.run_id || github.event.workflow_run.id }}
           path: temp/size
 
-      - 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
+      - name: Resolve and validate PR metadata
+        id: pr-meta
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const fs = require('fs');
 
-      - 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
+            // 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: Download previous size data
         uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
         with:
-          branch: ${{ steps.pr-base.outputs.content }}
+          branch: ${{ steps.pr-meta.outputs.base }}
           workflow: ci-size-data.yaml
           event: push
           name: size-data
@@ -76,18 +124,10 @@ jobs:
       - name: Generate size report
         run: node scripts/size-report.js > size-report.md
 
-      - name: Read size report
-        id: size-report
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-        with:
-          path: ./size-report.md
-
-      - name: Create or update PR comment
-        uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b # v3.2.0
+      - name: Post PR comment
+        uses: ./.github/actions/post-pr-report-comment
         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

@@ -77,7 +77,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}

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

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
 
       - name: Read desktop-ui version
         id: get_version

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

@@ -91,7 +91,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

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

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: 'frontend/.nvmrc'
 
       - name: Install dependencies
         working-directory: frontend

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

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
 
       - name: Check version bump type
         id: check_version

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

@@ -26,7 +26,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Get current version
@@ -53,7 +53,13 @@ jobs:
           IS_NIGHTLY: ${{  case(github.ref == 'refs/heads/main', 'true', 'false') }}
         run: |
           pnpm install --frozen-lockfile
-          pnpm build
+
+          # 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 zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v6
@@ -62,6 +68,7 @@ jobs:
           path: |
             dist/
             dist.zip
+            dist-desktop.zip
 
   draft_release:
     needs: build
@@ -79,6 +86,7 @@ jobs:
         with:
           files: |
             dist.zip
+            dist-desktop.zip
           tag_name: v${{ needs.build.outputs.version }}
           target_commitish: ${{ github.event.pull_request.base.ref }}
           make_latest: >-

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

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

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

@@ -22,7 +22,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Get current version

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

@@ -149,7 +149,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: lts/*
+          node-version-file: '.nvmrc'
 
       - name: Bump version
         id: bump-version

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

@@ -58,7 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '24.x'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Bump desktop-ui version

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

@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.gitignore

@@ -26,6 +26,7 @@ dist-ssr
 .claude/*.local.json
 .claude/*.local.md
 .claude/*.local.txt
+.claude/worktrees
 CLAUDE.local.md
 
 # Editor directories and files
@@ -64,6 +65,7 @@ browser_tests/local/
 dist.zip
 
 /temp/
+/tmp/
 
 # Generated JSON Schemas
 /schemas/

.oxlintrc.json

@@ -35,7 +35,7 @@
       }
     ],
     "no-control-regex": "off",
-    "no-eval": "off",
+    "no-eval": "error",
     "no-redeclare": "error",
     "no-restricted-imports": [
       "error",

.storybook/preview.ts

@@ -58,7 +58,7 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.documentElement.classList.remove('dark-theme')
     document.body.classList.remove('dark-theme')
   }
-  document.body.classList.add('[&_*]:!font-inter')
+  document.body.classList.add('font-inter')
 
   return Story(context.args, context)
 }
@@ -90,7 +90,6 @@ const preview: Preview = {
           { value: 'light', icon: 'sun', title: 'Light' },
           { value: 'dark', icon: 'moon', title: 'Dark' }
         ],
-        showName: true,
         dynamicTitle: true
       }
     }

.stylelintrc.json

@@ -40,12 +40,12 @@
     "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",

AGENTS.md

@@ -37,6 +37,10 @@ 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.

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 (v24) and pnpm
+  - Node.js (see `.nvmrc`, currently v24) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 

apps/desktop-ui/package.json

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

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

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

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

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

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

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

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

@@ -1,11 +1,20 @@
 <template>
   <div
-    class="task-div relative grid min-h-52 max-w-48"
-    :class="{ 'opacity-75': isLoading }"
+    :class="
+      cn(
+        'task-div group/task-card relative grid min-h-52 max-w-48',
+        isLoading && 'opacity-75'
+      )
+    "
   >
     <Card
-      class="relative h-full max-w-48 overflow-hidden"
-      :class="{ 'opacity-65': runner.state !== 'error' }"
+      :class="
+        cn(
+          'relative h-full max-w-48 overflow-hidden',
+          runner.state !== 'error' && 'opacity-65'
+        )
+      "
+      :pt="cardPt"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
@@ -17,7 +26,7 @@
         <img
           v-if="task.headerImg"
           :src="task.headerImg"
-          class="h-full w-full object-contain px-4 pt-4 opacity-25"
+          class="size-full object-contain px-4 pt-4 opacity-25"
         />
       </template>
       <template #title>
@@ -43,7 +52,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="task-card-ok pi pi-check"
+      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"
     />
   </div>
 </template>
@@ -55,6 +64,7 @@ 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()
@@ -83,51 +93,9 @@ 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="text-neutral-400 w-full text-center">
+      <p class="w-full text-center text-neutral-400">
         {{ $t('maintenance.allOk') }}
       </p>
     </template>
@@ -25,7 +25,7 @@
 
       <!-- Display: Cards -->
       <template v-else>
-        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
+        <div class="pad-y my-4 flex flex-wrap justify-evenly gap-8">
           <TaskCard
             v-for="task in filter.tasks"
             :key="task.id"
@@ -45,7 +45,8 @@ import { useConfirm, useToast } from 'primevue'
 import ConfirmPopup from 'primevue/confirmpopup'
 import Divider from 'primevue/divider'
 
-import { t } from '@/i18n'
+import { useI18n } from 'vue-i18n'
+
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type {
   MaintenanceFilter,
@@ -55,6 +56,7 @@ import type {
 import TaskCard from './TaskCard.vue'
 import TaskListItem from './TaskListItem.vue'
 
+const { t } = useI18n()
 const toast = useToast()
 const confirm = useConfirm()
 const taskStore = useMaintenanceTaskStore()
@@ -80,8 +82,7 @@ const executeTask = async (task: MaintenanceTask) => {
   toast.add({
     severity: 'error',
     summary: t('maintenance.error.toastTitle'),
-    detail: message ?? t('maintenance.error.defaultDescription'),
-    life: 10_000
+    detail: message ?? t('maintenance.error.defaultDescription')
   })
 }
 

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

@@ -1,10 +1,10 @@
 <template>
-  <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) }}
+  <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) }}
     </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,7 +31,6 @@ 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()
@@ -41,31 +40,3 @@ 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="h-screen w-screen grid items-center justify-around overflow-y-auto"
+      class="grid h-screen w-screen 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 w-48 h-48" />
+        <ProgressSpinner class="m-8 size-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,7 +44,6 @@ 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'
@@ -61,10 +60,10 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 .download-bg::before {
-  @apply m-0 absolute text-muted;
+  position: absolute;
+  margin: 0;
+  color: var(--muted-foreground);
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;

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="w-full h-full flex flex-col">
+    <div class="flex size-full flex-col">
       <Stepper
         v-model:value="currentStep"
-        class="flex flex-col h-full"
+        class="flex h-full flex-col"
         @update:value="handleStepChange"
       >
         <!-- Main content area that grows to fill available space -->
@@ -37,7 +37,7 @@
 
         <!-- Install footer with navigation -->
         <InstallFooter
-          class="w-full max-w-2xl my-6 mx-auto"
+          class="mx-auto my-6 w-full max-w-2xl"
           :current-step
           :can-proceed
           :disable-location-step="noGpu"
@@ -183,33 +183,37 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 :deep(.p-steppanel) {
-  @apply mt-8 flex justify-center bg-transparent;
+  margin-top: calc(var(--spacing) * 8);
+  display: flex;
+  justify-content: center;
+  background-color: transparent;
 }
 
 /* Remove default padding/margin from StepPanels to make scrollbar flush */
 :deep(.p-steppanels) {
-  @apply p-0 m-0;
+  margin: 0;
+  padding: 0;
 }
 
 /* Ensure StepPanel content container has no top/bottom padding */
 :deep(.p-steppanel-content) {
-  @apply p-0;
+  padding: 0;
 }
 
 /* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
 :deep(.p-steppanels::-webkit-scrollbar) {
-  @apply w-4;
+  width: calc(var(--spacing) * 4);
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-track) {
-  @apply bg-transparent;
+  background-color: transparent;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-thumb) {
-  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
+  border: 4px solid transparent;
+  border-radius: var(--radius-lg);
+  background-color: color-mix(in srgb, var(--color-white) 20%, 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 unknown as { electronAPI?: unknown }
+  const globalWindow = window 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="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"
+      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"
     >
-      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
+      <div class="relative m-8 w-screen max-w-(--breakpoint-sm)">
         <!-- Header -->
         <h1 class="backspan pi-wrench text-4xl font-bold">
           {{ t('maintenance.title') }}
         </h1>
 
         <!-- Toolbar -->
-        <div class="w-full flex flex-wrap gap-4 items-center">
+        <div class="flex w-full flex-wrap items-center gap-4">
           <span class="grow">
             {{ t('maintenance.status') }}:
             <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
           </span>
-          <div class="flex gap-4 items-center">
+          <div class="flex items-center gap-4">
             <SelectButton
               v-model="displayAsList"
               :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
@@ -56,10 +56,10 @@
               :value="t('icon.exclamation-triangle')"
             />
             <span>
-              <strong class="block mb-1">
+              <strong class="mb-1 block">
                 {{ t('maintenance.unsafeMigration.title') }}
               </strong>
-              <span class="block mb-1">
+              <span class="mb-1 block">
                 {{ unsafeReasonText }}
               </span>
               <span class="block text-sm text-neutral-400">
@@ -71,13 +71,13 @@
 
         <!-- Tasks -->
         <TaskListPanel
-          class="border-neutral-700 border-solid border-x-0 border-y"
+          class="border-x-0 border-y border-solid border-neutral-700"
           :filter
           :display-as-list
         />
 
         <!-- Actions -->
-        <div class="flex justify-between gap-4 flex-row">
+        <div class="flex flex-row justify-between gap-4">
           <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,6 +129,7 @@ import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 
 const electron = electronAPI()
 const toast = useToast()
+const { t } = useI18n()
 const taskStore = useMaintenanceTaskStore()
 const { clearResolved, processUpdate, refreshDesktopTasks } = taskStore
 
@@ -188,8 +189,7 @@ const completeValidation = async () => {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: t('maintenance.error.cannotContinue'),
-      life: 5_000
+      detail: t('maintenance.error.cannotContinue')
     })
   }
 }
@@ -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 {
-  @apply m-0 absolute text-muted;
+  position: absolute;
+  margin: 0;
+  color: var(--muted-foreground);
   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="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
+    <div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
       <div
-        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
+        class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
       >
         <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 hover:text-blue-300 underline"
+            class="text-blue-400 underline hover:text-blue-300"
           >
             {{ $t('install.privacyPolicy') }} </a
           >.
@@ -33,7 +33,7 @@
             }}
           </span>
         </div>
-        <div class="flex pt-6 justify-end">
+        <div class="flex justify-end pt-6">
           <Button
             :label="$t('g.ok')"
             icon="pi pi-check"
@@ -72,8 +72,7 @@ const updateConsent = async () => {
     toast.add({
       severity: 'error',
       summary: t('install.settings.errorUpdatingConsent'),
-      detail: t('install.settings.errorUpdatingConsentDetail'),
-      life: 3000
+      detail: t('install.settings.errorUpdatingConsentDetail')
     })
   } finally {
     isUpdating.value = false

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

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

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

@@ -2,14 +2,14 @@
   <BaseViewTemplate dark>
     <div class="relative min-h-screen">
       <!-- Terminal Background Layer (always visible during loading) -->
-      <div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
-        <div class="h-full w-full">
+      <div v-if="!isError" class="fixed inset-0 z-0 overflow-hidden">
+        <div class="size-full">
           <BaseTerminal @created="terminalCreated" />
         </div>
       </div>
 
       <!-- Semi-transparent overlay -->
-      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
+      <div v-if="!isError" class="fixed inset-0 z-5 bg-neutral-900/80"></div>
 
       <!-- Smooth radial gradient overlay -->
       <div
@@ -45,9 +45,9 @@
         <!-- Error Section (positioned at bottom) -->
         <div
           v-if="isError"
-          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
+          class="absolute inset-x-0 bottom-20 flex flex-col items-center gap-4"
         >
-          <div class="flex gap-4 justify-center">
+          <div class="flex justify-center gap-4">
             <Button
               icon="pi pi-flag"
               :label="$t('serverStart.reportIssue')"
@@ -71,10 +71,10 @@
         <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
         <div
           v-if="terminalVisible && isError"
-          class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
+          class="absolute inset-x-4 bottom-4 z-10 mx-auto max-w-4xl"
         >
           <div
-            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
+            class="h-[300px] rounded-lg border border-neutral-700 bg-neutral-900/95 p-4"
           >
             <BaseTerminal @created="terminalCreated" />
           </div>
@@ -232,8 +232,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../assets/css/style.css';
-
 /* Hide the xterm scrollbar completely */
 :deep(.p-terminal) .xterm-viewport {
   overflow: hidden !important;

browser_tests/README.md

@@ -27,7 +27,8 @@ cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
 
 ### Node.js & Playwright Prerequisites
 
-Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
+Ensure you have the Node.js version from `.nvmrc` installed (currently v24).
+Then, set up the Chromium test driver:
 
 ```bash
 pnpm exec playwright install chromium --with-deps

browser_tests/assets/nodes/load_image_with_ksampler.json

@@ -0,0 +1,47 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": null },
+        { "name": "MASK", "type": "MASK", "links": null }
+      ],
+      "properties": { "Node name for S&R": "LoadImage" },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": [500, 50],
+      "size": [315, 262],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": null }],
+      "properties": { "Node name for S&R": "KSampler" },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "normal", 1]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": { "offset": [0, 0], "scale": 1 }
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-duplicate-links.json

@@ -0,0 +1,183 @@
+{
+  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
+      "pos": [600, 400],
+      "size": [200, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 2,
+          "lastLinkId": 5,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph With Duplicate Links",
+        "inputNode": {
+          "id": -10,
+          "bounding": [200, 400, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [900, 400, 120, 60]
+        },
+        "inputs": [],
+        "outputs": [
+          {
+            "id": "out-latent-1",
+            "name": "LATENT",
+            "type": "LATENT",
+            "linkIds": [2],
+            "pos": [920, 420]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "KSampler",
+            "pos": [400, 100],
+            "size": [270, 262],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "model",
+                "type": "MODEL",
+                "link": null
+              },
+              {
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          },
+          {
+            "id": 2,
+            "type": "EmptyLatentImage",
+            "pos": [100, 200],
+            "size": [200, 106],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [1, 3, 4, 5]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "EmptyLatentImage"
+            },
+            "widgets_values": [512, 512, 1]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "LATENT"
+          },
+          {
+            "id": 3,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 4,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 5,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.38.14"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-nested-promotion.json

@@ -0,0 +1,760 @@
+{
+  "id": "9a37f747-e96b-4304-9212-7abcaad7bdac",
+  "revision": 0,
+  "last_node_id": 11,
+  "last_link_id": 18,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "PreviewAny",
+      "pos": [1031, 434],
+      "size": [250, 178],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "source",
+          "type": "*",
+          "link": 5
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewAny"
+      },
+      "widgets_values": [null, null, null]
+    },
+    {
+      "id": 5,
+      "type": "1e38d8ea-45e1-48a5-aa20-966584201867",
+      "pos": [788, 433.5],
+      "size": [225, 380],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "string_a",
+          "type": "STRING",
+          "widget": {
+            "name": "string_a"
+          },
+          "link": 4
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [5]
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [
+          ["3", "string_a"],
+          ["4", "value"],
+          ["6", "value"],
+          ["6", "value_1"]
+        ]
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 1,
+      "type": "PrimitiveStringMultiline",
+      "pos": [548, 451],
+      "size": [225, 142],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [4]
+        }
+      ],
+      "title": "Outer",
+      "properties": {
+        "Node name for S&R": "PrimitiveStringMultiline"
+      },
+      "widgets_values": ["Outer\n"]
+    }
+  ],
+  "links": [
+    [4, 1, 0, 5, 0, "STRING"],
+    [5, 5, 0, 2, 0, "STRING"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "1e38d8ea-45e1-48a5-aa20-966584201867",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 0",
+        "inputNode": {
+          "id": -10,
+          "bounding": [351, 432.5, 120, 120]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1352, 294.5, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "7bf3e1d4-0521-4b5c-92f5-47ca598b7eb4",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [1],
+            "localized_name": "string_a",
+            "pos": [451, 452.5]
+          },
+          {
+            "id": "5fb3dcf7-9bfd-4b3c-a1b9-750b4f3edf19",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [13],
+            "pos": [451, 472.5]
+          },
+          {
+            "id": "55d24b8a-7c82-4b02-8e3d-ff31ffb8aa13",
+            "name": "value_1",
+            "type": "STRING",
+            "linkIds": [16],
+            "pos": [451, 492.5]
+          },
+          {
+            "id": "c1fe7cc3-547e-4fb0-b763-61888558d4bd",
+            "name": "value_1_1",
+            "type": "STRING",
+            "linkIds": [18],
+            "pos": [451, 512.5]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "fbe975ba-d7c2-471e-a99a-a1e2c6ab466d",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "STRING",
+            "pos": [1372, 314.5]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 4,
+            "type": "PrimitiveStringMultiline",
+            "pos": [504, 437],
+            "size": [210, 88],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 13
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [2]
+              }
+            ],
+            "title": "Inner 1",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 1\n"]
+          },
+          {
+            "id": 3,
+            "type": "StringConcatenate",
+            "pos": [743, 325],
+            "size": [347, 231],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 1
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 6,
+            "type": "9be42452-056b-4c99-9f9f-7381d11c4454",
+            "pos": [1115, 301],
+            "size": [210, 196],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 7
+              },
+              {
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 16
+              },
+              {
+                "name": "value_1",
+                "type": "STRING",
+                "widget": {
+                  "name": "value_1"
+                },
+                "link": 18
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [9]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [
+                ["5", "string_a"],
+                ["11", "value"],
+                ["9", "value"],
+                ["10", "string_a"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 2,
+            "origin_id": 4,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": 6,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 6,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 9,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 13,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 4,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 16,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 6,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 18,
+            "origin_id": -10,
+            "origin_slot": 3,
+            "target_id": 6,
+            "target_slot": 2,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "9be42452-056b-4c99-9f9f-7381d11c4454",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 1",
+        "inputNode": {
+          "id": -10,
+          "bounding": [180, 739, 120, 100]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1246, 612, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "01c05c51-86b5-4bad-b32f-9c911683a13d",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [4],
+            "localized_name": "string_a",
+            "pos": [280, 759]
+          },
+          {
+            "id": "d50f6a62-0185-43d4-a174-a8a94bd8f6e7",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [14],
+            "pos": [280, 779]
+          },
+          {
+            "id": "6b78450e-5986-49cd-b743-c933e5a34a69",
+            "name": "value_1",
+            "type": "STRING",
+            "linkIds": [17],
+            "pos": [280, 799]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "a8bcf3bf-a66a-4c71-8d92-17a2a4d03686",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [12],
+            "localized_name": "STRING",
+            "pos": [1266, 632]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 11,
+            "type": "PrimitiveStringMultiline",
+            "pos": [334, 742],
+            "size": [210, 88],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 14
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "title": "Inner 2",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 2\n"]
+          },
+          {
+            "id": 10,
+            "type": "StringConcatenate",
+            "pos": [581, 637],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 4
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 7
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [11]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 9,
+            "type": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+            "pos": [1004, 613],
+            "size": [210, 142],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 11
+              },
+              {
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 17
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [12]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [
+                ["7", "string_a"],
+                ["8", "value"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 4,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 11,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 11,
+            "origin_id": 10,
+            "origin_slot": 0,
+            "target_id": 9,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 10,
+            "origin_id": 9,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 12,
+            "origin_id": 9,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 14,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 11,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 17,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 9,
+            "target_slot": 1,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 2",
+        "inputNode": {
+          "id": -10,
+          "bounding": [262, 1222, 120, 80]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1123.089999999999, 1125.1999999999998, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "934a8baa-d79c-428c-8ec9-814ad437d7c7",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "string_a",
+            "pos": [362, 1242]
+          },
+          {
+            "id": "3a545207-7202-42a9-a82f-3b62e1b0f459",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [15],
+            "pos": [362, 1262]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "4c3d243b-9ff6-4dcd-9dbf-e4ec8e1fc879",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [10],
+            "localized_name": "STRING",
+            "pos": [1143.089999999999, 1145.1999999999998]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 8,
+            "type": "PrimitiveStringMultiline",
+            "pos": [412.96000000000004, 1228.2399999999996],
+            "size": [210, 88],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 15
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [8]
+              }
+            ],
+            "title": "Inner 3",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 3\n"]
+          },
+          {
+            "id": 7,
+            "type": "StringConcatenate",
+            "pos": [686.08, 1132.38],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 9
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 8
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [10]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 8,
+            "origin_id": 8,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 9,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 10,
+            "origin_id": 7,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 15,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 8,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [-412, 11]
+    },
+    "frontendVersion": "1.41.7"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-with-multiple-promoted-previews.json

@@ -0,0 +1,394 @@
+{
+  "id": "43e9499c-2512-43b5-a5a1-2485eb65da32",
+  "revision": 0,
+  "last_node_id": 8,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [170.55728894250745, 515.6401487466619],
+      "size": [282.8166809082031, 363.8333435058594],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [7, 9]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 7,
+      "type": "21dea088-e1b4-47a4-a01f-3d1bf4504001",
+      "pos": [500.2639113468392, 519.9960755960157],
+      "size": [464.95001220703125, 615.8333129882812],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 7
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [10]
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [
+          ["2", "$$canvas-image-preview"],
+          ["4", "$$canvas-image-preview"]
+        ]
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 8,
+      "type": "a7a0350a-af99-4d26-9391-450b4f726206",
+      "pos": [1000.5293620197185, 499.9253405678786],
+      "size": [225, 359.8333435058594],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image1",
+          "type": "IMAGE",
+          "link": 9
+        },
+        {
+          "name": "image2",
+          "type": "IMAGE",
+          "link": 10
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [["6", "$$canvas-image-preview"]]
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [7, 1, 0, 7, 0, "IMAGE"],
+    [9, 1, 0, 8, 0, "IMAGE"],
+    [10, 7, 0, 8, 1, "IMAGE"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "21dea088-e1b4-47a4-a01f-3d1bf4504001",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 8,
+          "lastLinkId": 10,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [297.7833638107301, 502.6302057820892, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1052.8175480718996, 502.6302057820892, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "afc8dbc3-12e6-4b3c-9840-9b398d06e6bd",
+            "name": "images",
+            "type": "IMAGE",
+            "linkIds": [1, 2],
+            "localized_name": "images",
+            "pos": [397.7833638107301, 522.6302057820892]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "d0a84974-5f4d-4f4b-b23a-2e7288a9689d",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [5],
+            "localized_name": "IMAGE",
+            "pos": [1072.8175480718996, 522.6302057820892]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 4,
+            "type": "PreviewImage",
+            "pos": [767.8225773415076, 602.8695134060456],
+            "size": [225, 303.8333435058594],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "images",
+                "name": "images",
+                "type": "IMAGE",
+                "link": 3
+              }
+            ],
+            "outputs": [],
+            "properties": {
+              "Node name for S&R": "PreviewImage"
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 2,
+            "type": "PreviewImage",
+            "pos": [754.9358989867657, 188.55375831225257],
+            "size": [225, 303.8333435058594],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "images",
+                "name": "images",
+                "type": "IMAGE",
+                "link": 1
+              }
+            ],
+            "outputs": [],
+            "properties": {
+              "Node name for S&R": "PreviewImage"
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 3,
+            "type": "ImageInvert",
+            "pos": [477.783932416778, 542.2440719627998],
+            "size": [225, 71.83333587646484],
+            "flags": {
+              "collapsed": false
+            },
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "image",
+                "name": "image",
+                "type": "IMAGE",
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": [3, 5]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "ImageInvert"
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 3,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": 4,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 2,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 2,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 5,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "a7a0350a-af99-4d26-9391-450b4f726206",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 8,
+          "lastLinkId": 10,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [973.7423316105073, 561.9744246746379, 120, 80]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1905.487372786412, 581.9744246746379, 120, 40]
+        },
+        "inputs": [
+          {
+            "id": "20ac4159-6814-4d40-a217-ea260152b689",
+            "name": "image1",
+            "type": "IMAGE",
+            "linkIds": [4],
+            "localized_name": "image1",
+            "pos": [1073.7423316105073, 581.9744246746379]
+          },
+          {
+            "id": "c3759a8c-914e-4450-bc41-ca683ffce96b",
+            "name": "image2",
+            "type": "IMAGE",
+            "linkIds": [8],
+            "localized_name": "image2",
+            "shape": 7,
+            "pos": [1073.7423316105073, 601.9744246746379]
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 5,
+            "type": "ImageStitch",
+            "pos": [1153.7423085222254, 396.2033931749105],
+            "size": [270, 225.1666717529297],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "image1",
+                "name": "image1",
+                "type": "IMAGE",
+                "link": 4
+              },
+              {
+                "localized_name": "image2",
+                "name": "image2",
+                "shape": 7,
+                "type": "IMAGE",
+                "link": 8
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": [6]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "ImageStitch"
+            },
+            "widgets_values": ["right", true, 0, "white"]
+          },
+          {
+            "id": 6,
+            "type": "PreviewImage",
+            "pos": [1620.4874189629757, 529.9122050216333],
+            "size": [225, 307.8333435058594],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "images",
+                "name": "images",
+                "type": "IMAGE",
+                "link": 6
+              }
+            ],
+            "outputs": [],
+            "properties": {
+              "Node name for S&R": "PreviewImage"
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 6,
+            "origin_id": 5,
+            "origin_slot": 0,
+            "target_id": 6,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 4,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 5,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 8,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 5,
+            "target_slot": 1,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.7269777827561446,
+      "offset": [-35.273237658266034, -55.17394203309256]
+    },
+    "frontendVersion": "1.40.8"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-with-preview-node.json

@@ -0,0 +1,170 @@
+{
+  "id": "preview-subgraph-test-001",
+  "revision": 0,
+  "last_node_id": 11,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
+      "pos": [318.6320139868054, 212.9091015141833],
+      "size": [225, 368],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [
+          ["10", "filename_prefix"],
+          ["10", "$$canvas-image-preview"]
+        ],
+        "cnr_id": "comfy-core",
+        "ver": "0.13.0",
+        "ue_properties": {
+          "widget_ue_connectable": {},
+          "version": "7.6.2",
+          "input_ue_unconnectable": {}
+        }
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 11,
+      "type": "LoadImage",
+      "pos": [-0.5080003681592018, 211.3051121416672],
+      "size": [282.8333435058594, 364],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "ue_properties": {
+          "widget_ue_connectable": {},
+          "input_ue_unconnectable": {}
+        },
+        "cnr_id": "comfy-core",
+        "ver": "0.13.0",
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    }
+  ],
+  "links": [[2, 11, 0, 5, 0, "IMAGE"]],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [300, 350, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [900, 350, 120, 40]
+        },
+        "inputs": [
+          {
+            "id": "img-slot-001",
+            "name": "images",
+            "type": "IMAGE",
+            "linkIds": [1],
+            "pos": [400, 370]
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 10,
+            "type": "SaveImage",
+            "pos": [500.0046924937855, 300.0146992076527],
+            "size": [315, 340],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "images",
+                "name": "images",
+                "type": "IMAGE",
+                "link": 1
+              }
+            ],
+            "outputs": [],
+            "properties": {
+              "cnr_id": "comfy-core",
+              "ver": "0.13.0",
+              "Node name for S&R": "SaveImage",
+              "ue_properties": {
+                "widget_ue_connectable": {},
+                "version": "7.6.2",
+                "input_ue_unconnectable": {}
+              }
+            },
+            "widgets_values": ["ComfyUI"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 0,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {
+          "ue_links": [],
+          "links_added_by_ue": []
+        }
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1.1819400303977265,
+      "offset": [81.66005130613983, -19.028558221588725]
+    },
+    "frontendVersion": "1.40.3",
+    "ue_links": [],
+    "links_added_by_ue": [],
+    "VHS_latentpreview": false,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": true,
+    "VHS_KeepIntermediate": true
+  },
+  "version": 0.4
+}

browser_tests/assets/viewport/default-viewport-saved-offscreen.json

@@ -36,14 +36,7 @@
       "properties": {
         "Node name for S&R": "CheckpointLoaderSimple",
         "cnr_id": "comfy-core",
-        "ver": "0.3.65",
-        "models": [
-          {
-            "name": "v1-5-pruned-emaonly-fp16.safetensors",
-            "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
-            "directory": "checkpoints"
-          }
-        ]
+        "ver": "0.3.65"
       },
       "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
     },

browser_tests/fixtures/ComfyPage.ts

@@ -24,9 +24,9 @@ import {
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
+import { PerformanceHelper } from './helpers/PerformanceHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
-import { DebugHelper } from './helpers/DebugHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
 import { KeyboardHelper } from './helpers/KeyboardHelper'
 import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
@@ -174,7 +174,6 @@ export class ComfyPage {
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
   public readonly vueNodes: VueNodeHelpers
-  public readonly debug: DebugHelper
   public readonly subgraph: SubgraphHelper
   public readonly canvasOps: CanvasHelper
   public readonly nodeOps: NodeOperationsHelper
@@ -187,6 +186,7 @@ export class ComfyPage {
   public readonly dragDrop: DragDropHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
+  public readonly perf: PerformanceHelper
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -206,9 +206,7 @@ export class ComfyPage {
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
-    this.runButton = page
-      .getByTestId(TestIds.topbar.queueButton)
-      .getByRole('button', { name: 'Run' })
+    this.runButton = page.getByTestId(TestIds.topbar.queueButton)
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
@@ -219,7 +217,6 @@ export class ComfyPage {
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
     this.vueNodes = new VueNodeHelpers(page)
-    this.debug = new DebugHelper(page, this.canvas)
     this.subgraph = new SubgraphHelper(this)
     this.canvasOps = new CanvasHelper(page, this.canvas, this.resetViewButton)
     this.nodeOps = new NodeOperationsHelper(this)
@@ -232,6 +229,7 @@ export class ComfyPage {
     this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
+    this.perf = new PerformanceHelper(page)
   }
 
   get visibleToasts() {
@@ -432,14 +430,23 @@ export const comfyPageFixture = base.extend<{
         'Comfy.VueNodes.AutoScaleLayout': false,
         // Disable toast warning about version compatibility, as they may or
         // may not appear - depending on upstream ComfyUI dependencies
-        'Comfy.VersionCompatibility.DisableWarnings': true
+        'Comfy.VersionCompatibility.DisableWarnings': true,
+        // Browser tests should opt into missing-model warnings explicitly so
+        // workflows do not render differently based on models present on disk.
+        'Comfy.Workflow.ShowMissingModelsWarning': false
       })
     } catch (e) {
       console.error(e)
     }
 
     await comfyPage.setup()
+
+    const isPerf = testInfo.tags.includes('@perf')
+    if (isPerf) await comfyPage.perf.init()
+
     await use(comfyPage)
+
+    if (isPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {
     const comfyMouse = new ComfyMouse(comfyPage)

browser_tests/fixtures/VueNodeHelpers.ts

@@ -172,6 +172,19 @@ export class VueNodeHelpers {
   async enterSubgraph(nodeId?: string): Promise<void> {
     const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
     const editButton = locator.getByTestId(TestIds.widgets.subgraphEnterButton)
-    await editButton.click()
+
+    // The footer tab button extends below the node body (visible area),
+    // but its bounding box center overlaps the node body div.
+    // Click at the bottom 25% of the button which is the genuinely visible
+    // and unobstructed area outside the node body boundary.
+    const box = await editButton.boundingBox()
+    if (!box) {
+      throw new Error(
+        'subgraph-enter-button has no bounding box: element may be hidden or not in DOM'
+      )
+    }
+    await editButton.click({
+      position: { x: box.width / 2, y: box.height * 0.75 }
+    })
   }
 }

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -55,15 +55,22 @@ export class ComfyNodeSearchBox {
 
   async fillAndSelectFirstNode(
     nodeName: string,
-    options?: { suggestionIndex: number }
+    options?: { suggestionIndex?: number; exact?: boolean }
   ) {
     await this.input.waitFor({ state: 'visible' })
     await this.input.fill(nodeName)
     await this.dropdown.waitFor({ state: 'visible' })
-    await this.dropdown
-      .locator('li')
-      .nth(options?.suggestionIndex || 0)
-      .click()
+    if (options?.exact) {
+      await this.dropdown
+        .locator(`li[aria-label="${nodeName}"]`)
+        .first()
+        .click()
+    } else {
+      await this.dropdown
+        .locator('li')
+        .nth(options?.suggestionIndex || 0)
+        .click()
+    }
   }
 
   async addFilter(filterValue: string, filterType: string) {

browser_tests/fixtures/helpers/CommandHelper.ts

@@ -11,7 +11,10 @@ export class CommandHelper {
   ): Promise<void> {
     await this.page.evaluate(
       ({ commandId, metadata }) => {
-        return window['app'].extensionManager.command.execute(commandId, {
+        const app = window.app
+        if (!app) throw new Error('window.app is not available')
+
+        return app.extensionManager.command.execute(commandId, {
           metadata
         })
       },

browser_tests/fixtures/helpers/DebugHelper.ts

@@ -1,167 +0,0 @@
-import type { Locator, Page, TestInfo } from '@playwright/test'
-
-import type { Position } from '../types'
-
-export interface DebugScreenshotOptions {
-  fullPage?: boolean
-  element?: 'canvas' | 'page'
-  markers?: Array<{ position: Position; id?: string }>
-}
-
-export class DebugHelper {
-  constructor(
-    private page: Page,
-    private canvas: Locator
-  ) {}
-
-  async addMarker(
-    position: Position,
-    id: string = 'debug-marker'
-  ): Promise<void> {
-    await this.page.evaluate(
-      ([pos, markerId]) => {
-        const existing = document.getElementById(markerId)
-        if (existing) existing.remove()
-
-        const marker = document.createElement('div')
-        marker.id = markerId
-        marker.style.position = 'fixed'
-        marker.style.left = `${pos.x - 10}px`
-        marker.style.top = `${pos.y - 10}px`
-        marker.style.width = '20px'
-        marker.style.height = '20px'
-        marker.style.border = '2px solid red'
-        marker.style.borderRadius = '50%'
-        marker.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'
-        marker.style.pointerEvents = 'none'
-        marker.style.zIndex = '10000'
-        document.body.appendChild(marker)
-      },
-      [position, id] as const
-    )
-  }
-
-  async removeMarkers(): Promise<void> {
-    await this.page.evaluate(() => {
-      document
-        .querySelectorAll('[id^="debug-marker"]')
-        .forEach((el) => el.remove())
-    })
-  }
-
-  async attachScreenshot(
-    testInfo: TestInfo,
-    name: string,
-    options?: DebugScreenshotOptions
-  ): Promise<void> {
-    if (options?.markers) {
-      for (const marker of options.markers) {
-        await this.addMarker(marker.position, marker.id)
-      }
-    }
-
-    let screenshot: Buffer
-    const targetElement = options?.element || 'page'
-
-    if (targetElement === 'canvas') {
-      screenshot = await this.canvas.screenshot()
-    } else if (options?.fullPage) {
-      screenshot = await this.page.screenshot({ fullPage: true })
-    } else {
-      screenshot = await this.page.screenshot()
-    }
-
-    await testInfo.attach(name, {
-      body: screenshot,
-      contentType: 'image/png'
-    })
-
-    if (options?.markers) {
-      await this.removeMarkers()
-    }
-  }
-
-  async saveCanvasScreenshot(filename: string): Promise<void> {
-    await this.page.evaluate(async (filename) => {
-      const canvas = document.getElementById(
-        'graph-canvas'
-      ) as HTMLCanvasElement
-      if (!canvas) {
-        throw new Error('Canvas not found')
-      }
-
-      return new Promise<void>((resolve) => {
-        canvas.toBlob(async (blob) => {
-          if (!blob) {
-            throw new Error('Failed to create blob from canvas')
-          }
-
-          const url = URL.createObjectURL(blob)
-          const a = document.createElement('a')
-          a.href = url
-          a.download = filename
-          document.body.appendChild(a)
-          a.click()
-          document.body.removeChild(a)
-          URL.revokeObjectURL(url)
-          resolve()
-        }, 'image/png')
-      })
-    }, filename)
-  }
-
-  async getCanvasDataURL(): Promise<string> {
-    return await this.page.evaluate(() => {
-      const canvas = document.getElementById(
-        'graph-canvas'
-      ) as HTMLCanvasElement
-      if (!canvas) {
-        throw new Error('Canvas not found')
-      }
-      return canvas.toDataURL('image/png')
-    })
-  }
-
-  async showCanvasOverlay(): Promise<void> {
-    await this.page.evaluate(() => {
-      const canvas = document.getElementById(
-        'graph-canvas'
-      ) as HTMLCanvasElement
-      if (!canvas) {
-        throw new Error('Canvas not found')
-      }
-
-      const existingOverlay = document.getElementById('debug-canvas-overlay')
-      if (existingOverlay) {
-        existingOverlay.remove()
-      }
-
-      const overlay = document.createElement('div')
-      overlay.id = 'debug-canvas-overlay'
-      overlay.style.position = 'fixed'
-      overlay.style.top = '0'
-      overlay.style.left = '0'
-      overlay.style.zIndex = '9999'
-      overlay.style.backgroundColor = 'white'
-      overlay.style.padding = '10px'
-      overlay.style.border = '2px solid red'
-
-      const img = document.createElement('img')
-      img.src = canvas.toDataURL('image/png')
-      img.style.maxWidth = '800px'
-      img.style.maxHeight = '600px'
-      overlay.appendChild(img)
-
-      document.body.appendChild(overlay)
-    })
-  }
-
-  async hideCanvasOverlay(): Promise<void> {
-    await this.page.evaluate(() => {
-      const overlay = document.getElementById('debug-canvas-overlay')
-      if (overlay) {
-        overlay.remove()
-      }
-    })
-  }
-}

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -115,6 +115,16 @@ export class DragDropHelper {
       const dragOverEvent = new DragEvent('dragover', eventOptions)
       const dropEvent = new DragEvent('drop', eventOptions)
 
+      const graphCanvasElement = document.querySelector('#graph-canvas')
+
+      // Keep Litegraph's drag-over node tracking in sync when the drop target is a
+      // Vue node DOM overlay outside of the graph canvas element.
+      if (graphCanvasElement && !graphCanvasElement.contains(targetElement)) {
+        graphCanvasElement.dispatchEvent(
+          new DragEvent('dragover', eventOptions)
+        )
+      }
+
       Object.defineProperty(dropEvent, 'preventDefault', {
         value: () => {},
         writable: false

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -33,6 +33,10 @@ export class NodeOperationsHelper {
     })
   }
 
+  async getNodeCount(): Promise<number> {
+    return await this.page.evaluate(() => window.app!.graph.nodes.length)
+  }
+
   async getNodes(): Promise<LGraphNode[]> {
     return await this.page.evaluate(() => {
       return window.app!.graph.nodes

browser_tests/fixtures/helpers/PerformanceHelper.ts

@@ -0,0 +1,96 @@
+import type { CDPSession, Page } from '@playwright/test'
+
+interface PerfSnapshot {
+  RecalcStyleCount: number
+  RecalcStyleDuration: number
+  LayoutCount: number
+  LayoutDuration: number
+  TaskDuration: number
+  JSHeapUsedSize: number
+  Timestamp: number
+}
+
+export interface PerfMeasurement {
+  name: string
+  durationMs: number
+  styleRecalcs: number
+  styleRecalcDurationMs: number
+  layouts: number
+  layoutDurationMs: number
+  taskDurationMs: number
+  heapDeltaBytes: number
+}
+
+export class PerformanceHelper {
+  private cdp: CDPSession | null = null
+  private snapshot: PerfSnapshot | null = null
+
+  constructor(private readonly page: Page) {}
+
+  async init(): Promise<void> {
+    this.cdp = await this.page.context().newCDPSession(this.page)
+    await this.cdp.send('Performance.enable')
+  }
+
+  async dispose(): Promise<void> {
+    this.snapshot = null
+    if (this.cdp) {
+      try {
+        await this.cdp.send('Performance.disable')
+      } finally {
+        await this.cdp.detach()
+        this.cdp = null
+      }
+    }
+  }
+
+  private async getSnapshot(): Promise<PerfSnapshot> {
+    if (!this.cdp) throw new Error('PerformanceHelper not initialized')
+    const { metrics } = (await this.cdp.send('Performance.getMetrics')) as {
+      metrics: { name: string; value: number }[]
+    }
+    function get(name: string): number {
+      return metrics.find((m) => m.name === name)?.value ?? 0
+    }
+    return {
+      RecalcStyleCount: get('RecalcStyleCount'),
+      RecalcStyleDuration: get('RecalcStyleDuration'),
+      LayoutCount: get('LayoutCount'),
+      LayoutDuration: get('LayoutDuration'),
+      TaskDuration: get('TaskDuration'),
+      JSHeapUsedSize: get('JSHeapUsedSize'),
+      Timestamp: get('Timestamp')
+    }
+  }
+
+  async startMeasuring(): Promise<void> {
+    if (this.snapshot) {
+      throw new Error(
+        'Measurement already in progress — call stopMeasuring() first'
+      )
+    }
+    this.snapshot = await this.getSnapshot()
+  }
+
+  async stopMeasuring(name: string): Promise<PerfMeasurement> {
+    if (!this.snapshot) throw new Error('Call startMeasuring() first')
+    const after = await this.getSnapshot()
+    const before = this.snapshot
+    this.snapshot = null
+
+    function delta(key: keyof PerfSnapshot): number {
+      return after[key] - before[key]
+    }
+
+    return {
+      name,
+      durationMs: delta('Timestamp') * 1000,
+      styleRecalcs: delta('RecalcStyleCount'),
+      styleRecalcDurationMs: delta('RecalcStyleDuration') * 1000,
+      layouts: delta('LayoutCount'),
+      layoutDurationMs: delta('LayoutDuration') * 1000,
+      taskDurationMs: delta('TaskDuration') * 1000,
+      heapDeltaBytes: delta('JSHeapUsedSize')
+    }
+  }
+}

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -36,7 +36,7 @@ export class SubgraphHelper {
         const currentGraph = app.canvas!.graph!
 
         // Check if we're in a subgraph
-        if (currentGraph.constructor.name !== 'Subgraph') {
+        if (!('inputNode' in currentGraph)) {
           throw new Error(
             'Not in a subgraph - this method only works inside subgraphs'
           )
@@ -88,7 +88,7 @@ export class SubgraphHelper {
 
             if (node.onPointerDown) {
               node.onPointerDown(
-                event as unknown as CanvasPointerEvent,
+                event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
                 app.canvas.pointer,
                 app.canvas.linkConnector
               )
@@ -121,7 +121,7 @@ export class SubgraphHelper {
 
           if (node.onPointerDown) {
             node.onPointerDown(
-              event as unknown as CanvasPointerEvent,
+              event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
               app.canvas.pointer,
               app.canvas.linkConnector
             )
@@ -129,7 +129,7 @@ export class SubgraphHelper {
             // Trigger double-click
             if (app.canvas.pointer.onDoubleClick) {
               app.canvas.pointer.onDoubleClick(
-                event as unknown as CanvasPointerEvent
+                event as Partial<CanvasPointerEvent> as CanvasPointerEvent
               )
             }
           }

browser_tests/fixtures/selectors.ts

@@ -27,11 +27,13 @@ export const TestIds = {
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
+    missingNodes: 'missing-nodes-warning',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section'
   },
   topbar: {
     queueButton: 'queue-button',
+    queueModeMenuTrigger: 'queue-mode-menu-trigger',
     saveButton: 'save-workflow-button'
   },
   nodeLibrary: {
@@ -43,11 +45,21 @@ export const TestIds = {
   node: {
     titleInput: 'node-title-input'
   },
+  selectionToolbox: {
+    colorPickerButton: 'color-picker-button',
+    colorPickerCurrentColor: 'color-picker-current-color',
+    colorBlue: 'blue',
+    colorRed: 'red'
+  },
   widgets: {
     decrement: 'decrement',
     increment: 'increment',
+    domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
+  breadcrumb: {
+    subgraph: 'subgraph-breadcrumb'
+  },
   templates: {
     content: 'template-workflows-content',
     workflowCard: (id: string) => `template-workflow-${id}`
@@ -69,7 +81,9 @@ export type TestIdValue =
   | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
   | (typeof TestIds.node)[keyof typeof TestIds.node]
+  | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
+  | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
       (typeof TestIds.templates)[keyof typeof TestIds.templates],
       (id: string) => string