[backport core/1.41] Add support for values factory function in widget select combo (#9882)

Backport of #8775 to `core/1.41`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9882-backport-core-1-41-Add-support-for-values-factory-function-in-widget-select-combo-3226d73d3650812ca13ac9755d33901b)
by [Unito](https://www.unito.io)

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>

.gitignore

@@ -26,6 +26,7 @@ dist-ssr
 .claude/*.local.json
 .claude/*.local.md
 .claude/*.local.txt
+.claude/worktrees
 CLAUDE.local.md
 
 # Editor directories and files

apps/desktop-ui/src/components/maintenance/TaskListPanel.vue

@@ -4,7 +4,7 @@
     <template v-if="filter.tasks.length === 0">
       <!-- Empty filter -->
       <Divider />
-      <p class="text-neutral-400 w-full text-center">
+      <p class="w-full text-center text-neutral-400">
         {{ $t('maintenance.allOk') }}
       </p>
     </template>
@@ -25,7 +25,7 @@
 
       <!-- Display: Cards -->
       <template v-else>
-        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
+        <div class="pad-y my-4 flex flex-wrap justify-evenly gap-8">
           <TaskCard
             v-for="task in filter.tasks"
             :key="task.id"
@@ -45,7 +45,8 @@ import { useConfirm, useToast } from 'primevue'
 import ConfirmPopup from 'primevue/confirmpopup'
 import Divider from 'primevue/divider'
 
-import { t } from '@/i18n'
+import { useI18n } from 'vue-i18n'
+
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type {
   MaintenanceFilter,
@@ -55,6 +56,7 @@ import type {
 import TaskCard from './TaskCard.vue'
 import TaskListItem from './TaskListItem.vue'
 
+const { t } = useI18n()
 const toast = useToast()
 const confirm = useConfirm()
 const taskStore = useMaintenanceTaskStore()
@@ -80,8 +82,7 @@ const executeTask = async (task: MaintenanceTask) => {
   toast.add({
     severity: 'error',
     summary: t('maintenance.error.toastTitle'),
-    detail: message ?? t('maintenance.error.defaultDescription'),
-    life: 10_000
+    detail: message ?? t('maintenance.error.defaultDescription')
   })
 }
 

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -189,8 +189,7 @@ const completeValidation = async () => {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: t('maintenance.error.cannotContinue'),
-      life: 5_000
+      detail: t('maintenance.error.cannotContinue')
     })
   }
 }

apps/desktop-ui/src/views/MetricsConsentView.vue

@@ -1,8 +1,8 @@
 <template>
   <BaseViewTemplate dark hide-language-selector>
-    <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
+    <div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
       <div
-        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
+        class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
       >
         <h2 class="text-3xl font-semibold text-neutral-100">
           {{ $t('install.helpImprove') }}
@@ -15,7 +15,7 @@
           <a
             href="https://comfy.org/privacy"
             target="_blank"
-            class="text-blue-400 hover:text-blue-300 underline"
+            class="text-blue-400 underline hover:text-blue-300"
           >
             {{ $t('install.privacyPolicy') }} </a
           >.
@@ -33,7 +33,7 @@
             }}
           </span>
         </div>
-        <div class="flex pt-6 justify-end">
+        <div class="flex justify-end pt-6">
           <Button
             :label="$t('g.ok')"
             icon="pi pi-check"
@@ -72,8 +72,7 @@ const updateConsent = async () => {
     toast.add({
       severity: 'error',
       summary: t('install.settings.errorUpdatingConsent'),
-      detail: t('install.settings.errorUpdatingConsentDetail'),
-      life: 3000
+      detail: t('install.settings.errorUpdatingConsentDetail')
     })
   } finally {
     isUpdating.value = false

browser_tests/assets/nodes/load_image_with_ksampler.json

@@ -0,0 +1,47 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": null },
+        { "name": "MASK", "type": "MASK", "links": null }
+      ],
+      "properties": { "Node name for S&R": "LoadImage" },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": [500, 50],
+      "size": [315, 262],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": null }],
+      "properties": { "Node name for S&R": "KSampler" },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "normal", 1]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": { "offset": [0, 0], "scale": 1 }
+  },
+  "version": 0.4
+}

browser_tests/tests/imagePastePriority.spec.ts

@@ -0,0 +1,58 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe(
+  'Image paste priority over stale node metadata',
+  { tag: ['@node'] },
+  () => {
+    test('Should not paste copied node when a LoadImage node is selected and clipboard has stale node metadata', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
+
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(initialCount).toBe(2)
+
+      // Copy the KSampler node (puts data-metadata in clipboard)
+      const ksamplerNodes =
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      await ksamplerNodes[0].copy()
+
+      // Select the LoadImage node
+      const loadImageNodes =
+        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+      await loadImageNodes[0].click('title')
+
+      // Simulate pasting when clipboard has stale node metadata (text/html
+      // with data-metadata) but no image file items. This replicates the bug
+      // scenario: user copied a node, then copied a web image (which replaces
+      // clipboard files but may leave stale text/html with node metadata).
+      await comfyPage.page.evaluate(() => {
+        const nodeData = { nodes: [{ type: 'KSampler', id: 99 }] }
+        const base64 = btoa(JSON.stringify(nodeData))
+        const html =
+          '<meta charset="utf-8"><div><span data-metadata="' +
+          base64 +
+          '"></span></div><span style="white-space:pre-wrap;">Text</span>'
+
+        const dataTransfer = new DataTransfer()
+        dataTransfer.setData('text/html', html)
+
+        const event = new ClipboardEvent('paste', {
+          clipboardData: dataTransfer,
+          bubbles: true,
+          cancelable: true
+        })
+        document.dispatchEvent(event)
+      })
+
+      await comfyPage.nextFrame()
+
+      // Node count should remain the same — stale node metadata should NOT
+      // be deserialized when a media node is selected.
+      const finalCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(finalCount).toBe(initialCount)
+    })
+  }
+)

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

@@ -0,0 +1,102 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.describe('Advanced Widget Visibility', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting(
+      'Comfy.Node.AlwaysShowAdvancedWidgets',
+      false
+    )
+
+    // Add a ModelSamplingFlux node which has both advanced (max_shift,
+    // base_shift) and non-advanced (width, height) widgets.
+    await comfyPage.page.evaluate(() => {
+      const node = window.LiteGraph!.createNode('ModelSamplingFlux')!
+      node.pos = [500, 200]
+      window.app!.graph.add(node)
+    })
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  function getNode(
+    comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
+  ) {
+    return comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
+  }
+
+  function getWidgets(
+    comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
+  ) {
+    return getNode(comfyPage).locator('.lg-node-widget')
+  }
+
+  test('should hide advanced widgets by default', async ({ comfyPage }) => {
+    const node = getNode(comfyPage)
+    const widgets = getWidgets(comfyPage)
+
+    // Non-advanced widgets (width, height) should be visible
+    await expect(widgets).toHaveCount(2)
+    await expect(node.getByLabel('width', { exact: true })).toBeVisible()
+    await expect(node.getByLabel('height', { exact: true })).toBeVisible()
+
+    // Advanced widgets should not be rendered
+    await expect(
+      node.getByLabel('max_shift', { exact: true })
+    ).not.toBeVisible()
+    await expect(
+      node.getByLabel('base_shift', { exact: true })
+    ).not.toBeVisible()
+
+    // "Show advanced inputs" button should be present
+    await expect(node.getByText('Show advanced inputs')).toBeVisible()
+  })
+
+  test('should show advanced widgets when per-node toggle is clicked', async ({
+    comfyPage
+  }) => {
+    const node = getNode(comfyPage)
+    const widgets = getWidgets(comfyPage)
+
+    await expect(widgets).toHaveCount(2)
+
+    // Click the toggle button to show advanced widgets
+    await node.getByText('Show advanced inputs').click()
+
+    await expect(widgets).toHaveCount(4)
+    await expect(node.getByLabel('max_shift', { exact: true })).toBeVisible()
+    await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible()
+
+    // Button text should change to "Hide advanced inputs"
+    await expect(node.getByText('Hide advanced inputs')).toBeVisible()
+
+    // Click again to hide
+    await node.getByText('Hide advanced inputs').click()
+    await expect(widgets).toHaveCount(2)
+  })
+
+  test('should show advanced widgets when global setting is enabled', async ({
+    comfyPage
+  }) => {
+    const node = getNode(comfyPage)
+    const widgets = getWidgets(comfyPage)
+
+    await expect(widgets).toHaveCount(2)
+
+    // Enable the global setting
+    await comfyPage.settings.setSetting(
+      'Comfy.Node.AlwaysShowAdvancedWidgets',
+      true
+    )
+
+    // All 4 widgets should now be visible
+    await expect(widgets).toHaveCount(4)
+    await expect(node.getByLabel('max_shift', { exact: true })).toBeVisible()
+    await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible()
+
+    // The toggle button should not be shown when global setting is active
+    await expect(node.getByText('Show advanced inputs')).not.toBeVisible()
+  })
+})

package.json

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

src/components/appMode/AppModeToolbar.vue

@@ -46,71 +46,74 @@ function showApps() {
 </script>
 
 <template>
-  <div class="pointer-events-auto flex flex-col gap-2">
-    <WorkflowActionsDropdown source="app_mode_toolbar" />
-
-    <Button
-      v-if="enableAppBuilder"
-      v-tooltip.right="{
-        value: t('linearMode.appModeToolbar.appBuilder'),
-        ...tooltipOptions
-      }"
-      variant="secondary"
-      size="unset"
-      :disabled="!hasNodes"
-      :aria-label="t('linearMode.appModeToolbar.appBuilder')"
-      class="size-10 rounded-lg"
-      @click="enterBuilder"
-    >
-      <i class="icon-[lucide--hammer] size-4" />
-    </Button>
-    <Button
-      v-if="isCloud && flags.workflowSharingEnabled"
-      v-tooltip.right="{
-        value: t('actionbar.shareTooltip'),
-        ...tooltipOptions
-      }"
-      variant="secondary"
-      size="unset"
-      :aria-label="t('actionbar.shareTooltip')"
-      class="size-10 rounded-lg"
-      @click="() => openShareDialog().catch(toastErrorHandler)"
-      @pointerenter="prefetchShareDialog"
-    >
-      <i class="icon-[lucide--send] size-4" />
-    </Button>
-
-    <div
-      class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
-    >
+  <div class="pointer-events-auto flex flex-row items-start gap-2">
+    <div class="pointer-events-auto flex flex-col gap-2">
       <Button
+        v-if="enableAppBuilder"
         v-tooltip.right="{
-          value: t('sideToolbar.mediaAssets.title'),
+          value: t('linearMode.appModeToolbar.appBuilder'),
           ...tooltipOptions
         }"
-        variant="textonly"
+        variant="secondary"
         size="unset"
-        :aria-label="t('sideToolbar.mediaAssets.title')"
-        :class="
-          cn('size-10', isAssetsActive && 'bg-secondary-background-hover')
-        "
-        @click="openAssets"
+        :disabled="!hasNodes"
+        :aria-label="t('linearMode.appModeToolbar.appBuilder')"
+        class="size-10 rounded-lg"
+        @click="enterBuilder"
       >
-        <i class="icon-[comfy--image-ai-edit] size-4" />
+        <i class="icon-[lucide--hammer] size-4" />
       </Button>
       <Button
+        v-if="isCloud && flags.workflowSharingEnabled"
         v-tooltip.right="{
-          value: t('linearMode.appModeToolbar.apps'),
+          value: t('actionbar.shareTooltip'),
           ...tooltipOptions
         }"
-        variant="textonly"
+        variant="secondary"
         size="unset"
-        :aria-label="t('linearMode.appModeToolbar.apps')"
-        :class="cn('size-10', isAppsActive && 'bg-secondary-background-hover')"
-        @click="showApps"
+        :aria-label="t('actionbar.shareTooltip')"
+        class="size-10 rounded-lg"
+        @click="() => openShareDialog().catch(toastErrorHandler)"
+        @pointerenter="prefetchShareDialog"
       >
-        <i class="icon-[lucide--panels-top-left] size-4" />
+        <i class="icon-[lucide--send] size-4" />
       </Button>
+
+      <div
+        class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
+      >
+        <Button
+          v-tooltip.right="{
+            value: t('sideToolbar.mediaAssets.title'),
+            ...tooltipOptions
+          }"
+          variant="textonly"
+          size="unset"
+          :aria-label="t('sideToolbar.mediaAssets.title')"
+          :class="
+            cn('size-10', isAssetsActive && 'bg-secondary-background-hover')
+          "
+          @click="openAssets"
+        >
+          <i class="icon-[comfy--image-ai-edit] size-4" />
+        </Button>
+        <Button
+          v-tooltip.right="{
+            value: t('linearMode.appModeToolbar.apps'),
+            ...tooltipOptions
+          }"
+          variant="textonly"
+          size="unset"
+          :aria-label="t('linearMode.appModeToolbar.apps')"
+          :class="
+            cn('size-10', isAppsActive && 'bg-secondary-background-hover')
+          "
+          @click="showApps"
+        >
+          <i class="icon-[lucide--panels-top-left] size-4" />
+        </Button>
+      </div>
     </div>
+    <WorkflowActionsDropdown source="app_mode_toolbar" />
   </div>
 </template>

src/components/builder/AppBuilder.vue

@@ -8,9 +8,9 @@ import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
 import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
-import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import {
   LGraphEventMode,
@@ -25,10 +25,10 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import { app } from '@/scripts/app'
 import { DOMWidgetImpl } from '@/scripts/domWidget'
-import { useDialogService } from '@/services/dialogService'
+import { promptRenameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { resolveNode } from '@/utils/litegraphUtil'
+import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
+import { resolveNodeWidget } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
@@ -53,18 +53,15 @@ workflowStore.activeWorkflow?.changeTracker?.reset()
 const arrangeInputs = computed(() =>
   appModeStore.selectedInputs
     .map(([nodeId, widgetName]) => {
-      const node = resolveNode(nodeId)
-      if (!node) return null
-      const widget = node.widgets?.find((w) => w.name === widgetName)
-      return { nodeId, widgetName, node, widget }
+      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+      return node ? { nodeId, widgetName, node, widget } : null
     })
     .filter((item): item is NonNullable<typeof item> => item !== null)
 )
 
 const inputsWithState = computed(() =>
   appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
-    const node = resolveNode(nodeId)
-    const widget = node?.widgets?.find((w) => w.name === widgetName)
+    const [node, widget] = resolveNodeWidget(nodeId, widgetName)
     if (!node || !widget) {
       return {
         nodeId,
@@ -73,15 +70,12 @@ const inputsWithState = computed(() =>
       }
     }
 
-    const input = node.inputs.find((i) => i.widget?.name === widget.name)
-    const rename = input && (() => renameWidget(widget, input))
-
     return {
       nodeId,
       widgetName,
       label: widget.label,
       subLabel: node.title,
-      rename
+      rename: () => promptRenameWidget(widget, node, t)
     }
   })
 )
@@ -92,20 +86,6 @@ const outputsWithState = computed<[NodeId, string][]>(() =>
   ])
 )
 
-async function renameWidget(widget: IBaseWidget, input: INodeInputSlot) {
-  const newLabel = await useDialogService().prompt({
-    title: t('g.rename'),
-    message: t('g.enterNewNamePrompt'),
-    defaultValue: widget.label,
-    placeholder: widget.name
-  })
-  if (newLabel === null) return
-  widget.label = newLabel || undefined
-  input.label = newLabel || undefined
-  widget.callback?.(widget.value)
-  useCanvasStore().canvas?.setDirty(true)
-}
-
 function getHovered(
   e: MouseEvent
 ): undefined | [LGraphNode, undefined] | [LGraphNode, IBaseWidget] {
@@ -126,7 +106,7 @@ function getHovered(
 
 function getBounding(nodeId: NodeId, widgetName?: string) {
   if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  const node = app.rootGraph.getNodeById(nodeId)
+  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
   if (!node) return
 
   const titleOffset =
@@ -139,7 +119,6 @@ function getBounding(nodeId: NodeId, widgetName?: string) {
       left: `${node.pos[0]}px`,
       top: `${node.pos[1] - titleOffset}px`
     }
-  const widget = node.widgets?.find((w) => w.name === widgetName)
   if (!widget) return
 
   const margin = widget instanceof DOMWidgetImpl ? widget.margin : undefined
@@ -162,7 +141,11 @@ function handleDown(e: MouseEvent) {
 }
 function handleClick(e: MouseEvent) {
   const [node, widget] = getHovered(e) ?? []
-  if (node?.mode !== LGraphEventMode.ALWAYS)
+  if (
+    node?.mode !== LGraphEventMode.ALWAYS ||
+    !nodeTypeValidForApp(node.type) ||
+    node.has_errors
+  )
     return canvasInteractions.forwardEventToCanvas(e)
 
   if (!widget) {
@@ -174,12 +157,16 @@ function handleClick(e: MouseEvent) {
     else appModeStore.selectedOutputs.splice(index, 1)
     return
   }
-  if (!isSelectInputsMode.value) return
+  if (!isSelectInputsMode.value || widget.options.canvasOnly) return
 
+  const storeId = isPromotedWidgetView(widget) ? widget.sourceNodeId : node.id
+  const storeName = isPromotedWidgetView(widget)
+    ? widget.sourceWidgetName
+    : widget.name
   const index = appModeStore.selectedInputs.findIndex(
-    ([nodeId, widgetName]) => node.id == nodeId && widget.name === widgetName
+    ([nodeId, widgetName]) => storeId == nodeId && storeName === widgetName
   )
-  if (index === -1) appModeStore.selectedInputs.push([node.id, widget.name])
+  if (index === -1) appModeStore.selectedInputs.push([storeId, storeName])
   else appModeStore.selectedInputs.splice(index, 1)
 }
 
@@ -198,7 +185,9 @@ const renderedOutputs = computed(() => {
   return canvas
     .graph!.nodes.filter(
       (n) =>
-        n.constructor.nodeData?.output_node && n.mode === LGraphEventMode.ALWAYS
+        n.constructor.nodeData?.output_node &&
+        n.mode === LGraphEventMode.ALWAYS &&
+        !n.has_errors
     )
     .map(nodeToDisplayTuple)
 })
@@ -260,7 +249,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
         <template #label>
           <div class="flex gap-3">
             {{ t('nodeHelpPage.inputs') }}
-            <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
+            <i class="icon-[lucide--info] bg-muted-foreground" />
           </div>
         </template>
         <template #empty>
@@ -315,7 +304,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
         <template #label>
           <div class="flex gap-3">
             {{ t('nodeHelpPage.outputs') }}
-            <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
+            <i class="icon-[lucide--info] bg-muted-foreground" />
           </div>
         </template>
         <template #empty>

src/components/builder/BuilderMenu.vue

@@ -72,7 +72,7 @@ const menuItems = computed(() => [
   },
   {
     label: t('builderMenu.exitAppBuilder'),
-    icon: 'icon-[lucide--square-pen]',
+    icon: 'icon-[lucide--x]',
     action: onExitBuilder
   }
 ])

src/components/builder/IoItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
@@ -7,6 +7,13 @@ import Button from '@/components/ui/button/Button.vue'
 
 const { t } = useI18n()
 
+const titleTooltip = ref<string | null>(null)
+const subTitleTooltip = ref<string | null>(null)
+
+function isTruncated(e: MouseEvent): boolean {
+  const el = e.currentTarget as HTMLElement
+  return el.scrollWidth > el.clientWidth
+}
 const { rename, remove } = defineProps<{
   title: string
   subTitle?: string
@@ -32,15 +39,28 @@ const entries = computed(() => {
 })
 </script>
 <template>
-  <div class="my-2 flex items-center-safe gap-2 rounded-lg p-2">
-    <div
-      class="drag-handle mr-auto inline max-w-max min-w-0 flex-[4_1_0%] truncate"
-      v-text="title"
-    />
-    <div
-      class="drag-handle inline max-w-max min-w-0 flex-[2_1_0%] truncate text-end text-muted-foreground"
-      v-text="subTitle"
-    />
+  <div
+    class="my-2 flex items-center-safe gap-2 rounded-lg p-2"
+    data-testid="builder-io-item"
+  >
+    <div class="drag-handle mr-auto flex min-w-0 flex-col gap-1">
+      <div
+        v-tooltip.left="{ value: titleTooltip, showDelay: 300 }"
+        class="drag-handle truncate text-sm"
+        data-testid="builder-io-item-title"
+        @mouseenter="titleTooltip = isTruncated($event) ? title : null"
+        v-text="title"
+      />
+      <div
+        v-tooltip.left="{ value: subTitleTooltip, showDelay: 300 }"
+        class="drag-handle truncate text-xs text-muted-foreground"
+        data-testid="builder-io-item-subtitle"
+        @mouseenter="
+          subTitleTooltip = isTruncated($event) ? (subTitle ?? null) : null
+        "
+        v-text="subTitle"
+      />
+    </div>
     <Popover :entries>
       <template #button>
         <Button variant="muted-textonly">

src/components/common/Dialogue.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger
+} from 'reka-ui'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+
+defineProps<{ title?: string; to?: string | HTMLElement }>()
+
+const { t } = useI18n()
+</script>
+<template>
+  <DialogRoot v-slot="{ close }">
+    <DialogTrigger as-child>
+      <slot name="button" />
+    </DialogTrigger>
+    <DialogPortal :to>
+      <DialogOverlay
+        class="data-[state=open]:animate-overlayShow fixed inset-0 z-30 bg-black/70"
+      />
+      <DialogContent
+        v-bind="$attrs"
+        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] z-1700 max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-border-subtle bg-base-background p-2 shadow-sm"
+      >
+        <div
+          v-if="title"
+          class="flex w-full items-center justify-between border-b border-border-subtle px-4"
+        >
+          <DialogTitle class="text-sm">{{ title }}</DialogTitle>
+          <DialogClose as-child>
+            <Button
+              :aria-label="t('g.close')"
+              size="icon"
+              variant="muted-textonly"
+            >
+              <i class="icon-[lucide--x]" />
+            </Button>
+          </DialogClose>
+        </div>
+        <slot :close />
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

src/components/common/DropdownItem.vue

@@ -54,11 +54,12 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     :disabled="toValue(item.disabled) ?? !item.command"
     @select="item.command?.({ originalEvent: $event, item })"
   >
-    <i class="size-5" :class="item.icon" />
-    {{ item.label }}
+    <i class="size-5 shrink-0" :class="item.icon" />
+    <div class="mr-auto truncate" v-text="item.label" />
+    <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />
     <div
-      v-if="item.new"
-      class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
+      v-else-if="item.new"
+      class="flex shrink-0 items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
       v-text="t('contextMenu.new')"
     />
   </DropdownMenuItem>

src/components/common/DropdownMenu.vue

@@ -27,7 +27,7 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
 
 const itemClass = computed(() =>
   cn(
-    'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
+    'm-1 flex cursor-pointer items-center-safe gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
     itemProp
   )
 )

src/components/common/ScrubableNumberInput.vue

@@ -33,19 +33,20 @@
         spellcheck="false"
         @blur="handleBlur"
         @keyup.enter="handleBlur"
-        @dragstart.prevent
+        @keydown.up.prevent="updateValueBy(step)"
+        @keydown.down.prevent="updateValueBy(-step)"
+        @keydown.page-up.prevent="updateValueBy(10 * step)"
+        @keydown.page-down.prevent="updateValueBy(-10 * step)"
       />
       <div
+        ref="swipeElement"
         :class="
           cn(
-            'absolute inset-0 z-10 cursor-ew-resize',
+            'absolute inset-0 z-10 cursor-ew-resize touch-pan-y',
             textEdit && 'pointer-events-none hidden'
           )
         "
-        @pointerdown="handlePointerDown"
-        @pointermove="handlePointerMove"
         @pointerup="handlePointerUp"
-        @pointercancel="resetDrag"
       />
     </div>
     <slot />
@@ -65,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, usePointerSwipe, whenever } from '@vueuse/core'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -73,8 +74,8 @@ import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  min,
-  max,
+  min = -Number.MAX_VALUE,
+  max = Number.MAX_VALUE,
   step = 1,
   disabled = false,
   hideButtons = false,
@@ -96,6 +97,7 @@ const modelValue = defineModel<number>({ default: 0 })
 
 const container = useTemplateRef<HTMLDivElement>('container')
 const inputField = useTemplateRef<HTMLInputElement>('inputField')
+const swipeElement = useTemplateRef('swipeElement')
 const textEdit = ref(false)
 
 onClickOutside(container, () => {
@@ -103,21 +105,11 @@ onClickOutside(container, () => {
 })
 
 function clamp(value: number): number {
-  const lo = min ?? -Infinity
-  const hi = max ?? Infinity
-  return Math.min(hi, Math.max(lo, value))
+  return Math.min(max, Math.max(min, value))
 }
 
-const canDecrement = computed(
-  () => modelValue.value > (min ?? -Infinity) && !disabled
-)
-const canIncrement = computed(
-  () => modelValue.value < (max ?? Infinity) && !disabled
-)
-
-const dragging = ref(false)
-const dragDelta = ref(0)
-const hasDragged = ref(false)
+const canDecrement = computed(() => modelValue.value > min && !disabled)
+const canIncrement = computed(() => modelValue.value < max && !disabled)
 
 function handleBlur(e: Event) {
   const target = e.target as HTMLInputElement
@@ -135,41 +127,27 @@ function handleBlur(e: Event) {
   textEdit.value = false
 }
 
-function handlePointerDown(e: PointerEvent) {
-  if (e.button !== 0) return
-  if (disabled) return
-  const target = e.target as HTMLElement
-  target.setPointerCapture(e.pointerId)
-  dragging.value = true
-  dragDelta.value = 0
-  hasDragged.value = false
-}
-
-function handlePointerMove(e: PointerEvent) {
-  if (!dragging.value) return
-  dragDelta.value += e.movementX
-  const steps = (dragDelta.value / 10) | 0
-  if (steps === 0) return
-  hasDragged.value = true
-  const unclipped = modelValue.value + steps * step
-  dragDelta.value %= 10
-  modelValue.value = clamp(unclipped)
-}
-
+let dragDelta = 0
 function handlePointerUp() {
-  if (!dragging.value) return
+  if (isSwiping.value) return
 
-  if (!hasDragged.value) {
-    textEdit.value = true
-    inputField.value?.focus()
-    inputField.value?.select()
-  }
-
-  resetDrag()
+  textEdit.value = true
+  inputField.value?.focus()
+  inputField.value?.select()
 }
 
-function resetDrag() {
-  dragging.value = false
-  dragDelta.value = 0
+const { distanceX, isSwiping } = usePointerSwipe(swipeElement, {
+  onSwipeEnd: () => (dragDelta = 0)
+})
+
+whenever(distanceX, () => {
+  if (disabled) return
+  const delta = ((distanceX.value - dragDelta) / 10) | 0
+  dragDelta += delta * 10
+  modelValue.value = clamp(modelValue.value - delta * step)
+})
+
+function updateValueBy(delta: number) {
+  modelValue.value = Math.min(max, Math.max(min, modelValue.value + delta))
 }
 </script>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -178,7 +178,7 @@
             v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
-            size="compact"
+            size="tall"
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
@@ -318,6 +318,20 @@
                       </Button>
                     </div>
                   </div>
+                  <div class="flex">
+                    <span
+                      class="text-neutral flex items-center gap-1.5 text-xs font-bold"
+                    >
+                      <template v-if="isAppTemplate(template)">
+                        <i class="icon-[lucide--panels-top-left]" />
+                        {{ $t('builderToolbar.app', 'App') }}
+                      </template>
+                      <template v-else>
+                        <i class="icon-[lucide--workflow]" />
+                        {{ $t('builderToolbar.nodeGraph', 'Node Graph') }}
+                      </template>
+                    </span>
+                  </div>
                 </div>
               </CardBottom>
             </template>
@@ -483,6 +497,8 @@ const {
 const getEffectiveSourceModule = (template: TemplateInfo) =>
   template.sourceModule || 'default'
 
+const isAppTemplate = (template: TemplateInfo) => template.name.endsWith('.app')
+
 const getBaseThumbnailSrc = (template: TemplateInfo) => {
   const sm = getEffectiveSourceModule(template)
   return getTemplateThumbnailUrl(template, sm, sm === 'default' ? '1' : '')

src/components/dialog/content/ErrorDialogContent.vue

@@ -138,8 +138,7 @@ onMounted(async () => {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: t('toastMessages.failedToFetchLogs'),
-      life: 5000
+      detail: t('toastMessages.failedToFetchLogs')
     })
   }
 })

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -275,8 +275,7 @@ async function handleBuy() {
     toast.add({
       severity: 'error',
       summary: t('credits.topUp.purchaseError'),
-      detail: t('credits.topUp.purchaseErrorDetail', { error: errorMessage }),
-      life: 5000
+      detail: t('credits.topUp.purchaseErrorDetail', { error: errorMessage })
     })
   } finally {
     loading.value = false

src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue

@@ -98,8 +98,7 @@ async function onConfirmCancel() {
     toast.add({
       severity: 'error',
       summary: t('subscription.cancelDialog.failed'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
+      detail: error instanceof Error ? error.message : t('g.unknownError')
     })
   } finally {
     isLoading.value = false

src/components/error/ErrorOverlay.vue

@@ -50,7 +50,9 @@
             {{ t('g.dismiss') }}
           </Button>
           <Button variant="secondary" size="lg" @click="seeErrors">
-            {{ t('errorOverlay.seeErrors') }}
+            {{
+              appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
+            }}
           </Button>
         </div>
       </div>
@@ -69,6 +71,8 @@ import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
 
+defineProps<{ appMode?: boolean }>()
+
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
@@ -94,6 +98,7 @@ function dismiss() {
 }
 
 function seeErrors() {
+  canvasStore.linearMode = false
   if (canvasStore.canvas) {
     canvasStore.canvas.deselectAll()
     canvasStore.updateSelectedItems()

src/components/graph/GraphCanvas.vue

@@ -535,7 +535,7 @@ onMounted(async () => {
 
   // Restore saved workflow and workflow tabs state
   await workflowPersistence.initializeWorkflow()
-  workflowPersistence.restoreWorkflowTabsState()
+  await workflowPersistence.restoreWorkflowTabsState()
 
   const sharedWorkflowLoadStatus =
     await workflowPersistence.loadSharedWorkflowFromUrlIfPresent()

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -579,8 +579,7 @@ const onUpdateComfyUI = async (): Promise<void> => {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: error.value || t('helpCenter.updateComfyUIFailed'),
-        life: 5000
+        detail: error.value || t('helpCenter.updateComfyUIFailed')
       })
       return
     }
@@ -597,8 +596,7 @@ const onUpdateComfyUI = async (): Promise<void> => {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: err instanceof Error ? err.message : t('g.unknownError'),
-      life: 5000
+      detail: err instanceof Error ? err.message : t('g.unknownError')
     })
   }
 }

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -1,5 +1,5 @@
-import { computed, reactive, ref, watch } from 'vue'
-import type { Ref } from 'vue'
+import { computed, reactive, ref, toValue, watch } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
@@ -227,7 +227,7 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
 }
 
 export function useErrorGroups(
-  searchQuery: Ref<string>,
+  searchQuery: MaybeRefOrGetter<string>,
   t: (key: string) => string
 ) {
   const executionErrorStore = useExecutionErrorStore()
@@ -584,7 +584,7 @@ export function useErrorGroups(
   })
 
   const filteredGroups = computed<ErrorGroup[]>(() => {
-    const query = searchQuery.value.trim()
+    const query = toValue(searchQuery).trim()
     return searchErrorGroups(tabErrorGroups.value, query)
   })
 

src/components/rightSidePanel/parameters/WidgetActions.vue

@@ -15,10 +15,9 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useDialogService } from '@/services/dialogService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
-import { getWidgetDefaultValue } from '@/utils/widgetUtil'
+import { getWidgetDefaultValue, promptWidgetLabel } from '@/utils/widgetUtil'
 import type { WidgetValue } from '@/utils/widgetUtil'
 
 const {
@@ -42,7 +41,6 @@ const label = defineModel<string>('label', { required: true })
 const canvasStore = useCanvasStore()
 const favoritedWidgetsStore = useFavoritedWidgetsStore()
 const nodeDefStore = useNodeDefStore()
-const dialogService = useDialogService()
 const { t } = useI18n()
 
 const hasParents = computed(() => parents?.length > 0)
@@ -67,15 +65,8 @@ const isCurrentValueDefault = computed(() => {
 })
 
 async function handleRename() {
-  const newLabel = await dialogService.prompt({
-    title: t('g.rename'),
-    message: t('g.enterNewNamePrompt'),
-    defaultValue: widget.label,
-    placeholder: widget.name
-  })
-
-  if (newLabel === null) return
-  label.value = newLabel
+  const newLabel = await promptWidgetLabel(widget, t)
+  if (newLabel !== null) label.value = newLabel
 }
 
 function handleHideInput() {

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -615,8 +615,7 @@ const enterFolderView = async (asset: AssetItem) => {
     toast.add({
       severity: 'error',
       summary: t('sideToolbar.folderView.errorSummary'),
-      detail: t('sideToolbar.folderView.errorDetail'),
-      life: 5000
+      detail: t('sideToolbar.folderView.errorDetail')
     })
     exitFolderView()
   }
@@ -662,8 +661,7 @@ const copyJobId = async () => {
       toast.add({
         severity: 'error',
         summary: t('mediaAsset.jobIdToast.error'),
-        detail: t('mediaAsset.jobIdToast.jobIdCopyFailed'),
-        life: 3000
+        detail: t('mediaAsset.jobIdToast.jobIdCopyFailed')
       })
     }
   }

src/components/topbar/WorkflowTab.vue

@@ -10,8 +10,9 @@
         @mouseup="handleMouseUp"
         @click="handleClick"
       >
+        <i v-if="isBuilderState" class="bg-text-subtle icon-[lucide--hammer]" />
         <i
-          v-if="workflowOption.workflow.initialMode === 'app'"
+          v-else-if="workflowOption.workflow.initialMode === 'app'"
           class="icon-[lucide--panels-top-left] bg-primary-background"
         />
         <span
@@ -149,6 +150,11 @@ const shouldShowStatusIndicator = computed(() => {
   return false
 })
 
+const isBuilderState = computed(() => {
+  const currentMode = props.workflowOption.workflow.activeMode
+  return typeof currentMode === 'string' && currentMode.startsWith('builder:')
+})
+
 const isActiveTab = computed(() => {
   return workflowStore.activeWorkflow?.key === props.workflowOption.workflow.key
 })

src/components/ui/ZoomPane.vue

@@ -24,7 +24,7 @@ function handleWheel(e: WheelEvent) {
 
 let dragging = false
 function handleDown(e: PointerEvent) {
-  if (e.button !== 0) return
+  if (e.button !== 0 && e.button !== 1) return
 
   const zoomPaneEl = zoomPane.value
   if (!zoomPaneEl) return

src/components/ui/button/button.variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const buttonVariants = cva({
-  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
+  base: 'relative inline-flex items-center justify-center gap-2 cursor-pointer touch-manipulation whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([width]):not([height])]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
       secondary:

src/composables/graph/useGraphNodeManager.ts

@@ -204,7 +204,7 @@ function safeWidgetMapper(
 
     return {
       canvasOnly: widget.options.canvasOnly,
-      advanced: widget.advanced,
+      advanced: widget.options?.advanced ?? widget.advanced,
       hidden: widget.options.hidden,
       read_only: widget.options.read_only
     }

src/composables/graph/useMoreOptionsMenu.ts

@@ -80,8 +80,12 @@ export function showNodeOptions(
 }
 
 /**
- * Hide the node options popover
+ * Check if the node options menu is currently open
  */
+export function isNodeOptionsOpen(): boolean {
+  return nodeOptionsInstance?.isOpen.value ?? false
+}
+
 interface NodeOptionsInstance {
   toggle: (event: Event) => void
   show: (event: MouseEvent) => void

src/composables/useCoreCommands.ts

@@ -397,8 +397,7 @@ export function useCoreCommands(): ComfyCommand[] {
         if (app.canvas.empty) {
           toastStore.add({
             severity: 'error',
-            summary: t('toastMessages.emptyCanvas'),
-            life: 3000
+            summary: t('toastMessages.emptyCanvas')
           })
           return
         }
@@ -557,8 +556,7 @@ export function useCoreCommands(): ComfyCommand[] {
           toastStore.add({
             severity: 'error',
             summary: t('toastMessages.nothingToQueue'),
-            detail: t('toastMessages.pleaseSelectOutputNodes'),
-            life: 3000
+            detail: t('toastMessages.pleaseSelectOutputNodes')
           })
           return
         }
@@ -571,8 +569,7 @@ export function useCoreCommands(): ComfyCommand[] {
           toastStore.add({
             severity: 'error',
             summary: t('toastMessages.failedToQueue'),
-            detail: t('toastMessages.failedExecutionPathResolution'),
-            life: 3000
+            detail: t('toastMessages.failedExecutionPathResolution')
           })
           return
         }
@@ -602,8 +599,7 @@ export function useCoreCommands(): ComfyCommand[] {
           toastStore.add({
             severity: 'error',
             summary: t('toastMessages.nothingToGroup'),
-            detail: t('toastMessages.pleaseSelectNodesToGroup'),
-            life: 3000
+            detail: t('toastMessages.pleaseSelectNodesToGroup')
           })
           return
         }
@@ -962,8 +958,7 @@ export function useCoreCommands(): ComfyCommand[] {
           toastStore.add({
             severity: 'error',
             summary: t('g.error'),
-            detail: t('manager.notAvailable'),
-            life: 3000
+            detail: t('manager.notAvailable')
           })
           return
         }
@@ -1048,8 +1043,7 @@ export function useCoreCommands(): ComfyCommand[] {
           toastStore.add({
             severity: 'error',
             summary: t('toastMessages.cannotCreateSubgraph'),
-            detail: t('toastMessages.failedToConvertToSubgraph'),
-            life: 3000
+            detail: t('toastMessages.failedToConvertToSubgraph')
           })
           return
         }
@@ -1258,8 +1252,7 @@ export function useCoreCommands(): ComfyCommand[] {
             summary: t('g.error'),
             detail: t('g.commandProhibited', {
               command: 'Comfy.Memory.UnloadModels'
-            }),
-            life: 3000
+            })
           })
           return
         }
@@ -1278,8 +1271,7 @@ export function useCoreCommands(): ComfyCommand[] {
             summary: t('g.error'),
             detail: t('g.commandProhibited', {
               command: 'Comfy.Memory.UnloadModelsAndExecutionCache'
-            }),
-            life: 3000
+            })
           })
           return
         }

src/composables/usePaste.test.ts

@@ -595,6 +595,34 @@ describe('usePaste', () => {
       )
     })
   })
+
+  it('should skip node metadata paste when a media node is selected', async () => {
+    const mockNode = createMockLGraphNode({
+      is_selected: true,
+      pasteFile: vi.fn(),
+      pasteFiles: vi.fn()
+    })
+    mockCanvas.current_node = mockNode
+    vi.mocked(isImageNode).mockReturnValue(true)
+
+    usePaste()
+
+    const nodeData = { nodes: [{ type: 'KSampler' }] }
+    const encoded = btoa(JSON.stringify(nodeData))
+    const html = `<div data-metadata="${encoded}"></div>`
+
+    const dataTransfer = new DataTransfer()
+    dataTransfer.setData('text/html', html)
+    dataTransfer.setData('text/plain', 'some text')
+
+    const event = new ClipboardEvent('paste', { clipboardData: dataTransfer })
+    document.dispatchEvent(event)
+
+    await vi.waitFor(() => {
+      expect(mockCanvas._deserializeItems).not.toHaveBeenCalled()
+      expect(mockCanvas.pasteFromClipboard).toHaveBeenCalled()
+    })
+  })
 })
 
 describe('cloneDataTransfer', () => {

src/composables/usePaste.ts

@@ -229,7 +229,10 @@ export const usePaste = () => {
         return
       }
     }
-    if (pasteClipboardItems(data)) return
+
+    const isMediaNodeSelected =
+      isImageNodeSelected || isVideoNodeSelected || isAudioNodeSelected
+    if (!isMediaNodeSelected && pasteClipboardItems(data)) return
 
     // No image found. Look for node data
     data = data.getData('text/plain')

src/core/graph/subgraph/promotionUtils.ts

@@ -81,8 +81,7 @@ function getParentNodes(): SubgraphNode[] {
     useToastStore().add({
       severity: 'error',
       summary: t('g.error'),
-      detail: t('subgraphStore.promoteOutsideSubgraph'),
-      life: 2000
+      detail: t('subgraphStore.promoteOutsideSubgraph')
     })
     return []
   }

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

@@ -0,0 +1,161 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+import { resolveSubgraphInputTarget } from '@/core/graph/subgraph/resolveSubgraphInputTarget'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  createTestSubgraph,
+  createTestSubgraphNode
+} from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
+import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({})
+}))
+vi.mock('@/stores/domWidgetStore', () => ({
+  useDomWidgetStore: () => ({ widgetStates: new Map() })
+}))
+vi.mock('@/services/litegraphService', () => ({
+  useLitegraphService: () => ({ updatePreviews: () => ({}) })
+}))
+
+function createOuterSubgraphSetup(inputNames: string[]): {
+  outerSubgraph: Subgraph
+  outerSubgraphNode: SubgraphNode
+} {
+  const outerSubgraph = createTestSubgraph({
+    inputs: inputNames.map((name) => ({ name, type: '*' }))
+  })
+  const outerSubgraphNode = createTestSubgraphNode(outerSubgraph, { id: 1 })
+  return { outerSubgraph, outerSubgraphNode }
+}
+
+function addLinkedNestedSubgraphNode(
+  outerSubgraph: Subgraph,
+  inputName: string,
+  linkedInputName: string,
+  options: { widget?: string } = {}
+): { innerSubgraphNode: SubgraphNode } {
+  const innerSubgraph = createTestSubgraph({
+    inputs: [{ name: linkedInputName, type: '*' }]
+  })
+  const innerSubgraphNode = createTestSubgraphNode(innerSubgraph, { id: 819 })
+  outerSubgraph.add(innerSubgraphNode)
+
+  const inputSlot = outerSubgraph.inputNode.slots.find(
+    (slot) => slot.name === inputName
+  )
+  if (!inputSlot) throw new Error(`Missing subgraph input slot: ${inputName}`)
+
+  const input = innerSubgraphNode.addInput(linkedInputName, '*')
+  if (options.widget) {
+    innerSubgraphNode.addWidget('number', options.widget, 0, () => undefined)
+    input.widget = { name: options.widget }
+  }
+  inputSlot.connect(input, innerSubgraphNode)
+
+  if (input.link == null) {
+    throw new Error(`Expected link to be created for input ${linkedInputName}`)
+  }
+
+  return { innerSubgraphNode }
+}
+
+beforeEach(() => {
+  setActivePinia(createTestingPinia({ stubActions: false }))
+  vi.clearAllMocks()
+})
+
+describe('resolveSubgraphInputTarget', () => {
+  test('returns target for widget-backed input on nested SubgraphNode', () => {
+    const { outerSubgraph, outerSubgraphNode } = createOuterSubgraphSetup([
+      'width'
+    ])
+    addLinkedNestedSubgraphNode(outerSubgraph, 'width', 'width', {
+      widget: 'width'
+    })
+
+    const result = resolveSubgraphInputTarget(outerSubgraphNode, 'width')
+
+    expect(result).toMatchObject({
+      nodeId: '819',
+      widgetName: 'width'
+    })
+  })
+
+  test('returns undefined for non-widget input on nested SubgraphNode', () => {
+    const { outerSubgraph, outerSubgraphNode } = createOuterSubgraphSetup([
+      'audio'
+    ])
+    addLinkedNestedSubgraphNode(outerSubgraph, 'audio', 'audio')
+
+    const result = resolveSubgraphInputTarget(outerSubgraphNode, 'audio')
+
+    expect(result).toBeUndefined()
+  })
+
+  test('resolves widget inputs but not non-widget inputs on the same nested SubgraphNode', () => {
+    const { outerSubgraph, outerSubgraphNode } = createOuterSubgraphSetup([
+      'width',
+      'audio'
+    ])
+    addLinkedNestedSubgraphNode(outerSubgraph, 'width', 'width', {
+      widget: 'width'
+    })
+    addLinkedNestedSubgraphNode(outerSubgraph, 'audio', 'audio')
+
+    expect(
+      resolveSubgraphInputTarget(outerSubgraphNode, 'width')
+    ).toMatchObject({
+      nodeId: '819',
+      widgetName: 'width'
+    })
+    expect(
+      resolveSubgraphInputTarget(outerSubgraphNode, 'audio')
+    ).toBeUndefined()
+  })
+
+  test('returns target for widget-backed input on plain interior node', () => {
+    const { outerSubgraph, outerSubgraphNode } = createOuterSubgraphSetup([
+      'seed'
+    ])
+
+    const inputSlot = outerSubgraph.inputNode.slots.find(
+      (slot) => slot.name === 'seed'
+    )!
+    const node = new LGraphNode('Interior-seed')
+    node.id = 42
+    const input = node.addInput('seed_input', '*')
+    node.addWidget('number', 'seed', 0, () => undefined)
+    input.widget = { name: 'seed' }
+    outerSubgraph.add(node)
+    inputSlot.connect(input, node)
+
+    const result = resolveSubgraphInputTarget(outerSubgraphNode, 'seed')
+
+    expect(result).toMatchObject({
+      nodeId: '42',
+      widgetName: 'seed'
+    })
+  })
+
+  test('returns undefined for non-widget input on plain interior node', () => {
+    const { outerSubgraph, outerSubgraphNode } = createOuterSubgraphSetup([
+      'image'
+    ])
+
+    const inputSlot = outerSubgraph.inputNode.slots.find(
+      (slot) => slot.name === 'image'
+    )!
+    const node = new LGraphNode('Interior-image')
+    const input = node.addInput('image_input', '*')
+    outerSubgraph.add(node)
+    inputSlot.connect(input, node)
+
+    const result = resolveSubgraphInputTarget(outerSubgraphNode, 'image')
+
+    expect(result).toBeUndefined()
+  })
+})

src/core/graph/subgraph/resolveSubgraphInputTarget.ts

@@ -16,6 +16,9 @@ export function resolveSubgraphInputTarget(
     inputName,
     ({ inputNode, targetInput, getTargetWidget }) => {
       if (inputNode.isSubgraphNode()) {
+        const targetWidget = getTargetWidget()
+        if (!targetWidget) return undefined
+
         return {
           nodeId: String(inputNode.id),
           widgetName: targetInput.name

src/extensions/core/electronAdapter.ts

@@ -204,8 +204,7 @@ import { electronAPI as getElectronAPI } from '@/utils/envUtil'
                 toastStore.add({
                   severity: 'error',
                   summary: t('g.error'),
-                  detail: t('desktopUpdate.errorInstallingUpdate'),
-                  life: 10_000
+                  detail: t('desktopUpdate.errorInstallingUpdate')
                 })
               }
             }
@@ -214,8 +213,7 @@ import { electronAPI as getElectronAPI } from '@/utils/envUtil'
             toastStore.add({
               severity: 'error',
               summary: t('g.error'),
-              detail: t('desktopUpdate.errorCheckingUpdate'),
-              life: 10_000
+              detail: t('desktopUpdate.errorCheckingUpdate')
             })
           }
         }

src/extensions/core/imageCompare.ts

@@ -1,6 +1,5 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { NodeOutputWith } from '@/schemas/apiSchema'
-import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExtensionService } from '@/services/extensionService'
@@ -29,7 +28,6 @@ useExtensionService().registerExtension({
 
       const toUrl = (record: Record<string, string>) => {
         const params = new URLSearchParams(record)
-        appendCloudResParam(params, record.filename)
         return api.apiURL(`/view?${params}${rand}`)
       }
 

src/lib/litegraph/src/subgraph/ExecutableNodeDTO.test.ts

@@ -1,9 +1,12 @@
 // TODO: Fix these tests after migration
-import { describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   LGraph,
   LGraphNode,
+  LGraphEventMode,
   ExecutableNodeDTO
 } from '@/lib/litegraph/src/litegraph'
 
@@ -249,6 +252,136 @@ describe.skip('ExecutableNodeDTO Output Resolution', () => {
   })
 })
 
+describe('Muted node output resolution', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  it('should return undefined for NEVER mode nodes', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('Muted Node')
+    node.addOutput('out', 'string')
+    node.mode = LGraphEventMode.NEVER
+    graph.add(node)
+
+    const dto = new ExecutableNodeDTO(node, [], new Map(), undefined)
+    const resolved = dto.resolveOutput(0, 'string', new Set())
+
+    expect(resolved).toBeUndefined()
+  })
+
+  it('should return undefined for muted subgraph nodes without throwing', () => {
+    const subgraph = createTestSubgraph({
+      outputs: [{ name: 'out', type: 'IMAGE' }],
+      nodeCount: 1
+    })
+    const subgraphNode = createTestSubgraphNode(subgraph)
+
+    subgraphNode.mode = LGraphEventMode.NEVER
+
+    // Empty map simulates executionUtil skipping getInnerNodes() for muted nodes
+    const nodesByExecutionId = new Map()
+    const dto = new ExecutableNodeDTO(
+      subgraphNode,
+      [],
+      nodesByExecutionId,
+      undefined
+    )
+    nodesByExecutionId.set(dto.id, dto)
+
+    const resolved = dto.resolveOutput(0, 'IMAGE', new Set())
+    expect(resolved).toBeUndefined()
+  })
+
+  it('should resolve undefined when input is connected to a muted node', () => {
+    const graph = new LGraph()
+
+    const mutedNode = new LGraphNode('Muted Node')
+    mutedNode.addOutput('result', 'IMAGE')
+    mutedNode.mode = LGraphEventMode.NEVER
+    graph.add(mutedNode)
+
+    const downstreamNode = new LGraphNode('Downstream')
+    downstreamNode.addInput('input', 'IMAGE')
+    graph.add(downstreamNode)
+
+    mutedNode.connect(0, downstreamNode, 0)
+
+    const nodeDtoMap = new Map()
+    const mutedDto = new ExecutableNodeDTO(mutedNode, [], nodeDtoMap, undefined)
+    nodeDtoMap.set(mutedDto.id, mutedDto)
+
+    const downstreamDto = new ExecutableNodeDTO(
+      downstreamNode,
+      [],
+      nodeDtoMap,
+      undefined
+    )
+    nodeDtoMap.set(downstreamDto.id, downstreamDto)
+
+    const resolved = downstreamDto.resolveInput(0)
+    expect(resolved).toBeUndefined()
+  })
+})
+
+describe('Bypass node output resolution', () => {
+  it('should still resolve bypass for BYPASS mode nodes', () => {
+    const graph = new LGraph()
+
+    const upstreamNode = new LGraphNode('Upstream')
+    upstreamNode.addOutput('out', 'IMAGE')
+    graph.add(upstreamNode)
+
+    const bypassedNode = new LGraphNode('Bypassed')
+    bypassedNode.addInput('in', 'IMAGE')
+    bypassedNode.addOutput('out', 'IMAGE')
+    bypassedNode.mode = LGraphEventMode.BYPASS
+    graph.add(bypassedNode)
+
+    upstreamNode.connect(0, bypassedNode, 0)
+
+    const nodeDtoMap = new Map()
+    const upstreamDto = new ExecutableNodeDTO(
+      upstreamNode,
+      [],
+      nodeDtoMap,
+      undefined
+    )
+    nodeDtoMap.set(upstreamDto.id, upstreamDto)
+
+    const bypassedDto = new ExecutableNodeDTO(
+      bypassedNode,
+      [],
+      nodeDtoMap,
+      undefined
+    )
+    nodeDtoMap.set(bypassedDto.id, bypassedDto)
+
+    const resolved = bypassedDto.resolveOutput(0, 'IMAGE', new Set())
+    expect(resolved).toBeDefined()
+    expect(resolved?.node).toBe(upstreamDto)
+  })
+})
+
+describe('ALWAYS mode node output resolution', () => {
+  it('should attempt normal resolution for ALWAYS mode nodes', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('Normal Node')
+    node.addOutput('out', 'IMAGE')
+    node.mode = LGraphEventMode.ALWAYS
+    graph.add(node)
+
+    const nodeDtoMap = new Map()
+    const dto = new ExecutableNodeDTO(node, [], nodeDtoMap, undefined)
+    nodeDtoMap.set(dto.id, dto)
+
+    const resolved = dto.resolveOutput(0, 'IMAGE', new Set())
+    expect(resolved).toBeDefined()
+    expect(resolved?.node).toBe(dto)
+    expect(resolved?.origin_slot).toBe(0)
+  })
+})
+
 describe.skip('ExecutableNodeDTO Properties', () => {
   it('should provide access to basic properties', () => {
     const graph = new LGraph()

src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts

@@ -266,6 +266,9 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
     }
     visited.add(uniqueId)
 
+    // Muted nodes produce no output
+    if (this.mode === LGraphEventMode.NEVER) return
+
     // Upstreamed: Bypass nodes are bypassed using the first input with matching type
     if (this.mode === LGraphEventMode.BYPASS) {
       // Bypass nodes by finding first input with matching type

src/locales/ar/main.json

@@ -3229,10 +3229,6 @@
     "addedToWorkspace": "تمت إضافتك إلى {workspaceName}",
     "inviteAccepted": "تم قبول الدعوة",
     "inviteFailed": "فشل في قبول الدعوة",
-    "unsavedChanges": {
-      "message": "لديك تغييرات غير محفوظة. هل تريد تجاهلها والانتقال إلى مساحة عمل أخرى؟",
-      "title": "تغييرات غير محفوظة"
-    },
     "viewWorkspace": "عرض مساحة العمل"
   },
   "workspaceAuth": {

src/locales/en/main.json

@@ -3178,6 +3178,10 @@
     "backToWorkflow": "Back to workflow",
     "loadTemplate": "Load a template",
     "cancelThisRun": "Cancel this run",
+    "deleteAllAssets": "Delete all assets from this run",
+    "hasCreditCost": "Requires additional credits",
+    "viewGraph": "View node graph",
+    "mobileNoWorkflow": "This workflow hasn't been built for app mode. Try a different one.",
     "welcome": {
       "title": "App Mode",
       "message": "A simplified view that hides the node graph so you can focus on creating.",
@@ -3222,6 +3226,19 @@
       "outputPlaceholder": "Output nodes will show up here",
       "outputRequiredPlaceholder": "At least one node is required"
     },
+    "error": {
+      "header": "This app encountered an error",
+      "log": "Error Logs",
+      "mobileFixable": "Check {0} for errors",
+      "requiresGraph": "Something went wrong during generation. This could be due to invalid hidden inputs, missing resources, or workflow configuration issues.",
+      "promptVisitGraph": "View the node graph to see the full error.",
+      "getHelp": "For help, view our {0}, {1}, or {2} with the copied error.",
+      "goto": "Show errors in graph",
+      "github": "submit a GitHub issue",
+      "guide": "troubleshooting guide",
+      "support": "contact our support",
+      "promptShow": "Show error report"
+    },
     "queue": {
       "clickToClear": "Click to clear queue",
       "clear": "Clear queue"
@@ -3404,14 +3421,11 @@
     "retryDownload": "Retry download"
   },
   "workspace": {
-    "unsavedChanges": {
-      "title": "Unsaved Changes",
-      "message": "You have unsaved changes. Do you want to discard them and switch workspaces?"
-    },
     "inviteAccepted": "Invite Accepted",
     "addedToWorkspace": "You have been added to:",
     "inviteFailed": "Failed to Accept Invite",
-    "viewWorkspace": "View workspace"
+    "viewWorkspace": "View workspace",
+    "switchFailed": "Failed to switch workspace. Please try again."
   },
   "workspaceAuth": {
     "errors": {

src/locales/es/main.json

@@ -3229,10 +3229,6 @@
     "addedToWorkspace": "Has sido añadido a {workspaceName}",
     "inviteAccepted": "Invitación aceptada",
     "inviteFailed": "No se pudo aceptar la invitación",
-    "unsavedChanges": {
-      "message": "Tienes cambios no guardados. ¿Quieres descartarlos y cambiar de espacio de trabajo?",
-      "title": "Cambios no guardados"
-    },
     "viewWorkspace": "Ver espacio de trabajo"
   },
   "workspaceAuth": {

src/locales/fa/main.json

@@ -3241,10 +3241,6 @@
     "addedToWorkspace": "شما به {workspaceName} اضافه شدید",
     "inviteAccepted": "دعوت پذیرفته شد",
     "inviteFailed": "پذیرش دعوت ناموفق بود",
-    "unsavedChanges": {
-      "message": "شما تغییرات ذخیره‌نشده دارید. آیا می‌خواهید آن‌ها را رها کرده و فضای کاری را تغییر دهید؟",
-      "title": "تغییرات ذخیره‌نشده"
-    },
     "viewWorkspace": "مشاهده workspace"
   },
   "workspaceAuth": {

src/locales/fr/main.json

@@ -3229,10 +3229,6 @@
     "addedToWorkspace": "Vous avez été ajouté à {workspaceName}",
     "inviteAccepted": "Invitation acceptée",
     "inviteFailed": "Échec de l'acceptation de l'invitation",
-    "unsavedChanges": {
-      "message": "Vous avez des modifications non enregistrées. Voulez-vous les abandonner et changer d’espace de travail ?",
-      "title": "Modifications non enregistrées"
-    },
     "viewWorkspace": "Voir l’espace de travail"
   },
   "workspaceAuth": {

src/locales/ja/main.json

@@ -3229,10 +3229,6 @@
     "addedToWorkspace": "{workspaceName}に追加されました",
     "inviteAccepted": "招待を承諾しました",
     "inviteFailed": "招待の承諾に失敗しました",
-    "unsavedChanges": {
-      "message": "未保存の変更があります。破棄してワークスペースを切り替えますか？",
-      "title": "未保存の変更"
-    },
     "viewWorkspace": "ワークスペースを見る"
   },
   "workspaceAuth": {

src/locales/ko/main.json

@@ -3229,10 +3229,6 @@
     "addedToWorkspace": "{workspaceName} 워크스페이스에 추가되었습니다",
     "inviteAccepted": "초대 수락됨",
     "inviteFailed": "초대 수락에 실패했습니다",
-    "unsavedChanges": {
-      "message": "저장되지 않은 변경 사항이 있습니다. 변경 사항을 취소하고 워크스페이스를 전환하시겠습니까?",
-      "title": "저장되지 않은 변경 사항"
-    },
     "viewWorkspace": "워크스페이스 보기"
   },
   "workspaceAuth": {

src/locales/pt-BR/main.json

@@ -3241,10 +3241,6 @@
     "addedToWorkspace": "Você foi adicionado ao {workspaceName}",
     "inviteAccepted": "Convite aceito",
     "inviteFailed": "Falha ao aceitar convite",
-    "unsavedChanges": {
-      "message": "Você tem alterações não salvas. Deseja descartá-las e trocar de espaço de trabalho?",
-      "title": "Alterações não salvas"
-    },
     "viewWorkspace": "Ver workspace"
   },
   "workspaceAuth": {

src/locales/ru/main.json

@@ -3229,10 +3229,6 @@
     "addedToWorkspace": "Вы были добавлены в {workspaceName}",
     "inviteAccepted": "Приглашение принято",
     "inviteFailed": "Не удалось принять приглашение",
-    "unsavedChanges": {
-      "message": "У вас есть несохранённые изменения. Хотите их отменить и переключиться на другое рабочее пространство?",
-      "title": "Несохранённые изменения"
-    },
     "viewWorkspace": "Просмотреть рабочее пространство"
   },
   "workspaceAuth": {

src/locales/tr/main.json

@@ -3229,10 +3229,6 @@
     "addedToWorkspace": "{workspaceName} çalışma alanına eklendiniz",
     "inviteAccepted": "Davet kabul edildi",
     "inviteFailed": "Davet kabul edilemedi",
-    "unsavedChanges": {
-      "message": "Kaydedilmemiş değişiklikleriniz var. Bunları iptal edip çalışma alanlarını değiştirmek istiyor musunuz?",
-      "title": "Kaydedilmemiş Değişiklikler"
-    },
     "viewWorkspace": "Çalışma alanını görüntüle"
   },
   "workspaceAuth": {

src/locales/zh-TW/main.json

@@ -3229,10 +3229,6 @@
     "addedToWorkspace": "你已被加入 {workspaceName}",
     "inviteAccepted": "已接受邀請",
     "inviteFailed": "接受邀請失敗",
-    "unsavedChanges": {
-      "message": "您有未儲存的變更。是否要捨棄這些變更並切換工作區？",
-      "title": "未儲存的變更"
-    },
     "viewWorkspace": "檢視工作區"
   },
   "workspaceAuth": {

src/locales/zh/main.json

@@ -3241,10 +3241,6 @@
     "addedToWorkspace": "您已被加入 {workspaceName}",
     "inviteAccepted": "邀请已接受",
     "inviteFailed": "接受邀请失败",
-    "unsavedChanges": {
-      "message": "您有未保存的更改。是否要放弃这些更改并切换工作区？",
-      "title": "未保存的更改"
-    },
     "viewWorkspace": "查看工作区"
   },
   "workspaceAuth": {

src/platform/assets/components/MediaAssetCard.vue

@@ -235,7 +235,7 @@ const adaptedAsset = computed(() => {
     id: asset.id,
     name: asset.name,
     kind: fileKind.value,
-    src: asset.preview_url || '',
+    src: asset.thumbnail_url || asset.preview_url || '',
     size: asset.size,
     tags: asset.tags || [],
     created_at: asset.created_at,

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

@@ -44,7 +44,8 @@ export function mapTaskOutputToAssetItem(
       ? new Date(taskItem.executionStartTimestamp).toISOString()
       : new Date().toISOString(),
     tags: ['output'],
-    preview_url: output.previewUrl,
+    thumbnail_url: output.previewUrl,
+    preview_url: output.url,
     user_metadata: metadata
   }
 }
@@ -62,6 +63,7 @@ export function mapInputFileToAssetItem(
   directory: 'input' | 'output' = 'input'
 ): AssetItem {
   const params = new URLSearchParams({ filename, type: directory })
+  const preview_url = api.apiURL(`/view?${params}`)
   appendCloudResParam(params, filename)
 
   return {
@@ -70,6 +72,7 @@ export function mapInputFileToAssetItem(
     size: 0,
     created_at: new Date().toISOString(),
     tags: [directory],
-    preview_url: api.apiURL(`/view?${params}`)
+    thumbnail_url: api.apiURL(`/view?${params}`),
+    preview_url
   }
 }

src/platform/assets/composables/useMediaAssetActions.ts

@@ -84,8 +84,7 @@ export function useMediaAssetActions() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('g.failedToDownloadImage'),
-        life: 3000
+        detail: t('g.failedToDownloadImage')
       })
     }
   }
@@ -126,8 +125,7 @@ export function useMediaAssetActions() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('g.failedToDownloadImage'),
-        life: 3000
+        detail: t('g.failedToDownloadImage')
       })
     }
   }
@@ -182,8 +180,7 @@ export function useMediaAssetActions() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('exportToast.exportFailedSingle'),
-        life: 3000
+        detail: t('exportToast.exportFailedSingle')
       })
     }
   }
@@ -238,8 +235,7 @@ export function useMediaAssetActions() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('mediaAsset.nodeTypeNotFound', { nodeType }),
-        life: 3000
+        detail: t('mediaAsset.nodeTypeNotFound', { nodeType })
       })
       return
     }
@@ -252,8 +248,7 @@ export function useMediaAssetActions() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('mediaAsset.failedToCreateNode'),
-        life: 3000
+        detail: t('mediaAsset.failedToCreateNode')
       })
       return
     }
@@ -443,8 +438,7 @@ export function useMediaAssetActions() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('mediaAsset.selection.failedToAddNodes'),
-        life: 3000
+        detail: t('mediaAsset.selection.failedToAddNodes')
       })
     } else {
       toast.add({
@@ -676,8 +670,7 @@ export function useMediaAssetActions() {
                   summary: t('g.error'),
                   detail: isSingle
                     ? t('mediaAsset.failedToDeleteAsset')
-                    : t('mediaAsset.selection.failedToDeleteAssets'),
-                  life: 3000
+                    : t('mediaAsset.selection.failedToDeleteAssets')
                 })
               } else {
                 // Partial success (only possible with multiple assets)
@@ -698,8 +691,7 @@ export function useMediaAssetActions() {
                 summary: t('g.error'),
                 detail: isSingle
                   ? t('mediaAsset.failedToDeleteAsset')
-                  : t('mediaAsset.selection.failedToDeleteAssets'),
-                life: 3000
+                  : t('mediaAsset.selection.failedToDeleteAssets')
               })
             } finally {
               // Hide loading overlay for all assets

src/platform/assets/schemas/assetSchema.ts

@@ -10,6 +10,7 @@ const zAsset = z.object({
   tags: z.array(z.string()).optional().default([]),
   preview_id: z.string().nullable().optional(),
   preview_url: z.string().optional(),
+  thumbnail_url: z.string().optional(),
   created_at: z.string().optional(),
   updated_at: z.string().optional(),
   is_immutable: z.boolean().optional(),

src/platform/assets/utils/createAssetWidget.ts

@@ -73,8 +73,7 @@ export function createAssetWidget(
           toastStore.add({
             severity: 'error',
             summary: t('assetBrowser.invalidAsset'),
-            detail: t('assetBrowser.invalidAssetDetail'),
-            life: 5000
+            detail: t('assetBrowser.invalidAssetDetail')
           })
           return
         }
@@ -92,8 +91,7 @@ export function createAssetWidget(
           toastStore.add({
             severity: 'error',
             summary: t('assetBrowser.invalidFilename'),
-            detail: t('assetBrowser.invalidFilenameDetail'),
-            life: 5000
+            detail: t('assetBrowser.invalidFilenameDetail')
           })
           return
         }

src/platform/assets/utils/outputAssetUtil.ts

@@ -72,7 +72,8 @@ function mapOutputsToAssetItems({
       size: 0,
       created_at: createdAtValue,
       tags: ['output'],
-      preview_url: output.previewUrl,
+      thumbnail_url: output.previewUrl,
+      preview_url: output.url,
       user_metadata: {
         jobId,
         nodeId: output.nodeId,

src/platform/nodeReplacement/useNodeReplacement.ts

@@ -317,8 +317,7 @@ export function useNodeReplacement() {
       toastStore.add({
         severity: 'error',
         summary: t('g.error', 'Error'),
-        detail: t('nodeReplacement.replaceFailed', 'Failed to replace nodes'),
-        life: 5000
+        detail: t('nodeReplacement.replaceFailed', 'Failed to replace nodes')
       })
       return replacedTypes
     } finally {

src/platform/remote/comfyui/jobs/fetchJobs.test.ts

@@ -150,6 +150,41 @@ describe('fetchJobs', () => {
 
       expect(result).toEqual([])
     })
+
+    it('parses batch containing text-only preview outputs', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve(
+            createMockResponse([
+              createMockJob('image-job', 'completed', {
+                preview_output: {
+                  filename: 'output.png',
+                  subfolder: '',
+                  type: 'output',
+                  nodeId: '1',
+                  mediaType: 'images'
+                }
+              }),
+              createMockJob('text-job', 'completed', {
+                preview_output: {
+                  content: 'some generated text',
+                  nodeId: '5',
+                  mediaType: 'text'
+                }
+              }),
+              createMockJob('no-preview-job', 'completed')
+            ])
+          )
+      })
+
+      const result = await fetchHistory(mockFetch)
+
+      expect(result).toHaveLength(3)
+      expect(result[0].id).toBe('image-job')
+      expect(result[1].id).toBe('text-job')
+      expect(result[2].id).toBe('no-preview-job')
+    })
   })
 
   describe('fetchQueue', () => {

src/platform/remote/comfyui/jobs/jobTypes.ts

@@ -18,13 +18,16 @@ const zJobStatus = z.enum([
   'cancelled'
 ])
 
-const zPreviewOutput = z.object({
-  filename: z.string(),
-  subfolder: z.string(),
-  type: resultItemType,
-  nodeId: z.string(),
-  mediaType: z.string()
-})
+const zPreviewOutput = z
+  .object({
+    filename: z.string().optional(),
+    subfolder: z.string().optional(),
+    type: resultItemType.optional(),
+    nodeId: z.string(),
+    mediaType: z.string(),
+    display_name: z.string().optional()
+  })
+  .passthrough()
 
 /**
  * Execution error from Jobs API.

src/platform/secrets/composables/useSecrets.test.ts

@@ -83,8 +83,7 @@ describe('useSecrets', () => {
       expect(mockAdd).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'g.error',
-        detail: 'Network error',
-        life: 5000
+        detail: 'Network error'
       })
     })
   })
@@ -130,8 +129,7 @@ describe('useSecrets', () => {
       expect(mockAdd).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'g.error',
-        detail: 'Delete failed',
-        life: 5000
+        detail: 'Delete failed'
       })
     })
   })

src/platform/secrets/composables/useSecrets.ts

@@ -33,16 +33,14 @@ export function useSecrets() {
         toastStore.add({
           severity: 'error',
           summary: t('g.error'),
-          detail: err.message,
-          life: 5000
+          detail: err.message
         })
       } else {
         console.error('Unexpected error fetching secrets:', err)
         toastStore.add({
           severity: 'error',
           summary: t('g.error'),
-          detail: t('g.unknownError'),
-          life: 5000
+          detail: t('g.unknownError')
         })
       }
     } finally {
@@ -60,16 +58,14 @@ export function useSecrets() {
         toastStore.add({
           severity: 'error',
           summary: t('g.error'),
-          detail: err.message,
-          life: 5000
+          detail: err.message
         })
       } else {
         console.error('Unexpected error deleting secret:', err)
         toastStore.add({
           severity: 'error',
           summary: t('g.error'),
-          detail: t('g.unknownError'),
-          life: 5000
+          detail: t('g.unknownError')
         })
       }
     } finally {

src/platform/workflow/core/services/workflowService.ts

@@ -370,8 +370,7 @@ export const useWorkflowService = () => {
             toastStore.add({
               severity: 'error',
               summary: t('g.error'),
-              detail: t('toastMessages.failedToSaveDraft'),
-              life: 3000
+              detail: t('toastMessages.failedToSaveDraft')
             })
           }
         }

src/platform/workflow/persistence/composables/useWorkflowPersistenceV2.test.ts

@@ -0,0 +1,360 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type * as I18n from 'vue-i18n'
+
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowDraftStoreV2 } from '../stores/workflowDraftStoreV2'
+import { useWorkflowPersistenceV2 } from './useWorkflowPersistenceV2'
+
+const settingMocks = vi.hoisted(() => ({
+  persistRef: null as { value: boolean } | null
+}))
+
+vi.mock('@/platform/settings/settingStore', async () => {
+  const { ref } = await import('vue')
+  settingMocks.persistRef = ref(true)
+  return {
+    useSettingStore: vi.fn(() => ({
+      get: vi.fn((key: string) => {
+        if (key === 'Comfy.Workflow.Persist')
+          return settingMocks.persistRef!.value
+        return undefined
+      }),
+      set: vi.fn()
+    }))
+  }
+})
+
+const mockToastAdd = vi.fn()
+vi.mock('primevue', () => ({
+  useToast: () => ({
+    add: mockToastAdd
+  })
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({
+    add: mockToastAdd
+  })
+}))
+
+vi.mock(
+  '@/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader',
+  () => ({
+    useSharedWorkflowUrlLoader: () => ({
+      loadSharedWorkflowFromUrl: vi.fn().mockResolvedValue('not-present')
+    })
+  })
+)
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof I18n>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }
+})
+
+const openWorkflowMock = vi.fn()
+const loadBlankWorkflowMock = vi.fn()
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
+  useWorkflowService: () => ({
+    openWorkflow: openWorkflowMock,
+    loadBlankWorkflow: loadBlankWorkflowMock
+  })
+}))
+
+vi.mock(
+  '@/platform/workflow/templates/composables/useTemplateUrlLoader',
+  () => ({
+    useTemplateUrlLoader: () => ({
+      loadTemplateFromUrl: vi.fn()
+    })
+  })
+)
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: vi.fn()
+  })
+}))
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    query: {}
+  }),
+  useRouter: () => ({
+    replace: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: () => ({
+    onUserLogout: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/navigation/preservedQueryManager', () => ({
+  hydratePreservedQuery: vi.fn(),
+  mergePreservedQueryIntoQuery: vi.fn(() => null)
+}))
+
+vi.mock('@/platform/navigation/preservedQueryNamespaces', () => ({
+  PRESERVED_QUERY_NAMESPACES: { TEMPLATE: 'template' }
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+vi.mock('../migration/migrateV1toV2', () => ({
+  migrateV1toV2: vi.fn()
+}))
+
+type GraphChangedHandler = (() => void) | null
+
+const mocks = vi.hoisted(() => {
+  const state = {
+    graphChangedHandler: null as GraphChangedHandler,
+    currentGraph: {} as Record<string, unknown>
+  }
+  const serializeMock = vi.fn(() => state.currentGraph)
+  const loadGraphDataMock = vi.fn()
+  const apiMock = {
+    clientId: 'test-client',
+    initialClientId: 'test-client',
+    addEventListener: vi.fn((event: string, handler: () => void) => {
+      if (event === 'graphChanged') {
+        state.graphChangedHandler = handler
+      }
+    }),
+    removeEventListener: vi.fn()
+  }
+  return { state, serializeMock, loadGraphDataMock, apiMock }
+})
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    graph: {
+      serialize: () => mocks.serializeMock()
+    },
+    rootGraph: {
+      serialize: () => mocks.serializeMock()
+    },
+    loadGraphData: (...args: unknown[]) => mocks.loadGraphDataMock(...args),
+    canvas: {}
+  }
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: mocks.apiMock
+}))
+
+describe('useWorkflowPersistenceV2', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2025-01-01T00:00:00Z'))
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    localStorage.clear()
+    sessionStorage.clear()
+    vi.clearAllMocks()
+    settingMocks.persistRef!.value = true
+    mocks.state.graphChangedHandler = null
+    mocks.state.currentGraph = { initial: true }
+    mocks.serializeMock.mockImplementation(() => mocks.state.currentGraph)
+    mocks.loadGraphDataMock.mockReset()
+    mocks.apiMock.clientId = 'test-client'
+    mocks.apiMock.initialClientId = 'test-client'
+    mocks.apiMock.addEventListener.mockImplementation(
+      (event: string, handler: () => void) => {
+        if (event === 'graphChanged') {
+          mocks.state.graphChangedHandler = handler
+        }
+      }
+    )
+    mocks.apiMock.removeEventListener.mockImplementation(() => {})
+    openWorkflowMock.mockReset()
+    loadBlankWorkflowMock.mockReset()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  function writeTabState(paths: string[], activeIndex: number) {
+    const pointer = {
+      workspaceId: 'personal',
+      paths,
+      activeIndex
+    }
+    sessionStorage.setItem(
+      `Comfy.Workflow.OpenPaths:test-client`,
+      JSON.stringify(pointer)
+    )
+  }
+
+  function writeActivePath(path: string) {
+    const pointer = {
+      workspaceId: 'personal',
+      path
+    }
+    sessionStorage.setItem(
+      `Comfy.Workflow.ActivePath:test-client`,
+      JSON.stringify(pointer)
+    )
+  }
+
+  describe('loadPreviousWorkflowFromStorage', () => {
+    it('loads saved workflow when draft is missing for session path', async () => {
+      const workflowStore = useWorkflowStore()
+      const savedWorkflow = workflowStore.createTemporary('SavedWorkflow.json')
+
+      // Set session path to the saved workflow but do NOT create a draft
+      writeActivePath(savedWorkflow.path)
+
+      const { initializeWorkflow } = useWorkflowPersistenceV2()
+      await initializeWorkflow()
+
+      // Should call workflowService.openWorkflow with the saved workflow
+      expect(openWorkflowMock).toHaveBeenCalledWith(savedWorkflow)
+      // Should NOT fall through to loadGraphData (fallbackToLatestDraft)
+      expect(mocks.loadGraphDataMock).not.toHaveBeenCalled()
+    })
+
+    it('prefers draft over saved workflow when draft exists', async () => {
+      const workflowStore = useWorkflowStore()
+      const draftStore = useWorkflowDraftStoreV2()
+
+      const workflow = workflowStore.createTemporary('DraftWorkflow.json')
+      const draftData = JSON.stringify({ nodes: [], title: 'draft' })
+      draftStore.saveDraft(workflow.path, draftData, {
+        name: 'DraftWorkflow.json',
+        isTemporary: true
+      })
+      writeActivePath(workflow.path)
+
+      mocks.loadGraphDataMock.mockResolvedValue(undefined)
+
+      const { initializeWorkflow } = useWorkflowPersistenceV2()
+      await initializeWorkflow()
+
+      // Should load draft via loadGraphData, not via workflowService.openWorkflow
+      expect(mocks.loadGraphDataMock).toHaveBeenCalled()
+      expect(openWorkflowMock).not.toHaveBeenCalled()
+    })
+
+    it('falls back to latest draft only when no session path exists', async () => {
+      const draftStore = useWorkflowDraftStoreV2()
+
+      // No session path set, but a draft exists
+      const draftData = JSON.stringify({ nodes: [], title: 'latest' })
+      draftStore.saveDraft('workflows/Other.json', draftData, {
+        name: 'Other.json',
+        isTemporary: true
+      })
+
+      mocks.loadGraphDataMock.mockResolvedValue(undefined)
+
+      const { initializeWorkflow } = useWorkflowPersistenceV2()
+      await initializeWorkflow()
+
+      // Should load via fallbackToLatestDraft
+      expect(mocks.loadGraphDataMock).toHaveBeenCalled()
+      expect(openWorkflowMock).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('restoreWorkflowTabsState', () => {
+    it('activates the correct workflow at storedActiveIndex', async () => {
+      const workflowStore = useWorkflowStore()
+      const draftStore = useWorkflowDraftStoreV2()
+
+      // Create two temporary workflows with drafts
+      const workflowA = workflowStore.createTemporary('WorkflowA.json')
+      const workflowB = workflowStore.createTemporary('WorkflowB.json')
+
+      draftStore.saveDraft(workflowA.path, JSON.stringify({ title: 'A' }), {
+        name: 'WorkflowA.json',
+        isTemporary: true
+      })
+      draftStore.saveDraft(workflowB.path, JSON.stringify({ title: 'B' }), {
+        name: 'WorkflowB.json',
+        isTemporary: true
+      })
+
+      // storedActiveIndex = 1 → WorkflowB should be activated
+      writeTabState([workflowA.path, workflowB.path], 1)
+
+      const { restoreWorkflowTabsState } = useWorkflowPersistenceV2()
+      await restoreWorkflowTabsState()
+
+      expect(openWorkflowMock).toHaveBeenCalledWith(workflowB)
+    })
+
+    it('activates first tab when storedActiveIndex is 0', async () => {
+      const workflowStore = useWorkflowStore()
+      const draftStore = useWorkflowDraftStoreV2()
+
+      const workflowA = workflowStore.createTemporary('WorkflowA.json')
+      const workflowB = workflowStore.createTemporary('WorkflowB.json')
+
+      draftStore.saveDraft(workflowA.path, JSON.stringify({ title: 'A' }), {
+        name: 'WorkflowA.json',
+        isTemporary: true
+      })
+      draftStore.saveDraft(workflowB.path, JSON.stringify({ title: 'B' }), {
+        name: 'WorkflowB.json',
+        isTemporary: true
+      })
+
+      writeTabState([workflowA.path, workflowB.path], 0)
+
+      const { restoreWorkflowTabsState } = useWorkflowPersistenceV2()
+      await restoreWorkflowTabsState()
+
+      expect(openWorkflowMock).toHaveBeenCalledWith(workflowA)
+    })
+
+    it('does not call openWorkflow when no restorable state', async () => {
+      // No tab state written to sessionStorage
+      const { restoreWorkflowTabsState } = useWorkflowPersistenceV2()
+      await restoreWorkflowTabsState()
+
+      expect(openWorkflowMock).not.toHaveBeenCalled()
+    })
+
+    it('restores temporary workflows and adds them to tabs', async () => {
+      const workflowStore = useWorkflowStore()
+      const draftStore = useWorkflowDraftStoreV2()
+
+      // Save a draft for a workflow that doesn't exist in the store yet
+      const path = 'workflows/Unsaved.json'
+      draftStore.saveDraft(path, JSON.stringify({ title: 'Unsaved' }), {
+        name: 'Unsaved.json',
+        isTemporary: true
+      })
+
+      writeTabState([path], 0)
+
+      const { restoreWorkflowTabsState } = useWorkflowPersistenceV2()
+      await restoreWorkflowTabsState()
+
+      const restored = workflowStore.getWorkflowByPath(path)
+      expect(restored).toBeTruthy()
+      expect(restored?.isTemporary).toBe(true)
+      expect(workflowStore.openWorkflows.map((w) => w?.path)).toContain(path)
+    })
+
+    it('skips activation when persistence is disabled', async () => {
+      settingMocks.persistRef!.value = false
+
+      const { restoreWorkflowTabsState } = useWorkflowPersistenceV2()
+      await restoreWorkflowTabsState()
+
+      expect(openWorkflowMock).not.toHaveBeenCalled()
+    })
+  })
+})

src/platform/workflow/persistence/composables/useWorkflowPersistenceV2.ts

@@ -112,8 +112,7 @@ export function useWorkflowPersistenceV2() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('toastMessages.failedToSaveDraft'),
-        life: 3000
+        detail: t('toastMessages.failedToSaveDraft')
       })
       return
     }
@@ -133,19 +132,28 @@ export function useWorkflowPersistenceV2() {
   const debouncedPersist = debounce(persistCurrentWorkflow, PERSIST_DEBOUNCE_MS)
 
   const loadPreviousWorkflowFromStorage = async () => {
-    // 1. Try session pointer (for tab restoration)
     const sessionPath = tabState.getActivePath()
+
+    // 1. Try draft for session path
     if (
       sessionPath &&
       (await draftStore.loadPersistedWorkflow({
         workflowName: null,
         preferredPath: sessionPath
       }))
-    ) {
+    )
       return true
+
+    // 2. Try saved workflow by path (draft may not exist for saved+unmodified workflows)
+    if (sessionPath) {
+      const saved = workflowStore.getWorkflowByPath(sessionPath)
+      if (saved) {
+        await useWorkflowService().openWorkflow(saved)
+        return true
+      }
     }
 
-    // 2. Fall back to most recent draft
+    // 3. Fall back to most recent draft
     return await draftStore.loadPersistedWorkflow({
       workflowName: null,
       fallbackToLatestDraft: true
@@ -243,7 +251,7 @@ export function useWorkflowPersistenceV2() {
     }
   })
 
-  const restoreWorkflowTabsState = () => {
+  const restoreWorkflowTabsState = async () => {
     if (!workflowPersistenceEnabled.value) {
       tabStateRestored = true
       return
@@ -255,10 +263,11 @@ export function useWorkflowPersistenceV2() {
     const storedWorkflows = storedTabState?.paths ?? []
     const storedActiveIndex = storedTabState?.activeIndex ?? -1
 
-    tabStateRestored = true
-
     const isRestorable = storedWorkflows.length > 0 && storedActiveIndex >= 0
-    if (!isRestorable) return
+    if (!isRestorable) {
+      tabStateRestored = true
+      return
+    }
 
     storedWorkflows.forEach((path: string) => {
       if (workflowStore.getWorkflowByPath(path)) return
@@ -281,6 +290,17 @@ export function useWorkflowPersistenceV2() {
       left: storedWorkflows.slice(0, storedActiveIndex),
       right: storedWorkflows.slice(storedActiveIndex)
     })
+
+    tabStateRestored = true
+
+    // Activate the correct workflow at storedActiveIndex
+    const activePath = storedWorkflows[storedActiveIndex]
+    const workflow = activePath
+      ? workflowStore.getWorkflowByPath(activePath)
+      : null
+    if (workflow) {
+      await useWorkflowService().openWorkflow(workflow)
+    }
   }
 
   return {

src/platform/workflow/sharing/components/ShareWorkflowDialogContent.test.ts

@@ -484,8 +484,7 @@ describe('ShareWorkflowDialogContent', () => {
       expect(mockToast.add).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'Error',
-        detail: 'Publish failed',
-        life: 5000
+        detail: 'Publish failed'
       })
     })
 

src/platform/workflow/sharing/components/ShareWorkflowDialogContent.vue

@@ -352,8 +352,7 @@ const { isLoading: isSaving, execute: handleSave } = useAsyncState(
       toast.add({
         severity: 'error',
         summary: t('shareWorkflow.saveFailedTitle'),
-        detail: t('shareWorkflow.saveFailedDescription'),
-        life: 5000
+        detail: t('shareWorkflow.saveFailedDescription')
       })
     }
   }
@@ -391,8 +390,7 @@ const {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: error instanceof Error ? error.message : t('g.error'),
-        life: 5000
+        detail: error instanceof Error ? error.message : t('g.error')
       })
     }
   }

src/platform/workflow/sharing/components/profile/ComfyHubCreateProfileForm.vue

@@ -183,8 +183,7 @@ async function handleCreate() {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: error instanceof Error ? error.message : t('g.error'),
-      life: 5000
+      detail: error instanceof Error ? error.message : t('g.error')
     })
   } finally {
     isCreating.value = false

src/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader.test.ts

@@ -338,8 +338,7 @@ describe('useSharedWorkflowUrlLoader', () => {
     expect(mockToastAdd).toHaveBeenCalledWith({
       severity: 'error',
       summary: 'Error',
-      detail: 'Failed to load shared workflow',
-      life: 3000
+      detail: 'Failed to load shared workflow'
     })
     expect(mockRouterReplace).toHaveBeenCalledWith({ query: {} })
     expect(preservedQueryMocks.clearPreservedQuery).toHaveBeenCalledWith(

src/platform/workflow/sharing/composables/useSharedWorkflowUrlLoader.ts

@@ -118,8 +118,7 @@ export function useSharedWorkflowUrlLoader() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('shareWorkflow.loadFailed'),
-        life: 3000
+        detail: t('shareWorkflow.loadFailed')
       })
       cleanupUrlParams()
       clearPreservedQuery(SHARE_NAMESPACE)
@@ -148,8 +147,7 @@ export function useSharedWorkflowUrlLoader() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('shareWorkflow.loadFailed'),
-        life: 5000
+        detail: t('shareWorkflow.loadFailed')
       })
       return 'failed'
     }

src/platform/workflow/templates/composables/useTemplateUrlLoader.test.ts

@@ -145,8 +145,7 @@ describe('useTemplateUrlLoader', () => {
     expect(mockToastAdd).toHaveBeenCalledWith({
       severity: 'error',
       summary: 'Error',
-      detail: 'Template "invalid-template" not found',
-      life: 3000
+      detail: 'Template "invalid-template" not found'
     })
   })
 
@@ -239,8 +238,7 @@ describe('useTemplateUrlLoader', () => {
     expect(mockToastAdd).toHaveBeenCalledWith({
       severity: 'error',
       summary: 'Error',
-      detail: 'Failed to load template',
-      life: 3000
+      detail: 'Failed to load template'
     })
   })
 

src/platform/workflow/templates/composables/useTemplateUrlLoader.ts

@@ -117,8 +117,7 @@ export function useTemplateUrlLoader() {
           summary: t('g.error'),
           detail: t('templateWorkflows.error.templateNotFound', {
             templateName: templateParam
-          }),
-          life: 3000
+          })
         })
       } else if (modeParam === 'linear') {
         // Set linear mode after successful template load
@@ -132,8 +131,7 @@ export function useTemplateUrlLoader() {
       toast.add({
         severity: 'error',
         summary: t('g.error'),
-        detail: t('g.errorLoadingTemplate'),
-        life: 3000
+        detail: t('g.errorLoadingTemplate')
       })
     } finally {
       cleanupUrlParams()

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -428,8 +428,7 @@ async function handleResubscribe() {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: message,
-      life: 5000
+      detail: message
     })
   } finally {
     isResubscribing.value = false

src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue

@@ -148,8 +148,7 @@ async function handleSubscribeClick(payload: {
       toast.add({
         severity: 'error',
         summary: 'Unable to subscribe',
-        detail: 'This plan is not available',
-        life: 5000
+        detail: 'This plan is not available'
       })
       return
     }
@@ -159,8 +158,7 @@ async function handleSubscribeClick(payload: {
       toast.add({
         severity: 'error',
         summary: 'Unable to subscribe',
-        detail: response?.reason || 'This plan is not available',
-        life: 5000
+        detail: response?.reason || 'This plan is not available'
       })
       return
     }
@@ -175,8 +173,7 @@ async function handleSubscribeClick(payload: {
     toast.add({
       severity: 'error',
       summary: 'Error',
-      detail: message,
-      life: 5000
+      detail: message
     })
   } finally {
     isLoadingPreview.value = false
@@ -236,8 +233,7 @@ async function handleAddCreditCard() {
     toast.add({
       severity: 'error',
       summary: 'Error',
-      detail: message,
-      life: 5000
+      detail: message
     })
   } finally {
     isSubscribing.value = false
@@ -291,8 +287,7 @@ async function handleConfirmTransition() {
     toast.add({
       severity: 'error',
       summary: 'Error',
-      detail: message,
-      life: 5000
+      detail: message
     })
   } finally {
     isSubscribing.value = false
@@ -316,8 +311,7 @@ async function handleResubscribe() {
     toast.add({
       severity: 'error',
       summary: 'Error',
-      detail: message,
-      life: 5000
+      detail: message
     })
   } finally {
     isResubscribing.value = false

src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue

@@ -273,8 +273,7 @@ async function handleBuy() {
       toast.add({
         severity: 'error',
         summary: t('credits.topUp.purchaseError'),
-        detail: t('credits.topUp.unknownError'),
-        life: 5000
+        detail: t('credits.topUp.unknownError')
       })
     }
   } catch (error) {
@@ -285,8 +284,7 @@ async function handleBuy() {
     toast.add({
       severity: 'error',
       summary: t('credits.topUp.purchaseError'),
-      detail: t('credits.topUp.purchaseErrorDetail', { error: errorMessage }),
-      life: 5000
+      detail: t('credits.topUp.purchaseErrorDetail', { error: errorMessage })
     })
   } finally {
     loading.value = false

src/platform/workspace/components/WorkspaceSwitcherPopover.vue

@@ -139,7 +139,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const { switchWithConfirmation } = useWorkspaceSwitch()
+const { switchWorkspace } = useWorkspaceSwitch()
 const { subscription } = useBillingContext()
 
 const tierKeyMap: Record<string, string> = {
@@ -226,7 +226,7 @@ function getTierLabel(workspace: AvailableWorkspace): string | null {
 }
 
 async function handleSelectWorkspace(workspace: AvailableWorkspace) {
-  const success = await switchWithConfirmation(workspace.id)
+  const success = await switchWorkspace(workspace.id)
   if (success) {
     emit('select', workspace)
   }

src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue

@@ -102,8 +102,7 @@ async function onCreate() {
     toast.add({
       severity: 'error',
       summary: t('workspacePanel.toast.failedToCreateWorkspace'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
+      detail: error instanceof Error ? error.message : t('g.unknownError')
     })
   } finally {
     loading.value = false

src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue

@@ -79,8 +79,7 @@ async function onDelete() {
     toast.add({
       severity: 'error',
       summary: t('workspacePanel.toast.failedToDeleteWorkspace'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
+      detail: error instanceof Error ? error.message : t('g.unknownError')
     })
   } finally {
     loading.value = false

src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue

@@ -94,8 +94,7 @@ async function onSave() {
     toast.add({
       severity: 'error',
       summary: t('workspacePanel.toast.failedToUpdateWorkspace'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
+      detail: error instanceof Error ? error.message : t('g.unknownError')
     })
   } finally {
     loading.value = false

src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue

@@ -138,8 +138,7 @@ async function onCreateLink() {
     toast.add({
       severity: 'error',
       summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed'),
-      detail: error instanceof Error ? error.message : undefined,
-      life: 3000
+      detail: error instanceof Error ? error.message : undefined
     })
   } finally {
     loading.value = false
@@ -161,8 +160,7 @@ async function onCopyLink() {
   } catch {
     toast.add({
       severity: 'error',
-      summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed'),
-      life: 3000
+      summary: t('workspacePanel.inviteMemberDialog.linkCopyFailed')
     })
   }
 }

src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue

@@ -68,8 +68,7 @@ async function onLeave() {
     toast.add({
       severity: 'error',
       summary: t('workspacePanel.toast.failedToLeaveWorkspace'),
-      detail: error instanceof Error ? error.message : t('g.unknownError'),
-      life: 5000
+      detail: error instanceof Error ? error.message : t('g.unknownError')
     })
   } finally {
     loading.value = false

src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue

@@ -73,8 +73,7 @@ async function onRemove() {
   } catch {
     toast.add({
       severity: 'error',
-      summary: t('workspacePanel.removeMemberDialog.error'),
-      life: 3000
+      summary: t('workspacePanel.removeMemberDialog.error')
     })
   } finally {
     loading.value = false

src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue

@@ -69,8 +69,7 @@ async function onRevoke() {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: error instanceof Error ? error.message : undefined,
-      life: 3000
+      detail: error instanceof Error ? error.message : undefined
     })
   } finally {
     loading.value = false

src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue

@@ -543,8 +543,7 @@ async function handleCopyInviteLink(invite: PendingInvite) {
   } catch {
     toast.add({
       severity: 'error',
-      summary: t('g.error'),
-      life: 3000
+      summary: t('g.error')
     })
   }
 }

src/platform/workspace/components/toasts/InviteAcceptedToast.vue

@@ -33,10 +33,18 @@ import { useWorkspaceSwitch } from '@/platform/workspace/composables/useWorkspac
 
 const { t } = useI18n()
 const toast = useToast()
-const { switchWithConfirmation } = useWorkspaceSwitch()
+const { switchWorkspace } = useWorkspaceSwitch()
 
-function viewWorkspace(workspaceId: string) {
-  void switchWithConfirmation(workspaceId)
-  toast.removeGroup('invite-accepted')
+async function viewWorkspace(workspaceId: string) {
+  const success = await switchWorkspace(workspaceId)
+  if (success) {
+    toast.removeGroup('invite-accepted')
+  } else {
+    toast.add({
+      severity: 'error',
+      summary: t('workspace.switchFailed'),
+      life: 5000
+    })
+  }
 }
 </script>

src/platform/workspace/composables/useInviteUrlLoader.test.ts

@@ -151,8 +151,7 @@ describe('useInviteUrlLoader', () => {
       expect(mockToastAdd).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'Failed to Accept Invite',
-        detail: 'Invalid invite',
-        life: 5000
+        detail: 'Invalid invite'
       })
     })
 
@@ -211,8 +210,7 @@ describe('useInviteUrlLoader', () => {
       expect(mockToastAdd).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'Failed to Accept Invite',
-        detail: 'Invalid token',
-        life: 5000
+        detail: 'Invalid token'
       })
     })
 

src/platform/workspace/composables/useInviteUrlLoader.ts

@@ -97,8 +97,7 @@ export function useInviteUrlLoader() {
       toast.add({
         severity: 'error',
         summary: t('workspace.inviteFailed'),
-        detail: error instanceof Error ? error.message : t('g.unknownError'),
-        life: 5000
+        detail: error instanceof Error ? error.message : t('g.unknownError')
       })
     } finally {
       cleanupUrlParams()

src/platform/workspace/composables/useWorkspaceSwitch.test.ts

@@ -20,32 +20,6 @@ vi.mock('pinia', () => ({
   })
 }))
 
-const mockModifiedWorkflows = vi.hoisted(
-  () => [] as Array<{ isModified: boolean }>
-)
-
-vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: () => ({
-    get modifiedWorkflows() {
-      return mockModifiedWorkflows
-    }
-  })
-}))
-
-const mockConfirm = vi.hoisted(() => vi.fn())
-
-vi.mock('@/services/dialogService', () => ({
-  useDialogService: () => ({
-    confirm: mockConfirm
-  })
-}))
-
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string) => key
-  })
-}))
-
 describe('useWorkspaceSwitch', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -57,103 +31,37 @@ describe('useWorkspaceSwitch', () => {
       created_at: '2026-01-01T00:00:00Z',
       joined_at: '2026-01-01T00:00:00Z'
     }
-    mockModifiedWorkflows.length = 0
   })
 
   afterEach(() => {
     vi.unstubAllGlobals()
   })
 
-  describe('hasUnsavedChanges', () => {
-    it('returns true when there are modified workflows', () => {
-      mockModifiedWorkflows.push({ isModified: true })
-      const { hasUnsavedChanges } = useWorkspaceSwitch()
-
-      expect(hasUnsavedChanges()).toBe(true)
-    })
-
-    it('returns true when multiple workflows are modified', () => {
-      mockModifiedWorkflows.push({ isModified: true }, { isModified: true })
-      const { hasUnsavedChanges } = useWorkspaceSwitch()
-
-      expect(hasUnsavedChanges()).toBe(true)
-    })
-
-    it('returns false when no workflows are modified', () => {
-      mockModifiedWorkflows.length = 0
-      const { hasUnsavedChanges } = useWorkspaceSwitch()
-
-      expect(hasUnsavedChanges()).toBe(false)
-    })
-  })
-
-  describe('switchWithConfirmation', () => {
+  describe('switchWorkspace', () => {
     it('returns true immediately if switching to the same workspace', async () => {
-      const { switchWithConfirmation } = useWorkspaceSwitch()
+      const { switchWorkspace } = useWorkspaceSwitch()
 
-      const result = await switchWithConfirmation('workspace-1')
+      const result = await switchWorkspace('workspace-1')
 
       expect(result).toBe(true)
       expect(mockSwitchWorkspace).not.toHaveBeenCalled()
-      expect(mockConfirm).not.toHaveBeenCalled()
     })
 
-    it('switches directly without dialog when no unsaved changes', async () => {
-      mockModifiedWorkflows.length = 0
+    it('switches directly to the new workspace', async () => {
       mockSwitchWorkspace.mockResolvedValue(undefined)
-      const { switchWithConfirmation } = useWorkspaceSwitch()
+      const { switchWorkspace } = useWorkspaceSwitch()
 
-      const result = await switchWithConfirmation('workspace-2')
-
-      expect(result).toBe(true)
-      expect(mockConfirm).not.toHaveBeenCalled()
-      expect(mockSwitchWorkspace).toHaveBeenCalledWith('workspace-2')
-    })
-
-    it('shows confirmation dialog when there are unsaved changes', async () => {
-      mockModifiedWorkflows.push({ isModified: true })
-      mockConfirm.mockResolvedValue(true)
-      mockSwitchWorkspace.mockResolvedValue(undefined)
-      const { switchWithConfirmation } = useWorkspaceSwitch()
-
-      await switchWithConfirmation('workspace-2')
-
-      expect(mockConfirm).toHaveBeenCalledWith({
-        title: 'workspace.unsavedChanges.title',
-        message: 'workspace.unsavedChanges.message',
-        type: 'dirtyClose'
-      })
-    })
-
-    it('returns false if user cancels the confirmation dialog', async () => {
-      mockModifiedWorkflows.push({ isModified: true })
-      mockConfirm.mockResolvedValue(false)
-      const { switchWithConfirmation } = useWorkspaceSwitch()
-
-      const result = await switchWithConfirmation('workspace-2')
-
-      expect(result).toBe(false)
-      expect(mockSwitchWorkspace).not.toHaveBeenCalled()
-    })
-
-    it('calls switchWorkspace after user confirms', async () => {
-      mockModifiedWorkflows.push({ isModified: true })
-      mockConfirm.mockResolvedValue(true)
-      mockSwitchWorkspace.mockResolvedValue(undefined)
-      const { switchWithConfirmation } = useWorkspaceSwitch()
-
-      const result = await switchWithConfirmation('workspace-2')
+      const result = await switchWorkspace('workspace-2')
 
       expect(result).toBe(true)
       expect(mockSwitchWorkspace).toHaveBeenCalledWith('workspace-2')
     })
 
     it('returns false if switchWorkspace throws an error', async () => {
-      mockModifiedWorkflows.length = 0
       mockSwitchWorkspace.mockRejectedValue(new Error('Switch failed'))
-      const { switchWithConfirmation } = useWorkspaceSwitch()
+      const { switchWorkspace } = useWorkspaceSwitch()
 
-      const result = await switchWithConfirmation('workspace-2')
+      const result = await switchWorkspace('workspace-2')
 
       expect(result).toBe(false)
     })

src/platform/workspace/composables/useWorkspaceSwitch.ts

@@ -1,41 +1,18 @@
 import { storeToRefs } from 'pinia'
-import { useI18n } from 'vue-i18n'
 
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { useDialogService } from '@/services/dialogService'
 
 export function useWorkspaceSwitch() {
-  const { t } = useI18n()
   const workspaceStore = useTeamWorkspaceStore()
   const { activeWorkspace } = storeToRefs(workspaceStore)
-  const workflowStore = useWorkflowStore()
-  const dialogService = useDialogService()
 
-  function hasUnsavedChanges(): boolean {
-    return workflowStore.modifiedWorkflows.length > 0
-  }
-
-  async function switchWithConfirmation(workspaceId: string): Promise<boolean> {
+  async function switchWorkspace(workspaceId: string): Promise<boolean> {
     if (activeWorkspace.value?.id === workspaceId) {
       return true
     }
 
-    if (hasUnsavedChanges()) {
-      const confirmed = await dialogService.confirm({
-        title: t('workspace.unsavedChanges.title'),
-        message: t('workspace.unsavedChanges.message'),
-        type: 'dirtyClose'
-      })
-
-      if (!confirmed) {
-        return false
-      }
-    }
-
     try {
       await workspaceStore.switchWorkspace(workspaceId)
-      // Note: switchWorkspace triggers page reload internally
       return true
     } catch {
       return false
@@ -43,7 +20,6 @@ export function useWorkspaceSwitch() {
   }
 
   return {
-    hasUnsavedChanges,
-    switchWithConfirmation
+    switchWorkspace
   }
 }

src/platform/workspace/stores/billingOperationStore.test.ts

@@ -219,8 +219,7 @@ describe('billingOperationStore', () => {
       expect(mockToastAdd).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'billingOperation.subscriptionFailed',
-        detail: errorMessage,
-        life: 5000
+        detail: errorMessage
       })
     })
 
@@ -239,8 +238,7 @@ describe('billingOperationStore', () => {
       expect(mockToastAdd).toHaveBeenCalledWith({
         severity: 'error',
         summary: 'billingOperation.topupFailed',
-        detail: undefined,
-        life: 5000
+        detail: undefined
       })
     })
   })
@@ -267,8 +265,7 @@ describe('billingOperationStore', () => {
 
       expect(mockToastAdd).toHaveBeenCalledWith({
         severity: 'error',
-        summary: 'billingOperation.subscriptionTimeout',
-        life: 5000
+        summary: 'billingOperation.subscriptionTimeout'
       })
     })
 
@@ -287,8 +284,7 @@ describe('billingOperationStore', () => {
 
       expect(mockToastAdd).toHaveBeenCalledWith({
         severity: 'error',
-        summary: 'billingOperation.topupTimeout',
-        life: 5000
+        summary: 'billingOperation.topupTimeout'
       })
     })
   })

src/platform/workspace/stores/billingOperationStore.ts

@@ -173,8 +173,7 @@ export const useBillingOperationStore = defineStore('billingOperation', () => {
     useToastStore().add({
       severity: 'error',
       summary: defaultMessage,
-      detail: errorMessage ?? undefined,
-      life: 5000
+      detail: errorMessage ?? undefined
     })
   }
 
@@ -192,8 +191,7 @@ export const useBillingOperationStore = defineStore('billingOperation', () => {
 
     useToastStore().add({
       severity: 'error',
-      summary: message,
-      life: 5000
+      summary: message
     })
   }
 

src/renderer/extensions/linearMode/AppOutput.vue

@@ -25,7 +25,7 @@ function togglePromotion() {
   <div
     :class="
       cn(
-        'pointer-events-auto absolute size-full rounded-2xl ring-5 ring-warning-background/50',
+        'pointer-events-auto absolute z-1 size-full rounded-2xl ring-5 ring-warning-background/50',
         isPromoted && 'ring-warning-background'
       )
     "

src/renderer/extensions/linearMode/LinearControls.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useEventListener, useTimeout } from '@vueuse/core'
-import { partition, remove, takeWhile } from 'es-toolkit'
+import { remove, takeWhile } from 'es-toolkit'
 import { storeToRefs } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -10,6 +10,7 @@ import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
@@ -19,6 +20,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
+import PartnerNodesList from '@/renderer/extensions/linearMode/PartnerNodesList.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
@@ -28,7 +30,7 @@ import { useQueueSettingsStore } from '@/stores/queueStore'
 import { cn } from '@/utils/tailwindUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
-import { resolveNode } from '@/utils/litegraphUtil'
+import { resolveNodeWidget } from '@/utils/litegraphUtil'
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const executionErrorStore = useExecutionErrorStore()
@@ -62,21 +64,42 @@ useEventListener(
 )
 
 const mappedSelections = computed(() => {
-  let unprocessedInputs = [...appModeStore.selectedInputs]
-  //FIXME strict typing here
+  void graphNodes.value
+  let unprocessedInputs = appModeStore.selectedInputs.flatMap(
+    ([nodeId, widgetName]) => {
+      const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+      return widget ? ([[node, widget]] as const) : []
+    }
+  )
   const processedInputs: ReturnType<typeof nodeToNodeData>[] = []
   while (unprocessedInputs.length) {
-    const nodeId = unprocessedInputs[0][0]
-    const inputGroup = takeWhile(
-      unprocessedInputs,
-      ([id]) => id === nodeId
-    ).map(([, widgetName]) => widgetName)
+    const [node] = unprocessedInputs[0]
+    const inputGroup = takeWhile(unprocessedInputs, ([n]) => n === node).map(
+      ([, widget]) => widget
+    )
     unprocessedInputs = unprocessedInputs.slice(inputGroup.length)
-    const node = resolveNode(nodeId)
+    //FIXME: hide widget if owning node bypassed
     if (node?.mode !== LGraphEventMode.ALWAYS) continue
 
     const nodeData = nodeToNodeData(node)
-    remove(nodeData.widgets ?? [], (w) => !inputGroup.includes(w.name))
+    remove(nodeData.widgets ?? [], (vueWidget) => {
+      if (vueWidget.slotMetadata?.linked) return true
+
+      if (!node.isSubgraphNode())
+        return !inputGroup.some((w) => w.name === vueWidget.name)
+
+      const storeNodeId = vueWidget.storeNodeId?.split(':')?.[1] ?? ''
+      return !inputGroup.some(
+        (subWidget) =>
+          isPromotedWidgetView(subWidget) &&
+          subWidget.sourceNodeId == storeNodeId &&
+          subWidget.sourceWidgetName === vueWidget.storeName
+      )
+    })
+    for (const widget of nodeData.widgets ?? []) {
+      widget.slotMetadata = undefined
+      widget.nodeId = String(node.id)
+    }
     processedInputs.push(nodeData)
   }
   return processedInputs
@@ -98,7 +121,7 @@ function getDropIndicator(node: LGraphNode) {
   return {
     iconClass: 'icon-[lucide--image]',
     imageUrl: buildImageUrl(),
-    label: t('linearMode.dragAndDropImage'),
+    label: props.mobile ? undefined : t('linearMode.dragAndDropImage'),
     onClick: () => node.widgets?.[1]?.callback?.(undefined)
   }
 }
@@ -106,8 +129,6 @@ function getDropIndicator(node: LGraphNode) {
 function nodeToNodeData(node: LGraphNode) {
   const dropIndicator = getDropIndicator(node)
   const nodeData = extractVueNodeData(node)
-  remove(nodeData.widgets ?? [], (w) => w.slotMetadata?.linked ?? false)
-  for (const widget of nodeData.widgets ?? []) widget.slotMetadata = undefined
 
   return {
     ...nodeData,
@@ -119,20 +140,6 @@ function nodeToNodeData(node: LGraphNode) {
     onDragOver: node.onDragOver
   }
 }
-const partitionedNodes = computed(() => {
-  const parts = partition(
-    graphNodes.value
-      .filter((node) => node.mode === 0 && node.widgets?.length)
-      .map(nodeToNodeData)
-      .reverse(),
-    (node) => ['MarkdownNote', 'Note'].includes(node.type)
-  )
-  for (const noteNode of parts[0]) {
-    for (const widget of noteNode.widgets ?? [])
-      widget.options = { ...widget.options, read_only: true }
-  }
-  return parts
-})
 
 //TODO: refactor out of this file.
 //code length is small, but changes should propagate
@@ -180,34 +187,6 @@ defineExpose({ runButtonClick })
         v-text="workflowStore.activeWorkflow?.filename"
       />
       <div class="flex-1" />
-      <Popover
-        v-if="partitionedNodes[0].length"
-        align="end"
-        class="z-100 max-h-(--reka-popover-content-available-height) overflow-x-clip overflow-y-auto"
-        side="bottom"
-        :side-offset="-8"
-      >
-        <template #button>
-          <Button variant="muted-textonly">
-            <i class="icon-[lucide--info]" />
-          </Button>
-        </template>
-        <div>
-          <template
-            v-for="(nodeData, index) in partitionedNodes[0]"
-            :key="nodeData.id"
-          >
-            <div
-              v-if="index !== 0"
-              class="w-full border-t border-border-subtle"
-            />
-            <NodeWidgets
-              :node-data
-              class="max-w-100 gap-y-3 rounded-lg py-3 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1"
-            />
-          </template>
-        </div>
-      </Popover>
       <Button v-if="false"> {{ t('menuLabels.publish') }} </Button>
     </section>
     <div
@@ -218,9 +197,7 @@ defineExpose({ runButtonClick })
         class="grow overflow-y-auto contain-size"
       >
         <template
-          v-for="(nodeData, index) of appModeStore.selectedInputs.length
-            ? mappedSelections
-            : partitionedNodes[0]"
+          v-for="(nodeData, index) of mappedSelections"
           :key="nodeData.id"
         >
           <div
@@ -230,14 +207,14 @@ defineExpose({ runButtonClick })
           <DropZone
             :on-drag-over="nodeData.onDragOver"
             :on-drag-drop="nodeData.onDragDrop"
-            :drop-indicator="mobile ? undefined : nodeData.dropIndicator"
+            :drop-indicator="nodeData.dropIndicator"
             class="text-muted-foreground"
           >
             <NodeWidgets
               :node-data
               :class="
                 cn(
-                  'gap-y-3 rounded-lg py-3 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1 **:[.h-7]:h-10',
+                  'gap-y-3 rounded-lg py-3 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
                   nodeData.hasErrors &&
                     'ring-2 ring-node-stroke-error ring-inset'
                 )
@@ -274,6 +251,7 @@ defineExpose({ runButtonClick })
           </template>
         </div>
       </Teleport>
+      <PartnerNodesList v-if="!mobile" />
       <section
         v-if="mobile"
         data-testid="linear-run-button"
@@ -284,6 +262,7 @@ defineExpose({ runButtonClick })
           class="mt-4 w-full"
         />
         <div v-else class="mt-4 flex">
+          <PartnerNodesList mobile />
           <Popover side="top" @open-auto-focus.prevent>
             <template #button>
               <Button size="lg" class="-mr-3 pr-7">
@@ -347,4 +326,9 @@ defineExpose({ runButtonClick })
       </section>
     </div>
   </div>
+  <div
+    v-else-if="mobile"
+    class="flex size-full items-center bg-base-background p-4 text-center"
+    v-text="t('linearMode.mobileNoWorkflow')"
+  />
 </template>

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -126,7 +126,7 @@ async function rerun(e: Event) {
           : []),
         {
           icon: 'icon-[lucide--trash-2]',
-          label: t('queue.jobMenu.deleteAsset'),
+          label: t('linearMode.deleteAllAssets'),
           command: () => mediaActions.deleteAssets(selectedItem!)
         }
       ]"

src/renderer/extensions/linearMode/MobileDisplay.vue

@@ -8,14 +8,15 @@ import DropdownMenu from '@/components/common/DropdownMenu.vue'
 import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import Button from '@/components/ui/button/Button.vue'
-import Popover from '@/components/ui/Popover.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
 import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
+import MobileError from '@/renderer/extensions/linearMode/MobileError.vue'
 import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -31,6 +32,7 @@ const canvasStore = useCanvasStore()
 const colorPaletteService = useColorPaletteService()
 const colorPaletteStore = useColorPaletteStore()
 const { isLoggedIn } = useCurrentUser()
+const executionErrorStore = useExecutionErrorStore()
 const { t } = useI18n()
 const { commandIdToMenuItem } = useMenuItemStore()
 const queueStore = useQueueStore()
@@ -40,7 +42,7 @@ const { toggle: toggleFullscreen } = useFullscreen(undefined, {
   autoExit: true
 })
 
-const activeIndex = ref(2)
+const activeIndex = ref(1)
 const sliderPaneRef = useTemplateRef('sliderPaneRef')
 const sliderWidth = computed(() => sliderPaneRef.value?.offsetWidth)
 
@@ -73,13 +75,16 @@ function onClick(index: number) {
 }
 
 const workflowsEntries = computed(() => {
-  return workflowStore.openWorkflows.map((w) => ({
-    label: w.filename,
-    icon: w.activeState?.extra?.linearMode
-      ? 'icon-[lucide--panels-top-left] bg-primary-background'
-      : undefined,
-    command: () => workflowService.openWorkflow(w)
-  }))
+  return [
+    ...workflowStore.openWorkflows.map((w) => ({
+      label: w.filename,
+      icon: w.activeState?.extra?.linearMode
+        ? 'icon-[lucide--panels-top-left] bg-primary-background'
+        : undefined,
+      command: () => workflowService.openWorkflow(w),
+      checked: workflowStore.activeWorkflow === w
+    }))
+  ]
 })
 
 const menuEntries = computed<MenuItem[]>(() => [
@@ -154,9 +159,9 @@ const menuEntries = computed<MenuItem[]>(() => [
       class="flex h-16 w-full items-center gap-3 border-b border-border-subtle bg-base-background px-4 py-3"
     >
       <DropdownMenu :entries="menuEntries" />
-      <Popover
+      <DropdownMenu
         :entries="workflowsEntries"
-        class="w-(--reka-popover-content-available-width)"
+        class="max-h-[40vh] w-(--reka-dropdown-menu-content-available-width)"
         :collision-padding="20"
       >
         <template #button>
@@ -176,7 +181,7 @@ const menuEntries = computed<MenuItem[]>(() => [
             />
           </div>
         </template>
-      </Popover>
+      </DropdownMenu>
       <CurrentUserButton v-if="isLoggedIn" :show-arrow="false" />
     </header>
     <div class="size-full rounded-b-4xl contain-content">
@@ -192,7 +197,11 @@ const menuEntries = computed<MenuItem[]>(() => [
         <div
           class="absolute top-0 left-[100vw] flex h-full w-screen flex-col bg-base-background"
         >
-          <LinearPreview mobile />
+          <MobileError
+            v-if="executionErrorStore.isErrorOverlayOpen"
+            @navigate-controls="activeIndex = 0"
+          />
+          <LinearPreview v-else mobile @navigate-controls="activeIndex = 0" />
         </div>
         <AssetsSidebarTab
           class="absolute top-0 left-[200vw] h-full w-screen bg-base-background"
@@ -213,7 +222,11 @@ const menuEntries = computed<MenuItem[]>(() => [
         <div class="relative size-4">
           <i :class="cn('size-4', icon)" />
           <div
-            v-if="
+            v-if="index === 1 && executionErrorStore.isErrorOverlayOpen"
+            class="absolute -top-1 -right-1 size-2 rounded-full bg-error"
+          />
+          <div
+            v-else-if="
               index === 1 &&
               (queueStore.runningTasks.length > 0 ||
                 queueStore.pendingTasks.length > 0)

src/renderer/extensions/linearMode/MobileError.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Dialogue from '@/components/common/Dialogue.vue'
+import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
+import Button from '@/components/ui/button/Button.vue'
+import { useAppMode } from '@/composables/useAppMode'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useExternalLink } from '@/composables/useExternalLink'
+import { buildSupportUrl } from '@/platform/support/config'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+
+defineEmits<{ navigateControls: [] }>()
+
+const { t } = useI18n()
+const appModeStore = useAppModeStore()
+const { setMode } = useAppMode()
+const executionErrorStore = useExecutionErrorStore()
+const { buildDocsUrl, staticUrls } = useExternalLink()
+const { allErrorGroups } = useErrorGroups('', t)
+const { copyToClipboard } = useCopyToClipboard()
+
+const guideUrl = buildDocsUrl('troubleshooting/overview', {
+  includeLocale: true
+})
+const supportUrl = buildSupportUrl()
+
+const inputNodeIds = computed(() => {
+  const ids = new Set()
+  for (const [id] of appModeStore.selectedInputs) ids.add(String(id))
+  return ids
+})
+
+const accessibleNodeErrors = computed(() =>
+  Object.keys(executionErrorStore.lastNodeErrors ?? {}).filter((k) =>
+    inputNodeIds.value.has(k)
+  )
+)
+const accessibleErrors = computed(() =>
+  accessibleNodeErrors.value.flatMap((k) =>
+    executionErrorStore.lastNodeErrors![k].errors.flatMap((error) => {
+      const { extra_info } = error
+      if (!extra_info) return []
+
+      const selectedInput = appModeStore.selectedInputs.find(
+        ([id, name]) => id == k && extra_info.input_name === name
+      )
+      if (!selectedInput) return []
+
+      return [`${selectedInput[1]}: ${error.message}`]
+    })
+  )
+)
+const allErrors = computed(() =>
+  allErrorGroups.value.flatMap((group) => {
+    if (group.type !== 'execution') return [group.title]
+
+    return group.cards.flatMap((c) =>
+      c.errors.map((e) =>
+        e.details
+          ? `${c.title} (${e.details}): ${e.message}`
+          : `${c.title}: ${e.message}`
+      )
+    )
+  })
+)
+
+function copy(obj: unknown) {
+  copyToClipboard(JSON.stringify(obj))
+}
+</script>
+<template>
+  <section class="flex h-full flex-col items-center justify-center gap-2 px-4">
+    <i class="icon-[lucide--circle-alert] size-6 bg-error" />
+    {{ t('linearMode.error.header') }}
+    <div class="p-1 text-muted-foreground">
+      <i18n-t
+        v-if="accessibleErrors.length"
+        keypath="linearMode.error.mobileFixable"
+      >
+        <Button @click="$emit('navigateControls')">
+          {{ t('linearMode.mobileControls') }}
+        </Button>
+      </i18n-t>
+      <div v-else class="text-center">
+        <p v-text="t('linearMode.error.requiresGraph')" />
+        <p v-text="t('linearMode.error.promptVisitGraph')" />
+        <p class="*:text-muted-foreground">
+          <i18n-t keypath="linearMode.error.getHelp">
+            <a
+              :href="guideUrl"
+              target="_blank"
+              v-text="t('linearMode.error.guide')"
+            />
+            <a
+              :href="staticUrls.githubIssues"
+              target="_blank"
+              v-text="t('linearMode.error.github')"
+            />
+            <a
+              :href="supportUrl"
+              target="_blank"
+              v-text="t('linearMode.error.support')"
+            />
+          </i18n-t>
+        </p>
+        <Dialogue :title="t('linearMode.error.log')">
+          <template #button>
+            <Button variant="textonly">
+              {{ t('linearMode.error.promptShow') }}
+              <i class="icon-[lucide--chevron-right] size-5" />
+            </Button>
+          </template>
+          <template #default="{ close }">
+            <article class="flex flex-col gap-2 p-4">
+              <section class="flex max-h-[60vh] flex-col gap-2 overflow-y-auto">
+                <div
+                  v-for="error in allErrors"
+                  :key="error"
+                  class="w-full rounded-lg bg-secondary-background p-2 text-muted-foreground"
+                  v-text="error"
+                />
+              </section>
+              <div class="flex items-center justify-end gap-4">
+                <Button variant="muted-textonly" size="lg" @click="close">
+                  {{ t('g.close') }}
+                </Button>
+                <Button size="lg" @click="copy(allErrors)">
+                  {{ t('importFailed.copyError') }}
+                  <i class="icon-[lucide--copy]" />
+                </Button>
+              </div>
+            </article>
+          </template>
+        </Dialogue>
+      </div>
+    </div>
+    <div
+      v-if="accessibleErrors.length"
+      class="my-8 w-full rounded-lg bg-secondary-background text-muted-foreground"
+    >
+      <ul>
+        <li
+          v-for="error in accessibleErrors"
+          :key="error"
+          class="before:content"
+          v-text="error"
+        />
+      </ul>
+    </div>
+    <div class="flex gap-2">
+      <Button
+        variant="textonly"
+        size="lg"
+        @click="executionErrorStore.dismissErrorOverlay()"
+      >
+        {{ t('g.dismiss') }}
+      </Button>
+      <Button variant="textonly" size="lg" @click="setMode('graph')">
+        {{ t('linearMode.viewGraph') }}
+      </Button>
+      <Button
+        v-if="accessibleErrors.length"
+        size="lg"
+        @click="copy(accessibleErrors)"
+      >
+        {{ t('importFailed.copyError') }}
+        <i class="icon-[lucide--copy]" />
+      </Button>
+    </div>
+  </section>
+</template>

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -4,6 +4,7 @@ import {
   useInfiniteScroll,
   useResizeObserver
 } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import type { ComponentPublicInstance } from 'vue'
 import {
   computed,
@@ -26,11 +27,13 @@ import type {
 import OutputPreviewItem from '@/renderer/extensions/linearMode/OutputPreviewItem.vue'
 import { useOutputHistory } from '@/renderer/extensions/linearMode/useOutputHistory'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useAppModeStore } from '@/stores/appModeStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { cn } from '@/utils/tailwindUtil'
 
 const { outputs, allOutputs, selectFirstHistory, mayBeActiveWorkflowPending } =
   useOutputHistory()
+const { hasOutputs } = storeToRefs(useAppModeStore())
 const queueStore = useQueueStore()
 const store = useLinearOutputStore()
 const workflowStore = useWorkflowStore()
@@ -156,8 +159,10 @@ watch(
     const inProgress = store.activeWorkflowInProgressItems
     if (inProgress.length > 0) {
       store.selectAsLatest(`slot:${inProgress[0].id}`)
-    } else {
+    } else if (hasOutputs.value) {
       selectFirstHistory()
+    } else {
+      store.selectAsLatest(null)
     }
   },
   { immediate: true }
@@ -180,13 +185,13 @@ watch(
       : undefined
 
     if (!sv || sv.kind !== 'history') {
-      selectFirstHistory()
+      if (hasOutputs.value) selectFirstHistory()
       return
     }
 
     const wasFirst = sv.assetId === oldAssets[0]?.id
     if (wasFirst || !newAssets.some((a) => a.id === sv.assetId)) {
-      selectFirstHistory()
+      if (hasOutputs.value) selectFirstHistory()
     }
   }
 )