fix: re-export VueWidgets types from public API

- Remove nested if check in getCustomVueWidgets registration by
  capturing method reference before async IIFE
- Export VueWidgets type for use by external extension code

.cursor/rules/unit-test.mdc

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

@@ -1,14 +0,0 @@
-# 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,3 +1,36 @@
-<!-- A rose by any other name would smell as sweet,
-     But Claude insists on files named for its own conceit. -->
-@AGENTS.md
+# 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`.

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

@@ -144,10 +144,9 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
+      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
@@ -159,10 +158,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm dlx @playwright/test merge-reports --reporter=html ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
+          pnpm exec playwright 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: Comfy-Org/ComfyUI
+          repository: comfyanonymous/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/Comfy-Org/ComfyUI.git master; then
+          if ! git fetch https://github.com/comfyanonymous/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 Comfy-Org/ComfyUI"
+          echo "Creating PR from ${COMFYUI_FORK} to comfyanonymous/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 Comfy-Org/ComfyUI \
+            --repo comfyanonymous/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 Comfy-Org/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
+            EXISTING_PR=$(gh pr list --repo comfyanonymous/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 Comfy-Org/ComfyUI" >> $GITHUB_STEP_SUMMARY
+          echo "Draft PR created in comfyanonymous/ComfyUI" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "### PR Body:" >> $GITHUB_STEP_SUMMARY
           cat pr-body.txt >> $GITHUB_STEP_SUMMARY

.storybook/AGENTS.md

@@ -1,17 +0,0 @@
-# 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,3 +1,197 @@
-<!-- Though standards bloom in open fields so wide,
-     Anthropic walks a path of lonely pride. -->
-@AGENTS.md
+# 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

AGENTS.md

@@ -1,7 +1,5 @@
 # Repository Guidelines
 
-See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob).
-
 ## Project Structure & Module Organization
 
 - Source: `src/`
@@ -48,21 +46,6 @@ The project uses **Nx** for build orchestration and task management
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
 - `pnpm format` / `pnpm format:check`: Prettier
 - `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
 

CLAUDE.md

@@ -1 +1,30 @@
-@AGENTS.md
+# 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

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,7 +55,8 @@
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/pt-BR/                               @JonatanAtila @Yorha4D @KarryCharon @shinshin86
 
 # LLM Instructions (blank on purpose)
 .claude/

browser_tests/AGENTS.md

@@ -1,8 +0,0 @@
-# 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,3 +1,17 @@
-<!-- In gardens where the agents freely play,
-     One stubborn flower turns the other way. -->
-@AGENTS.md
+# 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

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, LGraph } from '../../src/lib/litegraph/src/litegraph'
+import type { LGraphNode } 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,6 +21,7 @@ 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()
 
@@ -145,6 +146,8 @@ 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
@@ -298,6 +301,11 @@ export class ComfyPage {
     }
   }
 
+  setupHistory(): TaskHistory {
+    this._history ??= new TaskHistory(this)
+    return this._history
+  }
+
   async setup({
     clearStorage = true,
     mockReleases = true
@@ -1583,29 +1591,14 @@ export class ComfyPage {
       return window['app'].graph.nodes
     })
   }
-  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[]> {
+  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
     return Promise.all(
       (
-        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 }
-        )
+        await this.page.evaluate((type) => {
+          return window['app'].graph.nodes
+            .filter((n: LGraphNode) => n.type === type)
+            .map((n: LGraphNode) => n.id)
+        }, type)
       ).map((id: NodeId) => this.getNodeRefById(id))
     )
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -159,18 +159,8 @@ export class VueNodeHelpers {
   getInputNumberControls(widget: Locator) {
     return {
       input: widget.locator('input'),
-      decrementButton: widget.getByTestId('decrement'),
-      incrementButton: widget.getByTestId('increment')
+      incrementButton: widget.locator('button').first(),
+      decrementButton: widget.locator('button').nth(1)
     }
   }
-
-  /**
-   * 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/taskHistory.ts

@@ -0,0 +1,164 @@
+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/menu.spec.ts

@@ -133,11 +133,8 @@ test.describe('Menu', () => {
       // Checkmark should be invisible again (panel is hidden)
       await expect(checkmark).toHaveClass(/invisible/)
 
-      // Click in top-right corner to close menu (avoid hamburger menu at top-left)
-      const viewport = comfyPage.page.viewportSize()!
-      await comfyPage.page
-        .locator('body')
-        .click({ position: { x: viewport.width - 10, y: 10 } })
+      // Click outside to close menu
+      await comfyPage.page.locator('body').click({ position: { x: 10, y: 10 } })
 
       // Verify menu is now closed
       await expect(menu).not.toBeVisible()

browser_tests/tests/mobileBaseline.spec.ts

@@ -22,14 +22,8 @@ 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',
-      {
-        mask: [
-          comfyPage.settingDialog.root.getByTestId('current-user-indicator')
-        ]
-      }
+      'mobile-settings-dialog.png'
     )
   })
 })

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

@@ -8,11 +8,13 @@ test.describe('Properties panel', () => {
 
     const { propertiesPanel } = comfyPage.menu
 
-    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')
+    await expect(propertiesPanel.panelTitle).toContainText(
+      'No node(s) selected'
+    )
 
     await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
 
-    await expect(propertiesPanel.panelTitle).toContainText('3 items selected')
+    await expect(propertiesPanel.panelTitle).toContainText('3 nodes 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,51 +993,4 @@ 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,10 +194,7 @@ test.describe('Image widget', () => {
     const comboEntry = comfyPage.page.getByRole('menuitem', {
       name: 'image32x32.webp'
     })
-    await comboEntry.click()
-
-    // Stabilization for the image swap
-    await comfyPage.nextFrame()
+    await comboEntry.click({ noWaitAfter: true })
 
     // Expect the image preview to change automatically
     await expect(comfyPage.canvas).toHaveScreenshot(

docs/guidance/playwright.md

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

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

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

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

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

lint-staged.config.mjs

@@ -1,25 +0,0 @@
-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) => formatAndEslint(stagedFiles),
-
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
-    ...formatAndEslint(stagedFiles),
-    'pnpm typecheck'
-  ]
-}
-
-function formatAndEslint(fileNames) {
-  // Convert absolute paths to relative paths for better ESLint resolution
-  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 oxlint --fix ${joinedPaths}`,
-    `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
-  ]
-}
-
-

manifest.json

@@ -3,13 +3,6 @@
   "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.38.6",
+  "version": "1.37.10",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -192,10 +192,5 @@
     "yjs": "catalog:",
     "zod": "catalog:",
     "zod-validation-error": "catalog:"
-  },
-  "pnpm": {
-    "overrides": {
-      "vite": "^8.0.0-beta.8"
-    }
   }
 }

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

@@ -247,7 +247,6 @@
   --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);
@@ -282,7 +281,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-200);
+   --modal-card-tag-background: var(--color-smoke-400);
    --modal-card-tag-foreground: var(--base-foreground);
    --modal-panel-background: var(--color-white);
 }
@@ -373,7 +372,6 @@
   --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);
@@ -518,7 +516,6 @@
   --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

@@ -93,7 +93,7 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
-  vite: ^8.0.0-beta.8
+  vite: ^7.3.0
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0

src/AGENTS.md

@@ -1,26 +0,0 @@
-# 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,3 +1,57 @@
-<!-- We forked the path, yet here we are again—
-     Maintaining two files where one would have been sane. -->
-@AGENTS.md
+# 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`

src/assets/css/style.css

@@ -1,21 +1 @@
-@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%;
-  }
-}
+@import '@comfyorg/design-system/css/style.css';

src/components/AGENTS.md

@@ -1,6 +0,0 @@
-# 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,3 +1,45 @@
-<!-- "Play nice with others," mother always said,
-     But Claude prefers its own file name instead. -->
-@AGENTS.md
+# 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

src/components/actionbar/ComfyActionbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full items-center" :class="cn(!isDocked && '-ml-2')">
+  <div class="flex h-full items-center">
     <div
       v-if="isDragging && !isDocked"
       :class="actionbarClass"
@@ -77,6 +77,7 @@ 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)
@@ -87,7 +88,14 @@ const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
 const { x, y, style, isDragging } = useDraggable(panelRef, {
   initialValue: { x: 0, y: 0 },
   handle: dragHandleRef,
-  containerElement: document.body
+  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
+    }
+  }
 })
 
 // Update storedPosition when x or y changes

src/components/boundingbox/WidgetBoundingBox.vue

@@ -1,82 +0,0 @@
-<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/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="subgraph-breadcrumb flex w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
+    class="subgraph-breadcrumb w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs
@@ -13,37 +13,17 @@
       '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
     }"
   >
-    <Button
-      class="context-menu-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
-      icon="pi pi-bars"
-      text
-      severity="secondary"
-      size="small"
-      @click="handleMenuClick"
-    />
-    <Button
-      v-if="isInSubgraph"
-      class="back-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
-      text
-      severity="secondary"
-      size="small"
-      @click="handleBackClick"
-    >
-      <i class="icon-[lucide--undo-2]" />
-    </Button>
     <Breadcrumb
       ref="breadcrumbRef"
       class="w-fit rounded-lg p-0"
-      :class="{ hidden: !isInSubgraph }"
       :model="items"
       :pt="{ item: { class: 'pointer-events-auto' } }"
       :aria-label="$t('g.graphNavigation')"
     >
       <template #item="{ item }">
         <SubgraphBreadcrumbItem
-          :ref="(el) => setItemRef(item, el)"
           :item="item"
-          :is-active="item.key === activeItemKey"
+          :is-active="item === items.at(-1)"
         />
       </template>
       <template #separator
@@ -55,7 +35,6 @@
 
 <script setup lang="ts">
 import Breadcrumb from 'primevue/breadcrumb'
-import Button from 'primevue/button'
 import type { MenuItem } from 'primevue/menuitem'
 import { computed, onUpdated, ref, watch } from 'vue'
 
@@ -64,7 +43,6 @@ import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'
@@ -77,12 +55,6 @@ const ICON_WIDTH = 20
 const workflowStore = useWorkflowStore()
 const navigationStore = useSubgraphNavigationStore()
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
-const rootItemRef = ref<InstanceType<typeof SubgraphBreadcrumbItem>>()
-const setItemRef = (item: MenuItem, el: unknown) => {
-  if (item.key === 'root') {
-    rootItemRef.value = el as InstanceType<typeof SubgraphBreadcrumbItem>
-  }
-}
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 const isBlueprint = computed(() =>
   useSubgraphStore().isSubgraphBlueprint(workflowStore.activeWorkflow)
@@ -90,28 +62,17 @@ const isBlueprint = computed(() =>
 const collapseTabs = ref(false)
 const overflowingTabs = ref(false)
 
-const isInSubgraph = computed(() => navigationStore.navigationStack.length > 0)
+const breadcrumbElement = computed(() => {
+  if (!breadcrumbRef.value) return null
 
-const home = computed(() => ({
-  label: workflowName.value,
-  icon: 'pi pi-home',
-  key: 'root',
-  isBlueprint: isBlueprint.value,
-  command: () => {
-    useTelemetry()?.trackUiButtonClicked({
-      button_id: 'breadcrumb_subgraph_root_selected'
-    })
-    const canvas = useCanvasStore().getCanvas()
-    if (!canvas.graph) throw new TypeError('Canvas has no graph')
-
-    canvas.setGraph(canvas.graph.rootGraph)
-  }
-}))
+  const el = (breadcrumbRef.value as unknown as { $el: HTMLElement }).$el
+  const list = el?.querySelector('.p-breadcrumb-list') as HTMLElement
+  return list
+})
 
 const items = computed(() => {
   const items = navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
     label: subgraph.name,
-    key: `subgraph-${subgraph.id}`,
     command: () => {
       useTelemetry()?.trackUiButtonClicked({
         button_id: 'breadcrumb_subgraph_item_selected'
@@ -134,26 +95,21 @@ const items = computed(() => {
   return [home.value, ...items]
 })
 
-const activeItemKey = computed(() => items.value.at(-1)?.key)
+const home = computed(() => ({
+  label: workflowName.value,
+  icon: 'pi pi-home',
+  key: 'root',
+  isBlueprint: isBlueprint.value,
+  command: () => {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'breadcrumb_subgraph_root_selected'
+    })
+    const canvas = useCanvasStore().getCanvas()
+    if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
-const handleMenuClick = (event: MouseEvent) => {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'breadcrumb_subgraph_menu_selected'
-  })
-  rootItemRef.value?.toggleMenu(event)
-}
-
-const handleBackClick = () => {
-  void useCommandStore().execute('Comfy.Graph.ExitSubgraph')
-}
-
-const breadcrumbElement = computed(() => {
-  if (!breadcrumbRef.value) return null
-
-  const el = (breadcrumbRef.value as unknown as { $el: HTMLElement }).$el
-  const list = el?.querySelector('.p-breadcrumb-list') as HTMLElement
-  return list
-})
+    canvas.setGraph(canvas.graph.rootGraph)
+  }
+}))
 
 // Check for overflow on breadcrumb items and collapse/expand the breadcrumb to fit
 let overflowObserver: ReturnType<typeof useOverflowObserver> | undefined
@@ -233,18 +189,13 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center overflow-hidden h-8;
+  @apply flex items-center overflow-hidden;
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
-  border: 1px solid transparent;
-  background-color: transparent;
-  transition: all 0.2s;
   /* Collapse middle items first */
   flex-shrink: 10000;
 }
 
 :deep(.p-breadcrumb-separator) {
-  border: 1px solid transparent;
-  background-color: transparent;
   display: flex;
   padding: 0 var(--p-breadcrumb-item-margin);
 }
@@ -254,9 +205,11 @@ onUpdated(() => {
     calc(var(--p-breadcrumb-item-margin) + var(--p-breadcrumb-item-padding));
 }
 
-:deep(.p-breadcrumb-item:hover) {
-  @apply rounded-lg;
-  border-color: var(--interface-stroke);
+:deep(.p-breadcrumb-separator),
+:deep(.p-breadcrumb-item) {
+  @apply h-12;
+  border-top: 1px solid var(--interface-stroke);
+  border-bottom: 1px solid var(--interface-stroke);
   background-color: var(--comfy-menu-bg);
 }
 
@@ -265,8 +218,10 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:first-child) {
+  @apply rounded-l-lg;
   /* Then collapse the root workflow */
   flex-shrink: 5000;
+  border-left: 1px solid var(--interface-stroke);
 
   .p-breadcrumb-item-link {
     padding-left: var(--p-breadcrumb-item-padding);
@@ -274,10 +229,13 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:last-child) {
+  @apply rounded-r-lg;
   /* Then collapse the active item */
   flex-shrink: 1;
+  border-right: 1px solid var(--interface-stroke);
 }
 
+:deep(.p-breadcrumb-item-link:hover),
 :deep(.p-breadcrumb-item-link-menu-visible) {
   background-color: color-mix(
     in srgb,

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -7,7 +7,7 @@
     }"
     draggable="false"
     href="#"
-    class="p-breadcrumb-item-link h-8 cursor-pointer px-2"
+    class="p-breadcrumb-item-link h-12 cursor-pointer px-2"
     :class="{
       'flex items-center gap-1': isActive,
       'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
@@ -25,7 +25,7 @@
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
   </a>
   <Menu
-    v-if="isActive || isRoot"
+    v-if="isActive"
     ref="menu"
     :model="menuItems"
     :popup="true"
@@ -59,7 +59,6 @@ import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import {
   ComfyWorkflow,
@@ -136,28 +135,79 @@ const tooltipText = computed(() => {
   return props.item.label
 })
 
-const startRename = async () => {
-  // Check if element is hidden (collapsed breadcrumb)
-  // When collapsed, root item is hidden via CSS display:none, so use rename command
-  if (isRoot && wrapperRef.value?.offsetParent === null) {
-    await useCommandStore().execute('Comfy.RenameWorkflow')
-    return
-  }
-
-  isEditing.value = true
-  itemLabel.value = props.item.label as string
-  void nextTick(() => {
-    if (itemInputRef.value?.$el) {
-      itemInputRef.value.$el.focus()
-      itemInputRef.value.$el.select()
-      if (wrapperRef.value) {
-        itemInputRef.value.$el.style.width = `${Math.max(200, wrapperRef.value.offsetWidth)}px`
+const menuItems = computed<MenuItem[]>(() => {
+  return [
+    {
+      label: t('g.rename'),
+      icon: 'pi pi-pencil',
+      command: startRename
+    },
+    {
+      label: t('breadcrumbsMenu.duplicate'),
+      icon: 'pi pi-copy',
+      command: async () => {
+        await workflowService.duplicateWorkflow(workflowStore.activeWorkflow!)
+      },
+      visible: isRoot && !props.item.isBlueprint
+    },
+    {
+      separator: true,
+      visible: isRoot
+    },
+    {
+      label: t('menuLabels.Save'),
+      icon: 'pi pi-save',
+      command: async () => {
+        await useCommandStore().execute('Comfy.SaveWorkflow')
+      },
+      visible: isRoot
+    },
+    {
+      label: t('menuLabels.Save As'),
+      icon: 'pi pi-save',
+      command: async () => {
+        await useCommandStore().execute('Comfy.SaveWorkflowAs')
+      },
+      visible: isRoot
+    },
+    {
+      separator: true
+    },
+    {
+      label: t('breadcrumbsMenu.clearWorkflow'),
+      icon: 'pi pi-trash',
+      command: async () => {
+        await useCommandStore().execute('Comfy.ClearWorkflow')
       }
+    },
+    {
+      separator: true,
+      visible: props.item.key === 'root' && props.item.isBlueprint
+    },
+    {
+      label: t('subgraphStore.publish'),
+      icon: 'pi pi-copy',
+      command: async () => {
+        await workflowService.saveWorkflowAs(workflowStore.activeWorkflow!)
+      },
+      visible: props.item.key === 'root' && props.item.isBlueprint
+    },
+    {
+      separator: true,
+      visible: isRoot
+    },
+    {
+      label: props.item.isBlueprint
+        ? t('breadcrumbsMenu.deleteBlueprint')
+        : t('breadcrumbsMenu.deleteWorkflow'),
+      icon: 'pi pi-times',
+      command: async () => {
+        await workflowService.deleteWorkflow(workflowStore.activeWorkflow!)
+      },
+      visible: isRoot
     }
-  })
-}
-
-const { menuItems } = useWorkflowActionsMenu(startRename, { isRoot })
+  ]
+})
 
 const handleClick = (event: MouseEvent) => {
   if (isEditing.value) {
@@ -178,6 +228,20 @@ const handleClick = (event: MouseEvent) => {
   }
 }
 
+const startRename = () => {
+  isEditing.value = true
+  itemLabel.value = props.item.label as string
+  void nextTick(() => {
+    if (itemInputRef.value?.$el) {
+      itemInputRef.value.$el.focus()
+      itemInputRef.value.$el.select()
+      if (wrapperRef.value) {
+        itemInputRef.value.$el.style.width = `${Math.max(200, wrapperRef.value.offsetWidth)}px`
+      }
+    }
+  })
+}
+
 const inputBlur = async (doRename: boolean) => {
   if (doRename) {
     await rename(itemLabel.value, props.item.label as string)
@@ -185,14 +249,6 @@ const inputBlur = async (doRename: boolean) => {
 
   isEditing.value = false
 }
-
-const toggleMenu = (event: MouseEvent) => {
-  menu.value?.toggle(event)
-}
-
-defineExpose({
-  toggleMenu
-})
 </script>
 
 <style scoped>

src/components/button/MoreButton.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button
-      size="icon"
-      variant="secondary"
-      v-bind="$attrs"
-      @click="popover?.toggle"
-    >
+    <Button size="icon" variant="secondary" @click="popover?.toggle">
       <i
         :class="
           cn(
@@ -65,10 +60,6 @@ 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/OverlayIcon.vue

@@ -1,65 +0,0 @@
-<template>
-  <span class="relative inline-flex items-center justify-center size-[1em]">
-    <i :class="mainIcon" class="text-[1em]" />
-    <i
-      :class="
-        cn(
-          subIcon,
-          'absolute leading-none pointer-events-none',
-          positionX === 'left' ? 'left-0' : 'right-0',
-          positionY === 'top' ? 'top-0' : 'bottom-0'
-        )
-      "
-      :style="subIconStyle"
-    />
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-type Position = 'top' | 'bottom' | 'left' | 'right'
-
-export interface OverlayIconProps {
-  mainIcon: string
-  subIcon: string
-  positionX?: Position
-  positionY?: Position
-  offsetX?: number
-  offsetY?: number
-  subIconScale?: number
-}
-const {
-  mainIcon,
-  subIcon,
-  positionX = 'right',
-  positionY = 'bottom',
-  offsetX = 0,
-  offsetY = 0,
-  subIconScale = 0.6
-} = defineProps<OverlayIconProps>()
-
-const textShadow = [
-  `-1px -1px 0 rgba(0, 0, 0, 0.7)`,
-  `1px -1px 0 rgba(0, 0, 0, 0.7)`,
-  `-1px 1px 0 rgba(0, 0, 0, 0.7)`,
-  `1px 1px 0 rgba(0, 0, 0, 0.7)`,
-  `-1px 0 0 rgba(0, 0, 0, 0.7)`,
-  `1px 0 0 rgba(0, 0, 0, 0.7)`,
-  `0 -1px 0 rgba(0, 0, 0, 0.7)`,
-  `0 1px 0 rgba(0, 0, 0, 0.7)`
-].join(', ')
-
-const subIconStyle = computed(() => ({
-  fontSize: `${subIconScale}em`,
-  textShadow,
-  ...(offsetX !== 0 && {
-    [positionX === 'left' ? 'left' : 'right']: `${offsetX}px`
-  }),
-  ...(offsetY !== 0 && {
-    [positionY === 'top' ? 'top' : 'bottom']: `${offsetY}px`
-  })
-}))
-</script>

src/components/dialog/GlobalDialog.vue

@@ -55,4 +55,17 @@ 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/TopUpCreditsDialogContent.vue

@@ -158,7 +158,6 @@ import Button from '@/components/ui/button/Button.vue'
 import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
 import { useDialogService } from '@/services/dialogService'
@@ -176,7 +175,6 @@ const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
-const { isSubscriptionEnabled } = useSubscription()
 
 // Constants
 const PRESET_AMOUNTS = [10, 25, 50, 100]
@@ -254,11 +252,9 @@ async function handleBuy() {
     telemetry?.trackApiCreditTopupButtonPurchaseClicked(payAmount.value)
     await authActions.purchaseCredits(payAmount.value)
 
-    // Close top-up dialog (keep tracking) and open credits panel to show updated balance
+    // Close top-up dialog (keep tracking) and open subscription panel to show updated credits
     handleClose(false)
-    dialogService.showSettingsDialog(
-      isSubscriptionEnabled() ? 'subscription' : 'credits'
-    )
+    dialogService.showSettingsDialog('subscription')
   } catch (error) {
     console.error('Purchase failed:', error)
 

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

@@ -7,7 +7,7 @@
     pt:text="w-full"
   >
     <div class="flex items-center justify-between">
-      <div data-testid="current-user-indicator">
+      <div>
         {{ $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-1 h-10 flex flex-row gap-1'
+          content: 'p-2 h-12 flex flex-row gap-1'
         }"
         @wheel="canvasInteractions.forwardEventToCanvas"
       >

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

@@ -6,19 +6,67 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
-import Button from '@/components/ui/button/Button.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'
 
-const { openPanelMock } = vi.hoisted(() => ({
-  openPanelMock: vi.fn()
+const mockLGraphNode = {
+  type: 'TestNode',
+  title: 'Test Node'
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true)
 }))
 
-vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
-  useRightSidePanelStore: () => ({
-    openPanel: openPanelMock
+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
   })
 }))
 
 describe('InfoButton', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+  let nodeDefStore: ReturnType<typeof useNodeDefStore>
+
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -33,6 +81,9 @@ describe('InfoButton', () => {
 
   beforeEach(() => {
     setActivePinia(createPinia())
+    canvasStore = useCanvasStore()
+    nodeDefStore = useNodeDefStore()
+
     vi.clearAllMocks()
   })
 
@@ -41,15 +92,58 @@ describe('InfoButton', () => {
       global: {
         plugins: [i18n, PrimeVue],
         directives: { tooltip: Tooltip },
-        components: { Button }
+        stubs: {
+          'i-lucide:info': true,
+          Button: {
+            template:
+              '<button class="help-button" severity="secondary"><slot /></button>',
+            props: ['severity', 'text', 'class'],
+            emits: ['click']
+          }
+        }
       }
     })
   }
 
-  it('should open the info panel on click', async () => {
+  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)
     const wrapper = mountComponent()
-    const button = wrapper.find('[data-testid="info-button"]')
+    const button = wrapper.find('button')
     await button.trigger('click')
-    expect(openPanelMock).toHaveBeenCalledWith('info')
+    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)
   })
 })

src/components/imagecrop/WidgetImageCrop.vue

@@ -1,100 +0,0 @@
-<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 { renderedHelpHtml, isLoading, error } = useNodeHelpContent(() => node)
+const nodeHelpStore = useNodeHelpStore()
+const { renderedHelpHtml, isLoading, error } = storeToRefs(nodeHelpStore)
 
 const inputList = computed(() =>
   Object.values(node.inputs).map((spec) => ({

src/components/primevueOverride/SelectPlus.vue

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

@@ -262,7 +262,7 @@ const focusAssetInSidebar = async (item: JobListItem) => {
 
 const inspectJobAsset = wrapWithErrorHandlingAsync(
   async (item: JobListItem) => {
-    await openResultGallery(item)
+    openResultGallery(item)
     await focusAssetInSidebar(item)
   }
 )

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

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import type {
-  JobListItem,
-  JobStatus
-} from '@/platform/remote/comfyui/jobs/jobTypes'
+import type { TaskStatus } from '@/schemas/apiSchema'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 
@@ -40,86 +37,91 @@ 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,
-  priority: number,
-  createTimeMs: number
+  index: number,
+  createTimeMs?: number
 ): TaskItemImpl {
-  return makeTask(id, priority, {
-    status: 'pending',
-    create_time: createTimeMs
-  })
+  const extraData = {
+    client_id: 'c1',
+    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
+  }
+  return new TaskItemImpl('Pending', [index, id, {}, extraData, []])
 }
 
 function makeRunningTask(
   id: string,
-  priority: number,
-  createTimeMs: number
+  index: number,
+  createTimeMs?: number
 ): TaskItemImpl {
-  return makeTask(id, priority, {
-    status: 'in_progress',
-    create_time: createTimeMs
-  })
+  const extraData = {
+    client_id: 'c1',
+    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
+  }
+  return new TaskItemImpl('Running', [index, id, {}, extraData, []])
 }
 
 function makeRunningTaskWithStart(
   id: string,
-  priority: number,
+  index: number,
   startedSecondsAgo: number
 ): TaskItemImpl {
   const start = Date.now() - startedSecondsAgo * 1000
-  return makeTask(id, priority, {
-    status: 'in_progress',
-    create_time: start - 5000,
-    update_time: start
-  })
+  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
+  )
 }
 
 function makeHistoryTask(
   id: string,
-  priority: number,
+  index: number,
   durationSec: number,
   ok: boolean,
   errorMessage?: string
 ): TaskItemImpl {
-  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
-  })
+  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
+  )
 }
 
 export const Queued: Story = {
@@ -138,12 +140,8 @@ 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, Date.now() - 60_000)
-      )
-      queue.pendingTasks.push(
-        makePendingTask('job-older-2', 101, Date.now() - 30_000)
-      )
+      queue.pendingTasks.push(makePendingTask('job-older-1', 100))
+      queue.pendingTasks.push(makePendingTask('job-older-2', 101))
 
       // Queued at (in metadata on prompt[4])
 

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

@@ -4,7 +4,6 @@ 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',
@@ -26,25 +25,20 @@ const QueueJobItemStub = defineComponent({
   template: '<div class="queue-job-item-stub"></div>'
 })
 
-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 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 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?.workflowId"
+        :workflow-id="ji.taskRef?.workflow?.id"
         :state="ji.state"
         :title="ji.title"
         :right-text="ji.meta"

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

@@ -2,49 +2,116 @@ 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 } from '@/components/queue/job/useJobErrorReporting'
-import { useJobErrorReporting } from '@/components/queue/job/useJobErrorReporting'
-import type { ExecutionError } from '@/platform/remote/comfyui/jobs/jobTypes'
+import type {
+  JobErrorDialogService,
+  UseJobErrorReportingOptions
+} from '@/components/queue/job/useJobErrorReporting'
+import * as jobErrorReporting from '@/components/queue/job/useJobErrorReporting'
 
-const createTaskWithError = (
-  promptId: string,
-  errorMessage?: string,
-  executionError?: ExecutionError,
-  createTime?: number
+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 = []
 ): TaskItemImpl =>
   ({
-    promptId,
-    errorMessage,
-    executionError,
-    createTime: createTime ?? Date.now()
-  }) as Partial<TaskItemImpl> as 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: '' })
+  })
+})
 
 describe('useJobErrorReporting', () => {
   let taskState = ref<TaskItemImpl | null>(null)
   let taskForJob: ComputedRef<TaskItemImpl | null>
-  let copyToClipboard: ReturnType<typeof vi.fn>
-  let showErrorDialog: ReturnType<typeof vi.fn>
-  let showExecutionErrorDialog: ReturnType<typeof vi.fn>
+  let copyToClipboard: UseJobErrorReportingOptions['copyToClipboard']
+  let showExecutionErrorDialog: JobErrorDialogService['showExecutionErrorDialog']
+  let showErrorDialog: JobErrorDialogService['showErrorDialog']
   let dialog: JobErrorDialogService
-  let composable: ReturnType<typeof useJobErrorReporting>
+  let composable: ReturnType<typeof jobErrorReporting.useJobErrorReporting>
 
   beforeEach(() => {
-    vi.clearAllMocks()
     taskState = ref<TaskItemImpl | null>(null)
     taskForJob = computed(() => taskState.value)
     copyToClipboard = vi.fn()
-    showErrorDialog = vi.fn()
     showExecutionErrorDialog = vi.fn()
+    showErrorDialog = vi.fn()
     dialog = {
-      showErrorDialog,
-      showExecutionErrorDialog
-    } as unknown as JobErrorDialogService
-    composable = useJobErrorReporting({
+      showExecutionErrorDialog,
+      showErrorDialog
+    }
+    composable = jobErrorReporting.useJobErrorReporting({
       taskForJob,
-      copyToClipboard: copyToClipboard as (
-        value: string
-      ) => void | Promise<void>,
+      copyToClipboard,
       dialog
     })
   })
@@ -54,87 +121,73 @@ describe('useJobErrorReporting', () => {
   })
 
   it('exposes a computed message that reflects the current task error', () => {
-    taskState.value = createTaskWithError('job-1', 'First failure')
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: 'First failure' })
+      ]
+    ])
     expect(composable.errorMessageValue.value).toBe('First failure')
 
-    taskState.value = createTaskWithError('job-2', 'Second failure')
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: '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 = createTaskWithError('job-1', 'Clipboard failure')
+    taskState.value = createTaskWithMessages([
+      [
+        'execution_error',
+        createExecutionErrorMessage({ exception_message: 'Clipboard failure' })
+      ]
+    ])
     composable.copyErrorMessage()
     expect(copyToClipboard).toHaveBeenCalledTimes(1)
     expect(copyToClipboard).toHaveBeenCalledWith('Clipboard failure')
 
-    copyToClipboard.mockClear()
-    taskState.value = createTaskWithError('job-2')
+    vi.mocked(copyToClipboard).mockClear()
+    taskState.value = createTaskWithMessages([])
     composable.copyErrorMessage()
     expect(copyToClipboard).not.toHaveBeenCalled()
   })
 
-  it('shows simple error dialog when only errorMessage present', () => {
-    taskState.value = createTaskWithError('job-1', 'Queue job error')
+  it('prefers the detailed execution dialog when detail is available', () => {
+    const detail = createExecutionErrorMessage({
+      exception_message: 'Detailed failure'
+    })
+    taskState.value = createTaskWithMessages([['execution_error', detail]])
     composable.reportJobError()
-
-    expect(showErrorDialog).toHaveBeenCalledTimes(1)
-    const [errorArg, optionsArg] = showErrorDialog.mock.calls[0]
-    expect(errorArg).toBeInstanceOf(Error)
-    expect(errorArg.message).toBe('Queue job error')
-    expect(optionsArg).toEqual({ reportType: 'queueJobError' })
-    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
-  })
-
-  it('does nothing when no task exists', () => {
-    taskState.value = null
-    composable.reportJobError()
-    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(showExecutionErrorDialog).toHaveBeenCalledWith(detail)
     expect(showErrorDialog).not.toHaveBeenCalled()
   })
 
-  it('does nothing when no error message and no execution_error', () => {
-    taskState.value = createTaskWithError('job-1')
+  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(showErrorDialog).not.toHaveBeenCalled()
     expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+    expect(showErrorDialog).toHaveBeenCalledTimes(1)
+    const [errorArg, optionsArg] = vi.mocked(showErrorDialog).mock.calls[0]
+    expect(errorArg).toBeInstanceOf(Error)
+    expect(errorArg.message).toBe(message)
+    expect(optionsArg).toEqual({ reportType: 'queueJobError' })
+    valueSpy.mockRestore()
+  })
+
+  it('does nothing when no error could be extracted', () => {
+    taskState.value = createTaskWithMessages([])
+    composable.reportJobError()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+    expect(showErrorDialog).not.toHaveBeenCalled()
   })
 })

src/components/queue/job/useJobErrorReporting.ts

@@ -1,13 +1,13 @@
 import { computed } from 'vue'
 import type { ComputedRef } from 'vue'
 
-import type { ExecutionErrorDialogInput } from '@/services/dialogService'
+import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import type { TaskItemImpl } from '@/stores/queueStore'
 
 type CopyHandler = (value: string) => void | Promise<void>
 
 export type JobErrorDialogService = {
-  showExecutionErrorDialog: (executionError: ExecutionErrorDialogInput) => void
+  showExecutionErrorDialog: (error: ExecutionErrorWsMessage) => void
   showErrorDialog: (
     error: Error,
     options?: {
@@ -17,7 +17,30 @@ export type JobErrorDialogService = {
   ) => void
 }
 
-type UseJobErrorReportingOptions = {
+type JobExecutionError = {
+  detail?: ExecutionErrorWsMessage
+  message: string
+}
+
+export const extractExecutionError = (
+  task: TaskItemImpl | null
+): JobExecutionError | null => {
+  const status = (task as TaskItemImpl | null)?.status
+  const messages = (status as { messages?: unknown[] } | undefined)?.messages
+  if (!Array.isArray(messages) || !messages.length) return null
+  const record = messages.find((entry: unknown) => {
+    return Array.isArray(entry) && entry[0] === 'execution_error'
+  }) as [string, ExecutionErrorWsMessage?] | undefined
+  if (!record) return null
+  const detail = record[1]
+  const message = String(detail?.exception_message ?? '')
+  return {
+    detail,
+    message
+  }
+}
+
+export type UseJobErrorReportingOptions = {
   taskForJob: ComputedRef<TaskItemImpl | null>
   copyToClipboard: CopyHandler
   dialog: JobErrorDialogService
@@ -28,7 +51,10 @@ export const useJobErrorReporting = ({
   copyToClipboard,
   dialog
 }: UseJobErrorReportingOptions) => {
-  const errorMessageValue = computed(() => taskForJob.value?.errorMessage ?? '')
+  const errorMessageValue = computed(() => {
+    const error = extractExecutionError(taskForJob.value)
+    return error?.message ?? ''
+  })
 
   const copyErrorMessage = () => {
     if (errorMessageValue.value) {
@@ -37,12 +63,11 @@ export const useJobErrorReporting = ({
   }
 
   const reportJobError = () => {
-    const executionError = taskForJob.value?.executionError
-    if (executionError) {
-      dialog.showExecutionErrorDialog(executionError)
+    const error = extractExecutionError(taskForJob.value)
+    if (error?.detail) {
+      dialog.showExecutionErrorDialog(error.detail)
       return
     }
-
     if (errorMessageValue.value) {
       dialog.showErrorDialog(new Error(errorMessageValue.value), {
         reportType: 'queueJobError'

src/components/rightSidePanel/RightSidePanel.vue

@@ -1,41 +1,32 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, provide, ref, watchEffect } from 'vue'
+import { computed, ref, toValue, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 import TabInfo from './info/TabInfo.vue'
-import TabGlobalParameters from './parameters/TabGlobalParameters.vue'
-import TabNodes from './parameters/TabNodes.vue'
-import TabNormalInputs from './parameters/TabNormalInputs.vue'
-import TabSubgraphInputs from './parameters/TabSubgraphInputs.vue'
-import TabGlobalSettings from './settings/TabGlobalSettings.vue'
+import TabParameters from './parameters/TabParameters.vue'
 import TabSettings from './settings/TabSettings.vue'
-import {
-  GetNodeParentGroupKey,
-  useFlatAndCategorizeSelectedItems
-} from './shared'
 import SubgraphEditor from './subgraph/SubgraphEditor.vue'
 
 const canvasStore = useCanvasStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
-const { findParentGroup } = useGraphHierarchy()
 
-const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore)
+const { selectedItems } = storeToRefs(canvasStore)
 const { activeTab, isEditingSubgraph } = storeToRefs(rightSidePanelStore)
 
 const sidebarLocation = computed<'left' | 'right'>(() =>
@@ -49,31 +40,29 @@ const panelIcon = computed(() =>
     : 'icon-[lucide--panel-right]'
 )
 
-const { flattedItems, selectedNodes, selectedGroups, nodeToParentGroup } =
-  useFlatAndCategorizeSelectedItems(directlySelectedItems)
+const hasSelection = computed(() => selectedItems.value.length > 0)
 
-const shouldShowGroupNames = computed(() => {
-  return !(
-    directlySelectedItems.value.length === 1 &&
-    (selectedGroups.value.length === 1 || selectedNodes.value.length === 1)
-  )
+const selectedNodes = computed((): LGraphNode[] => {
+  return selectedItems.value.filter(isLGraphNode)
 })
 
-provide(GetNodeParentGroupKey, (node: LGraphNode) => {
-  if (!shouldShowGroupNames.value) return null
-  return nodeToParentGroup.value.get(node) ?? findParentGroup(node)
+const isSubgraphNode = computed(() => {
+  return selectedNode.value instanceof SubgraphNode
 })
 
-const hasSelection = computed(() => flattedItems.value.length > 0)
+const isSingleNodeSelected = computed(() => selectedNodes.value.length === 1)
 
-const selectedSingleNode = computed(() => {
-  return selectedNodes.value.length === 1 && flattedItems.value.length === 1
-    ? selectedNodes.value[0]
-    : null
+const selectedNode = computed(() => {
+  return isSingleNodeSelected.value ? selectedNodes.value[0] : null
 })
 
-const isSingleSubgraphNode = computed(() => {
-  return selectedSingleNode.value instanceof SubgraphNode
+const selectionCount = computed(() => selectedItems.value.length)
+
+const panelTitle = computed(() => {
+  if (isSingleNodeSelected.value && selectedNode.value) {
+    return selectedNode.value.title || selectedNode.value.type || 'Node'
+  }
+  return t('rightSidePanel.title', { count: selectionCount.value })
 })
 
 function closePanel() {
@@ -86,40 +75,25 @@ type RightSidePanelTabList = Array<{
 }>
 
 const tabs = computed<RightSidePanelTabList>(() => {
-  const list: RightSidePanelTabList = []
-
-  list.push({
-    label: () =>
-      flattedItems.value.length > 1
-        ? t('rightSidePanel.nodes')
-        : t('rightSidePanel.parameters'),
-    value: 'parameters'
-  })
-
-  if (!hasSelection.value) {
+  const list: RightSidePanelTabList = [
+    {
+      label: () => t('rightSidePanel.parameters'),
+      value: 'parameters'
+    },
+    {
+      label: () => t('g.settings'),
+      value: 'settings'
+    }
+  ]
+  if (
+    !hasSelection.value ||
+    (isSingleNodeSelected.value && !isSubgraphNode.value)
+  ) {
     list.push({
-      label: () => t('rightSidePanel.nodes'),
-      value: 'nodes'
+      label: () => t('rightSidePanel.info'),
+      value: 'info'
     })
   }
-
-  if (hasSelection.value) {
-    if (selectedSingleNode.value && !isSingleSubgraphNode.value) {
-      list.push({
-        label: () => t('rightSidePanel.info'),
-        value: 'info'
-      })
-    }
-  }
-
-  list.push({
-    label: () =>
-      hasSelection.value
-        ? t('g.settings')
-        : t('rightSidePanel.globalSettings.title'),
-    value: 'settings'
-  })
-
   return list
 })
 
@@ -127,59 +101,27 @@ const tabs = computed<RightSidePanelTabList>(() => {
 watchEffect(() => {
   if (
     !tabs.value.some((tab) => tab.value === activeTab.value) &&
-    !(activeTab.value === 'subgraph' && isSingleSubgraphNode.value)
+    !(activeTab.value === 'subgraph' && isSubgraphNode.value)
   ) {
     rightSidePanelStore.openPanel(tabs.value[0].value)
   }
 })
 
-function resolveTitle() {
-  const items = flattedItems.value
-  const nodes = selectedNodes.value
-  const groups = selectedGroups.value
-
-  if (items.length === 0) {
-    return t('rightSidePanel.workflowOverview')
-  }
-  if (directlySelectedItems.value.length === 1) {
-    if (groups.length === 1) {
-      return groups[0].title || t('rightSidePanel.fallbackGroupTitle')
-    }
-    if (nodes.length === 1) {
-      return (
-        nodes[0].title || nodes[0].type || t('rightSidePanel.fallbackNodeTitle')
-      )
-    }
-  }
-  return t('rightSidePanel.title', { count: items.length })
-}
-
-const panelTitle = ref(resolveTitle())
-watchEffect(() => (panelTitle.value = resolveTitle()))
-
 const isEditing = ref(false)
 
-const allowTitleEdit = computed(() => {
-  return (
-    directlySelectedItems.value.length === 1 &&
-    (selectedGroups.value.length === 1 || selectedNodes.value.length === 1)
-  )
-})
-
 function handleTitleEdit(newTitle: string) {
   isEditing.value = false
 
   const trimmedTitle = newTitle.trim()
   if (!trimmedTitle) return
 
-  const node = selectedGroups.value[0] || selectedNodes.value[0]
+  const node = toValue(selectedNode)
   if (!node) return
 
   if (trimmedTitle === node.title) return
 
   node.title = trimmedTitle
-  panelTitle.value = trimmedTitle
-  canvasStore.canvas?.setDirty(true, true)
+  canvasStore.canvas?.setDirty(true, false)
 }
 
 function handleTitleCancel() {
@@ -190,28 +132,21 @@ function handleTitleCancel() {
 <template>
   <div
     data-testid="properties-panel"
-    class="flex size-full flex-col bg-comfy-menu-bg"
+    class="flex size-full flex-col bg-interface-panel-surface"
   >
     <!-- Panel Header -->
     <section class="pt-1">
       <div class="flex items-center justify-between pl-4 pr-3">
-        <h3 class="my-3.5 text-sm font-semibold line-clamp-2 cursor-default">
-          <template v-if="allowTitleEdit">
-            <EditableText
-              :model-value="panelTitle"
-              :is-editing="isEditing"
-              :input-attrs="{ 'data-testid': 'node-title-input' }"
-              class="cursor-text"
-              @edit="handleTitleEdit"
-              @cancel="handleTitleCancel"
-              @click="isEditing = true"
-            />
-            <i
-              v-if="!isEditing"
-              class="icon-[lucide--pencil] size-4 text-muted-foreground ml-2 content-center relative top-[2px] hover:text-base-foreground cursor-pointer shrink-0"
-              @click="isEditing = true"
-            />
-          </template>
+        <h3 class="my-3.5 text-sm font-semibold line-clamp-2">
+          <EditableText
+            v-if="isSingleNodeSelected"
+            :model-value="panelTitle"
+            :is-editing="isEditing"
+            :input-attrs="{ 'data-testid': 'node-title-input' }"
+            @edit="handleTitleEdit"
+            @cancel="handleTitleCancel"
+            @dblclick="isEditing = true"
+          />
           <template v-else>
             {{ panelTitle }}
           </template>
@@ -219,7 +154,7 @@ function handleTitleCancel() {
 
         <div class="flex gap-2">
           <Button
-            v-if="isSingleSubgraphNode"
+            v-if="isSubgraphNode"
             variant="secondary"
             size="icon"
             :class="cn(isEditingSubgraph && 'bg-secondary-background-selected')"
@@ -242,7 +177,7 @@ function handleTitleCancel() {
           </Button>
         </div>
       </div>
-      <nav class="px-4 pb-2 pt-1 overflow-x-auto">
+      <nav v-if="hasSelection" class="px-4 pb-2 pt-1">
         <TabList
           :model-value="activeTab"
           @update:model-value="
@@ -254,7 +189,7 @@ function handleTitleCancel() {
           <Tab
             v-for="tab in tabs"
             :key="tab.value"
-            class="text-sm py-1 px-2 font-inter transition-all active:scale-95"
+            class="text-sm py-1 px-2 font-inter"
             :value="tab.value"
           >
             {{ tab.label() }}
@@ -265,29 +200,25 @@ function handleTitleCancel() {
 
     <!-- Panel Content -->
     <div class="scrollbar-thin flex-1 overflow-y-auto">
-      <template v-if="!hasSelection">
-        <TabGlobalParameters v-if="activeTab === 'parameters'" />
-        <TabNodes v-else-if="activeTab === 'nodes'" />
-        <TabGlobalSettings v-else-if="activeTab === 'settings'" />
-      </template>
+      <div
+        v-if="!hasSelection"
+        class="flex size-full p-4 items-start justify-start text-sm text-muted-foreground"
+      >
+        {{ $t('rightSidePanel.noSelection') }}
+      </div>
       <SubgraphEditor
-        v-else-if="isSingleSubgraphNode && isEditingSubgraph"
-        :node="selectedSingleNode"
+        v-else-if="isSubgraphNode && isEditingSubgraph"
+        :node="selectedNode"
       />
       <template v-else>
-        <TabSubgraphInputs
-          v-if="activeTab === 'parameters' && isSingleSubgraphNode"
-          :node="selectedSingleNode as SubgraphNode"
-        />
-        <TabNormalInputs
-          v-else-if="activeTab === 'parameters'"
+        <TabParameters
+          v-if="activeTab === 'parameters'"
           :nodes="selectedNodes"
-          :must-show-node-title="selectedGroups.length > 0"
         />
         <TabInfo v-else-if="activeTab === 'info'" :nodes="selectedNodes" />
         <TabSettings
           v-else-if="activeTab === 'settings'"
-          :nodes="flattedItems"
+          :nodes="selectedNodes"
         />
       </template>
     </div>

src/components/rightSidePanel/info/TabInfo.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { whenever } from '@vueuse/core'
 import { computed } from 'vue'
 
 import NodeHelpContent from '@/components/node/NodeHelpContent.vue'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
 const { nodes } = defineProps<{
   nodes: LGraphNode[]
@@ -11,10 +13,20 @@ const { nodes } = defineProps<{
 const node = computed(() => nodes[0])
 
 const nodeDefStore = useNodeDefStore()
+const nodeHelpStore = useNodeHelpStore()
 
 const nodeInfo = computed(() => {
   return nodeDefStore.fromLGraphNode(node.value)
 })
+
+// Open node help when the selected node changes
+whenever(
+  nodeInfo,
+  (info) => {
+    nodeHelpStore.openHelp(info)
+  },
+  { immediate: true }
+)
 </script>
 
 <template>

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -1,70 +1,54 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-
 import { cn } from '@/utils/tailwindUtil'
 
-import TransitionCollapse from './TransitionCollapse.vue'
-
-const props = defineProps<{
-  disabled?: boolean
-  label?: string
-  enableEmptyState?: boolean
-  tooltip?: string
+defineProps<{
+  isEmpty?: boolean
 }>()
 
 const isCollapse = defineModel<boolean>('collapse', { default: false })
-
-const isExpanded = computed(() => !isCollapse.value && !props.disabled)
-
-const tooltipConfig = computed(() => {
-  if (!props.tooltip) return undefined
-  return { value: props.tooltip, showDelay: 1000 }
-})
 </script>
 
 <template>
-  <div class="flex flex-col bg-comfy-menu-bg">
+  <div class="flex flex-col bg-interface-panel-surface">
     <div
       class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
     >
       <button
-        v-tooltip="tooltipConfig"
+        v-tooltip="
+          isEmpty
+            ? {
+                value: $t('rightSidePanel.inputsNoneTooltip'),
+                showDelay: 1_000
+              }
+            : undefined
+        "
         type="button"
         :class="
           cn(
             'group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
-            !disabled && 'cursor-pointer'
+            !isEmpty && 'cursor-pointer'
           )
         "
-        :disabled="disabled"
+        :disabled="isEmpty"
         @click="isCollapse = !isCollapse"
       >
-        <span class="text-sm font-semibold line-clamp-2 flex-1">
-          <slot name="label">
-            {{ label }}
-          </slot>
+        <span class="text-sm font-semibold line-clamp-2">
+          <slot name="label" />
         </span>
 
         <i
+          v-if="!isEmpty"
           :class="
             cn(
-              'text-muted-foreground group-hover:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
-              isCollapse && '-rotate-180',
-              disabled && 'opacity-0'
+              'text-muted-foreground group-hover:text-base-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
+              isCollapse && '-rotate-180'
             )
           "
         />
       </button>
     </div>
-    <TransitionCollapse>
-      <div v-if="isExpanded" class="pb-4">
-        <slot />
-      </div>
-      <slot v-else-if="enableEmptyState && disabled" name="empty">
-        <div>
-          {{ $t('g.empty') }}
-        </div>
-      </slot>
-    </TransitionCollapse>
+    <div v-if="!isCollapse && !isEmpty" class="pb-4">
+      <slot />
+    </div>
   </div>
 </template>

src/components/rightSidePanel/layout/SidePanelSearch.vue

@@ -1,30 +1,23 @@
 <script setup lang="ts">
 import { refDebounced } from '@vueuse/core'
 import { ref, toRef, toValue, watch } from 'vue'
-import type { HTMLAttributes, MaybeRefOrGetter } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const {
-  searcher = async () => {},
-  updateKey,
-  autofocus = false,
-  class: customClass
-} = defineProps<{
+const { searcher = async () => {}, updateKey } = defineProps<{
   searcher?: (
     query: string,
     onCleanup: (cleanupFn: () => void) => void
   ) => Promise<void>
   updateKey?: MaybeRefOrGetter<unknown>
-  autofocus?: boolean
-  class?: HTMLAttributes['class']
 }>()
 
 const searchQuery = defineModel<string>({ default: '' })
 
 const isQuerying = ref(false)
-const debouncedSearchQuery = refDebounced(searchQuery, 250, {
-  maxWait: 1000
+const debouncedSearchQuery = refDebounced(searchQuery, 100, {
+  maxWait: 100
 })
 watch(searchQuery, (value) => {
   isQuerying.value = value !== debouncedSearchQuery.value
@@ -51,54 +44,34 @@ watch(
   },
   { immediate: true }
 )
-
-function handleFocus(event: FocusEvent) {
-  const target = event.target as HTMLInputElement
-  target.select()
-}
 </script>
 
 <template>
   <label
     :class="
       cn(
-        'group',
-        'bg-component-node-widget-background rounded-lg transition-all duration-150',
-        'flex-1 flex items-center',
+        'mt-1 py-1.5 bg-secondary-background rounded-lg transition-all duration-150',
+        'flex-1 flex gap-2 px-2 items-center',
         'text-base-foreground border-0',
-        'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80',
-        customClass
+        'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80'
       )
     "
   >
     <i
       :class="
         cn(
-          'size-4 ml-2 shrink-0 transition-colors duration-150',
+          'size-4 text-muted-foreground',
           isQuerying
             ? 'icon-[lucide--loader-circle] animate-spin'
-            : 'icon-[lucide--search]',
-          searchQuery?.trim() !== ''
-            ? 'text-base-foreground'
-            : 'text-muted-foreground group-hover:text-base-foreground group-focus-within:text-base-foreground'
+            : 'icon-[lucide--search]'
         )
       "
     />
     <input
       v-model="searchQuery"
       type="text"
-      class="bg-transparent border-0 outline-0 ring-0 h-5 w-full my-1.5 mx-2"
+      class="bg-transparent border-0 outline-0 ring-0 h-5"
       :placeholder="$t('g.searchPlaceholder')"
-      :autofocus
-      @focus="handleFocus"
     />
-    <button
-      v-if="searchQuery.trim().length > 0"
-      class="text-muted-foreground hover:text-base-foreground bg-transparent shrink-0 border-0 outline-0 ring-0 p-0 m-0 pr-3 pl-1 flex items-center justify-center transition-all duration-150 hover:scale-108"
-      :aria-label="$t('g.clear')"
-      @click="searchQuery = ''"
-    >
-      <i :class="cn('icon-[lucide--delete] size-4 cursor-pointer')" />
-    </button>
   </label>
 </template>

src/components/rightSidePanel/layout/TransitionCollapse.vue

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-
-// From: https://stackoverflow.com/a/71426342/22392721
-interface Props {
-  duration?: number
-  easingEnter?: string
-  easingLeave?: string
-  opacityClosed?: number
-  opacityOpened?: number
-  disable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  duration: 150,
-  easingEnter: 'ease-in-out',
-  easingLeave: 'ease-in-out',
-  opacityClosed: 0,
-  opacityOpened: 1
-})
-
-const closed = '0px'
-
-const isMounted = ref(false)
-onMounted(() => (isMounted.value = true))
-
-const duration = computed(() =>
-  isMounted.value && !props.disable ? props.duration : 0
-)
-
-interface initialStyle {
-  height: string
-  width: string
-  position: string
-  visibility: string
-  overflow: string
-  paddingTop: string
-  paddingBottom: string
-  borderTopWidth: string
-  borderBottomWidth: string
-  marginTop: string
-  marginBottom: string
-}
-
-function getElementStyle(element: HTMLElement) {
-  return {
-    height: element.style.height,
-    width: element.style.width,
-    position: element.style.position,
-    visibility: element.style.visibility,
-    overflow: element.style.overflow,
-    paddingTop: element.style.paddingTop,
-    paddingBottom: element.style.paddingBottom,
-    borderTopWidth: element.style.borderTopWidth,
-    borderBottomWidth: element.style.borderBottomWidth,
-    marginTop: element.style.marginTop,
-    marginBottom: element.style.marginBottom
-  }
-}
-
-function prepareElement(element: HTMLElement, initialStyle: initialStyle) {
-  const { width } = getComputedStyle(element)
-  element.style.width = width
-  element.style.position = 'absolute'
-  element.style.visibility = 'hidden'
-  element.style.height = ''
-  const { height } = getComputedStyle(element)
-  element.style.width = initialStyle.width
-  element.style.position = initialStyle.position
-  element.style.visibility = initialStyle.visibility
-  element.style.height = closed
-  element.style.overflow = 'hidden'
-  return initialStyle.height && initialStyle.height !== closed
-    ? initialStyle.height
-    : height
-}
-
-function animateTransition(
-  element: HTMLElement,
-  initialStyle: initialStyle,
-  done: () => void,
-  keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
-  options?: number | KeyframeAnimationOptions
-) {
-  const animation = element.animate(keyframes, options)
-  // Set height to 'auto' to restore it after animation
-  element.style.height = initialStyle.height
-  animation.onfinish = () => {
-    element.style.overflow = initialStyle.overflow
-    done()
-  }
-}
-
-function getEnterKeyframes(height: string, initialStyle: initialStyle) {
-  return [
-    {
-      height: closed,
-      opacity: props.opacityClosed,
-      paddingTop: closed,
-      paddingBottom: closed,
-      borderTopWidth: closed,
-      borderBottomWidth: closed,
-      marginTop: closed,
-      marginBottom: closed
-    },
-    {
-      height,
-      opacity: props.opacityOpened,
-      paddingTop: initialStyle.paddingTop,
-      paddingBottom: initialStyle.paddingBottom,
-      borderTopWidth: initialStyle.borderTopWidth,
-      borderBottomWidth: initialStyle.borderBottomWidth,
-      marginTop: initialStyle.marginTop,
-      marginBottom: initialStyle.marginBottom
-    }
-  ]
-}
-
-function enterTransition(element: Element, done: () => void) {
-  const HTMLElement = element as HTMLElement
-  const initialStyle = getElementStyle(HTMLElement)
-  const height = prepareElement(HTMLElement, initialStyle)
-  const keyframes = getEnterKeyframes(height, initialStyle)
-  const options = { duration: duration.value, easing: props.easingEnter }
-  animateTransition(HTMLElement, initialStyle, done, keyframes, options)
-}
-
-function leaveTransition(element: Element, done: () => void) {
-  const HTMLElement = element as HTMLElement
-  const initialStyle = getElementStyle(HTMLElement)
-  const { height } = getComputedStyle(HTMLElement)
-  HTMLElement.style.height = height
-  HTMLElement.style.overflow = 'hidden'
-  const keyframes = getEnterKeyframes(height, initialStyle).reverse()
-  const options = { duration: duration.value, easing: props.easingLeave }
-  animateTransition(HTMLElement, initialStyle, done, keyframes, options)
-}
-</script>
-
-<template>
-  <Transition :css="false" @enter="enterTransition" @leave="leaveTransition">
-    <slot />
-  </Transition>
-</template>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -1,185 +1,87 @@
 <script setup lang="ts">
-import { computed, inject, provide, ref, shallowRef, watchEffect } from 'vue'
+import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
-import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
-import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
-import type {
-  LGraphGroup,
-  LGraphNode,
-  SubgraphNode
-} from '@/lib/litegraph/src/litegraph'
+import { useReactiveWidgetValue } from '@/composables/graph/useGraphNodeManager'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
+import {
+  getComponent,
+  shouldExpand
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import { cn } from '@/utils/tailwindUtil'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
-import { GetNodeParentGroupKey } from '../shared'
-import WidgetItem from './WidgetItem.vue'
 
-const {
-  label,
-  node,
-  widgets: widgetsProp,
-  showLocateButton = false,
-  isDraggable = false,
-  hiddenFavoriteIndicator = false,
-  showNodeName = false,
-  parents = [],
-  enableEmptyState = false,
-  tooltip
-} = defineProps<{
+const { label, widgets } = defineProps<{
   label?: string
-  parents?: SubgraphNode[]
-  node?: LGraphNode
   widgets: { widget: IBaseWidget; node: LGraphNode }[]
-  showLocateButton?: boolean
-  isDraggable?: boolean
-  hiddenFavoriteIndicator?: boolean
-  showNodeName?: boolean
-  /**
-   * Whether to show the empty state slot when there are no widgets.
-   */
-  enableEmptyState?: boolean
-  tooltip?: string
 }>()
 
-const collapse = defineModel<boolean>('collapse', { default: false })
-
-const widgetsContainer = ref<HTMLElement>()
-const rootElement = ref<HTMLElement>()
-
-const widgets = shallowRef(widgetsProp)
-watchEffect(() => (widgets.value = widgetsProp))
-
 provide('hideLayoutField', true)
 
 const canvasStore = useCanvasStore()
 const { t } = useI18n()
 
-const getNodeParentGroup = inject(GetNodeParentGroupKey, null)
-
-function isWidgetShownOnParents(
-  widgetNode: LGraphNode,
-  widget: IBaseWidget
-): boolean {
-  if (!parents.length) return false
-  const proxyWidgets = parseProxyWidgets(parents[0].properties.proxyWidgets)
-
-  // For proxy widgets (already promoted), check using overlay information
-  if (isProxyWidget(widget)) {
-    return proxyWidgets.some(
-      ([nodeId, widgetName]) =>
-        widget._overlay.nodeId == nodeId &&
-        widget._overlay.widgetName === widgetName
-    )
-  }
-
-  // For regular widgets (not yet promoted), check using node ID and widget name
-  return proxyWidgets.some(
-    ([nodeId, widgetName]) =>
-      widgetNode.id == nodeId && widget.name === widgetName
-  )
+function getWidgetComponent(widget: IBaseWidget) {
+  const component = getComponent(widget.type, widget.name)
+  return component || WidgetLegacy
 }
 
-const isEmpty = computed(() => widgets.value.length === 0)
+function onWidgetValueChange(
+  widget: IBaseWidget,
+  value: string | number | boolean | object
+) {
+  widget.value = value
+  widget.callback?.(value)
+  canvasStore.canvas?.setDirty(true, true)
+}
+
+const isEmpty = computed(() => widgets.length === 0)
 
 const displayLabel = computed(
-  () => label ?? (node ? node.title : t('rightSidePanel.inputs'))
+  () =>
+    label ??
+    (isEmpty.value
+      ? t('rightSidePanel.inputsNone')
+      : t('rightSidePanel.inputs'))
 )
-
-const targetNode = computed<LGraphNode | null>(() => {
-  if (node) return node
-  if (isEmpty.value) return null
-
-  const firstNodeId = widgets.value[0].node.id
-  const allSameNode = widgets.value.every(({ node }) => node.id === firstNodeId)
-
-  return allSameNode ? widgets.value[0].node : null
-})
-
-const parentGroup = computed<LGraphGroup | null>(() => {
-  if (!targetNode.value || !getNodeParentGroup) return null
-  return getNodeParentGroup(targetNode.value)
-})
-
-const canShowLocateButton = computed(
-  () => showLocateButton && targetNode.value !== null
-)
-
-function handleLocateNode() {
-  if (!targetNode.value || !canvasStore.canvas) return
-
-  const graphNode = canvasStore.canvas.graph?.getNodeById(targetNode.value.id)
-  if (graphNode) {
-    canvasStore.canvas.animateToBounds(graphNode.boundingRect)
-  }
-}
-
-defineExpose({
-  widgetsContainer,
-  rootElement
-})
 </script>
 
 <template>
-  <div ref="rootElement">
-    <PropertiesAccordionItem
-      v-model:collapse="collapse"
-      :enable-empty-state
-      :disabled="isEmpty"
-      :tooltip
-    >
-      <template #label>
-        <div class="flex items-center gap-2 flex-1 min-w-0">
-          <span class="flex-1 flex items-center gap-2 min-w-0">
-            <span class="truncate">
-              <slot name="label">
-                {{ displayLabel }}
-              </slot>
-            </span>
-            <span
-              v-if="parentGroup"
-              class="text-xs text-muted-foreground truncate flex-1 text-right min-w-11"
-              :title="parentGroup.title"
-            >
-              {{ parentGroup.title }}
-            </span>
-          </span>
-          <Button
-            v-if="canShowLocateButton"
-            variant="textonly"
-            size="icon-sm"
-            class="subbutton shrink-0 mr-3 size-8 cursor-pointer text-muted-foreground hover:text-base-foreground"
-            :title="t('rightSidePanel.locateNode')"
-            :aria-label="t('rightSidePanel.locateNode')"
-            @click.stop="handleLocateNode"
-          >
-            <i class="icon-[lucide--locate] size-4" />
-          </Button>
-        </div>
-      </template>
-
-      <template #empty><slot name="empty" /></template>
+  <PropertiesAccordionItem :is-empty>
+    <template #label>
+      <slot name="label">
+        {{ displayLabel }}
+      </slot>
+    </template>
 
+    <div v-if="!isEmpty" class="space-y-4 rounded-lg bg-interface-surface px-4">
       <div
-        ref="widgetsContainer"
-        class="space-y-2 rounded-lg px-4 pt-1 relative"
+        v-for="({ widget, node }, index) in widgets"
+        :key="`widget-${index}-${widget.name}`"
+        class="widget-item gap-1.5 col-span-full grid grid-cols-subgrid"
       >
-        <TransitionGroup name="list-scale">
-          <WidgetItem
-            v-for="{ widget, node } in widgets"
-            :key="`${node.id}-${widget.name}-${widget.type}`"
-            :widget="widget"
-            :node="node"
-            :is-draggable="isDraggable"
-            :hidden-favorite-indicator="hiddenFavoriteIndicator"
-            :show-node-name="showNodeName"
-            :parents="parents"
-            :is-shown-on-parents="isWidgetShownOnParents(node, widget)"
-          />
-        </TransitionGroup>
+        <div class="min-h-8">
+          <p v-if="widget.name" class="text-sm leading-8 p-0 m-0 line-clamp-1">
+            {{ widget.label || widget.name }}
+          </p>
+        </div>
+        <component
+          :is="getWidgetComponent(widget)"
+          :widget="widget"
+          :model-value="useReactiveWidgetValue(widget)"
+          :node-id="String(node.id)"
+          :node-type="node.type"
+          :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
+          @update:model-value="
+            (value: string | number | boolean | object) =>
+              onWidgetValueChange(widget, value)
+          "
+        />
       </div>
-    </PropertiesAccordionItem>
-  </div>
+    </div>
+  </PropertiesAccordionItem>
 </template>

src/components/rightSidePanel/parameters/TabGlobalParameters.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { useMounted, watchDebounced } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef
-} from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
-import { DraggableList } from '@/scripts/ui/draggableList'
-import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
-import type { ValidFavoritedWidget } from '@/stores/workspace/favoritedWidgetsStore'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-
-import { searchWidgets } from '../shared'
-import SectionWidgets from './SectionWidgets.vue'
-
-const favoritedWidgetsStore = useFavoritedWidgetsStore()
-const rightSidePanelStore = useRightSidePanelStore()
-const { searchQuery } = storeToRefs(rightSidePanelStore)
-const { t } = useI18n()
-
-const draggableList = ref<DraggableList | undefined>(undefined)
-const sectionWidgetsRef = ref<{ widgetsContainer: HTMLElement }>()
-const isSearching = ref(false)
-
-const favoritedWidgets = computed(
-  () => favoritedWidgetsStore.validFavoritedWidgets
-)
-
-const label = computed(() =>
-  favoritedWidgets.value.length === 0
-    ? t('rightSidePanel.favoritesNone')
-    : t('rightSidePanel.favorites')
-)
-
-const searchedFavoritedWidgets = shallowRef<ValidFavoritedWidget[]>(
-  favoritedWidgets.value
-)
-
-async function searcher(query: string) {
-  isSearching.value = query.trim().length > 0
-  searchedFavoritedWidgets.value = searchWidgets(favoritedWidgets.value, query)
-}
-
-const isMounted = useMounted()
-
-function setDraggableState() {
-  if (!isMounted.value) return
-  draggableList.value?.dispose()
-  const container = sectionWidgetsRef.value?.widgetsContainer
-  if (isSearching.value || !container?.children?.length) return
-
-  draggableList.value = new DraggableList(container, '.draggable-item')
-
-  draggableList.value.applyNewItemsOrder = function () {
-    const reorderedItems: HTMLElement[] = []
-
-    let oldPosition = -1
-    this.getAllItems().forEach((item, index) => {
-      if (item === this.draggableItem) {
-        oldPosition = index
-        return
-      }
-      if (!this.isItemToggled(item)) {
-        reorderedItems[index] = item
-        return
-      }
-      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
-      reorderedItems[newIndex] = item
-    })
-
-    for (let index = 0; index < this.getAllItems().length; index++) {
-      const item = reorderedItems[index]
-      if (typeof item === 'undefined') {
-        reorderedItems[index] = this.draggableItem as HTMLElement
-      }
-    }
-
-    const newPosition = reorderedItems.indexOf(
-      this.draggableItem as HTMLElement
-    )
-    const widgets = [...searchedFavoritedWidgets.value]
-    const [widget] = widgets.splice(oldPosition, 1)
-    widgets.splice(newPosition, 0, widget)
-    searchedFavoritedWidgets.value = widgets
-    favoritedWidgetsStore.reorderFavorites(widgets)
-  }
-}
-
-watchDebounced(
-  searchedFavoritedWidgets,
-  () => {
-    setDraggableState()
-  },
-  { debounce: 100 }
-)
-
-onMounted(() => {
-  setDraggableState()
-})
-
-onBeforeUnmount(() => {
-  draggableList.value?.dispose()
-})
-</script>
-
-<template>
-  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
-    <FormSearchInput
-      v-model="searchQuery"
-      :searcher
-      :update-key="favoritedWidgets"
-    />
-  </div>
-  <SectionWidgets
-    ref="sectionWidgetsRef"
-    :label
-    :widgets="searchedFavoritedWidgets"
-    :is-draggable="!isSearching"
-    hidden-favorite-indicator
-    show-node-name
-    enable-empty-state
-    class="border-b border-interface-stroke"
-    @update:collapse="nextTick(setDraggableState)"
-  >
-    <template #empty>
-      <div class="text-sm text-muted-foreground px-4 text-center py-10">
-        {{
-          isSearching
-            ? t('rightSidePanel.noneSearchDesc')
-            : t('rightSidePanel.favoritesNoneDesc')
-        }}
-      </div>
-    </template>
-  </SectionWidgets>
-</template>