add test for scrolling outputs

refactor execution helper to use assets helper for mock jobs

CODEOWNERS

@@ -69,9 +69,6 @@
 /src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts @jtydhr88
 /src/lib/litegraph/src/widgets/PainterWidget.ts   @jtydhr88
 
-# GLSL
-/src/renderer/glsl/                               @jtydhr88 @pythongosssss @christian-byrne
-
 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88
 /src/extensions/core/load3dLazy.ts                @jtydhr88

browser_tests/assets/missing/missing_media_multiple.json

@@ -1,68 +0,0 @@
-{
-  "last_node_id": 12,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 10,
-      "type": "LoadImage",
-      "pos": [50, 50],
-      "size": [315, 314],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["nonexistent_test_image_aaa.png", "image"]
-    },
-    {
-      "id": 11,
-      "type": "LoadImage",
-      "pos": [450, 50],
-      "size": [315, 314],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["nonexistent_test_image_bbb.png", "image"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/missing/missing_media_single.json

@@ -1,42 +0,0 @@
-{
-  "last_node_id": 10,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 10,
-      "type": "LoadImage",
-      "pos": [50, 50],
-      "size": [315, 314],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["nonexistent_test_image_12345.png", "image"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -19,9 +19,7 @@ import { QueuePanel } from '@e2e/fixtures/components/QueuePanel'
 import { SettingDialog } from '@e2e/fixtures/components/SettingDialog'
 import {
   AssetsSidebarTab,
-  ModelLibrarySidebarTab,
   NodeLibrarySidebarTab,
-  NodeLibrarySidebarTabV2,
   WorkflowsSidebarTab
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
@@ -33,7 +31,6 @@ import { CommandHelper } from '@e2e/fixtures/helpers/CommandHelper'
 import { DragDropHelper } from '@e2e/fixtures/helpers/DragDropHelper'
 import { FeatureFlagHelper } from '@e2e/fixtures/helpers/FeatureFlagHelper'
 import { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
-import { ModelLibraryHelper } from '@e2e/fixtures/helpers/ModelLibraryHelper'
 import { NodeOperationsHelper } from '@e2e/fixtures/helpers/NodeOperationsHelper'
 import { PerformanceHelper } from '@e2e/fixtures/helpers/PerformanceHelper'
 import { SettingsHelper } from '@e2e/fixtures/helpers/SettingsHelper'
@@ -58,9 +55,7 @@ class ComfyPropertiesPanel {
 
 class ComfyMenu {
   private _assetsTab: AssetsSidebarTab | null = null
-  private _modelLibraryTab: ModelLibrarySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
-  private _nodeLibraryTabV2: NodeLibrarySidebarTabV2 | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
 
@@ -78,21 +73,11 @@ class ComfyMenu {
     return this.sideToolbar.locator('.side-bar-button')
   }
 
-  get modelLibraryTab() {
-    this._modelLibraryTab ??= new ModelLibrarySidebarTab(this.page)
-    return this._modelLibraryTab
-  }
-
   get nodeLibraryTab() {
     this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
     return this._nodeLibraryTab
   }
 
-  get nodeLibraryTabV2() {
-    this._nodeLibraryTabV2 ??= new NodeLibrarySidebarTabV2(this.page)
-    return this._nodeLibraryTabV2
-  }
-
   get assetsTab() {
     this._assetsTab ??= new AssetsSidebarTab(this.page)
     return this._assetsTab
@@ -214,7 +199,6 @@ export class ComfyPage {
   public readonly queuePanel: QueuePanel
   public readonly perf: PerformanceHelper
   public readonly assets: AssetsHelper
-  public readonly modelLibrary: ModelLibraryHelper
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -262,7 +246,6 @@ export class ComfyPage {
     this.queuePanel = new QueuePanel(page)
     this.perf = new PerformanceHelper(page)
     this.assets = new AssetsHelper(page)
-    this.modelLibrary = new ModelLibraryHelper(page)
   }
 
   get visibleToasts() {

browser_tests/fixtures/components/OutputHistory.ts

@@ -0,0 +1,67 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { TestIds } from '../selectors'
+
+const ids = TestIds.outputHistory
+
+export class OutputHistoryComponent {
+  constructor(private readonly page: Page) {}
+
+  get outputs(): Locator {
+    return this.page.getByTestId(ids.outputs)
+  }
+
+  get welcome(): Locator {
+    return this.page.getByTestId(ids.welcome)
+  }
+
+  get outputInfo(): Locator {
+    return this.page.getByTestId(ids.outputInfo)
+  }
+
+  get activeQueue(): Locator {
+    return this.page.getByTestId(ids.activeQueue)
+  }
+
+  get queueBadge(): Locator {
+    return this.page.getByTestId(ids.queueBadge)
+  }
+
+  get inProgressItems(): Locator {
+    return this.page.getByTestId(ids.inProgressItem)
+  }
+
+  get historyItems(): Locator {
+    return this.page.getByTestId(ids.historyItem)
+  }
+
+  get skeletons(): Locator {
+    return this.page.getByTestId(ids.skeleton)
+  }
+
+  get latentPreviews(): Locator {
+    return this.page.getByTestId(ids.latentPreview)
+  }
+
+  get imageOutputs(): Locator {
+    return this.page.getByTestId(ids.imageOutput)
+  }
+
+  get videoOutputs(): Locator {
+    return this.page.getByTestId(ids.videoOutput)
+  }
+
+  /** The currently selected (checked) in-progress item. */
+  get selectedInProgressItem(): Locator {
+    return this.page.locator(
+      `[data-testid="${ids.inProgressItem}"][data-state="checked"]`
+    )
+  }
+
+  /** The currently selected (checked) history item. */
+  get selectedHistoryItem(): Locator {
+    return this.page.locator(
+      `[data-testid="${ids.historyItem}"][data-state="checked"]`
+    )
+  }
+}

browser_tests/fixtures/components/SidebarTab.ts

@@ -100,59 +100,6 @@ export class NodeLibrarySidebarTab extends SidebarTab {
   }
 }
 
-export class NodeLibrarySidebarTabV2 extends SidebarTab {
-  constructor(public override readonly page: Page) {
-    super(page, 'node-library')
-  }
-
-  get searchInput() {
-    return this.page.getByPlaceholder('Search...')
-  }
-
-  get sidebarContent() {
-    return this.page.locator('.sidebar-content-container')
-  }
-
-  getTab(name: string) {
-    return this.sidebarContent.getByRole('tab', { name, exact: true })
-  }
-
-  get allTab() {
-    return this.getTab('All')
-  }
-
-  get blueprintsTab() {
-    return this.getTab('Blueprints')
-  }
-
-  get sortButton() {
-    return this.sidebarContent.getByRole('button', { name: 'Sort' })
-  }
-
-  getFolder(folderName: string) {
-    return this.sidebarContent
-      .getByRole('treeitem', { name: folderName })
-      .first()
-  }
-
-  getNode(nodeName: string) {
-    return this.sidebarContent.getByRole('treeitem', { name: nodeName }).first()
-  }
-
-  async expandFolder(folderName: string) {
-    const folder = this.getFolder(folderName)
-    const isExpanded = await folder.getAttribute('aria-expanded')
-    if (isExpanded !== 'true') {
-      await folder.click()
-    }
-  }
-
-  override async open() {
-    await super.open()
-    await this.searchInput.waitFor({ state: 'visible' })
-  }
-}
-
 export class WorkflowsSidebarTab extends SidebarTab {
   constructor(public override readonly page: Page) {
     super(page, 'workflows')
@@ -223,59 +170,6 @@ export class WorkflowsSidebarTab extends SidebarTab {
   }
 }
 
-export class ModelLibrarySidebarTab extends SidebarTab {
-  constructor(public override readonly page: Page) {
-    super(page, 'model-library')
-  }
-
-  get searchInput() {
-    return this.page.getByPlaceholder('Search Models...')
-  }
-
-  get modelTree() {
-    return this.page.locator('.model-lib-tree-explorer')
-  }
-
-  get refreshButton() {
-    return this.page.getByRole('button', { name: 'Refresh' })
-  }
-
-  get loadAllFoldersButton() {
-    return this.page.getByRole('button', { name: 'Load All Folders' })
-  }
-
-  get folderNodes() {
-    return this.modelTree.locator('.p-tree-node:not(.p-tree-node-leaf)')
-  }
-
-  get leafNodes() {
-    return this.modelTree.locator('.p-tree-node-leaf')
-  }
-
-  get modelPreview() {
-    return this.page.locator('.model-lib-model-preview')
-  }
-
-  override async open() {
-    await super.open()
-    await this.modelTree.waitFor({ state: 'visible' })
-  }
-
-  getFolderByLabel(label: string) {
-    return this.modelTree
-      .locator('.p-tree-node:not(.p-tree-node-leaf)')
-      .filter({ hasText: label })
-      .first()
-  }
-
-  getLeafByLabel(label: string) {
-    return this.modelTree
-      .locator('.p-tree-node-leaf')
-      .filter({ hasText: label })
-      .first()
-  }
-}
-
 export class AssetsSidebarTab extends SidebarTab {
   constructor(public override readonly page: Page) {
     super(page, 'assets')

browser_tests/fixtures/components/Topbar.ts

@@ -50,30 +50,15 @@ export class Topbar {
     return classes ? !classes.includes('invisible') : false
   }
 
-  get newWorkflowButton(): Locator {
-    return this.page.locator('.new-blank-workflow-button')
-  }
-
   getWorkflowTab(tabName: string): Locator {
     return this.page
       .locator(`.workflow-tabs .workflow-label:has-text("${tabName}")`)
       .locator('..')
   }
 
-  getTab(index: number): Locator {
-    return this.page.locator('.workflow-tabs .p-togglebutton').nth(index)
-  }
-
-  getActiveTab(): Locator {
-    return this.page.locator(
-      '.workflow-tabs .p-togglebutton.p-togglebutton-checked'
-    )
-  }
-
   async closeWorkflowTab(tabName: string) {
     const tab = this.getWorkflowTab(tabName)
-    await tab.hover()
-    await tab.locator('.close-button').click({ force: true })
+    await tab.getByRole('button', { name: 'Close' }).click({ force: true })
   }
 
   getSaveDialog(): Locator {

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -3,6 +3,7 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '../ComfyPage'
 import { TestIds } from '../selectors'
 
+import { OutputHistoryComponent } from '../components/OutputHistory'
 import { BuilderFooterHelper } from './BuilderFooterHelper'
 import { BuilderSaveAsHelper } from './BuilderSaveAsHelper'
 import { BuilderSelectHelper } from './BuilderSelectHelper'
@@ -13,12 +14,14 @@ export class AppModeHelper {
   readonly footer: BuilderFooterHelper
   readonly saveAs: BuilderSaveAsHelper
   readonly select: BuilderSelectHelper
+  readonly outputHistory: OutputHistoryComponent
 
   constructor(private readonly comfyPage: ComfyPage) {
     this.steps = new BuilderStepsHelper(comfyPage)
     this.footer = new BuilderFooterHelper(comfyPage)
     this.saveAs = new BuilderSaveAsHelper(comfyPage)
     this.select = new BuilderSelectHelper(comfyPage)
+    this.outputHistory = new OutputHistoryComponent(comfyPage.page)
   }
 
   private get page(): Page {
@@ -78,6 +81,10 @@ export class AppModeHelper {
     await this.toggleAppMode()
   }
 
+  get cancelRunButton(): Locator {
+    return this.page.getByTestId(TestIds.outputHistory.cancelRun)
+  }
+
   /** The linear-mode widget list container (visible in app mode). */
   get linearWidgets(): Locator {
     return this.page.locator('[data-testid="linear-widgets"]')

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -1,9 +1,36 @@
 import type { Locator, Page } from '@playwright/test'
 
 import type { ComfyPage } from '../ComfyPage'
-import type { NodeReference } from '../utils/litegraphUtils'
 import { TestIds } from '../selectors'
 
+/**
+ * Drag an element from one index to another within a list of locators.
+ * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
+ *
+ * DraggableList toggles position when the dragged item's center crosses
+ * past an idle item's center. To reliably land at the target position,
+ * we overshoot slightly past the target's far edge.
+ */
+async function dragByIndex(items: Locator, fromIndex: number, toIndex: number) {
+  const fromBox = await items.nth(fromIndex).boundingBox()
+  const toBox = await items.nth(toIndex).boundingBox()
+  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
+
+  const draggingDown = toIndex > fromIndex
+  const targetY = draggingDown
+    ? toBox.y + toBox.height * 0.9
+    : toBox.y + toBox.height * 0.1
+
+  const page = items.page()
+  await page.mouse.move(
+    fromBox.x + fromBox.width / 2,
+    fromBox.y + fromBox.height / 2
+  )
+  await page.mouse.down()
+  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
+  await page.mouse.up()
+}
+
 export class BuilderSelectHelper {
   constructor(private readonly comfyPage: ComfyPage) {}
 
@@ -99,41 +126,69 @@ export class BuilderSelectHelper {
     await this.comfyPage.nextFrame()
   }
 
-  /** Center on a node and click its first widget to select it as input. */
-  async selectInputWidget(node: NodeReference) {
+  /**
+   * Click a widget on the canvas to select it as a builder input.
+   * @param nodeTitle The displayed title of the node.
+   * @param widgetName The widget name to click.
+   */
+  async selectInputWidget(nodeTitle: string, widgetName: string) {
     await this.comfyPage.canvasOps.setScale(1)
-    await node.centerOnNode()
-
-    const widgetRef = await node.getWidget(0)
-    const widgetPos = await widgetRef.getPosition()
-    const titleHeight = await this.page.evaluate(
-      () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-    )
-    await this.page.mouse.click(widgetPos.x, widgetPos.y + titleHeight)
+    const nodeRef = (
+      await this.comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+    )[0]
+    if (!nodeRef) throw new Error(`Node ${nodeTitle} not found`)
+    await nodeRef.centerOnNode()
+    const widgetLocator = this.comfyPage.vueNodes
+      .getNodeLocator(String(nodeRef.id))
+      .getByLabel(widgetName, { exact: true })
+    await widgetLocator.click({ force: true })
     await this.comfyPage.nextFrame()
   }
 
-  /** Click the first SaveImage/PreviewImage node on the canvas. */
-  async selectOutputNode() {
-    const saveImageNodeId = await this.page.evaluate(() => {
-      const node = window.app!.rootGraph.nodes.find(
-        (n: { type?: string }) =>
-          n.type === 'SaveImage' || n.type === 'PreviewImage'
-      )
-      return node ? String(node.id) : null
-    })
-    if (!saveImageNodeId)
-      throw new Error('SaveImage/PreviewImage node not found')
-    const saveImageRef =
-      await this.comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-    await saveImageRef.centerOnNode()
+  /** All IoItem title locators in the inputs step sidebar. */
+  get inputItemTitles(): Locator {
+    return this.page.getByTestId(TestIds.builder.ioItemTitle)
+  }
 
-    const canvasBox = await this.page.locator('#graph-canvas').boundingBox()
-    if (!canvasBox) throw new Error('Canvas not found')
-    await this.page.mouse.click(
-      canvasBox.x + canvasBox.width / 2,
-      canvasBox.y + canvasBox.height / 2
+  /** All widget label locators in the preview/arrange sidebar. */
+  get previewWidgetLabels(): Locator {
+    return this.page.getByTestId(TestIds.builder.widgetLabel)
+  }
+
+  /**
+   * Drag an IoItem from one index to another in the inputs step.
+   * Items are identified by their 0-based position among visible IoItems.
+   */
+  async dragInputItem(fromIndex: number, toIndex: number) {
+    const items = this.page.getByTestId(TestIds.builder.ioItem)
+    await dragByIndex(items, fromIndex, toIndex)
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Drag a widget item from one index to another in the preview/arrange step.
+   */
+  async dragPreviewItem(fromIndex: number, toIndex: number) {
+    const items = this.page.getByTestId(TestIds.builder.widgetItem)
+    await dragByIndex(items, fromIndex, toIndex)
+    await this.comfyPage.nextFrame()
+  }
+
+  /**
+   * Click an output node on the canvas to select it as a builder output.
+   * @param nodeTitle The displayed title of the output node.
+   */
+  async selectOutputNode(nodeTitle: string) {
+    await this.comfyPage.canvasOps.setScale(1)
+    const nodeRef = (
+      await this.comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+    )[0]
+    if (!nodeRef) throw new Error(`Node ${nodeTitle} not found`)
+    await nodeRef.centerOnNode()
+    const nodeLocator = this.comfyPage.vueNodes.getNodeLocator(
+      String(nodeRef.id)
     )
+    await nodeLocator.click({ force: true })
     await this.comfyPage.nextFrame()
   }
 }

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -0,0 +1,207 @@
+import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
+import type { ComfyPage } from '../ComfyPage'
+import type { MockWebSocket } from '../ws'
+import { createMockJob } from './AssetsHelper'
+
+/**
+ * Helper for simulating prompt execution in e2e tests.
+ */
+export class ExecutionHelper {
+  private jobCounter = 0
+  private readonly completedJobs: RawJobListItem[] = []
+  private readonly page: ComfyPage['page']
+  private readonly assets: ComfyPage['assets']
+
+  constructor(
+    comfyPage: ComfyPage,
+    private readonly mock: MockWebSocket
+  ) {
+    this.page = comfyPage.page
+    this.assets = comfyPage.assets
+  }
+
+  private get ws() {
+    return this.mock.ws
+  }
+
+  /**
+   * Intercept POST /api/prompt, execute Comfy.QueuePrompt, and return
+   * the synthetic job ID.
+   *
+   * The app receives a valid PromptResponse so storeJob() fires
+   * and registers the job against the active workflow path.
+   */
+  async run(): Promise<string> {
+    const jobId = `test-job-${++this.jobCounter}`
+
+    let fulfilled!: () => void
+    const prompted = new Promise<void>((r) => {
+      fulfilled = r
+    })
+
+    await this.page.route(
+      '**/api/prompt',
+      async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            prompt_id: jobId,
+            node_errors: {}
+          })
+        })
+        fulfilled()
+      },
+      { times: 1 }
+    )
+
+    await this.page.evaluate(() => {
+      window.app!.extensionManager.command.execute('Comfy.QueuePrompt')
+    })
+    await prompted
+
+    // Prevent real server events from interfering with test-controlled execution
+    this.mock.stopServerForwarding()
+
+    return jobId
+  }
+
+  /**
+   * Send a binary `b_preview_with_metadata` WS message (type 4).
+   * Encodes the metadata and a tiny 1x1 PNG so the app creates a blob URL.
+   */
+  latentPreview(jobId: string, nodeId: string): void {
+    const metadata = JSON.stringify({
+      node_id: nodeId,
+      display_node_id: nodeId,
+      parent_node_id: nodeId,
+      real_node_id: nodeId,
+      prompt_id: jobId,
+      image_type: 'image/png'
+    })
+    const metadataBytes = new TextEncoder().encode(metadata)
+
+    // 1x1 red PNG
+    const png = Buffer.from(
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwADhQGAWjR9awAAAABJRU5ErkJggg==',
+      'base64'
+    )
+
+    // Binary format: [type:uint32][metadataLength:uint32][metadata][imageData]
+    const buf = new ArrayBuffer(8 + metadataBytes.length + png.length)
+    const view = new DataView(buf)
+    view.setUint32(0, 4) // type 4 = PREVIEW_IMAGE_WITH_METADATA
+    view.setUint32(4, metadataBytes.length)
+    new Uint8Array(buf, 8, metadataBytes.length).set(metadataBytes)
+    new Uint8Array(buf, 8 + metadataBytes.length).set(png)
+
+    this.ws.send(Buffer.from(buf))
+  }
+
+  /** Send `execution_start` WS event. */
+  executionStart(jobId: string): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'execution_start',
+        data: { prompt_id: jobId, timestamp: Date.now() }
+      })
+    )
+  }
+
+  /** Send `executed` WS event with node output. */
+  executed(
+    jobId: string,
+    nodeId: string,
+    output: Record<string, unknown>
+  ): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'executed',
+        data: {
+          prompt_id: jobId,
+          node: nodeId,
+          display_node: nodeId,
+          output
+        }
+      })
+    )
+  }
+
+  /** Send `execution_success` WS event. */
+  executionSuccess(jobId: string): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'execution_success',
+        data: { prompt_id: jobId, timestamp: Date.now() }
+      })
+    )
+  }
+
+  /** Send `execution_error` WS event. */
+  executionError(jobId: string, nodeId: string, message: string): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'execution_error',
+        data: {
+          prompt_id: jobId,
+          timestamp: Date.now(),
+          node_id: nodeId,
+          node_type: 'Unknown',
+          exception_message: message,
+          exception_type: 'RuntimeError',
+          traceback: []
+        }
+      })
+    )
+  }
+
+  /** Send `progress` WS event. */
+  progress(jobId: string, nodeId: string, value: number, max: number): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'progress',
+        data: { prompt_id: jobId, node: nodeId, value, max }
+      })
+    )
+  }
+
+  /**
+   * Complete a job by adding it to mock history, sending execution_success,
+   * and triggering a history refresh via a status event.
+   *
+   * Requires an {@link AssetsHelper} to be passed in the constructor.
+   */
+  async completeWithHistory(
+    jobId: string,
+    nodeId: string,
+    filename: string
+  ): Promise<void> {
+    this.completedJobs.push(
+      createMockJob({
+        id: jobId,
+        preview_output: {
+          filename,
+          subfolder: '',
+          type: 'output',
+          nodeId,
+          mediaType: 'images'
+        }
+      })
+    )
+
+    await this.assets.mockOutputHistory(this.completedJobs)
+    this.executionSuccess(jobId)
+    // Trigger queue/history refresh
+    this.status(0)
+  }
+
+  /** Send `status` WS event to update queue count. */
+  status(queueRemaining: number): void {
+    this.ws.send(
+      JSON.stringify({
+        type: 'status',
+        data: { status: { exec_info: { queue_remaining: queueRemaining } } }
+      })
+    )
+  }
+}

browser_tests/fixtures/helpers/ModelLibraryHelper.ts

@@ -1,134 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-
-import type {
-  ModelFile,
-  ModelFolderInfo
-} from '../../../src/platform/assets/schemas/assetSchema'
-
-const modelFoldersRoutePattern = /\/api\/experiment\/models$/
-const modelFilesRoutePattern = /\/api\/experiment\/models\/([^?]+)/
-const viewMetadataRoutePattern = /\/api\/view_metadata\/([^?]+)/
-
-export interface MockModelMetadata {
-  'modelspec.title'?: string
-  'modelspec.author'?: string
-  'modelspec.architecture'?: string
-  'modelspec.description'?: string
-  'modelspec.resolution'?: string
-  'modelspec.tags'?: string
-}
-
-export function createMockModelFolders(names: string[]): ModelFolderInfo[] {
-  return names.map((name) => ({ name, folders: [] }))
-}
-
-export function createMockModelFiles(
-  filenames: string[],
-  pathIndex = 0
-): ModelFile[] {
-  return filenames.map((name) => ({ name, pathIndex }))
-}
-
-export class ModelLibraryHelper {
-  private foldersRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private filesRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private metadataRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private folders: ModelFolderInfo[] = []
-  private filesByFolder: Record<string, ModelFile[]> = {}
-  private metadataByModel: Record<string, MockModelMetadata> = {}
-
-  constructor(private readonly page: Page) {}
-
-  async mockModelFolders(folders: ModelFolderInfo[]): Promise<void> {
-    this.folders = [...folders]
-
-    if (this.foldersRouteHandler) return
-
-    this.foldersRouteHandler = async (route: Route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(this.folders)
-      })
-    }
-
-    await this.page.route(modelFoldersRoutePattern, this.foldersRouteHandler)
-  }
-
-  async mockModelFiles(folder: string, files: ModelFile[]): Promise<void> {
-    this.filesByFolder[folder] = [...files]
-
-    if (this.filesRouteHandler) return
-
-    this.filesRouteHandler = async (route: Route) => {
-      const match = route.request().url().match(modelFilesRoutePattern)
-      const folderName = match?.[1] ? decodeURIComponent(match[1]) : undefined
-      const files = folderName ? (this.filesByFolder[folderName] ?? []) : []
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(files)
-      })
-    }
-
-    await this.page.route(modelFilesRoutePattern, this.filesRouteHandler)
-  }
-
-  async mockMetadata(
-    entries: Record<string, MockModelMetadata>
-  ): Promise<void> {
-    Object.assign(this.metadataByModel, entries)
-
-    if (this.metadataRouteHandler) return
-
-    this.metadataRouteHandler = async (route: Route) => {
-      const url = new URL(route.request().url())
-      const filename = url.searchParams.get('filename') ?? ''
-      const metadata = this.metadataByModel[filename]
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(metadata ?? {})
-      })
-    }
-
-    await this.page.route(viewMetadataRoutePattern, this.metadataRouteHandler)
-  }
-
-  async mockFoldersWithFiles(config: Record<string, string[]>): Promise<void> {
-    const folderNames = Object.keys(config)
-    await this.mockModelFolders(createMockModelFolders(folderNames))
-    for (const [folder, files] of Object.entries(config)) {
-      await this.mockModelFiles(folder, createMockModelFiles(files))
-    }
-  }
-
-  async clearMocks(): Promise<void> {
-    this.folders = []
-    this.filesByFolder = {}
-    this.metadataByModel = {}
-
-    if (this.foldersRouteHandler) {
-      await this.page.unroute(
-        modelFoldersRoutePattern,
-        this.foldersRouteHandler
-      )
-      this.foldersRouteHandler = null
-    }
-
-    if (this.filesRouteHandler) {
-      await this.page.unroute(modelFilesRoutePattern, this.filesRouteHandler)
-      this.filesRouteHandler = null
-    }
-
-    if (this.metadataRouteHandler) {
-      await this.page.unroute(
-        viewMetadataRoutePattern,
-        this.metadataRouteHandler
-      )
-      this.metadataRouteHandler = null
-    }
-  }
-}

browser_tests/fixtures/selectors.ts

@@ -44,15 +44,7 @@ export const TestIds = {
     about: 'about-panel',
     whatsNewSection: 'whats-new-section',
     missingNodePacksGroup: 'error-group-missing-node',
-    missingModelsGroup: 'error-group-missing-model',
-    missingMediaGroup: 'error-group-missing-media',
-    missingMediaRow: 'missing-media-row',
-    missingMediaUploadDropzone: 'missing-media-upload-dropzone',
-    missingMediaLibrarySelect: 'missing-media-library-select',
-    missingMediaStatusCard: 'missing-media-status-card',
-    missingMediaConfirmButton: 'missing-media-confirm-button',
-    missingMediaCancelButton: 'missing-media-cancel-button',
-    missingMediaLocateButton: 'missing-media-locate-button'
+    missingModelsGroup: 'error-group-missing-model'
   },
   keybindings: {
     presetMenu: 'keybinding-preset-menu'
@@ -69,21 +61,8 @@ export const TestIds = {
   propertiesPanel: {
     root: 'properties-panel'
   },
-  subgraphEditor: {
-    toggle: 'subgraph-editor-toggle',
-    shownSection: 'subgraph-editor-shown-section',
-    hiddenSection: 'subgraph-editor-hidden-section',
-    widgetToggle: 'subgraph-widget-toggle',
-    widgetLabel: 'subgraph-widget-label',
-    iconLink: 'icon-link',
-    iconEye: 'icon-eye',
-    widgetActionsMenuButton: 'widget-actions-menu-button'
-  },
   node: {
-    titleInput: 'node-title-input',
-    pinIndicator: 'node-pin-indicator',
-    innerWrapper: 'node-inner-wrapper',
-    mainImage: 'main-image'
+    titleInput: 'node-title-input'
   },
   selectionToolbox: {
     colorPickerButton: 'color-picker-button',
@@ -91,9 +70,6 @@ export const TestIds = {
     colorBlue: 'blue',
     colorRed: 'red'
   },
-  menu: {
-    moreMenuContent: 'more-menu-content'
-  },
   widgets: {
     container: 'node-widgets',
     widget: 'node-widget',
@@ -111,7 +87,23 @@ export const TestIds = {
     ioItem: 'builder-io-item',
     ioItemTitle: 'builder-io-item-title',
     widgetActionsMenu: 'widget-actions-menu',
-    opensAs: 'builder-opens-as'
+    opensAs: 'builder-opens-as',
+    widgetItem: 'builder-widget-item',
+    widgetLabel: 'builder-widget-label'
+  },
+  outputHistory: {
+    outputs: 'linear-outputs',
+    welcome: 'linear-welcome',
+    outputInfo: 'linear-output-info',
+    activeQueue: 'linear-job',
+    queueBadge: 'linear-job-badge',
+    inProgressItem: 'linear-in-progress-item',
+    historyItem: 'linear-history-item',
+    skeleton: 'linear-skeleton',
+    latentPreview: 'linear-latent-preview',
+    imageOutput: 'linear-image-output',
+    videoOutput: 'linear-video-output',
+    cancelRun: 'linear-cancel-run'
   },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
@@ -149,13 +141,12 @@ export type TestIdValue =
   | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
   | (typeof TestIds.builder)[keyof typeof TestIds.builder]
+  | (typeof TestIds.outputHistory)[keyof typeof TestIds.outputHistory]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
       (typeof TestIds.templates)[keyof typeof TestIds.templates],
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
-  | (typeof TestIds.menu)[keyof typeof TestIds.menu]
-  | (typeof TestIds.subgraphEditor)[keyof typeof TestIds.subgraphEditor]
   | (typeof TestIds.queue)[keyof typeof TestIds.queue]
   | (typeof TestIds.errors)[keyof typeof TestIds.errors]

browser_tests/fixtures/utils/slotBoundsUtil.ts

@@ -1,98 +0,0 @@
-import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
-
-export interface SlotMeasurement {
-  key: string
-  offsetX: number
-  offsetY: number
-}
-
-export interface NodeSlotData {
-  nodeId: string
-  nodeW: number
-  nodeH: number
-  slots: SlotMeasurement[]
-}
-
-/**
- * Collect slot center offsets relative to the parent node element.
- * Returns `null` when the node element is not found.
- */
-export async function measureNodeSlotOffsets(
-  page: Page,
-  nodeId: string
-): Promise<NodeSlotData | null> {
-  return page.evaluate((id) => {
-    const nodeEl = document.querySelector(`[data-node-id="${id}"]`)
-    if (!nodeEl || !(nodeEl instanceof HTMLElement)) return null
-
-    const nodeRect = nodeEl.getBoundingClientRect()
-    const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-    const slots: SlotMeasurement[] = []
-
-    for (const slotEl of slotEls) {
-      const slotRect = slotEl.getBoundingClientRect()
-      slots.push({
-        key: (slotEl as HTMLElement).dataset.slotKey ?? 'unknown',
-        offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
-        offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
-      })
-    }
-
-    return {
-      nodeId: id,
-      nodeW: nodeRect.width,
-      nodeH: nodeRect.height,
-      slots
-    }
-  }, nodeId)
-}
-
-/**
- * Assert that every slot falls within the node dimensions (± `margin` px).
- */
-export function expectSlotsWithinBounds(
-  data: NodeSlotData,
-  margin: number,
-  label?: string
-) {
-  const prefix = label ? `${label}: ` : ''
-
-  for (const slot of data.slots) {
-    expect(
-      slot.offsetX,
-      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
-    ).toBeGreaterThanOrEqual(-margin)
-    expect(
-      slot.offsetX,
-      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
-    ).toBeLessThanOrEqual(data.nodeW + margin)
-
-    expect(
-      slot.offsetY,
-      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
-    ).toBeGreaterThanOrEqual(-margin)
-    expect(
-      slot.offsetY,
-      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
-    ).toBeLessThanOrEqual(data.nodeH + margin)
-  }
-}
-
-/**
- * Wait for slots, measure, and assert within bounds — single-node convenience.
- */
-export async function assertNodeSlotsWithinBounds(
-  page: Page,
-  nodeId: string,
-  margin: number = 20
-) {
-  await page
-    .locator(`[data-node-id="${nodeId}"] [data-slot-key]`)
-    .first()
-    .waitFor()
-
-  const data = await measureNodeSlotOffsets(page, nodeId)
-  expect(data, `Node ${nodeId} not found in DOM`).not.toBeNull()
-  expectSlotsWithinBounds(data!, margin, `Node ${nodeId}`)
-}

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -1,7 +1,5 @@
 import type { Locator } from '@playwright/test'
 
-import { TestIds } from '../selectors'
-
 /** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
   constructor(private readonly locator: Locator) {}
@@ -22,10 +20,6 @@ export class VueNodeFixture {
     return this.locator.locator('[data-testid^="node-body-"]')
   }
 
-  get pinIndicator(): Locator {
-    return this.locator.getByTestId(TestIds.node.pinIndicator)
-  }
-
   get collapseButton(): Locator {
     return this.locator.locator('[data-testid="node-collapse-button"]')
   }

browser_tests/fixtures/ws.ts

@@ -1,53 +1,45 @@
 import { test as base } from '@playwright/test'
+import type { WebSocketRoute } from '@playwright/test'
+
+export interface MockWebSocket {
+  /** The intercepted WebSocket route. */
+  ws: WebSocketRoute
+  /** Stop forwarding real server messages to the page. */
+  stopServerForwarding(): void
+}
 
 export const webSocketFixture = base.extend<{
-  ws: { trigger(data: unknown, url?: string): Promise<void> }
+  getWebSocket: () => Promise<MockWebSocket>
 }>({
-  ws: [
-    async ({ page }, use) => {
-      // Each time a page loads, to catch navigations
-      page.on('load', async () => {
-        await page.evaluate(function () {
-          // Create a wrapper for WebSocket that stores them globally
-          // so we can look it up to trigger messages
-          const store: Record<string, WebSocket> = (window.__ws__ = {})
-          window.WebSocket = class extends window.WebSocket {
-            constructor(
-              ...rest: ConstructorParameters<typeof window.WebSocket>
-            ) {
-              super(...rest)
-              store[this.url] = this
-            }
-          }
+  getWebSocket: [
+    async ({ context }, use) => {
+      let latest: MockWebSocket | undefined
+      let resolve: ((mock: MockWebSocket) => void) | undefined
+
+      await context.routeWebSocket(/\/ws/, (ws) => {
+        let forwarding = true
+        const server = ws.connectToServer()
+        server.onMessage((message) => {
+          if (forwarding) ws.send(message)
         })
+
+        const mock: MockWebSocket = {
+          ws,
+          stopServerForwarding() {
+            forwarding = false
+          }
+        }
+        latest = mock
+        resolve?.(mock)
       })
 
-      await use({
-        async trigger(data, url) {
-          // Trigger a websocket event on the page
-          await page.evaluate(
-            function ([data, url]) {
-              if (!url) {
-                // If no URL specified, use page URL
-                const u = new URL(window.location.href)
-                u.hash = ''
-                u.protocol = 'ws:'
-                u.pathname = '/'
-                url = u.toString() + 'ws'
-              }
-              const ws: WebSocket = window.__ws__![url]
-              ws.dispatchEvent(
-                new MessageEvent('message', {
-                  data
-                })
-              )
-            },
-            [JSON.stringify(data), url]
-          )
-        }
+      await use(() => {
+        if (latest) return Promise.resolve(latest)
+        return new Promise<MockWebSocket>((r) => {
+          resolve = r
+        })
       })
     },
-    // We need this to run automatically as the first thing so it adds handlers as soon as the page loads
     { auto: true }
   ]
 })

browser_tests/helpers/builderTestUtils.ts

@@ -1,11 +1,18 @@
 import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+import { comfyExpect } from '../fixtures/ComfyPage'
 import { fitToViewInstant } from './fitToView'
 import { getPromotedWidgetNames } from './promotedWidgets'
 
+interface BuilderSetupResult {
+  inputNodeTitle: string
+  widgetNames: string[]
+}
+
 /**
  * Enter builder on the default workflow and select I/O.
  *
@@ -13,41 +20,48 @@ import { getPromotedWidgetNames } from './promotedWidgets'
  * to subgraph), then enters builder mode and selects inputs + outputs.
  *
  * @param comfyPage - The page fixture.
- * @param getInputNode - Returns the node to click for input selection.
- *   Receives the KSampler node ref and can transform the graph before
- *   returning the target node. Defaults to using KSampler directly.
- * @returns The node used for input selection.
+ * @param prepareGraph - Optional callback to transform the graph before
+ *   entering builder. Receives the KSampler node ref and returns the
+ *   input node title and widget names to select.
+ *   Defaults to KSampler with its first widget.
+ *   Mutually exclusive with widgetNames.
+ * @param widgetNames - Widget names to select from the KSampler node.
+ *   Only used when prepareGraph is not provided.
+ *   Mutually exclusive with prepareGraph.
  */
 export async function setupBuilder(
   comfyPage: ComfyPage,
-  getInputNode?: (ksampler: NodeReference) => Promise<NodeReference>
-): Promise<NodeReference> {
+  prepareGraph?: (ksampler: NodeReference) => Promise<BuilderSetupResult>,
+  widgetNames?: string[]
+): Promise<void> {
   const { appMode } = comfyPage
   await comfyPage.workflow.loadWorkflow('default')
 
   const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-  const inputNode = getInputNode ? await getInputNode(ksampler) : ksampler
+
+  const { inputNodeTitle, widgetNames: inputWidgets } = prepareGraph
+    ? await prepareGraph(ksampler)
+    : { inputNodeTitle: 'KSampler', widgetNames: widgetNames ?? ['seed'] }
 
   await fitToViewInstant(comfyPage)
   await appMode.enterBuilder()
   await appMode.steps.goToInputs()
-  await appMode.select.selectInputWidget(inputNode)
+
+  for (const name of inputWidgets) {
+    await appMode.select.selectInputWidget(inputNodeTitle, name)
+  }
 
   await appMode.steps.goToOutputs()
-  await appMode.select.selectOutputNode()
-
-  return inputNode
+  await appMode.select.selectOutputNode('Save Image')
 }
 
 /**
  * Convert the KSampler to a subgraph, then enter builder with I/O selected.
- *
- * Returns the subgraph node reference for further interaction.
  */
 export async function setupSubgraphBuilder(
   comfyPage: ComfyPage
-): Promise<NodeReference> {
-  return setupBuilder(comfyPage, async (ksampler) => {
+): Promise<void> {
+  await setupBuilder(comfyPage, async (ksampler) => {
     await ksampler.click('title')
     const subgraphNode = await ksampler.convertToSubgraph()
     await comfyPage.nextFrame()
@@ -58,10 +72,52 @@ export async function setupSubgraphBuilder(
     )
     expect(promotedNames).toContain('seed')
 
-    return subgraphNode
+    return {
+      inputNodeTitle: 'New Subgraph',
+      widgetNames: ['seed']
+    }
   })
 }
 
+/**
+ * Open the save-as dialog, fill name + view type, click save,
+ * and wait for the success dialog.
+ */
+export async function builderSaveAs(
+  appMode: AppModeHelper,
+  workflowName: string,
+  viewType: 'App' | 'Node graph' = 'App'
+) {
+  await appMode.footer.saveAsButton.click()
+  await comfyExpect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
+  await appMode.saveAs.fillAndSave(workflowName, viewType)
+  await comfyExpect(appMode.saveAs.successMessage).toBeVisible({
+    timeout: 5000
+  })
+}
+
+/**
+ * Load a different workflow, then reopen the named one from the sidebar.
+ * Caller must ensure the page is in graph mode (not builder or app mode)
+ * before calling.
+ */
+export async function openWorkflowFromSidebar(
+  comfyPage: ComfyPage,
+  name: string
+) {
+  await comfyPage.workflow.loadWorkflow('default')
+  await comfyPage.nextFrame()
+  const { workflowsTab } = comfyPage.menu
+  await workflowsTab.open()
+  await workflowsTab.getPersistedItem(name).dblclick()
+  await comfyPage.nextFrame()
+
+  await comfyExpect(async () => {
+    const path = await comfyPage.workflow.getActiveWorkflowPath()
+    expect(path).toContain(name)
+  }).toPass({ timeout: 5000 })
+}
+
 /** Save the workflow, reopen it, and enter app mode. */
 export async function saveAndReopenInAppMode(
   comfyPage: ComfyPage,

browser_tests/tests/actionbar.spec.ts

@@ -1,7 +1,6 @@
 import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'
 
-import type { StatusWsMessage } from '../../src/schemas/apiSchema'
 import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import { webSocketFixture } from '@e2e/fixtures/ws'
 import type { WorkspaceStore } from '../types/globals'
@@ -18,8 +17,10 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
    */
   test('Does not auto-queue multiple changes at a time', async ({
     comfyPage,
-    ws
+    getWebSocket
   }) => {
+    const { ws } = await getWebSocket()
+
     // Enable change auto-queue mode
     const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
     expect(await queueOpts.getMode()).toBe('disabled')
@@ -62,17 +63,19 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
     }
 
     // Trigger a status websocket message
-    const triggerStatus = async (queueSize: number) => {
-      await ws.trigger({
-        type: 'status',
-        data: {
-          status: {
-            exec_info: {
-              queue_remaining: queueSize
+    const triggerStatus = (queueSize: number) => {
+      ws.send(
+        JSON.stringify({
+          type: 'status',
+          data: {
+            status: {
+              exec_info: {
+                queue_remaining: queueSize
+              }
             }
           }
-        }
-      } as StatusWsMessage)
+        })
+      )
     }
 
     // Extract the width from the queue response
@@ -104,8 +107,8 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
     ).toBe(1)
 
     // Trigger a status update so auto-queue re-runs
-    await triggerStatus(1)
-    await triggerStatus(0)
+    triggerStatus(1)
+    triggerStatus(0)
 
     // Ensure the queued width is the last queued value
     expect(

browser_tests/tests/builderReorder.spec.ts

@@ -0,0 +1,163 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
+import {
+  builderSaveAs,
+  openWorkflowFromSidebar,
+  setupBuilder
+} from '../helpers/builderTestUtils'
+
+const WIDGETS = ['seed', 'steps', 'cfg']
+
+/** Save as app, close it by loading default, reopen from sidebar, enter app mode. */
+async function saveCloseAndReopenAsApp(
+  comfyPage: ComfyPage,
+  appMode: AppModeHelper,
+  workflowName: string
+) {
+  await appMode.steps.goToPreview()
+  await builderSaveAs(appMode, workflowName)
+  await appMode.saveAs.closeButton.click()
+  await comfyPage.nextFrame()
+
+  await appMode.footer.exitBuilder()
+  await openWorkflowFromSidebar(comfyPage, workflowName)
+  await appMode.toggleAppMode()
+}
+
+test.describe('Builder input reordering', { 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')
+    await comfyPage.settings.setSetting(
+      'Comfy.AppBuilder.VueNodeSwitchDismissed',
+      true
+    )
+  })
+
+  test('Drag first input to last position', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToInputs()
+    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+
+    await appMode.select.dragInputItem(0, 2)
+    await expect(appMode.select.inputItemTitles).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+
+    await appMode.steps.goToPreview()
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+  })
+
+  test('Drag last input to first position', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToInputs()
+    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+
+    await appMode.select.dragInputItem(2, 0)
+    await expect(appMode.select.inputItemTitles).toHaveText([
+      'cfg',
+      'seed',
+      'steps'
+    ])
+
+    await appMode.steps.goToPreview()
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'cfg',
+      'seed',
+      'steps'
+    ])
+  })
+
+  test('Drag input to middle position', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToInputs()
+    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+
+    await appMode.select.dragInputItem(0, 1)
+    await expect(appMode.select.inputItemTitles).toHaveText([
+      'steps',
+      'seed',
+      'cfg'
+    ])
+
+    await appMode.steps.goToPreview()
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'seed',
+      'cfg'
+    ])
+  })
+
+  test('Reorder in preview step reflects in app mode after save', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToPreview()
+    await expect(appMode.select.previewWidgetLabels).toHaveText(WIDGETS)
+
+    await appMode.select.dragPreviewItem(0, 2)
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+
+    const workflowName = `${Date.now()} reorder-preview`
+    await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)
+
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+  })
+
+  test('Reorder inputs persists after save and reload', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await setupBuilder(comfyPage, undefined, WIDGETS)
+
+    await appMode.steps.goToInputs()
+    await appMode.select.dragInputItem(0, 2)
+    await expect(appMode.select.inputItemTitles).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+
+    const workflowName = `${Date.now()} reorder-persist`
+    await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)
+
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.select.previewWidgetLabels).toHaveText([
+      'steps',
+      'cfg',
+      'seed'
+    ])
+  })
+})

browser_tests/tests/builderSaveFlow.spec.ts

@@ -2,45 +2,14 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
-import { setupBuilder } from '../helpers/builderTestUtils'
+import {
+  builderSaveAs,
+  openWorkflowFromSidebar,
+  setupBuilder
+} from '../helpers/builderTestUtils'
 import { fitToViewInstant } from '../helpers/fitToView'
 
-/**
- * Open the save-as dialog, fill name + view type, click save,
- * and wait for the success dialog.
- */
-async function builderSaveAs(
-  appMode: AppModeHelper,
-  workflowName: string,
-  viewType: 'App' | 'Node graph'
-) {
-  await appMode.footer.saveAsButton.click()
-  await expect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
-  await appMode.saveAs.fillAndSave(workflowName, viewType)
-  await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-}
-
-/**
- * Load a different workflow, then reopen the named one from the sidebar.
- * Caller must ensure the page is in graph mode (not builder or app mode)
- * before calling.
- */
-async function openWorkflowFromSidebar(comfyPage: ComfyPage, name: string) {
-  await comfyPage.workflow.loadWorkflow('default')
-  await comfyPage.nextFrame()
-  const { workflowsTab } = comfyPage.menu
-  await workflowsTab.open()
-  await workflowsTab.getPersistedItem(name).dblclick()
-  await comfyPage.nextFrame()
-
-  await expect(async () => {
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toContain(name)
-  }).toPass({ timeout: 5000 })
-}
-
 /**
  * After a first save, open save-as again from the chevron,
  * fill name + view type, and save.
@@ -203,10 +172,9 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
 
     // Select I/O to enable the button
     await appMode.steps.goToInputs()
-    const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-    await appMode.select.selectInputWidget(ksampler)
+    await appMode.select.selectInputWidget('KSampler', 'seed')
     await appMode.steps.goToOutputs()
-    await appMode.select.selectOutputNode()
+    await appMode.select.selectOutputNode('Save Image')
 
     // State 2: Enabled "Save as" (unsaved, has outputs)
     const enabledBox = await appMode.footer.saveAsButton.boundingBox()

browser_tests/tests/collapsedNodeLinks.spec.ts

@@ -1,68 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { assertNodeSlotsWithinBounds } from '../fixtures/utils/slotBoundsUtil'
-
-const NODE_ID = '3'
-const NODE_TITLE = 'KSampler'
-
-test.describe(
-  'Collapsed node link positions',
-  { tag: ['@canvas', '@node'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
-    test.afterEach(async ({ comfyPage }) => {
-      await comfyPage.canvasOps.resetView()
-    })
-
-    test('link endpoints stay within collapsed node bounds', async ({
-      comfyPage
-    }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-
-    test('links follow collapsed node after drag', async ({ comfyPage }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      const box = await node.boundingBox()
-      expect(box).not.toBeNull()
-      await comfyPage.page.mouse.move(
-        box!.x + box!.width / 2,
-        box!.y + box!.height / 2
-      )
-      await comfyPage.page.mouse.down()
-      await comfyPage.page.mouse.move(
-        box!.x + box!.width / 2 + 200,
-        box!.y + box!.height / 2 + 100,
-        { steps: 10 }
-      )
-      await comfyPage.page.mouse.up()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-
-    test('links recover correct positions after expand', async ({
-      comfyPage
-    }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-  }
-)

browser_tests/tests/missingMedia.spec.ts

@@ -1,225 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-async function loadMissingMediaAndOpenErrorsTab(
-  comfyPage: ComfyPage,
-  workflow = 'missing/missing_media_single'
-) {
-  await comfyPage.workflow.loadWorkflow(workflow)
-
-  const errorOverlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-  await expect(errorOverlay).toBeVisible()
-
-  await errorOverlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
-  await expect(errorOverlay).not.toBeVisible()
-}
-
-async function uploadFileViaDropzone(comfyPage: ComfyPage) {
-  const dropzone = comfyPage.page.getByTestId(
-    TestIds.dialogs.missingMediaUploadDropzone
-  )
-  const [fileChooser] = await Promise.all([
-    comfyPage.page.waitForEvent('filechooser'),
-    dropzone.click()
-  ])
-  await fileChooser.setFiles(comfyPage.assetPath('test_upload_image.png'))
-}
-
-async function confirmPendingSelection(comfyPage: ComfyPage) {
-  const confirmButton = comfyPage.page.getByTestId(
-    TestIds.dialogs.missingMediaConfirmButton
-  )
-  await expect(confirmButton).toBeEnabled()
-  await confirmButton.click()
-}
-
-function getMediaRow(comfyPage: ComfyPage) {
-  return comfyPage.page.getByTestId(TestIds.dialogs.missingMediaRow)
-}
-
-function getStatusCard(comfyPage: ComfyPage) {
-  return comfyPage.page.getByTestId(TestIds.dialogs.missingMediaStatusCard)
-}
-
-function getDropzone(comfyPage: ComfyPage) {
-  return comfyPage.page.getByTestId(TestIds.dialogs.missingMediaUploadDropzone)
-}
-
-test.describe('Missing media inputs in Error Tab', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-  })
-
-  test.describe('Detection', () => {
-    test('Shows error overlay when workflow has missing media inputs', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('missing/missing_media_single')
-
-      const errorOverlay = comfyPage.page.getByTestId(
-        TestIds.dialogs.errorOverlay
-      )
-      await expect(errorOverlay).toBeVisible()
-
-      const messages = errorOverlay.getByTestId(
-        TestIds.dialogs.errorOverlayMessages
-      )
-      await expect(messages).toBeVisible()
-      await expect(messages).toHaveText(/missing required inputs/i)
-    })
-
-    test('Shows missing media group in errors tab after clicking See Errors', async ({
-      comfyPage
-    }) => {
-      await loadMissingMediaAndOpenErrorsTab(comfyPage)
-
-      await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
-      ).toBeVisible()
-    })
-
-    test('Shows correct number of missing media rows', async ({
-      comfyPage
-    }) => {
-      await loadMissingMediaAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_multiple'
-      )
-
-      await expect(getMediaRow(comfyPage)).toHaveCount(2)
-    })
-
-    test('Shows upload dropzone and library select for each missing item', async ({
-      comfyPage
-    }) => {
-      await loadMissingMediaAndOpenErrorsTab(comfyPage)
-
-      await expect(getDropzone(comfyPage)).toBeVisible()
-      await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.missingMediaLibrarySelect)
-      ).toBeVisible()
-    })
-
-    test('Does not show error overlay when all media inputs exist', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-
-      await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-      ).not.toBeVisible()
-    })
-  })
-
-  test.describe('Upload flow (2-step confirm)', () => {
-    test('Upload via file picker shows status card then allows confirm', async ({
-      comfyPage
-    }) => {
-      await loadMissingMediaAndOpenErrorsTab(comfyPage)
-      await uploadFileViaDropzone(comfyPage)
-
-      await expect(getStatusCard(comfyPage)).toBeVisible()
-
-      await confirmPendingSelection(comfyPage)
-      await expect(getMediaRow(comfyPage)).toHaveCount(0)
-    })
-  })
-
-  test.describe('Library select flow (2-step confirm)', () => {
-    test('Selecting from library shows status card then allows confirm', async ({
-      comfyPage
-    }) => {
-      await loadMissingMediaAndOpenErrorsTab(comfyPage)
-
-      const librarySelect = comfyPage.page.getByTestId(
-        TestIds.dialogs.missingMediaLibrarySelect
-      )
-      await librarySelect.getByRole('combobox').click()
-
-      const optionCount = await comfyPage.page.getByRole('option').count()
-      if (optionCount === 0) {
-        test.skip()
-        return
-      }
-
-      await comfyPage.page.getByRole('option').first().click()
-
-      await expect(getStatusCard(comfyPage)).toBeVisible()
-
-      await confirmPendingSelection(comfyPage)
-      await expect(getMediaRow(comfyPage)).toHaveCount(0)
-    })
-  })
-
-  test.describe('Cancel selection', () => {
-    test('Cancelling pending selection returns to upload/library UI', async ({
-      comfyPage
-    }) => {
-      await loadMissingMediaAndOpenErrorsTab(comfyPage)
-      await uploadFileViaDropzone(comfyPage)
-
-      await expect(getStatusCard(comfyPage)).toBeVisible()
-      await expect(getDropzone(comfyPage)).not.toBeVisible()
-
-      await comfyPage.page
-        .getByTestId(TestIds.dialogs.missingMediaCancelButton)
-        .click()
-
-      await expect(getStatusCard(comfyPage)).not.toBeVisible()
-      await expect(getDropzone(comfyPage)).toBeVisible()
-    })
-  })
-
-  test.describe('All resolved', () => {
-    test('Missing Inputs group disappears when all items are resolved', async ({
-      comfyPage
-    }) => {
-      await loadMissingMediaAndOpenErrorsTab(comfyPage)
-      await uploadFileViaDropzone(comfyPage)
-      await confirmPendingSelection(comfyPage)
-
-      await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
-      ).not.toBeVisible()
-    })
-  })
-
-  test.describe('Locate node', () => {
-    test('Locate button navigates canvas to the missing media node', async ({
-      comfyPage
-    }) => {
-      await loadMissingMediaAndOpenErrorsTab(comfyPage)
-
-      const offsetBefore = await comfyPage.page.evaluate(() => {
-        const canvas = window['app']?.canvas
-        return canvas?.ds?.offset
-          ? [canvas.ds.offset[0], canvas.ds.offset[1]]
-          : null
-      })
-
-      const locateButton = comfyPage.page.getByTestId(
-        TestIds.dialogs.missingMediaLocateButton
-      )
-      await expect(locateButton).toBeVisible()
-      await locateButton.click()
-
-      await expect
-        .poll(async () => {
-          return await comfyPage.page.evaluate(() => {
-            const canvas = window['app']?.canvas
-            return canvas?.ds?.offset
-              ? [canvas.ds.offset[0], canvas.ds.offset[1]]
-              : null
-          })
-        })
-        .not.toEqual(offsetBefore)
-    })
-  })
-})

browser_tests/tests/outputHistory.spec.ts

@@ -0,0 +1,342 @@
+import { mergeTests } from '@playwright/test'
+
+import type { RawJobListItem } from '../../src/platform/remote/comfyui/jobs/jobTypes'
+import { comfyPageFixture, comfyExpect as expect } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { webSocketFixture } from '../fixtures/ws'
+import type { MockWebSocket } from '../fixtures/ws'
+import { ExecutionHelper } from '../fixtures/helpers/ExecutionHelper'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
+
+const SAVE_IMAGE_NODE = '9'
+const KSAMPLER_NODE = '3'
+
+/** Queue a prompt, intercept it, and send execution_start. */
+async function startExecution(comfyPage: ComfyPage, mock: MockWebSocket) {
+  const exec = new ExecutionHelper(comfyPage, mock)
+  const jobId = await exec.run()
+  // Allow storeJob() to complete before sending WS events
+  await comfyPage.nextFrame()
+  exec.executionStart(jobId)
+  return { exec, jobId }
+}
+
+function imageOutput(...filenames: string[]) {
+  return {
+    images: filenames.map((filename) => ({
+      filename,
+      subfolder: '',
+      type: 'output'
+    }))
+  }
+}
+
+test.describe('Output History', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.appMode.enterAppModeWithInputs([[KSAMPLER_NODE, 'seed']])
+    await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+    await comfyPage.nextFrame()
+  })
+
+  test('Skeleton appears on execution start', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    await startExecution(comfyPage, mock)
+
+    await expect(
+      comfyPage.appMode.outputHistory.skeletons.first()
+    ).toBeVisible()
+  })
+
+  test('Latent preview replaces skeleton', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    await expect(
+      comfyPage.appMode.outputHistory.skeletons.first()
+    ).toBeVisible()
+
+    exec.latentPreview(jobId, SAVE_IMAGE_NODE)
+
+    await expect(
+      comfyPage.appMode.outputHistory.latentPreviews.first()
+    ).toBeVisible()
+  })
+
+  test('Image output replaces skeleton on executed', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('test_output.png'))
+
+    await expect(
+      comfyPage.appMode.outputHistory.imageOutputs.first()
+    ).toBeVisible()
+  })
+
+  test('Multiple outputs from single execution', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    exec.executed(jobId, SAVE_IMAGE_NODE, {
+      images: [
+        { filename: 'output_001.png', subfolder: '', type: 'output' },
+        { filename: 'output_002.png', subfolder: '', type: 'output' },
+        { filename: 'output_003.png', subfolder: '', type: 'output' }
+      ]
+    })
+
+    await expect(comfyPage.appMode.outputHistory.imageOutputs).toHaveCount(3)
+  })
+
+  test('Video output renders video element', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    exec.executed(jobId, SAVE_IMAGE_NODE, {
+      gifs: [{ filename: 'output.mp4', subfolder: '', type: 'output' }]
+    })
+
+    await expect(
+      comfyPage.appMode.outputHistory.videoOutputs.first()
+    ).toBeVisible()
+  })
+
+  test('Cancel button sends interrupt during execution', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    const job: RawJobListItem = {
+      id: jobId,
+      status: 'in_progress',
+      create_time: Date.now() / 1000,
+      priority: 0
+    }
+    await comfyPage.page.route(
+      /\/api\/jobs\?status=in_progress/,
+      async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            jobs: [job],
+            pagination: { offset: 0, limit: 200, total: 1, has_more: false }
+          })
+        })
+      },
+      { times: 1 }
+    )
+    // Trigger queue refresh
+    exec.status(1)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.appMode.cancelRunButton).toBeVisible()
+
+    const interruptRequest = comfyPage.page.waitForRequest('**/interrupt')
+    await comfyPage.appMode.cancelRunButton.click()
+    await interruptRequest
+  })
+
+  test('Full execution lifecycle cleans up in-progress items', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    // Skeleton appears
+    await expect(
+      comfyPage.appMode.outputHistory.skeletons.first()
+    ).toBeVisible()
+
+    // Latent preview replaces skeleton
+    exec.latentPreview(jobId, SAVE_IMAGE_NODE)
+    await expect(
+      comfyPage.appMode.outputHistory.latentPreviews.first()
+    ).toBeVisible()
+
+    // Image output replaces latent
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('lifecycle_out.png'))
+    await expect(
+      comfyPage.appMode.outputHistory.imageOutputs.first()
+    ).toBeVisible()
+
+    // Job completes with history mock - in-progress items fully resolved
+    await exec.completeWithHistory(jobId, SAVE_IMAGE_NODE, 'lifecycle_out.png')
+
+    await expect(comfyPage.appMode.outputHistory.inProgressItems).toHaveCount(0)
+    // Output now appears as a history item
+    await expect(
+      comfyPage.appMode.outputHistory.historyItems.first()
+    ).toBeVisible()
+  })
+
+  test('Auto-selection follows latest in-progress item', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    // Skeleton is auto-selected
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem
+    ).toBeVisible()
+
+    // After executed, the image item should be auto-selected
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('auto_select.png'))
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem
+    ).toBeVisible()
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem.getByTestId(
+        'linear-image-output'
+      )
+    ).toBeVisible()
+  })
+
+  test('Clicking item breaks auto-follow during execution', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    // Send first image
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('first.png'))
+    await expect(comfyPage.appMode.outputHistory.imageOutputs).toHaveCount(1)
+
+    // Click the first image to break auto-follow
+    await comfyPage.appMode.outputHistory.inProgressItems.first().click()
+
+    // Send second image - selection should NOT move to it
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('second.png'))
+    await expect(comfyPage.appMode.outputHistory.imageOutputs).toHaveCount(2)
+
+    // The first item should still be selected
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem.getByTestId(
+        'linear-image-output'
+      )
+    ).toBeVisible()
+    // And there should be exactly one selected item
+    await expect(
+      comfyPage.appMode.outputHistory.selectedInProgressItem
+    ).toHaveCount(1)
+  })
+
+  test('Non-output node executed events are filtered', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    // KSampler is not an output node - should be filtered
+    exec.executed(jobId, KSAMPLER_NODE, imageOutput('ksampler_out.png'))
+    await comfyPage.nextFrame()
+
+    // KSampler output should not create image outputs
+    await expect(comfyPage.appMode.outputHistory.imageOutputs).toHaveCount(0)
+
+    // Now send from the actual output node (SaveImage)
+    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('save_image_out.png'))
+    await expect(
+      comfyPage.appMode.outputHistory.imageOutputs.first()
+    ).toBeVisible()
+  })
+
+  test('In-progress items are outside the scrollable area', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+
+    // Complete one execution with 100 image outputs
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+    exec.executed(
+      jobId,
+      SAVE_IMAGE_NODE,
+      imageOutput(
+        ...Array.from(
+          { length: 100 },
+          (_, i) => `image_${String(i).padStart(3, '0')}.png`
+        )
+      )
+    )
+    await exec.completeWithHistory(jobId, SAVE_IMAGE_NODE, 'image_000.png')
+
+    await expect(comfyPage.appMode.outputHistory.historyItems).toHaveCount(100)
+
+    // First history item is visible before scrolling
+    const firstItem = comfyPage.appMode.outputHistory.historyItems.first()
+    await expect(firstItem).toBeInViewport()
+
+    // Scroll the history feed all the way to the right
+    await comfyPage.appMode.outputHistory.outputs.evaluate((el) => {
+      el.scrollLeft = el.scrollWidth
+    })
+
+    // First history item is now off-screen
+    await expect(firstItem).not.toBeInViewport()
+
+    // Start a new execution to get an in-progress item
+    await startExecution(comfyPage, mock)
+
+    // In-progress item is visible despite scrolling
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeInViewport()
+  })
+
+  test('Execution error cleans up in-progress items', async ({
+    comfyPage,
+    getWebSocket
+  }) => {
+    const mock = await getWebSocket()
+    const { exec, jobId } = await startExecution(comfyPage, mock)
+
+    await expect(
+      comfyPage.appMode.outputHistory.inProgressItems.first()
+    ).toBeVisible()
+
+    exec.executionError(jobId, KSAMPLER_NODE, 'Test error')
+
+    await expect(comfyPage.appMode.outputHistory.inProgressItems).toHaveCount(0)
+  })
+})

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -1,20 +1,9 @@
-import type { Locator } from '@playwright/test'
-
 import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
-
-const BYPASS_CLASS = /before:bg-bypass\/60/
-
-function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
-  return comfyPage.page
-    .locator('[data-node-id]')
-    .filter({ hasText: nodeTitle })
-    .getByTestId('node-inner-wrapper')
-}
+import type { ComfyPage } from '../fixtures/ComfyPage'
 
 async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   const nodePos = await nodeRef.getPosition()
@@ -47,7 +36,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       () => window.app!.graph!._nodes.length
     )
 
-    const deleteButton = comfyPage.page.getByTestId('delete-button')
+    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
     await expect(deleteButton).toBeVisible()
     await deleteButton.click({ force: true })
     await comfyPage.nextFrame()
@@ -62,12 +51,14 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
     await selectNodeWithPan(comfyPage, nodeRef)
 
-    const infoButton = comfyPage.page.getByTestId('info-button')
+    const infoButton = comfyPage.page.locator('[data-testid="info-button"]')
     await expect(infoButton).toBeVisible()
     await infoButton.click({ force: true })
     await comfyPage.nextFrame()
 
-    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+    await expect(
+      comfyPage.page.locator('[data-testid="properties-panel"]')
+    ).toBeVisible()
   })
 
   test('convert-to-subgraph button visible with multi-select', async ({
@@ -80,7 +71,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     await comfyPage.nextFrame()
 
     await expect(
-      comfyPage.page.getByTestId('convert-to-subgraph-button')
+      comfyPage.page.locator('[data-testid="convert-to-subgraph-button"]')
     ).toBeVisible()
   })
 
@@ -97,7 +88,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       () => window.app!.graph!._nodes.length
     )
 
-    const deleteButton = comfyPage.page.getByTestId('delete-button')
+    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
     await expect(deleteButton).toBeVisible()
     await deleteButton.click({ force: true })
     await comfyPage.nextFrame()
@@ -107,152 +98,4 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     )
     expect(newCount).toBe(initialCount - 2)
   })
-
-  test('bypass button toggles bypass on single node', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
-    await comfyPage.vueNodes.waitForNodes()
-
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    await selectNodeWithPan(comfyPage, nodeRef)
-
-    expect(await nodeRef.isBypassed()).toBe(false)
-
-    const bypassButton = comfyPage.page.getByTestId('bypass-button')
-    await expect(bypassButton).toBeVisible()
-    await bypassButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    expect(await nodeRef.isBypassed()).toBe(true)
-    await expect(getNodeWrapper(comfyPage, 'KSampler')).toHaveClass(
-      BYPASS_CLASS
-    )
-
-    await bypassButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    expect(await nodeRef.isBypassed()).toBe(false)
-    await expect(getNodeWrapper(comfyPage, 'KSampler')).not.toHaveClass(
-      BYPASS_CLASS
-    )
-  })
-
-  test('convert-to-subgraph button converts node to subgraph', async ({
-    comfyPage
-  }) => {
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    await selectNodeWithPan(comfyPage, nodeRef)
-
-    const convertButton = comfyPage.page.getByTestId(
-      'convert-to-subgraph-button'
-    )
-    await expect(convertButton).toBeVisible()
-    await convertButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    // KSampler should be gone, replaced by a subgraph node
-    await expect
-      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))
-      .toHaveLength(0)
-
-    await expect
-      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph'))
-      .toHaveLength(1)
-  })
-
-  test('convert-to-subgraph button converts multiple nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
-
-    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
-    await comfyPage.nextFrame()
-
-    const convertButton = comfyPage.page.getByTestId(
-      'convert-to-subgraph-button'
-    )
-    await expect(convertButton).toBeVisible()
-    await convertButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    await expect
-      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph'))
-      .toHaveLength(1)
-
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
-      .toBe(initialCount - 1)
-  })
-
-  test('frame nodes button creates group from multiple selected nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
-
-    const initialGroupCount = await comfyPage.page.evaluate(
-      () => window.app!.graph.groups.length
-    )
-
-    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
-    await comfyPage.nextFrame()
-
-    const frameButton = comfyPage.page.getByRole('button', {
-      name: /Frame Nodes/i
-    })
-    await expect(frameButton).toBeVisible()
-    await frameButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    await expect
-      .poll(() =>
-        comfyPage.page.evaluate(() => window.app!.graph.groups.length)
-      )
-      .toBe(initialGroupCount + 1)
-  })
-
-  test('frame nodes button is not visible for single selection', async ({
-    comfyPage
-  }) => {
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    await selectNodeWithPan(comfyPage, nodeRef)
-
-    const frameButton = comfyPage.page.getByRole('button', {
-      name: /Frame Nodes/i
-    })
-    await expect(frameButton).not.toBeVisible()
-  })
-
-  test('execute button visible when output node selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
-
-    // Select the SaveImage node by panning to it
-    const saveImageRef = (
-      await comfyPage.nodeOps.getNodeRefsByTitle('Save Image')
-    )[0]
-    await selectNodeWithPan(comfyPage, saveImageRef)
-
-    const executeButton = comfyPage.page.getByRole('button', {
-      name: /Execute to selected output nodes/i
-    })
-    await expect(executeButton).toBeVisible()
-  })
-
-  test('execute button not visible when non-output node selected', async ({
-    comfyPage
-  }) => {
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    await selectNodeWithPan(comfyPage, nodeRef)
-
-    const executeButton = comfyPage.page.getByRole('button', {
-      name: /Execute to selected output nodes/i
-    })
-    await expect(executeButton).not.toBeVisible()
-  })
 })

browser_tests/tests/sidebar/assets.spec.ts

@@ -624,30 +624,21 @@ test.describe('Assets sidebar - pagination', () => {
     await comfyPage.assets.clearMocks()
   })
 
-  test('initial load fetches first batch with offset 0', async ({
+  test('Initially loads a batch of assets with has_more pagination', async ({
     comfyPage
   }) => {
-    const manyJobs = createMockJobs(250)
+    // Create a large set of jobs to trigger pagination
+    const manyJobs = createMockJobs(30)
     await comfyPage.assets.mockOutputHistory(manyJobs)
     await comfyPage.setup()
 
-    // Capture the first history fetch (terminal statuses only).
-    // Queue polling also hits /jobs but with status=in_progress,pending.
-    const firstRequest = comfyPage.page.waitForRequest((req) => {
-      if (!/\/api\/jobs\?/.test(req.url())) return false
-      const url = new URL(req.url())
-      const status = url.searchParams.get('status') ?? ''
-      return status.includes('completed')
-    })
-
     const tab = comfyPage.menu.assetsTab
     await tab.open()
     await tab.waitForAssets()
 
-    const req = await firstRequest
-    const url = new URL(req.url())
-    expect(url.searchParams.get('offset')).toBe('0')
-    expect(Number(url.searchParams.get('limit'))).toBeGreaterThan(0)
+    // Should load at least the first batch
+    const count = await tab.assetCards.count()
+    expect(count).toBeGreaterThanOrEqual(1)
   })
 })
 

browser_tests/tests/sidebar/modelLibrary.spec.ts

@@ -1,244 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-const MOCK_FOLDERS: Record<string, string[]> = {
-  checkpoints: [
-    'sd_xl_base_1.0.safetensors',
-    'dreamshaper_8.safetensors',
-    'realisticVision_v51.safetensors'
-  ],
-  loras: ['detail_tweaker_xl.safetensors', 'add_brightness.safetensors'],
-  vae: ['sdxl_vae.safetensors']
-}
-
-// ==========================================================================
-// 1. Tab open/close
-// ==========================================================================
-
-test.describe('Model library sidebar - tab', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Opens model library tab and shows tree', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.modelTree).toBeVisible()
-    await expect(tab.searchInput).toBeVisible()
-  })
-
-  test('Shows refresh and load all folders buttons', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.refreshButton).toBeVisible()
-    await expect(tab.loadAllFoldersButton).toBeVisible()
-  })
-})
-
-// ==========================================================================
-// 2. Folder display
-// ==========================================================================
-
-test.describe('Model library sidebar - folders', () => {
-  // Mocks are set up before setup(), so app.ts's loadModelFolders()
-  // call during initialization hits the mock and populates the store.
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Displays model folders after opening tab', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
-    await expect(tab.getFolderByLabel('loras')).toBeVisible()
-    await expect(tab.getFolderByLabel('vae')).toBeVisible()
-  })
-
-  test('Expanding a folder loads and shows models', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    // Click the folder to expand it
-    await tab.getFolderByLabel('checkpoints').click()
-
-    // Models should appear as leaf nodes
-    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
-    await expect(tab.getLeafByLabel('realisticVision_v51')).toBeVisible()
-  })
-
-  test('Expanding a different folder shows its models', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await tab.getFolderByLabel('loras').click()
-
-    await expect(tab.getLeafByLabel('detail_tweaker_xl')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getLeafByLabel('add_brightness')).toBeVisible()
-  })
-})
-
-// ==========================================================================
-// 3. Search
-// ==========================================================================
-
-test.describe('Model library sidebar - search', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Search filters models by filename', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await tab.searchInput.fill('dreamshaper')
-
-    // Wait for debounce (300ms) + load + render
-    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible({
-      timeout: 5000
-    })
-
-    // Other models should not be visible
-    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).not.toBeVisible()
-  })
-
-  test('Clearing search restores folder view', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await tab.searchInput.fill('dreamshaper')
-    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible({
-      timeout: 5000
-    })
-
-    // Clear the search
-    await tab.searchInput.fill('')
-
-    // Folders should be visible again (collapsed)
-    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getFolderByLabel('loras')).toBeVisible()
-  })
-
-  test('Search with no matches shows empty tree', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await tab.searchInput.fill('nonexistent_model_xyz')
-
-    // Wait for debounce, then verify no leaf nodes
-    await expect
-      .poll(async () => await tab.leafNodes.count(), { timeout: 5000 })
-      .toBe(0)
-  })
-})
-
-// ==========================================================================
-// 4. Refresh and load all
-// ==========================================================================
-
-test.describe('Model library sidebar - refresh', () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Refresh button reloads folder list', async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles({
-      checkpoints: ['model_a.safetensors']
-    })
-    await comfyPage.setup()
-
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
-
-    // Update mock to include a new folder
-    await comfyPage.modelLibrary.clearMocks()
-    await comfyPage.modelLibrary.mockFoldersWithFiles({
-      checkpoints: ['model_a.safetensors'],
-      loras: ['lora_b.safetensors']
-    })
-
-    // Wait for the refresh request to complete
-    const refreshRequest = comfyPage.page.waitForRequest(
-      (req) => req.url().endsWith('/experiment/models'),
-      { timeout: 5000 }
-    )
-    await tab.refreshButton.click()
-    await refreshRequest
-
-    await expect(tab.getFolderByLabel('loras')).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Load all folders button triggers loading all model data', async ({
-    comfyPage
-  }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-    await comfyPage.setup()
-
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    // Wait for a per-folder model files request triggered by load all
-    const folderRequest = comfyPage.page.waitForRequest(
-      (req) =>
-        /\/api\/experiment\/models\/[^/]+$/.test(req.url()) &&
-        req.method() === 'GET',
-      { timeout: 5000 }
-    )
-
-    await tab.loadAllFoldersButton.click()
-    await folderRequest
-  })
-})
-
-// ==========================================================================
-// 5. Empty state
-// ==========================================================================
-
-test.describe('Model library sidebar - empty state', () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Shows empty tree when no model folders exist', async ({
-    comfyPage
-  }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles({})
-    await comfyPage.setup()
-
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.modelTree).toBeVisible()
-    expect(await tab.folderNodes.count()).toBe(0)
-    expect(await tab.leafNodes.count()).toBe(0)
-  })
-})

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

@@ -1,126 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Node library sidebar V2', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', true)
-
-    const tab = comfyPage.menu.nodeLibraryTabV2
-    await tab.open()
-  })
-
-  test('Can switch between tabs', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
-
-    await tab.blueprintsTab.click()
-    await expect(tab.blueprintsTab).toHaveAttribute('aria-selected', 'true')
-    await expect(tab.allTab).toHaveAttribute('aria-selected', 'false')
-
-    await tab.allTab.click()
-    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
-    await expect(tab.blueprintsTab).toHaveAttribute('aria-selected', 'false')
-  })
-
-  test('All tab displays node tree with folders', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
-    await expect(tab.getFolder('sampling')).toBeVisible()
-  })
-
-  test('Can expand folder and see nodes in All tab', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await tab.expandFolder('sampling')
-    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
-  })
-
-  test('Search filters nodes in All tab', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await expect(tab.getNode('KSampler (Advanced)')).not.toBeVisible()
-
-    await tab.searchInput.fill('KSampler')
-    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getNode('CLIPLoader')).not.toBeVisible()
-  })
-
-  test('Drag node to canvas adds it', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await tab.expandFolder('sampling')
-    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
-
-    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-    const canvasBoundingBox = await comfyPage.page
-      .locator('#graph-canvas')
-      .boundingBox()
-    expect(canvasBoundingBox).not.toBeNull()
-    const targetPosition = {
-      x: canvasBoundingBox!.x + canvasBoundingBox!.width / 2,
-      y: canvasBoundingBox!.y + canvasBoundingBox!.height / 2
-    }
-
-    const nodeLocator = tab.getNode('KSampler (Advanced)')
-    await nodeLocator.dragTo(comfyPage.page.locator('#graph-canvas'), {
-      targetPosition
-    })
-
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 5000 })
-      .toBe(initialCount + 1)
-  })
-
-  test('Right-click node shows context menu with bookmark option', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await tab.expandFolder('sampling')
-    const node = tab.getNode('KSampler (Advanced)')
-    await expect(node).toBeVisible()
-
-    await node.click({ button: 'right' })
-
-    const contextMenu = comfyPage.page.getByRole('menuitem', {
-      name: /Bookmark Node/
-    })
-    await expect(contextMenu).toBeVisible({ timeout: 3000 })
-  })
-
-  test('Search clear restores folder view', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await expect(tab.getFolder('sampling')).toBeVisible()
-
-    await tab.searchInput.fill('KSampler')
-    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible({
-      timeout: 5000
-    })
-
-    await tab.searchInput.clear()
-    await tab.searchInput.press('Enter')
-
-    await expect(tab.getFolder('sampling')).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Sort dropdown shows sorting options', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await tab.sortButton.click()
-
-    // Reka UI DropdownMenuRadioItem renders with role="menuitemradio"
-    const options = comfyPage.page.getByRole('menuitemradio')
-    await expect(options.first()).toBeVisible({ timeout: 3000 })
-    await expect
-      .poll(() => options.count(), { timeout: 3000 })
-      .toBeGreaterThanOrEqual(2)
-  })
-})

browser_tests/tests/subgraph/subgraphSlots.spec.ts

@@ -7,10 +7,6 @@ import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/w
 
 import { comfyPageFixture as test, comfyExpect } from '../../fixtures/ComfyPage'
 import { SubgraphHelper } from '../../fixtures/helpers/SubgraphHelper'
-import {
-  expectSlotsWithinBounds,
-  measureNodeSlotOffsets
-} from '../../fixtures/utils/slotBoundsUtil'
 
 // Constants
 const RENAMED_INPUT_NAME = 'renamed_input'
@@ -23,6 +19,20 @@ const SELECTORS = {
   promptDialog: '.graphdialog input'
 } as const
 
+interface SlotMeasurement {
+  key: string
+  offsetX: number
+  offsetY: number
+}
+
+interface NodeSlotData {
+  nodeId: string
+  isSubgraph: boolean
+  nodeW: number
+  nodeH: number
+  slots: SlotMeasurement[]
+}
+
 test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -594,19 +604,71 @@ test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
       )
       await comfyPage.nextFrame()
 
+      // Wait for slot elements to appear in DOM
       await comfyPage.page.locator('[data-slot-key]').first().waitFor()
 
-      const nodeIds = await comfyPage.page.evaluate(() =>
-        window
-          .app!.graph._nodes.filter((n) => !!n.isSubgraphNode?.())
-          .map((n) => String(n.id))
-      )
-      expect(nodeIds.length).toBeGreaterThan(0)
+      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
+        const nodes = window.app!.graph._nodes
+        const slotData: NodeSlotData[] = []
 
-      for (const nodeId of nodeIds) {
-        const data = await measureNodeSlotOffsets(comfyPage.page, nodeId)
-        expect(data, `Node ${nodeId} not found in DOM`).not.toBeNull()
-        expectSlotsWithinBounds(data!, SLOT_BOUNDS_MARGIN, `Node ${nodeId}`)
+        for (const node of nodes) {
+          const nodeId = String(node.id)
+          const nodeEl = document.querySelector(
+            `[data-node-id="${nodeId}"]`
+          ) as HTMLElement | null
+          if (!nodeEl) continue
+
+          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
+          if (slotEls.length === 0) continue
+
+          const slots: SlotMeasurement[] = []
+
+          const nodeRect = nodeEl.getBoundingClientRect()
+          for (const slotEl of slotEls) {
+            const slotRect = slotEl.getBoundingClientRect()
+            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
+            slots.push({
+              key: slotKey,
+              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
+              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
+            })
+          }
+
+          slotData.push({
+            nodeId,
+            isSubgraph: !!node.isSubgraphNode?.(),
+            nodeW: nodeRect.width,
+            nodeH: nodeRect.height,
+            slots
+          })
+        }
+
+        return slotData
+      })
+
+      const subgraphNodes = result.filter((n) => n.isSubgraph)
+      expect(subgraphNodes.length).toBeGreaterThan(0)
+
+      for (const node of subgraphNodes) {
+        for (const slot of node.slots) {
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
+
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
+        }
       }
     })
   })

browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts

@@ -1,148 +0,0 @@
-import type { Locator } from '@playwright/test'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-async function ensurePropertiesPanel(comfyPage: ComfyPage) {
-  const panel = comfyPage.menu.propertiesPanel.root
-  if (!(await panel.isVisible())) {
-    await comfyPage.actionbar.propertiesButton.click()
-  }
-  await expect(panel).toBeVisible()
-  return panel
-}
-
-async function selectSubgraphAndOpenEditor(
-  comfyPage: ComfyPage,
-  nodeTitle: string
-) {
-  const subgraphNodes = await comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
-  expect(subgraphNodes.length).toBeGreaterThan(0)
-  await subgraphNodes[0].click('title')
-
-  await ensurePropertiesPanel(comfyPage)
-
-  const editorToggle = comfyPage.page.getByTestId(TestIds.subgraphEditor.toggle)
-  await expect(editorToggle).toBeVisible()
-  await editorToggle.click()
-
-  const shownSection = comfyPage.page.getByTestId(
-    TestIds.subgraphEditor.shownSection
-  )
-  await expect(shownSection).toBeVisible()
-  return shownSection
-}
-
-async function collectWidgetLabels(shownSection: Locator) {
-  const labels = shownSection.getByTestId(TestIds.subgraphEditor.widgetLabel)
-  const texts = await labels.allTextContents()
-  return texts.map((t) => t.trim())
-}
-
-test.describe(
-  'Subgraph promoted widget panel',
-  { tag: ['@node', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
-    test.describe('SubgraphEditor (Settings panel)', () => {
-      test('linked promoted widgets have hide toggle disabled', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        const shownSection = await selectSubgraphAndOpenEditor(
-          comfyPage,
-          'Sub 0'
-        )
-
-        const toggleButtons = shownSection.getByTestId(
-          TestIds.subgraphEditor.widgetToggle
-        )
-        await expect(toggleButtons.first()).toBeVisible()
-
-        const count = await toggleButtons.count()
-        for (let i = 0; i < count; i++) {
-          await expect(toggleButtons.nth(i)).toBeDisabled()
-        }
-      })
-
-      test('linked promoted widgets show link icon instead of eye icon', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        const shownSection = await selectSubgraphAndOpenEditor(
-          comfyPage,
-          'Sub 0'
-        )
-
-        const linkIcons = shownSection.getByTestId(
-          TestIds.subgraphEditor.iconLink
-        )
-        await expect(linkIcons.first()).toBeVisible()
-
-        const eyeIcons = shownSection.getByTestId(
-          TestIds.subgraphEditor.iconEye
-        )
-        await expect(eyeIcons).toHaveCount(0)
-      })
-
-      test('widget labels display renamed values instead of raw names', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/test-values-input-subgraph'
-        )
-        const shownSection = await selectSubgraphAndOpenEditor(
-          comfyPage,
-          'Input Test Subgraph'
-        )
-
-        const allTexts = await collectWidgetLabels(shownSection)
-        expect(allTexts.length).toBeGreaterThan(0)
-
-        // The fixture has a widget with name="text" but
-        // label="renamed_from_sidepanel". The panel should show the
-        // renamed label, not the raw widget name.
-        expect(allTexts).toContain('renamed_from_sidepanel')
-        expect(allTexts).not.toContain('text')
-      })
-    })
-
-    test.describe('Parameters tab (WidgetActions menu)', () => {
-      test('linked promoted widget menu should not show Hide/Show input', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        const subgraphNodes =
-          await comfyPage.nodeOps.getNodeRefsByTitle('Sub 0')
-        expect(subgraphNodes.length).toBeGreaterThan(0)
-        await subgraphNodes[0].click('title')
-
-        const panel = await ensurePropertiesPanel(comfyPage)
-
-        const moreButtons = panel.getByTestId(
-          TestIds.subgraphEditor.widgetActionsMenuButton
-        )
-        await expect(moreButtons.first()).toBeVisible()
-        await moreButtons.first().click()
-
-        const menu = comfyPage.page.getByTestId(TestIds.menu.moreMenuContent)
-        await expect(menu).toBeVisible()
-        await expect(menu.getByText('Hide input')).toHaveCount(0)
-        await expect(menu.getByText('Show input')).toHaveCount(0)
-        await expect(menu.getByText('Rename')).toBeVisible()
-      })
-    })
-  }
-)

browser_tests/tests/topbar/workflowTabs.spec.ts

@@ -1,154 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Workflow tabs', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.Workflow.WorkflowTabsPosition',
-      'Topbar'
-    )
-    await comfyPage.setup()
-  })
-
-  test('Default workflow tab is visible on load', async ({ comfyPage }) => {
-    const tabNames = await comfyPage.menu.topbar.getTabNames()
-    expect(tabNames.length).toBe(1)
-    expect(tabNames[0]).toContain('Unsaved Workflow')
-  })
-
-  test('Creating a new workflow adds a tab', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    expect(await topbar.getTabNames()).toHaveLength(1)
-
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-    const tabNames = await topbar.getTabNames()
-    expect(tabNames[1]).toContain('Unsaved Workflow (2)')
-  })
-
-  test('Switching tabs changes active workflow', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-    const activeNameBefore = await topbar.getActiveTabName()
-    expect(activeNameBefore).toContain('Unsaved Workflow (2)')
-
-    await topbar.getTab(0).click()
-    await expect
-      .poll(() => topbar.getActiveTabName())
-      .toContain('Unsaved Workflow')
-
-    const activeAfter = await topbar.getActiveTabName()
-    expect(activeAfter).not.toContain('(2)')
-  })
-
-  test('Closing a tab removes it', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-    await topbar.closeWorkflowTab('Unsaved Workflow (2)')
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-
-    const remaining = await topbar.getTabNames()
-    expect(remaining[0]).toContain('Unsaved Workflow')
-  })
-
-  test('Right-clicking a tab shows context menu', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await topbar.getTab(0).click({ button: 'right' })
-
-    // Reka UI ContextMenuContent gets data-state="open" when active
-    const contextMenu = comfyPage.page.locator(
-      '[role="menu"][data-state="open"]'
-    )
-    await expect(contextMenu).toBeVisible({ timeout: 5000 })
-
-    await expect(
-      contextMenu.getByRole('menuitem', { name: /Close Tab/i }).first()
-    ).toBeVisible()
-    await expect(
-      contextMenu.getByRole('menuitem', { name: /Save/i }).first()
-    ).toBeVisible()
-  })
-
-  test('Context menu Close Tab action removes the tab', async ({
-    comfyPage
-  }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-    await topbar.getTab(1).click({ button: 'right' })
-    const contextMenu = comfyPage.page.locator(
-      '[role="menu"][data-state="open"]'
-    )
-    await expect(contextMenu).toBeVisible({ timeout: 5000 })
-
-    await contextMenu
-      .getByRole('menuitem', { name: /Close Tab/i })
-      .first()
-      .click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-  })
-
-  test('Closing the last tab creates a new default workflow', async ({
-    comfyPage
-  }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-
-    await topbar.closeWorkflowTab('Unsaved Workflow')
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-
-    const tabNames = await topbar.getTabNames()
-    expect(tabNames[0]).toContain('Unsaved Workflow')
-  })
-
-  test('Modified workflow shows unsaved indicator', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    // Modify the graph via litegraph API to trigger unsaved state
-    await comfyPage.page.evaluate(() => {
-      const graph = window.app?.graph
-      const node = window.LiteGraph?.createNode('Note')
-      if (graph && node) graph.add(node)
-    })
-
-    // WorkflowTab renders "•" when the workflow has unsaved changes
-    const activeTab = topbar.getActiveTab()
-    await expect(activeTab.locator('text=•')).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Multiple tabs can be created, switched, and closed', async ({
-    comfyPage
-  }) => {
-    const topbar = comfyPage.menu.topbar
-
-    // Create 2 additional tabs (3 total)
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(3)
-
-    // Switch to first tab
-    await topbar.getTab(0).click()
-    await expect
-      .poll(() => topbar.getActiveTabName())
-      .toContain('Unsaved Workflow')
-
-    // Close the middle tab
-    await topbar.closeWorkflowTab('Unsaved Workflow (2)')
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-  })
-})

browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts

@@ -5,9 +5,9 @@ import {
   comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
 import type { ComfyPage } from '../../../../fixtures/ComfyPage'
-import { TestIds } from '../../../../fixtures/selectors'
 
 const BYPASS_CLASS = /before:bg-bypass\/60/
+const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
 
 async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
   await comfyPage.page.getByRole('menuitem', { name, exact: true }).click()
@@ -15,10 +15,12 @@ async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
 }
 
 async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
-  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-  await fixture.header.click()
-  await fixture.header.click({ button: 'right' })
-  const menu = comfyPage.contextMenu.primeVueMenu
+  const header = comfyPage.vueNodes
+    .getNodeByTitle(nodeTitle)
+    .locator('.lg-node-header')
+  await header.click()
+  await header.click({ button: 'right' })
+  const menu = comfyPage.page.locator('.p-contextmenu')
   await menu.waitFor({ state: 'visible' })
   return menu
 }
@@ -33,13 +35,17 @@ async function openMultiNodeContextMenu(
   await comfyPage.nextFrame()
 
   for (const title of titles) {
-    const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-    await fixture.header.click({ modifiers: ['ControlOrMeta'] })
+    const header = comfyPage.vueNodes
+      .getNodeByTitle(title)
+      .locator('.lg-node-header')
+    await header.click({ modifiers: ['ControlOrMeta'] })
   }
   await comfyPage.nextFrame()
 
-  const firstFixture = await comfyPage.vueNodes.getFixtureByTitle(titles[0])
-  const box = await firstFixture.header.boundingBox()
+  const firstHeader = comfyPage.vueNodes
+    .getNodeByTitle(titles[0])
+    .locator('.lg-node-header')
+  const box = await firstHeader.boundingBox()
   if (!box) throw new Error(`Header for "${titles[0]}" not found`)
   await comfyPage.page.mouse.click(
     box.x + box.width / 2,
@@ -47,15 +53,16 @@ async function openMultiNodeContextMenu(
     { button: 'right' }
   )
 
-  const menu = comfyPage.contextMenu.primeVueMenu
+  const menu = comfyPage.page.locator('.p-contextmenu')
   await menu.waitFor({ state: 'visible' })
   return menu
 }
 
 function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
-  return comfyPage.vueNodes
-    .getNodeByTitle(nodeTitle)
-    .getByTestId(TestIds.node.innerWrapper)
+  return comfyPage.page
+    .locator('[data-node-id]')
+    .filter({ hasText: nodeTitle })
+    .getByTestId('node-inner-wrapper')
 }
 
 async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
@@ -75,7 +82,9 @@ test.describe('Vue Node Context Menu', () => {
       await openContextMenu(comfyPage, 'KSampler')
       await clickExactMenuItem(comfyPage, 'Rename')
 
-      const titleInput = comfyPage.page.getByTestId(TestIds.node.titleInput)
+      const titleInput = comfyPage.page.locator(
+        '.node-title-editor input[type="text"]'
+      )
       await titleInput.waitFor({ state: 'visible' })
       await titleInput.fill('My Renamed Sampler')
       await titleInput.press('Enter')
@@ -126,12 +135,16 @@ test.describe('Vue Node Context Menu', () => {
       await openContextMenu(comfyPage, nodeTitle)
       await clickExactMenuItem(comfyPage, 'Pin')
 
-      const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-      await expect(fixture.pinIndicator).toBeVisible()
+      const pinIndicator = comfyPage.vueNodes
+        .getNodeByTitle(nodeTitle)
+        .locator(PIN_INDICATOR)
+      await expect(pinIndicator).toBeVisible()
       expect(await nodeRef.isPinned()).toBe(true)
 
       // Verify drag blocked
-      const header = fixture.header
+      const header = comfyPage.vueNodes
+        .getNodeByTitle(nodeTitle)
+        .locator('.lg-node-header')
       const posBeforeDrag = await header.boundingBox()
       if (!posBeforeDrag) throw new Error('Header not found')
       await comfyPage.canvasOps.dragAndDrop(
@@ -145,7 +158,7 @@ test.describe('Vue Node Context Menu', () => {
       await openContextMenu(comfyPage, nodeTitle)
       await clickExactMenuItem(comfyPage, 'Unpin')
 
-      await expect(fixture.pinIndicator).not.toBeVisible()
+      await expect(pinIndicator).not.toBeVisible()
       expect(await nodeRef.isPinned()).toBe(false)
     })
 
@@ -231,9 +244,7 @@ test.describe('Vue Node Context Menu', () => {
       comfyPage
     }) => {
       // Capture the original image src from the node's preview
-      const imagePreview = comfyPage.vueNodes
-        .getNodeByTitle('Load Image')
-        .getByTestId(TestIds.node.mainImage)
+      const imagePreview = comfyPage.page.locator('.image-preview img')
       const originalSrc = await imagePreview.getAttribute('src')
 
       // Write a test image into the browser clipboard
@@ -336,7 +347,8 @@ test.describe('Vue Node Context Menu', () => {
       await comfyPage.nodeOps.fillPromptDialog('TestBlueprint')
 
       // Open node library sidebar and search for the blueprint
-      await comfyPage.menu.nodeLibraryTab.tabButton.click()
+      await comfyPage.page.getByRole('button', { name: 'Node Library' }).click()
+      await comfyPage.nextFrame()
       const searchBox = comfyPage.page.getByRole('combobox', {
         name: 'Search'
       })
@@ -402,16 +414,20 @@ test.describe('Vue Node Context Menu', () => {
       await clickExactMenuItem(comfyPage, 'Pin')
 
       for (const title of nodeTitles) {
-        const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-        await expect(fixture.pinIndicator).toBeVisible()
+        const pinIndicator = comfyPage.vueNodes
+          .getNodeByTitle(title)
+          .locator(PIN_INDICATOR)
+        await expect(pinIndicator).toBeVisible()
       }
 
       await openMultiNodeContextMenu(comfyPage, nodeTitles)
       await clickExactMenuItem(comfyPage, 'Unpin')
 
       for (const title of nodeTitles) {
-        const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-        await expect(fixture.pinIndicator).not.toBeVisible()
+        const pinIndicator = comfyPage.vueNodes
+          .getNodeByTitle(title)
+          .locator(PIN_INDICATOR)
+        await expect(pinIndicator).not.toBeVisible()
       }
     })
 

package.json

@@ -73,7 +73,6 @@
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
     "@sparkjsdev/spark": "catalog:",
-    "@tanstack/vue-virtual": "catalog:",
     "@tiptap/core": "catalog:",
     "@tiptap/extension-link": "catalog:",
     "@tiptap/extension-table": "catalog:",

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

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

pnpm-lock.yaml

@@ -102,9 +102,6 @@ catalogs:
     '@tailwindcss/vite':
       specifier: ^4.2.0
       version: 4.2.0
-    '@tanstack/vue-virtual':
-      specifier: ^3.13.12
-      version: 3.13.12
     '@testing-library/jest-dom':
       specifier: ^6.9.1
       version: 6.9.1
@@ -461,9 +458,6 @@ importers:
       '@sparkjsdev/spark':
         specifier: 'catalog:'
         version: 0.1.10
-      '@tanstack/vue-virtual':
-        specifier: 'catalog:'
-        version: 3.13.12(vue@3.5.13(typescript@5.9.3))
       '@tiptap/core':
         specifier: 'catalog:'
         version: 2.27.2(@tiptap/pm@2.27.2)

pnpm-workspace.yaml

@@ -30,7 +30,6 @@ catalog:
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^0.1.10
-  '@tanstack/vue-virtual': ^3.13.12
   '@storybook/addon-docs': ^10.2.10
   '@storybook/addon-mcp': 0.1.6
   '@storybook/vue3': ^10.2.10

src/components/builder/AppModeWidgetList.vue

@@ -170,6 +170,7 @@ defineExpose({ handleDragDrop })
         ? `${action.widget.label ?? action.widget.name} — ${action.node.title}`
         : undefined
     "
+    data-testid="builder-widget-item"
   >
     <div
       :class="
@@ -181,6 +182,7 @@ defineExpose({ handleDragDrop })
     >
       <span
         :class="cn('truncate text-sm/8', builderMode && 'pointer-events-none')"
+        data-testid="builder-widget-label"
       >
         {{ action.widget.label || action.widget.name }}
       </span>

src/components/button/MoreButton.vue

@@ -51,10 +51,7 @@
         }
       "
     >
-      <div
-        class="flex min-w-40 flex-col gap-2 p-2"
-        data-testid="more-menu-content"
-      >
+      <div class="flex min-w-40 flex-col gap-2 p-2">
         <slot :close="hide" />
       </div>
     </Popover>

src/components/common/TreeExplorerV2.vue

@@ -37,13 +37,13 @@
       </TreeRoot>
     </ContextMenuTrigger>
 
-    <ContextMenuPortal v-if="showContextMenu && contextMenuNode?.data">
+    <ContextMenuPortal v-if="showContextMenu">
       <ContextMenuContent
         class="z-9999 min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
       >
         <ContextMenuItem
           class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
-          @select="handleToggleBookmark"
+          @select="handleAddToFavorites"
         >
           <i
             :class="
@@ -59,14 +59,6 @@
               : $t('sideToolbar.nodeLibraryTab.sections.favoriteNode')
           }}
         </ContextMenuItem>
-        <ContextMenuItem
-          v-if="isCurrentNodeUserBlueprint"
-          class="text-destructive flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
-          @select="handleDeleteBlueprint"
-        >
-          <i class="icon-[lucide--trash-2] size-4" />
-          {{ $t('g.delete') }}
-        </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenuPortal>
   </ContextMenuRoot>
@@ -87,7 +79,6 @@ import { computed, provide, ref } from 'vue'
 
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSubgraphStore } from '@/stores/subgraphStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
 
@@ -107,6 +98,7 @@ const emit = defineEmits<{
     node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
     event: MouseEvent
   ]
+  addToFavorites: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
 }>()
 
 const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
@@ -115,7 +107,6 @@ const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
 provide(InjectKeyContextMenuNode, contextMenuNode)
 
 const nodeBookmarkStore = useNodeBookmarkStore()
-const subgraphStore = useSubgraphStore()
 
 const isCurrentNodeBookmarked = computed(() => {
   const node = contextMenuNode.value
@@ -123,21 +114,9 @@ const isCurrentNodeBookmarked = computed(() => {
   return nodeBookmarkStore.isBookmarked(node.data)
 })
 
-const isCurrentNodeUserBlueprint = computed(() =>
-  subgraphStore.isUserBlueprint(contextMenuNode.value?.data?.name)
-)
-
-function handleToggleBookmark() {
-  const node = contextMenuNode.value
-  if (node?.data) {
-    nodeBookmarkStore.toggleBookmark(node.data)
-  }
-}
-
-function handleDeleteBlueprint() {
-  const name = contextMenuNode.value?.data?.name
-  if (name) {
-    void subgraphStore.deleteBlueprint(name)
+function handleAddToFavorites() {
+  if (contextMenuNode.value) {
+    emit('addToFavorites', contextMenuNode.value)
   }
 }
 </script>

src/components/common/TreeExplorerV2Node.test.ts

@@ -13,7 +13,7 @@ import TreeExplorerV2Node from './TreeExplorerV2Node.vue'
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
-  messages: { en: { g: { delete: 'Delete' } } }
+  messages: { en: {} }
 })
 
 vi.mock('@/platform/settings/settingStore', () => ({
@@ -29,17 +29,6 @@ vi.mock('@/stores/nodeBookmarkStore', () => ({
   })
 }))
 
-const mockDeleteBlueprint = vi.fn()
-const mockIsUserBlueprint = vi.fn().mockReturnValue(false)
-
-vi.mock('@/stores/subgraphStore', () => ({
-  useSubgraphStore: () => ({
-    isUserBlueprint: mockIsUserBlueprint,
-    deleteBlueprint: mockDeleteBlueprint,
-    typePrefix: 'SubgraphBlueprint.'
-  })
-}))
-
 vi.mock('@/components/node/NodePreviewCard.vue', () => ({
   default: { template: '<div />' }
 }))
@@ -186,12 +175,8 @@ describe('TreeExplorerV2Node', () => {
       expect(contextMenuNode.value).toEqual(nodeItem.value)
     })
 
-    it('clears contextMenuNode when right-clicking a folder', async () => {
-      const contextMenuNode = ref<RenderedTreeExplorerNode | null>({
-        key: 'stale',
-        type: 'node',
-        label: 'Stale'
-      } as RenderedTreeExplorerNode)
+    it('does not set contextMenuNode for folder items', async () => {
+      const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
 
       const { wrapper } = mountComponent(
         { item: createMockItem('folder') },
@@ -209,59 +194,6 @@ describe('TreeExplorerV2Node', () => {
     })
   })
 
-  describe('blueprint actions', () => {
-    beforeEach(() => {
-      vi.clearAllMocks()
-    })
-
-    it('shows delete button for user blueprints', () => {
-      mockIsUserBlueprint.mockReturnValue(true)
-      const { wrapper } = mountComponent({
-        item: createMockItem('node', {
-          data: { name: 'SubgraphBlueprint.test' }
-        })
-      })
-
-      expect(wrapper.find('[aria-label="Delete"]').exists()).toBe(true)
-    })
-
-    it('hides delete button for non-blueprint nodes', () => {
-      mockIsUserBlueprint.mockReturnValue(false)
-      const { wrapper } = mountComponent({
-        item: createMockItem('node', {
-          data: { name: 'KSampler' }
-        })
-      })
-
-      expect(wrapper.find('[aria-label="Delete"]').exists()).toBe(false)
-    })
-
-    it('always shows bookmark button', () => {
-      mockIsUserBlueprint.mockReturnValue(true)
-      const { wrapper } = mountComponent({
-        item: createMockItem('node', {
-          data: { name: 'SubgraphBlueprint.test' }
-        })
-      })
-
-      expect(wrapper.find('[aria-label="icon.bookmark"]').exists()).toBe(true)
-    })
-
-    it('calls deleteBlueprint when delete button is clicked', async () => {
-      mockIsUserBlueprint.mockReturnValue(true)
-      const nodeName = 'SubgraphBlueprint.test'
-      const { wrapper } = mountComponent({
-        item: createMockItem('node', {
-          data: { name: nodeName }
-        })
-      })
-
-      await wrapper.find('[aria-label="Delete"]').trigger('click')
-
-      expect(mockDeleteBlueprint).toHaveBeenCalledWith(nodeName)
-    })
-  })
-
   describe('rendering', () => {
     it('renders node icon for node type', () => {
       const { wrapper } = mountComponent({

src/components/common/TreeExplorerV2Node.vue

@@ -25,30 +25,25 @@
           {{ item.value.label }}
         </slot>
       </span>
-      <div class="flex shrink-0 items-center gap-0.5">
-        <button
-          v-if="isUserBlueprint"
-          :class="cn(ACTION_BTN_CLASS, 'text-destructive')"
-          :aria-label="$t('g.delete')"
-          @click.stop="deleteBlueprint"
-        >
-          <i class="icon-[lucide--trash-2] text-xs" />
-        </button>
-        <button
-          :class="cn(ACTION_BTN_CLASS, 'text-muted-foreground')"
-          :aria-label="$t('icon.bookmark')"
-          @click.stop="toggleBookmark"
-        >
-          <i
-            :class="
-              cn(
-                isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
-                'text-xs'
-              )
-            "
-          />
-        </button>
-      </div>
+      <button
+        :class="
+          cn(
+            'hover:text-foreground flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground',
+            'opacity-0 group-hover/tree-node:opacity-100'
+          )
+        "
+        :aria-label="$t('icon.bookmark')"
+        @click.stop="toggleBookmark"
+      >
+        <i
+          :class="
+            cn(
+              isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
+              'text-xs'
+            )
+          "
+        />
+      </button>
     </div>
 
     <!-- Folder -->
@@ -58,7 +53,6 @@
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       @click.stop="handleClick($event, handleToggle, handleSelect)"
-      @contextmenu="clearContextMenuNode"
     >
       <i
         v-if="item.hasChildren"
@@ -102,7 +96,6 @@ import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSubgraphStore } from '@/stores/subgraphStore'
 import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'
@@ -114,9 +107,6 @@ defineOptions({
 const ROW_CLASS =
   'group/tree-node flex w-full min-w-0 cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input rounded'
 
-const ACTION_BTN_CLASS =
-  'flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent opacity-0 group-hover/tree-node:opacity-100 hover:text-foreground'
-
 const { item } = defineProps<{
   item: FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>
 }>()
@@ -130,7 +120,6 @@ const emit = defineEmits<{
 
 const contextMenuNode = inject(InjectKeyContextMenuNode)
 const nodeBookmarkStore = useNodeBookmarkStore()
-const subgraphStore = useSubgraphStore()
 
 const nodeDef = computed(() => item.value.data)
 
@@ -139,22 +128,12 @@ const isBookmarked = computed(() => {
   return nodeBookmarkStore.isBookmarked(nodeDef.value)
 })
 
-const isUserBlueprint = computed(() =>
-  subgraphStore.isUserBlueprint(nodeDef.value?.name)
-)
-
 function toggleBookmark() {
   if (nodeDef.value) {
     nodeBookmarkStore.toggleBookmark(nodeDef.value)
   }
 }
 
-function deleteBlueprint() {
-  if (nodeDef.value) {
-    void subgraphStore.deleteBlueprint(nodeDef.value.name)
-  }
-}
-
 const {
   previewRef,
   showPreview,
@@ -187,12 +166,6 @@ function handleContextMenu() {
   }
 }
 
-function clearContextMenuNode() {
-  if (contextMenuNode) {
-    contextMenuNode.value = null
-  }
-}
-
 function handleMouseEnter(e: MouseEvent) {
   if (item.value.type !== 'node') return
   baseHandleMouseEnter(e)

src/components/graph/TitleEditor.vue

@@ -7,7 +7,6 @@
     <EditableText
       :is-editing="showInput"
       :model-value="editedTitle"
-      :input-attrs="{ 'data-testid': 'node-title-input' }"
       @edit="onEdit"
     />
   </div>

src/components/graph/widgets/domWidgetZIndex.test.ts

@@ -1,4 +1,4 @@
-import { fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -15,7 +15,7 @@ describe('getDomWidgetZIndex', () => {
     first.order = 0
     second.order = 1
 
-    const nodes = fromPartial<{ _nodes: LGraphNode[] }>(graph)._nodes
+    const nodes = fromAny<{ _nodes: LGraphNode[] }, unknown>(graph)._nodes
     nodes.splice(nodes.indexOf(first), 1)
     nodes.push(first)
 

src/components/load3d/Load3dViewerContent.vue

@@ -197,15 +197,4 @@ onBeforeUnmount(() => {
 :deep(.p-panel-content) {
   padding: 0;
 }
-
-:deep(.p-slider) {
-  height: 6px;
-}
-
-:deep(.p-slider-handle) {
-  width: 14px;
-  height: 14px;
-  margin-top: -4px;
-  margin-left: -7px;
-}
 </style>

src/components/load3d/controls/viewer/ViewerCameraControls.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="space-y-4">
-    <div class="flex flex-col gap-2">
-      <label>{{ t('load3d.viewer.cameraType') }}</label>
+    <div class="space-y-4">
+      <label>
+        {{ t('load3d.viewer.cameraType') }}
+      </label>
       <Select
         v-model="cameraType"
         :options="cameras"
@@ -11,7 +13,7 @@
       </Select>
     </div>
 
-    <div v-if="showFOVButton" class="flex flex-col gap-2">
+    <div v-if="showFOVButton" class="space-y-4">
       <label>{{ t('load3d.fov') }}</label>
       <Slider
         v-model="fov"

src/components/load3d/controls/viewer/ViewerLightControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="space-y-4">
     <label>{{ $t('load3d.lightIntensity') }}</label>
 
     <Slider

src/components/load3d/controls/viewer/ViewerModelControls.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-4">
-    <div class="flex flex-col gap-2">
+    <div>
       <label>{{ $t('load3d.upDirection') }}</label>
       <Select
         v-model="upDirection"
@@ -10,7 +10,7 @@
       />
     </div>
 
-    <div v-if="!hideMaterialMode" class="flex flex-col gap-2">
+    <div v-if="!hideMaterialMode">
       <label>{{ $t('load3d.materialMode') }}</label>
       <Select
         v-model="materialMode"

src/components/load3d/controls/viewer/ViewerSceneControls.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="space-y-4">
-    <div v-if="!hasBackgroundImage" class="flex flex-col gap-2">
+    <div v-if="!hasBackgroundImage">
       <label>
         {{ $t('load3d.backgroundColor') }}
       </label>
-      <input v-model="backgroundColor" type="color" class="h-8 w-full" />
+      <input v-model="backgroundColor" type="color" class="w-full" />
     </div>
 
     <div>

src/components/queue/QueueOverlayExpanded.vue

@@ -20,7 +20,7 @@
       @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
     />
 
-    <div class="min-h-0 flex-1">
+    <div class="min-h-0 flex-1 overflow-y-auto">
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
         @cancel-item="onCancelItemEvent"

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

@@ -1,3 +1,4 @@
+/* eslint-disable vue/one-component-per-file -- test stubs */
 /* eslint-disable testing-library/no-container, testing-library/no-node-access -- stubs lack ARIA roles; data attributes for props */
 /* eslint-disable testing-library/prefer-user-event -- fireEvent needed: fake timers require fireEvent for mouseEnter/mouseLeave */
 import { fireEvent, render, screen } from '@testing-library/vue'
@@ -5,27 +6,21 @@ import userEvent from '@testing-library/user-event'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'
 
-import './testUtils/mockTanstackVirtualizer'
-
 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'
 
-const hoisted = vi.hoisted(() => ({
-  jobDetailsPopoverStub: {
-    name: 'JobDetailsPopover',
-    props: {
-      jobId: { type: String, required: true },
-      workflowId: { type: String, default: undefined }
-    },
-    template:
-      '<div class="job-details-popover-stub" :data-job-id="jobId" :data-workflow-id="workflowId" />'
-  }
-}))
-
-vi.mock('@/components/queue/job/JobDetailsPopover.vue', () => ({
-  default: hoisted.jobDetailsPopoverStub
-}))
+const JobDetailsPopoverStub = defineComponent({
+  name: 'JobDetailsPopover',
+  props: {
+    jobId: { type: String, required: true },
+    workflowId: { type: String, default: undefined }
+  },
+  template:
+    '<div class="job-details-popover-stub" :data-job-id="jobId" :data-workflow-id="workflowId" />'
+})
 
 const AssetsListItemStub = defineComponent({
   name: 'AssetsListItem',
@@ -70,81 +65,71 @@ vi.mock('vue-i18n', () => {
   }
 })
 
-type TestPreviewOutput = {
-  url: string
-  isImage: boolean
-  isVideo: boolean
-}
-
-type TestTaskRef = {
-  workflowId?: string
-  previewOutput?: TestPreviewOutput
-}
-
-type TestJobListItem = Omit<JobListItem, 'taskRef'> & {
-  taskRef?: TestTaskRef
-}
-
-type TestJobGroup = Omit<JobGroup, 'items'> & {
-  items: TestJobListItem[]
-}
-
-const createPreviewOutput = (
+const createResultItem = (
   filename: string,
   mediaType: string = 'images'
-): TestPreviewOutput => {
-  const url = `/api/view/${filename}`
-  return {
-    url,
-    isImage: mediaType === 'images',
-    isVideo: mediaType === 'video'
-  }
+): ResultItemImpl => {
+  const item = new ResultItemImpl({
+    filename,
+    subfolder: '',
+    type: 'output',
+    nodeId: 'node-1',
+    mediaType
+  })
+  Object.defineProperty(item, 'url', {
+    get: () => `/api/view/${filename}`
+  })
+  return item
 }
 
-const createTaskRef = (preview?: TestPreviewOutput): TestTaskRef => ({
-  workflowId: 'workflow-1',
-  ...(preview && { previewOutput: preview })
-})
+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<TestJobListItem> = {}
-): TestJobListItem => ({
+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
 })
 
-function renderJobAssetsList({
-  jobs = [],
-  displayedJobGroups,
-  attrs,
-  onViewItem
-}: {
-  jobs?: TestJobListItem[]
-  displayedJobGroups?: TestJobGroup[]
-  attrs?: Record<string, string>
-  onViewItem?: (item: JobListItem) => void
-} = {}) {
+function renderJobAssetsList(
+  jobs: JobListItem[],
+  callbacks: {
+    onViewItem?: (item: JobListItem) => void
+  } = {}
+) {
+  const displayedJobGroups: JobGroup[] = [
+    {
+      key: 'group-1',
+      label: 'Group 1',
+      items: jobs
+    }
+  ]
+
   const user = userEvent.setup()
 
   const result = render(JobAssetsList, {
     props: {
-      displayedJobGroups: (displayedJobGroups ?? [
-        {
-          key: 'group-1',
-          label: 'Group 1',
-          items: jobs
-        }
-      ]) as JobGroup[],
-      ...(onViewItem && { onViewItem })
+      displayedJobGroups,
+      ...(callbacks.onViewItem && { onViewItem: callbacks.onViewItem })
     },
-    attrs,
     global: {
       stubs: {
         teleport: true,
+        JobDetailsPopover: JobDetailsPopoverStub,
         AssetsListItem: AssetsListItemStub
       }
     }
@@ -183,57 +168,10 @@ afterEach(() => {
 })
 
 describe('JobAssetsList', () => {
-  it('renders grouped headers alongside job rows', () => {
-    const displayedJobGroups: TestJobGroup[] = [
-      {
-        key: 'today',
-        label: 'Today',
-        items: [buildJob({ id: 'job-1' })]
-      },
-      {
-        key: 'yesterday',
-        label: 'Yesterday',
-        items: [buildJob({ id: 'job-2', title: 'Job 2' })]
-      }
-    ]
-
-    const { container } = renderJobAssetsList({ displayedJobGroups })
-
-    expect(screen.getByText('Today')).toBeTruthy()
-    expect(screen.getByText('Yesterday')).toBeTruthy()
-    expect(container.querySelector('[data-job-id="job-1"]')).not.toBeNull()
-    expect(container.querySelector('[data-job-id="job-2"]')).not.toBeNull()
-  })
-
-  it('forwards parent attrs to the scroll container', () => {
-    renderJobAssetsList({
-      attrs: {
-        class: 'min-h-0 flex-1'
-      },
-      displayedJobGroups: [
-        {
-          key: 'today',
-          label: 'Today',
-          items: [buildJob({ id: 'job-1' })]
-        }
-      ]
-    })
-
-    expect(screen.getByTestId('job-assets-list').className.split(' ')).toEqual(
-      expect.arrayContaining([
-        'min-h-0',
-        'flex-1',
-        'h-full',
-        'overflow-y-auto',
-        'pb-4'
-      ])
-    )
-  })
-
   it('emits viewItem on preview-click for completed jobs with preview', async () => {
     const job = buildJob()
     const onViewItem = vi.fn()
-    const { user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { user } = renderJobAssetsList([job], { onViewItem })
 
     await user.click(screen.getByTestId('preview-trigger'))
 
@@ -243,7 +181,7 @@ describe('JobAssetsList', () => {
   it('emits viewItem on double-click for completed jobs with preview', async () => {
     const job = buildJob()
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container, user } = renderJobAssetsList([job], { onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     await user.dblClick(stubRoot)
@@ -254,10 +192,10 @@ 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 onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container, user } = renderJobAssetsList([job], { onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     expect(stubRoot.getAttribute('data-preview-url')).toBe(
@@ -273,10 +211,10 @@ 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 onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container, user } = renderJobAssetsList([job], { onViewItem })
 
     const icon = container.querySelector('.assets-list-item-stub i')!
     await user.click(icon)
@@ -287,10 +225,10 @@ 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 onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container, user } = renderJobAssetsList([job], { onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     await user.dblClick(stubRoot)
@@ -304,7 +242,7 @@ describe('JobAssetsList', () => {
       taskRef: createTaskRef()
     })
     const onViewItem = vi.fn()
-    const { container } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container } = renderJobAssetsList([job], { onViewItem })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
     await fireEvent.mouseEnter(jobRow)
@@ -318,7 +256,7 @@ describe('JobAssetsList', () => {
   it('shows and hides the job details popover with hover delays', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
+    const { container } = renderJobAssetsList([job])
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -348,7 +286,7 @@ describe('JobAssetsList', () => {
   it('keeps the job details popover open while hovering the popover', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
+    const { container } = renderJobAssetsList([job])
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -381,7 +319,7 @@ describe('JobAssetsList', () => {
   it('positions the popover to the right of rows near the left viewport edge', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
+    const { container } = renderJobAssetsList([job])
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -406,7 +344,7 @@ describe('JobAssetsList', () => {
   it('positions the popover to the left of rows near the right viewport edge', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
+    const { container } = renderJobAssetsList([job])
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -432,9 +370,7 @@ describe('JobAssetsList', () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList({
-      jobs: [firstJob, secondJob]
-    })
+    const { container } = renderJobAssetsList([firstJob, secondJob])
 
     const firstRow = container.querySelector('[data-job-id="job-1"]')!
     const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -462,9 +398,7 @@ describe('JobAssetsList', () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList({
-      jobs: [firstJob, secondJob]
-    })
+    const { container } = renderJobAssetsList([firstJob, secondJob])
 
     const firstRow = container.querySelector('[data-job-id="job-1"]')!
     const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -495,7 +429,7 @@ describe('JobAssetsList', () => {
   it('does not show details if the hovered row disappears before the show delay ends', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container, rerender } = renderJobAssetsList({ jobs: [job] })
+    const { container, rerender } = renderJobAssetsList([job])
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 

src/components/queue/job/JobAssetsList.vue

@@ -1,92 +1,79 @@
 <template>
-  <div
-    ref="scrollContainer"
-    v-bind="$attrs"
-    data-testid="job-assets-list"
-    class="h-full overflow-y-auto pb-4"
-    @scroll="onListScroll"
-  >
-    <div :style="virtualWrapperStyle">
-      <template v-for="{ row, virtualItem } in virtualRows" :key="row.key">
-        <div
-          v-if="row.type === 'header'"
-          class="box-border px-3 pb-2 text-xs leading-none text-text-secondary"
-          :style="getVirtualRowStyle(virtualItem)"
+  <div class="flex flex-col gap-4 px-3 pb-4">
+    <div
+      v-for="group in displayedJobGroups"
+      :key="group.key"
+      class="flex flex-col gap-2"
+    >
+      <div class="text-xs leading-none text-text-secondary">
+        {{ group.label }}
+      </div>
+      <div
+        v-for="job in group.items"
+        :key="job.id"
+        :data-job-id="job.id"
+        @mouseenter="onJobEnter(job, $event)"
+        @mouseleave="onJobLeave(job.id)"
+      >
+        <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
         >
-          {{ row.label }}
-        </div>
-        <div
-          v-else-if="row.type === 'job'"
-          class="box-border px-3"
-          :style="getVirtualRowStyle(virtualItem)"
-        >
-          <div
-            :data-job-id="row.job.id"
-            class="h-12"
-            @mouseenter="onJobEnter(row.job, $event)"
-            @mouseleave="onJobLeave(row.job.id)"
-          >
-            <AssetsListItem
-              :class="
-                cn(
-                  'size-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
-                  row.job.state === 'running' && 'bg-secondary-background'
-                )
-              "
-              :preview-url="getJobPreviewUrl(row.job)"
-              :is-video-preview="isVideoPreviewJob(row.job)"
-              :preview-alt="row.job.title"
-              :icon-name="row.job.iconName ?? iconForJobState(row.job.state)"
-              :icon-class="getJobIconClass(row.job)"
-              :primary-text="row.job.title"
-              :secondary-text="row.job.meta"
-              :progress-total-percent="row.job.progressTotalPercent"
-              :progress-current-percent="row.job.progressCurrentPercent"
-              @contextmenu.prevent.stop="$emit('menu', row.job, $event)"
-              @dblclick.stop="emitViewItem(row.job)"
-              @preview-click="emitViewItem(row.job)"
-              @click.stop
+          <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)"
             >
-              <template v-if="hoveredJobId === row.job.id" #actions>
-                <Button
-                  v-if="isCancelable(row.job)"
-                  variant="destructive"
-                  size="icon"
-                  :aria-label="t('g.cancel')"
-                  @click.stop="emitCancelItem(row.job)"
-                >
-                  <i class="icon-[lucide--x] size-4" />
-                </Button>
-                <Button
-                  v-else-if="isFailedDeletable(row.job)"
-                  variant="destructive"
-                  size="icon"
-                  :aria-label="t('g.delete')"
-                  @click.stop="emitDeleteItem(row.job)"
-                >
-                  <i class="icon-[lucide--trash-2] size-4" />
-                </Button>
-                <Button
-                  v-else-if="row.job.state === 'completed'"
-                  variant="textonly"
-                  size="sm"
-                  @click.stop="emitCompletedViewItem(row.job)"
-                >
-                  {{ t('menuLabels.View') }}
-                </Button>
-                <Button
-                  variant="secondary"
-                  size="icon"
-                  :aria-label="t('g.more')"
-                  @click.stop="$emit('menu', row.job, $event)"
-                >
-                  <i class="icon-[lucide--ellipsis] size-4" />
-                </Button>
-              </template>
-            </AssetsListItem>
-          </div>
-        </div>
-      </template>
+              <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>
 
@@ -110,11 +97,8 @@
 </template>
 
 <script setup lang="ts">
-import type { VirtualItem } from '@tanstack/vue-virtual'
-import type { CSSProperties } from 'vue'
-import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useI18n } from 'vue-i18n'
-import { computed, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
@@ -126,17 +110,6 @@ import { cn } from '@/utils/tailwindUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { isActiveJobState } from '@/utils/queueUtil'
 
-import { buildVirtualJobRows } from './buildVirtualJobRows'
-import type { VirtualJobRow } from './buildVirtualJobRows'
-
-const HEADER_ROW_HEIGHT = 20
-const GROUP_ROW_GAP = 16
-const JOB_ROW_HEIGHT = 48
-
-defineOptions({
-  inheritAttrs: false
-})
-
 const { displayedJobGroups } = defineProps<{ displayedJobGroups: JobGroup[] }>()
 
 const emit = defineEmits<{
@@ -147,43 +120,9 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const scrollContainer = ref<HTMLElement | null>(null)
 const hoveredJobId = ref<string | null>(null)
 const activeRowElement = ref<HTMLElement | null>(null)
 const popoverPosition = ref<{ top: number; left: number } | null>(null)
-const flatRows = computed(() => buildVirtualJobRows(displayedJobGroups))
-const virtualizer = useVirtualizer({
-  get count(): number {
-    return flatRows.value.length
-  },
-  getItemKey(index: number) {
-    return flatRows.value[index]?.key ?? index
-  },
-  estimateSize(index: number) {
-    const row = flatRows.value[index]
-    return row ? getRowHeight(row, index, flatRows.value) : JOB_ROW_HEIGHT
-  },
-  getScrollElement() {
-    return scrollContainer.value
-  },
-  overscan: 12
-})
-const virtualRows = computed(() => {
-  const rows = flatRows.value
-  return virtualizer.value
-    .getVirtualItems()
-    .flatMap((virtualItem: VirtualItem) => {
-      const row = rows[virtualItem.index]
-      return row ? [{ row, virtualItem }] : []
-    })
-})
-const virtualWrapperStyle = computed<CSSProperties>(() => ({
-  position: 'relative',
-  width: '100%',
-  ...(flatRows.value.length > 0 && {
-    height: `${virtualizer.value.getTotalSize()}px`
-  })
-}))
 const {
   activeDetails,
   clearHoverTimers,
@@ -196,37 +135,6 @@ const {
   onReset: clearPopoverAnchor
 })
 
-function getVirtualRowStyle(virtualItem: VirtualItem): CSSProperties {
-  return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: `${virtualItem.size}px`,
-    transform: `translateY(${virtualItem.start}px)`,
-    overflowAnchor: 'none'
-  }
-}
-
-function getRowHeight(
-  row: VirtualJobRow,
-  index: number,
-  rows: VirtualJobRow[]
-): number {
-  if (row.type === 'header') {
-    return HEADER_ROW_HEIGHT
-  }
-
-  return (
-    JOB_ROW_HEIGHT + (rows[index + 1]?.type === 'header' ? GROUP_ROW_GAP : 0)
-  )
-}
-
-function onListScroll() {
-  hoveredJobId.value = null
-  resetActiveDetails()
-}
-
 function clearPopoverAnchor() {
   activeRowElement.value = null
   popoverPosition.value = null

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

@@ -1,82 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-
-import { buildVirtualJobRows } from './buildVirtualJobRows'
-
-function buildJob(id: string): JobListItem {
-  return {
-    id,
-    title: `Job ${id}`,
-    meta: 'meta',
-    state: 'completed'
-  }
-}
-
-describe('buildVirtualJobRows', () => {
-  it('flattens grouped jobs into headers and rows in display order', () => {
-    const displayedJobGroups: JobGroup[] = [
-      {
-        key: 'today',
-        label: 'Today',
-        items: [buildJob('job-1'), buildJob('job-2')]
-      },
-      {
-        key: 'yesterday',
-        label: 'Yesterday',
-        items: [buildJob('job-3')]
-      }
-    ]
-
-    expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
-      {
-        key: 'header-today',
-        type: 'header',
-        label: 'Today'
-      },
-      {
-        key: 'job-job-1',
-        type: 'job',
-        job: displayedJobGroups[0].items[0]
-      },
-      {
-        key: 'job-job-2',
-        type: 'job',
-        job: displayedJobGroups[0].items[1]
-      },
-      {
-        key: 'header-yesterday',
-        type: 'header',
-        label: 'Yesterday'
-      },
-      {
-        key: 'job-job-3',
-        type: 'job',
-        job: displayedJobGroups[1].items[0]
-      }
-    ])
-  })
-
-  it('keeps a single group flattened without extra row metadata', () => {
-    const displayedJobGroups: JobGroup[] = [
-      {
-        key: 'today',
-        label: 'Today',
-        items: [buildJob('job-1')]
-      }
-    ]
-
-    expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
-      {
-        key: 'header-today',
-        type: 'header',
-        label: 'Today'
-      },
-      {
-        key: 'job-job-1',
-        type: 'job',
-        job: displayedJobGroups[0].items[0]
-      }
-    ])
-  })
-})

src/components/queue/job/buildVirtualJobRows.ts

@@ -1,37 +0,0 @@
-import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-
-export type VirtualJobRow =
-  | {
-      key: string
-      type: 'header'
-      label: string
-    }
-  | {
-      key: string
-      type: 'job'
-      job: JobListItem
-    }
-
-export function buildVirtualJobRows(
-  displayedJobGroups: JobGroup[]
-): VirtualJobRow[] {
-  const rows: VirtualJobRow[] = []
-
-  displayedJobGroups.forEach((group) => {
-    rows.push({
-      key: `header-${group.key}`,
-      type: 'header',
-      label: group.label
-    })
-
-    group.items.forEach((job) => {
-      rows.push({
-        key: `job-${job.id}`,
-        type: 'job',
-        job
-      })
-    })
-  })
-
-  return rows
-}

src/components/queue/job/testUtils/mockTanstackVirtualizer.ts

@@ -1,33 +0,0 @@
-import { vi } from 'vitest'
-
-vi.mock('@tanstack/vue-virtual', async () => {
-  const { computed } = await import('vue')
-
-  return {
-    useVirtualizer: (options: {
-      count: number
-      estimateSize: (index: number) => number
-      getItemKey?: (index: number) => number | string
-    }) =>
-      computed(() => {
-        let start = 0
-        const items = Array.from({ length: options.count }, (_, index) => {
-          const size = options.estimateSize(index)
-          const item = {
-            key: options.getItemKey?.(index) ?? index,
-            index,
-            start,
-            size
-          }
-
-          start += size
-          return item
-        })
-
-        return {
-          getVirtualItems: () => items,
-          getTotalSize: () => start
-        }
-      })
-  }
-})

src/components/rightSidePanel/RightSidePanel.vue

@@ -303,7 +303,6 @@ function handleTitleCancel() {
             v-if="isSingleSubgraphNode"
             variant="secondary"
             size="icon"
-            data-testid="subgraph-editor-toggle"
             :class="cn(isEditingSubgraph && 'bg-secondary-background-selected')"
             @click="
               rightSidePanelStore.openPanel(

src/components/rightSidePanel/errors/TabErrors.vue

@@ -15,7 +15,6 @@
     <div
       v-if="singleRuntimeErrorCard"
       data-testid="runtime-error-panel"
-      aria-live="polite"
       class="flex min-h-0 flex-1 flex-col overflow-hidden px-4 py-3"
     >
       <div
@@ -169,15 +168,7 @@
             v-else-if="group.type === 'missing_model'"
             :missing-model-groups="missingModelGroups"
             :show-node-id-badge="showNodeIdBadge"
-            @locate-model="handleLocateAssetNode"
-          />
-
-          <!-- Missing Media -->
-          <MissingMediaCard
-            v-else-if="group.type === 'missing_media'"
-            :missing-media-groups="missingMediaGroups"
-            :show-node-id-badge="showNodeIdBadge"
-            @locate-node="handleLocateAssetNode"
+            @locate-model="handleLocateModel"
           />
         </PropertiesAccordionItem>
       </TransitionGroup>
@@ -234,7 +225,6 @@ import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
 import SwapNodesCard from '@/platform/nodeReplacement/components/SwapNodesCard.vue'
 import MissingModelCard from '@/platform/missingModel/components/MissingModelCard.vue'
-import MissingMediaCard from '@/platform/missingMedia/components/MissingMediaCard.vue'
 import { isCloud } from '@/platform/distribution/types'
 import {
   downloadModel,
@@ -271,8 +261,7 @@ const isSearching = computed(() => searchQuery.value.trim() !== '')
 const fullSizeGroupTypes = new Set([
   'missing_node',
   'swap_nodes',
-  'missing_model',
-  'missing_media'
+  'missing_model'
 ])
 function getGroupSize(group: ErrorGroup) {
   return fullSizeGroupTypes.has(group.type) ? 'lg' : 'default'
@@ -294,7 +283,6 @@ const {
   missingNodeCache,
   missingPackGroups,
   missingModelGroups,
-  missingMediaGroups,
   swapNodeGroups
 } = useErrorGroups(searchQuery, t)
 
@@ -405,7 +393,7 @@ function handleLocateMissingNode(nodeId: string) {
   focusNode(nodeId, missingNodeCache.value)
 }
 
-function handleLocateAssetNode(nodeId: string) {
+function handleLocateModel(nodeId: string) {
   focusNode(nodeId)
 }
 

src/components/rightSidePanel/errors/types.ts

@@ -25,4 +25,3 @@ export type ErrorGroup =
   | { type: 'missing_node'; title: string; priority: number }
   | { type: 'swap_nodes'; title: string; priority: number }
   | { type: 'missing_model'; title: string; priority: number }
-  | { type: 'missing_media'; title: string; priority: number }

src/components/rightSidePanel/errors/useErrorActions.ts

@@ -20,7 +20,7 @@ export function useErrorActions() {
       is_external: true,
       source: 'error_dialog'
     })
-    return commandStore.execute('Comfy.ContactSupport')
+    void commandStore.execute('Comfy.ContactSupport')
   }
 
   function findOnGitHub(errorMessage: string) {

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -4,7 +4,6 @@ import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
@@ -30,9 +29,7 @@ import type {
   MissingModelCandidate,
   MissingModelGroup
 } from '@/platform/missingModel/types'
-import type { MissingMediaGroup } from '@/platform/missingMedia/types'
 import { groupCandidatesByName } from '@/platform/missingModel/missingModelScan'
-import { groupCandidatesByMediaType } from '@/platform/missingMedia/missingMediaScan'
 import {
   isNodeExecutionId,
   compareExecutionId
@@ -242,7 +239,6 @@ export function useErrorGroups(
   const executionErrorStore = useExecutionErrorStore()
   const missingNodesStore = useMissingNodesErrorStore()
   const missingModelStore = useMissingModelStore()
-  const missingMediaStore = useMissingMediaStore()
   const canvasStore = useCanvasStore()
   const { inferPackFromNodeName } = useComfyRegistryStore()
   const collapseState = reactive<Record<string, boolean>>({})
@@ -639,27 +635,6 @@ export function useErrorGroups(
     ]
   }
 
-  const missingMediaGroups = computed<MissingMediaGroup[]>(() => {
-    const candidates = missingMediaStore.missingMediaCandidates
-    if (!candidates?.length) return []
-    return groupCandidatesByMediaType(candidates)
-  })
-
-  function buildMissingMediaGroups(): ErrorGroup[] {
-    if (!missingMediaGroups.value.length) return []
-    const totalItems = missingMediaGroups.value.reduce(
-      (count, group) => count + group.items.length,
-      0
-    )
-    return [
-      {
-        type: 'missing_media' as const,
-        title: `${t('rightSidePanel.missingMedia.missingMediaTitle')} (${totalItems})`,
-        priority: 3
-      }
-    ]
-  }
-
   const allErrorGroups = computed<ErrorGroup[]>(() => {
     const groupsMap = new Map<string, GroupEntry>()
 
@@ -670,7 +645,6 @@ export function useErrorGroups(
     return [
       ...buildMissingNodeGroups(),
       ...buildMissingModelGroups(),
-      ...buildMissingMediaGroups(),
       ...toSortedGroups(groupsMap)
     ]
   })
@@ -689,7 +663,6 @@ export function useErrorGroups(
     return [
       ...buildMissingNodeGroups(),
       ...buildMissingModelGroups(),
-      ...buildMissingMediaGroups(),
       ...executionGroups
     ]
   })
@@ -726,7 +699,6 @@ export function useErrorGroups(
     groupedErrorMessages,
     missingPackGroups,
     missingModelGroups,
-    missingMediaGroups,
     swapNodeGroups
   }
 }

src/components/rightSidePanel/errors/useErrorReport.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, toValue, watch } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, toValue } from 'vue'
 
 import type { MaybeRefOrGetter } from 'vue'
 
@@ -28,73 +28,66 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
     )
   })
 
-  watch(
-    () => toValue(cardSource),
-    async (card, _, onCleanup) => {
-      let cancelled = false
-      onCleanup(() => {
-        cancelled = true
-      })
+  let cancelled = false
+  onUnmounted(() => {
+    cancelled = true
+  })
 
-      for (const key of Object.keys(enrichedDetails)) {
-        delete enrichedDetails[key as unknown as number]
-      }
+  onMounted(async () => {
+    const card = toValue(cardSource)
+    const runtimeErrors = card.errors
+      .map((error, idx) => ({ error, idx }))
+      .filter(({ error }) => error.isRuntimeError)
 
-      const runtimeErrors = card.errors
-        .map((error, idx) => ({ error, idx }))
-        .filter(({ error }) => error.isRuntimeError)
+    if (runtimeErrors.length === 0) return
 
-      if (runtimeErrors.length === 0) return
-
-      if (!systemStatsStore.systemStats) {
-        if (systemStatsStore.isLoading) {
-          await until(() => systemStatsStore.isLoading).toBe(false)
-        } else {
-          try {
-            await systemStatsStore.refetchSystemStats()
-          } catch (e) {
-            console.warn('Failed to fetch system stats for error report:', e)
-            return
-          }
-        }
-      }
-      if (!systemStatsStore.systemStats || cancelled) return
-
-      const logs = await api
-        .getLogs()
-        .catch(() => 'Failed to retrieve server logs')
-      if (cancelled) return
-
-      const workflow = (() => {
+    if (!systemStatsStore.systemStats) {
+      if (systemStatsStore.isLoading) {
+        await until(systemStatsStore.isLoading).toBe(false)
+      } else {
         try {
-          return app.rootGraph.serialize()
+          await systemStatsStore.refetchSystemStats()
         } catch (e) {
-          console.warn('Failed to serialize workflow for error report:', e)
-          return null
-        }
-      })()
-      if (!workflow) return
-
-      for (const { error, idx } of runtimeErrors) {
-        try {
-          const report = generateErrorReport({
-            exceptionType: error.exceptionType ?? FALLBACK_EXCEPTION_TYPE,
-            exceptionMessage: error.message,
-            traceback: error.details,
-            nodeId: card.nodeId,
-            nodeType: card.title,
-            systemStats: systemStatsStore.systemStats,
-            serverLogs: logs,
-            workflow
-          })
-          enrichedDetails[idx] = report
-        } catch (e) {
-          console.warn('Failed to generate error report:', e)
+          console.warn('Failed to fetch system stats for error report:', e)
+          return
         }
       }
-    },
-    { immediate: true }
-  )
+    }
+    if (!systemStatsStore.systemStats || cancelled) return
+
+    const logs = await api
+      .getLogs()
+      .catch(() => 'Failed to retrieve server logs')
+    if (cancelled) return
+
+    const workflow = (() => {
+      try {
+        return app.rootGraph.serialize()
+      } catch (e) {
+        console.warn('Failed to serialize workflow for error report:', e)
+        return null
+      }
+    })()
+    if (!workflow) return
+
+    for (const { error, idx } of runtimeErrors) {
+      try {
+        const report = generateErrorReport({
+          exceptionType: error.exceptionType ?? FALLBACK_EXCEPTION_TYPE,
+          exceptionMessage: error.message,
+          traceback: error.details,
+          nodeId: card.nodeId,
+          nodeType: card.title,
+          systemStats: systemStatsStore.systemStats,
+          serverLogs: logs,
+          workflow
+        })
+        enrichedDetails[idx] = report
+      } catch (e) {
+        console.warn('Failed to generate error report:', e)
+      }
+    }
+  })
 
   return { displayedDetailsMap }
 }

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import { getSourceNodeId } from '@/core/graph/subgraph/promotionUtils'
 import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { usePromotionStore } from '@/stores/promotionStore'
@@ -78,6 +79,7 @@ function isWidgetShownOnParents(
 ): boolean {
   return parents.some((parent) => {
     if (isPromotedWidgetView(widget)) {
+      const sourceNodeId = getSourceNodeId(widget)
       const interiorNodeId =
         String(widgetNode.id) === String(parent.id)
           ? widget.sourceNodeId
@@ -86,7 +88,7 @@ function isWidgetShownOnParents(
       return promotionStore.isPromoted(parent.rootGraph.id, parent.id, {
         sourceNodeId: interiorNodeId,
         sourceWidgetName: widget.sourceWidgetName,
-        disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
+        disambiguatingSourceNodeId: sourceNodeId
       })
     }
     return promotionStore.isPromoted(parent.rootGraph.id, parent.id, {

src/components/rightSidePanel/parameters/TabSubgraphInputs.vue

@@ -14,7 +14,10 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import { getWidgetName } from '@/core/graph/subgraph/promotionUtils'
+import {
+  getSourceNodeId,
+  getWidgetName
+} from '@/core/graph/subgraph/promotionUtils'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
@@ -129,9 +132,7 @@ const advancedInputsWidgets = computed((): NodeWidgetsList => {
       !promotionStore.isPromoted(node.rootGraph.id, node.id, {
         sourceNodeId: String(interiorNode.id),
         sourceWidgetName: getWidgetName(widget),
-        disambiguatingSourceNodeId: isPromotedWidgetView(widget)
-          ? widget.disambiguatingSourceNodeId
-          : undefined
+        disambiguatingSourceNodeId: getSourceNodeId(widget)
       })
   )
 })

src/components/rightSidePanel/parameters/WidgetActions.test.ts

@@ -98,8 +98,7 @@ describe('WidgetActions', () => {
       type: 'TestNode',
       rootGraph: { id: 'graph-test' },
       computeSize: vi.fn(),
-      size: [200, 100],
-      isSubgraphNode: () => false
+      size: [200, 100]
     })
   }
 
@@ -226,8 +225,7 @@ describe('WidgetActions', () => {
     const node = fromAny<LGraphNode, unknown>({
       id: 4,
       type: 'SubgraphNode',
-      rootGraph: { id: 'graph-test' },
-      isSubgraphNode: () => false
+      rootGraph: { id: 'graph-test' }
     })
     const widget = {
       name: 'text',

src/components/rightSidePanel/parameters/WidgetActions.vue

@@ -9,7 +9,7 @@ import type { PromotedWidgetSource } from '@/core/graph/subgraph/promotedWidgetT
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import {
   demoteWidget,
-  isLinkedPromotion,
+  getSourceNodeId,
   promoteWidget
 } from '@/core/graph/subgraph/promotionUtils'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -47,11 +47,6 @@ const promotionStore = usePromotionStore()
 const { t } = useI18n()
 
 const hasParents = computed(() => parents?.length > 0)
-const isLinked = computed(() => {
-  if (!node.isSubgraphNode() || !isPromotedWidgetView(widget)) return false
-  return isLinkedPromotion(node, widget.sourceNodeId, widget.sourceWidgetName)
-})
-const canToggleVisibility = computed(() => hasParents.value && !isLinked.value)
 const favoriteNode = computed(() =>
   isShownOnParents && hasParents.value ? parents[0] : node
 )
@@ -81,6 +76,8 @@ function handleHideInput() {
   if (!parents?.length) return
 
   if (isPromotedWidgetView(widget)) {
+    const disambiguatingSourceNodeId = getSourceNodeId(widget)
+
     for (const parent of parents) {
       const source: PromotedWidgetSource = {
         sourceNodeId:
@@ -88,7 +85,7 @@ function handleHideInput() {
             ? widget.sourceNodeId
             : String(node.id),
         sourceWidgetName: widget.sourceWidgetName,
-        disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
+        disambiguatingSourceNodeId
       }
       promotionStore.demote(parent.rootGraph.id, parent.id, source)
       parent.computeSize(parent.size)
@@ -117,7 +114,6 @@ function handleResetToDefault() {
 <template>
   <MoreButton
     is-vertical
-    data-testid="widget-actions-menu-button"
     class="bg-transparent text-muted-foreground transition-all hover:bg-secondary-background-hover hover:text-base-foreground active:scale-95"
   >
     <template #default="{ close }">
@@ -137,7 +133,7 @@ function handleResetToDefault() {
       </Button>
 
       <Button
-        v-if="canToggleVisibility"
+        v-if="hasParents"
         variant="textonly"
         size="unset"
         class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -11,7 +11,6 @@ import {
   getPromotableWidgets,
   getSourceNodeId,
   getWidgetName,
-  isLinkedPromotion,
   isRecommendedWidget,
   promoteWidget,
   pruneDisconnected
@@ -89,13 +88,14 @@ const activeWidgets = computed<WidgetItem[]>({
     promotionStore.setPromotions(
       node.rootGraph.id,
       node.id,
-      value.map(([n, w]) => ({
-        sourceNodeId: String(n.id),
-        sourceWidgetName: getWidgetName(w),
-        disambiguatingSourceNodeId: isPromotedWidgetView(w)
-          ? w.disambiguatingSourceNodeId
-          : undefined
-      }))
+      value.map(([n, w]) => {
+        const sid = getSourceNodeId(w)
+        return {
+          sourceNodeId: String(n.id),
+          sourceWidgetName: getWidgetName(w),
+          ...(sid && { disambiguatingSourceNodeId: sid })
+        }
+      })
     )
     refreshPromotedWidgetRendering()
   }
@@ -123,9 +123,7 @@ const candidateWidgets = computed<WidgetItem[]>(() => {
       !promotionStore.isPromoted(node.rootGraph.id, node.id, {
         sourceNodeId: String(n.id),
         sourceWidgetName: getWidgetName(w),
-        disambiguatingSourceNodeId: isPromotedWidgetView(w)
-          ? w.disambiguatingSourceNodeId
-          : undefined
+        disambiguatingSourceNodeId: getSourceNodeId(w)
       })
   )
 })
@@ -164,18 +162,6 @@ function refreshPromotedWidgetRendering() {
   canvasStore.canvas?.setDirty(true, true)
 }
 
-function isItemLinked([node, widget]: WidgetItem): boolean {
-  return (
-    node.id === -1 ||
-    (!!activeNode.value &&
-      isLinkedPromotion(
-        activeNode.value,
-        String(node.id),
-        getWidgetName(widget)
-      ))
-  )
-}
-
 function toKey(item: WidgetItem) {
   const sid = getSourceNodeId(item[1])
   return sid
@@ -201,14 +187,8 @@ function showAll() {
   }
 }
 function hideAll() {
-  const node = activeNode.value
   for (const item of filteredActive.value) {
     if (String(item[0].id) === '-1') continue
-    if (
-      node &&
-      isLinkedPromotion(node, String(item[0].id), getWidgetName(item[1]))
-    )
-      continue
     demote(item)
   }
 }
@@ -243,7 +223,6 @@ onMounted(() => {
 
       <div
         v-if="filteredActive.length"
-        data-testid="subgraph-editor-shown-section"
         class="flex flex-col border-b border-interface-stroke"
       >
         <div
@@ -265,8 +244,8 @@ onMounted(() => {
             :key="toKey([node, widget])"
             :class="cn(!searchQuery && dragClass, 'bg-comfy-menu-bg')"
             :node-title="node.title"
-            :widget-name="widget.label || widget.name"
-            :is-physical="isItemLinked([node, widget])"
+            :widget-name="widget.name"
+            :is-physical="node.id === -1"
             :is-draggable="!searchQuery"
             @toggle-visibility="demote([node, widget])"
           />
@@ -275,7 +254,6 @@ onMounted(() => {
 
       <div
         v-if="filteredCandidates.length"
-        data-testid="subgraph-editor-hidden-section"
         class="flex flex-col border-b border-interface-stroke"
       >
         <div

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 import type { ClassValue } from '@/utils/tailwindUtil'
 
-const {
-  nodeTitle,
-  widgetName,
-  isDraggable = false,
-  isPhysical = false,
-  class: className
-} = defineProps<{
+const props = defineProps<{
   nodeTitle: string
   widgetName: string
   isDraggable?: boolean
@@ -22,13 +14,13 @@ defineEmits<{
   (e: 'toggleVisibility'): void
 }>()
 
-const icon = computed(() =>
-  isPhysical
+function getIcon() {
+  return props.isPhysical
     ? 'icon-[lucide--link]'
-    : isDraggable
+    : props.isDraggable
       ? 'icon-[lucide--eye]'
       : 'icon-[lucide--eye-off]'
-)
+}
 </script>
 
 <template>
@@ -37,8 +29,8 @@ const icon = computed(() =>
       cn(
         'flex items-center gap-1 rounded-sm px-2 py-1 break-all',
         'bg-node-component-surface',
-        isDraggable && 'ring-accent-background hover:ring-1',
-        className
+        props.isDraggable && 'ring-accent-background hover:ring-1',
+        props.class
       )
     "
   >
@@ -46,18 +38,15 @@ const icon = computed(() =>
       <div class="line-clamp-1 text-xs text-text-secondary">
         {{ nodeTitle }}
       </div>
-      <div class="line-clamp-1 text-sm/8" data-testid="subgraph-widget-label">
-        {{ widgetName }}
-      </div>
+      <div class="line-clamp-1 text-sm/8">{{ widgetName }}</div>
     </div>
     <Button
       variant="muted-textonly"
       size="sm"
-      data-testid="subgraph-widget-toggle"
       :disabled="isPhysical"
       @click.stop="$emit('toggleVisibility')"
     >
-      <i :class="icon" :data-testid="isPhysical ? 'icon-link' : 'icon-eye'" />
+      <i :class="getIcon()" />
     </Button>
     <div
       v-if="isDraggable"

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

@@ -0,0 +1,163 @@
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+
+import JobHistorySidebarTab from './JobHistorySidebarTab.vue'
+
+const JobDetailsPopoverStub = defineComponent({
+  name: 'JobDetailsPopover',
+  props: {
+    jobId: { type: String, required: true },
+    workflowId: { type: String, default: undefined }
+  },
+  template: '<div class="job-details-popover-stub" />'
+})
+
+vi.mock('@/composables/queue/useJobList', async () => {
+  const { ref } = await import('vue')
+  const jobHistoryItem = {
+    id: 'job-1',
+    title: 'Job 1',
+    meta: 'meta',
+    state: 'completed',
+    taskRef: {
+      workflowId: 'workflow-1',
+      previewOutput: {
+        isImage: true,
+        isVideo: false,
+        url: '/api/view/job-1.png'
+      }
+    }
+  }
+
+  return {
+    useJobList: () => ({
+      selectedJobTab: ref('All'),
+      selectedWorkflowFilter: ref('all'),
+      selectedSortMode: ref('mostRecent'),
+      searchQuery: ref(''),
+      hasFailedJobs: ref(false),
+      filteredTasks: ref([]),
+      groupedJobItems: ref([
+        {
+          key: 'group-1',
+          label: 'Group 1',
+          items: [jobHistoryItem]
+        }
+      ])
+    })
+  }
+})
+
+vi.mock('@/composables/queue/useJobMenu', () => ({
+  useJobMenu: () => ({
+    jobMenuEntries: [],
+    cancelJob: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/queue/useQueueClearHistoryDialog', () => ({
+  useQueueClearHistoryDialog: () => ({
+    showQueueClearHistoryDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/queue/useResultGallery', async () => {
+  const { ref } = await import('vue')
+  return {
+    useResultGallery: () => ({
+      galleryActiveIndex: ref(-1),
+      galleryItems: ref([]),
+      onViewItem: vi.fn()
+    })
+  }
+})
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    wrapWithErrorHandlingAsync: <T extends (...args: never[]) => unknown>(
+      fn: T
+    ) => fn
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    showDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/executionStore', () => ({
+  useExecutionStore: () => ({
+    clearInitializationByJobIds: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/queueStore', () => ({
+  useQueueStore: () => ({
+    runningTasks: [],
+    pendingTasks: [],
+    delete: vi.fn()
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+const SidebarTabTemplateStub = {
+  name: 'SidebarTabTemplate',
+  props: ['title'],
+  template:
+    '<div><slot name="alt-title" /><slot name="header" /><slot name="body" /></div>'
+}
+
+function mountComponent() {
+  return mount(JobHistorySidebarTab, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        SidebarTabTemplate: SidebarTabTemplateStub,
+        JobFilterTabs: true,
+        JobFilterActions: true,
+        JobHistoryActionsMenu: true,
+        JobContextMenu: true,
+        ResultGallery: true,
+        teleport: true,
+        JobDetailsPopover: JobDetailsPopoverStub
+      }
+    }
+  })
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('JobHistorySidebarTab', () => {
+  it('shows the job details popover for jobs in the history panel', async () => {
+    vi.useFakeTimers()
+    const wrapper = mountComponent()
+    const jobRow = wrapper.find('[data-job-id="job-1"]')
+
+    await jobRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+
+    const popover = wrapper.findComponent(JobDetailsPopoverStub)
+    expect(popover.exists()).toBe(true)
+    expect(popover.props()).toMatchObject({
+      jobId: 'job-1',
+      workflowId: 'workflow-1'
+    })
+  })
+})

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -46,25 +46,22 @@
       </div>
     </template>
     <template #body>
-      <div class="flex h-full min-h-0 flex-col">
-        <JobAssetsList
-          class="min-h-0 flex-1"
-          :displayed-job-groups="displayedJobGroups"
-          @cancel-item="onCancelItem"
-          @delete-item="onDeleteItem"
-          @view-item="onViewItem"
-          @menu="onMenuItem"
-        />
-        <JobContextMenu
-          ref="jobContextMenuRef"
-          :entries="jobMenuEntries"
-          @action="onJobMenuAction"
-        />
-        <MediaLightbox
-          v-model:active-index="galleryActiveIndex"
-          :all-gallery-items="galleryItems"
-        />
-      </div>
+      <JobAssetsList
+        :displayed-job-groups="displayedJobGroups"
+        @cancel-item="onCancelItem"
+        @delete-item="onDeleteItem"
+        @view-item="onViewItem"
+        @menu="onMenuItem"
+      />
+      <JobContextMenu
+        ref="jobContextMenuRef"
+        :entries="jobMenuEntries"
+        @action="onJobMenuAction"
+      />
+      <MediaLightbox
+        v-model:active-index="galleryActiveIndex"
+        :all-gallery-items="galleryItems"
+      />
     </template>
   </SidebarTabTemplate>
 </template>

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

@@ -12,6 +12,7 @@
       :root="favoritesRoot"
       show-context-menu
       @node-click="(node) => emit('nodeClick', node)"
+      @add-to-favorites="handleAddToFavorites"
     />
     <div v-else class="px-6 py-2 text-xs text-muted-background">
       {{ $t('sideToolbar.nodeLibraryTab.noBookmarkedNodes') }}
@@ -30,6 +31,7 @@
         :root="section.root"
         show-context-menu
         @node-click="(node) => emit('nodeClick', node)"
+        @add-to-favorites="handleAddToFavorites"
       />
     </div>
   </div>
@@ -69,4 +71,12 @@ const hasFavorites = computed(
 const favoritesRoot = computed(() =>
   fillNodeInfo(nodeBookmarkStore.bookmarkedRoot)
 )
+
+function handleAddToFavorites(
+  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+) {
+  if (node.data) {
+    nodeBookmarkStore.toggleBookmark(node.data)
+  }
+}
 </script>

src/composables/graph/useNodeErrorFlagSync.ts

@@ -3,7 +3,6 @@ import { computed, watch } from 'vue'
 
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import type { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import type { NodeError } from '@/schemas/apiSchema'
@@ -33,8 +32,7 @@ function setNodeHasErrors(node: LGraphNode, hasErrors: boolean): void {
 function reconcileNodeErrorFlags(
   rootGraph: LGraph,
   nodeErrors: Record<string, NodeError> | null,
-  missingModelExecIds: Set<string>,
-  missingMediaExecIds: Set<string> = new Set()
+  missingModelExecIds: Set<string>
 ): void {
   // Collect nodes and slot info that should be flagged
   // Includes both error-owning nodes and their ancestor containers
@@ -66,11 +64,6 @@ function reconcileNodeErrorFlags(
     if (node) flaggedNodes.add(node)
   }
 
-  for (const execId of missingMediaExecIds) {
-    const node = getNodeByExecutionId(rootGraph, execId)
-    if (node) flaggedNodes.add(node)
-  }
-
   forEachNode(rootGraph, (node) => {
     setNodeHasErrors(node, flaggedNodes.has(node))
 
@@ -85,8 +78,7 @@ function reconcileNodeErrorFlags(
 
 export function useNodeErrorFlagSync(
   lastNodeErrors: Ref<Record<string, NodeError> | null>,
-  missingModelStore: ReturnType<typeof useMissingModelStore>,
-  missingMediaStore: ReturnType<typeof useMissingMediaStore>
+  missingModelStore: ReturnType<typeof useMissingModelStore>
 ): () => void {
   const settingStore = useSettingStore()
   const showErrorsTab = computed(() =>
@@ -97,13 +89,12 @@ export function useNodeErrorFlagSync(
     [
       lastNodeErrors,
       () => missingModelStore.missingModelNodeIds,
-      () => missingMediaStore.missingMediaNodeIds,
       showErrorsTab
     ],
     () => {
       if (!app.isGraphReady) return
-      // Legacy (LGraphNode) only: suppress missing-model/media error flags
-      // when the Errors tab is hidden, since legacy nodes lack the per-widget
+      // Legacy (LGraphNode) only: suppress missing-model error flags when
+      // the Errors tab is hidden, since legacy nodes lack the per-widget
       // red highlight that Vue nodes use to indicate *why* a node has errors.
       // Vue nodes compute hasAnyError independently and are unaffected.
       reconcileNodeErrorFlags(
@@ -111,9 +102,6 @@ export function useNodeErrorFlagSync(
         lastNodeErrors.value,
         showErrorsTab.value
           ? missingModelStore.missingModelAncestorExecutionIds
-          : new Set(),
-        showErrorsTab.value
-          ? missingMediaStore.missingMediaAncestorExecutionIds
           : new Set()
       )
     },

src/core/graph/subgraph/matchPromotedInput.test.ts

@@ -1,4 +1,4 @@
-import { fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
@@ -31,11 +31,12 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      fromPartial<
+      fromAny<
         Array<{
           name: string
           _widget?: IBaseWidget
-        }>
+        }>,
+        unknown
       >([aliasInput, exactInput]),
       targetWidget
     )
@@ -50,7 +51,9 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      fromPartial<Array<{ name: string; _widget?: IBaseWidget }>>([aliasInput]),
+      fromAny<Array<{ name: string; _widget?: IBaseWidget }>, unknown>([
+        aliasInput
+      ]),
       targetWidget
     )
 
@@ -67,11 +70,12 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      fromPartial<
+      fromAny<
         Array<{
           name: string
           _widget?: IBaseWidget
-        }>
+        }>,
+        unknown
       >([firstAliasInput, secondAliasInput]),
       targetWidget
     )

src/core/graph/subgraph/promotedWidgetView.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
-import { fromAny, fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 
 // Barrel import must come first to avoid circular dependency
 // (promotedWidgetView → widgetMap → BaseWidget → LegacyWidget → barrel)
@@ -293,7 +293,7 @@ describe(createPromotedWidgetView, () => {
       value: 'initial',
       options: {}
     } satisfies Pick<IBaseWidget, 'name' | 'type' | 'value' | 'options'>
-    const fallbackWidget = fromPartial<IBaseWidget>(fallbackWidgetShape)
+    const fallbackWidget = fromAny<IBaseWidget, unknown>(fallbackWidgetShape)
     innerNode.widgets = [fallbackWidget]
 
     const widgetValueStore = useWidgetValueStore()

src/core/graph/subgraph/promotionUtils.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -20,7 +20,6 @@ import {
   CANVAS_IMAGE_PREVIEW_WIDGET,
   getPromotableWidgets,
   hasUnpromotedWidgets,
-  isLinkedPromotion,
   isPreviewPseudoWidget,
   promoteRecommendedWidgets,
   pruneDisconnected
@@ -31,7 +30,7 @@ function widget(
     Pick<IBaseWidget, 'name' | 'serialize' | 'type' | 'options'>
   >
 ): IBaseWidget {
-  return fromPartial<IBaseWidget>({ name: 'widget', ...overrides })
+  return fromAny<IBaseWidget, unknown>({ name: 'widget', ...overrides })
 }
 
 describe('isPreviewPseudoWidget', () => {
@@ -335,84 +334,3 @@ describe('hasUnpromotedWidgets', () => {
     expect(hasUnpromotedWidgets(subgraphNode)).toBe(false)
   })
 })
-
-describe('isLinkedPromotion', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-  })
-
-  function linkedWidget(
-    sourceNodeId: string,
-    sourceWidgetName: string,
-    extra: Record<string, unknown> = {}
-  ): IBaseWidget {
-    return {
-      sourceNodeId,
-      sourceWidgetName,
-      name: 'value',
-      type: 'text',
-      value: '',
-      options: {},
-      y: 0,
-      ...extra
-    } as unknown as IBaseWidget
-  }
-
-  function createSubgraphWithInputs(count = 1) {
-    const subgraph = createTestSubgraph({
-      inputs: Array.from({ length: count }, (_, i) => ({
-        name: `input_${i}`,
-        type: 'STRING' as const
-      }))
-    })
-    return createTestSubgraphNode(subgraph)
-  }
-
-  it('returns true when an input has a matching _widget', () => {
-    const subgraphNode = createSubgraphWithInputs()
-    subgraphNode.inputs[0]._widget = linkedWidget('3', 'text')
-
-    expect(isLinkedPromotion(subgraphNode, '3', 'text')).toBe(true)
-  })
-
-  it('returns false when no inputs exist or none match', () => {
-    const subgraph = createTestSubgraph()
-    const subgraphNode = createTestSubgraphNode(subgraph)
-
-    expect(isLinkedPromotion(subgraphNode, '999', 'nonexistent')).toBe(false)
-  })
-
-  it('returns false when sourceNodeId matches but sourceWidgetName does not', () => {
-    const subgraphNode = createSubgraphWithInputs()
-    subgraphNode.inputs[0]._widget = linkedWidget('3', 'text')
-
-    expect(isLinkedPromotion(subgraphNode, '3', 'wrong_name')).toBe(false)
-  })
-
-  it('returns false when _widget is undefined on input', () => {
-    const subgraphNode = createSubgraphWithInputs()
-
-    expect(isLinkedPromotion(subgraphNode, '3', 'text')).toBe(false)
-  })
-
-  it('matches by sourceNodeId even when disambiguatingSourceNodeId is present', () => {
-    const subgraphNode = createSubgraphWithInputs()
-    subgraphNode.inputs[0]._widget = linkedWidget('6', 'text', {
-      disambiguatingSourceNodeId: '1'
-    })
-
-    expect(isLinkedPromotion(subgraphNode, '6', 'text')).toBe(true)
-    expect(isLinkedPromotion(subgraphNode, '1', 'text')).toBe(false)
-  })
-
-  it('identifies multiple linked widgets across different inputs', () => {
-    const subgraphNode = createSubgraphWithInputs(2)
-    subgraphNode.inputs[0]._widget = linkedWidget('3', 'string_a')
-    subgraphNode.inputs[1]._widget = linkedWidget('4', 'value')
-
-    expect(isLinkedPromotion(subgraphNode, '3', 'string_a')).toBe(true)
-    expect(isLinkedPromotion(subgraphNode, '4', 'value')).toBe(true)
-    expect(isLinkedPromotion(subgraphNode, '3', 'value')).toBe(false)
-    expect(isLinkedPromotion(subgraphNode, '5', 'string_a')).toBe(false)
-  })
-})

src/core/graph/subgraph/promotionUtils.ts

@@ -27,27 +27,6 @@ export function getWidgetName(w: IBaseWidget): string {
   return isPromotedWidgetView(w) ? w.sourceWidgetName : w.name
 }
 
-/**
- * Returns true if the given promotion entry corresponds to a linked promotion
- * on the subgraph node. Linked promotions are driven by subgraph input
- * connections and cannot be independently hidden or shown.
- */
-export function isLinkedPromotion(
-  subgraphNode: SubgraphNode,
-  sourceNodeId: string,
-  sourceWidgetName: string
-): boolean {
-  return subgraphNode.inputs.some((input) => {
-    const w = input._widget
-    return (
-      w &&
-      isPromotedWidgetView(w) &&
-      w.sourceNodeId === sourceNodeId &&
-      w.sourceWidgetName === sourceWidgetName
-    )
-  })
-}
-
 export function getSourceNodeId(w: IBaseWidget): string | undefined {
   if (!isPromotedWidgetView(w)) return undefined
   return w.disambiguatingSourceNodeId ?? w.sourceNodeId
@@ -60,9 +39,7 @@ function toPromotionSource(
   return {
     sourceNodeId: String(node.id),
     sourceWidgetName: getWidgetName(widget),
-    disambiguatingSourceNodeId: isPromotedWidgetView(widget)
-      ? widget.disambiguatingSourceNodeId
-      : undefined
+    disambiguatingSourceNodeId: getSourceNodeId(widget)
   }
 }
 

src/locales/en/main.json

@@ -3528,23 +3528,6 @@
       "missingModelsTitle": "Missing Models",
       "assetLoadTimeout": "Model detection timed out. Try reloading the workflow.",
       "downloadAll": "Download all"
-    },
-    "missingMedia": {
-      "missingMediaTitle": "Missing Inputs",
-      "image": "Images",
-      "video": "Videos",
-      "audio": "Audio",
-      "locateNode": "Locate node",
-      "expandNodes": "Show referencing nodes",
-      "collapseNodes": "Hide referencing nodes",
-      "uploadFile": "Upload {type}",
-      "uploading": "Uploading...",
-      "uploaded": "Uploaded",
-      "selectedFromLibrary": "Selected from library",
-      "useFromLibrary": "Use from Library",
-      "confirmSelection": "Confirm selection",
-      "cancelSelection": "Cancel selection",
-      "or": "OR"
     }
   },
   "errorOverlay": {

src/platform/missingMedia/components/MissingMediaCard.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="px-4 pb-2">
-    <div
-      v-for="group in missingMediaGroups"
-      :key="group.mediaType"
-      class="flex w-full flex-col border-t border-interface-stroke py-2 first:border-t-0 first:pt-0"
-    >
-      <!-- Media type header -->
-      <div class="flex h-8 w-full items-center">
-        <p
-          class="min-w-0 flex-1 truncate text-sm font-medium text-destructive-background-hover"
-        >
-          <i
-            aria-hidden="true"
-            :class="MEDIA_TYPE_ICONS[group.mediaType]"
-            class="mr-1 size-3.5 align-text-bottom"
-          />
-          {{ t(`rightSidePanel.missingMedia.${group.mediaType}`) }}
-          ({{ group.items.length }})
-        </p>
-      </div>
-
-      <!-- Media file rows -->
-      <div class="flex flex-col gap-1 overflow-hidden pl-2">
-        <MissingMediaRow
-          v-for="item in group.items"
-          :key="item.name"
-          :item="item"
-          :show-node-id-badge="showNodeIdBadge"
-          @locate-node="emit('locateNode', $event)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import type {
-  MissingMediaGroup,
-  MediaType
-} from '@/platform/missingMedia/types'
-import MissingMediaRow from '@/platform/missingMedia/components/MissingMediaRow.vue'
-
-const { missingMediaGroups } = defineProps<{
-  missingMediaGroups: MissingMediaGroup[]
-  showNodeIdBadge: boolean
-}>()
-
-const emit = defineEmits<{
-  locateNode: [nodeId: string]
-}>()
-
-const { t } = useI18n()
-
-const MEDIA_TYPE_ICONS: Record<MediaType, string> = {
-  image: 'icon-[lucide--image]',
-  video: 'icon-[lucide--video]',
-  audio: 'icon-[lucide--music]'
-}
-</script>

src/platform/missingMedia/components/MissingMediaLibrarySelect.vue

@@ -1,147 +0,0 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <div v-if="showDivider" class="flex items-center justify-center py-0.5">
-      <span class="text-xs font-bold text-muted-foreground">
-        {{ t('rightSidePanel.missingMedia.or') }}
-      </span>
-    </div>
-
-    <Select
-      :model-value="modelValue"
-      :disabled="options.length === 0"
-      @update:model-value="handleSelect"
-    >
-      <SelectTrigger
-        size="md"
-        class="border-transparent bg-secondary-background text-xs hover:border-interface-stroke"
-      >
-        <SelectValue
-          :placeholder="t('rightSidePanel.missingMedia.useFromLibrary')"
-        />
-      </SelectTrigger>
-
-      <SelectContent class="max-h-72">
-        <template v-if="options.length > SEARCH_THRESHOLD" #prepend>
-          <div class="px-1 pb-1.5">
-            <div
-              class="flex items-center gap-1.5 rounded-md border border-border-default px-2"
-            >
-              <i
-                aria-hidden="true"
-                class="icon-[lucide--search] size-3.5 shrink-0 text-muted-foreground"
-              />
-              <input
-                v-model="filterQuery"
-                type="text"
-                :aria-label="t('g.searchPlaceholder', { subject: '' })"
-                class="h-7 w-full border-none bg-transparent text-xs outline-none placeholder:text-muted-foreground"
-                :placeholder="t('g.searchPlaceholder', { subject: '' })"
-                @keydown.stop
-              />
-            </div>
-          </div>
-        </template>
-
-        <SelectItem
-          v-for="option in filteredOptions"
-          :key="option.value"
-          :value="option.value"
-          class="text-xs"
-        >
-          <div class="flex items-center gap-2">
-            <img
-              v-if="mediaType === 'image'"
-              :src="getPreviewUrl(option.value)"
-              alt=""
-              class="size-8 shrink-0 rounded-sm object-cover"
-              loading="lazy"
-            />
-            <video
-              v-else-if="mediaType === 'video'"
-              aria-hidden="true"
-              :src="getPreviewUrl(option.value)"
-              class="size-8 shrink-0 rounded-sm object-cover"
-              preload="metadata"
-              muted
-            />
-            <i
-              v-else
-              aria-hidden="true"
-              class="icon-[lucide--music] size-5 shrink-0 text-muted-foreground"
-            />
-            <span class="min-w-0 truncate">{{ option.name }}</span>
-          </div>
-        </SelectItem>
-        <div
-          v-if="filteredOptions.length === 0"
-          role="status"
-          class="px-3 py-2 text-xs text-muted-foreground"
-        >
-          {{ t('g.noResultsFound') }}
-        </div>
-      </SelectContent>
-    </Select>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useFuse } from '@vueuse/integrations/useFuse'
-import Select from '@/components/ui/select/Select.vue'
-import SelectContent from '@/components/ui/select/SelectContent.vue'
-import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
-import SelectValue from '@/components/ui/select/SelectValue.vue'
-import SelectItem from '@/components/ui/select/SelectItem.vue'
-import type { MediaType } from '@/platform/missingMedia/types'
-import { api } from '@/scripts/api'
-
-const {
-  options,
-  showDivider = false,
-  mediaType
-} = defineProps<{
-  modelValue: string | undefined
-  options: { name: string; value: string }[]
-  showDivider?: boolean
-  mediaType: MediaType
-}>()
-
-const emit = defineEmits<{
-  select: [value: string]
-}>()
-
-const { t } = useI18n()
-
-const SEARCH_THRESHOLD = 4
-const filterQuery = ref('')
-
-watch(
-  () => options.length,
-  (len) => {
-    if (len <= SEARCH_THRESHOLD) filterQuery.value = ''
-  }
-)
-
-const { results: fuseResults } = useFuse(filterQuery, () => options, {
-  fuseOptions: {
-    keys: ['name'],
-    threshold: 0.4,
-    ignoreLocation: true
-  },
-  matchAllWhenSearchEmpty: true
-})
-
-const filteredOptions = computed(() => fuseResults.value.map((r) => r.item))
-
-function getPreviewUrl(filename: string): string {
-  return api.apiURL(`/view?filename=${encodeURIComponent(filename)}&type=input`)
-}
-
-function handleSelect(value: unknown) {
-  if (typeof value === 'string') {
-    filterQuery.value = ''
-    emit('select', value)
-  }
-}
-</script>

src/platform/missingMedia/components/MissingMediaRow.vue

@@ -1,318 +0,0 @@
-<template>
-  <div data-testid="missing-media-row" class="flex w-full flex-col pb-3">
-    <!-- File header -->
-    <div class="flex h-8 w-full items-center gap-2">
-      <i
-        aria-hidden="true"
-        class="text-foreground icon-[lucide--file] size-4 shrink-0"
-      />
-
-      <!-- Single node: show node display name instead of filename -->
-      <template v-if="isSingleNode">
-        <span
-          v-if="showNodeIdBadge"
-          class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
-        >
-          #{{ item.referencingNodes[0].nodeId }}
-        </span>
-        <p
-          class="text-foreground min-w-0 flex-1 truncate text-sm font-medium"
-          :title="singleNodeLabel"
-        >
-          {{ singleNodeLabel }}
-        </p>
-      </template>
-
-      <!-- Multiple nodes: show filename with count -->
-      <p
-        v-else
-        class="text-foreground min-w-0 flex-1 truncate text-sm font-medium"
-        :title="displayName"
-      >
-        {{ displayName }}
-        ({{ item.referencingNodes.length }})
-      </p>
-
-      <!-- Confirm button (visible when pending selection exists) -->
-      <Button
-        data-testid="missing-media-confirm-button"
-        variant="textonly"
-        size="icon-sm"
-        :aria-label="t('rightSidePanel.missingMedia.confirmSelection')"
-        :disabled="!isPending"
-        :class="
-          cn(
-            'size-8 shrink-0 rounded-lg transition-colors',
-            isPending ? 'bg-primary/10 hover:bg-primary/15' : 'opacity-20'
-          )
-        "
-        @click="confirmSelection(item.name)"
-      >
-        <i
-          aria-hidden="true"
-          class="icon-[lucide--check] size-4"
-          :class="isPending ? 'text-primary' : 'text-foreground'"
-        />
-      </Button>
-
-      <!-- Locate button (single node only) -->
-      <Button
-        v-if="isSingleNode"
-        data-testid="missing-media-locate-button"
-        variant="textonly"
-        size="icon-sm"
-        :aria-label="t('rightSidePanel.missingMedia.locateNode')"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-        @click="emit('locateNode', String(item.referencingNodes[0].nodeId))"
-      >
-        <i aria-hidden="true" class="icon-[lucide--locate] size-3" />
-      </Button>
-
-      <!-- Expand button (multiple nodes only) -->
-      <Button
-        v-if="!isSingleNode"
-        variant="textonly"
-        size="icon-sm"
-        :aria-label="
-          expanded
-            ? t('rightSidePanel.missingMedia.collapseNodes')
-            : t('rightSidePanel.missingMedia.expandNodes')
-        "
-        :aria-expanded="expanded"
-        :class="
-          cn(
-            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
-            expanded && 'rotate-180'
-          )
-        "
-        @click="toggleExpand(item.name)"
-      >
-        <i
-          aria-hidden="true"
-          class="icon-[lucide--chevron-down] size-4 text-muted-foreground"
-        />
-      </Button>
-    </div>
-
-    <!-- Referencing nodes (expandable) -->
-    <TransitionCollapse>
-      <div
-        v-if="expanded && item.referencingNodes.length > 1"
-        class="mb-1 flex flex-col gap-0.5 overflow-hidden pl-6"
-      >
-        <div
-          v-for="nodeRef in item.referencingNodes"
-          :key="`${String(nodeRef.nodeId)}::${nodeRef.widgetName}`"
-          class="flex h-7 items-center"
-        >
-          <span
-            v-if="showNodeIdBadge"
-            class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
-          >
-            #{{ nodeRef.nodeId }}
-          </span>
-          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
-            {{ getNodeDisplayLabel(String(nodeRef.nodeId), item.name) }}
-          </p>
-          <Button
-            variant="textonly"
-            size="icon-sm"
-            :aria-label="t('rightSidePanel.missingMedia.locateNode')"
-            class="mr-1 size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-            @click="emit('locateNode', String(nodeRef.nodeId))"
-          >
-            <i aria-hidden="true" class="icon-[lucide--locate] size-3" />
-          </Button>
-        </div>
-      </div>
-    </TransitionCollapse>
-
-    <!-- Status card (uploading, uploaded, or library select) -->
-    <TransitionCollapse>
-      <div
-        v-if="isPending || isUploading"
-        data-testid="missing-media-status-card"
-        role="status"
-        aria-live="polite"
-        class="bg-foreground/5 relative mt-1 overflow-hidden rounded-lg border border-interface-stroke p-2"
-      >
-        <div class="relative z-10 flex items-center gap-2">
-          <div class="flex size-8 shrink-0 items-center justify-center">
-            <i
-              v-if="currentUpload?.status === 'uploading'"
-              aria-hidden="true"
-              class="icon-[lucide--loader-circle] size-5 animate-spin text-muted-foreground"
-            />
-            <i
-              v-else
-              aria-hidden="true"
-              class="icon-[lucide--file-check] size-5 text-muted-foreground"
-            />
-          </div>
-
-          <div class="flex min-w-0 flex-1 flex-col justify-center">
-            <span class="text-foreground truncate text-xs/tight font-medium">
-              {{ pendingDisplayName }}
-            </span>
-            <span class="mt-0.5 text-xs/tight text-muted-foreground">
-              <template v-if="currentUpload?.status === 'uploading'">
-                {{ t('rightSidePanel.missingMedia.uploading') }}
-              </template>
-              <template v-else-if="currentUpload?.status === 'uploaded'">
-                {{ t('rightSidePanel.missingMedia.uploaded') }}
-              </template>
-              <template v-else>
-                {{ t('rightSidePanel.missingMedia.selectedFromLibrary') }}
-              </template>
-            </span>
-          </div>
-
-          <Button
-            data-testid="missing-media-cancel-button"
-            variant="textonly"
-            size="icon-sm"
-            :aria-label="t('rightSidePanel.missingMedia.cancelSelection')"
-            class="relative z-10 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
-            @click="cancelSelection(item.name)"
-          >
-            <i aria-hidden="true" class="icon-[lucide--circle-x] size-4" />
-          </Button>
-        </div>
-      </div>
-    </TransitionCollapse>
-
-    <!-- Upload + Library (when no pending selection) -->
-    <TransitionCollapse>
-      <div v-if="!isPending && !isUploading" class="mt-1 flex flex-col gap-1">
-        <!-- Upload dropzone -->
-        <div ref="dropZoneRef" class="flex w-full flex-col py-1">
-          <button
-            data-testid="missing-media-upload-dropzone"
-            type="button"
-            :class="
-              cn(
-                'flex w-full cursor-pointer items-center justify-center rounded-lg border border-dashed border-component-node-border bg-transparent px-3 py-2 text-xs text-muted-foreground transition-colors hover:border-base-foreground hover:text-base-foreground',
-                isOverDropZone && 'border-primary text-primary'
-              )
-            "
-            @click="openFilePicker()"
-          >
-            {{
-              t('rightSidePanel.missingMedia.uploadFile', {
-                type: extensionHint
-              })
-            }}
-          </button>
-        </div>
-
-        <!-- OR separator + Use from Library -->
-        <MissingMediaLibrarySelect
-          data-testid="missing-media-library-select"
-          :model-value="undefined"
-          :options="libraryOptions"
-          :show-divider="true"
-          :media-type="item.mediaType"
-          @select="handleLibrarySelect(item.name, $event)"
-        />
-      </div>
-    </TransitionCollapse>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useDropZone, useFileDialog } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { useI18n } from 'vue-i18n'
-import { cn } from '@/utils/tailwindUtil'
-import Button from '@/components/ui/button/Button.vue'
-import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
-import MissingMediaLibrarySelect from '@/platform/missingMedia/components/MissingMediaLibrarySelect.vue'
-import type { MissingMediaViewModel } from '@/platform/missingMedia/types'
-import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
-import {
-  useMissingMediaInteractions,
-  getNodeDisplayLabel,
-  getMediaDisplayName
-} from '@/platform/missingMedia/composables/useMissingMediaInteractions'
-
-const { item, showNodeIdBadge } = defineProps<{
-  item: MissingMediaViewModel
-  showNodeIdBadge: boolean
-}>()
-
-const emit = defineEmits<{
-  locateNode: [nodeId: string]
-}>()
-
-const { t } = useI18n()
-
-const store = useMissingMediaStore()
-const { uploadState, pendingSelection } = storeToRefs(store)
-
-const {
-  isExpanded,
-  toggleExpand,
-  getAcceptType,
-  getExtensionHint,
-  getLibraryOptions,
-  handleLibrarySelect,
-  handleUpload,
-  confirmSelection,
-  cancelSelection,
-  hasPendingSelection
-} = useMissingMediaInteractions()
-
-const displayName = getMediaDisplayName(item.name)
-const isSingleNode = item.referencingNodes.length === 1
-const singleNodeLabel = isSingleNode
-  ? getNodeDisplayLabel(String(item.referencingNodes[0].nodeId), item.name)
-  : ''
-const acceptType = getAcceptType(item.mediaType)
-const extensionHint = getExtensionHint(item.mediaType)
-
-const expanded = computed(() => isExpanded(item.name))
-const matchingCandidate = computed(() => {
-  const candidates = store.missingMediaCandidates
-  if (!candidates?.length) return null
-  return candidates.find((c) => c.name === item.name) ?? null
-})
-const libraryOptions = computed(() => {
-  const candidate = matchingCandidate.value
-  if (!candidate) return []
-  return getLibraryOptions(candidate)
-})
-
-const isPending = computed(() => hasPendingSelection(item.name))
-const isUploading = computed(
-  () => uploadState.value[item.name]?.status === 'uploading'
-)
-const currentUpload = computed(() => uploadState.value[item.name])
-const pendingDisplayName = computed(() => {
-  if (currentUpload.value) return currentUpload.value.fileName
-  const pending = pendingSelection.value[item.name]
-  return pending ? getMediaDisplayName(pending) : ''
-})
-
-const dropZoneRef = ref<HTMLElement | null>(null)
-const { isOverDropZone } = useDropZone(dropZoneRef, {
-  onDrop: (_files, event) => {
-    event?.stopPropagation()
-    const file = _files?.[0]
-    if (file) {
-      handleUpload(file, item.name, item.mediaType)
-    }
-  }
-})
-
-const { open: openFilePicker, onChange: onFileSelected } = useFileDialog({
-  accept: acceptType,
-  multiple: false
-})
-onFileSelected((files) => {
-  const file = files?.[0]
-  if (file) {
-    handleUpload(file, item.name, item.mediaType)
-  }
-})
-</script>

src/platform/missingMedia/composables/useMissingMediaInteractions.ts

@@ -1,224 +0,0 @@
-import { app } from '@/scripts/app'
-import { api } from '@/scripts/api'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useAssetsStore } from '@/stores/assetsStore'
-import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
-import type {
-  MissingMediaCandidate,
-  MediaType
-} from '@/platform/missingMedia/types'
-import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
-import { isCloud } from '@/platform/distribution/types'
-import { addToComboValues, resolveComboValues } from '@/utils/litegraphUtil'
-import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
-import { st } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
-import {
-  ACCEPTED_IMAGE_TYPES,
-  ACCEPTED_VIDEO_TYPES
-} from '@/utils/mediaUploadUtil'
-
-const MEDIA_ACCEPT_MAP: Record<MediaType, string> = {
-  image: ACCEPTED_IMAGE_TYPES,
-  video: ACCEPTED_VIDEO_TYPES,
-  audio: 'audio/*'
-}
-
-function getMediaComboWidget(
-  candidate: MissingMediaCandidate
-): { node: LGraphNode; widget: IComboWidget } | null {
-  const graph = app.rootGraph
-  if (!graph || candidate.nodeId == null) return null
-
-  const node = getNodeByExecutionId(graph, String(candidate.nodeId))
-  if (!node) return null
-
-  const widget = node.widgets?.find(
-    (w) => w.name === candidate.widgetName && w.type === 'combo'
-  ) as IComboWidget | undefined
-  if (!widget) return null
-
-  return { node, widget }
-}
-
-function resolveLibraryOptions(
-  candidate: MissingMediaCandidate
-): { name: string; value: string }[] {
-  const result = getMediaComboWidget(candidate)
-  if (!result) return []
-
-  return resolveComboValues(result.widget)
-    .filter((v) => v !== candidate.name)
-    .map((v) => ({ name: getMediaDisplayName(v), value: v }))
-}
-
-function applyValueToNodes(
-  candidates: MissingMediaCandidate[],
-  name: string,
-  newValue: string
-) {
-  const matching = candidates.filter((c) => c.name === name)
-  for (const c of matching) {
-    const result = getMediaComboWidget(c)
-    if (!result) continue
-
-    addToComboValues(result.widget, newValue)
-    result.widget.value = newValue
-    result.widget.callback?.(newValue)
-    result.node.graph?.setDirtyCanvas(true, true)
-  }
-}
-
-export function getNodeDisplayLabel(
-  nodeId: string | number,
-  fallback: string
-): string {
-  const graph = app.rootGraph
-  if (!graph) return fallback
-  const node = getNodeByExecutionId(graph, String(nodeId))
-  return resolveNodeDisplayName(node, {
-    emptyLabel: fallback,
-    untitledLabel: fallback,
-    st
-  })
-}
-
-/**
- * Resolve display name for a media file.
- * Cloud widgets store asset hashes as values; this resolves them to
- * human-readable names via assetsStore.getInputName().
- */
-export function getMediaDisplayName(name: string): string {
-  if (!isCloud) return name
-  return useAssetsStore().getInputName(name)
-}
-
-export function useMissingMediaInteractions() {
-  const store = useMissingMediaStore()
-  const assetsStore = useAssetsStore()
-
-  function isExpanded(key: string): boolean {
-    return store.expandState[key] ?? false
-  }
-
-  function toggleExpand(key: string) {
-    store.expandState[key] = !isExpanded(key)
-  }
-
-  function getAcceptType(mediaType: MediaType): string {
-    return MEDIA_ACCEPT_MAP[mediaType]
-  }
-
-  function getExtensionHint(mediaType: MediaType): string {
-    if (mediaType === 'audio') return 'audio'
-    const exts = MEDIA_ACCEPT_MAP[mediaType]
-      .split(',')
-      .map((mime) => mime.split('/')[1])
-      .join(', ')
-    return `${exts}, ...`
-  }
-
-  function getLibraryOptions(
-    candidate: MissingMediaCandidate
-  ): { name: string; value: string }[] {
-    return resolveLibraryOptions(candidate)
-  }
-
-  /** Step 1: Store selection from library (does not apply yet). */
-  function handleLibrarySelect(name: string, value: string) {
-    store.pendingSelection[name] = value
-  }
-
-  /** Step 1: Upload file and store result as pending (does not apply yet). */
-  async function handleUpload(file: File, name: string, mediaType: MediaType) {
-    if (!file.type || !file.type.startsWith(`${mediaType}/`)) {
-      useToastStore().addAlert(
-        st(
-          'toastMessages.unsupportedFileType',
-          'Unsupported file type. Please select a valid file.'
-        )
-      )
-      return
-    }
-
-    store.uploadState[name] = { fileName: file.name, status: 'uploading' }
-
-    try {
-      const body = new FormData()
-      body.append('image', file)
-
-      const resp = await api.fetchApi('/upload/image', {
-        method: 'POST',
-        body
-      })
-
-      if (resp.status !== 200) {
-        useToastStore().addAlert(
-          st(
-            'toastMessages.uploadFailed',
-            'Failed to upload file. Please try again.'
-          )
-        )
-        delete store.uploadState[name]
-        return
-      }
-
-      const data = await resp.json()
-      const uploadedPath: string = data.subfolder
-        ? `${data.subfolder}/${data.name}`
-        : data.name
-
-      store.uploadState[name] = { fileName: file.name, status: 'uploaded' }
-      store.pendingSelection[name] = uploadedPath
-
-      // Refresh assets store (non-critical — upload already succeeded)
-      try {
-        await assetsStore.updateInputs()
-      } catch {
-        // Asset list refresh failed but upload is valid; selection can proceed
-      }
-    } catch {
-      useToastStore().addAlert(
-        st(
-          'toastMessages.uploadFailed',
-          'Failed to upload file. Please try again.'
-        )
-      )
-      delete store.uploadState[name]
-    }
-  }
-
-  /** Step 2: Apply pending selection to widgets and remove from missing list. */
-  function confirmSelection(name: string) {
-    const value = store.pendingSelection[name]
-    if (!value || !store.missingMediaCandidates) return
-
-    applyValueToNodes(store.missingMediaCandidates, name, value)
-    store.removeMissingMediaByName(name)
-    delete store.pendingSelection[name]
-    delete store.uploadState[name]
-  }
-
-  function cancelSelection(name: string) {
-    delete store.pendingSelection[name]
-    delete store.uploadState[name]
-  }
-
-  function hasPendingSelection(name: string): boolean {
-    return name in store.pendingSelection
-  }
-
-  return {
-    isExpanded,
-    toggleExpand,
-    getAcceptType,
-    getExtensionHint,
-    getLibraryOptions,
-    handleLibrarySelect,
-    handleUpload,
-    confirmSelection,
-    cancelSelection,
-    hasPendingSelection
-  }
-}

src/platform/missingMedia/missingMediaScan.test.ts

@@ -1,207 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import {
-  verifyCloudMediaCandidates,
-  groupCandidatesByName,
-  groupCandidatesByMediaType
-} from './missingMediaScan'
-import type { MissingMediaCandidate } from './types'
-
-function makeCandidate(
-  nodeId: string,
-  name: string,
-  overrides: Partial<MissingMediaCandidate> = {}
-): MissingMediaCandidate {
-  return {
-    nodeId,
-    nodeType: 'LoadImage',
-    widgetName: 'image',
-    mediaType: 'image',
-    name,
-    isMissing: true,
-    ...overrides
-  }
-}
-
-describe('groupCandidatesByName', () => {
-  it('groups candidates with the same name', () => {
-    const candidates = [
-      makeCandidate('1', 'photo.png'),
-      makeCandidate('2', 'photo.png'),
-      makeCandidate('3', 'other.png')
-    ]
-
-    const result = groupCandidatesByName(candidates)
-    expect(result).toHaveLength(2)
-
-    const photoGroup = result.find((g) => g.name === 'photo.png')
-    expect(photoGroup?.referencingNodes).toHaveLength(2)
-    expect(photoGroup?.mediaType).toBe('image')
-
-    const otherGroup = result.find((g) => g.name === 'other.png')
-    expect(otherGroup?.referencingNodes).toHaveLength(1)
-  })
-
-  it('returns empty array for empty input', () => {
-    expect(groupCandidatesByName([])).toEqual([])
-  })
-})
-
-describe('groupCandidatesByMediaType', () => {
-  it('groups by media type in order: image, video, audio', () => {
-    const candidates = [
-      makeCandidate('1', 'sound.mp3', {
-        nodeType: 'LoadAudio',
-        widgetName: 'audio',
-        mediaType: 'audio'
-      }),
-      makeCandidate('2', 'photo.png'),
-      makeCandidate('3', 'clip.mp4', {
-        nodeType: 'LoadVideo',
-        widgetName: 'file',
-        mediaType: 'video'
-      })
-    ]
-
-    const result = groupCandidatesByMediaType(candidates)
-    expect(result).toHaveLength(3)
-    expect(result[0].mediaType).toBe('image')
-    expect(result[1].mediaType).toBe('video')
-    expect(result[2].mediaType).toBe('audio')
-  })
-
-  it('omits media types with no candidates', () => {
-    const candidates = [
-      makeCandidate('1', 'clip.mp4', {
-        nodeType: 'LoadVideo',
-        widgetName: 'file',
-        mediaType: 'video'
-      })
-    ]
-
-    const result = groupCandidatesByMediaType(candidates)
-    expect(result).toHaveLength(1)
-    expect(result[0].mediaType).toBe('video')
-  })
-
-  it('groups multiple names within the same media type', () => {
-    const candidates = [
-      makeCandidate('1', 'a.png'),
-      makeCandidate('2', 'b.png'),
-      makeCandidate('3', 'a.png')
-    ]
-
-    const result = groupCandidatesByMediaType(candidates)
-    expect(result).toHaveLength(1)
-    expect(result[0].mediaType).toBe('image')
-    expect(result[0].items).toHaveLength(2)
-    expect(
-      result[0].items.find((i) => i.name === 'a.png')?.referencingNodes
-    ).toHaveLength(2)
-  })
-})
-
-describe('verifyCloudMediaCandidates', () => {
-  it('marks candidates missing when not in input assets', async () => {
-    const candidates = [
-      makeCandidate('1', 'abc123.png', { isMissing: undefined }),
-      makeCandidate('2', 'def456.png', { isMissing: undefined })
-    ]
-
-    const mockStore = {
-      updateInputs: async () => {},
-      inputAssets: [{ asset_hash: 'def456.png', name: 'my-photo.png' }]
-    }
-
-    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
-
-    expect(candidates[0].isMissing).toBe(true)
-    expect(candidates[1].isMissing).toBe(false)
-  })
-
-  it('calls updateInputs before checking assets', async () => {
-    let updateCalled = false
-    const candidates = [makeCandidate('1', 'abc.png', { isMissing: undefined })]
-
-    const mockStore = {
-      updateInputs: async () => {
-        updateCalled = true
-      },
-      inputAssets: []
-    }
-
-    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
-
-    expect(updateCalled).toBe(true)
-  })
-
-  it('respects abort signal before execution', async () => {
-    const controller = new AbortController()
-    controller.abort()
-
-    const candidates = [
-      makeCandidate('1', 'abc123.png', { isMissing: undefined })
-    ]
-
-    await verifyCloudMediaCandidates(candidates, controller.signal)
-
-    expect(candidates[0].isMissing).toBeUndefined()
-  })
-
-  it('respects abort signal after updateInputs', async () => {
-    const controller = new AbortController()
-    const candidates = [makeCandidate('1', 'abc.png', { isMissing: undefined })]
-
-    const mockStore = {
-      updateInputs: async () => {
-        controller.abort()
-      },
-      inputAssets: [{ asset_hash: 'abc.png', name: 'photo.png' }]
-    }
-
-    await verifyCloudMediaCandidates(candidates, controller.signal, mockStore)
-
-    expect(candidates[0].isMissing).toBeUndefined()
-  })
-
-  it('skips candidates already resolved as true', async () => {
-    const candidates = [makeCandidate('1', 'abc.png', { isMissing: true })]
-
-    const mockStore = {
-      updateInputs: async () => {},
-      inputAssets: []
-    }
-
-    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
-
-    expect(candidates[0].isMissing).toBe(true)
-  })
-
-  it('skips candidates already resolved as false', async () => {
-    const candidates = [makeCandidate('1', 'abc.png', { isMissing: false })]
-
-    const mockStore = {
-      updateInputs: async () => {},
-      inputAssets: []
-    }
-
-    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
-
-    expect(candidates[0].isMissing).toBe(false)
-  })
-
-  it('skips entirely when no pending candidates', async () => {
-    let updateCalled = false
-    const candidates = [makeCandidate('1', 'abc.png', { isMissing: true })]
-
-    const mockStore = {
-      updateInputs: async () => {
-        updateCalled = true
-      },
-      inputAssets: []
-    }
-
-    await verifyCloudMediaCandidates(candidates, undefined, mockStore)
-
-    expect(updateCalled).toBe(false)
-  })
-})

src/platform/missingMedia/missingMediaScan.ts

@@ -1,159 +0,0 @@
-import { groupBy } from 'es-toolkit'
-import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type {
-  MissingMediaCandidate,
-  MissingMediaViewModel,
-  MissingMediaGroup,
-  MediaType
-} from './types'
-import type { LGraph } from '@/lib/litegraph/src/LGraph'
-import type {
-  IBaseWidget,
-  IComboWidget
-} from '@/lib/litegraph/src/types/widgets'
-import {
-  collectAllNodes,
-  getExecutionIdByNode
-} from '@/utils/graphTraversalUtil'
-import { resolveComboValues } from '@/utils/litegraphUtil'
-
-/** Map of node types to their media widget name and media type. */
-const MEDIA_NODE_WIDGETS: Record<
-  string,
-  { widgetName: string; mediaType: MediaType }
-> = {
-  LoadImage: { widgetName: 'image', mediaType: 'image' },
-  LoadVideo: { widgetName: 'file', mediaType: 'video' },
-  LoadAudio: { widgetName: 'audio', mediaType: 'audio' }
-}
-
-function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
-  return widget.type === 'combo'
-}
-
-/**
- * Scan combo widgets on media nodes for file values that may be missing.
- *
- * OSS: `isMissing` resolved immediately via widget options.
- * Cloud: `isMissing` left `undefined` for async verification.
- */
-export function scanAllMediaCandidates(
-  rootGraph: LGraph,
-  isCloud: boolean
-): MissingMediaCandidate[] {
-  if (!rootGraph) return []
-
-  const allNodes = collectAllNodes(rootGraph)
-  const candidates: MissingMediaCandidate[] = []
-
-  for (const node of allNodes) {
-    if (!node.widgets?.length) continue
-    if (node.isSubgraphNode?.()) continue
-
-    const mediaInfo = MEDIA_NODE_WIDGETS[node.type]
-    if (!mediaInfo) continue
-
-    const executionId = getExecutionIdByNode(rootGraph, node)
-    if (!executionId) continue
-
-    for (const widget of node.widgets) {
-      if (!isComboWidget(widget)) continue
-      if (widget.name !== mediaInfo.widgetName) continue
-
-      const value = widget.value
-      if (typeof value !== 'string' || !value.trim()) continue
-
-      let isMissing: boolean | undefined
-      if (isCloud) {
-        // Cloud: options may be empty initially; defer to async verification
-        isMissing = undefined
-      } else {
-        const options = resolveComboValues(widget)
-        isMissing = !options.includes(value)
-      }
-
-      candidates.push({
-        nodeId: executionId as NodeId,
-        nodeType: node.type,
-        widgetName: widget.name,
-        mediaType: mediaInfo.mediaType,
-        name: value,
-        isMissing
-      })
-    }
-  }
-
-  return candidates
-}
-
-interface InputVerifier {
-  updateInputs: () => Promise<unknown>
-  inputAssets: Array<{ asset_hash?: string | null; name: string }>
-}
-
-/**
- * Verify cloud media candidates against the input assets fetched from the
- * assets store. Mutates candidates' `isMissing` in place.
- */
-export async function verifyCloudMediaCandidates(
-  candidates: MissingMediaCandidate[],
-  signal?: AbortSignal,
-  assetsStore?: InputVerifier
-): Promise<void> {
-  if (signal?.aborted) return
-
-  const pending = candidates.filter((c) => c.isMissing === undefined)
-  if (pending.length === 0) return
-
-  const store =
-    assetsStore ?? (await import('@/stores/assetsStore')).useAssetsStore()
-
-  await store.updateInputs()
-
-  if (signal?.aborted) return
-
-  const assetHashes = new Set(
-    store.inputAssets.map((a) => a.asset_hash).filter((h): h is string => !!h)
-  )
-
-  for (const c of pending) {
-    c.isMissing = !assetHashes.has(c.name)
-  }
-}
-
-/** Group confirmed-missing candidates by file name into view models. */
-export function groupCandidatesByName(
-  candidates: MissingMediaCandidate[]
-): MissingMediaViewModel[] {
-  const map = new Map<string, MissingMediaViewModel>()
-  for (const c of candidates) {
-    const existing = map.get(c.name)
-    if (existing) {
-      existing.referencingNodes.push({
-        nodeId: c.nodeId,
-        widgetName: c.widgetName
-      })
-    } else {
-      map.set(c.name, {
-        name: c.name,
-        mediaType: c.mediaType,
-        referencingNodes: [{ nodeId: c.nodeId, widgetName: c.widgetName }]
-      })
-    }
-  }
-  return Array.from(map.values())
-}
-
-/** Group confirmed-missing candidates by media type. */
-export function groupCandidatesByMediaType(
-  candidates: MissingMediaCandidate[]
-): MissingMediaGroup[] {
-  const grouped = groupBy(candidates, (c) => c.mediaType)
-  const order: MediaType[] = ['image', 'video', 'audio']
-  return order
-    .filter((t) => t in grouped)
-    .map((mediaType) => ({
-      mediaType,
-      items: groupCandidatesByName(grouped[mediaType])
-    }))
-}

src/platform/missingMedia/missingMediaStore.test.ts

@@ -1,197 +0,0 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { useMissingMediaStore } from './missingMediaStore'
-import type { MissingMediaCandidate } from './types'
-
-// Mock dependencies
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => ({
-    currentGraph: null
-  })
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    rootGraph: null
-  }
-}))
-
-vi.mock('@/utils/graphTraversalUtil', () => ({
-  getActiveGraphNodeIds: () => new Set<string>()
-}))
-
-function makeCandidate(
-  nodeId: string,
-  name: string,
-  mediaType: 'image' | 'video' | 'audio' = 'image'
-): MissingMediaCandidate {
-  return {
-    nodeId,
-    nodeType: 'LoadImage',
-    widgetName: 'image',
-    mediaType,
-    name,
-    isMissing: true
-  }
-}
-
-describe('useMissingMediaStore', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia())
-  })
-
-  it('starts with no missing media', () => {
-    const store = useMissingMediaStore()
-    expect(store.missingMediaCandidates).toBeNull()
-    expect(store.hasMissingMedia).toBe(false)
-    expect(store.missingMediaCount).toBe(0)
-  })
-
-  it('setMissingMedia populates candidates', () => {
-    const store = useMissingMediaStore()
-    const candidates = [makeCandidate('1', 'photo.png')]
-
-    store.setMissingMedia(candidates)
-
-    expect(store.missingMediaCandidates).toHaveLength(1)
-    expect(store.hasMissingMedia).toBe(true)
-    expect(store.missingMediaCount).toBe(1)
-  })
-
-  it('setMissingMedia with empty array clears state', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([makeCandidate('1', 'photo.png')])
-    store.setMissingMedia([])
-
-    expect(store.missingMediaCandidates).toBeNull()
-    expect(store.hasMissingMedia).toBe(false)
-  })
-
-  it('clearMissingMedia resets all state including interaction state', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([
-      makeCandidate('1', 'photo.png'),
-      makeCandidate('2', 'clip.mp4', 'video')
-    ])
-    store.expandState['photo.png'] = true
-    store.uploadState['photo.png'] = {
-      fileName: 'photo.png',
-      status: 'uploaded'
-    }
-    store.pendingSelection['photo.png'] = 'uploaded/photo.png'
-    const controller = store.createVerificationAbortController()
-
-    store.clearMissingMedia()
-
-    expect(store.missingMediaCandidates).toBeNull()
-    expect(store.hasMissingMedia).toBe(false)
-    expect(store.missingMediaCount).toBe(0)
-    expect(controller.signal.aborted).toBe(true)
-    expect(store.expandState).toEqual({})
-    expect(store.uploadState).toEqual({})
-    expect(store.pendingSelection).toEqual({})
-  })
-
-  it('missingMediaNodeIds tracks unique node IDs', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([
-      makeCandidate('1', 'photo.png'),
-      makeCandidate('1', 'other.png'),
-      makeCandidate('2', 'clip.mp4', 'video')
-    ])
-
-    expect(store.missingMediaNodeIds.size).toBe(2)
-    expect(store.missingMediaNodeIds.has('1')).toBe(true)
-    expect(store.missingMediaNodeIds.has('2')).toBe(true)
-  })
-
-  it('hasMissingMediaOnNode checks node presence', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([makeCandidate('42', 'photo.png')])
-
-    expect(store.hasMissingMediaOnNode('42')).toBe(true)
-    expect(store.hasMissingMediaOnNode('99')).toBe(false)
-  })
-
-  it('removeMissingMediaByWidget removes matching node+widget entry', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([
-      makeCandidate('1', 'photo.png'),
-      makeCandidate('2', 'clip.mp4', 'video')
-    ])
-
-    store.removeMissingMediaByWidget('1', 'image')
-
-    expect(store.missingMediaCandidates).toHaveLength(1)
-    expect(store.missingMediaCandidates![0].name).toBe('clip.mp4')
-  })
-
-  it('removeMissingMediaByWidget nulls candidates when last entry removed', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([makeCandidate('1', 'photo.png')])
-
-    store.removeMissingMediaByWidget('1', 'image')
-
-    expect(store.missingMediaCandidates).toBeNull()
-    expect(store.hasMissingMedia).toBe(false)
-  })
-
-  it('removeMissingMediaByWidget ignores non-matching entries', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([makeCandidate('1', 'photo.png')])
-
-    store.removeMissingMediaByWidget('99', 'image')
-
-    expect(store.missingMediaCandidates).toHaveLength(1)
-  })
-
-  it('removeMissingMediaByName clears interaction state for removed name', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([makeCandidate('1', 'photo.png')])
-    store.expandState['photo.png'] = true
-    store.uploadState['photo.png'] = {
-      fileName: 'photo.png',
-      status: 'uploaded'
-    }
-    store.pendingSelection['photo.png'] = 'uploaded/photo.png'
-
-    store.removeMissingMediaByName('photo.png')
-
-    expect(store.expandState['photo.png']).toBeUndefined()
-    expect(store.uploadState['photo.png']).toBeUndefined()
-    expect(store.pendingSelection['photo.png']).toBeUndefined()
-  })
-
-  it('removeMissingMediaByWidget clears interaction state for removed name', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([makeCandidate('1', 'photo.png')])
-    store.pendingSelection['photo.png'] = 'library/photo.png'
-
-    store.removeMissingMediaByWidget('1', 'image')
-
-    expect(store.pendingSelection['photo.png']).toBeUndefined()
-  })
-
-  it('removeMissingMediaByWidget preserves interaction state when other candidates share the name', () => {
-    const store = useMissingMediaStore()
-    store.setMissingMedia([
-      makeCandidate('1', 'photo.png'),
-      makeCandidate('2', 'photo.png')
-    ])
-    store.pendingSelection['photo.png'] = 'library/photo.png'
-
-    store.removeMissingMediaByWidget('1', 'image')
-
-    expect(store.missingMediaCandidates).toHaveLength(1)
-    expect(store.pendingSelection['photo.png']).toBe('library/photo.png')
-  })
-
-  it('createVerificationAbortController aborts previous controller', () => {
-    const store = useMissingMediaStore()
-    const first = store.createVerificationAbortController()
-    expect(first.signal.aborted).toBe(false)
-
-    store.createVerificationAbortController()
-    expect(first.signal.aborted).toBe(true)
-  })
-})

src/platform/missingMedia/missingMediaStore.ts

@@ -1,154 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
-
-// eslint-disable-next-line import-x/no-restricted-paths
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { app } from '@/scripts/app'
-import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
-import { getAncestorExecutionIds } from '@/types/nodeIdentification'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
-import { getActiveGraphNodeIds } from '@/utils/graphTraversalUtil'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-
-/**
- * Missing media error state.
- * Separated from executionErrorStore to keep domain boundaries clean.
- * The executionErrorStore composes from this store for aggregate error flags.
- */
-export const useMissingMediaStore = defineStore('missingMedia', () => {
-  const canvasStore = useCanvasStore()
-
-  const missingMediaCandidates = ref<MissingMediaCandidate[] | null>(null)
-
-  const hasMissingMedia = computed(() => !!missingMediaCandidates.value?.length)
-
-  const missingMediaCount = computed(
-    () => missingMediaCandidates.value?.length ?? 0
-  )
-
-  const missingMediaNodeIds = computed(
-    () =>
-      new Set(missingMediaCandidates.value?.map((m) => String(m.nodeId)) ?? [])
-  )
-
-  /**
-   * Set of all execution ID prefixes derived from missing media node IDs,
-   * including the missing media nodes themselves.
-   */
-  const missingMediaAncestorExecutionIds = computed<Set<NodeExecutionId>>(
-    () => {
-      const ids = new Set<NodeExecutionId>()
-      for (const nodeId of missingMediaNodeIds.value) {
-        for (const id of getAncestorExecutionIds(nodeId)) {
-          ids.add(id)
-        }
-      }
-      return ids
-    }
-  )
-
-  const activeMissingMediaGraphIds = computed<Set<string>>(() => {
-    if (!app.rootGraph) return new Set()
-    return getActiveGraphNodeIds(
-      app.rootGraph,
-      canvasStore.currentGraph ?? app.rootGraph,
-      missingMediaAncestorExecutionIds.value
-    )
-  })
-
-  // Interaction state — persists across component re-mounts
-  const expandState = ref<Record<string, boolean>>({})
-  const uploadState = ref<
-    Record<string, { fileName: string; status: 'uploading' | 'uploaded' }>
-  >({})
-  /** Pending selection: value to apply on confirm. */
-  const pendingSelection = ref<Record<string, string>>({})
-
-  let _verificationAbortController: AbortController | null = null
-
-  function createVerificationAbortController(): AbortController {
-    _verificationAbortController?.abort()
-    _verificationAbortController = new AbortController()
-    return _verificationAbortController
-  }
-
-  function setMissingMedia(media: MissingMediaCandidate[]) {
-    missingMediaCandidates.value = media.length ? media : null
-  }
-
-  function hasMissingMediaOnNode(nodeLocatorId: string): boolean {
-    return missingMediaNodeIds.value.has(nodeLocatorId)
-  }
-
-  function isContainerWithMissingMedia(node: LGraphNode): boolean {
-    return activeMissingMediaGraphIds.value.has(String(node.id))
-  }
-
-  function clearInteractionStateForName(name: string) {
-    delete expandState.value[name]
-    delete uploadState.value[name]
-    delete pendingSelection.value[name]
-  }
-
-  function removeMissingMediaByName(name: string) {
-    if (!missingMediaCandidates.value) return
-    missingMediaCandidates.value = missingMediaCandidates.value.filter(
-      (m) => m.name !== name
-    )
-    clearInteractionStateForName(name)
-    if (!missingMediaCandidates.value.length)
-      missingMediaCandidates.value = null
-  }
-
-  function removeMissingMediaByWidget(nodeId: string, widgetName: string) {
-    if (!missingMediaCandidates.value) return
-    const removedNames = new Set(
-      missingMediaCandidates.value
-        .filter(
-          (m) => String(m.nodeId) === nodeId && m.widgetName === widgetName
-        )
-        .map((m) => m.name)
-    )
-    missingMediaCandidates.value = missingMediaCandidates.value.filter(
-      (m) => !(String(m.nodeId) === nodeId && m.widgetName === widgetName)
-    )
-    for (const name of removedNames) {
-      if (!missingMediaCandidates.value.some((m) => m.name === name)) {
-        clearInteractionStateForName(name)
-      }
-    }
-    if (!missingMediaCandidates.value.length)
-      missingMediaCandidates.value = null
-  }
-
-  function clearMissingMedia() {
-    _verificationAbortController?.abort()
-    _verificationAbortController = null
-    missingMediaCandidates.value = null
-    expandState.value = {}
-    uploadState.value = {}
-    pendingSelection.value = {}
-  }
-
-  return {
-    missingMediaCandidates,
-    hasMissingMedia,
-    missingMediaCount,
-    missingMediaNodeIds,
-    missingMediaAncestorExecutionIds,
-    activeMissingMediaGraphIds,
-
-    setMissingMedia,
-    removeMissingMediaByName,
-    removeMissingMediaByWidget,
-    clearMissingMedia,
-    createVerificationAbortController,
-
-    hasMissingMediaOnNode,
-    isContainerWithMissingMedia,
-
-    expandState,
-    uploadState,
-    pendingSelection
-  }
-})

src/platform/missingMedia/types.ts

@@ -1,38 +0,0 @@
-import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-
-export type MediaType = 'image' | 'video' | 'audio'
-
-/**
- * A single (node, widget, media file) binding detected by the missing media pipeline.
- * The same file name may appear multiple times across different nodes.
- */
-export interface MissingMediaCandidate {
-  nodeId: NodeId
-  nodeType: string
-  widgetName: string
-  mediaType: MediaType
-  /** Display name (plain filename for OSS, asset hash for cloud). */
-  name: string
-  /**
-   * - `true`  — confirmed missing
-   * - `false` — confirmed present
-   * - `undefined` — pending async verification (cloud only)
-   */
-  isMissing: boolean | undefined
-}
-
-/** View model grouping multiple candidate references under a single file name. */
-export interface MissingMediaViewModel {
-  name: string
-  mediaType: MediaType
-  referencingNodes: Array<{
-    nodeId: NodeId
-    widgetName: string
-  }>
-}
-
-/** A group of missing media items sharing the same media type. */
-export interface MissingMediaGroup {
-  mediaType: MediaType
-  items: MissingMediaViewModel[]
-}

src/platform/missingModel/missingModelScan.ts

@@ -22,7 +22,6 @@ import {
   collectAllNodes,
   getExecutionIdByNode
 } from '@/utils/graphTraversalUtil'
-import { resolveComboValues } from '@/utils/litegraphUtil'
 
 function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
   return widget.type === 'combo'
@@ -51,6 +50,14 @@ export function isModelFileName(name: string): boolean {
   return Array.from(MODEL_FILE_EXTENSIONS).some((ext) => lower.endsWith(ext))
 }
 
+function resolveComboOptions(widget: IComboWidget): string[] {
+  const values = widget.options.values
+  if (!values) return []
+  if (typeof values === 'function') return values(widget)
+  if (Array.isArray(values)) return values
+  return Object.keys(values)
+}
+
 /**
  * Scan COMBO and asset widgets on configured graph nodes for model-like values.
  * Must be called after `graph.configure()` so widget name/value mappings are accurate.
@@ -132,7 +139,7 @@ function scanComboWidget(
   if (!isModelFileName(value)) return null
 
   const nodeIsAssetSupported = isAssetSupported(node.type, widget.name)
-  const options = resolveComboValues(widget)
+  const options = resolveComboOptions(widget)
   const inOptions = options.includes(value)
 
   return {

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -103,6 +103,7 @@ async function rerun(e: Event) {
     </Button>
     <Button
       v-if="isWorkflowActive && !selectedItem"
+      data-testid="linear-cancel-run"
       variant="destructive"
       @click="cancelActiveWorkflowJobs()"
     >

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -327,6 +327,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
         :key="`${item.id}-${item.state}`"
         :ref="selectedRef(`slot:${item.id}`)"
         v-bind="itemAttrs(`slot:${item.id}`)"
+        data-testid="linear-in-progress-item"
         :class="itemClass"
         @click="store.select(`slot:${item.id}`)"
       >
@@ -359,6 +360,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
             :key
             :ref="selectedRef(`history:${asset.id}:${key}`)"
             v-bind="itemAttrs(`history:${asset.id}:${key}`)"
+            data-testid="linear-history-item"
             :class="itemClass"
             @click="store.select(`history:${asset.id}:${key}`)"
           >

src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue

@@ -58,6 +58,7 @@ function clearQueue(close: () => void) {
     <div
       v-if="queueCount > 1"
       aria-hidden="true"
+      data-testid="linear-job-badge"
       class="absolute top-0 right-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary-background text-xs text-text-primary"
       v-text="queueCount"
     />

src/renderer/extensions/linearMode/OutputHistoryItem.vue

@@ -15,6 +15,7 @@ const { output } = defineProps<{
 <template>
   <img
     v-if="getMediaType(output) === 'images'"
+    data-testid="linear-image-output"
     class="block size-10 rounded-sm bg-secondary-background object-cover"
     loading="lazy"
     width="40"
@@ -23,6 +24,7 @@ const { output } = defineProps<{
   />
   <template v-else-if="getMediaType(output) === 'video'">
     <video
+      data-testid="linear-video-output"
       class="pointer-events-none block size-10 rounded-sm bg-secondary-background object-cover"
       preload="metadata"
       width="40"

src/renderer/extensions/linearMode/OutputPreviewItem.vue

@@ -9,10 +9,15 @@ const { latentPreview } = defineProps<{
   <div class="w-10">
     <img
       v-if="latentPreview"
+      data-testid="linear-latent-preview"
       class="block size-10 rounded-sm object-cover"
       :src="latentPreview"
     />
-    <div v-else class="skeleton-shimmer size-10 rounded-sm" />
+    <div
+      v-else
+      data-testid="linear-skeleton"
+      class="skeleton-shimmer size-10 rounded-sm"
+    />
     <LinearProgressBar class="mt-1 h-1 w-10" rounded />
   </div>
 </template>

src/renderer/extensions/vueNodes/composables/useSlotElementTracking.test.ts

@@ -19,27 +19,11 @@ import {
 } from './useSlotElementTracking'
 
 const mockGraph = vi.hoisted(() => ({ _nodes: [] as unknown[] }))
-const mockCanvasState = vi.hoisted(() => ({
-  canvas: {} as object | null
-}))
-const mockClientPosToCanvasPos = vi.hoisted(() =>
-  vi.fn(([x, y]: [number, number]) => [x * 0.5, y * 0.5] as [number, number])
-)
 
 vi.mock('@/scripts/app', () => ({
   app: { canvas: { graph: mockGraph, setDirty: vi.fn() } }
 }))
 
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => mockCanvasState
-}))
-
-vi.mock('@/composables/element/useCanvasPositionConversion', () => ({
-  useSharedCanvasPositionConversion: () => ({
-    clientPosToCanvasPos: mockClientPosToCanvasPos
-  })
-}))
-
 const NODE_ID = 'test-node'
 const SLOT_INDEX = 0
 
@@ -61,10 +45,9 @@ function createWrapperComponent(type: 'input' | 'output') {
   })
 }
 
-function createSlotElement(collapsed = false): HTMLElement {
+function createSlotElement(): HTMLElement {
   const container = document.createElement('div')
   container.dataset.nodeId = NODE_ID
-  if (collapsed) container.dataset.collapsed = ''
   container.getBoundingClientRect = () =>
     ({
       left: 0,
@@ -130,8 +113,6 @@ describe('useSlotElementTracking', () => {
       actor: 'test'
     })
     mockGraph._nodes = [{ id: 1 }]
-    mockCanvasState.canvas = {}
-    mockClientPosToCanvasPos.mockClear()
   })
 
   it.each([
@@ -270,57 +251,4 @@ describe('useSlotElementTracking', () => {
 
     expect(batchUpdateSpy).not.toHaveBeenCalled()
   })
-
-  describe('collapsed node slot sync', () => {
-    function registerCollapsedSlot() {
-      const slotKey = getSlotKey(NODE_ID, SLOT_INDEX, true)
-      const slotEl = createSlotElement(true)
-
-      const registryStore = useNodeSlotRegistryStore()
-      const node = registryStore.ensureNode(NODE_ID)
-      node.slots.set(slotKey, {
-        el: slotEl,
-        index: SLOT_INDEX,
-        type: 'input',
-        cachedOffset: { x: 50, y: 60 }
-      })
-
-      return { slotKey, node }
-    }
-
-    it('uses clientPosToCanvasPos for collapsed nodes', () => {
-      const { slotKey } = registerCollapsedSlot()
-
-      syncNodeSlotLayoutsFromDOM(NODE_ID)
-
-      // Slot element center: (10 + 10/2, 30 + 10/2) = (15, 35)
-      const screenCenter: [number, number] = [15, 35]
-      expect(mockClientPosToCanvasPos).toHaveBeenCalledWith(screenCenter)
-
-      // Mock returns x*0.5, y*0.5
-      const layout = layoutStore.getSlotLayout(slotKey)
-      expect(layout).not.toBeNull()
-      expect(layout!.position.x).toBe(screenCenter[0] * 0.5)
-      expect(layout!.position.y).toBe(screenCenter[1] * 0.5)
-    })
-
-    it('clears cachedOffset for collapsed nodes', () => {
-      const { slotKey, node } = registerCollapsedSlot()
-      const entry = node.slots.get(slotKey)!
-      expect(entry.cachedOffset).toBeDefined()
-
-      syncNodeSlotLayoutsFromDOM(NODE_ID)
-
-      expect(entry.cachedOffset).toBeUndefined()
-    })
-
-    it('defers sync when canvas is not initialized', () => {
-      mockCanvasState.canvas = null
-      registerCollapsedSlot()
-
-      syncNodeSlotLayoutsFromDOM(NODE_ID)
-
-      expect(mockClientPosToCanvasPos).not.toHaveBeenCalled()
-    })
-  })
 })

src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts

@@ -8,9 +8,7 @@
 import { onMounted, onUnmounted, watch } from 'vue'
 import type { Ref } from 'vue'
 
-import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { app } from '@/scripts/app'
@@ -136,26 +134,11 @@ export function syncNodeSlotLayoutsFromDOM(nodeId: string) {
     .value?.el.closest('[data-node-id]')
   const nodeEl = closestNode instanceof HTMLElement ? closestNode : null
   const nodeRect = nodeEl?.getBoundingClientRect()
-
-  // Collapsed nodes preserve expanded size in layoutStore, so DOM-relative
-  // scale derivation breaks. Fall back to clientPosToCanvasPos instead.
-  const isCollapsed = nodeEl?.dataset.collapsed != null
   const effectiveScale =
-    !isCollapsed && nodeRect && nodeLayout.size.width > 0
+    nodeRect && nodeLayout.size.width > 0
       ? nodeRect.width / nodeLayout.size.width
       : 0
 
-  const canvasStore = useCanvasStore()
-  const conv =
-    isCollapsed && canvasStore.canvas
-      ? useSharedCanvasPositionConversion()
-      : null
-
-  if (isCollapsed && !conv) {
-    scheduleSlotLayoutSync(nodeId)
-    return
-  }
-
   const batch: Array<{ key: string; layout: SlotLayout }> = []
 
   for (const [slotKey, entry] of node.slots) {
@@ -172,30 +155,22 @@ export function syncNodeSlotLayoutsFromDOM(nodeId: string) {
       rect.top + rect.height / 2
     ]
 
-    let centerCanvas: { x: number; y: number }
+    if (!nodeRect || effectiveScale <= 0) continue
 
-    if (conv) {
-      const [cx, cy] = conv.clientPosToCanvasPos(screenCenter)
-      centerCanvas = { x: cx, y: cy }
-      entry.cachedOffset = undefined
-    } else {
-      if (!nodeRect || effectiveScale <= 0) continue
+    // DOM-relative measurement: compute offset from the node element's
+    // top-left corner in canvas units. The node element is rendered at
+    // (position.x, position.y - NODE_TITLE_HEIGHT), so the Y offset
+    // must subtract NODE_TITLE_HEIGHT to be relative to position.y.
+    entry.cachedOffset = {
+      x: (screenCenter[0] - nodeRect.left) / effectiveScale,
+      y:
+        (screenCenter[1] - nodeRect.top) / effectiveScale -
+        LiteGraph.NODE_TITLE_HEIGHT
+    }
 
-      // DOM-relative measurement: compute offset from the node element's
-      // top-left corner in canvas units. The node element is rendered at
-      // (position.x, position.y - NODE_TITLE_HEIGHT), so the Y offset
-      // must subtract NODE_TITLE_HEIGHT to be relative to position.y.
-      entry.cachedOffset = {
-        x: (screenCenter[0] - nodeRect.left) / effectiveScale,
-        y:
-          (screenCenter[1] - nodeRect.top) / effectiveScale -
-          LiteGraph.NODE_TITLE_HEIGHT
-      }
-
-      centerCanvas = {
-        x: nodeLayout.position.x + entry.cachedOffset.x,
-        y: nodeLayout.position.y + entry.cachedOffset.y
-      }
+    const centerCanvas = {
+      x: nodeLayout.position.x + entry.cachedOffset.x,
+      y: nodeLayout.position.y + entry.cachedOffset.y
     }
 
     const nextLayout = createSlotLayout({

src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts

@@ -15,8 +15,8 @@ import { useDocumentVisibility } from '@vueuse/core'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { Bounds, NodeId } from '@/renderer/core/layout/types'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import {

src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts

@@ -11,10 +11,8 @@ import { isImageUploadInput } from '@/types/nodeDefAugmentation'
 import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
 import { addToComboValues } from '@/utils/litegraphUtil'
 
-import {
-  ACCEPTED_IMAGE_TYPES,
-  ACCEPTED_VIDEO_TYPES
-} from '@/utils/mediaUploadUtil'
+const ACCEPTED_IMAGE_TYPES = 'image/png,image/jpeg,image/webp'
+const ACCEPTED_VIDEO_TYPES = 'video/webm,video/mp4'
 
 const isImageFile = (file: File) => file.type.startsWith('image/')
 const isVideoFile = (file: File) => file.type.startsWith('video/')

src/scripts/app.ts

@@ -92,11 +92,6 @@ import {
   verifyAssetSupportedCandidates
 } from '@/platform/missingModel/missingModelScan'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
-import {
-  scanAllMediaCandidates,
-  verifyCloudMediaCandidates
-} from '@/platform/missingMedia/missingMediaScan'
 import { assetService } from '@/platform/assets/services/assetService'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
@@ -1142,7 +1137,6 @@ export class ComfyApp {
     useWorkflowService().beforeLoadNewGraph()
 
     useMissingModelStore().clearMissingModels()
-    useMissingMediaStore().clearMissingMedia()
 
     if (clean !== false) {
       // Reset canvas context before configuring a new graph so subgraph UI
@@ -1422,8 +1416,6 @@ export class ComfyApp {
         showMissingModels
       )
 
-      await this.runMissingMediaPipeline()
-
       if (!deferWarnings) {
         useWorkflowService().showPendingWarnings()
       }
@@ -1573,44 +1565,6 @@ export class ComfyApp {
     return { missingModels }
   }
 
-  private async runMissingMediaPipeline(): Promise<void> {
-    const missingMediaStore = useMissingMediaStore()
-    const candidates = scanAllMediaCandidates(this.rootGraph, isCloud)
-
-    if (!candidates.length) return
-
-    if (isCloud) {
-      const controller = missingMediaStore.createVerificationAbortController()
-      void verifyCloudMediaCandidates(candidates, controller.signal)
-        .then(() => {
-          if (controller.signal.aborted) return
-          const confirmed = candidates.filter((c) => c.isMissing === true)
-          if (confirmed.length) {
-            useExecutionErrorStore().surfaceMissingMedia(confirmed)
-          }
-        })
-        .catch((err) => {
-          console.warn(
-            '[Missing Media Pipeline] Asset verification failed:',
-            err
-          )
-          useToastStore().add({
-            severity: 'warn',
-            summary: st(
-              'toastMessages.missingMediaVerificationFailed',
-              'Failed to verify missing media. Some inputs may not be shown in the Errors tab.'
-            ),
-            life: 5000
-          })
-        })
-    } else {
-      const confirmed = candidates.filter((c) => c.isMissing === true)
-      if (confirmed.length) {
-        useExecutionErrorStore().surfaceMissingMedia(confirmed)
-      }
-    }
-  }
-
   async graphToPrompt(graph = this.rootGraph) {
     return graphToPrompt(graph, {
       sortNodes: useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave')

src/stores/executionErrorStore.ts

@@ -4,9 +4,7 @@ import { computed, ref } from 'vue'
 import { useNodeErrorFlagSync } from '@/composables/graph/useNodeErrorFlagSync'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import type { MissingModelCandidate } from '@/platform/missingModel/types'
-import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
@@ -36,7 +34,6 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
   const canvasStore = useCanvasStore()
   const missingModelStore = useMissingModelStore()
   const missingNodesStore = useMissingNodesErrorStore()
-  const missingMediaStore = useMissingMediaStore()
 
   const lastNodeErrors = ref<Record<NodeId, NodeError> | null>(null)
   const lastExecutionError = ref<ExecutionErrorWsMessage | null>(null)
@@ -160,7 +157,6 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
       options
     )
     missingModelStore.removeMissingModelByWidget(executionId, widgetName)
-    missingMediaStore.removeMissingMediaByWidget(executionId, widgetName)
   }
 
   /** Set missing models and open the error overlay if the Errors tab is enabled. */
@@ -174,17 +170,6 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     }
   }
 
-  /** Set missing media and open the error overlay if the Errors tab is enabled. */
-  function surfaceMissingMedia(media: MissingMediaCandidate[]) {
-    missingMediaStore.setMissingMedia(media)
-    if (
-      media.length &&
-      useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
-    ) {
-      showErrorOverlay()
-    }
-  }
-
   const lastExecutionErrorNodeLocatorId = computed(() => {
     const err = lastExecutionError.value
     if (!err) return null
@@ -212,8 +197,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
       hasPromptError.value ||
       hasNodeError.value ||
       missingNodesStore.hasMissingNodes ||
-      missingModelStore.hasMissingModels ||
-      missingMediaStore.hasMissingMedia
+      missingModelStore.hasMissingModels
   )
 
   const allErrorExecutionIds = computed<string[]>(() => {
@@ -249,8 +233,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
       nodeErrorCount.value +
       executionErrorCount.value +
       missingNodesStore.missingNodeCount +
-      missingModelStore.missingModelCount +
-      missingMediaStore.missingMediaCount
+      missingModelStore.missingModelCount
   )
 
   /** Graph node IDs (as strings) that have errors in the current graph scope. */
@@ -343,7 +326,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     return errorAncestorExecutionIds.value.has(execId)
   }
 
-  useNodeErrorFlagSync(lastNodeErrors, missingModelStore, missingMediaStore)
+  useNodeErrorFlagSync(lastNodeErrors, missingModelStore)
 
   return {
     // Raw state
@@ -377,9 +360,6 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     // Missing model coordination (delegates to missingModelStore)
     surfaceMissingModels,
 
-    // Missing media coordination (delegates to missingMediaStore)
-    surfaceMissingMedia,
-
     // Lookup helpers
     getNodeErrors,
     slotHasError,

src/stores/nodeOutputStore.test.ts

@@ -32,7 +32,7 @@ vi.mock('@/scripts/app', () => ({
 }))
 
 const createMockNode = (overrides: Record<string, unknown> = {}): LGraphNode =>
-  fromAny<LGraphNode, unknown>({
+  fromAny<LGraphNode, Record<string, unknown>>({
     id: 1,
     type: 'TestNode',
     ...overrides

src/stores/subgraphNavigationStore.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { fromPartial } from '@total-typescript/shoehorn'
+import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -20,7 +20,7 @@ function createMockSubgraph(id: string, rootGraph = app.rootGraph): Subgraph {
     nodes: []
   } satisfies MockSubgraph
 
-  return fromPartial<Subgraph>(mockSubgraph)
+  return fromAny<Subgraph, unknown>(mockSubgraph)
 }
 
 vi.mock('@/scripts/app', () => {

src/stores/subgraphStore.test.ts

@@ -187,35 +187,6 @@ describe('useSubgraphStore', () => {
     expect(store.isGlobalBlueprint('nonexistent')).toBe(false)
   })
 
-  describe('isUserBlueprint', () => {
-    it('should return true for user blueprints', async () => {
-      await mockFetch({ 'test.json': mockGraph })
-      expect(store.isUserBlueprint('SubgraphBlueprint.test')).toBe(true)
-    })
-
-    it('should return false for global blueprints', async () => {
-      await mockFetch(
-        {},
-        {
-          global_bp: {
-            name: 'Global Blueprint',
-            info: { node_pack: 'comfy_essentials' },
-            data: JSON.stringify(mockGraph)
-          }
-        }
-      )
-      expect(store.isUserBlueprint('SubgraphBlueprint.global_bp')).toBe(false)
-    })
-
-    it('should return false for non-blueprint node types', () => {
-      expect(store.isUserBlueprint('KSampler')).toBe(false)
-    })
-
-    it('should return false for undefined', () => {
-      expect(store.isUserBlueprint(undefined)).toBe(false)
-    })
-  })
-
   describe('blueprint badge display', () => {
     it('should set isGlobal flag on global blueprints', async () => {
       await mockFetch(

src/stores/subgraphStore.ts

@@ -432,12 +432,6 @@ export const useSubgraphStore = defineStore('subgraph', () => {
     return nodeDef !== undefined && nodeDef.isGlobal === true
   }
 
-  function isUserBlueprint(nodeType?: string): boolean {
-    if (!nodeType?.startsWith(typePrefix)) return false
-    const name = nodeType.slice(typePrefix.length)
-    return name in subgraphCache && !isGlobalBlueprint(name)
-  }
-
   return {
     deleteBlueprint,
     editBlueprint,
@@ -445,7 +439,6 @@ export const useSubgraphStore = defineStore('subgraph', () => {
     getBlueprint,
     isGlobalBlueprint,
     isSubgraphBlueprint,
-    isUserBlueprint,
     publishSubgraph,
     subgraphBlueprints,
     typePrefix