feat: add WaveAudioPlayer with waveform visualization and authenticated audio fetch (#10158)

## Summary

Add a waveform-based audio player component (`WaveAudioPlayer`)
replacing the native `<audio>` element, with authenticated API fetch for
cloud audio playback.

## Changes

- **What**:
- Add `useWaveAudioPlayer` composable with waveform visualization from
audio data (Web Audio API `decodeAudioData`), playback controls, and
seek support
- Add `WaveAudioPlayer.vue` component with compact (inline waveform +
time) and expanded (full transport controls) variants
- Replace native `<audio>` in `MediaAudioTop.vue` and `ResultAudio.vue`
with `WaveAudioPlayer`
- Use `api.fetchApi()` instead of bare `fetch()` to include Firebase JWT
auth headers, fixing 401 errors in cloud environments
  - Add Storybook stories and unit tests

## Review Focus

- The audio URL is fetched via `api.fetchApi()` with auth headers,
converted to a Blob URL, then passed to the native `<audio>` element.
This avoids 401 Unauthorized in cloud environments where `/api/view`
requires authentication.
- URL-to-route extraction logic (`url.includes(apiBase)`) handles both
full API URLs and relative paths.


[screen-capture.webm](https://github.com/user-attachments/assets/44e61812-0391-4b47-a199-92927e75f8b4)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10158-feat-add-WaveAudioPlayer-with-waveform-visualization-and-authenticated-audio-fetch-3266d73d365081beab3fc6274c39fcd4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>

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/helpers/QueueHelper.ts

@@ -3,9 +3,6 @@ import type { Page, Route } from '@playwright/test'
 export class QueueHelper {
   private queueRouteHandler: ((route: Route) => void) | null = null
   private historyRouteHandler: ((route: Route) => void) | null = null
-  private jobsRouteHandler: ((route: Route) => void) | null = null
-  private queueJobs: Array<Record<string, unknown>> = []
-  private historyJobs: Array<Record<string, unknown>> = []
 
   constructor(private readonly page: Page) {}
 
@@ -16,26 +13,6 @@ export class QueueHelper {
     running: number = 0,
     pending: number = 0
   ): Promise<void> {
-    const baseTime = Date.now()
-    this.queueJobs = [
-      ...Array.from({ length: running }, (_, i) => ({
-        id: `running-${i}`,
-        status: 'in_progress',
-        create_time: baseTime - i * 1000,
-        execution_start_time: baseTime - 5000 - i * 1000,
-        execution_end_time: null,
-        priority: i + 1
-      })),
-      ...Array.from({ length: pending }, (_, i) => ({
-        id: `pending-${i}`,
-        status: 'pending',
-        create_time: baseTime - (running + i) * 1000,
-        execution_start_time: null,
-        execution_end_time: null,
-        priority: running + i + 1
-      }))
-    ]
-
     this.queueRouteHandler = (route: Route) =>
       route.fulfill({
         status: 200,
@@ -58,7 +35,6 @@ export class QueueHelper {
         })
       })
     await this.page.route('**/api/queue', this.queueRouteHandler)
-    await this.installJobsRoute()
   }
 
   /**
@@ -67,30 +43,6 @@ export class QueueHelper {
   async mockHistory(
     jobs: Array<{ promptId: string; status: 'success' | 'error' }>
   ): Promise<void> {
-    const baseTime = Date.now()
-    this.historyJobs = jobs.map((job, index) => {
-      const completed = job.status === 'success'
-
-      return {
-        id: job.promptId,
-        status: completed ? 'completed' : 'failed',
-        create_time: baseTime - index * 1000,
-        execution_start_time: baseTime - 5000 - index * 1000,
-        execution_end_time: baseTime - index * 1000,
-        outputs_count: completed ? 1 : 0,
-        workflow_id: `workflow-${job.promptId}`,
-        preview_output: completed
-          ? {
-              filename: `${job.promptId}.png`,
-              subfolder: '',
-              type: 'output',
-              nodeId: '1',
-              mediaType: 'images'
-            }
-          : null
-      }
-    })
-
     const history: Record<string, unknown> = {}
     for (const job of jobs) {
       history[job.promptId] = {
@@ -109,44 +61,6 @@ export class QueueHelper {
         body: JSON.stringify(history)
       })
     await this.page.route('**/api/history**', this.historyRouteHandler)
-    await this.installJobsRoute()
-  }
-
-  private async installJobsRoute() {
-    if (this.jobsRouteHandler) {
-      return
-    }
-
-    this.jobsRouteHandler = (route: Route) => {
-      const url = new URL(route.request().url())
-      const statuses =
-        url.searchParams
-          .get('status')
-          ?.split(',')
-          .filter((status) => status.length > 0) ?? []
-      const offset = Number(url.searchParams.get('offset') ?? 0)
-      const limit = Number(url.searchParams.get('limit') ?? 200)
-      const jobs = [...this.queueJobs, ...this.historyJobs].filter(
-        (job) => statuses.length === 0 || statuses.includes(String(job.status))
-      )
-      const paginatedJobs = jobs.slice(offset, offset + limit)
-
-      void route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          jobs: paginatedJobs,
-          pagination: {
-            offset,
-            limit,
-            total: jobs.length,
-            has_more: offset + paginatedJobs.length < jobs.length
-          }
-        })
-      })
-    }
-
-    await this.page.route('**/api/jobs**', this.jobsRouteHandler)
   }
 
   /**
@@ -161,9 +75,5 @@ export class QueueHelper {
       await this.page.unroute('**/api/history**', this.historyRouteHandler)
       this.historyRouteHandler = null
     }
-    if (this.jobsRouteHandler) {
-      await this.page.unroute('**/api/jobs**', this.jobsRouteHandler)
-      this.jobsRouteHandler = null
-    }
   }
 }

browser_tests/fixtures/selectors.ts

@@ -64,6 +64,7 @@ export const TestIds = {
   },
   builder: {
     ioItem: 'builder-io-item',
+    ioItemTitle: 'builder-io-item-title',
     widgetActionsMenu: 'widget-actions-menu'
   },
   breadcrumb: {

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

@@ -82,7 +82,9 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
-  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 +93,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 +106,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/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"]')

browser_tests/tests/sidebar/assetsSidebar.spec.ts

@@ -1,38 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../../fixtures/ComfyPage'
-
-test.describe('Assets Sidebar', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.queue.mockHistory([
-      { promptId: 'history-asset-1', status: 'success' }
-    ])
-    await comfyPage.setup({ clearStorage: false })
-
-    await comfyPage.page.getByRole('button', { name: /^Assets/ }).click()
-    await expect(
-      comfyPage.page.getByRole('button', {
-        name: /history-asset-1\.png/i
-      })
-    ).toBeVisible()
-  })
-
-  test('actions menu closes on scroll', async ({ comfyPage }) => {
-    const assetCard = comfyPage.page.getByRole('button', {
-      name: /history-asset-1\.png/i
-    })
-
-    await assetCard.hover()
-    await assetCard.getByRole('button', { name: /more options/i }).click()
-
-    const menuPanel = comfyPage.page.locator('.media-asset-menu-panel')
-    await expect(menuPanel).toBeVisible()
-
-    await comfyPage.page.evaluate(() => {
-      window.dispatchEvent(new Event('scroll'))
-    })
-
-    await expect(menuPanel).toBeHidden()
-  })
-})

browser_tests/tests/sidebar/jobHistorySidebar.spec.ts

@@ -1,53 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../../fixtures/ComfyPage'
-
-test.describe('Job History Sidebar', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.queue.mockQueueState()
-    await comfyPage.queue.mockHistory([
-      { promptId: 'history-job-1', status: 'success' }
-    ])
-    await comfyPage.settings.setSetting('Comfy.Queue.QPOV2', true)
-    await comfyPage.setup({ clearStorage: false })
-
-    await comfyPage.page.getByTestId('queue-overlay-toggle').click()
-    await expect(
-      comfyPage.page.locator('[data-job-id="history-job-1"]')
-    ).toBeVisible()
-  })
-
-  test('hover popover and actions menu stay clickable', async ({
-    comfyPage
-  }) => {
-    const jobRow = comfyPage.page.locator('[data-job-id="history-job-1"]')
-    await jobRow.hover()
-
-    const popover = comfyPage.page.locator('.job-details-popover')
-    await expect(popover).toBeVisible()
-    await popover.getByRole('button', { name: /^copy$/i }).click()
-
-    await jobRow.hover()
-    const moreButton = jobRow.locator('.job-actions-menu-trigger')
-    await expect(moreButton).toBeVisible()
-    await moreButton.click()
-
-    const menuPanel = comfyPage.page.locator('.job-menu-panel')
-    await expect(menuPanel).toBeVisible()
-
-    const box = await menuPanel.boundingBox()
-    if (!box) {
-      throw new Error('Job actions menu did not render a bounding box')
-    }
-
-    await comfyPage.page.mouse.move(
-      box.x + box.width / 2,
-      box.y + Math.min(box.height / 2, 24)
-    )
-    await expect(menuPanel).toBeVisible()
-
-    await menuPanel.getByRole('menuitem', { name: /copy job id/i }).click()
-    await expect(menuPanel).toBeHidden()
-  })
-})

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')}`
+}

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/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/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/queue/QueueOverlayExpanded.test.ts

@@ -4,7 +4,7 @@ import { describe, expect, it, vi } from 'vitest'
 import type { JobListItem } from '@/composables/queue/useJobList'
 
 vi.mock('@/composables/queue/useJobMenu', () => ({
-  useJobMenu: () => ({ getJobMenuEntries: () => [] })
+  useJobMenu: () => ({ jobMenuEntries: [] })
 }))
 
 vi.mock('@/composables/useErrorHandling', () => ({

src/components/queue/QueueOverlayExpanded.vue

@@ -23,17 +23,24 @@
     <div class="min-h-0 flex-1 overflow-y-auto">
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
-        :get-menu-entries="getJobMenuEntries"
         @cancel-item="onCancelItemEvent"
         @delete-item="onDeleteItemEvent"
-        @menu-action="onJobMenuAction"
         @view-item="$emit('viewItem', $event)"
+        @menu="onMenuItem"
       />
     </div>
+
+    <JobContextMenu
+      ref="jobContextMenuRef"
+      :entries="jobMenuEntries"
+      @action="onJobMenuAction"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import type {
   JobGroup,
   JobListItem,
@@ -45,6 +52,7 @@ import { useJobMenu } from '@/composables/queue/useJobMenu'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
+import JobContextMenu from './job/JobContextMenu.vue'
 import JobAssetsList from './job/JobAssetsList.vue'
 import JobFiltersBar from './job/JobFiltersBar.vue'
 
@@ -70,10 +78,13 @@ const emit = defineEmits<{
   (e: 'viewItem', item: JobListItem): void
 }>()
 
+const currentMenuItem = ref<JobListItem | null>(null)
+const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
-const { getJobMenuEntries } = useJobMenu(undefined, (item) =>
-  emit('viewItem', item)
+const { jobMenuEntries } = useJobMenu(
+  () => currentMenuItem.value,
+  (item) => emit('viewItem', item)
 )
 
 const onCancelItemEvent = (item: JobListItem) => {
@@ -84,8 +95,14 @@ const onDeleteItemEvent = (item: JobListItem) => {
   emit('deleteItem', item)
 }
 
+const onMenuItem = (item: JobListItem, event: Event) => {
+  currentMenuItem.value = item
+  jobContextMenuRef.value?.open(event)
+}
+
 const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
   if (entry.kind === 'divider') return
   if (entry.onClick) await entry.onClick()
+  jobContextMenuRef.value?.hide()
 })
 </script>

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

@@ -1,114 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import JobActionsMenu from '@/components/queue/job/JobActionsMenu.vue'
-import type { MenuEntry } from '@/composables/queue/useJobMenu'
-
-const buttonStub = {
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  template: `
-    <button
-      class="button-stub"
-      type="button"
-      :data-disabled="String(disabled)"
-      :disabled="disabled"
-      v-bind="$attrs"
-    >
-      <slot />
-    </button>
-  `
-}
-
-const createEntries = (): MenuEntry[] => [
-  { key: 'enabled', label: 'Enabled action', onClick: vi.fn() },
-  {
-    key: 'disabled',
-    label: 'Disabled action',
-    disabled: true,
-    onClick: vi.fn()
-  }
-]
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  fallbackLocale: 'en',
-  missingWarn: false,
-  fallbackWarn: false,
-  messages: {
-    en: {}
-  }
-})
-
-const mountComponent = (entries: MenuEntry[]) =>
-  mount(JobActionsMenu, {
-    attachTo: document.body,
-    props: { entries },
-    global: {
-      plugins: [i18n],
-      stubs: {
-        Button: buttonStub
-      }
-    }
-  })
-
-const getTriggerButton = () =>
-  document.body.querySelector<HTMLButtonElement>('.job-actions-menu-trigger')
-
-const getMenuButtons = () =>
-  Array.from(
-    document.body.querySelectorAll<HTMLButtonElement>(
-      '.job-menu-panel .button-stub'
-    )
-  )
-
-const isMenuVisible = () =>
-  document.body.querySelector('.job-menu-panel') !== null
-
-const waitForMenuUpdate = async () => {
-  await nextTick()
-  await nextTick()
-}
-
-afterEach(() => {
-  document.body.innerHTML = ''
-})
-
-describe('JobActionsMenu', () => {
-  it('toggles when the trigger is clicked twice', async () => {
-    const wrapper = mountComponent(createEntries())
-
-    getTriggerButton()?.click()
-    await waitForMenuUpdate()
-    expect(isMenuVisible()).toBe(true)
-
-    getTriggerButton()?.click()
-    await waitForMenuUpdate()
-    expect(isMenuVisible()).toBe(false)
-
-    wrapper.unmount()
-  })
-
-  it('emits the selected action and closes the menu', async () => {
-    const entries = createEntries()
-    const wrapper = mountComponent(entries)
-
-    getTriggerButton()?.click()
-    await waitForMenuUpdate()
-
-    getMenuButtons()[0].click()
-    await waitForMenuUpdate()
-
-    expect(wrapper.emitted('action')).toEqual([[entries[0]]])
-    expect(isMenuVisible()).toBe(false)
-
-    wrapper.unmount()
-  })
-})

src/components/queue/job/JobActionsMenu.vue

@@ -1,50 +0,0 @@
-<template>
-  <DropdownMenuRoot v-model:open="open">
-    <DropdownMenuTrigger as-child>
-      <slot>
-        <Button
-          class="job-actions-menu-trigger"
-          variant="secondary"
-          size="icon"
-          :aria-label="t('g.more')"
-        >
-          <i class="icon-[lucide--ellipsis] size-4" />
-        </Button>
-      </slot>
-    </DropdownMenuTrigger>
-    <DropdownMenuPortal>
-      <DropdownMenuContent
-        :side-offset="4"
-        :collision-padding="8"
-        class="z-1700 bg-transparent p-0 shadow-lg"
-      >
-        <JobMenuPanel :entries @action="emit('action', $event)" />
-      </DropdownMenuContent>
-    </DropdownMenuPortal>
-  </DropdownMenuRoot>
-</template>
-
-<script setup lang="ts">
-import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  DropdownMenuRoot,
-  DropdownMenuTrigger
-} from 'reka-ui'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import type { MenuEntry } from '@/composables/queue/useJobMenu'
-
-import JobMenuPanel from './JobMenuPanel.vue'
-
-const open = defineModel<boolean>('open', { default: false })
-
-defineProps<{ entries: MenuEntry[] }>()
-
-const emit = defineEmits<{
-  (e: 'action', entry: MenuEntry): void
-}>()
-
-const { t } = useI18n()
-</script>

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

@@ -3,16 +3,11 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'
 
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+import type { JobListItem as ApiJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
 import JobAssetsList from './JobAssetsList.vue'
 
-vi.mock('@/components/queue/job/JobDetailsPopover.vue', () => ({
-  default: {
-    name: 'JobDetailsPopover',
-    template: '<div class="job-details-popover-stub" />'
-  }
-}))
-
 const JobDetailsPopoverStub = defineComponent({
   name: 'JobDetailsPopover',
   props: {
@@ -37,34 +32,43 @@ vi.mock('vue-i18n', () => {
   }
 })
 
-const createPreviewOutput = (
+const createResultItem = (
   filename: string,
   mediaType: string = 'images'
-): NonNullable<NonNullable<JobListItem['taskRef']>['previewOutput']> =>
-  ({
+): ResultItemImpl => {
+  const item = new ResultItemImpl({
     filename,
-    mediaType,
-    isImage: mediaType === 'images',
-    isVideo: mediaType === 'video',
-    isAudio: mediaType === 'audio',
-    is3D: mediaType === 'model',
-    url: `/api/view/${filename}`
-  }) as NonNullable<NonNullable<JobListItem['taskRef']>['previewOutput']>
+    subfolder: '',
+    type: 'output',
+    nodeId: 'node-1',
+    mediaType
+  })
+  Object.defineProperty(item, 'url', {
+    get: () => `/api/view/${filename}`
+  })
+  return item
+}
 
-const createTaskRef = (
-  preview?: NonNullable<NonNullable<JobListItem['taskRef']>['previewOutput']>
-): JobListItem['taskRef'] =>
-  ({
-    workflowId: 'workflow-1',
-    previewOutput: preview
-  }) as JobListItem['taskRef']
+const createTaskRef = (preview?: ResultItemImpl): TaskItemImpl => {
+  const job: ApiJobListItem = {
+    id: `task-${Math.random().toString(36).slice(2)}`,
+    status: 'completed',
+    create_time: Date.now(),
+    preview_output: null,
+    outputs_count: preview ? 1 : 0,
+    workflow_id: 'workflow-1',
+    priority: 0
+  }
+  const flatOutputs = preview ? [preview] : []
+  return new TaskItemImpl(job, {}, flatOutputs)
+}
 
 const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
   id: 'job-1',
   title: 'Job 1',
   meta: 'meta',
   state: 'completed',
-  taskRef: createTaskRef(createPreviewOutput('job-1.png')),
+  taskRef: createTaskRef(createResultItem('job-1.png')),
   ...overrides
 })
 
@@ -78,10 +82,7 @@ const mountJobAssetsList = (jobs: JobListItem[]) => {
   ]
 
   return mount(JobAssetsList, {
-    props: {
-      displayedJobGroups,
-      getMenuEntries: () => []
-    },
+    props: { displayedJobGroups },
     global: {
       stubs: {
         teleport: true,
@@ -146,7 +147,7 @@ describe('JobAssetsList', () => {
   it('emits viewItem on double-click for completed video jobs without icon image', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createPreviewOutput('job-1.webm', 'video'))
+      taskRef: createTaskRef(createResultItem('job-1.webm', 'video'))
     })
     const wrapper = mountJobAssetsList([job])
 
@@ -163,7 +164,7 @@ describe('JobAssetsList', () => {
   it('emits viewItem on icon click for completed 3D jobs without preview tile', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createPreviewOutput('job-1.glb', 'model'))
+      taskRef: createTaskRef(createResultItem('job-1.glb', 'model'))
     })
     const wrapper = mountJobAssetsList([job])
 
@@ -178,7 +179,7 @@ describe('JobAssetsList', () => {
   it('does not emit viewItem on double-click for non-completed jobs', async () => {
     const job = buildJob({
       state: 'running',
-      taskRef: createTaskRef(createPreviewOutput('job-1.png'))
+      taskRef: createTaskRef(createResultItem('job-1.png'))
     })
     const wrapper = mountJobAssetsList([job])
 

src/components/queue/job/JobAssetsList.vue

@@ -15,66 +15,64 @@
         @mouseenter="onJobEnter(job, $event)"
         @mouseleave="onJobLeave(job.id)"
       >
-        <JobContextMenu
-          :entries="getMenuEntries(job)"
-          @action="emit('menu-action', $event)"
+        <AssetsListItem
+          :class="
+            cn(
+              'w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
+              job.state === 'running' && 'bg-secondary-background'
+            )
+          "
+          :preview-url="getJobPreviewUrl(job)"
+          :is-video-preview="isVideoPreviewJob(job)"
+          :preview-alt="job.title"
+          :icon-name="job.iconName ?? iconForJobState(job.state)"
+          :icon-class="getJobIconClass(job)"
+          :primary-text="job.title"
+          :secondary-text="job.meta"
+          :progress-total-percent="job.progressTotalPercent"
+          :progress-current-percent="job.progressCurrentPercent"
+          @contextmenu.prevent.stop="$emit('menu', job, $event)"
+          @dblclick.stop="emitViewItem(job)"
+          @preview-click="emitViewItem(job)"
+          @click.stop
         >
-          <AssetsListItem
-            :class="
-              cn(
-                'w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
-                job.state === 'running' && 'bg-secondary-background'
-              )
-            "
-            :preview-url="getJobPreviewUrl(job)"
-            :is-video-preview="isVideoPreviewJob(job)"
-            :preview-alt="job.title"
-            :icon-name="job.iconName ?? iconForJobState(job.state)"
-            :icon-class="getJobIconClass(job)"
-            :primary-text="job.title"
-            :secondary-text="job.meta"
-            :progress-total-percent="job.progressTotalPercent"
-            :progress-current-percent="job.progressCurrentPercent"
-            @dblclick.stop="emitViewItem(job)"
-            @preview-click="emitViewItem(job)"
-            @click.stop
-          >
-            <template v-if="shouldShowActionsMenu(job.id)" #actions>
-              <Button
-                v-if="isCancelable(job)"
-                variant="destructive"
-                size="icon"
-                :aria-label="t('g.cancel')"
-                @click.stop="emitCancelItem(job)"
-              >
-                <i class="icon-[lucide--x] size-4" />
-              </Button>
-              <Button
-                v-else-if="isFailedDeletable(job)"
-                variant="destructive"
-                size="icon"
-                :aria-label="t('g.delete')"
-                @click.stop="emitDeleteItem(job)"
-              >
-                <i class="icon-[lucide--trash-2] size-4" />
-              </Button>
-              <Button
-                v-else-if="job.state === 'completed'"
-                variant="textonly"
-                size="sm"
-                @click.stop="emitCompletedViewItem(job)"
-              >
-                {{ t('menuLabels.View') }}
-              </Button>
-              <JobActionsMenu
-                :open="openActionsJobId === job.id"
-                :entries="getMenuEntries(job)"
-                @update:open="onActionsMenuOpenChange(job.id, $event)"
-                @action="emit('menu-action', $event)"
-              />
-            </template>
-          </AssetsListItem>
-        </JobContextMenu>
+          <template v-if="hoveredJobId === job.id" #actions>
+            <Button
+              v-if="isCancelable(job)"
+              variant="destructive"
+              size="icon"
+              :aria-label="t('g.cancel')"
+              @click.stop="emitCancelItem(job)"
+            >
+              <i class="icon-[lucide--x] size-4" />
+            </Button>
+            <Button
+              v-else-if="isFailedDeletable(job)"
+              variant="destructive"
+              size="icon"
+              :aria-label="t('g.delete')"
+              @click.stop="emitDeleteItem(job)"
+            >
+              <i class="icon-[lucide--trash-2] size-4" />
+            </Button>
+            <Button
+              v-else-if="job.state === 'completed'"
+              variant="textonly"
+              size="sm"
+              @click.stop="emitCompletedViewItem(job)"
+            >
+              {{ t('menuLabels.View') }}
+            </Button>
+            <Button
+              variant="secondary"
+              size="icon"
+              :aria-label="t('g.more')"
+              @click.stop="$emit('menu', job, $event)"
+            >
+              <i class="icon-[lucide--ellipsis] size-4" />
+            </Button>
+          </template>
+        </AssetsListItem>
       </div>
     </div>
   </div>
@@ -82,7 +80,7 @@
   <Teleport to="body">
     <div
       v-if="activeDetails && popoverPosition"
-      class="job-details-popover fixed z-1700"
+      class="job-details-popover fixed z-50"
       :style="{
         top: `${popoverPosition.top}px`,
         left: `${popoverPosition.left}px`
@@ -104,10 +102,7 @@ import { nextTick, ref } from 'vue'
 
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
-import JobActionsMenu from '@/components/queue/job/JobActionsMenu.vue'
-import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
 import Button from '@/components/ui/button/Button.vue'
-import type { MenuEntry } from '@/composables/queue/useJobMenu'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 import { useJobDetailsHover } from '@/composables/queue/useJobDetailsHover'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
@@ -115,21 +110,17 @@ import { cn } from '@/utils/tailwindUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { isActiveJobState } from '@/utils/queueUtil'
 
-const { displayedJobGroups, getMenuEntries } = defineProps<{
-  displayedJobGroups: JobGroup[]
-  getMenuEntries: (item: JobListItem) => MenuEntry[]
-}>()
+const { displayedJobGroups } = defineProps<{ displayedJobGroups: JobGroup[] }>()
 
 const emit = defineEmits<{
   (e: 'cancelItem', item: JobListItem): void
   (e: 'deleteItem', item: JobListItem): void
-  (e: 'menu-action', entry: MenuEntry): void
+  (e: 'menu', item: JobListItem, ev: MouseEvent): void
   (e: 'viewItem', item: JobListItem): void
 }>()
 
 const { t } = useI18n()
 const hoveredJobId = ref<string | null>(null)
-const openActionsJobId = ref<string | null>(null)
 const activeRowElement = ref<HTMLElement | null>(null)
 const popoverPosition = ref<{ top: number; left: number } | null>(null)
 const {
@@ -197,21 +188,6 @@ function isFailedDeletable(job: JobListItem) {
   return job.showClear !== false && job.state === 'failed'
 }
 
-function shouldShowActionsMenu(jobId: string) {
-  return hoveredJobId.value === jobId || openActionsJobId.value === jobId
-}
-
-function onActionsMenuOpenChange(jobId: string, isOpen: boolean) {
-  if (isOpen) {
-    openActionsJobId.value = jobId
-    return
-  }
-
-  if (openActionsJobId.value === jobId) {
-    openActionsJobId.value = null
-  }
-}
-
 function getPreviewOutput(job: JobListItem) {
   return job.taskRef?.previewOutput
 }

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

@@ -1,10 +1,54 @@
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 
 import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
+const popoverStub = defineComponent({
+  name: 'Popover',
+  emits: ['show', 'hide'],
+  data() {
+    return {
+      visible: false,
+      container: null as HTMLElement | null,
+      eventTarget: null as EventTarget | null,
+      target: null as EventTarget | null
+    }
+  },
+  mounted() {
+    this.container = this.$refs.container as HTMLElement | null
+  },
+  updated() {
+    this.container = this.$refs.container as HTMLElement | null
+  },
+  methods: {
+    toggle(event: Event, target?: EventTarget | null) {
+      if (this.visible) {
+        this.hide()
+        return
+      }
+
+      this.show(event, target)
+    },
+    show(event: Event, target?: EventTarget | null) {
+      this.visible = true
+      this.eventTarget = event.currentTarget
+      this.target = target ?? event.currentTarget
+      this.$emit('show')
+    },
+    hide() {
+      this.visible = false
+      this.$emit('hide')
+    }
+  },
+  template: `
+    <div v-if="visible" ref="container" class="popover-stub">
+      <slot />
+    </div>
+  `
+})
+
 const buttonStub = {
   props: {
     disabled: {
@@ -13,14 +57,12 @@ const buttonStub = {
     }
   },
   template: `
-    <button
+    <div
       class="button-stub"
-      type="button"
       :data-disabled="String(disabled)"
-      :disabled="disabled"
     >
       <slot />
-    </button>
+    </div>
   `
 }
 
@@ -37,39 +79,31 @@ const createEntries = (): MenuEntry[] => [
 
 const mountComponent = (entries: MenuEntry[]) =>
   mount(JobContextMenu, {
-    attachTo: document.body,
     props: { entries },
-    slots: {
-      default: '<button class="context-trigger" type="button">Trigger</button>'
-    },
     global: {
       stubs: {
+        Popover: popoverStub,
         Button: buttonStub
       }
     }
   })
 
-const openMenu = async () => {
-  const trigger = document.body.querySelector('.context-trigger')
-  trigger?.dispatchEvent(
-    new MouseEvent('contextmenu', {
-      bubbles: true,
-      cancelable: true,
-      button: 2
-    })
-  )
-  await waitForMenuUpdate()
-}
+const createTriggerEvent = (type: string, currentTarget: EventTarget) =>
+  ({
+    type,
+    currentTarget,
+    target: currentTarget
+  }) as Event
 
-const getRenderedButtons = () =>
-  Array.from(document.body.querySelectorAll<HTMLButtonElement>('.button-stub'))
-
-const isMenuVisible = () =>
-  document.body.querySelector('.job-context-menu-content') !== null
-
-const waitForMenuUpdate = async () => {
-  await nextTick()
+const openMenu = async (
+  wrapper: ReturnType<typeof mountComponent>,
+  type: string = 'click'
+) => {
+  const trigger = document.createElement('button')
+  document.body.append(trigger)
+  await wrapper.vm.open(createTriggerEvent(type, trigger))
   await nextTick()
+  return trigger
 }
 
 afterEach(() => {
@@ -79,12 +113,12 @@ afterEach(() => {
 describe('JobContextMenu', () => {
   it('passes disabled state to action buttons', async () => {
     const wrapper = mountComponent(createEntries())
-    await openMenu()
+    await openMenu(wrapper)
 
-    const buttons = getRenderedButtons()
+    const buttons = wrapper.findAll('.button-stub')
     expect(buttons).toHaveLength(2)
-    expect(buttons[0].disabled).toBe(false)
-    expect(buttons[1].disabled).toBe(true)
+    expect(buttons[0].attributes('data-disabled')).toBe('false')
+    expect(buttons[1].attributes('data-disabled')).toBe('true')
 
     wrapper.unmount()
   })
@@ -92,25 +126,69 @@ describe('JobContextMenu', () => {
   it('emits action for enabled entries', async () => {
     const entries = createEntries()
     const wrapper = mountComponent(entries)
-    await openMenu()
+    await openMenu(wrapper)
 
-    getRenderedButtons()[0].click()
-    await waitForMenuUpdate()
+    await wrapper.findAll('.button-stub')[0].trigger('click')
 
     expect(wrapper.emitted('action')).toEqual([[entries[0]]])
-    expect(isMenuVisible()).toBe(false)
 
     wrapper.unmount()
   })
 
-  it('opens from the slotted context-menu trigger', async () => {
-    const wrapper = mountComponent(createEntries())
-    await openMenu()
+  it('does not emit action for disabled entries', async () => {
+    const wrapper = mountComponent([
+      {
+        key: 'disabled',
+        label: 'Disabled action',
+        disabled: true,
+        onClick: vi.fn()
+      }
+    ])
+    await openMenu(wrapper)
 
-    expect(isMenuVisible()).toBe(true)
-    expect(
-      document.body.querySelectorAll('[role="menuitem"]').length
-    ).toBeGreaterThan(0)
+    await wrapper.get('.button-stub').trigger('click')
+
+    expect(wrapper.emitted('action')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
+  it('hides on pointerdown outside the popover', async () => {
+    const wrapper = mountComponent(createEntries())
+    const trigger = document.createElement('button')
+    const outside = document.createElement('div')
+    document.body.append(trigger, outside)
+
+    await wrapper.vm.open(createTriggerEvent('contextmenu', trigger))
+    await nextTick()
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    outside.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('keeps the menu open through trigger pointerdown and closes on same trigger click', async () => {
+    const wrapper = mountComponent(createEntries())
+    const trigger = document.createElement('button')
+    document.body.append(trigger)
+
+    await wrapper.vm.open(createTriggerEvent('click', trigger))
+    await nextTick()
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    trigger.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    await wrapper.vm.open(createTriggerEvent('click', trigger))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(false)
 
     wrapper.unmount()
   })

src/components/queue/job/JobContextMenu.vue

@@ -1,38 +1,118 @@
 <template>
-  <ContextMenuRoot>
-    <ContextMenuTrigger as-child>
-      <slot />
-    </ContextMenuTrigger>
-    <ContextMenuPortal>
-      <ContextMenuContent
-        :collision-padding="8"
-        class="z-1700 bg-transparent p-0 font-inter shadow-lg"
-      >
-        <JobMenuPanel
-          class="job-context-menu-content"
-          :entries
-          @action="emit('action', $event)"
-        />
-      </ContextMenuContent>
-    </ContextMenuPortal>
-  </ContextMenuRoot>
+  <Popover
+    ref="jobItemPopoverRef"
+    :dismissable="false"
+    :close-on-escape="true"
+    unstyled
+    :pt="{
+      root: { class: 'absolute z-50' },
+      content: {
+        class: [
+          'bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg font-inter'
+        ]
+      }
+    }"
+    @show="isVisible = true"
+    @hide="onHide"
+  >
+    <div
+      ref="contentRef"
+      class="flex min-w-56 flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
+    >
+      <template v-for="entry in entries" :key="entry.key">
+        <div v-if="entry.kind === 'divider'" class="px-2 py-1">
+          <div class="h-px bg-interface-stroke" />
+        </div>
+        <Button
+          v-else
+          class="w-full justify-start bg-transparent"
+          variant="textonly"
+          size="sm"
+          :aria-label="entry.label"
+          :disabled="entry.disabled"
+          @click="onEntry(entry)"
+        >
+          <i
+            v-if="entry.icon"
+            :class="[
+              entry.icon,
+              'block size-4 shrink-0 leading-none text-text-secondary'
+            ]"
+          />
+          <span>{{ entry.label }}</span>
+        </Button>
+      </template>
+    </div>
+  </Popover>
 </template>
 
 <script setup lang="ts">
-import {
-  ContextMenuContent,
-  ContextMenuPortal,
-  ContextMenuRoot,
-  ContextMenuTrigger
-} from 'reka-ui'
+import Popover from 'primevue/popover'
+import { nextTick, ref } from 'vue'
 
+import Button from '@/components/ui/button/Button.vue'
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
-import JobMenuPanel from './JobMenuPanel.vue'
-
 defineProps<{ entries: MenuEntry[] }>()
 
 const emit = defineEmits<{
   (e: 'action', entry: MenuEntry): void
 }>()
+
+type PopoverHandle = {
+  hide: () => void
+  show: (event: Event, target?: EventTarget | null) => void
+}
+
+const jobItemPopoverRef = ref<PopoverHandle | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const isVisible = ref(false)
+const openedByClick = ref(false)
+
+useDismissableOverlay({
+  isOpen: isVisible,
+  getOverlayEl: () => contentRef.value,
+  getTriggerEl: () => (openedByClick.value ? triggerRef.value : null),
+  onDismiss: hide
+})
+
+async function open(event: Event) {
+  const trigger =
+    event.currentTarget instanceof HTMLElement ? event.currentTarget : null
+  const isSameClickTrigger =
+    event.type === 'click' && trigger === triggerRef.value && isVisible.value
+
+  if (isSameClickTrigger) {
+    hide()
+    return
+  }
+
+  openedByClick.value = event.type === 'click'
+  triggerRef.value = trigger
+
+  if (isVisible.value) {
+    hide()
+    await nextTick()
+  }
+
+  jobItemPopoverRef.value?.show(event, trigger)
+}
+
+function hide() {
+  jobItemPopoverRef.value?.hide()
+}
+
+function onHide() {
+  isVisible.value = false
+  openedByClick.value = false
+}
+
+function onEntry(entry: MenuEntry) {
+  if (entry.kind === 'divider' || entry.disabled) return
+  emit('action', entry)
+}
+
+defineExpose({ open, hide })
 </script>

src/components/queue/job/JobMenuPanel.vue

@@ -1,85 +0,0 @@
-<template>
-  <div
-    class="job-menu-panel flex min-w-56 flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
-  >
-    <template v-for="entry in entries" :key="entry.key">
-      <component
-        :is="separatorComponent"
-        v-if="entry.kind === 'divider'"
-        class="px-2 py-1"
-      >
-        <div class="h-px bg-interface-stroke" />
-      </component>
-      <component
-        :is="itemComponent"
-        v-else
-        as-child
-        :disabled="entry.disabled"
-        :text-value="entry.label"
-        @select="onEntry(entry)"
-      >
-        <Button
-          class="w-full justify-start bg-transparent data-highlighted:bg-secondary-background-hover"
-          variant="textonly"
-          size="sm"
-          :aria-label="entry.label"
-          :disabled="entry.disabled"
-        >
-          <i
-            v-if="entry.icon"
-            :class="[
-              entry.icon,
-              'block size-4 shrink-0 leading-none text-text-secondary'
-            ]"
-          />
-          <span>{{ entry.label }}</span>
-        </Button>
-      </component>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  ContextMenuItem,
-  ContextMenuSeparator,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  injectContextMenuRootContext,
-  injectDropdownMenuRootContext
-} from 'reka-ui'
-
-import Button from '@/components/ui/button/Button.vue'
-import type { MenuEntry } from '@/composables/queue/useJobMenu'
-
-const { entries } = defineProps<{
-  entries: MenuEntry[]
-}>()
-
-const emit = defineEmits<{
-  (e: 'action', entry: MenuEntry): void
-}>()
-
-const dropdownMenuRootContext = injectDropdownMenuRootContext(null)
-const contextMenuRootContext = injectContextMenuRootContext(null)
-const itemComponent = dropdownMenuRootContext
-  ? DropdownMenuItem
-  : ContextMenuItem
-const separatorComponent = dropdownMenuRootContext
-  ? DropdownMenuSeparator
-  : ContextMenuSeparator
-
-function closeMenu() {
-  dropdownMenuRootContext?.onOpenChange(false)
-  contextMenuRootContext?.onOpenChange(false)
-}
-
-function onEntry(entry: MenuEntry) {
-  if (entry.kind === 'divider' || entry.disabled) {
-    return
-  }
-
-  closeMenu()
-  emit('action', entry)
-}
-</script>

src/components/queue/job/QueueJobItem.vue

@@ -9,7 +9,7 @@
     <Teleport to="body">
       <div
         v-if="!isPreviewVisible && showDetails && popoverPosition"
-        class="fixed z-1700"
+        class="fixed z-50"
         :style="{
           top: `${popoverPosition.top}px`,
           left: `${popoverPosition.left}px`
@@ -23,7 +23,7 @@
     <Teleport to="body">
       <div
         v-if="isPreviewVisible && canShowPreview && popoverPosition"
-        class="fixed z-1700"
+        class="fixed z-50"
         :style="{
           top: `${popoverPosition.top}px`,
           left: `${popoverPosition.left}px`

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -8,40 +8,16 @@
       @approach-end="emit('approach-end')"
     >
       <template #item="{ item }">
-        <MediaAssetContextMenu
+        <MediaAssetCard
           :asset="item.asset"
-          :asset-type="getAssetType(item.asset.tags)"
-          :file-kind="getMediaTypeFromFilename(item.asset.name)"
-          :show-delete-button
-          :selected-assets
-          :is-bulk-mode
+          :selected="isSelected(item.asset.id)"
+          :show-output-count="showOutputCount(item.asset)"
+          :output-count="getOutputCount(item.asset)"
+          @click="emit('select-asset', item.asset)"
+          @context-menu="emit('context-menu', $event, item.asset)"
           @zoom="emit('zoom', item.asset)"
-          @asset-deleted="emit('asset-deleted')"
-          @bulk-download="emit('bulk-download', $event)"
-          @bulk-delete="emit('bulk-delete', $event)"
-          @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-          @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-          @bulk-export-workflow="emit('bulk-export-workflow', $event)"
-        >
-          <MediaAssetCard
-            :asset="item.asset"
-            :selected="isSelected(item.asset.id)"
-            :show-output-count="showOutputCount(item.asset)"
-            :output-count="getOutputCount(item.asset)"
-            :show-delete-button
-            :selected-assets
-            :is-bulk-mode
-            @click="emit('select-asset', item.asset)"
-            @zoom="emit('zoom', item.asset)"
-            @asset-deleted="emit('asset-deleted')"
-            @bulk-download="emit('bulk-download', $event)"
-            @bulk-delete="emit('bulk-delete', $event)"
-            @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-            @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-            @bulk-export-workflow="emit('bulk-export-workflow', $event)"
-            @output-count-click="emit('output-count-click', item.asset)"
-          />
-        </MediaAssetContextMenu>
+          @output-count-click="emit('output-count-click', item.asset)"
+        />
       </template>
     </VirtualGrid>
   </div>
@@ -52,39 +28,20 @@ import { computed } from 'vue'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
-import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
-import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { getMediaTypeFromFilename } from '@/utils/formatUtil'
 
-const {
-  assets,
-  isSelected,
-  showOutputCount,
-  getOutputCount,
-  showDeleteButton,
-  selectedAssets,
-  isBulkMode
-} = defineProps<{
+const { assets, isSelected, showOutputCount, getOutputCount } = defineProps<{
   assets: AssetItem[]
   isSelected: (assetId: string) => boolean
   showOutputCount: (asset: AssetItem) => boolean
   getOutputCount: (asset: AssetItem) => number
-  showDeleteButton?: boolean
-  selectedAssets?: AssetItem[]
-  isBulkMode?: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem): void
+  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
   (e: 'zoom', asset: AssetItem): void
-  (e: 'asset-deleted'): void
-  (e: 'bulk-download', assets: AssetItem[]): void
-  (e: 'bulk-delete', assets: AssetItem[]): void
-  (e: 'bulk-add-to-workflow', assets: AssetItem[]): void
-  (e: 'bulk-open-workflow', assets: AssetItem[]): void
-  (e: 'bulk-export-workflow', assets: AssetItem[]): void
   (e: 'output-count-click', asset: AssetItem): void
 }>()
 

src/components/sidebar/tabs/AssetsSidebarListView.test.ts

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
+import { defineComponent } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
@@ -8,18 +7,10 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
 import AssetsSidebarListView from './AssetsSidebarListView.vue'
 
-vi.mock('@/platform/assets/components/MediaAssetActionsMenu.vue', () => ({
-  default: {
-    name: 'MediaAssetActionsMenu',
-    template: '<div class="media-asset-actions-menu-stub"><slot /></div>'
-  }
-}))
-
-vi.mock('@/platform/assets/components/MediaAssetContextMenu.vue', () => ({
-  default: {
-    name: 'MediaAssetContextMenu',
-    template: '<div class="media-asset-context-menu-stub"><slot /></div>'
-  }
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
 }))
 
 vi.mock('@/stores/assetsStore', () => ({
@@ -28,18 +19,7 @@ vi.mock('@/stores/assetsStore', () => ({
   })
 }))
 
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  fallbackLocale: 'en',
-  missingWarn: false,
-  fallbackWarn: false,
-  messages: {
-    en: {}
-  }
-})
-
-const VirtualGridStub = {
+const VirtualGridStub = defineComponent({
   name: 'VirtualGrid',
   props: {
     items: {
@@ -49,34 +29,7 @@ const VirtualGridStub = {
   },
   template:
     '<div><slot v-for="item in items" :key="item.key" name="item" :item="item" /></div>'
-}
-
-const AssetsListItemStub = {
-  name: 'AssetsListItem',
-  template:
-    '<div class="assets-list-item-stub"><slot /><slot name="actions" /></div>'
-}
-
-const MediaAssetContextMenuStub = {
-  name: 'MediaAssetContextMenu',
-  template: '<div class="media-asset-context-menu-stub"><slot /></div>'
-}
-
-const MediaAssetActionsMenuStub = {
-  name: 'MediaAssetActionsMenu',
-  props: {
-    open: {
-      type: Boolean,
-      default: false
-    }
-  },
-  template: '<div class="media-asset-actions-menu-stub"><slot /></div>'
-}
-
-const ButtonComponentStub = {
-  name: 'AppButton',
-  template: '<button class="button-stub" type="button"><slot /></button>'
-}
+})
 
 const buildAsset = (id: string, name: string): AssetItem =>
   ({
@@ -100,34 +53,12 @@ const mountListView = (assetItems: OutputStackListItem[] = []) =>
       toggleStack: async () => {}
     },
     global: {
-      plugins: [i18n],
       stubs: {
         VirtualGrid: VirtualGridStub
       }
     }
   })
 
-const mountInteractiveListView = (assetItems: OutputStackListItem[] = []) =>
-  mount(AssetsSidebarListView, {
-    props: {
-      assetItems,
-      selectableAssets: [],
-      isSelected: () => false,
-      isStackExpanded: () => false,
-      toggleStack: async () => {}
-    },
-    global: {
-      plugins: [i18n],
-      stubs: {
-        AssetsListItem: AssetsListItemStub,
-        Button: ButtonComponentStub,
-        MediaAssetActionsMenu: MediaAssetActionsMenuStub,
-        MediaAssetContextMenu: MediaAssetContextMenuStub,
-        VirtualGrid: VirtualGridStub
-      }
-    }
-  })
-
 describe('AssetsSidebarListView', () => {
   it('marks mp4 assets as video previews', () => {
     const videoAsset = {
@@ -200,50 +131,4 @@ describe('AssetsSidebarListView', () => {
 
     expect(wrapper.emitted('preview-asset')).toEqual([[imageAsset]])
   })
-
-  it('keeps row actions mounted while the dropdown is open', async () => {
-    const imageAsset = {
-      ...buildAsset('image-asset-open', 'image.png'),
-      user_metadata: {}
-    } satisfies AssetItem
-
-    const wrapper = mountInteractiveListView([buildOutputItem(imageAsset)])
-    const assetListItem = wrapper.find('.assets-list-item-stub')
-
-    await assetListItem.trigger('mouseenter')
-
-    const actionsMenu = wrapper.findComponent(MediaAssetActionsMenuStub)
-    expect(actionsMenu.exists()).toBe(true)
-
-    actionsMenu.vm.$emit('update:open', true)
-    await nextTick()
-    await assetListItem.trigger('mouseleave')
-    await nextTick()
-
-    expect(wrapper.findComponent(MediaAssetActionsMenuStub).exists()).toBe(true)
-
-    wrapper
-      .findComponent(MediaAssetActionsMenuStub)
-      .vm.$emit('update:open', false)
-    await nextTick()
-
-    expect(wrapper.findComponent(MediaAssetActionsMenuStub).exists()).toBe(
-      false
-    )
-  })
-
-  it('does not select the row when clicking the actions trigger', async () => {
-    const imageAsset = {
-      ...buildAsset('image-asset-actions', 'image.png'),
-      user_metadata: {}
-    } satisfies AssetItem
-
-    const wrapper = mountInteractiveListView([buildOutputItem(imageAsset)])
-    const assetListItem = wrapper.find('.assets-list-item-stub')
-
-    await assetListItem.trigger('mouseenter')
-    await wrapper.find('.button-stub').trigger('click')
-
-    expect(wrapper.emitted('select-asset')).toBeUndefined()
-  })
 })

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -16,82 +16,49 @@
           >
             <i class="pi pi-trash text-xs" />
           </LoadingOverlay>
-          <MediaAssetContextMenu
-            :asset="item.asset"
-            :asset-type="getAssetType(item.asset.tags)"
-            :file-kind="getAssetMediaType(item.asset)"
-            :show-delete-button
-            :selected-assets
-            :is-bulk-mode
-            @zoom="emit('preview-asset', item.asset)"
-            @asset-deleted="emit('asset-deleted')"
-            @bulk-download="emit('bulk-download', $event)"
-            @bulk-delete="emit('bulk-delete', $event)"
-            @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-            @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-            @bulk-export-workflow="emit('bulk-export-workflow', $event)"
+          <AssetsListItem
+            role="button"
+            tabindex="0"
+            :aria-label="
+              t('assetBrowser.ariaLabel.assetCard', {
+                name: getAssetDisplayName(item.asset),
+                type: getAssetMediaType(item.asset)
+              })
+            "
+            :class="
+              cn(
+                getAssetCardClass(isSelected(item.asset.id)),
+                item.isChild && 'pl-6'
+              )
+            "
+            :preview-url="getAssetPreviewUrl(item.asset)"
+            :preview-alt="getAssetDisplayName(item.asset)"
+            :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
+            :is-video-preview="isVideoAsset(item.asset)"
+            :primary-text="getAssetPrimaryText(item.asset)"
+            :secondary-text="getAssetSecondaryText(item.asset)"
+            :stack-count="getStackCount(item.asset)"
+            :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
+            :stack-expanded="isStackExpanded(item.asset)"
+            @mouseenter="onAssetEnter(item.asset.id)"
+            @mouseleave="onAssetLeave(item.asset.id)"
+            @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
+            @click.stop="emit('select-asset', item.asset, selectableAssets)"
+            @dblclick.stop="emit('preview-asset', item.asset)"
+            @preview-click="emit('preview-asset', item.asset)"
+            @stack-toggle="void toggleStack(item.asset)"
           >
-            <AssetsListItem
-              role="button"
-              tabindex="0"
-              :aria-label="
-                t('assetBrowser.ariaLabel.assetCard', {
-                  name: getAssetDisplayName(item.asset),
-                  type: getAssetMediaType(item.asset)
-                })
-              "
-              :class="
-                cn(
-                  getAssetCardClass(isSelected(item.asset.id)),
-                  item.isChild && 'pl-6'
-                )
-              "
-              :preview-url="getAssetPreviewUrl(item.asset)"
-              :preview-alt="getAssetDisplayName(item.asset)"
-              :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
-              :is-video-preview="isVideoAsset(item.asset)"
-              :primary-text="getAssetPrimaryText(item.asset)"
-              :secondary-text="getAssetSecondaryText(item.asset)"
-              :stack-count="getStackCount(item.asset)"
-              :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
-              :stack-expanded="isStackExpanded(item.asset)"
-              @mouseenter="onAssetEnter(item.asset.id)"
-              @mouseleave="onAssetLeave(item.asset.id)"
-              @click.stop="emit('select-asset', item.asset, selectableAssets)"
-              @dblclick.stop="emit('preview-asset', item.asset)"
-              @preview-click="emit('preview-asset', item.asset)"
-              @stack-toggle="void toggleStack(item.asset)"
-            >
-              <template v-if="shouldShowActionsMenu(item.asset.id)" #actions>
-                <MediaAssetActionsMenu
-                  :open="openActionsAssetId === item.asset.id"
-                  :asset="item.asset"
-                  :asset-type="getAssetType(item.asset.tags)"
-                  :file-kind="getAssetMediaType(item.asset)"
-                  :show-delete-button
-                  :selected-assets
-                  :is-bulk-mode
-                  @update:open="onActionsMenuOpenChange(item.asset.id, $event)"
-                  @zoom="emit('preview-asset', item.asset)"
-                  @asset-deleted="emit('asset-deleted')"
-                  @bulk-download="emit('bulk-download', $event)"
-                  @bulk-delete="emit('bulk-delete', $event)"
-                  @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-                  @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-                  @bulk-export-workflow="emit('bulk-export-workflow', $event)"
-                >
-                  <Button
-                    variant="secondary"
-                    size="icon"
-                    :aria-label="t('mediaAsset.actions.moreOptions')"
-                    @click.stop
-                  >
-                    <i class="icon-[lucide--ellipsis] size-4" />
-                  </Button>
-                </MediaAssetActionsMenu>
-              </template>
-            </AssetsListItem>
-          </MediaAssetContextMenu>
+            <template v-if="hoveredAssetId === item.asset.id" #actions>
+              <Button
+                variant="secondary"
+                size="icon"
+                :aria-label="t('mediaAsset.actions.moreOptions')"
+                @click.stop="emit('context-menu', $event, item.asset)"
+              >
+                <i class="icon-[lucide--ellipsis] size-4" />
+              </Button>
+            </template>
+          </AssetsListItem>
         </div>
       </template>
     </VirtualGrid>
@@ -105,10 +72,7 @@ import { useI18n } from 'vue-i18n'
 import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
-import MediaAssetActionsMenu from '@/platform/assets/components/MediaAssetActionsMenu.vue'
-import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
@@ -128,19 +92,13 @@ const {
   selectableAssets,
   isSelected,
   isStackExpanded,
-  toggleStack,
-  showDeleteButton,
-  selectedAssets,
-  isBulkMode
+  toggleStack
 } = defineProps<{
   assetItems: OutputStackListItem[]
   selectableAssets: AssetItem[]
   isSelected: (assetId: string) => boolean
   isStackExpanded: (asset: AssetItem) => boolean
   toggleStack: (asset: AssetItem) => Promise<void>
-  showDeleteButton?: boolean
-  selectedAssets?: AssetItem[]
-  isBulkMode?: boolean
 }>()
 
 const assetsStore = useAssetsStore()
@@ -148,18 +106,12 @@ const assetsStore = useAssetsStore()
 const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem, assets?: AssetItem[]): void
   (e: 'preview-asset', asset: AssetItem): void
+  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
-  (e: 'asset-deleted'): void
-  (e: 'bulk-download', assets: AssetItem[]): void
-  (e: 'bulk-delete', assets: AssetItem[]): void
-  (e: 'bulk-add-to-workflow', assets: AssetItem[]): void
-  (e: 'bulk-open-workflow', assets: AssetItem[]): void
-  (e: 'bulk-export-workflow', assets: AssetItem[]): void
 }>()
 
 const { t } = useI18n()
 const hoveredAssetId = ref<string | null>(null)
-const openActionsAssetId = ref<string | null>(null)
 
 const listGridStyle = {
   display: 'grid',
@@ -228,23 +180,6 @@ function getAssetCardClass(selected: boolean): string {
   )
 }
 
-function shouldShowActionsMenu(assetId: string): boolean {
-  return (
-    hoveredAssetId.value === assetId || openActionsAssetId.value === assetId
-  )
-}
-
-function onActionsMenuOpenChange(assetId: string, isOpen: boolean): void {
-  if (isOpen) {
-    openActionsAssetId.value = assetId
-    return
-  }
-
-  if (openActionsAssetId.value === assetId) {
-    openActionsAssetId.value = null
-  }
-}
-
 function onAssetEnter(assetId: string) {
   hoveredAssetId.value = assetId
 }

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -94,18 +94,10 @@
           :is-selected="isSelected"
           :selectable-assets="listViewSelectableAssets"
           :is-stack-expanded="isListViewStackExpanded"
-          :show-delete-button="shouldShowDeleteButton"
-          :selected-assets="selectedAssets"
-          :is-bulk-mode="isBulkMode"
           :toggle-stack="toggleListViewStack"
-          @asset-deleted="refreshAssets"
-          @bulk-download="handleBulkDownload"
-          @bulk-delete="handleBulkDelete"
-          @bulk-add-to-workflow="handleBulkAddToWorkflow"
-          @bulk-open-workflow="handleBulkOpenWorkflow"
-          @bulk-export-workflow="handleBulkExportWorkflow"
           @select-asset="handleAssetSelect"
           @preview-asset="handleZoomClick"
+          @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
         <AssetsSidebarGridView
@@ -114,16 +106,8 @@
           :is-selected="isSelected"
           :show-output-count="shouldShowOutputCount"
           :get-output-count="getOutputCount"
-          :show-delete-button="shouldShowDeleteButton"
-          :selected-assets="selectedAssets"
-          :is-bulk-mode="isBulkMode"
-          @asset-deleted="refreshAssets"
-          @bulk-download="handleBulkDownload"
-          @bulk-delete="handleBulkDelete"
-          @bulk-add-to-workflow="handleBulkAddToWorkflow"
-          @bulk-open-workflow="handleBulkOpenWorkflow"
-          @bulk-export-workflow="handleBulkExportWorkflow"
           @select-asset="handleAssetSelect"
+          @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
           @zoom="handleZoomClick"
           @output-count-click="enterFolderView"
@@ -190,6 +174,24 @@
     v-model:active-index="galleryActiveIndex"
     :all-gallery-items="galleryItems"
   />
+  <MediaAssetContextMenu
+    v-if="contextMenuAsset"
+    ref="contextMenuRef"
+    :asset="contextMenuAsset"
+    :asset-type="contextMenuAssetType"
+    :file-kind="contextMenuFileKind"
+    :show-delete-button="shouldShowDeleteButton"
+    :selected-assets="selectedAssets"
+    :is-bulk-mode="isBulkMode"
+    @zoom="handleZoomClick(contextMenuAsset)"
+    @hide="handleContextMenuHide"
+    @asset-deleted="refreshAssets"
+    @bulk-download="handleBulkDownload"
+    @bulk-delete="handleBulkDelete"
+    @bulk-add-to-workflow="handleBulkAddToWorkflow"
+    @bulk-open-workflow="handleBulkOpenWorkflow"
+    @bulk-export-workflow="handleBulkExportWorkflow"
+  />
 </template>
 
 <script setup lang="ts">
@@ -198,12 +200,14 @@ import {
   useDebounceFn,
   useElementHover,
   useResizeObserver,
-  useStorage
+  useStorage,
+  useTimeoutFn
 } from '@vueuse/core'
 import { useToast } from 'primevue/usetoast'
 import {
   computed,
   defineAsyncComponent,
+  nextTick,
   onMounted,
   onUnmounted,
   ref,
@@ -220,7 +224,9 @@ import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
+import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
+import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
@@ -230,6 +236,7 @@ import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadat
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils'
+import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -260,6 +267,9 @@ const viewMode = useStorage<'list' | 'grid'>(
 )
 const isListView = computed(() => viewMode.value === 'list')
 
+const contextMenuRef = ref<InstanceType<typeof MediaAssetContextMenu>>()
+const contextMenuAsset = ref<AssetItem | null>(null)
+
 // Determine if delete button should be shown
 // Hide delete button when in input tab and not in cloud (OSS mode - files are from local folders)
 const shouldShowDeleteButton = computed(() => {
@@ -267,6 +277,14 @@ const shouldShowDeleteButton = computed(() => {
   return true
 })
 
+const contextMenuAssetType = computed(() =>
+  contextMenuAsset.value ? getAssetType(contextMenuAsset.value.tags) : 'input'
+)
+
+const contextMenuFileKind = computed<MediaKind>(() =>
+  getMediaTypeFromFilename(contextMenuAsset.value?.name ?? '')
+)
+
 const shouldShowOutputCount = (item: AssetItem): boolean => {
   if (activeTab.value !== 'output' || isInFolderView.value) {
     return false
@@ -484,6 +502,26 @@ function handleAssetSelect(asset: AssetItem, assets?: AssetItem[]) {
   handleAssetClick(asset, index, assetList)
 }
 
+const { start: scheduleCleanup, stop: cancelCleanup } = useTimeoutFn(
+  () => {
+    contextMenuAsset.value = null
+  },
+  0,
+  { immediate: false }
+)
+
+function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
+  cancelCleanup()
+  contextMenuAsset.value = asset
+  void nextTick(() => {
+    contextMenuRef.value?.show(event)
+  })
+}
+
+function handleContextMenuHide() {
+  scheduleCleanup()
+}
+
 const handleBulkDownload = (assets: AssetItem[]) => {
   downloadMultipleAssets(assets)
   clearSelection()

src/components/sidebar/tabs/JobHistorySidebarTab.test.ts

@@ -5,49 +5,6 @@ import { defineComponent, nextTick } from 'vue'
 
 import JobHistorySidebarTab from './JobHistorySidebarTab.vue'
 
-vi.mock('@/components/queue/job/JobDetailsPopover.vue', () => ({
-  default: {
-    name: 'JobDetailsPopover',
-    template: '<div class="job-details-popover-stub" />'
-  }
-}))
-
-vi.mock('@/components/queue/JobHistoryActionsMenu.vue', () => ({
-  default: {
-    name: 'JobHistoryActionsMenu',
-    template: '<div />'
-  }
-}))
-
-vi.mock('@/components/queue/job/JobFilterActions.vue', () => ({
-  default: {
-    name: 'JobFilterActions',
-    template: '<div />'
-  }
-}))
-
-vi.mock('@/components/queue/job/JobFilterTabs.vue', () => ({
-  default: {
-    name: 'JobFilterTabs',
-    template: '<div />'
-  }
-}))
-
-vi.mock('@/components/sidebar/tabs/SidebarTabTemplate.vue', () => ({
-  default: {
-    name: 'SidebarTabTemplate',
-    template:
-      '<div><slot name="alt-title" /><slot name="header" /><slot name="body" /></div>'
-  }
-}))
-
-vi.mock('@/components/sidebar/tabs/queue/MediaLightbox.vue', () => ({
-  default: {
-    name: 'MediaLightbox',
-    template: '<div />'
-  }
-}))
-
 const JobDetailsPopoverStub = defineComponent({
   name: 'JobDetailsPopover',
   props: {
@@ -95,7 +52,7 @@ vi.mock('@/composables/queue/useJobList', async () => {
 
 vi.mock('@/composables/queue/useJobMenu', () => ({
   useJobMenu: () => ({
-    getJobMenuEntries: () => [],
+    jobMenuEntries: [],
     cancelJob: vi.fn()
   })
 }))
@@ -173,6 +130,7 @@ function mountComponent() {
         JobFilterTabs: true,
         JobFilterActions: true,
         JobHistoryActionsMenu: true,
+        JobContextMenu: true,
         ResultGallery: true,
         teleport: true,
         JobDetailsPopover: JobDetailsPopoverStub

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -48,11 +48,15 @@
     <template #body>
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
-        :get-menu-entries="getJobMenuEntries"
         @cancel-item="onCancelItem"
         @delete-item="onDeleteItem"
-        @menu-action="onJobMenuAction"
         @view-item="onViewItem"
+        @menu="onMenuItem"
+      />
+      <JobContextMenu
+        ref="jobContextMenuRef"
+        :entries="jobMenuEntries"
+        @action="onJobMenuAction"
       />
       <MediaLightbox
         v-model:active-index="galleryActiveIndex"
@@ -63,12 +67,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import JobFilterActions from '@/components/queue/job/JobFilterActions.vue'
 import JobFilterTabs from '@/components/queue/job/JobFilterTabs.vue'
 import JobAssetsList from '@/components/queue/job/JobAssetsList.vue'
+import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
 import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 import { useJobMenu } from '@/composables/queue/useJobMenu'
@@ -177,7 +182,13 @@ const onInspectAsset = (item: JobListItem) => {
   void onViewItem(item)
 }
 
-const { getJobMenuEntries, cancelJob } = useJobMenu(undefined, onInspectAsset)
+const currentMenuItem = ref<JobListItem | null>(null)
+const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
+
+const { jobMenuEntries, cancelJob } = useJobMenu(
+  () => currentMenuItem.value,
+  onInspectAsset
+)
 
 const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
   await cancelJob(item)
@@ -188,8 +199,14 @@ const onDeleteItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
   await queueStore.delete(item.taskRef)
 })
 
+const onMenuItem = (item: JobListItem, event: Event) => {
+  currentMenuItem.value = item
+  jobContextMenuRef.value?.open(event)
+}
+
 const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
   if (entry.kind === 'divider') return
   if (entry.onClick) await entry.onClick()
+  jobContextMenuRef.value?.hide()
 })
 </script>

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/composables/queue/useJobMenu.ts

@@ -117,10 +117,10 @@ export function useJobMenu(
 
   // This is very magical only because it matches the respective backend implementation
   // There is or will be a better way to do this
-  const addOutputLoaderNode = async (item?: JobListItem | null) => {
-    const target = resolveItem(item)
-    if (!target) return
-    const result: ResultItemImpl | undefined = target.taskRef?.previewOutput
+  const addOutputLoaderNode = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
     if (!result) return
 
     let nodeType: 'LoadImage' | 'LoadVideo' | 'LoadAudio' | null = null
@@ -168,10 +168,10 @@ export function useJobMenu(
   /**
    * Trigger a download of the job's previewable output asset.
    */
-  const downloadPreviewAsset = (item?: JobListItem | null) => {
-    const target = resolveItem(item)
-    if (!target) return
-    const result: ResultItemImpl | undefined = target.taskRef?.previewOutput
+  const downloadPreviewAsset = () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
     if (!result) return
     downloadFile(result.url)
   }
@@ -179,14 +179,14 @@ export function useJobMenu(
   /**
    * Export the workflow JSON attached to the job.
    */
-  const exportJobWorkflow = async (item?: JobListItem | null) => {
-    const target = resolveItem(item)
-    if (!target) return
-    const data = await getJobWorkflow(target.id)
+  const exportJobWorkflow = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const data = await getJobWorkflow(item.id)
     if (!data) return
 
     const settingStore = useSettingStore()
-    let filename = `Job ${target.id}.json`
+    let filename = `Job ${item.id}.json`
 
     if (settingStore.get('Comfy.PromptFilename')) {
       const input = await useDialogService().prompt({
@@ -203,10 +203,10 @@ export function useJobMenu(
     downloadBlob(filename, blob)
   }
 
-  const deleteJobAsset = async (item?: JobListItem | null) => {
-    const target = resolveItem(item)
-    if (!target) return
-    const task = target.taskRef as TaskItemImpl | undefined
+  const deleteJobAsset = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const task = item.taskRef as TaskItemImpl | undefined
     const preview = task?.previewOutput
     if (!task || !preview) return
 
@@ -237,11 +237,11 @@ export function useJobMenu(
     st('queue.jobMenu.cancelJob', 'Cancel job')
   )
 
-  const buildJobMenuEntries = (item?: JobListItem | null): MenuEntry[] => {
-    const target = resolveItem(item)
-    const state = target?.state
+  const jobMenuEntries = computed<MenuEntry[]>(() => {
+    const item = currentMenuItem()
+    const state = item?.state
     if (!state) return []
-    const hasPreviewAsset = !!target?.taskRef?.previewOutput
+    const hasPreviewAsset = !!item?.taskRef?.previewOutput
     if (state === 'completed') {
       return [
         {
@@ -251,7 +251,8 @@ export function useJobMenu(
           disabled: !hasPreviewAsset || !onInspectAsset,
           onClick: onInspectAsset
             ? () => {
-                if (target) onInspectAsset(target)
+                const item = currentMenuItem()
+                if (item) onInspectAsset(item)
               }
             : undefined
         },
@@ -263,34 +264,34 @@ export function useJobMenu(
           ),
           icon: 'icon-[comfy--node]',
           disabled: !hasPreviewAsset,
-          onClick: () => addOutputLoaderNode(target)
+          onClick: addOutputLoaderNode
         },
         {
           key: 'download',
           label: st('queue.jobMenu.download', 'Download'),
           icon: 'icon-[lucide--download]',
           disabled: !hasPreviewAsset,
-          onClick: () => downloadPreviewAsset(target)
+          onClick: downloadPreviewAsset
         },
         { kind: 'divider', key: 'd1' },
         {
           key: 'open-workflow',
           label: jobMenuOpenWorkflowLabel.value,
           icon: 'icon-[comfy--workflow]',
-          onClick: () => openJobWorkflow(target)
+          onClick: openJobWorkflow
         },
         {
           key: 'export-workflow',
           label: st('queue.jobMenu.exportWorkflow', 'Export workflow'),
           icon: 'icon-[comfy--file-output]',
-          onClick: () => exportJobWorkflow(target)
+          onClick: exportJobWorkflow
         },
         { kind: 'divider', key: 'd2' },
         {
           key: 'copy-id',
           label: jobMenuCopyJobIdLabel.value,
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyJobId(target)
+          onClick: copyJobId
         },
         { kind: 'divider', key: 'd3' },
         ...(hasPreviewAsset
@@ -299,7 +300,7 @@ export function useJobMenu(
                 key: 'delete',
                 label: st('queue.jobMenu.deleteAsset', 'Delete asset'),
                 icon: 'icon-[lucide--trash-2]',
-                onClick: () => deleteJobAsset(target)
+                onClick: deleteJobAsset
               }
             ]
           : [])
@@ -311,33 +312,33 @@ export function useJobMenu(
           key: 'open-workflow',
           label: jobMenuOpenWorkflowFailedLabel.value,
           icon: 'icon-[comfy--workflow]',
-          onClick: () => openJobWorkflow(target)
+          onClick: openJobWorkflow
         },
         { kind: 'divider', key: 'd1' },
         {
           key: 'copy-id',
           label: jobMenuCopyJobIdLabel.value,
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyJobId(target)
+          onClick: copyJobId
         },
         {
           key: 'copy-error',
           label: st('queue.jobMenu.copyErrorMessage', 'Copy error message'),
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyErrorMessage(target)
+          onClick: copyErrorMessage
         },
         {
           key: 'report-error',
           label: st('queue.jobMenu.reportError', 'Report error'),
           icon: 'icon-[lucide--message-circle-warning]',
-          onClick: () => reportError(target)
+          onClick: reportError
         },
         { kind: 'divider', key: 'd2' },
         {
           key: 'delete',
           label: st('queue.jobMenu.removeJob', 'Remove job'),
           icon: 'icon-[lucide--circle-minus]',
-          onClick: () => removeFailedJob(target?.taskRef)
+          onClick: removeFailedJob
         }
       ]
     }
@@ -346,30 +347,27 @@ export function useJobMenu(
         key: 'open-workflow',
         label: jobMenuOpenWorkflowLabel.value,
         icon: 'icon-[comfy--workflow]',
-        onClick: () => openJobWorkflow(target)
+        onClick: openJobWorkflow
       },
       { kind: 'divider', key: 'd1' },
       {
         key: 'copy-id',
         label: jobMenuCopyJobIdLabel.value,
         icon: 'icon-[lucide--copy]',
-        onClick: () => copyJobId(target)
+        onClick: copyJobId
       },
       { kind: 'divider', key: 'd2' },
       {
         key: 'cancel-job',
         label: jobMenuCancelLabel.value,
         icon: 'icon-[lucide--x]',
-        onClick: () => cancelJob(target)
+        onClick: cancelJob
       }
     ]
-  }
-
-  const jobMenuEntries = computed<MenuEntry[]>(() => buildJobMenuEntries())
+  })
 
   return {
     jobMenuEntries,
-    getJobMenuEntries: buildJobMenuEntries,
     openJobWorkflow,
     copyJobId,
     cancelJob,

src/composables/useDismissableOverlay.test.ts

@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { effectScope, ref } from 'vue'
+import type { EffectScope, Ref } from 'vue'
+
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
+
+describe('useDismissableOverlay', () => {
+  let scope: EffectScope | undefined
+  let isOpen: Ref<boolean>
+  let overlayEl: HTMLElement
+  let triggerEl: HTMLElement
+  let outsideEl: HTMLElement
+  let dismissCount: number
+
+  const mountComposable = ({
+    dismissOnScroll = false,
+    getTriggerEl
+  }: {
+    dismissOnScroll?: boolean
+    getTriggerEl?: () => HTMLElement | null
+  } = {}) => {
+    scope = effectScope()
+    scope.run(() =>
+      useDismissableOverlay({
+        isOpen,
+        getOverlayEl: () => overlayEl,
+        getTriggerEl,
+        onDismiss: () => {
+          dismissCount += 1
+        },
+        dismissOnScroll
+      })
+    )
+  }
+
+  beforeEach(() => {
+    isOpen = ref(true)
+    overlayEl = document.createElement('div')
+    triggerEl = document.createElement('button')
+    outsideEl = document.createElement('div')
+    dismissCount = 0
+    document.body.append(overlayEl, triggerEl, outsideEl)
+  })
+
+  afterEach(() => {
+    scope?.stop()
+    scope = undefined
+    document.body.innerHTML = ''
+  })
+
+  it('dismisses on outside pointerdown', () => {
+    mountComposable()
+
+    outsideEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(1)
+  })
+
+  it('ignores pointerdown inside the overlay', () => {
+    mountComposable()
+
+    overlayEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('ignores pointerdown inside the trigger', () => {
+    mountComposable({
+      getTriggerEl: () => triggerEl
+    })
+
+    triggerEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('dismisses on scroll when enabled', () => {
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(1)
+  })
+
+  it('ignores scroll inside the overlay', () => {
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    overlayEl.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('does not dismiss when closed', () => {
+    isOpen.value = false
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    outsideEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(0)
+  })
+})

src/composables/useDismissableOverlay.ts

@@ -0,0 +1,60 @@
+import { useEventListener } from '@vueuse/core'
+
+import { toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface UseDismissableOverlayOptions {
+  isOpen: MaybeRefOrGetter<boolean>
+  getOverlayEl: () => HTMLElement | null
+  onDismiss: () => void
+  getTriggerEl?: () => HTMLElement | null
+  dismissOnScroll?: boolean
+}
+
+const isNode = (value: EventTarget | null | undefined): value is Node =>
+  value instanceof Node
+
+const isInside = (target: Node, element: HTMLElement | null | undefined) =>
+  !!element?.contains(target)
+
+export function useDismissableOverlay({
+  isOpen,
+  getOverlayEl,
+  onDismiss,
+  getTriggerEl,
+  dismissOnScroll = false
+}: UseDismissableOverlayOptions) {
+  const dismissIfOutside = (event: Event) => {
+    if (!toValue(isOpen)) {
+      return
+    }
+
+    const overlay = getOverlayEl()
+    if (!overlay) {
+      return
+    }
+
+    if (!isNode(event.target)) {
+      onDismiss()
+      return
+    }
+
+    if (
+      isInside(event.target, overlay) ||
+      isInside(event.target, getTriggerEl?.())
+    ) {
+      return
+    }
+
+    onDismiss()
+  }
+
+  useEventListener(window, 'pointerdown', dismissIfOutside, { capture: true })
+
+  if (dismissOnScroll) {
+    useEventListener(window, 'scroll', dismissIfOutside, {
+      capture: true,
+      passive: true
+    })
+  }
+}

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/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

@@ -343,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",

src/platform/assets/components/MediaAssetActionsMenu.vue

@@ -1,78 +0,0 @@
-<template>
-  <DropdownMenuRoot v-model:open="open">
-    <DropdownMenuTrigger as-child>
-      <slot>
-        <Button
-          variant="secondary"
-          size="icon"
-          :aria-label="t('mediaAsset.actions.moreOptions')"
-        >
-          <i class="icon-[lucide--ellipsis] size-4" />
-        </Button>
-      </slot>
-    </DropdownMenuTrigger>
-    <DropdownMenuPortal>
-      <DropdownMenuContent
-        :side-offset="4"
-        :collision-padding="8"
-        class="z-1700 bg-transparent p-0 shadow-lg"
-      >
-        <MediaAssetMenuPanel
-          :asset
-          :asset-type
-          :file-kind
-          :show-delete-button
-          :selected-assets
-          :is-bulk-mode
-          close-on-scroll
-          @zoom="emit('zoom')"
-          @asset-deleted="emit('asset-deleted')"
-          @bulk-download="emit('bulk-download', $event)"
-          @bulk-delete="emit('bulk-delete', $event)"
-          @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-          @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-          @bulk-export-workflow="emit('bulk-export-workflow', $event)"
-        />
-      </DropdownMenuContent>
-    </DropdownMenuPortal>
-  </DropdownMenuRoot>
-</template>
-
-<script setup lang="ts">
-import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  DropdownMenuRoot,
-  DropdownMenuTrigger
-} from 'reka-ui'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-
-import type { AssetItem } from '../schemas/assetSchema'
-import type { AssetContext, MediaKind } from '../schemas/mediaAssetSchema'
-import MediaAssetMenuPanel from './MediaAssetMenuPanel.vue'
-
-const open = defineModel<boolean>('open', { default: false })
-
-defineProps<{
-  asset: AssetItem
-  assetType: AssetContext['type']
-  fileKind: MediaKind
-  showDeleteButton?: boolean
-  selectedAssets?: AssetItem[]
-  isBulkMode?: boolean
-}>()
-
-const emit = defineEmits<{
-  zoom: []
-  'asset-deleted': []
-  'bulk-download': [assets: AssetItem[]]
-  'bulk-delete': [assets: AssetItem[]]
-  'bulk-add-to-workflow': [assets: AssetItem[]]
-  'bulk-open-workflow': [assets: AssetItem[]]
-  'bulk-export-workflow': [assets: AssetItem[]]
-}>()
-
-const { t } = useI18n()
-</script>

src/platform/assets/components/MediaAssetCard.vue

@@ -23,6 +23,9 @@
     :data-selected="selected"
     :draggable="true"
     @click.stop="$emit('click')"
+    @contextmenu.prevent.stop="
+      asset ? emit('context-menu', $event, asset) : undefined
+    "
     @dragstart="dragStart"
   >
     <!-- Top Area: Media Preview -->
@@ -66,32 +69,16 @@
           >
             <i class="icon-[lucide--zoom-in] size-4" />
           </Button>
-          <MediaAssetActionsMenu
-            v-if="asset"
-            v-model:open="isActionsMenuOpen"
-            :asset
-            :asset-type="assetType"
-            :file-kind="fileKind"
-            :show-delete-button
-            :selected-assets
-            :is-bulk-mode
-            @zoom="handleZoomClick"
-            @asset-deleted="emit('asset-deleted')"
-            @bulk-download="emit('bulk-download', $event)"
-            @bulk-delete="emit('bulk-delete', $event)"
-            @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-            @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-            @bulk-export-workflow="emit('bulk-export-workflow', $event)"
+          <Button
+            variant="overlay-white"
+            size="icon"
+            :aria-label="$t('mediaAsset.actions.moreOptions')"
+            @click.stop="
+              asset ? emit('context-menu', $event, asset) : undefined
+            "
           >
-            <Button
-              variant="overlay-white"
-              size="icon"
-              :aria-label="$t('mediaAsset.actions.moreOptions')"
-              @click.stop
-            >
-              <i class="icon-[lucide--ellipsis] size-4" />
-            </Button>
-          </MediaAssetActionsMenu>
+            <i class="icon-[lucide--ellipsis] size-4" />
+          </Button>
         </IconGroup>
       </div>
     </div>
@@ -172,7 +159,6 @@ import { getAssetDisplayName } from '../utils/assetMetadataUtils'
 import type { MediaKind } from '../schemas/mediaAssetSchema'
 import { MediaAssetKey } from '../schemas/mediaAssetSchema'
 import MediaTitle from './MediaTitle.vue'
-import MediaAssetActionsMenu from './MediaAssetActionsMenu.vue'
 
 type PreviewKind = ReturnType<typeof getMediaTypeFromFilename>
 
@@ -191,24 +177,12 @@ function getTopComponent(kind: PreviewKind) {
   return mediaComponents.top[kind] || mediaComponents.top.other
 }
 
-const {
-  asset,
-  loading,
-  selected,
-  showOutputCount,
-  outputCount,
-  showDeleteButton,
-  selectedAssets,
-  isBulkMode
-} = defineProps<{
+const { asset, loading, selected, showOutputCount, outputCount } = defineProps<{
   asset?: AssetItem
   loading?: boolean
   selected?: boolean
   showOutputCount?: boolean
   outputCount?: number
-  showDeleteButton?: boolean
-  selectedAssets?: AssetItem[]
-  isBulkMode?: boolean
 }>()
 
 const assetsStore = useAssetsStore()
@@ -222,19 +196,13 @@ const emit = defineEmits<{
   click: []
   zoom: [asset: AssetItem]
   'output-count-click': []
-  'asset-deleted': []
-  'bulk-download': [assets: AssetItem[]]
-  'bulk-delete': [assets: AssetItem[]]
-  'bulk-add-to-workflow': [assets: AssetItem[]]
-  'bulk-open-workflow': [assets: AssetItem[]]
-  'bulk-export-workflow': [assets: AssetItem[]]
+  'context-menu': [event: MouseEvent, asset: AssetItem]
 }>()
 
 const cardContainerRef = ref<HTMLElement>()
 
 const isVideoPlaying = ref(false)
 const showVideoControls = ref(false)
-const isActionsMenuOpen = ref(false)
 
 // Store actual image dimensions
 const imageDimensions = ref<{ width: number; height: number } | undefined>()
@@ -322,12 +290,7 @@ const metaInfo = computed(() => {
 
 const showActionsOverlay = computed(() => {
   if (loading || !asset || isDeleting.value) return false
-  return (
-    isHovered.value ||
-    selected ||
-    isVideoPlaying.value ||
-    isActionsMenuOpen.value
-  )
+  return isHovered.value || selected || isVideoPlaying.value
 })
 
 const handleZoomClick = () => {

src/platform/assets/components/MediaAssetContextMenu.test.ts

@@ -1,11 +1,17 @@
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
+import { defineComponent, nextTick } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 
 import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
 vi.mock('@/platform/distribution/types', () => ({
   isCloud: false
 }))
@@ -35,6 +41,38 @@ vi.mock('../composables/useMediaAssetActions', () => ({
   useMediaAssetActions: () => mediaAssetActions
 }))
 
+const contextMenuStub = defineComponent({
+  name: 'ContextMenu',
+  props: {
+    pt: {
+      type: Object,
+      default: undefined
+    }
+  },
+  emits: ['hide'],
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    hide() {
+      this.visible = false
+      this.$emit('hide')
+    }
+  },
+  template: `
+    <div
+      v-if="visible"
+      class="context-menu-stub"
+      v-bind="pt?.root"
+    />
+  `
+})
+
 const asset: AssetItem = {
   id: 'asset-1',
   name: 'image.png',
@@ -42,19 +80,12 @@ const asset: AssetItem = {
   user_metadata: {}
 }
 
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  fallbackLocale: 'en',
-  missingWarn: false,
-  fallbackWarn: false,
-  messages: {
-    en: {}
-  }
-})
-
 const buttonStub = {
-  template: '<button class="button-stub" type="button"><slot /></button>'
+  template: '<div class="button-stub"><slot /></div>'
+}
+
+type MediaAssetContextMenuExposed = ComponentPublicInstance & {
+  show: (event: MouseEvent) => void
 }
 
 const mountComponent = () =>
@@ -65,36 +96,23 @@ const mountComponent = () =>
       assetType: 'output',
       fileKind: 'image'
     },
-    slots: {
-      default: '<button class="context-trigger" type="button">Trigger</button>'
-    },
     global: {
-      plugins: [i18n],
       stubs: {
+        ContextMenu: contextMenuStub,
         Button: buttonStub
       }
     }
   })
 
-async function showMenu(): Promise<HTMLElement | null> {
-  const trigger = document.body.querySelector('.context-trigger')
-  trigger?.dispatchEvent(
-    new MouseEvent('contextmenu', {
-      bubbles: true,
-      cancelable: true,
-      button: 2
-    })
-  )
-  await waitForMenuUpdate()
-
-  return document.body.querySelector(
-    '.media-asset-context-menu-content'
-  ) as HTMLElement | null
-}
-
-const waitForMenuUpdate = async () => {
-  await nextTick()
+async function showMenu(
+  wrapper: ReturnType<typeof mountComponent>
+): Promise<HTMLElement> {
+  const exposed = wrapper.vm as MediaAssetContextMenuExposed
+  const event = new MouseEvent('contextmenu', { bubbles: true })
+  exposed.show(event)
   await nextTick()
+
+  return wrapper.get('.context-menu-stub').element as HTMLElement
 }
 
 afterEach(() => {
@@ -103,45 +121,22 @@ afterEach(() => {
 })
 
 describe('MediaAssetContextMenu', () => {
-  it('opens from the slotted context-menu trigger', async () => {
+  it('dismisses outside pointerdown using the rendered root id', async () => {
     const wrapper = mountComponent()
+    const outside = document.createElement('div')
+    document.body.append(outside)
 
-    const menu = await showMenu()
-    expect(menu).not.toBeNull()
-    expect(
-      document.body.querySelectorAll('[role="menuitem"]').length
-    ).toBeGreaterThan(0)
-    wrapper.unmount()
-  })
+    const menu = await showMenu(wrapper)
+    const menuId = menu.id
 
-  it('forwards inspect actions from the menu panel', async () => {
-    const wrapper = mountComponent()
+    expect(menuId).not.toBe('')
+    expect(document.getElementById(menuId)).toBe(menu)
 
-    const menu = await showMenu()
-    expect(menu).not.toBeNull()
+    outside.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
 
-    const inspectButton = document.body.querySelector(
-      '.media-asset-context-menu-content .button-stub'
-    ) as HTMLButtonElement | null
-    inspectButton?.click()
-    await waitForMenuUpdate()
-
-    expect(wrapper.emitted('zoom')).toEqual([[]])
-    wrapper.unmount()
-  })
-
-  it('closes on scroll', async () => {
-    const wrapper = mountComponent()
-
-    const menu = await showMenu()
-    expect(menu).not.toBeNull()
-
-    window.dispatchEvent(new Event('scroll'))
-    await waitForMenuUpdate()
-
-    expect(
-      document.body.querySelector('.media-asset-context-menu-content')
-    ).toBeNull()
+    expect(wrapper.find('.context-menu-stub').exists()).toBe(false)
+    expect(wrapper.emitted('hide')).toEqual([[]])
 
     wrapper.unmount()
   })

src/platform/assets/components/MediaAssetContextMenu.vue

@@ -1,46 +1,51 @@
 <template>
-  <ContextMenuRoot>
-    <ContextMenuTrigger as-child>
-      <slot />
-    </ContextMenuTrigger>
-    <ContextMenuPortal>
-      <ContextMenuContent
-        :collision-padding="8"
-        class="z-1700 bg-transparent p-0 shadow-lg"
+  <ContextMenu
+    ref="contextMenu"
+    :model="contextMenuItems"
+    :pt="{
+      root: {
+        id: contextMenuId,
+        class: cn(
+          'rounded-lg',
+          'bg-secondary-background text-base-foreground',
+          'shadow-lg'
+        )
+      }
+    }"
+    @hide="onMenuHide"
+  >
+    <template #item="{ item, props }">
+      <Button
+        variant="secondary"
+        class="w-full justify-start"
+        v-bind="props.action"
       >
-        <MediaAssetMenuPanel
-          class="media-asset-context-menu-content"
-          :asset
-          :asset-type
-          :file-kind
-          :show-delete-button
-          :selected-assets
-          :is-bulk-mode
-          close-on-scroll
-          @zoom="emit('zoom')"
-          @asset-deleted="emit('asset-deleted')"
-          @bulk-download="emit('bulk-download', $event)"
-          @bulk-delete="emit('bulk-delete', $event)"
-          @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-          @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-          @bulk-export-workflow="emit('bulk-export-workflow', $event)"
-        />
-      </ContextMenuContent>
-    </ContextMenuPortal>
-  </ContextMenuRoot>
+        <i v-if="item.icon" :class="item.icon" class="size-4" />
+        <span>{{
+          typeof item.label === 'function' ? item.label() : (item.label ?? '')
+        }}</span>
+      </Button>
+    </template>
+  </ContextMenu>
 </template>
 
 <script setup lang="ts">
-import {
-  ContextMenuContent,
-  ContextMenuPortal,
-  ContextMenuRoot,
-  ContextMenuTrigger
-} from 'reka-ui'
+import ContextMenu from 'primevue/contextmenu'
+import type { MenuItem } from 'primevue/menuitem'
+import { computed, ref, useId } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import Button from '@/components/ui/button/Button.vue'
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
+import { isCloud } from '@/platform/distribution/types'
+import { supportsWorkflowMetadata } from '@/platform/workflow/utils/workflowExtractionUtil'
+import { isPreviewableMediaType } from '@/utils/formatUtil'
+import { detectNodeTypeFromFilename } from '@/utils/loaderNodeUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+import { useMediaAssetActions } from '../composables/useMediaAssetActions'
 import type { AssetItem } from '../schemas/assetSchema'
 import type { AssetContext, MediaKind } from '../schemas/mediaAssetSchema'
-import MediaAssetMenuPanel from './MediaAssetMenuPanel.vue'
 
 const {
   asset,
@@ -60,6 +65,7 @@ const {
 
 const emit = defineEmits<{
   zoom: []
+  hide: []
   'asset-deleted': []
   'bulk-download': [assets: AssetItem[]]
   'bulk-delete': [assets: AssetItem[]]
@@ -67,4 +73,214 @@ const emit = defineEmits<{
   'bulk-open-workflow': [assets: AssetItem[]]
   'bulk-export-workflow': [assets: AssetItem[]]
 }>()
+
+type ContextMenuHandle = {
+  show: (event: MouseEvent) => void
+  hide: () => void
+}
+
+const contextMenu = ref<ContextMenuHandle | null>(null)
+const contextMenuId = useId()
+const isVisible = ref(false)
+const actions = useMediaAssetActions()
+const { t } = useI18n()
+
+useDismissableOverlay({
+  isOpen: isVisible,
+  getOverlayEl: () => document.getElementById(contextMenuId),
+  onDismiss: hide,
+  dismissOnScroll: true
+})
+
+const showAddToWorkflow = computed(() => {
+  // Output assets can always be added
+  if (assetType === 'output') return true
+
+  // Input assets: check if file type is supported by loader nodes
+  if (assetType === 'input' && asset?.name) {
+    const { nodeType } = detectNodeTypeFromFilename(asset.name)
+    return nodeType !== null
+  }
+
+  return false
+})
+
+const showWorkflowActions = computed(() => {
+  // Output assets always have workflow metadata
+  if (assetType === 'output') return true
+
+  // Input assets: only formats that support workflow metadata
+  if (assetType === 'input' && asset?.name) {
+    return supportsWorkflowMetadata(asset.name)
+  }
+
+  return false
+})
+
+const showCopyJobId = computed(() => {
+  return assetType !== 'input'
+})
+
+const shouldShowDeleteButton = computed(() => {
+  const propAllows = showDeleteButton ?? true
+  const typeAllows =
+    assetType === 'output' || (assetType === 'input' && isCloud)
+
+  return propAllows && typeAllows
+})
+
+// Context menu items
+const contextMenuItems = computed<MenuItem[]>(() => {
+  if (!asset) return []
+
+  const items: MenuItem[] = []
+
+  // Check if current asset is part of the selection
+  const isCurrentAssetSelected = selectedAssets?.some(
+    (selectedAsset) => selectedAsset.id === asset.id
+  )
+
+  // Bulk mode: Show selected count and bulk actions only if current asset is selected
+  if (
+    isBulkMode &&
+    selectedAssets &&
+    selectedAssets.length > 0 &&
+    isCurrentAssetSelected
+  ) {
+    // Header item showing selected count
+    items.push({
+      label: t('mediaAsset.selection.multipleSelectedAssets'),
+      disabled: true
+    })
+
+    // Bulk Add to Workflow
+    items.push({
+      label: t('mediaAsset.selection.insertAllAssetsAsNodes'),
+      icon: 'icon-[comfy--node]',
+      command: () => emit('bulk-add-to-workflow', selectedAssets)
+    })
+
+    // Bulk Open Workflow
+    items.push({
+      label: t('mediaAsset.selection.openWorkflowAll'),
+      icon: 'icon-[comfy--workflow]',
+      command: () => emit('bulk-open-workflow', selectedAssets)
+    })
+
+    // Bulk Export Workflow
+    items.push({
+      label: t('mediaAsset.selection.exportWorkflowAll'),
+      icon: 'icon-[lucide--file-output]',
+      command: () => emit('bulk-export-workflow', selectedAssets)
+    })
+
+    // Bulk Download
+    items.push({
+      label: t('mediaAsset.selection.downloadSelectedAll'),
+      icon: 'icon-[lucide--download]',
+      command: () => emit('bulk-download', selectedAssets)
+    })
+
+    // Bulk Delete (if allowed)
+    if (shouldShowDeleteButton.value) {
+      items.push({
+        label: t('mediaAsset.selection.deleteSelectedAll'),
+        icon: 'icon-[lucide--trash-2]',
+        command: () => emit('bulk-delete', selectedAssets)
+      })
+    }
+
+    return items
+  }
+
+  // Individual mode: Show all menu options
+
+  // Inspect
+  if (isPreviewableMediaType(fileKind)) {
+    items.push({
+      label: t('mediaAsset.actions.inspect'),
+      icon: 'icon-[lucide--zoom-in]',
+      command: () => emit('zoom')
+    })
+  }
+
+  // Add to workflow (conditional)
+  if (showAddToWorkflow.value) {
+    items.push({
+      label: t('mediaAsset.actions.insertAsNodeInWorkflow'),
+      icon: 'icon-[comfy--node]',
+      command: () => actions.addWorkflow(asset)
+    })
+  }
+
+  // Download
+  items.push({
+    label: t('mediaAsset.actions.download'),
+    icon: 'icon-[lucide--download]',
+    command: () => actions.downloadAsset(asset)
+  })
+
+  // Separator before workflow actions (only if there are workflow actions)
+  if (showWorkflowActions.value) {
+    items.push({ separator: true })
+    items.push({
+      label: t('mediaAsset.actions.openWorkflow'),
+      icon: 'icon-[comfy--workflow]',
+      command: () => actions.openWorkflow(asset)
+    })
+    items.push({
+      label: t('mediaAsset.actions.exportWorkflow'),
+      icon: 'icon-[lucide--file-output]',
+      command: () => actions.exportWorkflow(asset)
+    })
+  }
+
+  // Copy job ID
+  if (showCopyJobId.value) {
+    items.push({ separator: true })
+    items.push({
+      label: t('mediaAsset.actions.copyJobId'),
+      icon: 'icon-[lucide--copy]',
+      command: async () => {
+        await actions.copyJobId(asset)
+      }
+    })
+  }
+
+  // Delete
+  if (shouldShowDeleteButton.value) {
+    items.push({ separator: true })
+    items.push({
+      label: t('mediaAsset.actions.delete'),
+      icon: 'icon-[lucide--trash-2]',
+      command: async () => {
+        if (asset) {
+          const confirmed = await actions.deleteAssets(asset)
+          if (confirmed) {
+            emit('asset-deleted')
+          }
+        }
+      }
+    })
+  }
+
+  return items
+})
+
+function onMenuHide() {
+  isVisible.value = false
+  emit('hide')
+}
+
+function show(event: MouseEvent) {
+  isVisible.value = true
+  contextMenu.value?.show(event)
+}
+
+function hide() {
+  isVisible.value = false
+  contextMenu.value?.hide()
+}
+
+defineExpose({ show, hide })
 </script>

src/platform/assets/components/MediaAssetMenuPanel.vue

@@ -1,314 +0,0 @@
-<template>
-  <div
-    class="media-asset-menu-panel flex min-w-56 flex-col rounded-lg border border-border-subtle bg-secondary-background p-2 text-base-foreground"
-  >
-    <template v-for="item in contextMenuItems" :key="item.key">
-      <component
-        :is="separatorComponent"
-        v-if="item.kind === 'divider'"
-        class="m-1 h-px bg-border-subtle"
-      />
-      <component
-        :is="itemComponent"
-        v-else
-        as-child
-        :disabled="item.disabled"
-        :text-value="item.label"
-        @select="void onItemSelect(item)"
-      >
-        <Button
-          variant="secondary"
-          size="sm"
-          class="w-full justify-start"
-          :disabled="item.disabled"
-        >
-          <i v-if="item.icon" :class="item.icon" class="size-4" />
-          <span>{{ item.label }}</span>
-        </Button>
-      </component>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-import {
-  ContextMenuItem,
-  ContextMenuSeparator,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  injectContextMenuRootContext,
-  injectDropdownMenuRootContext
-} from 'reka-ui'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { isCloud } from '@/platform/distribution/types'
-import { supportsWorkflowMetadata } from '@/platform/workflow/utils/workflowExtractionUtil'
-import { isPreviewableMediaType } from '@/utils/formatUtil'
-import { detectNodeTypeFromFilename } from '@/utils/loaderNodeUtil'
-
-import { useMediaAssetActions } from '../composables/useMediaAssetActions'
-import type { AssetItem } from '../schemas/assetSchema'
-import type { AssetContext, MediaKind } from '../schemas/mediaAssetSchema'
-
-const {
-  asset,
-  assetType,
-  fileKind,
-  showDeleteButton,
-  selectedAssets,
-  isBulkMode,
-  closeOnScroll
-} = defineProps<{
-  asset: AssetItem
-  assetType: AssetContext['type']
-  fileKind: MediaKind
-  showDeleteButton?: boolean
-  selectedAssets?: AssetItem[]
-  isBulkMode?: boolean
-  closeOnScroll?: boolean
-}>()
-
-const emit = defineEmits<{
-  zoom: []
-  'asset-deleted': []
-  'bulk-download': [assets: AssetItem[]]
-  'bulk-delete': [assets: AssetItem[]]
-  'bulk-add-to-workflow': [assets: AssetItem[]]
-  'bulk-open-workflow': [assets: AssetItem[]]
-  'bulk-export-workflow': [assets: AssetItem[]]
-}>()
-
-type ContextMenuItem =
-  | {
-      kind?: 'item'
-      key: string
-      label: string
-      icon?: string
-      disabled?: boolean
-      onSelect?: () => void | Promise<void>
-    }
-  | {
-      kind: 'divider'
-      key: string
-    }
-
-const actions = useMediaAssetActions()
-const { t } = useI18n()
-const dropdownMenuRootContext = injectDropdownMenuRootContext(null)
-const contextMenuRootContext = injectContextMenuRootContext(null)
-const itemComponent = dropdownMenuRootContext
-  ? DropdownMenuItem
-  : ContextMenuItem
-const separatorComponent = dropdownMenuRootContext
-  ? DropdownMenuSeparator
-  : ContextMenuSeparator
-
-function closeMenu() {
-  dropdownMenuRootContext?.onOpenChange(false)
-  contextMenuRootContext?.onOpenChange(false)
-}
-
-useEventListener(
-  window,
-  'scroll',
-  () => {
-    if (closeOnScroll) {
-      closeMenu()
-    }
-  },
-  { capture: true, passive: true }
-)
-
-function canAddToWorkflow(candidate: AssetItem): boolean {
-  if (assetType === 'output') return true
-
-  if (assetType === 'input' && candidate.name) {
-    const { nodeType } = detectNodeTypeFromFilename(candidate.name)
-    return nodeType !== null
-  }
-
-  return false
-}
-
-function canShowWorkflowActions(candidate: AssetItem): boolean {
-  if (assetType === 'output') return true
-
-  if (assetType === 'input' && candidate.name) {
-    return supportsWorkflowMetadata(candidate.name)
-  }
-
-  return false
-}
-
-const showAddToWorkflow = computed(() => {
-  return asset ? canAddToWorkflow(asset) : false
-})
-
-const showWorkflowActions = computed(() => {
-  return asset ? canShowWorkflowActions(asset) : false
-})
-
-const showCopyJobId = computed(() => assetType !== 'input')
-
-const allSelectedCanAddToWorkflow = computed(() => {
-  return selectedAssets?.every(canAddToWorkflow) ?? false
-})
-
-const allSelectedShowWorkflowActions = computed(() => {
-  return selectedAssets?.every(canShowWorkflowActions) ?? false
-})
-
-const shouldShowDeleteButton = computed(() => {
-  const propAllows = showDeleteButton ?? true
-  const typeAllows =
-    assetType === 'output' || (assetType === 'input' && isCloud)
-
-  return propAllows && typeAllows
-})
-
-const contextMenuItems = computed<ContextMenuItem[]>(() => {
-  if (!asset) return []
-
-  const items: ContextMenuItem[] = []
-  const isCurrentAssetSelected = selectedAssets?.some(
-    (selectedAsset) => selectedAsset.id === asset.id
-  )
-
-  if (
-    isBulkMode &&
-    selectedAssets &&
-    selectedAssets.length > 0 &&
-    isCurrentAssetSelected
-  ) {
-    items.push({
-      key: 'bulk-selection-header',
-      label: t('mediaAsset.selection.multipleSelectedAssets'),
-      disabled: true
-    })
-
-    if (allSelectedCanAddToWorkflow.value) {
-      items.push({
-        key: 'bulk-add-to-workflow',
-        label: t('mediaAsset.selection.insertAllAssetsAsNodes'),
-        icon: 'icon-[comfy--node]',
-        onSelect: () => emit('bulk-add-to-workflow', selectedAssets)
-      })
-    }
-
-    if (allSelectedShowWorkflowActions.value) {
-      items.push({
-        key: 'bulk-open-workflow',
-        label: t('mediaAsset.selection.openWorkflowAll'),
-        icon: 'icon-[comfy--workflow]',
-        onSelect: () => emit('bulk-open-workflow', selectedAssets)
-      })
-      items.push({
-        key: 'bulk-export-workflow',
-        label: t('mediaAsset.selection.exportWorkflowAll'),
-        icon: 'icon-[lucide--file-output]',
-        onSelect: () => emit('bulk-export-workflow', selectedAssets)
-      })
-    }
-
-    items.push({
-      key: 'bulk-download',
-      label: t('mediaAsset.selection.downloadSelectedAll'),
-      icon: 'icon-[lucide--download]',
-      onSelect: () => emit('bulk-download', selectedAssets)
-    })
-
-    if (shouldShowDeleteButton.value) {
-      items.push({
-        key: 'bulk-delete',
-        label: t('mediaAsset.selection.deleteSelectedAll'),
-        icon: 'icon-[lucide--trash-2]',
-        onSelect: () => emit('bulk-delete', selectedAssets)
-      })
-    }
-
-    return items
-  }
-
-  if (isPreviewableMediaType(fileKind)) {
-    items.push({
-      key: 'inspect',
-      label: t('mediaAsset.actions.inspect'),
-      icon: 'icon-[lucide--zoom-in]',
-      onSelect: () => emit('zoom')
-    })
-  }
-
-  if (showAddToWorkflow.value) {
-    items.push({
-      key: 'add-to-workflow',
-      label: t('mediaAsset.actions.insertAsNodeInWorkflow'),
-      icon: 'icon-[comfy--node]',
-      onSelect: () => actions.addWorkflow(asset)
-    })
-  }
-
-  items.push({
-    key: 'download',
-    label: t('mediaAsset.actions.download'),
-    icon: 'icon-[lucide--download]',
-    onSelect: () => actions.downloadAsset(asset)
-  })
-
-  if (showWorkflowActions.value) {
-    items.push({ kind: 'divider', key: 'workflow-divider' })
-    items.push({
-      key: 'open-workflow',
-      label: t('mediaAsset.actions.openWorkflow'),
-      icon: 'icon-[comfy--workflow]',
-      onSelect: () => actions.openWorkflow(asset)
-    })
-    items.push({
-      key: 'export-workflow',
-      label: t('mediaAsset.actions.exportWorkflow'),
-      icon: 'icon-[lucide--file-output]',
-      onSelect: () => actions.exportWorkflow(asset)
-    })
-  }
-
-  if (showCopyJobId.value) {
-    items.push({ kind: 'divider', key: 'copy-job-id-divider' })
-    items.push({
-      key: 'copy-job-id',
-      label: t('mediaAsset.actions.copyJobId'),
-      icon: 'icon-[lucide--copy]',
-      onSelect: async () => {
-        await actions.copyJobId(asset)
-      }
-    })
-  }
-
-  if (shouldShowDeleteButton.value) {
-    items.push({ kind: 'divider', key: 'delete-divider' })
-    items.push({
-      key: 'delete',
-      label: t('mediaAsset.actions.delete'),
-      icon: 'icon-[lucide--trash-2]',
-      onSelect: async () => {
-        const confirmed = await actions.deleteAssets(asset)
-        if (confirmed) {
-          emit('asset-deleted')
-        }
-      }
-    })
-  }
-
-  return items
-})
-
-async function onItemSelect(item: ContextMenuItem) {
-  if (item.kind === 'divider' || item.disabled) {
-    return
-  }
-
-  closeMenu()
-  await item.onSelect?.()
-}
-</script>

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/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 { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
@@ -403,6 +404,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/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/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/stores/appModeStore.test.ts

@@ -197,14 +197,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 +213,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 +232,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 +242,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 +266,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)

src/stores/appModeStore.ts

@@ -1,5 +1,5 @@
 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'
@@ -25,9 +25,9 @@ export const useAppModeStore = defineStore('appMode', () => {
   const { mode, setMode, isBuilderMode, isSelectMode } = useAppMode()
   const emptyWorkflowDialog = useEmptyWorkflowDialog()
 
-  const selectedInputs = reactive<[NodeId, string][]>([])
-  const selectedOutputs = reactive<NodeId[]>([])
-  const hasOutputs = computed(() => !!selectedOutputs.length)
+  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 +54,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 +65,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 +74,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
@@ -144,10 +130,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,6 +141,7 @@ export const useAppModeStore = defineStore('appMode', () => {
     exitBuilder,
     hasNodes,
     hasOutputs,
+    loadSelections,
     pruneLinearData,
     removeSelectedInput,
     resetSelectedToWorkflow,