[backport cloud/1.37] Templates: Search speed (#8397)

Backport of #8286 to `cloud/1.37`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8397-backport-cloud-1-37-Templates-Search-speed-2f76d73d3650810c96fdd00691f9b2f7)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>

.claude/commands/setup_repo.md

@@ -122,7 +122,7 @@ echo "  pnpm build        - Build for production"
 echo "  pnpm test:unit    - Run unit tests"
 echo "  pnpm typecheck    - Run TypeScript checks"
 echo "  pnpm lint         - Run ESLint"
-echo "  pnpm format       - Format code with oxfmt"
+echo "  pnpm format       - Format code with Prettier"
 echo ""
 echo "Next steps:"
 echo "1. Run 'pnpm dev' to start developing"

.cursor/rules/unit-test.mdc

@@ -0,0 +1,21 @@
+---
+description: Creating unit tests
+globs: 
+alwaysApply: false
+---
+
+# Creating unit tests
+
+- This project uses `vitest` for unit testing
+- Tests are stored in the `test/` directory
+- Tests should be cross-platform compatible; able to run on Windows, macOS, and linux
+  - e.g. the use of `path.resolve`, or `path.join` and `path.sep` to ensure that tests work the same on all platforms
+- Tests should be mocked properly
+  - Mocks should be cleanly written and easy to understand
+  - Mocks should be re-usable where possible
+
+## Unit test style
+
+- Prefer the use of `test.extend` over loose variables
+  - To achieve this, import `test as baseTest` from `vitest`
+- Never use `it`; `test` should be used in place of this

.github/AGENTS.md

@@ -1,14 +0,0 @@
-# PR Review Context
-
-Context for automated PR review system.
-
-## Review Scope
-
-This automated review performs comprehensive analysis:
-- Architecture and design patterns
-- Security vulnerabilities
-- Performance implications
-- Code quality and maintainability
-- Integration concerns
-
-For implementation details, see `.claude/commands/comprehensive-pr-review.md`.

.github/CLAUDE.md

@@ -1,3 +1,36 @@
-<!-- A rose by any other name would smell as sweet,
-     But Claude insists on files named for its own conceit. -->
-@AGENTS.md
+# ComfyUI Frontend - Claude Review Context
+
+This file provides additional context for the automated PR review system.
+
+## Quick Reference
+
+### PrimeVue Component Migrations
+
+When reviewing, flag these deprecated components:
+- `Dropdown` → Use `Select` from 'primevue/select'
+- `OverlayPanel` → Use `Popover` from 'primevue/popover'
+- `Calendar` → Use `DatePicker` from 'primevue/datepicker'
+- `InputSwitch` → Use `ToggleSwitch` from 'primevue/toggleswitch'
+- `Sidebar` → Use `Drawer` from 'primevue/drawer'
+- `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled
+- `TabMenu` → Use `Tabs` without panels
+- `Steps` → Use `Stepper` without panels
+- `InlineMessage` → Use `Message` component
+
+### API Utilities Reference
+
+- `api.apiURL()` - Backend API calls (/prompt, /queue, /view, etc.)
+- `api.fileURL()` - Static file access (templates, extensions)
+- `$t()` / `i18n.global.t()` - Internationalization
+- `DOMPurify.sanitize()` - HTML sanitization
+
+## Review Scope
+
+This automated review performs comprehensive analysis including:
+- Architecture and design patterns
+- Security vulnerabilities
+- Performance implications
+- Code quality and maintainability
+- Integration concerns
+
+For implementation details, see `.claude/commands/comprehensive-pr-review.md`.

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

@@ -42,7 +42,7 @@ jobs:
       - name: Run Stylelint with auto-fix
         run: pnpm stylelint:fix
 
-      - name: Run oxfmt with auto-format
+      - name: Run Prettier with auto-format
         run: pnpm format
 
       - name: Check for changes
@@ -60,7 +60,7 @@ jobs:
           git config --local user.email "action@github.com"
           git config --local user.name "GitHub Action"
           git add .
-          git commit -m "[automated] Apply ESLint and Oxfmt fixes"
+          git commit -m "[automated] Apply ESLint and Prettier fixes"
           git push
 
       - name: Final validation
@@ -80,7 +80,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Oxfmt formatting'
+              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting'
             })
 
       - name: Comment on PR about manual fix needed

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

@@ -144,10 +144,9 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
+      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
@@ -159,10 +158,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm dlx @playwright/test merge-reports --reporter=html ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v4

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

@@ -69,7 +69,7 @@ jobs:
       - name: Checkout ComfyUI (sparse)
         uses: actions/checkout@v5
         with:
-          repository: Comfy-Org/ComfyUI
+          repository: comfyanonymous/ComfyUI
           sparse-checkout: |
             requirements.txt
           path: comfyui
@@ -184,7 +184,7 @@ jobs:
           # Note: This only affects the local checkout, NOT the fork's master branch
           # We only push the automation branch, leaving the fork's master untouched
           echo "Fetching upstream master..."
-          if ! git fetch https://github.com/Comfy-Org/ComfyUI.git master; then
+          if ! git fetch https://github.com/comfyanonymous/ComfyUI.git master; then
             echo "Failed to fetch upstream master"
             exit 1
           fi
@@ -257,7 +257,7 @@ jobs:
           # Extract fork owner from repository name
           FORK_OWNER=$(echo "$COMFYUI_FORK" | cut -d'/' -f1)
 
-          echo "Creating PR from ${COMFYUI_FORK} to Comfy-Org/ComfyUI"
+          echo "Creating PR from ${COMFYUI_FORK} to comfyanonymous/ComfyUI"
 
           # Configure git
           git config user.name "github-actions[bot]"
@@ -288,7 +288,7 @@ jobs:
 
           # Try to create PR, ignore error if it already exists
           if ! gh pr create \
-            --repo Comfy-Org/ComfyUI \
+            --repo comfyanonymous/ComfyUI \
             --head "${FORK_OWNER}:${BRANCH}" \
             --base master \
             --title "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}" \
@@ -297,7 +297,7 @@ jobs:
 
             # Check if PR already exists
             set +e
-            EXISTING_PR=$(gh pr list --repo Comfy-Org/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
+            EXISTING_PR=$(gh pr list --repo comfyanonymous/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
             PR_LIST_EXIT=$?
             set -e
 
@@ -318,7 +318,7 @@ jobs:
         run: |
           echo "## ComfyUI PR Created" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
-          echo "Draft PR created in Comfy-Org/ComfyUI" >> $GITHUB_STEP_SUMMARY
+          echo "Draft PR created in comfyanonymous/ComfyUI" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "### PR Body:" >> $GITHUB_STEP_SUMMARY
           cat pr-body.txt >> $GITHUB_STEP_SUMMARY

.i18nrc.cjs

@@ -1,7 +1,7 @@
 // This file is intentionally kept in CommonJS format (.cjs)
 // to resolve compatibility issues with dependencies that require CommonJS.
 // Do not convert this file to ESModule format unless all dependencies support it.
-const { defineConfig } = require('@lobehub/i18n-cli')
+const { defineConfig } = require('@lobehub/i18n-cli');
 
 module.exports = defineConfig({
   modelName: 'gpt-4.1',
@@ -10,19 +10,7 @@ module.exports = defineConfig({
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: [
-    'zh',
-    'zh-TW',
-    'ru',
-    'ja',
-    'ko',
-    'fr',
-    'es',
-    'ar',
-    'tr',
-    'pt-BR',
-    'fa'
-  ],
+  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR', 'fa'],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
@@ -38,4 +26,4 @@ module.exports = defineConfig({
   - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate.
   - Maintain consistency with terminology used in Persian software and design applications.
   `
-})
+});

.oxfmtrc.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "singleQuote": true,
-  "tabWidth": 2,
-  "semi": false,
-  "trailingComma": "none",
-  "printWidth": 80,
-  "ignorePatterns": [
-    "packages/registry-types/src/comfyRegistryTypes.ts",
-    "src/types/generatedManagerTypes.ts",
-    "**/*.md",
-    "**/*.json",
-    "**/*.css",
-    "**/*.yaml",
-    "**/*.yml",
-    "**/*.html",
-    "**/*.svg",
-    "**/*.xml"
-  ]
-}

.prettierignore

@@ -0,0 +1,2 @@
+packages/registry-types/src/comfyRegistryTypes.ts
+src/types/generatedManagerTypes.ts

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false,
+  "trailingComma": "none",
+  "printWidth": 80,
+  "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@prettier/plugin-oxc", "@trivago/prettier-plugin-sort-imports"]
+}

.storybook/AGENTS.md

@@ -1,17 +0,0 @@
-# Storybook Guidelines
-
-See `@docs/guidance/storybook.md` for story patterns (auto-loaded for `*.stories.ts`).
-
-## Available Context
-
-Stories have access to:
-- All ComfyUI stores
-- PrimeVue with ComfyUI theming
-- i18n system
-- CSS variables and styling
-
-## Troubleshooting
-
-1. **Import Errors**: Verify `@/` alias works
-2. **Missing Styles**: Check CSS imports in `preview.ts`
-3. **Store Errors**: Check store initialization in setup

.storybook/CLAUDE.md

@@ -1,3 +1,197 @@
-<!-- Though standards bloom in open fields so wide,
-     Anthropic walks a path of lonely pride. -->
-@AGENTS.md
+# Storybook Development Guidelines for Claude
+
+## Quick Commands
+
+- `pnpm storybook`: Start Storybook development server
+- `pnpm build-storybook`: Build static Storybook
+- `pnpm test:unit`: Run unit tests (includes Storybook components)
+
+## Development Workflow for Storybook
+
+1. **Creating New Stories**:
+   - Place `*.stories.ts` files alongside components
+   - Follow the naming pattern: `ComponentName.stories.ts`
+   - Use realistic mock data that matches ComfyUI schemas
+
+2. **Testing Stories**:
+   - Verify stories render correctly in Storybook UI
+   - Test different component states and edge cases
+   - Ensure proper theming and styling
+
+3. **Code Quality**:
+   - Run `pnpm typecheck` to verify TypeScript
+   - Run `pnpm lint` to check for linting issues
+   - Follow existing story patterns and conventions
+
+## Story Creation Guidelines
+
+### Basic Story Structure
+
+```typescript
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ComponentName from './ComponentName.vue'
+
+const meta: Meta<typeof ComponentName> = {
+  title: 'Category/ComponentName',
+  component: ComponentName,
+  parameters: {
+    layout: 'centered' // or 'fullscreen', 'padded'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    // Component props
+  }
+}
+```
+
+### Mock Data Patterns
+
+For ComfyUI components, use realistic mock data:
+
+```typescript
+// Node definition mock
+const mockNodeDef = {
+  input: {
+    required: {
+      prompt: ["STRING", { multiline: true }]
+    }
+  },
+  output: ["CONDITIONING"],
+  output_is_list: [false],
+  category: "conditioning"
+}
+
+// Component instance mock
+const mockComponent = {
+  id: "1",
+  type: "CLIPTextEncode",
+  // ... other properties
+}
+```
+
+### Common Story Variants
+
+Always include these story variants when applicable:
+
+- **Default**: Basic component with minimal props
+- **WithData**: Component with realistic data
+- **Loading**: Component in loading state
+- **Error**: Component with error state
+- **LongContent**: Component with edge case content
+- **Empty**: Component with no data
+
+### Storybook-Specific Code Patterns
+
+#### Store Access
+```typescript
+// In stories, access stores through the setup function
+export const WithStore: Story = {
+  render: () => ({
+    setup() {
+      const store = useMyStore()
+      return { store }
+    },
+    template: '<MyComponent :data="store.data" />'
+  })
+}
+```
+
+#### Event Testing
+```typescript
+export const WithEvents: Story = {
+  args: {
+    onUpdate: fn() // Use Storybook's fn() for action logging
+  }
+}
+```
+
+## Configuration Notes
+
+### Vue App Setup
+The Storybook preview is configured with:
+- Pinia stores initialized
+- PrimeVue with ComfyUI theme
+- i18n internationalization
+- All necessary CSS imports
+
+### Build Configuration
+- Vite integration with proper alias resolution
+- Manual chunking for better performance
+- TypeScript support with strict checking
+- CSS processing for Vue components
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Import Errors**: Verify `@/` alias is working correctly
+2. **Missing Styles**: Ensure CSS imports are in `preview.ts`
+3. **Store Errors**: Check store initialization in setup
+4. **Type Errors**: Use proper TypeScript types for story args
+
+### Debug Commands
+
+```bash
+# Check TypeScript issues
+pnpm typecheck
+
+# Lint Storybook files
+pnpm lint .storybook/
+
+# Build to check for production issues
+pnpm build-storybook
+```
+
+## File Organization
+
+```
+.storybook/
+├── main.ts          # Core configuration
+├── preview.ts       # Global setup and decorators
+├── README.md        # User documentation
+└── CLAUDE.md        # This file - Claude guidelines
+
+src/
+├── components/
+│   └── MyComponent/
+│       ├── MyComponent.vue
+│       └── MyComponent.stories.ts
+```
+
+## Integration with ComfyUI
+
+### Available Context
+
+Stories have access to:
+- All ComfyUI stores (widgetStore, colorPaletteStore, etc.)
+- PrimeVue components with ComfyUI theming
+- Internationalization system
+- ComfyUI CSS variables and styling
+
+### Testing Components
+
+When testing ComfyUI-specific components:
+1. Use realistic node definitions and data structures
+2. Test with different node types (sampling, conditioning, etc.)
+3. Verify proper CSS theming and dark/light modes
+4. Check component behavior with various input combinations
+
+### Performance Considerations
+
+- Use manual chunking for large dependencies
+- Minimize bundle size by avoiding unnecessary imports
+- Leverage Storybook's lazy loading capabilities
+- Profile build times and optimize as needed
+
+## Best Practices
+
+1. **Keep Stories Focused**: Each story should demonstrate one specific use case
+2. **Use Descriptive Names**: Story names should clearly indicate what they show
+3. **Document Complex Props**: Use JSDoc comments for complex prop types
+4. **Test Edge Cases**: Create stories for unusual but valid use cases
+5. **Maintain Consistency**: Follow established patterns in existing stories

.storybook/main.ts

@@ -96,15 +96,15 @@ const config: StorybookConfig = {
           }
         ]
       },
+      esbuild: {
+        // Prevent minification of identifiers to preserve _sfc_main
+        minifyIdentifiers: false,
+        keepNames: true
+      },
       build: {
-        rolldownOptions: {
-          experimental: {
-            strictExecutionOrder: true
-          },
+        rollupOptions: {
+          // Disable tree-shaking for Storybook to prevent Vue SFC exports from being removed
           treeshake: false,
-          output: {
-            keepNames: true
-          },
           onwarn: (warning, warn) => {
             // Suppress specific warnings
             if (

.vscode/extensions.json

@@ -1,22 +1,25 @@
 {
   "recommendations": [
-    "antfu.vite",
     "austenc.tailwind-docs",
     "bradlc.vscode-tailwindcss",
     "davidanson.vscode-markdownlint",
     "dbaeumer.vscode-eslint",
-    "donjayamanne.githistory",
     "eamodio.gitlens",
+    "esbenp.prettier-vscode",
+    "figma.figma-vscode-extension",
     "github.vscode-github-actions",
     "github.vscode-pull-request-github",
     "hbenl.vscode-test-explorer",
-    "kisstkondoros.vscode-codemetrics",
     "lokalise.i18n-ally",
     "ms-playwright.playwright",
-    "oxc.oxc-vscode",
-    "sonarsource.sonarlint-vscode",
     "vitest.explorer",
     "vue.volar",
-    "wix.vscode-import-cost"
+    "sonarsource.sonarlint-vscode",
+    "deque-systems.vscode-axe-linter",
+    "kisstkondoros.vscode-codemetrics",
+    "donjayamanne.githistory",
+    "wix.vscode-import-cost",
+    "prograhammer.tslint-vue",
+    "antfu.vite"
   ]
 }

AGENTS.md

@@ -1,7 +1,5 @@
 # Repository Guidelines
 
-See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob).
-
 ## Project Structure & Module Organization
 
 - Source: `src/`
@@ -27,10 +25,10 @@ See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob)
 - Build output: `dist/`
 - Configs
   - `vite.config.mts`
+  - `vitest.config.ts`
   - `playwright.config.ts`
   - `eslint.config.ts`
-  - `.oxfmtrc.json`
-  - `.oxlintrc.json`
+  - `.prettierrc`
   - etc.
 
 ## Monorepo Architecture
@@ -46,23 +44,8 @@ The project uses **Nx** for build orchestration and task management
 - `pnpm test:unit`: Run Vitest unit tests
 - `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`)
 - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
-- `pnpm format` / `pnpm format:check`: oxfmt
+- `pnpm format` / `pnpm format:check`: Prettier
 - `pnpm typecheck`: Vue TSC type checking
-- `pnpm storybook`: Start Storybook development server
-
-## Development Workflow
-
-1. Make code changes
-2. Run relevant tests
-3. Run `pnpm typecheck`, `pnpm lint`, `pnpm format`
-4. Check if README updates are needed
-5. Suggest docs.comfy.org updates for user-facing changes
-
-## Git Conventions
-
-- Use `prefix:` format: `feat:`, `fix:`, `test:`
-- Add "Fixes #n" to PR descriptions
-- Never mention Claude/AI in commits
 
 ## Coding Style & Naming Conventions
 
@@ -72,7 +55,7 @@ The project uses **Nx** for build orchestration and task management
     - Composition API only
   - Tailwind 4 styling
     - Avoid `<style>` blocks
-- Style: (see `.oxfmtrc.json`)
+- Style: (see `.prettierrc`)
   - Indent 2 spaces
   - single quotes
   - no trailing semicolons
@@ -300,12 +283,6 @@ When referencing Comfy-Org repos:
 
 Rules for agent-based coding tasks.
 
-### Chrome DevTools MCP
-
-When using `take_snapshot` to inspect dropdowns, listboxes, or other components with dynamic options:
-- Use `verbose: true` to see the full accessibility tree including list items
-- Non-verbose snapshots often omit nested options in comboboxes/listboxes
-
 ### Temporary Files
 
 - Put planning documents under `/temp/plans/`

CLAUDE.md

@@ -1 +1,30 @@
-@AGENTS.md
+# Claude Code specific instructions
+
+@Agents.md
+
+## Repository Setup
+
+For first-time setup, use the Claude command:
+
+```sh
+/setup_repo
+```
+
+This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
+
+**Prerequisites:** Node.js >= 24, Git repository, available ports for dev server, storybook, etc.
+
+## Development Workflow
+
+1. **First-time setup**: Run `/setup_repo` Claude command
+2. Make code changes
+3. Run tests (see subdirectory CLAUDE.md files)
+4. Run typecheck, lint, format
+5. Check README updates
+6. Consider docs.comfy.org updates
+
+## Git Conventions
+
+- Use `prefix:` format: `feat:`, `fix:`, `test:`
+- Add "Fixes #n" to PR descriptions
+- Never mention Claude/AI in commits

CODEOWNERS

@@ -37,7 +37,7 @@
 /src/components/graph/selectionToolbox/           @Myestery
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery 
 
 # Workflow Templates
 /src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
@@ -55,7 +55,8 @@
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/pt-BR/                               @JonatanAtila @Yorha4D @KarryCharon @shinshin86
 
 # LLM Instructions (blank on purpose)
 .claude/

apps/desktop-ui/vite.config.mts

@@ -64,7 +64,7 @@ export default defineConfig(() => {
       })
     ],
     build: {
-      minify: SHOULD_MINIFY,
+      minify: SHOULD_MINIFY ? ('esbuild' as const) : false,
       target: 'es2022',
       sourcemap: true
     }

browser_tests/AGENTS.md

@@ -1,8 +0,0 @@
-# E2E Testing Guidelines
-
-See `@docs/guidance/playwright.md` for Playwright best practices (auto-loaded for `*.spec.ts`).
-
-## Directory Structure
-
-- `assets/` - Test data (JSON workflows, fixtures)
-- Tests use premade JSON workflows to load desired graph state

browser_tests/CLAUDE.md

@@ -1,3 +1,17 @@
-<!-- In gardens where the agents freely play,
-     One stubborn flower turns the other way. -->
-@AGENTS.md
+# E2E Testing Guidelines
+
+## Browser Tests
+- Test user workflows
+- Use Playwright fixtures
+- Follow naming conventions
+
+## Best Practices
+- Check assets/ for test data
+- Prefer specific selectors
+- Test across viewports
+
+## Testing Process
+After code changes:
+1. Create browser tests as appropriate
+2. Run tests until passing
+3. Then run typecheck, lint, format

browser_tests/fixtures/ComfyPage.ts

@@ -3,7 +3,7 @@ import { test as base, expect } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'
 
-import type { LGraphNode, LGraph } from '../../src/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
 import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
@@ -21,6 +21,7 @@ import {
 import { Topbar } from './components/Topbar'
 import type { Position, Size } from './types'
 import { NodeReference, SubgraphSlotReference } from './utils/litegraphUtils'
+import TaskHistory from './utils/taskHistory'
 
 dotenv.config()
 
@@ -145,6 +146,8 @@ class ConfirmDialog {
 }
 
 export class ComfyPage {
+  private _history: TaskHistory | null = null
+
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
   public readonly canvas: Locator
@@ -298,6 +301,11 @@ export class ComfyPage {
     }
   }
 
+  setupHistory(): TaskHistory {
+    this._history ??= new TaskHistory(this)
+    return this._history
+  }
+
   async setup({
     clearStorage = true,
     mockReleases = true
@@ -1583,29 +1591,14 @@ export class ComfyPage {
       return window['app'].graph.nodes
     })
   }
-  async waitForGraphNodes(count: number) {
-    await this.page.waitForFunction((count) => {
-      return window['app']?.canvas.graph?.nodes?.length === count
-    }, count)
-  }
-  async getNodeRefsByType(
-    type: string,
-    includeSubgraph: boolean = false
-  ): Promise<NodeReference[]> {
+  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
     return Promise.all(
       (
-        await this.page.evaluate(
-          ({ type, includeSubgraph }) => {
-            const graph = (
-              includeSubgraph ? window['app'].canvas.graph : window['app'].graph
-            ) as LGraph
-            const nodes = graph.nodes
-            return nodes
-              .filter((n: LGraphNode) => n.type === type)
-              .map((n: LGraphNode) => n.id)
-          },
-          { type, includeSubgraph }
-        )
+        await this.page.evaluate((type) => {
+          return window['app'].graph.nodes
+            .filter((n: LGraphNode) => n.type === type)
+            .map((n: LGraphNode) => n.id)
+        }, type)
       ).map((id: NodeId) => this.getNodeRefById(id))
     )
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -159,18 +159,8 @@ export class VueNodeHelpers {
   getInputNumberControls(widget: Locator) {
     return {
       input: widget.locator('input'),
-      decrementButton: widget.getByTestId('decrement'),
-      incrementButton: widget.getByTestId('increment')
+      incrementButton: widget.locator('button').first(),
+      decrementButton: widget.locator('button').nth(1)
     }
   }
-
-  /**
-   * Enter the subgraph of a node.
-   * @param nodeId - The ID of the node to enter the subgraph of. If not provided, the first matched subgraph will be entered.
-   */
-  async enterSubgraph(nodeId?: string): Promise<void> {
-    const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
-    const editButton = locator.getByTestId('subgraph-enter-button')
-    await editButton.click()
-  }
 }

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -79,15 +79,48 @@ export class SubgraphSlotReference {
 
         const node =
           type === 'input' ? currentGraph.inputNode : currentGraph.outputNode
+        const slots =
+          type === 'input' ? currentGraph.inputs : currentGraph.outputs
 
         if (!node) {
           throw new Error(`No ${type} node found in subgraph`)
         }
 
+        // Calculate position for next available slot
+        // const nextSlotIndex = slots?.length || 0
+        // const slotHeight = 20
+        // const slotY = node.pos[1] + 30 + nextSlotIndex * slotHeight
+
+        // Find last slot position
+        const lastSlot = slots.at(-1)
+        let slotX: number
+        let slotY: number
+
+        if (lastSlot) {
+          // If there are existing slots, position the new one below the last one
+          const gapHeight = 20
+          slotX = lastSlot.pos[0]
+          slotY = lastSlot.pos[1] + gapHeight
+        } else {
+          // No existing slots - use slotAnchorX if available, otherwise calculate from node position
+          if (currentGraph.slotAnchorX !== undefined) {
+            // The actual slot X position seems to be slotAnchorX - 10
+            slotX = currentGraph.slotAnchorX - 10
+          } else {
+            // Fallback: calculate from node edge
+            slotX =
+              type === 'input'
+                ? node.pos[0] + node.size[0] - 10 // Right edge for input node
+                : node.pos[0] + 10 // Left edge for output node
+          }
+          // For Y position when no slots exist, use middle of node
+          slotY = node.pos[1] + node.size[1] / 2
+        }
+
         // Convert from offset to canvas coordinates
         const canvasPos = window['app'].canvas.ds.convertOffsetToCanvas([
-          node.emptySlot.pos[0],
-          node.emptySlot.pos[1]
+          slotX,
+          slotY
         ])
         return canvasPos
       },
@@ -119,7 +152,8 @@ class NodeSlotReference {
           window['app'].canvas.ds.convertOffsetToCanvas(rawPos)
 
         // Debug logging - convert Float64Arrays to regular arrays for visibility
-        console.warn(
+        // eslint-disable-next-line no-console
+        console.log(
           `NodeSlotReference debug for ${type} slot ${index} on node ${id}:`,
           {
             nodePos: [node.pos[0], node.pos[1]],

browser_tests/fixtures/utils/taskHistory.ts

@@ -0,0 +1,164 @@
+import type { Request, Route } from '@playwright/test'
+import _ from 'es-toolkit/compat'
+import fs from 'fs'
+import path from 'path'
+import { v4 as uuidv4 } from 'uuid'
+
+import type {
+  HistoryTaskItem,
+  TaskItem,
+  TaskOutput
+} from '../../../src/schemas/apiSchema'
+import type { ComfyPage } from '../ComfyPage'
+
+/** keyof TaskOutput[string] */
+type OutputFileType = 'images' | 'audio' | 'animated'
+
+const DEFAULT_IMAGE = 'example.webp'
+
+const getFilenameParam = (request: Request) => {
+  const url = new URL(request.url())
+  return url.searchParams.get('filename') || DEFAULT_IMAGE
+}
+
+const getContentType = (filename: string, fileType: OutputFileType) => {
+  const subtype = path.extname(filename).slice(1)
+  switch (fileType) {
+    case 'images':
+      return `image/${subtype}`
+    case 'audio':
+      return `audio/${subtype}`
+    case 'animated':
+      return `video/${subtype}`
+  }
+}
+
+const setQueueIndex = (task: TaskItem) => {
+  task.prompt[0] = TaskHistory.queueIndex++
+}
+
+const setPromptId = (task: TaskItem) => {
+  task.prompt[1] = uuidv4()
+}
+
+export default class TaskHistory {
+  static queueIndex = 0
+  static readonly defaultTask: Readonly<HistoryTaskItem> = {
+    prompt: [0, 'prompt-id', {}, { client_id: uuidv4() }, []],
+    outputs: {},
+    status: {
+      status_str: 'success',
+      completed: true,
+      messages: []
+    },
+    taskType: 'History'
+  }
+  private tasks: HistoryTaskItem[] = []
+  private outputContentTypes: Map<string, string> = new Map()
+
+  constructor(readonly comfyPage: ComfyPage) {}
+
+  private loadAsset: (filename: string) => Buffer = _.memoize(
+    (filename: string) => {
+      const filePath = this.comfyPage.assetPath(filename)
+      return fs.readFileSync(filePath)
+    }
+  )
+
+  private async handleGetHistory(route: Route) {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(this.tasks)
+    })
+  }
+
+  private async handleGetView(route: Route) {
+    const fileName = getFilenameParam(route.request())
+    if (!this.outputContentTypes.has(fileName)) {
+      return route.continue()
+    }
+
+    const asset = this.loadAsset(fileName)
+    return route.fulfill({
+      status: 200,
+      contentType: this.outputContentTypes.get(fileName),
+      body: asset,
+      headers: {
+        'Cache-Control': 'public, max-age=31536000',
+        'Content-Length': asset.byteLength.toString()
+      }
+    })
+  }
+
+  async setupRoutes() {
+    return this.comfyPage.page.route(
+      /.*\/api\/(view|history)(\?.*)?$/,
+      async (route) => {
+        const request = route.request()
+        const method = request.method()
+
+        const isViewReq = request.url().includes('view') && method === 'GET'
+        if (isViewReq) return this.handleGetView(route)
+
+        const isHistoryPath = request.url().includes('history')
+        const isGetHistoryReq = isHistoryPath && method === 'GET'
+        if (isGetHistoryReq) return this.handleGetHistory(route)
+
+        const isClearReq =
+          method === 'POST' &&
+          isHistoryPath &&
+          request.postDataJSON()?.clear === true
+        if (isClearReq) return this.clearTasks()
+
+        return route.continue()
+      }
+    )
+  }
+
+  private createOutputs(
+    filenames: string[],
+    filetype: OutputFileType
+  ): TaskOutput {
+    return filenames.reduce((outputs, filename, i) => {
+      const nodeId = `${i + 1}`
+      outputs[nodeId] = {
+        [filetype]: [{ filename, subfolder: '', type: 'output' }]
+      }
+      const contentType = getContentType(filename, filetype)
+      this.outputContentTypes.set(filename, contentType)
+      return outputs
+    }, {})
+  }
+
+  private addTask(task: HistoryTaskItem) {
+    setPromptId(task)
+    setQueueIndex(task)
+    this.tasks.unshift(task) // Tasks are added to the front of the queue
+  }
+
+  clearTasks(): this {
+    this.tasks = []
+    return this
+  }
+
+  withTask(
+    outputFilenames: string[],
+    outputFiletype: OutputFileType = 'images',
+    overrides: Partial<HistoryTaskItem> = {}
+  ): this {
+    this.addTask({
+      ...TaskHistory.defaultTask,
+      outputs: this.createOutputs(outputFilenames, outputFiletype),
+      ...overrides
+    })
+    return this
+  }
+
+  /** Repeats the last task in the task history a specified number of times. */
+  repeat(n: number): this {
+    for (let i = 0; i < n; i++)
+      this.addTask(structuredClone(this.tasks.at(0)) as HistoryTaskItem)
+    return this
+  }
+}

browser_tests/tests/featureFlags.spec.ts

@@ -27,7 +27,7 @@ test.describe('Feature Flags', () => {
         try {
           const parsed = JSON.parse(data)
           if (parsed.type === 'feature_flags') {
-            window.__capturedMessages!.clientFeatureFlags = parsed
+            window.__capturedMessages.clientFeatureFlags = parsed
           }
         } catch (e) {
           // Not JSON, ignore
@@ -41,7 +41,7 @@ test.describe('Feature Flags', () => {
           window['app']?.api?.serverFeatureFlags &&
           Object.keys(window['app'].api.serverFeatureFlags).length > 0
         ) {
-          window.__capturedMessages!.serverFeatureFlags =
+          window.__capturedMessages.serverFeatureFlags =
             window['app'].api.serverFeatureFlags
           clearInterval(checkInterval)
         }
@@ -57,8 +57,8 @@ test.describe('Feature Flags', () => {
     // Wait for both client and server feature flags
     await newPage.waitForFunction(
       () =>
-        window.__capturedMessages!.clientFeatureFlags !== null &&
-        window.__capturedMessages!.serverFeatureFlags !== null,
+        window.__capturedMessages.clientFeatureFlags !== null &&
+        window.__capturedMessages.serverFeatureFlags !== null,
       { timeout: 10000 }
     )
 
@@ -66,27 +66,27 @@ test.describe('Feature Flags', () => {
     const messages = await newPage.evaluate(() => window.__capturedMessages)
 
     // Verify client sent feature flags
-    expect(messages!.clientFeatureFlags).toBeTruthy()
-    expect(messages!.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
-    expect(messages!.clientFeatureFlags).toHaveProperty('data')
-    expect(messages!.clientFeatureFlags!.data).toHaveProperty(
+    expect(messages.clientFeatureFlags).toBeTruthy()
+    expect(messages.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
+    expect(messages.clientFeatureFlags).toHaveProperty('data')
+    expect(messages.clientFeatureFlags.data).toHaveProperty(
       'supports_preview_metadata'
     )
     expect(
-      typeof messages!.clientFeatureFlags!.data.supports_preview_metadata
+      typeof messages.clientFeatureFlags.data.supports_preview_metadata
     ).toBe('boolean')
 
     // Verify server sent feature flags back
-    expect(messages!.serverFeatureFlags).toBeTruthy()
-    expect(messages!.serverFeatureFlags).toHaveProperty(
+    expect(messages.serverFeatureFlags).toBeTruthy()
+    expect(messages.serverFeatureFlags).toHaveProperty(
       'supports_preview_metadata'
     )
-    expect(typeof messages!.serverFeatureFlags!.supports_preview_metadata).toBe(
+    expect(typeof messages.serverFeatureFlags.supports_preview_metadata).toBe(
       'boolean'
     )
-    expect(messages!.serverFeatureFlags).toHaveProperty('max_upload_size')
-    expect(typeof messages!.serverFeatureFlags!.max_upload_size).toBe('number')
-    expect(Object.keys(messages!.serverFeatureFlags!).length).toBeGreaterThan(0)
+    expect(messages.serverFeatureFlags).toHaveProperty('max_upload_size')
+    expect(typeof messages.serverFeatureFlags.max_upload_size).toBe('number')
+    expect(Object.keys(messages.serverFeatureFlags).length).toBeGreaterThan(0)
 
     await newPage.close()
   })
@@ -96,7 +96,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
-      return window['app']!.api.serverFeatureFlags
+      return window['app'].api.serverFeatureFlags
     })
 
     // Verify we received real feature flags from the backend
@@ -115,7 +115,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test serverSupportsFeature with real backend flags
     const supportsPreviewMetadata = await comfyPage.page.evaluate(() => {
-      return window['app']!.api.serverSupportsFeature(
+      return window['app'].api.serverSupportsFeature(
         'supports_preview_metadata'
       )
     })
@@ -124,17 +124,15 @@ test.describe('Feature Flags', () => {
 
     // Test non-existent feature - should always return false
     const supportsNonExistent = await comfyPage.page.evaluate(() => {
-      return window['app']!.api.serverSupportsFeature(
-        'non_existent_feature_xyz'
-      )
+      return window['app'].api.serverSupportsFeature('non_existent_feature_xyz')
     })
     expect(supportsNonExistent).toBe(false)
 
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
       // Temporarily modify serverFeatureFlags to test behavior
-      const original = window['app']!.api.serverFeatureFlags
-      window['app']!.api.serverFeatureFlags = {
+      const original = window['app'].api.serverFeatureFlags
+      window['app'].api.serverFeatureFlags = {
         bool_true: true,
         bool_false: false,
         string_value: 'yes',
@@ -143,15 +141,15 @@ test.describe('Feature Flags', () => {
       }
 
       const results = {
-        bool_true: window['app']!.api.serverSupportsFeature('bool_true'),
-        bool_false: window['app']!.api.serverSupportsFeature('bool_false'),
-        string_value: window['app']!.api.serverSupportsFeature('string_value'),
-        number_value: window['app']!.api.serverSupportsFeature('number_value'),
-        null_value: window['app']!.api.serverSupportsFeature('null_value')
+        bool_true: window['app'].api.serverSupportsFeature('bool_true'),
+        bool_false: window['app'].api.serverSupportsFeature('bool_false'),
+        string_value: window['app'].api.serverSupportsFeature('string_value'),
+        number_value: window['app'].api.serverSupportsFeature('number_value'),
+        null_value: window['app'].api.serverSupportsFeature('null_value')
       }
 
       // Restore original
-      window['app']!.api.serverFeatureFlags = original
+      window['app'].api.serverFeatureFlags = original
       return results
     })
 
@@ -168,20 +166,20 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test getServerFeature method
     const previewMetadataValue = await comfyPage.page.evaluate(() => {
-      return window['app']!.api.getServerFeature('supports_preview_metadata')
+      return window['app'].api.getServerFeature('supports_preview_metadata')
     })
     expect(typeof previewMetadataValue).toBe('boolean')
 
     // Test getting max_upload_size
     const maxUploadSize = await comfyPage.page.evaluate(() => {
-      return window['app']!.api.getServerFeature('max_upload_size')
+      return window['app'].api.getServerFeature('max_upload_size')
     })
     expect(typeof maxUploadSize).toBe('number')
     expect(maxUploadSize).toBeGreaterThan(0)
 
     // Test getServerFeature with default value for non-existent feature
     const defaultValue = await comfyPage.page.evaluate(() => {
-      return window['app']!.api.getServerFeature(
+      return window['app'].api.getServerFeature(
         'non_existent_feature_xyz',
         'default'
       )
@@ -194,7 +192,7 @@ test.describe('Feature Flags', () => {
   }) => {
     // Test getServerFeatures returns all flags
     const allFeatures = await comfyPage.page.evaluate(() => {
-      return window['app']!.api.getServerFeatures()
+      return window['app'].api.getServerFeatures()
     })
 
     expect(allFeatures).toBeTruthy()
@@ -207,14 +205,14 @@ test.describe('Feature Flags', () => {
   test('Client feature flags are immutable', async ({ comfyPage }) => {
     // Test that getClientFeatureFlags returns a copy
     const immutabilityTest = await comfyPage.page.evaluate(() => {
-      const flags1 = window['app']!.api.getClientFeatureFlags()
-      const flags2 = window['app']!.api.getClientFeatureFlags()
+      const flags1 = window['app'].api.getClientFeatureFlags()
+      const flags2 = window['app'].api.getClientFeatureFlags()
 
       // Modify the first object
       flags1.test_modification = true
 
       // Get flags again to check if original was modified
-      const flags3 = window['app']!.api.getClientFeatureFlags()
+      const flags3 = window['app'].api.getClientFeatureFlags()
 
       return {
         areEqual: flags1 === flags2,
@@ -240,14 +238,14 @@ test.describe('Feature Flags', () => {
   }) => {
     const immutabilityTest = await comfyPage.page.evaluate(() => {
       // Get a copy of server features
-      const features1 = window['app']!.api.getServerFeatures()
+      const features1 = window['app'].api.getServerFeatures()
 
       // Try to modify it
       features1.supports_preview_metadata = false
       features1.new_feature = 'added'
 
       // Get another copy
-      const features2 = window['app']!.api.getServerFeatures()
+      const features2 = window['app'].api.getServerFeatures()
 
       return {
         modifiedValue: features1.supports_preview_metadata,
@@ -276,8 +274,7 @@ test.describe('Feature Flags', () => {
     // Set up monitoring before navigation
     await newPage.addInitScript(() => {
       // Track when various app components are ready
-
-      window.__appReadiness = {
+      ;(window as any).__appReadiness = {
         featureFlagsReceived: false,
         apiInitialized: false,
         appInitialized: false
@@ -289,10 +286,7 @@ test.describe('Feature Flags', () => {
           window['app']?.api?.serverFeatureFlags?.supports_preview_metadata !==
           undefined
         ) {
-          window.__appReadiness = {
-            ...window.__appReadiness,
-            featureFlagsReceived: true
-          }
+          ;(window as any).__appReadiness.featureFlagsReceived = true
           clearInterval(checkFeatureFlags)
         }
       }, 10)
@@ -300,10 +294,7 @@ test.describe('Feature Flags', () => {
       // Monitor API initialization
       const checkApi = setInterval(() => {
         if (window['app']?.api) {
-          window.__appReadiness = {
-            ...window.__appReadiness,
-            apiInitialized: true
-          }
+          ;(window as any).__appReadiness.apiInitialized = true
           clearInterval(checkApi)
         }
       }, 10)
@@ -311,10 +302,7 @@ test.describe('Feature Flags', () => {
       // Monitor app initialization
       const checkApp = setInterval(() => {
         if (window['app']?.graph) {
-          window.__appReadiness = {
-            ...window.__appReadiness,
-            appInitialized: true
-          }
+          ;(window as any).__appReadiness.appInitialized = true
           clearInterval(checkApp)
         }
       }, 10)
@@ -343,8 +331,8 @@ test.describe('Feature Flags', () => {
     // Get readiness state
     const readiness = await newPage.evaluate(() => {
       return {
-        ...window.__appReadiness,
-        currentFlags: window['app']!.api.serverFeatureFlags
+        ...(window as any).__appReadiness,
+        currentFlags: window['app'].api.serverFeatureFlags
       }
     })
 

browser_tests/tests/mobileBaseline.spec.ts

@@ -22,14 +22,8 @@ test.describe('Mobile Baseline Snapshots', () => {
   test('@mobile settings dialog', async ({ comfyPage }) => {
     await comfyPage.settingDialog.open()
     await comfyPage.nextFrame()
-
     await expect(comfyPage.settingDialog.root).toHaveScreenshot(
-      'mobile-settings-dialog.png',
-      {
-        mask: [
-          comfyPage.settingDialog.root.getByTestId('current-user-indicator')
-        ]
-      }
+      'mobile-settings-dialog.png'
     )
   })
 })

browser_tests/tests/nodeHelp.spec.ts

@@ -2,17 +2,15 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import { fitToViewInstant } from '../helpers/fitToView'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 // TODO: there might be a better solution for this
 // Helper function to pan canvas and select node
-async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
+async function selectNodeWithPan(comfyPage: any, nodeRef: any) {
   const nodePos = await nodeRef.getPosition()
 
   await comfyPage.page.evaluate((pos) => {
-    const app = window['app']!
+    const app = window['app']
     const canvas = app.canvas
     canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
     canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
@@ -347,7 +345,7 @@ This is documentation for a custom node.
 
       // Find and select a custom/group node
       const nodeRefs = await comfyPage.page.evaluate(() => {
-        return window['app']!.graph!.nodes.map((n) => n.id)
+        return window['app'].graph.nodes.map((n: any) => n.id)
       })
       if (nodeRefs.length > 0) {
         const firstNode = await comfyPage.getNodeRefById(nodeRefs[0])

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

@@ -8,11 +8,13 @@ test.describe('Properties panel', () => {
 
     const { propertiesPanel } = comfyPage.menu
 
-    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')
+    await expect(propertiesPanel.panelTitle).toContainText(
+      'No item(s) selected'
+    )
 
     await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
 
-    await expect(propertiesPanel.panelTitle).toContainText('3 items selected')
+    await expect(propertiesPanel.panelTitle).toContainText('3 nodes selected')
     await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
     await expect(
       propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -16,7 +15,7 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     await comfyPage.nextFrame()
   })
 
-  const openMoreOptions = async (comfyPage: ComfyPage) => {
+  const openMoreOptions = async (comfyPage: any) => {
     const ksamplerNodes = await comfyPage.getNodeRefsByTitle('KSampler')
     if (ksamplerNodes.length === 0) {
       throw new Error('No KSampler nodes found')

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -102,7 +102,7 @@ test.describe('Vue Node Link Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    // await comfyPage.setup()
+    await comfyPage.setup()
     await comfyPage.loadWorkflow('vueNodes/simple-triple')
     await comfyPage.vueNodes.waitForNodes()
     await fitToViewInstant(comfyPage)
@@ -419,7 +419,7 @@ test.describe('Vue Node Link Interaction', () => {
     // This avoids relying on an exact path hit-test position.
     await comfyPage.page.evaluate(
       ([targetNodeId, targetSlot, clientPoint]) => {
-        const app = window['app']
+        const app = (window as any)['app']
         const graph = app?.canvas?.graph ?? app?.graph
         if (!graph) throw new Error('Graph not available')
         const node = graph.getNodeById(targetNodeId)
@@ -505,7 +505,7 @@ test.describe('Vue Node Link Interaction', () => {
     // This avoids relying on an exact path hit-test position.
     await comfyPage.page.evaluate(
       ([targetNodeId, targetSlot, clientPoint]) => {
-        const app = window['app']
+        const app = (window as any)['app']
         const graph = app?.canvas?.graph ?? app?.graph
         if (!graph) throw new Error('Graph not available')
         const node = graph.getNodeById(targetNodeId)
@@ -993,51 +993,4 @@ test.describe('Vue Node Link Interaction', () => {
       expect(linked).toBe(true)
     })
   })
-
-  test('Dragging from subgraph input connects to correct slot', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    // Setup workflow with a KSampler node
-    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
-    await comfyPage.waitForGraphNodes(0)
-    await comfyPage.executeCommand('Workspace.SearchBox.Toggle')
-    await comfyPage.nextFrame()
-    await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-    await comfyPage.waitForGraphNodes(1)
-
-    // Convert the KSampler node to a subgraph
-    let ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler'))?.[0]
-    await comfyPage.vueNodes.selectNode(String(ksamplerNode.id))
-    await comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph')
-
-    // Enter the subgraph
-    await comfyPage.vueNodes.enterSubgraph()
-    await fitToViewInstant(comfyPage)
-
-    // Get the KSampler node inside the subgraph
-    ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler', true))?.[0]
-    const positiveInput = await ksamplerNode.getInput(1)
-    const negativeInput = await ksamplerNode.getInput(2)
-
-    const positiveInputPos = await getSlotCenter(
-      comfyPage.page,
-      ksamplerNode.id,
-      1,
-      true
-    )
-
-    const sourceSlot = await comfyPage.getSubgraphInputSlot()
-    const calculatedSourcePos = await sourceSlot.getOpenSlotPosition()
-
-    await comfyMouse.move(calculatedSourcePos)
-    await comfyMouse.drag(positiveInputPos)
-    await comfyMouse.drop()
-
-    // Verify connection went to the correct slot
-    const positiveLinks = await positiveInput.getLinkCount()
-    const negativeLinks = await negativeInput.getLinkCount()
-    expect(positiveLinks).toBe(1)
-    expect(negativeLinks).toBe(0)
-  })
 })

build/plugins/comfyAPIPlugin.ts

@@ -76,7 +76,6 @@ function getModuleName(id: string): string {
 export function comfyAPIPlugin(isDev: boolean): Plugin {
   return {
     name: 'comfy-api-plugin',
-    apply: 'build',
     transform(code: string, id: string) {
       if (isDev) return null
 

build/tsconfig.json

@@ -5,7 +5,7 @@
     "noEmit": true,
     "strict": true,
     "esModuleInterop": true,
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

docs/guidance/playwright.md

@@ -1,33 +0,0 @@
----
-globs:
-  - '**/*.spec.ts'
----
-
-# Playwright E2E Test Conventions
-
-See `docs/testing/*.md` for detailed patterns.
-
-## Best Practices
-
-- Follow [Playwright Best Practices](https://playwright.dev/docs/best-practices)
-- Do NOT use `waitForTimeout` - use Locator actions and retrying assertions
-- Prefer specific selectors (role, label, test-id)
-- Test across viewports
-
-## Test Tags
-
-Tags are respected by config:
-- `@mobile` - Mobile viewport tests
-- `@2x` - High DPI tests
-
-## Test Data
-
-- Check `browser_tests/assets/` for test data and fixtures
-- Use realistic ComfyUI workflows for E2E tests
-
-## Running Tests
-
-```bash
-pnpm test:browser                 # Run all E2E tests
-pnpm test:browser -- --ui         # Interactive UI mode
-```

docs/guidance/storybook.md

@@ -1,55 +0,0 @@
----
-globs:
-  - '**/*.stories.ts'
----
-
-# Storybook Conventions
-
-## File Placement
-
-Place `*.stories.ts` files alongside their components:
-```
-src/components/MyComponent/
-├── MyComponent.vue
-└── MyComponent.stories.ts
-```
-
-## Story Structure
-
-```typescript
-import type { Meta, StoryObj } from '@storybook/vue3'
-import ComponentName from './ComponentName.vue'
-
-const meta: Meta<typeof ComponentName> = {
-  title: 'Category/ComponentName',
-  component: ComponentName,
-  parameters: { layout: 'centered' }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { /* props */ }
-}
-```
-
-## Required Story Variants
-
-Include when applicable:
-- **Default** - Minimal props
-- **WithData** - Realistic data
-- **Loading** - Loading state
-- **Error** - Error state
-- **Empty** - No data
-
-## Mock Data
-
-Use realistic ComfyUI schemas for mocks (node definitions, components).
-
-## Running Storybook
-
-```bash
-pnpm storybook        # Development server
-pnpm build-storybook  # Production build
-```

docs/guidance/typescript.md

@@ -1,37 +0,0 @@
----
-globs:
-  - '**/*.ts'
-  - '**/*.tsx'
-  - '**/*.vue'
----
-
-# TypeScript Conventions
-
-## Type Safety
-
-- Never use `any` type - use proper TypeScript types
-- Never use `as any` type assertions - fix the underlying type issue
-- Type assertions are a last resort; they lead to brittle code
-- Avoid `@ts-expect-error` - fix the underlying issue instead
-
-## Utility Libraries
-
-- Use `es-toolkit` for utility functions (not lodash)
-
-## API Utilities
-
-When making API calls in `src/`:
-
-```typescript
-// ✅ Correct - use api helpers
-const response = await api.get(api.apiURL('/prompt'))
-const template = await fetch(api.fileURL('/templates/default.json'))
-
-// ❌ Wrong - direct URL construction
-const response = await fetch('/api/prompt')
-```
-
-## Security
-
-- Sanitize HTML with `DOMPurify.sanitize()`
-- Never log secrets or sensitive data

docs/guidance/vitest.md

@@ -1,36 +0,0 @@
----
-globs:
-  - '**/*.test.ts'
----
-
-# Vitest Unit Test Conventions
-
-See `docs/testing/*.md` for detailed patterns.
-
-## Test Quality
-
-- Do not write change detector tests (tests that just assert defaults)
-- Do not write tests dependent on non-behavioral features (styles, classes)
-- Do not write tests that just test mocks - ensure real code is exercised
-- Be parsimonious; avoid redundant tests
-
-## Mocking
-
-- Use Vitest's mocking utilities (`vi.mock`, `vi.spyOn`)
-- Keep module mocks contained - no global mutable state
-- Use `vi.hoisted()` for per-test mock manipulation
-- Don't mock what you don't own
-
-## Component Testing
-
-- Use Vue Test Utils for component tests
-- Follow advice about making components easy to test
-- Wait for reactivity with `await nextTick()` after state changes
-
-## Running Tests
-
-```bash
-pnpm test:unit                    # Run all unit tests
-pnpm test:unit -- path/to/file    # Run specific test
-pnpm test:unit -- --watch         # Watch mode
-```

docs/guidance/vue-components.md

@@ -1,46 +0,0 @@
----
-globs:
-  - '**/*.vue'
----
-
-# Vue Component Conventions
-
-Applies to all `.vue` files anywhere in the codebase.
-
-## Vue 3 Composition API
-
-- Use `<script setup lang="ts">` for component logic
-- Destructure props (Vue 3.5 style with defaults) like `const { color = 'blue' } = defineProps<...>()`
-- Use `ref`/`reactive` for state
-- Use `computed()` for derived state
-- Use lifecycle hooks: `onMounted`, `onUpdated`, etc.
-
-## Component Communication
-
-- Prefer `emit/@event-name` for state changes (promotes loose coupling)
-- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
-- Proper props and emits definitions
-
-## VueUse Composables
-
-Prefer VueUse composables over manual event handling:
-
-- `useElementHover` instead of manual mouseover/mouseout listeners
-- `useIntersectionObserver` for visibility detection instead of scroll handlers
-- `useFocusTrap` for modal/dialog focus management
-- `useEventListener` for auto-cleanup event listeners
-
-Prefer Vue native options when available:
-
-- `defineModel` instead of `useVModel` for two-way binding with props
-
-## Styling
-
-- Use inline Tailwind CSS only (no `<style>` blocks)
-- Use `cn()` from `@/utils/tailwindUtil` for conditional classes
-- Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
-
-## Best Practices
-
-- Extract complex conditionals to `computed`
-- In unmounted hooks, implement cleanup for async operations

eslint.config.ts

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

index.html

@@ -10,21 +10,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <!-- Status bar style (eg. black or transparent) -->
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <style>
-      @media (prefers-color-scheme: dark) {
-        body {
-          /* Setting it early for background during load */
-          --bg-color: #202020;
-        }
-      }
-      body {
-        background-color: var(--bg-color);
-        background-image: var(--bg-img);
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
-      }
-    </style>    
+    
     <link rel="manifest" href="manifest.json">
   </head>
   

lint-staged.config.ts

@@ -1,9 +1,6 @@
 import path from 'node:path'
 
 export default {
-  'tests-ui/**': () =>
-    'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
-
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => [
@@ -17,7 +14,7 @@ function formatAndEslint(fileNames: string[]) {
   const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
   const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
   return [
-    `pnpm exec oxfmt --write ${joinedPaths}`,
+    `pnpm exec prettier --cache --write ${joinedPaths}`,
     `pnpm exec oxlint --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]

manifest.json

@@ -3,14 +3,7 @@
   "short_name": "ComfyUI",
   "description": "ComfyUI: AI image generation platform",
   "start_url": "/",
-  "icons": [
-    {
-      "src": "/assets/images/comfy-logo-single.svg",
-      "sizes": "any",
-      "type": "image/svg+xml"
-    }
-  ],
   "display": "standalone",
-  "background_color": "#172dd7",
-  "theme_color": "#f0ff41"
+  "background_color": "#ffffff",
+  "theme_color": "#000000"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.38.10",
+  "version": "1.37.10",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -22,8 +22,10 @@
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
-    "format:check": "oxfmt --check",
-    "format": "oxfmt --write",
+    "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
+    "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
+    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
+    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "knip:no-cache": "knip",
     "knip": "knip --cache",
@@ -61,12 +63,14 @@
     "@nx/vite": "catalog:",
     "@pinia/testing": "catalog:",
     "@playwright/test": "catalog:",
+    "@prettier/plugin-oxc": "catalog:",
     "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
     "@storybook/addon-mcp": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
+    "@trivago/prettier-plugin-sort-imports": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -97,11 +101,11 @@
     "markdown-table": "catalog:",
     "mixpanel-browser": "catalog:",
     "nx": "catalog:",
-    "oxfmt": "catalog:",
     "oxlint": "catalog:",
     "oxlint-tsgolint": "catalog:",
     "picocolors": "catalog:",
     "postcss-html": "catalog:",
+    "prettier": "catalog:",
     "pretty-bytes": "catalog:",
     "rollup-plugin-visualizer": "catalog:",
     "storybook": "catalog:",
@@ -169,7 +173,6 @@
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",
-    "jsonata": "catalog:",
     "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
@@ -189,10 +192,5 @@
     "yjs": "catalog:",
     "zod": "catalog:",
     "zod-validation-error": "catalog:"
-  },
-  "pnpm": {
-    "overrides": {
-      "vite": "^8.0.0-beta.8"
-    }
   }
 }

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

@@ -584,6 +584,8 @@ body {
   height: 100vh;
   margin: 0;
   overflow: hidden;
+  background: var(--bg-color) var(--bg-img);
+  color: var(--fg-color);
   min-height: -webkit-fill-available;
   max-height: -webkit-fill-available;
   min-width: -webkit-fill-available;

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

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

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

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

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

@@ -120,8 +120,8 @@ describe('formatUtil', () => {
       })
 
       it('should handle null and undefined gracefully', () => {
-        expect(getMediaTypeFromFilename(null)).toBe('image')
-        expect(getMediaTypeFromFilename(undefined)).toBe('image')
+        expect(getMediaTypeFromFilename(null as any)).toBe('image')
+        expect(getMediaTypeFromFilename(undefined as any)).toBe('image')
       })
 
       it('should handle special characters in filenames', () => {

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

@@ -537,9 +537,7 @@ export function truncateFilename(
  * @param filename The filename to analyze
  * @returns The media type: 'image', 'video', 'audio', or '3D'
  */
-export function getMediaTypeFromFilename(
-  filename: string | null | undefined
-): MediaType {
+export function getMediaTypeFromFilename(filename: string): MediaType {
   if (!filename) return 'image'
   const ext = filename.split('.').pop()?.toLowerCase()
   if (!ext) return 'image'

pnpm-workspace.yaml

@@ -17,6 +17,7 @@ catalog:
   '@nx/vite': 22.2.6
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.57.0
+  '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
   '@primeuix/utils': ^0.3.2
@@ -32,6 +33,7 @@ catalog:
   '@storybook/vue3': ^10.1.9
   '@storybook/vue3-vite': ^10.1.9
   '@tailwindcss/vite': ^4.1.12
+  '@trivago/prettier-plugin-sort-imports': ^5.2.0
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^24.1.0
@@ -62,19 +64,18 @@ catalog:
   happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
-  jsonata: ^2.1.0
   jsdom: ^27.4.0
   knip: ^5.75.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 22.2.6
-  oxfmt: ^0.26.0
   oxlint: ^1.33.0
   oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
+  prettier: ^3.7.4
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
@@ -92,7 +93,7 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
-  vite: ^8.0.0-beta.8
+  vite: ^7.3.0
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0

scripts/vite-define-shim.ts

@@ -12,7 +12,6 @@ declare global {
   const __ALGOLIA_API_KEY__: string
   const __USE_PROD_CONFIG__: boolean
   const __DISTRIBUTION__: 'desktop' | 'localhost' | 'cloud'
-  const __IS_NIGHTLY__: boolean
 }
 
 type GlobalWithDefines = typeof globalThis & {
@@ -23,7 +22,6 @@ type GlobalWithDefines = typeof globalThis & {
   __ALGOLIA_API_KEY__: string
   __USE_PROD_CONFIG__: boolean
   __DISTRIBUTION__: 'desktop' | 'localhost' | 'cloud'
-  __IS_NIGHTLY__: boolean
   window?: Record<string, unknown>
 }
 
@@ -38,7 +36,6 @@ globalWithDefines.__ALGOLIA_APP_ID__ = ''
 globalWithDefines.__ALGOLIA_API_KEY__ = ''
 globalWithDefines.__USE_PROD_CONFIG__ = false
 globalWithDefines.__DISTRIBUTION__ = 'localhost'
-globalWithDefines.__IS_NIGHTLY__ = false
 
 // Provide a minimal window shim for Node environment
 // This is needed for code that checks window existence during imports

src/AGENTS.md

@@ -1,27 +0,0 @@
-# Source Code Guidelines
-
-## Error Handling
-
-- User-friendly and actionable messages
-- Proper error propagation
-
-## Security
-
-- Sanitize HTML with DOMPurify
-- Validate trusted sources
-- Never log secrets
-
-## State Management (Stores)
-
-- Follow domain-driven design for organizing files/folders
-- Clear public interfaces
-- Restrict extension access
-- Clean up subscriptions
-- Only expose state/actions that are used externally; keep internal state private
-
-## General Guidelines
-
-- Use `es-toolkit` for utility functions
-- Use TypeScript for type safety
-- Avoid `@ts-expect-error` - fix the underlying issue
-- Use `vue-i18n` for ALL user-facing strings (`src/locales/en/main.json`)

src/App.vue

@@ -9,24 +9,32 @@
 </template>
 
 <script setup lang="ts">
-import { captureException } from '@sentry/vue'
+import { useEventListener } from '@vueuse/core'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onMounted } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
+import { t } from '@/i18n'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
 import { electronAPI, isElectron } from './utils/envUtil'
-import { app } from '@/scripts/app'
 
 const workspaceStore = useWorkspaceStore()
-app.extensionManager = useWorkspaceStore()
-
 const conflictDetection = useConflictDetection()
+const workflowStore = useWorkflowStore()
+const dialogService = useDialogService()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
+const handleKey = (e: KeyboardEvent) => {
+  workspaceStore.shiftDown = e.shiftKey
+}
+useEventListener(window, 'keydown', handleKey)
+useEventListener(window, 'keyup', handleKey)
 
 const showContextMenu = (event: MouseEvent) => {
   const { target } = event
@@ -46,15 +54,23 @@ onMounted(() => {
     document.addEventListener('contextmenu', showContextMenu)
   }
 
-  window.addEventListener('vite:preloadError', (event) => {
-    event.preventDefault()
-    // eslint-disable-next-line no-undef
-    if (__DISTRIBUTION__ === 'cloud') {
-      captureException(event.payload, {
-        tags: { error_type: 'vite_preload_error' }
-      })
+  // Handle Vite preload errors (e.g., when assets are deleted after deployment)
+  window.addEventListener('vite:preloadError', async (_event) => {
+    // Auto-reload if app is not ready or there are no unsaved changes
+    if (!app.vueAppReady || !workflowStore.activeWorkflow?.isModified) {
+      window.location.reload()
     } else {
-      console.error('[vite:preloadError]', event.payload)
+      // Show confirmation dialog if there are unsaved changes
+      await dialogService
+        .confirm({
+          title: t('g.vitePreloadErrorTitle'),
+          message: t('g.vitePreloadErrorMessage')
+        })
+        .then((confirmed) => {
+          if (confirmed) {
+            window.location.reload()
+          }
+        })
     }
   })
 

src/CLAUDE.md

@@ -1,3 +1,57 @@
-<!-- We forked the path, yet here we are again—
-     Maintaining two files where one would have been sane. -->
-@AGENTS.md
+# Source Code Guidelines
+
+## Service Layer
+
+### API Calls
+
+- Use `api.apiURL()` for backend endpoints
+- Use `api.fileURL()` for static files
+
+#### ✅ Correct Usage
+```typescript
+// Backend API call
+const response = await api.get(api.apiURL('/prompt'))
+
+// Static file
+const template = await fetch(api.fileURL('/templates/default.json'))
+```
+
+#### ❌ Incorrect Usage
+```typescript
+// WRONG - Direct URL construction
+const response = await fetch('/api/prompt')
+const template = await fetch('/templates/default.json')
+```
+
+### Error Handling
+
+- User-friendly and actionable messages
+- Proper error propagation
+
+### Security
+
+- Sanitize HTML with DOMPurify
+- Validate trusted sources
+- Never log secrets
+
+## State Management (Stores)
+
+### Store Design
+
+- Follow domain-driven design
+- Clear public interfaces
+- Restrict extension access
+
+### Best Practices
+
+- Use TypeScript for type safety
+- Implement proper error handling
+- Clean up subscriptions
+- Avoid @ts-expect-error
+
+## General Guidelines
+
+- Use es-toolkit for utility functions
+- Implement proper TypeScript types
+- Follow Vue 3 composition API style guide
+- Use vue-i18n for ALL user-facing strings in `src/locales/en/main.json`

src/assets/css/style.css

@@ -1,21 +1 @@
-@import '@comfyorg/design-system/css/style.css';
-
-@media (prefers-reduced-motion: no-preference) {
-  /* List transition animations */
-  .list-scale-move,
-  .list-scale-enter-active,
-  .list-scale-leave-active {
-    transition: opacity 150ms ease, transform 150ms ease;
-  }
-
-  .list-scale-enter-from,
-  .list-scale-leave-to {
-    opacity: 0;
-    transform: scale(70%);
-  }
-
-  .list-scale-leave-active {
-    position: absolute;
-    width: 100%;
-  }
-}
+@import '@comfyorg/design-system/css/style.css';

src/base/common/async.ts

@@ -14,7 +14,6 @@ interface IdleDeadline {
 interface IDisposable {
   dispose(): void
 }
-type GlobalWindow = typeof globalThis
 
 /**
  * Internal implementation function that handles the actual scheduling logic.
@@ -22,7 +21,7 @@ type GlobalWindow = typeof globalThis
  * or fall back to setTimeout-based implementation.
  */
 let _runWhenIdle: (
-  targetWindow: GlobalWindow,
+  targetWindow: any,
   callback: (idle: IdleDeadline) => void,
   timeout?: number
 ) => IDisposable
@@ -38,7 +37,7 @@ export let runWhenGlobalIdle: (
 
   // Self-invoking function to set up the idle callback implementation
 ;(function () {
-  const safeGlobal: GlobalWindow = globalThis as GlobalWindow
+  const safeGlobal: any = globalThis
 
   if (
     typeof safeGlobal.requestIdleCallback !== 'function' ||

src/components/AGENTS.md

@@ -1,6 +0,0 @@
-# Component Guidelines
-
-## Component Communication
-
-- Prefer `emit/@event-name` for state changes
-- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)

src/components/CLAUDE.md

@@ -1,3 +1,45 @@
-<!-- "Play nice with others," mother always said,
-     But Claude prefers its own file name instead. -->
-@AGENTS.md
+# Component Guidelines
+
+## Vue 3 Composition API
+
+- Use setup() function
+- Destructure props (Vue 3.5 style)
+- Use ref/reactive for state
+- Implement computed() for derived state
+- Use provide/inject for dependency injection
+
+## Component Communication
+
+- Prefer `emit/@event-name` for state changes
+- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
+- Events promote loose coupling
+
+## UI Framework
+
+- Deprecated PrimeVue component replacements:
+  - Dropdown → Select
+  - OverlayPanel → Popover
+  - Calendar → DatePicker
+  - InputSwitch → ToggleSwitch
+  - Sidebar → Drawer
+  - Chips → AutoComplete with multiple enabled
+  - TabMenu → Tabs without panels
+  - Steps → Stepper without panels
+  - InlineMessage → Message
+
+## Styling
+
+- Use Tailwind CSS only (no custom CSS)
+- Use the correct tokens from style.css in the design system package
+- For common operations, try to use existing VueUse composables that automatically handle effect scope
+  - Example: Use `useElementHover` instead of manually managing mouseover/mouseout event listeners
+  - Example: Use `useIntersectionObserver` for visibility detection instead of custom scroll handlers
+
+## Best Practices
+
+- Extract complex conditionals to computed
+- Implement cleanup for async operations
+- Use vue-i18n for ALL UI strings
+- Use lifecycle hooks: onMounted, onUpdated
+- Use Teleport/Suspense when needed
+- Proper props and emits definitions

src/components/TopMenuSection.test.ts

@@ -1,21 +1,12 @@
 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, nextTick } from 'vue'
+import { computed } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
-import type {
-  JobListItem,
-  JobStatus
-} from '@/platform/remote/comfyui/jobs/jobTypes'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
-import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { isElectron } from '@/utils/envUtil'
 
 const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
@@ -36,7 +27,7 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   }))
 }))
 
-function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
+function createWrapper() {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -45,9 +36,7 @@ function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
         sideToolbar: {
           queueProgressOverlay: {
             viewJobHistory: 'View job history',
-            expandCollapsedQueue: 'Expand collapsed queue',
-            activeJobsShort: '{count} active | {count} active',
-            clearQueueTooltip: 'Clear queue'
+            expandCollapsedQueue: 'Expand collapsed queue'
           }
         }
       }
@@ -56,17 +45,12 @@ function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
 
   return mount(TopMenuSection, {
     global: {
-      plugins: [pinia, i18n],
+      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
       stubs: {
         SubgraphBreadcrumb: true,
         QueueProgressOverlay: true,
         CurrentUserButton: true,
-        LoginButton: true,
-        ContextMenu: {
-          name: 'ContextMenu',
-          props: ['model'],
-          template: '<div />'
-        }
+        LoginButton: true
       },
       directives: {
         tooltip: () => {}
@@ -75,19 +59,6 @@ function createWrapper(pinia = createTestingPinia({ createSpy: vi.fn })) {
   })
 }
 
-function createJob(id: string, status: JobStatus): JobListItem {
-  return {
-    id,
-    status,
-    create_time: 0,
-    priority: 0
-  }
-}
-
-function createTask(id: string, status: JobStatus): TaskItemImpl {
-  return new TaskItemImpl(createJob(id, status))
-}
-
 describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -129,104 +100,4 @@ describe('TopMenuSection', () => {
       })
     })
   })
-
-  it('shows the active jobs label with the current count', async () => {
-    const wrapper = createWrapper()
-    const queueStore = useQueueStore()
-    queueStore.pendingTasks = [createTask('pending-1', 'pending')]
-    queueStore.runningTasks = [
-      createTask('running-1', 'in_progress'),
-      createTask('running-2', 'in_progress')
-    ]
-
-    await nextTick()
-
-    const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
-    expect(queueButton.text()).toContain('3 active')
-  })
-
-  it('hides queue progress overlay when QPO V2 is enabled', async () => {
-    const pinia = createTestingPinia({ createSpy: vi.fn })
-    const settingStore = useSettingStore(pinia)
-    vi.mocked(settingStore.get).mockImplementation((key) =>
-      key === 'Comfy.Queue.QPOV2' ? true : undefined
-    )
-    const wrapper = createWrapper(pinia)
-
-    await nextTick()
-
-    expect(wrapper.find('[data-testid="queue-overlay-toggle"]').exists()).toBe(
-      true
-    )
-    expect(
-      wrapper.findComponent({ name: 'QueueProgressOverlay' }).exists()
-    ).toBe(false)
-  })
-
-  it('toggles the queue progress overlay when QPO V2 is disabled', async () => {
-    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
-    const settingStore = useSettingStore(pinia)
-    vi.mocked(settingStore.get).mockImplementation((key) =>
-      key === 'Comfy.Queue.QPOV2' ? false : undefined
-    )
-    const wrapper = createWrapper(pinia)
-    const commandStore = useCommandStore(pinia)
-
-    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
-
-    expect(commandStore.execute).toHaveBeenCalledWith(
-      'Comfy.Queue.ToggleOverlay'
-    )
-  })
-
-  it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
-    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
-    const settingStore = useSettingStore(pinia)
-    vi.mocked(settingStore.get).mockImplementation((key) =>
-      key === 'Comfy.Queue.QPOV2' ? true : undefined
-    )
-    const wrapper = createWrapper(pinia)
-    const sidebarTabStore = useSidebarTabStore(pinia)
-
-    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
-
-    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
-  })
-
-  it('toggles the assets sidebar tab when QPO V2 is enabled', async () => {
-    const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
-    const settingStore = useSettingStore(pinia)
-    vi.mocked(settingStore.get).mockImplementation((key) =>
-      key === 'Comfy.Queue.QPOV2' ? true : undefined
-    )
-    const wrapper = createWrapper(pinia)
-    const sidebarTabStore = useSidebarTabStore(pinia)
-    const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
-
-    await toggleButton.trigger('click')
-    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
-
-    await toggleButton.trigger('click')
-    expect(sidebarTabStore.activeSidebarTabId).toBe(null)
-  })
-
-  it('disables the clear queue context menu item when no queued jobs exist', () => {
-    const wrapper = createWrapper()
-    const menu = wrapper.findComponent({ name: 'ContextMenu' })
-    const model = menu.props('model') as MenuItem[]
-    expect(model[0]?.label).toBe('Clear queue')
-    expect(model[0]?.disabled).toBe(true)
-  })
-
-  it('enables the clear queue context menu item when queued jobs exist', async () => {
-    const wrapper = createWrapper()
-    const queueStore = useQueueStore()
-    queueStore.pendingTasks = [createTask('pending-1', 'pending')]
-
-    await nextTick()
-
-    const menu = wrapper.findComponent({ name: 'ContextMenu' })
-    const model = menu.props('model') as MenuItem[]
-    expect(model[0]?.disabled).toBe(false)
-  })
 })

src/components/TopMenuSection.vue

@@ -44,31 +44,21 @@
           <Button
             v-tooltip.bottom="queueHistoryTooltipConfig"
             type="destructive"
-            size="md"
-            :aria-pressed="
-              isQueuePanelV2Enabled
-                ? activeSidebarTabId === 'assets'
-                : isQueueProgressOverlayEnabled
-                  ? isQueueOverlayExpanded
-                  : undefined
+            size="icon"
+            :aria-pressed="isQueueOverlayExpanded"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
             "
-            class="px-3"
-            data-testid="queue-overlay-toggle"
             @click="toggleQueueOverlay"
-            @contextmenu.stop.prevent="showQueueContextMenu"
           >
-            <span class="text-sm font-normal tabular-nums">
-              {{ activeJobsLabel }}
-            </span>
-            <span class="sr-only">
-              {{
-                isQueuePanelV2Enabled
-                  ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
-                  : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-              }}
+            <i class="icon-[lucide--history] size-4" />
+            <span
+              v-if="queuedCount > 0"
+              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
+            >
+              {{ queuedCount }}
             </span>
           </Button>
-          <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
           <CurrentUserButton
             v-if="isLoggedIn && !isIntegratedTabBar"
             class="shrink-0"
@@ -87,7 +77,6 @@
         </div>
       </div>
       <QueueProgressOverlay
-        v-if="isQueueProgressOverlayEnabled"
         v-model:expanded="isQueueOverlayExpanded"
         :menu-hovered="isTopMenuHovered"
       />
@@ -97,8 +86,6 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import ContextMenu from 'primevue/contextmenu'
-import type { MenuItem } from 'primevue/menuitem'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -116,10 +103,8 @@ 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'
 import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
@@ -132,56 +117,27 @@ const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
-const { t, n } = useI18n()
+const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
-const executionStore = useExecutionStore()
 const queueUIStore = useQueueUIStore()
-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)
-const activeJobsLabel = computed(() => {
-  const count = activeJobsCount.value
-  return t(
-    'sideToolbar.queueProgressOverlay.activeJobsShort',
-    { count: n(count) },
-    count
-  )
-})
+const queuedCount = computed(() => queueStore.pendingTasks.length)
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
-const isQueueProgressOverlayEnabled = computed(
-  () => !isQueuePanelV2Enabled.value
-)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
 const customNodesManagerTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.customNodesManager'))
 )
-const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
-const queueContextMenuItems = computed<MenuItem[]>(() => [
-  {
-    label: t('sideToolbar.queueProgressOverlay.clearQueueTooltip'),
-    icon: 'icon-[lucide--list-x] text-destructive-background',
-    class: '*:text-destructive-background',
-    disabled: queueStore.pendingTasks.length === 0,
-    command: () => {
-      void handleClearQueue()
-    }
-  }
-])
 
 // Use either release red dot or conflict red dot
 const shouldShowRedDot = computed((): boolean => {
@@ -205,26 +161,9 @@ onMounted(() => {
 })
 
 const toggleQueueOverlay = () => {
-  if (isQueuePanelV2Enabled.value) {
-    sidebarTabStore.toggleSidebarTab('assets')
-    return
-  }
   commandStore.execute('Comfy.Queue.ToggleOverlay')
 }
 
-const showQueueContextMenu = (event: MouseEvent) => {
-  queueContextMenu.value?.show(event)
-}
-
-const handleClearQueue = async () => {
-  const pendingPromptIds = queueStore.pendingTasks
-    .map((task) => task.promptId)
-    .filter((id): id is string => typeof id === 'string' && id.length > 0)
-
-  await commandStore.execute('Comfy.ClearPendingTasks')
-  executionStore.clearInitializationByPromptIds(pendingPromptIds)
-}
-
 const openCustomNodeManager = async () => {
   try {
     await managerState.openManager({

src/components/actionbar/ComfyActionbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full items-center" :class="cn(!isDocked && '-ml-2')">
+  <div class="flex h-full items-center">
     <div
       v-if="isDragging && !isDocked"
       :class="actionbarClass"
@@ -77,6 +77,7 @@ const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
 const visible = computed(() => position.value !== 'Disabled')
 
+const tabContainer = document.querySelector('.workflow-tabs-container')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
 const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
@@ -87,7 +88,14 @@ const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
 const { x, y, style, isDragging } = useDraggable(panelRef, {
   initialValue: { x: 0, y: 0 },
   handle: dragHandleRef,
-  containerElement: document.body
+  containerElement: document.body,
+  onMove: (event) => {
+    // Prevent dragging the menu over the top of the tabs
+    const minY = tabContainer?.getBoundingClientRect().bottom ?? 40
+    if (event.y < minY) {
+      event.y = minY
+    }
+  }
 })
 
 // Update storedPosition when x or y changes

src/components/auth/WorkspaceAuthGate.test.ts

@@ -0,0 +1,206 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import WorkspaceAuthGate from './WorkspaceAuthGate.vue'
+
+const mockIsInitialized = ref(false)
+const mockCurrentUser = ref<object | null>(null)
+
+vi.mock('@/stores/firebaseAuthStore', () => ({
+  useFirebaseAuthStore: () => ({
+    isInitialized: mockIsInitialized,
+    currentUser: mockCurrentUser
+  })
+}))
+
+const mockRefreshRemoteConfig = vi.fn()
+vi.mock('@/platform/remoteConfig/refreshRemoteConfig', () => ({
+  refreshRemoteConfig: (options: unknown) => mockRefreshRemoteConfig(options)
+}))
+
+const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: false }))
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get teamWorkspacesEnabled() {
+        return mockTeamWorkspacesEnabled.value
+      }
+    }
+  })
+}))
+
+const mockWorkspaceStoreInitialize = vi.fn()
+const mockWorkspaceStoreInitState = vi.hoisted(() => ({
+  value: 'uninitialized' as string
+}))
+vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
+  useTeamWorkspaceStore: () => ({
+    get initState() {
+      return mockWorkspaceStoreInitState.value
+    },
+    initialize: mockWorkspaceStoreInitialize
+  })
+}))
+
+const mockIsCloud = vi.hoisted(() => ({ value: true }))
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud.value
+  }
+}))
+
+vi.mock('primevue/progressspinner', () => ({
+  default: { template: '<div class="progress-spinner" />' }
+}))
+
+describe('WorkspaceAuthGate', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockIsCloud.value = true
+    mockIsInitialized.value = false
+    mockCurrentUser.value = null
+    mockTeamWorkspacesEnabled.value = false
+    mockWorkspaceStoreInitState.value = 'uninitialized'
+    mockRefreshRemoteConfig.mockResolvedValue(undefined)
+    mockWorkspaceStoreInitialize.mockResolvedValue(undefined)
+  })
+
+  const mountComponent = () =>
+    mount(WorkspaceAuthGate, {
+      slots: {
+        default: '<div data-testid="slot-content">App Content</div>'
+      }
+    })
+
+  describe('non-cloud builds', () => {
+    it('renders slot immediately when isCloud is false', async () => {
+      mockIsCloud.value = false
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(wrapper.find('.progress-spinner').exists()).toBe(false)
+      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('cloud builds - unauthenticated user', () => {
+    it('shows spinner while waiting for Firebase auth', () => {
+      mockIsInitialized.value = false
+
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(false)
+    })
+
+    it('renders slot when Firebase initializes with no user', async () => {
+      mockIsInitialized.value = false
+
+      const wrapper = mountComponent()
+      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
+
+      mockIsInitialized.value = true
+      mockCurrentUser.value = null
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(mockRefreshRemoteConfig).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('cloud builds - authenticated user', () => {
+    beforeEach(() => {
+      mockIsInitialized.value = true
+      mockCurrentUser.value = { uid: 'user-123' }
+    })
+
+    it('refreshes remote config with auth after Firebase init', async () => {
+      mountComponent()
+      await flushPromises()
+
+      expect(mockRefreshRemoteConfig).toHaveBeenCalledWith({ useAuth: true })
+    })
+
+    it('renders slot when teamWorkspacesEnabled is false', async () => {
+      mockTeamWorkspacesEnabled.value = false
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
+    })
+
+    it('initializes workspace store when teamWorkspacesEnabled is true', async () => {
+      mockTeamWorkspacesEnabled.value = true
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(mockWorkspaceStoreInitialize).toHaveBeenCalled()
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+    })
+
+    it('skips workspace init when store is already initialized', async () => {
+      mockTeamWorkspacesEnabled.value = true
+      mockWorkspaceStoreInitState.value = 'ready'
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(mockWorkspaceStoreInitialize).not.toHaveBeenCalled()
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+    })
+  })
+
+  describe('error handling - graceful degradation', () => {
+    beforeEach(() => {
+      mockIsInitialized.value = true
+      mockCurrentUser.value = { uid: 'user-123' }
+    })
+
+    it('renders slot when remote config refresh fails', async () => {
+      mockRefreshRemoteConfig.mockRejectedValue(new Error('Network error'))
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+    })
+
+    it('renders slot when remote config refresh times out', async () => {
+      vi.useFakeTimers()
+      // Never-resolving promise simulates a hanging request
+      mockRefreshRemoteConfig.mockReturnValue(new Promise(() => {}))
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      // Still showing spinner before timeout
+      expect(wrapper.find('.progress-spinner').exists()).toBe(true)
+
+      // Advance past the 10 second timeout
+      await vi.advanceTimersByTimeAsync(10_001)
+      await flushPromises()
+
+      // Should render slot after timeout (graceful degradation)
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+      vi.useRealTimers()
+    })
+
+    it('renders slot when workspace store initialization fails', async () => {
+      mockTeamWorkspacesEnabled.value = true
+      mockWorkspaceStoreInitialize.mockRejectedValue(
+        new Error('Workspace init failed')
+      )
+
+      const wrapper = mountComponent()
+      await flushPromises()
+
+      expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(true)
+    })
+  })
+})

src/components/auth/WorkspaceAuthGate.vue

@@ -0,0 +1,129 @@
+<template>
+  <slot v-if="isReady" />
+  <div
+    v-else
+    class="fixed inset-0 z-[1100] flex items-center justify-center bg-[var(--p-mask-background)]"
+  >
+    <ProgressSpinner />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * WorkspaceAuthGate - Conditional auth checkpoint for workspace mode.
+ *
+ * This gate ensures proper initialization order for workspace-scoped auth:
+ * 1. Wait for Firebase auth to resolve
+ * 2. Check if teamWorkspacesEnabled feature flag is on
+ * 3. If YES: Initialize workspace token and store before rendering
+ * 4. If NO: Render immediately using existing Firebase auth
+ *
+ * This prevents race conditions where API calls use Firebase tokens
+ * instead of workspace tokens when the workspace feature is enabled.
+ */
+import { promiseTimeout, until } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import ProgressSpinner from 'primevue/progressspinner'
+import { onMounted, ref } from 'vue'
+
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
+import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const FIREBASE_INIT_TIMEOUT_MS = 16_000
+const CONFIG_REFRESH_TIMEOUT_MS = 10_000
+
+const isReady = ref(!isCloud)
+
+async function initialize(): Promise<void> {
+  if (!isCloud) return
+
+  const authStore = useFirebaseAuthStore()
+  const { isInitialized, currentUser } = storeToRefs(authStore)
+
+  try {
+    // Step 1: Wait for Firebase auth to resolve
+    // This is shared with router guard - both wait for the same thing,
+    // but this gate blocks rendering while router guard blocks navigation
+    if (!isInitialized.value) {
+      await until(isInitialized).toBe(true, {
+        timeout: FIREBASE_INIT_TIMEOUT_MS
+      })
+    }
+
+    // Step 2: If not authenticated, nothing more to do
+    // Unauthenticated users don't have workspace context
+    if (!currentUser.value) {
+      isReady.value = true
+      return
+    }
+
+    // Step 3: Refresh feature flags with auth context
+    // This ensures teamWorkspacesEnabled reflects the authenticated user's state
+    // Timeout prevents hanging if server is slow/unresponsive
+    try {
+      await Promise.race([
+        refreshRemoteConfig({ useAuth: true }),
+        promiseTimeout(CONFIG_REFRESH_TIMEOUT_MS).then(() => {
+          throw new Error('Config refresh timeout')
+        })
+      ])
+    } catch (error) {
+      console.warn(
+        '[WorkspaceAuthGate] Failed to refresh remote config:',
+        error
+      )
+      // Continue - feature flags will use defaults (teamWorkspacesEnabled=false)
+      // App will render with Firebase auth fallback
+    }
+
+    // Step 4: THE CHECKPOINT - Are we in workspace mode?
+    const { flags } = useFeatureFlags()
+    if (!flags.teamWorkspacesEnabled) {
+      // Not in workspace mode - use existing Firebase auth flow
+      // No additional initialization needed
+      isReady.value = true
+      return
+    }
+
+    // Step 5: WORKSPACE MODE - Full initialization
+    await initializeWorkspaceMode()
+  } catch (error) {
+    console.error('[WorkspaceAuthGate] Initialization failed:', error)
+  } finally {
+    // Always render (graceful degradation)
+    // If workspace init failed, API calls fall back to Firebase token
+    isReady.value = true
+  }
+}
+
+async function initializeWorkspaceMode(): Promise<void> {
+  // Initialize the full workspace store which handles:
+  // - Restoring workspace token from session (fast path for refresh)
+  // - Fetching workspace list
+  // - Switching to last used workspace if needed
+  // - Setting active workspace
+  try {
+    const workspaceStore = useTeamWorkspaceStore()
+    if (workspaceStore.initState === 'uninitialized') {
+      await workspaceStore.initialize()
+    }
+  } catch (error) {
+    // Log but don't block - workspace UI features may not work but app will render
+    // API calls will fall back to Firebase token
+    console.warn(
+      '[WorkspaceAuthGate] Failed to initialize workspace store:',
+      error
+    )
+  }
+}
+
+// Initialize on mount. This gate should be placed on the authenticated layout
+// (LayoutDefault) so it mounts fresh after login and unmounts on logout.
+// The router guard ensures only authenticated users reach this layout.
+onMounted(() => {
+  void initialize()
+})
+</script>

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

@@ -1,7 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import type { Mock } from 'vitest'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -152,8 +151,8 @@ describe('BaseTerminal', () => {
     // Trigger the selection change callback that was registered during mount
     expect(mockTerminal.onSelectionChange).toHaveBeenCalled()
     // Access the mock calls - TypeScript can't infer the mock structure dynamically
-    const mockCalls = (mockTerminal.onSelectionChange as Mock).mock.calls
-    const selectionCallback = mockCalls[0][0] as () => void
+    const selectionCallback = (mockTerminal.onSelectionChange as any).mock
+      .calls[0][0]
     selectionCallback()
     await nextTick()
 

src/components/boundingbox/WidgetBoundingBox.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="grid grid-cols-[auto_1fr] gap-x-2 gap-y-1">
-    <label class="content-center text-xs text-node-component-slot-text">
-      {{ $t('boundingBox.x') }}
-    </label>
-    <input
-      v-model.number="x"
-      type="number"
-      :min="0"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
-    <label class="content-center text-xs text-node-component-slot-text">
-      {{ $t('boundingBox.y') }}
-    </label>
-    <input
-      v-model.number="y"
-      type="number"
-      :min="0"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
-    <label class="content-center text-xs text-node-component-slot-text">
-      {{ $t('boundingBox.width') }}
-    </label>
-    <input
-      v-model.number="width"
-      type="number"
-      :min="1"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
-    <label class="content-center text-xs text-node-component-slot-text">
-      {{ $t('boundingBox.height') }}
-    </label>
-    <input
-      v-model.number="height"
-      type="number"
-      :min="1"
-      step="1"
-      class="h-7 rounded-lg border-none bg-component-node-widget-background px-2 text-xs text-component-node-foreground focus:outline-0"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { Bounds } from '@/renderer/core/layout/types'
-
-const modelValue = defineModel<Bounds>({
-  default: () => ({ x: 0, y: 0, width: 512, height: 512 })
-})
-
-const x = computed({
-  get: () => modelValue.value.x,
-  set: (x) => {
-    modelValue.value = { ...modelValue.value, x }
-  }
-})
-
-const y = computed({
-  get: () => modelValue.value.y,
-  set: (y) => {
-    modelValue.value = { ...modelValue.value, y }
-  }
-})
-
-const width = computed({
-  get: () => modelValue.value.width,
-  set: (width) => {
-    modelValue.value = { ...modelValue.value, width }
-  }
-})
-
-const height = computed({
-  get: () => modelValue.value.height,
-  set: (height) => {
-    modelValue.value = { ...modelValue.value, height }
-  }
-})
-</script>

src/components/button/MoreButton.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button
-      size="icon"
-      variant="secondary"
-      v-bind="$attrs"
-      @click="popover?.toggle"
-    >
+    <Button size="icon" variant="secondary" @click="popover?.toggle">
       <i
         :class="
           cn(
@@ -65,10 +60,6 @@ import { ref } from 'vue'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
-defineOptions({
-  inheritAttrs: false
-})
-
 interface MoreButtonProps {
   isVertical?: boolean
 }