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>

src/components/sidebar/SideToolbar.vue

@@ -44,7 +44,9 @@
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
         <SidebarSettingsButton :is-small="isSmall" />
-        <ModeToggle v-if="showLinearToggle" />
+        <ModeToggle
+          v-if="menuItemStore.hasSeenLinear || flags.linearToggleEnabled"
+        />
       </div>
     </div>
     <HelpCenterPopups :is-small="isSmall" />
@@ -52,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver, whenever } from '@vueuse/core'
+import { useResizeObserver } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
@@ -68,6 +70,7 @@ 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'
@@ -83,15 +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 showLinearToggle = ref(useFeatureFlags().flags.linearToggleEnabled)
-whenever(
-  () => canvasStore.linearMode,
-  () => (showLinearToggle.value = true)
-)
+const { flags } = useFeatureFlags()
 
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'

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,17 +7,8 @@
     @mouseleave="handleMouseLeave"
     @click="handleClick"
   >
-    <Button
-      v-if="isActiveTab"
-      class="context-menu-button -mx-1 w-auto px-1 py-0"
-      variant="muted-textonly"
-      size="icon-sm"
-      @click.stop="handleMenuClick"
-    >
-      <i class="pi pi-bars" />
-    </Button>
     <i
-      v-else-if="workflowOption.workflow.activeState?.extra?.linearMode"
+      v-if="workflowOption.workflow.activeState?.extra?.linearMode"
       class="icon-[lucide--panels-top-left] bg-primary-background"
     />
     <span class="workflow-label inline-block max-w-[150px] truncate text-sm">
@@ -47,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'
 
@@ -75,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'
@@ -147,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)
@@ -166,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/ZoomPane.vue

@@ -47,7 +47,7 @@ const transform = computed(() => {
 <template>
   <div
     ref="zoomPane"
-    class="contain-size flex place-content-center"
+    class="contain-size place-content-center"
     @wheel="handleWheel"
     @pointerdown.prevent="handleDown"
     @pointermove="handleMove"

src/composables/node/useNodePricing.ts

@@ -220,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],
@@ -244,13 +255,15 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
     }
   }
 
-  const modelKey = model.includes('seedance-1-0-pro-fast')
-    ? 'seedance-1-0-pro-fast'
-    : model.includes('seedance-1-0-pro')
-      ? 'seedance-1-0-pro'
-      : model.includes('seedance-1-0-lite')
-        ? 'seedance-1-0-lite'
-        : ''
+  const modelKey = model.includes('seedance-1-5-pro')
+    ? 'seedance-1-5-pro'
+    : model.includes('seedance-1-0-pro-fast')
+      ? 'seedance-1-0-pro-fast'
+      : model.includes('seedance-1-0-pro')
+        ? 'seedance-1-0-pro'
+        : model.includes('seedance-1-0-lite')
+          ? 'seedance-1-0-lite'
+          : ''
 
   const resKey = resolution.includes('1080')
     ? '1080p'
@@ -266,8 +279,10 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
 
   const [min10s, max10s] = baseRange
   const scale = seconds / 10
-  const minCost = min10s * scale
-  const maxCost = max10s * scale
+  const audioMultiplier =
+    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)
@@ -2623,9 +2638,24 @@ export const useNodePricing = () => {
         'sequential_image_generation',
         'max_images'
       ],
-      ByteDanceTextToVideoNode: ['model', 'duration', 'resolution'],
-      ByteDanceImageToVideoNode: ['model', 'duration', 'resolution'],
-      ByteDanceFirstLastFrameNode: ['model', 'duration', 'resolution'],
+      ByteDanceTextToVideoNode: [
+        'model',
+        '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,7 +1234,7 @@ export function useCoreCommands(): ComfyCommand[] {
     {
       id: 'Comfy.ToggleLinear',
       icon: 'pi pi-database',
-      label: 'toggle linear mode',
+      label: 'Toggle Simple Mode',
       function: () => {
         const newMode = !canvasStore.linearMode
         app.rootGraph.extra.linearMode = newMode

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

@@ -1184,7 +1184,7 @@
     "Experimental: Enable AssetAPI": "Experimental: Enable AssetAPI",
     "Canvas Performance": "Canvas Performance",
     "Help Center": "Help Center",
-    "toggle linear mode": "toggle simple 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",
@@ -2475,9 +2475,9 @@
   },
   "linearMode": {
     "linearMode": "Simple Mode",
-    "beta": "Beta - Give Feedback",
+    "beta": "Simple Mode in Beta - Feedback",
     "graphMode": "Graph Mode",
-    "dragAndDropImage": "Drag and drop an image",
+    "dragAndDropImage": "Click to browse or drag an image",
     "runCount": "Run count:",
     "rerun": "Rerun",
     "reuseParameters": "Reuse Parameters",
@@ -2536,4 +2536,4 @@
       "failed": "Failed"
     }
   }
-}
+}

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/renderer/extensions/linearMode/DropZone.vue

@@ -7,8 +7,9 @@ defineProps<{
   onDragOver?: (e: DragEvent) => boolean
   onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
   dropIndicator?: {
-    label?: string
     iconClass?: string
+    imageUrl?: string
+    label?: string
     onClick?: (e: MouseEvent) => void
   }
 }>()
@@ -44,8 +45,15 @@ const canAcceptDrop = ref(false)
       "
       @click.prevent="dropIndicator?.onClick?.($event)"
     >
-      <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
-      <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
+      <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 />

src/renderer/extensions/linearMode/ImagePreview.vue

@@ -18,6 +18,7 @@ const height = ref('')
       ref="imageRef"
       :src
       v-bind="slotProps"
+      class="h-full object-contain w-full"
       @load="
         () => {
           if (!imageRef) return

src/renderer/extensions/linearMode/LinearControls.vue

@@ -18,11 +18,13 @@ 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()
@@ -49,19 +51,33 @@ useEventListener(
   () => (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 =
-    node.type !== 'LoadImage'
-      ? undefined
-      : {
-          iconClass: 'icon-[lucide--image]',
-          label: t('linearMode.dragAndDropImage')
-        }
+  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,
@@ -69,13 +85,18 @@ function nodeToNodeData(node: LGraphNode) {
   }
 }
 const partitionedNodes = computed(() => {
-  return partition(
+  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> = {
@@ -97,9 +118,6 @@ async function runButtonClick(e: Event) {
       ? 'Comfy.QueuePromptFront'
       : 'Comfy.QueuePrompt'
 
-    useTelemetry()?.trackUiButtonClicked({
-      button_id: 'queue_run_linear'
-    })
     if (batchCount.value > 1) {
       useTelemetry()?.trackUiButtonClicked({
         button_id: 'queue_run_multiple_batches_submitted'
@@ -108,7 +126,7 @@ async function runButtonClick(e: Event) {
     await commandStore.execute(commandId, {
       metadata: {
         subscribe_to_run: false,
-        trigger_source: 'button'
+        trigger_source: 'linear'
       }
     })
   } finally {
@@ -165,7 +183,7 @@ defineExpose({ runButtonClick })
       <Popover
         v-if="partitionedNodes[0].length"
         align="start"
-        class="overflow-y-auto overflow-x-clip max-h-(--reka-popover-content-available-height)"
+        class="overflow-y-auto overflow-x-clip max-h-(--reka-popover-content-available-height) z-100"
         :reference="notesTo"
         side="left"
         :to="notesTo"
@@ -187,7 +205,7 @@ defineExpose({ runButtonClick })
             <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"
+              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg max-w-100"
             />
           </template>
         </div>
@@ -217,7 +235,13 @@ defineExpose({ runButtonClick })
           >
             <NodeWidgets
               :node-data
-              class="py-3 gap-y-4 **:[.col-span-2]:grid-cols-1 text-sm **:[.p-floatlabel]:h-35 rounded-lg"
+              :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>

src/renderer/extensions/linearMode/LinearPreview.vue

@@ -2,7 +2,6 @@
 import { computed } from 'vue'
 
 import { downloadFile } from '@/base/common/downloadUtil'
-import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { d, t } from '@/i18n'
@@ -12,6 +11,7 @@ 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,
@@ -159,7 +159,7 @@ async function rerun(e: Event) {
   <VideoPreview
     v-else-if="getMediaType(selectedOutput) === 'video'"
     :src="selectedOutput!.url"
-    class="object-contain flex-1 contain-size"
+    class="object-contain flex-1 md:contain-size"
   />
   <audio
     v-else-if="getMediaType(selectedOutput) === 'audio'"
@@ -172,13 +172,13 @@ async function rerun(e: Event) {
     class="w-full max-w-128 m-auto my-12 overflow-y-auto"
     v-text="selectedOutput!.url"
   />
-  <Load3dViewerContent
+  <Preview3d
     v-else-if="getMediaType(selectedOutput) === '3d'"
     :model-url="selectedOutput!.url"
   />
   <img
     v-else
-    class="pointer-events-none object-contain flex-1 max-h-full brightness-50 opacity-10"
+    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

@@ -217,7 +217,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
       <ModeToggle />
     </div>
     <div class="border-border-subtle md:border-r" />
-    <WorkflowsSidebarTab v-if="displayWorkflows" class="min-w-50" />
+    <WorkflowsSidebarTab v-if="displayWorkflows" class="min-w-50 grow-1" />
     <article
       v-else
       ref="outputsRef"
@@ -247,18 +247,16 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
           "
         />
       </section>
-      <section
-        v-for="(item, index) in outputs.media.value"
-        :key="index"
-        data-testid="linear-job"
-        class="py-3 not-md:h-24 border-border-subtle flex md:flex-col md:w-full px-1 first:border-t-0 first:border-l-0 md:border-t-2 not-md:border-l-2"
-      >
+      <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',
+                'p-1 rounded-lg aspect-square object-cover not-md:h-20 md:w-full',
                 index === selectedIndex[0] &&
                   key === selectedIndex[1] &&
                   'border-2'
@@ -277,6 +275,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
                   'border-2'
               )
             "
+            @click="selectedIndex = [index, key]"
           >
             <i
               :class="
@@ -285,7 +284,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
             />
           </div>
         </template>
-      </section>
+      </template>
     </article>
   </div>
   <Teleport

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/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">
-        <span class="min-w-20 text-xs">
+      <div class="flex shrink-0 items-center gap-1">
+        <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) {
-      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
-          this.value = validatedFilename.data
-          node.onWidgetChanged?.(
-            widget.name,
-            validatedFilename.data,
-            oldValue,
-            widget
-          )
-        }
-      })
-    }
+    () => undefined,
+    options
   )
 
   return widget

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/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/views/LinearView.vue

@@ -44,7 +44,10 @@ const bottomRightRef = useTemplateRef('bottomRightRef')
 const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
 </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 />
@@ -82,7 +85,10 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       />
       <LinearControls ref="linearWorkflowRef" mobile />
       <div class="text-base-foreground flex items-center gap-4 justify-end m-4">
-        <div v-text="t('linearMode.beta')" />
+        <a
+          href="https://form.typeform.com/to/gmVqFi8l"
+          v-text="t('linearMode.beta')"
+        />
         <TypeformPopoverButton data-tf-widget="gmVqFi8l" />
       </div>
     </div>
@@ -122,7 +128,6 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
         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"
-        @wheel.capture="(e: WheelEvent) => outputHistoryRef?.onWheel(e)"
       >
         <LinearPreview
           :latent-preview="
@@ -134,8 +139,8 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
           :selected-item
           :selected-output
         />
-        <div ref="topLeftRef" class="absolute z-20 top-4 left-4" />
-        <div ref="topRightRef" class="absolute z-20 top-4 right-4" />
+        <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