refactor: remove file paths from AGENTS.md to prevent staleness

Amp-Thread-ID: https://ampcode.com/threads/T-019bdfa7-58b4-731b-83ee-83f2b2bea030
Co-authored-by: Amp <amp@ampcode.com>

.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 Prettier"
+echo "  pnpm format       - Format code with oxfmt"
 echo ""
 echo "Next steps:"
 echo "1. Run 'pnpm dev' to start developing"

.cursor/rules/unit-test.mdc

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

@@ -0,0 +1,14 @@
+# 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,36 +1,3 @@
-# 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`.
+<!-- A rose by any other name would smell as sweet,
+     But Claude insists on files named for its own conceit. -->
+@AGENTS.md

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

@@ -42,7 +42,7 @@ jobs:
       - name: Run Stylelint with auto-fix
         run: pnpm stylelint:fix
 
-      - name: Run Prettier with auto-format
+      - name: Run oxfmt 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 Prettier fixes"
+          git commit -m "[automated] Apply ESLint and Oxfmt 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- Prettier 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- Oxfmt formatting'
             })
 
       - name: Comment on PR about manual fix needed

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

@@ -1,9 +1,9 @@
 # Description: Deploys test results from forked PRs (forks can't access deployment secrets)
-name: "CI: Tests E2E (Deploy for Forks)"
+name: 'CI: Tests E2E (Deploy for Forks)'
 
 on:
   workflow_run:
-    workflows: ["CI: Tests E2E"]
+    workflows: ['CI: Tests E2E']
     types: [requested, completed]
 
 env:
@@ -81,6 +81,7 @@ jobs:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
+          GITHUB_SHA: ${{ github.event.workflow_run.head_sha }}
         run: |
           # Rename merged report if exists
           [ -d "reports/playwright-report-chromium-merged" ] && \

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

@@ -1,5 +1,5 @@
 # Description: End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages
-name: "CI: Tests E2E"
+name: 'CI: Tests E2E'
 
 on:
   push:
@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 60
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.10
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -85,7 +85,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.10
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -144,9 +144,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v5
 
-      # Setup pnpm/node to run playwright merge-reports (no browsers needed)
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
 
       - name: Download blob reports
         uses: actions/download-artifact@v4
@@ -158,10 +159,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
+          pnpm dlx @playwright/test merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
+          pnpm dlx @playwright/test merge-reports --reporter=json ./all-blob-reports
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v4
@@ -222,6 +223,7 @@ jobs:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           GITHUB_TOKEN: ${{ github.token }}
+          GITHUB_SHA: ${{ github.event.pull_request.head.sha }}
         run: |
           bash ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \

.github/workflows/pr-update-playwright-expectations.yaml

@@ -77,7 +77,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.8
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.10
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}

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

@@ -69,7 +69,7 @@ jobs:
       - name: Checkout ComfyUI (sparse)
         uses: actions/checkout@v5
         with:
-          repository: comfyanonymous/ComfyUI
+          repository: Comfy-Org/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/comfyanonymous/ComfyUI.git master; then
+          if ! git fetch https://github.com/Comfy-Org/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 comfyanonymous/ComfyUI"
+          echo "Creating PR from ${COMFYUI_FORK} to Comfy-Org/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 comfyanonymous/ComfyUI \
+            --repo Comfy-Org/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 comfyanonymous/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
+            EXISTING_PR=$(gh pr list --repo Comfy-Org/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 comfyanonymous/ComfyUI" >> $GITHUB_STEP_SUMMARY
+          echo "Draft PR created in Comfy-Org/ComfyUI" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "### PR Body:" >> $GITHUB_STEP_SUMMARY
           cat pr-body.txt >> $GITHUB_STEP_SUMMARY

.i18nrc.cjs

@@ -1,15 +1,28 @@
 // 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',
   splitToken: 1024,
+  saveImmediately: true,
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
+  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.
@@ -18,5 +31,11 @@ module.exports = defineConfig({
   - For 'zh' locale: Use ONLY Simplified Chinese characters (简体中文). Common examples: 节点 (not 節點), 画布 (not 畫布), 图像 (not 圖像), 选择 (not 選擇), 减小 (not 減小).
   - For 'zh-TW' locale: Use ONLY Traditional Chinese characters (繁體中文) with Taiwan-specific terminology.
   - NEVER mix Simplified and Traditional Chinese characters within the same locale.
+  
+  IMPORTANT Persian Translation Guidelines:
+  - For 'fa' locale: Use formal Persian (فارسی رسمی) for professional tone throughout the UI.
+  - Keep commonly used technical terms in English when they are standard in Persian software (e.g., node, workflow).
+  - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate.
+  - Maintain consistency with terminology used in Persian software and design applications.
   `
-});
+})

.oxfmtrc.json

@@ -0,0 +1,20 @@
+{
+  "$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

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

.prettierrc

@@ -1,11 +0,0 @@
-{
-  "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

@@ -0,0 +1,17 @@
+# 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,197 +1,3 @@
-# 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
+<!-- Though standards bloom in open fields so wide,
+     Anthropic walks a path of lonely pride. -->
+@AGENTS.md

.storybook/main.ts

@@ -7,7 +7,7 @@ import type { InlineConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-mcp'],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}
@@ -69,19 +69,42 @@ const config: StorybookConfig = {
         allowedHosts: true
       },
       resolve: {
-        alias: {
-          '@': process.cwd() + '/src'
-        }
-      },
-      esbuild: {
-        // Prevent minification of identifiers to preserve _sfc_main
-        minifyIdentifiers: false,
-        keepNames: true
+        alias: [
+          {
+            find: '@/composables/queue/useJobList',
+            replacement: process.cwd() + '/src/storybook/mocks/useJobList.ts'
+          },
+          {
+            find: '@/composables/queue/useJobActions',
+            replacement: process.cwd() + '/src/storybook/mocks/useJobActions.ts'
+          },
+          {
+            find: '@/utils/formatUtil',
+            replacement:
+              process.cwd() +
+              '/packages/shared-frontend-utils/src/formatUtil.ts'
+          },
+          {
+            find: '@/utils/networkUtil',
+            replacement:
+              process.cwd() +
+              '/packages/shared-frontend-utils/src/networkUtil.ts'
+          },
+          {
+            find: '@',
+            replacement: process.cwd() + '/src'
+          }
+        ]
       },
       build: {
-        rollupOptions: {
-          // Disable tree-shaking for Storybook to prevent Vue SFC exports from being removed
+        rolldownOptions: {
+          experimental: {
+            strictExecutionOrder: true
+          },
           treeshake: false,
+          output: {
+            keepNames: true
+          },
           onwarn: (warning, warn) => {
             // Suppress specific warnings
             if (

.vscode/extensions.json

@@ -1,25 +1,22 @@
 {
   "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",
-    "sonarsource.sonarlint-vscode",
-    "deque-systems.vscode-axe-linter",
-    "kisstkondoros.vscode-codemetrics",
-    "donjayamanne.githistory",
-    "wix.vscode-import-cost",
-    "prograhammer.tslint-vue",
-    "antfu.vite"
+    "wix.vscode-import-cost"
   ]
 }

AGENTS.md

@@ -1,281 +1,37 @@
-# Repository Guidelines
+# ComfyUI Frontend
 
-## Project Structure & Module Organization
+Vue 3.5+ / TypeScript / Tailwind 4 frontend for ComfyUI. Uses Nx monorepo with pnpm.
 
-- Source: `src/`
-  - Vue 3.5+
-  - TypeScript
-  - Tailwind 4
-  - Key areas:
-    - `components/`
-    - `views/`
-    - `stores/` (Pinia)
-    - `composables/`
-    - `services/`
-    - `utils/`
-    - `assets/`
-    - `locales/`
-- Routing: `src/router.ts`,
-- i18n: `src/i18n.ts`,
-- Entry Point: `src/main.ts`.
-- Tests:
-  - unit/component in `tests-ui/` and `src/**/*.test.ts`
-  - E2E (Playwright) in `browser_tests/**/*.spec.ts`
-- Public assets: `public/`
-- Build output: `dist/`
-- Configs
-  - `vite.config.mts`
-  - `vitest.config.ts`
-  - `playwright.config.ts`
-  - `eslint.config.ts`
-  - `.prettierrc`
-  - etc.
+## Commands
 
-## Monorepo Architecture
+```bash
+pnpm dev              # Vite dev server
+pnpm build            # Type-check + production build
+pnpm typecheck        # Vue TSC
+pnpm lint             # ESLint
+pnpm format           # oxfmt
+pnpm test:unit        # Vitest
+pnpm test:browser     # Playwright E2E
+pnpm knip             # Dead code detection
+```
 
-The project uses **Nx** for build orchestration and task management
+## Key Conventions
 
-## Build, Test, and Development Commands
+See `docs/guidance/*.md` for file-specific rules. Quick reference:
 
-- `pnpm dev`: Start Vite dev server.
-- `pnpm dev:electron`: Dev server with Electron API mocks
-- `pnpm build`: Type-check then production build to `dist/`
-- `pnpm preview`: Preview the production build locally
-- `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`: Prettier
-- `pnpm typecheck`: Vue TSC type checking
+- **Vue**: Composition API only, `<script setup lang="ts">`, reactive props destructuring
+- **Styling**: Tailwind only (no `<style>` blocks), use `cn()` for conditional classes
+- **Types**: No `any`, no `as any`, fix type issues at the source
+- **i18n**: All strings via vue-i18n, entries in `src/locales/en/main.json`
+- **Tests**: Colocated `*.test.ts` files, behavioral coverage
 
-## Coding Style & Naming Conventions
+## Quality Gates
 
-- Language:
-  - TypeScript (exclusive, no new JavaScript)
-  - Vue 3 SFCs (`.vue`)
-    - Composition API only
-  - Tailwind 4 styling
-    - Avoid `<style>` blocks
-- Style: (see `.prettierrc`)
-  - Indent 2 spaces
-  - single quotes
-  - no trailing semicolons
-  - width 80
-- Imports:
-  - sorted/grouped by plugin
-  - run `pnpm format` before committing
-- ESLint:
-  - Vue + TS rules
-  - no floating promises
-  - unused imports disallowed
-  - i18n raw text restrictions in templates
-- Naming:
-  - Vue components in PascalCase (e.g., `MenuHamburger.vue`)
-  - composables `useXyz.ts`
-  - Pinia stores `*Store.ts`
+Before committing: `pnpm typecheck && pnpm lint && pnpm format`
 
+## Agent Workspace
 
-## Commit & Pull Request Guidelines
-
-- PRs:
-  - Include clear description
-  - Reference linked issues (e.g. `- Fixes #123`)
-  - Keep it extremely concise and information-dense
-  - Don't use emojis or add excessive headers/sections
-  - Follow the PR description template in the `.github/` folder.
-- Quality gates:
-  - `pnpm lint`
-  - `pnpm typecheck`
-  - `pnpm knip`
-  - Relevant tests must pass
-- Never use `--no-verify` to bypass failing tests
-  - Identify the issue and present root cause analysis and possible solutions if you are unable to solve quickly yourself
-- Keep PRs focused and small
-  - If it looks like the current changes will have 300+ lines of non-test code, suggest ways it could be broken into multiple PRs
-
-## Security & Configuration Tips
-
-- Secrets: Use `.env` (see `.env_example`); do not commit secrets.
-
-## Vue 3 Composition API Best Practices
-
-- Use `<script setup lang="ts">` for component logic
-- Utilize `ref` for reactive state
-- Implement computed properties with computed()
-- Use watch and watchEffect for side effects
-  - Avoid using a `ref` and a `watch` if a `computed` would work instead
-- Implement lifecycle hooks with onMounted, onUpdated, etc.
-- Utilize provide/inject for dependency injection
-  - Do not use dependency injection if a Store or a shared composable would be simpler
-- Use Vue 3.5 TypeScript style of default prop declaration
-  - Example:
-
-    ```typescript
-    const { nodes, showTotal = true } = defineProps<{
-    nodes: ApiNodeCost[]
-    showTotal?: boolean
-    }>()
-    ```
-
-  - Prefer reactive props destructuring to `const props = defineProps<...>`
-  - Do not use `withDefaults` or runtime props declaration
-  - Do not import Vue macros unnecessarily
-  - Prefer `useModel` to separately defining a prop and emit
-  - Be judicious with addition of new refs or other state
-    - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
-    - If it's possible to use the `ref` or prop directly, don't add a `computed`
-    - If it's possible to use a `computed` to name and reuse a derived value, don't use a `watch`
-
-## Development Guidelines
-
-1. Leverage VueUse functions for performance-enhancing styles
-2. Use es-toolkit for utility functions
-3. Use TypeScript for type safety
-4. If a complex type definition is inlined in multiple related places, extract and name it for reuse
-5. In Vue Components, implement proper props and emits definitions
-6. Utilize Vue 3's Teleport component when needed
-7. Use Suspense for async components
-8. Implement proper error handling
-9. Follow Vue 3 style guide and naming conventions
-10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
-12. Avoid new usage of PrimeVue components
-13. Write tests for all changes, especially bug fixes to catch future regressions
-14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
-15. Do not add or retain redundant comments, clean as you go
-16. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
-17. [Refactoring](https://refactoring.com/catalog/) should be used to make complex code simpler
-18. Try to minimize the surface area (exported values) of each module and composable
-19. Don't use barrel files, e.g. `/some/package/index.ts` to re-export within `/src`
-20. Keep functions short and functional
-21. Minimize [nesting](https://wiki.c2.com/?ArrowAntiPattern), e.g. `if () { ... }` or `for () { ... }`
-22. Avoid mutable state, prefer immutability and assignment at point of declaration
-23. Favor pure functions (especially testable ones)
-24. Do not use function expressions if it's possible to use function declarations instead
-25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
-
-## Testing Guidelines
-
-- Frameworks:
-  - Vitest (unit/component, happy-dom)
-  - Playwright (E2E)
-- Test files:
-  - Unit/Component: `**/*.test.ts`
-  - E2E: `browser_tests/**/*.spec.ts`
-  - Litegraph Specific: `src/lib/litegraph/test/`
-
-### General
-
-1. Do not write change detector tests  
-   e.g. a test that just asserts that the defaults are certain values
-2. Do not write tests that are dependent on non-behavioral features like utility classes or styles
-3. Be parsimonious in testing, do not write redundant tests  
-   See <https://tidyfirst.substack.com/p/composable-tests>
-4. [Don’t Mock What You Don’t Own](https://hynek.me/articles/what-to-mock-in-5-mins/)
-
-### Vitest / Unit Tests
-
-1. Do not write tests that just test the mocks  
-   Ensure that the tests fail when the code itself would behave in a way that was not expected or desired
-2. For mocking, leverage [Vitest's utilities](https://vitest.dev/guide/mocking.html) where possible
-3. Keep your module mocks contained  
-   Do not use global mutable state within the test file  
-   Use `vi.hoisted()` if necessary to allow for per-test Arrange phase manipulation of deeper mock state
-4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
-5. Aim for behavioral coverage of critical and new features
-
-### Playwright / Browser / E2E Tests
-
-1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
-2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
-3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
-
-## External Resources
-
-- Vue: <https://vuejs.org/api/>
-- Tailwind: <https://tailwindcss.com/docs/styling-with-utility-classes>
-- VueUse: <https://vueuse.org/functions.html>
-- shadcn/vue: <https://www.shadcn-vue.com/>
-- Reka UI: <https://reka-ui.com/>
-- PrimeVue: <https://primevue.org>
-- ComfyUI: <https://docs.comfy.org>
-- Electron: <https://www.electronjs.org/docs/latest/>
-- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
-- Nx: <https://nx.dev/docs/reference/nx-commands>
-- [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
-
-## Project Philosophy
-
-- Follow good software engineering principles
-  - YAGNI
-  - AHA
-  - DRY
-  - SOLID
-- Clean, stable public APIs
-- Domain-driven design
-- Thousands of users and extensions
-- Prioritize clean interfaces that restrict extension access
-
-### Code Review
-
-In doing a code review, you should make sure that:
-
-- The code is well-designed.
-- The functionality is good for the users of the code.
-- Any UI changes are sensible and look good.
-- Any parallel programming is done safely.
-- The code isn’t more complex than it needs to be.
-- The developer isn’t implementing things they might need in the future but don’t know they need now.
-- Code has appropriate unit tests.
-- Tests are well-designed.
-- The developer used clear names for everything.
-- Comments are clear and useful, and mostly explain why instead of what.
-- Code is appropriately documented (generally in g3doc).
-- The code conforms to our style guides.
-
-#### [Complexity](https://google.github.io/eng-practices/review/reviewer/looking-for.html#complexity)
-
-Is the CL more complex than it should be? Check this at every level of the CL—are individual lines too complex? Are functions too complex? Are classes too complex? “Too complex” usually means “can’t be understood quickly by code readers.” It can also mean “developers are likely to introduce bugs when they try to call or modify this code.”
-
-A particular type of complexity is over-engineering, where developers have made the code more generic than it needs to be, or added functionality that isn’t presently needed by the system. Reviewers should be especially vigilant about over-engineering. Encourage developers to solve the problem they know needs to be solved now, not the problem that the developer speculates might need to be solved in the future. The future problem should be solved once it arrives and you can see its actual shape and requirements in the physical universe.
-
-## Repository Navigation
-
-- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
-- Prefer running single tests for performance
-- Use --help for unfamiliar CLI tools
-
-## GitHub Integration
-
-When referencing Comfy-Org repos:
-
-1. Check for local copy
-2. Use GitHub API for branches/PRs/metadata
-3. Curl GitHub website if needed
-
-## Common Pitfalls
-
-- NEVER use `any` type - use proper TypeScript types
-- NEVER use `as any` type assertions - fix the underlying type issue
-- NEVER use `--no-verify` flag when committing
-- NEVER delete or disable tests to make them pass
-- NEVER circumvent quality checks
-- NEVER use the `dark:` tailwind variant
-  - Instead use a semantic value from the `style.css` theme
-    - e.g. `bg-node-component-surface`
-- NEVER use `:class="[]"` to merge class names
-  - Always use `import { cn } from '@/utils/tailwindUtil'`
-    - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
-  - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
-- NEVER use `!important` or the `!` important prefix for tailwind classes
-  - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
-
-## Agent-only rules
-
-Rules for agent-based coding tasks.
-
-### Temporary Files
-
-- Put planning documents under `/temp/plans/`
-- Put scripts used under `/temp/scripts/`
-- Put summaries of work performed under `/temp/summaries/`
-- Put TODOs and status updates under `/temp/in_progress/`
+- Planning docs: `/temp/plans/`
+- Scripts: `/temp/scripts/`
+- Summaries: `/temp/summaries/`
+- In-progress work: `/temp/in_progress/`

CLAUDE.md

@@ -1,30 +1 @@
-# 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
+@AGENTS.md

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,8 +55,7 @@
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
-/src/locales/pt-BR/                               @JonatanAtila @Yorha4D @KarryCharon @shinshin86
+/src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
 
 # LLM Instructions (blank on purpose)
 .claude/

THIRD_PARTY_NOTICES.md

@@ -0,0 +1 @@
+AMD and the AMD Arrow logo are trademarks of Advanced Micro Devices, Inc.

apps/desktop-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/desktop-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "nx": {
     "tags": [

apps/desktop-ui/src/components/install/GpuPicker.stories.ts

@@ -0,0 +1,84 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type {
+  ElectronAPI,
+  TorchDeviceType
+} from '@comfyorg/comfyui-electron-types'
+import { ref } from 'vue'
+
+import GpuPicker from './GpuPicker.vue'
+
+type Platform = ReturnType<ElectronAPI['getPlatform']>
+type ElectronAPIStub = Pick<ElectronAPI, 'getPlatform'>
+type WindowWithElectron = Window & { electronAPI?: ElectronAPIStub }
+
+const meta: Meta<typeof GpuPicker> = {
+  title: 'Desktop/Components/GpuPicker',
+  component: GpuPicker,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function createElectronDecorator(platform: Platform) {
+  function getPlatform() {
+    return platform
+  }
+
+  return function ElectronDecorator() {
+    const windowWithElectron = window as WindowWithElectron
+    windowWithElectron.electronAPI = { getPlatform }
+    return { template: '<story />' }
+  }
+}
+
+function renderWithDevice(device: TorchDeviceType | null) {
+  return function Render() {
+    return {
+      components: { GpuPicker },
+      setup() {
+        const selected = ref<TorchDeviceType | null>(device)
+        return { selected }
+      },
+      template: `
+        <div class="min-h-screen bg-neutral-950 p-8">
+          <GpuPicker v-model:device="selected" />
+        </div>
+      `
+    }
+  }
+}
+
+const windowsDecorator = createElectronDecorator('win32')
+const macDecorator = createElectronDecorator('darwin')
+
+export const WindowsNvidiaSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('nvidia')
+}
+
+export const WindowsAmdSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('amd')
+}
+
+export const WindowsCpuSelected: Story = {
+  decorators: [windowsDecorator],
+  render: renderWithDevice('cpu')
+}
+
+export const MacMpsSelected: Story = {
+  decorators: [macDecorator],
+  render: renderWithDevice('mps')
+}

apps/desktop-ui/src/components/install/GpuPicker.vue

@@ -11,29 +11,32 @@
       <!-- Apple Metal / NVIDIA -->
       <HardwareOption
         v-if="platform === 'darwin'"
-        :image-path="'./assets/images/apple-mps-logo.png'"
+        image-path="./assets/images/apple-mps-logo.png"
         placeholder-text="Apple Metal"
         subtitle="Apple Metal"
-        :value="'mps'"
         :selected="selected === 'mps'"
-        :recommended="true"
         @click="pickGpu('mps')"
       />
-      <HardwareOption
-        v-else
-        :image-path="'./assets/images/nvidia-logo-square.jpg'"
-        placeholder-text="NVIDIA"
-        :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
-        :value="'nvidia'"
-        :selected="selected === 'nvidia'"
-        :recommended="true"
-        @click="pickGpu('nvidia')"
-      />
+      <template v-else>
+        <HardwareOption
+          image-path="./assets/images/nvidia-logo-square.jpg"
+          placeholder-text="NVIDIA"
+          :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
+          :selected="selected === 'nvidia'"
+          @click="pickGpu('nvidia')"
+        />
+        <HardwareOption
+          image-path="./assets/images/amd-rocm-logo.png"
+          placeholder-text="AMD"
+          :subtitle="$t('install.gpuPicker.amdSubtitle')"
+          :selected="selected === 'amd'"
+          @click="pickGpu('amd')"
+        />
+      </template>
       <!-- CPU -->
       <HardwareOption
         placeholder-text="CPU"
         :subtitle="$t('install.gpuPicker.cpuSubtitle')"
-        :value="'cpu'"
         :selected="selected === 'cpu'"
         @click="pickGpu('cpu')"
       />
@@ -41,7 +44,6 @@
       <HardwareOption
         placeholder-text="Manual Install"
         :subtitle="$t('install.gpuPicker.manualSubtitle')"
-        :value="'unsupported'"
         :selected="selected === 'unsupported'"
         @click="pickGpu('unsupported')"
       />
@@ -81,13 +83,15 @@ const selected = defineModel<TorchDeviceType | null>('device', {
 const electron = electronAPI()
 const platform = electron.getPlatform()
 
-const showRecommendedBadge = computed(
-  () => selected.value === 'mps' || selected.value === 'nvidia'
+const recommendedDevices: TorchDeviceType[] = ['mps', 'nvidia', 'amd']
+const showRecommendedBadge = computed(() =>
+  selected.value ? recommendedDevices.includes(selected.value) : false
 )
 
 const descriptionKeys = {
   mps: 'appleMetal',
   nvidia: 'nvidia',
+  amd: 'amd',
   cpu: 'cpu',
   unsupported: 'manual'
 } as const
@@ -97,7 +101,7 @@ const descriptionText = computed(() => {
   return st(`install.gpuPicker.${key}Description`, '')
 })
 
-const pickGpu = (value: TorchDeviceType) => {
+function pickGpu(value: TorchDeviceType) {
   selected.value = value
 }
 </script>

apps/desktop-ui/src/components/install/HardwareOption.stories.ts

@@ -29,7 +29,6 @@ export const AppleMetalSelected: Story = {
     imagePath: '/assets/images/apple-mps-logo.png',
     placeholderText: 'Apple Metal',
     subtitle: 'Apple Metal',
-    value: 'mps',
     selected: true
   }
 }
@@ -39,7 +38,6 @@ export const AppleMetalUnselected: Story = {
     imagePath: '/assets/images/apple-mps-logo.png',
     placeholderText: 'Apple Metal',
     subtitle: 'Apple Metal',
-    value: 'mps',
     selected: false
   }
 }
@@ -48,7 +46,6 @@ export const CPUOption: Story = {
   args: {
     placeholderText: 'CPU',
     subtitle: 'Subtitle',
-    value: 'cpu',
     selected: false
   }
 }
@@ -57,7 +54,6 @@ export const ManualInstall: Story = {
   args: {
     placeholderText: 'Manual Install',
     subtitle: 'Subtitle',
-    value: 'unsupported',
     selected: false
   }
 }
@@ -67,7 +63,6 @@ export const NvidiaSelected: Story = {
     imagePath: '/assets/images/nvidia-logo-square.jpg',
     placeholderText: 'NVIDIA',
     subtitle: 'NVIDIA',
-    value: 'nvidia',
     selected: true
   }
 }

apps/desktop-ui/src/components/install/HardwareOption.vue

@@ -36,17 +36,13 @@
 </template>
 
 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
-
 import { cn } from '@/utils/tailwindUtil'
 
 interface Props {
   imagePath?: string
   placeholderText: string
   subtitle?: string
-  value: TorchDeviceType
   selected?: boolean
-  recommended?: boolean
 }
 
 defineProps<Props>()

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -104,8 +104,8 @@
 </template>
 
 <script setup lang="ts">
-import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import { isInChina } from '@comfyorg/shared-frontend-utils/networkUtil'
 import Accordion from 'primevue/accordion'
 import AccordionContent from 'primevue/accordioncontent'
@@ -155,7 +155,7 @@ const activeAccordionIndex = ref<string[] | undefined>(undefined)
 const electron = electronAPI()
 
 // Mirror configuration logic
-const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
+function getTorchMirrorItem(device: TorchDeviceType): UVMirror {
   const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
   switch (device) {
     case 'mps':
@@ -170,6 +170,7 @@ const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
         mirror: TorchMirrorUrl.Cuda,
         fallbackMirror: TorchMirrorUrl.Cuda
       }
+    case 'amd':
     case 'cpu':
     default:
       return {

apps/desktop-ui/src/components/maintenance/TaskListPanel.vue

@@ -63,7 +63,6 @@ const taskStore = useMaintenanceTaskStore()
 defineProps<{
   displayAsList: string
   filter: MaintenanceFilter
-  isRefreshing: boolean
 }>()
 
 const executeTask = async (task: MaintenanceTask) => {

apps/desktop-ui/src/views/InstallView.vue

@@ -143,6 +143,8 @@ const goToPreviousStep = () => {
 const electron = electronAPI()
 const router = useRouter()
 const install = async () => {
+  if (!device.value) return
+
   const options: InstallOptions = {
     installPath: installPath.value,
     autoUpdate: autoUpdate.value,
@@ -152,7 +154,6 @@ const install = async () => {
     pythonMirror: pythonMirror.value,
     pypiMirror: pypiMirror.value,
     torchMirror: torchMirror.value,
-    // @ts-expect-error fixme ts strict error
     device: device.value
   }
   electron.installComfyUI(options)
@@ -166,7 +167,11 @@ onMounted(async () => {
   if (!electron) return
 
   const detectedGpu = await electron.Config.getDetectedGpu()
-  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
+  if (
+    detectedGpu === 'mps' ||
+    detectedGpu === 'nvidia' ||
+    detectedGpu === 'amd'
+  ) {
     device.value = detectedGpu
   }
 

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -74,7 +74,6 @@
           class="border-neutral-700 border-solid border-x-0 border-y"
           :filter
           :display-as-list
-          :is-refreshing
         />
 
         <!-- Actions -->

apps/desktop-ui/vite.config.mts

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

browser_tests/AGENTS.md

@@ -0,0 +1,8 @@
+# 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,17 +1,3 @@
-# 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
+<!-- In gardens where the agents freely play,
+     One stubborn flower turns the other way. -->
+@AGENTS.md

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 } from '../../src/lib/litegraph/src/litegraph'
+import type { LGraphNode, LGraph } 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,7 +21,6 @@ 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()
 
@@ -146,8 +145,6 @@ 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
@@ -301,11 +298,6 @@ export class ComfyPage {
     }
   }
 
-  setupHistory(): TaskHistory {
-    this._history ??= new TaskHistory(this)
-    return this._history
-  }
-
   async setup({
     clearStorage = true,
     mockReleases = true
@@ -1591,14 +1583,29 @@ export class ComfyPage {
       return window['app'].graph.nodes
     })
   }
-  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
+  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[]> {
     return Promise.all(
       (
-        await this.page.evaluate((type) => {
-          return window['app'].graph.nodes
-            .filter((n: LGraphNode) => n.type === type)
-            .map((n: LGraphNode) => n.id)
-        }, type)
+        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 }
+        )
       ).map((id: NodeId) => this.getNodeRefById(id))
     )
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -159,8 +159,18 @@ export class VueNodeHelpers {
   getInputNumberControls(widget: Locator) {
     return {
       input: widget.locator('input'),
-      incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').nth(1)
+      decrementButton: widget.getByTestId('decrement'),
+      incrementButton: widget.getByTestId('increment')
     }
   }
+
+  /**
+   * 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,48 +79,15 @@ 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([
-          slotX,
-          slotY
+          node.emptySlot.pos[0],
+          node.emptySlot.pos[1]
         ])
         return canvasPos
       },
@@ -152,8 +119,7 @@ class NodeSlotReference {
           window['app'].canvas.ds.convertOffsetToCanvas(rawPos)
 
         // Debug logging - convert Float64Arrays to regular arrays for visibility
-        // eslint-disable-next-line no-console
-        console.log(
+        console.warn(
           `NodeSlotReference debug for ${type} slot ${index} on node ${id}:`,
           {
             nodePos: [node.pos[0], node.pos[1]],

browser_tests/fixtures/utils/taskHistory.ts

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

@@ -232,11 +232,25 @@ test.describe('Node Color Adjustments', () => {
   }) => {
     await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
     await comfyPage.setSetting('Comfy.ColorPalette', 'light')
-    const saveWorkflowInterval = 1000
-    const workflow = await comfyPage.page.evaluate(() => {
-      return localStorage.getItem('workflow')
-    })
-    for (const node of JSON.parse(workflow ?? '{}').nodes) {
+    await comfyPage.nextFrame()
+    const parsed = await (
+      await comfyPage.page.waitForFunction(
+        () => {
+          const workflow = localStorage.getItem('workflow')
+          if (!workflow) return null
+          try {
+            const data = JSON.parse(workflow)
+            return Array.isArray(data?.nodes) ? data : null
+          } catch {
+            return null
+          }
+        },
+        { timeout: 3000 }
+      )
+    ).jsonValue()
+    expect(parsed.nodes).toBeDefined()
+    expect(Array.isArray(parsed.nodes)).toBe(true)
+    for (const node of parsed.nodes) {
       if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
       if (node.color) expect(node.color).not.toMatch(/hsla/)
     }

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,15 +124,17 @@ 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',
@@ -141,15 +143,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
     })
 
@@ -166,20 +168,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'
       )
@@ -192,7 +194,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()
@@ -205,14 +207,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,
@@ -238,14 +240,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,
@@ -274,7 +276,8 @@ test.describe('Feature Flags', () => {
     // Set up monitoring before navigation
     await newPage.addInitScript(() => {
       // Track when various app components are ready
-      ;(window as any).__appReadiness = {
+
+      window.__appReadiness = {
         featureFlagsReceived: false,
         apiInitialized: false,
         appInitialized: false
@@ -286,7 +289,10 @@ test.describe('Feature Flags', () => {
           window['app']?.api?.serverFeatureFlags?.supports_preview_metadata !==
           undefined
         ) {
-          ;(window as any).__appReadiness.featureFlagsReceived = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            featureFlagsReceived: true
+          }
           clearInterval(checkFeatureFlags)
         }
       }, 10)
@@ -294,7 +300,10 @@ test.describe('Feature Flags', () => {
       // Monitor API initialization
       const checkApi = setInterval(() => {
         if (window['app']?.api) {
-          ;(window as any).__appReadiness.apiInitialized = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            apiInitialized: true
+          }
           clearInterval(checkApi)
         }
       }, 10)
@@ -302,7 +311,10 @@ test.describe('Feature Flags', () => {
       // Monitor app initialization
       const checkApp = setInterval(() => {
         if (window['app']?.graph) {
-          ;(window as any).__appReadiness.appInitialized = true
+          window.__appReadiness = {
+            ...window.__appReadiness,
+            appInitialized: true
+          }
           clearInterval(checkApp)
         }
       }, 10)
@@ -331,8 +343,8 @@ test.describe('Feature Flags', () => {
     // Get readiness state
     const readiness = await newPage.evaluate(() => {
       return {
-        ...(window as any).__appReadiness,
-        currentFlags: window['app'].api.serverFeatureFlags
+        ...window.__appReadiness,
+        currentFlags: window['app']!.api.serverFeatureFlags
       }
     })
 

browser_tests/tests/graph.spec.ts

@@ -19,6 +19,7 @@ test.describe('Graph', () => {
   })
 
   test('Validate workflow links', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Validation.Workflows', true)
     await comfyPage.loadWorkflow('links/bad_link')
     await expect(comfyPage.getVisibleToastCount()).resolves.toBe(2)
   })

browser_tests/tests/menu.spec.ts

@@ -133,8 +133,11 @@ test.describe('Menu', () => {
       // Checkmark should be invisible again (panel is hidden)
       await expect(checkmark).toHaveClass(/invisible/)
 
-      // Click outside to close menu
-      await comfyPage.page.locator('body').click({ position: { x: 10, y: 10 } })
+      // Click in top-right corner to close menu (avoid hamburger menu at top-left)
+      const viewport = comfyPage.page.viewportSize()!
+      await comfyPage.page
+        .locator('body')
+        .click({ position: { x: viewport.width - 10, y: 10 } })
 
       // Verify menu is now closed
       await expect(menu).not.toBeVisible()

browser_tests/tests/mobileBaseline.spec.ts

@@ -22,8 +22,14 @@ 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'
+      'mobile-settings-dialog.png',
+      {
+        mask: [
+          comfyPage.settingDialog.root.getByTestId('current-user-indicator')
+        ]
+      }
     )
   })
 })

browser_tests/tests/nodeHelp.spec.ts

@@ -2,15 +2,17 @@ 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: any, nodeRef: any) {
+async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   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
@@ -345,7 +347,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: any) => n.id)
+        return window['app']!.graph!.nodes.map((n) => n.id)
       })
       if (nodeRefs.length > 0) {
         const firstNode = await comfyPage.getNodeRefById(nodeRefs[0])

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

@@ -8,13 +8,11 @@ test.describe('Properties panel', () => {
 
     const { propertiesPanel } = comfyPage.menu
 
-    await expect(propertiesPanel.panelTitle).toContainText(
-      'No node(s) selected'
-    )
+    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')
 
     await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
 
-    await expect(propertiesPanel.panelTitle).toContainText('3 nodes selected')
+    await expect(propertiesPanel.panelTitle).toContainText('3 items 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,6 +1,7 @@
 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')
@@ -15,7 +16,7 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     await comfyPage.nextFrame()
   })
 
-  const openMoreOptions = async (comfyPage: any) => {
+  const openMoreOptions = async (comfyPage: ComfyPage) => {
     const ksamplerNodes = await comfyPage.getNodeRefsByTitle('KSampler')
     if (ksamplerNodes.length === 0) {
       throw new Error('No KSampler nodes found')

browser_tests/tests/templates.spec.ts

@@ -82,9 +82,7 @@ test.describe('Templates', () => {
     await expect(comfyPage.templates.content).toBeVisible()
 
     await comfyPage.page
-      .locator(
-        'nav > div:nth-child(2) > div > span:has-text("Getting Started")'
-      )
+      .getByRole('button', { name: 'Getting Started' })
       .click()
     await comfyPage.templates.loadTemplate('default')
     await expect(comfyPage.templates.content).toBeHidden()
@@ -189,9 +187,7 @@ test.describe('Templates', () => {
     const templateGrid = comfyPage.page.locator(
       '[data-testid="template-workflows-content"]'
     )
-    const nav = comfyPage.page
-      .locator('header')
-      .filter({ hasText: 'Templates' })
+    const nav = comfyPage.page.locator('header', { hasText: 'Templates' })
 
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
@@ -201,7 +197,8 @@ test.describe('Templates', () => {
     await comfyPage.page.setViewportSize(mobileSize)
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
-    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
+    // Nav header is clipped by overflow-hidden parent at mobile size
+    await expect(nav).not.toBeInViewport()
 
     const tabletSize = { width: 1024, height: 800 }
     await comfyPage.page.setViewportSize(tabletSize)

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 as any)['app']
+        const app = window['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 as any)['app']
+        const app = window['app']
         const graph = app?.canvas?.graph ?? app?.graph
         if (!graph) throw new Error('Graph not available')
         const node = graph.getNodeById(targetNodeId)
@@ -993,4 +993,51 @@ 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)
+  })
 })

browser_tests/tests/widget.spec.ts

@@ -194,7 +194,10 @@ test.describe('Image widget', () => {
     const comboEntry = comfyPage.page.getByRole('menuitem', {
       name: 'image32x32.webp'
     })
-    await comboEntry.click({ noWaitAfter: true })
+    await comboEntry.click()
+
+    // Stabilization for the image swap
+    await comfyPage.nextFrame()
 
     // Expect the image preview to change automatically
     await expect(comfyPage.canvas).toHaveScreenshot(

build/plugins/comfyAPIPlugin.ts

@@ -76,6 +76,7 @@ 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": "node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

docs/TEMPLATE_RANKING.md

@@ -0,0 +1,66 @@
+# Template Ranking System
+
+Usage-based ordering for workflow templates with position bias normalization.
+
+Scores are pre-computed and normalized offline and shipped as static JSON (mirrors `sorted-custom-node-map.json` pattern for node search).
+
+## Sort Modes
+
+| Mode           | Formula                                          | Description            |
+| -------------- | ------------------------------------------------ | ---------------------- |
+| `recommended`  | `usage × 0.5 + internal × 0.3 + freshness × 0.2` | Curated recommendation |
+| `popular`      | `usage × 0.9 + freshness × 0.1`                  | Pure user-driven       |
+| `newest`       | Date sort                                        | Existing               |
+| `alphabetical` | Name sort                                        | Existing               |
+
+Freshness computed at runtime from `template.date`: `1.0 / (1 + daysSinceAdded / 90)`, min 0.1.
+
+## Data Files
+
+**Usage scores** (generated from Mixpanel):
+
+```json
+// In templates/index.json, add to any template:
+{
+  "name": "some_template",
+  "usage": 1000,
+  ...
+}
+```
+
+**Search rank** (set per-template in workflow_templates repo):
+
+```json
+// In templates/index.json, add to any template:
+{
+  "name": "some_template",
+  "searchRank": 8,  // Scale 1-10, default 5
+  ...
+}
+```
+
+| searchRank | Effect                       |
+| ---------- | ---------------------------- |
+| 1-4        | Demote (bury in results)     |
+| 5          | Neutral (default if not set) |
+| 6-10       | Promote (boost in results)   |
+
+## Position Bias Correction
+
+Raw usage reflects true preference AND UI position bias. We use linear interpolation:
+
+```
+correction = 1 + (position - 1) / (maxPosition - 1)
+normalizedUsage = rawUsage × correction
+```
+
+| Position | Boost |
+| -------- | ----- |
+| 1        | 1.0×  |
+| 50       | 1.28× |
+| 100      | 1.57× |
+| 175      | 2.0×  |
+
+Templates buried at the bottom get up to 2× boost to compensate for reduced visibility.
+
+---

docs/guidance/code-style.md

@@ -0,0 +1,56 @@
+---
+globs:
+  - '**/*.ts'
+  - '**/*.tsx'
+  - '**/*.vue'
+---
+
+# Code Style
+
+## Formatting (via oxfmt)
+
+- 2-space indent
+- Single quotes
+- No trailing semicolons
+- 80 character width
+
+Run `pnpm format` before committing.
+
+## Imports
+
+Use separate `import type` statements:
+
+```typescript
+// ✅ Correct
+import type { Foo } from './foo'
+import { bar } from './foo'
+
+// ❌ Wrong
+import { bar, type Foo } from './foo'
+```
+
+## Naming
+
+- Vue components: `PascalCase.vue` (e.g., `MenuHamburger.vue`)
+- Composables: `useXyz.ts`
+- Pinia stores: `*Store.ts`
+
+## Code Organization
+
+- Minimize exported surface area per module
+- No barrel files (`index.ts` re-exports) within `src/`
+- Prefer function declarations over function expressions
+- Keep functions short and focused
+- Minimize nesting (avoid arrow anti-pattern)
+- Favor immutability and pure functions
+
+## Comments
+
+Code should be self-documenting. Avoid comments unless absolutely necessary. If you must comment, explain *why*, not *what*.
+
+## Libraries
+
+- Use `es-toolkit` for utilities (not lodash)
+- Use `VueUse` for reactive utilities
+- Avoid new PrimeVue component usage
+- Use vue-i18n for all user-facing strings

docs/guidance/git-workflow.md

@@ -0,0 +1,31 @@
+---
+globs:
+  - '.github/**/*'
+---
+
+# Git & PR Workflow
+
+## Commit Messages
+
+Use `prefix:` format: `feat:`, `fix:`, `test:`, `refactor:`, `docs:`
+
+Never mention Claude/AI in commits.
+
+## Pull Requests
+
+- Reference linked issues: `Fixes #123`
+- Keep descriptions concise and information-dense
+- No emojis or excessive headers
+- Follow the template in `.github/`
+- Keep PRs focused — suggest splitting if >300 lines of non-test code
+
+## Quality Gates (CI)
+
+All must pass before merge:
+
+- `pnpm lint`
+- `pnpm typecheck`
+- `pnpm knip`
+- Relevant tests
+
+Never use `--no-verify` to bypass failing tests. If tests fail, identify root cause and fix or document blockers.

docs/guidance/playwright.md

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

@@ -0,0 +1,55 @@
+---
+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/tailwind.md

@@ -0,0 +1,45 @@
+---
+globs:
+  - '**/*.vue'
+  - '**/*.css'
+---
+
+# Tailwind Conventions
+
+## Class Merging
+
+Always use `cn()` for conditional classes:
+
+```vue
+<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />
+```
+
+Never use `:class="[]"` array syntax.
+
+## Theme & Dark Mode
+
+Never use the `dark:` variant. Use semantic tokens from `style.css`:
+
+```vue
+<!-- ❌ Wrong -->
+<div class="bg-white dark:bg-gray-900" />
+
+<!-- ✅ Correct -->
+<div class="bg-node-component-surface" />
+```
+
+## Sizing
+
+Use Tailwind fraction utilities, not arbitrary percentages:
+
+```vue
+<!-- ❌ Wrong -->
+<div class="w-[80%] h-[50%]" />
+
+<!-- ✅ Correct -->
+<div class="w-4/5 h-1/2" />
+```
+
+## Specificity
+
+Never use `!important` or the `!` prefix. If existing `!important` rules interfere, fix those instead.

docs/guidance/typescript.md

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

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

@@ -0,0 +1,66 @@
+---
+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):
+
+  ```typescript
+  const { nodes, showTotal = true } = defineProps<{
+    nodes: ApiNodeCost[]
+    showTotal?: boolean
+  }>()
+  ```
+
+- Do not use `withDefaults` or runtime props declaration
+- Do not import Vue macros unnecessarily
+- Prefer `defineModel` over separate prop/emit for v-model bindings
+- Define slots via template usage, not `defineSlots`
+- Use same-name shorthand for slot props: `:is-expanded` not `:is-expanded="isExpanded"`
+- Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`)
+
+## State Management
+
+- Use `ref`/`reactive` for state, `computed()` for derived state
+- Use lifecycle hooks: `onMounted`, `onUpdated`, etc.
+- Prefer `computed` over `watch` when possible
+- Prefer `watch`/`watchEffect` only for side effects
+- Be judicious with refs — if a prop suffices, don't add a ref
+- Use provide/inject only when a Store or shared composable won't work
+
+## 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

docs/testing/README.md

@@ -12,12 +12,17 @@ Documentation for unit tests is organized into three guides:
 
 ## Testing Structure
 
-The ComfyUI Frontend project uses a mixed approach to unit test organization:
+The ComfyUI Frontend project uses **colocated tests** - test files are placed alongside their source files:
 
-- **Component Tests**: Located directly alongside their components with a `.spec.ts` extension
-- **Unit Tests**: Located in the `tests-ui/tests/` directory
-- **Store Tests**: Located in the `tests-ui/tests/store/` directory
-- **Browser Tests**: These are located in the `browser_tests/` directory. There is a dedicated README in the `browser_tests/` directory, so it will not be covered here.
+- **Component Tests**: Located directly alongside their components (e.g., `MyComponent.test.ts` next to `MyComponent.vue`)
+- **Unit Tests**: Located alongside their source files (e.g., `myUtil.test.ts` next to `myUtil.ts`)
+- **Store Tests**: Located in `src/stores/` alongside their store files
+- **Browser Tests**: Located in the `browser_tests/` directory (see dedicated README there)
+
+### Test File Naming
+
+- Use `.test.ts` extension for test files
+- Name tests after their source file: `sourceFile.test.ts`
 
 ## Test Frameworks and Libraries
 
@@ -35,8 +40,11 @@ To run the tests locally:
 # Run unit tests
 pnpm test:unit
 
+# Run a specific test file
+pnpm test:unit -- src/path/to/file.test.ts
+
 # Run unit tests in watch mode  
 pnpm test:unit -- --watch
 ```
 
-Refer to the specific guides for more detailed information on each testing type.
+Refer to the specific guides for more detailed information on each testing type.