Move run button up, fix font color

Simpler than fully untangling dependencies, but still pushes towards it

.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=false
+# VITE_REMOTE_DEV=true
 
 # 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=false
+# DISABLE_TEMPLATES_PROXY=true
 
 # 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=false
+# DISABLE_VUE_PLUGINS=true
 
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8

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

@@ -45,6 +45,7 @@ jobs:
   playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
+    timeout-minutes: 60
     permissions:
       contents: read
     strategy:

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

@@ -1,12 +1,12 @@
-# Automated weekly workflow to bump ComfyUI frontend RC releases
-name: "Release: Weekly ComfyUI"
+# Automated bi-weekly workflow to bump ComfyUI frontend RC releases
+name: "Release: Bi-weekly ComfyUI"
 
 on:
   # Schedule for Monday at 12:00 PM PST (20:00 UTC)
   schedule:
     - cron: '0 20 * * 1'
 
-  # Allow manual triggering
+  # Allow manual triggering (bypasses bi-weekly check)
   workflow_dispatch:
     inputs:
       comfyui_fork:
@@ -16,7 +16,39 @@ 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 }}
@@ -131,8 +163,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: [resolve-version, trigger-release-if-needed]
-    if: always() && needs.resolve-version.result == 'success'
+    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')
     runs-on: ubuntu-latest
 
     steps:
@@ -231,7 +263,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 week)
+          # Create/update branch (reuse same branch name each release cycle)
           BRANCH="automation/comfyui-frontend-bump"
           git checkout -B "$BRANCH"
           git add requirements.txt
@@ -243,7 +275,7 @@ jobs:
             exit 0
           fi
 
-          # Force push to fork (overwrites previous week's branch)
+          # Force push to fork (overwrites previous release cycle'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

.i18nrc.cjs

@@ -10,7 +10,7 @@ module.exports = defineConfig({
   entryLocale: 'en',
   output: 'src/locales',
   outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   

.npmrc

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

AGENTS.md

@@ -150,7 +150,8 @@ 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. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
+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
 
 ## Testing Guidelines
 
@@ -214,6 +215,29 @@ 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.)
@@ -242,3 +266,16 @@ When referencing Comfy-Org repos:
   - Always use `import { cn } from '@/utils/tailwindUtil'`
     - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
   - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
+- NEVER use `!important` or the `!` important prefix for tailwind classes
+  - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
+
+## Agent-only rules
+
+Rules for agent-based coding tasks.
+
+### Temporary Files
+
+- Put planning documents under `/temp/plans/`
+- Put scripts used under `/temp/scripts/`
+- Put summaries of work performed under `/temp/summaries/`
+- Put TODOs and status updates under `/temp/in_progress/`

CODEOWNERS

@@ -46,7 +46,6 @@
 # Mask Editor
 /src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
 /src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorOld.ts             @trsommer @brucew4yn3rp
 
 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88

CONTRIBUTING.md

@@ -17,17 +17,9 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (v18 or later to build; v24 for vite dev server) and pnpm
+  - Node.js (v24) and pnpm
   - Git for version control
-  - 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
+  - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 
 ### Initial Setup
 
@@ -55,15 +47,18 @@ To launch ComfyUI and have it connect to your development server:
 python main.py --port 8188
 ```
 
-### Git pre-commit hooks
+If you are on Mac or a low-spec machine, you can run the server in CPU mode
 
-Run `pnpm prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
+```bash
+python main.py --port 8188 --cpu
+```
 
 ### 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
 
@@ -113,7 +108,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
-   - `1.24` - targets the `core/1.24` release candidate branch
+   - `core/1.24` - targets the `core/1.24` release candidate branch
    
 3. Merge your PR normally
 4. The automated workflow will:
@@ -145,67 +140,6 @@ 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
@@ -215,7 +149,7 @@ Here's how Claude Code can use the Playwright MCP server to inspect the interfac
 
 ### Playwright Tests
 
-Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details.
+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.
 
 ### Running All Tests
 
@@ -223,7 +157,6 @@ Before submitting a PR, ensure all tests pass:
 
 ```bash
 pnpm test:unit
-pnpm test:browser
 pnpm typecheck
 pnpm lint
 pnpm format
@@ -232,23 +165,32 @@ 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` theme, e.g. `bg-node-component-surface`
+- 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`
+
+## Design Team Approval (Required for Notable UI Changes)
+
+Changes that materially affect the default UI must be approved or requested by our design team before they can be merged. This is generally a blocking requirement and applies to internal contributors and OSS contributors alike.
 
 ### Internationalization
+
 - All user-facing strings must use vue-i18n
-- Add translations to `src/locales/en/main.json`
+- Add translations to [src/locales/en/main.json](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
 
@@ -282,34 +224,12 @@ 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
-
-### 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
-```
+   - `feat:` for new features
+   - `fix:` for bug fixes
+   - `docs:` for documentation
+   - `refactor:` for code refactoring
+   - `test:` for test additions/changes
+   - `chore:` for maintenance tasks
 
 ### Review Process
 
@@ -325,4 +245,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 ComfyUI Frontend!
+Thank you for contributing to the 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** - 1 week
+1. **Development Phase** - 2 weeks
    - Active development of new features
    - Code changes merged to the development branch
 
-2. **Feature Freeze** - 1 week
+2. **Feature Freeze** - 2 weeks
    - 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.
+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).
 
 ### Example Release Cycle
 
 | Week | Date Range | Version 1.1 | Version 1.2 | Version 1.3 | Patch Releases |
 |------|------------|-------------|-------------|-------------|----------------|
-| 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) |
+| 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) |
 
 ## Release Summary
 

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

@@ -0,0 +1,412 @@
+{
+  "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/helpers/templates.ts

@@ -26,10 +26,9 @@ export class ComfyTemplates {
   }
 
   async loadTemplate(id: string) {
-    await this.content
-      .getByTestId(`template-workflow-${id}`)
-      .getByRole('img')
-      .click()
+    const templateCard = this.content.getByTestId(`template-workflow-${id}`)
+    await templateCard.scrollIntoViewIfNeeded()
+    await templateCard.getByRole('img').click()
   }
 
   async getAllTemplates(): Promise<TemplateInfo[]> {

browser_tests/tests/nodeHelp.spec.ts

@@ -553,12 +553,6 @@ This is English documentation.
       )
       await selectNodeWithPan(comfyPage, checkpointNodes[0])
 
-      // Click help button again
-      const helpButton2 = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton2.click()
-
       // Content should update
       await expect(helpPage).toContainText('Checkpoint Loader Help')
       await expect(helpPage).toContainText(

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 }).click()
+    await comfyPage.page.getByText('Shape', { exact: true }).hover()
     await expect(comfyPage.page.getByText('Box', { exact: true })).toBeVisible({
       timeout: 5000
     })
@@ -136,13 +136,18 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     comfyPage
   }) => {
     await openMoreOptions(comfyPage)
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).toBeVisible({ timeout: 5000 })
+    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 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/templates.spec.ts

@@ -109,14 +109,14 @@ test.describe('Templates', () => {
   })
 
   test('Uses proper locale files for templates', async ({ comfyPage }) => {
-    // Set locale to French before opening templates
-    await comfyPage.setSetting('Comfy.Locale', 'fr')
-
     // Load the templates dialog and wait for the French index file request
     const requestPromise = comfyPage.page.waitForRequest(
       '**/templates/index.fr.json'
     )
 
+    // Set locale to French before opening templates
+    await comfyPage.setSetting('Comfy.Locale', 'fr')
+
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
 
     const request = await requestPromise

browser_tests/tests/viewport.spec.ts

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

@@ -205,6 +205,32 @@ test.describe('Image widget', () => {
     const filename = await fileComboWidget.getValue()
     expect(filename).toBe('image32x32.webp')
   })
+  test('Displays buttons when viewing single image of batch', async ({
+    comfyPage
+  }) => {
+    const [x, y] = await comfyPage.page.evaluate(() => {
+      const src =
+        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='512' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' stroke='black'/%3E%3C/svg%3E"
+      const image1 = new Image()
+      image1.src = src
+      const image2 = new Image()
+      image2.src = src
+      const targetNode = graph.nodes[6]
+      targetNode.imgs = [image1, image2]
+      targetNode.imageIndex = 1
+      app.canvas.setDirty(true)
+
+      const x = targetNode.pos[0] + targetNode.size[0] - 41
+      const y = targetNode.pos[1] + targetNode.widgets.at(-1).last_y + 30
+      return app.canvasPosToClientPos([x, y])
+    })
+
+    const clip = { x, y, width: 35, height: 35 }
+    await expect(comfyPage.page).toHaveScreenshot(
+      'image_preview_close_button.png',
+      { clip }
+    )
+  })
 })
 
 test.describe('Animated image widget', () => {
@@ -262,13 +288,7 @@ test.describe('Animated image widget', () => {
     expect(filename).toContain('animated_webp.webp')
   })
 
-  // FIXME: This test keeps flip-flopping because it relies on animated webp timing,
-  // which is inherently unreliable in CI environments. The test asset is an animated
-  // webp with 2 frames, and the test depends on animation frame timing to verify that
-  // animated webp images are properly displayed (as opposed to being treated as static webp).
-  // While the underlying functionality works (animated webp are correctly distinguished
-  // from static webp), the test is flaky due to timing dependencies with webp animation frames.
-  test.fixme('Can preview saved animated webp image', async ({ comfyPage }) => {
+  test('Can preview saved animated webp image', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/save_animated_webp')
 
     // Get position of the load animated webp node
@@ -295,18 +315,13 @@ test.describe('Animated image widget', () => {
       ([loadId, saveId]) => {
         // Set the output of the SaveAnimatedWEBP node to equal the loader node's image
         window['app'].nodeOutputs[saveId] = window['app'].nodeOutputs[loadId]
+        app.canvas.setDirty(true)
       },
       [loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
     )
-    await comfyPage.nextFrame()
-
-    // Move mouse and click on canvas to trigger render
-    await comfyPage.page.mouse.click(64, 64)
-
-    // Expect the SaveAnimatedWEBP node to have an output preview
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'animated_image_preview_saved_webp.png'
-    )
+    await expect(
+      comfyPage.page.locator('.dom-widget').locator('img')
+    ).toHaveCount(2)
   })
 })
 

build/plugins/comfyAPIPlugin.ts

@@ -9,11 +9,7 @@ interface ShimResult {
 const SKIP_WARNING_FILES = new Set(['scripts/app', 'scripts/api'])
 
 /** Files that will be removed in v1.34 */
-const DEPRECATED_FILES = [
-  'scripts/ui',
-  'extensions/core/maskEditorOld',
-  'extensions/core/groupNode'
-] as const
+const DEPRECATED_FILES = ['scripts/ui', 'extensions/core/groupNode'] as const
 
 function getWarningMessage(
   fileKey: string,

docs/extensions/core.md

@@ -41,7 +41,6 @@ The following table lists ALL core extensions in the system as of 2025-01-30:
 | groupOptions.ts | Handles group node configuration options | Graph |
 | index.ts | Main extension registration and coordination | Core |
 | load3d.ts | Supports 3D model loading and visualization | 3D |
-| maskEditorOld.ts | Legacy mask editor implementation | Image |
 | maskeditor.ts | Implements the mask editor for image masking operations | Image |
 | nodeTemplates.ts | Provides node template functionality | Templates |
 | noteNode.ts | Adds note nodes for documentation within workflows | Graph |
@@ -178,4 +177,4 @@ For more detailed information about ComfyUI's extension system, refer to the off
 - [JavaScript Settings](https://docs.comfy.org/custom-nodes/js/javascript_settings)
 - [JavaScript Examples](https://docs.comfy.org/custom-nodes/js/javascript_examples)
 
-Also, check the main [README.md](https://github.com/Comfy-Org/ComfyUI_frontend#developer-apis) section on Developer APIs for the latest information on extension APIs and features.
+Also, check the main [README.md](https://github.com/Comfy-Org/ComfyUI_frontend#developer-apis) section on Developer APIs for the latest information on extension APIs and features.

eslint.config.ts

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.36.3",
+  "version": "1.36.9",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -19,6 +19,7 @@
     "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' nx serve",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
     "dev:electron": "nx serve --config vite.electron.config.mts",
+    "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
@@ -84,7 +85,6 @@
     "eslint-import-resolver-typescript": "catalog:",
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
-    "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-storybook": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
@@ -146,6 +146,7 @@
     "@primevue/icons": "catalog:",
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
+    "@sparkjsdev/spark": "catalog:",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
     "@tiptap/extension-table": "^2.10.4",
@@ -161,6 +162,7 @@
     "algoliasearch": "catalog:",
     "axios": "catalog:",
     "chart.js": "^4.5.0",
+    "cva": "catalog:",
     "dompurify": "^3.2.5",
     "dotenv": "catalog:",
     "es-toolkit": "^1.39.9",

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-200);
+  --secondary-background-hover: var(--color-smoke-400);
   --secondary-background-selected: var(--color-smoke-600);
   --base-background: var(--color-white);
   --primary-background: var(--color-azure-400);
@@ -245,6 +245,7 @@
   --inverted-background-hover: var(--color-charcoal-600);
   --warning-background: var(--color-gold-400);
   --warning-background-hover: var(--color-gold-500);
+  --success-background: var(--color-jade-600);
   --border-default: var(--color-smoke-600);
   --border-subtle: var(--color-smoke-400);
   --muted-background: var(--color-smoke-700);
@@ -370,6 +371,7 @@
   --inverted-background-hover: var(--color-smoke-200);
   --warning-background: var(--color-gold-600);
   --warning-background-hover: var(--color-gold-500);
+  --success-background: var(--color-jade-600);
   --border-default: var(--color-charcoal-200);
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
@@ -514,6 +516,7 @@
   --color-inverted-background-hover: var(--inverted-background-hover);
   --color-warning-background: var(--warning-background);
   --color-warning-background-hover: var(--warning-background-hover);
+  --color-success-background: var(--success-background);
   --color-border-default: var(--border-default);
   --color-border-subtle: var(--border-subtle);
   --color-muted-background: var(--muted-background);

packages/registry-types/src/comfyRegistryTypes.ts

@@ -217,6 +217,28 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/verify-api-key": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Verify a ComfyUI API key and return customer details
+         * @description Validates a ComfyUI API key and returns the associated customer information.
+         *     This endpoint is used by cloud.comfy.org to authenticate users via API keys
+         *     instead of Firebase tokens.
+         */
+        post: operations["VerifyApiKey"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/admin/customers/{customer_id}/cloud-subscription-status": {
         parameters: {
             query?: never;
@@ -2154,6 +2176,26 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/bfl/flux-2-max/generate": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Proxy request to BFL Flux 2 Max for image generation
+         * @description Forwards image generation requests to BFL's Flux 2 Max API and returns the results. Supports image-to-image generation with up to 8 input images.
+         */
+        post: operations["bflFlux2MaxGenerate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/proxy/bfl/flux-pro-1.0-expand/generate": {
         parameters: {
             query?: never;
@@ -3911,6 +3953,11 @@ export interface components {
          * @enum {string}
          */
         SubscriptionTier: "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
+        /**
+         * @description The subscription billing duration
+         * @enum {string}
+         */
+        SubscriptionDuration: "MONTHLY" | "ANNUAL";
         FeaturesResponse: {
             /**
              * @description The conversion rate for partner nodes
@@ -4757,13 +4804,13 @@ export interface components {
          * @default kling-v1
          * @enum {string}
          */
-        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo";
+        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
         /**
          * @description Model Name
          * @default kling-v2-master
          * @enum {string}
          */
-        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo";
+        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
         /**
          * @description Video generation mode. std: Standard Mode, which is cost-effective. pro: Professional Mode, generates videos with longer duration but higher quality output.
          * @default std
@@ -4908,6 +4955,12 @@ export interface components {
             camera_control?: components["schemas"]["KlingCameraControl"];
             aspect_ratio?: components["schemas"]["KlingVideoGenAspectRatio"];
             duration?: components["schemas"]["KlingVideoGenDuration"];
+            /**
+             * @description Whether to generate sound simultaneously when generating videos. Only V2.6 and subsequent versions of the model support this parameter.
+             * @default off
+             * @enum {string}
+             */
+            sound: "on" | "off";
             /**
              * Format: uri
              * @description The callback notification address
@@ -4970,6 +5023,12 @@ export interface components {
             camera_control?: components["schemas"]["KlingCameraControl"];
             aspect_ratio?: components["schemas"]["KlingVideoGenAspectRatio"];
             duration?: components["schemas"]["KlingVideoGenDuration"];
+            /**
+             * @description Whether to generate sound simultaneously when generating videos. Only V2.6 and subsequent versions of the model support this parameter.
+             * @default off
+             * @enum {string}
+             */
+            sound: "on" | "off";
             /**
              * Format: uri
              * @description The callback notification address. Server will notify when the task status changes.
@@ -5759,7 +5818,7 @@ export interface components {
             width: number;
             /**
              * @description Height of the image.
-             * @default 768
+             * @default 1024
              */
             height: number;
             /** @description Seed for reproducibility. */
@@ -5775,6 +5834,11 @@ export interface components {
              * @enum {string}
              */
             output_format: "jpeg" | "png";
+            /**
+             * @description Moderation tolerance level (Flux 2 Max only).
+             * @default 2
+             */
+            safety_tolerance: number;
         };
         /** FluxProFillInputs */
         BFLFluxProFillInputs: {
@@ -6973,6 +7037,10 @@ export interface components {
                     image_tokens?: number;
                 };
                 output_tokens?: number;
+                output_tokens_details?: {
+                    text_tokens?: number;
+                    image_tokens?: number;
+                };
                 total_tokens?: number;
             };
         };
@@ -10356,40 +10424,76 @@ export interface components {
              * @description The ID of the model to call
              * @enum {string}
              */
-            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview";
+            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview" | "wan2.6-t2v" | "wan2.6-i2v";
             /** @description Enter basic information, such as prompt words, etc. */
             input: {
-                /** @description Text prompt words. Support Chinese and English, length not exceeding 800 characters */
+                /**
+                 * @description Text prompt words. Support Chinese and English, length not exceeding 800 characters.
+                 *     For wan2.6-r2v with multiple reference videos, use 'character1', 'character2', etc. to refer to subjects
+                 *     in the order of reference videos. Example: "Character1 sings on the roadside, Character2 dances beside it"
+                 */
                 prompt: string;
                 /** @description Reverse prompt words are used to describe content that you do not want to see in the video screen */
                 negative_prompt?: string;
-                /** @description Audio file download URL. Supported formats: mp3 and wav. */
+                /** @description Audio file download URL. Supported formats: mp3 and wav. Cannot be used with reference_video_urls. */
                 audio_url?: string;
                 /** @description First frame image URL or Base64 encoded data. Required for I2V models. Image formats: JPEG, JPG, PNG, BMP, WEBP. Resolution: 360-2000 pixels. File size: max 10MB. */
                 img_url?: string;
                 /** @description Video effect template name. Optional. Currently supported: squish, flying, carousel. When used, prompt parameter is ignored. */
                 template?: string;
+                /**
+                 * @description Reference video URLs for wan2.6-r2v model only. Array of 1-3 video URLs.
+                 *     Input restrictions:
+                 *     - Format: mp4, mov
+                 *     - Quantity: 1-3 videos
+                 *     - Single video length: 2-30 seconds
+                 *     - Single file size: max 30MB
+                 *     - Cannot be used with audio_url
+                 *     Reference duration: Single video max 5s, two videos max 2.5s each, three videos proportionally less.
+                 *     Billing: Based on actual reference duration used.
+                 */
+                reference_video_urls?: string[];
             };
             /** @description Video processing parameters */
             parameters?: {
-                /** @description Used to specify the video resolution in the format of 宽*高. Supported resolutions vary by model (for T2V models) */
+                /**
+                 * @description Video resolution in format width*height. Supported resolutions vary by model:
+                 *     For wan2.5 T2V: 480P (480*832, 832*480, 624*624), 720P, 1080P sizes
+                 *     For wan2.6 T2V/R2V (no 480P):
+                 *       720P: 1280*720, 720*1280, 960*960, 1088*832, 832*1088
+                 *       1080P: 1920*1080, 1080*1920, 1440*1440, 1632*1248, 1248*1632
+                 */
                 size?: string;
                 /**
-                 * @description Resolution level for I2V models. Supported values vary by model: 480P, 720P, 1080P
+                 * @description Resolution level for I2V models. Supported values vary by model:
+                 *     - wan2.5-i2v-preview: 480P, 720P, 1080P
+                 *     - wan2.6-i2v: 720P, 1080P only (no 480P support)
                  * @enum {string}
                  */
                 resolution?: "480P" | "720P" | "1080P";
                 /**
-                 * @description The duration of the video generated, in seconds
+                 * @description The duration of the video generated, in seconds:
+                 *     - wan2.5 models: 5 or 10 seconds
+                 *     - wan2.6-t2v, wan2.6-i2v: 5, 10, or 15 seconds
+                 *     - wan2.6-r2v: 5 or 10 seconds only (no 15s support)
                  * @default 5
                  * @enum {integer}
                  */
-                duration?: 5 | 10;
+                duration?: 5 | 10 | 15;
                 /**
                  * @description Is it enabled prompt intelligent rewriting. Default is true
                  * @default true
                  */
                 prompt_extend?: boolean;
+                /**
+                 * @description Intelligent multi-lens control. Only active when prompt_extend is enabled.
+                 *     For wan2.6 models only.
+                 *     - multi: Intelligent disassembly into multiple lenses (default)
+                 *     - single: Single lens generation
+                 * @default multi
+                 * @enum {string}
+                 */
+                shot_type?: "multi" | "single";
                 /** @description Random number seed, used to control the randomness of the model generated content */
                 seed?: number;
                 /**
@@ -11806,6 +11910,8 @@ export interface operations {
                 "application/json": {
                     /** @description Optional URL to redirect the customer after they're done with the billing portal */
                     return_url?: string;
+                    /** @description Optional target subscription tier. When provided, creates a deep link directly to the subscription update confirmation screen with this tier pre-selected. */
+                    target_tier?: "standard" | "creator" | "pro" | "standard-yearly" | "creator-yearly" | "pro-yearly";
                 };
             };
         };
@@ -11902,8 +12008,8 @@ export interface operations {
             query?: never;
             header?: never;
             path: {
-                /** @description The subscription tier (standard, creator, or pro) */
-                tier: "standard" | "creator" | "pro";
+                /** @description The subscription tier (standard, creator, or pro) with optional yearly billing (standard-yearly, creator-yearly, pro-yearly) */
+                tier: "standard" | "creator" | "pro" | "standard-yearly" | "creator-yearly" | "pro-yearly";
             };
             cookie?: never;
         };
@@ -11969,6 +12075,7 @@ export interface operations {
                         /** @description The active subscription ID if one exists */
                         subscription_id?: string | null;
                         subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
+                        subscription_duration?: components["schemas"]["SubscriptionDuration"] | null;
                         /** @description Whether the customer has funds/credits available */
                         has_fund?: boolean;
                         /**
@@ -12002,6 +12109,72 @@ export interface operations {
             };
         };
     };
+    VerifyApiKey: {
+        parameters: {
+            query?: never;
+            header: {
+                /** @description Admin API secret used to authorize this request */
+                "X-Comfy-Admin-Secret": string;
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    /** @description The ComfyUI API key to verify (e.g., comfy_xxx...) */
+                    api_key: string;
+                };
+            };
+        };
+        responses: {
+            /** @description API key is valid */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        /** @description Whether the API key is valid */
+                        valid: boolean;
+                        /** @description The Firebase UID of the user */
+                        firebase_uid: string;
+                        /** @description The customer's email address */
+                        email?: string;
+                        /** @description The customer's name */
+                        name?: string;
+                        /** @description Whether the customer is an admin */
+                        is_admin?: boolean;
+                    };
+                };
+            };
+            /** @description Unauthorized or missing admin API secret */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description API key not found or invalid */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
     GetAdminCustomerCloudSubscriptionStatus: {
         parameters: {
             query?: never;
@@ -12029,6 +12202,7 @@ export interface operations {
                         /** @description The active subscription ID if one exists */
                         subscription_id?: string | null;
                         subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
+                        subscription_duration?: components["schemas"]["SubscriptionDuration"] | null;
                         /** @description Whether the customer has funds/credits available */
                         has_fund?: boolean;
                         /**
@@ -12146,6 +12320,16 @@ export interface operations {
                          * @description The remaining balance from cloud credits in microamount
                          */
                         cloud_credit_balance_micros?: number;
+                        /**
+                         * Format: double
+                         * @description The total amount of pending/unbilled charges from draft invoices in microamount. Only included when the show_negative_balances feature flag is enabled.
+                         */
+                        pending_charges_micros?: number;
+                        /**
+                         * Format: double
+                         * @description The effective balance (total balance minus pending charges). Can be negative if pending charges exceed the balance. Only included when the show_negative_balances feature flag is enabled.
+                         */
+                        effective_balance_micros?: number;
                         /** @description The currency code (e.g., "usd") */
                         currency: string;
                     };
@@ -12212,6 +12396,16 @@ export interface operations {
                          * @description The remaining balance from cloud credits in microamount
                          */
                         cloud_credit_balance_micros?: number;
+                        /**
+                         * Format: double
+                         * @description The total amount of pending/unbilled charges from draft invoices in microamount. Only included when the show_negative_balances feature flag is enabled.
+                         */
+                        pending_charges_micros?: number;
+                        /**
+                         * Format: double
+                         * @description The effective balance (total balance minus pending charges). Can be negative if pending charges exceed the balance. Only included when the show_negative_balances feature flag is enabled.
+                         */
+                        effective_balance_micros?: number;
                         /** @description The currency code (e.g., "usd") */
                         currency: string;
                     };
@@ -19417,6 +19611,89 @@ export interface operations {
             };
         };
     };
+    bflFlux2MaxGenerate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["BFLFlux2ProGenerateRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response from BFL Flux 2 Max proxy */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BFLFluxProGenerateResponse"];
+                };
+            };
+            /** @description Bad Request (invalid input to proxy) */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Unauthorized */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Payment Required */
+            402: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Rate limit exceeded (either from proxy or BFL) */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Internal Server Error (proxy or upstream issue) */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Bad Gateway (error communicating with BFL) */
+            502: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+            /** @description Gateway Timeout (BFL took too long to respond) */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponse"];
+                };
+            };
+        };
+    };
     BFLExpand_v1_flux_pro_1_0_expand_post: {
         parameters: {
             query?: never;

packages/tailwind-utils/src/index.ts

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

pnpm-workspace.yaml

@@ -16,7 +16,7 @@ catalog:
   '@nx/storybook': 22.2.4
   '@nx/vite': 22.2.6
   '@pinia/testing': ^0.1.5
-  '@playwright/test': ^1.52.0
+  '@playwright/test': ^1.57.0
   '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
@@ -27,6 +27,7 @@ catalog:
   '@primevue/themes': ^4.2.5
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^8.48.0
+  '@sparkjsdev/spark': ^0.1.10
   '@storybook/addon-docs': ^10.1.9
   '@storybook/vue3': ^10.1.9
   '@storybook/vue3-vite': ^10.1.9
@@ -34,7 +35,7 @@ catalog:
   '@trivago/prettier-plugin-sort-imports': ^5.2.0
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
-  '@types/node': ^20.19.0
+  '@types/node': ^24.1.0
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
   '@vitejs/plugin-vue': ^6.0.0
@@ -47,29 +48,29 @@ 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
   eslint-import-resolver-typescript: ^4.4.4
   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-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.0.11
-  jiti: 2.4.2
+  husky: ^9.1.7
+  jiti: 2.6.1
   jsdom: ^26.1.0
-  knip: ^5.62.0
-  lint-staged: ^15.5.2
+  knip: ^5.75.1
+  lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 22.2.6
-  oxlint: ^1.32.0
-  oxlint-tsgolint: ^0.8.4
+  oxlint: ^1.33.0
+  oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
   pinia: ^2.1.7
   postcss-html: ^1.8.0
@@ -88,10 +89,10 @@ catalog:
   typegpu: ^0.8.2
   typescript: ^5.9.3
   typescript-eslint: ^8.49.0
-  unplugin-icons: ^0.22.0
+  unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
-  unplugin-vue-components: ^0.28.0
-  vite: ^7.0.0
+  unplugin-vue-components: ^30.0.0
+  vite: ^7.3.0
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0

src/components/TopMenuSection.vue

@@ -12,23 +12,22 @@
     <div class="mx-1 flex flex-col items-end gap-1">
       <div class="flex items-center gap-2">
         <div
-          v-if="managerState.shouldShowManagerButtons.value && isDesktop"
+          v-if="managerState.shouldShowManagerButtons.value"
           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"
         >
-          <IconButton
+          <Button
             v-tooltip.bottom="customNodesManagerTooltipConfig"
-            type="transparent"
-            size="sm"
-            class="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"
+            variant="secondary"
+            size="icon"
             :aria-label="t('menu.customNodesManager')"
             @click="openCustomNodeManager"
           >
             <i class="icon-[lucide--puzzle] size-4" />
-          </IconButton>
+          </Button>
         </div>
 
         <div
-          class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
+          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"
         >
           <ActionBarButtons />
           <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
@@ -37,11 +36,10 @@
             class="[&:not(:has(*>*:not(:empty)))]:hidden"
           ></div>
           <ComfyActionbar />
-          <IconButton
+          <Button
             v-tooltip.bottom="queueHistoryTooltipConfig"
-            type="transparent"
-            size="sm"
-            class="relative 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"
+            type="destructive"
+            size="icon"
             :aria-pressed="isQueueOverlayExpanded"
             :aria-label="
               t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
@@ -55,20 +53,19 @@
             >
               {{ queuedCount }}
             </span>
-          </IconButton>
+          </Button>
           <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
           <LoginButton v-else-if="isDesktop" />
-          <IconButton
+          <Button
             v-if="!isRightSidePanelOpen"
             v-tooltip.bottom="rightSidePanelTooltipConfig"
-            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"
+            type="secondary"
+            size="icon"
             :aria-label="t('rightSidePanel.togglePanel')"
             @click="rightSidePanelStore.togglePanel"
           >
             <i class="icon-[lucide--panel-right] size-4" />
-          </IconButton>
+          </Button>
         </div>
       </div>
       <QueueProgressOverlay
@@ -86,11 +83,11 @@ 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 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'

src/components/actionbar/ComfyActionbar.vue

@@ -18,12 +18,12 @@
         content: { class: isDocked ? 'p-0' : 'p-1' }
       }"
     >
-      <div ref="panelRef" class="flex items-center select-none">
+      <div ref="panelRef" class="flex items-center select-none gap-2">
         <span
           ref="dragHandleRef"
           :class="
             cn(
-              'drag-handle cursor-grab w-3 h-max mr-2',
+              'drag-handle cursor-grab w-3 h-max',
               isDragging && 'cursor-grabbing'
             )
           "
@@ -31,17 +31,16 @@
         <Suspense @resolve="comfyRunButtonResolved">
           <ComfyRunButton />
         </Suspense>
-        <IconButton
+        <Button
           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"
+          variant="destructive"
+          size="icon"
           :disabled="isExecutionIdle"
           :aria-label="t('menu.interrupt')"
           @click="cancelCurrentJob"
         >
           <i class="icon-[lucide--x] size-4" />
-        </IconButton>
+        </Button>
       </div>
     </Panel>
   </div>
@@ -58,10 +57,10 @@ import { clamp } from 'es-toolkit/compat'
 import { storeToRefs } from 'pinia'
 import Panel from 'primevue/panel'
 import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import IconButton from '@/components/button/IconButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
@@ -72,6 +71,7 @@ import ComfyRunButton from './ComfyRunButton'
 
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
+const { t } = useI18n()
 const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
 
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
@@ -301,7 +301,7 @@ const panelClass = computed(() =>
     'actionbar pointer-events-auto z-1300',
     isDragging.value && 'select-none pointer-events-none',
     isDocked.value
-      ? 'p-0 static mr-2 border-none bg-transparent'
+      ? 'p-0 static border-none bg-transparent'
       : 'fixed shadow-interface'
   )
 )

src/components/button/IconButton.stories.ts

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

@@ -1,52 +0,0 @@
-<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 IconButton from './IconButton.vue'
+import Button from '@/components/ui/button/Button.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, IconButton },
+    components: { IconGroup, Button },
     template: `
       <IconGroup>
-        <IconButton @click="console.log('Hello World!!')">
+        <Button size="icon" @click="console.log('Hello World!!')">
           <i class="icon-[lucide--heart] size-4" />
-        </IconButton>
-        <IconButton @click="console.log('Hello World!!')">
+        </Button>
+        <Button size="icon" @click="console.log('Hello World!!')">
           <i class="icon-[lucide--download] size-4" />
-        </IconButton>
-        <IconButton @click="console.log('Hello World!!')">
+        </Button>
+        <Button size="icon" @click="console.log('Hello World!!')">
           <i class="icon-[lucide--external-link] size-4" />
-        </IconButton>
+        </Button>
       </IconGroup>
     `
   })

src/components/button/IconTextButton.stories.ts

@@ -1,213 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import IconTextButton from './IconTextButton.vue'
-
-const meta: Meta<typeof IconTextButton> = {
-  title: 'Components/Button/IconTextButton',
-  component: IconTextButton,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text'
-    },
-    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'
-    },
-    iconPosition: {
-      control: { type: 'select' },
-      options: ['left', 'right']
-    },
-    onClick: { action: 'clicked' }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Primary: Story = {
-  render: (args) => ({
-    components: { IconTextButton },
-    setup() {
-      return { args }
-    },
-    template: `
-      <IconTextButton v-bind="args">
-        <template #icon>
-          <i class="icon-[lucide--package] size-4" />
-        </template>
-      </IconTextButton>
-    `
-  }),
-  args: {
-    label: 'Deploy',
-    type: 'primary',
-    size: 'md'
-  }
-}
-
-export const Secondary: Story = {
-  render: (args) => ({
-    components: { IconTextButton },
-    setup() {
-      return { args }
-    },
-    template: `
-      <IconTextButton v-bind="args">
-        <template #icon>
-          <i class="icon-[lucide--settings] size-4" />
-        </template>
-      </IconTextButton>
-    `
-  }),
-  args: {
-    label: 'Settings',
-    type: 'secondary',
-    size: 'md'
-  }
-}
-
-export const Transparent: Story = {
-  render: (args) => ({
-    components: { IconTextButton },
-    setup() {
-      return { args }
-    },
-    template: `
-      <IconTextButton v-bind="args">
-        <template #icon>
-          <i class="icon-[lucide--x] size-4" />
-        </template>
-      </IconTextButton>
-    `
-  }),
-  args: {
-    label: 'Cancel',
-    type: 'transparent',
-    size: 'md'
-  }
-}
-
-export const WithIconRight: Story = {
-  render: (args) => ({
-    components: { IconTextButton },
-    setup() {
-      return { args }
-    },
-    template: `
-      <IconTextButton v-bind="args">
-        <template #icon>
-          <i class="icon-[lucide--chevron-right] size-4" />
-        </template>
-      </IconTextButton>
-    `
-  }),
-  args: {
-    label: 'Next',
-    type: 'primary',
-    size: 'md',
-    iconPosition: 'right'
-  }
-}
-
-export const Small: Story = {
-  render: (args) => ({
-    components: { IconTextButton },
-    setup() {
-      return { args }
-    },
-    template: `
-      <IconTextButton v-bind="args">
-        <template #icon>
-          <i class="icon-[lucide--save] size-3" />
-        </template>
-      </IconTextButton>
-    `
-  }),
-  args: {
-    label: 'Save',
-    type: 'primary',
-    size: 'sm'
-  }
-}
-
-export const AllVariants: Story = {
-  render: () => ({
-    components: {
-      IconTextButton
-    },
-    template: `
-      <div class="flex flex-col gap-4">
-        <div class="flex gap-2 items-center">
-          <IconTextButton label="Download" type="primary" size="sm" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--download] size-3" />
-            </template>
-          </IconTextButton>
-          <IconTextButton label="Download" type="primary" size="md" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--download] size-4" />
-            </template>
-          </IconTextButton>
-        </div>
-        <div class="flex gap-2 items-center">
-          <IconTextButton label="Settings" type="secondary" size="sm" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--settings] size-3" />
-            </template>
-          </IconTextButton>
-          <IconTextButton label="Settings" type="secondary" size="md" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--settings] size-4" />
-            </template>
-          </IconTextButton>
-        </div>
-        <div class="flex gap-2 items-center">
-          <IconTextButton label="Delete" type="transparent" size="sm" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--trash-2] size-3" />
-            </template>
-          </IconTextButton>
-          <IconTextButton label="Delete" type="transparent" size="md" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--trash-2] size-4" />
-            </template>
-          </IconTextButton>
-        </div>
-        <div class="flex gap-2 items-center">
-          <IconTextButton label="Next" type="primary" size="md" iconPosition="right" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--chevron-right] size-4" />
-            </template>
-          </IconTextButton>
-          <IconTextButton label="Previous" type="secondary" size="md" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--chevron-left] size-4" />
-            </template>
-          </IconTextButton>
-          <IconTextButton label="Save File" type="primary" size="md" @click="() => {}">
-            <template #icon>
-              <i class="icon-[lucide--save] size-4" />
-            </template>
-          </IconTextButton>
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    controls: { disable: true },
-    actions: { disable: true }
-  }
-}

src/components/button/IconTextButton.vue

@@ -1,58 +0,0 @@
-<template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <slot v-if="iconPosition !== 'right'" name="icon"></slot>
-    <span>{{ 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 type { BaseButtonProps } from '@/types/buttonTypes'
-import {
-  getBaseButtonClasses,
-  getBorderButtonTypeClasses,
-  getButtonSizeClasses,
-  getButtonTypeClasses
-} from '@/types/buttonTypes'
-import { cn } from '@/utils/tailwindUtil'
-
-defineOptions({
-  inheritAttrs: false
-})
-
-interface IconTextButtonProps extends BaseButtonProps {
-  iconPosition?: 'left' | 'right'
-  label: string
-  onClick?: () => void
-}
-
-const {
-  size = 'md',
-  type = 'primary',
-  border = false,
-  disabled = false,
-  class: className,
-  iconPosition = 'left',
-  label,
-  onClick
-} = defineProps<IconTextButtonProps>()
-
-const buttonStyle = computed(() => {
-  const baseClasses = `${getBaseButtonClasses()} justify-start gap-2`
-  const sizeClasses = getButtonSizeClasses(size)
-  const typeClasses = border
-    ? getBorderButtonTypeClasses(type)
-    : getButtonTypeClasses(type)
-
-  return cn(baseClasses, sizeClasses, typeClasses, className)
-})
-</script>

src/components/button/MoreButton.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import IconTextButton from './IconTextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import MoreButton from './MoreButton.vue'
 
 const meta: Meta<typeof MoreButton> = {
@@ -17,30 +17,26 @@ type Story = StoryObj<typeof MoreButton>
 
 export const Basic: Story = {
   render: () => ({
-    components: { MoreButton, IconTextButton },
+    components: { MoreButton, Button },
     template: `
       <div style="height: 200px; display: flex; align-items: center; justify-content: center;">
         <MoreButton>
           <template #default="{ close }">
-            <IconTextButton
-              type="transparent"
-              label="Settings"
+            <Button
+              variant="textonly"
               @click="() => { close() }"
             >
-              <template #icon>
-                <i class="icon-[lucide--download] size-4" />
-              </template>
-            </IconTextButton>
+              <i class="icon-[lucide--download] size-4" />
+              <span>Settings</span>
+            </Button>
 
-            <IconTextButton
-              type="transparent"
-              label="Profile"
+            <Button
+              variant="textonly"
               @click="() => { close() }"
             >
-              <template #icon>
-                <i class="icon-[lucide--scroll-text] size-4" />
-              </template>
-            </IconTextButton>
+              <i class="icon-[lucide--scroll-text] size-4" />
+              <span>Profile</span>
+            </Button>
           </template>
         </MoreButton>
       </div>

src/components/button/MoreButton.vue

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

src/components/button/TextButton.stories.ts

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

@@ -1,54 +0,0 @@
-<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 IconButton from '../button/IconButton.vue'
+import Button from '@/components/ui/button/Button.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,
-    IconButton,
+    Button,
     SquareChip
   },
   setup() {
@@ -222,19 +222,19 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showTopRight" #top-right>
-              <IconButton
+              <Button
                 class="!bg-white/90 !text-neutral-900"
                 @click="() => console.log('Info clicked')"
               >
                 <i class="icon-[lucide--info] size-4" />
-              </IconButton>
-              <IconButton
+              </Button>
+              <Button
                 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' : ''" />
-              </IconButton>
+              </Button>
             </template>
             
             <template v-if="args.showBottomLeft" #bottom-left>

src/components/common/EditableText.vue

@@ -21,6 +21,7 @@
       @keyup.enter.capture.stop="blurInputElement"
       @keyup.escape.stop="cancelEditing"
       @click.stop
+      @contextmenu.stop
       @pointerdown.stop.capture
       @pointermove.stop.capture
     />

src/components/common/LazyImage.vue

@@ -12,7 +12,6 @@
     />
     <img
       v-if="cachedSrc"
-      ref="imageRef"
       :src="cachedSrc"
       :alt="alt"
       draggable="false"
@@ -61,7 +60,6 @@ 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,22 +17,25 @@
       class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm"
       :aria-label="placeholder"
     />
-    <IconButton
+    <Button
       v-if="filterIcon"
-      class="p-inputicon filter-button absolute right-0 inset-y-0 h-full m-0 p-0"
-      :icon="filterIcon"
-      severity="contrast"
+      size="icon"
+      variant="textonly"
+      class="filter-button absolute right-0 inset-y-0 m-0 p-0"
       @click="$emit('showFilter', $event)"
-    />
+    >
+      <i :class="filterIcon" />
+    </Button>
     <InputIcon v-if="!modelValue" :class="icon" />
     <Button
       v-if="modelValue"
-      class="p-inputicon clear-button"
-      icon="pi pi-times"
-      text
-      severity="contrast"
+      class="clear-button absolute left-0"
+      variant="textonly"
+      size="icon"
       @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
@@ -49,12 +52,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 IconButton from '../button/IconButton.vue'
+import Button from '@/components/ui/button/Button.vue'
+
 import type { SearchFilter } from './SearchFilterChip.vue'
 import SearchFilterChip from './SearchFilterChip.vue'
 
@@ -125,8 +128,4 @@ 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/common/UserCredit.test.ts

@@ -0,0 +1,134 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+import UserCredit from './UserCredit.vue'
+
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(),
+  getApp: vi.fn()
+}))
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(),
+  setPersistence: vi.fn(),
+  browserLocalPersistence: {},
+  onAuthStateChanged: vi.fn(),
+  signInWithEmailAndPassword: vi.fn(),
+  signOut: vi.fn()
+}))
+
+vi.mock('pinia')
+
+const mockBalance = vi.hoisted(() => ({
+  value: {
+    amount_micros: 100_000,
+    effective_balance_micros: 100_000,
+    currency: 'usd'
+  }
+}))
+
+const mockIsFetchingBalance = vi.hoisted(() => ({ value: false }))
+
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: vi.fn(() => ({
+    balance: mockBalance.value,
+    isFetchingBalance: mockIsFetchingBalance.value
+  }))
+}))
+
+describe('UserCredit', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockBalance.value = {
+      amount_micros: 100_000,
+      effective_balance_micros: 100_000,
+      currency: 'usd'
+    }
+    mockIsFetchingBalance.value = false
+  })
+
+  const mountComponent = (props = {}) => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: enMessages }
+    })
+
+    return mount(UserCredit, {
+      props,
+      global: {
+        plugins: [i18n],
+        stubs: {
+          Skeleton: true,
+          Tag: true
+        }
+      }
+    })
+  }
+
+  describe('effective_balance_micros handling', () => {
+    it('uses effective_balance_micros when present (positive balance)', () => {
+      mockBalance.value = {
+        amount_micros: 200_000,
+        effective_balance_micros: 150_000,
+        currency: 'usd'
+      }
+
+      const wrapper = mountComponent()
+      expect(wrapper.text()).toContain('Credits')
+    })
+
+    it('uses effective_balance_micros when zero', () => {
+      mockBalance.value = {
+        amount_micros: 100_000,
+        effective_balance_micros: 0,
+        currency: 'usd'
+      }
+
+      const wrapper = mountComponent()
+      expect(wrapper.text()).toContain('0')
+    })
+
+    it('uses effective_balance_micros when negative', () => {
+      mockBalance.value = {
+        amount_micros: 0,
+        effective_balance_micros: -50_000,
+        currency: 'usd'
+      }
+
+      const wrapper = mountComponent()
+      expect(wrapper.text()).toContain('-')
+    })
+
+    it('falls back to amount_micros when effective_balance_micros is missing', () => {
+      mockBalance.value = {
+        amount_micros: 100_000,
+        currency: 'usd'
+      } as typeof mockBalance.value
+
+      const wrapper = mountComponent()
+      expect(wrapper.text()).toContain('Credits')
+    })
+
+    it('falls back to 0 when both effective_balance_micros and amount_micros are missing', () => {
+      mockBalance.value = {
+        currency: 'usd'
+      } as typeof mockBalance.value
+
+      const wrapper = mountComponent()
+      expect(wrapper.text()).toContain('0')
+    })
+  })
+
+  describe('loading state', () => {
+    it('shows skeleton when loading', () => {
+      mockIsFetchingBalance.value = true
+
+      const wrapper = mountComponent()
+      expect(wrapper.findComponent({ name: 'Skeleton' }).exists()).toBe(true)
+    })
+  })
+})

src/components/common/UserCredit.vue

@@ -14,13 +14,7 @@
       class="p-1 text-amber-400"
     >
       <template #icon>
-        <i
-          :class="
-            flags.subscriptionTiersEnabled
-              ? 'icon-[lucide--component]'
-              : 'pi pi-dollar'
-          "
-        />
+        <i class="icon-[lucide--component]" />
       </template>
     </Tag>
     <div :class="textClass">
@@ -36,7 +30,6 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 const { textClass, showCreditsOnly } = defineProps<{
@@ -45,13 +38,14 @@ const { textClass, showCreditsOnly } = defineProps<{
 }>()
 
 const authStore = useFirebaseAuthStore()
-const { flags } = useFeatureFlags()
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 const { t, locale } = useI18n()
 
 const formattedBalance = computed(() => {
-  // Backend returns cents despite the *_micros naming convention.
-  const cents = authStore.balance?.amount_micros ?? 0
+  const cents =
+    authStore.balance?.effective_balance_micros ??
+    authStore.balance?.amount_micros ??
+    0
   const amount = formatCreditsFromCents({
     cents,
     locale: locale.value
@@ -60,8 +54,10 @@ const formattedBalance = computed(() => {
 })
 
 const formattedCreditsOnly = computed(() => {
-  // Backend returns cents despite the *_micros naming convention.
-  const cents = authStore.balance?.amount_micros ?? 0
+  const cents =
+    authStore.balance?.effective_balance_micros ??
+    authStore.balance?.amount_micros ??
+    0
   const amount = formatCreditsFromCents({
     cents,
     locale: locale.value,

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -22,16 +22,17 @@
 
     <template #header-right-area>
       <div class="flex gap-2">
-        <IconTextButton
+        <Button
           v-if="filteredCount !== totalCount"
-          type="secondary"
-          :label="$t('templateWorkflows.resetFilters', 'Clear Filters')"
+          variant="secondary"
+          size="lg"
           @click="resetFilters"
         >
-          <template #icon>
-            <i class="icon-[lucide--filter-x]" />
-          </template>
-        </IconTextButton>
+          <i class="icon-[lucide--filter-x]" />
+          <span>{{
+            $t('templateWorkflows.resetFilters', 'Clear Filters')
+          }}</span>
+        </Button>
       </div>
     </template>
 
@@ -301,16 +302,16 @@
                       v-if="template.tutorialUrl"
                       class="flex flex-col-reverse justify-center"
                     >
-                      <IconButton
+                      <Button
                         v-if="hoveredTemplate === template.name"
                         v-tooltip.bottom="$t('g.seeTutorial')"
                         v-bind="$attrs"
-                        type="primary"
-                        size="sm"
+                        variant="inverted"
+                        size="icon"
                         @click.stop="openTutorial(template)"
                       >
                         <i class="icon-[lucide--info] size-4" />
-                      </IconButton>
+                      </Button>
                     </div>
                   </div>
                 </div>
@@ -382,8 +383,6 @@ 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'
 import CardTop from '@/components/card/CardTop.vue'
@@ -395,6 +394,7 @@ 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,19 +1,16 @@
 <template>
   <section class="w-full flex gap-2 justify-end px-2 pb-2">
-    <TextButton
-      :label="cancelTextX"
+    <Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
+      {{ cancelTextX }}
+    </Button>
+    <Button
       :disabled
-      type="transparent"
-      autofocus
-      @click="$emit('cancel')"
-    />
-    <TextButton
-      :label="confirmTextX"
-      :disabled
-      type="transparent"
+      variant="textonly"
       :class="confirmClass"
       @click="$emit('confirm')"
-    />
+    >
+      {{ confirmTextX }}
+    </Button>
   </section>
 </template>
 <script setup lang="ts">
@@ -21,7 +18,7 @@ import { computed, toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 
 const { t } = useI18n()
 

src/components/dialog/content/MissingNodesFooter.vue

@@ -4,36 +4,27 @@
     v-if="isCloud"
     class="flex w-full items-center justify-between gap-2 py-2 px-4"
   >
-    <IconTextButton
-      :label="$t('missingNodes.cloud.learnMore')"
-      type="transparent"
+    <Button
+      variant="textonly"
       size="sm"
-      icon-position="left"
       as="a"
       href="https://www.comfy.org/cloud"
       target="_blank"
       rel="noopener noreferrer"
     >
-      <template #icon>
-        <i class="icon-[lucide--info]"></i>
-      </template>
-    </IconTextButton>
-    <TextButton
-      :label="$t('missingNodes.cloud.gotIt')"
-      type="secondary"
-      size="md"
-      @click="handleGotItClick"
-    />
+      <i class="icon-[lucide--info]"></i>
+      <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
+    </Button>
+    <Button variant="secondary" size="md" @click="handleGotItClick">{{
+      $t('missingNodes.cloud.gotIt')
+    }}</Button>
   </div>
 
   <!-- OSS mode: Open Manager + Install All buttons -->
   <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <TextButton
-      :label="$t('g.openManager')"
-      type="transparent"
-      size="sm"
-      @click="openManager"
-    />
+    <Button variant="textonly" size="sm" @click="openManager">{{
+      $t('g.openManager')
+    }}</Button>
     <PackInstallButton
       v-if="showInstallAllButton"
       type="secondary"
@@ -56,8 +47,7 @@
 import { computed, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconTextButton from '@/components/button/IconTextButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- New Credits Design (default) -->
-  <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
+  <div class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
     <div class="flex flex-col gap-4">
       <h1 class="text-2xl font-semibold text-base-foreground m-0">
@@ -66,91 +65,32 @@
       @click="handleBuy"
     />
   </div>
-
-  <!-- Legacy Design -->
-  <div v-else class="flex w-96 flex-col gap-10 p-2">
-    <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
-      <h1 class="my-0 text-2xl leading-normal font-medium">
-        {{ $t('credits.topUp.insufficientTitle') }}
-      </h1>
-      <p class="my-0 text-base">
-        {{ $t('credits.topUp.insufficientMessage') }}
-      </p>
-    </div>
-
-    <!-- Balance Section -->
-    <div class="flex items-center justify-between">
-      <div class="flex w-full flex-col gap-2">
-        <div class="text-base text-muted">
-          {{ $t('credits.yourCreditBalance') }}
-        </div>
-        <div class="flex w-full items-center justify-between">
-          <UserCredit text-class="text-2xl" />
-          <Button
-            outlined
-            severity="secondary"
-            :label="$t('credits.topUp.seeDetails')"
-            icon="pi pi-arrow-up-right"
-            @click="handleSeeDetails"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Amount Input Section -->
-    <div class="flex flex-col gap-2">
-      <span class="text-sm text-muted"
-        >{{ $t('credits.topUp.quickPurchase') }}:</span
-      >
-      <div class="grid grid-cols-[2fr_1fr] gap-2">
-        <LegacyCreditTopUpOption
-          v-for="amount in amountOptions"
-          :key="amount"
-          :amount="amount"
-          :preselected="amount === preselectedAmountOption"
-        />
-
-        <LegacyCreditTopUpOption :amount="100" :preselected="false" editable />
-      </div>
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { creditsToUsd } from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
-import LegacyCreditTopUpOption from './credit/LegacyCreditTopUpOption.vue'
 
 interface CreditOption {
   credits: number
   description: string
 }
 
-const {
-  isInsufficientCredits = false,
-  amountOptions = [5, 10, 20, 50],
-  preselectedAmountOption = 10
-} = defineProps<{
+const { isInsufficientCredits = false } = defineProps<{
   isInsufficientCredits?: boolean
-  amountOptions?: number[]
-  preselectedAmountOption?: number
 }>()
 
-const { flags } = useFeatureFlags()
 const { formattedRenewalDate } = useSubscription()
-// Use feature flag to determine design - defaults to true (new design)
-const useNewDesign = computed(() => flags.subscriptionTiersEnabled)
 
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
@@ -202,8 +142,4 @@ const handleBuy = async () => {
     loading.value = false
   }
 }
-
-const handleSeeDetails = async () => {
-  await authActions.accessBillingPortal()
-}
 </script>

src/components/dialog/content/credit/LegacyCreditTopUpOption.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="flex items-center gap-2">
-    <Tag
-      severity="secondary"
-      icon="pi pi-wallet"
-      rounded
-      class="p-1 text-amber-400"
-    />
-    <div v-if="editable" class="flex items-center gap-2">
-      <InputNumber
-        v-model="customAmount"
-        :min="1"
-        :max="1000"
-        :step="1"
-        show-buttons
-        :allow-empty="false"
-        :highlight-on-focus="true"
-        prefix="$"
-        pt:pc-input-text:root="w-28"
-        @blur="
-          (e: InputNumberBlurEvent) =>
-            (customAmount = clampUsd(Number(e.value)))
-        "
-        @input="
-          (e: InputNumberInputEvent) =>
-            (customAmount = clampUsd(Number(e.value)))
-        "
-      />
-      <span class="text-xs text-muted">{{ formattedCredits }}</span>
-    </div>
-    <div v-else class="flex flex-col leading-tight">
-      <span class="text-xl font-semibold">{{ formattedCredits }}</span>
-      <span class="text-xs text-muted">{{ formattedUsd }}</span>
-    </div>
-  </div>
-  <ProgressSpinner v-if="loading" class="h-8 w-8" />
-  <Button
-    v-else
-    :severity="preselected ? 'primary' : 'secondary'"
-    :outlined="!preselected"
-    :label="$t('credits.topUp.buyNow')"
-    @click="handleBuyNow"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import InputNumber from 'primevue/inputnumber'
-import type {
-  InputNumberBlurEvent,
-  InputNumberInputEvent
-} from 'primevue/inputnumber'
-import ProgressSpinner from 'primevue/progressspinner'
-import Tag from 'primevue/tag'
-import { computed, onBeforeUnmount, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import {
-  clampUsd,
-  formatCreditsFromUsd,
-  formatUsd
-} from '@/base/credits/comfyCredits'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useTelemetry } from '@/platform/telemetry'
-
-const authActions = useFirebaseAuthActions()
-const telemetry = useTelemetry()
-
-const {
-  amount,
-  preselected,
-  editable = false
-} = defineProps<{
-  amount: number
-  preselected: boolean
-  editable?: boolean
-}>()
-
-const customAmount = ref(amount)
-const didClickBuyNow = ref(false)
-const loading = ref(false)
-const { t, locale } = useI18n()
-
-const displayUsdAmount = computed(() =>
-  editable ? clampUsd(Number(customAmount.value)) : clampUsd(amount)
-)
-
-const formattedCredits = computed(
-  () =>
-    `${formatCreditsFromUsd({
-      usd: displayUsdAmount.value,
-      locale: locale.value
-    })} ${t('credits.credits')}`
-)
-
-const formattedUsd = computed(
-  () => `$${formatUsd({ value: displayUsdAmount.value, locale: locale.value })}`
-)
-
-const handleBuyNow = async () => {
-  const creditAmount = displayUsdAmount.value
-  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
-
-  loading.value = true
-  try {
-    await authActions.purchaseCredits(creditAmount)
-    didClickBuyNow.value = true
-  } finally {
-    loading.value = false
-  }
-}
-
-onBeforeUnmount(() => {
-  if (didClickBuyNow.value) {
-    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
-    void authActions.fetchBalance()
-  }
-})
-</script>

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

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

src/components/graph/GraphCanvas.vue

@@ -87,7 +87,6 @@
   <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>
@@ -115,7 +114,6 @@ 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/NodeContextMenu.vue

@@ -0,0 +1,272 @@
+<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, show, hide, isOpen })
+})
+
+onUnmounted(() => {
+  registerNodeOptionsInstance(null)
+})
+</script>

src/components/graph/SelectionToolbox.test.ts

@@ -136,6 +136,7 @@ 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,6 +42,7 @@
       </Panel>
     </Transition>
   </div>
+  <NodeContextMenu />
 </template>
 
 <script setup lang="ts">
@@ -68,6 +69,7 @@ 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,7 +48,6 @@
           class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
         >
           <InputNumber
-            ref="zoomInput"
             :default-value="canvasStore.appScalePercentage"
             :min="1"
             :max="1000"
@@ -130,7 +129,6 @@ 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/ColorPickerMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <Popover
-    ref="popover"
+    ref="popoverRef"
     :auto-z-index="true"
     :base-z-index="1100"
     :dismissable="true"
@@ -34,7 +34,10 @@
             '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'
+              : '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'
           )
         "
         :title="subOption.label"
@@ -82,23 +85,21 @@ const emit = defineEmits<Emits>()
 
 const { getCurrentShape } = useNodeCustomization()
 
-const popover = ref<InstanceType<typeof Popover>>()
+const popoverRef = ref<InstanceType<typeof Popover>>()
 
-const show = (event: Event, target?: HTMLElement) => {
-  popover.value?.show(event, target)
+const toggle = (event: Event, target?: HTMLElement) => {
+  popoverRef.value?.toggle(event, target)
 }
-
-const hide = () => {
-  popover.value?.hide()
-}
-
 defineExpose({
-  show,
-  hide
+  toggle
 })
 
 const handleSubmenuClick = (subOption: SubMenuOption) => {
+  if (subOption.disabled) {
+    return
+  }
   emit('submenu-click', subOption)
+  popoverRef.value?.hide()
 }
 
 const isShapeSelected = (subOption: SubMenuOption): boolean => {

src/components/graph/selectionToolbox/MenuOptionItem.vue

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

@@ -1,322 +0,0 @@
-<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,6 +1,5 @@
 <template>
   <Button
-    ref="buttonRef"
     v-tooltip.top="{
       value: $t('g.moreOptions'),
       showDelay: 1000
@@ -17,17 +16,10 @@
 
 <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) => {
-  const el = (buttonRef.value as any)?.$el || buttonRef.value
-  const buttonEl = el instanceof HTMLElement ? el : null
-  if (buttonEl) {
-    toggleNodeOptions(event, buttonEl, true)
-  }
+  toggleNodeOptions(event)
 }
 </script>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -152,6 +152,7 @@
 </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'
@@ -168,6 +169,7 @@ 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
@@ -201,6 +203,7 @@ const SUBMENU_CONFIG = {
 
 // Composables
 const { t } = useI18n()
+const toast = useToast()
 const { staticUrls, buildDocsUrl } = useExternalLink()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
@@ -230,6 +233,7 @@ const showVersionUpdates = computed(() =>
 // Use conflict acknowledgment state from composable
 const { shouldShowRedDot: shouldShowManagerRedDot } =
   useConflictAcknowledgment()
+const { isNewManagerUI } = useManagerState()
 
 const moreItems = computed<MenuItem[]>(() => {
   const allMoreItems: MenuItem[] = [
@@ -369,6 +373,19 @@ 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',
@@ -545,6 +562,47 @@ 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',
+          'flex gap-2 items-center h-10 px-2 rounded-lg cursor-pointer',
           'hover:bg-secondary-background-hover',
           // Add focus/highlight state for keyboard navigation
           context?.focused &&
@@ -112,14 +112,14 @@
                 : $t('g.itemSelected', { selectedCount })
             }}
           </span>
-          <TextButton
+          <Button
             v-if="showClearButton"
-            :label="$t('g.clearAll')"
-            type="transparent"
-            size="fit-content"
-            class="text-sm text-text-primary"
+            variant="textonly"
+            size="md"
             @click.stop="selectedItems = []"
-          />
+          >
+            {{ $t('g.clearAll') }}
+          </Button>
         </div>
         <div class="my-4 h-px bg-border-default"></div>
       </div>
@@ -145,9 +145,13 @@
 
     <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
     <template #option="slotProps">
-      <div class="flex items-center gap-2" :style="popoverStyle">
+      <div
+        role="button"
+        class="flex items-center gap-2 cursor-pointer"
+        :style="popoverStyle"
+      >
         <div
-          class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+          class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
           :class="
             slotProps.selected
               ? 'bg-primary-background'
@@ -159,11 +163,9 @@
             class="text-bold icon-[lucide--check] text-xs text-white"
           />
         </div>
-        <Button
-          class="border-none bg-transparent text-left outline-none"
-          unstyled
-          >{{ slotProps.option.name }}</Button
-        >
+        <span>
+          {{ slotProps.option.name }}
+        </span>
       </div>
     </template>
   </MultiSelect>
@@ -172,17 +174,16 @@
 <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,7 +9,6 @@
   >
     <Load3DScene
       v-if="node"
-      ref="load3DSceneRef"
       :initialize-load3d="initializeLoad3d"
       :cleanup="cleanup"
       :loading="loading"
@@ -23,6 +22,8 @@
         v-model:model-config="modelConfig"
         v-model:camera-config="cameraConfig"
         v-model:light-config="lightConfig"
+        :is-splat-model="isSplatModel"
+        :is-ply-model="isPlyModel"
         @update-background-image="handleBackgroundImageUpdate"
         @export-model="handleExportModel"
       />
@@ -100,8 +101,6 @@ if (isComponentWidget(props.widget)) {
   })
 }
 
-const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
-
 const {
   // configs
   sceneConfig,
@@ -112,6 +111,8 @@ const {
   // other state
   isRecording,
   isPreview,
+  isSplatModel,
+  isPlyModel,
   hasRecording,
   recordingDuration,
   animations,

src/components/load3d/Load3DControls.vue

@@ -47,6 +47,8 @@
         v-if="showModelControls"
         v-model:material-mode="modelConfig!.materialMode"
         v-model:up-direction="modelConfig!.upDirection"
+        :hide-material-mode="isSplatModel"
+        :is-ply-model="isPlyModel"
       />
 
       <CameraControls
@@ -85,6 +87,11 @@ import type {
   SceneConfig
 } from '@/extensions/core/load3d/interfaces'
 
+const { isSplatModel = false, isPlyModel = false } = defineProps<{
+  isSplatModel?: boolean
+  isPlyModel?: boolean
+}>()
+
 const sceneConfig = defineModel<SceneConfig>('sceneConfig')
 const modelConfig = defineModel<ModelConfig>('modelConfig')
 const cameraConfig = defineModel<CameraConfig>('cameraConfig')
@@ -101,6 +108,10 @@ const categoryLabels: Record<string, string> = {
 }
 
 const availableCategories = computed(() => {
+  if (isSplatModel) {
+    return ['scene', 'model', 'camera']
+  }
+
   return ['scene', 'model', 'camera', 'light', 'export']
 })
 

src/components/load3d/Load3DScene.vue

@@ -14,11 +14,7 @@
     @dragleave.stop="handleDragLeave"
     @drop.prevent.stop="handleDrop"
   >
-    <LoadingOverlay
-      ref="loadingOverlayRef"
-      :loading="loading"
-      :loading-message="loadingMessage"
-    />
+    <LoadingOverlay :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"
@@ -48,7 +44,6 @@ 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 ref="mainContentRef" class="relative flex-1">
+    <div class="relative flex-1">
       <div
         ref="containerRef"
         class="absolute h-full w-full"
@@ -46,6 +46,8 @@
             <ModelControls
               v-model:up-direction="viewer.upDirection.value"
               v-model:material-mode="viewer.materialMode.value"
+              :hide-material-mode="viewer.isSplatModel.value"
+              :is-ply-model="viewer.isPlyModel.value"
             />
           </div>
 
@@ -56,13 +58,13 @@
             />
           </div>
 
-          <div class="space-y-4 p-2">
+          <div v-if="!viewer.isSplatModel.value" class="space-y-4 p-2">
             <LightControls
               v-model:light-intensity="viewer.lightIntensity.value"
             />
           </div>
 
-          <div class="space-y-4 p-2">
+          <div v-if="!viewer.isSplatModel.value" class="space-y-4 p-2">
             <ExportControls @export-model="viewer.exportModel" />
           </div>
         </div>
@@ -105,7 +107,6 @@ 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/load3d/controls/ModelControls.vue

@@ -28,7 +28,7 @@
       </div>
     </div>
 
-    <div class="show-material-mode relative">
+    <div v-if="!hideMaterialMode" class="show-material-mode relative">
       <Button
         class="p-button-rounded p-button-text"
         @click="toggleMaterialMode"
@@ -71,6 +71,11 @@ import type {
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
+const { hideMaterialMode = false, isPlyModel = false } = defineProps<{
+  hideMaterialMode?: boolean
+  isPlyModel?: boolean
+}>()
+
 const materialMode = defineModel<MaterialMode>('materialMode')
 const upDirection = defineModel<UpDirection>('upDirection')
 
@@ -95,6 +100,11 @@ const materialModes = computed(() => {
     //'depth' disable for now
   ]
 
+  // Only show pointCloud mode for PLY files (point cloud rendering)
+  if (isPlyModel) {
+    modes.splice(1, 0, 'pointCloud')
+  }
+
   return modes
 })
 

src/components/load3d/controls/viewer/ViewerModelControls.vue

@@ -10,7 +10,7 @@
       />
     </div>
 
-    <div>
+    <div v-if="!hideMaterialMode">
       <label>{{ $t('load3d.materialMode') }}</label>
       <Select
         v-model="materialMode"
@@ -32,6 +32,11 @@ import type {
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
+const { hideMaterialMode = false, isPlyModel = false } = defineProps<{
+  hideMaterialMode?: boolean
+  isPlyModel?: boolean
+}>()
+
 const upDirection = defineModel<UpDirection>('upDirection')
 const materialMode = defineModel<MaterialMode>('materialMode')
 
@@ -46,10 +51,22 @@ const upDirectionOptions = [
 ]
 
 const materialModeOptions = computed(() => {
-  return [
-    { label: t('load3d.materialModes.original'), value: 'original' },
+  const options = [
+    { label: t('load3d.materialModes.original'), value: 'original' }
+  ]
+
+  if (isPlyModel) {
+    options.push({
+      label: t('load3d.materialModes.pointCloud'),
+      value: 'pointCloud'
+    })
+  }
+
+  options.push(
     { label: t('load3d.materialModes.normal'), value: 'normal' },
     { label: t('load3d.materialModes.wireframe'), value: 'wireframe' }
-  ]
+  )
+
+  return options
 })
 </script>