fix: simplify and deduplicate output selection counting

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

@@ -1,12 +1,12 @@
-name: "CI: Tests E2E"
-description: "End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages"
+# Description: End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages
+name: 'CI: Tests E2E'
 
 on:
   push:
     branches: [main, master, core/*, desktop/*]
   pull_request:
-    branches-ignore:
-      [wip/*, draft/*, temp/*, vue-nodes-migration, sno-playwright-*]
+    branches-ignore: [wip/*, draft/*, temp/*]
+  workflow_dispatch:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -15,65 +15,56 @@ concurrency:
 jobs:
   setup:
     runs-on: ubuntu-latest
-    outputs:
-      cache-key: ${{ steps.cache-key.outputs.key }}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
-
-      # Setup Test Environment, build frontend but do not start server yet
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
+        uses: actions/checkout@v6
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
         with:
           include_build_step: true
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright # Setup Playwright and cache browsers
 
-      # Save the entire workspace as cache for later test jobs to restore
-      - name: Generate cache key
-        id: cache-key
-        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
-      - name: Save cache
-        uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684
+      # Upload only built dist/ (containerized test jobs will pnpm install without cache)
+      - name: Upload built frontend
+        uses: actions/upload-artifact@v6
         with:
-          path: .
-          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+          name: frontend-dist
+          path: dist/
+          retention-days: 1
 
   # Sharded chromium tests
   playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
+    timeout-minutes: 60
+    container:
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
       contents: read
+      packages: read
     strategy:
       fail-fast: false
       matrix:
         shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
         shardTotal: [8]
     steps:
-      # download built frontend repo from setup job
-      - name: Wait for cache propagation
-        run: sleep 10
-      - name: Restore cached setup
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - name: Download built frontend
+        uses: actions/download-artifact@v7
         with:
-          fail-on-cache-miss: true
-          path: .
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+          name: frontend-dist
+          path: dist/
 
-      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+      - name: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server
 
-      # Run sharded tests and upload sharded reports
+      - name: Install frontend deps
+        run: pnpm install --frozen-lockfile
+
+      # Run sharded tests (browsers pre-installed in container)
       - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright
         run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
@@ -81,7 +72,7 @@ jobs:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
 
       - name: Upload blob report
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         if: ${{ !cancelled() }}
         with:
           name: blob-report-chromium-${{ matrix.shardIndex }}
@@ -93,69 +84,70 @@ jobs:
     timeout-minutes: 15
     needs: setup
     runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
       contents: read
+      packages: read
     strategy:
       fail-fast: false
       matrix:
         browser: [chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
-      # download built frontend repo from setup job
-      - name: Wait for cache propagation
-        run: sleep 10
-      - name: Restore cached setup
-        uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - name: Download built frontend
+        uses: actions/download-artifact@v7
         with:
-          fail-on-cache-miss: true
-          path: .
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+          name: frontend-dist
+          path: dist/
 
-      # Setup Test Environment for this runner, start server, use cached built frontend ./dist from 'setup' job
-      - name: Setup ComfyUI server
-        uses: ./.github/actions/setup-comfyui-server
-        with:
-          launch_server: true
-      - name: Setup nodejs, pnpm, reuse built frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+      - name: Start ComfyUI server
+        uses: ./.github/actions/start-comfyui-server
 
-      # Run tests and upload reports
+      - name: Install frontend deps
+        run: pnpm install --frozen-lockfile
+
+      # Run tests (browsers pre-installed in container)
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
+        run: pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
+        env:
+          PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
+
+      - name: Generate HTML and JSON reports
+        if: always()
         run: |
-          # Run tests with both HTML and JSON reporters
+          # Generate HTML report from blob
+          pnpm exec playwright merge-reports --reporter=html ./blob-report
+          # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright test --project=${{ matrix.browser }} \
-            --reporter=list \
-            --reporter=html \
-            --reporter=json
+          pnpm exec playwright merge-reports --reporter=json ./blob-report
 
       - name: Upload Playwright report
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         if: always()
         with:
           name: playwright-report-${{ matrix.browser }}
           path: ./playwright-report/
           retention-days: 30
 
-  # Merge sharded test reports
+  # Merge sharded test reports (no container needed - only runs CLI)
   merge-reports:
     needs: [playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
     if: ${{ !cancelled() }}
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v5
-
-      # Setup Test Environment, we only need playwright to merge reports
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-      - name: Setup Playwright
-        uses: ./.github/actions/setup-playwright
+      - name: Install pnpm
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
 
       - name: Download blob reports
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v7
         with:
           path: ./all-blob-reports
           pattern: blob-report-chromium-*
@@ -164,13 +156,13 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
+          pnpm dlx @playwright/test merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
+          pnpm dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
 
       - name: Upload HTML report
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         with:
           name: playwright-report-chromium
           path: ./playwright-report/
@@ -188,7 +180,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Get start time
         id: start-time
@@ -215,10 +207,10 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Download all playwright reports
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v7
         with:
           pattern: playwright-report-*
           path: reports
@@ -228,6 +220,7 @@ jobs:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
+          GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
         run: |
           bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \

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

@@ -1,10 +1,9 @@
-name: "CI: Tests Storybook"
-description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
+# Description: Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages
+name: 'CI: Tests Storybook'
 
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
-    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs
@@ -15,8 +14,8 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
-        
+        uses: actions/checkout@v6
+
       - name: Post starting comment
         env:
           GITHUB_TOKEN: ${{ github.token }}
@@ -37,21 +36,10 @@ jobs:
       workflow-url: ${{ steps.workflow-url.outputs.url }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
 
       - name: Build Storybook
         run: pnpm build-storybook
@@ -70,7 +58,7 @@ jobs:
 
       - name: Upload Storybook build
         if: success() && github.event.pull_request.head.repo.fork == false
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         with:
           name: storybook-static
           path: storybook-static/
@@ -87,27 +75,16 @@ jobs:
       chromatic-storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0 # Required for Chromatic baseline
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
 
       - name: Build Storybook and run Chromatic
         id: chromatic
-        uses: chromaui/action@latest
+        uses: chromaui/action@07791f8243f4cb2698bf4d00426baf4b2d1cb7e0 # v13.3.5
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: build-storybook
@@ -137,18 +114,18 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
-        
+        uses: actions/checkout@v6
+
       - name: Download Storybook build
         if: needs.storybook-build.outputs.conclusion == 'success'
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v7
         with:
           name: storybook-static
           path: storybook-static
-          
+
       - name: Make deployment script executable
         run: chmod +x scripts/cicd/pr-storybook-deploy-and-comment.sh
-        
+
       - name: Deploy Storybook and comment on PR
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
@@ -171,30 +148,30 @@ jobs:
       pull-requests: write
     steps:
       - name: Update comment with Chromatic URLs
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         with:
           script: |
             const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';
             const storybookUrl = '${{ needs.chromatic-deployment.outputs.chromatic-storybook-url }}';
-            
+
             // Find the existing Storybook comment
             const { data: comments } = await github.rest.issues.listComments({
               owner: context.repo.owner,
               repo: context.repo.repo,
               issue_number: ${{ github.event.pull_request.number }}
             });
-            
-            const storybookComment = comments.find(comment => 
+
+            const storybookComment = comments.find(comment =>
               comment.body.includes('<!-- STORYBOOK_BUILD_STATUS -->')
             );
-            
+
             if (storybookComment && buildUrl && storybookUrl) {
               // Append Chromatic info to existing comment
               const updatedBody = storybookComment.body.replace(
                 /---\n(.*)$/s,
                 `---\n### 🎨 Chromatic Visual Tests\n- 📊 [View Chromatic Build](${buildUrl})\n- 📚 [View Chromatic Storybook](${storybookUrl})\n\n$1`
               );
-              
+
               await github.rest.issues.updateComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,

.github/workflows/deploy-branch-status.yml

@@ -1,122 +0,0 @@
-name: 'Deploy: Branch Status Pages'
-
-on:
-  workflow_run:
-    workflows:
-      - 'CI: Tests Storybook'
-      - 'CI: Tests E2E'
-    types:
-      - completed
-    branches-ignore:
-      - main
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-concurrency:
-  group: deploy-branch-status-${{ github.event.workflow_run.head_branch || github.ref_name }}
-  cancel-in-progress: true
-
-jobs:
-  deploy:
-    name: Deploy to Cloudflare Pages
-    runs-on: ubuntu-latest
-    if: |
-      github.event_name == 'workflow_dispatch' ||
-      github.event_name == 'push' ||
-      (github.event.workflow_run.conclusion == 'success')
-    permissions:
-      contents: read
-      pull-requests: write
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ github.event.workflow_run.head_sha || github.sha }}
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Build status pages
-        run: pnpm pages:build
-
-      - name: Install wrangler
-        run: npm install -g wrangler@^4.0.0
-
-      - name: Deploy to Cloudflare Pages
-        id: deploy
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-        run: |
-          BRANCH="${{ github.event.workflow_run.head_branch || github.ref_name }}"
-          CF_BRANCH=$(echo "$BRANCH" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9-]/-/g' | sed 's/--*/-/g' | sed 's/^-\|-$//g')
-
-          echo "Deploying branch status pages for: $BRANCH (cf: $CF_BRANCH)"
-
-          OUTPUT=$(wrangler pages deploy .pages-dist \
-            --project-name="comfyui-frontend-reports" \
-            --branch="$CF_BRANCH" 2>&1) || {
-            echo "Deployment failed: $OUTPUT"
-            exit 1
-          }
-
-          URL=$(echo "$OUTPUT" | grep -oE 'https://[a-zA-Z0-9.-]+\.pages\.dev\S*' | head -1)
-          URL="${URL:-https://${CF_BRANCH}.comfyui-frontend-reports.pages.dev}"
-
-          echo "url=$URL" >> "$GITHUB_OUTPUT"
-          echo "branch=$BRANCH" >> "$GITHUB_OUTPUT"
-          echo "Deployed to: $URL"
-
-      - name: Find PR number
-        id: pr
-        if: github.event_name == 'workflow_run'
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const branch = '${{ steps.deploy.outputs.branch }}';
-            const { data: prs } = await github.rest.pulls.list({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              head: `${context.repo.owner}:${branch}`,
-              state: 'open'
-            });
-            return prs.length > 0 ? prs[0].number : null;
-
-      - name: Comment on PR
-        if: steps.pr.outputs.result && steps.pr.outputs.result != 'null'
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const marker = '<!-- BRANCH_STATUS_DEPLOY -->';
-            const prNumber = ${{ steps.pr.outputs.result }};
-            const url = '${{ steps.deploy.outputs.url }}';
-
-            const body = `${marker}
-            **Branch Status Page** deployed: ${url}
-
-            Includes: Storybook links, Nx graph, Knip report, test report links`;
-
-            const { data: comments } = await github.rest.issues.listComments({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: prNumber
-            });
-
-            const existing = comments.find(c => c.body.includes(marker));
-            if (existing) {
-              await github.rest.issues.updateComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                comment_id: existing.id,
-                body
-              });
-            } else {
-              await github.rest.issues.createComment({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: prNumber,
-                body
-              });
-            }

.gitignore

@@ -18,6 +18,7 @@ yarn.lock
 .stylelintcache
 
 node_modules
+.pnpm-store
 dist
 dist-ssr
 *.local
@@ -78,7 +79,7 @@ templates_repo/
 vite.config.mts.timestamp-*.mjs
 
 # Linux core dumps
-core
+/core
 
 *storybook.log
 storybook-static
@@ -93,6 +94,7 @@ storybook-static
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 
-# Generated reports in .pages (exclude generated, keep HTML templates)
-/.pages/*/**/*
-/.pages-dist/
+# Weekly docs check output
+/output.txt
+
+.amp

.oxlintrc.json

@@ -96,7 +96,6 @@
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
     "typescript/no-floating-promises": "error",
-    "typescript/no-explicit-any": "error",
     "vue/no-import-compiler-macros": "error",
     "vue/no-dupe-keys": "error"
   },

.pages/README.md

@@ -1,54 +0,0 @@
-# Branch Status Pages
-
-This directory contains the source for branch status pages deployed to **Cloudflare Pages**.
-
-## Architecture
-
-```
-Push to Branch
-  |
-  +-> GitHub Actions (runs tests, deploys artifacts)
-  |     +-> Storybook -> comfy-storybook.pages.dev
-  |     +-> E2E Tests -> comfyui-playwright-*.pages.dev
-  |     +-> Branch Status -> comfyui-frontend-reports.pages.dev
-  |
-  +-> deploy-branch-status.yml
-        |
-        Runs: pnpm pages:build
-        |
-        Deploys to Cloudflare Pages via wrangler
-```
-
-## URLs
-
-- **Production** (main branch): `https://comfyui-frontend-reports.pages.dev`
-- **Preview** (PR branches): `https://<branch>.comfyui-frontend-reports.pages.dev`
-
-## What's Included
-
-1. **Storybook** - Links to Cloudflare Pages deployment
-2. **Nx Dependency Graph** - Generated during build
-3. **Playwright Reports** - Links to Cloudflare Pages deployments
-4. **Vitest Reports** - Links to CI artifacts
-5. **Coverage Report** - Links to CI artifacts
-6. **Knip Report** - Generated fresh during build
-
-## Local Development
-
-```bash
-pnpm pages:dev     # Dev server
-pnpm pages:build   # Build
-```
-
-## Secrets
-
-Required in GitHub Actions:
-- `CLOUDFLARE_API_TOKEN`
-- `CLOUDFLARE_ACCOUNT_ID`
-
-## Files
-
-- **index.html** - Landing page with links to all reports
-- **vite.config.ts** - Vite config for building the static site
-- **knip.html** - Knip markdown report viewer
-- **playwright-reports.html** - E2E test report viewer

.pages/index.html

@@ -1,211 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ComfyUI Frontend - Development Tools</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
-      background: linear-gradient(135deg, #667eea 0%, #52b2bb 100%);
-    }
-    .container {
-      max-width: 1200px;
-      width: 100%;
-    }
-    .header {
-      text-align: center;
-      color: white;
-      margin-bottom: 3rem;
-    }
-    .header h1 {
-      font-size: 2.5rem;
-      margin-bottom: 0.5rem;
-      font-weight: 700;
-    }
-    .header p {
-      font-size: 1.125rem;
-      opacity: 0.9;
-    }
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 1.5rem;
-    }
-    p,h1,h2,h3,h4,h5,h6 {
-      transform: matrix(1, 0, -0.25, 1, 0, 0);
-    }
-    .card {
-      background: white;
-      border-radius: 12px;
-      padding: 2rem;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-      transition: transform 0.2s, box-shadow 0.2s;
-      text-decoration: none;
-      color: inherit;
-      display: block;
-    }
-    .card:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
-    }
-    .card-icon {
-      font-size: 2.5rem;
-      margin-bottom: 1rem;
-    }
-    .card-title {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-      color: #1a202c;
-    }
-    .card-description {
-      color: #718096;
-      line-height: 1.6;
-    }
-    .card-status {
-      display: inline-block;
-      margin-top: 1rem;
-      padding: 0.25rem 0.75rem;
-      border-radius: 20px;
-      font-size: 0.875rem;
-      font-weight: 500;
-    }
-    .status-available {
-      background: #c6f6d5;
-      color: #22543d;
-    }
-    .status-loading {
-      background: #e9d8fd;
-      color: #44337a;
-    }
-    .status-unavailable {
-      background: #fed7d7;
-      color: #742a2a;
-    }
-    .footer {
-      text-align: center;
-      color: white;
-      margin-top: 3rem;
-      opacity: 0.8;
-    }
-    .footer a {
-      color: white;
-      text-decoration: underline;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="header">
-      <h1>🎨 ComfyUI Frontend</h1>
-      <p>Development Tools & Documentation</p>
-    </div>
-
-    <div class="grid">
-      <a href="./storybook/index.html" class="card" data-status="storybook" data-fetch="./storybook/index.html">
-        <div class="card-icon">📚</div>
-        <h2 class="card-title">Storybook</h2>
-        <p class="card-description">Interactive component library and design system documentation</p>
-        <span class="card-status status-loading" data-status-indicator>Checking…</span>
-      </a>
-
-      <a href="./nx-graph/index.html" class="card" data-status="nx-graph" data-fetch="./nx-graph/index.html">
-        <div class="card-icon">🔗</div>
-        <h2 class="card-title">Nx Dependency Graph</h2>
-        <p class="card-description">Visual representation of project dependencies and build structure</p>
-        <span class="card-status status-loading" data-status-indicator>Checking…</span>
-      </a>
-
-      <a href="./coverage/index.html" class="card" data-status="coverage" data-fetch="./coverage/index.html">
-        <div class="card-icon">📊</div>
-        <h2 class="card-title">Test Coverage</h2>
-        <p class="card-description">Code coverage reports from Vitest unit tests</p>
-        <span class="card-status status-loading" data-status-indicator>Checking…</span>
-      </a>
-
-      <a href="./playwright-reports/index.html" class="card" data-status="playwright" data-fetch="./playwright-reports/index.html">
-        <div class="card-icon">🎭</div>
-        <h2 class="card-title">Playwright E2E</h2>
-        <p class="card-description">Browser end-to-end test reports generated by Playwright</p>
-        <span class="card-status status-loading" data-status-indicator>Checking…</span>
-      </a>
-
-      <a href="./vitest-reports/index.html" class="card" data-status="vitest-reports" data-fetch="./vitest-reports/index.html">
-        <div class="card-icon">🧪</div>
-        <h2 class="card-title">Vitest Results</h2>
-        <p class="card-description">Interactive test results and reports</p>
-        <span class="card-status status-loading" data-status-indicator>Checking…</span>
-      </a>
-
-      <a href="./knip.html" class="card" data-status="knip" data-fetch="./knip/report.md">
-        <div class="card-icon">🔍</div>
-        <h2 class="card-title">Knip Report</h2>
-        <p class="card-description">Unused code and dependency analysis</p>
-        <span class="card-status status-loading" data-status-indicator>Checking…</span>
-      </a>
-    </div>
-
-    <div class="footer">
-      <p>
-        Built from the <strong>main</strong> branch &bull;
-        <a href="https://github.com/Comfy-Org/ComfyUI_frontend" target="_blank">GitHub Repository</a> &bull;
-        <a href="https://docs.comfy.org" target="_blank">Official Documentation</a>
-      </p>
-    </div>
-  </div>
-
-  <script>
-    const cards = Array.from(document.querySelectorAll('.card[data-status]'))
-
-    const setStatus = (card, variant, text) => {
-      const indicator = card.querySelector('[data-status-indicator]')
-      if (!indicator) return
-      indicator.classList.remove('status-loading', 'status-available', 'status-unavailable')
-      indicator.classList.add(`status-${variant}`)
-      indicator.textContent = text
-    }
-
-    const absoluteUrl = (href) => new URL(href, window.location.href).toString()
-
-    const controller = new AbortController()
-    const timeout = setTimeout(() => controller.abort(), 10000)
-
-    cards.forEach((card) => {
-      const href = card.dataset.fetch || card.getAttribute('href')
-      if (!href) {
-        setStatus(card, 'unavailable', 'No link configured')
-        return
-      }
-
-      fetch(absoluteUrl(href), { cache: 'no-store', signal: controller.signal })
-        .then((response) => {
-          if (response.ok) {
-            setStatus(card, 'available', 'Available')
-          } else {
-            setStatus(card, 'unavailable', `Unavailable (${response.status})`)
-          }
-        })
-        .catch((error) => {
-          const reason = error.name === 'AbortError' ? 'Timed out' : 'Unavailable'
-          setStatus(card, 'unavailable', reason)
-        })
-    })
-
-    window.addEventListener('beforeunload', () => {
-      clearTimeout(timeout)
-      controller.abort()
-    })
-  </script>
-</body>
-</html>

.pages/knip.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>Knip Report</title>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-      padding: 2rem;
-      background: #1a1a1a;
-      color: #f0f0f0;
-      line-height: 1.6;
-    }
-    h1 {
-      color: #4a9eff;
-      border-bottom: 3px solid #4a9eff;
-      padding-bottom: 1rem;
-    }
-    .status {
-      display: inline-block;
-      padding: 0.5rem 1rem;
-      margin: 1rem 0;
-      border-radius: 6px;
-      font-weight: 500;
-    }
-    .error {
-      background: #d32f2f;
-      color: #ffebee;
-    }
-    .loading {
-      background: #f57c00;
-      color: #fff3e0;
-    }
-    #content {
-      background: #2a2a2a;
-      padding: 1rem;
-      border-radius: 8px;
-      border: 1px solid #404040;
-    }
-  </style>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-</head>
-<body>
-  <h1>🧹 Knip Code Quality Report</h1>
-
-  <div id="status" class="status loading">Loading report...</div>
-
-  <div id="content"></div>
-
-  <script>
-    async function loadReport() {
-      const statusEl = document.getElementById('status')
-      const contentEl = document.getElementById('content')
-
-      try {
-        const response = await fetch('./knip/report.md')
-
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-        }
-
-        const reportText = await response.text()
-        statusEl.style.display = 'none'
-
-        // Wait for marked to be available
-        if (typeof marked !== 'undefined') {
-          contentEl.innerHTML = marked.parse(reportText)
-        } else {
-          contentEl.innerHTML = `<pre>${reportText}</pre>`
-        }
-      } catch (error) {
-        statusEl.className = 'status error'
-        statusEl.textContent = `Failed to load report: ${error.message}`
-
-        contentEl.innerHTML = '<p>The Knip report could not be loaded. This might happen if:</p><ul><li>The report generation failed during build</li><li>No unused code was detected</li><li>Network connectivity issues</li></ul>'
-      }
-    }
-
-    // Wait for marked library to load before running
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', loadReport)
-    } else {
-      loadReport()
-    }
-  </script>
-</body>
-</html>

.pages/playwright-reports.html

@@ -1,300 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Playwright E2E Test Reports</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-      padding: 2rem;
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-
-    h1 {
-      color: white;
-      text-align: center;
-      margin-bottom: 3rem;
-      font-size: 2.5rem;
-      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-    }
-
-    .status {
-      display: inline-block;
-      padding: 0.5rem 1rem;
-      margin: 1rem auto;
-      border-radius: 6px;
-      font-weight: 500;
-      text-align: center;
-      width: 100%;
-      max-width: 400px;
-      display: block;
-    }
-
-    .error {
-      background: #d32f2f;
-      color: #ffebee;
-    }
-
-    .loading {
-      background: #f57c00;
-      color: #fff3e0;
-    }
-
-    .cards-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 1.5rem;
-    }
-
-    .card {
-      background: white;
-      border-radius: 12px;
-      padding: 1.5rem;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-      transition: transform 0.2s, box-shadow 0.2s;
-      text-decoration: none;
-      color: inherit;
-      display: block;
-    }
-
-    .card:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
-    }
-
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
-      padding-bottom: 1rem;
-      border-bottom: 2px solid #f0f0f0;
-    }
-
-    .card h2 {
-      color: #333;
-      font-size: 1.5rem;
-      text-transform: capitalize;
-    }
-
-    .pass-rate {
-      background: #10b981;
-      color: white;
-      padding: 0.5rem 1rem;
-      border-radius: 20px;
-      font-weight: bold;
-      font-size: 1.1rem;
-    }
-
-    .pass-rate.has-failures {
-      background: #ef4444;
-    }
-
-    .stats {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-
-    .stat {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-    }
-
-    .stat .label {
-      font-size: 0.875rem;
-      color: #666;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .stat .value {
-      font-size: 1.75rem;
-      font-weight: bold;
-    }
-
-    .stat.passed .value {
-      color: #10b981;
-    }
-
-    .stat.failed .value {
-      color: #ef4444;
-    }
-
-    .stat.skipped .value {
-      color: #f59e0b;
-    }
-
-    .stat.flaky .value {
-      color: #8b5cf6;
-    }
-
-    @media (max-width: 768px) {
-      h1 {
-        font-size: 2rem;
-      }
-
-      .cards-grid {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>🎭 Playwright E2E Test Reports</h1>
-
-    <div id="status" class="status loading">Loading reports...</div>
-
-    <div id="content" class="cards-grid"></div>
-  </div>
-
-  <script>
-    async function getTestStats(browserName) {
-      try {
-        const reportJsonPath = `./playwright-reports/${browserName}/report.json`
-        const response = await fetch(reportJsonPath)
-
-        if (!response.ok) {
-          console.warn(`No report.json found for ${browserName}`)
-          return null
-        }
-
-        const reportData = await response.json()
-
-        let passed = 0
-        let failed = 0
-        let skipped = 0
-        let flaky = 0
-
-        // Parse Playwright JSON report format
-        if (reportData.suites) {
-          const countResults = (suites) => {
-            for (const suite of suites) {
-              if (suite.specs) {
-                for (const spec of suite.specs) {
-                  if (!spec.tests || spec.tests.length === 0) continue
-
-                  const test = spec.tests[0]
-                  const results = test.results || []
-
-                  // Check if test is flaky (has both pass and fail results)
-                  const hasPass = results.some((r) => r.status === 'passed')
-                  const hasFail = results.some((r) => r.status === 'failed')
-
-                  if (hasPass && hasFail) {
-                    flaky++
-                  } else if (results.some((r) => r.status === 'passed')) {
-                    passed++
-                  } else if (results.some((r) => r.status === 'failed')) {
-                    failed++
-                  } else if (results.some((r) => r.status === 'skipped')) {
-                    skipped++
-                  }
-                }
-              }
-              if (suite.suites) {
-                countResults(suite.suites)
-              }
-            }
-          }
-
-          countResults(reportData.suites)
-        }
-
-        return { passed, failed, skipped, flaky }
-      } catch (error) {
-        console.error(`Error reading report for ${browserName}:`, error.message)
-        return null
-      }
-    }
-
-    function createCard(browserName, stats) {
-      if (!stats) return ''
-
-      const total = stats.passed + stats.failed + stats.skipped + stats.flaky
-      const passRate = total > 0 ? ((stats.passed / total) * 100).toFixed(1) : 0
-
-      return `
-      <a href="./playwright-reports/${browserName}/index.html" class="card">
-        <div class="card-header">
-          <h2>${browserName}</h2>
-          <span class="pass-rate ${stats.failed > 0 ? 'has-failures' : ''}">${passRate}%</span>
-        </div>
-        <div class="stats">
-          <div class="stat passed">
-            <span class="label">Passed</span>
-            <span class="value">${stats.passed}</span>
-          </div>
-          <div class="stat failed">
-            <span class="label">Failed</span>
-            <span class="value">${stats.failed}</span>
-          </div>
-          <div class="stat skipped">
-            <span class="label">Skipped</span>
-            <span class="value">${stats.skipped}</span>
-          </div>
-          <div class="stat flaky">
-            <span class="label">Flaky</span>
-            <span class="value">${stats.flaky}</span>
-          </div>
-        </div>
-      </a>
-      `
-    }
-
-    async function loadReports() {
-      const statusEl = document.getElementById('status')
-      const contentEl = document.getElementById('content')
-
-      try {
-        // Known browser configurations from the workflow
-        const browsers = ['chromium', 'chromium-2x', 'chromium-0.5x', 'mobile-chrome']
-
-        const cards = []
-
-        for (const browser of browsers) {
-          const stats = await getTestStats(browser)
-          if (stats) {
-            cards.push(createCard(browser, stats))
-            console.log(`✓ Found report for ${browser}:`, stats)
-          }
-        }
-
-        if (cards.length === 0) {
-          throw new Error('No valid browser reports found')
-        }
-
-        statusEl.style.display = 'none'
-        contentEl.innerHTML = cards.join('')
-      } catch (error) {
-        statusEl.className = 'status error'
-        statusEl.textContent = `Failed to load reports: ${error.message}`
-
-        contentEl.innerHTML = '<p style="color: white; text-align: center;">The Playwright reports could not be loaded. This might happen if:</p><ul style="color: white; text-align: center; list-style: none;"><li>The report generation failed during build</li><li>No test reports are available yet</li><li>Network connectivity issues</li></ul>'
-      }
-    }
-
-    // Load reports when page loads
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', loadReports)
-    } else {
-      loadReports()
-    }
-  </script>
-</body>
-</html>

.pages/vite.config.ts

@@ -1,51 +0,0 @@
-import fs from 'node:fs'
-import { resolve } from 'node:path'
-import { defineConfig } from 'vite'
-
-const rootDir = __dirname
-const outDir = resolve(rootDir, '../.pages-dist')
-
-const discoverHtmlEntries = () => {
-  const entries = new Map<string, string>()
-  const topLevel = resolve(rootDir, 'index.html')
-  if (fs.existsSync(topLevel)) entries.set('index', topLevel)
-
-  // Directories with pre-built assets (e.g. nx-graph) are copied directly
-  // in build-pages.sh to avoid CSS minification issues
-  const skipDirs = new Set(['nx-graph'])
-
-  for (const dirent of fs.readdirSync(rootDir, { withFileTypes: true })) {
-    if (!dirent.isDirectory() || dirent.name.startsWith('.')) continue
-    if (skipDirs.has(dirent.name)) continue
-    const candidate = resolve(rootDir, dirent.name, 'index.html')
-    if (fs.existsSync(candidate)) entries.set(dirent.name, candidate)
-  }
-
-  return entries.size > 0 ? Object.fromEntries(entries) : undefined
-}
-
-export default defineConfig({
-  root: rootDir,
-  base: '/',
-  appType: 'mpa',
-  logLevel: 'info',
-  publicDir: false,
-  server: {
-    open: '/index.html',
-    fs: {
-      allow: [rootDir],
-      strict: false
-    }
-  },
-  preview: {
-    open: '/index.html'
-  },
-  build: {
-    emptyOutDir: false,
-    outDir,
-    copyPublicDir: false,
-    rollupOptions: {
-      input: discoverHtmlEntries()
-    }
-  }
-})

.storybook/main.ts

@@ -98,6 +98,9 @@ const config: StorybookConfig = {
       },
       build: {
         rolldownOptions: {
+          experimental: {
+            strictExecutionOrder: true
+          },
           treeshake: false,
           output: {
             keepNames: true

.stylelintrc.json

@@ -59,7 +59,7 @@
     "function-no-unknown": [
       true,
       {
-        "ignoreFunctions": ["theme", "v-bind", "from-folder", "from-json"]
+        "ignoreFunctions": ["theme", "v-bind"]
       }
     ]
   },

CODEOWNERS

@@ -2,57 +2,57 @@
 *                                                 @Comfy-org/comfy_frontend_devs
 
 # Desktop/Electron
-/apps/desktop-ui/                                 @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/stores/electronDownloadStore.ts              @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/extensions/core/electronAdapter.ts           @benceruleanlu @Comfy-org/comfy_frontend_devs
-/vite.electron.config.mts                         @benceruleanlu @Comfy-org/comfy_frontend_devs
+/apps/desktop-ui/                                 @benceruleanlu
+/src/stores/electronDownloadStore.ts              @benceruleanlu
+/src/extensions/core/electronAdapter.ts           @benceruleanlu
+/vite.electron.config.mts                         @benceruleanlu
 
 # Common UI Components
-/src/components/chip/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/card/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/button/                           @viva-jinyi @Comfy-org/comfy_frontend_devs
-/src/components/input/                            @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/chip/                             @viva-jinyi
+/src/components/card/                             @viva-jinyi
+/src/components/button/                           @viva-jinyi
+/src/components/input/                            @viva-jinyi
 
 # Topbar
-/src/components/topbar/                           @pythongosssss @Comfy-org/comfy_frontend_devs
+/src/components/topbar/                           @pythongosssss
 
 # Thumbnail
-/src/renderer/core/thumbnail/                     @pythongosssss @Comfy-org/comfy_frontend_devs
+/src/renderer/core/thumbnail/                     @pythongosssss
 
 # Legacy UI
-/scripts/ui/                                      @pythongosssss @Comfy-org/comfy_frontend_devs
+/scripts/ui/                                      @pythongosssss
 
 # Link rendering
-/src/renderer/core/canvas/links/                  @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/renderer/core/canvas/links/                  @benceruleanlu
 
 # Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @Comfy-org/comfy_frontend_devs
+/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88
 
 # Node help system
-/src/utils/nodeHelpUtil.ts                        @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu @Comfy-org/comfy_frontend_devs
-/src/services/nodeHelpService.ts                  @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
+/src/services/nodeHelpService.ts                  @benceruleanlu
 
 # Selection toolbox
-/src/components/graph/selectionToolbox/           @Myestery @Comfy-org/comfy_frontend_devs
+/src/components/graph/selectionToolbox/           @Myestery
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery @Comfy-org/comfy_frontend_devs
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
 
 # Workflow Templates
-/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
-/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
 
 # 3D
-/src/extensions/core/load3d.ts                    @jtydhr88 @Comfy-org/comfy_frontend_devs
-/src/components/load3d/                           @jtydhr88 @Comfy-org/comfy_frontend_devs
+/src/extensions/core/load3d.ts                    @jtydhr88
+/src/components/load3d/                           @jtydhr88
 
 # Manager
-/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata @Comfy-org/comfy_frontend_devs
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
 /src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs

CONTRIBUTING.md

@@ -201,7 +201,7 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Tailwind CSS icon classes (`icon-[comfy--template]`) are provided by `@iconify/tailwind4`, configured in `packages/design-system/src/css/style.css`. Custom icons are stored in `packages/design-system/src/icons/` and loaded via `from-folder` at build time.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
 
 For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).
 

browser_tests/assets/subgraphs/subgraph-nested-duplicate-ids.json

@@ -1,599 +0,0 @@
-{
-  "id": "9a37f747-e96b-4304-9212-7abcaad7bdac",
-  "revision": 0,
-  "last_node_id": 5,
-  "last_link_id": 5,
-  "nodes": [
-    {
-      "id": 5,
-      "type": "1e38d8ea-45e1-48a5-aa20-966584201867",
-      "pos": [788, 433.5],
-      "size": [210, 108],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "string_a",
-          "type": "STRING",
-          "widget": {
-            "name": "string_a"
-          },
-          "link": 4
-        }
-      ],
-      "outputs": [
-        {
-          "name": "STRING",
-          "type": "STRING",
-          "links": [5]
-        }
-      ],
-      "properties": {
-        "proxyWidgets": [["-1", "string_a"]]
-      },
-      "widgets_values": [""]
-    },
-    {
-      "id": 2,
-      "type": "PreviewAny",
-      "pos": [1135, 429],
-      "size": [250, 145.5],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "source",
-          "type": "*",
-          "link": 5
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "PreviewAny"
-      },
-      "widgets_values": [null, null, false]
-    },
-    {
-      "id": 1,
-      "type": "PrimitiveStringMultiline",
-      "pos": [456, 450],
-      "size": [225, 121.5],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "STRING",
-          "type": "STRING",
-          "links": [4]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "PrimitiveStringMultiline"
-      },
-      "widgets_values": ["Outer\n"]
-    }
-  ],
-  "links": [
-    [4, 1, 0, 5, 0, "STRING"],
-    [5, 5, 0, 2, 0, "STRING"]
-  ],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "1e38d8ea-45e1-48a5-aa20-966584201867",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 6,
-          "lastLinkId": 9,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [351, 432.5, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1315, 432.5, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "7bf3e1d4-0521-4b5c-92f5-47ca598b7eb4",
-            "name": "string_a",
-            "type": "STRING",
-            "linkIds": [1],
-            "localized_name": "string_a",
-            "pos": [451, 452.5]
-          }
-        ],
-        "outputs": [
-          {
-            "id": "fbe975ba-d7c2-471e-a99a-a1e2c6ab466d",
-            "name": "STRING",
-            "type": "STRING",
-            "linkIds": [9],
-            "localized_name": "STRING",
-            "pos": [1335, 452.5]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 3,
-            "type": "StringConcatenate",
-            "pos": [815, 373],
-            "size": [347, 231],
-            "flags": {},
-            "order": 2,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "string_a",
-                "name": "string_a",
-                "type": "STRING",
-                "widget": {
-                  "name": "string_a"
-                },
-                "link": 1
-              },
-              {
-                "localized_name": "string_b",
-                "name": "string_b",
-                "type": "STRING",
-                "widget": {
-                  "name": "string_b"
-                },
-                "link": 2
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": [7]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "StringConcatenate"
-            },
-            "widgets_values": ["", "", ""]
-          },
-          {
-            "id": 6,
-            "type": "9be42452-056b-4c99-9f9f-7381d11c4454",
-            "pos": [955, 775],
-            "size": [210, 88],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "string_a",
-                "name": "string_a",
-                "type": "STRING",
-                "widget": {
-                  "name": "string_a"
-                },
-                "link": 7
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": [9]
-              }
-            ],
-            "properties": {
-              "proxyWidgets": [["-1", "string_a"]]
-            },
-            "widgets_values": [""]
-          },
-          {
-            "id": 4,
-            "type": "PrimitiveStringMultiline",
-            "pos": [313, 685],
-            "size": [325, 109],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": [2]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "PrimitiveStringMultiline"
-            },
-            "widgets_values": ["Inner 1\n"]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 2,
-            "origin_id": 4,
-            "origin_slot": 0,
-            "target_id": 3,
-            "target_slot": 1,
-            "type": "STRING"
-          },
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 3,
-            "target_slot": 0,
-            "type": "STRING"
-          },
-          {
-            "id": 7,
-            "origin_id": 3,
-            "origin_slot": 0,
-            "target_id": 6,
-            "target_slot": 0,
-            "type": "STRING"
-          },
-          {
-            "id": 6,
-            "origin_id": 6,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 1,
-            "type": "STRING"
-          },
-          {
-            "id": 9,
-            "origin_id": 6,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "STRING"
-          }
-        ],
-        "extra": {}
-      },
-      {
-        "id": "9be42452-056b-4c99-9f9f-7381d11c4454",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 9,
-          "lastLinkId": 12,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [680, 774, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1320, 774, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "01c05c51-86b5-4bad-b32f-9c911683a13d",
-            "name": "string_a",
-            "type": "STRING",
-            "linkIds": [4],
-            "localized_name": "string_a",
-            "pos": [780, 794]
-          }
-        ],
-        "outputs": [
-          {
-            "id": "a8bcf3bf-a66a-4c71-8d92-17a2a4d03686",
-            "name": "STRING",
-            "type": "STRING",
-            "linkIds": [12],
-            "localized_name": "STRING",
-            "pos": [1340, 794]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 5,
-            "type": "StringConcatenate",
-            "pos": [860, 719],
-            "size": [400, 200],
-            "flags": {},
-            "order": 2,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "string_a",
-                "name": "string_a",
-                "type": "STRING",
-                "widget": {
-                  "name": "string_a"
-                },
-                "link": 4
-              },
-              {
-                "localized_name": "string_b",
-                "name": "string_b",
-                "type": "STRING",
-                "widget": {
-                  "name": "string_b"
-                },
-                "link": 7
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": [11]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "StringConcatenate"
-            },
-            "widgets_values": ["", "", ""]
-          },
-          {
-            "id": 6,
-            "type": "PrimitiveStringMultiline",
-            "pos": [401, 973],
-            "size": [400, 200],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": [7]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "PrimitiveStringMultiline"
-            },
-            "widgets_values": ["Inner 2\n"]
-          },
-          {
-            "id": 9,
-            "type": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
-            "pos": [1046, 985],
-            "size": [210, 88],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "string_a",
-                "name": "string_a",
-                "type": "STRING",
-                "widget": {
-                  "name": "string_a"
-                },
-                "link": 11
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": [12]
-              }
-            ],
-            "properties": {
-              "proxyWidgets": [["-1", "string_a"]]
-            },
-            "widgets_values": [""]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 4,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 5,
-            "target_slot": 0,
-            "type": "STRING"
-          },
-          {
-            "id": 7,
-            "origin_id": 6,
-            "origin_slot": 0,
-            "target_id": 5,
-            "target_slot": 1,
-            "type": "STRING"
-          },
-          {
-            "id": 11,
-            "origin_id": 5,
-            "origin_slot": 0,
-            "target_id": 9,
-            "target_slot": 0,
-            "type": "STRING"
-          },
-          {
-            "id": 10,
-            "origin_id": 9,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "STRING"
-          },
-          {
-            "id": 12,
-            "origin_id": 9,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "STRING"
-          }
-        ],
-        "extra": {}
-      },
-      {
-        "id": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 8,
-          "lastLinkId": 10,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [262, 1222, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1330, 1222, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "934a8baa-d79c-428c-8ec9-814ad437d7c7",
-            "name": "string_a",
-            "type": "STRING",
-            "linkIds": [9],
-            "localized_name": "string_a",
-            "pos": [362, 1242]
-          }
-        ],
-        "outputs": [
-          {
-            "id": "4c3d243b-9ff6-4dcd-9dbf-e4ec8e1fc879",
-            "name": "STRING",
-            "type": "STRING",
-            "linkIds": [10],
-            "localized_name": "STRING",
-            "pos": [1350, 1242]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 7,
-            "type": "StringConcatenate",
-            "pos": [870, 1038],
-            "size": [400, 200],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "string_a",
-                "name": "string_a",
-                "type": "STRING",
-                "widget": {
-                  "name": "string_a"
-                },
-                "link": 9
-              },
-              {
-                "localized_name": "string_b",
-                "name": "string_b",
-                "type": "STRING",
-                "widget": {
-                  "name": "string_b"
-                },
-                "link": 8
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": [10]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "StringConcatenate"
-            },
-            "widgets_values": ["", "", ""]
-          },
-          {
-            "id": 8,
-            "type": "PrimitiveStringMultiline",
-            "pos": [442, 1296],
-            "size": [400, 200],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": [8]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "PrimitiveStringMultiline"
-            },
-            "widgets_values": ["Inner 3\n"]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 8,
-            "origin_id": 8,
-            "origin_slot": 0,
-            "target_id": 7,
-            "target_slot": 1,
-            "type": "STRING"
-          },
-          {
-            "id": 9,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 7,
-            "target_slot": 0,
-            "type": "STRING"
-          },
-          {
-            "id": 10,
-            "origin_id": 7,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "STRING"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [-7, 144]
-    },
-    "frontendVersion": "1.38.13"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/components/SettingDialog.ts

@@ -23,7 +23,9 @@ export class SettingDialog extends BaseDialog {
    * @param value - The value to set
    */
   async setStringSetting(id: string, value: string) {
-    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
+    const settingInputDiv = this.page.locator(
+      `div.settings-container div[id="${id}"]`
+    )
     await settingInputDiv.locator('input').fill(value)
   }
 
@@ -32,31 +34,16 @@ export class SettingDialog extends BaseDialog {
    * @param id - The id of the setting
    */
   async toggleBooleanSetting(id: string) {
-    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
+    const settingInputDiv = this.page.locator(
+      `div.settings-container div[id="${id}"]`
+    )
     await settingInputDiv.locator('input').click()
   }
 
-  get searchBox() {
-    return this.root.getByPlaceholder(/Search/)
-  }
-
-  get categories() {
-    return this.root.locator('nav').getByRole('button')
-  }
-
-  category(name: string) {
-    return this.root.locator('nav').getByRole('button', { name })
-  }
-
-  get contentArea() {
-    return this.root.getByRole('main')
-  }
-
   async goToAboutPanel() {
-    const aboutButton = this.root.locator('nav').getByRole('button', {
-      name: 'About'
-    })
-    await aboutButton.click()
-    await this.page.waitForSelector('.about-container')
+    await this.page.getByTestId(TestIds.dialogs.settingsTabAbout).click()
+    await this.page
+      .getByTestId(TestIds.dialogs.about)
+      .waitFor({ state: 'visible' })
   }
 }

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -226,7 +226,9 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
     await expect(bottomPanel.shortcuts.manageButton).toBeVisible()
     await bottomPanel.shortcuts.manageButton.click()
 
-    await expect(comfyPage.settingDialog.root).toBeVisible()
-    await expect(comfyPage.settingDialog.category('Keybinding')).toBeVisible()
+    await expect(comfyPage.page.getByRole('dialog')).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('option', { name: 'Keybinding' })
+    ).toBeVisible()
   })
 })

browser_tests/tests/dialog.spec.ts

@@ -244,13 +244,9 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
-    await expect(settingsDialog).toBeVisible()
-    const contentArea = settingsDialog.locator('main')
-    await expect(contentArea).toBeVisible()
-    const isUsableHeight = await contentArea.evaluate(
+    const settingsContent = comfyPage.page.locator('.settings-content')
+    await expect(settingsContent).toBeVisible()
+    const isUsableHeight = await settingsContent.evaluate(
       (el) => el.clientHeight > 30
     )
     expect(isUsableHeight).toBeTruthy()
@@ -260,9 +256,7 @@ test.describe('Settings', () => {
     await comfyPage.page.keyboard.down('ControlOrMeta')
     await comfyPage.page.keyboard.press(',')
     await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
+    const settingsLocator = comfyPage.page.locator('.settings-container')
     await expect(settingsLocator).toBeVisible()
     await comfyPage.page.keyboard.press('Escape')
     await expect(settingsLocator).not.toBeVisible()
@@ -281,15 +275,10 @@ test.describe('Settings', () => {
   test('Should persist keybinding setting', async ({ comfyPage }) => {
     // Open the settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')
+    await comfyPage.page.waitForSelector('.settings-container')
 
     // Open the keybinding tab
-    const settingsDialog = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
-    await settingsDialog
-      .locator('nav [role="button"]', { hasText: 'Keybinding' })
-      .click()
+    await comfyPage.page.getByLabel('Keybinding').click()
     await comfyPage.page.waitForSelector(
       '[placeholder="Search Keybindings..."]'
     )
@@ -309,10 +298,7 @@ test.describe('Settings', () => {
     await input.press('Alt+n')
 
     const requestPromise = comfyPage.page.waitForRequest(
-      (req) =>
-        req.url().includes('/api/settings') &&
-        !req.url().includes('/api/settings/') &&
-        req.method() === 'POST'
+      '**/api/settings/Comfy.Keybinding.NewBindings'
     )
 
     // Save keybinding

browser_tests/tests/sidebar/workflows.spec.ts

@@ -123,14 +123,17 @@ test.describe('Workflows sidebar', () => {
   test('Can save workflow as', async ({ comfyPage }) => {
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
-    await expect
-      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow.json', 'workflow3.json'])
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json',
+      'workflow3.json'
+    ])
 
     await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
-    await expect
-      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json',
+      'workflow3.json',
+      'workflow4.json'
+    ])
   })
 
   test('Exported workflow does not contain localized slot names', async ({
@@ -217,22 +220,24 @@ test.describe('Workflows sidebar', () => {
     await topbar.saveWorkflow('workflow1.json')
     await topbar.saveWorkflowAs('workflow2.json')
     await comfyPage.nextFrame()
-    await expect
-      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['workflow1.json', 'workflow2.json'])
-    await expect
-      .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
-      .toEqual('workflow2.json')
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      'workflow1.json',
+      'workflow2.json'
+    ])
+    expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
+      'workflow2.json'
+    )
 
     await topbar.saveWorkflowAs('workflow1.json')
     await comfyPage.confirmDialog.click('overwrite')
     // The old workflow1.json should be deleted and the new one should be saved.
-    await expect
-      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['workflow2.json', 'workflow1.json'])
-    await expect
-      .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
-      .toEqual('workflow1.json')
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      'workflow2.json',
+      'workflow1.json'
+    ])
+    expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
+      'workflow1.json'
+    )
   })
 
   test('Does not report warning when switching between opened workflows', async ({

browser_tests/tests/subgraph-duplicate-ids.spec.ts

@@ -1,100 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
-  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
-
-  test('All node IDs are globally unique after loading', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const result = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      // TODO: Extract allGraphs accessor (root + subgraphs) into LGraph
-      // TODO: Extract allNodeIds accessor into LGraph
-      const allGraphs = [graph, ...graph.subgraphs.values()]
-      const allIds = allGraphs
-        .flatMap((g) => g._nodes)
-        .map((n) => n.id)
-        .filter((id): id is number => typeof id === 'number')
-
-      return { allIds, uniqueCount: new Set(allIds).size }
-    })
-
-    expect(result.uniqueCount).toBe(result.allIds.length)
-    expect(result.allIds.length).toBeGreaterThanOrEqual(10)
-  })
-
-  test('Root graph node IDs are preserved as canonical', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const rootIds = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      return graph._nodes
-        .map((n) => n.id)
-        .filter((id): id is number => typeof id === 'number')
-        .sort((a, b) => a - b)
-    })
-
-    expect(rootIds).toEqual([1, 2, 5])
-  })
-
-  test('All links reference valid nodes in their graph', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const invalidLinks = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      const labeledGraphs: [string, typeof graph][] = [
-        ['root', graph],
-        ...[...graph.subgraphs.entries()].map(
-          ([id, sg]) => [`subgraph:${id}`, sg] as [string, typeof graph]
-        )
-      ]
-
-      const isNonNegative = (id: number | string) =>
-        typeof id === 'number' && id >= 0
-
-      return labeledGraphs.flatMap(([label, g]) =>
-        [...g._links.values()].flatMap((link) =>
-          [
-            isNonNegative(link.origin_id) &&
-              !g._nodes_by_id[link.origin_id] &&
-              `${label}: origin_id ${link.origin_id} not found`,
-            isNonNegative(link.target_id) &&
-              !g._nodes_by_id[link.target_id] &&
-              `${label}: target_id ${link.target_id} not found`
-          ].filter(Boolean)
-        )
-      )
-    })
-
-    expect(invalidLinks).toEqual([])
-  })
-
-  test('Subgraph navigation works after ID remapping', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
-    await subgraphNode.navigateIntoSubgraph()
-
-    const isInSubgraph = () =>
-      comfyPage.page.evaluate(
-        () => window.app!.canvas.graph?.isRootGraph === false
-      )
-
-    expect(await isInSubgraph()).toBe(true)
-
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.nextFrame()
-
-    expect(await isInSubgraph()).toBe(false)
-  })
-})

browser_tests/tests/subgraph.spec.ts

@@ -61,10 +61,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
 
       const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
-        'VAEEncode',
-        true
-      )
+      const vaeEncodeNode = await comfyPage.nodeOps.getNodeRefById('2')
 
       await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
@@ -80,10 +77,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
 
       const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
-        'VAEEncode',
-        true
-      )
+      const vaeEncodeNode = await comfyPage.nodeOps.getNodeRefById('2')
 
       await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
@@ -826,7 +820,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       // Open settings dialog using hotkey
       await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
+      await comfyPage.page.waitForSelector('.settings-container', {
         state: 'visible'
       })
 
@@ -836,7 +830,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       // Dialog should be closed
       await expect(
-        comfyPage.page.locator('[data-testid="settings-dialog"]')
+        comfyPage.page.locator('.settings-container')
       ).not.toBeVisible()
 
       // Should still be in subgraph

browser_tests/tests/useSettingSearch.spec.ts

@@ -22,6 +22,7 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
         name: 'TestSettingsExtension',
         settings: [
           {
+            // Extensions can register arbitrary setting IDs
             id: 'TestHiddenSetting' as TestSettingId,
             name: 'Test Hidden Setting',
             type: 'hidden',
@@ -29,6 +30,7 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
             category: ['Test', 'Hidden']
           },
           {
+            // Extensions can register arbitrary setting IDs
             id: 'TestDeprecatedSetting' as TestSettingId,
             name: 'Test Deprecated Setting',
             type: 'text',
@@ -37,6 +39,7 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
             category: ['Test', 'Deprecated']
           },
           {
+            // Extensions can register arbitrary setting IDs
             id: 'TestVisibleSetting' as TestSettingId,
             name: 'Test Visible Setting',
             type: 'text',
@@ -49,143 +52,238 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
   })
 
   test('can open settings dialog and use search box', async ({ comfyPage }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await expect(dialog.searchBox).toHaveAttribute(
+    // Find the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await expect(searchBox).toBeVisible()
+
+    // Verify search box has the correct placeholder
+    await expect(searchBox).toHaveAttribute(
       'placeholder',
       expect.stringContaining('Search')
     )
   })
 
   test('search box is functional and accepts input', async ({ comfyPage }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await dialog.searchBox.fill('Comfy')
-    await expect(dialog.searchBox).toHaveValue('Comfy')
+    // Find and interact with the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Comfy')
+
+    // Verify the input was accepted
+    await expect(searchBox).toHaveValue('Comfy')
   })
 
   test('search box clears properly', async ({ comfyPage }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await dialog.searchBox.fill('test')
-    await expect(dialog.searchBox).toHaveValue('test')
+    // Find and interact with the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('test')
+    await expect(searchBox).toHaveValue('test')
 
-    await dialog.searchBox.clear()
-    await expect(dialog.searchBox).toHaveValue('')
+    // Clear the search box
+    await searchBox.clear()
+    await expect(searchBox).toHaveValue('')
   })
 
   test('settings categories are visible in sidebar', async ({ comfyPage }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    expect(await dialog.categories.count()).toBeGreaterThan(0)
+    // Check that the sidebar has categories
+    const categories = comfyPage.page.locator(
+      '.settings-sidebar .p-listbox-option'
+    )
+    expect(await categories.count()).toBeGreaterThan(0)
+
+    // Check that at least one category is visible
+    await expect(categories.first()).toBeVisible()
   })
 
   test('can select different categories in sidebar', async ({ comfyPage }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    const categoryCount = await dialog.categories.count()
+    // Click on a specific category (Appearance) to verify category switching
+    const appearanceCategory = comfyPage.page.getByRole('option', {
+      name: 'Appearance'
+    })
+    await appearanceCategory.click()
 
-    if (categoryCount > 1) {
-      await dialog.categories.nth(1).click()
+    // Verify the category is selected
+    await expect(appearanceCategory).toHaveClass(/p-listbox-option-selected/)
+  })
 
-      await expect(dialog.categories.nth(1)).toHaveClass(
-        /bg-interface-menu-component-surface-selected/
-      )
-    }
+  test('settings content area is visible', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Check that the content area is visible
+    const contentArea = comfyPage.page.locator('.settings-content')
+    await expect(contentArea).toBeVisible()
+
+    // Check that tab panels are visible
+    const tabPanels = comfyPage.page.locator('.settings-tab-panels')
+    await expect(tabPanels).toBeVisible()
   })
 
   test('search functionality affects UI state', async ({ comfyPage }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await dialog.searchBox.fill('graph')
-    await expect(dialog.searchBox).toHaveValue('graph')
+    // Find the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+
+    // Type in search box
+    await searchBox.fill('graph')
+
+    // Verify that the search input is handled
+    await expect(searchBox).toHaveValue('graph')
   })
 
   test('settings dialog can be closed', async ({ comfyPage }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
+    // Close with escape key
     await comfyPage.page.keyboard.press('Escape')
-    await expect(dialog.root).not.toBeVisible()
+
+    // Verify dialog is closed
+    await expect(settingsDialog).not.toBeVisible()
   })
 
   test('search box has proper debouncing behavior', async ({ comfyPage }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await dialog.searchBox.fill('a')
-    await dialog.searchBox.fill('ab')
-    await dialog.searchBox.fill('abc')
-    await dialog.searchBox.fill('abcd')
+    // Type rapidly in search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('a')
+    await searchBox.fill('ab')
+    await searchBox.fill('abc')
+    await searchBox.fill('abcd')
 
-    await expect(dialog.searchBox).toHaveValue('abcd')
+    // Verify final value
+    await expect(searchBox).toHaveValue('abcd')
   })
 
   test('search excludes hidden settings from results', async ({
     comfyPage
   }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await dialog.searchBox.fill('Test')
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
 
-    await expect(dialog.contentArea).toContainText('Test Visible Setting')
-    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should show visible setting but not hidden setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
   })
 
   test('search excludes deprecated settings from results', async ({
     comfyPage
   }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await dialog.searchBox.fill('Test')
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
 
-    await expect(dialog.contentArea).toContainText('Test Visible Setting')
-    await expect(dialog.contentArea).not.toContainText(
-      'Test Deprecated Setting'
-    )
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should show visible setting but not deprecated setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
   })
 
   test('search shows visible settings but excludes hidden and deprecated', async ({
     comfyPage
   }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await dialog.searchBox.fill('Test')
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
 
-    await expect(dialog.contentArea).toContainText('Test Visible Setting')
-    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
-    await expect(dialog.contentArea).not.toContainText(
-      'Test Deprecated Setting'
-    )
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should only show the visible setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+
+    // Should not show hidden or deprecated settings
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
   })
 
   test('search by setting name excludes hidden and deprecated', async ({
     comfyPage
   }) => {
-    const dialog = comfyPage.settingDialog
-    await dialog.open()
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
 
-    await dialog.searchBox.clear()
-    await dialog.searchBox.fill('Hidden')
-    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
 
-    await dialog.searchBox.clear()
-    await dialog.searchBox.fill('Deprecated')
-    await expect(dialog.contentArea).not.toContainText(
-      'Test Deprecated Setting'
-    )
+    // Search specifically for hidden setting by name
+    await searchBox.clear()
+    await searchBox.fill('Hidden')
 
-    await dialog.searchBox.clear()
-    await dialog.searchBox.fill('Visible')
-    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    // Should not show the hidden setting even when searching by name
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+
+    // Search specifically for deprecated setting by name
+    await searchBox.clear()
+    await searchBox.fill('Deprecated')
+
+    // Should not show the deprecated setting even when searching by name
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+
+    // Search for visible setting by name - should work
+    await searchBox.clear()
+    await searchBox.fill('Visible')
+
+    // Should show the visible setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
   })
 })

components.json

@@ -3,6 +3,7 @@
   "style": "new-york",
   "typescript": true,
   "tailwind": {
+    "config": "tailwind.config.ts",
     "css": "src/assets/css/style.css",
     "baseColor": "stone",
     "cssVariables": true,

global.d.ts

@@ -5,11 +5,6 @@ declare const __ALGOLIA_APP_ID__: string
 declare const __ALGOLIA_API_KEY__: string
 declare const __USE_PROD_CONFIG__: boolean
 
-interface ImpactQueueFunction {
-  (...args: unknown[]): void
-  a?: unknown[][]
-}
-
 interface Window {
   __CONFIG__: {
     gtm_container_id?: string
@@ -42,8 +37,6 @@ interface Window {
     session_number?: string
   }
   dataLayer?: Array<Record<string, unknown>>
-  ire_o?: string
-  ire?: ImpactQueueFunction
 }
 
 interface Navigator {

index.html

@@ -35,6 +35,18 @@
         background-size: cover;
         background-repeat: no-repeat;
       }
+      #vue-app:has(#loading-logo) {
+        display: contents;
+        color: var(--fg-color);
+        & #loading-logo {
+          place-self: center;
+          font-size: clamp(2px, 1vw, 6px);
+          line-height: 1;
+          overflow: hidden;
+          max-width: 100vw;
+          border-radius: 20ch;
+        }
+      }
       .visually-hidden {
         position: absolute;
         width: 1px;
@@ -53,6 +65,36 @@
   <body class="litegraph grid">
     <div id="vue-app">
       <span class="visually-hidden" role="status">Loading ComfyUI...</span>
+      <svg
+        width="520"
+        height="520"
+        viewBox="0 0 520 520"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        id="loading-logo"
+      >
+        <mask
+          id="mask0_227_285"
+          style="mask-type: alpha"
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="520"
+          height="520"
+        >
+          <path
+            d="M0 184.335C0 119.812 0 87.5502 12.5571 62.9055C23.6026 41.2274 41.2274 23.6026 62.9055 12.5571C87.5502 0 119.812 0 184.335 0H335.665C400.188 0 432.45 0 457.094 12.5571C478.773 23.6026 496.397 41.2274 507.443 62.9055C520 87.5502 520 119.812 520 184.335V335.665C520 400.188 520 432.45 507.443 457.094C496.397 478.773 478.773 496.397 457.094 507.443C432.45 520 400.188 520 335.665 520H184.335C119.812 520 87.5502 520 62.9055 507.443C41.2274 496.397 23.6026 478.773 12.5571 457.094C0 432.45 0 400.188 0 335.665V184.335Z"
+            fill="#EEFF30"
+          />
+        </mask>
+        <g mask="url(#mask0_227_285)">
+          <rect y="0.751831" width="520" height="520" fill="#172DD7" />
+          <path
+            d="M176.484 428.831C168.649 428.831 162.327 425.919 158.204 420.412C153.966 414.755 152.861 406.857 155.171 398.749L164.447 366.178C165.187 363.585 164.672 360.794 163.059 358.636C161.446 356.483 158.921 355.216 156.241 355.216H129.571C121.731 355.216 115.409 352.308 111.289 346.802C107.051 341.14 105.946 333.242 108.258 325.134L140.124 213.748L143.642 201.51C148.371 184.904 165.62 171.407 182.097 171.407H214.009C217.817 171.407 221.167 168.868 222.215 165.183L232.769 128.135C237.494 111.545 254.742 98.048 271.219 98.048L339.468 97.9264L389.431 97.9221C397.268 97.9221 403.59 100.831 407.711 106.337C411.949 111.994 413.054 119.892 410.744 128L396.457 178.164C391.734 194.75 374.485 208.242 358.009 208.242L289.607 208.372H257.706C253.902 208.372 250.557 210.907 249.502 214.588L222.903 307.495C222.159 310.093 222.673 312.892 224.291 315.049C225.904 317.202 228.428 318.469 231.107 318.469C231.113 318.469 276.307 318.381 276.307 318.381H326.122C333.959 318.381 340.281 321.29 344.402 326.796C348.639 332.457 349.744 340.355 347.433 348.463L333.146 398.619C328.423 415.209 311.174 428.701 294.698 428.701L226.299 428.831H176.484Z"
+            fill="#F0FF41"
+          />
+        </g>
+      </svg>
     </div>
     <script type="module" src="src/main.ts"></script>
   </body>

knip.config.ts

@@ -8,13 +8,22 @@ const config: KnipConfig = {
         'src/assets/css/style.css',
         'src/main.ts',
         'src/scripts/ui/menu/index.ts',
-        'src/types/index.ts'
+        'src/types/index.ts',
+        'src/storybook/mocks/**/*.ts'
       ],
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
     },
+    'apps/desktop-ui': {
+      entry: ['src/main.ts', 'src/i18n.ts'],
+      project: ['src/**/*.{js,ts,vue}']
+    },
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
+    'packages/design-system': {
+      entry: ['src/**/*.ts'],
+      project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
+    },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     }
@@ -26,45 +35,14 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Unused but kept for potential future use
-    '@sparkjsdev/spark',
-    'wwobjloader2',
-    '@iconify-json/lucide',
-    'yjs'
+    '@primevue/icons'
   ],
   ignore: [
     // Auto generated manager types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'packages/registry-types/src/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
-    '.pages/vite.config.ts',
-    // Utility files with exports that may be used by extensions or future features
-    'src/constants/uvMirrors.ts',
-    'src/lib/litegraph/src/measure.ts',
-    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts',
-    'src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts',
-    'src/utils/electronMirrorCheck.ts',
-    'src/renderer/extensions/vueNodes/composables/slotLinkDragContext.ts',
-    'src/types/spatialIndex.ts',
-    'src/lib/litegraph/src/litegraph.ts',
-    'src/utils/vintageClipboard.ts',
-    'src/platform/auth/session/useSessionCookie.ts',
-    'src/platform/support/config.ts',
-    'src/renderer/utils/nodeTypeGuards.ts',
-    'src/schemas/nodeDefSchema.ts',
-    'src/scripts/defaultGraph.ts',
-    'src/scripts/ui.ts',
-    'src/scripts/widgets.ts',
-    'src/services/litegraphService.ts',
-    'src/storybook/mocks/useJobActions.ts',
-    'src/storybook/mocks/useJobList.ts',
-    'src/utils/executableGroupNodeDto.ts',
-    'src/utils/litegraphUtil.ts',
-    'src/lib/litegraph/src/LGraph.ts',
-    'src/schemas/apiSchema.ts',
-    'src/schemas/nodeDef/nodeDefSchemaV2.ts'
+    'src/scripts/ui/components/splitButton.ts'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.40.0",
+  "version": "1.39.8",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -18,7 +18,7 @@
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' nx serve",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
-    "dev:electron": "cross-env DISTRIBUTION=desktop nx serve --config vite.electron.config.mts",
+    "dev:electron": "nx serve --config vite.electron.config.mts",
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
@@ -36,8 +36,6 @@
     "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
     "locale": "lobe-i18n locale",
     "oxlint": "oxlint src --type-aware",
-    "pages:build": "bash scripts/build-pages.sh && vite build --config ./.pages/vite.config.ts && cp -r .pages/nx-graph .pages-dist/nx-graph 2>/dev/null || true",
-    "pages:dev": "vite --config ./.pages/vite.config.ts",
     "preinstall": "pnpm dlx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
@@ -195,7 +193,7 @@
   },
   "pnpm": {
     "overrides": {
-      "vite": "catalog:"
+      "vite": "^8.0.0-beta.8"
     }
   }
 }

packages/design-system/package.json

@@ -4,6 +4,7 @@
   "description": "Shared design system for ComfyUI Frontend",
   "type": "module",
   "exports": {
+    "./tailwind-config": "./tailwind.config.ts",
     "./css/*": "./src/css/*"
   },
   "scripts": {
@@ -11,7 +12,7 @@
   },
   "dependencies": {
     "@iconify-json/lucide": "catalog:",
-    "@iconify/tailwind4": "catalog:"
+    "@iconify/tailwind": "catalog:"
   },
   "devDependencies": {
     "tailwindcss": "catalog:",

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

@@ -7,16 +7,11 @@
 
 @plugin 'tailwindcss-primeui';
 
-@plugin "@iconify/tailwind4" {
-  scale: 1.2;
-  icon-sets: from-folder(comfy, './packages/design-system/src/icons');
-}
+@config '../../tailwind.config.ts';
 
 @custom-variant touch (@media (hover: none));
 
 @theme {
-  --shadow-interface: var(--interface-panel-box-shadow);
-
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 

packages/design-system/src/iconCollection.ts

@@ -0,0 +1,100 @@
+import { existsSync, readFileSync, readdirSync } from 'fs'
+import { join } from 'path'
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const fileName = fileURLToPath(import.meta.url)
+const dirName = dirname(fileName)
+const customIconsPath = join(dirName, 'icons')
+
+// Iconify collection structure
+interface IconifyIcon {
+  body: string
+  width?: number
+  height?: number
+}
+
+interface IconifyCollection {
+  prefix: string
+  icons: Record<string, IconifyIcon>
+  width?: number
+  height?: number
+}
+
+// Create an Iconify collection for custom icons
+export const iconCollection: IconifyCollection = {
+  prefix: 'comfy',
+  icons: {},
+  width: 16,
+  height: 16
+}
+
+/**
+ * Validates that an SVG file contains valid SVG content
+ */
+function validateSvgContent(content: string, filename: string): void {
+  if (!content.trim()) {
+    throw new Error(`Empty SVG file: ${filename}`)
+  }
+
+  if (!content.includes('<svg')) {
+    throw new Error(`Invalid SVG file (missing <svg> tag): ${filename}`)
+  }
+
+  // Basic XML structure validation
+  const openTags = (content.match(/<svg[^>]*>/g) || []).length
+  const closeTags = (content.match(/<\/svg>/g) || []).length
+
+  if (openTags !== closeTags) {
+    throw new Error(`Malformed SVG file (mismatched svg tags): ${filename}`)
+  }
+}
+
+/**
+ * Loads custom SVG icons from the icons directory
+ */
+function loadCustomIcons(): void {
+  if (!existsSync(customIconsPath)) {
+    console.warn(`Custom icons directory not found: ${customIconsPath}`)
+    return
+  }
+
+  try {
+    const files = readdirSync(customIconsPath)
+    const svgFiles = files.filter((file) => file.endsWith('.svg'))
+
+    if (svgFiles.length === 0) {
+      console.warn('No SVG files found in custom icons directory')
+      return
+    }
+
+    svgFiles.forEach((file) => {
+      const name = file.replace('.svg', '')
+      const filePath = join(customIconsPath, file)
+
+      try {
+        const content = readFileSync(filePath, 'utf-8')
+        validateSvgContent(content, file)
+
+        iconCollection.icons[name] = {
+          body: content
+        }
+      } catch (error) {
+        console.error(
+          `Failed to load custom icon ${file}:`,
+          error instanceof Error ? error.message : error
+        )
+        // Continue loading other icons instead of failing the entire build
+      }
+    })
+  } catch (error) {
+    console.error(
+      'Failed to read custom icons directory:',
+      error instanceof Error ? error.message : error
+    )
+    // Don't throw here - allow build to continue without custom icons
+  }
+}
+
+// Load icons when this module is imported
+loadCustomIcons()

packages/design-system/src/icons/README.md

@@ -251,25 +251,26 @@ Icons are automatically imported using `unplugin-icons` - no manual imports need
 
 The icon system has two layers:
 
-1. **Tailwind CSS Plugin** (`@iconify/tailwind4`):
-   - Configured via `@plugin` directive in `packages/design-system/src/css/style.css`
-   - Uses `from-folder(comfy, ...)` to load SVGs from `packages/design-system/src/icons/`
-   - Auto-cleans and optimizes SVGs at build time
+1. **Build-time Processing** (`packages/design-system/src/iconCollection.ts`):
+   - Scans `packages/design-system/src/icons/` for SVG files
+   - Validates SVG content and structure
+   - Creates Iconify collection for Tailwind CSS
+   - Provides error handling for malformed files
 
 2. **Vite Runtime** (`vite.config.mts`):
    - Enables direct SVG import as Vue components
    - Supports dynamic icon loading
 
-```css
-/* CSS configuration for Tailwind icon classes */
-@plugin "@iconify/tailwind4" {
-  prefix: 'icon';
-  scale: 1.2;
-  icon-sets: from-folder(comfy, './packages/design-system/src/icons');
-}
-```
-
 ```typescript
+// Build script creates Iconify collection
+export const iconCollection: IconifyCollection = {
+  prefix: 'comfy',
+  icons: {
+    workflow: { body: '<svg>...</svg>' },
+    node: { body: '<svg>...</svg>' }
+  }
+}
+
 // Vite configuration for component-based usage
 Icons({
   compiler: 'vue3',

packages/design-system/src/icons/comfy-c.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 9">
-  <path d="M1.82148 8.68376C1.61587 8.68376 1.44996 8.60733 1.34177 8.46284C1.23057 8.31438 1.20157 8.10711 1.26219 7.89434L1.50561 7.03961C1.52502 6.97155 1.51151 6.89831 1.46918 6.8417C1.42684 6.7852 1.3606 6.75194 1.29025 6.75194H0.590376C0.384656 6.75194 0.21875 6.67562 0.110614 6.53113C-0.000591531 6.38256 -0.0295831 6.17529 0.0310774 5.96252L0.867308 3.03952L0.959638 2.71838C1.08375 2.28258 1.53638 1.9284 1.96878 1.9284H2.80622C2.90615 1.9284 2.99406 1.86177 3.02157 1.76508L3.29852 0.79284C3.4225 0.357484 3.87514 0.0033043 4.30753 0.0033043L6.09854 0.000112775L7.40967 0C7.61533 0 7.78124 0.0763259 7.88937 0.220813C8.00058 0.369269 8.02957 0.576538 7.96895 0.78931L7.59405 2.10572C7.4701 2.54096 7.01746 2.89503 6.58507 2.89503L4.79008 2.89844H3.95292C3.8531 2.89844 3.7653 2.96496 3.73762 3.06155L3.03961 5.49964C3.02008 5.56781 3.03359 5.64127 3.07604 5.69787C3.11837 5.75437 3.18461 5.78763 3.2549 5.78763C3.25507 5.78763 4.44105 5.78532 4.44105 5.78532H5.7483C5.95396 5.78532 6.11986 5.86164 6.228 6.00613C6.33921 6.1547 6.3682 6.36197 6.30754 6.57474L5.93263 7.89092C5.80869 8.32628 5.35605 8.68034 4.92366 8.68034L3.12872 8.68376H1.82148Z" fill="#8A8A8A"/>
-</svg>
-

packages/design-system/tailwind.config.ts

@@ -0,0 +1,24 @@
+import lucide from '@iconify-json/lucide/icons.json' with { type: 'json' }
+import { addDynamicIconSelectors } from '@iconify/tailwind'
+
+import { iconCollection } from './src/iconCollection'
+
+export default {
+  theme: {
+    extend: {
+      boxShadow: {
+        interface: 'var(--interface-panel-box-shadow)'
+      }
+    }
+  },
+  plugins: [
+    addDynamicIconSelectors({
+      iconSets: {
+        comfy: iconCollection,
+        lucide
+      },
+      scale: 1.2,
+      prefix: 'icon'
+    })
+  ]
+}

pnpm-workspace.yaml

@@ -8,7 +8,7 @@ catalog:
   '@eslint/js': ^9.39.1
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
-  '@iconify/tailwind4': ^1.2.0
+  '@iconify/tailwind': ^1.1.3
   '@intlify/eslint-plugin-vue-i18n': ^4.1.0
   '@lobehub/i18n-cli': ^1.25.1
   '@nx/eslint': 22.2.6
@@ -92,7 +92,7 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
-  vite: 8.0.0-beta.13
+  vite: ^8.0.0-beta.8
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0

scripts/build-pages.sh

@@ -1,152 +0,0 @@
-#!/usr/bin/env bash
-set -Eeo pipefail
-
-ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
-cd "$ROOT_DIR"
-
-echo "======================================================================"
-echo "Building Branch Status Pages"
-echo "======================================================================"
-echo ""
-
-# Helper function to create placeholder HTML
-create_placeholder() {
-  local dir="$1"
-  local title="$2"
-  local message="$3"
-
-  mkdir -p "$dir"
-  cat > "$dir/index.html" <<EOF
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>$title</title>
-  <style>
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 100vh;
-      margin: 0;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-    }
-    .container {
-      text-align: center;
-      padding: 2rem;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 1rem;
-      backdrop-filter: blur(10px);
-      max-width: 600px;
-    }
-    h1 { margin-top: 0; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>$title</h1>
-    <p>$message</p>
-  </div>
-</body>
-</html>
-EOF
-}
-
-# ============================================================================
-# Storybook (deployed separately to Cloudflare Pages)
-# ============================================================================
-echo "[build-pages] Setting up Storybook"
-rm -rf ".pages/storybook"
-
-if [ -d "./storybook-static" ] && [ "$(find ./storybook-static -name '*.html' 2>/dev/null | wc -l)" -gt 0 ]; then
-  echo "  Using local Storybook build"
-  cp -r "./storybook-static" ".pages/storybook"
-else
-  echo "  Creating placeholder (Storybook deployed separately to comfy-storybook.pages.dev)"
-  create_placeholder ".pages/storybook" "Storybook" \
-    "Storybook is deployed separately. Check the PR comments for the Cloudflare Pages link."
-fi
-
-# ============================================================================
-# Nx Dependency Graph
-# ============================================================================
-echo "[build-pages] Generating Nx dependency graph"
-rm -rf ".pages/nx-graph" && mkdir -p ".pages/nx-graph"
-
-if pnpm nx graph --file=".pages/nx-graph/index.html" 2>/dev/null; then
-  echo "  Nx graph generated"
-else
-  echo "  Nx graph generation failed, creating placeholder"
-  create_placeholder ".pages/nx-graph" "Nx Dependency Graph" \
-    "Graph generation is not available in this environment."
-fi
-
-# ============================================================================
-# Playwright E2E Test Reports (deployed separately to Cloudflare Pages)
-# ============================================================================
-echo "[build-pages] Setting up Playwright test reports"
-rm -rf ".pages/playwright-reports" && mkdir -p ".pages/playwright-reports"
-
-if [ -d "./playwright-report" ] && [ "$(find ./playwright-report -name '*.html' 2>/dev/null | wc -l)" -gt 0 ]; then
-  echo "  Using local Playwright reports"
-  cp -r "./playwright-report/"* ".pages/playwright-reports/" 2>/dev/null || true
-else
-  echo "  Creating placeholder (Playwright reports deployed separately)"
-  create_placeholder ".pages/playwright-reports" "E2E Test Reports" \
-    "Playwright reports are deployed separately. Check the PR comments for Cloudflare Pages links."
-fi
-
-# ============================================================================
-# Vitest Test Reports
-# ============================================================================
-echo "[build-pages] Setting up Vitest test reports"
-rm -rf ".pages/vitest-reports" && mkdir -p ".pages/vitest-reports"
-
-create_placeholder ".pages/vitest-reports" "Vitest Test Reports" \
-  "Unit test results are available in CI. Check the GitHub Actions workflow run."
-
-# ============================================================================
-# Coverage Report
-# ============================================================================
-echo "[build-pages] Setting up coverage report"
-mkdir -p ".pages/coverage"
-
-create_placeholder ".pages/coverage" "Coverage Report" \
-  "Code coverage is generated in CI. Check the GitHub Actions workflow run."
-
-# ============================================================================
-# Knip Report (Fast - generate fresh)
-# ============================================================================
-echo "[build-pages] Generating Knip report"
-mkdir -p ".pages/knip"
-rm -f ".pages/knip/report.md"
-
-if pnpm knip --reporter markdown --no-progress --no-exit-code > ".pages/knip/report.md" 2>/dev/null && [ -s ".pages/knip/report.md" ]; then
-  echo "  Knip report generated"
-else
-  echo "  Knip report failed, creating placeholder"
-  cat > ".pages/knip/report.md" <<'EOF'
-# Knip Report
-
-> Knip report generation failed
-
-Knip analysis could not be completed in this build environment.
-Please check the CI logs for details.
-EOF
-fi
-
-# ============================================================================
-# Summary
-# ============================================================================
-echo ""
-echo "======================================================================"
-echo "Build Complete"
-echo "======================================================================"
-echo ""
-echo "Generated artifacts in ./.pages:"
-echo ""
-ls -lh ".pages" 2>/dev/null | tail -n +2 | awk '{print "  " $9}'
-echo ""

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

@@ -283,27 +283,34 @@ else
     done
     unset IFS
     
-    # Determine overall status (flaky tests are treated as passing)
+    # Determine overall status
     if [ $total_failed -gt 0 ]; then
         status_icon="❌"
+        status_text="Failed"
+    elif [ $total_flaky -gt 0 ]; then
+        status_icon="⚠️"
+        status_text="Passed with flaky tests"
     elif [ $total_tests -gt 0 ]; then
         status_icon="✅"
+        status_text="Passed"
     else
         status_icon="🕵🏻"
+        status_text="No test results"
     fi
     
-    # Build flaky indicator if any (small subtext, no warning icon)
-    flaky_note=""
-    if [ $total_flaky -gt 0 ]; then
-        flaky_note=" · $total_flaky flaky"
-    fi
-    
-    # Generate compact single-line comment
+    # Generate concise completion comment
     comment="$COMMENT_MARKER
-**Playwright:** $status_icon $total_passed passed, $total_failed failed$flaky_note"
+## 🎭 Playwright Tests: $status_icon **$status_text**"
 
-    # Extract and display failed tests from all browsers (flaky tests are treated as passing)
-    if [ $total_failed -gt 0 ]; then
+    # Add summary counts if we have test data
+    if [ $total_tests -gt 0 ]; then
+        comment="$comment
+
+**Results:** $total_passed passed, $total_failed failed, $total_flaky flaky, $total_skipped skipped (Total: $total_tests)"
+    fi
+
+    # Extract and display failed tests from all browsers
+    if [ $total_failed -gt 0 ] || [ $total_flaky -gt 0 ]; then
         comment="$comment
 
 ### ❌ Failed Tests"

scripts/create-playwright-index.js

@@ -1,290 +0,0 @@
-#!/usr/bin/env node
-/**
- * Creates an index page for Playwright test reports with test statistics
- * Reads JSON reports from each browser and creates a landing page with cards
- */
-import fs from 'fs'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-const reportsDir = path.join(__dirname, '..', '.pages', 'playwright-reports')
-
-function getTestStats(reportPath) {
-  try {
-    const reportJsonPath = path.join(reportPath, 'report.json')
-    if (!fs.existsSync(reportJsonPath)) {
-      console.warn(`No report.json found at ${reportJsonPath}`)
-      return null
-    }
-
-    const reportData = JSON.parse(fs.readFileSync(reportJsonPath, 'utf-8'))
-
-    let passed = 0
-    let failed = 0
-    let skipped = 0
-    let flaky = 0
-
-    // Parse Playwright JSON report format
-    if (reportData.suites) {
-      const countResults = (suites) => {
-        for (const suite of suites) {
-          if (suite.specs) {
-            for (const spec of suite.specs) {
-              if (!spec.tests || spec.tests.length === 0) continue
-
-              const test = spec.tests[0]
-              const results = test.results || []
-
-              // Check if test is flaky (has both pass and fail results)
-              const hasPass = results.some((r) => r.status === 'passed')
-              const hasFail = results.some((r) => r.status === 'failed')
-
-              if (hasPass && hasFail) {
-                flaky++
-              } else if (results.some((r) => r.status === 'passed')) {
-                passed++
-              } else if (results.some((r) => r.status === 'failed')) {
-                failed++
-              } else if (results.some((r) => r.status === 'skipped')) {
-                skipped++
-              }
-            }
-          }
-          if (suite.suites) {
-            countResults(suite.suites)
-          }
-        }
-      }
-
-      countResults(reportData.suites)
-    }
-
-    return { passed, failed, skipped, flaky }
-  } catch (error) {
-    console.error(`Error reading report at ${reportPath}:`, error.message)
-    return null
-  }
-}
-
-function generateIndexHtml(browsers) {
-  const cards = browsers
-    .map((browser) => {
-      const { name, stats } = browser
-      if (!stats) return ''
-
-      const total = stats.passed + stats.failed + stats.skipped + stats.flaky
-      const passRate = total > 0 ? ((stats.passed / total) * 100).toFixed(1) : 0
-
-      return `
-      <a href="./${name}/index.html" class="card">
-        <div class="card-header">
-          <h2>${name}</h2>
-          <span class="pass-rate ${stats.failed > 0 ? 'has-failures' : ''}">${passRate}%</span>
-        </div>
-        <div class="stats">
-          <div class="stat passed">
-            <span class="label">Passed</span>
-            <span class="value">${stats.passed}</span>
-          </div>
-          <div class="stat failed">
-            <span class="label">Failed</span>
-            <span class="value">${stats.failed}</span>
-          </div>
-          <div class="stat skipped">
-            <span class="label">Skipped</span>
-            <span class="value">${stats.skipped}</span>
-          </div>
-          <div class="stat flaky">
-            <span class="label">Flaky</span>
-            <span class="value">${stats.flaky}</span>
-          </div>
-        </div>
-      </a>
-    `
-    })
-    .join('')
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Playwright E2E Test Reports</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-      padding: 2rem;
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-
-    h1 {
-      color: white;
-      text-align: center;
-      margin-bottom: 3rem;
-      font-size: 2.5rem;
-      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-    }
-
-    .cards-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 1.5rem;
-    }
-
-    .card {
-      background: white;
-      border-radius: 12px;
-      padding: 1.5rem;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-      transition: transform 0.2s, box-shadow 0.2s;
-      text-decoration: none;
-      color: inherit;
-      display: block;
-    }
-
-    .card:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
-    }
-
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
-      padding-bottom: 1rem;
-      border-bottom: 2px solid #f0f0f0;
-    }
-
-    .card h2 {
-      color: #333;
-      font-size: 1.5rem;
-      text-transform: capitalize;
-    }
-
-    .pass-rate {
-      background: #10b981;
-      color: white;
-      padding: 0.5rem 1rem;
-      border-radius: 20px;
-      font-weight: bold;
-      font-size: 1.1rem;
-    }
-
-    .pass-rate.has-failures {
-      background: #ef4444;
-    }
-
-    .stats {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-
-    .stat {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-    }
-
-    .stat .label {
-      font-size: 0.875rem;
-      color: #666;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .stat .value {
-      font-size: 1.75rem;
-      font-weight: bold;
-    }
-
-    .stat.passed .value {
-      color: #10b981;
-    }
-
-    .stat.failed .value {
-      color: #ef4444;
-    }
-
-    .stat.skipped .value {
-      color: #f59e0b;
-    }
-
-    .stat.flaky .value {
-      color: #8b5cf6;
-    }
-
-    @media (max-width: 768px) {
-      h1 {
-        font-size: 2rem;
-      }
-
-      .cards-grid {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>🎭 Playwright E2E Test Reports</h1>
-    <div class="cards-grid">
-      ${cards}
-    </div>
-  </div>
-</body>
-</html>`
-}
-
-function main() {
-  if (!fs.existsSync(reportsDir)) {
-    console.log(
-      'No playwright reports directory found, skipping index creation'
-    )
-    return
-  }
-
-  const browsers = []
-  const browserDirs = fs.readdirSync(reportsDir, { withFileTypes: true })
-
-  for (const dirent of browserDirs) {
-    if (dirent.isDirectory()) {
-      const browserName = dirent.name
-      const browserPath = path.join(reportsDir, browserName)
-      const stats = getTestStats(browserPath)
-
-      if (stats) {
-        browsers.push({ name: browserName, stats })
-        console.log(`✓ Found report for ${browserName}:`, stats)
-      }
-    }
-  }
-
-  if (browsers.length === 0) {
-    console.warn('No valid browser reports found')
-    return
-  }
-
-  const html = generateIndexHtml(browsers)
-  const indexPath = path.join(reportsDir, 'index.html')
-
-  fs.writeFileSync(indexPath, html, 'utf-8')
-  console.log(`✓ Created index page at ${indexPath}`)
-}
-
-main()

src/App.vue

@@ -19,8 +19,7 @@ import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-import { electronAPI } from '@/utils/envUtil'
-import { isDesktop } from '@/platform/distribution/types'
+import { electronAPI, isElectron } from './utils/envUtil'
 import { app } from '@/scripts/app'
 
 const workspaceStore = useWorkspaceStore()
@@ -43,7 +42,7 @@ const showContextMenu = (event: MouseEvent) => {
 onMounted(() => {
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
-  if (isDesktop) {
+  if (isElectron()) {
     document.addEventListener('contextmenu', showContextMenu)
   }
 

src/base/common/downloadUtil.test.ts

@@ -1,9 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import {
-  downloadFile,
-  extractFilenameFromContentDisposition
-} from '@/base/common/downloadUtil'
+import { downloadFile } from '@/base/common/downloadUtil'
 
 let mockIsCloud = false
 
@@ -158,14 +155,10 @@ describe('downloadUtil', () => {
       const testUrl = 'https://storage.googleapis.com/bucket/file.bin'
       const blob = new Blob(['test'])
       const blobFn = vi.fn().mockResolvedValue(blob)
-      const headersMock = {
-        get: vi.fn().mockReturnValue(null)
-      }
       fetchMock.mockResolvedValue({
         ok: true,
         status: 200,
-        blob: blobFn,
-        headers: headersMock
+        blob: blobFn
       } as unknown as Response)
 
       downloadFile(testUrl)
@@ -202,147 +195,5 @@ describe('downloadUtil', () => {
       expect(createObjectURLSpy).not.toHaveBeenCalled()
       consoleSpy.mockRestore()
     })
-
-    it('uses filename from Content-Disposition header in cloud mode', async () => {
-      mockIsCloud = true
-      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
-      const blob = new Blob(['test'])
-      const blobFn = vi.fn().mockResolvedValue(blob)
-      const headersMock = {
-        get: vi.fn().mockReturnValue('attachment; filename="user-friendly.png"')
-      }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
-
-      downloadFile(testUrl)
-
-      expect(fetchMock).toHaveBeenCalledWith(testUrl)
-      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
-      await fetchPromise
-      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
-      await blobPromise
-      await Promise.resolve()
-      expect(headersMock.get).toHaveBeenCalledWith('Content-Disposition')
-      expect(mockLink.download).toBe('user-friendly.png')
-    })
-
-    it('uses RFC 5987 filename from Content-Disposition header', async () => {
-      mockIsCloud = true
-      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
-      const blob = new Blob(['test'])
-      const blobFn = vi.fn().mockResolvedValue(blob)
-      const headersMock = {
-        get: vi
-          .fn()
-          .mockReturnValue(
-            'attachment; filename="fallback.png"; filename*=UTF-8\'\'%E4%B8%AD%E6%96%87.png'
-          )
-      }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
-
-      downloadFile(testUrl)
-
-      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
-      await fetchPromise
-      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
-      await blobPromise
-      await Promise.resolve()
-      expect(mockLink.download).toBe('中文.png')
-    })
-
-    it('falls back to provided filename when Content-Disposition is missing', async () => {
-      mockIsCloud = true
-      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
-      const blob = new Blob(['test'])
-      const blobFn = vi.fn().mockResolvedValue(blob)
-      const headersMock = {
-        get: vi.fn().mockReturnValue(null)
-      }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
-
-      downloadFile(testUrl, 'my-fallback.png')
-
-      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
-      await fetchPromise
-      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
-      await blobPromise
-      await Promise.resolve()
-      expect(mockLink.download).toBe('my-fallback.png')
-    })
-  })
-
-  describe('extractFilenameFromContentDisposition', () => {
-    it('returns null for null header', () => {
-      expect(extractFilenameFromContentDisposition(null)).toBeNull()
-    })
-
-    it('returns null for empty header', () => {
-      expect(extractFilenameFromContentDisposition('')).toBeNull()
-    })
-
-    it('extracts filename from simple quoted format', () => {
-      const header = 'attachment; filename="test-file.png"'
-      expect(extractFilenameFromContentDisposition(header)).toBe(
-        'test-file.png'
-      )
-    })
-
-    it('extracts filename from unquoted format', () => {
-      const header = 'attachment; filename=test-file.png'
-      expect(extractFilenameFromContentDisposition(header)).toBe(
-        'test-file.png'
-      )
-    })
-
-    it('extracts filename from RFC 5987 format', () => {
-      const header = "attachment; filename*=UTF-8''test%20file.png"
-      expect(extractFilenameFromContentDisposition(header)).toBe(
-        'test file.png'
-      )
-    })
-
-    it('prefers RFC 5987 format over simple format', () => {
-      const header =
-        'attachment; filename="fallback.png"; filename*=UTF-8\'\'preferred.png'
-      expect(extractFilenameFromContentDisposition(header)).toBe(
-        'preferred.png'
-      )
-    })
-
-    it('handles unicode characters in RFC 5987 format', () => {
-      const header =
-        "attachment; filename*=UTF-8''%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6.png"
-      expect(extractFilenameFromContentDisposition(header)).toBe('中文文件.png')
-    })
-
-    it('falls back to simple format when RFC 5987 decoding fails', () => {
-      const header =
-        'attachment; filename="fallback.png"; filename*=UTF-8\'\'%invalid'
-      expect(extractFilenameFromContentDisposition(header)).toBe('fallback.png')
-    })
-
-    it('handles header with only attachment disposition', () => {
-      const header = 'attachment'
-      expect(extractFilenameFromContentDisposition(header)).toBeNull()
-    })
-
-    it('handles case-insensitive filename parameter', () => {
-      const header = 'attachment; FILENAME="test.png"'
-      expect(extractFilenameFromContentDisposition(header)).toBe('test.png')
-    })
   })
 })

src/base/common/downloadUtil.ts

@@ -75,57 +75,14 @@ const extractFilenameFromUrl = (url: string): string | null => {
   }
 }
 
-/**
- * Extract filename from Content-Disposition header
- * Handles both simple format: attachment; filename="name.png"
- * And RFC 5987 format: attachment; filename="fallback.png"; filename*=UTF-8''encoded%20name.png
- * @param header - The Content-Disposition header value
- * @returns The extracted filename or null if not found
- */
-export function extractFilenameFromContentDisposition(
-  header: string | null
-): string | null {
-  if (!header) return null
-
-  // Try RFC 5987 extended format first (filename*=UTF-8''...)
-  const extendedMatch = header.match(/filename\*=UTF-8''([^;]+)/i)
-  if (extendedMatch?.[1]) {
-    try {
-      return decodeURIComponent(extendedMatch[1])
-    } catch {
-      // Fall through to simple format
-    }
-  }
-
-  // Try simple quoted format: filename="..."
-  const quotedMatch = header.match(/filename="([^"]+)"/i)
-  if (quotedMatch?.[1]) {
-    return quotedMatch[1]
-  }
-
-  // Try unquoted format: filename=...
-  const unquotedMatch = header.match(/filename=([^;\s]+)/i)
-  if (unquotedMatch?.[1]) {
-    return unquotedMatch[1]
-  }
-
-  return null
-}
-
 const downloadViaBlobFetch = async (
   href: string,
-  fallbackFilename: string
+  filename: string
 ): Promise<void> => {
   const response = await fetch(href)
   if (!response.ok) {
     throw new Error(`Failed to fetch ${href}: ${response.status}`)
   }
-
-  // Try to get filename from Content-Disposition header (set by backend)
-  const contentDisposition = response.headers.get('Content-Disposition')
-  const headerFilename =
-    extractFilenameFromContentDisposition(contentDisposition)
-
   const blob = await response.blob()
-  downloadBlob(headerFilename ?? fallbackFilename, blob)
+  downloadBlob(filename, blob)
 }

src/components/TopMenuSection.test.ts

@@ -2,7 +2,7 @@ import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import type { MenuItem } from 'primevue/menuitem'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, defineComponent, h, nextTick, onMounted, ref } from 'vue'
+import { computed, defineComponent, h, nextTick, onMounted } from 'vue'
 import type { Component } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -18,12 +18,9 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isElectron } from '@/utils/envUtil'
 
-const mockData = vi.hoisted(() => ({
-  isLoggedIn: false,
-  isDesktop: false,
-  setShowConflictRedDot: (_value: boolean) => {}
-}))
+const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
 
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: () => {
@@ -33,43 +30,7 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
   }
 }))
 
-vi.mock('@/platform/distribution/types', () => ({
-  isCloud: false,
-  isNightly: false,
-  get isDesktop() {
-    return mockData.isDesktop
-  }
-}))
-
-vi.mock('@/platform/updates/common/releaseStore', () => ({
-  useReleaseStore: () => ({
-    shouldShowRedDot: computed(() => true)
-  })
-}))
-
-vi.mock(
-  '@/workbench/extensions/manager/composables/useConflictAcknowledgment',
-  () => {
-    const shouldShowConflictRedDot = ref(false)
-    mockData.setShowConflictRedDot = (value: boolean) => {
-      shouldShowConflictRedDot.value = value
-    }
-
-    return {
-      useConflictAcknowledgment: () => ({
-        shouldShowRedDot: shouldShowConflictRedDot
-      })
-    }
-  }
-)
-
-vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
-  useManagerState: () => ({
-    shouldShowManagerButtons: computed(() => true),
-    openManager: vi.fn()
-  })
-}))
-
+vi.mock('@/utils/envUtil')
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({
     currentUser: null,
@@ -146,9 +107,6 @@ describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
     localStorage.clear()
-    mockData.isDesktop = false
-    mockData.isLoggedIn = false
-    mockData.setShowConflictRedDot(false)
   })
 
   describe('authentication state', () => {
@@ -171,7 +129,7 @@ describe('TopMenuSection', () => {
 
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
-          mockData.isDesktop = true
+          vi.mocked(isElectron).mockReturnValue(true)
           const wrapper = createWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
@@ -365,16 +323,4 @@ describe('TopMenuSection', () => {
     const model = menu.props('model') as MenuItem[]
     expect(model[0]?.disabled).toBe(false)
   })
-
-  it('shows manager red dot only for manager conflicts', async () => {
-    const wrapper = createWrapper()
-
-    // Release red dot is mocked as true globally for this test file.
-    expect(wrapper.find('span.bg-red-500').exists()).toBe(false)
-
-    mockData.setShowConflictRedDot(true)
-    await nextTick()
-
-    expect(wrapper.find('span.bg-red-500').exists()).toBe(true)
-  })
 })

src/components/TopMenuSection.vue

@@ -145,6 +145,7 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -152,7 +153,7 @@ import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isDesktop } from '@/platform/distribution/types'
+import { isElectron } from '@/utils/envUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
@@ -162,6 +163,7 @@ const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
+const isDesktop = isElectron()
 const { t, n } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
@@ -172,6 +174,8 @@ const sidebarTabStore = useSidebarTabStore()
 const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
+const releaseStore = useReleaseStore()
+const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
   useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
@@ -233,8 +237,10 @@ const queueContextMenuItems = computed<MenuItem[]>(() => [
   }
 ])
 
+// Use either release red dot or conflict red dot
 const shouldShowRedDot = computed((): boolean => {
-  return shouldShowConflictRedDot.value
+  const releaseRedDot = showReleaseRedDot.value
+  return releaseRedDot || shouldShowConflictRedDot.value
 })
 
 // Right side panel toggle

src/components/bottomPanel/BottomPanel.vue

@@ -89,12 +89,12 @@ import { useI18n } from 'vue-i18n'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useDialogService } from '@/services/dialogService'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
 
 const bottomPanelStore = useBottomPanelStore()
-const settingsDialog = useSettingsDialog()
+const dialogService = useDialogService()
 const { t } = useI18n()
 
 const isShortcutsTabActive = computed(() => {
@@ -115,7 +115,7 @@ const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
 }
 
 const openKeybindingSettings = async () => {
-  settingsDialog.show('keybinding')
+  dialogService.showSettingsDialog('keybinding')
 }
 
 const closeBottomPanel = () => {

src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -55,17 +55,10 @@ vi.mock('@/composables/bottomPanelTabs/useTerminal', () => ({
 }))
 
 vi.mock('@/utils/envUtil', () => ({
+  isElectron: vi.fn(() => false),
   electronAPI: vi.fn(() => null)
 }))
 
-const mockData = vi.hoisted(() => ({ isDesktop: false }))
-
-vi.mock('@/platform/distribution/types', () => ({
-  get isDesktop() {
-    return mockData.isDesktop
-  }
-}))
-
 // Mock clipboard API
 Object.defineProperty(navigator, 'clipboard', {
   value: {

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

@@ -35,8 +35,7 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI } from '@/utils/envUtil'
-import { isDesktop } from '@/platform/distribution/types'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
@@ -86,7 +85,7 @@ const showContextMenu = (event: MouseEvent) => {
   electronAPI()?.showContextMenu({ type: 'text' })
 }
 
-if (isDesktop) {
+if (isElectron()) {
   useEventListener(terminalEl, 'contextmenu', showContextMenu)
 }
 

src/components/common/TreeExplorer.vue

@@ -12,9 +12,9 @@
       nodeContent: ({ context }) => ({
         class: 'group/tree-node',
         onClick: (e: MouseEvent) =>
-          onNodeContentClick(e, context.node as RenderedTreeExplorerNode<T>),
+          onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
         onContextmenu: (e: MouseEvent) =>
-          handleContextMenu(e, context.node as RenderedTreeExplorerNode<T>)
+          handleContextMenu(e, context.node as RenderedTreeExplorerNode)
       }),
       nodeToggleButton: () => ({
         onClick: (e: MouseEvent) => {
@@ -36,11 +36,15 @@
   </Tree>
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
-<script setup lang="ts" generic="T">
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import Tree from 'primevue/tree'
-import { computed, provide, ref, shallowRef } from 'vue'
+import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
@@ -56,10 +60,6 @@ import type {
 } from '@/types/treeExplorerTypes'
 import { combineTrees, findNodeByKey } from '@/utils/treeUtil'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const expandedKeys = defineModel<Record<string, boolean>>('expandedKeys', {
   required: true
 })
@@ -69,13 +69,13 @@ const selectionKeys = defineModel<Record<string, boolean>>('selectionKeys')
 const storeSelectionKeys = selectionKeys.value !== undefined
 
 const props = defineProps<{
-  root: TreeExplorerNode<T>
+  root: TreeExplorerNode
   class?: string
 }>()
 const emit = defineEmits<{
-  (e: 'nodeClick', node: RenderedTreeExplorerNode<T>, event: MouseEvent): void
-  (e: 'nodeDelete', node: RenderedTreeExplorerNode<T>): void
-  (e: 'contextMenu', node: RenderedTreeExplorerNode<T>, event: MouseEvent): void
+  (e: 'nodeClick', node: RenderedTreeExplorerNode, event: MouseEvent): void
+  (e: 'nodeDelete', node: RenderedTreeExplorerNode): void
+  (e: 'contextMenu', node: RenderedTreeExplorerNode, event: MouseEvent): void
 }>()
 
 const {
@@ -83,19 +83,19 @@ const {
   getAddFolderMenuItem,
   handleFolderCreation,
   addFolderCommand
-} = useTreeFolderOperations<T>(
-  /* expandNode */ (node: TreeExplorerNode<T>) => {
+} = useTreeFolderOperations(
+  /* expandNode */ (node: TreeExplorerNode) => {
     expandedKeys.value[node.key] = true
   }
 )
 
-const renderedRoot = computed<RenderedTreeExplorerNode<T>>(() => {
+const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
   const renderedRoot = fillNodeInfo(props.root)
   return newFolderNode.value
     ? combineTrees(renderedRoot, newFolderNode.value)
     : renderedRoot
 })
-const getTreeNodeIcon = (node: TreeExplorerNode<T>) => {
+const getTreeNodeIcon = (node: TreeExplorerNode) => {
   if (node.getIcon) {
     const icon = node.getIcon()
     if (icon) {
@@ -111,9 +111,7 @@ const getTreeNodeIcon = (node: TreeExplorerNode<T>) => {
   const isExpanded = expandedKeys.value?.[node.key] ?? false
   return isExpanded ? 'pi pi-folder-open' : 'pi pi-folder'
 }
-const fillNodeInfo = (
-  node: TreeExplorerNode<T>
-): RenderedTreeExplorerNode<T> => {
+const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
   const children = node.children?.map(fillNodeInfo) ?? []
   const totalLeaves = node.leaf
     ? 1
@@ -130,7 +128,7 @@ const fillNodeInfo = (
 }
 const onNodeContentClick = async (
   e: MouseEvent,
-  node: RenderedTreeExplorerNode<T>
+  node: RenderedTreeExplorerNode
 ) => {
   if (!storeSelectionKeys) {
     selectionKeys.value = {}
@@ -141,22 +139,20 @@ const onNodeContentClick = async (
   emit('nodeClick', node, e)
 }
 const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
-const menuTargetNode = shallowRef<RenderedTreeExplorerNode<T> | null>(null)
+const menuTargetNode = ref<RenderedTreeExplorerNode | null>(null)
 const extraMenuItems = computed(() => {
-  const node = menuTargetNode.value
-  return node?.contextMenuItems
-    ? typeof node.contextMenuItems === 'function'
-      ? node.contextMenuItems(node)
-      : node.contextMenuItems
+  return menuTargetNode.value?.contextMenuItems
+    ? typeof menuTargetNode.value.contextMenuItems === 'function'
+      ? menuTargetNode.value.contextMenuItems(menuTargetNode.value)
+      : menuTargetNode.value.contextMenuItems
     : []
 })
-const renameEditingNode = shallowRef<RenderedTreeExplorerNode<T> | null>(null)
+const renameEditingNode = ref<RenderedTreeExplorerNode | null>(null)
 const errorHandling = useErrorHandling()
 const handleNodeLabelEdit = async (
-  n: RenderedTreeExplorerNode,
+  node: RenderedTreeExplorerNode,
   newName: string
 ) => {
-  const node = n as RenderedTreeExplorerNode<T>
   await errorHandling.wrapWithErrorHandlingAsync(
     async () => {
       if (node.key === newFolderNode.value?.key) {
@@ -174,36 +170,35 @@ const handleNodeLabelEdit = async (
 provide(InjectKeyHandleEditLabelFunction, handleNodeLabelEdit)
 
 const { t } = useI18n()
-const renameCommand = (node: RenderedTreeExplorerNode<T>) => {
+const renameCommand = (node: RenderedTreeExplorerNode) => {
   renameEditingNode.value = node
 }
-const deleteCommand = async (node: RenderedTreeExplorerNode<T>) => {
+const deleteCommand = async (node: RenderedTreeExplorerNode) => {
   await node.handleDelete?.()
   emit('nodeDelete', node)
 }
-const menuItems = computed<MenuItem[]>(() => {
-  const node = menuTargetNode.value
-  return [
-    getAddFolderMenuItem(node),
+const menuItems = computed<MenuItem[]>(() =>
+  [
+    getAddFolderMenuItem(menuTargetNode.value),
     {
       label: t('g.rename'),
       icon: 'pi pi-file-edit',
       command: () => {
-        if (node) {
-          renameCommand(node)
+        if (menuTargetNode.value) {
+          renameCommand(menuTargetNode.value)
         }
       },
-      visible: node?.handleRename !== undefined
+      visible: menuTargetNode.value?.handleRename !== undefined
     },
     {
       label: t('g.delete'),
       icon: 'pi pi-trash',
       command: async () => {
-        if (node) {
-          await deleteCommand(node)
+        if (menuTargetNode.value) {
+          await deleteCommand(menuTargetNode.value)
         }
       },
-      visible: node?.handleDelete !== undefined,
+      visible: menuTargetNode.value?.handleDelete !== undefined,
       isAsync: true // The delete command can be async
     },
     ...extraMenuItems.value
@@ -215,12 +210,9 @@ const menuItems = computed<MenuItem[]>(() => {
         })
       : undefined
   }))
-})
+)
 
-const handleContextMenu = (
-  e: MouseEvent,
-  node: RenderedTreeExplorerNode<T>
-) => {
+const handleContextMenu = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
   menuTargetNode.value = node
   emit('contextMenu', node, e)
   if (menuItems.value.filter((item) => item.visible).length > 0) {
@@ -232,13 +224,15 @@ const wrapCommandWithErrorHandler = (
   command: (event: MenuItemCommandEvent) => void,
   { isAsync = false }: { isAsync: boolean }
 ) => {
-  const node = menuTargetNode.value
   return isAsync
     ? errorHandling.wrapWithErrorHandlingAsync(
         command as (event: MenuItemCommandEvent) => Promise<void>,
-        node?.handleError
+        menuTargetNode.value?.handleError
+      )
+    : errorHandling.wrapWithErrorHandling(
+        command,
+        menuTargetNode.value?.handleError
       )
-    : errorHandling.wrapWithErrorHandling(command, node?.handleError)
 }
 
 defineExpose({

src/components/common/TreeExplorerTreeNode.vue

@@ -36,7 +36,7 @@
   </div>
 </template>
 
-<script setup lang="ts" generic="T">
+<script setup lang="ts">
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
 import Badge from 'primevue/badge'
 import { computed, inject, ref } from 'vue'
@@ -53,17 +53,17 @@ import type {
 } from '@/types/treeExplorerTypes'
 
 const props = defineProps<{
-  node: RenderedTreeExplorerNode<T>
+  node: RenderedTreeExplorerNode
 }>()
 
 const emit = defineEmits<{
   (
     e: 'itemDropped',
-    node: RenderedTreeExplorerNode<T>,
-    data: RenderedTreeExplorerNode<T>
+    node: RenderedTreeExplorerNode,
+    data: RenderedTreeExplorerNode
   ): void
-  (e: 'dragStart', node: RenderedTreeExplorerNode<T>): void
-  (e: 'dragEnd', node: RenderedTreeExplorerNode<T>): void
+  (e: 'dragStart', node: RenderedTreeExplorerNode): void
+  (e: 'dragEnd', node: RenderedTreeExplorerNode): void
 }>()
 
 const nodeBadgeText = computed<string>(() => {
@@ -80,7 +80,7 @@ const showNodeBadgeText = computed<boolean>(() => nodeBadgeText.value !== '')
 const isEditing = computed<boolean>(() => props.node.isEditingLabel ?? false)
 const handleEditLabel = inject(InjectKeyHandleEditLabelFunction)
 const handleRename = (newName: string) => {
-  handleEditLabel?.(props.node as RenderedTreeExplorerNode, newName)
+  handleEditLabel?.(props.node, newName)
 }
 
 const container = ref<HTMLElement | null>(null)
@@ -117,13 +117,9 @@ if (props.node.droppable) {
     onDrop: async (event) => {
       const dndData = event.source.data as TreeExplorerDragAndDropData
       if (dndData.type === 'tree-explorer-node') {
-        await props.node.handleDrop?.(dndData as TreeExplorerDragAndDropData<T>)
+        await props.node.handleDrop?.(dndData)
         canDrop.value = false
-        emit(
-          'itemDropped',
-          props.node,
-          dndData.data as RenderedTreeExplorerNode<T>
-        )
+        emit('itemDropped', props.node, dndData.data)
       }
     },
     onDragEnter: (event) => {

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseModalLayout
     :content-title="$t('templateWorkflows.title', 'Workflow Templates')"
-    size="md"
+    class="workflow-template-selector-dialog"
   >
     <template #leftPanelHeaderTitle>
       <i class="icon-[comfy--template]" />
@@ -422,9 +422,8 @@ import { createGridStyle } from '@/utils/gridUtil'
 
 const { t } = useI18n()
 
-const { onClose: originalOnClose, initialCategory = 'all' } = defineProps<{
+const { onClose: originalOnClose } = defineProps<{
   onClose: () => void
-  initialCategory?: string
 }>()
 
 // Track session time for telemetry
@@ -548,7 +547,7 @@ const allTemplates = computed(() => {
 })
 
 // Navigation
-const selectedNavItem = ref<string | null>(initialCategory)
+const selectedNavItem = ref<string | null>('all')
 
 // Filter templates based on selected navigation item
 const navigationFilteredTemplates = computed(() => {
@@ -854,3 +853,19 @@ onBeforeUnmount(() => {
   cardRefs.value = [] // Release DOM refs
 })
 </script>
+
+<style>
+/* Ensure the workflow template selector dialog fits within provided dialog */
+.workflow-template-selector-dialog.base-widget-layout {
+  width: 100% !important;
+  max-width: 1400px;
+  height: 100% !important;
+  aspect-ratio: auto !important;
+}
+
+@media (min-width: 1600px) {
+  .workflow-template-selector-dialog.base-widget-layout {
+    max-width: 1600px;
+  }
+}
+</style>

src/components/dialog/GlobalDialog.vue

@@ -4,7 +4,12 @@
     v-for="item in dialogStore.dialogStack"
     :key="item.key"
     v-model:visible="item.visible"
-    class="global-dialog"
+    :class="[
+      'global-dialog',
+      item.key === 'global-settings' && teamWorkspacesEnabled
+        ? 'settings-dialog-workspace'
+        : ''
+    ]"
     v-bind="item.dialogComponentProps"
     :pt="getDialogPt(item)"
     :aria-labelledby="item.key"

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -18,35 +18,17 @@
     <div class="flex justify-end gap-4">
       <div
         v-if="type === 'overwriteBlueprint'"
-        class="flex flex-col justify-start gap-1"
+        class="flex justify-start gap-4"
       >
-        <div class="flex gap-4">
-          <input
-            id="doNotAskAgain"
-            v-model="doNotAskAgain"
-            type="checkbox"
-            class="h-4 w-4 cursor-pointer"
-          />
-          <label for="doNotAskAgain">{{
-            t('missingModelsDialog.doNotAskAgain')
-          }}</label>
-        </div>
-        <i18n-t
-          v-if="doNotAskAgain"
-          keypath="missingModelsDialog.reEnableInSettings"
-          tag="span"
-          class="text-sm text-muted-foreground ml-8"
-        >
-          <template #link>
-            <Button
-              variant="textonly"
-              class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
-              @click="openBlueprintOverwriteSetting"
-            >
-              {{ t('missingModelsDialog.reEnableInSettingsLink') }}
-            </Button>
-          </template>
-        </i18n-t>
+        <Checkbox
+          v-model="doNotAskAgain"
+          class="flex justify-start gap-4"
+          input-id="doNotAskAgain"
+          binary
+        />
+        <label for="doNotAskAgain" severity="secondary">{{
+          t('missingModelsDialog.doNotAskAgain')
+        }}</label>
       </div>
 
       <Button
@@ -110,13 +92,13 @@
 </template>
 
 <script setup lang="ts">
+import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -132,11 +114,6 @@ const { t } = useI18n()
 
 const onCancel = () => useDialogStore().closeDialog()
 
-function openBlueprintOverwriteSetting() {
-  useDialogStore().closeDialog()
-  useSettingsDialog().show(undefined, 'Comfy.Workflow.WarnBlueprintOverwrite')
-}
-
 const doNotAskAgain = ref(false)
 
 const onDeny = () => {

src/components/dialog/content/MissingModelsWarning.vue

@@ -5,38 +5,15 @@
     :title="t('missingModelsDialog.missingModels')"
     :message="t('missingModelsDialog.missingModelsMessage')"
   />
-  <div class="mb-4 flex flex-col gap-1">
-    <div class="flex gap-1">
-      <input
-        id="doNotAskAgain"
-        v-model="doNotAskAgain"
-        type="checkbox"
-        class="h-4 w-4 cursor-pointer"
-      />
-      <label for="doNotAskAgain">{{
-        t('missingModelsDialog.doNotAskAgain')
-      }}</label>
-    </div>
-    <i18n-t
-      v-if="doNotAskAgain"
-      keypath="missingModelsDialog.reEnableInSettings"
-      tag="span"
-      class="text-sm text-muted-foreground ml-6"
-    >
-      <template #link>
-        <Button
-          variant="textonly"
-          class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
-          @click="openShowMissingModelsSetting"
-        >
-          {{ t('missingModelsDialog.reEnableInSettingsLink') }}
-        </Button>
-      </template>
-    </i18n-t>
+  <div class="mb-4 flex gap-1">
+    <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
+    <label for="doNotAskAgain">{{
+      t('missingModelsDialog.doNotAskAgain')
+    }}</label>
   </div>
   <ListBox :options="missingModels" class="comfy-missing-models">
     <template #option="{ option }">
-      <Suspense v-if="isDesktop">
+      <Suspense v-if="isElectron()">
         <ElectronFileDownload
           :url="option.url"
           :label="option.label"
@@ -54,18 +31,16 @@
 </template>
 
 <script setup lang="ts">
+import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
 import { computed, onBeforeUnmount, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
-import { useDialogStore } from '@/stores/dialogStore'
+import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here
 // as some installations may wish to use custom sources
@@ -103,11 +78,6 @@ const { t } = useI18n()
 
 const doNotAskAgain = ref(false)
 
-function openShowMissingModelsSetting() {
-  useDialogStore().closeDialog({ key: 'global-missing-models-warning' })
-  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingModelsWarning')
-}
-
 const modelDownloads = ref<Record<string, ModelInfo>>({})
 const missingModels = computed(() => {
   return props.missingModels.map((model) => {

src/components/dialog/content/MissingNodesFooter.vue

@@ -1,86 +1,55 @@
 <template>
-  <div class="flex w-full flex-col gap-2 py-2 px-4">
-    <div class="flex flex-col gap-1 text-sm text-muted-foreground">
-      <div class="flex items-center gap-1">
-        <input
-          id="doNotAskAgainNodes"
-          v-model="doNotAskAgain"
-          type="checkbox"
-          class="h-4 w-4 cursor-pointer"
-        />
-        <label for="doNotAskAgainNodes">{{
-          $t('missingModelsDialog.doNotAskAgain')
-        }}</label>
-      </div>
-      <i18n-t
-        v-if="doNotAskAgain"
-        keypath="missingModelsDialog.reEnableInSettings"
-        tag="span"
-        class="text-sm text-muted-foreground ml-6"
-      >
-        <template #link>
-          <Button
-            variant="textonly"
-            class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
-            @click="openShowMissingNodesSetting"
-          >
-            {{ $t('missingModelsDialog.reEnableInSettingsLink') }}
-          </Button>
-        </template>
-      </i18n-t>
-    </div>
+  <!-- Cloud mode: Learn More + Got It buttons -->
+  <div
+    v-if="isCloud"
+    class="flex w-full items-center justify-between gap-2 py-2 px-4"
+  >
+    <Button
+      variant="textonly"
+      size="sm"
+      as="a"
+      href="https://www.comfy.org/cloud"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <i class="icon-[lucide--info]"></i>
+      <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
+    </Button>
+    <Button variant="secondary" size="md" @click="handleGotItClick">{{
+      $t('missingNodes.cloud.gotIt')
+    }}</Button>
+  </div>
 
-    <!-- Cloud mode: Learn More + Got It buttons -->
-    <div v-if="isCloud" class="flex w-full items-center justify-between gap-2">
-      <Button
-        variant="textonly"
-        size="sm"
-        as="a"
-        href="https://www.comfy.org/cloud"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <i class="icon-[lucide--info]"></i>
-        <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
-      </Button>
-      <Button variant="secondary" size="md" @click="handleGotItClick">{{
-        $t('missingNodes.cloud.gotIt')
-      }}</Button>
-    </div>
-
-    <!-- OSS mode: Open Manager + Install All buttons -->
-    <div v-else-if="showManagerButtons" class="flex justify-end gap-1">
-      <Button variant="textonly" @click="openManager">{{
-        $t('g.openManager')
-      }}</Button>
-      <PackInstallButton
-        v-if="showInstallAllButton"
-        type="secondary"
-        size="md"
-        :disabled="
-          isLoading || !!error || missingNodePacks.length === 0 || isInstalling
-        "
-        :is-loading="isLoading"
-        :node-packs="missingNodePacks"
-        :label="
-          isLoading
-            ? $t('manager.gettingInfo')
-            : $t('manager.installAllMissingNodes')
-        "
-      />
-    </div>
+  <!-- OSS mode: Open Manager + Install All buttons -->
+  <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
+    <Button variant="textonly" @click="openManager">{{
+      $t('g.openManager')
+    }}</Button>
+    <PackInstallButton
+      v-if="showInstallAllButton"
+      type="secondary"
+      size="md"
+      :disabled="
+        isLoading || !!error || missingNodePacks.length === 0 || isInstalling
+      "
+      :is-loading="isLoading"
+      :node-packs="missingNodePacks"
+      :label="
+        isLoading
+          ? $t('manager.gettingInfo')
+          : $t('manager.installAllMissingNodes')
+      "
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -91,21 +60,10 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp
 const dialogStore = useDialogStore()
 const { t } = useI18n()
 
-const doNotAskAgain = ref(false)
-
-watch(doNotAskAgain, (value) => {
-  void useSettingStore().set('Comfy.Workflow.ShowMissingNodesWarning', !value)
-})
-
 const handleGotItClick = () => {
   dialogStore.closeDialog({ key: 'global-missing-nodes' })
 }
 
-function openShowMissingNodesSetting() {
-  dialogStore.closeDialog({ key: 'global-missing-nodes' })
-  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingNodesWarning')
-}
-
 const { missingNodePacks, isLoading, error } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
 const managerState = useManagerState()

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -162,7 +162,7 @@ import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -173,7 +173,7 @@ const { isInsufficientCredits = false } = defineProps<{
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
 const dialogStore = useDialogStore()
-const settingsDialog = useSettingsDialog()
+const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
@@ -266,7 +266,7 @@ async function handleBuy() {
       : isSubscriptionEnabled()
         ? 'subscription'
         : 'credits'
-    settingsDialog.show(settingsPanel)
+    dialogService.showSettingsDialog(settingsPanel)
   } catch (error) {
     console.error('Purchase failed:', error)
 

src/components/dialog/content/TopUpCreditsDialogContentWorkspace.vue

@@ -161,7 +161,7 @@ import { useExternalLink } from '@/composables/useExternalLink'
 import { useTelemetry } from '@/platform/telemetry'
 import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useDialogService } from '@/services/dialogService'
 import { useBillingOperationStore } from '@/stores/billingOperationStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
@@ -172,7 +172,7 @@ const { isInsufficientCredits = false } = defineProps<{
 
 const { t } = useI18n()
 const dialogStore = useDialogStore()
-const settingsDialog = useSettingsDialog()
+const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
@@ -266,7 +266,7 @@ async function handleBuy() {
       })
       await fetchBalance()
       handleClose(false)
-      settingsDialog.show('workspace')
+      dialogService.showSettingsDialog('workspace')
     } else if (response.status === 'pending') {
       billingOperationStore.startOperation(response.billing_op_id, 'topup')
     } else {

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

@@ -1,5 +1,9 @@
 <template>
-  <div class="about-container flex flex-col gap-2" data-testid="about-panel">
+  <PanelTemplate
+    value="About"
+    class="about-container"
+    data-testid="about-panel"
+  >
     <h2 class="mb-2 text-2xl font-bold">
       {{ $t('g.about') }}
     </h2>
@@ -28,7 +32,7 @@
       v-if="systemStatsStore.systemStats"
       :stats="systemStatsStore.systemStats"
     />
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -39,6 +43,8 @@ import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 
+import PanelTemplate from './PanelTemplate.vue'
+
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()
 </script>

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

@@ -1,9 +1,13 @@
 <template>
-  <div class="keybinding-panel flex flex-col gap-2">
-    <SearchBox
-      v-model="filters['global'].value"
-      :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
-    />
+  <PanelTemplate value="Keybinding" class="keybinding-panel">
+    <template #header>
+      <SearchBox
+        v-model="filters['global'].value"
+        :placeholder="
+          $t('g.searchPlaceholder', { subject: $t('g.keybindings') })
+        "
+      />
+    </template>
 
     <DataTable
       v-model:selection="selectedCommandData"
@@ -131,7 +135,7 @@
       <i class="pi pi-replay" />
       {{ $t('g.resetAll') }}
     </Button>
-  </div>
+  </PanelTemplate>
 </template>
 
 <script setup lang="ts">
@@ -155,6 +159,7 @@ import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
+import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
 
 const filters = ref({

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="credits-container h-full">
+  <TabPanel value="Credits" class="credits-container h-full">
     <!-- Legacy Design -->
     <div class="flex h-full flex-col">
       <h2 class="mb-2 text-2xl font-bold">
@@ -102,7 +102,7 @@
         </Button>
       </div>
     </div>
-  </div>
+  </TabPanel>
 </template>
 
 <script setup lang="ts">
@@ -110,6 +110,7 @@ import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Divider from 'primevue/divider'
 import Skeleton from 'primevue/skeleton'
+import TabPanel from 'primevue/tabpanel'
 import { computed, ref, watch } from 'vue'
 
 import UserCredit from '@/components/common/UserCredit.vue'

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

@@ -6,15 +6,14 @@
       <!-- Section Header -->
       <div class="flex w-full items-center gap-9">
         <div class="flex min-w-0 flex-1 items-baseline gap-2">
-          <span class="text-base font-semibold text-base-foreground">
+          <span
+            v-if="uiConfig.showMembersList"
+            class="text-base font-semibold text-base-foreground"
+          >
             <template v-if="activeView === 'active'">
               {{
                 $t('workspacePanel.members.membersCount', {
-                  count:
-                    isSingleSeatPlan || isPersonalWorkspace
-                      ? 1
-                      : members.length,
-                  maxSeats: maxSeats
+                  count: members.length
                 })
               }}
             </template>
@@ -28,10 +27,7 @@
             </template>
           </span>
         </div>
-        <div
-          v-if="uiConfig.showSearch && !isSingleSeatPlan"
-          class="flex items-start gap-2"
-        >
+        <div v-if="uiConfig.showSearch" class="flex items-start gap-2">
           <SearchBox
             v-model="searchQuery"
             :placeholder="$t('g.search')"
@@ -49,16 +45,14 @@
           :class="
             cn(
               'grid w-full items-center py-2',
-              isSingleSeatPlan
-                ? 'grid-cols-1 py-0'
-                : activeView === 'pending'
-                  ? uiConfig.pendingGridCols
-                  : uiConfig.headerGridCols
+              activeView === 'pending'
+                ? uiConfig.pendingGridCols
+                : uiConfig.headerGridCols
             )
           "
         >
           <!-- Tab buttons in first column -->
-          <div v-if="!isSingleSeatPlan" class="flex items-center gap-2">
+          <div class="flex items-center gap-2">
             <Button
               :variant="
                 activeView === 'active' ? 'secondary' : 'muted-textonly'
@@ -107,19 +101,17 @@
             <div />
           </template>
           <template v-else>
-            <template v-if="!isSingleSeatPlan">
-              <Button
-                variant="muted-textonly"
-                size="sm"
-                class="justify-end"
-                @click="toggleSort('joinDate')"
-              >
-                {{ $t('workspacePanel.members.columns.joinDate') }}
-                <i class="icon-[lucide--chevrons-up-down] size-4" />
-              </Button>
-              <!-- Empty cell for action column header (OWNER only) -->
-              <div v-if="permissions.canRemoveMembers" />
-            </template>
+            <Button
+              variant="muted-textonly"
+              size="sm"
+              class="justify-end"
+              @click="toggleSort('joinDate')"
+            >
+              {{ $t('workspacePanel.members.columns.joinDate') }}
+              <i class="icon-[lucide--chevrons-up-down] size-4" />
+            </Button>
+            <!-- Empty cell for action column header (OWNER only) -->
+            <div v-if="permissions.canRemoveMembers" />
           </template>
         </div>
 
@@ -174,7 +166,7 @@
                 :class="
                   cn(
                     'grid w-full items-center rounded-lg p-2',
-                    isSingleSeatPlan ? 'grid-cols-1' : uiConfig.membersGridCols,
+                    uiConfig.membersGridCols,
                     index % 2 === 1 && 'bg-secondary-background/50'
                   )
                 "
@@ -214,14 +206,14 @@
                 </div>
                 <!-- Join date -->
                 <span
-                  v-if="uiConfig.showDateColumn && !isSingleSeatPlan"
+                  v-if="uiConfig.showDateColumn"
                   class="text-sm text-muted-foreground text-right"
                 >
                   {{ formatDate(member.joinDate) }}
                 </span>
                 <!-- Remove member action (OWNER only, can't remove yourself) -->
                 <div
-                  v-if="permissions.canRemoveMembers && !isSingleSeatPlan"
+                  v-if="permissions.canRemoveMembers"
                   class="flex items-center justify-end"
                 >
                   <Button
@@ -245,29 +237,8 @@
             </template>
           </template>
 
-          <!-- Upsell Banner -->
-          <div
-            v-if="isSingleSeatPlan"
-            class="flex items-center gap-2 rounded-xl border bg-secondary-background border-border-default px-4 py-3 mt-4 justify-center"
-          >
-            <p class="m-0 text-sm text-foreground">
-              {{
-                isActiveSubscription
-                  ? $t('workspacePanel.members.upsellBannerUpgrade')
-                  : $t('workspacePanel.members.upsellBannerSubscribe')
-              }}
-            </p>
-            <Button
-              variant="muted-textonly"
-              class="cursor-pointer underline text-sm"
-              @click="showSubscriptionDialog()"
-            >
-              {{ $t('workspacePanel.members.viewPlans') }}
-            </Button>
-          </div>
-
           <!-- Pending Invites -->
-          <template v-if="activeView === 'pending'">
+          <template v-else>
             <div
               v-for="(invite, index) in filteredPendingInvites"
               :key="invite.id"
@@ -371,8 +342,6 @@ import SearchBox from '@/components/common/SearchBox.vue'
 import UserAvatar from '@/components/common/UserAvatar.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import type {
   PendingInvite,
@@ -398,27 +367,6 @@ const {
 } = storeToRefs(workspaceStore)
 const { copyInviteLink } = workspaceStore
 const { permissions, uiConfig } = useWorkspaceUI()
-const {
-  isActiveSubscription,
-  subscription,
-  showSubscriptionDialog,
-  getMaxSeats
-} = useBillingContext()
-
-const maxSeats = computed(() => {
-  if (isPersonalWorkspace.value) return 1
-  const tier = subscription.value?.tier
-  if (!tier) return 1
-  const tierKey = TIER_TO_KEY[tier]
-  if (!tierKey) return 1
-  return getMaxSeats(tierKey)
-})
-
-const isSingleSeatPlan = computed(() => {
-  if (isPersonalWorkspace.value) return false
-  if (!isActiveSubscription.value) return true
-  return maxSeats.value <= 1
-})
 
 const searchQuery = ref('')
 const activeView = ref<'active' | 'pending'>('active')

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

@@ -0,0 +1,21 @@
+<template>
+  <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
+    <div class="flex h-full w-full flex-col gap-2">
+      <slot name="header" />
+      <ScrollPanel class="h-0 grow pr-2">
+        <slot />
+      </ScrollPanel>
+      <slot name="footer" />
+    </div>
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import TabPanel from 'primevue/tabpanel'
+
+const props = defineProps<{
+  value: string
+  class?: string
+}>()
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="user-settings-container h-full">
+  <TabPanel value="User" class="user-settings-container h-full">
     <div class="flex h-full flex-col">
       <h2 class="mb-2 text-2xl font-bold">{{ $t('userSettings.title') }}</h2>
       <Divider class="mb-3" />
@@ -95,12 +95,13 @@
         </Button>
       </div>
     </div>
-  </div>
+  </TabPanel>
 </template>
 
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
+import TabPanel from 'primevue/tabpanel'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
 import Button from '@/components/ui/button/Button.vue'

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

@@ -0,0 +1,11 @@
+<template>
+  <TabPanel value="Workspace" class="h-full">
+    <WorkspacePanelContent />
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import TabPanel from 'primevue/tabpanel'
+
+import WorkspacePanelContent from '@/components/dialog/content/setting/WorkspacePanelContent.vue'
+</script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-full w-full flex-col">
-    <header class="mb-8 flex items-center gap-4">
+    <div class="pb-8 flex items-center gap-4">
       <WorkspaceProfilePic
         class="size-12 !text-3xl"
         :workspace-name="workspaceName"
@@ -8,38 +8,44 @@
       <h1 class="text-3xl text-base-foreground">
         {{ workspaceName }}
       </h1>
-    </header>
-    <TabsRoot v-model="activeTab">
+    </div>
+    <Tabs unstyled :value="activeTab" @update:value="setActiveTab">
       <div class="flex w-full items-center">
-        <TabsList class="flex items-center gap-2 pb-1">
-          <TabsTrigger
+        <TabList unstyled class="flex w-full gap-2">
+          <Tab
             value="plan"
             :class="
               cn(
-                tabTriggerBase,
-                activeTab === 'plan' ? tabTriggerActive : tabTriggerInactive
+                buttonVariants({
+                  variant: activeTab === 'plan' ? 'secondary' : 'textonly',
+                  size: 'md'
+                }),
+                activeTab === 'plan' && 'text-base-foreground no-underline'
               )
             "
           >
             {{ $t('workspacePanel.tabs.planCredits') }}
-          </TabsTrigger>
-          <TabsTrigger
+          </Tab>
+          <Tab
             value="members"
             :class="
               cn(
-                tabTriggerBase,
-                activeTab === 'members' ? tabTriggerActive : tabTriggerInactive
+                buttonVariants({
+                  variant: activeTab === 'members' ? 'secondary' : 'textonly',
+                  size: 'md'
+                }),
+                activeTab === 'members' && 'text-base-foreground no-underline',
+                'ml-2'
               )
             "
           >
             {{
               $t('workspacePanel.tabs.membersCount', {
-                count: members.length
+                count: isInPersonalWorkspace ? 1 : members.length
               })
             }}
-          </TabsTrigger>
-        </TabsList>
-
+          </Tab>
+        </TabList>
         <Button
           v-if="permissions.canInviteMembers"
           v-tooltip="
@@ -49,22 +55,20 @@
           "
           variant="secondary"
           size="lg"
-          :disabled="!isSingleSeatPlan && isInviteLimitReached"
-          :class="
-            !isSingleSeatPlan &&
-            isInviteLimitReached &&
-            'opacity-50 cursor-not-allowed'
-          "
+          :disabled="isInviteLimitReached"
+          :class="isInviteLimitReached && 'opacity-50 cursor-not-allowed'"
           :aria-label="$t('workspacePanel.inviteMember')"
           @click="handleInviteMember"
         >
-          <i class="pi pi-plus text-sm" />
+          {{ $t('workspacePanel.invite') }}
+          <i class="pi pi-plus ml-1 text-sm" />
         </Button>
         <template v-if="permissions.canAccessWorkspaceMenu">
           <Button
             v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-            variant="muted-textonly"
-            size="icon"
+            class="ml-2"
+            variant="secondary"
+            size="lg"
             :aria-label="$t('g.moreOptions')"
             @click="menu?.toggle($event)"
           >
@@ -72,21 +76,17 @@
           </Button>
           <Menu ref="menu" :model="menuItems" :popup="true">
             <template #item="{ item }">
-              <button
+              <div
                 v-tooltip="
                   item.disabled && deleteTooltip
                     ? { value: deleteTooltip, showDelay: 0 }
                     : null
                 "
-                type="button"
-                :disabled="!!item.disabled"
-                :class="
-                  cn(
-                    'flex w-full items-center gap-2 px-3 py-2 bg-transparent border-none cursor-pointer',
-                    item.class,
-                    item.disabled && 'pointer-events-auto cursor-not-allowed'
-                  )
-                "
+                :class="[
+                  'flex items-center gap-2 px-3 py-2',
+                  item.class,
+                  item.disabled ? 'pointer-events-auto' : 'cursor-pointer'
+                ]"
                 @click="
                   item.command?.({
                     originalEvent: $event,
@@ -96,47 +96,44 @@
               >
                 <i :class="item.icon" />
                 <span>{{ item.label }}</span>
-              </button>
+              </div>
             </template>
           </Menu>
         </template>
       </div>
 
-      <TabsContent value="plan" class="mt-4">
-        <SubscriptionPanelContentWorkspace />
-      </TabsContent>
-      <TabsContent value="members" class="mt-4">
-        <MembersPanelContent :key="workspaceRole" />
-      </TabsContent>
-    </TabsRoot>
+      <TabPanels unstyled>
+        <TabPanel value="plan">
+          <SubscriptionPanelContentWorkspace />
+        </TabPanel>
+        <TabPanel value="members">
+          <MembersPanelContent :key="workspaceRole" />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
   </div>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import Menu from 'primevue/menu'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import TabPanel from 'primevue/tabpanel'
+import TabPanels from 'primevue/tabpanels'
+import Tabs from 'primevue/tabs'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
-
 import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
 import MembersPanelContent from '@/components/dialog/content/setting/MembersPanelContent.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
+import { buttonVariants } from '@/components/ui/button/button.variants'
 import SubscriptionPanelContentWorkspace from '@/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue'
+import { cn } from '@/utils/tailwindUtil'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogService } from '@/services/dialogService'
-import { cn } from '@/utils/tailwindUtil'
-
-const tabTriggerBase =
-  'flex items-center justify-center shrink-0 px-2.5 py-2 text-sm rounded-lg cursor-pointer transition-all duration-200 outline-hidden border-none'
-const tabTriggerActive =
-  'bg-interface-menu-component-surface-hovered text-text-primary font-bold'
-const tabTriggerInactive =
-  'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'
 
 const { defaultTab = 'plan' } = defineProps<{
   defaultTab?: string
@@ -147,26 +144,19 @@ const {
   showLeaveWorkspaceDialog,
   showDeleteWorkspaceDialog,
   showInviteMemberDialog,
-  showInviteMemberUpsellDialog,
   showEditWorkspaceDialog
 } = useDialogService()
-const { isActiveSubscription, subscription, getMaxSeats } = useBillingContext()
-
-const isSingleSeatPlan = computed(() => {
-  if (!isActiveSubscription.value) return true
-  const tier = subscription.value?.tier
-  if (!tier) return true
-  const tierKey = TIER_TO_KEY[tier]
-  if (!tierKey) return true
-  return getMaxSeats(tierKey) <= 1
-})
 const workspaceStore = useTeamWorkspaceStore()
-const { workspaceName, members, isInviteLimitReached, isWorkspaceSubscribed } =
-  storeToRefs(workspaceStore)
+const {
+  workspaceName,
+  members,
+  isInviteLimitReached,
+  isWorkspaceSubscribed,
+  isInPersonalWorkspace
+} = storeToRefs(workspaceStore)
 const { fetchMembers, fetchPendingInvites } = workspaceStore
-
-const { workspaceRole, permissions, uiConfig } = useWorkspaceUI()
-const activeTab = ref(defaultTab)
+const { activeTab, setActiveTab, workspaceRole, permissions, uiConfig } =
+  useWorkspaceUI()
 
 const menu = ref<InstanceType<typeof Menu> | null>(null)
 
@@ -197,16 +187,11 @@ const deleteTooltip = computed(() => {
 })
 
 const inviteTooltip = computed(() => {
-  if (isSingleSeatPlan.value) return null
   if (!isInviteLimitReached.value) return null
   return t('workspacePanel.inviteLimitReached')
 })
 
 function handleInviteMember() {
-  if (isSingleSeatPlan.value) {
-    showInviteMemberUpsellDialog()
-    return
-  }
   if (isInviteLimitReached.value) return
   showInviteMemberDialog()
 }
@@ -246,6 +231,7 @@ const menuItems = computed(() => {
 })
 
 onMounted(() => {
+  setActiveTab(defaultTab)
   fetchMembers()
   fetchPendingInvites()
 })

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

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex items-center gap-2">
+    <WorkspaceProfilePic
+      class="size-6 text-xs"
+      :workspace-name="workspaceName"
+    />
+
+    <span>{{ workspaceName }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
+</script>

src/components/dialog/content/workspace/InviteMemberDialogContent.vue

@@ -70,17 +70,31 @@
             @click="onSelectLink"
           />
           <div
-            class="absolute right-3 top-2.5 cursor-pointer"
+            class="absolute right-4 top-2 cursor-pointer"
             @click="onCopyLink"
           >
-            <i
-              :class="
-                cn(
-                  'pi size-4',
-                  justCopied ? 'pi-check text-green-500' : 'pi-copy'
-                )
-              "
-            />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <g clip-path="url(#clip0_2127_14348)">
+                <path
+                  d="M2.66634 10.6666C1.93301 10.6666 1.33301 10.0666 1.33301 9.33325V2.66659C1.33301 1.93325 1.93301 1.33325 2.66634 1.33325H9.33301C10.0663 1.33325 10.6663 1.93325 10.6663 2.66659M6.66634 5.33325H13.333C14.0694 5.33325 14.6663 5.93021 14.6663 6.66658V13.3333C14.6663 14.0696 14.0694 14.6666 13.333 14.6666H6.66634C5.92996 14.6666 5.33301 14.0696 5.33301 13.3333V6.66658C5.33301 5.93021 5.92996 5.33325 6.66634 5.33325Z"
+                  stroke="white"
+                  stroke-width="1.3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_2127_14348">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
           </div>
         </div>
       </div>
@@ -104,7 +118,6 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { cn } from '@/utils/tailwindUtil'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -117,7 +130,6 @@ const loading = ref(false)
 const email = ref('')
 const step = ref<'email' | 'link'>('email')
 const generatedLink = ref('')
-const justCopied = ref(false)
 
 const isValidEmail = computed(() => {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
@@ -149,10 +161,6 @@ async function onCreateLink() {
 async function onCopyLink() {
   try {
     await navigator.clipboard.writeText(generatedLink.value)
-    justCopied.value = true
-    setTimeout(() => {
-      justCopied.value = false
-    }, 759)
     toast.add({
       severity: 'success',
       summary: t('workspacePanel.inviteMemberDialog.linkCopied'),

src/components/dialog/content/workspace/InviteMemberUpsellDialogContent.vue

@@ -1,68 +0,0 @@
-<template>
-  <div
-    class="flex w-full max-w-[512px] flex-col rounded-2xl border border-border-default bg-base-background"
-  >
-    <!-- Header -->
-    <div
-      class="flex h-12 items-center justify-between border-b border-border-default px-4"
-    >
-      <h2 class="m-0 text-sm font-normal text-base-foreground">
-        {{
-          isActiveSubscription
-            ? $t('workspacePanel.inviteUpsellDialog.titleSingleSeat')
-            : $t('workspacePanel.inviteUpsellDialog.titleNotSubscribed')
-        }}
-      </h2>
-      <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
-        :aria-label="$t('g.close')"
-        @click="onDismiss"
-      >
-        <i class="pi pi-times size-4" />
-      </button>
-    </div>
-
-    <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
-      <p class="m-0 text-sm text-muted-foreground">
-        {{
-          isActiveSubscription
-            ? $t('workspacePanel.inviteUpsellDialog.messageSingleSeat')
-            : $t('workspacePanel.inviteUpsellDialog.messageNotSubscribed')
-        }}
-      </p>
-    </div>
-
-    <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
-      <Button variant="muted-textonly" @click="onDismiss">
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button variant="primary" size="lg" @click="onUpgrade">
-        {{
-          isActiveSubscription
-            ? $t('workspacePanel.inviteUpsellDialog.upgradeToCreator')
-            : $t('workspacePanel.inviteUpsellDialog.viewPlans')
-        }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const dialogStore = useDialogStore()
-const { isActiveSubscription, showSubscriptionDialog } = useBillingContext()
-
-function onDismiss() {
-  dialogStore.closeDialog({ key: 'invite-member-upsell' })
-}
-
-function onUpgrade() {
-  dialogStore.closeDialog({ key: 'invite-member-upsell' })
-  showSubscriptionDialog()
-}
-</script>

src/components/dialog/header/SettingDialogHeader.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h2 :class="cn(flags.teamWorkspacesEnabled ? 'px-6' : 'px-4')">
+      <i class="pi pi-cog" />
+      <span>{{ $t('g.settings') }}</span>
+      <Tag
+        v-if="isStaging"
+        value="staging"
+        severity="warn"
+        class="ml-2 text-xs"
+      />
+    </h2>
+  </div>
+</template>
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+
+import { isStaging } from '@/config/staging'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { cn } from '@comfyorg/tailwind-utils'
+const { flags } = useFeatureFlags()
+</script>
+
+<style scoped>
+.pi-cog {
+  font-size: 1.25rem;
+  margin-right: 0.5rem;
+}
+.version-tag {
+  margin-left: 0.5rem;
+}
+</style>

src/components/graph/GraphCanvas.vue

@@ -94,7 +94,6 @@
   <template v-if="comfyAppReady">
     <TitleEditor />
     <SelectionToolbox v-if="selectionToolboxEnabled" />
-    <NodeContextMenu />
     <!-- Render legacy DOM widgets only when Vue nodes are disabled -->
     <DomWidgets v-if="!shouldRenderVueNodes" />
   </template>
@@ -122,7 +121,6 @@ import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import LinkOverlayCanvas from '@/components/graph/LinkOverlayCanvas.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
-import NodeContextMenu from '@/components/graph/NodeContextMenu.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodePropertiesPanel from '@/components/rightSidePanel/RightSidePanel.vue'

src/components/graph/SelectionToolbox.vue

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

src/components/graph/widgets/DomWidget.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { useElementBounding, useEventListener, whenever } from '@vueuse/core'
+import { useElementBounding, useEventListener } from '@vueuse/core'
 import type { CSSProperties } from 'vue'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
@@ -180,8 +180,6 @@ watch(
     mountElementIfVisible()
   }
 )
-
-whenever(() => !canvasStore.linearMode, mountElementIfVisible)
 </script>
 
 <style scoped>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -159,13 +159,13 @@ import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
@@ -241,7 +241,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'desktop-guide',
       type: 'item',
       label: t('helpCenter.desktopUserGuide'),
-      visible: isDesktop,
+      visible: isElectron(),
       action: () => {
         trackResourceClick('docs', true)
         openExternalLink(
@@ -257,7 +257,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'dev-tools',
       type: 'item',
       label: t('helpCenter.openDevTools'),
-      visible: isDesktop,
+      visible: isElectron(),
       action: () => {
         openDevTools()
         emit('close')
@@ -266,13 +266,13 @@ const moreItems = computed<MenuItem[]>(() => {
     {
       key: 'divider-1',
       type: 'divider',
-      visible: isDesktop
+      visible: isElectron()
     },
     {
       key: 'reinstall',
       type: 'item',
       label: t('helpCenter.reinstall'),
-      visible: isDesktop,
+      visible: isElectron(),
       action: () => {
         onReinstall()
         emit('close')
@@ -374,7 +374,7 @@ const menuItems = computed<MenuItem[]>(() => {
     })
   }
   // Update ComfyUI - only for non-desktop, non-cloud with new manager UI
-  if (!isDesktop && !isCloud && isNewManagerUI.value) {
+  if (!isElectron() && !isCloud && isNewManagerUI.value) {
     items.push({
       key: 'update-comfyui',
       type: 'item',
@@ -551,13 +551,13 @@ const onSubmenuLeave = (): void => {
 }
 
 const openDevTools = (): void => {
-  if (isDesktop) {
+  if (isElectron()) {
     electronAPI().openDevTools()
   }
 }
 
 const onReinstall = (): void => {
-  if (isDesktop) {
+  if (isElectron()) {
     void electronAPI().reinstall()
   }
 }

src/components/rightSidePanel/RightSidePanel.vue

@@ -14,13 +14,11 @@ import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useExecutionStore } from '@/stores/executionStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-import TabError from './TabError.vue'
 import TabInfo from './info/TabInfo.vue'
 import TabGlobalParameters from './parameters/TabGlobalParameters.vue'
 import TabNodes from './parameters/TabNodes.vue'
@@ -35,7 +33,6 @@ import {
 import SubgraphEditor from './subgraph/SubgraphEditor.vue'
 
 const canvasStore = useCanvasStore()
-const executionStore = useExecutionStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
@@ -90,25 +87,10 @@ function closePanel() {
 type RightSidePanelTabList = Array<{
   label: () => string
   value: RightSidePanelTab
-  icon?: string
 }>
 
-//FIXME all errors if nothing selected?
-const selectedNodeErrors = computed(() =>
-  selectedNodes.value
-    .map((node) => executionStore.getNodeErrors(`${node.id}`))
-    .filter((nodeError) => !!nodeError)
-)
-
 const tabs = computed<RightSidePanelTabList>(() => {
   const list: RightSidePanelTabList = []
-  if (selectedNodeErrors.value.length) {
-    list.push({
-      label: () => t('g.error'),
-      value: 'error',
-      icon: 'icon-[lucide--octagon-alert] bg-node-stroke-error ml-1'
-    })
-  }
 
   list.push({
     label: () =>
@@ -289,7 +271,6 @@ function handleProxyWidgetsUpdate(value: ProxyWidgetsProperty) {
             :value="tab.value"
           >
             {{ tab.label() }}
-            <i v-if="tab.icon" :class="cn(tab.icon, 'size-4')" />
           </Tab>
         </TabList>
       </nav>
@@ -307,7 +288,6 @@ function handleProxyWidgetsUpdate(value: ProxyWidgetsProperty) {
         :node="selectedSingleNode"
       />
       <template v-else>
-        <TabError v-if="activeTab === 'error'" :errors="selectedNodeErrors" />
         <TabSubgraphInputs
           v-if="activeTab === 'parameters' && isSingleSubgraphNode"
           :node="selectedSingleNode as SubgraphNode"

src/components/rightSidePanel/TabError.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import type { NodeError } from '@/schemas/apiSchema'
-
-const { t } = useI18n()
-
-defineProps<{
-  errors: NodeError[]
-}>()
-const { copyToClipboard } = useCopyToClipboard()
-</script>
-<template>
-  <div class="m-4">
-    <Button class="w-full" @click="copyToClipboard(JSON.stringify(errors))">
-      {{ t('g.copy') }}
-      <i class="icon-[lucide--copy] size-4" />
-    </Button>
-  </div>
-  <div
-    v-for="(error, index) in errors.flatMap((ne) => ne.errors)"
-    :key="index"
-    class="px-2"
-  >
-    <h3 class="text-error" v-text="error.message" />
-    <div class="text-muted-foreground" v-text="error.details" />
-  </div>
-</template>

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -83,7 +83,10 @@ const favoriteNode = computed(() =>
 )
 
 const widgetValue = computed({
-  get: () => widget.value,
+  get: () => {
+    widget.vueTrack?.()
+    return widget.value
+  },
   set: (newValue: string | number | boolean | object) => {
     emit('update:widgetValue', newValue)
   }

src/components/rightSidePanel/settings/TabGlobalSettings.vue

@@ -11,7 +11,7 @@ import type { LinkRenderType } from '@/lib/litegraph/src/types/globalEnums'
 import { LinkMarkerShape } from '@/lib/litegraph/src/types/globalEnums'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { WidgetInputBaseClass } from '@/renderer/extensions/vueNodes/widgets/components/layout'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useDialogService } from '@/services/dialogService'
 import { cn } from '@/utils/tailwindUtil'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
@@ -20,7 +20,7 @@ import LayoutField from './LayoutField.vue'
 
 const { t } = useI18n()
 const settingStore = useSettingStore()
-const settingsDialog = useSettingsDialog()
+const dialogService = useDialogService()
 
 // NODES settings
 const showAdvancedParameters = computed({
@@ -92,7 +92,7 @@ function updateGridSpacingFromInput(value: number | null | undefined) {
 }
 
 function openFullSettings() {
-  settingsDialog.show()
+  dialogService.showSettingsDialog()
 }
 </script>
 

src/components/sidebar/ComfyMenuButton.vue

@@ -108,14 +108,15 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import ComfyLogo from '@/components/icons/ComfyLogo.vue'
 import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
+import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import type { SettingPanelType } from '@/platform/settings/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useColorPaletteService } from '@/services/colorPaletteService'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
@@ -128,7 +129,7 @@ const commandStore = useCommandStore()
 const menuItemStore = useMenuItemStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
-const settingsDialog = useSettingsDialog()
+const dialogStore = useDialogStore()
 const managerState = useManagerState()
 const settingStore = useSettingStore()
 
@@ -165,8 +166,15 @@ const translateMenuItem = (item: MenuItem): MenuItem => {
   }
 }
 
-const showSettings = (defaultPanel?: SettingPanelType) => {
-  settingsDialog.show(defaultPanel)
+const showSettings = (defaultPanel?: string) => {
+  dialogStore.showDialog({
+    key: 'global-settings',
+    headerComponent: SettingDialogHeader,
+    component: SettingDialogContent,
+    props: {
+      defaultPanel
+    }
+  })
 }
 
 const showManageExtensions = async () => {

src/components/sidebar/tabs/AssetsSidebarTab.test.ts

@@ -0,0 +1,314 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+const mocks = vi.hoisted(() => ({
+  shiftKey: { value: true },
+  ctrlKey: { value: false },
+  metaKey: { value: false },
+  outputMedia: [] as AssetItem[]
+}))
+
+vi.mock('@vueuse/core', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(actual as object),
+    useDebounceFn: <T extends (...args: never[]) => unknown>(fn: T) => fn,
+    useElementHover: () => ref(false),
+    useResizeObserver: () => undefined,
+    useStorage: <T>(_key: string, initialValue: T) => ref(initialValue),
+    useKeyModifier: (key: string) => {
+      if (key === 'Shift') return mocks.shiftKey
+      if (key === 'Control') return mocks.ctrlKey
+      if (key === 'Meta') return mocks.metaKey
+      return ref(false)
+    }
+  }
+})
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params ? `${key}:${JSON.stringify(params)}` : key,
+    n: (value: number) => String(value)
+  }),
+  createI18n: () => ({
+    global: {
+      t: (key: string, params?: Record<string, unknown>) =>
+        params ? `${key}:${JSON.stringify(params)}` : key
+    }
+  })
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({
+    add: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/assets/composables/media/useMediaAssets', () => ({
+  useMediaAssets: (type: 'input' | 'output') => ({
+    loading: ref(false),
+    error: ref(null),
+    media: ref(type === 'output' ? mocks.outputMedia : []),
+    fetchMediaList: vi.fn(async () => {}),
+    hasMore: ref(false),
+    isLoadingMore: ref(false),
+    loadMore: vi.fn(async () => {})
+  })
+}))
+
+vi.mock('@/platform/assets/composables/useMediaAssetFiltering', () => ({
+  useMediaAssetFiltering: (baseAssets: { value: AssetItem[] }) => ({
+    searchQuery: ref(''),
+    sortBy: ref('newest'),
+    mediaTypeFilters: ref([]),
+    filteredAssets: computed(() => baseAssets.value)
+  })
+}))
+
+vi.mock('@/platform/assets/composables/useOutputStacks', () => ({
+  useOutputStacks: ({ assets }: { assets: { value: AssetItem[] } }) => ({
+    assetItems: computed(() =>
+      assets.value.map((asset) => ({ key: asset.id, asset }))
+    ),
+    selectableAssets: computed(() => assets.value),
+    isStackExpanded: () => false,
+    toggleStack: vi.fn(async () => {})
+  })
+}))
+
+vi.mock('@/platform/assets/composables/useMediaAssetActions', () => ({
+  useMediaAssetActions: () => ({
+    downloadMultipleAssets: vi.fn(),
+    deleteAssets: vi.fn(async () => true),
+    addMultipleToWorkflow: vi.fn(async () => {}),
+    openMultipleWorkflows: vi.fn(async () => {}),
+    exportMultipleWorkflows: vi.fn(async () => {})
+  })
+}))
+
+vi.mock('@/platform/assets/composables/media/assetMappers', () => ({
+  getAssetType: (tags: unknown) =>
+    Array.isArray(tags) && tags.includes('output') ? 'output' : 'input'
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: () => false
+  })
+}))
+
+vi.mock('@/stores/queueStore', () => {
+  class ResultItemImpl {
+    filename: string
+    subfolder: string
+    type: string
+    nodeId: string
+    mediaType: string
+
+    constructor({
+      filename,
+      subfolder,
+      type,
+      nodeId,
+      mediaType
+    }: {
+      filename: string
+      subfolder: string
+      type: string
+      nodeId: string
+      mediaType: string
+    }) {
+      this.filename = filename
+      this.subfolder = subfolder
+      this.type = type
+      this.nodeId = nodeId
+      this.mediaType = mediaType
+    }
+  }
+
+  return {
+    useQueueStore: () => ({
+      activeJobsCount: ref(0),
+      pendingTasks: []
+    }),
+    ResultItemImpl
+  }
+})
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: vi.fn(async () => {})
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    showDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/executionStore', () => ({
+  useExecutionStore: () => ({
+    clearInitializationByPromptIds: vi.fn()
+  })
+}))
+
+vi.mock('@/utils/formatUtil', () => ({
+  formatDuration: (duration: number) => `${duration}ms`,
+  getMediaTypeFromFilename: () => 'image'
+}))
+
+vi.mock('@/utils/tailwindUtil', () => ({
+  cn: (...classes: Array<string | false | null | undefined>) =>
+    classes.filter(Boolean).join(' ')
+}))
+
+vi.mock('@/platform/assets/utils/outputAssetUtil', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(actual as object),
+    resolveOutputAssetItems: vi.fn(async () => [])
+  }
+})
+
+import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
+
+const sidebarTabTemplateStub = {
+  template: `
+    <div>
+      <slot name="alt-title" />
+      <slot name="tool-buttons" />
+      <slot name="header" />
+      <slot name="body" />
+      <slot name="footer" />
+    </div>
+  `
+}
+
+const buttonStub = {
+  template: '<button @click="$emit(\'click\', $event)"><slot /></button>'
+}
+
+const assetsSidebarGridViewStub = {
+  props: {
+    assets: {
+      type: Array,
+      required: true
+    }
+  },
+  template: `
+    <div>
+      <button
+        v-for="asset in assets"
+        :key="asset.id"
+        :data-testid="'asset-' + asset.id"
+        @click.stop="$emit('select-asset', asset, assets)"
+      >
+        {{ asset.name }}
+      </button>
+    </div>
+  `
+}
+
+function createAsset(
+  id: string,
+  name: string,
+  userMetadata?: Record<string, unknown>
+): AssetItem {
+  return {
+    id,
+    name,
+    tags: ['output'],
+    user_metadata: userMetadata
+  }
+}
+
+describe('AssetsSidebarTab', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mocks.shiftKey.value = true
+    mocks.ctrlKey.value = false
+    mocks.metaKey.value = false
+    mocks.outputMedia = []
+  })
+
+  it('shows deduplicated selected count for parent stack and selected children', async () => {
+    const outputs = [
+      {
+        filename: 'parent.png',
+        nodeId: '1',
+        subfolder: 'outputs',
+        url: 'https://example.com/parent.png'
+      }
+    ]
+
+    const parent = createAsset('parent', 'parent.png', {
+      promptId: 'prompt-1',
+      nodeId: '1',
+      subfolder: 'outputs',
+      outputCount: 4,
+      allOutputs: outputs
+    })
+    const child1 = createAsset('child-1', 'child-1.png', {
+      promptId: 'prompt-1',
+      nodeId: '2',
+      subfolder: 'outputs'
+    })
+    const child2 = createAsset('child-2', 'child-2.png', {
+      promptId: 'prompt-1',
+      nodeId: '3',
+      subfolder: 'outputs'
+    })
+    const child3 = createAsset('child-3', 'child-3.png', {
+      promptId: 'prompt-1',
+      nodeId: '4',
+      subfolder: 'outputs'
+    })
+
+    mocks.outputMedia = [parent, child1, child2, child3]
+
+    const wrapper = mount(AssetsSidebarTab, {
+      global: {
+        stubs: {
+          SidebarTabTemplate: sidebarTabTemplateStub,
+          Button: buttonStub,
+          TabList: true,
+          Tab: true,
+          Divider: true,
+          ProgressSpinner: true,
+          NoResultsPlaceholder: true,
+          MediaAssetFilterBar: true,
+          AssetsSidebarListView: true,
+          AssetsSidebarGridView: assetsSidebarGridViewStub,
+          ResultGallery: true,
+          MediaAssetContextMenu: true
+        },
+        mocks: {
+          $t: (key: string, params?: Record<string, unknown>) =>
+            params ? `${key}:${JSON.stringify(params)}` : key
+        }
+      }
+    })
+
+    await wrapper.find('[data-testid="asset-parent"]').trigger('click')
+    await wrapper.find('[data-testid="asset-child-3"]').trigger('click')
+
+    await flushPromises()
+
+    expect(wrapper.text()).toContain(
+      'mediaAsset.selection.selectedCount:{"count":4}'
+    )
+    expect(wrapper.text()).not.toContain(
+      'mediaAsset.selection.selectedCount:{"count":7}'
+    )
+  })
+})

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -35,7 +35,7 @@
       </div>
     </template>
     <template #body>
-      <ElectronDownloadItems v-if="isDesktop" />
+      <ElectronDownloadItems v-if="isElectron()" />
 
       <Divider type="dashed" class="m-2" />
       <TreeExplorer
@@ -69,7 +69,7 @@ import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
 import { ResourceState, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
-import { isDesktop } from '@/platform/distribution/types'
+import { isElectron } from '@/utils/envUtil'
 import { buildTree } from '@/utils/treeUtil'
 
 const modelStore = useModelStore()

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -50,8 +50,7 @@
                 <template #before-label="{ node: treeNode }">
                   <span
                     v-if="
-                      (treeNode.data as ComfyWorkflow)?.isModified ||
-                      !(treeNode.data as ComfyWorkflow)?.isPersisted
+                      treeNode.data?.isModified || !treeNode.data?.isPersisted
                     "
                     >*</span
                   >

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -215,11 +215,7 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
   }
 )
 
-interface TreeExplorerExposed {
-  addFolderCommand: (targetNodeKey: string) => void
-}
-
-const treeExplorerRef = ref<TreeExplorerExposed | null>(null)
+const treeExplorerRef = ref<InstanceType<typeof TreeExplorer> | null>(null)
 defineExpose({
   addNewBookmarkFolder: () => treeExplorerRef.value?.addFolderCommand('root')
 })

src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue

@@ -63,7 +63,7 @@ onUnmounted(() => {
 })
 
 const expandedKeys = inject(InjectKeyExpandedKeys)
-const handleItemDrop = (node: RenderedTreeExplorerNode<ComfyNodeDefImpl>) => {
+const handleItemDrop = (node: RenderedTreeExplorerNode) => {
   if (!expandedKeys) return
   expandedKeys.value[node.key] = true
 }

src/components/toast/InviteAcceptedToast.vue

@@ -1,42 +0,0 @@
-<template>
-  <Toast group="invite-accepted" position="top-right">
-    <template #message="slotProps">
-      <div class="flex items-center gap-2 justify-between w-full">
-        <div class="flex flex-col justify-start">
-          <div class="text-base">
-            {{ slotProps.message.summary }}
-          </div>
-          <div class="mt-1 text-sm text-foreground">
-            {{ slotProps.message.detail.text }} <br />
-            {{ slotProps.message.detail.workspaceName }}
-          </div>
-        </div>
-        <Button
-          size="md"
-          variant="inverted"
-          @click="viewWorkspace(slotProps.message.detail.workspaceId)"
-        >
-          {{ t('workspace.viewWorkspace') }}
-        </Button>
-      </div>
-    </template>
-  </Toast>
-</template>
-
-<script setup lang="ts">
-import { useToast } from 'primevue'
-import Toast from 'primevue/toast'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useWorkspaceSwitch } from '@/platform/auth/workspace/useWorkspaceSwitch'
-
-const { t } = useI18n()
-const toast = useToast()
-const { switchWithConfirmation } = useWorkspaceSwitch()
-
-function viewWorkspace(workspaceId: string) {
-  void switchWithConfirmation(workspaceId)
-  toast.removeGroup('invite-accepted')
-}
-</script>

src/components/topbar/CurrentUserPopoverLegacy.test.ts

@@ -31,15 +31,6 @@ vi.mock('pinia')
 const mockShowSettingsDialog = vi.fn()
 const mockShowTopUpCreditsDialog = vi.fn()
 
-// Mock the settings dialog composable
-vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
-  useSettingsDialog: vi.fn(() => ({
-    show: mockShowSettingsDialog,
-    hide: vi.fn(),
-    showAbout: vi.fn()
-  }))
-}))
-
 // Mock window.open
 const originalWindowOpen = window.open
 beforeEach(() => {
@@ -73,6 +64,7 @@ vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
 // Mock the dialog service
 vi.mock('@/services/dialogService', () => ({
   useDialogService: vi.fn(() => ({
+    showSettingsDialog: mockShowSettingsDialog,
     showTopUpCreditsDialog: mockShowTopUpCreditsDialog
   }))
 }))