Merge branch 'main' into pysssss/fix-panel-node-title-reactivity

- Used `useVueNodeLifecycle` to allow reactive access to the title

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

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

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

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

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

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

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

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

.i18nrc.cjs

@@ -6,11 +6,10 @@ const { defineConfig } = require('@lobehub/i18n-cli');
 module.exports = defineConfig({
   modelName: 'gpt-4.1',
   splitToken: 1024,
-  saveImmediately: true,
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR', 'fa'],
+  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
@@ -19,11 +18,5 @@ module.exports = defineConfig({
   - For 'zh' locale: Use ONLY Simplified Chinese characters (简体中文). Common examples: 节点 (not 節點), 画布 (not 畫布), 图像 (not 圖像), 选择 (not 選擇), 减小 (not 減小).
   - For 'zh-TW' locale: Use ONLY Traditional Chinese characters (繁體中文) with Taiwan-specific terminology.
   - NEVER mix Simplified and Traditional Chinese characters within the same locale.
-  
-  IMPORTANT Persian Translation Guidelines:
-  - For 'fa' locale: Use formal Persian (فارسی رسمی) for professional tone throughout the UI.
-  - Keep commonly used technical terms in English when they are standard in Persian software (e.g., node, workflow).
-  - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate.
-  - Maintain consistency with terminology used in Persian software and design applications.
   `
 });

.storybook/main.ts

@@ -7,7 +7,7 @@ import type { InlineConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-mcp'],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}
@@ -69,32 +69,9 @@ const config: StorybookConfig = {
         allowedHosts: true
       },
       resolve: {
-        alias: [
-          {
-            find: '@/composables/queue/useJobList',
-            replacement: process.cwd() + '/src/storybook/mocks/useJobList.ts'
-          },
-          {
-            find: '@/composables/queue/useJobActions',
-            replacement: process.cwd() + '/src/storybook/mocks/useJobActions.ts'
-          },
-          {
-            find: '@/utils/formatUtil',
-            replacement:
-              process.cwd() +
-              '/packages/shared-frontend-utils/src/formatUtil.ts'
-          },
-          {
-            find: '@/utils/networkUtil',
-            replacement:
-              process.cwd() +
-              '/packages/shared-frontend-utils/src/networkUtil.ts'
-          },
-          {
-            find: '@',
-            replacement: process.cwd() + '/src'
-          }
-        ]
+        alias: {
+          '@': process.cwd() + '/src'
+        }
       },
       esbuild: {
         // Prevent minification of identifiers to preserve _sfc_main

AGENTS.md

@@ -63,9 +63,6 @@ The project uses **Nx** for build orchestration and task management
 - Imports:
   - sorted/grouped by plugin
   - run `pnpm format` before committing
-  - use separate `import type` statements, not inline `type` in mixed imports
-    - ✅ `import type { Foo } from './foo'` + `import { bar } from './foo'`
-    - ❌ `import { bar, type Foo } from './foo'`
 - ESLint:
   - Vue + TS rules
   - no floating promises
@@ -122,10 +119,7 @@ The project uses **Nx** for build orchestration and task management
   - Prefer reactive props destructuring to `const props = defineProps<...>`
   - Do not use `withDefaults` or runtime props declaration
   - Do not import Vue macros unnecessarily
-  - Prefer `defineModel` to separately defining a prop and emit for v-model bindings
-  - Define slots via template usage, not `defineSlots`
-  - Use same-name shorthand for slot prop bindings: `:isExpanded` instead of `:is-expanded="isExpanded"`
-  - Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
+  - Prefer `useModel` to separately defining a prop and emit
   - Be judicious with addition of new refs or other state
     - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
     - If it's possible to use the `ref` or prop directly, don't add a `computed`
@@ -143,7 +137,7 @@ The project uses **Nx** for build orchestration and task management
 8. Implement proper error handling
 9. Follow Vue 3 style guide and naming conventions
 10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json. Use the plurals system in i18n instead of hardcoding pluralization in templates.
+11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
 12. Avoid new usage of PrimeVue components
 13. Write tests for all changes, especially bug fixes to catch future regressions
 14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
@@ -161,8 +155,6 @@ The project uses **Nx** for build orchestration and task management
 
 ## Testing Guidelines
 
-See @docs/testing/*.md for detailed patterns.
-
 - Frameworks:
   - Vitest (unit/component, happy-dom)
   - Playwright (E2E)
@@ -276,8 +268,6 @@ When referencing Comfy-Org repos:
   - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
 - NEVER use `!important` or the `!` important prefix for tailwind classes
   - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
-- NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
-  - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
 
 ## Agent-only rules
 

CODEOWNERS

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

browser_tests/fixtures/ComfyPage.ts

@@ -3,7 +3,7 @@ import { test as base, expect } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'
 
-import type { LGraphNode, LGraph } from '../../src/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
 import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
@@ -1591,29 +1591,14 @@ export class ComfyPage {
       return window['app'].graph.nodes
     })
   }
-  async waitForGraphNodes(count: number) {
-    await this.page.waitForFunction((count) => {
-      return window['app']?.canvas.graph?.nodes?.length === count
-    }, count)
-  }
-  async getNodeRefsByType(
-    type: string,
-    includeSubgraph: boolean = false
-  ): Promise<NodeReference[]> {
+  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
     return Promise.all(
       (
-        await this.page.evaluate(
-          ({ type, includeSubgraph }) => {
-            const graph = (
-              includeSubgraph ? window['app'].canvas.graph : window['app'].graph
-            ) as LGraph
-            const nodes = graph.nodes
-            return nodes
-              .filter((n: LGraphNode) => n.type === type)
-              .map((n: LGraphNode) => n.id)
-          },
-          { type, includeSubgraph }
-        )
+        await this.page.evaluate((type) => {
+          return window['app'].graph.nodes
+            .filter((n: LGraphNode) => n.type === type)
+            .map((n: LGraphNode) => n.id)
+        }, type)
       ).map((id: NodeId) => this.getNodeRefById(id))
     )
   }

browser_tests/fixtures/VueNodeHelpers.ts

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

browser_tests/tests/menu.spec.ts

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

browser_tests/tests/mobileBaseline.spec.ts

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

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

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

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

@@ -102,7 +102,7 @@ test.describe('Vue Node Link Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    // await comfyPage.setup()
+    await comfyPage.setup()
     await comfyPage.loadWorkflow('vueNodes/simple-triple')
     await comfyPage.vueNodes.waitForNodes()
     await fitToViewInstant(comfyPage)
@@ -993,51 +993,4 @@ test.describe('Vue Node Link Interaction', () => {
       expect(linked).toBe(true)
     })
   })
-
-  test('Dragging from subgraph input connects to correct slot', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    // Setup workflow with a KSampler node
-    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
-    await comfyPage.waitForGraphNodes(0)
-    await comfyPage.executeCommand('Workspace.SearchBox.Toggle')
-    await comfyPage.nextFrame()
-    await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-    await comfyPage.waitForGraphNodes(1)
-
-    // Convert the KSampler node to a subgraph
-    let ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler'))?.[0]
-    await comfyPage.vueNodes.selectNode(String(ksamplerNode.id))
-    await comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph')
-
-    // Enter the subgraph
-    await comfyPage.vueNodes.enterSubgraph()
-    await fitToViewInstant(comfyPage)
-
-    // Get the KSampler node inside the subgraph
-    ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler', true))?.[0]
-    const positiveInput = await ksamplerNode.getInput(1)
-    const negativeInput = await ksamplerNode.getInput(2)
-
-    const positiveInputPos = await getSlotCenter(
-      comfyPage.page,
-      ksamplerNode.id,
-      1,
-      true
-    )
-
-    const sourceSlot = await comfyPage.getSubgraphInputSlot()
-    const calculatedSourcePos = await sourceSlot.getOpenSlotPosition()
-
-    await comfyMouse.move(calculatedSourcePos)
-    await comfyMouse.drag(positiveInputPos)
-    await comfyMouse.drop()
-
-    // Verify connection went to the correct slot
-    const positiveLinks = await positiveInput.getLinkCount()
-    const negativeLinks = await negativeInput.getLinkCount()
-    expect(positiveLinks).toBe(1)
-    expect(negativeLinks).toBe(0)
-  })
 })

browser_tests/tests/widget.spec.ts

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

docs/testing/vitest-patterns.md

@@ -1,138 +0,0 @@
----
-globs:
-  - '**/*.test.ts'
-  - '**/*.spec.ts'
----
-
-# Vitest Patterns
-
-## Setup
-
-Use `createTestingPinia` from `@pinia/testing`, not `createPinia`:
-
-```typescript
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-describe('MyStore', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-    vi.useFakeTimers()
-    vi.resetAllMocks()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-})
-```
-
-**Why `stubActions: false`?** By default, testing pinia stubs all actions. Set to `false` when testing actual store behavior.
-
-## Mock Patterns
-
-### Reset all mocks at once
-
-```typescript
-beforeEach(() => {
-  vi.resetAllMocks()  // Not individual mock.mockReset() calls
-})
-```
-
-### Module mocks with vi.mock()
-
-```typescript
-vi.mock('@/scripts/api', () => ({
-  api: {
-    addEventListener: vi.fn(),
-    fetchData: vi.fn()
-  }
-}))
-
-vi.mock('@/services/myService', () => ({
-  myService: {
-    doThing: vi.fn()
-  }
-}))
-```
-
-### Configure mocks in tests
-
-```typescript
-import { api } from '@/scripts/api'
-import { myService } from '@/services/myService'
-
-it('handles success', () => {
-  vi.mocked(myService.doThing).mockResolvedValue({ data: 'test' })
-  // ... test code
-})
-```
-
-## Testing Event Listeners
-
-When a store registers event listeners at module load time:
-
-```typescript
-function getEventHandler() {
-  const call = vi.mocked(api.addEventListener).mock.calls.find(
-    ([event]) => event === 'my_event'
-  )
-  return call?.[1] as (e: CustomEvent<MyEventType>) => void
-}
-
-function dispatch(data: MyEventType) {
-  const handler = getEventHandler()
-  handler(new CustomEvent('my_event', { detail: data }))
-}
-
-it('handles events', () => {
-  const store = useMyStore()
-  dispatch({ field: 'value' })
-  expect(store.items).toHaveLength(1)
-})
-```
-
-## Testing with Fake Timers
-
-For stores with intervals, timeouts, or polling:
-
-```typescript
-beforeEach(() => {
-  vi.useFakeTimers()
-})
-
-afterEach(() => {
-  vi.useRealTimers()
-})
-
-it('polls after delay', async () => {
-  const store = useMyStore()
-  store.startPolling()
-
-  await vi.advanceTimersByTimeAsync(30000)
-
-  expect(mockService.fetch).toHaveBeenCalled()
-})
-```
-
-## Assertion Style
-
-Prefer `.toHaveLength()` over `.length.toBe()`:
-
-```typescript
-// Good
-expect(store.items).toHaveLength(1)
-
-// Avoid
-expect(store.items.length).toBe(1)
-```
-
-Use `.toMatchObject()` for partial matching:
-
-```typescript
-expect(store.completedItems[0]).toMatchObject({
-  id: 'task-123',
-  status: 'done'
-})
-```

knip.config.ts

@@ -8,8 +8,7 @@ const config: KnipConfig = {
         'src/assets/css/style.css',
         'src/main.ts',
         'src/scripts/ui/menu/index.ts',
-        'src/types/index.ts',
-        'src/storybook/mocks/**/*.ts'
+        'src/types/index.ts'
       ],
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
     },

lint-staged.config.mjs

@@ -1,23 +0,0 @@
-import path from 'node:path'
-
-export default {
-  './**/*.js': (stagedFiles) => formatAndEslint(stagedFiles),
-
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
-    ...formatAndEslint(stagedFiles),
-    'pnpm typecheck'
-  ]
-}
-
-function formatAndEslint(fileNames) {
-  // Convert absolute paths to relative paths for better ESLint resolution
-  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
-  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
-  return [
-    `pnpm exec prettier --cache --write ${joinedPaths}`,
-    `pnpm exec oxlint --fix ${joinedPaths}`,
-    `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
-  ]
-}
-
-

manifest.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.38.2",
+  "version": "1.37.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -66,7 +66,6 @@
     "@prettier/plugin-oxc": "catalog:",
     "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
-    "@storybook/addon-mcp": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",

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

@@ -200,7 +200,7 @@
   --node-component-disabled: var(--color-alpha-ash-500-20);
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
-  --node-component-header-icon: var(--node-component-surface-highlight);
+  --node-component-header-icon: var(--color-ash-800);
   --node-component-header-surface: var(--color-smoke-400);
   --node-component-outline: var(--color-black);
   --node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
@@ -247,7 +247,6 @@
   --inverted-background-hover: var(--color-charcoal-600);
   --warning-background: var(--color-gold-400);
   --warning-background-hover: var(--color-gold-500);
-  --success-background: var(--color-jade-600);
   --border-default: var(--color-smoke-600);
   --border-subtle: var(--color-smoke-400);
   --muted-background: var(--color-smoke-700);
@@ -258,7 +257,6 @@
   --component-node-border: var(--color-border-default);
   --component-node-foreground: var(--base-foreground);
   --component-node-foreground-secondary: var(--color-muted-foreground);
-  --component-node-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.2);
   --component-node-widget-background: var(--secondary-background);
   --component-node-widget-background-hovered: var(--secondary-background-hover);
   --component-node-widget-background-selected: var(--secondary-background-selected);
@@ -283,7 +281,7 @@
    --modal-card-border-highlighted: var(--secondary-background-selected);
    --modal-card-button-surface: var(--color-smoke-300);
    --modal-card-placeholder-background: var(--color-smoke-600);
-   --modal-card-tag-background: var(--color-smoke-200);
+   --modal-card-tag-background: var(--color-smoke-400);
    --modal-card-tag-foreground: var(--base-foreground);
    --modal-panel-background: var(--color-white);
 }
@@ -324,7 +322,7 @@
   --node-component-border-error: var(--color-danger-100);
   --node-component-border-executing: var(--color-blue-500);
   --node-component-border-selected: var(--color-charcoal-200);
-  --node-component-header-icon: var(--node-component-surface-highlight);
+  --node-component-header-icon: var(--color-slate-300);
   --node-component-header-surface: var(--color-charcoal-800);
   --node-component-outline: var(--color-white);
   --node-component-ring: rgb(var(--color-smoke-500) / 20%);
@@ -374,7 +372,6 @@
   --inverted-background-hover: var(--color-smoke-200);
   --warning-background: var(--color-gold-600);
   --warning-background-hover: var(--color-gold-500);
-  --success-background: var(--color-jade-600);
   --border-default: var(--color-charcoal-200);
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
@@ -385,7 +382,6 @@
   --component-node-border: var(--color-charcoal-100);
   --component-node-foreground: var(--base-foreground);
   --component-node-foreground-secondary: var(--color-muted-foreground);
-  --component-node-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.4);
   --component-node-widget-background: var(--secondary-background-hover);
   --component-node-widget-background-hovered: var(--secondary-background-selected);
   --component-node-widget-background-selected: var(--color-charcoal-100);
@@ -520,7 +516,6 @@
   --color-inverted-background-hover: var(--inverted-background-hover);
   --color-warning-background: var(--warning-background);
   --color-warning-background-hover: var(--warning-background-hover);
-  --color-success-background: var(--success-background);
   --color-border-default: var(--border-default);
   --color-border-subtle: var(--border-subtle);
   --color-muted-background: var(--muted-background);
@@ -1326,29 +1321,6 @@ audio.comfy-audio.empty-audio-widget {
 .lg-node {
   /* Disable text selection on all nodes */
   user-select: none;
-  --component-node-widget-background: color-mix(
-    in srgb,
-    var(--component-node-background) 92%,
-    var(--contrast-mix-color, #000)
-  );
-  --component-node-widget-background-hovered: color-mix(
-    in srgb,
-    var(--component-node-background) 80%,
-    var(--contrast-mix-color, #000)
-  );
-}
-
-.dark-theme .lg-node {
-  --component-node-widget-background: color-mix(
-    in srgb,
-    var(--component-node-background) 85%,
-    var(--contrast-mix-color, #000)
-  );
-  --component-node-widget-background-hovered: color-mix(
-    in srgb,
-    var(--component-node-background) 70%,
-    var(--contrast-mix-color, #000)
-  );
 }
 
 .lg-node .lg-slot,

pnpm-lock.yaml

@@ -84,9 +84,6 @@ catalogs:
     '@storybook/addon-docs':
       specifier: ^10.1.9
       version: 10.1.9
-    '@storybook/addon-mcp':
-      specifier: 0.1.6
-      version: 0.1.6
     '@storybook/vue3':
       specifier: ^10.1.9
       version: 10.1.9
@@ -552,9 +549,6 @@ importers:
       '@storybook/addon-docs':
         specifier: 'catalog:'
         version: 10.1.9(@types/react@19.1.9)(esbuild@0.27.1)(rollup@4.53.5)(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))
-      '@storybook/addon-mcp':
-        specifier: 'catalog:'
-        version: 0.1.6(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
       '@storybook/vue3':
         specifier: 'catalog:'
         version: 10.1.9(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vue@3.5.13(typescript@5.9.3))
@@ -3154,11 +3148,6 @@ packages:
     peerDependencies:
       storybook: ^10.1.9
 
-  '@storybook/addon-mcp@0.1.6':
-    resolution: {integrity: sha512-+EagCHqwIb9tg3DKskEsXpsqQVnMljxgR5Tt3Bu0ZpWweB1HdMy+ok128gzNfTZ3r+5ljksr0q66YCEkrQwdDA==}
-    peerDependencies:
-      storybook: ^9.1.16 || ^10.0.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0
-
   '@storybook/builder-vite@10.1.9':
     resolution: {integrity: sha512-rUILpjGV7gKfXrUeZzpNAer9PspB3LJI1d+gJHISx2Gs24bdneA3y/gu0fWw46ccOSIcwb91xoK5QxliJcWsWg==}
     peerDependencies:
@@ -3192,9 +3181,6 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@storybook/mcp@0.1.1':
-    resolution: {integrity: sha512-+AivFDms1XkY2VUvZBBYy0co5qvRh20eYXYwhaDPQXX2Q4y96arSkWn22e/l3DQwA9Ywzv481vj4gl4zPrCQkg==}
-
   '@storybook/react-dom-shim@10.1.9':
     resolution: {integrity: sha512-gJsR6fI1gG4DSin6sQx8RmGDQF8Lije0cZbxHyVedNleBsveGXIPFUKFVi+pRNdwBPni1Z2g/gYyHzkOEqPD2w==}
     peerDependencies:
@@ -3467,26 +3453,6 @@ packages:
   '@tiptap/starter-kit@2.10.4':
     resolution: {integrity: sha512-tu/WCs9Mkr5Nt8c3/uC4VvAbQlVX0OY7ygcqdzHGUeG9zP3twdW7o5xM3kyDKR2++sbVzqu5Ll5qNU+1JZvPGQ==}
 
-  '@tmcp/adapter-valibot@0.1.5':
-    resolution: {integrity: sha512-9P2wrVYPngemNK0UvPb/opC722/jfd09QxXmme1TRp/wPsl98vpSk/MXt24BCMqBRv4Dvs0xxJH4KHDcjXW52Q==}
-    peerDependencies:
-      tmcp: ^1.17.0
-      valibot: ^1.1.0
-
-  '@tmcp/session-manager@0.2.1':
-    resolution: {integrity: sha512-DOGy9LfufXCy1wfpGHZ6qPSDQtRnTVwOb71+41ffovTqzLMZlK3iLK/LIsekHxIiku+iIAUiqEKN+DHbqEm8IA==}
-    peerDependencies:
-      tmcp: ^1.16.3
-
-  '@tmcp/transport-http@0.8.3':
-    resolution: {integrity: sha512-gnoBjDBd8/ppl4WRrNKPKHlioCxE8D0zTyNUOzqUjsg0s6GRsyB5iMirh9lC4QjQt0NEOrI+sIJdz+9ymf0MDA==}
-    peerDependencies:
-      '@tmcp/auth': ^0.3.3 || ^0.4.0
-      tmcp: ^1.18.0
-    peerDependenciesMeta:
-      '@tmcp/auth':
-        optional: true
-
   '@trivago/prettier-plugin-sort-imports@5.2.2':
     resolution: {integrity: sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==}
     engines: {node: '>18.12'}
@@ -3820,11 +3786,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@valibot/to-json-schema@1.5.0':
-    resolution: {integrity: sha512-GE7DmSr1C2UCWPiV0upRH6mv0cCPsqYGs819fb6srCS1tWhyXrkGGe+zxUiwzn/L1BOfADH4sNjY/YHCuP8phQ==}
-    peerDependencies:
-      valibot: ^1.2.0
-
   '@vitejs/plugin-vue@6.0.3':
     resolution: {integrity: sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -5209,9 +5170,6 @@ packages:
       jiti:
         optional: true
 
-  esm-env@1.2.2:
-    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
-
   esm-resolve@1.0.11:
     resolution: {integrity: sha512-LxF0wfUQm3ldUDHkkV2MIbvvY0TgzIpJ420jHSV1Dm+IlplBEWiJTKWM61GtxUfvjV6iD4OtTYFGAGM2uuIUWg==}
 
@@ -6020,9 +5978,6 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  json-rpc-2.0@1.7.1:
-    resolution: {integrity: sha512-JqZjhjAanbpkXIzFE7u8mE/iFblawwlXtONaCvRqI+pyABVz7B4M1EUNpyVW+dZjqgQ2L5HFmZCmOCgUKm00hg==}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -7431,9 +7386,6 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
-  sqids@0.3.0:
-    resolution: {integrity: sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw==}
-
   stable-hash-x@0.2.0:
     resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
     engines: {node: '>=12.0.0'}
@@ -7661,9 +7613,6 @@ packages:
     resolution: {integrity: sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==}
     hasBin: true
 
-  tmcp@1.19.0:
-    resolution: {integrity: sha512-wOY449EdaWDo7wLZEOVjeH9fn/AqfFF4f+3pDerCI8xHpy2Z8msUjAF0Vkg01aEFIdFMmiNDiY4hu6E7jVX79w==}
-
   tmp@0.2.5:
     resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
     engines: {node: '>=14.14'}
@@ -7909,9 +7858,6 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  uri-template-matcher@1.1.2:
-    resolution: {integrity: sha512-uZc1h12jdO3m/R77SfTEOuo6VbMhgWznaawKpBjRGSJb7i91x5PgI37NQJtG+Cerxkk0yr1pylBY2qG1kQ+aEQ==}
-
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
@@ -7927,14 +7873,6 @@ packages:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
-  valibot@1.2.0:
-    resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
-    peerDependencies:
-      typescript: '>=5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -8081,9 +8019,6 @@ packages:
   vue-component-type-helpers@3.2.1:
     resolution: {integrity: sha512-gKV7XOkQl4urSuLHNY1tnVQf7wVgtb/mKbRyxSLWGZUY9RK7aDPhBenTjm+i8ZFe0zC2PZeHMPtOZXZfyaFOzQ==}
 
-  vue-component-type-helpers@3.2.2:
-    resolution: {integrity: sha512-x8C2nx5XlUNM0WirgfTkHjJGO/ABBxlANZDtHw2HclHtQnn+RFPTnbjMJn8jHZW4TlUam0asHcA14lf1C6Jb+A==}
-
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -11014,18 +10949,6 @@ snapshots:
       - vite
       - webpack
 
-  '@storybook/addon-mcp@0.1.6(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)':
-    dependencies:
-      '@storybook/mcp': 0.1.1(typescript@5.9.3)
-      '@tmcp/adapter-valibot': 0.1.5(tmcp@1.19.0(typescript@5.9.3))(valibot@1.2.0(typescript@5.9.3))
-      '@tmcp/transport-http': 0.8.3(tmcp@1.19.0(typescript@5.9.3))
-      storybook: 10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      tmcp: 1.19.0(typescript@5.9.3)
-      valibot: 1.2.0(typescript@5.9.3)
-    transitivePeerDependencies:
-      - '@tmcp/auth'
-      - typescript
-
   '@storybook/builder-vite@10.1.9(esbuild@0.27.1)(rollup@4.53.5)(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))':
     dependencies:
       '@storybook/csf-plugin': 10.1.9(esbuild@0.27.1)(rollup@4.53.5)(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))
@@ -11055,16 +10978,6 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  '@storybook/mcp@0.1.1(typescript@5.9.3)':
-    dependencies:
-      '@tmcp/adapter-valibot': 0.1.5(tmcp@1.19.0(typescript@5.9.3))(valibot@1.2.0(typescript@5.9.3))
-      '@tmcp/transport-http': 0.8.3(tmcp@1.19.0(typescript@5.9.3))
-      tmcp: 1.19.0(typescript@5.9.3)
-      valibot: 1.2.0(typescript@5.9.3)
-    transitivePeerDependencies:
-      - '@tmcp/auth'
-      - typescript
-
   '@storybook/react-dom-shim@10.1.9(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))':
     dependencies:
       react: 19.2.3
@@ -11094,7 +11007,7 @@ snapshots:
       storybook: 10.1.9(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.3)
-      vue-component-type-helpers: 3.2.2
+      vue-component-type-helpers: 3.2.1
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -11362,23 +11275,6 @@ snapshots:
       '@tiptap/extension-text-style': 2.10.4(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
       '@tiptap/pm': 2.10.4
 
-  '@tmcp/adapter-valibot@0.1.5(tmcp@1.19.0(typescript@5.9.3))(valibot@1.2.0(typescript@5.9.3))':
-    dependencies:
-      '@standard-schema/spec': 1.1.0
-      '@valibot/to-json-schema': 1.5.0(valibot@1.2.0(typescript@5.9.3))
-      tmcp: 1.19.0(typescript@5.9.3)
-      valibot: 1.2.0(typescript@5.9.3)
-
-  '@tmcp/session-manager@0.2.1(tmcp@1.19.0(typescript@5.9.3))':
-    dependencies:
-      tmcp: 1.19.0(typescript@5.9.3)
-
-  '@tmcp/transport-http@0.8.3(tmcp@1.19.0(typescript@5.9.3))':
-    dependencies:
-      '@tmcp/session-manager': 0.2.1(tmcp@1.19.0(typescript@5.9.3))
-      esm-env: 1.2.2
-      tmcp: 1.19.0(typescript@5.9.3)
-
   '@trivago/prettier-plugin-sort-imports@5.2.2(@vue/compiler-sfc@3.5.25)(prettier@3.7.4)':
     dependencies:
       '@babel/generator': 7.28.5
@@ -11727,10 +11623,6 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@valibot/to-json-schema@1.5.0(valibot@1.2.0(typescript@5.9.3))':
-    dependencies:
-      valibot: 1.2.0(typescript@5.9.3)
-
   '@vitejs/plugin-vue@6.0.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.53
@@ -13411,8 +13303,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  esm-env@1.2.2: {}
-
   esm-resolve@1.0.11: {}
 
   espree@10.4.0:
@@ -14299,8 +14189,6 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
-  json-rpc-2.0@1.7.1: {}
-
   json-schema-traverse@0.4.1: {}
 
   json-schema-traverse@1.0.0: {}
@@ -16167,8 +16055,6 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
-  sqids@0.3.0: {}
-
   stable-hash-x@0.2.0: {}
 
   stack-utils@2.0.6:
@@ -16461,16 +16347,6 @@ snapshots:
     dependencies:
       tldts-core: 7.0.19
 
-  tmcp@1.19.0(typescript@5.9.3):
-    dependencies:
-      '@standard-schema/spec': 1.1.0
-      json-rpc-2.0: 1.7.1
-      sqids: 0.3.0
-      uri-template-matcher: 1.1.2
-      valibot: 1.2.0(typescript@5.9.3)
-    transitivePeerDependencies:
-      - typescript
-
   tmp@0.2.5: {}
 
   to-regex-range@5.0.1:
@@ -16768,8 +16644,6 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  uri-template-matcher@1.1.2: {}
-
   use-sync-external-store@1.6.0(react@19.2.3):
     dependencies:
       react: 19.2.3
@@ -16780,10 +16654,6 @@ snapshots:
 
   uuid@11.1.0: {}
 
-  valibot@1.2.0(typescript@5.9.3):
-    optionalDependencies:
-      typescript: 5.9.3
-
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -17044,8 +16914,6 @@ snapshots:
 
   vue-component-type-helpers@3.2.1: {}
 
-  vue-component-type-helpers@3.2.2: {}
-
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.3)):
     dependencies:
       vue: 3.5.13(typescript@5.9.3)

pnpm-workspace.yaml

@@ -29,7 +29,6 @@ catalog:
   '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^0.1.10
   '@storybook/addon-docs': ^10.1.9
-  '@storybook/addon-mcp': 0.1.6
   '@storybook/vue3': ^10.1.9
   '@storybook/vue3-vite': ^10.1.9
   '@tailwindcss/vite': ^4.1.12

scripts/cicd/extract-playwright-counts.ts

@@ -10,158 +10,37 @@ interface TestStats {
   finished?: number
 }
 
-interface TestResult {
-  status: string
-  duration?: number
-  error?: {
-    message?: string
-    stack?: string
-  }
-  attachments?: Array<{
-    name: string
-    path?: string
-    contentType: string
-  }>
-}
-
-interface TestCase {
-  title: string
-  ok: boolean
-  outcome: string
-  results: TestResult[]
-}
-
-interface Suite {
-  title: string
-  file: string
-  suites?: Suite[]
-  tests?: TestCase[]
-}
-
-interface FullReportData {
-  stats?: TestStats
-  suites?: Suite[]
-}
-
 interface ReportData {
   stats?: TestStats
 }
 
-interface FailedTest {
-  name: string
-  file: string
-  traceUrl?: string
-  error?: string
-}
-
 interface TestCounts {
   passed: number
   failed: number
   flaky: number
   skipped: number
   total: number
-  failures?: FailedTest[]
-}
-
-/**
- * Extract failed test details from Playwright report
- */
-function extractFailedTests(
-  reportData: FullReportData,
-  baseUrl?: string
-): FailedTest[] {
-  const failures: FailedTest[] = []
-
-  function processTest(test: TestCase, file: string, suitePath: string[]) {
-    // Check if test failed or is flaky
-    const hasFailed = test.results.some(
-      (r) => r.status === 'failed' || r.status === 'timedOut'
-    )
-    const isFlaky = test.outcome === 'flaky'
-
-    if (hasFailed || isFlaky) {
-      const fullTestName = [...suitePath, test.title]
-        .filter(Boolean)
-        .join(' › ')
-      const failedResult = test.results.find(
-        (r) => r.status === 'failed' || r.status === 'timedOut'
-      )
-
-      // Find trace attachment
-      let traceUrl: string | undefined
-      if (failedResult?.attachments) {
-        const traceAttachment = failedResult.attachments.find(
-          (a) => a.name === 'trace' && a.contentType === 'application/zip'
-        )
-        if (traceAttachment?.path) {
-          // Convert local path to URL path
-          const tracePath = traceAttachment.path.replace(/\\/g, '/')
-          const traceFile = path.basename(tracePath)
-          if (baseUrl) {
-            // Construct trace viewer URL
-            const traceDataUrl = `${baseUrl}/data/${traceFile}`
-            traceUrl = `${baseUrl}/trace/?trace=${encodeURIComponent(traceDataUrl)}`
-          }
-        }
-      }
-
-      failures.push({
-        name: fullTestName,
-        file: file,
-        traceUrl,
-        error: failedResult?.error?.message
-      })
-    }
-  }
-
-  function processSuite(suite: Suite, parentPath: string[] = []) {
-    const suitePath = suite.title ? [...parentPath, suite.title] : parentPath
-
-    // Process tests in this suite
-    if (suite.tests) {
-      for (const test of suite.tests) {
-        processTest(test, suite.file, suitePath)
-      }
-    }
-
-    // Recursively process nested suites
-    if (suite.suites) {
-      for (const childSuite of suite.suites) {
-        processSuite(childSuite, suitePath)
-      }
-    }
-  }
-
-  if (reportData.suites) {
-    for (const suite of reportData.suites) {
-      processSuite(suite)
-    }
-  }
-
-  return failures
 }
 
 /**
  * Extract test counts from Playwright HTML report
  * @param reportDir - Path to the playwright-report directory
- * @param baseUrl - Base URL of the deployed report (for trace links)
- * @returns Test counts { passed, failed, flaky, skipped, total, failures }
+ * @returns Test counts { passed, failed, flaky, skipped, total }
  */
-function extractTestCounts(reportDir: string, baseUrl?: string): TestCounts {
+function extractTestCounts(reportDir: string): TestCounts {
   const counts: TestCounts = {
     passed: 0,
     failed: 0,
     flaky: 0,
     skipped: 0,
-    total: 0,
-    failures: []
+    total: 0
   }
 
   try {
     // First, try to find report.json which Playwright generates with JSON reporter
     const jsonReportFile = path.join(reportDir, 'report.json')
     if (fs.existsSync(jsonReportFile)) {
-      const reportJson: FullReportData = JSON.parse(
+      const reportJson: ReportData = JSON.parse(
         fs.readFileSync(jsonReportFile, 'utf-8')
       )
       if (reportJson.stats) {
@@ -175,12 +54,6 @@ function extractTestCounts(reportDir: string, baseUrl?: string): TestCounts {
         counts.failed = stats.unexpected || 0
         counts.flaky = stats.flaky || 0
         counts.skipped = stats.skipped || 0
-
-        // Extract detailed failure information
-        if (counts.failed > 0 || counts.flaky > 0) {
-          counts.failures = extractFailedTests(reportJson, baseUrl)
-        }
-
         return counts
       }
     }
@@ -296,18 +169,15 @@ function extractTestCounts(reportDir: string, baseUrl?: string): TestCounts {
 
 // Main execution
 const reportDir = process.argv[2]
-const baseUrl = process.argv[3] // Optional: base URL for trace links
 
 if (!reportDir) {
-  console.error(
-    'Usage: extract-playwright-counts.ts <report-directory> [base-url]'
-  )
+  console.error('Usage: extract-playwright-counts.ts <report-directory>')
   process.exit(1)
 }
 
-const counts = extractTestCounts(reportDir, baseUrl)
+const counts = extractTestCounts(reportDir)
 
 // Output as JSON for easy parsing in shell script
-process.stdout.write(JSON.stringify(counts) + '\n')
+console.log(JSON.stringify(counts))
 
-export { extractTestCounts, extractFailedTests }
+export { extractTestCounts }

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

@@ -134,22 +134,23 @@ post_comment() {
 
 # Main execution
 if [ "$STATUS" = "starting" ]; then
-    # Post concise starting comment
+    # Post starting comment
     comment=$(cat <<EOF
 $COMMENT_MARKER
-## 🎭 Playwright Tests: ⏳ Running...
+## 🎭 Playwright Test Results
 
-Tests started at $START_TIME UTC
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Tests are starting...**
 
-<details>
-<summary>📊 Browser Tests</summary>
+⏰ Started at: $START_TIME UTC
 
-- **chromium**: Running...
-- **chromium-0.5x**: Running...
-- **chromium-2x**: Running...
-- **mobile-chrome**: Running...
+### 🚀 Running Tests
+- 🧪 **chromium**: Running tests...
+- 🧪 **chromium-0.5x**: Running tests...
+- 🧪 **chromium-2x**: Running tests...
+- 🧪 **mobile-chrome**: Running tests...
 
-</details>
+---
+⏱️ Please wait while tests are running...
 EOF
 )
     post_comment "$comment"
@@ -188,8 +189,7 @@ else
                 
                 if command -v tsx > /dev/null 2>&1 && [ -f "$EXTRACT_SCRIPT" ]; then
                     echo "Extracting counts from $REPORT_DIR using $EXTRACT_SCRIPT" >&2
-                    # Pass the base URL so we can generate trace links
-                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" "$url" 2>&1 || echo '{}')
+                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" 2>&1 || echo '{}')
                     echo "Extracted counts for $browser: $counts" >&2
                     echo "$counts" > "$temp_dir/$i.counts"
                 else
@@ -286,74 +286,43 @@ else
     # Determine overall status
     if [ $total_failed -gt 0 ]; then
         status_icon="❌"
-        status_text="Failed"
+        status_text="Some tests failed"
     elif [ $total_flaky -gt 0 ]; then
         status_icon="⚠️"
-        status_text="Passed with flaky tests"
+        status_text="Tests passed with flaky tests"
     elif [ $total_tests -gt 0 ]; then
         status_icon="✅"
-        status_text="Passed"
+        status_text="All tests passed!"
     else
         status_icon="🕵🏻"
-        status_text="No test results"
+        status_text="No test results found"
     fi
     
-    # Generate concise completion comment
+    # Generate completion comment
     comment="$COMMENT_MARKER
-## 🎭 Playwright Tests: $status_icon **$status_text**"
+## 🎭 Playwright Test Results
+
+$status_icon **$status_text**
+
+⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC"
 
     # Add summary counts if we have test data
     if [ $total_tests -gt 0 ]; then
         comment="$comment
 
-**Results:** $total_passed passed, $total_failed failed, $total_flaky flaky, $total_skipped skipped (Total: $total_tests)"
-    fi
-
-    # Extract and display failed tests from all browsers
-    if [ $total_failed -gt 0 ] || [ $total_flaky -gt 0 ]; then
-        comment="$comment
-
-### ❌ Failed Tests"
-        
-        # Process each browser's failures
-        for counts_json in "${counts_array[@]}"; do
-            [ -z "$counts_json" ] || [ "$counts_json" = "{}" ] && continue
-            
-            if command -v jq > /dev/null 2>&1; then
-                # Extract failures array from JSON
-                failures=$(echo "$counts_json" | jq -r '.failures // [] | .[]? | "\(.name)|\(.file)|\(.traceUrl // "")"')
-                
-                if [ -n "$failures" ]; then
-                    while IFS='|' read -r test_name test_file trace_url; do
-                        [ -z "$test_name" ] && continue
-                        
-                        # Convert file path to GitHub URL (relative to repo root)
-                        github_file_url="https://github.com/$GITHUB_REPOSITORY/blob/$GITHUB_SHA/$test_file"
-                        
-                        # Build the failed test line
-                        test_line="- [$test_name]($github_file_url)"
-                        
-                        if [ -n "$trace_url" ] && [ "$trace_url" != "null" ]; then
-                            test_line="$test_line: [View trace]($trace_url)"
-                        fi
-                        
-                        comment="$comment
-$test_line"
-                    done <<< "$failures"
-                fi
-            fi
-        done
+### 📈 Summary
+- **Total Tests:** $total_tests
+- **Passed:** $total_passed ✅
+- **Failed:** $total_failed $([ $total_failed -gt 0 ] && echo '❌' || echo '')
+- **Flaky:** $total_flaky $([ $total_flaky -gt 0 ] && echo '⚠️' || echo '')
+- **Skipped:** $total_skipped $([ $total_skipped -gt 0 ] && echo '⏭️' || echo '')"
     fi
     
-    # Add browser reports in collapsible section
     comment="$comment
 
-<details>
-<summary>📊 Browser Reports</summary>
-
-"
+### 📊 Test Reports by Browser"
     
-    # Add browser results
+    # Add browser results with individual counts
     i=0
     IFS=' ' read -r -a browser_array <<< "$BROWSERS"
     IFS=' ' read -r -a url_array <<< "$urls"
@@ -380,7 +349,7 @@ $test_line"
                 fi
                 
                 if [ -n "$b_total" ] && [ "$b_total" != "0" ]; then
-                    counts_str=" (✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped)"
+                    counts_str=" • ✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped"
                 else
                     counts_str=""
                 fi
@@ -389,10 +358,10 @@ $test_line"
             fi
             
             comment="$comment
-- **${browser}**: [View Report](${url})${counts_str}"
+- ✅ **${browser}**: [View Report](${url})${counts_str}"
         else
             comment="$comment
-- **${browser}**: ❌ Deployment failed"
+- ❌ **${browser}**: Deployment failed"
         fi
         i=$((i + 1))
     done
@@ -400,7 +369,8 @@ $test_line"
     
     comment="$comment
 
-</details>"
+---
+🎉 Click on the links above to view detailed test results for each browser configuration."
     
     post_comment "$comment"
 fi

src/assets/css/style.css

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

src/components/TopMenuSection.vue

@@ -20,14 +20,9 @@
             variant="secondary"
             size="icon"
             :aria-label="t('menu.customNodesManager')"
-            class="relative"
             @click="openCustomNodeManager"
           >
             <i class="icon-[lucide--puzzle] size-4" />
-            <span
-              v-if="shouldShowRedDot"
-              class="absolute top-0.5 right-1 size-2 rounded-full bg-red-500"
-            />
           </Button>
         </div>
 
@@ -54,16 +49,13 @@
             <i class="icon-[lucide--history] size-4" />
             <span
               v-if="queuedCount > 0"
-              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground"
+              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
             >
               {{ queuedCount }}
             </span>
           </Button>
-          <CurrentUserButton
-            v-if="isLoggedIn && !isIntegratedTabBar"
-            class="shrink-0"
-          />
-          <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
+          <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
+          <LoginButton v-else-if="isDesktop" />
           <Button
             v-if="!isRightSidePanelOpen"
             v-tooltip.bottom="rightSidePanelTooltipConfig"
@@ -99,19 +91,15 @@ import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
-import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
-const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
@@ -123,15 +111,8 @@ const commandStore = useCommandStore()
 const queueStore = useQueueStore()
 const queueUIStore = useQueueUIStore()
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
-const releaseStore = useReleaseStore()
-const { shouldShowRedDot: showReleaseRedDot } = storeToRefs(releaseStore)
-const { shouldShowRedDot: shouldShowConflictRedDot } =
-  useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
 const queuedCount = computed(() => queueStore.pendingTasks.length)
-const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
-)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
@@ -139,12 +120,6 @@ const customNodesManagerTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.customNodesManager'))
 )
 
-// Use either release red dot or conflict red dot
-const shouldShowRedDot = computed((): boolean => {
-  const releaseRedDot = showReleaseRedDot.value
-  return releaseRedDot || shouldShowConflictRedDot.value
-})
-
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
 const rightSidePanelTooltipConfig = computed(() =>

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="subgraph-breadcrumb flex w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
+    class="subgraph-breadcrumb w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs
@@ -13,37 +13,17 @@
       '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
     }"
   >
-    <Button
-      class="context-menu-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
-      icon="pi pi-bars"
-      text
-      severity="secondary"
-      size="small"
-      @click="handleMenuClick"
-    />
-    <Button
-      v-if="isInSubgraph"
-      class="back-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
-      text
-      severity="secondary"
-      size="small"
-      @click="handleBackClick"
-    >
-      <i class="icon-[lucide--undo-2]" />
-    </Button>
     <Breadcrumb
       ref="breadcrumbRef"
       class="w-fit rounded-lg p-0"
-      :class="{ hidden: !isInSubgraph }"
       :model="items"
       :pt="{ item: { class: 'pointer-events-auto' } }"
       :aria-label="$t('g.graphNavigation')"
     >
       <template #item="{ item }">
         <SubgraphBreadcrumbItem
-          :ref="(el) => setItemRef(item, el)"
           :item="item"
-          :is-active="item.key === activeItemKey"
+          :is-active="item === items.at(-1)"
         />
       </template>
       <template #separator
@@ -55,7 +35,6 @@
 
 <script setup lang="ts">
 import Breadcrumb from 'primevue/breadcrumb'
-import Button from 'primevue/button'
 import type { MenuItem } from 'primevue/menuitem'
 import { computed, onUpdated, ref, watch } from 'vue'
 
@@ -64,7 +43,6 @@ import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'
@@ -77,12 +55,6 @@ const ICON_WIDTH = 20
 const workflowStore = useWorkflowStore()
 const navigationStore = useSubgraphNavigationStore()
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
-const rootItemRef = ref<InstanceType<typeof SubgraphBreadcrumbItem>>()
-const setItemRef = (item: MenuItem, el: unknown) => {
-  if (item.key === 'root') {
-    rootItemRef.value = el as InstanceType<typeof SubgraphBreadcrumbItem>
-  }
-}
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 const isBlueprint = computed(() =>
   useSubgraphStore().isSubgraphBlueprint(workflowStore.activeWorkflow)
@@ -90,28 +62,17 @@ const isBlueprint = computed(() =>
 const collapseTabs = ref(false)
 const overflowingTabs = ref(false)
 
-const isInSubgraph = computed(() => navigationStore.navigationStack.length > 0)
+const breadcrumbElement = computed(() => {
+  if (!breadcrumbRef.value) return null
 
-const home = computed(() => ({
-  label: workflowName.value,
-  icon: 'pi pi-home',
-  key: 'root',
-  isBlueprint: isBlueprint.value,
-  command: () => {
-    useTelemetry()?.trackUiButtonClicked({
-      button_id: 'breadcrumb_subgraph_root_selected'
-    })
-    const canvas = useCanvasStore().getCanvas()
-    if (!canvas.graph) throw new TypeError('Canvas has no graph')
-
-    canvas.setGraph(canvas.graph.rootGraph)
-  }
-}))
+  const el = (breadcrumbRef.value as unknown as { $el: HTMLElement }).$el
+  const list = el?.querySelector('.p-breadcrumb-list') as HTMLElement
+  return list
+})
 
 const items = computed(() => {
   const items = navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
     label: subgraph.name,
-    key: `subgraph-${subgraph.id}`,
     command: () => {
       useTelemetry()?.trackUiButtonClicked({
         button_id: 'breadcrumb_subgraph_item_selected'
@@ -134,26 +95,21 @@ const items = computed(() => {
   return [home.value, ...items]
 })
 
-const activeItemKey = computed(() => items.value.at(-1)?.key)
+const home = computed(() => ({
+  label: workflowName.value,
+  icon: 'pi pi-home',
+  key: 'root',
+  isBlueprint: isBlueprint.value,
+  command: () => {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'breadcrumb_subgraph_root_selected'
+    })
+    const canvas = useCanvasStore().getCanvas()
+    if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
-const handleMenuClick = (event: MouseEvent) => {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'breadcrumb_subgraph_menu_selected'
-  })
-  rootItemRef.value?.toggleMenu(event)
-}
-
-const handleBackClick = () => {
-  void useCommandStore().execute('Comfy.Graph.ExitSubgraph')
-}
-
-const breadcrumbElement = computed(() => {
-  if (!breadcrumbRef.value) return null
-
-  const el = (breadcrumbRef.value as unknown as { $el: HTMLElement }).$el
-  const list = el?.querySelector('.p-breadcrumb-list') as HTMLElement
-  return list
-})
+    canvas.setGraph(canvas.graph.rootGraph)
+  }
+}))
 
 // Check for overflow on breadcrumb items and collapse/expand the breadcrumb to fit
 let overflowObserver: ReturnType<typeof useOverflowObserver> | undefined
@@ -233,18 +189,13 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center overflow-hidden h-8;
+  @apply flex items-center overflow-hidden;
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
-  border: 1px solid transparent;
-  background-color: transparent;
-  transition: all 0.2s;
   /* Collapse middle items first */
   flex-shrink: 10000;
 }
 
 :deep(.p-breadcrumb-separator) {
-  border: 1px solid transparent;
-  background-color: transparent;
   display: flex;
   padding: 0 var(--p-breadcrumb-item-margin);
 }
@@ -254,9 +205,11 @@ onUpdated(() => {
     calc(var(--p-breadcrumb-item-margin) + var(--p-breadcrumb-item-padding));
 }
 
-:deep(.p-breadcrumb-item:hover) {
-  @apply rounded-lg;
-  border-color: var(--interface-stroke);
+:deep(.p-breadcrumb-separator),
+:deep(.p-breadcrumb-item) {
+  @apply h-12;
+  border-top: 1px solid var(--interface-stroke);
+  border-bottom: 1px solid var(--interface-stroke);
   background-color: var(--comfy-menu-bg);
 }
 
@@ -265,8 +218,10 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:first-child) {
+  @apply rounded-l-lg;
   /* Then collapse the root workflow */
   flex-shrink: 5000;
+  border-left: 1px solid var(--interface-stroke);
 
   .p-breadcrumb-item-link {
     padding-left: var(--p-breadcrumb-item-padding);
@@ -274,10 +229,13 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:last-child) {
+  @apply rounded-r-lg;
   /* Then collapse the active item */
   flex-shrink: 1;
+  border-right: 1px solid var(--interface-stroke);
 }
 
+:deep(.p-breadcrumb-item-link:hover),
 :deep(.p-breadcrumb-item-link-menu-visible) {
   background-color: color-mix(
     in srgb,

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -7,7 +7,7 @@
     }"
     draggable="false"
     href="#"
-    class="p-breadcrumb-item-link h-8 cursor-pointer px-2"
+    class="p-breadcrumb-item-link h-12 cursor-pointer px-2"
     :class="{
       'flex items-center gap-1': isActive,
       'p-breadcrumb-item-link-menu-visible': menu?.overlayVisible,
@@ -25,7 +25,7 @@
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
   </a>
   <Menu
-    v-if="isActive || isRoot"
+    v-if="isActive"
     ref="menu"
     :model="menuItems"
     :popup="true"
@@ -59,7 +59,6 @@ import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import {
   ComfyWorkflow,
@@ -136,28 +135,79 @@ const tooltipText = computed(() => {
   return props.item.label
 })
 
-const startRename = async () => {
-  // Check if element is hidden (collapsed breadcrumb)
-  // When collapsed, root item is hidden via CSS display:none, so use rename command
-  if (isRoot && wrapperRef.value?.offsetParent === null) {
-    await useCommandStore().execute('Comfy.RenameWorkflow')
-    return
-  }
-
-  isEditing.value = true
-  itemLabel.value = props.item.label as string
-  void nextTick(() => {
-    if (itemInputRef.value?.$el) {
-      itemInputRef.value.$el.focus()
-      itemInputRef.value.$el.select()
-      if (wrapperRef.value) {
-        itemInputRef.value.$el.style.width = `${Math.max(200, wrapperRef.value.offsetWidth)}px`
+const menuItems = computed<MenuItem[]>(() => {
+  return [
+    {
+      label: t('g.rename'),
+      icon: 'pi pi-pencil',
+      command: startRename
+    },
+    {
+      label: t('breadcrumbsMenu.duplicate'),
+      icon: 'pi pi-copy',
+      command: async () => {
+        await workflowService.duplicateWorkflow(workflowStore.activeWorkflow!)
+      },
+      visible: isRoot && !props.item.isBlueprint
+    },
+    {
+      separator: true,
+      visible: isRoot
+    },
+    {
+      label: t('menuLabels.Save'),
+      icon: 'pi pi-save',
+      command: async () => {
+        await useCommandStore().execute('Comfy.SaveWorkflow')
+      },
+      visible: isRoot
+    },
+    {
+      label: t('menuLabels.Save As'),
+      icon: 'pi pi-save',
+      command: async () => {
+        await useCommandStore().execute('Comfy.SaveWorkflowAs')
+      },
+      visible: isRoot
+    },
+    {
+      separator: true
+    },
+    {
+      label: t('breadcrumbsMenu.clearWorkflow'),
+      icon: 'pi pi-trash',
+      command: async () => {
+        await useCommandStore().execute('Comfy.ClearWorkflow')
       }
+    },
+    {
+      separator: true,
+      visible: props.item.key === 'root' && props.item.isBlueprint
+    },
+    {
+      label: t('subgraphStore.publish'),
+      icon: 'pi pi-copy',
+      command: async () => {
+        await workflowService.saveWorkflowAs(workflowStore.activeWorkflow!)
+      },
+      visible: props.item.key === 'root' && props.item.isBlueprint
+    },
+    {
+      separator: true,
+      visible: isRoot
+    },
+    {
+      label: props.item.isBlueprint
+        ? t('breadcrumbsMenu.deleteBlueprint')
+        : t('breadcrumbsMenu.deleteWorkflow'),
+      icon: 'pi pi-times',
+      command: async () => {
+        await workflowService.deleteWorkflow(workflowStore.activeWorkflow!)
+      },
+      visible: isRoot
     }
-  })
-}
-
-const { menuItems } = useWorkflowActionsMenu(startRename, { isRoot })
+  ]
+})
 
 const handleClick = (event: MouseEvent) => {
   if (isEditing.value) {
@@ -178,6 +228,20 @@ const handleClick = (event: MouseEvent) => {
   }
 }
 
+const startRename = () => {
+  isEditing.value = true
+  itemLabel.value = props.item.label as string
+  void nextTick(() => {
+    if (itemInputRef.value?.$el) {
+      itemInputRef.value.$el.focus()
+      itemInputRef.value.$el.select()
+      if (wrapperRef.value) {
+        itemInputRef.value.$el.style.width = `${Math.max(200, wrapperRef.value.offsetWidth)}px`
+      }
+    }
+  })
+}
+
 const inputBlur = async (doRename: boolean) => {
   if (doRename) {
     await rename(itemLabel.value, props.item.label as string)
@@ -185,14 +249,6 @@ const inputBlur = async (doRename: boolean) => {
 
   isEditing.value = false
 }
-
-const toggleMenu = (event: MouseEvent) => {
-  menu.value?.toggle(event)
-}
-
-defineExpose({
-  toggleMenu
-})
 </script>
 
 <style scoped>

src/components/button/IconGroup.vue

@@ -2,8 +2,7 @@
   <div
     :class="
       cn(
-        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer bg-secondary-background',
-        backgroundClass
+        'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg bg-secondary-background shadow-sm transition-all duration-200 cursor-pointer'
       )
     "
   >
@@ -13,8 +12,4 @@
 
 <script setup lang="ts">
 import { cn } from '@/utils/tailwindUtil'
-
-const { backgroundClass } = defineProps<{
-  backgroundClass?: string
-}>()
 </script>

src/components/button/MoreButton.vue

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

src/components/common/OverlayIcon.vue

@@ -1,65 +0,0 @@
-<template>
-  <span class="relative inline-flex items-center justify-center size-[1em]">
-    <i :class="mainIcon" class="text-[1em]" />
-    <i
-      :class="
-        cn(
-          subIcon,
-          'absolute leading-none pointer-events-none',
-          positionX === 'left' ? 'left-0' : 'right-0',
-          positionY === 'top' ? 'top-0' : 'bottom-0'
-        )
-      "
-      :style="subIconStyle"
-    />
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-type Position = 'top' | 'bottom' | 'left' | 'right'
-
-export interface OverlayIconProps {
-  mainIcon: string
-  subIcon: string
-  positionX?: Position
-  positionY?: Position
-  offsetX?: number
-  offsetY?: number
-  subIconScale?: number
-}
-const {
-  mainIcon,
-  subIcon,
-  positionX = 'right',
-  positionY = 'bottom',
-  offsetX = 0,
-  offsetY = 0,
-  subIconScale = 0.6
-} = defineProps<OverlayIconProps>()
-
-const textShadow = [
-  `-1px -1px 0 rgba(0, 0, 0, 0.7)`,
-  `1px -1px 0 rgba(0, 0, 0, 0.7)`,
-  `-1px 1px 0 rgba(0, 0, 0, 0.7)`,
-  `1px 1px 0 rgba(0, 0, 0, 0.7)`,
-  `-1px 0 0 rgba(0, 0, 0, 0.7)`,
-  `1px 0 0 rgba(0, 0, 0, 0.7)`,
-  `0 -1px 0 rgba(0, 0, 0, 0.7)`,
-  `0 1px 0 rgba(0, 0, 0, 0.7)`
-].join(', ')
-
-const subIconStyle = computed(() => ({
-  fontSize: `${subIconScale}em`,
-  textShadow,
-  ...(offsetX !== 0 && {
-    [positionX === 'left' ? 'left' : 'right']: `${offsetX}px`
-  }),
-  ...(offsetY !== 0 && {
-    [positionY === 'top' ? 'top' : 'bottom']: `${offsetY}px`
-  })
-}))
-</script>

src/components/common/StatusBadge.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-type Severity = 'default' | 'secondary' | 'warn' | 'danger' | 'contrast'
-
-const { label, severity = 'default' } = defineProps<{
-  label: string
-  severity?: Severity
-}>()
-
-function badgeClasses(sev: Severity): string {
-  const baseClasses =
-    'inline-flex h-3.5 items-center justify-center rounded-full px-1 text-xxxs font-semibold uppercase'
-
-  switch (sev) {
-    case 'danger':
-      return `${baseClasses} bg-destructive-background text-white`
-    case 'contrast':
-      return `${baseClasses} bg-base-foreground text-base-background`
-    case 'warn':
-      return `${baseClasses} bg-warning-background text-base-background`
-    case 'secondary':
-      return `${baseClasses} bg-secondary-background text-base-foreground`
-    default:
-      return `${baseClasses} bg-primary-background text-base-foreground`
-  }
-}
-</script>
-
-<template>
-  <span :class="badgeClasses(severity)">{{ label }}</span>
-</template>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -563,8 +563,7 @@ const {
   availableRunsOn,
   filteredCount,
   totalCount,
-  resetFilters,
-  loadFuseOptions
+  resetFilters
 } = useTemplateFiltering(navigationFilteredTemplates)
 
 /**
@@ -816,10 +815,10 @@ const pageTitle = computed(() => {
 // Initialize templates loading with useAsyncState
 const { isLoading } = useAsyncState(
   async () => {
+    // Run all operations in parallel for better performance
     await Promise.all([
       loadTemplates(),
-      workflowTemplatesStore.loadWorkflowTemplates(),
-      loadFuseOptions()
+      workflowTemplatesStore.loadWorkflowTemplates()
     ])
     return true
   },

src/components/dialog/content/MissingNodesFooter.vue

@@ -22,7 +22,7 @@
 
   <!-- OSS mode: Open Manager + Install All buttons -->
   <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <Button variant="textonly" @click="openManager">{{
+    <Button variant="textonly" size="sm" @click="openManager">{{
       $t('g.openManager')
     }}</Button>
     <PackInstallButton

src/components/dialog/content/MissingNodesHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex w-full items-center justify-between p-4">
     <div class="flex items-center gap-2">
-      <i class="icon-[lucide--triangle-alert] text-warning-background"></i>
+      <i class="icon-[lucide--triangle-alert] text-gold-600"></i>
       <p class="m-0 text-sm">
         {{
           isCloud

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,264 +1,180 @@
 <template>
-  <div
-    class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
-  >
+  <div class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
-    <div class="flex py-8 items-center justify-between px-8">
-      <h2 class="text-lg font-bold text-base-foreground m-0">
+    <div class="flex flex-col gap-4">
+      <h1 class="text-2xl font-semibold text-base-foreground m-0">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
             : $t('credits.topUp.addMoreCredits')
         }}
-      </h2>
-      <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
-        @click="() => handleClose()"
-      >
-        <i class="icon-[lucide--x] size-6" />
-      </button>
-    </div>
-    <p
-      v-if="isInsufficientCredits"
-      class="text-sm text-muted-foreground m-0 px-8"
-    >
-      {{ $t('credits.topUp.insufficientWorkflowMessage') }}
-    </p>
-
-    <!-- Preset amount buttons -->
-    <div class="px-8">
-      <h3 class="m-0 text-sm font-normal text-muted-foreground">
-        {{ $t('credits.topUp.selectAmount') }}
-      </h3>
-      <div class="flex gap-2 pt-3">
-        <Button
-          v-for="amount in PRESET_AMOUNTS"
-          :key="amount"
-          :autofocus="amount === 50"
-          variant="secondary"
-          size="lg"
-          :class="
-            cn(
-              'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
-              selectedPreset === amount && 'bg-secondary-background-selected'
-            )
-          "
-          @click="handlePresetClick(amount)"
-        >
-          ${{ amount }}
-        </Button>
+      </h1>
+      <div v-if="isInsufficientCredits" class="flex flex-col gap-2">
+        <p class="text-sm text-muted-foreground m-0 w-96">
+          {{ $t('credits.topUp.insufficientWorkflowMessage') }}
+        </p>
       </div>
-    </div>
-    <!-- Amount (USD) / Credits -->
-    <div class="flex gap-2 px-8 pt-8">
-      <!-- You Pay -->
-      <div class="flex flex-1 flex-col gap-3">
-        <div class="text-sm text-muted-foreground">
-          {{ $t('credits.topUp.youPay') }}
-        </div>
-        <FormattedNumberStepper
-          :model-value="payAmount"
-          :min="0"
-          :max="MAX_AMOUNT"
-          :step="getStepAmount"
-          @update:model-value="handlePayAmountChange"
-          @max-reached="showCeilingWarning = true"
-        >
-          <template #prefix>
-            <span class="shrink-0 text-base font-semibold text-base-foreground"
-              >$</span
-            >
-          </template>
-        </FormattedNumberStepper>
-      </div>
-
-      <!-- You Get -->
-      <div class="flex flex-1 flex-col gap-3">
-        <div class="text-sm text-muted-foreground">
-          {{ $t('credits.topUp.youGet') }}
-        </div>
-        <FormattedNumberStepper
-          v-model="creditsModel"
-          :min="0"
-          :max="usdToCredits(MAX_AMOUNT)"
-          :step="getCreditsStepAmount"
-          @max-reached="showCeilingWarning = true"
-        >
-          <template #prefix>
-            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
-          </template>
-        </FormattedNumberStepper>
+      <div v-else class="flex flex-col gap-2">
+        <p class="text-sm text-muted-foreground m-0">
+          {{ $t('credits.topUp.creditsDescription') }}
+        </p>
       </div>
     </div>
 
-    <!-- Warnings -->
+    <!-- Current Balance Section -->
+    <div class="flex flex-col gap-4">
+      <div class="flex items-baseline gap-2">
+        <UserCredit text-class="text-3xl font-bold" show-credits-only />
+        <span class="text-sm text-muted-foreground">{{
+          $t('credits.creditsAvailable')
+        }}</span>
+      </div>
+      <div v-if="formattedRenewalDate" class="text-sm text-muted-foreground">
+        {{ $t('credits.refreshes', { date: formattedRenewalDate }) }}
+      </div>
+    </div>
 
-    <p
-      v-if="isBelowMin"
-      class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
-    >
-      <i class="icon-[lucide--component] size-4" />
-      {{
-        $t('credits.topUp.minRequired', {
-          credits: formatNumber(usdToCredits(MIN_AMOUNT))
-        })
-      }}
-    </p>
-    <p
-      v-if="showCeilingWarning"
-      class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
-    >
-      <i class="icon-[lucide--component] size-4" />
-      {{
-        $t('credits.topUp.maxAllowed', {
-          credits: formatNumber(usdToCredits(MAX_AMOUNT))
-        })
-      }}
-      <span>{{ $t('credits.topUp.needMore') }}</span>
-      <a
-        href="https://www.comfy.org/cloud/enterprise"
-        target="_blank"
-        class="ml-1 text-inherit"
-        >{{ $t('credits.topUp.contactUs') }}</a
-      >
-    </p>
+    <!-- Credit Options Section -->
+    <div class="flex flex-col gap-4">
+      <span class="text-sm text-muted-foreground">
+        {{ $t('credits.topUp.howManyCredits') }}
+      </span>
+      <div class="flex flex-col gap-2">
+        <CreditTopUpOption
+          v-for="option in creditOptions"
+          :key="option.credits"
+          :credits="option.credits"
+          :description="option.description"
+          :selected="selectedCredits === option.credits"
+          @select="selectedCredits = option.credits"
+        />
+      </div>
+      <div class="flex flex-row items-center gap-2 group pt-2">
+        <i
+          class="pi pi-question-circle text-xs text-muted-foreground group-hover:text-base-foreground"
+        />
+        <span
+          class="text-sm font-normal text-muted-foreground cursor-pointer group-hover:text-base-foreground"
+          @click="togglePopover"
+        >
+          {{ t('subscription.videoTemplateBasedCredits') }}
+        </span>
+      </div>
 
-    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+      <!-- Buy Button -->
       <Button
-        :disabled="!isValidAmount || loading"
+        :disabled="!selectedCredits || loading"
         :loading="loading"
         variant="primary"
-        size="lg"
-        class="h-10 justify-center"
+        :class="cn('w-full', (!selectedCredits || loading) && 'opacity-30')"
         @click="handleBuy"
       >
-        {{ $t('credits.topUp.buyCredits') }}
+        {{ $t('credits.topUp.buy') }}
       </Button>
-      <div class="flex items-center justify-center gap-1">
+    </div>
+    <Popover
+      ref="popover"
+      append-to="body"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="{
+        root: {
+          class:
+            'rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-lg p-4 max-w-xs'
+        }
+      }"
+    >
+      <div class="flex flex-col gap-2">
+        <p class="text-sm text-base-foreground leading-normal">
+          {{ t('subscription.videoEstimateExplanation') }}
+        </p>
         <a
-          :href="pricingUrl"
+          href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
           target="_blank"
-          class="flex items-center gap-1 text-sm text-muted-foreground no-underline transition-colors hover:text-base-foreground"
+          rel="noopener noreferrer"
+          class="text-sm text-azure-600 hover:text-azure-400 no-underline flex gap-1"
         >
-          {{ $t('credits.topUp.viewPricing') }}
-          <i class="icon-[lucide--external-link] size-4" />
+          <span class="underline">
+            {{ t('subscription.videoEstimateTryTemplate') }}
+          </span>
+          <span class="no-underline" v-html="'&rarr;'"></span>
         </a>
       </div>
-    </div>
+    </Popover>
   </div>
 </template>
 
 <script setup lang="ts">
+import { Popover } from 'primevue'
 import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { creditsToUsd, usdToCredits } from '@/base/credits/comfyCredits'
+import { creditsToUsd } from '@/base/credits/comfyCredits'
+import UserCredit from '@/components/common/UserCredit.vue'
 import Button from '@/components/ui/button/Button.vue'
-import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useExternalLink } from '@/composables/useExternalLink'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
-import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
-import { useDialogService } from '@/services/dialogService'
-import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
 
+import CreditTopUpOption from './credit/CreditTopUpOption.vue'
+
+interface CreditOption {
+  credits: number
+  description: string
+}
+
 const { isInsufficientCredits = false } = defineProps<{
   isInsufficientCredits?: boolean
 }>()
 
+const { formattedRenewalDate } = useSubscription()
+
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
-const dialogStore = useDialogStore()
-const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
-const { buildDocsUrl, docsPaths } = useExternalLink()
-const { isSubscriptionEnabled } = useSubscription()
 
-// Constants
-const PRESET_AMOUNTS = [10, 25, 50, 100]
-const MIN_AMOUNT = 5
-const MAX_AMOUNT = 10000
-
-// State
-const selectedPreset = ref<number | null>(50)
-const payAmount = ref(50)
-const showCeilingWarning = ref(false)
+const selectedCredits = ref<number | null>(null)
 const loading = ref(false)
 
-// Computed
-const pricingUrl = computed(() =>
-  buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true })
-)
+const popover = ref()
 
-const creditsModel = computed({
-  get: () => usdToCredits(payAmount.value),
-  set: (newCredits: number) => {
-    payAmount.value = Math.round(creditsToUsd(newCredits))
-    selectedPreset.value = null
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+
+const creditOptions: CreditOption[] = [
+  {
+    credits: 1055, // $5.00
+    description: t('credits.topUp.videosEstimate', { count: 30 })
+  },
+  {
+    credits: 2110, // $10.00
+    description: t('credits.topUp.videosEstimate', { count: 60 })
+  },
+  {
+    credits: 4220, // $20.00
+    description: t('credits.topUp.videosEstimate', { count: 120 })
+  },
+  {
+    credits: 10550, // $50.00
+    description: t('credits.topUp.videosEstimate', { count: 301 })
   }
-})
+]
 
-const isValidAmount = computed(
-  () => payAmount.value >= MIN_AMOUNT && payAmount.value <= MAX_AMOUNT
-)
-
-const isBelowMin = computed(() => payAmount.value < MIN_AMOUNT)
-
-// Utility functions
-function formatNumber(num: number): string {
-  return num.toLocaleString('en-US')
-}
-
-// Step amount functions
-function getStepAmount(currentAmount: number): number {
-  if (currentAmount < 100) return 5
-  if (currentAmount < 1000) return 50
-  return 100
-}
-
-function getCreditsStepAmount(currentCredits: number): number {
-  const usdAmount = creditsToUsd(currentCredits)
-  return usdToCredits(getStepAmount(usdAmount))
-}
-
-// Event handlers
-function handlePayAmountChange(value: number) {
-  payAmount.value = value
-  selectedPreset.value = null
-  showCeilingWarning.value = false
-}
-
-function handlePresetClick(amount: number) {
-  showCeilingWarning.value = false
-  payAmount.value = amount
-  selectedPreset.value = amount
-}
-
-function handleClose(clearTracking = true) {
-  if (clearTracking) {
-    clearTopupTracking()
-  }
-  dialogStore.closeDialog({ key: 'top-up-credits' })
-}
-
-async function handleBuy() {
-  // Prevent double-clicks
-  if (loading.value || !isValidAmount.value) return
+const handleBuy = async () => {
+  if (!selectedCredits.value) return
 
   loading.value = true
   try {
-    telemetry?.trackApiCreditTopupButtonPurchaseClicked(payAmount.value)
-    await authActions.purchaseCredits(payAmount.value)
-
-    // Close top-up dialog (keep tracking) and open credits panel to show updated balance
-    handleClose(false)
-    dialogService.showSettingsDialog(
-      isSubscriptionEnabled() ? 'subscription' : 'credits'
-    )
+    const usdAmount = creditsToUsd(selectedCredits.value)
+    telemetry?.trackApiCreditTopupButtonPurchaseClicked(usdAmount)
+    await authActions.purchaseCredits(usdAmount)
   } catch (error) {
     console.error('Purchase failed:', error)
 

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

@@ -7,7 +7,7 @@
     pt:text="w-full"
   >
     <div class="flex items-center justify-between">
-      <div data-testid="current-user-indicator">
+      <div>
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
       <Button

src/components/graph/NodeContextMenu.vue

@@ -220,12 +220,6 @@ function show(event: MouseEvent) {
     y: screenY / scale - offset[1]
   }
 
-  // Initialize last* values to current transform to prevent updateMenuPosition
-  // from overwriting PrimeVue's flip-adjusted position on the first RAF tick
-  lastScale = scale
-  lastOffsetX = offset[0]
-  lastOffsetY = offset[1]
-
   isOpen.value = true
   contextMenu.value?.show(event)
 }

src/components/helpcenter/HelpCenterPopups.vue

@@ -1,134 +0,0 @@
-<template>
-  <!-- Help Center Popup positioned within canvas area -->
-  <Teleport to="#graph-canvas-container">
-    <div
-      v-if="isHelpCenterVisible"
-      class="help-center-popup"
-      :class="{
-        'sidebar-left':
-          triggerLocation === 'sidebar' && sidebarLocation === 'left',
-        'sidebar-right':
-          triggerLocation === 'sidebar' && sidebarLocation === 'right',
-        'topbar-right': triggerLocation === 'topbar',
-        'small-sidebar': isSmall
-      }"
-    >
-      <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': isSmall
-      }"
-    />
-  </Teleport>
-
-  <!-- WhatsNew Popup positioned within canvas area -->
-  <Teleport to="#graph-canvas-container">
-    <WhatsNewPopup
-      :class="{
-        'sidebar-left': sidebarLocation === 'left',
-        'sidebar-right': sidebarLocation === 'right',
-        'small-sidebar': isSmall
-      }"
-      @whats-new-dismissed="handleWhatsNewDismissed"
-    />
-  </Teleport>
-
-  <!-- Backdrop to close popup when clicking outside -->
-  <Teleport to="body">
-    <div
-      v-if="isHelpCenterVisible"
-      class="help-center-backdrop"
-      @click="closeHelpCenter"
-    />
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { useHelpCenter } from '@/composables/useHelpCenter'
-import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
-import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
-
-import HelpCenterMenuContent from './HelpCenterMenuContent.vue'
-
-const { isSmall = false } = defineProps<{
-  isSmall?: boolean
-}>()
-
-const {
-  isHelpCenterVisible,
-  triggerLocation,
-  sidebarLocation,
-  closeHelpCenter,
-  handleWhatsNewDismissed
-} = useHelpCenter()
-</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;
-}
-
-.help-center-popup.topbar-right {
-  top: 2rem;
-  right: 1rem;
-  bottom: auto;
-  animation: slideInDown 0.2s ease-out;
-}
-
-@keyframes slideInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>

src/components/honeyToast/HoneyToast.stories.ts

@@ -1,293 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import ProgressToastItem from '@/components/toast/ProgressToastItem.vue'
-import Button from '@/components/ui/button/Button.vue'
-import type { AssetDownload } from '@/stores/assetDownloadStore'
-import { cn } from '@/utils/tailwindUtil'
-
-import HoneyToast from './HoneyToast.vue'
-
-function createMockJob(overrides: Partial<AssetDownload> = {}): AssetDownload {
-  return {
-    taskId: 'task-1',
-    assetId: 'asset-1',
-    assetName: 'model-v1.safetensors',
-    bytesTotal: 1000000,
-    bytesDownloaded: 0,
-    progress: 0,
-    status: 'created',
-    lastUpdate: Date.now(),
-    ...overrides
-  }
-}
-
-const meta: Meta<typeof HoneyToast> = {
-  title: 'Toast/HoneyToast',
-  component: HoneyToast,
-  parameters: {
-    layout: 'fullscreen'
-  },
-  decorators: [
-    () => ({
-      template: '<div class="h-screen bg-base-background p-8"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => ({
-    components: { HoneyToast, Button, ProgressToastItem },
-    setup() {
-      const isExpanded = ref(false)
-      const jobs = [
-        createMockJob({
-          taskId: 'task-1',
-          assetName: 'model-v1.safetensors',
-          status: 'completed',
-          progress: 1
-        }),
-        createMockJob({
-          taskId: 'task-2',
-          assetName: 'lora-style.safetensors',
-          status: 'running',
-          progress: 0.45
-        }),
-        createMockJob({
-          taskId: 'task-3',
-          assetName: 'vae-decoder.safetensors',
-          status: 'created'
-        })
-      ]
-      return { isExpanded, cn, jobs }
-    },
-    template: `
-      <HoneyToast v-model:expanded="isExpanded" :visible="true">
-        <template #default>
-          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
-            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
-          </div>
-          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
-            <div class="flex flex-col gap-2">
-              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
-            </div>
-          </div>
-        </template>
-        
-        <template #footer="{ toggle }">
-          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
-            <div class="flex items-center gap-2 text-sm">
-              <i class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground" />
-              <span class="font-bold text-base-foreground">lora-style.safetensors</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="text-sm text-muted-foreground">1 of 3</span>
-              <div class="flex items-center">
-                <Button variant="muted-textonly" size="icon" @click.stop="toggle">
-                  <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </template>
-      </HoneyToast>
-    `
-  })
-}
-
-export const Expanded: Story = {
-  render: () => ({
-    components: { HoneyToast, Button, ProgressToastItem },
-    setup() {
-      const isExpanded = ref(true)
-      const jobs = [
-        createMockJob({
-          taskId: 'task-1',
-          assetName: 'model-v1.safetensors',
-          status: 'completed',
-          progress: 1
-        }),
-        createMockJob({
-          taskId: 'task-2',
-          assetName: 'lora-style.safetensors',
-          status: 'running',
-          progress: 0.45
-        }),
-        createMockJob({
-          taskId: 'task-3',
-          assetName: 'vae-decoder.safetensors',
-          status: 'created'
-        })
-      ]
-      return { isExpanded, cn, jobs }
-    },
-    template: `
-      <HoneyToast v-model:expanded="isExpanded" :visible="true">
-        <template #default>
-          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
-            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
-          </div>
-          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
-            <div class="flex flex-col gap-2">
-              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
-            </div>
-          </div>
-        </template>
-        
-        <template #footer="{ toggle }">
-          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
-            <div class="flex items-center gap-2 text-sm">
-              <i class="icon-[lucide--loader-circle] size-4 animate-spin text-muted-foreground" />
-              <span class="font-bold text-base-foreground">lora-style.safetensors</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="text-sm text-muted-foreground">1 of 3</span>
-              <div class="flex items-center">
-                <Button variant="muted-textonly" size="icon" @click.stop="toggle">
-                  <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </template>
-      </HoneyToast>
-    `
-  })
-}
-
-export const Completed: Story = {
-  render: () => ({
-    components: { HoneyToast, Button, ProgressToastItem },
-    setup() {
-      const isExpanded = ref(false)
-      const jobs = [
-        createMockJob({
-          taskId: 'task-1',
-          assetName: 'model-v1.safetensors',
-          bytesDownloaded: 1000000,
-          progress: 1,
-          status: 'completed'
-        }),
-        createMockJob({
-          taskId: 'task-2',
-          assetId: 'asset-2',
-          assetName: 'lora-style.safetensors',
-          bytesTotal: 500000,
-          bytesDownloaded: 500000,
-          progress: 1,
-          status: 'completed'
-        })
-      ]
-      return { isExpanded, cn, jobs }
-    },
-    template: `
-      <HoneyToast v-model:expanded="isExpanded" :visible="true">
-        <template #default>
-          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
-            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
-          </div>
-          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
-            <div class="flex flex-col gap-2">
-              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
-            </div>
-          </div>
-        </template>
-        
-        <template #footer="{ toggle }">
-          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
-            <div class="flex items-center gap-2 text-sm">
-              <i class="icon-[lucide--check-circle] size-4 text-jade-600" />
-              <span class="font-bold text-base-foreground">All downloads completed</span>
-            </div>
-            <div class="flex items-center">
-              <Button variant="muted-textonly" size="icon" @click.stop="toggle">
-                <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
-              </Button>
-              <Button variant="muted-textonly" size="icon">
-                <i class="icon-[lucide--x] size-4" />
-              </Button>
-            </div>
-          </div>
-        </template>
-      </HoneyToast>
-    `
-  })
-}
-
-export const WithError: Story = {
-  render: () => ({
-    components: { HoneyToast, Button, ProgressToastItem },
-    setup() {
-      const isExpanded = ref(true)
-      const jobs = [
-        createMockJob({
-          taskId: 'task-1',
-          assetName: 'model-v1.safetensors',
-          status: 'failed',
-          progress: 0.23
-        }),
-        createMockJob({
-          taskId: 'task-2',
-          assetName: 'lora-style.safetensors',
-          status: 'completed',
-          progress: 1
-        })
-      ]
-      return { isExpanded, cn, jobs }
-    },
-    template: `
-      <HoneyToast v-model:expanded="isExpanded" :visible="true">
-        <template #default>
-          <div class="flex h-12 items-center justify-between border-b border-border-default px-4">
-            <h3 class="text-sm font-bold text-base-foreground">Download Queue</h3>
-          </div>
-          <div class="relative max-h-[300px] overflow-y-auto px-4 py-4">
-            <div class="flex flex-col gap-2">
-              <ProgressToastItem v-for="job in jobs" :key="job.taskId" :job="job" />
-            </div>
-          </div>
-        </template>
-        
-        <template #footer="{ toggle }">
-          <div class="flex h-12 items-center justify-between border-t border-border-default px-4">
-            <div class="flex items-center gap-2 text-sm">
-              <i class="icon-[lucide--circle-alert] size-4 text-destructive-background" />
-              <span class="font-bold text-base-foreground">1 download failed</span>
-            </div>
-            <div class="flex items-center">
-              <Button variant="muted-textonly" size="icon" @click.stop="toggle">
-                <i :class="cn('size-4', isExpanded ? 'icon-[lucide--chevron-down]' : 'icon-[lucide--chevron-up]')" />
-              </Button>
-              <Button variant="muted-textonly" size="icon">
-                <i class="icon-[lucide--x] size-4" />
-              </Button>
-            </div>
-          </div>
-        </template>
-      </HoneyToast>
-    `
-  })
-}
-
-export const Hidden: Story = {
-  render: () => ({
-    components: { HoneyToast },
-    template: `
-      <div>
-        <p class="text-base-foreground">HoneyToast is hidden when visible=false. Nothing appears at the bottom.</p>
-        
-        <HoneyToast :visible="false">
-          <template #default>
-            <div class="px-4 py-4">Content</div>
-          </template>
-          <template #footer>
-            <div class="h-12 px-4">Footer</div>
-          </template>
-        </HoneyToast>
-      </div>
-    `
-  })
-}

src/components/honeyToast/HoneyToast.test.ts

@@ -1,137 +0,0 @@
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, h, nextTick, ref } from 'vue'
-
-import HoneyToast from './HoneyToast.vue'
-
-describe('HoneyToast', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    document.body.innerHTML = ''
-  })
-
-  function mountComponent(
-    props: { visible: boolean; expanded?: boolean } = { visible: true }
-  ): VueWrapper {
-    return mount(HoneyToast, {
-      props,
-      slots: {
-        default: (slotProps: { isExpanded: boolean }) =>
-          h(
-            'div',
-            { 'data-testid': 'content' },
-            slotProps.isExpanded ? 'expanded' : 'collapsed'
-          ),
-        footer: (slotProps: { isExpanded: boolean; toggle: () => void }) =>
-          h(
-            'button',
-            {
-              'data-testid': 'toggle-btn',
-              onClick: slotProps.toggle
-            },
-            slotProps.isExpanded ? 'Collapse' : 'Expand'
-          )
-      },
-      attachTo: document.body
-    })
-  }
-
-  it('renders when visible is true', async () => {
-    const wrapper = mountComponent({ visible: true })
-    await nextTick()
-
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast).toBeTruthy()
-
-    wrapper.unmount()
-  })
-
-  it('does not render when visible is false', async () => {
-    const wrapper = mountComponent({ visible: false })
-    await nextTick()
-
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast).toBeFalsy()
-
-    wrapper.unmount()
-  })
-
-  it('passes is-expanded=false to slots by default', async () => {
-    const wrapper = mountComponent({ visible: true })
-    await nextTick()
-
-    const content = document.body.querySelector('[data-testid="content"]')
-    expect(content?.textContent).toBe('collapsed')
-
-    wrapper.unmount()
-  })
-
-  it('applies collapsed max-height class when collapsed', async () => {
-    const wrapper = mountComponent({ visible: true, expanded: false })
-    await nextTick()
-
-    const expandableArea = document.body.querySelector(
-      '[role="status"] > div:first-child'
-    )
-    expect(expandableArea?.classList.contains('max-h-0')).toBe(true)
-
-    wrapper.unmount()
-  })
-
-  it('has aria-live="polite" for accessibility', async () => {
-    const wrapper = mountComponent({ visible: true })
-    await nextTick()
-
-    const toast = document.body.querySelector('[role="status"]')
-    expect(toast?.getAttribute('aria-live')).toBe('polite')
-
-    wrapper.unmount()
-  })
-
-  it('supports v-model:expanded with reactive parent state', async () => {
-    const TestWrapper = defineComponent({
-      components: { HoneyToast },
-      setup() {
-        const expanded = ref(false)
-        return { expanded }
-      },
-      template: `
-        <HoneyToast :visible="true" v-model:expanded="expanded">
-          <template #default="slotProps">
-            <div data-testid="content">{{ slotProps.isExpanded ? 'expanded' : 'collapsed' }}</div>
-          </template>
-          <template #footer="slotProps">
-            <button data-testid="toggle-btn" @click="slotProps.toggle">
-              {{ slotProps.isExpanded ? 'Collapse' : 'Expand' }}
-            </button>
-          </template>
-        </HoneyToast>
-      `
-    })
-
-    const wrapper = mount(TestWrapper, { attachTo: document.body })
-    await nextTick()
-
-    const content = document.body.querySelector('[data-testid="content"]')
-    expect(content?.textContent).toBe('collapsed')
-
-    const toggleBtn = document.body.querySelector(
-      '[data-testid="toggle-btn"]'
-    ) as HTMLButtonElement
-    expect(toggleBtn?.textContent?.trim()).toBe('Expand')
-
-    toggleBtn?.click()
-    await nextTick()
-
-    expect(content?.textContent).toBe('expanded')
-    expect(toggleBtn?.textContent?.trim()).toBe('Collapse')
-
-    const expandableArea = document.body.querySelector(
-      '[role="status"] > div:first-child'
-    )
-    expect(expandableArea?.classList.contains('max-h-[400px]')).toBe(true)
-
-    wrapper.unmount()
-  })
-})

src/components/honeyToast/HoneyToast.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@/utils/tailwindUtil'
-
-const { visible } = defineProps<{
-  visible: boolean
-}>()
-
-const isExpanded = defineModel<boolean>('expanded', { default: false })
-
-function toggle() {
-  isExpanded.value = !isExpanded.value
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition
-      enter-active-class="transition-all duration-300 ease-out"
-      enter-from-class="translate-y-full opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
-      leave-active-class="transition-all duration-200 ease-in"
-      leave-from-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-full opacity-0"
-    >
-      <div
-        v-if="visible"
-        role="status"
-        aria-live="polite"
-        class="fixed inset-x-0 bottom-6 z-9999 mx-auto w-4/5 max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg"
-      >
-        <div
-          :class="
-            cn(
-              'overflow-hidden transition-all duration-300',
-              isExpanded ? 'max-h-[400px]' : 'max-h-0'
-            )
-          "
-        >
-          <slot :is-expanded />
-        </div>
-
-        <slot name="footer" :is-expanded :toggle />
-      </div>
-    </Transition>
-  </Teleport>
-</template>

src/components/input/MultiSelect.vue

@@ -160,7 +160,7 @@
         >
           <i
             v-if="slotProps.selected"
-            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
+            class="text-bold icon-[lucide--check] text-xs text-white"
           />
         </div>
         <span>

src/components/load3d/Load3DControls.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-backdrop/30"
+    class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
     @pointerdown.stop
     @pointermove.stop
     @pointerup.stop
@@ -14,12 +14,12 @@
         class="rounded-full"
         @click="toggleMenu"
       >
-        <i class="pi pi-bars text-lg text-base-foreground" />
+        <i class="pi pi-bars text-lg text-white" />
       </Button>
 
       <div
         v-show="isMenuOpen"
-        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
       >
         <div class="flex flex-col">
           <Button
@@ -29,13 +29,13 @@
             :class="
               cn(
                 'flex w-full items-center justify-start',
-                activeCategory === category && 'bg-button-active-surface'
+                activeCategory === category && 'bg-smoke-600'
               )
             "
             @click="selectCategory(category)"
           >
             <i :class="getCategoryIcon(category)" />
-            <span class="whitespace-nowrap text-base-foreground">{{
+            <span class="whitespace-nowrap text-white">{{
               $t(categoryLabels[category])
             }}</span>
           </Button>
@@ -169,7 +169,7 @@ const getCategoryIcon = (category: string) => {
     export: 'pi pi-download'
   }
   // @ts-expect-error fixme ts strict error
-  return `${icons[category]} text-base-foreground text-lg`
+  return `${icons[category]} text-white text-lg`
 }
 
 const emit = defineEmits<{

src/components/load3d/LoadingOverlay.vue

@@ -2,11 +2,11 @@
   <Transition name="fade">
     <div
       v-if="loading"
-      class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
+      class="bg-opacity-50 absolute inset-0 z-50 flex items-center justify-center bg-black"
     >
       <div class="flex flex-col items-center">
         <div class="spinner" />
-        <div class="mt-4 text-lg text-base-foreground">
+        <div class="mt-4 text-lg text-white">
           {{ loadingMessage }}
         </div>
       </div>

src/components/load3d/controls/AnimationControls.vue

@@ -15,7 +15,7 @@
           :class="[
             'pi',
             playing ? 'pi-pause' : 'pi-play',
-            'text-lg text-base-foreground'
+            'text-lg text-white'
           ]"
         />
       </Button>
@@ -46,7 +46,7 @@
         class="flex-1"
         @update:model-value="handleSliderChange"
       />
-      <span class="min-w-16 text-xs text-base-foreground">
+      <span class="min-w-16 text-xs text-white">
         {{ formatTime(currentTime) }} / {{ formatTime(animationDuration) }}
       </span>
     </div>

src/components/load3d/controls/CameraControls.vue

@@ -11,7 +11,7 @@
       :aria-label="$t('load3d.switchCamera')"
       @click="switchCamera"
     >
-      <i :class="['pi', 'pi-camera', 'text-lg text-base-foreground']" />
+      <i :class="['pi', 'pi-camera', 'text-lg text-white']" />
     </Button>
     <PopupSlider
       v-if="showFOVButton"

src/components/load3d/controls/ExportControls.vue

@@ -12,18 +12,18 @@
         :aria-label="$t('load3d.exportModel')"
         @click="toggleExportFormats"
       >
-        <i class="pi pi-download text-lg text-base-foreground" />
+        <i class="pi pi-download text-lg text-white" />
       </Button>
       <div
         v-show="showExportFormats"
-        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
       >
         <div class="flex flex-col">
           <Button
             v-for="format in exportFormats"
             :key="format.value"
             variant="textonly"
-            class="text-base-foreground"
+            class="text-white"
             @click="exportModel(format.value)"
           >
             {{ format.label }}

src/components/load3d/controls/LightControls.vue

@@ -12,7 +12,7 @@
         :aria-label="$t('load3d.lightIntensity')"
         @click="toggleLightIntensity"
       >
-        <i class="pi pi-sun text-lg text-base-foreground" />
+        <i class="pi pi-sun text-lg text-white" />
       </Button>
       <div
         v-show="showLightIntensity"

src/components/load3d/controls/ModelControls.vue

@@ -12,11 +12,11 @@
         :aria-label="t('load3d.upDirection')"
         @click="toggleUpDirection"
       >
-        <i class="pi pi-arrow-up text-lg text-base-foreground" />
+        <i class="pi pi-arrow-up text-lg text-white" />
       </Button>
       <div
         v-show="showUpDirection"
-        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
       >
         <div class="flex flex-col">
           <Button
@@ -24,10 +24,7 @@
             :key="direction"
             variant="textonly"
             :class="
-              cn(
-                'text-base-foreground',
-                upDirection === direction && 'bg-blue-500'
-              )
+              cn('text-white', upDirection === direction && 'bg-blue-500')
             "
             @click="selectUpDirection(direction)"
           >
@@ -49,11 +46,11 @@
         :aria-label="t('load3d.materialMode')"
         @click="toggleMaterialMode"
       >
-        <i class="pi pi-box text-lg text-base-foreground" />
+        <i class="pi pi-box text-lg text-white" />
       </Button>
       <div
         v-show="showMaterialMode"
-        class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface shadow-lg"
+        class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
       >
         <div class="flex flex-col">
           <Button
@@ -62,7 +59,7 @@
             variant="textonly"
             :class="
               cn(
-                'whitespace-nowrap text-base-foreground',
+                'whitespace-nowrap text-white',
                 materialMode === mode && 'bg-blue-500'
               )
             "
@@ -86,7 +83,7 @@
         :aria-label="t('load3d.showSkeleton')"
         @click="showSkeleton = !showSkeleton"
       >
-        <i class="pi pi-sitemap text-lg text-base-foreground" />
+        <i class="pi pi-sitemap text-lg text-white" />
       </Button>
     </div>
   </div>

src/components/load3d/controls/PopupSlider.vue

@@ -8,11 +8,11 @@
       :aria-label="tooltipText"
       @click="toggleSlider"
     >
-      <i :class="['pi', icon, 'text-lg text-base-foreground']" />
+      <i :class="['pi', icon, 'text-lg text-white']" />
     </Button>
     <div
       v-show="showSlider"
-      class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface p-4 shadow-lg w-[150px]"
+      class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg w-[150px]"
     >
       <Slider
         v-model="value"

src/components/load3d/controls/RecordingControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-backdrop/30">
+  <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
       <Button
         v-tooltip.right="{
@@ -25,7 +25,7 @@
           :class="[
             'pi',
             isRecording ? 'pi-circle-fill' : 'pi-video',
-            'text-lg text-base-foreground'
+            'text-lg text-white'
           ]"
         />
       </Button>
@@ -42,7 +42,7 @@
         :aria-label="$t('load3d.exportRecording')"
         @click="handleExportRecording"
       >
-        <i class="pi pi-download text-lg text-base-foreground" />
+        <i class="pi pi-download text-lg text-white" />
       </Button>
 
       <Button
@@ -57,12 +57,12 @@
         :aria-label="$t('load3d.clearRecording')"
         @click="handleClearRecording"
       >
-        <i class="pi pi-trash text-lg text-base-foreground" />
+        <i class="pi pi-trash text-lg text-white" />
       </Button>
 
       <div
         v-if="recordingDuration && recordingDuration > 0 && !isRecording"
-        class="mt-1 text-center text-xs text-base-foreground"
+        class="mt-1 text-center text-xs text-white"
       >
         {{ formatDuration(recordingDuration) }}
       </div>

src/components/load3d/controls/SceneControls.vue

@@ -8,7 +8,7 @@
       :aria-label="$t('load3d.showGrid')"
       @click="toggleGrid"
     >
-      <i class="pi pi-table text-lg text-base-foreground" />
+      <i class="pi pi-table text-lg text-white" />
     </Button>
 
     <div v-if="!hasBackgroundImage">
@@ -23,7 +23,7 @@
         :aria-label="$t('load3d.backgroundColor')"
         @click="openColorPicker"
       >
-        <i class="pi pi-palette text-lg text-base-foreground" />
+        <i class="pi pi-palette text-lg text-white" />
         <input
           ref="colorPickerRef"
           type="color"
@@ -48,7 +48,7 @@
         :aria-label="$t('load3d.uploadBackgroundImage')"
         @click="openImagePicker"
       >
-        <i class="pi pi-image text-lg text-base-foreground" />
+        <i class="pi pi-image text-lg text-white" />
         <input
           ref="imagePickerRef"
           type="file"
@@ -76,7 +76,7 @@
         :aria-label="$t('load3d.panoramaMode')"
         @click="toggleBackgroundRenderMode"
       >
-        <i class="pi pi-globe text-lg text-base-foreground" />
+        <i class="pi pi-globe text-lg text-white" />
       </Button>
     </div>
 
@@ -98,7 +98,7 @@
         :aria-label="$t('load3d.removeBackgroundImage')"
         @click="removeBackgroundImage"
       >
-        <i class="pi pi-times text-lg text-base-foreground" />
+        <i class="pi pi-times text-lg text-white" />
       </Button>
     </div>
   </div>

src/components/load3d/controls/ViewerControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative rounded-lg bg-backdrop/30">
+  <div class="relative rounded-lg bg-smoke-700/30">
     <div class="flex flex-col gap-2">
       <Button
         v-tooltip.right="{
@@ -12,7 +12,7 @@
         :aria-label="t('load3d.openIn3DViewer')"
         @click="openIn3DViewer"
       >
-        <i class="pi pi-expand text-lg text-base-foreground" />
+        <i class="pi pi-expand text-lg text-white" />
       </Button>
     </div>
   </div>

src/components/maskeditor/MaskEditorContent.vue

@@ -4,7 +4,6 @@
     class="maskEditor-dialog-root flex h-full w-full flex-col"
     @contextmenu.prevent
     @dragstart="handleDragStart"
-    @keydown.stop
   >
     <div
       id="maskEditorCanvasContainer"

src/components/maskeditor/dialog/TopBarHeader.vue

@@ -11,7 +11,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-current"
+            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
           >
             <path
               d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"
@@ -35,74 +35,6 @@
           </svg>
         </button>
 
-        <div class="h-5 border-l border-border" />
-
-        <button
-          :class="iconButtonClass"
-          :title="t('maskEditor.rotateLeft')"
-          @click="onRotateLeft"
-        >
-          <svg
-            viewBox="-6 -7 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
-          >
-            <path
-              d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
-            />
-          </svg>
-        </button>
-
-        <button
-          :class="iconButtonClass"
-          :title="t('maskEditor.rotateRight')"
-          @click="onRotateRight"
-        >
-          <svg
-            viewBox="-9 -7 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
-          >
-            <g transform="scale(-1, 1)">
-              <path
-                d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
-              />
-            </g>
-          </svg>
-        </button>
-
-        <button
-          :class="iconButtonClass"
-          :title="t('maskEditor.mirrorHorizontal')"
-          @click="onMirrorHorizontal"
-        >
-          <svg
-            viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
-          >
-            <path
-              d="M7.5,1.5c-.28,0-.5.22-.5.5v11c0,.28.22.5.5.5s.5-.22.5-.5v-11c0-.28-.22-.5-.5-.5Z"
-            />
-            <path d="M3.5,4.5l-2,3,2,3v-6ZM11.5,4.5v6l2-3-2-3Z" />
-          </svg>
-        </button>
-
-        <button
-          :class="iconButtonClass"
-          :title="t('maskEditor.mirrorVertical')"
-          @click="onMirrorVertical"
-        >
-          <svg
-            viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
-          >
-            <path
-              d="M2,7.5c0-.28.22-.5.5-.5h11c.28,0,.5.22.5.5s-.22.5-.5.5h-11c-.28,0-.5-.22-.5-.5Z"
-            />
-            <path d="M4.5,4.5l3-2,3,2h-6ZM4.5,10.5h6l-3,2-3-2Z" />
-          </svg>
-        </button>
-
-        <div class="h-5 w-px bg-[var(--p-form-field-border-color)]" />
-
         <button :class="textButtonClass" @click="onInvert">
           {{ t('maskEditor.invert') }}
         </button>
@@ -131,7 +63,6 @@ import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useCanvasTools } from '@/composables/maskeditor/useCanvasTools'
-import { useCanvasTransform } from '@/composables/maskeditor/useCanvasTransform'
 import { useMaskEditorSaver } from '@/composables/maskeditor/useMaskEditorSaver'
 import { t } from '@/i18n'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -140,17 +71,16 @@ import { useMaskEditorStore } from '@/stores/maskEditorStore'
 const store = useMaskEditorStore()
 const dialogStore = useDialogStore()
 const canvasTools = useCanvasTools()
-const canvasTransform = useCanvasTransform()
 const saver = useMaskEditorSaver()
 
 const saveButtonText = ref(t('g.save'))
 const saveEnabled = ref(true)
 
 const iconButtonClass =
-  'flex h-7.5 w-12.5 items-center justify-center rounded-[10px] border border-border-default pointer-events-auto transition-colors duration-100 bg-comfy-menu-bg hover:bg-secondary-background-hover'
+  'flex h-7.5 w-12.5 items-center justify-center rounded-[10px] border border-[var(--p-form-field-border-color)] pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-secondary-background-hover'
 
 const textButtonClass =
-  'h-7.5 w-15 rounded-[10px] border border-border-default text-current font-sans pointer-events-auto transition-colors duration-100 bg-comfy-menu-bg hover:bg-secondary-background-hover'
+  'h-7.5 w-15 rounded-[10px] border border-[var(--p-form-field-border-color)] text-[var(--input-text)] font-sans pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-secondary-background-hover'
 
 const onUndo = () => {
   store.canvasHistory.undo()
@@ -160,38 +90,6 @@ const onRedo = () => {
   store.canvasHistory.redo()
 }
 
-const onRotateLeft = async () => {
-  try {
-    await canvasTransform.rotateCounterclockwise()
-  } catch (error) {
-    console.error('[TopBarHeader] Rotate left failed:', error)
-  }
-}
-
-const onRotateRight = async () => {
-  try {
-    await canvasTransform.rotateClockwise()
-  } catch (error) {
-    console.error('[TopBarHeader] Rotate right failed:', error)
-  }
-}
-
-const onMirrorHorizontal = async () => {
-  try {
-    await canvasTransform.mirrorHorizontal()
-  } catch (error) {
-    console.error('[TopBarHeader] Mirror horizontal failed:', error)
-  }
-}
-
-const onMirrorVertical = async () => {
-  try {
-    await canvasTransform.mirrorVertical()
-  } catch (error) {
-    console.error('[TopBarHeader] Mirror vertical failed:', error)
-  }
-}
-
 const onInvert = () => {
   canvasTools.invertMask()
 }

src/components/primevueOverride/SelectPlus.vue

@@ -1,19 +0,0 @@
-<script>
-import Select from 'primevue/select'
-
-export default {
-  name: 'SelectPlus',
-  extends: Select,
-  emits: ['hide'],
-  methods: {
-    onOverlayLeave() {
-      this.unbindOutsideClickListener()
-      this.unbindScrollListener()
-      this.unbindResizeListener()
-
-      this.$emit('hide')
-      this.overlay = null
-    }
-  }
-}
-</script>

src/components/queue/job/QueueJobItem.vue

@@ -50,22 +50,20 @@
       <div
         v-if="
           props.state === 'running' &&
-          hasAnyProgressPercent(
-            props.progressTotalPercent,
-            props.progressCurrentPercent
-          )
+          (props.progressTotalPercent !== undefined ||
+            props.progressCurrentPercent !== undefined)
         "
-        :class="progressBarContainerClass"
+        class="absolute inset-0"
       >
         <div
-          v-if="hasProgressPercent(props.progressTotalPercent)"
-          :class="progressBarPrimaryClass"
-          :style="progressPercentStyle(props.progressTotalPercent)"
+          v-if="props.progressTotalPercent !== undefined"
+          class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
+          :style="{ width: `${props.progressTotalPercent}%` }"
         />
         <div
-          v-if="hasProgressPercent(props.progressCurrentPercent)"
-          :class="progressBarSecondaryClass"
-          :style="progressPercentStyle(props.progressCurrentPercent)"
+          v-if="props.progressCurrentPercent !== undefined"
+          class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
+          :style="{ width: `${props.progressCurrentPercent}%` }"
         />
       </div>
 
@@ -203,7 +201,6 @@ import { useI18n } from 'vue-i18n'
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
@@ -248,14 +245,6 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const {
-  progressBarContainerClass,
-  progressBarPrimaryClass,
-  progressBarSecondaryClass,
-  hasProgressPercent,
-  hasAnyProgressPercent,
-  progressPercentStyle
-} = useProgressBarBackground()
 
 const cancelTooltipConfig = computed(() => buildTooltipConfig(t('g.cancel')))
 const deleteTooltipConfig = computed(() => buildTooltipConfig(t('g.delete')))

src/components/rightSidePanel/RightSidePanel.test.ts

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, shallowRef } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import enMessages from '@/locales/en/main.json'
+import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+import RightSidePanel from './RightSidePanel.vue'
+
+const mockNodeManager = shallowRef<GraphNodeManager | null>(null)
+
+vi.mock('@/composables/graph/useVueNodeLifecycle', () => ({
+  useVueNodeLifecycle: () => ({
+    nodeManager: mockNodeManager
+  })
+}))
+
+// Mock useLayoutMutations (used by useGraphNodeManager)
+vi.mock('@/renderer/core/layout/operations/layoutMutations', () => ({
+  useLayoutMutations: () => ({
+    createNode: vi.fn(),
+    setSource: vi.fn()
+  })
+}))
+
+const createMountConfig = () => {
+  return {
+    global: {
+      stubs: {
+        TabParameters: true
+      },
+      plugins: [
+        createI18n({
+          legacy: false,
+          locale: 'en',
+          messages: { en: enMessages }
+        })
+      ]
+    }
+  }
+}
+
+const setupGraph = () => {
+  const graph = new LGraph()
+  mockNodeManager.value = useGraphNodeManager(graph)
+  return { graph, canvasStore: useCanvasStore() }
+}
+
+describe('RightSidePanel', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockNodeManager.value = null
+  })
+
+  describe('title reactivity', () => {
+    it('updates panel title when node.title changes', async () => {
+      const { graph, canvasStore } = setupGraph()
+
+      const node = new LGraphNode('Original Title', 'TestNode')
+      graph.add(node)
+      canvasStore.selectedItems = [node]
+
+      const wrapper = mount(RightSidePanel, createMountConfig())
+      await nextTick()
+      expect(wrapper.text()).toContain('Original Title')
+
+      node.title = 'Updated Title'
+
+      await nextTick()
+      expect(wrapper.text()).toContain('Updated Title')
+    })
+
+    it('shows selection count message when multiple nodes are selected', async () => {
+      const { graph, canvasStore } = setupGraph()
+
+      const node1 = new LGraphNode('Node 1', 'TestNode')
+      const node2 = new LGraphNode('Node 2', 'TestNode')
+      graph.add(node1)
+      graph.add(node2)
+      canvasStore.selectedItems = [node1, node2]
+
+      const wrapper = mount(RightSidePanel, createMountConfig())
+      await nextTick()
+
+      expect(wrapper.text()).toContain('2')
+      expect(wrapper.text()).not.toContain('Node 1')
+      expect(wrapper.text()).not.toContain('Node 2')
+    })
+  })
+})

src/components/rightSidePanel/RightSidePanel.vue

@@ -1,41 +1,34 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, provide, ref, watchEffect } from 'vue'
+import { computed, ref, toValue, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 import TabInfo from './info/TabInfo.vue'
-import TabGlobalParameters from './parameters/TabGlobalParameters.vue'
-import TabNodes from './parameters/TabNodes.vue'
-import TabNormalInputs from './parameters/TabNormalInputs.vue'
-import TabSubgraphInputs from './parameters/TabSubgraphInputs.vue'
-import TabGlobalSettings from './settings/TabGlobalSettings.vue'
+import TabParameters from './parameters/TabParameters.vue'
 import TabSettings from './settings/TabSettings.vue'
-import {
-  GetNodeParentGroupKey,
-  useFlatAndCategorizeSelectedItems
-} from './shared'
 import SubgraphEditor from './subgraph/SubgraphEditor.vue'
 
 const canvasStore = useCanvasStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
+const { nodeManager } = useVueNodeLifecycle()
 const { t } = useI18n()
-const { findParentGroup } = useGraphHierarchy()
 
-const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore)
+const { selectedItems } = storeToRefs(canvasStore)
 const { activeTab, isEditingSubgraph } = storeToRefs(rightSidePanelStore)
 
 const sidebarLocation = computed<'left' | 'right'>(() =>
@@ -49,31 +42,36 @@ const panelIcon = computed(() =>
     : 'icon-[lucide--panel-right]'
 )
 
-const { flattedItems, selectedNodes, selectedGroups, nodeToParentGroup } =
-  useFlatAndCategorizeSelectedItems(directlySelectedItems)
+const hasSelection = computed(() => selectedItems.value.length > 0)
 
-const shouldShowGroupNames = computed(() => {
-  return !(
-    directlySelectedItems.value.length === 1 &&
-    (selectedGroups.value.length === 1 || selectedNodes.value.length === 1)
-  )
+const selectedNodes = computed((): LGraphNode[] => {
+  return selectedItems.value.filter(isLGraphNode)
 })
 
-provide(GetNodeParentGroupKey, (node: LGraphNode) => {
-  if (!shouldShowGroupNames.value) return null
-  return nodeToParentGroup.value.get(node) ?? findParentGroup(node)
+const isSubgraphNode = computed(() => {
+  return selectedNode.value instanceof SubgraphNode
 })
 
-const hasSelection = computed(() => flattedItems.value.length > 0)
+const isSingleNodeSelected = computed(() => selectedNodes.value.length === 1)
 
-const selectedSingleNode = computed(() => {
-  return selectedNodes.value.length === 1 && flattedItems.value.length === 1
-    ? selectedNodes.value[0]
-    : null
+const selectedNode = computed(() => {
+  return isSingleNodeSelected.value ? selectedNodes.value[0] : null
 })
 
-const isSingleSubgraphNode = computed(() => {
-  return selectedSingleNode.value instanceof SubgraphNode
+const selectionCount = computed(() => selectedItems.value.length)
+
+const selectedNodeTitle = computed(() => {
+  if (!selectedNode.value) return null
+  const nodeId = String(selectedNode.value.id)
+  const nodeData = nodeManager.value?.vueNodeData.get(nodeId)
+  return nodeData?.title || selectedNode.value.title || selectedNode.value.type
+})
+
+const panelTitle = computed(() => {
+  if (isSingleNodeSelected.value && selectedNode.value) {
+    return selectedNodeTitle.value || 'Node'
+  }
+  return t('rightSidePanel.title', { count: selectionCount.value })
 })
 
 function closePanel() {
@@ -86,40 +84,25 @@ type RightSidePanelTabList = Array<{
 }>
 
 const tabs = computed<RightSidePanelTabList>(() => {
-  const list: RightSidePanelTabList = []
-
-  list.push({
-    label: () =>
-      flattedItems.value.length > 1
-        ? t('rightSidePanel.nodes')
-        : t('rightSidePanel.parameters'),
-    value: 'parameters'
-  })
-
-  if (!hasSelection.value) {
+  const list: RightSidePanelTabList = [
+    {
+      label: () => t('rightSidePanel.parameters'),
+      value: 'parameters'
+    },
+    {
+      label: () => t('g.settings'),
+      value: 'settings'
+    }
+  ]
+  if (
+    !hasSelection.value ||
+    (isSingleNodeSelected.value && !isSubgraphNode.value)
+  ) {
     list.push({
-      label: () => t('rightSidePanel.nodes'),
-      value: 'nodes'
+      label: () => t('rightSidePanel.info'),
+      value: 'info'
     })
   }
-
-  if (hasSelection.value) {
-    if (selectedSingleNode.value && !isSingleSubgraphNode.value) {
-      list.push({
-        label: () => t('rightSidePanel.info'),
-        value: 'info'
-      })
-    }
-  }
-
-  list.push({
-    label: () =>
-      hasSelection.value
-        ? t('g.settings')
-        : t('rightSidePanel.globalSettings.title'),
-    value: 'settings'
-  })
-
   return list
 })
 
@@ -127,59 +110,27 @@ const tabs = computed<RightSidePanelTabList>(() => {
 watchEffect(() => {
   if (
     !tabs.value.some((tab) => tab.value === activeTab.value) &&
-    !(activeTab.value === 'subgraph' && isSingleSubgraphNode.value)
+    !(activeTab.value === 'subgraph' && isSubgraphNode.value)
   ) {
     rightSidePanelStore.openPanel(tabs.value[0].value)
   }
 })
 
-function resolveTitle() {
-  const items = flattedItems.value
-  const nodes = selectedNodes.value
-  const groups = selectedGroups.value
-
-  if (items.length === 0) {
-    return t('rightSidePanel.workflowOverview')
-  }
-  if (directlySelectedItems.value.length === 1) {
-    if (groups.length === 1) {
-      return groups[0].title || t('rightSidePanel.fallbackGroupTitle')
-    }
-    if (nodes.length === 1) {
-      return (
-        nodes[0].title || nodes[0].type || t('rightSidePanel.fallbackNodeTitle')
-      )
-    }
-  }
-  return t('rightSidePanel.title', { count: items.length })
-}
-
-const panelTitle = ref(resolveTitle())
-watchEffect(() => (panelTitle.value = resolveTitle()))
-
 const isEditing = ref(false)
 
-const allowTitleEdit = computed(() => {
-  return (
-    directlySelectedItems.value.length === 1 &&
-    (selectedGroups.value.length === 1 || selectedNodes.value.length === 1)
-  )
-})
-
 function handleTitleEdit(newTitle: string) {
   isEditing.value = false
 
   const trimmedTitle = newTitle.trim()
   if (!trimmedTitle) return
 
-  const node = selectedGroups.value[0] || selectedNodes.value[0]
+  const node = toValue(selectedNode)
   if (!node) return
 
   if (trimmedTitle === node.title) return
 
   node.title = trimmedTitle
-  panelTitle.value = trimmedTitle
-  canvasStore.canvas?.setDirty(true, true)
+  canvasStore.canvas?.setDirty(true, false)
 }
 
 function handleTitleCancel() {
@@ -190,28 +141,21 @@ function handleTitleCancel() {
 <template>
   <div
     data-testid="properties-panel"
-    class="flex size-full flex-col bg-comfy-menu-bg"
+    class="flex size-full flex-col bg-interface-panel-surface"
   >
     <!-- Panel Header -->
     <section class="pt-1">
       <div class="flex items-center justify-between pl-4 pr-3">
-        <h3 class="my-3.5 text-sm font-semibold line-clamp-2 cursor-default">
-          <template v-if="allowTitleEdit">
-            <EditableText
-              :model-value="panelTitle"
-              :is-editing="isEditing"
-              :input-attrs="{ 'data-testid': 'node-title-input' }"
-              class="cursor-text"
-              @edit="handleTitleEdit"
-              @cancel="handleTitleCancel"
-              @click="isEditing = true"
-            />
-            <i
-              v-if="!isEditing"
-              class="icon-[lucide--pencil] size-4 text-muted-foreground ml-2 content-center relative top-[2px] hover:text-base-foreground cursor-pointer shrink-0"
-              @click="isEditing = true"
-            />
-          </template>
+        <h3 class="my-3.5 text-sm font-semibold line-clamp-2">
+          <EditableText
+            v-if="isSingleNodeSelected"
+            :model-value="panelTitle"
+            :is-editing="isEditing"
+            :input-attrs="{ 'data-testid': 'node-title-input' }"
+            @edit="handleTitleEdit"
+            @cancel="handleTitleCancel"
+            @dblclick="isEditing = true"
+          />
           <template v-else>
             {{ panelTitle }}
           </template>
@@ -219,7 +163,7 @@ function handleTitleCancel() {
 
         <div class="flex gap-2">
           <Button
-            v-if="isSingleSubgraphNode"
+            v-if="isSubgraphNode"
             variant="secondary"
             size="icon"
             :class="cn(isEditingSubgraph && 'bg-secondary-background-selected')"
@@ -242,7 +186,7 @@ function handleTitleCancel() {
           </Button>
         </div>
       </div>
-      <nav class="px-4 pb-2 pt-1 overflow-x-auto">
+      <nav v-if="hasSelection" class="px-4 pb-2 pt-1">
         <TabList
           :model-value="activeTab"
           @update:model-value="
@@ -254,7 +198,7 @@ function handleTitleCancel() {
           <Tab
             v-for="tab in tabs"
             :key="tab.value"
-            class="text-sm py-1 px-2 font-inter transition-all active:scale-95"
+            class="text-sm py-1 px-2 font-inter"
             :value="tab.value"
           >
             {{ tab.label() }}
@@ -265,29 +209,25 @@ function handleTitleCancel() {
 
     <!-- Panel Content -->
     <div class="scrollbar-thin flex-1 overflow-y-auto">
-      <template v-if="!hasSelection">
-        <TabGlobalParameters v-if="activeTab === 'parameters'" />
-        <TabNodes v-else-if="activeTab === 'nodes'" />
-        <TabGlobalSettings v-else-if="activeTab === 'settings'" />
-      </template>
+      <div
+        v-if="!hasSelection"
+        class="flex size-full p-4 items-start justify-start text-sm text-muted-foreground"
+      >
+        {{ $t('rightSidePanel.noSelection') }}
+      </div>
       <SubgraphEditor
-        v-else-if="isSingleSubgraphNode && isEditingSubgraph"
-        :node="selectedSingleNode"
+        v-else-if="isSubgraphNode && isEditingSubgraph"
+        :node="selectedNode"
       />
       <template v-else>
-        <TabSubgraphInputs
-          v-if="activeTab === 'parameters' && isSingleSubgraphNode"
-          :node="selectedSingleNode as SubgraphNode"
-        />
-        <TabNormalInputs
-          v-else-if="activeTab === 'parameters'"
+        <TabParameters
+          v-if="activeTab === 'parameters'"
           :nodes="selectedNodes"
-          :must-show-node-title="selectedGroups.length > 0"
         />
         <TabInfo v-else-if="activeTab === 'info'" :nodes="selectedNodes" />
         <TabSettings
           v-else-if="activeTab === 'settings'"
-          :nodes="flattedItems"
+          :nodes="selectedNodes"
         />
       </template>
     </div>

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -1,70 +1,54 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-
 import { cn } from '@/utils/tailwindUtil'
 
-import TransitionCollapse from './TransitionCollapse.vue'
-
-const props = defineProps<{
-  disabled?: boolean
-  label?: string
-  enableEmptyState?: boolean
-  tooltip?: string
+defineProps<{
+  isEmpty?: boolean
 }>()
 
 const isCollapse = defineModel<boolean>('collapse', { default: false })
-
-const isExpanded = computed(() => !isCollapse.value && !props.disabled)
-
-const tooltipConfig = computed(() => {
-  if (!props.tooltip) return undefined
-  return { value: props.tooltip, showDelay: 1000 }
-})
 </script>
 
 <template>
-  <div class="flex flex-col bg-comfy-menu-bg">
+  <div class="flex flex-col bg-interface-panel-surface">
     <div
       class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
     >
       <button
-        v-tooltip="tooltipConfig"
+        v-tooltip="
+          isEmpty
+            ? {
+                value: $t('rightSidePanel.inputsNoneTooltip'),
+                showDelay: 1_000
+              }
+            : undefined
+        "
         type="button"
         :class="
           cn(
             'group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
-            !disabled && 'cursor-pointer'
+            !isEmpty && 'cursor-pointer'
           )
         "
-        :disabled="disabled"
+        :disabled="isEmpty"
         @click="isCollapse = !isCollapse"
       >
-        <span class="text-sm font-semibold line-clamp-2 flex-1">
-          <slot name="label">
-            {{ label }}
-          </slot>
+        <span class="text-sm font-semibold line-clamp-2">
+          <slot name="label" />
         </span>
 
         <i
+          v-if="!isEmpty"
           :class="
             cn(
-              'text-muted-foreground group-hover:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
-              isCollapse && '-rotate-180',
-              disabled && 'opacity-0'
+              'text-muted-foreground group-hover:text-base-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
+              isCollapse && '-rotate-180'
             )
           "
         />
       </button>
     </div>
-    <TransitionCollapse>
-      <div v-if="isExpanded" class="pb-4">
-        <slot />
-      </div>
-      <slot v-else-if="enableEmptyState && disabled" name="empty">
-        <div>
-          {{ $t('g.empty') }}
-        </div>
-      </slot>
-    </TransitionCollapse>
+    <div v-if="!isCollapse && !isEmpty" class="pb-4">
+      <slot />
+    </div>
   </div>
 </template>

src/components/rightSidePanel/layout/SidePanelSearch.vue

@@ -1,30 +1,23 @@
 <script setup lang="ts">
 import { refDebounced } from '@vueuse/core'
 import { ref, toRef, toValue, watch } from 'vue'
-import type { HTMLAttributes, MaybeRefOrGetter } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const {
-  searcher = async () => {},
-  updateKey,
-  autofocus = false,
-  class: customClass
-} = defineProps<{
+const { searcher = async () => {}, updateKey } = defineProps<{
   searcher?: (
     query: string,
     onCleanup: (cleanupFn: () => void) => void
   ) => Promise<void>
   updateKey?: MaybeRefOrGetter<unknown>
-  autofocus?: boolean
-  class?: HTMLAttributes['class']
 }>()
 
 const searchQuery = defineModel<string>({ default: '' })
 
 const isQuerying = ref(false)
-const debouncedSearchQuery = refDebounced(searchQuery, 250, {
-  maxWait: 1000
+const debouncedSearchQuery = refDebounced(searchQuery, 100, {
+  maxWait: 100
 })
 watch(searchQuery, (value) => {
   isQuerying.value = value !== debouncedSearchQuery.value
@@ -51,54 +44,34 @@ watch(
   },
   { immediate: true }
 )
-
-function handleFocus(event: FocusEvent) {
-  const target = event.target as HTMLInputElement
-  target.select()
-}
 </script>
 
 <template>
   <label
     :class="
       cn(
-        'group',
-        'bg-component-node-widget-background rounded-lg transition-all duration-150',
-        'flex-1 flex items-center',
+        'mt-1 py-1.5 bg-secondary-background rounded-lg transition-all duration-150',
+        'flex-1 flex gap-2 px-2 items-center',
         'text-base-foreground border-0',
-        'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80',
-        customClass
+        'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80'
       )
     "
   >
     <i
       :class="
         cn(
-          'size-4 ml-2 shrink-0 transition-colors duration-150',
+          'size-4 text-muted-foreground',
           isQuerying
             ? 'icon-[lucide--loader-circle] animate-spin'
-            : 'icon-[lucide--search]',
-          searchQuery?.trim() !== ''
-            ? 'text-base-foreground'
-            : 'text-muted-foreground group-hover:text-base-foreground group-focus-within:text-base-foreground'
+            : 'icon-[lucide--search]'
         )
       "
     />
     <input
       v-model="searchQuery"
       type="text"
-      class="bg-transparent border-0 outline-0 ring-0 h-5 w-full my-1.5 mx-2"
+      class="bg-transparent border-0 outline-0 ring-0 h-5"
       :placeholder="$t('g.searchPlaceholder')"
-      :autofocus
-      @focus="handleFocus"
     />
-    <button
-      v-if="searchQuery.trim().length > 0"
-      class="text-muted-foreground hover:text-base-foreground bg-transparent shrink-0 border-0 outline-0 ring-0 p-0 m-0 pr-3 pl-1 flex items-center justify-center transition-all duration-150 hover:scale-108"
-      :aria-label="$t('g.clear')"
-      @click="searchQuery = ''"
-    >
-      <i :class="cn('icon-[lucide--delete] size-4 cursor-pointer')" />
-    </button>
   </label>
 </template>

src/components/rightSidePanel/layout/TransitionCollapse.vue

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-
-// From: https://stackoverflow.com/a/71426342/22392721
-interface Props {
-  duration?: number
-  easingEnter?: string
-  easingLeave?: string
-  opacityClosed?: number
-  opacityOpened?: number
-  disable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  duration: 150,
-  easingEnter: 'ease-in-out',
-  easingLeave: 'ease-in-out',
-  opacityClosed: 0,
-  opacityOpened: 1
-})
-
-const closed = '0px'
-
-const isMounted = ref(false)
-onMounted(() => (isMounted.value = true))
-
-const duration = computed(() =>
-  isMounted.value && !props.disable ? props.duration : 0
-)
-
-interface initialStyle {
-  height: string
-  width: string
-  position: string
-  visibility: string
-  overflow: string
-  paddingTop: string
-  paddingBottom: string
-  borderTopWidth: string
-  borderBottomWidth: string
-  marginTop: string
-  marginBottom: string
-}
-
-function getElementStyle(element: HTMLElement) {
-  return {
-    height: element.style.height,
-    width: element.style.width,
-    position: element.style.position,
-    visibility: element.style.visibility,
-    overflow: element.style.overflow,
-    paddingTop: element.style.paddingTop,
-    paddingBottom: element.style.paddingBottom,
-    borderTopWidth: element.style.borderTopWidth,
-    borderBottomWidth: element.style.borderBottomWidth,
-    marginTop: element.style.marginTop,
-    marginBottom: element.style.marginBottom
-  }
-}
-
-function prepareElement(element: HTMLElement, initialStyle: initialStyle) {
-  const { width } = getComputedStyle(element)
-  element.style.width = width
-  element.style.position = 'absolute'
-  element.style.visibility = 'hidden'
-  element.style.height = ''
-  const { height } = getComputedStyle(element)
-  element.style.width = initialStyle.width
-  element.style.position = initialStyle.position
-  element.style.visibility = initialStyle.visibility
-  element.style.height = closed
-  element.style.overflow = 'hidden'
-  return initialStyle.height && initialStyle.height !== closed
-    ? initialStyle.height
-    : height
-}
-
-function animateTransition(
-  element: HTMLElement,
-  initialStyle: initialStyle,
-  done: () => void,
-  keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
-  options?: number | KeyframeAnimationOptions
-) {
-  const animation = element.animate(keyframes, options)
-  // Set height to 'auto' to restore it after animation
-  element.style.height = initialStyle.height
-  animation.onfinish = () => {
-    element.style.overflow = initialStyle.overflow
-    done()
-  }
-}
-
-function getEnterKeyframes(height: string, initialStyle: initialStyle) {
-  return [
-    {
-      height: closed,
-      opacity: props.opacityClosed,
-      paddingTop: closed,
-      paddingBottom: closed,
-      borderTopWidth: closed,
-      borderBottomWidth: closed,
-      marginTop: closed,
-      marginBottom: closed
-    },
-    {
-      height,
-      opacity: props.opacityOpened,
-      paddingTop: initialStyle.paddingTop,
-      paddingBottom: initialStyle.paddingBottom,
-      borderTopWidth: initialStyle.borderTopWidth,
-      borderBottomWidth: initialStyle.borderBottomWidth,
-      marginTop: initialStyle.marginTop,
-      marginBottom: initialStyle.marginBottom
-    }
-  ]
-}
-
-function enterTransition(element: Element, done: () => void) {
-  const HTMLElement = element as HTMLElement
-  const initialStyle = getElementStyle(HTMLElement)
-  const height = prepareElement(HTMLElement, initialStyle)
-  const keyframes = getEnterKeyframes(height, initialStyle)
-  const options = { duration: duration.value, easing: props.easingEnter }
-  animateTransition(HTMLElement, initialStyle, done, keyframes, options)
-}
-
-function leaveTransition(element: Element, done: () => void) {
-  const HTMLElement = element as HTMLElement
-  const initialStyle = getElementStyle(HTMLElement)
-  const { height } = getComputedStyle(HTMLElement)
-  HTMLElement.style.height = height
-  HTMLElement.style.overflow = 'hidden'
-  const keyframes = getEnterKeyframes(height, initialStyle).reverse()
-  const options = { duration: duration.value, easing: props.easingLeave }
-  animateTransition(HTMLElement, initialStyle, done, keyframes, options)
-}
-</script>
-
-<template>
-  <Transition :css="false" @enter="enterTransition" @leave="leaveTransition">
-    <slot />
-  </Transition>
-</template>

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -1,185 +1,87 @@
 <script setup lang="ts">
-import { computed, inject, provide, ref, shallowRef, watchEffect } from 'vue'
+import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
-import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
-import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
-import type {
-  LGraphGroup,
-  LGraphNode,
-  SubgraphNode
-} from '@/lib/litegraph/src/litegraph'
+import { useReactiveWidgetValue } from '@/composables/graph/useGraphNodeManager'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
+import {
+  getComponent,
+  shouldExpand
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+import { cn } from '@/utils/tailwindUtil'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
-import { GetNodeParentGroupKey } from '../shared'
-import WidgetItem from './WidgetItem.vue'
 
-const {
-  label,
-  node,
-  widgets: widgetsProp,
-  showLocateButton = false,
-  isDraggable = false,
-  hiddenFavoriteIndicator = false,
-  showNodeName = false,
-  parents = [],
-  enableEmptyState = false,
-  tooltip
-} = defineProps<{
+const { label, widgets } = defineProps<{
   label?: string
-  parents?: SubgraphNode[]
-  node?: LGraphNode
   widgets: { widget: IBaseWidget; node: LGraphNode }[]
-  showLocateButton?: boolean
-  isDraggable?: boolean
-  hiddenFavoriteIndicator?: boolean
-  showNodeName?: boolean
-  /**
-   * Whether to show the empty state slot when there are no widgets.
-   */
-  enableEmptyState?: boolean
-  tooltip?: string
 }>()
 
-const collapse = defineModel<boolean>('collapse', { default: false })
-
-const widgetsContainer = ref<HTMLElement>()
-const rootElement = ref<HTMLElement>()
-
-const widgets = shallowRef(widgetsProp)
-watchEffect(() => (widgets.value = widgetsProp))
-
 provide('hideLayoutField', true)
 
 const canvasStore = useCanvasStore()
 const { t } = useI18n()
 
-const getNodeParentGroup = inject(GetNodeParentGroupKey, null)
-
-function isWidgetShownOnParents(
-  widgetNode: LGraphNode,
-  widget: IBaseWidget
-): boolean {
-  if (!parents.length) return false
-  const proxyWidgets = parseProxyWidgets(parents[0].properties.proxyWidgets)
-
-  // For proxy widgets (already promoted), check using overlay information
-  if (isProxyWidget(widget)) {
-    return proxyWidgets.some(
-      ([nodeId, widgetName]) =>
-        widget._overlay.nodeId == nodeId &&
-        widget._overlay.widgetName === widgetName
-    )
-  }
-
-  // For regular widgets (not yet promoted), check using node ID and widget name
-  return proxyWidgets.some(
-    ([nodeId, widgetName]) =>
-      widgetNode.id == nodeId && widget.name === widgetName
-  )
+function getWidgetComponent(widget: IBaseWidget) {
+  const component = getComponent(widget.type, widget.name)
+  return component || WidgetLegacy
 }
 
-const isEmpty = computed(() => widgets.value.length === 0)
+function onWidgetValueChange(
+  widget: IBaseWidget,
+  value: string | number | boolean | object
+) {
+  widget.value = value
+  widget.callback?.(value)
+  canvasStore.canvas?.setDirty(true, true)
+}
+
+const isEmpty = computed(() => widgets.length === 0)
 
 const displayLabel = computed(
-  () => label ?? (node ? node.title : t('rightSidePanel.inputs'))
+  () =>
+    label ??
+    (isEmpty.value
+      ? t('rightSidePanel.inputsNone')
+      : t('rightSidePanel.inputs'))
 )
-
-const targetNode = computed<LGraphNode | null>(() => {
-  if (node) return node
-  if (isEmpty.value) return null
-
-  const firstNodeId = widgets.value[0].node.id
-  const allSameNode = widgets.value.every(({ node }) => node.id === firstNodeId)
-
-  return allSameNode ? widgets.value[0].node : null
-})
-
-const parentGroup = computed<LGraphGroup | null>(() => {
-  if (!targetNode.value || !getNodeParentGroup) return null
-  return getNodeParentGroup(targetNode.value)
-})
-
-const canShowLocateButton = computed(
-  () => showLocateButton && targetNode.value !== null
-)
-
-function handleLocateNode() {
-  if (!targetNode.value || !canvasStore.canvas) return
-
-  const graphNode = canvasStore.canvas.graph?.getNodeById(targetNode.value.id)
-  if (graphNode) {
-    canvasStore.canvas.animateToBounds(graphNode.boundingRect)
-  }
-}
-
-defineExpose({
-  widgetsContainer,
-  rootElement
-})
 </script>
 
 <template>
-  <div ref="rootElement">
-    <PropertiesAccordionItem
-      v-model:collapse="collapse"
-      :enable-empty-state
-      :disabled="isEmpty"
-      :tooltip
-    >
-      <template #label>
-        <div class="flex items-center gap-2 flex-1 min-w-0">
-          <span class="flex-1 flex items-center gap-2 min-w-0">
-            <span class="truncate">
-              <slot name="label">
-                {{ displayLabel }}
-              </slot>
-            </span>
-            <span
-              v-if="parentGroup"
-              class="text-xs text-muted-foreground truncate flex-1 text-right min-w-11"
-              :title="parentGroup.title"
-            >
-              {{ parentGroup.title }}
-            </span>
-          </span>
-          <Button
-            v-if="canShowLocateButton"
-            variant="textonly"
-            size="icon-sm"
-            class="subbutton shrink-0 mr-3 size-8 cursor-pointer text-muted-foreground hover:text-base-foreground"
-            :title="t('rightSidePanel.locateNode')"
-            :aria-label="t('rightSidePanel.locateNode')"
-            @click.stop="handleLocateNode"
-          >
-            <i class="icon-[lucide--locate] size-4" />
-          </Button>
-        </div>
-      </template>
-
-      <template #empty><slot name="empty" /></template>
+  <PropertiesAccordionItem :is-empty>
+    <template #label>
+      <slot name="label">
+        {{ displayLabel }}
+      </slot>
+    </template>
 
+    <div v-if="!isEmpty" class="space-y-4 rounded-lg bg-interface-surface px-4">
       <div
-        ref="widgetsContainer"
-        class="space-y-2 rounded-lg px-4 pt-1 relative"
+        v-for="({ widget, node }, index) in widgets"
+        :key="`widget-${index}-${widget.name}`"
+        class="widget-item gap-1.5 col-span-full grid grid-cols-subgrid"
       >
-        <TransitionGroup name="list-scale">
-          <WidgetItem
-            v-for="{ widget, node } in widgets"
-            :key="`${node.id}-${widget.name}-${widget.type}`"
-            :widget="widget"
-            :node="node"
-            :is-draggable="isDraggable"
-            :hidden-favorite-indicator="hiddenFavoriteIndicator"
-            :show-node-name="showNodeName"
-            :parents="parents"
-            :is-shown-on-parents="isWidgetShownOnParents(node, widget)"
-          />
-        </TransitionGroup>
+        <div class="min-h-8">
+          <p v-if="widget.name" class="text-sm leading-8 p-0 m-0 line-clamp-1">
+            {{ widget.label || widget.name }}
+          </p>
+        </div>
+        <component
+          :is="getWidgetComponent(widget)"
+          :widget="widget"
+          :model-value="useReactiveWidgetValue(widget)"
+          :node-id="String(node.id)"
+          :node-type="node.type"
+          :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
+          @update:model-value="
+            (value: string | number | boolean | object) =>
+              onWidgetValueChange(widget, value)
+          "
+        />
       </div>
-    </PropertiesAccordionItem>
-  </div>
+    </div>
+  </PropertiesAccordionItem>
 </template>

src/components/rightSidePanel/parameters/TabGlobalParameters.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { useMounted, watchDebounced } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef
-} from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
-import { DraggableList } from '@/scripts/ui/draggableList'
-import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
-import type { ValidFavoritedWidget } from '@/stores/workspace/favoritedWidgetsStore'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-
-import { searchWidgets } from '../shared'
-import SectionWidgets from './SectionWidgets.vue'
-
-const favoritedWidgetsStore = useFavoritedWidgetsStore()
-const rightSidePanelStore = useRightSidePanelStore()
-const { searchQuery } = storeToRefs(rightSidePanelStore)
-const { t } = useI18n()
-
-const draggableList = ref<DraggableList | undefined>(undefined)
-const sectionWidgetsRef = ref<{ widgetsContainer: HTMLElement }>()
-const isSearching = ref(false)
-
-const favoritedWidgets = computed(
-  () => favoritedWidgetsStore.validFavoritedWidgets
-)
-
-const label = computed(() =>
-  favoritedWidgets.value.length === 0
-    ? t('rightSidePanel.favoritesNone')
-    : t('rightSidePanel.favorites')
-)
-
-const searchedFavoritedWidgets = shallowRef<ValidFavoritedWidget[]>(
-  favoritedWidgets.value
-)
-
-async function searcher(query: string) {
-  isSearching.value = query.trim().length > 0
-  searchedFavoritedWidgets.value = searchWidgets(favoritedWidgets.value, query)
-}
-
-const isMounted = useMounted()
-
-function setDraggableState() {
-  if (!isMounted.value) return
-  draggableList.value?.dispose()
-  const container = sectionWidgetsRef.value?.widgetsContainer
-  if (isSearching.value || !container?.children?.length) return
-
-  draggableList.value = new DraggableList(container, '.draggable-item')
-
-  draggableList.value.applyNewItemsOrder = function () {
-    const reorderedItems: HTMLElement[] = []
-
-    let oldPosition = -1
-    this.getAllItems().forEach((item, index) => {
-      if (item === this.draggableItem) {
-        oldPosition = index
-        return
-      }
-      if (!this.isItemToggled(item)) {
-        reorderedItems[index] = item
-        return
-      }
-      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
-      reorderedItems[newIndex] = item
-    })
-
-    for (let index = 0; index < this.getAllItems().length; index++) {
-      const item = reorderedItems[index]
-      if (typeof item === 'undefined') {
-        reorderedItems[index] = this.draggableItem as HTMLElement
-      }
-    }
-
-    const newPosition = reorderedItems.indexOf(
-      this.draggableItem as HTMLElement
-    )
-    const widgets = [...searchedFavoritedWidgets.value]
-    const [widget] = widgets.splice(oldPosition, 1)
-    widgets.splice(newPosition, 0, widget)
-    searchedFavoritedWidgets.value = widgets
-    favoritedWidgetsStore.reorderFavorites(widgets)
-  }
-}
-
-watchDebounced(
-  searchedFavoritedWidgets,
-  () => {
-    setDraggableState()
-  },
-  { debounce: 100 }
-)
-
-onMounted(() => {
-  setDraggableState()
-})
-
-onBeforeUnmount(() => {
-  draggableList.value?.dispose()
-})
-</script>
-
-<template>
-  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
-    <FormSearchInput
-      v-model="searchQuery"
-      :searcher
-      :update-key="favoritedWidgets"
-    />
-  </div>
-  <SectionWidgets
-    ref="sectionWidgetsRef"
-    :label
-    :widgets="searchedFavoritedWidgets"
-    :is-draggable="!isSearching"
-    hidden-favorite-indicator
-    show-node-name
-    enable-empty-state
-    class="border-b border-interface-stroke"
-    @update:collapse="nextTick(setDraggableState)"
-  >
-    <template #empty>
-      <div class="text-sm text-muted-foreground px-4 text-center py-10">
-        {{
-          isSearching
-            ? t('rightSidePanel.noneSearchDesc')
-            : t('rightSidePanel.favoritesNoneDesc')
-        }}
-      </div>
-    </template>
-  </SectionWidgets>
-</template>

src/components/rightSidePanel/parameters/TabNodes.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { computed, ref, shallowRef } from 'vue'
-
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-
-import { searchWidgetsAndNodes } from '../shared'
-import type { NodeWidgetsListList } from '../shared'
-import SectionWidgets from './SectionWidgets.vue'
-
-const canvasStore = useCanvasStore()
-const workflowStore = useWorkflowStore()
-
-const nodes = computed((): LGraphNode[] => {
-  // Depend on activeWorkflow to trigger recomputation when workflow changes
-  void workflowStore.activeWorkflow?.path
-  return (canvasStore.canvas?.graph?.nodes ?? []) as LGraphNode[]
-})
-
-const rightSidePanelStore = useRightSidePanelStore()
-const { searchQuery } = storeToRefs(rightSidePanelStore)
-
-const widgetsSectionDataList = computed((): NodeWidgetsListList => {
-  return nodes.value.map((node) => {
-    const { widgets = [] } = node
-    const shownWidgets = widgets
-      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
-      .map((widget) => ({ node, widget }))
-    return {
-      widgets: shownWidgets,
-      node
-    }
-  })
-})
-
-const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>(
-  widgetsSectionDataList.value
-)
-const isSearching = ref(false)
-async function searcher(query: string) {
-  const list = widgetsSectionDataList.value
-  const target = searchedWidgetsSectionDataList
-  isSearching.value = query.trim() !== ''
-  target.value = searchWidgetsAndNodes(list, query)
-}
-</script>
-
-<template>
-  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
-    <FormSearchInput
-      v-model="searchQuery"
-      :searcher
-      :update-key="widgetsSectionDataList"
-    />
-  </div>
-  <TransitionGroup tag="div" name="list-scale" class="relative">
-    <div
-      v-if="isSearching && searchedWidgetsSectionDataList.length === 0"
-      class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15"
-    >
-      {{ $t('rightSidePanel.noneSearchDesc') }}
-    </div>
-    <SectionWidgets
-      v-for="{ node, widgets } in searchedWidgetsSectionDataList"
-      :key="node.id"
-      :node
-      :widgets
-      :collapse="!isSearching"
-      :tooltip="
-        isSearching || widgets.length
-          ? ''
-          : $t('rightSidePanel.inputsNoneTooltip')
-      "
-      show-locate-button
-      class="border-b border-interface-stroke"
-    />
-  </TransitionGroup>
-</template>

src/components/rightSidePanel/parameters/TabNormalInputs.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { computed, ref, shallowRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-
-import { searchWidgetsAndNodes } from '../shared'
-import type { NodeWidgetsListList } from '../shared'
-import SectionWidgets from './SectionWidgets.vue'
-
-const { nodes, mustShowNodeTitle } = defineProps<{
-  mustShowNodeTitle?: boolean
-  nodes: LGraphNode[]
-}>()
-
-const { t } = useI18n()
-
-const rightSidePanelStore = useRightSidePanelStore()
-const { searchQuery } = storeToRefs(rightSidePanelStore)
-
-const widgetsSectionDataList = computed((): NodeWidgetsListList => {
-  return nodes.map((node) => {
-    const { widgets = [] } = node
-    const shownWidgets = widgets
-      .filter((w) => !(w.options?.canvasOnly || w.options?.hidden))
-      .map((widget) => ({ node, widget }))
-
-    return { widgets: shownWidgets, node }
-  })
-})
-
-const isMultipleNodesSelected = computed(
-  () => widgetsSectionDataList.value.length > 1
-)
-
-const searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>(
-  widgetsSectionDataList.value
-)
-const isSearching = ref(false)
-
-async function searcher(query: string) {
-  const list = widgetsSectionDataList.value
-  const target = searchedWidgetsSectionDataList
-  isSearching.value = query.trim() !== ''
-  target.value = searchWidgetsAndNodes(list, query)
-}
-
-const label = computed(() => {
-  const sections = widgetsSectionDataList.value
-  return !mustShowNodeTitle && sections.length === 1
-    ? sections[0].widgets.length !== 0
-      ? t('rightSidePanel.inputs')
-      : t('rightSidePanel.inputsNone')
-    : undefined // SectionWidgets display node titles by default
-})
-</script>
-
-<template>
-  <div class="px-4 pt-1 pb-4 flex gap-2 border-b border-interface-stroke">
-    <FormSearchInput
-      v-model="searchQuery"
-      :searcher
-      :update-key="widgetsSectionDataList"
-    />
-  </div>
-  <TransitionGroup tag="div" name="list-scale" class="relative">
-    <div
-      v-if="searchedWidgetsSectionDataList.length === 0"
-      class="text-sm text-muted-foreground px-4 py-10 text-center"
-    >
-      {{
-        isSearching
-          ? t('rightSidePanel.noneSearchDesc')
-          : t('rightSidePanel.nodesNoneDesc')
-      }}
-    </div>
-    <SectionWidgets
-      v-for="{ widgets, node } in searchedWidgetsSectionDataList"
-      :key="node.id"
-      :node
-      :label
-      :widgets
-      :collapse="isMultipleNodesSelected && !isSearching"
-      :show-locate-button="isMultipleNodesSelected"
-      :tooltip="
-        isSearching || widgets.length
-          ? ''
-          : t('rightSidePanel.inputsNoneTooltip')
-      "
-      class="border-b border-interface-stroke"
-    />
-  </TransitionGroup>
-</template>