test: add missing mocks to useJobMenu.test.ts

- Add isCloud mock for Cloud environment handling
- Add ComfyWorkflow export to workflowStore mock
- Add executionStore mock for clearInitializationByPromptId

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

.claude/commands/setup_repo.md

@@ -122,7 +122,7 @@ echo "  pnpm build        - Build for production"
 echo "  pnpm test:unit    - Run unit tests"
 echo "  pnpm typecheck    - Run TypeScript checks"
 echo "  pnpm lint         - Run ESLint"
-echo "  pnpm format       - Format code with Prettier"
+echo "  pnpm format       - Format code with oxfmt"
 echo ""
 echo "Next steps:"
 echo "1. Run 'pnpm dev' to start developing"

.cursor/rules/unit-test.mdc

@@ -1,21 +0,0 @@
----
-description: Creating unit tests
-globs: 
-alwaysApply: false
----
-
-# Creating unit tests
-
-- This project uses `vitest` for unit testing
-- Tests are stored in the `test/` directory
-- Tests should be cross-platform compatible; able to run on Windows, macOS, and linux
-  - e.g. the use of `path.resolve`, or `path.join` and `path.sep` to ensure that tests work the same on all platforms
-- Tests should be mocked properly
-  - Mocks should be cleanly written and easy to understand
-  - Mocks should be re-usable where possible
-
-## Unit test style
-
-- Prefer the use of `test.extend` over loose variables
-  - To achieve this, import `test as baseTest` from `vitest`
-- Never use `it`; `test` should be used in place of this

.github/AGENTS.md

@@ -0,0 +1,14 @@
+# PR Review Context
+
+Context for automated PR review system.
+
+## Review Scope
+
+This automated review performs comprehensive analysis:
+- Architecture and design patterns
+- Security vulnerabilities
+- Performance implications
+- Code quality and maintainability
+- Integration concerns
+
+For implementation details, see `.claude/commands/comprehensive-pr-review.md`.

.github/CLAUDE.md

@@ -1,36 +1,3 @@
-# ComfyUI Frontend - Claude Review Context
-
-This file provides additional context for the automated PR review system.
-
-## Quick Reference
-
-### PrimeVue Component Migrations
-
-When reviewing, flag these deprecated components:
-- `Dropdown` → Use `Select` from 'primevue/select'
-- `OverlayPanel` → Use `Popover` from 'primevue/popover'
-- `Calendar` → Use `DatePicker` from 'primevue/datepicker'
-- `InputSwitch` → Use `ToggleSwitch` from 'primevue/toggleswitch'
-- `Sidebar` → Use `Drawer` from 'primevue/drawer'
-- `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled
-- `TabMenu` → Use `Tabs` without panels
-- `Steps` → Use `Stepper` without panels
-- `InlineMessage` → Use `Message` component
-
-### API Utilities Reference
-
-- `api.apiURL()` - Backend API calls (/prompt, /queue, /view, etc.)
-- `api.fileURL()` - Static file access (templates, extensions)
-- `$t()` / `i18n.global.t()` - Internationalization
-- `DOMPurify.sanitize()` - HTML sanitization
-
-## Review Scope
-
-This automated review performs comprehensive analysis including:
-- Architecture and design patterns
-- Security vulnerabilities
-- Performance implications
-- Code quality and maintainability
-- Integration concerns
-
-For implementation details, see `.claude/commands/comprehensive-pr-review.md`.
+<!-- A rose by any other name would smell as sweet,
+     But Claude insists on files named for its own conceit. -->
+@AGENTS.md

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

@@ -42,7 +42,7 @@ jobs:
       - name: Run Stylelint with auto-fix
         run: pnpm stylelint:fix
 
-      - name: Run Prettier with auto-format
+      - name: Run oxfmt with auto-format
         run: pnpm format
 
       - name: Check for changes
@@ -60,7 +60,7 @@ jobs:
           git config --local user.email "action@github.com"
           git config --local user.name "GitHub Action"
           git add .
-          git commit -m "[automated] Apply ESLint and Prettier fixes"
+          git commit -m "[automated] Apply ESLint and Oxfmt fixes"
           git push
 
       - name: Final validation
@@ -80,7 +80,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting'
+              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Oxfmt formatting'
             })
 
       - name: Comment on PR about manual fix needed

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

@@ -144,9 +144,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
@@ -158,10 +159,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
+          pnpm dlx @playwright/test merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
+          pnpm dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v4

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

@@ -69,7 +69,7 @@ jobs:
       - name: Checkout ComfyUI (sparse)
         uses: actions/checkout@v5
         with:
-          repository: comfyanonymous/ComfyUI
+          repository: Comfy-Org/ComfyUI
           sparse-checkout: |
             requirements.txt
           path: comfyui
@@ -184,7 +184,7 @@ jobs:
           # Note: This only affects the local checkout, NOT the fork's master branch
           # We only push the automation branch, leaving the fork's master untouched
           echo "Fetching upstream master..."
-          if ! git fetch https://github.com/comfyanonymous/ComfyUI.git master; then
+          if ! git fetch https://github.com/Comfy-Org/ComfyUI.git master; then
             echo "Failed to fetch upstream master"
             exit 1
           fi
@@ -257,7 +257,7 @@ jobs:
           # Extract fork owner from repository name
           FORK_OWNER=$(echo "$COMFYUI_FORK" | cut -d'/' -f1)
 
-          echo "Creating PR from ${COMFYUI_FORK} to comfyanonymous/ComfyUI"
+          echo "Creating PR from ${COMFYUI_FORK} to Comfy-Org/ComfyUI"
 
           # Configure git
           git config user.name "github-actions[bot]"
@@ -288,7 +288,7 @@ jobs:
 
           # Try to create PR, ignore error if it already exists
           if ! gh pr create \
-            --repo comfyanonymous/ComfyUI \
+            --repo Comfy-Org/ComfyUI \
             --head "${FORK_OWNER}:${BRANCH}" \
             --base master \
             --title "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}" \
@@ -297,7 +297,7 @@ jobs:
 
             # Check if PR already exists
             set +e
-            EXISTING_PR=$(gh pr list --repo comfyanonymous/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
+            EXISTING_PR=$(gh pr list --repo Comfy-Org/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
             PR_LIST_EXIT=$?
             set -e
 
@@ -318,7 +318,7 @@ jobs:
         run: |
           echo "## ComfyUI PR Created" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
-          echo "Draft PR created in comfyanonymous/ComfyUI" >> $GITHUB_STEP_SUMMARY
+          echo "Draft PR created in Comfy-Org/ComfyUI" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "### PR Body:" >> $GITHUB_STEP_SUMMARY
           cat pr-body.txt >> $GITHUB_STEP_SUMMARY

.i18nrc.cjs

@@ -1,7 +1,7 @@
 // This file is intentionally kept in CommonJS format (.cjs)
 // to resolve compatibility issues with dependencies that require CommonJS.
 // Do not convert this file to ESModule format unless all dependencies support it.
-const { defineConfig } = require('@lobehub/i18n-cli');
+const { defineConfig } = require('@lobehub/i18n-cli')
 
 module.exports = defineConfig({
   modelName: 'gpt-4.1',
@@ -10,7 +10,19 @@ module.exports = defineConfig({
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR', 'fa'],
+  outputLocales: [
+    'zh',
+    'zh-TW',
+    'ru',
+    'ja',
+    'ko',
+    'fr',
+    'es',
+    'ar',
+    'tr',
+    'pt-BR',
+    'fa'
+  ],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
@@ -26,4 +38,4 @@ module.exports = defineConfig({
   - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate.
   - Maintain consistency with terminology used in Persian software and design applications.
   `
-});
+})

.oxfmtrc.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false,
+  "trailingComma": "none",
+  "printWidth": 80,
+  "ignorePatterns": [
+    "packages/registry-types/src/comfyRegistryTypes.ts",
+    "src/types/generatedManagerTypes.ts",
+    "**/*.md",
+    "**/*.json",
+    "**/*.css",
+    "**/*.yaml",
+    "**/*.yml",
+    "**/*.html",
+    "**/*.svg",
+    "**/*.xml"
+  ]
+}

.prettierignore

@@ -1,2 +0,0 @@
-packages/registry-types/src/comfyRegistryTypes.ts
-src/types/generatedManagerTypes.ts

.prettierrc

@@ -1,11 +0,0 @@
-{
-  "singleQuote": true,
-  "tabWidth": 2,
-  "semi": false,
-  "trailingComma": "none",
-  "printWidth": 80,
-  "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "plugins": ["@prettier/plugin-oxc", "@trivago/prettier-plugin-sort-imports"]
-}

.storybook/AGENTS.md

@@ -0,0 +1,17 @@
+# Storybook Guidelines
+
+See `@docs/guidance/storybook.md` for story patterns (auto-loaded for `*.stories.ts`).
+
+## Available Context
+
+Stories have access to:
+- All ComfyUI stores
+- PrimeVue with ComfyUI theming
+- i18n system
+- CSS variables and styling
+
+## Troubleshooting
+
+1. **Import Errors**: Verify `@/` alias works
+2. **Missing Styles**: Check CSS imports in `preview.ts`
+3. **Store Errors**: Check store initialization in setup

.storybook/CLAUDE.md

@@ -1,197 +1,3 @@
-# Storybook Development Guidelines for Claude
-
-## Quick Commands
-
-- `pnpm storybook`: Start Storybook development server
-- `pnpm build-storybook`: Build static Storybook
-- `pnpm test:unit`: Run unit tests (includes Storybook components)
-
-## Development Workflow for Storybook
-
-1. **Creating New Stories**:
-   - Place `*.stories.ts` files alongside components
-   - Follow the naming pattern: `ComponentName.stories.ts`
-   - Use realistic mock data that matches ComfyUI schemas
-
-2. **Testing Stories**:
-   - Verify stories render correctly in Storybook UI
-   - Test different component states and edge cases
-   - Ensure proper theming and styling
-
-3. **Code Quality**:
-   - Run `pnpm typecheck` to verify TypeScript
-   - Run `pnpm lint` to check for linting issues
-   - Follow existing story patterns and conventions
-
-## Story Creation Guidelines
-
-### Basic Story Structure
-
-```typescript
-import type { Meta, StoryObj } from '@storybook/vue3'
-import ComponentName from './ComponentName.vue'
-
-const meta: Meta<typeof ComponentName> = {
-  title: 'Category/ComponentName',
-  component: ComponentName,
-  parameters: {
-    layout: 'centered' // or 'fullscreen', 'padded'
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    // Component props
-  }
-}
-```
-
-### Mock Data Patterns
-
-For ComfyUI components, use realistic mock data:
-
-```typescript
-// Node definition mock
-const mockNodeDef = {
-  input: {
-    required: {
-      prompt: ["STRING", { multiline: true }]
-    }
-  },
-  output: ["CONDITIONING"],
-  output_is_list: [false],
-  category: "conditioning"
-}
-
-// Component instance mock
-const mockComponent = {
-  id: "1",
-  type: "CLIPTextEncode",
-  // ... other properties
-}
-```
-
-### Common Story Variants
-
-Always include these story variants when applicable:
-
-- **Default**: Basic component with minimal props
-- **WithData**: Component with realistic data
-- **Loading**: Component in loading state
-- **Error**: Component with error state
-- **LongContent**: Component with edge case content
-- **Empty**: Component with no data
-
-### Storybook-Specific Code Patterns
-
-#### Store Access
-```typescript
-// In stories, access stores through the setup function
-export const WithStore: Story = {
-  render: () => ({
-    setup() {
-      const store = useMyStore()
-      return { store }
-    },
-    template: '<MyComponent :data="store.data" />'
-  })
-}
-```
-
-#### Event Testing
-```typescript
-export const WithEvents: Story = {
-  args: {
-    onUpdate: fn() // Use Storybook's fn() for action logging
-  }
-}
-```
-
-## Configuration Notes
-
-### Vue App Setup
-The Storybook preview is configured with:
-- Pinia stores initialized
-- PrimeVue with ComfyUI theme
-- i18n internationalization
-- All necessary CSS imports
-
-### Build Configuration
-- Vite integration with proper alias resolution
-- Manual chunking for better performance
-- TypeScript support with strict checking
-- CSS processing for Vue components
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Import Errors**: Verify `@/` alias is working correctly
-2. **Missing Styles**: Ensure CSS imports are in `preview.ts`
-3. **Store Errors**: Check store initialization in setup
-4. **Type Errors**: Use proper TypeScript types for story args
-
-### Debug Commands
-
-```bash
-# Check TypeScript issues
-pnpm typecheck
-
-# Lint Storybook files
-pnpm lint .storybook/
-
-# Build to check for production issues
-pnpm build-storybook
-```
-
-## File Organization
-
-```
-.storybook/
-├── main.ts          # Core configuration
-├── preview.ts       # Global setup and decorators
-├── README.md        # User documentation
-└── CLAUDE.md        # This file - Claude guidelines
-
-src/
-├── components/
-│   └── MyComponent/
-│       ├── MyComponent.vue
-│       └── MyComponent.stories.ts
-```
-
-## Integration with ComfyUI
-
-### Available Context
-
-Stories have access to:
-- All ComfyUI stores (widgetStore, colorPaletteStore, etc.)
-- PrimeVue components with ComfyUI theming
-- Internationalization system
-- ComfyUI CSS variables and styling
-
-### Testing Components
-
-When testing ComfyUI-specific components:
-1. Use realistic node definitions and data structures
-2. Test with different node types (sampling, conditioning, etc.)
-3. Verify proper CSS theming and dark/light modes
-4. Check component behavior with various input combinations
-
-### Performance Considerations
-
-- Use manual chunking for large dependencies
-- Minimize bundle size by avoiding unnecessary imports
-- Leverage Storybook's lazy loading capabilities
-- Profile build times and optimize as needed
-
-## Best Practices
-
-1. **Keep Stories Focused**: Each story should demonstrate one specific use case
-2. **Use Descriptive Names**: Story names should clearly indicate what they show
-3. **Document Complex Props**: Use JSDoc comments for complex prop types
-4. **Test Edge Cases**: Create stories for unusual but valid use cases
-5. **Maintain Consistency**: Follow established patterns in existing stories
+<!-- Though standards bloom in open fields so wide,
+     Anthropic walks a path of lonely pride. -->
+@AGENTS.md

.storybook/main.ts

@@ -96,15 +96,15 @@ const config: StorybookConfig = {
           }
         ]
       },
-      esbuild: {
-        // Prevent minification of identifiers to preserve _sfc_main
-        minifyIdentifiers: false,
-        keepNames: true
-      },
       build: {
-        rollupOptions: {
-          // Disable tree-shaking for Storybook to prevent Vue SFC exports from being removed
+        rolldownOptions: {
+          experimental: {
+            strictExecutionOrder: true
+          },
           treeshake: false,
+          output: {
+            keepNames: true
+          },
           onwarn: (warning, warn) => {
             // Suppress specific warnings
             if (

.vscode/extensions.json

@@ -1,25 +1,22 @@
 {
   "recommendations": [
+    "antfu.vite",
     "austenc.tailwind-docs",
     "bradlc.vscode-tailwindcss",
     "davidanson.vscode-markdownlint",
     "dbaeumer.vscode-eslint",
+    "donjayamanne.githistory",
     "eamodio.gitlens",
-    "esbenp.prettier-vscode",
-    "figma.figma-vscode-extension",
     "github.vscode-github-actions",
     "github.vscode-pull-request-github",
     "hbenl.vscode-test-explorer",
+    "kisstkondoros.vscode-codemetrics",
     "lokalise.i18n-ally",
     "ms-playwright.playwright",
+    "oxc.oxc-vscode",
+    "sonarsource.sonarlint-vscode",
     "vitest.explorer",
     "vue.volar",
-    "sonarsource.sonarlint-vscode",
-    "deque-systems.vscode-axe-linter",
-    "kisstkondoros.vscode-codemetrics",
-    "donjayamanne.githistory",
-    "wix.vscode-import-cost",
-    "prograhammer.tslint-vue",
-    "antfu.vite"
+    "wix.vscode-import-cost"
   ]
 }

AGENTS.md

@@ -1,5 +1,7 @@
 # Repository Guidelines
 
+See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob).
+
 ## Project Structure & Module Organization
 
 - Source: `src/`
@@ -25,10 +27,10 @@
 - Build output: `dist/`
 - Configs
   - `vite.config.mts`
-  - `vitest.config.ts`
   - `playwright.config.ts`
   - `eslint.config.ts`
-  - `.prettierrc`
+  - `.oxfmtrc.json`
+  - `.oxlintrc.json`
   - etc.
 
 ## Monorepo Architecture
@@ -44,8 +46,23 @@ The project uses **Nx** for build orchestration and task management
 - `pnpm test:unit`: Run Vitest unit tests
 - `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`)
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
-- `pnpm format` / `pnpm format:check`: Prettier
+- `pnpm format` / `pnpm format:check`: oxfmt
 - `pnpm typecheck`: Vue TSC type checking
+- `pnpm storybook`: Start Storybook development server
+
+## Development Workflow
+
+1. Make code changes
+2. Run relevant tests
+3. Run `pnpm typecheck`, `pnpm lint`, `pnpm format`
+4. Check if README updates are needed
+5. Suggest docs.comfy.org updates for user-facing changes
+
+## Git Conventions
+
+- Use `prefix:` format: `feat:`, `fix:`, `test:`
+- Add "Fixes #n" to PR descriptions
+- Never mention Claude/AI in commits
 
 ## Coding Style & Naming Conventions
 
@@ -55,7 +72,7 @@ The project uses **Nx** for build orchestration and task management
     - Composition API only
   - Tailwind 4 styling
     - Avoid `<style>` blocks
-- Style: (see `.prettierrc`)
+- Style: (see `.oxfmtrc.json`)
   - Indent 2 spaces
   - single quotes
   - no trailing semicolons

CLAUDE.md

@@ -1,30 +1 @@
-# Claude Code specific instructions
-
-@Agents.md
-
-## Repository Setup
-
-For first-time setup, use the Claude command:
-
-```sh
-/setup_repo
-```
-
-This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
-
-**Prerequisites:** Node.js >= 24, Git repository, available ports for dev server, storybook, etc.
-
-## Development Workflow
-
-1. **First-time setup**: Run `/setup_repo` Claude command
-2. Make code changes
-3. Run tests (see subdirectory CLAUDE.md files)
-4. Run typecheck, lint, format
-5. Check README updates
-6. Consider docs.comfy.org updates
-
-## Git Conventions
-
-- Use `prefix:` format: `feat:`, `fix:`, `test:`
-- Add "Fixes #n" to PR descriptions
-- Never mention Claude/AI in commits
+@AGENTS.md

CODEOWNERS

@@ -37,7 +37,7 @@
 /src/components/graph/selectionToolbox/           @Myestery
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery 
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
 
 # Workflow Templates
 /src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
@@ -55,8 +55,7 @@
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
-/src/locales/pt-BR/                               @JonatanAtila @Yorha4D @KarryCharon @shinshin86
+/src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
 
 # LLM Instructions (blank on purpose)
 .claude/

apps/desktop-ui/vite.config.mts

@@ -64,7 +64,7 @@ export default defineConfig(() => {
       })
     ],
     build: {
-      minify: SHOULD_MINIFY ? ('esbuild' as const) : false,
+      minify: SHOULD_MINIFY,
       target: 'es2022',
       sourcemap: true
     }

browser_tests/AGENTS.md

@@ -0,0 +1,8 @@
+# E2E Testing Guidelines
+
+See `@docs/guidance/playwright.md` for Playwright best practices (auto-loaded for `*.spec.ts`).
+
+## Directory Structure
+
+- `assets/` - Test data (JSON workflows, fixtures)
+- Tests use premade JSON workflows to load desired graph state

browser_tests/CLAUDE.md

@@ -1,17 +1,3 @@
-# E2E Testing Guidelines
-
-## Browser Tests
-- Test user workflows
-- Use Playwright fixtures
-- Follow naming conventions
-
-## Best Practices
-- Check assets/ for test data
-- Prefer specific selectors
-- Test across viewports
-
-## Testing Process
-After code changes:
-1. Create browser tests as appropriate
-2. Run tests until passing
-3. Then run typecheck, lint, format
+<!-- In gardens where the agents freely play,
+     One stubborn flower turns the other way. -->
+@AGENTS.md

browser_tests/fixtures/ComfyPage.ts

@@ -3,7 +3,7 @@ import { test as base, expect } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'
 
-import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
+import type { LGraphNode, LGraph } from '../../src/lib/litegraph/src/litegraph'
 import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
@@ -21,7 +21,6 @@ import {
 import { Topbar } from './components/Topbar'
 import type { Position, Size } from './types'
 import { NodeReference, SubgraphSlotReference } from './utils/litegraphUtils'
-import TaskHistory from './utils/taskHistory'
 
 dotenv.config()
 
@@ -146,8 +145,6 @@ class ConfirmDialog {
 }
 
 export class ComfyPage {
-  private _history: TaskHistory | null = null
-
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
   public readonly canvas: Locator
@@ -301,11 +298,6 @@ export class ComfyPage {
     }
   }
 
-  setupHistory(): TaskHistory {
-    this._history ??= new TaskHistory(this)
-    return this._history
-  }
-
   async setup({
     clearStorage = true,
     mockReleases = true
@@ -1591,14 +1583,29 @@ export class ComfyPage {
       return window['app'].graph.nodes
     })
   }
-  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
+  async waitForGraphNodes(count: number) {
+    await this.page.waitForFunction((count) => {
+      return window['app']?.canvas.graph?.nodes?.length === count
+    }, count)
+  }
+  async getNodeRefsByType(
+    type: string,
+    includeSubgraph: boolean = false
+  ): Promise<NodeReference[]> {
     return Promise.all(
       (
-        await this.page.evaluate((type) => {
-          return window['app'].graph.nodes
-            .filter((n: LGraphNode) => n.type === type)
-            .map((n: LGraphNode) => n.id)
-        }, type)
+        await this.page.evaluate(
+          ({ type, includeSubgraph }) => {
+            const graph = (
+              includeSubgraph ? window['app'].canvas.graph : window['app'].graph
+            ) as LGraph
+            const nodes = graph.nodes
+            return nodes
+              .filter((n: LGraphNode) => n.type === type)
+              .map((n: LGraphNode) => n.id)
+          },
+          { type, includeSubgraph }
+        )
       ).map((id: NodeId) => this.getNodeRefById(id))
     )
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -159,8 +159,18 @@ export class VueNodeHelpers {
   getInputNumberControls(widget: Locator) {
     return {
       input: widget.locator('input'),
-      incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').nth(1)
+      decrementButton: widget.getByTestId('decrement'),
+      incrementButton: widget.getByTestId('increment')
     }
   }
+
+  /**
+   * Enter the subgraph of a node.
+   * @param nodeId - The ID of the node to enter the subgraph of. If not provided, the first matched subgraph will be entered.
+   */
+  async enterSubgraph(nodeId?: string): Promise<void> {
+    const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
+    const editButton = locator.getByTestId('subgraph-enter-button')
+    await editButton.click()
+  }
 }

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -79,48 +79,15 @@ export class SubgraphSlotReference {
 
         const node =
           type === 'input' ? currentGraph.inputNode : currentGraph.outputNode
-        const slots =
-          type === 'input' ? currentGraph.inputs : currentGraph.outputs
 
         if (!node) {
           throw new Error(`No ${type} node found in subgraph`)
         }
 
-        // Calculate position for next available slot
-        // const nextSlotIndex = slots?.length || 0
-        // const slotHeight = 20
-        // const slotY = node.pos[1] + 30 + nextSlotIndex * slotHeight
-
-        // Find last slot position
-        const lastSlot = slots.at(-1)
-        let slotX: number
-        let slotY: number
-
-        if (lastSlot) {
-          // If there are existing slots, position the new one below the last one
-          const gapHeight = 20
-          slotX = lastSlot.pos[0]
-          slotY = lastSlot.pos[1] + gapHeight
-        } else {
-          // No existing slots - use slotAnchorX if available, otherwise calculate from node position
-          if (currentGraph.slotAnchorX !== undefined) {
-            // The actual slot X position seems to be slotAnchorX - 10
-            slotX = currentGraph.slotAnchorX - 10
-          } else {
-            // Fallback: calculate from node edge
-            slotX =
-              type === 'input'
-                ? node.pos[0] + node.size[0] - 10 // Right edge for input node
-                : node.pos[0] + 10 // Left edge for output node
-          }
-          // For Y position when no slots exist, use middle of node
-          slotY = node.pos[1] + node.size[1] / 2
-        }
-
         // Convert from offset to canvas coordinates
         const canvasPos = window['app'].canvas.ds.convertOffsetToCanvas([
-          slotX,
-          slotY
+          node.emptySlot.pos[0],
+          node.emptySlot.pos[1]
         ])
         return canvasPos
       },

browser_tests/fixtures/utils/taskHistory.ts

@@ -1,164 +0,0 @@
-import type { Request, Route } from '@playwright/test'
-import _ from 'es-toolkit/compat'
-import fs from 'fs'
-import path from 'path'
-import { v4 as uuidv4 } from 'uuid'
-
-import type {
-  HistoryTaskItem,
-  TaskItem,
-  TaskOutput
-} from '../../../src/schemas/apiSchema'
-import type { ComfyPage } from '../ComfyPage'
-
-/** keyof TaskOutput[string] */
-type OutputFileType = 'images' | 'audio' | 'animated'
-
-const DEFAULT_IMAGE = 'example.webp'
-
-const getFilenameParam = (request: Request) => {
-  const url = new URL(request.url())
-  return url.searchParams.get('filename') || DEFAULT_IMAGE
-}
-
-const getContentType = (filename: string, fileType: OutputFileType) => {
-  const subtype = path.extname(filename).slice(1)
-  switch (fileType) {
-    case 'images':
-      return `image/${subtype}`
-    case 'audio':
-      return `audio/${subtype}`
-    case 'animated':
-      return `video/${subtype}`
-  }
-}
-
-const setQueueIndex = (task: TaskItem) => {
-  task.prompt[0] = TaskHistory.queueIndex++
-}
-
-const setPromptId = (task: TaskItem) => {
-  task.prompt[1] = uuidv4()
-}
-
-export default class TaskHistory {
-  static queueIndex = 0
-  static readonly defaultTask: Readonly<HistoryTaskItem> = {
-    prompt: [0, 'prompt-id', {}, { client_id: uuidv4() }, []],
-    outputs: {},
-    status: {
-      status_str: 'success',
-      completed: true,
-      messages: []
-    },
-    taskType: 'History'
-  }
-  private tasks: HistoryTaskItem[] = []
-  private outputContentTypes: Map<string, string> = new Map()
-
-  constructor(readonly comfyPage: ComfyPage) {}
-
-  private loadAsset: (filename: string) => Buffer = _.memoize(
-    (filename: string) => {
-      const filePath = this.comfyPage.assetPath(filename)
-      return fs.readFileSync(filePath)
-    }
-  )
-
-  private async handleGetHistory(route: Route) {
-    return route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify(this.tasks)
-    })
-  }
-
-  private async handleGetView(route: Route) {
-    const fileName = getFilenameParam(route.request())
-    if (!this.outputContentTypes.has(fileName)) {
-      return route.continue()
-    }
-
-    const asset = this.loadAsset(fileName)
-    return route.fulfill({
-      status: 200,
-      contentType: this.outputContentTypes.get(fileName),
-      body: asset,
-      headers: {
-        'Cache-Control': 'public, max-age=31536000',
-        'Content-Length': asset.byteLength.toString()
-      }
-    })
-  }
-
-  async setupRoutes() {
-    return this.comfyPage.page.route(
-      /.*\/api\/(view|history)(\?.*)?$/,
-      async (route) => {
-        const request = route.request()
-        const method = request.method()
-
-        const isViewReq = request.url().includes('view') && method === 'GET'
-        if (isViewReq) return this.handleGetView(route)
-
-        const isHistoryPath = request.url().includes('history')
-        const isGetHistoryReq = isHistoryPath && method === 'GET'
-        if (isGetHistoryReq) return this.handleGetHistory(route)
-
-        const isClearReq =
-          method === 'POST' &&
-          isHistoryPath &&
-          request.postDataJSON()?.clear === true
-        if (isClearReq) return this.clearTasks()
-
-        return route.continue()
-      }
-    )
-  }
-
-  private createOutputs(
-    filenames: string[],
-    filetype: OutputFileType
-  ): TaskOutput {
-    return filenames.reduce((outputs, filename, i) => {
-      const nodeId = `${i + 1}`
-      outputs[nodeId] = {
-        [filetype]: [{ filename, subfolder: '', type: 'output' }]
-      }
-      const contentType = getContentType(filename, filetype)
-      this.outputContentTypes.set(filename, contentType)
-      return outputs
-    }, {})
-  }
-
-  private addTask(task: HistoryTaskItem) {
-    setPromptId(task)
-    setQueueIndex(task)
-    this.tasks.unshift(task) // Tasks are added to the front of the queue
-  }
-
-  clearTasks(): this {
-    this.tasks = []
-    return this
-  }
-
-  withTask(
-    outputFilenames: string[],
-    outputFiletype: OutputFileType = 'images',
-    overrides: Partial<HistoryTaskItem> = {}
-  ): this {
-    this.addTask({
-      ...TaskHistory.defaultTask,
-      outputs: this.createOutputs(outputFilenames, outputFiletype),
-      ...overrides
-    })
-    return this
-  }
-
-  /** Repeats the last task in the task history a specified number of times. */
-  repeat(n: number): this {
-    for (let i = 0; i < n; i++)
-      this.addTask(structuredClone(this.tasks.at(0)) as HistoryTaskItem)
-    return this
-  }
-}

browser_tests/tests/mobileBaseline.spec.ts

@@ -22,8 +22,14 @@ test.describe('Mobile Baseline Snapshots', () => {
   test('@mobile settings dialog', async ({ comfyPage }) => {
     await comfyPage.settingDialog.open()
     await comfyPage.nextFrame()
+
     await expect(comfyPage.settingDialog.root).toHaveScreenshot(
-      'mobile-settings-dialog.png'
+      'mobile-settings-dialog.png',
+      {
+        mask: [
+          comfyPage.settingDialog.root.getByTestId('current-user-indicator')
+        ]
+      }
     )
   })
 })

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

@@ -8,13 +8,11 @@ test.describe('Properties panel', () => {
 
     const { propertiesPanel } = comfyPage.menu
 
-    await expect(propertiesPanel.panelTitle).toContainText(
-      'No node(s) selected'
-    )
+    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')
 
     await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
 
-    await expect(propertiesPanel.panelTitle).toContainText('3 nodes selected')
+    await expect(propertiesPanel.panelTitle).toContainText('3 items selected')
     await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
     await expect(
       propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -102,7 +102,7 @@ test.describe('Vue Node Link Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
+    // await comfyPage.setup()
     await comfyPage.loadWorkflow('vueNodes/simple-triple')
     await comfyPage.vueNodes.waitForNodes()
     await fitToViewInstant(comfyPage)
@@ -993,4 +993,51 @@ test.describe('Vue Node Link Interaction', () => {
       expect(linked).toBe(true)
     })
   })
+
+  test('Dragging from subgraph input connects to correct slot', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    // Setup workflow with a KSampler node
+    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.waitForGraphNodes(0)
+    await comfyPage.executeCommand('Workspace.SearchBox.Toggle')
+    await comfyPage.nextFrame()
+    await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+    await comfyPage.waitForGraphNodes(1)
+
+    // Convert the KSampler node to a subgraph
+    let ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler'))?.[0]
+    await comfyPage.vueNodes.selectNode(String(ksamplerNode.id))
+    await comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph')
+
+    // Enter the subgraph
+    await comfyPage.vueNodes.enterSubgraph()
+    await fitToViewInstant(comfyPage)
+
+    // Get the KSampler node inside the subgraph
+    ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler', true))?.[0]
+    const positiveInput = await ksamplerNode.getInput(1)
+    const negativeInput = await ksamplerNode.getInput(2)
+
+    const positiveInputPos = await getSlotCenter(
+      comfyPage.page,
+      ksamplerNode.id,
+      1,
+      true
+    )
+
+    const sourceSlot = await comfyPage.getSubgraphInputSlot()
+    const calculatedSourcePos = await sourceSlot.getOpenSlotPosition()
+
+    await comfyMouse.move(calculatedSourcePos)
+    await comfyMouse.drag(positiveInputPos)
+    await comfyMouse.drop()
+
+    // Verify connection went to the correct slot
+    const positiveLinks = await positiveInput.getLinkCount()
+    const negativeLinks = await negativeInput.getLinkCount()
+    expect(positiveLinks).toBe(1)
+    expect(negativeLinks).toBe(0)
+  })
 })

browser_tests/tests/widget.spec.ts

@@ -194,7 +194,10 @@ test.describe('Image widget', () => {
     const comboEntry = comfyPage.page.getByRole('menuitem', {
       name: 'image32x32.webp'
     })
-    await comboEntry.click({ noWaitAfter: true })
+    await comboEntry.click()
+
+    // Stabilization for the image swap
+    await comfyPage.nextFrame()
 
     // Expect the image preview to change automatically
     await expect(comfyPage.canvas).toHaveScreenshot(

docs/guidance/playwright.md

@@ -0,0 +1,33 @@
+---
+globs:
+  - '**/*.spec.ts'
+---
+
+# Playwright E2E Test Conventions
+
+See `docs/testing/*.md` for detailed patterns.
+
+## Best Practices
+
+- Follow [Playwright Best Practices](https://playwright.dev/docs/best-practices)
+- Do NOT use `waitForTimeout` - use Locator actions and retrying assertions
+- Prefer specific selectors (role, label, test-id)
+- Test across viewports
+
+## Test Tags
+
+Tags are respected by config:
+- `@mobile` - Mobile viewport tests
+- `@2x` - High DPI tests
+
+## Test Data
+
+- Check `browser_tests/assets/` for test data and fixtures
+- Use realistic ComfyUI workflows for E2E tests
+
+## Running Tests
+
+```bash
+pnpm test:browser                 # Run all E2E tests
+pnpm test:browser -- --ui         # Interactive UI mode
+```

docs/guidance/storybook.md

@@ -0,0 +1,55 @@
+---
+globs:
+  - '**/*.stories.ts'
+---
+
+# Storybook Conventions
+
+## File Placement
+
+Place `*.stories.ts` files alongside their components:
+```
+src/components/MyComponent/
+├── MyComponent.vue
+└── MyComponent.stories.ts
+```
+
+## Story Structure
+
+```typescript
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ComponentName from './ComponentName.vue'
+
+const meta: Meta<typeof ComponentName> = {
+  title: 'Category/ComponentName',
+  component: ComponentName,
+  parameters: { layout: 'centered' }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { /* props */ }
+}
+```
+
+## Required Story Variants
+
+Include when applicable:
+- **Default** - Minimal props
+- **WithData** - Realistic data
+- **Loading** - Loading state
+- **Error** - Error state
+- **Empty** - No data
+
+## Mock Data
+
+Use realistic ComfyUI schemas for mocks (node definitions, components).
+
+## Running Storybook
+
+```bash
+pnpm storybook        # Development server
+pnpm build-storybook  # Production build
+```

docs/guidance/typescript.md

@@ -0,0 +1,37 @@
+---
+globs:
+  - '**/*.ts'
+  - '**/*.tsx'
+  - '**/*.vue'
+---
+
+# TypeScript Conventions
+
+## Type Safety
+
+- Never use `any` type - use proper TypeScript types
+- Never use `as any` type assertions - fix the underlying type issue
+- Type assertions are a last resort; they lead to brittle code
+- Avoid `@ts-expect-error` - fix the underlying issue instead
+
+## Utility Libraries
+
+- Use `es-toolkit` for utility functions (not lodash)
+
+## API Utilities
+
+When making API calls in `src/`:
+
+```typescript
+// ✅ Correct - use api helpers
+const response = await api.get(api.apiURL('/prompt'))
+const template = await fetch(api.fileURL('/templates/default.json'))
+
+// ❌ Wrong - direct URL construction
+const response = await fetch('/api/prompt')
+```
+
+## Security
+
+- Sanitize HTML with `DOMPurify.sanitize()`
+- Never log secrets or sensitive data

docs/guidance/vitest.md

@@ -0,0 +1,36 @@
+---
+globs:
+  - '**/*.test.ts'
+---
+
+# Vitest Unit Test Conventions
+
+See `docs/testing/*.md` for detailed patterns.
+
+## Test Quality
+
+- Do not write change detector tests (tests that just assert defaults)
+- Do not write tests dependent on non-behavioral features (styles, classes)
+- Do not write tests that just test mocks - ensure real code is exercised
+- Be parsimonious; avoid redundant tests
+
+## Mocking
+
+- Use Vitest's mocking utilities (`vi.mock`, `vi.spyOn`)
+- Keep module mocks contained - no global mutable state
+- Use `vi.hoisted()` for per-test mock manipulation
+- Don't mock what you don't own
+
+## Component Testing
+
+- Use Vue Test Utils for component tests
+- Follow advice about making components easy to test
+- Wait for reactivity with `await nextTick()` after state changes
+
+## Running Tests
+
+```bash
+pnpm test:unit                    # Run all unit tests
+pnpm test:unit -- path/to/file    # Run specific test
+pnpm test:unit -- --watch         # Watch mode
+```

docs/guidance/vue-components.md

@@ -0,0 +1,46 @@
+---
+globs:
+  - '**/*.vue'
+---
+
+# Vue Component Conventions
+
+Applies to all `.vue` files anywhere in the codebase.
+
+## Vue 3 Composition API
+
+- Use `<script setup lang="ts">` for component logic
+- Destructure props (Vue 3.5 style with defaults) like `const { color = 'blue' } = defineProps<...>()`
+- Use `ref`/`reactive` for state
+- Use `computed()` for derived state
+- Use lifecycle hooks: `onMounted`, `onUpdated`, etc.
+
+## Component Communication
+
+- Prefer `emit/@event-name` for state changes (promotes loose coupling)
+- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
+- Proper props and emits definitions
+
+## VueUse Composables
+
+Prefer VueUse composables over manual event handling:
+
+- `useElementHover` instead of manual mouseover/mouseout listeners
+- `useIntersectionObserver` for visibility detection instead of scroll handlers
+- `useFocusTrap` for modal/dialog focus management
+- `useEventListener` for auto-cleanup event listeners
+
+Prefer Vue native options when available:
+
+- `defineModel` instead of `useVModel` for two-way binding with props
+
+## Styling
+
+- Use inline Tailwind CSS only (no `<style>` blocks)
+- Use `cn()` from `@/utils/tailwindUtil` for conditional classes
+- Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
+
+## Best Practices
+
+- Extract complex conditionals to `computed`
+- In unmounted hooks, implement cleanup for async operations

eslint.config.ts

@@ -4,9 +4,7 @@ import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
-// WORKAROUND: eslint-plugin-prettier causes segfault on Node.js 24 + Windows
-// See: https://github.com/nodejs/node/issues/58690
-// Prettier is still run separately in lint-staged, so this is safe to disable
+// eslint-config-prettier disables ESLint rules that conflict with formatters (oxfmt)
 import eslintConfigPrettier from 'eslint-config-prettier'
 import { configs as storybookConfigs } from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
@@ -111,7 +109,7 @@ export default defineConfig([
   tseslintConfigs.recommended,
   // Difference in typecheck on CI vs Local
   pluginVue.configs['flat/recommended'],
-  // Use eslint-config-prettier instead of eslint-plugin-prettier to avoid Node 24 segfault
+  // Disables ESLint rules that conflict with formatters
   eslintConfigPrettier,
   // @ts-expect-error Type incompatibility between storybook plugin and ESLint config types
   storybookConfigs['flat/recommended'],

lint-staged.config.ts

@@ -1,6 +1,9 @@
 import path from 'node:path'
 
 export default {
+  'tests-ui/**': () =>
+    'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
+
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => [
@@ -14,7 +17,7 @@ function formatAndEslint(fileNames: string[]) {
   const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
   const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
   return [
-    `pnpm exec prettier --cache --write ${joinedPaths}`,
+    `pnpm exec oxfmt --write ${joinedPaths}`,
     `pnpm exec oxlint --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]

manifest.json

@@ -3,6 +3,13 @@
   "short_name": "ComfyUI",
   "description": "ComfyUI: AI image generation platform",
   "start_url": "/",
+  "icons": [
+    {
+      "src": "/assets/images/comfy-logo-single.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ],
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#000000"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.37.10",
+  "version": "1.38.8",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -22,10 +22,8 @@
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
-    "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
-    "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
-    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
-    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
+    "format:check": "oxfmt --check",
+    "format": "oxfmt --write",
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "knip:no-cache": "knip",
     "knip": "knip --cache",
@@ -63,14 +61,12 @@
     "@nx/vite": "catalog:",
     "@pinia/testing": "catalog:",
     "@playwright/test": "catalog:",
-    "@prettier/plugin-oxc": "catalog:",
     "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
     "@storybook/addon-mcp": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
-    "@trivago/prettier-plugin-sort-imports": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -101,11 +97,11 @@
     "markdown-table": "catalog:",
     "mixpanel-browser": "catalog:",
     "nx": "catalog:",
+    "oxfmt": "catalog:",
     "oxlint": "catalog:",
     "oxlint-tsgolint": "catalog:",
     "picocolors": "catalog:",
     "postcss-html": "catalog:",
-    "prettier": "catalog:",
     "pretty-bytes": "catalog:",
     "rollup-plugin-visualizer": "catalog:",
     "storybook": "catalog:",
@@ -192,5 +188,10 @@
     "yjs": "catalog:",
     "zod": "catalog:",
     "zod-validation-error": "catalog:"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "^8.0.0-beta.8"
+    }
   }
 }

packages/design-system/src/css/style.css

@@ -247,6 +247,7 @@
   --inverted-background-hover: var(--color-charcoal-600);
   --warning-background: var(--color-gold-400);
   --warning-background-hover: var(--color-gold-500);
+  --success-background: var(--color-jade-600);
   --border-default: var(--color-smoke-600);
   --border-subtle: var(--color-smoke-400);
   --muted-background: var(--color-smoke-700);
@@ -281,7 +282,7 @@
    --modal-card-border-highlighted: var(--secondary-background-selected);
    --modal-card-button-surface: var(--color-smoke-300);
    --modal-card-placeholder-background: var(--color-smoke-600);
-   --modal-card-tag-background: var(--color-smoke-400);
+   --modal-card-tag-background: var(--color-smoke-200);
    --modal-card-tag-foreground: var(--base-foreground);
    --modal-panel-background: var(--color-white);
 }
@@ -372,6 +373,7 @@
   --inverted-background-hover: var(--color-smoke-200);
   --warning-background: var(--color-gold-600);
   --warning-background-hover: var(--color-gold-500);
+  --success-background: var(--color-jade-600);
   --border-default: var(--color-charcoal-200);
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
@@ -516,6 +518,7 @@
   --color-inverted-background-hover: var(--inverted-background-hover);
   --color-warning-background: var(--warning-background);
   --color-warning-background-hover: var(--warning-background-hover);
+  --color-success-background: var(--success-background);
   --color-border-default: var(--border-default);
   --color-border-subtle: var(--border-subtle);
   --color-muted-background: var(--muted-background);

pnpm-workspace.yaml

@@ -17,7 +17,6 @@ catalog:
   '@nx/vite': 22.2.6
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.57.0
-  '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
   '@primeuix/utils': ^0.3.2
@@ -33,7 +32,6 @@ catalog:
   '@storybook/vue3': ^10.1.9
   '@storybook/vue3-vite': ^10.1.9
   '@tailwindcss/vite': ^4.1.12
-  '@trivago/prettier-plugin-sort-imports': ^5.2.0
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^24.1.0
@@ -70,12 +68,12 @@ catalog:
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 22.2.6
+  oxfmt: ^0.26.0
   oxlint: ^1.33.0
   oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
-  prettier: ^3.7.4
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
@@ -93,7 +91,7 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
-  vite: ^7.3.0
+  vite: ^8.0.0-beta.8
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0

scripts/vite-define-shim.ts

@@ -12,6 +12,7 @@ declare global {
   const __ALGOLIA_API_KEY__: string
   const __USE_PROD_CONFIG__: boolean
   const __DISTRIBUTION__: 'desktop' | 'localhost' | 'cloud'
+  const __IS_NIGHTLY__: boolean
 }
 
 type GlobalWithDefines = typeof globalThis & {
@@ -22,6 +23,7 @@ type GlobalWithDefines = typeof globalThis & {
   __ALGOLIA_API_KEY__: string
   __USE_PROD_CONFIG__: boolean
   __DISTRIBUTION__: 'desktop' | 'localhost' | 'cloud'
+  __IS_NIGHTLY__: boolean
   window?: Record<string, unknown>
 }
 
@@ -36,6 +38,7 @@ globalWithDefines.__ALGOLIA_APP_ID__ = ''
 globalWithDefines.__ALGOLIA_API_KEY__ = ''
 globalWithDefines.__USE_PROD_CONFIG__ = false
 globalWithDefines.__DISTRIBUTION__ = 'localhost'
+globalWithDefines.__IS_NIGHTLY__ = false
 
 // Provide a minimal window shim for Node environment
 // This is needed for code that checks window existence during imports

src/AGENTS.md

@@ -0,0 +1,26 @@
+# Source Code Guidelines
+
+## Error Handling
+
+- User-friendly and actionable messages
+- Proper error propagation
+
+## Security
+
+- Sanitize HTML with DOMPurify
+- Validate trusted sources
+- Never log secrets
+
+## State Management (Stores)
+
+- Follow domain-driven design for organizing files/folders
+- Clear public interfaces
+- Restrict extension access
+- Clean up subscriptions
+
+## General Guidelines
+
+- Use `es-toolkit` for utility functions
+- Use TypeScript for type safety
+- Avoid `@ts-expect-error` - fix the underlying issue
+- Use `vue-i18n` for ALL user-facing strings (`src/locales/en/main.json`)

src/CLAUDE.md

@@ -1,57 +1,3 @@
-# Source Code Guidelines
-
-## Service Layer
-
-### API Calls
-
-- Use `api.apiURL()` for backend endpoints
-- Use `api.fileURL()` for static files
-
-#### ✅ Correct Usage
-```typescript
-// Backend API call
-const response = await api.get(api.apiURL('/prompt'))
-
-// Static file
-const template = await fetch(api.fileURL('/templates/default.json'))
-```
-
-#### ❌ Incorrect Usage
-```typescript
-// WRONG - Direct URL construction
-const response = await fetch('/api/prompt')
-const template = await fetch('/templates/default.json')
-```
-
-### Error Handling
-
-- User-friendly and actionable messages
-- Proper error propagation
-
-### Security
-
-- Sanitize HTML with DOMPurify
-- Validate trusted sources
-- Never log secrets
-
-## State Management (Stores)
-
-### Store Design
-
-- Follow domain-driven design
-- Clear public interfaces
-- Restrict extension access
-
-### Best Practices
-
-- Use TypeScript for type safety
-- Implement proper error handling
-- Clean up subscriptions
-- Avoid @ts-expect-error
-
-## General Guidelines
-
-- Use es-toolkit for utility functions
-- Implement proper TypeScript types
-- Follow Vue 3 composition API style guide
-- Use vue-i18n for ALL user-facing strings in `src/locales/en/main.json`
+<!-- We forked the path, yet here we are again—
+     Maintaining two files where one would have been sane. -->
+@AGENTS.md

src/assets/css/style.css

@@ -1 +1,21 @@
-@import '@comfyorg/design-system/css/style.css';
+@import '@comfyorg/design-system/css/style.css';
+
+@media (prefers-reduced-motion: no-preference) {
+  /* List transition animations */
+  .list-scale-move,
+  .list-scale-enter-active,
+  .list-scale-leave-active {
+    transition: opacity 150ms ease, transform 150ms ease;
+  }
+
+  .list-scale-enter-from,
+  .list-scale-leave-to {
+    opacity: 0;
+    transform: scale(70%);
+  }
+
+  .list-scale-leave-active {
+    position: absolute;
+    width: 100%;
+  }
+}

src/components/AGENTS.md

@@ -0,0 +1,6 @@
+# Component Guidelines
+
+## Component Communication
+
+- Prefer `emit/@event-name` for state changes
+- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)

src/components/CLAUDE.md

@@ -1,45 +1,3 @@
-# Component Guidelines
-
-## Vue 3 Composition API
-
-- Use setup() function
-- Destructure props (Vue 3.5 style)
-- Use ref/reactive for state
-- Implement computed() for derived state
-- Use provide/inject for dependency injection
-
-## Component Communication
-
-- Prefer `emit/@event-name` for state changes
-- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
-- Events promote loose coupling
-
-## UI Framework
-
-- Deprecated PrimeVue component replacements:
-  - Dropdown → Select
-  - OverlayPanel → Popover
-  - Calendar → DatePicker
-  - InputSwitch → ToggleSwitch
-  - Sidebar → Drawer
-  - Chips → AutoComplete with multiple enabled
-  - TabMenu → Tabs without panels
-  - Steps → Stepper without panels
-  - InlineMessage → Message
-
-## Styling
-
-- Use Tailwind CSS only (no custom CSS)
-- Use the correct tokens from style.css in the design system package
-- For common operations, try to use existing VueUse composables that automatically handle effect scope
-  - Example: Use `useElementHover` instead of manually managing mouseover/mouseout event listeners
-  - Example: Use `useIntersectionObserver` for visibility detection instead of custom scroll handlers
-
-## Best Practices
-
-- Extract complex conditionals to computed
-- Implement cleanup for async operations
-- Use vue-i18n for ALL UI strings
-- Use lifecycle hooks: onMounted, onUpdated
-- Use Teleport/Suspense when needed
-- Proper props and emits definitions
+<!-- "Play nice with others," mother always said,
+     But Claude prefers its own file name instead. -->
+@AGENTS.md

src/components/actionbar/ComfyActionbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full items-center">
+  <div class="flex h-full items-center" :class="cn(!isDocked && '-ml-2')">
     <div
       v-if="isDragging && !isDocked"
       :class="actionbarClass"
@@ -77,7 +77,6 @@ const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
 const visible = computed(() => position.value !== 'Disabled')
 
-const tabContainer = document.querySelector('.workflow-tabs-container')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
 const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
@@ -88,14 +87,7 @@ const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
 const { x, y, style, isDragging } = useDraggable(panelRef, {
   initialValue: { x: 0, y: 0 },
   handle: dragHandleRef,
-  containerElement: document.body,
-  onMove: (event) => {
-    // Prevent dragging the menu over the top of the tabs
-    const minY = tabContainer?.getBoundingClientRect().bottom ?? 40
-    if (event.y < minY) {
-      event.y = minY
-    }
-  }
+  containerElement: document.body
 })
 
 // Update storedPosition when x or y changes

src/components/boundingbox/WidgetBoundingBox.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="grid grid-cols-[auto_1fr] gap-x-2 gap-y-1">
+    <label class="content-center text-xs text-node-component-slot-text">
+      {{ $t('boundingBox.x') }}
+    </label>
+    <input
+      v-model.number="x"
+      type="number"
+      :min="0"
+      step="1"
+      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
+    />
+    <label class="content-center text-xs text-node-component-slot-text">
+      {{ $t('boundingBox.y') }}
+    </label>
+    <input
+      v-model.number="y"
+      type="number"
+      :min="0"
+      step="1"
+      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
+    />
+    <label class="content-center text-xs text-node-component-slot-text">
+      {{ $t('boundingBox.width') }}
+    </label>
+    <input
+      v-model.number="width"
+      type="number"
+      :min="1"
+      step="1"
+      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
+    />
+    <label class="content-center text-xs text-node-component-slot-text">
+      {{ $t('boundingBox.height') }}
+    </label>
+    <input
+      v-model.number="height"
+      type="number"
+      :min="1"
+      step="1"
+      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { Bounds } from '@/renderer/core/layout/types'
+
+const modelValue = defineModel<Bounds>({
+  default: () => ({ x: 0, y: 0, width: 512, height: 512 })
+})
+
+const x = computed({
+  get: () => modelValue.value.x,
+  set: (x) => {
+    modelValue.value = { ...modelValue.value, x }
+  }
+})
+
+const y = computed({
+  get: () => modelValue.value.y,
+  set: (y) => {
+    modelValue.value = { ...modelValue.value, y }
+  }
+})
+
+const width = computed({
+  get: () => modelValue.value.width,
+  set: (width) => {
+    modelValue.value = { ...modelValue.value, width }
+  }
+})
+
+const height = computed({
+  get: () => modelValue.value.height,
+  set: (height) => {
+    modelValue.value = { ...modelValue.value, height }
+  }
+})
+</script>

src/components/button/MoreButton.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button size="icon" variant="secondary" @click="popover?.toggle">
+    <Button
+      size="icon"
+      variant="secondary"
+      v-bind="$attrs"
+      @click="popover?.toggle"
+    >
       <i
         :class="
           cn(
@@ -60,6 +65,10 @@ import { ref } from 'vue'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 interface MoreButtonProps {
   isVertical?: boolean
 }

src/components/common/TreeExplorerTreeNode.vue

@@ -28,7 +28,7 @@
       />
     </div>
     <div
-      class="node-actions touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
+      class="node-actions flex gap-1 touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
     >
       <slot name="actions" :node="props.node" />
     </div>

src/components/dialog/GlobalDialog.vue

@@ -55,17 +55,4 @@ const dialogStore = useDialogStore()
   @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
   @apply pt-0;
 }
-
-.manager-dialog {
-  height: 80vh;
-  max-width: 1724px;
-  max-height: 1026px;
-}
-
-@media (min-width: 3000px) {
-  .manager-dialog {
-    max-width: 2200px;
-    max-height: 1320px;
-  }
-}
 </style>

src/components/dialog/content/setting/CurrentUserMessage.vue

@@ -7,7 +7,7 @@
     pt:text="w-full"
   >
     <div class="flex items-center justify-between">
-      <div>
+      <div data-testid="current-user-indicator">
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
       <Button

src/components/graph/SelectionToolbox.vue

@@ -10,7 +10,7 @@
         class="selection-toolbox pointer-events-auto rounded-lg border border-interface-stroke bg-interface-panel-surface"
         :pt="{
           header: 'hidden',
-          content: 'p-2 h-12 flex flex-row gap-1'
+          content: 'p-1 h-10 flex flex-row gap-1'
         }"
         @wheel="canvasInteractions.forwardEventToCanvas"
       >

src/components/graph/selectionToolbox/InfoButton.test.ts

@@ -6,67 +6,19 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
-// NOTE: The component import must come after mocks so they take effect.
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
+import Button from '@/components/ui/button/Button.vue'
 
-const mockLGraphNode = {
-  type: 'TestNode',
-  title: 'Test Node'
-}
-
-vi.mock('@/utils/litegraphUtil', () => ({
-  isLGraphNode: vi.fn(() => true)
+const { openPanelMock } = vi.hoisted(() => ({
+  openPanelMock: vi.fn()
 }))
 
-vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
-  useNodeLibrarySidebarTab: () => ({
-    id: 'node-library'
-  })
-}))
-
-const openHelpMock = vi.fn()
-const closeHelpMock = vi.fn()
-const nodeHelpState: { currentHelpNode: any } = { currentHelpNode: null }
-vi.mock('@/stores/workspace/nodeHelpStore', () => ({
-  useNodeHelpStore: () => ({
-    openHelp: (def: any) => {
-      nodeHelpState.currentHelpNode = def
-      openHelpMock(def)
-    },
-    closeHelp: () => {
-      nodeHelpState.currentHelpNode = null
-      closeHelpMock()
-    },
-    get currentHelpNode() {
-      return nodeHelpState.currentHelpNode
-    },
-    get isHelpOpen() {
-      return nodeHelpState.currentHelpNode !== null
-    }
-  })
-}))
-
-const toggleSidebarTabMock = vi.fn((id: string) => {
-  sidebarState.activeSidebarTabId =
-    sidebarState.activeSidebarTabId === id ? null : id
-})
-const sidebarState: { activeSidebarTabId: string | null } = {
-  activeSidebarTabId: 'other-tab'
-}
-vi.mock('@/stores/workspace/sidebarTabStore', () => ({
-  useSidebarTabStore: () => ({
-    get activeSidebarTabId() {
-      return sidebarState.activeSidebarTabId
-    },
-    toggleSidebarTab: toggleSidebarTabMock
+vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
+  useRightSidePanelStore: () => ({
+    openPanel: openPanelMock
   })
 }))
 
 describe('InfoButton', () => {
-  let canvasStore: ReturnType<typeof useCanvasStore>
-  let nodeDefStore: ReturnType<typeof useNodeDefStore>
-
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -81,9 +33,6 @@ describe('InfoButton', () => {
 
   beforeEach(() => {
     setActivePinia(createPinia())
-    canvasStore = useCanvasStore()
-    nodeDefStore = useNodeDefStore()
-
     vi.clearAllMocks()
   })
 
@@ -92,58 +41,15 @@ describe('InfoButton', () => {
       global: {
         plugins: [i18n, PrimeVue],
         directives: { tooltip: Tooltip },
-        stubs: {
-          'i-lucide:info': true,
-          Button: {
-            template:
-              '<button class="help-button" severity="secondary"><slot /></button>',
-            props: ['severity', 'text', 'class'],
-            emits: ['click']
-          }
-        }
+        components: { Button }
       }
     })
   }
 
-  it('should handle click without errors', async () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+  it('should open the info panel on click', async () => {
     const wrapper = mountComponent()
-    const button = wrapper.find('button')
+    const button = wrapper.find('[data-testid="info-button"]')
     await button.trigger('click')
-    expect(button.exists()).toBe(true)
-  })
-
-  it('should have correct CSS classes', () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.classes()).toContain('help-button')
-    expect(button.attributes('severity')).toBe('secondary')
-  })
-
-  it('should have correct tooltip', () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.exists()).toBe(true)
+    expect(openPanelMock).toHaveBeenCalledWith('info')
   })
 })

src/components/imagecrop/WidgetImageCrop.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="widget-expands relative flex h-full w-full flex-col gap-1"
+    @pointerdown.stop
+    @pointermove.stop
+    @pointerup.stop
+  >
+    <!-- Image preview container -->
+    <div
+      ref="containerEl"
+      class="relative min-h-0 flex-1 overflow-hidden rounded-[5px] bg-node-component-surface"
+    >
+      <div v-if="isLoading" class="flex size-full items-center justify-center">
+        <span class="text-sm">{{ $t('imageCrop.loading') }}</span>
+      </div>
+
+      <div
+        v-else-if="!imageUrl"
+        class="flex size-full flex-col items-center justify-center text-center"
+      >
+        <i class="mb-2 icon-[lucide--image] h-12 w-12" />
+        <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
+      </div>
+
+      <img
+        v-else
+        ref="imageEl"
+        :src="imageUrl"
+        :alt="$t('imageCrop.cropPreviewAlt')"
+        draggable="false"
+        class="block size-full object-contain select-none brightness-50"
+        @load="handleImageLoad"
+        @error="handleImageError"
+        @dragstart.prevent
+      />
+
+      <div
+        v-if="imageUrl && !isLoading"
+        class="absolute box-content cursor-move overflow-hidden border-2 border-white"
+        :style="cropBoxStyle"
+        @pointerdown="handleDragStart"
+        @pointermove="handleDragMove"
+        @pointerup="handleDragEnd"
+      >
+        <div class="pointer-events-none size-full" :style="cropImageStyle" />
+      </div>
+
+      <div
+        v-for="handle in resizeHandles"
+        v-show="imageUrl && !isLoading"
+        :key="handle.direction"
+        :class="['absolute', handle.class]"
+        :style="handle.style"
+        @pointerdown="(e) => handleResizeStart(e, handle.direction)"
+        @pointermove="handleResizeMove"
+        @pointerup="handleResizeEnd"
+      />
+    </div>
+
+    <WidgetBoundingBox v-model="modelValue" class="shrink-0" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+
+import WidgetBoundingBox from '@/components/boundingbox/WidgetBoundingBox.vue'
+import { useImageCrop } from '@/composables/useImageCrop'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { Bounds } from '@/renderer/core/layout/types'
+
+const props = defineProps<{
+  nodeId: NodeId
+}>()
+
+const modelValue = defineModel<Bounds>({
+  default: () => ({ x: 0, y: 0, width: 512, height: 512 })
+})
+
+const imageEl = useTemplateRef<HTMLImageElement>('imageEl')
+const containerEl = useTemplateRef<HTMLDivElement>('containerEl')
+
+const {
+  imageUrl,
+  isLoading,
+
+  cropBoxStyle,
+  cropImageStyle,
+  resizeHandles,
+
+  handleImageLoad,
+  handleImageError,
+  handleDragStart,
+  handleDragMove,
+  handleDragEnd,
+  handleResizeStart,
+  handleResizeMove,
+  handleResizeEnd
+} = useImageCrop(props.nodeId, { imageEl, containerEl, modelValue })
+</script>

src/components/node/NodeHelpContent.vue

@@ -70,17 +70,17 @@
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed } from 'vue'
 
+import { useNodeHelpContent } from '@/composables/useNodeHelpContent'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
-const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
+const { node } = defineProps<{
+  node: ComfyNodeDefImpl
+}>()
 
-const nodeHelpStore = useNodeHelpStore()
-const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
+const { renderedHelpHtml, isLoading, error } = useNodeHelpContent(() => node)
 
 const inputList = computed(() =>
   Object.values(node.inputs).map((spec) => ({

src/components/primevueOverride/SelectPlus.vue

@@ -0,0 +1,19 @@
+<script>
+import Select from 'primevue/select'
+
+export default {
+  name: 'SelectPlus',
+  extends: Select,
+  emits: ['hide'],
+  methods: {
+    onOverlayLeave() {
+      this.unbindOutsideClickListener()
+      this.unbindScrollListener()
+      this.unbindResizeListener()
+
+      this.$emit('hide')
+      this.overlay = null
+    }
+  }
+}
+</script>

src/components/queue/QueueProgressOverlay.vue

@@ -200,7 +200,13 @@ const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
 
   if (item.state === 'running' || item.state === 'initialization') {
     // Running/initializing jobs: interrupt execution
-    await api.interrupt(promptId)
+    // Cloud backend uses deleteItem, local uses interrupt
+    if (isCloud) {
+      await api.deleteItem('queue', promptId)
+    } else {
+      await api.interrupt(promptId)
+    }
+    executionStore.clearInitializationByPromptId(promptId)
     await queueStore.update()
   } else if (item.state === 'pending') {
     // Pending jobs: remove from queue
@@ -262,13 +268,21 @@ const focusAssetInSidebar = async (item: JobListItem) => {
 
 const inspectJobAsset = wrapWithErrorHandlingAsync(
   async (item: JobListItem) => {
-    openResultGallery(item)
+    await openResultGallery(item)
     await focusAssetInSidebar(item)
   }
 )
 
 const cancelQueuedWorkflows = wrapWithErrorHandlingAsync(async () => {
+  // Capture pending promptIds before clearing
+  const pendingPromptIds = queueStore.pendingTasks
+    .map((task) => task.promptId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
   await commandStore.execute('Comfy.ClearPendingTasks')
+
+  // Clear initialization state for removed prompts
+  executionStore.clearInitializationByPromptIds(pendingPromptIds)
 })
 
 const interruptAll = wrapWithErrorHandlingAsync(async () => {
@@ -284,10 +298,14 @@ const interruptAll = wrapWithErrorHandlingAsync(async () => {
   // on cloud to ensure we cancel the workflow the user clicked.
   if (isCloud) {
     await Promise.all(promptIds.map((id) => api.deleteItem('queue', id)))
+    executionStore.clearInitializationByPromptIds(promptIds)
+    await queueStore.update()
     return
   }
 
   await Promise.all(promptIds.map((id) => api.interrupt(id)))
+  executionStore.clearInitializationByPromptIds(promptIds)
+  await queueStore.update()
 })
 
 const showClearHistoryDialog = () => {

src/components/queue/job/JobDetailsPopover.stories.ts

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import type { TaskStatus } from '@/schemas/apiSchema'
+import type {
+  JobListItem,
+  JobStatus
+} from '@/platform/remote/comfyui/jobs/jobTypes'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 
@@ -37,91 +40,86 @@ function resetStores() {
   exec.nodeProgressStatesByPrompt = {}
 }
 
+function makeTask(
+  id: string,
+  priority: number,
+  fields: Partial<JobListItem> & { status: JobStatus; create_time: number }
+): TaskItemImpl {
+  const job: JobListItem = {
+    id,
+    priority,
+    last_state_update: null,
+    update_time: fields.create_time,
+    ...fields
+  }
+  return new TaskItemImpl(job)
+}
+
 function makePendingTask(
   id: string,
-  index: number,
-  createTimeMs?: number
+  priority: number,
+  createTimeMs: number
 ): TaskItemImpl {
-  const extraData = {
-    client_id: 'c1',
-    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
-  }
-  return new TaskItemImpl('Pending', [index, id, {}, extraData, []])
+  return makeTask(id, priority, {
+    status: 'pending',
+    create_time: createTimeMs
+  })
 }
 
 function makeRunningTask(
   id: string,
-  index: number,
-  createTimeMs?: number
+  priority: number,
+  createTimeMs: number
 ): TaskItemImpl {
-  const extraData = {
-    client_id: 'c1',
-    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
-  }
-  return new TaskItemImpl('Running', [index, id, {}, extraData, []])
+  return makeTask(id, priority, {
+    status: 'in_progress',
+    create_time: createTimeMs
+  })
 }
 
 function makeRunningTaskWithStart(
   id: string,
-  index: number,
+  priority: number,
   startedSecondsAgo: number
 ): TaskItemImpl {
   const start = Date.now() - startedSecondsAgo * 1000
-  const status: TaskStatus = {
-    status_str: 'success',
-    completed: false,
-    messages: [['execution_start', { prompt_id: id, timestamp: start } as any]]
-  }
-  return new TaskItemImpl(
-    'Running',
-    [index, id, {}, { client_id: 'c1', create_time: start - 5000 }, []],
-    status
-  )
+  return makeTask(id, priority, {
+    status: 'in_progress',
+    create_time: start - 5000,
+    update_time: start
+  })
 }
 
 function makeHistoryTask(
   id: string,
-  index: number,
+  priority: number,
   durationSec: number,
   ok: boolean,
   errorMessage?: string
 ): TaskItemImpl {
-  const start = Date.now() - durationSec * 1000 - 1000
-  const end = start + durationSec * 1000
-  const messages: TaskStatus['messages'] = ok
-    ? [
-        ['execution_start', { prompt_id: id, timestamp: start } as any],
-        ['execution_success', { prompt_id: id, timestamp: end } as any]
-      ]
-    : [
-        ['execution_start', { prompt_id: id, timestamp: start } as any],
-        [
-          'execution_error',
-          {
-            prompt_id: id,
-            timestamp: end,
-            node_id: '1',
-            node_type: 'Node',
-            executed: [],
-            exception_message:
-              errorMessage || 'Demo error: Node failed during execution',
-            exception_type: 'RuntimeError',
-            traceback: [],
-            current_inputs: {},
-            current_outputs: {}
-          } as any
-        ]
-      ]
-  const status: TaskStatus = {
-    status_str: ok ? 'success' : 'error',
-    completed: true,
-    messages
-  }
-  return new TaskItemImpl(
-    'History',
-    [index, id, {}, { client_id: 'c1', create_time: start }, []],
-    status
-  )
+  const now = Date.now()
+  const executionEndTime = now
+  const executionStartTime = now - durationSec * 1000
+  return makeTask(id, priority, {
+    status: ok ? 'completed' : 'failed',
+    create_time: executionStartTime - 5000,
+    update_time: now,
+    execution_start_time: executionStartTime,
+    execution_end_time: executionEndTime,
+    execution_error: errorMessage
+      ? {
+          prompt_id: id,
+          timestamp: now,
+          node_id: '1',
+          node_type: 'ExampleNode',
+          exception_message: errorMessage,
+          exception_type: 'RuntimeError',
+          traceback: [],
+          current_inputs: {},
+          current_outputs: {}
+        }
+      : undefined
+  })
 }
 
 export const Queued: Story = {
@@ -140,8 +138,12 @@ export const Queued: Story = {
         makePendingTask(jobId, queueIndex, Date.now() - 90_000)
       ]
       // Add some other pending jobs to give context
-      queue.pendingTasks.push(makePendingTask('job-older-1', 100))
-      queue.pendingTasks.push(makePendingTask('job-older-2', 101))
+      queue.pendingTasks.push(
+        makePendingTask('job-older-1', 100, Date.now() - 60_000)
+      )
+      queue.pendingTasks.push(
+        makePendingTask('job-older-2', 101, Date.now() - 30_000)
+      )
 
       // Queued at (in metadata on prompt[4])
 

src/components/queue/job/JobGroupsList.test.ts

@@ -4,6 +4,7 @@ import { defineComponent, nextTick } from 'vue'
 
 import JobGroupsList from '@/components/queue/job/JobGroupsList.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+import type { TaskItemImpl } from '@/stores/queueStore'
 
 const QueueJobItemStub = defineComponent({
   name: 'QueueJobItemStub',
@@ -25,20 +26,25 @@ const QueueJobItemStub = defineComponent({
   template: '<div class="queue-job-item-stub"></div>'
 })
 
-const createJobItem = (overrides: Partial<JobListItem> = {}): JobListItem => ({
-  id: 'job-id',
-  title: 'Example job',
-  meta: 'Meta text',
-  state: 'running',
-  iconName: 'icon',
-  iconImageUrl: 'https://example.com/icon.png',
-  showClear: true,
-  taskRef: { workflow: { id: 'workflow-id' } },
-  progressTotalPercent: 60,
-  progressCurrentPercent: 30,
-  runningNodeName: 'Node A',
-  ...overrides
-})
+const createJobItem = (overrides: Partial<JobListItem> = {}): JobListItem => {
+  const { taskRef, ...rest } = overrides
+  return {
+    id: 'job-id',
+    title: 'Example job',
+    meta: 'Meta text',
+    state: 'running',
+    iconName: 'icon',
+    iconImageUrl: 'https://example.com/icon.png',
+    showClear: true,
+    taskRef: (taskRef ?? {
+      workflow: { id: 'workflow-id' }
+    }) as TaskItemImpl,
+    progressTotalPercent: 60,
+    progressCurrentPercent: 30,
+    runningNodeName: 'Node A',
+    ...rest
+  }
+}
 
 const mountComponent = (groups: JobGroup[]) =>
   mount(JobGroupsList, {

src/components/queue/job/JobGroupsList.vue

@@ -12,7 +12,7 @@
         v-for="ji in group.items"
         :key="ji.id"
         :job-id="ji.id"
-        :workflow-id="ji.taskRef?.workflow?.id"
+        :workflow-id="ji.taskRef?.workflowId"
         :state="ji.state"
         :title="ji.title"
         :right-text="ji.meta"

src/components/queue/job/useJobErrorReporting.test.ts

@@ -2,116 +2,49 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 
-import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import type { TaskItemImpl } from '@/stores/queueStore'
-import type {
-  JobErrorDialogService,
-  UseJobErrorReportingOptions
-} from '@/components/queue/job/useJobErrorReporting'
-import * as jobErrorReporting from '@/components/queue/job/useJobErrorReporting'
+import type { JobErrorDialogService } from '@/components/queue/job/useJobErrorReporting'
+import { useJobErrorReporting } from '@/components/queue/job/useJobErrorReporting'
+import type { ExecutionError } from '@/platform/remote/comfyui/jobs/jobTypes'
 
-const createExecutionErrorMessage = (
-  overrides: Partial<ExecutionErrorWsMessage> = {}
-): ExecutionErrorWsMessage => ({
-  prompt_id: 'prompt',
-  timestamp: 100,
-  node_id: 'node-1',
-  node_type: 'KSampler',
-  executed: [],
-  exception_message: 'default failure',
-  exception_type: 'RuntimeError',
-  traceback: ['Trace line'],
-  current_inputs: {},
-  current_outputs: {},
-  ...overrides
-})
-
-const createTaskWithMessages = (
-  messages: Array<[string, unknown]> | undefined = []
+const createTaskWithError = (
+  promptId: string,
+  errorMessage?: string,
+  executionError?: ExecutionError,
+  createTime?: number
 ): TaskItemImpl =>
   ({
-    status: {
-      status_str: 'error',
-      completed: false,
-      messages
-    }
-  }) as TaskItemImpl
-
-describe('extractExecutionError', () => {
-  it('returns null when task has no execution error messages', () => {
-    expect(jobErrorReporting.extractExecutionError(null)).toBeNull()
-    expect(
-      jobErrorReporting.extractExecutionError({
-        status: undefined
-      } as TaskItemImpl)
-    ).toBeNull()
-    expect(
-      jobErrorReporting.extractExecutionError({
-        status: {
-          status_str: 'error',
-          completed: false,
-          messages: {} as unknown as Array<[string, unknown]>
-        }
-      } as TaskItemImpl)
-    ).toBeNull()
-    expect(
-      jobErrorReporting.extractExecutionError(createTaskWithMessages([]))
-    ).toBeNull()
-    expect(
-      jobErrorReporting.extractExecutionError(
-        createTaskWithMessages([
-          ['execution_start', { prompt_id: 'prompt', timestamp: 1 }]
-        ] as Array<[string, unknown]>)
-      )
-    ).toBeNull()
-  })
-
-  it('returns detail and message for execution_error entries', () => {
-    const detail = createExecutionErrorMessage({ exception_message: 'Kaboom' })
-    const result = jobErrorReporting.extractExecutionError(
-      createTaskWithMessages([
-        ['execution_success', { prompt_id: 'prompt', timestamp: 2 }],
-        ['execution_error', detail]
-      ] as Array<[string, unknown]>)
-    )
-    expect(result).toEqual({
-      detail,
-      message: 'Kaboom'
-    })
-  })
-
-  it('falls back to an empty message when the tuple lacks detail', () => {
-    const result = jobErrorReporting.extractExecutionError(
-      createTaskWithMessages([
-        ['execution_error'] as unknown as [string, ExecutionErrorWsMessage]
-      ])
-    )
-    expect(result).toEqual({ detail: undefined, message: '' })
-  })
-})
+    promptId,
+    errorMessage,
+    executionError,
+    createTime: createTime ?? Date.now()
+  }) as Partial<TaskItemImpl> as TaskItemImpl
 
 describe('useJobErrorReporting', () => {
   let taskState = ref<TaskItemImpl | null>(null)
   let taskForJob: ComputedRef<TaskItemImpl | null>
-  let copyToClipboard: UseJobErrorReportingOptions['copyToClipboard']
-  let showExecutionErrorDialog: JobErrorDialogService['showExecutionErrorDialog']
-  let showErrorDialog: JobErrorDialogService['showErrorDialog']
+  let copyToClipboard: ReturnType<typeof vi.fn>
+  let showErrorDialog: ReturnType<typeof vi.fn>
+  let showExecutionErrorDialog: ReturnType<typeof vi.fn>
   let dialog: JobErrorDialogService
-  let composable: ReturnType<typeof jobErrorReporting.useJobErrorReporting>
+  let composable: ReturnType<typeof useJobErrorReporting>
 
   beforeEach(() => {
+    vi.clearAllMocks()
     taskState = ref<TaskItemImpl | null>(null)
     taskForJob = computed(() => taskState.value)
     copyToClipboard = vi.fn()
-    showExecutionErrorDialog = vi.fn()
     showErrorDialog = vi.fn()
+    showExecutionErrorDialog = vi.fn()
     dialog = {
-      showExecutionErrorDialog,
-      showErrorDialog
-    }
-    composable = jobErrorReporting.useJobErrorReporting({
+      showErrorDialog,
+      showExecutionErrorDialog
+    } as unknown as JobErrorDialogService
+    composable = useJobErrorReporting({
       taskForJob,
-      copyToClipboard,
+      copyToClipboard: copyToClipboard as (
+        value: string
+      ) => void | Promise<void>,
       dialog
     })
   })
@@ -121,73 +54,87 @@ describe('useJobErrorReporting', () => {
   })
 
   it('exposes a computed message that reflects the current task error', () => {
-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'First failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-1', 'First failure')
     expect(composable.errorMessageValue.value).toBe('First failure')
 
-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'Second failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-2', 'Second failure')
     expect(composable.errorMessageValue.value).toBe('Second failure')
   })
 
+  it('returns empty string when no error message', () => {
+    taskState.value = createTaskWithError('job-1')
+    expect(composable.errorMessageValue.value).toBe('')
+  })
+
+  it('returns empty string when task is null', () => {
+    taskState.value = null
+    expect(composable.errorMessageValue.value).toBe('')
+  })
+
   it('only calls the copy handler when a message exists', () => {
-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'Clipboard failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-1', 'Clipboard failure')
     composable.copyErrorMessage()
     expect(copyToClipboard).toHaveBeenCalledTimes(1)
     expect(copyToClipboard).toHaveBeenCalledWith('Clipboard failure')
 
-    vi.mocked(copyToClipboard).mockClear()
-    taskState.value = createTaskWithMessages([])
+    copyToClipboard.mockClear()
+    taskState.value = createTaskWithError('job-2')
     composable.copyErrorMessage()
     expect(copyToClipboard).not.toHaveBeenCalled()
   })
 
-  it('prefers the detailed execution dialog when detail is available', () => {
-    const detail = createExecutionErrorMessage({
-      exception_message: 'Detailed failure'
-    })
-    taskState.value = createTaskWithMessages([['execution_error', detail]])
+  it('shows simple error dialog when only errorMessage present', () => {
+    taskState.value = createTaskWithError('job-1', 'Queue job error')
     composable.reportJobError()
-    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
-    expect(showExecutionErrorDialog).toHaveBeenCalledWith(detail)
-    expect(showErrorDialog).not.toHaveBeenCalled()
-  })
 
-  it('shows a fallback dialog when only a message is available', () => {
-    const message = 'Queue job error'
-    taskState.value = createTaskWithMessages([])
-    const valueSpy = vi
-      .spyOn(composable.errorMessageValue, 'value', 'get')
-      .mockReturnValue(message)
-
-    expect(composable.errorMessageValue.value).toBe(message)
-    composable.reportJobError()
-    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
     expect(showErrorDialog).toHaveBeenCalledTimes(1)
-    const [errorArg, optionsArg] = vi.mocked(showErrorDialog).mock.calls[0]
+    const [errorArg, optionsArg] = showErrorDialog.mock.calls[0]
     expect(errorArg).toBeInstanceOf(Error)
-    expect(errorArg.message).toBe(message)
+    expect(errorArg.message).toBe('Queue job error')
     expect(optionsArg).toEqual({ reportType: 'queueJobError' })
-    valueSpy.mockRestore()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
   })
 
-  it('does nothing when no error could be extracted', () => {
-    taskState.value = createTaskWithMessages([])
+  it('does nothing when no task exists', () => {
+    taskState.value = null
     composable.reportJobError()
-    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
     expect(showErrorDialog).not.toHaveBeenCalled()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+  })
+
+  it('shows rich error dialog when execution_error available on task', () => {
+    const executionError: ExecutionError = {
+      prompt_id: 'job-1',
+      timestamp: 12345,
+      node_id: '5',
+      node_type: 'KSampler',
+      executed: ['1', '2'],
+      exception_message: 'CUDA out of memory',
+      exception_type: 'RuntimeError',
+      traceback: ['line 1', 'line 2'],
+      current_inputs: {},
+      current_outputs: {}
+    }
+    taskState.value = createTaskWithError(
+      'job-1',
+      'CUDA out of memory',
+      executionError,
+      12345
+    )
+
+    composable.reportJobError()
+
+    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
+    expect(showExecutionErrorDialog).toHaveBeenCalledWith(executionError)
+    expect(showErrorDialog).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when no error message and no execution_error', () => {
+    taskState.value = createTaskWithError('job-1')
+
+    composable.reportJobError()
+
+    expect(showErrorDialog).not.toHaveBeenCalled()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
   })
 })