From b3a5317500ad8401182deef95e2889350c38524a Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Mon, 23 Feb 2026 18:48:07 +0000
Subject: [PATCH] App mode - builder toolbar - 6 (#9029)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

A toolbar for builder mode, hides various UI elements when in builder
mode

## Screenshots (if applicable)

Toolbar
<img width="706" height="166" alt="image"
src="https://github.com/user-attachments/assets/1f0b08b5-1661-4ed5-96bb-feecc73ca701"
/>

With disabled save and output required popover
<img width="711" height="299" alt="image"
src="https://github.com/user-attachments/assets/4a93aaf8-d850-4afe-ab9f-4abd44a25420"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9029-App-mode-builder-toolbar-6-30d6d73d365081e3aef5c90033ba347d)
by [Unito](https://www.unito.io)
---
 packages/design-system/src/css/style.css      |  22 ++++
 src/components/builder/BuilderToolbar.vue     | 105 ++++++++++++++++++
 .../builder/ConnectOutputPopover.vue          |  78 +++++++++++++
 src/components/builder/StepBadge.vue          |  22 ++++
 src/components/builder/StepLabel.vue          |  20 ++++
 src/components/builder/types.ts               |   6 +
 src/components/graph/GraphCanvas.vue          |  22 +++-
 src/locales/en/main.json                      |  13 +++
 src/stores/appModeStore.ts                    |   2 +-
 src/views/GraphView.vue                       |   4 +
 src/views/LinearView.vue                      |   6 +-
 11 files changed, 291 insertions(+), 9 deletions(-)
 create mode 100644 src/components/builder/BuilderToolbar.vue
 create mode 100644 src/components/builder/ConnectOutputPopover.vue
 create mode 100644 src/components/builder/StepBadge.vue
 create mode 100644 src/components/builder/StepLabel.vue
 create mode 100644 src/components/builder/types.ts

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 28959224a..de245dd3c 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -99,6 +99,10 @@
   --color-magenta-300: #ceaac9;
   --color-magenta-700: #6a246a;
 
+  --color-ocean-300: #badde8;
+  --color-ocean-600: #2f687a;
+  --color-ocean-900: #253236;
+
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
@@ -155,6 +159,7 @@
   --comfy-menu-bg: #353535;
   --comfy-menu-secondary-bg: #292929;
   --comfy-topbar-height: 2.5rem;
+  --workflow-tabs-height: 2.375rem;
   --comfy-input-bg: #222;
   --input-text: #ddd;
   --descrip-text: #999;
@@ -219,6 +224,10 @@
   --interface-panel-surface: var(--color-white);
   --interface-stroke: var(--color-smoke-300);
 
+  --interface-builder-mode-background: var(--color-ocean-300);
+  --interface-builder-mode-button-background: var(--color-ocean-600);
+  --interface-builder-mode-button-foreground: var(--color-white);
+
   --nav-background: var(--color-white);
 
   --node-border: var(--color-smoke-300);
@@ -378,6 +387,10 @@
   --interface-panel-surface: var(--color-charcoal-800);
   --interface-stroke: var(--color-charcoal-400);
 
+  --interface-builder-mode-background: var(--color-ocean-900);
+  --interface-builder-mode-button-background: var(--color-ocean-600);
+  --interface-builder-mode-button-foreground: var(--color-white);
+
   --nav-background: var(--color-charcoal-800);
 
   --node-border: var(--color-charcoal-500);
@@ -512,6 +525,15 @@
   --color-comfy-menu-bg: var(--comfy-menu-bg);
   --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
 
+  --color-interface-builder-mode-background: var(
+    --interface-builder-mode-background
+  );
+  --color-interface-builder-mode-button-background: var(
+    --interface-builder-mode-button-background
+  );
+  --color-interface-builder-mode-button-foreground: var(
+    --interface-builder-mode-button-foreground
+  );
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
   --color-node-border: var(--node-border);
diff --git a/src/components/builder/BuilderToolbar.vue b/src/components/builder/BuilderToolbar.vue
new file mode 100644
index 000000000..c3c8978d0
--- /dev/null
+++ b/src/components/builder/BuilderToolbar.vue
@@ -0,0 +1,105 @@
+<template>
+  <nav
+    class="fixed top-[calc(var(--workflow-tabs-height)+var(--spacing)*1.5)] left-1/2 z-[1000] -translate-x-1/2"
+    :aria-label="t('builderToolbar.label')"
+  >
+    <div
+      class="inline-flex items-center gap-1 rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
+    >
+      <template
+        v-for="(step, index) in [selectStep, arrangeStep]"
+        :key="step.id"
+      >
+        <button
+          :class="
+            cn(
+              stepClasses,
+              activeStep === step.id && 'bg-interface-builder-mode-background',
+              activeStep !== step.id &&
+                'hover:bg-secondary-background bg-transparent'
+            )
+          "
+          :aria-current="activeStep === step.id ? 'step' : undefined"
+          @click="appModeStore.setMode(step.id)"
+        >
+          <StepBadge :step :index :model-value="activeStep" />
+          <StepLabel :step />
+        </button>
+
+        <div class="mx-1 h-px w-4 bg-border-default" role="separator" />
+      </template>
+
+      <!-- Save -->
+      <ConnectOutputPopover
+        v-if="!appModeStore.hasOutputs"
+        :is-select-active="activeStep === 'builder:select'"
+        @switch="appModeStore.setMode('builder:select')"
+      >
+        <button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
+          <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
+          <StepLabel :step="saveStep" />
+        </button>
+      </ConnectOutputPopover>
+      <button
+        v-else
+        :class="
+          cn(
+            stepClasses,
+            activeStep === 'save'
+              ? 'bg-interface-builder-mode-background'
+              : 'hover:bg-secondary-background bg-transparent'
+          )
+        "
+        @click="appModeStore.setBuilderSaving(true)"
+      >
+        <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
+        <StepLabel :step="saveStep" />
+      </button>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useAppModeStore } from '@/stores/appModeStore'
+import type { AppMode } from '@/stores/appModeStore'
+import { cn } from '@/utils/tailwindUtil'
+
+import ConnectOutputPopover from './ConnectOutputPopover.vue'
+import StepBadge from './StepBadge.vue'
+import StepLabel from './StepLabel.vue'
+import type { BuilderToolbarStep } from './types'
+
+const { t } = useI18n()
+const appModeStore = useAppModeStore()
+
+const activeStep = computed(() =>
+  appModeStore.isBuilderSaving ? 'save' : appModeStore.mode
+)
+
+const stepClasses =
+  'inline-flex h-14 min-h-8 cursor-pointer items-center gap-3 rounded-lg py-2 pr-4 pl-2 transition-colors border-none'
+
+const selectStep: BuilderToolbarStep<AppMode> = {
+  id: 'builder:select',
+  title: t('builderToolbar.select'),
+  subtitle: t('builderToolbar.selectDescription'),
+  icon: 'icon-[lucide--mouse-pointer-click]'
+}
+
+const arrangeStep: BuilderToolbarStep<AppMode> = {
+  id: 'builder:arrange',
+  title: t('builderToolbar.arrange'),
+  subtitle: t('builderToolbar.arrangeDescription'),
+  icon: 'icon-[lucide--layout-panel-left]'
+}
+
+const saveStep: BuilderToolbarStep<'save'> = {
+  id: 'save',
+  title: t('builderToolbar.save'),
+  subtitle: t('builderToolbar.saveDescription'),
+  icon: 'icon-[lucide--cloud-upload]'
+}
+</script>
diff --git a/src/components/builder/ConnectOutputPopover.vue b/src/components/builder/ConnectOutputPopover.vue
new file mode 100644
index 000000000..3aa6fa8ee
--- /dev/null
+++ b/src/components/builder/ConnectOutputPopover.vue
@@ -0,0 +1,78 @@
+<template>
+  <PopoverRoot>
+    <PopoverTrigger as-child>
+      <slot />
+    </PopoverTrigger>
+    <PopoverContent
+      side="bottom"
+      :side-offset="8"
+      :collision-padding="10"
+      class="z-[1001] w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade"
+    >
+      <div class="flex h-12 items-center justify-between px-4">
+        <h3 class="text-sm font-medium text-base-foreground">
+          {{ t('builderToolbar.connectOutput') }}
+        </h3>
+        <PopoverClose
+          :aria-label="t('g.close')"
+          class="flex cursor-pointer appearance-none items-center justify-center border-none bg-transparent p-0 text-muted-foreground hover:text-base-foreground"
+        >
+          <i class="icon-[lucide--x] size-4" />
+        </PopoverClose>
+      </div>
+      <div class="border-t border-border-default" />
+      <p class="mt-3 px-4 text-xs text-muted-foreground leading-relaxed">
+        {{ t('builderToolbar.connectOutputBody1') }}
+      </p>
+      <p
+        v-if="!isSelectActive"
+        class="mt-2 px-4 text-xs text-muted-foreground leading-relaxed"
+      >
+        {{ t('builderToolbar.connectOutputBody2') }}
+      </p>
+      <div class="mt-4 flex items-center justify-end gap-2 px-4 pb-4">
+        <template v-if="isSelectActive">
+          <PopoverClose as-child>
+            <Button variant="secondary" size="md">
+              {{ t('g.ok') }}
+            </Button>
+          </PopoverClose>
+        </template>
+        <template v-else>
+          <PopoverClose as-child>
+            <Button variant="muted-textonly" size="md">
+              {{ t('g.cancel') }}
+            </Button>
+          </PopoverClose>
+          <PopoverClose as-child>
+            <Button variant="secondary" size="md" @click="emit('switch')">
+              {{ t('builderToolbar.switchToSelect') }}
+            </Button>
+          </PopoverClose>
+        </template>
+      </div>
+    </PopoverContent>
+  </PopoverRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  PopoverClose,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger
+} from 'reka-ui'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+
+const { isSelectActive = false } = defineProps<{
+  isSelectActive?: boolean
+}>()
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  switch: []
+}>()
+</script>
diff --git a/src/components/builder/StepBadge.vue b/src/components/builder/StepBadge.vue
new file mode 100644
index 000000000..a1c3cbb0e
--- /dev/null
+++ b/src/components/builder/StepBadge.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-interface-builder-mode-button-background text-interface-builder-mode-button-foreground"
+  >
+    <i v-if="modelValue === step.id" :class="cn(step.icon, 'size-5')" />
+    <span v-else class="text-sm font-bold">
+      {{ index + 1 }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+import type { BuilderToolbarStep } from './types'
+
+defineProps<{
+  step: BuilderToolbarStep
+  index: number
+  modelValue: string
+}>()
+</script>
diff --git a/src/components/builder/StepLabel.vue b/src/components/builder/StepLabel.vue
new file mode 100644
index 000000000..c2404d2c3
--- /dev/null
+++ b/src/components/builder/StepLabel.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-col gap-0.5 text-left">
+    <span class="text-sm font-medium text-base-foreground">
+      {{ step.title }}
+    </span>
+    <span
+      class="hidden whitespace-nowrap text-xs text-muted-foreground sm:inline"
+    >
+      {{ step.subtitle }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BuilderToolbarStep } from './types'
+
+const { step } = defineProps<{
+  step: BuilderToolbarStep
+}>()
+</script>
diff --git a/src/components/builder/types.ts b/src/components/builder/types.ts
new file mode 100644
index 000000000..66fd3d293
--- /dev/null
+++ b/src/components/builder/types.ts
@@ -0,0 +1,6 @@
+export interface BuilderToolbarStep<T extends string = string> {
+  id: T
+  title: string
+  subtitle: string
+  icon: string
+}
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 0ea47dd37..9e250999c 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -6,7 +6,7 @@
     <template v-if="showUI" #workflow-tabs>
       <div
         v-if="workflowTabsPosition === 'Topbar'"
-        class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
+        class="workflow-tabs-container pointer-events-auto relative w-full h-(--workflow-tabs-height)"
       >
         <!-- Native drag area for Electron -->
         <div
@@ -21,7 +21,7 @@
         </div>
       </div>
     </template>
-    <template v-if="showUI" #side-toolbar>
+    <template v-if="showUI && !appModeStore.isBuilderMode" #side-toolbar>
       <SideToolbar />
     </template>
     <template v-if="showUI" #side-bar-panel>
@@ -31,19 +31,27 @@
         <ExtensionSlot v-if="activeSidebarTab" :extension="activeSidebarTab" />
       </div>
     </template>
-    <template v-if="showUI" #topmenu>
+    <template v-if="showUI && !appModeStore.isBuilderMode" #topmenu>
       <TopMenuSection />
     </template>
     <template v-if="showUI" #bottom-panel>
       <BottomPanel />
     </template>
     <template v-if="showUI" #right-side-panel>
-      <NodePropertiesPanel />
+      <NodePropertiesPanel v-if="!appModeStore.isBuilderMode" />
     </template>
     <template #graph-canvas-panel>
-      <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
+      <GraphCanvasMenu
+        v-if="canvasMenuEnabled && !appModeStore.isBuilderMode"
+        class="pointer-events-auto"
+      />
       <MiniMap
-        v-if="comfyAppReady && minimapEnabled && betaMenuEnabled"
+        v-if="
+          comfyAppReady &&
+          minimapEnabled &&
+          betaMenuEnabled &&
+          !appModeStore.isBuilderMode
+        "
         class="pointer-events-auto"
       />
     </template>
@@ -174,6 +182,7 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
+import { useAppModeStore } from '@/stores/appModeStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isNativeWindow } from '@/utils/envUtil'
 import { forEachNode } from '@/utils/graphTraversalUtil'
@@ -194,6 +203,7 @@ const nodeSearchboxPopoverRef = shallowRef<InstanceType<
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
+const appModeStore = useAppModeStore()
 const canvasStore = useCanvasStore()
 const workflowStore = useWorkflowStore()
 const executionStore = useExecutionStore()
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 54af22f46..a5cf8e7f0 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -3218,5 +3218,18 @@
     "poseToVideo": "Pose to video",
     "cannyToVideo": "Canny to video",
     "depthToVideo": "Depth to video"
+  },
+  "builderToolbar": {
+    "label": "App Builder",
+    "select": "Select",
+    "selectDescription": "Choose inputs/outputs",
+    "arrange": "Preview",
+    "arrangeDescription": "Review app layout",
+    "save": "Save",
+    "saveDescription": "Save and finish",
+    "connectOutput": "Connect an output",
+    "connectOutputBody1": "Your app needs at least one output to be connected before it can be saved.",
+    "connectOutputBody2": "Switch to the 'Select' step and click on output nodes to add them here.",
+    "switchToSelect": "Switch to Select"
   }
 }
diff --git a/src/stores/appModeStore.ts b/src/stores/appModeStore.ts
index 320cade8a..3eafbf93a 100644
--- a/src/stores/appModeStore.ts
+++ b/src/stores/appModeStore.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { readonly, computed, ref } from 'vue'
 
-type AppMode = 'graph' | 'app' | 'builder:select' | 'builder:arrange'
+export type AppMode = 'graph' | 'app' | 'builder:select' | 'builder:arrange'
 
 export const useAppModeStore = defineStore('appMode', () => {
   const mode = ref<AppMode>('graph')
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 95fe97d39..40e8e5772 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -13,6 +13,7 @@
       <GraphCanvas @ready="onGraphReady" />
     </div>
     <LinearView v-if="linearMode" />
+    <BuilderToolbar v-if="appModeStore.isBuilderMode" />
   </div>
 
   <GlobalToast />
@@ -68,6 +69,7 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
 import { useKeybindingService } from '@/platform/keybindings/keybindingService'
+import { useAppModeStore } from '@/stores/appModeStore'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -84,6 +86,7 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { electronAPI } from '@/utils/envUtil'
+import BuilderToolbar from '@/components/builder/BuilderToolbar.vue'
 import LinearView from '@/views/LinearView.vue'
 import ManagerProgressToast from '@/workbench/extensions/manager/components/ManagerProgressToast.vue'
 
@@ -100,6 +103,7 @@ const queueStore = useQueueStore()
 const assetsStore = useAssetsStore()
 const versionCompatibilityStore = useVersionCompatibilityStore()
 const graphCanvasContainerRef = ref<HTMLDivElement | null>(null)
+const appModeStore = useAppModeStore()
 const { linearMode } = storeToRefs(useCanvasStore())
 
 const telemetry = useTelemetry()
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 47648de98..2cd173fad 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -43,7 +43,9 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
 </script>
 <template>
   <div class="absolute w-full h-full">
-    <div class="workflow-tabs-container pointer-events-auto h-9.5 w-full">
+    <div
+      class="workflow-tabs-container pointer-events-auto h-(--workflow-tabs-height) w-full"
+    >
       <div class="flex h-full items-center">
         <WorkflowTabs />
         <TopbarBadges />
@@ -51,7 +53,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
     </div>
     <div
       v-if="mobileDisplay"
-      class="justify-center border-border-subtle border-t overflow-y-scroll h-[calc(100%-38px)] bg-comfy-menu-bg"
+      class="justify-center border-border-subtle border-t overflow-y-scroll h-[calc(100%-var(--workflow-tabs-height))] bg-comfy-menu-bg"
     >
       <MobileMenu />
       <LinearProgressBar class="w-full" />