Revert "[refactor] Use getSlotPosition for Vue nodes in link rendering"

This reverts commit 881ff67fe2.

.dependency-cruiser.cjs

@@ -1,395 +0,0 @@
-/** @type {import('dependency-cruiser').IConfiguration} */
-module.exports = {
-  forbidden: [
-    {
-      name: 'no-circular',
-      severity: 'warn',
-      comment:
-        'This dependency is part of a circular relationship. You might want to revise ' +
-        'your solution (i.e. use dependency inversion, make sure the modules have a single responsibility) ',
-      from: {},
-      to: {
-        circular: true
-      }
-    },
-    {
-      name: 'no-orphans',
-      comment:
-        "This is an orphan module - it's likely not used (anymore?). Either use it or " +
-        "remove it. If it's logical this module is an orphan (i.e. it's a config file), " +
-        "add an exception for it in your dependency-cruiser configuration. By default " +
-        "this rule does not scrutinize dot-files (e.g. .eslintrc.js), TypeScript declaration " +
-        "files (.d.ts), tsconfig.json and some of the babel and webpack configs.",
-      severity: 'warn',
-      from: {
-        orphan: true,
-        pathNot: [
-          '(^|/)[.][^/]+[.](?:js|cjs|mjs|ts|cts|mts|json)$',                  // dot files
-          '[.]d[.]ts$',                                                       // TypeScript declaration files
-          '(^|/)tsconfig[.]json$',                                            // TypeScript config
-          '(^|/)(?:babel|webpack)[.]config[.](?:js|cjs|mjs|ts|cts|mts|json)$' // other configs
-        ]
-      },
-      to: {},
-    },
-    {
-      name: 'no-deprecated-core',
-      comment:
-        'A module depends on a node core module that has been deprecated. Find an alternative - these are ' +
-        "bound to exist - node doesn't deprecate lightly.",
-      severity: 'warn',
-      from: {},
-      to: {
-        dependencyTypes: [
-          'core'
-        ],
-        path: [
-          '^v8/tools/codemap$',
-          '^v8/tools/consarray$',
-          '^v8/tools/csvparser$',
-          '^v8/tools/logreader$',
-          '^v8/tools/profile_view$',
-          '^v8/tools/profile$',
-          '^v8/tools/SourceMap$',
-          '^v8/tools/splaytree$',
-          '^v8/tools/tickprocessor-driver$',
-          '^v8/tools/tickprocessor$',
-          '^node-inspect/lib/_inspect$',
-          '^node-inspect/lib/internal/inspect_client$',
-          '^node-inspect/lib/internal/inspect_repl$',
-          '^async_hooks$',
-          '^punycode$',
-          '^domain$',
-          '^constants$',
-          '^sys$',
-          '^_linklist$',
-          '^_stream_wrap$'
-        ],
-      }
-    },
-    {
-      name: 'not-to-deprecated',
-      comment:
-        'This module uses a (version of an) npm module that has been deprecated. Either upgrade to a later ' +
-        'version of that module, or find an alternative. Deprecated modules are a security risk.',
-      severity: 'warn',
-      from: {},
-      to: {
-        dependencyTypes: [
-          'deprecated'
-        ]
-      }
-    },
-    {
-      name: 'no-non-package-json',
-      severity: 'error',
-      comment:
-        "This module depends on an npm package that isn't in the 'dependencies' section of your package.json. " +
-        "That's problematic as the package either (1) won't be available on live (2 - worse) will be " +
-        "available on live with an non-guaranteed version. Fix it by adding the package to the dependencies " +
-        "in your package.json.",
-      from: {},
-      to: {
-        dependencyTypes: [
-          'npm-no-pkg',
-          'npm-unknown'
-        ]
-      }
-    },
-    {
-      name: 'not-to-unresolvable',
-      comment:
-        "This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
-        'module: add it to your package.json. In all other cases you likely already know what to do.',
-      severity: 'error',
-      from: {},
-      to: {
-        couldNotResolve: true
-      }
-    },
-    {
-      name: 'no-duplicate-dep-types',
-      comment:
-        "Likely this module depends on an external ('npm') package that occurs more than once " +
-        "in your package.json i.e. bot as a devDependencies and in dependencies. This will cause " +
-        "maintenance problems later on.",
-      severity: 'warn',
-      from: {},
-      to: {
-        moreThanOneDependencyType: true,
-        // as it's pretty common to have a type import be a type only import 
-        // _and_ (e.g.) a devDependency - don't consider type-only dependency
-        // types for this rule
-        dependencyTypesNot: ["type-only"]
-      }
-    },
-
-    /* rules you might want to tweak for your specific situation: */
-    
-    {
-      name: 'not-to-spec',
-      comment:
-        'This module depends on a spec (test) file. The sole responsibility of a spec file is to test code. ' +
-        "If there's something in a spec that's of use to other modules, it doesn't have that single " +
-        'responsibility anymore. Factor it out into (e.g.) a separate utility/ helper or a mock.',
-      severity: 'error',
-      from: {},
-      to: {
-        path: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
-      }
-    },
-    {
-      name: 'not-to-dev-dep',
-      severity: 'error',
-      comment:
-        "This module depends on an npm package from the 'devDependencies' section of your " +
-        'package.json. It looks like something that ships to production, though. To prevent problems ' +
-        "with npm packages that aren't there on production declare it (only!) in the 'dependencies'" +
-        'section of your package.json. If this module is development only - add it to the ' +
-        'from.pathNot re of the not-to-dev-dep rule in the dependency-cruiser configuration',
-      from: {
-        path: '^(src)',
-        pathNot: '[.](?:spec|test)[.](?:js|mjs|cjs|jsx|ts|mts|cts|tsx)$'
-      },
-      to: {
-        dependencyTypes: [
-          'npm-dev',
-        ],
-        // type only dependencies are not a problem as they don't end up in the
-        // production code or are ignored by the runtime.
-        dependencyTypesNot: [
-          'type-only'
-        ],
-        pathNot: [
-          'node_modules/@types/'
-        ]
-      }
-    },
-    {
-      name: 'optional-deps-used',
-      severity: 'info',
-      comment:
-        "This module depends on an npm package that is declared as an optional dependency " +
-        "in your package.json. As this makes sense in limited situations only, it's flagged here. " +
-        "If you're using an optional dependency here by design - add an exception to your" +
-        "dependency-cruiser configuration.",
-      from: {},
-      to: {
-        dependencyTypes: [
-          'npm-optional'
-        ]
-      }
-    },
-    {
-      name: 'peer-deps-used',
-      comment:
-        "This module depends on an npm package that is declared as a peer dependency " +
-        "in your package.json. This makes sense if your package is e.g. a plugin, but in " +
-        "other cases - maybe not so much. If the use of a peer dependency is intentional " +
-        "add an exception to your dependency-cruiser configuration.",
-      severity: 'warn',
-      from: {},
-      to: {
-        dependencyTypes: [
-          'npm-peer'
-        ]
-      }
-    }
-  ],
-  options: {
-
-    /* Which modules not to follow further when encountered */
-    doNotFollow: {
-      /* path: an array of regular expressions in strings to match against */
-      path: ['node_modules']
-    },
-
-    /* Which modules to exclude */
-    // exclude : {
-    //   /* path: an array of regular expressions in strings to match against */
-    //   path: '',
-    // },
-
-    /* Which modules to exclusively include (array of regular expressions in strings)
-       dependency-cruiser will skip everything not matching this pattern
-    */
-    // includeOnly : [''],
-
-    /* List of module systems to cruise.
-       When left out dependency-cruiser will fall back to the list of _all_
-       module systems it knows of. It's the default because it's the safe option
-       It might come at a performance penalty, though.
-       moduleSystems: ['amd', 'cjs', 'es6', 'tsd']
-      
-       As in practice only commonjs ('cjs') and ecmascript modules ('es6')
-       are widely used, you can limit the moduleSystems to those.
-     */
-    
-    // moduleSystems: ['cjs', 'es6'],
-
-    /* 
-      false: don't look at JSDoc imports (the default)
-      true: dependency-cruiser will detect dependencies in JSDoc-style
-      import statements. Implies "parser": "tsc", so the dependency-cruiser
-      will use the typescript parser for JavaScript files.
-     
-      For this to work the typescript compiler will need to be installed in the
-      same spot as you're running dependency-cruiser from.
-     */
-    // detectJSDocImports: true,
-
-    /* prefix for links in html and svg output (e.g. 'https://github.com/you/yourrepo/blob/main/'
-       to open it on your online repo or `vscode://file/${process.cwd()}/` to 
-       open it in visual studio code),
-     */
-    // prefix: `vscode://file/${process.cwd()}/`,
-
-    /* false (the default): ignore dependencies that only exist before typescript-to-javascript compilation
-       true: also detect dependencies that only exist before typescript-to-javascript compilation
-       "specify": for each dependency identify whether it only exists before compilation or also after
-     */
-    tsPreCompilationDeps: true,
-    
-    /* list of extensions to scan that aren't javascript or compile-to-javascript.
-       Empty by default. Only put extensions in here that you want to take into
-       account that are _not_ parsable.
-    */
-    // extraExtensionsToScan: [".json", ".jpg", ".png", ".svg", ".webp"],
-
-    /* if true combines the package.jsons found from the module up to the base
-       folder the cruise is initiated from. Useful for how (some) mono-repos
-       manage dependencies & dependency definitions.
-     */
-    // combinedDependencies: false,
-
-    /* if true leave symlinks untouched, otherwise use the realpath */
-    // preserveSymlinks: false,
-
-    /* TypeScript project file ('tsconfig.json') to use for
-       (1) compilation and
-       (2) resolution (e.g. with the paths property)
-
-       The (optional) fileName attribute specifies which file to take (relative to
-       dependency-cruiser's current working directory). When not provided
-       defaults to './tsconfig.json'.
-     */
-    tsConfig: {
-      fileName: 'tsconfig.json'
-    },
-
-    /* Webpack configuration to use to get resolve options from.
-
-       The (optional) fileName attribute specifies which file to take (relative
-       to dependency-cruiser's current working directory. When not provided defaults
-       to './webpack.conf.js'.
-
-       The (optional) `env` and `arguments` attributes contain the parameters
-       to be passed if your webpack config is a function and takes them (see 
-        webpack documentation for details)
-     */
-    // webpackConfig: {
-    //  fileName: 'webpack.config.js',
-    //  env: {},
-    //  arguments: {}
-    // },
-
-    /* Babel config ('.babelrc', '.babelrc.json', '.babelrc.json5', ...) to use
-      for compilation
-     */
-    // babelConfig: {
-    //   fileName: '.babelrc',
-    // },
-
-    /* List of strings you have in use in addition to cjs/ es6 requires
-       & imports to declare module dependencies. Use this e.g. if you've
-       re-declared require, use a require-wrapper or use window.require as
-       a hack.
-    */
-    // exoticRequireStrings: [],
-    
-    /* options to pass on to enhanced-resolve, the package dependency-cruiser
-       uses to resolve module references to disk. The values below should be
-       suitable for most situations
-
-       If you use webpack: you can also set these in webpack.conf.js. The set
-       there will override the ones specified here.
-     */
-    enhancedResolveOptions: {
-      /* What to consider as an 'exports' field in package.jsons */ 
-      exportsFields: ["exports"],
-      /* List of conditions to check for in the exports field.
-         Only works when the 'exportsFields' array is non-empty.
-      */
-      conditionNames: ["import", "require", "node", "default", "types"],
-      /* The extensions, by default are the same as the ones dependency-cruiser
-         can access (run `npx depcruise --info` to see which ones that are in
-         _your_ environment). If that list is larger than you need you can pass
-         the extensions you actually use (e.g. [".js", ".jsx"]). This can speed
-         up module resolution, which is the most expensive step.
-       */
-      // extensions: [".js", ".jsx", ".ts", ".tsx", ".d.ts"],
-      /* What to consider a 'main' field in package.json */
-      mainFields: ["module", "main", "types", "typings"],
-      /* A list of alias fields in package.jsons
-        
-         See [this specification](https://github.com/defunctzombie/package-browser-field-spec) and
-         the webpack [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealiasfields)
-         documentation.
-         
-         Defaults to an empty array (= don't use alias fields).
-       */
-      // aliasFields: ["browser"],
-    },
-
-    /* skipAnalysisNotInRules will make dependency-cruiser execute 
-       analysis strictly necessary for checking the rule set only. 
-
-       See https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#skipanalysisnotinrules
-       for details
-     */
-    skipAnalysisNotInRules: true,
-    
-    reporterOptions: {
-      dot: {
-        /* pattern of modules that can be consolidated in the detailed
-           graphical dependency graph. The default pattern in this configuration
-           collapses everything in node_modules to one folder deep so you see
-           the external modules, but their innards.
-         */
-        collapsePattern: 'node_modules/(?:@[^/]+/[^/]+|[^/]+)',
-
-        /* Options to tweak the appearance of your graph.See
-           https://github.com/sverweij/dependency-cruiser/blob/main/doc/options-reference.md#reporteroptions
-           for details and some examples. If you don't specify a theme
-           dependency-cruiser falls back to a built-in one.
-        */
-        // theme: {
-        //   graph: {
-        //     /* splines: "ortho" gives straight lines, but is slow on big graphs
-        //        splines: "true" gives bezier curves (fast, not as nice as ortho)
-        //    */
-        //     splines: "true"
-        //   },
-        // }
-      },
-      archi: {
-        /* pattern of modules that can be consolidated in the high level
-           graphical dependency graph. If you use the high level graphical
-           dependency graph reporter (`archi`) you probably want to tweak
-           this collapsePattern to your situation.
-        */
-        collapsePattern: '^(?:packages|src|lib(s?)|app(s?)|bin|test(s?)|spec(s?))/[^/]+|node_modules/(?:@[^/]+/[^/]+|[^/]+)',
-
-        /* Options to tweak the appearance of your graph. If you don't specify a
-           theme for 'archi' dependency-cruiser will use the one specified in the
-           dot section above and otherwise use the default one.
-         */
-        // theme: { },
-      },
-      "text": {
-        "highlightFocused": true
-      },
-    }
-  }
-};
-// generated: dependency-cruiser@17.0.1 on 2025-09-15T09:33:27.618Z

.github/workflows/backport.yaml

@@ -133,10 +133,11 @@ jobs:
         if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
         env:
           GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-          PR_TITLE: ${{ github.event.pull_request.title }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
         run: |
+          PR_TITLE="${{ github.event.pull_request.title }}"
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+
           for backport in ${{ steps.backport.outputs.success }}; do
             IFS=':' read -r version branch <<< "${backport}"
 

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

@@ -47,7 +47,6 @@ jobs:
     needs: wait-for-ci
     if: needs.wait-for-ci.outputs.should-proceed == 'true'
     runs-on: ubuntu-latest
-    timeout-minutes: 30
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -70,17 +69,19 @@ jobs:
           pnpm install -g typescript @vue/compiler-sfc
 
       - name: Run Claude PR Review
-        uses: anthropics/claude-code-action@v1.0.6
+        uses: anthropics/claude-code-action@main
         with:
           label_trigger: "claude-review"
-          prompt: |
+          direct_prompt: |
             Read the file .claude/commands/comprehensive-pr-review.md and follow ALL the instructions exactly. 
             
             CRITICAL: You must post individual inline comments using the gh api commands shown in the file. 
             DO NOT create a summary comment. 
             Each issue must be posted as a separate inline comment on the specific line of code.
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
-          claude_args: "--max-turns 256 --allowedTools 'Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch'"
+          max_turns: 256
+          timeout_minutes: 30
+          allowed_tools: "Bash(git:*),Bash(gh api:*),Bash(gh pr:*),Bash(gh repo:*),Bash(jq:*),Bash(echo:*),Read,Write,Edit,Glob,Grep,WebFetch"
         env:
           PR_NUMBER: ${{ github.event.pull_request.number }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/i18n.yaml

@@ -7,10 +7,11 @@ on:
   pull_request:
     branches: [ main ]
     types: [opened, synchronize, reopened]
+
 jobs:
   update-locales:
     # Branch detection: Only run for manual dispatch or version-bump-* branches from main repo
-    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && (startsWith(github.head_ref, 'version-bump-') || startsWith(github.head_ref, 'sno-fix-playwright-')))
+    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
     runs-on: ubuntu-latest
     steps:
     - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3

.github/workflows/pr-playwright-deploy.yaml

@@ -1,4 +1,4 @@
-name: PR Playwright Deploy (Forks)
+name: PR Playwright Deploy and Comment
 
 on:
   workflow_run:
@@ -9,84 +9,272 @@ env:
   DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
 
 jobs:
-  deploy-and-comment-forked-pr:
+  deploy-reports:
     runs-on: ubuntu-latest
-    if: |
-      github.repository == 'Comfy-Org/ComfyUI_frontend' && 
-      github.event.workflow_run.event == 'pull_request' &&
-      github.event.workflow_run.head_repository != null &&
-      github.event.workflow_run.repository != null &&
-      github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'completed'
     permissions:
-      pull-requests: write
       actions: read
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
-      - name: Log workflow trigger info
-        run: |
-          echo "Repository: ${{ github.repository }}"
-          echo "Event: ${{ github.event.workflow_run.event }}"
-          echo "Head repo: ${{ github.event.workflow_run.head_repository.full_name || 'null' }}"
-          echo "Base repo: ${{ github.event.workflow_run.repository.full_name || 'null' }}"
-          echo "Is forked: ${{ github.event.workflow_run.head_repository.full_name != github.event.workflow_run.repository.full_name }}"
-
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Get PR Number
-        id: pr
+      - name: Get PR info
+        id: pr-info
         uses: actions/github-script@v7
         with:
           script: |
-            const { data: prs } = await github.rest.pulls.list({
+            const { data: pullRequests } = await github.rest.pulls.list({
               owner: context.repo.owner,
               repo: context.repo.repo,
               state: 'open',
+              head: `${context.repo.owner}:${context.payload.workflow_run.head_branch}`,
             });
             
-            const pr = prs.find(p => p.head.sha === context.payload.workflow_run.head_sha);
-            
-            if (!pr) {
-              console.log('No PR found for SHA:', context.payload.workflow_run.head_sha);
-              return null;
+            if (pullRequests.length === 0) {
+              console.log('No open PR found for this branch');
+              return { number: null, sanitized_branch: null };
             }
             
-            console.log(`Found PR #${pr.number} from fork: ${context.payload.workflow_run.head_repository.full_name}`);
-            return pr.number;
+            const pr = pullRequests[0];
+            const branchName = context.payload.workflow_run.head_branch;
+            const sanitizedBranch = branchName.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/--+/g, '-').replace(/^-|-$/g, '');
+            
+            return {
+              number: pr.number,
+              sanitized_branch: sanitizedBranch
+            };
 
-      - name: Handle Test Start
-        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
+      - name: Set project name
+        if: fromJSON(steps.pr-info.outputs.result).number != null
+        id: project-name
         run: |
-          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
-          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
-            "${{ steps.pr.outputs.result }}" \
-            "${{ github.event.workflow_run.head_branch }}" \
-            "starting" \
-            "$(date -u '${{ env.DATE_FORMAT }}')"
+          if [ "${{ matrix.browser }}" = "chromium-0.5x" ]; then
+            echo "name=comfyui-playwright-chromium-0-5x" >> $GITHUB_OUTPUT
+          else
+            echo "name=comfyui-playwright-${{ matrix.browser }}" >> $GITHUB_OUTPUT
+          fi
+          echo "branch=${{ fromJSON(steps.pr-info.outputs.result).sanitized_branch }}" >> $GITHUB_OUTPUT
 
-      - name: Download and Deploy Reports
-        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+      - name: Download playwright report
+        if: fromJSON(steps.pr-info.outputs.result).number != null
         uses: actions/download-artifact@v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           run-id: ${{ github.event.workflow_run.id }}
-          pattern: playwright-report-*
-          path: reports
+          name: playwright-report-${{ matrix.browser }}
+          path: playwright-report
+
+      - name: Install Wrangler
+        if: fromJSON(steps.pr-info.outputs.result).number != null
+        run: npm install -g wrangler
+
+      - name: Deploy to Cloudflare Pages (${{ matrix.browser }})
+        if: fromJSON(steps.pr-info.outputs.result).number != null
+        id: cloudflare-deploy
+        continue-on-error: true
+        run: |
+          # Retry logic for wrangler deploy (3 attempts)
+          RETRY_COUNT=0
+          MAX_RETRIES=3
+          SUCCESS=false
           
-      - name: Handle Test Completion
-        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+          while [ $RETRY_COUNT -lt $MAX_RETRIES ] && [ $SUCCESS = false ]; do
+            RETRY_COUNT=$((RETRY_COUNT + 1))
+            echo "Deployment attempt $RETRY_COUNT of $MAX_RETRIES..."
+            
+            if npx wrangler pages deploy playwright-report --project-name=${{ steps.project-name.outputs.name }} --branch=${{ steps.project-name.outputs.branch }}; then
+              SUCCESS=true
+              echo "Deployment successful on attempt $RETRY_COUNT"
+            else
+              echo "Deployment failed on attempt $RETRY_COUNT"
+              if [ $RETRY_COUNT -lt $MAX_RETRIES ]; then
+                echo "Retrying in 10 seconds..."
+                sleep 10
+              fi
+            fi
+          done
+          
+          if [ $SUCCESS = false ]; then
+            echo "All deployment attempts failed"
+            exit 1
+          fi
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          GITHUB_TOKEN: ${{ github.token }}
+
+  comment-tests-starting:
+    runs-on: ubuntu-latest
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'requested'
+    permissions:
+      pull-requests: write
+      actions: read
+    steps:
+      - name: Get PR number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: pullRequests } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+              head: `${context.repo.owner}:${context.payload.workflow_run.head_branch}`,
+            });
+
+            if (pullRequests.length === 0) {
+              console.log('No open PR found for this branch');
+              return null;
+            }
+
+            return pullRequests[0].number;
+
+      - name: Get completion time
+        id: completion-time
+        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
+
+      - name: Generate comment body for start
+        if: steps.pr.outputs.result != 'null'
+        id: comment-body-start
         run: |
-          # Rename merged report if exists
-          [ -d "reports/playwright-report-chromium-merged" ] && \
-            mv reports/playwright-report-chromium-merged reports/playwright-report-chromium
-          
-          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
-          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
-            "${{ steps.pr.outputs.result }}" \
-            "${{ github.event.workflow_run.head_branch }}" \
-            "completed"
+          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
+          echo "## 🎭 Playwright Test Results" >> comment.md
+          echo "" >> comment.md
+          echo "<img alt='comfy-loading-gif' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px' style='vertical-align: middle; margin-right: 4px;' /> **Tests are starting...** " >> comment.md
+          echo "" >> comment.md
+          echo "⏰ Started at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
+          echo "" >> comment.md
+          echo "### 🚀 Running Tests" >> comment.md
+          echo "- 🧪 **chromium**: Running tests..." >> comment.md
+          echo "- 🧪 **chromium-0.5x**: Running tests..." >> comment.md
+          echo "- 🧪 **chromium-2x**: Running tests..." >> comment.md
+          echo "- 🧪 **mobile-chrome**: Running tests..." >> comment.md
+          echo "" >> comment.md
+          echo "---" >> comment.md
+          echo "⏱️ Please wait while tests are running across all browsers..." >> comment.md
+
+      - name: Comment PR - Tests Started
+        if: steps.pr.outputs.result != 'null'
+        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
+        with:
+          issue-number: ${{ steps.pr.outputs.result }}
+          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body-path: comment.md
+
+  comment-tests-completed:
+    runs-on: ubuntu-latest
+    needs: deploy-reports
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend' && github.event.workflow_run.event == 'pull_request' && github.event.action == 'completed' && always()
+    permissions:
+      pull-requests: write
+      actions: read
+    steps:
+      - name: Get PR number
+        id: pr
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: pullRequests } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+              head: `${context.repo.owner}:${context.payload.workflow_run.head_branch}`,
+            });
+
+            if (pullRequests.length === 0) {
+              console.log('No open PR found for this branch');
+              return null;
+            }
+
+            return pullRequests[0].number;
+
+      - name: Download all deployment info
+        if: steps.pr.outputs.result != 'null'
+        uses: actions/download-artifact@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+          pattern: deployment-info-*
+          merge-multiple: true
+          path: deployment-info
+
+      - name: Get completion time
+        id: completion-time
+        run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
+
+      - name: Generate comment body for completion
+        if: steps.pr.outputs.result != 'null'
+        id: comment-body-completed
+        run: |
+          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
+          echo "## 🎭 Playwright Test Results" >> comment.md
+          echo "" >> comment.md
+
+          # Check if all tests passed
+          ALL_PASSED=true
+          for file in deployment-info/*.txt; do
+            if [ -f "$file" ]; then
+              browser=$(basename "$file" .txt)
+              info=$(cat "$file")
+              exit_code=$(echo "$info" | cut -d'|' -f2)
+              if [ "$exit_code" != "0" ]; then
+                ALL_PASSED=false
+                break
+              fi
+            fi
+          done
+
+          if [ "$ALL_PASSED" = "true" ]; then
+            echo "✅ **All tests passed across all browsers!**" >> comment.md
+          else
+            echo "❌ **Some tests failed!**" >> comment.md
+          fi
+
+          echo "" >> comment.md
+          echo "⏰ Completed at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
+          echo "" >> comment.md
+          echo "### 📊 Test Reports by Browser" >> comment.md
+
+          for file in deployment-info/*.txt; do
+            if [ -f "$file" ]; then
+              browser=$(basename "$file" .txt)
+              info=$(cat "$file")
+              exit_code=$(echo "$info" | cut -d'|' -f2)
+              url=$(echo "$info" | cut -d'|' -f3)
+              
+              # Validate URLs before using them in comments
+              sanitized_url=$(echo "$url" | grep -E '^https://[a-z0-9.-]+\.pages\.dev(/.*)?$' || echo "INVALID_URL")
+              if [ "$sanitized_url" = "INVALID_URL" ]; then
+                echo "Invalid deployment URL detected: $url"
+                url="#" # Use safe fallback
+              fi
+              
+              if [ "$exit_code" = "0" ]; then
+                status="✅"
+              else
+                status="❌"
+              fi
+              
+              echo "- $status **$browser**: [View Report]($url)" >> comment.md
+            fi
+          done
+
+          echo "" >> comment.md
+          echo "---" >> comment.md
+          if [ "$ALL_PASSED" = "true" ]; then
+            echo "🎉 Your tests are passing across all browsers!" >> comment.md
+          else
+            echo "⚠️ Please check the test reports for details on failures." >> comment.md
+          fi
+
+      - name: Comment PR - Tests Complete
+        if: steps.pr.outputs.result != 'null'
+        uses: edumserrano/find-create-or-update-comment@82880b65c8a3a6e4c70aa05a204995b6c9696f53 # v3.0.0
+        with:
+          issue-number: ${{ steps.pr.outputs.result }}
+          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body-path: comment.md

.github/workflows/test-ui.yaml

@@ -229,13 +229,7 @@ jobs:
 
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
-        run: |
-          # Run tests with both HTML and JSON reporters
-          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          npx playwright test --project=${{ matrix.browser }} \
-            --reporter=list \
-            --reporter=html \
-            --reporter=json
+        run: npx playwright test --project=${{ matrix.browser }} --reporter=html
         working-directory: ComfyUI_frontend
 
       - uses: actions/upload-artifact@v4
@@ -281,12 +275,7 @@ jobs:
           merge-multiple: true
 
       - name: Merge into HTML Report
-        run: |
-          # Generate HTML report
-          npx playwright merge-reports --reporter=html ./all-blob-reports
-          # Generate JSON report separately with explicit output path
-          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          npx playwright merge-reports --reporter=json ./all-blob-reports
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
         working-directory: ComfyUI_frontend
 
       - name: Upload HTML report
@@ -295,65 +284,3 @@ jobs:
           name: playwright-report-chromium
           path: ComfyUI_frontend/playwright-report/
           retention-days: 30
-
-  #### BEGIN Deployment and commenting (non-forked PRs only)
-  # when using pull_request event, we have permission to comment directly
-  # if its a forked repo, we need to use workflow_run event in a separate workflow (pr-playwright-deploy.yaml)
-
-  # Post starting comment for non-forked PRs
-  comment-on-pr-start:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        
-      - name: Get start time
-        id: start-time
-        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
-        
-      - name: Post starting comment
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
-          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
-            "${{ github.event.pull_request.number }}" \
-            "${{ github.head_ref }}" \
-            "starting" \
-            "${{ steps.start-time.outputs.time }}"
-          
-  # Deploy and comment for non-forked PRs only
-  deploy-and-comment:
-    needs: [playwright-tests, merge-reports]
-    runs-on: ubuntu-latest
-    if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
-    permissions:
-      pull-requests: write
-      contents: read
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        
-      - name: Download all playwright reports
-        uses: actions/download-artifact@v4
-        with:
-          pattern: playwright-report-*
-          path: reports
-          
-      - name: Make deployment script executable
-        run: chmod +x scripts/cicd/pr-playwright-deploy-and-comment.sh
-        
-      - name: Deploy reports and comment on PR
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          GITHUB_TOKEN: ${{ github.token }}
-        run: |
-          ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
-            "${{ github.event.pull_request.number }}" \
-            "${{ github.head_ref }}" \
-            "completed"
-  #### END Deployment and commenting (non-forked PRs only)

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

@@ -40,7 +40,7 @@ jobs:
       - name: Get new version
         id: get-version
         run: |
-          NEW_VERSION=$(pnpm list @comfyorg/comfyui-electron-types --json --depth=0 | jq -r '.[0].dependencies."@comfyorg/comfyui-electron-types".version')
+          NEW_VERSION=$(pnpm list @comfyorg/comfyui-electron-types --json --depth=0 | jq -r '.[0].version')
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request

.gitignore

@@ -51,7 +51,6 @@ tests-ui/workflows/examples
 /blob-report/
 /playwright/.cache/
 browser_tests/**/*-win32.png
-browser-tests/local/
 
 .env
 
@@ -73,7 +72,7 @@ templates_repo/
 vite.config.mts.timestamp-*.mjs
 
 # Linux core dumps
-core
+./core
 
 *storybook.log
 storybook-static

.npmrc

@@ -1 +0,0 @@
-ignore-workspace-root-check=true

.storybook/preview-head.html

@@ -57,8 +57,9 @@
 
   /* Override Storybook's problematic & selector styles */
   /* Reset only the specific properties that Storybook injects */
-  li+li {
-    margin: 0;
-    padding: revert-layer;
+  #storybook-root li+li,
+  #storybook-docs li+li {
+    margin: inherit;
+    padding: inherit;
   }
 </style>

babel-plugin-stub-vue-imports.cjs

@@ -1,32 +0,0 @@
-module.exports = function(babel) {
-  const { types: t } = babel;
-  
-  return {
-    visitor: {
-      ImportDeclaration(path) {
-        const source = path.node.source.value;
-        
-        // Handle Vue files
-        if (source.endsWith('.vue')) {
-          const specifiers = path.node.specifiers;
-          if (specifiers.length > 0 && specifiers[0].type === 'ImportDefaultSpecifier') {
-            const name = specifiers[0].local.name;
-            // Replace with a variable declaration
-            path.replaceWith(
-              t.variableDeclaration('const', [
-                t.variableDeclarator(
-                  t.identifier(name),
-                  t.objectExpression([])
-                )
-              ])
-            );
-          }
-        }
-        // Handle CSS files - just remove the import
-        else if (source.endsWith('.css') || source.endsWith('.scss') || source.endsWith('.less')) {
-          path.remove();
-        }
-      }
-    }
-  };
-};

babel.config.json

@@ -1,24 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    [
-      "@babel/preset-typescript",
-      {
-        "allowDeclareFields": true,
-        "onlyRemoveTypeImports": true
-      }
-    ]
-  ],
-  "plugins": [
-    [
-      "babel-plugin-module-resolver",
-      {
-        "root": ["./"],
-        "alias": {
-          "@": "./src"
-        }
-      }
-    ],
-    "@vue/babel-plugin-jsx"
-  ]
-}

browser_tests/fixtures/ComfyPage.ts

@@ -10,10 +10,8 @@ import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { ComfyActionbar } from '../helpers/actionbar'
-import { LocationMock } from '../helpers/locationMock'
 import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
-import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
 import { SettingDialog } from './components/SettingDialog'
 import {
@@ -146,8 +144,6 @@ export class ComfyPage {
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
-  public readonly locationMock: LocationMock
-  public readonly vueNodes: VueNodeHelpers
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -176,8 +172,6 @@ export class ComfyPage {
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
-    this.locationMock = new LocationMock(page)
-    this.vueNodes = new VueNodeHelpers(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -278,20 +272,11 @@ export class ComfyPage {
 
   async setup({
     clearStorage = true,
-    mockReleases = true,
-    mockLocation = false
+    mockReleases = true
   }: {
     clearStorage?: boolean
     mockReleases?: boolean
-    mockLocation?: boolean | Parameters<LocationMock['setupLocationMock']>[0]
   } = {}) {
-    // Setup location mock if requested
-    if (mockLocation) {
-      const config =
-        typeof mockLocation === 'boolean' ? undefined : mockLocation
-      await this.locationMock.setupLocationMock(config)
-    }
-
     await this.goto()
 
     // Mock release endpoint to prevent changelog popups
@@ -1436,7 +1421,7 @@ export class ComfyPage {
   }
 
   async closeDialog() {
-    await this.page.locator('.p-dialog-close-button').click({ force: true })
+    await this.page.locator('.p-dialog-close-button').click()
     await expect(this.page.locator('.p-dialog')).toBeHidden()
   }
 
@@ -1648,39 +1633,28 @@ export const comfyPageFixture = base.extend<{
   comfyPage: async ({ page, request }, use, testInfo) => {
     const comfyPage = new ComfyPage(page, request)
 
-    const { parallelIndex, workerIndex, title } = testInfo
-
-    // Skip user setup for i18n collection tests
-    const isI18nTest = testInfo.file?.includes('collect-i18n')
-
-    let userId: string | undefined
-    if (!isI18nTest) {
-      // Use a combination of workerIndex and test title hash for unique usernames
-      const testHash = title.replace(/[^a-zA-Z0-9]/g, '').substring(0, 8)
-      const username = `playwright-test-${workerIndex}-${testHash}`
-      userId = await comfyPage.setupUser(username)
-      comfyPage.userIds[parallelIndex] = userId!
-    }
+    const { parallelIndex } = testInfo
+    const username = `playwright-test-${parallelIndex}`
+    const userId = await comfyPage.setupUser(username)
+    comfyPage.userIds[parallelIndex] = userId
 
     try {
-      if (!isI18nTest && userId) {
-        await comfyPage.setupSettings({
-          'Comfy.UseNewMenu': 'Disabled',
-          // Hide canvas menu/info/selection toolbox by default.
-          'Comfy.Graph.CanvasInfo': false,
-          'Comfy.Graph.CanvasMenu': false,
-          'Comfy.Canvas.SelectionToolbox': false,
-          // Hide all badges by default.
-          'Comfy.NodeBadge.NodeIdBadgeMode': NodeBadgeMode.None,
-          'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
-          // Disable tooltips by default to avoid flakiness.
-          'Comfy.EnableTooltips': false,
-          'Comfy.userId': userId,
-          // Set tutorial completed to true to avoid loading the tutorial workflow.
-          'Comfy.TutorialCompleted': true,
-          'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize
-        })
-      }
+      await comfyPage.setupSettings({
+        'Comfy.UseNewMenu': 'Disabled',
+        // Hide canvas menu/info/selection toolbox by default.
+        'Comfy.Graph.CanvasInfo': false,
+        'Comfy.Graph.CanvasMenu': false,
+        'Comfy.Canvas.SelectionToolbox': false,
+        // Hide all badges by default.
+        'Comfy.NodeBadge.NodeIdBadgeMode': NodeBadgeMode.None,
+        'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
+        // Disable tooltips by default to avoid flakiness.
+        'Comfy.EnableTooltips': false,
+        'Comfy.userId': userId,
+        // Set tutorial completed to true to avoid loading the tutorial workflow.
+        'Comfy.TutorialCompleted': true,
+        'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize
+      })
     } catch (e) {
       console.error(e)
     }
@@ -1699,7 +1673,6 @@ const makeMatcher = function <T>(
   type: string
 ) {
   return async function (
-    this: any,
     node: NodeReference,
     options?: { timeout?: number; intervals?: number[] }
   ) {

browser_tests/fixtures/VueNodeHelpers.ts

@@ -1,110 +0,0 @@
-/**
- * Vue Node Test Helpers
- */
-import type { Locator, Page } from '@playwright/test'
-
-export class VueNodeHelpers {
-  constructor(private page: Page) {}
-
-  /**
-   * Get locator for all Vue node components in the DOM
-   */
-  get nodes(): Locator {
-    return this.page.locator('[data-node-id]')
-  }
-
-  /**
-   * Get locator for selected Vue node components (using visual selection indicators)
-   */
-  get selectedNodes(): Locator {
-    return this.page.locator(
-      '[data-node-id].outline-black, [data-node-id].outline-white'
-    )
-  }
-
-  /**
-   * Get total count of Vue nodes in the DOM
-   */
-  async getNodeCount(): Promise<number> {
-    return await this.nodes.count()
-  }
-
-  /**
-   * Get count of selected Vue nodes
-   */
-  async getSelectedNodeCount(): Promise<number> {
-    return await this.selectedNodes.count()
-  }
-
-  /**
-   * Get all Vue node IDs currently in the DOM
-   */
-  async getNodeIds(): Promise<string[]> {
-    return await this.nodes.evaluateAll((nodes) =>
-      nodes
-        .map((n) => n.getAttribute('data-node-id'))
-        .filter((id): id is string => id !== null)
-    )
-  }
-
-  /**
-   * Select a specific Vue node by ID
-   */
-  async selectNode(nodeId: string): Promise<void> {
-    await this.page.locator(`[data-node-id="${nodeId}"]`).click()
-  }
-
-  /**
-   * Select multiple Vue nodes by IDs using Ctrl+click
-   */
-  async selectNodes(nodeIds: string[]): Promise<void> {
-    if (nodeIds.length === 0) return
-
-    // Select first node normally
-    await this.selectNode(nodeIds[0])
-
-    // Add additional nodes with Ctrl+click
-    for (let i = 1; i < nodeIds.length; i++) {
-      await this.page.locator(`[data-node-id="${nodeIds[i]}"]`).click({
-        modifiers: ['Control']
-      })
-    }
-  }
-
-  /**
-   * Clear all selections by clicking empty space
-   */
-  async clearSelection(): Promise<void> {
-    await this.page.mouse.click(50, 50)
-  }
-
-  /**
-   * Delete selected Vue nodes using Delete key
-   */
-  async deleteSelected(): Promise<void> {
-    await this.page.locator('#graph-canvas').focus()
-    await this.page.keyboard.press('Delete')
-  }
-
-  /**
-   * Delete selected Vue nodes using Backspace key
-   */
-  async deleteSelectedWithBackspace(): Promise<void> {
-    await this.page.locator('#graph-canvas').focus()
-    await this.page.keyboard.press('Backspace')
-  }
-
-  /**
-   * Wait for Vue nodes to be rendered
-   */
-  async waitForNodes(expectedCount?: number): Promise<void> {
-    if (expectedCount !== undefined) {
-      await this.page.waitForFunction(
-        (count) => document.querySelectorAll('[data-node-id]').length >= count,
-        expectedCount
-      )
-    } else {
-      await this.page.waitForSelector('[data-node-id]')
-    }
-  }
-}

browser_tests/helpers/locationMock.ts

@@ -1,144 +0,0 @@
-import type { Page } from '@playwright/test'
-
-/**
- * Mock location object for testing navigation and URL manipulation
- */
-export class LocationMock {
-  constructor(private page: Page) {}
-
-  /**
-   * Mock the location object in the page context
-   * @param mockConfig Configuration for the mock location
-   */
-  async setupLocationMock(mockConfig?: {
-    href?: string
-    origin?: string
-    pathname?: string
-    search?: string
-    hash?: string
-    hostname?: string
-    port?: string
-    protocol?: string
-  }) {
-    await this.page.addInitScript((config) => {
-      const defaultUrl = config?.href || window.location.href
-      const url = new URL(defaultUrl)
-
-      // Create a mock location object
-      const mockLocation = {
-        href: config?.href || url.href,
-        origin: config?.origin || url.origin,
-        protocol: config?.protocol || url.protocol,
-        host: url.host,
-        hostname: config?.hostname || url.hostname,
-        port: config?.port || url.port,
-        pathname: config?.pathname || url.pathname,
-        search: config?.search || url.search,
-        hash: config?.hash || url.hash,
-        assign: (newUrl: string) => {
-          console.log(`[Mock] location.assign called with: ${newUrl}`)
-          mockLocation.href = newUrl
-          // Trigger navigation event if needed
-          window.dispatchEvent(new Event('popstate'))
-        },
-        replace: (newUrl: string) => {
-          console.log(`[Mock] location.replace called with: ${newUrl}`)
-          mockLocation.href = newUrl
-          // Trigger navigation event if needed
-          window.dispatchEvent(new Event('popstate'))
-        },
-        reload: () => {
-          console.log('[Mock] location.reload called')
-          // Trigger reload event if needed
-          window.dispatchEvent(new Event('beforeunload'))
-        },
-        toString: () => mockLocation.href
-      }
-
-      // Override window.location
-      Object.defineProperty(window, 'location', {
-        value: mockLocation,
-        writable: true,
-        configurable: true
-      })
-
-      // Also override document.location
-      Object.defineProperty(document, 'location', {
-        value: mockLocation,
-        writable: true,
-        configurable: true
-      })
-    }, mockConfig)
-  }
-
-  /**
-   * Update the mock location during test execution
-   */
-  async updateLocation(
-    updates: Partial<{
-      href: string
-      pathname: string
-      search: string
-      hash: string
-    }>
-  ) {
-    await this.page.evaluate((updates) => {
-      const location = window.location as any
-      Object.keys(updates).forEach((key) => {
-        if (location[key] !== undefined) {
-          location[key] = updates[key as keyof typeof updates]
-        }
-      })
-    }, updates)
-  }
-
-  /**
-   * Get the current mock location values
-   */
-  async getLocation() {
-    return await this.page.evaluate(() => {
-      const loc = window.location
-      return {
-        href: loc.href,
-        origin: loc.origin,
-        protocol: loc.protocol,
-        host: loc.host,
-        hostname: loc.hostname,
-        port: loc.port,
-        pathname: loc.pathname,
-        search: loc.search,
-        hash: loc.hash
-      }
-    })
-  }
-
-  /**
-   * Simulate navigation to a new URL
-   */
-  async navigateTo(url: string) {
-    await this.page.evaluate((url) => {
-      const location = window.location as any
-      location.assign(url)
-    }, url)
-  }
-
-  /**
-   * Simulate location.replace
-   */
-  async replaceTo(url: string) {
-    await this.page.evaluate((url) => {
-      const location = window.location as any
-      location.replace(url)
-    }, url)
-  }
-
-  /**
-   * Simulate location.reload
-   */
-  async reload() {
-    await this.page.evaluate(() => {
-      const location = window.location as any
-      location.reload()
-    })
-  }
-}

browser_tests/locationMock.example.test.ts

@@ -1,103 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
-import { LocationMock } from './helpers/locationMock'
-
-test.describe('Location Mock Example', () => {
-  test('should mock location object', async ({ page, comfyPage }) => {
-    const locationMock = new LocationMock(page)
-
-    // Setup location mock before navigating to the page
-    await locationMock.setupLocationMock({
-      href: 'http://example.com/test',
-      pathname: '/test',
-      search: '?query=value',
-      hash: '#section'
-    })
-
-    // Navigate to your app
-    await comfyPage.goto()
-
-    // Verify the mock is working
-    const location = await locationMock.getLocation()
-    expect(location.pathname).toBe('/test')
-    expect(location.search).toBe('?query=value')
-    expect(location.hash).toBe('#section')
-
-    // Test navigation
-    await locationMock.navigateTo('http://example.com/new-page')
-    const newLocation = await locationMock.getLocation()
-    expect(newLocation.href).toBe('http://example.com/new-page')
-
-    // Test updating specific properties
-    await locationMock.updateLocation({
-      pathname: '/updated-path',
-      search: '?new=param'
-    })
-
-    const updatedLocation = await locationMock.getLocation()
-    expect(updatedLocation.pathname).toBe('/updated-path')
-    expect(updatedLocation.search).toBe('?new=param')
-  })
-
-  test('should handle location methods', async ({ page, comfyPage }) => {
-    const locationMock = new LocationMock(page)
-
-    await locationMock.setupLocationMock({
-      href: 'http://localhost:5173/'
-    })
-
-    await comfyPage.goto()
-
-    // Test location.assign
-    await page.evaluate(() => {
-      window.location.assign('/new-route')
-    })
-
-    // Check console for mock output
-    const consoleMessages: string[] = []
-    page.on('console', (msg) => {
-      if (msg.text().includes('[Mock]')) {
-        consoleMessages.push(msg.text())
-      }
-    })
-
-    await locationMock.navigateTo('/another-route')
-    await locationMock.replaceTo('/replaced-route')
-    await locationMock.reload()
-
-    // Verify mock methods were called
-    expect(
-      consoleMessages.some((msg) => msg.includes('location.assign'))
-    ).toBeTruthy()
-    expect(
-      consoleMessages.some((msg) => msg.includes('location.replace'))
-    ).toBeTruthy()
-    expect(
-      consoleMessages.some((msg) => msg.includes('location.reload'))
-    ).toBeTruthy()
-  })
-
-  test('should work with Happy DOM globals', async ({ page, comfyPage }) => {
-    // Set environment variable for Happy DOM URL
-    process.env.HAPPY_DOM_URL = 'http://custom-domain.com/'
-
-    const locationMock = new LocationMock(page)
-    await locationMock.setupLocationMock()
-
-    await comfyPage.goto()
-
-    // Verify location is mocked correctly
-    const location = await page.evaluate(() => ({
-      href: window.location.href,
-      origin: window.location.origin,
-      canAssign: typeof window.location.assign === 'function',
-      canReplace: typeof window.location.replace === 'function',
-      canReload: typeof window.location.reload === 'function'
-    }))
-
-    expect(location.canAssign).toBeTruthy()
-    expect(location.canReplace).toBeTruthy()
-    expect(location.canReload).toBeTruthy()
-  })
-})

browser_tests/tests/dialog.spec.ts

@@ -36,10 +36,6 @@ test('Does not report warning on undo/redo', async ({ comfyPage }) => {
   await comfyPage.loadWorkflow('missing/missing_nodes')
   await comfyPage.closeDialog()
 
-  // Wait for any async operations to complete after dialog closes
-  await comfyPage.nextFrame()
-  await comfyPage.page.waitForTimeout(100)
-
   // Make a change to the graph
   await comfyPage.doubleClickCanvas()
   await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')

browser_tests/tests/nodeHelp.spec.ts

@@ -46,7 +46,7 @@ test.describe('Node Help', () => {
 
       // Click the help button in the selection toolbox
       const helpButton = comfyPage.selectionToolbox.locator(
-        'button[data-testid="info-button"]'
+        'button:has(.pi-question-circle)'
       )
       await expect(helpButton).toBeVisible()
       await helpButton.click()
@@ -164,7 +164,7 @@ test.describe('Node Help', () => {
 
       // Click help button
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -194,7 +194,7 @@ test.describe('Node Help', () => {
 
       // Click help button
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -228,7 +228,7 @@ test.describe('Node Help', () => {
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -276,7 +276,7 @@ test.describe('Node Help', () => {
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -348,7 +348,7 @@ This is documentation for a custom node.
       }
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       if (await helpButton.isVisible()) {
         await helpButton.click()
@@ -389,7 +389,7 @@ This is documentation for a custom node.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -456,7 +456,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -479,7 +479,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -522,7 +522,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -538,7 +538,7 @@ This is English documentation.
 
       // Click help button again
       const helpButton2 = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton2.click()
 

browser_tests/tests/remoteWidgets.spec.ts

@@ -190,9 +190,7 @@ test.describe('Remote COMBO Widget', () => {
       await comfyPage.page.keyboard.press('Control+A')
 
       await expect(
-        comfyPage.page.locator(
-          '.selection-toolbox button[data-testid="refresh-button"]'
-        )
+        comfyPage.page.locator('.selection-toolbox .pi-refresh')
       ).toBeVisible()
     })
 

browser_tests/tests/selectionToolbox.spec.ts

@@ -149,7 +149,7 @@ test.describe('Selection Toolbox', () => {
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes
       const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-      expect(await selectedNode.getProperty('color')).not.toBeNull()
+      expect(selectedNode.getProperty('color')).not.toBeNull()
     })
 
     test('color picker shows current color of selected nodes', async ({

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -1,177 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Selection Toolbox - More Options Submenus', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
-    await comfyPage.loadWorkflow('nodes/single_ksampler')
-    await comfyPage.nextFrame()
-    await comfyPage.selectNodes(['KSampler'])
-    await comfyPage.nextFrame()
-  })
-
-  const openMoreOptions = async (comfyPage: any) => {
-    const ksamplerNodes = await comfyPage.getNodeRefsByTitle('KSampler')
-    if (ksamplerNodes.length === 0) {
-      throw new Error('No KSampler nodes found')
-    }
-
-    // Drag the KSampler to the center of the screen
-    const nodePos = await ksamplerNodes[0].getPosition()
-    const viewportSize = comfyPage.page.viewportSize()
-    const centerX = viewportSize.width / 3
-    const centerY = viewportSize.height / 2
-    await comfyPage.dragAndDrop(
-      { x: nodePos.x, y: nodePos.y },
-      { x: centerX, y: centerY }
-    )
-    await comfyPage.nextFrame()
-
-    await ksamplerNodes[0].click('title')
-    await comfyPage.nextFrame()
-    await comfyPage.page.waitForTimeout(500)
-
-    await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible({
-      timeout: 5000
-    })
-
-    const moreOptionsBtn = comfyPage.page.locator(
-      '[data-testid="more-options-button"]'
-    )
-    await expect(moreOptionsBtn).toBeVisible({ timeout: 3000 })
-
-    await comfyPage.page.click('[data-testid="more-options-button"]')
-
-    await comfyPage.nextFrame()
-
-    const menuOptionsVisible = await comfyPage.page
-      .getByText('Rename')
-      .isVisible({ timeout: 2000 })
-      .catch(() => false)
-    if (menuOptionsVisible) {
-      return
-    }
-
-    await moreOptionsBtn.click({ force: true })
-    await comfyPage.nextFrame()
-    await comfyPage.page.waitForTimeout(2000)
-
-    const menuOptionsVisibleAfterClick = await comfyPage.page
-      .getByText('Rename')
-      .isVisible({ timeout: 2000 })
-      .catch(() => false)
-    if (menuOptionsVisibleAfterClick) {
-      return
-    }
-
-    throw new Error('Could not open More Options menu - popover not showing')
-  }
-
-  test('opens Node Info from More Options menu', async ({ comfyPage }) => {
-    await openMoreOptions(comfyPage)
-    const nodeInfoButton = comfyPage.page.getByText('Node Info', {
-      exact: true
-    })
-    await expect(nodeInfoButton).toBeVisible()
-    await nodeInfoButton.click()
-    await comfyPage.nextFrame()
-  })
-
-  test('changes node shape via Shape submenu', async ({ comfyPage }) => {
-    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-    const initialShape = await nodeRef.getProperty<number>('shape')
-
-    await openMoreOptions(comfyPage)
-    await comfyPage.page.getByText('Shape', { exact: true }).click()
-    await expect(comfyPage.page.getByText('Box', { exact: true })).toBeVisible({
-      timeout: 5000
-    })
-    await comfyPage.page.getByText('Box', { exact: true }).click()
-    await comfyPage.nextFrame()
-
-    const newShape = await nodeRef.getProperty<number>('shape')
-    expect(newShape).not.toBe(initialShape)
-    expect(newShape).toBe(1)
-  })
-
-  test('changes node color via Color submenu swatch', async ({ comfyPage }) => {
-    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-    const initialColor = await nodeRef.getProperty<string | undefined>('color')
-
-    await openMoreOptions(comfyPage)
-    await comfyPage.page.getByText('Color', { exact: true }).click()
-    const blueSwatch = comfyPage.page.locator('[title="Blue"]')
-    await expect(blueSwatch.first()).toBeVisible({ timeout: 5000 })
-    await blueSwatch.first().click()
-    await comfyPage.nextFrame()
-
-    const newColor = await nodeRef.getProperty<string | undefined>('color')
-    expect(newColor).toBe('#223')
-    if (initialColor) {
-      expect(newColor).not.toBe(initialColor)
-    }
-  })
-
-  test('renames a node using Rename action', async ({ comfyPage }) => {
-    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-    await openMoreOptions(comfyPage)
-    await comfyPage.page
-      .getByText('Rename', { exact: true })
-      .click({ force: true })
-    const input = comfyPage.page.locator(
-      '.group-title-editor.node-title-editor .editable-text input'
-    )
-    await expect(input).toBeVisible()
-    await input.fill('RenamedNode')
-    await input.press('Enter')
-    await comfyPage.nextFrame()
-    const newTitle = await nodeRef.getProperty<string>('title')
-    expect(newTitle).toBe('RenamedNode')
-  })
-
-  test('closes More Options menu when clicking outside', async ({
-    comfyPage
-  }) => {
-    await openMoreOptions(comfyPage)
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).toBeVisible({ timeout: 5000 })
-
-    await comfyPage.page
-      .locator('#graph-canvas')
-      .click({ position: { x: 0, y: 50 }, force: true })
-    await comfyPage.nextFrame()
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).not.toBeVisible()
-  })
-
-  test('closes More Options menu when clicking the button again (toggle)', async ({
-    comfyPage
-  }) => {
-    await openMoreOptions(comfyPage)
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).toBeVisible({ timeout: 5000 })
-
-    await comfyPage.page.evaluate(() => {
-      const btn = document.querySelector('[data-testid="more-options-button"]')
-      if (btn) {
-        const event = new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true,
-          view: window,
-          detail: 1
-        })
-        btn.dispatchEvent(event)
-      }
-    })
-    await comfyPage.nextFrame()
-    await comfyPage.page.waitForTimeout(500)
-
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).not.toBeVisible()
-  })
-})

browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts

@@ -1,141 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Vue Nodes - Delete Key Interaction', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Enable Vue nodes rendering
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.setup()
-  })
-
-  test('Can select all and delete Vue nodes with Delete key', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    // Get initial Vue node count
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
-
-    // Select all Vue nodes
-    await comfyPage.ctrlA()
-
-    // Verify all Vue nodes are selected
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(initialNodeCount)
-
-    // Delete with Delete key
-    await comfyPage.vueNodes.deleteSelected()
-
-    // Verify all Vue nodes were deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(0)
-  })
-
-  test('Can select specific Vue node and delete it', async ({ comfyPage }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    // Get initial Vue node count
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
-
-    // Get first Vue node ID and select it
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    await comfyPage.vueNodes.selectNode(nodeIds[0])
-
-    // Verify selection
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(1)
-
-    // Delete with Delete key
-    await comfyPage.vueNodes.deleteSelected()
-
-    // Verify one Vue node was deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - 1)
-  })
-
-  test('Can select and delete Vue node with Backspace key', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-
-    // Select first Vue node
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    await comfyPage.vueNodes.selectNode(nodeIds[0])
-
-    // Delete with Backspace key instead of Delete
-    await comfyPage.vueNodes.deleteSelectedWithBackspace()
-
-    // Verify Vue node was deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - 1)
-  })
-
-  test('Delete key does not delete node when typing in Vue node widgets', async ({
-    comfyPage
-  }) => {
-    const initialNodeCount = await comfyPage.getGraphNodesCount()
-
-    // Find a text input widget in a Vue node
-    const textWidget = comfyPage.page
-      .locator('input[type="text"], textarea')
-      .first()
-
-    // Click on text widget to focus it
-    await textWidget.click()
-    await textWidget.fill('test text')
-
-    // Press Delete while focused on widget - should delete text, not node
-    await textWidget.press('Delete')
-
-    // Node count should remain the same
-    const finalNodeCount = await comfyPage.getGraphNodesCount()
-    expect(finalNodeCount).toBe(initialNodeCount)
-  })
-
-  test('Delete key does not delete node when nothing is selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    // Ensure no Vue nodes are selected
-    await comfyPage.vueNodes.clearSelection()
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(0)
-
-    // Press Delete key - should not crash and should handle gracefully
-    await comfyPage.page.keyboard.press('Delete')
-
-    // Vue node count should remain the same
-    const nodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(nodeCount).toBeGreaterThan(0)
-  })
-
-  test('Can multi-select with Ctrl+click and delete multiple Vue nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-
-    // Multi-select first two Vue nodes using Ctrl+click
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    const nodesToSelect = nodeIds.slice(0, 2)
-    await comfyPage.vueNodes.selectNodes(nodesToSelect)
-
-    // Verify expected nodes are selected
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(nodesToSelect.length)
-
-    // Delete selected Vue nodes
-    await comfyPage.vueNodes.deleteSelected()
-
-    // Verify expected nodes were deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - nodesToSelect.length)
-  })
-})

browser_tests/tests/widget.spec.ts

@@ -264,13 +264,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

build/plugins/comfyAPIPlugin.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import { type Plugin } from 'vite'
+import { Plugin } from 'vite'
 
 interface ShimResult {
   code: string

build/plugins/generateImportMapPlugin.ts

@@ -1,7 +1,7 @@
 import glob from 'fast-glob'
 import fs from 'fs-extra'
 import { dirname, join } from 'node:path'
-import { type HtmlTagDescriptor, type Plugin, normalizePath } from 'vite'
+import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
 
 interface ImportMapSource {
   name: string

components.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "new-york",
-  "typescript": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/assets/css/style.css",
-    "baseColor": "stone",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "composables": "@/composables",
-    "utils": "@/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib"
-  },
-  "iconLibrary": "lucide"
-}

docs/adr/0004-fork-primevue-ui-library.md

@@ -1,62 +0,0 @@
-# 4. Fork PrimeVue UI Library
-
-Date: 2025-08-27
-
-## Status
-
-Rejected
-
-## Context
-
-ComfyUI's frontend requires modifications to PrimeVue components that cannot be achieved through the library's customization APIs. Two specific technical incompatibilities have been identified with the transform-based canvas architecture:
-
-**Screen Coordinate Hit-Testing Conflicts:**
-- PrimeVue components use `getBoundingClientRect()` for screen coordinate calculations that don't account for CSS transforms
-- The Slider component directly uses raw `pageX/pageY` coordinates ([lines 102-103](https://github.com/primefaces/primevue/blob/master/packages/primevue/src/slider/Slider.vue#L102-L103)) without transform-aware positioning
-- This breaks interaction in transformed coordinate spaces where screen coordinates don't match logical element positions
-
-**Virtual Canvas Scroll Interference:**
-- LiteGraph's infinite canvas uses scroll coordinates semantically for graph navigation via the `DragAndScale` coordinate system
-- PrimeVue overlay components automatically trigger `scrollIntoView` behavior which interferes with this virtual positioning
-- This issue is documented in [PrimeVue discussion #4270](https://github.com/orgs/primefaces/discussions/4270) where the feature request was made to disable this behavior
-
-**Historical Overlay Issues:**
-- Previous z-index positioning conflicts required manual workarounds (commit `6d4eafb0`) where PrimeVue Dialog components needed `autoZIndex: false` and custom mask styling, later resolved by removing PrimeVue's automatic z-index management entirely
-
-**Minimal Update Overhead:**
-- Analysis of git history shows only 2 PrimeVue version updates in 2+ years, indicating that upstream sync overhead is negligible for this project
-
-**Future Interaction System Requirements:**
-- The ongoing canvas architecture evolution will require more granular control over component interaction and event handling as the transform-based system matures
-- Predictable need for additional component modifications beyond current identified issues
-
-## Decision
-
-We will **NOT** fork PrimeVue. After evaluation, forking was determined to be unnecessarily complex and costly.
-
-**Rationale for Rejection:**
-
-- **Significant Implementation Complexity**: PrimeVue is structured as a monorepo ([primefaces/primevue](https://github.com/primefaces/primevue)) with significant code in a separate monorepo ([PrimeUIX](https://github.com/primefaces/primeuix)). Forking would require importing both repositories whole and selectively pruning or exempting components from our workspace tooling, adding substantial complexity.
-
-- **Alternative Solutions Available**: The modifications we identified (e.g., scroll interference issues, coordinate system conflicts) have less costly solutions that don't require maintaining a full fork. For example, coordinate issues could be addressed through event interception and synthetic event creation with scaled values.
-
-- **Maintenance Burden**: Ongoing maintenance and upgrades would be very painful, requiring manual conflict resolution and keeping pace with upstream changes across multiple repositories.
-
-- **Limited Tooling Support**: There isn't adequate tooling that provides the granularity needed to cleanly manage a PrimeVue fork within our existing infrastructure.
-
-## Consequences
-
-### Alternative Approach
-
-- **Use PrimeVue as External Dependency**: Continue using PrimeVue as a standard npm dependency
-- **Targeted Workarounds**: Implement specific solutions for identified issues (coordinate system conflicts, scroll interference) without forking the entire library
-- **Selective Component Replacement**: Use libraries like shadcn/ui to replace specific problematic PrimeVue components and adjust them to match our design system
-- **Upstream Engagement**: Continue engaging with PrimeVue community for feature requests and bug reports
-- **Maintain Flexibility**: Preserve ability to upgrade PrimeVue versions without fork maintenance overhead
-
-## Notes
-
-- Technical issues documented in the Context section remain valid concerns
-- Solutions will be pursued through targeted fixes rather than wholesale forking
-- Future re-evaluation possible if PrimeVue's architecture significantly changes or if alternative tooling becomes available
-- This decision prioritizes maintainability and development velocity over maximum customization control

docs/adr/README.md

@@ -13,7 +13,6 @@ An Architecture Decision Record captures an important architectural decision mad
 | [0001](0001-merge-litegraph-into-frontend.md) | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
 | [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Accepted | 2025-08-25 |
 | [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
-| [0004](0004-fork-primevue-ui-library.md) | Fork PrimeVue UI Library | Rejected | 2025-08-27 |
 
 ## Creating a New ADR
 

eslint.config.js

@@ -64,9 +64,6 @@ export default [
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
-      'vue/multi-word-component-names': 'off', // TODO: fix
-      'vue/no-template-shadow': 'off', // TODO: fix
-      'vue/one-component-per-file': 'off', // TODO: fix
       // Restrict deprecated PrimeVue components
       'no-restricted-imports': [
         'error',

knip.config.ts

@@ -18,16 +18,7 @@ const config: KnipConfig = {
     '@primeuix/utils',
     '@primevue/icons',
     // Dev
-    '@trivago/prettier-plugin-sort-imports',
-    // Babel dependencies used in playwright.i18n.config.ts
-    '@babel/plugin-transform-modules-commonjs',
-    '@babel/plugin-transform-typescript',
-    'babel-helper-vue-jsx-merge-props',
-    'babel-plugin-syntax-jsx',
-    'babel-plugin-transform-import-ignore',
-    'babel-plugin-transform-vue-jsx',
-    'babel-preset-env',
-    'babel-preset-typescript-vue3'
+    '@trivago/prettier-plugin-sort-imports'
   ],
   ignore: [
     // Auto generated manager types

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.27.3",
+  "version": "1.27.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -25,26 +25,20 @@
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
-    "lint": "eslint src --cache",
-    "lint:fix": "eslint src --cache --fix",
+    "lint": "eslint src --cache --concurrency=auto",
+    "lint:fix": "eslint src --cache --fix --concurrency=auto",
     "lint:no-cache": "eslint src",
     "lint:fix:no-cache": "eslint src --fix",
     "knip": "knip --cache",
     "knip:no-cache": "knip",
     "locale": "lobe-i18n locale",
-    "collect-i18n": "playwright test --config=playwright.i18n.config.ts",
+    "collect-i18n": "npx playwright test --config=playwright.i18n.config.ts",
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "storybook": "nx storybook -p 6006",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-    "@babel/plugin-transform-typescript": "^7.28.0",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.8.0",
-    "@iconify-json/lucide": "^1.2.66",
     "@iconify/tailwind": "^1.2.0",
     "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
     "@lobehub/i18n-cli": "^1.25.1",
@@ -67,16 +61,7 @@
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.0.0",
-    "@vue/babel-plugin-jsx": "^1.5.0",
     "@vue/test-utils": "^2.4.6",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-import-ignore": "^1.1.0",
-    "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-typescript-vue3": "^2.1.1",
-    "dependency-cruiser": "^17.0.1",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6",
@@ -91,13 +76,13 @@
     "jsdom": "^26.1.0",
     "knip": "^5.62.0",
     "lint-staged": "^15.2.7",
+    "lucide-vue-next": "^0.540.0",
     "nx": "21.4.1",
     "prettier": "^3.3.2",
     "storybook": "^9.1.1",
     "tailwindcss": "^4.1.12",
     "tailwindcss-primeui": "^0.6.1",
     "tsx": "^4.15.6",
-    "tw-animate-css": "^1.3.8",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.42.0",
     "unplugin-icons": "^0.22.0",
@@ -115,7 +100,7 @@
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.72",
+    "@comfyorg/comfyui-electron-types": "^0.4.69",
     "@iconify/json": "^2.2.380",
     "@primeuix/forms": "0.0.2",
     "@primeuix/styled": "0.3.2",
@@ -155,7 +140,6 @@
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "primevue": "^4.2.5",
-    "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
     "tailwind-merge": "^3.3.1",
     "three": "^0.170.0",

playwright.i18n.config.ts

@@ -1,10 +1,6 @@
 import { defineConfig } from '@playwright/test'
-import path from 'path'
-import { fileURLToPath } from 'url'
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const config: any = defineConfig({
+export default defineConfig({
   testDir: './scripts',
   use: {
     baseURL: 'http://localhost:5173',
@@ -12,41 +8,5 @@ const config: any = defineConfig({
   },
   reporter: 'list',
   timeout: 60000,
-  workers: 1, // Run tests serially to avoid duplicate user creation
-  testMatch: /collect-i18n-.*\.ts/,
-  // Start dev server before running tests
-  webServer: {
-    command: 'pnpm dev',
-    url: 'http://localhost:5173',
-    reuseExistingServer: true,
-    timeout: 60000
-  }
+  testMatch: /collect-i18n-.*\.ts/
 })
-
-// Configure babel plugins for TypeScript with declare fields and module resolution
-config['@playwright/test'] = {
-  babelPlugins: [
-    // Stub Vue and CSS imports first to prevent parsing errors
-    [path.join(__dirname, 'babel-plugin-stub-vue-imports.cjs')],
-    // Module resolver to handle @ alias
-    [
-      'babel-plugin-module-resolver',
-      {
-        root: ['./'],
-        alias: {
-          '@': './src'
-        }
-      }
-    ],
-    // Then TypeScript transformation with declare field support
-    [
-      '@babel/plugin-transform-typescript',
-      {
-        allowDeclareFields: true,
-        onlyRemoveTypeImports: true
-      }
-    ]
-  ]
-}
-
-export default config

scripts/cicd/extract-playwright-counts.ts

@@ -1,183 +0,0 @@
-#!/usr/bin/env tsx
-import fs from 'fs'
-import path from 'path'
-
-interface TestStats {
-  expected?: number
-  unexpected?: number
-  flaky?: number
-  skipped?: number
-  finished?: number
-}
-
-interface ReportData {
-  stats?: TestStats
-}
-
-interface TestCounts {
-  passed: number
-  failed: number
-  flaky: number
-  skipped: number
-  total: number
-}
-
-/**
- * Extract test counts from Playwright HTML report
- * @param reportDir - Path to the playwright-report directory
- * @returns Test counts { passed, failed, flaky, skipped, total }
- */
-function extractTestCounts(reportDir: string): TestCounts {
-  const counts: TestCounts = {
-    passed: 0,
-    failed: 0,
-    flaky: 0,
-    skipped: 0,
-    total: 0
-  }
-
-  try {
-    // First, try to find report.json which Playwright generates with JSON reporter
-    const jsonReportFile = path.join(reportDir, 'report.json')
-    if (fs.existsSync(jsonReportFile)) {
-      const reportJson: ReportData = JSON.parse(
-        fs.readFileSync(jsonReportFile, 'utf-8')
-      )
-      if (reportJson.stats) {
-        const stats = reportJson.stats
-        counts.total = stats.expected || 0
-        counts.passed =
-          (stats.expected || 0) -
-          (stats.unexpected || 0) -
-          (stats.flaky || 0) -
-          (stats.skipped || 0)
-        counts.failed = stats.unexpected || 0
-        counts.flaky = stats.flaky || 0
-        counts.skipped = stats.skipped || 0
-        return counts
-      }
-    }
-
-    // Try index.html - Playwright HTML report embeds data in a script tag
-    const indexFile = path.join(reportDir, 'index.html')
-    if (fs.existsSync(indexFile)) {
-      const content = fs.readFileSync(indexFile, 'utf-8')
-
-      // Look for the embedded report data in various formats
-      // Format 1: window.playwrightReportBase64
-      let dataMatch = content.match(
-        /window\.playwrightReportBase64\s*=\s*["']([^"']+)["']/
-      )
-      if (dataMatch) {
-        try {
-          const decodedData = Buffer.from(dataMatch[1], 'base64').toString(
-            'utf-8'
-          )
-          const reportData: ReportData = JSON.parse(decodedData)
-
-          if (reportData.stats) {
-            const stats = reportData.stats
-            counts.total = stats.expected || 0
-            counts.passed =
-              (stats.expected || 0) -
-              (stats.unexpected || 0) -
-              (stats.flaky || 0) -
-              (stats.skipped || 0)
-            counts.failed = stats.unexpected || 0
-            counts.flaky = stats.flaky || 0
-            counts.skipped = stats.skipped || 0
-            return counts
-          }
-        } catch (e) {
-          // Continue to try other formats
-        }
-      }
-
-      // Format 2: window.playwrightReport
-      dataMatch = content.match(/window\.playwrightReport\s*=\s*({[\s\S]*?});/)
-      if (dataMatch) {
-        try {
-          // Use Function constructor instead of eval for safety
-          const reportData = new Function(
-            'return ' + dataMatch[1]
-          )() as ReportData
-
-          if (reportData.stats) {
-            const stats = reportData.stats
-            counts.total = stats.expected || 0
-            counts.passed =
-              (stats.expected || 0) -
-              (stats.unexpected || 0) -
-              (stats.flaky || 0) -
-              (stats.skipped || 0)
-            counts.failed = stats.unexpected || 0
-            counts.flaky = stats.flaky || 0
-            counts.skipped = stats.skipped || 0
-            return counts
-          }
-        } catch (e) {
-          // Continue to try other formats
-        }
-      }
-
-      // Format 3: Look for stats in the HTML content directly
-      // Playwright sometimes renders stats in the UI
-      const statsMatch = content.match(
-        /(\d+)\s+passed[^0-9]*(\d+)\s+failed[^0-9]*(\d+)\s+flaky[^0-9]*(\d+)\s+skipped/i
-      )
-      if (statsMatch) {
-        counts.passed = parseInt(statsMatch[1]) || 0
-        counts.failed = parseInt(statsMatch[2]) || 0
-        counts.flaky = parseInt(statsMatch[3]) || 0
-        counts.skipped = parseInt(statsMatch[4]) || 0
-        counts.total =
-          counts.passed + counts.failed + counts.flaky + counts.skipped
-        return counts
-      }
-
-      // Format 4: Try to extract from summary text patterns
-      const passedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+passed/i)
-      const failedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+failed/i)
-      const flakyMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+flaky/i)
-      const skippedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+skipped/i)
-      const totalMatch = content.match(
-        /(\d+)\s+(?:tests?|specs?)\s+(?:total|ran)/i
-      )
-
-      if (passedMatch) counts.passed = parseInt(passedMatch[1]) || 0
-      if (failedMatch) counts.failed = parseInt(failedMatch[1]) || 0
-      if (flakyMatch) counts.flaky = parseInt(flakyMatch[1]) || 0
-      if (skippedMatch) counts.skipped = parseInt(skippedMatch[1]) || 0
-      if (totalMatch) {
-        counts.total = parseInt(totalMatch[1]) || 0
-      } else if (
-        counts.passed ||
-        counts.failed ||
-        counts.flaky ||
-        counts.skipped
-      ) {
-        counts.total =
-          counts.passed + counts.failed + counts.flaky + counts.skipped
-      }
-    }
-  } catch (error) {
-    console.error(`Error reading report from ${reportDir}:`, error)
-  }
-
-  return counts
-}
-
-// Main execution
-const reportDir = process.argv[2]
-
-if (!reportDir) {
-  console.error('Usage: extract-playwright-counts.ts <report-directory>')
-  process.exit(1)
-}
-
-const counts = extractTestCounts(reportDir)
-
-// Output as JSON for easy parsing in shell script
-console.log(JSON.stringify(counts))
-
-export { extractTestCounts }

scripts/cicd/pr-playwright-deploy-and-comment.sh

@@ -1,377 +0,0 @@
-#!/bin/bash
-set -e
-
-# Deploy Playwright test reports to Cloudflare Pages and comment on PR
-# Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
-
-# Input validation
-# Validate PR number is numeric
-case "$1" in
-    ''|*[!0-9]*) 
-        echo "Error: PR_NUMBER must be numeric" >&2
-        exit 1
-        ;;
-esac
-PR_NUMBER="$1"
-
-# Sanitize and validate branch name (allow alphanumeric, dots, dashes, underscores, slashes)
-BRANCH_NAME=$(echo "$2" | sed 's/[^a-zA-Z0-9._/-]//g')
-if [ -z "$BRANCH_NAME" ]; then
-    echo "Error: Invalid or empty branch name" >&2
-    exit 1
-fi
-
-# Validate status parameter
-STATUS="${3:-completed}"
-case "$STATUS" in
-    starting|completed) ;;
-    *) 
-        echo "Error: STATUS must be 'starting' or 'completed'" >&2
-        exit 1
-        ;;
-esac
-
-START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
-
-# Required environment variables
-: "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
-: "${GITHUB_REPOSITORY:?GITHUB_REPOSITORY is required}"
-
-# Cloudflare variables only required for deployment
-if [ "$STATUS" = "completed" ]; then
-    : "${CLOUDFLARE_API_TOKEN:?CLOUDFLARE_API_TOKEN is required for deployment}"
-    : "${CLOUDFLARE_ACCOUNT_ID:?CLOUDFLARE_ACCOUNT_ID is required for deployment}"
-fi
-
-# Configuration
-COMMENT_MARKER="<!-- PLAYWRIGHT_TEST_STATUS -->"
-# Use dot notation for artifact names (as Playwright creates them)
-BROWSERS="chromium chromium-2x chromium-0.5x mobile-chrome"
-
-# Install wrangler if not available (output to stderr for debugging)
-if ! command -v wrangler > /dev/null 2>&1; then
-    echo "Installing wrangler v4..." >&2
-    npm install -g wrangler@^4.0.0 >&2 || {
-        echo "Failed to install wrangler" >&2
-        echo "failed"
-        return
-    }
-fi
-
-# Check if tsx is available, install if not
-if ! command -v tsx > /dev/null 2>&1; then
-    echo "Installing tsx..." >&2
-    npm install -g tsx >&2 || echo "Failed to install tsx" >&2
-fi
-
-# Deploy a single browser report, WARN: ensure inputs are sanitized before calling this function
-deploy_report() {
-    dir="$1"
-    browser="$2"
-    branch="$3"
-    
-    [ ! -d "$dir" ] && echo "failed" && return
-    
-    
-    # Project name with dots converted to dashes for Cloudflare
-    sanitized_browser=$(echo "$browser" | sed 's/\./-/g')
-    project="comfyui-playwright-${sanitized_browser}"
-    
-    echo "Deploying $browser to project $project on branch $branch..." >&2
-    
-    # Try deployment up to 3 times
-    i=1
-    while [ $i -le 3 ]; do
-        echo "Deployment attempt $i of 3..." >&2
-        # Branch and project are already sanitized, use them directly
-        # Branch was sanitized at script start, project uses sanitized_browser
-        if output=$(wrangler pages deploy "$dir" \
-            --project-name="$project" \
-            --branch="$branch" 2>&1); then
-            
-            # Extract URL from output (improved regex for valid URL characters)
-            url=$(echo "$output" | grep -oE 'https://[a-zA-Z0-9.-]+\.pages\.dev\S*' | head -1)
-            result="${url:-https://${branch}.${project}.pages.dev}"
-            echo "Success! URL: $result" >&2
-            echo "$result"  # Only this goes to stdout for capture
-            return
-        else
-            echo "Deployment failed on attempt $i: $output" >&2
-        fi
-        [ $i -lt 3 ] && sleep 10
-        i=$((i + 1))
-    done
-    
-    echo "failed"
-}
-
-# Post or update GitHub comment
-post_comment() {
-    body="$1"
-    temp_file=$(mktemp)
-    echo "$body" > "$temp_file"
-    
-    if command -v gh > /dev/null 2>&1; then
-        # Find existing comment ID
-        existing=$(gh api "repos/$GITHUB_REPOSITORY/issues/$PR_NUMBER/comments" \
-            --jq ".[] | select(.body | contains(\"$COMMENT_MARKER\")) | .id" | head -1)
-        
-        if [ -n "$existing" ]; then
-            # Update specific comment by ID
-            gh api --method PATCH "repos/$GITHUB_REPOSITORY/issues/comments/$existing" \
-                --field body="$(cat "$temp_file")"
-        else
-            # Create new comment
-            gh pr comment "$PR_NUMBER" --body-file "$temp_file"
-        fi
-    else
-        echo "GitHub CLI not available, outputting comment:"
-        cat "$temp_file"
-    fi
-    
-    rm -f "$temp_file"
-}
-
-# Main execution
-if [ "$STATUS" = "starting" ]; then
-    # Post starting comment
-    comment=$(cat <<EOF
-$COMMENT_MARKER
-## 🎭 Playwright Test Results
-
-<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Tests are starting...**
-
-⏰ Started at: $START_TIME UTC
-
-### 🚀 Running Tests
-- 🧪 **chromium**: Running tests...
-- 🧪 **chromium-0.5x**: Running tests...
-- 🧪 **chromium-2x**: Running tests...
-- 🧪 **mobile-chrome**: Running tests...
-
----
-⏱️ Please wait while tests are running...
-EOF
-)
-    post_comment "$comment"
-    
-else
-    # Deploy and post completion comment
-    # Convert branch name to Cloudflare-compatible format (lowercase, only alphanumeric and dashes)
-    cloudflare_branch=$(echo "$BRANCH_NAME" | tr '[:upper:]' '[:lower:]' | \
-        sed 's/[^a-z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
-    
-    echo "Looking for reports in: $(pwd)/reports"
-    echo "Available reports:"
-    ls -la reports/ 2>/dev/null || echo "Reports directory not found"
-    
-    # Deploy all reports in parallel and collect URLs + test counts
-    temp_dir=$(mktemp -d)
-    pids=""
-    i=0
-    
-    # Store current working directory for absolute paths
-    SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
-    BASE_DIR="$(pwd)"
-    
-    # Start parallel deployments and count extractions
-    for browser in $BROWSERS; do
-        if [ -d "reports/playwright-report-$browser" ]; then
-            echo "Found report for $browser, deploying in parallel..."
-            (
-                url=$(deploy_report "reports/playwright-report-$browser" "$browser" "$cloudflare_branch")
-                echo "$url" > "$temp_dir/$i.url"
-                echo "Deployment result for $browser: $url"
-                
-                # Extract test counts using tsx (TypeScript executor)
-                EXTRACT_SCRIPT="$SCRIPT_DIR/extract-playwright-counts.ts"
-                REPORT_DIR="$BASE_DIR/reports/playwright-report-$browser"
-                
-                if command -v tsx > /dev/null 2>&1 && [ -f "$EXTRACT_SCRIPT" ]; then
-                    echo "Extracting counts from $REPORT_DIR using $EXTRACT_SCRIPT" >&2
-                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" 2>&1 || echo '{}')
-                    echo "Extracted counts for $browser: $counts" >&2
-                    echo "$counts" > "$temp_dir/$i.counts"
-                else
-                    echo "Script not found or tsx not available: $EXTRACT_SCRIPT" >&2
-                    echo '{}' > "$temp_dir/$i.counts"
-                fi
-            ) &
-            pids="$pids $!"
-        else
-            echo "Report not found for $browser at reports/playwright-report-$browser"
-            echo "failed" > "$temp_dir/$i.url"
-            echo '{}' > "$temp_dir/$i.counts"
-        fi
-        i=$((i + 1))
-    done
-    
-    # Wait for all deployments to complete
-    for pid in $pids; do
-        wait $pid
-    done
-    
-    # Collect URLs and counts in order
-    urls=""
-    all_counts=""
-    i=0
-    for browser in $BROWSERS; do
-        if [ -f "$temp_dir/$i.url" ]; then
-            url=$(cat "$temp_dir/$i.url")
-        else
-            url="failed"
-        fi
-        if [ -z "$urls" ]; then
-            urls="$url"
-        else
-            urls="$urls $url"
-        fi
-        
-        if [ -f "$temp_dir/$i.counts" ]; then
-            counts=$(cat "$temp_dir/$i.counts")
-            echo "Read counts for $browser from $temp_dir/$i.counts: $counts" >&2
-        else
-            counts="{}"
-            echo "No counts file found for $browser at $temp_dir/$i.counts" >&2
-        fi
-        if [ -z "$all_counts" ]; then
-            all_counts="$counts"
-        else
-            all_counts="$all_counts|$counts"
-        fi
-        
-        i=$((i + 1))
-    done
-    
-    # Clean up temp directory
-    rm -rf "$temp_dir"
-    
-    # Calculate total test counts across all browsers
-    total_passed=0
-    total_failed=0
-    total_flaky=0
-    total_skipped=0
-    total_tests=0
-    
-    # Parse counts and calculate totals
-    IFS='|'
-    set -- $all_counts
-    for counts_json; do
-        if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
-            # Parse JSON counts using simple grep/sed if jq is not available
-            if command -v jq > /dev/null 2>&1; then
-                passed=$(echo "$counts_json" | jq -r '.passed // 0')
-                failed=$(echo "$counts_json" | jq -r '.failed // 0')
-                flaky=$(echo "$counts_json" | jq -r '.flaky // 0')
-                skipped=$(echo "$counts_json" | jq -r '.skipped // 0')
-                total=$(echo "$counts_json" | jq -r '.total // 0')
-            else
-                # Fallback parsing without jq
-                passed=$(echo "$counts_json" | sed -n 's/.*"passed":\([0-9]*\).*/\1/p')
-                failed=$(echo "$counts_json" | sed -n 's/.*"failed":\([0-9]*\).*/\1/p')
-                flaky=$(echo "$counts_json" | sed -n 's/.*"flaky":\([0-9]*\).*/\1/p')
-                skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
-                total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
-            fi
-            
-            total_passed=$((total_passed + ${passed:-0}))
-            total_failed=$((total_failed + ${failed:-0}))
-            total_flaky=$((total_flaky + ${flaky:-0}))
-            total_skipped=$((total_skipped + ${skipped:-0}))
-            total_tests=$((total_tests + ${total:-0}))
-        fi
-    done
-    unset IFS
-    
-    # Determine overall status
-    if [ $total_failed -gt 0 ]; then
-        status_icon="❌"
-        status_text="Some tests failed"
-    elif [ $total_flaky -gt 0 ]; then
-        status_icon="⚠️"
-        status_text="Tests passed with flaky tests"
-    elif [ $total_tests -gt 0 ]; then
-        status_icon="✅"
-        status_text="All tests passed!"
-    else
-        status_icon="🕵🏻"
-        status_text="No test results found"
-    fi
-    
-    # Generate completion comment
-    comment="$COMMENT_MARKER
-## 🎭 Playwright Test Results
-
-$status_icon **$status_text**
-
-⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC"
-
-    # Add summary counts if we have test data
-    if [ $total_tests -gt 0 ]; then
-        comment="$comment
-
-### 📈 Summary
-- **Total Tests:** $total_tests
-- **Passed:** $total_passed ✅
-- **Failed:** $total_failed $([ $total_failed -gt 0 ] && echo '❌' || echo '')
-- **Flaky:** $total_flaky $([ $total_flaky -gt 0 ] && echo '⚠️' || echo '')
-- **Skipped:** $total_skipped $([ $total_skipped -gt 0 ] && echo '⏭️' || echo '')"
-    fi
-    
-    comment="$comment
-
-### 📊 Test Reports by Browser"
-    
-    # Add browser results with individual counts
-    i=0
-    IFS='|'
-    set -- $all_counts
-    for counts_json; do
-        # Get browser name
-        browser=$(echo "$BROWSERS" | cut -d' ' -f$((i + 1)))
-        # Get URL at position i
-        url=$(echo "$urls" | cut -d' ' -f$((i + 1)))
-        
-        if [ "$url" != "failed" ] && [ -n "$url" ]; then
-            # Parse individual browser counts
-            if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
-                if command -v jq > /dev/null 2>&1; then
-                    b_passed=$(echo "$counts_json" | jq -r '.passed // 0')
-                    b_failed=$(echo "$counts_json" | jq -r '.failed // 0')
-                    b_flaky=$(echo "$counts_json" | jq -r '.flaky // 0')
-                    b_skipped=$(echo "$counts_json" | jq -r '.skipped // 0')
-                    b_total=$(echo "$counts_json" | jq -r '.total // 0')
-                else
-                    b_passed=$(echo "$counts_json" | sed -n 's/.*"passed":\([0-9]*\).*/\1/p')
-                    b_failed=$(echo "$counts_json" | sed -n 's/.*"failed":\([0-9]*\).*/\1/p')
-                    b_flaky=$(echo "$counts_json" | sed -n 's/.*"flaky":\([0-9]*\).*/\1/p')
-                    b_skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
-                    b_total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
-                fi
-                
-                if [ -n "$b_total" ] && [ "$b_total" != "0" ]; then
-                    counts_str=" • ✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped"
-                else
-                    counts_str=""
-                fi
-            else
-                counts_str=""
-            fi
-            
-            comment="$comment
-- ✅ **${browser}**: [View Report](${url})${counts_str}"
-        else
-            comment="$comment
-- ❌ **${browser}**: Deployment failed"
-        fi
-        i=$((i + 1))
-    done
-    unset IFS
-    
-    comment="$comment
-
----
-🎉 Click on the links above to view detailed test results for each browser configuration."
-    
-    post_comment "$comment"
-fi

scripts/collect-i18n-general.ts

@@ -6,7 +6,6 @@ import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
 import type { FormItem, SettingParams } from '../src/types/settingTypes'
 import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
-import './setup-browser-globals.js'
 
 const localePath = './src/locales/en/main.json'
 const commandsPath = './src/locales/en/commands.json'
@@ -48,28 +47,15 @@ test('collect-i18n-general', async ({ comfyPage }) => {
     Array.from(allLabels).map((label) => [normalizeI18nKey(label), label])
   )
 
-  // Load existing commands to preserve Desktop commands
-  const existingCommands = JSON.parse(fs.readFileSync(commandsPath, 'utf-8'))
-
-  // Filter out Desktop commands from existing commands
-  const desktopCommands = Object.fromEntries(
-    Object.entries(existingCommands).filter(([key]) =>
-      key.startsWith('Comfy-Desktop')
-    )
-  )
-
-  const allCommandsLocale = Object.fromEntries([
-    // Keep Desktop commands that aren't in the current collection
-    ...Object.entries(desktopCommands),
-    // Add/update commands from current collection
-    ...commands.map((command) => [
+  const allCommandsLocale = Object.fromEntries(
+    commands.map((command) => [
       normalizeI18nKey(command.id),
       {
         label: command.label,
         tooltip: command.tooltip
       }
     ])
-  ])
+  )
 
   // Settings
   const settings = await comfyPage.page.evaluate(() => {
@@ -92,21 +78,8 @@ test('collect-i18n-general', async ({ comfyPage }) => {
       }))
   })
 
-  // Load existing settings to preserve Desktop settings
-  const existingSettings = JSON.parse(fs.readFileSync(settingsPath, 'utf-8'))
-
-  // Filter out Desktop settings from existing settings
-  const desktopSettings = Object.fromEntries(
-    Object.entries(existingSettings).filter(([key]) =>
-      key.startsWith('Comfy-Desktop')
-    )
-  )
-
-  const allSettingsLocale = Object.fromEntries([
-    // Keep Desktop settings that aren't in the current collection
-    ...Object.entries(desktopSettings),
-    // Add/update settings from current collection
-    ...settings.map((setting) => [
+  const allSettingsLocale = Object.fromEntries(
+    settings.map((setting) => [
       normalizeI18nKey(setting.id),
       {
         name: setting.name,
@@ -125,7 +98,7 @@ test('collect-i18n-general', async ({ comfyPage }) => {
             : undefined
       }
     ])
-  ])
+  )
 
   const allSettingCategoriesLocale = Object.fromEntries(
     settings

scripts/collect-i18n-node-defs.ts

@@ -1,4 +1,3 @@
-// Setup browser globals before any other imports that might use them
 import * as fs from 'fs'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
@@ -6,21 +5,18 @@ import type { ComfyNodeDef } from '../src/schemas/nodeDefSchema'
 import type { ComfyApi } from '../src/scripts/api'
 import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
 import { normalizeI18nKey } from '../src/utils/formatUtil'
-import './setup-browser-globals.js'
 
 const localePath = './src/locales/en/main.json'
 const nodeDefsPath = './src/locales/en/nodeDefs.json'
 
 test('collect-i18n-node-defs', async ({ comfyPage }) => {
   // Mock view route
-  await comfyPage.page.route('**/view**', async (route) => {
+  comfyPage.page.route('**/view**', async (route) => {
     await route.fulfill({
       body: JSON.stringify({})
     })
   })
 
-  // Note: Don't mock the object_info API endpoint - let it hit the actual backend
-
   const nodeDefs: ComfyNodeDefImpl[] = (
     Object.values(
       await comfyPage.page.evaluate(async () => {
@@ -35,27 +31,6 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
 
   console.log(`Collected ${nodeDefs.length} node definitions`)
 
-  // If no node definitions were collected (e.g., running without backend),
-  // create empty locale files to avoid build failures
-  if (nodeDefs.length === 0) {
-    console.warn('No node definitions found - creating empty locale files')
-    const locale = JSON.parse(fs.readFileSync(localePath, 'utf-8'))
-    fs.writeFileSync(
-      localePath,
-      JSON.stringify(
-        {
-          ...locale,
-          dataTypes: {},
-          nodeCategories: {}
-        },
-        null,
-        2
-      )
-    )
-    fs.writeFileSync(nodeDefsPath, JSON.stringify({}, null, 2))
-    return
-  }
-
   const allDataTypesLocale = Object.fromEntries(
     nodeDefs
       .flatMap((nodeDef) => {

scripts/setup-browser-globals.js

@@ -1,98 +0,0 @@
-// Polyfill browser globals for Node.js context during test imports
-import { Window } from 'happy-dom'
-
-// Define build-time constants
-if (typeof globalThis.__USE_PROD_CONFIG__ === 'undefined') {
-  globalThis.__USE_PROD_CONFIG__ = false
-}
-
-// Create a happy-dom window instance with configurable URL
-const defaultUrl =
-  (typeof globalThis.process !== 'undefined' &&
-    globalThis.process.env?.HAPPY_DOM_URL) ||
-  'http://localhost:5173/'
-const window = new Window({
-  url: defaultUrl,
-  width: 1024,
-  height: 768
-})
-
-// Mock location with additional properties for testing
-const mockLocation = {
-  ...window.location,
-  href: defaultUrl,
-  origin: new URL(defaultUrl).origin,
-  protocol: new URL(defaultUrl).protocol,
-  host: new URL(defaultUrl).host,
-  hostname: new URL(defaultUrl).hostname,
-  port: new URL(defaultUrl).port,
-  pathname: new URL(defaultUrl).pathname,
-  search: new URL(defaultUrl).search,
-  hash: new URL(defaultUrl).hash,
-  assign: (url) => {
-    console.log(`[Mock] location.assign called with: ${url}`)
-    mockLocation.href = url
-  },
-  replace: (url) => {
-    console.log(`[Mock] location.replace called with: ${url}`)
-    mockLocation.href = url
-  },
-  reload: () => {
-    console.log('[Mock] location.reload called')
-  }
-}
-
-// Expose DOM globals (only set if not already defined)
-if (!globalThis.window) globalThis.window = window
-if (!globalThis.document) globalThis.document = window.document
-if (!globalThis.location) globalThis.location = mockLocation
-if (!globalThis.navigator) {
-  try {
-    globalThis.navigator = window.navigator
-  } catch (e) {
-    // navigator might be read-only in some environments
-  }
-}
-if (!globalThis.HTMLElement) globalThis.HTMLElement = window.HTMLElement
-if (!globalThis.Element) globalThis.Element = window.Element
-if (!globalThis.Node) globalThis.Node = window.Node
-if (!globalThis.NodeList) globalThis.NodeList = window.NodeList
-if (!globalThis.DOMParser) globalThis.DOMParser = window.DOMParser
-if (!globalThis.XMLSerializer) globalThis.XMLSerializer = window.XMLSerializer
-if (!globalThis.localStorage) globalThis.localStorage = window.localStorage
-if (!globalThis.sessionStorage)
-  globalThis.sessionStorage = window.sessionStorage
-if (!globalThis.CustomEvent) globalThis.CustomEvent = window.CustomEvent
-if (!globalThis.Event) globalThis.Event = window.Event
-if (!globalThis.MouseEvent) globalThis.MouseEvent = window.MouseEvent
-if (!globalThis.KeyboardEvent) globalThis.KeyboardEvent = window.KeyboardEvent
-if (!globalThis.getComputedStyle)
-  globalThis.getComputedStyle = window.getComputedStyle
-if (!globalThis.requestAnimationFrame)
-  globalThis.requestAnimationFrame = window.requestAnimationFrame
-if (!globalThis.cancelAnimationFrame)
-  globalThis.cancelAnimationFrame = window.cancelAnimationFrame
-
-// Add ResizeObserver polyfill
-if (!globalThis.ResizeObserver) {
-  globalThis.ResizeObserver = class ResizeObserver {
-    constructor(callback) {
-      this.callback = callback
-    }
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  }
-}
-
-// Add IntersectionObserver polyfill
-if (!globalThis.IntersectionObserver) {
-  globalThis.IntersectionObserver = class IntersectionObserver {
-    constructor(callback) {
-      this.callback = callback
-    }
-    observe() {}
-    unobserve() {}
-    disconnect() {}
-  }
-}

scripts/verbatim.mjs

@@ -1,130 +0,0 @@
-#!/usr/bin/env bun
-
-import fs from 'fs/promises';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-// const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const __dirname = process.cwd()
-
-// Parse the tsc.log file to get all errors
-async function parseErrors(file) {
-  const logContent = await fs.readFile(file, 'utf-8');
-  const lines = logContent.split('\n').filter(line => line.includes('error TS1484'));
-
-  const errors = [];
-  for (const line of lines) {
-    // Match the format: filepath(line,col): error TS1484: 'TypeName' is a type
-    // Note: Some lines may have a number prefix followed by →
-    const match = line.match(/(?:\d+→)?(.+?)\((\d+),(\d+)\): error TS1484: '(.+?)' is a type/);
-    if (match) {
-      const [, filePath, lineNum, colNum, typeName] = match;
-      errors.push({
-        filePath: path.join(__dirname, filePath.trim()),
-        lineNum: parseInt(lineNum),
-        colNum: parseInt(colNum),
-        typeName
-      });
-    }
-  }
-
-  return errors;
-}
-
-// Group errors by file
-function groupByFile(errors) {
-  const grouped = {};
-  for (const error of errors) {
-    if (!grouped[error.filePath]) {
-      grouped[error.filePath] = [];
-    }
-    grouped[error.filePath].push(error);
-  }
-  return grouped;
-}
-
-// Process a single file
-async function processFile(filePath, errors) {
-  try {
-    const content = await fs.readFile(filePath, 'utf-8');
-    const lines = content.split('\n');
-
-    // Sort errors by line and column in reverse order to avoid position shifts
-    errors.sort((a, b) => {
-      if (a.lineNum !== b.lineNum) {
-        return b.lineNum - a.lineNum;
-      }
-      return b.colNum - a.colNum;
-    });
-
-    // Process each error
-    for (const error of errors) {
-      const lineIndex = error.lineNum - 1;
-      const line = lines[lineIndex];
-      if (!line) continue;
-
-      // Skip if already has 'type' keyword before this position
-      const beforePos = line.substring(0, error.colNum - 1);
-      if (beforePos.includes('import type') || beforePos.endsWith('{ type ') || beforePos.endsWith(', type ')) {
-        continue;
-      }
-
-      // Insert "type " at the exact column position (column is 1-based)
-      const insertPos = error.colNum - 1;
-      lines[lineIndex] = line.substring(0, insertPos) + 'type ' + line.substring(insertPos);
-    }
-
-    await fs.writeFile(filePath, lines.join('\n'));
-    console.log(`✓ Fixed ${errors.length} type imports in ${path.relative(__dirname, filePath)}`);
-    return true;
-  } catch (error) {
-    console.error(`✗ Error processing ${filePath}:`, error.message);
-    return false;
-  }
-}
-
-// Main function
-async function main() {
-  console.log('🔧 Fixing TypeScript type-only imports...\n');
-
-  const logFile = path.join(__dirname, 'tsc.log');
-
-  if (!await fs.readFile(logFile, 'utf-8').catch(() => null)) {
-    console.error('Unable to read tsc.log');
-    console.error('Run this command to generate type errors and rerun this script again:');
-    console.error('pnpm typecheck > tsc.log');
-    return;
-  }
-
-  console.log('Parsing tsc.log for type import errors...\n');
-  const errors = await parseErrors(logFile);
-  console.log(`Found ${errors.length} type import errors\n`);
-
-  const grouped = groupByFile(errors);
-  const files = Object.keys(grouped);
-  console.log(`Processing ${files.length} files...\n`);
-
-  let successCount = 0;
-  let failCount = 0;
-
-  for (const filePath of files) {
-    const success = await processFile(filePath, grouped[filePath]);
-    if (success) {
-      successCount++;
-    } else {
-      failCount++;
-    }
-  }
-
-  console.log('\n📊 Summary:');
-  console.log(`✓ Successfully processed: ${successCount} files`);
-  if (failCount > 0) {
-    console.log(`✗ Failed to process: ${failCount} files`);
-  }
-
-  console.log('\n✨ Refactoring complete!');
-  console.log('Run "pnpm typecheck" to verify the fixes.');
-}
-
-// Run the script
-main().catch(console.error);

src/assets/css/style.css

@@ -2,12 +2,71 @@
 
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);
-@import 'tw-animate-css';
 
-@plugin 'tailwindcss-primeui';
+@plugin "tailwindcss-primeui";
 
 @config '../../../tailwind.config.ts';
 
+@layer tailwind-utilities {
+  /* Set default values to prevent some styles from not working properly. */
+  *, ::before, ::after {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(66 153 225 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
+    --tw-contain-size: ;
+    --tw-contain-layout: ;
+    --tw-contain-paint: ;
+    --tw-contain-style: ;
+  }
+
+  @tailwind components;
+  @tailwind utilities;
+}
+
 :root {
   --fg-color: #000;
   --bg-color: #fff;
@@ -48,99 +107,6 @@
   }
 }
 
-@theme {
-  --text-xxs: 0.625rem;
-  --text-xxs--line-height: calc(1 / 0.625);
-
-  /* Palette Colors */
-  --color-charcoal-100: #171718;
-  --color-charcoal-200: #202121;
-  --color-charcoal-300: #262729;
-  --color-charcoal-400: #2d2e32;
-  --color-charcoal-500: #313235;
-  --color-charcoal-600: #3c3d42;
-  --color-charcoal-700: #494a50;
-  --color-charcoal-800: #55565e;
-
-  --color-stone-100: #444444;
-  --color-stone-200: #828282;
-  --color-stone-300: #bbbbbb;
-
-  --color-ivory-100: #fdfbfa;
-  --color-ivory-200: #faf9f5;
-  --color-ivory-300: #f0eee6;
-
-  --color-gray-100: #f3f3f3;
-  --color-gray-200: #e9e9e9;
-  --color-gray-300: #e1e1e1;
-  --color-gray-400: #d9d9d9;
-  --color-gray-500: #c5c5c5;
-  --color-gray-600: #b4b4b4;
-  --color-gray-700: #a0a0a0;
-  --color-gray-800: #8a8a8a;
-
-  --color-sand-100: #e1ded5;
-  --color-sand-200: #d6cfc2;
-  --color-sand-300: #888682;
-
-  --color-slate-100: #9c9eab;
-  --color-slate-200: #9fa2bd;
-  --color-slate-300: #5b5e7d;
-
-  --color-brand-yellow: #f0ff41;
-  --color-brand-blue: #172dd7;
-
-  --color-blue-100: #0b8ce9;
-  --color-blue-200: #31b9f4;
-  --color-success-100: #00cd72;
-  --color-success-200: #47e469;
-  --color-warning-100: #fd9903;
-  --color-warning-200: #fcbf64;
-  --color-danger-100: #c02323;
-  --color-danger-200: #d62952;
-
-  --color-error: #962a2a;
-
-  --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
-  --color-node-hover-100: rgb( from var(--color-charcoal-800) r g b/ 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
-  --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
-
-  /* PrimeVue pulled colors */
-  --color-muted: var(--p-text-muted-color);
-  --color-highlight: var(--p-primary-color);
-
-  /* Special Colors (temporary) */
-  --color-dark-elevation-1.5: rgba(from white r g b/ 0.015);
-  --color-dark-elevation-2: rgba(from white r g b / 0.03);
-}
-
-@theme inline {
-  --color-node-component-surface: var(--color-charcoal-300);
-  --color-node-component-surface-highlight: var(--color-slate-100);
-  --color-node-component-surface-hovered: var(--color-charcoal-500);
-  --color-node-component-surface-selected: var(--color-charcoal-700);
-  --color-node-stroke: var(--color-stone-100);
-}
-
-@custom-variant dark-theme {
-  .dark-theme & {
-    @slot;
-  }
-}
-
-@utility scrollbar-hide {
-  scrollbar-width: none;
-  &::-webkit-scrollbar { 
-    width: 1px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-}
-
-/* Everthing below here to be cleaned up over time. */
-
 body {
   width: 100vw;
   height: 100vh;
@@ -883,7 +849,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d,
 .comfy-load-3d-animation,
 .comfy-preview-3d,
-.comfy-preview-3d-animation {
+.comfy-preview-3d-animation{
   display: flex;
   flex-direction: column;
   background: transparent;
@@ -896,7 +862,7 @@ audio.comfy-audio.empty-audio-widget {
 .comfy-load-3d-animation canvas,
 .comfy-preview-3d canvas,
 .comfy-preview-3d-animation canvas,
-.comfy-load-3d-viewer canvas {
+.comfy-load-3d-viewer canvas{
   display: flex;
   width: 100% !important;
   height: 100% !important;
@@ -961,7 +927,9 @@ audio.comfy-audio.empty-audio-widget {
   /* Uses default styling - no overrides needed */
 }
 
+/* Smooth transitions between LOD levels */
 .lg-node {
+  transition: min-height 0.2s ease;
   /* Disable text selection on all nodes */
   user-select: none;
   -webkit-user-select: none;
@@ -971,9 +939,7 @@ audio.comfy-audio.empty-audio-widget {
 
 .lg-node .lg-slot,
 .lg-node .lg-widget {
-  transition:
-    opacity 0.1s ease,
-    font-size 0.1s ease;
+  transition: opacity 0.1s ease, font-size 0.1s ease;
 }
 
 /* Performance optimization during canvas interaction */
@@ -1005,3 +971,4 @@ audio.comfy-audio.empty-audio-widget {
   /* Use solid colors only */
   background-image: none !important;
 }
+

src/assets/icons/custom/mask.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" fill="none">
-  <g clip-path="url(#clip0_704_2695)">
-    <path d="M6.05048 2C5.52055 7.29512 9.23033 10.4722 14 9.94267" stroke="#9C9EAB" stroke-width="1.3"/>
-    <path d="M6.5 5.5L10 2" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
-    <path d="M8 8L12.5 3.5" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="square"/>
-    <path d="M10.5 9.5L14 6" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
-    <path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_704_2695">
-      <rect width="16" height="16" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>

src/base/common/downloadUtil.ts

@@ -1,41 +0,0 @@
-/**
- * Utility functions for downloading files
- */
-
-// Constants
-const DEFAULT_DOWNLOAD_FILENAME = 'download.png'
-
-/**
- * Download a file from a URL by creating a temporary anchor element
- * @param url - The URL of the file to download (must be a valid URL string)
- * @param filename - Optional filename override (will use URL filename or default if not provided)
- * @throws {Error} If the URL is invalid or empty
- */
-export const downloadFile = (url: string, filename?: string): void => {
-  if (!url || typeof url !== 'string' || url.trim().length === 0) {
-    throw new Error('Invalid URL provided for download')
-  }
-  const link = document.createElement('a')
-  link.href = url
-  link.download =
-    filename || extractFilenameFromUrl(url) || DEFAULT_DOWNLOAD_FILENAME
-
-  // Trigger download
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}
-
-/**
- * Extract filename from a URL's query parameters
- * @param url - The URL to extract filename from
- * @returns The extracted filename or null if not found
- */
-const extractFilenameFromUrl = (url: string): string | null => {
-  try {
-    const urlObj = new URL(url, window.location.origin)
-    return urlObj.searchParams.get('filename')
-  } catch {
-    return null
-  }
-}

src/components/MenuHamburger.vue

@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { type CSSProperties, computed, watchEffect } from 'vue'
+import { CSSProperties, computed, watchEffect } from 'vue'
 
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'

src/components/actionbar/ComfyActionbar.vue

@@ -22,15 +22,7 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import {
-  type Ref,
-  computed,
-  inject,
-  nextTick,
-  onMounted,
-  ref,
-  watch
-} from 'vue'
+import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useSettingStore } from '@/stores/settingStore'
 
@@ -45,7 +37,7 @@ const visible = computed(() => position.value !== 'Disabled')
 const topMenuRef = inject<Ref<HTMLDivElement | null>>('topMenuRef')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
-const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
+const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', false)
 const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
   x: 0,
   y: 0

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, onUnmounted, ref } from 'vue'
+import { Ref, onUnmounted, ref } from 'vue'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 

src/components/bottomPanel/tabs/terminal/CommandTerminal.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import { type IDisposable } from '@xterm/xterm'
-import { type Ref, onMounted, onUnmounted } from 'vue'
+import { IDisposable } from '@xterm/xterm'
+import { Ref, onMounted, onUnmounted } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -15,14 +15,10 @@
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
-import { type Ref, onMounted, onUnmounted, ref } from 'vue'
+import { Ref, onMounted, onUnmounted, ref } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import {
-  type LogEntry,
-  type LogsWsMessage,
-  type TerminalSize
-} from '@/schemas/apiSchema'
+import { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useExecutionStore } from '@/stores/executionStore'
 

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -38,7 +38,7 @@ import { computed, onUpdated, ref, watch } from 'vue'
 
 import SubgraphBreadcrumbItem from '@/components/breadcrumb/SubgraphBreadcrumbItem.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasStore } from '@/stores/graphStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { useWorkflowStore } from '@/stores/workflowStore'

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -47,8 +47,7 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import Menu from 'primevue/menu'
-import type { MenuState } from 'primevue/menu'
+import Menu, { MenuState } from 'primevue/menu'
 import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'

src/components/button/IconButton.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Bell, Download, Heart, Settings, Trophy, X } from 'lucide-vue-next'
 
 import IconButton from './IconButton.vue'
 
@@ -32,13 +33,13 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { IconButton },
+    components: { IconButton, Trophy },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <i class="icon-[lucide--trophy] size-4" />
+        <Trophy :size="16" />
       </IconButton>
     `
   }),
@@ -50,13 +51,13 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   render: (args) => ({
-    components: { IconButton },
+    components: { IconButton, Settings },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <i class="icon-[lucide--settings] size-4" />
+        <Settings :size="16" />
       </IconButton>
     `
   }),
@@ -68,13 +69,13 @@ export const Secondary: Story = {
 
 export const Transparent: Story = {
   render: (args) => ({
-    components: { IconButton },
+    components: { IconButton, X },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <i class="icon-[lucide--x] size-4" />
+        <X :size="16" />
       </IconButton>
     `
   }),
@@ -86,13 +87,13 @@ export const Transparent: Story = {
 
 export const Small: Story = {
   render: (args) => ({
-    components: { IconButton },
+    components: { IconButton, Bell },
     setup() {
       return { args }
     },
     template: `
       <IconButton v-bind="args">
-        <i class="icon-[lucide--bell] size-3" />
+        <Bell :size="12" />
       </IconButton>
     `
   }),
@@ -104,42 +105,42 @@ export const Small: Story = {
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { IconButton },
+    components: { IconButton, Trophy, Settings, X, Bell, Heart, Download },
     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" />
+            <Trophy :size="12" />
           </IconButton>
           <IconButton type="primary" size="md" @click="() => {}">
-            <i class="icon-[lucide--trophy] size-4" />
+            <Trophy :size="16" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="secondary" size="sm" @click="() => {}">
-            <i class="icon-[lucide--settings] size-3" />
+            <Settings :size="12" />
           </IconButton>
           <IconButton type="secondary" size="md" @click="() => {}">
-            <i class="icon-[lucide--settings] size-4" />
+            <Settings :size="16" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="transparent" size="sm" @click="() => {}">
-            <i class="icon-[lucide--x] size-3" />
+            <X :size="12" />
           </IconButton>
           <IconButton type="transparent" size="md" @click="() => {}">
-            <i class="icon-[lucide--x] size-4" />
+            <X :size="16" />
           </IconButton>
         </div>
         <div class="flex gap-2 items-center">
           <IconButton type="primary" size="md" @click="() => {}">
-            <i class="icon-[lucide--bell] size-4" />
+            <Bell :size="16" />
           </IconButton>
           <IconButton type="secondary" size="md" @click="() => {}">
-            <i class="icon-[lucide--heart] size-4" />
+            <Heart :size="16" />
           </IconButton>
           <IconButton type="transparent" size="md" @click="() => {}">
-            <i class="icon-[lucide--download] size-4" />
+            <Download :size="16" />
           </IconButton>
         </div>
       </div>

src/components/button/IconButton.vue

@@ -1,11 +1,5 @@
 <template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
+  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
     <slot></slot>
   </Button>
 </template>
@@ -21,16 +15,11 @@ import {
   getButtonTypeClasses,
   getIconButtonSizeClasses
 } from '@/types/buttonTypes'
-import { cn } from '@/utils/tailwindUtil'
 
 interface IconButtonProps extends BaseButtonProps {
   onClick: (event: Event) => void
 }
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const {
   size = 'md',
   type = 'secondary',
@@ -47,6 +36,8 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return cn(baseClasses, sizeClasses, typeClasses, className)
+  return [baseClasses, sizeClasses, typeClasses, className]
+    .filter(Boolean)
+    .join(' ')
 })
 </script>

src/components/button/IconGroup.stories.ts

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

src/components/button/IconGroup.vue

@@ -1,17 +1,7 @@
 <template>
-  <div :class="iconGroupClasses">
+  <div
+    class="flex justify-center items-center shrink-0 outline-hidden border-none p-0 bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white rounded-lg cursor-pointer"
+  >
     <slot></slot>
   </div>
 </template>
-
-<script setup lang="ts">
-import { cn } from '@/utils/tailwindUtil'
-
-const iconGroupClasses = cn(
-  'flex justify-center items-center shrink-0',
-  'outline-hidden border-none p-0 rounded-lg',
-  'bg-white dark-theme:bg-zinc-700',
-  'text-neutral-950 dark-theme:text-white',
-  'cursor-pointer'
-)
-</script>

src/components/button/IconTextButton.stories.ts

@@ -1,4 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Package,
+  Save,
+  Settings,
+  Trash2,
+  X
+} from 'lucide-vue-next'
 
 import IconTextButton from './IconTextButton.vue'
 
@@ -39,14 +49,14 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, Package },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--package] size-4" />
+          <Package :size="16" />
         </template>
       </IconTextButton>
     `
@@ -60,14 +70,14 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, Settings },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--settings] size-4" />
+          <Settings :size="16" />
         </template>
       </IconTextButton>
     `
@@ -81,14 +91,14 @@ export const Secondary: Story = {
 
 export const Transparent: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, X },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--x] size-4" />
+          <X :size="16" />
         </template>
       </IconTextButton>
     `
@@ -102,14 +112,14 @@ export const Transparent: Story = {
 
 export const WithIconRight: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, ChevronRight },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--chevron-right] size-4" />
+          <ChevronRight :size="16" />
         </template>
       </IconTextButton>
     `
@@ -124,14 +134,14 @@ export const WithIconRight: Story = {
 
 export const Small: Story = {
   render: (args) => ({
-    components: { IconTextButton },
+    components: { IconTextButton, Save },
     setup() {
       return { args }
     },
     template: `
       <IconTextButton v-bind="args">
         <template #icon>
-          <i class="icon-[lucide--save] size-3" />
+          <Save :size="12" />
         </template>
       </IconTextButton>
     `
@@ -146,60 +156,66 @@ export const Small: Story = {
 export const AllVariants: Story = {
   render: () => ({
     components: {
-      IconTextButton
+      IconTextButton,
+      Download,
+      Settings,
+      Trash2,
+      ChevronRight,
+      ChevronLeft,
+      Save
     },
     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" />
+              <Download :size="12" />
             </template>
           </IconTextButton>
           <IconTextButton label="Download" type="primary" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--download] size-4" />
+              <Download :size="16" />
             </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" />
+              <Settings :size="12" />
             </template>
           </IconTextButton>
           <IconTextButton label="Settings" type="secondary" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--settings] size-4" />
+              <Settings :size="16" />
             </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" />
+              <Trash2 :size="12" />
             </template>
           </IconTextButton>
           <IconTextButton label="Delete" type="transparent" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--trash-2] size-4" />
+              <Trash2 :size="16" />
             </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" />
+              <ChevronRight :size="16" />
             </template>
           </IconTextButton>
           <IconTextButton label="Previous" type="secondary" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--chevron-left] size-4" />
+              <ChevronLeft :size="16" />
             </template>
           </IconTextButton>
           <IconTextButton label="Save File" type="primary" size="md" @click="() => {}">
             <template #icon>
-              <i class="icon-[lucide--save] size-4" />
+              <Save :size="16" />
             </template>
           </IconTextButton>
         </div>

src/components/button/IconTextButton.vue

@@ -1,11 +1,5 @@
 <template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
+  <Button 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>
@@ -23,11 +17,6 @@ import {
   getButtonSizeClasses,
   getButtonTypeClasses
 } from '@/types/buttonTypes'
-import { cn } from '@/utils/tailwindUtil'
-
-defineOptions({
-  inheritAttrs: false
-})
 
 interface IconTextButtonProps extends BaseButtonProps {
   iconPosition?: 'left' | 'right'
@@ -53,6 +42,8 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return cn(baseClasses, sizeClasses, typeClasses, className)
+  return [baseClasses, sizeClasses, typeClasses, className]
+    .filter(Boolean)
+    .join(' ')
 })
 </script>

src/components/button/MoreButton.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Download, ScrollText } from 'lucide-vue-next'
 
 import IconTextButton from './IconTextButton.vue'
 import MoreButton from './MoreButton.vue'
@@ -17,7 +18,7 @@ type Story = StoryObj<typeof MoreButton>
 
 export const Basic: Story = {
   render: () => ({
-    components: { MoreButton, IconTextButton },
+    components: { MoreButton, IconTextButton, Download, ScrollText },
     template: `
       <div style="height: 200px; display: flex; align-items: center; justify-content: center;">
         <MoreButton>
@@ -28,7 +29,7 @@ export const Basic: Story = {
               @click="() => { close() }"
             >
               <template #icon>
-                <i class="icon-[lucide--download] size-4" />
+                <Download :size="16" />
               </template>
             </IconTextButton>
 
@@ -38,7 +39,7 @@ export const Basic: Story = {
               @click="() => { close() }"
             >
               <template #icon>
-                <i class="icon-[lucide--scroll-text] size-4" />
+                <ScrollText :size="16" />
               </template>
             </IconTextButton>
           </template>

src/components/button/MoreButton.vue

@@ -14,7 +14,7 @@
       unstyled
       :pt="pt"
     >
-      <div class="flex flex-col gap-2 p-2 min-w-40">
+      <div class="flex flex-col gap-1 p-2 min-w-40">
         <slot :close="hide" />
       </div>
     </Popover>
@@ -25,8 +25,6 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
-import { cn } from '@/utils/tailwindUtil'
-
 import IconButton from './IconButton.vue'
 
 const popover = ref<InstanceType<typeof Popover>>()
@@ -41,16 +39,13 @@ const hide = () => {
 
 const pt = computed(() => ({
   root: {
-    class: cn('absolute z-50')
+    class: 'absolute z-50'
   },
   content: {
-    class: cn(
-      'mt-2 rounded-lg',
-      'bg-white dark-theme:bg-zinc-800',
-      'text-neutral dark-theme:text-white',
-      'shadow-lg',
-      'border border-zinc-200 dark-theme:border-zinc-700'
-    )
+    class: [
+      'mt-2 bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white rounded-lg',
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
+    ]
   }
 }))
 </script>

src/components/button/TextButton.vue

@@ -1,11 +1,5 @@
 <template>
-  <Button
-    v-bind="$attrs"
-    unstyled
-    :class="buttonStyle"
-    :disabled="disabled"
-    @click="onClick"
-  >
+  <Button unstyled :class="buttonStyle" :disabled="disabled" @click="onClick">
     <span>{{ label }}</span>
   </Button>
 </template>
@@ -21,17 +15,12 @@ import {
   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',
@@ -49,6 +38,8 @@ const buttonStyle = computed(() => {
     ? getBorderButtonTypeClasses(type)
     : getButtonTypeClasses(type)
 
-  return cn(baseClasses, sizeClasses, typeClasses, className)
+  return [baseClasses, sizeClasses, typeClasses, className]
+    .filter(Boolean)
+    .join(' ')
 })
 </script>

src/components/card/Card.stories.ts

@@ -1,4 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  Download,
+  Folder,
+  Heart,
+  Info,
+  MoreVertical,
+  Star,
+  Upload
+} from 'lucide-vue-next'
 import { ref } from 'vue'
 
 import IconButton from '../button/IconButton.vue'
@@ -49,6 +58,14 @@ const meta: Meta<CardStoryArgs> = {
       options: ['square', 'portrait', 'tallPortrait'],
       description: 'Card container aspect ratio'
     },
+    maxWidth: {
+      control: { type: 'range', min: 200, max: 600, step: 10 },
+      description: 'Maximum width in pixels'
+    },
+    minWidth: {
+      control: { type: 'range', min: 150, max: 400, step: 10 },
+      description: 'Minimum width in pixels'
+    },
     topRatio: {
       control: 'select',
       options: ['square', 'landscape'],
@@ -132,7 +149,14 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     CardTitle,
     CardDescription,
     IconButton,
-    SquareChip
+    SquareChip,
+    Info,
+    Folder,
+    Heart,
+    Download,
+    Star,
+    Upload,
+    MoreVertical
   },
   setup() {
     const favorited = ref(false)
@@ -147,10 +171,11 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     }
   },
   template: `
-    <div class="min-h-screen">
+    <div class="p-4 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
       <CardContainer 
         :ratio="args.containerRatio" 
-        class="max-w-[320px] mx-auto"
+        :max-width="args.maxWidth"
+        :min-width="args.minWidth"
       >
         <template #top>
           <CardTop :ratio="args.topRatio">
@@ -177,14 +202,14 @@ const createCardTemplate = (args: CardStoryArgs) => ({
                 class="!bg-white/90 !text-neutral-900"
                 @click="() => console.log('Info clicked')"
               >
-                <i class="icon-[lucide--info] size-4" />
+                <Info :size="16" />
               </IconButton>
               <IconButton
                 class="!bg-white/90"
                 :class="favorited ? '!text-red-500' : '!text-neutral-900'"
                 @click="toggleFavorite"
               >
-                <i class="icon-[lucide--heart] size-4" :class="favorited ? 'fill-current' : ''" />
+                <Heart :size="16" :fill="favorited ? 'currentColor' : 'none'" />
               </IconButton>
             </template>
             
@@ -197,7 +222,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
               <SquareChip v-if="args.showFileSize" :label="args.fileSize" />
               <SquareChip v-for="tag in args.tags" :key="tag" :label="tag">
                 <template v-if="tag === 'LoRA'" #icon>
-                  <i class="icon-[lucide--folder] size-3" />
+                  <Folder :size="12" />
                 </template>
               </SquareChip>
             </template>
@@ -205,7 +230,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
         </template>
         
         <template #bottom>
-          <CardBottom class="p-3 bg-neutral-100">
+          <CardBottom class="p-3">
             <CardTitle v-if="args.showTitle">{{ args.title }}</CardTitle>
             <CardDescription v-if="args.showDescription">{{ args.description }}</CardDescription>
           </CardBottom>
@@ -219,6 +244,8 @@ export const Default: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'portrait',
+    maxWidth: 300,
+    minWidth: 200,
     topRatio: 'square',
     showTopLeft: false,
     showTopRight: true,
@@ -244,6 +271,8 @@ export const SquareCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'square',
+    maxWidth: 400,
+    minWidth: 250,
     topRatio: 'landscape',
     showTopLeft: false,
     showTopRight: true,
@@ -269,6 +298,8 @@ export const TallPortraitCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'tallPortrait',
+    maxWidth: 280,
+    minWidth: 180,
     topRatio: 'square',
     showTopLeft: true,
     showTopRight: true,
@@ -294,6 +325,8 @@ export const ImageCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'portrait',
+    maxWidth: 350,
+    minWidth: 220,
     topRatio: 'square',
     showTopLeft: false,
     showTopRight: true,
@@ -318,6 +351,8 @@ export const MinimalCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'square',
+    maxWidth: 300,
+    minWidth: 200,
     topRatio: 'landscape',
     showTopLeft: false,
     showTopRight: false,
@@ -342,6 +377,8 @@ export const FullFeaturedCard: Story = {
   render: (args: CardStoryArgs) => createCardTemplate(args),
   args: {
     containerRatio: 'tallPortrait',
+    maxWidth: 320,
+    minWidth: 240,
     topRatio: 'square',
     showTopLeft: true,
     showTopRight: true,
@@ -355,10 +392,274 @@ export const FullFeaturedCard: Story = {
     backgroundColor: '#ef4444',
     showImage: false,
     imageUrl: '',
-    tags: ['Bundle', 'SDXL'],
+    tags: ['Bundle', 'Premium', 'SDXL'],
     showFileSize: true,
     fileSize: '5.4 GB',
     showFileType: true,
     fileType: 'pack'
   }
 }
+
+export const GridOfCards: Story = {
+  render: () => ({
+    components: {
+      CardContainer,
+      CardTop,
+      CardBottom,
+      CardTitle,
+      CardDescription,
+      IconButton,
+      SquareChip,
+      Info,
+      Folder,
+      Heart,
+      Download
+    },
+    setup() {
+      const cards = ref([
+        {
+          id: 1,
+          title: 'Realistic Vision',
+          description: 'Photorealistic model for portraits',
+          color: 'from-blue-400 to-blue-600',
+          ratio: 'portrait' as const,
+          tags: ['SD 1.5'],
+          size: '2.1 GB'
+        },
+        {
+          id: 2,
+          title: 'DreamShaper XL',
+          description: 'Artistic style model with enhanced details',
+          color: 'from-purple-400 to-pink-600',
+          ratio: 'portrait' as const,
+          tags: ['SDXL'],
+          size: '6.5 GB'
+        },
+        {
+          id: 3,
+          title: 'Anime LoRA',
+          description: 'Character style LoRA',
+          color: 'from-green-400 to-teal-600',
+          ratio: 'portrait' as const,
+          tags: ['LoRA'],
+          size: '144 MB'
+        },
+        {
+          id: 4,
+          title: 'VAE Model',
+          description: 'Enhanced color VAE',
+          color: 'from-orange-400 to-red-600',
+          ratio: 'portrait' as const,
+          tags: ['VAE'],
+          size: '335 MB'
+        },
+        {
+          id: 5,
+          title: 'Workflow Bundle',
+          description: 'Complete workflow setup',
+          color: 'from-indigo-400 to-blue-600',
+          ratio: 'portrait' as const,
+          tags: ['Workflow'],
+          size: '45 KB'
+        },
+        {
+          id: 6,
+          title: 'Embedding Pack',
+          description: 'Negative embeddings collection',
+          color: 'from-yellow-400 to-orange-600',
+          ratio: 'portrait' as const,
+          tags: ['Embedding'],
+          size: '2.3 MB'
+        }
+      ])
+
+      return { cards }
+    },
+    template: `
+      <div class="p-4 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
+        <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Model Gallery</h3>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
+          <CardContainer 
+            v-for="card in cards" 
+            :key="card.id"
+            :ratio="card.ratio"
+            :max-width="300"
+            :min-width="180"
+          >
+            <template #top>
+              <CardTop ratio="square">
+                <template #default>
+                  <div 
+                    class="w-full h-full bg-gray-600"
+                    :class="card.color"
+                  ></div>
+                </template>
+                
+                <template #top-right>
+                  <IconButton
+                    class="!bg-white/90 !text-neutral-900"
+                    @click="() => console.log('Info:', card.title)"
+                  >
+                    <Info :size="16" />
+                  </IconButton>
+                </template>
+                
+                <template #bottom-right>
+                  <SquareChip 
+                    v-for="tag in card.tags" 
+                    :key="tag" 
+                    :label="tag"
+                  >
+                    <template v-if="tag === 'LoRA'" #icon>
+                      <Folder :size="12" />
+                    </template>
+                  </SquareChip>
+                  <SquareChip :label="card.size" />
+                </template>
+              </CardTop>
+            </template>
+            
+            <template #bottom>
+              <CardBottom class="p-3">
+                <CardTitle>{{ card.title }}</CardTitle>
+                <CardDescription>{{ card.description }}</CardDescription>
+              </CardBottom>
+            </template>
+          </CardContainer>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const ResponsiveGrid: Story = {
+  render: () => ({
+    components: {
+      CardContainer,
+      CardTop,
+      CardBottom,
+      CardTitle,
+      CardDescription,
+      SquareChip
+    },
+    setup() {
+      const generateCards = (
+        count: number,
+        ratio: 'square' | 'portrait' | 'tallPortrait'
+      ) => {
+        return Array.from({ length: count }, (_, i) => ({
+          id: i + 1,
+          title: `Model ${i + 1}`,
+          description: `Description for model ${i + 1}`,
+          ratio,
+          color: `hsl(${(i * 60) % 360}, 70%, 60%)`
+        }))
+      }
+
+      const squareCards = ref(generateCards(4, 'square'))
+      const portraitCards = ref(generateCards(6, 'portrait'))
+      const tallCards = ref(generateCards(5, 'tallPortrait'))
+
+      return {
+        squareCards,
+        portraitCards,
+        tallCards
+      }
+    },
+    template: `
+      <div class="p-4 space-y-8 min-h-screen bg-zinc-50 dark-theme:bg-zinc-900">
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Square Cards (1:1)</h3>
+          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <CardContainer 
+              v-for="card in squareCards" 
+              :key="card.id"
+              :ratio="card.ratio"
+              :max-width="400"
+              :min-width="200"
+            >
+              <template #top>
+                <CardTop ratio="landscape">
+                  <div 
+                    class="w-full h-full"
+                    :style="{ backgroundColor: card.color }"
+                  ></div>
+                </CardTop>
+              </template>
+              <template #bottom>
+                <CardBottom class="p-3">
+                  <CardTitle>{{ card.title }}</CardTitle>
+                  <CardDescription>{{ card.description }}</CardDescription>
+                </CardBottom>
+              </template>
+            </CardContainer>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Portrait Cards (2:3)</h3>
+          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            <CardContainer 
+              v-for="card in portraitCards" 
+              :key="card.id"
+              :ratio="card.ratio"
+              :max-width="280"
+              :min-width="160"
+            >
+              <template #top>
+                <CardTop ratio="square">
+                  <div 
+                    class="w-full h-full"
+                    :style="{ backgroundColor: card.color }"
+                  ></div>
+                </CardTop>
+              </template>
+              <template #bottom>
+                <CardBottom class="p-2">
+                  <CardTitle>{{ card.title }}</CardTitle>
+                </CardBottom>
+              </template>
+            </CardContainer>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-lg font-semibold mb-4 text-neutral-900 dark-theme:text-neutral-100">Tall Portrait Cards (2:4)</h3>
+          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            <CardContainer 
+              v-for="card in tallCards" 
+              :key="card.id"
+              :ratio="card.ratio"
+              :max-width="260"
+              :min-width="150"
+            >
+              <template #top>
+                <CardTop ratio="square">
+                  <template #default>
+                    <div 
+                      class="w-full h-full"
+                      :style="{ backgroundColor: card.color }"
+                    ></div>
+                  </template>
+                  <template #bottom-right>
+                    <SquareChip :label="'#' + card.id" />
+                  </template>
+                </CardTop>
+              </template>
+              <template #bottom>
+                <CardBottom class="p-3">
+                  <CardTitle>{{ card.title }}</CardTitle>
+                  <CardDescription>{{ card.description }}</CardDescription>
+                </CardBottom>
+              </template>
+            </CardContainer>
+          </div>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true }
+  }
+}

src/components/card/CardContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="containerClasses">
+  <div :class="containerClasses" :style="containerStyle">
     <slot name="top"></slot>
     <slot name="bottom"></slot>
   </div>
@@ -8,7 +8,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const { ratio = 'square' } = defineProps<{
+const {
+  ratio = 'square',
+  maxWidth,
+  minWidth
+} = defineProps<{
+  maxWidth?: number
+  minWidth?: number
   ratio?: 'square' | 'portrait' | 'tallPortrait'
 }>()
 
@@ -24,4 +30,13 @@ const containerClasses = computed(() => {
 
   return `${baseClasses} ${ratioClasses[ratio]}`
 })
+
+const containerStyle = computed(() =>
+  maxWidth || minWidth
+    ? {
+        maxWidth: `${maxWidth}px`,
+        minWidth: `${minWidth}px`
+      }
+    : {}
+)
 </script>

src/components/card/CardGridList.stories.ts

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import { createGridStyle } from '@/utils/gridUtil'
-
-import CardBottom from './CardBottom.vue'
-import CardContainer from './CardContainer.vue'
-import CardTop from './CardTop.vue'
-
-const meta: Meta = {
-  title: 'Components/Card/CardGridList',
-  tags: ['autodocs'],
-  argTypes: {
-    minWidth: {
-      control: 'text',
-      description: 'Minimum width for each grid item'
-    },
-    maxWidth: {
-      control: 'text',
-      description: 'Maximum width for each grid item'
-    },
-    padding: {
-      control: 'text',
-      description: 'Padding around the grid'
-    },
-    gap: {
-      control: 'text',
-      description: 'Gap between grid items'
-    },
-    columns: {
-      control: 'number',
-      description: 'Fixed number of columns (overrides auto-fill)'
-    }
-  },
-  args: {
-    minWidth: '15rem',
-    maxWidth: '1fr',
-    padding: '0rem',
-    gap: '1rem'
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { CardContainer, CardTop, CardBottom },
-    setup() {
-      const gridStyle = createGridStyle(args)
-      return { gridStyle }
-    },
-    template: `
-      <div :style="gridStyle">
-        <CardContainer v-for="i in 12" :key="i" ratio="square">
-          <template #top>
-            <CardTop ratio="landscape">
-              <template #default>
-                <div class="w-full h-full bg-blue-500"></div>
-              </template>
-            </CardTop>
-          </template>
-          <template #bottom>
-            <CardBottom class="bg-neutral-200"></CardBottom>
-          </template>
-        </CardContainer>
-      </div>
-    `
-  })
-}

src/components/common/ExtensionSlot.vue

@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount } from 'vue'
 
-import { type CustomExtension, type VueExtension } from '@/types/extensionTypes'
+import { CustomExtension, VueExtension } from '@/types/extensionTypes'
 
 const props = defineProps<{
   extension: VueExtension | CustomExtension

src/components/common/FormItem.vue

@@ -40,11 +40,10 @@ import BackgroundImageUpload from '@/components/common/BackgroundImageUpload.vue
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import FormColorPicker from '@/components/common/FormColorPicker.vue'
 import FormImageUpload from '@/components/common/FormImageUpload.vue'
-import FormRadioGroup from '@/components/common/FormRadioGroup.vue'
 import InputKnob from '@/components/common/InputKnob.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
 import UrlInput from '@/components/common/UrlInput.vue'
-import { type FormItem } from '@/types/settingTypes'
+import { FormItem } from '@/types/settingTypes'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{
@@ -67,7 +66,6 @@ function getFormAttrs(item: FormItem) {
   }
   switch (item.type) {
     case 'combo':
-    case 'radio':
       attrs['options'] =
         typeof item.options === 'function'
           ? // @ts-expect-error: Audit and deprecate usage of legacy options type:
@@ -99,8 +97,6 @@ function getFormComponent(item: FormItem): Component {
       return InputKnob
     case 'combo':
       return Select
-    case 'radio':
-      return FormRadioGroup
     case 'image':
       return FormImageUpload
     case 'color':

src/components/common/FormRadioGroup.spec.ts

@@ -1,245 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import RadioButton from 'primevue/radiobutton'
-import { beforeAll, describe, expect, it } from 'vitest'
-import { createApp } from 'vue'
-
-import type { SettingOption } from '@/types/settingTypes'
-
-import FormRadioGroup from './FormRadioGroup.vue'
-
-describe('FormRadioGroup', () => {
-  beforeAll(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-  })
-
-  const mountComponent = (props: any, options = {}) => {
-    return mount(FormRadioGroup, {
-      global: {
-        plugins: [PrimeVue],
-        components: { RadioButton }
-      },
-      props,
-      ...options
-    })
-  }
-
-  describe('normalizedOptions computed property', () => {
-    it('handles string array options', () => {
-      const wrapper = mountComponent({
-        modelValue: 'option1',
-        options: ['option1', 'option2', 'option3'],
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
-
-      expect(radioButtons[0].props('value')).toBe('option1')
-      expect(radioButtons[1].props('value')).toBe('option2')
-      expect(radioButtons[2].props('value')).toBe('option3')
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('option1')
-      expect(labels[1].text()).toBe('option2')
-      expect(labels[2].text()).toBe('option3')
-    })
-
-    it('handles SettingOption array', () => {
-      const options: SettingOption[] = [
-        { text: 'Small', value: 'sm' },
-        { text: 'Medium', value: 'md' },
-        { text: 'Large', value: 'lg' }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'md',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
-
-      expect(radioButtons[0].props('value')).toBe('sm')
-      expect(radioButtons[1].props('value')).toBe('md')
-      expect(radioButtons[2].props('value')).toBe('lg')
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Small')
-      expect(labels[1].text()).toBe('Medium')
-      expect(labels[2].text()).toBe('Large')
-    })
-
-    it('handles SettingOption with undefined value (uses text as value)', () => {
-      const options: SettingOption[] = [
-        { text: 'Option A', value: undefined },
-        { text: 'Option B' }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'Option A',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-
-      expect(radioButtons[0].props('value')).toBe('Option A')
-      expect(radioButtons[1].props('value')).toBe('Option B')
-    })
-
-    it('handles custom object with optionLabel and optionValue', () => {
-      const options = [
-        { name: 'First Option', id: 1 },
-        { name: 'Second Option', id: 2 },
-        { name: 'Third Option', id: 3 }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 2,
-        options,
-        optionLabel: 'name',
-        optionValue: 'id',
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
-
-      expect(radioButtons[0].props('value')).toBe(1)
-      expect(radioButtons[1].props('value')).toBe(2)
-      expect(radioButtons[2].props('value')).toBe(3)
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('First Option')
-      expect(labels[1].text()).toBe('Second Option')
-      expect(labels[2].text()).toBe('Third Option')
-    })
-
-    it('handles mixed array with strings and SettingOptions', () => {
-      const options: (string | SettingOption)[] = [
-        'Simple String',
-        { text: 'Complex Option', value: 'complex' },
-        'Another String'
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'complex',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
-
-      expect(radioButtons[0].props('value')).toBe('Simple String')
-      expect(radioButtons[1].props('value')).toBe('complex')
-      expect(radioButtons[2].props('value')).toBe('Another String')
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Simple String')
-      expect(labels[1].text()).toBe('Complex Option')
-      expect(labels[2].text()).toBe('Another String')
-    })
-
-    it('handles empty options array', () => {
-      const wrapper = mountComponent({
-        modelValue: null,
-        options: [],
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(0)
-    })
-
-    it('handles undefined options gracefully', () => {
-      const wrapper = mountComponent({
-        modelValue: null,
-        options: undefined,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(0)
-    })
-
-    it('handles object with missing properties gracefully', () => {
-      const options = [
-        { label: 'Option 1', val: 'opt1' },
-        { text: 'Option 2', value: 'opt2' }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'opt1',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(2)
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Unknown')
-      expect(labels[1].text()).toBe('Option 2')
-    })
-  })
-
-  describe('component functionality', () => {
-    it('sets correct input-id and name attributes', () => {
-      const options = ['A', 'B']
-
-      const wrapper = mountComponent({
-        modelValue: 'A',
-        options,
-        id: 'my-radio-group'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-
-      expect(radioButtons[0].props('inputId')).toBe('my-radio-group-A')
-      expect(radioButtons[0].props('name')).toBe('my-radio-group')
-      expect(radioButtons[1].props('inputId')).toBe('my-radio-group-B')
-      expect(radioButtons[1].props('name')).toBe('my-radio-group')
-    })
-
-    it('associates labels with radio buttons correctly', () => {
-      const options = ['Yes', 'No']
-
-      const wrapper = mountComponent({
-        modelValue: 'Yes',
-        options,
-        id: 'confirm-radio'
-      })
-
-      const labels = wrapper.findAll('label')
-
-      expect(labels[0].attributes('for')).toBe('confirm-radio-Yes')
-      expect(labels[1].attributes('for')).toBe('confirm-radio-No')
-    })
-
-    it('sets aria-describedby attribute correctly', () => {
-      const options: SettingOption[] = [
-        { text: 'Option 1', value: 'opt1' },
-        { text: 'Option 2', value: 'opt2' }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'opt1',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-
-      expect(radioButtons[0].attributes('aria-describedby')).toBe(
-        'Option 1-label'
-      )
-      expect(radioButtons[1].attributes('aria-describedby')).toBe(
-        'Option 2-label'
-      )
-    })
-  })
-})

src/components/common/FormRadioGroup.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="flex flex-row gap-4">
-    <div
-      v-for="option in normalizedOptions"
-      :key="option.value"
-      class="flex items-center"
-    >
-      <RadioButton
-        :input-id="`${id}-${option.value}`"
-        :name="id"
-        :value="option.value"
-        :model-value="modelValue"
-        :aria-describedby="`${option.text}-label`"
-        @update:model-value="$emit('update:modelValue', $event)"
-      />
-      <label :for="`${id}-${option.value}`" class="ml-2 cursor-pointer">
-        {{ option.text }}
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import RadioButton from 'primevue/radiobutton'
-import { computed } from 'vue'
-
-import type { SettingOption } from '@/types/settingTypes'
-
-const props = defineProps<{
-  modelValue: any
-  options: (SettingOption | string)[]
-  optionLabel?: string
-  optionValue?: string
-  id?: string
-}>()
-
-defineEmits<{
-  'update:modelValue': [value: any]
-}>()
-
-const normalizedOptions = computed<SettingOption[]>(() => {
-  if (!props.options) return []
-
-  return props.options.map((option) => {
-    if (typeof option === 'string') {
-      return { text: option, value: option }
-    }
-
-    if ('text' in option) {
-      return {
-        text: option.text,
-        value: option.value ?? option.text
-      }
-    }
-    // Handle optionLabel/optionValue
-    return {
-      text: option[props.optionLabel || 'text'] || 'Unknown',
-      value: option[props.optionValue || 'value']
-    }
-  })
-})
-</script>

src/components/common/RefreshButton.vue

@@ -32,7 +32,7 @@
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
 
-import { type PrimeVueSeverity } from '@/types/primeVueTypes'
+import { PrimeVueSeverity } from '@/types/primeVueTypes'
 
 const {
   disabled,

src/components/common/TreeExplorerTreeNode.spec.ts

@@ -11,7 +11,7 @@ import EditableText from '@/components/common/EditableText.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import {
   InjectKeyHandleEditLabelFunction,
-  type RenderedTreeExplorerNode
+  RenderedTreeExplorerNode
 } from '@/types/treeExplorerTypes'
 
 // Create a mock i18n instance

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -1,3 +1,4 @@
+<!-- Prompt user that the workflow contains API nodes that needs login to run -->
 <template>
   <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
     <div class="text-2xl font-medium mb-2">

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -2,8 +2,8 @@
   <NoResultsPlaceholder
     class="pb-0"
     icon="pi pi-exclamation-circle"
-    :title="$t('loadWorkflowWarning.missingNodesTitle')"
-    :message="$t('loadWorkflowWarning.missingNodesDescription')"
+    title="Some Nodes Are Missing"
+    message="When loading the graph, the following node types were not found"
   />
   <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
   <ListBox
@@ -53,16 +53,13 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed, nextTick, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/composables/useManagerState'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { useDialogStore } from '@/stores/dialogStore'
-import { useToastStore } from '@/stores/toastStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -124,35 +121,6 @@ const openManager = async () => {
     showToastOnLegacyError: true
   })
 }
-
-const { t } = useI18n()
-const dialogStore = useDialogStore()
-
-// Computed to check if all missing nodes have been installed
-const allMissingNodesInstalled = computed(() => {
-  return (
-    !isLoading.value &&
-    !isInstalling.value &&
-    missingNodePacks.value?.length === 0
-  )
-})
-// Watch for completion and close dialog
-watch(allMissingNodesInstalled, async (allInstalled) => {
-  if (allInstalled) {
-    // Use nextTick to ensure state updates are complete
-    await nextTick()
-
-    dialogStore.closeDialog({ key: 'global-load-workflow-warning' })
-
-    // Show success toast
-    useToastStore().add({
-      severity: 'success',
-      summary: t('g.success'),
-      detail: t('manager.allMissingNodesInstalled'),
-      life: 3000
-    })
-  }
-})
 </script>
 
 <style scoped>

src/components/dialog/content/ManagerProgressDialogContent.test.ts

@@ -7,7 +7,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
+import enMessages from '@/locales/en/main.json'
 
 import ManagerProgressDialogContent from './ManagerProgressDialogContent.vue'
 

src/components/dialog/content/SettingDialogContent.vue

@@ -69,8 +69,8 @@ import SearchBox from '@/components/common/SearchBox.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSettingSearch } from '@/composables/setting/useSettingSearch'
 import { useSettingUI } from '@/composables/setting/useSettingUI'
-import { type SettingTreeNode } from '@/stores/settingStore'
-import { type ISettingGroup, type SettingParams } from '@/types/settingTypes'
+import { SettingTreeNode } from '@/stores/settingStore'
+import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import { flattenTree } from '@/utils/treeUtil'
 
 import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
@@ -113,12 +113,7 @@ const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
     .sort((a, b) => a.label.localeCompare(b.label))
     .map((group) => ({
       label: group.label,
-      settings: flattenTree<SettingParams>(group).sort((a, b) => {
-        const sortOrderA = a.sortOrder ?? 0
-        const sortOrderB = b.sortOrder ?? 0
-
-        return sortOrderB - sortOrderA
-      })
+      settings: flattenTree<SettingParams>(group)
     }))
 }
 

src/components/dialog/content/SignInContent.vue

@@ -148,7 +148,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
-import { type SignInData, type SignUpData } from '@/schemas/signInSchema'
+import { SignInData, SignUpData } from '@/schemas/signInSchema'
 import { isInChina } from '@/utils/networkUtil'
 
 import ApiKeyForm from './signin/ApiKeyForm.vue'

src/components/dialog/content/UpdatePasswordContent.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { Form, type FormSubmitEvent } from '@primevue/forms'
+import { Form, FormSubmitEvent } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import { ref } from 'vue'

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -160,7 +160,7 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { TabItem } from '@/types/comfyManagerTypes'
 import { ManagerTab } from '@/types/comfyManagerTypes'
-import { type components } from '@/types/comfyRegistryTypes'
+import { components } from '@/types/comfyRegistryTypes'
 
 const { initialTab } = defineProps<{
   initialTab?: ManagerTab

src/components/dialog/content/manager/ManagerHeader.test.ts

@@ -6,7 +6,7 @@ import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
+import enMessages from '@/locales/en/main.json'
 
 import ManagerHeader from './ManagerHeader.vue'
 

src/components/dialog/content/manager/NodeConflictDialogContent.vue

@@ -170,8 +170,8 @@ import { useI18n } from 'vue-i18n'
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import {
-  type ConflictDetail,
-  type ConflictDetectionResult
+  ConflictDetail,
+  ConflictDetectionResult
 } from '@/types/conflictDetectionTypes'
 import { getConflictMessage } from '@/utils/conflictMessageUtil'
 

src/components/dialog/content/manager/PackStatusMessage.vue

@@ -19,7 +19,7 @@
 import Message from 'primevue/message'
 import { computed, inject } from 'vue'
 
-import { type components } from '@/types/comfyRegistryTypes'
+import { components } from '@/types/comfyRegistryTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 
 type PackVersionStatus = components['schemas']['NodeVersionStatus']

src/components/dialog/content/manager/PackVersionBadge.test.ts

@@ -1,12 +1,11 @@
 import { VueWrapper, mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
-import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
+import enMessages from '@/locales/en/main.json'
 
 import PackVersionBadge from './PackVersionBadge.vue'
 import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
@@ -32,14 +31,11 @@ const mockInstalledPacks = {
   'installed-pack': { ver: '2.0.0' }
 }
 
-const mockIsPackEnabled = vi.fn(() => true)
-
 vi.mock('@/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
     installedPacks: mockInstalledPacks,
     isPackInstalled: (id: string) =>
-      !!mockInstalledPacks[id as keyof typeof mockInstalledPacks],
-    isPackEnabled: mockIsPackEnabled
+      !!mockInstalledPacks[id as keyof typeof mockInstalledPacks]
   }))
 }))
 
@@ -64,7 +60,6 @@ describe('PackVersionBadge', () => {
   beforeEach(() => {
     mockToggle.mockReset()
     mockHide.mockReset()
-    mockIsPackEnabled.mockReturnValue(true) // Reset to default enabled state
   })
 
   const mountComponent = ({
@@ -84,9 +79,6 @@ describe('PackVersionBadge', () => {
       },
       global: {
         plugins: [PrimeVue, createPinia(), i18n],
-        directives: {
-          tooltip: Tooltip
-        },
         stubs: {
           Popover: PopoverStub,
           PackVersionSelectorPopover: true
@@ -237,63 +229,4 @@ describe('PackVersionBadge', () => {
       expect(mockHide).not.toHaveBeenCalled()
     })
   })
-
-  describe('disabled state', () => {
-    beforeEach(() => {
-      mockIsPackEnabled.mockReturnValue(false) // Set all packs as disabled for these tests
-    })
-
-    it('adds disabled styles when pack is disabled', () => {
-      const wrapper = mountComponent()
-
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      expect(badge.classes()).toContain('cursor-not-allowed')
-      expect(badge.classes()).toContain('opacity-60')
-    })
-
-    it('does not show chevron icon when disabled', () => {
-      const wrapper = mountComponent()
-
-      const chevronIcon = wrapper.find('.pi-chevron-right')
-      expect(chevronIcon.exists()).toBe(false)
-    })
-
-    it('does not show update arrow when disabled', () => {
-      const wrapper = mountComponent()
-
-      const updateIcon = wrapper.find('.pi-arrow-circle-up')
-      expect(updateIcon.exists()).toBe(false)
-    })
-
-    it('does not toggle popover when clicked while disabled', async () => {
-      const wrapper = mountComponent()
-
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      await badge.trigger('click')
-
-      // Since it's disabled, the popover should not be toggled
-      expect(mockToggle).not.toHaveBeenCalled()
-    })
-
-    it('has correct tabindex when disabled', () => {
-      const wrapper = mountComponent()
-
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      expect(badge.attributes('tabindex')).toBe('-1')
-    })
-
-    it('does not respond to keyboard events when disabled', async () => {
-      const wrapper = mountComponent()
-
-      const badge = wrapper.find('[role="text"]') // role changes to "text" when disabled
-      expect(badge.exists()).toBe(true)
-      await badge.trigger('keydown.enter')
-      await badge.trigger('keydown.space')
-
-      expect(mockToggle).not.toHaveBeenCalled()
-    })
-  })
 })

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -1,28 +1,21 @@
 <template>
   <div>
     <div
-      v-tooltip.top="
-        isDisabled ? $t('manager.enablePackToChangeVersion') : null
-      "
-      class="inline-flex items-center gap-1 rounded-2xl text-xs py-1"
-      :class="{
-        'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill,
-        'cursor-pointer': !isDisabled,
-        'cursor-not-allowed opacity-60': isDisabled
-      }"
-      :aria-haspopup="!isDisabled"
-      :role="isDisabled ? 'text' : 'button'"
-      :tabindex="isDisabled ? -1 : 0"
-      @click="!isDisabled && toggleVersionSelector($event)"
-      @keydown.enter="!isDisabled && toggleVersionSelector($event)"
-      @keydown.space="!isDisabled && toggleVersionSelector($event)"
+      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer py-1"
+      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill }"
+      aria-haspopup="true"
+      role="button"
+      tabindex="0"
+      @click="toggleVersionSelector"
+      @keydown.enter="toggleVersionSelector"
+      @keydown.space="toggleVersionSelector"
     >
       <i
         v-if="isUpdateAvailable"
         class="pi pi-arrow-circle-up text-blue-600 text-xs"
       />
       <span>{{ installedVersion }}</span>
-      <i v-if="!isDisabled" class="pi pi-chevron-right text-xxs" />
+      <i class="pi pi-chevron-right text-xxs" />
     </div>
 
     <Popover
@@ -68,11 +61,6 @@ const popoverRef = ref()
 
 const managerStore = useComfyManagerStore()
 
-const isInstalled = computed(() => managerStore.isPackInstalled(nodePack?.id))
-const isDisabled = computed(
-  () => isInstalled.value && !managerStore.isPackEnabled(nodePack?.id)
-)
-
 const installedVersion = computed(() => {
   if (!nodePack.id) return 'nightly'
   const version =

src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts

@@ -10,7 +10,7 @@ import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
+import enMessages from '@/locales/en/main.json'
 
 // SelectedVersion is now using direct strings instead of enum
 

src/components/dialog/content/manager/PackVersionSelectorPopover.vue

@@ -93,8 +93,8 @@ import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { type components } from '@/types/comfyRegistryTypes'
-import { type components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { components } from '@/types/comfyRegistryTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 import { getJoinedConflictMessages } from '@/utils/conflictMessageUtil'
 import { isSemVer } from '@/utils/formatUtil'
 

src/components/dialog/content/manager/button/PackEnableToggle.test.ts

@@ -6,7 +6,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
+import enMessages from '@/locales/en/main.json'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 
 import PackEnableToggle from './PackEnableToggle.vue'

src/components/dialog/content/manager/button/PackEnableToggle.vue

@@ -39,7 +39,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import { type components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 const TOGGLE_DEBOUNCE_MS = 256
 

src/components/dialog/content/manager/button/PackInstallButton.vue

@@ -31,13 +31,13 @@ import { useConflictDetection } from '@/composables/useConflictDetection'
 import { t } from '@/i18n'
 import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { type ButtonSize } from '@/types/buttonTypes'
+import { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 import {
   type ConflictDetail,
-  type ConflictDetectionResult
+  ConflictDetectionResult
 } from '@/types/conflictDetectionTypes'
-import { type components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 

src/components/dialog/content/manager/button/PackUninstallButton.vue

@@ -17,9 +17,9 @@
 <script setup lang="ts">
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { type ButtonSize } from '@/types/buttonTypes'
+import { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import { type components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']