Merge branch 'main' into refactor/error-system-cleanup

apps/desktop-ui/src/stores/maintenanceTaskStore.ts

@@ -15,7 +15,7 @@ type ValidationState = InstallValidation['basePath']
 type IndexedUpdate = InstallValidation & Record<string, ValidationState>
 
 /** State of a maintenance task, managed by the maintenance task store. */
-export class MaintenanceTaskRunner {
+class MaintenanceTaskRunner {
   constructor(readonly task: MaintenanceTask) {}
 
   private _state?: MaintenanceTaskState

browser_tests/assets/links/duplicate_links_slot_drift.json

@@ -0,0 +1,169 @@
+{
+  "id": "f1a2b3c4-d5e6-7890-abcd-ef1234567890",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "b2c3d4e5-f6a7-8901-bcde-f12345678901",
+      "pos": [400, 300],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "b2c3d4e5-f6a7-8901-bcde-f12345678901",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 120,
+          "lastLinkId": 276,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Slot Drift Duplicate Links",
+        "inputNode": {
+          "id": -10,
+          "bounding": [0, 300, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [900, 300, 120, 60]
+        },
+        "inputs": [],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 120,
+            "type": "ComfySwitchNode",
+            "title": "Switch (CFG)",
+            "pos": [100, 100],
+            "size": [200, 80],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [{ "name": "value", "type": "FLOAT", "link": null }],
+            "outputs": [
+              {
+                "name": "FLOAT",
+                "type": "FLOAT",
+                "links": [257, 271, 276]
+              }
+            ],
+            "properties": { "Node name for S&R": "ComfySwitchNode" },
+            "widgets_values": []
+          },
+          {
+            "id": 85,
+            "type": "KSamplerAdvanced",
+            "pos": [400, 50],
+            "size": [270, 262],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              { "name": "model", "type": "MODEL", "link": null },
+              { "name": "positive", "type": "CONDITIONING", "link": null },
+              { "name": "negative", "type": "CONDITIONING", "link": null },
+              { "name": "latent_image", "type": "LATENT", "link": null },
+              { "name": "steps", "type": "INT", "link": null },
+              { "name": "cfg", "type": "FLOAT", "link": 276 }
+            ],
+            "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
+            "properties": { "Node name for S&R": "KSamplerAdvanced" },
+            "widgets_values": [
+              false,
+              0,
+              "randomize",
+              20,
+              8,
+              "euler",
+              "normal",
+              0,
+              10000,
+              false
+            ]
+          },
+          {
+            "id": 86,
+            "type": "KSamplerAdvanced",
+            "pos": [400, 350],
+            "size": [270, 262],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              { "name": "model", "type": "MODEL", "link": null },
+              { "name": "positive", "type": "CONDITIONING", "link": null },
+              { "name": "negative", "type": "CONDITIONING", "link": null },
+              { "name": "latent_image", "type": "LATENT", "link": null },
+              { "name": "steps", "type": "INT", "link": null },
+              { "name": "cfg", "type": "FLOAT", "link": 271 }
+            ],
+            "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
+            "properties": { "Node name for S&R": "KSamplerAdvanced" },
+            "widgets_values": [
+              false,
+              0,
+              "randomize",
+              20,
+              8,
+              "euler",
+              "normal",
+              0,
+              10000,
+              false
+            ]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 257,
+            "origin_id": 120,
+            "origin_slot": 0,
+            "target_id": 85,
+            "target_slot": 5,
+            "type": "FLOAT"
+          },
+          {
+            "id": 271,
+            "origin_id": 120,
+            "origin_slot": 0,
+            "target_id": 86,
+            "target_slot": 5,
+            "type": "FLOAT"
+          },
+          {
+            "id": 276,
+            "origin_id": 120,
+            "origin_slot": 0,
+            "target_id": 85,
+            "target_slot": 5,
+            "type": "FLOAT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": { "scale": 1, "offset": [0, 0] },
+    "frontendVersion": "1.43.2"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -68,6 +68,41 @@ export class AppModeHelper {
     await this.comfyPage.nextFrame()
   }
 
+  /**
+   * Inject linearData into the current graph and enter app mode.
+   *
+   * Serializes the graph, injects linearData with the given inputs and
+   * auto-detected output node IDs, then reloads so the appModeStore
+   * picks up the data via its activeWorkflow watcher.
+   *
+   * @param inputs - Widget selections as [nodeId, widgetName] tuples
+   */
+  async enterAppModeWithInputs(inputs: [string, string][]) {
+    await this.page.evaluate(async (inputTuples) => {
+      const graph = window.app!.graph
+      if (!graph) return
+
+      const outputNodeIds = graph.nodes
+        .filter(
+          (n: { type?: string }) =>
+            n.type === 'SaveImage' || n.type === 'PreviewImage'
+        )
+        .map((n: { id: number | string }) => String(n.id))
+
+      const workflow = graph.serialize() as unknown as Record<string, unknown>
+      const extra = (workflow.extra ?? {}) as Record<string, unknown>
+      extra.linearData = { inputs: inputTuples, outputs: outputNodeIds }
+      workflow.extra = extra
+      await window.app!.loadGraphData(
+        workflow as unknown as Parameters<
+          NonNullable<typeof window.app>['loadGraphData']
+        >[0]
+      )
+    }, inputs)
+    await this.comfyPage.nextFrame()
+    await this.toggleAppMode()
+  }
+
   /** The linear-mode widget list container (visible in app mode). */
   get linearWidgets(): Locator {
     return this.page.locator('[data-testid="linear-widgets"]')
@@ -125,4 +160,42 @@ export class AppModeHelper {
     await dialogInput.waitFor({ state: 'hidden' })
     await this.comfyPage.nextFrame()
   }
+
+  /**
+   * Rename a builder IoItem via the popover menu "Rename" action.
+   * @param title The current widget title shown in the IoItem.
+   * @param newName The new name to assign.
+   */
+  async renameBuilderInputViaMenu(title: string, newName: string) {
+    const menu = this.getBuilderInputItemMenu(title)
+    await menu.click()
+    await this.page.getByText('Rename', { exact: true }).click()
+
+    const input = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByRole('textbox')
+    await input.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Rename a builder IoItem by double-clicking its title to trigger
+   * inline editing.
+   * @param title The current widget title shown in the IoItem.
+   * @param newName The new name to assign.
+   */
+  async renameBuilderInput(title: string, newName: string) {
+    const titleEl = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .filter({ hasText: title })
+    await titleEl.dblclick()
+
+    const input = this.page
+      .getByTestId(TestIds.builder.ioItemTitle)
+      .getByRole('textbox')
+    await input.fill(newName)
+    await this.page.keyboard.press('Enter')
+    await this.comfyPage.nextFrame()
+  }
 }

browser_tests/fixtures/selectors.ts

@@ -38,6 +38,9 @@ export const TestIds = {
     missingNodePacksGroup: 'error-group-missing-node',
     missingModelsGroup: 'error-group-missing-model'
   },
+  keybindings: {
+    presetMenu: 'keybinding-preset-menu'
+  },
   topbar: {
     queueButton: 'queue-button',
     queueModeMenuTrigger: 'queue-mode-menu-trigger',
@@ -66,6 +69,7 @@ export const TestIds = {
   },
   builder: {
     ioItem: 'builder-io-item',
+    ioItemTitle: 'builder-io-item-title',
     widgetActionsMenu: 'widget-actions-menu'
   },
   breadcrumb: {
@@ -92,6 +96,7 @@ export type TestIdValue =
   | (typeof TestIds.tree)[keyof typeof TestIds.tree]
   | (typeof TestIds.canvas)[keyof typeof TestIds.canvas]
   | (typeof TestIds.dialogs)[keyof typeof TestIds.dialogs]
+  | (typeof TestIds.keybindings)[keyof typeof TestIds.keybindings]
   | (typeof TestIds.topbar)[keyof typeof TestIds.topbar]
   | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -281,6 +281,14 @@ export class NodeReference {
   getType(): Promise<string> {
     return this.getProperty('type')
   }
+  async centerOnNode(): Promise<void> {
+    await this.comfyPage.page.evaluate((id) => {
+      const node = window.app!.canvas.graph!.getNodeById(id)
+      if (!node) throw new Error(`Node ${id} not found`)
+      window.app!.canvas.centerOnNode(node)
+    }, this.id)
+    await this.comfyPage.nextFrame()
+  }
   async getPosition(): Promise<Position> {
     const pos = await this.comfyPage.canvasOps.convertOffsetToCanvas(
       await this.getProperty<[number, number]>('pos')

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -0,0 +1,168 @@
+import type { Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+/**
+ * Default workflow widget inputs as [nodeId, widgetName] tuples.
+ * All widgets from the default graph are selected so the panel scrolls,
+ * pushing the last widget's dropdown to the clipping boundary.
+ */
+const DEFAULT_INPUTS: [string, string][] = [
+  ['4', 'ckpt_name'],
+  ['6', 'text'],
+  ['7', 'text'],
+  ['5', 'width'],
+  ['5', 'height'],
+  ['5', 'batch_size'],
+  ['3', 'seed'],
+  ['3', 'steps'],
+  ['3', 'cfg'],
+  ['3', 'sampler_name'],
+  ['3', 'scheduler'],
+  ['3', 'denoise'],
+  ['9', 'filename_prefix']
+]
+
+function isClippedByAnyAncestor(el: Element): boolean {
+  const child = el.getBoundingClientRect()
+  let parent = el.parentElement
+
+  while (parent) {
+    const overflow = getComputedStyle(parent).overflow
+    if (overflow !== 'visible') {
+      const p = parent.getBoundingClientRect()
+      if (
+        child.top < p.top ||
+        child.bottom > p.bottom ||
+        child.left < p.left ||
+        child.right > p.right
+      ) {
+        return true
+      }
+    }
+    parent = parent.parentElement
+  }
+  return false
+}
+
+/** Add a node to the graph by type and return its ID. */
+async function addNode(page: Page, nodeType: string): Promise<string> {
+  return page.evaluate((type) => {
+    const node = window.app!.graph.add(
+      window.LiteGraph!.createNode(type, undefined, {})
+    )
+    return String(node!.id)
+  }, nodeType)
+}
+
+test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        linear_toggle_enabled: true
+      }
+    })
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('Select dropdown is not clipped in app mode panel', async ({
+    comfyPage
+  }) => {
+    const saveVideoId = await addNode(comfyPage.page, 'SaveVideo')
+    await comfyPage.nextFrame()
+
+    const inputs: [string, string][] = [
+      ...DEFAULT_INPUTS,
+      [saveVideoId, 'codec']
+    ]
+    await comfyPage.appMode.enterAppModeWithInputs(inputs)
+
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
+      timeout: 5000
+    })
+
+    // Scroll to bottom so the codec widget is at the clipping edge
+    const widgetList = comfyPage.appMode.linearWidgets
+    await widgetList.evaluate((el) =>
+      el.scrollTo({ top: el.scrollHeight, behavior: 'instant' })
+    )
+
+    // Click the codec select (combobox role with aria-label from WidgetSelectDefault)
+    const codecSelect = widgetList.getByRole('combobox', { name: 'codec' })
+    await codecSelect.click()
+
+    const overlay = comfyPage.page.locator('.p-select-overlay').first()
+    await expect(overlay).toBeVisible({ timeout: 5000 })
+
+    const isInViewport = await overlay.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
+      )
+    })
+    expect(isInViewport).toBe(true)
+
+    const isClipped = await overlay.evaluate(isClippedByAnyAncestor)
+    expect(isClipped).toBe(false)
+  })
+
+  test('FormDropdown popup is not clipped in app mode panel', async ({
+    comfyPage
+  }) => {
+    const loadImageId = await addNode(comfyPage.page, 'LoadImage')
+    await comfyPage.nextFrame()
+
+    const inputs: [string, string][] = [
+      ...DEFAULT_INPUTS,
+      [loadImageId, 'image']
+    ]
+    await comfyPage.appMode.enterAppModeWithInputs(inputs)
+
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
+      timeout: 5000
+    })
+
+    // Scroll to bottom so the image widget is at the clipping edge
+    const widgetList = comfyPage.appMode.linearWidgets
+    await widgetList.evaluate((el) =>
+      el.scrollTo({ top: el.scrollHeight, behavior: 'instant' })
+    )
+
+    // Click the FormDropdown trigger button for the image widget.
+    // The button emits 'select-click' which toggles the Popover.
+    const imageRow = widgetList.locator(
+      'div:has(> div > span:text-is("image"))'
+    )
+    const dropdownButton = imageRow.locator('button:has(> span)').first()
+    await dropdownButton.click()
+
+    // The unstyled PrimeVue Popover renders with role="dialog".
+    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
+    const popover = comfyPage.page
+      .getByRole('dialog')
+      .filter({ has: comfyPage.page.getByRole('button', { name: 'All' }) })
+      .first()
+    await expect(popover).toBeVisible({ timeout: 5000 })
+
+    const isInViewport = await popover.evaluate((el) => {
+      const rect = el.getBoundingClientRect()
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
+      )
+    })
+    expect(isInViewport).toBe(true)
+
+    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
+    expect(isClipped).toBe(false)
+  })
+})

browser_tests/tests/appModeWidgetRename.spec.ts

@@ -30,10 +30,18 @@ async function setupSubgraphBuilder(comfyPage: ComfyPage) {
   await appMode.enterBuilder()
   await appMode.goToInputs()
 
+  // Reset zoom to 1 and center on the subgraph node so click coords are accurate
+  await comfyPage.canvasOps.setScale(1)
+  await subgraphNode.centerOnNode()
+
   // Click the promoted seed widget on the canvas to select it
   const seedWidgetRef = await subgraphNode.getWidget(0)
   const seedPos = await seedWidgetRef.getPosition()
-  await page.mouse.click(seedPos.x, seedPos.y)
+  const titleHeight = await page.evaluate(
+    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
+  )
+
+  await page.mouse.click(seedPos.x, seedPos.y + titleHeight)
   await comfyPage.nextFrame()
 
   // Select an output node
@@ -48,9 +56,15 @@ async function setupSubgraphBuilder(comfyPage: ComfyPage) {
     )
   )
   const saveImageRef = await comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-  const saveImagePos = await saveImageRef.getPosition()
-  // Click left edge — the right side is hidden by the builder panel
-  await page.mouse.click(saveImagePos.x + 10, saveImagePos.y - 10)
+  await saveImageRef.centerOnNode()
+
+  // Node is centered on screen, so click the canvas center
+  const canvasBox = await page.locator('#graph-canvas').boundingBox()
+  if (!canvasBox) throw new Error('Canvas not found')
+  await page.mouse.click(
+    canvasBox.x + canvasBox.width / 2,
+    canvasBox.y + canvasBox.height / 2
+  )
   await comfyPage.nextFrame()
 
   return subgraphNode
@@ -80,9 +94,15 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
       }
     })
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.AppBuilder.VueNodeSwitchDismissed',
+      true
+    )
   })
 
-  test('Rename from builder input-select sidebar', async ({ comfyPage }) => {
+  test('Rename from builder input-select sidebar via menu', async ({
+    comfyPage
+  }) => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)
 
@@ -91,11 +111,11 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
 
     const menu = appMode.getBuilderInputItemMenu('seed')
     await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameWidget(menu, 'Builder Input Seed')
+    await appMode.renameBuilderInputViaMenu('seed', 'Builder Input Seed')
 
     // Verify in app mode after save/reload
     await appMode.exitBuilder()
-    const workflowName = `${new Date().getTime()} builder-input`
+    const workflowName = `${new Date().getTime()} builder-input-menu`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
     await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
@@ -104,6 +124,24 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     ).toBeVisible()
   })
 
+  test('Rename from builder input-select sidebar via double-click', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+
+    await appMode.goToInputs()
+
+    await appMode.renameBuilderInput('seed', 'Dblclick Seed')
+
+    await appMode.exitBuilder()
+    const workflowName = `${new Date().getTime()} builder-input-dblclick`
+    await saveAndReopenInAppMode(comfyPage, workflowName)
+
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets.getByText('Dblclick Seed')).toBeVisible()
+  })
+
   test('Rename from builder preview sidebar', async ({ comfyPage }) => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)

browser_tests/tests/graph.spec.ts

@@ -23,4 +23,85 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
     await comfyPage.workflow.loadWorkflow('links/bad_link')
     await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(2)
   })
+
+  // Regression: duplicate links with shifted target_slot (widget-to-input
+  // conversion) caused the wrong link to survive during deduplication.
+  // Switch(CFG) node 120 connects to both KSamplerAdvanced 85 and 86 (2 links).
+  // Links 257 and 276 shared the same tuple (origin=120 → target=85 slot=5).
+  // Node 85's input.link was 276 (valid), but the bug kept 257 (stale) and
+  // removed 276, breaking the cfg connection on KSamplerAdvanced 85.
+  // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/10291
+  test('Deduplicates links without breaking connections on slot-drift workflow', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('links/duplicate_links_slot_drift')
+
+    const result = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.graph!
+
+      const subgraph = graph.subgraphs.values().next().value
+      if (!subgraph) return { error: 'No subgraph found' }
+
+      // Node 120 = Switch (CFG), connects to both KSamplerAdvanced 85 and 86
+      const switchCfg = subgraph.getNodeById(120)
+      const ksampler85 = subgraph.getNodeById(85)
+      const ksampler86 = subgraph.getNodeById(86)
+      if (!switchCfg || !ksampler85 || !ksampler86)
+        return { error: 'Required nodes not found' }
+
+      // Find cfg inputs by name (slot indices shift due to widget-to-input)
+      const cfgInput85 = ksampler85.inputs.find(
+        (i: { name: string }) => i.name === 'cfg'
+      )
+      const cfgInput86 = ksampler86.inputs.find(
+        (i: { name: string }) => i.name === 'cfg'
+      )
+      const cfg85Linked = cfgInput85?.link != null
+      const cfg86Linked = cfgInput86?.link != null
+
+      // Verify the surviving links exist in the subgraph link map
+      const cfg85LinkValid =
+        cfg85Linked && subgraph.links.has(cfgInput85!.link!)
+      const cfg86LinkValid =
+        cfg86Linked && subgraph.links.has(cfgInput86!.link!)
+
+      // Switch(CFG) output should have exactly 2 links (one to each KSampler)
+      const switchOutputLinkCount = switchCfg.outputs[0]?.links?.length ?? 0
+
+      // Count links from Switch(CFG) to node 85 cfg (should be 1, not 2)
+      let cfgLinkToNode85Count = 0
+      for (const link of subgraph.links.values()) {
+        if (link.origin_id === 120 && link.target_id === 85)
+          cfgLinkToNode85Count++
+      }
+
+      return {
+        cfg85Linked,
+        cfg86Linked,
+        cfg85LinkValid,
+        cfg86LinkValid,
+        cfg85LinkId: cfgInput85?.link ?? null,
+        cfg86LinkId: cfgInput86?.link ?? null,
+        switchOutputLinkIds: [...(switchCfg.outputs[0]?.links ?? [])],
+        switchOutputLinkCount,
+        cfgLinkToNode85Count
+      }
+    })
+
+    expect(result).not.toHaveProperty('error')
+    // Both KSamplerAdvanced nodes must have their cfg input connected
+    expect(result.cfg85Linked).toBe(true)
+    expect(result.cfg86Linked).toBe(true)
+    // Links must exist in the subgraph link map
+    expect(result.cfg85LinkValid).toBe(true)
+    expect(result.cfg86LinkValid).toBe(true)
+    // Switch(CFG) output has exactly 2 links (one per KSamplerAdvanced)
+    expect(result.switchOutputLinkCount).toBe(2)
+    // Only 1 link from Switch(CFG) to node 85 (duplicate removed)
+    expect(result.cfgLinkToNode85Count).toBe(1)
+    // Output link IDs must match the input link IDs (source/target integrity)
+    expect(result.switchOutputLinkIds).toEqual(
+      expect.arrayContaining([result.cfg85LinkId, result.cfg86LinkId])
+    )
+  })
 })

browser_tests/tests/keybindingPresets.spec.ts

@@ -0,0 +1,257 @@
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+const TEST_PRESET = {
+  name: 'test-preset',
+  newBindings: [
+    {
+      commandId: 'Comfy.Canvas.SelectAll',
+      combo: { key: 'a', ctrl: true, shift: true },
+      targetElementId: 'graph-canvas-container'
+    }
+  ],
+  unsetBindings: [
+    {
+      commandId: 'Comfy.Canvas.SelectAll',
+      combo: { key: 'a', ctrl: true },
+      targetElementId: 'graph-canvas-container'
+    }
+  ]
+}
+
+async function importPreset(page: Page, preset: typeof TEST_PRESET) {
+  const menuButton = page.getByTestId('keybinding-preset-menu')
+  await menuButton.click()
+
+  const fileChooserPromise = page.waitForEvent('filechooser')
+  await page.getByRole('menuitem', { name: /Import preset/i }).click()
+  const fileChooser = await fileChooserPromise
+
+  const presetPath = path.join(os.tmpdir(), 'test-preset.json')
+  fs.writeFileSync(presetPath, JSON.stringify(preset))
+  await fileChooser.setFiles(presetPath)
+}
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.afterEach(async ({ comfyPage }) => {
+  await comfyPage.request.fetch(
+    `${comfyPage.url}/api/userdata/keybindings%2Ftest-preset.json`,
+    { method: 'DELETE' }
+  )
+  await comfyPage.settings.setSetting(
+    'Comfy.Keybinding.CurrentPreset',
+    'default'
+  )
+})
+
+test.describe('Keybinding Presets', { tag: '@keyboard' }, () => {
+  test('Can import a preset, use remapped keybinding, and switch back to default', async ({
+    comfyPage
+  }) => {
+    test.setTimeout(30000)
+    const { page } = comfyPage
+
+    // Verify default Ctrl+A select-all works
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.canvas.press('Delete')
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+    // Open keybinding settings panel
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await importPreset(page, TEST_PRESET)
+
+    // Verify active preset switched to test-preset
+    const presetTrigger = page
+      .locator('#keybinding-panel-actions')
+      .locator('button[role="combobox"]')
+    await expect(presetTrigger).toContainText('test-preset')
+
+    // Wait for toast to auto-dismiss, then close settings via Escape
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+
+    // Load workflow again, use new keybind Ctrl+Shift+A
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.canvas.press('Control+Shift+a')
+    await expect
+      .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+      .toBeGreaterThan(0)
+    await comfyPage.canvas.press('Delete')
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+    // Switch back to default preset
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await presetTrigger.click()
+    await page.getByRole('option', { name: /Default Preset/i }).click()
+
+    // Handle unsaved changes dialog if the preset was marked as modified
+    const discardButton = page.getByRole('button', {
+      name: /Discard and Switch/i
+    })
+    if (await discardButton.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await discardButton.click()
+    }
+
+    await expect(presetTrigger).toContainText('Default Preset')
+
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+  })
+
+  test('Can export a preset and re-import it', async ({ comfyPage }) => {
+    test.setTimeout(30000)
+    const { page } = comfyPage
+    const menuButton = page.getByTestId('keybinding-preset-menu')
+
+    // Open keybinding settings panel
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await importPreset(page, TEST_PRESET)
+
+    // Verify active preset switched to test-preset
+    const presetTrigger = page
+      .locator('#keybinding-panel-actions')
+      .locator('button[role="combobox"]')
+    await expect(presetTrigger).toContainText('test-preset')
+
+    // Wait for toast to auto-dismiss
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+
+    // Export via ellipsis menu
+    await menuButton.click()
+    const downloadPromise = page.waitForEvent('download')
+    await page.getByRole('menuitem', { name: /Export preset/i }).click()
+    const download = await downloadPromise
+
+    // Verify filename contains test-preset
+    expect(download.suggestedFilename()).toContain('test-preset')
+
+    // Close settings
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+
+    // Verify the downloaded file is valid JSON with correct structure
+    const downloadPath = await download.path()
+    expect(downloadPath).toBeTruthy()
+    const content = fs.readFileSync(downloadPath!, 'utf-8')
+    const parsed = JSON.parse(content) as {
+      name: string
+      newBindings: unknown[]
+      unsetBindings: unknown[]
+    }
+    expect(parsed).toHaveProperty('name')
+    expect(parsed).toHaveProperty('newBindings')
+    expect(parsed).toHaveProperty('unsetBindings')
+    expect(parsed.name).toBe('test-preset')
+  })
+
+  test('Can delete an imported preset', async ({ comfyPage }) => {
+    test.setTimeout(30000)
+    const { page } = comfyPage
+    const menuButton = page.getByTestId('keybinding-preset-menu')
+
+    // Open keybinding settings panel
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await importPreset(page, TEST_PRESET)
+
+    // Verify active preset switched to test-preset
+    const presetTrigger = page
+      .locator('#keybinding-panel-actions')
+      .locator('button[role="combobox"]')
+    await expect(presetTrigger).toContainText('test-preset')
+
+    // Wait for toast to auto-dismiss
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+
+    // Delete via ellipsis menu
+    await menuButton.click()
+    await page.getByRole('menuitem', { name: /Delete preset/i }).click()
+
+    // Confirm deletion in the dialog
+    const confirmDialog = page.getByRole('dialog', {
+      name: /Delete the current preset/i
+    })
+    await confirmDialog.getByRole('button', { name: /Delete/i }).click()
+
+    // Verify preset trigger now shows Default Preset
+    await expect(presetTrigger).toContainText('Default Preset')
+
+    // Close settings
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+  })
+
+  test('Can save modifications as a new preset', async ({ comfyPage }) => {
+    test.setTimeout(30000)
+    const { page } = comfyPage
+    const menuButton = page.getByTestId('keybinding-preset-menu')
+
+    // Open keybinding settings panel
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await importPreset(page, TEST_PRESET)
+
+    // Verify active preset switched to test-preset
+    const presetTrigger = page
+      .locator('#keybinding-panel-actions')
+      .locator('button[role="combobox"]')
+    await expect(presetTrigger).toContainText('test-preset')
+
+    // Wait for toast to auto-dismiss
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+
+    // Save as new preset via ellipsis menu
+    await menuButton.click()
+    await page.getByRole('menuitem', { name: /Save as new preset/i }).click()
+
+    // Fill in the preset name in the prompt dialog
+    const promptInput = page.locator('.prompt-dialog-content input')
+    await promptInput.fill('my-custom-preset')
+    await promptInput.press('Enter')
+
+    // Wait for toast to auto-dismiss
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+
+    // Verify preset trigger shows my-custom-preset
+    await expect(presetTrigger).toContainText('my-custom-preset')
+
+    // Close settings
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+
+    // Cleanup: delete the my-custom-preset file
+    await comfyPage.request.fetch(
+      `${comfyPage.url}/api/userdata/keybindings%2Fmy-custom-preset.json`,
+      { method: 'DELETE' }
+    )
+  })
+})

browser_tests/tests/linearMode.spec.ts

@@ -1,5 +1,3 @@
-import type { Page } from '@playwright/test'
-
 import {
   comfyPageFixture as test,
   comfyExpect as expect
@@ -11,58 +9,10 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
     await comfyPage.setup()
   })
 
-  async function enterAppMode(comfyPage: {
-    page: Page
-    nextFrame: () => Promise<void>
-  }) {
-    // LinearControls requires hasOutputs to be true. Serialize the current
-    // graph, inject linearData with output node IDs, then reload so the
-    // appModeStore picks up the outputs via its activeWorkflow watcher.
-    await comfyPage.page.evaluate(async () => {
-      const graph = window.app!.graph
-      if (!graph) return
-
-      const outputNodeIds = graph.nodes
-        .filter(
-          (n: { type?: string }) =>
-            n.type === 'SaveImage' || n.type === 'PreviewImage'
-        )
-        .map((n: { id: number | string }) => String(n.id))
-
-      // Serialize, inject linearData, and reload to sync stores
-      const workflow = graph.serialize() as unknown as Record<string, unknown>
-      const extra = (workflow.extra ?? {}) as Record<string, unknown>
-      extra.linearData = { inputs: [], outputs: outputNodeIds }
-      workflow.extra = extra
-      await window.app!.loadGraphData(
-        workflow as unknown as Parameters<
-          NonNullable<typeof window.app>['loadGraphData']
-        >[0]
-      )
-    })
-    await comfyPage.nextFrame()
-
-    // Toggle to app mode via the command which sets canvasStore.linearMode
-    await comfyPage.page.evaluate(() => {
-      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
-    })
-    await comfyPage.nextFrame()
-  }
-
-  async function enterGraphMode(comfyPage: {
-    page: Page
-    nextFrame: () => Promise<void>
-  }) {
-    await comfyPage.page.evaluate(() => {
-      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
-    })
-    await comfyPage.nextFrame()
-  }
-
   test('Displays linear controls when app mode active', async ({
     comfyPage
   }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
@@ -70,7 +20,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Run button visible in linear mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-run-button"]')
@@ -78,7 +28,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-workflow-info"]')
@@ -86,13 +36,13 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Returns to graph mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
     ).toBeVisible({ timeout: 5000 })
 
-    await enterGraphMode(comfyPage)
+    await comfyPage.appMode.toggleAppMode()
 
     await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
     await expect(
@@ -101,7 +51,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Canvas not visible in app mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')

eslint.config.ts

@@ -5,6 +5,7 @@ import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
+import testingLibrary from 'eslint-plugin-testing-library'
 // eslint-config-prettier disables ESLint rules that conflict with formatters (oxfmt)
 import eslintConfigPrettier from 'eslint-config-prettier'
 import { configs as storybookConfigs } from 'eslint-plugin-storybook'
@@ -271,6 +272,20 @@ export default defineConfig([
       ]
     }
   },
+  {
+    files: ['**/*.test.ts'],
+    plugins: { 'testing-library': testingLibrary },
+    rules: {
+      'testing-library/prefer-screen-queries': 'error',
+      'testing-library/no-container': 'error',
+      'testing-library/no-node-access': 'error',
+      'testing-library/no-wait-for-multiple-assertions': 'error',
+      'testing-library/prefer-find-by': 'error',
+      'testing-library/prefer-presence-queries': 'error',
+      'testing-library/prefer-user-event': 'error',
+      'testing-library/no-debugging-utils': 'error'
+    }
+  },
   {
     files: ['scripts/**/*.js'],
     languageOptions: {

knip.config.ts

@@ -6,7 +6,6 @@ const config: KnipConfig = {
       entry: [
         '{build,scripts}/**/*.{js,ts}',
         'src/assets/css/style.css',
-        'src/main.ts',
         'src/scripts/ui/menu/index.ts',
         'src/types/index.ts',
         'src/storybook/mocks/**/*.ts'
@@ -14,25 +13,23 @@ const config: KnipConfig = {
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}', '!.claude/**']
     },
     'apps/desktop-ui': {
-      entry: ['src/main.ts', 'src/i18n.ts'],
+      entry: ['src/i18n.ts'],
       project: ['src/**/*.{js,ts,vue}']
     },
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
     'packages/shared-frontend-utils': {
-      project: ['src/**/*.{js,ts}'],
-      entry: ['src/formatUtil.ts', 'src/networkUtil.ts']
+      project: ['src/**/*.{js,ts}']
     },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     },
     'packages/ingest-types': {
-      project: ['src/**/*.{js,ts}'],
-      entry: ['src/index.ts']
+      project: ['src/**/*.{js,ts}']
     }
   },
-  ignoreBinaries: ['python3', 'gh', 'generate'],
+  ignoreBinaries: ['python3'],
   ignoreDependencies: [
     // Weird importmap things
     '@iconify-json/lucide',
@@ -40,19 +37,12 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Used by lucideStrokePlugin.js (CSS @plugin)
-    '@iconify/utils'
+    '@primevue/icons'
   ],
   ignore: [
     // Auto generated API types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
-    'packages/registry-types/src/comfyRegistryTypes.ts',
-    'packages/ingest-types/src/types.gen.ts',
     'packages/ingest-types/src/zod.gen.ts',
-    'packages/ingest-types/openapi-ts.config.ts',
-    // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
     // Used by stacked PR (feat/glsl-live-preview)
     'src/renderer/glsl/useGLSLRenderer.ts',
     // Workflow files contain license names that knip misinterprets as binaries
@@ -60,17 +50,8 @@ const config: KnipConfig = {
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
     // Agent review check config, not part of the build
-    '.agents/checks/eslint.strict.config.js',
-    // Loaded via @plugin directive in CSS, not detected by knip
-    'packages/design-system/src/css/lucideStrokePlugin.js'
+    '.agents/checks/eslint.strict.config.js'
   ],
-  compilers: {
-    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
-    css: (text: string) =>
-      [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
-        .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
-        .join('\n')
-  },
   vite: {
     config: ['vite?(.*).config.mts']
   },

lint-staged.config.ts

@@ -11,7 +11,7 @@ export default {
 
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
+  './**/*.{ts,tsx,vue,mts,json,yaml}': (stagedFiles: string[]) => {
     const commands = [...formatAndEslint(stagedFiles), 'pnpm typecheck']
 
     const hasBrowserTestsChanges = stagedFiles

nx.json

@@ -36,5 +36,6 @@
         "targetName": "e2e"
       }
     }
-  ]
+  ],
+  "analytics": false
 }

package.json

@@ -135,6 +135,9 @@
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@testing-library/vue": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -153,6 +156,7 @@
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
     "eslint-plugin-storybook": "catalog:",
+    "eslint-plugin-testing-library": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
     "fast-check": "catalog:",
@@ -177,9 +181,7 @@
     "storybook": "catalog:",
     "stylelint": "catalog:",
     "tailwindcss": "catalog:",
-    "tailwindcss-primeui": "catalog:",
     "tsx": "catalog:",
-    "tw-animate-css": "catalog:",
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",
     "unplugin-icons": "catalog:",

packages/design-system/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@iconify-json/lucide": "catalog:",
     "@iconify/tailwind4": "catalog:",
-    "@iconify/utils": "catalog:"
+    "@iconify/utils": "catalog:",
+    "tailwindcss-primeui": "catalog:",
+    "tw-animate-css": "catalog:"
   },
   "devDependencies": {
     "tailwindcss": "catalog:",

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

@@ -15,7 +15,7 @@
 @plugin "./lucideStrokePlugin.js";
 
 /* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver-ai}]");
 
 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
 @source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent,i-tools-preview-image,i-tools-compare-image,canny-to-image,image-edit,text-to-image,pose-to-image,depth-to-video,image-to-image,canny-to-video,depth-to-image,image-to-video,pose-to-video,text-to-video,image-inpainting,image-outpainting}]");

packages/design-system/src/icons/quiver-ai.svg

@@ -0,0 +1,3 @@
+<svg width="281" height="281" viewBox="0 0 281 281" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140.069 0C217.427 0.000220786 280.138 62.7116 280.138 140.069V280.138H140.069C62.7116 280.138 0.000220844 217.427 0 140.069C0 62.7114 62.7114 0 140.069 0ZM74.961 66.6054C69.8263 64.8847 64.9385 69.7815 66.6687 74.913L123.558 243.619C125.929 250.65 136.321 248.945 136.321 241.524V135.823H241.329C248.756 135.823 250.453 125.416 243.41 123.056L74.961 66.6054Z" fill="#F8F8F8"/>
+</svg>

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

@@ -631,3 +631,10 @@ export function isPreviewableMediaType(mediaType: MediaType): boolean {
     mediaType === '3D'
   )
 }
+
+export function formatTime(seconds: number): string {
+  if (isNaN(seconds) || seconds === 0) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}

pnpm-workspace.yaml

@@ -13,10 +13,10 @@ catalog:
   '@iconify/utils': ^3.1.0
   '@intlify/eslint-plugin-vue-i18n': ^4.1.1
   '@lobehub/i18n-cli': ^1.26.1
-  '@nx/eslint': 22.5.2
-  '@nx/playwright': 22.5.2
-  '@nx/storybook': 22.5.2
-  '@nx/vite': 22.5.2
+  '@nx/eslint': 22.6.1
+  '@nx/playwright': 22.6.1
+  '@nx/storybook': 22.6.1
+  '@nx/vite': 22.6.1
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
@@ -34,6 +34,9 @@ catalog:
   '@storybook/vue3': ^10.2.10
   '@storybook/vue3-vite': ^10.2.10
   '@tailwindcss/vite': ^4.2.0
+  '@testing-library/jest-dom': ^6.9.1
+  '@testing-library/user-event': ^14.6.1
+  '@testing-library/vue': ^8.1.0
   '@tiptap/core': ^2.27.2
   '@tiptap/extension-link': ^2.27.2
   '@tiptap/extension-table': ^2.27.2
@@ -67,6 +70,7 @@ catalog:
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.55.0
   eslint-plugin-storybook: ^10.2.10
+  eslint-plugin-testing-library: ^7.16.1
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   fast-check: ^4.5.3
@@ -79,11 +83,11 @@ catalog:
   jsdom: ^27.4.0
   jsonata: ^2.1.0
   jsondiffpatch: ^0.7.3
-  knip: ^5.75.1
+  knip: ^6.0.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
-  nx: 22.5.2
+  nx: 22.6.1
   oxfmt: ^0.40.0
   oxlint: ^1.55.0
   oxlint-tsgolint: ^0.17.0

src/components/actionbar/ComfyRunButton/ComfyQueueButton.test.ts

@@ -1,5 +1,4 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
@@ -14,6 +13,7 @@ import {
   useQueueSettingsStore,
   useQueueStore
 } from '@/stores/queueStore'
+import { render, screen } from '@/utils/test-utils'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -78,38 +78,40 @@ function createTask(id: string, status: JobStatus): TaskItemImpl {
   return new TaskItemImpl(job)
 }
 
-function createWrapper() {
+const stubs = {
+  BatchCountEdit: BatchCountEditStub,
+  DropdownMenuRoot: { template: '<div><slot /></div>' },
+  DropdownMenuTrigger: { template: '<div><slot /></div>' },
+  DropdownMenuPortal: { template: '<div><slot /></div>' },
+  DropdownMenuContent: { template: '<div><slot /></div>' },
+  DropdownMenuItem: { template: '<div><slot /></div>' }
+}
+
+function renderQueueButton() {
   const pinia = createTestingPinia({ createSpy: vi.fn })
 
-  return mount(ComfyQueueButton, {
+  return render(ComfyQueueButton, {
     global: {
       plugins: [pinia, i18n],
       directives: {
         tooltip: () => {}
       },
-      stubs: {
-        BatchCountEdit: BatchCountEditStub,
-        DropdownMenuRoot: { template: '<div><slot /></div>' },
-        DropdownMenuTrigger: { template: '<div><slot /></div>' },
-        DropdownMenuPortal: { template: '<div><slot /></div>' },
-        DropdownMenuContent: { template: '<div><slot /></div>' },
-        DropdownMenuItem: { template: '<div><slot /></div>' }
-      }
+      stubs
     }
   })
 }
 
 describe('ComfyQueueButton', () => {
   it('renders the batch count control before the run button', () => {
-    const wrapper = createWrapper()
-    const controls = wrapper.get('.queue-button-group').element.children
+    renderQueueButton()
+    const controls = screen.getAllByTestId(/batch-count-edit|queue-button/)
 
-    expect(controls[0]?.getAttribute('data-testid')).toBe('batch-count-edit')
-    expect(controls[1]?.getAttribute('data-testid')).toBe('queue-button')
+    expect(controls[0]).toHaveAttribute('data-testid', 'batch-count-edit')
+    expect(controls[1]).toHaveAttribute('data-testid', 'queue-button')
   })
 
   it('keeps the run instant presentation while idle even with active jobs', async () => {
-    const wrapper = createWrapper()
+    renderQueueButton()
     const queueSettingsStore = useQueueSettingsStore()
     const queueStore = useQueueStore()
 
@@ -117,29 +119,27 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
+    const queueButton = screen.getByTestId('queue-button')
 
-    expect(queueButton.text()).toContain('Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('primary')
-    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
+    expect(queueButton).toHaveTextContent('Run (Instant)')
+    expect(queueButton).toHaveAttribute('data-variant', 'primary')
   })
 
   it('switches to stop presentation when instant mode is armed', async () => {
-    const wrapper = createWrapper()
+    renderQueueButton()
     const queueSettingsStore = useQueueSettingsStore()
 
     queueSettingsStore.mode = 'instant-running'
     await nextTick()
 
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
+    const queueButton = screen.getByTestId('queue-button')
 
-    expect(queueButton.text()).toContain('Stop Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('destructive')
-    expect(wrapper.find('.icon-\\[lucide--square\\]').exists()).toBe(true)
+    expect(queueButton).toHaveTextContent('Stop Run (Instant)')
+    expect(queueButton).toHaveAttribute('data-variant', 'destructive')
   })
 
   it('disarms instant mode without interrupting even when jobs are active', async () => {
-    const wrapper = createWrapper()
+    const { user } = renderQueueButton()
     const queueSettingsStore = useQueueSettingsStore()
     const queueStore = useQueueStore()
     const commandStore = useCommandStore()
@@ -148,33 +148,26 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    await wrapper.get('[data-testid="queue-button"]').trigger('click')
+    await user!.click(screen.getByTestId('queue-button'))
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-idle')
-    const queueButtonWhileStopping = wrapper.get('[data-testid="queue-button"]')
-    expect(queueButtonWhileStopping.text()).toContain('Run (Instant)')
-    expect(queueButtonWhileStopping.attributes('data-variant')).toBe('primary')
-    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
+    const queueButton = screen.getByTestId('queue-button')
+    expect(queueButton).toHaveTextContent('Run (Instant)')
+    expect(queueButton).toHaveAttribute('data-variant', 'primary')
 
     expect(commandStore.execute).not.toHaveBeenCalled()
-
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
-    expect(queueSettingsStore.mode).toBe('instant-idle')
-    expect(queueButton.text()).toContain('Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('primary')
-    expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
   })
 
   it('activates instant running mode when queueing again', async () => {
-    const wrapper = createWrapper()
+    const { user } = renderQueueButton()
     const queueSettingsStore = useQueueSettingsStore()
     const commandStore = useCommandStore()
 
     queueSettingsStore.mode = 'instant-idle'
     await nextTick()
 
-    await wrapper.get('[data-testid="queue-button"]').trigger('click')
+    await user!.click(screen.getByTestId('queue-button'))
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-running')

src/components/builder/AppBuilder.vue

@@ -25,7 +25,7 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import { app } from '@/scripts/app'
 import { DOMWidgetImpl } from '@/scripts/domWidget'
-import { promptRenameWidget } from '@/utils/widgetUtil'
+import { renameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
 import { resolveNodeWidget } from '@/utils/litegraphUtil'
@@ -63,7 +63,7 @@ const inputsWithState = computed(() =>
       widgetName,
       label: widget.label,
       subLabel: node.title,
-      rename: () => promptRenameWidget(widget, node, t)
+      canRename: true
     }
   })
 )
@@ -74,6 +74,16 @@ const outputsWithState = computed<[NodeId, string][]>(() =>
   ])
 )
 
+function inlineRenameInput(
+  nodeId: NodeId,
+  widgetName: string,
+  newLabel: string
+) {
+  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+  if (!node || !widget) return
+  renameWidget(widget, node, newLabel)
+}
+
 function getHovered(
   e: MouseEvent
 ): undefined | [LGraphNode, undefined] | [LGraphNode, IBaseWidget] {
@@ -234,7 +244,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
               widgetName,
               label,
               subLabel,
-              rename
+              canRename
             } in inputsWithState"
             :key="`${nodeId}: ${widgetName}`"
             :class="
@@ -242,7 +252,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
             "
             :title="label ?? widgetName"
             :sub-title="subLabel"
-            :rename
+            :can-rename="canRename"
             :remove="
               () =>
                 remove(
@@ -250,6 +260,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
                   ([id, name]) => nodeId == id && widgetName === name
                 )
             "
+            @rename="inlineRenameInput(nodeId, widgetName, $event)"
           />
         </DraggableList>
       </PropertiesAccordionItem>

src/components/builder/AppModeWidgetList.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
@@ -44,6 +45,7 @@ const appModeStore = useAppModeStore()
 const maskEditor = useMaskEditor()
 
 provide(HideLayoutFieldKey, true)
+provide(OverlayAppendToKey, 'body')
 
 const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
 useEventListener(

src/components/builder/IoItem.vue

@@ -2,31 +2,43 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import EditableText from '@/components/common/EditableText.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
 
-const titleTooltip = ref<string | null>(null)
 const subTitleTooltip = ref<string | null>(null)
+const isEditing = ref(false)
 
 function isTruncated(e: MouseEvent): boolean {
   const el = e.currentTarget as HTMLElement
   return el.scrollWidth > el.clientWidth
 }
-const { rename, remove } = defineProps<{
+const { title, canRename, remove } = defineProps<{
   title: string
   subTitle?: string
-  rename?: () => void
+  canRename?: boolean
   remove?: () => void
 }>()
 
+const emit = defineEmits<{
+  rename: [newName: string]
+}>()
+
+function onEditComplete(newName: string) {
+  isEditing.value = false
+  const trimmed = newName.trim()
+  if (trimmed && trimmed !== title) emit('rename', trimmed)
+}
+
 const entries = computed(() => {
   const items = []
-  if (rename)
+  if (canRename)
     items.push({
       label: t('g.rename'),
-      command: rename,
+      command: () => setTimeout(() => (isEditing.value = true)),
       icon: 'icon-[lucide--pencil]'
     })
   if (remove)
@@ -43,13 +55,24 @@ const entries = computed(() => {
     class="my-2 flex items-center-safe gap-2 rounded-lg p-2"
     data-testid="builder-io-item"
   >
-    <div class="drag-handle mr-auto flex min-w-0 flex-col gap-1">
-      <div
-        v-tooltip.left="{ value: titleTooltip, showDelay: 300 }"
-        class="drag-handle truncate text-sm"
+    <div class="drag-handle mr-auto flex w-full min-w-0 flex-col gap-1">
+      <EditableText
+        :model-value="title"
+        :is-editing="isEditing"
+        :input-attrs="{ class: 'p-1' }"
+        :class="
+          cn(
+            'drag-handle h-5 text-sm',
+            isEditing && 'relative -top-0.5 -left-1 -mt-px mb-px -ml-px',
+            !isEditing && 'truncate'
+          )
+        "
         data-testid="builder-io-item-title"
-        @mouseenter="titleTooltip = isTruncated($event) ? title : null"
-        v-text="title"
+        label-class="drag-handle"
+        label-type="div"
+        @dblclick="canRename && (isEditing = true)"
+        @edit="onEditComplete"
+        @cancel="isEditing = false"
       />
       <div
         v-tooltip.left="{ value: subTitleTooltip, showDelay: 300 }"

src/components/builder/VueNodeSwitchPopup.vue

@@ -0,0 +1,55 @@
+<template>
+  <NotificationPopup
+    v-if="appModeStore.showVueNodeSwitchPopup"
+    :title="$t('appBuilder.vueNodeSwitch.title')"
+    show-close
+    position="bottom-left"
+    @close="dismiss"
+  >
+    {{ $t('appBuilder.vueNodeSwitch.content') }}
+
+    <template #footer-start>
+      <label
+        class="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground"
+      >
+        <input
+          v-model="dontShowAgain"
+          type="checkbox"
+          class="accent-primary-background"
+        />
+        {{ $t('appBuilder.vueNodeSwitch.dontShowAgain') }}
+      </label>
+    </template>
+
+    <template #footer-end>
+      <Button
+        variant="secondary"
+        size="lg"
+        class="font-normal"
+        @click="dismiss"
+      >
+        {{ $t('appBuilder.vueNodeSwitch.dismiss') }}
+      </Button>
+    </template>
+  </NotificationPopup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import NotificationPopup from '@/components/common/NotificationPopup.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useAppModeStore } from '@/stores/appModeStore'
+
+const appModeStore = useAppModeStore()
+const settingStore = useSettingStore()
+const dontShowAgain = ref(false)
+
+function dismiss() {
+  if (dontShowAgain.value) {
+    void settingStore.set('Comfy.AppBuilder.VueNodeSwitchDismissed', true)
+  }
+  appModeStore.showVueNodeSwitchPopup = false
+}
+</script>

src/components/common/DropdownMenu.vue

@@ -12,6 +12,7 @@ import { computed, toValue } from 'vue'
 import DropdownItem from '@/components/common/DropdownItem.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
+import type { ButtonVariants } from '../ui/button/button.variants'
 
 defineOptions({
   inheritAttrs: false
@@ -23,6 +24,8 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
   to?: string | HTMLElement
   itemClass?: string
   contentClass?: string
+  buttonSize?: ButtonVariants['size']
+  buttonClass?: string
 }>()
 
 const itemClass = computed(() =>
@@ -44,7 +47,7 @@ const contentClass = computed(() =>
   <DropdownMenuRoot>
     <DropdownMenuTrigger as-child>
       <slot name="button">
-        <Button size="icon">
+        <Button :size="buttonSize ?? 'icon'" :class="buttonClass">
           <i :class="icon ?? 'icon-[lucide--menu]'" />
         </Button>
       </slot>

src/components/common/EditableText.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="editable-text">
-    <span v-if="!isEditing">
+    <component :is="labelType" v-if="!isEditing" :class="labelClass">
       {{ modelValue }}
-    </span>
+    </component>
     <!-- Avoid double triggering finishEditing event when keydown.enter is triggered -->
     <InputText
       v-else
@@ -35,11 +35,15 @@ import { nextTick, ref, watch } from 'vue'
 const {
   modelValue,
   isEditing = false,
-  inputAttrs = {}
+  inputAttrs = {},
+  labelClass = '',
+  labelType = 'span'
 } = defineProps<{
   modelValue: string
   isEditing?: boolean
   inputAttrs?: Record<string, string>
+  labelClass?: string
+  labelType?: string
 }>()
 
 const emit = defineEmits(['edit', 'cancel'])

src/components/common/NotificationPopup.test.ts

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import NotificationPopup from './NotificationPopup.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: { g: { close: 'Close' } }
+  }
+})
+
+function mountPopup(
+  props: ComponentProps<typeof NotificationPopup> = {
+    title: 'Test'
+  },
+  slots: Record<string, string> = {}
+) {
+  return mount(NotificationPopup, {
+    global: { plugins: [i18n] },
+    props,
+    slots
+  })
+}
+
+describe('NotificationPopup', () => {
+  it('renders title', () => {
+    const wrapper = mountPopup({ title: 'Hello World' })
+    expect(wrapper.text()).toContain('Hello World')
+  })
+
+  it('has role="status" for accessibility', () => {
+    const wrapper = mountPopup()
+    expect(wrapper.find('[role="status"]').exists()).toBe(true)
+  })
+
+  it('renders subtitle when provided', () => {
+    const wrapper = mountPopup({ title: 'T', subtitle: 'v1.2.3' })
+    expect(wrapper.text()).toContain('v1.2.3')
+  })
+
+  it('renders icon when provided', () => {
+    const wrapper = mountPopup({
+      title: 'T',
+      icon: 'icon-[lucide--rocket]'
+    })
+    expect(wrapper.find('i.icon-\\[lucide--rocket\\]').exists()).toBe(true)
+  })
+
+  it('emits close when close button clicked', async () => {
+    const wrapper = mountPopup({ title: 'T', showClose: true })
+    await wrapper.find('[aria-label="Close"]').trigger('click')
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+
+  it('renders default slot content', () => {
+    const wrapper = mountPopup({ title: 'T' }, { default: 'Body text here' })
+    expect(wrapper.text()).toContain('Body text here')
+  })
+
+  it('renders footer slots', () => {
+    const wrapper = mountPopup(
+      { title: 'T' },
+      { 'footer-start': 'Left side', 'footer-end': 'Right side' }
+    )
+    expect(wrapper.text()).toContain('Left side')
+    expect(wrapper.text()).toContain('Right side')
+  })
+
+  it('positions bottom-right when specified', () => {
+    const wrapper = mountPopup({ title: 'T', position: 'bottom-right' })
+    const root = wrapper.find('[role="status"]')
+    expect(root.attributes('data-position')).toBe('bottom-right')
+  })
+})

src/components/common/NotificationPopup.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    role="status"
+    :data-position="position"
+    :class="
+      cn(
+        'pointer-events-auto absolute z-1000 flex max-h-96 w-96 flex-col rounded-lg border border-border-default bg-base-background shadow-interface',
+        position === 'bottom-left' && 'bottom-4 left-4',
+        position === 'bottom-right' && 'right-4 bottom-4'
+      )
+    "
+  >
+    <div class="flex min-h-0 flex-1 flex-col gap-4 p-4">
+      <div class="flex items-center gap-4">
+        <div
+          v-if="icon"
+          class="flex shrink-0 items-center justify-center rounded-lg bg-primary-background-hover p-3"
+        >
+          <i :class="cn('size-4 text-white', icon)" />
+        </div>
+        <div class="flex flex-1 flex-col gap-1">
+          <div class="text-sm leading-[1.429] font-normal text-base-foreground">
+            {{ title }}
+          </div>
+          <div
+            v-if="subtitle"
+            class="text-sm leading-[1.21] font-normal text-muted-foreground"
+          >
+            {{ subtitle }}
+          </div>
+        </div>
+        <Button
+          v-if="showClose"
+          class="size-6 shrink-0 self-start"
+          size="icon-sm"
+          variant="muted-textonly"
+          :aria-label="$t('g.close')"
+          @click="emit('close')"
+        >
+          <i class="icon-[lucide--x] size-3.5" />
+        </Button>
+      </div>
+
+      <div
+        v-if="$slots.default"
+        class="min-h-0 flex-1 overflow-y-auto text-sm text-muted-foreground"
+      >
+        <slot />
+      </div>
+    </div>
+
+    <div
+      v-if="$slots['footer-start'] || $slots['footer-end']"
+      class="flex items-center justify-between px-4 pb-4"
+    >
+      <div>
+        <slot name="footer-start" />
+      </div>
+      <div class="flex items-center gap-4">
+        <slot name="footer-end" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  icon,
+  title,
+  subtitle,
+  showClose = false,
+  position = 'bottom-left'
+} = defineProps<{
+  icon?: string
+  title: string
+  subtitle?: string
+  showClose?: boolean
+  position?: 'bottom-left' | 'bottom-right'
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+</script>

src/components/common/WaveAudioPlayer.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import WaveAudioPlayer from './WaveAudioPlayer.vue'
+
+const meta: Meta<typeof WaveAudioPlayer> = {
+  title: 'Components/Audio/WaveAudioPlayer',
+  component: WaveAudioPlayer,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    src: '/assets/audio/sample.wav',
+    barCount: 40,
+    height: 32
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template:
+        '<div class="w-80 rounded-lg bg-base-background p-4"><story /></div>'
+    })
+  ]
+}
+
+export const BottomAligned: Story = {
+  args: {
+    src: '/assets/audio/sample.wav',
+    barCount: 40,
+    height: 48,
+    align: 'bottom'
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template:
+        '<div class="w-80 rounded-lg bg-base-background p-4"><story /></div>'
+    })
+  ]
+}
+
+export const Expanded: Story = {
+  args: {
+    src: '/assets/audio/sample.wav',
+    variant: 'expanded',
+    barCount: 80,
+    height: 120
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template:
+        '<div class="w-[600px] rounded-2xl bg-base-background/80 p-8 backdrop-blur-sm"><story /></div>'
+    })
+  ]
+}

src/components/common/WaveAudioPlayer.vue

@@ -0,0 +1,221 @@
+<template>
+  <!-- Compact: [▶] [waveform] [time] -->
+  <div
+    v-if="variant === 'compact'"
+    :class="
+      cn('flex w-full gap-2', align === 'center' ? 'items-center' : 'items-end')
+    "
+    @pointerdown.stop
+    @click.stop
+  >
+    <Button
+      variant="textonly"
+      size="icon-sm"
+      class="size-7 shrink-0 rounded-full bg-muted-foreground/15 hover:bg-muted-foreground/25"
+      :aria-label="isPlaying ? $t('g.pause') : $t('g.play')"
+      :loading="loading"
+      @click.stop="togglePlayPause"
+    >
+      <i
+        v-if="!isPlaying"
+        class="ml-0.5 icon-[lucide--play] size-3 text-base-foreground"
+      />
+      <i v-else class="icon-[lucide--pause] size-3 text-base-foreground" />
+    </Button>
+
+    <div
+      :ref="(el) => (waveformRef = el as HTMLElement)"
+      :class="
+        cn(
+          'flex min-w-0 flex-1 cursor-pointer gap-px',
+          align === 'center' ? 'items-center' : 'items-end'
+        )
+      "
+      :style="{ height: height + 'px' }"
+      @click="handleWaveformClick"
+    >
+      <div
+        v-for="(bar, index) in bars"
+        :key="index"
+        :class="
+          cn(
+            'min-h-0.5 flex-1 rounded-full',
+            loading
+              ? 'bg-muted-foreground/20'
+              : index <= playedBarIndex
+                ? 'bg-base-foreground'
+                : 'bg-muted-foreground/40'
+          )
+        "
+        :style="{ height: (bar.height / 100) * height + 'px' }"
+      />
+    </div>
+
+    <span class="shrink-0 text-xs text-muted-foreground tabular-nums">
+      {{ formattedCurrentTime }} / {{ formattedDuration }}
+    </span>
+  </div>
+
+  <!-- Expanded: waveform / progress bar + times / transport -->
+  <div v-else class="flex w-full flex-col gap-4" @pointerdown.stop @click.stop>
+    <div
+      class="flex w-full items-center gap-0.5"
+      :style="{ height: height + 'px' }"
+    >
+      <div
+        v-for="(bar, index) in bars"
+        :key="index"
+        :class="
+          cn(
+            'min-h-0.5 flex-1 rounded-full',
+            loading ? 'bg-muted-foreground/20' : 'bg-base-foreground'
+          )
+        "
+        :style="{ height: (bar.height / 100) * height + 'px' }"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <div
+        ref="progressRef"
+        class="relative h-1 w-full cursor-pointer rounded-full bg-muted-foreground/20"
+        @click="handleProgressClick"
+      >
+        <div
+          class="absolute top-0 left-0 h-full rounded-full bg-base-foreground"
+          :style="{ width: progressRatio + '%' }"
+        />
+      </div>
+      <div
+        class="flex justify-between text-xs text-muted-foreground tabular-nums"
+      >
+        <span>{{ formattedCurrentTime }}</span>
+        <span>{{ formattedDuration }}</span>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <div class="w-20" />
+
+      <div class="flex flex-1 items-center justify-center gap-2">
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-8 rounded-full"
+          :aria-label="$t('g.skipToStart')"
+          :disabled="loading"
+          @click="seekToStart"
+        >
+          <i class="icon-[lucide--skip-back] size-4 text-base-foreground" />
+        </Button>
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-10 rounded-full bg-muted-foreground/15 hover:bg-muted-foreground/25"
+          :aria-label="isPlaying ? $t('g.pause') : $t('g.play')"
+          :loading="loading"
+          @click="togglePlayPause"
+        >
+          <i
+            v-if="!isPlaying"
+            class="ml-0.5 icon-[lucide--play] size-5 text-base-foreground"
+          />
+          <i v-else class="icon-[lucide--pause] size-5 text-base-foreground" />
+        </Button>
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-8 rounded-full"
+          :aria-label="$t('g.skipToEnd')"
+          :disabled="loading"
+          @click="seekToEnd"
+        >
+          <i class="icon-[lucide--skip-forward] size-4 text-base-foreground" />
+        </Button>
+      </div>
+
+      <div class="flex w-20 items-center gap-1">
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-8 shrink-0 rounded-full"
+          :aria-label="$t('g.volume')"
+          :disabled="loading"
+          @click="toggleMute"
+        >
+          <i :class="cn(volumeIcon, 'size-4 text-base-foreground')" />
+        </Button>
+        <Slider
+          :model-value="[volume * 100]"
+          :min="0"
+          :max="100"
+          :step="1"
+          class="flex-1"
+          @update:model-value="(v) => (volume = (v?.[0] ?? 100) / 100)"
+        />
+      </div>
+    </div>
+  </div>
+
+  <audio
+    :ref="(el) => (audioRef = el as HTMLAudioElement)"
+    :src="audioSrc"
+    preload="metadata"
+    class="hidden"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, toRef } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+import { useWaveAudioPlayer } from '@/composables/useWaveAudioPlayer'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  src,
+  barCount = 40,
+  height = 32,
+  align = 'center',
+  variant = 'compact'
+} = defineProps<{
+  src: string
+  barCount?: number
+  height?: number
+  align?: 'center' | 'bottom'
+  variant?: 'compact' | 'expanded'
+}>()
+
+const progressRef = ref<HTMLElement>()
+
+const {
+  audioRef,
+  waveformRef,
+  audioSrc,
+  bars,
+  loading,
+  isPlaying,
+  playedBarIndex,
+  progressRatio,
+  formattedCurrentTime,
+  formattedDuration,
+  togglePlayPause,
+  seekToStart,
+  seekToEnd,
+  volume,
+  volumeIcon,
+  toggleMute,
+  seekToRatio,
+  handleWaveformClick
+} = useWaveAudioPlayer({
+  src: toRef(() => src),
+  barCount
+})
+
+function handleProgressClick(event: MouseEvent) {
+  if (!progressRef.value) return
+  const rect = progressRef.value.getBoundingClientRect()
+  seekToRatio((event.clientX - rect.left) / rect.width)
+}
+</script>

src/components/dialog/content/SignInContent.vue

@@ -77,29 +77,31 @@
           </Button>
         </template>
 
-        <Button
-          type="button"
-          class="h-10"
-          variant="secondary"
-          @click="showApiKeyForm = true"
-        >
-          <img
-            src="/assets/images/comfy-logo-mono.svg"
-            class="mr-2 size-5"
-            :alt="$t('g.comfy')"
-          />
-          {{ t('auth.login.useApiKey') }}
-        </Button>
-        <small class="text-center text-muted">
-          {{ t('auth.apiKey.helpText') }}
-          <a
-            :href="`${comfyPlatformBaseUrl}/login`"
-            target="_blank"
-            class="cursor-pointer text-blue-500"
+        <template v-if="!isCloud">
+          <Button
+            type="button"
+            class="h-10"
+            variant="secondary"
+            @click="showApiKeyForm = true"
           >
-            {{ t('auth.apiKey.generateKey') }}
-          </a>
-        </small>
+            <img
+              src="/assets/images/comfy-logo-mono.svg"
+              class="mr-2 size-5"
+              :alt="$t('g.comfy')"
+            />
+            {{ t('auth.login.useApiKey') }}
+          </Button>
+          <small class="text-center text-muted">
+            {{ t('auth.apiKey.helpText') }}
+            <a
+              :href="`${comfyPlatformBaseUrl}/login`"
+              target="_blank"
+              class="cursor-pointer text-blue-500"
+            >
+              {{ t('auth.apiKey.generateKey') }}
+            </a>
+          </small>
+        </template>
         <Message
           v-if="authActions.accessError.value"
           severity="info"
@@ -152,6 +154,7 @@ import {
   remoteConfig
 } from '@/platform/remoteConfig/remoteConfig'
 import type { SignInData, SignUpData } from '@/schemas/signInSchema'
+import { isCloud } from '@/platform/distribution/types'
 import { isHostWhitelisted, normalizeHost } from '@/utils/hostWhitelist'
 import { isInChina } from '@/utils/networkUtil'
 

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

@@ -1,9 +1,41 @@
 <template>
   <div class="keybinding-panel flex flex-col gap-2">
-    <SearchInput
-      v-model="filters['global'].value"
-      :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
-    />
+    <Teleport defer to="#keybinding-panel-header">
+      <SearchInput
+        v-model="filters['global'].value"
+        class="max-w-96"
+        size="lg"
+        :placeholder="
+          $t('g.searchPlaceholder', { subject: $t('g.keybindings') })
+        "
+      />
+    </Teleport>
+
+    <Teleport defer to="#keybinding-panel-actions">
+      <div class="flex items-center gap-2">
+        <KeybindingPresetToolbar
+          :preset-names="presetNames"
+          @presets-changed="refreshPresetList"
+        />
+        <DropdownMenu
+          :entries="menuEntries"
+          icon="icon-[lucide--ellipsis]"
+          item-class="text-sm gap-2"
+          button-size="unset"
+          button-class="size-10"
+        >
+          <template #button>
+            <Button
+              size="unset"
+              class="size-10"
+              data-testid="keybinding-preset-menu"
+            >
+              <i class="icon-[lucide--ellipsis]" />
+            </Button>
+          </template>
+        </DropdownMenu>
+      </div>
+    </Teleport>
 
     <ContextMenuRoot>
       <ContextMenuTrigger as-child>
@@ -15,6 +47,9 @@
             data-key="id"
             :global-filter-fields="['id', 'label']"
             :filters="filters"
+            :paginator="true"
+            :rows="50"
+            :rows-per-page-options="[25, 50, 100]"
             selection-mode="single"
             context-menu
             striped-rows
@@ -77,11 +112,7 @@
                     <span v-if="idx > 0" class="text-muted-foreground">,</span>
                     <KeyComboDisplay
                       :key-combo="binding.combo"
-                      :is-modified="
-                        keybindingStore.isCommandKeybindingModified(
-                          slotProps.data.id
-                        )
-                      "
+                      :is-modified="slotProps.data.isModified"
                     />
                   </template>
                   <span
@@ -141,11 +172,7 @@
                     variant="textonly"
                     size="icon"
                     :aria-label="$t('g.reset')"
-                    :disabled="
-                      !keybindingStore.isCommandKeybindingModified(
-                        slotProps.data.id
-                      )
-                    "
+                    :disabled="!slotProps.data.isModified"
                     @click="resetKeybinding(slotProps.data)"
                   >
                     <i class="icon-[lucide--rotate-ccw]" />
@@ -177,11 +204,7 @@
                     }}</span>
                     <KeyComboDisplay
                       :key-combo="binding.combo"
-                      :is-modified="
-                        keybindingStore.isCommandKeybindingModified(
-                          slotProps.data.id
-                        )
-                      "
+                      :is-modified="slotProps.data.isModified"
                     />
                   </div>
                   <div class="flex flex-row">
@@ -234,10 +257,7 @@
           <ContextMenuSeparator class="my-1 h-px bg-border-subtle" />
           <ContextMenuItem
             class="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 text-sm text-text-primary outline-none select-none hover:bg-node-component-surface-hovered focus:bg-node-component-surface-hovered data-disabled:cursor-default data-disabled:opacity-50"
-            :disabled="
-              !contextMenuTarget ||
-              !keybindingStore.isCommandKeybindingModified(contextMenuTarget.id)
-            "
+            :disabled="!contextMenuTarget?.isModified"
             @select="ctxResetToDefault"
           >
             <i class="icon-[lucide--rotate-ccw] size-4" />
@@ -270,6 +290,7 @@
 </template>
 
 <script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
 import { FilterMatchMode } from '@primevue/core/api'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
@@ -282,9 +303,10 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger
 } from 'reka-ui'
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import DropdownMenu from '@/components/common/DropdownMenu.vue'
 import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import Button from '@/components/ui/button/Button.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
@@ -292,10 +314,13 @@ import { useEditKeybindingDialog } from '@/composables/useEditKeybindingDialog'
 import type { KeybindingImpl } from '@/platform/keybindings/keybinding'
 import { useKeybindingService } from '@/platform/keybindings/keybindingService'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
+import { useKeybindingPresetService } from '@/platform/keybindings/presetService'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
+import KeybindingPresetToolbar from './keybinding/KeybindingPresetToolbar.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
 
 const filters = ref({
@@ -304,15 +329,97 @@ const filters = ref({
 
 const keybindingStore = useKeybindingStore()
 const keybindingService = useKeybindingService()
+const presetService = useKeybindingPresetService()
+const settingStore = useSettingStore()
 const commandStore = useCommandStore()
 const dialogStore = useDialogStore()
 const { t } = useI18n()
 
+const presetNames = ref<string[]>([])
+
+async function refreshPresetList() {
+  presetNames.value = (await presetService.listPresets()) ?? []
+}
+
+async function initPresets() {
+  await refreshPresetList()
+  const currentName = settingStore.get('Comfy.Keybinding.CurrentPreset')
+  if (currentName !== 'default') {
+    const preset = await presetService.loadPreset(currentName)
+    if (preset) {
+      keybindingStore.savedPresetData = preset
+      keybindingStore.currentPresetName = currentName
+    } else {
+      await presetService.switchToDefaultPreset()
+    }
+  }
+}
+
+onMounted(() => initPresets())
+
+// "..." menu entries (teleported to header)
+async function saveAsNewPreset() {
+  await presetService.promptAndSaveNewPreset()
+  refreshPresetList()
+}
+
+async function handleDeletePreset() {
+  await presetService.deletePreset(keybindingStore.currentPresetName)
+  refreshPresetList()
+}
+
+async function handleImportPreset() {
+  await presetService.importPreset()
+  refreshPresetList()
+}
+
+const showSaveAsNew = computed(
+  () =>
+    keybindingStore.currentPresetName !== 'default' ||
+    keybindingStore.isCurrentPresetModified
+)
+
+const menuEntries = computed<MenuItem[]>(() => [
+  ...(showSaveAsNew.value
+    ? [
+        {
+          label: t('g.keybindingPresets.saveAsNewPreset'),
+          icon: 'icon-[lucide--save]',
+          command: saveAsNewPreset
+        }
+      ]
+    : []),
+  {
+    label: t('g.keybindingPresets.resetToDefault'),
+    icon: 'icon-[lucide--rotate-cw]',
+    command: () =>
+      presetService.switchPreset('default').then(() => refreshPresetList())
+  },
+  {
+    label: t('g.keybindingPresets.deletePreset'),
+    icon: 'icon-[lucide--trash-2]',
+    disabled: keybindingStore.currentPresetName === 'default',
+    command: handleDeletePreset
+  },
+  {
+    label: t('g.keybindingPresets.importPreset'),
+    icon: 'icon-[lucide--file-input]',
+    command: handleImportPreset
+  },
+  {
+    label: t('g.keybindingPresets.exportPreset'),
+    icon: 'icon-[lucide--file-output]',
+    command: () => presetService.exportPreset()
+  }
+])
+
+// Keybinding table logic
 interface ICommandData {
   id: string
   keybindings: KeybindingImpl[]
   label: string
   source?: string
+  isModified: boolean
 }
 
 const commandsData = computed<ICommandData[]>(() => {
@@ -323,7 +430,8 @@ const commandsData = computed<ICommandData[]>(() => {
       command.label ?? ''
     ),
     keybindings: keybindingStore.getKeybindingsByCommandId(command.id),
-    source: command.source
+    source: command.source,
+    isModified: keybindingStore.isCommandKeybindingModified(command.id)
   }))
 })
 

src/components/dialog/content/setting/keybinding/KeybindingPresetToolbar.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="flex items-center gap-2">
+    <Button v-if="showSaveButton" size="lg" @click="handleSavePreset">
+      {{ $t('g.keybindingPresets.saveChanges') }}
+    </Button>
+    <Select v-model="selectedPreset">
+      <SelectTrigger class="w-64">
+        <SelectValue :placeholder="$t('g.keybindingPresets.default')">
+          {{ displayLabel }}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent class="max-w-64 min-w-0 **:[[role=listbox]]:gap-1">
+        <div class="max-w-60">
+          <SelectItem
+            value="default"
+            class="max-w-60 p-2 data-[state=checked]:bg-transparent"
+          >
+            {{ $t('g.keybindingPresets.default') }}
+          </SelectItem>
+          <SelectItem
+            v-for="name in presetNames"
+            :key="name"
+            :value="name"
+            class="max-w-60 p-2 data-[state=checked]:bg-transparent"
+          >
+            {{ name }}
+          </SelectItem>
+          <hr class="h-px max-w-60 border border-border-default" />
+          <button
+            class="relative flex w-full max-w-60 cursor-pointer items-center justify-between gap-3 rounded-sm border-none bg-transparent p-2 text-sm outline-none select-none hover:bg-secondary-background-hover focus:bg-secondary-background-hover"
+            @click.stop="handleImportFromDropdown"
+          >
+            <span class="truncate">
+              {{ $t('g.keybindingPresets.importKeybindingPreset') }}
+            </span>
+            <i
+              class="icon-[lucide--file-input] shrink-0 text-base-foreground"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </SelectContent>
+    </Select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import Select from '@/components/ui/select/Select.vue'
+import SelectContent from '@/components/ui/select/SelectContent.vue'
+import SelectItem from '@/components/ui/select/SelectItem.vue'
+import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
+import SelectValue from '@/components/ui/select/SelectValue.vue'
+import { useKeybindingPresetService } from '@/platform/keybindings/presetService'
+import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
+
+const { presetNames } = defineProps<{
+  presetNames: string[]
+}>()
+
+const emit = defineEmits<{
+  'presets-changed': []
+}>()
+
+const { t } = useI18n()
+const keybindingStore = useKeybindingStore()
+const presetService = useKeybindingPresetService()
+
+const selectedPreset = ref(keybindingStore.currentPresetName)
+
+const displayLabel = computed(() => {
+  const name =
+    selectedPreset.value === 'default'
+      ? t('g.keybindingPresets.default')
+      : selectedPreset.value
+  return keybindingStore.isCurrentPresetModified ? `${name} *` : name
+})
+
+watch(selectedPreset, async (newValue) => {
+  if (newValue !== keybindingStore.currentPresetName) {
+    await presetService.switchPreset(newValue)
+    selectedPreset.value = keybindingStore.currentPresetName
+    emit('presets-changed')
+  }
+})
+
+watch(
+  () => keybindingStore.currentPresetName,
+  (name) => {
+    selectedPreset.value = name
+  }
+)
+
+const showSaveButton = computed(
+  () =>
+    keybindingStore.currentPresetName !== 'default' &&
+    keybindingStore.isCurrentPresetModified
+)
+
+async function handleSavePreset() {
+  await presetService.savePreset(keybindingStore.currentPresetName)
+}
+
+async function handleImportFromDropdown() {
+  await presetService.importPreset()
+  emit('presets-changed')
+}
+</script>

src/components/dialog/content/setting/keybinding/UnsavedChangesContent.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="flex w-full max-w-[420px] flex-col border-t border-border-default"
+  >
+    <div class="flex flex-col gap-4 p-4">
+      <p class="m-0 text-sm text-muted-foreground">
+        {{ $t('g.keybindingPresets.unsavedChangesMessage') }}
+      </p>
+      <div class="flex justify-end gap-2">
+        <Button
+          variant="textonly"
+          class="text-muted-foreground"
+          @click="onResult(null)"
+        >
+          {{ $t('g.cancel') }}
+        </Button>
+        <Button
+          variant="secondary"
+          class="bg-secondary-background"
+          @click="onResult(false)"
+        >
+          {{ $t('g.keybindingPresets.discardAndSwitch') }}
+        </Button>
+        <Button
+          variant="secondary"
+          class="bg-base-foreground text-base-background"
+          @click="onResult(true)"
+        >
+          {{ $t('g.keybindingPresets.saveAndSwitch') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+const { onResult } = defineProps<{
+  onResult: (result: boolean | null) => void
+}>()
+</script>

src/components/dialog/content/setting/keybinding/UnsavedChangesHeader.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex w-full items-center p-4">
+    <p class="m-0 text-sm font-medium">
+      {{ $t('g.keybindingPresets.unsavedChangesTo', { name: presetName }) }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { presetName } = defineProps<{
+  presetName: string
+}>()
+</script>

src/components/graph/GraphCanvas.vue

@@ -97,6 +97,7 @@
 
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
+  <VueNodeSwitchPopup />
 
   <!-- Initialize components after comfyApp is ready. useAbsolutePosition requires
   canvasStore.canvas to be initialized. -->
@@ -128,6 +129,7 @@ import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitter
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
 import AppBuilder from '@/components/builder/AppBuilder.vue'
+import VueNodeSwitchPopup from '@/components/builder/VueNodeSwitchPopup.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'

src/components/helpcenter/HelpCenterPopups.vue

@@ -17,11 +17,7 @@
   <!-- Release Notification Toast positioned within canvas area -->
   <Teleport to="#graph-canvas-container">
     <ReleaseNotificationToast
-      :class="{
-        'sidebar-left': sidebarLocation === 'left',
-        'sidebar-right': sidebarLocation === 'right',
-        'small-sidebar': isSmall
-      }"
+      :position="sidebarLocation === 'right' ? 'bottom-right' : 'bottom-left'"
     />
   </Teleport>
 

src/components/sidebar/tabs/queue/ResultAudio.vue

@@ -1,19 +1,21 @@
 <template>
-  <audio controls width="100%" height="100%">
-    <source :src="url" :type="htmlAudioType" />
-    {{ $t('g.audioFailedToLoad') }}
-  </audio>
+  <div
+    class="m-auto w-[min(90vw,42rem)] rounded-2xl bg-base-background/80 p-8 backdrop-blur-sm"
+  >
+    <WaveAudioPlayer
+      :src="result.url"
+      variant="expanded"
+      :height="120"
+      :bar-count="80"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
+import WaveAudioPlayer from '@/components/common/WaveAudioPlayer.vue'
 import type { ResultItemImpl } from '@/stores/queueStore'
 
-const { result } = defineProps<{
+defineProps<{
   result: ResultItemImpl
 }>()
-
-const url = computed(() => result.url)
-const htmlAudioType = computed(() => result.htmlAudioType)
 </script>

src/components/ui/button/button.variants.ts

@@ -19,6 +19,7 @@ export const buttonVariants = cva({
         'bg-transparent text-muted-foreground hover:bg-secondary-background-hover',
       'destructive-textonly':
         'bg-transparent text-destructive-background hover:bg-destructive-background/10',
+      link: 'bg-transparent text-muted-foreground hover:text-base-foreground',
       'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
       base: 'bg-base-background text-base-foreground hover:bg-secondary-background-hover',
       gradient:
@@ -51,6 +52,7 @@ const variants = [
   'textonly',
   'muted-textonly',
   'destructive-textonly',
+  'link',
   'base',
   'overlay-white',
   'gradient'

src/composables/useTransformCompatOverlayProps.ts

@@ -1,5 +1,6 @@
 import type { HintedString } from '@primevue/core'
-import { computed } from 'vue'
+import type { InjectionKey } from 'vue'
+import { computed, inject } from 'vue'
 
 /**
  * Options for configuring transform-compatible overlay props
@@ -15,6 +16,10 @@ interface TransformCompatOverlayOptions {
   // autoZIndex?: boolean
 }
 
+export const OverlayAppendToKey: InjectionKey<
+  HintedString<'body' | 'self'> | undefined | HTMLElement
+> = Symbol('OverlayAppendTo')
+
 /**
  * Composable that provides props to make PrimeVue overlay components
  * compatible with CSS-transformed parent elements.
@@ -41,8 +46,10 @@ interface TransformCompatOverlayOptions {
 export function useTransformCompatOverlayProps(
   overrides: TransformCompatOverlayOptions = {}
 ) {
+  const injectedAppendTo = inject(OverlayAppendToKey, undefined)
+
   return computed(() => ({
-    appendTo: 'self' as const,
+    appendTo: injectedAppendTo ?? ('self' as const),
     ...overrides
   }))
 }

src/composables/useWaveAudioPlayer.test.ts

@@ -0,0 +1,130 @@
+import { ref } from 'vue'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { useWaveAudioPlayer } from './useWaveAudioPlayer'
+
+vi.mock('@vueuse/core', async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>()
+  return {
+    ...actual,
+    useMediaControls: () => ({
+      playing: ref(false),
+      currentTime: ref(0),
+      duration: ref(0)
+    })
+  }
+})
+
+const mockFetchApi = vi.fn()
+const originalAudioContext = globalThis.AudioContext
+
+afterEach(() => {
+  globalThis.AudioContext = originalAudioContext
+  mockFetchApi.mockReset()
+})
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    apiURL: (route: string) => '/api' + route,
+    fetchApi: (...args: unknown[]) => mockFetchApi(...args)
+  }
+}))
+
+describe('useWaveAudioPlayer', () => {
+  it('initializes with default bar count', () => {
+    const src = ref('')
+    const { bars } = useWaveAudioPlayer({ src })
+    expect(bars.value).toHaveLength(40)
+  })
+
+  it('initializes with custom bar count', () => {
+    const src = ref('')
+    const { bars } = useWaveAudioPlayer({ src, barCount: 20 })
+    expect(bars.value).toHaveLength(20)
+  })
+
+  it('returns playedBarIndex as -1 when duration is 0', () => {
+    const src = ref('')
+    const { playedBarIndex } = useWaveAudioPlayer({ src })
+    expect(playedBarIndex.value).toBe(-1)
+  })
+
+  it('generates bars with heights between 10 and 70', () => {
+    const src = ref('')
+    const { bars } = useWaveAudioPlayer({ src })
+    for (const bar of bars.value) {
+      expect(bar.height).toBeGreaterThanOrEqual(10)
+      expect(bar.height).toBeLessThanOrEqual(70)
+    }
+  })
+
+  it('starts in paused state', () => {
+    const src = ref('')
+    const { isPlaying } = useWaveAudioPlayer({ src })
+    expect(isPlaying.value).toBe(false)
+  })
+
+  it('shows 0:00 for formatted times initially', () => {
+    const src = ref('')
+    const { formattedCurrentTime, formattedDuration } = useWaveAudioPlayer({
+      src
+    })
+    expect(formattedCurrentTime.value).toBe('0:00')
+    expect(formattedDuration.value).toBe('0:00')
+  })
+
+  it('fetches and decodes audio when src changes', async () => {
+    const mockAudioBuffer = {
+      getChannelData: vi.fn(() => new Float32Array(80))
+    }
+
+    const mockDecodeAudioData = vi.fn(() => Promise.resolve(mockAudioBuffer))
+    const mockClose = vi.fn().mockResolvedValue(undefined)
+    globalThis.AudioContext = class {
+      decodeAudioData = mockDecodeAudioData
+      close = mockClose
+    } as unknown as typeof AudioContext
+
+    mockFetchApi.mockResolvedValue({
+      ok: true,
+      arrayBuffer: () => Promise.resolve(new ArrayBuffer(8)),
+      headers: { get: () => 'audio/wav' }
+    })
+
+    const src = ref('/api/view?filename=audio.wav&type=output')
+    const { bars, loading } = useWaveAudioPlayer({ src, barCount: 10 })
+
+    await vi.waitFor(() => {
+      expect(loading.value).toBe(false)
+    })
+
+    expect(mockFetchApi).toHaveBeenCalledWith(
+      '/view?filename=audio.wav&type=output'
+    )
+    expect(mockDecodeAudioData).toHaveBeenCalled()
+    expect(bars.value).toHaveLength(10)
+  })
+
+  it('clears blobUrl and shows placeholder bars when fetch fails', async () => {
+    mockFetchApi.mockRejectedValue(new Error('Network error'))
+
+    const src = ref('/api/view?filename=audio.wav&type=output')
+    const { bars, loading, audioSrc } = useWaveAudioPlayer({
+      src,
+      barCount: 10
+    })
+
+    await vi.waitFor(() => {
+      expect(loading.value).toBe(false)
+    })
+
+    expect(bars.value).toHaveLength(10)
+    expect(audioSrc.value).toBe('/api/view?filename=audio.wav&type=output')
+  })
+
+  it('does not call decodeAudioSource when src is empty', () => {
+    const src = ref('')
+    useWaveAudioPlayer({ src })
+    expect(mockFetchApi).not.toHaveBeenCalled()
+  })
+})

src/composables/useWaveAudioPlayer.ts

@@ -0,0 +1,205 @@
+import { useMediaControls, whenever } from '@vueuse/core'
+import { computed, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import { api } from '@/scripts/api'
+import { formatTime } from '@/utils/formatUtil'
+
+interface WaveformBar {
+  height: number
+}
+
+interface UseWaveAudioPlayerOptions {
+  src: Ref<string>
+  barCount?: number
+}
+
+export function useWaveAudioPlayer(options: UseWaveAudioPlayerOptions) {
+  const { src, barCount = 40 } = options
+
+  const audioRef = ref<HTMLAudioElement>()
+  const waveformRef = ref<HTMLElement>()
+  const blobUrl = ref<string>()
+  const loading = ref(false)
+  let decodeRequestId = 0
+  const bars = ref<WaveformBar[]>(generatePlaceholderBars())
+
+  const { playing, currentTime, duration, volume, muted } =
+    useMediaControls(audioRef)
+
+  const playedBarIndex = computed(() => {
+    if (duration.value === 0) return -1
+    return Math.floor((currentTime.value / duration.value) * barCount) - 1
+  })
+
+  const formattedCurrentTime = computed(() => formatTime(currentTime.value))
+  const formattedDuration = computed(() => formatTime(duration.value))
+
+  const audioSrc = computed(() =>
+    src.value ? (blobUrl.value ?? src.value) : ''
+  )
+
+  function generatePlaceholderBars(): WaveformBar[] {
+    return Array.from({ length: barCount }, () => ({
+      height: Math.random() * 60 + 10
+    }))
+  }
+
+  function generateBarsFromBuffer(buffer: AudioBuffer) {
+    const channelData = buffer.getChannelData(0)
+    if (channelData.length === 0) {
+      bars.value = generatePlaceholderBars()
+      return
+    }
+
+    const averages: number[] = []
+    for (let i = 0; i < barCount; i++) {
+      const start = Math.floor((i * channelData.length) / barCount)
+      const end = Math.max(
+        start + 1,
+        Math.floor(((i + 1) * channelData.length) / barCount)
+      )
+      let sum = 0
+      for (let j = start; j < end && j < channelData.length; j++) {
+        sum += Math.abs(channelData[j])
+      }
+      averages.push(sum / (end - start))
+    }
+
+    const peak = Math.max(...averages) || 1
+    bars.value = averages.map((avg) => ({
+      height: Math.max(8, (avg / peak) * 100)
+    }))
+  }
+
+  async function decodeAudioSource(url: string) {
+    const requestId = ++decodeRequestId
+    loading.value = true
+    let ctx: AudioContext | undefined
+    try {
+      const apiBase = api.apiURL('/')
+      const route = url.includes(apiBase)
+        ? url.slice(url.indexOf(apiBase) + api.apiURL('').length)
+        : url
+      const response = await api.fetchApi(route)
+      if (requestId !== decodeRequestId) return
+      if (!response.ok) {
+        throw new Error(`Failed to fetch audio (${response.status})`)
+      }
+      const arrayBuffer = await response.arrayBuffer()
+
+      if (requestId !== decodeRequestId) return
+
+      const blob = new Blob([arrayBuffer.slice(0)], {
+        type: response.headers.get('content-type') ?? 'audio/wav'
+      })
+      if (blobUrl.value) URL.revokeObjectURL(blobUrl.value)
+      blobUrl.value = URL.createObjectURL(blob)
+
+      ctx = new AudioContext()
+      const audioBuffer = await ctx.decodeAudioData(arrayBuffer)
+      if (requestId !== decodeRequestId) return
+      generateBarsFromBuffer(audioBuffer)
+    } catch {
+      if (requestId === decodeRequestId) {
+        if (blobUrl.value) {
+          URL.revokeObjectURL(blobUrl.value)
+          blobUrl.value = undefined
+        }
+        bars.value = generatePlaceholderBars()
+      }
+    } finally {
+      await ctx?.close()
+      if (requestId === decodeRequestId) {
+        loading.value = false
+      }
+    }
+  }
+
+  const progressRatio = computed(() => {
+    if (duration.value === 0) return 0
+    return (currentTime.value / duration.value) * 100
+  })
+
+  function togglePlayPause() {
+    playing.value = !playing.value
+  }
+
+  function seekToStart() {
+    currentTime.value = 0
+  }
+
+  function seekToEnd() {
+    currentTime.value = duration.value
+    playing.value = false
+  }
+
+  function seekToRatio(ratio: number) {
+    const clamped = Math.max(0, Math.min(1, ratio))
+    currentTime.value = clamped * duration.value
+  }
+
+  function toggleMute() {
+    muted.value = !muted.value
+  }
+
+  const volumeIcon = computed(() => {
+    if (muted.value || volume.value === 0) return 'icon-[lucide--volume-x]'
+    if (volume.value < 0.5) return 'icon-[lucide--volume-1]'
+    return 'icon-[lucide--volume-2]'
+  })
+
+  function handleWaveformClick(event: MouseEvent) {
+    if (!waveformRef.value || duration.value === 0) return
+    const rect = waveformRef.value.getBoundingClientRect()
+    const ratio = Math.max(
+      0,
+      Math.min(1, (event.clientX - rect.left) / rect.width)
+    )
+    currentTime.value = ratio * duration.value
+
+    if (!playing.value) {
+      playing.value = true
+    }
+  }
+
+  whenever(
+    src,
+    (url) => {
+      playing.value = false
+      currentTime.value = 0
+      void decodeAudioSource(url)
+    },
+    { immediate: true }
+  )
+
+  onUnmounted(() => {
+    decodeRequestId += 1
+    audioRef.value?.pause()
+    if (blobUrl.value) {
+      URL.revokeObjectURL(blobUrl.value)
+      blobUrl.value = undefined
+    }
+  })
+
+  return {
+    audioRef,
+    waveformRef,
+    audioSrc,
+    bars,
+    loading,
+    isPlaying: playing,
+    playedBarIndex,
+    progressRatio,
+    formattedCurrentTime,
+    formattedDuration,
+    togglePlayPause,
+    seekToStart,
+    seekToEnd,
+    volume,
+    volumeIcon,
+    toggleMute,
+    seekToRatio,
+    handleWaveformClick
+  }
+}

src/extensions/core/clipspace.ts

@@ -2,7 +2,7 @@ import { app } from '../../scripts/app'
 import { ComfyApp } from '../../scripts/app'
 import { $el, ComfyDialog } from '../../scripts/ui'
 
-export class ClipspaceDialog extends ComfyDialog {
+class ClipspaceDialog extends ComfyDialog {
   static items: Array<
     HTMLButtonElement & {
       contextPredicate?: () => boolean

src/lib/litegraph/src/LGraph.test.ts

@@ -18,6 +18,11 @@ import {
   createTestSubgraphNode
 } from './subgraph/__fixtures__/subgraphHelpers'
 
+import {
+  duplicateLinksRoot,
+  duplicateLinksSlotShift,
+  duplicateLinksSubgraph
+} from './__fixtures__/duplicateLinks'
 import { duplicateSubgraphNodeIds } from './__fixtures__/duplicateSubgraphNodeIds'
 import { nestedSubgraphProxyWidgets } from './__fixtures__/nestedSubgraphProxyWidgets'
 import { nodeIdSpaceExhausted } from './__fixtures__/nodeIdSpaceExhausted'
@@ -560,31 +565,39 @@ describe('_removeDuplicateLinks', () => {
     LiteGraph.registerNodeType('test/DupTestNode', TestNode)
   }
 
-  it('removes orphaned duplicate links from _links and output.links', () => {
+  function createConnectedGraph() {
     registerTestNodes()
     const graph = new LGraph()
-
     const source = LiteGraph.createNode('test/DupTestNode', 'Source')!
     const target = LiteGraph.createNode('test/DupTestNode', 'Target')!
     graph.add(source)
     graph.add(target)
-
     source.connect(0, target, 0)
-    expect(graph._links.size).toBe(1)
+    return { graph, source, target }
+  }
 
-    const existingLink = graph._links.values().next().value!
-    for (let i = 0; i < 3; i++) {
-      const dupLink = new LLink(
-        ++graph.state.lastLinkId,
-        existingLink.type,
-        existingLink.origin_id,
-        existingLink.origin_slot,
-        existingLink.target_id,
-        existingLink.target_slot
-      )
-      graph._links.set(dupLink.id, dupLink)
-      source.outputs[0].links!.push(dupLink.id)
-    }
+  function injectDuplicateLink(
+    graph: LGraph,
+    source: LGraphNode,
+    target: LGraphNode
+  ) {
+    const dup = new LLink(
+      ++graph.state.lastLinkId,
+      'number',
+      source.id,
+      0,
+      target.id,
+      0
+    )
+    graph._links.set(dup.id, dup)
+    source.outputs[0].links!.push(dup.id)
+    return dup
+  }
+
+  it('removes orphaned duplicate links from _links and output.links', () => {
+    const { graph, source, target } = createConnectedGraph()
+
+    for (let i = 0; i < 3; i++) injectDuplicateLink(graph, source, target)
 
     expect(graph._links.size).toBe(4)
     expect(source.outputs[0].links).toHaveLength(4)
@@ -597,27 +610,10 @@ describe('_removeDuplicateLinks', () => {
   })
 
   it('keeps the link referenced by input.link', () => {
-    registerTestNodes()
-    const graph = new LGraph()
-
-    const source = LiteGraph.createNode('test/DupTestNode', 'Source')!
-    const target = LiteGraph.createNode('test/DupTestNode', 'Target')!
-    graph.add(source)
-    graph.add(target)
-
-    source.connect(0, target, 0)
+    const { graph, source, target } = createConnectedGraph()
     const keptLinkId = target.inputs[0].link!
 
-    const dupLink = new LLink(
-      ++graph.state.lastLinkId,
-      'number',
-      source.id,
-      0,
-      target.id,
-      0
-    )
-    graph._links.set(dupLink.id, dupLink)
-    source.outputs[0].links!.push(dupLink.id)
+    const dupLink = injectDuplicateLink(graph, source, target)
 
     graph._removeDuplicateLinks()
 
@@ -628,18 +624,8 @@ describe('_removeDuplicateLinks', () => {
   })
 
   it('keeps the valid link when input.link is at a shifted slot index', () => {
-    LiteGraph.registerNodeType('test/DupTestNode', TestNode)
-    const graph = new LGraph()
-
-    const source = LiteGraph.createNode('test/DupTestNode', 'Source')!
-    const target = LiteGraph.createNode('test/DupTestNode', 'Target')!
-    graph.add(source)
-    graph.add(target)
-
-    // Connect source:0 -> target:0, establishing input.link on target
-    source.connect(0, target, 0)
+    const { graph, source, target } = createConnectedGraph()
     const validLinkId = target.inputs[0].link!
-    expect(graph._links.has(validLinkId)).toBe(true)
 
     // Simulate widget-to-input conversion shifting the slot: insert a new
     // input BEFORE the connected one, moving it from index 0 to index 1.
@@ -647,26 +633,13 @@ describe('_removeDuplicateLinks', () => {
     const connectedInput = target.inputs[0]
     target.inputs[0] = target.inputs[1]
     target.inputs[1] = connectedInput
-    // Now target.inputs[1].link === validLinkId, but target.inputs[0].link is null
 
-    // Add a duplicate link with the same connection tuple (target_slot=0
-    // in the LLink, matching the original slot before the shift).
-    const dupLink = new LLink(
-      ++graph.state.lastLinkId,
-      'number',
-      source.id,
-      0,
-      target.id,
-      0
-    )
-    graph._links.set(dupLink.id, dupLink)
-    source.outputs[0].links!.push(dupLink.id)
+    const dupLink = injectDuplicateLink(graph, source, target)
 
     expect(graph._links.size).toBe(2)
 
     graph._removeDuplicateLinks()
 
-    // The valid link (referenced by an actual input) must survive
     expect(graph._links.size).toBe(1)
     expect(graph._links.has(validLinkId)).toBe(true)
     expect(graph._links.has(dupLink.id)).toBe(false)
@@ -674,50 +647,22 @@ describe('_removeDuplicateLinks', () => {
   })
 
   it('repairs input.link when it points to a removed duplicate', () => {
-    LiteGraph.registerNodeType('test/DupTestNode', TestNode)
-    const graph = new LGraph()
-
-    const source = LiteGraph.createNode('test/DupTestNode', 'Source')!
-    const target = LiteGraph.createNode('test/DupTestNode', 'Target')!
-    graph.add(source)
-    graph.add(target)
-
-    source.connect(0, target, 0)
-
-    // Create a duplicate link
-    const dupLink = new LLink(
-      ++graph.state.lastLinkId,
-      'number',
-      source.id,
-      0,
-      target.id,
-      0
-    )
-    graph._links.set(dupLink.id, dupLink)
-    source.outputs[0].links!.push(dupLink.id)
+    const { graph, source, target } = createConnectedGraph()
 
+    const dupLink = injectDuplicateLink(graph, source, target)
     // Point input.link to the duplicate (simulating corrupted state)
     target.inputs[0].link = dupLink.id
 
     graph._removeDuplicateLinks()
 
     expect(graph._links.size).toBe(1)
-    // input.link must point to whichever link survived
     const survivingId = graph._links.keys().next().value!
     expect(target.inputs[0].link).toBe(survivingId)
     expect(graph._links.has(target.inputs[0].link!)).toBe(true)
   })
 
   it('is a no-op when no duplicates exist', () => {
-    registerTestNodes()
-    const graph = new LGraph()
-
-    const source = LiteGraph.createNode('test/DupTestNode', 'Source')!
-    const target = LiteGraph.createNode('test/DupTestNode', 'Target')!
-    graph.add(source)
-    graph.add(target)
-
-    source.connect(0, target, 0)
+    const { graph } = createConnectedGraph()
     const linksBefore = graph._links.size
 
     graph._removeDuplicateLinks()
@@ -738,29 +683,56 @@ describe('_removeDuplicateLinks', () => {
     subgraph.add(target)
 
     source.connect(0, target, 0)
-    expect(subgraph._links.size).toBe(1)
 
-    const existingLink = subgraph._links.values().next().value!
-    for (let i = 0; i < 3; i++) {
-      const dup = new LLink(
-        ++subgraph.state.lastLinkId,
-        existingLink.type,
-        existingLink.origin_id,
-        existingLink.origin_slot,
-        existingLink.target_id,
-        existingLink.target_slot
-      )
-      subgraph._links.set(dup.id, dup)
-      source.outputs[0].links!.push(dup.id)
-    }
+    for (let i = 0; i < 3; i++) injectDuplicateLink(subgraph, source, target)
     expect(subgraph._links.size).toBe(4)
 
-    // Serialize and reconfigure - should clean up during configure
     const serialized = subgraph.asSerialisable()
     subgraph.configure(serialized as never)
 
     expect(subgraph._links.size).toBe(1)
   })
+
+  it('removes duplicate links via root graph configure()', () => {
+    registerTestNodes()
+    const graph = new LGraph()
+    graph.configure(duplicateLinksRoot)
+
+    expect(graph._links.size).toBe(1)
+    const survivingLink = graph._links.values().next().value!
+    const targetNode = graph.getNodeById(survivingLink.target_id)!
+    expect(targetNode.inputs[0].link).toBe(survivingLink.id)
+    const sourceNode = graph.getNodeById(survivingLink.origin_id)!
+    expect(sourceNode.outputs[0].links).toEqual([survivingLink.id])
+  })
+
+  it('preserves link integrity after configure() with slot-shifted duplicates', () => {
+    registerTestNodes()
+    const graph = new LGraph()
+    graph.configure(duplicateLinksSlotShift)
+
+    expect(graph._links.size).toBe(1)
+
+    const link = graph._links.values().next().value!
+    const target = graph.getNodeById(link.target_id)!
+    const linkedInput = target.inputs.find((inp) => inp.link === link.id)
+    expect(linkedInput).toBeDefined()
+
+    const source = graph.getNodeById(link.origin_id)!
+    expect(source.outputs[link.origin_slot].links).toContain(link.id)
+  })
+
+  it('deduplicates links inside subgraph definitions during root configure()', () => {
+    const graph = new LGraph()
+    graph.configure(duplicateLinksSubgraph)
+
+    const subgraph = graph.subgraphs.values().next().value!
+    expect(subgraph._links.size).toBe(1)
+
+    const link = subgraph._links.values().next().value!
+    const target = subgraph.getNodeById(link.target_id)!
+    expect(target.inputs[0].link).toBe(link.id)
+  })
 })
 
 describe('Subgraph Unpacking', () => {
@@ -790,6 +762,21 @@ describe('Subgraph Unpacking', () => {
     return rootGraph.createSubgraph(createTestSubgraphData())
   }
 
+  function duplicateExistingLink(graph: LGraph, source: LGraphNode) {
+    const existingLink = graph._links.values().next().value!
+    const dup = new LLink(
+      ++graph.state.lastLinkId,
+      existingLink.type,
+      existingLink.origin_id,
+      existingLink.origin_slot,
+      existingLink.target_id,
+      existingLink.target_slot
+    )
+    graph._links.set(dup.id, dup)
+    source.outputs[0].links!.push(dup.id)
+    return dup
+  }
+
   it('deduplicates links when unpacking subgraph with duplicate links', () => {
     registerTestNodes()
     const rootGraph = new LGraph()
@@ -800,24 +787,9 @@ describe('Subgraph Unpacking', () => {
     subgraph.add(sourceNode)
     subgraph.add(targetNode)
 
-    // Create a legitimate link
     sourceNode.connect(0, targetNode, 0)
-    expect(subgraph._links.size).toBe(1)
 
-    // Manually add duplicate links (simulating the bug)
-    const existingLink = subgraph._links.values().next().value!
-    for (let i = 0; i < 3; i++) {
-      const dupLink = new LLink(
-        ++subgraph.state.lastLinkId,
-        existingLink.type,
-        existingLink.origin_id,
-        existingLink.origin_slot,
-        existingLink.target_id,
-        existingLink.target_slot
-      )
-      subgraph._links.set(dupLink.id, dupLink)
-      sourceNode.outputs[0].links!.push(dupLink.id)
-    }
+    for (let i = 0; i < 3; i++) duplicateExistingLink(subgraph, sourceNode)
     expect(subgraph._links.size).toBe(4)
 
     const subgraphNode = createTestSubgraphNode(subgraph, { pos: [100, 100] })
@@ -839,21 +811,8 @@ describe('Subgraph Unpacking', () => {
     subgraph.add(sourceNode)
     subgraph.add(targetNode)
 
-    // Connect source output 0 → target input 0
     sourceNode.connect(0, targetNode, 0)
-
-    // Add duplicate links to the same connection
-    const existingLink = subgraph._links.values().next().value!
-    const dupLink = new LLink(
-      ++subgraph.state.lastLinkId,
-      existingLink.type,
-      existingLink.origin_id,
-      existingLink.origin_slot,
-      existingLink.target_id,
-      existingLink.target_slot
-    )
-    subgraph._links.set(dupLink.id, dupLink)
-    sourceNode.outputs[0].links!.push(dupLink.id)
+    duplicateExistingLink(subgraph, sourceNode)
 
     const subgraphNode = createTestSubgraphNode(subgraph, { pos: [100, 100] })
     rootGraph.add(subgraphNode)

src/lib/litegraph/src/LGraph.ts

@@ -13,6 +13,13 @@ import { usePromotionStore } from '@/stores/promotionStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { forEachNode } from '@/utils/graphTraversalUtil'
 
+import {
+  groupLinksByTuple,
+  purgeOrphanedLinks,
+  repairInputLinks,
+  selectSurvivorLink
+} from './linkDeduplication'
+
 import type { DragAndScaleState } from './DragAndScale'
 import { LGraphCanvas } from './LGraphCanvas'
 import { LGraphGroup } from './LGraphGroup'
@@ -168,11 +175,6 @@ export class LGraph
   static STATUS_STOPPED = 1
   static STATUS_RUNNING = 2
 
-  /** Generates a unique string key for a link's connection tuple. */
-  static _linkTupleKey(link: LLink): string {
-    return `${link.origin_id}\0${link.origin_slot}\0${link.target_id}\0${link.target_slot}`
-  }
-
   /** List of LGraph properties that are manually handled by {@link LGraph.configure}. */
   static readonly ConfigureProperties = new Set([
     'nodes',
@@ -1626,68 +1628,21 @@ export class LGraph
    * (origin_id, origin_slot, target_id, target_slot). Keeps the link
    * referenced by input.link and removes orphaned duplicates from
    * output.links and the graph's _links map.
+   *
+   * Three phases: group links by tuple, select the survivor, purge duplicates.
    */
   _removeDuplicateLinks(): void {
-    // Group all link IDs by their connection tuple.
-    const groups = new Map<string, LinkId[]>()
-    for (const [id, link] of this._links) {
-      const key = LGraph._linkTupleKey(link)
-      let group = groups.get(key)
-      if (!group) {
-        group = []
-        groups.set(key, group)
-      }
-      group.push(id)
-    }
+    const groups = groupLinksByTuple(this._links)
 
-    for (const [, ids] of groups) {
+    for (const ids of groups.values()) {
       if (ids.length <= 1) continue
 
       const sampleLink = this._links.get(ids[0])!
       const node = this.getNodeById(sampleLink.target_id)
+      const keepId = selectSurvivorLink(ids, node)
 
-      // Find which link ID is actually referenced by any input on the target
-      // node. Cannot rely on target_slot index because widget-to-input
-      // conversions during configure() can shift slot indices.
-      let keepId: LinkId | undefined
-      if (node) {
-        for (const input of node.inputs ?? []) {
-          const match = ids.find((id) => input.link === id)
-          if (match != null) {
-            keepId = match
-            break
-          }
-        }
-      }
-      keepId ??= ids[0]
-
-      for (const id of ids) {
-        if (id === keepId) continue
-
-        const link = this._links.get(id)
-        if (!link) continue
-
-        // Remove from origin node's output.links array
-        const originNode = this.getNodeById(link.origin_id)
-        if (originNode) {
-          const output = originNode.outputs?.[link.origin_slot]
-          if (output?.links) {
-            const idx = output.links.indexOf(id)
-            if (idx !== -1) output.links.splice(idx, 1)
-          }
-        }
-
-        this._links.delete(id)
-      }
-
-      // Ensure input.link points to the surviving link
-      if (node) {
-        for (const input of node.inputs ?? []) {
-          if (ids.includes(input.link as LinkId) && input.link !== keepId) {
-            input.link = keepId
-          }
-        }
-      }
+      purgeOrphanedLinks(ids, keepId, this._links, (id) => this.getNodeById(id))
+      repairInputLinks(ids, keepId, node)
     }
   }
 

src/lib/litegraph/src/__fixtures__/duplicateLinks.ts

@@ -0,0 +1,240 @@
+import type { SerialisableGraph } from '@/lib/litegraph/src/types/serialisation'
+
+/**
+ * Root graph with two nodes (Source, Target) connected by one valid link
+ * plus two duplicate links sharing the same connection tuple.
+ * Tests that configure() deduplicates to a single link.
+ */
+export const duplicateLinksRoot: SerialisableGraph = {
+  id: 'dd000000-0000-4000-8000-000000000001',
+  version: 1,
+  revision: 0,
+  state: {
+    lastNodeId: 2,
+    lastLinkId: 3,
+    lastGroupId: 0,
+    lastRerouteId: 0
+  },
+  nodes: [
+    {
+      id: 1,
+      type: 'test/DupTestNode',
+      pos: [0, 0],
+      size: [200, 100],
+      flags: {},
+      order: 0,
+      mode: 0,
+      inputs: [{ name: 'input_0', type: 'number', link: null }],
+      outputs: [{ name: 'output_0', type: 'number', links: [1, 2, 3] }],
+      properties: {}
+    },
+    {
+      id: 2,
+      type: 'test/DupTestNode',
+      pos: [300, 0],
+      size: [200, 100],
+      flags: {},
+      order: 1,
+      mode: 0,
+      inputs: [{ name: 'input_0', type: 'number', link: 1 }],
+      outputs: [{ name: 'output_0', type: 'number', links: [] }],
+      properties: {}
+    }
+  ],
+  links: [
+    {
+      id: 1,
+      origin_id: 1,
+      origin_slot: 0,
+      target_id: 2,
+      target_slot: 0,
+      type: 'number'
+    },
+    {
+      id: 2,
+      origin_id: 1,
+      origin_slot: 0,
+      target_id: 2,
+      target_slot: 0,
+      type: 'number'
+    },
+    {
+      id: 3,
+      origin_id: 1,
+      origin_slot: 0,
+      target_id: 2,
+      target_slot: 0,
+      type: 'number'
+    }
+  ]
+}
+
+/**
+ * Root graph with slot-shifted duplicates. Target node has an extra input
+ * (simulating widget-to-input conversion) that shifts the connected input
+ * from slot 0 to slot 1. Link 1 is valid (referenced by input.link),
+ * link 2 is a duplicate with the original (pre-shift) target_slot.
+ */
+export const duplicateLinksSlotShift: SerialisableGraph = {
+  id: 'dd000000-0000-4000-8000-000000000002',
+  version: 1,
+  revision: 0,
+  state: {
+    lastNodeId: 2,
+    lastLinkId: 2,
+    lastGroupId: 0,
+    lastRerouteId: 0
+  },
+  nodes: [
+    {
+      id: 1,
+      type: 'test/DupTestNode',
+      pos: [0, 0],
+      size: [200, 100],
+      flags: {},
+      order: 0,
+      mode: 0,
+      inputs: [{ name: 'input_0', type: 'number', link: null }],
+      outputs: [{ name: 'output_0', type: 'number', links: [1, 2] }],
+      properties: {}
+    },
+    {
+      id: 2,
+      type: 'test/DupTestNode',
+      pos: [300, 0],
+      size: [200, 100],
+      flags: {},
+      order: 1,
+      mode: 0,
+      inputs: [
+        { name: 'extra_widget', type: 'number', link: null },
+        { name: 'input_0', type: 'number', link: 1 }
+      ],
+      outputs: [{ name: 'output_0', type: 'number', links: [] }],
+      properties: {}
+    }
+  ],
+  links: [
+    {
+      id: 1,
+      origin_id: 1,
+      origin_slot: 0,
+      target_id: 2,
+      target_slot: 0,
+      type: 'number'
+    },
+    {
+      id: 2,
+      origin_id: 1,
+      origin_slot: 0,
+      target_id: 2,
+      target_slot: 0,
+      type: 'number'
+    }
+  ]
+}
+
+/**
+ * Root graph containing a SubgraphNode whose subgraph definition has
+ * duplicate links. Tests that configure() deduplicates links inside
+ * subgraph definitions during root-level configure.
+ */
+export const duplicateLinksSubgraph: SerialisableGraph = {
+  id: 'dd000000-0000-4000-8000-000000000003',
+  version: 1,
+  revision: 0,
+  state: {
+    lastNodeId: 1,
+    lastLinkId: 0,
+    lastGroupId: 0,
+    lastRerouteId: 0
+  },
+  nodes: [
+    {
+      id: 1,
+      type: 'dd111111-1111-4111-8111-111111111111',
+      pos: [0, 0],
+      size: [200, 100],
+      flags: {},
+      order: 0,
+      mode: 0,
+      properties: {}
+    }
+  ],
+  definitions: {
+    subgraphs: [
+      {
+        id: 'dd111111-1111-4111-8111-111111111111',
+        version: 1,
+        revision: 0,
+        state: {
+          lastNodeId: 2,
+          lastLinkId: 3,
+          lastGroupId: 0,
+          lastRerouteId: 0
+        },
+        name: 'Subgraph With Duplicates',
+        config: {},
+        inputNode: { id: -10, bounding: [0, 100, 120, 60] },
+        outputNode: { id: -20, bounding: [500, 100, 120, 60] },
+        inputs: [],
+        outputs: [],
+        widgets: [],
+        nodes: [
+          {
+            id: 1,
+            type: 'test/Source',
+            pos: [100, 100],
+            size: [200, 100],
+            flags: {},
+            order: 0,
+            mode: 0,
+            inputs: [],
+            outputs: [{ name: 'out', type: 'number', links: [1, 2, 3] }],
+            properties: {}
+          },
+          {
+            id: 2,
+            type: 'test/Target',
+            pos: [400, 100],
+            size: [200, 100],
+            flags: {},
+            order: 1,
+            mode: 0,
+            inputs: [{ name: 'in', type: 'number', link: 1 }],
+            outputs: [],
+            properties: {}
+          }
+        ],
+        groups: [],
+        links: [
+          {
+            id: 1,
+            origin_id: 1,
+            origin_slot: 0,
+            target_id: 2,
+            target_slot: 0,
+            type: 'number'
+          },
+          {
+            id: 2,
+            origin_id: 1,
+            origin_slot: 0,
+            target_id: 2,
+            target_slot: 0,
+            type: 'number'
+          },
+          {
+            id: 3,
+            origin_id: 1,
+            origin_slot: 0,
+            target_id: 2,
+            target_slot: 0,
+            type: 'number'
+          }
+        ],
+        extra: {}
+      }
+    ]
+  }
+}

src/lib/litegraph/src/linkDeduplication.ts

@@ -0,0 +1,82 @@
+import type { LGraphNode, NodeId } from './LGraphNode'
+import type { LLink, LinkId } from './LLink'
+
+/** Generates a unique string key for a link's connection tuple. */
+function linkTupleKey(link: LLink): string {
+  return `${link.origin_id}\0${link.origin_slot}\0${link.target_id}\0${link.target_slot}`
+}
+
+/** Groups all link IDs by their connection tuple key. */
+export function groupLinksByTuple(
+  links: Map<LinkId, LLink>
+): Map<string, LinkId[]> {
+  const groups = new Map<string, LinkId[]>()
+  for (const [id, link] of links) {
+    const key = linkTupleKey(link)
+    if (!groups.has(key)) groups.set(key, [])
+    groups.get(key)!.push(id)
+  }
+  return groups
+}
+
+/**
+ * Finds the link ID actually referenced by an input on the target node.
+ * Cannot rely on target_slot index because widget-to-input conversions
+ * during configure() can shift slot indices.
+ */
+export function selectSurvivorLink(
+  ids: LinkId[],
+  node: LGraphNode | null
+): LinkId {
+  if (!node) return ids[0]
+
+  for (const input of node.inputs ?? []) {
+    if (!input) continue
+    const match = ids.find((id) => input.link === id)
+    if (match != null) return match
+  }
+  return ids[0]
+}
+
+/** Removes duplicate links from origin outputs and the graph's link map. */
+export function purgeOrphanedLinks(
+  ids: LinkId[],
+  keepId: LinkId,
+  links: Map<LinkId, LLink>,
+  getNodeById: (id: NodeId) => LGraphNode | null
+): void {
+  for (const id of ids) {
+    if (id === keepId) continue
+
+    const link = links.get(id)
+    if (!link) continue
+
+    const originNode = getNodeById(link.origin_id)
+    const output = originNode?.outputs?.[link.origin_slot]
+    if (output?.links) {
+      for (let i = output.links.length - 1; i >= 0; i--) {
+        if (output.links[i] === id) output.links.splice(i, 1)
+      }
+    }
+
+    links.delete(id)
+  }
+}
+
+/** Ensures input.link on the target node points to the surviving link. */
+export function repairInputLinks(
+  ids: LinkId[],
+  keepId: LinkId,
+  node: LGraphNode | null
+): void {
+  if (!node) return
+
+  const duplicateIds = new Set(ids)
+
+  for (const input of node.inputs ?? []) {
+    if (input?.link == null || input.link === keepId) continue
+    if (duplicateIds.has(input.link)) {
+      input.link = keepId
+    }
+  }
+}

src/locales/en/main.json

@@ -287,6 +287,32 @@
     "browserReservedKeybinding": "This shortcut is reserved by some browsers and may have unexpected results.",
     "browserReservedKeybindingTooltip": "This shortcut conflicts with browser-reserved shortcuts",
     "keybindingAlreadyExists": "Keybinding already exists on",
+    "keybindingPresets": {
+      "importPreset": "Import preset",
+      "importKeybindingPreset": "Import keybinding preset",
+      "exportPreset": "Export preset",
+      "saveChanges": "Save Changes",
+      "saveAsNewPreset": "Save as new preset",
+      "resetToDefault": "Reset to default",
+      "deletePreset": "Delete preset",
+      "unsavedChangesTo": "Unsaved changes to {name}",
+      "unsavedChangesMessage": "You have unsaved changes that will be lost if you switch without saving.",
+      "discardAndSwitch": "Discard and Switch",
+      "saveAndSwitch": "Save and Switch",
+      "deletePresetTitle": "Delete the current preset?",
+      "deletePresetWarning": "This preset will be deleted. This cannot be undone.",
+      "presetSaved": "Preset \"{name}\" saved",
+      "presetDeleted": "Preset \"{name}\" deleted",
+      "presetImported": "Keybinding preset imported",
+      "invalidPresetFile": "Preset file must be valid JSON exported from ComfyUI",
+      "invalidPresetName": "Preset name must not be empty, \"default\", start with a dot, contain path separators, or end with .json",
+      "loadPresetFailed": "Failed to load preset \"{name}\"",
+      "deletePresetFailed": "Failed to delete preset \"{name}\"",
+      "overwritePresetTitle": "Overwrite Preset",
+      "overwritePresetMessage": "A preset named \"{name}\" already exists. Overwrite it?",
+      "presetNamePrompt": "Enter a name for the preset",
+      "default": "Default Preset"
+    },
     "commandProhibited": "Command {command} is prohibited. Contact an administrator for more information.",
     "startRecording": "Start Recording",
     "stopRecording": "Stop Recording",
@@ -317,9 +343,13 @@
     "frameNodes": "Frame Nodes",
     "listening": "Listening...",
     "ready": "Ready",
+    "play": "Play",
+    "pause": "Pause",
     "playPause": "Play/Pause",
     "playRecording": "Play Recording",
     "playing": "Playing",
+    "skipToStart": "Skip to Start",
+    "skipToEnd": "Skip to End",
     "stopPlayback": "Stop Playback",
     "playbackSpeed": "Playback Speed",
     "volume": "Volume",
@@ -3202,6 +3232,14 @@
     "desc": "– More flexible workflows, powerful new widgets, built for extensibility",
     "tryItOut": "Try it out"
   },
+  "appBuilder": {
+    "vueNodeSwitch": {
+      "title": "Switched over to Nodes 2.0",
+      "content": "For the best experience, App builder uses Nodes 2.0. You can switch back after building the app from the main menu.",
+      "dontShowAgain": "Don't show again",
+      "dismiss": "Dismiss"
+    }
+  },
   "vueNodesMigration": {
     "message": "Prefer the legacy design?",
     "button": "Switch back"

src/platform/assets/components/MediaAudioTop.vue

@@ -8,16 +8,20 @@
         $t('assetBrowser.media.audioPlaceholder')
       }}</span>
     </div>
-    <audio
-      controls
-      class="absolute bottom-0 left-0 w-full p-2"
-      :src="asset.src"
-      @click.stop
-    />
+    <div class="absolute bottom-0 left-0 w-full p-2">
+      <WaveAudioPlayer
+        :src="asset.src"
+        :bar-count="40"
+        :height="32"
+        align="bottom"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import WaveAudioPlayer from '@/components/common/WaveAudioPlayer.vue'
+
 import type { AssetMeta } from '../schemas/mediaAssetSchema'
 
 const { asset } = defineProps<{

src/platform/keybindings/keybindingStore.ts

@@ -1,15 +1,54 @@
 import { groupBy } from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
 import type { Ref } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 
 import type { KeyComboImpl } from './keyCombo'
-import type { KeybindingImpl } from './keybinding'
+import { KeybindingImpl } from './keybinding'
+import type { KeybindingPreset } from './types'
 
 export const useKeybindingStore = defineStore('keybinding', () => {
-  const defaultKeybindings = ref<Record<string, KeybindingImpl>>({})
-  const userKeybindings = ref<Record<string, KeybindingImpl>>({})
-  const userUnsetKeybindings = ref<Record<string, KeybindingImpl>>({})
+  const defaultKeybindings = shallowRef<Record<string, KeybindingImpl>>({})
+  const userKeybindings = shallowRef<Record<string, KeybindingImpl>>({})
+  const userUnsetKeybindings = shallowRef<Record<string, KeybindingImpl>>({})
+
+  const currentPresetName = ref('default')
+  const savedPresetData = ref<KeybindingPreset | null>(null)
+
+  const serializeBinding = (b: KeybindingImpl) =>
+    `${b.commandId}:${b.combo.serialize()}:${b.targetElementId ?? ''}`
+
+  const savedPresetSerialized = computed(() => {
+    if (!savedPresetData.value) return null
+    const savedNew = savedPresetData.value.newBindings
+      .map((b) => serializeBinding(new KeybindingImpl(b)))
+      .sort()
+      .join('|')
+    const savedUnset = savedPresetData.value.unsetBindings
+      .map((b) => serializeBinding(new KeybindingImpl(b)))
+      .sort()
+      .join('|')
+    return { savedNew, savedUnset }
+  })
+
+  const isCurrentPresetModified = computed(() => {
+    const newBindings = Object.values(userKeybindings.value)
+    const unsetBindings = Object.values(userUnsetKeybindings.value)
+
+    if (currentPresetName.value === 'default') {
+      return newBindings.length > 0 || unsetBindings.length > 0
+    }
+
+    if (!savedPresetSerialized.value) return false
+
+    const currentNew = newBindings.map(serializeBinding).sort().join('|')
+    const currentUnset = unsetBindings.map(serializeBinding).sort().join('|')
+
+    return (
+      currentNew !== savedPresetSerialized.value.savedNew ||
+      currentUnset !== savedPresetSerialized.value.savedUnset
+    )
+  })
 
   function getUserKeybindings() {
     return userKeybindings.value
@@ -77,7 +116,10 @@ export const useKeybindingStore = defineStore('keybinding', () => {
         }`
       )
     }
-    target.value[keybinding.combo.serialize()] = keybinding
+    target.value = {
+      ...target.value,
+      [keybinding.combo.serialize()]: keybinding
+    }
   }
 
   function addDefaultKeybinding(keybinding: KeybindingImpl) {
@@ -94,7 +136,9 @@ export const useKeybindingStore = defineStore('keybinding', () => {
       keybinding.equals(defaultKeybinding) &&
       keybinding.equals(userUnsetKeybinding)
     ) {
-      delete userUnsetKeybindings.value[keybinding.combo.serialize()]
+      const updated = { ...userUnsetKeybindings.value }
+      delete updated[keybinding.combo.serialize()]
+      userUnsetKeybindings.value = updated
       return
     }
 
@@ -115,7 +159,9 @@ export const useKeybindingStore = defineStore('keybinding', () => {
     }
 
     if (userKeybindings.value[serializedCombo]?.equals(keybinding)) {
-      delete userKeybindings.value[serializedCombo]
+      const updated = { ...userKeybindings.value }
+      delete updated[serializedCombo]
+      userKeybindings.value = updated
       return
     }
 
@@ -183,31 +229,53 @@ export const useKeybindingStore = defineStore('keybinding', () => {
       unsetKeybinding(binding)
     }
 
+    const updatedUnset = { ...userUnsetKeybindings.value }
     for (const defaultBinding of defaultBindings) {
       const serializedCombo = defaultBinding.combo.serialize()
-      if (userUnsetKeybindings.value[serializedCombo]?.equals(defaultBinding)) {
-        delete userUnsetKeybindings.value[serializedCombo]
+      if (updatedUnset[serializedCombo]?.equals(defaultBinding)) {
+        delete updatedUnset[serializedCombo]
       }
     }
+    userUnsetKeybindings.value = updatedUnset
 
     return true
   }
 
+  const modifiedCommandIds = computed<Set<string>>(() => {
+    const result = new Set<string>()
+    const allCommandIds = new Set([
+      ...Object.keys(keybindingsByCommandId.value),
+      ...Object.keys(defaultKeybindingsByCommandId.value)
+    ])
+
+    for (const commandId of allCommandIds) {
+      const currentBindings = keybindingsByCommandId.value[commandId] ?? []
+      const defaultBindings =
+        defaultKeybindingsByCommandId.value[commandId] ?? []
+
+      if (currentBindings.length !== defaultBindings.length) {
+        result.add(commandId)
+        continue
+      }
+      if (currentBindings.length === 0) continue
+
+      const sortedCurrent = [...currentBindings]
+        .map((b) => b.combo.serialize())
+        .sort()
+      const sortedDefault = [...defaultBindings]
+        .map((b) => b.combo.serialize())
+        .sort()
+
+      if (sortedCurrent.some((combo, i) => combo !== sortedDefault[i])) {
+        result.add(commandId)
+      }
+    }
+
+    return result
+  })
+
   function isCommandKeybindingModified(commandId: string): boolean {
-    const currentBindings = getKeybindingsByCommandId(commandId)
-    const defaultBindings = defaultKeybindingsByCommandId.value[commandId] ?? []
-
-    if (currentBindings.length !== defaultBindings.length) return true
-    if (currentBindings.length === 0) return false
-
-    const sortedCurrent = [...currentBindings]
-      .map((b) => b.combo.serialize())
-      .sort()
-    const sortedDefault = [...defaultBindings]
-      .map((b) => b.combo.serialize())
-      .sort()
-
-    return sortedCurrent.some((combo, i) => combo !== sortedDefault[i])
+    return modifiedCommandIds.value.has(commandId)
   }
 
   return {
@@ -224,6 +292,9 @@ export const useKeybindingStore = defineStore('keybinding', () => {
     resetAllKeybindings,
     resetKeybindingForCommand,
     isCommandKeybindingModified,
+    currentPresetName,
+    savedPresetData,
+    isCurrentPresetModified,
     removeAllKeybindingsForCommand,
     updateSpecificKeybinding
   }

src/platform/keybindings/presetService.test.ts

@@ -0,0 +1,665 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { KeybindingImpl } from '@/platform/keybindings/keybinding'
+import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
+import type { KeybindingPreset } from '@/platform/keybindings/types'
+
+const mockApi = vi.hoisted(() => ({
+  listUserDataFullInfo: vi.fn(),
+  getUserData: vi.fn(),
+  storeUserData: vi.fn(),
+  deleteUserData: vi.fn()
+}))
+
+const mockDownloadBlob = vi.hoisted(() => vi.fn())
+const mockUploadFile = vi.hoisted(() => vi.fn())
+const mockConfirm = vi.hoisted(() => vi.fn().mockResolvedValue(true))
+const mockPrompt = vi.hoisted(() => vi.fn().mockResolvedValue('test-preset'))
+const mockShowSmallLayoutDialog = vi.hoisted(() =>
+  vi.fn().mockImplementation((options: Record<string, unknown>) => {
+    const props = options.props as Record<string, unknown> | undefined
+    const onResult = props?.onResult as ((v: boolean) => void) | undefined
+    onResult?.(true)
+  })
+)
+const mockSettingSet = vi.hoisted(() => vi.fn())
+const mockToastAdd = vi.hoisted(() => vi.fn())
+const mockPersistUserKeybindings = vi.hoisted(() =>
+  vi.fn().mockResolvedValue(undefined)
+)
+
+vi.mock('@/scripts/api', () => ({
+  api: mockApi
+}))
+
+vi.mock('@/base/common/downloadUtil', () => ({
+  downloadBlob: mockDownloadBlob
+}))
+
+vi.mock('@/scripts/utils', () => ({
+  uploadFile: mockUploadFile
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    confirm: mockConfirm,
+    prompt: mockPrompt,
+    showSmallLayoutDialog: mockShowSmallLayoutDialog
+  })
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    set: mockSettingSet,
+    get: vi.fn().mockReturnValue('default')
+  })
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: () => ({
+    add: mockToastAdd
+  })
+}))
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    wrapWithErrorHandling: <T extends (...args: unknown[]) => unknown>(fn: T) =>
+      fn,
+    wrapWithErrorHandlingAsync: <T extends (...args: unknown[]) => unknown>(
+      fn: T
+    ) => fn,
+    toastErrorHandler: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/keybindings/keybindingService', () => ({
+  useKeybindingService: () => ({
+    persistUserKeybindings: mockPersistUserKeybindings
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    showDialog: vi.fn(),
+    closeDialog: vi.fn(),
+    dialogStack: []
+  })
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+describe('useKeybindingPresetService', () => {
+  let store: ReturnType<typeof useKeybindingStore>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    store = useKeybindingStore()
+  })
+
+  async function getPresetService() {
+    const { useKeybindingPresetService } = await import('./presetService')
+    return useKeybindingPresetService()
+  }
+
+  describe('listPresets', () => {
+    it('parses API response correctly', async () => {
+      mockApi.listUserDataFullInfo.mockResolvedValue([
+        { path: 'vim.json', size: 100, modified: 123 },
+        { path: 'emacs.json', size: 200, modified: 456 }
+      ])
+
+      const service = await getPresetService()
+      const presets = await service.listPresets()
+
+      expect(mockApi.listUserDataFullInfo).toHaveBeenCalledWith('keybindings')
+      expect(presets).toEqual(['vim', 'emacs'])
+    })
+
+    it('returns empty array when no presets exist', async () => {
+      mockApi.listUserDataFullInfo.mockResolvedValue([])
+
+      const service = await getPresetService()
+      const presets = await service.listPresets()
+
+      expect(presets).toEqual([])
+    })
+  })
+
+  describe('savePreset', () => {
+    it('calls storeUserData with correct path and data', async () => {
+      mockApi.storeUserData.mockResolvedValue(new Response())
+
+      const keybinding = new KeybindingImpl({
+        commandId: 'test.cmd',
+        combo: { key: 'A', ctrl: true }
+      })
+      store.addUserKeybinding(keybinding)
+
+      const service = await getPresetService()
+      await service.savePreset('my-preset')
+
+      expect(mockApi.storeUserData).toHaveBeenCalledWith(
+        'keybindings/my-preset.json',
+        expect.stringContaining('"name":"my-preset"'),
+        { overwrite: true, stringify: false }
+      )
+      expect(store.currentPresetName).toBe('my-preset')
+    })
+
+    it('does not update store when storeUserData rejects', async () => {
+      mockApi.storeUserData.mockRejectedValue(new Error('Server error'))
+
+      const keybinding = new KeybindingImpl({
+        commandId: 'test.cmd',
+        combo: { key: 'A', ctrl: true }
+      })
+      store.addUserKeybinding(keybinding)
+      store.currentPresetName = 'old-preset'
+
+      const service = await getPresetService()
+      await expect(service.savePreset('my-preset')).rejects.toThrow(
+        'Server error'
+      )
+
+      expect(store.currentPresetName).toBe('old-preset')
+      expect(store.savedPresetData).toBeNull()
+    })
+  })
+
+  describe('deletePreset', () => {
+    it('calls deleteUserData and resets to default if active', async () => {
+      mockApi.deleteUserData.mockResolvedValue(
+        new Response(null, { status: 200 })
+      )
+
+      store.currentPresetName = 'vim'
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'test.cmd',
+          combo: { key: 'A', ctrl: true }
+        })
+      )
+
+      const service = await getPresetService()
+      await service.deletePreset('vim')
+
+      expect(mockApi.deleteUserData).toHaveBeenCalledWith(
+        'keybindings/vim.json'
+      )
+      expect(store.currentPresetName).toBe('default')
+      expect(Object.keys(store.getUserKeybindings())).toHaveLength(0)
+    })
+
+    it('throws when deleteUserData response is not ok', async () => {
+      mockApi.deleteUserData.mockResolvedValue(
+        new Response(null, { status: 500 })
+      )
+
+      store.currentPresetName = 'vim'
+
+      const service = await getPresetService()
+      await expect(service.deletePreset('vim')).rejects.toThrow(
+        'g.keybindingPresets.deletePresetFailed'
+      )
+    })
+  })
+
+  describe('exportPreset', () => {
+    it('calls downloadBlob with correct JSON', async () => {
+      store.currentPresetName = 'my-preset'
+
+      const service = await getPresetService()
+      service.exportPreset()
+
+      expect(mockDownloadBlob).toHaveBeenCalledWith(
+        'my-preset.json',
+        expect.any(Blob)
+      )
+    })
+  })
+
+  describe('importPreset', () => {
+    it('validates and rejects invalid files', async () => {
+      mockUploadFile.mockResolvedValue(
+        new File(['{"invalid": true}'], 'bad.json', {
+          type: 'application/json'
+        })
+      )
+
+      const service = await getPresetService()
+      await expect(service.importPreset()).rejects.toThrow()
+    })
+
+    it('saves preset to storage and switches to it', async () => {
+      const validPreset: KeybindingPreset = {
+        name: 'imported',
+        newBindings: [
+          { commandId: 'test.cmd', combo: { key: 'B', alt: true } }
+        ],
+        unsetBindings: []
+      }
+      mockUploadFile.mockResolvedValue(
+        new File([JSON.stringify(validPreset)], 'imported.json', {
+          type: 'application/json'
+        })
+      )
+      mockApi.storeUserData.mockResolvedValue(new Response())
+      mockApi.getUserData.mockResolvedValue(
+        new Response(JSON.stringify(validPreset), { status: 200 })
+      )
+
+      const service = await getPresetService()
+      await service.importPreset()
+
+      expect(mockApi.storeUserData).toHaveBeenCalledWith(
+        'keybindings/imported.json',
+        JSON.stringify(validPreset),
+        { overwrite: true, stringify: false }
+      )
+      expect(store.currentPresetName).toBe('imported')
+      expect(Object.keys(store.getUserKeybindings())).toHaveLength(1)
+    })
+  })
+
+  describe('presetFilePath sanitization', () => {
+    it('rejects names with path separators', async () => {
+      const service = await getPresetService()
+      await expect(service.savePreset('../evil')).rejects.toThrow()
+      await expect(service.savePreset('foo/bar')).rejects.toThrow()
+      await expect(service.savePreset('foo\\bar')).rejects.toThrow()
+    })
+
+    it('rejects names starting with a dot', async () => {
+      const service = await getPresetService()
+      await expect(service.savePreset('.hidden')).rejects.toThrow()
+    })
+
+    it('rejects the reserved name "default"', async () => {
+      const service = await getPresetService()
+      await expect(service.savePreset('default')).rejects.toThrow()
+    })
+
+    it('rejects names ending with .json extension', async () => {
+      const service = await getPresetService()
+      await expect(service.savePreset('vim.json')).rejects.toThrow()
+      await expect(service.savePreset('preset.JSON')).rejects.toThrow()
+    })
+
+    it('rejects empty names', async () => {
+      const service = await getPresetService()
+      await expect(service.savePreset('')).rejects.toThrow()
+      await expect(service.savePreset('   ')).rejects.toThrow()
+    })
+  })
+
+  describe('loadPreset name override', () => {
+    it('overrides embedded name with the requested name', async () => {
+      const presetData = {
+        name: 'wrong-name',
+        newBindings: [],
+        unsetBindings: []
+      }
+      mockApi.getUserData.mockResolvedValue(
+        new Response(JSON.stringify(presetData), { status: 200 })
+      )
+
+      const service = await getPresetService()
+      const loaded = await service.loadPreset('correct-name')
+
+      expect(loaded?.name).toBe('correct-name')
+    })
+  })
+
+  describe('isCurrentPresetModified', () => {
+    it('detects modifications when on default preset', () => {
+      expect(store.isCurrentPresetModified).toBe(false)
+
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'test.cmd',
+          combo: { key: 'A', ctrl: true }
+        })
+      )
+
+      expect(store.isCurrentPresetModified).toBe(true)
+    })
+
+    it('detects no modifications when saved data matches current state', () => {
+      const keybinding = new KeybindingImpl({
+        commandId: 'test.cmd',
+        combo: { key: 'A', ctrl: true }
+      })
+      store.addUserKeybinding(keybinding)
+      store.currentPresetName = 'my-preset'
+      store.savedPresetData = {
+        name: 'my-preset',
+        newBindings: [
+          { commandId: 'test.cmd', combo: { key: 'A', ctrl: true } }
+        ],
+        unsetBindings: []
+      }
+
+      expect(store.isCurrentPresetModified).toBe(false)
+    })
+
+    it('detects modifications when saved data differs from current state', () => {
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'test.cmd',
+          combo: { key: 'A', ctrl: true }
+        })
+      )
+      store.currentPresetName = 'my-preset'
+      store.savedPresetData = {
+        name: 'my-preset',
+        newBindings: [
+          { commandId: 'test.cmd', combo: { key: 'B', alt: true } }
+        ],
+        unsetBindings: []
+      }
+
+      expect(store.isCurrentPresetModified).toBe(true)
+    })
+  })
+
+  describe('applyPreset', () => {
+    it('resets keybindings and applies preset data', async () => {
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'old.cmd',
+          combo: { key: 'Z', ctrl: true }
+        })
+      )
+
+      const preset: KeybindingPreset = {
+        name: 'vim',
+        newBindings: [
+          { commandId: 'new.cmd', combo: { key: 'A', ctrl: true } }
+        ],
+        unsetBindings: []
+      }
+
+      const service = await getPresetService()
+      service.applyPreset(preset)
+
+      expect(store.currentPresetName).toBe('vim')
+      expect(store.savedPresetData?.name).toBe('vim')
+      expect(store.savedPresetData?.newBindings).toHaveLength(1)
+      expect(store.savedPresetData?.newBindings[0].commandId).toBe('new.cmd')
+      expect(Object.keys(store.getUserKeybindings())).toHaveLength(1)
+      const bindings = Object.values(store.getUserKeybindings())
+      expect(bindings[0].commandId).toBe('new.cmd')
+    })
+  })
+
+  describe('switchPreset', () => {
+    it('discards unsaved changes when dialog returns false', async () => {
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'dirty.cmd',
+          combo: { key: 'X', ctrl: true }
+        })
+      )
+
+      mockShowSmallLayoutDialog.mockImplementationOnce(
+        (options: Record<string, unknown>) => {
+          const props = options.props as Record<string, unknown> | undefined
+          const onResult = props?.onResult as ((v: boolean) => void) | undefined
+          onResult?.(false)
+        }
+      )
+
+      const targetPreset: KeybindingPreset = {
+        name: 'vim',
+        newBindings: [
+          { commandId: 'vim.cmd', combo: { key: 'J', ctrl: false } }
+        ],
+        unsetBindings: []
+      }
+      mockApi.getUserData.mockResolvedValueOnce(
+        new Response(JSON.stringify(targetPreset), { status: 200 })
+      )
+
+      const service = await getPresetService()
+      await service.switchPreset('vim')
+
+      expect(store.currentPresetName).toBe('vim')
+    })
+
+    it('saves unsaved changes when dialog returns true on non-default preset', async () => {
+      store.currentPresetName = 'my-preset'
+      store.savedPresetData = {
+        name: 'my-preset',
+        newBindings: [],
+        unsetBindings: []
+      }
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'dirty.cmd',
+          combo: { key: 'X', ctrl: true }
+        })
+      )
+
+      mockApi.storeUserData.mockResolvedValueOnce(new Response())
+
+      const targetPreset: KeybindingPreset = {
+        name: 'vim',
+        newBindings: [
+          { commandId: 'vim.cmd', combo: { key: 'J', ctrl: false } }
+        ],
+        unsetBindings: []
+      }
+      mockApi.getUserData.mockResolvedValueOnce(
+        new Response(JSON.stringify(targetPreset), { status: 200 })
+      )
+
+      const service = await getPresetService()
+      await service.switchPreset('vim')
+
+      expect(mockApi.storeUserData).toHaveBeenCalledWith(
+        'keybindings/my-preset.json',
+        expect.any(String),
+        { overwrite: true, stringify: false }
+      )
+      expect(store.currentPresetName).toBe('vim')
+    })
+
+    it('cancels switch when dialog returns null', async () => {
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'dirty.cmd',
+          combo: { key: 'X', ctrl: true }
+        })
+      )
+
+      mockShowSmallLayoutDialog.mockImplementationOnce(
+        (options: Record<string, unknown>) => {
+          const dialogComponentProps = options.dialogComponentProps as
+            | Record<string, unknown>
+            | undefined
+          const onClose = dialogComponentProps?.onClose as
+            | (() => void)
+            | undefined
+          onClose?.()
+        }
+      )
+
+      const service = await getPresetService()
+      await service.switchPreset('vim')
+
+      expect(store.currentPresetName).toBe('default')
+      expect(mockApi.getUserData).not.toHaveBeenCalled()
+    })
+
+    it('switches without dialog when preset is not modified', async () => {
+      const targetPreset: KeybindingPreset = {
+        name: 'vim',
+        newBindings: [
+          { commandId: 'vim.cmd', combo: { key: 'J', ctrl: false } }
+        ],
+        unsetBindings: []
+      }
+      mockApi.getUserData.mockResolvedValueOnce(
+        new Response(JSON.stringify(targetPreset), { status: 200 })
+      )
+
+      const service = await getPresetService()
+      await service.switchPreset('vim')
+
+      expect(mockShowSmallLayoutDialog).not.toHaveBeenCalled()
+      expect(store.currentPresetName).toBe('vim')
+    })
+  })
+
+  describe('promptAndSaveNewPreset', () => {
+    it('returns false when user cancels prompt', async () => {
+      mockPrompt.mockResolvedValueOnce(null)
+
+      const service = await getPresetService()
+      const result = await service.promptAndSaveNewPreset()
+
+      expect(result).toBe(false)
+    })
+
+    it('returns false when user enters empty name', async () => {
+      mockPrompt.mockResolvedValueOnce('   ')
+
+      const service = await getPresetService()
+      const result = await service.promptAndSaveNewPreset()
+
+      expect(result).toBe(false)
+    })
+
+    it('saves successfully with valid name', async () => {
+      mockApi.listUserDataFullInfo.mockResolvedValueOnce([])
+      mockApi.storeUserData.mockResolvedValueOnce(new Response())
+
+      const service = await getPresetService()
+      const result = await service.promptAndSaveNewPreset()
+
+      expect(result).toBe(true)
+      expect(mockApi.storeUserData).toHaveBeenCalledWith(
+        'keybindings/test-preset.json',
+        expect.any(String),
+        { overwrite: true, stringify: false }
+      )
+    })
+
+    it('confirms overwrite when preset name already exists', async () => {
+      mockApi.listUserDataFullInfo.mockResolvedValueOnce([
+        { path: 'test-preset.json', size: 100, modified: 123 }
+      ])
+      mockApi.storeUserData.mockResolvedValueOnce(new Response())
+
+      const service = await getPresetService()
+      const result = await service.promptAndSaveNewPreset()
+
+      expect(result).toBe(true)
+      expect(mockConfirm).toHaveBeenCalled()
+      expect(mockApi.storeUserData).toHaveBeenCalledWith(
+        'keybindings/test-preset.json',
+        expect.any(String),
+        { overwrite: true, stringify: false }
+      )
+    })
+
+    it('returns false when user rejects overwrite', async () => {
+      mockApi.listUserDataFullInfo.mockResolvedValueOnce([
+        { path: 'test-preset.json', size: 100, modified: 123 }
+      ])
+      mockConfirm.mockResolvedValueOnce(false)
+
+      const service = await getPresetService()
+      const result = await service.promptAndSaveNewPreset()
+
+      expect(result).toBe(false)
+      expect(mockApi.storeUserData).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('switchToDefaultPreset', () => {
+    it('resets bindings and updates store and settings', async () => {
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'test.cmd',
+          combo: { key: 'A', ctrl: true }
+        })
+      )
+      store.currentPresetName = 'vim'
+      store.savedPresetData = {
+        name: 'vim',
+        newBindings: [],
+        unsetBindings: []
+      }
+
+      const service = await getPresetService()
+      await service.switchToDefaultPreset()
+
+      expect(Object.keys(store.getUserKeybindings())).toHaveLength(0)
+      expect(store.currentPresetName).toBe('default')
+      expect(store.savedPresetData).toBeNull()
+      expect(mockPersistUserKeybindings).toHaveBeenCalled()
+      expect(mockSettingSet).toHaveBeenCalledWith(
+        'Comfy.Keybinding.CurrentPreset',
+        'default'
+      )
+    })
+
+    it('does not reset bindings when resetBindings is false', async () => {
+      store.addUserKeybinding(
+        new KeybindingImpl({
+          commandId: 'test.cmd',
+          combo: { key: 'A', ctrl: true }
+        })
+      )
+      store.currentPresetName = 'vim'
+
+      const service = await getPresetService()
+      await service.switchToDefaultPreset({ resetBindings: false })
+
+      expect(Object.keys(store.getUserKeybindings())).toHaveLength(1)
+      expect(store.currentPresetName).toBe('default')
+      expect(store.savedPresetData).toBeNull()
+    })
+  })
+
+  describe('loadPreset error handling', () => {
+    it('throws when API returns non-ok response', async () => {
+      mockApi.getUserData.mockResolvedValueOnce(
+        new Response(null, { status: 404 })
+      )
+
+      const service = await getPresetService()
+      await expect(service.loadPreset('missing')).rejects.toThrow(
+        'g.keybindingPresets.loadPresetFailed'
+      )
+    })
+
+    it('throws when response contains invalid JSON', async () => {
+      mockApi.getUserData.mockResolvedValueOnce(
+        new Response('not-json{{{', { status: 200 })
+      )
+
+      const service = await getPresetService()
+      await expect(service.loadPreset('bad-json')).rejects.toThrow()
+    })
+
+    it('throws when Zod validation fails', async () => {
+      mockApi.getUserData.mockResolvedValueOnce(
+        new Response(JSON.stringify({ name: 'valid', wrongField: true }), {
+          status: 200
+        })
+      )
+
+      const service = await getPresetService()
+      await expect(service.loadPreset('bad-schema')).rejects.toThrow(
+        'g.keybindingPresets.invalidPresetFile'
+      )
+    })
+  })
+})

src/platform/keybindings/presetService.ts

@@ -0,0 +1,290 @@
+import { toRaw } from 'vue'
+import { fromZodError } from 'zod-validation-error'
+
+import { downloadBlob } from '@/base/common/downloadUtil'
+import UnsavedChangesContent from '@/components/dialog/content/setting/keybinding/UnsavedChangesContent.vue'
+import UnsavedChangesHeader from '@/components/dialog/content/setting/keybinding/UnsavedChangesHeader.vue'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { t } from '@/i18n'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
+import { uploadFile } from '@/scripts/utils'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import { KeybindingImpl } from './keybinding'
+import { useKeybindingService } from './keybindingService'
+import { useKeybindingStore } from './keybindingStore'
+import type { KeybindingPreset } from './types'
+import { zKeybindingPreset } from './types'
+
+const PRESETS_DIR = 'keybindings'
+
+function presetFilePath(name: string): string {
+  const trimmed = name.trim()
+  if (
+    !trimmed ||
+    trimmed === 'default' ||
+    trimmed.toLowerCase().endsWith('.json') ||
+    trimmed.includes('/') ||
+    trimmed.includes('\\') ||
+    trimmed.includes('..') ||
+    trimmed.startsWith('.')
+  ) {
+    throw new Error(t('g.keybindingPresets.invalidPresetName'))
+  }
+  return `${PRESETS_DIR}/${trimmed}.json`
+}
+
+function buildPresetFromStore(
+  name: string,
+  keybindingStore: ReturnType<typeof useKeybindingStore>
+): KeybindingPreset {
+  const newBindings = Object.values(toRaw(keybindingStore.getUserKeybindings()))
+  const unsetBindings = Object.values(
+    toRaw(keybindingStore.getUserUnsetKeybindings())
+  )
+  return { name, newBindings, unsetBindings }
+}
+
+export function useKeybindingPresetService() {
+  const keybindingStore = useKeybindingStore()
+  const keybindingService = useKeybindingService()
+  const settingStore = useSettingStore()
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+  const toast = useToastStore()
+  const { wrapWithErrorHandlingAsync } = useErrorHandling()
+
+  async function switchToDefaultPreset({ resetBindings = true } = {}) {
+    if (resetBindings) keybindingStore.resetAllKeybindings()
+    keybindingStore.currentPresetName = 'default'
+    keybindingStore.savedPresetData = null
+    await keybindingService.persistUserKeybindings()
+    await settingStore.set('Comfy.Keybinding.CurrentPreset', 'default')
+  }
+
+  const UNSAVED_DIALOG_KEY = 'unsaved-keybinding-changes'
+
+  function showUnsavedChangesDialog(
+    presetName: string
+  ): Promise<boolean | null> {
+    return new Promise((resolve) => {
+      dialogService.showSmallLayoutDialog({
+        key: UNSAVED_DIALOG_KEY,
+        headerComponent: UnsavedChangesHeader,
+        headerProps: { presetName },
+        component: UnsavedChangesContent,
+        props: {
+          onResult: (result: boolean | null) => {
+            resolve(result)
+            dialogStore.closeDialog({ key: UNSAVED_DIALOG_KEY })
+          }
+        },
+        dialogComponentProps: {
+          onClose: () => resolve(null)
+        }
+      })
+    })
+  }
+
+  async function listPresets(): Promise<string[]> {
+    const files = await api.listUserDataFullInfo(PRESETS_DIR)
+    return files
+      .map((f) => f.path.replace(/\.json$/, ''))
+      .filter((name) => name.length > 0)
+  }
+
+  async function loadPreset(name: string): Promise<KeybindingPreset> {
+    const resp = await api.getUserData(presetFilePath(name))
+    if (!resp.ok) {
+      throw new Error(t('g.keybindingPresets.loadPresetFailed', { name }))
+    }
+    const data = await resp.json()
+    const result = zKeybindingPreset.safeParse(data)
+    if (!result.success) {
+      throw new Error(
+        t('g.keybindingPresets.invalidPresetFile') +
+          ': ' +
+          fromZodError(result.error).message
+      )
+    }
+    return { ...result.data, name }
+  }
+
+  function applyPreset(preset: KeybindingPreset) {
+    keybindingStore.resetAllKeybindings()
+    for (const binding of preset.unsetBindings) {
+      keybindingStore.unsetKeybinding(new KeybindingImpl(binding))
+    }
+    for (const binding of preset.newBindings) {
+      keybindingStore.addUserKeybinding(new KeybindingImpl(binding))
+    }
+    // Snapshot savedPresetData from the store's actual state after applying,
+    // because addUserKeybinding may auto-unset conflicting defaults beyond
+    // what the raw preset specifies.
+    keybindingStore.savedPresetData = buildPresetFromStore(
+      preset.name,
+      keybindingStore
+    )
+    keybindingStore.currentPresetName = preset.name
+  }
+
+  async function savePreset(name: string) {
+    const preset = buildPresetFromStore(name, keybindingStore)
+    await api.storeUserData(presetFilePath(name), JSON.stringify(preset), {
+      overwrite: true,
+      stringify: false
+    })
+    keybindingStore.savedPresetData = preset
+    keybindingStore.currentPresetName = name
+    await keybindingService.persistUserKeybindings()
+    await settingStore.set('Comfy.Keybinding.CurrentPreset', name)
+    toast.add({
+      severity: 'success',
+      summary: t('g.keybindingPresets.presetSaved', { name }),
+      life: 3000
+    })
+  }
+
+  async function deletePreset(name: string) {
+    const confirmed = await dialogService.confirm({
+      title: t('g.keybindingPresets.deletePresetTitle'),
+      message: t('g.keybindingPresets.deletePresetWarning'),
+      type: 'delete'
+    })
+    if (!confirmed) return
+
+    const resp = await api.deleteUserData(presetFilePath(name))
+    if (!resp.ok) {
+      throw new Error(t('g.keybindingPresets.deletePresetFailed', { name }))
+    }
+
+    if (keybindingStore.currentPresetName === name) {
+      await switchToDefaultPreset()
+    }
+
+    toast.add({
+      severity: 'info',
+      summary: t('g.keybindingPresets.presetDeleted', { name }),
+      life: 3000
+    })
+  }
+
+  function exportPreset() {
+    const preset = buildPresetFromStore(
+      keybindingStore.currentPresetName,
+      keybindingStore
+    )
+    downloadBlob(
+      `${preset.name}.json`,
+      new Blob([JSON.stringify(preset, null, 2)], {
+        type: 'application/json'
+      })
+    )
+  }
+
+  async function importPreset() {
+    const file = await uploadFile('application/json')
+    const text = await file.text()
+    let data: unknown
+    try {
+      data = JSON.parse(text)
+    } catch {
+      throw new Error(t('g.keybindingPresets.invalidPresetFile'))
+    }
+    const result = zKeybindingPreset.safeParse(data)
+    if (!result.success) {
+      throw new Error(
+        t('g.keybindingPresets.invalidPresetFile') +
+          ': ' +
+          fromZodError(result.error).message
+      )
+    }
+    const preset = result.data
+
+    // Save the imported preset file to storage
+    await api.storeUserData(
+      presetFilePath(preset.name),
+      JSON.stringify(preset),
+      { overwrite: true, stringify: false }
+    )
+
+    // Switch to the imported preset (handles dirty check)
+    await switchPreset(preset.name)
+
+    toast.add({
+      severity: 'success',
+      summary: t('g.keybindingPresets.presetImported'),
+      life: 3000
+    })
+  }
+
+  async function promptAndSaveNewPreset(): Promise<boolean> {
+    const name = await dialogService.prompt({
+      title: t('g.keybindingPresets.saveAsNewPreset'),
+      message: t('g.keybindingPresets.presetNamePrompt'),
+      defaultValue: ''
+    })
+    if (!name) return false
+    const trimmedName = name.trim()
+    if (!trimmedName) return false
+    const existingPresets = await listPresets()
+    if (existingPresets.includes(trimmedName)) {
+      const overwrite = await dialogService.confirm({
+        title: t('g.keybindingPresets.overwritePresetTitle'),
+        message: t('g.keybindingPresets.overwritePresetMessage', {
+          name: trimmedName
+        }),
+        type: 'overwrite'
+      })
+      if (!overwrite) return false
+    }
+    await savePreset(trimmedName)
+    return true
+  }
+
+  async function switchPreset(targetName: string) {
+    if (keybindingStore.isCurrentPresetModified) {
+      const displayName =
+        keybindingStore.currentPresetName === 'default'
+          ? t('g.keybindingPresets.default')
+          : keybindingStore.currentPresetName
+      const result = await showUnsavedChangesDialog(displayName)
+
+      if (result === null) return
+      if (result) {
+        if (keybindingStore.currentPresetName !== 'default') {
+          await savePreset(keybindingStore.currentPresetName)
+        } else {
+          const saved = await promptAndSaveNewPreset()
+          if (!saved) return
+        }
+      }
+    }
+
+    if (targetName === 'default') {
+      await switchToDefaultPreset()
+      return
+    }
+
+    const preset = await loadPreset(targetName)
+    applyPreset(preset)
+    await keybindingService.persistUserKeybindings()
+    await settingStore.set('Comfy.Keybinding.CurrentPreset', targetName)
+  }
+
+  return {
+    listPresets: wrapWithErrorHandlingAsync(listPresets),
+    loadPreset: wrapWithErrorHandlingAsync(loadPreset),
+    savePreset: wrapWithErrorHandlingAsync(savePreset),
+    deletePreset: wrapWithErrorHandlingAsync(deletePreset),
+    exportPreset,
+    importPreset: wrapWithErrorHandlingAsync(importPreset),
+    switchPreset: wrapWithErrorHandlingAsync(switchPreset),
+    switchToDefaultPreset: wrapWithErrorHandlingAsync(switchToDefaultPreset),
+    promptAndSaveNewPreset: wrapWithErrorHandlingAsync(promptAndSaveNewPreset),
+    applyPreset
+  }
+}

src/platform/keybindings/types.ts

@@ -14,5 +14,12 @@ export const zKeybinding = z.object({
   targetElementId: z.string().optional()
 })
 
+export const zKeybindingPreset = z.object({
+  name: z.string().trim().min(1, 'Preset name cannot be empty'),
+  newBindings: z.array(zKeybinding),
+  unsetBindings: z.array(zKeybinding)
+})
+
 export type KeyCombo = z.infer<typeof zKeyCombo>
 export type Keybinding = z.infer<typeof zKeybinding>
+export type KeybindingPreset = z.infer<typeof zKeybindingPreset>

src/platform/settings/components/SettingDialog.vue

@@ -41,7 +41,20 @@
       </nav>
     </template>
 
-    <template #header />
+    <template #header>
+      <div
+        v-if="activeCategoryKey === 'keybinding'"
+        id="keybinding-panel-header"
+        class="flex-1"
+      />
+    </template>
+
+    <template #header-right-area>
+      <div
+        v-if="activeCategoryKey === 'keybinding'"
+        id="keybinding-panel-actions"
+      />
+    </template>
 
     <template #content>
       <template v-if="activePanel">

src/platform/settings/constants/coreSettings.ts

@@ -676,6 +676,13 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: [] as Keybinding[],
     versionAdded: '1.3.7'
   },
+  {
+    id: 'Comfy.Keybinding.CurrentPreset',
+    name: 'Current keybinding preset name',
+    type: 'hidden',
+    defaultValue: 'default',
+    versionAdded: '1.8.8'
+  },
   {
     id: 'Comfy.Extension.Disabled',
     name: 'Disabled extension names',
@@ -1191,6 +1198,12 @@ export const CORE_SETTINGS: SettingParams[] = [
     experimental: true,
     versionAdded: '1.27.1'
   },
+  {
+    id: 'Comfy.AppBuilder.VueNodeSwitchDismissed',
+    name: 'App Builder Vue Node switch dismissed',
+    type: 'hidden',
+    defaultValue: false
+  },
   {
     id: 'Comfy.VueNodes.AutoScaleLayout',
     category: ['Comfy', 'Nodes 2.0', 'AutoScaleLayout'],

src/platform/updates/components/ReleaseNotificationToast.test.ts

@@ -134,7 +134,7 @@ describe('ReleaseNotificationToast', () => {
     } as ReleaseNote
 
     wrapper = mountComponent()
-    expect(wrapper.find('.icon-\\[lucide--rocket\\]').exists()).toBe(true)
+    expect(wrapper.find('.release-toast-popup').exists()).toBe(true)
   })
 
   it('displays release version', () => {

src/platform/updates/components/ReleaseNotificationToast.vue

@@ -1,40 +1,17 @@
 <template>
   <div v-if="shouldShow" class="release-toast-popup">
-    <div
-      class="flex max-h-96 w-96 flex-col rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+    <NotificationPopup
+      icon="icon-[lucide--rocket]"
+      :title="$t('releaseToast.newVersionAvailable')"
+      :subtitle="latestRelease?.version"
+      :position
     >
-      <!-- Main content -->
-      <div class="flex min-h-0 flex-1 flex-col gap-4 p-4">
-        <!-- Header section with icon and text -->
-        <div class="flex items-center gap-4">
-          <div
-            class="flex shrink-0 items-center justify-center rounded-lg bg-primary-background-hover p-3"
-          >
-            <i class="icon-[lucide--rocket] size-4 text-white" />
-          </div>
-          <div class="flex flex-col gap-1">
-            <div
-              class="text-sm leading-[1.429] font-normal text-base-foreground"
-            >
-              {{ $t('releaseToast.newVersionAvailable') }}
-            </div>
-            <div
-              class="text-sm leading-[1.21] font-normal text-muted-foreground"
-            >
-              {{ latestRelease?.version }}
-            </div>
-          </div>
-        </div>
+      <div
+        class="pl-14 text-sm leading-[1.21] font-normal text-muted-foreground"
+        v-html="formattedContent"
+      ></div>
 
-        <!-- Description section -->
-        <div
-          class="min-h-0 flex-1 overflow-y-auto pl-14 text-sm leading-[1.21] font-normal text-muted-foreground"
-          v-html="formattedContent"
-        ></div>
-      </div>
-
-      <!-- Footer section -->
-      <div class="flex items-center justify-between px-4 pb-4">
+      <template #footer-start>
         <a
           class="flex items-center gap-2 py-1 text-sm font-normal text-muted-foreground hover:text-base-foreground"
           :href="changelogUrl"
@@ -45,22 +22,27 @@
           <i class="icon-[lucide--external-link] size-4"></i>
           {{ $t('releaseToast.whatsNew') }}
         </a>
-        <div class="flex items-center gap-4">
-          <button
-            class="h-6 cursor-pointer border-none bg-transparent px-0 text-sm font-normal text-muted-foreground hover:text-base-foreground"
-            @click="handleSkip"
-          >
-            {{ $t('releaseToast.skip') }}
-          </button>
-          <button
-            class="h-10 cursor-pointer rounded-lg border-none bg-secondary-background px-4 text-sm font-normal text-base-foreground hover:bg-secondary-background-hover"
-            @click="handleUpdate"
-          >
-            {{ $t('releaseToast.update') }}
-          </button>
-        </div>
-      </div>
-    </div>
+      </template>
+
+      <template #footer-end>
+        <Button
+          variant="link"
+          size="unset"
+          class="h-6 px-0 text-sm font-normal"
+          @click="handleSkip"
+        >
+          {{ $t('releaseToast.skip') }}
+        </Button>
+        <Button
+          variant="secondary"
+          size="lg"
+          class="font-normal"
+          @click="handleUpdate"
+        >
+          {{ $t('releaseToast.update') }}
+        </Button>
+      </template>
+    </NotificationPopup>
   </div>
 </template>
 
@@ -69,6 +51,8 @@ import { default as DOMPurify } from 'dompurify'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import NotificationPopup from '@/components/common/NotificationPopup.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useCommandStore } from '@/stores/commandStore'
@@ -79,6 +63,10 @@ import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 import type { ReleaseNote } from '../common/releaseService'
 import { useReleaseStore } from '../common/releaseStore'
 
+const { position = 'bottom-left' } = defineProps<{
+  position?: 'bottom-left' | 'bottom-right'
+}>()
+
 const { buildDocsUrl } = useExternalLink()
 const { toastErrorHandler } = useErrorHandling()
 const releaseStore = useReleaseStore()
@@ -218,23 +206,3 @@ defineExpose({
   handleUpdate
 })
 </script>
-
-<style scoped>
-/* Toast popup - positioning handled by parent */
-.release-toast-popup {
-  position: absolute;
-  bottom: 1rem;
-  z-index: 1000;
-  pointer-events: auto;
-}
-
-/* Sidebar positioning classes applied by parent - matching help center */
-.release-toast-popup.sidebar-left,
-.release-toast-popup.sidebar-left.small-sidebar {
-  left: 1rem;
-}
-
-.release-toast-popup.sidebar-right {
-  right: 1rem;
-}
-</style>

src/platform/workflow/core/services/workflowService.ts

@@ -21,6 +21,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useAppMode } from '@/composables/useAppMode'
 import type { AppMode } from '@/composables/useAppMode'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
+import { useAppModeStore } from '@/stores/appModeStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -405,6 +406,7 @@ export const useWorkflowService = () => {
     // Determine the initial app mode for fresh loads from serialized state.
     // null means linearMode was never explicitly set (not builder-saved).
     const freshLoadMode = linearModeToAppMode(workflowData.extra?.linearMode)
+    useAppModeStore().loadSelections(workflowData.extra?.linearData)
 
     function trackIfEnteringApp(workflow: ComfyWorkflow) {
       if (!wasAppMode && workflow.initialMode === 'app') {

src/renderer/extensions/linearMode/ImagePreview.vue

@@ -9,6 +9,7 @@ defineOptions({ inheritAttrs: false })
 const { src } = defineProps<{
   src: string
   mobile?: boolean
+  label?: string
 }>()
 
 const imageRef = useTemplateRef('imageRef')
@@ -48,5 +49,8 @@ const height = ref('')
       }
     "
   />
-  <span class="self-center md:z-10" v-text="`${width} x ${height}`" />
+  <span class="self-center md:z-10">
+    {{ `${width} x ${height}` }}
+    <template v-if="label"> | {{ label }}</template>
+  </span>
 </template>

src/renderer/extensions/linearMode/MediaOutputPreview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent, useAttrs } from 'vue'
+import { computed, defineAsyncComponent, useAttrs } from 'vue'
 
 import ImagePreview from '@/renderer/extensions/linearMode/ImagePreview.vue'
 import VideoPreview from '@/renderer/extensions/linearMode/VideoPreview.vue'
@@ -19,40 +19,56 @@ const { output } = defineProps<{
 }>()
 
 const attrs = useAttrs()
+const mediaType = computed(() => getMediaType(output))
+const outputLabel = computed(
+  () => output.display_name?.trim() || output.filename
+)
 </script>
 <template>
-  <ImagePreview
-    v-if="getMediaType(output) === 'images'"
-    :class="attrs.class as string"
-    :mobile
-    :src="output.url"
-  />
-  <VideoPreview
-    v-else-if="getMediaType(output) === 'video'"
-    :src="output.url"
-    :class="
-      cn('flex-1 object-contain md:p-3 md:contain-size', attrs.class as string)
-    "
-  />
-  <audio
-    v-else-if="getMediaType(output) === 'audio'"
-    :class="cn('m-auto w-full', attrs.class as string)"
-    controls
-    :src="output.url"
-  />
-  <article
-    v-else-if="getMediaType(output) === 'text'"
-    :class="
-      cn(
-        'm-auto my-12 size-full max-w-2xl scroll-shadows-secondary-background overflow-y-auto rounded-lg bg-secondary-background p-4 whitespace-pre-wrap',
-        attrs.class as string
-      )
-    "
-    v-text="output.content"
-  />
-  <Preview3d
-    v-else-if="getMediaType(output) === '3d'"
-    :class="attrs.class as string"
-    :model-url="output.url"
-  />
+  <template v-if="mediaType === 'images' || mediaType === 'video'">
+    <ImagePreview
+      v-if="mediaType === 'images'"
+      :class="attrs.class as string"
+      :mobile
+      :src="output.url"
+      :label="outputLabel"
+    />
+    <VideoPreview
+      v-else
+      :src="output.url"
+      :label="outputLabel"
+      :class="
+        cn(
+          'flex-1 object-contain md:p-3 md:contain-size',
+          attrs.class as string
+        )
+      "
+    />
+  </template>
+  <template v-else>
+    <audio
+      v-if="mediaType === 'audio'"
+      :class="cn('m-auto w-full', attrs.class as string)"
+      controls
+      :src="output.url"
+    />
+    <article
+      v-else-if="mediaType === 'text'"
+      :class="
+        cn(
+          'm-auto my-12 size-full max-w-2xl scroll-shadows-secondary-background overflow-y-auto rounded-lg bg-secondary-background p-4 whitespace-pre-wrap',
+          attrs.class as string
+        )
+      "
+      v-text="output.content"
+    />
+    <Preview3d
+      v-else-if="mediaType === '3d'"
+      :class="attrs.class as string"
+      :model-url="output.url"
+    />
+    <span v-if="outputLabel" class="self-center text-sm">
+      {{ outputLabel }}
+    </span>
+  </template>
 </template>

src/renderer/extensions/linearMode/VideoPreview.vue

@@ -3,6 +3,7 @@ import { ref, useTemplateRef } from 'vue'
 
 const { src } = defineProps<{
   src: string
+  label?: string
 }>()
 
 const videoRef = useTemplateRef('videoRef')
@@ -23,5 +24,8 @@ const height = ref('')
       }
     "
   />
-  <span class="z-10 self-center" v-text="`${width} x ${height}`" />
+  <span class="z-10 self-center">
+    {{ `${width} x ${height}` }}
+    <template v-if="label"> | {{ label }}</template>
+  </span>
 </template>

src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue

@@ -96,7 +96,7 @@ import { useAudioService } from '@/services/audioService'
 import { useAudioPlayback } from '../composables/audio/useAudioPlayback'
 import { useAudioRecorder } from '../composables/audio/useAudioRecorder'
 import { useAudioWaveform } from '../composables/audio/useAudioWaveform'
-import { formatTime } from '../utils/audioUtils'
+import { formatTime } from '@/utils/formatUtil'
 
 const { t } = useI18n()
 

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts

@@ -55,6 +55,33 @@ vi.mock(
   })
 )
 
+const { mockMediaAssets, mockResolveOutputAssetItems } = vi.hoisted(() => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const { ref } = require('vue')
+  return {
+    mockMediaAssets: {
+      media: ref([]),
+      loading: ref(false),
+      error: ref(null),
+      fetchMediaList: vi.fn().mockResolvedValue([]),
+      refresh: vi.fn().mockResolvedValue([]),
+      loadMore: vi.fn(),
+      hasMore: ref(false),
+      isLoadingMore: ref(false)
+    },
+    mockResolveOutputAssetItems: vi.fn()
+  }
+})
+
+vi.mock('@/platform/assets/composables/media/useMediaAssets', () => ({
+  useMediaAssets: () => mockMediaAssets
+}))
+
+vi.mock('@/platform/assets/utils/outputAssetUtil', () => ({
+  resolveOutputAssetItems: (...args: unknown[]) =>
+    mockResolveOutputAssetItems(...args)
+}))
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -484,6 +511,229 @@ describe('WidgetSelectDropdown cloud asset mode (COM-14333)', () => {
   })
 })
 
+describe('WidgetSelectDropdown multi-output jobs', () => {
+  interface MultiOutputInstance extends ComponentPublicInstance {
+    outputItems: FormDropdownItem[]
+  }
+
+  function makeMultiOutputAsset(
+    jobId: string,
+    name: string,
+    nodeId: string,
+    outputCount: number
+  ) {
+    return {
+      id: jobId,
+      name,
+      preview_url: `/api/view?filename=${name}&type=output`,
+      tags: ['output'],
+      user_metadata: {
+        jobId,
+        nodeId,
+        subfolder: '',
+        outputCount,
+        allOutputs: [
+          {
+            filename: name,
+            subfolder: '',
+            type: 'output',
+            nodeId,
+            mediaType: 'images'
+          }
+        ]
+      }
+    }
+  }
+
+  function mountMultiOutput(
+    widget: SimplifiedWidget<string | undefined>,
+    modelValue: string | undefined
+  ): VueWrapper<MultiOutputInstance> {
+    return mount(WidgetSelectDropdown, {
+      props: { widget, modelValue, assetKind: 'image' as const },
+      global: { plugins: [PrimeVue, createTestingPinia(), i18n] }
+    }) as unknown as VueWrapper<MultiOutputInstance>
+  }
+
+  const defaultWidget = () =>
+    createMockWidget<string | undefined>({
+      value: 'output_001.png',
+      name: 'test_image',
+      type: 'combo',
+      options: { values: [] }
+    })
+
+  beforeEach(() => {
+    mockMediaAssets.media.value = []
+    mockResolveOutputAssetItems.mockReset()
+  })
+
+  it('shows all outputs after resolving multi-output jobs', async () => {
+    mockMediaAssets.media.value = [
+      makeMultiOutputAsset('job-1', 'preview.png', '5', 3)
+    ]
+
+    mockResolveOutputAssetItems.mockResolvedValue([
+      {
+        id: 'job-1-5-output_001.png',
+        name: 'output_001.png',
+        preview_url: '/api/view?filename=output_001.png&type=output',
+        tags: ['output']
+      },
+      {
+        id: 'job-1-5-output_002.png',
+        name: 'output_002.png',
+        preview_url: '/api/view?filename=output_002.png&type=output',
+        tags: ['output']
+      },
+      {
+        id: 'job-1-5-output_003.png',
+        name: 'output_003.png',
+        preview_url: '/api/view?filename=output_003.png&type=output',
+        tags: ['output']
+      }
+    ])
+
+    const wrapper = mountMultiOutput(defaultWidget(), 'output_001.png')
+
+    await vi.waitFor(() => {
+      expect(wrapper.vm.outputItems).toHaveLength(3)
+    })
+
+    expect(wrapper.vm.outputItems.map((i) => i.name)).toEqual([
+      'output_001.png [output]',
+      'output_002.png [output]',
+      'output_003.png [output]'
+    ])
+  })
+
+  it('shows preview output when job has only one output', () => {
+    mockMediaAssets.media.value = [
+      makeMultiOutputAsset('job-2', 'single.png', '3', 1)
+    ]
+
+    const widget = createMockWidget<string | undefined>({
+      value: 'single.png',
+      name: 'test_image',
+      type: 'combo',
+      options: { values: [] }
+    })
+    const wrapper = mountMultiOutput(widget, 'single.png')
+
+    expect(wrapper.vm.outputItems).toHaveLength(1)
+    expect(wrapper.vm.outputItems[0].name).toBe('single.png [output]')
+    expect(mockResolveOutputAssetItems).not.toHaveBeenCalled()
+  })
+
+  it('resolves two multi-output jobs independently', async () => {
+    mockMediaAssets.media.value = [
+      makeMultiOutputAsset('job-A', 'previewA.png', '1', 2),
+      makeMultiOutputAsset('job-B', 'previewB.png', '2', 2)
+    ]
+
+    mockResolveOutputAssetItems.mockImplementation(async (meta) => {
+      if (meta.jobId === 'job-A') {
+        return [
+          { id: 'A-1', name: 'a1.png', preview_url: '', tags: ['output'] },
+          { id: 'A-2', name: 'a2.png', preview_url: '', tags: ['output'] }
+        ]
+      }
+      return [
+        { id: 'B-1', name: 'b1.png', preview_url: '', tags: ['output'] },
+        { id: 'B-2', name: 'b2.png', preview_url: '', tags: ['output'] }
+      ]
+    })
+
+    const wrapper = mountMultiOutput(defaultWidget(), undefined)
+
+    await vi.waitFor(() => {
+      expect(wrapper.vm.outputItems).toHaveLength(4)
+    })
+
+    const names = wrapper.vm.outputItems.map((i) => i.name)
+    expect(names).toContain('a1.png [output]')
+    expect(names).toContain('a2.png [output]')
+    expect(names).toContain('b1.png [output]')
+    expect(names).toContain('b2.png [output]')
+  })
+
+  it('resolves outputs when allOutputs already contains all items', async () => {
+    mockMediaAssets.media.value = [
+      {
+        id: 'job-complete',
+        name: 'preview.png',
+        preview_url: '/api/view?filename=preview.png&type=output',
+        tags: ['output'],
+        user_metadata: {
+          jobId: 'job-complete',
+          nodeId: '1',
+          subfolder: '',
+          outputCount: 2,
+          allOutputs: [
+            {
+              filename: 'out1.png',
+              subfolder: '',
+              type: 'output',
+              nodeId: '1',
+              mediaType: 'images'
+            },
+            {
+              filename: 'out2.png',
+              subfolder: '',
+              type: 'output',
+              nodeId: '1',
+              mediaType: 'images'
+            }
+          ]
+        }
+      }
+    ]
+
+    mockResolveOutputAssetItems.mockResolvedValue([
+      { id: 'c-1', name: 'out1.png', preview_url: '', tags: ['output'] },
+      { id: 'c-2', name: 'out2.png', preview_url: '', tags: ['output'] }
+    ])
+
+    const wrapper = mountMultiOutput(defaultWidget(), undefined)
+
+    await vi.waitFor(() => {
+      expect(wrapper.vm.outputItems).toHaveLength(2)
+    })
+
+    expect(mockResolveOutputAssetItems).toHaveBeenCalledWith(
+      expect.objectContaining({ jobId: 'job-complete' }),
+      expect.any(Object)
+    )
+    const names = wrapper.vm.outputItems.map((i) => i.name)
+    expect(names).toEqual(['out1.png [output]', 'out2.png [output]'])
+  })
+
+  it('falls back to preview when resolver rejects', async () => {
+    const consoleWarnSpy = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {})
+
+    mockMediaAssets.media.value = [
+      makeMultiOutputAsset('job-fail', 'preview.png', '1', 3)
+    ]
+    mockResolveOutputAssetItems.mockRejectedValue(new Error('network error'))
+
+    const wrapper = mountMultiOutput(defaultWidget(), undefined)
+
+    await vi.waitFor(() => {
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Failed to resolve multi-output job',
+        'job-fail',
+        expect.any(Error)
+      )
+    })
+
+    expect(wrapper.vm.outputItems).toHaveLength(1)
+    expect(wrapper.vm.outputItems[0].name).toBe('preview.png [output]')
+    consoleWarnSpy.mockRestore()
+  })
+})
+
 describe('WidgetSelectDropdown undo tracking', () => {
   interface UndoTrackingInstance extends ComponentPublicInstance {
     updateSelectedItems: (selectedSet: Set<string>) => void

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { capitalize } from 'es-toolkit'
-import { computed, provide, ref, toRef, watch } from 'vue'
+import { computed, provide, ref, shallowRef, toRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
@@ -31,6 +31,9 @@ import type {
 } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
 import WidgetLayoutField from '@/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue'
 import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useAssetsStore } from '@/stores/assetsStore'
@@ -153,24 +156,82 @@ function assetKindToMediaType(kind: AssetKind): string {
   return kind === 'mesh' ? '3D' : kind
 }
 
+/**
+ * Per-job cache of resolved outputs for multi-output jobs.
+ * Keyed by jobId, populated lazily via resolveOutputAssetItems which
+ * fetches full outputs through getJobDetail (itself LRU-cached).
+ */
+const resolvedByJobId = shallowRef(new Map<string, AssetItem[]>())
+const pendingJobIds = new Set<string>()
+
+watch(
+  () => outputMediaAssets.media.value,
+  (assets, _, onCleanup) => {
+    let cancelled = false
+    onCleanup(() => {
+      cancelled = true
+    })
+    pendingJobIds.clear()
+
+    for (const asset of assets) {
+      const meta = getOutputAssetMetadata(asset.user_metadata)
+      if (!meta) continue
+
+      const outputCount = meta.outputCount ?? meta.allOutputs?.length ?? 0
+      if (
+        outputCount <= 1 ||
+        resolvedByJobId.value.has(meta.jobId) ||
+        pendingJobIds.has(meta.jobId)
+      )
+        continue
+
+      pendingJobIds.add(meta.jobId)
+      void resolveOutputAssetItems(meta, { createdAt: asset.created_at })
+        .then((resolved) => {
+          if (cancelled || !resolved.length) return
+          const next = new Map(resolvedByJobId.value)
+          next.set(meta.jobId, resolved)
+          resolvedByJobId.value = next
+        })
+        .catch((error) => {
+          console.warn('Failed to resolve multi-output job', meta.jobId, error)
+        })
+        .finally(() => {
+          pendingJobIds.delete(meta.jobId)
+        })
+    }
+  },
+  { immediate: true }
+)
+
 const outputItems = computed<FormDropdownItem[]>(() => {
   if (!['image', 'video', 'audio', 'mesh'].includes(props.assetKind ?? ''))
     return []
 
   const targetMediaType = assetKindToMediaType(props.assetKind!)
-  const outputFiles = outputMediaAssets.media.value.filter(
-    (asset) => getMediaTypeFromFilename(asset.name) === targetMediaType
-  )
+  const seen = new Set<string>()
+  const items: FormDropdownItem[] = []
 
-  return outputFiles.map((asset) => {
+  const assets = outputMediaAssets.media.value.flatMap((asset) => {
+    const meta = getOutputAssetMetadata(asset.user_metadata)
+    const resolved = meta ? resolvedByJobId.value.get(meta.jobId) : undefined
+    return resolved ?? [asset]
+  })
+
+  for (const asset of assets) {
+    if (getMediaTypeFromFilename(asset.name) !== targetMediaType) continue
+    if (seen.has(asset.id)) continue
+    seen.add(asset.id)
     const annotatedPath = `${asset.name} [output]`
-    return {
+    items.push({
       id: `output-${annotatedPath}`,
       preview_url: asset.preview_url || getMediaUrl(asset.name, 'output'),
       name: annotatedPath,
       label: getDisplayLabel(annotatedPath)
-    }
-  })
+    })
+  }
+
+  return items
 })
 
 /**

src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue

@@ -156,7 +156,7 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
-import { formatTime } from '../../utils/audioUtils'
+import { formatTime } from '@/utils/formatUtil'
 
 const { t } = useI18n()
 const toast = useToast()

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -4,6 +4,7 @@ import Popover from 'primevue/popover'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 
 import type {
@@ -50,6 +51,7 @@ interface Props {
 }
 
 const { t } = useI18n()
+const overlayProps = useTransformCompatOverlayProps()
 
 const {
   placeholder,
@@ -209,6 +211,7 @@ function handleSelection(item: FormDropdownItem, index: number) {
       ref="popoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue

@@ -4,6 +4,7 @@ import { ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import type {
   FilterOption,
   OwnershipFilterOption,
@@ -15,6 +16,7 @@ import FormSearchInput from '../FormSearchInput.vue'
 import type { LayoutMode, SortOption } from './types'
 
 const { t } = useI18n()
+const overlayProps = useTransformCompatOverlayProps()
 
 defineProps<{
   sortOptions: SortOption[]
@@ -132,6 +134,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="sortPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {
@@ -194,6 +197,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="ownershipPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {
@@ -256,6 +260,7 @@ function toggleBaseModelSelection(item: FilterOption) {
       ref="baseModelPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
       unstyled
       :pt="{
         root: {

src/renderer/extensions/vueNodes/widgets/utils/audioUtils.ts

@@ -1,17 +1,6 @@
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 
-/**
- * Format time in MM:SS format
- */
-export function formatTime(seconds: number): string {
-  if (isNaN(seconds) || seconds === 0) return '0:00'
-
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.floor(seconds % 60)
-  return `${mins}:${secs.toString().padStart(2, '0')}`
-}
-
 export function getResourceURL(
   subfolder: string,
   filename: string,

src/schemas/apiSchema.ts

@@ -382,6 +382,7 @@ const zSettings = z.object({
   'Comfy.WorkflowActions.SeenItems': z.array(z.string()),
   'Comfy.Keybinding.UnsetBindings': z.array(zKeybinding),
   'Comfy.Keybinding.NewBindings': z.array(zKeybinding),
+  'Comfy.Keybinding.CurrentPreset': z.string(),
   'Comfy.Extension.Disabled': z.array(z.string()),
   'Comfy.LinkRenderMode': z.number(),
   'Comfy.Node.AutoSnapLinkToSlot': z.boolean(),
@@ -414,6 +415,7 @@ const zSettings = z.object({
   'Comfy.Canvas.LeftMouseClickBehavior': z.string(),
   'Comfy.Canvas.MouseWheelScroll': z.string(),
   'Comfy.VueNodes.Enabled': z.boolean(),
+  'Comfy.AppBuilder.VueNodeSwitchDismissed': z.boolean(),
   'Comfy.VueNodes.AutoScaleLayout': z.boolean(),
   'Comfy.Assets.UseAssetAPI': z.boolean(),
   'Comfy.Queue.QPOV2': z.boolean(),

src/services/load3dService.ts

@@ -110,7 +110,7 @@ interface Load3DNode extends LGraphNode {
 
 const viewerInstances = new Map<NodeId, ReturnType<UseLoad3dViewerFn>>()
 
-export class Load3dService {
+class Load3dService {
   private static instance: Load3dService
 
   private constructor() {}

src/stores/appModeStore.test.ts

@@ -47,6 +47,24 @@ vi.mock('@/components/builder/useEmptyWorkflowDialog', () => ({
   useEmptyWorkflowDialog: () => mockEmptyWorkflowDialog
 }))
 
+const mockSettings = vi.hoisted(() => {
+  const store: Record<string, unknown> = {}
+  return {
+    store,
+    get: vi.fn((key: string) => store[key] ?? false),
+    set: vi.fn(async (key: string, value: unknown) => {
+      store[key] = value
+    }),
+    reset() {
+      for (const key of Object.keys(store)) delete store[key]
+    }
+  }
+})
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => mockSettings
+}))
+
 import { useAppModeStore } from './appModeStore'
 
 function createBuilderWorkflow(
@@ -72,6 +90,7 @@ describe('appModeStore', () => {
     setActivePinia(createTestingPinia({ stubActions: false }))
     vi.mocked(app.rootGraph).extra = {}
     mockResolveNode.mockReturnValue(undefined)
+    mockSettings.reset()
     vi.mocked(app.rootGraph).nodes = [{ id: 1 } as LGraphNode]
     workflowStore = useWorkflowStore()
     store = useAppModeStore()
@@ -197,14 +216,12 @@ describe('appModeStore', () => {
         id == 1 ? (node1 as unknown as LGraphNode) : undefined
       )
 
-      workflowStore.activeWorkflow = workflowWithLinearData(
-        [
+      store.loadSelections({
+        inputs: [
           [1, 'prompt'],
           [99, 'width']
-        ],
-        []
-      )
-      await nextTick()
+        ]
+      })
 
       expect(store.selectedInputs).toEqual([[1, 'prompt']])
     })
@@ -215,14 +232,12 @@ describe('appModeStore', () => {
         id == 1 ? (node1 as unknown as LGraphNode) : undefined
       )
 
-      workflowStore.activeWorkflow = workflowWithLinearData(
-        [
+      store.loadSelections({
+        inputs: [
           [1, 'prompt'],
           [1, 'deleted_widget']
-        ],
-        []
-      )
-      await nextTick()
+        ]
+      })
 
       expect(store.selectedInputs).toEqual([
         [1, 'prompt'],
@@ -236,8 +251,7 @@ describe('appModeStore', () => {
         id == 1 ? (node1 as unknown as LGraphNode) : undefined
       )
 
-      workflowStore.activeWorkflow = workflowWithLinearData([], [1, 99])
-      await nextTick()
+      store.loadSelections({ outputs: [1, 99] })
 
       expect(store.selectedOutputs).toEqual([1])
     })
@@ -247,8 +261,11 @@ describe('appModeStore', () => {
 
       // Initially nodes are not resolvable — pruning removes them
       mockResolveNode.mockReturnValue(undefined)
-      workflowStore.activeWorkflow = workflowWithLinearData([[1, 'seed']], [1])
+      const inputs: [number, string][] = [[1, 'seed']]
+      workflowStore.activeWorkflow = workflowWithLinearData(inputs, [1])
+      store.loadSelections({ inputs })
       await nextTick()
+
       expect(store.selectedInputs).toEqual([])
       expect(store.selectedOutputs).toEqual([])
 
@@ -268,8 +285,7 @@ describe('appModeStore', () => {
     it('hasOutputs is false when all output nodes are deleted', async () => {
       mockResolveNode.mockReturnValue(undefined)
 
-      workflowStore.activeWorkflow = workflowWithLinearData([], [10, 20])
-      await nextTick()
+      store.loadSelections({ outputs: [10, 20] })
 
       expect(store.selectedOutputs).toEqual([])
       expect(store.hasOutputs).toBe(false)
@@ -329,4 +345,69 @@ describe('appModeStore', () => {
       })
     })
   })
+
+  describe('autoEnableVueNodes', () => {
+    it('enables Vue nodes when entering select mode with them disabled', async () => {
+      mockSettings.store['Comfy.VueNodes.Enabled'] = false
+      workflowStore.activeWorkflow = createBuilderWorkflow('graph')
+
+      store.enterBuilder()
+      await nextTick()
+
+      expect(mockSettings.set).toHaveBeenCalledWith(
+        'Comfy.VueNodes.Enabled',
+        true
+      )
+    })
+
+    it('does not enable Vue nodes when already enabled', async () => {
+      mockSettings.store['Comfy.VueNodes.Enabled'] = true
+      workflowStore.activeWorkflow = createBuilderWorkflow('graph')
+
+      store.enterBuilder()
+      await nextTick()
+
+      expect(mockSettings.set).not.toHaveBeenCalledWith(
+        'Comfy.VueNodes.Enabled',
+        expect.anything()
+      )
+    })
+
+    it('shows popup when Vue nodes are switched on and not dismissed', async () => {
+      mockSettings.store['Comfy.VueNodes.Enabled'] = false
+      mockSettings.store['Comfy.AppBuilder.VueNodeSwitchDismissed'] = false
+      workflowStore.activeWorkflow = createBuilderWorkflow('graph')
+
+      store.enterBuilder()
+      await nextTick()
+
+      expect(store.showVueNodeSwitchPopup).toBe(true)
+    })
+
+    it('does not show popup when previously dismissed', async () => {
+      mockSettings.store['Comfy.VueNodes.Enabled'] = false
+      mockSettings.store['Comfy.AppBuilder.VueNodeSwitchDismissed'] = true
+      workflowStore.activeWorkflow = createBuilderWorkflow('graph')
+
+      store.enterBuilder()
+      await nextTick()
+
+      expect(store.showVueNodeSwitchPopup).toBe(false)
+    })
+
+    it('does not enable Vue nodes when entering builder:arrange', async () => {
+      mockSettings.store['Comfy.VueNodes.Enabled'] = false
+      workflowStore.activeWorkflow = createBuilderWorkflow('app')
+      store.selectedOutputs.push(1)
+
+      store.enterBuilder()
+      await nextTick()
+
+      expect(workflowStore.activeWorkflow!.activeMode).toBe('builder:arrange')
+      expect(mockSettings.set).not.toHaveBeenCalledWith(
+        'Comfy.VueNodes.Enabled',
+        expect.anything()
+      )
+    })
+  })
 })

src/stores/appModeStore.ts

@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
-import { reactive, computed, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useEventListener } from '@vueuse/core'
 
 import { useEmptyWorkflowDialog } from '@/components/builder/useEmptyWorkflowDialog'
 import { useAppMode } from '@/composables/useAppMode'
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LinearData } from '@/platform/workflow/management/stores/comfyWorkflow'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -21,13 +22,16 @@ export function nodeTypeValidForApp(type: string) {
 
 export const useAppModeStore = defineStore('appMode', () => {
   const { getCanvas } = useCanvasStore()
+  const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
   const { mode, setMode, isBuilderMode, isSelectMode } = useAppMode()
   const emptyWorkflowDialog = useEmptyWorkflowDialog()
 
-  const selectedInputs = reactive<[NodeId, string][]>([])
-  const selectedOutputs = reactive<NodeId[]>([])
-  const hasOutputs = computed(() => !!selectedOutputs.length)
+  const showVueNodeSwitchPopup = ref(false)
+
+  const selectedInputs = ref<[NodeId, string][]>([])
+  const selectedOutputs = ref<NodeId[]>([])
+  const hasOutputs = computed(() => !!selectedOutputs.value.length)
   const hasNodes = computed(() => {
     // Nodes are not reactive, so trigger recomputation when workflow changes
     void workflowStore.activeWorkflow
@@ -54,8 +58,8 @@ export const useAppModeStore = defineStore('appMode', () => {
 
   function loadSelections(data: Partial<LinearData> | undefined) {
     const { inputs, outputs } = pruneLinearData(data)
-    selectedInputs.splice(0, selectedInputs.length, ...inputs)
-    selectedOutputs.splice(0, selectedOutputs.length, ...outputs)
+    selectedInputs.value = inputs
+    selectedOutputs.value = outputs
   }
 
   function resetSelectedToWorkflow() {
@@ -65,20 +69,6 @@ export const useAppModeStore = defineStore('appMode', () => {
     loadSelections(activeWorkflow.changeTracker?.activeState?.extra?.linearData)
   }
 
-  watch(
-    () => workflowStore.activeWorkflow,
-    (newWorkflow) => {
-      if (newWorkflow) {
-        loadSelections(
-          newWorkflow.changeTracker?.activeState?.extra?.linearData
-        )
-      } else {
-        loadSelections(undefined)
-      }
-    },
-    { immediate: true }
-  )
-
   useEventListener(
     () => app.rootGraph?.events,
     'configured',
@@ -88,7 +78,7 @@ export const useAppModeStore = defineStore('appMode', () => {
   watch(
     () =>
       isBuilderMode.value
-        ? { inputs: selectedInputs, outputs: selectedOutputs }
+        ? { inputs: selectedInputs.value, outputs: selectedOutputs.value }
         : null,
     (data) => {
       if (!data || ChangeTracker.isLoadingGraph) return
@@ -103,17 +93,33 @@ export const useAppModeStore = defineStore('appMode', () => {
     { deep: true }
   )
 
-  let unwatch: () => void | undefined
-  watch(isSelectMode, (inSelect) => {
+  let unwatchReadOnly: (() => void) | undefined
+  function enforceReadOnly(inSelect: boolean) {
     const { state } = getCanvas()
     if (!state) return
     state.readOnly = inSelect
-    unwatch?.()
+    unwatchReadOnly?.()
     if (inSelect)
-      unwatch = watch(
+      unwatchReadOnly = watch(
         () => state.readOnly,
         () => (state.readOnly = true)
       )
+  }
+
+  function autoEnableVueNodes(inSelect: boolean) {
+    if (!inSelect) return
+    if (!settingStore.get('Comfy.VueNodes.Enabled')) {
+      void settingStore.set('Comfy.VueNodes.Enabled', true)
+
+      if (!settingStore.get('Comfy.AppBuilder.VueNodeSwitchDismissed')) {
+        showVueNodeSwitchPopup.value = true
+      }
+    }
+  }
+
+  watch(isSelectMode, (inSelect) => {
+    enforceReadOnly(inSelect)
+    autoEnableVueNodes(inSelect)
   })
 
   function enterBuilder() {
@@ -144,10 +150,10 @@ export const useAppModeStore = defineStore('appMode', () => {
     const storeName = isPromotedWidgetView(widget)
       ? widget.sourceWidgetName
       : widget.name
-    const index = selectedInputs.findIndex(
+    const index = selectedInputs.value.findIndex(
       ([id, name]) => storeId == id && storeName === name
     )
-    if (index !== -1) selectedInputs.splice(index, 1)
+    if (index !== -1) selectedInputs.value.splice(index, 1)
   }
 
   return {
@@ -155,10 +161,12 @@ export const useAppModeStore = defineStore('appMode', () => {
     exitBuilder,
     hasNodes,
     hasOutputs,
+    loadSelections,
     pruneLinearData,
     removeSelectedInput,
     resetSelectedToWorkflow,
     selectedInputs,
-    selectedOutputs
+    selectedOutputs,
+    showVueNodeSwitchPopup
   }
 })

src/utils/categoryUtil.ts

@@ -73,6 +73,7 @@ const PROVIDER_COLORS: Record<string, string | [string, string]> = {
   'moonvalley-marey': '#DAD9C5',
   openai: '#B6B6B6',
   pixverse: ['#B465E6', '#E8632A'],
+  'quiver-ai': '#B6B6B6',
   recraft: '#B6B6B6',
   reve: '#B6B6B6',
   rodin: '#F7F7F7',

src/utils/test-utils.ts

@@ -0,0 +1,49 @@
+import type { RenderResult } from '@testing-library/vue'
+import { render } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import type { ComponentMountingOptions } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import PrimeVue from 'primevue/config'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+function createDefaultPlugins() {
+  return [
+    PrimeVue,
+    createTestingPinia({ stubActions: false }),
+    createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: enMessages }
+    })
+  ]
+}
+
+function renderWithDefaults<C>(
+  component: C,
+  options?: ComponentMountingOptions<C> & { setupUser?: boolean }
+): RenderResult & { user: ReturnType<typeof userEvent.setup> | undefined } {
+  const { setupUser = true, global: globalOptions, ...rest } = options ?? {}
+  const user = setupUser ? userEvent.setup() : undefined
+
+  const result = render(
+    component as Parameters<typeof render>[0],
+    {
+      global: {
+        plugins: [...createDefaultPlugins(), ...(globalOptions?.plugins ?? [])],
+        stubs: globalOptions?.stubs,
+        directives: globalOptions?.directives
+      },
+      ...rest
+    } as Parameters<typeof render>[1]
+  )
+
+  return {
+    ...result,
+    user
+  }
+}
+
+export { renderWithDefaults as render }
+export { screen } from '@testing-library/vue'

tsconfig.json

@@ -30,7 +30,11 @@
       "@tests-ui/*": ["./tests-ui/*"]
     },
     "typeRoots": ["src/types", "node_modules/@types", "./node_modules"],
-    "types": ["vitest/globals", "@webgpu/types"],
+    "types": [
+      "vitest/globals",
+      "@webgpu/types",
+      "@testing-library/jest-dom/vitest"
+    ],
     "outDir": "./dist",
     "rootDir": "./"
   },

vite.config.mts

@@ -638,6 +638,7 @@ export default defineConfig({
 
   optimizeDeps: {
     exclude: ['@comfyorg/comfyui-electron-types'],
+    include: ['primevue/datatable', 'primevue/column'],
     entries: ['index.html']
   },
 

vitest.setup.ts

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom/vitest'
 import { vi } from 'vitest'
 import 'vue'