fix: resolve vue/one-component-per-file lint error

Refactor mountPainter helper to accept initialModelValue param,
eliminating the second defineComponent in restoreCanvas test.

AGENTS.md

@@ -318,9 +318,6 @@ When referencing Comfy-Org repos:
   - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
 - NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
   - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
-- NEVER use font-size classes (`text-xs`, `text-sm`, etc.) to size `icon-[...]` (iconify) icons
-  - Iconify icons size via `width`/`height: 1.2em`, so font-size produces unpredictable results
-  - Use `size-*` classes for explicit sizing, or set font-size on the **parent** container and let `1.2em` scale naturally
 
 ## Agent-only rules
 

apps/website/src/components/AcademySection.vue

@@ -17,7 +17,7 @@ const features = computed(() => [
     <div class="mx-auto max-w-3xl px-6 text-center">
       <!-- Badge -->
       <span
-        class="inline-block rounded-full bg-brand-yellow/10 px-4 py-1.5 text-xs tracking-widest text-brand-yellow uppercase"
+        class="inline-block rounded-full bg-brand-yellow/10 px-4 py-1.5 text-xs uppercase tracking-widest text-brand-yellow"
       >
         {{ t('academy.badge', locale) }}
       </span>

apps/website/src/components/GetStartedSection.vue

@@ -40,7 +40,7 @@ const steps = computed(() => [
           <!-- Connecting line between steps (desktop only) -->
           <div
             v-if="index < steps.length - 1"
-            class="absolute top-8 right-0 hidden w-full translate-x-1/2 border-t border-brand-yellow/20 md:block"
+            class="absolute right-0 top-8 hidden w-full translate-x-1/2 border-t border-brand-yellow/20 md:block"
           />
 
           <div class="relative">

apps/website/src/components/HeroSection.vue

@@ -31,11 +31,11 @@ const ctaButtons = computed(() => [
       <div class="flex w-full items-center justify-center md:w-[55%]">
         <div class="relative -ml-12 -rotate-15 md:-ml-24" aria-hidden="true">
           <div
-            class="size-64 rounded-full border-40 border-brand-yellow md:h-112 md:w-md md:border-64 lg:h-144 lg:w-xl lg:border-80"
+            class="h-64 w-64 rounded-full border-[40px] border-brand-yellow md:h-[28rem] md:w-[28rem] md:border-[64px] lg:h-[36rem] lg:w-[36rem] lg:border-[80px]"
           >
             <!-- Gap on the right side to form "C" shape -->
             <div
-              class="absolute top-1/2 right-0 h-32 w-24 translate-x-1/2 -translate-y-1/2 bg-black md:h-48 md:w-36 lg:h-64 lg:w-48"
+              class="absolute right-0 top-1/2 h-32 w-24 -translate-y-1/2 translate-x-1/2 bg-black md:h-48 md:w-36 lg:h-64 lg:w-48"
             />
           </div>
         </div>
@@ -44,7 +44,7 @@ const ctaButtons = computed(() => [
       <!-- Right: Text content -->
       <div class="flex w-full flex-col items-start md:w-[45%]">
         <h1
-          class="text-5xl/tight font-bold tracking-tight text-white md:text-6xl lg:text-7xl"
+          class="text-5xl font-bold leading-tight tracking-tight text-white md:text-6xl lg:text-7xl"
         >
           {{ t('hero.headline', locale) }}
         </h1>

apps/website/src/components/ManifestoSection.vue

@@ -17,7 +17,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
         {{ t('manifesto.heading', locale) }}
       </h2>
 
-      <p class="mx-auto mt-6 max-w-2xl text-lg/relaxed text-smoke-700">
+      <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-smoke-700">
         {{ t('manifesto.body', locale) }}
       </p>
 

apps/website/src/components/ProductShowcase.vue

@@ -33,11 +33,11 @@ const features = computed(() => [
         <div class="flex flex-col items-center gap-4">
           <!-- Play button triangle -->
           <div
-            class="flex size-16 items-center justify-center rounded-full border-2 border-white/20"
+            class="flex h-16 w-16 items-center justify-center rounded-full border-2 border-white/20"
             aria-hidden="true"
           >
             <div
-              class="ml-1 size-0 border-y-8 border-l-14 border-y-transparent border-l-white"
+              class="ml-1 h-0 w-0 border-y-8 border-l-[14px] border-y-transparent border-l-white"
             />
           </div>
           <p class="text-sm text-smoke-700">
@@ -54,7 +54,7 @@ const features = computed(() => [
           class="flex items-center gap-2"
         >
           <span
-            class="size-2 rounded-full bg-brand-yellow"
+            class="h-2 w-2 rounded-full bg-brand-yellow"
             aria-hidden="true"
           />
           <span class="text-sm text-smoke-700">{{ feature }}</span>

apps/website/src/components/SocialProofBar.vue

@@ -32,7 +32,7 @@ const metrics = computed(() => [
     <div class="mx-auto max-w-7xl px-6">
       <!-- Heading -->
       <p
-        class="text-center text-xs font-medium tracking-widest text-smoke-700 uppercase"
+        class="text-center text-xs font-medium uppercase tracking-widest text-smoke-700"
       >
         {{ t('social.heading', locale) }}
       </p>

apps/website/src/components/TestimonialsSection.vue

@@ -90,7 +90,7 @@ const filteredTestimonials = computed(() => {
           :key="testimonial.name"
           class="rounded-xl border border-white/10 bg-charcoal-600 p-6"
         >
-          <blockquote class="text-base text-white italic">
+          <blockquote class="text-base italic text-white">
             &ldquo;{{ testimonial.quote }}&rdquo;
           </blockquote>
 

apps/website/src/components/UseCaseSection.vue

@@ -24,12 +24,12 @@ const activeCategory = ref(0)
         <!-- Left placeholder image (desktop only) -->
         <div class="hidden flex-1 lg:block">
           <div
-            class="aspect-2/3 rounded-full border border-white/10 bg-charcoal-600"
+            class="aspect-[2/3] rounded-full border border-white/10 bg-charcoal-600"
           />
         </div>
 
         <!-- Center content -->
-        <div class="flex flex-col items-center text-center lg:flex-2">
+        <div class="flex flex-col items-center text-center lg:flex-[2]">
           <h2 class="text-3xl font-bold text-white">
             {{ t('useCase.heading', locale) }}
           </h2>
@@ -70,7 +70,7 @@ const activeCategory = ref(0)
         <!-- Right placeholder image (desktop only) -->
         <div class="hidden flex-1 lg:block">
           <div
-            class="aspect-2/3 rounded-3xl border border-white/10 bg-charcoal-600"
+            class="aspect-[2/3] rounded-3xl border border-white/10 bg-charcoal-600"
           />
         </div>
       </div>

apps/website/src/components/ValuePillars.vue

@@ -53,7 +53,7 @@ const pillars = computed(() => [
           class="rounded-xl border border-white/10 bg-charcoal-600 p-6 transition-colors hover:border-brand-yellow"
         >
           <div
-            class="flex size-12 items-center justify-center rounded-full bg-brand-yellow text-xl"
+            class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-yellow text-xl"
           >
             {{ pillar.icon }}
           </div>

browser_tests/fixtures/components/OutputHistory.ts

@@ -1,97 +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"]`
-    )
-  }
-
-  /** The header-level progress bar. */
-  get headerProgressBar(): Locator {
-    return this.page.getByTestId(ids.headerProgressBar)
-  }
-
-  /** The in-progress item's progress bar (inside the thumbnail). */
-  get itemProgressBar(): Locator {
-    return this.inProgressItems.first().getByTestId(ids.itemProgressBar)
-  }
-
-  /** Overall progress in the header bar. */
-  get headerOverallProgress(): Locator {
-    return this.headerProgressBar.getByTestId(ids.progressOverall)
-  }
-
-  /** Node progress in the header bar. */
-  get headerNodeProgress(): Locator {
-    return this.headerProgressBar.getByTestId(ids.progressNode)
-  }
-
-  /** Overall progress in the in-progress item bar. */
-  get itemOverallProgress(): Locator {
-    return this.itemProgressBar.getByTestId(ids.progressOverall)
-  }
-
-  /** Node progress in the in-progress item bar. */
-  get itemNodeProgress(): Locator {
-    return this.itemProgressBar.getByTestId(ids.progressNode)
-  }
-}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -3,7 +3,6 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-import { OutputHistoryComponent } from '@e2e/fixtures/components/OutputHistory'
 import { AppModeWidgetHelper } from '@e2e/fixtures/helpers/AppModeWidgetHelper'
 import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
@@ -15,7 +14,6 @@ export class AppModeHelper {
   readonly footer: BuilderFooterHelper
   readonly saveAs: BuilderSaveAsHelper
   readonly select: BuilderSelectHelper
-  readonly outputHistory: OutputHistoryComponent
   readonly widgets: AppModeWidgetHelper
   /** The "Connect an output" popover shown when saving without outputs. */
   public readonly connectOutputPopover: Locator
@@ -37,15 +35,12 @@ export class AppModeHelper {
   public readonly backToWorkflowButton: Locator
   /** The "Load template" button shown when no nodes exist. */
   public readonly loadTemplateButton: Locator
-  /** The cancel button for an in-progress run in the output history. */
-  public readonly cancelRunButton: Locator
 
   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)
     this.widgets = new AppModeWidgetHelper(comfyPage)
     this.connectOutputPopover = this.page.getByTestId(
       TestIds.builder.connectOutputPopover
@@ -72,9 +67,6 @@ export class AppModeHelper {
     this.loadTemplateButton = this.page.getByTestId(
       TestIds.appMode.loadTemplate
     )
-    this.cancelRunButton = this.page.getByTestId(
-      TestIds.outputHistory.cancelRun
-    )
   }
 
   private get page(): Page {

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -1,211 +0,0 @@
-import type { WebSocketRoute } from '@playwright/test'
-
-import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-import type { ComfyPage } from '../ComfyPage'
-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 command: ComfyPage['command']
-  private readonly assets: ComfyPage['assets']
-
-  constructor(
-    comfyPage: ComfyPage,
-    private readonly ws: WebSocketRoute
-  ) {
-    this.page = comfyPage.page
-    this.command = comfyPage.command
-    this.assets = comfyPage.assets
-  }
-
-  /**
-   * 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.command.executeCommand('Comfy.QueuePrompt')
-    await prompted
-
-    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 `executing` WS event to signal which node is currently running. */
-  executing(jobId: string, nodeId: string | null): void {
-    this.ws.send(
-      JSON.stringify({
-        type: 'executing',
-        data: { prompt_id: jobId, node: nodeId }
-      })
-    )
-  }
-
-  /** 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

@@ -130,24 +130,6 @@ export const TestIds = {
     outputPlaceholder: 'builder-output-placeholder',
     connectOutputPopover: 'builder-connect-output-popover'
   },
-  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',
-    headerProgressBar: 'linear-header-progress-bar',
-    itemProgressBar: 'linear-item-progress-bar',
-    progressOverall: 'linear-progress-overall',
-    progressNode: 'linear-progress-node'
-  },
   appMode: {
     widgetItem: 'app-mode-widget-item',
     welcome: 'linear-welcome',
@@ -198,7 +180,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.appMode)[keyof typeof TestIds.appMode]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<

browser_tests/fixtures/ws.ts

@@ -1,31 +1,53 @@
 import { test as base } from '@playwright/test'
-import type { WebSocketRoute } from '@playwright/test'
 
 export const webSocketFixture = base.extend<{
-  getWebSocket: () => Promise<WebSocketRoute>
+  ws: { trigger(data: unknown, url?: string): Promise<void> }
 }>({
-  getWebSocket: [
-    async ({ context }, use) => {
-      let latest: WebSocketRoute | undefined
-      let resolve: ((ws: WebSocketRoute) => void) | undefined
-
-      await context.routeWebSocket(/\/ws/, (ws) => {
-        const server = ws.connectToServer()
-        server.onMessage((message) => {
-          ws.send(message)
+  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 = ws
-        resolve?.(ws)
       })
 
-      await use(() => {
-        if (latest) return Promise.resolve(latest)
-        return new Promise<WebSocketRoute>((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/tests/actionbar.spec.ts

@@ -1,6 +1,7 @@
 import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'
 
+import type { StatusWsMessage } from '@/schemas/apiSchema'
 import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import { webSocketFixture } from '@e2e/fixtures/ws'
 import type { WorkspaceStore } from '@e2e/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()
     await expect.poll(() => 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/outputHistory.spec.ts

@@ -1,413 +0,0 @@
-import type { WebSocketRoute } from '@playwright/test'
-import { mergeTests } from '@playwright/test'
-
-import type { RawJobListItem } from '@/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 { ExecutionHelper } from '../fixtures/helpers/ExecutionHelper'
-
-const test = mergeTests(comfyPageFixture, webSocketFixture)
-
-// Node IDs from the default workflow (browser_tests/assets/default.json, 7 nodes)
-const SAVE_IMAGE_NODE = '9'
-const KSAMPLER_NODE = '3'
-const ALL_NODE_IDS = ['4', '6', '7', '5', KSAMPLER_NODE, '8', SAVE_IMAGE_NODE]
-
-/** Queue a prompt, intercept it, and send execution_start. */
-async function startExecution(
-  comfyPage: ComfyPage,
-  ws: WebSocketRoute,
-  exec?: ExecutionHelper
-) {
-  exec ??= new ExecutionHelper(comfyPage, ws)
-  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 ws = await getWebSocket()
-    await startExecution(comfyPage, ws)
-
-    await expect(
-      comfyPage.appMode.outputHistory.skeletons.first()
-    ).toBeVisible()
-  })
-
-  test('Latent preview replaces skeleton', async ({
-    comfyPage,
-    getWebSocket
-  }) => {
-    const ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    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()
-
-    await comfyPage.page.route('**/interrupt', (route) =>
-      route.fulfill({ status: 200 })
-    )
-    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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    // 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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    // 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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    // 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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    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 ws = await getWebSocket()
-
-    // Complete one execution with 100 image outputs
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-    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, ws, 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 ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    await expect(
-      comfyPage.appMode.outputHistory.inProgressItems.first()
-    ).toBeVisible()
-
-    exec.executionError(jobId, KSAMPLER_NODE, 'Test error')
-
-    await expect(comfyPage.appMode.outputHistory.inProgressItems).toHaveCount(0)
-  })
-
-  test('Progress bars update for both node and overall progress', async ({
-    comfyPage,
-    getWebSocket
-  }) => {
-    const ws = await getWebSocket()
-    const { exec, jobId } = await startExecution(comfyPage, ws)
-
-    const {
-      inProgressItems,
-      headerOverallProgress,
-      headerNodeProgress,
-      itemOverallProgress,
-      itemNodeProgress
-    } = comfyPage.appMode.outputHistory
-
-    await expect(inProgressItems.first()).toBeVisible()
-
-    // Initially both bars are at 0%
-    await expect(headerOverallProgress).toHaveAttribute('style', /width:\s*0%/)
-    await expect(headerNodeProgress).toHaveAttribute('style', /width:\s*0%/)
-
-    // KSampler starts executing - node progress at 50%
-    exec.executing(jobId, KSAMPLER_NODE)
-    exec.progress(jobId, KSAMPLER_NODE, 5, 10)
-
-    await expect(headerNodeProgress).toHaveAttribute('style', /width:\s*50%/)
-    await expect(itemNodeProgress).toHaveAttribute('style', /width:\s*50%/)
-    // Overall still 0% - no nodes completed yet
-    await expect(headerOverallProgress).toHaveAttribute('style', /width:\s*0%/)
-
-    // KSampler finishes - overall advances (1 of 7 nodes)
-    exec.executed(jobId, KSAMPLER_NODE, {})
-
-    const oneNodePercent = Math.round((1 / ALL_NODE_IDS.length) * 100)
-    const pct = new RegExp(`width:\\s*${oneNodePercent}%`)
-    await expect(headerOverallProgress).toHaveAttribute('style', pct)
-    await expect(itemOverallProgress).toHaveAttribute('style', pct)
-
-    // Node progress reaches 100%
-    exec.progress(jobId, KSAMPLER_NODE, 10, 10)
-
-    await expect(headerNodeProgress).toHaveAttribute('style', /width:\s*100%/)
-    await expect(itemNodeProgress).toHaveAttribute('style', /width:\s*100%/)
-
-    // Complete remaining nodes - overall reaches 100%
-    const remainingNodes = ALL_NODE_IDS.filter((id) => id !== KSAMPLER_NODE)
-    for (const nodeId of remainingNodes) {
-      exec.executing(jobId, nodeId)
-      exec.executed(jobId, nodeId, {})
-    }
-
-    await expect(headerOverallProgress).toHaveAttribute(
-      'style',
-      /width:\s*100%/
-    )
-    await expect(itemOverallProgress).toHaveAttribute('style', /width:\s*100%/)
-  })
-})

src/components/builder/AppModeWidgetList.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { computed, provide, shallowRef } from 'vue'
-
-import { useAppModeWidgetResizing } from '@/components/builder/useAppModeWidgetResizing'
 import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
@@ -10,7 +8,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
@@ -30,9 +28,6 @@ import { promptRenameWidget } from '@/utils/widgetUtil'
 
 interface WidgetEntry {
   key: string
-  nodeId: NodeId
-  widgetName: string
-  persistedHeight: number | undefined
   nodeData: ReturnType<typeof nodeToNodeData> & {
     widgets: NonNullable<ReturnType<typeof nodeToNodeData>['widgets']>
   }
@@ -49,11 +44,6 @@ const executionErrorStore = useExecutionErrorStore()
 const appModeStore = useAppModeStore()
 const maskEditor = useMaskEditor()
 
-const { onPointerDown } = useAppModeWidgetResizing(
-  (nodeId, widgetName, config) =>
-    appModeStore.updateInputConfig(nodeId, widgetName, config)
-)
-
 provide(HideLayoutFieldKey, true)
 provide(OverlayAppendToKey, 'body')
 
@@ -71,7 +61,7 @@ const mappedSelections = computed((): WidgetEntry[] => {
     ReturnType<typeof nodeToNodeData>
   >()
 
-  return appModeStore.selectedInputs.flatMap(([nodeId, widgetName, config]) => {
+  return appModeStore.selectedInputs.flatMap(([nodeId, widgetName]) => {
     const [node, widget] = resolveNodeWidget(nodeId, widgetName)
     if (!widget || !node || node.mode !== LGraphEventMode.ALWAYS) return []
 
@@ -100,9 +90,6 @@ const mappedSelections = computed((): WidgetEntry[] => {
     return [
       {
         key: `${nodeId}:${widgetName}`,
-        nodeId,
-        widgetName,
-        persistedHeight: config?.height,
         nodeData: {
           ...fullNodeData,
           widgets: [matchingWidget]
@@ -170,14 +157,7 @@ defineExpose({ handleDragDrop })
 </script>
 <template>
   <div
-    v-for="{
-      key,
-      nodeId,
-      widgetName,
-      persistedHeight,
-      nodeData,
-      action
-    } in mappedSelections"
+    v-for="{ key, nodeData, action } in mappedSelections"
     :key
     :class="
       cn(
@@ -242,20 +222,8 @@ defineExpose({ handleDragDrop })
       </Popover>
     </div>
     <div
-      :style="
-        persistedHeight
-          ? { '--persisted-height': `${persistedHeight}px` }
-          : undefined
-      "
-      :class="
-        cn(
-          builderMode && 'pointer-events-none',
-          persistedHeight &&
-            '**:data-[slot=drop-zone-indicator]:h-(--persisted-height) [&_textarea]:h-(--persisted-height)'
-        )
-      "
+      :class="builderMode && 'pointer-events-none'"
       :inert="builderMode || undefined"
-      @pointerdown.capture="(e) => onPointerDown(nodeId, widgetName, e)"
     >
       <DropZone
         :on-drag-over="nodeData.onDragOver"

src/components/builder/useAppModeWidgetResizing.test.ts

@@ -1,210 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-import { effectScope } from 'vue'
-
-import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
-import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
-
-import { useAppModeWidgetResizing } from './useAppModeWidgetResizing'
-
-function setHeight(el: HTMLElement, height: number) {
-  Object.defineProperty(el, 'offsetHeight', {
-    value: height,
-    configurable: true
-  })
-}
-
-function wrapWithTextarea(initialHeight = 100): {
-  wrapper: HTMLDivElement
-  textarea: HTMLTextAreaElement
-} {
-  const wrapper = document.createElement('div')
-  const textarea = document.createElement('textarea')
-  wrapper.appendChild(textarea)
-  document.body.appendChild(wrapper)
-  setHeight(textarea, initialHeight)
-  return { wrapper, textarea }
-}
-
-describe('useAppModeWidgetResizing', () => {
-  function setup() {
-    const onResize =
-      vi.fn<
-        (nodeId: NodeId, widgetName: string, config: InputWidgetConfig) => void
-      >()
-    const { onPointerDown } = useAppModeWidgetResizing(onResize)
-
-    function bind(wrapper: HTMLElement, nodeId: NodeId, widgetName: string) {
-      wrapper.addEventListener(
-        'pointerdown',
-        (e) => onPointerDown(nodeId, widgetName, e as PointerEvent),
-        { capture: true }
-      )
-    }
-
-    return { onResize, bind }
-  }
-
-  it('persists height when textarea is resized via drag', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
-  })
-
-  it('does not persist when no height change occurs (e.g. a click)', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).not.toHaveBeenCalled()
-  })
-
-  it('persists once per drag gesture; stray pointerup is a no-op', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledTimes(1)
-  })
-
-  it('ignores pointerdown on non-resizable targets (label, button, popover)', () => {
-    const { bind, onResize } = setup()
-    const wrapper = document.createElement('div')
-    const button = document.createElement('button')
-    wrapper.appendChild(button)
-    document.body.appendChild(wrapper)
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).not.toHaveBeenCalled()
-  })
-
-  it('persists when target is a descendant of the drop-zone-indicator', () => {
-    const { bind, onResize } = setup()
-    const wrapper = document.createElement('div')
-    const indicator = document.createElement('div')
-    indicator.setAttribute('data-slot', 'drop-zone-indicator')
-    const inner = document.createElement('span')
-    indicator.appendChild(inner)
-    wrapper.appendChild(indicator)
-    document.body.appendChild(wrapper)
-    setHeight(indicator, 100)
-    bind(wrapper, 1 as NodeId, 'image')
-
-    inner.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(indicator, 250)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledWith(1, 'image', { height: 250 })
-  })
-
-  it('drops a stale gesture when a new pointerdown starts before pointerup arrives', () => {
-    const { bind, onResize } = setup()
-    const first = wrapWithTextarea()
-    const second = wrapWithTextarea()
-    bind(first.wrapper, 1 as NodeId, 'prompt')
-    bind(second.wrapper, 2 as NodeId, 'other')
-
-    first.textarea.dispatchEvent(
-      new PointerEvent('pointerdown', { bubbles: true })
-    )
-    setHeight(first.textarea, 250)
-
-    second.textarea.dispatchEvent(
-      new PointerEvent('pointerdown', { bubbles: true })
-    )
-    setHeight(second.textarea, 300)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledTimes(1)
-    expect(onResize).toHaveBeenCalledWith(2, 'other', { height: 300 })
-  })
-
-  it('treats pointercancel as the end of a gesture and persists the new height', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    window.dispatchEvent(new PointerEvent('pointercancel'))
-
-    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
-  })
-
-  it('after pointercancel, a subsequent stray pointerup is a no-op', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    window.dispatchEvent(new PointerEvent('pointercancel'))
-    setHeight(textarea, 400)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledTimes(1)
-    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
-  })
-
-  it('removes global listeners when the owning scope is disposed mid-gesture', () => {
-    const onResize =
-      vi.fn<
-        (nodeId: NodeId, widgetName: string, config: InputWidgetConfig) => void
-      >()
-    const scope = effectScope()
-    const { onPointerDown } = scope.run(() =>
-      useAppModeWidgetResizing(onResize)
-    )!
-    const { wrapper, textarea } = wrapWithTextarea()
-    wrapper.addEventListener(
-      'pointerdown',
-      (e) => onPointerDown(1 as NodeId, 'prompt', e as PointerEvent),
-      { capture: true }
-    )
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    scope.stop()
-    window.dispatchEvent(new PointerEvent('pointerup'))
-    window.dispatchEvent(new PointerEvent('pointercancel'))
-
-    expect(onResize).not.toHaveBeenCalled()
-  })
-
-  it('does not match a resizable that is an ancestor of the wrapper', () => {
-    const { bind, onResize } = setup()
-    // An unrelated drop-zone-indicator outside the wrapper would otherwise be
-    // returned by target.closest(...) walking up the tree.
-    const outerIndicator = document.createElement('div')
-    outerIndicator.setAttribute('data-slot', 'drop-zone-indicator')
-    const wrapper = document.createElement('div')
-    const inner = document.createElement('span')
-    wrapper.appendChild(inner)
-    outerIndicator.appendChild(wrapper)
-    document.body.appendChild(outerIndicator)
-    setHeight(outerIndicator, 100)
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    inner.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(outerIndicator, 250)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).not.toHaveBeenCalled()
-  })
-})

src/components/builder/useAppModeWidgetResizing.ts

@@ -1,55 +0,0 @@
-import { onScopeDispose } from 'vue'
-
-import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
-import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
-
-const RESIZABLE_SELECTOR = 'textarea, [data-slot="drop-zone-indicator"]'
-
-export function useAppModeWidgetResizing(
-  onResize: (
-    nodeId: NodeId,
-    widgetName: string,
-    config: InputWidgetConfig
-  ) => void
-) {
-  let pendingHandler: (() => void) | null = null
-
-  function clearPendingHandler() {
-    if (!pendingHandler) return
-    window.removeEventListener('pointerup', pendingHandler)
-    window.removeEventListener('pointercancel', pendingHandler)
-    pendingHandler = null
-  }
-
-  onScopeDispose(clearPendingHandler)
-
-  function onPointerDown(
-    nodeId: NodeId,
-    widgetName: string,
-    event: PointerEvent
-  ) {
-    const wrapper = event.currentTarget
-    const target = event.target
-    if (!(wrapper instanceof HTMLElement) || !(target instanceof HTMLElement))
-      return
-    const resizable = target.closest<HTMLElement>(RESIZABLE_SELECTOR)
-    if (!resizable || !wrapper.contains(resizable)) return
-
-    clearPendingHandler()
-
-    const startHeight = resizable.offsetHeight
-    const handler = () => {
-      window.removeEventListener('pointerup', handler)
-      window.removeEventListener('pointercancel', handler)
-      pendingHandler = null
-      const height = resizable.offsetHeight
-      if (height === startHeight) return
-      onResize(nodeId, widgetName, { height })
-    }
-    pendingHandler = handler
-    window.addEventListener('pointerup', handler)
-    window.addEventListener('pointercancel', handler)
-  }
-
-  return { onPointerDown }
-}

src/components/common/TreeExplorerV2Node.vue

@@ -32,14 +32,21 @@
           :aria-label="$t('g.delete')"
           @click.stop="deleteBlueprint"
         >
-          <i class="icon-[lucide--trash-2]" />
+          <i class="icon-[lucide--trash-2] text-xs" />
         </button>
         <button
           :class="cn(ACTION_BTN_CLASS, 'text-muted-foreground')"
           :aria-label="$t('icon.bookmark')"
           @click.stop="toggleBookmark"
         >
-          <i :class="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'" />
+          <i
+            :class="
+              cn(
+                isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
+                'text-xs'
+              )
+            "
+          />
         </button>
       </div>
     </div>
@@ -108,7 +115,7 @@ const ROW_CLASS =
   'group/tree-node flex w-full min-w-0 cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input rounded'
 
 const ACTION_BTN_CLASS =
-  'flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-sm opacity-0 group-hover/tree-node:opacity-100 hover:text-foreground'
+  'flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent opacity-0 group-hover/tree-node:opacity-100 hover:text-foreground'
 
 const { item } = defineProps<{
   item: FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>

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

@@ -25,7 +25,7 @@
           :aria-label="$t('g.delete')"
           @click.stop="deleteBlueprint"
         >
-          <i class="icon-[lucide--trash-2] size-4" />
+          <i class="icon-[lucide--trash-2] size-3.5" />
         </Button>
         <Button
           variant="muted-textonly"
@@ -33,7 +33,7 @@
           :aria-label="$t('g.edit')"
           @click.stop="editBlueprint"
         >
-          <i class="icon-[lucide--square-pen] size-4" />
+          <i class="icon-[lucide--square-pen] size-3.5" />
         </Button>
       </template>
       <template v-else #actions>

src/composables/painter/usePainter.test.ts

@@ -0,0 +1,446 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick, ref } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { api } from '@/scripts/api'
+
+import { usePainter } from './usePainter'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: vi.fn(() => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params ? `${key}:${JSON.stringify(params)}` : key
+  }))
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useElementSize: vi.fn(() => ({
+    width: ref(512),
+    height: ref(512)
+  }))
+}))
+
+vi.mock('@/composables/maskeditor/StrokeProcessor', () => ({
+  StrokeProcessor: vi.fn(() => ({
+    addPoint: vi.fn(() => []),
+    endStroke: vi.fn(() => [])
+  }))
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => {
+  const store = { addAlert: vi.fn() }
+  return { useToastStore: () => store }
+})
+
+vi.mock('@/stores/nodeOutputStore', () => {
+  const store = {
+    getNodeImageUrls: vi.fn(() => undefined),
+    nodeOutputs: {},
+    nodePreviewImages: {}
+  }
+  return { useNodeOutputStore: () => store }
+})
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    apiURL: vi.fn((path: string) => `http://localhost:8188${path}`),
+    fetchApi: vi.fn()
+  }
+}))
+
+const mockWidgets: IBaseWidget[] = []
+const mockProperties: Record<string, unknown> = {}
+const mockIsInputConnected = vi.fn(() => false)
+const mockGetInputNode = vi.fn(() => null)
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: {
+      graph: {
+        getNodeById: vi.fn(() => ({
+          get widgets() {
+            return mockWidgets
+          },
+          get properties() {
+            return mockProperties
+          },
+          isInputConnected: mockIsInputConnected,
+          getInputNode: mockGetInputNode
+        }))
+      }
+    }
+  }
+}))
+
+type PainterResult = ReturnType<typeof usePainter>
+
+function makeWidget(name: string, value: unknown = null): IBaseWidget {
+  return {
+    name,
+    value,
+    callback: vi.fn(),
+    serializeValue: undefined
+  } as unknown as IBaseWidget
+}
+
+/**
+ * Mounts a thin wrapper component so Vue lifecycle hooks fire.
+ */
+function mountPainter(nodeId = 'test-node', initialModelValue = '') {
+  let painter!: PainterResult
+  const canvasEl = ref<HTMLCanvasElement | null>(null)
+  const cursorEl = ref<HTMLElement | null>(null)
+  const modelValue = ref(initialModelValue)
+
+  const Wrapper = defineComponent({
+    setup() {
+      painter = usePainter(nodeId, {
+        canvasEl,
+        cursorEl,
+        modelValue
+      })
+      return {}
+    },
+    render() {
+      return null
+    }
+  })
+
+  const wrapper = mount(Wrapper)
+  return { painter, wrapper, canvasEl, cursorEl, modelValue }
+}
+
+describe('usePainter', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.resetAllMocks()
+    mockWidgets.length = 0
+    for (const key of Object.keys(mockProperties)) {
+      delete mockProperties[key]
+    }
+    mockIsInputConnected.mockReturnValue(false)
+    mockGetInputNode.mockReturnValue(null)
+  })
+
+  describe('syncCanvasSizeFromWidgets', () => {
+    it('reads width/height from widget values on initialization', () => {
+      mockWidgets.push(makeWidget('width', 1024), makeWidget('height', 768))
+
+      const { painter } = mountPainter()
+
+      expect(painter.canvasWidth.value).toBe(1024)
+      expect(painter.canvasHeight.value).toBe(768)
+    })
+
+    it('defaults to 512 when widgets are missing', () => {
+      const { painter } = mountPainter()
+
+      expect(painter.canvasWidth.value).toBe(512)
+      expect(painter.canvasHeight.value).toBe(512)
+    })
+  })
+
+  describe('restoreSettingsFromProperties', () => {
+    it('restores tool and brush settings from node properties on init', () => {
+      mockProperties.painterTool = 'eraser'
+      mockProperties.painterBrushSize = 42
+      mockProperties.painterBrushColor = '#ff0000'
+      mockProperties.painterBrushOpacity = 0.5
+      mockProperties.painterBrushHardness = 0.8
+
+      const { painter } = mountPainter()
+
+      expect(painter.tool.value).toBe('eraser')
+      expect(painter.brushSize.value).toBe(42)
+      expect(painter.brushColor.value).toBe('#ff0000')
+      expect(painter.brushOpacity.value).toBe(0.5)
+      expect(painter.brushHardness.value).toBe(0.8)
+    })
+
+    it('restores backgroundColor from bg_color widget', () => {
+      mockWidgets.push(makeWidget('bg_color', '#123456'))
+
+      const { painter } = mountPainter()
+
+      expect(painter.backgroundColor.value).toBe('#123456')
+    })
+
+    it('keeps defaults when no properties are stored', () => {
+      const { painter } = mountPainter()
+
+      expect(painter.tool.value).toBe('brush')
+      expect(painter.brushSize.value).toBe(20)
+      expect(painter.brushColor.value).toBe('#ffffff')
+      expect(painter.brushOpacity.value).toBe(1)
+      expect(painter.brushHardness.value).toBe(1)
+    })
+  })
+
+  describe('saveSettingsToProperties', () => {
+    it('persists tool settings to node properties when they change', async () => {
+      const { painter } = mountPainter()
+
+      painter.tool.value = 'eraser'
+      painter.brushSize.value = 50
+      painter.brushColor.value = '#00ff00'
+      painter.brushOpacity.value = 0.7
+      painter.brushHardness.value = 0.3
+
+      await nextTick()
+
+      expect(mockProperties.painterTool).toBe('eraser')
+      expect(mockProperties.painterBrushSize).toBe(50)
+      expect(mockProperties.painterBrushColor).toBe('#00ff00')
+      expect(mockProperties.painterBrushOpacity).toBe(0.7)
+      expect(mockProperties.painterBrushHardness).toBe(0.3)
+    })
+  })
+
+  describe('syncCanvasSizeToWidgets', () => {
+    it('syncs canvas dimensions to widgets when size changes', async () => {
+      const widthWidget = makeWidget('width', 512)
+      const heightWidget = makeWidget('height', 512)
+      mockWidgets.push(widthWidget, heightWidget)
+
+      const { painter } = mountPainter()
+
+      painter.canvasWidth.value = 800
+      painter.canvasHeight.value = 600
+      await nextTick()
+
+      expect(widthWidget.value).toBe(800)
+      expect(heightWidget.value).toBe(600)
+      expect(widthWidget.callback).toHaveBeenCalledWith(800)
+      expect(heightWidget.callback).toHaveBeenCalledWith(600)
+    })
+  })
+
+  describe('syncBackgroundColorToWidget', () => {
+    it('syncs background color to widget when color changes', async () => {
+      const bgWidget = makeWidget('bg_color', '#000000')
+      mockWidgets.push(bgWidget)
+
+      const { painter } = mountPainter()
+
+      painter.backgroundColor.value = '#ff00ff'
+      await nextTick()
+
+      expect(bgWidget.value).toBe('#ff00ff')
+      expect(bgWidget.callback).toHaveBeenCalledWith('#ff00ff')
+    })
+  })
+
+  describe('updateInputImageUrl', () => {
+    it('sets isImageInputConnected to false when input is not connected', () => {
+      const { painter } = mountPainter()
+
+      expect(painter.isImageInputConnected.value).toBe(false)
+      expect(painter.inputImageUrl.value).toBeNull()
+    })
+
+    it('sets isImageInputConnected to true when input is connected', () => {
+      mockIsInputConnected.mockReturnValue(true)
+
+      const { painter } = mountPainter()
+
+      expect(painter.isImageInputConnected.value).toBe(true)
+    })
+  })
+
+  describe('handleInputImageLoad', () => {
+    it('updates canvas size and widgets from loaded image dimensions', () => {
+      const widthWidget = makeWidget('width', 512)
+      const heightWidget = makeWidget('height', 512)
+      mockWidgets.push(widthWidget, heightWidget)
+
+      const { painter } = mountPainter()
+
+      const fakeEvent = {
+        target: {
+          naturalWidth: 1920,
+          naturalHeight: 1080
+        }
+      } as unknown as Event
+
+      painter.handleInputImageLoad(fakeEvent)
+
+      expect(painter.canvasWidth.value).toBe(1920)
+      expect(painter.canvasHeight.value).toBe(1080)
+      expect(widthWidget.value).toBe(1920)
+      expect(heightWidget.value).toBe(1080)
+    })
+  })
+
+  describe('cursor visibility', () => {
+    it('sets cursorVisible to true on pointer enter', () => {
+      const { painter } = mountPainter()
+
+      painter.handlePointerEnter()
+      expect(painter.cursorVisible.value).toBe(true)
+    })
+
+    it('sets cursorVisible to false on pointer leave', () => {
+      const { painter } = mountPainter()
+
+      painter.handlePointerEnter()
+      painter.handlePointerLeave()
+      expect(painter.cursorVisible.value).toBe(false)
+    })
+  })
+
+  describe('displayBrushSize', () => {
+    it('scales brush size by canvas display ratio', () => {
+      const { painter } = mountPainter()
+
+      // canvasDisplayWidth=512, canvasWidth=512 → ratio=1
+      // hardness=1 → effectiveRadius = radius * 1.0
+      // displayBrushSize = (20/2) * 1.0 * 2 * 1 = 20
+      expect(painter.displayBrushSize.value).toBe(20)
+    })
+
+    it('increases for soft brush hardness', () => {
+      const { painter } = mountPainter()
+
+      painter.brushHardness.value = 0
+      // hardness=0 → effectiveRadius = 10 * 1.5 = 15
+      // displayBrushSize = 15 * 2 * 1 = 30
+      expect(painter.displayBrushSize.value).toBe(30)
+    })
+  })
+
+  describe('activeHardness (via displayBrushSize)', () => {
+    it('returns 1 for eraser regardless of brushHardness', () => {
+      const { painter } = mountPainter()
+
+      painter.brushHardness.value = 0.3
+      painter.tool.value = 'eraser'
+
+      // eraser hardness=1 → displayBrushSize = 10 * 1.0 * 2 = 20
+      expect(painter.displayBrushSize.value).toBe(20)
+    })
+
+    it('uses brushHardness for brush tool', () => {
+      const { painter } = mountPainter()
+
+      painter.tool.value = 'brush'
+      painter.brushHardness.value = 0.5
+      // hardness=0.5 → scale=1.25 → 10*1.25*2 = 25
+      expect(painter.displayBrushSize.value).toBe(25)
+    })
+  })
+
+  describe('registerWidgetSerialization', () => {
+    it('attaches serializeValue to the mask widget on init', () => {
+      const maskWidget = makeWidget('mask', '')
+      mockWidgets.push(maskWidget)
+
+      mountPainter()
+
+      expect(maskWidget.serializeValue).toBeTypeOf('function')
+    })
+  })
+
+  describe('serializeValue', () => {
+    it('returns empty string when canvas has no strokes', async () => {
+      const maskWidget = makeWidget('mask', '')
+      mockWidgets.push(maskWidget)
+
+      mountPainter()
+
+      const result = await maskWidget.serializeValue!({} as LGraphNode, 0)
+      expect(result).toBe('')
+    })
+
+    it('returns existing modelValue when not dirty', async () => {
+      const maskWidget = makeWidget('mask', '')
+      mockWidgets.push(maskWidget)
+
+      const { modelValue } = mountPainter()
+      modelValue.value = 'painter/existing.png [temp]'
+
+      const result = await maskWidget.serializeValue!({} as LGraphNode, 0)
+      // isCanvasEmpty() is true (no strokes drawn), so returns ''
+      expect(result).toBe('')
+    })
+  })
+
+  describe('restoreCanvas', () => {
+    it('builds correct URL from modelValue on mount', () => {
+      const { modelValue } = mountPainter()
+      // Before mount, set the modelValue
+      // restoreCanvas is called in onMounted, so we test by observing api.apiURL calls
+      // With empty modelValue, restoreCanvas exits early
+      expect(modelValue.value).toBe('')
+    })
+
+    it('calls api.apiURL with parsed filename params when modelValue is set', () => {
+      vi.mocked(api.apiURL).mockClear()
+
+      mountPainter('test-node', 'painter/my-image.png [temp]')
+
+      expect(api.apiURL).toHaveBeenCalledWith(
+        expect.stringContaining('filename=my-image.png')
+      )
+      expect(api.apiURL).toHaveBeenCalledWith(
+        expect.stringContaining('subfolder=painter')
+      )
+      expect(api.apiURL).toHaveBeenCalledWith(
+        expect.stringContaining('type=temp')
+      )
+    })
+  })
+
+  describe('handleClear', () => {
+    it('does not throw when canvas element is null', () => {
+      const { painter } = mountPainter()
+
+      expect(() => painter.handleClear()).not.toThrow()
+    })
+  })
+
+  describe('handlePointerDown', () => {
+    it('ignores non-primary button clicks', () => {
+      const { painter } = mountPainter()
+
+      const mockSetPointerCapture = vi.fn()
+      const event = new PointerEvent('pointerdown', {
+        button: 2
+      })
+      Object.defineProperty(event, 'target', {
+        value: {
+          setPointerCapture: mockSetPointerCapture
+        }
+      })
+
+      painter.handlePointerDown(event)
+
+      expect(mockSetPointerCapture).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('handlePointerUp', () => {
+    it('ignores non-primary button releases', () => {
+      const { painter } = mountPainter()
+
+      const mockReleasePointerCapture = vi.fn()
+      const event = {
+        button: 2,
+        target: {
+          releasePointerCapture: mockReleasePointerCapture
+        }
+      } as unknown as PointerEvent
+
+      painter.handlePointerUp(event)
+
+      expect(mockReleasePointerCapture).not.toHaveBeenCalled()
+    })
+  })
+})

src/platform/workflow/management/stores/comfyWorkflow.ts

@@ -9,14 +9,8 @@ import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/w
 import type { MissingModelCandidate } from '@/platform/missingModel/types'
 import type { MissingNodeType } from '@/types/comfy'
 
-export interface InputWidgetConfig {
-  height?: number
-}
-
-export type LinearInput = [NodeId, string, InputWidgetConfig?]
-
 export interface LinearData {
-  inputs: LinearInput[]
+  inputs: [NodeId, string][]
   outputs: NodeId[]
 }
 

src/platform/workflow/validation/schemas/workflowSchema.test.ts

@@ -67,69 +67,6 @@ describe('parseComfyWorkflow', () => {
     await expect(validateComfyWorkflow(workflow)).resolves.not.toBeNull()
   })
 
-  describe('linearData.inputs schema', () => {
-    it('validates 2-tuple format (legacy)', async () => {
-      const workflow = JSON.parse(JSON.stringify(defaultGraph))
-      workflow.extra = {
-        linearData: { inputs: [[1, 'prompt']], outputs: [1] }
-      }
-      const result = await validateComfyWorkflow(workflow)
-      expect(result).not.toBeNull()
-      expect(result!.extra!.linearData!.inputs).toEqual([[1, 'prompt']])
-    })
-
-    it('validates 3-tuple format with config', async () => {
-      const workflow = JSON.parse(JSON.stringify(defaultGraph))
-      workflow.extra = {
-        linearData: { inputs: [[1, 'prompt', { height: 200 }]], outputs: [] }
-      }
-      const result = await validateComfyWorkflow(workflow)
-      expect(result).not.toBeNull()
-      expect(result!.extra!.linearData!.inputs![0]).toEqual([
-        1,
-        'prompt',
-        { height: 200 }
-      ])
-    })
-
-    it('validates 3-tuple format with empty config', async () => {
-      const workflow = JSON.parse(JSON.stringify(defaultGraph))
-      workflow.extra = {
-        linearData: { inputs: [[1, 'prompt', {}]], outputs: [] }
-      }
-      const result = await validateComfyWorkflow(workflow)
-      expect(result).not.toBeNull()
-    })
-
-    it('validates mixed 2-tuple and 3-tuple entries', async () => {
-      const workflow = JSON.parse(JSON.stringify(defaultGraph))
-      workflow.extra = {
-        linearData: {
-          inputs: [
-            [1, 'prompt'],
-            [2, 'seed', { height: 100 }]
-          ],
-          outputs: []
-        }
-      }
-      const result = await validateComfyWorkflow(workflow)
-      expect(result).not.toBeNull()
-      expect(result!.extra!.linearData!.inputs).toEqual([
-        [1, 'prompt'],
-        [2, 'seed', { height: 100 }]
-      ])
-    })
-
-    it('rejects invalid config shape', async () => {
-      const workflow = JSON.parse(JSON.stringify(defaultGraph))
-      workflow.extra = {
-        linearData: { inputs: [[1, 'prompt', 'invalid']], outputs: [] }
-      }
-      const result = await validateComfyWorkflow(workflow)
-      expect(result).toBeNull()
-    })
-  })
-
   it('workflow.nodes.pos', async () => {
     const workflow = JSON.parse(JSON.stringify(defaultGraph))
     workflow.nodes[0].pos = [1, 2, 3]

src/platform/workflow/validation/schemas/workflowSchema.ts

@@ -285,18 +285,7 @@ const zExtra = z
     linearMode: z.boolean().optional(),
     linearData: z
       .object({
-        inputs: z
-          .array(
-            z.union([
-              z.tuple([
-                zNodeId,
-                z.string(),
-                z.object({ height: z.number().optional() }).passthrough()
-              ]),
-              z.tuple([zNodeId, z.string()])
-            ])
-          )
-          .optional(),
+        inputs: z.array(z.tuple([zNodeId, z.string()])).optional(),
         outputs: z.array(zNodeId).optional()
       })
       .optional()

src/renderer/extensions/linearMode/AppInput.vue

@@ -2,7 +2,7 @@
 import { remove } from 'es-toolkit'
 import { computed } from 'vue'
 
-import type { LinearInput } from '@/platform/workflow/management/stores/comfyWorkflow'
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
 
@@ -15,7 +15,7 @@ const { id, name } = defineProps<{
 const appModeStore = useAppModeStore()
 const isPromoted = computed(() => appModeStore.selectedInputs.some(matchesThis))
 
-function matchesThis([nodeId, widgetName]: LinearInput) {
+function matchesThis([nodeId, widgetName]: [NodeId, string]) {
   return id == nodeId && name === widgetName
 }
 function togglePromotion() {

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/LinearProgressBar.vue

@@ -3,6 +3,8 @@ import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { useExecutionStore } from '@/stores/executionStore'
 import { cn } from '@/utils/tailwindUtil'
 
+defineOptions({ inheritAttrs: false })
+
 const {
   class: className,
   overallOpacity = 1,
@@ -30,13 +32,11 @@ const executionStore = useExecutionStore()
     "
   >
     <div
-      data-testid="linear-progress-overall"
       class="absolute inset-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
       :class="cn(rounded && 'rounded-sm')"
       :style="{ width: `${totalPercent}%`, opacity: overallOpacity }"
     />
     <div
-      data-testid="linear-progress-node"
       class="absolute inset-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
       :class="cn(rounded && 'rounded-sm')"
       :style="{ width: `${currentNodePercent}%`, opacity: activeOpacity }"

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,19 +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"
-    />
-    <LinearProgressBar
-      data-testid="linear-item-progress-bar"
-      class="mt-1 h-1 w-10"
-      rounded
-    />
+    <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/stores/appModeStore.test.ts

@@ -245,19 +245,6 @@ describe('appModeStore', () => {
       expect(store.selectedInputs).toEqual([[1, 'prompt']])
     })
 
-    it('preserves config through pruning', () => {
-      const node1 = mockNode(1)
-      mockResolveNode.mockImplementation((id) =>
-        id == 1 ? fromAny<LGraphNode, unknown>(node1) : undefined
-      )
-
-      store.loadSelections({
-        inputs: [[1, 'prompt', { height: 150 }]]
-      })
-
-      expect(store.selectedInputs).toEqual([[1, 'prompt', { height: 150 }]])
-    })
-
     it('keeps inputs for existing nodes even if widget is missing', async () => {
       const node1 = mockNode(1)
       mockResolveNode.mockImplementation((id) =>
@@ -403,46 +390,6 @@ describe('appModeStore', () => {
     })
   })
 
-  describe('updateInputConfig', () => {
-    it('sets config on an existing input', () => {
-      store.selectedInputs.push([1, 'prompt'])
-
-      store.updateInputConfig(1 as NodeId, 'prompt', { height: 200 })
-
-      expect(store.selectedInputs[0][2]).toEqual({ height: 200 })
-    })
-
-    it('is a no-op when entry is not found', () => {
-      store.selectedInputs.push([1, 'prompt'])
-
-      store.updateInputConfig(99 as NodeId, 'prompt', { height: 200 })
-
-      expect(store.selectedInputs[0][2]).toBeUndefined()
-    })
-
-    it('matches nodeId with loose equality', () => {
-      store.selectedInputs.push(['1', 'prompt'])
-
-      store.updateInputConfig(1 as NodeId, 'prompt', { height: 200 })
-
-      expect(store.selectedInputs[0][2]).toEqual({ height: 200 })
-    })
-
-    it('triggers linearData sync watcher', async () => {
-      workflowStore.activeWorkflow = createBuilderWorkflow()
-      store.selectedInputs.push([42, 'prompt'])
-      await nextTick()
-
-      store.updateInputConfig(42 as NodeId, 'prompt', { height: 300 })
-      await nextTick()
-
-      expect(app.rootGraph.extra.linearData).toEqual({
-        inputs: [[42, 'prompt', { height: 300 }]],
-        outputs: []
-      })
-    })
-  })
-
   describe('autoEnableVueNodes', () => {
     it('enables Vue nodes when entering select mode with them disabled', async () => {
       mockSettings.store['Comfy.VueNodes.Enabled'] = false

src/stores/appModeStore.ts

@@ -5,11 +5,7 @@ import { useEventListener } from '@vueuse/core'
 import { useEmptyWorkflowDialog } from '@/components/builder/useEmptyWorkflowDialog'
 import { useAppMode } from '@/composables/useAppMode'
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
-import type {
-  InputWidgetConfig,
-  LinearData,
-  LinearInput
-} from '@/platform/workflow/management/stores/comfyWorkflow'
+import type { LinearData } from '@/platform/workflow/management/stores/comfyWorkflow'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -33,7 +29,7 @@ export const useAppModeStore = defineStore('appMode', () => {
 
   const showVueNodeSwitchPopup = ref(false)
 
-  const selectedInputs = ref<LinearInput[]>([])
+  const selectedInputs = ref<[NodeId, string][]>([])
   const selectedOutputs = ref<NodeId[]>([])
   const hasOutputs = computed(() => !!selectedOutputs.value.length)
   const hasNodes = computed(() => {
@@ -164,18 +160,6 @@ export const useAppModeStore = defineStore('appMode', () => {
     if (index !== -1) selectedInputs.value.splice(index, 1)
   }
 
-  function updateInputConfig(
-    nodeId: NodeId,
-    widgetName: string,
-    config: InputWidgetConfig
-  ) {
-    const entry = selectedInputs.value.find(
-      ([id, name]) => nodeId == id && widgetName === name
-    )
-    if (!entry) return
-    entry[2] = { ...entry[2], ...config }
-  }
-
   return {
     enterBuilder,
     exitBuilder,
@@ -187,7 +171,6 @@ export const useAppModeStore = defineStore('appMode', () => {
     resetSelectedToWorkflow,
     selectedInputs,
     selectedOutputs,
-    updateInputConfig,
     showVueNodeSwitchPopup
   }
 })

src/views/LinearView.vue

@@ -154,7 +154,6 @@ function dragDrop(e: DragEvent) {
         @drop="dragDrop"
       >
         <LinearProgressBar
-          data-testid="linear-header-progress-bar"
           class="absolute top-0 left-0 z-21 h-1 w-[calc(100%+16px)]"
         />
         <LinearPreview

vite.config.mts

@@ -63,10 +63,7 @@ const IS_NIGHTLY = process.env.IS_NIGHTLY === 'true'
 let GIT_COMMIT = process.env.FRONTEND_COMMIT_HASH || ''
 if (!GIT_COMMIT) {
   try {
-    GIT_COMMIT = execSync('git rev-parse HEAD', {
-      timeout: 5000,
-      windowsHide: true
-    })
+    GIT_COMMIT = execSync('git rev-parse HEAD', { timeout: 5000 })
       .toString()
       .trim()
   } catch {