Range editor

browser_tests/assets/subgraphs/basic-subgraph-zero-uuid.json

@@ -1,197 +0,0 @@
-{
-  "id": "00000000-0000-0000-0000-000000000000",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "e5fb1765-9323-4548-801a-5aead34d879e",
-      "pos": [627.5973510742188, 423.0972900390625],
-      "size": [144.15234375, 46],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {},
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "e5fb1765-9323-4548-801a-5aead34d879e",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 2,
-          "lastLinkId": 4,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [347.90441582814213, 417.3822440655296, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [892.5973510742188, 416.0972900390625, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "c5cc99d8-a2b6-4bf3-8be7-d4949ef736cd",
-            "name": "positive",
-            "type": "CONDITIONING",
-            "linkIds": [1],
-            "pos": {
-              "0": 447.9044189453125,
-              "1": 437.3822326660156
-            }
-          }
-        ],
-        "outputs": [
-          {
-            "id": "9bd488b9-e907-4c95-a7a4-85c5597a87af",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [2],
-            "pos": {
-              "0": 912.5973510742188,
-              "1": 436.0972900390625
-            }
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "KSampler",
-            "pos": [554.8743286132812, 100.95539093017578],
-            "size": [270, 262],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "model",
-                "name": "model",
-                "type": "MODEL",
-                "link": null
-              },
-              {
-                "localized_name": "positive",
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": 1
-              },
-              {
-                "localized_name": "negative",
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": null
-              },
-              {
-                "localized_name": "latent_image",
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [2]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
-          },
-          {
-            "id": 2,
-            "type": "VAEEncode",
-            "pos": [685.1265869140625, 439.1734619140625],
-            "size": [140, 46],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "pixels",
-                "name": "pixels",
-                "type": "IMAGE",
-                "link": null
-              },
-              {
-                "localized_name": "vae",
-                "name": "vae",
-                "type": "VAE",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [4]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEEncode"
-            }
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 1,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 2,
-            "origin_id": 1,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "LATENT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 0.8894351682943402,
-      "offset": [58.7671207025881, 137.7124650620126]
-    },
-    "frontendVersion": "1.24.1"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/components/OutputHistory.ts

@@ -1,67 +0,0 @@
-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/helpers/AppModeHelper.ts

@@ -3,7 +3,6 @@ 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'
@@ -14,14 +13,12 @@ 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 {
@@ -81,10 +78,6 @@ 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,36 +1,9 @@
 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) {}
 
@@ -126,69 +99,41 @@ export class BuilderSelectHelper {
     await this.comfyPage.nextFrame()
   }
 
-  /**
-   * 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) {
+  /** Center on a node and click its first widget to select it as input. */
+  async selectInputWidget(node: NodeReference) {
     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 widgetLocator = this.comfyPage.vueNodes
-      .getNodeLocator(String(nodeRef.id))
-      .getByLabel(widgetName, { exact: true })
-    await widgetLocator.click({ force: true })
-    await this.comfyPage.nextFrame()
-  }
+    await node.centerOnNode()
 
-  /** All IoItem title locators in the inputs step sidebar. */
-  get inputItemTitles(): Locator {
-    return this.page.getByTestId(TestIds.builder.ioItemTitle)
-  }
-
-  /** 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)
+    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)
+    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()
+
+    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
     )
-    await nodeLocator.click({ force: true })
     await this.comfyPage.nextFrame()
   }
 }

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -1,207 +0,0 @@
-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/selectors.ts

@@ -111,23 +111,7 @@ export const TestIds = {
     ioItem: 'builder-io-item',
     ioItemTitle: 'builder-io-item-title',
     widgetActionsMenu: 'widget-actions-menu',
-    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'
+    opensAs: 'builder-opens-as'
   },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
@@ -165,7 +149,6 @@ 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],

browser_tests/fixtures/ws.ts

@@ -1,45 +1,53 @@
 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<{
-  getWebSocket: () => Promise<MockWebSocket>
+  ws: { trigger(data: unknown, url?: string): Promise<void> }
 }>({
-  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
+  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
+            }
           }
-        }
-        latest = mock
-        resolve?.(mock)
+        })
       })
 
-      await use(() => {
-        if (latest) return Promise.resolve(latest)
-        return new Promise<MockWebSocket>((r) => {
-          resolve = r
-        })
+      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]
+          )
+        }
       })
     },
+    // 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,18 +1,11 @@
 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.
  *
@@ -20,48 +13,41 @@ interface BuilderSetupResult {
  * to subgraph), then enters builder mode and selects inputs + outputs.
  *
  * @param comfyPage - The page fixture.
- * @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.
+ * @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.
  */
 export async function setupBuilder(
   comfyPage: ComfyPage,
-  prepareGraph?: (ksampler: NodeReference) => Promise<BuilderSetupResult>,
-  widgetNames?: string[]
-): Promise<void> {
+  getInputNode?: (ksampler: NodeReference) => Promise<NodeReference>
+): Promise<NodeReference> {
   const { appMode } = comfyPage
   await comfyPage.workflow.loadWorkflow('default')
 
   const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-
-  const { inputNodeTitle, widgetNames: inputWidgets } = prepareGraph
-    ? await prepareGraph(ksampler)
-    : { inputNodeTitle: 'KSampler', widgetNames: widgetNames ?? ['seed'] }
+  const inputNode = getInputNode ? await getInputNode(ksampler) : ksampler
 
   await fitToViewInstant(comfyPage)
   await appMode.enterBuilder()
   await appMode.steps.goToInputs()
-
-  for (const name of inputWidgets) {
-    await appMode.select.selectInputWidget(inputNodeTitle, name)
-  }
+  await appMode.select.selectInputWidget(inputNode)
 
   await appMode.steps.goToOutputs()
-  await appMode.select.selectOutputNode('Save Image')
+  await appMode.select.selectOutputNode()
+
+  return inputNode
 }
 
 /**
  * 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<void> {
-  await setupBuilder(comfyPage, async (ksampler) => {
+): Promise<NodeReference> {
+  return setupBuilder(comfyPage, async (ksampler) => {
     await ksampler.click('title')
     const subgraphNode = await ksampler.convertToSubgraph()
     await comfyPage.nextFrame()
@@ -72,52 +58,10 @@ export async function setupSubgraphBuilder(
     )
     expect(promotedNames).toContain('seed')
 
-    return {
-      inputNodeTitle: 'New Subgraph',
-      widgetNames: ['seed']
-    }
+    return subgraphNode
   })
 }
 
-/**
- * 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,6 +1,7 @@
 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'
@@ -17,10 +18,8 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
    */
   test('Does not auto-queue multiple changes at a time', async ({
     comfyPage,
-    getWebSocket
+    ws
   }) => {
-    const { ws } = await getWebSocket()
-
     // Enable change auto-queue mode
     const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
     expect(await queueOpts.getMode()).toBe('disabled')
@@ -63,19 +62,17 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
     }
 
     // Trigger a status websocket message
-    const triggerStatus = (queueSize: number) => {
-      ws.send(
-        JSON.stringify({
-          type: 'status',
-          data: {
-            status: {
-              exec_info: {
-                queue_remaining: queueSize
-              }
+    const triggerStatus = async (queueSize: number) => {
+      await ws.trigger({
+        type: 'status',
+        data: {
+          status: {
+            exec_info: {
+              queue_remaining: queueSize
             }
           }
-        })
-      )
+        }
+      } as StatusWsMessage)
     }
 
     // Extract the width from the queue response
@@ -107,8 +104,8 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
     ).toBe(1)
 
     // Trigger a status update so auto-queue re-runs
-    triggerStatus(1)
-    triggerStatus(0)
+    await triggerStatus(1)
+    await triggerStatus(0)
 
     // Ensure the queued width is the last queued value
     expect(

browser_tests/tests/builderReorder.spec.ts

@@ -1,163 +0,0 @@
-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,14 +2,45 @@ 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'
+import { 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.
@@ -172,9 +203,10 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
 
     // Select I/O to enable the button
     await appMode.steps.goToInputs()
-    await appMode.select.selectInputWidget('KSampler', 'seed')
+    const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+    await appMode.select.selectInputWidget(ksampler)
     await appMode.steps.goToOutputs()
-    await appMode.select.selectOutputNode('Save Image')
+    await appMode.select.selectOutputNode()
 
     // State 2: Enabled "Save as" (unsaved, has outputs)
     const enabledBox = await appMode.footer.saveAsButton.boundingBox()

browser_tests/tests/outputHistory.spec.ts

@@ -1,350 +0,0 @@
-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,
-  exec?: ExecutionHelper
-) {
-  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()
-    await expect(comfyPage.appMode.outputHistory.skeletons).toHaveCount(0)
-  })
-
-  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()
-    await expect(comfyPage.appMode.outputHistory.skeletons).toHaveCount(0)
-  })
-
-  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,
-      imageOutput('output_001.png', 'output_002.png', 'output_003.png')
-    )
-
-    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()
-
-    // First image is auto-selected
-    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('first.png'))
-    await expect(
-      comfyPage.appMode.outputHistory.selectedInProgressItem.getByTestId(
-        'linear-image-output'
-      )
-    ).toHaveAttribute('src', /first\.png/)
-
-    // Second image arrives — selection auto-follows without user click
-    exec.executed(jobId, SAVE_IMAGE_NODE, imageOutput('second.png'))
-    await expect(
-      comfyPage.appMode.outputHistory.selectedInProgressItem.getByTestId(
-        'linear-image-output'
-      )
-    ).toHaveAttribute('src', /second\.png/)
-  })
-
-  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 (not auto-followed to second)
-    await expect(
-      comfyPage.appMode.outputHistory.selectedInProgressItem
-    ).toHaveCount(1)
-    await expect(
-      comfyPage.appMode.outputHistory.selectedInProgressItem.getByTestId(
-        'linear-image-output'
-      )
-    ).toHaveAttribute('src', /first\.png/)
-  })
-
-  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, exec)
-
-    // 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/subgraph/subgraphZeroUuid.spec.ts

@@ -1,49 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe(
-  'Zero UUID workflow: subgraph undo rendering',
-  { tag: ['@workflow', '@subgraph'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      test.setTimeout(30000) // Extend timeout as we need to reload the page an additional time
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.page.reload() // Reload page as we need to enter in Vue mode
-      await comfyPage.page.waitForFunction(() => !!window.app?.graph)
-    })
-
-    test('Undo after subgraph enter/exit renders all nodes when workflow starts with zero UUID', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/basic-subgraph-zero-uuid'
-      )
-      await comfyPage.vueNodes.waitForNodes()
-
-      const assertInSubgraph = async (inSubgraph: boolean) => {
-        await expect
-          .poll(() => comfyPage.subgraph.isInSubgraph())
-          .toBe(inSubgraph)
-      }
-
-      // Root graph has 1 subgraph node, rendered in the DOM
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
-      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
-
-      await comfyPage.vueNodes.enterSubgraph()
-      await assertInSubgraph(true)
-
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await assertInSubgraph(false)
-
-      await comfyPage.canvas.focus()
-      await comfyPage.keyboard.undo()
-      await comfyPage.nextFrame()
-
-      // After undo, the subgraph node is still visible and rendered
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
-      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
-    })
-  }
-)

src/components/builder/AppModeWidgetList.vue

@@ -170,7 +170,6 @@ defineExpose({ handleDragDrop })
         ? `${action.widget.label ?? action.widget.name} — ${action.node.title}`
         : undefined
     "
-    data-testid="builder-widget-item"
   >
     <div
       :class="
@@ -182,7 +181,6 @@ 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/curve/CurveEditor.vue

@@ -89,7 +89,7 @@ import { cn } from '@/utils/tailwindUtil'
 
 import type { CurveInterpolation, CurvePoint } from './types'
 
-import { histogramToPath } from './curveUtils'
+import { histogramToPath } from '@/utils/histogramUtil'
 
 const {
   curveColor = 'white',

src/components/curve/curveUtils.test.ts

@@ -5,8 +5,7 @@ import type { CurvePoint } from './types'
 import {
   createLinearInterpolator,
   createMonotoneInterpolator,
-  curvesToLUT,
-  histogramToPath
+  curvesToLUT
 } from './curveUtils'
 
 describe('createMonotoneInterpolator', () => {
@@ -164,37 +163,3 @@ describe('curvesToLUT', () => {
     }
   })
 })
-
-describe('histogramToPath', () => {
-  it('returns empty string for empty histogram', () => {
-    expect(histogramToPath(new Uint32Array(0))).toBe('')
-  })
-
-  it('returns empty string when all bins are zero', () => {
-    expect(histogramToPath(new Uint32Array(256))).toBe('')
-  })
-
-  it('returns a closed SVG path for valid histogram', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++) histogram[i] = i + 1
-    const path = histogramToPath(histogram)
-    expect(path).toMatch(/^M0,1/)
-    expect(path).toMatch(/L1,1 Z$/)
-  })
-
-  it('normalizes using 99.5th percentile to suppress outliers', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++) histogram[i] = 100
-    histogram[255] = 100000
-    const path = histogramToPath(histogram)
-    // Most bins should map to y=0 (1 - 100/100 = 0) since
-    // the 99.5th percentile is 100, not the outlier 100000
-    const yValues = path
-      .split(/[ML]/)
-      .filter(Boolean)
-      .map((s) => parseFloat(s.split(',')[1]))
-      .filter((y) => !isNaN(y))
-    const nearZero = yValues.filter((y) => Math.abs(y) < 0.01)
-    expect(nearZero.length).toBeGreaterThan(200)
-  })
-})

src/components/curve/curveUtils.ts

@@ -149,34 +149,6 @@ export function createMonotoneInterpolator(
   }
 }
 
-/**
- * Convert a histogram (arbitrary number of bins) into an SVG path string.
- * Applies square-root scaling and normalizes using the 99.5th percentile
- * to avoid outlier spikes.
- */
-export function histogramToPath(histogram: Uint32Array): string {
-  const len = histogram.length
-  if (len === 0) return ''
-
-  const sqrtValues = new Float32Array(len)
-  for (let i = 0; i < len; i++) sqrtValues[i] = Math.sqrt(histogram[i])
-
-  const sorted = Array.from(sqrtValues).sort((a, b) => a - b)
-  const max = sorted[Math.floor((len - 1) * 0.995)]
-  if (max === 0) return ''
-
-  const invMax = 1 / max
-  const lastIdx = len - 1
-  const parts: string[] = ['M0,1']
-  for (let i = 0; i < len; i++) {
-    const x = lastIdx === 0 ? 0.5 : i / lastIdx
-    const y = 1 - Math.min(1, sqrtValues[i] * invMax)
-    parts.push(`L${x},${y}`)
-  }
-  parts.push('L1,1 Z')
-  return parts.join(' ')
-}
-
 export function curvesToLUT(
   points: CurvePoint[],
   interpolation: CurveInterpolation = 'monotone_cubic'

src/components/range/RangeEditor.test.ts

@@ -0,0 +1,131 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import RangeEditor from './RangeEditor.vue'
+
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
+
+function mountEditor(props: InstanceType<typeof RangeEditor>['$props']) {
+  return mount(RangeEditor, {
+    props,
+    global: { plugins: [i18n] }
+  })
+}
+
+describe('RangeEditor', () => {
+  it('renders with min and max handles', () => {
+    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
+
+    expect(wrapper.find('svg').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="handle-min"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="handle-max"]').exists()).toBe(true)
+  })
+
+  it('highlights selected range in plain mode', () => {
+    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
+
+    const highlight = wrapper.find('[data-testid="range-highlight"]')
+    expect(highlight.attributes('x')).toBe('0.2')
+    expect(
+      Number.parseFloat(highlight.attributes('width') ?? 'NaN')
+    ).toBeCloseTo(0.6, 6)
+  })
+
+  it('dims area outside the range in histogram mode', () => {
+    const histogram = new Uint32Array(256)
+    for (let i = 0; i < 256; i++)
+      histogram[i] = Math.floor(50 + 50 * Math.sin(i / 20))
+
+    const wrapper = mountEditor({
+      modelValue: { min: 0.2, max: 0.8 },
+      display: 'histogram',
+      histogram
+    })
+
+    const left = wrapper.find('[data-testid="range-dim-left"]')
+    const right = wrapper.find('[data-testid="range-dim-right"]')
+    expect(left.attributes('width')).toBe('0.2')
+    expect(right.attributes('x')).toBe('0.8')
+  })
+
+  it('hides midpoint handle by default', () => {
+    const wrapper = mountEditor({
+      modelValue: { min: 0, max: 1, midpoint: 0.5 }
+    })
+
+    expect(wrapper.find('[data-testid="handle-midpoint"]').exists()).toBe(false)
+  })
+
+  it('shows midpoint handle when showMidpoint is true', () => {
+    const wrapper = mountEditor({
+      modelValue: { min: 0, max: 1, midpoint: 0.5 },
+      showMidpoint: true
+    })
+
+    expect(wrapper.find('[data-testid="handle-midpoint"]').exists()).toBe(true)
+  })
+
+  it('renders gradient background when display is gradient', () => {
+    const wrapper = mountEditor({
+      modelValue: { min: 0, max: 1 },
+      display: 'gradient',
+      gradientStops: [
+        { offset: 0, color: [0, 0, 0] as const },
+        { offset: 1, color: [255, 255, 255] as const }
+      ]
+    })
+
+    expect(wrapper.find('[data-testid="gradient-bg"]').exists()).toBe(true)
+    expect(wrapper.find('linearGradient').exists()).toBe(true)
+  })
+
+  it('renders histogram path when display is histogram with data', () => {
+    const histogram = new Uint32Array(256)
+    for (let i = 0; i < 256; i++)
+      histogram[i] = Math.floor(50 + 50 * Math.sin(i / 20))
+
+    const wrapper = mountEditor({
+      modelValue: { min: 0, max: 1 },
+      display: 'histogram',
+      histogram
+    })
+
+    expect(wrapper.find('[data-testid="histogram-path"]').exists()).toBe(true)
+  })
+
+  it('renders inputs for min and max', () => {
+    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
+
+    const inputs = wrapper.findAll('input')
+    expect(inputs).toHaveLength(2)
+  })
+
+  it('renders midpoint input when showMidpoint is true', () => {
+    const wrapper = mountEditor({
+      modelValue: { min: 0, max: 1, midpoint: 0.5 },
+      showMidpoint: true
+    })
+
+    const inputs = wrapper.findAll('input')
+    expect(inputs).toHaveLength(3)
+  })
+
+  it('normalizes handle positions with custom value range', () => {
+    const wrapper = mountEditor({
+      modelValue: { min: 64, max: 192 },
+      valueMin: 0,
+      valueMax: 255
+    })
+
+    const minHandle = wrapper.find('[data-testid="handle-min"]')
+    const maxHandle = wrapper.find('[data-testid="handle-max"]')
+
+    expect(
+      Number.parseFloat((minHandle.element as HTMLElement).style.left)
+    ).toBeCloseTo(25, 0)
+    expect(
+      Number.parseFloat((maxHandle.element as HTMLElement).style.left)
+    ).toBeCloseTo(75, 0)
+  })
+})

src/components/range/RangeEditor.vue

@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <div
+      ref="trackRef"
+      class="relative select-none"
+      @pointerdown.stop="onTrackPointerDown"
+      @contextmenu.prevent.stop
+    >
+      <svg
+        viewBox="0 0 1 1"
+        preserveAspectRatio="none"
+        :class="
+          cn(
+            'block w-full rounded-sm bg-node-component-surface',
+            display === 'histogram' ? 'aspect-3/2' : 'h-8'
+          )
+        "
+      >
+        <defs v-if="display === 'gradient'">
+          <linearGradient :id="gradientId" x1="0" y1="0" x2="1" y2="0">
+            <stop
+              v-for="(stop, i) in computedStops"
+              :key="i"
+              :offset="stop.offset"
+              :stop-color="`rgb(${stop.color[0]},${stop.color[1]},${stop.color[2]})`"
+            />
+          </linearGradient>
+        </defs>
+
+        <rect
+          v-if="display === 'gradient'"
+          data-testid="gradient-bg"
+          x="0"
+          y="0"
+          width="1"
+          height="1"
+          :fill="`url(#${gradientId})`"
+        />
+
+        <path
+          v-if="display === 'histogram' && histogramPath"
+          data-testid="histogram-path"
+          :d="histogramPath"
+          fill="currentColor"
+          fill-opacity="0.3"
+        />
+
+        <rect
+          v-if="display === 'plain'"
+          data-testid="range-highlight"
+          :x="minNorm"
+          y="0"
+          :width="Math.max(0, maxNorm - minNorm)"
+          height="1"
+          fill="white"
+          fill-opacity="0.15"
+        />
+        <template v-if="display === 'histogram'">
+          <rect
+            v-if="minNorm > 0"
+            data-testid="range-dim-left"
+            x="0"
+            y="0"
+            :width="minNorm"
+            height="1"
+            fill="black"
+            fill-opacity="0.5"
+          />
+          <rect
+            v-if="maxNorm < 1"
+            data-testid="range-dim-right"
+            :x="maxNorm"
+            y="0"
+            :width="1 - maxNorm"
+            height="1"
+            fill="black"
+            fill-opacity="0.5"
+          />
+        </template>
+      </svg>
+
+      <template v-if="!disabled">
+        <div
+          data-testid="handle-min"
+          class="absolute -translate-x-1/2 cursor-grab"
+          :style="{ left: `${minNorm * 100}%`, bottom: '-10px' }"
+          @pointerdown.stop="startDrag('min', $event)"
+        >
+          <svg width="12" height="10" viewBox="0 0 12 10">
+            <polygon
+              points="6,0 0,10 12,10"
+              fill="#333"
+              stroke="#aaa"
+              stroke-width="0.5"
+            />
+          </svg>
+        </div>
+
+        <div
+          v-if="showMidpoint && modelValue.midpoint !== undefined"
+          data-testid="handle-midpoint"
+          class="absolute -translate-x-1/2 cursor-grab"
+          :style="{ left: `${midpointPercent}%`, bottom: '-10px' }"
+          @pointerdown.stop="startDrag('midpoint', $event)"
+        >
+          <svg width="12" height="10" viewBox="0 0 12 10">
+            <polygon
+              points="6,0 0,10 12,10"
+              fill="#888"
+              stroke="#ccc"
+              stroke-width="0.5"
+            />
+          </svg>
+        </div>
+
+        <div
+          data-testid="handle-max"
+          class="absolute -translate-x-1/2 cursor-grab"
+          :style="{ left: `${maxNorm * 100}%`, bottom: '-10px' }"
+          @pointerdown.stop="startDrag('max', $event)"
+        >
+          <svg width="12" height="10" viewBox="0 0 12 10">
+            <polygon
+              points="6,0 0,10 12,10"
+              fill="white"
+              stroke="#555"
+              stroke-width="0.5"
+            />
+          </svg>
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="!disabled"
+      class="mt-3 flex items-center justify-between"
+      @pointerdown.stop
+    >
+      <ScrubableNumberInput
+        v-model="minValue"
+        :display-value="formatValue(minValue)"
+        :min="valueMin"
+        :max="valueMax"
+        :step="step"
+        hide-buttons
+        class="w-16"
+      />
+      <ScrubableNumberInput
+        v-if="showMidpoint && modelValue.midpoint !== undefined"
+        v-model="midpointValue"
+        :display-value="midpointValue.toFixed(2)"
+        :min="midpointScale === 'gamma' ? 0.01 : 0"
+        :max="midpointScale === 'gamma' ? 9.99 : 1"
+        :step="0.01"
+        hide-buttons
+        class="w-16"
+      />
+      <ScrubableNumberInput
+        v-model="maxValue"
+        :display-value="formatValue(maxValue)"
+        :min="valueMin"
+        :max="valueMax"
+        :step="step"
+        hide-buttons
+        class="w-16"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef, useId, useTemplateRef } from 'vue'
+
+import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
+import { cn } from '@/utils/tailwindUtil'
+import { histogramToPath } from '@/utils/histogramUtil'
+import { useRangeEditor } from '@/composables/useRangeEditor'
+import type { ColorStop } from '@/lib/litegraph/src/interfaces'
+import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
+
+import {
+  clamp,
+  gammaToPosition,
+  normalize,
+  positionToGamma
+} from './rangeUtils'
+
+const {
+  display = 'plain',
+  gradientStops,
+  showMidpoint = false,
+  midpointScale = 'linear',
+  histogram,
+  disabled = false,
+  valueMin = 0,
+  valueMax = 1
+} = defineProps<{
+  display?: 'plain' | 'gradient' | 'histogram'
+  gradientStops?: ColorStop[]
+  showMidpoint?: boolean
+  midpointScale?: 'linear' | 'gamma'
+  histogram?: Uint32Array | null
+  disabled?: boolean
+  valueMin?: number
+  valueMax?: number
+}>()
+
+const modelValue = defineModel<RangeValue>({ required: true })
+
+const trackRef = useTemplateRef<HTMLDivElement>('trackRef')
+const gradientId = useId()
+
+const { handleTrackPointerDown, startDrag } = useRangeEditor({
+  trackRef,
+  modelValue,
+  valueMin: toRef(() => valueMin),
+  valueMax: toRef(() => valueMax)
+})
+
+function onTrackPointerDown(e: PointerEvent) {
+  if (!disabled) handleTrackPointerDown(e)
+}
+
+const isIntegerRange = computed(() => valueMax - valueMin >= 2)
+const step = computed(() => (isIntegerRange.value ? 1 : 0.01))
+
+function formatValue(v: number): string {
+  return isIntegerRange.value ? Math.round(v).toString() : v.toFixed(2)
+}
+
+const minNorm = computed(() =>
+  normalize(modelValue.value.min, valueMin, valueMax)
+)
+const maxNorm = computed(() =>
+  normalize(modelValue.value.max, valueMin, valueMax)
+)
+
+const computedStops = computed(
+  () =>
+    gradientStops ?? [
+      { offset: 0, color: [0, 0, 0] as const },
+      { offset: 1, color: [255, 255, 255] as const }
+    ]
+)
+
+const midpointPercent = computed(() => {
+  const { min, max, midpoint } = modelValue.value
+  if (midpoint === undefined) return 0
+  const midAbs = min + midpoint * (max - min)
+  return normalize(midAbs, valueMin, valueMax) * 100
+})
+
+const minValue = computed({
+  get: () => modelValue.value.min,
+  set: (min) => {
+    modelValue.value = {
+      ...modelValue.value,
+      min: Math.min(clamp(min, valueMin, valueMax), modelValue.value.max)
+    }
+  }
+})
+
+const maxValue = computed({
+  get: () => modelValue.value.max,
+  set: (max) => {
+    modelValue.value = {
+      ...modelValue.value,
+      max: Math.max(clamp(max, valueMin, valueMax), modelValue.value.min)
+    }
+  }
+})
+
+const midpointValue = computed({
+  get: () => {
+    const pos = modelValue.value.midpoint ?? 0.5
+    return midpointScale === 'gamma' ? positionToGamma(pos) : pos
+  },
+  set: (val) => {
+    const position =
+      midpointScale === 'gamma'
+        ? clamp(gammaToPosition(val), 0, 1)
+        : clamp(val, 0, 1)
+    modelValue.value = { ...modelValue.value, midpoint: position }
+  }
+})
+
+const histogramPath = computed(() =>
+  histogram ? histogramToPath(histogram) : ''
+)
+</script>

src/components/range/WidgetRange.vue

@@ -0,0 +1,74 @@
+<template>
+  <RangeEditor
+    :model-value="effectiveValue.value"
+    :display="widget?.options?.display"
+    :gradient-stops="widget?.options?.gradient_stops"
+    :show-midpoint="widget?.options?.show_midpoint"
+    :midpoint-scale="widget?.options?.midpoint_scale"
+    :histogram="histogram"
+    :disabled="isDisabled"
+    :value-min="widget?.options?.value_min"
+    :value-max="widget?.options?.value_max"
+    @update:model-value="onValueChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+import {
+  singleValueExtractor,
+  useUpstreamValue
+} from '@/composables/useUpstreamValue'
+import type {
+  IWidgetRangeOptions,
+  RangeValue
+} from '@/lib/litegraph/src/types/widgets'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import RangeEditor from './RangeEditor.vue'
+import { isRangeValue } from './rangeUtils'
+
+const { widget } = defineProps<{
+  widget: SimplifiedWidget<RangeValue, IWidgetRangeOptions>
+}>()
+
+const modelValue = defineModel<RangeValue>({
+  default: () => ({ min: 0, max: 1 })
+})
+
+const isDisabled = computed(() => !!widget.options?.disabled)
+
+const nodeOutputStore = useNodeOutputStore()
+const histogram = computed(() => {
+  const locatorId = widget.nodeLocatorId
+  if (!locatorId) return null
+  const output = nodeOutputStore.nodeOutputs[locatorId]
+  const key = `histogram_${widget.name}`
+  const data = (output as Record<string, unknown>)?.[key]
+  if (!Array.isArray(data) || data.length === 0) return null
+  return new Uint32Array(data)
+})
+
+const upstreamValue = useUpstreamValue(
+  () => widget.linkedUpstream,
+  singleValueExtractor(isRangeValue)
+)
+
+watch(upstreamValue, (upstream) => {
+  if (isDisabled.value && upstream) {
+    modelValue.value = upstream
+  }
+})
+
+const effectiveValue = computed(() =>
+  isDisabled.value && upstreamValue.value
+    ? { value: upstreamValue.value }
+    : { value: modelValue.value }
+)
+
+function onValueChange(value: RangeValue) {
+  modelValue.value = value
+}
+</script>

src/components/range/rangeUtils.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  constrainRange,
+  denormalize,
+  formatMidpointLabel,
+  gammaToPosition,
+  isRangeValue,
+  normalize,
+  positionToGamma
+} from './rangeUtils'
+
+describe('normalize', () => {
+  it('normalizes value to 0-1', () => {
+    expect(normalize(128, 0, 256)).toBe(0.5)
+    expect(normalize(0, 0, 255)).toBe(0)
+    expect(normalize(255, 0, 255)).toBe(1)
+  })
+
+  it('returns 0 when min equals max', () => {
+    expect(normalize(5, 5, 5)).toBe(0)
+  })
+})
+
+describe('denormalize', () => {
+  it('converts normalized value back to range', () => {
+    expect(denormalize(0.5, 0, 256)).toBe(128)
+    expect(denormalize(0, 0, 255)).toBe(0)
+    expect(denormalize(1, 0, 255)).toBe(255)
+  })
+
+  it('round-trips with normalize', () => {
+    expect(denormalize(normalize(100, 0, 255), 0, 255)).toBeCloseTo(100)
+  })
+})
+
+describe('positionToGamma', () => {
+  it('converts 0.5 to gamma 1.0', () => {
+    expect(positionToGamma(0.5)).toBeCloseTo(1.0)
+  })
+
+  it('converts 0.25 to gamma 2.0', () => {
+    expect(positionToGamma(0.25)).toBeCloseTo(2.0)
+  })
+})
+
+describe('gammaToPosition', () => {
+  it('converts gamma 1.0 to position 0.5', () => {
+    expect(gammaToPosition(1.0)).toBeCloseTo(0.5)
+  })
+
+  it('converts gamma 2.0 to position 0.25', () => {
+    expect(gammaToPosition(2.0)).toBeCloseTo(0.25)
+  })
+
+  it('round-trips with positionToGamma', () => {
+    for (const pos of [0.1, 0.3, 0.5, 0.7, 0.9]) {
+      expect(gammaToPosition(positionToGamma(pos))).toBeCloseTo(pos)
+    }
+  })
+})
+
+describe('formatMidpointLabel', () => {
+  it('formats linear scale as decimal', () => {
+    expect(formatMidpointLabel(0.5, 'linear')).toBe('0.50')
+  })
+
+  it('formats gamma scale as gamma value', () => {
+    expect(formatMidpointLabel(0.5, 'gamma')).toBe('1.00')
+  })
+})
+
+describe('constrainRange', () => {
+  it('passes through valid range unchanged', () => {
+    const result = constrainRange({ min: 0.2, max: 0.8 })
+    expect(result).toEqual({ min: 0.2, max: 0.8, midpoint: undefined })
+  })
+
+  it('clamps values to default [0, 1]', () => {
+    const result = constrainRange({ min: -0.5, max: 1.5 })
+    expect(result.min).toBe(0)
+    expect(result.max).toBe(1)
+  })
+
+  it('clamps values to custom range', () => {
+    const result = constrainRange({ min: -10, max: 300 }, 0, 255)
+    expect(result.min).toBe(0)
+    expect(result.max).toBe(255)
+  })
+
+  it('enforces min <= max', () => {
+    const result = constrainRange({ min: 0.8, max: 0.3 })
+    expect(result.min).toBe(0.8)
+    expect(result.max).toBe(0.8)
+  })
+
+  it('preserves midpoint when present', () => {
+    const result = constrainRange({ min: 0.2, max: 0.8, midpoint: 0.5 })
+    expect(result.midpoint).toBe(0.5)
+  })
+
+  it('clamps midpoint to [0, 1]', () => {
+    const result = constrainRange({ min: 0.2, max: 0.8, midpoint: 1.5 })
+    expect(result.midpoint).toBe(1)
+  })
+})
+
+describe('isRangeValue', () => {
+  it('returns true for valid range', () => {
+    expect(isRangeValue({ min: 0, max: 1 })).toBe(true)
+    expect(isRangeValue({ min: 0, max: 1, midpoint: 0.5 })).toBe(true)
+  })
+
+  it('returns false for non-objects', () => {
+    expect(isRangeValue(null)).toBe(false)
+    expect(isRangeValue(42)).toBe(false)
+    expect(isRangeValue('foo')).toBe(false)
+    expect(isRangeValue([0, 1])).toBe(false)
+  })
+
+  it('returns false for objects missing min or max', () => {
+    expect(isRangeValue({ min: 0 })).toBe(false)
+    expect(isRangeValue({ max: 1 })).toBe(false)
+    expect(isRangeValue({ min: 'a', max: 1 })).toBe(false)
+  })
+})

src/components/range/rangeUtils.ts

@@ -0,0 +1,58 @@
+import { clamp } from 'es-toolkit'
+
+import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
+
+export { clamp }
+
+export function normalize(value: number, min: number, max: number): number {
+  return max === min ? 0 : (value - min) / (max - min)
+}
+
+export function denormalize(
+  normalized: number,
+  min: number,
+  max: number
+): number {
+  return min + normalized * (max - min)
+}
+
+export function positionToGamma(position: number): number {
+  const clamped = clamp(position, 0.001, 0.999)
+  return -Math.log2(clamped)
+}
+
+export function gammaToPosition(gamma: number): number {
+  return Math.pow(2, -gamma)
+}
+
+export function formatMidpointLabel(
+  position: number,
+  scale: 'linear' | 'gamma'
+): string {
+  if (scale === 'gamma') {
+    return positionToGamma(position).toFixed(2)
+  }
+  return position.toFixed(2)
+}
+
+export function constrainRange(
+  value: RangeValue,
+  valueMin: number = 0,
+  valueMax: number = 1
+): RangeValue {
+  const min = clamp(value.min, valueMin, valueMax)
+  const max = clamp(Math.max(min, value.max), valueMin, valueMax)
+  const midpoint =
+    value.midpoint !== undefined ? clamp(value.midpoint, 0, 1) : undefined
+  return { min, max, midpoint }
+}
+
+export function isRangeValue(value: unknown): value is RangeValue {
+  if (typeof value !== 'object' || value === null || Array.isArray(value))
+    return false
+  const v = value as Record<string, unknown>
+  const hasFiniteBounds = Number.isFinite(v.min) && Number.isFinite(v.max)
+  const hasValidMidpoint =
+    v.midpoint === undefined || Number.isFinite(v.midpoint)
+  return hasFiniteBounds && hasValidMidpoint
+}

src/composables/useRangeEditor.ts

@@ -0,0 +1,115 @@
+import { onBeforeUnmount, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import { clamp } from 'es-toolkit'
+
+import { denormalize, normalize } from '@/components/range/rangeUtils'
+import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
+
+type HandleType = 'min' | 'max' | 'midpoint'
+
+interface UseRangeEditorOptions {
+  trackRef: Ref<HTMLElement | null>
+  modelValue: Ref<RangeValue>
+  valueMin: Ref<number>
+  valueMax: Ref<number>
+}
+
+export function useRangeEditor({
+  trackRef,
+  modelValue,
+  valueMin,
+  valueMax
+}: UseRangeEditorOptions) {
+  const activeHandle = ref<HandleType | null>(null)
+  let cleanupDrag: (() => void) | null = null
+
+  function pointerToValue(e: PointerEvent): number {
+    const el = trackRef.value
+    if (!el) return valueMin.value
+    const rect = el.getBoundingClientRect()
+    const normalized = Math.max(
+      0,
+      Math.min(1, (e.clientX - rect.left) / rect.width)
+    )
+    return denormalize(normalized, valueMin.value, valueMax.value)
+  }
+
+  function nearestHandle(value: number): HandleType {
+    const { min, max, midpoint } = modelValue.value
+    const dMin = Math.abs(value - min)
+    const dMax = Math.abs(value - max)
+    let best: HandleType = dMin <= dMax ? 'min' : 'max'
+    const bestDist = Math.min(dMin, dMax)
+    if (midpoint !== undefined) {
+      const midAbs = min + midpoint * (max - min)
+      if (Math.abs(value - midAbs) < bestDist) {
+        best = 'midpoint'
+      }
+    }
+    return best
+  }
+
+  function updateValue(handle: HandleType, value: number) {
+    const current = modelValue.value
+    const clamped = clamp(value, valueMin.value, valueMax.value)
+
+    if (handle === 'min') {
+      modelValue.value = { ...current, min: Math.min(clamped, current.max) }
+    } else if (handle === 'max') {
+      modelValue.value = { ...current, max: Math.max(clamped, current.min) }
+    } else {
+      const range = current.max - current.min
+      const midNorm =
+        range > 0 ? normalize(clamped, current.min, current.max) : 0
+      const midpoint = Math.max(0, Math.min(1, midNorm))
+      modelValue.value = { ...current, midpoint }
+    }
+  }
+
+  function handleTrackPointerDown(e: PointerEvent) {
+    if (e.button !== 0) return
+    startDrag(nearestHandle(pointerToValue(e)), e)
+  }
+
+  function startDrag(handle: HandleType, e: PointerEvent) {
+    if (e.button !== 0) return
+    cleanupDrag?.()
+
+    activeHandle.value = handle
+    const el = trackRef.value
+    if (!el) return
+
+    el.setPointerCapture(e.pointerId)
+
+    const onMove = (ev: PointerEvent) => {
+      if (!activeHandle.value) return
+      updateValue(activeHandle.value, pointerToValue(ev))
+    }
+
+    const endDrag = () => {
+      if (!activeHandle.value) return
+      activeHandle.value = null
+      el.removeEventListener('pointermove', onMove)
+      el.removeEventListener('pointerup', endDrag)
+      el.removeEventListener('lostpointercapture', endDrag)
+      cleanupDrag = null
+    }
+
+    cleanupDrag = endDrag
+
+    el.addEventListener('pointermove', onMove)
+    el.addEventListener('pointerup', endDrag)
+    el.addEventListener('lostpointercapture', endDrag)
+  }
+
+  onBeforeUnmount(() => {
+    cleanupDrag?.()
+  })
+
+  return {
+    activeHandle,
+    handleTrackPointerDown,
+    startDrag
+  }
+}

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

@@ -12,7 +12,6 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type { SerialisableGraph } from '@/lib/litegraph/src/types/serialisation'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
-import { zeroUuid } from '@/lib/litegraph/src/utils/uuid'
 import { usePromotionStore } from '@/stores/promotionStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import {
@@ -1006,25 +1005,3 @@ describe('deduplicateSubgraphNodeIds (via configure)', () => {
     expect(nodeIdSet(graph, SUBGRAPH_B)).toEqual(new Set([20, 21, 22]))
   })
 })
-
-describe('Zero UUID handling in configure', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia())
-  })
-
-  it('rejects zeroUuid for root graphs and assigns a new ID', () => {
-    const graph = new LGraph()
-    const data = graph.serialize()
-    data.id = zeroUuid
-    graph.configure(data)
-    expect(graph.id).not.toBe(zeroUuid)
-  })
-
-  it('preserves zeroUuid for subgraphs', () => {
-    const graph = new LGraph()
-    const subgraphData = { ...createTestSubgraphData(), id: zeroUuid }
-    const subgraph = graph.createSubgraph(subgraphData)
-    subgraph.configure(subgraphData)
-    expect(subgraph.id).toBe(zeroUuid)
-  })
-})

src/lib/litegraph/src/LGraph.ts

@@ -2480,8 +2480,8 @@ export class LGraph
   protected _configureBase(data: ISerialisedGraph | SerialisableGraph): void {
     const { id, extra } = data
 
-    // Create a new graph ID if none is provided or the zero UUID is used on the root graph
-    if (id && !(this.isRootGraph && id === zeroUuid)) {
+    // Create a new graph ID if none is provided
+    if (id) {
       this.id = id
     } else if (this.id === zeroUuid) {
       this.id = createUuidv4()

src/lib/litegraph/src/types/widgets.ts

@@ -139,6 +139,7 @@ export type IWidget =
   | IBoundingBoxWidget
   | ICurveWidget
   | IPainterWidget
+  | IRangeWidget
 
 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
   type: 'toggle'
@@ -341,6 +342,31 @@ export interface IPainterWidget extends IBaseWidget<string, 'painter'> {
   value: string
 }
 
+export interface RangeValue {
+  min: number
+  max: number
+  midpoint?: number
+}
+
+export interface IWidgetRangeOptions extends IWidgetOptions {
+  display?: 'plain' | 'gradient' | 'histogram'
+  gradient_stops?: ColorStop[]
+  show_midpoint?: boolean
+  midpoint_scale?: 'linear' | 'gamma'
+  value_min?: number
+  value_max?: number
+  histogram?: Uint32Array | null
+}
+
+export interface IRangeWidget extends IBaseWidget<
+  RangeValue,
+  'range',
+  IWidgetRangeOptions
+> {
+  type: 'range'
+  value: RangeValue
+}
+
 /**
  * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
  * Override linkedWidgets[]

src/lib/litegraph/src/widgets/RangeWidget.ts

@@ -0,0 +1,16 @@
+import type { IRangeWidget } from '../types/widgets'
+import { BaseWidget } from './BaseWidget'
+import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
+
+export class RangeWidget
+  extends BaseWidget<IRangeWidget>
+  implements IRangeWidget
+{
+  override type = 'range' as const
+
+  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
+    this.drawVueOnlyWarning(ctx, options, 'Range')
+  }
+
+  onClick(_options: WidgetEventOptions): void {}
+}

src/lib/litegraph/src/widgets/widgetMap.ts

@@ -22,6 +22,7 @@ import { GalleriaWidget } from './GalleriaWidget'
 import { GradientSliderWidget } from './GradientSliderWidget'
 import { ImageCompareWidget } from './ImageCompareWidget'
 import { PainterWidget } from './PainterWidget'
+import { RangeWidget } from './RangeWidget'
 import { ImageCropWidget } from './ImageCropWidget'
 import { KnobWidget } from './KnobWidget'
 import { LegacyWidget } from './LegacyWidget'
@@ -60,6 +61,7 @@ export type WidgetTypeMap = {
   boundingbox: BoundingBoxWidget
   curve: CurveWidget
   painter: PainterWidget
+  range: RangeWidget
   [key: string]: BaseWidget
 }
 
@@ -140,6 +142,8 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
       return toClass(CurveWidget, narrowedWidget, node)
     case 'painter':
       return toClass(PainterWidget, narrowedWidget, node)
+    case 'range':
+      return toClass(RangeWidget, narrowedWidget, node)
     default: {
       if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node)
     }

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -103,7 +103,6 @@ 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,7 +327,6 @@ 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}`)"
       >
@@ -360,7 +359,6 @@ 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,7 +58,6 @@ 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,7 +15,6 @@ 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"
@@ -24,7 +23,6 @@ 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,15 +9,10 @@ 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
-      data-testid="linear-skeleton"
-      class="skeleton-shimmer size-10 rounded-sm"
-    />
+    <div v-else class="skeleton-shimmer size-10 rounded-sm" />
     <LinearProgressBar class="mt-1 h-1 w-10" rounded />
   </div>
 </template>

src/renderer/extensions/linearMode/linearOutputStore.ts

@@ -246,7 +246,7 @@ export const useLinearOutputStore = defineStore('linearOutput', () => {
     if (!isJobForActiveWorkflow(jobId)) return
 
     const sel = selectedId.value
-    if (!sel || isFollowing.value) {
+    if (!sel || sel.startsWith('slot:') || isFollowing.value) {
       selectedId.value = slotId
       isFollowing.value = true
       return

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

@@ -0,0 +1,37 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  IRangeWidget,
+  IWidgetRangeOptions
+} from '@/lib/litegraph/src/types/widgets'
+import type { RangeInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useRangeWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec): IRangeWidget => {
+    const spec = inputSpec as RangeInputSpec
+    const defaultValue = spec.default ?? { min: 0.0, max: 1.0 }
+
+    const options: IWidgetRangeOptions = {
+      display: spec.display,
+      gradient_stops: spec.gradient_stops,
+      show_midpoint: spec.show_midpoint,
+      midpoint_scale: spec.midpoint_scale,
+      value_min: spec.value_min,
+      value_max: spec.value_max
+    }
+
+    const rawWidget = node.addWidget(
+      'range',
+      spec.name,
+      { ...defaultValue },
+      () => {},
+      options
+    )
+
+    if (rawWidget.type !== 'range') {
+      throw new Error(`Unexpected widget type: ${rawWidget.type}`)
+    }
+
+    return rawWidget as IRangeWidget
+  }
+}

src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts

@@ -63,6 +63,9 @@ const WidgetCurve = defineAsyncComponent(
 const WidgetPainter = defineAsyncComponent(
   () => import('@/components/painter/WidgetPainter.vue')
 )
+const WidgetRange = defineAsyncComponent(
+  () => import('@/components/range/WidgetRange.vue')
+)
 
 export const FOR_TESTING = {
   WidgetButton,
@@ -197,6 +200,14 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
       aliases: ['PAINTER'],
       essential: false
     }
+  ],
+  [
+    'range',
+    {
+      component: WidgetRange,
+      aliases: ['RANGE'],
+      essential: false
+    }
   ]
 ]
 
@@ -234,7 +245,8 @@ const EXPANDING_TYPES = [
   'load3D',
   'curve',
   'painter',
-  'imagecompare'
+  'imagecompare',
+  'range'
 ] as const
 
 export function shouldExpand(type: string): boolean {

src/schemas/nodeDef/nodeDefSchemaV2.ts

@@ -3,6 +3,7 @@ import { z } from 'zod'
 import {
   zBaseInputOptions,
   zBooleanInputOptions,
+  zColorStop,
   zComboInputOptions,
   zFloatInputOptions,
   zIntInputOptions,
@@ -140,6 +141,25 @@ const zCurveInputSpec = zBaseInputOptions.extend({
   default: zCurveData.optional()
 })
 
+const zRangeValue = z.object({
+  min: z.number(),
+  max: z.number(),
+  midpoint: z.number().optional()
+})
+
+const zRangeInputSpec = zBaseInputOptions.extend({
+  type: z.literal('RANGE'),
+  name: z.string(),
+  isOptional: z.boolean().optional(),
+  default: zRangeValue.optional(),
+  display: z.enum(['plain', 'gradient', 'histogram']).optional(),
+  gradient_stops: z.array(zColorStop).optional(),
+  show_midpoint: z.boolean().optional(),
+  midpoint_scale: z.enum(['linear', 'gamma']).optional(),
+  value_min: z.number().optional(),
+  value_max: z.number().optional()
+})
+
 const zCustomInputSpec = zBaseInputOptions.extend({
   type: z.string(),
   name: z.string(),
@@ -161,6 +181,7 @@ const zInputSpec = z.union([
   zGalleriaInputSpec,
   zTextareaInputSpec,
   zCurveInputSpec,
+  zRangeInputSpec,
   zCustomInputSpec
 ])
 
@@ -206,6 +227,7 @@ export type ChartInputSpec = z.infer<typeof zChartInputSpec>
 export type GalleriaInputSpec = z.infer<typeof zGalleriaInputSpec>
 export type TextareaInputSpec = z.infer<typeof zTextareaInputSpec>
 export type CurveInputSpec = z.infer<typeof zCurveInputSpec>
+export type RangeInputSpec = z.infer<typeof zRangeInputSpec>
 export type CustomInputSpec = z.infer<typeof zCustomInputSpec>
 
 export type InputSpec = z.infer<typeof zInputSpec>

src/schemas/nodeDefSchema.ts

@@ -56,16 +56,14 @@ export const zIntInputOptions = zNumericInputOptions.extend({
     .optional()
 })
 
+export const zColorStop = z.object({
+  offset: z.number(),
+  color: z.tuple([z.number(), z.number(), z.number()])
+})
+
 export const zFloatInputOptions = zNumericInputOptions.extend({
   round: z.union([z.number(), z.literal(false)]).optional(),
-  gradient_stops: z
-    .array(
-      z.object({
-        offset: z.number(),
-        color: z.tuple([z.number(), z.number(), z.number()])
-      })
-    )
-    .optional()
+  gradient_stops: z.array(zColorStop).optional()
 })
 
 export const zBooleanInputOptions = zBaseInputOptions.extend({

src/scripts/widgets.ts

@@ -20,6 +20,7 @@ import { useImageUploadWidget } from '@/renderer/extensions/vueNodes/widgets/com
 import { useIntWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
 import { useMarkdownWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget'
 import { usePainterWidget } from '@/renderer/extensions/vueNodes/widgets/composables/usePainterWidget'
+import { useRangeWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRangeWidget'
 import { useStringWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useStringWidget'
 import { useTextareaWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget'
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
@@ -310,6 +311,7 @@ export const ComfyWidgets = {
   PAINTER: transformWidgetConstructorV2ToV1(usePainterWidget()),
   TEXTAREA: transformWidgetConstructorV2ToV1(useTextareaWidget()),
   CURVE: transformWidgetConstructorV2ToV1(useCurveWidget()),
+  RANGE: transformWidgetConstructorV2ToV1(useRangeWidget()),
   ...dynamicWidgets
 } as const
 

src/stores/subgraphNavigationStore.ts

@@ -12,7 +12,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import { app } from '@/scripts/app'
 import { findSubgraphPathById } from '@/utils/graphTraversalUtil'
-import { anyItemOverlapsRect } from '@/utils/mathUtil'
 import { isNonNullish, isSubgraph } from '@/utils/typeGuardUtil'
 
 export const VIEWPORT_CACHE_MAX_SIZE = 32
@@ -139,19 +138,11 @@ export const useSubgraphNavigationStore = defineStore(
         return
       }
 
-      // Cache miss — fit to content only if no nodes are currently visible.
-      // loadGraphData may have already restored extra.ds or called fitView
-      // for templates, so only intervene when the viewport is truly empty.
+      // Cache miss — fit to content after the canvas has the new graph.
+      // rAF fires after layout + paint, when nodes are positioned.
+      const expectedGraphId = graphId
       requestAnimationFrame(() => {
-        if (getActiveGraphId() !== graphId) return
-        if (!canvas.graph) return
-
-        const nodes = canvas.graph.nodes
-        if (!nodes?.length) return
-
-        canvas.ds.computeVisibleArea(canvas.viewport)
-        if (anyItemOverlapsRect(nodes, canvas.ds.visible_area)) return
-
+        if (getActiveGraphId() !== expectedGraphId) return
         useLitegraphService().fitView()
       })
     }

src/stores/subgraphNavigationStore.viewport.test.ts

@@ -24,11 +24,8 @@ vi.mock('@/scripts/app', () => {
       scale: 1,
       offset: [0, 0],
       state: { scale: 1, offset: [0, 0] },
-      fitToBounds: vi.fn(),
-      visible_area: [0, 0, 1000, 1000],
-      computeVisibleArea: vi.fn()
+      fitToBounds: vi.fn()
     },
-    viewport: [0, 0, 1000, 1000],
     setDirty: mockSetDirty,
     get empty() {
       return true
@@ -187,11 +184,6 @@ describe('useSubgraphNavigationStore - Viewport Persistence', () => {
       // Ensure no cached entry
       store.viewportCache.delete(':root')
 
-      // Add a node outside the visible area so anyItemOverlapsRect returns false
-      const mockGraph = app.graph as { nodes: unknown[]; _nodes: unknown[] }
-      mockGraph.nodes = [{ pos: [9999, 9999], size: [100, 100] }]
-      mockGraph._nodes = mockGraph.nodes
-
       // Use the root graph ID so the stale-guard passes
       store.restoreViewport('root')
 
@@ -202,10 +194,6 @@ describe('useSubgraphNavigationStore - Viewport Persistence', () => {
       rafCallbacks[0](performance.now())
 
       expect(mockFitView).toHaveBeenCalledOnce()
-
-      // Cleanup
-      mockGraph.nodes = []
-      mockGraph._nodes = []
     })
 
     it('skips fitView if active graph changed before rAF fires', () => {

src/utils/histogramUtil.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+
+import { histogramToPath } from './histogramUtil'
+
+describe('histogramToPath', () => {
+  it('returns empty string for empty histogram', () => {
+    expect(histogramToPath(new Uint32Array(0))).toBe('')
+  })
+
+  it('returns empty string when all bins are zero', () => {
+    expect(histogramToPath(new Uint32Array(256))).toBe('')
+  })
+
+  it('returns a closed SVG path for valid histogram', () => {
+    const histogram = new Uint32Array(256)
+    for (let i = 0; i < 256; i++) histogram[i] = i + 1
+    const path = histogramToPath(histogram)
+    expect(path).toMatch(/^M0,1/)
+    expect(path).toMatch(/L1,1 Z$/)
+  })
+
+  it('normalizes using 99.5th percentile to suppress outliers', () => {
+    const histogram = new Uint32Array(256)
+    for (let i = 0; i < 256; i++) histogram[i] = 100
+    histogram[255] = 100000
+    const path = histogramToPath(histogram)
+    const yValues = path
+      .split(/[ML]/)
+      .filter(Boolean)
+      .map((s) => parseFloat(s.split(',')[1]))
+      .filter((y) => !isNaN(y))
+    const nearZero = yValues.filter((y) => Math.abs(y) < 0.01)
+    expect(nearZero.length).toBeGreaterThan(200)
+  })
+})

src/utils/histogramUtil.ts

@@ -0,0 +1,27 @@
+/**
+ * Convert a histogram (arbitrary number of bins) into an SVG path string.
+ * Applies square-root scaling and normalizes using the 99.5th percentile
+ * to avoid outlier spikes.
+ */
+export function histogramToPath(histogram: Uint32Array): string {
+  const len = histogram.length
+  if (len === 0) return ''
+
+  const sqrtValues = new Float32Array(len)
+  for (let i = 0; i < len; i++) sqrtValues[i] = Math.sqrt(histogram[i])
+
+  const sorted = Array.from(sqrtValues).sort((a, b) => a - b)
+  const max = sorted[Math.floor((len - 1) * 0.995)]
+  if (max === 0) return ''
+
+  const invMax = 1 / max
+  const lastIdx = len - 1
+  const parts: string[] = ['M0,1']
+  for (let i = 0; i < len; i++) {
+    const x = lastIdx === 0 ? 0.5 : i / lastIdx
+    const y = 1 - Math.min(1, sqrtValues[i] * invMax)
+    parts.push(`L${x},${y}`)
+  }
+  parts.push('L1,1 Z')
+  return parts.join(' ')
+}