Remove hamburger menu from tabs (#8067)

We added the menu button to both the tabs & where the subgraph menu
button was previously in order to get feedback on where this button
should be. We've received feedback that the one on the tabs is not a
common UX element, and that having both seems like a bug, and that the
one on the graph is prefered. Due to this, we're removing the one on the
tabs.

- Remove tab menu button

Before:
<img width="733" height="224" alt="image"
src="https://github.com/user-attachments/assets/3f916d96-4bfe-482d-a8eb-8b18a7327334"
/>

After:
<img width="731" height="248" alt="image"
src="https://github.com/user-attachments/assets/5eeb31e5-e49f-409a-8eac-04773182a145"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8067-Remove-hamburger-menu-from-tabs-2e96d73d3650815aa80af4d5aa8767cd)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/tests/widget.spec.ts

@@ -194,7 +194,10 @@ test.describe('Image widget', () => {
     const comboEntry = comfyPage.page.getByRole('menuitem', {
       name: 'image32x32.webp'
     })
-    await comboEntry.click({ noWaitAfter: true })
+    await comboEntry.click()
+
+    // Stabilization for the image swap
+    await comfyPage.nextFrame()
 
     // Expect the image preview to change automatically
     await expect(comfyPage.canvas).toHaveScreenshot(

packages/design-system/src/css/style.css

@@ -247,6 +247,7 @@
   --inverted-background-hover: var(--color-charcoal-600);
   --warning-background: var(--color-gold-400);
   --warning-background-hover: var(--color-gold-500);
+  --success-background: var(--color-jade-600);
   --border-default: var(--color-smoke-600);
   --border-subtle: var(--color-smoke-400);
   --muted-background: var(--color-smoke-700);
@@ -372,6 +373,7 @@
   --inverted-background-hover: var(--color-smoke-200);
   --warning-background: var(--color-gold-600);
   --warning-background-hover: var(--color-gold-500);
+  --success-background: var(--color-jade-600);
   --border-default: var(--color-charcoal-200);
   --border-subtle: var(--color-charcoal-300);
   --muted-background: var(--color-charcoal-100);
@@ -516,6 +518,7 @@
   --color-inverted-background-hover: var(--inverted-background-hover);
   --color-warning-background: var(--warning-background);
   --color-warning-background-hover: var(--warning-background-hover);
+  --color-success-background: var(--success-background);
   --color-border-default: var(--border-default);
   --color-border-subtle: var(--border-subtle);
   --color-muted-background: var(--muted-background);

src/components/sidebar/ModeToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { t } from '@/i18n'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+const canvasStore = useCanvasStore()
+</script>
+<template>
+  <div class="p-1 bg-secondary-background rounded-lg w-10">
+    <Button
+      size="icon"
+      :title="t('linearMode.linearMode')"
+      :variant="canvasStore.linearMode ? 'inverted' : 'secondary'"
+      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+    >
+      <i class="icon-[lucide--panels-top-left]" />
+    </Button>
+    <Button
+      size="icon"
+      :title="t('linearMode.graphMode')"
+      :variant="canvasStore.linearMode ? 'secondary' : 'inverted'"
+      @click="useCommandStore().execute('Comfy.ToggleLinear')"
+    >
+      <i class="icon-[comfy--workflow]" />
+    </Button>
+  </div>
+</template>

src/components/sidebar/SideToolbar.vue

@@ -44,6 +44,9 @@
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
+        <ModeToggle
+          v-if="menuItemStore.hasSeenLinear || flags.linearToggleEnabled"
+        />
       </div>
     </div>
     <HelpCenterPopups :is-small="isSmall" />
@@ -57,14 +60,17 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.vue'
 import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
+import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useKeybindingStore } from '@/stores/keybindingStore'
+import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useUserStore } from '@/stores/userStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
@@ -80,9 +86,11 @@ const settingStore = useSettingStore()
 const userStore = useUserStore()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
+const menuItemStore = useMenuItemStore()
 const sideToolbarRef = ref<HTMLElement>()
 const topToolbarRef = ref<HTMLElement>()
 const bottomToolbarRef = ref<HTMLElement>()
+const { flags } = useFeatureFlags()
 
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -1,6 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="$t('sideToolbar.workflows')"
+    v-bind="$attrs"
     class="workflows-sidebar-tab"
   >
     <template #tool-buttons>

src/components/topbar/TopMenuHelpButton.vue

@@ -4,7 +4,7 @@
     variant="textonly"
     @click="toggleHelpCenter"
   >
-    {{ $t('menu.helpAndFeedback') }}
+    <div class="not-md:hidden">{{ $t('menu.helpAndFeedback') }}</div>
     <i class="icon-[lucide--circle-help] ml-0.5" />
     <span
       v-if="shouldShowRedDot"

src/components/topbar/WorkflowTab.vue

@@ -7,15 +7,10 @@
     @mouseleave="handleMouseLeave"
     @click="handleClick"
   >
-    <Button
+    <i
-      v-if="isActiveTab"
+      v-if="workflowOption.workflow.activeState?.extra?.linearMode"
-      class="context-menu-button -mx-1 w-auto px-1 py-0"
+      class="icon-[lucide--panels-top-left] bg-primary-background"
-      variant="muted-textonly"
+    />
-      size="icon-sm"
-      @click.stop="handleMenuClick"
-    >
-      <i class="pi pi-bars" />
-    </Button>
     <span class="workflow-label inline-block max-w-[150px] truncate text-sm">
       {{ workflowOption.workflow.filename }}
     </span>
@@ -43,26 +38,9 @@
     :thumbnail-url="thumbnailUrl"
     :is-active-tab="isActiveTab"
   />
-
-  <Menu
-    v-if="isActiveTab"
-    ref="menu"
-    :model="menuItems"
-    :popup="true"
-    :pt="{
-      root: {
-        style: 'background-color: var(--comfy-menu-bg)'
-      },
-      itemLink: {
-        class: 'py-2'
-      }
-    }"
-  />
 </template>
 
 <script setup lang="ts">
-import type { MenuState } from 'primevue/menu'
-import Menu from 'primevue/menu'
 import { computed, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -71,14 +49,11 @@ import {
   usePragmaticDraggable,
   usePragmaticDroppable
 } from '@/composables/usePragmaticDragAndDrop'
-import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
-import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 import WorkflowTabPopover from './WorkflowTabPopover.vue'
@@ -143,12 +118,6 @@ const thumbnailUrl = computed(() => {
   return workflowThumbnail.getThumbnail(props.workflowOption.workflow.key)
 })
 
-const menu = ref<InstanceType<typeof Menu> & MenuState>()
-
-const { menuItems } = useWorkflowActionsMenu(() =>
-  useCommandStore().execute('Comfy.RenameWorkflow')
-)
-
 // Event handlers that delegate to the popover component
 const handleMouseEnter = (event: Event) => {
   popoverRef.value?.showPopover(event)
@@ -162,14 +131,6 @@ const handleClick = (event: Event) => {
   popoverRef.value?.togglePopover(event)
 }
 
-const handleMenuClick = (event: MouseEvent) => {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'workflow_tab_menu_selected'
-  })
-  // Show breadcrumb menu instead of emitting context click
-  menu.value?.toggle(event)
-}
-
 const closeWorkflows = async (options: WorkflowOption[]) => {
   for (const opt of options) {
     if (

src/components/ui/Popover.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  PopoverArrow,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger
+} from 'reka-ui'
+
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@/utils/tailwindUtil'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps<{
+  entries?: { label: string; action?: () => void; icon?: string }[][]
+  icon?: string
+  to?: string | HTMLElement
+}>()
+</script>
+
+<template>
+  <PopoverRoot v-slot="{ close }">
+    <PopoverTrigger as-child>
+      <slot name="button">
+        <Button size="icon">
+          <i :class="icon ?? 'icon-[lucide--ellipsis]'" />
+        </Button>
+      </slot>
+    </PopoverTrigger>
+    <PopoverPortal :to>
+      <PopoverContent
+        side="bottom"
+        :side-offset="5"
+        :collision-padding="10"
+        v-bind="$attrs"
+        class="rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+      >
+        <slot>
+          <div class="flex flex-col p-1">
+            <section
+              v-for="(entryGroup, index) in entries ?? []"
+              :key="index"
+              class="flex flex-col border-b-2 last:border-none border-border-subtle"
+            >
+              <div
+                v-for="{ label, action, icon } in entryGroup"
+                :key="label"
+                :class="
+                  cn(
+                    'flex flex-row gap-4 p-2 rounded-sm my-1',
+                    action &&
+                      'cursor-pointer hover:bg-secondary-background-hover'
+                  )
+                "
+                @click="
+                  () => {
+                    if (!action) return
+                    action()
+                    close()
+                  }
+                "
+              >
+                <i v-if="icon" :class="icon" />
+                {{ label }}
+              </div>
+            </section>
+          </div>
+        </slot>
+        <PopoverArrow class="fill-base-background stroke-border-subtle" />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>

src/components/ui/TypeformPopoverButton.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { whenever } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+defineProps<{
+  dataTfWidget: string
+}>()
+
+const feedbackRef = useTemplateRef('feedbackRef')
+
+whenever(feedbackRef, () => {
+  const scriptEl = document.createElement('script')
+  scriptEl.src = '//embed.typeform.com/next/embed.js'
+  feedbackRef.value?.appendChild(scriptEl)
+})
+</script>
+<template>
+  <Popover>
+    <template #button>
+      <Button variant="inverted" class="rounded-full size-12">
+        <i class="icon-[lucide--circle-question-mark] size-6" />
+      </Button>
+    </template>
+    <div ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
+  </Popover>
+</template>

src/components/ui/ZoomPane.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+
+const zoomPane = useTemplateRef('zoomPane')
+
+const zoom = ref(1.0)
+const panX = ref(0.0)
+const panY = ref(0.0)
+
+function handleWheel(e: WheelEvent) {
+  const zoomPaneEl = zoomPane.value
+  if (!zoomPaneEl) return
+
+  zoom.value -= e.deltaY
+  const { x, y, width, height } = zoomPaneEl.getBoundingClientRect()
+  const offsetX = e.clientX - x - width / 2
+  const offsetY = e.clientY - y - height / 2
+  const scaler = 1.1 ** (e.deltaY / -30)
+
+  panY.value = panY.value * scaler - offsetY * (scaler - 1)
+  panX.value = panX.value * scaler - offsetX * (scaler - 1)
+}
+
+let dragging = false
+function handleDown(e: PointerEvent) {
+  if (e.button !== 0) return
+
+  const zoomPaneEl = zoomPane.value
+  if (!zoomPaneEl) return
+  zoomPaneEl.parentElement?.focus()
+
+  zoomPaneEl.setPointerCapture(e.pointerId)
+  dragging = true
+}
+function handleMove(e: PointerEvent) {
+  if (!dragging) return
+  panX.value += e.movementX
+  panY.value += e.movementY
+}
+
+const transform = computed(() => {
+  const scale = 1.1 ** (zoom.value / 30)
+  const matrix = [scale, 0, 0, scale, panX.value, panY.value]
+  return `matrix(${matrix.join(',')})`
+})
+</script>
+<template>
+  <div
+    ref="zoomPane"
+    class="contain-size place-content-center"
+    @wheel="handleWheel"
+    @pointerdown.prevent="handleDown"
+    @pointermove="handleMove"
+    @pointerup="dragging = false"
+    @pointercancel="dragging = false"
+  >
+    <slot :style="{ transform }" />
+  </div>
+</template>

src/composables/graph/useGraphNodeManager.ts

@@ -157,7 +157,7 @@ const normalizeWidgetValue = (value: unknown): WidgetValue => {
   return undefined
 }
 
-export function safeWidgetMapper(
+function safeWidgetMapper(
   node: LGraphNode,
   slotMetadata: Map<string, WidgetSlotMetadata>
 ): (widget: IBaseWidget) => SafeWidgetData {
@@ -207,15 +207,77 @@ export function safeWidgetMapper(
   }
 }
 
-export function isValidWidgetValue(value: unknown): value is WidgetValue {
+// Extract safe data from LiteGraph node for Vue consumption
-  return (
+export function extractVueNodeData(node: LGraphNode): VueNodeData {
-    value === null ||
+  // Determine subgraph ID - null for root graph, string for subgraphs
-    value === undefined ||
+  const subgraphId =
-    typeof value === 'string' ||
+    node.graph && 'id' in node.graph && node.graph !== node.graph.rootGraph
-    typeof value === 'number' ||
+      ? String(node.graph.id)
-    typeof value === 'boolean' ||
+      : null
-    typeof value === 'object'
+  // Extract safe widget data
-  )
+  const slotMetadata = new Map<string, WidgetSlotMetadata>()
+
+  const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
+  Object.defineProperty(node, 'widgets', {
+    get() {
+      return reactiveWidgets
+    },
+    set(v) {
+      reactiveWidgets.splice(0, reactiveWidgets.length, ...v)
+    }
+  })
+  const reactiveInputs = shallowReactive<INodeInputSlot[]>(node.inputs ?? [])
+  Object.defineProperty(node, 'inputs', {
+    get() {
+      return reactiveInputs
+    },
+    set(v) {
+      reactiveInputs.splice(0, reactiveInputs.length, ...v)
+    }
+  })
+
+  const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
+    node.inputs?.forEach((input, index) => {
+      if (!input?.widget?.name) return
+      slotMetadata.set(input.widget.name, {
+        index,
+        linked: input.link != null
+      })
+    })
+    return node.widgets?.map(safeWidgetMapper(node, slotMetadata)) ?? []
+  })
+
+  const nodeType =
+    node.type ||
+    node.constructor?.comfyClass ||
+    node.constructor?.title ||
+    node.constructor?.name ||
+    'Unknown'
+
+  const apiNode = node.constructor?.nodeData?.api_node ?? false
+  const badges = node.badges
+
+  return {
+    id: String(node.id),
+    title: typeof node.title === 'string' ? node.title : '',
+    type: nodeType,
+    mode: node.mode || 0,
+    titleMode: node.title_mode,
+    selected: node.selected || false,
+    executing: false, // Will be updated separately based on execution state
+    subgraphId,
+    apiNode,
+    badges,
+    hasErrors: !!node.has_errors,
+    widgets: safeWidgets,
+    inputs: reactiveInputs,
+    outputs: node.outputs ? [...node.outputs] : undefined,
+    flags: node.flags ? { ...node.flags } : undefined,
+    color: node.color || undefined,
+    bgcolor: node.bgcolor || undefined,
+    resizable: node.resizable,
+    shape: node.shape
+  }
 }
 
 export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
@@ -251,79 +313,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     }
   }
 
-  // Extract safe data from LiteGraph node for Vue consumption
-  function extractVueNodeData(node: LGraphNode): VueNodeData {
-    // Determine subgraph ID - null for root graph, string for subgraphs
-    const subgraphId =
-      node.graph && 'id' in node.graph && node.graph !== node.graph.rootGraph
-        ? String(node.graph.id)
-        : null
-    // Extract safe widget data
-    const slotMetadata = new Map<string, WidgetSlotMetadata>()
-
-    const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
-    Object.defineProperty(node, 'widgets', {
-      get() {
-        return reactiveWidgets
-      },
-      set(v) {
-        reactiveWidgets.splice(0, reactiveWidgets.length, ...v)
-      }
-    })
-    const reactiveInputs = shallowReactive<INodeInputSlot[]>(node.inputs ?? [])
-    Object.defineProperty(node, 'inputs', {
-      get() {
-        return reactiveInputs
-      },
-      set(v) {
-        reactiveInputs.splice(0, reactiveInputs.length, ...v)
-      }
-    })
-
-    const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
-      node.inputs?.forEach((input, index) => {
-        if (!input?.widget?.name) return
-        slotMetadata.set(input.widget.name, {
-          index,
-          linked: input.link != null
-        })
-      })
-      return node.widgets?.map(safeWidgetMapper(node, slotMetadata)) ?? []
-    })
-
-    const nodeType =
-      node.type ||
-      node.constructor?.comfyClass ||
-      node.constructor?.title ||
-      node.constructor?.name ||
-      'Unknown'
-
-    const apiNode = node.constructor?.nodeData?.api_node ?? false
-    const badges = node.badges
-
-    return {
-      id: String(node.id),
-      title: typeof node.title === 'string' ? node.title : '',
-      type: nodeType,
-      mode: node.mode || 0,
-      titleMode: node.title_mode,
-      selected: node.selected || false,
-      executing: false, // Will be updated separately based on execution state
-      subgraphId,
-      apiNode,
-      badges,
-      hasErrors: !!node.has_errors,
-      widgets: safeWidgets,
-      inputs: reactiveInputs,
-      outputs: node.outputs ? [...node.outputs] : undefined,
-      flags: node.flags ? { ...node.flags } : undefined,
-      color: node.color || undefined,
-      bgcolor: node.bgcolor || undefined,
-      resizable: node.resizable,
-      shape: node.shape
-    }
-  }
-
   // Get access to original LiteGraph node (non-reactive)
   const getNode = (id: string): LGraphNode | undefined => {
     return nodeRefs.get(id)

src/composables/node/useNodePricing.ts

@@ -2,6 +2,17 @@ import { formatCreditsFromUsd } from '@/base/credits/comfyCredits'
 import type { INodeInputSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
 
+/**
+ * Meshy credit pricing constant.
+ * 1 Meshy credit = $0.04 USD
+ * Change this value to update all Meshy node prices.
+ */
+const MESHY_CREDIT_PRICE_USD = 0.04
+
+/** Convert Meshy credits to USD */
+const meshyCreditsToUsd = (credits: number): number =>
+  credits * MESHY_CREDIT_PRICE_USD
+
 const DEFAULT_NUMBER_OPTIONS: Intl.NumberFormatOptions = {
   minimumFractionDigits: 0,
   maximumFractionDigits: 0
@@ -209,13 +220,24 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
   const resolutionWidget = node.widgets?.find(
     (w) => w.name === 'resolution'
   ) as IComboWidget
+  const generateAudioWidget = node.widgets?.find(
+    (w) => w.name === 'generate_audio'
+  ) as IComboWidget | undefined
 
   if (!modelWidget || !durationWidget || !resolutionWidget) return 'Token-based'
 
   const model = String(modelWidget.value).toLowerCase()
   const resolution = String(resolutionWidget.value).toLowerCase()
   const seconds = parseFloat(String(durationWidget.value))
+  const generateAudio =
+    generateAudioWidget &&
+    String(generateAudioWidget.value).toLowerCase() === 'true'
   const priceByModel: Record<string, Record<string, [number, number]>> = {
+    'seedance-1-5-pro': {
+      '480p': [0.12, 0.12],
+      '720p': [0.26, 0.26],
+      '1080p': [0.58, 0.59]
+    },
     'seedance-1-0-pro': {
       '480p': [0.23, 0.24],
       '720p': [0.51, 0.56],
@@ -233,13 +255,15 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
     }
   }
 
-  const modelKey = model.includes('seedance-1-0-pro-fast')
+  const modelKey = model.includes('seedance-1-5-pro')
-    ? 'seedance-1-0-pro-fast'
+    ? 'seedance-1-5-pro'
-    : model.includes('seedance-1-0-pro')
+    : model.includes('seedance-1-0-pro-fast')
-      ? 'seedance-1-0-pro'
+      ? 'seedance-1-0-pro-fast'
-      : model.includes('seedance-1-0-lite')
+      : model.includes('seedance-1-0-pro')
-        ? 'seedance-1-0-lite'
+        ? 'seedance-1-0-pro'
-        : ''
+        : model.includes('seedance-1-0-lite')
+          ? 'seedance-1-0-lite'
+          : ''
 
   const resKey = resolution.includes('1080')
     ? '1080p'
@@ -255,8 +279,10 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
 
   const [min10s, max10s] = baseRange
   const scale = seconds / 10
-  const minCost = min10s * scale
+  const audioMultiplier =
-  const maxCost = max10s * scale
+    modelKey === 'seedance-1-5-pro' && generateAudio ? 2 : 1
+  const minCost = min10s * scale * audioMultiplier
+  const maxCost = max10s * scale * audioMultiplier
 
   if (minCost === maxCost) return formatCreditsLabel(minCost)
   return formatCreditsRangeLabel(minCost, maxCost)
@@ -525,6 +551,54 @@ const calculateTripo3DGenerationPrice = (
   return formatCreditsLabel(dollars)
 }
 
+/**
+ * Meshy Image to 3D pricing calculator.
+ * Pricing based on should_texture widget:
+ *   - Without texture: 20 credits
+ *   - With texture: 30 credits
+ */
+const calculateMeshyImageToModelPrice = (node: LGraphNode): string => {
+  const shouldTextureWidget = node.widgets?.find(
+    (w) => w.name === 'should_texture'
+  ) as IComboWidget
+
+  if (!shouldTextureWidget) {
+    return formatCreditsRangeLabel(
+      meshyCreditsToUsd(20),
+      meshyCreditsToUsd(30),
+      { note: '(varies with texture)' }
+    )
+  }
+
+  const shouldTexture = String(shouldTextureWidget.value).toLowerCase()
+  const credits = shouldTexture === 'true' ? 30 : 20
+  return formatCreditsLabel(meshyCreditsToUsd(credits))
+}
+
+/**
+ * Meshy Multi-Image to 3D pricing calculator.
+ * Pricing based on should_texture widget:
+ *   - Without texture: 5 credits
+ *   - With texture: 15 credits
+ */
+const calculateMeshyMultiImageToModelPrice = (node: LGraphNode): string => {
+  const shouldTextureWidget = node.widgets?.find(
+    (w) => w.name === 'should_texture'
+  ) as IComboWidget
+
+  if (!shouldTextureWidget) {
+    return formatCreditsRangeLabel(
+      meshyCreditsToUsd(5),
+      meshyCreditsToUsd(15),
+      { note: '(varies with texture)' }
+    )
+  }
+
+  const shouldTexture = String(shouldTextureWidget.value).toLowerCase()
+  const credits = shouldTexture === 'true' ? 15 : 5
+  return formatCreditsLabel(meshyCreditsToUsd(credits))
+}
+
 /**
  * Static pricing data for API nodes, now supporting both strings and functions
  */
@@ -1812,6 +1886,27 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     TripoRefineNode: {
       displayPrice: formatCreditsLabel(0.3)
     },
+    MeshyTextToModelNode: {
+      displayPrice: formatCreditsLabel(meshyCreditsToUsd(20))
+    },
+    MeshyRefineNode: {
+      displayPrice: formatCreditsLabel(meshyCreditsToUsd(10))
+    },
+    MeshyImageToModelNode: {
+      displayPrice: calculateMeshyImageToModelPrice
+    },
+    MeshyMultiImageToModelNode: {
+      displayPrice: calculateMeshyMultiImageToModelPrice
+    },
+    MeshyRigModelNode: {
+      displayPrice: formatCreditsLabel(meshyCreditsToUsd(5))
+    },
+    MeshyAnimateModelNode: {
+      displayPrice: formatCreditsLabel(meshyCreditsToUsd(3))
+    },
+    MeshyTextureNode: {
+      displayPrice: formatCreditsLabel(meshyCreditsToUsd(10))
+    },
     // Google/Gemini nodes
     GeminiNode: {
       displayPrice: (node: LGraphNode): string => {
@@ -2527,6 +2622,9 @@ export const useNodePricing = () => {
         'animate_in_place'
       ],
       TripoTextureNode: ['texture_quality'],
+      // Meshy nodes
+      MeshyImageToModelNode: ['should_texture'],
+      MeshyMultiImageToModelNode: ['should_texture'],
       // Google/Gemini nodes
       GeminiNode: ['model'],
       GeminiImage2Node: ['resolution'],
@@ -2540,9 +2638,24 @@ export const useNodePricing = () => {
         'sequential_image_generation',
         'max_images'
       ],
-      ByteDanceTextToVideoNode: ['model', 'duration', 'resolution'],
+      ByteDanceTextToVideoNode: [
-      ByteDanceImageToVideoNode: ['model', 'duration', 'resolution'],
+        'model',
-      ByteDanceFirstLastFrameNode: ['model', 'duration', 'resolution'],
+        'duration',
+        'resolution',
+        'generate_audio'
+      ],
+      ByteDanceImageToVideoNode: [
+        'model',
+        'duration',
+        'resolution',
+        'generate_audio'
+      ],
+      ByteDanceFirstLastFrameNode: [
+        'model',
+        'duration',
+        'resolution',
+        'generate_audio'
+      ],
       ByteDanceImageReferenceNode: ['model', 'duration', 'resolution'],
       WanTextToVideoApi: ['duration', 'size'],
       WanImageToVideoApi: ['duration', 'resolution'],

src/composables/useCoreCommands.ts

@@ -1234,8 +1234,13 @@ export function useCoreCommands(): ComfyCommand[] {
     {
       id: 'Comfy.ToggleLinear',
       icon: 'pi pi-database',
-      label: 'toggle linear mode',
+      label: 'Toggle Simple Mode',
-      function: () => (canvasStore.linearMode = !canvasStore.linearMode)
+      function: () => {
+        const newMode = !canvasStore.linearMode
+        app.rootGraph.extra.linearMode = newMode
+        workflowStore.activeWorkflow?.changeTracker?.checkState()
+        canvasStore.linearMode = newMode
+      }
     }
   ]
 

src/composables/useFeatureFlags.ts

@@ -16,6 +16,7 @@ export enum ServerFeatureFlag {
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
   HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled',
+  LINEAR_TOGGLE_ENABLED = 'linear_toggle_enabled',
   ASYNC_MODEL_UPLOAD_ENABLED = 'async_model_upload_enabled'
 }
 
@@ -77,6 +78,12 @@ export function useFeatureFlags() {
         )
       )
     },
+    get linearToggleEnabled() {
+      return (
+        remoteConfig.value.linear_toggle_enabled ??
+        api.getServerFeature(ServerFeatureFlag.LINEAR_TOGGLE_ENABLED, false)
+      )
+    },
     get asyncModelUploadEnabled() {
       return (
         remoteConfig.value.async_model_upload_enabled ??

src/lib/litegraph/src/LGraph.ts

@@ -2540,6 +2540,7 @@ export class Subgraph
 
     this.inputNode.configure(data.inputNode)
     this.outputNode.configure(data.outputNode)
+    for (const node of this.nodes) node.updateComputedDisabled()
   }
 
   override configure(

src/lib/litegraph/src/LGraphCanvas.ts

@@ -8,6 +8,7 @@ import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMuta
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
+import { forEachNode } from '@/utils/graphTraversalUtil'
 
 import { CanvasPointer } from './CanvasPointer'
 import type { ContextMenu } from './ContextMenu'
@@ -4041,6 +4042,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     layoutStore.batchUpdateNodeBounds(newPositions)
 
     this.selectItems(created)
+    forEachNode(graph, (n) => n.onGraphConfigured?.())
+    forEachNode(graph, (n) => n.onAfterGraphConfigured?.())
 
     graph.afterChange()
     this.emitAfterChange()

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

@@ -54,6 +54,10 @@ interface IWidgetKnobOptions extends IWidgetOptions<number[]> {
   gradient_stops?: string
 }
 
+export interface IWidgetAssetOptions extends IWidgetOptions {
+  openModal: (widget: IBaseWidget) => void
+}
+
 /**
  * A widget for a node.
  * All types are based on IBaseWidget - additions can be made there or directly on individual types.
@@ -249,7 +253,7 @@ export interface ITextareaWidget extends IBaseWidget<string, 'textarea'> {
 export interface IAssetWidget extends IBaseWidget<
   string,
   'asset',
-  IWidgetOptions<string[]>
+  IWidgetAssetOptions
 > {
   type: 'asset'
   value: string

src/lib/litegraph/src/widgets/AssetWidget.ts

@@ -53,6 +53,6 @@ export class AssetWidget
 
   override onClick() {
     //Open Modal
-    this.callback?.(this.value)
+    this.options.openModal(this)
   }
 }

src/lib/litegraph/src/widgets/BaseWidget.ts

@@ -141,6 +141,7 @@ export abstract class BaseWidget<
       // @ts-expect-error Prevent naming conflicts with custom nodes.
       labelBaseline,
       promoted,
+      linkedWidgets,
       ...safeValues
     } = widget
 

src/locales/en/commands.json

@@ -273,7 +273,7 @@
     "label": "Help Center"
   },
   "Comfy_ToggleLinear": {
-    "label": "toggle linear mode"
+    "label": "Toggle Simple Mode"
   },
   "Comfy_ToggleQPOV2": {
     "label": "Toggle Queue Panel V2"

src/locales/en/main.json

@@ -190,6 +190,7 @@
     "failed": "Failed",
     "cancelled": "Cancelled",
     "job": "Job",
+    "asset": "{count} assets | {count} asset | {count} assets",
     "untitled": "Untitled",
     "emDash": "—",
     "enabling": "Enabling {id}",
@@ -677,7 +678,8 @@
       "filterImage": "Image",
       "filterVideo": "Video",
       "filterAudio": "Audio",
-      "filter3D": "3D"
+      "filter3D": "3D",
+      "filterText": "Text"
     },
     "backToAssets": "Back to all assets",
     "searchAssets": "Search Assets",
@@ -1182,7 +1184,7 @@
     "Experimental: Enable AssetAPI": "Experimental: Enable AssetAPI",
     "Canvas Performance": "Canvas Performance",
     "Help Center": "Help Center",
-    "toggle linear mode": "toggle linear mode",
+    "toggle linear mode": "Toggle Simple Mode",
     "Toggle Queue Panel V2": "Toggle Queue Panel V2",
     "Toggle Theme (Dark/Light)": "Toggle Theme (Dark/Light)",
     "Undo": "Undo",
@@ -2472,8 +2474,14 @@
     "message": "Switch back to Nodes 2.0 anytime from the main menu."
   },
   "linearMode": {
-    "share": "Share",
+    "linearMode": "Simple Mode",
-    "openWorkflow": "Open Workflow"
+    "beta": "Simple Mode in Beta - Feedback",
+    "graphMode": "Graph Mode",
+    "dragAndDropImage": "Click to browse or drag an image",
+    "runCount": "Run count:",
+    "rerun": "Rerun",
+    "reuseParameters": "Reuse Parameters",
+    "downloadAll": "Download All"
   },
   "missingNodes": {
     "cloud": {
@@ -2528,4 +2536,4 @@
       "failed": "Failed"
     }
   }
-}
+}

src/platform/remoteConfig/types.ts

@@ -40,5 +40,6 @@ export type RemoteConfig = {
   private_models_enabled?: boolean
   onboarding_survey_enabled?: boolean
   huggingface_model_import_enabled?: boolean
+  linear_toggle_enabled?: boolean
   async_model_upload_enabled?: boolean
 }

src/platform/telemetry/types.ts

@@ -413,6 +413,7 @@ export type ExecutionTriggerSource =
   | 'keybinding'
   | 'legacy_ui'
   | 'unknown'
+  | 'linear'
 
 /**
  * Union type for all possible telemetry event properties

src/platform/updates/common/useFrontendVersionMismatchWarning.ts

@@ -1,5 +1,5 @@
 import { whenever } from '@vueuse/core'
-import { computed, onMounted } from 'vue'
+import { computed, nextTick, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useToastStore } from './toastStore'
@@ -65,9 +65,12 @@ export function useFrontendVersionMismatchWarning(
     versionCompatibilityStore.dismissWarning()
   }
 
-  onMounted(() => {
+  onMounted(async () => {
     // Only set up the watcher if immediate is true
     if (immediate) {
+      // Wait for next tick to ensure reactive updates from settings load have propagated
+      await nextTick()
+
       whenever(
         () => versionCompatibilityStore.shouldShowWarning,
         () => {

src/platform/updates/common/versionCompatibilityStore.ts

@@ -88,11 +88,16 @@ export const useVersionCompatibilityStore = defineStore(
       return Date.now() < dismissedUntil
     })
 
+    const warningsDisabled = computed(() =>
+      settingStore.get('Comfy.VersionCompatibility.DisableWarnings')
+    )
+
     const shouldShowWarning = computed(() => {
-      const warningsDisabled = settingStore.get(
+      return (
-        'Comfy.VersionCompatibility.DisableWarnings'
+        hasVersionMismatch.value &&
+        !isDismissed.value &&
+        !warningsDisabled.value
       )
-      return hasVersionMismatch.value && !isDismissed.value && !warningsDisabled
     })
 
     const warningMessage = computed(() => {

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

@@ -11,6 +11,7 @@ import {
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
@@ -311,6 +312,11 @@ export const useWorkflowService = () => {
     workflowData: ComfyWorkflowJSON
   ) => {
     const workflowStore = useWorkspaceStore().workflow
+    if (
+      workflowData.extra?.linearMode !== undefined ||
+      !workflowData.nodes.length
+    )
+      useCanvasStore().linearMode = !!workflowData.extra?.linearMode
 
     if (value === null || typeof value === 'string') {
       const path = value as string | null
@@ -332,6 +338,11 @@ export const useWorkflowService = () => {
         }
       }
 
+      if (useCanvasStore().linearMode) {
+        app.rootGraph.extra ??= {}
+        app.rootGraph.extra.linearMode = true
+      }
+
       const tempWorkflow = workflowStore.createNewTemporary(
         path ? appendJsonExt(path) : undefined,
         workflowData

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

@@ -13,7 +13,6 @@ import type {
   ComfyWorkflowJSON,
   NodeId
 } from '@/platform/workflow/validation/schemas/workflowSchema'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
@@ -334,7 +333,6 @@ export const useWorkflowStore = defineStore('workflow', () => {
       tabActivationHistory.value.shift()
     }
 
-    useCanvasStore().linearMode = !!loadedWorkflow.activeState.extra?.linearMode
     return loadedWorkflow
   }
 

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

@@ -121,28 +121,7 @@ export function useTemplateWorkflows() {
         if (!template || !template.sourceModule) return false
 
         // Use the stored source module for loading
-        const actualSourceModule = template.sourceModule
+        sourceModule = template.sourceModule
-        json = await fetchTemplateJson(id, actualSourceModule)
-
-        // Use source module for name
-        const workflowName =
-          actualSourceModule === 'default'
-            ? t(`templateWorkflows.template.${id}`, id)
-            : id
-
-        if (isCloud) {
-          useTelemetry()?.trackTemplate({
-            workflow_name: id,
-            template_source: actualSourceModule
-          })
-        }
-
-        dialogStore.closeDialog()
-        await app.loadGraphData(json, true, true, workflowName, {
-          openSource: 'template'
-        })
-
-        return true
       }
 
       // Regular case for normal categories

src/renderer/extensions/linearMode/DropZone.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+defineProps<{
+  onDragOver?: (e: DragEvent) => boolean
+  onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
+  dropIndicator?: {
+    iconClass?: string
+    imageUrl?: string
+    label?: string
+    onClick?: (e: MouseEvent) => void
+  }
+}>()
+
+const canAcceptDrop = ref(false)
+</script>
+<template>
+  <div
+    v-if="onDragOver && onDragDrop"
+    :class="
+      cn(
+        'rounded-lg ring-inset ring-primary-500',
+        canAcceptDrop && 'ring-4 bg-primary-500/10'
+      )
+    "
+    @dragover.prevent="canAcceptDrop = onDragOver?.($event)"
+    @dragleave="canAcceptDrop = false"
+    @drop.stop.prevent="
+      (e: DragEvent) => {
+        onDragDrop!(e)
+        canAcceptDrop = false
+      }
+    "
+  >
+    <slot />
+    <div
+      v-if="dropIndicator"
+      :class="
+        cn(
+          'flex flex-col items-center justify-center gap-2 border-dashed rounded-lg border h-25 border-border-subtle m-3 py-2',
+          dropIndicator?.onClick && 'cursor-pointer'
+        )
+      "
+      @click.prevent="dropIndicator?.onClick?.($event)"
+    >
+      <img
+        v-if="dropIndicator?.imageUrl"
+        class="h-23"
+        :src="dropIndicator?.imageUrl"
+      />
+      <template v-else>
+        <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
+        <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
+      </template>
+    </div>
+  </div>
+  <slot v-else />
+</template>

src/renderer/extensions/linearMode/ImagePreview.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+
+import ZoomPane from '@/components/ui/ZoomPane.vue'
+
+const { src } = defineProps<{
+  src: string
+  mobile?: boolean
+}>()
+
+const imageRef = useTemplateRef('imageRef')
+const width = ref('')
+const height = ref('')
+</script>
+<template>
+  <ZoomPane v-if="!mobile" v-slot="slotProps" class="flex-1 w-full">
+    <img
+      ref="imageRef"
+      :src
+      v-bind="slotProps"
+      class="h-full object-contain w-full"
+      @load="
+        () => {
+          if (!imageRef) return
+          width = `${imageRef.naturalWidth}`
+          height = `${imageRef.naturalHeight}`
+        }
+      "
+    />
+  </ZoomPane>
+  <img
+    v-else
+    ref="imageRef"
+    class="w-full"
+    :src
+    @load="
+      () => {
+        if (!imageRef) return
+        width = `${imageRef.naturalWidth}`
+        height = `${imageRef.naturalHeight}`
+      }
+    "
+  />
+  <span class="self-center md:z-10" v-text="`${width} x ${height}`" />
+</template>

src/renderer/extensions/linearMode/LinearControls.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { useEventListener, useTimeout } from '@vueuse/core'
+import { partition } from 'es-toolkit'
+import { storeToRefs } from 'pinia'
+import { computed, ref, shallowRef } from 'vue'
+
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
+import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
+import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
+import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useCommandStore } from '@/stores/commandStore'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useQueueSettingsStore } from '@/stores/queueStore'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
+
+const commandStore = useCommandStore()
+const executionStore = useExecutionStore()
+const { batchCount } = storeToRefs(useQueueSettingsStore())
+const { isActiveSubscription } = useSubscription()
+const workflowStore = useWorkflowStore()
+
+const props = defineProps<{
+  toastTo?: string | HTMLElement
+  notesTo?: string | HTMLElement
+  mobile?: boolean
+}>()
+
+const jobFinishedQueue = ref(true)
+const { ready: jobToastTimeout, start: resetJobToastTimeout } = useTimeout(
+  5000,
+  { controls: true, immediate: false }
+)
+
+const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
+useEventListener(
+  app.rootGraph.events,
+  'configured',
+  () => (graphNodes.value = app.rootGraph.nodes)
+)
+
+function getDropIndicator(node: LGraphNode) {
+  if (node.type !== 'LoadImage') return undefined
+
+  const filename = node.widgets?.[0]?.value
+  const resultItem = { type: 'input', filename: `${filename}` }
+
+  return {
+    iconClass: 'icon-[lucide--image]',
+    imageUrl: filename
+      ? api.apiURL(
+          `/view?${new URLSearchParams(resultItem)}${app.getPreviewFormatParam()}`
+        )
+      : undefined,
+    label: t('linearMode.dragAndDropImage'),
+    onClick: () => node.widgets?.[1]?.callback?.(undefined)
+  }
+}
+
+function nodeToNodeData(node: LGraphNode) {
+  const dropIndicator = getDropIndicator(node)
+  const nodeData = extractVueNodeData(node)
+  for (const widget of nodeData.widgets ?? []) widget.slotMetadata = undefined
+
+  return {
+    ...nodeData,
+    //note lastNodeErrors uses exeuctionid, node.id is execution for root
+    hasErrors: !!executionStore.lastNodeErrors?.[node.id],
+
+    dropIndicator,
+    onDragDrop: node.onDragDrop,
+    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
+})
+
+const batchCountWidget: SimplifiedWidget<number> = {
+  options: { precision: 0, min: 1, max: isCloud ? 4 : 99 },
+  value: 1,
+  name: t('linearMode.runCount'),
+  type: 'number'
+} as const
+
+//TODO: refactor out of this file.
+//code length is small, but changes should propagate
+async function runButtonClick(e: Event) {
+  if (!jobFinishedQueue.value) return
+  try {
+    jobFinishedQueue.value = false
+    resetJobToastTimeout()
+    const isShiftPressed = 'shiftKey' in e && e.shiftKey
+    const commandId = isShiftPressed
+      ? 'Comfy.QueuePromptFront'
+      : 'Comfy.QueuePrompt'
+
+    if (batchCount.value > 1) {
+      useTelemetry()?.trackUiButtonClicked({
+        button_id: 'queue_run_multiple_batches_submitted'
+      })
+    }
+    await commandStore.execute(commandId, {
+      metadata: {
+        subscribe_to_run: false,
+        trigger_source: 'linear'
+      }
+    })
+  } finally {
+    //TODO: Error state indicator for failed queue?
+    jobFinishedQueue.value = true
+  }
+}
+
+defineExpose({ runButtonClick })
+</script>
+<template>
+  <div class="flex flex-col min-w-80 md:h-full">
+    <section
+      v-if="mobile"
+      data-testid="linear-run-button"
+      class="p-4 pb-6 border-t border-node-component-border"
+    >
+      <WidgetInputNumberInput
+        v-model="batchCount"
+        :widget="batchCountWidget"
+        class="*:[.min-w-0]:w-24 grid-cols-[auto_96px]!"
+      />
+      <SubscribeToRunButton v-if="!isActiveSubscription" class="w-full mt-4" />
+      <div v-else class="flex mt-4 gap-2">
+        <Button
+          variant="primary"
+          class="grow-1"
+          size="lg"
+          @click="runButtonClick"
+        >
+          <i class="icon-[lucide--play]" />
+          {{ t('menu.run') }}
+        </Button>
+        <Button
+          v-if="!executionStore.isIdle"
+          variant="destructive"
+          size="lg"
+          class="w-10 p-2"
+          @click="commandStore.execute('Comfy.Interrupt')"
+        >
+          <i class="icon-[lucide--x]" />
+        </Button>
+      </div>
+    </section>
+    <section
+      data-testid="linear-workflow-info"
+      class="h-12 border-x border-border-subtle py-2 px-4 gap-2 bg-comfy-menu-bg flex items-center md:contain-size"
+    >
+      <span
+        class="font-bold truncate"
+        v-text="workflowStore.activeWorkflow?.filename"
+      />
+      <div class="flex-1" />
+      <Popover
+        v-if="partitionedNodes[0].length"
+        align="start"
+        class="overflow-y-auto overflow-x-clip max-h-(--reka-popover-content-available-height) z-100"
+        :reference="notesTo"
+        side="left"
+        :to="notesTo"
+      >
+        <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
+              :style="{ background: applyLightThemeColor(nodeData.bgcolor) }"
+              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg max-w-100"
+            />
+          </template>
+        </div>
+      </Popover>
+      <Button v-if="false"> {{ t('menuLabels.publish') }} </Button>
+    </section>
+    <div
+      class="border gap-2 md:h-full border-[var(--interface-stroke)] bg-comfy-menu-bg flex flex-col px-2"
+    >
+      <section
+        data-testid="linear-widgets"
+        class="grow-1 md:overflow-y-auto md:contain-size"
+      >
+        <template
+          v-for="(nodeData, index) of partitionedNodes[1]"
+          :key="nodeData.id"
+        >
+          <div
+            v-if="index !== 0"
+            class="w-full border-t-1 border-node-component-border"
+          />
+          <DropZone
+            :on-drag-over="nodeData.onDragOver"
+            :on-drag-drop="nodeData.onDragDrop"
+            :drop-indicator="mobile ? undefined : nodeData.dropIndicator"
+            class="text-muted-foreground"
+          >
+            <NodeWidgets
+              :node-data
+              :class="
+                cn(
+                  'py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg',
+                  nodeData.hasErrors &&
+                    'ring-2 ring-inset ring-node-stroke-error'
+                )
+              "
+              :style="{ background: applyLightThemeColor(nodeData.bgcolor) }"
+            />
+          </DropZone>
+        </template>
+      </section>
+      <section
+        v-if="!mobile"
+        data-testid="linear-run-button"
+        class="p-4 pb-6 border-t border-node-component-border"
+      >
+        <WidgetInputNumberInput
+          v-model="batchCount"
+          :widget="batchCountWidget"
+          class="*:[.min-w-0]:w-24 grid-cols-[auto_96px]!"
+        />
+        <SubscribeToRunButton
+          v-if="!isActiveSubscription"
+          class="w-full mt-4"
+        />
+        <div v-else class="flex mt-4 gap-2">
+          <Button
+            variant="primary"
+            class="grow-1"
+            size="lg"
+            @click="runButtonClick"
+          >
+            <i class="icon-[lucide--play]" />
+            {{ t('menu.run') }}
+          </Button>
+          <Button
+            v-if="!executionStore.isIdle"
+            variant="destructive"
+            size="lg"
+            class="w-10 p-2"
+            @click="commandStore.execute('Comfy.Interrupt')"
+          >
+            <i class="icon-[lucide--x]" />
+          </Button>
+        </div>
+      </section>
+    </div>
+  </div>
+  <Teleport
+    v-if="(!jobToastTimeout || !jobFinishedQueue) && toastTo"
+    defer
+    :to="toastTo"
+  >
+    <div
+      class="bg-base-foreground text-base-background rounded-sm flex h-8 p-1 pr-2 gap-2 items-center"
+    >
+      <i
+        v-if="jobFinishedQueue"
+        class="icon-[lucide--check] size-5 bg-success-background"
+      />
+      <i v-else class="icon-[lucide--loader-circle] size-4 animate-spin" />
+      <span v-text="t('queue.jobAddedToQueue')" />
+    </div>
+  </Teleport>
+  <Teleport v-if="false" defer :to="notesTo">
+    <div
+      class="bg-base-background text-muted-foreground flex flex-col w-90 gap-2 rounded-2xl border-1 border-border-subtle py-3"
+    ></div>
+  </Teleport>
+</template>

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { d, t } from '@/i18n'
+import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { extractWorkflowFromAsset } from '@/platform/workflow/utils/workflowExtractionUtil'
+import ImagePreview from '@/renderer/extensions/linearMode/ImagePreview.vue'
+import Preview3d from '@/renderer/extensions/linearMode/Preview3d.vue'
+import VideoPreview from '@/renderer/extensions/linearMode/VideoPreview.vue'
+import {
+  getMediaType,
+  mediaTypes
+} from '@/renderer/extensions/linearMode/mediaTypes'
+import type { StatItem } from '@/renderer/extensions/linearMode/mediaTypes'
+import { app } from '@/scripts/app'
+import type { ResultItemImpl } from '@/stores/queueStore'
+import { formatDuration } from '@/utils/dateTimeUtil'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { executeWidgetsCallback } from '@/utils/litegraphUtil'
+
+const mediaActions = useMediaAssetActions()
+
+const { runButtonClick, selectedItem, selectedOutput } = defineProps<{
+  latentPreview?: string
+  runButtonClick?: (e: Event) => void
+  selectedItem?: AssetItem
+  selectedOutput?: ResultItemImpl
+  mobile?: boolean
+}>()
+
+const dateOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric'
+} as const
+const timeOptions = {
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric'
+} as const
+
+function formatTime(time: string) {
+  if (!time) return ''
+  const date = new Date(time)
+  return `${d(date, dateOptions)} | ${d(date, timeOptions)}`
+}
+
+const itemStats = computed<StatItem[]>(() => {
+  if (!selectedItem) return []
+  const user_metadata = getOutputAssetMetadata(selectedItem.user_metadata)
+  if (!user_metadata) return []
+
+  const { allOutputs } = user_metadata
+  return [
+    { content: formatTime(selectedItem.created_at) },
+    { content: formatDuration(user_metadata.executionTimeInSeconds) },
+    allOutputs && { content: t('g.asset', allOutputs.length) },
+    (selectedOutput && mediaTypes[getMediaType(selectedOutput)]) ?? {}
+  ].filter((i) => !!i)
+})
+
+function downloadAsset(item?: AssetItem) {
+  const user_metadata = getOutputAssetMetadata(item?.user_metadata)
+  for (const output of user_metadata?.allOutputs ?? [])
+    downloadFile(output.url, output.filename)
+}
+
+async function loadWorkflow(item: AssetItem | undefined) {
+  if (!item) return
+  const { workflow } = await extractWorkflowFromAsset(item)
+  if (!workflow) return
+
+  if (workflow.id !== app.rootGraph.id) return app.loadGraphData(workflow)
+  //update graph to new version, set old to top of undo queue
+  const changeTracker = useWorkflowStore().activeWorkflow?.changeTracker
+  if (!changeTracker) return app.loadGraphData(workflow)
+  changeTracker.redoQueue = []
+  changeTracker.updateState([workflow], changeTracker.undoQueue)
+}
+
+async function rerun(e: Event) {
+  if (!runButtonClick) return
+  await loadWorkflow(selectedItem)
+  //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>
+<template>
+  <section
+    v-if="selectedItem"
+    data-testid="linear-output-info"
+    class="flex flex-wrap gap-2 p-1 w-full md:z-10 tabular-nums justify-between text-sm"
+  >
+    <div class="flex gap-3 text-nowrap">
+      <div
+        v-for="({ content, iconClass }, index) in itemStats"
+        :key="index"
+        class="flex items-center justify-items-center gap-1 tabular-nums"
+      >
+        <i v-if="iconClass" :class="iconClass" />
+        {{ content }}
+      </div>
+    </div>
+    <div class="flex gap-3 justify-self-end">
+      <Button size="md" @click="rerun">
+        {{ t('linearMode.rerun') }}
+        <i class="icon-[lucide--refresh-cw]" />
+      </Button>
+      <Button size="md" @click="() => loadWorkflow(selectedItem)">
+        {{ t('linearMode.reuseParameters') }}
+        <i class="icon-[lucide--list-restart]" />
+      </Button>
+      <div class="border-r border-border-subtle mx-1" />
+      <Button
+        size="icon"
+        @click="
+          () => {
+            if (selectedOutput?.url) downloadFile(selectedOutput.url)
+          }
+        "
+      >
+        <i class="icon-[lucide--download]" />
+      </Button>
+      <Popover
+        :entries="[
+          [
+            {
+              icon: 'icon-[lucide--download]',
+              label: t('linearMode.downloadAll'),
+              action: () => downloadAsset(selectedItem!)
+            }
+          ],
+          [
+            {
+              icon: 'icon-[lucide--trash-2]',
+              label: t('queue.jobMenu.deleteAsset'),
+              action: () => mediaActions.confirmDelete(selectedItem!)
+            }
+          ]
+        ]"
+      />
+    </div>
+  </section>
+  <ImagePreview
+    v-if="latentPreview ?? getMediaType(selectedOutput) === 'images'"
+    :mobile
+    :src="latentPreview ?? selectedOutput!.url"
+  />
+  <VideoPreview
+    v-else-if="getMediaType(selectedOutput) === 'video'"
+    :src="selectedOutput!.url"
+    class="object-contain flex-1 md:contain-size"
+  />
+  <audio
+    v-else-if="getMediaType(selectedOutput) === 'audio'"
+    class="w-full m-auto"
+    controls
+    :src="selectedOutput!.url"
+  />
+  <article
+    v-else-if="getMediaType(selectedOutput) === 'text'"
+    class="w-full max-w-128 m-auto my-12 overflow-y-auto"
+    v-text="selectedOutput!.url"
+  />
+  <Preview3d
+    v-else-if="getMediaType(selectedOutput) === '3d'"
+    :model-url="selectedOutput!.url"
+  />
+  <img
+    v-else
+    class="pointer-events-none flex-1 max-h-full md:contain-size brightness-50 opacity-10"
+    src="/assets/images/comfy-logo-mono.svg"
+  />
+</template>

src/renderer/extensions/linearMode/OutputHistory.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { useEventListener, useInfiniteScroll, useScroll } from '@vueuse/core'
+import { computed, ref, toRaw, useTemplateRef, watch } from 'vue'
+
+import ModeToggle from '@/components/sidebar/ModeToggle.vue'
+import SidebarIcon from '@/components/sidebar/SidebarIcon.vue'
+import SidebarTemplatesButton from '@/components/sidebar/SidebarTemplatesButton.vue'
+import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { CanvasPointer } from '@/lib/litegraph/src/CanvasPointer'
+import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
+import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import {
+  getMediaType,
+  mediaTypes
+} from '@/renderer/extensions/linearMode/mediaTypes'
+import { useQueueStore } from '@/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const displayWorkflows = ref(false)
+const outputs = useMediaAssets('output')
+const queueStore = useQueueStore()
+const settingStore = useSettingStore()
+
+const workflowTab = useWorkspaceStore()
+  .getSidebarTabs()
+  .find((w) => w.id === 'workflows')
+
+void outputs.fetchMediaList()
+
+defineProps<{
+  scrollResetButtonTo?: string | HTMLElement
+  mobile?: boolean
+}>()
+const emit = defineEmits<{
+  updateSelection: [
+    selection: [AssetItem | undefined, ResultItemImpl | undefined, boolean]
+  ]
+}>()
+
+defineExpose({ onWheel })
+
+const selectedIndex = ref<[number, number]>([-1, 0])
+
+watch(selectedIndex, () => {
+  const [index] = selectedIndex.value
+  emit('updateSelection', [
+    outputs.media.value[index],
+    selectedOutput.value,
+    selectedIndex.value[0] <= 0
+  ])
+})
+
+const outputsRef = useTemplateRef('outputsRef')
+const { reset: resetInfiniteScroll } = useInfiniteScroll(
+  outputsRef,
+  outputs.loadMore,
+  { canLoadMore: () => outputs.hasMore.value }
+)
+function resetOutputsScroll() {
+  //TODO need to also prune outputs entries?
+  resetInfiniteScroll()
+  outputsRef.value?.scrollTo(0, 0)
+}
+const { y: outputScrollState } = useScroll(outputsRef)
+
+watch(selectedIndex, () => {
+  const [index, key] = selectedIndex.value
+  if (!outputsRef.value) return
+
+  const outputElement = outputsRef.value?.children?.[index]?.children?.[key]
+  if (!outputElement) return
+
+  //container: 'nearest' is nice, but bleeding edge and chrome only
+  outputElement.scrollIntoView({ block: 'nearest' })
+})
+
+function allOutputs(item?: AssetItem) {
+  const user_metadata = getOutputAssetMetadata(item?.user_metadata)
+  if (!user_metadata?.allOutputs) return []
+
+  return user_metadata.allOutputs
+}
+
+const selectedOutput = computed(() => {
+  const [index, key] = selectedIndex.value
+  if (index < 0) return undefined
+
+  const output = allOutputs(outputs.media.value[index])[key]
+  if (output) return output
+
+  return allOutputs(outputs.media.value[0])[0]
+})
+
+watch(
+  () => outputs.media.value,
+  (newAssets, oldAssets) => {
+    if (newAssets.length === oldAssets.length || oldAssets.length === 0) return
+    if (selectedIndex.value[0] <= 0) {
+      //force update
+      selectedIndex.value = [0, 0]
+      return
+    }
+
+    const oldId = toRaw(oldAssets[selectedIndex.value[0]]?.id)
+    const newIndex = toRaw(newAssets).findIndex((asset) => asset?.id === oldId)
+
+    if (newIndex === -1) selectedIndex.value = [0, 0]
+    else selectedIndex.value = [newIndex, selectedIndex.value[1]]
+  }
+)
+
+function gotoNextOutput() {
+  const [index, key] = selectedIndex.value
+  if (index < 0 || key < 0) {
+    selectedIndex.value = [0, 0]
+    return
+  }
+  const currentItem = outputs.media.value[index]
+  if (allOutputs(currentItem)[key + 1]) {
+    selectedIndex.value = [index, key + 1]
+    return
+  }
+  if (outputs.media.value[index + 1]) {
+    selectedIndex.value = [index + 1, 0]
+  }
+  //do nothing, no next output
+}
+
+function gotoPreviousOutput() {
+  const [index, key] = selectedIndex.value
+  if (key > 0) {
+    selectedIndex.value = [index, key - 1]
+    return
+  }
+
+  if (index > 0) {
+    const currentItem = outputs.media.value[index - 1]
+    selectedIndex.value = [index - 1, allOutputs(currentItem).length - 1]
+    return
+  }
+
+  selectedIndex.value = [0, 0]
+}
+
+let pointer = new CanvasPointer(document.body)
+let scrollOffset = 0
+function onWheel(e: WheelEvent) {
+  if (!e.ctrlKey && !e.metaKey) return
+  e.preventDefault()
+  e.stopPropagation()
+
+  if (!pointer.isTrackpadGesture(e)) {
+    if (e.deltaY > 0) gotoNextOutput()
+    else gotoPreviousOutput()
+    return
+  }
+  scrollOffset += e.deltaY
+  while (scrollOffset >= 60) {
+    scrollOffset -= 60
+    gotoNextOutput()
+  }
+  while (scrollOffset <= -60) {
+    scrollOffset += 60
+    gotoPreviousOutput()
+  }
+}
+
+useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
+  if (
+    (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') ||
+    e.target instanceof HTMLTextAreaElement ||
+    e.target instanceof HTMLInputElement
+  )
+    return
+
+  e.preventDefault()
+  e.stopPropagation()
+  if (e.key === 'ArrowDown') gotoNextOutput()
+  else gotoPreviousOutput()
+})
+</script>
+<template>
+  <div
+    :class="
+      cn(
+        'min-w-38 flex bg-comfy-menu-bg md:h-full border-border-subtle',
+        settingStore.get('Comfy.Sidebar.Location') === 'right'
+          ? 'flex-row-reverse border-l'
+          : 'md:border-r'
+      )
+    "
+    v-bind="$attrs"
+  >
+    <div
+      v-if="!mobile"
+      class="h-full flex flex-col w-14 shrink-0 overflow-hidden items-center p-2"
+    >
+      <template v-if="workflowTab">
+        <SidebarIcon
+          :icon="workflowTab.icon"
+          :icon-badge="workflowTab.iconBadge"
+          :tooltip="workflowTab.tooltip"
+          :label="workflowTab.label || workflowTab.title"
+          :class="workflowTab.id + '-tab-button'"
+          :selected="displayWorkflows"
+          :is-small="settingStore.get('Comfy.Sidebar.Size') === 'small'"
+          @click="displayWorkflows = !displayWorkflows"
+        />
+      </template>
+      <SidebarTemplatesButton />
+      <div class="flex-1" />
+      <ModeToggle />
+    </div>
+    <div class="border-border-subtle md:border-r" />
+    <WorkflowsSidebarTab v-if="displayWorkflows" class="min-w-50 grow-1" />
+    <article
+      v-else
+      ref="outputsRef"
+      data-testid="linear-outputs"
+      class="h-24 md:h-full min-w-24 grow-1 p-3 overflow-x-auto overflow-y-clip md:overflow-y-auto md:overflow-x-clip md:border-r-1 border-node-component-border flex md:flex-col items-center contain-size"
+    >
+      <section
+        v-if="
+          queueStore.runningTasks.length > 0 ||
+          queueStore.pendingTasks.length > 0
+        "
+        data-testid="linear-job"
+        class="py-3 not-md:h-24 md:w-full aspect-square px-1 relative"
+      >
+        <i
+          v-if="queueStore.runningTasks.length > 0"
+          class="icon-[lucide--loader-circle] size-full animate-spin"
+        />
+        <i v-else class="icon-[lucide--ellipsis] size-full animate-pulse" />
+        <div
+          v-if="
+            queueStore.runningTasks.length + queueStore.pendingTasks.length > 1
+          "
+          class="absolute top-0 right-0 p-1 min-w-5 h-5 flex justify-center items-center rounded-full bg-primary-background text-text-primary"
+          v-text="
+            queueStore.runningTasks.length + queueStore.pendingTasks.length
+          "
+        />
+      </section>
+      <template v-for="(item, index) in outputs.media.value" :key="index">
+        <div
+          class="border-border-subtle not-md:border-l md:border-t first:border-none not-md:h-21 md:w-full m-3"
+        />
+        <template v-for="(output, key) in allOutputs(item)" :key>
+          <img
+            v-if="getMediaType(output) === 'images'"
+            :class="
+              cn(
+                'p-1 rounded-lg aspect-square object-cover not-md:h-20 md:w-full',
+                index === selectedIndex[0] &&
+                  key === selectedIndex[1] &&
+                  'border-2'
+              )
+            "
+            :src="output.url"
+            @click="selectedIndex = [index, key]"
+          />
+          <div
+            v-else
+            :class="
+              cn(
+                'p-1 rounded-lg aspect-square w-full',
+                index === selectedIndex[0] &&
+                  key === selectedIndex[1] &&
+                  'border-2'
+              )
+            "
+            @click="selectedIndex = [index, key]"
+          >
+            <i
+              :class="
+                cn(mediaTypes[getMediaType(output)]?.iconClass, 'size-full')
+              "
+            />
+          </div>
+        </template>
+      </template>
+    </article>
+  </div>
+  <Teleport
+    v-if="outputScrollState && scrollResetButtonTo"
+    :to="scrollResetButtonTo"
+  >
+    <Button
+      :class="
+        cn(
+          'p-3 size-10 bg-base-foreground',
+          settingStore.get('Comfy.Sidebar.Location') === 'left'
+            ? 'left-4'
+            : 'right-4'
+        )
+      "
+      @click="resetOutputsScroll"
+    >
+      <i class="icon-[lucide--arrow-up] size-4 bg-base-background" />
+    </Button>
+  </Teleport>
+</template>

src/renderer/extensions/linearMode/Preview3d.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useTemplateRef, watch } from 'vue'
+
+import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
+import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
+
+const { modelUrl } = defineProps<{
+  modelUrl: string
+}>()
+
+const containerRef = useTemplateRef('containerRef')
+
+const viewer = useLoad3dViewer()
+
+watch([containerRef, () => modelUrl], async () => {
+  if (!containerRef.value || !modelUrl) return
+
+  await viewer.initializeStandaloneViewer(containerRef.value, modelUrl)
+})
+
+//TODO: refactor to add control buttons
+</script>
+<template>
+  <div
+    ref="containerRef"
+    class="relative w-full h-full"
+    @mouseenter="viewer.handleMouseEnter"
+    @mouseleave="viewer.handleMouseLeave"
+    @resize="viewer.handleResize"
+  >
+    <div class="pointer-events-none absolute top-0 left-0 size-full">
+      <AnimationControls
+        v-if="viewer.animations.value && viewer.animations.value.length > 0"
+        v-model:animations="viewer.animations.value"
+        v-model:playing="viewer.playing.value"
+        v-model:selected-speed="viewer.selectedSpeed.value"
+        v-model:selected-animation="viewer.selectedAnimation.value"
+        v-model:animation-progress="viewer.animationProgress.value"
+        v-model:animation-duration="viewer.animationDuration.value"
+        @seek="viewer.handleSeek"
+      />
+    </div>
+  </div>
+</template>

src/renderer/extensions/linearMode/VideoPreview.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+
+const { src } = defineProps<{
+  src: string
+}>()
+
+const videoRef = useTemplateRef('videoRef')
+const width = ref('')
+const height = ref('')
+</script>
+<template>
+  <video
+    ref="videoRef"
+    :src
+    controls
+    v-bind="$attrs"
+    @loadedmetadata="
+      () => {
+        if (!videoRef) return
+        width = `${videoRef.videoWidth}`
+        height = `${videoRef.videoHeight}`
+      }
+    "
+  />
+  <span class="self-center z-10" v-text="`${width} x ${height}`" />
+</template>

src/renderer/extensions/linearMode/mediaTypes.ts

@@ -0,0 +1,33 @@
+import { t } from '@/i18n'
+
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+export type StatItem = { content?: string; iconClass?: string }
+export const mediaTypes: Record<string, StatItem> = {
+  '3d': {
+    content: t('sideToolbar.mediaAssets.filter3D'),
+    iconClass: 'icon-[lucide--box]'
+  },
+  audio: {
+    content: t('sideToolbar.mediaAssets.filterAudio'),
+    iconClass: 'icon-[lucide--audio-lines]'
+  },
+  images: {
+    content: t('sideToolbar.mediaAssets.filterImage'),
+    iconClass: 'icon-[lucide--image]'
+  },
+  text: {
+    content: t('sideToolbar.mediaAssets.filterText'),
+    iconClass: 'icon-[lucide--text]'
+  },
+  video: {
+    content: t('sideToolbar.mediaAssets.filterVideo'),
+    iconClass: 'icon-[lucide--video]'
+  }
+}
+
+export function getMediaType(output?: ResultItemImpl) {
+  if (!output) return ''
+  if (output.isVideo) return 'video'
+  return output.mediaType
+}

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

@@ -40,7 +40,7 @@
         transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
         zIndex: zIndex,
         opacity: nodeOpacity,
-        '--component-node-background': nodeBodyBackgroundColor
+        '--component-node-background': applyLightThemeColor(nodeData.bgcolor)
       }
     ]"
     v-bind="remainingPointerHandlers"
@@ -168,7 +168,6 @@ import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeS
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { isTransparent } from '@/utils/colorUtil'
 import {
   getLocatorIdFromNodeData,
@@ -228,19 +227,6 @@ const bypassed = computed(
 )
 const muted = computed((): boolean => nodeData.mode === LGraphEventMode.NEVER)
 
-const nodeBodyBackgroundColor = computed(() => {
-  const colorPaletteStore = useColorPaletteStore()
-
-  if (!nodeData.bgcolor) {
-    return ''
-  }
-
-  return applyLightThemeColor(
-    nodeData.bgcolor,
-    Boolean(colorPaletteStore.completedActivePalette.light_theme)
-  )
-})
-
 const nodeOpacity = computed(() => {
   const globalOpacity = useSettingStore().get('Comfy.Node.Opacity') ?? 1
 

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

@@ -11,7 +11,10 @@
         headerShapeClass
       )
     "
-    :style="headerStyle"
+    :style="{
+      backgroundColor: applyLightThemeColor(nodeData?.color),
+      opacity: useSettingStore().get('Comfy.Node.Opacity') ?? 1
+    }"
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
@@ -104,7 +107,6 @@ import NodeBadge from '@/renderer/extensions/vueNodes/components/NodeBadge.vue'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import { app } from '@/scripts/app'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import {
   getLocatorIdFromNodeData,
@@ -156,23 +158,6 @@ const enterSubgraphTooltipConfig = computed(() => {
   return createTooltipConfig(st('enterSubgraph', 'Enter Subgraph'))
 })
 
-const headerStyle = computed(() => {
-  const colorPaletteStore = useColorPaletteStore()
-
-  const opacity = useSettingStore().get('Comfy.Node.Opacity') ?? 1
-
-  if (!nodeData?.color) {
-    return { backgroundColor: '', opacity }
-  }
-
-  const headerColor = applyLightThemeColor(
-    nodeData.color,
-    Boolean(colorPaletteStore.completedActivePalette.light_theme)
-  )
-
-  return { backgroundColor: headerColor, opacity }
-})
-
 const resolveTitle = (info: VueNodeData | undefined) => {
   const title = (info?.title ?? '').trim()
   if (title.length > 0) return title

src/renderer/extensions/vueNodes/utils/nodeStyleUtils.ts

@@ -1,14 +1,13 @@
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 
 /**
  * Applies light theme color adjustments to a color
  */
-export function applyLightThemeColor(
+export function applyLightThemeColor(color?: string): string {
-  color: string,
+  if (!color) return ''
-  isLightTheme: boolean
+
-): string {
+  if (!useColorPaletteStore().completedActivePalette.light_theme) return color
-  if (!color || !isLightTheme) {
+
-    return color
-  }
   return adjustColor(color, { lightness: 0.5 })
 }

src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue

@@ -12,11 +12,11 @@
     </div>
     <div
       v-if="isRecording || isPlaying || recordedURL"
-      class="flex h-14 w-full items-center gap-4 rounded-lg px-4 bg-node-component-surface text-text-secondary"
+      class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg px-3 bg-node-component-surface text-text-secondary"
     >
       <!-- Recording Status -->
-      <div class="flex min-w-30 items-center gap-2">
+      <div class="flex shrink-0 items-center gap-1">
-        <span class="min-w-20 text-xs">
+        <span class="text-xs">
           {{
             isRecording
               ? t('g.listening', 'Listening...')
@@ -27,11 +27,11 @@
                   : ''
           }}
         </span>
-        <span class="min-w-10 text-sm">{{ formatTime(timer) }}</span>
+        <span class="text-sm">{{ formatTime(timer) }}</span>
       </div>
 
       <!-- Waveform Visualization -->
-      <div class="flex h-8 flex-1 items-center gap-2 overflow-x-clip">
+      <div class="flex h-8 min-w-0 flex-1 items-center gap-2 overflow-hidden">
         <div
           v-for="(bar, index) in waveformBars"
           :key="index"
@@ -45,7 +45,7 @@
       <button
         v-if="isRecording"
         :title="t('g.stopRecording', 'Stop Recording')"
-        class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex shrink-0 size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopRecording"
       >
         <div class="size-2.5 rounded-sm bg-danger-100" />
@@ -54,7 +54,7 @@
       <button
         v-else-if="!isRecording && recordedURL && !isPlaying"
         :title="t('g.playRecording') || 'Play Recording'"
-        class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handlePlayRecording"
       >
         <i class="text-text-secondary icon-[lucide--play] size-4" />
@@ -63,7 +63,7 @@
       <button
         v-else-if="isPlaying"
         :title="t('g.stopPlayback') || 'Stop Playback'"
-        class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
+        class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
         @click="handleStopPlayback"
       >
         <i class="text-text-secondary icon-[lucide--square] size-4" />

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

@@ -215,7 +215,8 @@ describe('useComboWidget', () => {
       'asset',
       'ckpt_name',
       'model1.safetensors',
-      expect.any(Function)
+      expect.any(Function),
+      expect.any(Object)
     )
     expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
     expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
@@ -250,7 +251,8 @@ describe('useComboWidget', () => {
       'asset',
       'ckpt_name',
       'fallback.safetensors',
-      expect.any(Function)
+      expect.any(Function),
+      expect.any(Object)
     )
     expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
     expect(widget).toBe(mockWidget)
@@ -280,7 +282,8 @@ describe('useComboWidget', () => {
       'asset',
       'ckpt_name',
       'Select model', // Should fallback to this instead of undefined
-      expect.any(Function)
+      expect.any(Function),
+      expect.any(Object)
     )
     expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
     expect(widget).toBe(mockWidget)

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

@@ -4,7 +4,10 @@ import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { isAssetWidget, isComboWidget } from '@/lib/litegraph/src/litegraph'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  IBaseWidget,
+  IWidgetAssetOptions
+} from '@/lib/litegraph/src/types/widgets'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import {
   assetFilenameSchema,
@@ -91,55 +94,59 @@ const createAssetBrowserWidget = (
   const displayLabel = currentValue ?? t('widgets.selectModel')
   const assetBrowserDialog = useAssetBrowserDialog()
 
+  async function openModal(widget: IBaseWidget) {
+    if (!isAssetWidget(widget)) {
+      throw new Error(`Expected asset widget but received ${widget.type}`)
+    }
+    await assetBrowserDialog.show({
+      nodeType: node.comfyClass || '',
+      inputName: inputSpec.name,
+      currentValue: widget.value,
+      onAssetSelected: (asset) => {
+        const validatedAsset = assetItemSchema.safeParse(asset)
+
+        if (!validatedAsset.success) {
+          console.error(
+            'Invalid asset item:',
+            validatedAsset.error.errors,
+            'Received:',
+            asset
+          )
+          return
+        }
+
+        const filename = validatedAsset.data.user_metadata?.filename
+        const validatedFilename = assetFilenameSchema.safeParse(filename)
+
+        if (!validatedFilename.success) {
+          console.error(
+            'Invalid asset filename:',
+            validatedFilename.error.errors,
+            'for asset:',
+            validatedAsset.data.id
+          )
+          return
+        }
+
+        const oldValue = widget.value
+        widget.value = validatedFilename.data
+        node.onWidgetChanged?.(
+          widget.name,
+          validatedFilename.data,
+          oldValue,
+          widget
+        )
+      }
+    })
+  }
+  const options: IWidgetAssetOptions = { openModal }
+
   const widget = node.addWidget(
     'asset',
     inputSpec.name,
     displayLabel,
-    async function (this: IBaseWidget) {
+    () => undefined,
-      if (!isAssetWidget(widget)) {
+    options
-        throw new Error(`Expected asset widget but received ${widget.type}`)
-      }
-      await assetBrowserDialog.show({
-        nodeType: node.comfyClass || '',
-        inputName: inputSpec.name,
-        currentValue: widget.value,
-        onAssetSelected: (asset) => {
-          const validatedAsset = assetItemSchema.safeParse(asset)
-
-          if (!validatedAsset.success) {
-            console.error(
-              'Invalid asset item:',
-              validatedAsset.error.errors,
-              'Received:',
-              asset
-            )
-            return
-          }
-
-          const filename = validatedAsset.data.user_metadata?.filename
-          const validatedFilename = assetFilenameSchema.safeParse(filename)
-
-          if (!validatedFilename.success) {
-            console.error(
-              'Invalid asset filename:',
-              validatedFilename.error.errors,
-              'for asset:',
-              validatedAsset.data.id
-            )
-            return
-          }
-
-          const oldValue = widget.value
-          this.value = validatedFilename.data
-          node.onWidgetChanged?.(
-            widget.name,
-            validatedFilename.data,
-            oldValue,
-            widget
-          )
-        }
-      })
-    }
   )
 
   return widget

src/scripts/app.ts

@@ -1224,6 +1224,8 @@ export class ComfyApp {
           // Fit view if no nodes visible in restored viewport
           this.canvas.ds.computeVisibleArea(this.canvas.viewport)
           if (
+            this.canvas.visible_area.width &&
+            this.canvas.visible_area.height &&
             !anyItemOverlapsRect(
               this.rootGraph._nodes,
               this.canvas.visible_area

src/scripts/widgets.ts

@@ -139,6 +139,9 @@ export function addValueControlWidgets(
     'Allows the linked widget to be changed automatically, for example randomizing the noise seed.'
   valueControl[IS_CONTROL_WIDGET] = true
   updateControlWidgetLabel(valueControl)
+  Object.defineProperty(valueControl, 'disabled', {
+    get: () => targetWidget.computedDisabled
+  })
   const widgets: [IComboWidget, ...IStringWidget[]] = [valueControl]
 
   const isCombo = isComboWidget(targetWidget)
@@ -160,6 +163,9 @@ export function addValueControlWidgets(
     updateControlWidgetLabel(comboFilter)
     comboFilter.tooltip =
       "Allows for filtering the list of values when changing the value via the control generate mode. Allows for RegEx matches in the format /abc/ to only filter to values containing 'abc'."
+    Object.defineProperty(comboFilter, 'disabled', {
+      get: () => targetWidget.computedDisabled
+    })
 
     widgets.push(comboFilter)
   }

src/stores/imagePreviewStore.ts

@@ -40,7 +40,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   const { nodeIdToNodeLocatorId, nodeToNodeLocatorId } = useWorkflowStore()
   const { executionIdToNodeLocatorId } = useExecutionStore()
   const scheduledRevoke: Record<NodeLocatorId, { stop: () => void }> = {}
-  const latestOutput = ref<string[]>([])
+  const latestPreview = ref<string[]>([])
 
   function scheduleRevoke(locator: NodeLocatorId, cb: () => void) {
     scheduledRevoke[locator]?.stop()
@@ -147,13 +147,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
       }
     }
 
-    //TODO:Preview params and deduplication
-    latestOutput.value =
-      (outputs as ExecutedWsMessage['output'])?.images?.map((image) => {
-        const imgUrlPart = new URLSearchParams(image)
-        const rand = app.getRandParam()
-        return api.apiURL(`/view?${imgUrlPart}${rand}`)
-      }) ?? []
     app.nodeOutputs[nodeLocatorId] = outputs
     nodeOutputs.value[nodeLocatorId] = outputs
   }
@@ -221,7 +214,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
       scheduledRevoke[nodeLocatorId].stop()
       delete scheduledRevoke[nodeLocatorId]
     }
-    latestOutput.value = previewImages
+    latestPreview.value = previewImages
     app.nodePreviewImages[nodeLocatorId] = previewImages
     nodePreviewImages.value[nodeLocatorId] = previewImages
   }
@@ -391,6 +384,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     // State
     nodeOutputs,
     nodePreviewImages,
-    latestOutput
+    latestPreview
   }
 })

src/stores/menuItemStore.ts

@@ -1,16 +1,26 @@
+import { whenever } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import type { MenuItem } from 'primevue/menuitem'
 import { ref } from 'vue'
 
 import { CORE_MENU_COMMANDS } from '@/constants/coreMenuCommands'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { ComfyExtension } from '@/types/comfy'
 
 import { useCommandStore } from './commandStore'
 
 export const useMenuItemStore = defineStore('menuItem', () => {
+  const canvasStore = useCanvasStore()
   const commandStore = useCommandStore()
   const menuItems = ref<MenuItem[]>([])
   const menuItemHasActiveStateChildren = ref<Record<string, boolean>>({})
+  const hasSeenLinear = ref(false)
+
+  whenever(
+    () => canvasStore.linearMode,
+    () => (hasSeenLinear.value = true),
+    { immediate: true, once: true }
+  )
 
   const registerMenuGroup = (path: string[], items: MenuItem[]) => {
     let currentLevel = menuItems.value
@@ -103,6 +113,7 @@ export const useMenuItemStore = defineStore('menuItem', () => {
     registerCommands,
     loadExtensionMenuCommands,
     registerCoreMenuCommands,
-    menuItemHasActiveStateChildren
+    menuItemHasActiveStateChildren,
+    hasSeenLinear
   }
 })

src/stores/nodeDefStore.ts

@@ -299,9 +299,10 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
 
   const nodeDefs = computed(() => {
     const subgraphStore = useSubgraphStore()
+    // Blueprints first for discoverability in the node library sidebar
     return [
-      ...Object.values(nodeDefsByName.value),
+      ...subgraphStore.subgraphBlueprints,
-      ...subgraphStore.subgraphBlueprints
+      ...Object.values(nodeDefsByName.value)
     ]
   })
   const nodeDataTypes = computed(() => {

src/utils/dateTimeUtil.ts

@@ -75,3 +75,17 @@ export const formatClockTime = (ts: number, locale: string): string => {
     second: '2-digit'
   }).format(d)
 }
+
+export function formatDuration(durationSeconds?: number) {
+  if (durationSeconds == undefined) return ''
+  const hours = (durationSeconds / 60 ** 2) | 0
+  const minutes = ((durationSeconds % 60 ** 2) / 60) | 0
+  const seconds = (durationSeconds % 60) | 0
+  const parts = []
+
+  if (hours > 0) parts.push(`${hours}h`)
+  if (minutes > 0) parts.push(`${minutes}m`)
+  if (seconds > 0) parts.push(`${seconds}s`)
+
+  return parts.join(' ')
+}

src/views/GraphView.vue

@@ -215,7 +215,7 @@ const onStatus = async (e: CustomEvent<StatusWsMessageStatus>) => {
   await queueStore.update()
   // Only update assets if the assets sidebar is currently open
   // When sidebar is closed, AssetsSidebarTab.vue will refresh on mount
-  if (sidebarTabStore.activeSidebarTabId === 'assets') {
+  if (sidebarTabStore.activeSidebarTabId === 'assets' || linearMode.value) {
     await assetsStore.updateHistory()
   }
 }

src/views/LinearView.vue

@@ -1,192 +1,187 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
+import {
+  breakpointsTailwind,
+  unrefElement,
+  useBreakpoints,
+  whenever
+} from '@vueuse/core'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
-import { computed } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 
-import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
-import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
-import LoginButton from '@/components/topbar/LoginButton.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-import Button from '@/components/ui/button/Button.vue'
+import TypeformPopoverButton from '@/components/ui/TypeformPopoverButton.vue'
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import {
-  isValidWidgetValue,
-  safeWidgetMapper
-} from '@/composables/graph/useGraphNodeManager'
-import { useAssetsSidebarTab } from '@/composables/sidebarTabs/useAssetsSidebarTab'
 import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { useTelemetry } from '@/platform/telemetry'
+import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
-import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
+import OutputHistory from '@/renderer/extensions/linearMode/OutputHistory.vue'
-import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
-import { app } from '@/scripts/app'
-import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import { useQueueSettingsStore } from '@/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
-import { isElectron } from '@/utils/envUtil'
 
 const nodeOutputStore = useNodeOutputStore()
-const commandStore = useCommandStore()
+const settingStore = useSettingStore()
-const nodeDatas = computed(() => {
-  function nodeToNodeData(node: LGraphNode) {
-    const mapper = safeWidgetMapper(node, new Map())
-    const widgets =
-      node.widgets?.map((widget) => {
-        const safeWidget = mapper(widget)
-        safeWidget.callback = function (value) {
-          if (!isValidWidgetValue(value)) return
-          widget.value = value ?? undefined
-          return widget.callback?.(widget.value)
-        }
-        return safeWidget
-      }) ?? []
-    //Only widgets is actually used
-    return {
-      id: `${node.id}`,
-      title: node.title,
-      type: node.type,
-      mode: 0,
-      selected: false,
-      executing: false,
-      widgets
-    }
-  }
-  return app.rootGraph.nodes
-    .filter((node) => node.mode === 0 && node.widgets?.length)
-    .map(nodeToNodeData)
-})
-const { isLoggedIn } = useCurrentUser()
-const isDesktop = isElectron()
 
-const batchCountWidget = {
+const mobileDisplay = useBreakpoints(breakpointsTailwind).smaller('md')
-  options: { step2: 1, precision: 1, min: 1, max: 100 },
-  value: 1,
-  name: t('Number of generations'),
-  type: 'number'
-}
 
-const { batchCount } = storeToRefs(useQueueSettingsStore())
+const hasPreview = ref(false)
+whenever(
+  () => nodeOutputStore.latestPreview[0],
+  () => (hasPreview.value = true)
+)
 
-//TODO: refactor out of this file.
+const selectedItem = ref<AssetItem>()
-//code length is small, but changes should propagate
+const selectedOutput = ref<ResultItemImpl>()
-async function runButtonClick(e: Event) {
+const canShowPreview = ref(true)
-  const isShiftPressed = 'shiftKey' in e && e.shiftKey
+const outputHistoryRef = useTemplateRef('outputHistoryRef')
-  const commandId = isShiftPressed
-    ? 'Comfy.QueuePromptFront'
-    : 'Comfy.QueuePrompt'
 
-  useTelemetry()?.trackUiButtonClicked({
+const topLeftRef = useTemplateRef('topLeftRef')
-    button_id: 'queue_run_linear'
+const topRightRef = useTemplateRef('topRightRef')
-  })
+const bottomLeftRef = useTemplateRef('bottomLeftRef')
-  if (batchCount.value > 1) {
+const bottomRightRef = useTemplateRef('bottomRightRef')
-    useTelemetry()?.trackUiButtonClicked({
+const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
-      button_id: 'queue_run_multiple_batches_submitted'
-    })
-  }
-  await commandStore.execute(commandId, {
-    metadata: {
-      subscribe_to_run: false,
-      trigger_source: 'button'
-    }
-  })
-}
-function openFeedback() {
-  //TODO: Does not link to a linear specific feedback section
-  window.open(
-    'https://support.comfy.org/hc/en-us/requests/new?ticket_form_id=40026345549204',
-    '_blank',
-    'noopener,noreferrer'
-  )
-}
 </script>
 <template>
-  <div class="absolute w-full h-full">
+  <div
+    class="absolute w-full h-full"
+    @wheel.capture="(e: WheelEvent) => outputHistoryRef?.onWheel(e)"
+  >
     <div class="workflow-tabs-container pointer-events-auto h-9.5 w-full">
       <div class="flex h-full items-center">
         <WorkflowTabs />
         <TopbarBadges />
       </div>
     </div>
+    <div
+      v-if="mobileDisplay"
+      class="justify-center border-border-subtle border-t overflow-y-scroll h-[calc(100%-38px)] bg-comfy-menu-bg"
+    >
+      <div class="flex flex-col text-muted-foreground">
+        <LinearPreview
+          :latent-preview="
+            canShowPreview && hasPreview
+              ? nodeOutputStore.latestPreview[0]
+              : undefined
+          "
+          :run-button-click="linearWorkflowRef?.runButtonClick"
+          :selected-item
+          :selected-output
+          mobile
+        />
+      </div>
+      <OutputHistory
+        ref="outputHistoryRef"
+        mobile
+        @update-selection="
+          ([item, output, canShow]) => {
+            selectedItem = item
+            selectedOutput = output
+            canShowPreview = canShow
+            hasPreview = false
+          }
+        "
+      />
+      <LinearControls ref="linearWorkflowRef" mobile />
+      <div class="text-base-foreground flex items-center gap-4 justify-end m-4">
+        <a
+          href="https://form.typeform.com/to/gmVqFi8l"
+          v-text="t('linearMode.beta')"
+        />
+        <TypeformPopoverButton data-tf-widget="gmVqFi8l" />
+      </div>
+    </div>
     <Splitter
+      v-else
       class="h-[calc(100%-38px)] w-full bg-comfy-menu-secondary-bg"
       :pt="{ gutter: { class: 'bg-transparent w-4 -mx-3' } }"
+      @resizestart="({ originalEvent }) => originalEvent.preventDefault()"
     >
-      <SplitterPanel :size="1" class="min-w-min bg-comfy-menu-bg">
+      <SplitterPanel
+        id="linearLeftPanel"
+        :size="1"
+        class="min-w-min outline-none"
+      >
+        <OutputHistory
+          v-if="settingStore.get('Comfy.Sidebar.Location') === 'left'"
+          ref="outputHistoryRef"
+          :scroll-reset-button-to="unrefElement(bottomLeftRef) ?? undefined"
+          @update-selection="
+            ([item, output, canShow]) => {
+              selectedItem = item
+              selectedOutput = output
+              canShowPreview = canShow
+              hasPreview = false
+            }
+          "
+        />
+        <LinearControls
+          v-else
+          ref="linearWorkflowRef"
+          :toast-to="unrefElement(bottomLeftRef) ?? undefined"
+          :notes-to="unrefElement(topLeftRef) ?? undefined"
+        />
+        <div />
+      </SplitterPanel>
+      <SplitterPanel
+        id="linearCenterPanel"
+        :size="98"
+        class="flex flex-col min-w-min gap-4 mx-2 px-10 pt-8 pb-4 relative text-muted-foreground outline-none"
+      >
+        <LinearPreview
+          :latent-preview="
+            canShowPreview && hasPreview
+              ? nodeOutputStore.latestPreview[0]
+              : undefined
+          "
+          :run-button-click="linearWorkflowRef?.runButtonClick"
+          :selected-item
+          :selected-output
+        />
+        <div ref="topLeftRef" class="absolute z-21 top-4 left-4" />
+        <div ref="topRightRef" class="absolute z-21 top-4 right-4" />
+        <div ref="bottomLeftRef" class="absolute z-20 bottom-4 left-4" />
+        <div ref="bottomRightRef" class="absolute z-20 bottom-24 right-4" />
         <div
-          class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto border-r-1 border-node-component-border"
+          class="absolute z-20 bottom-4 right-4 text-base-foreground flex items-center gap-4"
         >
-          <ExtensionSlot :extension="useAssetsSidebarTab()" />
+          <div v-text="t('linearMode.beta')" />
+          <TypeformPopoverButton
+            data-tf-widget="gmVqFi8l"
+            :align="
+              settingStore.get('Comfy.Sidebar.Location') === 'left'
+                ? 'end'
+                : 'start'
+            "
+          />
         </div>
       </SplitterPanel>
       <SplitterPanel
-        :size="98"
+        id="linearRightPanel"
-        class="flex flex-row overflow-y-auto flex-wrap min-w-min gap-4 m-4"
+        :size="1"
+        class="min-w-min outline-none"
       >
-        <img
+        <LinearControls
-          v-for="previewUrl in nodeOutputStore.latestOutput"
+          v-if="settingStore.get('Comfy.Sidebar.Location') === 'left'"
-          :key="previewUrl"
+          ref="linearWorkflowRef"
-          class="pointer-events-none object-contain flex-1 max-h-full"
+          :toast-to="unrefElement(bottomRightRef) ?? undefined"
-          :src="previewUrl"
+          :notes-to="unrefElement(topRightRef) ?? undefined"
         />
-        <img
+        <OutputHistory
-          v-if="nodeOutputStore.latestOutput.length === 0"
+          v-else
-          class="pointer-events-none object-contain flex-1 max-h-full brightness-50 opacity-10"
+          ref="outputHistoryRef"
-          src="/assets/images/comfy-logo-mono.svg"
+          :scroll-reset-button-to="unrefElement(bottomRightRef) ?? undefined"
+          @update-selection="
+            ([item, output, canShow]) => {
+              selectedItem = item
+              selectedOutput = output
+              canShowPreview = canShow
+              hasPreview = false
+            }
+          "
         />
-      </SplitterPanel>
+        <div />
-      <SplitterPanel :size="1" class="flex flex-col gap-1 p-1 min-w-min">
-        <div
-          class="actionbar-container flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] p-2 gap-2 bg-comfy-menu-bg justify-end"
-        >
-          <Button variant="secondary" @click="openFeedback">
-            {{ t('g.feedback') }}
-          </Button>
-          <Button
-            variant="secondary"
-            class="min-w-max"
-            @click="useCanvasStore().linearMode = false"
-          >
-            {{ t('linearMode.openWorkflow') }}
-            <i class="icon-[comfy--workflow]" />
-          </Button>
-          <Button
-            variant="inverted"
-            @click="useWorkflowService().exportWorkflow('workflow', 'workflow')"
-          >
-            {{ t('linearMode.share') }}
-          </Button>
-          <CurrentUserButton v-if="isLoggedIn" />
-          <LoginButton v-else-if="isDesktop" />
-        </div>
-        <div
-          class="rounded-lg border p-2 gap-2 h-full border-[var(--interface-stroke)] bg-comfy-menu-bg flex flex-col"
-        >
-          <div
-            class="grow-1 flex justify-start flex-col overflow-y-auto contain-size *:max-h-100"
-          >
-            <NodeWidgets
-              v-for="nodeData of nodeDatas"
-              :key="nodeData.id"
-              :node-data
-              class="border-b-1 border-node-component-border pt-1 pb-2 last:border-none"
-            />
-          </div>
-          <div class="p-4 pb-0 border-t border-node-component-border">
-            <WidgetInputNumberInput
-              v-model="batchCount"
-              :widget="batchCountWidget"
-              class="*:[.min-w-56]:basis-0"
-            />
-            <Button class="w-full mt-4" @click="runButtonClick">
-              <i class="icon-[lucide--play]" />
-              {{ t('menu.run') }}
-            </Button>
-          </div>
-        </div>
       </SplitterPanel>
     </Splitter>
   </div>

vite.config.mts

@@ -446,6 +446,9 @@ export default defineConfig({
           if (id.includes('/vue') || id.includes('pinia')) {
             return 'vendor-vue'
           }
+          if (id.includes('reka-ui')) {
+            return 'vendor-reka-ui'
+          }
 
           return 'vendor-other'
         }