fix: refactor(changeTracker): replace local clone() with shared clone util from @/scripts/utils (#9414)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

browser_tests/tests/interaction.spec.ts

@@ -819,13 +819,16 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
       const activeWorkflowName =
         await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      const workflowPathA = `${workflowA}.json`
+      const workflowPathB = `${workflowB}.json`
+
       expect(openWorkflows).toEqual(
-        expect.arrayContaining([workflowA, workflowB])
+        expect.arrayContaining([workflowPathA, workflowPathB])
       )
-      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
-        openWorkflows.indexOf(workflowB)
+      expect(openWorkflows.indexOf(workflowPathA)).toBeLessThan(
+        openWorkflows.indexOf(workflowPathB)
       )
-      expect(activeWorkflowName).toEqual(workflowB)
+      expect(activeWorkflowName).toEqual(workflowPathB)
     })
   })
 

browser_tests/tests/rerouteNode.spec.ts

@@ -13,9 +13,9 @@ test.describe('Reroute Node', { tag: ['@screenshot', '@node'] }, () => {
   })
 
   test('loads from inserted workflow', async ({ comfyPage }) => {
-    const workflowName = 'single_connected_reroute_node'
+    const workflowName = 'single_connected_reroute_node.json'
     await comfyPage.workflow.setupWorkflowsDirectory({
-      [`${workflowName}.json`]: `links/${workflowName}.json`
+      [workflowName]: 'links/single_connected_reroute_node.json'
     })
     await comfyPage.setup()
     await comfyPage.menu.topbar.triggerTopbarCommand(['New'])

browser_tests/tests/sidebar/workflows.spec.ts

@@ -21,12 +21,14 @@ test.describe('Workflows sidebar', () => {
 
   test('Can create new blank workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
 
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow',
-      '*Unsaved Workflow (2)'
+      '*Unsaved Workflow.json',
+      '*Unsaved Workflow (2).json'
     ])
   })
 
@@ -39,37 +41,37 @@ test.describe('Workflows sidebar', () => {
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
     expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
-      expect.arrayContaining(['workflow1', 'workflow2'])
+      expect.arrayContaining(['workflow1.json', 'workflow2.json'])
     )
   })
 
   test('Can duplicate workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await comfyPage.menu.topbar.saveWorkflow('workflow1')
+    await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
 
     expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
-      expect.arrayContaining(['workflow1'])
+      expect.arrayContaining(['workflow1.json'])
     )
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)'
+      'workflow1.json',
+      '*workflow1 (Copy).json'
     ])
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)',
-      '*workflow1 (Copy) (2)'
+      'workflow1.json',
+      '*workflow1 (Copy).json',
+      '*workflow1 (Copy) (2).json'
     ])
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)',
-      '*workflow1 (Copy) (2)',
-      '*workflow1 (Copy) (3)'
+      'workflow1.json',
+      '*workflow1 (Copy).json',
+      '*workflow1 (Copy) (2).json',
+      '*workflow1 (Copy) (3).json'
     ])
   })
 
@@ -83,12 +85,12 @@ test.describe('Workflows sidebar', () => {
     await comfyPage.command.executeCommand('Comfy.LoadDefaultWorkflow')
     const originalNodeCount = await comfyPage.nodeOps.getNodeCount()
 
-    await tab.insertWorkflow(tab.getPersistedItem('workflow1'))
+    await tab.insertWorkflow(tab.getPersistedItem('workflow1.json'))
     await expect
       .poll(() => comfyPage.nodeOps.getNodeCount())
       .toEqual(originalNodeCount + 1)
 
-    await tab.getPersistedItem('workflow1').click()
+    await tab.getPersistedItem('workflow1.json').click()
     await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toEqual(1)
   })
 
@@ -111,22 +113,22 @@ test.describe('Workflows sidebar', () => {
     const openedWorkflow = tab.getOpenedItem('foo/bar')
     await tab.renameWorkflow(openedWorkflow, 'foo/baz')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow',
-      'foo/baz'
+      '*Unsaved Workflow.json',
+      'foo/baz.json'
     ])
   })
 
   test('Can save workflow as', async ({ comfyPage }) => {
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow3')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow', 'workflow3'])
+      .toEqual(['*Unsaved Workflow.json', 'workflow3.json'])
 
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow4')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow', 'workflow3', 'workflow4'])
+      .toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
   })
 
   test('Exported workflow does not contain localized slot names', async ({
@@ -182,15 +184,15 @@ test.describe('Workflows sidebar', () => {
   })
 
   test('Can save workflow as with same name', async ({ comfyPage }) => {
-    await comfyPage.menu.topbar.saveWorkflow('workflow5')
+    await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow5'
+      'workflow5.json'
     ])
 
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow5')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow5.json')
     await comfyPage.confirmDialog.click('overwrite')
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow5'
+      'workflow5.json'
     ])
   })
 
@@ -210,25 +212,25 @@ test.describe('Workflows sidebar', () => {
 
   test('Can overwrite other workflows with save as', async ({ comfyPage }) => {
     const topbar = comfyPage.menu.topbar
-    await topbar.saveWorkflow('workflow1')
-    await topbar.saveWorkflowAs('workflow2')
+    await topbar.saveWorkflow('workflow1.json')
+    await topbar.saveWorkflowAs('workflow2.json')
     await comfyPage.nextFrame()
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['workflow1', 'workflow2'])
+      .toEqual(['workflow1.json', 'workflow2.json'])
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
-      .toEqual('workflow2')
+      .toEqual('workflow2.json')
 
-    await topbar.saveWorkflowAs('workflow1')
+    await topbar.saveWorkflowAs('workflow1.json')
     await comfyPage.confirmDialog.click('overwrite')
-    // The old workflow1 should be deleted and the new one should be saved.
+    // The old workflow1.json should be deleted and the new one should be saved.
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['workflow2', 'workflow1'])
+      .toEqual(['workflow2.json', 'workflow1.json'])
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
-      .toEqual('workflow1')
+      .toEqual('workflow1.json')
   })
 
   test('Does not report warning when switching between opened workflows', async ({
@@ -264,15 +266,17 @@ test.describe('Workflows sidebar', () => {
     )
     await closeButton.click()
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
+      '*Unsaved Workflow.json'
     ])
   })
 
   test('Can close saved workflow with command', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await comfyPage.menu.topbar.saveWorkflow('workflow1')
+    await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
     await comfyPage.command.executeCommand('Workspace.CloseWorkflow')
-    expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
   })
 
   test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
@@ -280,7 +284,7 @@ test.describe('Workflows sidebar', () => {
 
     const { topbar, workflowsTab } = comfyPage.menu
 
-    const filename = 'workflow18'
+    const filename = 'workflow18.json'
     await topbar.saveWorkflow(filename)
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
 
@@ -291,14 +295,14 @@ test.describe('Workflows sidebar', () => {
 
     await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
+      '*Unsaved Workflow.json'
     ])
   })
 
   test('Can delete workflows', async ({ comfyPage }) => {
     const { topbar, workflowsTab } = comfyPage.menu
 
-    const filename = 'workflow18'
+    const filename = 'workflow18.json'
     await topbar.saveWorkflow(filename)
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
 
@@ -310,7 +314,7 @@ test.describe('Workflows sidebar', () => {
 
     await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
+      '*Unsaved Workflow.json'
     ])
   })
 
@@ -322,11 +326,13 @@ test.describe('Workflows sidebar', () => {
     const { workflowsTab } = comfyPage.menu
     await workflowsTab.open()
 
-    await workflowsTab.getPersistedItem('workflow1').click({ button: 'right' })
+    await workflowsTab
+      .getPersistedItem('workflow1.json')
+      .click({ button: 'right' })
     await comfyPage.contextMenu.clickMenuItem('Duplicate')
     await expect
       .poll(() => workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow', '*workflow1 (Copy)'])
+      .toEqual(['*Unsaved Workflow.json', '*workflow1 (Copy).json'])
   })
 
   test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
@@ -338,7 +344,7 @@ test.describe('Workflows sidebar', () => {
 
     // Wait for workflow to appear in Browse section after sync
     const workflowItem =
-      comfyPage.menu.workflowsTab.getPersistedItem('workflow1')
+      comfyPage.menu.workflowsTab.getPersistedItem('workflow1.json')
     await expect(workflowItem).toBeVisible({ timeout: 3000 })
 
     const nodeCount = await comfyPage.nodeOps.getGraphNodesCount()
@@ -355,7 +361,7 @@ test.describe('Workflows sidebar', () => {
     }
 
     await comfyPage.page.dragAndDrop(
-      '.comfyui-workflows-browse .node-label:has-text("workflow1")',
+      '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
       '#graph-canvas',
       { targetPosition }
     )

src/components/appMode/AppModeToolbar.vue

@@ -3,16 +3,9 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsDropdown from '@/components/common/WorkflowActionsDropdown.vue'
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import Button from '@/components/ui/button/Button.vue'
 import { useAppMode } from '@/composables/useAppMode'
 import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
-import { isCloud } from '@/platform/distribution/types'
-import {
-  openShareDialog,
-  prefetchShareDialog
-} from '@/platform/workflow/sharing/composables/lazyShareDialog'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -25,8 +18,6 @@ const workspaceStore = useWorkspaceStore()
 const { enableAppBuilder } = useAppMode()
 const appModeStore = useAppModeStore()
 const { enterBuilder } = appModeStore
-const { toastErrorHandler } = useErrorHandling()
-const { flags } = useFeatureFlags()
 const { hasNodes } = storeToRefs(appModeStore)
 const tooltipOptions = { showDelay: 300, hideDelay: 300 }
 
@@ -52,7 +43,28 @@ function openTemplates() {
 
 <template>
   <div class="pointer-events-auto flex flex-col gap-2">
-    <WorkflowActionsDropdown source="app_mode_toolbar" />
+    <WorkflowActionsDropdown source="app_mode_toolbar">
+      <template #button="{ hasUnseenItems }">
+        <Button
+          v-tooltip.right="{
+            value: t('sideToolbar.labels.menu'),
+            ...tooltipOptions
+          }"
+          variant="secondary"
+          size="unset"
+          :aria-label="t('sideToolbar.labels.menu')"
+          class="relative h-10 gap-1 rounded-lg pr-2 pl-3 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+        >
+          <i class="icon-[lucide--panels-top-left] size-4" />
+          <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+          <span
+            v-if="hasUnseenItems"
+            aria-hidden="true"
+            class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
+          />
+        </Button>
+      </template>
+    </WorkflowActionsDropdown>
 
     <Button
       v-if="enableAppBuilder"
@@ -69,21 +81,6 @@ function openTemplates() {
     >
       <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"

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-testid="subgraph-breadcrumb"
-    class="subgraph-breadcrumb -mt-3 flex w-auto items-center pt-4 pl-1 drop-shadow-(--interface-panel-drop-shadow)"
+    class="subgraph-breadcrumb -mt-4 flex w-auto items-center pt-4 drop-shadow-(--interface-panel-drop-shadow)"
     :class="{
       'subgraph-breadcrumb-collapse': collapseTabs,
       'subgraph-breadcrumb-overflow': overflowingTabs

src/components/builder/AppBuilder.vue

@@ -12,10 +12,7 @@ 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,
-  TitleMode
-} from '@/lib/litegraph/src/types/globalEnums'
+import { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { BaseWidget } from '@/lib/litegraph/src/widgets/BaseWidget'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -162,8 +159,7 @@ function handleDown(e: MouseEvent) {
 }
 function handleClick(e: MouseEvent) {
   const [node, widget] = getHovered(e) ?? []
-  if (node?.mode !== LGraphEventMode.ALWAYS)
-    return canvasInteractions.forwardEventToCanvas(e)
+  if (!node) return canvasInteractions.forwardEventToCanvas(e)
 
   if (!widget) {
     if (!isSelectOutputsMode.value) return
@@ -196,10 +192,7 @@ function nodeToDisplayTuple(
 const renderedOutputs = computed(() => {
   void appModeStore.selectedOutputs.length
   return canvas
-    .graph!.nodes.filter(
-      (n) =>
-        n.constructor.nodeData?.output_node && n.mode === LGraphEventMode.ALWAYS
-    )
+    .graph!.nodes.filter((n) => n.constructor.nodeData?.output_node)
     .map(nodeToDisplayTuple)
 })
 const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
@@ -211,146 +204,131 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
 )
 </script>
 <template>
-  <div class="flex h-full flex-col">
-    <div class="flex items-center border-b border-border-subtle p-2 font-bold">
-      {{
-        isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
-      }}
-    </div>
-    <div class="min-h-0 flex-1 overflow-y-auto">
-      <DraggableList
-        v-if="isArrangeMode"
-        v-slot="{ dragClass }"
-        v-model="appModeStore.selectedInputs"
-        class="overflow-x-clip"
-      >
-        <div
-          v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
-          :key="`${nodeId}: ${widgetName}`"
-          :class="cn(dragClass, 'pointer-events-auto my-2 p-2')"
-          :aria-label="`${widget?.label ?? widgetName} — ${node.title}`"
-        >
-          <div v-if="widget" class="pointer-events-none" inert>
-            <WidgetItem
-              :widget="widget"
-              :node="node"
-              show-node-name
-              hidden-widget-actions
-            />
-          </div>
-          <div
-            v-else
-            class="pointer-events-none p-1 text-sm text-muted-foreground"
-          >
-            {{ widgetName }}
-            <p class="text-xs italic">
-              ({{ t('linearMode.builder.unknownWidget') }})
-            </p>
-          </div>
-        </div>
-      </DraggableList>
-      <PropertiesAccordionItem
-        v-if="isSelectInputsMode"
-        :label="t('nodeHelpPage.inputs')"
-        enable-empty-state
-        :disabled="!appModeStore.selectedInputs.length"
-        class="border-b border-border-subtle"
-        :tooltip="`${t('linearMode.builder.inputsDesc')}\n${t('linearMode.builder.inputsExample')}`"
-        :tooltip-delay="100"
-      >
-        <template #label>
-          <div class="flex gap-3">
-            {{ t('nodeHelpPage.inputs') }}
-            <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
-          </div>
-        </template>
-        <template #empty>
-          <div
-            class="w-full p-4 pt-2 text-muted-foreground"
-            v-text="t('linearMode.builder.promptAddInputs')"
-          />
-        </template>
-        <div
-          class="w-full p-4 pt-2 text-muted-foreground"
-          v-text="t('linearMode.builder.promptAddInputs')"
-        />
-        <DraggableList
-          v-slot="{ dragClass }"
-          v-model="appModeStore.selectedInputs"
-        >
-          <IoItem
-            v-for="{
-              nodeId,
-              widgetName,
-              label,
-              subLabel,
-              rename
-            } in inputsWithState"
-            :key="`${nodeId}: ${widgetName}`"
-            :class="
-              cn(dragClass, 'my-2 rounded-lg bg-primary-background/30 p-2')
-            "
-            :title="label ?? widgetName"
-            :sub-title="subLabel"
-            :rename
-            :remove="
-              () =>
-                remove(
-                  appModeStore.selectedInputs,
-                  ([id, name]) => nodeId == id && widgetName === name
-                )
-            "
-          />
-        </DraggableList>
-      </PropertiesAccordionItem>
-      <PropertiesAccordionItem
-        v-if="isSelectOutputsMode"
-        :label="t('nodeHelpPage.outputs')"
-        enable-empty-state
-        :disabled="!appModeStore.selectedOutputs.length"
-        :tooltip="`${t('linearMode.builder.outputsDesc')}\n${t('linearMode.builder.outputsExample')}`"
-        :tooltip-delay="100"
-      >
-        <template #label>
-          <div class="flex gap-3">
-            {{ t('nodeHelpPage.outputs') }}
-            <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
-          </div>
-        </template>
-        <template #empty>
-          <div
-            class="w-full p-4 pt-2 text-muted-foreground"
-            v-text="t('linearMode.builder.promptAddOutputs')"
-          />
-        </template>
-        <div
-          class="w-full p-4 pt-2 text-muted-foreground"
-          v-text="t('linearMode.builder.promptAddOutputs')"
-        />
-        <DraggableList
-          v-slot="{ dragClass }"
-          v-model="appModeStore.selectedOutputs"
-        >
-          <IoItem
-            v-for="([key, title], index) in outputsWithState"
-            :key
-            :class="
-              cn(
-                dragClass,
-                'my-2 rounded-lg bg-warning-background/40 p-2',
-                index === 0 && 'ring-2 ring-warning-background'
-              )
-            "
-            :title
-            :sub-title="String(key)"
-            :remove="
-              () => remove(appModeStore.selectedOutputs, (k) => k == key)
-            "
-          />
-        </DraggableList>
-      </PropertiesAccordionItem>
-    </div>
+  <div class="flex items-center border-b border-border-subtle p-2 font-bold">
+    {{
+      isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
+    }}
   </div>
+  <DraggableList
+    v-if="isArrangeMode"
+    v-slot="{ dragClass }"
+    v-model="appModeStore.selectedInputs"
+  >
+    <div
+      v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
+      :key="`${nodeId}: ${widgetName}`"
+      :class="cn(dragClass, 'pointer-events-auto my-2 p-2')"
+      :aria-label="`${widget?.label ?? widgetName} — ${node.title}`"
+    >
+      <div v-if="widget" class="pointer-events-none" inert>
+        <WidgetItem
+          :widget="widget"
+          :node="node"
+          show-node-name
+          hidden-widget-actions
+        />
+      </div>
+      <div v-else class="pointer-events-none p-1 text-sm text-muted-foreground">
+        {{ widgetName }}
+        <p class="text-xs italic">
+          ({{ t('linearMode.builder.unknownWidget') }})
+        </p>
+      </div>
+    </div>
+  </DraggableList>
+  <PropertiesAccordionItem
+    v-if="isSelectInputsMode"
+    :label="t('nodeHelpPage.inputs')"
+    enable-empty-state
+    :disabled="!appModeStore.selectedInputs.length"
+    class="border-b border-border-subtle"
+    :tooltip="`${t('linearMode.builder.inputsDesc')}\n${t('linearMode.builder.inputsExample')}`"
+    :tooltip-delay="100"
+  >
+    <template #label>
+      <div class="flex gap-3">
+        {{ t('nodeHelpPage.inputs') }}
+        <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
+      </div>
+    </template>
+    <template #empty>
+      <div
+        class="w-full p-4 pt-2 text-muted-foreground"
+        v-text="t('linearMode.builder.promptAddInputs')"
+      />
+    </template>
+    <div
+      class="w-full p-4 pt-2 text-muted-foreground"
+      v-text="t('linearMode.builder.promptAddInputs')"
+    />
+    <DraggableList v-slot="{ dragClass }" v-model="appModeStore.selectedInputs">
+      <IoItem
+        v-for="{
+          nodeId,
+          widgetName,
+          label,
+          subLabel,
+          rename
+        } in inputsWithState"
+        :key="`${nodeId}: ${widgetName}`"
+        :class="cn(dragClass, 'my-2 rounded-lg bg-primary-background/30 p-2')"
+        :title="label ?? widgetName"
+        :sub-title="subLabel"
+        :rename
+        :remove="
+          () =>
+            remove(
+              appModeStore.selectedInputs,
+              ([id, name]) => nodeId == id && widgetName === name
+            )
+        "
+      />
+    </DraggableList>
+  </PropertiesAccordionItem>
+  <PropertiesAccordionItem
+    v-if="isSelectOutputsMode"
+    :label="t('nodeHelpPage.outputs')"
+    enable-empty-state
+    :disabled="!appModeStore.selectedOutputs.length"
+    :tooltip="`${t('linearMode.builder.outputsDesc')}\n${t('linearMode.builder.outputsExample')}`"
+    :tooltip-delay="100"
+  >
+    <template #label>
+      <div class="flex gap-3">
+        {{ t('nodeHelpPage.outputs') }}
+        <i class="icon-[lucide--circle-alert] bg-muted-foreground" />
+      </div>
+    </template>
+    <template #empty>
+      <div
+        class="w-full p-4 pt-2 text-muted-foreground"
+        v-text="t('linearMode.builder.promptAddOutputs')"
+      />
+    </template>
+    <div
+      class="w-full p-4 pt-2 text-muted-foreground"
+      v-text="t('linearMode.builder.promptAddOutputs')"
+    />
+    <DraggableList
+      v-slot="{ dragClass }"
+      v-model="appModeStore.selectedOutputs"
+    >
+      <IoItem
+        v-for="([key, title], index) in outputsWithState"
+        :key
+        :class="
+          cn(
+            dragClass,
+            'my-2 rounded-lg bg-warning-background/40 p-2',
+            index === 0 && 'ring-2 ring-warning-background'
+          )
+        "
+        :title
+        :sub-title="String(key)"
+        :remove="() => remove(appModeStore.selectedOutputs, (k) => k == key)"
+      />
+    </DraggableList>
+  </PropertiesAccordionItem>
 
   <Teleport
     v-if="isSelectMode && !settingStore.get('Comfy.VueNodes.Enabled')"

src/components/builder/BuilderMenu.vue

@@ -19,31 +19,38 @@
       </button>
     </template>
     <template #default="{ close }">
-      <template v-for="(item, index) in menuItems" :key="item.label">
-        <div v-if="index > 0" class="my-1 border-t border-border-default" />
-        <Button
-          variant="textonly"
-          size="unset"
-          class="flex w-full items-center justify-start gap-3 rounded-md px-3 py-2 text-sm"
-          :disabled="item.disabled"
-          @click="item.action(close)"
-        >
-          <i :class="cn(item.icon, 'size-4')" />
-          {{ item.label }}
-        </Button>
-      </template>
+      <button
+        :class="
+          cn(
+            'flex w-full items-center gap-3 rounded-md border-none bg-transparent px-3 py-2 text-sm',
+            hasOutputs
+              ? 'cursor-pointer hover:bg-secondary-background-hover'
+              : 'pointer-events-none opacity-50'
+          )
+        "
+        :disabled="!hasOutputs"
+        @click="onSave(close)"
+      >
+        <i class="icon-[lucide--save] size-4" />
+        {{ t('g.save') }}
+      </button>
+      <div class="my-1 border-t border-border-default" />
+      <button
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md border-none bg-transparent px-3 py-2 text-sm hover:bg-secondary-background-hover"
+        @click="onExitBuilder(close)"
+      >
+        <i class="icon-[lucide--square-pen] size-4" />
+        {{ t('builderMenu.exitAppBuilder') }}
+      </button>
     </template>
   </Popover>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
-import Button from '@/components/ui/button/Button.vue'
 import Popover from '@/components/ui/Popover.vue'
-import { useAppMode } from '@/composables/useAppMode'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -53,30 +60,10 @@ import { cn } from '@/utils/tailwindUtil'
 const { t } = useI18n()
 const appModeStore = useAppModeStore()
 const { hasOutputs } = storeToRefs(appModeStore)
-const { setMode } = useAppMode()
 const workflowService = useWorkflowService()
 const workflowStore = useWorkflowStore()
 const { toastErrorHandler } = useErrorHandling()
 
-const menuItems = computed(() => [
-  {
-    label: t('g.save'),
-    icon: 'icon-[lucide--save]',
-    disabled: !hasOutputs.value,
-    action: onSave
-  },
-  {
-    label: t('builderMenu.enterAppMode'),
-    icon: 'icon-[lucide--panels-top-left]',
-    action: onEnterAppMode
-  },
-  {
-    label: t('builderMenu.exitAppBuilder'),
-    icon: 'icon-[lucide--square-pen]',
-    action: onExitBuilder
-  }
-])
-
 async function onSave(close: () => void) {
   const workflow = workflowStore.activeWorkflow
   if (!workflow) return
@@ -88,11 +75,6 @@ async function onSave(close: () => void) {
   }
 }
 
-function onEnterAppMode(close: () => void) {
-  setMode('app')
-  close()
-}
-
 function onExitBuilder(close: () => void) {
   void appModeStore.exitBuilder()
   close()

src/components/common/WorkflowActionsDropdown.vue

@@ -5,7 +5,6 @@ import {
   DropdownMenuRoot,
   DropdownMenuTrigger
 } from 'reka-ui'
-import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
@@ -23,7 +22,6 @@ const { source, align = 'start' } = defineProps<{
 
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
-const dropdownOpen = ref(false)
 
 const { menuItems } = useWorkflowActionsMenu(
   () => useCommandStore().execute('Comfy.RenameWorkflow'),
@@ -42,38 +40,22 @@ function handleOpen(open: boolean) {
     })
   }
 }
-
-function toggleLinearMode() {
-  dropdownOpen.value = false
-  void useCommandStore().execute('Comfy.ToggleLinear', {
-    metadata: { source }
-  })
-}
 </script>
 
 <template>
-  <DropdownMenuRoot v-model:open="dropdownOpen" @update:open="handleOpen">
-    <slot name="button" :has-unseen-items="hasUnseenItems">
-      <div
-        class="pointer-events-auto inline-flex items-center rounded-lg bg-secondary-background"
-      >
+  <DropdownMenuRoot @update:open="handleOpen">
+    <DropdownMenuTrigger as-child>
+      <slot name="button" :has-unseen-items="hasUnseenItems">
         <Button
           v-tooltip="{
-            value: canvasStore.linearMode
-              ? t('breadcrumbsMenu.enterNodeGraph')
-              : t('breadcrumbsMenu.enterAppMode'),
+            value: t('breadcrumbsMenu.workflowActions'),
             showDelay: 300,
             hideDelay: 300
           }"
-          :aria-label="
-            canvasStore.linearMode
-              ? t('breadcrumbsMenu.enterNodeGraph')
-              : t('breadcrumbsMenu.enterAppMode')
-          "
-          variant="base"
-          class="m-1"
-          @pointerdown.stop
-          @click="toggleLinearMode"
+          variant="secondary"
+          size="unset"
+          :aria-label="t('breadcrumbsMenu.workflowActions')"
+          class="pointer-events-auto relative h-10 gap-1 rounded-lg pr-2 pl-3 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
         >
           <i
             class="size-4"
@@ -83,36 +65,15 @@ function toggleLinearMode() {
                 : 'icon-[comfy--workflow]'
             "
           />
+          <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
+          <span
+            v-if="hasUnseenItems"
+            aria-hidden="true"
+            class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
+          />
         </Button>
-        <DropdownMenuTrigger as-child>
-          <Button
-            v-tooltip="{
-              value: t('breadcrumbsMenu.workflowActions'),
-              showDelay: 300,
-              hideDelay: 300
-            }"
-            variant="secondary"
-            size="unset"
-            :aria-label="t('breadcrumbsMenu.workflowActions')"
-            class="relative h-10 gap-1 rounded-lg pr-2 pl-2.5 text-center data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
-          >
-            <span>{{
-              canvasStore.linearMode
-                ? t('breadcrumbsMenu.app')
-                : t('breadcrumbsMenu.graph')
-            }}</span>
-            <i
-              class="icon-[lucide--chevron-down] size-4 text-muted-foreground"
-            />
-            <span
-              v-if="hasUnseenItems"
-              aria-hidden="true"
-              class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
-            />
-          </Button>
-        </DropdownMenuTrigger>
-      </div>
-    </slot>
+      </slot>
+    </DropdownMenuTrigger>
     <DropdownMenuPortal>
       <DropdownMenuContent
         :align

src/components/sidebar/tabs/AppsSidebarTab.vue

@@ -2,6 +2,7 @@
   <BaseWorkflowsSidebarTab
     :title="$t('linearMode.appModeToolbar.apps')"
     :filter="isAppWorkflow"
+    :label-transform="stripAppJsonSuffix"
     hide-leaf-icon
     :search-subject="$t('linearMode.appModeToolbar.apps')"
     data-testid="apps-sidebar"
@@ -17,14 +18,8 @@
       <NoResultsPlaceholder
         button-variant="secondary"
         text-class="text-muted-foreground text-sm"
-        :message="
-          isAppMode
-            ? $t('linearMode.appModeToolbar.appsEmptyMessage')
-            : `${$t('linearMode.appModeToolbar.appsEmptyMessage')}\n${$t('linearMode.appModeToolbar.appsEmptyMessageAction')}`
-        "
-        :button-label="
-          isAppMode ? undefined : $t('linearMode.appModeToolbar.enterAppMode')
-        "
+        :message="$t('linearMode.appModeToolbar.appsEmptyMessage')"
+        :button-label="$t('linearMode.appModeToolbar.enterAppMode')"
         @action="enterAppMode"
       />
     </template>
@@ -37,12 +32,16 @@ import BaseWorkflowsSidebarTab from '@/components/sidebar/tabs/BaseWorkflowsSide
 import { useAppMode } from '@/composables/useAppMode'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 
-const { isAppMode, setMode } = useAppMode()
+const { setMode } = useAppMode()
 
 function isAppWorkflow(workflow: ComfyWorkflow): boolean {
   return workflow.suffix === 'app.json'
 }
 
+function stripAppJsonSuffix(label: string): string {
+  return label.replace(/\.app\.json$/i, '')
+}
+
 function enterAppMode() {
   setMode('app')
 }

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -154,7 +154,6 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
-import { useAppMode } from '@/composables/useAppMode'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import {
@@ -164,23 +163,26 @@ import {
 } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
-import {
-  ensureWorkflowSuffix,
-  getFilenameDetails,
-  getWorkflowSuffix
-} from '@/utils/formatUtil'
+import { ensureWorkflowSuffix, getWorkflowSuffix } from '@/utils/formatUtil'
 import { buildTree, sortedTree } from '@/utils/treeUtil'
 
-const { title, filter, searchSubject, dataTestid, hideLeafIcon } = defineProps<{
+const {
+  title,
+  filter,
+  searchSubject,
+  dataTestid,
+  labelTransform,
+  hideLeafIcon
+} = defineProps<{
   title: string
   filter?: (workflow: ComfyWorkflow) => boolean
   searchSubject: string
   dataTestid: string
+  labelTransform?: (label: string) => string
   hideLeafIcon?: boolean
 }>()
 
 const { t } = useI18n()
-const { isAppMode } = useAppMode()
 
 const applyFilter = (workflows: ComfyWorkflow[]) =>
   filter ? workflows.filter(filter) : workflows
@@ -302,18 +304,14 @@ const renderTreeNode = (
             },
         contextMenuItems() {
           return [
-            ...(isAppMode.value
-              ? []
-              : [
-                  {
-                    label: t('g.insert'),
-                    icon: 'pi pi-file-export',
-                    command: async () => {
-                      const workflow = node.data
-                      await workflowService.insertWorkflow(workflow)
-                    }
-                  }
-                ]),
+            {
+              label: t('g.insert'),
+              icon: 'pi pi-file-export',
+              command: async () => {
+                const workflow = node.data
+                await workflowService.insertWorkflow(workflow)
+              }
+            },
             {
               label: t('g.duplicate'),
               icon: 'pi pi-file-export',
@@ -328,7 +326,8 @@ const renderTreeNode = (
       }
     : { handleClick }
 
-  const label = node.leaf ? getFilenameDetails(node.label).filename : node.label
+  const label =
+    node.leaf && labelTransform ? labelTransform(node.label) : node.label
 
   return {
     key: node.key,

src/components/ui/ZoomPane.vue

@@ -9,8 +9,7 @@ const panY = ref(0.0)
 
 function handleWheel(e: WheelEvent) {
   const zoomPaneEl = zoomPane.value
-  if (!zoomPaneEl || (e.deltaY < 0 ? zoom.value > 1200 : zoom.value < -500))
-    return
+  if (!zoomPaneEl) return
 
   zoom.value -= e.deltaY
   const { x, y, width, height } = zoomPaneEl.getBoundingClientRect()

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

@@ -20,7 +20,6 @@ export const buttonVariants = cva({
       'destructive-textonly':
         'bg-transparent text-destructive-background hover:bg-destructive-background/10',
       'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
-      base: 'bg-base-background text-base-foreground hover:bg-secondary-background-hover',
       gradient:
         'border-transparent bg-(image:--subscription-button-gradient) text-white hover:opacity-90'
     },
@@ -50,7 +49,6 @@ const variants = [
   'textonly',
   'muted-textonly',
   'destructive-textonly',
-  'base',
   'overlay-white',
   'gradient'
 ] as const satisfies Array<ButtonVariants['variant']>

src/composables/useCoreCommands.ts

@@ -905,14 +905,6 @@ export function useCoreCommands(): ComfyCommand[] {
         app.canvas.pasteFromClipboard()
       }
     },
-    {
-      id: 'Comfy.Canvas.PasteFromClipboardWithConnect',
-      icon: 'icon-[lucide--clipboard-paste]',
-      label: () => t('Paste with Connect'),
-      function: () => {
-        app.canvas.pasteFromClipboard({ connectInputs: true })
-      }
-    },
     {
       id: 'Comfy.Canvas.SelectAll',
       icon: 'icon-[lucide--lasso-select]',
@@ -927,12 +919,6 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Delete Selected Items',
       versionAdded: '1.10.5',
       function: () => {
-        if (app.canvas.selectedItems.size === 0) {
-          app.canvas.canvas.dispatchEvent(
-            new CustomEvent('litegraph:no-items-selected', { bubbles: true })
-          )
-          return
-        }
         app.canvas.deleteSelected()
         app.canvas.setDirty(true, true)
       }

src/composables/useStablePrimeVueSplitterSizer.test.ts

@@ -1,133 +0,0 @@
-import type { SplitterResizeEndEvent } from 'primevue/splitter'
-
-import { nextTick, ref } from 'vue'
-import { describe, expect, it, vi } from 'vitest'
-
-import { useStablePrimeVueSplitterSizer } from './useStablePrimeVueSplitterSizer'
-
-vi.mock('@vueuse/core', async (importOriginal) => {
-  const actual = await importOriginal()
-  return {
-    ...(actual as object),
-    useStorage: <T>(_key: string, defaultValue: T) => ref(defaultValue)
-  }
-})
-
-function createPanel(width: number) {
-  const el = document.createElement('div')
-  Object.defineProperty(el, 'offsetWidth', { value: width })
-  return ref(el)
-}
-
-function resizeEndEvent(): SplitterResizeEndEvent {
-  return { originalEvent: new Event('mouseup'), sizes: [] }
-}
-
-async function flushWatcher() {
-  await nextTick()
-  await nextTick()
-}
-
-describe('useStablePrimeVueSplitterSizer', () => {
-  it('captures pixel widths on resize end and applies on trigger', async () => {
-    const panelRef = createPanel(400)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-capture' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('400px')
-    expect(panelRef.value!.style.flexGrow).toBe('0')
-    expect(panelRef.value!.style.flexShrink).toBe('0')
-  })
-
-  it('does not apply styles when no stored width exists', async () => {
-    const panelRef = createPanel(300)
-    const trigger = ref(0)
-
-    useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-no-stored' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('')
-  })
-
-  it('re-applies stored widths when watch sources change', async () => {
-    const panelRef = createPanel(500)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [{ ref: panelRef, storageKey: 'test-reapply' }],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    panelRef.value!.style.flexBasis = ''
-    panelRef.value!.style.flexGrow = ''
-    panelRef.value!.style.flexShrink = ''
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(panelRef.value!.style.flexBasis).toBe('500px')
-    expect(panelRef.value!.style.flexGrow).toBe('0')
-    expect(panelRef.value!.style.flexShrink).toBe('0')
-  })
-
-  it('handles multiple panels independently', async () => {
-    const leftRef = createPanel(300)
-    const rightRef = createPanel(250)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [
-        { ref: leftRef, storageKey: 'test-multi-left' },
-        { ref: rightRef, storageKey: 'test-multi-right' }
-      ],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(leftRef.value!.style.flexBasis).toBe('300px')
-    expect(rightRef.value!.style.flexBasis).toBe('250px')
-  })
-
-  it('skips panels with null refs', async () => {
-    const nullRef = ref(null)
-    const validRef = createPanel(200)
-    const trigger = ref(0)
-
-    const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-      [
-        { ref: nullRef, storageKey: 'test-null' },
-        { ref: validRef, storageKey: 'test-valid' }
-      ],
-      [trigger]
-    )
-    await flushWatcher()
-
-    onResizeEnd(resizeEndEvent())
-
-    trigger.value++
-    await flushWatcher()
-
-    expect(validRef.value!.style.flexBasis).toBe('200px')
-  })
-})

src/composables/useStablePrimeVueSplitterSizer.ts

@@ -1,64 +0,0 @@
-import type { SplitterResizeEndEvent } from 'primevue/splitter'
-import type { WatchSource } from 'vue'
-
-import { unrefElement, useStorage } from '@vueuse/core'
-import type { MaybeComputedElementRef } from '@vueuse/core'
-import { nextTick, watch } from 'vue'
-
-interface PanelConfig {
-  ref: MaybeComputedElementRef
-  storageKey: string
-}
-
-/**
- * Works around PrimeVue Splitter not properly initializing flexBasis
- * when panels are conditionally rendered. Captures pixel widths on
- * resize end and re-applies them as rigid flex values (flex: 0 0 Xpx)
- * when watched sources change (e.g. tab switch, panel toggle).
- *
- * @param panels - array of panel configs with template ref and storage key
- * @param watchSources - reactive sources that trigger re-application
- */
-export function useStablePrimeVueSplitterSizer(
-  panels: PanelConfig[],
-  watchSources: WatchSource[]
-) {
-  const storedWidths = panels.map((panel) => ({
-    ref: panel.ref,
-    width: useStorage<number | null>(panel.storageKey, null)
-  }))
-
-  function resolveElement(
-    ref: MaybeComputedElementRef
-  ): HTMLElement | undefined {
-    return unrefElement(ref) as HTMLElement | undefined
-  }
-
-  function applyStoredWidths() {
-    for (const { ref, width } of storedWidths) {
-      const el = resolveElement(ref)
-      if (!el || width.value === null) continue
-      el.style.flexBasis = `${width.value}px`
-      el.style.flexGrow = '0'
-      el.style.flexShrink = '0'
-    }
-  }
-
-  function onResizeEnd(_event: SplitterResizeEndEvent) {
-    for (const { ref, width } of storedWidths) {
-      const el = resolveElement(ref)
-      if (el) width.value = el.offsetWidth
-    }
-  }
-
-  watch(
-    watchSources,
-    async () => {
-      await nextTick()
-      applyStoredWidths()
-    },
-    { immediate: true }
-  )
-
-  return { onResizeEnd }
-}

src/composables/useWorkflowActionsMenu.ts

@@ -2,10 +2,7 @@ import type { ComputedRef, Ref } from 'vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
-import { openShareDialog } from '@/platform/workflow/sharing/composables/lazyShareDialog'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import {
@@ -55,7 +52,6 @@ export function useWorkflowActionsMenu(
   const subgraphStore = useSubgraphStore()
   const menuItemStore = useMenuItemStore()
   const canvasStore = useCanvasStore()
-  const { toastErrorHandler } = useErrorHandling()
   const { flags } = useFeatureFlags()
   const { enterBuilder } = useAppModeStore()
 
@@ -193,10 +189,11 @@ export function useWorkflowActionsMenu(
 
     addItem({
       id: 'share',
-      label: t('breadcrumbsMenu.share'),
+      label: t('menuLabels.Share'),
       icon: 'icon-[comfy--send]',
-      command: () => openShareDialog().catch(toastErrorHandler),
-      visible: isCloud && flags.workflowSharingEnabled
+      command: async () => {},
+      disabled: true,
+      visible: isRoot
     })
 
     addItem({

src/lib/litegraph/src/LGraphCanvas.ts

@@ -3791,6 +3791,13 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     return
   }
 
+  private _noItemsSelected(): void {
+    const event = new CustomEvent('litegraph:no-items-selected', {
+      bubbles: true
+    })
+    this.canvas.dispatchEvent(event)
+  }
+
   /**
    * process a key event
    */
@@ -3835,6 +3842,31 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
         this.node_panel?.close()
         this.options_panel?.close()
         if (this.node_panel || this.options_panel) block_default = true
+      } else if (e.keyCode === 65 && e.ctrlKey) {
+        // select all Control A
+        this.selectItems()
+        block_default = true
+      } else if (e.keyCode === 67 && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+        // copy
+        if (this.selected_nodes) {
+          this.copyToClipboard()
+          block_default = true
+        }
+      } else if (e.keyCode === 86 && (e.metaKey || e.ctrlKey)) {
+        // paste
+        this.pasteFromClipboard({ connectInputs: e.shiftKey })
+      } else if (e.key === 'Delete' || e.key === 'Backspace') {
+        // delete or backspace
+        // @ts-expect-error EventTarget.localName is not in standard types
+        if (e.target.localName != 'input' && e.target.localName != 'textarea') {
+          if (this.selectedItems.size === 0) {
+            this._noItemsSelected()
+            return
+          }
+
+          this.deleteSelected()
+          block_default = true
+        }
       }
 
       // TODO

src/locales/en/main.json

@@ -1262,7 +1262,6 @@
     "Move Selected Nodes Right": "Move Selected Nodes Right",
     "Move Selected Nodes Up": "Move Selected Nodes Up",
     "Paste": "Paste",
-    "Paste with Connect": "Paste with Connect",
     "Reset View": "Reset View",
     "Resize Selected Nodes": "Resize Selected Nodes",
     "Select All": "Select All",
@@ -2604,11 +2603,7 @@
     "deleteWorkflow": "Delete Workflow",
     "deleteBlueprint": "Delete Blueprint",
     "enterNewName": "Enter new name",
-    "missingNodesWarning": "Workflow contains unsupported nodes (highlighted red).",
-    "share": "Share",
-    "graph": "Graph",
-    "app": "App",
-    "enterNodeGraph": "Enter node graph"
+    "missingNodesWarning": "Workflow contains unsupported nodes (highlighted red)."
   },
   "shortcuts": {
     "shortcuts": "Shortcuts",
@@ -3163,13 +3158,12 @@
     "runCount": "Number of runs",
     "rerun": "Rerun",
     "reuseParameters": "Reuse Parameters",
-    "downloadAll": "Download {count} assets from this run",
+    "downloadAll": "Download All",
     "viewJob": "View Job",
     "enterNodeGraph": "Enter node graph",
     "emptyWorkflowExplanation": "Your workflow is empty. You need some nodes first to start building an app.",
     "backToWorkflow": "Back to workflow",
     "loadTemplate": "Load a template",
-    "cancelThisRun": "Cancel this run",
     "welcome": {
       "title": "App Mode",
       "message": "A simplified view that hides the node graph so you can focus on creating.",
@@ -3181,8 +3175,7 @@
     "appModeToolbar": {
       "appBuilder": "App builder",
       "apps": "Apps",
-      "appsEmptyMessage": "Saved apps will show up here.",
-      "appsEmptyMessageAction": "Click below to build your first app.",
+      "appsEmptyMessage": "Saved apps will show up here.\nClick below to build your first app.",
       "enterAppMode": "Enter app mode"
     },
     "arrange": {
@@ -3524,7 +3517,6 @@
     "emptyWorkflowPrompt": "Do you want to start with a template?"
   },
   "builderMenu": {
-    "enterAppMode": "Enter app mode",
     "exitAppBuilder": "Exit app builder"
   }
 }

src/platform/keybindings/defaults.ts

@@ -208,52 +208,5 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       key: 'Escape'
     },
     commandId: 'Comfy.Graph.ExitSubgraph'
-  },
-  {
-    combo: {
-      ctrl: true,
-      key: 'a'
-    },
-    commandId: 'Comfy.Canvas.SelectAll',
-    targetElementId: 'graph-canvas-container'
-  },
-  {
-    combo: {
-      ctrl: true,
-      key: 'c'
-    },
-    commandId: 'Comfy.Canvas.CopySelected',
-    targetElementId: 'graph-canvas-container'
-  },
-  {
-    combo: {
-      ctrl: true,
-      key: 'v'
-    },
-    commandId: 'Comfy.Canvas.PasteFromClipboard',
-    targetElementId: 'graph-canvas-container'
-  },
-  {
-    combo: {
-      ctrl: true,
-      shift: true,
-      key: 'v'
-    },
-    commandId: 'Comfy.Canvas.PasteFromClipboardWithConnect',
-    targetElementId: 'graph-canvas-container'
-  },
-  {
-    combo: {
-      key: 'Delete'
-    },
-    commandId: 'Comfy.Canvas.DeleteSelectedItems',
-    targetElementId: 'graph-canvas-container'
-  },
-  {
-    combo: {
-      key: 'Backspace'
-    },
-    commandId: 'Comfy.Canvas.DeleteSelectedItems',
-    targetElementId: 'graph-canvas-container'
   }
 ]

src/platform/keybindings/keybindingService.forwarding.test.ts

@@ -1,11 +1,22 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useKeybindingService } from '@/platform/keybindings/keybindingService'
+import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
+vi.mock('@/scripts/app', () => {
+  return {
+    app: {
+      canvas: {
+        processKey: vi.fn()
+      }
+    }
+  }
+})
+
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
     get: vi.fn(() => [])
@@ -25,15 +36,13 @@ function createTestKeyboardEvent(
     ctrlKey?: boolean
     altKey?: boolean
     metaKey?: boolean
-    shiftKey?: boolean
   } = {}
 ): KeyboardEvent {
   const {
     target = document.body,
     ctrlKey = false,
     altKey = false,
-    metaKey = false,
-    shiftKey = false
+    metaKey = false
   } = options
 
   const event = new KeyboardEvent('keydown', {
@@ -41,7 +50,6 @@ function createTestKeyboardEvent(
     ctrlKey,
     altKey,
     metaKey,
-    shiftKey,
     bubbles: true,
     cancelable: true
   })
@@ -52,10 +60,8 @@ function createTestKeyboardEvent(
   return event
 }
 
-describe('keybindingService - Canvas Keybindings', () => {
+describe('keybindingService - Event Forwarding', () => {
   let keybindingService: ReturnType<typeof useKeybindingService>
-  let canvasContainer: HTMLDivElement
-  let canvasChild: HTMLCanvasElement
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -70,156 +76,94 @@ describe('keybindingService - Canvas Keybindings', () => {
       typeof useDialogStore
     >)
 
-    canvasContainer = document.createElement('div')
-    canvasContainer.id = 'graph-canvas-container'
-    canvasChild = document.createElement('canvas')
-    canvasContainer.appendChild(canvasChild)
-    document.body.appendChild(canvasContainer)
-
     keybindingService = useKeybindingService()
     keybindingService.registerCoreKeybindings()
   })
 
-  afterEach(() => {
-    canvasContainer.remove()
-  })
-
-  it('should execute DeleteSelectedItems for Delete key on canvas', async () => {
-    const event = createTestKeyboardEvent('Delete', {
-      target: canvasChild
-    })
+  it('should forward Delete key to canvas when no keybinding exists', async () => {
+    const event = createTestKeyboardEvent('Delete')
 
     await keybindingService.keybindHandler(event)
 
-    expect(vi.mocked(useCommandStore().execute)).toHaveBeenCalledWith(
-      'Comfy.Canvas.DeleteSelectedItems'
-    )
+    expect(vi.mocked(app.canvas.processKey)).toHaveBeenCalledWith(event)
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
   })
 
-  it('should execute DeleteSelectedItems for Backspace key on canvas', async () => {
-    const event = createTestKeyboardEvent('Backspace', {
-      target: canvasChild
-    })
+  it('should forward Backspace key to canvas when no keybinding exists', async () => {
+    const event = createTestKeyboardEvent('Backspace')
 
     await keybindingService.keybindHandler(event)
 
-    expect(vi.mocked(useCommandStore().execute)).toHaveBeenCalledWith(
-      'Comfy.Canvas.DeleteSelectedItems'
-    )
+    expect(vi.mocked(app.canvas.processKey)).toHaveBeenCalledWith(event)
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
   })
 
-  it('should not execute DeleteSelectedItems when typing in input field', async () => {
+  it('should not forward Delete key when typing in input field', async () => {
     const inputElement = document.createElement('input')
     const event = createTestKeyboardEvent('Delete', { target: inputElement })
 
     await keybindingService.keybindHandler(event)
 
+    expect(vi.mocked(app.canvas.processKey)).not.toHaveBeenCalled()
     expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
   })
 
-  it('should not execute DeleteSelectedItems when typing in textarea', async () => {
+  it('should not forward Delete key when typing in textarea', async () => {
     const textareaElement = document.createElement('textarea')
-    const event = createTestKeyboardEvent('Delete', {
-      target: textareaElement
-    })
+    const event = createTestKeyboardEvent('Delete', { target: textareaElement })
 
     await keybindingService.keybindHandler(event)
 
+    expect(vi.mocked(app.canvas.processKey)).not.toHaveBeenCalled()
     expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
   })
 
-  it('should execute SelectAll for Ctrl+A on canvas', async () => {
-    const event = createTestKeyboardEvent('a', {
-      ctrlKey: true,
-      target: canvasChild
-    })
+  it('should not forward Delete key when canvas processKey is not available', async () => {
+    // Temporarily replace processKey with undefined - testing edge case
+    const originalProcessKey = vi.mocked(app.canvas).processKey
+    vi.mocked(app.canvas).processKey = undefined!
 
-    await keybindingService.keybindHandler(event)
+    const event = createTestKeyboardEvent('Delete')
 
-    expect(vi.mocked(useCommandStore().execute)).toHaveBeenCalledWith(
-      'Comfy.Canvas.SelectAll'
-    )
+    try {
+      await keybindingService.keybindHandler(event)
+      expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+    } finally {
+      // Restore processKey for other tests
+      vi.mocked(app.canvas).processKey = originalProcessKey
+    }
   })
 
-  it('should execute CopySelected for Ctrl+C on canvas', async () => {
-    const event = createTestKeyboardEvent('c', {
-      ctrlKey: true,
-      target: canvasChild
-    })
+  it('should not forward Delete key when canvas is not available', async () => {
+    const originalCanvas = vi.mocked(app).canvas
+    vi.mocked(app).canvas = null!
 
-    await keybindingService.keybindHandler(event)
+    const event = createTestKeyboardEvent('Delete')
 
-    expect(vi.mocked(useCommandStore().execute)).toHaveBeenCalledWith(
-      'Comfy.Canvas.CopySelected'
-    )
+    try {
+      await keybindingService.keybindHandler(event)
+      expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+    } finally {
+      // Restore canvas for other tests
+      vi.mocked(app).canvas = originalCanvas
+    }
   })
 
-  it('should execute PasteFromClipboard for Ctrl+V on canvas', async () => {
-    const event = createTestKeyboardEvent('v', {
-      ctrlKey: true,
-      target: canvasChild
-    })
-
-    await keybindingService.keybindHandler(event)
-
-    expect(vi.mocked(useCommandStore().execute)).toHaveBeenCalledWith(
-      'Comfy.Canvas.PasteFromClipboard'
-    )
-  })
-
-  it('should execute PasteFromClipboardWithConnect for Ctrl+Shift+V on canvas', async () => {
-    const event = createTestKeyboardEvent('v', {
-      ctrlKey: true,
-      shiftKey: true,
-      target: canvasChild
-    })
-
-    await keybindingService.keybindHandler(event)
-
-    expect(vi.mocked(useCommandStore().execute)).toHaveBeenCalledWith(
-      'Comfy.Canvas.PasteFromClipboardWithConnect'
-    )
-  })
-
-  it('should execute graph-canvas bindings by normalizing to graph-canvas-container', async () => {
-    const event = createTestKeyboardEvent('=', {
-      altKey: true,
-      target: canvasChild
-    })
-
-    await keybindingService.keybindHandler(event)
-
-    expect(vi.mocked(useCommandStore().execute)).toHaveBeenCalledWith(
-      'Comfy.Canvas.ZoomIn'
-    )
-  })
-
-  it('should not execute graph-canvas bindings when target is outside canvas', async () => {
-    const outsideDiv = document.createElement('div')
-    document.body.appendChild(outsideDiv)
-
-    const event = createTestKeyboardEvent('=', {
-      altKey: true,
-      target: outsideDiv
-    })
+  it('should not forward non-canvas keys', async () => {
+    const event = createTestKeyboardEvent('Enter')
 
     await keybindingService.keybindHandler(event)
 
+    expect(vi.mocked(app.canvas.processKey)).not.toHaveBeenCalled()
     expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
-    outsideDiv.remove()
   })
 
-  it('should not execute canvas commands when target is outside canvas container', async () => {
-    const outsideDiv = document.createElement('div')
-    document.body.appendChild(outsideDiv)
-
-    const event = createTestKeyboardEvent('Delete', {
-      target: outsideDiv
-    })
+  it('should not forward when modifier keys are pressed', async () => {
+    const event = createTestKeyboardEvent('Delete', { ctrlKey: true })
 
     await keybindingService.keybindHandler(event)
 
+    expect(vi.mocked(app.canvas.processKey)).not.toHaveBeenCalled()
     expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
-    outsideDiv.remove()
   })
 })

src/platform/keybindings/keybindingService.ts

@@ -1,5 +1,6 @@
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -14,6 +15,16 @@ export function useKeybindingService() {
   const settingStore = useSettingStore()
   const dialogStore = useDialogStore()
 
+  function shouldForwardToCanvas(event: KeyboardEvent): boolean {
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return false
+    }
+
+    const canvasKeys = ['Delete', 'Backspace']
+
+    return canvasKeys.includes(event.key)
+  }
+
   async function keybindHandler(event: KeyboardEvent) {
     const keyCombo = KeyComboImpl.fromEvent(event)
     if (keyCombo.isModifier) {
@@ -33,17 +44,7 @@ export function useKeybindingService() {
     }
 
     const keybinding = keybindingStore.getKeybinding(keyCombo)
-    if (keybinding) {
-      const targetElementId =
-        keybinding.targetElementId === 'graph-canvas'
-          ? 'graph-canvas-container'
-          : keybinding.targetElementId
-      if (targetElementId) {
-        const container = document.getElementById(targetElementId)
-        if (!container?.contains(target)) {
-          return
-        }
-      }
+    if (keybinding && keybinding.targetElementId !== 'graph-canvas') {
       if (
         event.key === 'Escape' &&
         !event.ctrlKey &&
@@ -73,6 +74,18 @@ export function useKeybindingService() {
       return
     }
 
+    if (!keybinding && shouldForwardToCanvas(event)) {
+      const canvas = app.canvas
+      if (
+        canvas &&
+        canvas.processKey &&
+        typeof canvas.processKey === 'function'
+      ) {
+        canvas.processKey(event)
+        return
+      }
+    }
+
     if (event.ctrlKey || event.altKey || event.metaKey) {
       return
     }

src/renderer/extensions/linearMode/AppInput.vue

@@ -8,7 +8,7 @@ import { cn } from '@/utils/tailwindUtil'
 
 const { id, name } = defineProps<{
   id: string
-  enable: boolean
+  isSelectInputsMode: boolean
   name: string
 }>()
 
@@ -25,7 +25,7 @@ function togglePromotion() {
 </script>
 <template>
   <div
-    v-if="enable"
+    v-if="isSelectInputsMode"
     class="pointer-events-auto relative col-span-2 flex cursor-pointer flex-row gap-1"
     @pointerdown.capture.stop.prevent="togglePromotion"
     @click.capture.stop.prevent

src/renderer/extensions/linearMode/ImagePreview.vue

@@ -2,9 +2,6 @@
 import { ref, useTemplateRef } from 'vue'
 
 import ZoomPane from '@/components/ui/ZoomPane.vue'
-import { cn } from '@/utils/tailwindUtil'
-
-defineOptions({ inheritAttrs: false })
 
 const { src } = defineProps<{
   src: string
@@ -16,11 +13,7 @@ const width = ref('')
 const height = ref('')
 </script>
 <template>
-  <ZoomPane
-    v-if="!mobile"
-    v-slot="slotProps"
-    :class="cn('w-full flex-1', $attrs.class as string)"
-  >
+  <ZoomPane v-if="!mobile" v-slot="slotProps" class="w-full flex-1">
     <img
       ref="imageRef"
       :src

src/renderer/extensions/linearMode/LinearArrange.vue

@@ -1,43 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { storeToRefs } from 'pinia'
-
-import Button from '@/components/ui/button/Button.vue'
 import { useAppMode } from '@/composables/useAppMode'
-import { flattenNodeOutput } from '@/renderer/extensions/linearMode/flattenNodeOutput'
-import MediaOutputPreview from '@/renderer/extensions/linearMode/MediaOutputPreview.vue'
 import { useAppModeStore } from '@/stores/appModeStore'
-import { useNodeOutputStore } from '@/stores/nodeOutputStore'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import Button from '@/components/ui/button/Button.vue'
+import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
 const { setMode } = useAppMode()
-const appModeStore = useAppModeStore()
-const { hasOutputs } = storeToRefs(appModeStore)
-const nodeOutputStore = useNodeOutputStore()
-const { nodeIdToNodeLocatorId } = useWorkflowStore()
-
-const existingOutput = computed(() => {
-  for (const nodeId of appModeStore.selectedOutputs) {
-    const locatorId = nodeIdToNodeLocatorId(nodeId)
-    const nodeOutput = nodeOutputStore.nodeOutputs[locatorId]
-    if (!nodeOutput) continue
-    const results = flattenNodeOutput([nodeId, nodeOutput])
-    if (results.length > 0) return results[0]
-  }
-  return undefined
-})
+const { hasOutputs } = storeToRefs(useAppModeStore())
 </script>
 
 <template>
-  <MediaOutputPreview
-    v-if="existingOutput"
-    :output="existingOutput"
-    class="px-12 py-24"
-  />
   <div
-    v-else-if="hasOutputs"
+    v-if="hasOutputs"
     role="article"
     data-testid="arrange-preview"
     class="mx-auto flex h-full w-3/4 flex-col items-center justify-center gap-6 p-8"
@@ -48,7 +23,7 @@ const existingOutput = computed(() => {
       <p class="mb-0 font-bold text-base-foreground">
         {{ t('linearMode.arrange.outputs') }}
       </p>
-      <p class="text-center">{{ t('linearMode.arrange.resultsLabel') }}</p>
+      <p>{{ t('linearMode.arrange.resultsLabel') }}</p>
     </div>
   </div>
   <div

src/renderer/extensions/linearMode/LinearControls.vue

@@ -11,7 +11,6 @@ import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
@@ -45,7 +44,7 @@ const props = defineProps<{
   mobile?: boolean
 }>()
 
-defineEmits<{ navigateOutputs: [] }>()
+defineEmits<{ navigateAssets: [] }>()
 
 //NOTE: due to batching, will never be greater than 2
 const pendingJobQueues = ref(0)
@@ -73,7 +72,7 @@ const mappedSelections = computed(() => {
     ).map(([, widgetName]) => widgetName)
     unprocessedInputs = unprocessedInputs.slice(inputGroup.length)
     const node = resolveNode(nodeId)
-    if (node?.mode !== LGraphEventMode.ALWAYS) continue
+    if (!node) continue
 
     const nodeData = nodeToNodeData(node)
     remove(nodeData.widgets ?? [], (w) => !inputGroup.includes(w.name))
@@ -106,7 +105,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 {
@@ -263,7 +261,7 @@ defineExpose({ runButtonClick })
             <Button
               v-if="mobile"
               variant="inverted"
-              @click="$emit('navigateOutputs')"
+              @click="$emit('navigateAssets')"
             >
               {{ t('linearMode.viewJob') }}
             </Button>

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { downloadFile } from '@/base/common/downloadUtil'
@@ -15,15 +15,23 @@ import LatentPreview from '@/renderer/extensions/linearMode/LatentPreview.vue'
 import LinearWelcome from '@/renderer/extensions/linearMode/LinearWelcome.vue'
 import LinearArrange from '@/renderer/extensions/linearMode/LinearArrange.vue'
 import LinearFeedback from '@/renderer/extensions/linearMode/LinearFeedback.vue'
-import MediaOutputPreview from '@/renderer/extensions/linearMode/MediaOutputPreview.vue'
 import OutputHistory from '@/renderer/extensions/linearMode/OutputHistory.vue'
 import { useOutputHistory } from '@/renderer/extensions/linearMode/useOutputHistory'
 import type { OutputSelection } from '@/renderer/extensions/linearMode/linearModeTypes'
+import VideoPreview from '@/renderer/extensions/linearMode/VideoPreview.vue'
+import { getMediaType } from '@/renderer/extensions/linearMode/mediaTypes'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
 import type { ResultItemImpl } from '@/stores/queueStore'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { executeWidgetsCallback } from '@/utils/litegraphUtil'
+
+// Lazy-loaded to avoid pulling THREE.js into the main bundle
+const Preview3d = defineAsyncComponent(
+  () => import('@/renderer/extensions/linearMode/Preview3d.vue')
+)
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
@@ -65,12 +73,17 @@ async function loadWorkflow(item: AssetItem | undefined) {
   const changeTracker = useWorkflowStore().activeWorkflow?.changeTracker
   if (!changeTracker) return app.loadGraphData(workflow)
   changeTracker.redoQueue = []
-  await changeTracker.updateState([workflow], changeTracker.undoQueue)
+  changeTracker.updateState([workflow], changeTracker.undoQueue)
 }
 
 async function rerun(e: Event) {
   if (!runButtonClick) return
   await loadWorkflow(selectedItem.value)
+  //FIXME don't use timeouts here
+  //Currently seeds fail to properly update even with timeouts?
+  await new Promise((r) => setTimeout(r, 500))
+  executeWidgetsCallback(collectAllNodes(app.rootGraph), 'afterQueued')
+
   runButtonClick(e)
 }
 </script>
@@ -93,7 +106,6 @@ async function rerun(e: Event) {
     </template>
     <Button
       v-if="selectedOutput"
-      v-tooltip.top="t('g.download')"
       size="icon"
       :aria-label="t('g.download')"
       @click="
@@ -107,26 +119,21 @@ async function rerun(e: Event) {
     <Button
       v-if="!executionStore.isIdle && !selectedItem"
       variant="destructive"
+      size="icon"
+      :aria-label="t('menu.interrupt')"
       @click="commandStore.execute('Comfy.Interrupt')"
     >
       <i class="icon-[lucide--x]" />
-      {{ t('linearMode.cancelThisRun') }}
     </Button>
     <Popover
       v-if="selectedItem"
       :entries="[
-        ...(allOutputs(selectedItem).length > 1
-          ? [
-              {
-                icon: 'icon-[lucide--download]',
-                label: t('linearMode.downloadAll', {
-                  count: allOutputs(selectedItem).length
-                }),
-                command: () => downloadAsset(selectedItem)
-              },
-              { separator: true }
-            ]
-          : []),
+        {
+          icon: 'icon-[lucide--download]',
+          label: t('linearMode.downloadAll'),
+          command: () => downloadAsset(selectedItem)
+        },
+        { separator: true },
         {
           icon: 'icon-[lucide--trash-2]',
           label: t('queue.jobMenu.deleteAsset'),
@@ -136,14 +143,32 @@ async function rerun(e: Event) {
     />
   </section>
   <ImagePreview
-    v-if="canShowPreview && latentPreview"
+    v-if="
+      (canShowPreview && latentPreview) ||
+      getMediaType(selectedOutput) === 'images'
+    "
     :mobile
-    :src="latentPreview"
+    :src="(canShowPreview && latentPreview) || selectedOutput!.url"
   />
-  <MediaOutputPreview
-    v-else-if="selectedOutput"
-    :output="selectedOutput"
-    :mobile
+  <VideoPreview
+    v-else-if="getMediaType(selectedOutput) === 'video'"
+    :src="selectedOutput!.url"
+    class="flex-1 object-contain md:p-3 md:contain-size"
+  />
+  <audio
+    v-else-if="getMediaType(selectedOutput) === 'audio'"
+    class="m-auto w-full"
+    controls
+    :src="selectedOutput!.url"
+  />
+  <article
+    v-else-if="getMediaType(selectedOutput) === 'text'"
+    class="m-auto my-12 w-full max-w-lg overflow-y-auto"
+    v-text="selectedOutput!.url"
+  />
+  <Preview3d
+    v-else-if="getMediaType(selectedOutput) === '3d'"
+    :model-url="selectedOutput!.url"
   />
   <LatentPreview v-else-if="queueStore.runningTasks.length > 0" />
   <LinearArrange v-else-if="isArrangeMode" />
@@ -159,7 +184,7 @@ async function rerun(e: Event) {
     />
     <OutputHistory
       v-if="!isBuilderMode"
-      class="z-10 min-w-0"
+      class="min-w-0"
       @update-selection="handleSelection"
     />
     <LinearFeedback

src/renderer/extensions/linearMode/MediaOutputPreview.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent, useAttrs } from 'vue'
-
-import ImagePreview from '@/renderer/extensions/linearMode/ImagePreview.vue'
-import VideoPreview from '@/renderer/extensions/linearMode/VideoPreview.vue'
-import { getMediaType } from '@/renderer/extensions/linearMode/mediaTypes'
-import type { ResultItemImpl } from '@/stores/queueStore'
-import { cn } from '@/utils/tailwindUtil'
-
-const Preview3d = defineAsyncComponent(
-  () => import('@/renderer/extensions/linearMode/Preview3d.vue')
-)
-
-defineOptions({ inheritAttrs: false })
-
-const { output } = defineProps<{
-  output: ResultItemImpl
-  mobile?: boolean
-}>()
-
-const attrs = useAttrs()
-</script>
-<template>
-  <ImagePreview
-    v-if="getMediaType(output) === 'images'"
-    :class="attrs.class as string"
-    :mobile
-    :src="output.url"
-  />
-  <VideoPreview
-    v-else-if="getMediaType(output) === 'video'"
-    :src="output.url"
-    :class="
-      cn('flex-1 object-contain md:p-3 md:contain-size', attrs.class as string)
-    "
-  />
-  <audio
-    v-else-if="getMediaType(output) === 'audio'"
-    :class="cn('m-auto w-full', attrs.class as string)"
-    controls
-    :src="output.url"
-  />
-  <article
-    v-else-if="getMediaType(output) === 'text'"
-    :class="
-      cn('m-auto my-12 w-full max-w-lg overflow-y-auto', attrs.class as string)
-    "
-    v-text="output.url"
-  />
-  <Preview3d
-    v-else-if="getMediaType(output) === '3d'"
-    :class="attrs.class as string"
-    :model-url="output.url"
-  />
-</template>

src/renderer/extensions/linearMode/MobileDisplay.vue

@@ -187,7 +187,7 @@ const menuEntries = computed<MenuItem[]>(() => [
         :style="{ translate }"
       >
         <div class="absolute h-full w-screen overflow-y-auto contain-size">
-          <LinearControls mobile @navigate-assets="activeIndex = 1" />
+          <LinearControls mobile @navigate-assets="activeIndex = 2" />
         </div>
         <div
           class="absolute top-0 left-[100vw] flex h-full w-screen flex-col bg-base-background"

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -42,7 +42,7 @@ const queueCount = computed(
 
 const itemClass = cn(
   'shrink-0 cursor-pointer rounded-lg border-2 border-transparent p-1 outline-none',
-  'relative data-[state=checked]:border-interface-panel-job-progress-border'
+  'data-[state=checked]:border-interface-panel-job-progress-border'
 )
 
 const hasActiveContent = computed(

src/renderer/extensions/linearMode/OutputHistoryItem.vue

@@ -6,8 +6,6 @@ import {
 import type { ResultItemImpl } from '@/stores/queueStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import VideoPlayOverlay from '@/platform/assets/components/VideoPlayOverlay.vue'
-
 const { output } = defineProps<{
   output: ResultItemImpl
 }>()
@@ -21,16 +19,6 @@ const { output } = defineProps<{
     height="40"
     :src="output.url"
   />
-  <template v-if="getMediaType(output) === 'video'">
-    <video
-      class="pointer-events-none block size-10 rounded-sm bg-secondary-background object-cover"
-      preload="metadata"
-      width="40"
-      height="40"
-      :src="output.url"
-    />
-    <VideoPlayOverlay size="sm" />
-  </template>
   <i
     v-else
     :class="cn(mediaTypes[getMediaType(output)]?.iconClass, 'block size-10')"

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -52,9 +52,7 @@
   >
     <AppOutput
       v-if="
-        lgraphNode?.constructor?.nodeData?.output_node &&
-        isSelectOutputsMode &&
-        nodeData.mode === LGraphEventMode.ALWAYS
+        lgraphNode?.constructor?.nodeData?.output_node && isSelectOutputsMode
       "
       :id="nodeData.id"
     />

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -53,11 +53,7 @@
           />
         </div>
         <!-- Widget Component -->
-        <AppInput
-          :id="widget.id"
-          :name="widget.name"
-          :enable="canSelectInputs && !widget.simplified.options?.disabled"
-        >
+        <AppInput :id="widget.id" :name="widget.name" :is-select-inputs-mode>
           <component
             :is="widget.vueComponent"
             v-model="widget.value"
@@ -93,7 +89,6 @@ import { useAppMode } from '@/composables/useAppMode'
 import { showNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
-import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -159,9 +154,6 @@ onErrorCaptured((error) => {
   return false
 })
 
-const canSelectInputs = computed(
-  () => isSelectInputsMode.value && nodeData?.mode === LGraphEventMode.ALWAYS
-)
 const nodeType = computed(() => nodeData?.type || '')
 const settingStore = useSettingStore()
 const showAdvanced = computed(

src/scripts/app.ts

@@ -676,6 +676,20 @@ export class ComfyApp {
           e.stopImmediatePropagation()
           return
         }
+
+        // Ctrl+C Copy
+        if (e.key === 'c' && (e.metaKey || e.ctrlKey)) {
+          return
+        }
+
+        // Ctrl+V Paste
+        if (
+          (e.key === 'v' || e.key == 'V') &&
+          (e.metaKey || e.ctrlKey) &&
+          !e.shiftKey
+        ) {
+          return
+        }
       }
 
       // Fall through to Litegraph defaults

src/scripts/changeTracker.ts

@@ -17,10 +17,7 @@ import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { api } from './api'
 import type { ComfyApp } from './app'
 import { app } from './app'
-
-function clone<T>(obj: T): T {
-  return JSON.parse(JSON.stringify(obj))
-}
+import { clone } from './utils'
 
 const logger = log.getLogger('ChangeTracker')
 // Change to debug for more verbose logging

src/scripts/ui/draggableList.ts

@@ -314,22 +314,18 @@ export class DraggableList extends EventTarget {
   unsetDraggableItem() {
     this.draggableItem.style = null
     this.draggableItem.classList.remove('is-draggable')
+    this.draggableItem.classList.add('is-idle')
     this.draggableItem = null
   }
 
   unsetItemState() {
-    this.getIdleItems().forEach((item: HTMLElement) => {
+    this.getIdleItems().forEach((item) => {
+      // @ts-expect-error fixme ts strict error
       delete item.dataset.isAbove
+      // @ts-expect-error fixme ts strict error
       delete item.dataset.isToggled
+      // @ts-expect-error fixme ts strict error
       item.style.transform = ''
-
-      // Defer re-adding is-idle (which enables CSS transitions) until after
-      // the browser paints items in their final positions. Without this,
-      // the transition animates the stale drag transform.
-      item.classList.remove('is-idle')
-      requestAnimationFrame(() => {
-        item.classList.add('is-idle')
-      })
     })
   }
 

src/views/LinearView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { breakpointsTailwind, unrefElement, useBreakpoints } from '@vueuse/core'
-import type { MaybeElement } from '@vueuse/core'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { storeToRefs } from 'pinia'
@@ -20,7 +19,6 @@ import LinearProgressBar from '@/renderer/extensions/linearMode/LinearProgressBa
 import MobileDisplay from '@/renderer/extensions/linearMode/MobileDisplay.vue'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useAppMode } from '@/composables/useAppMode'
-import { useStablePrimeVueSplitterSizer } from '@/composables/useStablePrimeVueSplitterSizer'
 import {
   BUILDER_MIN_SIZE,
   CENTER_PANEL_SIZE,
@@ -41,6 +39,9 @@ const activeTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
 const sidebarOnLeft = computed(
   () => settingStore.get('Comfy.Sidebar.Location') === 'left'
 )
+// Builder panel is always on the opposite side of the sidebar.
+// In arrange mode we render 3 panels to match the overlay structure,
+// so the same stateKey percentage maps to the same pixel width.
 const showLeftBuilder = computed(
   () => !sidebarOnLeft.value && isArrangeMode.value
 )
@@ -66,25 +67,6 @@ function sidePanelMinSize(isBuilder: boolean, isHidden: boolean) {
   return SIDEBAR_MIN_SIZE
 }
 
-// Remount splitter when panel structure changes so initializePanels()
-// properly sets flexBasis for the current set of panels.
-const splitterKey = computed(() => {
-  const left = hasLeftPanel.value ? 'L' : ''
-  const right = hasRightPanel.value ? 'R' : ''
-  return isArrangeMode.value ? 'arrange' : `app-${left}${right}`
-})
-
-const leftPanelRef = useTemplateRef<MaybeElement>('leftPanel')
-const rightPanelRef = useTemplateRef<MaybeElement>('rightPanel')
-
-const { onResizeEnd } = useStablePrimeVueSplitterSizer(
-  [
-    { ref: leftPanelRef, storageKey: 'Comfy.LinearView.LeftPanelWidth' },
-    { ref: rightPanelRef, storageKey: 'Comfy.LinearView.RightPanelWidth' }
-  ],
-  [activeTab, splitterKey]
-)
-
 const TYPEFORM_WIDGET_ID = 'gmVqFi8l'
 
 const bottomLeftRef = useTemplateRef('bottomLeftRef')
@@ -104,15 +86,16 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       </div>
     </div>
     <Splitter
-      :key="splitterKey"
+      :key="isArrangeMode ? 'arrange' : 'normal'"
       class="bg-comfy-menu-secondary-bg h-[calc(100%-var(--workflow-tabs-height))] w-full border-none"
-      @resizestart="$event.originalEvent.preventDefault()"
-      @resizeend="onResizeEnd"
+      :state-key="isArrangeMode ? 'builder-splitter' : undefined"
+      :state-storage="isArrangeMode ? 'local' : undefined"
+      @resizestart="({ originalEvent }) => originalEvent.preventDefault()"
     >
       <SplitterPanel
         v-if="hasLeftPanel"
-        ref="leftPanel"
-        :size="SIDE_PANEL_SIZE"
+        id="linearLeftPanel"
+        :size="isArrangeMode ? SIDE_PANEL_SIZE : 1"
         :min-size="
           sidePanelMinSize(showLeftBuilder, showRightBuilder && !activeTab)
         "
@@ -121,15 +104,17 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         "
         :class="
           cn(
-            'arrange-panel overflow-hidden outline-none',
-            showLeftBuilder ? 'min-w-78 bg-comfy-menu-bg' : 'min-w-78'
+            'arrange-panel outline-none',
+            showLeftBuilder ? 'min-w-78 bg-comfy-menu-bg' : 'min-w-min'
           )
         "
       >
-        <AppBuilder v-if="showLeftBuilder" />
+        <div v-if="showLeftBuilder" class="h-full overflow-y-auto">
+          <AppBuilder />
+        </div>
         <div
           v-else-if="sidebarOnLeft && activeTab"
-          class="size-full overflow-x-hidden border-r border-border-subtle"
+          class="flex h-full border-r border-border-subtle"
         >
           <ExtensionSlot :extension="activeTab" />
         </div>
@@ -141,8 +126,8 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       </SplitterPanel>
       <SplitterPanel
         id="linearCenterPanel"
-        :size="CENTER_PANEL_SIZE"
-        class="relative flex min-w-[20vw] flex-col gap-4 text-muted-foreground outline-none"
+        :size="isArrangeMode ? CENTER_PANEL_SIZE : 98"
+        class="relative flex min-w-0 flex-col gap-4 text-muted-foreground outline-none"
       >
         <LinearProgressBar
           class="absolute top-0 left-0 z-21 w-[calc(100%+16px)]"
@@ -159,20 +144,22 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       </SplitterPanel>
       <SplitterPanel
         v-if="hasRightPanel"
-        ref="rightPanel"
-        :size="SIDE_PANEL_SIZE"
+        id="linearRightPanel"
+        :size="isArrangeMode ? SIDE_PANEL_SIZE : 1"
         :min-size="
           sidePanelMinSize(showRightBuilder, showLeftBuilder && !activeTab)
         "
         :style="showLeftBuilder && !activeTab ? { display: 'none' } : undefined"
         :class="
           cn(
-            'arrange-panel overflow-hidden outline-none',
-            showRightBuilder ? 'min-w-78 bg-comfy-menu-bg' : 'min-w-78'
+            'arrange-panel outline-none',
+            showRightBuilder ? 'min-w-78 bg-comfy-menu-bg' : 'min-w-min'
           )
         "
       >
-        <AppBuilder v-if="showRightBuilder" />
+        <div v-if="showRightBuilder" class="h-full overflow-y-auto">
+          <AppBuilder />
+        </div>
         <LinearControls
           v-else-if="sidebarOnLeft && !isArrangeMode"
           ref="linearWorkflowRef"
@@ -180,7 +167,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         />
         <div
           v-else-if="activeTab"
-          class="h-full overflow-x-hidden border-l border-border-subtle"
+          class="flex h-full border-l border-border-subtle"
         >
           <ExtensionSlot :extension="activeTab" />
         </div>