remove type asertion

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

@@ -1,5 +1,5 @@
-# Description: When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Electron API Types'
+description: 'When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   workflow_dispatch:

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

@@ -1,5 +1,5 @@
-# Description: When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Manager API Types'
+description: 'When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger

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

@@ -1,5 +1,5 @@
-# Description: When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Registry API Types'
+description: 'When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger

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

@@ -1,5 +1,5 @@
-# Description: Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq
 name: "CI: JSON Validation"
+description: "Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq"
 
 on:
   push:

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

@@ -1,5 +1,5 @@
-# Description: Linting and code formatting validation for pull requests
 name: "CI: Lint Format"
+description: "Linting and code formatting validation for pull requests"
 
 on:
   pull_request:

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

@@ -1,5 +1,5 @@
-# Description: Validates Python code in tools/devtools directory
 name: "CI: Python Validation"
+description: "Validates Python code in tools/devtools directory"
 
 on:
   pull_request:

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

@@ -1,5 +1,5 @@
-# Description: Deploys test results from forked PRs (forks can't access deployment secrets)
 name: "CI: Tests E2E (Deploy for Forks)"
+description: "Deploys test results from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:

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

@@ -1,5 +1,5 @@
-# Description: End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages
 name: "CI: Tests E2E"
+description: "End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages"
 
 on:
   push:

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

@@ -1,5 +1,5 @@
-# Description: Deploys Storybook previews from forked PRs (forks can't access deployment secrets)
 name: "CI: Tests Storybook (Deploy for Forks)"
+description: "Deploys Storybook previews from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:

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

@@ -1,9 +1,10 @@
-# Description: Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages
 name: "CI: Tests Storybook"
+description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
 
 on:
   workflow_dispatch:  # Allow manual triggering
   pull_request:
+    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs

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

@@ -1,5 +1,5 @@
-# Description: Unit and component testing with Vitest
 name: "CI: Tests Unit"
+description: "Unit and component testing with Vitest"
 
 on:
   push:

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

@@ -1,5 +1,5 @@
-# Description: Validates YAML syntax and style using yamllint with relaxed rules
 name: "CI: YAML Validation"
+description: "Validates YAML syntax and style using yamllint with relaxed rules"
 
 on:
   push:

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

@@ -1,69 +0,0 @@
----
-name: Cloud Backport Tag
-
-on:
-  pull_request:
-    types: ['closed']
-    branches: [cloud/*]
-
-jobs:
-  create-tag:
-    if: >
-      github.event.pull_request.merged == true &&
-      contains(github.event.pull_request.labels.*.name, 'backport')
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-      pull-requests: read
-
-    steps:
-      - name: Checkout merge commit
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ github.event.pull_request.merge_commit_sha }}
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v5
-        with:
-          node-version-file: '.nvmrc'
-
-      - name: Create tag for cloud backport
-        id: tag
-        run: |
-          set -euo pipefail
-
-          BRANCH="${{ github.event.pull_request.base.ref }}"
-          if [[ ! "$BRANCH" =~ ^cloud/([0-9]+)\.([0-9]+)$ ]]; then
-            echo "::error::Base branch '$BRANCH' is not a cloud/x.y branch"
-            exit 1
-          fi
-
-          MAJOR="${BASH_REMATCH[1]}"
-          MINOR="${BASH_REMATCH[2]}"
-
-          VERSION=$(node -p "require('./package.json').version")
-          if [[ "$VERSION" =~ ^${MAJOR}\.${MINOR}\.([0-9]+)(-.+)?$ ]]; then
-            PATCH="${BASH_REMATCH[1]}"
-            SUFFIX="${BASH_REMATCH[2]:-}"
-          else
-            echo "::error::Version '${VERSION}' does not match cloud branch '${BRANCH}'"
-            exit 1
-          fi
-
-          TAG="cloud/v${VERSION}"
-
-          if git ls-remote --tags origin "${TAG}" | grep -Fq "refs/tags/${TAG}"; then
-            echo "::notice::Tag ${TAG} already exists; skipping"
-            echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
-            exit 0
-          fi
-
-          git tag "${TAG}" "${{ github.event.pull_request.merge_commit_sha }}"
-          git push origin "${TAG}"
-          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
-          {
-            echo "Created tag: ${TAG}"
-            echo "Branch: ${BRANCH}"
-            echo "Version: ${VERSION}"
-            echo "Commit: ${{ github.event.pull_request.merge_commit_sha }}"
-          } >> "$GITHUB_STEP_SUMMARY"

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

@@ -1,5 +1,5 @@
-# Description: Generates and updates translations for core ComfyUI components using OpenAI
 name: "i18n: Update Core"
+description: "Generates and updates translations for core ComfyUI components using OpenAI"
 
 on:
   # Manual dispatch for urgent translation updates

.github/workflows/pr-backport.yaml

@@ -78,7 +78,8 @@ jobs:
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
             LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
           else
-            LABELS=$(jq -r '.pull_request.labels[].name' "$GITHUB_EVENT_PATH")
+            LABELS='${{ toJSON(github.event.pull_request.labels) }}'
+            LABELS=$(echo "$LABELS" | jq -r '.[].name')
           fi
 
           add_target() {
@@ -236,8 +237,8 @@ jobs:
             PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
             MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
           else
-            PR_TITLE=$(jq -r '.pull_request.title' "$GITHUB_EVENT_PATH")
-            MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
           fi
 
           for target in ${{ steps.filter-targets.outputs.pending-targets }}; do
@@ -326,8 +327,8 @@ jobs:
             PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
             PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
           else
-            PR_TITLE=$(jq -r '.pull_request.title' "$GITHUB_EVENT_PATH")
-            PR_AUTHOR=$(jq -r '.pull_request.user.login' "$GITHUB_EVENT_PATH")
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
           fi
 
           for backport in ${{ steps.backport.outputs.success }}; do
@@ -364,9 +365,9 @@ jobs:
             PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
             MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
           else
-            PR_NUMBER=$(jq -r '.pull_request.number' "$GITHUB_EVENT_PATH")
-            PR_AUTHOR=$(jq -r '.pull_request.user.login' "$GITHUB_EVENT_PATH")
-            MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
+            PR_NUMBER="${{ github.event.pull_request.number }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
           fi
 
           for failure in ${{ steps.backport.outputs.failed }}; do

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

@@ -1,5 +1,5 @@
-# Description: AI-powered code review triggered by adding the 'claude-review' label to a PR
 name: "PR: Claude Review"
+description: "AI-powered code review triggered by adding the 'claude-review' label to a PR"
 
 permissions:
   contents: read

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

@@ -148,10 +148,10 @@ jobs:
           done
 
           {
-            echo "results<<EOF"
+            echo "results<<'EOF'"
             cat "$RESULTS_FILE"
             echo "EOF"
-          } >> "$GITHUB_OUTPUT"
+          } >> $GITHUB_OUTPUT
 
       - name: Ensure release labels
         if: steps.check_version.outputs.is_minor_bump == 'true'

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

@@ -1,5 +1,5 @@
-# Description: Manual workflow to increment package version with semantic versioning support
 name: "Release: Version Bump"
+description: "Manual workflow to increment package version with semantic versioning support"
 
 on:
   workflow_dispatch:
@@ -59,6 +59,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
+          cache: 'pnpm'
 
       - name: Bump version
         id: bump-version

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

@@ -1,5 +1,5 @@
-# Description: Automated weekly documentation accuracy check and update via Claude
 name: "Weekly Documentation Check"
+description: "Automated weekly documentation accuracy check and update via Claude"
 
 permissions:
   contents: write

.storybook/main.ts

@@ -64,6 +64,7 @@ const config: StorybookConfig = {
           deep: true,
           extensions: ['vue']
         })
+        // Note: Explicitly NOT including generateImportMapPlugin to avoid externalization
       ],
       server: {
         allowedHosts: true

CODEOWNERS

@@ -1,11 +1,8 @@
-# Global Ownership
-*                                                 @Comfy-org/comfy_frontend_devs
-
 # Desktop/Electron
-/apps/desktop-ui/                                 @benceruleanlu
-/src/stores/electronDownloadStore.ts              @benceruleanlu
-/src/extensions/core/electronAdapter.ts           @benceruleanlu
-/vite.electron.config.mts                         @benceruleanlu
+/apps/desktop-ui/                                 @webfiltered
+/src/stores/electronDownloadStore.ts              @webfiltered
+/src/extensions/core/electronAdapter.ts           @webfiltered
+/vite.electron.config.mts                         @webfiltered
 
 # Common UI Components
 /src/components/chip/                             @viva-jinyi
@@ -34,7 +31,10 @@
 /src/components/graph/selectionToolbox/           @Myestery
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery 
+/src/renderer/extensions/minimap/                 @jtydhr88
+
+# Assets
+/src/platform/assets/                             @arjansingh
 
 # Workflow Templates
 /src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
@@ -53,7 +53,7 @@
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer
 
 # LLM Instructions (blank on purpose)
 .claude/

CONTRIBUTING.md

@@ -243,7 +243,7 @@ pnpm format
 
 ### Styling
 - Use Tailwind CSS classes instead of custom CSS
-- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
+- Follow the existing dark theme pattern: `dark-theme:` prefix (not `dark:`)
 
 ### Internationalization
 - All user-facing strings must use vue-i18n

FEATURE_FLAGS_EXPLANATION.md

@@ -1,229 +0,0 @@
-# Feature Flags System Explanation
-
-## Overview
-
-The `useFeatureFlag` hook (actually named `useFeatureFlags`) is a Vue 3 composable that provides **reactive access to server-side feature flags** received via WebSocket from the backend. It enables capability negotiation between frontend and backend, allowing the UI to adapt based on what features the server supports.
-
-## Architecture Flow
-
-```
-1. Frontend connects via WebSocket
-2. Frontend sends client feature flags (first message)
-3. Backend responds with server feature flags
-4. Frontend stores flags in api.serverFeatureFlags
-5. Components use useFeatureFlags() to access flags reactively
-```
-
-## Core Implementation
-
-### 1. The `useFeatureFlags` Composable
-
-**Location:** `src/composables/useFeatureFlags.ts`
-
-The composable returns two things:
-
-#### A. Predefined `flags` Object
-A reactive object with getter properties for commonly-used feature flags:
-
-```typescript
-const { flags } = useFeatureFlags()
-
-// Access predefined flags
-flags.supportsPreviewMetadata  // boolean | undefined
-flags.maxUploadSize            // number | undefined
-flags.supportsManagerV4        // boolean | undefined
-flags.modelUploadButtonEnabled // boolean (checks remoteConfig first)
-flags.assetUpdateOptionsEnabled // boolean (checks remoteConfig first)
-```
-
-**Key Points:**
-- Uses Vue's `reactive()` to make the object reactive
-- Each getter calls `api.getServerFeature()` which reads from `api.serverFeatureFlags`
-- Some flags (like `modelUploadButtonEnabled`) check `remoteConfig` first (from `/api/features` endpoint) before falling back to WebSocket flags
-- Returns a `readonly()` wrapper to prevent external mutation
-
-#### B. Generic `featureFlag` Function
-A function that creates a computed ref for any feature flag path:
-
-```typescript
-const { featureFlag } = useFeatureFlags()
-
-// Create a reactive computed ref for any flag
-const myFlag = featureFlag('custom.feature.path', false) // defaultValue is optional
-// myFlag is a ComputedRef that updates when serverFeatureFlags changes
-```
-
-**Key Points:**
-- Accepts any string path (supports dot notation for nested values)
-- Returns a `computed()` ref that automatically updates when flags change
-- Generic type parameter allows type safety: `featureFlag<boolean>('flag', false)`
-
-### 2. The Underlying API Layer
-
-**Location:** `src/scripts/api.ts`
-
-The `ComfyApi` class manages feature flags:
-
-```typescript
-class ComfyApi {
-  // Stores flags received from backend
-  serverFeatureFlags: Record<string, unknown> = {}
-  
-  // Retrieves a flag value using dot notation
-  getServerFeature<T>(featureName: string, defaultValue?: T): T {
-    return get(this.serverFeatureFlags, featureName, defaultValue) as T
-  }
-}
-```
-
-**How Flags Are Received:**
-1. WebSocket connection is established
-2. Frontend sends client feature flags as first message
-3. Backend responds with a `feature_flags` message type
-4. The message handler stores it: `this.serverFeatureFlags = msg.data`
-
-**The `get` Function:**
-- Uses `es-toolkit/compat`'s `get` function (lodash-style)
-- Supports dot notation: `'extension.manager.supports_v4'` accesses nested objects
-- Returns `defaultValue` if the path doesn't exist
-
-### 3. Remote Config Integration
-
-**Location:** `src/platform/remoteConfig/remoteConfig.ts`
-
-Some flags check `remoteConfig` first (loaded from `/api/features` endpoint):
-
-```typescript
-// Example from modelUploadButtonEnabled
-return (
-  remoteConfig.value.model_upload_button_enabled ??  // Check remote config first
-  api.getServerFeature(ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED, false)  // Fallback
-)
-```
-
-**Why Two Sources?**
-- `remoteConfig`: Fetched via HTTP at app startup, can be updated without WebSocket
-- WebSocket flags: Real-time capability negotiation, updated on reconnection
-
-## Usage Patterns
-
-### Pattern 1: Using Predefined Flags
-
-```typescript
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-
-const { flags } = useFeatureFlags()
-
-// In template
-if (flags.supportsPreviewMetadata) {
-  // Use enhanced preview feature
-}
-
-// In script
-const maxSize = flags.maxUploadSize ?? 100 * 1024 * 1024 // Default 100MB
-```
-
-### Pattern 2: Using Generic featureFlag Function
-
-```typescript
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-
-const { featureFlag } = useFeatureFlags()
-
-// Create a reactive computed ref
-const customFeature = featureFlag<boolean>('extension.custom.feature', false)
-
-// Use in template (automatically reactive)
-// <div v-if="customFeature">New Feature UI</div>
-
-// Use in script
-watch(customFeature, (enabled) => {
-  if (enabled) {
-    // Feature was enabled
-  }
-})
-```
-
-### Pattern 3: Direct API Access (Non-Reactive)
-
-```typescript
-import { api } from '@/scripts/api'
-
-// Direct access (not reactive, use sparingly)
-if (api.serverSupportsFeature('supports_preview_metadata')) {
-  // Feature is supported
-}
-
-const maxSize = api.getServerFeature('max_upload_size', 100 * 1024 * 1024)
-```
-
-## Reactivity Explained
-
-The composable is **reactive** because:
-
-1. **Predefined flags**: Use `reactive()` with getters, so when `api.serverFeatureFlags` changes, Vue's reactivity system detects it
-2. **Generic featureFlag**: Returns `computed()`, which automatically tracks `api.getServerFeature()` calls and re-evaluates when flags change
-3. **WebSocket updates**: When flags are updated via WebSocket, `api.serverFeatureFlags` is reassigned, triggering reactivity
-
-## Adding New Feature Flags
-
-### Step 1: Add to Enum (if it's a core flag)
-
-```typescript
-// In useFeatureFlags.ts
-export enum ServerFeatureFlag {
-  // ... existing flags
-  MY_NEW_FEATURE = 'my_new_feature'
-}
-```
-
-### Step 2: Add to flags Object (if commonly used)
-
-```typescript
-// In useFeatureFlags.ts flags object
-get myNewFeature() {
-  return api.getServerFeature(ServerFeatureFlag.MY_NEW_FEATURE, false)
-}
-```
-
-### Step 3: Use in Components
-
-```typescript
-const { flags } = useFeatureFlags()
-if (flags.myNewFeature) {
-  // Use the feature
-}
-```
-
-**OR** use the generic function without modifying the composable:
-
-```typescript
-const { featureFlag } = useFeatureFlags()
-const myFeature = featureFlag('my_new_feature', false)
-```
-
-## Important Notes
-
-1. **Flags are server-driven**: The backend controls which flags are available
-2. **Default values**: Always provide sensible defaults when using `getServerFeature()`
-3. **Reactivity**: The composable ensures UI updates automatically when flags change (e.g., on WebSocket reconnection)
-4. **Type safety**: Use TypeScript generics with `featureFlag<T>()` for type safety
-5. **Dot notation**: Feature flags can be nested, use dot notation: `'extension.manager.supports_v4'`
-6. **Remote config priority**: Some flags check `remoteConfig` first, then fall back to WebSocket flags
-
-## Testing
-
-See `tests-ui/tests/composables/useFeatureFlags.test.ts` for examples of:
-- Mocking `api.getServerFeature()`
-- Testing reactive behavior
-- Testing default values
-- Testing nested paths
-
-## Related Files
-
-- `src/composables/useFeatureFlags.ts` - The main composable
-- `src/scripts/api.ts` - API layer with `getServerFeature()` method
-- `src/platform/remoteConfig/remoteConfig.ts` - Remote config integration
-- `docs/FEATURE_FLAGS.md` - Full system documentation
-- `tests-ui/tests/composables/useFeatureFlags.test.ts` - Unit tests
-

FEATURE_FLAG_PAYLOAD.md

@@ -1,196 +0,0 @@
-# Feature Flag Payload Shape
-
-## Feature Flag Key
-`demo-run-button-experiment`
-
-## Expected Structure
-
-The feature flag value should be either:
-
-### Control (Original Button)
-- `false`
-- `null`
-- `undefined`
-- Not set
-
-When any of these values are present, the original SplitButton will be displayed.
-
-### Experiment (Experimental Button)
-An object with the following structure:
-
-```typescript
-{
-  variant: string,           // Required: variant name (e.g., "bold-gradient", "animated", "playful", "minimal")
-  payload?: {                // Optional: styling and content overrides
-    label?: string,          // Button text (default: "Run")
-    icon?: string,           // Icon class (default: variant-specific)
-    backgroundColor?: string, // Background color/class (default: variant-specific)
-    textColor?: string,      // Text color/class (default: variant-specific)
-    borderRadius?: string,   // Border radius class (default: variant-specific)
-    padding?: string         // Padding class (default: "px-4 py-2")
-  }
-}
-```
-
-## Example Payloads
-
-### Bold Gradient Variant
-```json
-{
-  "variant": "bold-gradient",
-  "payload": {
-    "label": "Run",
-    "icon": "icon-[lucide--zap]",
-    "backgroundColor": "transparent",
-    "textColor": "white",
-    "borderRadius": "rounded-xl"
-  }
-}
-```
-
-### Animated Variant
-```json
-{
-  "variant": "animated",
-  "payload": {
-    "label": "Launch",
-    "icon": "icon-[lucide--rocket]",
-    "backgroundColor": "bg-primary-background",
-    "textColor": "white",
-    "borderRadius": "rounded-full"
-  }
-}
-```
-
-### Playful Variant
-```json
-{
-  "variant": "playful",
-  "payload": {
-    "label": "Go!",
-    "icon": "icon-[lucide--sparkles]",
-    "backgroundColor": "bg-gradient-to-br from-yellow-400 to-orange-500",
-    "textColor": "white",
-    "borderRadius": "rounded-2xl"
-  }
-}
-```
-
-### Minimal Variant
-```json
-{
-  "variant": "minimal",
-  "payload": {
-    "label": "Run",
-    "icon": "icon-[lucide--play]",
-    "backgroundColor": "bg-white",
-    "textColor": "text-gray-800",
-    "borderRadius": "rounded-md"
-  }
-}
-```
-
-## Payload Properties
-
-### `variant` (required)
-- Type: `string`
-- Description: The variant name that determines the base styling and behavior
-- Supported values:
-  - `"bold-gradient"` - Gradient background with animated effect
-  - `"animated"` - Pulsing animation effect
-  - `"playful"` - Sparkle effects with playful styling
-  - `"minimal"` - Clean, minimal design
-  - Any custom variant name (will use default styling)
-
-### `payload.label` (optional)
-- Type: `string`
-- Default: `"Run"` (or variant-specific default)
-- Description: The text displayed on the button
-
-### `payload.icon` (optional)
-- Type: `string`
-- Default: Variant-specific icon
-- Description: Icon class name (e.g., `"icon-[lucide--play]"`)
-- Examples:
-  - `"icon-[lucide--play]"` - Play icon
-  - `"icon-[lucide--zap]"` - Lightning bolt
-  - `"icon-[lucide--rocket]"` - Rocket
-  - `"icon-[lucide--sparkles]"` - Sparkles
-
-### `payload.backgroundColor` (optional)
-- Type: `string`
-- Default: Variant-specific background
-- Description: Tailwind CSS class or CSS color value for background
-- Examples:
-  - `"bg-primary-background"` - Primary background color
-  - `"bg-white"` - White background
-  - `"transparent"` - Transparent (for gradient overlays)
-  - `"bg-gradient-to-br from-yellow-400 to-orange-500"` - Gradient
-
-### `payload.textColor` (optional)
-- Type: `string`
-- Default: Variant-specific text color
-- Description: Tailwind CSS class or CSS color value for text
-- Examples:
-  - `"white"` - White text (CSS color)
-  - `"text-white"` - White text (Tailwind class)
-  - `"text-gray-800"` - Dark gray text
-
-### `payload.borderRadius` (optional)
-- Type: `string`
-- Default: Variant-specific border radius
-- Description: Tailwind CSS border radius class
-- Examples:
-  - `"rounded-md"` - Medium border radius
-  - `"rounded-xl"` - Extra large border radius
-  - `"rounded-full"` - Fully rounded (pill shape)
-  - `"rounded-2xl"` - 2x extra large border radius
-
-### `payload.padding` (optional)
-- Type: `string`
-- Default: `"px-4 py-2"`
-- Description: Tailwind CSS padding classes
-- Examples:
-  - `"px-4 py-2"` - Standard padding
-  - `"px-6 py-3"` - Larger padding
-  - `"px-2 py-1"` - Smaller padding
-
-## Backend Integration
-
-The backend should send this feature flag via WebSocket in the `feature_flags` message:
-
-```json
-{
-  "type": "feature_flags",
-  "data": {
-    "demo-run-button-experiment": {
-      "variant": "bold-gradient",
-      "payload": {
-        "label": "Run",
-        "icon": "icon-[lucide--zap]",
-        "textColor": "white",
-        "borderRadius": "rounded-xl"
-      }
-    }
-  }
-}
-```
-
-Or to show the control (original button):
-
-```json
-{
-  "type": "feature_flags",
-  "data": {
-    "demo-run-button-experiment": false
-  }
-}
-```
-
-## Notes
-
-- All `payload` properties are optional - if omitted, variant-specific defaults will be used
-- The `variant` property is required when the flag is truthy
-- Color values can be either Tailwind classes (e.g., `"text-white"`) or CSS color values (e.g., `"white"`)
-- The component will automatically handle both formats
-

apps/desktop-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/desktop-ui",
-  "version": "0.0.4",
+  "version": "0.0.3",
   "type": "module",
   "nx": {
     "tags": [
@@ -91,7 +91,7 @@
     "build-storybook": "storybook build -o dist/storybook"
   },
   "dependencies": {
-    "@comfyorg/comfyui-electron-types": "catalog:",
+    "@comfyorg/comfyui-electron-types": "0.4.73-0",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@primevue/core": "catalog:",
     "@primevue/themes": "catalog:",

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

@@ -22,11 +22,7 @@
         <h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
           {{ title }}
         </h1>
-        <p
-          v-if="statusText"
-          class="text-lg text-neutral-400"
-          data-testid="startup-status-text"
-        >
+        <p v-if="statusText" class="text-lg text-neutral-400">
           {{ statusText }}
         </p>
       </div>

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

@@ -115,18 +115,19 @@ import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
-import { computed, onMounted, ref } from 'vue'
-import type { ModelRef } from 'vue'
+import { type ModelRef, computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { PYPI_MIRROR, PYTHON_MIRROR } from '@/constants/uvMirrors'
-import type { UVMirror } from '@/constants/uvMirrors'
+import MigrationPicker from '@/components/install/MigrationPicker.vue'
+import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
+import {
+  PYPI_MIRROR,
+  PYTHON_MIRROR,
+  type UVMirror
+} from '@/constants/uvMirrors'
 import { electronAPI } from '@/utils/envUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
-import MigrationPicker from './MigrationPicker.vue'
-import MirrorItem from './mirror/MirrorItem.vue'
-
 const { t } = useI18n()
 
 const installPath = defineModel<string>('installPath', { required: true })
@@ -228,10 +229,6 @@ const validatePath = async (path: string | undefined) => {
       }
       if (validation.parentMissing) errors.push(t('install.parentMissing'))
       if (validation.isOneDrive) errors.push(t('install.isOneDrive'))
-      if (validation.isInsideAppInstallDir)
-        errors.push(t('install.insideAppInstallDir'))
-      if (validation.isInsideUpdaterCache)
-        errors.push(t('install.insideUpdaterCache'))
 
       if (validation.error)
         errors.push(`${t('install.unhandledError')}: ${validation.error}`)

apps/desktop-ui/src/constants/desktopMaintenanceTasks.ts

@@ -16,8 +16,7 @@ export const DESKTOP_MAINTENANCE_TASKS: Readonly<MaintenanceTask>[] = [
     execute: async () => await electron.setBasePath(),
     name: 'Base path',
     shortDescription: 'Change the application base path.',
-    errorDescription:
-      'The current base path is invalid or unsafe. Please select a new location.',
+    errorDescription: 'Unable to open the base path.  Please select a new one.',
     description:
       'The base path is the default location where ComfyUI stores data. It is the location for the python environment, and may also contain models, custom nodes, and other extensions.',
     isInstallationFix: true,

apps/desktop-ui/src/stores/maintenanceTaskStore.ts

@@ -85,7 +85,6 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
   const electron = electronAPI()
 
   // Reactive state
-  const lastUpdate = ref<InstallValidation | null>(null)
   const isRefreshing = ref(false)
   const isRunningTerminalCommand = computed(() =>
     tasks.value
@@ -98,13 +97,6 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
       .some((task) => getRunner(task)?.executing)
   )
 
-  const unsafeBasePath = computed(
-    () => lastUpdate.value?.unsafeBasePath === true
-  )
-  const unsafeBasePathReason = computed(
-    () => lastUpdate.value?.unsafeBasePathReason
-  )
-
   // Task list
   const tasks = ref(DESKTOP_MAINTENANCE_TASKS)
 
@@ -131,7 +123,6 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
    * @param validationUpdate Update details passed in by electron
    */
   const processUpdate = (validationUpdate: InstallValidation) => {
-    lastUpdate.value = validationUpdate
     const update = validationUpdate as IndexedUpdate
     isRefreshing.value = true
 
@@ -164,11 +155,7 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
   }
 
   const execute = async (task: MaintenanceTask) => {
-    const success = await getRunner(task).execute(task)
-    if (success && task.isInstallationFix) {
-      await refreshDesktopTasks()
-    }
-    return success
+    return getRunner(task).execute(task)
   }
 
   return {
@@ -176,8 +163,6 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
     isRefreshing,
     isRunningTerminalCommand,
     isRunningInstallationFix,
-    unsafeBasePath,
-    unsafeBasePathReason,
     execute,
     getRunner,
     processUpdate,

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

@@ -1,159 +0,0 @@
-// eslint-disable-next-line storybook/no-renderer-packages
-import type { Meta, StoryObj } from '@storybook/vue3'
-import { defineAsyncComponent } from 'vue'
-
-type UnsafeReason = 'appInstallDir' | 'updaterCache' | 'oneDrive' | null
-type ValidationIssueState = 'OK' | 'warning' | 'error' | 'skipped'
-
-type ValidationState = {
-  inProgress: boolean
-  installState: string
-  basePath?: ValidationIssueState
-  unsafeBasePath: boolean
-  unsafeBasePathReason: UnsafeReason
-  venvDirectory?: ValidationIssueState
-  pythonInterpreter?: ValidationIssueState
-  pythonPackages?: ValidationIssueState
-  uv?: ValidationIssueState
-  git?: ValidationIssueState
-  vcRedist?: ValidationIssueState
-  upgradePackages?: ValidationIssueState
-}
-
-const validationState: ValidationState = {
-  inProgress: false,
-  installState: 'installed',
-  basePath: 'OK',
-  unsafeBasePath: false,
-  unsafeBasePathReason: null,
-  venvDirectory: 'OK',
-  pythonInterpreter: 'OK',
-  pythonPackages: 'OK',
-  uv: 'OK',
-  git: 'OK',
-  vcRedist: 'OK',
-  upgradePackages: 'OK'
-}
-
-const createMockElectronAPI = () => {
-  const logListeners: Array<(message: string) => void> = []
-
-  const getValidationUpdate = () => ({
-    ...validationState
-  })
-
-  return {
-    getPlatform: () => 'darwin',
-    changeTheme: (_theme: unknown) => {},
-    onLogMessage: (listener: (message: string) => void) => {
-      logListeners.push(listener)
-    },
-    showContextMenu: (_options: unknown) => {},
-    Events: {
-      trackEvent: (_eventName: string, _data?: unknown) => {}
-    },
-    Validation: {
-      onUpdate: (_callback: (update: unknown) => void) => {},
-      async getStatus() {
-        return getValidationUpdate()
-      },
-      async validateInstallation(callback: (update: unknown) => void) {
-        callback(getValidationUpdate())
-      },
-      async complete() {
-        // Only allow completion when the base path is safe
-        return !validationState.unsafeBasePath
-      },
-      dispose: () => {}
-    },
-    setBasePath: () => Promise.resolve(true),
-    reinstall: () => Promise.resolve(),
-    uv: {
-      installRequirements: () => Promise.resolve(),
-      clearCache: () => Promise.resolve(),
-      resetVenv: () => Promise.resolve()
-    }
-  }
-}
-
-const ensureElectronAPI = () => {
-  const globalWindow = window as unknown as { electronAPI?: unknown }
-  if (!globalWindow.electronAPI) {
-    globalWindow.electronAPI = createMockElectronAPI()
-  }
-
-  return globalWindow.electronAPI
-}
-
-const MaintenanceView = defineAsyncComponent(async () => {
-  ensureElectronAPI()
-  const module = await import('./MaintenanceView.vue')
-  return module.default
-})
-
-const meta: Meta<typeof MaintenanceView> = {
-  title: 'Desktop/Views/MaintenanceView',
-  component: MaintenanceView,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#0a0a0a' },
-        { name: 'neutral-900', value: '#171717' },
-        { name: 'neutral-950', value: '#0a0a0a' }
-      ]
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  name: 'All tasks OK',
-  render: () => ({
-    components: { MaintenanceView },
-    setup() {
-      validationState.inProgress = false
-      validationState.installState = 'installed'
-      validationState.basePath = 'OK'
-      validationState.unsafeBasePath = false
-      validationState.unsafeBasePathReason = null
-      validationState.venvDirectory = 'OK'
-      validationState.pythonInterpreter = 'OK'
-      validationState.pythonPackages = 'OK'
-      validationState.uv = 'OK'
-      validationState.git = 'OK'
-      validationState.vcRedist = 'OK'
-      validationState.upgradePackages = 'OK'
-      ensureElectronAPI()
-      return {}
-    },
-    template: '<MaintenanceView />'
-  })
-}
-
-export const UnsafeBasePathOneDrive: Story = {
-  name: 'Unsafe base path (OneDrive)',
-  render: () => ({
-    components: { MaintenanceView },
-    setup() {
-      validationState.inProgress = false
-      validationState.installState = 'installed'
-      validationState.basePath = 'error'
-      validationState.unsafeBasePath = true
-      validationState.unsafeBasePathReason = 'oneDrive'
-      validationState.venvDirectory = 'OK'
-      validationState.pythonInterpreter = 'OK'
-      validationState.pythonPackages = 'OK'
-      validationState.uv = 'OK'
-      validationState.git = 'OK'
-      validationState.vcRedist = 'OK'
-      validationState.upgradePackages = 'OK'
-      ensureElectronAPI()
-      return {}
-    },
-    template: '<MaintenanceView />'
-  })
-}

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

@@ -47,28 +47,6 @@
           </div>
         </div>
 
-        <!-- Unsafe migration warning -->
-        <div v-if="taskStore.unsafeBasePath" class="my-4">
-          <p class="flex items-start gap-3 text-neutral-300">
-            <Tag
-              icon="pi pi-exclamation-triangle"
-              severity="warn"
-              :value="t('icon.exclamation-triangle')"
-            />
-            <span>
-              <strong class="block mb-1">
-                {{ t('maintenance.unsafeMigration.title') }}
-              </strong>
-              <span class="block mb-1">
-                {{ unsafeReasonText }}
-              </span>
-              <span class="block text-sm text-neutral-400">
-                {{ t('maintenance.unsafeMigration.action') }}
-              </span>
-            </span>
-          </p>
-        </div>
-
         <!-- Tasks -->
         <TaskListPanel
           class="border-neutral-700 border-solid border-x-0 border-y"
@@ -111,10 +89,10 @@
 import { PrimeIcons } from '@primevue/core/api'
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
-import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { watch } from 'vue'
 
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
@@ -161,27 +139,6 @@ const filterOptions = ref([
 /** Filter binding; can be set to show all tasks, or only errors. */
 const filter = ref<MaintenanceFilter>(filterOptions.value[0])
 
-const unsafeReasonText = computed(() => {
-  const reason = taskStore.unsafeBasePathReason
-  if (!reason) {
-    return t('maintenance.unsafeMigration.generic')
-  }
-
-  if (reason === 'appInstallDir') {
-    return t('maintenance.unsafeMigration.appInstallDir')
-  }
-
-  if (reason === 'updaterCache') {
-    return t('maintenance.unsafeMigration.updaterCache')
-  }
-
-  if (reason === 'oneDrive') {
-    return t('maintenance.unsafeMigration.oneDrive')
-  }
-
-  return t('maintenance.unsafeMigration.generic')
-})
-
 /** If valid, leave the validation window. */
 const completeValidation = async () => {
   const isValid = await electron.Validation.complete()

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

@@ -85,10 +85,11 @@
 </template>
 
 <script setup lang="ts">
-import { InstallStage, ProgressStatus } from '@comfyorg/comfyui-electron-types'
-import type {
-  InstallStageInfo,
-  InstallStageName
+import {
+  InstallStage,
+  type InstallStageInfo,
+  type InstallStageName,
+  ProgressStatus
 } from '@comfyorg/comfyui-electron-types'
 import type { Terminal } from '@xterm/xterm'
 import Button from 'primevue/button'

browser_tests/fixtures/ComfyPage.ts

@@ -16,6 +16,7 @@ import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
 import { SettingDialog } from './components/SettingDialog'
 import {
   NodeLibrarySidebarTab,
+  QueueSidebarTab,
   WorkflowsSidebarTab
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
@@ -30,6 +31,7 @@ type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 class ComfyMenu {
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
+  private _queueTab: QueueSidebarTab | null = null
   private _topbar: Topbar | null = null
 
   public readonly sideToolbar: Locator
@@ -58,6 +60,11 @@ class ComfyMenu {
     return this._workflowsTab
   }
 
+  get queueTab() {
+    this._queueTab ??= new QueueSidebarTab(this.page)
+    return this._queueTab
+  }
+
   get topbar() {
     this._topbar ??= new Topbar(this.page)
     return this._topbar
@@ -557,7 +564,7 @@ export class ComfyPage {
   async dragAndDrop(source: Position, target: Position) {
     await this.page.mouse.move(source.x, source.y)
     await this.page.mouse.down()
-    await this.page.mouse.move(target.x, target.y, { steps: 100 })
+    await this.page.mouse.move(target.x, target.y)
     await this.page.mouse.up()
     await this.nextFrame()
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -65,9 +65,7 @@ export class VueNodeHelpers {
    * Select a specific Vue node by ID
    */
   async selectNode(nodeId: string): Promise<void> {
-    await this.page
-      .locator(`[data-node-id="${nodeId}"] .lg-node-header`)
-      .click()
+    await this.page.locator(`[data-node-id="${nodeId}"]`).click()
   }
 
   /**
@@ -79,13 +77,11 @@ export class VueNodeHelpers {
     // Select first node normally
     await this.selectNode(nodeIds[0])
 
-    // Add additional nodes with Ctrl+click on header
+    // Add additional nodes with Ctrl+click
     for (let i = 1; i < nodeIds.length; i++) {
-      await this.page
-        .locator(`[data-node-id="${nodeIds[i]}"] .lg-node-header`)
-        .click({
-          modifiers: ['Control']
-        })
+      await this.page.locator(`[data-node-id="${nodeIds[i]}"]`).click({
+        modifiers: ['Control']
+      })
     }
   }
 

browser_tests/fixtures/components/SidebarTab.ts

@@ -148,3 +148,124 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
   }
 }
+
+export class QueueSidebarTab extends SidebarTab {
+  constructor(public readonly page: Page) {
+    super(page, 'queue')
+  }
+
+  get root() {
+    return this.page.locator('.sidebar-content-container', { hasText: 'Queue' })
+  }
+
+  get tasks() {
+    return this.root.locator('[data-virtual-grid-item]')
+  }
+
+  get visibleTasks() {
+    return this.tasks.locator('visible=true')
+  }
+
+  get clearButton() {
+    return this.root.locator('.clear-all-button')
+  }
+
+  get collapseTasksButton() {
+    return this.getToggleExpandButton(false)
+  }
+
+  get expandTasksButton() {
+    return this.getToggleExpandButton(true)
+  }
+
+  get noResultsPlaceholder() {
+    return this.root.locator('.no-results-placeholder')
+  }
+
+  get galleryImage() {
+    return this.page.locator('.galleria-image')
+  }
+
+  private getToggleExpandButton(isExpanded: boolean) {
+    const iconSelector = isExpanded ? '.pi-image' : '.pi-images'
+    return this.root.locator(`.toggle-expanded-button ${iconSelector}`)
+  }
+
+  async open() {
+    await super.open()
+    return this.root.waitFor({ state: 'visible' })
+  }
+
+  async close() {
+    await super.close()
+    await this.root.waitFor({ state: 'hidden' })
+  }
+
+  async expandTasks() {
+    await this.expandTasksButton.click()
+    await this.collapseTasksButton.waitFor({ state: 'visible' })
+  }
+
+  async collapseTasks() {
+    await this.collapseTasksButton.click()
+    await this.expandTasksButton.waitFor({ state: 'visible' })
+  }
+
+  async waitForTasks() {
+    return Promise.all([
+      this.tasks.first().waitFor({ state: 'visible' }),
+      this.tasks.last().waitFor({ state: 'visible' })
+    ])
+  }
+
+  async scrollTasks(direction: 'up' | 'down') {
+    const scrollToEl =
+      direction === 'up' ? this.tasks.last() : this.tasks.first()
+    await scrollToEl.scrollIntoViewIfNeeded()
+    await this.waitForTasks()
+  }
+
+  async clearTasks() {
+    await this.clearButton.click()
+    const confirmButton = this.page.getByLabel('Delete')
+    await confirmButton.click()
+    await this.noResultsPlaceholder.waitFor({ state: 'visible' })
+  }
+
+  /** Set the width of the tab (out of 100). Must call before opening the tab */
+  async setTabWidth(width: number) {
+    if (width < 0 || width > 100) {
+      throw new Error('Width must be between 0 and 100')
+    }
+    return this.page.evaluate((width) => {
+      localStorage.setItem('queue', JSON.stringify([width, 100 - width]))
+    }, width)
+  }
+
+  getTaskPreviewButton(taskIndex: number) {
+    return this.tasks.nth(taskIndex).getByRole('button')
+  }
+
+  async openTaskPreview(taskIndex: number) {
+    const previewButton = this.getTaskPreviewButton(taskIndex)
+    await previewButton.click()
+    return this.galleryImage.waitFor({ state: 'visible' })
+  }
+
+  getGalleryImage(imageFilename: string) {
+    return this.galleryImage.and(this.page.getByAltText(imageFilename))
+  }
+
+  getTaskImage(imageFilename: string) {
+    return this.tasks.getByAltText(imageFilename)
+  }
+
+  /** Trigger the queue store and tasks to update */
+  async triggerTasksUpdate() {
+    await this.page.evaluate(() => {
+      window['app']['api'].dispatchCustomEvent('status', {
+        exec_info: { queue_remaining: 0 }
+      })
+    })
+  }
+}

browser_tests/tests/chatHistory.spec.ts

@@ -0,0 +1,144 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+interface ChatHistoryEntry {
+  prompt: string
+  response: string
+  response_id: string
+}
+
+async function renderChatHistory(page: Page, history: ChatHistoryEntry[]) {
+  const nodeId = await page.evaluate(() => window['app'].graph.nodes[0]?.id)
+  // Simulate API sending display_component message
+  await page.evaluate(
+    ({ nodeId, history }) => {
+      const event = new CustomEvent('display_component', {
+        detail: {
+          node_id: nodeId,
+          component: 'ChatHistoryWidget',
+          props: {
+            history: JSON.stringify(history)
+          }
+        }
+      })
+      window['app'].api.dispatchEvent(event)
+      return true
+    },
+    { nodeId, history }
+  )
+
+  return nodeId
+}
+
+test.describe('Chat History Widget', () => {
+  let nodeId: string
+
+  test.beforeEach(async ({ comfyPage }) => {
+    nodeId = await renderChatHistory(comfyPage.page, [
+      { prompt: 'Hello', response: 'World', response_id: '123' }
+    ])
+    // Wait for chat history to be rendered
+    await comfyPage.page.waitForSelector('.pi-pencil')
+  })
+
+  test('displays chat history when receiving display_component message', async ({
+    comfyPage
+  }) => {
+    // Verify the chat history is displayed correctly
+    await expect(comfyPage.page.getByText('Hello')).toBeVisible()
+    await expect(comfyPage.page.getByText('World')).toBeVisible()
+  })
+
+  test('handles message editing interaction', async ({ comfyPage }) => {
+    // Get first node's ID
+    nodeId = await comfyPage.page.evaluate(() => {
+      const node = window['app'].graph.nodes[0]
+
+      // Make sure the node has a prompt widget (for editing functionality)
+      if (!node.widgets) {
+        node.widgets = []
+      }
+
+      // Add a prompt widget if it doesn't exist
+      if (!node.widgets.find((w) => w.name === 'prompt')) {
+        node.widgets.push({
+          name: 'prompt',
+          type: 'text',
+          value: 'Original prompt'
+        })
+      }
+
+      return node.id
+    })
+
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Message 1',
+        response: 'Response 1',
+        response_id: '123'
+      },
+      {
+        prompt: 'Message 2',
+        response: 'Response 2',
+        response_id: '456'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    const originalTextAreaInput = await comfyPage.page
+      .getByPlaceholder('text')
+      .nth(1)
+      .inputValue()
+
+    // Click edit button on first message
+    await comfyPage.page.getByLabel('Edit').first().click()
+    await comfyPage.nextFrame()
+
+    // Verify cancel button appears
+    await expect(comfyPage.page.getByLabel('Cancel')).toBeVisible()
+
+    // Click cancel edit
+    await comfyPage.page.getByLabel('Cancel').click()
+
+    // Verify prompt input is restored
+    await expect(comfyPage.page.getByPlaceholder('text').nth(1)).toHaveValue(
+      originalTextAreaInput
+    )
+  })
+
+  test('handles real-time updates to chat history', async ({ comfyPage }) => {
+    // Send initial history
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Initial message',
+        response: 'Initial response',
+        response_id: '123'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    // Update history with additional messages
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Follow-up',
+        response: 'New response',
+        response_id: '456'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    // Move mouse over the canvas to force update
+    await comfyPage.page.mouse.move(100, 100)
+    await comfyPage.nextFrame()
+
+    // Verify new messages appear
+    await expect(comfyPage.page.getByText('Follow-up')).toBeVisible()
+    await expect(comfyPage.page.getByText('New response')).toBeVisible()
+  })
+})

browser_tests/tests/nodeHelp.spec.ts

@@ -2,7 +2,6 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
-import { fitToViewInstant } from '../helpers/fitToView'
 
 // TODO: there might be a better solution for this
 // Helper function to pan canvas and select node
@@ -517,7 +516,6 @@ This is English documentation.
       )
 
       await comfyPage.loadWorkflow('default')
-      await fitToViewInstant(comfyPage)
 
       // Select KSampler first
       const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')

browser_tests/tests/sidebar/queue.spec.ts

@@ -0,0 +1,210 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe.skip('Queue sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('can display tasks', async ({ comfyPage }) => {
+    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.waitForTasks()
+    expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+  })
+
+  test('can display tasks after closing then opening', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.close()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.waitForTasks()
+    expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+  })
+
+  test.describe('Virtual scroll', () => {
+    const layouts = [
+      { description: 'Five columns layout', width: 95, rows: 3, cols: 5 },
+      { description: 'Three columns layout', width: 55, rows: 3, cols: 3 },
+      { description: 'Two columns layout', width: 40, rows: 3, cols: 2 }
+    ]
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp'])
+        .repeat(50)
+        .setupRoutes()
+    })
+
+    layouts.forEach(({ description, width, rows, cols }) => {
+      const preRenderedRows = 1
+      const preRenderedTasks = preRenderedRows * cols * 2
+      const visibleTasks = rows * cols
+      const expectRenderLimit = visibleTasks + preRenderedTasks
+
+      test.describe(description, () => {
+        test.beforeEach(async ({ comfyPage }) => {
+          await comfyPage.menu.queueTab.setTabWidth(width)
+          await comfyPage.menu.queueTab.open()
+          await comfyPage.menu.queueTab.waitForTasks()
+        })
+
+        test('should not render items outside of view', async ({
+          comfyPage
+        }) => {
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+
+        test('should teardown items after scrolling away', async ({
+          comfyPage
+        }) => {
+          await comfyPage.menu.queueTab.scrollTasks('down')
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+
+        test('should re-render items after scrolling away then back', async ({
+          comfyPage
+        }) => {
+          await comfyPage.menu.queueTab.scrollTasks('down')
+          await comfyPage.menu.queueTab.scrollTasks('up')
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+      })
+    })
+  })
+
+  test.describe('Expand tasks', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      // 2-item batch and 3-item batch -> 3 additional items when expanded
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp', 'example.webp', 'example.webp'])
+        .withTask(['example.webp', 'example.webp'])
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+    })
+
+    test('can expand tasks with multiple outputs', async ({ comfyPage }) => {
+      const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
+      await comfyPage.menu.queueTab.expandTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
+        initialCount + 3
+      )
+    })
+
+    test('can collapse flat tasks', async ({ comfyPage }) => {
+      const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
+      await comfyPage.menu.queueTab.expandTasks()
+      await comfyPage.menu.queueTab.collapseTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
+        initialCount
+      )
+    })
+  })
+
+  test.describe('Clear tasks', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp'])
+        .repeat(6)
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+    })
+
+    test('can clear all tasks', async ({ comfyPage }) => {
+      await comfyPage.menu.queueTab.clearTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(0)
+      expect(
+        await comfyPage.menu.queueTab.noResultsPlaceholder.isVisible()
+      ).toBe(true)
+    })
+
+    test('can load new tasks after clearing all', async ({ comfyPage }) => {
+      await comfyPage.menu.queueTab.clearTasks()
+      await comfyPage.menu.queueTab.close()
+      await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+    })
+  })
+
+  test.describe('Gallery', () => {
+    const firstImage = 'example.webp'
+    const secondImage = 'image32x32.webp'
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask([secondImage])
+        .withTask([firstImage])
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+      await comfyPage.menu.queueTab.openTaskPreview(0)
+    })
+
+    test('displays gallery image after opening task preview', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nextFrame()
+      await expect(
+        comfyPage.menu.queueTab.getGalleryImage(firstImage)
+      ).toBeVisible()
+    })
+
+    test('maintains active gallery item when new tasks are added', async ({
+      comfyPage
+    }) => {
+      // Add a new task while the gallery is still open
+      const newImage = 'image64x64.webp'
+      comfyPage.setupHistory().withTask([newImage])
+      await comfyPage.menu.queueTab.triggerTasksUpdate()
+      await comfyPage.page.waitForTimeout(500)
+      const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
+      await newTask.waitFor({ state: 'visible' })
+      // The active gallery item should still be the initial image
+      await expect(
+        comfyPage.menu.queueTab.getGalleryImage(firstImage)
+      ).toBeVisible()
+    })
+
+    test.describe('Gallery navigation', () => {
+      const paths: {
+        description: string
+        path: ('Right' | 'Left')[]
+        end: string
+      }[] = [
+        { description: 'Right', path: ['Right'], end: secondImage },
+        { description: 'Left', path: ['Right', 'Left'], end: firstImage },
+        { description: 'Left wrap', path: ['Left'], end: secondImage },
+        { description: 'Right wrap', path: ['Right', 'Right'], end: firstImage }
+      ]
+
+      paths.forEach(({ description, path, end }) => {
+        test(`can navigate gallery ${description}`, async ({ comfyPage }) => {
+          for (const direction of path)
+            await comfyPage.page.keyboard.press(`Arrow${direction}`, {
+              delay: 256
+            })
+          await comfyPage.nextFrame()
+          await expect(
+            comfyPage.menu.queueTab.getGalleryImage(end)
+          ).toBeVisible()
+        })
+      })
+    })
+  })
+})

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts

@@ -6,7 +6,6 @@ import {
 test.describe('Vue Nodes Zoom', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
     await comfyPage.vueNodes.waitForNodes()
   })
 

browser_tests/tests/vueNodes/interactions/node/resize.spec.ts

@@ -1,54 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-
-test.describe('Vue Node Resizing', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test('should resize node without position drift after selecting', async ({
-    comfyPage
-  }) => {
-    // Get a Vue node fixture
-    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
-    const initialBox = await node.boundingBox()
-    if (!initialBox) throw new Error('Node bounding box not found')
-
-    // Select the node first (this was causing the bug)
-    await node.header.click()
-    await comfyPage.page.waitForTimeout(100) // Brief pause after selection
-
-    // Get position after selection
-    const selectedBox = await node.boundingBox()
-    if (!selectedBox)
-      throw new Error('Node bounding box not found after select')
-
-    // Verify position unchanged after selection
-    expect(selectedBox.x).toBeCloseTo(initialBox.x, 1)
-    expect(selectedBox.y).toBeCloseTo(initialBox.y, 1)
-
-    // Now resize from bottom-right corner
-    const resizeStartX = selectedBox.x + selectedBox.width - 5
-    const resizeStartY = selectedBox.y + selectedBox.height - 5
-
-    await comfyPage.page.mouse.move(resizeStartX, resizeStartY)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(resizeStartX + 50, resizeStartY + 30)
-    await comfyPage.page.mouse.up()
-
-    // Get final position and size
-    const finalBox = await node.boundingBox()
-    if (!finalBox) throw new Error('Node bounding box not found after resize')
-
-    // Position should NOT have changed (the bug was position drift)
-    expect(finalBox.x).toBeCloseTo(initialBox.x, 1)
-    expect(finalBox.y).toBeCloseTo(initialBox.y, 1)
-
-    // Size should have increased
-    expect(finalBox.width).toBeGreaterThan(initialBox.width)
-    expect(finalBox.height).toBeGreaterThan(initialBox.height)
-  })
-})

browser_tests/tests/vueNodes/nodeStates/lod.spec.ts

@@ -0,0 +1,48 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Vue Nodes - LOD', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('default')
+  })
+
+  test('should toggle LOD based on zoom threshold', async ({ comfyPage }) => {
+    await comfyPage.vueNodes.waitForNodes()
+
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(initialNodeCount).toBeGreaterThan(0)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-default.png')
+
+    const vueNodesContainer = comfyPage.vueNodes.nodes
+    const textboxesInNodes = vueNodesContainer.getByRole('textbox')
+    const comboboxesInNodes = vueNodesContainer.getByRole('combobox')
+
+    await expect(textboxesInNodes.first()).toBeVisible()
+    await expect(comboboxesInNodes.first()).toBeVisible()
+
+    await comfyPage.zoom(120, 10)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-lod-active.png')
+
+    await expect(textboxesInNodes.first()).toBeHidden()
+    await expect(comboboxesInNodes.first()).toBeHidden()
+
+    await comfyPage.zoom(-120, 10)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-nodes-lod-inactive.png'
+    )
+    await expect(textboxesInNodes.first()).toBeVisible()
+    await expect(comboboxesInNodes.first()).toBeVisible()
+  })
+})

build/plugins/comfyAPIPlugin.ts

@@ -88,14 +88,12 @@ export function comfyAPIPlugin(isDev: boolean): Plugin {
 
         if (result.exports.length > 0) {
           const projectRoot = process.cwd()
-          const relativePath = path
-            .relative(path.join(projectRoot, 'src'), id)
-            .replace(/\\/g, '/')
+          const relativePath = path.relative(path.join(projectRoot, 'src'), id)
           const shimFileName = relativePath.replace(/\.ts$/, '.js')
 
           let shimContent = `// Shim for ${relativePath}\n`
 
-          const fileKey = relativePath.replace(/\.ts$/, '')
+          const fileKey = relativePath.replace(/\.ts$/, '').replace(/\\/g, '/')
           const warningMessage = getWarningMessage(fileKey, shimFileName)
 
           if (warningMessage) {

build/plugins/generateImportMapPlugin.ts

@@ -0,0 +1,154 @@
+import glob from 'fast-glob'
+import fs from 'fs-extra'
+import { dirname, join } from 'node:path'
+import { type HtmlTagDescriptor, type Plugin, normalizePath } from 'vite'
+
+interface ImportMapSource {
+  name: string
+  pattern: string | RegExp
+  entry: string
+  recursiveDependence?: boolean
+  override?: Record<string, Partial<ImportMapSource>>
+}
+
+const parseDeps = (root: string, pkg: string) => {
+  const pkgPath = join(root, 'node_modules', pkg, 'package.json')
+  if (fs.existsSync(pkgPath)) {
+    const content = fs.readFileSync(pkgPath, 'utf-8')
+    const pkg = JSON.parse(content)
+    return Object.keys(pkg.dependencies || {})
+  }
+  return []
+}
+
+/**
+ * Vite plugin that generates an import map for vendor chunks.
+ *
+ * This plugin creates a browser-compatible import map that maps module specifiers
+ * (like 'vue' or 'primevue') to their actual file locations in the build output.
+ * This improves module loading in modern browsers and enables better caching.
+ *
+ * The plugin:
+ * 1. Tracks vendor chunks during bundle generation
+ * 2. Creates mappings between module names and their file paths
+ * 3. Injects an import map script tag into the HTML head
+ * 4. Configures manual chunk splitting for vendor libraries
+ *
+ * @param vendorLibraries - An array of vendor libraries to split into separate chunks
+ * @returns {Plugin} A Vite plugin that generates and injects an import map
+ */
+export function generateImportMapPlugin(
+  importMapSources: ImportMapSource[]
+): Plugin {
+  const importMapEntries: Record<string, string> = {}
+  const resolvedImportMapSources: Map<string, ImportMapSource> = new Map()
+  const assetDir = 'assets/lib'
+  let root: string
+
+  return {
+    name: 'generate-import-map-plugin',
+
+    // Configure manual chunks during the build process
+    configResolved(config) {
+      root = config.root
+
+      if (config.build) {
+        // Ensure rollupOptions exists
+        if (!config.build.rollupOptions) {
+          config.build.rollupOptions = {}
+        }
+
+        for (const source of importMapSources) {
+          resolvedImportMapSources.set(source.name, source)
+          if (source.recursiveDependence) {
+            const deps = parseDeps(root, source.name)
+
+            while (deps.length) {
+              const dep = deps.shift()!
+              const depSource = Object.assign({}, source, {
+                name: dep,
+                pattern: dep,
+                ...source.override?.[dep]
+              })
+              resolvedImportMapSources.set(depSource.name, depSource)
+
+              const _deps = parseDeps(root, depSource.name)
+              deps.unshift(..._deps)
+            }
+          }
+        }
+
+        const external: (string | RegExp)[] = []
+        for (const [, source] of resolvedImportMapSources) {
+          external.push(source.pattern)
+        }
+        config.build.rollupOptions.external = external
+      }
+    },
+
+    generateBundle(_options) {
+      for (const [, source] of resolvedImportMapSources) {
+        if (source.entry) {
+          const moduleFile = join(source.name, source.entry)
+          const sourceFile = join(root, 'node_modules', moduleFile)
+          const targetFile = join(root, 'dist', assetDir, moduleFile)
+
+          importMapEntries[source.name] =
+            './' + normalizePath(join(assetDir, moduleFile))
+
+          const targetDir = dirname(targetFile)
+          if (!fs.existsSync(targetDir)) {
+            fs.mkdirSync(targetDir, { recursive: true })
+          }
+          fs.copyFileSync(sourceFile, targetFile)
+        }
+
+        if (source.recursiveDependence) {
+          const files = glob.sync(['**/*.{js,mjs}'], {
+            cwd: join(root, 'node_modules', source.name)
+          })
+
+          for (const file of files) {
+            const moduleFile = join(source.name, file)
+            const sourceFile = join(root, 'node_modules', moduleFile)
+            const targetFile = join(root, 'dist', assetDir, moduleFile)
+
+            importMapEntries[normalizePath(join(source.name, dirname(file)))] =
+              './' + normalizePath(join(assetDir, moduleFile))
+
+            const targetDir = dirname(targetFile)
+            if (!fs.existsSync(targetDir)) {
+              fs.mkdirSync(targetDir, { recursive: true })
+            }
+            fs.copyFileSync(sourceFile, targetFile)
+          }
+        }
+      }
+    },
+
+    transformIndexHtml(html) {
+      if (Object.keys(importMapEntries).length === 0) {
+        console.warn(
+          '[ImportMap Plugin] No vendor chunks found to create import map.'
+        )
+        return html
+      }
+
+      const importMap = {
+        imports: importMapEntries
+      }
+
+      const importMapTag: HtmlTagDescriptor = {
+        tag: 'script',
+        attrs: { type: 'importmap' },
+        children: JSON.stringify(importMap, null, 2),
+        injectTo: 'head'
+      }
+
+      return {
+        html,
+        tags: [importMapTag]
+      }
+    }
+  }
+}

build/plugins/index.ts

@@ -1 +1,2 @@
 export { comfyAPIPlugin } from './comfyAPIPlugin'
+export { generateImportMapPlugin } from './generateImportMapPlugin'

cloud-loader-dropdown.md

@@ -1,24 +0,0 @@
-Fixes loader dropdown placeholder
-===============================
-
-Cloud loader dropdowns hydrate via `useAssetWidgetData(nodeType)`, so `dropdownItems` stays empty until the Asset API returns friendly filenames. Meanwhile `modelValue` already holds the saved asset and the watcher at [WidgetSelectDropdown.vue#L215-L227](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue#L215-L227) only tracks `modelValue`. It runs before assets load, fails to find a match, clears `selectedSet`, and the placeholder persists.
-
-```ts
-watch(
-  modelValue,
-  (currentValue) => {
-    if (currentValue === undefined) {
-      selectedSet.value.clear()
-      return
-    }
-    const item = dropdownItems.value.find((item) => item.name === currentValue)
-    if (item) {
-      selectedSet.value.clear()
-      selectedSet.value.add(item.id)
-    }
-  },
-  { immediate: true }
-)
-```
-
-Once the API resolves, `dropdownItems` recomputes but nothing resyncs because the watcher never sees that change. Desktop doesn’t hit this because it still reads from `widget.options.values` immediately.

eslint.config.ts

@@ -140,8 +140,8 @@ export default defineConfig([
       'unused-imports/no-unused-imports': 'error',
       'no-console': ['error', { allow: ['warn', 'error'] }],
       'vue/no-v-html': 'off',
-      // Prohibit dark-theme: and dark: prefixes
-      'vue/no-restricted-class': ['error', '/^dark(-theme)?:/'],
+      // Enforce dark-theme: instead of dark: prefix
+      'vue/no-restricted-class': ['error', '/^dark:/'],
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
       'vue/match-component-import-name': 'error',
@@ -191,19 +191,6 @@ export default defineConfig([
       '@intlify/vue-i18n/no-raw-text': [
         'error',
         {
-          attributes: {
-            '/.+/': [
-              'aria-label',
-              'aria-placeholder',
-              'aria-roledescription',
-              'aria-valuetext',
-              'label',
-              'placeholder',
-              'title',
-              'v-tooltip'
-            ],
-            img: ['alt']
-          },
           // Ignore strings that are:
           // 1. Less than 2 characters
           // 2. Only symbols/numbers/whitespace (no letters)
@@ -213,27 +200,24 @@ export default defineConfig([
           ignoreNodes: ['md-icon', 'v-icon', 'pre', 'code', 'script', 'style'],
           // Brand names and technical terms that shouldn't be translated
           ignoreText: [
-            'API',
-            'App Data:',
-            'App Path:',
             'ComfyUI',
-            'CPU',
-            'fps',
-            'GB',
             'GitHub',
-            'GPU',
-            'JSON',
-            'KB',
-            'LoRA',
-            'MB',
-            'ms',
             'OpenAI',
-            'png',
-            'px',
-            'RAM',
+            'API',
             'URL',
+            'JSON',
             'YAML',
-            '1.2 MB'
+            'GPU',
+            'CPU',
+            'RAM',
+            'GB',
+            'MB',
+            'KB',
+            'ms',
+            'fps',
+            'px',
+            'App Data:',
+            'App Path:'
           ]
         }
       ]

frontend/posthog-feature-flag-demo/src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

@@ -1,56 +0,0 @@
-<template>
-  <!-- If user has active subscription, show ComfyQueueButton (which already has FeatureFlaggedRunButton) -->
-  <ComfyQueueButton v-if="isActiveSubscription" />
-
-  <!-- If subscription required but not active, wrap SubscribeToRunButton with feature flag -->
-  <FeatureFlaggedRunButton
-    v-else
-    flag-key="demo-run-button-experiment"
-    :on-click="handleSubscribeClick"
-  >
-    <template #control>
-      <!-- SubscribeToRunButton handles its own click (shows subscription dialog) -->
-      <SubscribeToRunButton />
-    </template>
-  </FeatureFlaggedRunButton>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { useCommandStore } from '@/stores/commandStore'
-
-import ComfyQueueButton from './ComfyQueueButton.vue'
-import FeatureFlaggedRunButton from './FeatureFlaggedRunButton.vue'
-import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
-
-// Get subscription status - replace with actual subscription store/composable
-const isActiveSubscription = computed(() => {
-  // TODO: Replace with actual subscription check
-  // Example: return useSubscriptionStore().isActiveSubscription
-  // For now, this would typically come from a store or composable
-  return false
-})
-
-const commandStore = useCommandStore()
-
-// Handle click for experimental button when SubscribeToRunButton is shown
-// For experimental variants, trigger queue prompt (same as ComfyQueueButton)
-// For control, SubscribeToRunButton handles its own click (shows subscription dialog)
-const handleSubscribeClick = async (e: Event) => {
-  // If this is called from the experimental button, trigger queue prompt
-  // If called from SubscribeToRunButton (control), it will handle its own logic
-  const isShiftPressed = 'shiftKey' in e && e.shiftKey
-  const commandId = isShiftPressed
-    ? 'Comfy.QueuePromptFront'
-    : 'Comfy.QueuePrompt'
-
-  await commandStore.execute(commandId, {
-    metadata: {
-      subscribe_to_run: false,
-      trigger_source: 'button'
-    }
-  })
-}
-</script>
-

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.33.9",
+  "version": "1.32.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -75,7 +75,6 @@
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
     "@vue/test-utils": "catalog:",
-    "@webgpu/types": "catalog:",
     "cross-env": "catalog:",
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
@@ -113,7 +112,6 @@
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",
     "unplugin-icons": "catalog:",
-    "unplugin-typegpu": "catalog:",
     "unplugin-vue-components": "catalog:",
     "uuid": "^11.1.0",
     "vite": "catalog:",
@@ -130,10 +128,9 @@
   "dependencies": {
     "@alloc/quick-lru": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "catalog:",
+    "@comfyorg/comfyui-electron-types": "0.4.73-0",
     "@comfyorg/design-system": "workspace:*",
     "@comfyorg/registry-types": "workspace:*",
-    "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
     "@iconify/json": "catalog:",
     "@primeuix/forms": "catalog:",
@@ -164,6 +161,7 @@
     "es-toolkit": "^1.39.9",
     "extendable-media-recorder": "^9.2.27",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
+    "fast-glob": "^3.3.3",
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",
@@ -177,7 +175,6 @@
     "semver": "^7.7.2",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
-    "typegpu": "catalog:",
     "vue": "catalog:",
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",

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

@@ -98,9 +98,6 @@
 
   --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
 
-  --color-interface-panel-job-progress-primary: var(--color-azure-300);
-  --color-interface-panel-job-progress-secondary: var(--color-alpha-azure-600-30);
-
   --color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
@@ -163,6 +160,7 @@
 
   --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
 
+  --modal-card-button-surface: var(--color-smoke-300);
 
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
@@ -267,14 +265,6 @@
    --palette-interface-panel-selected-surface: color-mix(in srgb, var(--interface-panel-surface) 87.5%, var(--contrast-mix-color));
    --palette-interface-button-hover-surface:  color-mix(in srgb, var(--interface-panel-surface) 82%, var(--contrast-mix-color));
 
-   --modal-card-background: var(--secondary-background);
-   --modal-card-background-hovered: var(--secondary-background-hover);
-   --modal-card-border-highlighted: var(--secondary-background-selected);
-   --modal-card-button-surface: var(--color-smoke-300);
-   --modal-card-placeholder-background: var(--color-smoke-600);
-   --modal-card-tag-background: var(--color-smoke-400);
-   --modal-card-tag-foreground: var(--base-foreground);
-   --modal-panel-background: var(--color-white);
 }
 
 .dark-theme {
@@ -296,6 +286,8 @@
 
   --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
 
+  --modal-card-button-surface: var(--color-charcoal-300);
+
   --dialog-surface: var(--color-neutral-700);
 
   --interface-menu-component-surface-hovered: var(--color-charcoal-400);
@@ -334,12 +326,6 @@
   --node-stroke-error: var(--color-error);
   --node-stroke-executing: var(--color-azure-600);
 
-  /* Queue progress (dark theme) */
-  --color-interface-panel-job-progress-primary: var(--color-cobalt-800);
-  --color-interface-panel-job-progress-secondary: var(
-    --color-alpha-azure-600-30
-  );
-
   --text-secondary: var(--color-slate-100);
   --text-primary: var(--color-white);
 
@@ -376,16 +362,6 @@
   --component-node-widget-background-selected: var(--color-charcoal-100);
   --component-node-widget-background-disabled: var(--color-alpha-charcoal-600-30);
   --component-node-widget-background-highlighted: var(--color-graphite-400);
-
-  --modal-card-background: var(--secondary-background);
-  --modal-card-background-hovered: var(--secondary-background-hover);
-  --modal-card-border-highlighted: var(--color-ash-400);
-  --modal-card-button-surface: var(--color-charcoal-300);
-  --modal-card-placeholder-background: var(--secondary-background);
-  --modal-card-tag-background: var(--color-ash-800);
-  --modal-card-tag-foreground: var(--base-foreground);
-  --modal-panel-background: var(--color-charcoal-600);
-
 }
 
 @theme inline {
@@ -396,16 +372,7 @@
   --color-button-surface: var(--button-surface);
   --color-button-surface-contrast: var(--button-surface-contrast);
   --color-subscription-button-gradient: var(--subscription-button-gradient);
-
-  --color-modal-card-background: var(--modal-card-background);
-  --color-modal-card-background-hovered: var(--modal-card-background-hovered);
-  --color-modal-card-border-highlighted: var(--modal-card-border-highlighted);
   --color-modal-card-button-surface: var(--modal-card-button-surface);
-  --color-modal-card-placeholder-background: var(--modal-card-placeholder-background);
-  --color-modal-card-tag-background: var(--modal-card-tag-background);
-  --color-modal-card-tag-foreground: var(--modal-card-tag-foreground);
-  --color-modal-panel-background: var(--modal-panel-background);
-
   --color-dialog-surface: var(--dialog-surface);
   --color-interface-menu-component-surface-hovered: var(
     --interface-menu-component-surface-hovered
@@ -1329,6 +1296,57 @@ audio.comfy-audio.empty-audio-widget {
   will-change: transform;
 }
 
+/* START LOD specific styles */
+/* LOD styles - Custom CSS avoids 100+ Tailwind selectors that would slow style recalculation when .isLOD toggles */
+
+.isLOD .lg-node {
+  box-shadow: none;
+  filter: none;
+  backdrop-filter: none;
+  text-shadow: none;
+  mask-image: none;
+  clip-path: none;
+  background-image: none;
+  text-rendering: optimizeSpeed;
+  border-radius: 0;
+  contain: layout style;
+  transition: none;
+}
+
+.isLOD .lg-node-header {
+  border-radius: 0;
+  pointer-events: none;
+}
+
+.isLOD .lg-node-widgets {
+  pointer-events: none;
+}
+
+.lod-toggle {
+  visibility: visible;
+}
+
+.isLOD .lod-toggle {
+  visibility: hidden;
+}
+
+.lod-fallback {
+  display: none;
+}
+
+.isLOD .lod-fallback {
+  display: block;
+}
+
+.isLOD .image-preview img {
+  image-rendering: pixelated;
+}
+
+.isLOD .slot-dot {
+  border-radius: 0;
+}
+/* END LOD specific styles */
+
 /* ===================== Mask Editor Styles ===================== */
 /* To be migrated to Tailwind later */
   #maskEditor_brush {
@@ -1790,4 +1808,4 @@ audio.comfy-audio.empty-audio-widget {
   .maskEditor_sidePanelLayerCheckbox {
     margin-left: 15px;
   }
-/* ===================== End of Mask Editor Styles ===================== */
+/* ===================== End of Mask Editor Styles ===================== */

packages/design-system/src/icons/file-output.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.33398 1.33337V4.00004C9.33398 4.35366 9.47446 4.6928 9.72451 4.94285C9.97456 5.1929 10.3137 5.33337 10.6673 5.33337H13.334M2.66732 4.66671V2.66671C2.66732 2.31309 2.80779 1.97395 3.05784 1.7239C3.30789 1.47385 3.64703 1.33337 4.00065 1.33337H10.0006L13.334 4.66671V13.3334C13.334 13.687 13.1935 14.0261 12.9435 14.2762C12.6934 14.5262 12.3543 14.6667 12.0006 14.6667L4.04264 14.666C3.77927 14.7004 3.51166 14.6552 3.2741 14.5365C3.03655 14.4177 2.83988 14.2307 2.70931 13.9994M3.33398 7.33337L1.33398 9.33337M1.33398 9.33337L3.33398 11.3334M1.33398 9.33337H8.00065" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

packages/shared-frontend-utils/src/formatUtil.ts

@@ -75,17 +75,6 @@ export function formatSize(value?: number) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
 }
 
-/**
- * Formats a commit hash by truncating long (40-char) hashes to 7 chars.
- * Returns the original string if not a valid full commit hash.
- */
-export function formatCommitHash(value: string): string {
-  if (/^[a-f0-9]{40}$/i.test(value)) {
-    return value.slice(0, 7)
-  }
-  return value
-}
-
 /**
  * Returns various filename components.
  * Example:

pnpm-lock.yaml

@@ -9,15 +9,18 @@ catalogs:
     '@alloc/quick-lru':
       specifier: ^5.2.0
       version: 5.2.0
-    '@comfyorg/comfyui-electron-types':
-      specifier: 0.5.5
-      version: 0.5.5
     '@eslint/js':
       specifier: ^9.35.0
       version: 9.35.0
+    '@iconify-json/lucide':
+      specifier: ^1.1.178
+      version: 1.2.66
     '@iconify/json':
       specifier: ^2.2.380
       version: 2.2.380
+    '@iconify/tailwind':
+      specifier: ^1.1.3
+      version: 1.2.0
     '@intlify/eslint-plugin-vue-i18n':
       specifier: ^4.1.0
       version: 4.1.0
@@ -120,9 +123,6 @@ catalogs:
     '@vueuse/integrations':
       specifier: ^13.9.0
       version: 13.9.0
-    '@webgpu/types':
-      specifier: ^0.1.66
-      version: 0.1.66
     algoliasearch:
       specifier: ^5.21.0
       version: 5.21.0
@@ -243,9 +243,6 @@ catalogs:
     tw-animate-css:
       specifier: ^1.3.8
       version: 1.3.8
-    typegpu:
-      specifier: ^0.8.2
-      version: 0.8.2
     typescript:
       specifier: ^5.9.2
       version: 5.9.2
@@ -255,9 +252,6 @@ catalogs:
     unplugin-icons:
       specifier: ^0.22.0
       version: 0.22.0
-    unplugin-typegpu:
-      specifier: 0.8.0
-      version: 0.8.0
     unplugin-vue-components:
       specifier: ^0.28.0
       version: 0.28.0
@@ -324,17 +318,14 @@ importers:
         specifier: ^1.3.1
         version: 1.3.1
       '@comfyorg/comfyui-electron-types':
-        specifier: 'catalog:'
-        version: 0.5.5
+        specifier: 0.4.73-0
+        version: 0.4.73-0
       '@comfyorg/design-system':
         specifier: workspace:*
         version: link:packages/design-system
       '@comfyorg/registry-types':
         specifier: workspace:*
         version: link:packages/registry-types
-      '@comfyorg/shared-frontend-utils':
-        specifier: workspace:*
-        version: link:packages/shared-frontend-utils
       '@comfyorg/tailwind-utils':
         specifier: workspace:*
         version: link:packages/tailwind-utils
@@ -425,6 +416,9 @@ importers:
       extendable-media-recorder-wav-encoder:
         specifier: ^7.0.129
         version: 7.0.129
+      fast-glob:
+        specifier: ^3.3.3
+        version: 3.3.3
       firebase:
         specifier: 'catalog:'
         version: 11.6.0
@@ -464,9 +458,6 @@ importers:
       tiptap-markdown:
         specifier: ^0.8.10
         version: 0.8.10(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
-      typegpu:
-        specifier: 'catalog:'
-        version: 0.8.2
       vue:
         specifier: 'catalog:'
         version: 3.5.13(typescript@5.9.2)
@@ -564,9 +555,6 @@ importers:
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
-      '@webgpu/types':
-        specifier: 'catalog:'
-        version: 0.1.66
       cross-env:
         specifier: 'catalog:'
         version: 10.1.0
@@ -678,9 +666,6 @@ importers:
       unplugin-icons:
         specifier: 'catalog:'
         version: 0.22.0(@vue/compiler-sfc@3.5.13)
-      unplugin-typegpu:
-        specifier: 'catalog:'
-        version: 0.8.0(typegpu@0.8.2)
       unplugin-vue-components:
         specifier: 'catalog:'
         version: 0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2))
@@ -721,8 +706,8 @@ importers:
   apps/desktop-ui:
     dependencies:
       '@comfyorg/comfyui-electron-types':
-        specifier: 'catalog:'
-        version: 0.5.5
+        specifier: 0.4.73-0
+        version: 0.4.73-0
       '@comfyorg/shared-frontend-utils':
         specifier: workspace:*
         version: link:../../packages/shared-frontend-utils
@@ -1440,10 +1425,6 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/standalone@7.28.5':
-    resolution: {integrity: sha512-1DViPYJpRU50irpGMfLBQ9B4kyfQuL6X7SS7pwTeWeZX0mNkjzPi0XFqxCjSdddZXUQy4AhnQnnesA/ZHnvAdw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -1469,8 +1450,8 @@ packages:
   '@cacheable/utils@2.0.3':
     resolution: {integrity: sha512-m7Rce68cMHlAUjvWBy9Ru1Nmw5gU0SjGGtQDdhpe6E0xnbcvrIY0Epy//JU1VYYBUTzrG9jvgmTauULGKzOkWA==}
 
-  '@comfyorg/comfyui-electron-types@0.5.5':
-    resolution: {integrity: sha512-f3XOXpMsALIwHakz7FekVPm4/Fh2pvJPEi8tRe8jYGBt8edsd4Mkkq31Yjs2Weem3BP7yNwbdNuSiQdP/pxJyg==}
+  '@comfyorg/comfyui-electron-types@0.4.73-0':
+    resolution: {integrity: sha512-WlItGJQx9ZWShNG9wypx3kq+19pSig/U+s5sD2SAeEcMph4u8A/TS+lnRgdKhT58VT1uD7cMcj2SJpfdBPNWvw==}
 
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
@@ -3803,8 +3784,8 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@webgpu/types@0.1.66':
-    resolution: {integrity: sha512-YA2hLrwLpDsRueNDXIMqN9NTzD6bCDkuXbOSe0heS+f8YE8usA6Gbv1prj81pzVHrbaAma7zObnIC+I6/sXJgA==}
+  '@webgpu/types@0.1.51':
+    resolution: {integrity: sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==}
 
   '@xstate/fsm@1.6.5':
     resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
@@ -4429,9 +4410,6 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  csstype@3.2.3:
-    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
-
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -6051,10 +6029,6 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
-  magic-string-ast@1.0.3:
-    resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
-    engines: {node: '>=20.19.0'}
-
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
@@ -7023,11 +6997,6 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  resolve@1.22.11:
-    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
-
   restore-cursor@3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
@@ -7123,11 +7092,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.7.3:
-    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -7428,14 +7392,6 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinyest-for-wgsl@0.1.3:
-    resolution: {integrity: sha512-Wm5ADG1UyDxykf42S1gLYP4U9e1QP/TdtJeovQi6y68zttpiFLKqQGioHmPs9Mjysh7YMSAr/Lpuk0cD2MVdGA==}
-    engines: {node: '>=12.20.0'}
-
-  tinyest@0.1.2:
-    resolution: {integrity: sha512-aHRmouyowIq1P5jrTF+YK6pGX+WuvFtSCLbqk91yHnU3SWQRIcNIamZLM5XF6lLqB13AWz0PGPXRff2QGDsxIg==}
-    engines: {node: '>=12.20.0'}
-
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
@@ -7562,13 +7518,6 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typed-binary@4.3.2:
-    resolution: {integrity: sha512-HT3pIBM2njCZUmeczDaQUUErGiM6GXFCqMsHegE12HCoBtvHCkfR10JJni0TeGOTnLilTd6YFyj+YhflqQDrDQ==}
-
-  typegpu@0.8.2:
-    resolution: {integrity: sha512-wkMJWhJE0pSkw2G/FesjqjbtHkREyOKu1Zmyj19xfmaX5+65YFwgfQNKSK8CxqN4kJkP7JFelLDJTSYY536TYg==}
-    engines: {node: '>=12.20.0'}
-
   typescript-eslint@8.44.0:
     resolution: {integrity: sha512-ib7mCkYuIzYonCq9XWF5XNw+fkj2zg629PSa9KNIQ47RXFF763S5BIX4wqz1+FLPogTZoiw8KmCiRPRa8bL3qw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -7673,11 +7622,6 @@ packages:
       vue-template-es2015-compiler:
         optional: true
 
-  unplugin-typegpu@0.8.0:
-    resolution: {integrity: sha512-VJHdXSXGOkAx0WhwFczhVUjAI6HyDkrQXk20HnwyuzIE3FdqE5l9sJTCYZzoVGo3z8i/IA5TMHCDzzP0Bc97Cw==}
-    peerDependencies:
-      typegpu: ^0.8.0
-
   unplugin-vue-components@0.28.0:
     resolution: {integrity: sha512-jiTGtJ3JsRFBjgvyilfrX7yUoGKScFgbdNw+6p6kEXU+Spf/rhxzgvdfuMcvhCcLmflB/dY3pGQshYBVGOUx7Q==}
     engines: {node: '>=14'}
@@ -7868,8 +7812,8 @@ packages:
   vue-component-type-helpers@3.1.1:
     resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==}
 
-  vue-component-type-helpers@3.1.5:
-    resolution: {integrity: sha512-7V3yJuNWW7/1jxCcI1CswnpDsvs02Qcx/N43LkV+ZqhLj2PKj50slUflHAroNkN4UWiYfzMUUUXiNuv9khmSpQ==}
+  vue-component-type-helpers@3.1.3:
+    resolution: {integrity: sha512-V1dOD8XYfstOKCnXbWyEJIrhTBMwSyNjv271L1Jlx9ExpNlCSuqOs3OdWrGJ0V544zXufKbcYabi/o+gK8lyfQ==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -9006,8 +8950,6 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
-  '@babel/standalone@7.28.5': {}
-
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -9047,7 +8989,7 @@ snapshots:
 
   '@cacheable/utils@2.0.3': {}
 
-  '@comfyorg/comfyui-electron-types@0.5.5': {}
+  '@comfyorg/comfyui-electron-types@0.4.73-0': {}
 
   '@csstools/color-helpers@5.1.0': {}
 
@@ -10672,7 +10614,7 @@ snapshots:
       storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.1.5
+      vue-component-type-helpers: 3.1.3
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -11044,7 +10986,7 @@ snapshots:
 
   '@types/react@19.1.9':
     dependencies:
-      csstype: 3.2.3
+      csstype: 3.1.3
 
   '@types/semver@7.7.0': {}
 
@@ -11055,7 +10997,7 @@ snapshots:
       '@tweenjs/tween.js': 23.1.3
       '@types/stats.js': 0.17.3
       '@types/webxr': 0.5.20
-      '@webgpu/types': 0.1.66
+      '@webgpu/types': 0.1.51
       fflate: 0.8.2
       meshoptimizer: 0.18.1
 
@@ -11558,7 +11500,7 @@ snapshots:
     dependencies:
       vue: 3.5.13(typescript@5.9.2)
 
-  '@webgpu/types@0.1.66': {}
+  '@webgpu/types@0.1.51': {}
 
   '@xstate/fsm@1.6.5': {}
 
@@ -12223,8 +12165,6 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  csstype@3.2.3: {}
-
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -12651,7 +12591,7 @@ snapshots:
     dependencies:
       debug: 3.2.7
       is-core-module: 2.16.1
-      resolve: 1.22.11
+      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
     optional: true
@@ -13797,7 +13737,7 @@ snapshots:
       acorn: 8.15.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      semver: 7.7.3
+      semver: 7.7.2
 
   jsonc-parser@3.2.0: {}
 
@@ -14039,10 +13979,6 @@ snapshots:
 
   lz-string@1.5.0: {}
 
-  magic-string-ast@1.0.3:
-    dependencies:
-      magic-string: 0.30.19
-
   magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -15406,13 +15342,6 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  resolve@1.22.11:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    optional: true
-
   restore-cursor@3.1.0:
     dependencies:
       onetime: 5.1.2
@@ -15517,8 +15446,6 @@ snapshots:
 
   semver@7.7.2: {}
 
-  semver@7.7.3: {}
-
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -15907,12 +15834,6 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinyest-for-wgsl@0.1.3:
-    dependencies:
-      tinyest: 0.1.2
-
-  tinyest@0.1.2: {}
-
   tinyexec@0.3.2: {}
 
   tinyexec@1.0.1: {}
@@ -16044,13 +15965,6 @@ snapshots:
       reflect.getprototypeof: 1.0.10
     optional: true
 
-  typed-binary@4.3.2: {}
-
-  typegpu@0.8.2:
-    dependencies:
-      tinyest: 0.1.2
-      typed-binary: 4.3.2
-
   typescript-eslint@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
@@ -16146,19 +16060,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-typegpu@0.8.0(typegpu@0.8.2):
-    dependencies:
-      '@babel/standalone': 7.28.5
-      defu: 6.1.4
-      estree-walker: 3.0.3
-      magic-string-ast: 1.0.3
-      pathe: 2.0.3
-      picomatch: 4.0.3
-      tinyest: 0.1.2
-      tinyest-for-wgsl: 0.1.3
-      typegpu: 0.8.2
-      unplugin: 2.3.5
-
   unplugin-vue-components@0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       '@antfu/utils': 0.7.10
@@ -16439,7 +16340,7 @@ snapshots:
 
   vue-component-type-helpers@3.1.1: {}
 
-  vue-component-type-helpers@3.1.5: {}
+  vue-component-type-helpers@3.1.3: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:

pnpm-workspace.yaml

@@ -4,7 +4,6 @@ packages:
 
 catalog:
   '@alloc/quick-lru': ^5.2.0
-  '@comfyorg/comfyui-electron-types': 0.5.5
   '@eslint/js': ^9.35.0
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
@@ -43,7 +42,6 @@ catalog:
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^11.0.0
   '@vueuse/integrations': ^13.9.0
-  '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
   axios: ^1.8.2
   cross-env: ^10.1.0
@@ -84,11 +82,9 @@ catalog:
   tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
-  typegpu: ^0.8.2
   typescript: ^5.9.2
   typescript-eslint: ^8.44.0
   unplugin-icons: ^0.22.0
-  unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^0.28.0
   vite: ^5.4.19
   vite-plugin-dts: ^4.5.4

public/assets/CREDIT.txt

@@ -1,9 +1 @@
-Node usage data merged from two sources:
-- Mixpanel "app:node_search_result_selected" events (Nov 2025): 1,112 nodes, 46,514 selections
-  Reflects actual user search behavior - what users choose when searching.
-- OpenArt workflow data (Sept 2024): 2,600 nodes, 118,676 uses
-  Reflects overall popularity - what's used in workflows.
-
-Merge strategy: New data overwrites old for 514 overlapping nodes. Old data
-normalized by 2.55x scale factor to match new data. Total: 3,198 nodes.
-Search-selected nodes prioritized in ranking.
+Thanks to OpenArt (https://openart.ai) for providing the sorted-custom-node-map data, captured in September 2024.

src/components/CLAUDE.md

@@ -30,7 +30,7 @@
 ## Styling
 
 - Use Tailwind CSS only (no custom CSS)
-- Use the correct tokens from style.css in the design system package
+- Dark theme: use "dark-theme:" prefix
 - 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

src/components/TopMenuSection.vue

@@ -1,92 +1,41 @@
 <template>
-  <div
-    v-if="!workspaceStore.focusMode"
-    class="ml-1 flex gap-x-0.5 pt-1"
-    @mouseenter="isTopMenuHovered = true"
-    @mouseleave="isTopMenuHovered = false"
-  >
+  <div v-if="!workspaceStore.focusMode" class="ml-1 flex gap-x-0.5 pt-1">
     <div class="min-w-0 flex-1">
       <SubgraphBreadcrumb />
     </div>
 
-    <div class="mx-1 flex flex-col items-end gap-1">
+    <div
+      class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2 shadow-interface"
+    >
+      <ActionBarButtons />
+      <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
       <div
-        class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-interface-stroke px-2 shadow-interface"
-      >
-        <ActionBarButtons />
-        <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
-        <div
-          ref="legacyCommandsContainerRef"
-          class="[&:not(:has(*>*:not(:empty)))]:hidden"
-        ></div>
-        <ComfyActionbar />
-        <IconButton
-          v-tooltip.bottom="queueHistoryTooltipConfig"
-          type="transparent"
-          size="sm"
-          class="queue-history-toggle relative mr-2 transition-colors duration-200 ease-in-out hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
-          :class="queueHistoryButtonBackgroundClass"
-          :aria-pressed="isQueueOverlayExpanded"
-          :aria-label="
-            t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-          "
-          @click="toggleQueueOverlay"
-        >
-          <i
-            class="icon-[lucide--history] block size-4 text-muted-foreground"
-          />
-          <span
-            v-if="queuedCount > 0"
-            class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
-          >
-            {{ queuedCount }}
-          </span>
-        </IconButton>
-        <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
-        <LoginButton v-else-if="isDesktop" />
-      </div>
-      <QueueProgressOverlay
-        v-model:expanded="isQueueOverlayExpanded"
-        :menu-hovered="isTopMenuHovered"
-      />
+        ref="legacyCommandsContainerRef"
+        class="[&:not(:has(*>*:not(:empty)))]:hidden"
+      ></div>
+      <ComfyActionbar />
+      <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
+      <LoginButton v-else-if="isDesktop" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { onMounted, ref } from 'vue'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
-import IconButton from '@/components/button/IconButton.vue'
-import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { app } from '@/scripts/app'
-import { useQueueStore } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
-const { t } = useI18n()
-const isQueueOverlayExpanded = ref(false)
-const queueStore = useQueueStore()
-const isTopMenuHovered = ref(false)
-const queuedCount = computed(() => queueStore.pendingTasks.length)
-const queueHistoryTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
-)
-const queueHistoryButtonBackgroundClass = computed(() =>
-  isQueueOverlayExpanded.value
-    ? 'bg-secondary-background-selected'
-    : 'bg-secondary-background'
-)
 
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
@@ -96,10 +45,6 @@ onMounted(() => {
     legacyCommandsContainerRef.value.appendChild(app.menu.element)
   }
 })
-
-const toggleQueueOverlay = () => {
-  isQueueOverlayExpanded.value = !isQueueOverlayExpanded.value
-}
 </script>
 
 <style scoped>

src/components/actionbar/ComfyActionbar.vue

@@ -10,7 +10,7 @@
     </div>
 
     <Panel
-      class="pointer-events-auto z-1010"
+      class="pointer-events-auto z-1000"
       :style="style"
       :class="panelClass"
       :pt="{
@@ -257,10 +257,9 @@ watch(isDragging, (dragging) => {
 })
 const actionbarClass = computed(() =>
   cn(
-    'w-[200px] border-dashed border-blue-500 opacity-80',
+    'w-[265px] border-dashed border-blue-500 opacity-80',
     'm-1.5 flex items-center justify-center self-stretch',
     'rounded-md before:w-50 before:-ml-50 before:h-full',
-    'pointer-events-auto',
     isMouseOverDropZone.value &&
       'border-[3px] opacity-100 scale-105 shadow-[0_0_20px] shadow-blue-500'
   )

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -1,49 +1,87 @@
 <template>
   <div class="queue-button-group flex">
-    <FeatureFlaggedRunButton
-      flag-key="demo-run-button-experiment"
-      :on-click="queuePrompt"
+    <SplitButton
+      v-tooltip.bottom="{
+        value: workspaceStore.shiftDown
+          ? $t('menu.runWorkflowFront')
+          : $t('menu.runWorkflow'),
+        showDelay: 600
+      }"
+      class="comfyui-queue-button"
+      :label="String(activeQueueModeMenuItem?.label ?? '')"
+      severity="primary"
+      size="small"
+      :model="queueModeMenuItems"
+      data-testid="queue-button"
+      @click="queuePrompt"
     >
-      <template #control>
-        <SplitButton
-          v-tooltip.bottom="{
-            value: queueButtonTooltip,
+      <template #icon>
+        <i v-if="workspaceStore.shiftDown" class="icon-[lucide--list-start]" />
+        <i v-else-if="queueMode === 'disabled'" class="icon-[lucide--play]" />
+        <i
+          v-else-if="queueMode === 'instant'"
+          class="icon-[lucide--fast-forward]"
+        />
+        <i
+          v-else-if="queueMode === 'change'"
+          class="icon-[lucide--step-forward]"
+        />
+      </template>
+      <template #item="{ item }">
+        <Button
+          v-tooltip="{
+            value: item.tooltip,
             showDelay: 600
           }"
-          class="comfyui-queue-button"
-          :label="String(activeQueueModeMenuItem?.label ?? '')"
-          severity="primary"
+          :label="String(item.label ?? '')"
+          :icon="item.icon"
+          :severity="item.key === queueMode ? 'primary' : 'secondary'"
           size="small"
-          :model="queueModeMenuItems"
-          data-testid="queue-button"
-          @click="queuePrompt"
-        >
-          <template #icon>
-            <i :class="iconClass" />
-          </template>
-          <template #item="{ item }">
-            <Button
-              v-tooltip="{
-                value: item.tooltip,
-                showDelay: 600
-              }"
-              :label="String(item.label ?? '')"
-              :icon="item.icon"
-              :severity="item.key === queueMode ? 'primary' : 'secondary'"
-              size="small"
-              text
-            />
-          </template>
-        </SplitButton>
+          text
+        />
       </template>
-    </FeatureFlaggedRunButton>
+    </SplitButton>
     <BatchCountEdit />
+    <ButtonGroup class="execution-actions flex flex-nowrap">
+      <Button
+        v-tooltip.bottom="{
+          value: $t('menu.interrupt'),
+          showDelay: 600
+        }"
+        icon="pi pi-times"
+        :severity="executingPrompt ? 'danger' : 'secondary'"
+        :disabled="!executingPrompt"
+        text
+        :aria-label="$t('menu.interrupt')"
+        @click="() => commandStore.execute('Comfy.Interrupt')"
+      />
+      <Button
+        v-tooltip.bottom="{
+          value: $t('sideToolbar.queueTab.clearPendingTasks'),
+          showDelay: 600
+        }"
+        icon="pi pi-stop"
+        :severity="hasPendingTasks ? 'danger' : 'secondary'"
+        :disabled="!hasPendingTasks"
+        text
+        :aria-label="$t('sideToolbar.queueTab.clearPendingTasks')"
+        @click="
+          () => {
+            if (queueCountStore.count.value > 1) {
+              commandStore.execute('Comfy.ClearPendingTasks')
+            }
+            queueMode = 'disabled'
+          }
+        "
+      />
+    </ButtonGroup>
   </div>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
+import ButtonGroup from 'primevue/buttongroup'
 import type { MenuItem } from 'primevue/menuitem'
 import SplitButton from 'primevue/splitbutton'
 import { computed } from 'vue'
@@ -51,24 +89,19 @@ import { useI18n } from 'vue-i18n'
 
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
-import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useQueueSettingsStore } from '@/stores/queueStore'
+import {
+  useQueuePendingTaskCountStore,
+  useQueueSettingsStore
+} from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 import BatchCountEdit from '../BatchCountEdit.vue'
-import FeatureFlaggedRunButton from './FeatureFlaggedRunButton.vue'
 
 const workspaceStore = useWorkspaceStore()
+const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
-const nodeDefStore = useNodeDefStore()
-const hasMissingNodes = computed(() =>
-  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
-)
-
 const { t } = useI18n()
 const queueModeMenuItemLookup = computed(() => {
   const items: Record<string, MenuItem> = {
@@ -119,34 +152,10 @@ const queueModeMenuItems = computed(() =>
   Object.values(queueModeMenuItemLookup.value)
 )
 
-const iconClass = computed(() => {
-  if (hasMissingNodes.value) {
-    return 'icon-[lucide--triangle-alert]'
-  }
-  if (workspaceStore.shiftDown) {
-    return 'icon-[lucide--list-start]'
-  }
-  if (queueMode.value === 'disabled') {
-    return 'icon-[lucide--play]'
-  }
-  if (queueMode.value === 'instant') {
-    return 'icon-[lucide--fast-forward]'
-  }
-  if (queueMode.value === 'change') {
-    return 'icon-[lucide--step-forward]'
-  }
-  return 'icon-[lucide--play]'
-})
-
-const queueButtonTooltip = computed(() => {
-  if (hasMissingNodes.value) {
-    return t('menu.runWorkflowDisabled')
-  }
-  if (workspaceStore.shiftDown) {
-    return t('menu.runWorkflowFront')
-  }
-  return t('menu.runWorkflow')
-})
+const executingPrompt = computed(() => !!queueCountStore.count.value)
+const hasPendingTasks = computed(
+  () => queueCountStore.count.value > 1 || queueMode.value !== 'disabled'
+)
 
 const commandStore = useCommandStore()
 const queuePrompt = async (e: Event) => {

src/components/actionbar/ComfyRunButton/ExperimentalRunButton.vue

@@ -1,252 +0,0 @@
-<template>
-  <div
-    :class="buttonClasses"
-    :style="buttonStyles"
-    class="experimental-run-button relative overflow-hidden transition-all duration-300"
-    @click="handleClick"
-  >
-    <!-- Animated background for gradient variant -->
-    <div
-      v-if="variantName === 'bold-gradient'"
-      class="absolute inset-0 animate-gradient bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 opacity-90"
-    />
-
-    <!-- Pulsing animation for animated variant -->
-    <div
-      v-if="variantName === 'animated'"
-      class="absolute inset-0 animate-pulse bg-primary-background opacity-20"
-    />
-
-    <!-- Sparkle effect for playful variant -->
-    <div
-      v-if="variantName === 'playful'"
-      class="absolute inset-0 overflow-hidden"
-    >
-      <i
-        v-for="i in 3"
-        :key="i"
-        :class="sparkleClasses[i - 1]"
-        class="absolute animate-sparkle text-yellow-300"
-        :style="sparkleStyles[i - 1]"
-      >
-        ✨
-      </i>
-    </div>
-
-    <!-- Button content -->
-    <div class="relative z-10 flex items-center justify-center gap-2">
-      <i :class="iconClass" class="text-lg" />
-      <span :class="labelClasses" :style="labelStyles" class="font-semibold">
-        {{ label }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { FeatureFlagVariant } from '@/composables/useFeatureFlags'
-
-const props = defineProps<{
-  variant: FeatureFlagVariant
-  onClick: () => void
-}>()
-
-const variantName = computed(() => props.variant.variant)
-const payload = computed(() => props.variant.payload || {})
-
-// Extract styling from payload with defaults
-const backgroundColor = computed(
-  () => (payload.value.backgroundColor as string) || getDefaultColor()
-)
-const textColor = computed(
-  () => (payload.value.textColor as string) || getDefaultTextColor()
-)
-const borderRadius = computed(
-  () => (payload.value.borderRadius as string) || getDefaultBorderRadius()
-)
-const icon = computed(() => (payload.value.icon as string) || getDefaultIcon())
-const label = computed(() => (payload.value.label as string) || 'Run')
-const padding = computed(() => (payload.value.padding as string) || 'px-4 py-2')
-
-// Size matching - should match PrimeVue small button size
-const buttonSize = computed(() => {
-  return 'text-sm' // Match PrimeVue small button
-})
-
-function getDefaultColor(): string {
-  switch (variantName.value) {
-    case 'bold-gradient':
-      return 'transparent' // Gradient overlay handles it
-    case 'animated':
-      return 'bg-primary-background'
-    case 'playful':
-      return 'bg-gradient-to-br from-yellow-400 to-orange-500'
-    case 'minimal':
-      return 'bg-white border-2 border-gray-300'
-    default:
-      return 'bg-primary-background'
-  }
-}
-
-function getDefaultTextColor(): string {
-  switch (variantName.value) {
-    case 'bold-gradient':
-      return 'text-white'
-    case 'animated':
-      return 'text-white'
-    case 'playful':
-      return 'text-white'
-    case 'minimal':
-      return 'text-gray-800'
-    default:
-      return 'text-white'
-  }
-}
-
-function getDefaultBorderRadius(): string {
-  switch (variantName.value) {
-    case 'bold-gradient':
-      return 'rounded-xl'
-    case 'animated':
-      return 'rounded-full'
-    case 'playful':
-      return 'rounded-2xl'
-    case 'minimal':
-      return 'rounded-md'
-    default:
-      return 'rounded-lg'
-  }
-}
-
-function getDefaultIcon(): string {
-  switch (variantName.value) {
-    case 'bold-gradient':
-      return 'icon-[lucide--zap]'
-    case 'animated':
-      return 'icon-[lucide--rocket]'
-    case 'playful':
-      return 'icon-[lucide--sparkles]'
-    case 'minimal':
-      return 'icon-[lucide--play]'
-    default:
-      return 'icon-[lucide--play]'
-  }
-}
-
-const buttonClasses = computed(() => {
-  const base = [
-    'cursor-pointer',
-    'select-none',
-    'flex',
-    'items-center',
-    'justify-center',
-    padding.value,
-    borderRadius.value,
-    'shadow-lg',
-    'hover:scale-105',
-    'active:scale-95',
-    'transition-transform',
-    buttonSize.value
-  ]
-
-  // Add variant-specific classes
-  if (variantName.value === 'bold-gradient') {
-    base.push('text-white', 'font-bold')
-  } else if (variantName.value === 'animated') {
-    base.push('text-white', 'font-bold', 'hover:shadow-2xl')
-  } else if (variantName.value === 'playful') {
-    base.push('text-white', 'font-bold', 'hover:rotate-1')
-  } else if (variantName.value === 'minimal') {
-    base.push('bg-white', 'text-gray-800', 'hover:bg-gray-50')
-  } else {
-    base.push(backgroundColor.value, textColor.value)
-  }
-
-  return base.join(' ')
-})
-
-const buttonStyles = computed(() => {
-  const styles: Record<string, string> = {}
-
-  // Apply custom styles from payload
-  if (payload.value.backgroundColor && variantName.value !== 'bold-gradient') {
-    styles.backgroundColor = backgroundColor.value
-  }
-  if (payload.value.textColor) {
-    styles.color = textColor.value
-  }
-  if (payload.value.borderRadius && !borderRadius.value.includes('rounded')) {
-    styles.borderRadius = borderRadius.value
-  }
-
-  return styles
-})
-
-const iconClass = computed(() => icon.value)
-
-// Text color handling - can be a CSS class or a color value
-const labelClasses = computed(() => {
-  // If textColor is a Tailwind class, return it; otherwise it's handled by inline styles
-  if (textColor.value.startsWith('text-')) {
-    return textColor.value
-  }
-  return ''
-})
-
-const labelStyles = computed(() => {
-  const styles: Record<string, string> = {}
-  // If textColor is not a Tailwind class, use it as a color value
-  if (!textColor.value.startsWith('text-')) {
-    styles.color = textColor.value
-  }
-  return styles
-})
-
-// Sparkle animation positions for playful variant
-const sparkleClasses = ['top-2 left-4', 'top-4 right-6', 'bottom-2 left-1/2']
-
-const sparkleStyles = [
-  { animationDelay: '0s', animationDuration: '2s' },
-  { animationDelay: '0.5s', animationDuration: '2.5s' },
-  { animationDelay: '1s', animationDuration: '3s' }
-]
-
-function handleClick() {
-  props.onClick()
-}
-</script>
-
-<style scoped>
-@keyframes gradient {
-  0%,
-  100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-.animate-gradient {
-  background-size: 200% 200%;
-  animation: gradient 3s ease infinite;
-}
-
-@keyframes sparkle {
-  0%,
-  100% {
-    opacity: 0;
-    transform: scale(0) rotate(0deg);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1) rotate(180deg);
-  }
-}
-
-.animate-sparkle {
-  animation: sparkle 2s ease-in-out infinite;
-}
-</style>

src/components/actionbar/ComfyRunButton/FeatureFlaggedRunButton.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="feature-flagged-run-button">
-    <!-- Control: Original button -->
-    <slot v-if="!isExperimentActive" name="control" />
-
-    <!-- Experiment: Experimental button -->
-    <ExperimentalRunButton
-      v-else-if="variant"
-      :variant="variant"
-      :on-click="handleClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import type { FeatureFlagVariant } from '@/composables/useFeatureFlags'
-
-import ExperimentalRunButton from './ExperimentalRunButton.vue'
-
-const props = defineProps<{
-  flagKey?: string
-  onClick: (e: Event) => void | Promise<void>
-}>()
-
-const flagKey = computed(() => props.flagKey || 'demo-run-button-experiment')
-
-const { featureFlag } = useFeatureFlags()
-const flagValue = featureFlag<FeatureFlagVariant | boolean | null>(
-  flagKey.value,
-  false
-)
-
-const variant = computed<FeatureFlagVariant | null>(() => {
-  const value = flagValue.value
-  if (
-    typeof value === 'object' &&
-    value !== null &&
-    'variant' in value &&
-    typeof (value as FeatureFlagVariant).variant === 'string'
-  ) {
-    return value as FeatureFlagVariant
-  }
-  return null
-})
-
-const isExperimentActive = computed(() => {
-  return variant.value !== null
-})
-
-const handleClick = () => {
-  // Create a synthetic event for the onClick handler
-  const syntheticEvent = new Event('click') as Event
-  props.onClick(syntheticEvent)
-}
-</script>

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -7,7 +7,7 @@
         class="flex flex-col"
       >
         <h3
-          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-text-secondary uppercase"
+          class="subcategory-title mb-4 text-xs font-bold tracking-wide text-surface-600 uppercase dark-theme:text-surface-400"
         >
           {{ getSubcategoryTitle(subcategory) }}
         </h3>
@@ -16,7 +16,7 @@
           <div
             v-for="command in subcategoryCommands"
             :key="command.id"
-            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200"
+            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200 hover:bg-surface-100 dark-theme:hover:bg-surface-700"
           >
             <div class="shortcut-info grow pr-4">
               <div class="shortcut-name text-sm font-medium">
@@ -32,7 +32,7 @@
                 <span
                   v-for="key in command.keybinding!.combo.getKeySequences()"
                   :key="key"
-                  class="key-badge min-w-6 rounded bg-muted-background px-2 py-1 text-center font-mono text-xs"
+                  class="key-badge min-w-6 rounded border bg-surface-200 px-2 py-1 text-center font-mono text-xs dark-theme:bg-surface-600"
                 >
                   {{ formatKey(key) }}
                 </span>
@@ -100,3 +100,21 @@ const formatKey = (key: string): string => {
   return keyMap[key] || key
 }
 </script>
+
+<style scoped>
+.subcategory-title {
+  color: var(--p-text-muted-color);
+}
+
+.key-badge {
+  background-color: var(--p-surface-200);
+  border: 1px solid var(--p-surface-300);
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.dark-theme .key-badge {
+  background-color: var(--p-surface-600);
+  border-color: var(--p-surface-500);
+}
+</style>

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -2,7 +2,7 @@
   <a
     ref="wrapperRef"
     v-tooltip.bottom="{
-      value: tooltipText,
+      value: item.label,
       showDelay: 512
     }"
     draggable="false"
@@ -16,10 +16,6 @@
     }"
     @click="handleClick"
   >
-    <i
-      v-if="hasMissingNodes && isRoot"
-      class="icon-[lucide--triangle-alert] text-warning-background"
-    />
     <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
     <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
@@ -64,13 +60,10 @@ import {
   ComfyWorkflow,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { appendJsonExt } from '@/utils/formatUtil'
-import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 interface Props {
   item: MenuItem
@@ -81,11 +74,6 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 })
 
-const nodeDefStore = useNodeDefStore()
-const hasMissingNodes = computed(() =>
-  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
-)
-
 const { t } = useI18n()
 const menu = ref<InstanceType<typeof Menu> & MenuState>()
 const dialogService = useDialogService()
@@ -127,14 +115,6 @@ const rename = async (
 }
 
 const isRoot = props.item.key === 'root'
-
-const tooltipText = computed(() => {
-  if (hasMissingNodes.value && isRoot) {
-    return t('breadcrumbsMenu.missingNodesWarning')
-  }
-  return props.item.label
-})
-
 const menuItems = computed<MenuItem[]>(() => {
   return [
     {

src/components/button/IconButton.vue

@@ -24,7 +24,7 @@ import {
 import { cn } from '@/utils/tailwindUtil'
 
 interface IconButtonProps extends BaseButtonProps {
-  onClick?: (event: MouseEvent) => void
+  onClick: (event: Event) => void
 }
 
 defineOptions({

src/components/button/IconGroup.vue

@@ -10,7 +10,8 @@ import { cn } from '@/utils/tailwindUtil'
 const iconGroupClasses = cn(
   'flex justify-center items-center shrink-0',
   'outline-hidden border-none p-0 rounded-lg',
-  'bg-secondary-background shadow-sm',
+  'bg-white dark-theme:bg-zinc-700',
+  'text-neutral-950 dark-theme:text-white',
   'transition-all duration-200',
   'cursor-pointer'
 )

src/components/button/IconTextButton.vue

@@ -47,7 +47,7 @@ const {
 } = defineProps<IconTextButtonProps>()
 
 const buttonStyle = computed(() => {
-  const baseClasses = `${getBaseButtonClasses()} justify-start gap-2`
+  const baseClasses = `${getBaseButtonClasses()} justify-start! gap-2`
   const sizeClasses = getButtonSizeClasses(size)
   const typeClasses = border
     ? getBorderButtonTypeClasses(type)

src/components/button/MoreButton.vue

@@ -7,24 +7,13 @@
 
     <Popover
       ref="popover"
-      append-to="body"
-      auto-z-index
-      dismissable
-      close-on-escape
-      unstyled
+      :append-to="'body'"
+      :auto-z-index="true"
       :base-z-index="1000"
-      :pt="{
-        root: {
-          class: cn('absolute z-50')
-        },
-        content: {
-          class: cn(
-            'mt-1 rounded-lg',
-            'bg-secondary-background text-base-foreground',
-            'shadow-lg'
-          )
-        }
-      }"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="pt"
       @show="$emit('menuOpened')"
       @hide="$emit('menuClosed')"
     >
@@ -37,7 +26,7 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import type { BaseButtonProps } from '@/types/buttonTypes'
 import { cn } from '@/utils/tailwindUtil'
@@ -69,7 +58,18 @@ const hide = () => {
   popover.value?.hide()
 }
 
-defineExpose({
-  hide
-})
+const pt = computed(() => ({
+  root: {
+    class: cn('absolute z-50')
+  },
+  content: {
+    class: cn(
+      'mt-1 rounded-lg',
+      'bg-white dark-theme:bg-zinc-800',
+      'text-neutral dark-theme:text-white',
+      'shadow-lg',
+      'border border-zinc-200 dark-theme:border-zinc-700'
+    )
+  }
+}))
 </script>

src/components/card/CardContainer.vue

@@ -47,8 +47,8 @@ const containerClasses = computed(() => {
   // Variant styles
   const variantClasses = {
     default: cn(
-      hasBackground && 'bg-modal-card-background',
-      hasBorder && 'border border-border-default',
+      hasBackground && 'bg-white dark-theme:bg-zinc-800',
+      hasBorder && 'border border-zinc-200 dark-theme:border-zinc-700',
       hasShadow && 'shadow-sm',
       hasCursor && 'cursor-pointer'
     ),
@@ -57,9 +57,9 @@ const containerClasses = computed(() => {
       'p-2 transition-colors duration-200'
     ),
     outline: cn(
-      hasBorder && 'border-2 border-border-subtle',
+      hasBorder && 'border-2 border-zinc-300 dark-theme:border-zinc-600',
       hasCursor && 'cursor-pointer',
-      'hover:border-border-subtle/50 transition-colors'
+      'hover:border-zinc-400 dark-theme:hover:border-zinc-500 transition-colors'
     )
   }