[test] Add comprehensive unit tests for getHistory sorting

- Created tests for ComfyApi.getHistory method to verify execution_start timestamp sorting
- Added tests for edge cases: missing status, empty messages, mixed message types
- Verified proper error handling and parameter passing
- Ensured backward compatibility with existing API interface
- All 10 test cases pass successfully

.claude/commands/create-hotfix-release.md

@@ -0,0 +1,222 @@
+# Create Hotfix Release
+
+This command guides you through creating a patch/hotfix release for ComfyUI Frontend with comprehensive safety checks and human confirmations at each step.
+
+<task>
+Create a hotfix release by cherry-picking commits or PR commits from main to a core branch: $ARGUMENTS
+
+Expected format: Comma-separated list of commits or PR numbers
+Examples: 
+- `abc123,def456,ghi789` (commits)
+- `#1234,#5678` (PRs)
+- `abc123,#1234,def456` (mixed)
+
+If no arguments provided, the command will help identify the correct core branch and guide you through selecting commits/PRs.
+</task>
+
+## Prerequisites
+
+Before starting, ensure:
+- You have push access to the repository
+- GitHub CLI (`gh`) is authenticated
+- You're on a clean working tree
+- You understand the commits/PRs you're cherry-picking
+
+## Hotfix Release Process
+
+### Step 1: Identify Target Core Branch
+
+1. Fetch the current ComfyUI requirements.txt from master branch:
+   ```bash
+   curl -s https://raw.githubusercontent.com/comfyanonymous/ComfyUI/master/requirements.txt | grep "comfyui-frontend-package"
+   ```
+2. Extract the `comfyui-frontend-package` version (e.g., `comfyui-frontend-package==1.23.4`)
+3. Parse version to get major.minor (e.g., `1.23.4` → `1.23`)
+4. Determine core branch: `core/<major>.<minor>` (e.g., `core/1.23`)
+5. Verify the core branch exists: `git ls-remote origin refs/heads/core/*`
+6. **CONFIRMATION REQUIRED**: Is `core/X.Y` the correct target branch?
+
+### Step 2: Parse and Validate Arguments
+
+1. Parse the comma-separated list of commits/PRs
+2. For each item:
+   - If starts with `#`: Treat as PR number
+   - Otherwise: Treat as commit hash
+3. For PR numbers:
+   - Fetch PR details using `gh pr view <number>`
+   - Extract the merge commit if PR is merged
+   - If PR has multiple commits, list them all
+   - **CONFIRMATION REQUIRED**: Use merge commit or cherry-pick individual commits?
+4. Validate all commit hashes exist in the repository
+
+### Step 3: Analyze Target Changes
+
+1. For each commit/PR to cherry-pick:
+   - Display commit hash, author, date
+   - Show PR title and number (if applicable)
+   - Display commit message
+   - Show files changed and diff statistics
+   - Check if already in core branch: `git branch --contains <commit>`
+2. Identify potential conflicts by checking changed files
+3. **CONFIRMATION REQUIRED**: Proceed with these commits?
+
+### Step 4: Create Hotfix Branch
+
+1. Checkout the core branch (e.g., `core/1.23`)
+2. Pull latest changes: `git pull origin core/X.Y`
+3. Display current version from package.json
+4. Create hotfix branch: `hotfix/<version>-<timestamp>`
+   - Example: `hotfix/1.23.4-20241120`
+5. **CONFIRMATION REQUIRED**: Created branch correctly?
+
+### Step 5: Cherry-pick Changes
+
+For each commit:
+1. Attempt cherry-pick: `git cherry-pick <commit>`
+2. If conflicts occur:
+   - Display conflict details
+   - Show conflicting sections
+   - Provide resolution guidance
+   - **CONFIRMATION REQUIRED**: Conflicts resolved correctly?
+3. After successful cherry-pick:
+   - Show the changes: `git show HEAD`
+   - Run validation: `npm run typecheck && npm run lint`
+4. **CONFIRMATION REQUIRED**: Cherry-pick successful and valid?
+
+### Step 6: Create PR to Core Branch
+
+1. Push the hotfix branch: `git push origin hotfix/<version>-<timestamp>`
+2. Create PR using gh CLI:
+   ```bash
+   gh pr create --base core/X.Y --head hotfix/<version>-<timestamp> \
+     --title "[Hotfix] Cherry-pick fixes to core/X.Y" \
+     --body "Cherry-picked commits: ..."
+   ```
+3. Add appropriate labels (but NOT "Release" yet)
+4. PR body should include:
+   - List of cherry-picked commits/PRs
+   - Original issue references
+   - Testing instructions
+   - Impact assessment
+5. **CONFIRMATION REQUIRED**: PR created correctly?
+
+### Step 7: Wait for Tests
+
+1. Monitor PR checks: `gh pr checks`
+2. Display test results as they complete
+3. If any tests fail:
+   - Show failure details
+   - Analyze if related to cherry-picks
+   - **DECISION REQUIRED**: Fix and continue, or abort?
+4. Wait for all required checks to pass
+5. **CONFIRMATION REQUIRED**: All tests passing?
+
+### Step 8: Merge Hotfix PR
+
+1. Verify all checks have passed
+2. Check for required approvals
+3. Merge the PR: `gh pr merge --merge`
+4. Delete the hotfix branch
+5. **CONFIRMATION REQUIRED**: PR merged successfully?
+
+### Step 9: Create Version Bump
+
+1. Checkout the core branch: `git checkout core/X.Y`
+2. Pull latest changes: `git pull origin core/X.Y`
+3. Read current version from package.json
+4. Determine patch version increment:
+   - Current: `1.23.4` → New: `1.23.5`
+5. Create release branch named with new version: `release/1.23.5`
+6. Update version in package.json to `1.23.5`
+7. Commit: `git commit -m "[release] Bump version to 1.23.5"`
+8. **CONFIRMATION REQUIRED**: Version bump correct?
+
+### Step 10: Create Release PR
+
+1. Push release branch: `git push origin release/1.23.5`
+2. Create PR with Release label:
+   ```bash
+   gh pr create --base core/X.Y --head release/1.23.5 \
+     --title "[Release] v1.23.5" \
+     --body "..." \
+     --label "Release"
+   ```
+3. **CRITICAL**: Verify "Release" label is added
+4. PR description should include:
+   - Version: `1.23.4` → `1.23.5`
+   - Included fixes (link to previous PR)
+   - Release notes for users
+5. **CONFIRMATION REQUIRED**: Release PR has "Release" label?
+
+### Step 11: Monitor Release Process
+
+1. Wait for PR checks to pass
+2. **FINAL CONFIRMATION**: Ready to trigger release by merging?
+3. Merge the PR: `gh pr merge --merge`
+4. Monitor release workflow:
+   ```bash
+   gh run list --workflow=release.yaml --limit=1
+   gh run watch
+   ```
+5. Track progress:
+   - GitHub release draft/publication
+   - PyPI upload
+   - npm types publication
+
+### Step 12: Post-Release Verification
+
+1. Verify GitHub release:
+   ```bash
+   gh release view v1.23.5
+   ```
+2. Check PyPI package:
+   ```bash
+   pip index versions comfyui-frontend-package | grep 1.23.5
+   ```
+3. Verify npm package:
+   ```bash
+   npm view @comfyorg/comfyui-frontend-types@1.23.5
+   ```
+4. Generate release summary with:
+   - Version released
+   - Commits included
+   - Issues fixed
+   - Distribution status
+5. **CONFIRMATION REQUIRED**: Release completed successfully?
+
+## Safety Checks
+
+Throughout the process:
+- Always verify core branch matches ComfyUI's requirements.txt
+- For PRs: Ensure using correct commits (merge vs individual)
+- Check version numbers follow semantic versioning
+- **Critical**: "Release" label must be on version bump PR
+- Validate cherry-picks don't break core branch stability
+- Keep audit trail of all operations
+
+## Rollback Procedures
+
+If something goes wrong:
+- Before push: `git reset --hard origin/core/X.Y`
+- After PR creation: Close PR and start over
+- After failed release: Create new patch version with fixes
+- Document any issues for future reference
+
+## Important Notes
+
+- Core branch version will be behind main - this is expected
+- The "Release" label triggers the PyPI/npm publication
+- PR numbers must include the `#` prefix
+- Mixed commits/PRs are supported but review carefully
+- Always wait for full test suite before proceeding
+
+## Expected Timeline
+
+- Step 1-3: ~10 minutes (analysis)
+- Steps 4-6: ~15-30 minutes (cherry-picking)
+- Step 7: ~10-20 minutes (tests)
+- Steps 8-10: ~10 minutes (version bump)
+- Step 11-12: ~15-20 minutes (release)
+- Total: ~60-90 minutes
+
+This process ensures a safe, verified hotfix release with multiple confirmation points and clear tracking of what changes are being released.

.github/workflows/i18n.yaml

@@ -3,6 +3,12 @@ name: Update Locales
 on:
   pull_request:
     branches: [ main, master, dev* ]
+    paths-ignore:
+      - '.github/**'
+      - '.husky/**'
+      - '.vscode/**'
+      - 'browser_tests/**'
+      - 'tests-ui/**'
 
 jobs:
   update-locales:

.github/workflows/release.yaml

@@ -15,6 +15,7 @@ jobs:
       contains(github.event.pull_request.labels.*.name, 'Release')
     outputs:
       version: ${{ steps.current_version.outputs.version }}
+      is_prerelease: ${{ steps.check_prerelease.outputs.is_prerelease }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -24,6 +25,15 @@ jobs:
       - name: Get current version
         id: current_version
         run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+      - name: Check if prerelease
+        id: check_prerelease
+        run: |
+          VERSION=${{ steps.current_version.outputs.version }}
+          if [[ "$VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+- ]]; then
+            echo "is_prerelease=true" >> $GITHUB_OUTPUT
+          else
+            echo "is_prerelease=false" >> $GITHUB_OUTPUT
+          fi
       - name: Build project
         env:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
@@ -62,9 +72,9 @@ jobs:
             dist.zip
           tag_name: v${{ needs.build.outputs.version }}
           target_commitish: ${{ github.event.pull_request.base.ref }}
-          make_latest: ${{ github.event.pull_request.base.ref == 'main' }}
-          draft: ${{ github.event.pull_request.base.ref != 'main' }}
-          prerelease: false
+          make_latest: ${{ github.event.pull_request.base.ref == 'main' && needs.build.outputs.is_prerelease == 'false' }}
+          draft: ${{ github.event.pull_request.base.ref != 'main' || needs.build.outputs.is_prerelease == 'true' }}
+          prerelease: ${{ needs.build.outputs.is_prerelease == 'true' }}
           generate_release_notes: true
 
   publish_pypi:

.github/workflows/version-bump.yaml

@@ -8,10 +8,12 @@ on:
         required: true
         default: 'patch'
         type: 'choice'
-        options:
-          - patch
-          - minor
-          - major
+        options: [patch, minor, major, prepatch, preminor, premajor, prerelease]
+      pre_release:
+        description: Pre-release ID (suffix)
+        required: false
+        default: ''
+        type: string
 
 jobs:
   bump-version:
@@ -33,19 +35,25 @@ jobs:
       - name: Bump version
         id: bump-version
         run: |
-          npm version ${{ github.event.inputs.version_type }} --no-git-tag-version
+          npm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
           NEW_VERSION=$(node -p "require('./package.json').version")
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
+      - name: Format PR string
+        id: capitalised
+        run: |
+          CAPITALISED_TYPE=${{ github.event.inputs.version_type }}
+          echo "capitalised=${CAPITALISED_TYPE@u}" >> $GITHUB_OUTPUT
+
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: '[release] Bump version to ${{ steps.bump-version.outputs.NEW_VERSION }}'
-          title: '${{ steps.bump-version.outputs.NEW_VERSION }}'
+          commit-message: '[release] Increment version to ${{ steps.bump-version.outputs.NEW_VERSION }}'
+          title: ${{ steps.bump-version.outputs.NEW_VERSION }}
           body: |
-            Automated version bump to ${{ steps.bump-version.outputs.NEW_VERSION }}
+            ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
           base: main
           labels: |
-            Release
+            Release

.husky/pre-commit

@@ -1,5 +1,9 @@
 if [[ "$OS" == "Windows_NT" ]]; then
   npx.cmd lint-staged
+  # Check for unused i18n keys in staged files
+  npx.cmd tsx scripts/check-unused-i18n-keys.ts
 else
   npx lint-staged
+  # Check for unused i18n keys in staged files
+  npx tsx scripts/check-unused-i18n-keys.ts
 fi

CLAUDE.md

@@ -1,8 +1,9 @@
-- use npm run to see what commands are available
+- use `npm run` to see what commands are available
+- For component communication, prefer Vue's event-based pattern (emit/@event-name) for state changes and notifications; use defineExpose with refs only for imperative operations that need direct control (like form.validate(), modal.open(), or editor.focus()); events promote loose coupling and are better for reusable components, while exposed methods are acceptable for tightly-coupled component pairs or when wrapping third-party libraries that require imperative APIs
 - After making code changes, follow this general process: (1) Create unit tests, component tests, browser tests (if appropriate for each), (2) run unit tests, component tests, and browser tests until passing, (3) run typecheck, lint, format (with prettier) -- you can use `npm run` command to see the scripts available, (4) check if any READMEs (including nested) or documentation needs to be updated, (5) Decide whether the changes are worth adding new content to the external documentation for (or would requires changes to the external documentation) at https://docs.comfy.org, then present your suggestion
 - When referencing PrimeVue, you can get all the docs here: https://primevue.org. Do this instead of making up or inferring names of Components
 - When trying to set tailwind classes for dark theme, use "dark-theme:" prefix rather than "dark:"
-- Never add lines to PR descriptions that say "Generated with Claude Code"
+- Never add lines to PR descriptions or commit messages that say "Generated with Claude Code"
 - When making PR names and commit messages, if you are going to add a prefix like "docs:", "feat:", "bugfix:", use square brackets around the prefix term and do not use a colon (e.g., should be "[docs]" rather than "docs:").
 - When I reference GitHub Repos related to Comfy-Org, you should proactively fetch or read the associated information in the repo. To do so, you should exhaust all options: (1) Check if we have a local copy of the repo, (2) Use the GitHub API to fetch the information; you may want to do this IN ADDITION to the other options, especially for reading specific branches/PRs/comments/reviews/metadata, and (3) curl the GitHub website and parse the html or json responses
 - For information about ComfyUI, ComfyUI_frontend, or ComfyUI-Manager, you can web search or download these wikis: https://deepwiki.com/Comfy-Org/ComfyUI-Manager, https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview, https://deepwiki.com/comfyanonymous/ComfyUI/2-core-architecture
@@ -17,7 +18,6 @@
 - Use the Vue 3 Composition API instead of the Options API when writing Vue components. An exception is when overriding or extending a PrimeVue component for compatibility, you may use the Options API.
 - when we are solving an issue we know the link/number for, we should add "Fixes #n" (where n is the issue number) to the PR description.
 - Never write css if you can accomplish the same thing with tailwind utility classes
-- Use setup() function for component logic
 - Utilize ref and reactive for reactive state
 - Implement computed properties with computed()
 - Use watch and watchEffect for side effects
@@ -27,14 +27,12 @@
 - Use Tailwind CSS for styling
 - Leverage VueUse functions for performance-enhancing styles
 - Use lodash for utility functions
-- Use TypeScript for type safety
 - Implement proper props and emits definitions
 - Utilize Vue 3's Teleport component when needed
 - Use Suspense for async components
 - Implement proper error handling
 - Follow Vue 3 style guide and naming conventions
-- Use Vite for fast development and building
-- Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json.
+- IMPORTANT: Use vue-i18n for ALL user-facing strings - no hard-coded text in services/utilities. Place new translation entries in src/locales/en/main.json
 - Avoid using `@ts-expect-error` to work around type issues. We needed to employ it to migrate to TypeScript, but it should not be viewed as an accepted practice or standard.
 - DO NOT use deprecated PrimeVue components. Use these replacements instead:
   * `Dropdown` → Use `Select` (import from 'primevue/select')
@@ -54,3 +52,7 @@
   - Templates: `api.fileURL('/templates/default.json')`
   - Extensions: `api.fileURL(extensionPath)` for loading JS modules
   - Any static assets that exist in the public directory
+- When implementing code that outputs raw HTML (e.g., using v-html directive), always ensure dynamic content has been properly sanitized with DOMPurify or validated through trusted sources. Prefer Vue templates over v-html when possible.
+- For any async operations (API calls, timers, etc), implement cleanup/cancellation in component unmount to prevent memory leaks
+- Extract complex template conditionals into separate components or computed properties
+- Error messages should be actionable and user-friendly (e.g., "Failed to load data. Please refresh the page." instead of "Unknown error")

browser_tests/README.md

@@ -29,6 +29,16 @@ A template with helpful information can be found in `.env_example`.
 ### Multiple Tests
 If you are running Playwright tests in parallel or running the same test multiple times, the flag `--multi-user` must be added to the main ComfyUI process.
 
+### Release API Mocking
+By default, all tests mock the release API (`api.comfy.org/releases`) to prevent release notification popups from interfering with test execution. This is necessary because the release notifications can appear over UI elements and block test interactions.
+
+To test with real release data, you can disable mocking:
+```typescript
+await comfyPage.setup({ mockReleases: false });
+```
+
+For tests that specifically need to test release functionality, see the example in `tests/releaseNotifications.spec.ts`.
+
 ## Running Tests
 
 There are multiple ways to run the tests:

browser_tests/fixtures/ComfyPage.ts

@@ -268,8 +268,34 @@ export class ComfyPage {
     return this._history
   }
 
-  async setup({ clearStorage = true }: { clearStorage?: boolean } = {}) {
+  async setup({
+    clearStorage = true,
+    mockReleases = true
+  }: {
+    clearStorage?: boolean
+    mockReleases?: boolean
+  } = {}) {
     await this.goto()
+
+    // Mock release endpoint to prevent changelog popups
+    if (mockReleases) {
+      await this.page.route('**/releases**', async (route) => {
+        const url = route.request().url()
+        if (
+          url.includes('api.comfy.org') ||
+          url.includes('stagingapi.comfy.org')
+        ) {
+          await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify([])
+          })
+        } else {
+          await route.continue()
+        }
+      })
+    }
+
     if (clearStorage) {
       await this.page.evaluate((id) => {
         localStorage.clear()
@@ -1086,7 +1112,7 @@ export const comfyPageFixture = base.extend<{
   },
   comfyMouse: async ({ comfyPage }, use) => {
     const comfyMouse = new ComfyMouse(comfyPage)
-    use(comfyMouse)
+    await use(comfyMouse)
   }
 })
 

browser_tests/tests/groupNode.spec.ts

@@ -17,11 +17,11 @@ test.describe('Group Node', () => {
       await libraryTab.open()
     })
 
-    test('Is added to node library sidebar', async ({ comfyPage }) => {
+    test.skip('Is added to node library sidebar', async ({ comfyPage }) => {
       expect(await libraryTab.getFolder('group nodes').count()).toBe(1)
     })
 
-    test('Can be added to canvas using node library sidebar', async ({
+    test.skip('Can be added to canvas using node library sidebar', async ({
       comfyPage
     }) => {
       const initialNodeCount = await comfyPage.getGraphNodesCount()
@@ -34,7 +34,7 @@ test.describe('Group Node', () => {
       expect(await comfyPage.getGraphNodesCount()).toBe(initialNodeCount + 1)
     })
 
-    test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
+    test.skip('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
       await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
         .getNode(groupNodeName)
@@ -61,7 +61,7 @@ test.describe('Group Node', () => {
       ).toHaveLength(0)
     })
 
-    test('Displays preview on bookmark hover', async ({ comfyPage }) => {
+    test.skip('Displays preview on bookmark hover', async ({ comfyPage }) => {
       await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
         .getNode(groupNodeName)
@@ -95,7 +95,7 @@ test.describe('Group Node', () => {
     )
   })
 
-  test('Displays tooltip on title hover', async ({ comfyPage }) => {
+  test.skip('Displays tooltip on title hover', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.convertAllNodesToGroupNode('Group Node')
     await comfyPage.page.mouse.move(47, 173)
@@ -104,7 +104,7 @@ test.describe('Group Node', () => {
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
-  test('Manage group opens with the correct group selected', async ({
+  test.skip('Manage group opens with the correct group selected', async ({
     comfyPage
   }) => {
     const makeGroup = async (name, type1, type2) => {
@@ -165,7 +165,7 @@ test.describe('Group Node', () => {
     expect(visibleInputCount).toBe(2)
   })
 
-  test('Reconnects inputs after configuration changed via manage dialog save', async ({
+  test.skip('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {
     const expectSingleNode = async (type: string) => {

browser_tests/tests/releaseNotifications.spec.ts

@@ -0,0 +1,368 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Release Notifications', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('should show help center with release information', async ({
+    comfyPage
+  }) => {
+    // Mock release API with test data instead of empty array
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([
+            {
+              id: 1,
+              project: 'comfyui',
+              version: 'v0.3.44',
+              attention: 'medium',
+              content:
+                '## New Features\n\n- Added awesome feature\n- Fixed important bug',
+              published_at: new Date().toISOString()
+            }
+          ])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    // Setup with release mocking disabled for this test
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center menu appears
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Verify "What's New?" section shows the release
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).toBeVisible()
+
+    // Should show the release version
+    await expect(
+      whatsNewSection.locator('text=Comfy v0.3.44 Release')
+    ).toBeVisible()
+
+    // Close help center by dismissable mask
+    await comfyPage.page.click('.help-center-backdrop')
+    await expect(helpMenu).not.toBeVisible()
+  })
+
+  test('should not show release notifications when mocked (default behavior)', async ({
+    comfyPage
+  }) => {
+    // Use default setup (mockReleases: true)
+    await comfyPage.setup()
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center menu appears
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Verify "What's New?" section shows no releases
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).toBeVisible()
+
+    // Should show "No recent releases" message
+    await expect(
+      whatsNewSection.locator('text=No recent releases')
+    ).toBeVisible()
+
+    // Should not show any popups or toasts
+    await expect(comfyPage.page.locator('.whats-new-popup')).not.toBeVisible()
+    await expect(
+      comfyPage.page.locator('.release-notification-toast')
+    ).not.toBeVisible()
+  })
+
+  test('should handle release API errors gracefully', async ({ comfyPage }) => {
+    // Mock API to return an error
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 500,
+          contentType: 'application/json',
+          body: JSON.stringify({ error: 'Server error' })
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    // Setup with release mocking disabled
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center still works despite API error
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Should show no releases due to error
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(
+      whatsNewSection.locator('text=No recent releases')
+    ).toBeVisible()
+  })
+
+  test('should hide "What\'s New" section when notifications are disabled', async ({
+    comfyPage
+  }) => {
+    // Disable version update notifications
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', false)
+
+    // Mock release API with test data
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([
+            {
+              id: 1,
+              project: 'comfyui',
+              version: 'v0.3.44',
+              attention: 'high',
+              content: '## New Features\n\n- Added awesome feature',
+              published_at: new Date().toISOString()
+            }
+          ])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center menu appears
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Verify "What's New?" section is hidden
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).not.toBeVisible()
+
+    // Should not show any popups or toasts
+    await expect(comfyPage.page.locator('.whats-new-popup')).not.toBeVisible()
+    await expect(
+      comfyPage.page.locator('.release-notification-toast')
+    ).not.toBeVisible()
+  })
+
+  test('should not make API calls when notifications are disabled', async ({
+    comfyPage
+  }) => {
+    // Disable version update notifications
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', false)
+
+    // Track API calls
+    let apiCallCount = 0
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        apiCallCount++
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    await comfyPage.setup({ mockReleases: false })
+
+    // Wait a bit to ensure any potential API calls would have been made
+    await comfyPage.page.waitForTimeout(1000)
+
+    // Verify no API calls were made
+    expect(apiCallCount).toBe(0)
+  })
+
+  test('should show "What\'s New" section when notifications are enabled', async ({
+    comfyPage
+  }) => {
+    // Enable version update notifications (default behavior)
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', true)
+
+    // Mock release API with test data
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([
+            {
+              id: 1,
+              project: 'comfyui',
+              version: 'v0.3.44',
+              attention: 'medium',
+              content: '## New Features\n\n- Added awesome feature',
+              published_at: new Date().toISOString()
+            }
+          ])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center menu appears
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Verify "What's New?" section is visible
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).toBeVisible()
+
+    // Should show the release
+    await expect(
+      whatsNewSection.locator('text=Comfy v0.3.44 Release')
+    ).toBeVisible()
+  })
+
+  test('should toggle "What\'s New" section when setting changes', async ({
+    comfyPage
+  }) => {
+    // Mock release API with test data
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([
+            {
+              id: 1,
+              project: 'comfyui',
+              version: 'v0.3.44',
+              attention: 'low',
+              content: '## Bug Fixes\n\n- Fixed minor issue',
+              published_at: new Date().toISOString()
+            }
+          ])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    // Start with notifications enabled
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', true)
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify "What's New?" section is visible
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).toBeVisible()
+
+    // Close help center
+    await comfyPage.page.click('.help-center-backdrop')
+
+    // Disable notifications
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', false)
+
+    // Reopen help center
+    await helpCenterButton.click()
+
+    // Verify "What's New?" section is now hidden
+    await expect(whatsNewSection).not.toBeVisible()
+  })
+
+  test('should handle edge case with empty releases and disabled notifications', async ({
+    comfyPage
+  }) => {
+    // Disable notifications
+    await comfyPage.setSetting('Comfy.Notification.ShowVersionUpdates', false)
+
+    // Mock empty releases
+    await comfyPage.page.route('**/releases**', async (route) => {
+      const url = route.request().url()
+      if (
+        url.includes('api.comfy.org') ||
+        url.includes('stagingapi.comfy.org')
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify([])
+        })
+      } else {
+        await route.continue()
+      }
+    })
+
+    await comfyPage.setup({ mockReleases: false })
+
+    // Open help center
+    const helpCenterButton = comfyPage.page.locator('.comfy-help-center-btn')
+    await helpCenterButton.waitFor({ state: 'visible' })
+    await helpCenterButton.click()
+
+    // Verify help center still works
+    const helpMenu = comfyPage.page.locator('.help-center-menu')
+    await expect(helpMenu).toBeVisible()
+
+    // Section should be hidden regardless of empty releases
+    const whatsNewSection = comfyPage.page.locator('.whats-new-section')
+    await expect(whatsNewSection).not.toBeVisible()
+  })
+})

browser_tests/tests/rightClickMenu.spec.ts

@@ -24,7 +24,7 @@ test.describe('Canvas Right Click Menu', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('add-group-group-added.png')
   })
 
-  test('Can convert to group node', async ({ comfyPage }) => {
+  test.skip('Can convert to group node', async ({ comfyPage }) => {
     await comfyPage.select2Nodes()
     await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
     await comfyPage.rightClickCanvas()

browser_tests/tests/useSettingSearch.spec.ts

@@ -0,0 +1,289 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Settings Search functionality', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    // Register test settings to verify hidden/deprecated filtering
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestSettingsExtension',
+        settings: [
+          {
+            id: 'TestHiddenSetting',
+            name: 'Test Hidden Setting',
+            type: 'hidden',
+            defaultValue: 'hidden_value',
+            category: ['Test', 'Hidden']
+          },
+          {
+            id: 'TestDeprecatedSetting',
+            name: 'Test Deprecated Setting',
+            type: 'text',
+            defaultValue: 'deprecated_value',
+            deprecated: true,
+            category: ['Test', 'Deprecated']
+          },
+          {
+            id: 'TestVisibleSetting',
+            name: 'Test Visible Setting',
+            type: 'text',
+            defaultValue: 'visible_value',
+            category: ['Test', 'Visible']
+          }
+        ]
+      })
+    })
+  })
+
+  test('can open settings dialog and use search box', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Find the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await expect(searchBox).toBeVisible()
+
+    // Verify search box has the correct placeholder
+    await expect(searchBox).toHaveAttribute(
+      'placeholder',
+      expect.stringContaining('Search')
+    )
+  })
+
+  test('search box is functional and accepts input', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Find and interact with the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Comfy')
+
+    // Verify the input was accepted
+    await expect(searchBox).toHaveValue('Comfy')
+  })
+
+  test('search box clears properly', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Find and interact with the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('test')
+    await expect(searchBox).toHaveValue('test')
+
+    // Clear the search box
+    await searchBox.clear()
+    await expect(searchBox).toHaveValue('')
+  })
+
+  test('settings categories are visible in sidebar', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Check that the sidebar has categories
+    const categories = comfyPage.page.locator(
+      '.settings-sidebar .p-listbox-option'
+    )
+    expect(await categories.count()).toBeGreaterThan(0)
+
+    // Check that at least one category is visible
+    await expect(categories.first()).toBeVisible()
+  })
+
+  test('can select different categories in sidebar', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Get categories and click on different ones
+    const categories = comfyPage.page.locator(
+      '.settings-sidebar .p-listbox-option'
+    )
+    const categoryCount = await categories.count()
+
+    if (categoryCount > 1) {
+      // Click on the second category
+      await categories.nth(1).click()
+
+      // Verify the category is selected
+      await expect(categories.nth(1)).toHaveClass(/p-listbox-option-selected/)
+    }
+  })
+
+  test('settings content area is visible', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Check that the content area is visible
+    const contentArea = comfyPage.page.locator('.settings-content')
+    await expect(contentArea).toBeVisible()
+
+    // Check that tab panels are visible
+    const tabPanels = comfyPage.page.locator('.settings-tab-panels')
+    await expect(tabPanels).toBeVisible()
+  })
+
+  test('search functionality affects UI state', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Find the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+
+    // Type in search box
+    await searchBox.fill('graph')
+    await comfyPage.page.waitForTimeout(200) // Wait for debounce
+
+    // Verify that the search input is handled
+    await expect(searchBox).toHaveValue('graph')
+  })
+
+  test('settings dialog can be closed', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Close with escape key
+    await comfyPage.page.keyboard.press('Escape')
+
+    // Verify dialog is closed
+    await expect(settingsDialog).not.toBeVisible()
+  })
+
+  test('search box has proper debouncing behavior', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Type rapidly in search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('a')
+    await searchBox.fill('ab')
+    await searchBox.fill('abc')
+    await searchBox.fill('abcd')
+
+    // Wait for debounce
+    await comfyPage.page.waitForTimeout(200)
+
+    // Verify final value
+    await expect(searchBox).toHaveValue('abcd')
+  })
+
+  test('search excludes hidden settings from results', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
+    await comfyPage.page.waitForTimeout(300) // Wait for debounce
+
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should show visible setting but not hidden setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+  })
+
+  test('search excludes deprecated settings from results', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
+    await comfyPage.page.waitForTimeout(300) // Wait for debounce
+
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should show visible setting but not deprecated setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+  })
+
+  test('search shows visible settings but excludes hidden and deprecated', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
+    await comfyPage.page.waitForTimeout(300) // Wait for debounce
+
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should only show the visible setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+
+    // Should not show hidden or deprecated settings
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+  })
+
+  test('search by setting name excludes hidden and deprecated', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Search specifically for hidden setting by name
+    await searchBox.clear()
+    await searchBox.fill('Hidden')
+    await comfyPage.page.waitForTimeout(300)
+
+    // Should not show the hidden setting even when searching by name
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+
+    // Search specifically for deprecated setting by name
+    await searchBox.clear()
+    await searchBox.fill('Deprecated')
+    await comfyPage.page.waitForTimeout(300)
+
+    // Should not show the deprecated setting even when searching by name
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+
+    // Search for visible setting by name - should work
+    await searchBox.clear()
+    await searchBox.fill('Visible')
+    await comfyPage.page.waitForTimeout(300)
+
+    // Should show the visible setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+  })
+})

build/plugins/addElementVnodeExportPlugin.ts

@@ -1,59 +0,0 @@
-import { Plugin } from 'vite'
-
-/**
- * Vite plugin that adds an alias export for Vue's createBaseVNode as createElementVNode.
- *
- * This plugin addresses compatibility issues where some components or libraries
- * might be using the older createElementVNode function name instead of createBaseVNode.
- * It modifies the Vue vendor chunk during build to add the alias export.
- *
- * @returns {Plugin} A Vite plugin that modifies the Vue vendor chunk exports
- */
-export function addElementVnodeExportPlugin(): Plugin {
-  return {
-    name: 'add-element-vnode-export-plugin',
-
-    renderChunk(code, chunk, _options) {
-      if (chunk.name.startsWith('vendor-vue')) {
-        const exportRegex = /(export\s*\{)([^}]*)(\}\s*;?\s*)$/
-        const match = code.match(exportRegex)
-
-        if (match) {
-          const existingExports = match[2].trim()
-          const exportsArray = existingExports
-            .split(',')
-            .map((e) => e.trim())
-            .filter(Boolean)
-
-          const hasCreateBaseVNode = exportsArray.some((e) =>
-            e.startsWith('createBaseVNode')
-          )
-          const hasCreateElementVNode = exportsArray.some((e) =>
-            e.includes('createElementVNode')
-          )
-
-          if (hasCreateBaseVNode && !hasCreateElementVNode) {
-            const newExportStatement = `${match[1]} ${existingExports ? existingExports + ',' : ''} createBaseVNode as createElementVNode ${match[3]}`
-            const newCode = code.replace(exportRegex, newExportStatement)
-
-            console.log(
-              `[add-element-vnode-export-plugin] Added 'createBaseVNode as createElementVNode' export to vendor-vue chunk.`
-            )
-
-            return { code: newCode, map: null }
-          } else if (!hasCreateBaseVNode) {
-            console.warn(
-              `[add-element-vnode-export-plugin] Warning: 'createBaseVNode' not found in exports of vendor-vue chunk. Cannot add alias.`
-            )
-          }
-        } else {
-          console.warn(
-            `[add-element-vnode-export-plugin] Warning: Could not find expected export block format in vendor-vue chunk.`
-          )
-        }
-      }
-
-      return null
-    }
-  }
-}

build/plugins/generateImportMapPlugin.ts

@@ -1,9 +1,24 @@
-import type { OutputOptions } from 'rollup'
-import { HtmlTagDescriptor, Plugin } from 'vite'
+import glob from 'fast-glob'
+import fs from 'fs-extra'
+import { dirname, join } from 'node:path'
+import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
 
-interface VendorLibrary {
+interface ImportMapSource {
   name: string
-  pattern: RegExp
+  pattern: string | RegExp
+  entry: string
+  recursiveDependence?: boolean
+  override?: Record<string, Partial<ImportMapSource>>
+}
+
+const parseDeps = (root: string, pkg: string) => {
+  const pkgPath = join(root, 'node_modules', pkg, 'package.json')
+  if (fs.existsSync(pkgPath)) {
+    const content = fs.readFileSync(pkgPath, 'utf-8')
+    const pkg = JSON.parse(content)
+    return Object.keys(pkg.dependencies || {})
+  }
+  return []
 }
 
 /**
@@ -23,53 +38,89 @@ interface VendorLibrary {
  * @returns {Plugin} A Vite plugin that generates and injects an import map
  */
 export function generateImportMapPlugin(
-  vendorLibraries: VendorLibrary[]
+  importMapSources: ImportMapSource[]
 ): Plugin {
   const importMapEntries: Record<string, string> = {}
+  const resolvedImportMapSources: Map<string, ImportMapSource> = new Map()
+  const assetDir = 'assets/lib'
+  let root: string
 
   return {
     name: 'generate-import-map-plugin',
 
     // Configure manual chunks during the build process
     configResolved(config) {
+      root = config.root
+
       if (config.build) {
         // Ensure rollupOptions exists
         if (!config.build.rollupOptions) {
           config.build.rollupOptions = {}
         }
 
-        const outputOptions: OutputOptions = {
-          manualChunks: (id: string) => {
-            for (const lib of vendorLibraries) {
-              if (lib.pattern.test(id)) {
-                return `vendor-${lib.name}`
-              }
+        for (const source of importMapSources) {
+          resolvedImportMapSources.set(source.name, source)
+          if (source.recursiveDependence) {
+            const deps = parseDeps(root, source.name)
+
+            while (deps.length) {
+              const dep = deps.shift()!
+              const depSource = Object.assign({}, source, {
+                name: dep,
+                pattern: dep,
+                ...source.override?.[dep]
+              })
+              resolvedImportMapSources.set(depSource.name, depSource)
+
+              const _deps = parseDeps(root, depSource.name)
+              deps.unshift(..._deps)
             }
-            return null
-          },
-          // Disable minification of internal exports to preserve function names
-          minifyInternalExports: false
+          }
         }
-        config.build.rollupOptions.output = outputOptions
+
+        const external: (string | RegExp)[] = []
+        for (const [, source] of resolvedImportMapSources) {
+          external.push(source.pattern)
+        }
+        config.build.rollupOptions.external = external
       }
     },
 
-    generateBundle(_options, bundle) {
-      for (const fileName in bundle) {
-        const chunk = bundle[fileName]
-        if (chunk.type === 'chunk' && !chunk.isEntry) {
-          // Find matching vendor library by chunk name
-          const vendorLib = vendorLibraries.find(
-            (lib) => chunk.name === `vendor-${lib.name}`
-          )
+    generateBundle(_options) {
+      for (const [, source] of resolvedImportMapSources) {
+        if (source.entry) {
+          const moduleFile = join(source.name, source.entry)
+          const sourceFile = join(root, 'node_modules', moduleFile)
+          const targetFile = join(root, 'dist', assetDir, moduleFile)
 
-          if (vendorLib) {
-            const relativePath = `./${chunk.fileName.replace(/\\/g, '/')}`
-            importMapEntries[vendorLib.name] = relativePath
+          importMapEntries[source.name] =
+            './' + normalizePath(join(assetDir, moduleFile))
 
-            console.log(
-              `[ImportMap Plugin] Found chunk: ${chunk.name} -> Mapped '${vendorLib.name}' to '${relativePath}'`
-            )
+          const targetDir = dirname(targetFile)
+          if (!fs.existsSync(targetDir)) {
+            fs.mkdirSync(targetDir, { recursive: true })
+          }
+          fs.copyFileSync(sourceFile, targetFile)
+        }
+
+        if (source.recursiveDependence) {
+          const files = glob.sync(['**/*.{js,mjs}'], {
+            cwd: join(root, 'node_modules', source.name)
+          })
+
+          for (const file of files) {
+            const moduleFile = join(source.name, file)
+            const sourceFile = join(root, 'node_modules', moduleFile)
+            const targetFile = join(root, 'dist', assetDir, moduleFile)
+
+            importMapEntries[normalizePath(join(source.name, dirname(file)))] =
+              './' + normalizePath(join(assetDir, moduleFile))
+
+            const targetDir = dirname(targetFile)
+            if (!fs.existsSync(targetDir)) {
+              fs.mkdirSync(targetDir, { recursive: true })
+            }
+            fs.copyFileSync(sourceFile, targetFile)
           }
         }
       }

build/plugins/index.ts

@@ -1,3 +1,2 @@
-export { addElementVnodeExportPlugin } from './addElementVnodeExportPlugin'
 export { comfyAPIPlugin } from './comfyAPIPlugin'
 export { generateImportMapPlugin } from './generateImportMapPlugin'

eslint.config.js

@@ -1,4 +1,5 @@
 import pluginJs from '@eslint/js'
+import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
@@ -45,7 +46,8 @@ export default [
   },
   {
     plugins: {
-      'unused-imports': unusedImports
+      'unused-imports': unusedImports,
+      '@intlify/vue-i18n': pluginI18n
     },
     rules: {
       '@typescript-eslint/no-floating-promises': 'error',
@@ -53,7 +55,41 @@ export default [
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/prefer-as-const': 'off',
       'unused-imports/no-unused-imports': 'error',
-      'vue/no-v-html': 'off'
+      'vue/no-v-html': 'off',
+      // i18n rules
+      '@intlify/vue-i18n/no-raw-text': [
+        'error',
+        {
+          // Ignore strings that are:
+          // 1. Less than 2 characters
+          // 2. Only symbols/numbers/whitespace (no letters)
+          // 3. Match specific patterns
+          ignorePattern:
+            '^[^a-zA-Z]*$|^.{0,1}$|^[\\w._%+-]+@[\\w.-]+\\.[A-Za-z]{2,}$',
+          ignoreNodes: ['md-icon', 'v-icon', 'pre', 'code', 'script', 'style'],
+          // Brand names and technical terms that shouldn't be translated
+          ignoreText: [
+            'ComfyUI',
+            'GitHub',
+            'OpenAI',
+            'API',
+            'URL',
+            'JSON',
+            'YAML',
+            'GPU',
+            'CPU',
+            'RAM',
+            'GB',
+            'MB',
+            'KB',
+            'ms',
+            'fps',
+            'px',
+            'App Data:',
+            'App Path:'
+          ]
+        }
+      ]
     }
   }
 ]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.23.5",
+  "version": "1.24.0-1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -31,6 +31,7 @@
     "@eslint/js": "^9.8.0",
     "@executeautomation/playwright-mcp-server": "^1.0.5",
     "@iconify/json": "^2.2.245",
+    "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
     "@lobehub/i18n-cli": "^1.20.0",
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.52.0",

scripts/check-unused-i18n-keys.ts

@@ -0,0 +1,191 @@
+#!/usr/bin/env tsx
+import { execSync } from 'child_process'
+import * as fs from 'fs'
+import { globSync } from 'glob'
+
+interface LocaleData {
+  [key: string]: any
+}
+
+// Configuration
+const SOURCE_PATTERNS = ['src/**/*.{js,ts,vue}', '!src/locales/**/*']
+const IGNORE_PATTERNS = [
+  // Keys that might be dynamically constructed
+  /^commands\./, // Command definitions are loaded dynamically
+  /^settings\..*\.options\./, // Setting options are rendered dynamically
+  /^nodeDefs\./, // Node definitions are loaded from backend
+  /^templateWorkflows\./, // Template workflows are loaded dynamically
+  /^dataTypes\./, // Data types might be referenced dynamically
+  /^contextMenu\./, // Context menu items might be dynamic
+  /^color\./, // Color names might be used dynamically
+  // Auto-generated categories from collect-i18n-general.ts
+  /^menuLabels\./, // Menu labels generated from command labels
+  /^settingsCategories\./, // Settings categories generated from setting definitions
+  /^serverConfigItems\./, // Server config items generated from SERVER_CONFIG_ITEMS
+  /^serverConfigCategories\./, // Server config categories generated from config categories
+  /^nodeCategories\./, // Node categories generated from node definitions
+  // Setting option values that are dynamically generated
+  /\.options\./ // All setting options are rendered dynamically
+]
+
+// Get list of staged locale files
+function getStagedLocaleFiles(): string[] {
+  try {
+    const output = execSync('git diff --cached --name-only --diff-filter=AM', {
+      encoding: 'utf-8'
+    })
+    return output
+      .split('\n')
+      .filter(
+        (file) => file.startsWith('src/locales/') && file.endsWith('.json')
+      )
+  } catch {
+    return []
+  }
+}
+
+// Extract all keys from a nested object
+function extractKeys(obj: any, prefix = ''): string[] {
+  const keys: string[] = []
+
+  for (const [key, value] of Object.entries(obj)) {
+    const fullKey = prefix ? `${prefix}.${key}` : key
+
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      keys.push(...extractKeys(value, fullKey))
+    } else {
+      keys.push(fullKey)
+    }
+  }
+
+  return keys
+}
+
+// Get new keys added in staged files
+function getNewKeysFromStagedFiles(stagedFiles: string[]): Set<string> {
+  const newKeys = new Set<string>()
+
+  for (const file of stagedFiles) {
+    try {
+      // Get the staged content
+      const stagedContent = execSync(`git show :${file}`, { encoding: 'utf-8' })
+      const stagedData: LocaleData = JSON.parse(stagedContent)
+      const stagedKeys = new Set(extractKeys(stagedData))
+
+      // Get the current HEAD content (if file exists)
+      let headKeys = new Set<string>()
+      try {
+        const headContent = execSync(`git show HEAD:${file}`, {
+          encoding: 'utf-8'
+        })
+        const headData: LocaleData = JSON.parse(headContent)
+        headKeys = new Set(extractKeys(headData))
+      } catch {
+        // File is new, all keys are new
+      }
+
+      // Find keys that are in staged but not in HEAD
+      stagedKeys.forEach((key) => {
+        if (!headKeys.has(key)) {
+          newKeys.add(key)
+        }
+      })
+    } catch (error) {
+      console.error(`Error processing ${file}:`, error)
+    }
+  }
+
+  return newKeys
+}
+
+// Check if a key should be ignored
+function shouldIgnoreKey(key: string): boolean {
+  return IGNORE_PATTERNS.some((pattern) => pattern.test(key))
+}
+
+// Search for key usage in source files
+function isKeyUsed(key: string, sourceFiles: string[]): boolean {
+  // Escape special regex characters
+  const escapeRegex = (str: string) =>
+    str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const escapedKey = escapeRegex(key)
+  const lastPart = key.split('.').pop()
+  const escapedLastPart = lastPart ? escapeRegex(lastPart) : ''
+
+  // Common patterns for i18n key usage
+  const patterns = [
+    // Direct usage: $t('key'), t('key'), i18n.t('key')
+    new RegExp(`[t$]\\s*\\(\\s*['"\`]${escapedKey}['"\`]`, 'g'),
+    // With namespace: $t('g.key'), t('namespace.key')
+    new RegExp(`[t$]\\s*\\(\\s*['"\`][^'"]+\\.${escapedLastPart}['"\`]`, 'g'),
+    // Dynamic keys might reference parts of the key
+    new RegExp(`['"\`]${escapedKey}['"\`]`, 'g')
+  ]
+
+  for (const file of sourceFiles) {
+    const content = fs.readFileSync(file, 'utf-8')
+
+    for (const pattern of patterns) {
+      if (pattern.test(content)) {
+        return true
+      }
+    }
+  }
+
+  return false
+}
+
+// Main function
+async function checkNewUnusedKeys() {
+  const stagedLocaleFiles = getStagedLocaleFiles()
+
+  if (stagedLocaleFiles.length === 0) {
+    // No locale files staged, nothing to check
+    process.exit(0)
+  }
+
+  // Get all new keys from staged files
+  const newKeys = getNewKeysFromStagedFiles(stagedLocaleFiles)
+
+  if (newKeys.size === 0) {
+    // Silent success - no output needed
+    process.exit(0)
+  }
+
+  // Get all source files
+  const sourceFiles = globSync(SOURCE_PATTERNS)
+
+  // Check each new key
+  const unusedNewKeys: string[] = []
+
+  newKeys.forEach((key) => {
+    if (!shouldIgnoreKey(key) && !isKeyUsed(key, sourceFiles)) {
+      unusedNewKeys.push(key)
+    }
+  })
+
+  // Report results
+  if (unusedNewKeys.length > 0) {
+    console.log('\n❌ Found unused NEW i18n keys:\n')
+
+    for (const key of unusedNewKeys.sort()) {
+      console.log(`  - ${key}`)
+    }
+
+    console.log(`\n✨ Total unused new keys: ${unusedNewKeys.length}`)
+    console.log(
+      '\nThese keys were added but are not used anywhere in the codebase.'
+    )
+    console.log('Please either use them or remove them before committing.')
+
+    process.exit(1)
+  } else {
+    // Silent success - no output needed
+  }
+}
+
+// Run the check
+checkNewUnusedKeys().catch((err) => {
+  console.error('Error checking unused keys:', err)
+  process.exit(1)
+})

src/assets/css/style.css

@@ -27,6 +27,11 @@
   --content-fg: #000;
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
+  
+  /* Code styling colors for help menu*/
+  --code-text-color: rgba(0, 122, 255, 1);
+  --code-bg-color: rgba(96, 165, 250, 0.2);
+  --code-block-bg-color: rgba(60, 60, 60, 0.12);
 }
 
 @media (prefers-color-scheme: dark) {

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="workflowStore.isSubgraphActive"
-    class="fixed top-[var(--comfy-topbar-height)] left-[var(--sidebar-width)] p-2 subgraph-breadcrumb"
-  >
+  <div v-if="workflowStore.isSubgraphActive" class="p-2 subgraph-breadcrumb">
     <Breadcrumb
       class="bg-transparent"
       :home="home"
@@ -14,28 +11,30 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener, whenever } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import Breadcrumb from 'primevue/breadcrumb'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { computed } from 'vue'
 
-import { useWorkflowService } from '@/services/workflowService'
 import { useCanvasStore } from '@/stores/graphStore'
+import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 
-const workflowService = useWorkflowService()
 const workflowStore = useWorkflowStore()
+const navigationStore = useSubgraphNavigationStore()
 
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 
 const items = computed(() => {
-  if (!workflowStore.subgraphNamePath.length) return []
+  if (!navigationStore.navigationStack.length) return []
 
-  return workflowStore.subgraphNamePath.map<MenuItem>((name) => ({
-    label: name,
-    command: async () => {
-      const workflow = workflowStore.getWorkflowByPath(name)
-      if (workflow) await workflowService.openWorkflow(workflow)
+  return navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
+    label: subgraph.name,
+    command: () => {
+      const canvas = useCanvasStore().getCanvas()
+      if (!canvas.graph) throw new TypeError('Canvas has no graph')
+
+      canvas.setGraph(subgraph)
     }
   }))
 })
@@ -43,7 +42,7 @@ const items = computed(() => {
 const home = computed(() => ({
   label: workflowName.value,
   icon: 'pi pi-home',
-  command: async () => {
+  command: () => {
     const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
@@ -55,22 +54,32 @@ const handleItemClick = (event: MenuItemCommandEvent) => {
   event.item.command?.(event)
 }
 
-whenever(
-  () => useCanvasStore().canvas,
-  (canvas) => {
-    useEventListener(canvas.canvas, 'litegraph:set-graph', () => {
-      useWorkflowStore().updateActiveGraph()
-    })
+// Escape exits from the current subgraph.
+useEventListener(document, 'keydown', (event) => {
+  if (event.key === 'Escape') {
+    const canvas = useCanvasStore().getCanvas()
+    if (!canvas.graph) throw new TypeError('Canvas has no graph')
+
+    canvas.setGraph(
+      navigationStore.navigationStack.at(-2) ?? canvas.graph.rootGraph
+    )
   }
-)
+})
 </script>
 
 <style>
 .subgraph-breadcrumb {
   .p-breadcrumb-item-link,
   .p-breadcrumb-item-icon {
+    @apply select-none;
+
     color: #d26565;
-    user-select: none;
+    text-shadow:
+      1px 1px 0 #000,
+      -1px -1px 0 #000,
+      1px -1px 0 #000,
+      -1px 1px 0 #000,
+      0 0 0.375rem #000;
   }
 }
 </style>

src/components/dialog/content/SettingDialogContent.vue

@@ -50,7 +50,7 @@
         <Suspense v-for="panel in panels" :key="panel.node.key">
           <component :is="panel.component" />
           <template #fallback>
-            <div>Loading {{ panel.node.label }} panel...</div>
+            <div>{{ $t('g.loadingPanel', { panel: panel.node.label }) }}</div>
           </template>
         </Suspense>
       </TabPanels>

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

@@ -41,7 +41,8 @@
         </div>
       </div>
 
-      <div class="flex justify-between items-center mt-8">
+      <div class="flex justify-between items-center">
+        <h3>{{ $t('credits.activity') }}</h3>
         <Button
           :label="$t('credits.invoiceHistory')"
           text
@@ -81,6 +82,8 @@
 
       <Divider />
 
+      <UsageLogsTable ref="usageLogsTableRef" />
+
       <div class="flex flex-row gap-2">
         <Button
           :label="$t('credits.faqs')"
@@ -108,10 +111,11 @@ import DataTable from 'primevue/datatable'
 import Divider from 'primevue/divider'
 import Skeleton from 'primevue/skeleton'
 import TabPanel from 'primevue/tabpanel'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import UserCredit from '@/components/common/UserCredit.vue'
+import UsageLogsTable from '@/components/dialog/content/setting/UsageLogsTable.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -131,12 +135,23 @@ const authActions = useFirebaseAuthActions()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 
+const usageLogsTableRef = ref<InstanceType<typeof UsageLogsTable> | null>(null)
+
 const formattedLastUpdateTime = computed(() =>
   authStore.lastBalanceUpdateTime
     ? authStore.lastBalanceUpdateTime.toLocaleString()
     : ''
 )
 
+watch(
+  () => authStore.lastBalanceUpdateTime,
+  (newTime, oldTime) => {
+    if (newTime && newTime !== oldTime && usageLogsTableRef.value) {
+      usageLogsTableRef.value.refresh()
+    }
+  }
+)
+
 const handlePurchaseCreditsClick = () => {
   dialogService.showTopUpCreditsDialog()
 }

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

@@ -98,7 +98,7 @@
           @keydown.stop.prevent="captureKeybinding"
         />
         <Message v-if="existingKeybindingOnCombo" severity="warn">
-          Keybinding already exists on
+          {{ $t('g.keybindingAlreadyExists') }}
           <Tag
             severity="secondary"
             :value="existingKeybindingOnCombo.commandId"

src/components/dialog/content/setting/UsageLogsTable.spec.ts

@@ -0,0 +1,399 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import Badge from 'primevue/badge'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import PrimeVue from 'primevue/config'
+import DataTable from 'primevue/datatable'
+import Message from 'primevue/message'
+import ProgressSpinner from 'primevue/progressspinner'
+import Tooltip from 'primevue/tooltip'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import { EventType } from '@/services/customerEventsService'
+
+import UsageLogsTable from './UsageLogsTable.vue'
+
+type ComponentInstance = InstanceType<typeof UsageLogsTable> & {
+  loading: boolean
+  error: string | null
+  events: any[]
+  pagination: {
+    page: number
+    limit: number
+    total: number
+    totalPages: number
+  }
+  dataTableFirst: number
+  tooltipContentMap: Map<string, string>
+  loadEvents: () => Promise<void>
+  refresh: () => Promise<void>
+  onPageChange: (event: { page: number }) => void
+}
+
+// Mock the customerEventsService
+const mockCustomerEventsService = vi.hoisted(() => ({
+  getMyEvents: vi.fn(),
+  formatEventType: vi.fn(),
+  getEventSeverity: vi.fn(),
+  formatAmount: vi.fn(),
+  formatDate: vi.fn(),
+  hasAdditionalInfo: vi.fn(),
+  getTooltipContent: vi.fn(),
+  error: { value: null },
+  isLoading: { value: false }
+}))
+
+vi.mock('@/services/customerEventsService', () => ({
+  useCustomerEventsService: () => mockCustomerEventsService,
+  EventType: {
+    CREDIT_ADDED: 'credit_added',
+    ACCOUNT_CREATED: 'account_created',
+    API_USAGE_STARTED: 'api_usage_started',
+    API_USAGE_COMPLETED: 'api_usage_completed'
+  }
+}))
+
+// Create i18n instance
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      credits: {
+        eventType: 'Event Type',
+        details: 'Details',
+        time: 'Time',
+        additionalInfo: 'Additional Info',
+        added: 'Added',
+        accountInitialized: 'Account initialized',
+        model: 'Model'
+      }
+    }
+  }
+})
+
+describe('UsageLogsTable', () => {
+  const mockEventsResponse = {
+    events: [
+      {
+        event_id: 'event-1',
+        event_type: 'credit_added',
+        params: {
+          amount: 1000,
+          transaction_id: 'txn-123'
+        },
+        createdAt: '2024-01-01T10:00:00Z'
+      },
+      {
+        event_id: 'event-2',
+        event_type: 'api_usage_completed',
+        params: {
+          api_name: 'Image Generation',
+          model: 'sdxl-base',
+          duration: 5000
+        },
+        createdAt: '2024-01-02T10:00:00Z'
+      }
+    ],
+    total: 2,
+    page: 1,
+    limit: 7,
+    totalPages: 1
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Setup default service mock implementations
+    mockCustomerEventsService.getMyEvents.mockResolvedValue(mockEventsResponse)
+    mockCustomerEventsService.formatEventType.mockImplementation((type) => {
+      switch (type) {
+        case EventType.CREDIT_ADDED:
+          return 'Credits Added'
+        case EventType.ACCOUNT_CREATED:
+          return 'Account Created'
+        case EventType.API_USAGE_COMPLETED:
+          return 'API Usage'
+        default:
+          return type
+      }
+    })
+    mockCustomerEventsService.getEventSeverity.mockImplementation((type) => {
+      switch (type) {
+        case EventType.CREDIT_ADDED:
+          return 'success'
+        case EventType.ACCOUNT_CREATED:
+          return 'info'
+        case EventType.API_USAGE_COMPLETED:
+          return 'warning'
+        default:
+          return 'info'
+      }
+    })
+    mockCustomerEventsService.formatAmount.mockImplementation((amount) => {
+      if (!amount) return '0.00'
+      return (amount / 100).toFixed(2)
+    })
+    mockCustomerEventsService.formatDate.mockImplementation((dateString) => {
+      return new Date(dateString).toLocaleDateString()
+    })
+    mockCustomerEventsService.hasAdditionalInfo.mockImplementation((event) => {
+      const { amount, api_name, model, ...otherParams } = event.params || {}
+      return Object.keys(otherParams).length > 0
+    })
+    mockCustomerEventsService.getTooltipContent.mockImplementation(() => {
+      return '<strong>Transaction Id:</strong> txn-123'
+    })
+    mockCustomerEventsService.error.value = null
+    mockCustomerEventsService.isLoading.value = false
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  const mountComponent = (options = {}) => {
+    return mount(UsageLogsTable, {
+      global: {
+        plugins: [PrimeVue, i18n, createTestingPinia()],
+        components: {
+          DataTable,
+          Column,
+          Badge,
+          Button,
+          Message,
+          ProgressSpinner
+        },
+        directives: {
+          tooltip: Tooltip
+        }
+      },
+      ...options
+    })
+  }
+
+  describe('loading states', () => {
+    it('shows loading spinner when loading is true', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+      vm.loading = true
+      await nextTick()
+
+      expect(wrapper.findComponent(ProgressSpinner).exists()).toBe(true)
+      expect(wrapper.findComponent(DataTable).exists()).toBe(false)
+    })
+
+    it('shows error message when error exists', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+      vm.error = 'Failed to load events'
+      vm.loading = false
+      await nextTick()
+
+      const messageComponent = wrapper.findComponent(Message)
+      expect(messageComponent.exists()).toBe(true)
+      expect(messageComponent.props('severity')).toBe('error')
+      expect(messageComponent.text()).toContain('Failed to load events')
+    })
+
+    it('shows data table when loaded successfully', async () => {
+      const wrapper = mountComponent()
+
+      const vm = wrapper.vm as ComponentInstance
+      // Wait for component to mount and load data
+      await wrapper.vm.$nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      vm.loading = false
+      vm.events = mockEventsResponse.events
+      await nextTick()
+
+      expect(wrapper.findComponent(DataTable).exists()).toBe(true)
+      expect(wrapper.findComponent(ProgressSpinner).exists()).toBe(false)
+      expect(wrapper.findComponent(Message).exists()).toBe(false)
+    })
+  })
+
+  describe('data rendering', () => {
+    it('renders events data correctly', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+      vm.loading = false
+      vm.events = mockEventsResponse.events
+      await nextTick()
+
+      const dataTable = wrapper.findComponent(DataTable)
+      expect(dataTable.props('value')).toEqual(mockEventsResponse.events)
+      expect(dataTable.props('rows')).toBe(7)
+      expect(dataTable.props('paginator')).toBe(true)
+      expect(dataTable.props('lazy')).toBe(true)
+    })
+
+    it('renders badge for event types correctly', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+      vm.loading = false
+      vm.events = mockEventsResponse.events
+      await nextTick()
+
+      const badges = wrapper.findAllComponents(Badge)
+      expect(badges.length).toBeGreaterThan(0)
+
+      // Check if formatEventType and getEventSeverity are called
+      expect(mockCustomerEventsService.formatEventType).toHaveBeenCalled()
+      expect(mockCustomerEventsService.getEventSeverity).toHaveBeenCalled()
+    })
+
+    it('renders different event details based on event type', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+      vm.loading = false
+      vm.events = mockEventsResponse.events
+      await nextTick()
+
+      // Check if formatAmount is called for credit_added events
+      expect(mockCustomerEventsService.formatAmount).toHaveBeenCalled()
+    })
+
+    it('renders tooltip buttons for events with additional info', async () => {
+      mockCustomerEventsService.hasAdditionalInfo.mockReturnValue(true)
+
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+      vm.loading = false
+      vm.events = mockEventsResponse.events
+      await nextTick()
+
+      expect(mockCustomerEventsService.hasAdditionalInfo).toHaveBeenCalled()
+    })
+  })
+
+  describe('pagination', () => {
+    it('handles page change correctly', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+      vm.loading = false
+      vm.events = mockEventsResponse.events
+      await nextTick()
+
+      // Simulate page change
+      const dataTable = wrapper.findComponent(DataTable)
+      await dataTable.vm.$emit('page', { page: 1 })
+
+      expect(vm.pagination.page).toBe(1) // page + 1
+      expect(mockCustomerEventsService.getMyEvents).toHaveBeenCalledWith({
+        page: 2,
+        limit: 7
+      })
+    })
+
+    it('calculates dataTableFirst correctly', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+      vm.pagination = { page: 2, limit: 7, total: 20, totalPages: 3 }
+      await nextTick()
+
+      expect(vm.dataTableFirst).toBe(7) // (2-1) * 7
+    })
+  })
+
+  describe('tooltip functionality', () => {
+    it('generates tooltip content map correctly', async () => {
+      mockCustomerEventsService.hasAdditionalInfo.mockReturnValue(true)
+      mockCustomerEventsService.getTooltipContent.mockReturnValue(
+        '<strong>Test:</strong> value'
+      )
+
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+
+      vm.loading = false
+      vm.events = mockEventsResponse.events
+      await nextTick()
+
+      const tooltipMap = vm.tooltipContentMap
+      expect(tooltipMap.get('event-1')).toBe('<strong>Test:</strong> value')
+    })
+
+    it('excludes events without additional info from tooltip map', async () => {
+      mockCustomerEventsService.hasAdditionalInfo.mockReturnValue(false)
+
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+
+      vm.loading = false
+      vm.events = mockEventsResponse.events
+      await nextTick()
+
+      const tooltipMap = vm.tooltipContentMap
+      expect(tooltipMap.size).toBe(0)
+    })
+  })
+
+  describe('component methods', () => {
+    it('exposes refresh method', () => {
+      const wrapper = mountComponent()
+
+      expect(typeof wrapper.vm.refresh).toBe('function')
+    })
+
+    it('resets to first page on refresh', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+
+      vm.pagination.page = 3
+
+      await vm.refresh()
+
+      expect(vm.pagination.page).toBe(1)
+      expect(mockCustomerEventsService.getMyEvents).toHaveBeenCalledWith({
+        page: 1,
+        limit: 7
+      })
+    })
+  })
+
+  describe('component lifecycle', () => {
+    it('initializes with correct default values', () => {
+      const wrapper = mountComponent()
+
+      const vm = wrapper.vm as ComponentInstance
+
+      expect(vm.events).toEqual([])
+      expect(vm.loading).toBe(true)
+      expect(vm.error).toBeNull()
+      expect(vm.pagination).toEqual({
+        page: 1,
+        limit: 7,
+        total: 0,
+        totalPages: 0
+      })
+    })
+  })
+
+  describe('EventType integration', () => {
+    it('uses EventType enum in template conditions', async () => {
+      const wrapper = mountComponent()
+      const vm = wrapper.vm as ComponentInstance
+
+      vm.loading = false
+      vm.events = [
+        {
+          event_id: 'event-1',
+          event_type: EventType.CREDIT_ADDED,
+          params: { amount: 1000 },
+          createdAt: '2024-01-01T10:00:00Z'
+        }
+      ]
+      await nextTick()
+
+      // Verify that the component can access EventType enum
+      expect(EventType.CREDIT_ADDED).toBe('credit_added')
+      expect(EventType.ACCOUNT_CREATED).toBe('account_created')
+      expect(EventType.API_USAGE_COMPLETED).toBe('api_usage_completed')
+    })
+  })
+})

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

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <div v-if="loading" class="flex items-center justify-center p-8">
+      <ProgressSpinner />
+    </div>
+    <div v-else-if="error" class="p-4">
+      <Message severity="error" :closable="false">{{ error }}</Message>
+    </div>
+    <DataTable
+      v-else
+      :value="events"
+      :paginator="true"
+      :rows="pagination.limit"
+      :total-records="pagination.total"
+      :first="dataTableFirst"
+      :lazy="true"
+      class="p-datatable-sm custom-datatable"
+      @page="onPageChange"
+    >
+      <Column field="event_type" :header="$t('credits.eventType')">
+        <template #body="{ data }">
+          <Badge
+            :value="customerEventService.formatEventType(data.event_type)"
+            :severity="customerEventService.getEventSeverity(data.event_type)"
+          />
+        </template>
+      </Column>
+      <Column field="details" :header="$t('credits.details')">
+        <template #body="{ data }">
+          <div class="event-details">
+            <!-- Credits Added -->
+            <template v-if="data.event_type === EventType.CREDIT_ADDED">
+              <div class="text-green-500 font-semibold">
+                {{ $t('credits.added') }} ${{
+                  customerEventService.formatAmount(data.params?.amount)
+                }}
+              </div>
+            </template>
+
+            <!-- Account Created -->
+            <template v-else-if="data.event_type === EventType.ACCOUNT_CREATED">
+              <div>{{ $t('credits.accountInitialized') }}</div>
+            </template>
+
+            <!-- API Usage -->
+            <template
+              v-else-if="data.event_type === EventType.API_USAGE_COMPLETED"
+            >
+              <div class="flex flex-col gap-1">
+                <div class="font-semibold">
+                  {{ data.params?.api_name || 'API' }}
+                </div>
+                <div class="text-sm text-gray-400">
+                  {{ $t('credits.model') }}: {{ data.params?.model || '-' }}
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+      </Column>
+      <Column field="createdAt" :header="$t('credits.time')">
+        <template #body="{ data }">
+          {{ customerEventService.formatDate(data.createdAt) }}
+        </template>
+      </Column>
+      <Column field="params" :header="$t('credits.additionalInfo')">
+        <template #body="{ data }">
+          <Button
+            v-if="customerEventService.hasAdditionalInfo(data)"
+            v-tooltip.top="{
+              escape: false,
+              value: tooltipContentMap.get(data.event_id) || '',
+              pt: {
+                text: {
+                  style: {
+                    width: 'max-content !important'
+                  }
+                }
+              }
+            }"
+            icon="pi pi-info-circle"
+            class="p-button-text p-button-sm"
+          />
+        </template>
+      </Column>
+    </DataTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Badge from 'primevue/badge'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import Message from 'primevue/message'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed, ref } from 'vue'
+
+import {
+  AuditLog,
+  EventType,
+  useCustomerEventsService
+} from '@/services/customerEventsService'
+
+const events = ref<AuditLog[]>([])
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+const customerEventService = useCustomerEventsService()
+
+const pagination = ref({
+  page: 1,
+  limit: 7,
+  total: 0,
+  totalPages: 0
+})
+
+const dataTableFirst = computed(
+  () => (pagination.value.page - 1) * pagination.value.limit
+)
+
+const tooltipContentMap = computed(() => {
+  const map = new Map<string, string>()
+  events.value.forEach((event) => {
+    if (customerEventService.hasAdditionalInfo(event) && event.event_id) {
+      map.set(event.event_id, customerEventService.getTooltipContent(event))
+    }
+  })
+  return map
+})
+
+const loadEvents = async () => {
+  loading.value = true
+  error.value = null
+
+  try {
+    const response = await customerEventService.getMyEvents({
+      page: pagination.value.page,
+      limit: pagination.value.limit
+    })
+
+    if (response) {
+      if (response.events) {
+        events.value = response.events
+      }
+
+      if (response.page) {
+        pagination.value.page = response.page
+      }
+
+      if (response.limit) {
+        pagination.value.limit = response.limit
+      }
+
+      if (response.total) {
+        pagination.value.total = response.total
+      }
+
+      if (response.totalPages) {
+        pagination.value.totalPages = response.totalPages
+      }
+    } else {
+      error.value = customerEventService.error.value || 'Failed to load events'
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Unknown error'
+    console.error('Error loading events:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const onPageChange = (event: { page: number }) => {
+  pagination.value.page = event.page + 1
+  loadEvents().catch((error) => {
+    console.error('Error loading events:', error)
+  })
+}
+
+const refresh = async () => {
+  pagination.value.page = 1
+  await loadEvents()
+}
+
+defineExpose({
+  refresh
+})
+</script>

src/components/dialog/footer/ManagerProgressFooter.vue

@@ -22,7 +22,7 @@
     </div>
     <div class="flex items-center gap-4">
       <span v-if="isInProgress" class="text-xs font-bold text-neutral-600">
-        {{ comfyManagerStore.uncompletedCount }} of
+        {{ comfyManagerStore.uncompletedCount }} {{ $t('g.progressCountOf') }}
         {{ comfyManagerStore.taskLogs.length }}
       </span>
       <div class="flex items-center">

src/components/graph/DomWidgets.vue

@@ -21,16 +21,14 @@ import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
-const widgetStates = computed(() =>
-  Array.from(domWidgetStore.widgetStates.values())
-)
+const widgetStates = computed(() => domWidgetStore.activeWidgetStates)
 
 const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
 
   const lowQuality = lgCanvas.low_quality
-  for (const widgetState of domWidgetStore.widgetStates.values()) {
+  for (const widgetState of widgetStates.value) {
     const widget = widgetState.widget
     const node = widget.node as LGraphNode
 

src/components/graph/GraphCanvas.vue

@@ -12,10 +12,12 @@
       <BottomPanel />
     </template>
     <template #graph-canvas-panel>
-      <SecondRowWorkflowTabs
-        v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
-        class="pointer-events-auto"
-      />
+      <div class="absolute top-0 left-0 w-auto max-w-full pointer-events-auto">
+        <SecondRowWorkflowTabs
+          v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
+        />
+        <SubgraphBreadcrumb />
+      </div>
       <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
     </template>
   </LiteGraphCanvasSplitterOverlay>
@@ -39,12 +41,11 @@
     </SelectionOverlay>
     <DomWidgets />
   </template>
-  <SubgraphBreadcrumb />
 </template>
 
 <script setup lang="ts">
 import type { LGraphNode } from '@comfyorg/litegraph'
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, whenever } from '@vueuse/core'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -77,6 +78,7 @@ import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
+import { newUserService } from '@/services/newUserService'
 import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -84,6 +86,7 @@ import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
@@ -192,10 +195,10 @@ watch(
 // Update the progress of the executing node
 watch(
   () =>
-    [executionStore.executingNodeId, executionStore.executingNodeProgress] as [
-      NodeId | null,
-      number | null
-    ],
+    [
+      executionStore.executingNodeId,
+      executionStore.executingNodeProgress
+    ] satisfies [NodeId | null, number | null],
   ([executingNodeId, executingNodeProgress]) => {
     for (const node of comfyApp.graph.nodes) {
       if (node.id == executingNodeId) {
@@ -300,6 +303,9 @@ onMounted(async () => {
   CORE_SETTINGS.forEach((setting) => {
     settingStore.addSetting(setting)
   })
+
+  await newUserService().initializeIfNewUser(settingStore)
+
   // @ts-expect-error fixme ts strict error
   await comfyApp.setup(canvasRef.value)
   canvasStore.canvas = comfyApp.canvas
@@ -325,6 +331,11 @@ onMounted(async () => {
   await workflowPersistence.restorePreviousWorkflow()
   workflowPersistence.restoreWorkflowTabsState()
 
+  // Initialize release store to fetch releases from comfy-api (fire-and-forget)
+  const { useReleaseStore } = await import('@/stores/releaseStore')
+  const releaseStore = useReleaseStore()
+  void releaseStore.initialize()
+
   // Start watching for locale change after the initial value is loaded.
   watch(
     () => settingStore.get('Comfy.Locale'),
@@ -334,6 +345,16 @@ onMounted(async () => {
     }
   )
 
+  whenever(
+    () => useCanvasStore().canvas,
+    (canvas) => {
+      useEventListener(canvas.canvas, 'litegraph:set-graph', () => {
+        useWorkflowStore().updateActiveGraph()
+      })
+    },
+    { immediate: true }
+  )
+
   emit('ready')
 })
 </script>

src/components/graph/SelectionToolbox.vue

@@ -12,6 +12,7 @@
     <PinButton />
     <EditModelButton />
     <MaskEditorButton />
+    <ConvertToSubgraphButton />
     <DeleteButton />
     <RefreshButton />
     <ExtensionCommandButton
@@ -29,6 +30,7 @@ import { computed } from 'vue'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
+import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/ConvertToSubgraphButton.vue'
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import EditModelButton from '@/components/graph/selectionToolbox/EditModelButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <Button
+    v-show="isVisible"
+    v-tooltip.top="{
+      value: t('commands.Comfy_Graph_ConvertToSubgraph.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-box"
+    @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isVisible = computed(() => {
+  return (
+    canvasStore.groupSelected ||
+    canvasStore.rerouteSelected ||
+    canvasStore.nodeSelected
+  )
+})
+</script>

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-show="isDeletable"
     v-tooltip.top="{
       value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
@@ -13,10 +14,17 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isDeletable = computed(() =>
+  canvasStore.selectedItems.some((x) => x.removable !== false)
+)
 </script>

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -25,8 +25,9 @@ const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 
 const isSingleImageNode = computed(() => {
-  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
-  return nodes.length === 1 && nodes.some(isImageNode)
+  const { selectedItems } = canvasStore
+  const item = selectedItems[0]
+  return selectedItems.length === 1 && isLGraphNode(item) && isImageNode(item)
 })
 
 const openMaskEditor = () => {

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -0,0 +1,645 @@
+<template>
+  <div class="help-center-menu" role="menu" aria-label="Help Center Menu">
+    <!-- Main Menu Items -->
+    <nav class="help-menu-section" role="menubar">
+      <button
+        v-for="menuItem in menuItems"
+        v-show="menuItem.visible !== false"
+        :key="menuItem.key"
+        type="button"
+        class="help-menu-item"
+        :class="{ 'more-item': menuItem.key === 'more' }"
+        role="menuitem"
+        @click="menuItem.action"
+        @mouseenter="onMenuItemHover(menuItem.key, $event)"
+        @mouseleave="onMenuItemLeave(menuItem.key)"
+      >
+        <i :class="menuItem.icon" class="help-menu-icon" />
+        <span class="menu-label">{{ menuItem.label }}</span>
+        <i v-if="menuItem.key === 'more'" class="pi pi-chevron-right" />
+      </button>
+    </nav>
+
+    <!-- More Submenu -->
+    <Teleport to="body">
+      <div
+        v-if="isSubmenuVisible"
+        ref="submenuRef"
+        class="more-submenu"
+        :style="submenuStyle"
+        @mouseenter="onSubmenuHover"
+        @mouseleave="onSubmenuLeave"
+      >
+        <template
+          v-for="submenuItem in moreMenuItem?.items"
+          :key="submenuItem.key"
+        >
+          <div
+            v-if="submenuItem.type === 'divider'"
+            v-show="submenuItem.visible !== false"
+            class="submenu-divider"
+          />
+          <button
+            v-else
+            v-show="submenuItem.visible !== false"
+            type="button"
+            class="help-menu-item submenu-item"
+            role="menuitem"
+            @click="submenuItem.action"
+          >
+            <span class="menu-label">{{ submenuItem.label }}</span>
+          </button>
+        </template>
+      </div>
+    </Teleport>
+
+    <!-- What's New Section -->
+    <section v-if="showVersionUpdates" class="whats-new-section">
+      <h3 class="section-description">{{ $t('helpCenter.whatsNew') }}</h3>
+
+      <!-- Release Items -->
+      <div v-if="hasReleases" role="group" aria-label="Recent releases">
+        <article
+          v-for="release in releaseStore.recentReleases"
+          :key="release.id || release.version"
+          class="help-menu-item release-menu-item"
+          role="button"
+          tabindex="0"
+          @click="onReleaseClick(release)"
+          @keydown.enter="onReleaseClick(release)"
+          @keydown.space.prevent="onReleaseClick(release)"
+        >
+          <i class="pi pi-refresh help-menu-icon" aria-hidden="true" />
+          <div class="release-content">
+            <span class="release-title">
+              {{
+                $t('g.releaseTitle', {
+                  package: 'Comfy',
+                  version: release.version
+                })
+              }}
+            </span>
+            <time class="release-date" :datetime="release.published_at">
+              <span class="normal-state">
+                {{ formatReleaseDate(release.published_at) }}
+              </span>
+              <span class="hover-state">
+                {{ $t('helpCenter.clickToLearnMore') }}
+              </span>
+            </time>
+          </div>
+          <Button
+            v-if="shouldShowUpdateButton(release)"
+            :label="$t('helpCenter.updateAvailable')"
+            size="small"
+            class="update-button"
+            @click.stop="onUpdate(release)"
+          />
+        </article>
+      </div>
+
+      <!-- Loading State -->
+      <div
+        v-else-if="releaseStore.isLoading"
+        class="help-menu-item"
+        role="status"
+        aria-live="polite"
+      >
+        <i class="pi pi-spin pi-spinner help-menu-icon" aria-hidden="true" />
+        <span>{{ $t('helpCenter.loadingReleases') }}</span>
+      </div>
+
+      <!-- No Releases State -->
+      <div v-else class="help-menu-item" role="status">
+        <i class="pi pi-info-circle help-menu-icon" aria-hidden="true" />
+        <span>{{ $t('helpCenter.noRecentReleases') }}</span>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { type CSSProperties, computed, nextTick, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { type ReleaseNote } from '@/services/releaseService'
+import { useCommandStore } from '@/stores/commandStore'
+import { useReleaseStore } from '@/stores/releaseStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { electronAPI, isElectron } from '@/utils/envUtil'
+import { formatVersionAnchor } from '@/utils/formatUtil'
+
+// Types
+interface MenuItem {
+  key: string
+  icon?: string
+  label?: string
+  action?: () => void
+  visible?: boolean
+  type?: 'item' | 'divider'
+  items?: MenuItem[]
+}
+
+// Constants
+const EXTERNAL_LINKS = {
+  DOCS: 'https://docs.comfy.org/',
+  DISCORD: 'https://www.comfy.org/discord',
+  GITHUB: 'https://github.com/comfyanonymous/ComfyUI',
+  DESKTOP_GUIDE: 'https://comfyorg.notion.site/',
+  UPDATE_GUIDE: 'https://docs.comfy.org/installation/update_comfyui'
+} as const
+
+const TIME_UNITS = {
+  MINUTE: 60 * 1000,
+  HOUR: 60 * 60 * 1000,
+  DAY: 24 * 60 * 60 * 1000,
+  WEEK: 7 * 24 * 60 * 60 * 1000,
+  MONTH: 30 * 24 * 60 * 60 * 1000,
+  YEAR: 365 * 24 * 60 * 60 * 1000
+} as const
+
+const SUBMENU_CONFIG = {
+  DELAY_MS: 100,
+  OFFSET_PX: 8,
+  Z_INDEX: 10001
+} as const
+
+// Composables
+const { t, locale } = useI18n()
+const releaseStore = useReleaseStore()
+const commandStore = useCommandStore()
+const settingStore = useSettingStore()
+
+// Emits
+const emit = defineEmits<{
+  close: []
+}>()
+
+// State
+const isSubmenuVisible = ref(false)
+const submenuRef = ref<HTMLElement | null>(null)
+const submenuStyle = ref<CSSProperties>({})
+let hoverTimeout: number | null = null
+
+// Computed
+const hasReleases = computed(() => releaseStore.releases.length > 0)
+const showVersionUpdates = computed(() =>
+  settingStore.get('Comfy.Notification.ShowVersionUpdates')
+)
+
+const moreMenuItem = computed(() =>
+  menuItems.value.find((item) => item.key === 'more')
+)
+
+const menuItems = computed<MenuItem[]>(() => {
+  const moreItems: MenuItem[] = [
+    {
+      key: 'desktop-guide',
+      type: 'item',
+      label: t('helpCenter.desktopUserGuide'),
+      action: () => {
+        openExternalLink(EXTERNAL_LINKS.DESKTOP_GUIDE)
+        emit('close')
+      }
+    },
+    {
+      key: 'dev-tools',
+      type: 'item',
+      label: t('helpCenter.openDevTools'),
+      visible: isElectron(),
+      action: () => {
+        openDevTools()
+        emit('close')
+      }
+    },
+    {
+      key: 'divider-1',
+      type: 'divider',
+      visible: isElectron()
+    },
+    {
+      key: 'reinstall',
+      type: 'item',
+      label: t('helpCenter.reinstall'),
+      visible: isElectron(),
+      action: () => {
+        onReinstall()
+        emit('close')
+      }
+    }
+  ]
+
+  return [
+    {
+      key: 'docs',
+      type: 'item',
+      icon: 'pi pi-book',
+      label: t('helpCenter.docs'),
+      action: () => {
+        openExternalLink(EXTERNAL_LINKS.DOCS)
+        emit('close')
+      }
+    },
+    {
+      key: 'discord',
+      type: 'item',
+      icon: 'pi pi-discord',
+      label: 'Discord',
+      action: () => {
+        openExternalLink(EXTERNAL_LINKS.DISCORD)
+        emit('close')
+      }
+    },
+    {
+      key: 'github',
+      type: 'item',
+      icon: 'pi pi-github',
+      label: t('helpCenter.github'),
+      action: () => {
+        openExternalLink(EXTERNAL_LINKS.GITHUB)
+        emit('close')
+      }
+    },
+    {
+      key: 'help',
+      type: 'item',
+      icon: 'pi pi-question-circle',
+      label: t('helpCenter.helpFeedback'),
+      action: () => {
+        void commandStore.execute('Comfy.Feedback')
+        emit('close')
+      }
+    },
+    {
+      key: 'more',
+      type: 'item',
+      icon: '',
+      label: t('helpCenter.more'),
+      action: () => {}, // No action for more item
+      items: moreItems
+    }
+  ]
+})
+
+// Utility Functions
+const openExternalLink = (url: string): void => {
+  window.open(url, '_blank', 'noopener,noreferrer')
+}
+
+const clearHoverTimeout = (): void => {
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout)
+    hoverTimeout = null
+  }
+}
+
+const calculateSubmenuPosition = (button: HTMLElement): CSSProperties => {
+  const rect = button.getBoundingClientRect()
+  const submenuWidth = 210 // Width defined in CSS
+
+  // Get actual submenu height if available, otherwise estimate based on visible item count
+  const visibleItemCount =
+    moreMenuItem.value?.items?.filter((item) => item.visible !== false)
+      .length || 0
+  const estimatedHeight = visibleItemCount * 48 + 16 // ~48px per item + padding
+  const submenuHeight = submenuRef.value?.offsetHeight || estimatedHeight
+
+  // Get viewport dimensions
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+
+  // Calculate basic position (aligned with button)
+  let top = rect.top
+  let left = rect.right + SUBMENU_CONFIG.OFFSET_PX
+
+  // Check if submenu would overflow viewport on the right
+  if (left + submenuWidth > viewportWidth) {
+    // Position submenu to the left of the button instead
+    left = rect.left - submenuWidth - SUBMENU_CONFIG.OFFSET_PX
+  }
+
+  // Check if submenu would overflow viewport at the bottom
+  if (top + submenuHeight > viewportHeight) {
+    // Position submenu above the button, aligned to bottom
+    top = Math.max(
+      SUBMENU_CONFIG.OFFSET_PX, // Minimum distance from top of viewport
+      rect.bottom - submenuHeight
+    )
+  }
+
+  // Ensure submenu doesn't go above viewport
+  if (top < SUBMENU_CONFIG.OFFSET_PX) {
+    top = SUBMENU_CONFIG.OFFSET_PX
+  }
+
+  top -= 8
+
+  return {
+    position: 'fixed',
+    top: `${top}px`,
+    left: `${left}px`,
+    zIndex: SUBMENU_CONFIG.Z_INDEX
+  }
+}
+
+const formatReleaseDate = (dateString?: string): string => {
+  if (!dateString) return 'date'
+
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffTime = Math.abs(now.getTime() - date.getTime())
+
+  const timeUnits = [
+    { unit: TIME_UNITS.YEAR, suffix: 'y' },
+    { unit: TIME_UNITS.MONTH, suffix: 'mo' },
+    { unit: TIME_UNITS.WEEK, suffix: 'w' },
+    { unit: TIME_UNITS.DAY, suffix: 'd' },
+    { unit: TIME_UNITS.HOUR, suffix: 'h' },
+    { unit: TIME_UNITS.MINUTE, suffix: 'min' }
+  ]
+
+  for (const { unit, suffix } of timeUnits) {
+    const value = Math.floor(diffTime / unit)
+    if (value > 0) {
+      return `${value}${suffix} ago`
+    }
+  }
+
+  return 'now'
+}
+
+const shouldShowUpdateButton = (release: ReleaseNote): boolean => {
+  return (
+    releaseStore.shouldShowUpdateButton &&
+    release === releaseStore.recentReleases[0]
+  )
+}
+
+// Event Handlers
+const onMenuItemHover = async (
+  key: string,
+  event: MouseEvent
+): Promise<void> => {
+  if (key !== 'more' || !moreMenuItem.value?.items) return
+
+  // Don't show submenu if all items are hidden
+  const hasVisibleItems = moreMenuItem.value.items.some(
+    (item) => item.visible !== false
+  )
+  if (!hasVisibleItems) return
+
+  clearHoverTimeout()
+
+  const moreButton = event.currentTarget as HTMLElement
+
+  // Calculate initial position before showing submenu
+  submenuStyle.value = calculateSubmenuPosition(moreButton)
+
+  // Show submenu with correct position
+  isSubmenuVisible.value = true
+
+  // After submenu is rendered, refine position if needed
+  await nextTick()
+  if (submenuRef.value) {
+    submenuStyle.value = calculateSubmenuPosition(moreButton)
+  }
+}
+
+const onMenuItemLeave = (key: string): void => {
+  if (key !== 'more') return
+
+  hoverTimeout = window.setTimeout(() => {
+    isSubmenuVisible.value = false
+  }, SUBMENU_CONFIG.DELAY_MS)
+}
+
+const onSubmenuHover = (): void => {
+  clearHoverTimeout()
+}
+
+const onSubmenuLeave = (): void => {
+  isSubmenuVisible.value = false
+}
+
+const openDevTools = (): void => {
+  if (isElectron()) {
+    electronAPI().openDevTools()
+  }
+}
+
+const onReinstall = (): void => {
+  if (isElectron()) {
+    void electronAPI().reinstall()
+  }
+}
+
+const onReleaseClick = (release: ReleaseNote): void => {
+  void releaseStore.handleShowChangelog(release.version)
+  const versionAnchor = formatVersionAnchor(release.version)
+  const changelogUrl = `${getChangelogUrl()}#${versionAnchor}`
+  openExternalLink(changelogUrl)
+  emit('close')
+}
+
+const onUpdate = (_: ReleaseNote): void => {
+  openExternalLink(EXTERNAL_LINKS.UPDATE_GUIDE)
+  emit('close')
+}
+
+// Generate language-aware changelog URL
+const getChangelogUrl = (): string => {
+  const isChineseLocale = locale.value === 'zh'
+  return isChineseLocale
+    ? 'https://docs.comfy.org/zh-CN/changelog'
+    : 'https://docs.comfy.org/changelog'
+}
+
+// Lifecycle
+onMounted(async () => {
+  if (!hasReleases.value) {
+    await releaseStore.fetchReleases()
+  }
+})
+</script>
+
+<style scoped>
+.help-center-menu {
+  width: 380px;
+  max-height: 500px;
+  overflow-y: auto;
+  background: var(--p-content-background);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--p-content-border-color);
+  backdrop-filter: blur(8px);
+  position: relative;
+}
+
+.help-menu-section {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--p-content-border-color);
+}
+
+.help-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 0.9rem;
+  color: inherit;
+  text-align: left;
+}
+
+.help-menu-item:hover {
+  background-color: #007aff26;
+}
+
+.help-menu-item:focus,
+.help-menu-item:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.help-menu-icon {
+  margin-right: 0.75rem;
+  font-size: 1rem;
+  color: var(--p-text-muted-color);
+  width: 16px;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.menu-label {
+  flex: 1;
+}
+
+.more-item {
+  justify-content: space-between;
+}
+
+.whats-new-section {
+  padding: 0.5rem 0;
+}
+
+.section-description {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--p-text-muted-color);
+  margin: 0 0 0.5rem 0;
+  padding: 0 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.release-menu-item {
+  position: relative;
+}
+
+.release-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.release-title {
+  font-size: 0.9rem;
+  line-height: 1.2;
+  font-weight: 500;
+}
+
+.release-date {
+  height: 16px;
+  font-size: 0.75rem;
+  color: var(--p-text-muted-color);
+}
+
+.release-date .hover-state {
+  display: none;
+}
+
+.release-menu-item:hover .release-date .normal-state,
+.release-menu-item:focus-within .release-date .normal-state {
+  display: none;
+}
+
+.release-menu-item:hover .release-date .hover-state,
+.release-menu-item:focus-within .release-date .hover-state {
+  display: inline;
+}
+
+.update-button {
+  margin-left: 0.5rem;
+  font-size: 0.8rem;
+  padding: 0.25rem 0.75rem;
+  flex-shrink: 0;
+}
+
+/* Submenu Styles */
+.more-submenu {
+  width: 210px;
+  padding: 0.5rem 0;
+  background: var(--p-content-background);
+  border-radius: 12px;
+  border: 1px solid var(--p-content-border-color);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  transition: opacity 0.15s ease-out;
+}
+
+.submenu-item {
+  padding: 0.75rem 1rem;
+  color: inherit;
+  font-size: 0.9rem;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.submenu-item:hover {
+  background-color: #007aff26;
+}
+
+.submenu-item:focus,
+.submenu-item:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.submenu-divider {
+  height: 1px;
+  background: #3e3e3e;
+  margin: 0.5rem 0;
+}
+
+/* Scrollbar Styling */
+.help-center-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.help-center-menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.help-center-menu::-webkit-scrollbar-thumb {
+  background: var(--p-content-border-color);
+  border-radius: 3px;
+}
+
+.help-center-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--p-text-muted-color);
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .help-menu-item {
+    transition: none;
+  }
+}
+</style>

src/components/helpcenter/ReleaseNotificationToast.vue

@@ -0,0 +1,308 @@
+<template>
+  <div v-if="shouldShow" class="release-toast-popup">
+    <div class="release-notification-toast">
+      <!-- Header section with icon and text -->
+      <div class="toast-header">
+        <div class="toast-icon">
+          <i class="pi pi-download" />
+        </div>
+        <div class="toast-text">
+          <div class="toast-title">
+            {{ $t('releaseToast.newVersionAvailable') }}
+          </div>
+          <div class="toast-version-badge">
+            {{ latestRelease?.version }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Actions section -->
+      <div class="toast-actions-section">
+        <div class="actions-row">
+          <div class="left-actions">
+            <a
+              class="learn-more-link"
+              :href="changelogUrl"
+              target="_blank"
+              rel="noopener,noreferrer"
+              @click="handleLearnMore"
+            >
+              {{ $t('releaseToast.whatsNew') }}
+            </a>
+          </div>
+          <div class="right-actions">
+            <button class="skip-button" @click="handleSkip">
+              {{ $t('releaseToast.skip') }}
+            </button>
+            <button class="cta-button" @click="handleUpdate">
+              {{ $t('releaseToast.update') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ReleaseNote } from '@/services/releaseService'
+import { useReleaseStore } from '@/stores/releaseStore'
+import { formatVersionAnchor } from '@/utils/formatUtil'
+
+const { locale } = useI18n()
+const releaseStore = useReleaseStore()
+
+// Local state for dismissed status
+const isDismissed = ref(false)
+
+// Get latest release from store
+const latestRelease = computed<ReleaseNote | null>(
+  () => releaseStore.recentRelease
+)
+
+// Show toast when new version available and not dismissed
+const shouldShow = computed(
+  () => releaseStore.shouldShowToast && !isDismissed.value
+)
+
+// Generate changelog URL with version anchor (language-aware)
+const changelogUrl = computed(() => {
+  const isChineseLocale = locale.value === 'zh'
+  const baseUrl = isChineseLocale
+    ? 'https://docs.comfy.org/zh-CN/changelog'
+    : 'https://docs.comfy.org/changelog'
+
+  if (latestRelease.value?.version) {
+    const versionAnchor = formatVersionAnchor(latestRelease.value.version)
+    return `${baseUrl}#${versionAnchor}`
+  }
+  return baseUrl
+})
+
+// Auto-hide timer
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+const startAutoHide = () => {
+  if (hideTimer) clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => {
+    dismissToast()
+  }, 8000) // 8 second auto-hide
+}
+
+const clearAutoHide = () => {
+  if (hideTimer) {
+    clearTimeout(hideTimer)
+    hideTimer = null
+  }
+}
+
+const dismissToast = () => {
+  isDismissed.value = true
+  clearAutoHide()
+}
+
+const handleSkip = () => {
+  if (latestRelease.value) {
+    void releaseStore.handleSkipRelease(latestRelease.value.version)
+  }
+  dismissToast()
+}
+
+const handleLearnMore = () => {
+  if (latestRelease.value) {
+    void releaseStore.handleShowChangelog(latestRelease.value.version)
+  }
+  // Do not dismiss; anchor will navigate in new tab but keep toast? spec maybe wants dismiss? We'll dismiss.
+  dismissToast()
+}
+
+const handleUpdate = () => {
+  window.open('https://docs.comfy.org/installation/update_comfyui', '_blank')
+  dismissToast()
+}
+
+// Learn more handled by anchor href
+
+// Start auto-hide when toast becomes visible
+watch(shouldShow, (isVisible) => {
+  if (isVisible) {
+    startAutoHide()
+  } else {
+    clearAutoHide()
+  }
+})
+
+// Initialize on mount
+onMounted(async () => {
+  // Fetch releases if not already loaded
+  if (!releaseStore.releases.length) {
+    await releaseStore.fetchReleases()
+  }
+})
+</script>
+
+<style scoped>
+/* Toast popup - positioning handled by parent */
+.release-toast-popup {
+  position: absolute;
+  bottom: 1rem;
+  z-index: 1000;
+  pointer-events: auto;
+}
+
+/* Sidebar positioning classes applied by parent - matching help center */
+.release-toast-popup.sidebar-left {
+  left: 1rem;
+}
+
+.release-toast-popup.sidebar-left.small-sidebar {
+  left: 1rem;
+}
+
+.release-toast-popup.sidebar-right {
+  right: 1rem;
+}
+
+/* Main toast container */
+.release-notification-toast {
+  width: 448px;
+  padding: 16px 16px 8px;
+  background: #353535;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 12px;
+  outline: 1px solid #4e4e4e;
+  outline-offset: -1px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Header section */
+.toast-header {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+/* Icon container */
+.toast-icon {
+  width: 42px;
+  height: 42px;
+  padding: 10px;
+  background: rgba(0, 122, 255, 0.2);
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toast-icon i {
+  color: #007aff;
+  font-size: 16px;
+}
+
+/* Text content */
+.toast-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+}
+
+.toast-title {
+  color: white;
+  font-size: 14px;
+  font-family: 'Satoshi', sans-serif;
+  font-weight: 500;
+  line-height: 18.2px;
+}
+
+.toast-version-badge {
+  color: #a0a1a2;
+  font-size: 12px;
+  font-family: 'Satoshi', sans-serif;
+  font-weight: 500;
+  line-height: 15.6px;
+}
+
+/* Actions section */
+.toast-actions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.actions-row {
+  padding-left: 58px; /* Align with text content */
+  padding-right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.left-actions {
+  display: flex;
+  align-items: center;
+}
+
+/* Learn more link - simple text link */
+.learn-more-link {
+  color: #60a5fa;
+  font-size: 12px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
+  line-height: 15.6px;
+  text-decoration: none;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
+}
+
+.right-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* Button styles */
+.skip-button {
+  padding: 8px 16px;
+  background: #353535;
+  border-radius: 6px;
+  outline: 1px solid #4e4e4e;
+  outline-offset: -1px;
+  border: none;
+  color: #aeaeb2;
+  font-size: 12px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.skip-button:hover {
+  background: #404040;
+}
+
+.cta-button {
+  padding: 8px 16px;
+  background: white;
+  border-radius: 6px;
+  outline: 1px solid #4e4e4e;
+  outline-offset: -1px;
+  border: none;
+  color: black;
+  font-size: 12px;
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cta-button:hover {
+  background: #f0f0f0;
+}
+</style>

src/components/helpcenter/WhatsNewPopup.vue

@@ -0,0 +1,451 @@
+<template>
+  <div v-if="shouldShow" class="whats-new-popup-container">
+    <!-- Arrow pointing to help center -->
+    <div class="help-center-arrow">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="19"
+        viewBox="0 0 16 19"
+        fill="none"
+      >
+        <!-- Arrow fill -->
+        <path
+          d="M15.25 1.27246L15.25 17.7275L0.999023 9.5L15.25 1.27246Z"
+          fill="#353535"
+        />
+        <!-- Top and bottom outlines only -->
+        <path
+          d="M15.25 1.27246L0.999023 9.5"
+          stroke="#4e4e4e"
+          stroke-width="1"
+          fill="none"
+        />
+        <path
+          d="M0.999023 9.5L15.25 17.7275"
+          stroke="#4e4e4e"
+          stroke-width="1"
+          fill="none"
+        />
+      </svg>
+    </div>
+
+    <div class="whats-new-popup" @click.stop>
+      <!-- Close Button -->
+      <button
+        class="close-button"
+        :aria-label="$t('g.close')"
+        @click="closePopup"
+      >
+        <div class="close-icon"></div>
+      </button>
+
+      <!-- Release Content -->
+      <div class="popup-content">
+        <div class="content-text" v-html="formattedContent"></div>
+
+        <!-- Actions Section -->
+        <div class="popup-actions">
+          <a
+            class="learn-more-link"
+            :href="changelogUrl"
+            target="_blank"
+            rel="noopener,noreferrer"
+            @click="closePopup"
+          >
+            {{ $t('whatsNewPopup.learnMore') }}
+          </a>
+          <!-- TODO: CTA button -->
+          <!-- <button class="cta-button" @click="handleCTA">CTA</button> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { marked } from 'marked'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ReleaseNote } from '@/services/releaseService'
+import { useReleaseStore } from '@/stores/releaseStore'
+import { formatVersionAnchor } from '@/utils/formatUtil'
+
+const { locale, t } = useI18n()
+const releaseStore = useReleaseStore()
+
+// Local state for dismissed status
+const isDismissed = ref(false)
+
+// Get latest release from store
+const latestRelease = computed<ReleaseNote | null>(
+  () => releaseStore.recentRelease
+)
+
+// Show popup when on latest version and not dismissed
+const shouldShow = computed(
+  () => releaseStore.shouldShowPopup && !isDismissed.value
+)
+
+// Generate changelog URL with version anchor (language-aware)
+const changelogUrl = computed(() => {
+  const isChineseLocale = locale.value === 'zh'
+  const baseUrl = isChineseLocale
+    ? 'https://docs.comfy.org/zh-CN/changelog'
+    : 'https://docs.comfy.org/changelog'
+
+  if (latestRelease.value?.version) {
+    const versionAnchor = formatVersionAnchor(latestRelease.value.version)
+    return `${baseUrl}#${versionAnchor}`
+  }
+  return baseUrl
+})
+
+// Format release content for display using marked
+const formattedContent = computed(() => {
+  if (!latestRelease.value?.content) {
+    return `<p>${t('whatsNewPopup.noReleaseNotes')}</p>`
+  }
+
+  try {
+    // Use marked to parse markdown to HTML
+    return marked(latestRelease.value.content, {
+      gfm: true // Enable GitHub Flavored Markdown
+    })
+  } catch (error) {
+    console.error('Error parsing markdown:', error)
+    // Fallback to plain text with line breaks
+    return latestRelease.value.content.replace(/\n/g, '<br>')
+  }
+})
+
+const show = () => {
+  isDismissed.value = false
+}
+
+const hide = () => {
+  isDismissed.value = true
+}
+
+const closePopup = async () => {
+  // Mark "what's new" seen when popup is closed
+  if (latestRelease.value) {
+    await releaseStore.handleWhatsNewSeen(latestRelease.value.version)
+  }
+  hide()
+}
+
+// Learn more handled by anchor href
+
+// const handleCTA = async () => {
+//   window.open('https://docs.comfy.org/installation/update_comfyui', '_blank')
+//   await closePopup()
+// }
+
+// Initialize on mount
+onMounted(async () => {
+  // Fetch releases if not already loaded
+  if (!releaseStore.releases.length) {
+    await releaseStore.fetchReleases()
+  }
+})
+
+// Expose methods for parent component
+defineExpose({
+  show,
+  hide
+})
+</script>
+
+<style scoped>
+/* Popup container - positioning handled by parent */
+.whats-new-popup-container {
+  position: absolute;
+  bottom: 1rem;
+  z-index: 1000;
+  pointer-events: auto;
+}
+
+/* Arrow pointing to help center */
+.help-center-arrow {
+  position: absolute;
+  bottom: calc(
+    var(--sidebar-width, 4rem) + 0.25rem
+  ); /* Position toward center of help center icon */
+  transform: none;
+  z-index: 999;
+  pointer-events: none;
+}
+
+/* Position arrow based on sidebar location */
+.whats-new-popup-container.sidebar-left .help-center-arrow {
+  left: -14px; /* Overlap with popup outline */
+}
+
+.whats-new-popup-container.sidebar-left.small-sidebar .help-center-arrow {
+  left: -14px; /* Overlap with popup outline */
+  bottom: calc(2.5rem + 0.25rem); /* Adjust for small sidebar */
+}
+
+/* Sidebar positioning classes applied by parent */
+.whats-new-popup-container.sidebar-left {
+  left: 1rem;
+}
+
+.whats-new-popup-container.sidebar-left.small-sidebar {
+  left: 1rem;
+}
+
+.whats-new-popup-container.sidebar-right {
+  right: 1rem;
+}
+
+.whats-new-popup {
+  background: #353535;
+  border-radius: 12px;
+  max-width: 400px;
+  width: 400px;
+  outline: 1px solid #4e4e4e;
+  outline-offset: -1px;
+  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3);
+  position: relative;
+}
+
+/* Content Section */
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  overflow: hidden;
+  padding: 32px 32px 24px;
+  border-radius: 12px;
+}
+
+/* Close button */
+.close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 32px;
+  height: 32px;
+  padding: 6px;
+  background: #7c7c7c;
+  border-radius: 16px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate(30%, -30%);
+  transition:
+    background-color 0.2s ease,
+    transform 0.1s ease;
+  z-index: 1;
+}
+
+.close-button:hover {
+  background: #8e8e8e;
+}
+
+.close-button:active {
+  background: #6a6a6a;
+  transform: translate(30%, -30%) scale(0.95);
+}
+
+.close-icon {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  opacity: 0.9;
+  transition: opacity 0.2s ease;
+}
+
+.close-button:hover .close-icon {
+  opacity: 1;
+}
+
+.close-icon::before,
+.close-icon::after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  background: white;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  transition: background-color 0.2s ease;
+}
+
+.close-icon::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+/* Content Section */
+.popup-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.content-text {
+  color: white;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+/* Style the markdown content */
+/* Title */
+.content-text :deep(*) {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.content-text :deep(h1) {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+/* Version subtitle - targets the first p tag after h1 */
+.content-text :deep(h1 + p) {
+  color: #c0c0c0;
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  opacity: 0.8;
+}
+
+/* Regular paragraphs - short description */
+.content-text :deep(p) {
+  margin-bottom: 16px;
+  color: #e0e0e0;
+}
+
+/* List */
+.content-text :deep(ul),
+.content-text :deep(ol) {
+  margin-bottom: 16px;
+  padding-left: 0;
+  list-style: none;
+}
+
+.content-text :deep(ul:first-child),
+.content-text :deep(ol:first-child) {
+  margin-top: 0;
+}
+
+.content-text :deep(ul:last-child),
+.content-text :deep(ol:last-child) {
+  margin-bottom: 0;
+}
+
+/* List items */
+.content-text :deep(li) {
+  margin-bottom: 8px;
+  position: relative;
+  padding-left: 20px;
+}
+
+.content-text :deep(li:last-child) {
+  margin-bottom: 0;
+}
+
+/* Custom bullet points */
+.content-text :deep(li::before) {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 10px;
+  display: flex;
+  width: 8px;
+  height: 8px;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1/1;
+  border-radius: 100px;
+  background: #60a5fa;
+}
+
+/* List item strong text */
+.content-text :deep(li strong) {
+  color: #fff;
+  font-size: 14px;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.content-text :deep(li p) {
+  font-size: 12px;
+  margin-bottom: 0;
+  line-height: 2;
+}
+
+/* Code styling */
+.content-text :deep(code) {
+  background-color: #2a2a2a;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  padding: 2px 6px;
+  color: #f8f8f2;
+  white-space: nowrap;
+}
+
+/* Remove top margin for first media element */
+.content-text :deep(img:first-child),
+.content-text :deep(video:first-child),
+.content-text :deep(iframe:first-child) {
+  margin-top: -32px; /* Align with the top edge of the popup content */
+  margin-bottom: 24px;
+}
+
+/* Media elements */
+.content-text :deep(img),
+.content-text :deep(video),
+.content-text :deep(iframe) {
+  width: calc(100% + 64px);
+  height: auto;
+  margin: 24px -32px;
+  display: block;
+}
+
+/* Actions Section */
+.popup-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.learn-more-link {
+  color: #60a5fa;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18.2px;
+  text-decoration: none;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
+}
+
+.cta-button {
+  height: 40px;
+  padding: 0 20px;
+  background: white;
+  border-radius: 6px;
+  outline: 1px solid #4e4e4e;
+  outline-offset: -1px;
+  border: none;
+  color: #121212;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cta-button:hover {
+  background: #f0f0f0;
+}
+</style>

src/components/load3d/Load3D.vue

@@ -206,7 +206,11 @@ const handleBackgroundImageUpdate = async (file: File | null) => {
     return
   }
 
-  backgroundImage.value = await Load3dUtils.uploadFile(file)
+  const resourceFolder = (node.properties['Resource Folder'] as string) || ''
+
+  const subfolder = resourceFolder.trim() ? `3d/${resourceFolder.trim()}` : '3d'
+
+  backgroundImage.value = await Load3dUtils.uploadFile(file, subfolder)
 
   node.properties['Background Image'] = backgroundImage.value
 }
@@ -218,7 +222,14 @@ const handleUploadTexture = async (file: File) => {
   }
 
   try {
-    const texturePath = await Load3dUtils.uploadFile(file)
+    const resourceFolder = (node.properties['Resource Folder'] as string) || ''
+
+    const subfolder = resourceFolder.trim()
+      ? `3d/${resourceFolder.trim()}`
+      : '3d'
+
+    const texturePath = await Load3dUtils.uploadFile(file, subfolder)
+
     await load3DSceneRef.value.load3d.applyTexture(texturePath)
 
     node.properties['Texture'] = texturePath

src/components/load3d/Load3DAnimation.vue

@@ -238,7 +238,11 @@ const handleBackgroundImageUpdate = async (file: File | null) => {
     return
   }
 
-  backgroundImage.value = await Load3dUtils.uploadFile(file)
+  const resourceFolder = (node.properties['Resource Folder'] as string) || ''
+
+  const subfolder = resourceFolder.trim() ? `3d/${resourceFolder.trim()}` : '3d'
+
+  backgroundImage.value = await Load3dUtils.uploadFile(file, subfolder)
 
   node.properties['Background Image'] = backgroundImage.value
 }

src/components/node/NodePreview.vue

@@ -15,7 +15,7 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
         <div class="_sb_dot headdot" />
         {{ nodeDef.display_name }}
       </div>
-      <div class="_sb_preview_badge">PREVIEW</div>
+      <div class="_sb_preview_badge">{{ $t('g.preview') }}</div>
 
       <!-- Node slot I/O -->
       <div

src/components/searchbox/NodeSearchBox.vue

@@ -27,7 +27,7 @@
       @hide="reFocusInput"
     >
       <template #header>
-        <h3>Add node filter condition</h3>
+        <h3>{{ $t('g.addNodeFilterCondition') }}</h3>
       </template>
       <div class="_dialog-body">
         <NodeSearchFilter @add-filter="onAddFilter" />

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -95,12 +95,14 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
     return
   }
 
-  disconnectOnReset = false
   const node = litegraphService.addNodeOnGraph(nodeDef, {
     pos: getNewNodeLocation()
   })
 
-  canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
+  if (disconnectOnReset) {
+    canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
+  }
+  disconnectOnReset = false
 
   // Notify changeTracker - new step should be added
   useWorkflowStore().activeWorkflow?.changeTracker?.checkState()

src/components/sidebar/SideToolbar.vue

@@ -6,7 +6,8 @@
         :key="tab.id"
         :icon="tab.icon"
         :icon-badge="tab.iconBadge"
-        :tooltip="tab.tooltip + getTabTooltipSuffix(tab)"
+        :tooltip="tab.tooltip"
+        :tooltip-suffix="getTabTooltipSuffix(tab)"
         :selected="tab.id === selectedTab?.id"
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"
@@ -14,6 +15,7 @@
       <div class="side-tool-bar-end">
         <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
         <SidebarThemeToggleIcon />
+        <SidebarHelpCenterIcon />
         <SidebarSettingsToggleIcon />
       </div>
     </nav>
@@ -36,6 +38,7 @@ import { useUserStore } from '@/stores/userStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
 import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
 import SidebarSettingsToggleIcon from './SidebarSettingsToggleIcon.vue'

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <SidebarIcon
+      icon="pi pi-question-circle"
+      class="comfy-help-center-btn"
+      :tooltip="$t('sideToolbar.helpCenter')"
+      :icon-badge="shouldShowRedDot ? '•' : ''"
+      @click="toggleHelpCenter"
+    />
+
+    <!-- Help Center Popup positioned within canvas area -->
+    <Teleport to="#graph-canvas-container">
+      <div
+        v-if="isHelpCenterVisible"
+        class="help-center-popup"
+        :class="{
+          'sidebar-left': sidebarLocation === 'left',
+          'sidebar-right': sidebarLocation === 'right',
+          'small-sidebar': sidebarSize === 'small'
+        }"
+      >
+        <HelpCenterMenuContent @close="closeHelpCenter" />
+      </div>
+    </Teleport>
+
+    <!-- Release Notification Toast positioned within canvas area -->
+    <Teleport to="#graph-canvas-container">
+      <ReleaseNotificationToast
+        :class="{
+          'sidebar-left': sidebarLocation === 'left',
+          'sidebar-right': sidebarLocation === 'right',
+          'small-sidebar': sidebarSize === 'small'
+        }"
+      />
+    </Teleport>
+
+    <!-- WhatsNew Popup positioned within canvas area -->
+    <Teleport to="#graph-canvas-container">
+      <WhatsNewPopup
+        :class="{
+          'sidebar-left': sidebarLocation === 'left',
+          'sidebar-right': sidebarLocation === 'right',
+          'small-sidebar': sidebarSize === 'small'
+        }"
+      />
+    </Teleport>
+
+    <!-- Backdrop to close popup when clicking outside -->
+    <Teleport to="body">
+      <div
+        v-if="isHelpCenterVisible"
+        class="help-center-backdrop"
+        @click="closeHelpCenter"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, ref } from 'vue'
+
+import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
+import ReleaseNotificationToast from '@/components/helpcenter/ReleaseNotificationToast.vue'
+import WhatsNewPopup from '@/components/helpcenter/WhatsNewPopup.vue'
+import { useReleaseStore } from '@/stores/releaseStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+import SidebarIcon from './SidebarIcon.vue'
+
+const settingStore = useSettingStore()
+const releaseStore = useReleaseStore()
+const { shouldShowRedDot } = storeToRefs(releaseStore)
+const isHelpCenterVisible = ref(false)
+
+const sidebarLocation = computed(() =>
+  settingStore.get('Comfy.Sidebar.Location')
+)
+
+const sidebarSize = computed(() => settingStore.get('Comfy.Sidebar.Size'))
+
+const toggleHelpCenter = () => {
+  isHelpCenterVisible.value = !isHelpCenterVisible.value
+}
+
+const closeHelpCenter = () => {
+  isHelpCenterVisible.value = false
+}
+
+// Initialize release store on mount
+onMounted(async () => {
+  // Initialize release store to fetch releases for toast and popup
+  await releaseStore.initialize()
+})
+</script>
+
+<style scoped>
+.help-center-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: transparent;
+}
+
+.help-center-popup {
+  position: absolute;
+  bottom: 1rem;
+  z-index: 10000;
+  animation: slideInUp 0.2s ease-out;
+  pointer-events: auto;
+}
+
+.help-center-popup.sidebar-left {
+  left: 1rem;
+}
+
+.help-center-popup.sidebar-left.small-sidebar {
+  left: 1rem;
+}
+
+.help-center-popup.sidebar-right {
+  right: 1rem;
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:deep(.p-badge) {
+  background: #ff3b30;
+  color: #ff3b30;
+  min-width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 9999px;
+  font-size: 0;
+  margin-top: 4px;
+  margin-right: 4px;
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+
+:deep(.p-badge.p-badge-dot) {
+  width: 8px !important;
+}
+</style>

src/components/sidebar/SidebarIcon.spec.ts

@@ -4,6 +4,7 @@ import PrimeVue from 'primevue/config'
 import OverlayBadge from 'primevue/overlaybadge'
 import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
 
 import SidebarIcon from './SidebarIcon.vue'
 
@@ -15,6 +16,14 @@ type SidebarIconProps = {
   iconBadge?: string | (() => string | null)
 }
 
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {}
+  }
+})
+
 describe('SidebarIcon', () => {
   const exampleProps: SidebarIconProps = {
     icon: 'pi pi-cog',
@@ -24,7 +33,7 @@ describe('SidebarIcon', () => {
   const mountSidebarIcon = (props: Partial<SidebarIconProps>, options = {}) => {
     return mount(SidebarIcon, {
       global: {
-        plugins: [PrimeVue],
+        plugins: [PrimeVue, i18n],
         directives: { tooltip: Tooltip },
         components: { OverlayBadge, Button }
       },

src/components/sidebar/SidebarIcon.vue

@@ -1,6 +1,10 @@
 <template>
   <Button
-    v-tooltip="{ value: tooltip, showDelay: 300, hideDelay: 300 }"
+    v-tooltip="{
+      value: computedTooltip,
+      showDelay: 300,
+      hideDelay: 300
+    }"
     text
     :pt="{
       root: {
@@ -9,7 +13,7 @@
             ? 'p-button-primary side-bar-button-selected'
             : 'p-button-secondary'
         }`,
-        'aria-label': tooltip
+        'aria-label': computedTooltip
       }
     }"
     @click="emit('click', $event)"
@@ -27,16 +31,20 @@
 import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const {
   icon = '',
   selected = false,
   tooltip = '',
+  tooltipSuffix = '',
   iconBadge = ''
 } = defineProps<{
   icon?: string
   selected?: boolean
   tooltip?: string
+  tooltipSuffix?: string
   iconBadge?: string | (() => string | null)
 }>()
 
@@ -47,6 +55,7 @@ const overlayValue = computed(() =>
   typeof iconBadge === 'function' ? iconBadge() ?? '' : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
+const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 </script>
 
 <style>

src/components/sidebar/tabs/modelLibrary/ModelPreview.vue

@@ -8,11 +8,11 @@
         {{ modelDef.file_name }}
       </div>
       <div v-if="modelDef.architecture_id" class="model_preview_architecture">
-        <span class="model_preview_prefix">Architecture: </span>
+        <span class="model_preview_prefix">{{ $t('g.architecture') }}: </span>
         {{ modelDef.architecture_id }}
       </div>
       <div v-if="modelDef.author" class="model_preview_author">
-        <span class="model_preview_prefix">Author: </span>
+        <span class="model_preview_prefix">{{ $t('g.author') }}: </span>
         {{ modelDef.author }}
       </div>
     </div>
@@ -20,15 +20,15 @@
       <img :src="modelDef.image" />
     </div>
     <div v-if="modelDef.usage_hint" class="model_preview_usage_hint">
-      <span class="model_preview_prefix">Usage hint: </span>
+      <span class="model_preview_prefix">{{ $t('g.usageHint') }}: </span>
       {{ modelDef.usage_hint }}
     </div>
     <div v-if="modelDef.trigger_phrase" class="model_preview_trigger_phrase">
-      <span class="model_preview_prefix">Trigger phrase: </span>
+      <span class="model_preview_prefix">{{ $t('g.triggerPhrase') }}: </span>
       {{ modelDef.trigger_phrase }}
     </div>
     <div v-if="modelDef.description" class="model_preview_description">
-      <span class="model_preview_prefix">Description: </span>
+      <span class="model_preview_prefix">{{ $t('g.description') }}: </span>
       {{ modelDef.description }}
     </div>
   </div>

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

@@ -12,7 +12,7 @@
       />
       <span class="ml-2 font-semibold">{{ node.display_name }}</span>
     </div>
-    <div class="p-4 flex-grow node-help-content max-w-[600px] mx-auto">
+    <div class="p-4 flex-grow node-help-content w-full mx-auto">
       <ProgressSpinner
         v-if="isLoading"
         class="m-auto"
@@ -188,7 +188,7 @@ const outputList = computed(() =>
 
 .markdown-content :deep(li),
 .fallback-content li {
-  @apply my-1;
+  @apply my-2;
 }
 
 .markdown-content :deep(*:first-child),
@@ -198,7 +198,9 @@ const outputList = computed(() =>
 
 .markdown-content :deep(code),
 .fallback-content code {
-  @apply text-[var(--error-text)] bg-[var(--content-bg)] rounded px-1 py-0.5;
+  color: var(--code-text-color);
+  background-color: var(--code-bg-color);
+  @apply rounded px-1.5 py-0.5;
 }
 
 .markdown-content :deep(table),
@@ -227,4 +229,15 @@ const outputList = computed(() =>
 .fallback-content thead {
   border-bottom: 1px solid var(--p-text-color);
 }
+
+.markdown-content :deep(pre),
+.fallback-content pre {
+  @apply rounded p-4 my-4 overflow-x-auto;
+  background-color: var(--code-block-bg-color);
+
+  code {
+    @apply bg-transparent p-0;
+    color: var(--p-text-color);
+  }
+}
 </style>

src/components/topbar/SecondRowWorkflowTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute top-0 left-0 w-auto max-w-full">
+  <div class="w-auto max-w-full">
     <WorkflowTabs />
   </div>
 </template>

src/composables/README.md

@@ -66,50 +66,150 @@ The following diagram shows how composables fit into the application architectur
 
 ## Composable Categories
 
-ComfyUI's composables are organized into several categories:
+The following tables list ALL composables in the system as of 2025-01-30:
 
 ### Auth
-
 Composables for authentication and user management:
-- `useCurrentUser` - Provides access to the current user information
-- `useFirebaseAuthActions` - Handles Firebase authentication operations
+
+| Composable | Description |
+|------------|-------------|
+| `useCurrentUser` | Provides access to the current user information |
+| `useFirebaseAuthActions` | Handles Firebase authentication operations |
+
+### Bottom Panel Tabs
+Composables for terminal and bottom panel functionality:
+
+| Composable | Description |
+|------------|-------------|
+| `useTerminal` | Core terminal functionality |
+| `useTerminalBuffer` | Manages terminal output buffer |
+| `useTerminalTabs` | Handles multiple terminal tab management |
 
 ### Element
-
 Composables for DOM and element interactions:
-- `useAbsolutePosition` - Handles element positioning
-- `useDomClipping` - Manages clipping of DOM elements
-- `useResponsiveCollapse` - Manages responsive collapsing of elements
+
+| Composable | Description |
+|------------|-------------|
+| `useAbsolutePosition` | Handles element positioning |
+| `useCanvasPositionConversion` | Converts between canvas and DOM coordinates |
+| `useDomClipping` | Manages clipping of DOM elements |
+| `useResponsiveCollapse` | Manages responsive collapsing of elements |
+
+### Functional
+Utility composables for common patterns:
+
+| Composable | Description |
+|------------|-------------|
+| `useChainCallback` | Chains multiple callbacks together |
+
+### Manager
+Composables for ComfyUI Manager integration:
+
+| Composable | Description |
+|------------|-------------|
+| `useManagerStatePersistence` | Persists manager UI state |
+
+### Node Pack
+Composables for node package management:
+
+| Composable | Description |
+|------------|-------------|
+| `useInstalledPacks` | Manages installed node packages |
+| `useMissingNodes` | Detects and handles missing nodes |
+| `useNodePacks` | Core node package functionality |
+| `usePackUpdateStatus` | Tracks package update availability |
+| `useWorkflowPacks` | Manages packages used in workflows |
 
 ### Node
-
 Composables for node-specific functionality:
-- `useNodeBadge` - Handles node badge display and interaction
-- `useNodeImage` - Manages node image preview
-- `useNodeDragAndDrop` - Handles drag and drop for nodes
-- `useNodeChatHistory` - Manages chat history for nodes
+
+| Composable | Description |
+|------------|-------------|
+| `useNodeAnimatedImage` | Handles animated images in nodes |
+| `useNodeBadge` | Handles node badge display and interaction |
+| `useNodeCanvasImagePreview` | Canvas-based image preview for nodes |
+| `useNodeChatHistory` | Manages chat history for nodes |
+| `useNodeDragAndDrop` | Handles drag and drop for nodes |
+| `useNodeFileInput` | Manages file input widgets in nodes |
+| `useNodeImage` | Manages node image preview |
+| `useNodeImageUpload` | Handles image upload for nodes |
+| `useNodePaste` | Manages paste operations for nodes |
+| `useNodePricing` | Handles pricing display for nodes |
+| `useNodeProgressText` | Displays progress text in nodes |
+| `useWatchWidget` | Watches widget value changes |
 
 ### Settings
-
 Composables for settings management:
-- `useSettingSearch` - Provides search functionality for settings
-- `useSettingUI` - Manages settings UI interactions
 
-### Sidebar
+| Composable | Description |
+|------------|-------------|
+| `useSettingSearch` | Provides search functionality for settings |
+| `useSettingUI` | Manages settings UI interactions |
 
+### Sidebar Tabs
 Composables for sidebar functionality:
-- `useNodeLibrarySidebarTab` - Manages the node library sidebar tab
-- `useQueueSidebarTab` - Manages the queue sidebar tab
-- `useWorkflowsSidebarTab` - Manages the workflows sidebar tab
-- `useTemplateWorkflows` - Manages template workflow loading, selection, and display
+
+| Composable | Description |
+|------------|-------------|
+| `useModelLibrarySidebarTab` | Manages the model library sidebar tab |
+| `useNodeLibrarySidebarTab` | Manages the node library sidebar tab |
+| `useQueueSidebarTab` | Manages the queue sidebar tab |
+| `useWorkflowsSidebarTab` | Manages the workflows sidebar tab |
+
+### Tree
+Composables for tree structure operations:
+
+| Composable | Description |
+|------------|-------------|
+| `useTreeFolderOperations` | Handles folder operations in tree views |
 
 ### Widgets
-
 Composables for widget functionality:
-- `useBooleanWidget` - Manages boolean widget interactions
-- `useComboWidget` - Manages combo box widget interactions
-- `useFloatWidget` - Manages float input widget interactions
-- `useImagePreviewWidget` - Manages image preview widget
+
+| Composable | Description |
+|------------|-------------|
+| `useBooleanWidget` | Manages boolean widget interactions |
+| `useChatHistoryWidget` | Handles chat history widget |
+| `useComboWidget` | Manages combo box widget interactions |
+| `useFloatWidget` | Manages float input widget interactions |
+| `useImagePreviewWidget` | Manages image preview widget |
+| `useImageUploadWidget` | Handles image upload widget |
+| `useIntWidget` | Manages integer input widget |
+| `useMarkdownWidget` | Handles markdown display widget |
+| `useProgressTextWidget` | Manages progress text widget |
+| `useRemoteWidget` | Handles remote widget connections |
+| `useStringWidget` | Manages string input widget |
+
+### Root-level Composables
+General-purpose composables:
+
+| Composable | Description |
+|------------|-------------|
+| `useBrowserTabTitle` | Manages browser tab title updates |
+| `useCachedRequest` | Provides request caching functionality |
+| `useCanvasDrop` | Handles drop operations on canvas |
+| `useCivitaiModel` | Integrates with Civitai model API |
+| `useContextMenuTranslation` | Handles context menu translations |
+| `useCopy` | Provides copy functionality |
+| `useCopyToClipboard` | Manages clipboard operations |
+| `useCoreCommands` | Provides core command functionality |
+| `useDownload` | Handles file download operations |
+| `useErrorHandling` | Centralized error handling |
+| `useGlobalLitegraph` | Access to global LiteGraph instance |
+| `useLitegraphSettings` | Manages LiteGraph configuration |
+| `useManagerQueue` | Handles manager queue operations |
+| `usePaste` | Provides paste functionality |
+| `usePragmaticDragAndDrop` | Integrates Atlassian's drag-and-drop library |
+| `useProgressFavicon` | Updates favicon with progress indicator |
+| `useRefreshableSelection` | Manages refreshable selections |
+| `useRegistrySearch` | Searches the ComfyUI registry |
+| `useServerLogs` | Manages server log display |
+| `useTemplateWorkflows` | Manages template workflow loading, selection, and display |
+| `useTreeExpansion` | Handles tree node expansion state |
+| `useValueTransform` | Transforms values between formats |
+| `useWorkflowAutoSave` | Handles automatic workflow saving |
+| `useWorkflowPersistence` | Manages workflow persistence |
+| `useWorkflowValidation` | Validates workflow integrity |
 
 ## Usage Guidelines
 

src/composables/node/useNodePricing.ts

@@ -151,7 +151,7 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
 
         const renderingSpeed = String(renderingSpeedWidget.value)
         if (renderingSpeed.toLowerCase().includes('quality')) {
-          basePrice = 0.08
+          basePrice = 0.09
         } else if (renderingSpeed.toLowerCase().includes('balanced')) {
           basePrice = 0.06
         } else if (renderingSpeed.toLowerCase().includes('turbo')) {
@@ -322,15 +322,15 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         const effectScene = String(effectSceneWidget.value)
         if (
           effectScene.includes('fuzzyfuzzy') ||
-          effectScene.includes('squish') ||
-          effectScene.includes('expansion')
+          effectScene.includes('squish')
         ) {
           return '$0.28/Run'
-        } else if (
-          effectScene.includes('dizzydizzy') ||
-          effectScene.includes('bloombloom')
-        ) {
+        } else if (effectScene.includes('dizzydizzy')) {
           return '$0.49/Run'
+        } else if (effectScene.includes('bloombloom')) {
+          return '$0.49/Run'
+        } else if (effectScene.includes('expansion')) {
+          return '$0.28/Run'
         }
 
         return '$0.28/Run'
@@ -448,12 +448,12 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         } else if (model.includes('ray-2')) {
           if (duration.includes('5s')) {
             if (resolution.includes('4k')) return '$6.37/Run'
-            if (resolution.includes('1080p')) return '$2.30/Run'
+            if (resolution.includes('1080p')) return '$1.59/Run'
             if (resolution.includes('720p')) return '$0.71/Run'
             if (resolution.includes('540p')) return '$0.40/Run'
           } else if (duration.includes('9s')) {
             if (resolution.includes('4k')) return '$11.47/Run'
-            if (resolution.includes('1080p')) return '$4.14/Run'
+            if (resolution.includes('1080p')) return '$2.87/Run'
             if (resolution.includes('720p')) return '$1.28/Run'
             if (resolution.includes('540p')) return '$0.72/Run'
           }
@@ -499,12 +499,12 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         } else if (model.includes('ray-2')) {
           if (duration.includes('5s')) {
             if (resolution.includes('4k')) return '$6.37/Run'
-            if (resolution.includes('1080p')) return '$2.30/Run'
+            if (resolution.includes('1080p')) return '$1.59/Run'
             if (resolution.includes('720p')) return '$0.71/Run'
             if (resolution.includes('540p')) return '$0.40/Run'
           } else if (duration.includes('9s')) {
             if (resolution.includes('4k')) return '$11.47/Run'
-            if (resolution.includes('1080p')) return '$4.14/Run'
+            if (resolution.includes('1080p')) return '$2.87/Run'
             if (resolution.includes('720p')) return '$1.28/Run'
             if (resolution.includes('540p')) return '$0.72/Run'
           }

src/composables/nodePack/useWorkflowPacks.ts

@@ -26,7 +26,7 @@ const CORE_NODES_PACK_NAME = 'comfy-core'
 export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
   const nodeDefStore = useNodeDefStore()
   const systemStatsStore = useSystemStatsStore()
-  const { search } = useComfyRegistryStore()
+  const { inferPackFromNodeName } = useComfyRegistryStore()
 
   const workflowPacks = ref<WorkflowPack[]>([])
 
@@ -70,18 +70,19 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
       }
     }
 
-    // Search the registry for non-core nodes
-    const searchResult = await search.call({
-      comfy_node_search: nodeName,
-      limit: 1
-    })
-    if (searchResult?.nodes?.length) {
-      const pack = searchResult.nodes[0]
+    // Query the registry to find which pack provides this node
+    const pack = await inferPackFromNodeName.call(nodeName)
+
+    if (pack) {
       return {
         id: pack.id,
         version: pack.latest_version?.version ?? SelectedVersion.NIGHTLY
       }
     }
+
+    // No pack found - this node doesn't exist in the registry or couldn't be
+    // extracted from the parent node pack successfully
+    return undefined
   }
 
   /**

src/composables/setting/useSettingSearch.ts

@@ -53,6 +53,11 @@ export function useSettingSearch() {
     const queryLower = query.toLocaleLowerCase()
     const allSettings = Object.values(settingStore.settingsById)
     const filteredSettings = allSettings.filter((setting) => {
+      // Filter out hidden and deprecated settings, just like in normal settings tree
+      if (setting.type === 'hidden' || setting.deprecated) {
+        return false
+      }
+
       const idLower = setting.id.toLowerCase()
       const nameLower = setting.name.toLowerCase()
       const translatedName = st(

src/composables/sidebarTabs/useModelLibrarySidebarTab.ts

@@ -1,5 +1,4 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
@@ -7,13 +6,11 @@ import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
-
   return {
     id: 'model-library',
     icon: 'pi pi-box',
-    title: t('sideToolbar.modelLibrary'),
-    tooltip: t('sideToolbar.modelLibrary'),
+    title: 'sideToolbar.modelLibrary',
+    tooltip: 'sideToolbar.modelLibrary',
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {

src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts

@@ -1,16 +1,14 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   return {
     id: 'node-library',
     icon: 'pi pi-book',
-    title: t('sideToolbar.nodeLibrary'),
-    tooltip: t('sideToolbar.nodeLibrary'),
+    title: 'sideToolbar.nodeLibrary',
+    tooltip: 'sideToolbar.nodeLibrary',
     component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   }

src/composables/sidebarTabs/useQueueSidebarTab.ts

@@ -1,12 +1,10 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
 import { useQueuePendingTaskCountStore } from '@/stores/queueStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useQueueSidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
   return {
     id: 'queue',
@@ -15,8 +13,8 @@ export const useQueueSidebarTab = (): SidebarTabExtension => {
       const value = queuePendingTaskCountStore.count.toString()
       return value === '0' ? null : value
     },
-    title: t('sideToolbar.queue'),
-    tooltip: t('sideToolbar.queue'),
+    title: 'sideToolbar.queue',
+    tooltip: 'sideToolbar.queue',
     component: markRaw(QueueSidebarTab),
     type: 'vue'
   }

src/composables/sidebarTabs/useWorkflowsSidebarTab.ts

@@ -1,5 +1,4 @@
 import { markRaw } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/stores/settingStore'
@@ -7,10 +6,8 @@ import { useWorkflowStore } from '@/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
-  const { t } = useI18n()
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
-
   return {
     id: 'workflows',
     icon: 'pi pi-folder-open',
@@ -23,8 +20,8 @@ export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
       const value = workflowStore.openWorkflows.length.toString()
       return value === '0' ? null : value
     },
-    title: t('sideToolbar.workflows'),
-    tooltip: t('sideToolbar.workflows'),
+    title: 'sideToolbar.workflows',
+    tooltip: 'sideToolbar.workflows',
     component: markRaw(WorkflowsSidebarTab),
     type: 'vue'
   }

src/composables/useCoreCommands.ts

@@ -19,7 +19,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
-import { useTitleEditorStore } from '@/stores/graphStore'
+import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
@@ -38,6 +38,7 @@ export function useCoreCommands(): ComfyCommand[] {
   const colorPaletteStore = useColorPaletteStore()
   const firebaseAuthActions = useFirebaseAuthActions()
   const toastStore = useToastStore()
+  const canvasStore = useCanvasStore()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
   const getSelectedNodes = (): LGraphNode[] => {
@@ -730,6 +731,30 @@ export function useCoreCommands(): ComfyCommand[] {
         if (!(node instanceof LGraphNode)) return
         await addFluxKontextGroupNode(node)
       }
+    },
+    {
+      id: 'Comfy.Graph.ConvertToSubgraph',
+      icon: 'pi pi-sitemap',
+      label: 'Convert Selection to Subgraph',
+      versionAdded: '1.20.1',
+      function: () => {
+        const canvas = canvasStore.getCanvas()
+        const graph = canvas.subgraph ?? canvas.graph
+        if (!graph) throw new TypeError('Canvas has no graph or subgraph set.')
+
+        const res = graph.convertToSubgraph(canvas.selectedItems)
+        if (!res) {
+          toastStore.add({
+            severity: 'error',
+            summary: t('toastMessages.cannotCreateSubgraph'),
+            detail: t('toastMessages.failedToConvertToSubgraph'),
+            life: 3000
+          })
+          return
+        }
+        const { node } = res
+        canvas.select(node)
+      }
     }
   ]
 

src/composables/useErrorHandling.ts

@@ -9,6 +9,7 @@ export function useErrorHandling() {
       summary: t('g.error'),
       detail: error instanceof Error ? error.message : t('g.unknownError')
     })
+    console.error(error)
   }
 
   const wrapWithErrorHandling =

src/composables/widgets/useFloatWidget.ts

@@ -10,14 +10,19 @@ import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 import { useSettingStore } from '@/stores/settingStore'
 
 function onFloatValueChange(this: INumericWidget, v: number) {
-  this.value = this.options.round
-    ? _.clamp(
-        Math.round((v + Number.EPSILON) / this.options.round) *
-          this.options.round,
-        this.options.min ?? -Infinity,
-        this.options.max ?? Infinity
-      )
-    : v
+  const round = this.options.round
+  if (round) {
+    const precision =
+      this.options.precision ?? Math.max(0, -Math.floor(Math.log10(round)))
+    const rounded = Math.round(v / round) * round
+    this.value = _.clamp(
+      Number(rounded.toFixed(precision)),
+      this.options.min ?? -Infinity,
+      this.options.max ?? Infinity
+    )
+  } else {
+    this.value = v
+  }
 }
 
 export const _for_testing = {
@@ -62,7 +67,7 @@ export const useFloatWidget = () => {
         max: inputSpec.max ?? 2048,
         round:
           enableRounding && precision && !inputSpec.round
-            ? (1_000_000 * Math.pow(0.1, precision)) / 1_000_000
+            ? Math.pow(10, -precision)
             : (inputSpec.round as number),
         /** @deprecated Use step2 instead. The 10x value is a legacy implementation. */
         step: step * 10.0,

src/constants/coreKeybindings.ts

@@ -173,5 +173,13 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       key: 'f'
     },
     commandId: 'Workspace.ToggleFocusMode'
+  },
+  {
+    combo: {
+      key: 'e',
+      ctrl: true,
+      shift: true
+    },
+    commandId: 'Comfy.Graph.ConvertToSubgraph'
   }
 ]

src/constants/coreSettings.ts

@@ -330,6 +330,14 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: true,
     versionAdded: '1.20.3'
   },
+  {
+    id: 'Comfy.Notification.ShowVersionUpdates',
+    category: ['Comfy', 'Notification Preferences'],
+    name: 'Show version updates',
+    tooltip: 'Show updates for new models, and major new features.',
+    type: 'boolean',
+    defaultValue: true
+  },
   {
     id: 'Comfy.ConfirmClear',
     category: ['Comfy', 'Workflow', 'ConfirmClear'],
@@ -747,6 +755,13 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: false,
     versionAdded: '1.8.7'
   },
+  {
+    id: 'Comfy.InstalledVersion',
+    name: 'The frontend version that was running when the user first installed ComfyUI',
+    type: 'hidden',
+    defaultValue: null,
+    versionAdded: '1.24.0'
+  },
   {
     id: 'LiteGraph.ContextMenu.Scaling',
     name: 'Scale node combo widget menus (lists) when zoomed in',
@@ -847,5 +862,24 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'boolean',
     defaultValue: false,
     versionAdded: '1.19.1'
+  },
+  // Release data stored in settings
+  {
+    id: 'Comfy.Release.Version',
+    name: 'Last seen release version',
+    type: 'hidden',
+    defaultValue: ''
+  },
+  {
+    id: 'Comfy.Release.Status',
+    name: 'Release status',
+    type: 'hidden',
+    defaultValue: 'skipped'
+  },
+  {
+    id: 'Comfy.Release.Timestamp',
+    name: 'Release seen timestamp',
+    type: 'hidden',
+    defaultValue: 0
   }
 ]

src/extensions/core/README.md

@@ -25,20 +25,85 @@ ComfyUI's extension system follows these key principles:
 
 ## Core Extensions List
 
-The core extensions include:
+The following table lists ALL core extensions in the system as of 2025-01-30:
 
-| Extension | Description |
-|-----------|-------------|
-| clipspace.ts | Implements the Clipspace feature for temporary image storage |
-| dynamicPrompts.ts | Provides dynamic prompt generation capabilities |
-| groupNode.ts | Implements the group node functionality to organize workflows |
-| load3d.ts | Supports 3D model loading and visualization |
-| maskeditor.ts | Implements the mask editor for image masking operations |
-| noteNode.ts | Adds note nodes for documentation within workflows |
-| rerouteNode.ts | Implements reroute nodes for cleaner workflow connections |
-| uploadImage.ts | Handles image upload functionality |
-| webcamCapture.ts | Provides webcam capture capabilities |
-| widgetInputs.ts | Implements various widget input types |
+### Main Extensions
+
+| Extension | Description | Category |
+|-----------|-------------|----------|
+| clipspace.ts | Implements the Clipspace feature for temporary image storage | Image |
+| contextMenuFilter.ts | Provides context menu filtering capabilities | UI |
+| dynamicPrompts.ts | Provides dynamic prompt generation capabilities | Prompts |
+| editAttention.ts | Implements attention editing functionality | Text |
+| electronAdapter.ts | Adapts functionality for Electron environment | Platform |
+| groupNode.ts | Implements the group node functionality to organize workflows | Graph |
+| groupNodeManage.ts | Provides group node management operations | Graph |
+| groupOptions.ts | Handles group node configuration options | Graph |
+| index.ts | Main extension registration and coordination | Core |
+| load3d.ts | Supports 3D model loading and visualization | 3D |
+| maskEditorOld.ts | Legacy mask editor implementation | Image |
+| maskeditor.ts | Implements the mask editor for image masking operations | Image |
+| nodeTemplates.ts | Provides node template functionality | Templates |
+| noteNode.ts | Adds note nodes for documentation within workflows | Graph |
+| previewAny.ts | Universal preview functionality for various data types | Preview |
+| rerouteNode.ts | Implements reroute nodes for cleaner workflow connections | Graph |
+| saveImageExtraOutput.ts | Handles additional image output saving | Image |
+| saveMesh.ts | Implements 3D mesh saving functionality | 3D |
+| simpleTouchSupport.ts | Provides basic touch interaction support | Input |
+| slotDefaults.ts | Manages default values for node slots | Nodes |
+| uploadAudio.ts | Handles audio file upload functionality | Audio |
+| uploadImage.ts | Handles image upload functionality | Image |
+| webcamCapture.ts | Provides webcam capture capabilities | Media |
+| widgetInputs.ts | Implements various widget input types | Widgets |
+
+### load3d Subdirectory
+Located in `extensions/core/load3d/`:
+
+| File | Description | Type |
+|------|-------------|------|
+| AnimationManager.ts | Manages 3D animations | Manager |
+| CameraManager.ts | Handles camera controls and positioning | Manager |
+| ControlsManager.ts | Manages 3D scene controls | Manager |
+| EventManager.ts | Handles 3D scene events | Manager |
+| interfaces.ts | TypeScript interfaces for 3D functionality | Types |
+| LightingManager.ts | Manages scene lighting | Manager |
+| Load3DConfiguration.ts | Configuration for 3D loading | Config |
+| Load3d.ts | Core 3D loading functionality | Core |
+| Load3dAnimation.ts | Animation-specific 3D operations | Animation |
+| Load3dUtils.ts | Utility functions for 3D operations | Utils |
+| LoaderManager.ts | Manages various 3D file loaders | Manager |
+| ModelExporter.ts | Exports 3D models to different formats | Export |
+| ModelManager.ts | Manages 3D model lifecycle | Manager |
+| NodeStorage.ts | Handles storage for 3D nodes | Storage |
+| PreviewManager.ts | Manages 3D model previews | Manager |
+| RecordingManager.ts | Handles 3D scene recording | Manager |
+| SceneManager.ts | Core 3D scene management | Manager |
+| ViewHelperManager.ts | Manages 3D view helpers and gizmos | Manager |
+
+### Conditional Lines Subdirectory
+Located in `extensions/core/load3d/conditional-lines/`:
+
+| File | Description |
+|------|-------------|
+| ColoredShadowMaterial.js | Material for colored shadow rendering |
+| ConditionalEdgesGeometry.js | Geometry for conditional edge rendering |
+| ConditionalEdgesShader.js | Shader for conditional edges |
+| OutsideEdgesGeometry.js | Geometry for outside edge detection |
+
+### Lines2 Subdirectory  
+Located in `extensions/core/load3d/conditional-lines/Lines2/`:
+
+| File | Description |
+|------|-------------|
+| ConditionalLineMaterial.js | Material for conditional line rendering |
+| ConditionalLineSegmentsGeometry.js | Geometry for conditional line segments |
+
+### ThreeJS Override Subdirectory
+Located in `extensions/core/load3d/threejsOverride/`:
+
+| File | Description |
+|------|-------------|
+| OverrideMTLLoader.js | Custom MTL loader with enhanced functionality |
 
 ## Extension Development
 

src/extensions/core/groupNode.ts

@@ -1,4 +1,4 @@
-import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
+import { LiteGraph } from '@comfyorg/litegraph'
 import { LGraphNode, type NodeId } from '@comfyorg/litegraph/dist/LGraphNode'
 
 import { t } from '@/i18n'
@@ -1583,57 +1583,6 @@ export class GroupNodeHandler {
   }
 }
 
-function addConvertToGroupOptions() {
-  // @ts-expect-error fixme ts strict error
-  function addConvertOption(options, index) {
-    const selected = Object.values(app.canvas.selected_nodes ?? {})
-    const disabled =
-      selected.length < 2 ||
-      selected.find((n) => GroupNodeHandler.isGroupNode(n))
-    options.splice(index, null, {
-      content: `Convert to Group Node`,
-      disabled,
-      callback: convertSelectedNodesToGroupNode
-    })
-  }
-
-  // @ts-expect-error fixme ts strict error
-  function addManageOption(options, index) {
-    const groups = app.graph.extra?.groupNodes
-    const disabled = !groups || !Object.keys(groups).length
-    options.splice(index, null, {
-      content: `Manage Group Nodes`,
-      disabled,
-      callback: () => manageGroupNodes()
-    })
-  }
-
-  // Add to canvas
-  const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
-  LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-    // @ts-expect-error fixme ts strict error
-    const options = getCanvasMenuOptions.apply(this, arguments)
-    const index = options.findIndex((o) => o?.content === 'Add Group')
-    const insertAt = index === -1 ? options.length - 1 : index + 2
-    addConvertOption(options, insertAt)
-    addManageOption(options, insertAt + 1)
-    return options
-  }
-
-  // Add to nodes
-  const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions
-  LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
-    // @ts-expect-error fixme ts strict error
-    const options = getNodeMenuOptions.apply(this, arguments)
-    if (!GroupNodeHandler.isGroupNode(node)) {
-      const index = options.findIndex((o) => o?.content === 'Properties')
-      const insertAt = index === -1 ? options.length - 1 : index
-      addConvertOption(options, insertAt)
-    }
-    return options
-  }
-}
-
 const replaceLegacySeparators = (nodes: ComfyNode[]): void => {
   for (const node of nodes) {
     if (typeof node.type === 'string' && node.type.startsWith('workflow/')) {
@@ -1723,9 +1672,6 @@ const ext: ComfyExtension = {
       }
     }
   ],
-  setup() {
-    addConvertToGroupOptions()
-  },
   async beforeConfigureGraph(
     graphData: ComfyWorkflowJSON,
     missingNodeTypes: string[]

src/extensions/core/load3d.ts

@@ -1,7 +1,4 @@
-import type {
-  IComboWidget,
-  IStringWidget
-} from '@comfyorg/litegraph/dist/types/widgets'
+import type { IStringWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import { nextTick } from 'vue'
 
 import Load3D from '@/components/load3d/Load3D.vue'
@@ -17,6 +14,80 @@ import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 import { useToastStore } from '@/stores/toastStore'
 
+async function handleModelUpload(files: FileList, node: any) {
+  if (!files?.length) return
+
+  const modelWidget = node.widgets?.find(
+    (w: any) => w.name === 'model_file'
+  ) as IStringWidget
+
+  node.properties['Texture'] = undefined
+
+  try {
+    const resourceFolder = (node.properties['Resource Folder'] as string) || ''
+
+    const subfolder = resourceFolder.trim()
+      ? `3d/${resourceFolder.trim()}`
+      : '3d'
+
+    const uploadPath = await Load3dUtils.uploadFile(files[0], subfolder)
+
+    if (!uploadPath) {
+      useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
+      return
+    }
+
+    const modelUrl = api.apiURL(
+      Load3dUtils.getResourceURL(
+        ...Load3dUtils.splitFilePath(uploadPath),
+        'input'
+      )
+    )
+
+    await useLoad3dService().getLoad3d(node)?.loadModel(modelUrl)
+
+    if (uploadPath && modelWidget) {
+      if (!modelWidget.options?.values?.includes(uploadPath)) {
+        modelWidget.options?.values?.push(uploadPath)
+      }
+
+      modelWidget.value = uploadPath
+    }
+  } catch (error) {
+    console.error('Model upload failed:', error)
+    useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
+  }
+}
+
+async function handleResourcesUpload(files: FileList, node: any) {
+  if (!files?.length) return
+
+  try {
+    const resourceFolder = (node.properties['Resource Folder'] as string) || ''
+
+    const subfolder = resourceFolder.trim()
+      ? `3d/${resourceFolder.trim()}`
+      : '3d'
+
+    await Load3dUtils.uploadMultipleFiles(files, subfolder)
+  } catch (error) {
+    console.error('Extra resources upload failed:', error)
+    useToastStore().addAlert(t('toastMessages.extraResourcesUploadFailed'))
+  }
+}
+
+function createFileInput(
+  accept: string,
+  multiple: boolean = false
+): HTMLInputElement {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = accept
+  input.multiple = multiple
+  input.style.display = 'none'
+  return input
+}
+
 useExtensionService().registerExtension({
   name: 'Comfy.Load3D',
   settings: [
@@ -110,49 +181,34 @@ useExtensionService().registerExtension({
   getCustomWidgets() {
     return {
       LOAD_3D(node) {
-        const fileInput = document.createElement('input')
-        fileInput.type = 'file'
-        fileInput.accept = '.gltf,.glb,.obj,.fbx,.stl'
-        fileInput.style.display = 'none'
+        const fileInput = createFileInput('.gltf,.glb,.obj,.fbx,.stl', false)
+
+        node.properties['Resource Folder'] = ''
 
         fileInput.onchange = async () => {
-          if (fileInput.files?.length) {
-            const modelWidget = node.widgets?.find(
-              (w) => w.name === 'model_file'
-            ) as IComboWidget & { options: { values: string[] } }
-
-            node.properties['Texture'] = undefined
-
-            const uploadPath = await Load3dUtils.uploadFile(
-              fileInput.files[0]
-            ).catch((error) => {
-              console.error('File upload failed:', error)
-              useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
-            })
-
-            const modelUrl = api.apiURL(
-              Load3dUtils.getResourceURL(
-                ...Load3dUtils.splitFilePath(uploadPath),
-                'input'
-              )
-            )
-
-            await useLoad3dService().getLoad3d(node)?.loadModel(modelUrl)
-
-            if (uploadPath && modelWidget) {
-              if (!modelWidget.options?.values?.includes(uploadPath)) {
-                modelWidget.options?.values?.push(uploadPath)
-              }
-
-              modelWidget.value = uploadPath
-            }
-          }
+          await handleModelUpload(fileInput.files!, node)
         }
 
         node.addWidget('button', 'upload 3d model', 'upload3dmodel', () => {
           fileInput.click()
         })
 
+        const resourcesInput = createFileInput('*', true)
+
+        resourcesInput.onchange = async () => {
+          await handleResourcesUpload(resourcesInput.files!, node)
+          resourcesInput.value = ''
+        }
+
+        node.addWidget(
+          'button',
+          'upload extra resources',
+          'uploadExtraResources',
+          () => {
+            resourcesInput.click()
+          }
+        )
+
         node.addWidget('button', 'clear', 'clear', () => {
           useLoad3dService().getLoad3d(node)?.clearModel()
 
@@ -264,46 +320,34 @@ useExtensionService().registerExtension({
   getCustomWidgets() {
     return {
       LOAD_3D_ANIMATION(node) {
-        const fileInput = document.createElement('input')
-        fileInput.type = 'file'
-        fileInput.accept = '.gltf,.glb,.fbx'
-        fileInput.style.display = 'none'
+        const fileInput = createFileInput('.gltf,.glb,.fbx', false)
+
+        node.properties['Resource Folder'] = ''
+
         fileInput.onchange = async () => {
-          if (fileInput.files?.length) {
-            const modelWidget = node.widgets?.find(
-              (w) => w.name === 'model_file'
-            ) as IStringWidget
-
-            const uploadPath = await Load3dUtils.uploadFile(
-              fileInput.files[0]
-            ).catch((error) => {
-              console.error('File upload failed:', error)
-              useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
-            })
-
-            const modelUrl = api.apiURL(
-              Load3dUtils.getResourceURL(
-                ...Load3dUtils.splitFilePath(uploadPath),
-                'input'
-              )
-            )
-
-            await useLoad3dService().getLoad3d(node)?.loadModel(modelUrl)
-
-            if (uploadPath && modelWidget) {
-              if (!modelWidget.options?.values?.includes(uploadPath)) {
-                modelWidget.options?.values?.push(uploadPath)
-              }
-
-              modelWidget.value = uploadPath
-            }
-          }
+          await handleModelUpload(fileInput.files!, node)
         }
 
         node.addWidget('button', 'upload 3d model', 'upload3dmodel', () => {
           fileInput.click()
         })
 
+        const resourcesInput = createFileInput('*', true)
+
+        resourcesInput.onchange = async () => {
+          await handleResourcesUpload(resourcesInput.files!, node)
+          resourcesInput.value = ''
+        }
+
+        node.addWidget(
+          'button',
+          'upload extra resources',
+          'uploadExtraResources',
+          () => {
+            resourcesInput.click()
+          }
+        )
+
         node.addWidget('button', 'clear', 'clear', () => {
           useLoad3dService().getLoad3d(node)?.clearModel()
 

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -128,6 +128,9 @@ class Load3DConfiguration {
       if (!value) return
 
       const filename = value as string
+
+      this.setResourceFolder(filename)
+
       const modelUrl = api.apiURL(
         Load3dUtils.getResourceURL(
           ...Load3dUtils.splitFilePath(filename),
@@ -173,6 +176,21 @@ class Load3DConfiguration {
       }
     }
   }
+
+  private setResourceFolder(filename: string): void {
+    const pathParts = filename.split('/').filter((part) => part.trim())
+
+    if (pathParts.length <= 2) {
+      return
+    }
+
+    const subfolderParts = pathParts.slice(1, -1)
+    const subfolder = subfolderParts.join('/')
+
+    if (subfolder) {
+      this.load3d.node.properties['Resource Folder'] = subfolder
+    }
+  }
 }
 
 export default Load3DConfiguration

src/extensions/core/load3d/Load3d.ts

@@ -118,11 +118,7 @@ class Load3d {
       options
     )
 
-    this.loaderManager = new LoaderManager(
-      this.modelManager,
-      this.eventManager,
-      options
-    )
+    this.loaderManager = new LoaderManager(this.modelManager, this.eventManager)
 
     this.recordingManager = new RecordingManager(
       this.sceneManager.scene,

src/extensions/core/load3d/Load3dUtils.ts

@@ -34,13 +34,14 @@ class Load3dUtils {
     return await resp.json()
   }
 
-  static async uploadFile(file: File) {
+  static async uploadFile(file: File, subfolder: string) {
     let uploadPath
 
     try {
       const body = new FormData()
       body.append('image', file)
-      body.append('subfolder', '3d')
+
+      body.append('subfolder', subfolder)
 
       const resp = await api.fetchApi('/upload/image', {
         method: 'POST',
@@ -96,6 +97,14 @@ class Load3dUtils {
 
     return `/view?${params}`
   }
+
+  static async uploadMultipleFiles(files: FileList, subfolder: string = '3d') {
+    const uploadPromises = Array.from(files).map((file) =>
+      this.uploadFile(file, subfolder)
+    )
+
+    await Promise.all(uploadPromises)
+  }
 }
 
 export default Load3dUtils

src/extensions/core/load3d/LoaderManager.ts

@@ -1,16 +1,15 @@
 import * as THREE from 'three'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 
-import { OverrideMTLLoader } from '@/extensions/core/load3d/threejsOverride/OverrideMTLLoader'
 import { t } from '@/i18n'
 import { useToastStore } from '@/stores/toastStore'
 
 import {
   EventManagerInterface,
-  Load3DOptions,
   LoaderManagerInterface,
   ModelManagerInterface
 } from './interfaces'
@@ -18,7 +17,7 @@ import {
 export class LoaderManager implements LoaderManagerInterface {
   gltfLoader: GLTFLoader
   objLoader: OBJLoader
-  mtlLoader: OverrideMTLLoader
+  mtlLoader: MTLLoader
   fbxLoader: FBXLoader
   stlLoader: STLLoader
 
@@ -27,21 +26,14 @@ export class LoaderManager implements LoaderManagerInterface {
 
   constructor(
     modelManager: ModelManagerInterface,
-    eventManager: EventManagerInterface,
-    options: Load3DOptions
+    eventManager: EventManagerInterface
   ) {
-    let loadRootFolder = 'input'
-
-    if (options && options.inputSpec?.isPreview) {
-      loadRootFolder = 'output'
-    }
-
     this.modelManager = modelManager
     this.eventManager = eventManager
 
     this.gltfLoader = new GLTFLoader()
     this.objLoader = new OBJLoader()
-    this.mtlLoader = new OverrideMTLLoader(loadRootFolder)
+    this.mtlLoader = new MTLLoader()
     this.fbxLoader = new FBXLoader()
     this.stlLoader = new STLLoader()
   }
@@ -100,9 +92,31 @@ export class LoaderManager implements LoaderManagerInterface {
   ): Promise<THREE.Object3D | null> {
     let model: THREE.Object3D | null = null
 
+    const params = new URLSearchParams(url.split('?')[1])
+
+    const filename = params.get('filename')
+
+    if (!filename) {
+      console.error('Missing filename in URL:', url)
+
+      return null
+    }
+
+    const loadRootFolder = params.get('type') === 'output' ? 'output' : 'input'
+
+    const subfolder = params.get('subfolder') ?? ''
+
+    const path =
+      'api/view?type=' +
+      loadRootFolder +
+      '&subfolder=' +
+      encodeURIComponent(subfolder) +
+      '&filename='
+
     switch (fileExtension) {
       case 'stl':
-        const geometry = await this.stlLoader.loadAsync(url)
+        this.stlLoader.setPath(path)
+        const geometry = await this.stlLoader.loadAsync(filename)
         this.modelManager.setOriginalModel(geometry)
         geometry.computeVertexNormals()
 
@@ -117,7 +131,10 @@ export class LoaderManager implements LoaderManagerInterface {
         break
 
       case 'fbx':
-        const fbxModel = await this.fbxLoader.loadAsync(url)
+        this.fbxLoader.setPath(path)
+
+        const fbxModel = await this.fbxLoader.loadAsync(filename)
+
         this.modelManager.setOriginalModel(fbxModel)
         model = fbxModel
 
@@ -130,18 +147,12 @@ export class LoaderManager implements LoaderManagerInterface {
 
       case 'obj':
         if (this.modelManager.materialMode === 'original') {
-          const mtlUrl = url.replace(/(filename=.*?)\.obj/, '$1.mtl')
-
-          const subfolderMatch = url.match(/[?&]subfolder=([^&]*)/)
-
-          const subfolder = subfolderMatch
-            ? decodeURIComponent(subfolderMatch[1])
-            : '3d'
-
-          this.mtlLoader.setSubfolder(subfolder)
-
           try {
-            const materials = await this.mtlLoader.loadAsync(mtlUrl)
+            this.mtlLoader.setPath(path)
+
+            const mtlFileName = filename.replace(/\.obj$/, '.mtl')
+
+            const materials = await this.mtlLoader.loadAsync(mtlFileName)
             materials.preload()
             this.objLoader.setMaterials(materials)
           } catch (e) {
@@ -151,7 +162,8 @@ export class LoaderManager implements LoaderManagerInterface {
           }
         }
 
-        model = await this.objLoader.loadAsync(url)
+        this.objLoader.setPath(path)
+        model = await this.objLoader.loadAsync(filename)
         model.traverse((child) => {
           if (child instanceof THREE.Mesh) {
             this.modelManager.originalMaterials.set(child, child.material)
@@ -161,7 +173,10 @@ export class LoaderManager implements LoaderManagerInterface {
 
       case 'gltf':
       case 'glb':
-        const gltf = await this.gltfLoader.loadAsync(url)
+        this.gltfLoader.setPath(path)
+
+        const gltf = await this.gltfLoader.loadAsync(filename)
+
         this.modelManager.setOriginalModel(gltf)
         model = gltf.scene
 

src/extensions/core/load3d/threejsOverride/OverrideMTLLoader.js

@@ -1,533 +0,0 @@
-import {
-  Color,
-  ColorManagement,
-  DefaultLoadingManager,
-  FileLoader,
-  FrontSide,
-  Loader,
-  LoaderUtils,
-  MeshPhongMaterial,
-  RepeatWrapping,
-  SRGBColorSpace,
-  TextureLoader,
-  Vector2
-} from 'three'
-
-/**
- * A loader for the MTL format.
- *
- * The Material Template Library format (MTL) or .MTL File Format is a companion file format
- * to OBJ that describes surface shading (material) properties of objects within one or more
- * OBJ files.
- *
- * ```js
- * const loader = new MTLLoader();
- * const materials = await loader.loadAsync( 'models/obj/male02/male02.mtl' );
- *
- * const objLoader = new OBJLoader();
- * objLoader.setMaterials( materials );
- * ```
- *
- * @augments Loader
- * @three_import import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
- */
-class OverrideMTLLoader extends Loader {
-  constructor(loadRootFolder, manager) {
-    super(manager)
-
-    this.loadRootFolder = loadRootFolder
-  }
-
-  setSubfolder(subfolder) {
-    this.subfolder = subfolder
-  }
-
-  /**
-   * Starts loading from the given URL and passes the loaded MTL asset
-   * to the `onLoad()` callback.
-   *
-   * @param {string} url - The path/URL of the file to be loaded. This can also be a data URI.
-   * @param {function(MaterialCreator)} onLoad - Executed when the loading process has been finished.
-   * @param {onProgressCallback} onProgress - Executed while the loading is in progress.
-   * @param {onErrorCallback} onError - Executed when errors occur.
-   */
-  load(url, onLoad, onProgress, onError) {
-    const scope = this
-
-    const path = this.path === '' ? LoaderUtils.extractUrlBase(url) : this.path
-
-    const loader = new FileLoader(this.manager)
-    loader.setPath(this.path)
-    loader.setRequestHeader(this.requestHeader)
-    loader.setWithCredentials(this.withCredentials)
-    loader.load(
-      url,
-      function (text) {
-        try {
-          onLoad(scope.parse(text, path))
-        } catch (e) {
-          if (onError) {
-            onError(e)
-          } else {
-            console.error(e)
-          }
-
-          scope.manager.itemError(url)
-        }
-      },
-      onProgress,
-      onError
-    )
-  }
-
-  /**
-   * Sets the material options.
-   *
-   * @param {MTLLoader~MaterialOptions} value - The material options.
-   * @return {MTLLoader} A reference to this loader.
-   */
-  setMaterialOptions(value) {
-    this.materialOptions = value
-    return this
-  }
-
-  /**
-   * Parses the given MTL data and returns the resulting material creator.
-   *
-   * @param {string} text - The raw MTL data as a string.
-   * @param {string} path - The URL base path.
-   * @return {MaterialCreator} The material creator.
-   */
-  parse(text, path) {
-    const lines = text.split('\n')
-    let info = {}
-    const delimiter_pattern = /\s+/
-    const materialsInfo = {}
-
-    for (let i = 0; i < lines.length; i++) {
-      let line = lines[i]
-      line = line.trim()
-
-      if (line.length === 0 || line.charAt(0) === '#') {
-        // Blank line or comment ignore
-        continue
-      }
-
-      const pos = line.indexOf(' ')
-
-      let key = pos >= 0 ? line.substring(0, pos) : line
-      key = key.toLowerCase()
-
-      let value = pos >= 0 ? line.substring(pos + 1) : ''
-      value = value.trim()
-
-      if (key === 'newmtl') {
-        // New material
-
-        info = { name: value }
-        materialsInfo[value] = info
-      } else {
-        if (key === 'ka' || key === 'kd' || key === 'ks' || key === 'ke') {
-          const ss = value.split(delimiter_pattern, 3)
-          info[key] = [parseFloat(ss[0]), parseFloat(ss[1]), parseFloat(ss[2])]
-        } else {
-          info[key] = value
-        }
-      }
-    }
-
-    const materialCreator = new OverrideMaterialCreator(
-      this.resourcePath || path,
-      this.materialOptions,
-      this.loadRootFolder,
-      this.subfolder
-    )
-    materialCreator.setCrossOrigin(this.crossOrigin)
-    materialCreator.setManager(this.manager)
-    materialCreator.setMaterials(materialsInfo)
-    return materialCreator
-  }
-}
-
-/**
- * Material options of `MTLLoader`.
- *
- * @typedef {Object} MTLLoader~MaterialOptions
- * @property {(FrontSide|BackSide|DoubleSide)} [side=FrontSide] - Which side to apply the material.
- * @property {(RepeatWrapping|ClampToEdgeWrapping|MirroredRepeatWrapping)} [wrap=RepeatWrapping] - What type of wrapping to apply for textures.
- * @property {boolean} [normalizeRGB=false] - Whether RGB colors should be normalized to `0-1` from `0-255`.
- * @property {boolean} [ignoreZeroRGBs=false] - Ignore values of RGBs (Ka,Kd,Ks) that are all 0's.
- */
-
-class OverrideMaterialCreator {
-  constructor(baseUrl = '', options = {}, loadRootFolder, subfolder) {
-    this.baseUrl = baseUrl
-    this.options = options
-    this.materialsInfo = {}
-    this.materials = {}
-    this.materialsArray = []
-    this.nameLookup = {}
-
-    this.loadRootFolder = loadRootFolder
-    this.subfolder = subfolder
-
-    this.crossOrigin = 'anonymous'
-
-    this.side = this.options.side !== undefined ? this.options.side : FrontSide
-    this.wrap =
-      this.options.wrap !== undefined ? this.options.wrap : RepeatWrapping
-  }
-
-  setCrossOrigin(value) {
-    this.crossOrigin = value
-    return this
-  }
-
-  setManager(value) {
-    this.manager = value
-  }
-
-  setMaterials(materialsInfo) {
-    this.materialsInfo = this.convert(materialsInfo)
-    this.materials = {}
-    this.materialsArray = []
-    this.nameLookup = {}
-  }
-
-  convert(materialsInfo) {
-    if (!this.options) return materialsInfo
-
-    const converted = {}
-
-    for (const mn in materialsInfo) {
-      // Convert materials info into normalized form based on options
-
-      const mat = materialsInfo[mn]
-
-      const covmat = {}
-
-      converted[mn] = covmat
-
-      for (const prop in mat) {
-        let save = true
-        let value = mat[prop]
-        const lprop = prop.toLowerCase()
-
-        switch (lprop) {
-          case 'kd':
-          case 'ka':
-          case 'ks':
-            // Diffuse color (color under white light) using RGB values
-
-            if (this.options && this.options.normalizeRGB) {
-              value = [value[0] / 255, value[1] / 255, value[2] / 255]
-            }
-
-            if (this.options && this.options.ignoreZeroRGBs) {
-              if (value[0] === 0 && value[1] === 0 && value[2] === 0) {
-                // ignore
-
-                save = false
-              }
-            }
-
-            break
-
-          default:
-            break
-        }
-
-        if (save) {
-          covmat[lprop] = value
-        }
-      }
-    }
-
-    return converted
-  }
-
-  preload() {
-    for (const mn in this.materialsInfo) {
-      this.create(mn)
-    }
-  }
-
-  getIndex(materialName) {
-    return this.nameLookup[materialName]
-  }
-
-  getAsArray() {
-    let index = 0
-
-    for (const mn in this.materialsInfo) {
-      this.materialsArray[index] = this.create(mn)
-      this.nameLookup[mn] = index
-      index++
-    }
-
-    return this.materialsArray
-  }
-
-  create(materialName) {
-    if (this.materials[materialName] === undefined) {
-      this.createMaterial_(materialName)
-    }
-
-    return this.materials[materialName]
-  }
-
-  createMaterial_(materialName) {
-    // Create material
-
-    const scope = this
-    const mat = this.materialsInfo[materialName]
-    const params = {
-      name: materialName,
-      side: this.side
-    }
-
-    /**
-     * Override for ComfyUI api url
-     */
-    function resolveURL(baseUrl, url, loadRootFolder, subfolder) {
-      if (typeof url !== 'string' || url === '') return ''
-
-      if (baseUrl.endsWith('/')) {
-        baseUrl = baseUrl.slice(0, -1)
-      }
-
-      if (!baseUrl.endsWith('api')) {
-        baseUrl = '/api'
-      }
-
-      baseUrl =
-        baseUrl +
-        '/view?filename=' +
-        url +
-        '&type=' +
-        loadRootFolder +
-        '&subfolder=' +
-        subfolder
-
-      return baseUrl
-    }
-
-    function setMapForType(mapType, value) {
-      if (params[mapType]) return // Keep the first encountered texture
-
-      const texParams = scope.getTextureParams(value, params)
-      const map = scope.loadTexture(
-        resolveURL(
-          scope.baseUrl,
-          texParams.url,
-          scope.loadRootFolder,
-          scope.subfolder
-        )
-      )
-
-      map.repeat.copy(texParams.scale)
-      map.offset.copy(texParams.offset)
-
-      map.wrapS = scope.wrap
-      map.wrapT = scope.wrap
-
-      if (mapType === 'map' || mapType === 'emissiveMap') {
-        map.colorSpace = SRGBColorSpace
-      }
-
-      params[mapType] = map
-    }
-
-    for (const prop in mat) {
-      const value = mat[prop]
-      let n
-
-      if (value === '') continue
-
-      switch (prop.toLowerCase()) {
-        // Ns is material specular exponent
-
-        case 'kd':
-          // Diffuse color (color under white light) using RGB values
-
-          params.color = ColorManagement.toWorkingColorSpace(
-            new Color().fromArray(value),
-            SRGBColorSpace
-          )
-
-          break
-
-        case 'ks':
-          // Specular color (color when light is reflected from shiny surface) using RGB values
-          params.specular = ColorManagement.toWorkingColorSpace(
-            new Color().fromArray(value),
-            SRGBColorSpace
-          )
-
-          break
-
-        case 'ke':
-          // Emissive using RGB values
-          params.emissive = ColorManagement.toWorkingColorSpace(
-            new Color().fromArray(value),
-            SRGBColorSpace
-          )
-
-          break
-
-        case 'map_kd':
-          // Diffuse texture map
-
-          setMapForType('map', value)
-
-          break
-
-        case 'map_ks':
-          // Specular map
-
-          setMapForType('specularMap', value)
-
-          break
-
-        case 'map_ke':
-          // Emissive map
-
-          setMapForType('emissiveMap', value)
-
-          break
-
-        case 'norm':
-          setMapForType('normalMap', value)
-
-          break
-
-        case 'map_bump':
-        case 'bump':
-          // Bump texture map
-
-          setMapForType('bumpMap', value)
-
-          break
-
-        case 'disp':
-          // Displacement texture map
-
-          setMapForType('displacementMap', value)
-
-          break
-
-        case 'map_d':
-          // Alpha map
-
-          setMapForType('alphaMap', value)
-          params.transparent = true
-
-          break
-
-        case 'ns':
-          // The specular exponent (defines the focus of the specular highlight)
-          // A high exponent results in a tight, concentrated highlight. Ns values normally range from 0 to 1000.
-
-          params.shininess = parseFloat(value)
-
-          break
-
-        case 'd':
-          n = parseFloat(value)
-
-          if (n < 1) {
-            params.opacity = n
-            params.transparent = true
-          }
-
-          break
-
-        case 'tr':
-          n = parseFloat(value)
-
-          if (this.options && this.options.invertTrProperty) n = 1 - n
-
-          if (n > 0) {
-            params.opacity = 1 - n
-            params.transparent = true
-          }
-
-          break
-
-        default:
-          break
-      }
-    }
-
-    this.materials[materialName] = new MeshPhongMaterial(params)
-    return this.materials[materialName]
-  }
-
-  getTextureParams(value, matParams) {
-    const texParams = {
-      scale: new Vector2(1, 1),
-      offset: new Vector2(0, 0)
-    }
-
-    const items = value.split(/\s+/)
-    let pos
-
-    pos = items.indexOf('-bm')
-
-    if (pos >= 0) {
-      matParams.bumpScale = parseFloat(items[pos + 1])
-      items.splice(pos, 2)
-    }
-
-    pos = items.indexOf('-mm')
-
-    if (pos >= 0) {
-      matParams.displacementBias = parseFloat(items[pos + 1])
-      matParams.displacementScale = parseFloat(items[pos + 2])
-      items.splice(pos, 3)
-    }
-
-    pos = items.indexOf('-s')
-
-    if (pos >= 0) {
-      texParams.scale.set(
-        parseFloat(items[pos + 1]),
-        parseFloat(items[pos + 2])
-      )
-      items.splice(pos, 4) // we expect 3 parameters here!
-    }
-
-    pos = items.indexOf('-o')
-
-    if (pos >= 0) {
-      texParams.offset.set(
-        parseFloat(items[pos + 1]),
-        parseFloat(items[pos + 2])
-      )
-      items.splice(pos, 4) // we expect 3 parameters here!
-    }
-
-    texParams.url = items.join(' ').trim()
-    return texParams
-  }
-
-  loadTexture(url, mapping, onLoad, onProgress, onError) {
-    const manager =
-      this.manager !== undefined ? this.manager : DefaultLoadingManager
-    let loader = manager.getHandler(url)
-
-    if (loader === null) {
-      loader = new TextureLoader(manager)
-    }
-
-    if (loader.setCrossOrigin) loader.setCrossOrigin(this.crossOrigin)
-
-    const texture = loader.load(url, onLoad, onProgress, onError)
-
-    if (mapping !== undefined) texture.mapping = mapping
-
-    return texture
-  }
-}
-
-export { OverrideMTLLoader }

src/extensions/core/maskeditor.ts

@@ -4854,7 +4854,7 @@ class KeyboardManager {
   private maskEditor: MaskEditorDialog
   private messageBroker: MessageBroker
 
-  // Binded functions, for use in addListeners and removeListeners
+  // Bound functions, for use in addListeners and removeListeners
   private handleKeyDownBound = this.handleKeyDown.bind(this)
   private handleKeyUpBound = this.handleKeyUp.bind(this)
   private clearKeysBound = this.clearKeys.bind(this)

src/extensions/core/widgetInputs.ts

@@ -6,7 +6,7 @@ import type {
   LLink,
   Vector2
 } from '@comfyorg/litegraph'
-import type { CanvasMouseEvent } from '@comfyorg/litegraph/dist/types/events'
+import type { CanvasPointerEvent } from '@comfyorg/litegraph/dist/types/events'
 import type { IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
 import {
@@ -78,7 +78,7 @@ export class PrimitiveNode extends LGraphNode {
         app.canvas,
         node,
         app.canvas.graph_mouse,
-        {} as CanvasMouseEvent
+        {} as CanvasPointerEvent
       )
     }
   }

src/locales/en/commands.json

@@ -113,6 +113,9 @@
   "Comfy_Feedback": {
     "label": "Give Feedback"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Convert Selection to Subgraph"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Fit Group To Contents"
   },

src/locales/en/main.json

@@ -32,6 +32,13 @@
     "error": "Error",
     "help": "Help",
     "loading": "Loading",
+    "loadingPanel": "Loading {panel} panel...",
+    "preview": "PREVIEW",
+    "addNodeFilterCondition": "Add node filter condition",
+    "architecture": "Architecture",
+    "author": "Author",
+    "usageHint": "Usage hint",
+    "triggerPhrase": "Trigger phrase",
     "findIssues": "Find Issues",
     "reportIssue": "Send Report",
     "reportIssueTooltip": "Submit the error report to Comfy Org",
@@ -123,7 +130,10 @@
     "copy": "Copy",
     "imageUrl": "Image URL",
     "clear": "Clear",
-    "copyURL": "Copy URL"
+    "copyURL": "Copy URL",
+    "releaseTitle": "{package} {version} Release",
+    "progressCountOf": "of",
+    "keybindingAlreadyExists": "Keybinding already exists on"
   },
   "manager": {
     "title": "Custom Nodes Manager",
@@ -186,7 +196,7 @@
   "issueReport": {
     "submitErrorReport": "Submit Error Report (Optional)",
     "provideEmail": "Give us your email (optional)",
-    "provideAdditionalDetails": "Provide additional details (optional)",
+    "provideAdditionalDetails": "Provide additional details",
     "stackTrace": "Stack Trace",
     "systemStats": "System Stats",
     "contactFollowUp": "Contact me for follow up",
@@ -410,6 +420,7 @@
   },
   "sideToolbar": {
     "themeToggle": "Toggle Theme",
+    "helpCenter": "Help Center",
     "logout": "Logout",
     "queue": "Queue",
     "nodeLibrary": "Node Library",
@@ -468,6 +479,26 @@
       }
     }
   },
+  "helpCenter": {
+    "docs": "Docs",
+    "github": "Github",
+    "helpFeedback": "Help & Feedback",
+    "more": "More...",
+    "whatsNew": "What's New?",
+    "clickToLearnMore": "Click to learn more →",
+    "loadingReleases": "Loading releases...",
+    "noRecentReleases": "No recent releases",
+    "updateAvailable": "Update",
+    "desktopUserGuide": "Desktop User Guide",
+    "openDevTools": "Open Dev Tools",
+    "reinstall": "Re-Install"
+  },
+  "releaseToast": {
+    "newVersionAvailable": "New Version Available!",
+    "whatsNew": "What's New?",
+    "skip": "Skip",
+    "update": "Update"
+  },
   "menu": {
     "hideMenu": "Hide Menu",
     "showMenu": "Show Menu",
@@ -818,6 +849,7 @@
     "Export": "Export",
     "Export (API)": "Export (API)",
     "Give Feedback": "Give Feedback",
+    "Convert Selection to Subgraph": "Convert Selection to Subgraph",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
     "Convert selected nodes to group node": "Convert selected nodes to group node",
@@ -917,7 +949,8 @@
     "Light": "Light",
     "User": "User",
     "Credits": "Credits",
-    "API Nodes": "API Nodes"
+    "API Nodes": "API Nodes",
+    "Notification Preferences": "Notification Preferences"
   },
   "serverConfigItems": {
     "listen": {
@@ -1303,7 +1336,9 @@
     "failedToPurchaseCredits": "Failed to purchase credits: {error}",
     "unauthorizedDomain": "Your domain {domain} is not authorized to use this service. Please contact {email} to add your domain to the whitelist.",
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
-    "nothingSelected": "Nothing selected"
+    "nothingSelected": "Nothing selected",
+    "cannotCreateSubgraph": "Cannot create subgraph",
+    "failedToConvertToSubgraph": "Failed to convert items to subgraph"
   },
   "auth": {
     "apiKey": {
@@ -1398,6 +1433,7 @@
     "personalDataConsentRequired": "You must agree to the processing of your personal data."
   },
   "credits": {
+    "activity": "Activity",
     "credits": "Credits",
     "yourCreditBalance": "Your credit balance",
     "purchaseCredits": "Purchase Credits",
@@ -1414,7 +1450,14 @@
       "buyNow": "Buy now",
       "seeDetails": "See details",
       "topUp": "Top Up"
-    }
+    },
+    "eventType": "Event Type",
+    "details": "Details",
+    "time": "Time",
+    "additionalInfo": "Additional Info",
+    "model": "Model",
+    "added": "Added",
+    "accountInitialized": "Account initialized"
   },
   "userSettings": {
     "title": "User Settings",
@@ -1444,5 +1487,9 @@
     "moreHelp": "For more help, visit the",
     "documentationPage": "documentation page",
     "loadError": "Failed to load help: {error}"
+  },
+  "whatsNewPopup": {
+    "learnMore": "Learn more",
+    "noReleaseNotes": "No release notes available."
   }
 }

src/locales/en/settings.json

@@ -259,6 +259,10 @@
     "name": "Number of nodes suggestions",
     "tooltip": "Only for litegraph searchbox/context menu"
   },
+  "Comfy_Notification_ShowVersionUpdates": {
+    "name": "Show version updates",
+    "tooltip": "Show updates for new models, and major new features."
+  },
   "Comfy_Pointer_ClickBufferTime": {
     "name": "Pointer click drift delay",
     "tooltip": "After pressing a pointer button down, this is the maximum time (in milliseconds) that pointer movement can be ignored for.\n\nHelps prevent objects from being unintentionally nudged if the pointer is moved whilst clicking."

src/locales/es/commands.json

@@ -113,6 +113,9 @@
   "Comfy_Feedback": {
     "label": "Dar retroalimentación"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Convertir selección en subgrafo"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajustar grupo al contenido"
   },

src/locales/es/main.json

@@ -138,13 +138,21 @@
     "Unpin": "Desanclar"
   },
   "credits": {
+    "accountInitialized": "Cuenta inicializada",
+    "activity": "Actividad",
+    "added": "Añadido",
+    "additionalInfo": "Información adicional",
     "apiPricing": "Precios de la API",
     "credits": "Créditos",
+    "details": "Detalles",
+    "eventType": "Tipo de evento",
     "faqs": "Preguntas frecuentes",
     "invoiceHistory": "Historial de facturas",
     "lastUpdated": "Última actualización",
     "messageSupport": "Contactar soporte",
+    "model": "Modelo",
     "purchaseCredits": "Comprar créditos",
+    "time": "Hora",
     "topUp": {
       "buyNow": "Comprar ahora",
       "insufficientMessage": "No tienes suficientes créditos para ejecutar este flujo de trabajo.",
@@ -245,10 +253,13 @@
   "g": {
     "about": "Acerca de",
     "add": "Añadir",
+    "addNodeFilterCondition": "Agregar condición de filtro de nodo",
     "all": "Todo",
     "amount": "Cantidad",
     "apply": "Aplicar",
+    "architecture": "Arquitectura",
     "audioFailedToLoad": "No se pudo cargar el audio",
+    "author": "Autor",
     "back": "Atrás",
     "cancel": "Cancelar",
     "capture": "captura",
@@ -306,10 +317,12 @@
     "installing": "Instalando",
     "interrupted": "Interrumpido",
     "keybinding": "Combinación de teclas",
+    "keybindingAlreadyExists": "La combinación de teclas ya existe en",
     "learnMore": "Aprende más",
     "loadAllFolders": "Cargar todas las carpetas",
     "loadWorkflow": "Cargar flujo de trabajo",
     "loading": "Cargando",
+    "loadingPanel": "Cargando panel {panel}...",
     "login": "Iniciar sesión",
     "logs": "Registros",
     "migrate": "Migrar",
@@ -326,9 +339,12 @@
     "ok": "OK",
     "openNewIssue": "Abrir nuevo problema",
     "overwrite": "Sobrescribir",
+    "preview": "VISTA PREVIA",
+    "progressCountOf": "de",
     "reconnected": "Reconectado",
     "reconnecting": "Reconectando",
     "refresh": "Actualizar",
+    "releaseTitle": "Lanzamiento de {package} {version}",
     "reloadToApplyChanges": "Recargar para aplicar cambios",
     "rename": "Renombrar",
     "reportIssue": "Enviar informe",
@@ -358,12 +374,14 @@
     "systemInfo": "Información del sistema",
     "terminal": "Terminal",
     "title": "Título",
+    "triggerPhrase": "Frase de activación",
     "unknownError": "Error desconocido",
     "update": "Actualizar",
     "updateAvailable": "Actualización Disponible",
     "updated": "Actualizado",
     "updating": "Actualizando",
     "upload": "Subir",
+    "usageHint": "Sugerencia de uso",
     "user": "Usuario",
     "videoFailedToLoad": "Falló la carga del video",
     "workflow": "Flujo de trabajo"
@@ -381,6 +399,20 @@
     "create": "Crear nodo de grupo",
     "enterName": "Introduzca el nombre"
   },
+  "helpCenter": {
+    "clickToLearnMore": "Haz clic para saber más →",
+    "desktopUserGuide": "Guía de usuario de escritorio",
+    "docs": "Documentación",
+    "github": "Github",
+    "helpFeedback": "Ayuda y comentarios",
+    "loadingReleases": "Cargando versiones...",
+    "more": "Más...",
+    "noRecentReleases": "No hay versiones recientes",
+    "openDevTools": "Abrir herramientas de desarrollo",
+    "reinstall": "Reinstalar",
+    "updateAvailable": "Actualizar",
+    "whatsNew": "¿Qué hay de nuevo?"
+  },
   "icon": {
     "bookmark": "Marcador",
     "box": "Caja",
@@ -700,6 +732,7 @@
     "ComfyUI Forum": "Foro de ComfyUI",
     "ComfyUI Issues": "Problemas de ComfyUI",
     "Contact Support": "Contactar soporte",
+    "Convert Selection to Subgraph": "Convertir selección en subgrafo",
     "Convert selected nodes to group node": "Convertir nodos seleccionados en nodo de grupo",
     "Delete Selected Items": "Eliminar elementos seleccionados",
     "Desktop User Guide": "Guía de usuario de escritorio",
@@ -752,13 +785,13 @@
     "Toggle Bottom Panel": "Alternar panel inferior",
     "Toggle Focus Mode": "Alternar modo de enfoque",
     "Toggle Logs Bottom Panel": "Alternar panel inferior de registros",
-    "Toggle Model Library Sidebar": "Alternar barra lateral de biblioteca de modelos",
-    "Toggle Node Library Sidebar": "Alternar barra lateral de biblioteca de nodos",
-    "Toggle Queue Sidebar": "Alternar barra lateral de cola",
+    "Toggle Model Library Sidebar": "Alternar barra lateral de la biblioteca de modelos",
+    "Toggle Node Library Sidebar": "Alternar barra lateral de la biblioteca de nodos",
+    "Toggle Queue Sidebar": "Alternar barra lateral de la cola",
     "Toggle Search Box": "Alternar caja de búsqueda",
     "Toggle Terminal Bottom Panel": "Alternar panel inferior de terminal",
     "Toggle Theme (Dark/Light)": "Alternar tema (Oscuro/Claro)",
-    "Toggle Workflows Sidebar": "Alternar barra lateral de flujos de trabajo",
+    "Toggle Workflows Sidebar": "Alternar barra lateral de los flujos de trabajo",
     "Toggle the Custom Nodes Manager": "Alternar el Administrador de Nodos Personalizados",
     "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
@@ -872,6 +905,12 @@
     },
     "title": "Tu dispositivo no es compatible"
   },
+  "releaseToast": {
+    "newVersionAvailable": "¡Nueva versión disponible!",
+    "skip": "Omitir",
+    "update": "Actualizar",
+    "whatsNew": "¿Qué hay de nuevo?"
+  },
   "selectionToolbox": {
     "executeButton": {
       "disabledTooltip": "No hay nodos de salida seleccionados",
@@ -1060,6 +1099,7 @@
     "Node Search Box": "Caja de Búsqueda de Nodo",
     "Node Widget": "Widget de Nodo",
     "NodeLibrary": "Biblioteca de Nodos",
+    "Notification Preferences": "Preferencias de notificación",
     "Pointer": "Puntero",
     "Queue": "Cola",
     "QueueButton": "Botón de Cola",
@@ -1080,6 +1120,7 @@
   "sideToolbar": {
     "browseTemplates": "Explorar plantillas de ejemplo",
     "downloads": "Descargas",
+    "helpCenter": "Centro de ayuda",
     "logout": "Cerrar sesión",
     "modelLibrary": "Biblioteca de modelos",
     "newBlankWorkflow": "Crear un nuevo flujo de trabajo en blanco",
@@ -1368,6 +1409,7 @@
     "title": "Comienza con una Plantilla"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "No se puede crear el subgrafo",
     "couldNotDetermineFileType": "No se pudo determinar el tipo de archivo",
     "dropFileError": "No se puede procesar el elemento soltado: {error}",
     "emptyCanvas": "Lienzo vacío",
@@ -1376,6 +1418,7 @@
     "errorSaveSetting": "Error al guardar la configuración {id}: {err}",
     "failedToAccessBillingPortal": "No se pudo acceder al portal de facturación: {error}",
     "failedToApplyTexture": "Error al aplicar textura",
+    "failedToConvertToSubgraph": "No se pudo convertir los elementos en subgrafo",
     "failedToCreateCustomer": "No se pudo crear el cliente: {error}",
     "failedToDownloadFile": "Error al descargar el archivo",
     "failedToExportModel": "Error al exportar modelo como {format}",
@@ -1440,6 +1483,10 @@
     "getStarted": "Empezar",
     "title": "Bienvenido a ComfyUI"
   },
+  "whatsNewPopup": {
+    "learnMore": "Aprende más",
+    "noReleaseNotes": "No hay notas de la versión disponibles."
+  },
   "workflowService": {
     "enterFilename": "Introduzca el nombre del archivo",
     "exportWorkflow": "Exportar flujo de trabajo",

src/locales/es/settings.json

@@ -259,6 +259,10 @@
     "name": "Destacar nodo de ajuste",
     "tooltip": "Al arrastrar un enlace sobre un nodo con ranura de entrada viable, resalta el nodo"
   },
+  "Comfy_Notification_ShowVersionUpdates": {
+    "name": "Mostrar actualizaciones de versión",
+    "tooltip": "Mostrar actualizaciones para nuevos modelos y funciones principales nuevas."
+  },
   "Comfy_Pointer_ClickBufferTime": {
     "name": "Retraso de deriva del clic del puntero",
     "tooltip": "Después de presionar un botón del puntero, este es el tiempo máximo (en milisegundos) que se puede ignorar el movimiento del puntero.\n\nAyuda a prevenir que los objetos sean movidos involuntariamente si el puntero se mueve al hacer clic."

src/locales/fr/commands.json

@@ -113,6 +113,9 @@
   "Comfy_Feedback": {
     "label": "Retour d'information"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Convertir la sélection en sous-graphe"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajuster le groupe au contenu"
   },

src/locales/fr/main.json

@@ -138,13 +138,21 @@
     "Unpin": "Désépingler"
   },
   "credits": {
+    "accountInitialized": "Compte initialisé",
+    "activity": "Activité",
+    "added": "Ajouté",
+    "additionalInfo": "Informations supplémentaires",
     "apiPricing": "Tarification de l’API",
     "credits": "Crédits",
+    "details": "Détails",
+    "eventType": "Type d'événement",
     "faqs": "FAQ",
     "invoiceHistory": "Historique des factures",
     "lastUpdated": "Dernière mise à jour",
     "messageSupport": "Contacter le support",
+    "model": "Modèle",
     "purchaseCredits": "Acheter des crédits",
+    "time": "Heure",
     "topUp": {
       "buyNow": "Acheter maintenant",
       "insufficientMessage": "Vous n'avez pas assez de crédits pour exécuter ce workflow.",
@@ -245,10 +253,13 @@
   "g": {
     "about": "À propos",
     "add": "Ajouter",
+    "addNodeFilterCondition": "Ajouter une condition de filtre de nœud",
     "all": "Tout",
     "amount": "Quantité",
     "apply": "Appliquer",
+    "architecture": "Architecture",
     "audioFailedToLoad": "Échec du chargement de l'audio",
+    "author": "Auteur",
     "back": "Retour",
     "cancel": "Annuler",
     "capture": "capture",
@@ -306,10 +317,12 @@
     "installing": "Installation",
     "interrupted": "Interrompu",
     "keybinding": "Raccourci clavier",
+    "keybindingAlreadyExists": "Le raccourci clavier existe déjà",
     "learnMore": "En savoir plus",
     "loadAllFolders": "Charger tous les dossiers",
     "loadWorkflow": "Charger le flux de travail",
     "loading": "Chargement",
+    "loadingPanel": "Chargement du panneau {panel}...",
     "login": "Connexion",
     "logs": "Journaux",
     "migrate": "Migrer",
@@ -326,9 +339,12 @@
     "ok": "OK",
     "openNewIssue": "Ouvrir un nouveau problème",
     "overwrite": "Écraser",
+    "preview": "APERÇU",
+    "progressCountOf": "sur",
     "reconnected": "Reconnecté",
     "reconnecting": "Reconnexion",
     "refresh": "Rafraîchir",
+    "releaseTitle": "Publication de {package} {version}",
     "reloadToApplyChanges": "Recharger pour appliquer les modifications",
     "rename": "Renommer",
     "reportIssue": "Envoyer le rapport",
@@ -358,12 +374,14 @@
     "systemInfo": "Informations système",
     "terminal": "Terminal",
     "title": "Titre",
+    "triggerPhrase": "Phrase déclencheuse",
     "unknownError": "Erreur inconnue",
     "update": "Mettre à jour",
     "updateAvailable": "Mise à jour disponible",
     "updated": "Mis à jour",
     "updating": "Mise à jour",
     "upload": "Téléverser",
+    "usageHint": "Conseil d'utilisation",
     "user": "Utilisateur",
     "videoFailedToLoad": "Échec du chargement de la vidéo",
     "workflow": "Flux de travail"
@@ -381,6 +399,20 @@
     "create": "Créer un nœud de groupe",
     "enterName": "Entrer le nom"
   },
+  "helpCenter": {
+    "clickToLearnMore": "Cliquez pour en savoir plus →",
+    "desktopUserGuide": "Guide utilisateur de bureau",
+    "docs": "Docs",
+    "github": "Github",
+    "helpFeedback": "Aide & Retour",
+    "loadingReleases": "Chargement des versions...",
+    "more": "Plus...",
+    "noRecentReleases": "Aucune version récente",
+    "openDevTools": "Ouvrir les outils de développement",
+    "reinstall": "Réinstaller",
+    "updateAvailable": "Mise à jour",
+    "whatsNew": "Quoi de neuf ?"
+  },
   "icon": {
     "bookmark": "Favori",
     "box": "Boîte",
@@ -700,6 +732,7 @@
     "ComfyUI Forum": "Forum ComfyUI",
     "ComfyUI Issues": "Problèmes de ComfyUI",
     "Contact Support": "Contacter le support",
+    "Convert Selection to Subgraph": "Convertir la sélection en sous-graphe",
     "Convert selected nodes to group node": "Convertir les nœuds sélectionnés en nœud de groupe",
     "Delete Selected Items": "Supprimer les éléments sélectionnés",
     "Desktop User Guide": "Guide de l'utilisateur de bureau",
@@ -752,13 +785,13 @@
     "Toggle Bottom Panel": "Basculer le panneau inférieur",
     "Toggle Focus Mode": "Basculer le mode focus",
     "Toggle Logs Bottom Panel": "Basculer le panneau inférieur des journaux",
-    "Toggle Model Library Sidebar": "Basculer la barre latérale de la bibliothèque de modèles",
-    "Toggle Node Library Sidebar": "Basculer la barre latérale de la bibliothèque de nœuds",
-    "Toggle Queue Sidebar": "Basculer la barre latérale de la file d'attente",
+    "Toggle Model Library Sidebar": "Afficher/Masquer la barre latérale de la bibliothèque de modèles",
+    "Toggle Node Library Sidebar": "Afficher/Masquer la barre latérale de la bibliothèque de nœuds",
+    "Toggle Queue Sidebar": "Afficher/Masquer la barre latérale de la file d’attente",
     "Toggle Search Box": "Basculer la boîte de recherche",
     "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
     "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
-    "Toggle Workflows Sidebar": "Basculer la barre latérale des flux de travail",
+    "Toggle Workflows Sidebar": "Afficher/Masquer la barre latérale des workflows",
     "Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
@@ -872,6 +905,12 @@
     },
     "title": "Votre appareil n'est pas pris en charge"
   },
+  "releaseToast": {
+    "newVersionAvailable": "Nouvelle version disponible !",
+    "skip": "Ignorer",
+    "update": "Mettre à jour",
+    "whatsNew": "Quoi de neuf ?"
+  },
   "selectionToolbox": {
     "executeButton": {
       "disabledTooltip": "Aucun nœud de sortie sélectionné",
@@ -1060,6 +1099,7 @@
     "Node Search Box": "Boîte de Recherche de Nœud",
     "Node Widget": "Widget de Nœud",
     "NodeLibrary": "Bibliothèque de Nœuds",
+    "Notification Preferences": "Préférences de notification",
     "Pointer": "Pointeur",
     "Queue": "File d'Attente",
     "QueueButton": "Bouton de File d'Attente",
@@ -1080,6 +1120,7 @@
   "sideToolbar": {
     "browseTemplates": "Parcourir les modèles d'exemple",
     "downloads": "Téléchargements",
+    "helpCenter": "Centre d'aide",
     "logout": "Déconnexion",
     "modelLibrary": "Bibliothèque de modèles",
     "newBlankWorkflow": "Créer un nouveau flux de travail vierge",
@@ -1368,6 +1409,7 @@
     "title": "Commencez avec un modèle"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "Impossible de créer le sous-graphe",
     "couldNotDetermineFileType": "Impossible de déterminer le type de fichier",
     "dropFileError": "Impossible de traiter l'élément déposé : {error}",
     "emptyCanvas": "Toile vide",
@@ -1376,6 +1418,7 @@
     "errorSaveSetting": "Erreur lors de l'enregistrement du paramètre {id}: {err}",
     "failedToAccessBillingPortal": "Échec de l'accès au portail de facturation : {error}",
     "failedToApplyTexture": "Échec de l'application de la texture",
+    "failedToConvertToSubgraph": "Échec de la conversion des éléments en sous-graphe",
     "failedToCreateCustomer": "Échec de la création du client : {error}",
     "failedToDownloadFile": "Échec du téléchargement du fichier",
     "failedToExportModel": "Échec de l'exportation du modèle en {format}",
@@ -1440,6 +1483,10 @@
     "getStarted": "Commencer",
     "title": "Bienvenue sur ComfyUI"
   },
+  "whatsNewPopup": {
+    "learnMore": "En savoir plus",
+    "noReleaseNotes": "Aucune note de version disponible."
+  },
   "workflowService": {
     "enterFilename": "Entrez le nom du fichier",
     "exportWorkflow": "Exporter le flux de travail",

src/locales/fr/settings.json

@@ -259,6 +259,10 @@
     "name": "Le snap met en évidence le nœud",
     "tooltip": "Lorsque vous faites glisser un lien sur un nœud avec une fente d'entrée viable, mettez en évidence le nœud"
   },
+  "Comfy_Notification_ShowVersionUpdates": {
+    "name": "Afficher les mises à jour de version",
+    "tooltip": "Afficher les mises à jour pour les nouveaux modèles et les nouvelles fonctionnalités majeures."
+  },
   "Comfy_Pointer_ClickBufferTime": {
     "name": "Délai de dérive du clic du pointeur",
     "tooltip": "Après avoir appuyé sur un bouton de pointeur, c'est le temps maximum (en millisecondes) que le mouvement du pointeur peut être ignoré.\n\nAide à prévenir que les objets soient déplacés involontairement si le pointeur est déplacé lors du clic."

src/locales/ja/commands.json

@@ -113,6 +113,9 @@
   "Comfy_Feedback": {
     "label": "フィードバック"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "選択範囲をサブグラフに変換"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "グループを内容に合わせて調整"
   },

src/locales/ja/main.json

@@ -138,13 +138,21 @@
     "Unpin": "ピンを解除"
   },
   "credits": {
+    "accountInitialized": "アカウントが初期化されました",
+    "activity": "アクティビティ",
+    "added": "追加済み",
+    "additionalInfo": "追加情報",
     "apiPricing": "API料金",
     "credits": "クレジット",
+    "details": "詳細",
+    "eventType": "イベントタイプ",
     "faqs": "よくある質問",
     "invoiceHistory": "請求履歴",
     "lastUpdated": "最終更新",
     "messageSupport": "サポートにメッセージ",
+    "model": "モデル",
     "purchaseCredits": "クレジットを購入",
+    "time": "時間",
     "topUp": {
       "buyNow": "今すぐ購入",
       "insufficientMessage": "このワークフローを実行するのに十分なクレジットがありません。",
@@ -245,10 +253,13 @@
   "g": {
     "about": "情報",
     "add": "追加",
+    "addNodeFilterCondition": "ノードフィルター条件を追加",
     "all": "すべて",
     "amount": "量",
     "apply": "適用する",
+    "architecture": "アーキテクチャ",
     "audioFailedToLoad": "オーディオの読み込みに失敗しました",
+    "author": "作者",
     "back": "戻る",
     "cancel": "キャンセル",
     "capture": "キャプチャ",
@@ -306,10 +317,12 @@
     "installing": "インストール中",
     "interrupted": "中断されました",
     "keybinding": "キーバインディング",
+    "keybindingAlreadyExists": "このキー割り当てはすでに存在します",
     "learnMore": "詳細を学ぶ",
     "loadAllFolders": "すべてのフォルダーを読み込む",
     "loadWorkflow": "ワークフローを読み込む",
     "loading": "読み込み中",
+    "loadingPanel": "{panel} パネルを読み込み中...",
     "login": "ログイン",
     "logs": "ログ",
     "migrate": "移行する",
@@ -326,9 +339,12 @@
     "ok": "OK",
     "openNewIssue": "新しい問題を開く",
     "overwrite": "上書き",
+    "preview": "プレビュー",
+    "progressCountOf": "の",
     "reconnected": "再接続されました",
     "reconnecting": "再接続中",
     "refresh": "更新",
+    "releaseTitle": "{package} {version} リリース",
     "reloadToApplyChanges": "変更を適用するには再読み込みしてください",
     "rename": "名前を変更",
     "reportIssue": "報告する",
@@ -358,12 +374,14 @@
     "systemInfo": "システム情報",
     "terminal": "ターミナル",
     "title": "タイトル",
+    "triggerPhrase": "トリガーフレーズ",
     "unknownError": "不明なエラー",
     "update": "更新",
     "updateAvailable": "更新が利用可能",
     "updated": "更新済み",
     "updating": "更新中",
     "upload": "アップロード",
+    "usageHint": "使用ヒント",
     "user": "ユーザー",
     "videoFailedToLoad": "ビデオの読み込みに失敗しました",
     "workflow": "ワークフロー"
@@ -381,6 +399,20 @@
     "create": "グループノードを作成",
     "enterName": "名前を入力"
   },
+  "helpCenter": {
+    "clickToLearnMore": "詳しくはこちらをクリック →",
+    "desktopUserGuide": "デスクトップユーザーガイド",
+    "docs": "ドキュメント",
+    "github": "Github",
+    "helpFeedback": "ヘルプとフィードバック",
+    "loadingReleases": "リリースを読み込み中...",
+    "more": "もっと見る...",
+    "noRecentReleases": "最近のリリースはありません",
+    "openDevTools": "開発者ツールを開く",
+    "reinstall": "再インストール",
+    "updateAvailable": "アップデート",
+    "whatsNew": "新着情報"
+  },
   "icon": {
     "bookmark": "ブックマーク",
     "box": "ボックス",
@@ -700,6 +732,7 @@
     "ComfyUI Forum": "ComfyUI フォーラム",
     "ComfyUI Issues": "ComfyUIの問題",
     "Contact Support": "サポートに連絡",
+    "Convert Selection to Subgraph": "選択範囲をサブグラフに変換",
     "Convert selected nodes to group node": "選択したノードをグループノードに変換",
     "Delete Selected Items": "選択したアイテムを削除",
     "Desktop User Guide": "デスクトップユーザーガイド",
@@ -872,6 +905,12 @@
     },
     "title": "お使いのデバイスはサポートされていません"
   },
+  "releaseToast": {
+    "newVersionAvailable": "新しいバージョンが利用可能です！",
+    "skip": "スキップ",
+    "update": "アップデート",
+    "whatsNew": "新機能"
+  },
   "selectionToolbox": {
     "executeButton": {
       "disabledTooltip": "出力ノードが選択されていません",
@@ -1060,6 +1099,7 @@
     "Node Search Box": "ノード検索ボックス",
     "Node Widget": "ノードウィジェット",
     "NodeLibrary": "ノードライブラリ",
+    "Notification Preferences": "通知設定",
     "Pointer": "ポインタ",
     "Queue": "キュー",
     "QueueButton": "キューボタン",
@@ -1080,6 +1120,7 @@
   "sideToolbar": {
     "browseTemplates": "サンプルテンプレートを表示",
     "downloads": "ダウンロード",
+    "helpCenter": "ヘルプセンター",
     "logout": "ログアウト",
     "modelLibrary": "モデルライブラリ",
     "newBlankWorkflow": "新しい空のワークフローを作成",
@@ -1368,6 +1409,7 @@
     "title": "テンプレートを利用して開始"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "サブグラフを作成できません",
     "couldNotDetermineFileType": "ファイルタイプを判断できませんでした",
     "dropFileError": "ドロップされたアイテムを処理できません: {error}",
     "emptyCanvas": "キャンバスが空です",
@@ -1376,6 +1418,7 @@
     "errorSaveSetting": "設定{id}の保存エラー: {err}",
     "failedToAccessBillingPortal": "請求ポータルへのアクセスに失敗しました: {error}",
     "failedToApplyTexture": "テクスチャの適用に失敗しました",
+    "failedToConvertToSubgraph": "アイテムをサブグラフに変換できませんでした",
     "failedToCreateCustomer": "顧客の作成に失敗しました: {error}",
     "failedToDownloadFile": "ファイルのダウンロードに失敗しました",
     "failedToExportModel": "{format}としてモデルのエクスポートに失敗しました",
@@ -1440,6 +1483,10 @@
     "getStarted": "はじめる",
     "title": "ComfyUIへようこそ"
   },
+  "whatsNewPopup": {
+    "learnMore": "詳細はこちら",
+    "noReleaseNotes": "リリースノートはありません。"
+  },
   "workflowService": {
     "enterFilename": "ファイル名を入力",
     "exportWorkflow": "ワークフローをエクスポート",

src/locales/ja/settings.json

@@ -259,6 +259,10 @@
     "name": "スナップハイライトノード",
     "tooltip": "有効な入力スロットを持つノードの上にリンクをドラッグすると、ノードがハイライトされます"
   },
+  "Comfy_Notification_ShowVersionUpdates": {
+    "name": "バージョン更新を表示",
+    "tooltip": "新しいモデルや主要な新機能のアップデートを表示します。"
+  },
   "Comfy_Pointer_ClickBufferTime": {
     "name": "ポインタークリックドリフト遅延",
     "tooltip": "ポインターボタンを押した後、ポインタの動きが無視される最大時間（ミリ秒単位）です。\n\nクリック中にポインタが移動した場合、オブジェクトが意図せず動かされるのを防ぎます。"

src/locales/ko/commands.json

@@ -113,6 +113,9 @@
   "Comfy_Feedback": {
     "label": "피드백"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "선택 영역을 서브그래프로 변환"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "그룹을 내용에 맞게 맞추기"
   },

src/locales/ko/main.json

@@ -138,13 +138,21 @@
     "Unpin": "고정 해제"
   },
   "credits": {
+    "accountInitialized": "계정이 초기화됨",
+    "activity": "활동",
+    "added": "추가됨",
+    "additionalInfo": "추가 정보",
     "apiPricing": "API 가격",
     "credits": "크레딧",
+    "details": "세부 정보",
+    "eventType": "이벤트 유형",
     "faqs": "자주 묻는 질문",
     "invoiceHistory": "청구서 내역",
     "lastUpdated": "마지막 업데이트",
     "messageSupport": "지원 문의",
+    "model": "모델",
     "purchaseCredits": "크레딧 구매",
+    "time": "시간",
     "topUp": {
       "buyNow": "지금 구매",
       "insufficientMessage": "이 워크플로우를 실행하기에 크레딧이 부족합니다.",
@@ -245,10 +253,13 @@
   "g": {
     "about": "정보",
     "add": "추가",
+    "addNodeFilterCondition": "노드 필터 조건 추가",
     "all": "모두",
     "amount": "수량",
     "apply": "적용",
+    "architecture": "아키텍처",
     "audioFailedToLoad": "오디오를 불러오지 못했습니다",
+    "author": "작성자",
     "back": "뒤로",
     "cancel": "취소",
     "capture": "캡처",
@@ -306,10 +317,12 @@
     "installing": "설치 중",
     "interrupted": "중단됨",
     "keybinding": "키 바인딩",
+    "keybindingAlreadyExists": "단축키가 이미 존재합니다",
     "learnMore": "더 알아보기",
     "loadAllFolders": "모든 폴더 로드",
     "loadWorkflow": "워크플로 로드",
     "loading": "로딩 중",
+    "loadingPanel": "{panel} 패널 불러오는 중...",
     "login": "로그인",
     "logs": "로그",
     "migrate": "이전(migrate)",
@@ -326,9 +339,12 @@
     "ok": "확인",
     "openNewIssue": "새 문제 열기",
     "overwrite": "덮어쓰기",
+    "preview": "미리보기",
+    "progressCountOf": "중",
     "reconnected": "재연결됨",
     "reconnecting": "재연결 중",
     "refresh": "새로 고침",
+    "releaseTitle": "{package} {version} 릴리스",
     "reloadToApplyChanges": "변경 사항을 적용하려면 새로 고침하세요.",
     "rename": "이름 바꾸기",
     "reportIssue": "보고서 보내기",
@@ -358,12 +374,14 @@
     "systemInfo": "시스템 정보",
     "terminal": "터미널",
     "title": "제목",
+    "triggerPhrase": "트리거 문구",
     "unknownError": "알 수 없는 오류",
     "update": "업데이트",
     "updateAvailable": "업데이트 가능",
     "updated": "업데이트 됨",
     "updating": "업데이트 중",
     "upload": "업로드",
+    "usageHint": "사용 힌트",
     "user": "사용자",
     "videoFailedToLoad": "비디오를 로드하지 못했습니다.",
     "workflow": "워크플로"
@@ -381,6 +399,20 @@
     "create": "그룹 노드 만들기",
     "enterName": "이름 입력"
   },
+  "helpCenter": {
+    "clickToLearnMore": "자세히 알아보기 →",
+    "desktopUserGuide": "데스크톱 사용자 가이드",
+    "docs": "문서",
+    "github": "Github",
+    "helpFeedback": "도움말 및 피드백",
+    "loadingReleases": "릴리즈 불러오는 중...",
+    "more": "더보기...",
+    "noRecentReleases": "최근 릴리즈 없음",
+    "openDevTools": "개발자 도구 열기",
+    "reinstall": "재설치",
+    "updateAvailable": "업데이트",
+    "whatsNew": "새로운 소식?"
+  },
   "icon": {
     "bookmark": "북마크",
     "box": "상자",
@@ -700,6 +732,7 @@
     "ComfyUI Forum": "ComfyUI 포럼",
     "ComfyUI Issues": "ComfyUI 이슈 페이지",
     "Contact Support": "고객 지원 문의",
+    "Convert Selection to Subgraph": "선택 영역을 서브그래프로 변환",
     "Convert selected nodes to group node": "선택한 노드를 그룹 노드로 변환",
     "Delete Selected Items": "선택한 항목 삭제",
     "Desktop User Guide": "데스크톱 사용자 가이드",
@@ -754,11 +787,11 @@
     "Toggle Logs Bottom Panel": "로그 하단 패널 전환",
     "Toggle Model Library Sidebar": "모델 라이브러리 사이드바 전환",
     "Toggle Node Library Sidebar": "노드 라이브러리 사이드바 전환",
-    "Toggle Queue Sidebar": "실행 대기열 사이드바 전환",
+    "Toggle Queue Sidebar": "대기열 사이드바 전환",
     "Toggle Search Box": "검색 상자 전환",
     "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
     "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
-    "Toggle Workflows Sidebar": "워크플로 사이드바 전환",
+    "Toggle Workflows Sidebar": "워크플로우 사이드바 전환",
     "Toggle the Custom Nodes Manager": "커스텀 노드 매니저 전환",
     "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
@@ -872,6 +905,12 @@
     },
     "title": "이 장치는 지원되지 않습니다."
   },
+  "releaseToast": {
+    "newVersionAvailable": "새 버전이 있습니다!",
+    "skip": "건너뛰기",
+    "update": "업데이트",
+    "whatsNew": "새로운 기능 보기"
+  },
   "selectionToolbox": {
     "executeButton": {
       "disabledTooltip": "선택된 출력 노드가 없습니다",
@@ -1060,6 +1099,7 @@
     "Node Search Box": "노드 검색 상자",
     "Node Widget": "노드 위젯",
     "NodeLibrary": "노드 라이브러리",
+    "Notification Preferences": "알림 환경설정",
     "Pointer": "포인터",
     "Queue": "실행 대기열",
     "QueueButton": "실행 대기열 버튼",
@@ -1080,6 +1120,7 @@
   "sideToolbar": {
     "browseTemplates": "예제 템플릿 탐색",
     "downloads": "다운로드",
+    "helpCenter": "도움말 센터",
     "logout": "로그아웃",
     "modelLibrary": "모델 라이브러리",
     "newBlankWorkflow": "새 빈 워크플로 만들기",
@@ -1368,6 +1409,7 @@
     "title": "템플릿으로 시작하기"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "서브그래프를 생성할 수 없습니다",
     "couldNotDetermineFileType": "파일 유형을 결정할 수 없습니다",
     "dropFileError": "드롭된 항목을 처리할 수 없습니다: {error}",
     "emptyCanvas": "빈 캔버스",
@@ -1376,6 +1418,7 @@
     "errorSaveSetting": "설정 {id} 저장 오류: {err}",
     "failedToAccessBillingPortal": "결제 포털에 접근하지 못했습니다: {error}",
     "failedToApplyTexture": "텍스처 적용에 실패했습니다",
+    "failedToConvertToSubgraph": "항목을 서브그래프로 변환하지 못했습니다",
     "failedToCreateCustomer": "고객 생성에 실패했습니다: {error}",
     "failedToDownloadFile": "파일 다운로드에 실패했습니다",
     "failedToExportModel": "{format} 형식으로 모델 내보내기에 실패했습니다",
@@ -1440,6 +1483,10 @@
     "getStarted": "시작하기",
     "title": "ComfyUI에 오신 것을 환영합니다"
   },
+  "whatsNewPopup": {
+    "learnMore": "자세히 알아보기",
+    "noReleaseNotes": "릴리스 노트가 없습니다."
+  },
   "workflowService": {
     "enterFilename": "파일 이름 입력",
     "exportWorkflow": "워크플로 내보내기",

src/locales/ko/settings.json

@@ -259,6 +259,10 @@
     "name": "스냅 하이라이트 노드",
     "tooltip": "링크를 유효한 입력 슬롯이 있는 노드 위로 드래그할 때 노드를 강조 표시합니다."
   },
+  "Comfy_Notification_ShowVersionUpdates": {
+    "name": "버전 업데이트 표시",
+    "tooltip": "새 모델과 주요 신규 기능에 대한 업데이트를 표시합니다."
+  },
   "Comfy_Pointer_ClickBufferTime": {
     "name": "포인터 클릭 드리프트 지연",
     "tooltip": "포인터 버튼을 누른 후, 포인터 움직임을 무시할 수 있는 최대 시간(밀리초)입니다.\n\n클릭하는 동안 포인터가 움직여 의도치 않게 객체가 밀리는 것을 방지합니다."

src/locales/ru/commands.json

@@ -113,6 +113,9 @@
   "Comfy_Feedback": {
     "label": "Обратная связь"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Преобразовать выделенное в подграф"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Подогнать группу к содержимому"
   },

src/locales/ru/main.json

@@ -138,13 +138,21 @@
     "Unpin": "Открепить"
   },
   "credits": {
+    "accountInitialized": "Аккаунт инициализирован",
+    "activity": "Активность",
+    "added": "Добавлено",
+    "additionalInfo": "Дополнительная информация",
     "apiPricing": "Цены на API",
     "credits": "Кредиты",
+    "details": "Детали",
+    "eventType": "Тип события",
     "faqs": "Часто задаваемые вопросы",
     "invoiceHistory": "История счетов",
     "lastUpdated": "Последнее обновление",
     "messageSupport": "Связаться с поддержкой",
+    "model": "Модель",
     "purchaseCredits": "Купить кредиты",
+    "time": "Время",
     "topUp": {
       "buyNow": "Купить сейчас",
       "insufficientMessage": "У вас недостаточно кредитов для запуска этого рабочего процесса.",
@@ -245,10 +253,13 @@
   "g": {
     "about": "О программе",
     "add": "Добавить",
+    "addNodeFilterCondition": "Добавить условие фильтрации узла",
     "all": "Все",
     "amount": "Количество",
     "apply": "Применить",
+    "architecture": "Архитектура",
     "audioFailedToLoad": "Не удалось загрузить аудио",
+    "author": "Автор",
     "back": "Назад",
     "cancel": "Отмена",
     "capture": "захват",
@@ -306,10 +317,12 @@
     "installing": "Установка",
     "interrupted": "Прервано",
     "keybinding": "Привязка клавиш",
+    "keybindingAlreadyExists": "Горячая клавиша уже существует",
     "learnMore": "Узнать больше",
     "loadAllFolders": "Загрузить все папки",
     "loadWorkflow": "Загрузить рабочий процесс",
     "loading": "Загрузка",
+    "loadingPanel": "Загрузка панели {panel}...",
     "login": "Вход",
     "logs": "Логи",
     "migrate": "Мигрировать",
@@ -326,9 +339,12 @@
     "ok": "ОК",
     "openNewIssue": "Открыть новую проблему",
     "overwrite": "Перезаписать",
+    "preview": "ПРЕДПРОСМОТР",
+    "progressCountOf": "из",
     "reconnected": "Переподключено",
     "reconnecting": "Переподключение",
     "refresh": "Обновить",
+    "releaseTitle": "Релиз {package} {version}",
     "reloadToApplyChanges": "Перезагрузите, чтобы применить изменения",
     "rename": "Переименовать",
     "reportIssue": "Отправить отчёт",
@@ -358,12 +374,14 @@
     "systemInfo": "Информация о системе",
     "terminal": "Терминал",
     "title": "Заголовок",
+    "triggerPhrase": "Триггерная фраза",
     "unknownError": "Неизвестная ошибка",
     "update": "Обновить",
     "updateAvailable": "Доступно обновление",
     "updated": "Обновлено",
     "updating": "Обновление",
     "upload": "Загрузить",
+    "usageHint": "Подсказка по использованию",
     "user": "Пользователь",
     "videoFailedToLoad": "Не удалось загрузить видео",
     "workflow": "Рабочий процесс"
@@ -381,6 +399,20 @@
     "create": "Создать ноду группы",
     "enterName": "Введите название"
   },
+  "helpCenter": {
+    "clickToLearnMore": "Нажмите, чтобы узнать больше →",
+    "desktopUserGuide": "Руководство пользователя для Desktop",
+    "docs": "Документация",
+    "github": "Github",
+    "helpFeedback": "Помощь и обратная связь",
+    "loadingReleases": "Загрузка релизов...",
+    "more": "Ещё...",
+    "noRecentReleases": "Нет недавних релизов",
+    "openDevTools": "Открыть инструменты разработчика",
+    "reinstall": "Переустановить",
+    "updateAvailable": "Обновить",
+    "whatsNew": "Что нового?"
+  },
   "icon": {
     "bookmark": "Закладка",
     "box": "Коробка",
@@ -700,6 +732,7 @@
     "ComfyUI Forum": "Форум ComfyUI",
     "ComfyUI Issues": "Проблемы ComfyUI",
     "Contact Support": "Связаться с поддержкой",
+    "Convert Selection to Subgraph": "Преобразовать выделенное в подграф",
     "Convert selected nodes to group node": "Преобразовать выбранные ноды в групповую ноду",
     "Delete Selected Items": "Удалить выбранные элементы",
     "Desktop User Guide": "Руководство пользователя для настольных ПК",
@@ -752,13 +785,13 @@
     "Toggle Bottom Panel": "Переключить нижнюю панель",
     "Toggle Focus Mode": "Переключить режим фокуса",
     "Toggle Logs Bottom Panel": "Переключение нижней панели журналов",
-    "Toggle Model Library Sidebar": "Переключение боковой панели библиотеки моделей",
-    "Toggle Node Library Sidebar": "Переключение боковой панели библиотеки нод",
-    "Toggle Queue Sidebar": "Переключение боковой панели очереди",
+    "Toggle Model Library Sidebar": "Показать/скрыть боковую панель библиотеки моделей",
+    "Toggle Node Library Sidebar": "Показать/скрыть боковую панель библиотеки узлов",
+    "Toggle Queue Sidebar": "Показать/скрыть боковую панель очереди",
     "Toggle Search Box": "Переключить поисковую панель",
     "Toggle Terminal Bottom Panel": "Переключение нижней панели терминала",
     "Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
-    "Toggle Workflows Sidebar": "Переключение боковой панели рабочих процессов",
+    "Toggle Workflows Sidebar": "Показать/скрыть боковую панель рабочих процессов",
     "Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
@@ -872,6 +905,12 @@
     },
     "title": "Ваше устройство не поддерживается"
   },
+  "releaseToast": {
+    "newVersionAvailable": "Доступна новая версия!",
+    "skip": "Пропустить",
+    "update": "Обновить",
+    "whatsNew": "Что нового?"
+  },
   "selectionToolbox": {
     "executeButton": {
       "disabledTooltip": "Выходные узлы не выбраны",
@@ -1060,6 +1099,7 @@
     "Node Search Box": "Поисковая строка нод",
     "Node Widget": "Виджет ноды",
     "NodeLibrary": "Библиотека нод",
+    "Notification Preferences": "Настройки уведомлений",
     "Pointer": "Указатель",
     "Queue": "Очередь",
     "QueueButton": "Кнопка очереди",
@@ -1080,6 +1120,7 @@
   "sideToolbar": {
     "browseTemplates": "Просмотреть примеры шаблонов",
     "downloads": "Загрузки",
+    "helpCenter": "Центр поддержки",
     "logout": "Выйти",
     "modelLibrary": "Библиотека моделей",
     "newBlankWorkflow": "Создайте новый пустой рабочий процесс",
@@ -1368,6 +1409,7 @@
     "title": "Начните с шаблона"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "Невозможно создать подграф",
     "couldNotDetermineFileType": "Не удалось определить тип файла",
     "dropFileError": "Не удалось обработать перетаскиваемый элемент: {error}",
     "emptyCanvas": "Пустой холст",
@@ -1376,6 +1418,7 @@
     "errorSaveSetting": "Ошибка сохранения настройки {id}: {err}",
     "failedToAccessBillingPortal": "Не удалось получить доступ к биллинговому порталу: {error}",
     "failedToApplyTexture": "Не удалось применить текстуру",
+    "failedToConvertToSubgraph": "Не удалось преобразовать элементы в подграф",
     "failedToCreateCustomer": "Не удалось создать клиента: {error}",
     "failedToDownloadFile": "Не удалось скачать файл",
     "failedToExportModel": "Не удалось экспортировать модель как {format}",
@@ -1440,6 +1483,10 @@
     "getStarted": "Начать",
     "title": "Добро пожаловать в ComfyUI"
   },
+  "whatsNewPopup": {
+    "learnMore": "Узнать больше",
+    "noReleaseNotes": "Нет доступных примечаний к выпуску."
+  },
   "workflowService": {
     "enterFilename": "Введите название файла",
     "exportWorkflow": "Экспорт рабочего процесса",

src/locales/ru/settings.json

@@ -259,6 +259,10 @@
     "name": "Подсветка ноды при привязке",
     "tooltip": "При перетаскивании ссылки над нодой с подходящим входным слотом, нода подсвечивается"
   },
+  "Comfy_Notification_ShowVersionUpdates": {
+    "name": "Показывать обновления версий",
+    "tooltip": "Показывать обновления новых моделей и основные новые функции."
+  },
   "Comfy_Pointer_ClickBufferTime": {
     "name": "Задержка дрейфа щелчка указателя",
     "tooltip": "После нажатия кнопки указателя, это максимальное время (в миллисекундах), в течение которого движение указателя может быть проигнорировано.\n\nПомогает предотвратить непреднамеренное смещение объектов, если указатель перемещается во время щелчка."

src/locales/zh/commands.json

@@ -113,6 +113,9 @@
   "Comfy_Feedback": {
     "label": "反馈"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "将选区转换为子图"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "适应节点框到内容"
   },

src/locales/zh/main.json

@@ -138,13 +138,21 @@
     "Unpin": "取消固定"
   },
   "credits": {
+    "accountInitialized": "账户已初始化",
+    "activity": "活动",
+    "added": "已添加",
+    "additionalInfo": "附加信息",
     "apiPricing": "API 价格",
     "credits": "积分",
+    "details": "详情",
+    "eventType": "事件类型",
     "faqs": "常见问题",
     "invoiceHistory": "发票历史",
     "lastUpdated": "最近更新",
     "messageSupport": "联系客服",
+    "model": "模型",
     "purchaseCredits": "购买积分",
+    "time": "时间",
     "topUp": {
       "buyNow": "立即购买",
       "insufficientMessage": "您的积分不足，无法运行此工作流。",
@@ -245,10 +253,13 @@
   "g": {
     "about": "关于",
     "add": "添加",
+    "addNodeFilterCondition": "添加节点筛选条件",
     "all": "全部",
     "amount": "数量",
     "apply": "应用",
+    "architecture": "架构",
     "audioFailedToLoad": "音频加载失败",
+    "author": "作者",
     "back": "返回",
     "cancel": "取消",
     "capture": "捕获",
@@ -306,10 +317,12 @@
     "installing": "正在安装",
     "interrupted": "已中断",
     "keybinding": "按键绑定",
+    "keybindingAlreadyExists": "快捷键已存在",
     "learnMore": "了解更多",
     "loadAllFolders": "加载所有文件夹",
     "loadWorkflow": "加载工作流",
     "loading": "加载中",
+    "loadingPanel": "正在加载{panel}面板...",
     "login": "登录",
     "logs": "日志",
     "migrate": "迁移",
@@ -326,9 +339,12 @@
     "ok": "确定",
     "openNewIssue": "打开新问题",
     "overwrite": "覆盖",
+    "preview": "预览",
+    "progressCountOf": "共",
     "reconnected": "已重新连接",
     "reconnecting": "重新连接中",
     "refresh": "刷新",
+    "releaseTitle": "{package} {version} 发布",
     "reloadToApplyChanges": "重新加载以应用更改",
     "rename": "重命名",
     "reportIssue": "发送报告",
@@ -358,12 +374,14 @@
     "systemInfo": "系统信息",
     "terminal": "终端",
     "title": "标题",
+    "triggerPhrase": "触发短语",
     "unknownError": "未知错误",
     "update": "更新",
     "updateAvailable": "有更新可用",
     "updated": "已更新",
     "updating": "更新中",
     "upload": "上传",
+    "usageHint": "使用提示",
     "user": "用户",
     "videoFailedToLoad": "视频加载失败",
     "workflow": "工作流"
@@ -381,6 +399,20 @@
     "create": "创建组节点",
     "enterName": "输入名称"
   },
+  "helpCenter": {
+    "clickToLearnMore": "点击了解更多 →",
+    "desktopUserGuide": "桌面端用户指南",
+    "docs": "文档",
+    "github": "Github",
+    "helpFeedback": "帮助与反馈",
+    "loadingReleases": "加载发布信息...",
+    "more": "更多...",
+    "noRecentReleases": "没有最近的发布",
+    "openDevTools": "打开开发者工具",
+    "reinstall": "重新安装",
+    "updateAvailable": "更新",
+    "whatsNew": "新功能?"
+  },
   "icon": {
     "bookmark": "书签",
     "box": "盒子",
@@ -700,6 +732,7 @@
     "ComfyUI Forum": "ComfyUI 论坛",
     "ComfyUI Issues": "ComfyUI 问题",
     "Contact Support": "联系支持",
+    "Convert Selection to Subgraph": "将选中内容转换为子图",
     "Convert selected nodes to group node": "将选中节点转换为组节点",
     "Delete Selected Items": "删除选定的项目",
     "Desktop User Guide": "桌面端用户指南",
@@ -872,6 +905,12 @@
     },
     "title": "您的设备不受支持"
   },
+  "releaseToast": {
+    "newVersionAvailable": "新版本可用！",
+    "skip": "跳过",
+    "update": "更新",
+    "whatsNew": "新功能?"
+  },
   "selectionToolbox": {
     "executeButton": {
       "disabledTooltip": "未选择输出节点",
@@ -1060,6 +1099,7 @@
     "Node Search Box": "节点搜索框",
     "Node Widget": "节点组件",
     "NodeLibrary": "节点库",
+    "Notification Preferences": "通知偏好",
     "Pointer": "指针",
     "Queue": "队列",
     "QueueButton": "执行按钮",
@@ -1080,6 +1120,7 @@
   "sideToolbar": {
     "browseTemplates": "浏览示例模板",
     "downloads": "下载",
+    "helpCenter": "帮助中心",
     "logout": "登出",
     "modelLibrary": "模型库",
     "newBlankWorkflow": "创建空白工作流",
@@ -1368,6 +1409,7 @@
     "title": "从模板开始"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "无法创建子图",
     "couldNotDetermineFileType": "无法确定文件类型",
     "dropFileError": "无法处理掉落的项目：{error}",
     "emptyCanvas": "画布为空",
@@ -1376,6 +1418,7 @@
     "errorSaveSetting": "保存设置 {id} 出错：{err}",
     "failedToAccessBillingPortal": "访问账单门户失败：{error}",
     "failedToApplyTexture": "应用纹理失败",
+    "failedToConvertToSubgraph": "无法将项目转换为子图",
     "failedToCreateCustomer": "创建客户失败：{error}",
     "failedToDownloadFile": "文件下载失败",
     "failedToExportModel": "无法将模型导出为 {format}",
@@ -1440,6 +1483,10 @@
     "getStarted": "开始使用",
     "title": "欢迎使用 ComfyUI"
   },
+  "whatsNewPopup": {
+    "learnMore": "了解更多",
+    "noReleaseNotes": "暂无更新说明。"
+  },
   "workflowService": {
     "enterFilename": "输入文件名",
     "exportWorkflow": "导出工作流",

src/locales/zh/settings.json

@@ -259,6 +259,10 @@
     "name": "吸附高亮节点",
     "tooltip": "在拖动连线经过具有可用输入接口的节点时，高亮显示该节点。"
   },
+  "Comfy_Notification_ShowVersionUpdates": {
+    "name": "显示版本更新",
+    "tooltip": "显示新模型和主要新功能的更新。"
+  },
   "Comfy_Pointer_ClickBufferTime": {
     "name": "指针点击漂移延迟",
     "tooltip": "按下指针按钮后，忽略指针移动的最大时间（毫秒）。\n\n有助于防止在点击时意外移动鼠标。"

src/schemas/apiSchema.ts

@@ -426,6 +426,7 @@ const zSettings = z.object({
   'Comfy.NodeBadge.NodeIdBadgeMode': zNodeBadgeMode,
   'Comfy.NodeBadge.NodeLifeCycleBadgeMode': zNodeBadgeMode,
   'Comfy.NodeBadge.ShowApiPricing': z.boolean(),
+  'Comfy.Notification.ShowVersionUpdates': z.boolean(),
   'Comfy.QueueButton.BatchCountLimit': z.number(),
   'Comfy.Queue.MaxHistoryItems': z.number(),
   'Comfy.Keybinding.UnsetBindings': z.array(zKeybinding),
@@ -451,6 +452,7 @@ const zSettings = z.object({
   'Comfy.Toast.DisableReconnectingToast': z.boolean(),
   'Comfy.Workflow.Persist': z.boolean(),
   'Comfy.TutorialCompleted': z.boolean(),
+  'Comfy.InstalledVersion': z.string().nullable(),
   'Comfy.Node.AllowImageSizeDraw': z.boolean(),
   'Comfy-Desktop.AutoUpdate': z.boolean(),
   'Comfy-Desktop.SendStatistics': z.boolean(),
@@ -472,6 +474,14 @@ const zSettings = z.object({
   'pysssss.SnapToGrid': z.boolean(),
   /** VHS setting is used for queue video preview support. */
   'VHS.AdvancedPreviews': z.string(),
+  /** Release data settings */
+  'Comfy.Release.Version': z.string(),
+  'Comfy.Release.Status': z.enum([
+    'skipped',
+    'changelog seen',
+    "what's new seen"
+  ]),
+  'Comfy.Release.Timestamp': z.number(),
   /** Settings used for testing */
   'test.setting': z.any(),
   'main.sub.setting.name': z.any(),

src/schemas/comfyWorkflowSchema.ts

@@ -41,10 +41,10 @@ const zModelFile = z.object({
 
 const zGraphState = z
   .object({
-    lastGroupid: z.number().optional(),
-    lastNodeId: z.number().optional(),
-    lastLinkId: z.number().optional(),
-    lastRerouteId: z.number().optional()
+    lastGroupId: z.number(),
+    lastNodeId: z.number(),
+    lastLinkId: z.number(),
+    lastRerouteId: z.number()
   })
   .passthrough()
 
@@ -214,6 +214,32 @@ const zComfyNode = z
   })
   .passthrough()
 
+export const zSubgraphIO = zNodeInput.extend({
+  /** Slot ID (internal; never changes once instantiated). */
+  id: z.string().uuid(),
+  /** The data type this slot uses. Unlike nodes, this does not support legacy numeric types. */
+  type: z.string(),
+  /** Links connected to this slot, or `undefined` if not connected. An ouptut slot should only ever have one link. */
+  linkIds: z.array(z.number()).optional()
+})
+
+const zSubgraphInstance = z
+  .object({
+    id: zNodeId,
+    type: z.string().uuid(),
+    pos: zVector2,
+    size: zVector2,
+    flags: zFlags,
+    order: z.number(),
+    mode: z.number(),
+    inputs: z.array(zSubgraphIO).optional(),
+    outputs: z.array(zSubgraphIO).optional(),
+    widgets_values: zWidgetValues.optional(),
+    color: z.string().optional(),
+    bgcolor: z.string().optional()
+  })
+  .passthrough()
+
 const zGroup = z
   .object({
     id: z.number().optional(),
@@ -248,9 +274,22 @@ const zExtra = z
   })
   .passthrough()
 
+export const zGraphDefinitions = z.object({
+  subgraphs: z.lazy(() => z.array(zSubgraphDefinition))
+})
+
+export const zBaseExportableGraph = z.object({
+  /** Unique graph ID.  Automatically generated if not provided. */
+  id: z.string().uuid().optional(),
+  revision: z.number().optional(),
+  config: zConfig.optional().nullable(),
+  /** Details of the appearance and location of subgraphs shown in this graph. Similar to */
+  subgraphs: z.array(zSubgraphInstance).optional()
+})
+
 /** Schema version 0.4 */
-export const zComfyWorkflow = z
-  .object({
+export const zComfyWorkflow = zBaseExportableGraph
+  .extend({
     id: z.string().uuid().optional(),
     revision: z.number().optional(),
     last_node_id: zNodeId,
@@ -262,13 +301,47 @@ export const zComfyWorkflow = z
     config: zConfig.optional().nullable(),
     extra: zExtra.optional().nullable(),
     version: z.number(),
-    models: z.array(zModelFile).optional()
+    models: z.array(zModelFile).optional(),
+    definitions: zGraphDefinitions.optional()
   })
   .passthrough()
 
+/** Required for recursive definition of subgraphs. */
+interface ComfyWorkflow1BaseType {
+  id?: string
+  revision?: number
+  version: 1
+  models?: z.infer<typeof zModelFile>[]
+  state: z.infer<typeof zGraphState>
+}
+
+/** Required for recursive definition of subgraphs w/ZodEffects. */
+interface ComfyWorkflow1BaseInput extends ComfyWorkflow1BaseType {
+  groups?: z.input<typeof zGroup>[]
+  nodes: z.input<typeof zComfyNode>[]
+  links?: z.input<typeof zComfyLinkObject>[]
+  floatingLinks?: z.input<typeof zComfyLinkObject>[]
+  reroutes?: z.input<typeof zReroute>[]
+  definitions?: {
+    subgraphs: SubgraphDefinitionBase<ComfyWorkflow1BaseInput>[]
+  }
+}
+
+/** Required for recursive definition of subgraphs w/ZodEffects. */
+interface ComfyWorkflow1BaseOutput extends ComfyWorkflow1BaseType {
+  groups?: z.output<typeof zGroup>[]
+  nodes: z.output<typeof zComfyNode>[]
+  links?: z.output<typeof zComfyLinkObject>[]
+  floatingLinks?: z.output<typeof zComfyLinkObject>[]
+  reroutes?: z.output<typeof zReroute>[]
+  definitions?: {
+    subgraphs: SubgraphDefinitionBase<ComfyWorkflow1BaseOutput>[]
+  }
+}
+
 /** Schema version 1 */
-export const zComfyWorkflow1 = z
-  .object({
+export const zComfyWorkflow1 = zBaseExportableGraph
+  .extend({
     id: z.string().uuid().optional(),
     revision: z.number().optional(),
     version: z.literal(1),
@@ -280,7 +353,96 @@ export const zComfyWorkflow1 = z
     floatingLinks: z.array(zComfyLinkObject).optional(),
     reroutes: z.array(zReroute).optional(),
     extra: zExtra.optional().nullable(),
-    models: z.array(zModelFile).optional()
+    models: z.array(zModelFile).optional(),
+    definitions: z
+      .object({
+        subgraphs: z.lazy(
+          (): z.ZodArray<
+            z.ZodType<
+              SubgraphDefinitionBase<ComfyWorkflow1BaseOutput>,
+              z.ZodTypeDef,
+              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>
+            >,
+            'many'
+          > => z.array(zSubgraphDefinition)
+        )
+      })
+      .optional()
+  })
+  .passthrough()
+
+export const zExportedSubgraphIONode = z.object({
+  id: zNodeId,
+  bounding: z.tuple([z.number(), z.number(), z.number(), z.number()]),
+  pinned: z.boolean().optional()
+})
+
+export const zExposedWidget = z.object({
+  id: z.string(),
+  name: z.string()
+})
+
+interface SubgraphDefinitionBase<
+  T extends ComfyWorkflow1BaseInput | ComfyWorkflow1BaseOutput
+> {
+  /** Unique graph ID.  Automatically generated if not provided. */
+  id: string
+  revision: number
+  name: string
+
+  inputNode: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zExportedSubgraphIONode>
+    : z.output<typeof zExportedSubgraphIONode>
+  outputNode: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zExportedSubgraphIONode>
+    : z.output<typeof zExportedSubgraphIONode>
+  /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */
+  inputs?: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zSubgraphIO>[]
+    : z.output<typeof zSubgraphIO>[]
+  /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */
+  outputs?: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zSubgraphIO>[]
+    : z.output<typeof zSubgraphIO>[]
+  /** A list of node widgets displayed in the parent graph, on the subgraph object. */
+  widgets?: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zExposedWidget>[]
+    : z.output<typeof zExposedWidget>[]
+  definitions?: {
+    subgraphs: SubgraphDefinitionBase<T>[]
+  }
+}
+
+/** A subgraph definition `worfklow.definitions.subgraphs` */
+export const zSubgraphDefinition = zComfyWorkflow1
+  .extend({
+    /** Unique graph ID.  Automatically generated if not provided. */
+    id: z.string().uuid(),
+    revision: z.number(),
+    name: z.string(),
+    inputNode: zExportedSubgraphIONode,
+    outputNode: zExportedSubgraphIONode,
+
+    /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */
+    inputs: z.array(zSubgraphIO).optional(),
+    /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */
+    outputs: z.array(zSubgraphIO).optional(),
+    /** A list of node widgets displayed in the parent graph, on the subgraph object. */
+    widgets: z.array(zExposedWidget).optional(),
+    definitions: z
+      .object({
+        subgraphs: z.lazy(
+          (): z.ZodArray<
+            z.ZodType<
+              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>,
+              z.ZodTypeDef,
+              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>
+            >,
+            'many'
+          > => zSubgraphDefinition.array()
+        )
+      })
+      .optional()
   })
   .passthrough()
 

src/scripts/api.ts

@@ -712,11 +712,26 @@ export class ComfyApi extends EventTarget {
     try {
       const res = await this.fetchApi(`/history?max_items=${max_items}`)
       const json: Promise<HistoryTaskItem[]> = await res.json()
+      const historyItems = Object.values(json).map((item) => ({
+        ...item,
+        taskType: 'History'
+      }))
+
+      // Sort by execution_start timestamp in descending order (newest first)
+      historyItems.sort((a, b) => {
+        const getExecutionStartTimestamp = (item: HistoryTaskItem) => {
+          if (!item.status?.messages) return 0
+          const executionStartMessage = item.status.messages.find(
+            (msg) => msg[0] === 'execution_start'
+          )
+          return executionStartMessage ? executionStartMessage[1].timestamp : 0
+        }
+
+        return getExecutionStartTimestamp(b) - getExecutionStartTimestamp(a)
+      })
+
       return {
-        History: Object.values(json).map((item) => ({
-          ...item,
-          taskType: 'History'
-        }))
+        History: historyItems
       }
     } catch (error) {
       console.error(error)

src/scripts/app.ts

@@ -39,9 +39,11 @@ import { getSvgMetadata } from '@/scripts/metadata/svg'
 import { useDialogService } from '@/services/dialogService'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
+import { useSubgraphService } from '@/services/subgraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -72,7 +74,6 @@ import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'
-import { pruneWidgets } from './domWidget'
 import {
   getFlacMetadata,
   getLatentMetadata,
@@ -669,13 +670,15 @@ export class ComfyApp {
     api.addEventListener('execution_error', ({ detail }) => {
       // Check if this is an auth-related error or credits-related error
       if (
-        detail.exception_message ===
-        'Unauthorized: Please login first to use this node.'
+        detail.exception_message?.includes(
+          'Unauthorized: Please login first to use this node.'
+        )
       ) {
         useDialogService().showApiNodesSignInDialog([detail.node_type])
       } else if (
-        detail.exception_message ===
-        'Payment Required: Please add credits to your account to use this node.'
+        detail.exception_message?.includes(
+          'Payment Required: Please add credits to your account to use this node.'
+        )
       ) {
         useDialogService().showTopUpCreditsDialog({
           isInsufficientCredits: true
@@ -715,25 +718,23 @@ export class ComfyApp {
   }
 
   #addAfterConfigureHandler() {
-    const app = this
-    const onConfigure = app.graph.onConfigure
-    app.graph.onConfigure = function (this: LGraph, ...args) {
+    const { graph } = this
+    const { onConfigure } = graph
+    graph.onConfigure = function (...args) {
       fixLinkInputSlots(this)
 
       // Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
-      for (const node of app.graph.nodes) {
+      for (const node of graph.nodes) {
         node.onGraphConfigured?.()
       }
 
       const r = onConfigure?.apply(this, args)
 
       // Fire after onConfigure, used by primitives to generate widget using input nodes config
-      for (const node of app.graph.nodes) {
+      for (const node of graph.nodes) {
         node.onAfterGraphConfigured?.()
       }
 
-      pruneWidgets(this.nodes)
-
       return r
     }
   }
@@ -765,6 +766,21 @@ export class ComfyApp {
 
     this.#graph = new LGraph()
 
+    // Register the subgraph - adds type wrapper for Litegraph's `createNode` factory
+    this.graph.events.addEventListener('subgraph-created', (e) => {
+      try {
+        const { subgraph, data } = e.detail
+        useSubgraphService().registerNewSubgraph(subgraph, data)
+      } catch (err) {
+        console.error('Failed to register subgraph', err)
+        useToastStore().add({
+          severity: 'error',
+          summary: 'Failed to register subgraph',
+          detail: err instanceof Error ? err.message : String(err)
+        })
+      }
+    })
+
     this.#addAfterConfigureHandler()
 
     this.canvas = new LGraphCanvas(canvasEl, this.graph)
@@ -777,6 +793,30 @@ export class ComfyApp {
     LiteGraph.alt_drag_do_clone_nodes = true
     LiteGraph.macGesturesRequireMac = false
 
+    this.canvas.canvas.addEventListener<'litegraph:set-graph'>(
+      'litegraph:set-graph',
+      (e) => {
+        // Assertion: Not yet defined in litegraph.
+        const { newGraph } = e.detail
+
+        const nodeSet = new Set(newGraph.nodes)
+        const widgetStore = useDomWidgetStore()
+
+        // Assertions: UnwrapRef
+        for (const { widget } of widgetStore.activeWidgetStates) {
+          if (!nodeSet.has(widget.node)) {
+            widgetStore.deactivateWidget(widget.id)
+          }
+        }
+
+        for (const { widget } of widgetStore.inactiveWidgetStates) {
+          if (nodeSet.has(widget.node)) {
+            widgetStore.activateWidget(widget.id)
+          }
+        }
+      }
+    )
+
     this.graph.start()
 
     // Ensure the canvas fills the window
@@ -1013,6 +1053,7 @@ export class ComfyApp {
       })
     }
     useWorkflowService().beforeLoadNewGraph()
+    useSubgraphService().loadSubgraphs(graphData)
 
     const missingNodeTypes: MissingNodeType[] = []
     const missingModels: ModelFile[] = []
@@ -1210,6 +1251,9 @@ export class ComfyApp {
           // Allow widgets to run callbacks before a prompt has been queued
           // e.g. random seed before every gen
           executeWidgetsCallback(this.graph.nodes, 'beforeQueued')
+          for (const subgraph of this.graph.subgraphs.values()) {
+            executeWidgetsCallback(subgraph.nodes, 'beforeQueued')
+          }
 
           const p = await this.graphToPrompt(this.graph, { queueNodeIds })
           try {
@@ -1252,9 +1296,13 @@ export class ComfyApp {
           executeWidgetsCallback(
             p.workflow.nodes
               .map((n) => this.graph.getNodeById(n.id))
-              .filter((n) => !!n) as LGraphNode[],
+              .filter((n) => !!n),
             'afterQueued'
           )
+          for (const subgraph of this.graph.subgraphs.values()) {
+            executeWidgetsCallback(subgraph.nodes, 'afterQueued')
+          }
+
           this.canvas.draw(true, true)
           await this.ui.queue.update()
         }
@@ -1650,6 +1698,8 @@ export class ComfyApp {
     const executionStore = useExecutionStore()
     executionStore.lastNodeErrors = null
     executionStore.lastExecutionError = null
+
+    useDomWidgetStore().clear()
   }
 
   clientPosToCanvasPos(pos: Vector2): Vector2 {

src/scripts/changeTracker.ts

@@ -6,6 +6,7 @@ import log from 'loglevel'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 
 import { api } from './api'
@@ -37,6 +38,10 @@ export class ChangeTracker {
   ds?: { scale: number; offset: [number, number] }
   nodeOutputs?: Record<string, any>
 
+  private subgraphState?: {
+    navigation: string[]
+  }
+
   constructor(
     /**
      * The workflow that this change tracker is tracking
@@ -67,6 +72,8 @@ export class ChangeTracker {
       scale: app.canvas.ds.scale,
       offset: [app.canvas.ds.offset[0], app.canvas.ds.offset[1]]
     }
+    const navigation = useSubgraphNavigationStore().exportState()
+    this.subgraphState = navigation.length ? { navigation } : undefined
   }
 
   restore() {
@@ -77,6 +84,16 @@ export class ChangeTracker {
     if (this.nodeOutputs) {
       app.nodeOutputs = this.nodeOutputs
     }
+    if (this.subgraphState) {
+      const { navigation } = this.subgraphState
+      useSubgraphNavigationStore().restoreState(navigation)
+
+      const activeId = navigation.at(-1)
+      if (activeId) {
+        const subgraph = app.graph.subgraphs.get(activeId)
+        if (subgraph) app.canvas.setGraph(subgraph)
+      }
+    }
   }
 
   updateModified() {
@@ -376,7 +393,14 @@ export class ChangeTracker {
         return false
 
       // Compare other properties normally
-      for (const key of ['links', 'floatingLinks', 'reroutes', 'groups']) {
+      for (const key of [
+        'links',
+        'floatingLinks',
+        'reroutes',
+        'groups',
+        'definitions',
+        'subgraphs'
+      ]) {
         if (!_.isEqual(a[key], b[key])) {
           return false
         }
@@ -392,7 +416,12 @@ export class ChangeTracker {
     function sortGraphNodes(graph: ComfyWorkflowJSON) {
       return {
         links: graph.links,
+        floatingLinks: graph.floatingLinks,
+        reroutes: graph.reroutes,
         groups: graph.groups,
+        extra: graph.extra,
+        definitions: graph.definitions,
+        subgraphs: graph.subgraphs,
         nodes: graph.nodes.sort((a, b) => {
           if (typeof a.id === 'number' && typeof b.id === 'number') {
             return a.id - b.id

src/scripts/domWidget.ts

@@ -11,7 +11,7 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { generateUUID } from '@/utils/formatUtil'
 
-export interface BaseDOMWidget<V extends object | string>
+export interface BaseDOMWidget<V extends object | string = object | string>
   extends IBaseWidget<V, string, DOMWidgetOptions<V>> {
   // ICustomWidget properties
   type: string
@@ -330,9 +330,8 @@ LGraphNode.prototype.addDOMWidget = function <
 export const pruneWidgets = (nodes: LGraphNode[]) => {
   const nodeSet = new Set(nodes)
   const domWidgetStore = useDomWidgetStore()
-  for (const widgetState of domWidgetStore.widgetStates.values()) {
-    const widget = widgetState.widget
-    if (!nodeSet.has(widget.node as LGraphNode)) {
+  for (const { widget } of domWidgetStore.widgetStates.values()) {
+    if (!nodeSet.has(widget.node)) {
       domWidgetStore.unregisterWidget(widget.id)
     }
   }

src/scripts/ui/settings.ts

@@ -65,7 +65,9 @@ export class ComfySettingsDialog extends ComfyDialog<HTMLDialogElement> {
   /**
    * @deprecated Use `settingStore.getDefaultValue` instead.
    */
-  getSettingDefaultValue<K extends keyof Settings>(id: K): Settings[K] {
+  getSettingDefaultValue<K extends keyof Settings>(
+    id: K
+  ): Settings[K] | undefined {
     return useSettingStore().getDefaultValue(id)
   }
 

src/services/README.md

@@ -57,22 +57,42 @@ While services can interact with both UI components and stores (centralized stat
 
 ## Core Services
 
-The core services include:
+The following table lists ALL services in the system as of 2025-01-30:
+
+### Main Services
+
+| Service | Description | Category |
+|---------|-------------|----------|
+| autoQueueService.ts | Manages automatic queue execution | Execution |
+| colorPaletteService.ts | Handles color palette management and customization | UI |
+| comfyManagerService.ts | Manages ComfyUI application packages and updates | Manager |
+| comfyRegistryService.ts | Handles registration and discovery of ComfyUI extensions | Registry |
+| dialogService.ts | Provides dialog and modal management | UI |
+| extensionService.ts | Manages extension registration and lifecycle | Extensions |
+| keybindingService.ts | Handles keyboard shortcuts and keybindings | Input |
+| litegraphService.ts | Provides utilities for working with the LiteGraph library | Graph |
+| load3dService.ts | Manages 3D model loading and visualization | 3D |
+| nodeHelpService.ts | Provides node documentation and help | Nodes |
+| nodeOrganizationService.ts | Handles node organization and categorization | Nodes |
+| nodeSearchService.ts | Implements node search functionality | Search |
+| releaseService.ts | Manages application release information and updates | System |
+| subgraphService.ts | Handles subgraph operations and navigation | Graph |
+| workflowService.ts | Handles workflow operations (save, load, execute) | Workflows |
+
+### Gateway Services
+Located in `services/gateway/`:
 
 | Service | Description |
 |---------|-------------|
-| algoliaSearchService.ts | Implements search functionality using Algolia |
-| autoQueueService.ts | Manages automatic queue execution |
-| colorPaletteService.ts | Handles color palette management and customization |
-| comfyManagerService.ts | Manages ComfyUI application packages and updates |
-| comfyRegistryService.ts | Handles registration and discovery of ComfyUI extensions |
-| dialogService.ts | Provides dialog and modal management |
-| extensionService.ts | Manages extension registration and lifecycle |
-| keybindingService.ts | Handles keyboard shortcuts and keybindings |
-| litegraphService.ts | Provides utilities for working with the LiteGraph library |
-| load3dService.ts | Manages 3D model loading and visualization |
-| nodeSearchService.ts | Implements node search functionality |
-| workflowService.ts | Handles workflow operations (save, load, execute) |
+| registrySearchGateway.ts | Gateway for registry search operations |
+
+### Provider Services
+Located in `services/providers/`:
+
+| Service | Description |
+|---------|-------------|
+| algoliaSearchProvider.ts | Implements search functionality using Algolia |
+| registrySearchProvider.ts | Provides registry search capabilities |
 
 ## Service Development Guidelines
 

src/services/comfyRegistryService.ts

@@ -318,6 +318,47 @@ export const useComfyRegistryService = () => {
     )
   }
 
+  /**
+   * Get the node pack that contains a specific ComfyUI node by its name.
+   * This method queries the registry to find which pack provides the given node.
+   *
+   * When multiple packs contain a node with the same name, the API returns the best match based on:
+   * 1. Preemption match - If the node name matches any in the pack's preempted_comfy_node_names array
+   * 2. Search ranking - Lower search_ranking values are preferred
+   * 3. Total installs - Higher installation counts are preferred as a tiebreaker
+   *
+   * @param nodeName - The name of the ComfyUI node (e.g., 'KSampler', 'CLIPTextEncode')
+   * @param signal - Optional AbortSignal for request cancellation
+   * @returns The node pack containing the specified node, or null if not found or on error
+   *
+   * @example
+   * ```typescript
+   * const pack = await inferPackFromNodeName('KSampler')
+   * if (pack) {
+   *   console.log(`Node found in pack: ${pack.name}`)
+   * }
+   * ```
+   */
+  const inferPackFromNodeName = async (
+    nodeName: operations['getNodeByComfyNodeName']['parameters']['path']['comfyNodeName'],
+    signal?: AbortSignal
+  ) => {
+    const endpoint = `/comfy-nodes/${nodeName}/node`
+    const errorContext = 'Failed to infer pack from comfy node name'
+    const routeSpecificErrors = {
+      404: `Comfy node not found: The node with name ${nodeName} does not exist in the registry`
+    }
+
+    return executeApiRequest(
+      () =>
+        registryApiClient.get<components['schemas']['Node']>(endpoint, {
+          signal
+        }),
+      errorContext,
+      routeSpecificErrors
+    )
+  }
+
   return {
     isLoading,
     error,
@@ -330,6 +371,7 @@ export const useComfyRegistryService = () => {
     getPublisherById,
     listPacksForPublisher,
     getNodeDefs,
-    postPackReview
+    postPackReview,
+    inferPackFromNodeName
   }
 }