From aa8bdde4f106561f3f66321224235a103464e3f6 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Wed, 12 Nov 2025 12:38:00 -0800
Subject: [PATCH 1/8] Initial linear mode implementation

---
 .../LiteGraphCanvasSplitterOverlay.vue        |  4 +-
 src/views/GraphView.vue                       |  5 ++
 src/views/LinearView.vue                      | 70 +++++++++++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/views/LinearView.vue

diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 1bb9e89c75..eddcea1afb 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -21,7 +21,6 @@
         state-storage="local"
       >
         <SplitterPanel
-          v-if="sidebarLocation === 'left'"
           class="side-bar-panel pointer-events-auto"
           :min-size="10"
           :size="20"
@@ -36,6 +35,7 @@
             v-if="sidebarPanelVisible && sidebarLocation === 'left'"
             name="side-bar-panel"
           />
+          <slot v-else name="off-side-panel" />
         </SplitterPanel>
 
         <SplitterPanel :size="80" class="flex flex-col">
@@ -64,7 +64,6 @@
         </SplitterPanel>
 
         <SplitterPanel
-          v-if="sidebarLocation === 'right'"
           class="side-bar-panel pointer-events-auto"
           :min-size="10"
           :size="20"
@@ -79,6 +78,7 @@
             v-if="sidebarPanelVisible && sidebarLocation === 'right'"
             name="side-bar-panel"
           />
+          <slot v-else name="off-side-panel" />
         </SplitterPanel>
       </Splitter>
     </div>
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index b7ffa19e14..7ead4f609a 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -5,12 +5,14 @@
     <div id="comfyui-body-left" class="comfyui-body-left" />
     <div id="comfyui-body-right" class="comfyui-body-right" />
     <div
+      v-show="!linearMode"
       id="graph-canvas-container"
       ref="graphCanvasContainerRef"
       class="graph-canvas-container"
     >
       <GraphCanvas @ready="onGraphReady" />
     </div>
+    <LinearView v-if="linearMode" />
   </div>
 
   <GlobalToast />
@@ -76,6 +78,7 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron } from '@/utils/envUtil'
+import LinearView from '@/views/LinearView.vue'
 
 setupAutoQueueHandler()
 useProgressFavicon()
@@ -93,6 +96,8 @@ const queueStore = useQueueStore()
 const assetsStore = useAssetsStore()
 const versionCompatibilityStore = useVersionCompatibilityStore()
 const graphCanvasContainerRef = ref<HTMLDivElement | null>(null)
+//@ts-expect-error temporary duck violence
+const linearMode = (app.linearMode = ref<boolean>(false))
 
 const telemetry = useTelemetry()
 const firebaseAuthStore = useFirebaseAuthStore()
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
new file mode 100644
index 0000000000..c1e4c5ec07
--- /dev/null
+++ b/src/views/LinearView.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import Splitter from 'primevue/splitter'
+import SplitterPanel from 'primevue/splitterpanel'
+import { computed, ref } from 'vue'
+
+import ComfyRunButton from '@/components/actionbar/ComfyActionbar.vue'
+import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
+import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
+import { api } from '@/scripts/api'
+
+const vueNodeLifecycle = useVueNodeLifecycle()
+
+const nodeData = computed(
+  () => vueNodeLifecycle.nodeManager.value?.vueNodeData?.values().next().value
+)
+//Always display most recently generated output?
+//- trace preview store?
+//- add listener for b_preview?
+//- Copy/pasta prior art in QueueSidebarTab?
+//  - Remove this doubled logic for linear mode?
+const previewUrl = ref(
+  '/api/view?filename=ComfyUI_temp_vjqpu_00002_.png&type=temp'
+)
+
+api.addEventListener('b_preview', async ({ detail }: CustomEvent) => {
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value)
+  }
+  previewUrl.value = URL.createObjectURL(detail)
+})
+/*
+  <div class="flex flex-col gap-4 py-4 bg-component-node-background">
+    <!--TODO Fix padding-->
+    <NodeWidgets :node-data/>
+    <!--TODO make new. Don't want drag/drop-->
+    <div class="border-t-1 border-node-component-border pt-4">
+      <ComfyRunButton/></div>
+  </div>
+*/
+</script>
+<template>
+  <Splitter>
+    <SplitterPanel :size="10">
+      <div
+        class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto"
+      >
+        <ExtensionSlot :extension="useQueueSidebarTab()" />
+      </div>
+    </SplitterPanel>
+    <SplitterPanel :size="60">
+      <img
+        class="m-auto h-full object-contain w-full pointer-events-none"
+        :src="previewUrl"
+      />
+    </SplitterPanel>
+    <SplitterPanel
+      :size="30"
+      class="flex flex-col gap-4 py-4 bg-component-node-background"
+    >
+      <!--TODO Fix padding-->
+      <NodeWidgets :node-data />
+      <!--TODO make new. Don't want drag/drop-->
+      <div class="border-t-1 border-node-component-border pt-4">
+        <ComfyRunButton />
+      </div>
+    </SplitterPanel>
+  </Splitter>
+</template>

From 1bbfafdc8ad938631d8a1b42f2e78371893f491b Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Wed, 12 Nov 2025 20:09:53 -0800
Subject: [PATCH 2/8] Preview interleaving, add keybind

---
 src/composables/useCoreCommands.ts |  7 +++++++
 src/stores/imagePreviewStore.ts    | 12 +++++++++++-
 src/views/LinearView.vue           | 18 +++++++-----------
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index f691ff7f1e..8d55801200 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1220,6 +1220,13 @@ export function useCoreCommands(): ComfyCommand[] {
         await settingStore.set('Comfy.Assets.UseAssetAPI', !current)
         await useWorkflowService().reloadCurrentWorkflow() // ensure changes take effect immediately
       }
+    },
+    {
+      id: 'Comfy.ToggleLinear',
+      icon: 'pi pi-database',
+      label: 'toggle linear mode',
+      //@ts-expect-error temporary duck violence
+      function: () => (app.linearMode.value = !app.linearMode.value)
     }
   ]
 
diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts
index 300c532c97..ee8ae759bd 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -40,6 +40,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   const { nodeIdToNodeLocatorId, nodeToNodeLocatorId } = useWorkflowStore()
   const { executionIdToNodeLocatorId } = useExecutionStore()
   const scheduledRevoke: Record<NodeLocatorId, { stop: () => void }> = {}
+  const latestOutput = ref<string[]>([])
 
   function scheduleRevoke(locator: NodeLocatorId, cb: () => void) {
     scheduledRevoke[locator]?.stop()
@@ -146,6 +147,13 @@ 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
   }
@@ -213,6 +221,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
       scheduledRevoke[nodeLocatorId].stop()
       delete scheduledRevoke[nodeLocatorId]
     }
+    latestOutput.value = previewImages
     app.nodePreviewImages[nodeLocatorId] = previewImages
     nodePreviewImages.value[nodeLocatorId] = previewImages
   }
@@ -381,6 +390,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
 
     // State
     nodeOutputs,
-    nodePreviewImages
+    nodePreviewImages,
+    latestOutput
   }
 })
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index c1e4c5ec07..a2e18a50f1 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 import ComfyRunButton from '@/components/actionbar/ComfyActionbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
-import { api } from '@/scripts/api'
+//import { useQueueStore } from '@/stores/queueStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 
 const vueNodeLifecycle = useVueNodeLifecycle()
+//const queueStore = useQueueStore()
+const nodeOutputStore = useNodeOutputStore()
 
 const nodeData = computed(
   () => vueNodeLifecycle.nodeManager.value?.vueNodeData?.values().next().value
@@ -20,16 +23,7 @@ const nodeData = computed(
 //- add listener for b_preview?
 //- Copy/pasta prior art in QueueSidebarTab?
 //  - Remove this doubled logic for linear mode?
-const previewUrl = ref(
-  '/api/view?filename=ComfyUI_temp_vjqpu_00002_.png&type=temp'
-)
 
-api.addEventListener('b_preview', async ({ detail }: CustomEvent) => {
-  if (previewUrl.value) {
-    URL.revokeObjectURL(previewUrl.value)
-  }
-  previewUrl.value = URL.createObjectURL(detail)
-})
 /*
   <div class="flex flex-col gap-4 py-4 bg-component-node-background">
     <!--TODO Fix padding-->
@@ -51,6 +45,8 @@ api.addEventListener('b_preview', async ({ detail }: CustomEvent) => {
     </SplitterPanel>
     <SplitterPanel :size="60">
       <img
+        v-for="previewUrl in nodeOutputStore.latestOutput"
+        :key="previewUrl"
         class="m-auto h-full object-contain w-full pointer-events-none"
         :src="previewUrl"
       />

From d82d3786b3da2943673e49ccdf8d8bd626149cf7 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Thu, 13 Nov 2025 13:07:56 -0800
Subject: [PATCH 3/8] Revert splitter changes

Since linearview is no longer built on top of the canvassplitteroverlay,
attempted changes to allow for an off-side-panel are no longer required
---
 src/components/LiteGraphCanvasSplitterOverlay.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index eddcea1afb..1bb9e89c75 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -21,6 +21,7 @@
         state-storage="local"
       >
         <SplitterPanel
+          v-if="sidebarLocation === 'left'"
           class="side-bar-panel pointer-events-auto"
           :min-size="10"
           :size="20"
@@ -35,7 +36,6 @@
             v-if="sidebarPanelVisible && sidebarLocation === 'left'"
             name="side-bar-panel"
           />
-          <slot v-else name="off-side-panel" />
         </SplitterPanel>
 
         <SplitterPanel :size="80" class="flex flex-col">
@@ -64,6 +64,7 @@
         </SplitterPanel>
 
         <SplitterPanel
+          v-if="sidebarLocation === 'right'"
           class="side-bar-panel pointer-events-auto"
           :min-size="10"
           :size="20"
@@ -78,7 +79,6 @@
             v-if="sidebarPanelVisible && sidebarLocation === 'right'"
             name="side-bar-panel"
           />
-          <slot v-else name="off-side-panel" />
         </SplitterPanel>
       </Splitter>
     </div>

From fd8b22f1ae5298e7571983d0643bcef21938d4a7 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Thu, 13 Nov 2025 17:34:47 -0800
Subject: [PATCH 4/8] WIP run button re-imp

---
 src/views/LinearView.vue | 36 +++++++++++++++---------------------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index a2e18a50f1..25a435d1ea 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -1,38 +1,31 @@
 <script setup lang="ts">
+import Button from 'primevue/button'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
-import ComfyRunButton from '@/components/actionbar/ComfyActionbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
-import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
+import { t } from '@/i18n'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
+import WidgetInputNumber from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
+import { app } from '@/scripts/app'
 //import { useQueueStore } from '@/stores/queueStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 
-const vueNodeLifecycle = useVueNodeLifecycle()
+const { vueNodeData } = useGraphNodeManager(app.graph)
 //const queueStore = useQueueStore()
 const nodeOutputStore = useNodeOutputStore()
 
-const nodeData = computed(
-  () => vueNodeLifecycle.nodeManager.value?.vueNodeData?.values().next().value
-)
-//Always display most recently generated output?
-//- trace preview store?
-//- add listener for b_preview?
-//- Copy/pasta prior art in QueueSidebarTab?
-//  - Remove this doubled logic for linear mode?
+const batchCountWidget = {
+  options: { step2: 1, precision: 1, min: 1, max: 100 },
+  value: 1,
+  name: t('Number of generations'),
+  type: 'number'
+}
 
-/*
-  <div class="flex flex-col gap-4 py-4 bg-component-node-background">
-    <!--TODO Fix padding-->
-    <NodeWidgets :node-data/>
-    <!--TODO make new. Don't want drag/drop-->
-    <div class="border-t-1 border-node-component-border pt-4">
-      <ComfyRunButton/></div>
-  </div>
-*/
+const nodeData = computed(() => vueNodeData?.values().next().value)
 </script>
 <template>
   <Splitter>
@@ -59,7 +52,8 @@ const nodeData = computed(
       <NodeWidgets :node-data />
       <!--TODO make new. Don't want drag/drop-->
       <div class="border-t-1 border-node-component-border pt-4">
-        <ComfyRunButton />
+        <WidgetInputNumber :widget="batchCountWidget" />
+        <Button />
       </div>
     </SplitterPanel>
   </Splitter>

From 3b2ded3a6e3602a4101ce33fa300cd86a4ed452c Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Thu, 13 Nov 2025 21:52:40 -0800
Subject: [PATCH 5/8] Functional run button, iteration on sizing

---
 src/views/LinearView.vue | 76 +++++++++++++++++++++++++++++++---------
 1 file changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 25a435d1ea..a362ef0508 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
@@ -8,15 +9,20 @@ import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
 import { t } from '@/i18n'
+import { useTelemetry } from '@/platform/telemetry'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
-import WidgetInputNumber from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
+import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
 import { app } from '@/scripts/app'
-//import { useQueueStore } from '@/stores/queueStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+//import { useQueueStore } from '@/stores/queueStore'
+import { useQueueSettingsStore } from '@/stores/queueStore'
 
-const { vueNodeData } = useGraphNodeManager(app.graph)
 //const queueStore = useQueueStore()
+const { vueNodeData } = useGraphNodeManager(app.graph)
 const nodeOutputStore = useNodeOutputStore()
+const commandStore = useCommandStore()
+const nodeData = computed(() => vueNodeData?.values().next().value)
 
 const batchCountWidget = {
   options: { step2: 1, precision: 1, min: 1, max: 100 },
@@ -25,36 +31,74 @@ const batchCountWidget = {
   type: 'number'
 }
 
-const nodeData = computed(() => vueNodeData?.values().next().value)
+const { batchCount } = storeToRefs(useQueueSettingsStore())
+
+//TODO: refactor out of this file.
+//code length is small, but changes should propogate
+async function runButtonClick(e: Event) {
+  const isShiftPressed = 'shiftKey' in e && e.shiftKey
+  const commandId = isShiftPressed
+    ? 'Comfy.QueuePromptFront'
+    : 'Comfy.QueuePrompt'
+
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'queue_run_linear'
+  })
+  if (batchCount.value > 1) {
+    useTelemetry()?.trackUiButtonClicked({
+      button_id: 'queue_run_multiple_batches_submitted'
+    })
+  }
+  await commandStore.execute(commandId, {
+    metadata: {
+      subscribe_to_run: false,
+      trigger_source: 'button'
+    }
+  })
+}
 </script>
 <template>
-  <Splitter>
-    <SplitterPanel :size="10">
+  <Splitter class="absolute h-full w-full">
+    <SplitterPanel :size="1" class="min-w-min">
       <div
         class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto"
       >
         <ExtensionSlot :extension="useQueueSidebarTab()" />
       </div>
     </SplitterPanel>
-    <SplitterPanel :size="60">
+    <SplitterPanel
+      :size="98"
+      class="flex flex-row overflow-y-auto flex-wrap min-w-min gap-4"
+    >
       <img
         v-for="previewUrl in nodeOutputStore.latestOutput"
         :key="previewUrl"
-        class="m-auto h-full object-contain w-full pointer-events-none"
+        class="pointer-events-none object-contain flex-1"
         :src="previewUrl"
       />
     </SplitterPanel>
     <SplitterPanel
-      :size="30"
-      class="flex flex-col gap-4 py-4 bg-component-node-background"
+      :size="1"
+      class="flex flex-col gap-4 p-4 bg-component-node-background min-w-min"
     >
-      <!--TODO Fix padding-->
-      <NodeWidgets :node-data />
-      <!--TODO make new. Don't want drag/drop-->
-      <div class="border-t-1 border-node-component-border pt-4">
-        <WidgetInputNumber :widget="batchCountWidget" />
-        <Button />
+      <NodeWidgets :node-data class="overflow-y-auto *:max-h-60" />
+      <div class="border-t-1 border-node-component-border pt-4 mx-4">
+        <WidgetInputNumberInput
+          v-model="batchCount"
+          :widget="batchCountWidget"
+        />
+        <Button
+          :label="t('menu.run')"
+          class="w-full mt-4"
+          icon="icon-[lucide--play]"
+          @click="runButtonClick"
+        />
       </div>
     </SplitterPanel>
   </Splitter>
 </template>
+<style scoped>
+textarea {
+  max-height: 200px;
+}
+</style>

From dec72e4b32e153f57fac88cacf7fe55299912c8f Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Thu, 13 Nov 2025 22:08:17 -0800
Subject: [PATCH 6/8] Prevent single images scaling off screen

---
 src/views/LinearView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index a362ef0508..edca27b71e 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -73,7 +73,7 @@ async function runButtonClick(e: Event) {
       <img
         v-for="previewUrl in nodeOutputStore.latestOutput"
         :key="previewUrl"
-        class="pointer-events-none object-contain flex-1"
+        class="pointer-events-none object-contain flex-1 max-h-full"
         :src="previewUrl"
       />
     </SplitterPanel>

From c7ef637d16afd6deeac471e79b0d26dbf9a16354 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Thu, 13 Nov 2025 22:29:24 -0800
Subject: [PATCH 7/8] Auto-enter linear mode on workflow load

Justice for ducks
---
 src/composables/useCoreCommands.ts                     | 3 +--
 src/platform/workflow/core/services/workflowService.ts | 2 ++
 src/renderer/core/canvas/canvasStore.ts                | 3 +++
 src/views/GraphView.vue                                | 5 +++--
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 8d55801200..25fa740110 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1225,8 +1225,7 @@ export function useCoreCommands(): ComfyCommand[] {
       id: 'Comfy.ToggleLinear',
       icon: 'pi pi-database',
       label: 'toggle linear mode',
-      //@ts-expect-error temporary duck violence
-      function: () => (app.linearMode.value = !app.linearMode.value)
+      function: () => (canvasStore.linearMode = !canvasStore.linearMode)
     }
   ]
 
diff --git a/src/platform/workflow/core/services/workflowService.ts b/src/platform/workflow/core/services/workflowService.ts
index 2eba1345ba..59b1b6faf4 100644
--- a/src/platform/workflow/core/services/workflowService.ts
+++ b/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'
@@ -332,6 +333,7 @@ export const useWorkflowService = () => {
     const loadedWorkflow = await workflowStore.openWorkflow(value)
     loadedWorkflow.changeTracker.reset(workflowData)
     loadedWorkflow.changeTracker.restore()
+    useCanvasStore().linearMode = !!loadedWorkflow.activeState.extra?.linearMode
   }
 
   /**
diff --git a/src/renderer/core/canvas/canvasStore.ts b/src/renderer/core/canvas/canvasStore.ts
index 42740ec22c..bfc54c1db5 100644
--- a/src/renderer/core/canvas/canvasStore.ts
+++ b/src/renderer/core/canvas/canvasStore.ts
@@ -40,6 +40,8 @@ export const useCanvasStore = defineStore('canvas', () => {
   // Reactive scale percentage that syncs with app.canvas.ds.scale
   const appScalePercentage = ref(100)
 
+  const linearMode = ref(false)
+
   // Set up scale synchronization when canvas is available
   let originalOnChanged: ((scale: number, offset: Point) => void) | undefined =
     undefined
@@ -138,6 +140,7 @@ export const useCanvasStore = defineStore('canvas', () => {
     groupSelected,
     rerouteSelected,
     appScalePercentage,
+    linearMode,
     updateSelectedItems,
     getCanvas,
     setAppZoomFromPercentage,
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 7ead4f609a..8415150562 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -24,6 +24,7 @@
 
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import {
@@ -56,6 +57,7 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
 import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
 import { useTemplateUrlLoader } from '@/platform/workflow/templates/composables/useTemplateUrlLoader'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
@@ -96,8 +98,7 @@ const queueStore = useQueueStore()
 const assetsStore = useAssetsStore()
 const versionCompatibilityStore = useVersionCompatibilityStore()
 const graphCanvasContainerRef = ref<HTMLDivElement | null>(null)
-//@ts-expect-error temporary duck violence
-const linearMode = (app.linearMode = ref<boolean>(false))
+const { linearMode } = storeToRefs(useCanvasStore())
 
 const telemetry = useTelemetry()
 const firebaseAuthStore = useFirebaseAuthStore()

From c4efa20f2fffc055728ba5c13d2a872d8c9eb306 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Fri, 14 Nov 2025 19:19:16 -0800
Subject: [PATCH 8/8] Add placeholder buttons, styling tweaks

---
 src/views/LinearView.vue | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index edca27b71e..edc8330ef6 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -6,6 +6,9 @@ import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
+import LoginButton from '@/components/topbar/LoginButton.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
 import { t } from '@/i18n'
@@ -17,12 +20,15 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 //import { useQueueStore } from '@/stores/queueStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
+import { isElectron } from '@/utils/envUtil'
 
 //const queueStore = useQueueStore()
 const { vueNodeData } = useGraphNodeManager(app.graph)
 const nodeOutputStore = useNodeOutputStore()
 const commandStore = useCommandStore()
 const nodeData = computed(() => vueNodeData?.values().next().value)
+const { isLoggedIn } = useCurrentUser()
+const isDesktop = isElectron()
 
 const batchCountWidget = {
   options: { step2: 1, precision: 1, min: 1, max: 100 },
@@ -59,7 +65,7 @@ async function runButtonClick(e: Event) {
 </script>
 <template>
   <Splitter class="absolute h-full w-full">
-    <SplitterPanel :size="1" class="min-w-min">
+    <SplitterPanel :size="1" class="min-w-min bg-comfy-menu-bg">
       <div
         class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto"
       >
@@ -79,8 +85,23 @@ async function runButtonClick(e: Event) {
     </SplitterPanel>
     <SplitterPanel
       :size="1"
-      class="flex flex-col gap-4 p-4 bg-component-node-background min-w-min"
+      class="flex flex-col gap-4 p-4 bg-comfy-menu-bg min-w-min"
     >
+      <div
+        class="actionbar-container flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2 gap-2"
+      >
+        <Button label="Feedback" severity="secondary" />
+        <Button
+          label="Open Workflow"
+          severity="secondary"
+          class="min-w-max"
+          icon="icon-[comfy--workflow]"
+          icon-pos="right"
+        />
+        <Button label="Share" severity="contrast" />
+        <CurrentUserButton v-if="isLoggedIn" />
+        <LoginButton v-else-if="isDesktop" />
+      </div>
       <NodeWidgets :node-data class="overflow-y-auto *:max-h-60" />
       <div class="border-t-1 border-node-component-border pt-4 mx-4">
         <WidgetInputNumberInput
@@ -97,8 +118,3 @@ async function runButtonClick(e: Event) {
     </SplitterPanel>
   </Splitter>
 </template>
-<style scoped>
-textarea {
-  max-height: 200px;
-}
-</style>