Minor dry nit

## Summary
- add Playwright queue list fixture and coverage for toggle/count
display
- update queue overlay unit tests plus storybook stories for inline
progress and job item
- adjust useJobList expectations for ordered tasks

main <-- https://github.com/Comfy-Org/ComfyUI_frontend/pull/7336 <--
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7338 <--
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7342

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7342-Add-queue-overlay-tests-and-stories-2c66d73d365081ae8e32d6e34f87e1d9)
by [Unito](https://www.unito.io)

.env_example

@@ -14,25 +14,25 @@ DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 # Allow dev server access from remote IP addresses.
 # If true, the vite dev server will listen on all addresses, including LAN
 # and public addresses.
-# VITE_REMOTE_DEV=true
+VITE_REMOTE_DEV=false
 
 # The directory containing the ComfyUI installation used to run Playwright tests.
 # If you aren't using a separate install for testing, point this to your regular install.
 TEST_COMFYUI_DIR=/home/ComfyUI
 
 # Whether to enable minification of the frontend code.
-# ENABLE_MINIFY=true
+ENABLE_MINIFY=true
 
 # Whether to disable proxying the `/templates` route. If true, allows you to
 # serve templates from the ComfyUI_frontend/public/templates folder (for
 # locally testing changes to templates). When false or nonexistent, the
 # templates are served via the normal method from the server's python site
 # packages.
-# DISABLE_TEMPLATES_PROXY=true
+DISABLE_TEMPLATES_PROXY=false
 
 # If playwright tests are being run via vite dev server, Vue plugins will
 # invalidate screenshots.  When `true`, vite plugins will not be loaded.
-# DISABLE_VUE_PLUGINS=true
+DISABLE_VUE_PLUGINS=false
 
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8
@@ -42,3 +42,7 @@ ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org
 # SENTRY_PROJECT=cloud-frontend-staging
+
+# Stripe pricing table configuration (used by feature-flagged subscription tiers UI)
+# VITE_STRIPE_PUBLISHABLE_KEY=pk_test_123
+# VITE_STRIPE_PRICING_TABLE_ID=prctbl_123

.github/workflows/pr-backport.yaml

@@ -361,42 +361,6 @@ jobs:
         if: steps.filter-targets.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
         env:
           GH_TOKEN: ${{ github.token }}
-          BACKPORT_AGENT_PROMPT_TEMPLATE: |
-            Backport PR #${PR_NUMBER} (${PR_URL}) to ${target}.
-            Cherry-pick merge commit ${MERGE_COMMIT} onto new branch
-            ${BACKPORT_BRANCH} from origin/${target}.
-            Resolve conflicts in: ${CONFLICTS_INLINE}.
-            For test snapshots (browser_tests/**/*-snapshots/), accept PR version if
-            changed in original PR, else keep target. For package.json versions, keep
-            target branch. For pnpm-lock.yaml, regenerate with pnpm install.
-            Ask user for non-obvious conflicts.
-            Create PR titled "[backport ${target}] <original title>" with label "backport".
-            See .github/workflows/pr-backport.yaml for workflow details.
-          COMMENT_BODY_TEMPLATE: |
-            ### ⚠️ Backport to `${target}` failed
-
-            **Reason:** Merge conflicts detected during cherry-pick of `${MERGE_COMMIT_SHORT}`
-
-            <details>
-            <summary>📄 Conflicting files</summary>
-
-            ```
-            ${CONFLICTS_BLOCK}
-            ```
-
-            </details>
-
-            <details>
-            <summary>🤖 Prompt for AI Agents</summary>
-
-            ```
-            ${AGENT_PROMPT}
-            ```
-
-            </details>
-
-            ---
-            cc @${PR_AUTHOR}
         run: |
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
             PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json author,mergeCommit)
@@ -419,27 +383,10 @@ jobs:
               gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed."
 
             elif [ "${reason}" = "conflicts" ]; then
-              CONFLICTS_INLINE=$(echo "${conflicts}" | tr ',' ' ')
-              SAFE_TARGET=$(echo "$target" | tr '/' '-')
-              BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
-              PR_URL="${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}"
-
-              export PR_NUMBER PR_URL MERGE_COMMIT target BACKPORT_BRANCH CONFLICTS_INLINE
-
-              # envsubst is provided by gettext-base
-              if ! command -v envsubst >/dev/null 2>&1; then
-                sudo apt-get update && sudo apt-get install -y gettext-base
-              fi
-
-              AGENT_PROMPT=$(envsubst '${PR_NUMBER} ${PR_URL} ${target} ${MERGE_COMMIT} ${BACKPORT_BRANCH} ${CONFLICTS_INLINE}' <<<"$BACKPORT_AGENT_PROMPT_TEMPLATE")
-
-              # Use fenced code block for conflicts to handle special chars in filenames
-              CONFLICTS_BLOCK=$(echo "${conflicts}" | tr ',' '\n')
-              MERGE_COMMIT_SHORT="${MERGE_COMMIT:0:7}"
-
-              export target MERGE_COMMIT_SHORT CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
-              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
+              # Convert comma-separated conflicts back to newlines for display
+              CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
 
+              COMMENT_BODY="@${PR_AUTHOR} Backport to \`${target}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`${target}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
               gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
             fi
           done

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

@@ -1,12 +1,12 @@
-# Automated bi-weekly workflow to bump ComfyUI frontend RC releases
-name: "Release: Bi-weekly ComfyUI"
+# Automated weekly workflow to bump ComfyUI frontend RC releases
+name: "Release: Weekly ComfyUI"
 
 on:
   # Schedule for Monday at 12:00 PM PST (20:00 UTC)
   schedule:
     - cron: '0 20 * * 1'
 
-  # Allow manual triggering (bypasses bi-weekly check)
+  # Allow manual triggering
   workflow_dispatch:
     inputs:
       comfyui_fork:
@@ -16,39 +16,7 @@ on:
         type: string
 
 jobs:
-  check-release-week:
-    runs-on: ubuntu-latest
-    outputs:
-      is_release_week: ${{ steps.check.outputs.is_release_week }}
-    steps:
-      - name: Check if release week
-        id: check
-        run: |
-          # Anchor date: first bi-weekly release Monday
-          ANCHOR="2025-12-22"
-
-          ANCHOR_EPOCH=$(date -d "$ANCHOR" +%s)
-          NOW_EPOCH=$(date +%s)
-          WEEKS_SINCE=$(( (NOW_EPOCH - ANCHOR_EPOCH) / 604800 ))
-
-          if [ $((WEEKS_SINCE % 2)) -eq 0 ]; then
-            echo "Release week (week $WEEKS_SINCE since anchor $ANCHOR)"
-            echo "is_release_week=true" >> $GITHUB_OUTPUT
-          else
-            echo "Not a release week (week $WEEKS_SINCE since anchor $ANCHOR)"
-            echo "is_release_week=false" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Summary
-        run: |
-          echo "## Bi-weekly Check" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "- Is release week: ${{ steps.check.outputs.is_release_week }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Manual trigger: ${{ github.event_name == 'workflow_dispatch' }}" >> $GITHUB_STEP_SUMMARY
-
   resolve-version:
-    needs: check-release-week
-    if: needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
     outputs:
       current_version: ${{ steps.resolve.outputs.current_version }}
@@ -163,8 +131,8 @@ jobs:
           echo "- [View workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)" >> $GITHUB_STEP_SUMMARY
 
   create-comfyui-pr:
-    needs: [check-release-week, resolve-version, trigger-release-if-needed]
-    if: always() && needs.resolve-version.result == 'success' && (needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch')
+    needs: [resolve-version, trigger-release-if-needed]
+    if: always() && needs.resolve-version.result == 'success'
     runs-on: ubuntu-latest
 
     steps:
@@ -263,7 +231,7 @@ jobs:
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
 
-          # Create/update branch (reuse same branch name each release cycle)
+          # Create/update branch (reuse same branch name each week)
           BRANCH="automation/comfyui-frontend-bump"
           git checkout -B "$BRANCH"
           git add requirements.txt
@@ -275,7 +243,7 @@ jobs:
             exit 0
           fi
 
-          # Force push to fork (overwrites previous release cycle's branch)
+          # Force push to fork (overwrites previous week's branch)
           # Note: This intentionally destroys branch history to maintain a single PR
           # Any review comments or manual commits will need to be re-applied
           if ! git push -f origin "$BRANCH"; then

.npmrc

@@ -1,3 +1,2 @@
 ignore-workspace-root-check=true
 catalog-mode=prefer
-public-hoist-pattern[]=@parcel/watcher

.storybook/preview.ts

@@ -9,9 +9,9 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 
+import '@/assets/css/style.css'
 import { i18n } from '@/i18n'
 import '@/lib/litegraph/public/css/litegraph.css'
-import '@/assets/css/style.css'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -58,7 +58,6 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.documentElement.classList.remove('dark-theme')
     document.body.classList.remove('dark-theme')
   }
-  document.body.classList.add('[&_*]:!font-inter')
 
   return Story(context.args, context)
 }

AGENTS.md

@@ -150,8 +150,7 @@ The project uses **Nx** for build orchestration and task management
 21. Minimize [nesting](https://wiki.c2.com/?ArrowAntiPattern), e.g. `if () { ... }` or `for () { ... }`
 22. Avoid mutable state, prefer immutability and assignment at point of declaration
 23. Favor pure functions (especially testable ones)
-24. Do not use function expressions if it's possible to use function declarations instead
-25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
+24. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
 
 ## Testing Guidelines
 
@@ -215,29 +214,6 @@ The project uses **Nx** for build orchestration and task management
 - Thousands of users and extensions
 - Prioritize clean interfaces that restrict extension access
 
-### Code Review
-
-In doing a code review, you should make sure that:
-
-- The code is well-designed.
-- The functionality is good for the users of the code.
-- Any UI changes are sensible and look good.
-- Any parallel programming is done safely.
-- The code isn’t more complex than it needs to be.
-- The developer isn’t implementing things they might need in the future but don’t know they need now.
-- Code has appropriate unit tests.
-- Tests are well-designed.
-- The developer used clear names for everything.
-- Comments are clear and useful, and mostly explain why instead of what.
-- Code is appropriately documented (generally in g3doc).
-- The code conforms to our style guides.
-
-#### [Complexity](https://google.github.io/eng-practices/review/reviewer/looking-for.html#complexity)
-
-Is the CL more complex than it should be? Check this at every level of the CL—are individual lines too complex? Are functions too complex? Are classes too complex? “Too complex” usually means “can’t be understood quickly by code readers.” It can also mean “developers are likely to introduce bugs when they try to call or modify this code.”
-
-A particular type of complexity is over-engineering, where developers have made the code more generic than it needs to be, or added functionality that isn’t presently needed by the system. Reviewers should be especially vigilant about over-engineering. Encourage developers to solve the problem they know needs to be solved now, not the problem that the developer speculates might need to be solved in the future. The future problem should be solved once it arrives and you can see its actual shape and requirements in the physical universe.
-
 ## Repository Navigation
 
 - Check README files in key folders (tests-ui, browser_tests, composables, etc.)

CLAUDE.md

@@ -12,7 +12,7 @@ For first-time setup, use the Claude command:
 
 This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
 
-**Prerequisites:** Node.js >= 24, Git repository, available ports for dev server, storybook, etc.
+**Prerequisites:** Node.js >= 24, Git repository, available ports (5173, 6006)
 
 ## Development Workflow
 

CONTRIBUTING.md

@@ -17,9 +17,17 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (v24) and pnpm
+  - Node.js (v18 or later to build; v24 for vite dev server) and pnpm
   - Git for version control
-  - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
+  - A running ComfyUI backend instance
+  
+- **Tech Stack**:
+  - [Vue 3.5 Composition API](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
+  - [Pinia](https://pinia.vuejs.org/) for state management
+  - [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
+  - litegraph.js (integrated in src/lib) for node editor
+  - [zod](https://zod.dev/) for schema validation
+  - [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
 
 ### Initial Setup
 
@@ -47,18 +55,15 @@ To launch ComfyUI and have it connect to your development server:
 python main.py --port 8188
 ```
 
-If you are on Mac or a low-spec machine, you can run the server in CPU mode
+### Git pre-commit hooks
 
-```bash
-python main.py --port 8188 --cpu
-```
+Run `pnpm prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
 
 ### Dev Server
 
 - Start local ComfyUI backend at `localhost:8188`
 - Run `pnpm dev` to start the dev server
 - Run `pnpm dev:electron` to start the dev server with electron API mocked
-- Run `pnpm dev:cloud` to start the dev server against the cloud backend (instead of local ComfyUI server)
 
 #### Access dev server on touch devices
 
@@ -108,7 +113,7 @@ When you fix a bug that affects a version in feature freeze, we use an automated
 1. Create your PR fixing the bug on `main` branch as usual
 2. Before merging, add these labels to your PR:
    - `needs-backport` - triggers the automated backport workflow
-   - `core/1.24` - targets the `core/1.24` release candidate branch
+   - `1.24` - targets the `core/1.24` release candidate branch
    
 3. Merge your PR normally
 4. The automated workflow will:
@@ -140,6 +145,67 @@ This project includes `.vscode/launch.json.default` and `.vscode/settings.json.d
 
 We've also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
 
+### MCP Integrations
+
+#### Playwright Browser Automation
+
+The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.
+
+For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.
+
+##### Setup for Claude Code
+
+After installing dependencies with `pnpm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
+
+Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
+
+```
+> navigate to localhost:5173 and take a screenshot.
+   tell me the items in the menubar
+
+● I'll navigate to localhost:5173 and take a
+  screenshot to see the menubar items.
+
+● playwright:playwright_navigate (MCP)(url:       …
+                                      "http://local
+                                      host:5173")
+  ⎿  Navigated to http://localhost:5173
+
+● playwright:playwright_screenshot (MCP)(name: "lo…
+                                        alhost_5173
+                                        _menubar")
+
+  ⎿ Screenshot saved to: ../../../Downloads/localho
+    st_5173_menubar-2025-05-30T17-23-00-942Z.png
+  ⎿  Screenshot also stored in memory with name:
+     'localhost_5173_menubar'
+
+● Read(../../../Downloads/localhost_5173_menubar-2…
+      25-05-30T17-23-00-942Z.png)
+  ⎿  Read image (94.3KB)
+
+● Based on the screenshot, I can see the menubar at
+   the top of the ComfyUI interface contains the
+  following items:
+
+  Main Menubar Items:
+  - Workflow - Menu for workflow-related actions
+  - Edit - Menu for editing operations
+  - Help - Menu for help and documentation
+
+  Additional UI Elements:
+  - ComfyUI Logo - On the far left
+  - Workflow Tab - Shows "Unsaved Workflow" with a
+  dropdown and close button
+  - Layout Controls - On the far right (grid view
+  and hamburger menu icons)
+
+  The interface shows a typical ComfyUI workflow
+  graph with nodes like "Load Checkpoint", "CLIP
+  Text Encode (Prompt)", "KSampler", and "Empty
+  Latent Image" connected with colored cables.
+```
+
 ## Testing
 
 ### Unit Tests
@@ -149,7 +215,7 @@ We've also included a list of recommended extensions in `.vscode/extensions.json
 
 ### Playwright Tests
 
-Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details. The snapshots are generated in the GH actions runner, not locally.
+Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details.
 
 ### Running All Tests
 
@@ -157,6 +223,7 @@ Before submitting a PR, ensure all tests pass:
 
 ```bash
 pnpm test:unit
+pnpm test:browser
 pnpm typecheck
 pnpm lint
 pnpm format
@@ -165,28 +232,23 @@ pnpm format
 ## Code Style Guidelines
 
 ### TypeScript
-
 - Use TypeScript for all new code
 - Avoid `any` types - use proper type definitions
 - Never use `@ts-expect-error` - fix the underlying type issue
 
 ### Vue 3 Patterns
-
 - Use Composition API for all components
 - Follow Vue 3.5+ patterns (props destructuring is reactive)
 - Use `<script setup>` syntax
 
 ### 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](packages/design-system/src/css/style.css) like `bg-node-component-surface`
+- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
 
 ### Internationalization
-
 - All user-facing strings must use vue-i18n
-- Add translations to [src/locales/en/main.json](src/locales/en/main.json)
+- Add translations to `src/locales/en/main.json`
 - Use translation keys: `const { t } = useI18n(); t('key.path')`
-- The corresponding values in other locales is generated automatically on releases, PR authors only need to edit [src/locales/en/main.json](src/locales/en/main.json)
 
 ## Icons
 
@@ -220,12 +282,34 @@ The original litegraph repository (https://github.com/Comfy-Org/litegraph.js) is
 2. Run all tests and ensure they pass
 3. Create a pull request with a clear title and description
 4. Use conventional commit format for PR titles:
-   - `feat:` for new features
-   - `fix:` for bug fixes
-   - `docs:` for documentation
-   - `refactor:` for code refactoring
-   - `test:` for test additions/changes
-   - `chore:` for maintenance tasks
+   - `[feat]` for new features
+   - `[fix]` for bug fixes
+   - `[docs]` for documentation
+   - `[refactor]` for code refactoring
+   - `[test]` for test additions/changes
+   - `[chore]` for maintenance tasks
+
+### PR Description Template
+
+```
+## Description
+Brief description of the changes
+
+## Type of Change
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Breaking change
+- [ ] Documentation update
+
+## Testing
+- [ ] Unit tests pass
+- [ ] Component tests pass
+- [ ] Browser tests pass (if applicable)
+- [ ] Manual testing completed
+
+## Screenshots (if applicable)
+Add screenshots for UI changes
+```
 
 ### Review Process
 
@@ -241,4 +325,4 @@ If you have questions about contributing:
 - Ask in our [Discord](https://discord.com/invite/comfyorg)
 - Open a new issue for clarification
 
-Thank you for contributing to the ComfyUI Frontend!
+Thank you for contributing to ComfyUI Frontend!

README.md

@@ -33,11 +33,11 @@
 
 The project follows a structured release process for each minor version, consisting of three distinct phases:
 
-1. **Development Phase** - 2 weeks
+1. **Development Phase** - 1 week
    - Active development of new features
    - Code changes merged to the development branch
 
-2. **Feature Freeze** - 2 weeks
+2. **Feature Freeze** - 1 week
    - No new features accepted
    - Only bug fixes are cherry-picked to the release branch
    - Testing and stabilization of the codebase
@@ -56,16 +56,16 @@ To use the latest nightly release, add the following command line argument to yo
 ```
 
 ## Overlapping Release Cycles
-The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously. Each feature has approximately 4 weeks from merge to ComfyUI stable release (2 weeks on main, 2 weeks frozen on RC).
+The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously.
 
 ### Example Release Cycle
 
 | Week | Date Range | Version 1.1 | Version 1.2 | Version 1.3 | Patch Releases |
 |------|------------|-------------|-------------|-------------|----------------|
-| 1-2 | Mar 1-14 | Development | - | - | - |
-| 3-4 | Mar 15-28 | Feature Freeze | Development | - | 1.1.0 through 1.1.13 (daily) |
-| 5-6 | Mar 29-Apr 11 | Released | Feature Freeze | Development | 1.1.14+ (daily)<br>1.2.0 through 1.2.13 (daily) |
-| 7-8 | Apr 12-25 | - | Released | Feature Freeze | 1.2.14+ (daily)<br>1.3.0 through 1.3.13 (daily) |
+| 1 | Mar 1-7 | Development | - | - | - |
+| 2 | Mar 8-14 | Feature Freeze | Development | - | 1.1.0 through 1.1.6 (daily) |
+| 3 | Mar 15-21 | Released | Feature Freeze | Development | 1.1.7 through 1.1.13 (daily)<br>1.2.0 through 1.2.6 (daily) |
+| 4 | Mar 22-28 | - | Released | Feature Freeze | 1.2.7 through 1.2.13 (daily)<br>1.3.0 through 1.3.6 (daily) |
 
 ## Release Summary
 

browser_tests/assets/groups/nested-groups-1-inner-node.json

@@ -1,92 +0,0 @@
-{
-  "id": "2ba0b800-2f13-4f21-b8d6-c6cdb0152cae",
-  "revision": 0,
-  "last_node_id": 17,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 17,
-      "type": "VAEDecode",
-      "pos": [
-        318.8446183157076,
-        355.3961392345528
-      ],
-      "size": [
-        225,
-        102
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": null
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "VAEDecode"
-      },
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [
-    {
-      "id": 4,
-      "title": "Outer Group",
-      "bounding": [
-        -46.25245366331014,
-        -150.82497138023245,
-        1034.4034361963616,
-        1007.338460439933
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    },
-    {
-      "id": 3,
-      "title": "Inner Group",
-      "bounding": [
-        80.96059074101554,
-        28.123757436778178,
-        718.286373661183,
-        691.2397164539732
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    }
-  ],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 0.7121393732101533,
-      "offset": [
-        289.18242848011835,
-        367.0747755524199
-      ]
-    },
-    "frontendVersion": "1.35.5",
-    "VHS_latentpreview": false,
-    "VHS_latentpreviewrate": 0,
-    "VHS_MetadataImage": true,
-    "VHS_KeepIntermediate": true,
-    "workflowRendererVersion": "Vue"
-  },
-  "version": 0.4
-}

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

@@ -1,412 +0,0 @@
-{
-  "id": "2ba0b800-2f13-4f21-b8d6-c6cdb0152cae",
-  "revision": 0,
-  "last_node_id": 16,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 4,
-      "type": "CheckpointLoaderSimple",
-      "pos": [
-        60,
-        200
-      ],
-      "size": [
-        315,
-        98
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "MODEL",
-          "type": "MODEL",
-          "slot_index": 0,
-          "links": [
-            1
-          ]
-        },
-        {
-          "name": "CLIP",
-          "type": "CLIP",
-          "slot_index": 1,
-          "links": [
-            3,
-            5
-          ]
-        },
-        {
-          "name": "VAE",
-          "type": "VAE",
-          "slot_index": 2,
-          "links": [
-            8
-          ]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CheckpointLoaderSimple",
-        "cnr_id": "comfy-core",
-        "ver": "0.3.65",
-        "models": [
-          {
-            "name": "v1-5-pruned-emaonly-fp16.safetensors",
-            "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
-            "directory": "checkpoints"
-          }
-        ]
-      },
-      "widgets_values": [
-        "v1-5-pruned-emaonly-fp16.safetensors"
-      ]
-    },
-    {
-      "id": 3,
-      "type": "KSampler",
-      "pos": [
-        870,
-        170
-      ],
-      "size": [
-        315,
-        474
-      ],
-      "flags": {},
-      "order": 4,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": 1
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": 4
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": 6
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": 2
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "slot_index": 0,
-          "links": [
-            7
-          ]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler",
-        "cnr_id": "comfy-core",
-        "ver": "0.3.65"
-      },
-      "widgets_values": [
-        685468484323813,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    },
-    {
-      "id": 8,
-      "type": "VAEDecode",
-      "pos": [
-        975,
-        700
-      ],
-      "size": [
-        210,
-        46
-      ],
-      "flags": {},
-      "order": 5,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": 7
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": 8
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "slot_index": 0,
-          "links": []
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "VAEDecode",
-        "cnr_id": "comfy-core",
-        "ver": "0.3.65"
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 7,
-      "type": "CLIPTextEncode",
-      "pos": [
-        410,
-        410
-      ],
-      "size": [
-        425.27801513671875,
-        180.6060791015625
-      ],
-      "flags": {},
-      "order": 3,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 5
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [
-            6
-          ]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode",
-        "cnr_id": "comfy-core",
-        "ver": "0.3.65"
-      },
-      "widgets_values": [
-        "text, watermark"
-      ],
-      "color": "#223",
-      "bgcolor": "#335"
-    },
-    {
-      "id": 5,
-      "type": "EmptyLatentImage",
-      "pos": [
-        520,
-        690
-      ],
-      "size": [
-        315,
-        106
-      ],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "slot_index": 0,
-          "links": [
-            2
-          ]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "EmptyLatentImage",
-        "cnr_id": "comfy-core",
-        "ver": "0.3.65"
-      },
-      "widgets_values": [
-        512,
-        512,
-        1
-      ]
-    },
-    {
-      "id": 6,
-      "type": "CLIPTextEncode",
-      "pos": [
-        411.21649169921875,
-        203.68695068359375
-      ],
-      "size": [
-        422.84503173828125,
-        164.31304931640625
-      ],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": 3
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "slot_index": 0,
-          "links": [
-            4
-          ]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode",
-        "cnr_id": "comfy-core",
-        "ver": "0.3.65"
-      },
-      "widgets_values": [
-        "beautiful scenery nature glass bottle landscape, purple galaxy bottle,"
-      ],
-      "color": "#232",
-      "bgcolor": "#353"
-    }
-  ],
-  "links": [
-    [
-      1,
-      4,
-      0,
-      3,
-      0,
-      "MODEL"
-    ],
-    [
-      2,
-      5,
-      0,
-      3,
-      3,
-      "LATENT"
-    ],
-    [
-      3,
-      4,
-      1,
-      6,
-      0,
-      "CLIP"
-    ],
-    [
-      4,
-      6,
-      0,
-      3,
-      1,
-      "CONDITIONING"
-    ],
-    [
-      5,
-      4,
-      1,
-      7,
-      0,
-      "CLIP"
-    ],
-    [
-      6,
-      7,
-      0,
-      3,
-      2,
-      "CONDITIONING"
-    ],
-    [
-      7,
-      3,
-      0,
-      8,
-      0,
-      "LATENT"
-    ],
-    [
-      8,
-      4,
-      2,
-      8,
-      1,
-      "VAE"
-    ]
-  ],
-  "groups": [
-    {
-      "id": 1,
-      "title": "Step 1 - Load model",
-      "bounding": [
-        50,
-        130,
-        335,
-        181.60000610351562
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    },
-    {
-      "id": 2,
-      "title": "Step 3 - Image size",
-      "bounding": [
-        510,
-        620,
-        335,
-        189.60000610351562
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    },
-    {
-      "id": 3,
-      "title": "Step 2 - Prompt",
-      "bounding": [
-        400,
-        130,
-        445.27801513671875,
-        467.2060852050781
-      ],
-      "color": "#3f789e",
-      "font_size": 24,
-      "flags": {}
-    }
-  ],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 0.44218252181616574,
-      "offset": [
-        -666.5670907104311,
-        -2227.894644048147
-      ]
-    },
-    "frontendVersion": "1.35.3",
-    "VHS_latentpreview": false,
-    "VHS_latentpreviewrate": 0,
-    "VHS_MetadataImage": true,
-    "VHS_KeepIntermediate": true,
-    "workflowRendererVersion": "LG"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -13,6 +13,7 @@ import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
 import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
+import { QueueList } from './components/QueueList'
 import { SettingDialog } from './components/SettingDialog'
 import {
   NodeLibrarySidebarTab,
@@ -126,20 +127,6 @@ class ConfirmDialog {
     const loc = this[locator]
     await expect(loc).toBeVisible()
     await loc.click()
-
-    // Wait for the dialog mask to disappear after confirming
-    const mask = this.page.locator('.p-dialog-mask')
-    const count = await mask.count()
-    if (count > 0) {
-      await mask.first().waitFor({ state: 'hidden', timeout: 3000 })
-    }
-
-    // Wait for workflow service to finish if it's busy
-    await this.page.waitForFunction(
-      () => window['app']?.extensionManager?.workflow?.isBusy === false,
-      undefined,
-      { timeout: 3000 }
-    )
   }
 }
 
@@ -165,6 +152,7 @@ export class ComfyPage {
 
   // Components
   public readonly searchBox: ComfyNodeSearchBox
+  public readonly queueList: QueueList
   public readonly menu: ComfyMenu
   public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
@@ -197,6 +185,7 @@ export class ComfyPage {
     this.visibleToasts = page.locator('.p-toast-message:visible')
 
     this.searchBox = new ComfyNodeSearchBox(page)
+    this.queueList = new QueueList(page)
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
@@ -256,9 +245,6 @@ export class ComfyPage {
     await this.page.evaluate(async () => {
       await window['app'].extensionManager.workflow.syncWorkflows()
     })
-
-    // Wait for Vue to re-render the workflow list
-    await this.nextFrame()
   }
 
   async setupUser(username: string) {
@@ -1653,55 +1639,6 @@ export class ComfyPage {
     }, focusMode)
     await this.nextFrame()
   }
-
-  /**
-   * Get the position of a group by title.
-   * @param title The title of the group to find
-   * @returns The group's canvas position
-   * @throws Error if group not found
-   */
-  async getGroupPosition(title: string): Promise<Position> {
-    const pos = await this.page.evaluate((title) => {
-      const groups = window['app'].graph.groups
-      const group = groups.find((g: { title: string }) => g.title === title)
-      if (!group) return null
-      return { x: group.pos[0], y: group.pos[1] }
-    }, title)
-    if (!pos) throw new Error(`Group "${title}" not found`)
-    return pos
-  }
-
-  /**
-   * Drag a group by its title.
-   * @param options.name The title of the group to drag
-   * @param options.deltaX Horizontal drag distance in screen pixels
-   * @param options.deltaY Vertical drag distance in screen pixels
-   */
-  async dragGroup(options: {
-    name: string
-    deltaX: number
-    deltaY: number
-  }): Promise<void> {
-    const { name, deltaX, deltaY } = options
-    const screenPos = await this.page.evaluate((title) => {
-      const app = window['app']
-      const groups = app.graph.groups
-      const group = groups.find((g: { title: string }) => g.title === title)
-      if (!group) return null
-      // Position in the title area of the group
-      const clientPos = app.canvasPosToClientPos([
-        group.pos[0] + 50,
-        group.pos[1] + 15
-      ])
-      return { x: clientPos[0], y: clientPos[1] }
-    }, name)
-    if (!screenPos) throw new Error(`Group "${name}" not found`)
-
-    await this.dragAndDrop(screenPos, {
-      x: screenPos.x + deltaX,
-      y: screenPos.y + deltaY
-    })
-  }
 }
 
 export const testComfySnapToGridGridSize = 50

browser_tests/fixtures/components/QueueList.ts

@@ -0,0 +1,57 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+export class QueueList {
+  constructor(public readonly page: Page) {}
+
+  get toggleButton() {
+    return this.page.getByTestId('queue-toggle-button')
+  }
+
+  get inlineProgress() {
+    return this.page.getByTestId('queue-inline-progress')
+  }
+
+  get overlay() {
+    return this.page.getByTestId('queue-overlay')
+  }
+
+  get closeButton() {
+    return this.page.getByTestId('queue-overlay-close-button')
+  }
+
+  get jobItems() {
+    return this.page.getByTestId('queue-job-item')
+  }
+
+  get clearHistoryButton() {
+    return this.page.getByRole('button', { name: /Clear History/i })
+  }
+
+  async open() {
+    if (!(await this.overlay.isVisible())) {
+      await this.toggleButton.click()
+      await expect(this.overlay).toBeVisible()
+    }
+  }
+
+  async close() {
+    if (await this.overlay.isVisible()) {
+      await this.closeButton.click()
+      await expect(this.overlay).not.toBeVisible()
+    }
+  }
+
+  async getJobCount(state?: string) {
+    if (state) {
+      return await this.page
+        .locator(`[data-testid="queue-job-item"][data-job-state="${state}"]`)
+        .count()
+    }
+    return await this.jobItems.count()
+  }
+
+  getJobAction(actionKey: string) {
+    return this.page.getByTestId(`job-action-${actionKey}`)
+  }
+}

browser_tests/fixtures/ws.ts

@@ -1,7 +1,11 @@
 import { test as base } from '@playwright/test'
 
+import type { StatusWsMessage } from '../../src/schemas/apiSchema'
+
+export type WsMessage = { type: 'status'; data: StatusWsMessage }
+
 export const webSocketFixture = base.extend<{
-  ws: { trigger(data: any, url?: string): Promise<void> }
+  ws: { trigger(data: WsMessage, url?: string): Promise<void> }
 }>({
   ws: [
     async ({ page }, use) => {

browser_tests/tests/actionbar.spec.ts

@@ -1,9 +1,9 @@
 import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'
 
-import type { StatusWsMessage } from '../../src/schemas/apiSchema.ts'
-import { comfyPageFixture } from '../fixtures/ComfyPage.ts'
-import { webSocketFixture } from '../fixtures/ws.ts'
+import { comfyPageFixture } from '../fixtures/ComfyPage'
+import { webSocketFixture } from '../fixtures/ws'
+import type { WsMessage } from '../fixtures/ws'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
@@ -61,7 +61,7 @@ test.describe('Actionbar', () => {
 
     // Trigger a status websocket message
     const triggerStatus = async (queueSize: number) => {
-      await ws.trigger({
+      const message = {
         type: 'status',
         data: {
           status: {
@@ -70,7 +70,9 @@ test.describe('Actionbar', () => {
             }
           }
         }
-      } as StatusWsMessage)
+      } satisfies WsMessage
+
+      await ws.trigger(message)
     }
 
     // Extract the width from the queue response

browser_tests/tests/queue/queueList.spec.ts

@@ -0,0 +1,157 @@
+import { expect, mergeTests } from '@playwright/test'
+
+import type { ComfyPage } from '../../fixtures/ComfyPage'
+import { comfyPageFixture } from '../../fixtures/ComfyPage'
+import { webSocketFixture } from '../../fixtures/ws'
+import type { WsMessage } from '../../fixtures/ws'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
+
+type QueueState = {
+  running: QueueJob[]
+  pending: QueueJob[]
+}
+
+type QueueJob = [
+  string,
+  string,
+  Record<string, unknown>,
+  Record<string, unknown>,
+  string[]
+]
+
+type QueueController = {
+  state: QueueState
+  sync: (
+    ws: { trigger(data: WsMessage, url?: string): Promise<void> },
+    nextState: Partial<QueueState>
+  ) => Promise<void>
+}
+
+test.describe('Queue UI', () => {
+  let queue: QueueController
+
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.page.route('**/api/prompt', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          prompt_id: 'mock-prompt-id',
+          number: 1,
+          node_errors: {}
+        })
+      })
+    })
+
+    // Mock history to avoid pulling real data
+    await comfyPage.page.route('**/api/history**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ History: [] })
+      })
+    })
+
+    queue = await createQueueController(comfyPage)
+  })
+
+  test('toggles overlay and updates count from status events', async ({
+    comfyPage,
+    ws
+  }) => {
+    await queue.sync(ws, { running: [], pending: [] })
+
+    await expect(comfyPage.queueList.toggleButton).toContainText('0')
+    await expect(comfyPage.queueList.toggleButton).toContainText(/queued/i)
+    await expect(comfyPage.queueList.overlay).toBeHidden()
+
+    await queue.sync(ws, {
+      pending: [queueJob('1', 'mock-pending', 'client-a')]
+    })
+
+    await expect(comfyPage.queueList.toggleButton).toContainText('1')
+    await expect(comfyPage.queueList.toggleButton).toContainText(/queued/i)
+
+    await comfyPage.queueList.open()
+    await expect(comfyPage.queueList.overlay).toBeVisible()
+    await expect(comfyPage.queueList.jobItems).toHaveCount(1)
+
+    await comfyPage.queueList.close()
+    await expect(comfyPage.queueList.overlay).toBeHidden()
+  })
+
+  test('displays running and pending jobs via status updates', async ({
+    comfyPage,
+    ws
+  }) => {
+    await queue.sync(ws, {
+      running: [queueJob('2', 'mock-running', 'client-b')],
+      pending: [queueJob('3', 'mock-pending', 'client-c')]
+    })
+
+    await comfyPage.queueList.open()
+    await expect(comfyPage.queueList.jobItems).toHaveCount(2)
+
+    const firstJob = comfyPage.queueList.jobItems.first()
+    await firstJob.hover()
+
+    const cancelAction = firstJob
+      .getByTestId('job-action-cancel-running')
+      .or(firstJob.getByTestId('job-action-cancel-hover'))
+
+    await expect(cancelAction).toBeVisible()
+  })
+})
+
+const queueJob = (
+  queueIndex: string,
+  promptId: string,
+  clientId: string
+): QueueJob => [
+  queueIndex,
+  promptId,
+  { client_id: clientId },
+  { class_type: 'Note' },
+  ['output']
+]
+
+const createQueueController = async (
+  comfyPage: ComfyPage
+): Promise<QueueController> => {
+  const state: QueueState = { running: [], pending: [] }
+
+  // Single queue handler reads the latest in-memory state
+  await comfyPage.page.route('**/api/queue', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        queue_running: state.running,
+        queue_pending: state.pending
+      })
+    })
+  })
+
+  const sync = async (
+    ws: { trigger(data: WsMessage, url?: string): Promise<void> },
+    nextState: Partial<QueueState>
+  ) => {
+    if (nextState.running) state.running = nextState.running
+    if (nextState.pending) state.pending = nextState.pending
+
+    const total = state.running.length + state.pending.length
+    const queueResponse = comfyPage.page.waitForResponse('**/api/queue')
+
+    await ws.trigger({
+      type: 'status',
+      data: {
+        status: { exec_info: { queue_remaining: total } }
+      }
+    })
+
+    await queueResponse
+  }
+
+  return { state, sync }
+}

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -85,7 +85,7 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     const initialShape = await nodeRef.getProperty<number>('shape')
 
     await openMoreOptions(comfyPage)
-    await comfyPage.page.getByText('Shape', { exact: true }).hover()
+    await comfyPage.page.getByText('Shape', { exact: true }).click()
     await expect(comfyPage.page.getByText('Box', { exact: true })).toBeVisible({
       timeout: 5000
     })
@@ -136,18 +136,13 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     comfyPage
   }) => {
     await openMoreOptions(comfyPage)
-    const renameItem = comfyPage.page.getByText('Rename', { exact: true })
-    await expect(renameItem).toBeVisible({ timeout: 5000 })
-
-    // Wait for multiple frames to allow PrimeVue's outside click handler to initialize
-    for (let i = 0; i < 30; i++) {
-      await comfyPage.nextFrame()
-    }
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).toBeVisible({ timeout: 5000 })
 
     await comfyPage.page
       .locator('#graph-canvas')
       .click({ position: { x: 0, y: 50 }, force: true })
-
     await comfyPage.nextFrame()
     await expect(
       comfyPage.page.getByText('Rename', { exact: true })

browser_tests/tests/viewport.spec.ts

@@ -1,20 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Viewport', () => {
-  test('Fits view to nodes when saved viewport position is offscreen', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('viewport/default-viewport-saved-offscreen')
-
-    // Wait a few frames for rendering to stabilize
-    for (let i = 0; i < 5; i++) {
-      await comfyPage.nextFrame()
-    }
-
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'viewport-fits-when-saved-offscreen.png'
-    )
-  })
-})

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -32,42 +32,4 @@ test.describe('Vue Node Groups', () => {
       'vue-groups-fit-to-contents.png'
     )
   })
-
-  test('should move nested groups together when dragging outer group', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('groups/nested-groups-1-inner-node')
-
-    // Get initial positions with null guards
-    const outerInitial = await comfyPage.getGroupPosition('Outer Group')
-    const innerInitial = await comfyPage.getGroupPosition('Inner Group')
-
-    const initialOffsetX = innerInitial.x - outerInitial.x
-    const initialOffsetY = innerInitial.y - outerInitial.y
-
-    // Drag the outer group
-    const dragDelta = { x: 100, y: 80 }
-    await comfyPage.dragGroup({
-      name: 'Outer Group',
-      deltaX: dragDelta.x,
-      deltaY: dragDelta.y
-    })
-
-    // Use retrying assertion to wait for positions to update
-    await expect(async () => {
-      const outerFinal = await comfyPage.getGroupPosition('Outer Group')
-      const innerFinal = await comfyPage.getGroupPosition('Inner Group')
-
-      const finalOffsetX = innerFinal.x - outerFinal.x
-      const finalOffsetY = innerFinal.y - outerFinal.y
-
-      // Both groups should have moved
-      expect(outerFinal.x).not.toBe(outerInitial.x)
-      expect(innerFinal.x).not.toBe(innerInitial.x)
-
-      // The relative offset should be maintained (inner group moved with outer)
-      expect(finalOffsetX).toBeCloseTo(initialOffsetX, 0)
-      expect(finalOffsetY).toBeCloseTo(initialOffsetY, 0)
-    }).toPass({ timeout: 5000 })
-  })
 })

docs/adr/0005-remove-importmap-for-vue-extensions.md

@@ -1,97 +0,0 @@
-# 5. Remove Import Map for Vue Extensions
-
-Date: 2025-12-13
-
-## Status
-
-Accepted
-
-## Context
-
-ComfyUI frontend previously used a Vite plugin (`generateImportMapPlugin`) to inject an HTML import map exposing shared modules to extensions. This allowed Vue-based extensions to mark dependencies as external in their Vite configs:
-
-```typescript
-// Extension vite.config.ts (old pattern)
-rollupOptions: {
-  external: ['vue', 'vue-i18n', 'pinia', /^primevue\/?.*/, ...]
-}
-```
-
-The import map resolved bare specifiers like `import { ref } from 'vue'` at runtime by mapping them to pre-built ESM files served from `/assets/lib/`.
-
-**Modules exposed via import map:**
-
-- `vue` (vue.esm-browser.prod.js)
-- `vue-i18n` (vue-i18n.esm-browser.prod.js)
-- `primevue/*` (all PrimeVue components)
-- `@primevue/themes/*`
-- `@primevue/forms/*`
-
-**Problems with import map approach:**
-
-1. **Blocked tree shaking**: Vue and PrimeVue loaded as remote modules at runtime, preventing bundler optimizations. The entire Vue runtime was loaded even if only a few APIs were used.
-
-2. **Poor code splitting**: PrimeVue's component library split into hundreds of small chunks, each requiring a separate network request on mount. This significantly impacted initial page load.
-
-3. **Cold start performance**: Each externalized module required a separate HTTP request and browser module resolution step. This compounded on lower-end systems and slower networks.
-
-4. **Version alignment complexity**: Extensions relied on the frontend's Vue version at runtime. Subtle version mismatches between build-time types and runtime code caused debugging difficulties.
-
-5. **Incompatible with Cloud distribution**: The Cloud deployment model requires fully bundled, optimized assets. Import maps added a layer of indirection incompatible with our CDN and caching strategy.
-
-## Decision
-
-Remove the `generateImportMapPlugin` and require Vue-based extensions to bundle their own Vue instance.
-
-**Implementation (PR #6899):**
-
-- Deleted `build/plugins/generateImportMapPlugin.ts`
-- Removed plugin configuration from `vite.config.mts`
-- Removed `fast-glob` dependency used by the plugin
-
-**Extension migration path:**
-
-1. Remove `external: ['vue', ...]` from Vite rollup options
-2. Vue and related dependencies will be bundled into the extension output
-3. No code changes required in extension source files
-
-The import map was already disabled for Cloud builds (PR #6559) before complete removal. Removal aligns all distribution channels on the same bundling strategy.
-
-## Consequences
-
-### Positive
-
-- **Improved page load**: Full tree shaking and optimal code splitting now apply to Vue and PrimeVue
-- **Faster development**: No import map generation step; simplified build pipeline
-- **Better debugging**: Extension's bundled Vue matches build-time expectations exactly
-- **Cloud compatibility**: All assets fully bundled and CDN-optimizable
-- **Consistent behavior**: Same bundling strategy across desktop, localhost, and cloud distributions
-- **Reduced network requests**: Fewer module fetches on initial page load
-
-### Negative
-
-- **Breaking change for existing extensions**: Extensions using `external: ['vue']` pattern fail with "Failed to resolve module specifier 'vue'" error
-- **Larger extension bundles**: Each extension now includes its own Vue instance (~30KB gzipped)
-- **Potential version fragmentation**: Different extensions may bundle different Vue versions (mitigated by Vue's stable API)
-
-### Migration Impact
-
-Extensions affected must update their build configuration. The migration is straightforward:
-
-```diff
-// vite.config.ts
-rollupOptions: {
--  external: ['vue', 'vue-i18n', 'primevue', ...]
-}
-```
-
-Affected versions:
-
-- **v1.32.x - v1.33.8**: Import map present, external pattern works
-- **v1.33.9+**: Import map removed, bundling required
-
-## Notes
-
-- [ComfyUI_frontend_vue_basic](https://github.com/jtydhr88/ComfyUI_frontend_vue_basic) has been updated to demonstrate the new bundled pattern
-- Issue #7267 documents the user-facing impact and migration discussion
-- Future Extension API v2 (Issue #4668) may provide alternative mechanisms for shared dependencies

docs/adr/README.md

@@ -14,7 +14,6 @@ An Architecture Decision Record captures an important architectural decision mad
 | [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Accepted | 2025-08-25 |
 | [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
 | [0004](0004-fork-primevue-ui-library.md) | Fork PrimeVue UI Library | Rejected | 2025-08-27 |
-| [0005](0005-remove-importmap-for-vue-extensions.md) | Remove Import Map for Vue Extensions | Accepted | 2025-12-13 |
 
 ## Creating a New ADR
 

eslint.config.ts

@@ -5,7 +5,7 @@ import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescrip
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
-import { configs as storybookConfigs } from 'eslint-plugin-storybook'
+import storybook from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
 import { defineConfig } from 'eslint/config'
@@ -109,8 +109,7 @@ export default defineConfig([
   // Difference in typecheck on CI vs Local
   pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
-  // @ts-expect-error Type incompatibility between storybook plugin and ESLint config types
-  storybookConfigs['flat/recommended'],
+  storybook.configs['flat/recommended'],
   // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
   importX.flatConfigs.recommended,
   // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types

global.d.ts

@@ -13,6 +13,8 @@ interface Window {
     max_upload_size?: number
     comfy_api_base_url?: string
     comfy_platform_base_url?: string
+    stripe_publishable_key?: string
+    stripe_pricing_table_id?: string
     firebase_config?: {
       apiKey: string
       authDomain: string

index.html

@@ -5,6 +5,8 @@
     <title>ComfyUI</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
+    <link rel="stylesheet" type="text/css" href="user.css" />
+    <link rel="stylesheet" type="text/css" href="api/userdata/user.css" />
     
     <!-- Fullscreen mode on mobile browsers -->
     <meta name="mobile-web-app-capable" content="yes">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.36.3",
+  "version": "1.35.6",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -40,7 +40,7 @@
     "preinstall": "pnpm dlx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
-    "storybook": "nx storybook",
+    "storybook": "nx storybook -p 6006",
     "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec nx e2e",
@@ -161,7 +161,6 @@
     "algoliasearch": "catalog:",
     "axios": "catalog:",
     "chart.js": "^4.5.0",
-    "cva": "catalog:",
     "dompurify": "^3.2.5",
     "dotenv": "catalog:",
     "es-toolkit": "^1.39.9",
@@ -176,7 +175,7 @@
     "pinia": "catalog:",
     "primeicons": "catalog:",
     "primevue": "catalog:",
-    "reka-ui": "catalog:",
+    "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",

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

@@ -235,7 +235,7 @@
   --brand-yellow: var(--color-electric-400);
   --brand-blue: var(--color-sapphire-700);
   --secondary-background: var(--color-smoke-200);
-  --secondary-background-hover: var(--color-smoke-400);
+  --secondary-background-hover: var(--color-smoke-200);
   --secondary-background-selected: var(--color-smoke-600);
   --base-background: var(--color-white);
   --primary-background: var(--color-azure-400);

packages/design-system/src/icons/nodeSlot2.svg

@@ -1,19 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <clipPath id="hollow">
-      <path
-    d="M -50 50
-       A 100 100, 0, 0, 1, 150 50
-       A 100 100, 0, 0, 1, -50 50
-       M 30 50
-       A 20 20, 0, 0, 0, 70 50
-       A 20 20, 0, 0, 0, 30 50"/>
-    </clipPath>
-  </defs>
-  <g clip-path="var(--shape)" stroke-width="4">
-    <path d="M 50 0 A 50 50, 0, 0, 1, 50 100" fill="var(--type1, red)"/>
-    <path d="M 50 100 A 50 50, 0, 0, 1, 50 0" fill="var(--type2, blue)"/>
-    <path d="M50 0L50 100" stroke="var(--inner-stroke, black)"/>
-    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
-  </g>
-</svg>

packages/design-system/src/icons/nodeSlot3.svg

@@ -1,20 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <clipPath id="hollow">
-        <path
-    d="M-50 50
-       A100 100 0 0 1 150 50
-       A100 100 0 0 1 -50 50
-       M30 50
-       A20 20 0 0 0 70 50
-       A20 20 0 0 0 30 50"/>
-    </clipPath>
-  </defs>
-  <g clip-path="var(--shape)" stroke-width="4">
-    <path d="M50 0A50 50 0 0 1 93 75L50 50" fill="var(--type1, red)"/>
-    <path d="M93 75A50 50 0 0 1 7 75L50 50" fill="var(--type2, blue)"/>
-    <path d="M7 75A50 50 0 0 1 50 0L50 50" fill="var(--type3, green)"/>
-    <path d="M50 50L50 0M50 50L93 75M50 50L7 75" stroke="var(--inner-stroke, black)"/>
-    <path d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2" fill="transparent" stroke="var(--outer-stroke, transparent)"/>
-  </g>
-</svg>

packages/tailwind-utils/src/index.ts

@@ -1,5 +1,4 @@
-import { clsx } from 'clsx'
-import type { ClassArray } from 'clsx'
+import clsx, { type ClassArray } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export type { ClassValue } from 'clsx'

pnpm-workspace.yaml

@@ -1,3 +1,7 @@
+packages:
+  - apps/**
+  - packages/**
+
 catalog:
   '@alloc/quick-lru': ^5.2.0
   '@comfyorg/comfyui-electron-types': 0.5.5
@@ -7,10 +11,10 @@ catalog:
   '@iconify/tailwind': ^1.1.3
   '@intlify/eslint-plugin-vue-i18n': ^4.1.0
   '@lobehub/i18n-cli': ^1.25.1
-  '@nx/eslint': 22.2.6
-  '@nx/playwright': 22.2.6
-  '@nx/storybook': 22.2.4
-  '@nx/vite': 22.2.6
+  '@nx/eslint': 21.4.1
+  '@nx/playwright': 21.4.1
+  '@nx/storybook': 21.4.1
+  '@nx/vite': 21.4.1
   '@pinia/testing': ^0.1.5
   '@playwright/test': ^1.52.0
   '@prettier/plugin-oxc': ^0.1.3
@@ -23,19 +27,19 @@ catalog:
   '@primevue/themes': ^4.2.5
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^8.48.0
-  '@storybook/addon-docs': ^10.1.9
-  '@storybook/vue3': ^10.1.9
-  '@storybook/vue3-vite': ^10.1.9
+  '@storybook/addon-docs': ^9.1.1
+  '@storybook/vue3': ^9.1.1
+  '@storybook/vue3-vite': ^9.1.1
   '@tailwindcss/vite': ^4.1.12
   '@trivago/prettier-plugin-sort-imports': ^5.2.0
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
-  '@types/node': ^24.1.0
+  '@types/node': ^20.14.8
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
-  '@vitejs/plugin-vue': ^6.0.0
+  '@vitejs/plugin-vue': ^5.1.4
   '@vitest/coverage-v8': ^3.2.4
-  '@vitest/ui': ^3.2.0
+  '@vitest/ui': ^3.0.0
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^11.0.0
   '@vueuse/integrations': ^13.9.0
@@ -43,7 +47,6 @@ catalog:
   algoliasearch: ^5.21.0
   axios: ^1.8.2
   cross-env: ^10.1.0
-  cva: 1.0.0-beta.4
   dotenv: ^16.4.5
   eslint: ^9.39.1
   eslint-config-prettier: ^10.1.8
@@ -51,22 +54,22 @@ catalog:
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.25.0
   eslint-plugin-prettier: ^5.5.4
-  eslint-plugin-storybook: ^10.1.9
+  eslint-plugin-storybook: ^9.1.16
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   firebase: ^11.6.0
   globals: ^15.9.0
   happy-dom: ^15.11.0
-  husky: ^9.1.7
-  jiti: 2.6.1
+  husky: ^9.0.11
+  jiti: 2.4.2
   jsdom: ^26.1.0
-  knip: ^5.75.1
-  lint-staged: ^16.2.7
+  knip: ^5.62.0
+  lint-staged: ^15.5.2
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
-  nx: 22.2.6
-  oxlint: ^1.33.0
-  oxlint-tsgolint: ^0.9.1
+  nx: 21.4.1
+  oxlint: ^1.32.0
+  oxlint-tsgolint: ^0.8.4
   picocolors: ^1.1.1
   pinia: ^2.1.7
   postcss-html: ^1.8.0
@@ -74,9 +77,8 @@ catalog:
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
-  reka-ui: ^2.5.0
   rollup-plugin-visualizer: ^6.0.4
-  storybook: ^10.1.9
+  storybook: ^9.1.16
   stylelint: ^16.26.1
   tailwindcss: ^4.1.12
   tailwindcss-primeui: ^0.6.1
@@ -85,13 +87,13 @@ catalog:
   typegpu: ^0.8.2
   typescript: ^5.9.3
   typescript-eslint: ^8.49.0
-  unplugin-icons: ^22.5.0
+  unplugin-icons: ^0.22.0
   unplugin-typegpu: 0.8.0
-  unplugin-vue-components: ^30.0.0
-  vite: ^7.3.0
+  unplugin-vue-components: ^0.28.0
+  vite: ^5.4.19
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
-  vite-plugin-vue-devtools: ^8.0.0
+  vite-plugin-vue-devtools: ^7.7.6
   vitest: ^3.2.4
   vue: ^3.5.13
   vue-component-type-helpers: ^3.0.7
@@ -104,12 +106,15 @@ catalog:
   zod: ^3.23.8
   zod-to-json-schema: ^3.24.1
   zod-validation-error: ^3.3.0
+
 cleanupUnusedCatalogs: true
+
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs
   - unrs-resolver
   - vue-demi
+
 onlyBuiltDependencies:
   - '@playwright/browser-chromium'
   - '@playwright/browser-firefox'
@@ -119,8 +124,6 @@ onlyBuiltDependencies:
   - esbuild
   - nx
   - oxc-resolver
+
 overrides:
   '@types/eslint': '-'
-packages:
-  - apps/**
-  - packages/**

src/components/TopMenuSection.vue

@@ -1,33 +1,14 @@
 <template>
-  <div
-    v-if="!workspaceStore.focusMode"
-    class="ml-1 flex gap-x-0.5 pt-1"
-    @mouseenter="isTopMenuHovered = true"
-    @mouseleave="isTopMenuHovered = false"
-  >
-    <div class="min-w-0 flex-1">
-      <SubgraphBreadcrumb />
-    </div>
+  <div v-if="!workspaceStore.focusMode" class="ml-1 flex flex-col gap-1 pt-1">
+    <div class="flex gap-x-0.5">
+      <div class="min-w-0 flex-1">
+        <SubgraphBreadcrumb />
+      </div>
 
-    <div class="mx-1 flex flex-col items-end gap-1">
-      <div class="flex items-center gap-2">
+      <div class="mx-1 flex flex-col items-end gap-1">
         <div
-          v-if="managerState.shouldShowManagerButtons.value && isDesktop"
-          class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
-        >
-          <Button
-            v-tooltip.bottom="customNodesManagerTooltipConfig"
-            variant="secondary"
-            size="icon"
-            :aria-label="t('menu.customNodesManager')"
-            @click="openCustomNodeManager"
-          >
-            <i class="icon-[lucide--puzzle] size-4" />
-          </Button>
-        </div>
-
-        <div
-          class="actionbar-container pointer-events-auto flex gap-2 h-12 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
+          ref="actionbarContainerRef"
+          class="actionbar-container relative pointer-events-auto flex h-12 items-center overflow-hidden 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 -->
@@ -35,90 +16,81 @@
             ref="legacyCommandsContainerRef"
             class="[&:not(:has(*>*:not(:empty)))]:hidden"
           ></div>
-          <ComfyActionbar />
-          <Button
-            v-tooltip.bottom="queueHistoryTooltipConfig"
-            type="destructive"
-            size="icon"
-            :aria-pressed="isQueueOverlayExpanded"
-            :aria-label="
-              t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-            "
-            @click="toggleQueueOverlay"
-          >
-            <i class="icon-[lucide--history] size-4" />
-            <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>
-          </Button>
+          <ComfyActionbar
+            v-model:docked="isActionbarDocked"
+            v-model:queue-overlay-expanded="isQueueOverlayExpanded"
+            :top-menu-container="actionbarContainerRef"
+          />
           <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
           <LoginButton v-else-if="isDesktop" />
-          <Button
+          <IconButton
             v-if="!isRightSidePanelOpen"
             v-tooltip.bottom="rightSidePanelTooltipConfig"
-            type="secondary"
-            size="icon"
+            type="transparent"
+            size="sm"
+            class="mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
             :aria-label="t('rightSidePanel.togglePanel')"
             @click="rightSidePanelStore.togglePanel"
           >
             <i class="icon-[lucide--panel-right] size-4" />
-          </Button>
+          </IconButton>
         </div>
+        <QueueProgressOverlay v-model:expanded="isQueueOverlayExpanded" />
       </div>
-      <QueueProgressOverlay
-        v-model:expanded="isQueueOverlayExpanded"
-        :menu-hovered="isTopMenuHovered"
+    </div>
+
+    <div>
+      <QueueInlineProgressSummary
+        v-if="!isActionbarFloating"
+        class="pr-1"
+        :hidden="isQueueOverlayExpanded"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
+import IconButton from '@/components/button/IconButton.vue'
+import QueueInlineProgressSummary from '@/components/queue/QueueInlineProgressSummary.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 Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
-import { useQueueStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
-import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
-import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
-const managerState = useManagerState()
+const settingsStore = useSettingStore()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
 const { t } = useI18n()
-const { toastErrorHandler } = useErrorHandling()
 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 actionbarContainerRef = ref<HTMLElement>()
+const isActionbarDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
+const actionbarPosition = computed(() => settingsStore.get('Comfy.UseNewMenu'))
+const isActionbarEnabled = computed(
+  () => actionbarPosition.value !== 'Disabled'
 )
-const customNodesManagerTooltipConfig = computed(() =>
-  buildTooltipConfig(t('menu.customNodesManager'))
+const isActionbarFloating = computed(
+  () => isActionbarEnabled.value && !isActionbarDocked.value
 )
 
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
+
 const rightSidePanelTooltipConfig = computed(() =>
   buildTooltipConfig(t('rightSidePanel.togglePanel'))
 )
@@ -131,24 +103,10 @@ onMounted(() => {
     legacyCommandsContainerRef.value.appendChild(app.menu.element)
   }
 })
-
-const toggleQueueOverlay = () => {
-  isQueueOverlayExpanded.value = !isQueueOverlayExpanded.value
-}
-
-const openCustomNodeManager = async () => {
-  try {
-    await managerState.openManager({
-      initialTab: ManagerTab.All,
-      showToastOnLegacyError: false
-    })
-  } catch (error) {
-    try {
-      toastErrorHandler(error)
-    } catch (toastError) {
-      console.error(error)
-      console.error(toastError)
-    }
-  }
-}
 </script>
+
+<style scoped>
+.actionbar-container {
+  background-color: var(--comfy-menu-bg);
+}
+</style>

src/components/actionbar/ComfyActionbar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full items-center">
     <div
-      v-if="isDragging && !isDocked"
+      v-if="isDragging && !docked"
       :class="actionbarClass"
       @mouseenter="onMouseEnterDropZone"
       @mouseleave="onMouseLeaveDropZone"
@@ -9,45 +9,101 @@
       {{ t('actionbar.dockToTop') }}
     </div>
 
-    <Panel
-      class="pointer-events-auto"
-      :style="style"
+    <div
+      ref="actionbarWrapperRef"
       :class="panelClass"
-      :pt="{
-        header: { class: 'hidden' },
-        content: { class: isDocked ? 'p-0' : 'p-1' }
-      }"
+      :style="style"
+      class="flex flex-col items-stretch"
     >
-      <div ref="panelRef" class="flex items-center select-none gap-2">
-        <span
-          ref="dragHandleRef"
-          :class="
-            cn(
-              'drag-handle cursor-grab w-3 h-max',
-              isDragging && 'cursor-grabbing'
-            )
-          "
-        />
-        <Suspense @resolve="comfyRunButtonResolved">
-          <ComfyRunButton />
-        </Suspense>
-        <Button
-          v-tooltip.bottom="cancelJobTooltipConfig"
-          variant="destructive"
-          size="icon"
-          :disabled="isExecutionIdle"
-          :aria-label="t('menu.interrupt')"
-          @click="cancelCurrentJob"
+      <Panel
+        :class="
+          cn(
+            panelRootClass,
+            isDragging ? 'pointer-events-none' : 'pointer-events-auto'
+          )
+        "
+        :pt="{
+          header: { class: 'hidden' },
+          content: { class: 'p-0' }
+        }"
+      >
+        <div
+          ref="panelRef"
+          :class="cn('flex flex-col', docked ? 'p-0' : 'p-1')"
         >
-          <i class="icon-[lucide--x] size-4" />
-        </Button>
+          <div class="flex items-center select-none">
+            <span
+              ref="dragHandleRef"
+              :class="
+                cn(
+                  'drag-handle cursor-grab w-3 h-max mr-2',
+                  isDragging && 'cursor-grabbing'
+                )
+              "
+            />
+
+            <Suspense @resolve="comfyRunButtonResolved">
+              <ComfyRunButton />
+            </Suspense>
+            <IconButton
+              v-tooltip.bottom="cancelJobTooltipConfig"
+              type="transparent"
+              size="sm"
+              class="ml-2 bg-destructive-background text-base-foreground transition-colors duration-200 ease-in-out hover:bg-destructive-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-destructive-background"
+              :disabled="isExecutionIdle"
+              :aria-label="t('menu.interrupt')"
+              @click="cancelCurrentJob"
+            >
+              <i class="icon-[lucide--x] size-4" />
+            </IconButton>
+            <IconTextButton
+              v-tooltip.bottom="queueHistoryTooltipConfig"
+              size="sm"
+              type="secondary"
+              icon-position="right"
+              data-testid="queue-toggle-button"
+              class="ml-2 h-8 border-0 px-3 text-sm font-medium text-base-foreground cursor-pointer"
+              :aria-pressed="props.queueOverlayExpanded"
+              :aria-label="queueToggleLabel"
+              :label="queueToggleLabel"
+              @click="toggleQueueOverlay"
+            >
+              <!-- Custom implementation for static 1-2 digit shifts -->
+              <span class="flex items-center gap-1">
+                <span
+                  class="inline-flex min-w-[2ch] justify-center tabular-nums text-center"
+                >
+                  {{ queuedCount }}
+                </span>
+                <span>{{ queuedSuffix }}</span>
+              </span>
+              <template #icon>
+                <i class="icon-[lucide--chevron-down] size-4" />
+              </template>
+            </IconTextButton>
+          </div>
+        </div>
+      </Panel>
+      <div v-if="isFloating" class="flex justify-end pt-1 pr-1">
+        <QueueInlineProgressSummary
+          class="pr-1"
+          :hidden="props.queueOverlayExpanded"
+        />
       </div>
-    </Panel>
+    </div>
+
+    <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
+      <QueueInlineProgress
+        :hidden="props.queueOverlayExpanded"
+        data-testid="queue-inline-progress"
+      />
+    </Teleport>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {
+  unrefElement,
   useDraggable,
   useEventListener,
   useLocalStorage,
@@ -59,33 +115,57 @@ import Panel from 'primevue/panel'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
+import QueueInlineProgressSummary from '@/components/queue/QueueInlineProgressSummary.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useQueueStore } from '@/stores/queueStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
 
-const settingsStore = useSettingStore()
-const commandStore = useCommandStore()
+const props = defineProps<{
+  queueOverlayExpanded: boolean
+  topMenuContainer?: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:queueOverlayExpanded', value: boolean): void
+}>()
+
 const { t } = useI18n()
-const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
+
+const settingsStore = useSettingStore()
+const executionStore = useExecutionStore()
+const commandStore = useCommandStore()
+const queueStore = useQueueStore()
 
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
 const visible = computed(() => position.value !== 'Disabled')
 
 const tabContainer = document.querySelector('.workflow-tabs-container')
+const actionbarWrapperRef = ref<HTMLElement | null>(null)
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
-const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
+const docked = defineModel<boolean>('docked', { default: false })
 const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
   x: 0,
   y: 0
 })
-const { x, y, style, isDragging } = useDraggable(panelRef, {
+const wrapperElement = computed(() => {
+  const element = unrefElement(actionbarWrapperRef)
+  return element instanceof HTMLElement ? element : null
+})
+const panelElement = computed(() => {
+  const element = unrefElement(panelRef)
+  return element instanceof HTMLElement ? element : null
+})
+const { x, y, style, isDragging } = useDraggable(wrapperElement, {
   initialValue: { x: 0, y: 0 },
   handle: dragHandleRef,
   containerElement: document.body,
@@ -98,6 +178,33 @@ const { x, y, style, isDragging } = useDraggable(panelRef, {
   }
 })
 
+// Queue and Execution logic
+const { isIdle: isExecutionIdle } = storeToRefs(executionStore)
+const queuedCount = computed(() => queueStore.pendingTasks.length)
+const queueToggleLabel = computed(() =>
+  t('sideToolbar.queueProgressOverlay.toggleLabel', {
+    count: queuedCount.value
+  })
+)
+const queuedSuffix = computed(() =>
+  t('sideToolbar.queueProgressOverlay.queuedSuffix')
+)
+const queueHistoryTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
+)
+const cancelJobTooltipConfig = computed(() =>
+  buildTooltipConfig(t('menu.interrupt'))
+)
+
+const toggleQueueOverlay = () => {
+  emit('update:queueOverlayExpanded', !props.queueOverlayExpanded)
+}
+
+const cancelCurrentJob = async () => {
+  if (isExecutionIdle.value) return
+  await commandStore.execute('Comfy.Interrupt')
+}
+
 // Update storedPosition when x or y changes
 watchDebounced(
   [x, y],
@@ -109,11 +216,12 @@ watchDebounced(
 
 // Set initial position to bottom center
 const setInitialPosition = () => {
-  if (panelRef.value) {
+  const containerEl = wrapperElement.value
+  if (containerEl) {
     const screenWidth = window.innerWidth
     const screenHeight = window.innerHeight
-    const menuWidth = panelRef.value.offsetWidth
-    const menuHeight = panelRef.value.offsetHeight
+    const menuWidth = containerEl.offsetWidth
+    const menuHeight = containerEl.offsetHeight
 
     if (menuWidth === 0 || menuHeight === 0) {
       return
@@ -189,11 +297,12 @@ watch(
 )
 
 const adjustMenuPosition = () => {
-  if (panelRef.value) {
+  const containerEl = wrapperElement.value
+  if (containerEl) {
     const screenWidth = window.innerWidth
     const screenHeight = window.innerHeight
-    const menuWidth = panelRef.value.offsetWidth
-    const menuHeight = panelRef.value.offsetHeight
+    const menuWidth = containerEl.offsetWidth
+    const menuHeight = containerEl.offsetHeight
 
     // Calculate distances to all edges
     const distanceLeft = lastDragState.value.x
@@ -264,31 +373,27 @@ const onMouseLeaveDropZone = () => {
 watch(isDragging, (dragging) => {
   if (dragging) {
     // Starting to drag - undock if docked
-    if (isDocked.value) {
-      isDocked.value = false
+    if (docked.value) {
+      docked.value = false
     }
   } else {
     // Stopped dragging - dock if mouse is over drop zone
     if (isMouseOverDropZone.value) {
-      isDocked.value = true
+      docked.value = true
     }
     // Reset drop zone state
     isMouseOverDropZone.value = false
   }
 })
-
-const cancelJobTooltipConfig = computed(() =>
-  buildTooltipConfig(t('menu.interrupt'))
-)
-
-const cancelCurrentJob = async () => {
-  if (isExecutionIdle.value) return
-  await commandStore.execute('Comfy.Interrupt')
-}
-
+const isFloating = computed(() => visible.value && !docked.value)
+const inlineProgressTarget = computed(() => {
+  if (!visible.value) return null
+  if (isFloating.value) return panelElement.value
+  return props.topMenuContainer ?? null
+})
 const actionbarClass = computed(() =>
   cn(
-    'w-[200px] border-dashed border-blue-500 opacity-80',
+    'w-[300px] 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',
@@ -298,11 +403,21 @@ const actionbarClass = computed(() =>
 )
 const panelClass = computed(() =>
   cn(
-    'actionbar pointer-events-auto z-1300',
-    isDragging.value && 'select-none pointer-events-none',
-    isDocked.value
-      ? 'p-0 static border-none bg-transparent'
-      : 'fixed shadow-interface'
+    'actionbar z-1300 overflow-hidden rounded-[var(--p-panel-border-radius)]',
+    docked.value ? 'p-0 static mr-2 border-none bg-transparent' : 'fixed',
+    isDragging.value ? 'select-none pointer-events-none' : 'pointer-events-auto'
   )
 )
+const panelRootClass = computed(() =>
+  cn(
+    'relative overflow-hidden rounded-[var(--p-panel-border-radius)]',
+    docked.value
+      ? 'border-none shadow-none bg-transparent'
+      : 'border border-interface-stroke shadow-interface'
+  )
+)
+
+defineExpose({
+  isFloating
+})
 </script>

src/components/button/IconButton.stories.ts

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import IconButton from './IconButton.vue'
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/Button/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md']
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'transparent']
+    },
+    border: {
+      control: 'boolean',
+      description: 'Toggle border attribute'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Toggle disable status'
+    },
+    onClick: { action: 'clicked' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { IconButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <i class="icon-[lucide--trophy] size-4" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'primary',
+    size: 'md'
+  }
+}
+
+export const Secondary: Story = {
+  render: (args) => ({
+    components: { IconButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <i class="icon-[lucide--settings] size-4" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'secondary',
+    size: 'md'
+  }
+}
+
+export const Transparent: Story = {
+  render: (args) => ({
+    components: { IconButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <i class="icon-[lucide--x] size-4" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'transparent',
+    size: 'md'
+  }
+}
+
+export const Small: Story = {
+  render: (args) => ({
+    components: { IconButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <IconButton v-bind="args">
+        <i class="icon-[lucide--bell] size-3" />
+      </IconButton>
+    `
+  }),
+  args: {
+    type: 'secondary',
+    size: 'sm'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { IconButton },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-2 items-center">
+          <IconButton type="primary" size="sm" @click="() => {}">
+            <i class="icon-[lucide--trophy] size-3" />
+          </IconButton>
+          <IconButton type="primary" size="md" @click="() => {}">
+            <i class="icon-[lucide--trophy] size-4" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="secondary" size="sm" @click="() => {}">
+            <i class="icon-[lucide--settings] size-3" />
+          </IconButton>
+          <IconButton type="secondary" size="md" @click="() => {}">
+            <i class="icon-[lucide--settings] size-4" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="transparent" size="sm" @click="() => {}">
+            <i class="icon-[lucide--x] size-3" />
+          </IconButton>
+          <IconButton type="transparent" size="md" @click="() => {}">
+            <i class="icon-[lucide--x] size-4" />
+          </IconButton>
+        </div>
+        <div class="flex gap-2 items-center">
+          <IconButton type="primary" size="md" @click="() => {}">
+            <i class="icon-[lucide--bell] size-4" />
+          </IconButton>
+          <IconButton type="secondary" size="md" @click="() => {}">
+            <i class="icon-[lucide--heart] size-4" />
+          </IconButton>
+          <IconButton type="transparent" size="md" @click="() => {}">
+            <i class="icon-[lucide--download] size-4" />
+          </IconButton>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true }
+  }
+}

src/components/button/IconButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <slot></slot>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { BaseButtonProps } from '@/types/buttonTypes'
+import {
+  getBaseButtonClasses,
+  getBorderButtonTypeClasses,
+  getButtonTypeClasses,
+  getIconButtonSizeClasses
+} from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+interface IconButtonProps extends BaseButtonProps {
+  onClick?: (event: MouseEvent) => void
+}
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const {
+  size = 'md',
+  type = 'secondary',
+  border = false,
+  disabled = false,
+  class: className,
+  onClick
+} = defineProps<IconButtonProps>()
+
+const buttonStyle = computed(() => {
+  const baseClasses = `${getBaseButtonClasses()} p-0`
+  const sizeClasses = getIconButtonSizeClasses(size)
+  const typeClasses = border
+    ? getBorderButtonTypeClasses(type)
+    : getButtonTypeClasses(type)
+
+  return cn(baseClasses, sizeClasses, typeClasses, className)
+})
+</script>

src/components/button/IconGroup.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import Button from '@/components/ui/button/Button.vue'
+import IconButton from './IconButton.vue'
 import IconGroup from './IconGroup.vue'
 
 const meta: Meta<typeof IconGroup> = {
@@ -16,18 +16,18 @@ type Story = StoryObj<typeof IconGroup>
 
 export const Basic: Story = {
   render: () => ({
-    components: { IconGroup, Button },
+    components: { IconGroup, IconButton },
     template: `
       <IconGroup>
-        <Button size="icon" @click="console.log('Hello World!!')">
+        <IconButton @click="console.log('Hello World!!')">
           <i class="icon-[lucide--heart] size-4" />
-        </Button>
-        <Button size="icon" @click="console.log('Hello World!!')">
+        </IconButton>
+        <IconButton @click="console.log('Hello World!!')">
           <i class="icon-[lucide--download] size-4" />
-        </Button>
-        <Button size="icon" @click="console.log('Hello World!!')">
+        </IconButton>
+        <IconButton @click="console.log('Hello World!!')">
           <i class="icon-[lucide--external-link] size-4" />
-        </Button>
+        </IconButton>
       </IconGroup>
     `
   })

src/components/button/IconTextButton.vue

@@ -7,14 +7,15 @@
     @click="onClick"
   >
     <slot v-if="iconPosition !== 'right'" name="icon"></slot>
-    <span>{{ label }}</span>
+    <slot v-if="hasDefaultSlot"></slot>
+    <span v-else>{{ label }}</span>
     <slot v-if="iconPosition === 'right'" name="icon"></slot>
   </Button>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 
 import type { BaseButtonProps } from '@/types/buttonTypes'
 import {
@@ -46,6 +47,9 @@ const {
   onClick
 } = defineProps<IconTextButtonProps>()
 
+const slots = useSlots()
+const hasDefaultSlot = computed(() => Boolean(slots.default?.().length))
+
 const buttonStyle = computed(() => {
   const baseClasses = `${getBaseButtonClasses()} justify-start gap-2`
   const sizeClasses = getButtonSizeClasses(size)

src/components/button/MoreButton.vue

@@ -1,17 +1,9 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button size="icon" variant="secondary" @click="popover?.toggle">
-      <i
-        :class="
-          cn(
-            !isVertical
-              ? 'icon-[lucide--ellipsis]'
-              : 'icon-[lucide--more-vertical]',
-            'text-sm'
-          )
-        "
-      />
-    </Button>
+    <IconButton :size="size" :type="type" @click="popover?.toggle">
+      <i v-if="!isVertical" class="icon-[lucide--ellipsis] text-sm" />
+      <i v-else class="icon-[lucide--more-vertical] text-sm" />
+    </IconButton>
 
     <Popover
       ref="popover"
@@ -57,14 +49,20 @@
 import Popover from 'primevue/popover'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
+import type { BaseButtonProps } from '@/types/buttonTypes'
 import { cn } from '@/utils/tailwindUtil'
 
-interface MoreButtonProps {
+import IconButton from './IconButton.vue'
+
+interface MoreButtonProps extends BaseButtonProps {
   isVertical?: boolean
 }
 
-const { isVertical = false } = defineProps<MoreButtonProps>()
+const {
+  size = 'md',
+  type = 'secondary',
+  isVertical = false
+} = defineProps<MoreButtonProps>()
 
 defineEmits<{
   menuOpened: []

src/components/button/TextButton.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import TextButton from './TextButton.vue'
+
+const meta: Meta<typeof TextButton> = {
+  title: 'Components/Button/TextButton',
+  component: TextButton,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'Click me'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md'],
+      defaultValue: 'md'
+    },
+    border: {
+      control: 'boolean',
+      description: 'Toggle border attribute'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Toggle disable status'
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'transparent'],
+      defaultValue: 'primary'
+    },
+    onClick: { action: 'clicked' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    type: 'primary',
+    size: 'md'
+  }
+}
+
+export const Secondary: Story = {
+  args: {
+    label: 'Secondary Button',
+    type: 'secondary',
+    size: 'md'
+  }
+}
+
+export const Transparent: Story = {
+  args: {
+    label: 'Transparent Button',
+    type: 'transparent',
+    size: 'md'
+  }
+}
+
+export const Small: Story = {
+  args: {
+    label: 'Small Button',
+    type: 'primary',
+    size: 'sm'
+  }
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { TextButton },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex gap-2 items-center">
+          <TextButton label="Primary Small" type="primary" size="sm" @click="() => {}" />
+          <TextButton label="Primary Medium" type="primary" size="md" @click="() => {}" />
+        </div>
+        <div class="flex gap-2 items-center">
+          <TextButton label="Secondary Small" type="secondary" size="sm" @click="() => {}" />
+          <TextButton label="Secondary Medium" type="secondary" size="md" @click="() => {}" />
+        </div>
+        <div class="flex gap-2 items-center">
+          <TextButton label="Transparent Small" type="transparent" size="sm" @click="() => {}" />
+          <TextButton label="Transparent Medium" type="transparent" size="md" @click="() => {}" />
+        </div>
+      </div>
+    `
+  })
+}

src/components/button/TextButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <Button
+    v-bind="$attrs"
+    unstyled
+    :class="buttonStyle"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <span>{{ label }}</span>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { BaseButtonProps } from '@/types/buttonTypes'
+import {
+  getBaseButtonClasses,
+  getBorderButtonTypeClasses,
+  getButtonSizeClasses,
+  getButtonTypeClasses
+} from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+interface TextButtonProps extends BaseButtonProps {
+  label: string
+  onClick: () => void
+}
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const {
+  size = 'md',
+  type = 'primary',
+  border = false,
+  disabled = false,
+  class: className,
+  label,
+  onClick
+} = defineProps<TextButtonProps>()
+
+const buttonStyle = computed(() => {
+  const baseClasses = getBaseButtonClasses()
+  const sizeClasses = getButtonSizeClasses(size)
+  const typeClasses = border
+    ? getBorderButtonTypeClasses(type)
+    : getButtonTypeClasses(type)
+
+  return cn(baseClasses, sizeClasses, typeClasses, className)
+})
+</script>

src/components/card/Card.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
+import IconButton from '../button/IconButton.vue'
 import SquareChip from '../chip/SquareChip.vue'
 import CardBottom from './CardBottom.vue'
 import CardContainer from './CardContainer.vue'
@@ -173,7 +173,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     CardBottom,
     CardTitle,
     CardDescription,
-    Button,
+    IconButton,
     SquareChip
   },
   setup() {
@@ -222,19 +222,19 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showTopRight" #top-right>
-              <Button
+              <IconButton
                 class="!bg-white/90 !text-neutral-900"
                 @click="() => console.log('Info clicked')"
               >
                 <i class="icon-[lucide--info] size-4" />
-              </Button>
-              <Button
+              </IconButton>
+              <IconButton
                 class="!bg-white/90"
                 :class="favorited ? '!text-red-500' : '!text-neutral-900'"
                 @click="toggleFavorite"
               >
                 <i class="icon-[lucide--heart] size-4" :class="favorited ? 'fill-current' : ''" />
-              </Button>
+              </IconButton>
             </template>
             
             <template v-if="args.showBottomLeft" #bottom-left>

src/components/common/LazyImage.vue

@@ -12,6 +12,7 @@
     />
     <img
       v-if="cachedSrc"
+      ref="imageRef"
       :src="cachedSrc"
       :alt="alt"
       draggable="false"
@@ -60,6 +61,7 @@ const {
 }>()
 
 const containerRef = ref<HTMLElement | null>(null)
+const imageRef = ref<HTMLImageElement | null>(null)
 const isIntersecting = ref(false)
 const isImageLoaded = ref(false)
 const hasError = ref(false)

src/components/common/SearchBox.vue

@@ -17,25 +17,22 @@
       class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm"
       :aria-label="placeholder"
     />
-    <Button
+    <IconButton
       v-if="filterIcon"
-      size="icon"
-      variant="textonly"
-      class="filter-button absolute right-0 inset-y-0 m-0 p-0"
+      class="p-inputicon filter-button absolute right-0 inset-y-0 h-full m-0 p-0"
+      :icon="filterIcon"
+      severity="contrast"
       @click="$emit('showFilter', $event)"
-    >
-      <i :class="filterIcon" />
-    </Button>
+    />
     <InputIcon v-if="!modelValue" :class="icon" />
     <Button
       v-if="modelValue"
-      class="clear-button absolute left-0"
-      variant="textonly"
-      size="icon"
+      class="p-inputicon clear-button"
+      icon="pi pi-times"
+      text
+      severity="contrast"
       @click="modelValue = ''"
-    >
-      <i class="icon-[lucide--x] size-4" />
-    </Button>
+    />
   </div>
   <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
     <SearchFilterChip
@@ -52,12 +49,12 @@
 <script setup lang="ts" generic="TFilter extends SearchFilter">
 import { cn } from '@comfyorg/tailwind-utils'
 import { watchDebounced } from '@vueuse/core'
+import Button from 'primevue/button'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
 import { computed, ref } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
-
+import IconButton from '../button/IconButton.vue'
 import type { SearchFilter } from './SearchFilterChip.vue'
 import SearchFilterChip from './SearchFilterChip.vue'
 
@@ -128,4 +125,8 @@ const wrapperStyle = computed(() => {
 :deep(.p-inputtext) {
   --p-form-field-padding-x: 0.625rem;
 }
+
+.p-button.p-inputicon {
+  @apply p-0 w-auto border-none;
+}
 </style>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -301,16 +301,16 @@
                       v-if="template.tutorialUrl"
                       class="flex flex-col-reverse justify-center"
                     >
-                      <Button
+                      <IconButton
                         v-if="hoveredTemplate === template.name"
                         v-tooltip.bottom="$t('g.seeTutorial')"
                         v-bind="$attrs"
-                        variant="inverted"
-                        size="icon"
+                        type="primary"
+                        size="sm"
                         @click.stop="openTutorial(template)"
                       >
                         <i class="icon-[lucide--info] size-4" />
-                      </Button>
+                      </IconButton>
                     </div>
                   </div>
                 </div>
@@ -382,6 +382,7 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
@@ -394,7 +395,6 @@ import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
 import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
 import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
-import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'

src/components/dialog/confirm/ConfirmFooter.vue

@@ -1,16 +1,19 @@
 <template>
   <section class="w-full flex gap-2 justify-end px-2 pb-2">
-    <Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
-      {{ cancelTextX }}
-    </Button>
-    <Button
+    <TextButton
+      :label="cancelTextX"
       :disabled
-      variant="textonly"
+      type="transparent"
+      autofocus
+      @click="$emit('cancel')"
+    />
+    <TextButton
+      :label="confirmTextX"
+      :disabled
+      type="transparent"
       :class="confirmClass"
       @click="$emit('confirm')"
-    >
-      {{ confirmTextX }}
-    </Button>
+    />
   </section>
 </template>
 <script setup lang="ts">
@@ -18,7 +21,7 @@ import { computed, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
+import TextButton from '@/components/button/TextButton.vue'
 
 const { t } = useI18n()
 

src/components/dialog/content/MissingNodesFooter.vue

@@ -18,16 +18,22 @@
         <i class="icon-[lucide--info]"></i>
       </template>
     </IconTextButton>
-    <Button variant="secondary" size="md" @click="handleGotItClick">{{
-      $t('missingNodes.cloud.gotIt')
-    }}</Button>
+    <TextButton
+      :label="$t('missingNodes.cloud.gotIt')"
+      type="secondary"
+      size="md"
+      @click="handleGotItClick"
+    />
   </div>
 
   <!-- OSS mode: Open Manager + Install All buttons -->
   <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <Button variant="textonly" size="sm" @click="openManager">{{
-      $t('g.openManager')
-    }}</Button>
+    <TextButton
+      :label="$t('g.openManager')"
+      type="transparent"
+      size="sm"
+      @click="openManager"
+    />
     <PackInstallButton
       v-if="showInstallAllButton"
       type="secondary"
@@ -51,7 +57,7 @@ import { computed, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import Button from '@/components/ui/button/Button.vue'
+import TextButton from '@/components/button/TextButton.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'

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

@@ -139,7 +139,7 @@ interface CreditHistoryItemData {
   isPositive: boolean
 }
 
-const { buildDocsUrl, docsPaths } = useExternalLink()
+const { buildDocsUrl } = useExternalLink()
 const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
@@ -194,7 +194,9 @@ const handleFaqClick = () => {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
+    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
+      includeLocale: true
+    }),
     '_blank'
   )
 }

src/components/dialog/header/SettingDialogHeader.vue

@@ -15,7 +15,9 @@
 <script setup lang="ts">
 import Tag from 'primevue/tag'
 
-import { isStaging } from '@/config/staging'
+// Global variable from vite build defined in global.d.ts
+// eslint-disable-next-line no-undef
+const isStaging = !__USE_PROD_CONFIG__
 </script>
 
 <style scoped>

src/components/graph/GraphCanvas.vue

@@ -76,8 +76,8 @@
     />
   </TransformPane>
 
-  <!-- Selection rectangle overlay - rendered in DOM layer to appear above DOM widgets -->
-  <SelectionRectangle v-if="comfyAppReady" />
+  <!-- Selection rectangle overlay for Vue nodes mode -->
+  <SelectionRectangle v-if="shouldRenderVueNodes && comfyAppReady" />
 
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
@@ -87,6 +87,7 @@
   <template v-if="comfyAppReady">
     <TitleEditor />
     <SelectionToolbox v-if="selectionToolboxEnabled" />
+    <NodeOptions />
     <!-- Render legacy DOM widgets only when Vue nodes are disabled -->
     <DomWidgets v-if="!shouldRenderVueNodes" />
   </template>
@@ -114,6 +115,7 @@ import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
+import NodeOptions from '@/components/graph/selectionToolbox/NodeOptions.vue'
 import NodePropertiesPanel from '@/components/rightSidePanel/RightSidePanel.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'

src/components/graph/GraphCanvasMenu.vue

@@ -10,7 +10,7 @@
     ></div>
 
     <ButtonGroup
-      class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
+      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
       :style="{
         ...stringifiedMinimapStyles.buttonGroupStyles
       }"

src/components/graph/NodeContextMenu.vue

@@ -1,272 +0,0 @@
-<template>
-  <ContextMenu
-    ref="contextMenu"
-    :model="menuItems"
-    class="max-h-[80vh] md:max-h-none overflow-y-auto md:overflow-y-visible"
-    @show="onMenuShow"
-    @hide="onMenuHide"
-  >
-    <template #item="{ item, props, hasSubmenu }">
-      <a
-        v-bind="props.action"
-        class="flex items-center gap-2 px-3 py-1.5"
-        @click="item.isColorSubmenu ? showColorPopover($event) : undefined"
-      >
-        <i v-if="item.icon" :class="[item.icon, 'size-4']" />
-        <span class="flex-1">{{ item.label }}</span>
-        <span
-          v-if="item.shortcut"
-          class="flex h-3.5 min-w-3.5 items-center justify-center rounded bg-interface-menu-keybind-surface-default px-1 py-0 text-xs"
-        >
-          {{ item.shortcut }}
-        </span>
-        <i
-          v-if="hasSubmenu || item.isColorSubmenu"
-          class="icon-[lucide--chevron-right] size-4 opacity-60"
-        />
-      </a>
-    </template>
-  </ContextMenu>
-
-  <!-- Color picker menu (custom with color circles) -->
-  <ColorPickerMenu
-    v-if="colorOption"
-    ref="colorPickerMenu"
-    key="color-picker-menu"
-    :option="colorOption"
-    @submenu-click="handleColorSelect"
-  />
-</template>
-
-<script setup lang="ts">
-import { useElementBounding, useEventListener, useRafFn } from '@vueuse/core'
-import ContextMenu from 'primevue/contextmenu'
-import type { MenuItem } from 'primevue/menuitem'
-import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
-
-import {
-  registerNodeOptionsInstance,
-  useMoreOptionsMenu
-} from '@/composables/graph/useMoreOptionsMenu'
-import type {
-  MenuOption,
-  SubMenuOption
-} from '@/composables/graph/useMoreOptionsMenu'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-
-import ColorPickerMenu from './selectionToolbox/ColorPickerMenu.vue'
-
-interface ExtendedMenuItem extends MenuItem {
-  isColorSubmenu?: boolean
-  shortcut?: string
-  originalOption?: MenuOption
-}
-
-const contextMenu = ref<InstanceType<typeof ContextMenu>>()
-const colorPickerMenu = ref<InstanceType<typeof ColorPickerMenu>>()
-const isOpen = ref(false)
-
-const { menuOptions, bump } = useMoreOptionsMenu()
-const canvasStore = useCanvasStore()
-
-// World position (canvas coordinates) where menu was opened
-const worldPosition = ref({ x: 0, y: 0 })
-
-// Get canvas bounding rect reactively
-const lgCanvas = canvasStore.getCanvas()
-const { left: canvasLeft, top: canvasTop } = useElementBounding(lgCanvas.canvas)
-
-// Track last canvas transform to detect actual changes
-let lastScale = 0
-let lastOffsetX = 0
-let lastOffsetY = 0
-
-// Update menu position based on canvas transform
-const updateMenuPosition = () => {
-  if (!isOpen.value) return
-
-  const menuInstance = contextMenu.value as unknown as {
-    container?: HTMLElement
-  }
-  const menuEl = menuInstance?.container
-  if (!menuEl) return
-
-  const { scale, offset } = lgCanvas.ds
-
-  // Only update if canvas transform actually changed
-  if (
-    scale === lastScale &&
-    offset[0] === lastOffsetX &&
-    offset[1] === lastOffsetY
-  ) {
-    return
-  }
-
-  lastScale = scale
-  lastOffsetX = offset[0]
-  lastOffsetY = offset[1]
-
-  // Convert world position to screen position
-  const screenX = (worldPosition.value.x + offset[0]) * scale + canvasLeft.value
-  const screenY = (worldPosition.value.y + offset[1]) * scale + canvasTop.value
-
-  // Update menu position
-  menuEl.style.left = `${screenX}px`
-  menuEl.style.top = `${screenY}px`
-}
-
-// Sync with canvas transform using requestAnimationFrame
-const { resume: startSync, pause: stopSync } = useRafFn(updateMenuPosition, {
-  immediate: false
-})
-
-// Start/stop syncing based on menu visibility
-watchEffect(() => {
-  if (isOpen.value) {
-    startSync()
-  } else {
-    stopSync()
-  }
-})
-
-// Close on touch outside to handle mobile devices where click might be swallowed
-useEventListener(
-  window,
-  'touchstart',
-  (event: TouchEvent) => {
-    if (!isOpen.value || !contextMenu.value) return
-
-    const target = event.target as Node
-    const contextMenuInstance = contextMenu.value as unknown as {
-      container?: HTMLElement
-      $el?: HTMLElement
-    }
-    const menuEl = contextMenuInstance.container || contextMenuInstance.$el
-
-    if (menuEl && !menuEl.contains(target)) {
-      hide()
-    }
-  },
-  { passive: true }
-)
-
-// Find color picker option
-const colorOption = computed(() =>
-  menuOptions.value.find((opt) => opt.isColorPicker)
-)
-
-// Check if option is the color picker
-function isColorOption(option: MenuOption): boolean {
-  return Boolean(option.isColorPicker)
-}
-
-// Convert MenuOption to PrimeVue MenuItem
-function convertToMenuItem(option: MenuOption): ExtendedMenuItem {
-  if (option.type === 'divider') return { separator: true }
-
-  const isColor = isColorOption(option)
-
-  const item: ExtendedMenuItem = {
-    label: option.label,
-    icon: option.icon,
-    disabled: option.disabled,
-    shortcut: option.shortcut,
-    isColorSubmenu: isColor,
-    originalOption: option
-  }
-
-  // Native submenus for non-color options
-  if (option.hasSubmenu && option.submenu && !isColor) {
-    item.items = option.submenu.map((sub) => ({
-      label: sub.label,
-      icon: sub.icon,
-      disabled: sub.disabled,
-      command: () => {
-        sub.action()
-        hide()
-      }
-    }))
-  }
-
-  // Regular action items
-  if (!option.hasSubmenu && option.action) {
-    item.command = () => {
-      option.action?.()
-      hide()
-    }
-  }
-
-  return item
-}
-
-// Build menu items
-const menuItems = computed<ExtendedMenuItem[]>(() =>
-  menuOptions.value.map(convertToMenuItem)
-)
-
-// Show context menu
-function show(event: MouseEvent) {
-  bump()
-
-  // Convert screen position to world coordinates
-  // Screen position relative to canvas = event position - canvas offset
-  const screenX = event.clientX - canvasLeft.value
-  const screenY = event.clientY - canvasTop.value
-
-  // Convert to world coordinates using canvas transform
-  const { scale, offset } = lgCanvas.ds
-  worldPosition.value = {
-    x: screenX / scale - offset[0],
-    y: screenY / scale - offset[1]
-  }
-
-  isOpen.value = true
-  contextMenu.value?.show(event)
-}
-
-// Hide context menu
-function hide() {
-  contextMenu.value?.hide()
-}
-
-function toggle(event: Event) {
-  if (isOpen.value) {
-    hide()
-  } else {
-    show(event as MouseEvent)
-  }
-}
-
-defineExpose({ toggle, hide, isOpen, show })
-
-function showColorPopover(event: MouseEvent) {
-  event.stopPropagation()
-  event.preventDefault()
-  const target = Array.from((event.currentTarget as HTMLElement).children).find(
-    (el) => el.classList.contains('icon-[lucide--chevron-right]')
-  ) as HTMLElement
-  colorPickerMenu.value?.toggle(event, target)
-}
-
-// Handle color selection
-function handleColorSelect(subOption: SubMenuOption) {
-  subOption.action()
-  hide()
-}
-
-function onMenuShow() {
-  isOpen.value = true
-}
-
-function onMenuHide() {
-  isOpen.value = false
-}
-
-onMounted(() => {
-  registerNodeOptionsInstance({ toggle, hide, isOpen })
-})
-
-onUnmounted(() => {
-  registerNodeOptionsInstance(null)
-})
-</script>

src/components/graph/SelectionRectangle.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="isVisible"
-    class="pointer-events-none absolute z-9999 border border-blue-400 bg-blue-500/20"
+    class="pointer-events-none absolute border border-blue-400 bg-blue-500/20"
     :style="rectangleStyle"
   />
 </template>

src/components/graph/SelectionToolbox.test.ts

@@ -136,7 +136,6 @@ describe('SelectionToolbox', () => {
               '<div class="panel selection-toolbox absolute left-1/2 rounded-lg"><slot /></div>',
             props: ['pt', 'style', 'class']
           },
-          NodeContextMenu: { template: '<div class="node-context-menu" />' },
           InfoButton: { template: '<div class="info-button" />' },
           ColorPickerButton: {
             template:

src/components/graph/SelectionToolbox.vue

@@ -42,7 +42,6 @@
       </Panel>
     </Transition>
   </div>
-  <NodeContextMenu />
 </template>
 
 <script setup lang="ts">
@@ -69,7 +68,6 @@ import { useExtensionService } from '@/services/extensionService'
 import { useCommandStore } from '@/stores/commandStore'
 import type { ComfyCommandImpl } from '@/stores/commandStore'
 
-import NodeContextMenu from './NodeContextMenu.vue'
 import FrameNodes from './selectionToolbox/FrameNodes.vue'
 import NodeOptionsButton from './selectionToolbox/NodeOptionsButton.vue'
 import VerticalDivider from './selectionToolbox/VerticalDivider.vue'

src/components/graph/modals/ZoomControlsModal.vue

@@ -48,6 +48,7 @@
           class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
         >
           <InputNumber
+            ref="zoomInput"
             :default-value="canvasStore.appScalePercentage"
             :min="1"
             :max="1000"
@@ -129,6 +130,7 @@ const zoomOutCommandText = computed(() =>
 const zoomToFitCommandText = computed(() =>
   formatKeySequence(commandStore.getCommand('Comfy.Canvas.FitView'))
 )
+const zoomInput = ref<InstanceType<typeof InputNumber> | null>(null)
 const zoomInputContainer = ref<HTMLDivElement | null>(null)
 
 watch(

src/components/graph/selectionToolbox/MenuOptionItem.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="option.type === 'divider'" class="my-1 h-px bg-border-default" />
+  <div
+    v-else
+    role="button"
+    class="group flex cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm text-text-primary hover:bg-interface-menu-component-surface-hovered"
+    @click="handleClick"
+  >
+    <i v-if="option.icon" :class="[option.icon, 'h-4 w-4']" />
+    <span class="flex-1">{{ option.label }}</span>
+    <span
+      v-if="option.shortcut"
+      class="flex h-3.5 min-w-3.5 items-center justify-center rounded bg-interface-menu-keybind-surface-default px-1 py-0 text-xxs"
+    >
+      {{ option.shortcut }}
+    </span>
+    <i
+      v-if="option.hasSubmenu"
+      :size="14"
+      class="icon-[lucide--chevron-right] opacity-60"
+    />
+    <Badge
+      v-if="option.badge"
+      :severity="option.badge === 'new' ? 'info' : 'secondary'"
+      :value="t(option.badge)"
+      :class="
+        cn(
+          'h-4 gap-2.5 px-1 text-[9px] text-base-foreground uppercase rounded-4xl',
+          {
+            'bg-primary-background': option.badge === 'new',
+            'bg-secondary-background': option.badge === 'deprecated'
+          }
+        )
+      "
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import Badge from 'primevue/badge'
+import { useI18n } from 'vue-i18n'
+
+import type { MenuOption } from '@/composables/graph/useMoreOptionsMenu'
+
+const { t } = useI18n()
+
+interface Props {
+  option: MenuOption
+}
+
+interface Emits {
+  (e: 'click', option: MenuOption, event: Event): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const handleClick = (event: Event) => {
+  emit('click', props.option, event)
+}
+</script>

src/components/graph/selectionToolbox/NodeOptions.vue

@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <Popover
+      ref="popover"
+      append-to="body"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="{
+        root: {
+          class: 'absolute z-50 w-[300px]'
+        },
+        content: {
+          class: [
+            'mt-2 text-base-foreground rounded-lg',
+            'shadow-lg border border-border-default',
+            'bg-interface-panel-surface'
+          ]
+        }
+      }"
+      @show="onPopoverShow"
+      @hide="onPopoverHide"
+      @wheel="canvasInteractions.forwardEventToCanvas"
+    >
+      <div class="flex min-w-48 flex-col p-2">
+        <MenuOptionItem
+          v-for="(option, index) in menuOptions"
+          :key="option.label || `divider-${index}`"
+          :option="option"
+          @click="handleOptionClick"
+        />
+      </div>
+    </Popover>
+
+    <SubmenuPopover
+      v-for="option in menuOptionsWithSubmenu"
+      :key="`submenu-${option.label}`"
+      :ref="(el) => setSubmenuRef(`submenu-${option.label}`, el)"
+      :option="option"
+      @submenu-click="handleSubmenuClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
+import Popover from 'primevue/popover'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+import {
+  forceCloseMoreOptionsSignal,
+  moreOptionsOpen,
+  moreOptionsRestorePending,
+  restoreMoreOptionsSignal
+} from '@/composables/canvas/useSelectionToolboxPosition'
+import {
+  registerNodeOptionsInstance,
+  useMoreOptionsMenu
+} from '@/composables/graph/useMoreOptionsMenu'
+import type {
+  MenuOption,
+  SubMenuOption
+} from '@/composables/graph/useMoreOptionsMenu'
+import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
+
+import MenuOptionItem from './MenuOptionItem.vue'
+import SubmenuPopover from './SubmenuPopover.vue'
+
+const popover = ref<InstanceType<typeof Popover>>()
+const targetElement = ref<HTMLElement | null>(null)
+const isTriggeredByToolbox = ref<boolean>(true)
+// Track open state ourselves so we can restore after drag/move
+const isOpen = ref(false)
+const wasOpenBeforeHide = ref(false)
+// Track why the popover was hidden so we only auto-reopen after drag.
+type HideReason = 'manual' | 'drag'
+const lastProgrammaticHideReason = ref<HideReason | null>(null)
+const submenuRefs = ref<Record<string, InstanceType<typeof SubmenuPopover>>>({})
+const currentSubmenu = ref<string | null>(null)
+
+const { menuOptions, menuOptionsWithSubmenu, bump } = useMoreOptionsMenu()
+const { toggleSubmenu, hideAllSubmenus } = useSubmenuPositioning()
+const canvasInteractions = useCanvasInteractions()
+
+let lastLogTs = 0
+const LOG_INTERVAL = 120 // ms
+let overlayElCache: HTMLElement | null = null
+
+function resolveOverlayEl(): HTMLElement | null {
+  // Prefer cached element (cleared on hide)
+  if (overlayElCache && overlayElCache.isConnected) return overlayElCache
+  // PrimeVue Popover root element (component instance $el)
+  const direct = (popover.value as any)?.$el
+  if (direct instanceof HTMLElement) {
+    overlayElCache = direct
+    return direct
+  }
+  // Fallback: try to locate a recent popover root near the button (same z-index class + absolute)
+  const btn = targetElement.value
+  if (btn) {
+    const candidates = Array.from(
+      document.querySelectorAll('div.absolute.z-50')
+    ) as HTMLElement[]
+    // Heuristic: pick the one closest (vertically) below the button
+    const rect = btn.getBoundingClientRect()
+    let best: { el: HTMLElement; dist: number } | null = null
+    for (const el of candidates) {
+      const r = el.getBoundingClientRect()
+      const dist = Math.abs(r.top - rect.bottom)
+      if (!best || dist < best.dist) best = { el, dist }
+    }
+    if (best && best.el) {
+      overlayElCache = best.el
+      return best.el
+    }
+  }
+  return null
+}
+
+const repositionPopover = () => {
+  if (!isOpen.value) return
+  const btn = targetElement.value
+  const overlayEl = resolveOverlayEl()
+  if (!btn || !overlayEl) return
+  const rect = btn.getBoundingClientRect()
+  const marginY = 8 // tailwind mt-2 ~ 0.5rem = 8px
+  const left = isTriggeredByToolbox.value
+    ? rect.left + rect.width / 2
+    : rect.right - rect.width / 4
+  const top = isTriggeredByToolbox.value
+    ? rect.bottom + marginY
+    : rect.top - marginY - 6
+  try {
+    overlayEl.style.position = 'fixed'
+    overlayEl.style.left = `${left}px`
+    overlayEl.style.top = `${top}px`
+    overlayEl.style.transform = 'translate(-50%, 0)'
+  } catch (e) {
+    console.warn('[NodeOptions] Failed to set overlay style', e)
+    return
+  }
+  const now = performance.now()
+  if (now - lastLogTs > LOG_INTERVAL) {
+    lastLogTs = now
+  }
+}
+
+const { resume: startSync, pause: stopSync } = useRafFn(repositionPopover)
+
+function openPopover(
+  triggerEvent?: Event,
+  element?: HTMLElement,
+  clickedFromToolbox?: boolean
+): boolean {
+  const el = element || targetElement.value
+  if (!el || !el.isConnected) return false
+  targetElement.value = el
+  if (clickedFromToolbox !== undefined)
+    isTriggeredByToolbox.value = clickedFromToolbox
+  bump()
+  popover.value?.show(triggerEvent ?? new Event('reopen'), el)
+  isOpen.value = true
+  moreOptionsOpen.value = true
+  moreOptionsRestorePending.value = false
+  return true
+}
+
+function closePopover(reason: HideReason = 'manual') {
+  lastProgrammaticHideReason.value = reason
+  popover.value?.hide()
+  isOpen.value = false
+  moreOptionsOpen.value = false
+  stopSync()
+  hideAll()
+  if (reason !== 'drag') {
+    wasOpenBeforeHide.value = false
+    // Natural hide: cancel any pending restore
+    moreOptionsRestorePending.value = false
+  } else {
+    if (!moreOptionsRestorePending.value) {
+      wasOpenBeforeHide.value = true
+      moreOptionsRestorePending.value = true
+    }
+  }
+}
+
+let restoreAttempts = 0
+function attemptRestore() {
+  if (isOpen.value) return
+  if (!wasOpenBeforeHide.value && !moreOptionsRestorePending.value) return
+  // Try immediately
+  if (openPopover(new Event('reopen'), targetElement.value || undefined)) {
+    wasOpenBeforeHide.value = false
+    restoreAttempts = 0
+    return
+  }
+  // Defer with limited retries (layout / mount race)
+  if (restoreAttempts >= 5) return
+  restoreAttempts++
+  requestAnimationFrame(() => attemptRestore())
+}
+
+const toggle = (
+  event: Event,
+  element?: HTMLElement,
+  clickedFromToolbox?: boolean
+) => {
+  if (isOpen.value) closePopover('manual')
+  else openPopover(event, element, clickedFromToolbox)
+}
+
+const hide = (reason: HideReason = 'manual') => closePopover(reason)
+
+// Export functions for external triggering
+defineExpose({
+  toggle,
+  hide,
+  isOpen
+})
+
+const hideAll = () => {
+  hideAllSubmenus(
+    menuOptionsWithSubmenu.value,
+    submenuRefs.value,
+    currentSubmenu
+  )
+}
+
+const handleOptionClick = (option: MenuOption, event: Event) => {
+  if (!option.hasSubmenu && option.action) {
+    option.action()
+    hide()
+  } else if (option.hasSubmenu) {
+    event.stopPropagation()
+    const submenuKey = `submenu-${option.label}`
+    const submenu = submenuRefs.value[submenuKey]
+
+    if (submenu) {
+      void toggleSubmenu(
+        option,
+        event,
+        submenu,
+        currentSubmenu,
+        menuOptionsWithSubmenu.value,
+        submenuRefs.value
+      )
+    }
+  }
+}
+
+const handleSubmenuClick = (subOption: SubMenuOption) => {
+  subOption.action()
+  hide('manual')
+}
+
+const setSubmenuRef = (key: string, el: any) => {
+  if (el) {
+    submenuRefs.value[key] = el
+  } else {
+    delete submenuRefs.value[key]
+  }
+}
+
+// Distinguish outside click (PrimeVue dismiss) from programmatic hides.
+const onPopoverShow = () => {
+  overlayElCache = resolveOverlayEl()
+  // Delay first reposition slightly to ensure DOM fully painted
+  requestAnimationFrame(() => repositionPopover())
+  startSync()
+}
+
+const onPopoverHide = () => {
+  if (lastProgrammaticHideReason.value == null) {
+    isOpen.value = false
+    hideAll()
+    wasOpenBeforeHide.value = false
+    moreOptionsOpen.value = false
+    moreOptionsRestorePending.value = false
+  }
+  overlayElCache = null
+  stopSync()
+  lastProgrammaticHideReason.value = null
+}
+
+// Watch for forced close (drag start)
+watch(
+  () => forceCloseMoreOptionsSignal.value,
+  () => {
+    if (isOpen.value) hide('drag')
+    else
+      wasOpenBeforeHide.value =
+        wasOpenBeforeHide.value || moreOptionsRestorePending.value
+  }
+)
+
+watch(
+  () => restoreMoreOptionsSignal.value,
+  () => attemptRestore()
+)
+
+onMounted(() => {
+  // Register this instance globally
+  registerNodeOptionsInstance({
+    toggle,
+    hide,
+    isOpen
+  })
+
+  if (moreOptionsRestorePending.value && !isOpen.value) {
+    requestAnimationFrame(() => attemptRestore())
+  }
+})
+
+onUnmounted(() => {
+  stopSync()
+  // Unregister on unmount
+  registerNodeOptionsInstance(null)
+})
+</script>

src/components/graph/selectionToolbox/NodeOptionsButton.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    ref="buttonRef"
     v-tooltip.top="{
       value: $t('g.moreOptions'),
       showDelay: 1000
@@ -16,10 +17,17 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { ref } from 'vue'
 
 import { toggleNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
 
+const buttonRef = ref<InstanceType<typeof Button> | null>(null)
+
 const handleClick = (event: Event) => {
-  toggleNodeOptions(event)
+  const el = (buttonRef.value as any)?.$el || buttonRef.value
+  const buttonEl = el instanceof HTMLElement ? el : null
+  if (buttonEl) {
+    toggleNodeOptions(event, buttonEl, true)
+  }
 }
 </script>

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -1,6 +1,6 @@
 <template>
   <Popover
-    ref="popoverRef"
+    ref="popover"
     :auto-z-index="true"
     :base-z-index="1100"
     :dismissable="true"
@@ -8,7 +8,7 @@
     unstyled
     :pt="{
       root: {
-        class: 'absolute z-60'
+        class: 'absolute z-[60]'
       },
       content: {
         class: [
@@ -34,10 +34,7 @@
             'hover:bg-secondary-background-hover rounded cursor-pointer',
             isColorSubmenu
               ? 'w-7 h-7 flex items-center justify-center'
-              : 'flex items-center gap-2 px-3 py-1.5 text-sm',
-            subOption.disabled
-              ? 'cursor-not-allowed pointer-events-none text-node-icon-disabled'
-              : 'hover:bg-secondary-background-hover'
+              : 'flex items-center gap-2 px-3 py-1.5 text-sm'
           )
         "
         :title="subOption.label"
@@ -85,21 +82,23 @@ const emit = defineEmits<Emits>()
 
 const { getCurrentShape } = useNodeCustomization()
 
-const popoverRef = ref<InstanceType<typeof Popover>>()
+const popover = ref<InstanceType<typeof Popover>>()
 
-const toggle = (event: Event, target?: HTMLElement) => {
-  popoverRef.value?.toggle(event, target)
+const show = (event: Event, target?: HTMLElement) => {
+  popover.value?.show(event, target)
 }
+
+const hide = () => {
+  popover.value?.hide()
+}
+
 defineExpose({
-  toggle
+  show,
+  hide
 })
 
 const handleSubmenuClick = (subOption: SubMenuOption) => {
-  if (subOption.disabled) {
-    return
-  }
   emit('submenu-click', subOption)
-  popoverRef.value?.hide()
 }
 
 const isShapeSelected = (subOption: SubMenuOption): boolean => {

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -152,7 +152,6 @@
 </template>
 
 <script setup lang="ts">
-import { useToast } from 'primevue/usetoast'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -169,7 +168,6 @@ import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
-import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 // Types
@@ -203,7 +201,6 @@ const SUBMENU_CONFIG = {
 
 // Composables
 const { t } = useI18n()
-const toast = useToast()
 const { staticUrls, buildDocsUrl } = useExternalLink()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
@@ -233,7 +230,6 @@ const showVersionUpdates = computed(() =>
 // Use conflict acknowledgment state from composable
 const { shouldShowRedDot: shouldShowManagerRedDot } =
   useConflictAcknowledgment()
-const { isNewManagerUI } = useManagerState()
 
 const moreItems = computed<MenuItem[]>(() => {
   const allMoreItems: MenuItem[] = [
@@ -373,19 +369,6 @@ const menuItems = computed<MenuItem[]>(() => {
       }
     })
   }
-  // Update ComfyUI - only for non-desktop, non-cloud with new manager UI
-  if (!isElectron() && !isCloud && isNewManagerUI.value) {
-    items.push({
-      key: 'update-comfyui',
-      type: 'item',
-      icon: 'icon-[lucide--download]',
-      label: t('helpCenter.updateComfyUI'),
-      action: () => {
-        onUpdateComfyUI()
-        emit('close')
-      }
-    })
-  }
 
   items.push({
     key: 'more',
@@ -562,47 +545,6 @@ const onReinstall = (): void => {
   }
 }
 
-const onUpdateComfyUI = async (): Promise<void> => {
-  const { updateComfyUI, rebootComfyUI, error } = useComfyManagerService()
-
-  toast.add({
-    severity: 'info',
-    summary: t('helpCenter.updateComfyUIStarted'),
-    detail: t('helpCenter.updateComfyUIStartedDetail'),
-    life: 3000
-  })
-
-  try {
-    const result = await updateComfyUI({ is_stable: true })
-
-    if (result === null || error.value) {
-      toast.add({
-        severity: 'error',
-        summary: t('g.error'),
-        detail: error.value || t('helpCenter.updateComfyUIFailed'),
-        life: 5000
-      })
-      return
-    }
-
-    toast.add({
-      severity: 'success',
-      summary: t('helpCenter.updateComfyUISuccess'),
-      detail: t('helpCenter.updateComfyUISuccessDetail'),
-      life: 3000
-    })
-
-    await rebootComfyUI()
-  } catch (err) {
-    toast.add({
-      severity: 'error',
-      summary: t('g.error'),
-      detail: err instanceof Error ? err.message : t('g.unknownError'),
-      life: 5000
-    })
-  }
-}
-
 const onReleaseClick = (release: ReleaseNote): void => {
   trackResourceClick('release_notes', true)
   void releaseStore.handleShowChangelog(release.version)

src/components/input/MultiSelect.vue

@@ -62,7 +62,7 @@
       // Option row hover and focus tone
       option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
-          'flex gap-2 items-center h-10 px-2 rounded-lg cursor-pointer',
+          'flex gap-2 items-center h-10 px-2 rounded-lg',
           'hover:bg-secondary-background-hover',
           // Add focus/highlight state for keyboard navigation
           context?.focused &&
@@ -112,14 +112,14 @@
                 : $t('g.itemSelected', { selectedCount })
             }}
           </span>
-          <Button
+          <TextButton
             v-if="showClearButton"
-            variant="textonly"
-            size="md"
+            :label="$t('g.clearAll')"
+            type="transparent"
+            size="fit-content"
+            class="text-sm text-text-primary"
             @click.stop="selectedItems = []"
-          >
-            {{ $t('g.clearAll') }}
-          </Button>
+          />
         </div>
         <div class="my-4 h-px bg-border-default"></div>
       </div>
@@ -145,13 +145,9 @@
 
     <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
     <template #option="slotProps">
-      <div
-        role="button"
-        class="flex items-center gap-2 cursor-pointer"
-        :style="popoverStyle"
-      >
+      <div class="flex items-center gap-2" :style="popoverStyle">
         <div
-          class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+          class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
           :class="
             slotProps.selected
               ? 'bg-primary-background'
@@ -163,9 +159,11 @@
             class="text-bold icon-[lucide--check] text-xs text-white"
           />
         </div>
-        <span>
-          {{ slotProps.option.name }}
-        </span>
+        <Button
+          class="border-none bg-transparent text-left outline-none"
+          unstyled
+          >{{ slotProps.option.name }}</Button
+        >
       </div>
     </template>
   </MultiSelect>
@@ -174,16 +172,17 @@
 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import Button from 'primevue/button'
 import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
 import MultiSelect from 'primevue/multiselect'
 import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
+import TextButton from '../button/TextButton.vue'
 import type { SelectOption } from './types'
 
 type Option = SelectOption

src/components/load3d/Load3D.vue

@@ -9,6 +9,7 @@
   >
     <Load3DScene
       v-if="node"
+      ref="load3DSceneRef"
       :initialize-load3d="initializeLoad3d"
       :cleanup="cleanup"
       :loading="loading"
@@ -99,6 +100,8 @@ if (isComponentWidget(props.widget)) {
   })
 }
 
+const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
+
 const {
   // configs
   sceneConfig,

src/components/load3d/Load3DScene.vue

@@ -14,7 +14,11 @@
     @dragleave.stop="handleDragLeave"
     @drop.prevent.stop="handleDrop"
   >
-    <LoadingOverlay :loading="loading" :loading-message="loadingMessage" />
+    <LoadingOverlay
+      ref="loadingOverlayRef"
+      :loading="loading"
+      :loading-message="loadingMessage"
+    />
     <div
       v-if="!isPreview && isDragging"
       class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
@@ -44,6 +48,7 @@ const props = defineProps<{
 }>()
 
 const container = ref<HTMLElement | null>(null)
+const loadingOverlayRef = ref<InstanceType<typeof LoadingOverlay> | null>(null)
 
 const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
   useLoad3dDrag({

src/components/load3d/Load3dViewerContent.vue

@@ -6,7 +6,7 @@
     @mouseenter="viewer.handleMouseEnter"
     @mouseleave="viewer.handleMouseLeave"
   >
-    <div class="relative flex-1">
+    <div ref="mainContentRef" class="relative flex-1">
       <div
         ref="containerRef"
         class="absolute h-full w-full"
@@ -105,6 +105,7 @@ const props = defineProps<{
 
 const viewerContentRef = ref<HTMLDivElement>()
 const containerRef = ref<HTMLDivElement>()
+const mainContentRef = ref<HTMLDivElement>()
 const maximized = ref(false)
 const mutationObserver = ref<MutationObserver | null>(null)
 

src/components/maskeditor/ToolPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full z-8888 flex flex-col justify-between bg-comfy-menu-bg">
+  <div class="h-full z-[8888] flex flex-col justify-between bg-comfy-menu-bg">
     <div class="flex flex-col">
       <div
         v-for="tool in allTools"

src/components/queue/CompletionSummaryBanner.vue

@@ -1,8 +1,8 @@
 <template>
-  <Button
-    variant="secondary"
-    size="lg"
-    class="group w-full justify-between gap-3 p-1 text-left font-normal hover:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+  <IconButton
+    type="secondary"
+    size="fit-content"
+    class="group w-full justify-between gap-3 rounded-lg p-1 text-left font-normal hover:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
     :aria-label="props.ariaLabel"
     @click="emit('click', $event)"
   >
@@ -81,11 +81,11 @@
     >
       <i class="icon-[lucide--chevron-down] block size-4 leading-none" />
     </span>
-  </Button>
+  </IconButton>
 </template>
 
 <script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
+import IconButton from '@/components/button/IconButton.vue'
 import type {
   CompletionSummary,
   CompletionSummaryMode

src/components/queue/QueueInlineProgress.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="shouldShow"
+    aria-hidden="true"
+    class="pointer-events-none absolute inset-x-0 bottom-0 h-[3px]"
+  >
+    <div
+      class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
+      :style="{ width: `${totalPercent}%` }"
+    />
+    <div
+      class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
+      :style="{ width: `${currentNodePercent}%` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+
+const props = defineProps<{
+  hidden?: boolean
+}>()
+
+const { totalPercent, currentNodePercent } = useQueueProgress()
+
+const shouldShow = computed(
+  () =>
+    !props.hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
+)
+</script>

src/components/queue/QueueInlineProgressSummary.stories.ts

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import QueueInlineProgressSummary from './QueueInlineProgressSummary.vue'
+import { useExecutionStore } from '@/stores/executionStore'
+import { ChangeTracker } from '@/scripts/changeTracker'
+import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import type {
+  ComfyWorkflowJSON,
+  NodeId
+} from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { NodeProgressState, ProgressWsMessage } from '@/schemas/apiSchema'
+
+type SeedOptions = {
+  promptId: string
+  nodes: Record<NodeId, boolean>
+  runningNodeId?: NodeId
+  runningNodeTitle?: string
+  runningNodeType?: string
+  currentValue?: number
+  currentMax?: number
+}
+
+function createWorkflow({
+  promptId,
+  nodes,
+  runningNodeId,
+  runningNodeTitle,
+  runningNodeType
+}: SeedOptions): ComfyWorkflow {
+  const workflow = new ComfyWorkflow({
+    path: `${ComfyWorkflow.basePath}${promptId}.json`,
+    modified: Date.now(),
+    size: -1
+  })
+
+  const workflowState: ComfyWorkflowJSON = {
+    last_node_id: Object.keys(nodes).length,
+    last_link_id: 0,
+    nodes: Object.keys(nodes).map((id, index) => ({
+      id,
+      type: id === runningNodeId ? (runningNodeType ?? 'Node') : 'Node',
+      title: id === runningNodeId ? (runningNodeTitle ?? '') : `Node ${id}`,
+      pos: [index * 120, 0],
+      size: [240, 120],
+      flags: {},
+      order: index,
+      mode: 0,
+      properties: {},
+      widgets_values: []
+    })),
+    links: [],
+    groups: [],
+    config: {},
+    extra: {},
+    version: 0.4
+  }
+
+  workflow.changeTracker = new ChangeTracker(workflow, workflowState)
+  return workflow
+}
+
+function resetExecutionStore() {
+  const exec = useExecutionStore()
+  exec.activePromptId = null
+  exec.queuedPrompts = {}
+  exec.nodeProgressStates = {}
+  exec.nodeProgressStatesByPrompt = {}
+  exec._executingNodeProgress = null
+  exec.lastExecutionError = null
+  exec.lastNodeErrors = null
+  exec.initializingPromptIds = new Set()
+  exec.promptIdToWorkflowId = new Map()
+}
+
+function seedExecutionState({
+  promptId,
+  nodes,
+  runningNodeId,
+  runningNodeTitle,
+  runningNodeType,
+  currentValue = 0,
+  currentMax = 100
+}: SeedOptions) {
+  resetExecutionStore()
+
+  const exec = useExecutionStore()
+  const workflow = runningNodeId
+    ? createWorkflow({
+        promptId,
+        nodes,
+        runningNodeId,
+        runningNodeTitle,
+        runningNodeType
+      })
+    : undefined
+
+  exec.activePromptId = promptId
+  exec.queuedPrompts = {
+    [promptId]: {
+      nodes,
+      ...(workflow ? { workflow } : {})
+    }
+  }
+
+  const nodeProgress: Record<string, NodeProgressState> = runningNodeId
+    ? {
+        [String(runningNodeId)]: {
+          value: currentValue,
+          max: currentMax,
+          state: 'running',
+          node_id: runningNodeId,
+          display_node_id: runningNodeId,
+          prompt_id: promptId
+        }
+      }
+    : {}
+
+  exec.nodeProgressStates = nodeProgress
+  exec.nodeProgressStatesByPrompt = runningNodeId
+    ? { [promptId]: nodeProgress }
+    : {}
+  exec._executingNodeProgress = runningNodeId
+    ? ({
+        value: currentValue,
+        max: currentMax,
+        prompt_id: promptId,
+        node: runningNodeId
+      } satisfies ProgressWsMessage)
+    : null
+}
+
+const meta: Meta<typeof QueueInlineProgressSummary> = {
+  title: 'Queue/QueueInlineProgressSummary',
+  component: QueueInlineProgressSummary,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'light'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const RunningKSampler: Story = {
+  render: () => ({
+    components: { QueueInlineProgressSummary },
+    setup() {
+      seedExecutionState({
+        promptId: 'prompt-running',
+        nodes: { '1': true, '2': false, '3': false, '4': true },
+        runningNodeId: '2',
+        runningNodeTitle: 'KSampler',
+        runningNodeType: 'KSampler',
+        currentValue: 12,
+        currentMax: 100
+      })
+
+      return {}
+    },
+    template: `
+      <div style="background: var(--color-surface-primary); width: 420px; padding: 12px;">
+        <QueueInlineProgressSummary />
+      </div>
+    `
+  })
+}
+
+export const RunningWithFallbackName: Story = {
+  render: () => ({
+    components: { QueueInlineProgressSummary },
+    setup() {
+      seedExecutionState({
+        promptId: 'prompt-fallback',
+        nodes: { '10': true, '11': true, '12': false, '13': true },
+        runningNodeId: '12',
+        runningNodeTitle: '',
+        runningNodeType: 'custom_node',
+        currentValue: 78,
+        currentMax: 100
+      })
+
+      return {}
+    },
+    template: `
+      <div style="background: var(--color-surface-primary); width: 420px; padding: 12px;">
+        <QueueInlineProgressSummary />
+      </div>
+    `
+  })
+}
+
+export const ProgressWithoutCurrentNode: Story = {
+  render: () => ({
+    components: { QueueInlineProgressSummary },
+    setup() {
+      seedExecutionState({
+        promptId: 'prompt-progress-only',
+        nodes: { '21': true, '22': true, '23': true, '24': false }
+      })
+
+      return {}
+    },
+    template: `
+      <div style="background: var(--color-surface-primary); width: 420px; padding: 12px;">
+        <QueueInlineProgressSummary />
+      </div>
+    `
+  })
+}

src/components/queue/QueueInlineProgressSummary.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="shouldShow" class="flex justify-end">
+    <div
+      class="flex items-center gap-4 whitespace-nowrap text-[0.75rem] leading-[normal] drop-shadow-[1px_1px_8px_rgba(0,0,0,0.4)]"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+    >
+      <div class="flex items-center gap-1 text-base-foreground">
+        <span class="font-normal">
+          {{ t('sideToolbar.queueProgressOverlay.inlineTotalLabel') }}:
+        </span>
+        <span class="w-[5ch] shrink-0 text-right font-bold tabular-nums">
+          {{ totalPercentFormatted }}
+        </span>
+      </div>
+
+      <div class="flex items-center gap-1 text-muted-foreground">
+        <span
+          class="w-[16ch] shrink-0 truncate text-right"
+          :title="currentNodeName"
+        >
+          {{ currentNodeName }}:
+        </span>
+        <span class="w-[5ch] shrink-0 text-right tabular-nums">
+          {{ currentNodePercentFormatted }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useCurrentNodeName } from '@/composables/queue/useCurrentNodeName'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { useExecutionStore } from '@/stores/executionStore'
+
+const props = defineProps<{
+  hidden?: boolean
+}>()
+
+const { t } = useI18n()
+const executionStore = useExecutionStore()
+const { currentNodeName } = useCurrentNodeName()
+const {
+  totalPercent,
+  totalPercentFormatted,
+  currentNodePercent,
+  currentNodePercentFormatted
+} = useQueueProgress()
+
+const shouldShow = computed(
+  () =>
+    !props.hidden &&
+    (!executionStore.isIdle ||
+      totalPercent.value > 0 ||
+      currentNodePercent.value > 0)
+)
+</script>

src/components/queue/QueueOverlayActive.test.ts

@@ -1,125 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import QueueOverlayActive from './QueueOverlayActive.vue'
-import * as tooltipConfig from '@/composables/useTooltipConfig'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      sideToolbar: {
-        queueProgressOverlay: {
-          total: 'Total: {percent}',
-          currentNode: 'Current node:',
-          running: 'running',
-          interruptAll: 'Interrupt all running jobs',
-          queuedSuffix: 'queued',
-          clearQueued: 'Clear queued',
-          viewAllJobs: 'View all jobs',
-          cancelJobTooltip: 'Cancel job',
-          clearQueueTooltip: 'Clear queue'
-        }
-      }
-    }
-  }
-})
-
-const tooltipDirectiveStub = {
-  mounted: vi.fn(),
-  updated: vi.fn()
-}
-
-const SELECTORS = {
-  interruptAllButton: 'button[aria-label="Interrupt all running jobs"]',
-  clearQueuedButton: 'button[aria-label="Clear queued"]',
-  summaryRow: '.flex.items-center.gap-2',
-  currentNodeRow: '.flex.items-center.gap-1.text-text-secondary'
-}
-
-const COPY = {
-  viewAllJobs: 'View all jobs'
-}
-
-const mountComponent = (props: Record<string, unknown> = {}) =>
-  mount(QueueOverlayActive, {
-    props: {
-      totalProgressStyle: { width: '65%' },
-      currentNodeProgressStyle: { width: '40%' },
-      totalPercentFormatted: '65%',
-      currentNodePercentFormatted: '40%',
-      currentNodeName: 'Sampler',
-      runningCount: 1,
-      queuedCount: 2,
-      bottomRowClass: 'flex custom-bottom-row',
-      ...props
-    },
-    global: {
-      plugins: [i18n],
-      directives: {
-        tooltip: tooltipDirectiveStub
-      }
-    }
-  })
-
-describe('QueueOverlayActive', () => {
-  it('renders progress metrics and emits actions when buttons clicked', async () => {
-    const wrapper = mountComponent({ runningCount: 2, queuedCount: 3 })
-
-    const progressBars = wrapper.findAll('.absolute.inset-0')
-    expect(progressBars[0].attributes('style')).toContain('width: 65%')
-    expect(progressBars[1].attributes('style')).toContain('width: 40%')
-
-    const content = wrapper.text().replace(/\s+/g, ' ')
-    expect(content).toContain('Total: 65%')
-
-    const [runningSection, queuedSection] = wrapper.findAll(
-      SELECTORS.summaryRow
-    )
-    expect(runningSection.text()).toContain('2')
-    expect(runningSection.text()).toContain('running')
-    expect(queuedSection.text()).toContain('3')
-    expect(queuedSection.text()).toContain('queued')
-
-    const currentNodeSection = wrapper.find(SELECTORS.currentNodeRow)
-    expect(currentNodeSection.text()).toContain('Current node:')
-    expect(currentNodeSection.text()).toContain('Sampler')
-    expect(currentNodeSection.text()).toContain('40%')
-
-    const interruptButton = wrapper.get(SELECTORS.interruptAllButton)
-    await interruptButton.trigger('click')
-    expect(wrapper.emitted('interruptAll')).toHaveLength(1)
-
-    const clearQueuedButton = wrapper.get(SELECTORS.clearQueuedButton)
-    await clearQueuedButton.trigger('click')
-    expect(wrapper.emitted('clearQueued')).toHaveLength(1)
-
-    const buttons = wrapper.findAll('button')
-    const viewAllButton = buttons.find((btn) =>
-      btn.text().includes(COPY.viewAllJobs)
-    )
-    expect(viewAllButton).toBeDefined()
-    await viewAllButton!.trigger('click')
-    expect(wrapper.emitted('viewAllJobs')).toHaveLength(1)
-
-    expect(wrapper.find('.custom-bottom-row').exists()).toBe(true)
-  })
-
-  it('hides action buttons when counts are zero', () => {
-    const wrapper = mountComponent({ runningCount: 0, queuedCount: 0 })
-
-    expect(wrapper.find(SELECTORS.interruptAllButton).exists()).toBe(false)
-    expect(wrapper.find(SELECTORS.clearQueuedButton).exists()).toBe(false)
-  })
-
-  it('builds tooltip configs with translated strings', () => {
-    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
-
-    mountComponent()
-
-    expect(spy).toHaveBeenCalledWith('Cancel job')
-    expect(spy).toHaveBeenCalledWith('Clear queue')
-  })
-})

src/components/queue/QueueOverlayActive.vue

@@ -1,124 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3 p-2">
-    <div class="flex flex-col gap-1">
-      <div
-        class="relative h-2 w-full overflow-hidden rounded-full border border-interface-stroke bg-interface-panel-surface"
-      >
-        <div
-          class="absolute inset-0 h-full rounded-full transition-[width]"
-          :style="totalProgressStyle"
-        />
-        <div
-          class="absolute inset-0 h-full rounded-full transition-[width]"
-          :style="currentNodeProgressStyle"
-        />
-      </div>
-      <div class="flex items-start justify-end gap-4 text-[12px] leading-none">
-        <div class="flex items-center gap-1 text-text-primary opacity-90">
-          <i18n-t keypath="sideToolbar.queueProgressOverlay.total">
-            <template #percent>
-              <span class="font-bold">{{ totalPercentFormatted }}</span>
-            </template>
-          </i18n-t>
-        </div>
-        <div class="flex items-center gap-1 text-text-secondary">
-          <span>{{ t('sideToolbar.queueProgressOverlay.currentNode') }}</span>
-          <span class="inline-block max-w-[10rem] truncate">{{
-            currentNodeName
-          }}</span>
-          <span class="flex items-center gap-1">
-            <span>{{ currentNodePercentFormatted }}</span>
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <div :class="bottomRowClass">
-      <div class="flex items-center gap-4 text-[12px] text-text-primary">
-        <div class="flex items-center gap-2">
-          <span class="opacity-90">
-            <span class="font-bold">{{ runningCount }}</span>
-            <span class="ml-1">{{
-              t('sideToolbar.queueProgressOverlay.running')
-            }}</span>
-          </span>
-          <Button
-            v-if="runningCount > 0"
-            v-tooltip.top="cancelJobTooltip"
-            variant="destructive"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
-            @click="$emit('interruptAll')"
-          >
-            <i
-              class="icon-[lucide--x] block size-4 leading-none text-text-primary"
-            />
-          </Button>
-        </div>
-
-        <div class="flex items-center gap-2">
-          <span class="opacity-90">
-            <span class="font-bold">{{ queuedCount }}</span>
-            <span class="ml-1">{{
-              t('sideToolbar.queueProgressOverlay.queuedSuffix')
-            }}</span>
-          </span>
-          <Button
-            v-if="queuedCount > 0"
-            v-tooltip.top="clearQueueTooltip"
-            variant="destructive"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
-            @click="$emit('clearQueued')"
-          >
-            <i
-              class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
-            />
-          </Button>
-        </div>
-      </div>
-
-      <Button
-        class="min-w-30 flex-1 px-2 py-0"
-        variant="secondary"
-        size="md"
-        @click="$emit('viewAllJobs')"
-      >
-        {{ t('sideToolbar.queueProgressOverlay.viewAllJobs') }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-
-defineProps<{
-  totalProgressStyle: Record<string, string>
-  currentNodeProgressStyle: Record<string, string>
-  totalPercentFormatted: string
-  currentNodePercentFormatted: string
-  currentNodeName: string
-  runningCount: number
-  queuedCount: number
-  bottomRowClass: string
-}>()
-
-defineEmits<{
-  (e: 'interruptAll'): void
-  (e: 'clearQueued'): void
-  (e: 'viewAllJobs'): void
-}>()
-
-const { t } = useI18n()
-const cancelJobTooltip = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.cancelJobTooltip'))
-)
-const clearQueueTooltip = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearQueueTooltip'))
-)
-</script>

src/components/queue/QueueOverlayExpanded.vue

@@ -1,61 +1,39 @@
 <template>
-  <div class="flex w-full flex-col gap-4">
+  <div class="flex w-full flex-col gap-2">
     <QueueOverlayHeader
       :header-title="headerTitle"
       :show-concurrent-indicator="showConcurrentIndicator"
       :concurrent-workflow-count="concurrentWorkflowCount"
       @clear-history="$emit('clearHistory')"
+      @close="$emit('close')"
     />
 
-    <div class="flex items-center justify-between px-3">
-      <IconTextButton
-        class="grow gap-1 p-2 text-center font-inter text-[12px] leading-none hover:opacity-90 justify-center"
-        type="secondary"
-        :label="t('sideToolbar.queueProgressOverlay.showAssets')"
-        :aria-label="t('sideToolbar.queueProgressOverlay.showAssets')"
-        @click="$emit('showAssets')"
+    <div
+      class="flex h-8 items-center justify-between px-3 text-[12px] leading-none"
+    >
+      <span class="text-muted-foreground">
+        {{ activeJobsCount }}
+        {{ t('sideToolbar.queueProgressOverlay.activeJobsSuffix') }}
+      </span>
+      <div
+        v-if="queuedCount > 0"
+        class="inline-flex items-center gap-2 text-text-primary"
       >
-        <template #icon>
-          <div
-            class="pointer-events-none block size-4 shrink-0 leading-none icon-[comfy--image-ai-edit]"
-            aria-hidden="true"
-          />
-        </template>
-      </IconTextButton>
-      <div class="ml-4 inline-flex items-center">
-        <div
-          class="inline-flex h-6 items-center text-[12px] leading-none text-text-primary opacity-90"
-        >
-          <span class="font-bold">{{ queuedCount }}</span>
-          <span class="ml-1">{{
-            t('sideToolbar.queueProgressOverlay.queuedSuffix')
-          }}</span>
-        </div>
-        <Button
-          v-if="queuedCount > 0"
-          class="ml-2"
-          variant="destructive"
-          size="icon"
-          :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+        <span class="opacity-90">
+          {{ t('sideToolbar.queueProgressOverlay.clearQueue') }}
+        </span>
+        <IconButton
+          type="transparent"
+          size="sm"
+          class="size-8 rounded-lg bg-destructive-background text-base-foreground hover:bg-destructive-background-hover transition-colors"
+          :aria-label="t('sideToolbar.queueProgressOverlay.clearQueue')"
           @click="$emit('clearQueued')"
         >
           <i class="icon-[lucide--list-x] size-4" />
-        </Button>
+        </IconButton>
       </div>
     </div>
 
-    <JobFiltersBar
-      :selected-job-tab="selectedJobTab"
-      :selected-workflow-filter="selectedWorkflowFilter"
-      :selected-sort-mode="selectedSortMode"
-      :has-failed-jobs="hasFailedJobs"
-      @update:selected-job-tab="$emit('update:selectedJobTab', $event)"
-      @update:selected-workflow-filter="
-        $emit('update:selectedWorkflowFilter', $event)
-      "
-      @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
-    />
-
     <div class="flex-1 min-h-0 overflow-y-auto">
       <JobGroupsList
         :displayed-job-groups="displayedJobGroups"
@@ -78,20 +56,13 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconTextButton from '@/components/button/IconTextButton.vue'
-import Button from '@/components/ui/button/Button.vue'
-import type {
-  JobGroup,
-  JobListItem,
-  JobSortMode,
-  JobTab
-} from '@/composables/queue/useJobList'
+import IconButton from '@/components/button/IconButton.vue'
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 import { useJobMenu } from '@/composables/queue/useJobMenu'
 
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import JobContextMenu from './job/JobContextMenu.vue'
-import JobFiltersBar from './job/JobFiltersBar.vue'
 import JobGroupsList from './job/JobGroupsList.vue'
 
 defineProps<{
@@ -99,20 +70,14 @@ defineProps<{
   showConcurrentIndicator: boolean
   concurrentWorkflowCount: number
   queuedCount: number
-  selectedJobTab: JobTab
-  selectedWorkflowFilter: 'all' | 'current'
-  selectedSortMode: JobSortMode
+  activeJobsCount: number
   displayedJobGroups: JobGroup[]
-  hasFailedJobs: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'showAssets'): void
   (e: 'clearHistory'): void
   (e: 'clearQueued'): void
-  (e: 'update:selectedJobTab', value: JobTab): void
-  (e: 'update:selectedWorkflowFilter', value: 'all' | 'current'): void
-  (e: 'update:selectedSortMode', value: JobSortMode): void
+  (e: 'close'): void
   (e: 'cancelItem', item: JobListItem): void
   (e: 'deleteItem', item: JobListItem): void
   (e: 'viewItem', item: JobListItem): void

src/components/queue/QueueOverlayHeader.test.ts

@@ -36,7 +36,7 @@ const i18n = createI18n({
   locale: 'en',
   messages: {
     en: {
-      g: { more: 'More' },
+      g: { more: 'More', close: 'Close' },
       sideToolbar: {
         queueProgressOverlay: {
           running: 'running',
@@ -95,4 +95,13 @@ describe('QueueOverlayHeader', () => {
     expect(popoverHideSpy).toHaveBeenCalledTimes(1)
     expect(wrapper.emitted('clearHistory')).toHaveLength(1)
   })
+
+  it('emits close when close button is clicked', async () => {
+    const wrapper = mountHeader()
+
+    const closeButton = wrapper.get('button[aria-label="Close"]')
+    await closeButton.trigger('click')
+
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
 })

src/components/queue/QueueOverlayHeader.vue

@@ -17,18 +17,19 @@
         </span>
       </span>
     </div>
-    <div v-if="!isCloud" class="flex items-center gap-1">
-      <Button
+    <div class="flex items-center gap-1">
+      <IconButton
         v-tooltip.top="moreTooltipConfig"
-        variant="textonly"
-        size="icon"
+        type="transparent"
+        size="sm"
+        class="size-6 bg-transparent hover:bg-secondary-background hover:opacity-100"
         :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
         @click="onMoreClick"
       >
         <i
           class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
         />
-      </Button>
+      </IconButton>
       <Popover
         ref="morePopoverRef"
         :dismissable="true"
@@ -61,6 +62,19 @@
           </IconTextButton>
         </div>
       </Popover>
+      <IconButton
+        v-tooltip.top="closeTooltipConfig"
+        type="transparent"
+        size="sm"
+        class="size-6 bg-transparent hover:bg-secondary-background hover:opacity-100"
+        :aria-label="t('g.close')"
+        data-testid="queue-overlay-close-button"
+        @click="onCloseClick"
+      >
+        <i
+          class="icon-[lucide--x] block size-4 leading-none text-text-secondary"
+        />
+      </IconButton>
     </div>
   </div>
 </template>
@@ -71,10 +85,9 @@ import type { PopoverMethods } from 'primevue/popover'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import { isCloud } from '@/platform/distribution/types'
 
 defineProps<{
   headerTitle: string
@@ -84,16 +97,19 @@ defineProps<{
 
 const emit = defineEmits<{
   (e: 'clearHistory'): void
+  (e: 'close'): void
 }>()
 
 const { t } = useI18n()
 
 const morePopoverRef = ref<PopoverMethods | null>(null)
+const closeTooltipConfig = computed(() => buildTooltipConfig(t('g.close')))
 const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 
 const onMoreClick = (event: MouseEvent) => {
   morePopoverRef.value?.toggle(event)
 }
+const onCloseClick = () => emit('close')
 const onClearHistoryFromMenu = () => {
   morePopoverRef.value?.hide()
   emit('clearHistory')

src/components/queue/QueueProgressOverlay.vue

@@ -6,45 +6,26 @@
     <div
       class="pointer-events-auto flex w-[350px] min-w-[310px] max-h-[60vh] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
       :class="containerClass"
-      @mouseenter="isHovered = true"
-      @mouseleave="isHovered = false"
+      data-testid="queue-overlay"
     >
       <!-- Expanded state -->
       <QueueOverlayExpanded
         v-if="isExpanded"
-        v-model:selected-job-tab="selectedJobTab"
-        v-model:selected-workflow-filter="selectedWorkflowFilter"
-        v-model:selected-sort-mode="selectedSortMode"
         class="flex-1 min-h-0"
         :header-title="headerTitle"
         :show-concurrent-indicator="showConcurrentIndicator"
         :concurrent-workflow-count="concurrentWorkflowCount"
+        :active-jobs-count="activeJobsCount"
         :queued-count="queuedCount"
         :displayed-job-groups="displayedJobGroups"
-        :has-failed-jobs="hasFailedJobs"
-        @show-assets="openAssetsSidebar"
         @clear-history="onClearHistoryFromMenu"
         @clear-queued="cancelQueuedWorkflows"
+        @close="closeOverlay"
         @cancel-item="onCancelItem"
         @delete-item="onDeleteItem"
         @view-item="inspectJobAsset"
       />
 
-      <QueueOverlayActive
-        v-else-if="hasActiveJob"
-        :total-progress-style="totalProgressStyle"
-        :current-node-progress-style="currentNodeProgressStyle"
-        :total-percent-formatted="totalPercentFormatted"
-        :current-node-percent-formatted="currentNodePercentFormatted"
-        :current-node-name="currentNodeName"
-        :running-count="runningCount"
-        :queued-count="queuedCount"
-        :bottom-row-class="bottomRowClass"
-        @interrupt-all="interruptAll"
-        @clear-queued="cancelQueuedWorkflows"
-        @view-all-jobs="viewAllJobs"
-      />
-
       <QueueOverlayEmpty
         v-else-if="completionSummary"
         :summary="completionSummary"
@@ -63,7 +44,6 @@
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
 import QueueOverlayEmpty from '@/components/queue/QueueOverlayEmpty.vue'
 import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
 import QueueClearHistoryDialog from '@/components/queue/dialogs/QueueClearHistoryDialog.vue'
@@ -71,11 +51,9 @@ import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import { useCompletionSummary } from '@/composables/queue/useCompletionSummary'
 import { useJobList } from '@/composables/queue/useJobList'
 import type { JobListItem } from '@/composables/queue/useJobList'
-import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { useResultGallery } from '@/composables/queue/useResultGallery'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
-import { isCloud } from '@/platform/distribution/types'
 import { api } from '@/scripts/api'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -84,17 +62,11 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
-type OverlayState = 'hidden' | 'empty' | 'active' | 'expanded'
+type OverlayState = 'hidden' | 'empty' | 'expanded'
 
-const props = withDefaults(
-  defineProps<{
-    expanded?: boolean
-    menuHovered?: boolean
-  }>(),
-  {
-    menuHovered: false
-  }
-)
+const props = defineProps<{
+  expanded?: boolean
+}>()
 
 const emit = defineEmits<{
   (e: 'update:expanded', value: boolean): void
@@ -110,14 +82,6 @@ const assetsStore = useAssetsStore()
 const assetSelectionStore = useAssetSelectionStore()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
-const {
-  totalPercentFormatted,
-  currentNodePercentFormatted,
-  totalProgressStyle,
-  currentNodeProgressStyle
-} = useQueueProgress()
-const isHovered = ref(false)
-const isOverlayHovered = computed(() => isHovered.value || props.menuHovered)
 const internalExpanded = ref(false)
 const isExpanded = computed({
   get: () =>
@@ -141,16 +105,12 @@ const activeJobsCount = computed(() => runningCount.value + queuedCount.value)
 
 const overlayState = computed<OverlayState>(() => {
   if (isExpanded.value) return 'expanded'
-  if (hasActiveJob.value) return 'active'
   if (hasCompletionSummary.value) return 'empty'
   return 'hidden'
 })
 
 const showBackground = computed(
-  () =>
-    overlayState.value === 'expanded' ||
-    overlayState.value === 'empty' ||
-    (overlayState.value === 'active' && isOverlayHovered.value)
+  () => overlayState.value === 'expanded' || overlayState.value === 'empty'
 )
 
 const isVisible = computed(() => overlayState.value !== 'hidden')
@@ -161,14 +121,6 @@ const containerClass = computed(() =>
     : 'border-transparent bg-transparent shadow-none'
 )
 
-const bottomRowClass = computed(
-  () =>
-    `flex items-center justify-end gap-4 transition-opacity duration-200 ease-in-out ${
-      overlayState.value === 'active' && isOverlayHovered.value
-        ? 'opacity-100 pointer-events-auto'
-        : 'opacity-0 pointer-events-none'
-    }`
-)
 const headerTitle = computed(() =>
   hasActiveJob.value
     ? `${activeJobsCount.value} ${t('sideToolbar.queueProgressOverlay.activeJobsSuffix')}`
@@ -182,15 +134,7 @@ const showConcurrentIndicator = computed(
   () => concurrentWorkflowCount.value > 1
 )
 
-const {
-  selectedJobTab,
-  selectedWorkflowFilter,
-  selectedSortMode,
-  hasFailedJobs,
-  filteredTasks,
-  groupedJobItems,
-  currentNodeName
-} = useJobList()
+const { orderedTasks, groupedJobItems } = useJobList()
 
 const displayedJobGroups = computed(() => groupedJobItems.value)
 
@@ -209,17 +153,17 @@ const {
   galleryActiveIndex,
   galleryItems,
   onViewItem: openResultGallery
-} = useResultGallery(() => filteredTasks.value)
+} = useResultGallery(() => orderedTasks.value)
 
 const setExpanded = (expanded: boolean) => {
   isExpanded.value = expanded
 }
 
-const openExpandedFromEmpty = () => {
-  setExpanded(true)
+const closeOverlay = () => {
+  setExpanded(false)
 }
 
-const viewAllJobs = () => {
+const openExpandedFromEmpty = () => {
   setExpanded(true)
 }
 
@@ -262,25 +206,6 @@ const cancelQueuedWorkflows = wrapWithErrorHandlingAsync(async () => {
   await commandStore.execute('Comfy.ClearPendingTasks')
 })
 
-const interruptAll = wrapWithErrorHandlingAsync(async () => {
-  const tasks = queueStore.runningTasks
-  const promptIds = tasks
-    .map((task) => task.promptId)
-    .filter((id): id is string => typeof id === 'string' && id.length > 0)
-
-  if (!promptIds.length) return
-
-  // Cloud backend supports cancelling specific jobs via /queue delete,
-  // while /interrupt always targets the "first" job. Use the targeted API
-  // on cloud to ensure we cancel the workflow the user clicked.
-  if (isCloud) {
-    await Promise.all(promptIds.map((id) => api.deleteItem('queue', id)))
-    return
-  }
-
-  await Promise.all(promptIds.map((id) => api.interrupt(id)))
-})
-
 const showClearHistoryDialog = () => {
   dialogStore.showDialog({
     key: 'queue-clear-history',

src/components/queue/dialogs/QueueClearHistoryDialog.vue

@@ -8,14 +8,15 @@
       <p class="m-0 text-[14px] font-normal leading-none">
         {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
       </p>
-      <Button
-        size="icon"
-        variant="muted-textonly"
+      <IconButton
+        type="transparent"
+        size="sm"
+        class="size-6 bg-transparent text-text-secondary hover:bg-secondary-background hover:opacity-100"
         :aria-label="t('g.close')"
         @click="onCancel"
       >
         <i class="icon-[lucide--x] block size-4 leading-none" />
-      </Button>
+      </IconButton>
     </header>
 
     <div class="flex flex-col gap-4 px-4 py-4 text-[14px] text-text-secondary">
@@ -30,17 +31,20 @@
     </div>
 
     <footer class="flex items-center justify-end px-4 py-4">
-      <div class="flex items-center gap-4 leading-none">
-        <Button variant="muted-textonly" size="lg" @click="onCancel">
-          {{ t('g.cancel') }}
-        </Button>
-        <Button
-          variant="secondary"
-          size="lg"
+      <div class="flex items-center gap-4 text-[14px] leading-none">
+        <TextButton
+          class="min-h-[24px] px-1 py-1 text-[14px] leading-[1] text-text-secondary hover:text-text-primary"
+          type="transparent"
+          :label="t('g.cancel')"
+          @click="onCancel"
+        />
+        <TextButton
+          class="min-h-[32px] px-4 py-2 text-[12px] font-normal leading-[1]"
+          type="secondary"
+          :label="t('g.clear')"
           :disabled="isClearing"
           @click="onConfirm"
-          >{{ t('g.clear') }}</Button
-        >
+        />
       </div>
     </footer>
   </section>
@@ -50,7 +54,8 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
+import IconButton from '@/components/button/IconButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useQueueStore } from '@/stores/queueStore'

src/components/queue/job/JobDetailsPopover.vue

@@ -20,15 +20,18 @@
             class="flex min-w-0 items-center text-[0.75rem] leading-normal font-normal text-text-secondary"
           >
             <span class="block min-w-0 truncate">{{ row.value }}</span>
-            <Button
+            <IconButton
               v-if="row.canCopy"
-              size="icon"
-              variant="muted-textonly"
+              type="transparent"
+              size="sm"
+              class="ml-2 size-6 bg-transparent hover:opacity-90"
               :aria-label="copyAriaLabel"
               @click.stop="copyJobId"
             >
-              <i class="icon-[lucide--copy] size-4" />
-            </Button>
+              <i
+                class="icon-[lucide--copy] block size-4 leading-none text-text-secondary"
+              />
+            </IconButton>
           </div>
         </template>
       </div>
@@ -98,8 +101,8 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { isCloud } from '@/platform/distribution/types'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -118,13 +121,14 @@ const props = defineProps<{
   workflowId?: string
 }>()
 
+const { locale, t } = useI18n()
+
 const copyAriaLabel = computed(() => t('g.copy'))
 
 const workflowStore = useWorkflowStore()
 const queueStore = useQueueStore()
 const executionStore = useExecutionStore()
 const dialog = useDialogService()
-const { locale, t } = useI18n()
 
 const workflowValue = computed(() => {
   const wid = props.workflowId
@@ -256,6 +260,22 @@ const estimatedFinishInValue = computed(() => {
 
 type DetailRow = { label: string; value: string; canCopy?: boolean }
 
+const formatComputeHours = (execMs: number | undefined) => {
+  if (execMs === undefined) return ''
+  const hours = Math.max(0, execMs) / 3600000
+  const formatHours = (value: number) =>
+    new Intl.NumberFormat(locale.value, {
+      minimumFractionDigits: 3,
+      maximumFractionDigits: 3
+    }).format(value)
+  if (hours > 0 && hours < 0.001) {
+    return t('queue.jobDetails.computeHoursValueLessThan', {
+      hours: formatHours(0.001)
+    })
+  }
+  return t('queue.jobDetails.computeHoursValue', { hours: formatHours(hours) })
+}
+
 const baseRows = computed<DetailRow[]>(() => [
   { label: t('queue.jobDetails.workflow'), value: workflowValue.value },
   { label: t('queue.jobDetails.jobId'), value: jobIdValue.value, canCopy: true }
@@ -306,8 +326,7 @@ const extraRows = computed<DetailRow[]>(() => {
     const generatedOnValue = endTs ? formatClockTime(endTs, locale.value) : ''
     const totalGenTimeValue =
       execMs !== undefined ? formatElapsedTime(execMs) : ''
-    const computeHoursValue =
-      execMs !== undefined ? (execMs / 3600000).toFixed(3) + ' hours' : ''
+    const computeHoursValue = formatComputeHours(execMs)
 
     const rows: DetailRow[] = [
       { label: t('queue.jobDetails.generatedOn'), value: generatedOnValue },
@@ -329,8 +348,7 @@ const extraRows = computed<DetailRow[]>(() => {
     const execMs: number | undefined = task?.executionTime
     const failedAfterValue =
       execMs !== undefined ? formatElapsedTime(execMs) : ''
-    const computeHoursValue =
-      execMs !== undefined ? (execMs / 3600000).toFixed(3) + ' hours' : ''
+    const computeHoursValue = formatComputeHours(execMs)
     const rows: DetailRow[] = [
       { label: t('queue.jobDetails.queuedAt'), value: queuedAtValue.value },
       { label: t('queue.jobDetails.failedAfter'), value: failedAfterValue }