[backport cloud/1.44] fix: clear missing model on promoted widget change (#12695)

Backport of #12677 to `cloud/1.44`

Automatically created by backport workflow.

Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>

apps/desktop-ui/src/i18n.ts

@@ -9,6 +9,7 @@ import en from '@frontend-locales/en/main.json' with { type: 'json' }
 import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
 
 import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
+import { getDefaultLocale } from '@frontend-locales/localeConfig'
 import { createI18n } from 'vue-i18n'
 
 function buildLocale<
@@ -167,7 +168,7 @@ const messages: Record<string, LocaleMessages> = {
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2
   legacy: false,
-  locale: navigator.language.split('-')[0] || 'en',
+  locale: getDefaultLocale(),
   fallbackLocale: 'en',
   messages,
   // Ignore warnings for locale options as each option is in its own language.

apps/website/src/scripts/posthog.test.ts

@@ -0,0 +1,55 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const hoisted = vi.hoisted(() => ({
+  mockInit: vi.fn(),
+  mockCapture: vi.fn()
+}))
+
+vi.mock('posthog-js', () => ({
+  default: {
+    init: hoisted.mockInit,
+    capture: hoisted.mockCapture
+  }
+}))
+
+describe('initPostHog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.resetModules()
+  })
+
+  it('passes a before_send hook to posthog.init that strips PII end-to-end', async () => {
+    const { initPostHog } = await import('./posthog')
+    initPostHog()
+
+    expect(hoisted.mockInit).toHaveBeenCalledOnce()
+    const initOptions = hoisted.mockInit.mock.calls[0][1]
+    expect(initOptions.person_profiles).toBe('identified_only')
+    expect(typeof initOptions.before_send).toBe('function')
+
+    const event = {
+      properties: {
+        email: 'a@example.com',
+        prompt: 'hello',
+        user_email: 'b@example.com',
+        $email: 'c@example.com',
+        method: 'google'
+      },
+      $set: { email: 'd@example.com', name: 'keep me' },
+      $set_once: { $email: 'e@example.com', plan: 'free' }
+    }
+
+    const result = initOptions.before_send(event)
+
+    expect(result.properties).not.toHaveProperty('email')
+    expect(result.properties).not.toHaveProperty('prompt')
+    expect(result.properties).not.toHaveProperty('user_email')
+    expect(result.properties).not.toHaveProperty('$email')
+    expect(result.properties).toHaveProperty('method', 'google')
+    expect(result.$set).not.toHaveProperty('email')
+    expect(result.$set).toHaveProperty('name', 'keep me')
+    expect(result.$set_once).not.toHaveProperty('$email')
+    expect(result.$set_once).toHaveProperty('plan', 'free')
+  })
+})

apps/website/src/scripts/posthog.ts

@@ -1,5 +1,7 @@
 import posthog from 'posthog-js'
 
+import { createPostHogBeforeSend } from '@comfyorg/shared-frontend-utils/piiUtil'
+
 const POSTHOG_KEY =
   import.meta.env.PUBLIC_POSTHOG_KEY ??
   'phc_iKfK86id4xVYws9LybMje0h44eGtfwFgRPIBehmy8rO'
@@ -18,7 +20,9 @@ export function initPostHog() {
       ui_host: POSTHOG_UI_HOST,
       capture_pageview: false,
       capture_pageleave: true,
-      person_profiles: 'identified_only'
+      person_profiles: 'identified_only',
+      // cookie_domain omitted — see PostHogTelemetryProvider.ts note + posthog-js#3578
+      before_send: createPostHogBeforeSend()
     })
     initialized = true
   } catch (error) {

browser_tests/assets/missing/missing_model_promoted_widget.json

@@ -0,0 +1,115 @@
+{
+  "id": "test-missing-model-promoted-widget",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "subgraph-with-promoted-missing-model",
+      "pos": [450, 250],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-with-promoted-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 1,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph with Promoted Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "ckpt-name-input-id",
+            "name": "ckpt_name",
+            "type": "COMBO",
+            "linkIds": [1],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [250, 180],
+            "size": [315, 98],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "ckpt_name",
+                "name": "ckpt_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "ckpt_name"
+                },
+                "link": 1
+              }
+            ],
+            "outputs": [
+              { "name": "MODEL", "type": "MODEL", "links": null },
+              { "name": "CLIP", "type": "CLIP", "links": null },
+              { "name": "VAE", "type": "VAE", "links": null }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "COMBO"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -282,10 +282,12 @@ export class ComfyPage {
 
   async setup({
     clearStorage = true,
-    mockReleases = true
+    mockReleases = true,
+    url
   }: {
     clearStorage?: boolean
     mockReleases?: boolean
+    url?: string
   } = {}) {
     // Mock release endpoint to prevent changelog popups (before navigation)
     if (mockReleases) {
@@ -317,7 +319,7 @@ export class ComfyPage {
       }, this.id)
     }
 
-    await this.goto()
+    await this.goto({ url })
 
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.waitForAppReady()
@@ -344,8 +346,8 @@ export class ComfyPage {
     return assetPath(fileName)
   }
 
-  async goto() {
-    await this.page.goto(this.url)
+  async goto({ url }: { url?: string } = {}) {
+    await this.page.goto(url ? new URL(url, this.url).toString() : this.url)
   }
 
   async nextFrame() {

browser_tests/fixtures/VueNodeHelpers.ts

@@ -217,13 +217,20 @@ export class VueNodeHelpers {
     }
   }
 
+  /**
+   * Locator for the Enter Subgraph footer button.
+   */
+  getSubgraphEnterButton(nodeId?: string): Locator {
+    const root = nodeId ? this.getNodeLocator(nodeId) : this.page
+    return root.getByTestId(TestIds.widgets.subgraphEnterButton).first()
+  }
+
   /**
    * Enter the subgraph of a node.
    * @param nodeId - The ID of the node to enter the subgraph of. If not provided, the first matched subgraph will be entered.
    */
   async enterSubgraph(nodeId?: string): Promise<void> {
-    const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
-    const editButton = locator.getByTestId(TestIds.widgets.subgraphEnterButton)
+    const editButton = this.getSubgraphEnterButton(nodeId)
 
     // The footer tab button extends below the node body (visible area),
     // but its bounding box center overlaps the node body div.

browser_tests/fixtures/components/SidebarTab.ts

@@ -95,6 +95,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
   public readonly allTab: Locator
   public readonly blueprintsTab: Locator
   public readonly sortButton: Locator
+  public readonly nodePreview: Locator
 
   constructor(public override readonly page: Page) {
     super(page, 'node-library')
@@ -103,6 +104,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
     this.allTab = this.getTab('All')
     this.blueprintsTab = this.getTab('Blueprints')
     this.sortButton = this.sidebarContent.getByRole('button', { name: 'Sort' })
+    this.nodePreview = page.getByTestId(TestIds.sidebar.nodePreviewCard)
   }
 
   getTab(name: string) {

browser_tests/fixtures/helpers/AssetHelper.ts

@@ -215,11 +215,12 @@ export class AssetHelper {
     return this.store.size
   }
   private handleListAssets(route: Route, url: URL) {
-    const includeTags = url.searchParams.get('include_tags')?.split(',') ?? []
+    const includeTags = parseAssetTagParam(url.searchParams.get('include_tags'))
+    const excludeTags = parseAssetTagParam(url.searchParams.get('exclude_tags'))
     const limit = parseInt(url.searchParams.get('limit') ?? '0', 10)
     const offset = parseInt(url.searchParams.get('offset') ?? '0', 10)
 
-    let filtered = this.getFilteredAssets(includeTags)
+    let filtered = this.getFilteredAssets(includeTags, excludeTags)
     if (limit > 0) {
       filtered = filtered.slice(offset, offset + limit)
     }
@@ -296,15 +297,29 @@ export class AssetHelper {
     this.paginationOptions = null
     this.uploadResponse = null
   }
-  private getFilteredAssets(tags: string[]): Asset[] {
+  private getFilteredAssets(
+    includeTags: string[],
+    excludeTags: string[]
+  ): Asset[] {
     const assets = [...this.store.values()]
-    if (tags.length === 0) return assets
 
-    return assets.filter((asset) =>
-      tags.every((tag) => (asset.tags ?? []).includes(tag))
+    return assets.filter(
+      (asset) =>
+        includeTags.every((tag) => (asset.tags ?? []).includes(tag)) &&
+        excludeTags.every((tag) => !(asset.tags ?? []).includes(tag))
     )
   }
 }
+
+function parseAssetTagParam(value: string | null): string[] {
+  return (
+    value
+      ?.split(',')
+      .map((tag) => tag.trim())
+      .filter(Boolean) ?? []
+  )
+}
+
 export function createAssetHelper(
   page: Page,
   ...operators: AssetOperator[]

browser_tests/fixtures/helpers/ClipboardHelper.ts

@@ -6,6 +6,71 @@ import type { Locator, Page } from '@playwright/test'
 import type { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
 import { getMimeType } from '@e2e/fixtures/utils/mimeTypeUtil'
 
+function readFilePayload(filePath: string) {
+  const buffer = readFileSync(filePath)
+  const bufferArray = [...new Uint8Array(buffer)]
+  const fileName = basename(filePath)
+  const fileType = getMimeType(fileName)
+
+  return { bufferArray, fileName, fileType }
+}
+
+async function dispatchFilePaste(
+  page: Page,
+  payload: ReturnType<typeof readFilePayload>
+): Promise<void> {
+  await page.evaluate(({ bufferArray, fileName, fileType }) => {
+    const file = new File([new Uint8Array(bufferArray)], fileName, {
+      type: fileType
+    })
+    const dataTransfer = new DataTransfer()
+    dataTransfer.items.add(file)
+
+    const target = document.activeElement ?? document
+    target.dispatchEvent(
+      new ClipboardEvent('paste', {
+        clipboardData: dataTransfer,
+        bubbles: true,
+        cancelable: true
+      })
+    )
+  }, payload)
+}
+
+async function interceptNextFilePaste(
+  page: Page,
+  payload: ReturnType<typeof readFilePayload>
+): Promise<void> {
+  await page.evaluate(({ bufferArray, fileName, fileType }) => {
+    document.addEventListener(
+      'paste',
+      (e: ClipboardEvent) => {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+
+        const file = new File([new Uint8Array(bufferArray)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+
+        document.dispatchEvent(
+          new ClipboardEvent('paste', {
+            clipboardData: dataTransfer,
+            bubbles: true,
+            cancelable: true
+          })
+        )
+      },
+      { capture: true, once: true }
+    )
+  }, payload)
+}
+
+type PasteFileOptions = {
+  mode?: 'keyboard' | 'direct'
+}
+
 export class ClipboardHelper {
   constructor(
     private readonly keyboard: KeyboardHelper,
@@ -20,43 +85,20 @@ export class ClipboardHelper {
     await this.keyboard.ctrlSend('KeyV', locator ?? null)
   }
 
-  async pasteFile(filePath: string): Promise<void> {
-    const buffer = readFileSync(filePath)
-    const bufferArray = [...new Uint8Array(buffer)]
-    const fileName = basename(filePath)
-    const fileType = getMimeType(fileName)
+  async pasteFile(
+    filePath: string,
+    { mode = 'keyboard' }: PasteFileOptions = {}
+  ): Promise<void> {
+    const payload = readFilePayload(filePath)
 
-    // Register a one-time capturing-phase listener that intercepts the next
-    // paste event and injects file data onto clipboardData.
-    await this.page.evaluate(
-      ({ bufferArray, fileName, fileType }) => {
-        document.addEventListener(
-          'paste',
-          (e: ClipboardEvent) => {
-            e.preventDefault()
-            e.stopImmediatePropagation()
+    if (mode === 'keyboard') {
+      await interceptNextFilePaste(this.page, payload)
+      await this.paste()
+      return
+    }
 
-            const file = new File([new Uint8Array(bufferArray)], fileName, {
-              type: fileType
-            })
-            const dataTransfer = new DataTransfer()
-            dataTransfer.items.add(file)
-
-            const syntheticEvent = new ClipboardEvent('paste', {
-              clipboardData: dataTransfer,
-              bubbles: true,
-              cancelable: true
-            })
-            document.dispatchEvent(syntheticEvent)
-          },
-          { capture: true, once: true }
-        )
-      },
-      { bufferArray, fileName, fileType }
-    )
-
-    // Trigger a real Ctrl+V keystroke — the capturing listener above will
-    // intercept it and re-dispatch with file data attached.
-    await this.paste()
+    // Browser clipboard APIs cannot reliably seed arbitrary files in tests.
+    // Dispatch the app-level paste event with file clipboardData directly.
+    await dispatchFilePaste(this.page, payload)
   }
 }

browser_tests/fixtures/helpers/LogsTerminalHelper.ts

@@ -1,19 +1,26 @@
-import { test as base } from '@playwright/test'
-import type { Page, Route } from '@playwright/test'
+import { test as base, expect } from '@playwright/test'
+import type { Page, Route, WebSocketRoute } from '@playwright/test'
 
 import type { LogsRawResponse } from '@/schemas/apiSchema'
 
+const RAW_LOGS_URL = '**/internal/logs/raw**'
+const SUBSCRIBE_LOGS_URL = '**/internal/logs/subscribe**'
+
 export class LogsTerminalHelper {
   constructor(private readonly page: Page) {}
 
-  async mockRawLogs(messages: string[]) {
-    await this.page.route('**/internal/logs/raw**', (route: Route) =>
-      route.fulfill({
+  async mockRawLogs(messages: string[]): Promise<() => number> {
+    let count = 0
+    await this.page.unroute(RAW_LOGS_URL)
+    await this.page.route(RAW_LOGS_URL, async (route: Route) => {
+      count += 1
+      await route.fulfill({
         status: 200,
         contentType: 'application/json',
         body: JSON.stringify(LogsTerminalHelper.buildRawLogsResponse(messages))
       })
-    )
+    })
+    return () => count
   }
 
   async mockRawLogsPending(messages: string[] = []): Promise<() => void> {
@@ -21,7 +28,8 @@ export class LogsTerminalHelper {
     const pending = new Promise<void>((r) => {
       resolve = r
     })
-    await this.page.route('**/internal/logs/raw**', async (route: Route) => {
+    await this.page.unroute(RAW_LOGS_URL)
+    await this.page.route(RAW_LOGS_URL, async (route: Route) => {
       await pending
       await route.fulfill({
         status: 200,
@@ -33,15 +41,39 @@ export class LogsTerminalHelper {
   }
 
   async mockRawLogsError() {
-    await this.page.route('**/internal/logs/raw**', (route: Route) =>
+    await this.page.unroute(RAW_LOGS_URL)
+    await this.page.route(RAW_LOGS_URL, (route: Route) =>
       route.fulfill({ status: 500, body: 'Internal Server Error' })
     )
   }
 
-  async mockSubscribeLogs() {
-    await this.page.route('**/internal/logs/subscribe**', (route: Route) =>
-      route.fulfill({ status: 200, body: '' })
-    )
+  async mockSubscribeLogs(): Promise<() => number> {
+    let count = 0
+    await this.page.unroute(SUBSCRIBE_LOGS_URL)
+    await this.page.route(SUBSCRIBE_LOGS_URL, async (route: Route) => {
+      count += 1
+      await route.fulfill({ status: 200, body: '' })
+    })
+    return () => count
+  }
+
+  /**
+   * Force the frontend to reconnect by closing the proxied WebSocket. The
+   * api layer reschedules a fresh `WebSocket(...)`, the routeWebSocket
+   * handler fires again, and on `open` with `isReconnect=true` it dispatches
+   * `'reconnected'`, which triggers the logs-terminal resync.
+   *
+   * Use the resync's `subscribeLogs(true)` HTTP call as the sync point — by
+   * the time the count goes up, the new socket is open and resync has
+   * completed enough to assert against the terminal.
+   */
+  async triggerReconnect(
+    ws: WebSocketRoute,
+    subscribeFetches: () => number
+  ): Promise<void> {
+    const before = subscribeFetches()
+    await ws.close()
+    await expect.poll(subscribeFetches).toBeGreaterThan(before)
   }
 
   static buildWsLogFrame(messages: string[]): string {

browser_tests/fixtures/selectors.ts

@@ -8,6 +8,7 @@ export const TestIds = {
     toolbar: 'side-toolbar',
     nodeLibrary: 'node-library-tree',
     nodeLibrarySearch: 'node-library-search',
+    nodePreviewCard: 'node-preview-card',
     workflows: 'workflows-sidebar',
     modeToggle: 'mode-toggle'
   },
@@ -75,7 +76,15 @@ export const TestIds = {
     publishTabPanel: 'publish-tab-panel',
     apiSignin: 'api-signin-dialog',
     updatePassword: 'update-password-dialog',
-    cloudNotification: 'cloud-notification-dialog'
+    cloudNotification: 'cloud-notification-dialog',
+    openSharedWorkflow: 'open-shared-workflow-dialog',
+    openSharedWorkflowTitle: 'open-shared-workflow-title',
+    openSharedWorkflowClose: 'open-shared-workflow-close',
+    openSharedWorkflowErrorClose: 'open-shared-workflow-error-close',
+    openSharedWorkflowCancel: 'open-shared-workflow-cancel',
+    openSharedWorkflowOpenWithoutImporting:
+      'open-shared-workflow-open-without-importing',
+    openSharedWorkflowConfirm: 'open-shared-workflow-confirm'
   },
   keybindings: {
     presetMenu: 'keybinding-preset-menu'

browser_tests/fixtures/sharedWorkflowImportFixture.ts

@@ -0,0 +1,250 @@
+import { test as base } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import type {
+  Asset,
+  ImportPublishedAssetsRequest,
+  ListAssetsResponse
+} from '@comfyorg/ingest-types'
+import type { z } from 'zod'
+
+import type { zSharedWorkflowResponse } from '@/platform/workflow/sharing/schemas/shareSchemas'
+import type { AssetInfo } from '@/schemas/apiSchema'
+
+type SharedWorkflowResponse = z.input<typeof zSharedWorkflowResponse>
+
+export const sharedWorkflowImportScenario = {
+  shareId: 'shared-missing-media-e2e',
+  workflowId: 'shared-missing-media-workflow',
+  publishedAssetId: 'published-input-asset-1',
+  inputFileName: 'shared_imported_image.png'
+} as const
+
+export type SharedWorkflowRequestEvent =
+  | 'import'
+  | 'input-assets-including-public-before-import'
+  | 'input-assets-including-public-after-import'
+
+export interface SharedWorkflowImportMocks {
+  resetAndStartRecording: () => void
+  getImportBody: () => ImportPublishedAssetsRequest | undefined
+  getRequestEvents: () => SharedWorkflowRequestEvent[]
+  waitForPublicInclusiveInputAssetResponseAfterImport: () => Promise<void>
+}
+
+const defaultInputFileName = '00000000000000000000000Aexample.png'
+
+const sharedWorkflowAsset: AssetInfo = {
+  id: sharedWorkflowImportScenario.publishedAssetId,
+  name: sharedWorkflowImportScenario.inputFileName,
+  preview_url: '',
+  storage_url: '',
+  model: false,
+  public: false,
+  in_library: false
+}
+
+const defaultInputAsset: Asset = {
+  id: 'default-input-asset',
+  name: defaultInputFileName,
+  asset_hash: defaultInputFileName,
+  size: 1_024,
+  mime_type: 'image/png',
+  tags: ['input'],
+  created_at: '2026-05-01T00:00:00Z',
+  updated_at: '2026-05-01T00:00:00Z',
+  last_access_time: '2026-05-01T00:00:00Z'
+}
+
+const importedInputAsset: Asset = {
+  id: 'imported-input-asset',
+  name: sharedWorkflowImportScenario.inputFileName,
+  asset_hash: sharedWorkflowImportScenario.inputFileName,
+  size: 1_024,
+  mime_type: 'image/png',
+  tags: ['input'],
+  created_at: '2026-05-01T00:00:00Z',
+  updated_at: '2026-05-01T00:00:00Z',
+  last_access_time: '2026-05-01T00:00:00Z'
+}
+
+const sharedWorkflowResponse: SharedWorkflowResponse = {
+  share_id: sharedWorkflowImportScenario.shareId,
+  workflow_id: sharedWorkflowImportScenario.workflowId,
+  name: 'Shared Missing Media Workflow',
+  listed: true,
+  publish_time: '2026-05-01T00:00:00Z',
+  workflow_json: {
+    version: 0.4,
+    last_node_id: 10,
+    last_link_id: 0,
+    nodes: [
+      {
+        id: 10,
+        type: 'LoadImage',
+        pos: [50, 200],
+        size: [315, 314],
+        flags: {},
+        order: 0,
+        mode: 0,
+        inputs: [],
+        outputs: [
+          {
+            name: 'IMAGE',
+            type: 'IMAGE',
+            links: null
+          },
+          {
+            name: 'MASK',
+            type: 'MASK',
+            links: null
+          }
+        ],
+        properties: {
+          'Node name for S&R': 'LoadImage'
+        },
+        widgets_values: [sharedWorkflowImportScenario.inputFileName, 'image']
+      }
+    ],
+    links: [],
+    groups: [],
+    config: {},
+    extra: {
+      ds: {
+        offset: [0, 0],
+        scale: 1
+      }
+    }
+  },
+  assets: [sharedWorkflowAsset]
+}
+
+export const sharedWorkflowImportFixture = base.extend<{
+  sharedWorkflowImportMocks: SharedWorkflowImportMocks
+}>({
+  sharedWorkflowImportMocks: async ({ page }, use) => {
+    const mocks = await mockSharedWorkflowImportFlow(page)
+    await use(mocks)
+  }
+})
+
+async function mockSharedWorkflowImportFlow(
+  page: Page
+): Promise<SharedWorkflowImportMocks> {
+  let isRecording = false
+  let importEndpointCalled = false
+  let importBody: ImportPublishedAssetsRequest | undefined
+  let resolvePublicInclusiveInputAssetResponseAfterImport: () => void = () => {}
+  let publicInclusiveInputAssetResponseAfterImport = new Promise<void>(
+    (resolve) => {
+      resolvePublicInclusiveInputAssetResponseAfterImport = resolve
+    }
+  )
+  const requestEvents: SharedWorkflowRequestEvent[] = []
+
+  function resetPublicInclusiveInputAssetResponseWaiter() {
+    publicInclusiveInputAssetResponseAfterImport = new Promise<void>(
+      (resolve) => {
+        resolvePublicInclusiveInputAssetResponseAfterImport = resolve
+      }
+    )
+  }
+
+  function recordRequestEvent(event: SharedWorkflowRequestEvent) {
+    if (isRecording) requestEvents.push(event)
+  }
+
+  await page.route(
+    `**/workflows/published/${sharedWorkflowImportScenario.shareId}`,
+    async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(sharedWorkflowResponse)
+      })
+    }
+  )
+
+  await page.route('**/api/assets/import', async (route) => {
+    recordRequestEvent('import')
+    importBody = route.request().postDataJSON() as ImportPublishedAssetsRequest
+    importEndpointCalled = true
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({})
+    })
+  })
+
+  // Excludes `/api/assets/import` so the specific route above
+  // remains isolated from the general asset listing mock.
+  await page.route(/\/api\/assets(?=\?|$)/, async (route) => {
+    const url = new URL(route.request().url())
+    const includeTags = getTagParam(url, 'include_tags')
+    const isInputAssetRequest = includeTags.includes('input')
+    const includesPublicAssets =
+      url.searchParams.get('include_public') === 'true'
+    const isPublicInclusiveInputAssetRequest =
+      isInputAssetRequest && includesPublicAssets
+    const isAfterImportPublicInclusiveInputAssetRequest =
+      isPublicInclusiveInputAssetRequest && importEndpointCalled
+
+    if (isPublicInclusiveInputAssetRequest) {
+      recordRequestEvent(
+        importEndpointCalled
+          ? 'input-assets-including-public-after-import'
+          : 'input-assets-including-public-before-import'
+      )
+    }
+
+    const allAssets = [
+      defaultInputAsset,
+      ...(importEndpointCalled ? [importedInputAsset] : [])
+    ]
+    const assets = includeTags.length
+      ? allAssets.filter((asset) =>
+          includeTags.every((tag) => asset.tags?.includes(tag))
+        )
+      : allAssets
+
+    const response: ListAssetsResponse = {
+      assets,
+      total: assets.length,
+      has_more: false
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(response)
+    })
+
+    if (isAfterImportPublicInclusiveInputAssetRequest) {
+      resolvePublicInclusiveInputAssetResponseAfterImport()
+    }
+  })
+
+  return {
+    resetAndStartRecording: () => {
+      isRecording = true
+      importEndpointCalled = false
+      importBody = undefined
+      requestEvents.length = 0
+      resetPublicInclusiveInputAssetResponseWaiter()
+    },
+    getImportBody: () => importBody,
+    getRequestEvents: () => [...requestEvents],
+    waitForPublicInclusiveInputAssetResponseAfterImport: () =>
+      publicInclusiveInputAssetResponseAfterImport
+  }
+}
+
+function getTagParam(url: URL, key: string): string[] {
+  return (
+    url.searchParams
+      .get(key)
+      ?.split(',')
+      .map((tag) => tag.trim())
+      .filter(Boolean) ?? []
+  )
+}

browser_tests/fixtures/utils/selectionToolboxMoreOptions.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+export async function openMoreOptionsMenu(
+  comfyPage: ComfyPage,
+  nodeTitle: string
+) {
+  const nodes = await comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+  if (nodes.length === 0) {
+    throw new Error(`No "${nodeTitle}" nodes found`)
+  }
+
+  await nodes[0].centerOnNode()
+  await nodes[0].click('title')
+
+  await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
+
+  const moreOptionsBtn = comfyPage.page.getByTestId('more-options-button')
+  await expect(moreOptionsBtn).toBeVisible()
+  await moreOptionsBtn.click()
+  await comfyPage.nextFrame()
+
+  const menu = comfyPage.page.locator('.p-contextmenu')
+  await expect(menu).toBeVisible()
+
+  return menu
+}

browser_tests/tests/assetHelper.spec.ts

@@ -133,6 +133,29 @@ test.describe('AssetHelper', () => {
       expect(data.assets[0].id).toBe(STABLE_CHECKPOINT.id)
     })
 
+    test('GET /assets filters by exclude_tags', async ({
+      comfyPage,
+      assetApi
+    }) => {
+      assetApi.configure(
+        withAsset(STABLE_INPUT_IMAGE),
+        withAsset({
+          ...STABLE_INPUT_IMAGE,
+          id: 'missing-input',
+          tags: ['input', 'missing']
+        })
+      )
+      await assetApi.mock()
+
+      const { body } = await assetApi.fetch(
+        `${comfyPage.url}/api/assets?include_tags=input,&exclude_tags= missing,`
+      )
+      const data = body as { assets: Array<{ id: string }> }
+      expect(data.assets.map((asset) => asset.id)).toEqual([
+        STABLE_INPUT_IMAGE.id
+      ])
+    })
+
     test('GET /assets/:id returns single asset or 404', async ({
       comfyPage,
       assetApi

browser_tests/tests/bottomPanelLogs.spec.ts

@@ -147,5 +147,68 @@ test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
       )
       await expect(comfyPage.bottomPanel.logs.terminalRoot).toBeHidden()
     })
+
+    test('resyncs the terminal when the WebSocket reconnects', async ({
+      comfyPage,
+      logsTerminal,
+      getWebSocket
+    }) => {
+      const subscribeFetches = await logsTerminal.mockSubscribeLogs()
+      const initialLine = 'pre-reboot log line'
+      const postRebootLineA = 'post-reboot line A'
+      const postRebootLineB = 'post-reboot line B'
+
+      await logsTerminal.mockRawLogs([initialLine])
+      await comfyPage.bottomPanel.toggleLogs()
+      await expect(comfyPage.bottomPanel.logs.terminalRoot).toContainText(
+        initialLine
+      )
+
+      // Swap the raw-logs mock so the next fetch returns the post-reboot view.
+      await logsTerminal.mockRawLogs([postRebootLineA, postRebootLineB])
+
+      const ws = await getWebSocket()
+      await logsTerminal.triggerReconnect(ws, subscribeFetches)
+
+      await expect(comfyPage.bottomPanel.logs.terminalRoot).toContainText(
+        postRebootLineA
+      )
+      await expect(comfyPage.bottomPanel.logs.terminalRoot).toContainText(
+        postRebootLineB
+      )
+      // reset() before write means the pre-reboot line must be gone.
+      await expect(comfyPage.bottomPanel.logs.terminalRoot).not.toContainText(
+        initialLine
+      )
+    })
+
+    test('resumes WebSocket log streaming after the reconnect', async ({
+      comfyPage,
+      logsTerminal,
+      getWebSocket
+    }) => {
+      const subscribeFetches = await logsTerminal.mockSubscribeLogs()
+      await logsTerminal.mockRawLogs(['initial'])
+      await comfyPage.bottomPanel.toggleLogs()
+      await expect(comfyPage.bottomPanel.logs.terminalRoot).toContainText(
+        'initial'
+      )
+
+      await logsTerminal.mockRawLogs(['after-reboot snapshot'])
+
+      const ws = await getWebSocket()
+      await logsTerminal.triggerReconnect(ws, subscribeFetches)
+
+      // The route handler fires again on the new connection; pull the latest
+      // WebSocketRoute and push a live frame to prove the 'logs' listener
+      // survived the reconnect.
+      const liveLine = 'live log emitted after the reconnect'
+      const newWs = await getWebSocket()
+      newWs.send(LogsTerminalHelper.buildWsLogFrame([liveLine]))
+
+      await expect(comfyPage.bottomPanel.logs.terminalRoot).toContainText(
+        liveLine
+      )
+    })
   })
 })

browser_tests/tests/i18nLocaleFallback.spec.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+// Regression test for https://github.com/Comfy-Org/ComfyUI_frontend/issues/10563
+//
+// Pins the end-to-end cascade through createI18n + coreSettings defaultValue +
+// GraphView watchEffect: when navigator.language base tag is unsupported (e.g.
+// 'de-DE') and Comfy.Locale is unset (fresh-install state), sidebar labels
+// must render translated strings, not literal i18n keys like
+// 'sideToolbar.labels.assets'.
+test.describe('i18n locale fallback', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.page.addInitScript(() => {
+      Object.defineProperty(navigator, 'language', {
+        value: 'de-DE',
+        configurable: true
+      })
+      Object.defineProperty(navigator, 'languages', {
+        value: ['de-DE', 'de'],
+        configurable: true
+      })
+    })
+    // Default sidebar size on small viewports hides labels; force normal so
+    // .side-bar-button-label is rendered for the assertion.
+    await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'normal')
+    await comfyPage.page.reload()
+    await comfyPage.waitForAppReady()
+  })
+
+  test('sidebar labels render translated strings, not raw i18n keys', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    await page.setViewportSize({ width: 1920, height: 1080 })
+
+    const labelTexts = await page
+      .getByTestId('side-toolbar')
+      .locator('.side-bar-button-label')
+      .allTextContents()
+
+    expect(labelTexts.length).toBeGreaterThan(0)
+    for (const text of labelTexts) {
+      expect(text).not.toContain('sideToolbar.labels')
+    }
+  })
+})

browser_tests/tests/nodeContextMenuShapeSubmenu.spec.ts

@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { openMoreOptionsMenu } from '@e2e/fixtures/utils/selectionToolboxMoreOptions'
+
+test.describe(
+  'Node context menu shape submenu (FE-570)',
+  { tag: '@ui' },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
+      await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    })
+
+    async function expectShapePopoverVisible(comfyPage: ComfyPage) {
+      const popover = comfyPage.page
+        .locator('.p-popover')
+        .filter({ hasText: 'Default' })
+      await expect(popover).toBeVisible()
+      await expect(popover).toContainText('Box')
+      await expect(popover).toContainText('Card')
+
+      const popoverBox = await popover.boundingBox()
+      expect(popoverBox).not.toBeNull()
+      expect(popoverBox!.width).toBeGreaterThan(0)
+      expect(popoverBox!.height).toBeGreaterThan(0)
+    }
+
+    test('Shape popover opens when the menu fits in the viewport', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.setViewportSize({ width: 1280, height: 900 })
+      const menu = await openMoreOptionsMenu(comfyPage, 'KSampler')
+      const rootList = menu.locator(':scope > ul')
+
+      await expect
+        .poll(() => rootList.evaluate((el) => getComputedStyle(el).overflowY))
+        .toBe('visible')
+
+      await menu.getByRole('menuitem', { name: 'Shape' }).click()
+      await expectShapePopoverVisible(comfyPage)
+    })
+
+    test('Shape popover opens even when the menu must scroll', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.setViewportSize({ width: 1280, height: 520 })
+      const menu = await openMoreOptionsMenu(comfyPage, 'KSampler')
+      const rootList = menu.locator(':scope > ul')
+
+      await expect
+        .poll(() =>
+          rootList.evaluate((el) => el.scrollHeight > el.clientHeight)
+        )
+        .toBe(true)
+
+      const shapeItem = menu.getByRole('menuitem', { name: 'Shape' })
+      await shapeItem.scrollIntoViewIfNeeded()
+      await shapeItem.click()
+      await expectShapePopoverVisible(comfyPage)
+    })
+  }
+)

browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts

@@ -369,6 +369,62 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
       await cleanupFakeModel(comfyPage)
     })
 
+    test(
+      'Resolving a promoted missing model widget through the legacy canvas path clears its error',
+      { tag: ['@canvas', '@widget', '@subgraph'] },
+      async ({ comfyPage }) => {
+        const resolvedModelName = 'v1-5-pruned-emaonly-fp16.safetensors'
+
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+        await loadWorkflowAndOpenErrorsTab(
+          comfyPage,
+          'missing/missing_model_promoted_widget'
+        )
+
+        const missingModelGroup = comfyPage.page.getByTestId(
+          TestIds.dialogs.missingModelsGroup
+        )
+        await expect(missingModelGroup).toContainText(
+          /fake_model\.safetensors\s*\(1\)/
+        )
+
+        await comfyPage.page.evaluate((value) => {
+          const hostNode = window.app!.graph!.getNodeById(2)
+          if (!hostNode?.isSubgraphNode()) {
+            throw new Error('Expected subgraph host node')
+          }
+
+          const interiorNode = hostNode.subgraph.getNodeById(1)
+          const widget = interiorNode?.widgets?.find(
+            (entry) => entry.name === 'ckpt_name'
+          )
+          type SettableWidget = typeof widget & {
+            setValue?: (
+              value: string,
+              options: {
+                e: PointerEvent
+                node: unknown
+                canvas: unknown
+              }
+            ) => void
+          }
+          const settableWidget = widget as SettableWidget | undefined
+
+          if (!settableWidget?.setValue) {
+            throw new Error('Expected concrete ckpt_name widget')
+          }
+
+          settableWidget.setValue(value, {
+            e: new PointerEvent('pointerup'),
+            node: hostNode,
+            canvas: window.app!.canvas
+          })
+        }, resolvedModelName)
+
+        await expect(missingModelGroup).toBeHidden()
+      }
+    )
+
     test('Bypassing a subgraph hides interior errors, un-bypassing restores them', async ({
       comfyPage
     }) => {

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -54,14 +54,44 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       .toBe(initialCount - 1)
   })
 
-  test('info button opens properties panel', async ({ comfyPage }) => {
+  test('info button opens the right-side info tab in new menu mode', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', true)
+    await comfyPage.settings.setSetting('Comfy.RightSidePanel.IsOpen', false)
+
     const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
     await selectNodeWithPan(comfyPage, nodeRef)
+    await expect(comfyPage.menu.propertiesPanel.root).toBeHidden()
 
     const infoButton = comfyPage.page.getByTestId('info-button')
     await expect(infoButton).toBeVisible()
     await infoButton.click()
-    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+
+    const panel = comfyPage.menu.propertiesPanel.root
+    await expect(panel).toBeVisible()
+    await expect(panel.getByTestId('panel-tab-info')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    )
+    await expect(panel).toContainText('KSampler')
+    await expect(comfyPage.menu.nodeLibraryTab.selectedTabButton).toBeHidden()
+  })
+
+  test('info button is hidden when the new menu is disabled', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    await expect(comfyPage.selectionToolbox).toBeVisible()
+    await expect(
+      comfyPage.selectionToolbox.getByTestId('info-button')
+    ).toBeHidden()
   })
 
   test('convert-to-subgraph button visible with multi-select', async ({

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -2,6 +2,7 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { openMoreOptionsMenu } from '@e2e/fixtures/utils/selectionToolboxMoreOptions'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -18,70 +19,19 @@ test.describe(
       await comfyPage.nextFrame()
     })
 
-    const openMoreOptions = async (comfyPage: ComfyPage) => {
-      const ksamplerNodes =
-        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
-      if (ksamplerNodes.length === 0) {
-        throw new Error('No KSampler nodes found')
-      }
+    const openMoreOptions = (comfyPage: ComfyPage) =>
+      openMoreOptionsMenu(comfyPage, 'KSampler')
 
-      // Drag the KSampler to the center of the screen
-      const nodePos = await ksamplerNodes[0].getPosition()
-      const viewportSize = comfyPage.page.viewportSize()
-      if (!viewportSize) {
-        throw new Error(
-          'Viewport size is null - page may not be properly initialized'
-        )
-      }
-      const centerX = viewportSize.width / 3
-      const centerY = viewportSize.height / 2
-      await comfyPage.canvasOps.dragAndDrop(
-        { x: nodePos.x, y: nodePos.y },
-        { x: centerX, y: centerY }
-      )
-      await comfyPage.nextFrame()
+    test('hides Node Info from More Options menu when the new menu is disabled', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
 
-      await ksamplerNodes[0].click('title')
-
-      await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible()
-
-      const moreOptionsBtn = comfyPage.page.getByTestId('more-options-button')
-      await expect(moreOptionsBtn).toBeVisible()
-
-      await moreOptionsBtn.click()
-
-      await comfyPage.nextFrame()
-
-      const menuOptionsVisible = await comfyPage.page
-        .getByText('Rename')
-        .isVisible({ timeout: 2000 })
-        .catch(() => false)
-      if (menuOptionsVisible) {
-        return
-      }
-
-      await moreOptionsBtn.click()
-      await comfyPage.nextFrame()
-
-      const menuOptionsVisibleAfterClick = await comfyPage.page
-        .getByText('Rename')
-        .isVisible({ timeout: 2000 })
-        .catch(() => false)
-      if (menuOptionsVisibleAfterClick) {
-        return
-      }
-
-      throw new Error('Could not open More Options menu - popover not showing')
-    }
-
-    test('opens Node Info from More Options menu', async ({ comfyPage }) => {
       await openMoreOptions(comfyPage)
-      const nodeInfoButton = comfyPage.page.getByText('Node Info', {
-        exact: true
+      const nodeInfoButton = comfyPage.page.getByRole('menuitem', {
+        name: 'Node Info'
       })
-      await expect(nodeInfoButton).toBeVisible()
-      await nodeInfoButton.click()
-      await comfyPage.nextFrame()
+      await expect(nodeInfoButton).toBeHidden()
     })
 
     test('changes node shape via Shape submenu', async ({ comfyPage }) => {
@@ -90,11 +40,14 @@ test.describe(
       )[0]
 
       await openMoreOptions(comfyPage)
-      await comfyPage.page.getByText('Shape', { exact: true }).hover()
-      await expect(
-        comfyPage.page.getByText('Box', { exact: true })
-      ).toBeVisible()
-      await comfyPage.page.getByText('Box', { exact: true }).click()
+      // Shape now opens via body-appended popover (FE-570); a hover no
+      // longer reveals the submenu — match the Color flow and click.
+      await comfyPage.page.getByText('Shape', { exact: true }).click()
+      const shapePopover = comfyPage.page
+        .locator('.p-popover')
+        .filter({ hasText: 'Default' })
+      await expect(shapePopover.getByText('Box', { exact: true })).toBeVisible()
+      await shapePopover.getByText('Box', { exact: true }).click()
       await comfyPage.nextFrame()
 
       await expect.poll(() => nodeRef.getProperty<number>('shape')).toBe(1)

browser_tests/tests/sharedWorkflowMissingMedia.spec.ts

@@ -0,0 +1,145 @@
+import { expect, mergeTests } from '@playwright/test'
+
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import {
+  sharedWorkflowImportFixture,
+  sharedWorkflowImportScenario
+} from '@e2e/fixtures/sharedWorkflowImportFixture'
+import type { SharedWorkflowImportMocks } from '@e2e/fixtures/sharedWorkflowImportFixture'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+import type { WorkspaceStore } from '@e2e/types/globals'
+
+const IMPORT_ORDER_TIMEOUT_MS = 5_000
+
+async function expectImportPrecedesPublicInclusiveInputAssetScan(
+  mocks: SharedWorkflowImportMocks
+): Promise<void> {
+  await expect(async () => {
+    const events = mocks.getRequestEvents()
+    const importIndex = events.indexOf('import')
+    const afterImportIndex = events.indexOf(
+      'input-assets-including-public-after-import'
+    )
+
+    expect(
+      events,
+      'public-inclusive input assets must not be scanned before import'
+    ).not.toContain('input-assets-including-public-before-import')
+    expect(importIndex, `events: ${events.join(',')}`).toBeGreaterThanOrEqual(0)
+    expect(afterImportIndex, `events: ${events.join(',')}`).toBeGreaterThan(
+      importIndex
+    )
+  }).toPass({ timeout: IMPORT_ORDER_TIMEOUT_MS })
+}
+
+async function getCachedMissingMediaWarningNames(
+  comfyPage: ComfyPage
+): Promise<string[] | null> {
+  return await comfyPage.page.evaluate(() => {
+    const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
+      .activeWorkflow
+    if (!workflow) return null
+
+    return (
+      workflow.pendingWarnings?.missingMediaCandidates?.map(
+        (candidate) => candidate.name
+      ) ?? []
+    )
+  })
+}
+
+async function expectNoMissingMediaAfterPublicInclusiveAssetScan(
+  comfyPage: ComfyPage,
+  mocks: SharedWorkflowImportMocks
+): Promise<void> {
+  await mocks.waitForPublicInclusiveInputAssetResponseAfterImport()
+  await comfyPage.nextFrame()
+
+  await expect(
+    comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  ).toBeHidden()
+  await expect
+    .poll(() => getCachedMissingMediaWarningNames(comfyPage))
+    .toEqual([])
+}
+
+async function openPanelAndExpectNoMissingMedia(
+  comfyPage: ComfyPage
+): Promise<void> {
+  const page = comfyPage.page
+  const errorOverlay = page.getByTestId(TestIds.dialogs.errorOverlay)
+  await expect(errorOverlay).toBeHidden()
+
+  const panel = new PropertiesPanelHelper(page)
+  await panel.open(comfyPage.actionbar.propertiesButton)
+  await expect(
+    panel.root.getByTestId(TestIds.propertiesPanel.errorsTab)
+  ).toBeHidden()
+  await expect(page.getByTestId(TestIds.dialogs.missingMediaGroup)).toHaveCount(
+    0
+  )
+}
+
+const test = mergeTests(comfyPageFixture, sharedWorkflowImportFixture)
+
+test.describe('Shared workflow missing media', { tag: '@cloud' }, () => {
+  test.beforeEach(async ({ comfyPage, sharedWorkflowImportMocks }) => {
+    sharedWorkflowImportMocks.resetAndStartRecording()
+    // Missing media only surfaces the overlay when the Errors tab is enabled
+    // (src/stores/executionErrorStore.ts).
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+    await comfyPage.setup({
+      clearStorage: false,
+      url: `/?share=${sharedWorkflowImportScenario.shareId}`
+    })
+  })
+
+  test('imports shared media before loading workflow so missing media is not surfaced', async ({
+    comfyPage,
+    sharedWorkflowImportMocks
+  }) => {
+    const { page } = comfyPage
+
+    const dialog = page.getByTestId(TestIds.dialogs.openSharedWorkflow)
+    await expect(
+      dialog.getByTestId(TestIds.dialogs.openSharedWorkflowTitle)
+    ).toBeVisible()
+
+    await dialog.getByTestId(TestIds.dialogs.openSharedWorkflowConfirm).click()
+
+    await expect
+      .poll(() =>
+        page.evaluate(() =>
+          window.app!.graph.nodes.map((node) => ({
+            type: node.type,
+            value: node.widgets?.[0]?.value
+          }))
+        )
+      )
+      .toEqual([
+        {
+          type: 'LoadImage',
+          value: sharedWorkflowImportScenario.inputFileName
+        }
+      ])
+    await expectImportPrecedesPublicInclusiveInputAssetScan(
+      sharedWorkflowImportMocks
+    )
+    await expectNoMissingMediaAfterPublicInclusiveAssetScan(
+      comfyPage,
+      sharedWorkflowImportMocks
+    )
+
+    expect(sharedWorkflowImportMocks.getImportBody()).toEqual({
+      published_asset_ids: [sharedWorkflowImportScenario.publishedAssetId],
+      share_id: sharedWorkflowImportScenario.shareId
+    })
+    expect(new URL(page.url()).searchParams.has('share')).toBe(false)
+    await openPanelAndExpectNoMissingMedia(comfyPage)
+  })
+})

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

@@ -120,4 +120,13 @@ test.describe('Node library sidebar V2', () => {
     await expect(options.first()).toBeVisible()
     await expect.poll(() => options.count()).toBeGreaterThanOrEqual(2)
   })
+
+  test('Blueprint previews include description', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+    await tab.blueprintsTab.click()
+
+    await tab.getNode('test blueprint').hover()
+    await expect(tab.nodePreview, 'Preview displays on hover').toBeVisible()
+    await expect(tab.nodePreview).toContainText('Inverts the image')
+  })
 })

browser_tests/tests/templates.spec.ts

@@ -106,6 +106,49 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await expect(comfyPage.templates.content).toBeVisible()
   })
 
+  test('dialog should not be shown when first-time user opens a shared workflow link', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.route(
+      '**/workflows/published/test-share-id',
+      async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            share_id: 'test-share-id',
+            workflow_id: 'wf-1',
+            name: 'Shared Workflow',
+            listed: true,
+            publish_time: new Date().toISOString(),
+            workflow_json: {
+              version: 0.4,
+              nodes: [],
+              links: [],
+              groups: [],
+              config: {},
+              extra: {}
+            },
+            assets: []
+          })
+        })
+      }
+    )
+
+    await comfyPage.settings.setSetting('Comfy.TutorialCompleted', false)
+
+    await comfyPage.setup({
+      clearStorage: true,
+      url: '/?share=test-share-id'
+    })
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.openSharedWorkflowTitle)
+    ).toBeVisible()
+
+    await expect(comfyPage.templates.content).toBeHidden()
+  })
+
   test('Uses proper locale files for templates', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Locale', 'fr')
 
@@ -131,48 +174,51 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
   test('Falls back to English templates when locale file not found', async ({
     comfyPage
   }) => {
-    // Set locale to a language that doesn't have a template file
-    await comfyPage.settings.setSetting('Comfy.Locale', 'de') // German - no index.de.json exists
+    // Pick a shipped LTR locale and simulate its template index returning 404.
+    // (Previously this test used 'de', but unsupported locales are now
+    // clamped to 'en' at boot so they never hit the template fallback path.
+    // 'fa' would also work but flips document.dir to rtl, which can leak
+    // into adjacent specs in the same worker.)
+    const locale = 'tr'
 
-    // Wait for the German request (expected to 404)
-    const germanRequestPromise = comfyPage.page.waitForRequest(
-      '**/templates/index.de.json'
+    await comfyPage.page.route(
+      `**/templates/index.${locale}.json`,
+      async (route) => {
+        await route.fulfill({
+          status: 404,
+          headers: { 'Content-Type': 'text/plain' },
+          body: 'Not Found'
+        })
+      }
     )
 
-    // Wait for the fallback English request
-    const englishRequestPromise = comfyPage.page.waitForRequest(
-      '**/templates/index.json'
-    )
-
-    // Intercept the German file to simulate a 404
-    await comfyPage.page.route('**/templates/index.de.json', async (route) => {
-      await route.fulfill({
-        status: 404,
-        headers: { 'Content-Type': 'text/plain' },
-        body: 'Not Found'
-      })
-    })
-
-    // Allow the English index to load normally
     await comfyPage.page.route('**/templates/index.json', (route) =>
       route.continue()
     )
 
-    // Load the templates dialog
+    await comfyPage.settings.setSetting('Comfy.Locale', locale)
+
+    const localeRequestPromise = comfyPage.page.waitForRequest(
+      `**/templates/index.${locale}.json`
+    )
+    const englishRequestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.json'
+    )
+
     await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
 
-    // Verify German was requested first, then English as fallback
-    const germanRequest = await germanRequestPromise
+    const localeRequest = await localeRequestPromise
     const englishRequest = await englishRequestPromise
 
-    expect(germanRequest.url()).toContain('templates/index.de.json')
+    expect(localeRequest.url()).toContain(`templates/index.${locale}.json`)
     expect(englishRequest.url()).toContain('templates/index.json')
 
-    // Verify English titles are shown as fallback
-    await expect(
-      comfyPage.page.getByRole('main').getByText('All Templates')
-    ).toBeVisible()
+    // Assert on rendered content, not just the container — the container
+    // testid is present even when the dialog body is empty, which would let
+    // a regression where the fallback fetch succeeds but no cards render
+    // pass silently.
+    await expect(comfyPage.templates.allTemplateCards.first()).toBeVisible()
   })
 
   test('template cards are dynamically sized and responsive', async ({

browser_tests/tests/topbar/workflowTabs.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
@@ -188,4 +189,79 @@ test.describe('Workflow tabs', () => {
     await topbar.closeWorkflowTab('Unsaved Workflow (2)')
     await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
   })
+
+  test.describe('Closing a modified workflow tab (FE-419)', () => {
+    async function modifyActiveWorkflow(page: Page, activeTab: Locator) {
+      await page.evaluate(() => {
+        const graph = window.app?.graph
+        const node = window.LiteGraph?.createNode('Note')
+        if (graph && node) graph.add(node)
+      })
+      await expect(
+        activeTab.getByTestId('workflow-dirty-indicator')
+      ).toHaveCount(1)
+    }
+
+    test('shows "Close anyway" label and no Cancel button on dirtyClose dialog', async ({
+      comfyPage
+    }) => {
+      const topbar = comfyPage.menu.topbar
+
+      await topbar.newWorkflowButton.click()
+      await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+
+      await modifyActiveWorkflow(comfyPage.page, topbar.getActiveTab())
+      await topbar.closeWorkflowTab('Unsaved Workflow (2)')
+
+      const dialog = comfyPage.page.getByRole('dialog')
+      await expect(dialog).toBeVisible()
+      await expect(
+        dialog.getByRole('button', { name: 'Close anyway' })
+      ).toBeVisible()
+      await expect(dialog.getByRole('button', { name: 'Save' })).toBeVisible()
+      await expect(dialog.getByRole('button', { name: 'Cancel' })).toHaveCount(
+        0
+      )
+    })
+
+    test('clicking "Close anyway" closes the tab without saving', async ({
+      comfyPage
+    }) => {
+      const topbar = comfyPage.menu.topbar
+
+      await topbar.newWorkflowButton.click()
+      await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+
+      await modifyActiveWorkflow(comfyPage.page, topbar.getActiveTab())
+      await topbar.closeWorkflowTab('Unsaved Workflow (2)')
+
+      await comfyPage.page
+        .getByRole('dialog')
+        .getByRole('button', { name: 'Close anyway' })
+        .click()
+
+      await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
+      await expect
+        .poll(() => topbar.getActiveTabName())
+        .toContain('Unsaved Workflow')
+    })
+
+    test('dismissing the dialog keeps the modified tab open', async ({
+      comfyPage
+    }) => {
+      const topbar = comfyPage.menu.topbar
+
+      await topbar.newWorkflowButton.click()
+      await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+
+      await modifyActiveWorkflow(comfyPage.page, topbar.getActiveTab())
+      await topbar.closeWorkflowTab('Unsaved Workflow (2)')
+
+      await expect(comfyPage.page.getByRole('dialog')).toBeVisible()
+      await comfyPage.page.keyboard.press('Escape')
+      await expect(comfyPage.page.getByRole('dialog')).toBeHidden()
+
+      await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
+    })
+  })
 })

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

@@ -75,6 +75,24 @@ test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
       await expect(renamedNode).toBeVisible()
     })
 
+    test('should open node info in the right side panel via context menu', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.RightSidePanel.IsOpen', false)
+      await expect(comfyPage.menu.propertiesPanel.root).toBeHidden()
+
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Node Info')
+
+      const panel = comfyPage.menu.propertiesPanel.root
+      await expect(panel).toBeVisible()
+      await expect(panel.getByTestId('panel-tab-info')).toHaveAttribute(
+        'aria-selected',
+        'true'
+      )
+      await expect(comfyPage.menu.nodeLibraryTab.selectedTabButton).toBeHidden()
+    })
+
     test('should copy and paste node via context menu', async ({
       comfyPage
     }) => {

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

@@ -1,3 +1,5 @@
+import type { Locator } from '@playwright/test'
+
 import {
   comfyExpect as expect,
   comfyPageFixture as test
@@ -39,6 +41,48 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     expect(Math.abs(a.y - b.y)).toBeLessThanOrEqual(tol)
   }
 
+  const dragFromTabButton = async (comfyPage: ComfyPage, button: Locator) => {
+    const box = await button.boundingBox()
+    if (!box) throw new Error('Tab button has no bounding box')
+    const start = {
+      x: box.x + box.width / 2,
+      y: box.y + box.height * 0.75
+    }
+    await comfyPage.canvasOps.dragAndDrop(start, {
+      x: start.x + 120,
+      y: start.y + 80
+    })
+  }
+
+  const advancedButtonOverflowPx = 24
+  const holdPointCanvasInsetPx = 8
+
+  const getAdvancedInputsButton = (node: Locator) =>
+    node.getByTestId('advanced-inputs-button')
+
+  const moveAdvancedButtonRightEdgePastCanvas = async (
+    comfyPage: ComfyPage,
+    button: Locator,
+    overflow: number
+  ) => {
+    const box = await button.boundingBox()
+    const canvasBox = await comfyPage.canvas.boundingBox()
+    if (!box) throw new Error('Advanced button has no bounding box')
+    if (!canvasBox) throw new Error('Canvas has no bounding box')
+
+    const scale = await comfyPage.canvasOps.getScale()
+    const deltaX = canvasBox.x + canvasBox.width + overflow - box.x - box.width
+    await comfyPage.page.evaluate(
+      ({ deltaX, scale }) => {
+        const canvas = window.app!.canvas
+        canvas.ds.offset[0] += deltaX / scale
+        canvas.setDirty(true, true)
+      },
+      { deltaX, scale }
+    )
+    await comfyPage.idleFrames(2)
+  }
+
   test('should allow moving nodes by dragging', async ({ comfyPage }) => {
     const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
     await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
@@ -90,6 +134,140 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await expectPosChanged(headerPos, afterPos)
   })
 
+  test('should not toggle advanced inputs when dragging by the Advanced button', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.Node.AlwaysShowAdvancedWidgets',
+      false
+    )
+    await comfyPage.nodeOps.addNode(
+      'ModelSamplingFlux',
+      {},
+      {
+        x: 500,
+        y: 200
+      }
+    )
+    await comfyPage.vueNodes.waitForNodes()
+
+    const node = comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
+    const showButton = getAdvancedInputsButton(node)
+    const widgets = node.locator('.lg-node-widget')
+
+    await expect(showButton).toBeVisible()
+    await expect(widgets).toHaveCount(2)
+
+    const beforePos = await node.boundingBox()
+    if (!beforePos) throw new Error('Node has no bounding box')
+
+    await dragFromTabButton(comfyPage, showButton)
+
+    await expect(showButton).toBeVisible()
+    await expect(node.getByText('Hide advanced inputs')).toBeHidden()
+    await expect(widgets).toHaveCount(2)
+
+    const afterPos = await node.boundingBox()
+    if (!afterPos) throw new Error('Node missing after drag')
+    await expectPosChanged(beforePos, afterPos)
+  })
+
+  test(
+    'should not pan while holding the Advanced button without dragging',
+    { tag: ['@canvas', '@widget'] },
+    async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Node.AlwaysShowAdvancedWidgets',
+        false
+      )
+      await comfyPage.nodeOps.addNode(
+        'ModelSamplingFlux',
+        {},
+        {
+          x: 500,
+          y: 200
+        }
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      const node = comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
+      const showButton = getAdvancedInputsButton(node)
+      await expect(showButton).toBeVisible()
+
+      await moveAdvancedButtonRightEdgePastCanvas(
+        comfyPage,
+        showButton,
+        advancedButtonOverflowPx
+      )
+
+      const buttonBox = await showButton.boundingBox()
+      const canvasBox = await comfyPage.canvas.boundingBox()
+      if (!buttonBox) throw new Error('Advanced button has no bounding box')
+      if (!canvasBox) throw new Error('Canvas has no bounding box')
+
+      const canvasRight = canvasBox.x + canvasBox.width
+      const buttonRight = buttonBox.x + buttonBox.width
+      expect(
+        buttonRight,
+        'Advanced button should extend past the canvas right edge'
+      ).toBeGreaterThan(canvasRight)
+
+      const holdPoint = {
+        x: canvasRight - holdPointCanvasInsetPx,
+        y: buttonBox.y + buttonBox.height / 2
+      }
+      expect(
+        holdPoint.x,
+        'Hold point should stay inside the visible part of the Advanced button'
+      ).toBeGreaterThanOrEqual(buttonBox.x)
+      expect(
+        holdPoint.x,
+        'Hold point should stay inside the visible canvas'
+      ).toBeLessThanOrEqual(canvasRight)
+      expect(
+        holdPoint.y,
+        'Hold point should stay inside the Advanced button height'
+      ).toBeGreaterThanOrEqual(buttonBox.y)
+      expect(
+        holdPoint.y,
+        'Hold point should stay inside the Advanced button height'
+      ).toBeLessThanOrEqual(buttonBox.y + buttonBox.height)
+
+      const beforeOffset = await comfyPage.canvasOps.getOffset()
+
+      await comfyPage.page.mouse.move(holdPoint.x, holdPoint.y)
+      await comfyPage.page.mouse.down()
+      try {
+        await comfyPage.idleFrames(8)
+      } finally {
+        await comfyPage.page.mouse.up()
+      }
+
+      const afterOffset = await comfyPage.canvasOps.getOffset()
+      expect(afterOffset[0]).toBeCloseTo(beforeOffset[0], 3)
+      expect(afterOffset[1]).toBeCloseTo(beforeOffset[1], 3)
+    }
+  )
+
+  test('should not enter subgraph when dragging by the Enter Subgraph button', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+    const beforePos = await subgraphNode.getPosition()
+
+    await dragFromTabButton(
+      comfyPage,
+      comfyPage.vueNodes.getSubgraphEnterButton('2')
+    )
+
+    expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+
+    const afterPos = await subgraphNode.getPosition()
+    await expectPosChanged(beforePos, afterPos)
+  })
+
   test('should move all selected nodes together when dragging one with Meta held', async ({
     comfyPage
   }) => {

browser_tests/tests/vueNodes/nodeStates/error.spec.ts

@@ -4,6 +4,7 @@ import {
   comfyExpect as expect,
   comfyPageFixture
 } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import {
   cleanupFakeModel,
   dismissErrorOverlay,
@@ -13,7 +14,9 @@ import {
   ExecutionHelper,
   buildKSamplerError
 } from '@e2e/fixtures/helpers/ExecutionHelper'
+import type { NodeError } from '@/schemas/apiSchema'
 import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
+import { assetPath } from '@e2e/fixtures/utils/paths'
 import { webSocketFixture } from '@e2e/fixtures/ws'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
@@ -22,6 +25,61 @@ const ERROR_CLASS = /ring-destructive-background/
 const UNKNOWN_NODE_ID = '1'
 const INNER_EXECUTION_ID = '2:1'
 const KSAMPLER_MODEL_INPUT_NAME = 'model'
+const LOAD_IMAGE_INPUT_NAME = 'image'
+const LOAD_IMAGE_UPLOAD_FILE = 'test_upload_image.png'
+
+function buildLoadImageRequiredInputError(): NodeError {
+  return {
+    class_type: 'LoadImage',
+    dependent_outputs: [],
+    errors: [
+      {
+        type: 'required_input_missing',
+        message: `Required input is missing: ${LOAD_IMAGE_INPUT_NAME}`,
+        details: '',
+        extra_info: { input_name: LOAD_IMAGE_INPUT_NAME }
+      }
+    ]
+  }
+}
+
+async function surfaceLoadImageMissingInputError(
+  comfyPage: ComfyPage,
+  loadImageId: string
+): Promise<void> {
+  const exec = new ExecutionHelper(comfyPage)
+  await exec.mockValidationFailure({
+    [loadImageId]: buildLoadImageRequiredInputError()
+  })
+  await comfyPage.runButton.click()
+  await dismissErrorOverlay(comfyPage)
+}
+
+async function selectLoadImageNodeForPaste(
+  comfyPage: ComfyPage,
+  loadImageId: string
+): Promise<void> {
+  await comfyPage.page.evaluate((nodeId) => {
+    const node = window.app!.graph.getNodeById(Number(nodeId))
+    if (!node) throw new Error(`Load Image node ${nodeId} not found`)
+    window.app!.canvas.selectNode(node)
+    window.app!.canvas.current_node = node
+  }, loadImageId)
+}
+
+async function setupLoadImageErrorScenario(comfyPage: ComfyPage) {
+  await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+  const loadImageNode = (
+    await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+  )[0]
+  const loadImageId = String(loadImageNode.id)
+
+  return {
+    loadImageId,
+    innerWrapper: comfyPage.vueNodes.getNodeInnerWrapper(loadImageId),
+    imageWidget: await loadImageNode.getWidgetByName(LOAD_IMAGE_INPUT_NAME)
+  }
+}
 
 test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
   test('should display error state when node is missing (node from workflow is not installed)', async ({
@@ -191,6 +249,74 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
 
       await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
     })
+
+    test('clears error ring when user drops an image file onto Load Image', async ({
+      comfyPage
+    }) => {
+      const { loadImageId, innerWrapper, imageWidget } =
+        await setupLoadImageErrorScenario(comfyPage)
+
+      await test.step('queue with missing image input to surface the error', async () => {
+        await surfaceLoadImageMissingInputError(comfyPage, loadImageId)
+        await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+      })
+
+      await test.step('drop an image onto the Load Image node', async () => {
+        const dropPosition =
+          await comfyPage.canvasOps.getNodeCenterByTitle('Load Image')
+        if (!dropPosition) {
+          throw new Error('Load Image node center must be available for drop')
+        }
+
+        await comfyPage.dragDrop.dragAndDropFile(LOAD_IMAGE_UPLOAD_FILE, {
+          dropPosition,
+          waitForUpload: true
+        })
+        await expect
+          .poll(() => imageWidget.getValue())
+          .toContain(LOAD_IMAGE_UPLOAD_FILE)
+      })
+
+      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
+    })
+
+    test('clears error ring when user pastes an image file onto Load Image', async ({
+      comfyPage
+    }) => {
+      const { loadImageId, innerWrapper, imageWidget } =
+        await setupLoadImageErrorScenario(comfyPage)
+
+      await test.step('queue with missing image input to surface the error', async () => {
+        await surfaceLoadImageMissingInputError(comfyPage, loadImageId)
+        await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+      })
+
+      await test.step('paste an image while Load Image is selected', async () => {
+        await comfyPage.canvas.focus()
+        await selectLoadImageNodeForPaste(comfyPage, loadImageId)
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate(() => window.app!.canvas.current_node?.type)
+          )
+          .toBe('LoadImage')
+
+        const uploadResponse = comfyPage.page.waitForResponse(
+          (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+          { timeout: 10_000 }
+        )
+        // File clipboard contents cannot be seeded reliably in Playwright;
+        // use the direct document paste mode to exercise usePaste.
+        await comfyPage.clipboard.pasteFile(assetPath(LOAD_IMAGE_UPLOAD_FILE), {
+          mode: 'direct'
+        })
+        await uploadResponse
+        await expect
+          .poll(() => imageWidget.getValue())
+          .toContain(LOAD_IMAGE_UPLOAD_FILE)
+      })
+
+      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
+    })
   })
 
   test.describe('subgraph propagation', { tag: '@subgraph' }, () => {

browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts

@@ -12,19 +12,22 @@ test.describe('Vue Widget Reactivity', { tag: '@vue-nodes' }, () => {
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.widgets!.push(node.widgets![0])
+      node.widgets!.push({ ...node.widgets![0], name: 'added_widget_1' })
     })
     await expect(loadCheckpointNode).toHaveCount(2)
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.widgets![2] = node.widgets![0]
+      node.widgets![2] = { ...node.widgets![0], name: 'added_widget_2' }
     })
     await expect(loadCheckpointNode).toHaveCount(3)
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.widgets!.splice(0, 0, node.widgets![0])
+      node.widgets!.splice(0, 0, {
+        ...node.widgets![0],
+        name: 'added_widget_3'
+      })
     })
     await expect(loadCheckpointNode).toHaveCount(4)
   })

global.d.ts

@@ -11,6 +11,18 @@ interface ImpactQueueFunction {
   a?: unknown[][]
 }
 
+interface RewardfulGlobal {
+  referral?: string
+  affiliate?: { id?: string; token?: string; name?: string }
+  campaign?: { id?: string; name?: string }
+}
+
+interface RewardfulQueueFunction {
+  (method: 'ready', callback: () => void): void
+  (...args: unknown[]): void
+  q?: unknown[][]
+}
+
 type GtagGetFieldName = 'client_id' | 'session_id' | 'session_number'
 
 interface GtagGetFieldValueMap {
@@ -63,6 +75,8 @@ interface Window {
   gtag?: GtagFunction
   ire_o?: string
   ire?: ImpactQueueFunction
+  rewardful?: RewardfulQueueFunction
+  Rewardful?: RewardfulGlobal
 }
 
 interface Navigator {

index.html

@@ -26,6 +26,10 @@
         width: 100%;
         height: 100%;
         margin: 0;
+        /* Disable trackpad two-finger horizontal swipe back/forward navigation
+           and other overscroll gestures. ComfyUI is a full-screen editor; the
+           browser's overscroll behaviors only ever leave or break the workflow. */
+        overscroll-behavior: none;
       }
       body {
         display: grid;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.44.18",
+  "version": "1.44.20",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

packages/ingest-types/src/types.gen.ts

@@ -524,9 +524,18 @@ export type ImportPublishedAssetsRequest = {
    */
   published_asset_ids: Array<string>
   /**
-   * The share ID of the published workflow these assets belong to. Required for authorization.
+   * Optional. Share ID of the published workflow these assets belong to.
+   * When provided (non-null, non-empty): all published_asset_ids must
+   * belong to this share's workflow version; returns
+   * 400/CodeInvalidAssets if the share is not found or any asset does
+   * not belong to it.
+   * When omitted, null, or empty string: no share-scoped validation is
+   * performed and the assets are validated only against global rules
+   * (legacy behaviour, preserved for clients that have not yet adopted
+   * share_id).
+   *
    */
-  share_id: string
+  share_id?: string | null
 }
 
 /**

packages/ingest-types/src/zod.gen.ts

@@ -310,8 +310,8 @@ export const zImportPublishedAssetsResponse = z.object({
  * Request body for importing assets from a published workflow.
  */
 export const zImportPublishedAssetsRequest = z.object({
-  published_asset_ids: z.array(z.string().min(1).max(64)).max(1000),
-  share_id: z.string().min(1).max(64)
+  published_asset_ids: z.array(z.string()),
+  share_id: z.string().nullish()
 })
 
 /**

packages/shared-frontend-utils/package.json

@@ -7,7 +7,8 @@
   "type": "module",
   "exports": {
     "./formatUtil": "./src/formatUtil.ts",
-    "./networkUtil": "./src/networkUtil.ts"
+    "./networkUtil": "./src/networkUtil.ts",
+    "./piiUtil": "./src/piiUtil.ts"
   },
   "scripts": {
     "typecheck": "tsc --noEmit"

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

@@ -3,12 +3,14 @@ import { describe, expect, it } from 'vitest'
 import {
   appendWorkflowJsonExt,
   ensureWorkflowSuffix,
+  getFilePathSeparatorVariants,
   getFilenameDetails,
   getMediaTypeFromFilename,
   getPathDetails,
   highlightQuery,
   isCivitaiModelUrl,
   isPreviewableMediaType,
+  joinFilePath,
   truncateFilename
 } from './formatUtil'
 
@@ -299,6 +301,42 @@ describe('formatUtil', () => {
     })
   })
 
+  describe('joinFilePath', () => {
+    it('joins subfolder and filename with normalized slash separators', () => {
+      expect(joinFilePath('nested\\folder', 'child\\file.png')).toBe(
+        'nested/folder/child/file.png'
+      )
+    })
+
+    it('trims boundary separators without changing the filename body', () => {
+      expect(joinFilePath('/nested/folder/', '/file.png')).toBe(
+        'nested/folder/file.png'
+      )
+    })
+
+    it('returns the normalized filename when no subfolder is provided', () => {
+      expect(joinFilePath('', 'nested\\file.png')).toBe('nested/file.png')
+    })
+
+    it('returns the normalized subfolder without a trailing slash when no filename is provided', () => {
+      expect(joinFilePath('nested\\folder', '')).toBe('nested/folder')
+      expect(joinFilePath('nested\\folder', null)).toBe('nested/folder')
+    })
+  })
+
+  describe('getFilePathSeparatorVariants', () => {
+    it('returns slash and backslash variants for nested paths', () => {
+      expect(getFilePathSeparatorVariants('nested\\folder/file.png')).toEqual([
+        'nested/folder/file.png',
+        'nested\\folder\\file.png'
+      ])
+    })
+
+    it('returns a single value when no separator is present', () => {
+      expect(getFilePathSeparatorVariants('file.png')).toEqual(['file.png'])
+    })
+  })
+
   describe('appendWorkflowJsonExt', () => {
     it('appends .app.json when isApp is true', () => {
       expect(appendWorkflowJsonExt('test', true)).toBe('test.app.json')

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

@@ -256,6 +256,31 @@ export function isValidUrl(url: string): boolean {
   }
 }
 
+export function joinFilePath(
+  subfolder: string | null | undefined,
+  filename: string | null | undefined
+): string {
+  const normalizedSubfolder = normalizeFilePathSeparators(
+    subfolder ?? ''
+  ).replace(/^\/+|\/+$/g, '')
+  const normalizedFilename = normalizeFilePathSeparators(
+    filename ?? ''
+  ).replace(/^\/+/g, '')
+  if (!normalizedSubfolder) return normalizedFilename
+  if (!normalizedFilename) return normalizedSubfolder
+  return `${normalizedSubfolder}/${normalizedFilename}`
+}
+
+export function getFilePathSeparatorVariants(filepath: string): string[] {
+  const slashPath = normalizeFilePathSeparators(filepath)
+  const backslashPath = slashPath.replace(/\//g, '\\')
+  return slashPath === backslashPath ? [slashPath] : [slashPath, backslashPath]
+}
+
+function normalizeFilePathSeparators(filepath: string): string {
+  return filepath.replace(/[\\/]+/g, '/')
+}
+
 /**
  * Parses a filepath into its filename and subfolder components.
  *
@@ -274,8 +299,7 @@ export function parseFilePath(filepath: string): {
 } {
   if (!filepath?.trim()) return { filename: '', subfolder: '' }
 
-  const normalizedPath = filepath
-    .replace(/[\\/]+/g, '/') // Normalize path separators
+  const normalizedPath = normalizeFilePathSeparators(filepath)
     .replace(/^\//, '') // Remove leading slash
     .replace(/\/$/, '') // Remove trailing slash
 

packages/shared-frontend-utils/src/piiUtil.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+
+import { createPostHogBeforeSend } from './piiUtil'
+
+describe('createPostHogBeforeSend', () => {
+  const beforeSend = createPostHogBeforeSend()
+
+  it('returns null for null input', () => {
+    expect(beforeSend(null)).toBeNull()
+  })
+
+  it('strips all PII keys from properties, $set, and $set_once', () => {
+    const event = {
+      properties: {
+        email: 'a@example.com',
+        prompt: 'hello',
+        user_email: 'b@example.com',
+        $email: 'c@example.com',
+        method: 'google'
+      },
+      $set: {
+        email: 'd@example.com',
+        user_email: 'e@example.com',
+        $email: 'f@example.com',
+        name: 'keep me'
+      },
+      $set_once: {
+        email: 'g@example.com',
+        plan: 'free'
+      }
+    }
+
+    const result = beforeSend(event)!
+
+    expect(result.properties).not.toHaveProperty('email')
+    expect(result.properties).not.toHaveProperty('prompt')
+    expect(result.properties).not.toHaveProperty('user_email')
+    expect(result.properties).not.toHaveProperty('$email')
+    expect(result.properties).toHaveProperty('method', 'google')
+
+    expect(result.$set).not.toHaveProperty('email')
+    expect(result.$set).not.toHaveProperty('user_email')
+    expect(result.$set).not.toHaveProperty('$email')
+    expect(result.$set).toHaveProperty('name', 'keep me')
+
+    expect(result.$set_once).not.toHaveProperty('email')
+    expect(result.$set_once).toHaveProperty('plan', 'free')
+  })
+
+  it('handles missing property bags gracefully', () => {
+    const event = { properties: { email: 'a@example.com', safe: true } }
+    const result = beforeSend(event)!
+    expect(result.properties).not.toHaveProperty('email')
+    expect(result.properties).toHaveProperty('safe', true)
+    expect(result.$set).toBeUndefined()
+    expect(result.$set_once).toBeUndefined()
+  })
+})

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

@@ -0,0 +1,35 @@
+const PII_KEYS = ['email', 'prompt', 'user_email', '$email'] as const
+
+function stripPiiKeys(obj?: Record<string, unknown>): void {
+  if (!obj) return
+  for (const key of PII_KEYS) {
+    delete obj[key]
+  }
+}
+
+/**
+ * PostHog before_send hook that strips PII from all three property bags
+ * an event can carry: properties, $set, and $set_once.
+ *
+ * posthog.identify(id, { email }) lands in $set, not properties, so all
+ * three bags must be sanitized.
+ *
+ * Ref: posthog.com/tutorials/web-redact-properties
+ */
+interface PostHogEventLike {
+  properties?: Record<string, unknown>
+  $set?: Record<string, unknown>
+  $set_once?: Record<string, unknown>
+}
+
+export function createPostHogBeforeSend() {
+  return function beforeSend<E extends PostHogEventLike>(
+    event: E | null
+  ): E | null {
+    if (!event) return null
+    stripPiiKeys(event.properties)
+    stripPiiKeys(event.$set)
+    stripPiiKeys(event.$set_once)
+    return event
+  }
+}

src/base/wheelGestures.ts

@@ -0,0 +1,20 @@
+/**
+ * Wheel events whose browser default would break the editing experience.
+ * On macOS trackpads:
+ *   - `ctrl/meta + wheel` (pinch-zoom) triggers page-level zoom, which
+ *     pushes fixed-position UI (e.g. ComfyActionbar) off-screen with no
+ *     recovery short of a page reload.
+ *   - Horizontal-dominant wheel (two-finger horizontal swipe) triggers
+ *     back/forward navigation, which leaves the workflow.
+ *
+ * Equal `|deltaX| == |deltaY|` (including idle 0/0 frames between meaningful
+ * trackpad samples) intentionally falls on the false branch so native
+ * vertical scroll wins on a tie.
+ *
+ * Components that intercept wheel events should suppress the default for
+ * these gestures even when they otherwise let the browser scroll natively.
+ */
+export const isCanvasGestureWheel = (event: WheelEvent): boolean =>
+  event.ctrlKey ||
+  event.metaKey ||
+  Math.abs(event.deltaX) > Math.abs(event.deltaY)

src/components/bottomPanel/tabs/terminal/LogsTerminal.test.ts

@@ -0,0 +1,291 @@
+import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import LogsTerminal from '@/components/bottomPanel/tabs/terminal/LogsTerminal.vue'
+
+const apiMock = vi.hoisted(
+  () =>
+    new (class extends EventTarget {
+      clientId: string | null = 'test-client'
+      getRawLogs = vi.fn(async () => ({ entries: [{ m: 'log line\n' }] }))
+      subscribeLogs = vi.fn(async () => {})
+    })()
+)
+
+vi.mock('@/scripts/api', () => ({ api: apiMock }))
+
+const terminalMock = vi.hoisted(() => ({
+  open: vi.fn(),
+  dispose: vi.fn(),
+  write: vi.fn(),
+  reset: vi.fn(),
+  scrollToBottom: vi.fn(),
+  onSelectionChange: vi.fn(() => ({ dispose: vi.fn() })),
+  hasSelection: vi.fn(() => false),
+  getSelection: vi.fn(() => ''),
+  selectAll: vi.fn(),
+  clearSelection: vi.fn()
+}))
+
+vi.mock('@/composables/bottomPanelTabs/useTerminal', () => ({
+  useTerminal: vi.fn(() => ({
+    terminal: terminalMock,
+    useAutoSize: vi.fn(() => ({ resize: vi.fn() }))
+  }))
+}))
+
+vi.mock('@/components/bottomPanel/tabs/terminal/BaseTerminal.vue', async () => {
+  const { defineComponent, ref } = await import('vue')
+  const { useTerminal } =
+    await import('@/composables/bottomPanelTabs/useTerminal')
+  return {
+    default: defineComponent({
+      emits: ['created'],
+      setup(_, { emit }) {
+        const root = ref<HTMLElement | undefined>(undefined)
+        emit('created', useTerminal(root), root)
+        return () => null
+      }
+    })
+  }
+})
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      logsTerminal: {
+        loadError:
+          'Unable to load logs, please ensure you have updated your ComfyUI backend.',
+        resyncError:
+          'Unable to resync logs after the backend reconnected. Reopen the console to retry.'
+      }
+    }
+  }
+})
+
+const renderLogsTerminal = () =>
+  render(LogsTerminal, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn,
+          stubActions: false,
+          initialState: { execution: { clientId: 'test-client' } }
+        }),
+        i18n
+      ]
+    }
+  })
+
+// Silence the production console.error calls in error-path tests. Vitest
+// isolates this file's module graph so the spy does not affect other files.
+vi.spyOn(console, 'error').mockImplementation(() => {})
+
+// Resolve a getRawLogs call manually to drive deterministic timing in tests
+// that need to observe behavior mid-fetch.
+const deferredRawLogs = () => {
+  let resolve!: (value: { entries: { m: string }[] }) => void
+  let reject!: (err: unknown) => void
+  const promise = new Promise<{ entries: { m: string }[] }>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+describe('LogsTerminal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    apiMock.clientId = 'test-client'
+  })
+
+  it('loads logs and subscribes to streaming on mount', async () => {
+    renderLogsTerminal()
+
+    await vi.waitFor(() => {
+      expect(apiMock.getRawLogs).toHaveBeenCalledTimes(1)
+      expect(apiMock.subscribeLogs).toHaveBeenCalledWith(true)
+      expect(terminalMock.write).toHaveBeenCalledWith('log line\n')
+    })
+  })
+
+  it('resyncs, snaps to tail, and re-subscribes on "reconnected"', async () => {
+    renderLogsTerminal()
+
+    await vi.waitFor(() => {
+      expect(apiMock.subscribeLogs).toHaveBeenCalledWith(true)
+    })
+
+    apiMock.dispatchEvent(new CustomEvent('reconnected'))
+
+    await vi.waitFor(() => {
+      expect(apiMock.getRawLogs).toHaveBeenCalledTimes(2)
+      expect(terminalMock.reset).toHaveBeenCalledTimes(1)
+      expect(terminalMock.scrollToBottom).toHaveBeenCalledTimes(1)
+      expect(apiMock.subscribeLogs).toHaveBeenCalledTimes(2)
+      expect(apiMock.subscribeLogs).toHaveBeenLastCalledWith(true)
+    })
+
+    // The full sequence must be: reset -> write -> scroll -> subscribe
+    const resetOrder = terminalMock.reset.mock.invocationCallOrder[0]
+    const writeOrder = terminalMock.write.mock.invocationCallOrder.at(-1)!
+    const scrollOrder = terminalMock.scrollToBottom.mock.invocationCallOrder[0]
+    const subscribeOrder =
+      apiMock.subscribeLogs.mock.invocationCallOrder.at(-1)!
+    expect(resetOrder).toBeLessThan(writeOrder)
+    expect(writeOrder).toBeLessThan(scrollOrder)
+    expect(scrollOrder).toBeLessThan(subscribeOrder)
+  })
+
+  it('aborts an in-flight resync when a second "reconnected" arrives', async () => {
+    renderLogsTerminal()
+    await vi.waitFor(() => {
+      expect(apiMock.subscribeLogs).toHaveBeenCalledWith(true)
+    })
+
+    // First resync hangs on getRawLogs
+    const first = deferredRawLogs()
+    apiMock.getRawLogs.mockImplementationOnce(() => first.promise)
+    apiMock.dispatchEvent(new CustomEvent('reconnected'))
+    await vi.waitFor(() => {
+      expect(apiMock.getRawLogs).toHaveBeenCalledTimes(2)
+    })
+
+    // Second resync resolves immediately
+    apiMock.getRawLogs.mockImplementationOnce(async () => ({
+      entries: [{ m: 'fresh\n' }]
+    }))
+    apiMock.dispatchEvent(new CustomEvent('reconnected'))
+    await vi.waitFor(() => {
+      expect(terminalMock.reset).toHaveBeenCalledTimes(1)
+    })
+
+    // Now resolve the first (aborted) resync — none of its side effects must apply
+    first.resolve({ entries: [{ m: 'stale\n' }] })
+    await nextTick()
+    await nextTick()
+
+    expect(terminalMock.reset).toHaveBeenCalledTimes(1)
+    expect(terminalMock.write).not.toHaveBeenCalledWith('stale\n')
+    expect(terminalMock.write).toHaveBeenCalledWith('fresh\n')
+  })
+
+  it('aborts an in-flight mount fetch when "reconnected" arrives first', async () => {
+    // Mount's getRawLogs hangs so we can drive the race deterministically.
+    const mount = deferredRawLogs()
+    apiMock.getRawLogs.mockImplementationOnce(() => mount.promise)
+    renderLogsTerminal()
+    await vi.waitFor(() => {
+      expect(apiMock.getRawLogs).toHaveBeenCalledTimes(1)
+    })
+
+    // Resync wins the race and writes the post-reboot snapshot.
+    apiMock.getRawLogs.mockImplementationOnce(async () => ({
+      entries: [{ m: 'fresh\n' }]
+    }))
+    apiMock.dispatchEvent(new CustomEvent('reconnected'))
+    await vi.waitFor(() => {
+      expect(terminalMock.reset).toHaveBeenCalledTimes(1)
+      expect(terminalMock.write).toHaveBeenCalledWith('fresh\n')
+    })
+
+    // Mount's late response must not stomp on the freshly-reset terminal.
+    mount.resolve({ entries: [{ m: 'stale-mount\n' }] })
+    await nextTick()
+    await nextTick()
+
+    expect(terminalMock.write).not.toHaveBeenCalledWith('stale-mount\n')
+  })
+
+  it('surfaces an inline error when the resync fetch fails', async () => {
+    renderLogsTerminal()
+    await vi.waitFor(() => {
+      expect(apiMock.subscribeLogs).toHaveBeenCalledWith(true)
+    })
+
+    apiMock.getRawLogs.mockRejectedValueOnce(new Error('boom'))
+
+    apiMock.dispatchEvent(new CustomEvent('reconnected'))
+
+    await vi.waitFor(() => {
+      expect(
+        screen.getByTestId('terminal-error-message').textContent
+      ).toContain('Unable to resync logs')
+    })
+  })
+
+  it('shows a load error when the initial fetch fails', async () => {
+    apiMock.getRawLogs.mockRejectedValueOnce(new Error('boom'))
+
+    renderLogsTerminal()
+
+    await vi.waitFor(() => {
+      expect(
+        screen.getByTestId('terminal-error-message').textContent
+      ).toContain('Unable to load logs')
+    })
+  })
+
+  it('recovers from an initial load failure when a reconnect arrives', async () => {
+    apiMock.getRawLogs
+      .mockRejectedValueOnce(new Error('initial fail'))
+      .mockResolvedValueOnce({ entries: [{ m: 'recovered\n' }] })
+
+    renderLogsTerminal()
+
+    await vi.waitFor(() => {
+      expect(
+        screen.getByTestId('terminal-error-message').textContent
+      ).toContain('Unable to load logs')
+    })
+
+    apiMock.dispatchEvent(new CustomEvent('reconnected'))
+
+    await vi.waitFor(() => {
+      expect(screen.queryByTestId('terminal-error-message')).toBeNull()
+      expect(screen.queryByTestId('terminal-loading-spinner')).toBeNull()
+      expect(terminalMock.write).toHaveBeenCalledWith('recovered\n')
+    })
+  })
+
+  it('cleans up listeners and unsubscribes on unmount', async () => {
+    const { unmount } = renderLogsTerminal()
+    await vi.waitFor(() => {
+      expect(apiMock.subscribeLogs).toHaveBeenCalledWith(true)
+    })
+
+    unmount()
+    await vi.waitFor(() => {
+      expect(apiMock.subscribeLogs).toHaveBeenCalledWith(false)
+    })
+
+    apiMock.dispatchEvent(new CustomEvent('reconnected'))
+    await nextTick()
+
+    expect(terminalMock.reset).not.toHaveBeenCalled()
+    // No additional getRawLogs beyond the mount-time call
+    expect(apiMock.getRawLogs).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not write to the terminal when unmount happens mid-fetch', async () => {
+    const pending = deferredRawLogs()
+    apiMock.getRawLogs.mockImplementationOnce(() => pending.promise)
+
+    const { unmount } = renderLogsTerminal()
+    await vi.waitFor(() => {
+      expect(apiMock.getRawLogs).toHaveBeenCalledTimes(1)
+    })
+
+    unmount()
+    pending.resolve({ entries: [{ m: 'late\n' }] })
+    await nextTick()
+    await nextTick()
+
+    expect(terminalMock.write).not.toHaveBeenCalled()
+  })
+})

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -12,79 +12,36 @@
       data-testid="terminal-loading-spinner"
       class="relative inset-0 z-10 flex h-full items-center justify-center"
     />
-    <BaseTerminal v-show="!loading" @created="terminalCreated" />
+    <BaseTerminal
+      v-show="!loading && !errorMessage"
+      @created="terminalCreated"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { until } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
+import type { Terminal } from '@xterm/xterm'
 import ProgressSpinner from 'primevue/progressspinner'
 import type { Ref } from 'vue'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { shallowRef } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import type { LogEntry, LogsWsMessage } from '@/schemas/apiSchema'
-import { api } from '@/scripts/api'
-import { useExecutionStore } from '@/stores/executionStore'
+import { useLogsTerminal } from '@/composables/bottomPanelTabs/useLogsTerminal'
 
 import BaseTerminal from './BaseTerminal.vue'
 
-const errorMessage = ref('')
-const loading = ref(true)
+const terminal = shallowRef<Terminal>()
+const { errorMessage, loading } = useLogsTerminal(terminal)
 
 const terminalCreated = (
-  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
+  { terminal: instance, useAutoSize }: ReturnType<typeof useTerminal>,
   root: Ref<HTMLElement | undefined>
 ) => {
   // Auto-size terminal to fill container width.
   // minCols: 80 ensures minimum width for colab environments.
   // See https://github.com/comfyanonymous/ComfyUI/issues/6396
   useAutoSize({ root, autoRows: true, autoCols: true, minCols: 80 })
-
-  const update = (entries: Array<LogEntry>) => {
-    terminal.write(entries.map((e) => e.m).join(''))
-  }
-
-  const logReceived = (e: CustomEvent<LogsWsMessage>) => {
-    update(e.detail.entries)
-  }
-
-  const loadLogEntries = async () => {
-    const logs = await api.getRawLogs()
-    update(logs.entries)
-  }
-
-  const watchLogs = async () => {
-    const { clientId } = storeToRefs(useExecutionStore())
-    if (!clientId.value) {
-      await until(clientId).not.toBeNull()
-    }
-    await api.subscribeLogs(true)
-    api.addEventListener('logs', logReceived)
-  }
-
-  onMounted(async () => {
-    try {
-      await loadLogEntries()
-    } catch (err) {
-      console.error('Error loading logs', err)
-      // On older backends the endpoints won't exist
-      errorMessage.value =
-        'Unable to load logs, please ensure you have updated your ComfyUI backend.'
-      return
-    }
-
-    await watchLogs()
-    loading.value = false
-  })
-
-  onUnmounted(async () => {
-    if (api.clientId) {
-      await api.subscribeLogs(false)
-    }
-    api.removeEventListener('logs', logReceived)
-  })
+  terminal.value = instance
 }
 </script>
 

src/components/dialog/content/ConfirmationDialogContent.test.ts

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -42,4 +43,43 @@ describe('ConfirmationDialogContent', () => {
     renderComponent({ message: longFilename })
     expect(screen.getByText(longFilename)).toBeInTheDocument()
   })
+
+  it('omits the Cancel button when type is dirtyClose', () => {
+    renderComponent({ type: 'dirtyClose' })
+    expect(screen.queryByText('g.cancel')).not.toBeInTheDocument()
+    expect(screen.getByText('g.save')).toBeInTheDocument()
+  })
+
+  it('uses the provided denyLabel for the deny button on dirtyClose', () => {
+    renderComponent({ type: 'dirtyClose', denyLabel: 'Sign out anyway' })
+    expect(screen.getByText('Sign out anyway')).toBeInTheDocument()
+    expect(screen.queryByText('g.no')).not.toBeInTheDocument()
+  })
+
+  it('calls onConfirm(false) when deny is clicked on dirtyClose', async () => {
+    const onConfirm = vi.fn()
+    renderComponent({
+      type: 'dirtyClose',
+      denyLabel: 'Close anyway',
+      onConfirm
+    })
+
+    await userEvent.click(screen.getByRole('button', { name: 'Close anyway' }))
+
+    expect(onConfirm).toHaveBeenCalledWith(false)
+  })
+
+  it('calls onConfirm(true) when save is clicked on dirtyClose', async () => {
+    const onConfirm = vi.fn()
+    renderComponent({ type: 'dirtyClose', onConfirm })
+
+    await userEvent.click(screen.getByRole('button', { name: 'g.save' }))
+
+    expect(onConfirm).toHaveBeenCalledWith(true)
+  })
+
+  it('falls back to "no" label when denyLabel is not provided', () => {
+    renderComponent({ type: 'dirtyClose' })
+    expect(screen.getByText('g.no')).toBeInTheDocument()
+  })
 })

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -55,7 +55,7 @@
       </div>
 
       <Button
-        v-if="type !== 'info'"
+        v-if="type !== 'info' && type !== 'dirtyClose'"
         variant="secondary"
         autofocus
         @click="onCancel"
@@ -86,9 +86,9 @@
       <template v-else-if="type === 'dirtyClose'">
         <Button variant="secondary" @click="onDeny">
           <i class="pi pi-times" />
-          {{ $t('g.no') }}
+          {{ denyLabel ?? $t('g.no') }}
         </Button>
-        <Button @click="onConfirm">
+        <Button autofocus @click="onConfirm">
           <i class="pi pi-save" />
           {{ $t('g.save') }}
         </Button>
@@ -131,6 +131,7 @@ const props = defineProps<{
   onConfirm: (value?: boolean) => void
   itemList?: string[]
   hint?: string
+  denyLabel?: string
 }>()
 
 const { t } = useI18n()

src/components/graph/NodeContextMenu.vue

@@ -10,7 +10,7 @@
       <a
         v-bind="props.action"
         class="flex items-center gap-2 px-3 py-1.5"
-        @click="item.isColorSubmenu ? showColorPopover($event) : undefined"
+        @click="onItemClick($event, item)"
       >
         <i v-if="item.icon" :class="[item.icon, 'size-4']" />
         <span class="flex-1">{{ item.label }}</span>
@@ -21,20 +21,27 @@
           {{ item.shortcut }}
         </span>
         <i
-          v-if="hasSubmenu || item.isColorSubmenu"
+          v-if="hasSubmenu || item.isColorSubmenu || item.isShapeSubmenu"
           class="icon-[lucide--chevron-right] size-4 opacity-60"
         />
       </a>
     </template>
   </ContextMenu>
 
-  <!-- Color picker menu (custom with color circles) -->
-  <ColorPickerMenu
+  <SubmenuPopover
     v-if="colorOption"
-    ref="colorPickerMenu"
-    key="color-picker-menu"
+    ref="colorSubmenu"
+    key="color-submenu"
     :option="colorOption"
-    @submenu-click="handleColorSelect"
+    @submenu-click="handleSubmenuSelect"
+  />
+
+  <SubmenuPopover
+    v-if="shapeOption"
+    ref="shapeSubmenu"
+    key="shape-submenu"
+    :option="shapeOption"
+    @submenu-click="handleSubmenuSelect"
   />
 </template>
 
@@ -54,16 +61,18 @@ import type {
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
-import ColorPickerMenu from './selectionToolbox/ColorPickerMenu.vue'
+import SubmenuPopover from './selectionToolbox/SubmenuPopover.vue'
 
 interface ExtendedMenuItem extends MenuItem {
   isColorSubmenu?: boolean
+  isShapeSubmenu?: boolean
   shortcut?: string
   originalOption?: MenuOption
 }
 
 const contextMenu = ref<InstanceType<typeof ContextMenu>>()
-const colorPickerMenu = ref<InstanceType<typeof ColorPickerMenu>>()
+const colorSubmenu = ref<InstanceType<typeof SubmenuPopover>>()
+const shapeSubmenu = ref<InstanceType<typeof SubmenuPopover>>()
 const isOpen = ref(false)
 
 const { menuOptions, bump } = useMoreOptionsMenu()
@@ -150,21 +159,20 @@ useEventListener(
   { passive: true }
 )
 
-// Find color picker option
 const colorOption = computed(() =>
   menuOptions.value.find((opt) => opt.isColorPicker)
 )
 
-// Check if option is the color picker
-function isColorOption(option: MenuOption): boolean {
-  return Boolean(option.isColorPicker)
-}
+const shapeOption = computed(() =>
+  menuOptions.value.find((opt) => opt.isShapePicker)
+)
 
-// Convert MenuOption to PrimeVue MenuItem
 function convertToMenuItem(option: MenuOption): ExtendedMenuItem {
   if (option.type === 'divider') return { separator: true }
 
-  const isColor = isColorOption(option)
+  const isColor = Boolean(option.isColorPicker)
+  const isShape = Boolean(option.isShapePicker)
+  const usesPopover = isColor || isShape
 
   const item: ExtendedMenuItem = {
     label: option.label,
@@ -172,11 +180,14 @@ function convertToMenuItem(option: MenuOption): ExtendedMenuItem {
     disabled: option.disabled,
     shortcut: option.shortcut,
     isColorSubmenu: isColor,
+    isShapeSubmenu: isShape,
     originalOption: option
   }
 
-  // Native submenus for non-color options
-  if (option.hasSubmenu && option.submenu && !isColor) {
+  // Submenus opened via popover (color, shape) deliberately omit `items` so
+  // PrimeVue does not render a nested <ul> inside the scrollable root list,
+  // which would be clipped when the menu overflows the viewport (FE-570).
+  if (option.hasSubmenu && option.submenu && !usesPopover) {
     item.items = option.submenu.map((sub) => ({
       label: sub.label,
       icon: sub.icon,
@@ -188,7 +199,6 @@ function convertToMenuItem(option: MenuOption): ExtendedMenuItem {
     }))
   }
 
-  // Regular action items
   if (!option.hasSubmenu && option.action) {
     item.command = () => {
       option.action?.()
@@ -245,17 +255,30 @@ function toggle(event: Event) {
 
 defineExpose({ toggle, hide, isOpen, show })
 
-function showColorPopover(event: MouseEvent) {
-  event.stopPropagation()
-  event.preventDefault()
-  const target = Array.from((event.currentTarget as HTMLElement).children).find(
-    (el) => el.classList.contains('icon-[lucide--chevron-right]')
-  ) as HTMLElement
-  colorPickerMenu.value?.toggle(event, target)
+function onItemClick(event: MouseEvent, item: ExtendedMenuItem) {
+  if (item.isColorSubmenu) {
+    openSubmenuPopover(event, colorSubmenu.value, shapeSubmenu.value)
+  } else if (item.isShapeSubmenu) {
+    openSubmenuPopover(event, shapeSubmenu.value, colorSubmenu.value)
+  }
 }
 
-// Handle color selection
-function handleColorSelect(subOption: SubMenuOption) {
+function openSubmenuPopover(
+  event: MouseEvent,
+  target: InstanceType<typeof SubmenuPopover> | undefined,
+  other: InstanceType<typeof SubmenuPopover> | undefined
+) {
+  if (!target) return
+  event.stopPropagation()
+  event.preventDefault()
+  other?.hide()
+  const anchor = Array.from((event.currentTarget as HTMLElement).children).find(
+    (el) => el.classList.contains('icon-[lucide--chevron-right]')
+  ) as HTMLElement
+  target.toggle(event, anchor)
+}
+
+function handleSubmenuSelect(subOption: SubMenuOption) {
   subOption.action()
   hide()
 }
@@ -270,11 +293,17 @@ function constrainMenuHeight() {
   if (!rootList) return
 
   const rect = rootList.getBoundingClientRect()
-  const maxHeight = window.innerHeight - rect.top - 8
-  if (maxHeight > 0) {
-    rootList.style.maxHeight = `${maxHeight}px`
-    rootList.style.overflowY = 'auto'
-  }
+  const availableHeight = window.innerHeight - rect.top - 8
+  if (availableHeight <= 0) return
+
+  // Setting overflow-y to auto/scroll on the root <ul> coerces overflow-x
+  // to a non-visible value too (CSS spec), which clips horizontally-opening
+  // submenus like Shape. Only apply the constraint when content truly
+  // overflows so the common case keeps overflow visible.
+  if (rootList.scrollHeight <= availableHeight) return
+
+  rootList.style.maxHeight = `${availableHeight}px`
+  rootList.style.overflowY = 'auto'
 }
 
 function onMenuShow() {

src/components/graph/NodeTooltip.test.ts

@@ -0,0 +1,222 @@
+import { cleanup, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { nextTick } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { i18n, te } from '@/i18n'
+import type * as LiteGraphModule from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { Settings } from '@/schemas/apiSchema'
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+import NodeTooltip from './NodeTooltip.vue'
+
+type HitTest = (
+  node: MockNode,
+  x: number,
+  y: number,
+  offset: [number, number]
+) => number
+
+interface MockWidget {
+  name: string
+  tooltip?: string
+}
+
+interface MockNode {
+  type: string
+  flags: {
+    collapsed?: boolean
+    ghost?: boolean
+  }
+  pos: [number, number]
+  inputs: Array<{ name: string }>
+  constructor: {
+    title_mode?: 0 | 1 | 2 | 3
+  }
+}
+
+interface MockCanvas {
+  mouse: [number, number]
+  graph_mouse: [number, number]
+  node_over: MockNode | null
+  getWidgetAtCursor: () => MockWidget | null
+}
+
+const mockIsOverNodeInput = vi.hoisted(() => vi.fn<HitTest>())
+const mockIsOverNodeOutput = vi.hoisted(() => vi.fn<HitTest>())
+const mockIsDOMWidget = vi.hoisted(() =>
+  vi.fn<(widget: MockWidget) => boolean>()
+)
+const mockCanvas = vi.hoisted(
+  (): MockCanvas => ({
+    mouse: [100, 80],
+    graph_mouse: [10, 10],
+    node_over: null,
+    getWidgetAtCursor: vi.fn<() => MockWidget | null>()
+  })
+)
+
+vi.mock('@/lib/litegraph/src/litegraph', async (importOriginal) => {
+  const actual = await importOriginal<typeof LiteGraphModule>()
+  return {
+    ...actual,
+    isOverNodeInput: mockIsOverNodeInput,
+    isOverNodeOutput: mockIsOverNodeOutput
+  }
+})
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: mockCanvas
+  }
+}))
+
+vi.mock('@/scripts/domWidget', () => ({
+  isDOMWidget: mockIsDOMWidget
+}))
+
+const jsonTooltip =
+  'Positive point prompts as JSON [{"x": int, "y": int}, ...] (pixel coords)'
+
+const positiveCoordsTooltipKey =
+  'nodeDefs.SAM3_Detect.inputs.positive_coords.tooltip'
+
+const outputTooltipKey = 'nodeDefs.SAM3_Detect.outputs.0.tooltip'
+
+const sam3DetectNodeDef: ComfyNodeDef = {
+  name: 'SAM3_Detect',
+  display_name: 'SAM3 Detect',
+  category: 'detection/',
+  python_module: 'comfy_extras.nodes_sam3',
+  description: '',
+  input: {
+    required: {},
+    optional: {
+      positive_coords: [
+        'STRING',
+        {
+          tooltip: jsonTooltip,
+          forceInput: true
+        }
+      ]
+    }
+  },
+  output: ['MASK'],
+  output_name: ['masks'],
+  output_tooltips: [jsonTooltip],
+  output_node: false,
+  deprecated: false,
+  experimental: false
+}
+
+function createSam3Node(): MockNode {
+  return {
+    type: 'SAM3_Detect',
+    flags: {},
+    pos: [0, 0],
+    inputs: [{ name: 'positive_coords' }],
+    constructor: {}
+  }
+}
+
+function mergeOutputTooltipMessage(tooltip: string | null) {
+  i18n.global.mergeLocaleMessage('en', {
+    nodeDefs: {
+      SAM3_Detect: {
+        outputs: {
+          0: {
+            tooltip
+          }
+        }
+      }
+    }
+  })
+}
+
+async function renderAndHoverCanvas() {
+  const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+
+  render(NodeTooltip)
+
+  const canvas = document.createElement('canvas')
+  document.body.appendChild(canvas)
+  await user.hover(canvas)
+  await vi.runOnlyPendingTimersAsync()
+  await nextTick()
+}
+
+describe('NodeTooltip', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.resetAllMocks()
+    setActivePinia(createTestingPinia({ stubActions: false }))
+
+    vi.spyOn(useSettingStore(), 'get').mockImplementation(
+      <K extends keyof Settings>(key: K): Settings[K] => {
+        switch (key) {
+          case 'LiteGraph.Node.TooltipDelay':
+            return 0 as Settings[K]
+          default:
+            return undefined as Settings[K]
+        }
+      }
+    )
+
+    mockCanvas.mouse = [100, 80]
+    mockCanvas.graph_mouse = [10, 10]
+    mockCanvas.node_over = createSam3Node()
+    vi.mocked(mockCanvas.getWidgetAtCursor).mockReturnValue(null)
+    vi.mocked(mockIsOverNodeInput).mockReturnValue(-1)
+    vi.mocked(mockIsOverNodeOutput).mockReturnValue(-1)
+    vi.mocked(mockIsDOMWidget).mockReturnValue(false)
+
+    useNodeDefStore().addNodeDef(sam3DetectNodeDef)
+    mergeOutputTooltipMessage(jsonTooltip)
+  })
+
+  afterEach(() => {
+    mergeOutputTooltipMessage(null)
+    cleanup()
+    vi.useRealTimers()
+    vi.restoreAllMocks()
+  })
+
+  it('shows input slot JSON tooltips without i18n placeholder errors', async () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    vi.mocked(mockIsOverNodeInput).mockReturnValue(0)
+
+    await renderAndHoverCanvas()
+
+    expect(te(positiveCoordsTooltipKey)).toBe(true)
+    expect(screen.getByText(jsonTooltip)).toBeInTheDocument()
+    expect(consoleError).not.toHaveBeenCalled()
+  })
+
+  it('shows output slot JSON tooltips without i18n placeholder errors', async () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    vi.mocked(mockIsOverNodeOutput).mockReturnValue(0)
+
+    await renderAndHoverCanvas()
+
+    expect(te(outputTooltipKey)).toBe(true)
+    expect(screen.getByText(jsonTooltip)).toBeInTheDocument()
+    expect(consoleError).not.toHaveBeenCalled()
+  })
+
+  it('shows widget JSON tooltips without i18n placeholder errors', async () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    vi.mocked(mockCanvas.getWidgetAtCursor).mockReturnValue({
+      name: 'positive_coords'
+    })
+
+    await renderAndHoverCanvas()
+
+    expect(te(positiveCoordsTooltipKey)).toBe(true)
+    expect(screen.getByText(jsonTooltip)).toBeInTheDocument()
+    expect(consoleError).not.toHaveBeenCalled()
+  })
+})

src/components/graph/NodeTooltip.vue

@@ -13,7 +13,7 @@
 import { useEventListener } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 
-import { st } from '@/i18n'
+import { stRaw } from '@/i18n'
 import {
   LiteGraph,
   isOverNodeInput,
@@ -84,7 +84,7 @@ function onIdle() {
   )
   if (inputSlot !== -1) {
     const inputName = node.inputs[inputSlot].name
-    const translatedTooltip = st(
+    const translatedTooltip = stRaw(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.inputs.${normalizeI18nKey(inputName)}.tooltip`,
       nodeDef?.inputs[inputName]?.tooltip ?? ''
     )
@@ -98,7 +98,7 @@ function onIdle() {
     [0, 0]
   )
   if (outputSlot !== -1) {
-    const translatedTooltip = st(
+    const translatedTooltip = stRaw(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.outputs.${outputSlot}.tooltip`,
       nodeDef?.outputs[outputSlot]?.tooltip ?? ''
     )
@@ -108,7 +108,7 @@ function onIdle() {
   const widget = comfyApp.canvas.getWidgetAtCursor()
   // Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
   if (widget && !isDOMWidget(widget)) {
-    const translatedTooltip = st(
+    const translatedTooltip = stRaw(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.inputs.${normalizeI18nKey(widget.name)}.tooltip`,
       nodeDef?.inputs[widget.name]?.tooltip ?? ''
     )

src/components/graph/SelectionToolbox.test.ts

@@ -1,6 +1,7 @@
 /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+import { createTestingPinia } from '@pinia/testing'
 import { fireEvent, render } from '@testing-library/vue'
-import { createPinia, setActivePinia } from 'pinia'
+import { setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -29,6 +30,26 @@ function createMockExtensionService(): ReturnType<typeof useExtensionService> {
   >
 }
 
+const { settingGetMock } = vi.hoisted(() => ({
+  settingGetMock: vi.fn()
+}))
+
+const defaultSettingValues: Record<string, unknown> = {
+  'Comfy.UseNewMenu': 'Top',
+  'Comfy.NodeLibrary.NewDesign': true,
+  'Comfy.Load3D.3DViewerEnable': true
+}
+
+function mockSettingValues(overrides: Record<string, unknown> = {}) {
+  const settingValues = {
+    ...defaultSettingValues,
+    ...overrides
+  }
+  settingGetMock.mockImplementation(
+    (key: string): unknown => settingValues[key] ?? null
+  )
+}
+
 // Mock the composables and services
 vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
   useCanvasInteractions: vi.fn(() => ({
@@ -79,10 +100,7 @@ vi.mock('@/utils/nodeFilterUtil', () => ({
 
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => ({
-    get: vi.fn((key: string) => {
-      if (key === 'Comfy.Load3D.3DViewerEnable') return true
-      return null
-    })
+    get: settingGetMock
   })
 }))
 
@@ -128,7 +146,7 @@ describe('SelectionToolbox', () => {
   }
 
   beforeEach(() => {
-    setActivePinia(createPinia())
+    setActivePinia(createTestingPinia({ createSpy: vi.fn, stubActions: false }))
     canvasStore = useCanvasStore()
     nodeDefMock = {
       type: 'TestNode',
@@ -139,6 +157,7 @@ describe('SelectionToolbox', () => {
     canvasStore.canvas = createMockCanvas()
 
     vi.resetAllMocks()
+    mockSettingValues()
   })
 
   function renderComponent(props = {}): { container: Element } {
@@ -231,6 +250,42 @@ describe('SelectionToolbox', () => {
       expect(container.querySelector('.info-button')).toBeFalsy()
     })
 
+    it('should not show info button when legacy menu uses the new node library', () => {
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.NodeLibrary.NewDesign': true
+      })
+      canvasStore.selectedItems = [createMockPositionable()]
+
+      const { container } = renderComponent()
+
+      expect(container.querySelector('.info-button')).toBeFalsy()
+    })
+
+    it('should not show info button when legacy menu uses the legacy node library', () => {
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.NodeLibrary.NewDesign': false
+      })
+      canvasStore.selectedItems = [createMockPositionable()]
+
+      const { container } = renderComponent()
+
+      expect(container.querySelector('.info-button')).toBeFalsy()
+    })
+
+    it('should show info button when new menu uses the legacy node library', () => {
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Top',
+        'Comfy.NodeLibrary.NewDesign': false
+      })
+      canvasStore.selectedItems = [createMockPositionable()]
+
+      const { container } = renderComponent()
+
+      expect(container.querySelector('.info-button')).toBeTruthy()
+    })
+
     it('should show color picker for all selections', () => {
       // Single node selection
       canvasStore.selectedItems = [createMockPositionable()]

src/components/graph/SelectionToolbox.vue

@@ -16,8 +16,8 @@
         @wheel="canvasInteractions.forwardEventToCanvas"
       >
         <DeleteButton v-if="showDelete" />
-        <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
-        <InfoButton v-if="showInfoButton" />
+        <VerticalDivider v-if="canOpenNodeInfo && showAnyPrimaryActions" />
+        <InfoButton v-if="canOpenNodeInfo" />
 
         <ColorPickerButton v-if="showColorPicker" />
         <FrameNodes v-if="showFrameNodes" />
@@ -105,9 +105,8 @@ const {
   isSingleImageNode,
   hasAny3DNodeSelected,
   hasOutputNodesSelected,
-  nodeDef
+  canOpenNodeInfo
 } = useSelectionState()
-const showInfoButton = computed(() => !!nodeDef.value)
 
 const showColorPicker = computed(() => hasAnySelection.value)
 const showConvertToSubgraph = computed(() => hasAnySelection.value)

src/components/graph/selectionToolbox/InfoButton.test.ts

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
-import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -9,19 +8,20 @@ import { createI18n } from 'vue-i18n'
 import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
 import Button from '@/components/ui/button/Button.vue'
 
-const { openPanelMock } = vi.hoisted(() => ({
-  openPanelMock: vi.fn()
+const { openNodeInfoMock, trackUiButtonClickedMock } = vi.hoisted(() => ({
+  openNodeInfoMock: vi.fn(),
+  trackUiButtonClickedMock: vi.fn()
 }))
 
-vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
-  useRightSidePanelStore: () => ({
-    openPanel: openPanelMock
+vi.mock('@/composables/graph/useSelectionState', () => ({
+  useSelectionState: () => ({
+    openNodeInfo: openNodeInfoMock
   })
 }))
 
 vi.mock('@/platform/telemetry', () => ({
   useTelemetry: () => ({
-    trackUiButtonClicked: vi.fn()
+    trackUiButtonClicked: trackUiButtonClickedMock
   })
 }))
 
@@ -39,8 +39,8 @@ describe('InfoButton', () => {
   })
 
   beforeEach(() => {
-    setActivePinia(createPinia())
     vi.clearAllMocks()
+    openNodeInfoMock.mockReturnValue(true)
   })
 
   const renderComponent = () => {
@@ -53,12 +53,29 @@ describe('InfoButton', () => {
     })
   }
 
-  it('should open the info panel on click', async () => {
+  const clickNodeInfoButton = async () => {
     const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: 'Node Info' }))
+  }
+
+  it('should open the node info panel on click', async () => {
     renderComponent()
 
-    await user.click(screen.getByRole('button', { name: 'Node Info' }))
+    await clickNodeInfoButton()
 
-    expect(openPanelMock).toHaveBeenCalledWith('info')
+    expect(openNodeInfoMock).toHaveBeenCalled()
+    expect(trackUiButtonClickedMock).toHaveBeenCalledWith({
+      button_id: 'selection_toolbox_node_info_opened'
+    })
+  })
+
+  it('should not track the click when the node info panel is unavailable', async () => {
+    openNodeInfoMock.mockReturnValue(false)
+    renderComponent()
+
+    await clickNodeInfoButton()
+
+    expect(openNodeInfoMock).toHaveBeenCalled()
+    expect(trackUiButtonClickedMock).not.toHaveBeenCalled()
   })
 })

src/components/graph/selectionToolbox/InfoButton.vue

@@ -15,18 +15,16 @@
 
 <script setup lang="ts">
 import Button from '@/components/ui/button/Button.vue'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useTelemetry } from '@/platform/telemetry'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
-const rightSidePanelStore = useRightSidePanelStore()
+const { openNodeInfo } = useSelectionState()
 
-/**
- * Track node info button click and toggle node help.
- */
 const onInfoClick = () => {
+  if (!openNodeInfo()) return
+
   useTelemetry()?.trackUiButtonClicked({
     button_id: 'selection_toolbox_node_info_opened'
   })
-  rightSidePanelStore.openPanel('info')
 }
 </script>

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -8,7 +8,7 @@
     unstyled
     :pt="{
       root: {
-        class: 'absolute z-60'
+        class: 'p-popover absolute z-60'
       },
       content: {
         class: [
@@ -90,8 +90,12 @@ const popoverRef = ref<InstanceType<typeof Popover>>()
 const toggle = (event: Event, target?: HTMLElement) => {
   popoverRef.value?.toggle(event, target)
 }
+const hide = () => {
+  popoverRef.value?.hide()
+}
 defineExpose({
-  toggle
+  toggle,
+  hide
 })
 
 const handleSubmenuClick = (subOption: SubMenuOption) => {

src/components/node/CreditBadge.vue

@@ -12,7 +12,7 @@
   </span>
   <span
     v-if="rest"
-    class="-ml-2.5 max-w-max min-w-0 grow basis-0 truncate rounded-r-full bg-component-node-widget-background"
+    class="-ml-2.5 flex h-5 max-w-max min-w-0 grow basis-0 items-center truncate rounded-r-full bg-component-node-widget-background text-xs"
   >
     <span class="pr-2" v-text="rest" />
   </span>

src/components/node/NodePreviewCard.vue

@@ -2,6 +2,7 @@
   <div
     class="flex flex-col overflow-hidden rounded-lg border border-border-default bg-base-background"
     :style="{ width: `${BASE_WIDTH_PX * (scaleFactor / BASE_SCALE)}px` }"
+    data-testid="node-preview-card"
   >
     <div ref="previewContainerRef" class="overflow-hidden p-3">
       <div

src/components/topbar/CurrentUserPopoverLegacy.test.ts

@@ -252,6 +252,20 @@ describe('CurrentUserPopoverLegacy', () => {
     expect(screen.getByText('Log Out')).toBeInTheDocument()
   })
 
+  describe('credits help icon (FE-617)', () => {
+    it('renders the credits help icon as an interactive button with the unified-credits tooltip as its accessible name', () => {
+      renderComponent()
+
+      const helpButton = screen.getByTestId('credits-info-button')
+      expect(helpButton).toBeInTheDocument()
+      expect(helpButton.tagName).toBe('BUTTON')
+      expect(helpButton).toHaveAttribute(
+        'aria-label',
+        enMessages.credits.unified.tooltip
+      )
+    })
+  })
+
   it('opens user settings and emits close event when settings item is clicked', async () => {
     const { user, onClose } = renderComponent()
 

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -41,10 +41,16 @@
       <span v-else class="text-base font-semibold text-base-foreground">{{
         formattedBalance
       }}</span>
-      <i
+      <Button
         v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-        class="mr-auto icon-[lucide--circle-help] cursor-help text-base text-muted-foreground"
-      />
+        variant="muted-textonly"
+        size="icon-sm"
+        class="mr-auto"
+        :aria-label="$t('credits.unified.tooltip')"
+        data-testid="credits-info-button"
+      >
+        <i class="icon-[lucide--circle-help]" />
+      </Button>
       <Button
         v-if="isCloud && isFreeTier"
         variant="gradient"

src/components/topbar/WorkflowTab.vue

@@ -23,6 +23,7 @@
         <div class="relative">
           <span
             v-if="shouldShowStatusIndicator"
+            data-testid="workflow-dirty-indicator"
             class="absolute top-1/2 left-1/2 z-10 w-4 -translate-1/2 bg-(--comfy-menu-bg) text-2xl font-bold group-hover:hidden"
             >•</span
           >

src/composables/auth/useAuthActions.test.ts

@@ -0,0 +1,195 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useAuthActions } from '@/composables/auth/useAuthActions'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+
+type ModifiedWorkflow = Pick<ComfyWorkflow, 'path' | 'isModified'>
+
+const mockAuthStore = vi.hoisted(() => ({
+  logout: vi.fn().mockResolvedValue(undefined)
+}))
+
+const mockToastStore = vi.hoisted(() => ({
+  add: vi.fn()
+}))
+
+const mockWorkflowStore = vi.hoisted(() => ({
+  modifiedWorkflows: [] as ModifiedWorkflow[]
+}))
+
+const mockWorkflowService = vi.hoisted(() => ({
+  saveWorkflow: vi.fn().mockResolvedValue(true)
+}))
+
+const mockDialogService = vi.hoisted(() => ({
+  confirm: vi.fn()
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string, values?: { workflow?: string }) =>
+    values?.workflow ? `${key}:${values.workflow}` : key
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: vi.fn(() => undefined)
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: vi.fn(() => mockToastStore)
+}))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: vi.fn(() => mockWorkflowStore)
+}))
+
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
+  useWorkflowService: vi.fn(() => mockWorkflowService)
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: vi.fn(() => mockDialogService)
+}))
+
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: vi.fn(() => mockAuthStore)
+}))
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: vi.fn(() => ({
+    isActiveSubscription: { value: false },
+    isFreeTier: { value: true },
+    type: { value: 'free' }
+  }))
+}))
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    wrapWithErrorHandlingAsync: <TArgs extends unknown[], TReturn>(
+      action: (...args: TArgs) => Promise<TReturn> | TReturn
+    ) => action,
+    toastErrorHandler: vi.fn()
+  })
+}))
+
+function makeWorkflow(path: string): ModifiedWorkflow {
+  return { path, isModified: true } satisfies ModifiedWorkflow
+}
+
+describe('useAuthActions.logout', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    mockWorkflowStore.modifiedWorkflows = []
+  })
+
+  it('logs out without prompting when no workflows are modified', async () => {
+    const { logout } = useAuthActions()
+
+    await logout()
+
+    expect(mockDialogService.confirm).not.toHaveBeenCalled()
+    expect(mockWorkflowService.saveWorkflow).not.toHaveBeenCalled()
+    expect(mockAuthStore.logout).toHaveBeenCalledTimes(1)
+  })
+
+  it('cancels sign-out when the dialog is dismissed (null)', async () => {
+    mockWorkflowStore.modifiedWorkflows = [makeWorkflow('a.json')]
+    mockDialogService.confirm.mockResolvedValueOnce(null)
+    const { logout } = useAuthActions()
+
+    await logout()
+
+    expect(mockDialogService.confirm).toHaveBeenCalledTimes(1)
+    expect(mockWorkflowService.saveWorkflow).not.toHaveBeenCalled()
+    expect(mockAuthStore.logout).not.toHaveBeenCalled()
+  })
+
+  it('signs out without saving when the user picks "Sign out anyway" (false)', async () => {
+    mockWorkflowStore.modifiedWorkflows = [makeWorkflow('a.json')]
+    mockDialogService.confirm.mockResolvedValueOnce(false)
+    const { logout } = useAuthActions()
+
+    await logout()
+
+    expect(mockDialogService.confirm).toHaveBeenCalledTimes(1)
+    expect(mockWorkflowService.saveWorkflow).not.toHaveBeenCalled()
+    expect(mockAuthStore.logout).toHaveBeenCalledTimes(1)
+  })
+
+  it('cancels sign-out when saving a workflow is cancelled', async () => {
+    mockWorkflowStore.modifiedWorkflows = [makeWorkflow('a.json')]
+    mockDialogService.confirm.mockResolvedValueOnce(true)
+    mockWorkflowService.saveWorkflow.mockResolvedValueOnce(false)
+    const { logout } = useAuthActions()
+
+    await logout()
+
+    expect(mockWorkflowService.saveWorkflow).toHaveBeenCalledTimes(1)
+    expect(mockAuthStore.logout).not.toHaveBeenCalled()
+  })
+
+  it('does not log out if a workflow save fails', async () => {
+    mockWorkflowStore.modifiedWorkflows = [
+      makeWorkflow('a.json'),
+      makeWorkflow('b.json')
+    ]
+    mockDialogService.confirm.mockResolvedValueOnce(true)
+    mockWorkflowService.saveWorkflow.mockRejectedValueOnce(
+      new Error('disk full')
+    )
+    const { logout } = useAuthActions()
+
+    await expect(logout()).rejects.toThrow('auth.signOut.saveFailed:a.json')
+
+    expect(mockWorkflowService.saveWorkflow).toHaveBeenCalledTimes(1)
+    expect(mockAuthStore.logout).not.toHaveBeenCalled()
+  })
+
+  it('saves every modified workflow before signing out when user picks Save (true)', async () => {
+    const workflows = [makeWorkflow('a.json'), makeWorkflow('b.json')]
+    mockWorkflowStore.modifiedWorkflows = workflows
+    mockDialogService.confirm.mockResolvedValueOnce(true)
+    const { logout } = useAuthActions()
+
+    await logout()
+
+    expect(mockWorkflowService.saveWorkflow).toHaveBeenCalledTimes(2)
+    expect(mockWorkflowService.saveWorkflow).toHaveBeenNthCalledWith(
+      1,
+      workflows[0]
+    )
+    expect(mockWorkflowService.saveWorkflow).toHaveBeenNthCalledWith(
+      2,
+      workflows[1]
+    )
+    expect(mockAuthStore.logout).toHaveBeenCalledTimes(1)
+    expect(
+      mockWorkflowService.saveWorkflow.mock.invocationCallOrder[1]
+    ).toBeLessThan(mockAuthStore.logout.mock.invocationCallOrder[0])
+    expect(
+      mockWorkflowService.saveWorkflow.mock.invocationCallOrder[0]
+    ).toBeLessThan(mockWorkflowService.saveWorkflow.mock.invocationCallOrder[1])
+  })
+
+  it('passes denyLabel "Sign out anyway" to the dialog', async () => {
+    mockWorkflowStore.modifiedWorkflows = [makeWorkflow('a.json')]
+    mockDialogService.confirm.mockResolvedValueOnce(null)
+    const { logout } = useAuthActions()
+
+    await logout()
+
+    expect(mockDialogService.confirm).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: 'dirtyClose',
+        title: 'auth.signOut.unsavedChangesTitle',
+        message: 'auth.signOut.unsavedChangesMessage',
+        denyLabel: 'auth.signOut.signOutAnyway'
+      })
+    )
+  })
+})

src/composables/auth/useAuthActions.ts

@@ -9,6 +9,7 @@ import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
 import { useAuthStore } from '@/stores/authStore'
@@ -53,14 +54,30 @@ export const useAuthActions = () => {
 
   const logout = wrapWithErrorHandlingAsync(async () => {
     const workflowStore = useWorkflowStore()
-    if (workflowStore.modifiedWorkflows.length > 0) {
+    const modifiedWorkflows = workflowStore.modifiedWorkflows
+    if (modifiedWorkflows.length > 0) {
       const dialogService = useDialogService()
       const confirmed = await dialogService.confirm({
         title: t('auth.signOut.unsavedChangesTitle'),
         message: t('auth.signOut.unsavedChangesMessage'),
-        type: 'dirtyClose'
+        type: 'dirtyClose',
+        denyLabel: t('auth.signOut.signOutAnyway')
       })
-      if (!confirmed) return
+      if (confirmed === null) return
+
+      if (confirmed === true) {
+        const workflowService = useWorkflowService()
+        for (const workflow of modifiedWorkflows) {
+          try {
+            const saved = await workflowService.saveWorkflow(workflow)
+            if (!saved) return
+          } catch {
+            throw new Error(
+              t('auth.signOut.saveFailed', { workflow: workflow.path })
+            )
+          }
+        }
+      }
     }
 
     await authStore.logout()

src/composables/bottomPanelTabs/useLogsTerminal.ts

@@ -0,0 +1,123 @@
+import { until, useEventListener } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import type { Ref } from 'vue'
+import { onMounted, onScopeDispose, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { LogEntry, LogsWsMessage } from '@/schemas/apiSchema'
+import { api } from '@/scripts/api'
+import { useExecutionStore } from '@/stores/executionStore'
+
+type TerminalLike = {
+  write: (data: string) => void
+  reset: () => void
+  scrollToBottom: () => void
+}
+
+/**
+ * Drives the built-in logs terminal: initial load, live `logs` stream, and
+ * full resync when the backend WebSocket reconnects (e.g., after a reboot).
+ *
+ * Listeners are registered synchronously so we cannot miss a `reconnected`
+ * event during the mount-time fetch/subscribe awaits. In-flight fetches are
+ * tied to AbortControllers so that:
+ *   - rapid double-reconnects don't interleave writes / double-subscribe
+ *   - unmount mid-fetch never writes to a disposed terminal
+ */
+export function useLogsTerminal(
+  terminal: Readonly<Ref<TerminalLike | undefined>>
+) {
+  const { t } = useI18n()
+  const errorMessage = ref('')
+  const loading = ref(true)
+
+  let mountController: AbortController | undefined
+  let resyncController: AbortController | undefined
+
+  const writeEntries = (entries: LogEntry[]) => {
+    terminal.value?.write(entries.map((e) => e.m).join(''))
+  }
+
+  const resyncLogs = async () => {
+    // Cancel both the in-flight mount fetch and any prior resync so a late
+    // mount response can't write a stale snapshot on top of a freshly-reset
+    // terminal after we've already written the post-reconnect view.
+    mountController?.abort()
+    resyncController?.abort()
+    const controller = new AbortController()
+    resyncController = controller
+    const { signal } = controller
+
+    try {
+      const logs = await api.getRawLogs()
+      if (signal.aborted || !terminal.value) return
+      terminal.value.reset()
+      writeEntries(logs.entries)
+      terminal.value.scrollToBottom()
+      // Backend lost the per-client log subscription across the restart;
+      // re-subscribe so new runtime logs stream over the fresh WebSocket.
+      await api.subscribeLogs(true)
+      if (signal.aborted) return
+      errorMessage.value = ''
+      loading.value = false
+    } catch (err) {
+      if (signal.aborted) return
+      console.error('Error resyncing logs after reconnect', err)
+      errorMessage.value = t('logsTerminal.resyncError')
+    }
+  }
+
+  // Register listeners synchronously, before any awaits, so a reconnect
+  // fired during mount cannot be missed. useEventListener handles cleanup
+  // on scope dispose.
+  useEventListener(api, 'logs', (e: CustomEvent<LogsWsMessage>) => {
+    writeEntries(e.detail.entries)
+  })
+  useEventListener(api, 'reconnected', () => {
+    void resyncLogs()
+  })
+
+  onMounted(async () => {
+    if (!terminal.value) await until(terminal).toBeTruthy()
+
+    const controller = new AbortController()
+    mountController = controller
+    const { signal } = controller
+
+    try {
+      const logs = await api.getRawLogs()
+      if (signal.aborted || !terminal.value) return
+      writeEntries(logs.entries)
+    } catch (err) {
+      if (signal.aborted) return
+      console.error('Error loading logs', err)
+      errorMessage.value = t('logsTerminal.loadError')
+      loading.value = false
+      return
+    }
+
+    const { clientId } = storeToRefs(useExecutionStore())
+    if (!clientId.value) await until(clientId).not.toBeNull()
+    if (signal.aborted) return
+
+    try {
+      await api.subscribeLogs(true)
+    } catch (err) {
+      if (signal.aborted) return
+      console.error('Error subscribing to logs', err)
+    }
+
+    if (!signal.aborted) loading.value = false
+  })
+
+  onScopeDispose(() => {
+    mountController?.abort()
+    resyncController?.abort()
+    if (!api.clientId) return
+    api.subscribeLogs(false).catch((err) => {
+      console.error('Error unsubscribing from logs', err)
+    })
+  })
+
+  return { errorMessage, loading }
+}

src/composables/graph/useErrorClearingHooks.test.ts

@@ -5,6 +5,11 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  CanvasPointer,
+  CanvasPointerEvent,
+  LGraphCanvas
+} from '@/lib/litegraph/src/litegraph'
 import {
   createTestSubgraph,
   createTestSubgraphNode
@@ -21,6 +26,12 @@ import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNod
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { seedRequiredInputMissingNodeError } from '@/utils/__tests__/executionErrorTestUtils'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
+import type { MissingModelCandidate } from '@/platform/missingModel/types'
+
+beforeEach(() => {
+  vi.restoreAllMocks()
+})
 
 describe('Connection error clearing via onConnectionsChange', () => {
   beforeEach(() => {
@@ -205,6 +216,47 @@ describe('Widget change error clearing via onWidgetChanged', () => {
     expect(store.lastNodeErrors).not.toBeNull()
   })
 
+  it('clears missing media when an upload emits onWidgetChanged', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('LoadImage')
+    node.type = 'LoadImage'
+    const widget = node.addWidget(
+      'combo',
+      'image',
+      'missing.png',
+      () => undefined,
+      { values: [] }
+    )
+    graph.add(node)
+    installErrorClearingHooks(graph)
+
+    const store = useExecutionErrorStore()
+    const mediaStore = useMissingMediaStore()
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    seedRequiredInputMissingNodeError(store, String(node.id), 'image')
+    mediaStore.setMissingMedia([
+      {
+        nodeId: String(node.id),
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'missing.png',
+        isMissing: true
+      } satisfies MissingMediaCandidate
+    ])
+
+    node.onWidgetChanged!.call(
+      node,
+      'image',
+      'uploaded.png',
+      'missing.png',
+      widget
+    )
+
+    expect(store.lastNodeErrors).toBeNull()
+    expect(mediaStore.missingMediaCandidates).toBeNull()
+  })
+
   it('uses interior node execution ID for promoted widget error clearing', () => {
     const subgraph = createTestSubgraph({
       inputs: [{ name: 'ckpt_input', type: '*' }]
@@ -238,14 +290,7 @@ describe('Widget change error clearing via onWidgetChanged', () => {
     )
     expect(promotedWidget).toBeDefined()
 
-    // PromotedWidgetView.name returns displayName ("ckpt_input"), which is
-    // passed as errorInputName to clearSimpleNodeErrors. Seed the error
-    // with that name so the slot-name filter matches.
-    seedRequiredInputMissingNodeError(
-      store,
-      interiorExecId,
-      promotedWidget!.name
-    )
+    seedRequiredInputMissingNodeError(store, interiorExecId, 'ckpt_name')
 
     subgraphNode.onWidgetChanged!.call(
       subgraphNode,
@@ -257,6 +302,227 @@ describe('Widget change error clearing via onWidgetChanged', () => {
 
     expect(store.lastNodeErrors).toBeNull()
   })
+
+  it('clears range errors for promoted widgets by interior widget name', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'steps_input', type: 'INT' }]
+    })
+    const interiorNode = new LGraphNode('KSampler')
+    const interiorInput = interiorNode.addInput('steps_input', 'INT')
+    interiorNode.addWidget('number', 'steps', 150, () => undefined, {
+      min: 1,
+      max: 100
+    })
+    interiorInput.widget = { name: 'steps' }
+    subgraph.add(interiorNode)
+    subgraph.inputNode.slots[0].connect(interiorInput, interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const store = useExecutionErrorStore()
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+    store.lastNodeErrors = {
+      [interiorExecId]: {
+        errors: [
+          {
+            type: 'value_bigger_than_max',
+            message: 'Too big',
+            details: '',
+            extra_info: { input_name: 'steps' }
+          }
+        ],
+        dependent_outputs: [],
+        class_type: 'KSampler'
+      }
+    }
+
+    const promotedWidget = subgraphNode.widgets?.find(
+      (w) => 'sourceWidgetName' in w && w.sourceWidgetName === 'steps'
+    )
+    expect(promotedWidget).toBeDefined()
+
+    subgraphNode.onWidgetChanged!.call(
+      subgraphNode,
+      'steps',
+      50,
+      150,
+      promotedWidget!
+    )
+
+    expect(store.lastNodeErrors).toBeNull()
+  })
+
+  it('clears missing model state when a promoted widget changes through the legacy canvas path', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'ckpt_input', type: '*' }]
+    })
+    const interiorNode = new LGraphNode('CheckpointLoaderSimple')
+    interiorNode.type = 'CheckpointLoaderSimple'
+    const interiorInput = interiorNode.addInput('ckpt_input', '*')
+    interiorNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    interiorInput.widget = { name: 'ckpt_name' }
+    subgraph.add(interiorNode)
+    subgraph.inputNode.slots[0].connect(interiorInput, interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, {
+      id: 65,
+      pos: [0, 0],
+      size: [200, 100]
+    })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const missingModelStore = useMissingModelStore()
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+    missingModelStore.setMissingModels([
+      {
+        nodeId: interiorExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate
+    ])
+
+    const promotedWidget = subgraphNode.widgets?.find(
+      (widget) =>
+        'sourceWidgetName' in widget && widget.sourceWidgetName === 'ckpt_name'
+    )
+    expect(promotedWidget).toBeDefined()
+
+    const clickEvent = fromAny<CanvasPointerEvent, unknown>({
+      canvasX: 190,
+      canvasY: 20,
+      deltaX: 0
+    })
+    const pointer = fromAny<CanvasPointer, unknown>({
+      eDown: clickEvent
+    })
+    const canvas = fromAny<LGraphCanvas, unknown>({
+      graph_mouse: [190, 20],
+      last_mouseclick: 0
+    })
+
+    const handled = promotedWidget!.onPointerDown?.(
+      pointer,
+      subgraphNode,
+      canvas
+    )
+    expect(handled).toBe(true)
+    expect(pointer.onClick).toBeDefined()
+
+    pointer.onClick?.(clickEvent)
+
+    expect(missingModelStore.missingModelCandidates).toBeNull()
+  })
+
+  it('keeps unchanged same-named promoted model targets on the canvas path', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [
+        { name: 'first_ckpt', type: '*' },
+        { name: 'second_ckpt', type: '*' }
+      ]
+    })
+    const firstNode = new LGraphNode('CheckpointLoaderSimple')
+    firstNode.type = 'CheckpointLoaderSimple'
+    const firstInput = firstNode.addInput('first_ckpt', '*')
+    const firstWidget = firstNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    firstInput.widget = { name: 'ckpt_name' }
+    subgraph.add(firstNode)
+    subgraph.inputNode.slots[0].connect(firstInput, firstNode)
+
+    const secondNode = new LGraphNode('CheckpointLoaderSimple')
+    secondNode.type = 'CheckpointLoaderSimple'
+    const secondInput = secondNode.addInput('second_ckpt', '*')
+    secondNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    secondInput.widget = { name: 'ckpt_name' }
+    subgraph.add(secondNode)
+    subgraph.inputNode.slots[1].connect(secondInput, secondNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const promotedWidgets =
+      subgraphNode.widgets?.filter(
+        (widget) =>
+          'sourceWidgetName' in widget &&
+          widget.sourceWidgetName === 'ckpt_name'
+      ) ?? []
+    expect(promotedWidgets).toHaveLength(2)
+
+    const missingModelStore = useMissingModelStore()
+    const firstExecId = `${subgraphNode.id}:${firstNode.id}`
+    const secondExecId = `${subgraphNode.id}:${secondNode.id}`
+    missingModelStore.setMissingModels([
+      {
+        nodeId: firstExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate,
+      {
+        nodeId: secondExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate
+    ])
+
+    firstWidget.value = 'present.safetensors'
+    subgraphNode.onWidgetChanged!.call(
+      subgraphNode,
+      'ckpt_name',
+      'present.safetensors',
+      'missing.safetensors',
+      firstWidget
+    )
+
+    expect(missingModelStore.missingModelCandidates).toEqual([
+      expect.objectContaining({
+        nodeId: secondExecId,
+        widgetName: 'ckpt_name',
+        name: 'missing.safetensors'
+      })
+    ])
+  })
 })
 
 describe('installErrorClearingHooks lifecycle', () => {
@@ -347,6 +613,90 @@ describe('installErrorClearingHooks lifecycle', () => {
     installErrorClearingHooks(graph)
     expect(node.onConnectionsChange).toBe(chainedAfterFirst)
   })
+
+  it('scans added-node missing models after widget values are restored', async () => {
+    const graph = new LGraph()
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const node = new LGraphNode('CheckpointLoaderSimple')
+    node.type = 'CheckpointLoaderSimple'
+    const widget = node.addWidget('combo', 'ckpt_name', '', () => undefined, {
+      values: []
+    })
+
+    graph.add(node)
+    widget.value = 'fake_model.safetensors'
+
+    await Promise.resolve()
+
+    expect(useMissingModelStore().missingModelCandidates).toEqual([
+      expect.objectContaining({ name: 'fake_model.safetensors' })
+    ])
+  })
+
+  it('scans added-node missing models before the deferred media scan', async () => {
+    const graph = new LGraph()
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    const modelScan = vi
+      .spyOn(missingModelScan, 'scanNodeModelCandidates')
+      .mockImplementation((_rootGraph, node) => [
+        {
+          nodeId: String(node.id),
+          nodeType: node.type,
+          widgetName: 'ckpt_name',
+          isAssetSupported: false,
+          name: 'fake_model.safetensors',
+          directory: 'checkpoints',
+          isMissing: true
+        } satisfies MissingModelCandidate
+      ])
+    const mediaScan = vi
+      .spyOn(missingMediaScan, 'scanNodeMediaCandidates')
+      .mockReturnValue([])
+    installErrorClearingHooks(graph)
+
+    const node = new LGraphNode('CheckpointLoaderSimple')
+    node.type = 'CheckpointLoaderSimple'
+    graph.add(node)
+
+    await Promise.resolve()
+
+    expect(modelScan).toHaveBeenCalledOnce()
+    expect(useMissingModelStore().missingModelCandidates).toEqual([
+      expect.objectContaining({ name: 'fake_model.safetensors' })
+    ])
+    expect(mediaScan).not.toHaveBeenCalled()
+
+    await Promise.resolve()
+
+    expect(mediaScan).toHaveBeenCalledTimes(1)
+    expect(modelScan.mock.invocationCallOrder[0]).toBeLessThan(
+      mediaScan.mock.invocationCallOrder[0]
+    )
+  })
+
+  it('does not surface added-node missing media when upload state is marked between deferred scans', async () => {
+    const graph = new LGraph()
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    vi.spyOn(missingModelScan, 'scanNodeModelCandidates').mockReturnValue([])
+    const mediaScan = vi.spyOn(missingMediaScan, 'scanNodeMediaCandidates')
+    installErrorClearingHooks(graph)
+
+    const node = new LGraphNode('LoadVideo')
+    node.type = 'LoadVideo'
+    node.addWidget('combo', 'file', 'uploading.mp4', () => undefined, {
+      values: []
+    })
+
+    graph.add(node)
+    await Promise.resolve()
+    node.isUploading = true
+    await Promise.resolve()
+
+    expect(useMissingMediaStore().missingMediaCandidates).toBeNull()
+    expect(mediaScan).toHaveBeenCalledOnce()
+  })
 })
 
 describe('onNodeRemoved clears missing asset errors by execution ID', () => {
@@ -543,7 +893,7 @@ describe('realtime scan verifies pending cloud candidates', () => {
       }
     ])
     const verifySpy = vi
-      .spyOn(missingMediaScan, 'verifyCloudMediaCandidates')
+      .spyOn(missingMediaScan, 'verifyMediaCandidates')
       .mockImplementation(async (candidates) => {
         for (const c of candidates) c.isMissing = true
       })
@@ -611,7 +961,6 @@ describe('realtime scan verifies pending cloud candidates', () => {
 
 describe('realtime verification staleness guards', () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
     setActivePinia(createTestingPinia({ stubActions: false }))
     vi.spyOn(app, 'isGraphReady', 'get').mockReturnValue(false)
   })
@@ -686,7 +1035,7 @@ describe('realtime verification staleness guards', () => {
     let resolveVerify: (() => void) | undefined
     const verifyPromise = new Promise<void>((r) => (resolveVerify = r))
     const verifySpy = vi
-      .spyOn(missingMediaScan, 'verifyCloudMediaCandidates')
+      .spyOn(missingMediaScan, 'verifyMediaCandidates')
       .mockImplementation(async (candidates) => {
         await verifyPromise
         for (const c of candidates) c.isMissing = true
@@ -771,7 +1120,6 @@ describe('realtime verification staleness guards', () => {
 
 describe('scan skips interior of bypassed subgraph containers', () => {
   beforeEach(() => {
-    vi.restoreAllMocks()
     setActivePinia(createTestingPinia({ stubActions: false }))
     vi.spyOn(app, 'isGraphReady', 'get').mockReturnValue(false)
   })

src/composables/graph/useErrorClearingHooks.ts

@@ -7,6 +7,7 @@
  */
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import type { PromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -28,7 +29,7 @@ import {
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import {
   scanNodeMediaCandidates,
-  verifyCloudMediaCandidates
+  verifyMediaCandidates
 } from '@/platform/missingMedia/missingMediaScan'
 import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
@@ -45,22 +46,128 @@ import {
   isAncestorPathActive
 } from '@/utils/graphTraversalUtil'
 
-function resolvePromotedExecId(
-  rootGraph: LGraph,
-  node: LGraphNode,
+interface WidgetErrorClearingTarget {
+  executionId: string
+  validationInputName: string
+  assetWidgetName: string
+  currentValue: unknown
+  options?: { min?: number; max?: number }
+}
+
+function getWidgetRangeOptions(widget: IBaseWidget): {
+  min?: number
+  max?: number
+} {
+  return {
+    min: widget.options?.min,
+    max: widget.options?.max
+  }
+}
+
+function plainWidgetToErrorTarget(
   widget: IBaseWidget,
   hostExecId: string
-): string {
-  if (!isPromotedWidgetView(widget)) return hostExecId
+): WidgetErrorClearingTarget {
+  return {
+    executionId: hostExecId,
+    validationInputName: widget.name,
+    assetWidgetName: widget.name,
+    currentValue: widget.value,
+    options: getWidgetRangeOptions(widget)
+  }
+}
+
+function promotedWidgetToErrorTarget(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: PromotedWidgetView,
+  hostExecId: string
+): WidgetErrorClearingTarget {
   const result = resolveConcretePromotedWidget(
-    node,
+    hostNode,
     widget.sourceNodeId,
     widget.sourceWidgetName
   )
-  if (result.status === 'resolved' && result.resolved.node) {
-    return getExecutionIdByNode(rootGraph, result.resolved.node) ?? hostExecId
+  const execId =
+    result.status === 'resolved' && result.resolved.node
+      ? (getExecutionIdByNode(rootGraph, result.resolved.node) ?? hostExecId)
+      : hostExecId
+  const resolvedWidget =
+    result.status === 'resolved' ? result.resolved.widget : widget
+
+  return {
+    executionId: execId,
+    validationInputName: resolvedWidget.name,
+    assetWidgetName: widget.sourceWidgetName,
+    currentValue: resolvedWidget.value,
+    options: getWidgetRangeOptions(resolvedWidget)
+  }
+}
+
+function resolveCanvasPathPromotedWidgetTargets(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: IBaseWidget,
+  hostExecId: string,
+  newValue: unknown
+): WidgetErrorClearingTarget[] {
+  if (!hostNode.isSubgraphNode?.() || isPromotedWidgetView(widget)) return []
+
+  // Canvas-path events lose promoted identity, so the post-write value
+  // disambiguates same-named promoted widgets.
+  return (hostNode.widgets ?? [])
+    .filter(isPromotedWidgetView)
+    .filter((promotedWidget) => promotedWidget.sourceWidgetName === widget.name)
+    .map((promotedWidget) =>
+      promotedWidgetToErrorTarget(
+        rootGraph,
+        hostNode,
+        promotedWidget,
+        hostExecId
+      )
+    )
+    .filter((target) => Object.is(target.currentValue, newValue))
+}
+
+function resolveWidgetErrorTargets(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: IBaseWidget,
+  hostExecId: string,
+  newValue: unknown
+): WidgetErrorClearingTarget[] {
+  if (isPromotedWidgetView(widget)) {
+    return [
+      promotedWidgetToErrorTarget(rootGraph, hostNode, widget, hostExecId)
+    ]
+  }
+
+  const canvasPathTargets = resolveCanvasPathPromotedWidgetTargets(
+    rootGraph,
+    hostNode,
+    widget,
+    hostExecId,
+    newValue
+  )
+  return canvasPathTargets.length
+    ? canvasPathTargets
+    : [plainWidgetToErrorTarget(widget, hostExecId)]
+}
+
+function clearWidgetErrorTargets(
+  targets: WidgetErrorClearingTarget[],
+  newValue: unknown
+): void {
+  const store = useExecutionErrorStore()
+  for (const target of targets) {
+    store.clearWidgetRelatedErrors(
+      target.executionId,
+      target.validationInputName,
+      target.assetWidgetName,
+      newValue,
+      target.options
+    )
   }
-  return hostExecId
 }
 
 const hookedNodes = new WeakSet<LGraphNode>()
@@ -103,23 +210,14 @@ function installNodeHooks(node: LGraphNode): void {
       const hostExecId = getExecutionIdByNode(app.rootGraph, node)
       if (!hostExecId) return
 
-      const execId = resolvePromotedExecId(
+      const targets = resolveWidgetErrorTargets(
         app.rootGraph,
         node,
         widget,
-        hostExecId
-      )
-      const widgetName = isPromotedWidgetView(widget)
-        ? widget.sourceWidgetName
-        : widget.name
-
-      useExecutionErrorStore().clearWidgetRelatedErrors(
-        execId,
-        widget.name,
-        widgetName,
-        newValue,
-        { min: widget.options?.min, max: widget.options?.max }
+        hostExecId,
+        newValue
       )
+      clearWidgetErrorTargets(targets, newValue)
     }
   )
 }
@@ -155,25 +253,26 @@ function isNodeInactive(mode: number): boolean {
   return mode === LGraphEventMode.NEVER || mode === LGraphEventMode.BYPASS
 }
 
-/** Scan a single node and add confirmed missing model/media to stores.
- *  For subgraph containers, also scans all active interior nodes. */
-function scanAndAddNodeErrors(node: LGraphNode): void {
+function scanNodeErrorTargets(
+  node: LGraphNode,
+  scanNode: (node: LGraphNode) => void
+): void {
   if (!app.rootGraph) return
 
   if (node.isSubgraphNode?.() && node.subgraph) {
     for (const innerNode of collectAllNodes(node.subgraph)) {
       if (innerNode.isSubgraphNode?.()) continue
       if (isNodeInactive(innerNode.mode)) continue
-      scanSingleNodeErrors(innerNode)
+      scanNode(innerNode)
     }
     return
   }
 
-  scanSingleNodeErrors(node)
+  scanNode(node)
 }
 
-function scanSingleNodeErrors(node: LGraphNode): void {
-  if (!app.rootGraph) return
+function getActiveExecutionId(node: LGraphNode): string | null {
+  if (!app.rootGraph) return null
   // Skip when any enclosing subgraph is muted/bypassed. Callers only
   // verify each node's own mode; entering a bypassed subgraph (via
   // useGraphNodeManager replaying onNodeAdded for existing interior
@@ -181,7 +280,25 @@ function scanSingleNodeErrors(node: LGraphNode): void {
   // execId means the node has no current graph (e.g. detached mid
   // lifecycle) — also skip, since we cannot verify its scope.
   const execId = getExecutionIdByNode(app.rootGraph, node)
-  if (!execId || !isAncestorPathActive(app.rootGraph, execId)) return
+  if (!execId || !isAncestorPathActive(app.rootGraph, execId)) return null
+  return execId
+}
+
+/** Scan a single node and add confirmed missing model/media to stores.
+ *  For subgraph containers, also scans all active interior nodes. */
+function scanAndAddNodeErrors(node: LGraphNode): void {
+  scanNodeErrorTargets(node, scanSingleNodeErrors)
+}
+
+function scanSingleNodeErrors(node: LGraphNode): void {
+  scanSingleNodeModelsAndTypes(node)
+  scanSingleNodeMedia(node)
+}
+
+function scanSingleNodeModelsAndTypes(node: LGraphNode): void {
+  if (!app.rootGraph) return
+  const execId = getActiveExecutionId(node)
+  if (!execId) return
 
   const modelCandidates = scanNodeModelCandidates(
     app.rootGraph,
@@ -204,39 +321,40 @@ function scanSingleNodeErrors(node: LGraphNode): void {
     void verifyAndAddPendingModels(pendingModels)
   }
 
+  const originalType = node.last_serialization?.type ?? node.type ?? 'Unknown'
+  if (!(originalType in LiteGraph.registered_node_types)) {
+    const nodeReplacementStore = useNodeReplacementStore()
+    const replacement = nodeReplacementStore.getReplacementFor(originalType)
+    const store = useMissingNodesErrorStore()
+    const existing = store.missingNodesError?.nodeTypes ?? []
+    store.surfaceMissingNodes([
+      ...existing,
+      {
+        type: originalType,
+        nodeId: execId,
+        cnrId: getCnrIdFromNode(node),
+        isReplaceable: replacement !== null,
+        replacement: replacement ?? undefined
+      }
+    ])
+  }
+}
+
+function scanSingleNodeMedia(node: LGraphNode): void {
+  if (!app.rootGraph) return
+  if (!getActiveExecutionId(node)) return
+
   const mediaCandidates = scanNodeMediaCandidates(app.rootGraph, node, isCloud)
   const confirmedMedia = mediaCandidates.filter((c) => c.isMissing === true)
   if (confirmedMedia.length) {
     useMissingMediaStore().addMissingMedia(confirmedMedia)
   }
-  // Cloud media scans always return isMissing: undefined pending
-  // verification against the input-assets list.
+  // Cloud media scans return pending for asset verification. OSS scans only
+  // return pending for generated output media.
   const pendingMedia = mediaCandidates.filter((c) => c.isMissing === undefined)
   if (pendingMedia.length) {
     void verifyAndAddPendingMedia(pendingMedia)
   }
-
-  // Check for missing node type
-  const originalType = node.last_serialization?.type ?? node.type ?? 'Unknown'
-  if (!(originalType in LiteGraph.registered_node_types)) {
-    const execId = getExecutionIdByNode(app.rootGraph, node)
-    if (execId) {
-      const nodeReplacementStore = useNodeReplacementStore()
-      const replacement = nodeReplacementStore.getReplacementFor(originalType)
-      const store = useMissingNodesErrorStore()
-      const existing = store.missingNodesError?.nodeTypes ?? []
-      store.surfaceMissingNodes([
-        ...existing,
-        {
-          type: originalType,
-          nodeId: execId,
-          cnrId: getCnrIdFromNode(node),
-          isReplaceable: replacement !== null,
-          replacement: replacement ?? undefined
-        }
-      ])
-    }
-  }
 }
 
 /**
@@ -282,7 +400,7 @@ async function verifyAndAddPendingMedia(
 ): Promise<void> {
   const rootGraphAtScan = app.rootGraph
   try {
-    await verifyCloudMediaCandidates(pending)
+    await verifyMediaCandidates(pending, { isCloud })
     if (app.rootGraph !== rootGraphAtScan) return
     const verified = pending.filter(
       (c) => c.isMissing === true && isCandidateStillActive(c.nodeId)
@@ -293,10 +411,23 @@ async function verifyAndAddPendingMedia(
   }
 }
 
-function scanAddedNode(node: LGraphNode): void {
+function scanAddedNode(
+  node: LGraphNode,
+  scanNode: (node: LGraphNode) => void
+): void {
   if (!app.rootGraph || ChangeTracker.isLoadingGraph) return
   if (isNodeInactive(node.mode)) return
-  scanAndAddNodeErrors(node)
+  scanNodeErrorTargets(node, scanNode)
+}
+
+function scheduleAddedNodeScan(node: LGraphNode): void {
+  queueMicrotask(() => {
+    scanAddedNode(node, scanSingleNodeModelsAndTypes)
+    // Paste/drop upload handlers run immediately after graph.add and must set
+    // node.isUploading synchronously before their first await. This second
+    // microtask lets that upload state settle before media widgets are scanned.
+    queueMicrotask(() => scanAddedNode(node, scanSingleNodeMedia))
+  })
 }
 
 function handleNodeModeChange(
@@ -368,10 +499,12 @@ export function installErrorClearingHooks(graph: LGraph): () => void {
     // Scan pasted/duplicated nodes for missing models/media.
     // Skip during loadGraphData (undo/redo/tab switch) — those are
     // handled by the full pipeline or cache restore.
-    // Deferred to microtask because onNodeAdded fires before
-    // node.configure() restores widget values.
+    // Model and node scans use the original one-microtask deferral so pasted
+    // missing-model errors appear before selection-scoped tabs recalculate.
+    // Media gets one extra microtask so drag/drop upload handlers can mark
+    // transient upload state before media detection reads the widget value.
     if (!ChangeTracker.isLoadingGraph) {
-      queueMicrotask(() => scanAddedNode(node))
+      scheduleAddedNodeScan(node)
     }
 
     originalOnNodeAdded?.call(this, node)

src/composables/graph/useGraphNodeManager.ts

@@ -48,6 +48,8 @@ export interface WidgetSlotMetadata {
   type: string
 }
 
+type Badges = (LGraphBadge | (() => LGraphBadge))[]
+
 /**
  * Minimal render-specific widget data extracted from LiteGraph widgets.
  * Value and metadata (label, hidden, disabled, etc.) are accessed via widgetValueStore.
@@ -107,7 +109,7 @@ export interface VueNodeData {
   title: string
   type: string
   apiNode?: boolean
-  badges?: (LGraphBadge | (() => LGraphBadge))[]
+  badges?: Badges
   bgcolor?: string
   color?: string
   flags?: {
@@ -786,6 +788,12 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
                 showAdvanced: Boolean(propertyEvent.newValue)
               })
               break
+            case 'badges':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                badges: propertyEvent.newValue as Badges
+              })
+              break
           }
         }
       },

src/composables/graph/useMoreOptionsMenu.ts

@@ -33,6 +33,7 @@ export interface MenuOption {
   disabled?: boolean
   source?: 'litegraph' | 'vue'
   isColorPicker?: boolean
+  isShapePicker?: boolean
 }
 
 export interface SubMenuOption {
@@ -124,8 +125,8 @@ export function useMoreOptionsMenu() {
   const {
     selectedItems,
     selectedNodes,
-    nodeDef,
-    showNodeHelp,
+    canOpenNodeInfo,
+    openNodeInfo,
     hasSubgraphs: hasSubgraphsComputed,
     hasImageNode,
     hasOutputNodesSelected,
@@ -243,8 +244,8 @@ export function useMoreOptionsMenu() {
     options.push({ type: 'divider' })
 
     // Section 4: Node properties (Node Info, Shape, Color)
-    if (nodeDef.value) {
-      options.push(getNodeInfoOption(showNodeHelp))
+    if (canOpenNodeInfo.value) {
+      options.push(getNodeInfoOption(openNodeInfo))
     }
     if (groupContext) {
       options.push(getGroupColorOptions(groupContext, bump))

src/composables/graph/useNodeMenuOptions.ts

@@ -66,6 +66,7 @@ export function useNodeMenuOptions() {
       icon: 'icon-[lucide--box]',
       hasSubmenu: true,
       submenu: shapeSubmenu.value,
+      isShapePicker: true,
       action: () => {}
     },
     {
@@ -111,10 +112,10 @@ export function useNodeMenuOptions() {
     action: runBranch
   })
 
-  const getNodeInfoOption = (showNodeHelp: () => void): MenuOption => ({
+  const getNodeInfoOption = (openNodeInfo: () => boolean): MenuOption => ({
     label: t('contextMenu.Node Info'),
     icon: 'icon-[lucide--info]',
-    action: showNodeHelp
+    action: openNodeInfo
   })
 
   return {

src/composables/graph/useSelectionState.test.ts

@@ -3,9 +3,11 @@ import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
 import {
@@ -13,11 +15,6 @@ import {
   createMockPositionable
 } from '@/utils/__tests__/litegraphTestUtils'
 
-// Mock composables
-vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
-  useNodeLibrarySidebarTab: vi.fn()
-}))
-
 vi.mock('@/utils/litegraphUtil', () => ({
   isLGraphNode: vi.fn(),
   isImageNode: vi.fn()
@@ -39,6 +36,45 @@ const mockConnection = {
   isNode: false
 }
 
+function createMockNodeDef() {
+  return new ComfyNodeDefImpl({
+    name: 'TestNode',
+    display_name: 'Test Node',
+    category: 'test',
+    input: {},
+    output: [],
+    output_name: [],
+    output_is_list: [],
+    output_node: false,
+    python_module: 'nodes',
+    description: ''
+  })
+}
+
+function selectSingleNodeWithNodeDef(id: number) {
+  const canvasStore = useCanvasStore()
+  const nodeDefStore = useNodeDefStore()
+
+  canvasStore.$state.selectedItems = [
+    createMockLGraphNode({ id, type: 'TestNode' })
+  ]
+  vi.mocked(nodeDefStore.fromLGraphNode).mockReturnValue(createMockNodeDef())
+}
+
+function mockSettingValues(overrides: Record<string, unknown> = {}) {
+  const settingStore = useSettingStore()
+  const settingValues: Record<string, unknown> = {
+    'Comfy.UseNewMenu': 'Top',
+    'Comfy.NodeLibrary.NewDesign': true,
+    'Comfy.Load3D.3DViewerEnable': false,
+    ...overrides
+  }
+
+  vi.mocked(settingStore.get).mockImplementation(
+    (key: string): unknown => settingValues[key]
+  )
+}
+
 describe('useSelectionState', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -49,14 +85,7 @@ describe('useSelectionState', () => {
         createSpy: vi.fn
       })
     )
-
-    // Setup mock composables
-    vi.mocked(useNodeLibrarySidebarTab).mockReturnValue({
-      id: 'node-library-tab',
-      title: 'Node Library',
-      type: 'custom',
-      render: () => null
-    } as ReturnType<typeof useNodeLibrarySidebarTab>)
+    mockSettingValues()
 
     // Setup mock utility functions
     vi.mocked(isLGraphNode).mockImplementation((item: unknown) => {
@@ -187,4 +216,83 @@ describe('useSelectionState', () => {
       expect(newIsPinned).toBe(false)
     })
   })
+
+  describe('Node Info', () => {
+    test('should open the right side info panel for a selected node', () => {
+      const rightSidePanelStore = useRightSidePanelStore()
+      selectSingleNodeWithNodeDef(8)
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(true)
+      openNodeInfo()
+
+      expect(rightSidePanelStore.openPanel).toHaveBeenCalledWith('info')
+    })
+
+    test('should not open the right side panel for multiple selected nodes', () => {
+      const canvasStore = useCanvasStore()
+      const rightSidePanelStore = useRightSidePanelStore()
+      canvasStore.$state.selectedItems = [
+        createMockLGraphNode({ id: 9, type: 'TestNode' }),
+        createMockLGraphNode({ id: 10, type: 'TestNode' })
+      ]
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(false)
+      openNodeInfo()
+
+      expect(rightSidePanelStore.openPanel).not.toHaveBeenCalled()
+    })
+
+    test('should open the right side info panel when new menu uses the legacy node library', () => {
+      const rightSidePanelStore = useRightSidePanelStore()
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Top',
+        'Comfy.NodeLibrary.NewDesign': false
+      })
+      selectSingleNodeWithNodeDef(11)
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(true)
+
+      const didOpen = openNodeInfo()
+
+      expect(didOpen).toBe(true)
+      expect(rightSidePanelStore.openPanel).toHaveBeenCalledWith('info')
+    })
+
+    test('should not open node info when legacy menu uses the new node library', () => {
+      const rightSidePanelStore = useRightSidePanelStore()
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.NodeLibrary.NewDesign': true
+      })
+      selectSingleNodeWithNodeDef(12)
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(false)
+
+      const didOpen = openNodeInfo()
+
+      expect(didOpen).toBe(false)
+      expect(rightSidePanelStore.openPanel).not.toHaveBeenCalled()
+    })
+
+    test('should not open node info when legacy menu uses the legacy node library', () => {
+      const rightSidePanelStore = useRightSidePanelStore()
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.NodeLibrary.NewDesign': false
+      })
+      selectSingleNodeWithNodeDef(13)
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(false)
+
+      const didOpen = openNodeInfo()
+
+      expect(didOpen).toBe(false)
+      expect(rightSidePanelStore.openPanel).not.toHaveBeenCalled()
+    })
+  })
 })

src/composables/graph/useSelectionState.ts

@@ -1,14 +1,12 @@
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
-import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphEventMode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isImageNode, isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
 
@@ -25,9 +23,8 @@ export interface NodeSelectionState {
 export function useSelectionState() {
   const canvasStore = useCanvasStore()
   const nodeDefStore = useNodeDefStore()
-  const sidebarTabStore = useSidebarTabStore()
-  const nodeHelpStore = useNodeHelpStore()
-  const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+  const settingStore = useSettingStore()
+  const rightSidePanelStore = useRightSidePanelStore()
 
   const { selectedItems } = storeToRefs(canvasStore)
 
@@ -64,7 +61,7 @@ export function useSelectionState() {
   )
 
   const hasAny3DNodeSelected = computed(() => {
-    const enable3DViewer = useSettingStore().get('Comfy.Load3D.3DViewerEnable')
+    const enable3DViewer = settingStore.get('Comfy.Load3D.3DViewerEnable')
     return (
       selectedNodes.value.length === 1 &&
       selectedNodes.value.some(isLoad3dNode) &&
@@ -98,34 +95,24 @@ export function useSelectionState() {
   const computeSelectionFlags = (): NodeSelectionState =>
     computeSelectionStatesFromNodes(selectedNodes.value)
 
-  /** Toggle node help sidebar/panel for the single selected node (if any). */
-  const showNodeHelp = () => {
-    const def = nodeDef.value
-    if (!def) return
+  const canOpenNodeInfo = computed(
+    () =>
+      Boolean(nodeDef.value) &&
+      settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
+  )
 
-    const isSidebarActive =
-      sidebarTabStore.activeSidebarTabId === nodeLibraryTabId
-    const currentHelpNode = nodeHelpStore.currentHelpNode
-    const isSameNodeHelpOpen =
-      isSidebarActive &&
-      nodeHelpStore.isHelpOpen &&
-      currentHelpNode?.nodePath === def.nodePath
-
-    if (isSameNodeHelpOpen) {
-      nodeHelpStore.closeHelp()
-      sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
-      return
-    }
-
-    if (!isSidebarActive) sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
-    nodeHelpStore.openHelp(def)
+  const openNodeInfo = () => {
+    if (!canOpenNodeInfo.value) return false
+    rightSidePanelStore.openPanel('info')
+    return true
   }
 
   return {
     selectedItems,
     selectedNodes,
     nodeDef,
-    showNodeHelp,
+    canOpenNodeInfo,
+    openNodeInfo,
     hasAny3DNodeSelected,
     hasAnySelection,
     hasSingleSelection,

src/composables/node/useNodeImageUpload.test.ts

@@ -54,8 +54,8 @@ function createMockNode(): LGraphNode {
   })
 }
 
-function createFile(name = 'test.png'): File {
-  return new File(['data'], name, { type: 'image/png' })
+function createFile(name = 'test.png', type = 'image/png'): File {
+  return new File(['data'], name, { type })
 }
 
 function successResponse(name: string, subfolder?: string) {
@@ -95,15 +95,21 @@ describe('useNodeImageUpload', () => {
     })
   })
 
-  it('sets isUploading true during upload and false after', async () => {
-    mockFetchApi.mockResolvedValueOnce(successResponse('test.png'))
+  it.for([
+    { mediaType: 'image', filename: 'test.png', mimeType: 'image/png' },
+    { mediaType: 'video', filename: 'clip.mp4', mimeType: 'video/mp4' }
+  ])(
+    'sets isUploading true during $mediaType upload and false after',
+    async ({ filename, mimeType }) => {
+      mockFetchApi.mockResolvedValueOnce(successResponse(filename))
 
-    const promise = capturedDragOnDrop([createFile()])
-    expect(node.isUploading).toBe(true)
+      const promise = capturedDragOnDrop([createFile(filename, mimeType)])
+      expect(node.isUploading).toBe(true)
 
-    await promise
-    expect(node.isUploading).toBe(false)
-  })
+      await promise
+      expect(node.isUploading).toBe(false)
+    }
+  )
 
   it('clears node.imgs on upload start', async () => {
     mockFetchApi.mockResolvedValueOnce(successResponse('test.png'))

src/composables/node/useNodePricing.test.ts

@@ -625,9 +625,9 @@ describe('useNodePricing', () => {
         getNodeDisplayPrice(node)
         await new Promise((r) => setTimeout(r, 50))
 
-        // VueNodes path bumps per-node ref instead of the global tick.
+        // VueNodes path bumps per-node ref and the global tick.
         expect(getNodeRevisionRef(node.id).value).toBeGreaterThan(revBefore)
-        expect(pricingRevision.value).toBe(tickBefore)
+        expect(pricingRevision.value).toBeGreaterThan(tickBefore)
       } finally {
         LiteGraph.vueNodesMode = false
       }

src/composables/node/useNodePricing.ts

@@ -509,10 +509,8 @@ const scheduleEvaluation = (
       if (LiteGraph.vueNodesMode) {
         // VueNodes mode: bump per-node revision (only this node re-renders)
         getNodeRevisionRef(node.id).value++
-      } else {
-        // Nodes 1.0 mode: bump global tick to trigger setDirtyCanvas
-        pricingTick.value++
       }
+      pricingTick.value++
     })
 
   inflight.set(node, { sig, promise })

src/composables/node/usePriceBadge.ts

@@ -18,6 +18,15 @@ export const usePriceBadge = () => {
     } else {
       node.badges.push(...newBadges)
     }
+    const graph = node.graph
+    if (!graph) return
+    graph.trigger('node:property:changed', {
+      type: 'node:property:changed',
+      nodeId: node.id,
+      property: 'badges',
+      oldValue: node.badges,
+      newValue: node.badges
+    })
   }
   function collectCreditsBadges(
     graph: LGraph,

src/composables/useFeatureFlags.ts

@@ -2,6 +2,7 @@ import { computed, reactive, readonly } from 'vue'
 
 import { isCloud, isNightly } from '@/platform/distribution/types'
 import {
+  cachedTeamWorkspacesEnabled,
   isAuthenticatedConfigLoaded,
   remoteConfig
 } from '@/platform/remoteConfig/remoteConfig'
@@ -107,7 +108,8 @@ export function useFeatureFlags() {
       if (override !== undefined) return override
 
       if (!isCloud) return false
-      if (!isAuthenticatedConfigLoaded.value) return false
+      if (!isAuthenticatedConfigLoaded.value)
+        return cachedTeamWorkspacesEnabled.value ?? false
 
       return (
         remoteConfig.value.team_workspaces_enabled ??

src/extensions/core/cloudSessionCookie.ts

@@ -1,3 +1,4 @@
+import { clearOAuthRequestId } from '@/platform/cloud/oauth/oauthState'
 import { useSessionCookie } from '@/platform/auth/session/useSessionCookie'
 import { useExtensionService } from '@/services/extensionService'
 
@@ -19,6 +20,7 @@ useExtensionService().registerExtension({
   },
 
   onAuthUserLogout: async () => {
+    clearOAuthRequestId()
     const { deleteSession } = useSessionCookie()
     await deleteSession()
   }

src/extensions/core/uploadAudio.test.ts

@@ -0,0 +1,248 @@
+import { fromAny } from '@total-typescript/shoehorn'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ComfyExtension } from '@/types/comfy'
+
+const { mockAddAlert, mockApiURL, mockFetchApi, mockRegisterExtension } =
+  vi.hoisted(() => ({
+    mockAddAlert: vi.fn(),
+    mockApiURL: vi.fn((url: string) => `api:${url}`),
+    mockFetchApi: vi.fn(),
+    mockRegisterExtension: vi.fn()
+  }))
+
+let capturedDragDrop: ((files: File[]) => Promise<File[] | never[]>) | undefined
+let capturedFileSelect:
+  | ((files: File[]) => Promise<File[] | never[]>)
+  | undefined
+let capturedPaste: ((files: File[]) => Promise<File[] | never[]>) | undefined
+
+type AudioUploadWidget = (node: LGraphNode, inputName: string) => unknown
+
+vi.mock('extendable-media-recorder', () => ({
+  MediaRecorder: class MockMediaRecorder {}
+}))
+
+vi.mock('@/composables/node/useNodeDragAndDrop', () => ({
+  useNodeDragAndDrop: (
+    _node: LGraphNode,
+    options: { onDrop: typeof capturedDragDrop }
+  ) => {
+    capturedDragDrop = options.onDrop
+  }
+}))
+
+vi.mock('@/composables/node/useNodeFileInput', () => ({
+  useNodeFileInput: (
+    _node: LGraphNode,
+    options: { onSelect: typeof capturedFileSelect }
+  ) => {
+    capturedFileSelect = options.onSelect
+    return { openFileSelection: vi.fn() }
+  }
+}))
+
+vi.mock('@/composables/node/useNodePaste', () => ({
+  useNodePaste: (
+    _node: LGraphNode,
+    options: { onPaste: typeof capturedPaste }
+  ) => {
+    capturedPaste = options.onPaste
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: () => ({ addAlert: mockAddAlert })
+}))
+
+vi.mock('@/renderer/extensions/vueNodes/widgets/utils/audioUtils', () => ({
+  getResourceURL: (subfolder = '', filename = '', type = 'input') =>
+    `/view?filename=${filename}&subfolder=${subfolder}&type=${type}`,
+  splitFilePath: (path: string) => ['', path, 'input']
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    apiURL: mockApiURL,
+    fetchApi: mockFetchApi
+  }
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    registerExtension: mockRegisterExtension,
+    rootGraph: { id: 'root' }
+  }
+}))
+
+vi.mock('@/stores/widgetValueStore', () => ({
+  useWidgetValueStore: () => ({
+    getWidget: vi.fn()
+  })
+}))
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  getNodeByLocatorId: vi.fn()
+}))
+
+vi.mock('@/services/audioService', () => ({
+  useAudioService: () => ({})
+}))
+
+function createFile(name = 'clip.mp3'): File {
+  return new File(['audio'], name, { type: 'audio/mpeg' })
+}
+
+function successResponse(name: string, subfolder?: string) {
+  return {
+    status: 200,
+    json: () => Promise.resolve({ name, subfolder })
+  }
+}
+
+function failResponse(status = 500) {
+  return {
+    status,
+    statusText: 'Server Error'
+  }
+}
+
+function createAudioNode() {
+  const audioWidget = {
+    name: 'audio',
+    value: 'previous.mp3',
+    options: { values: ['previous.mp3'] },
+    callback: vi.fn()
+  }
+  const audioUIWidget = {
+    name: 'audioUI',
+    element: document.createElement('audio'),
+    value: '',
+    callback: vi.fn()
+  }
+  const uploadWidget = { label: '', serialize: true, canvasOnly: false }
+  const node = fromAny<LGraphNode, unknown>({
+    widgets: [audioWidget, audioUIWidget],
+    isUploading: false,
+    graph: { setDirtyCanvas: vi.fn() },
+    addWidget: vi.fn(() => uploadWidget),
+    onWidgetChanged: vi.fn()
+  })
+
+  return { audioUIWidget, audioWidget, node, uploadWidget }
+}
+
+async function loadAudioUploadWidget() {
+  vi.resetModules()
+  mockRegisterExtension.mockClear()
+  await import('./uploadAudio')
+  const extension = mockRegisterExtension.mock.calls
+    .map(([extension]) => extension as ComfyExtension)
+    .find((extension) => extension.name === 'Comfy.UploadAudio')
+  if (!extension)
+    throw new Error('Comfy.UploadAudio extension was not registered')
+  const widgets = await extension.getCustomWidgets!(fromAny({}))
+  return (widgets as Record<string, AudioUploadWidget>).AUDIOUPLOAD
+}
+
+describe('Comfy.UploadAudio AUDIOUPLOAD widget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedDragDrop = undefined
+    capturedFileSelect = undefined
+    capturedPaste = undefined
+  })
+
+  it('sets isUploading while upload is in progress and clears it after success', async () => {
+    const AUDIOUPLOAD = await loadAudioUploadWidget()
+    const { audioWidget, node } = createAudioNode()
+    AUDIOUPLOAD(node, 'upload')
+
+    let resolveUpload: (response: ReturnType<typeof successResponse>) => void
+    mockFetchApi.mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveUpload = resolve
+      })
+    )
+
+    const upload = capturedDragDrop!([createFile()])
+
+    expect(node.isUploading).toBe(true)
+    expect(audioWidget.value).toBe('clip.mp3')
+
+    resolveUpload!(successResponse('uploaded.mp3', 'pasted'))
+    await upload
+
+    expect(node.isUploading).toBe(false)
+    expect(audioWidget.value).toBe('pasted/uploaded.mp3')
+    expect(audioWidget.options.values).toContain('pasted/uploaded.mp3')
+    expect(node.onWidgetChanged).toHaveBeenCalledWith(
+      'audio',
+      'pasted/uploaded.mp3',
+      'clip.mp3',
+      audioWidget
+    )
+    expect(node.graph?.setDirtyCanvas).toHaveBeenCalledWith(true)
+  })
+
+  it('rejects concurrent audio uploads without starting another request', async () => {
+    const AUDIOUPLOAD = await loadAudioUploadWidget()
+    const { node } = createAudioNode()
+    AUDIOUPLOAD(node, 'upload')
+    node.isUploading = true
+
+    const result = await capturedDragDrop!([createFile()])
+
+    expect(result).toEqual([])
+    expect(mockAddAlert).toHaveBeenCalledWith('g.uploadAlreadyInProgress')
+    expect(mockFetchApi).not.toHaveBeenCalled()
+  })
+
+  it('rolls back the widget value and clears isUploading when upload fails', async () => {
+    const AUDIOUPLOAD = await loadAudioUploadWidget()
+    const { audioWidget, node } = createAudioNode()
+    AUDIOUPLOAD(node, 'upload')
+    mockFetchApi.mockResolvedValueOnce(failResponse())
+
+    await capturedPaste!([createFile()])
+
+    expect(node.isUploading).toBe(false)
+    expect(audioWidget.value).toBe('previous.mp3')
+    expect(mockAddAlert).toHaveBeenCalledWith('500 - Server Error')
+    expect(node.graph?.setDirtyCanvas).toHaveBeenCalledWith(true)
+  })
+
+  it('rolls back the widget value and clears isUploading when upload throws synchronously', async () => {
+    const AUDIOUPLOAD = await loadAudioUploadWidget()
+    const { audioWidget, node } = createAudioNode()
+    AUDIOUPLOAD(node, 'upload')
+    const error = new Error('Upload failed before request promise')
+    mockFetchApi.mockImplementationOnce(() => {
+      throw error
+    })
+
+    await capturedDragDrop!([createFile()])
+
+    expect(node.isUploading).toBe(false)
+    expect(audioWidget.value).toBe('previous.mp3')
+    expect(mockAddAlert).toHaveBeenCalledWith(error)
+    expect(node.graph?.setDirtyCanvas).toHaveBeenCalledWith(true)
+  })
+
+  it('returns early when no files are provided', async () => {
+    const AUDIOUPLOAD = await loadAudioUploadWidget()
+    const { node } = createAudioNode()
+    AUDIOUPLOAD(node, 'upload')
+
+    const result = await capturedFileSelect!([])
+
+    expect(result).toEqual([])
+    expect(node.isUploading).toBe(false)
+    expect(mockFetchApi).not.toHaveBeenCalled()
+  })
+})

src/extensions/core/uploadAudio.ts

@@ -38,6 +38,7 @@ function updateUIWidget(
 }
 
 async function uploadFile(
+  node: LGraphNode,
   audioWidget: IStringWidget,
   audioUIWidget: DOMWidget<HTMLAudioElement, string>,
   file: File,
@@ -67,6 +68,7 @@ async function uploadFile(
       }
 
       if (updateNode) {
+        const oldValue = audioWidget.value
         updateUIWidget(
           audioUIWidget,
           api.apiURL(getResourceURL(...splitFilePath(path)))
@@ -75,6 +77,7 @@ async function uploadFile(
         audioWidget.value = path
         // Manually trigger the callback to update VueNodes
         audioWidget.callback?.(path)
+        node.onWidgetChanged?.(audioWidget.name, path, oldValue, audioWidget)
       }
       return true
     } else {
@@ -234,10 +237,19 @@ app.registerExtension({
         }
 
         const handleUpload = async (files: File[]) => {
-          if (files?.length) {
-            const previousValue = audioWidget.value
-            audioWidget.value = files[0].name
+          if (!files?.length) return files
+
+          if (node.isUploading) {
+            useToastStore().addAlert(t('g.uploadAlreadyInProgress'))
+            return []
+          }
+
+          node.isUploading = true
+          const previousValue = audioWidget.value
+          audioWidget.value = files[0].name
+          try {
             const success = await uploadFile(
+              node,
               audioWidget,
               audioUIWidget,
               files[0],
@@ -246,6 +258,9 @@ app.registerExtension({
             if (!success) {
               audioWidget.value = previousValue
             }
+          } finally {
+            node.isUploading = false
+            node.graph?.setDirtyCanvas(true)
           }
           return files
         }

src/i18n.test.ts

@@ -1,5 +1,21 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-const { i18n, loadLocale, mergeCustomNodesI18n } = await import('./i18n')
+
+import type * as I18nModule from './i18n'
+
+let i18n: typeof I18nModule.i18n
+let loadLocale: typeof I18nModule.loadLocale
+let mergeCustomNodesI18n: typeof I18nModule.mergeCustomNodesI18n
+let resolveSupportedLocale: typeof I18nModule.resolveSupportedLocale
+let setActiveLocale: typeof I18nModule.setActiveLocale
+
+async function importI18nModule() {
+  const i18nModule = await import('./i18n')
+  i18n = i18nModule.i18n
+  loadLocale = i18nModule.loadLocale
+  mergeCustomNodesI18n = i18nModule.mergeCustomNodesI18n
+  resolveSupportedLocale = i18nModule.resolveSupportedLocale
+  setActiveLocale = i18nModule.setActiveLocale
+}
 
 // Mock the JSON imports before importing i18n module
 vi.mock('./locales/en/main.json', () => ({ default: { welcome: 'Welcome' } }))
@@ -24,6 +40,7 @@ vi.mock('./locales/zh/settings.json', () => ({ default: { theme: '主题' } }))
 describe('i18n', () => {
   beforeEach(async () => {
     vi.resetModules()
+    await importI18nModule()
   })
 
   describe('mergeCustomNodesI18n', () => {
@@ -46,8 +63,6 @@ describe('i18n', () => {
     })
 
     it('should store data for not-yet-loaded locales', async () => {
-      const { i18n, mergeCustomNodesI18n } = await import('./i18n')
-
       // Chinese is not pre-loaded, data should be stored but not merged yet
       mergeCustomNodesI18n({
         zh: {
@@ -148,7 +163,7 @@ describe('i18n', () => {
     it('should handle calling mergeCustomNodesI18n multiple times', async () => {
       // Use fresh module instance to ensure clean state
       vi.resetModules()
-      const { i18n, loadLocale, mergeCustomNodesI18n } = await import('./i18n')
+      await importI18nModule()
 
       mergeCustomNodesI18n({
         zh: { plugin1: { name: '插件1' } }
@@ -175,26 +190,88 @@ describe('i18n', () => {
     it('should not reload already loaded locale', async () => {
       await loadLocale('zh')
       await loadLocale('zh')
-
-      // Should complete without error (second call returns early)
     })
 
-    it('should warn for unsupported locale', async () => {
-      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-      await loadLocale('unsupported-locale')
-
-      expect(consoleSpy).toHaveBeenCalledWith(
-        'Locale "unsupported-locale" is not supported'
+    it('should load shipped BCP-47 variants', async () => {
+      await loadLocale('zh-TW')
+      expect(i18n.global.getLocaleMessage('zh-TW')).toEqual(
+        expect.objectContaining({
+          commands: expect.any(Object),
+          nodeDefs: expect.any(Object),
+          settings: expect.any(Object)
+        })
       )
-      consoleSpy.mockRestore()
     })
 
     it('should handle concurrent load requests for same locale', async () => {
-      // Start multiple loads concurrently
       const promises = [loadLocale('zh'), loadLocale('zh'), loadLocale('zh')]
-
       await Promise.all(promises)
     })
   })
+
+  describe('setActiveLocale', () => {
+    it('clamps unsupported input to en', async () => {
+      expect(await setActiveLocale('de')).toBe('en')
+      expect(i18n.global.locale.value).toBe('en')
+    })
+
+    it('resolves shipped variants and sets the active locale', async () => {
+      expect(await setActiveLocale('pt-BR')).toBe('pt-BR')
+      expect(i18n.global.locale.value).toBe('pt-BR')
+      // pt is not shipped — pt-BR must not be promoted as a base match
+      expect(await setActiveLocale('pt')).toBe('en')
+    })
+
+    it('honors prioritized navigator.languages', async () => {
+      // First preference unsupported, second shipped — should land on French.
+      expect(await setActiveLocale(['de-DE', 'fr-CA', 'en'])).toBe('fr')
+    })
+  })
+
+  describe('resolveSupportedLocale', () => {
+    it('returns the canonical tag when the input is shipped', () => {
+      expect(resolveSupportedLocale('en')).toBe('en')
+      expect(resolveSupportedLocale('ja')).toBe('ja')
+      expect(resolveSupportedLocale('zh-TW')).toBe('zh-TW')
+      expect(resolveSupportedLocale('pt-BR')).toBe('pt-BR')
+    })
+
+    it('matches case-insensitively per BCP-47 and returns canonical casing', () => {
+      // Older browsers / OS configs may emit lowercase region tags.
+      expect(resolveSupportedLocale('pt-br')).toBe('pt-BR')
+      expect(resolveSupportedLocale('PT-BR')).toBe('pt-BR')
+      expect(resolveSupportedLocale('zh-tw')).toBe('zh-TW')
+      expect(resolveSupportedLocale('ZH-TW')).toBe('zh-TW')
+      expect(resolveSupportedLocale('EN')).toBe('en')
+    })
+
+    it('falls back to the base tag when the full tag is unshipped', () => {
+      // de-DE → de (unshipped) → en
+      expect(resolveSupportedLocale('de-DE')).toBe('en')
+      // fr-CA → fr (shipped) → fr
+      expect(resolveSupportedLocale('fr-CA')).toBe('fr')
+      // ko-KR → ko (shipped) → ko
+      expect(resolveSupportedLocale('ko-KR')).toBe('ko')
+      // zh-CN → zh (shipped) → zh (Simplified is the base)
+      expect(resolveSupportedLocale('zh-CN')).toBe('zh')
+    })
+
+    it('falls back to en for unsupported and missing inputs', () => {
+      expect(resolveSupportedLocale('de')).toBe('en')
+      expect(resolveSupportedLocale('it')).toBe('en')
+      expect(resolveSupportedLocale('nl')).toBe('en')
+      expect(resolveSupportedLocale('xx-YY')).toBe('en')
+      expect(resolveSupportedLocale('')).toBe('en')
+      expect(resolveSupportedLocale(undefined)).toBe('en')
+      expect(resolveSupportedLocale(null)).toBe('en')
+    })
+
+    it('walks a prioritized array per RFC 4647 lookup order', () => {
+      // First shipped match wins (de unshipped → fr shipped → fr).
+      expect(resolveSupportedLocale(['de-DE', 'fr-CA', 'en'])).toBe('fr')
+      // Empty / all-unshipped arrays fall back to en.
+      expect(resolveSupportedLocale([])).toBe('en')
+      expect(resolveSupportedLocale(['de', 'it'])).toBe('en')
+    })
+  })
 })

src/i18n.ts

@@ -1,7 +1,11 @@
 import { createI18n } from 'vue-i18n'
 
-// ESLint cannot statically resolve dynamic imports with relative paths in template strings,
-// but these are valid ES module imports that Vite processes correctly at build time.
+import {
+  getDefaultLocale,
+  localeDefinitions,
+  resolveSupportedLocale
+} from '@/locales/localeConfig'
+import type { SupportedLocale } from '@/locales/localeConfig'
 
 // Import only English locale eagerly as the default/fallback
 import enCommands from './locales/en/commands.json' with { type: 'json' }
@@ -9,6 +13,8 @@ import en from './locales/en/main.json' with { type: 'json' }
 import enNodes from './locales/en/nodeDefs.json' with { type: 'json' }
 import enSettings from './locales/en/settings.json' with { type: 'json' }
 
+export { resolveSupportedLocale }
+
 function buildLocale<
   M extends Record<string, unknown>,
   N extends Record<string, unknown>,
@@ -23,75 +29,6 @@ function buildLocale<
   } as M & { nodeDefs: N; commands: C; settings: S }
 }
 
-// Locale loader map - dynamically import locales only when needed
-const localeLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('./locales/ar/main.json'),
-  es: () => import('./locales/es/main.json'),
-  fa: () => import('./locales/fa/main.json'),
-  fr: () => import('./locales/fr/main.json'),
-  ja: () => import('./locales/ja/main.json'),
-  ko: () => import('./locales/ko/main.json'),
-  ru: () => import('./locales/ru/main.json'),
-  tr: () => import('./locales/tr/main.json'),
-  zh: () => import('./locales/zh/main.json'),
-  'zh-TW': () => import('./locales/zh-TW/main.json'),
-  'pt-BR': () => import('./locales/pt-BR/main.json')
-}
-
-const nodeDefsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('./locales/ar/nodeDefs.json'),
-  es: () => import('./locales/es/nodeDefs.json'),
-  fa: () => import('./locales/fa/nodeDefs.json'),
-  fr: () => import('./locales/fr/nodeDefs.json'),
-  ja: () => import('./locales/ja/nodeDefs.json'),
-  ko: () => import('./locales/ko/nodeDefs.json'),
-  ru: () => import('./locales/ru/nodeDefs.json'),
-  tr: () => import('./locales/tr/nodeDefs.json'),
-  zh: () => import('./locales/zh/nodeDefs.json'),
-  'zh-TW': () => import('./locales/zh-TW/nodeDefs.json'),
-  'pt-BR': () => import('./locales/pt-BR/nodeDefs.json')
-}
-
-const commandsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('./locales/ar/commands.json'),
-  es: () => import('./locales/es/commands.json'),
-  fa: () => import('./locales/fa/commands.json'),
-  fr: () => import('./locales/fr/commands.json'),
-  ja: () => import('./locales/ja/commands.json'),
-  ko: () => import('./locales/ko/commands.json'),
-  ru: () => import('./locales/ru/commands.json'),
-  tr: () => import('./locales/tr/commands.json'),
-  zh: () => import('./locales/zh/commands.json'),
-  'zh-TW': () => import('./locales/zh-TW/commands.json'),
-  'pt-BR': () => import('./locales/pt-BR/commands.json')
-}
-
-const settingsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('./locales/ar/settings.json'),
-  es: () => import('./locales/es/settings.json'),
-  fa: () => import('./locales/fa/settings.json'),
-  fr: () => import('./locales/fr/settings.json'),
-  ja: () => import('./locales/ja/settings.json'),
-  ko: () => import('./locales/ko/settings.json'),
-  ru: () => import('./locales/ru/settings.json'),
-  tr: () => import('./locales/tr/settings.json'),
-  zh: () => import('./locales/zh/settings.json'),
-  'zh-TW': () => import('./locales/zh-TW/settings.json'),
-  'pt-BR': () => import('./locales/pt-BR/settings.json')
-}
-
 // Track which locales have been loaded
 const loadedLocales = new Set<string>(['en'])
 
@@ -102,37 +39,33 @@ const loadingLocales = new Map<string, Promise<void>>()
 const customNodesI18nData: Record<string, unknown> = {}
 
 /**
- * Dynamically load a locale and its associated files (nodeDefs, commands, settings)
+ * Dynamically load a shipped locale's bundles (nodeDefs, commands, settings).
+ * Callers must pre-resolve untrusted input via `resolveSupportedLocale` or
+ * `setActiveLocale`, which is the boundary helper for arbitrary input.
  */
-export async function loadLocale(locale: string): Promise<void> {
+export async function loadLocale(locale: SupportedLocale): Promise<void> {
   if (loadedLocales.has(locale)) {
     return
   }
 
-  // If already loading, return the existing promise to prevent duplicate loads
   const existingLoad = loadingLocales.get(locale)
   if (existingLoad) {
-    return existingLoad
-  }
-
-  const loader = localeLoaders[locale]
-  const nodeDefsLoader = nodeDefsLoaders[locale]
-  const commandsLoader = commandsLoaders[locale]
-  const settingsLoader = settingsLoaders[locale]
-
-  if (!loader || !nodeDefsLoader || !commandsLoader || !settingsLoader) {
-    console.warn(`Locale "${locale}" is not supported`)
+    await existingLoad
+    return
+  }
+
+  const loaders = localeDefinitions[locale].loaders
+  if (!loaders) {
     return
   }
 
-  // Create and track the loading promise
   const loadPromise = (async () => {
     try {
       const [main, nodes, commands, settings] = await Promise.all([
-        loader(),
-        nodeDefsLoader(),
-        commandsLoader(),
-        settingsLoader()
+        loaders.main(),
+        loaders.nodeDefs(),
+        loaders.commands(),
+        loaders.settings()
       ])
 
       const messages = buildLocale(
@@ -152,13 +85,33 @@ export async function loadLocale(locale: string): Promise<void> {
       console.error(`Failed to load locale "${locale}":`, error)
       throw error
     } finally {
-      // Clean up the loading promise once complete
       loadingLocales.delete(locale)
     }
   })()
 
   loadingLocales.set(locale, loadPromise)
-  return loadPromise
+  await loadPromise
+}
+
+/**
+ * Boundary helper for arbitrary locale input (settings, browser preferences):
+ * resolves to a shipped tag, loads it, and updates the active locale.
+ *
+ * Returns the resolved tag so callers can detect a clamp (e.g. a stale stored
+ * `Comfy.Locale` from an older build) and self-heal persisted state.
+ */
+export async function setActiveLocale(
+  input: string | readonly string[] | null | undefined
+): Promise<SupportedLocale> {
+  const resolved = resolveSupportedLocale(input)
+  if (typeof input === 'string' && input && input !== resolved) {
+    // Single warn — gated on a real clamp event, never per missing key — so
+    // stale stored locales surface in logs without re-introducing #1867's spam.
+    console.warn(`Locale "${input}" not shipped; using "${resolved}"`)
+  }
+  await loadLocale(resolved)
+  i18n.global.locale.value = resolved
+  return resolved
 }
 
 /**
@@ -179,18 +132,18 @@ export function mergeCustomNodesI18n(i18nData: Record<string, unknown>): void {
   }
 }
 
-// Only include English in the initial bundle
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings)
-}
+// Only include English in the initial bundle; other locales lazy-load.
+const enMessages = buildLocale(en, enNodes, enCommands, enSettings)
+type LocaleMessages = typeof enMessages
 
-// Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof messages.en
+const messages: Partial<Record<SupportedLocale, LocaleMessages>> = {
+  en: enMessages
+}
 
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2
   legacy: false,
-  locale: navigator.language.split('-')[0] || 'en',
+  locale: getDefaultLocale(),
   fallbackLocale: 'en',
   escapeParameter: true,
   messages,
@@ -202,6 +155,7 @@ export const i18n = createI18n({
 
 /** Convenience shorthand: i18n.global */
 export const { t, te, d } = i18n.global
+const { tm } = i18n.global
 
 /**
  * Safe translation function that returns the fallback message if the key is not found.
@@ -213,3 +167,17 @@ export function st(key: string, fallbackMessage: string) {
   // The normal defaultMsg overload fails in some cases for custom nodes
   return te(key) ? t(key) : fallbackMessage
 }
+
+/**
+ * Safe raw translation function for strings that may contain i18n syntax.
+ *
+ * @param key - The key for the raw locale message.
+ * @param fallbackMessage - The fallback message to use if the key is not found
+ * or the locale message is not a string.
+ */
+export function stRaw(key: string, fallbackMessage: string) {
+  if (!te(key)) return fallbackMessage
+
+  const message = tm(key)
+  return typeof message === 'string' ? message : fallbackMessage
+}

src/lib/litegraph/src/LGraphCanvas.ts

@@ -3,6 +3,7 @@ import { toValue } from 'vue'
 
 import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants'
 import { MovingInputLink } from '@/lib/litegraph/src/canvas/MovingInputLink'
+import type { RenderLink } from '@/lib/litegraph/src/canvas/RenderLink'
 import { AutoPanController } from '@/renderer/core/canvas/useAutoPan'
 import { LitegraphLinkAdapter } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
 import type { LinkRenderContext } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
@@ -3294,11 +3295,15 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         if (result != null) this.dirty_canvas = result
       }
     }
+    const firstLink: RenderLink | undefined = linkConnector.renderLinks.at(0)
+    const isSubgraphIOLink =
+      linkConnector.isConnecting && firstLink?.isIoNodeLink
 
     // get node over
-    const node = LiteGraph.vueNodesMode
-      ? null
-      : graph.getNodeOnPos(x, y, this.visible_nodes)
+    const node =
+      LiteGraph.vueNodesMode && !isSubgraphIOLink
+        ? null
+        : graph.getNodeOnPos(x, y, this.visible_nodes)
 
     const dragRect = this.dragging_rectangle
     if (dragRect) {
@@ -3389,8 +3394,6 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 
           // Check if link is over anything it could connect to - record position of valid target for snap / highlight
           if (linkConnector.isConnecting) {
-            const firstLink = linkConnector.renderLinks.at(0)
-
             // Default: nothing highlighted
             let highlightPos: Point | undefined
             let highlightInput: INodeInputSlot | undefined
@@ -3441,7 +3444,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
                   highlightInput = node.inputs[inputId]
                 }
 
-                if (highlightInput) {
+                if (highlightInput && !LiteGraph.vueNodesMode) {
                   const widget = node.getWidgetFromSlot(highlightInput)
                   if (widget) linkConnector.overWidget = widget
                 }

src/lib/litegraph/src/canvas/RenderLink.ts

@@ -43,6 +43,8 @@ export interface RenderLink {
   /** The reroute that the link is being connected from. */
   readonly fromReroute?: Reroute
 
+  readonly isIoNodeLink?: boolean
+
   /**
    * Capability checks used for hit-testing and validation during drag.
    * Implementations should return `false` when a connection is not possible

src/lib/litegraph/src/canvas/ToInputFromIoNodeLink.ts

@@ -24,6 +24,7 @@ export class ToInputFromIoNodeLink implements RenderLink {
   readonly fromPos: Point
   fromDirection: LinkDirection = LinkDirection.RIGHT
   readonly existingLink?: LLink
+  readonly isIoNodeLink = true
 
   constructor(
     readonly network: LinkNetwork,

src/lib/litegraph/src/canvas/ToOutputFromIoNodeLink.ts

@@ -23,6 +23,7 @@ export class ToOutputFromIoNodeLink implements RenderLink {
   readonly fromPos: Point
   readonly fromSlotIndex: SlotIndex
   fromDirection: LinkDirection = LinkDirection.LEFT
+  readonly isIoNodeLink = true
 
   constructor(
     readonly network: LinkNetwork,

src/lib/litegraph/src/subgraph/SubgraphInput.ts

@@ -136,6 +136,13 @@ export class SubgraphInput extends SubgraphSlot {
     }
     subgraph.incrementVersion()
 
+    subgraph.trigger('node:slot-links:changed', {
+      nodeId: node.id,
+      slotType: NodeSlotType.INPUT,
+      slotIndex: inputIndex,
+      connected: true,
+      linkId: link.id
+    })
     node.onConnectionsChange?.(NodeSlotType.INPUT, inputIndex, true, link, slot)
 
     subgraph.afterChange()
@@ -239,11 +246,8 @@ export class SubgraphInput extends SubgraphSlot {
   override isValidTarget(
     fromSlot: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput
   ): boolean {
-    if (isNodeSlot(fromSlot)) {
-      return (
-        'link' in fromSlot &&
-        LiteGraph.isValidConnection(this.type, fromSlot.type)
-      )
+    if (isNodeSlot(fromSlot) && 'link' in fromSlot) {
+      return LiteGraph.isValidConnection(this.type, fromSlot.type)
     }
 
     if (isSubgraphOutput(fromSlot)) {

src/lib/litegraph/src/subgraph/SubgraphInputNode.ts

@@ -226,6 +226,13 @@ export class SubgraphInputNode
         link,
         subgraphInput
       )
+      subgraph.trigger('node:slot-links:changed', {
+        nodeId: node.id,
+        slotType: NodeSlotType.INPUT,
+        slotIndex: slotIndex,
+        connected: false,
+        linkId: link.id
+      })
     }
   }
 

src/lib/litegraph/src/subgraph/SubgraphOutput.ts

@@ -140,11 +140,8 @@ export class SubgraphOutput extends SubgraphSlot {
   override isValidTarget(
     fromSlot: INodeInputSlot | INodeOutputSlot | SubgraphInput | SubgraphOutput
   ): boolean {
-    if (isNodeSlot(fromSlot)) {
-      return (
-        'links' in fromSlot &&
-        LiteGraph.isValidConnection(fromSlot.type, this.type)
-      )
+    if (isNodeSlot(fromSlot) && 'links' in fromSlot) {
+      return LiteGraph.isValidConnection(fromSlot.type, this.type)
     }
 
     if (isSubgraphInput(fromSlot)) {

src/locales/CONTRIBUTING.md

@@ -35,47 +35,13 @@ module.exports = defineConfig({
 })
 ```
 
-#### 1.2 Update `src/platform/settings/constants/coreSettings.ts`
+#### 1.2 Update `src/locales/localeConfig.ts`
 
-Add your language to the dropdown options:
+Add your language to the shared runtime locale definition. This feeds the
+settings dropdown, supported-locale resolution, and lazy locale loading:
 
 ```typescript
-{
-  id: 'Comfy.Locale',
-  name: 'Language',
-  type: 'combo',
-  options: [
-    { value: 'en', text: 'English' },
-    { value: 'zh', text: '中文' },
-    { value: 'zh-TW', text: '繁體中文 (台灣)' }, // Add your language here
-    { value: 'ru', text: 'Русский' },
-    { value: 'ja', text: '日本語' },
-    { value: 'ko', text: '한국어' },
-    { value: 'fr', text: 'Français' },
-    { value: 'es', text: 'Español' }
-  ],
-  defaultValue: () => navigator.language.split('-')[0] || 'en'
-},
-```
-
-#### 1.3 Update `src/i18n.ts`
-
-Add imports for your new language files:
-
-```typescript
-// Add these imports (replace zh-TW with your language code)
-import zhTWCommands from './locales/zh-TW/commands.json'
-import zhTW from './locales/zh-TW/main.json'
-import zhTWNodes from './locales/zh-TW/nodeDefs.json'
-import zhTWSettings from './locales/zh-TW/settings.json'
-
-// Add to the messages object
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings),
-  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
-  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings) // Add this line
-  // ... other languages
-}
+'zh-TW': { text: '繁體中文', loaders: loadersFor('zh-TW') }
 ```
 
 ### Step 2: Generate Translation Files
@@ -168,7 +134,7 @@ Each language has 4 translation files:
 
 ### Issue: Language not appearing in dropdown
 
-**Solution**: Check that the language code in `coreSettings.ts` matches your other files exactly
+**Solution**: Check that the language code in `src/locales/localeConfig.ts` matches your other files exactly
 
 ### Issue: Rate limits during local translation
 

src/locales/en/main.json

@@ -979,6 +979,7 @@
       "dirtyCloseTitle": "Save Changes?",
       "dirtyClose": "The files below have been changed.  Would you like to save them before closing?",
       "dirtyCloseHint": "Hold Shift to close without prompt",
+      "dirtyCloseAnyway": "Close anyway",
       "confirmOverwriteTitle": "Overwrite existing file?",
       "confirmOverwrite": "The file below already exists. Would you like to overwrite it?",
       "workflowTreeType": {
@@ -1158,6 +1159,10 @@
     "saveAsTemplate": "Save as template",
     "enterName": "Enter name"
   },
+  "logsTerminal": {
+    "loadError": "Unable to load logs, please ensure you have updated your ComfyUI backend.",
+    "resyncError": "Unable to resync logs after the backend reconnected. Reopen the console to retry."
+  },
   "workflowService": {
     "exportWorkflow": "Export Workflow",
     "enterFilename": "Enter the filename",
@@ -2128,6 +2133,43 @@
     "slots": "Node Slots Error",
     "widgets": "Node Widgets Error"
   },
+  "oauth": {
+    "consent": {
+      "allow": "Continue",
+      "deny": "Cancel",
+      "genericError": "OAuth request failed. Please restart from the client app.",
+      "loading": "Loading authorization request…",
+      "missingRequest": "This authorization request is missing. Please restart from the client app.",
+      "noWorkspaces": "No eligible workspaces are available for this request.",
+      "title": "{client} wants access",
+      "subtitle": "Sign in to {resource} to continue",
+      "resourceFallback": "this app",
+      "workspaceLabel": "Workspace",
+      "permissionsHeader": "Permissions",
+      "workspaceHelp": "Permissions apply to this workspace only.",
+      "redirectNotice": "You'll be redirected to",
+      "appTypeNative": "Native app",
+      "appTypeWeb": "Web app",
+      "errorExpired": "This consent request has expired or has already been used. Please restart from the client app.",
+      "errorScopeBroadening": "The previously approved permissions don't cover this request. You'll need to re-authorize with the new permissions.",
+      "errorUnavailable": "This feature isn't available right now. Please contact support if the problem persists.",
+      "sessionError": "Failed to establish session. Please try again.",
+      "sessionErrorToastSummary": "Couldn't continue OAuth sign-in"
+    },
+    "scopes": {
+      "mcp:tools:read": {
+        "label": "View available workflow tools"
+      },
+      "mcp:tools:call": {
+        "label": "Run workflows on your behalf"
+      }
+    },
+    "workspace": {
+      "personal": "Personal",
+      "owner": "Owner",
+      "member": "Member"
+    }
+  },
   "auth": {
     "apiKey": {
       "title": "API Key",
@@ -2210,7 +2252,9 @@
       "success": "Signed out successfully",
       "successDetail": "You have been signed out of your account.",
       "unsavedChangesTitle": "Unsaved Changes",
-      "unsavedChangesMessage": "You have unsaved changes that will be lost when you sign out. Do you want to continue?"
+      "unsavedChangesMessage": "You have unsaved changes that will be lost when you sign out. Do you want to continue?",
+      "signOutAnyway": "Sign out anyway",
+      "saveFailed": "Sign-out cancelled because saving \"{workflow}\" failed."
     },
     "passwordUpdate": {
       "success": "Password Updated",
@@ -3214,6 +3258,7 @@
     "copyAssetsAndOpen": "Import assets & open workflow",
     "openWorkflow": "Open workflow",
     "openWithoutImporting": "Open without importing",
+    "opening": "Opening shared workflow...",
     "importFailed": "Failed to import workflow assets",
     "loadError": "Could not load this shared workflow. Please try again later."
   },

src/locales/localeConfig.ts

@@ -0,0 +1,82 @@
+type LocaleJsonLoader = () => Promise<{
+  default: Record<string, unknown>
+}>
+
+type LocaleLoaderBundle = {
+  main: LocaleJsonLoader
+  nodeDefs: LocaleJsonLoader
+  commands: LocaleJsonLoader
+  settings: LocaleJsonLoader
+}
+
+type LocaleDefinition = {
+  text: string
+  loaders: LocaleLoaderBundle | null
+}
+
+// Vite code-splits each matched module into its own async chunk; only the
+// resolved locale's bundle is fetched at runtime.
+const localeFiles = import.meta.glob<{ default: Record<string, unknown> }>(
+  './*/{main,nodeDefs,commands,settings}.json'
+)
+
+function loadersFor(locale: string): LocaleLoaderBundle {
+  return {
+    main: localeFiles[`./${locale}/main.json`],
+    nodeDefs: localeFiles[`./${locale}/nodeDefs.json`],
+    commands: localeFiles[`./${locale}/commands.json`],
+    settings: localeFiles[`./${locale}/settings.json`]
+  }
+}
+
+export const localeDefinitions = {
+  en: { text: 'English', loaders: null },
+  zh: { text: '中文', loaders: loadersFor('zh') },
+  'zh-TW': { text: '繁體中文', loaders: loadersFor('zh-TW') },
+  ru: { text: 'Русский', loaders: loadersFor('ru') },
+  ja: { text: '日本語', loaders: loadersFor('ja') },
+  ko: { text: '한국어', loaders: loadersFor('ko') },
+  fr: { text: 'Français', loaders: loadersFor('fr') },
+  es: { text: 'Español', loaders: loadersFor('es') },
+  ar: { text: 'عربي', loaders: loadersFor('ar') },
+  tr: { text: 'Türkçe', loaders: loadersFor('tr') },
+  'pt-BR': { text: 'Português (BR)', loaders: loadersFor('pt-BR') },
+  fa: { text: 'فارسی', loaders: loadersFor('fa') }
+} as const satisfies Record<string, LocaleDefinition>
+
+export type SupportedLocale = keyof typeof localeDefinitions
+
+const SUPPORTED_LOCALES = Object.keys(localeDefinitions) as SupportedLocale[]
+
+export const SUPPORTED_LOCALE_OPTIONS = SUPPORTED_LOCALES.map((value) => ({
+  value,
+  text: localeDefinitions[value].text
+}))
+
+const supportedLocaleByLower = new Map<string, SupportedLocale>(
+  SUPPORTED_LOCALES.map((locale) => [locale.toLowerCase(), locale])
+)
+
+function matchSingle(candidate: string): SupportedLocale | undefined {
+  const normalized = candidate.toLowerCase()
+  return (
+    supportedLocaleByLower.get(normalized) ??
+    supportedLocaleByLower.get(normalized.split('-')[0])
+  )
+}
+
+export function resolveSupportedLocale(
+  input?: string | readonly string[] | null
+): SupportedLocale {
+  const candidates = Array.isArray(input) ? input : input ? [input] : []
+  for (const candidate of candidates) {
+    if (!candidate) continue
+    const matched = matchSingle(candidate)
+    if (matched) return matched
+  }
+  return 'en'
+}
+
+export function getDefaultLocale(): SupportedLocale {
+  return resolveSupportedLocale(navigator.languages)
+}

src/platform/assets/composables/media/useFlatOutputAssets.ts

@@ -0,0 +1,27 @@
+import { storeToRefs } from 'pinia'
+
+import { useAssetsStore } from '@/stores/assetsStore'
+
+import type { IAssetsProvider } from './IAssetsProvider'
+
+export function useFlatOutputAssets(): IAssetsProvider {
+  const store = useAssetsStore()
+  const {
+    flatOutputAssets,
+    flatOutputLoading,
+    flatOutputError,
+    flatOutputHasMore,
+    flatOutputIsLoadingMore
+  } = storeToRefs(store)
+
+  return {
+    media: flatOutputAssets,
+    loading: flatOutputLoading,
+    error: flatOutputError,
+    fetchMediaList: store.updateFlatOutputs,
+    refresh: store.updateFlatOutputs,
+    loadMore: store.loadMoreFlatOutputs,
+    hasMore: flatOutputHasMore,
+    isLoadingMore: flatOutputIsLoadingMore
+  }
+}

src/platform/assets/composables/useMediaAssetActions.test.ts

@@ -167,6 +167,52 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
+const mockAppGraph = vi.hoisted(() => ({ value: { _nodes: [] as unknown[] } }))
+vi.mock('@/scripts/app', () => ({
+  app: {
+    get graph() {
+      return mockAppGraph.value
+    },
+    get rootGraph() {
+      return mockAppGraph.value
+    }
+  }
+}))
+
+const mockRemoveNodeOutputs = vi.hoisted(() => vi.fn())
+const mockRemoveNodeOutputsForNode = vi.hoisted(() => vi.fn())
+vi.mock('@/stores/nodeOutputStore', () => ({
+  useNodeOutputStore: () => ({
+    removeNodeOutputs: mockRemoveNodeOutputs,
+    removeNodeOutputsForNode: mockRemoveNodeOutputsForNode
+  })
+}))
+
+const mockCaptureCanvasState = vi.hoisted(() => vi.fn())
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({
+    activeWorkflow: {
+      changeTracker: { captureCanvasState: mockCaptureCanvasState }
+    }
+  })
+}))
+
+const mockClearNodePreviewCache = vi.hoisted(() => vi.fn())
+vi.mock('../utils/clearNodePreviewCacheForValues', () => ({
+  clearNodePreviewCacheForValues: mockClearNodePreviewCache,
+  findNodesReferencingValues: vi.fn(() => [])
+}))
+
+const mockClearWidgetValues = vi.hoisted(() => vi.fn())
+vi.mock('../utils/clearDeletedAssetWidgetValues', () => ({
+  clearDeletedAssetWidgetValues: mockClearWidgetValues
+}))
+
+const mockMarkMissingMedia = vi.hoisted(() => vi.fn())
+vi.mock('../utils/markDeletedAssetsAsMissingMedia', () => ({
+  markDeletedAssetsAsMissingMedia: mockMarkMissingMedia
+}))
+
 function createMockAsset(overrides: Partial<AssetItem> = {}): AssetItem {
   return {
     id: 'test-asset-id',
@@ -793,4 +839,120 @@ describe('useMediaAssetActions', () => {
       expect(dialogProps.itemList).toEqual(['fallback-image.png'])
     })
   })
+
+  describe('deleteAssets — FE-230 preview cache clearing', () => {
+    beforeEach(() => {
+      mockIsCloud.value = true
+      mockGetAssetType.mockReturnValue('input')
+      mockDeleteAsset.mockReset()
+      mockShowDialog.mockImplementation(
+        (opts: {
+          props: {
+            onConfirm: () => Promise<void> | void
+          }
+        }) => {
+          void opts.props.onConfirm()
+        }
+      )
+      mockAppGraph.value = { _nodes: [] }
+    })
+
+    it('invokes clearNodePreviewCacheForValues with canonical widget-value variants', async () => {
+      mockDeleteAsset.mockResolvedValue(undefined)
+      const actions = useMediaAssetActions()
+      const asset = createMockAsset({
+        id: 'asset-match',
+        name: 'foo.png',
+        asset_hash: 'abc123.png',
+        tags: ['input']
+      })
+
+      await actions.deleteAssets(asset)
+
+      await vi.waitFor(() => {
+        expect(mockClearNodePreviewCache).toHaveBeenCalledTimes(1)
+      })
+      const [graphArg, valuesArg, removeArg] =
+        mockClearNodePreviewCache.mock.calls[0]
+      expect(graphArg).toBe(mockAppGraph.value)
+      expect(valuesArg).toEqual(
+        new Set(['foo.png', 'foo.png [input]', 'abc123.png'])
+      )
+      expect(typeof removeArg).toBe('function')
+
+      const sampleNode = { id: 42 }
+      removeArg(sampleNode)
+      expect(mockRemoveNodeOutputsForNode).toHaveBeenCalledWith(sampleNode)
+      // Locator is resolved from the node's own graph, not from the raw id —
+      // covers Load Image / Load Video nodes nested inside subgraphs.
+      expect(mockRemoveNodeOutputs).not.toHaveBeenCalled()
+
+      expect(mockClearWidgetValues).toHaveBeenCalledWith(
+        mockAppGraph.value,
+        new Set(['foo.png', 'foo.png [input]', 'abc123.png'])
+      )
+
+      expect(mockMarkMissingMedia).toHaveBeenCalledWith(
+        mockAppGraph.value,
+        new Set(['foo.png', 'foo.png [input]', 'abc123.png'])
+      )
+
+      // markMissing + previewCache must run before widget-value clearing,
+      // otherwise findNodesReferencingValues sees blanked widgets and matches
+      // nothing.
+      const markOrder = mockMarkMissingMedia.mock.invocationCallOrder[0]
+      const cacheOrder = mockClearNodePreviewCache.mock.invocationCallOrder[0]
+      const clearOrder = mockClearWidgetValues.mock.invocationCallOrder[0]
+      expect(markOrder).toBeLessThan(clearOrder)
+      expect(cacheOrder).toBeLessThan(clearOrder)
+
+      // Programmatic widget mutation doesn't go through DOM events, so the
+      // workflow won't be flagged as modified unless we capture explicitly.
+      expect(mockCaptureCanvasState).toHaveBeenCalled()
+    })
+
+    it('emits the [output]-annotated variant for output assets, including subfolder', async () => {
+      mockDeleteAsset.mockResolvedValue(undefined)
+      mockGetAssetType.mockReturnValue('output')
+      mockGetOutputAssetMetadata.mockReturnValue({
+        subfolder: 'outputs/2025'
+      })
+      const actions = useMediaAssetActions()
+      const asset = createMockAsset({
+        id: 'asset-output',
+        name: 'gen.png',
+        tags: ['output']
+      })
+
+      await actions.deleteAssets(asset)
+
+      await vi.waitFor(() => {
+        expect(mockClearNodePreviewCache).toHaveBeenCalledTimes(1)
+      })
+      const [, valuesArg] = mockClearNodePreviewCache.mock.calls[0]
+      expect(valuesArg).toEqual(new Set(['outputs/2025/gen.png [output]']))
+      expect(valuesArg.has('gen.png')).toBe(false)
+      expect(valuesArg.has('gen.png [input]')).toBe(false)
+    })
+
+    it('omits filenames of failed deletions and skips the helper when nothing was deleted', async () => {
+      mockDeleteAsset.mockRejectedValue(new Error('boom'))
+      const actions = useMediaAssetActions()
+      const asset = createMockAsset({
+        id: 'asset-failed',
+        name: 'failed.png',
+        asset_hash: 'failhash.png'
+      })
+
+      await actions.deleteAssets(asset)
+
+      await vi.waitFor(() => {
+        expect(mockDeleteAsset).toHaveBeenCalled()
+      })
+      expect(mockClearNodePreviewCache).not.toHaveBeenCalled()
+      expect(mockClearWidgetValues).not.toHaveBeenCalled()
+      expect(mockMarkMissingMedia).not.toHaveBeenCalled()
+      expect(mockCaptureCanvasState).not.toHaveBeenCalled()
+    })
+  })
 })

src/platform/assets/composables/useMediaAssetActions.ts

@@ -7,16 +7,22 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { isCloud } from '@/platform/distribution/types'
 import { useWorkflowActionsService } from '@/platform/workflow/core/services/workflowActionsService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { extractWorkflowFromAsset } from '@/platform/workflow/utils/workflowExtractionUtil'
 import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { getOutputAssetMetadata } from '../schemas/assetMetadataSchema'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { getAssetDisplayName } from '../utils/assetMetadataUtils'
 import { getAssetType } from '../utils/assetTypeUtil'
 import { getAssetUrl } from '../utils/assetUrlUtil'
+import { clearDeletedAssetWidgetValues } from '../utils/clearDeletedAssetWidgetValues'
+import { clearNodePreviewCacheForValues } from '../utils/clearNodePreviewCacheForValues'
+import { markDeletedAssetsAsMissingMedia } from '../utils/markDeletedAssetsAsMissingMedia'
 import { getAssetOutputCount } from '../utils/outputAssetUtil'
 import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
 import { detectNodeTypeFromFilename } from '@/utils/loaderNodeUtil'
@@ -30,6 +36,35 @@ import { assetService } from '../services/assetService'
 
 const EXCLUDED_TAGS = new Set(['models', 'input', 'output'])
 
+/**
+ * Canonical widget-value strings that may reference this asset, scoped by the
+ * asset's source type so basenames cannot cross-match across input/output.
+ *
+ * Output assets emit `<name> [output]` (and the subfolder-prefixed form when
+ * present in metadata). Input/temp assets emit the bare name plus the explicit
+ * annotation. `asset_hash` is included whenever present, since cloud-stored
+ * assets can be referenced by hash.
+ */
+function widgetValueVariantsForAsset(asset: AssetItem): string[] {
+  const variants: string[] = []
+  const type = getAssetType(asset, 'input')
+  const name = asset.name
+  if (name) {
+    if (type === 'output') {
+      const subfolder = getOutputAssetMetadata(asset.user_metadata)?.subfolder
+      const path = subfolder ? `${subfolder}/${name}` : name
+      variants.push(`${path} [output]`)
+    } else if (type === 'temp') {
+      variants.push(`${name} [temp]`)
+    } else {
+      variants.push(name)
+      variants.push(`${name} [input]`)
+    }
+  }
+  if (asset.asset_hash) variants.push(asset.asset_hash)
+  return variants
+}
+
 export function useMediaAssetActions() {
   const { t } = useI18n()
   const toast = useToast()
@@ -639,6 +674,31 @@ export function useMediaAssetActions() {
                 await assetsStore.updateInputs()
               }
 
+              const rootGraph = app.rootGraph
+              if (rootGraph) {
+                const deletedValues = new Set<string>()
+                assetArray.forEach((asset, index) => {
+                  if (results[index].status !== 'fulfilled') return
+                  for (const value of widgetValueVariantsForAsset(asset)) {
+                    deletedValues.add(value)
+                  }
+                })
+                if (deletedValues.size > 0) {
+                  const nodeOutputStore = useNodeOutputStore()
+                  // Order matters: mark + cache-clear both look up nodes by
+                  // current widget.value, so they must run before
+                  // clearDeletedAssetWidgetValues blanks those values.
+                  markDeletedAssetsAsMissingMedia(rootGraph, deletedValues)
+                  clearNodePreviewCacheForValues(
+                    rootGraph,
+                    deletedValues,
+                    (node) => nodeOutputStore.removeNodeOutputsForNode(node)
+                  )
+                  clearDeletedAssetWidgetValues(rootGraph, deletedValues)
+                  useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
+                }
+              }
+
               // Invalidate model caches for affected categories
               const modelCategories = new Set<string>()
 

src/platform/assets/schemas/assetSchema.ts

@@ -1,3 +1,4 @@
+import { zListAssetsResponse } from '@comfyorg/ingest-types/zod'
 import { z } from 'zod'
 
 // Zod schemas for asset API validation matching ComfyUI Assets REST API spec
@@ -20,11 +21,11 @@ const zAsset = z.object({
   user_metadata: z.record(z.unknown()).optional() // API allows arbitrary key-value pairs
 })
 
-const zAssetResponse = z.object({
-  assets: z.array(zAsset).optional(),
-  total: z.number().optional(),
-  has_more: z.boolean().optional()
-})
+const zAssetResponse = zListAssetsResponse
+  .pick({ total: true, has_more: true })
+  .extend({
+    assets: z.array(zAsset)
+  })
 
 const zModelFolder = z.object({
   name: z.string(),

src/platform/assets/services/assetService.test.ts

@@ -1,11 +1,12 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import type {
+  AssetItem,
+  AssetResponse
+} from '@/platform/assets/schemas/assetSchema'
 import {
   MISSING_TAG,
-  assetService,
-  isBlake3AssetHash,
-  toBlake3AssetHash
+  assetService
 } from '@/platform/assets/services/assetService'
 import { api } from '@/scripts/api'
 
@@ -49,9 +50,10 @@ vi.mock('@/i18n', () => ({
 
 const fetchApiMock = vi.mocked(api.fetchApi)
 
-const validBlake3Hash =
-  '1111111111111111111111111111111111111111111111111111111111111111'
-const validBlake3AssetHash = `blake3:${validBlake3Hash}`
+type AssetListResponseOptions = {
+  hasMore?: AssetResponse['has_more']
+  total?: AssetResponse['total']
+}
 
 function buildResponse(
   body: unknown,
@@ -64,6 +66,13 @@ function buildResponse(
   } as unknown as Response
 }
 
+function buildAssetListResponse(
+  assets: AssetItem[],
+  { hasMore = false, total = assets.length }: AssetListResponseOptions = {}
+): Response {
+  return buildResponse({ assets, total, has_more: hasMore })
+}
+
 function validAsset(overrides: Partial<AssetItem> = {}): AssetItem {
   return {
     id: 'asset-1',
@@ -189,25 +198,6 @@ describe(assetService.getAssetMetadata, () => {
   })
 })
 
-describe(isBlake3AssetHash, () => {
-  it('accepts only prefixed 64-character blake3 hashes', () => {
-    expect(isBlake3AssetHash(validBlake3AssetHash)).toBe(true)
-    expect(isBlake3AssetHash('BLAKE3:' + validBlake3Hash.toUpperCase())).toBe(
-      true
-    )
-    expect(isBlake3AssetHash('blake3:abc')).toBe(false)
-    expect(isBlake3AssetHash(validBlake3Hash)).toBe(false)
-  })
-})
-
-describe(toBlake3AssetHash, () => {
-  it('normalizes 64-character blake3 hex values to asset hashes', () => {
-    expect(toBlake3AssetHash(validBlake3Hash)).toBe(validBlake3AssetHash)
-    expect(toBlake3AssetHash('abc')).toBeNull()
-    expect(toBlake3AssetHash(undefined)).toBeNull()
-  })
-})
-
 describe(assetService.uploadAssetFromUrl, () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -218,7 +208,7 @@ describe(assetService.uploadAssetFromUrl, () => {
     const staleAssets = [validAsset({ id: 'stale-input', tags: ['input'] })]
     const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
       .mockResolvedValueOnce(buildResponse({ id: 'missing-name' }))
 
     await assetService.getInputAssetsIncludingPublic()
@@ -240,7 +230,7 @@ describe(assetService.uploadAssetFromUrl, () => {
     const staleAssets = [validAsset({ id: 'stale-input', tags: ['input'] })]
     const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
       .mockResolvedValueOnce(
         buildResponse(validAsset({ id: 'uploaded-input', tags: ['input'] }))
       )
@@ -301,7 +291,7 @@ describe(assetService.uploadAssetFromBase64, () => {
       .spyOn(globalThis, 'fetch')
       .mockResolvedValueOnce(new Response('hello'))
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
       .mockResolvedValueOnce(buildResponse({ id: 'missing-name' }))
 
     await assetService.getInputAssetsIncludingPublic()
@@ -327,7 +317,7 @@ describe(assetService.uploadAssetFromBase64, () => {
       .spyOn(globalThis, 'fetch')
       .mockResolvedValueOnce(new Response('hello'))
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
       .mockResolvedValueOnce(
         buildResponse({
           ...validAsset({ id: 'uploaded-input', tags: ['input'] }),
@@ -421,17 +411,14 @@ describe(assetService.getAssetModelFolders, () => {
     vi.clearAllMocks()
   })
 
-  it('filters out missing-tagged assets and blacklisted directories, returning alphabetical unique folders without include_public', async () => {
+  it('requests missing-tag exclusion and returns alphabetical unique folders without include_public', async () => {
     fetchApiMock.mockResolvedValueOnce(
-      buildResponse({
-        assets: [
-          validAsset({ id: 'a', tags: ['models', 'loras'] }),
-          validAsset({ id: 'b', tags: ['models', 'checkpoints'] }),
-          validAsset({ id: 'c', tags: ['models', 'configs'] }),
-          validAsset({ id: 'd', tags: ['models', 'missing', 'controlnet'] }),
-          validAsset({ id: 'e', tags: ['models', 'loras'] })
-        ]
-      })
+      buildAssetListResponse([
+        validAsset({ id: 'a', tags: ['models', 'loras'] }),
+        validAsset({ id: 'b', tags: ['models', 'checkpoints'] }),
+        validAsset({ id: 'c', tags: ['models', 'configs'] }),
+        validAsset({ id: 'e', tags: ['models', 'loras'] })
+      ])
     )
 
     const folders = await assetService.getAssetModelFolders()
@@ -444,6 +431,7 @@ describe(assetService.getAssetModelFolders, () => {
     const requestedUrl = fetchApiMock.mock.calls[0]?.[0] as string
     const params = new URL(requestedUrl, 'http://localhost').searchParams
     expect(params.has('include_public')).toBe(false)
+    expect(params.get('exclude_tags')).toBe(MISSING_TAG)
   })
 })
 
@@ -490,14 +478,9 @@ describe(assetService.getAssetsByTag, () => {
     vi.clearAllMocks()
   })
 
-  it('forwards include_public=true by default and excludes missing-tagged assets', async () => {
+  it('forwards include_public=true by default and requests missing-tag exclusion', async () => {
     fetchApiMock.mockResolvedValueOnce(
-      buildResponse({
-        assets: [
-          validAsset({ id: 'visible', tags: ['input'] }),
-          validAsset({ id: 'hidden', tags: ['input', 'missing'] })
-        ]
-      })
+      buildAssetListResponse([validAsset({ id: 'visible', tags: ['input'] })])
     )
 
     const assets = await assetService.getAssetsByTag('input')
@@ -507,6 +490,20 @@ describe(assetService.getAssetsByTag, () => {
     const requestedUrl = fetchApiMock.mock.calls[0]?.[0] as string
     const params = new URL(requestedUrl, 'http://localhost').searchParams
     expect(params.get('include_public')).toBe('true')
+    expect(params.get('exclude_tags')).toBe(MISSING_TAG)
+  })
+
+  it('normalizes tag query parameters', async () => {
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([validAsset({ id: 'visible', tags: ['input'] })])
+    )
+
+    await assetService.getAssetsByTag(' input ')
+
+    const requestedUrl = fetchApiMock.mock.calls[0]?.[0] as string
+    const params = new URL(requestedUrl, 'http://localhost').searchParams
+    expect(params.get('include_tags')).toBe('input')
+    expect(params.get('exclude_tags')).toBe(MISSING_TAG)
   })
 })
 
@@ -518,17 +515,16 @@ describe(assetService.getAllAssetsByTag, () => {
   it('paginates tagged asset requests with include_public=true', async () => {
     fetchApiMock
       .mockResolvedValueOnce(
-        buildResponse({
-          assets: [
+        buildAssetListResponse(
+          [
             validAsset({ id: 'a', tags: ['input'] }),
             validAsset({ id: 'b', tags: ['input'] })
-          ]
-        })
+          ],
+          { hasMore: true }
+        )
       )
       .mockResolvedValueOnce(
-        buildResponse({
-          assets: [validAsset({ id: 'c', tags: ['input'] })]
-        })
+        buildAssetListResponse([validAsset({ id: 'c', tags: ['input'] })])
       )
 
     const assets = await assetService.getAllAssetsByTag('input', true, {
@@ -540,63 +536,33 @@ describe(assetService.getAllAssetsByTag, () => {
     const firstUrl = fetchApiMock.mock.calls[0]?.[0] as string
     const firstParams = new URL(firstUrl, 'http://localhost').searchParams
     expect(firstParams.get('include_public')).toBe('true')
+    expect(firstParams.get('exclude_tags')).toBe(MISSING_TAG)
     expect(firstParams.get('limit')).toBe('2')
     expect(firstParams.has('offset')).toBe(false)
 
     const secondUrl = fetchApiMock.mock.calls[1]?.[0] as string
     const secondParams = new URL(secondUrl, 'http://localhost').searchParams
     expect(secondParams.get('include_public')).toBe('true')
+    expect(secondParams.get('exclude_tags')).toBe(MISSING_TAG)
     expect(secondParams.get('limit')).toBe('2')
     expect(secondParams.get('offset')).toBe('2')
   })
 
-  it('paginates from raw response size before filtering missing-tagged assets', async () => {
-    fetchApiMock
-      .mockResolvedValueOnce(
-        buildResponse({
-          assets: [
-            validAsset({ id: 'visible', tags: ['input'] }),
-            validAsset({ id: 'hidden', tags: ['input', MISSING_TAG] })
-          ]
-        })
-      )
-      .mockResolvedValueOnce(
-        buildResponse({
-          assets: [validAsset({ id: 'later-public', tags: ['input'] })]
-        })
-      )
-
-    const assets = await assetService.getAllAssetsByTag('input', true, {
-      limit: 2
-    })
-
-    expect(assets.map((a) => a.id)).toEqual(['visible', 'later-public'])
-    expect(fetchApiMock).toHaveBeenCalledTimes(2)
-
-    const secondUrl = fetchApiMock.mock.calls[1]?.[0]
-    if (typeof secondUrl !== 'string') {
-      throw new Error('Expected a second asset request URL')
-    }
-    const secondParams = new URL(secondUrl, 'http://localhost').searchParams
-    expect(secondParams.get('offset')).toBe('2')
-  })
-
   it('honors has_more when walking tagged asset pages', async () => {
     fetchApiMock
       .mockResolvedValueOnce(
-        buildResponse({
-          assets: [
+        buildAssetListResponse(
+          [
             validAsset({ id: 'first', tags: ['input'] }),
             validAsset({ id: 'second', tags: ['input'] })
           ],
-          has_more: true
-        })
+          { hasMore: true }
+        )
       )
       .mockResolvedValueOnce(
-        buildResponse({
-          assets: [validAsset({ id: 'later-public', tags: ['input'] })],
-          has_more: false
-        })
+        buildAssetListResponse([
+          validAsset({ id: 'later-public', tags: ['input'] })
+        ])
       )
 
     const assets = await assetService.getAllAssetsByTag('input', true, {
@@ -614,12 +580,41 @@ describe(assetService.getAllAssetsByTag, () => {
     expect(secondParams.get('offset')).toBe('2')
   })
 
+  it.each([
+    {
+      name: 'missing has_more',
+      body: {
+        assets: [validAsset({ id: 'a', tags: ['input'] })],
+        total: 1
+      }
+    },
+    {
+      name: 'missing total',
+      body: {
+        assets: [validAsset({ id: 'a', tags: ['input'] })],
+        has_more: false
+      }
+    },
+    {
+      name: 'non-boolean has_more',
+      body: {
+        assets: [validAsset({ id: 'a', tags: ['input'] })],
+        total: 1,
+        has_more: 'false'
+      }
+    }
+  ])('rejects asset responses with $name', async ({ body }) => {
+    fetchApiMock.mockResolvedValueOnce(buildResponse(body))
+
+    await expect(
+      assetService.getAllAssetsByTag('input', true, { limit: 2 })
+    ).rejects.toThrow(/Invalid asset response/)
+  })
+
   it('passes abort signals through paginated requests', async () => {
     const controller = new AbortController()
     fetchApiMock.mockResolvedValueOnce(
-      buildResponse({
-        assets: [validAsset({ id: 'a', tags: ['input'] })]
-      })
+      buildAssetListResponse([validAsset({ id: 'a', tags: ['input'] })])
     )
 
     await assetService.getAllAssetsByTag('input', true, {
@@ -636,12 +631,13 @@ describe(assetService.getAllAssetsByTag, () => {
     const controller = new AbortController()
     fetchApiMock.mockImplementationOnce(async () => {
       controller.abort()
-      return buildResponse({
-        assets: [
+      return buildAssetListResponse(
+        [
           validAsset({ id: 'a', tags: ['input'] }),
           validAsset({ id: 'b', tags: ['input'] })
-        ]
-      })
+        ],
+        { hasMore: true }
+      )
     })
 
     await expect(
@@ -666,7 +662,7 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
       validAsset({ id: 'user-input', tags: ['input'] }),
       validAsset({ id: 'public-input', tags: ['input'], is_immutable: true })
     ]
-    fetchApiMock.mockResolvedValueOnce(buildResponse({ assets }))
+    fetchApiMock.mockResolvedValueOnce(buildAssetListResponse(assets))
 
     const first = await assetService.getInputAssetsIncludingPublic()
     const second = await assetService.getInputAssetsIncludingPublic()
@@ -685,8 +681,8 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
     const staleAssets = [validAsset({ id: 'stale-input', tags: ['input'] })]
     const freshAssets = [validAsset({ id: 'fresh-input', tags: ['input'] })]
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
-      .mockResolvedValueOnce(buildResponse({ assets: freshAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
+      .mockResolvedValueOnce(buildAssetListResponse(freshAssets))
 
     await assetService.getInputAssetsIncludingPublic()
     assetService.invalidateInputAssetsIncludingPublic()
@@ -720,7 +716,7 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
     await expect(first).rejects.toMatchObject({ name: 'AbortError' })
     expect(serviceSignal).toBeUndefined()
 
-    resolveResponse(buildResponse({ assets }))
+    resolveResponse(buildAssetListResponse(assets))
 
     await expect(second).resolves.toEqual(assets)
     expect(fetchApiMock).toHaveBeenCalledOnce()
@@ -750,7 +746,7 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
     await expect(first).rejects.toMatchObject({ name: 'AbortError' })
     await expect(second).rejects.toMatchObject({ name: 'AbortError' })
 
-    resolveResponse(buildResponse({ assets }))
+    resolveResponse(buildAssetListResponse(assets))
     await Promise.resolve()
 
     await expect(assetService.getInputAssetsIncludingPublic()).resolves.toEqual(
@@ -770,12 +766,12 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
             resolveResponse = resolve
           })
       )
-      .mockResolvedValueOnce(buildResponse({ assets: freshAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(freshAssets))
 
     const inFlight = assetService.getInputAssetsIncludingPublic()
     assetService.invalidateInputAssetsIncludingPublic()
 
-    resolveResponse(buildResponse({ assets }))
+    resolveResponse(buildAssetListResponse(assets))
 
     await expect(inFlight).resolves.toEqual(assets)
     await expect(assetService.getInputAssetsIncludingPublic()).resolves.toEqual(
@@ -788,9 +784,9 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
     const staleAssets = [validAsset({ id: 'stale-input', tags: ['input'] })]
     const freshAssets = [validAsset({ id: 'fresh-input', tags: ['input'] })]
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
       .mockResolvedValueOnce(buildResponse(null))
-      .mockResolvedValueOnce(buildResponse({ assets: freshAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(freshAssets))
 
     await assetService.getInputAssetsIncludingPublic()
     await assetService.deleteAsset('stale-input')
@@ -809,9 +805,9 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
     const uploadedAsset = validAsset({ id: 'uploaded-input', tags: ['input'] })
     const freshAssets = [uploadedAsset]
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
       .mockResolvedValueOnce(buildResponse(uploadedAsset))
-      .mockResolvedValueOnce(buildResponse({ assets: freshAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(freshAssets))
 
     await assetService.getInputAssetsIncludingPublic()
     await assetService.uploadAssetAsync({
@@ -827,7 +823,7 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
   it('does not invalidate cached input assets for pending async input uploads', async () => {
     const staleAssets = [validAsset({ id: 'stale-input', tags: ['input'] })]
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
       .mockResolvedValueOnce(
         buildResponse(
           { task_id: 'task-1', status: 'running' },
@@ -849,7 +845,7 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
   it('does not invalidate cached input assets for non-input uploads', async () => {
     const staleAssets = [validAsset({ id: 'stale-input', tags: ['input'] })]
     fetchApiMock
-      .mockResolvedValueOnce(buildResponse({ assets: staleAssets }))
+      .mockResolvedValueOnce(buildAssetListResponse(staleAssets))
       .mockResolvedValueOnce(buildResponse(validAsset({ tags: ['models'] })))
 
     await assetService.getInputAssetsIncludingPublic()
@@ -863,37 +859,3 @@ describe(assetService.getInputAssetsIncludingPublic, () => {
     expect(fetchApiMock).toHaveBeenCalledTimes(2)
   })
 })
-
-describe(assetService.checkAssetHash, () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it.each([
-    [200, 'exists'],
-    [404, 'missing'],
-    [400, 'invalid']
-  ] as const)('maps %s responses to %s', async (status, expected) => {
-    const hash =
-      'blake3:1111111111111111111111111111111111111111111111111111111111111111'
-    fetchApiMock.mockResolvedValueOnce(buildResponse(null, { status }))
-
-    await expect(assetService.checkAssetHash(hash)).resolves.toBe(expected)
-
-    expect(fetchApiMock).toHaveBeenCalledWith(
-      `/assets/hash/${encodeURIComponent(hash)}`,
-      {
-        method: 'HEAD',
-        signal: undefined
-      }
-    )
-  })
-
-  it('throws for unexpected responses', async () => {
-    fetchApiMock.mockResolvedValueOnce(buildResponse(null, { status: 500 }))
-
-    await expect(assetService.checkAssetHash('blake3:abc')).rejects.toThrow(
-      'Unexpected asset hash check status: 500'
-    )
-  })
-})

src/platform/assets/services/assetService.ts

@@ -36,6 +36,7 @@ interface AssetPaginationOptions extends PaginationOptions {
 
 interface AssetRequestOptions extends PaginationOptions {
   includeTags: string[]
+  excludeTags?: string[]
   includePublic?: boolean
   signal?: AbortSignal
 }
@@ -179,29 +180,16 @@ const DEFAULT_LIMIT = 500
 const INPUT_ASSETS_WITH_PUBLIC_LIMIT = 500
 
 export const MODELS_TAG = 'models'
+export const INPUT_TAG = 'input'
+export const OUTPUT_TAG = 'output'
 /** Asset tag used by the backend for placeholder records that are not installed. */
 export const MISSING_TAG = 'missing'
+const DEFAULT_EXCLUDED_ASSET_TAGS = [MISSING_TAG]
 
-/** Result of a HEAD lookup against an exact asset hash. */
-export type AssetHashStatus = 'exists' | 'missing' | 'invalid'
-
-const BLAKE3_ASSET_HASH_PATTERN = /^blake3:[0-9a-f]{64}$/i
-const BLAKE3_HEX_PATTERN = /^[0-9a-f]{64}$/i
 const uploadedAssetResponseSchema = assetItemSchema.extend({
   created_new: z.boolean()
 })
 
-/** Returns true for a prefixed BLAKE3 asset hash: `blake3:<64 hex>`. */
-export function isBlake3AssetHash(value: string): boolean {
-  return BLAKE3_ASSET_HASH_PATTERN.test(value)
-}
-
-/** Converts a raw 64-character BLAKE3 hex digest into an asset hash. */
-export function toBlake3AssetHash(hash: string | undefined): string | null {
-  if (!hash || !BLAKE3_HEX_PATTERN.test(hash)) return null
-  return `blake3:${hash}`
-}
-
 function createAbortError(): DOMException {
   return new DOMException('Aborted', 'AbortError')
 }
@@ -210,6 +198,10 @@ function throwIfAborted(signal?: AbortSignal): void {
   if (signal?.aborted) throw createAbortError()
 }
 
+function normalizeAssetTags(tags: string[]): string[] {
+  return tags.map((tag) => tag.trim()).filter(Boolean)
+}
+
 async function withCallerAbort<T>(
   promise: Promise<T>,
   signal?: AbortSignal
@@ -290,15 +282,22 @@ function createAssetService() {
   ): Promise<AssetResponse> {
     const {
       includeTags,
+      excludeTags = DEFAULT_EXCLUDED_ASSET_TAGS,
       limit = DEFAULT_LIMIT,
       offset,
       includePublic,
       signal
     } = options
+    const normalizedIncludeTags = normalizeAssetTags(includeTags)
+    const normalizedExcludeTags = normalizeAssetTags(excludeTags)
+
     const queryParams = new URLSearchParams({
-      include_tags: includeTags.join(','),
+      include_tags: normalizedIncludeTags.join(','),
       limit: limit.toString()
     })
+    if (normalizedExcludeTags.length > 0) {
+      queryParams.set('exclude_tags', normalizedExcludeTags.join(','))
+    }
     if (offset !== undefined && offset > 0) {
       queryParams.set('offset', offset.toString())
     }
@@ -337,15 +336,10 @@ function createAssetService() {
     // Blacklist directories we don't want to show
     const blacklistedDirectories = new Set(['configs'])
 
-    // Extract directory names from assets that actually exist, exclude missing assets
-    const discoveredFolders = new Set<string>(
-      data?.assets
-        ?.filter((asset) => !asset.tags.includes(MISSING_TAG))
-        ?.flatMap((asset) => asset.tags)
-        ?.filter(
-          (tag) => tag !== MODELS_TAG && !blacklistedDirectories.has(tag)
-        ) ?? []
-    )
+    const folderTags = data.assets
+      .flatMap((asset) => asset.tags)
+      .filter((tag) => tag !== MODELS_TAG && !blacklistedDirectories.has(tag))
+    const discoveredFolders = new Set<string>(folderTags)
 
     // Return only discovered folders in alphabetical order
     const sortedFolders = Array.from(discoveredFolders).toSorted()
@@ -363,17 +357,10 @@ function createAssetService() {
       `models for ${folder}`
     )
 
-    return (
-      data?.assets
-        ?.filter(
-          (asset) =>
-            !asset.tags.includes(MISSING_TAG) && asset.tags.includes(folder)
-        )
-        ?.map((asset) => ({
-          name: asset.name,
-          pathIndex: 0
-        })) ?? []
-    )
+    return data.assets.map((asset) => ({
+      name: asset.name,
+      pathIndex: 0
+    }))
   }
 
   /**
@@ -449,12 +436,7 @@ function createAssetService() {
     )
 
     // Return full AssetItem[] objects (don't strip like getAssetModels does)
-    return (
-      data?.assets?.filter(
-        (asset) =>
-          !asset.tags.includes(MISSING_TAG) && asset.tags.includes(category)
-      ) ?? []
-    )
+    return data.assets
   }
 
   /**
@@ -473,11 +455,8 @@ function createAssetService() {
     }
     const data = await res.json()
 
-    // Validate the single asset response against our schema
-    const result = assetResponseSchema.safeParse({ assets: [data] })
-    if (result.success && result.data.assets?.[0]) {
-      return result.data.assets[0]
-    }
+    const result = assetItemSchema.safeParse(data)
+    if (result.success) return result.data
 
     const error = result.error
       ? fromZodError(result.error)
@@ -503,18 +482,32 @@ function createAssetService() {
     includePublic: boolean = true,
     { limit = DEFAULT_LIMIT, offset = 0, signal }: AssetPaginationOptions = {}
   ): Promise<AssetItem[]> {
-    const data = await handleAssetRequest(
+    const data = await getAssetsPageByTag(tag, includePublic, {
+      limit,
+      offset,
+      signal
+    })
+
+    return data.assets
+  }
+
+  /**
+   * Gets one paginated asset response filtered by a specific tag.
+   */
+  async function getAssetsPageByTag(
+    tag: string,
+    includePublic: boolean = true,
+    { limit = DEFAULT_LIMIT, offset = 0, signal }: AssetPaginationOptions = {}
+  ): Promise<AssetResponse> {
+    return await handleAssetRequest(
       { includeTags: [tag], limit, offset, includePublic, signal },
       `assets for tag ${tag}`
     )
-
-    return (
-      data?.assets?.filter((asset) => !asset.tags.includes(MISSING_TAG)) ?? []
-    )
   }
 
   /**
    * Gets every asset for a tag by walking paginated asset API responses.
+   * Pagination follows the required server-provided `has_more` flag.
    *
    * @param tag - The tag to filter by (e.g., 'models', 'input')
    * @param includePublic - Whether to include public assets (default: true)
@@ -535,23 +528,19 @@ function createAssetService() {
     while (true) {
       if (signal?.aborted) throw createAbortError()
 
-      const data = await handleAssetRequest(
-        {
-          includeTags: [tag],
-          limit: pageSize,
-          offset,
-          includePublic,
-          signal
-        },
-        `assets for tag ${tag}`
-      )
-      const batch = data.assets ?? []
-      assets.push(...batch.filter((asset) => !asset.tags.includes(MISSING_TAG)))
+      const data = await getAssetsPageByTag(tag, includePublic, {
+        limit: pageSize,
+        offset,
+        signal
+      })
+      const batch = data.assets
+      if (batch.length === 0) {
+        return assets
+      }
 
-      const noMoreFromServer = data.has_more === false
-      const inferredLastPage =
-        data.has_more === undefined && batch.length < pageSize
-      if (batch.length === 0 || noMoreFromServer || inferredLastPage) {
+      assets.push(...batch)
+
+      if (!data.has_more) {
         return assets
       }
 
@@ -598,31 +587,6 @@ function createAssetService() {
     return await withCallerAbort(request, signal)
   }
 
-  /**
-   * Checks whether an asset exists for an exact asset hash.
-   *
-   * Uses the HEAD /assets/hash/{hash} endpoint and maps status-only responses:
-   * 200 -> exists, 404 -> missing, and 400 -> invalid hash format.
-   */
-  async function checkAssetHash(
-    assetHash: string,
-    signal?: AbortSignal
-  ): Promise<AssetHashStatus> {
-    const response = await api.fetchApi(
-      `${ASSETS_ENDPOINT}/hash/${encodeURIComponent(assetHash)}`,
-      {
-        method: 'HEAD',
-        signal
-      }
-    )
-
-    if (response.status === 200) return 'exists'
-    if (response.status === 404) return 'missing'
-    if (response.status === 400) return 'invalid'
-
-    throw new Error(`Unexpected asset hash check status: ${response.status}`)
-  }
-
   /**
    * Deletes an asset by ID
    * Only available in cloud environment
@@ -983,10 +947,10 @@ function createAssetService() {
     getAssetsForNodeType,
     getAssetDetails,
     getAssetsByTag,
+    getAssetsPageByTag,
     getAllAssetsByTag,
     getInputAssetsIncludingPublic,
     invalidateInputAssetsIncludingPublic,
-    checkAssetHash,
     deleteAsset,
     updateAsset,
     addAssetTags,

src/platform/assets/utils/assetMetadataUtils.ts

@@ -204,3 +204,13 @@ export function getAssetCardTitle(asset: AssetItem): string {
   if (curatedName && curatedName !== asset.name) return curatedName
   return getAssetDisplayFilename(asset)
 }
+
+/**
+ * Returns the filename component the cloud `/api/view` endpoint resolves
+ * for this asset — `asset_hash` when present (cloud assets are hash-keyed
+ * in storage), otherwise `asset.name`. Use this when constructing widget
+ * values or media URLs that must round-trip through the view endpoint.
+ */
+export function getAssetUrlFilename(asset: AssetItem): string {
+  return asset.asset_hash || asset.name
+}

src/platform/assets/utils/clearDeletedAssetWidgetValues.test.ts

@@ -0,0 +1,173 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+
+import { clearDeletedAssetWidgetValues } from './clearDeletedAssetWidgetValues'
+
+type MockWidget = {
+  name: string
+  value: unknown
+  callback?: (value: unknown) => void
+}
+type MockNode = {
+  id: number
+  widgets?: MockWidget[]
+  graph?: { setDirtyCanvas: (v: boolean) => void }
+  isSubgraphNode?: () => boolean
+  subgraph?: { nodes: MockNode[] }
+}
+
+function makeGraph(nodes: MockNode[]): LGraph {
+  return { nodes } as unknown as LGraph
+}
+
+describe('FE-230 clearDeletedAssetWidgetValues', () => {
+  it('clears widget.value and invokes widget.callback so consumers run their own change-handling', () => {
+    const setDirty = vi.fn()
+    const callback = vi.fn()
+    const node: MockNode = {
+      id: 1,
+      widgets: [{ name: 'image', value: 'outputs/foo.png [output]', callback }],
+      graph: { setDirtyCanvas: setDirty }
+    }
+
+    clearDeletedAssetWidgetValues(
+      makeGraph([node]),
+      new Set(['outputs/foo.png [output]'])
+    )
+
+    expect(node.widgets![0].value).toBe('')
+    expect(callback).toHaveBeenCalledWith('')
+    expect(setDirty).toHaveBeenCalledWith(true)
+  })
+
+  it('leaves untouched widgets that do not match deleted values', () => {
+    const matchedCallback = vi.fn()
+    const keptCallback = vi.fn()
+    const node: MockNode = {
+      id: 2,
+      widgets: [
+        {
+          name: 'image',
+          value: 'outputs/foo.png [output]',
+          callback: matchedCallback
+        },
+        { name: 'mask', value: 'inputs/keep.png', callback: keptCallback }
+      ],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    clearDeletedAssetWidgetValues(
+      makeGraph([node]),
+      new Set(['outputs/foo.png [output]'])
+    )
+
+    expect(node.widgets![0].value).toBe('')
+    expect(node.widgets![1].value).toBe('inputs/keep.png')
+    expect(matchedCallback).toHaveBeenCalledWith('')
+    expect(keptCallback).not.toHaveBeenCalled()
+  })
+
+  it('leaves nodes alone when none of their widgets reference a deleted value (mask-editor case)', () => {
+    const setDirty = vi.fn()
+    const callback = vi.fn()
+    const node: MockNode = {
+      id: 3,
+      widgets: [
+        {
+          name: 'image',
+          value: 'clipspace/clipspace-painted-masked-1.png [input]',
+          callback
+        }
+      ],
+      graph: { setDirtyCanvas: setDirty }
+    }
+
+    clearDeletedAssetWidgetValues(
+      makeGraph([node]),
+      new Set(['outputs/some-other-asset.png [output]'])
+    )
+
+    expect(node.widgets![0].value).toBe(
+      'clipspace/clipspace-painted-masked-1.png [input]'
+    )
+    expect(callback).not.toHaveBeenCalled()
+    expect(setDirty).not.toHaveBeenCalled()
+  })
+
+  it('no-ops when the deleted-values set is empty', () => {
+    const setDirty = vi.fn()
+    const callback = vi.fn()
+    const node: MockNode = {
+      id: 4,
+      widgets: [{ name: 'image', value: 'outputs/foo.png [output]', callback }],
+      graph: { setDirtyCanvas: setDirty }
+    }
+
+    clearDeletedAssetWidgetValues(makeGraph([node]), new Set())
+
+    expect(node.widgets![0].value).toBe('outputs/foo.png [output]')
+    expect(callback).not.toHaveBeenCalled()
+    expect(setDirty).not.toHaveBeenCalled()
+  })
+
+  it('handles widgets without a callback (legacy nodes) without throwing', () => {
+    const node: MockNode = {
+      id: 5,
+      widgets: [{ name: 'image', value: 'outputs/foo.png [output]' }],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    expect(() =>
+      clearDeletedAssetWidgetValues(
+        makeGraph([node]),
+        new Set(['outputs/foo.png [output]'])
+      )
+    ).not.toThrow()
+
+    expect(node.widgets![0].value).toBe('')
+  })
+
+  it('clears all matching widgets across multiple nodes', () => {
+    const cbA = vi.fn()
+    const cbB = vi.fn()
+    const nodeA: MockNode = {
+      id: 6,
+      widgets: [
+        { name: 'image', value: 'outputs/a.png [output]', callback: cbA }
+      ],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+    const nodeB: MockNode = {
+      id: 7,
+      widgets: [
+        { name: 'image', value: 'outputs/a.png [output]', callback: cbB }
+      ],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    clearDeletedAssetWidgetValues(
+      makeGraph([nodeA, nodeB]),
+      new Set(['outputs/a.png [output]'])
+    )
+
+    expect(nodeA.widgets![0].value).toBe('')
+    expect(nodeB.widgets![0].value).toBe('')
+    expect(cbA).toHaveBeenCalledWith('')
+    expect(cbB).toHaveBeenCalledWith('')
+  })
+
+  it('does not affect nodes without widgets', () => {
+    const node: MockNode = {
+      id: 8,
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    expect(() =>
+      clearDeletedAssetWidgetValues(
+        makeGraph([node]),
+        new Set(['outputs/foo.png [output]'])
+      )
+    ).not.toThrow()
+  })
+})

src/platform/assets/utils/clearDeletedAssetWidgetValues.ts

@@ -0,0 +1,40 @@
+import type { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
+
+import { findNodesReferencingValues } from './clearNodePreviewCacheForValues'
+
+/**
+ * Clear widget values that reference deleted assets so the persisted workflow
+ * JSON stops claiming the deleted asset is in use.
+ *
+ * Without this, after `useMediaAssetActions.deleteAssets` succeeds the
+ * in-memory preview is cleared (`clearNodePreviewCacheForValues`) but the
+ * widget value still points at the deleted asset. On reload the workflow JSON
+ * is restored verbatim and `useImageUploadWidget` re-fetches the URL — for
+ * output assets the file is still served (history-soft-delete), so the
+ * preview re-renders despite the asset being "deleted" everywhere else.
+ *
+ * Mutates `widget.value` (which `LGraphNode.serialize` re-reads to rebuild
+ * `widgets_values`) and invokes `widget.callback` so widgets like Load Image
+ * run their own change-handling (clearing `node.imgs`, calling
+ * `setNodeOutputs`, etc.).
+ *
+ * FE-230 — covers the post-reload case without re-introducing
+ * useMissingMediaPreviewSync, which couldn't distinguish deletion from
+ * verification false-positives (e.g. mask-editor saved values).
+ */
+export function clearDeletedAssetWidgetValues(
+  rootGraph: LGraph | Subgraph,
+  deletedValues: ReadonlySet<string>
+): void {
+  if (deletedValues.size === 0) return
+  for (const node of findNodesReferencingValues(rootGraph, deletedValues)) {
+    if (!node.widgets) continue
+    for (const widget of node.widgets) {
+      if (typeof widget.value !== 'string') continue
+      if (!deletedValues.has(widget.value)) continue
+      widget.value = ''
+      widget.callback?.('')
+    }
+    node.graph?.setDirtyCanvas(true)
+  }
+}

src/platform/assets/utils/clearNodePreviewCacheForValues.test.ts

@@ -0,0 +1,241 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+
+import {
+  clearNodePreviewCacheForValues,
+  findNodesReferencingValues
+} from './clearNodePreviewCacheForValues'
+
+type MockWidget = { name: string; value: unknown }
+type MockNode = {
+  id: number
+  widgets?: MockWidget[]
+  imgs?: unknown
+  videoContainer?: unknown
+  graph?: { setDirtyCanvas: (v: boolean) => void }
+  isSubgraphNode?: () => boolean
+  subgraph?: { nodes: MockNode[] }
+}
+
+function makeGraph(nodes: MockNode[]): LGraph {
+  return { nodes } as unknown as LGraph
+}
+
+describe('FE-230 clearNodePreviewCacheForValues', () => {
+  it('clears node.imgs and removes outputs when a widget value matches a deleted value', () => {
+    const setDirty = vi.fn()
+    const remove = vi.fn()
+    const node: MockNode = {
+      id: 7,
+      widgets: [{ name: 'image', value: 'foo.png' }],
+      imgs: [{ src: 'blob:stale' }],
+      graph: { setDirtyCanvas: setDirty }
+    }
+
+    clearNodePreviewCacheForValues(
+      makeGraph([node]),
+      new Set(['foo.png']),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(node.imgs).toBeUndefined()
+    expect(remove).toHaveBeenCalledWith(node)
+    expect(setDirty).toHaveBeenCalledWith(true)
+  })
+
+  it('leaves unrelated nodes untouched', () => {
+    const setDirty = vi.fn()
+    const remove = vi.fn()
+    const node: MockNode = {
+      id: 8,
+      widgets: [{ name: 'image', value: 'unrelated.png' }],
+      imgs: [{ src: 'blob:keep' }],
+      graph: { setDirtyCanvas: setDirty }
+    }
+
+    clearNodePreviewCacheForValues(
+      makeGraph([node]),
+      new Set(['foo.png']),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(node.imgs).toEqual([{ src: 'blob:keep' }])
+    expect(remove).not.toHaveBeenCalled()
+    expect(setDirty).not.toHaveBeenCalled()
+  })
+
+  it('no-ops when the deleted value set is empty', () => {
+    const setDirty = vi.fn()
+    const remove = vi.fn()
+    const node: MockNode = {
+      id: 9,
+      widgets: [{ name: 'image', value: 'foo.png' }],
+      imgs: [{ src: 'blob:keep' }],
+      graph: { setDirtyCanvas: setDirty }
+    }
+
+    clearNodePreviewCacheForValues(
+      makeGraph([node]),
+      new Set(),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(node.imgs).toEqual([{ src: 'blob:keep' }])
+    expect(remove).not.toHaveBeenCalled()
+    expect(setDirty).not.toHaveBeenCalled()
+  })
+
+  it('matches the [output]-annotated form for output assets', () => {
+    const remove = vi.fn()
+    const node: MockNode = {
+      id: 12,
+      widgets: [{ name: 'image', value: 'foo.png [output]' }],
+      imgs: [{ src: 'blob:stale' }],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    clearNodePreviewCacheForValues(
+      makeGraph([node]),
+      new Set(['foo.png [output]']),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(node.imgs).toBeUndefined()
+    expect(remove).toHaveBeenCalledWith(node)
+  })
+
+  it('matches the subfolder-prefixed annotated form when provided', () => {
+    const remove = vi.fn()
+    const node: MockNode = {
+      id: 13,
+      widgets: [{ name: 'image', value: 'sub/foo.png [output]' }],
+      imgs: [{ src: 'blob:stale' }],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    clearNodePreviewCacheForValues(
+      makeGraph([node]),
+      new Set(['sub/foo.png [output]']),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(node.imgs).toBeUndefined()
+    expect(remove).toHaveBeenCalledWith(node)
+  })
+
+  it('does not cross-match basenames across input/output sources', () => {
+    const remove = vi.fn()
+    const inputNode: MockNode = {
+      id: 1,
+      widgets: [{ name: 'image', value: 'foo.png' }],
+      imgs: [{ src: 'blob:input' }],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+    const outputNode: MockNode = {
+      id: 2,
+      widgets: [{ name: 'image', value: 'foo.png [output]' }],
+      imgs: [{ src: 'blob:output' }],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    clearNodePreviewCacheForValues(
+      makeGraph([inputNode, outputNode]),
+      new Set(['foo.png']),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(inputNode.imgs).toBeUndefined()
+    expect(outputNode.imgs).toEqual([{ src: 'blob:output' }])
+    expect(remove).toHaveBeenCalledWith(inputNode)
+    expect(remove).not.toHaveBeenCalledWith(outputNode)
+  })
+
+  it('also clears videoContainer for video previews', () => {
+    const remove = vi.fn()
+    const node: MockNode = {
+      id: 15,
+      widgets: [{ name: 'video', value: 'clip.mp4' }],
+      videoContainer: { foo: 'bar' },
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    clearNodePreviewCacheForValues(
+      makeGraph([node]),
+      new Set(['clip.mp4']),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(node.videoContainer).toBeUndefined()
+    expect(remove).toHaveBeenCalledWith(node)
+  })
+
+  it('matches any widget on the node, not just "image"', () => {
+    const remove = vi.fn()
+    const node: MockNode = {
+      id: 10,
+      widgets: [
+        { name: 'seed', value: 42 },
+        { name: 'video', value: 'clip.mp4' }
+      ],
+      imgs: [{ src: 'blob:videostale' }],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+
+    clearNodePreviewCacheForValues(
+      makeGraph([node]),
+      new Set(['clip.mp4']),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(node.imgs).toBeUndefined()
+    expect(remove).toHaveBeenCalledWith(node)
+  })
+
+  it('walks subgraph interiors and matches nested nodes', () => {
+    const inner: MockNode = {
+      id: 100,
+      widgets: [{ name: 'image', value: 'nested.png [output]' }],
+      imgs: [{ src: 'blob:nested' }],
+      graph: { setDirtyCanvas: vi.fn() }
+    }
+    const wrapper: MockNode = {
+      id: 50,
+      widgets: [],
+      isSubgraphNode: () => true,
+      subgraph: { nodes: [inner] }
+    }
+    const remove = vi.fn()
+
+    clearNodePreviewCacheForValues(
+      makeGraph([wrapper]),
+      new Set(['nested.png [output]']),
+      remove as unknown as (node: LGraphNode) => void
+    )
+
+    expect(inner.imgs).toBeUndefined()
+    expect(remove).toHaveBeenCalledWith(inner)
+  })
+})
+
+describe('FE-230 findNodesReferencingValues', () => {
+  it('skips subgraph wrapper nodes (only their interior nodes match)', () => {
+    const inner: MockNode = {
+      id: 100,
+      widgets: [{ name: 'image', value: 'foo.png' }]
+    }
+    const wrapper: MockNode = {
+      id: 50,
+      widgets: [{ name: 'image', value: 'foo.png' }],
+      isSubgraphNode: () => true,
+      subgraph: { nodes: [inner] }
+    }
+
+    const matches = findNodesReferencingValues(
+      makeGraph([wrapper]),
+      new Set(['foo.png'])
+    )
+
+    expect(matches).toEqual([inner])
+  })
+})

src/platform/assets/utils/clearNodePreviewCacheForValues.ts

@@ -0,0 +1,65 @@
+import type {
+  LGraph,
+  LGraphNode,
+  Subgraph
+} from '@/lib/litegraph/src/litegraph'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
+
+/**
+ * Clear cached Load Image / Load Video preview state on any node whose widget
+ * value matches one of the given values. Covers:
+ *   - the canvas renderer cache (`node.imgs`, `node.videoContainer`)
+ *   - the Vue preview source — must be cleared via `removeOutputsForNode`
+ *     so the Pinia reactive ref (`nodeOutputStore.nodeOutputs.value`) updates,
+ *     not just the legacy `app.nodeOutputs` mirror
+ *
+ * Comparison is full-string against the widget value as stored — callers must
+ * provide the canonical widget-value variants for each deleted asset (e.g.
+ * `foo.png`, `foo.png [output]`, `sub/foo.png [output]`, `<asset_hash>`). This
+ * avoids false matches when two distinct assets share a basename across
+ * input/output sources.
+ *
+ * Walks the full graph hierarchy via `collectAllNodes`, so Load Image / Load
+ * Video nodes inside subgraphs are also matched.
+ *
+ * FE-230 — invoked after successful asset deletion so the Load Image / Load
+ * Video node preview does not keep displaying a thumbnail for an asset that
+ * no longer exists.
+ */
+export function clearNodePreviewCacheForValues(
+  rootGraph: LGraph | Subgraph,
+  deletedValues: ReadonlySet<string>,
+  removeOutputsForNode: (node: LGraphNode) => void
+): void {
+  if (deletedValues.size === 0) return
+  for (const node of findNodesReferencingValues(rootGraph, deletedValues)) {
+    removeOutputsForNode(node)
+    node.imgs = undefined
+    node.videoContainer = undefined
+    node.graph?.setDirtyCanvas(true)
+  }
+}
+
+/**
+ * Walk the graph hierarchy and yield each leaf node whose widget value matches
+ * one of `deletedValues`. Used by both the preview-clearing path and the
+ * missing-media-marking path so the two stay in lockstep.
+ *
+ * Skips subgraph wrapper nodes — only their interior nodes are inspected.
+ */
+export function findNodesReferencingValues(
+  rootGraph: LGraph | Subgraph,
+  deletedValues: ReadonlySet<string>
+): LGraphNode[] {
+  if (deletedValues.size === 0) return []
+  const matches: LGraphNode[] = []
+  for (const node of collectAllNodes(rootGraph)) {
+    if (!node.widgets?.length) continue
+    if (node.isSubgraphNode?.()) continue
+    const referencesDeleted = node.widgets.some(
+      (w) => typeof w.value === 'string' && deletedValues.has(w.value)
+    )
+    if (referencesDeleted) matches.push(node)
+  }
+  return matches
+}

src/platform/assets/utils/markDeletedAssetsAsMissingMedia.test.ts

@@ -0,0 +1,185 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
+
+import { markDeletedAssetsAsMissingMedia } from './markDeletedAssetsAsMissingMedia'
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+const mockScanNodeMediaCandidates = vi.hoisted(() => vi.fn())
+vi.mock('@/platform/missingMedia/missingMediaScan', () => ({
+  scanNodeMediaCandidates: mockScanNodeMediaCandidates
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({ currentGraph: null })
+}))
+
+function makeGraph(nodes: unknown[]): LGraph {
+  return { nodes } as unknown as LGraph
+}
+
+describe('FE-230 markDeletedAssetsAsMissingMedia', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockScanNodeMediaCandidates.mockReset()
+    mockScanNodeMediaCandidates.mockReturnValue([])
+  })
+
+  it('adds missing-media candidates only for widgets whose value is in the deleted set', () => {
+    const node = {
+      id: 1,
+      type: 'LoadImage',
+      widgets: [
+        { name: 'image', value: 'sub/foo.png [output]' },
+        { name: 'mask', value: 'unrelated.png' }
+      ]
+    }
+    mockScanNodeMediaCandidates.mockReturnValue([
+      {
+        nodeId: '1',
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'sub/foo.png [output]'
+      },
+      {
+        nodeId: '1',
+        nodeType: 'LoadImage',
+        widgetName: 'mask',
+        mediaType: 'image',
+        name: 'unrelated.png'
+      }
+    ])
+
+    markDeletedAssetsAsMissingMedia(
+      makeGraph([node]),
+      new Set(['sub/foo.png [output]'])
+    )
+
+    const store = useMissingMediaStore()
+    expect(store.missingMediaCandidates).toEqual([
+      {
+        nodeId: '1',
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'sub/foo.png [output]',
+        isMissing: true
+      }
+    ])
+  })
+
+  it('does not cross-match basenames across input/output sources', () => {
+    const inputNode = {
+      id: 2,
+      type: 'LoadImage',
+      widgets: [{ name: 'image', value: 'foo.png' }]
+    }
+    const outputNode = {
+      id: 3,
+      type: 'LoadImage',
+      widgets: [{ name: 'image', value: 'foo.png [output]' }]
+    }
+
+    markDeletedAssetsAsMissingMedia(
+      makeGraph([inputNode, outputNode]),
+      new Set(['foo.png'])
+    )
+
+    expect(mockScanNodeMediaCandidates).toHaveBeenCalledTimes(1)
+    expect(mockScanNodeMediaCandidates).toHaveBeenCalledWith(
+      expect.anything(),
+      inputNode,
+      true
+    )
+  })
+
+  it('skips nodes with NEVER or BYPASS mode', () => {
+    const bypassed = {
+      id: 4,
+      type: 'LoadImage',
+      mode: 4,
+      widgets: [{ name: 'image', value: 'foo.png [output]' }]
+    }
+    const never = {
+      id: 5,
+      type: 'LoadImage',
+      mode: 2,
+      widgets: [{ name: 'image', value: 'foo.png [output]' }]
+    }
+
+    markDeletedAssetsAsMissingMedia(
+      makeGraph([bypassed, never]),
+      new Set(['foo.png [output]'])
+    )
+
+    expect(mockScanNodeMediaCandidates).not.toHaveBeenCalled()
+    const store = useMissingMediaStore()
+    expect(store.missingMediaCandidates).toBeNull()
+  })
+
+  it('walks subgraph interiors and marks nested nodes', () => {
+    const inner = {
+      id: 100,
+      type: 'LoadImage',
+      widgets: [{ name: 'image', value: 'nested.png [output]' }]
+    }
+    const wrapper = {
+      id: 50,
+      widgets: [],
+      isSubgraphNode: () => true,
+      subgraph: { nodes: [inner] }
+    }
+    mockScanNodeMediaCandidates.mockReturnValue([
+      {
+        nodeId: '50:100',
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'nested.png [output]'
+      }
+    ])
+
+    markDeletedAssetsAsMissingMedia(
+      makeGraph([wrapper]),
+      new Set(['nested.png [output]'])
+    )
+
+    const store = useMissingMediaStore()
+    expect(store.missingMediaCandidates).toEqual([
+      {
+        nodeId: '50:100',
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'nested.png [output]',
+        isMissing: true
+      }
+    ])
+  })
+
+  it('is a no-op when no nodes reference any deleted value', () => {
+    const node = {
+      id: 2,
+      type: 'LoadImage',
+      widgets: [{ name: 'image', value: 'kept.png' }]
+    }
+
+    markDeletedAssetsAsMissingMedia(makeGraph([node]), new Set(['gone.png']))
+
+    expect(mockScanNodeMediaCandidates).not.toHaveBeenCalled()
+    const store = useMissingMediaStore()
+    expect(store.missingMediaCandidates).toBeNull()
+  })
+
+  it('does nothing when the deleted value set is empty', () => {
+    markDeletedAssetsAsMissingMedia(makeGraph([]), new Set())
+    const store = useMissingMediaStore()
+    expect(store.missingMediaCandidates).toBeNull()
+  })
+})

src/platform/assets/utils/markDeletedAssetsAsMissingMedia.ts

@@ -0,0 +1,50 @@
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
+import { isCloud } from '@/platform/distribution/types'
+import { scanNodeMediaCandidates } from '@/platform/missingMedia/missingMediaScan'
+import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
+
+import { findNodesReferencingValues } from './clearNodePreviewCacheForValues'
+
+/**
+ * After a successful asset deletion, surface the affected Load Image / Load
+ * Video / Load Audio nodes through the missing-media store. Without this, UI
+ * surfaces that filter against `missingMediaCandidates` (e.g. the Vue node
+ * widget dropdown) keep listing the deleted asset because the verification
+ * pipeline only runs on workflow load — there is no signal that the live
+ * deletion just invalidated some references.
+ *
+ * Walks the full graph hierarchy (including subgraphs) and skips bypassed /
+ * never-execute nodes, mirroring `scanAllMediaCandidates` so the live-delete
+ * path stays in lockstep with the workflow-load verification.
+ *
+ * Comparison is full-string against the widget value, so two distinct assets
+ * that share a basename across input/output sources do not cross-match.
+ */
+export function markDeletedAssetsAsMissingMedia(
+  rootGraph: LGraph,
+  deletedValues: ReadonlySet<string>
+): void {
+  if (deletedValues.size === 0) return
+
+  const matchedNodes = findNodesReferencingValues(rootGraph, deletedValues)
+  if (!matchedNodes.length) return
+
+  const candidates: MissingMediaCandidate[] = []
+  for (const node of matchedNodes) {
+    if (
+      node.mode === LGraphEventMode.NEVER ||
+      node.mode === LGraphEventMode.BYPASS
+    )
+      continue
+    for (const candidate of scanNodeMediaCandidates(rootGraph, node, isCloud)) {
+      if (!deletedValues.has(candidate.name)) continue
+      candidates.push({ ...candidate, isMissing: true })
+    }
+  }
+
+  if (candidates.length) {
+    useMissingMediaStore().addMissingMedia(candidates)
+  }
+}