fix: resolve merge conflicts with main

Reconciled PR #7650 (jobs API) with PRs #7992 and #7745:
- Added list view and hoisted context menu with bulk actions
- Integrated queue panel v2 features
- Maintained jobs API lazy loading for job details

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

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

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

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

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

browser_tests/fixtures/ComfyPage.ts

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

browser_tests/fixtures/VueNodeHelpers.ts

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

browser_tests/tests/menu.spec.ts

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

browser_tests/tests/mobileBaseline.spec.ts

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

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

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

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

browser_tests/tests/widget.spec.ts

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.37.9",
+  "version": "1.38.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

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

@@ -247,6 +247,7 @@
   --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);
@@ -372,6 +373,7 @@
   --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);
@@ -516,6 +518,7 @@
   --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);

src/assets/css/style.css

@@ -1 +1,21 @@
-@import '@comfyorg/design-system/css/style.css';
+@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%;
+  }
+}

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="subgraph-breadcrumb w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
+    class="subgraph-breadcrumb flex w-auto drop-shadow-[var(--interface-panel-drop-shadow)]"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs
@@ -13,17 +13,37 @@
       '--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 === items.at(-1)"
+          :is-active="item.key === activeItemKey"
         />
       </template>
       <template #separator
@@ -35,6 +55,7 @@
 
 <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'
 
@@ -43,6 +64,7 @@ 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'
@@ -55,6 +77,12 @@ 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)
@@ -62,17 +90,28 @@ const isBlueprint = computed(() =>
 const collapseTabs = ref(false)
 const overflowingTabs = ref(false)
 
-const breadcrumbElement = computed(() => {
-  if (!breadcrumbRef.value) return null
+const isInSubgraph = computed(() => navigationStore.navigationStack.length > 0)
 
-  const el = (breadcrumbRef.value as unknown as { $el: HTMLElement }).$el
-  const list = el?.querySelector('.p-breadcrumb-list') as HTMLElement
-  return list
-})
+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 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'
@@ -95,21 +134,26 @@ const items = computed(() => {
   return [home.value, ...items]
 })
 
-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 activeItemKey = computed(() => items.value.at(-1)?.key)
 
-    canvas.setGraph(canvas.graph.rootGraph)
-  }
-}))
+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
+})
 
 // Check for overflow on breadcrumb items and collapse/expand the breadcrumb to fit
 let overflowObserver: ReturnType<typeof useOverflowObserver> | undefined
@@ -189,13 +233,18 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item) {
-  @apply flex items-center overflow-hidden;
+  @apply flex items-center overflow-hidden h-8;
   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);
 }
@@ -205,11 +254,9 @@ onUpdated(() => {
     calc(var(--p-breadcrumb-item-margin) + var(--p-breadcrumb-item-padding));
 }
 
-: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);
+:deep(.p-breadcrumb-item:hover) {
+  @apply rounded-lg;
+  border-color: var(--interface-stroke);
   background-color: var(--comfy-menu-bg);
 }
 
@@ -218,10 +265,8 @@ 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);
@@ -229,13 +274,10 @@ 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-12 cursor-pointer px-2"
+    class="p-breadcrumb-item-link h-8 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"
+    v-if="isActive || isRoot"
     ref="menu"
     :model="menuItems"
     :popup="true"
@@ -59,6 +59,7 @@ 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,
@@ -135,79 +136,28 @@ const tooltipText = computed(() => {
   return props.item.label
 })
 
-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')
+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`
       }
-    },
-    {
-      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) {
@@ -228,20 +178,6 @@ 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)
@@ -249,6 +185,14 @@ const inputBlur = async (doRename: boolean) => {
 
   isEditing.value = false
 }
+
+const toggleMenu = (event: MouseEvent) => {
+  menu.value?.toggle(event)
+}
+
+defineExpose({
+  toggleMenu
+})
 </script>
 
 <style scoped>

src/components/button/MoreButton.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button size="icon" variant="secondary" @click="popover?.toggle">
+    <Button
+      size="icon"
+      variant="secondary"
+      v-bind="$attrs"
+      @click="popover?.toggle"
+    >
       <i
         :class="
           cn(
@@ -60,6 +65,10 @@ 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

@@ -0,0 +1,65 @@
+<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/dialog/content/TopUpCreditsDialogContent.vue

@@ -158,6 +158,7 @@ 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'
@@ -175,6 +176,7 @@ const dialogService = useDialogService()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
+const { isSubscriptionEnabled } = useSubscription()
 
 // Constants
 const PRESET_AMOUNTS = [10, 25, 50, 100]
@@ -252,9 +254,11 @@ async function handleBuy() {
     telemetry?.trackApiCreditTopupButtonPurchaseClicked(payAmount.value)
     await authActions.purchaseCredits(payAmount.value)
 
-    // Close top-up dialog (keep tracking) and open subscription panel to show updated credits
+    // Close top-up dialog (keep tracking) and open credits panel to show updated balance
     handleClose(false)
-    dialogService.showSettingsDialog('subscription')
+    dialogService.showSettingsDialog(
+      isSubscriptionEnabled() ? 'subscription' : 'credits'
+    )
   } 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>
+      <div data-testid="current-user-indicator">
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
       <Button

src/components/primevueOverride/SelectPlus.vue

@@ -0,0 +1,19 @@
+<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/QueueProgressOverlay.vue

@@ -262,7 +262,7 @@ const focusAssetInSidebar = async (item: JobListItem) => {
 
 const inspectJobAsset = wrapWithErrorHandlingAsync(
   async (item: JobListItem) => {
-    openResultGallery(item)
+    await openResultGallery(item)
     await focusAssetInSidebar(item)
   }
 )

src/components/queue/job/JobDetailsPopover.stories.ts

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import type { TaskStatus } from '@/schemas/apiSchema'
+import type {
+  JobListItem,
+  JobStatus
+} from '@/platform/remote/comfyui/jobs/jobTypes'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 
@@ -37,91 +40,86 @@ function resetStores() {
   exec.nodeProgressStatesByPrompt = {}
 }
 
+function makeTask(
+  id: string,
+  priority: number,
+  fields: Partial<JobListItem> & { status: JobStatus; create_time: number }
+): TaskItemImpl {
+  const job: JobListItem = {
+    id,
+    priority,
+    last_state_update: null,
+    update_time: fields.create_time,
+    ...fields
+  }
+  return new TaskItemImpl(job)
+}
+
 function makePendingTask(
   id: string,
-  index: number,
-  createTimeMs?: number
+  priority: number,
+  createTimeMs: number
 ): TaskItemImpl {
-  const extraData = {
-    client_id: 'c1',
-    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
-  }
-  return new TaskItemImpl('Pending', [index, id, {}, extraData, []])
+  return makeTask(id, priority, {
+    status: 'pending',
+    create_time: createTimeMs
+  })
 }
 
 function makeRunningTask(
   id: string,
-  index: number,
-  createTimeMs?: number
+  priority: number,
+  createTimeMs: number
 ): TaskItemImpl {
-  const extraData = {
-    client_id: 'c1',
-    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
-  }
-  return new TaskItemImpl('Running', [index, id, {}, extraData, []])
+  return makeTask(id, priority, {
+    status: 'in_progress',
+    create_time: createTimeMs
+  })
 }
 
 function makeRunningTaskWithStart(
   id: string,
-  index: number,
+  priority: number,
   startedSecondsAgo: number
 ): TaskItemImpl {
   const start = Date.now() - startedSecondsAgo * 1000
-  const status: TaskStatus = {
-    status_str: 'success',
-    completed: false,
-    messages: [['execution_start', { prompt_id: id, timestamp: start } as any]]
-  }
-  return new TaskItemImpl(
-    'Running',
-    [index, id, {}, { client_id: 'c1', create_time: start - 5000 }, []],
-    status
-  )
+  return makeTask(id, priority, {
+    status: 'in_progress',
+    create_time: start - 5000,
+    update_time: start
+  })
 }
 
 function makeHistoryTask(
   id: string,
-  index: number,
+  priority: number,
   durationSec: number,
   ok: boolean,
   errorMessage?: string
 ): TaskItemImpl {
-  const start = Date.now() - durationSec * 1000 - 1000
-  const end = start + durationSec * 1000
-  const messages: TaskStatus['messages'] = ok
-    ? [
-        ['execution_start', { prompt_id: id, timestamp: start } as any],
-        ['execution_success', { prompt_id: id, timestamp: end } as any]
-      ]
-    : [
-        ['execution_start', { prompt_id: id, timestamp: start } as any],
-        [
-          'execution_error',
-          {
-            prompt_id: id,
-            timestamp: end,
-            node_id: '1',
-            node_type: 'Node',
-            executed: [],
-            exception_message:
-              errorMessage || 'Demo error: Node failed during execution',
-            exception_type: 'RuntimeError',
-            traceback: [],
-            current_inputs: {},
-            current_outputs: {}
-          } as any
-        ]
-      ]
-  const status: TaskStatus = {
-    status_str: ok ? 'success' : 'error',
-    completed: true,
-    messages
-  }
-  return new TaskItemImpl(
-    'History',
-    [index, id, {}, { client_id: 'c1', create_time: start }, []],
-    status
-  )
+  const now = Date.now()
+  const executionEndTime = now
+  const executionStartTime = now - durationSec * 1000
+  return makeTask(id, priority, {
+    status: ok ? 'completed' : 'failed',
+    create_time: executionStartTime - 5000,
+    update_time: now,
+    execution_start_time: executionStartTime,
+    execution_end_time: executionEndTime,
+    execution_error: errorMessage
+      ? {
+          prompt_id: id,
+          timestamp: now,
+          node_id: '1',
+          node_type: 'ExampleNode',
+          exception_message: errorMessage,
+          exception_type: 'RuntimeError',
+          traceback: [],
+          current_inputs: {},
+          current_outputs: {}
+        }
+      : undefined
+  })
 }
 
 export const Queued: Story = {
@@ -140,8 +138,12 @@ export const Queued: Story = {
         makePendingTask(jobId, queueIndex, Date.now() - 90_000)
       ]
       // Add some other pending jobs to give context
-      queue.pendingTasks.push(makePendingTask('job-older-1', 100))
-      queue.pendingTasks.push(makePendingTask('job-older-2', 101))
+      queue.pendingTasks.push(
+        makePendingTask('job-older-1', 100, Date.now() - 60_000)
+      )
+      queue.pendingTasks.push(
+        makePendingTask('job-older-2', 101, Date.now() - 30_000)
+      )
 
       // Queued at (in metadata on prompt[4])
 

src/components/queue/job/JobGroupsList.vue

@@ -12,7 +12,7 @@
         v-for="ji in group.items"
         :key="ji.id"
         :job-id="ji.id"
-        :workflow-id="ji.taskRef?.workflow?.id"
+        :workflow-id="ji.taskRef?.workflowId"
         :state="ji.state"
         :title="ji.title"
         :right-text="ji.meta"

src/components/queue/job/useJobErrorReporting.test.ts

@@ -2,116 +2,49 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'
 
-import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import type { TaskItemImpl } from '@/stores/queueStore'
-import type {
-  JobErrorDialogService,
-  UseJobErrorReportingOptions
-} from '@/components/queue/job/useJobErrorReporting'
-import * as jobErrorReporting from '@/components/queue/job/useJobErrorReporting'
+import type { JobErrorDialogService } from '@/components/queue/job/useJobErrorReporting'
+import { useJobErrorReporting } from '@/components/queue/job/useJobErrorReporting'
+import type { ExecutionError } from '@/platform/remote/comfyui/jobs/jobTypes'
 
-const createExecutionErrorMessage = (
-  overrides: Partial<ExecutionErrorWsMessage> = {}
-): ExecutionErrorWsMessage => ({
-  prompt_id: 'prompt',
-  timestamp: 100,
-  node_id: 'node-1',
-  node_type: 'KSampler',
-  executed: [],
-  exception_message: 'default failure',
-  exception_type: 'RuntimeError',
-  traceback: ['Trace line'],
-  current_inputs: {},
-  current_outputs: {},
-  ...overrides
-})
-
-const createTaskWithMessages = (
-  messages: Array<[string, unknown]> | undefined = []
+const createTaskWithError = (
+  promptId: string,
+  errorMessage?: string,
+  executionError?: ExecutionError,
+  createTime?: number
 ): TaskItemImpl =>
   ({
-    status: {
-      status_str: 'error',
-      completed: false,
-      messages
-    }
-  }) as TaskItemImpl
-
-describe('extractExecutionError', () => {
-  it('returns null when task has no execution error messages', () => {
-    expect(jobErrorReporting.extractExecutionError(null)).toBeNull()
-    expect(
-      jobErrorReporting.extractExecutionError({
-        status: undefined
-      } as TaskItemImpl)
-    ).toBeNull()
-    expect(
-      jobErrorReporting.extractExecutionError({
-        status: {
-          status_str: 'error',
-          completed: false,
-          messages: {} as unknown as Array<[string, unknown]>
-        }
-      } as TaskItemImpl)
-    ).toBeNull()
-    expect(
-      jobErrorReporting.extractExecutionError(createTaskWithMessages([]))
-    ).toBeNull()
-    expect(
-      jobErrorReporting.extractExecutionError(
-        createTaskWithMessages([
-          ['execution_start', { prompt_id: 'prompt', timestamp: 1 }]
-        ] as Array<[string, unknown]>)
-      )
-    ).toBeNull()
-  })
-
-  it('returns detail and message for execution_error entries', () => {
-    const detail = createExecutionErrorMessage({ exception_message: 'Kaboom' })
-    const result = jobErrorReporting.extractExecutionError(
-      createTaskWithMessages([
-        ['execution_success', { prompt_id: 'prompt', timestamp: 2 }],
-        ['execution_error', detail]
-      ] as Array<[string, unknown]>)
-    )
-    expect(result).toEqual({
-      detail,
-      message: 'Kaboom'
-    })
-  })
-
-  it('falls back to an empty message when the tuple lacks detail', () => {
-    const result = jobErrorReporting.extractExecutionError(
-      createTaskWithMessages([
-        ['execution_error'] as unknown as [string, ExecutionErrorWsMessage]
-      ])
-    )
-    expect(result).toEqual({ detail: undefined, message: '' })
-  })
-})
+    promptId,
+    errorMessage,
+    executionError,
+    createTime: createTime ?? Date.now()
+  }) as unknown as TaskItemImpl
 
 describe('useJobErrorReporting', () => {
   let taskState = ref<TaskItemImpl | null>(null)
   let taskForJob: ComputedRef<TaskItemImpl | null>
-  let copyToClipboard: UseJobErrorReportingOptions['copyToClipboard']
-  let showExecutionErrorDialog: JobErrorDialogService['showExecutionErrorDialog']
-  let showErrorDialog: JobErrorDialogService['showErrorDialog']
+  let copyToClipboard: ReturnType<typeof vi.fn>
+  let showErrorDialog: ReturnType<typeof vi.fn>
+  let showExecutionErrorDialog: ReturnType<typeof vi.fn>
   let dialog: JobErrorDialogService
-  let composable: ReturnType<typeof jobErrorReporting.useJobErrorReporting>
+  let composable: ReturnType<typeof useJobErrorReporting>
 
   beforeEach(() => {
+    vi.clearAllMocks()
     taskState = ref<TaskItemImpl | null>(null)
     taskForJob = computed(() => taskState.value)
     copyToClipboard = vi.fn()
-    showExecutionErrorDialog = vi.fn()
     showErrorDialog = vi.fn()
+    showExecutionErrorDialog = vi.fn()
     dialog = {
-      showExecutionErrorDialog,
-      showErrorDialog
-    }
-    composable = jobErrorReporting.useJobErrorReporting({
+      showErrorDialog,
+      showExecutionErrorDialog
+    } as unknown as JobErrorDialogService
+    composable = useJobErrorReporting({
       taskForJob,
-      copyToClipboard,
+      copyToClipboard: copyToClipboard as (
+        value: string
+      ) => void | Promise<void>,
       dialog
     })
   })
@@ -121,73 +54,112 @@ describe('useJobErrorReporting', () => {
   })
 
   it('exposes a computed message that reflects the current task error', () => {
-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'First failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-1', 'First failure')
     expect(composable.errorMessageValue.value).toBe('First failure')
 
-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'Second failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-2', 'Second failure')
     expect(composable.errorMessageValue.value).toBe('Second failure')
   })
 
+  it('returns empty string when no error message', () => {
+    taskState.value = createTaskWithError('job-1')
+    expect(composable.errorMessageValue.value).toBe('')
+  })
+
+  it('returns empty string when task is null', () => {
+    taskState.value = null
+    expect(composable.errorMessageValue.value).toBe('')
+  })
+
   it('only calls the copy handler when a message exists', () => {
-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'Clipboard failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-1', 'Clipboard failure')
     composable.copyErrorMessage()
     expect(copyToClipboard).toHaveBeenCalledTimes(1)
     expect(copyToClipboard).toHaveBeenCalledWith('Clipboard failure')
 
-    vi.mocked(copyToClipboard).mockClear()
-    taskState.value = createTaskWithMessages([])
+    copyToClipboard.mockClear()
+    taskState.value = createTaskWithError('job-2')
     composable.copyErrorMessage()
     expect(copyToClipboard).not.toHaveBeenCalled()
   })
 
-  it('prefers the detailed execution dialog when detail is available', () => {
-    const detail = createExecutionErrorMessage({
-      exception_message: 'Detailed failure'
-    })
-    taskState.value = createTaskWithMessages([['execution_error', detail]])
+  it('shows simple error dialog when only errorMessage present', () => {
+    taskState.value = createTaskWithError('job-1', 'Queue job error')
     composable.reportJobError()
-    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
-    expect(showExecutionErrorDialog).toHaveBeenCalledWith(detail)
-    expect(showErrorDialog).not.toHaveBeenCalled()
-  })
 
-  it('shows a fallback dialog when only a message is available', () => {
-    const message = 'Queue job error'
-    taskState.value = createTaskWithMessages([])
-    const valueSpy = vi
-      .spyOn(composable.errorMessageValue, 'value', 'get')
-      .mockReturnValue(message)
-
-    expect(composable.errorMessageValue.value).toBe(message)
-    composable.reportJobError()
-    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
     expect(showErrorDialog).toHaveBeenCalledTimes(1)
-    const [errorArg, optionsArg] = vi.mocked(showErrorDialog).mock.calls[0]
+    const [errorArg, optionsArg] = showErrorDialog.mock.calls[0]
     expect(errorArg).toBeInstanceOf(Error)
-    expect(errorArg.message).toBe(message)
+    expect(errorArg.message).toBe('Queue job error')
     expect(optionsArg).toEqual({ reportType: 'queueJobError' })
-    valueSpy.mockRestore()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
   })
 
-  it('does nothing when no error could be extracted', () => {
-    taskState.value = createTaskWithMessages([])
+  it('does nothing when no task exists', () => {
+    taskState.value = null
     composable.reportJobError()
-    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
     expect(showErrorDialog).not.toHaveBeenCalled()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+  })
+
+  it('shows rich error dialog when execution_error available on task', () => {
+    const executionError: ExecutionError = {
+      prompt_id: 'job-1',
+      timestamp: 12345,
+      node_id: '5',
+      node_type: 'KSampler',
+      executed: ['1', '2'],
+      exception_message: 'CUDA out of memory',
+      exception_type: 'RuntimeError',
+      traceback: ['line 1', 'line 2'],
+      current_inputs: {},
+      current_outputs: {}
+    }
+    taskState.value = createTaskWithError(
+      'job-1',
+      'CUDA out of memory',
+      executionError,
+      12345
+    )
+
+    composable.reportJobError()
+
+    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
+    expect(showExecutionErrorDialog).toHaveBeenCalledWith(executionError)
+    expect(showErrorDialog).not.toHaveBeenCalled()
+  })
+
+  it('passes execution_error directly to dialog', () => {
+    const executionError: ExecutionError = {
+      prompt_id: 'job-1',
+      timestamp: 12345,
+      node_id: '5',
+      node_type: 'KSampler',
+      exception_message: 'Error',
+      exception_type: 'RuntimeError',
+      traceback: ['line 1'],
+      current_inputs: {},
+      current_outputs: {}
+    }
+    taskState.value = createTaskWithError(
+      'job-1',
+      'Error',
+      executionError,
+      12345
+    )
+
+    composable.reportJobError()
+
+    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
+    expect(showExecutionErrorDialog).toHaveBeenCalledWith(executionError)
+  })
+
+  it('does nothing when no error message and no execution_error', () => {
+    taskState.value = createTaskWithError('job-1')
+
+    composable.reportJobError()
+
+    expect(showErrorDialog).not.toHaveBeenCalled()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
   })
 })

src/components/queue/job/useJobErrorReporting.ts

@@ -1,13 +1,13 @@
 import { computed } from 'vue'
 import type { ComputedRef } from 'vue'
 
-import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
+import type { ExecutionErrorDialogInput } from '@/services/dialogService'
 import type { TaskItemImpl } from '@/stores/queueStore'
 
 type CopyHandler = (value: string) => void | Promise<void>
 
 export type JobErrorDialogService = {
-  showExecutionErrorDialog: (error: ExecutionErrorWsMessage) => void
+  showExecutionErrorDialog: (executionError: ExecutionErrorDialogInput) => void
   showErrorDialog: (
     error: Error,
     options?: {
@@ -17,30 +17,7 @@ export type JobErrorDialogService = {
   ) => void
 }
 
-type JobExecutionError = {
-  detail?: ExecutionErrorWsMessage
-  message: string
-}
-
-export const extractExecutionError = (
-  task: TaskItemImpl | null
-): JobExecutionError | null => {
-  const status = (task as TaskItemImpl | null)?.status
-  const messages = (status as { messages?: unknown[] } | undefined)?.messages
-  if (!Array.isArray(messages) || !messages.length) return null
-  const record = messages.find((entry: unknown) => {
-    return Array.isArray(entry) && entry[0] === 'execution_error'
-  }) as [string, ExecutionErrorWsMessage?] | undefined
-  if (!record) return null
-  const detail = record[1]
-  const message = String(detail?.exception_message ?? '')
-  return {
-    detail,
-    message
-  }
-}
-
-export type UseJobErrorReportingOptions = {
+type UseJobErrorReportingOptions = {
   taskForJob: ComputedRef<TaskItemImpl | null>
   copyToClipboard: CopyHandler
   dialog: JobErrorDialogService
@@ -51,10 +28,7 @@ export const useJobErrorReporting = ({
   copyToClipboard,
   dialog
 }: UseJobErrorReportingOptions) => {
-  const errorMessageValue = computed(() => {
-    const error = extractExecutionError(taskForJob.value)
-    return error?.message ?? ''
-  })
+  const errorMessageValue = computed(() => taskForJob.value?.errorMessage ?? '')
 
   const copyErrorMessage = () => {
     if (errorMessageValue.value) {
@@ -63,11 +37,12 @@ export const useJobErrorReporting = ({
   }
 
   const reportJobError = () => {
-    const error = extractExecutionError(taskForJob.value)
-    if (error?.detail) {
-      dialog.showExecutionErrorDialog(error.detail)
+    const executionError = taskForJob.value?.executionError
+    if (executionError) {
+      dialog.showExecutionErrorDialog(executionError)
       return
     }
+
     if (errorMessageValue.value) {
       dialog.showErrorDialog(new Error(errorMessageValue.value), {
         reportType: 'queueJobError'

src/components/rightSidePanel/RightSidePanel.vue

@@ -1,32 +1,41 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, ref, toValue, watchEffect } from 'vue'
+import { computed, provide, ref, 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 { 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 TabParameters from './parameters/TabParameters.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 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 { t } = useI18n()
+const { findParentGroup } = useGraphHierarchy()
 
-const { selectedItems } = storeToRefs(canvasStore)
+const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore)
 const { activeTab, isEditingSubgraph } = storeToRefs(rightSidePanelStore)
 
 const sidebarLocation = computed<'left' | 'right'>(() =>
@@ -40,29 +49,31 @@ const panelIcon = computed(() =>
     : 'icon-[lucide--panel-right]'
 )
 
-const hasSelection = computed(() => selectedItems.value.length > 0)
+const { flattedItems, selectedNodes, selectedGroups, nodeToParentGroup } =
+  useFlatAndCategorizeSelectedItems(directlySelectedItems)
 
-const selectedNodes = computed((): LGraphNode[] => {
-  return selectedItems.value.filter(isLGraphNode)
+const shouldShowGroupNames = computed(() => {
+  return !(
+    directlySelectedItems.value.length === 1 &&
+    (selectedGroups.value.length === 1 || selectedNodes.value.length === 1)
+  )
 })
 
-const isSubgraphNode = computed(() => {
-  return selectedNode.value instanceof SubgraphNode
+provide(GetNodeParentGroupKey, (node: LGraphNode) => {
+  if (!shouldShowGroupNames.value) return null
+  return nodeToParentGroup.value.get(node) ?? findParentGroup(node)
 })
 
-const isSingleNodeSelected = computed(() => selectedNodes.value.length === 1)
+const hasSelection = computed(() => flattedItems.value.length > 0)
 
-const selectedNode = computed(() => {
-  return isSingleNodeSelected.value ? selectedNodes.value[0] : null
+const selectedSingleNode = computed(() => {
+  return selectedNodes.value.length === 1 && flattedItems.value.length === 1
+    ? selectedNodes.value[0]
+    : null
 })
 
-const selectionCount = computed(() => selectedItems.value.length)
-
-const panelTitle = computed(() => {
-  if (isSingleNodeSelected.value && selectedNode.value) {
-    return selectedNode.value.title || selectedNode.value.type || 'Node'
-  }
-  return t('rightSidePanel.title', { count: selectionCount.value })
+const isSingleSubgraphNode = computed(() => {
+  return selectedSingleNode.value instanceof SubgraphNode
 })
 
 function closePanel() {
@@ -75,25 +86,40 @@ type RightSidePanelTabList = Array<{
 }>
 
 const tabs = computed<RightSidePanelTabList>(() => {
-  const list: RightSidePanelTabList = [
-    {
-      label: () => t('rightSidePanel.parameters'),
-      value: 'parameters'
-    },
-    {
-      label: () => t('g.settings'),
-      value: 'settings'
-    }
-  ]
-  if (
-    !hasSelection.value ||
-    (isSingleNodeSelected.value && !isSubgraphNode.value)
-  ) {
+  const list: RightSidePanelTabList = []
+
+  list.push({
+    label: () =>
+      flattedItems.value.length > 1
+        ? t('rightSidePanel.nodes')
+        : t('rightSidePanel.parameters'),
+    value: 'parameters'
+  })
+
+  if (!hasSelection.value) {
     list.push({
-      label: () => t('rightSidePanel.info'),
-      value: 'info'
+      label: () => t('rightSidePanel.nodes'),
+      value: 'nodes'
     })
   }
+
+  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
 })
 
@@ -101,27 +127,59 @@ const tabs = computed<RightSidePanelTabList>(() => {
 watchEffect(() => {
   if (
     !tabs.value.some((tab) => tab.value === activeTab.value) &&
-    !(activeTab.value === 'subgraph' && isSubgraphNode.value)
+    !(activeTab.value === 'subgraph' && isSingleSubgraphNode.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 = toValue(selectedNode)
+  const node = selectedGroups.value[0] || selectedNodes.value[0]
   if (!node) return
 
   if (trimmedTitle === node.title) return
 
   node.title = trimmedTitle
-  canvasStore.canvas?.setDirty(true, false)
+  panelTitle.value = trimmedTitle
+  canvasStore.canvas?.setDirty(true, true)
 }
 
 function handleTitleCancel() {
@@ -132,21 +190,28 @@ function handleTitleCancel() {
 <template>
   <div
     data-testid="properties-panel"
-    class="flex size-full flex-col bg-interface-panel-surface"
+    class="flex size-full flex-col bg-comfy-menu-bg"
   >
     <!-- 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">
-          <EditableText
-            v-if="isSingleNodeSelected"
-            :model-value="panelTitle"
-            :is-editing="isEditing"
-            :input-attrs="{ 'data-testid': 'node-title-input' }"
-            @edit="handleTitleEdit"
-            @cancel="handleTitleCancel"
-            @dblclick="isEditing = true"
-          />
+        <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>
           <template v-else>
             {{ panelTitle }}
           </template>
@@ -154,7 +219,7 @@ function handleTitleCancel() {
 
         <div class="flex gap-2">
           <Button
-            v-if="isSubgraphNode"
+            v-if="isSingleSubgraphNode"
             variant="secondary"
             size="icon"
             :class="cn(isEditingSubgraph && 'bg-secondary-background-selected')"
@@ -177,7 +242,7 @@ function handleTitleCancel() {
           </Button>
         </div>
       </div>
-      <nav v-if="hasSelection" class="px-4 pb-2 pt-1">
+      <nav class="px-4 pb-2 pt-1 overflow-x-auto">
         <TabList
           :model-value="activeTab"
           @update:model-value="
@@ -189,7 +254,7 @@ function handleTitleCancel() {
           <Tab
             v-for="tab in tabs"
             :key="tab.value"
-            class="text-sm py-1 px-2 font-inter"
+            class="text-sm py-1 px-2 font-inter transition-all active:scale-95"
             :value="tab.value"
           >
             {{ tab.label() }}
@@ -200,25 +265,29 @@ function handleTitleCancel() {
 
     <!-- Panel Content -->
     <div class="scrollbar-thin flex-1 overflow-y-auto">
-      <div
-        v-if="!hasSelection"
-        class="flex size-full p-4 items-start justify-start text-sm text-muted-foreground"
-      >
-        {{ $t('rightSidePanel.noSelection') }}
-      </div>
+      <template v-if="!hasSelection">
+        <TabGlobalParameters v-if="activeTab === 'parameters'" />
+        <TabNodes v-else-if="activeTab === 'nodes'" />
+        <TabGlobalSettings v-else-if="activeTab === 'settings'" />
+      </template>
       <SubgraphEditor
-        v-else-if="isSubgraphNode && isEditingSubgraph"
-        :node="selectedNode"
+        v-else-if="isSingleSubgraphNode && isEditingSubgraph"
+        :node="selectedSingleNode"
       />
       <template v-else>
-        <TabParameters
-          v-if="activeTab === 'parameters'"
+        <TabSubgraphInputs
+          v-if="activeTab === 'parameters' && isSingleSubgraphNode"
+          :node="selectedSingleNode as SubgraphNode"
+        />
+        <TabNormalInputs
+          v-else-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="selectedNodes"
+          :nodes="flattedItems"
         />
       </template>
     </div>

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -1,54 +1,70 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 import { cn } from '@/utils/tailwindUtil'
 
-defineProps<{
-  isEmpty?: boolean
+import TransitionCollapse from './TransitionCollapse.vue'
+
+const props = defineProps<{
+  disabled?: boolean
+  label?: string
+  enableEmptyState?: boolean
+  tooltip?: string
 }>()
 
 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-interface-panel-surface">
+  <div class="flex flex-col bg-comfy-menu-bg">
     <div
       class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
     >
       <button
-        v-tooltip="
-          isEmpty
-            ? {
-                value: $t('rightSidePanel.inputsNoneTooltip'),
-                showDelay: 1_000
-              }
-            : undefined
-        "
+        v-tooltip="tooltipConfig"
         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',
-            !isEmpty && 'cursor-pointer'
+            !disabled && 'cursor-pointer'
           )
         "
-        :disabled="isEmpty"
+        :disabled="disabled"
         @click="isCollapse = !isCollapse"
       >
-        <span class="text-sm font-semibold line-clamp-2">
-          <slot name="label" />
+        <span class="text-sm font-semibold line-clamp-2 flex-1">
+          <slot name="label">
+            {{ label }}
+          </slot>
         </span>
 
         <i
-          v-if="!isEmpty"
           :class="
             cn(
-              'text-muted-foreground group-hover:text-base-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
-              isCollapse && '-rotate-180'
+              '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'
             )
           "
         />
       </button>
     </div>
-    <div v-if="!isCollapse && !isEmpty" class="pb-4">
-      <slot />
-    </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>
 </template>

src/components/rightSidePanel/layout/TransitionCollapse.vue

@@ -0,0 +1,144 @@
+<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,87 +1,185 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, inject, provide, ref, shallowRef, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useReactiveWidgetValue } from '@/composables/graph/useGraphNodeManager'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+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 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, widgets } = defineProps<{
+const {
+  label,
+  node,
+  widgets: widgetsProp,
+  showLocateButton = false,
+  isDraggable = false,
+  hiddenFavoriteIndicator = false,
+  showNodeName = false,
+  parents = [],
+  enableEmptyState = false,
+  tooltip
+} = 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()
 
-function getWidgetComponent(widget: IBaseWidget) {
-  const component = getComponent(widget.type, widget.name)
-  return component || WidgetLegacy
+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 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 isEmpty = computed(() => widgets.value.length === 0)
 
 const displayLabel = computed(
-  () =>
-    label ??
-    (isEmpty.value
-      ? t('rightSidePanel.inputsNone')
-      : t('rightSidePanel.inputs'))
+  () => label ?? (node ? node.title : 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>
-  <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
-        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"
-      >
-        <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 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>
-        <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)
-          "
-        />
+      </template>
+
+      <template #empty><slot name="empty" /></template>
+
+      <div
+        ref="widgetsContainer"
+        class="space-y-2 rounded-lg px-4 pt-1 relative"
+      >
+        <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>
-    </div>
-  </PropertiesAccordionItem>
+    </PropertiesAccordionItem>
+  </div>
 </template>

src/components/rightSidePanel/parameters/TabGlobalParameters.vue

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

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

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

src/components/rightSidePanel/parameters/TabParameters.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { computed, shallowRef } from 'vue'
-
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-
-import SidePanelSearch from '../layout/SidePanelSearch.vue'
-import SectionWidgets from './SectionWidgets.vue'
-
-const { nodes } = defineProps<{
-  nodes: LGraphNode[]
-}>()
-
-type NodeWidgetsList = Array<{ node: LGraphNode; widget: IBaseWidget }>
-type NodeWidgetsListList = Array<{
-  node: LGraphNode
-  widgets: NodeWidgetsList
-}>
-
-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 searchedWidgetsSectionDataList = shallowRef<NodeWidgetsListList>([])
-
-/**
- * Searches widgets in all selected nodes and returns search results.
- * Filters by name, localized label, type, and user-input value.
- * Performs basic tokenization of the query string.
- */
-async function searcher(query: string) {
-  if (query.trim() === '') {
-    searchedWidgetsSectionDataList.value = widgetsSectionDataList.value
-    return
-  }
-  const words = query.trim().toLowerCase().split(' ')
-  searchedWidgetsSectionDataList.value = widgetsSectionDataList.value
-    .map((item) => {
-      return {
-        ...item,
-        widgets: item.widgets.filter(({ widget }) => {
-          const label = widget.label?.toLowerCase()
-          const name = widget.name.toLowerCase()
-          const type = widget.type.toLowerCase()
-          const value = widget.value?.toString().toLowerCase()
-          return words.every(
-            (word) =>
-              name.includes(word) ||
-              label?.includes(word) ||
-              type?.includes(word) ||
-              value?.includes(word)
-          )
-        })
-      }
-    })
-    .filter((item) => item.widgets.length > 0)
-}
-</script>
-
-<template>
-  <div class="px-4 pb-4 flex gap-2 border-b border-interface-stroke">
-    <SidePanelSearch :searcher :update-key="widgetsSectionDataList" />
-  </div>
-  <SectionWidgets
-    v-for="section in searchedWidgetsSectionDataList"
-    :key="section.node.id"
-    :label="widgetsSectionDataList.length > 1 ? section.node.title : undefined"
-    :widgets="section.widgets"
-    :default-collapse="
-      widgetsSectionDataList.length > 1 &&
-      widgetsSectionDataList === searchedWidgetsSectionDataList
-    "
-    class="border-b border-interface-stroke"
-  />
-</template>

src/components/rightSidePanel/parameters/TabSubgraphInputs.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { useMounted, watchDebounced } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import {
+  computed,
+  customRef,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  triggerRef,
+  useTemplateRef,
+  watch
+} from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
+import type { ProxyWidgetsProperty } from '@/core/schemas/proxyWidget'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import { DraggableList } from '@/scripts/ui/draggableList'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+
+import { searchWidgets } from '../shared'
+import type { NodeWidgetsList } from '../shared'
+import SectionWidgets from './SectionWidgets.vue'
+
+const { node } = defineProps<{
+  node: SubgraphNode
+}>()
+
+const { t } = useI18n()
+const canvasStore = useCanvasStore()
+const rightSidePanelStore = useRightSidePanelStore()
+const { focusedSection, searchQuery } = storeToRefs(rightSidePanelStore)
+
+const advancedInputsCollapsed = ref(true)
+const draggableList = ref<DraggableList | undefined>(undefined)
+const sectionWidgetsRef = useTemplateRef('sectionWidgetsRef')
+const advancedInputsSectionRef = useTemplateRef('advancedInputsSectionRef')
+
+// Use customRef to track proxyWidgets changes
+const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
+  get() {
+    track()
+    return parseProxyWidgets(node.properties.proxyWidgets)
+  },
+  set(value?: ProxyWidgetsProperty) {
+    trigger()
+    if (!value) return
+    // eslint-disable-next-line vue/no-mutating-props
+    node.properties.proxyWidgets = value
+  }
+}))
+
+watch(
+  focusedSection,
+  async (section) => {
+    if (section === 'advanced-inputs') {
+      advancedInputsCollapsed.value = false
+      rightSidePanelStore.clearFocusedSection()
+
+      await nextTick()
+
+      await new Promise((resolve) => setTimeout(resolve, 300))
+
+      const sectionComponent = advancedInputsSectionRef.value
+      const sectionElement = sectionComponent?.rootElement
+      if (sectionElement) {
+        sectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+    }
+  },
+  { immediate: true }
+)
+
+const widgetsList = computed((): NodeWidgetsList => {
+  const proxyWidgetsOrder = proxyWidgets.value
+  const { widgets = [] } = node
+
+  // Map proxyWidgets to actual proxy widgets in the correct order
+  const result: NodeWidgetsList = []
+  for (const [nodeId, widgetName] of proxyWidgetsOrder) {
+    // Find the proxy widget that matches this nodeId and widgetName
+    const widget = widgets.find((w) => {
+      // Check if this is a proxy widget with _overlay
+      if (isProxyWidget(w)) {
+        return (
+          String(w._overlay.nodeId) === nodeId &&
+          w._overlay.widgetName === widgetName
+        )
+      }
+      // For non-proxy widgets (like linked widgets), match by name
+      return w.name === widgetName
+    })
+    if (widget) {
+      result.push({ node, widget })
+    }
+  }
+  return result
+})
+
+const advancedInputsWidgets = computed((): NodeWidgetsList => {
+  const interiorNodes = node.subgraph.nodes
+  const proxyWidgetsValue = parseProxyWidgets(node.properties.proxyWidgets)
+
+  // Get all widgets from interior nodes
+  const allInteriorWidgets = interiorNodes.flatMap((interiorNode) => {
+    const { widgets = [] } = interiorNode
+    return widgets
+      .filter((w) => !w.computedDisabled)
+      .map((widget) => ({ node: interiorNode, widget }))
+  })
+
+  // Filter out widgets that are already promoted using tuple matching
+  return allInteriorWidgets.filter(({ node: interiorNode, widget }) => {
+    return !proxyWidgetsValue.some(
+      ([nodeId, widgetName]) =>
+        interiorNode.id == nodeId && widget.name === widgetName
+    )
+  })
+})
+
+const parents = computed<SubgraphNode[]>(() => [node])
+
+const searchedWidgetsList = shallowRef<NodeWidgetsList>(widgetsList.value)
+const isSearching = ref(false)
+
+async function searcher(query: string) {
+  isSearching.value = query.trim() !== ''
+  searchedWidgetsList.value = searchWidgets(widgetsList.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
+    })
+
+    if (oldPosition === -1) {
+      console.error('[TabSubgraphInputs] draggableItem not found in items')
+      return
+    }
+
+    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
+    )
+
+    // Update proxyWidgets order
+    const pw = proxyWidgets.value
+    const [w] = pw.splice(oldPosition, 1)
+    pw.splice(newPosition, 0, w)
+    proxyWidgets.value = pw
+    canvasStore.canvas?.setDirty(true, true)
+    triggerRef(proxyWidgets)
+  }
+}
+
+watchDebounced(searchedWidgetsList, () => setDraggableState(), {
+  debounce: 100
+})
+onMounted(() => setDraggableState())
+onBeforeUnmount(() => draggableList.value?.dispose())
+
+const label = computed(() => {
+  return searchedWidgetsList.value.length !== 0
+    ? t('rightSidePanel.inputs')
+    : t('rightSidePanel.inputsNone')
+})
+</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="widgetsList"
+    />
+  </div>
+  <SectionWidgets
+    ref="sectionWidgetsRef"
+    :node
+    :label
+    :parents
+    :widgets="searchedWidgetsList"
+    :is-draggable="!isSearching"
+    :enable-empty-state="isSearching"
+    :tooltip="
+      isSearching || searchedWidgetsList.length
+        ? ''
+        : t('rightSidePanel.inputsNoneTooltip')
+    "
+    class="border-b border-interface-stroke"
+    @update:collapse="nextTick(setDraggableState)"
+  >
+    <template #empty>
+      <div class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15">
+        {{ t('rightSidePanel.noneSearchDesc') }}
+      </div>
+    </template>
+  </SectionWidgets>
+  <SectionWidgets
+    v-if="advancedInputsWidgets.length > 0"
+    ref="advancedInputsSectionRef"
+    v-model:collapse="advancedInputsCollapsed"
+    :label="t('rightSidePanel.advancedInputs')"
+    :parents="parents"
+    :widgets="advancedInputsWidgets"
+    show-node-name
+    class="border-b border-interface-stroke"
+  />
+</template>

src/components/rightSidePanel/parameters/WidgetActions.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import MoreButton from '@/components/button/MoreButton.vue'
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import {
+  demoteWidget,
+  promoteWidget
+} from '@/core/graph/subgraph/proxyWidgetUtils'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useDialogService } from '@/services/dialogService'
+import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
+
+const {
+  widget,
+  node,
+  parents = [],
+  isShownOnParents = false
+} = defineProps<{
+  widget: IBaseWidget
+  node: LGraphNode
+  parents?: SubgraphNode[]
+  isShownOnParents?: boolean
+}>()
+
+const label = defineModel<string>('label', { required: true })
+
+const canvasStore = useCanvasStore()
+const favoritedWidgetsStore = useFavoritedWidgetsStore()
+const dialogService = useDialogService()
+const { t } = useI18n()
+
+const hasParents = computed(() => parents?.length > 0)
+const favoriteNode = computed(() =>
+  isShownOnParents && hasParents.value ? parents[0] : node
+)
+const isFavorited = computed(() =>
+  favoritedWidgetsStore.isFavorited(favoriteNode.value, widget.name)
+)
+
+async function handleRename() {
+  const newLabel = await dialogService.prompt({
+    title: t('g.rename'),
+    message: t('g.enterNewName') + ':',
+    defaultValue: widget.label,
+    placeholder: widget.name
+  })
+
+  if (newLabel === null) return
+  label.value = newLabel
+}
+
+function handleHideInput() {
+  if (!parents?.length) return
+
+  // For proxy widgets (already promoted), we need to find the original interior node and widget
+  if (isProxyWidget(widget)) {
+    const subgraph = parents[0].subgraph
+    const interiorNode = subgraph.getNodeById(parseInt(widget._overlay.nodeId))
+
+    if (!interiorNode) {
+      console.error('Could not find interior node for proxy widget')
+      return
+    }
+
+    const originalWidget = interiorNode.widgets?.find(
+      (w) => w.name === widget._overlay.widgetName
+    )
+
+    if (!originalWidget) {
+      console.error('Could not find original widget for proxy widget')
+      return
+    }
+
+    demoteWidget(interiorNode, originalWidget, parents)
+  } else {
+    // For regular widgets (not yet promoted), use them directly
+    demoteWidget(node, widget, parents)
+  }
+
+  canvasStore.canvas?.setDirty(true, true)
+}
+
+function handleShowInput() {
+  if (!parents?.length) return
+
+  promoteWidget(node, widget, parents)
+  canvasStore.canvas?.setDirty(true, true)
+}
+
+function handleToggleFavorite() {
+  favoritedWidgetsStore.toggleFavorite(favoriteNode.value, widget.name)
+}
+
+const buttonClasses = cn([
+  'border-none bg-transparent',
+  'w-full flex items-center gap-2 rounded px-3 py-2 text-sm',
+  'cursor-pointer transition-all hover:bg-secondary-background-hover active:scale-95'
+])
+</script>
+
+<template>
+  <MoreButton
+    is-vertical
+    class="text-muted-foreground bg-transparent hover:text-base-foreground hover:bg-secondary-background-hover active:scale-95 transition-all"
+  >
+    <template #default="{ close }">
+      <button
+        :class="buttonClasses"
+        @click="
+          () => {
+            handleRename()
+            close()
+          }
+        "
+      >
+        <i class="icon-[lucide--edit] size-4" />
+        <span>{{ t('g.rename') }}</span>
+      </button>
+
+      <button
+        v-if="hasParents"
+        :class="buttonClasses"
+        @click="
+          () => {
+            if (isShownOnParents) handleHideInput()
+            else handleShowInput()
+            close()
+          }
+        "
+      >
+        <template v-if="isShownOnParents">
+          <i class="icon-[lucide--eye-off] size-4" />
+          <span>{{ t('rightSidePanel.hideInput') }}</span>
+        </template>
+        <template v-else>
+          <i class="icon-[lucide--eye] size-4" />
+          <span>{{ t('rightSidePanel.showInput') }}</span>
+        </template>
+      </button>
+
+      <button
+        :class="buttonClasses"
+        @click="
+          () => {
+            handleToggleFavorite()
+            close()
+          }
+        "
+      >
+        <template v-if="isFavorited">
+          <i class="icon-[lucide--star]" />
+          <span>{{ t('rightSidePanel.removeFavorite') }}</span>
+        </template>
+        <template v-else>
+          <i class="icon-[lucide--star]" />
+          <span>{{ t('rightSidePanel.addFavorite') }}</span>
+        </template>
+      </button>
+    </template>
+  </MoreButton>
+</template>

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed, customRef, ref } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import { getSharedWidgetEnhancements } from '@/composables/graph/useGraphNodeManager'
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+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 { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
+import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+import { renameWidget } from '../shared'
+import WidgetActions from './WidgetActions.vue'
+
+const {
+  widget,
+  node,
+  isDraggable = false,
+  hiddenFavoriteIndicator = false,
+  showNodeName = false,
+  parents = [],
+  isShownOnParents = false
+} = defineProps<{
+  widget: IBaseWidget
+  node: LGraphNode
+  isDraggable?: boolean
+  hiddenFavoriteIndicator?: boolean
+  showNodeName?: boolean
+  parents?: SubgraphNode[]
+  isShownOnParents?: boolean
+}>()
+
+const canvasStore = useCanvasStore()
+const favoritedWidgetsStore = useFavoritedWidgetsStore()
+const isEditing = ref(false)
+
+const widgetComponent = computed(() => {
+  const component = getComponent(widget.type, widget.name)
+  return component || WidgetLegacy
+})
+
+const enhancedWidget = computed(() => {
+  // Get shared enhancements (reactive value, controlWidget, spec, nodeType, etc.)
+  const enhancements = getSharedWidgetEnhancements(node, widget)
+  return { ...widget, ...enhancements }
+})
+
+const sourceNodeName = computed((): string | null => {
+  let sourceNode: LGraphNode | null = node
+  if (isProxyWidget(widget)) {
+    const { graph, nodeId } = widget._overlay
+    sourceNode = getNodeByExecutionId(graph, nodeId)
+  }
+  return sourceNode ? sourceNode.title || sourceNode.type : null
+})
+
+const hasParents = computed(() => parents?.length > 0)
+const favoriteNode = computed(() =>
+  isShownOnParents && hasParents.value ? parents[0] : node
+)
+
+const widgetValue = computed({
+  get: () => {
+    widget.vueTrack?.()
+    return widget.value
+  },
+  set: (newValue: string | number | boolean | object) => {
+    // eslint-disable-next-line vue/no-mutating-props
+    widget.value = newValue
+    widget.callback?.(newValue)
+    canvasStore.canvas?.setDirty(true, true)
+  }
+})
+
+const displayLabel = customRef((track, trigger) => {
+  return {
+    get() {
+      track()
+      return widget.label || widget.name
+    },
+    set(newValue: string) {
+      isEditing.value = false
+
+      const trimmedLabel = newValue.trim()
+
+      const success = renameWidget(widget, node, trimmedLabel, parents)
+
+      if (success) {
+        canvasStore.canvas?.setDirty(true)
+        trigger()
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'widget-item col-span-full grid grid-cols-subgrid rounded-lg group',
+        isDraggable &&
+          'draggable-item !will-change-auto drag-handle cursor-grab bg-comfy-menu-bg [&.is-draggable]:cursor-grabbing outline-comfy-menu-bg [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0 [&.is-draggable]:opacity-70'
+      )
+    "
+  >
+    <!-- widget header -->
+    <div
+      :class="
+        cn(
+          'min-h-8 flex items-center justify-between gap-1 mb-1.5 min-w-0',
+          isDraggable && 'pointer-events-none'
+        )
+      "
+    >
+      <EditableText
+        v-if="widget.name"
+        :model-value="displayLabel"
+        :is-editing="isEditing"
+        :input-attrs="{ placeholder: widget.name }"
+        class="text-sm leading-8 p-0 m-0 truncate pointer-events-auto cursor-text"
+        @edit="displayLabel = $event"
+        @cancel="isEditing = false"
+        @click="isEditing = true"
+      />
+
+      <span
+        v-if="(showNodeName || hasParents) && sourceNodeName"
+        class="text-xs text-muted-foreground flex-1 p-0 my-0 mx-1 truncate text-right min-w-10"
+      >
+        {{ sourceNodeName }}
+      </span>
+      <div class="flex items-center gap-1 shrink-0 pointer-events-auto">
+        <WidgetActions
+          v-model:label="displayLabel"
+          :widget="widget"
+          :node="node"
+          :parents="parents"
+          :is-shown-on-parents="isShownOnParents"
+        />
+      </div>
+    </div>
+    <!-- favorite indicator -->
+    <div
+      v-if="
+        !hiddenFavoriteIndicator &&
+        favoritedWidgetsStore.isFavorited(favoriteNode, widget.name)
+      "
+      class="relative z-2 pointer-events-none"
+    >
+      <i
+        class="absolute -right-1 -top-1 pi pi-star-fill text-xs text-muted-foreground pointer-events-none"
+      />
+    </div>
+    <!-- widget content -->
+    <component
+      :is="widgetComponent"
+      v-model="widgetValue"
+      :widget="enhancedWidget"
+      :node-id="String(node.id)"
+      :node-type="node.type"
+      :class="cn('col-span-1', shouldExpand(widget.type) && 'min-h-36')"
+    />
+    <!-- Drag handle -->
+    <div
+      :class="
+        cn(
+          'pointer-events-none mt-1.5 mx-auto max-w-40 w-1/2 h-1 rounded-lg bg-transparent transition-colors duration-150',
+          'group-hover:bg-interface-stroke group-[.is-draggable]:bg-component-node-widget-background-highlighted',
+          !isDraggable && 'opacity-0'
+        )
+      "
+    />
+  </div>
+</template>

src/components/rightSidePanel/settings/FieldSwitch.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch'
+
+import LayoutField from './LayoutField.vue'
+
+defineProps<{
+  label: string
+  tooltip?: string
+}>()
+
+const modelValue = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <LayoutField singleline :label :tooltip>
+    <ToggleSwitch
+      v-model="modelValue"
+      class="transition-transform active:scale-90"
+    />
+  </LayoutField>
+</template>

src/components/rightSidePanel/settings/LayoutField.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+defineProps<{
+  label: string
+  tooltip?: string
+  singleline?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex gap-2', singleline ? 'items-center justify-between' : 'flex-col')
+    "
+  >
+    <span
+      v-tooltip.left="
+        tooltip
+          ? {
+              value: tooltip,
+              showDelay: 300
+            }
+          : null
+      "
+      :class="
+        cn(
+          'text-sm text-muted-foreground truncate',
+          tooltip ? 'cursor-help' : '',
+          singleline ? 'flex-1' : ''
+        )
+      "
+    >
+      {{ label }}
+    </span>
+    <slot />
+  </div>
+</template>

src/components/rightSidePanel/settings/NodeSettings.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="space-y-4 text-sm text-muted-foreground">
+    <SetNodeState
+      v-if="isNodes(targetNodes)"
+      :nodes="targetNodes"
+      @changed="handleChanged"
+    />
+    <SetNodeColor :nodes="targetNodes" @changed="handleChanged" />
+    <SetPinned :nodes="targetNodes" @changed="handleChanged" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef, watchEffect } from 'vue'
+
+import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { isLGraphGroup } from '@/utils/litegraphUtil'
+
+import SetNodeColor from './SetNodeColor.vue'
+import SetNodeState from './SetNodeState.vue'
+import SetPinned from './SetPinned.vue'
+
+const props = defineProps<{
+  /**
+   * - If the item is a Group, Node State cannot be set
+   * as Groups do not have a 'mode' property.
+   *
+   * - The nodes array can contain either all Nodes or all Groups,
+   * but it must not be a mix of both.
+   */
+  nodes?: LGraphNode[] | LGraphGroup[]
+}>()
+
+const targetNodes = shallowRef<LGraphNode[] | LGraphGroup[]>([])
+watchEffect(() => {
+  if (props.nodes) {
+    targetNodes.value = props.nodes
+  } else {
+    targetNodes.value = []
+  }
+})
+
+const canvasStore = useCanvasStore()
+
+function isNodes(nodes: LGraphNode[] | LGraphGroup[]): nodes is LGraphNode[] {
+  return !nodes.some((node) => isLGraphGroup(node))
+}
+
+function handleChanged() {
+  /**
+   * This is not a random comment—it's crucial.
+   * Otherwise, the UI cannot update correctly.
+   * There is a bug with triggerRef here, so we can't use triggerRef.
+   * We'll work around it for now and later submit a Vue issue and pull request to fix it.
+   */
+  targetNodes.value = targetNodes.value.slice()
+
+  canvasStore.canvas?.setDirty(true, true)
+}
+</script>

src/components/rightSidePanel/settings/SetNodeColor.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { ColorOption } from '@/lib/litegraph/src/litegraph'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { adjustColor } from '@/utils/colorUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+import LayoutField from './LayoutField.vue'
+
+/**
+ * Good design limits dependencies and simplifies the interface of the abstraction layer.
+ * Here, we only care about the getColorOption and setColorOption methods,
+ * and do not concern ourselves with other methods.
+ */
+type PickedNode = Pick<LGraphNode, 'getColorOption' | 'setColorOption'>
+
+const { nodes } = defineProps<{ nodes: PickedNode[] }>()
+const emit = defineEmits<{ (e: 'changed'): void }>()
+
+const { t } = useI18n()
+
+const colorPaletteStore = useColorPaletteStore()
+
+type NodeColorOption = {
+  name: string
+  localizedName: () => string
+  value: {
+    dark: string
+    light: string
+    ringDark: string
+    ringLight: string
+  }
+}
+
+const nodeColorEntries = Object.entries(LGraphCanvas.node_colors)
+
+function getColorValue(color: string): NodeColorOption['value'] {
+  return {
+    dark: adjustColor(color, { lightness: 0.3 }),
+    light: adjustColor(color, { lightness: 0.4 }),
+    ringDark: adjustColor(color, { lightness: 0.5 }),
+    ringLight: adjustColor(color, { lightness: 0.1 })
+  }
+}
+
+const NO_COLOR_OPTION: NodeColorOption = {
+  name: 'noColor',
+  localizedName: () => t('color.noColor'),
+  value: getColorValue(LiteGraph.NODE_DEFAULT_BGCOLOR)
+}
+
+const colorOptions: NodeColorOption[] = [
+  NO_COLOR_OPTION,
+  ...nodeColorEntries.map(([name, color]) => ({
+    name,
+    localizedName: () => t(`color.${name}`),
+    value: getColorValue(color.bgcolor)
+  }))
+]
+
+const isLightTheme = computed(
+  () => colorPaletteStore.completedActivePalette.light_theme
+)
+
+const nodeColor = computed<NodeColorOption['name'] | null>({
+  get() {
+    if (nodes.length === 0) return null
+    const theColorOptions = nodes.map((item) => item.getColorOption())
+
+    let colorOption: ColorOption | null | false = theColorOptions[0]
+    if (!theColorOptions.every((option) => option === colorOption)) {
+      colorOption = false
+    }
+
+    if (colorOption === false) return null
+    if (colorOption == null || (!colorOption.bgcolor && !colorOption.color))
+      return NO_COLOR_OPTION.name
+    return (
+      nodeColorEntries.find(
+        ([_, color]) =>
+          color.bgcolor === colorOption.bgcolor &&
+          color.color === colorOption.color
+      )?.[0] ?? null
+    )
+  },
+  set(colorName) {
+    if (colorName === null) return
+
+    const canvasColorOption =
+      colorName === NO_COLOR_OPTION.name
+        ? null
+        : LGraphCanvas.node_colors[colorName]
+
+    for (const item of nodes) {
+      item.setColorOption(canvasColorOption)
+    }
+
+    emit('changed')
+  }
+})
+</script>
+
+<template>
+  <LayoutField :label="t('rightSidePanel.color')">
+    <div
+      class="bg-secondary-background border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
+    >
+      <button
+        v-for="option of colorOptions"
+        :key="option.name"
+        :class="
+          cn(
+            'size-8 rounded-lg bg-transparent border-0 outline-0 ring-0 text-left flex justify-center items-center cursor-pointer',
+            option.name === nodeColor
+              ? 'bg-interface-menu-component-surface-selected'
+              : 'hover:bg-interface-menu-component-surface-selected'
+          )
+        "
+        @click="nodeColor = option.name"
+      >
+        <div
+          v-tooltip.top="option.localizedName()"
+          :class="cn('size-4 rounded-full ring-2 ring-gray-500/10')"
+          :style="{
+            backgroundColor: isLightTheme
+              ? option.value.light
+              : option.value.dark,
+            '--tw-ring-color':
+              option.name === nodeColor
+                ? isLightTheme
+                  ? option.value.ringLight
+                  : option.value.ringDark
+                : undefined
+          }"
+          :data-testid="option.name"
+        />
+      </button>
+    </div>
+  </LayoutField>
+</template>

src/components/rightSidePanel/settings/SetNodeState.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import FormSelectButton from '@/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue'
+
+import LayoutField from './LayoutField.vue'
+
+/**
+ * Good design limits dependencies and simplifies the interface of the abstraction layer.
+ * Here, we only care about the mode method,
+ * and do not concern ourselves with other methods.
+ */
+type PickedNode = Pick<LGraphNode, 'mode'>
+
+const { nodes } = defineProps<{ nodes: PickedNode[] }>()
+const emit = defineEmits<{ (e: 'changed'): void }>()
+
+const { t } = useI18n()
+
+const nodeState = computed({
+  get() {
+    let mode: LGraphNode['mode'] | null = null
+
+    if (nodes.length === 0) return null
+
+    // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
+    if (nodes.length > 1) {
+      mode = nodes[0].mode
+      if (!nodes.every((node) => node.mode === mode)) {
+        mode = null
+      }
+    } else {
+      mode = nodes[0].mode
+    }
+
+    return mode
+  },
+  set(value: LGraphNode['mode']) {
+    nodes.forEach((node) => {
+      node.mode = value
+    })
+    emit('changed')
+  }
+})
+</script>
+
+<template>
+  <LayoutField :label="t('rightSidePanel.nodeState')">
+    <FormSelectButton
+      v-model="nodeState"
+      class="w-full"
+      :options="[
+        {
+          label: t('rightSidePanel.normal'),
+          value: LGraphEventMode.ALWAYS
+        },
+        {
+          label: t('rightSidePanel.bypass'),
+          value: LGraphEventMode.BYPASS
+        },
+        {
+          label: t('rightSidePanel.mute'),
+          value: LGraphEventMode.NEVER
+        }
+      ]"
+    />
+  </LayoutField>
+</template>

src/components/rightSidePanel/settings/SetPinned.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+
+import FieldSwitch from './FieldSwitch.vue'
+
+type PickedNode = Pick<LGraphNode, 'pinned' | 'pin'>
+
+/**
+ * Good design limits dependencies and simplifies the interface of the abstraction layer.
+ * Here, we only care about the pinned and pin methods,
+ * and do not concern ourselves with other methods.
+ */
+const { nodes } = defineProps<{ nodes: PickedNode[] }>()
+const emit = defineEmits<{ (e: 'changed'): void }>()
+
+const { t } = useI18n()
+
+// Pinned state
+const isPinned = computed<boolean>({
+  get() {
+    return nodes.some((node) => node.pinned)
+  },
+  set(value) {
+    nodes.forEach((node) => node.pin(value))
+    emit('changed')
+  }
+})
+</script>
+
+<template>
+  <FieldSwitch v-model="isPinned" :label="t('rightSidePanel.pinned')" />
+</template>

src/components/rightSidePanel/settings/TabGlobalSettings.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import InputNumber from 'primevue/inputnumber'
+import Select from 'primevue/select'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { LinkRenderType } from '@/lib/litegraph/src/types/globalEnums'
+import { LinkMarkerShape } from '@/lib/litegraph/src/types/globalEnums'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { WidgetInputBaseClass } from '@/renderer/extensions/vueNodes/widgets/components/layout'
+import { useDialogService } from '@/services/dialogService'
+import { cn } from '@/utils/tailwindUtil'
+
+import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import FieldSwitch from './FieldSwitch.vue'
+import LayoutField from './LayoutField.vue'
+
+const { t } = useI18n()
+const settingStore = useSettingStore()
+const dialogService = useDialogService()
+
+// NODES settings
+const showAdvancedParameters = ref(false) // Placeholder for future implementation
+
+const showToolbox = computed({
+  get: () => settingStore.get('Comfy.Canvas.SelectionToolbox'),
+  set: (value) => settingStore.set('Comfy.Canvas.SelectionToolbox', value)
+})
+
+const nodes2Enabled = computed({
+  get: () => settingStore.get('Comfy.VueNodes.Enabled'),
+  set: (value) => settingStore.set('Comfy.VueNodes.Enabled', value)
+})
+
+// CANVAS settings
+const gridSpacing = computed({
+  get: () => settingStore.get('Comfy.SnapToGrid.GridSize'),
+  set: (value) => settingStore.set('Comfy.SnapToGrid.GridSize', value)
+})
+
+const snapToGrid = computed({
+  get: () => settingStore.get('pysssss.SnapToGrid'),
+  set: (value) => settingStore.set('pysssss.SnapToGrid', value)
+})
+
+// CONNECTION LINKS settings
+const linkShape = computed({
+  get: () => settingStore.get('Comfy.Graph.LinkMarkers'),
+  set: (value) => settingStore.set('Comfy.Graph.LinkMarkers', value)
+})
+
+const linkShapeOptions = computed(() => [
+  { value: LinkMarkerShape.None, label: t('g.none') },
+  { value: LinkMarkerShape.Circle, label: t('shape.circle') },
+  { value: LinkMarkerShape.Arrow, label: t('shape.arrow') }
+])
+
+let theOldLinkRenderMode: LinkRenderType = LiteGraph.SPLINE_LINK
+const showConnectedLinks = computed({
+  get: () => settingStore.get('Comfy.LinkRenderMode') !== LiteGraph.HIDDEN_LINK,
+  set: (value) => {
+    let oldLinkRenderMode = settingStore.get('Comfy.LinkRenderMode')
+    if (oldLinkRenderMode !== LiteGraph.HIDDEN_LINK) {
+      theOldLinkRenderMode = oldLinkRenderMode
+    }
+    const newMode = value ? theOldLinkRenderMode : LiteGraph.HIDDEN_LINK
+    settingStore.set('Comfy.LinkRenderMode', newMode)
+  }
+})
+
+const GRID_SIZE_MIN = 1
+const GRID_SIZE_MAX = 100
+const GRID_SIZE_STEP = 1
+
+function updateGridSpacingFromSlider(values?: number[]) {
+  if (!values?.length) return
+  gridSpacing.value = values[0]
+}
+
+function updateGridSpacingFromInput(value: number | null | undefined) {
+  if (typeof value !== 'number') return
+
+  const clampedValue = Math.min(GRID_SIZE_MAX, Math.max(GRID_SIZE_MIN, value))
+  gridSpacing.value = Math.round(clampedValue / GRID_SIZE_STEP) * GRID_SIZE_STEP
+}
+
+function openFullSettings() {
+  dialogService.showSettingsDialog()
+}
+</script>
+
+<template>
+  <div class="flex flex-col border-t border-interface-stroke">
+    <!-- NODES Section -->
+    <PropertiesAccordionItem class="border-b border-interface-stroke">
+      <template #label>
+        {{ t('rightSidePanel.globalSettings.nodes') }}
+      </template>
+      <div class="space-y-4 px-4 py-3">
+        <FieldSwitch
+          v-model="showAdvancedParameters"
+          :label="t('rightSidePanel.globalSettings.showAdvanced')"
+          :tooltip="t('rightSidePanel.globalSettings.showAdvancedTooltip')"
+        />
+        <FieldSwitch
+          v-model="showToolbox"
+          :label="t('rightSidePanel.globalSettings.showToolbox')"
+        />
+        <FieldSwitch
+          v-model="nodes2Enabled"
+          :label="t('rightSidePanel.globalSettings.nodes2')"
+        />
+      </div>
+    </PropertiesAccordionItem>
+
+    <!-- CANVAS Section -->
+    <PropertiesAccordionItem class="border-b border-interface-stroke">
+      <template #label>
+        {{ t('rightSidePanel.globalSettings.canvas') }}
+      </template>
+      <div class="space-y-4 px-4 py-3">
+        <LayoutField :label="t('rightSidePanel.globalSettings.gridSpacing')">
+          <div
+            :class="
+              cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')
+            "
+          >
+            <Slider
+              :model-value="[gridSpacing]"
+              class="flex-grow text-xs"
+              :min="GRID_SIZE_MIN"
+              :max="GRID_SIZE_MAX"
+              :step="GRID_SIZE_STEP"
+              @update:model-value="updateGridSpacingFromSlider"
+            />
+            <InputNumber
+              :model-value="gridSpacing"
+              class="w-16"
+              size="small"
+              pt:pc-input-text:root="min-w-[4ch] bg-transparent border-none text-center truncate"
+              :min="GRID_SIZE_MIN"
+              :max="GRID_SIZE_MAX"
+              :step="GRID_SIZE_STEP"
+              :allow-empty="false"
+              @update:model-value="updateGridSpacingFromInput"
+            />
+          </div>
+        </LayoutField>
+        <FieldSwitch
+          v-model="snapToGrid"
+          :label="t('rightSidePanel.globalSettings.snapNodesToGrid')"
+        />
+      </div>
+    </PropertiesAccordionItem>
+
+    <!-- CONNECTION LINKS Section -->
+    <PropertiesAccordionItem class="border-b border-interface-stroke">
+      <template #label>
+        {{ t('rightSidePanel.globalSettings.connectionLinks') }}
+      </template>
+      <div class="space-y-4 px-4 py-3">
+        <LayoutField :label="t('rightSidePanel.globalSettings.linkShape')">
+          <Select
+            v-model="linkShape"
+            :options="linkShapeOptions"
+            :aria-label="t('rightSidePanel.globalSettings.linkShape')"
+            :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
+            size="small"
+            :pt="{
+              option: 'text-xs',
+              dropdown: 'w-8',
+              label: cn('truncate min-w-[4ch]', $slots.default && 'mr-5'),
+              overlay: 'w-fit min-w-full'
+            }"
+            data-capture-wheel="true"
+            option-label="label"
+            option-value="value"
+          />
+        </LayoutField>
+        <FieldSwitch
+          v-model="showConnectedLinks"
+          :label="t('rightSidePanel.globalSettings.showConnectedLinks')"
+        />
+      </div>
+    </PropertiesAccordionItem>
+
+    <!-- View all settings button -->
+    <div
+      class="flex items-center justify-center p-4 border-b border-interface-stroke"
+    >
+      <Button
+        variant="muted-textonly"
+        size="sm"
+        class="gap-2 text-sm"
+        @click="openFullSettings"
+      >
+        {{ t('rightSidePanel.globalSettings.viewAllSettings') }}
+        <i class="icon-[lucide--settings] size-4" />
+      </Button>
+    </div>
+  </div>
+</template>

src/components/rightSidePanel/settings/TabSettings.vue

@@ -1,245 +1,58 @@
 <template>
-  <div class="space-y-4 p-3 text-sm text-muted-foreground">
-    <!-- Node State -->
-    <div class="flex flex-col gap-2">
-      <span>
-        {{ t('rightSidePanel.nodeState') }}
-      </span>
-      <FormSelectButton
-        v-model="nodeState"
-        class="w-full"
-        :options="[
-          {
-            label: t('rightSidePanel.normal'),
-            value: LGraphEventMode.ALWAYS
-          },
-          {
-            label: t('rightSidePanel.bypass'),
-            value: LGraphEventMode.BYPASS
-          },
-          {
-            label: t('rightSidePanel.mute'),
-            value: LGraphEventMode.NEVER
-          }
-        ]"
-      />
-    </div>
-
-    <!-- Color Picker -->
-    <div class="flex flex-col gap-2">
-      <span>
-        {{ t('rightSidePanel.color') }}
-      </span>
-      <div
-        class="bg-secondary-background border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
-      >
-        <button
-          v-for="option of colorOptions"
-          :key="option.name"
-          :class="
-            cn(
-              'size-8 rounded-lg bg-transparent border-0 outline-0 ring-0 text-left flex justify-center items-center cursor-pointer',
-              option.name === nodeColor
-                ? 'bg-interface-menu-component-surface-selected'
-                : 'hover:bg-interface-menu-component-surface-selected'
-            )
-          "
-          @click="nodeColor = option.name"
-        >
-          <div
-            v-tooltip.top="option.localizedName()"
-            :class="cn('size-4 rounded-full ring-2 ring-gray-500/10')"
-            :style="{
-              backgroundColor: isLightTheme
-                ? option.value.light
-                : option.value.dark,
-              '--tw-ring-color':
-                option.name === nodeColor
-                  ? isLightTheme
-                    ? option.value.ringLight
-                    : option.value.ringDark
-                  : undefined
-            }"
-            :data-testid="option.name"
-          />
-        </button>
-      </div>
-    </div>
-
-    <!-- Pinned Toggle -->
-    <div class="flex items-center justify-between">
-      <span>
-        {{ t('rightSidePanel.pinned') }}
-      </span>
-      <ToggleSwitch v-model="isPinned" />
-    </div>
+  <div v-if="isOnlyHasNodes" class="p-4">
+    <NodeSettings :nodes="theNodes" />
+  </div>
+  <div v-else class="border-t border-interface-stroke">
+    <PropertiesAccordionItem
+      v-if="hasNodes"
+      class="border-b border-interface-stroke"
+      :label="$t('rightSidePanel.nodes')"
+    >
+      <NodeSettings :nodes="theNodes" class="p-4" />
+    </PropertiesAccordionItem>
+    <PropertiesAccordionItem
+      v-if="hasGroups"
+      class="border-b border-interface-stroke"
+      :label="$t('rightSidePanel.groups')"
+    >
+      <NodeSettings :nodes="theGroups" class="p-4" />
+    </PropertiesAccordionItem>
   </div>
 </template>
 
 <script setup lang="ts">
-import ToggleSwitch from 'primevue/toggleswitch'
-import { computed, shallowRef, triggerRef, watchEffect } from 'vue'
-import { useI18n } from 'vue-i18n'
+/**
+ * If we only need to show settings for Nodes,
+ * there's no need to wrap them in PropertiesAccordionItem,
+ * making the UI cleaner.
+ * But if there are multiple types of settings,
+ * it's better to wrap them; otherwise,
+ * the UI would look messy.
+ */
+import { computed } from 'vue'
+import type { Raw } from 'vue'
 
-import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { ColorOption, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import FormSelectButton from '@/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { adjustColor } from '@/utils/colorUtil'
-import { cn } from '@/utils/tailwindUtil'
+import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
+import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+
+import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
+import NodeSettings from './NodeSettings.vue'
 
 const props = defineProps<{
-  nodes?: LGraphNode[]
+  nodes: Raw<Positionable>[]
 }>()
 
-/**
- * This is not random writing. It is very important.
- * Otherwise, the UI cannot be updated correctly.
- */
-const targetNodes = shallowRef<LGraphNode[]>([])
-watchEffect(() => {
-  if (props.nodes) {
-    targetNodes.value = props.nodes
-  } else {
-    targetNodes.value = []
-  }
-})
-
-const { t } = useI18n()
-
-const canvasStore = useCanvasStore()
-const colorPaletteStore = useColorPaletteStore()
-const isLightTheme = computed(
-  () => colorPaletteStore.completedActivePalette.light_theme
+const theNodes = computed<LGraphNode[]>(() =>
+  props.nodes.filter((node) => isLGraphNode(node))
 )
 
-const nodeState = computed({
-  get() {
-    let mode: LGraphNode['mode'] | null = null
-    const nodes = targetNodes.value
+const theGroups = computed<LGraphGroup[]>(() =>
+  props.nodes.filter((node) => isLGraphGroup(node))
+)
 
-    if (nodes.length === 0) return null
-
-    // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
-    if (nodes.length > 1) {
-      mode = nodes[0].mode
-      if (!nodes.every((node) => node.mode === mode)) {
-        mode = null
-      }
-    } else {
-      mode = nodes[0].mode
-    }
-
-    return mode
-  },
-  set(value: LGraphNode['mode']) {
-    targetNodes.value.forEach((node) => {
-      node.mode = value
-    })
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
-    canvasStore.canvas?.setDirty(true, true)
-  }
-})
-
-// Pinned state
-const isPinned = computed<boolean>({
-  get() {
-    return targetNodes.value.some((node) => node.pinned)
-  },
-  set(value) {
-    targetNodes.value.forEach((node) => node.pin(value))
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
-    canvasStore.canvas?.setDirty(true, true)
-  }
-})
-
-type NodeColorOption = {
-  name: string
-  localizedName: () => string
-  value: {
-    dark: string
-    light: string
-    ringDark: string
-    ringLight: string
-  }
-}
-
-function getColorValue(color: string): NodeColorOption['value'] {
-  return {
-    dark: adjustColor(color, { lightness: 0.3 }),
-    light: adjustColor(color, { lightness: 0.4 }),
-    ringDark: adjustColor(color, { lightness: 0.5 }),
-    ringLight: adjustColor(color, { lightness: 0.1 })
-  }
-}
-
-const NO_COLOR_OPTION: NodeColorOption = {
-  name: 'noColor',
-  localizedName: () => t('color.noColor'),
-  value: getColorValue(LiteGraph.NODE_DEFAULT_BGCOLOR)
-}
-
-const nodeColorEntries = Object.entries(LGraphCanvas.node_colors)
-
-const colorOptions: NodeColorOption[] = [
-  NO_COLOR_OPTION,
-  ...nodeColorEntries.map(([name, color]) => ({
-    name,
-    localizedName: () => t(`color.${name}`),
-    value: getColorValue(color.bgcolor)
-  }))
-]
-
-const nodeColor = computed<NodeColorOption['name'] | null>({
-  get() {
-    if (targetNodes.value.length === 0) return null
-    const theColorOptions = targetNodes.value.map((item) =>
-      item.getColorOption()
-    )
-
-    let colorOption: ColorOption | null | false = theColorOptions[0]
-    if (!theColorOptions.every((option) => option === colorOption)) {
-      colorOption = false
-    }
-
-    if (colorOption === false) return null
-    if (colorOption == null || (!colorOption.bgcolor && !colorOption.color))
-      return NO_COLOR_OPTION.name
-    return (
-      nodeColorEntries.find(
-        ([_, color]) =>
-          color.bgcolor === colorOption.bgcolor &&
-          color.color === colorOption.color
-      )?.[0] ?? null
-    )
-  },
-  set(colorName) {
-    if (colorName === null) return
-
-    const canvasColorOption =
-      colorName === NO_COLOR_OPTION.name
-        ? null
-        : LGraphCanvas.node_colors[colorName]
-
-    for (const item of targetNodes.value) {
-      item.setColorOption(canvasColorOption)
-    }
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
-    canvasStore.canvas?.setDirty(true, true)
-  }
-})
+const hasGroups = computed(() => theGroups.value.length > 0)
+const hasNodes = computed(() => theNodes.value.length > 0)
+const isOnlyHasNodes = computed(() => hasNodes.value && !hasGroups.value)
 </script>

src/components/rightSidePanel/shared.test.ts

@@ -0,0 +1,178 @@
+import { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
+import { describe, expect, it, beforeEach } from 'vitest'
+import { flatAndCategorizeSelectedItems, searchWidgets } from './shared'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+describe('searchWidgets', () => {
+  const createWidget = (
+    name: string,
+    type: string,
+    value?: string,
+    label?: string
+  ): { widget: IBaseWidget } => ({
+    widget: {
+      name,
+      type,
+      value,
+      label
+    } as IBaseWidget
+  })
+
+  it('should return all widgets when query is empty', () => {
+    const widgets = [
+      createWidget('width', 'number', '100'),
+      createWidget('height', 'number', '200')
+    ]
+    const result = searchWidgets(widgets, '')
+    expect(result).toEqual(widgets)
+  })
+
+  it('should filter widgets by name, label, type, or value', () => {
+    const widgets = [
+      createWidget('width', 'number', '100', 'Size Control'),
+      createWidget('height', 'slider', '200', 'Image Height'),
+      createWidget('quality', 'text', 'high', 'Quality')
+    ]
+
+    expect(searchWidgets(widgets, 'width')).toHaveLength(1)
+    expect(searchWidgets(widgets, 'slider')).toHaveLength(1)
+    expect(searchWidgets(widgets, 'high')).toHaveLength(1)
+    expect(searchWidgets(widgets, 'image')).toHaveLength(1)
+  })
+
+  it('should handle multiple search words', () => {
+    const widgets = [
+      createWidget('width', 'number', '100', 'Image Width'),
+      createWidget('height', 'number', '200', 'Image Height')
+    ]
+    const result = searchWidgets(widgets, 'image width')
+    expect(result).toHaveLength(1)
+    expect(result[0].widget.name).toBe('width')
+  })
+
+  it('should be case insensitive', () => {
+    const widgets = [createWidget('Width', 'Number', '100', 'Image Width')]
+    const result = searchWidgets(widgets, 'IMAGE width')
+    expect(result).toHaveLength(1)
+  })
+})
+
+describe('flatAndCategorizeSelectedItems', () => {
+  let testGroup1: LGraphGroup
+  let testGroup2: LGraphGroup
+  let testNode1: LGraphNode
+  let testNode2: LGraphNode
+  let testNode3: LGraphNode
+
+  beforeEach(() => {
+    testGroup1 = new LGraphGroup('Group 1', 1)
+    testGroup2 = new LGraphGroup('Group 2', 2)
+    testNode1 = new LGraphNode('Node 1')
+    testNode2 = new LGraphNode('Node 2')
+    testNode3 = new LGraphNode('Node 3')
+  })
+
+  it('should return empty arrays for empty input', () => {
+    const result = flatAndCategorizeSelectedItems([])
+
+    expect(result.all).toEqual([])
+    expect(result.nodes).toEqual([])
+    expect(result.groups).toEqual([])
+    expect(result.others).toEqual([])
+    expect(result.nodeToParentGroup.size).toBe(0)
+  })
+
+  it('should categorize nodes', () => {
+    const result = flatAndCategorizeSelectedItems([testNode1])
+
+    expect(result.all).toEqual([testNode1])
+    expect(result.nodes).toEqual([testNode1])
+    expect(result.groups).toEqual([])
+    expect(result.others).toEqual([])
+    expect(result.nodeToParentGroup.size).toBe(0)
+  })
+
+  it('should categorize single group without children', () => {
+    const result = flatAndCategorizeSelectedItems([testGroup1])
+
+    expect(result.all).toEqual([testGroup1])
+    expect(result.nodes).toEqual([])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.others).toEqual([])
+  })
+
+  it('should flatten group with child nodes', () => {
+    testGroup1._children.add(testNode1)
+    testGroup1._children.add(testNode2)
+
+    const result = flatAndCategorizeSelectedItems([testGroup1])
+
+    expect(result.all).toEqual([testGroup1, testNode1, testNode2])
+    expect(result.nodes).toEqual([testNode1, testNode2])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.nodeToParentGroup.get(testNode1)).toBe(testGroup1)
+    expect(result.nodeToParentGroup.get(testNode2)).toBe(testGroup1)
+  })
+
+  it('should handle nested groups', () => {
+    testGroup1._children.add(testGroup2)
+    testGroup2._children.add(testNode1)
+
+    const result = flatAndCategorizeSelectedItems([testGroup1])
+
+    expect(result.all).toEqual([testGroup1, testGroup2, testNode1])
+    expect(result.nodes).toEqual([testNode1])
+    expect(result.groups).toEqual([testGroup1, testGroup2])
+    expect(result.nodeToParentGroup.get(testNode1)).toBe(testGroup2)
+    expect(result.nodeToParentGroup.has(testGroup2 as any)).toBe(false)
+  })
+
+  it('should handle mixed selection of nodes and groups', () => {
+    testGroup1._children.add(testNode2)
+
+    const result = flatAndCategorizeSelectedItems([
+      testNode1,
+      testGroup1,
+      testNode3
+    ])
+
+    expect(result.all).toContain(testNode1)
+    expect(result.all).toContain(testNode2)
+    expect(result.all).toContain(testNode3)
+    expect(result.all).toContain(testGroup1)
+
+    expect(result.nodes).toEqual([testNode1, testNode2, testNode3])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.nodeToParentGroup.get(testNode1)).toBeUndefined()
+    expect(result.nodeToParentGroup.get(testNode2)).toBe(testGroup1)
+    expect(result.nodeToParentGroup.get(testNode3)).toBeUndefined()
+  })
+
+  it('should remove duplicate items across group and direct selection', () => {
+    testGroup1._children.add(testNode1)
+
+    const result = flatAndCategorizeSelectedItems([testGroup1, testNode1])
+
+    expect(result.all).toEqual([testGroup1, testNode1])
+    expect(result.nodes).toEqual([testNode1])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.nodeToParentGroup.get(testNode1)).toBe(testGroup1)
+  })
+
+  it('should handle non-node/non-group items as others', () => {
+    const unknownItem = { pos: [0, 0], size: [100, 100] } as Positionable
+
+    const result = flatAndCategorizeSelectedItems([
+      testNode1,
+      unknownItem,
+      testGroup1
+    ])
+
+    expect(result.nodes).toEqual([testNode1])
+    expect(result.groups).toEqual([testGroup1])
+    expect(result.others).toEqual([unknownItem])
+    expect(result.all).not.toContain(unknownItem)
+  })
+})

src/components/rightSidePanel/shared.ts

@@ -0,0 +1,271 @@
+import type { InjectionKey, MaybeRefOrGetter } from 'vue'
+import { computed, toValue } from 'vue'
+
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
+import type { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
+
+export const GetNodeParentGroupKey: InjectionKey<
+  (node: LGraphNode) => LGraphGroup | null
+> = Symbol('getNodeParentGroup')
+
+export type NodeWidgetsList = Array<{ node: LGraphNode; widget: IBaseWidget }>
+export type NodeWidgetsListList = Array<{
+  node: LGraphNode
+  widgets: NodeWidgetsList
+}>
+
+/**
+ * Searches widgets in a list and returns search results.
+ * Filters by name, localized label, type, and user-input value.
+ * Performs basic tokenization of the query string.
+ */
+export function searchWidgets<T extends { widget: IBaseWidget }[]>(
+  list: T,
+  query: string
+): T {
+  if (query.trim() === '') {
+    return list
+  }
+  const words = query.trim().toLowerCase().split(' ')
+  return list.filter(({ widget }) => {
+    const label = widget.label?.toLowerCase()
+    const name = widget.name.toLowerCase()
+    const type = widget.type.toLowerCase()
+    const value = widget.value?.toString().toLowerCase()
+    return words.every(
+      (word) =>
+        name.includes(word) ||
+        label?.includes(word) ||
+        type?.includes(word) ||
+        value?.includes(word)
+    )
+  }) as T
+}
+
+/**
+ * Searches widgets and nodes in a list and returns search results.
+ * First checks if the node title matches the query (if so, keeps entire node).
+ * Otherwise, filters widgets using searchWidgets.
+ * Performs basic tokenization of the query string.
+ */
+export function searchWidgetsAndNodes(
+  list: NodeWidgetsListList,
+  query: string
+): NodeWidgetsListList {
+  if (query.trim() === '') {
+    return list
+  }
+  const words = query.trim().toLowerCase().split(' ')
+  return list
+    .map((item) => {
+      const { node } = item
+      const title = node.getTitle().toLowerCase()
+      if (words.every((word) => title.includes(word))) {
+        return { ...item, keep: true }
+      }
+      return {
+        ...item,
+        keep: false,
+        widgets: searchWidgets(item.widgets, query)
+      }
+    })
+    .filter((item) => item.keep || item.widgets.length > 0)
+}
+
+type MixedSelectionItem = LGraphGroup | LGraphNode
+type FlatAndCategorizeSelectedItemsResult = {
+  all: MixedSelectionItem[]
+  nodes: LGraphNode[]
+  groups: LGraphGroup[]
+  others: Positionable[]
+  nodeToParentGroup: Map<LGraphNode, LGraphGroup>
+}
+
+type FlatItemsContext = {
+  nodeToParentGroup: Map<LGraphNode, LGraphGroup>
+  depth: number
+  parentGroup?: LGraphGroup
+}
+
+/**
+ * The selected items may contain "Group" nodes, which can include child nodes.
+ * This function flattens such structures and categorizes items into:
+ * - all: all categorizable nodes (does not include nodes in "others")
+ * - nodes: node items
+ * - groups: group items
+ * - others: items not currently supported
+ * - nodeToParentGroup: a map from each node to its direct parent group (if any)
+ * @param items The selected items to flatten and categorize
+ * @returns An object containing arrays: all, nodes, groups, others, and nodeToParentGroup map
+ */
+export function flatAndCategorizeSelectedItems(
+  items: Positionable[]
+): FlatAndCategorizeSelectedItemsResult {
+  const ctx: FlatItemsContext = {
+    nodeToParentGroup: new Map<LGraphNode, LGraphGroup>(),
+    depth: 0
+  }
+  const { all, nodes, groups, others } = flatItems(items, ctx)
+  return {
+    all: repeatItems(all),
+    nodes: repeatItems(nodes),
+    groups: repeatItems(groups),
+    others: repeatItems(others),
+    nodeToParentGroup: ctx.nodeToParentGroup
+  }
+}
+
+export function useFlatAndCategorizeSelectedItems(
+  items: MaybeRefOrGetter<Positionable[]>
+) {
+  const result = computed(() => flatAndCategorizeSelectedItems(toValue(items)))
+
+  return {
+    flattedItems: computed(() => result.value.all),
+    selectedNodes: computed(() => result.value.nodes),
+    selectedGroups: computed(() => result.value.groups),
+    selectedOthers: computed(() => result.value.others),
+    nodeToParentGroup: computed(() => result.value.nodeToParentGroup)
+  }
+}
+
+function flatItems(
+  items: Positionable[],
+  ctx: FlatItemsContext
+): Omit<FlatAndCategorizeSelectedItemsResult, 'nodeToParentGroup'> {
+  const result: MixedSelectionItem[] = []
+  const nodes: LGraphNode[] = []
+  const groups: LGraphGroup[] = []
+  const others: Positionable[] = []
+
+  if (ctx.depth > 1000) {
+    return {
+      all: [],
+      nodes: [],
+      groups: [],
+      others: []
+    }
+  }
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i] as Positionable
+
+    if (isLGraphGroup(item)) {
+      result.push(item)
+      groups.push(item)
+
+      const children = Array.from(item.children)
+      const childCtx: FlatItemsContext = {
+        nodeToParentGroup: ctx.nodeToParentGroup,
+        depth: ctx.depth + 1,
+        parentGroup: item
+      }
+      const {
+        all: childAll,
+        nodes: childNodes,
+        groups: childGroups,
+        others: childOthers
+      } = flatItems(children, childCtx)
+      result.push(...childAll)
+      nodes.push(...childNodes)
+      groups.push(...childGroups)
+      others.push(...childOthers)
+    } else if (isLGraphNode(item)) {
+      result.push(item)
+      nodes.push(item)
+      if (ctx.parentGroup) {
+        ctx.nodeToParentGroup.set(item, ctx.parentGroup)
+      }
+    } else {
+      // Other types of items are not supported yet
+      // Do not add to all
+      others.push(item)
+    }
+  }
+  return {
+    all: result,
+    nodes,
+    groups,
+    others
+  }
+}
+
+function repeatItems<T>(items: T[]): T[] {
+  const itemSet = new Set<T>()
+  const result: T[] = []
+  for (const item of items) {
+    if (itemSet.has(item)) continue
+    itemSet.add(item)
+    result.push(item)
+  }
+  return result
+}
+
+/**
+ * Renames a widget and its corresponding input.
+ * Handles both regular widgets and proxy widgets in subgraphs.
+ *
+ * @param widget The widget to rename
+ * @param node The node containing the widget
+ * @param newLabel The new label for the widget (empty string or undefined to clear)
+ * @param parents Optional array of parent SubgraphNodes (for proxy widgets)
+ * @returns true if the rename was successful, false otherwise
+ */
+export function renameWidget(
+  widget: IBaseWidget,
+  node: LGraphNode,
+  newLabel: string,
+  parents?: SubgraphNode[]
+): boolean {
+  // For proxy widgets in subgraphs, we need to rename the original interior widget
+  if (isProxyWidget(widget) && parents?.length) {
+    const subgraph = parents[0].subgraph
+    if (!subgraph) {
+      console.error('Could not find subgraph for proxy widget')
+      return false
+    }
+    const interiorNode = subgraph.getNodeById(parseInt(widget._overlay.nodeId))
+
+    if (!interiorNode) {
+      console.error('Could not find interior node for proxy widget')
+      return false
+    }
+
+    const originalWidget = interiorNode.widgets?.find(
+      (w) => w.name === widget._overlay.widgetName
+    )
+
+    if (!originalWidget) {
+      console.error('Could not find original widget for proxy widget')
+      return false
+    }
+
+    // Rename the original widget
+    originalWidget.label = newLabel || undefined
+
+    // Also rename the corresponding input on the interior node
+    const interiorInput = interiorNode.inputs?.find(
+      (inp) => inp.widget?.name === widget._overlay.widgetName
+    )
+    if (interiorInput) {
+      interiorInput.label = newLabel || undefined
+    }
+  }
+
+  // Always rename the widget on the current node (either regular widget or proxy widget)
+  const input = node.inputs?.find((inp) => inp.widget?.name === widget.name)
+
+  // Intentionally mutate the widget object here as it's a reference
+  // to the actual widget in the graph
+  widget.label = newLabel || undefined
+  if (input) {
+    input.label = newLabel || undefined
+  }
+
+  return true
+}

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { watchDebounced } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import {
   computed,
   customRef,
@@ -26,17 +27,19 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import { DraggableList } from '@/scripts/ui/draggableList'
 import { useLitegraphService } from '@/services/litegraphService'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
-import SidePanelSearch from '../layout/SidePanelSearch.vue'
 import SubgraphNodeWidget from './SubgraphNodeWidget.vue'
 
 const canvasStore = useCanvasStore()
+const rightSidePanelStore = useRightSidePanelStore()
+const { searchQuery } = storeToRefs(rightSidePanelStore)
 
 const draggableList = ref<DraggableList | undefined>(undefined)
 const draggableItems = ref()
-const searchQuery = ref<string>('')
 const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
   get() {
     track()
@@ -56,10 +59,6 @@ const proxyWidgets = customRef<ProxyWidgetsProperty>((track, trigger) => ({
   }
 }))
 
-async function searcher(query: string) {
-  searchQuery.value = query
-}
-
 const activeNode = computed(() => {
   const node = canvasStore.selectedItems[0]
   if (node instanceof SubgraphNode) return node
@@ -244,14 +243,25 @@ onBeforeUnmount(() => {
 
 <template>
   <div v-if="activeNode" class="subgraph-edit-section flex h-full flex-col">
-    <div class="p-4 flex gap-2">
-      <SidePanelSearch :searcher />
+    <div class="px-4 pb-4 pt-1 flex gap-2 border-b border-interface-stroke">
+      <FormSearchInput v-model="searchQuery" />
     </div>
 
     <div class="flex-1">
+      <div
+        v-if="
+          searchQuery &&
+          filteredActive.length === 0 &&
+          filteredCandidates.length === 0
+        "
+        class="text-sm text-muted-foreground px-4 py-10 text-center"
+      >
+        {{ $t('rightSidePanel.noneSearchDesc') }}
+      </div>
+
       <div
         v-if="filteredActive.length"
-        class="flex flex-col border-t border-interface-stroke"
+        class="flex flex-col border-b border-interface-stroke"
       >
         <div
           class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
@@ -270,7 +280,7 @@ onBeforeUnmount(() => {
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredActive"
             :key="toKey([node, widget])"
-            class="bg-interface-panel-surface"
+            class="bg-comfy-menu-bg"
             :node-title="node.title"
             :widget-name="widget.name"
             :is-shown="true"
@@ -283,7 +293,7 @@ onBeforeUnmount(() => {
 
       <div
         v-if="filteredCandidates.length"
-        class="flex flex-col border-t border-interface-stroke"
+        class="flex flex-col border-b border-interface-stroke"
       >
         <div
           class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
@@ -302,7 +312,7 @@ onBeforeUnmount(() => {
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredCandidates"
             :key="toKey([node, widget])"
-            class="bg-interface-panel-surface"
+            class="bg-comfy-menu-bg"
             :node-title="node.title"
             :widget-name="widget.name"
             @toggle-visibility="promote([node, widget])"
@@ -312,7 +322,7 @@ onBeforeUnmount(() => {
 
       <div
         v-if="recommendedWidgets.length"
-        class="flex justify-center border-t border-interface-stroke py-4"
+        class="flex justify-center border-b border-interface-stroke py-4"
       >
         <Button
           size="sm"

src/components/sidebar/ModeToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { t } from '@/i18n'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+const canvasStore = useCanvasStore()
+</script>
+<template>
+  <div class="p-1 bg-secondary-background rounded-lg w-10">
+    <Button
+      size="icon"
+      :title="t('linearMode.linearMode')"
+      :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
+      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+    >
+      <i class="icon-[lucide--panels-top-left]" />
+    </Button>
+    <Button
+      size="icon"
+      :title="t('linearMode.graphMode')"
+      :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
+      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+    >
+      <i class="icon-[comfy--workflow]" />
+    </Button>
+  </div>
+</template>

src/components/sidebar/SideToolbar.vue

@@ -44,6 +44,7 @@
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
+        <ModeToggle v-if="showLinearToggle" />
       </div>
     </div>
     <HelpCenterPopups :is-small="isSmall" />
@@ -51,15 +52,17 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver } from '@vueuse/core'
+import { useResizeObserver, whenever } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.vue'
 import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
+import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -84,6 +87,12 @@ const sideToolbarRef = ref<HTMLElement>()
 const topToolbarRef = ref<HTMLElement>()
 const bottomToolbarRef = ref<HTMLElement>()
 
+const showLinearToggle = ref(useFeatureFlags().flags.linearToggleEnabled)
+whenever(
+  () => canvasStore.linearMode,
+  () => (showLinearToggle.value = true)
+)
+
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -74,8 +74,22 @@
           "
           :primary-text="getAssetPrimaryText(item.asset)"
           :secondary-text="getAssetSecondaryText(item.asset)"
+          @mouseenter="onAssetEnter(item.asset.id)"
+          @mouseleave="onAssetLeave(item.asset.id)"
+          @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
           @click.stop="emit('select-asset', item.asset)"
-        />
+        >
+          <template v-if="hoveredAssetId === item.asset.id" #actions>
+            <Button
+              variant="secondary"
+              size="icon"
+              :aria-label="t('mediaAsset.actions.moreOptions')"
+              @click.stop="emit('context-menu', $event, item.asset)"
+            >
+              <i class="icon-[lucide--ellipsis] size-4" />
+            </Button>
+          </template>
+        </AssetsListItem>
       </template>
     </VirtualGrid>
   </div>
@@ -111,12 +125,14 @@ const { assets, isSelected } = defineProps<{
 
 const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem): void
+  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
 }>()
 
 const { t } = useI18n()
 const { jobItems } = useJobList()
 const hoveredJobId = ref<string | null>(null)
+const hoveredAssetId = ref<string | null>(null)
 
 type AssetListItem = { key: string; asset: AssetItem }
 
@@ -192,6 +208,16 @@ function onJobLeave(jobId: string) {
   }
 }
 
+function onAssetEnter(assetId: string) {
+  hoveredAssetId.value = assetId
+}
+
+function onAssetLeave(assetId: string) {
+  if (hoveredAssetId.value === assetId) {
+    hoveredAssetId.value = null
+  }
+}
+
 function getJobIconClass(job: JobListItem): string | undefined {
   const classes = []
   const iconName = job.iconName ?? iconForJobState(job.state)

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -101,6 +101,7 @@
           :assets="displayAssets"
           :is-selected="isSelected"
           @select-asset="handleAssetSelect"
+          @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
         <VirtualGrid
@@ -120,17 +121,10 @@
               :selected="isSelected(item.id)"
               :show-output-count="shouldShowOutputCount(item)"
               :output-count="getOutputCount(item)"
-              :show-delete-button="shouldShowDeleteButton"
-              :open-context-menu-id="openContextMenuId"
-              :selected-assets="getSelectedAssets(displayAssets)"
-              :has-selection="hasSelection"
               @click="handleAssetSelect(item)"
+              @context-menu="handleAssetContextMenu"
               @zoom="handleZoomClick(item)"
               @output-count-click="enterFolderView(item)"
-              @asset-deleted="refreshAssets"
-              @context-menu-opened="openContextMenuId = item.id"
-              @bulk-download="handleBulkDownload"
-              @bulk-delete="handleBulkDelete"
             />
           </template>
         </VirtualGrid>
@@ -196,6 +190,21 @@
     v-model:active-index="galleryActiveIndex"
     :all-gallery-items="galleryItems"
   />
+  <MediaAssetContextMenu
+    v-if="contextMenuAsset"
+    ref="contextMenuRef"
+    :asset="contextMenuAsset"
+    :asset-type="contextMenuAssetType"
+    :file-kind="contextMenuFileKind"
+    :show-delete-button="shouldShowDeleteButton"
+    :selected-assets="selectedAssets"
+    :is-bulk-mode="isBulkMode"
+    @zoom="handleZoomClick(contextMenuAsset)"
+    @hide="handleContextMenuHide"
+    @asset-deleted="refreshAssets"
+    @bulk-download="handleBulkDownload"
+    @bulk-delete="handleBulkDelete"
+  />
 </template>
 
 <script setup lang="ts">
@@ -203,7 +212,7 @@ import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
@@ -216,15 +225,19 @@ import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
+import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
+import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAssetFiltering'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { getJobDetail } from '@/services/jobOutputCache'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { ResultItemImpl, useQueueStore } from '@/stores/queueStore'
@@ -248,8 +261,8 @@ const isListView = computed(
   () => isQueuePanelV2Enabled.value && viewMode.value === 'list'
 )
 
-// Track which asset's context menu is open (for single-instance context menu management)
-const openContextMenuId = ref<string | null>(null)
+const contextMenuRef = ref<InstanceType<typeof MediaAssetContextMenu>>()
+const contextMenuAsset = ref<AssetItem | null>(null)
 
 // Determine if delete button should be shown
 // Hide delete button when in input tab and not in cloud (OSS mode - files are from local folders)
@@ -258,6 +271,14 @@ const shouldShowDeleteButton = computed(() => {
   return true
 })
 
+const contextMenuAssetType = computed(() =>
+  contextMenuAsset.value ? getAssetType(contextMenuAsset.value.tags) : 'input'
+)
+
+const contextMenuFileKind = computed<MediaKind>(() =>
+  getMediaTypeFromFilename(contextMenuAsset.value?.name ?? '')
+)
+
 const shouldShowOutputCount = (item: AssetItem): boolean => {
   if (activeTab.value !== 'output' || isInFolderView.value) {
     return false
@@ -327,8 +348,7 @@ const isHoveringSelectionCount = useElementHover(selectionCountButtonRef)
 
 // Total output count for all selected assets
 const totalOutputCount = computed(() => {
-  const selectedAssets = getSelectedAssets(displayAssets.value)
-  return getTotalOutputCount(selectedAssets)
+  return getTotalOutputCount(selectedAssets.value)
 })
 
 const currentAssets = computed(() =>
@@ -359,6 +379,12 @@ const displayAssets = computed(() => {
   return filteredAssets.value
 })
 
+const selectedAssets = computed(() => getSelectedAssets(displayAssets.value))
+
+const isBulkMode = computed(
+  () => hasSelection.value && selectedAssets.value.length > 1
+)
+
 const showLoadingState = computed(
   () =>
     loading.value &&
@@ -444,6 +470,31 @@ const handleAssetSelect = (asset: AssetItem) => {
   handleAssetClick(asset, index, displayAssets.value)
 }
 
+function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
+  contextMenuAsset.value = asset
+  void nextTick(() => {
+    contextMenuRef.value?.show(event)
+  })
+}
+
+function handleContextMenuHide() {
+  contextMenuAsset.value = null
+}
+
+const handleBulkDownload = (assets: AssetItem[]) => {
+  downloadMultipleAssets(assets)
+  clearSelection()
+}
+
+const handleBulkDelete = async (assets: AssetItem[]) => {
+  await deleteMultipleAssets(assets)
+  clearSelection()
+}
+
+const handleClearQueue = async () => {
+  await commandStore.execute('Comfy.ClearPendingTasks')
+}
+
 const handleZoomClick = (asset: AssetItem) => {
   const mediaType = getMediaTypeFromFilename(asset.name)
 
@@ -471,16 +522,16 @@ const handleZoomClick = (asset: AssetItem) => {
   }
 }
 
-const enterFolderView = (asset: AssetItem) => {
+const enterFolderView = async (asset: AssetItem) => {
   const metadata = getOutputAssetMetadata(asset.user_metadata)
   if (!metadata) {
     console.warn('Invalid output asset metadata')
     return
   }
 
-  const { promptId, allOutputs, executionTimeInSeconds } = metadata
+  const { promptId, allOutputs, executionTimeInSeconds, outputCount } = metadata
 
-  if (!promptId || !Array.isArray(allOutputs) || allOutputs.length === 0) {
+  if (!promptId) {
     console.warn('Missing required folder view data')
     return
   }
@@ -488,7 +539,49 @@ const enterFolderView = (asset: AssetItem) => {
   folderPromptId.value = promptId
   folderExecutionTime.value = executionTimeInSeconds
 
-  folderAssets.value = allOutputs.map((output) => ({
+  // Determine which outputs to display
+  let outputsToDisplay = allOutputs ?? []
+
+  // If outputCount indicates more outputs than we have, fetch full outputs
+  const needsFullOutputs =
+    typeof outputCount === 'number' &&
+    outputCount > 1 &&
+    outputsToDisplay.length < outputCount
+
+  if (needsFullOutputs) {
+    const jobDetail = await getJobDetail(promptId)
+    if (jobDetail?.outputs) {
+      // Convert job outputs to ResultItemImpl array
+      outputsToDisplay = Object.entries(jobDetail.outputs).flatMap(
+        ([nodeId, nodeOutputs]) =>
+          Object.entries(nodeOutputs).flatMap(([mediaType, items]) =>
+            (
+              items as Array<{
+                filename: string
+                subfolder: string
+                type: string
+              }>
+            )
+              .map(
+                (item) =>
+                  new ResultItemImpl({
+                    ...item,
+                    nodeId,
+                    mediaType
+                  })
+              )
+              .filter((r) => r.supportsPreview)
+          )
+      )
+    }
+  }
+
+  if (outputsToDisplay.length === 0) {
+    console.warn('No outputs available for folder view')
+    return
+  }
+
+  folderAssets.value = outputsToDisplay.map((output) => ({
     id: `${output.nodeId}-${output.filename}`,
     name: output.filename,
     size: 0,
@@ -552,31 +645,15 @@ const copyJobId = async () => {
 }
 
 const handleDownloadSelected = () => {
-  const selectedAssets = getSelectedAssets(displayAssets.value)
-  downloadMultipleAssets(selectedAssets)
+  downloadMultipleAssets(selectedAssets.value)
   clearSelection()
 }
 
 const handleDeleteSelected = async () => {
-  const selectedAssets = getSelectedAssets(displayAssets.value)
-  await deleteMultipleAssets(selectedAssets)
+  await deleteMultipleAssets(selectedAssets.value)
   clearSelection()
 }
 
-const handleBulkDownload = (assets: AssetItem[]) => {
-  downloadMultipleAssets(assets)
-  clearSelection()
-}
-
-const handleBulkDelete = async (assets: AssetItem[]) => {
-  await deleteMultipleAssets(assets)
-  clearSelection()
-}
-
-const handleClearQueue = async () => {
-  await commandStore.execute('Comfy.ClearPendingTasks')
-}
-
 const handleApproachEnd = useDebounceFn(async () => {
   if (
     activeTab.value === 'output' &&

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -1,6 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="$t('sideToolbar.workflows')"
+    v-bind="$attrs"
     class="workflows-sidebar-tab"
   >
     <template #tool-buttons>

src/components/topbar/WorkflowTab.vue

@@ -7,6 +7,19 @@
     @mouseleave="handleMouseLeave"
     @click="handleClick"
   >
+    <Button
+      v-if="isActiveTab"
+      class="context-menu-button -mx-1 w-auto px-1 py-0"
+      variant="muted-textonly"
+      size="icon-sm"
+      @click.stop="handleMenuClick"
+    >
+      <i class="pi pi-bars" />
+    </Button>
+    <i
+      v-else-if="workflowOption.workflow.activeState?.extra?.linearMode"
+      class="icon-[lucide--panels-top-left] bg-primary-background"
+    />
     <span class="workflow-label inline-block max-w-[150px] truncate text-sm">
       {{ workflowOption.workflow.filename }}
     </span>
@@ -34,9 +47,26 @@
     :thumbnail-url="thumbnailUrl"
     :is-active-tab="isActiveTab"
   />
+
+  <Menu
+    v-if="isActiveTab"
+    ref="menu"
+    :model="menuItems"
+    :popup="true"
+    :pt="{
+      root: {
+        style: 'background-color: var(--comfy-menu-bg)'
+      },
+      itemLink: {
+        class: 'py-2'
+      }
+    }"
+  />
 </template>
 
 <script setup lang="ts">
+import type { MenuState } from 'primevue/menu'
+import Menu from 'primevue/menu'
 import { computed, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -45,11 +75,14 @@ import {
   usePragmaticDraggable,
   usePragmaticDroppable
 } from '@/composables/usePragmaticDragAndDrop'
+import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
+import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 import WorkflowTabPopover from './WorkflowTabPopover.vue'
@@ -114,6 +147,12 @@ const thumbnailUrl = computed(() => {
   return workflowThumbnail.getThumbnail(props.workflowOption.workflow.key)
 })
 
+const menu = ref<InstanceType<typeof Menu> & MenuState>()
+
+const { menuItems } = useWorkflowActionsMenu(() =>
+  useCommandStore().execute('Comfy.RenameWorkflow')
+)
+
 // Event handlers that delegate to the popover component
 const handleMouseEnter = (event: Event) => {
   popoverRef.value?.showPopover(event)
@@ -127,6 +166,14 @@ const handleClick = (event: Event) => {
   popoverRef.value?.togglePopover(event)
 }
 
+const handleMenuClick = (event: MouseEvent) => {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'workflow_tab_menu_selected'
+  })
+  // Show breadcrumb menu instead of emitting context click
+  menu.value?.toggle(event)
+}
+
 const closeWorkflows = async (options: WorkflowOption[]) => {
   for (const opt of options) {
     if (

src/components/topbar/WorkflowTabs.vue

@@ -80,7 +80,12 @@
       />
       <LoginButton v-else-if="isDesktop" class="p-1" />
     </div>
-    <ContextMenu ref="menu" :model="contextMenuItems" />
+    <ContextMenu ref="menu" :model="contextMenuItems">
+      <template #itemicon="{ item }">
+        <OverlayIcon v-if="item.overlayIcon" v-bind="item.overlayIcon" />
+        <i v-else-if="item.icon" :class="item.icon" />
+      </template>
+    </ContextMenu>
     <div v-if="isDesktop" class="window-actions-spacer app-drag shrink-0" />
   </div>
 </template>
@@ -94,6 +99,8 @@ import { computed, nextTick, onUpdated, ref, watch } from 'vue'
 import type { WatchStopHandle } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import OverlayIcon from '@/components/common/OverlayIcon.vue'
+import type { OverlayIconProps } from '@/components/common/OverlayIcon.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import TopMenuHelpButton from '@/components/topbar/TopMenuHelpButton.vue'
@@ -101,13 +108,11 @@ import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
+import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
-import {
-  useWorkflowBookmarkStore,
-  useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
@@ -128,8 +133,8 @@ const { t } = useI18n()
 const settingStore = useSettingStore()
 const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
-const workflowBookmarkStore = useWorkflowBookmarkStore()
 const workflowService = useWorkflowService()
+const commandStore = useCommandStore()
 const { isLoggedIn } = useCurrentUser()
 
 const isIntegratedTabBar = computed(
@@ -193,54 +198,73 @@ const showContextMenu = (event: MouseEvent, option: WorkflowOption) => {
   rightClickedTab.value = option
   menu.value.show(event)
 }
+
+const rightClickedWorkflow = computed(
+  () => rightClickedTab.value?.workflow ?? null
+)
+
+const { menuItems: baseMenuItems } = useWorkflowActionsMenu(
+  () => commandStore.execute('Comfy.RenameWorkflow'),
+  {
+    includeDelete: false,
+    workflow: rightClickedWorkflow
+  }
+)
+
 const contextMenuItems = computed(() => {
-  const tab = rightClickedTab.value as WorkflowOption
+  const tab = rightClickedTab.value
   if (!tab) return []
   const index = options.value.findIndex((v) => v.workflow === tab.workflow)
 
   return [
-    {
-      label: t('tabMenu.duplicateTab'),
-      command: async () => {
-        await workflowService.duplicateWorkflow(tab.workflow)
-      }
-    },
-    {
-      separator: true
-    },
+    ...baseMenuItems.value,
     {
       label: t('tabMenu.closeTab'),
+      icon: 'pi pi-times',
       command: () => onCloseWorkflow(tab)
     },
     {
       label: t('tabMenu.closeTabsToLeft'),
+      overlayIcon: {
+        mainIcon: 'pi pi-times',
+        subIcon: 'pi pi-arrow-left',
+        positionX: 'right',
+        positionY: 'bottom',
+        subIconScale: 0.5
+      } as OverlayIconProps,
       command: () => closeWorkflows(options.value.slice(0, index)),
       disabled: index <= 0
     },
     {
       label: t('tabMenu.closeTabsToRight'),
+      overlayIcon: {
+        mainIcon: 'pi pi-times',
+        subIcon: 'pi pi-arrow-right',
+        positionX: 'right',
+        positionY: 'bottom',
+        subIconScale: 0.5
+      } as OverlayIconProps,
       command: () => closeWorkflows(options.value.slice(index + 1)),
       disabled: index === options.value.length - 1
     },
     {
       label: t('tabMenu.closeOtherTabs'),
+      overlayIcon: {
+        mainIcon: 'pi pi-times',
+        subIcon: 'pi pi-arrows-h',
+        positionX: 'right',
+        positionY: 'bottom',
+        subIconScale: 0.5
+      } as OverlayIconProps,
       command: () =>
         closeWorkflows([
           ...options.value.slice(index + 1),
           ...options.value.slice(0, index)
         ]),
       disabled: options.value.length <= 1
-    },
-    {
-      label: workflowBookmarkStore.isBookmarked(tab.workflow.path)
-        ? t('tabMenu.removeFromBookmarks')
-        : t('tabMenu.addToBookmarks'),
-      command: () => workflowBookmarkStore.toggleBookmarked(tab.workflow.path),
-      disabled: tab.workflow.isTemporary
     }
   ]
 })
-const commandStore = useCommandStore()
 
 // Horizontal scroll on wheel
 const handleWheel = (event: WheelEvent) => {

src/components/ui/Popover.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  PopoverArrow,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger
+} from 'reka-ui'
+
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps<{
+  entries?: { label: string; action?: () => void; icon?: string }[][]
+  icon?: string
+  to?: string | HTMLElement
+}>()
+</script>
+
+<template>
+  <PopoverRoot v-slot="{ close }">
+    <PopoverTrigger as-child>
+      <slot name="button">
+        <Button size="icon">
+          <i :class="icon ?? 'icon-[lucide--ellipsis]'" />
+        </Button>
+      </slot>
+    </PopoverTrigger>
+    <PopoverPortal :to>
+      <PopoverContent
+        side="bottom"
+        :side-offset="5"
+        :collision-padding="10"
+        v-bind="$attrs"
+        class="rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+      >
+        <slot>
+          <div class="flex flex-col p-1">
+            <section
+              v-for="(entryGroup, index) in entries ?? []"
+              :key="index"
+              class="flex flex-col border-b-2 last:border-none border-border-subtle"
+            >
+              <div
+                v-for="{ label, action, icon } in entryGroup"
+                :key="label"
+                :class="
+                  cn(
+                    'flex flex-row gap-4 p-2 rounded-sm my-1',
+                    action &&
+                      'cursor-pointer hover:bg-secondary-background-hover'
+                  )
+                "
+                @click="
+                  () => {
+                    if (!action) return
+                    action()
+                    close()
+                  }
+                "
+              >
+                <i v-if="icon" :class="icon" />
+                {{ label }}
+              </div>
+            </section>
+          </div>
+        </slot>
+        <PopoverArrow class="fill-base-background stroke-border-subtle" />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

src/components/ui/TypeformPopoverButton.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { whenever } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+defineProps<{
+  dataTfWidget: string
+}>()
+
+const feedbackRef = useTemplateRef('feedbackRef')
+
+whenever(feedbackRef, () => {
+  const scriptEl = document.createElement('script')
+  scriptEl.src = '//embed.typeform.com/next/embed.js'
+  feedbackRef.value?.appendChild(scriptEl)
+})
+</script>
+<template>
+  <Popover>
+    <template #button>
+      <Button variant="inverted" class="rounded-full size-12">
+        <i class="icon-[lucide--circle-question-mark] size-6" />
+      </Button>
+    </template>
+    <div ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
+  </Popover>
+</template>

src/components/ui/ZoomPane.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+
+const zoomPane = useTemplateRef('zoomPane')
+
+const zoom = ref(1.0)
+const panX = ref(0.0)
+const panY = ref(0.0)
+
+function handleWheel(e: WheelEvent) {
+  const zoomPaneEl = zoomPane.value
+  if (!zoomPaneEl) return
+
+  zoom.value -= e.deltaY
+  const { x, y, width, height } = zoomPaneEl.getBoundingClientRect()
+  const offsetX = e.clientX - x - width / 2
+  const offsetY = e.clientY - y - height / 2
+  const scaler = 1.1 ** (e.deltaY / -30)
+
+  panY.value = panY.value * scaler - offsetY * (scaler - 1)
+  panX.value = panX.value * scaler - offsetX * (scaler - 1)
+}
+
+let dragging = false
+function handleDown(e: PointerEvent) {
+  if (e.button !== 0) return
+
+  const zoomPaneEl = zoomPane.value
+  if (!zoomPaneEl) return
+  zoomPaneEl.parentElement?.focus()
+
+  zoomPaneEl.setPointerCapture(e.pointerId)
+  dragging = true
+}
+function handleMove(e: PointerEvent) {
+  if (!dragging) return
+  panX.value += e.movementX
+  panY.value += e.movementY
+}
+
+const transform = computed(() => {
+  const scale = 1.1 ** (zoom.value / 30)
+  const matrix = [scale, 0, 0, scale, panX.value, panY.value]
+  return `matrix(${matrix.join(',')})`
+})
+</script>
+<template>
+  <div
+    ref="zoomPane"
+    class="contain-size flex place-content-center"
+    @wheel="handleWheel"
+    @pointerdown.prevent="handleDown"
+    @pointermove="handleMove"
+    @pointerup="dragging = false"
+    @pointercancel="dragging = false"
+  >
+    <slot :style="{ transform }" />
+  </div>
+</template>

src/components/widget/nav/NavItem.vue

@@ -1,5 +1,10 @@
 <template>
   <div
+    v-tooltip.right="{
+      value: tooltipText,
+      disabled: !isOverflowing,
+      pt: { text: { class: 'whitespace-nowrap' } }
+    }"
     class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="
       active
@@ -7,19 +12,22 @@
         : 'hover:bg-interface-menu-component-surface-hovered'
     "
     role="button"
+    @mouseenter="checkOverflow"
     @click="onClick"
   >
     <div v-if="icon" class="pt-0.5">
       <NavIcon :icon="icon" />
     </div>
     <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
-    <span class="flex items-center break-all">
+    <span ref="textRef" class="min-w-0 truncate">
       <slot></slot>
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+
 import type { NavItemData } from '@/types/navTypes'
 
 import NavIcon from './NavIcon.vue'
@@ -29,4 +37,15 @@ const { icon, active, onClick } = defineProps<{
   active?: boolean
   onClick: () => void
 }>()
+
+const textRef = ref<HTMLElement | null>(null)
+const isOverflowing = ref(false)
+
+const checkOverflow = () => {
+  if (!textRef.value) return
+  isOverflowing.value =
+    textRef.value.scrollWidth > textRef.value.clientWidth + 1
+}
+
+const tooltipText = computed(() => textRef.value?.textContent ?? '')
 </script>

src/composables/graph/useGraphHierarchy.test.ts

@@ -0,0 +1,133 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import * as measure from '@/lib/litegraph/src/measure'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+import { useGraphHierarchy } from './useGraphHierarchy'
+
+vi.mock('@/renderer/core/canvas/canvasStore')
+
+describe('useGraphHierarchy', () => {
+  let mockCanvasStore: ReturnType<typeof useCanvasStore>
+  let mockNode: LGraphNode
+  let mockGroups: LGraphGroup[]
+
+  beforeEach(() => {
+    mockNode = {
+      boundingRect: [100, 100, 50, 50]
+    } as unknown as LGraphNode
+
+    mockGroups = []
+
+    mockCanvasStore = {
+      canvas: {
+        graph: {
+          groups: mockGroups
+        }
+      }
+    } as any
+
+    vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore)
+  })
+
+  describe('findParentGroup', () => {
+    it('returns null when no groups exist', () => {
+      const { findParentGroup } = useGraphHierarchy()
+
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBeNull()
+    })
+
+    it('returns null when node is not in any group', () => {
+      const group = {
+        boundingRect: [0, 0, 50, 50]
+      } as unknown as LGraphGroup
+      mockGroups.push(group)
+
+      vi.spyOn(measure, 'containsCentre').mockReturnValue(false)
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBeNull()
+    })
+
+    it('returns the only group when node is in exactly one group', () => {
+      const group = {
+        boundingRect: [0, 0, 200, 200]
+      } as unknown as LGraphGroup
+      mockGroups.push(group)
+
+      vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBe(group)
+    })
+
+    it('returns the smallest group when node is in multiple groups', () => {
+      const largeGroup = {
+        boundingRect: [0, 0, 300, 300]
+      } as unknown as LGraphGroup
+      const smallGroup = {
+        boundingRect: [50, 50, 100, 100]
+      } as unknown as LGraphGroup
+      mockGroups.push(largeGroup, smallGroup)
+
+      vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
+      vi.spyOn(measure, 'containsRect').mockReturnValue(false)
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBe(smallGroup)
+    })
+
+    it('returns the inner group when one group contains another', () => {
+      const outerGroup = {
+        boundingRect: [0, 0, 300, 300]
+      } as unknown as LGraphGroup
+      const innerGroup = {
+        boundingRect: [50, 50, 100, 100]
+      } as unknown as LGraphGroup
+      mockGroups.push(outerGroup, innerGroup)
+
+      vi.spyOn(measure, 'containsCentre').mockReturnValue(true)
+      vi.spyOn(measure, 'containsRect').mockImplementation(
+        (container, contained) => {
+          // outerGroup contains innerGroup
+          if (container === outerGroup.boundingRect) {
+            return contained === innerGroup.boundingRect
+          }
+          return false
+        }
+      )
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBe(innerGroup)
+    })
+
+    it('handles null canvas gracefully', () => {
+      mockCanvasStore.canvas = null as any
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBeNull()
+    })
+
+    it('handles null graph gracefully', () => {
+      mockCanvasStore.canvas!.graph = null as any
+
+      const { findParentGroup } = useGraphHierarchy()
+      const result = findParentGroup(mockNode)
+
+      expect(result).toBeNull()
+    })
+  })
+})

src/composables/graph/useGraphHierarchy.ts

@@ -0,0 +1,57 @@
+import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { containsCentre, containsRect } from '@/lib/litegraph/src/measure'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+/**
+ * Composable for working with graph hierarchy, specifically group containment.
+ */
+export function useGraphHierarchy() {
+  const canvasStore = useCanvasStore()
+
+  /**
+   * Finds the smallest group that contains the center of a node's bounding box.
+   * When multiple groups contain the node, returns the one with the smallest area.
+   *
+   * TODO: This traverses the entire graph and could be very slow; needs optimization.
+   * Consider spatial indexing or caching for large graphs.
+   *
+   * @param node - The node to find the parent group for
+   * @returns The parent group if found, otherwise null
+   */
+  function findParentGroup(node: LGraphNode): LGraphGroup | null {
+    const graphGroups = (canvasStore.canvas?.graph?.groups ??
+      []) as LGraphGroup[]
+
+    let parent: LGraphGroup | null = null
+
+    for (const group of graphGroups) {
+      const groupRect = group.boundingRect
+      if (!containsCentre(groupRect, node.boundingRect)) continue
+
+      if (!parent) {
+        parent = group
+        continue
+      }
+
+      const parentRect = parent.boundingRect
+      const candidateInsideParent = containsRect(parentRect, groupRect)
+      const parentInsideCandidate = containsRect(groupRect, parentRect)
+
+      if (candidateInsideParent && !parentInsideCandidate) {
+        parent = group
+        continue
+      }
+
+      const candidateArea = groupRect[2] * groupRect[3]
+      const parentArea = parentRect[2] * parentRect[3]
+
+      if (candidateArea < parentArea) parent = group
+    }
+
+    return parent
+  }
+
+  return {
+    findParentGroup
+  }
+}

src/composables/graph/useGraphNodeManager.ts

@@ -104,7 +104,7 @@ function widgetWithVueTrack(
     return { get() {}, set() {} }
   })
 }
-export function useReactiveWidgetValue(widget: IBaseWidget) {
+function useReactiveWidgetValue(widget: IBaseWidget) {
   widgetWithVueTrack(widget)
   widget.vueTrack()
   return widget.value
@@ -120,12 +120,59 @@ function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
     update: (value) => (cagWidget.value = normalizeControlOption(value))
   }
 }
+
 function getNodeType(node: LGraphNode, widget: IBaseWidget) {
   if (!node.isSubgraphNode() || !isProxyWidget(widget)) return undefined
   const subNode = node.subgraph.getNodeById(widget._overlay.nodeId)
   return subNode?.type
 }
 
+/**
+ * Shared widget enhancements used by both safeWidgetMapper and Right Side Panel
+ */
+interface SharedWidgetEnhancements {
+  /** Reactive widget value that updates when the widget changes */
+  value: WidgetValue
+  /** Control widget for seed randomization/increment/decrement */
+  controlWidget?: SafeControlWidget
+  /** Input specification from node definition */
+  spec?: InputSpec
+  /** Node type (for subgraph promoted widgets) */
+  nodeType?: string
+  /** Border style for promoted/advanced widgets */
+  borderStyle?: string
+  /** Widget label */
+  label?: string
+  /** Widget options */
+  options?: Record<string, any>
+}
+
+/**
+ * Extracts common widget enhancements shared across different rendering contexts.
+ * This function centralizes the logic for extracting metadata and reactive values
+ * from widgets, ensuring consistency between Nodes 2.0 and Right Side Panel.
+ */
+export function getSharedWidgetEnhancements(
+  node: LGraphNode,
+  widget: IBaseWidget
+): SharedWidgetEnhancements {
+  const nodeDefStore = useNodeDefStore()
+
+  return {
+    value: useReactiveWidgetValue(widget),
+    controlWidget: getControlWidget(widget),
+    spec: nodeDefStore.getInputSpecForWidget(node, widget.name),
+    nodeType: getNodeType(node, widget),
+    borderStyle: widget.promoted
+      ? 'ring ring-component-node-widget-promoted'
+      : widget.advanced
+        ? 'ring ring-component-node-widget-advanced'
+        : undefined,
+    label: widget.label,
+    options: widget.options
+  }
+}
+
 /**
  * Validates that a value is a valid WidgetValue type
  */
@@ -157,20 +204,17 @@ const normalizeWidgetValue = (value: unknown): WidgetValue => {
   return undefined
 }
 
-export function safeWidgetMapper(
+function safeWidgetMapper(
   node: LGraphNode,
   slotMetadata: Map<string, WidgetSlotMetadata>
 ): (widget: IBaseWidget) => SafeWidgetData {
-  const nodeDefStore = useNodeDefStore()
   return function (widget) {
     try {
-      const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
+      // Get shared enhancements used by both Nodes 2.0 and Right Side Panel
+      const sharedEnhancements = getSharedWidgetEnhancements(node, widget)
       const slotInfo = slotMetadata.get(widget.name)
-      const borderStyle = widget.promoted
-        ? 'ring ring-component-node-widget-promoted'
-        : widget.advanced
-          ? 'ring ring-component-node-widget-advanced'
-          : undefined
+
+      // Wrapper callback specific to Nodes 2.0 rendering
       const callback = (v: unknown) => {
         const value = normalizeWidgetValue(v)
         widget.value = value ?? undefined
@@ -185,16 +229,10 @@ export function safeWidgetMapper(
       return {
         name: widget.name,
         type: widget.type,
-        value: useReactiveWidgetValue(widget),
-        borderStyle,
+        ...sharedEnhancements,
         callback,
-        controlWidget: getControlWidget(widget),
         hasLayoutSize: typeof widget.computeLayoutSize === 'function',
         isDOMWidget: isDOMWidget(widget),
-        label: widget.label,
-        nodeType: getNodeType(node, widget),
-        options: widget.options,
-        spec,
         slotMetadata: slotInfo
       }
     } catch (error) {
@@ -207,15 +245,77 @@ export function safeWidgetMapper(
   }
 }
 
-export function isValidWidgetValue(value: unknown): value is WidgetValue {
-  return (
-    value === null ||
-    value === undefined ||
-    typeof value === 'string' ||
-    typeof value === 'number' ||
-    typeof value === 'boolean' ||
-    typeof value === 'object'
-  )
+// Extract safe data from LiteGraph node for Vue consumption
+export function extractVueNodeData(node: LGraphNode): VueNodeData {
+  // Determine subgraph ID - null for root graph, string for subgraphs
+  const subgraphId =
+    node.graph && 'id' in node.graph && node.graph !== node.graph.rootGraph
+      ? String(node.graph.id)
+      : null
+  // Extract safe widget data
+  const slotMetadata = new Map<string, WidgetSlotMetadata>()
+
+  const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
+  Object.defineProperty(node, 'widgets', {
+    get() {
+      return reactiveWidgets
+    },
+    set(v) {
+      reactiveWidgets.splice(0, reactiveWidgets.length, ...v)
+    }
+  })
+  const reactiveInputs = shallowReactive<INodeInputSlot[]>(node.inputs ?? [])
+  Object.defineProperty(node, 'inputs', {
+    get() {
+      return reactiveInputs
+    },
+    set(v) {
+      reactiveInputs.splice(0, reactiveInputs.length, ...v)
+    }
+  })
+
+  const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
+    node.inputs?.forEach((input, index) => {
+      if (!input?.widget?.name) return
+      slotMetadata.set(input.widget.name, {
+        index,
+        linked: input.link != null
+      })
+    })
+    return node.widgets?.map(safeWidgetMapper(node, slotMetadata)) ?? []
+  })
+
+  const nodeType =
+    node.type ||
+    node.constructor?.comfyClass ||
+    node.constructor?.title ||
+    node.constructor?.name ||
+    'Unknown'
+
+  const apiNode = node.constructor?.nodeData?.api_node ?? false
+  const badges = node.badges
+
+  return {
+    id: String(node.id),
+    title: typeof node.title === 'string' ? node.title : '',
+    type: nodeType,
+    mode: node.mode || 0,
+    titleMode: node.title_mode,
+    selected: node.selected || false,
+    executing: false, // Will be updated separately based on execution state
+    subgraphId,
+    apiNode,
+    badges,
+    hasErrors: !!node.has_errors,
+    widgets: safeWidgets,
+    inputs: reactiveInputs,
+    outputs: node.outputs ? [...node.outputs] : undefined,
+    flags: node.flags ? { ...node.flags } : undefined,
+    color: node.color || undefined,
+    bgcolor: node.bgcolor || undefined,
+    resizable: node.resizable,
+    shape: node.shape
+  }
 }
 
 export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
@@ -251,79 +351,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     }
   }
 
-  // Extract safe data from LiteGraph node for Vue consumption
-  function extractVueNodeData(node: LGraphNode): VueNodeData {
-    // Determine subgraph ID - null for root graph, string for subgraphs
-    const subgraphId =
-      node.graph && 'id' in node.graph && node.graph !== node.graph.rootGraph
-        ? String(node.graph.id)
-        : null
-    // Extract safe widget data
-    const slotMetadata = new Map<string, WidgetSlotMetadata>()
-
-    const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
-    Object.defineProperty(node, 'widgets', {
-      get() {
-        return reactiveWidgets
-      },
-      set(v) {
-        reactiveWidgets.splice(0, reactiveWidgets.length, ...v)
-      }
-    })
-    const reactiveInputs = shallowReactive<INodeInputSlot[]>(node.inputs ?? [])
-    Object.defineProperty(node, 'inputs', {
-      get() {
-        return reactiveInputs
-      },
-      set(v) {
-        reactiveInputs.splice(0, reactiveInputs.length, ...v)
-      }
-    })
-
-    const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
-      node.inputs?.forEach((input, index) => {
-        if (!input?.widget?.name) return
-        slotMetadata.set(input.widget.name, {
-          index,
-          linked: input.link != null
-        })
-      })
-      return node.widgets?.map(safeWidgetMapper(node, slotMetadata)) ?? []
-    })
-
-    const nodeType =
-      node.type ||
-      node.constructor?.comfyClass ||
-      node.constructor?.title ||
-      node.constructor?.name ||
-      'Unknown'
-
-    const apiNode = node.constructor?.nodeData?.api_node ?? false
-    const badges = node.badges
-
-    return {
-      id: String(node.id),
-      title: typeof node.title === 'string' ? node.title : '',
-      type: nodeType,
-      mode: node.mode || 0,
-      titleMode: node.title_mode,
-      selected: node.selected || false,
-      executing: false, // Will be updated separately based on execution state
-      subgraphId,
-      apiNode,
-      badges,
-      hasErrors: !!node.has_errors,
-      widgets: safeWidgets,
-      inputs: reactiveInputs,
-      outputs: node.outputs ? [...node.outputs] : undefined,
-      flags: node.flags ? { ...node.flags } : undefined,
-      color: node.color || undefined,
-      bgcolor: node.bgcolor || undefined,
-      resizable: node.resizable,
-      shape: node.shape
-    }
-  }
-
   // Get access to original LiteGraph node (non-reactive)
   const getNode = (id: string): LGraphNode | undefined => {
     return nodeRefs.get(id)

src/composables/queue/useJobList.test.ts

@@ -16,7 +16,7 @@ type TestTask = {
   executionTime?: number
   executionEndTimestamp?: number
   createTime?: number
-  workflow?: { id?: string }
+  workflowId?: string
 }
 
 const translations: Record<string, string> = {
@@ -161,7 +161,7 @@ const createTask = (
   executionTime: overrides.executionTime,
   executionEndTimestamp: overrides.executionEndTimestamp,
   createTime: overrides.createTime,
-  workflow: overrides.workflow
+  workflowId: overrides.workflowId
 })
 
 const mountUseJobList = () => {
@@ -305,7 +305,7 @@ describe('useJobList', () => {
     expect(vi.getTimerCount()).toBe(0)
   })
 
-  it('sorts all tasks by queue index descending', async () => {
+  it('sorts all tasks by priority descending', async () => {
     queueStoreMock.pendingTasks = [
       createTask({ promptId: 'p', queueIndex: 1, mockState: 'pending' })
     ]
@@ -360,13 +360,13 @@ describe('useJobList', () => {
         promptId: 'wf-1',
         queueIndex: 2,
         mockState: 'pending',
-        workflow: { id: 'workflow-1' }
+        workflowId: 'workflow-1'
       }),
       createTask({
         promptId: 'wf-2',
         queueIndex: 1,
         mockState: 'pending',
-        workflow: { id: 'workflow-2' }
+        workflowId: 'workflow-2'
       })
     ]
 

src/composables/queue/useJobList.ts

@@ -238,7 +238,7 @@ export function useJobList() {
       const activeId = workflowStore.activeWorkflow?.activeState?.id
       if (!activeId) return []
       entries = entries.filter(({ task }) => {
-        const wid = task.workflow?.id
+        const wid = task.workflowId
         return !!wid && wid === activeId
       })
     }

src/composables/queue/useJobMenu.test.ts

@@ -60,10 +60,12 @@ vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
 
 const interruptMock = vi.fn()
 const deleteItemMock = vi.fn()
+const fetchApiMock = vi.fn()
 vi.mock('@/scripts/api', () => ({
   api: {
     interrupt: (...args: any[]) => interruptMock(...args),
-    deleteItem: (...args: any[]) => deleteItemMock(...args)
+    deleteItem: (...args: any[]) => deleteItemMock(...args),
+    fetchApi: (...args: any[]) => fetchApiMock(...args)
   }
 }))
 
@@ -73,6 +75,7 @@ vi.mock('@/scripts/utils', () => ({
 }))
 
 const dialogServiceMock = {
+  showErrorDialog: vi.fn(),
   showExecutionErrorDialog: vi.fn(),
   prompt: vi.fn()
 }
@@ -103,6 +106,11 @@ vi.mock('@/stores/queueStore', () => ({
   useQueueStore: () => queueStoreMock
 }))
 
+const getJobWorkflowMock = vi.fn()
+vi.mock('@/services/jobOutputCache', () => ({
+  getJobWorkflow: (...args: any[]) => getJobWorkflowMock(...args)
+}))
+
 const createAnnotatedPathMock = vi.fn()
 vi.mock('@/utils/createAnnotatedPath', () => ({
   createAnnotatedPath: (...args: any[]) => createAnnotatedPathMock(...args)
@@ -170,6 +178,8 @@ describe('useJobMenu', () => {
       LoadVideo: { id: 'LoadVideo' },
       LoadAudio: { id: 'LoadAudio' }
     }
+    // Default: no workflow available via lazy loading
+    getJobWorkflowMock.mockResolvedValue(undefined)
   })
 
   const setCurrentItem = (item: JobListItem | null) => {
@@ -179,10 +189,13 @@ describe('useJobMenu', () => {
   it('opens workflow when workflow data exists', async () => {
     const { openJobWorkflow } = mountJobMenu()
     const workflow = { nodes: [] }
-    setCurrentItem(createJobItem({ id: '55', taskRef: { workflow } }))
+    // Mock lazy loading via fetchJobDetail + extractWorkflow
+    getJobWorkflowMock.mockResolvedValue(workflow)
+    setCurrentItem(createJobItem({ id: '55' }))
 
     await openJobWorkflow()
 
+    expect(getJobWorkflowMock).toHaveBeenCalledWith('55')
     expect(workflowStoreMock.createTemporary).toHaveBeenCalledWith(
       'Job 55.json',
       workflow
@@ -257,11 +270,10 @@ describe('useJobMenu', () => {
 
   it('copies error message from failed job entry', async () => {
     const { jobMenuEntries } = mountJobMenu()
-    const error = { exception_message: 'boom' }
     setCurrentItem(
       createJobItem({
         state: 'failed',
-        taskRef: { status: { messages: [['execution_error', error]] } } as any
+        taskRef: { errorMessage: 'Something went wrong' } as any
       })
     )
 
@@ -269,31 +281,75 @@ describe('useJobMenu', () => {
     const entry = findActionEntry(jobMenuEntries.value, 'copy-error')
     await entry?.onClick?.()
 
-    expect(copyToClipboardMock).toHaveBeenCalledWith('boom')
+    expect(copyToClipboardMock).toHaveBeenCalledWith('Something went wrong')
   })
 
-  it('reports error via dialog when entry triggered', async () => {
+  it('reports error via rich dialog when execution_error available', async () => {
+    const executionError = {
+      prompt_id: 'job-1',
+      timestamp: 12345,
+      node_id: '5',
+      node_type: 'KSampler',
+      executed: ['1', '2'],
+      exception_message: 'CUDA out of memory',
+      exception_type: 'RuntimeError',
+      traceback: ['line 1', 'line 2'],
+      current_inputs: {},
+      current_outputs: {}
+    }
     const { jobMenuEntries } = mountJobMenu()
-    const error = { exception_message: 'bad', extra: 1 }
     setCurrentItem(
       createJobItem({
         state: 'failed',
-        taskRef: { status: { messages: [['execution_error', error]] } } as any
+        taskRef: {
+          errorMessage: 'CUDA out of memory',
+          executionError,
+          createTime: 12345
+        } as any
       })
     )
 
     await nextTick()
     const entry = findActionEntry(jobMenuEntries.value, 'report-error')
-    void entry?.onClick?.()
+    await entry?.onClick?.()
 
+    expect(dialogServiceMock.showExecutionErrorDialog).toHaveBeenCalledTimes(1)
     expect(dialogServiceMock.showExecutionErrorDialog).toHaveBeenCalledWith(
-      error
+      executionError
     )
+    expect(dialogServiceMock.showErrorDialog).not.toHaveBeenCalled()
+  })
+
+  it('falls back to simple error dialog when no execution_error', async () => {
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
+      createJobItem({
+        state: 'failed',
+        taskRef: { errorMessage: 'Job failed with error' } as any
+      })
+    )
+
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'report-error')
+    await entry?.onClick?.()
+
+    expect(dialogServiceMock.showExecutionErrorDialog).not.toHaveBeenCalled()
+    expect(dialogServiceMock.showErrorDialog).toHaveBeenCalledTimes(1)
+    const [errorArg, optionsArg] =
+      dialogServiceMock.showErrorDialog.mock.calls[0]
+    expect(errorArg).toBeInstanceOf(Error)
+    expect(errorArg.message).toBe('Job failed with error')
+    expect(optionsArg).toEqual({ reportType: 'queueJobError' })
   })
 
   it('ignores error actions when message missing', async () => {
     const { jobMenuEntries } = mountJobMenu()
-    setCurrentItem(createJobItem({ state: 'failed', taskRef: { status: {} } }))
+    setCurrentItem(
+      createJobItem({
+        state: 'failed',
+        taskRef: { errorMessage: undefined } as any
+      })
+    )
 
     await nextTick()
     const copyEntry = findActionEntry(jobMenuEntries.value, 'copy-error')
@@ -302,6 +358,7 @@ describe('useJobMenu', () => {
     await reportEntry?.onClick?.()
 
     expect(copyToClipboardMock).not.toHaveBeenCalled()
+    expect(dialogServiceMock.showErrorDialog).not.toHaveBeenCalled()
     expect(dialogServiceMock.showExecutionErrorDialog).not.toHaveBeenCalled()
   })
 
@@ -477,12 +534,13 @@ describe('useJobMenu', () => {
   })
 
   it('exports workflow with default filename when prompting disabled', async () => {
+    const workflow = { foo: 'bar' }
+    getJobWorkflowMock.mockResolvedValue(workflow)
     const { jobMenuEntries } = mountJobMenu()
     setCurrentItem(
       createJobItem({
         id: '7',
-        state: 'completed',
-        taskRef: { workflow: { foo: 'bar' } }
+        state: 'completed'
       })
     )
 
@@ -502,11 +560,11 @@ describe('useJobMenu', () => {
   it('prompts for filename when setting enabled', async () => {
     settingStoreMock.get.mockReturnValue(true)
     dialogServiceMock.prompt.mockResolvedValue('custom-name')
+    getJobWorkflowMock.mockResolvedValue({})
     const { jobMenuEntries } = mountJobMenu()
     setCurrentItem(
       createJobItem({
-        state: 'completed',
-        taskRef: { workflow: {} }
+        state: 'completed'
       })
     )
 
@@ -526,12 +584,12 @@ describe('useJobMenu', () => {
   it('keeps existing json extension when exporting workflow', async () => {
     settingStoreMock.get.mockReturnValue(true)
     dialogServiceMock.prompt.mockResolvedValue('existing.json')
+    getJobWorkflowMock.mockResolvedValue({ foo: 'bar' })
     const { jobMenuEntries } = mountJobMenu()
     setCurrentItem(
       createJobItem({
         id: '42',
-        state: 'completed',
-        taskRef: { workflow: { foo: 'bar' } }
+        state: 'completed'
       })
     )
 
@@ -547,11 +605,11 @@ describe('useJobMenu', () => {
   it('abandons export when prompt cancelled', async () => {
     settingStoreMock.get.mockReturnValue(true)
     dialogServiceMock.prompt.mockResolvedValue('')
+    getJobWorkflowMock.mockResolvedValue({})
     const { jobMenuEntries } = mountJobMenu()
     setCurrentItem(
       createJobItem({
-        state: 'completed',
-        taskRef: { workflow: {} }
+        state: 'completed'
       })
     )
 
@@ -671,7 +729,12 @@ describe('useJobMenu', () => {
 
   it('returns failed menu entries with error actions', async () => {
     const { jobMenuEntries } = mountJobMenu()
-    setCurrentItem(createJobItem({ state: 'failed', taskRef: { status: {} } }))
+    setCurrentItem(
+      createJobItem({
+        state: 'failed',
+        taskRef: { errorMessage: 'Some error' } as any
+      })
+    )
 
     await nextTick()
     expect(jobMenuEntries.value.map((entry) => entry.key)).toEqual([

src/composables/queue/useJobMenu.ts

@@ -9,14 +9,11 @@ import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAsse
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import type {
-  ExecutionErrorWsMessage,
-  ResultItem,
-  ResultItemType
-} from '@/schemas/apiSchema'
+import type { ResultItem, ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { downloadBlob } from '@/scripts/utils'
 import { useDialogService } from '@/services/dialogService'
+import { getJobWorkflow } from '@/services/jobOutputCache'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useQueueStore } from '@/stores/queueStore'
@@ -58,7 +55,7 @@ export function useJobMenu(
   const openJobWorkflow = async (item?: JobListItem | null) => {
     const target = resolveItem(item)
     if (!target) return
-    const data = target.taskRef?.workflow
+    const data = await getJobWorkflow(target.id)
     if (!data) return
     const filename = `Job ${target.id}.json`
     const temp = workflowStore.createTemporary(filename, data)
@@ -84,31 +81,37 @@ export function useJobMenu(
 
   const copyErrorMessage = async (item?: JobListItem | null) => {
     const target = resolveItem(item)
-    if (!target) return
-    const msgs = target.taskRef?.status?.messages as any[] | undefined
-    const err = msgs?.find((m: any) => m?.[0] === 'execution_error')?.[1] as
-      | ExecutionErrorWsMessage
-      | undefined
-    const message = err?.exception_message
-    if (message) await copyToClipboard(String(message))
+    const message = target?.taskRef?.errorMessage
+    if (message) await copyToClipboard(message)
   }
 
   const reportError = (item?: JobListItem | null) => {
     const target = resolveItem(item)
     if (!target) return
-    const msgs = target.taskRef?.status?.messages as any[] | undefined
-    const err = msgs?.find((m: any) => m?.[0] === 'execution_error')?.[1] as
-      | ExecutionErrorWsMessage
-      | undefined
-    if (err) useDialogService().showExecutionErrorDialog(err)
+
+    // Use execution_error from list response if available
+    const executionError = target.taskRef?.executionError
+
+    if (executionError) {
+      useDialogService().showExecutionErrorDialog(executionError)
+      return
+    }
+
+    // Fall back to simple error dialog
+    const message = target.taskRef?.errorMessage
+    if (message) {
+      useDialogService().showErrorDialog(new Error(message), {
+        reportType: 'queueJobError'
+      })
+    }
   }
 
   // This is very magical only because it matches the respective backend implementation
   // There is or will be a better way to do this
-  const addOutputLoaderNode = async (item?: JobListItem | null) => {
-    const target = resolveItem(item)
-    if (!target) return
-    const result: ResultItemImpl | undefined = target.taskRef?.previewOutput
+  const addOutputLoaderNode = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
     if (!result) return
 
     let nodeType: 'LoadImage' | 'LoadVideo' | 'LoadAudio' | null = null
@@ -156,10 +159,10 @@ export function useJobMenu(
   /**
    * Trigger a download of the job's previewable output asset.
    */
-  const downloadPreviewAsset = (item?: JobListItem | null) => {
-    const target = resolveItem(item)
-    if (!target) return
-    const result: ResultItemImpl | undefined = target.taskRef?.previewOutput
+  const downloadPreviewAsset = () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
     if (!result) return
     downloadFile(result.url)
   }
@@ -167,14 +170,14 @@ export function useJobMenu(
   /**
    * Export the workflow JSON attached to the job.
    */
-  const exportJobWorkflow = async (item?: JobListItem | null) => {
-    const target = resolveItem(item)
-    if (!target) return
-    const data = target.taskRef?.workflow
+  const exportJobWorkflow = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const data = await getJobWorkflow(item.id)
     if (!data) return
 
     const settingStore = useSettingStore()
-    let filename = `Job ${target.id}.json`
+    let filename = `Job ${item.id}.json`
 
     if (settingStore.get('Comfy.PromptFilename')) {
       const input = await useDialogService().prompt({
@@ -191,10 +194,10 @@ export function useJobMenu(
     downloadBlob(filename, blob)
   }
 
-  const deleteJobAsset = async (item?: JobListItem | null) => {
-    const target = resolveItem(item)
-    if (!target) return
-    const task = target.taskRef as TaskItemImpl | undefined
+  const deleteJobAsset = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const task = item.taskRef as TaskItemImpl | undefined
     const preview = task?.previewOutput
     if (!task || !preview) return
 
@@ -205,8 +208,8 @@ export function useJobMenu(
     }
   }
 
-  const removeFailedJob = async (item?: JobListItem | null) => {
-    const task = resolveItem(item)?.taskRef as TaskItemImpl | undefined
+  const removeFailedJob = async () => {
+    const task = currentMenuItem()?.taskRef as TaskItemImpl | undefined
     if (!task) return
     await queueStore.delete(task)
   }
@@ -237,8 +240,8 @@ export function useJobMenu(
           icon: 'icon-[lucide--zoom-in]',
           onClick: onInspectAsset
             ? () => {
-                const current = resolveItem()
-                if (current) onInspectAsset(current)
+                const item = currentMenuItem()
+                if (item) onInspectAsset(item)
               }
             : undefined
         },
@@ -249,33 +252,33 @@ export function useJobMenu(
             'Add to current workflow'
           ),
           icon: 'icon-[comfy--node]',
-          onClick: () => addOutputLoaderNode(resolveItem())
+          onClick: addOutputLoaderNode
         },
         {
           key: 'download',
           label: st('queue.jobMenu.download', 'Download'),
           icon: 'icon-[lucide--download]',
-          onClick: () => downloadPreviewAsset(resolveItem())
+          onClick: downloadPreviewAsset
         },
         { kind: 'divider', key: 'd1' },
         {
           key: 'open-workflow',
           label: jobMenuOpenWorkflowLabel.value,
           icon: 'icon-[comfy--workflow]',
-          onClick: () => openJobWorkflow(resolveItem())
+          onClick: openJobWorkflow
         },
         {
           key: 'export-workflow',
           label: st('queue.jobMenu.exportWorkflow', 'Export workflow'),
           icon: 'icon-[comfy--file-output]',
-          onClick: () => exportJobWorkflow(resolveItem())
+          onClick: exportJobWorkflow
         },
         { kind: 'divider', key: 'd2' },
         {
           key: 'copy-id',
           label: jobMenuCopyJobIdLabel.value,
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyJobId(resolveItem())
+          onClick: copyJobId
         },
         { kind: 'divider', key: 'd3' },
         ...(hasDeletableAsset
@@ -284,7 +287,7 @@ export function useJobMenu(
                 key: 'delete',
                 label: st('queue.jobMenu.deleteAsset', 'Delete asset'),
                 icon: 'icon-[lucide--trash-2]',
-                onClick: () => deleteJobAsset(resolveItem())
+                onClick: deleteJobAsset
               }
             ]
           : [])
@@ -296,33 +299,33 @@ export function useJobMenu(
           key: 'open-workflow',
           label: jobMenuOpenWorkflowFailedLabel.value,
           icon: 'icon-[comfy--workflow]',
-          onClick: () => openJobWorkflow(resolveItem())
+          onClick: openJobWorkflow
         },
         { kind: 'divider', key: 'd1' },
         {
           key: 'copy-id',
           label: jobMenuCopyJobIdLabel.value,
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyJobId(resolveItem())
+          onClick: copyJobId
         },
         {
           key: 'copy-error',
           label: st('queue.jobMenu.copyErrorMessage', 'Copy error message'),
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyErrorMessage(resolveItem())
+          onClick: copyErrorMessage
         },
         {
           key: 'report-error',
           label: st('queue.jobMenu.reportError', 'Report error'),
           icon: 'icon-[lucide--message-circle-warning]',
-          onClick: () => reportError(resolveItem())
+          onClick: reportError
         },
         { kind: 'divider', key: 'd2' },
         {
           key: 'delete',
           label: st('queue.jobMenu.removeJob', 'Remove job'),
           icon: 'icon-[lucide--circle-minus]',
-          onClick: () => removeFailedJob(resolveItem())
+          onClick: removeFailedJob
         }
       ]
     }
@@ -331,21 +334,21 @@ export function useJobMenu(
         key: 'open-workflow',
         label: jobMenuOpenWorkflowLabel.value,
         icon: 'icon-[comfy--workflow]',
-        onClick: () => openJobWorkflow(resolveItem())
+        onClick: openJobWorkflow
       },
       { kind: 'divider', key: 'd1' },
       {
         key: 'copy-id',
         label: jobMenuCopyJobIdLabel.value,
         icon: 'icon-[lucide--copy]',
-        onClick: () => copyJobId(resolveItem())
+        onClick: copyJobId
       },
       { kind: 'divider', key: 'd2' },
       {
         key: 'cancel-job',
         label: jobMenuCancelLabel.value,
         icon: 'icon-[lucide--x]',
-        onClick: () => cancelJob(resolveItem())
+        onClick: cancelJob
       }
     ]
   })

src/composables/queue/useResultGallery.test.ts

@@ -1,35 +1,74 @@
-import { describe, it, expect } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
 
 import { useResultGallery } from '@/composables/queue/useResultGallery'
-import type { JobListItem } from '@/composables/queue/useJobList'
+import type { JobListItem as JobListViewItem } from '@/composables/queue/useJobList'
+import type { JobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
-type PreviewLike = { url: string; supportsPreview: boolean }
+const createResultItem = (
+  url: string,
+  supportsPreview = true
+): ResultItemImpl => {
+  const item = new ResultItemImpl({
+    filename: url,
+    subfolder: '',
+    type: 'output',
+    nodeId: 'node-1',
+    mediaType: supportsPreview ? 'images' : 'unknown'
+  })
+  // Override url getter for test matching
+  Object.defineProperty(item, 'url', { get: () => url })
+  Object.defineProperty(item, 'supportsPreview', { get: () => supportsPreview })
+  return item
+}
 
-const createPreview = (url: string, supportsPreview = true): PreviewLike => ({
-  url,
-  supportsPreview
+const createMockJob = (id: string, outputsCount = 1): JobListItem => ({
+  id,
+  status: 'completed',
+  create_time: Date.now(),
+  preview_output: null,
+  outputs_count: outputsCount,
+  priority: 0
 })
 
-const createTask = (preview?: PreviewLike) => ({
-  previewOutput: preview
-})
+const createTask = (
+  preview?: ResultItemImpl,
+  allOutputs?: ResultItemImpl[],
+  outputsCount = 1
+): TaskItemImpl => {
+  const job = createMockJob(
+    `task-${Math.random().toString(36).slice(2)}`,
+    outputsCount
+  )
+  const flatOutputs = allOutputs ?? (preview ? [preview] : [])
+  return new TaskItemImpl(job, {}, flatOutputs)
+}
 
-const createJobItem = (id: string, preview?: PreviewLike): JobListItem =>
+const createJobViewItem = (
+  id: string,
+  taskRef?: TaskItemImpl
+): JobListViewItem =>
   ({
     id,
     title: `Job ${id}`,
     meta: '',
     state: 'completed',
     showClear: false,
-    taskRef: preview ? { previewOutput: preview } : undefined
-  }) as JobListItem
+    taskRef
+  }) as JobListViewItem
 
 describe('useResultGallery', () => {
-  it('collects only previewable outputs and preserves their order', () => {
-    const previewable = [createPreview('p-1'), createPreview('p-2')]
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('collects only previewable outputs and preserves their order', async () => {
+    const previewable = [createResultItem('p-1'), createResultItem('p-2')]
+    const nonPreviewable = createResultItem('skip-me', false)
     const tasks = [
       createTask(previewable[0]),
-      createTask({ url: 'skip-me', supportsPreview: false }),
+      createTask(nonPreviewable),
       createTask(previewable[1]),
       createTask()
     ]
@@ -38,28 +77,28 @@ describe('useResultGallery', () => {
       () => tasks
     )
 
-    onViewItem(createJobItem('job-1', previewable[0]))
+    await onViewItem(createJobViewItem('job-1', tasks[0]))
 
-    expect(galleryItems.value).toEqual(previewable)
+    expect(galleryItems.value).toEqual([previewable[0]])
     expect(galleryActiveIndex.value).toBe(0)
   })
 
-  it('does not change state when there are no previewable tasks', () => {
+  it('does not change state when there are no previewable tasks', async () => {
     const { galleryItems, galleryActiveIndex, onViewItem } = useResultGallery(
       () => []
     )
 
-    onViewItem(createJobItem('job-missing'))
+    await onViewItem(createJobViewItem('job-missing'))
 
     expect(galleryItems.value).toEqual([])
     expect(galleryActiveIndex.value).toBe(-1)
   })
 
-  it('activates the index that matches the viewed preview URL', () => {
+  it('activates the index that matches the viewed preview URL', async () => {
     const previewable = [
-      createPreview('p-1'),
-      createPreview('p-2'),
-      createPreview('p-3')
+      createResultItem('p-1'),
+      createResultItem('p-2'),
+      createResultItem('p-3')
     ]
     const tasks = previewable.map((preview) => createTask(preview))
 
@@ -67,37 +106,66 @@ describe('useResultGallery', () => {
       () => tasks
     )
 
-    onViewItem(createJobItem('job-2', createPreview('p-2')))
+    await onViewItem(createJobViewItem('job-2', tasks[1]))
 
-    expect(galleryItems.value).toEqual(previewable)
-    expect(galleryActiveIndex.value).toBe(1)
+    expect(galleryItems.value).toEqual([previewable[1]])
+    expect(galleryActiveIndex.value).toBe(0)
   })
 
-  it('defaults to the first entry when the clicked job lacks a preview', () => {
-    const previewable = [createPreview('p-1'), createPreview('p-2')]
+  it('defaults to the first entry when the clicked job lacks a preview', async () => {
+    const previewable = [createResultItem('p-1'), createResultItem('p-2')]
     const tasks = previewable.map((preview) => createTask(preview))
 
     const { galleryItems, galleryActiveIndex, onViewItem } = useResultGallery(
       () => tasks
     )
 
-    onViewItem(createJobItem('job-no-preview'))
+    await onViewItem(createJobViewItem('job-no-preview'))
 
     expect(galleryItems.value).toEqual(previewable)
     expect(galleryActiveIndex.value).toBe(0)
   })
 
-  it('defaults to the first entry when no gallery item matches the preview URL', () => {
-    const previewable = [createPreview('p-1'), createPreview('p-2')]
+  it('defaults to the first entry when no gallery item matches the preview URL', async () => {
+    const previewable = [createResultItem('p-1'), createResultItem('p-2')]
     const tasks = previewable.map((preview) => createTask(preview))
 
     const { galleryItems, galleryActiveIndex, onViewItem } = useResultGallery(
       () => tasks
     )
 
-    onViewItem(createJobItem('job-mismatch', createPreview('missing')))
+    const taskWithMismatchedPreview = createTask(createResultItem('missing'))
+    await onViewItem(
+      createJobViewItem('job-mismatch', taskWithMismatchedPreview)
+    )
 
-    expect(galleryItems.value).toEqual(previewable)
+    expect(galleryItems.value).toEqual([createResultItem('missing')])
+    expect(galleryActiveIndex.value).toBe(0)
+  })
+
+  it('loads full outputs when task has only preview outputs', async () => {
+    const previewOutput = createResultItem('preview-1')
+    const fullOutputs = [
+      createResultItem('full-1'),
+      createResultItem('full-2'),
+      createResultItem('full-3')
+    ]
+
+    // Create a task with outputsCount > 1 to trigger lazy loading
+    const job = createMockJob('task-1', 3)
+    const task = new TaskItemImpl(job, {}, [previewOutput])
+
+    // Mock loadFullOutputs to return full outputs
+    const loadedTask = new TaskItemImpl(job, {}, fullOutputs)
+    task.loadFullOutputs = async () => loadedTask
+
+    const { galleryItems, galleryActiveIndex, onViewItem } = useResultGallery(
+      () => [task]
+    )
+
+    await onViewItem(createJobViewItem('job-1', task))
+
+    expect(galleryItems.value).toEqual(fullOutputs)
     expect(galleryActiveIndex.value).toBe(0)
   })
 })

src/composables/queue/useResultGallery.ts

@@ -1,27 +1,42 @@
 import { ref, shallowRef } from 'vue'
 
 import type { JobListItem } from '@/composables/queue/useJobList'
-import type { ResultItemImpl } from '@/stores/queueStore'
+import { findActiveIndex, getOutputsForTask } from '@/services/jobOutputCache'
+import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
 /**
  * Manages result gallery state and activation for queue items.
  */
-export function useResultGallery(getFilteredTasks: () => any[]) {
+export function useResultGallery(getFilteredTasks: () => TaskItemImpl[]) {
   const galleryActiveIndex = ref(-1)
   const galleryItems = shallowRef<ResultItemImpl[]>([])
 
-  const onViewItem = (item: JobListItem) => {
-    const items: ResultItemImpl[] = getFilteredTasks().flatMap((t: any) => {
-      const preview = t.previewOutput
-      return preview && preview.supportsPreview ? [preview] : []
-    })
+  async function onViewItem(item: JobListItem) {
+    const tasks = getFilteredTasks()
+    if (!tasks.length) return
+
+    const targetTask = item.taskRef
+    const targetOutputs = targetTask
+      ? await getOutputsForTask(targetTask)
+      : null
+
+    // Request was superseded by a newer one
+    if (targetOutputs === null && targetTask) return
+
+    // Use target's outputs if available, otherwise fall back to all previews
+    const items = targetOutputs?.length
+      ? targetOutputs
+      : tasks
+          .map((t) => t.previewOutput)
+          .filter((o): o is ResultItemImpl => !!o)
 
     if (!items.length) return
 
     galleryItems.value = items
-    const activeUrl: string | undefined = item.taskRef?.previewOutput?.url
-    const idx = activeUrl ? items.findIndex((o) => o.url === activeUrl) : 0
-    galleryActiveIndex.value = idx >= 0 ? idx : 0
+    galleryActiveIndex.value = findActiveIndex(
+      items,
+      item.taskRef?.previewOutput?.url
+    )
   }
 
   return {

src/composables/useCoreCommands.ts

@@ -188,6 +188,26 @@ export function useCoreCommands(): ComfyCommand[] {
         await workflowService.saveWorkflowAs(workflow)
       }
     },
+    {
+      id: 'Comfy.RenameWorkflow',
+      icon: 'pi pi-pencil',
+      label: 'Rename Workflow',
+      menubarLabel: 'Rename',
+      function: async () => {
+        const workflow = workflowStore.activeWorkflow
+        if (!workflow || !workflow.isPersisted) return
+
+        const newName = await dialogService.prompt({
+          title: t('g.rename'),
+          message: t('workflowService.enterFilename') + ':',
+          defaultValue: workflow.filename
+        })
+        if (!newName || newName === workflow.filename) return
+
+        const newPath = workflow.directory + '/' + newName + '.json'
+        await workflowService.renameWorkflow(workflow, newPath)
+      }
+    },
     {
       id: 'Comfy.ExportWorkflow',
       icon: 'pi pi-download',
@@ -1215,7 +1235,12 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.ToggleLinear',
       icon: 'pi pi-database',
       label: 'toggle linear mode',
-      function: () => (canvasStore.linearMode = !canvasStore.linearMode)
+      function: () => {
+        const newMode = !canvasStore.linearMode
+        app.rootGraph.extra.linearMode = newMode
+        workflowStore.activeWorkflow?.changeTracker?.checkState()
+        canvasStore.linearMode = newMode
+      }
     }
   ]
 

src/composables/useFeatureFlags.ts

@@ -16,6 +16,7 @@ export enum ServerFeatureFlag {
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
   HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled',
+  LINEAR_TOGGLE_ENABLED = 'linear_toggle_enabled',
   ASYNC_MODEL_UPLOAD_ENABLED = 'async_model_upload_enabled'
 }
 
@@ -77,6 +78,12 @@ export function useFeatureFlags() {
         )
       )
     },
+    get linearToggleEnabled() {
+      return (
+        remoteConfig.value.linear_toggle_enabled ??
+        api.getServerFeature(ServerFeatureFlag.LINEAR_TOGGLE_ENABLED, false)
+      )
+    },
     get asyncModelUploadEnabled() {
       return (
         remoteConfig.value.async_model_upload_enabled ??