Merge remote-tracking branch 'origin/main' into feat/edu-page

# Conflicts:
#	apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-3-lg-visual-linux.png
#	apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-4-xl-visual-linux.png
#	apps/website/src/components/ui/badge/index.ts

.github/workflows/cla.yml

@@ -38,9 +38,11 @@ jobs:
           PR_NUMBER: ${{ github.event.pull_request.number || github.event.issue.number }}
           PR_AUTHOR: ${{ github.event.pull_request.user.login || github.event.issue.user.login }}
           BASE_ALLOWLIST: action@github.com,actions-user,ampagent,claude,comfy-pr-bot,GitHub Action,github-actions,github-actions[bot],Glary Bot,Glary-Bot,*[bot]
+        # For each commit emit the GitHub login when the author/committer email resolves to a GitHub account
+        # otherwise fall back to the raw git name.
         run: |
           others=$(gh api "repos/${{ github.repository }}/pulls/${PR_NUMBER}/commits" --paginate \
-            --jq '.[] | (.author.login // empty), (.committer.login // empty)' \
+            --jq '.[] | (.author.login // .commit.author.name // empty), (.committer.login // .commit.committer.name // empty)' \
             | sort -u | grep -vix "${PR_AUTHOR}" | paste -sd, -)
           if [ -n "$others" ]; then
             echo "allowlist=${BASE_ALLOWLIST},${others}" >> "$GITHUB_OUTPUT"

.github/workflows/pr-backport.yaml

@@ -278,32 +278,49 @@ jobs:
               continue
             fi
 
-            # Create backport branch
-            git checkout -b "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"
+            # Create backport branch. A failure here (e.g. dirty state left
+            # by a prior target) must not abort the loop and skip remaining
+            # targets, so fall back to a clean checkout and record the error.
+            if ! git checkout -B "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"; then
+              echo "::error::Failed to create branch ${BACKPORT_BRANCH} for ${TARGET_BRANCH}"
+              FAILED="${FAILED}${TARGET_BRANCH}:branch-create-failed "
+              git checkout main || git checkout -f main
+              echo "::endgroup::"
+              continue
+            fi
 
             # Try cherry-pick
             if git cherry-pick "${MERGE_COMMIT}"; then
               if [ "$REMOTE_BACKPORT_EXISTS" = true ]; then
-                git push --force-with-lease origin "${BACKPORT_BRANCH}"
+                PUSH_CMD=(git push --force-with-lease origin "${BACKPORT_BRANCH}")
               else
-                git push origin "${BACKPORT_BRANCH}"
+                PUSH_CMD=(git push origin "${BACKPORT_BRANCH}")
               fi
-              echo "${BACKPORT_BRANCH}" >> "$CREATED_BRANCHES_FILE"
-              SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
-              echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
+
+              # A push failure for one target must not abort the loop and
+              # prevent remaining targets from being attempted.
+              if "${PUSH_CMD[@]}"; then
+                echo "${BACKPORT_BRANCH}" >> "$CREATED_BRANCHES_FILE"
+                SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
+                echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
+              else
+                echo "::error::Failed to push ${BACKPORT_BRANCH} for ${TARGET_BRANCH}"
+                FAILED="${FAILED}${TARGET_BRANCH}:push-failed "
+              fi
+
               # Return to main (keep the branch, we need it for PR)
-              git checkout main
+              git checkout main || git checkout -f main
             else
               # Get conflict info
               CONFLICTS=$(git diff --name-only --diff-filter=U | tr '\n' ',')
-              git cherry-pick --abort
+              git cherry-pick --abort || true
 
               echo "::error::Cherry-pick failed due to conflicts"
               FAILED="${FAILED}${TARGET_BRANCH}:conflicts:${CONFLICTS} "
 
               # Clean up the failed branch
-              git checkout main
-              git branch -D "${BACKPORT_BRANCH}"
+              git checkout main || git checkout -f main
+              git branch -D "${BACKPORT_BRANCH}" || true
             fi
 
             echo "::endgroup::"
@@ -384,6 +401,10 @@ jobs:
 
             **Reason:** Merge conflicts detected during cherry-pick of `${MERGE_COMMIT_SHORT}`
 
+            The auto-backport could not be completed automatically. Please backport
+            manually onto branch `${BACKPORT_BRANCH}` (from `origin/${target}`) and
+            open a PR to `${target}`.
+
             <details>
             <summary>📄 Conflicting files</summary>
 
@@ -416,19 +437,37 @@ jobs:
             MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
           fi
 
+          # Post a comment without letting a single failed `gh pr comment` (e.g.
+          # a locked issue, as happened for PR #13359, or a transient API error)
+          # abort the step under `set -e` and swallow the remaining failures.
+          post_comment() {
+            local body="$1"
+            local context="$2"
+            if ! gh pr comment "${PR_NUMBER}" --body "${body}"; then
+              echo "::warning::Could not comment on PR #${PR_NUMBER} about ${context}. Manual backport required."
+            fi
+          }
+
           for failure in ${{ steps.backport.outputs.failed }}; do
             IFS=':' read -r target reason conflicts <<< "${failure}"
 
+            SAFE_TARGET=$(echo "$target" | tr '/' '-')
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
+
             if [ "${reason}" = "branch-missing" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist"
+              post_comment "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist" "missing branch ${target}"
 
             elif [ "${reason}" = "already-exists" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed."
+              post_comment "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed." "already-backported ${target}"
+
+            elif [ "${reason}" = "branch-create-failed" ]; then
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport to \`${target}\` failed: could not create the backport branch. Please retry or backport manually."
+
+            elif [ "${reason}" = "push-failed" ]; then
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport to \`${target}\` cherry-picked cleanly but the push failed. Please retry or push the backport branch manually."
 
             elif [ "${reason}" = "conflicts" ]; then
               CONFLICTS_INLINE=$(echo "${conflicts}" | tr ',' ' ')
-              SAFE_TARGET=$(echo "$target" | tr '/' '-')
-              BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
               PR_URL="${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}"
 
               export PR_NUMBER PR_URL MERGE_COMMIT target BACKPORT_BRANCH CONFLICTS_INLINE
@@ -444,10 +483,10 @@ jobs:
               CONFLICTS_BLOCK=$(echo "${conflicts}" | tr ',' '\n')
               MERGE_COMMIT_SHORT="${MERGE_COMMIT:0:7}"
 
-              export target MERGE_COMMIT_SHORT CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
-              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
+              export target MERGE_COMMIT_SHORT BACKPORT_BRANCH CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
+              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${BACKPORT_BRANCH} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
 
-              gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
+              post_comment "${COMMENT_BODY}" "cherry-pick conflict on ${target} (backport manually onto ${BACKPORT_BRANCH})"
             fi
           done
 

apps/website/e2e/navigation.spec.ts

@@ -31,6 +31,26 @@ test.describe('Desktop navigation @smoke', () => {
     }
   })
 
+  test('NEW badge shows on Products and Community only', async ({ page }) => {
+    const nav = page.getByRole('navigation', { name: 'Main navigation' })
+    const desktopLinks = nav.getByTestId('desktop-nav-links')
+
+    for (const label of ['Products', 'Community']) {
+      await expect(
+        desktopLinks
+          .getByRole('button', { name: label })
+          .getByText('NEW', { exact: true })
+      ).toBeVisible()
+    }
+
+    await expect(
+      desktopLinks.getByRole('button', { name: 'Company' }).getByText('NEW')
+    ).toHaveCount(0)
+    await expect(
+      desktopLinks.getByRole('link', { name: 'Pricing' }).getByText('NEW')
+    ).toHaveCount(0)
+  })
+
   test('CTA buttons are visible', async ({ page }) => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopCTA = nav.getByTestId('desktop-nav-cta')
@@ -117,6 +137,27 @@ test.describe('Mobile menu @mobile', () => {
     }
   })
 
+  test('NEW badge shows on Products and Community only', async ({ page }) => {
+    await page.getByRole('button', { name: 'Toggle menu' }).click()
+
+    const menu = page.getByRole('dialog')
+
+    for (const label of ['Products', 'Community']) {
+      await expect(
+        menu.getByRole('button', { name: label }).getByText('NEW', {
+          exact: true
+        })
+      ).toBeVisible()
+    }
+
+    await expect(
+      menu.getByRole('button', { name: 'Company' }).getByText('NEW')
+    ).toHaveCount(0)
+    await expect(
+      menu.getByRole('link', { name: 'Pricing' }).getByText('NEW')
+    ).toHaveCount(0)
+  })
+
   test('clicking section with subitems drills down and back works', async ({
     page
   }) => {

apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue

@@ -16,6 +16,7 @@ import type { NavItem } from '../../../data/mainNavigation'
 import type { Locale } from '../../../i18n/translations'
 import NavColumn from './NavColumn.vue'
 import NavFeaturedCard from './NavFeaturedCard.vue'
+import NewBadge from './NewBadge.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 const mainNavigation = getMainNavigation(locale)
@@ -42,7 +43,10 @@ function isNavItemActive(navItem: NavItem, path: string): boolean {
           <NavigationMenuTrigger
             :active="isNavItemActive(navItem, currentPath)"
           >
-            {{ navItem.label }}
+            <span class="inline-flex items-center gap-1">
+              <span class="ppformula-text-center">{{ navItem.label }}</span>
+              <NewBadge v-if="navItem.badge" :locale="locale" size="xxs" />
+            </span>
           </NavigationMenuTrigger>
           <NavigationMenuContent class="w-auto" data-testid="nav-dropdown">
             <ul class="flex w-max gap-16">

apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue

@@ -8,6 +8,7 @@ import { lockScroll, unlockScroll } from '../../../composables/scrollLock'
 import type { Locale } from '../../../i18n/translations.ts'
 import { t } from '../../../i18n/translations.ts'
 import NavLinkContent from './NavLinkContent.vue'
+import NewBadge from './NewBadge.vue'
 import Sheet from '@/components/ui/sheet/Sheet.vue'
 import SheetContent from '@/components/ui/sheet/SheetContent.vue'
 import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
@@ -96,7 +97,8 @@ onUnmounted(() => {
                   :href="item.columns ? undefined : item.href"
                   @click="item.columns && (activeSection = item.label)"
                 >
-                  {{ item.label }}
+                  <span class="ppformula-text-center">{{ item.label }}</span>
+                  <NewBadge v-if="item.badge" :locale="locale" size="xxs" />
                   <template #append>
                     <ChevronRight class="size-7" />
                   </template>

apps/website/src/components/common/HeaderMain/NavLinkContent.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import Badge from '@/components/ui/badge/Badge.vue'
 import { ArrowUpRight } from '@lucide/vue'
 
 import type { NavColumnItem } from '../../../data/mainNavigation'
 import type { Locale } from '../../../i18n/translations'
-import { t } from '../../../i18n/translations'
+import NewBadge from './NewBadge.vue'
 
 defineProps<{ item: NavColumnItem; locale: Locale }>()
 </script>
@@ -12,9 +11,7 @@ defineProps<{ item: NavColumnItem; locale: Locale }>()
 <template>
   <span class="flex items-center gap-2">
     <span class="ppformula-text-center">{{ item.label }}</span>
-    <Badge v-if="item.badge" size="xs" variant="accent">
-      {{ t('nav.badgeNew', locale) }}
-    </Badge>
+    <NewBadge v-if="item.badge" :locale="locale" size="xs" />
     <ArrowUpRight
       v-if="item.external"
       class="text-primary-comfy-yellow size-4"

apps/website/src/components/common/HeaderMain/NewBadge.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Badge from '@/components/ui/badge/Badge.vue'
+
+import type { BadgeVariants } from '@/components/ui/badge'
+import type { Locale } from '../../../i18n/translations'
+import { t } from '../../../i18n/translations'
+
+defineProps<{ locale: Locale; size?: BadgeVariants['size'] }>()
+</script>
+
+<template>
+  <Badge :size="size" variant="accent">
+    {{ t('nav.badgeNew', locale) }}
+  </Badge>
+</template>

apps/website/src/components/pricing/PricingSection.vue

@@ -167,7 +167,7 @@ const planCards = computed(() =>
             :label="t(plan.labelKey, locale)"
             class="ppformula-text-center text-base uppercase"
           />
-          <Badge v-if="plan.isPopular" variant="callout">
+          <Badge v-if="plan.isPopular" variant="callout" size="xs">
             {{ t('pricing.badge.popular', locale) }}</Badge
           >
         </div>

apps/website/src/components/ui/badge/index.ts

@@ -6,16 +6,17 @@ export const badgeVariants = cva({
   variants: {
     size: {
       md: 'px-4 py-1 text-xs',
-      xs: 'px-2 py-0.5 text-[9px]'
+      xs: 'px-2 py-0.5 text-[9px]',
+      xxs: 'px-1.5 py-px text-[8px]'
     },
     variant: {
       default: 'bg-transparency-ink-t80',
       subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas',
       category: 'text-primary-comfy-yellow px-0 font-semibold uppercase',
       accent:
-        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent px-2 py-0.5 text-[9px] font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm',
+        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm',
       callout:
-        'before:bg-primary-comfy-plum text-primary-warm-white relative isolate overflow-visible rounded-none bg-transparent px-2 py-0.5 text-[9px] font-bold tracking-tight uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
+        'before:bg-primary-comfy-plum text-primary-warm-white relative isolate overflow-visible rounded-none bg-transparent font-bold tracking-tight uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
     }
   },
   defaultVariants: {

apps/website/src/data/mainNavigation.ts

@@ -30,15 +30,23 @@ export type NavItem =
       label: string
       columns: NavColumn[]
       featured?: NavFeatured
+      badge?: 'new'
       href?: never
     }
-  | { label: string; href: string; columns?: never; featured?: never }
+  | {
+      label: string
+      href: string
+      badge?: 'new'
+      columns?: never
+      featured?: never
+    }
 
 export function getMainNavigation(locale: Locale): NavItem[] {
   const routes = getRoutes(locale)
   return [
     {
       label: t('nav.products', locale),
+      badge: 'new',
       featured: {
         imageSrc: 'https://media.comfy.org/website/nav/mcp-card.webp',
         imageAlt: t('nav.featuredProductsAlt', locale),
@@ -95,6 +103,7 @@ export function getMainNavigation(locale: Locale): NavItem[] {
     { label: t('nav.pricing', locale), href: routes.cloudPricing },
     {
       label: t('nav.community', locale),
+      badge: 'new',
       featured: {
         imageSrc: 'https://media.comfy.org/website/nav/featured-demo-card.jpg',
         imageAlt: t('nav.featuredCommunityAlt', locale),

apps/website/src/templates/drops/DropCard.vue

@@ -61,7 +61,12 @@ const { drop, locale } = defineProps<{
             class="size-full object-cover object-center transition-transform duration-500 ease-out group-hover/pill-trigger:scale-105"
           />
         </div>
-        <Badge v-if="drop.badge" variant="accent" class="absolute top-6 left-8">
+        <Badge
+          v-if="drop.badge"
+          size="xs"
+          variant="accent"
+          class="absolute top-6 left-8"
+        >
           {{ drop.badge[locale] }}
         </Badge>
       </CardContent>

browser_tests/fixtures/ComfyPage.ts

@@ -28,6 +28,7 @@ import {
   ModelLibrarySidebarTab,
   NodeLibrarySidebarTab,
   NodeLibrarySidebarTabV2,
+  SidebarTab,
   WorkflowsSidebarTab
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
@@ -70,6 +71,7 @@ class ComfyPropertiesPanel {
 }
 
 class ComfyMenu {
+  private _appsTab: SidebarTab | null = null
   private _assetsTab: AssetsSidebarTab | null = null
   private _modelLibraryTab: ModelLibrarySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
@@ -104,6 +106,11 @@ class ComfyMenu {
     return this._nodeLibraryTabV2
   }
 
+  get appsTab() {
+    this._appsTab ??= new SidebarTab(this.page, 'apps')
+    return this._appsTab
+  }
+
   get assetsTab() {
     this._assetsTab ??= new AssetsSidebarTab(this.page)
     return this._assetsTab

browser_tests/fixtures/components/SidebarTab.ts

@@ -4,7 +4,7 @@ import { expect } from '@playwright/test'
 import type { WorkspaceStore } from '@e2e/types/globals'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-class SidebarTab {
+export class SidebarTab {
   public readonly tabButton: Locator
   public readonly selectedTabButton: Locator
 

browser_tests/fixtures/components/WorkflowActionsDropdown.ts

@@ -0,0 +1,40 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { TestIds } from '@e2e/fixtures/selectors'
+
+/**
+ * The graph/app view-mode toggle and its workflow actions dropdown.
+ * A separate instance mounts in each host - the subgraph breadcrumb (graph
+ * mode) and the app-mode center panel - and unmounts as the mode flips.
+ */
+export class WorkflowActionsDropdown {
+  /** The segmented graph/app toggle hosting the workflow actions trigger. */
+  public readonly viewModeToggle: Locator
+  /** The active segment; opens the workflow actions menu. */
+  public readonly trigger: Locator
+  /** The inactive segment that switches into app mode. */
+  public readonly enterAppModeSegment: Locator
+  /** The inactive segment that switches back to the node graph. */
+  public readonly enterGraphSegment: Locator
+  /** The workflow actions dropdown menu. */
+  public readonly menu: Locator
+
+  constructor(page: Page) {
+    this.viewModeToggle = page.getByTestId(
+      TestIds.workflowActions.viewModeToggle
+    )
+    this.trigger = this.triggerIn(this.viewModeToggle)
+    this.enterAppModeSegment = this.viewModeToggle.getByRole('button', {
+      name: 'Enter app mode'
+    })
+    this.enterGraphSegment = this.viewModeToggle.getByRole('button', {
+      name: 'Enter node graph'
+    })
+    this.menu = page.getByRole('menu', { name: 'Workflow actions' })
+  }
+
+  /** The trigger as rendered inside a specific mode's host. */
+  triggerIn(host: Locator): Locator {
+    return host.getByRole('button', { name: 'Workflow actions' })
+  }
+}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -4,6 +4,7 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
 import { OutputHistoryComponent } from '@e2e/fixtures/components/OutputHistory'
+import { WorkflowActionsDropdown } from '@e2e/fixtures/components/WorkflowActionsDropdown'
 import { AppModeWidgetHelper } from '@e2e/fixtures/helpers/AppModeWidgetHelper'
 import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
@@ -19,6 +20,7 @@ export class AppModeHelper {
   readonly outputHistory: OutputHistoryComponent
   readonly steps: BuilderStepsHelper
   readonly widgets: AppModeWidgetHelper
+  readonly workflowActions: WorkflowActionsDropdown
 
   /** The "Connect an output" popover shown when saving without outputs. */
   public readonly connectOutputPopover: Locator
@@ -77,6 +79,7 @@ export class AppModeHelper {
     this.outputHistory = new OutputHistoryComponent(comfyPage.page)
     this.steps = new BuilderStepsHelper(comfyPage)
     this.widgets = new AppModeWidgetHelper(comfyPage)
+    this.workflowActions = new WorkflowActionsDropdown(comfyPage.page)
 
     this.connectOutputPopover = this.page.getByTestId(
       TestIds.builder.connectOutputPopover
@@ -185,10 +188,7 @@ export class AppModeHelper {
       .waitFor({ state: 'hidden', timeout: 5000 })
       .catch(() => {})
 
-    await this.page
-      .getByRole('button', { name: 'Workflow actions' })
-      .first()
-      .click()
+    await this.workflowActions.trigger.click()
     await this.page
       .getByRole('menuitem', { name: /Build app|Edit app/ })
       .click()

browser_tests/fixtures/selectors.ts

@@ -239,6 +239,9 @@ export const TestIds = {
     renameInput: 'subgraph-breadcrumb-rename-input',
     menu: (key: string) => `subgraph-breadcrumb-menu-${key}`
   },
+  workflowActions: {
+    viewModeToggle: 'view-mode-toggle'
+  },
   templates: {
     content: 'template-workflows-content',
     workflowCard: (id: string) => `template-workflow-${id}`
@@ -276,6 +279,7 @@ export const TestIds = {
     overlay: 'loading-overlay'
   },
   load3d: {
+    categoryMenu: 'load3d-category-menu',
     recordingDuration: 'load3d-recording-duration'
   },
   load3dViewer: {

browser_tests/tests/appMode.spec.ts

@@ -1,9 +1,14 @@
+import { mergeTests } from '@playwright/test'
+
 import {
-  comfyPageFixture as test,
-  comfyExpect as expect
+  comfyExpect as expect,
+  comfyPageFixture
 } from '@e2e/fixtures/ComfyPage'
+import { subgraphBreadcrumbFixture } from '@e2e/fixtures/helpers/SubgraphBreadcrumbHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 
+const test = mergeTests(comfyPageFixture, subgraphBreadcrumbFixture)
+
 test.describe('App mode usage', () => {
   test('Drag and Drop @vue-nodes', async ({ comfyPage, comfyFiles }) => {
     const { centerPanel } = comfyPage.appMode
@@ -137,6 +142,117 @@ test.describe('App mode usage', () => {
     await expect.poll(() => fileComboWidget.getValue()).toBe(targetImage)
   })
 
+  test('Shows a single side toolbar per mode, filtered to assets + apps in app mode', async ({
+    comfyPage
+  }) => {
+    const { sideToolbar, nodeLibraryTab, assetsTab, appsTab } = comfyPage.menu
+
+    await test.step('Graph mode shows the full toolbar', async () => {
+      await expect(sideToolbar).toHaveCount(1)
+      await expect(nodeLibraryTab.tabButton).toBeVisible()
+    })
+
+    await test.step('App mode shows only assets + apps', async () => {
+      await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+      await expect(comfyPage.appMode.centerPanel).toBeVisible()
+
+      await expect(sideToolbar).toHaveCount(1)
+      await expect(assetsTab.tabButton).toBeVisible()
+      await expect(appsTab.tabButton).toBeVisible()
+      await expect(nodeLibraryTab.tabButton).toBeHidden()
+    })
+  })
+
+  test('Workflow actions menu keeps the same position across graph/app mode', async ({
+    comfyPage,
+    subgraphBreadcrumb
+  }) => {
+    const { workflowActions, centerPanel } = comfyPage.appMode
+
+    // Toggling graph<->app mode happens from this control, so it must not move
+    // out from under the cursor as the mode flips.
+    const graphActions = workflowActions.triggerIn(
+      subgraphBreadcrumb.panel.root
+    )
+    await expect(graphActions).toBeVisible()
+    const graphBox = await graphActions.boundingBox()
+
+    expect(graphBox).not.toBeNull()
+
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(centerPanel).toBeVisible()
+
+    const appActions = workflowActions.triggerIn(centerPanel)
+    await expect(appActions).toBeVisible()
+
+    // The toggle segments reorder (morph) as the mode flips, so poll until the
+    // active control settles at the same x it occupied in graph mode.
+    await expect
+      .poll(async () => {
+        const box = await appActions.boundingBox()
+        return box ? Math.abs(box.x - graphBox!.x) : Infinity
+      })
+      .toBeLessThanOrEqual(1)
+  })
+
+  test('Toggle segment flips mode without opening the menu', async ({
+    comfyPage
+  }) => {
+    const { workflowActions } = comfyPage.appMode
+    await expect(workflowActions.viewModeToggle).toBeVisible()
+
+    await workflowActions.enterAppModeSegment.click()
+
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    // The inactive segment switches mode; it must not also open the actions menu.
+    await expect(workflowActions.menu).toBeHidden()
+    await expect(workflowActions.viewModeToggle).toBeVisible()
+  })
+
+  test('Toggle segment flips mode via keyboard without opening the menu', async ({
+    comfyPage
+  }) => {
+    const { workflowActions } = comfyPage.appMode
+    await workflowActions.enterAppModeSegment.focus()
+    await workflowActions.enterAppModeSegment.press('Enter')
+
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    await expect(workflowActions.menu).toBeHidden()
+    await expect(workflowActions.trigger).toBeFocused()
+  })
+
+  test('Mode toggle re-appears after exiting the builder to graph mode', async ({
+    comfyPage
+  }) => {
+    const toggle = comfyPage.appMode.workflowActions.viewModeToggle
+    await comfyPage.appMode.enableLinearMode()
+    await expect(toggle).toBeVisible()
+
+    await comfyPage.appMode.enterBuilder()
+    await expect(toggle).toBeHidden()
+    await expect(comfyPage.appMode.centerPanel).toBeHidden()
+
+    await comfyPage.appMode.footer.exitButton.click()
+    // Exiting the builder lands in graph mode: the app-mode-only center panel
+    // stays hidden while the graph-mode toggle host re-mounts and the toggle
+    // re-appears.
+    await expect(toggle).toBeVisible()
+    await expect(comfyPage.appMode.centerPanel).toBeHidden()
+  })
+
+  test('Mode toggle survives a sidebar tab remounting the app panel', async ({
+    comfyPage
+  }) => {
+    const toggle = comfyPage.appMode.workflowActions.viewModeToggle
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    await expect(toggle).toBeVisible()
+
+    // Opening a sidebar tab remounts the app panel; the toggle re-renders with it.
+    await comfyPage.menu.assetsTab.tabButton.click()
+    await expect(toggle).toBeVisible()
+  })
+
   test.describe('Mobile', { tag: ['@mobile'] }, () => {
     test('panel navigation', async ({ comfyPage }) => {
       const { mobile } = comfyPage.appMode

browser_tests/tests/load3d/Load3DHelper.ts

@@ -11,39 +11,47 @@ export class Load3DHelper {
   }
 
   get menuButton(): Locator {
-    return this.node.getByRole('button', { name: /show menu/i })
+    return this.node.getByTestId(TestIds.load3d.categoryMenu)
+  }
+
+  private get menuPanel(): Locator {
+    return this.node.page().getByRole('dialog')
   }
 
   get recordingButton(): Locator {
-    return this.node.getByRole('button', { name: /start recording/i })
+    return this.node.getByRole('button', { name: 'Record', exact: true })
   }
 
   get stopRecordingButton(): Locator {
     return this.node.getByRole('button', { name: /stop recording/i })
   }
 
-  get exportRecordingButton(): Locator {
-    return this.node.getByRole('button', { name: /export recording/i })
-  }
-
-  get clearRecordingButton(): Locator {
-    return this.node.getByRole('button', { name: /clear recording/i })
-  }
-
-  get recordingDuration(): Locator {
+  get recordingMenuButton(): Locator {
     return this.node.getByTestId(TestIds.load3d.recordingDuration)
   }
 
+  get downloadRecordingMenuItem(): Locator {
+    return this.menuPanel.getByRole('button', { name: 'Download Recording' })
+  }
+
+  get startNewRecordingMenuItem(): Locator {
+    return this.menuPanel.getByRole('button', { name: 'Start New Recording' })
+  }
+
+  get deleteRecordingMenuItem(): Locator {
+    return this.menuPanel.getByRole('button', { name: 'Delete Recording' })
+  }
+
   get gridToggleButton(): Locator {
     return this.node.getByRole('button', { name: /show grid/i })
   }
 
   get uploadBackgroundImageButton(): Locator {
-    return this.node.getByRole('button', { name: /upload background image/i })
+    return this.node.getByRole('button', { name: 'BG Image' })
   }
 
   get removeBackgroundImageButton(): Locator {
-    return this.node.getByRole('button', { name: /remove background image/i })
+    return this.node.getByRole('button', { name: 'Remove BG' })
   }
 
   get panoramaModeButton(): Locator {
@@ -54,6 +62,10 @@ export class Load3DHelper {
     return this.node.locator('input[type="color"]')
   }
 
+  get exportButton(): Locator {
+    return this.node.getByRole('button', { name: 'Export', exact: true })
+  }
+
   get openViewerButton(): Locator {
     return this.node.getByRole('button', { name: /open in 3d viewer/i })
   }
@@ -63,11 +75,15 @@ export class Load3DHelper {
   }
 
   getMenuCategory(name: string): Locator {
-    return this.node.getByText(name, { exact: true })
+    return this.menuPanel.getByRole('button', { name, exact: true })
   }
 
   get gizmoToggleButton(): Locator {
-    return this.node.getByRole('button', { name: 'Gizmo' })
+    // The category chip is also named "Gizmo" once that category is active;
+    // only the toggle carries aria-pressed.
+    return this.node
+      .getByRole('button', { name: 'Gizmo' })
+      .and(this.node.locator('[aria-pressed]'))
   }
 
   get gizmoTranslateButton(): Locator {
@@ -83,13 +99,17 @@ export class Load3DHelper {
   }
 
   get gizmoResetButton(): Locator {
-    return this.node.getByRole('button', { name: 'Reset Transform' })
+    return this.node.getByRole('button', { name: 'Reset', exact: true })
   }
 
   async openMenu(): Promise<void> {
     await this.menuButton.click()
   }
 
+  async openRecordingMenu(): Promise<void> {
+    await this.recordingMenuButton.click()
+  }
+
   async openGizmoCategory(): Promise<void> {
     await this.openMenu()
     await this.getMenuCategory('Gizmo').click()

browser_tests/tests/load3d/load3d.spec.ts

@@ -47,10 +47,12 @@ test.describe('Load3D', () => {
       await load3d.openMenu()
 
       await expect(load3d.getMenuCategory('Scene')).toBeVisible()
-      await expect(load3d.getMenuCategory('Model')).toBeVisible()
+      await expect(load3d.getMenuCategory('3D Model')).toBeVisible()
       await expect(load3d.getMenuCategory('Camera')).toBeVisible()
       await expect(load3d.getMenuCategory('Light')).toBeVisible()
-      await expect(load3d.getMenuCategory('Export')).toBeVisible()
+      await expect(load3d.getMenuCategory('HDRI')).toBeVisible()
+      await expect(load3d.getMenuCategory('Gizmo')).toBeVisible()
+      await expect(load3d.exportButton).toBeVisible()
 
       await expect(load3d.node).toHaveScreenshot(
         'load3d-controls-menu-open.png',
@@ -253,7 +255,7 @@ test.describe('Load3D', () => {
     }
   )
 
-  test('Recording controls show stop/export/clear buttons after a recording', async ({
+  test('Recording controls collapse into a duration chip with a menu after a recording', async ({
     comfyPage,
     load3d
   }) => {
@@ -265,20 +267,25 @@ test.describe('Load3D', () => {
       await expect(load3d.stopRecordingButton).toBeVisible()
     })
 
-    await test.step('Stop recording surfaces export/clear controls and a 1s duration', async () => {
+    await test.step('Stop recording surfaces the duration chip with a 1s duration', async () => {
       // Record for 1s wall-clock so the duration display settles on 00:01.
       await comfyPage.delay(1000)
       await load3d.stopRecordingButton.click()
-      await expect(load3d.recordingButton).toBeVisible()
-      await expect(load3d.exportRecordingButton).toBeVisible()
-      await expect(load3d.clearRecordingButton).toBeVisible()
-      await expect(load3d.recordingDuration).toHaveText('00:01')
+      await expect(load3d.recordingMenuButton).toBeVisible()
+      await expect(load3d.recordingMenuButton).toHaveText('00:01')
     })
 
-    await test.step('Clear recording removes export and clear controls', async () => {
-      await load3d.clearRecordingButton.click()
-      await expect(load3d.exportRecordingButton).toHaveCount(0)
-      await expect(load3d.clearRecordingButton).toHaveCount(0)
+    await test.step('Chip menu offers download, re-record and delete actions', async () => {
+      await load3d.openRecordingMenu()
+      await expect(load3d.downloadRecordingMenuItem).toBeVisible()
+      await expect(load3d.startNewRecordingMenuItem).toBeVisible()
+      await expect(load3d.deleteRecordingMenuItem).toBeVisible()
+    })
+
+    await test.step('Deleting the recording restores the record button', async () => {
+      await load3d.deleteRecordingMenuItem.click()
+      await expect(load3d.recordingMenuButton).toHaveCount(0)
+      await expect(load3d.recordingButton).toBeVisible()
     })
   })
 })

browser_tests/tests/maskEditor.spec.ts

@@ -46,7 +46,10 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     { tag: ['@smoke', '@screenshot'] },
     async ({ comfyPage, maskEditor }) => {
       const { nodeId } = await maskEditor.loadImageOnNode()
-      await comfyPage.canvasOps.pan({ x: 0, y: 40 }, { x: 300, y: 300 })
+      // Center the node so its header clears the view-mode toggle floating
+      // at the top-left of the canvas.
+      const nodeRef = await comfyPage.nodeOps.getNodeRefById(nodeId)
+      await nodeRef.centerOnNode()
 
       const nodeHeader = comfyPage.vueNodes
         .getNodeLocator(nodeId)

browser_tests/tests/minimap.spec.ts

@@ -476,6 +476,37 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
       })
       .toBe(true)
   })
+
+  test(
+    'Closing minimap after subgraph navigation keeps Vue render in sync',
+    { tag: '@vue-nodes' },
+    async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+
+      // Round-trip layers Vue's onNodeAdded wrapper on top of the minimap's.
+      await comfyPage.vueNodes.enterSubgraph(subgraphNodeId)
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Minimap unmount must not clobber the Vue wrapper layered above it.
+      await comfyPage.page
+        .getByTestId(TestIds.canvas.closeMinimapButton)
+        .click()
+
+      const subgraphFixture =
+        await comfyPage.vueNodes.getFixtureByTitle('New Subgraph')
+      await comfyPage.contextMenu.openForVueNode(subgraphFixture.header)
+      await comfyPage.contextMenu.clickMenuItemExact('Unpack Subgraph')
+      await comfyPage.contextMenu.waitForHidden()
+
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(2)
+      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(2)
+      await expect(
+        comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
+      ).toHaveCount(0)
+    }
+  )
 })
 
 test.describe('Minimap mobile', { tag: ['@mobile', '@canvas'] }, () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.48.1",
+  "version": "1.48.2",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -114,6 +114,7 @@
     "jsonata": "catalog:",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
+    "minisearch": "catalog:",
     "pinia": "catalog:",
     "posthog-js": "catalog:",
     "primeicons": "catalog:",

packages/ingest-types/src/types.gen.ts

@@ -1320,13 +1320,21 @@ export type SecretProvidersResponse = {
 }
 
 /**
- * A provider the user may configure a secret for. The shape is deliberately minimal (identifier only) and reserved for future per-provider fields such as sub-keys.
+ * A provider the user may configure a secret for.
  */
 export type SecretProvider = {
   /**
    * Provider identifier (e.g., huggingface, civitai, runway, gemini)
    */
   id: string
+  /**
+   * How the credential is entered. `text` is a single-line secret (an API key); `json_file` is an uploaded/pasted JSON document (e.g. a Vertex service-account key). Defaults to `text` when omitted.
+   */
+  input_type?: 'text' | 'json_file'
+  /**
+   * Human-facing display label for the provider. Falls back to the frontend registry label, then the raw id, when omitted.
+   */
+  label?: string
 }
 
 /**

packages/ingest-types/src/zod.gen.ts

@@ -874,10 +874,12 @@ export const zTeamCreditStopSummary = z.object({
 })
 
 /**
- * A provider the user may configure a secret for. The shape is deliberately minimal (identifier only) and reserved for future per-provider fields such as sub-keys.
+ * A provider the user may configure a secret for.
  */
 export const zSecretProvider = z.object({
-  id: z.string()
+  id: z.string(),
+  input_type: z.enum(['text', 'json_file']).optional(),
+  label: z.string().optional()
 })
 
 /**

pnpm-lock.yaml

@@ -282,6 +282,9 @@ catalogs:
     markdown-table:
       specifier: ^3.0.4
       version: 3.0.4
+    minisearch:
+      specifier: ^7.2.0
+      version: 7.2.0
     mixpanel-browser:
       specifier: ^2.71.0
       version: 2.71.0
@@ -591,6 +594,9 @@ importers:
       marked:
         specifier: ^15.0.11
         version: 15.0.11
+      minisearch:
+        specifier: 'catalog:'
+        version: 7.2.0
       pinia:
         specifier: 'catalog:'
         version: 3.0.4(typescript@5.9.3)(vue@3.5.34(typescript@5.9.3))
@@ -7024,6 +7030,9 @@ packages:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minisearch@7.2.0:
+    resolution: {integrity: sha512-dqT2XBYUOZOiC5t2HRnwADjhNS2cecp9u+TJRiJ1Qp/f5qjkeT5APcGPjHw+bz89Ms8Jp+cG4AlE+QZ/QnDglg==}
+
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
@@ -8884,8 +8893,8 @@ packages:
   vue-component-type-helpers@3.3.2:
     resolution: {integrity: sha512-l4Z2Y34m7nFMlx8vrslJaVtXxUpzgDMSESC7TakG/c5kwjYT/do+E0NcT2/vWDzaoIhsShg/2OKwX7Q4nbzC0g==}
 
-  vue-component-type-helpers@3.3.5:
-    resolution: {integrity: sha512-Fe1jyPJoUGpJOYKOri44jduR7My4yYINOMJISuMAbmrs+L5LbIDUc8NTWZYY3EJLK0yPLuCmcd5zoCsE4k2/KA==}
+  vue-component-type-helpers@3.3.6:
+    resolution: {integrity: sha512-FkljacAwJ9BUoSUdpFe3VDy0sGigNlTH9+2zcXUWmZOjN8swiCkl3t48wOJun0OsUd2cEIda1l04tsxMiKIIrQ==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -11668,7 +11677,7 @@ snapshots:
       storybook: 10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.34(typescript@5.9.3)
-      vue-component-type-helpers: 3.3.5
+      vue-component-type-helpers: 3.3.6
 
   '@swc/helpers@0.5.21':
     dependencies:
@@ -15817,6 +15826,8 @@ snapshots:
 
   minipass@7.1.3: {}
 
+  minisearch@7.2.0: {}
+
   mitt@3.0.1: {}
 
   mixpanel-browser@2.71.0:
@@ -18138,7 +18149,7 @@ snapshots:
 
   vue-component-type-helpers@3.3.2: {}
 
-  vue-component-type-helpers@3.3.5: {}
+  vue-component-type-helpers@3.3.6: {}
 
   vue-demi@0.14.10(vue@3.5.34(typescript@5.9.3)):
     dependencies:

pnpm-workspace.yaml

@@ -103,6 +103,7 @@ catalog:
   lenis: ^1.3.21
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
+  minisearch: ^7.2.0
   mixpanel-browser: ^2.71.0
   monocart-coverage-reports: ^2.12.9
   oxfmt: ^0.54.0

src/components/appMode/AppModeToolbar.test.ts

@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import AppModeToolbar from './AppModeToolbar.vue'
+
+const appModeState = vi.hoisted(() => ({
+  enableAppBuilder: true,
+  hasNodes: true
+}))
+const enterBuilder = vi.hoisted(() => vi.fn())
+
+vi.mock('@/composables/useAppMode', () => ({
+  useAppMode: () => ({ enableAppBuilder: appModeState.enableAppBuilder })
+}))
+
+vi.mock('@/stores/appModeStore', async () => {
+  const { computed, reactive } = await import('vue')
+  return {
+    useAppModeStore: () =>
+      reactive({
+        enterBuilder,
+        hasNodes: computed(() => appModeState.hasNodes)
+      })
+  }
+})
+
+const BUILD_AN_APP = 'Build an app'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      linearMode: { appModeToolbar: { buildAnApp: BUILD_AN_APP } }
+    }
+  }
+})
+
+function renderToolbar() {
+  const user = userEvent.setup()
+  const result = render(AppModeToolbar, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        WorkflowActionsDropdown: true
+      }
+    }
+  })
+  return { ...result, user }
+}
+
+describe('AppModeToolbar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    appModeState.enableAppBuilder = true
+    appModeState.hasNodes = true
+  })
+
+  it('shows an enabled build button and enters the builder on click', async () => {
+    const { user } = renderToolbar()
+
+    const button = screen.getByRole('button', { name: BUILD_AN_APP })
+    expect(button).toBeEnabled()
+
+    await user.click(button)
+
+    expect(enterBuilder).toHaveBeenCalled()
+  })
+
+  it('disables the build button when there are no nodes', () => {
+    appModeState.hasNodes = false
+    renderToolbar()
+
+    expect(screen.getByRole('button', { name: BUILD_AN_APP })).toBeDisabled()
+  })
+
+  it('hides the build button when app building is disabled', () => {
+    appModeState.enableAppBuilder = false
+    renderToolbar()
+
+    expect(
+      screen.queryByRole('button', { name: BUILD_AN_APP })
+    ).not.toBeInTheDocument()
+  })
+})

src/components/appMode/AppModeToolbar.vue

@@ -1,119 +1,33 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsDropdown from '@/components/common/WorkflowActionsDropdown.vue'
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import Button from '@/components/ui/button/Button.vue'
 import { useAppMode } from '@/composables/useAppMode'
-import { isCloud } from '@/platform/distribution/types'
-import {
-  openShareDialog,
-  prefetchShareDialog
-} from '@/platform/workflow/sharing/composables/lazyShareDialog'
 import { useAppModeStore } from '@/stores/appModeStore'
-import { useCommandStore } from '@/stores/commandStore'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { cn } from '@comfyorg/tailwind-utils'
-import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
-const commandStore = useCommandStore()
-const workspaceStore = useWorkspaceStore()
 const { enableAppBuilder } = useAppMode()
 const appModeStore = useAppModeStore()
 const { enterBuilder } = appModeStore
-const { toastErrorHandler } = useErrorHandling()
-const { flags } = useFeatureFlags()
 const { hasNodes } = storeToRefs(appModeStore)
-const tooltipOptions = { showDelay: 300, hideDelay: 300 }
-
-const isAssetsActive = computed(
-  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'assets'
-)
-const isAppsActive = computed(
-  () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'apps'
-)
-
-function openAssets() {
-  void commandStore.execute('Workspace.ToggleSidebarTab.assets')
-}
-
-function showApps() {
-  void commandStore.execute('Workspace.ToggleSidebarTab.apps')
-}
 </script>
 
 <template>
   <div class="pointer-events-auto flex flex-row items-start gap-2">
-    <div class="pointer-events-auto flex flex-col gap-2">
-      <Button
-        v-if="enableAppBuilder"
-        v-tooltip.right="{
-          value: t('linearMode.appModeToolbar.appBuilder'),
-          ...tooltipOptions
-        }"
-        variant="secondary"
-        size="unset"
-        :disabled="!hasNodes"
-        :aria-label="t('linearMode.appModeToolbar.appBuilder')"
-        class="size-10 rounded-lg"
-        @click="enterBuilder"
-      >
-        <i class="icon-[lucide--hammer] size-4" />
-      </Button>
-      <Button
-        v-if="isCloud && flags.workflowSharingEnabled"
-        v-tooltip.right="{
-          value: t('actionbar.shareTooltip'),
-          ...tooltipOptions
-        }"
-        variant="secondary"
-        size="unset"
-        :aria-label="t('actionbar.shareTooltip')"
-        class="size-10 rounded-lg"
-        @click="() => openShareDialog().catch(toastErrorHandler)"
-        @pointerenter="prefetchShareDialog"
-      >
-        <i class="icon-[lucide--send] size-4" />
-      </Button>
-
-      <div
-        class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
-      >
-        <Button
-          v-tooltip.right="{
-            value: t('sideToolbar.mediaAssets.title'),
-            ...tooltipOptions
-          }"
-          variant="textonly"
-          size="unset"
-          :aria-label="t('sideToolbar.mediaAssets.title')"
-          :class="
-            cn('size-10', isAssetsActive && 'bg-secondary-background-hover')
-          "
-          @click="openAssets"
-        >
-          <i class="icon-[comfy--image-ai-edit] size-4" />
-        </Button>
-        <Button
-          v-tooltip.right="{
-            value: t('linearMode.appModeToolbar.apps'),
-            ...tooltipOptions
-          }"
-          variant="textonly"
-          size="unset"
-          :aria-label="t('linearMode.appModeToolbar.apps')"
-          :class="
-            cn('size-10', isAppsActive && 'bg-secondary-background-hover')
-          "
-          @click="showApps"
-        >
-          <i class="icon-[lucide--panels-top-left] size-4" />
-        </Button>
-      </div>
-    </div>
     <WorkflowActionsDropdown source="app_mode_toolbar" />
+    <Button
+      v-if="enableAppBuilder"
+      variant="base"
+      size="unset"
+      :disabled="!hasNodes"
+      :aria-label="t('linearMode.appModeToolbar.buildAnApp')"
+      class="h-10 gap-1.5 rounded-lg px-3 font-normal"
+      @click="enterBuilder"
+    >
+      <i class="icon-[lucide--hammer] size-4" />
+      <span>{{ t('linearMode.appModeToolbar.buildAnApp') }}</span>
+    </Button>
   </div>
 </template>

src/components/boundingBoxes/WidgetBoundingBoxes.vue

@@ -4,37 +4,67 @@
     data-testid="bounding-boxes"
     @pointerdown.stop
   >
-    <div
-      ref="canvasContainer"
-      class="relative w-full shrink-0 overflow-hidden rounded-sm border border-component-node-border bg-node-component-surface"
-      :style="canvasStyle"
-    >
-      <canvas
-        ref="canvasEl"
-        tabindex="0"
-        class="absolute inset-0 size-full rounded-sm outline-none"
-        :style="{ cursor: canvasCursor }"
-        @pointerdown="onPointerDown"
-        @pointermove="onCanvasPointerMove"
-        @pointerup="onDocPointerUp"
-        @pointercancel="onDocPointerUp"
-        @pointerleave="onPointerLeave"
-        @lostpointercapture="onDocPointerUp"
-        @dblclick="onDoubleClick"
-        @keydown="onCanvasKeyDown"
-        @focus="focused = true"
-        @blur="focused = false"
-      />
-      <textarea
-        v-if="inlineEditor"
-        ref="inlineEditorEl"
-        v-model="inlineEditor.value"
-        class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
-        :style="inlineEditor.style"
-        data-capture-wheel="true"
-        @keydown.stop="onInlineKeyDown"
-        @blur="commitInlineEditor"
-      />
+    <div class="flex flex-col">
+      <div
+        class="flex h-9 items-center gap-1 rounded-t-sm border border-b-0 border-component-node-border bg-component-node-widget-background px-2"
+      >
+        <Button
+          variant="textonly"
+          size="unset"
+          :aria-pressed="grid"
+          :class="
+            cn(
+              actionBtnClass,
+              grid && 'bg-component-node-widget-background-selected'
+            )
+          "
+          @click="grid = !grid"
+        >
+          <i class="icon-[lucide--grid-3x3] size-4" />
+          <span>{{ $t('boundingBoxes.grid') }}</span>
+        </Button>
+        <Button
+          variant="textonly"
+          size="unset"
+          :class="cn(actionBtnClass, 'ml-auto')"
+          @click="clearAll"
+        >
+          <i class="icon-[lucide--undo-2] size-4" />
+          <span>{{ $t('boundingBoxes.clearAll') }}</span>
+        </Button>
+      </div>
+      <div
+        ref="canvasContainer"
+        class="relative w-full shrink-0 overflow-hidden rounded-b-sm border border-t-0 border-component-node-border bg-base-background"
+        :style="canvasStyle"
+      >
+        <canvas
+          ref="canvasEl"
+          tabindex="0"
+          class="absolute inset-0 size-full rounded-sm text-node-component-slot-text outline-none"
+          :style="{ cursor: canvasCursor }"
+          @pointerdown="onPointerDown"
+          @pointermove="onCanvasPointerMove"
+          @pointerup="onDocPointerUp"
+          @pointercancel="onDocPointerUp"
+          @pointerleave="onPointerLeave"
+          @lostpointercapture="onDocPointerUp"
+          @dblclick="onDoubleClick"
+          @keydown="onCanvasKeyDown"
+          @focus="focused = true"
+          @blur="focused = false"
+        />
+        <textarea
+          v-if="inlineEditor"
+          ref="inlineEditorEl"
+          v-model="inlineEditor.value"
+          class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
+          :style="inlineEditor.style"
+          data-capture-wheel="true"
+          @keydown.stop="onInlineKeyDown"
+          @blur="commitInlineEditor"
+        />
+      </div>
     </div>
 
     <div
@@ -122,16 +152,6 @@
     <div v-else-if="hasRegions" class="text-node-text-muted px-1 text-xs">
       {{ $t('boundingBoxes.clickRegionToEdit') }}
     </div>
-
-    <Button
-      variant="secondary"
-      size="md"
-      class="gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground"
-      @click="clearAll"
-    >
-      <i class="icon-[lucide--undo-2]" />
-      {{ $t('boundingBoxes.clearAll') }}
-    </Button>
   </div>
 </template>
 
@@ -147,6 +167,9 @@ import { useBoundingBoxes } from '@/composables/boundingBoxes/useBoundingBoxes'
 import type { BoundingBox } from '@/types/boundingBoxes'
 import type { NodeId } from '@/types/nodeId'
 
+const actionBtnClass =
+  'flex shrink-0 items-center gap-1.5 rounded-md border-0 bg-transparent px-2 py-1 text-sm text-base-foreground outline-none transition-colors hover:bg-component-node-widget-background-hovered'
+
 const { nodeId } = defineProps<{ nodeId: NodeId }>()
 const modelValue = defineModel<BoundingBox[]>({ default: () => [] })
 
@@ -172,7 +195,8 @@ const {
   commitInlineEditor,
   setActiveType,
   clearAll,
-  syncState
+  syncState,
+  grid
 } = useBoundingBoxes(nodeId, {
   canvasEl,
   canvasContainer,

src/components/breadcrumb/SubgraphBreadcrumb.test.ts

@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SubgraphBreadcrumb from './SubgraphBreadcrumb.vue'
+
+const canvasState = vi.hoisted(() => ({ linearMode: false }))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({ activeWorkflow: { filename: 'workflow.json' } })
+}))
+
+vi.mock('@/stores/subgraphNavigationStore', () => ({
+  useSubgraphNavigationStore: () => ({ navigationStack: [] })
+}))
+
+vi.mock('@/stores/subgraphStore', () => ({
+  useSubgraphStore: () => ({ isSubgraphBlueprint: () => false })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({ linearMode: canvasState.linearMode })
+}))
+
+vi.mock('@/composables/element/useOverflowObserver', () => ({
+  useOverflowObserver: () => ({
+    dispose: vi.fn(),
+    checkOverflow: vi.fn(),
+    disposed: { value: false }
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: { g: { graphNavigation: 'Graph navigation' } }
+  }
+})
+
+function renderBreadcrumb() {
+  return render(SubgraphBreadcrumb, {
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: {} },
+      stubs: {
+        WorkflowActionsDropdown: { template: '<div data-testid="wad" />' },
+        Breadcrumb: true,
+        Button: true,
+        SubgraphBreadcrumbItem: true
+      }
+    }
+  })
+}
+
+describe('SubgraphBreadcrumb', () => {
+  beforeEach(() => {
+    canvasState.linearMode = false
+  })
+
+  it('renders the workflow actions dropdown when not in linear mode', () => {
+    renderBreadcrumb()
+    expect(screen.getByTestId('wad')).toBeInTheDocument()
+  })
+
+  it('hides the workflow actions dropdown in linear mode', () => {
+    canvasState.linearMode = true
+    renderBreadcrumb()
+    expect(screen.queryByTestId('wad')).not.toBeInTheDocument()
+  })
+})

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -14,7 +14,10 @@
       '--p-breadcrumb-icon-width': `${ICON_WIDTH}px`
     }"
   >
-    <WorkflowActionsDropdown source="breadcrumb_subgraph_menu_selected" />
+    <WorkflowActionsDropdown
+      v-if="!canvasStore.linearMode"
+      source="breadcrumb_subgraph_menu_selected"
+    />
     <Button
       v-if="isInSubgraph"
       class="back-button pointer-events-auto ml-1.5 size-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
@@ -71,6 +74,7 @@ const ICON_WIDTH = 20
 
 const workflowStore = useWorkflowStore()
 const navigationStore = useSubgraphNavigationStore()
+const canvasStore = useCanvasStore()
 const breadcrumbRef = ref<InstanceType<typeof Breadcrumb>>()
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 const isBlueprint = computed(() =>
@@ -91,7 +95,7 @@ const home = computed(() => ({
       button_id: 'breadcrumb_subgraph_root_selected',
       element_group: 'breadcrumb'
     })
-    const canvas = useCanvasStore().getCanvas()
+    const canvas = canvasStore.getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
     canvas.setGraph(canvas.graph.rootGraph)
@@ -107,13 +111,13 @@ const items = computed(() => {
         button_id: 'breadcrumb_subgraph_item_selected',
         element_group: 'breadcrumb'
       })
-      const canvas = useCanvasStore().getCanvas()
+      const canvas = canvasStore.getCanvas()
       if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
       canvas.setGraph(subgraph)
     },
     updateTitle: (title: string) => {
-      const rootGraph = useCanvasStore().getCanvas().graph?.rootGraph
+      const rootGraph = canvasStore.getCanvas().graph?.rootGraph
       if (!rootGraph) return
 
       forEachSubgraphNode(rootGraph, subgraph.id, (node) => {

src/components/common/WorkflowActionsDropdown.test.ts

@@ -0,0 +1,285 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import type { ViewMode } from '@/utils/appMode'
+
+import WorkflowActionsDropdown from './WorkflowActionsDropdown.vue'
+
+const spies = vi.hoisted(() => ({
+  execute: vi.fn(),
+  trackUiButtonClicked: vi.fn(),
+  markAsSeen: vi.fn()
+}))
+
+const viewState = vi.hoisted(() => ({
+  viewMode: 'graph' as ViewMode,
+  displayViewMode: 'graph' as ViewMode
+}))
+
+vi.mock('@/stores/appModeStore', async () => {
+  const { computed, reactive } = await import('vue')
+  return {
+    useAppModeStore: () =>
+      reactive({
+        viewMode: computed(() => viewState.viewMode),
+        displayViewMode: computed(() => viewState.displayViewMode)
+      })
+  }
+})
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({ execute: spies.execute, commands: [] })
+}))
+
+vi.mock('@/platform/keybindings/keybindingStore', () => ({
+  useKeybindingStore: () => ({
+    getKeybindingByCommandId: () => ({ combo: { toString: () => 'Ctrl+L' } })
+  })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackUiButtonClicked: spies.trackUiButtonClicked })
+}))
+
+vi.mock('@/composables/useWorkflowActionsMenu', async () => {
+  const { ref } = await import('vue')
+  return { useWorkflowActionsMenu: () => ({ menuItems: ref([]) }) }
+})
+
+vi.mock('@/composables/useNewMenuItemIndicator', async () => {
+  const { ref } = await import('vue')
+  return {
+    useNewMenuItemIndicator: () => ({
+      hasUnseenItems: ref(true),
+      markAsSeen: spies.markAsSeen
+    })
+  }
+})
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { shortcutSuffix: ' ({shortcut})' },
+      breadcrumbsMenu: {
+        graph: 'Graph',
+        app: 'App',
+        enterNodeGraph: 'Enter node graph',
+        enterAppMode: 'Enter app mode',
+        workflowActions: 'Workflow actions',
+        activeModeWorkflowActions: '{mode} mode, workflow actions'
+      }
+    }
+  }
+})
+
+function renderDropdown() {
+  const user = userEvent.setup()
+  const result = render(WorkflowActionsDropdown, {
+    props: { source: 'test' },
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: {} },
+      stubs: {
+        DropdownMenuPortal: { template: '<div><slot /></div>' },
+        DropdownMenuContent: { template: '<div role="menu"><slot /></div>' },
+        WorkflowActionsList: true
+      }
+    }
+  })
+  return { ...result, user }
+}
+
+describe('WorkflowActionsDropdown', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    viewState.viewMode = 'graph'
+    viewState.displayViewMode = 'graph'
+    // A prior test's segment switch arms the module-level focus handoff;
+    // a throwaway mount consumes it so it cannot steal focus mid-test.
+    renderDropdown().unmount()
+  })
+
+  it('keeps the active segment label in its accessible name alongside the actions label', () => {
+    renderDropdown()
+
+    // Graph is the active segment, so its name must contain the visible "Graph"
+    // label (label-in-name) while still matching the "Workflow actions" trigger.
+    const active = screen.getByRole('button', { name: /workflow actions/ })
+    expect(active).toHaveAttribute('aria-label', 'Graph mode, workflow actions')
+  })
+
+  it('labels the inactive segment with its switch action only', () => {
+    renderDropdown()
+
+    // getByRole with a string name requires an exact accessible-name match,
+    // so this also proves the name has no "mode, workflow actions" suffix.
+    expect(
+      screen.getByRole('button', { name: 'Enter app mode' })
+    ).toBeInTheDocument()
+  })
+
+  it('flips the segment roles when app mode is active', () => {
+    viewState.viewMode = 'app'
+    viewState.displayViewMode = 'app'
+    renderDropdown()
+
+    const active = screen.getByRole('button', { name: /workflow actions/ })
+    expect(active).toHaveAttribute('aria-label', 'App mode, workflow actions')
+    expect(
+      screen.getByRole('button', { name: 'Enter node graph' })
+    ).toBeInTheDocument()
+  })
+
+  it('derives the active segment from the real mode, not the lagged display mode', () => {
+    // Mid-animation: the mode has flipped to app but the display still lags.
+    viewState.viewMode = 'app'
+    viewState.displayViewMode = 'graph'
+    renderDropdown()
+
+    const active = screen.getByRole('button', { name: /workflow actions/ })
+    expect(active).toHaveAttribute('aria-label', 'App mode, workflow actions')
+    expect(
+      screen.getByRole('button', { name: 'Enter node graph' })
+    ).toBeInTheDocument()
+  })
+
+  it('carries the popup semantics only on the active segment', () => {
+    renderDropdown()
+
+    const active = screen.getByRole('button', { name: /workflow actions/ })
+    expect(active).toHaveAttribute('aria-haspopup', 'menu')
+    expect(active).toHaveAttribute('aria-expanded', 'false')
+    expect(
+      screen.getByRole('button', { name: 'Enter app mode' })
+    ).not.toHaveAttribute('aria-haspopup')
+  })
+
+  it('toggles the view mode when the inactive segment is clicked', async () => {
+    const { user } = renderDropdown()
+
+    await user.click(screen.getByRole('button', { name: 'Enter app mode' }))
+
+    expect(spies.execute).toHaveBeenCalledWith('Comfy.ToggleLinear', {
+      metadata: { source: 'test' }
+    })
+    // The switch must not also open the menu as a side effect.
+    expect(
+      screen.getByRole('button', { name: /workflow actions/ })
+    ).toHaveAttribute('aria-expanded', 'false')
+    expect(spies.trackUiButtonClicked).not.toHaveBeenCalled()
+    expect(spies.markAsSeen).not.toHaveBeenCalled()
+  })
+
+  it('opens the menu instead of toggling the mode when the active segment is clicked', async () => {
+    const { user } = renderDropdown()
+    const active = screen.getByRole('button', { name: /workflow actions/ })
+
+    await user.click(active)
+
+    expect(spies.execute).not.toHaveBeenCalled()
+    expect(active).toHaveAttribute('aria-expanded', 'true')
+    expect(spies.markAsSeen).toHaveBeenCalled()
+    expect(spies.trackUiButtonClicked).toHaveBeenCalledWith({
+      button_id: 'test',
+      element_group: 'workflow_actions'
+    })
+  })
+
+  it('closes the menu when the open trigger is clicked again', async () => {
+    const { user } = renderDropdown()
+    const active = screen.getByRole('button', { name: /workflow actions/ })
+
+    await user.click(active)
+    await user.click(active)
+
+    expect(active).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  it('switches mode when the inactive segment is activated by keyboard', async () => {
+    const { user } = renderDropdown()
+    const inactive = screen.getByRole('button', { name: 'Enter app mode' })
+
+    inactive.focus()
+    await user.keyboard('{Enter}')
+
+    expect(spies.execute).toHaveBeenCalledWith('Comfy.ToggleLinear', {
+      metadata: { source: 'test' }
+    })
+    // The keydown must not reach the trigger and open the menu.
+    expect(
+      screen.getByRole('button', { name: /workflow actions/ })
+    ).toHaveAttribute('aria-expanded', 'false')
+    expect(spies.trackUiButtonClicked).not.toHaveBeenCalled()
+  })
+
+  it('lets non-trigger keys bubble past the inactive segment', async () => {
+    const { user } = renderDropdown()
+    const bubbledKeys: string[] = []
+    const recordKey = (event: KeyboardEvent) => bubbledKeys.push(event.key)
+    document.addEventListener('keydown', recordKey)
+
+    screen.getByRole('button', { name: 'Enter app mode' }).focus()
+    await user.keyboard('r{Enter}')
+    document.removeEventListener('keydown', recordKey)
+
+    // App-level keybindings rely on keydowns bubbling; only the keys that
+    // would open the reka trigger may be stopped.
+    expect(bubbledKeys).toContain('r')
+    expect(bubbledKeys).not.toContain('Enter')
+  })
+
+  it('opens the menu when the active segment is activated by keyboard', async () => {
+    const { user } = renderDropdown()
+    const active = screen.getByRole('button', { name: /workflow actions/ })
+
+    active.focus()
+    await user.keyboard('{Enter}')
+
+    expect(spies.execute).not.toHaveBeenCalled()
+    expect(active).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('opens the menu on ArrowDown on the active segment', async () => {
+    const { user } = renderDropdown()
+    const active = screen.getByRole('button', { name: /workflow actions/ })
+
+    active.focus()
+    await user.keyboard('{ArrowDown}')
+
+    expect(active).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('forwards focus from the toggle group to the active segment', () => {
+    renderDropdown()
+
+    // Reka returns focus to the trigger div when the menu closes; the div
+    // hands it on so focus lands on an interactive element.
+    screen.getByRole('group', { name: 'Workflow actions' }).focus()
+
+    expect(
+      screen.getByRole('button', { name: /workflow actions/ })
+    ).toHaveFocus()
+  })
+
+  it('focuses the newly mounted toggle after a segment-initiated switch', async () => {
+    const { user, unmount } = renderDropdown()
+    await user.click(screen.getByRole('button', { name: 'Enter app mode' }))
+
+    // The mode flip unmounts this instance and mounts a fresh one in the
+    // other mode's host.
+    unmount()
+    viewState.viewMode = 'app'
+    viewState.displayViewMode = 'app'
+    renderDropdown()
+    await nextTick()
+
+    expect(
+      screen.getByRole('button', { name: /workflow actions/ })
+    ).toHaveFocus()
+  })
+})

src/components/common/WorkflowActionsDropdown.vue

@@ -1,11 +1,19 @@
+<script lang="ts">
+// A segment switch unmounts the focused toggle instance and mounts a fresh
+// one in the other mode's host, so the focus handoff is tracked at module
+// scope where both instances can reach it.
+let restoreFocusOnMount = false
+</script>
+
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import {
   DropdownMenuContent,
   DropdownMenuPortal,
   DropdownMenuRoot,
   DropdownMenuTrigger
 } from 'reka-ui'
-import { ref } from 'vue'
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
@@ -14,8 +22,21 @@ import { useNewMenuItemIndicator } from '@/composables/useNewMenuItemIndicator'
 import { useWorkflowActionsMenu } from '@/composables/useWorkflowActionsMenu'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useTelemetry } from '@/platform/telemetry'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useAppModeStore } from '@/stores/appModeStore'
 import { useCommandStore } from '@/stores/commandStore'
+import type { ViewMode } from '@/utils/appMode'
+
+interface ViewModeSegment {
+  mode: ViewMode
+  icon: string
+  label: string
+  switchLabel: string
+  switchTooltip: string
+  /** Drives behavior and aria; flips as soon as the mode changes. */
+  active: boolean
+  /** Frame-lagged mirror of {@link active} that drives the morph order. */
+  displayActive: boolean
+}
 
 const { source, align = 'start' } = defineProps<{
   source: string
@@ -23,46 +44,111 @@ const { source, align = 'start' } = defineProps<{
 }>()
 
 const { t } = useI18n()
-const canvasStore = useCanvasStore()
 const keybindingStore = useKeybindingStore()
 const dropdownOpen = ref(false)
+const appModeStore = useAppModeStore()
 
 const { menuItems } = useWorkflowActionsMenu(
   () => useCommandStore().execute('Comfy.RenameWorkflow'),
   { isRoot: true }
 )
-
 const { hasUnseenItems, markAsSeen } = useNewMenuItemIndicator(
   () => menuItems.value
 )
 
-function handleOpen(open: boolean) {
-  if (open) {
-    markAsSeen()
-    useTelemetry()?.trackUiButtonClicked({
-      button_id: source,
-      element_group: 'workflow_actions'
-    })
-  }
-}
-
-function toggleModeTooltip() {
-  const label = canvasStore.linearMode
-    ? t('breadcrumbsMenu.enterNodeGraph')
-    : t('breadcrumbsMenu.enterAppMode')
+const toggleShortcut = computed(() => {
   const shortcut = keybindingStore
     .getKeybindingByCommandId('Comfy.ToggleLinear')
     ?.combo.toString()
-  return label + (shortcut ? t('g.shortcutSuffix', { shortcut }) : '')
+  return shortcut ? t('g.shortcutSuffix', { shortcut }) : ''
+})
+
+const segments = computed<ViewModeSegment[]>(() =>
+  (
+    [
+      {
+        mode: 'graph',
+        icon: 'icon-[comfy--workflow]',
+        label: t('breadcrumbsMenu.graph'),
+        switchLabel: t('breadcrumbsMenu.enterNodeGraph'),
+        switchTooltip:
+          t('breadcrumbsMenu.enterNodeGraph') + toggleShortcut.value
+      },
+      {
+        mode: 'app',
+        icon: 'icon-[lucide--panels-top-left]',
+        label: t('breadcrumbsMenu.app'),
+        switchLabel: t('breadcrumbsMenu.enterAppMode'),
+        switchTooltip: t('breadcrumbsMenu.enterAppMode') + toggleShortcut.value
+      }
+    ] as const
+  ).map((seg) => ({
+    ...seg,
+    active: appModeStore.viewMode === seg.mode,
+    displayActive: appModeStore.displayViewMode === seg.mode
+  }))
+)
+
+// Display-inactive segment first (left), display-active last (right). The
+// reorder on mode switch is what TransitionGroup FLIP-animates.
+const orderedSegments = computed(() => {
+  const [graph, app] = segments.value
+  return graph.displayActive ? [app, graph] : [graph, app]
+})
+
+function onOpenChange(open: boolean) {
+  dropdownOpen.value = open
+  if (!open) return
+  markAsSeen()
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: source,
+    element_group: 'workflow_actions'
+  })
 }
 
-function toggleLinearMode() {
+function switchMode() {
   dropdownOpen.value = false
+  restoreFocusOnMount = true
   void useCommandStore().execute('Comfy.ToggleLinear', {
     metadata: { source }
   })
 }
 
+function onSegmentClick(seg: ViewModeSegment, event: MouseEvent) {
+  if (seg.active) return
+  event.stopPropagation()
+  switchMode()
+}
+
+/** Keys the reka trigger opens the menu on; other keys bubble on so app-level
+ *  keybindings keep working while a segment has focus. */
+const MENU_TRIGGER_KEYS = new Set(['Enter', ' ', 'ArrowDown'])
+
+function onSegmentKeydown(seg: ViewModeSegment, event: KeyboardEvent) {
+  if (!seg.active && MENU_TRIGGER_KEYS.has(event.key)) event.stopPropagation()
+}
+
+const toggleRef = useTemplateRef<HTMLDivElement>('toggleRef')
+
+// The trigger div carries role="group" (permitting the aria-label, prohibited
+// on a plain div, that names the menu via reka's aria-labelledby) and
+// tabindex="-1" so reka's close-focus (e.g. Escape closing the menu) lands
+// there; its @focus forwards focus here, to the active segment. Also called
+// when this instance mounts to replace the one unmounted by a
+// segment-initiated mode switch.
+function focusActiveSegment() {
+  toggleRef.value
+    ?.querySelector<HTMLButtonElement>('button[aria-haspopup]')
+    ?.focus()
+}
+
+onMounted(async () => {
+  if (!restoreFocusOnMount) return
+  restoreFocusOnMount = false
+  await nextTick()
+  focusActiveSegment()
+})
+
 const tooltipPt = {
   root: {
     style: {
@@ -75,80 +161,100 @@ const tooltipPt = {
     style: { whiteSpace: 'nowrap' }
   },
   arrow: {
-    class: '!left-[16px]'
+    style: { left: '16px' }
   }
 }
 </script>
 
 <template>
   <DropdownMenuRoot
-    v-model:open="dropdownOpen"
+    :open="dropdownOpen"
     :modal="false"
-    @update:open="handleOpen"
+    @update:open="onOpenChange"
   >
-    <slot name="button" :has-unseen-items="hasUnseenItems">
+    <DropdownMenuTrigger as-child>
       <div
-        class="pointer-events-auto inline-flex items-center rounded-lg bg-secondary-background"
+        ref="toggleRef"
+        data-testid="view-mode-toggle"
+        role="group"
+        tabindex="-1"
+        :aria-label="t('breadcrumbsMenu.workflowActions')"
+        class="group pointer-events-auto relative inline-block shrink-0 rounded-lg bg-base-background p-1"
+        @focus="focusActiveSegment"
       >
-        <Button
-          v-tooltip.bottom="{
-            value: toggleModeTooltip(),
-            showDelay: 300,
-            hideDelay: 300,
-            pt: tooltipPt
-          }"
-          :aria-label="
-            canvasStore.linearMode
-              ? t('breadcrumbsMenu.enterNodeGraph')
-              : t('breadcrumbsMenu.enterAppMode')
-          "
-          variant="base"
-          class="m-1"
-          @pointerdown.stop
-          @click="toggleLinearMode"
+        <TransitionGroup
+          tag="div"
+          move-class="transition-[background-color,color,transform] duration-200"
+          class="flex items-center gap-1"
         >
-          <i
-            class="size-4"
-            :class="
-              canvasStore.linearMode
-                ? 'icon-[lucide--panels-top-left]'
-                : 'icon-[comfy--workflow]'
-            "
-          />
-        </Button>
-        <DropdownMenuTrigger as-child>
           <Button
-            v-tooltip="{
-              value: t('breadcrumbsMenu.workflowActions'),
+            v-for="seg in orderedSegments"
+            :key="seg.mode"
+            v-tooltip.bottom="{
+              value: seg.active
+                ? t('breadcrumbsMenu.workflowActions')
+                : seg.switchTooltip,
               showDelay: 300,
-              hideDelay: 300
+              hideDelay: 300,
+              pt: seg.active ? undefined : tooltipPt
             }"
-            variant="secondary"
+            type="button"
+            variant="textonly"
             size="unset"
-            :aria-label="t('breadcrumbsMenu.workflowActions')"
-            class="relative h-10 gap-1 rounded-lg pr-2 pl-2.5 text-center data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
+            :aria-label="
+              seg.active
+                ? t('breadcrumbsMenu.activeModeWorkflowActions', {
+                    mode: seg.label
+                  })
+                : seg.switchLabel
+            "
+            :aria-haspopup="seg.active ? 'menu' : undefined"
+            :aria-expanded="seg.active ? dropdownOpen : undefined"
+            :class="
+              cn(
+                'relative flex h-8 items-center gap-0 rounded-md font-normal transition-[background-color,color,transform] duration-200',
+                seg.displayActive
+                  ? 'bg-secondary-background pr-2 pl-2.5 text-base-foreground group-data-[state=open]:bg-secondary-background-hover group-data-[state=open]:shadow-interface hover:bg-secondary-background'
+                  : 'w-8 justify-center bg-transparent text-muted-foreground hover:bg-secondary-background hover:text-base-foreground'
+              )
+            "
+            @click="onSegmentClick(seg, $event)"
+            @keydown="onSegmentKeydown(seg, $event)"
           >
-            <span>{{
-              canvasStore.linearMode
-                ? t('breadcrumbsMenu.app')
-                : t('breadcrumbsMenu.graph')
-            }}</span>
-            <i
-              class="icon-[lucide--chevron-down] size-4 text-muted-foreground"
-            />
+            <i :class="cn('size-4 shrink-0', seg.icon)" aria-hidden="true" />
             <span
-              v-if="hasUnseenItems"
+              :class="
+                cn(
+                  'grid transition-[grid-template-columns,opacity] duration-200',
+                  seg.displayActive
+                    ? 'ml-1.5 grid-cols-[1fr] opacity-100'
+                    : 'grid-cols-[0fr] opacity-0'
+                )
+              "
+            >
+              <span
+                class="flex min-w-0 items-center overflow-hidden text-sm leading-none whitespace-nowrap"
+              >
+                {{ seg.label }}
+                <i
+                  class="ml-1 icon-[lucide--chevron-down] size-4 shrink-0 text-muted-foreground"
+                  aria-hidden="true"
+                />
+              </span>
+            </span>
+            <span
+              v-if="seg.active && hasUnseenItems"
               aria-hidden="true"
               class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary-background"
             />
           </Button>
-        </DropdownMenuTrigger>
+        </TransitionGroup>
       </div>
-    </slot>
+    </DropdownMenuTrigger>
     <DropdownMenuPortal>
       <DropdownMenuContent
         :align
-        :side-offset="5"
+        :side-offset="8"
         :collision-padding="10"
         class="z-1000 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
       >

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -97,7 +97,7 @@
         <!-- Sort Options -->
         <div>
           <SingleSelect
-            v-model="sortBy"
+            v-model="sortSelection"
             :label="$t('templateWorkflows.sorting', 'Sort by')"
             :options="sortOptions"
             :content-style="selectContentStyle"
@@ -556,7 +556,8 @@ const {
   selectedModels,
   selectedUseCases,
   selectedRunsOn,
-  sortBy,
+  sortSelection,
+  hasActiveQuery,
   activeModels,
   activeUseCases,
   filteredTemplates,
@@ -565,14 +566,13 @@ const {
   availableRunsOn,
   filteredCount,
   totalCount,
-  resetFilters,
-  loadFuseOptions
+  resetFilters
 } = useTemplateFiltering(navigationFilteredTemplates)
 
 /**
  * Raw search input bound to the search box. The actual `searchQuery` consumed
  * by the filtering composable is only updated via `applySearchQuery` after the
- * debounce settles, keeping Fuse/grid re-renders off the keystroke critical path.
+ * debounce settles, keeping search/grid re-renders off the keystroke critical path.
  */
 const searchInput = ref(searchQuery.value)
 
@@ -595,15 +595,13 @@ watch(searchQuery, (value) => {
  */
 const coordinateNavAndSort = (source: 'nav' | 'sort') => {
   const isPopularNav = selectedNavItem.value === 'popular'
-  const isPopularSort = sortBy.value === 'popular'
+  const isPopularSort = sortSelection.value === 'popular'
 
   if (source === 'nav') {
     if (isPopularNav && !isPopularSort) {
-      // When navigating to 'Popular' category, automatically set sort to 'Popular'.
-      sortBy.value = 'popular'
+      sortSelection.value = 'popular'
     } else if (!isPopularNav && isPopularSort) {
-      // When navigating away from 'Popular' category while sort is 'Popular', reset sort to default.
-      sortBy.value = 'default'
+      sortSelection.value = 'default'
     }
   } else if (source === 'sort') {
     // When sort is changed away from 'Popular' while in the 'Popular' category,
@@ -616,7 +614,7 @@ const coordinateNavAndSort = (source: 'nav' | 'sort') => {
 
 // Watch for changes from the two sources ('nav' and 'sort') and trigger the coordinator.
 watch(selectedNavItem, () => coordinateNavAndSort('nav'))
-watch(sortBy, () => coordinateNavAndSort('sort'))
+watch(sortSelection, () => coordinateNavAndSort('sort'))
 
 // Convert between string array and object array for MultiSelect component
 // Only show selected items that exist in the current scope
@@ -726,8 +724,15 @@ const runsOnFilterLabel = computed(() => {
   }
 })
 
-// Sort options
 const sortOptions = computed(() => [
+  ...(hasActiveQuery.value
+    ? [
+        {
+          name: t('templateWorkflows.sort.relevance', 'Relevance'),
+          value: 'relevance'
+        }
+      ]
+    : []),
   {
     name: t('templateWorkflows.sort.default', 'Default'),
     value: 'default'
@@ -789,7 +794,7 @@ watch(
   [
     filteredTemplates,
     selectedNavItem,
-    sortBy,
+    sortSelection,
     selectedModels,
     selectedUseCases,
     selectedRunsOn
@@ -839,8 +844,7 @@ const { isLoading } = useAsyncState(
   async () => {
     await Promise.all([
       loadTemplates(),
-      workflowTemplatesStore.loadWorkflowTemplates(),
-      loadFuseOptions()
+      workflowTemplatesStore.loadWorkflowTemplates()
     ])
     return true
   },

src/components/graph/GraphCanvas.vue

@@ -18,8 +18,8 @@
         </div>
       </div>
     </template>
-    <template v-if="showUI && !isBuilderMode" #side-toolbar>
-      <SideToolbar />
+    <template #side-toolbar>
+      <SideToolbar v-if="showUI && !isBuilderMode && !linearMode" />
     </template>
     <template v-if="showUI" #side-bar-panel>
       <div

src/components/load3d/Load3D.test.ts

@@ -128,9 +128,9 @@ function renderLoad3D(options: RenderOptions = {}) {
             name: 'AnimationControls',
             template: '<div data-testid="animation-controls" />'
           },
-          RecordingControls: {
-            name: 'RecordingControls',
-            template: '<div data-testid="recording-controls" />'
+          RecordMenuControl: {
+            name: 'RecordMenuControl',
+            template: '<div data-testid="record-menu-control" />'
           },
           ViewerControls: {
             name: 'ViewerControls',
@@ -232,14 +232,16 @@ describe('Load3D', () => {
   })
 
   describe('recording controls', () => {
-    it('renders RecordingControls in regular (non-preview) mode', () => {
+    it('renders the record control in regular (non-preview) mode', () => {
       renderLoad3D({ stateOverrides: { isPreview: ref(false) } })
-      expect(screen.getByTestId('recording-controls')).toBeInTheDocument()
+      expect(screen.getByTestId('record-menu-control')).toBeInTheDocument()
     })
 
-    it('hides RecordingControls in preview mode', () => {
+    it('hides the record control in preview mode', () => {
       renderLoad3D({ stateOverrides: { isPreview: ref(true) } })
-      expect(screen.queryByTestId('recording-controls')).not.toBeInTheDocument()
+      expect(
+        screen.queryByTestId('record-menu-control')
+      ).not.toBeInTheDocument()
     })
   })
 

src/components/load3d/Load3D.vue

@@ -15,25 +15,39 @@
       :is-preview="isPreview"
     />
     <div class="pointer-events-none absolute top-0 left-0 size-full">
-      <Load3DControls
+      <Load3DMenuBar
         v-model:scene-config="sceneConfig"
         v-model:model-config="modelConfig"
         v-model:camera-config="cameraConfig"
         v-model:light-config="lightConfig"
+        v-model:is-recording="isRecording"
+        v-model:has-recording="hasRecording"
+        v-model:recording-duration="recordingDuration"
         :can-use-gizmo="canUseGizmo"
         :can-use-lighting="canUseLighting"
         :can-export="canExport"
         :can-use-hdri="canUseHdri"
         :can-use-background-image="canUseBackgroundImage"
+        :can-fit-to-viewer="canFitToViewer"
+        :can-center-camera-on-model="canCenterCameraOnModel"
+        :node="node as LGraphNode"
+        :enable-viewer="enable3DViewer"
+        :can-use-recording="canUseRecording && !isPreview"
         :material-modes="materialModes"
         :has-skeleton="hasSkeleton"
         :source-format="sourceFormat"
         @update-background-image="handleBackgroundImageUpdate"
-        @export-model="handleExportModel"
         @update-hdri-file="handleHDRIFileUpdate"
+        @export-model="handleExportModel"
+        @fit-to-viewer="handleFitToViewer"
+        @center-camera="handleCenterCameraOnModel"
         @toggle-gizmo="handleToggleGizmo"
         @set-gizmo-mode="handleSetGizmoMode"
         @reset-gizmo-transform="handleResetGizmoTransform"
+        @start-recording="handleStartRecording"
+        @stop-recording="handleStopRecording"
+        @export-recording="handleExportRecording"
+        @clear-recording="handleClearRecording"
       />
       <AnimationControls
         v-if="animations && animations.length > 0"
@@ -46,59 +60,6 @@
         @seek="handleSeek"
       />
     </div>
-    <div
-      class="pointer-events-auto absolute top-12 right-2 z-20 flex flex-col gap-2"
-    >
-      <div
-        v-if="canFitToViewer || canCenterCameraOnModel"
-        class="flex flex-col rounded-lg bg-backdrop/30"
-      >
-        <Button
-          v-if="canFitToViewer"
-          v-tooltip.left="{
-            value: $t('load3d.fitToViewer'),
-            showDelay: 300
-          }"
-          size="icon"
-          variant="textonly"
-          class="rounded-full"
-          :aria-label="$t('load3d.fitToViewer')"
-          @click="handleFitToViewer"
-        >
-          <i class="pi pi-window-maximize text-lg text-base-foreground" />
-        </Button>
-        <Button
-          v-if="canCenterCameraOnModel"
-          v-tooltip.left="{
-            value: $t('load3d.centerCameraOnModel'),
-            showDelay: 300
-          }"
-          size="icon"
-          variant="textonly"
-          class="rounded-full"
-          :aria-label="$t('load3d.centerCameraOnModel')"
-          @click="handleCenterCameraOnModel"
-        >
-          <i class="pi pi-compass text-lg text-base-foreground" />
-        </Button>
-      </div>
-
-      <ViewerControls
-        v-if="enable3DViewer && node"
-        :node="node as LGraphNode"
-      />
-
-      <RecordingControls
-        v-if="canUseRecording && !isPreview"
-        v-model:is-recording="isRecording"
-        v-model:has-recording="hasRecording"
-        v-model:recording-duration="recordingDuration"
-        @start-recording="handleStartRecording"
-        @stop-recording="handleStopRecording"
-        @export-recording="handleExportRecording"
-        @clear-recording="handleClearRecording"
-      />
-    </div>
   </div>
 </template>
 
@@ -106,12 +67,9 @@
 import { computed, onMounted, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import Load3DControls from '@/components/load3d/Load3DControls.vue'
+import Load3DMenuBar from '@/components/load3d/Load3DMenuBar.vue'
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
-import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
-import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
-import Button from '@/components/ui/button/Button.vue'
 import { useLoad3d } from '@/composables/useLoad3d'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -192,11 +150,11 @@ const {
   handleHDRIFileUpdate,
   handleExportModel,
   handleModelDrop,
+  handleFitToViewer,
+  handleCenterCameraOnModel,
   handleToggleGizmo,
   handleSetGizmoMode,
   handleResetGizmoTransform,
-  handleFitToViewer,
-  handleCenterCameraOnModel,
   cleanup
 } = useLoad3d(node as Ref<LGraphNode | null>)
 

src/components/load3d/Load3DMenuBar.test.ts

@@ -0,0 +1,242 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { createI18n } from 'vue-i18n'
+
+import Load3DMenuBar from '@/components/load3d/Load3DMenuBar.vue'
+import type {
+  CameraConfig,
+  LightConfig,
+  ModelConfig,
+  SceneConfig
+} from '@/extensions/core/load3d/interfaces'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function makeSceneConfig(): SceneConfig {
+  return {
+    showGrid: true,
+    backgroundColor: '#000000',
+    backgroundImage: '',
+    backgroundRenderMode: 'tiled'
+  }
+}
+
+function makeModelConfig(): ModelConfig {
+  return {
+    upDirection: 'original',
+    materialMode: 'original',
+    showSkeleton: false,
+    gizmo: {
+      enabled: false,
+      mode: 'translate',
+      position: { x: 0, y: 0, z: 0 },
+      rotation: { x: 0, y: 0, z: 0 },
+      scale: { x: 1, y: 1, z: 1 }
+    }
+  }
+}
+
+function makeCameraConfig(): CameraConfig {
+  return { cameraType: 'perspective', fov: 75 }
+}
+
+function makeLightConfig(): LightConfig {
+  return {
+    intensity: 5,
+    hdri: {
+      enabled: false,
+      hdriPath: '',
+      showAsBackground: false,
+      intensity: 1
+    }
+  }
+}
+
+type RenderProps = Partial<ComponentProps<typeof Load3DMenuBar>>
+
+function renderMenuBar(overrides: RenderProps = {}) {
+  const result = render(Load3DMenuBar, {
+    props: {
+      sceneConfig: makeSceneConfig(),
+      modelConfig: makeModelConfig(),
+      cameraConfig: makeCameraConfig(),
+      lightConfig: makeLightConfig(),
+      ...overrides
+    },
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: () => {} }
+    }
+  })
+  return { ...result, user: userEvent.setup() }
+}
+
+async function selectCategory(
+  user: ReturnType<typeof userEvent.setup>,
+  label: string
+) {
+  await openCategoryMenu(user)
+  await user.click(screen.getByRole('button', { name: label }))
+}
+
+async function openCategoryMenu(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(screen.getByRole('button', { name: /Scene/ }))
+}
+
+describe('Load3DMenuBar', () => {
+  it('shows scene controls by default', () => {
+    renderMenuBar()
+    expect(
+      screen.getByRole('button', { name: 'Show grid' })
+    ).toBeInTheDocument()
+  })
+
+  it('toggles showGrid on the bound config when the grid button is clicked', async () => {
+    const sceneConfig = makeSceneConfig()
+    const { user } = renderMenuBar({ sceneConfig })
+
+    await user.click(screen.getByRole('button', { name: 'Show grid' }))
+
+    expect(sceneConfig.showGrid).toBe(false)
+  })
+
+  it('emits fitToViewer when the fit button is clicked', async () => {
+    const onFitToViewer = vi.fn()
+    const { user } = renderMenuBar({ onFitToViewer })
+
+    await user.click(screen.getByRole('button', { name: 'Fit to Viewer' }))
+
+    expect(onFitToViewer).toHaveBeenCalledOnce()
+  })
+
+  it('emits centerCamera when the center button is clicked', async () => {
+    const onCenterCamera = vi.fn()
+    const { user } = renderMenuBar({ onCenterCamera })
+
+    await user.click(
+      screen.getByRole('button', { name: 'Center Camera on Model' })
+    )
+
+    expect(onCenterCamera).toHaveBeenCalledOnce()
+  })
+
+  it('hides the center button when canCenterCameraOnModel is false', () => {
+    renderMenuBar({ canCenterCameraOnModel: false })
+
+    expect(
+      screen.queryByRole('button', { name: 'Center Camera on Model' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('toggles the gizmo and reveals the mode controls inline', async () => {
+    const onToggleGizmo = vi.fn()
+    const onSetGizmoMode = vi.fn()
+    const { user } = renderMenuBar({ onToggleGizmo, onSetGizmoMode })
+
+    await selectCategory(user, 'Gizmo')
+    // The chip and the enable toggle share the 'Gizmo' name; click the toggle.
+    const gizmoButtons = screen.getAllByRole('button', { name: 'Gizmo' })
+    await user.click(gizmoButtons[gizmoButtons.length - 1])
+    expect(onToggleGizmo).toHaveBeenCalledWith(true)
+
+    await user.click(screen.getByRole('button', { name: 'Rotate' }))
+    expect(onSetGizmoMode).toHaveBeenCalledWith('rotate')
+  })
+
+  it('shows the hdri upload inline without an extra popover', async () => {
+    const { user } = renderMenuBar()
+
+    await selectCategory(user, 'HDRI')
+
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeInTheDocument()
+  })
+
+  it('forwards removeHdri as updateHdriFile(null) when a file is loaded', async () => {
+    const onUpdateHdriFile = vi.fn()
+    const lightConfig = makeLightConfig()
+    lightConfig.hdri = {
+      enabled: true,
+      hdriPath: 'env.hdr',
+      showAsBackground: false,
+      intensity: 1
+    }
+    const { user } = renderMenuBar({ lightConfig, onUpdateHdriFile })
+
+    await selectCategory(user, 'HDRI')
+    await user.click(screen.getByRole('button', { name: 'Remove' }))
+
+    expect(onUpdateHdriFile).toHaveBeenCalledWith(null)
+  })
+
+  it('emits startRecording when the record button is clicked', async () => {
+    const onStartRecording = vi.fn()
+    const { user } = renderMenuBar({ onStartRecording })
+
+    await user.click(screen.getByRole('button', { name: 'Record' }))
+
+    expect(onStartRecording).toHaveBeenCalledOnce()
+  })
+
+  it('forwards exportRecording from the recording menu once a recording exists', async () => {
+    const onExportRecording = vi.fn()
+    const { user } = renderMenuBar({
+      hasRecording: true,
+      isRecording: false,
+      onExportRecording
+    })
+
+    await user.click(
+      screen.getByRole('button', { name: 'Video recording of the scene [mp4]' })
+    )
+    await user.click(screen.getByRole('button', { name: 'Download Recording' }))
+
+    expect(onExportRecording).toHaveBeenCalledOnce()
+  })
+
+  it('omits the gizmo category when canUseGizmo is false', async () => {
+    const { user } = renderMenuBar({ canUseGizmo: false })
+    await openCategoryMenu(user)
+
+    expect(
+      screen.queryByRole('button', { name: 'Gizmo' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('switches to the camera category and shows its controls', async () => {
+    const { user } = renderMenuBar()
+    await openCategoryMenu(user)
+
+    await user.click(screen.getByRole('button', { name: 'Camera' }))
+
+    expect(
+      screen.getByRole('button', { name: 'Perspective' })
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Show grid' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('omits the light category when canUseLighting is false', async () => {
+    const { user } = renderMenuBar({ canUseLighting: false })
+    await openCategoryMenu(user)
+
+    expect(
+      screen.queryByRole('button', { name: 'Light' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('hides scene controls when sceneConfig is undefined', () => {
+    renderMenuBar({ sceneConfig: undefined })
+
+    expect(
+      screen.queryByRole('button', { name: 'Show grid' })
+    ).not.toBeInTheDocument()
+  })
+})

src/components/load3d/Load3DMenuBar.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="pointer-events-none absolute inset-0 flex flex-col">
+    <div
+      ref="topBarRef"
+      class="pointer-events-auto flex h-10 items-center gap-1 bg-interface-menu-surface px-2"
+      @wheel.stop
+    >
+      <Popover v-model:open="catMenuOpen">
+        <PopoverTrigger as-child>
+          <button
+            :class="chipClass"
+            type="button"
+            data-testid="load3d-category-menu"
+          >
+            {{ activeLabel }}
+            <i class="icon-[lucide--chevron-down] size-4 opacity-70" />
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="bottom"
+          align="start"
+          :side-offset="8"
+          :class="panelClass"
+        >
+          <button
+            v-for="c in categoryDefs"
+            :key="c.key"
+            type="button"
+            :class="
+              cn(
+                rowClass,
+                activeCategory === c.key && 'bg-button-active-surface'
+              )
+            "
+            @click="selectCategory(c.key)"
+          >
+            {{ c.label }}
+          </button>
+        </PopoverContent>
+      </Popover>
+
+      <div class="mx-1 h-5 w-px shrink-0 bg-interface-menu-stroke" />
+
+      <SceneMenuGroup
+        v-if="activeCategory === 'scene' && sceneConfig"
+        v-model:config="sceneConfig"
+        v-model:fov="cameraFov"
+        :compact
+        :can-use-background-image="canUseBackgroundImage"
+        :hdri-active="hdriActive"
+        @update-background-image="emit('updateBackgroundImage', $event)"
+      />
+      <ModelMenuGroup
+        v-else-if="activeCategory === 'model' && modelConfig"
+        v-model:config="modelConfig"
+        :compact
+        :material-modes="materialModes"
+        :has-skeleton="hasSkeleton"
+      />
+      <CameraMenuGroup
+        v-else-if="activeCategory === 'camera' && cameraConfig"
+        v-model:config="cameraConfig"
+        :compact
+      />
+      <LightMenuGroup
+        v-else-if="activeCategory === 'light' && lightConfig && modelConfig"
+        v-model:config="lightConfig"
+        :compact
+        :is-original-material="isOriginalMaterial"
+      />
+      <HdriMenuGroup
+        v-else-if="activeCategory === 'hdri' && lightConfig"
+        v-model:config="lightConfig"
+        :compact
+        :scene-has-image="sceneHasImage"
+        @update-hdri-file="emit('updateHdriFile', $event)"
+      />
+      <GizmoMenuGroup
+        v-else-if="activeCategory === 'gizmo' && modelConfig"
+        v-model:config="modelConfig"
+        :compact
+        @toggle-gizmo="emit('toggleGizmo', $event)"
+        @set-gizmo-mode="emit('setGizmoMode', $event)"
+        @reset-gizmo-transform="emit('resetGizmoTransform')"
+      />
+    </div>
+
+    <div
+      :class="
+        cn('flex-1', isRecording && 'border-2 border-node-component-executing')
+      "
+    />
+
+    <div
+      class="pointer-events-auto flex h-10 items-center justify-between gap-1 bg-interface-menu-surface px-2"
+      @wheel.stop
+    >
+      <div class="flex items-center gap-1">
+        <RecordMenuControl
+          v-if="canUseRecording"
+          v-model:is-recording="isRecording"
+          v-model:has-recording="hasRecording"
+          v-model:recording-duration="recordingDuration"
+          :compact
+          @start-recording="emit('startRecording')"
+          @stop-recording="emit('stopRecording')"
+          @export-recording="emit('exportRecording')"
+          @clear-recording="emit('clearRecording')"
+        />
+      </div>
+      <div class="flex items-center gap-1">
+        <ViewerControls
+          v-if="enableViewer && node"
+          :node="node as LGraphNode"
+        />
+        <button
+          v-if="canFitToViewer"
+          v-tooltip.top="tip(t('load3d.fitToViewer'))"
+          :class="iconBtnClass"
+          type="button"
+          :aria-label="t('load3d.fitToViewer')"
+          @click="emit('fitToViewer')"
+        >
+          <i class="icon-[lucide--scan] size-4" />
+        </button>
+        <button
+          v-if="canCenterCameraOnModel"
+          v-tooltip.top="tip(t('load3d.centerCameraOnModel'))"
+          :class="iconBtnClass"
+          type="button"
+          :aria-label="t('load3d.centerCameraOnModel')"
+          @click="emit('centerCamera')"
+        >
+          <i class="icon-[lucide--crosshair] size-4" />
+        </button>
+        <Popover v-if="canExport" v-model:open="exportOpen">
+          <PopoverTrigger as-child>
+            <button
+              v-tooltip.top="tip(t('load3d.export'))"
+              :class="iconBtnClass"
+              type="button"
+              :aria-label="t('load3d.export')"
+            >
+              <i class="icon-[lucide--download] size-4" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent
+            side="top"
+            align="end"
+            :side-offset="8"
+            :class="panelClass"
+          >
+            <button
+              v-for="format in exportFormats"
+              :key="format.value"
+              type="button"
+              :class="rowClass"
+              @click="onExport(format.value)"
+            >
+              {{ format.label }}
+            </button>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { PopoverTrigger } from 'reka-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import CameraMenuGroup from '@/components/load3d/menubar/CameraMenuGroup.vue'
+import GizmoMenuGroup from '@/components/load3d/menubar/GizmoMenuGroup.vue'
+import HdriMenuGroup from '@/components/load3d/menubar/HdriMenuGroup.vue'
+import LightMenuGroup from '@/components/load3d/menubar/LightMenuGroup.vue'
+import {
+  chipClass,
+  iconBtnClass,
+  panelClass,
+  rowClass,
+  tip
+} from '@/components/load3d/menubar/menuBarStyles'
+import ModelMenuGroup from '@/components/load3d/menubar/ModelMenuGroup.vue'
+import RecordMenuControl from '@/components/load3d/menubar/RecordMenuControl.vue'
+import SceneMenuGroup from '@/components/load3d/menubar/SceneMenuGroup.vue'
+import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import { getExportFormatOptions } from '@/extensions/core/load3d/constants'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type {
+  CameraConfig,
+  GizmoMode,
+  LightConfig,
+  MaterialMode,
+  ModelConfig,
+  SceneConfig
+} from '@/extensions/core/load3d/interfaces'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const {
+  canUseLighting = true,
+  canUseHdri = true,
+  canUseGizmo = true,
+  canExport = true,
+  canUseBackgroundImage = true,
+  canFitToViewer = true,
+  canCenterCameraOnModel = true,
+  canUseRecording = true,
+  enableViewer = false,
+  node = null,
+  materialModes = ['original', 'clay', 'normal', 'wireframe'],
+  hasSkeleton = false,
+  sourceFormat = null
+} = defineProps<{
+  canUseLighting?: boolean
+  canUseHdri?: boolean
+  canUseGizmo?: boolean
+  canExport?: boolean
+  canUseBackgroundImage?: boolean
+  canFitToViewer?: boolean
+  canCenterCameraOnModel?: boolean
+  canUseRecording?: boolean
+  enableViewer?: boolean
+  node?: LGraphNode | null
+  materialModes?: readonly MaterialMode[]
+  hasSkeleton?: boolean
+  sourceFormat?: string | null
+}>()
+
+const sceneConfig = defineModel<SceneConfig>('sceneConfig')
+const modelConfig = defineModel<ModelConfig>('modelConfig')
+const cameraConfig = defineModel<CameraConfig>('cameraConfig')
+const lightConfig = defineModel<LightConfig>('lightConfig')
+const isRecording = defineModel<boolean>('isRecording')
+const hasRecording = defineModel<boolean>('hasRecording')
+const recordingDuration = defineModel<number>('recordingDuration')
+
+const emit = defineEmits<{
+  (e: 'updateBackgroundImage', file: File | null): void
+  (e: 'updateHdriFile', file: File | null): void
+  (e: 'exportModel', format: string): void
+  (e: 'fitToViewer'): void
+  (e: 'centerCamera'): void
+  (e: 'toggleGizmo', enabled: boolean): void
+  (e: 'setGizmoMode', mode: GizmoMode): void
+  (e: 'resetGizmoTransform'): void
+  (e: 'startRecording'): void
+  (e: 'stopRecording'): void
+  (e: 'exportRecording'): void
+  (e: 'clearRecording'): void
+}>()
+
+const { t } = useI18n()
+
+const categoryDefs = computed(() =>
+  [
+    { key: 'scene', label: t('load3d.scene'), show: !!sceneConfig.value },
+    {
+      key: 'model',
+      label: t('load3d.model3d'),
+      show: !!modelConfig.value
+    },
+    { key: 'camera', label: t('load3d.camera'), show: !!cameraConfig.value },
+    {
+      key: 'light',
+      label: t('load3d.light'),
+      show: canUseLighting && !!lightConfig.value && !!modelConfig.value
+    },
+    {
+      key: 'hdri',
+      label: t('load3d.hdri.label'),
+      show: canUseHdri && !!lightConfig.value
+    },
+    {
+      key: 'gizmo',
+      label: t('load3d.gizmo.label'),
+      show: canUseGizmo && !!modelConfig.value
+    }
+  ].filter((c) => c.show)
+)
+
+const activeCategory = ref('scene')
+const activeLabel = computed(
+  () =>
+    categoryDefs.value.find((c) => c.key === activeCategory.value)?.label ?? ''
+)
+watch(categoryDefs, (defs) => {
+  if (!defs.some((c) => c.key === activeCategory.value)) {
+    activeCategory.value = defs[0]?.key ?? 'scene'
+  }
+})
+
+const catMenuOpen = ref(false)
+const exportOpen = ref(false)
+
+const sceneHasImage = computed(
+  () =>
+    !!sceneConfig.value?.backgroundImage &&
+    sceneConfig.value.backgroundImage !== ''
+)
+const hdriActive = computed(
+  () =>
+    !!lightConfig.value?.hdri?.hdriPath && !!lightConfig.value?.hdri?.enabled
+)
+const isOriginalMaterial = computed(
+  () => modelConfig.value?.materialMode === 'original'
+)
+const cameraFov = computed({
+  get: () => cameraConfig.value?.fov ?? 0,
+  set: (value) => {
+    if (cameraConfig.value) cameraConfig.value.fov = value
+  }
+})
+
+const exportFormats = computed(() => getExportFormatOptions(sourceFormat))
+
+const topBarRef = ref<HTMLElement | null>(null)
+const { width: topW } = useElementSize(topBarRef)
+const compactWidthThreshold = 480
+const compact = computed(
+  () => topW.value > 0 && topW.value < compactWidthThreshold
+)
+
+function selectCategory(key: string) {
+  activeCategory.value = key
+  catMenuOpen.value = false
+}
+
+function onExport(format: string) {
+  emit('exportModel', format)
+  exportOpen.value = false
+}
+</script>

src/components/load3d/controls/RecordingControls.test.ts

@@ -1,205 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      load3d: {
-        startRecording: 'Start recording',
-        stopRecording: 'Stop recording',
-        exportRecording: 'Export recording',
-        clearRecording: 'Clear recording'
-      }
-    }
-  }
-})
-
-type RenderOpts = {
-  hasRecording?: boolean
-  isRecording?: boolean
-  recordingDuration?: number
-  onStartRecording?: () => void
-  onStopRecording?: () => void
-  onExportRecording?: () => void
-  onClearRecording?: () => void
-}
-
-function renderComponent(opts: RenderOpts = {}) {
-  const hasRecording = ref<boolean>(opts.hasRecording ?? false)
-  const isRecording = ref<boolean>(opts.isRecording ?? false)
-  const recordingDuration = ref<number>(opts.recordingDuration ?? 0)
-
-  const utils = render(RecordingControls, {
-    props: {
-      hasRecording: hasRecording.value,
-      'onUpdate:hasRecording': (v: boolean | undefined) => {
-        if (v !== undefined) hasRecording.value = v
-      },
-      isRecording: isRecording.value,
-      'onUpdate:isRecording': (v: boolean | undefined) => {
-        if (v !== undefined) isRecording.value = v
-      },
-      recordingDuration: recordingDuration.value,
-      'onUpdate:recordingDuration': (v: number | undefined) => {
-        if (v !== undefined) recordingDuration.value = v
-      },
-      onStartRecording: opts.onStartRecording,
-      onStopRecording: opts.onStopRecording,
-      onExportRecording: opts.onExportRecording,
-      onClearRecording: opts.onClearRecording
-    },
-    global: {
-      plugins: [i18n],
-      directives: { tooltip: () => {} }
-    }
-  })
-
-  return { ...utils, user: userEvent.setup() }
-}
-
-describe('RecordingControls', () => {
-  it('shows the start-recording button initially', () => {
-    renderComponent()
-
-    expect(
-      screen.getByRole('button', { name: 'Start recording' })
-    ).toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'Stop recording' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('shows the stop-recording button while recording is in progress', () => {
-    renderComponent({ isRecording: true })
-
-    expect(
-      screen.getByRole('button', { name: 'Stop recording' })
-    ).toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'Start recording' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('emits startRecording when the button is clicked from a stopped state', async () => {
-    const onStartRecording = vi.fn()
-    const onStopRecording = vi.fn()
-    const { user } = renderComponent({
-      isRecording: false,
-      onStartRecording,
-      onStopRecording
-    })
-
-    await user.click(screen.getByRole('button', { name: 'Start recording' }))
-
-    expect(onStartRecording).toHaveBeenCalledOnce()
-    expect(onStopRecording).not.toHaveBeenCalled()
-  })
-
-  it('emits stopRecording when the button is clicked from a recording state', async () => {
-    const onStartRecording = vi.fn()
-    const onStopRecording = vi.fn()
-    const { user } = renderComponent({
-      isRecording: true,
-      onStartRecording,
-      onStopRecording
-    })
-
-    await user.click(screen.getByRole('button', { name: 'Stop recording' }))
-
-    expect(onStopRecording).toHaveBeenCalledOnce()
-    expect(onStartRecording).not.toHaveBeenCalled()
-  })
-
-  it('hides the export and clear buttons when there is no recording', () => {
-    renderComponent({ hasRecording: false, isRecording: false })
-
-    expect(
-      screen.queryByRole('button', { name: 'Export recording' })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'Clear recording' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('shows the export and clear buttons once a recording exists', () => {
-    renderComponent({ hasRecording: true, isRecording: false })
-
-    expect(
-      screen.getByRole('button', { name: 'Export recording' })
-    ).toBeInTheDocument()
-    expect(
-      screen.getByRole('button', { name: 'Clear recording' })
-    ).toBeInTheDocument()
-  })
-
-  it('hides the export and clear buttons during a new recording even if a previous one exists', () => {
-    renderComponent({ hasRecording: true, isRecording: true })
-
-    expect(
-      screen.queryByRole('button', { name: 'Export recording' })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'Clear recording' })
-    ).not.toBeInTheDocument()
-  })
-
-  it('emits exportRecording and clearRecording from their respective buttons', async () => {
-    const onExportRecording = vi.fn()
-    const onClearRecording = vi.fn()
-    const { user } = renderComponent({
-      hasRecording: true,
-      isRecording: false,
-      onExportRecording,
-      onClearRecording
-    })
-
-    await user.click(screen.getByRole('button', { name: 'Export recording' }))
-    await user.click(screen.getByRole('button', { name: 'Clear recording' }))
-
-    expect(onExportRecording).toHaveBeenCalledOnce()
-    expect(onClearRecording).toHaveBeenCalledOnce()
-  })
-
-  it('renders the formatted duration as MM:SS once a recording exists', () => {
-    renderComponent({
-      hasRecording: true,
-      isRecording: false,
-      recordingDuration: 75
-    })
-
-    expect(screen.getByTestId('load3d-recording-duration')).toHaveTextContent(
-      '01:15'
-    )
-  })
-
-  it('hides the duration display while a recording is in progress', () => {
-    renderComponent({
-      hasRecording: true,
-      isRecording: true,
-      recordingDuration: 30
-    })
-
-    expect(
-      screen.queryByTestId('load3d-recording-duration')
-    ).not.toBeInTheDocument()
-  })
-
-  it('hides the duration display when recordingDuration is zero', () => {
-    renderComponent({
-      hasRecording: true,
-      isRecording: false,
-      recordingDuration: 0
-    })
-
-    expect(
-      screen.queryByTestId('load3d-recording-duration')
-    ).not.toBeInTheDocument()
-  })
-})

src/components/load3d/controls/RecordingControls.vue

@@ -1,126 +0,0 @@
-<template>
-  <div class="relative rounded-lg bg-backdrop/30">
-    <div class="flex flex-col gap-2">
-      <Button
-        v-tooltip.right="{
-          value: isRecording
-            ? $t('load3d.stopRecording')
-            : $t('load3d.startRecording'),
-          showDelay: 300
-        }"
-        size="icon"
-        variant="textonly"
-        :class="
-          cn(
-            'rounded-full',
-            isRecording && 'recording-button-blink text-red-500'
-          )
-        "
-        :aria-label="
-          isRecording ? $t('load3d.stopRecording') : $t('load3d.startRecording')
-        "
-        @click="toggleRecording"
-      >
-        <i
-          :class="[
-            'pi',
-            isRecording ? 'pi-circle-fill' : 'pi-video',
-            'text-lg text-base-foreground'
-          ]"
-        />
-      </Button>
-
-      <Button
-        v-if="hasRecording && !isRecording"
-        v-tooltip.right="{
-          value: $t('load3d.exportRecording'),
-          showDelay: 300
-        }"
-        size="icon"
-        variant="textonly"
-        class="rounded-full"
-        :aria-label="$t('load3d.exportRecording')"
-        @click="handleExportRecording"
-      >
-        <i class="pi pi-download text-lg text-base-foreground" />
-      </Button>
-
-      <Button
-        v-if="hasRecording && !isRecording"
-        v-tooltip.right="{
-          value: $t('load3d.clearRecording'),
-          showDelay: 300
-        }"
-        size="icon"
-        variant="textonly"
-        class="rounded-full"
-        :aria-label="$t('load3d.clearRecording')"
-        @click="handleClearRecording"
-      >
-        <i class="pi pi-trash text-lg text-base-foreground" />
-      </Button>
-
-      <div
-        v-if="recordingDuration && recordingDuration > 0 && !isRecording"
-        class="mt-1 text-center text-xs text-base-foreground"
-        data-testid="load3d-recording-duration"
-      >
-        {{ formatDuration(recordingDuration) }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const hasRecording = defineModel<boolean>('hasRecording')
-const isRecording = defineModel<boolean>('isRecording')
-const recordingDuration = defineModel<number>('recordingDuration')
-
-const emit = defineEmits<{
-  (e: 'startRecording'): void
-  (e: 'stopRecording'): void
-  (e: 'exportRecording'): void
-  (e: 'clearRecording'): void
-}>()
-
-function toggleRecording() {
-  if (isRecording.value) {
-    emit('stopRecording')
-  } else {
-    emit('startRecording')
-  }
-}
-
-function handleExportRecording() {
-  emit('exportRecording')
-}
-
-function handleClearRecording() {
-  emit('clearRecording')
-}
-
-function formatDuration(seconds: number): string {
-  const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = Math.floor(seconds % 60)
-  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
-}
-</script>
-
-<style scoped>
-.recording-button-blink {
-  animation: blink 1s infinite;
-}
-
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-</style>

src/components/load3d/menubar/CameraMenuGroup.test.ts

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import CameraMenuGroup from '@/components/load3d/menubar/CameraMenuGroup.vue'
+import type { CameraConfig } from '@/extensions/core/load3d/interfaces'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function makeConfig(overrides: Partial<CameraConfig> = {}): CameraConfig {
+  return { cameraType: 'perspective', fov: 75, ...overrides }
+}
+
+function renderGroup(config = makeConfig()) {
+  const result = render(CameraMenuGroup, {
+    props: { config },
+    global: { plugins: [i18n], directives: { tooltip: () => {} } }
+  })
+  return { ...result, user: userEvent.setup(), config }
+}
+
+describe('CameraMenuGroup', () => {
+  it('switches the projection type', async () => {
+    const { user, config } = renderGroup()
+
+    await user.click(screen.getByRole('button', { name: 'Perspective' }))
+
+    expect(config.cameraType).toBe('orthographic')
+  })
+
+  it('offers the FOV control only for a perspective camera', () => {
+    renderGroup(makeConfig({ cameraType: 'orthographic' }))
+
+    expect(
+      screen.queryByRole('button', { name: 'FOV' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Orthographic' })
+    ).toBeInTheDocument()
+  })
+})

src/components/load3d/menubar/CameraMenuGroup.vue

@@ -0,0 +1,86 @@
+<template>
+  <button
+    v-tooltip.bottom="tip(t('load3d.menuBar.switchProjection'))"
+    :class="actionClass(false)"
+    type="button"
+    :aria-label="compact ? t('load3d.menuBar.switchProjection') : undefined"
+    @click="switchCamera"
+  >
+    <i class="icon-[lucide--camera] size-4" />
+    <span v-if="!compact">{{ cameraTypeLabel }}</span>
+  </button>
+
+  <Popover v-if="isPerspective">
+    <PopoverTrigger as-child>
+      <button
+        v-tooltip.bottom="tip(t('load3d.menuBar.fov'))"
+        :class="actionClass(false)"
+        type="button"
+        :aria-label="compact ? t('load3d.menuBar.fov') : undefined"
+      >
+        <i class="icon-[lucide--focus] size-4" />
+        <span v-if="!compact">{{ t('load3d.menuBar.fov') }}</span>
+      </button>
+    </PopoverTrigger>
+    <PopoverContent
+      side="bottom"
+      align="start"
+      :side-offset="8"
+      :class="cn(panelClass, 'w-56')"
+    >
+      <div class="flex flex-col gap-2 p-1">
+        <span class="text-sm text-base-foreground">{{ t('load3d.fov') }}</span>
+        <Slider
+          :model-value="[fov]"
+          :min="10"
+          :max="150"
+          :step="1"
+          class="w-full"
+          @update:model-value="setFov"
+        />
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  actionClass,
+  panelClass,
+  tip
+} from '@/components/load3d/menubar/menuBarStyles'
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+import type { CameraConfig } from '@/extensions/core/load3d/interfaces'
+import { cn } from '@comfyorg/tailwind-utils'
+import { PopoverTrigger } from 'reka-ui'
+
+const { compact = false } = defineProps<{
+  compact?: boolean
+}>()
+
+const config = defineModel<CameraConfig>('config')
+
+const { t } = useI18n()
+
+const cameraType = computed(() => config.value?.cameraType)
+const isPerspective = computed(() => cameraType.value === 'perspective')
+const cameraTypeLabel = computed(() =>
+  cameraType.value ? t(`load3d.cameraType.${cameraType.value}`) : ''
+)
+const fov = computed(() => config.value?.fov ?? 0)
+
+function switchCamera() {
+  if (!config.value) return
+  config.value.cameraType =
+    config.value.cameraType === 'perspective' ? 'orthographic' : 'perspective'
+}
+
+function setFov(value?: number[]) {
+  if (config.value && value?.length) config.value.fov = value[0]
+}
+</script>

src/components/load3d/menubar/GizmoMenuGroup.test.ts

@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import GizmoMenuGroup from '@/components/load3d/menubar/GizmoMenuGroup.vue'
+import type { ModelConfig } from '@/extensions/core/load3d/interfaces'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function makeConfig(enabled: boolean): ModelConfig {
+  return {
+    upDirection: 'original',
+    materialMode: 'original',
+    showSkeleton: false,
+    gizmo: {
+      enabled,
+      mode: 'translate',
+      position: { x: 0, y: 0, z: 0 },
+      rotation: { x: 0, y: 0, z: 0 },
+      scale: { x: 1, y: 1, z: 1 }
+    }
+  }
+}
+
+type Props = {
+  config: ModelConfig
+  onToggleGizmo?: (enabled: boolean) => void
+  onSetGizmoMode?: (mode: string) => void
+}
+
+function renderGroup(props: Props) {
+  const result = render(GizmoMenuGroup, {
+    props,
+    global: { plugins: [i18n], directives: { tooltip: () => {} } }
+  })
+  return { ...result, user: userEvent.setup() }
+}
+
+describe('GizmoMenuGroup', () => {
+  it('enables the gizmo and reveals the mode controls', async () => {
+    const config = makeConfig(false)
+    const onToggleGizmo = vi.fn()
+    const { user } = renderGroup({ config, onToggleGizmo })
+
+    expect(
+      screen.queryByRole('button', { name: 'Rotate' })
+    ).not.toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Gizmo' }))
+
+    expect(onToggleGizmo).toHaveBeenCalledWith(true)
+    expect(config.gizmo?.enabled).toBe(true)
+    expect(screen.getByRole('button', { name: 'Rotate' })).toBeInTheDocument()
+  })
+
+  it('sets the transform mode', async () => {
+    const config = makeConfig(true)
+    const onSetGizmoMode = vi.fn()
+    const { user } = renderGroup({ config, onSetGizmoMode })
+
+    await user.click(screen.getByRole('button', { name: 'Rotate' }))
+
+    expect(onSetGizmoMode).toHaveBeenCalledWith('rotate')
+    expect(config.gizmo?.mode).toBe('rotate')
+  })
+})

src/components/load3d/menubar/GizmoMenuGroup.vue

@@ -0,0 +1,105 @@
+<template>
+  <button
+    v-tooltip.bottom="tip(t('load3d.gizmo.toggle'))"
+    :class="actionClass(gizmoEnabled)"
+    :aria-pressed="gizmoEnabled"
+    type="button"
+    :aria-label="compact ? t('load3d.gizmo.toggle') : undefined"
+    @click="toggleGizmo"
+  >
+    <i class="icon-[lucide--axis-3d] size-4" />
+    <span v-if="!compact">{{ t('load3d.gizmo.toggle') }}</span>
+  </button>
+
+  <template v-if="gizmoEnabled">
+    <button
+      v-tooltip.bottom="tip(t('load3d.gizmo.translate'))"
+      :class="actionClass(gizmoMode === 'translate')"
+      :aria-pressed="gizmoMode === 'translate'"
+      type="button"
+      :aria-label="compact ? t('load3d.gizmo.translate') : undefined"
+      @click="setGizmoMode('translate')"
+    >
+      <i class="icon-[lucide--move] size-4" />
+      <span v-if="!compact">{{ t('load3d.gizmo.translate') }}</span>
+    </button>
+    <button
+      v-tooltip.bottom="tip(t('load3d.gizmo.rotate'))"
+      :class="actionClass(gizmoMode === 'rotate')"
+      :aria-pressed="gizmoMode === 'rotate'"
+      type="button"
+      :aria-label="compact ? t('load3d.gizmo.rotate') : undefined"
+      @click="setGizmoMode('rotate')"
+    >
+      <i class="icon-[lucide--rotate-3d] size-4" />
+      <span v-if="!compact">{{ t('load3d.gizmo.rotate') }}</span>
+    </button>
+    <button
+      v-tooltip.bottom="tip(t('load3d.gizmo.scale'))"
+      :class="actionClass(gizmoMode === 'scale')"
+      :aria-pressed="gizmoMode === 'scale'"
+      type="button"
+      :aria-label="compact ? t('load3d.gizmo.scale') : undefined"
+      @click="setGizmoMode('scale')"
+    >
+      <i class="icon-[lucide--scale-3d] size-4" />
+      <span v-if="!compact">{{ t('load3d.gizmo.scale') }}</span>
+    </button>
+    <button
+      v-tooltip.bottom="tip(t('load3d.gizmo.reset'))"
+      :class="actionClass(false)"
+      type="button"
+      :aria-label="compact ? t('load3d.gizmo.reset') : undefined"
+      @click="resetGizmoTransform"
+    >
+      <i class="icon-[lucide--rotate-ccw] size-4" />
+      <span v-if="!compact">{{ t('load3d.gizmo.reset') }}</span>
+    </button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { actionClass, tip } from '@/components/load3d/menubar/menuBarStyles'
+import type {
+  GizmoMode,
+  ModelConfig
+} from '@/extensions/core/load3d/interfaces'
+
+const { compact = false } = defineProps<{
+  compact?: boolean
+}>()
+
+const config = defineModel<ModelConfig>('config')
+
+const emit = defineEmits<{
+  (e: 'toggleGizmo', enabled: boolean): void
+  (e: 'setGizmoMode', mode: GizmoMode): void
+  (e: 'resetGizmoTransform'): void
+}>()
+
+const { t } = useI18n()
+
+const gizmoEnabled = computed(() => config.value?.gizmo?.enabled ?? false)
+const gizmoMode = computed(() => config.value?.gizmo?.mode ?? 'translate')
+
+function toggleGizmo() {
+  const gizmo = config.value?.gizmo
+  if (!gizmo) return
+  gizmo.enabled = !gizmo.enabled
+  emit('toggleGizmo', gizmo.enabled)
+}
+
+function setGizmoMode(mode: GizmoMode) {
+  const gizmo = config.value?.gizmo
+  if (!gizmo) return
+  gizmo.mode = mode
+  emit('setGizmoMode', mode)
+}
+
+function resetGizmoTransform() {
+  emit('resetGizmoTransform')
+}
+</script>

src/components/load3d/menubar/HdriMenuGroup.test.ts

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import HdriMenuGroup from '@/components/load3d/menubar/HdriMenuGroup.vue'
+import type {
+  HDRIConfig,
+  LightConfig
+} from '@/extensions/core/load3d/interfaces'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function makeConfig(hdri?: Partial<HDRIConfig>): LightConfig {
+  return {
+    intensity: 5,
+    hdri: hdri
+      ? {
+          enabled: false,
+          hdriPath: '',
+          showAsBackground: false,
+          intensity: 1,
+          ...hdri
+        }
+      : undefined
+  }
+}
+
+type Props = {
+  config?: LightConfig
+  sceneHasImage?: boolean
+  onUpdateHdriFile?: (file: File | null) => void
+}
+
+function renderGroup(props: Props = {}) {
+  const result = render(HdriMenuGroup, {
+    props: { config: makeConfig({}), ...props },
+    global: { plugins: [i18n], directives: { tooltip: () => {} } }
+  })
+  return { ...result, user: userEvent.setup() }
+}
+
+describe('HdriMenuGroup', () => {
+  it('shows the upload button when no HDRI is loaded', () => {
+    renderGroup()
+
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeInTheDocument()
+  })
+
+  it('hides the upload when a background image is set and no HDRI exists', () => {
+    renderGroup({ config: makeConfig({ hdriPath: '' }), sceneHasImage: true })
+
+    expect(
+      screen.queryByRole('button', { name: 'Upload' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('toggles enabled and forwards removal once a file is loaded', async () => {
+    const onUpdateHdriFile = vi.fn()
+    const config = makeConfig({ hdriPath: 'env.hdr', enabled: false })
+    const { user } = renderGroup({ config, onUpdateHdriFile })
+
+    await user.click(screen.getByRole('button', { name: 'HDRI' }))
+    expect(config.hdri?.enabled).toBe(true)
+
+    await user.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(onUpdateHdriFile).toHaveBeenCalledWith(null)
+  })
+})

src/components/load3d/menubar/HdriMenuGroup.vue

@@ -0,0 +1,130 @@
+<template>
+  <template v-if="!sceneHasImage || hdriPath">
+    <button
+      v-tooltip.bottom="
+        tip(
+          hdriPath ? t('load3d.hdri.changeFile') : t('load3d.hdri.uploadFile')
+        )
+      "
+      :class="actionClass(false)"
+      type="button"
+      :aria-label="
+        compact
+          ? hdriPath
+            ? t('load3d.hdri.changeFile')
+            : t('load3d.hdri.uploadFile')
+          : undefined
+      "
+      @click="hdriFileRef?.click()"
+    >
+      <i class="icon-[lucide--upload] size-4" />
+      <span v-if="!compact">{{
+        hdriPath ? t('load3d.hdri.changeFile') : t('load3d.hdri.uploadFile')
+      }}</span>
+    </button>
+    <input
+      ref="hdriFileRef"
+      type="file"
+      :accept="SUPPORTED_HDRI_EXTENSIONS_ACCEPT"
+      class="pointer-events-none absolute size-0 opacity-0"
+      @change="onHdriFilePicked"
+    />
+  </template>
+
+  <template v-if="hdriPath">
+    <button
+      v-tooltip.bottom="tip(t('load3d.hdri.label'))"
+      :class="actionClass(hdriEnabled)"
+      :aria-pressed="hdriEnabled"
+      type="button"
+      :aria-label="compact ? t('load3d.hdri.label') : undefined"
+      @click="toggleHdriEnabled"
+    >
+      <i class="icon-[lucide--globe] size-4" />
+      <span v-if="!compact">{{ t('load3d.hdri.label') }}</span>
+    </button>
+    <button
+      v-tooltip.bottom="tip(t('load3d.hdri.showAsBackground'))"
+      :class="actionClass(hdriShowAsBackground)"
+      :aria-pressed="hdriShowAsBackground"
+      type="button"
+      :aria-label="compact ? t('load3d.hdri.showAsBackground') : undefined"
+      @click="toggleHdriShowAsBackground"
+    >
+      <i class="icon-[lucide--image] size-4" />
+      <span v-if="!compact">{{ t('load3d.hdri.showAsBackground') }}</span>
+    </button>
+    <button
+      v-tooltip.bottom="tip(t('load3d.hdri.removeFile'))"
+      :class="actionClass(false)"
+      type="button"
+      :aria-label="compact ? t('load3d.hdri.removeFile') : undefined"
+      @click="removeHdri"
+    >
+      <i class="icon-[lucide--x] size-4" />
+      <span v-if="!compact">{{ t('load3d.hdri.removeFile') }}</span>
+    </button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { actionClass, tip } from '@/components/load3d/menubar/menuBarStyles'
+import {
+  SUPPORTED_HDRI_EXTENSIONS,
+  SUPPORTED_HDRI_EXTENSIONS_ACCEPT
+} from '@/extensions/core/load3d/constants'
+import type { LightConfig } from '@/extensions/core/load3d/interfaces'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+
+const { compact = false, sceneHasImage = false } = defineProps<{
+  compact?: boolean
+  sceneHasImage?: boolean
+}>()
+
+const config = defineModel<LightConfig>('config')
+
+const emit = defineEmits<{
+  (e: 'updateHdriFile', file: File | null): void
+}>()
+
+const { t } = useI18n()
+
+const hdriPath = computed(() => config.value?.hdri?.hdriPath ?? '')
+const hdriEnabled = computed(() => config.value?.hdri?.enabled ?? false)
+const hdriShowAsBackground = computed(
+  () => config.value?.hdri?.showAsBackground ?? false
+)
+
+const hdriFileRef = ref<HTMLInputElement | null>(null)
+
+function onHdriFilePicked(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0] ?? null
+  input.value = ''
+  if (file) {
+    const ext = `.${file.name.split('.').pop()?.toLowerCase() ?? ''}`
+    if (!SUPPORTED_HDRI_EXTENSIONS.has(ext)) {
+      useToastStore().addAlert(t('toastMessages.unsupportedHDRIFormat'))
+      return
+    }
+  }
+  emit('updateHdriFile', file)
+}
+
+function toggleHdriEnabled() {
+  const hdri = config.value?.hdri
+  if (hdri) hdri.enabled = !hdri.enabled
+}
+
+function toggleHdriShowAsBackground() {
+  const hdri = config.value?.hdri
+  if (hdri) hdri.showAsBackground = !hdri.showAsBackground
+}
+
+function removeHdri() {
+  emit('updateHdriFile', null)
+}
+</script>

src/components/load3d/menubar/LightMenuGroup.test.ts

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import LightMenuGroup from '@/components/load3d/menubar/LightMenuGroup.vue'
+import type { LightConfig } from '@/extensions/core/load3d/interfaces'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+const settingValues: Record<string, number> = {
+  'Comfy.Load3D.LightIntensityMinimum': 1,
+  'Comfy.Load3D.LightIntensityMaximum': 10,
+  'Comfy.Load3D.LightAdjustmentIncrement': 0.1
+}
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({ get: (key: string) => settingValues[key] })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function renderGroup(isOriginalMaterial: boolean) {
+  const config: LightConfig = { intensity: 5 }
+  return render(LightMenuGroup, {
+    props: { config, isOriginalMaterial },
+    global: { plugins: [i18n], directives: { tooltip: () => {} } }
+  })
+}
+
+describe('LightMenuGroup', () => {
+  it('shows the intensity control for the original material', () => {
+    renderGroup(true)
+
+    expect(
+      screen.getByRole('button', { name: 'Intensity' })
+    ).toBeInTheDocument()
+  })
+
+  it('explains intensity is unavailable for other materials', () => {
+    renderGroup(false)
+
+    expect(
+      screen.queryByRole('button', { name: 'Intensity' })
+    ).not.toBeInTheDocument()
+    expect(screen.getByText('Original material only')).toBeInTheDocument()
+  })
+
+  it('drives HDRI intensity (0-5) when an HDRI environment is active', async () => {
+    const config: LightConfig = {
+      intensity: 5,
+      hdri: {
+        enabled: true,
+        hdriPath: 'env.hdr',
+        showAsBackground: false,
+        intensity: 2
+      }
+    }
+    render(LightMenuGroup, {
+      props: { config, isOriginalMaterial: true },
+      global: { plugins: [i18n], directives: { tooltip: () => {} } }
+    })
+    const user = userEvent.setup()
+
+    await user.click(screen.getByRole('button', { name: 'Intensity' }))
+
+    const slider = screen.getByRole('slider')
+    expect(slider).toHaveAttribute('aria-valuemax', '5')
+    expect(slider).toHaveAttribute('aria-valuenow', '2')
+  })
+})

src/components/load3d/menubar/LightMenuGroup.vue

@@ -0,0 +1,105 @@
+<template>
+  <Popover v-if="isOriginalMaterial">
+    <PopoverTrigger as-child>
+      <button
+        v-tooltip.bottom="tip(t('load3d.menuBar.intensity'))"
+        :class="actionClass(false)"
+        type="button"
+        :aria-label="compact ? t('load3d.menuBar.intensity') : undefined"
+      >
+        <i class="icon-[lucide--sun] size-4" />
+        <span v-if="!compact">{{ t('load3d.menuBar.intensity') }}</span>
+      </button>
+    </PopoverTrigger>
+    <PopoverContent
+      side="bottom"
+      align="start"
+      :side-offset="8"
+      :class="cn(panelClass, 'w-56')"
+    >
+      <div class="flex flex-col gap-2 p-1">
+        <span class="text-sm text-base-foreground">{{
+          t('load3d.lightIntensity')
+        }}</span>
+        <Slider
+          :model-value="[sliderValue]"
+          :min="sliderMin"
+          :max="sliderMax"
+          :step="sliderStep"
+          class="w-full"
+          @update:model-value="onIntensityUpdate"
+        />
+      </div>
+    </PopoverContent>
+  </Popover>
+  <span v-else class="px-2 text-sm text-muted">{{
+    t('load3d.menuBar.originalMaterialOnly')
+  }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  actionClass,
+  panelClass,
+  tip
+} from '@/components/load3d/menubar/menuBarStyles'
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+import type { LightConfig } from '@/extensions/core/load3d/interfaces'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { cn } from '@comfyorg/tailwind-utils'
+import { PopoverTrigger } from 'reka-ui'
+
+const { compact = false, isOriginalMaterial = false } = defineProps<{
+  compact?: boolean
+  isOriginalMaterial?: boolean
+}>()
+
+const config = defineModel<LightConfig>('config')
+
+const { t } = useI18n()
+
+const settingStore = useSettingStore()
+const lightIntensityMinimum = settingStore.get(
+  'Comfy.Load3D.LightIntensityMinimum'
+)
+const lightIntensityMaximum = settingStore.get(
+  'Comfy.Load3D.LightIntensityMaximum'
+)
+const lightAdjustmentIncrement = settingStore.get(
+  'Comfy.Load3D.LightAdjustmentIncrement'
+)
+
+const usesHdriIntensity = computed(
+  () => !!config.value?.hdri?.hdriPath?.length && !!config.value?.hdri?.enabled
+)
+
+const sliderMin = computed(() =>
+  usesHdriIntensity.value ? 0 : lightIntensityMinimum
+)
+const sliderMax = computed(() =>
+  usesHdriIntensity.value ? 5 : lightIntensityMaximum
+)
+const sliderStep = computed(() =>
+  usesHdriIntensity.value ? 0.1 : lightAdjustmentIncrement
+)
+const sliderValue = computed(() =>
+  usesHdriIntensity.value
+    ? (config.value?.hdri?.intensity ?? 1)
+    : (config.value?.intensity ?? lightIntensityMinimum)
+)
+
+function onIntensityUpdate(value?: number[]) {
+  if (!value?.length || !config.value) return
+  const next = value[0]
+  if (usesHdriIntensity.value) {
+    if (config.value.hdri) config.value.hdri.intensity = next
+  } else {
+    config.value.intensity = next
+  }
+}
+</script>

src/components/load3d/menubar/ModelMenuGroup.test.ts

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ModelMenuGroup from '@/components/load3d/menubar/ModelMenuGroup.vue'
+import type { ModelConfig } from '@/extensions/core/load3d/interfaces'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function makeConfig(overrides: Partial<ModelConfig> = {}): ModelConfig {
+  return {
+    upDirection: 'original',
+    materialMode: 'original',
+    showSkeleton: false,
+    ...overrides
+  }
+}
+
+function renderGroup(
+  props: { config?: ModelConfig; hasSkeleton?: boolean } = {}
+) {
+  const result = render(ModelMenuGroup, {
+    props: { config: makeConfig(), ...props },
+    global: { plugins: [i18n], directives: { tooltip: () => {} } }
+  })
+  return { ...result, user: userEvent.setup() }
+}
+
+describe('ModelMenuGroup', () => {
+  it('sets the up direction from the popover', async () => {
+    const config = makeConfig()
+    const { user } = renderGroup({ config })
+
+    await user.click(screen.getByRole('button', { name: 'Up Direction' }))
+    await user.click(screen.getByRole('button', { name: '+Y' }))
+
+    expect(config.upDirection).toBe('+y')
+  })
+
+  it('sets the material mode from the popover', async () => {
+    const config = makeConfig()
+    const { user } = renderGroup({ config })
+
+    await user.click(screen.getByRole('button', { name: 'Material' }))
+    await user.click(screen.getByRole('button', { name: 'Wireframe' }))
+
+    expect(config.materialMode).toBe('wireframe')
+  })
+
+  it('toggles the skeleton only when supported', async () => {
+    const config = makeConfig({ showSkeleton: false })
+    const { user, rerender } = renderGroup({ config, hasSkeleton: false })
+
+    expect(
+      screen.queryByRole('button', { name: 'Skeleton' })
+    ).not.toBeInTheDocument()
+
+    await rerender({ config, hasSkeleton: true })
+    await user.click(screen.getByRole('button', { name: 'Skeleton' }))
+
+    expect(config.showSkeleton).toBe(true)
+  })
+})

src/components/load3d/menubar/ModelMenuGroup.vue

@@ -0,0 +1,135 @@
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <button
+        v-tooltip.bottom="tip(t('load3d.menuBar.upDirection'))"
+        :class="actionClass(false)"
+        type="button"
+        :aria-label="compact ? t('load3d.menuBar.upDirection') : undefined"
+      >
+        <i class="icon-[lucide--move-3d] size-4" />
+        <span v-if="!compact">{{ t('load3d.menuBar.upDirection') }}</span>
+      </button>
+    </PopoverTrigger>
+    <PopoverContent
+      side="bottom"
+      align="start"
+      :side-offset="8"
+      :class="panelClass"
+    >
+      <button
+        v-for="d in upDirections"
+        :key="d"
+        type="button"
+        :class="cn(rowClass, upDirection === d && 'bg-button-active-surface')"
+        @click="setUpDirection(d)"
+      >
+        {{ d.toUpperCase() }}
+      </button>
+    </PopoverContent>
+  </Popover>
+
+  <Popover v-if="materialModes.length">
+    <PopoverTrigger as-child>
+      <button
+        v-tooltip.bottom="tip(t('load3d.menuBar.material'))"
+        :class="actionClass(false)"
+        type="button"
+        :aria-label="compact ? t('load3d.menuBar.material') : undefined"
+      >
+        <i class="icon-[lucide--box] size-4" />
+        <span v-if="!compact">{{ t('load3d.menuBar.material') }}</span>
+      </button>
+    </PopoverTrigger>
+    <PopoverContent
+      side="bottom"
+      align="start"
+      :side-offset="8"
+      :class="panelClass"
+    >
+      <button
+        v-for="m in materialModes"
+        :key="m"
+        type="button"
+        :class="cn(rowClass, materialMode === m && 'bg-button-active-surface')"
+        @click="setMaterialMode(m)"
+      >
+        {{ t(`load3d.materialModes.${m}`) }}
+      </button>
+    </PopoverContent>
+  </Popover>
+
+  <button
+    v-if="hasSkeleton"
+    v-tooltip.bottom="tip(t('load3d.menuBar.skeleton'))"
+    :class="actionClass(showSkeleton)"
+    :aria-pressed="showSkeleton"
+    type="button"
+    :aria-label="compact ? t('load3d.menuBar.skeleton') : undefined"
+    @click="toggleSkeleton"
+  >
+    <i class="icon-[lucide--bone] size-4" />
+    <span v-if="!compact">{{ t('load3d.menuBar.skeleton') }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  actionClass,
+  panelClass,
+  rowClass,
+  tip
+} from '@/components/load3d/menubar/menuBarStyles'
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import type {
+  MaterialMode,
+  ModelConfig,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
+import { cn } from '@comfyorg/tailwind-utils'
+import { PopoverTrigger } from 'reka-ui'
+
+const {
+  compact = false,
+  hasSkeleton = false,
+  materialModes = ['original', 'clay', 'normal', 'wireframe']
+} = defineProps<{
+  compact?: boolean
+  hasSkeleton?: boolean
+  materialModes?: readonly MaterialMode[]
+}>()
+
+const config = defineModel<ModelConfig>('config')
+
+const { t } = useI18n()
+
+const upDirection = computed(() => config.value?.upDirection)
+const materialMode = computed(() => config.value?.materialMode)
+const showSkeleton = computed(() => config.value?.showSkeleton ?? false)
+
+const upDirections: UpDirection[] = [
+  'original',
+  '-x',
+  '+x',
+  '-y',
+  '+y',
+  '-z',
+  '+z'
+]
+
+function setUpDirection(direction: UpDirection) {
+  if (config.value) config.value.upDirection = direction
+}
+
+function setMaterialMode(mode: MaterialMode) {
+  if (config.value) config.value.materialMode = mode
+}
+
+function toggleSkeleton() {
+  if (config.value) config.value.showSkeleton = !config.value.showSkeleton
+}
+</script>

src/components/load3d/menubar/RecordMenuControl.test.ts

@@ -0,0 +1,138 @@
+import { render, screen, within } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import RecordMenuControl from '@/components/load3d/menubar/RecordMenuControl.vue'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+type Props = {
+  isRecording?: boolean
+  hasRecording?: boolean
+  recordingDuration?: number
+  onStartRecording?: () => void
+  onStopRecording?: () => void
+  onExportRecording?: () => void
+  onClearRecording?: () => void
+}
+
+function renderControl(props: Props = {}) {
+  const result = render(RecordMenuControl, {
+    props,
+    global: { plugins: [i18n], directives: { tooltip: () => {} } }
+  })
+  return { ...result, user: userEvent.setup() }
+}
+
+async function openRecordingMenu(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(
+    screen.getByRole('button', { name: 'Video recording of the scene [mp4]' })
+  )
+}
+
+describe('RecordMenuControl', () => {
+  it('starts recording when idle', async () => {
+    const onStartRecording = vi.fn()
+    const { user } = renderControl({ isRecording: false, onStartRecording })
+
+    await user.click(screen.getByRole('button', { name: 'Record' }))
+
+    expect(onStartRecording).toHaveBeenCalledOnce()
+  })
+
+  it('stops recording when active', async () => {
+    const onStopRecording = vi.fn()
+    const { user } = renderControl({ isRecording: true, onStopRecording })
+
+    await user.click(screen.getByRole('button', { name: 'Stop recording' }))
+
+    expect(onStopRecording).toHaveBeenCalledOnce()
+  })
+
+  it('shows the recording duration once a recording exists', () => {
+    renderControl({
+      isRecording: false,
+      hasRecording: true,
+      recordingDuration: 65
+    })
+
+    expect(screen.getByText('01:05')).toBeInTheDocument()
+  })
+
+  it('downloads the recording from the menu', async () => {
+    const onExportRecording = vi.fn()
+    const { user } = renderControl({
+      hasRecording: true,
+      recordingDuration: 4,
+      onExportRecording
+    })
+
+    await openRecordingMenu(user)
+    await user.click(screen.getByRole('button', { name: 'Download Recording' }))
+
+    expect(onExportRecording).toHaveBeenCalledOnce()
+  })
+
+  it('starts a new recording from the menu', async () => {
+    const onStartRecording = vi.fn()
+    const { user } = renderControl({
+      hasRecording: true,
+      recordingDuration: 4,
+      onStartRecording
+    })
+
+    await openRecordingMenu(user)
+    await user.click(
+      screen.getByRole('button', { name: 'Start New Recording' })
+    )
+
+    expect(onStartRecording).toHaveBeenCalledOnce()
+  })
+
+  it('deletes the recording from the menu', async () => {
+    const onClearRecording = vi.fn()
+    const { user } = renderControl({
+      hasRecording: true,
+      recordingDuration: 4,
+      onClearRecording
+    })
+
+    await openRecordingMenu(user)
+    await user.click(
+      within(screen.getByRole('dialog')).getByRole('button', {
+        name: 'Delete Recording'
+      })
+    )
+
+    expect(onClearRecording).toHaveBeenCalledOnce()
+  })
+
+  it('deletes the recording via the chip dismiss button', async () => {
+    const onClearRecording = vi.fn()
+    const { user } = renderControl({
+      hasRecording: true,
+      recordingDuration: 4,
+      onClearRecording
+    })
+
+    await user.click(screen.getByRole('button', { name: 'Delete Recording' }))
+
+    expect(onClearRecording).toHaveBeenCalledOnce()
+  })
+
+  it('shows only the stop control while recording is in progress', () => {
+    renderControl({ isRecording: true, hasRecording: true })
+
+    expect(
+      screen.queryByRole('button', {
+        name: 'Video recording of the scene [mp4]'
+      })
+    ).not.toBeInTheDocument()
+  })
+})

src/components/load3d/menubar/RecordMenuControl.vue

@@ -0,0 +1,141 @@
+<template>
+  <button
+    v-if="isRecording"
+    v-tooltip.top="tip(t('load3d.menuBar.stopRecording'))"
+    :class="chipClass"
+    type="button"
+    :aria-label="t('load3d.menuBar.stopRecording')"
+    @click="emit('stopRecording')"
+  >
+    <span class="size-2 animate-pulse rounded-full bg-red-500" />
+    <span v-if="!compact">{{ t('load3d.menuBar.recording') }}</span>
+  </button>
+
+  <div
+    v-else-if="hasRecording"
+    class="flex shrink-0 items-center gap-0.5 rounded-lg bg-button-active-surface py-0.5 pr-0.5 pl-1 text-sm text-base-foreground"
+  >
+    <Popover v-model:open="menuOpen">
+      <PopoverTrigger as-child>
+        <button
+          v-tooltip.top="tip(t('load3d.menuBar.videoRecordingTooltip'))"
+          class="focus-visible:ring-ring flex items-center gap-1.5 rounded-md border-0 bg-transparent px-1 py-0.5 text-sm text-base-foreground transition-colors outline-none hover:bg-button-hover-surface focus-visible:ring-1"
+          type="button"
+          :aria-label="t('load3d.menuBar.videoRecordingTooltip')"
+          data-testid="load3d-recording-duration"
+        >
+          <i class="icon-[lucide--film] size-4" />
+          {{ formatDuration(recordingDuration ?? 0) }}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="bottom"
+        align="start"
+        :side-offset="8"
+        :class="panelClass"
+      >
+        <button
+          type="button"
+          :class="cn(rowClass, 'gap-2')"
+          @click="downloadRecording"
+        >
+          <i class="icon-[lucide--download] size-4" />
+          {{ t('load3d.menuBar.downloadRecording') }}
+        </button>
+        <button
+          type="button"
+          :class="cn(rowClass, 'gap-2')"
+          @click="startNewRecording"
+        >
+          <i class="icon-[lucide--video] size-4" />
+          {{ t('load3d.menuBar.startNewRecording') }}
+        </button>
+        <button
+          type="button"
+          :class="cn(rowClass, 'gap-2')"
+          @click="deleteRecording"
+        >
+          <i class="icon-[lucide--trash-2] size-4" />
+          {{ t('load3d.menuBar.deleteRecording') }}
+        </button>
+      </PopoverContent>
+    </Popover>
+    <button
+      v-tooltip.top="tip(t('load3d.menuBar.deleteRecording'))"
+      class="focus-visible:ring-ring flex size-6 items-center justify-center rounded-md border-0 bg-transparent text-base-foreground transition-colors outline-none hover:bg-button-hover-surface focus-visible:ring-1"
+      type="button"
+      :aria-label="t('load3d.menuBar.deleteRecording')"
+      @click="emit('clearRecording')"
+    >
+      <i class="icon-[lucide--x] size-3.5" />
+    </button>
+  </div>
+
+  <button
+    v-else
+    v-tooltip.top="tip(t('load3d.menuBar.record'))"
+    :class="chipClass"
+    type="button"
+    :aria-label="compact ? t('load3d.menuBar.record') : undefined"
+    @click="emit('startRecording')"
+  >
+    <i class="icon-[lucide--video] size-4" />
+    <span v-if="!compact">{{ t('load3d.menuBar.record') }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { PopoverTrigger } from 'reka-ui'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  chipClass,
+  panelClass,
+  rowClass,
+  tip
+} from '@/components/load3d/menubar/menuBarStyles'
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { compact = false } = defineProps<{
+  compact?: boolean
+}>()
+
+const isRecording = defineModel<boolean>('isRecording')
+const hasRecording = defineModel<boolean>('hasRecording')
+const recordingDuration = defineModel<number>('recordingDuration')
+
+const emit = defineEmits<{
+  (e: 'startRecording'): void
+  (e: 'stopRecording'): void
+  (e: 'exportRecording'): void
+  (e: 'clearRecording'): void
+}>()
+
+const { t } = useI18n()
+
+const menuOpen = ref(false)
+
+function downloadRecording() {
+  menuOpen.value = false
+  emit('exportRecording')
+}
+
+function startNewRecording() {
+  menuOpen.value = false
+  emit('startRecording')
+}
+
+function deleteRecording() {
+  menuOpen.value = false
+  emit('clearRecording')
+}
+
+function formatDuration(seconds: number) {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = Math.floor(seconds % 60)
+  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
+}
+</script>

src/components/load3d/menubar/SceneMenuGroup.test.ts

@@ -0,0 +1,108 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SceneMenuGroup from '@/components/load3d/menubar/SceneMenuGroup.vue'
+import type { SceneConfig } from '@/extensions/core/load3d/interfaces'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+function makeConfig(overrides: Partial<SceneConfig> = {}): SceneConfig {
+  return {
+    showGrid: true,
+    backgroundColor: '#000000',
+    backgroundImage: '',
+    backgroundRenderMode: 'tiled',
+    ...overrides
+  }
+}
+
+type Props = {
+  config?: SceneConfig
+  fov?: number
+  hdriActive?: boolean
+  canUseBackgroundImage?: boolean
+  onUpdateBackgroundImage?: (file: File | null) => void
+}
+
+function renderGroup(props: Props = {}) {
+  const result = render(SceneMenuGroup, {
+    props: { config: makeConfig(), ...props },
+    global: { plugins: [i18n], directives: { tooltip: () => {} } }
+  })
+  return { ...result, user: userEvent.setup() }
+}
+
+describe('SceneMenuGroup', () => {
+  it('toggles showGrid on the bound config', async () => {
+    const config = makeConfig({ showGrid: true })
+    const { user } = renderGroup({ config })
+
+    await user.click(screen.getByRole('button', { name: 'Show grid' }))
+
+    expect(config.showGrid).toBe(false)
+  })
+
+  it('hides background color and image controls while HDRI is active', () => {
+    renderGroup({ hdriActive: true })
+
+    expect(
+      screen.queryByRole('button', { name: 'BG Color' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'BG Image' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('hides the image upload when background images are not allowed', () => {
+    renderGroup({ canUseBackgroundImage: false })
+
+    expect(screen.getByRole('button', { name: 'BG Color' })).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'BG Image' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('shows panorama and remove once a background image exists', async () => {
+    const onUpdateBackgroundImage = vi.fn()
+    const { user } = renderGroup({
+      config: makeConfig({ backgroundImage: 'bg.png' }),
+      onUpdateBackgroundImage
+    })
+
+    expect(screen.getByRole('button', { name: 'Panorama' })).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'Remove BG' }))
+
+    expect(onUpdateBackgroundImage).toHaveBeenCalledWith(null)
+  })
+
+  it('exposes the FOV control while a panorama background is active', () => {
+    renderGroup({
+      config: makeConfig({
+        backgroundImage: 'bg.png',
+        backgroundRenderMode: 'panorama'
+      }),
+      fov: 75
+    })
+
+    expect(screen.getByRole('button', { name: 'FOV' })).toBeInTheDocument()
+  })
+
+  it('clears the file input so the same image can be re-picked', async () => {
+    const onUpdateBackgroundImage = vi.fn()
+    const { user } = renderGroup({ onUpdateBackgroundImage })
+    const input = screen.getByTestId<HTMLInputElement>('scene-bg-image-input')
+    const file = new File(['x'], 'bg.png', { type: 'image/png' })
+
+    await user.upload(input, file)
+
+    expect(onUpdateBackgroundImage).toHaveBeenCalledWith(file)
+    expect(input.value).toBe('')
+  })
+})

src/components/load3d/menubar/SceneMenuGroup.vue

@@ -0,0 +1,190 @@
+<template>
+  <button
+    v-tooltip.bottom="tip(t('load3d.menuBar.showGrid'))"
+    :class="actionClass(showGrid)"
+    :aria-pressed="showGrid"
+    type="button"
+    :aria-label="compact ? t('load3d.menuBar.showGrid') : undefined"
+    @click="toggleGrid"
+  >
+    <i class="icon-[lucide--grid-3x3] size-4" />
+    <span v-if="!compact">{{ t('load3d.menuBar.showGrid') }}</span>
+  </button>
+
+  <template v-if="!hasImage && !hdriActive">
+    <button
+      v-tooltip.bottom="tip(t('load3d.menuBar.bgColor'))"
+      :class="actionClass(false)"
+      type="button"
+      :aria-label="compact ? t('load3d.menuBar.bgColor') : undefined"
+      @click="colorRef?.click()"
+    >
+      <i class="icon-[lucide--palette] size-4" />
+      <span v-if="!compact">{{ t('load3d.menuBar.bgColor') }}</span>
+    </button>
+    <input
+      ref="colorRef"
+      type="color"
+      class="pointer-events-none absolute size-0 opacity-0"
+      :value="bgColor"
+      @input="setBackgroundColor"
+    />
+    <template v-if="canUseBackgroundImage">
+      <button
+        v-tooltip.bottom="tip(t('load3d.menuBar.bgImage'))"
+        :class="actionClass(false)"
+        type="button"
+        :aria-label="compact ? t('load3d.menuBar.bgImage') : undefined"
+        @click="bgImageRef?.click()"
+      >
+        <i class="icon-[lucide--image] size-4" />
+        <span v-if="!compact">{{ t('load3d.menuBar.bgImage') }}</span>
+      </button>
+      <input
+        ref="bgImageRef"
+        type="file"
+        accept="image/*"
+        class="pointer-events-none absolute size-0 opacity-0"
+        data-testid="scene-bg-image-input"
+        @change="onBackgroundImagePicked"
+      />
+    </template>
+  </template>
+
+  <template v-if="hasImage">
+    <button
+      v-tooltip.bottom="tip(t('load3d.menuBar.panorama'))"
+      :class="actionClass(isPanorama)"
+      :aria-pressed="isPanorama"
+      type="button"
+      :aria-label="compact ? t('load3d.menuBar.panorama') : undefined"
+      @click="togglePanorama"
+    >
+      <i class="icon-[lucide--globe] size-4" />
+      <span v-if="!compact">{{ t('load3d.menuBar.panorama') }}</span>
+    </button>
+    <Popover v-if="isPanorama">
+      <PopoverTrigger as-child>
+        <button
+          v-tooltip.bottom="tip(t('load3d.menuBar.fov'))"
+          :class="actionClass(false)"
+          type="button"
+          :aria-label="compact ? t('load3d.menuBar.fov') : undefined"
+        >
+          <i class="icon-[lucide--focus] size-4" />
+          <span v-if="!compact">{{ t('load3d.menuBar.fov') }}</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="bottom"
+        align="start"
+        :side-offset="8"
+        :class="cn(panelClass, 'w-56')"
+      >
+        <div class="flex flex-col gap-2 p-1">
+          <span class="text-sm text-base-foreground">{{
+            t('load3d.fov')
+          }}</span>
+          <Slider
+            :model-value="[fovValue]"
+            :min="10"
+            :max="150"
+            :step="1"
+            class="w-full"
+            @update:model-value="setFov"
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+    <button
+      v-tooltip.bottom="tip(t('load3d.menuBar.removeBackground'))"
+      :class="actionClass(false)"
+      type="button"
+      :aria-label="compact ? t('load3d.menuBar.removeBackground') : undefined"
+      @click="removeBackgroundImage"
+    >
+      <i class="icon-[lucide--x] size-4" />
+      <span v-if="!compact">{{ t('load3d.menuBar.removeBackground') }}</span>
+    </button>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  actionClass,
+  panelClass,
+  tip
+} from '@/components/load3d/menubar/menuBarStyles'
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+import type { SceneConfig } from '@/extensions/core/load3d/interfaces'
+import { cn } from '@comfyorg/tailwind-utils'
+import { PopoverTrigger } from 'reka-ui'
+
+const {
+  compact = false,
+  canUseBackgroundImage = true,
+  hdriActive = false
+} = defineProps<{
+  compact?: boolean
+  canUseBackgroundImage?: boolean
+  hdriActive?: boolean
+}>()
+
+const config = defineModel<SceneConfig>('config')
+const fov = defineModel<number>('fov')
+
+const emit = defineEmits<{
+  (e: 'updateBackgroundImage', file: File | null): void
+}>()
+
+const { t } = useI18n()
+
+const showGrid = computed(() => config.value?.showGrid ?? false)
+const bgColor = computed(() => config.value?.backgroundColor ?? '#000000')
+const hasImage = computed(
+  () => !!config.value?.backgroundImage && config.value.backgroundImage !== ''
+)
+const isPanorama = computed(
+  () => config.value?.backgroundRenderMode === 'panorama'
+)
+const fovValue = computed(() => fov.value ?? 10)
+
+const colorRef = ref<HTMLInputElement | null>(null)
+const bgImageRef = ref<HTMLInputElement | null>(null)
+
+function toggleGrid() {
+  if (config.value) config.value.showGrid = !config.value.showGrid
+}
+
+function setBackgroundColor(event: Event) {
+  if (config.value) {
+    config.value.backgroundColor = (event.target as HTMLInputElement).value
+  }
+}
+
+function onBackgroundImagePicked(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (file) emit('updateBackgroundImage', file)
+}
+
+function removeBackgroundImage() {
+  emit('updateBackgroundImage', null)
+}
+
+function togglePanorama() {
+  if (!config.value) return
+  config.value.backgroundRenderMode =
+    config.value.backgroundRenderMode === 'panorama' ? 'tiled' : 'panorama'
+}
+
+function setFov(value?: number[]) {
+  if (value?.length) fov.value = value[0]
+}
+</script>

src/components/load3d/menubar/menuBarStyles.ts

@@ -0,0 +1,24 @@
+import { cn } from '@comfyorg/tailwind-utils'
+
+export const chipClass =
+  'flex shrink-0 items-center gap-1.5 rounded-lg border-0 bg-interface-menu-surface px-2.5 py-1 text-sm text-base-foreground outline-none transition-colors hover:bg-button-active-surface focus-visible:ring-1 focus-visible:ring-ring'
+
+export const iconBtnClass =
+  'flex size-8 items-center justify-center rounded-md border-0 bg-transparent text-base-foreground outline-none transition-colors hover:bg-button-hover-surface focus-visible:ring-1 focus-visible:ring-ring'
+
+export const panelClass =
+  'w-48 max-h-80 overflow-y-auto flex flex-col gap-0.5 p-1.5 rounded-lg border-border-default bg-interface-menu-surface shadow-interface'
+
+export const rowClass =
+  'flex w-full cursor-pointer items-center rounded-md border-0 bg-transparent px-2 py-1.5 text-left text-sm text-base-foreground outline-none hover:bg-button-hover-surface focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset'
+
+export function actionClass(active: boolean) {
+  return cn(
+    'focus-visible:ring-ring flex shrink-0 items-center gap-1.5 rounded-md border-0 bg-transparent px-2 py-1 text-sm text-base-foreground transition-colors outline-none hover:bg-button-hover-surface focus-visible:ring-1',
+    active && 'bg-button-active-surface'
+  )
+}
+
+export function tip(label: string) {
+  return { value: label, showDelay: 300 }
+}

src/components/palette/PaletteSwatchRow.test.ts

@@ -32,7 +32,7 @@ describe('PaletteSwatchRow', () => {
 
   it('appends a color when the add button is clicked', async () => {
     const { emitted } = renderRow(['#ff0000'])
-    await userEvent.click(screen.getByRole('button'))
+    await userEvent.click(screen.getByRole('button', { name: '+' }))
     expect(lastEmit(emitted)).toEqual(['#ff0000', '#ffffff'])
   })
 
@@ -44,18 +44,14 @@ describe('PaletteSwatchRow', () => {
 
   it('hides the add button once the max is reached', () => {
     renderRow(['#a', '#b'], 2)
-    expect(screen.queryByRole('button')).toBeNull()
+    expect(screen.queryByRole('button', { name: '+' })).toBeNull()
   })
 
-  it('writes a picked color back through the hidden color input', async () => {
-    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
-    await fireEvent.click(container.querySelector('[data-index="1"]')!)
-    const input = container.querySelector(
-      'input[type="color"]'
-    ) as HTMLInputElement
-    input.value = '#0000ff'
-    await fireEvent.input(input)
-    expect(lastEmit(emitted)).toEqual(['#ff0000', '#0000ff'])
+  it('opens the color picker when a swatch is clicked', async () => {
+    const { container } = renderRow(['#ff0000'])
+    const swatch = container.querySelector('[data-index="0"]')!
+    await userEvent.click(swatch)
+    expect(swatch.getAttribute('data-state')).toBe('open')
   })
 
   it('starts a drag on pointer down without emitting', async () => {

src/components/palette/PaletteSwatchRow.vue

@@ -1,17 +1,25 @@
 <template>
   <div ref="container" class="flex flex-wrap items-center gap-1">
-    <div
+    <ColorPicker
       v-for="(hex, i) in modelValue"
-      :key="`${i}-${hex}`"
-      :data-index="i"
-      :data-hex="hex"
-      class="relative size-5 cursor-pointer rounded-sm border border-component-node-border"
-      :style="{ background: hex }"
-      :title="t('palette.swatchTitle')"
-      @click="openPicker(i, $event)"
-      @contextmenu.prevent.stop="remove(i)"
-      @pointerdown="onPointerDown(i, $event)"
-    />
+      :key="i"
+      :model-value="hex"
+      :alpha="false"
+      @update:model-value="(value) => updateAt(i, value)"
+    >
+      <template #trigger>
+        <button
+          type="button"
+          :data-index="i"
+          :data-hex="hex"
+          class="relative size-5 cursor-pointer rounded-sm border border-component-node-border p-0"
+          :style="{ background: hex }"
+          :title="t('palette.swatchTitle')"
+          @contextmenu.prevent.stop="remove(i)"
+          @pointerdown="onPointerDown(i, $event)"
+        />
+      </template>
+    </ColorPicker>
     <button
       v-if="modelValue.length < max"
       type="button"
@@ -21,12 +29,6 @@
     >
       +
     </button>
-    <input
-      ref="picker"
-      type="color"
-      class="pointer-events-none absolute size-0 opacity-0"
-      @input="onPickerInput"
-    />
   </div>
 </template>
 
@@ -34,6 +36,7 @@
 import { useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import ColorPicker from '@/components/ui/color-picker/ColorPicker.vue'
 import { usePaletteSwatchRow } from '@/composables/palette/usePaletteSwatchRow'
 
 const { max = 5 } = defineProps<{ max?: number }>()
@@ -41,8 +44,9 @@ const modelValue = defineModel<string[]>({ required: true })
 const { t } = useI18n()
 
 const container = useTemplateRef<HTMLDivElement>('container')
-const picker = useTemplateRef<HTMLInputElement>('picker')
 
-const { openPicker, onPickerInput, remove, addColor, onPointerDown } =
-  usePaletteSwatchRow({ modelValue, container, picker })
+const { updateAt, remove, addColor, onPointerDown } = usePaletteSwatchRow({
+  modelValue,
+  container
+})
 </script>

src/components/sidebar/SideToolbar.test.ts

@@ -0,0 +1,194 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { createI18n } from 'vue-i18n'
+
+import SideToolbar from './SideToolbar.vue'
+
+interface TestTab {
+  id: string
+  icon: string
+  tooltip: string
+  label: string
+  title: string
+}
+
+const spies = vi.hoisted(() => ({
+  trackUiButtonClicked: vi.fn(),
+  toggleAssets: vi.fn()
+}))
+
+const state = vi.hoisted(() => ({
+  isMultiUserServer: false,
+  sidebarTabs: [] as TestTab[],
+  activeSidebarTab: null as { id: string } | null
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false,
+  isDesktop: false,
+  isNightly: false
+}))
+
+vi.mock('@/stores/workspaceStore', () => ({
+  useWorkspaceStore: () => ({
+    getSidebarTabs: () => state.sidebarTabs,
+    sidebarTab: { activeSidebarTab: state.activeSidebarTab }
+  })
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: (key: string) => {
+      if (key === 'Comfy.Sidebar.Size') return 'large'
+      if (key === 'Comfy.Sidebar.Location') return 'left'
+      return 'floating'
+    }
+  })
+}))
+
+vi.mock('@/stores/userStore', () => ({
+  useUserStore: () => ({ isMultiUserServer: state.isMultiUserServer })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    commands: [
+      { id: 'Workspace.ToggleSidebarTab.assets', function: spies.toggleAssets }
+    ]
+  })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({ canvas: null })
+}))
+
+vi.mock('@/platform/keybindings/keybindingStore', () => ({
+  useKeybindingStore: () => ({ getKeybindingByCommandId: () => undefined })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackUiButtonClicked: spies.trackUiButtonClicked })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+type SideToolbarProps = ComponentProps<typeof SideToolbar>
+
+function renderToolbar(props: SideToolbarProps = {}) {
+  return render(SideToolbar, {
+    props,
+    global: {
+      plugins: [PrimeVue, i18n],
+      directives: { tooltip: {} },
+      stubs: {
+        ComfyMenuButton: { template: '<div />' },
+        SidebarTemplatesButton: { template: '<div />' },
+        SidebarLogoutIcon: { template: '<div data-testid="logout" />' },
+        SidebarHelpCenterIcon: { template: '<div />' },
+        SidebarSettingsButton: { template: '<div />' },
+        HelpCenterPopups: { template: '<div />' },
+        SidebarBottomPanelToggleButton: {
+          template: '<div data-testid="bottom-panel-toggle" />'
+        },
+        SidebarShortcutsToggleButton: {
+          template: '<div data-testid="shortcuts-toggle" />'
+        }
+      }
+    }
+  })
+}
+
+const assetsTab: TestTab = {
+  id: 'assets',
+  icon: 'pi pi-image',
+  tooltip: 'Assets',
+  label: 'Assets',
+  title: 'Assets'
+}
+
+const workflowsTab: TestTab = {
+  id: 'workflows',
+  icon: 'pi pi-folder',
+  tooltip: 'Workflows',
+  label: 'Workflows',
+  title: 'Workflows'
+}
+
+describe('SideToolbar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    state.isMultiUserServer = false
+    state.sidebarTabs = [assetsTab, workflowsTab]
+    state.activeSidebarTab = null
+  })
+
+  it('renders only the tabs listed in visibleTabIds', () => {
+    renderToolbar({ visibleTabIds: ['assets'] })
+
+    expect(screen.getByRole('button', { name: 'Assets' })).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Workflows' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('renders all sidebar tabs when visibleTabIds is omitted', () => {
+    renderToolbar()
+
+    expect(screen.getByRole('button', { name: 'Assets' })).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Workflows' })
+    ).toBeInTheDocument()
+  })
+
+  it('marks the toolbar as connected when forceConnected is true', () => {
+    renderToolbar({ forceConnected: true })
+
+    // connected-sidebar is a behavioral hook: it drives the global
+    // :root:has() sidebar width variables.
+    expect(screen.getByTestId('side-toolbar')).toHaveClass('connected-sidebar')
+  })
+
+  it('shows the shortcuts and bottom panel toggles by default', () => {
+    renderToolbar()
+
+    expect(screen.getByTestId('shortcuts-toggle')).toBeInTheDocument()
+    expect(screen.getByTestId('bottom-panel-toggle')).toBeInTheDocument()
+  })
+
+  it('hides the shortcuts and bottom panel toggles when hideWorkspaceToggles is set', () => {
+    renderToolbar({ hideWorkspaceToggles: true })
+
+    expect(screen.queryByTestId('shortcuts-toggle')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('bottom-panel-toggle')).not.toBeInTheDocument()
+  })
+
+  it('reports telemetry and runs the toggle command when a tab is clicked', async () => {
+    const user = userEvent.setup()
+    renderToolbar({ visibleTabIds: ['assets'] })
+
+    await user.click(screen.getByRole('button', { name: 'Assets' }))
+
+    expect(spies.trackUiButtonClicked).toHaveBeenCalledWith({
+      button_id: 'sidebar_tab_assets_media_selected',
+      element_group: 'sidebar'
+    })
+    expect(spies.toggleAssets).toHaveBeenCalled()
+  })
+
+  it('renders the logout icon only on a multi-user server', () => {
+    const { unmount } = renderToolbar()
+    expect(screen.queryByTestId('logout')).not.toBeInTheDocument()
+    unmount()
+
+    state.isMultiUserServer = true
+    renderToolbar()
+    expect(screen.getByTestId('logout')).toBeInTheDocument()
+  })
+})

src/components/sidebar/SideToolbar.vue

@@ -42,8 +42,14 @@
           :is-small="isSmall"
         />
         <SidebarHelpCenterIcon :is-small="isSmall" />
-        <SidebarBottomPanelToggleButton v-if="!isCloud" :is-small="isSmall" />
-        <SidebarShortcutsToggleButton :is-small="isSmall" />
+        <SidebarBottomPanelToggleButton
+          v-if="!isCloud && !hideWorkspaceToggles"
+          :is-small="isSmall"
+        />
+        <SidebarShortcutsToggleButton
+          v-if="!hideWorkspaceToggles"
+          :is-small="isSmall"
+        />
         <SidebarSettingsButton :is-small="isSmall" />
       </div>
     </div>
@@ -89,6 +95,16 @@ import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
 import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
+const {
+  visibleTabIds,
+  forceConnected = false,
+  hideWorkspaceToggles = false
+} = defineProps<{
+  visibleTabIds?: string[]
+  forceConnected?: boolean
+  hideWorkspaceToggles?: boolean
+}>()
+
 const NightlySurveyController =
   isNightly && !isCloud && !isDesktop
     ? defineAsyncComponent(
@@ -115,12 +131,18 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
 const sidebarStyle = computed(() => settingStore.get('Comfy.Sidebar.Style'))
 const isConnected = computed(
   () =>
+    forceConnected ||
     selectedTab.value ||
     isOverflowing.value ||
     sidebarStyle.value === 'connected'
 )
 
-const tabs = computed(() => workspaceStore.getSidebarTabs())
+const tabs = computed(() => {
+  const all = workspaceStore.getSidebarTabs()
+  return visibleTabIds
+    ? all.filter((tab) => visibleTabIds.includes(tab.id))
+    : all
+})
 const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
 
 /**

src/components/sidebar/SidebarHelpCenterIcon.test.ts

@@ -0,0 +1,153 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
+
+const typeformState = vi.hoisted(() => ({
+  typeformError: false,
+  isValidTypeformId: true
+}))
+
+const embedSpy = vi.hoisted(() => vi.fn())
+
+const canvasState = vi.hoisted(() => ({ linearMode: true }))
+
+const helpCenterSpies = vi.hoisted(() => ({ toggleHelpCenter: vi.fn() }))
+
+vi.mock('@/platform/surveys/useTypeformEmbed', async () => {
+  const { computed } = await import('vue')
+  return {
+    useTypeformEmbed: (containerRef: unknown, formId: string) => {
+      embedSpy(containerRef, formId)
+      return {
+        typeformError: computed(() => typeformState.typeformError),
+        isValidTypeformId: computed(() => typeformState.isValidTypeformId),
+        // The real composable echoes the id it validated.
+        typeformId: computed(() => formId)
+      }
+    }
+  }
+})
+
+vi.mock('@/composables/useHelpCenter', async () => {
+  const { ref } = await import('vue')
+  return {
+    useHelpCenter: () => ({
+      shouldShowRedDot: ref(false),
+      toggleHelpCenter: helpCenterSpies.toggleHelpCenter
+    })
+  }
+})
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({ get: () => 'left' })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', async () => {
+  const { computed, reactive } = await import('vue')
+  return {
+    useCanvasStore: () =>
+      reactive({ linearMode: computed(() => canvasState.linearMode) })
+  }
+})
+
+const FEEDBACK_LOAD_ERROR =
+  'Failed to load feedback form. Please try again later.'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      menu: { help: 'Help' },
+      sideToolbar: { helpCenter: 'Help Center' },
+      linearMode: {
+        giveFeedback: 'Give feedback',
+        feedbackLoadError: FEEDBACK_LOAD_ERROR
+      }
+    }
+  }
+})
+
+function renderIcon() {
+  const user = userEvent.setup()
+  const result = render(SidebarHelpCenterIcon, {
+    props: { isSmall: false },
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: {} },
+      stubs: {
+        Popover: {
+          template: '<div><slot name="button" /><slot /></div>'
+        }
+      }
+    }
+  })
+  return { ...result, user }
+}
+
+describe('SidebarHelpCenterIcon', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    typeformState.typeformError = false
+    typeformState.isValidTypeformId = true
+    canvasState.linearMode = true
+  })
+
+  it('mounts the Typeform embed container wired to the feedback form', () => {
+    renderIcon()
+
+    const embed = screen.getByTestId('feedback-embed')
+    expect(embed).toHaveAttribute('data-tf-widget', 'jmmzmlKw')
+    expect(embedSpy).toHaveBeenCalledWith(expect.anything(), 'jmmzmlKw')
+    expect(screen.queryByText(FEEDBACK_LOAD_ERROR)).not.toBeInTheDocument()
+  })
+
+  it('shows the localized fallback instead of the embed when loading fails', () => {
+    typeformState.typeformError = true
+    renderIcon()
+
+    expect(screen.getByText(FEEDBACK_LOAD_ERROR)).toBeInTheDocument()
+    expect(screen.queryByTestId('feedback-embed')).not.toBeInTheDocument()
+  })
+
+  it('shows the localized fallback when the form id is invalid', () => {
+    typeformState.isValidTypeformId = false
+    renderIcon()
+
+    expect(screen.getByText(FEEDBACK_LOAD_ERROR)).toBeInTheDocument()
+    expect(screen.queryByTestId('feedback-embed')).not.toBeInTheDocument()
+  })
+
+  it('does not open the help center from the feedback button in app mode', async () => {
+    const { user } = renderIcon()
+
+    await user.click(screen.getByRole('button', { name: 'Give feedback' }))
+
+    expect(helpCenterSpies.toggleHelpCenter).not.toHaveBeenCalled()
+  })
+
+  it('shows the help center button instead of the feedback popover in graph mode', () => {
+    canvasState.linearMode = false
+    renderIcon()
+
+    expect(
+      screen.getByRole('button', { name: 'Help Center' })
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Give feedback' })
+    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('feedback-embed')).not.toBeInTheDocument()
+  })
+
+  it('toggles the help center on click in graph mode', async () => {
+    canvasState.linearMode = false
+    const { user } = renderIcon()
+
+    await user.click(screen.getByRole('button', { name: 'Help Center' }))
+
+    expect(helpCenterSpies.toggleHelpCenter).toHaveBeenCalled()
+  })
+})

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -1,5 +1,35 @@
 <template>
+  <Popover
+    v-if="linearMode"
+    :side="sidebarOnLeft ? 'right' : 'left'"
+    :side-offset="8"
+  >
+    <template #button>
+      <SidebarIcon
+        icon="pi pi-question-circle"
+        class="comfy-help-center-btn"
+        data-testid="help-center-button"
+        :label="$t('menu.help')"
+        :tooltip="$t('linearMode.giveFeedback')"
+        :is-small
+      />
+    </template>
+    <div
+      v-if="typeformError || !isValidTypeformId"
+      class="text-danger p-4 text-sm"
+    >
+      {{ $t('linearMode.feedbackLoadError') }}
+    </div>
+    <div
+      v-else
+      ref="feedbackRef"
+      data-testid="feedback-embed"
+      data-tf-auto-resize
+      :data-tf-widget="typeformId"
+    />
+  </Popover>
   <SidebarIcon
+    v-else
     icon="pi pi-question-circle"
     class="comfy-help-center-btn"
     data-testid="help-center-button"
@@ -7,13 +37,21 @@
     :tooltip="$t('sideToolbar.helpCenter')"
     :icon-badge="shouldShowRedDot ? '•' : ''"
     badge-class="-top-1 -right-1 min-w-2 w-2 h-2 p-0 rounded-full text-[0px] bg-[#ff3b30]"
-    :is-small="isSmall"
+    :is-small
     @click="toggleHelpCenter()"
   />
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, useTemplateRef } from 'vue'
+
+import Popover from '@/components/ui/Popover.vue'
 import { useHelpCenter } from '@/composables/useHelpCenter'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { APP_MODE_FEEDBACK_TYPEFORM_ID } from '@/platform/surveys/appModeFeedback'
+import { useTypeformEmbed } from '@/platform/surveys/useTypeformEmbed'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
@@ -22,4 +60,16 @@ defineProps<{
 }>()
 
 const { shouldShowRedDot, toggleHelpCenter } = useHelpCenter()
+const { linearMode } = storeToRefs(useCanvasStore())
+
+const settingStore = useSettingStore()
+const sidebarOnLeft = computed(
+  () => settingStore.get('Comfy.Sidebar.Location') === 'left'
+)
+
+const feedbackRef = useTemplateRef<HTMLDivElement>('feedbackRef')
+const { typeformError, isValidTypeformId, typeformId } = useTypeformEmbed(
+  feedbackRef,
+  APP_MODE_FEEDBACK_TYPEFORM_ID
+)
 </script>

src/components/sidebar/tabs/AppsSidebarTab.test.ts

@@ -0,0 +1,207 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+
+import AppsSidebarTab from './AppsSidebarTab.vue'
+
+const execute = vi.hoisted(() => vi.fn())
+
+const workflowStoreState = vi.hoisted(() => ({
+  persistedWorkflows: [] as ComfyWorkflow[]
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({ execute })
+}))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', async () => {
+  const { ComfyWorkflow } =
+    await import('@/platform/workflow/management/stores/comfyWorkflow')
+  return {
+    ComfyWorkflow,
+    useWorkflowStore: () => ({
+      get workflows() {
+        return workflowStoreState.persistedWorkflows
+      },
+      get persistedWorkflows() {
+        return workflowStoreState.persistedWorkflows
+      },
+      bookmarkedWorkflows: [],
+      openWorkflows: [],
+      activeWorkflow: undefined,
+      isSyncLoading: false,
+      syncWorkflows: vi.fn()
+    }),
+    useWorkflowBookmarkStore: () => ({ loadBookmarks: vi.fn() })
+  }
+})
+
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
+  useWorkflowService: () => ({})
+}))
+
+vi.mock('@/platform/telemetry/searchQuery/useSearchQueryTracking', () => ({
+  useSearchQueryTracking: () => undefined
+}))
+
+vi.mock('@/stores/workspaceStore', () => ({
+  useWorkspaceStore: () => ({ shiftDown: false })
+}))
+
+vi.mock('@/composables/useAppMode', async () => {
+  const { computed } = await import('vue')
+  return { useAppMode: () => ({ isAppMode: computed(() => true) }) }
+})
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({ get: () => undefined })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        beta: 'Beta',
+        refresh: 'Refresh',
+        searchPlaceholder: 'Search {subject}'
+      },
+      sideToolbar: {
+        workflowTab: {
+          workflowTreeType: {
+            open: 'Open',
+            bookmarks: 'Bookmarks',
+            browse: 'Browse'
+          }
+        }
+      },
+      linearMode: {
+        appModeToolbar: {
+          apps: 'Apps',
+          create: 'Create',
+          createApp: 'Create app',
+          appsEmptyMessage: 'No apps yet',
+          appsEmptyMessageAction: 'Create one to get started'
+        }
+      }
+    }
+  }
+})
+
+const noResultsPlaceholderStub = {
+  props: ['buttonLabel'],
+  emits: ['action'],
+  template: '<button @click="$emit(\'action\')">{{ buttonLabel }}</button>'
+}
+
+function renderTab({ hasResults = true }: { hasResults?: boolean } = {}) {
+  const user = userEvent.setup()
+  const result = render(AppsSidebarTab, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        BaseWorkflowsSidebarTab: {
+          template: `<div><slot name="header-actions" :has-results="${hasResults}" /><slot name="empty-state" /></div>`
+        },
+        NoResultsPlaceholder: noResultsPlaceholderStub
+      }
+    }
+  })
+  return { ...result, user }
+}
+
+async function makeWorkflow(path: string): Promise<ComfyWorkflow> {
+  const { ComfyWorkflow } =
+    await import('@/platform/workflow/management/stores/comfyWorkflow')
+  return new ComfyWorkflow({ path, modified: 0, size: 1 })
+}
+
+function renderTabWithRealBase() {
+  const user = userEvent.setup()
+  const result = render(AppsSidebarTab, {
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: {} },
+      stubs: {
+        SidebarTabTemplate: {
+          template:
+            '<div><slot name="alt-title" /><slot name="tool-buttons" /><slot name="header" /><slot name="body" /></div>'
+        },
+        SidebarTopArea: { template: '<div><slot /></div>' },
+        SearchInput: { template: '<input />', methods: { focus() {} } },
+        TreeExplorer: { template: '<div data-testid="tree-explorer" />' },
+        NoResultsPlaceholder: noResultsPlaceholderStub
+      }
+    }
+  })
+  return { ...result, user }
+}
+
+describe('AppsSidebarTab', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    workflowStoreState.persistedWorkflows = []
+  })
+
+  it('shows the create action only when there are results', () => {
+    const { unmount } = renderTab({ hasResults: false })
+    expect(
+      screen.queryByRole('button', { name: 'Create' })
+    ).not.toBeInTheDocument()
+    unmount()
+
+    renderTab({ hasResults: true })
+    expect(screen.getByRole('button', { name: 'Create' })).toBeInTheDocument()
+  })
+
+  it('runs the new-workflow command when the create action is clicked', async () => {
+    const { user } = renderTab({ hasResults: true })
+
+    await user.click(screen.getByRole('button', { name: 'Create' }))
+
+    expect(execute).toHaveBeenCalledWith('Comfy.NewBlankWorkflow')
+  })
+
+  it('runs the new-workflow command from the empty-state action', async () => {
+    const { user } = renderTab({ hasResults: false })
+
+    await user.click(screen.getByRole('button', { name: 'Create app' }))
+
+    expect(execute).toHaveBeenCalledWith('Comfy.NewBlankWorkflow')
+  })
+
+  describe('with the real workflows tab', () => {
+    it('counts only app workflows as results', async () => {
+      workflowStoreState.persistedWorkflows = [
+        await makeWorkflow('workflows/my-app.app.json'),
+        await makeWorkflow('workflows/regular.json')
+      ]
+
+      renderTabWithRealBase()
+
+      expect(screen.getByRole('button', { name: 'Create' })).toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Create app' })
+      ).not.toBeInTheDocument()
+    })
+
+    it('shows the empty state when no app workflows exist', async () => {
+      workflowStoreState.persistedWorkflows = [
+        await makeWorkflow('workflows/regular.json')
+      ]
+
+      renderTabWithRealBase()
+
+      expect(
+        screen.queryByRole('button', { name: 'Create' })
+      ).not.toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Create app' })
+      ).toBeInTheDocument()
+    })
+  })
+})

src/components/sidebar/tabs/AppsSidebarTab.vue

@@ -13,18 +13,25 @@
         {{ $t('g.beta') }}
       </span>
     </template>
+    <template #header-actions="{ hasResults }">
+      <Button
+        v-if="hasResults"
+        variant="secondary"
+        size="md"
+        @click="createApp"
+      >
+        <i class="icon-[lucide--plus] size-4" aria-hidden="true" />
+        {{ $t('linearMode.appModeToolbar.create') }}
+      </Button>
+    </template>
     <template #empty-state>
       <NoResultsPlaceholder
         button-variant="secondary"
         text-class="text-muted-foreground text-sm"
-        :message="
-          isAppMode
-            ? $t('linearMode.appModeToolbar.appsEmptyMessage')
-            : `${$t('linearMode.appModeToolbar.appsEmptyMessage')}\n${$t('linearMode.appModeToolbar.appsEmptyMessageAction')}`
-        "
-        button-icon="icon-[lucide--hammer]"
-        :button-label="isAppMode ? undefined : $t('linearMode.buildAnApp')"
-        @action="enterAppMode"
+        :message="`${$t('linearMode.appModeToolbar.appsEmptyMessage')}\n${$t('linearMode.appModeToolbar.appsEmptyMessageAction')}`"
+        button-icon="icon-[lucide--plus]"
+        :button-label="$t('linearMode.appModeToolbar.createApp')"
+        @action="createApp"
       />
     </template>
   </BaseWorkflowsSidebarTab>
@@ -33,16 +40,17 @@
 <script setup lang="ts">
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import BaseWorkflowsSidebarTab from '@/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue'
-import { useAppMode } from '@/composables/useAppMode'
+import Button from '@/components/ui/button/Button.vue'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useCommandStore } from '@/stores/commandStore'
 
-const { isAppMode, setMode } = useAppMode()
+const commandStore = useCommandStore()
 
 function isAppWorkflow(workflow: ComfyWorkflow): boolean {
   return workflow.suffix === 'app.json'
 }
 
-function enterAppMode() {
-  setMode('app')
+function createApp() {
+  void commandStore.execute('Comfy.NewBlankWorkflow')
 }
 </script>

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -30,6 +30,10 @@
           "
         />
       </Button>
+      <slot
+        name="header-actions"
+        :has-results="filteredPersistedWorkflows.length > 0"
+      />
     </template>
     <template #header>
       <SidebarTopArea>