diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml
index 1dd9853ea5..c47ed11a2a 100644
--- a/.github/workflows/cla.yml
+++ b/.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"
diff --git a/.github/workflows/pr-backport.yaml b/.github/workflows/pr-backport.yaml
index 9d6ec183d7..5f8a4bdbe6 100644
--- a/.github/workflows/pr-backport.yaml
+++ b/.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
 
diff --git a/apps/website/e2e/navigation.spec.ts b/apps/website/e2e/navigation.spec.ts
index 999cef164d..171bfb5e99 100644
--- a/apps/website/e2e/navigation.spec.ts
+++ b/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
   }) => {
diff --git a/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-get-started-3-lg-visual-linux.png b/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-get-started-3-lg-visual-linux.png
index 60fc0c7d1d..2abcd9e7e5 100644
Binary files a/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-get-started-3-lg-visual-linux.png and b/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-get-started-3-lg-visual-linux.png differ
diff --git a/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-get-started-4-xl-visual-linux.png b/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-get-started-4-xl-visual-linux.png
index cea1fb7d8d..65b5d114de 100644
Binary files a/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-get-started-4-xl-visual-linux.png and b/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-get-started-4-xl-visual-linux.png differ
diff --git a/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-product-cards-3-lg-visual-linux.png b/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-product-cards-3-lg-visual-linux.png
index a1f331a1fe..f96e4b9326 100644
Binary files a/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-product-cards-3-lg-visual-linux.png and b/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-product-cards-3-lg-visual-linux.png differ
diff --git a/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-product-cards-4-xl-visual-linux.png b/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-product-cards-4-xl-visual-linux.png
index f12988d9a8..80283bf8a8 100644
Binary files a/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-product-cards-4-xl-visual-linux.png and b/apps/website/e2e/visual-responsive.spec.ts-snapshots/home-product-cards-4-xl-visual-linux.png differ
diff --git a/apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue b/apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue
index c95737e084..7bd69fae31 100644
--- a/apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue
+++ b/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">
diff --git a/apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue b/apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue
index ec65c90faa..0bdf9cdcff 100644
--- a/apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue
+++ b/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>
diff --git a/apps/website/src/components/common/HeaderMain/NavLinkContent.vue b/apps/website/src/components/common/HeaderMain/NavLinkContent.vue
index 473d9567fe..fbb22118ad 100644
--- a/apps/website/src/components/common/HeaderMain/NavLinkContent.vue
+++ b/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"
diff --git a/apps/website/src/components/common/HeaderMain/NewBadge.vue b/apps/website/src/components/common/HeaderMain/NewBadge.vue
new file mode 100644
index 0000000000..b62f612bd3
--- /dev/null
+++ b/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>
diff --git a/apps/website/src/components/pricing/PricingSection.vue b/apps/website/src/components/pricing/PricingSection.vue
index 7f4ca34a00..9dd9924195 100644
--- a/apps/website/src/components/pricing/PricingSection.vue
+++ b/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>
diff --git a/apps/website/src/components/ui/badge/index.ts b/apps/website/src/components/ui/badge/index.ts
index 61a9cc5a5d..ce5009b8a8 100644
--- a/apps/website/src/components/ui/badge/index.ts
+++ b/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: {
diff --git a/apps/website/src/data/mainNavigation.ts b/apps/website/src/data/mainNavigation.ts
index 7ed09ffd1d..02939615f4 100644
--- a/apps/website/src/data/mainNavigation.ts
+++ b/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),
diff --git a/apps/website/src/templates/drops/DropCard.vue b/apps/website/src/templates/drops/DropCard.vue
index 2294d14495..71b4d586d8 100644
--- a/apps/website/src/templates/drops/DropCard.vue
+++ b/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>
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index 5cf6ce1749..f29b6c330e 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/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
diff --git a/browser_tests/fixtures/components/SidebarTab.ts b/browser_tests/fixtures/components/SidebarTab.ts
index d0532d745e..3db6d04bc1 100644
--- a/browser_tests/fixtures/components/SidebarTab.ts
+++ b/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
 
diff --git a/browser_tests/fixtures/components/WorkflowActionsDropdown.ts b/browser_tests/fixtures/components/WorkflowActionsDropdown.ts
new file mode 100644
index 0000000000..67c1c34821
--- /dev/null
+++ b/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' })
+  }
+}
diff --git a/browser_tests/fixtures/helpers/AppModeHelper.ts b/browser_tests/fixtures/helpers/AppModeHelper.ts
index 2eea1fcd83..b9b9578a66 100644
--- a/browser_tests/fixtures/helpers/AppModeHelper.ts
+++ b/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()
diff --git a/browser_tests/fixtures/selectors.ts b/browser_tests/fixtures/selectors.ts
index 385736733e..a6e697042b 100644
--- a/browser_tests/fixtures/selectors.ts
+++ b/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: {
diff --git a/browser_tests/tests/appMode.spec.ts b/browser_tests/tests/appMode.spec.ts
index 84db45ef49..f14bdcdcb0 100644
--- a/browser_tests/tests/appMode.spec.ts
+++ b/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
diff --git a/browser_tests/tests/collapsedNodeLinks.spec.ts-snapshots/subgraph-entry-collapsed-node-links-chromium-linux.png b/browser_tests/tests/collapsedNodeLinks.spec.ts-snapshots/subgraph-entry-collapsed-node-links-chromium-linux.png
index b6a1cae354..c60e26d8d3 100644
Binary files a/browser_tests/tests/collapsedNodeLinks.spec.ts-snapshots/subgraph-entry-collapsed-node-links-chromium-linux.png and b/browser_tests/tests/collapsedNodeLinks.spec.ts-snapshots/subgraph-entry-collapsed-node-links-chromium-linux.png differ
diff --git a/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png b/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png
index 78556e0f29..f845e224f0 100644
Binary files a/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png and b/browser_tests/tests/execution.spec.ts-snapshots/execution-error-unconnected-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png
index 2a8ab06512..134fe1ea2c 100644
Binary files a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png and b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png differ
diff --git a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-25-chromium-linux.png b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-25-chromium-linux.png
index ff701e7a90..262920384d 100644
Binary files a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-25-chromium-linux.png and b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-25-chromium-linux.png differ
diff --git a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-75-chromium-linux.png b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-75-chromium-linux.png
index 3edf16c2f8..aa9cb283f0 100644
Binary files a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-75-chromium-linux.png and b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-slider-75-chromium-linux.png differ
diff --git a/browser_tests/tests/load3d/Load3DHelper.ts b/browser_tests/tests/load3d/Load3DHelper.ts
index ded5d2a879..3b240430cb 100644
--- a/browser_tests/tests/load3d/Load3DHelper.ts
+++ b/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()
diff --git a/browser_tests/tests/load3d/load3d.spec.ts b/browser_tests/tests/load3d/load3d.spec.ts
index f36bb9f98f..b6a28558d5 100644
--- a/browser_tests/tests/load3d/load3d.spec.ts
+++ b/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()
     })
   })
 })
diff --git a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-background-image-panorama-chromium-linux.png b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-background-image-panorama-chromium-linux.png
index 2fe059d4e4..44511bc551 100644
Binary files a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-background-image-panorama-chromium-linux.png and b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-background-image-panorama-chromium-linux.png differ
diff --git a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-background-image-tiled-chromium-linux.png b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-background-image-tiled-chromium-linux.png
index d21ede7ed1..aebf4e52f9 100644
Binary files a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-background-image-tiled-chromium-linux.png and b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-background-image-tiled-chromium-linux.png differ
diff --git a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png
index b7809ca031..b78bb91e88 100644
Binary files a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png and b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png differ
diff --git a/browser_tests/tests/maskEditor.spec.ts b/browser_tests/tests/maskEditor.spec.ts
index 223dc43581..4840fe24cc 100644
--- a/browser_tests/tests/maskEditor.spec.ts
+++ b/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)
diff --git a/browser_tests/tests/minimap.spec.ts b/browser_tests/tests/minimap.spec.ts
index c974906845..8ec0dfb9aa 100644
--- a/browser_tests/tests/minimap.spec.ts
+++ b/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'] }, () => {
diff --git a/browser_tests/tests/painter.spec.ts-snapshots/painter-after-resize-chromium-linux.png b/browser_tests/tests/painter.spec.ts-snapshots/painter-after-resize-chromium-linux.png
index a03a3c2a7a..b6d74f8fae 100644
Binary files a/browser_tests/tests/painter.spec.ts-snapshots/painter-after-resize-chromium-linux.png and b/browser_tests/tests/painter.spec.ts-snapshots/painter-after-resize-chromium-linux.png differ
diff --git a/browser_tests/tests/painter.spec.ts-snapshots/painter-after-stroke-chromium-linux.png b/browser_tests/tests/painter.spec.ts-snapshots/painter-after-stroke-chromium-linux.png
index fd6c120791..4fc603b67a 100644
Binary files a/browser_tests/tests/painter.spec.ts-snapshots/painter-after-stroke-chromium-linux.png and b/browser_tests/tests/painter.spec.ts-snapshots/painter-after-stroke-chromium-linux.png differ
diff --git a/browser_tests/tests/painter.spec.ts-snapshots/painter-default-state-chromium-linux.png b/browser_tests/tests/painter.spec.ts-snapshots/painter-default-state-chromium-linux.png
index 85a2ba7025..1670397f00 100644
Binary files a/browser_tests/tests/painter.spec.ts-snapshots/painter-default-state-chromium-linux.png and b/browser_tests/tests/painter.spec.ts-snapshots/painter-default-state-chromium-linux.png differ
diff --git a/browser_tests/tests/saveImageAndWebp.spec.ts-snapshots/save-image-and-webm-preview-chromium-linux.png b/browser_tests/tests/saveImageAndWebp.spec.ts-snapshots/save-image-and-webm-preview-chromium-linux.png
index 31e9b14834..f6e6c7e579 100644
Binary files a/browser_tests/tests/saveImageAndWebp.spec.ts-snapshots/save-image-and-webm-preview-chromium-linux.png and b/browser_tests/tests/saveImageAndWebp.spec.ts-snapshots/save-image-and-webm-preview-chromium-linux.png differ
diff --git a/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png b/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png
index a2663677a8..3bd711c76b 100644
Binary files a/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png and b/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
index 2956ce307d..64caf9b330 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
index 9f29beb6a3..83eebc85b8 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
index b8ab099a1c..3730ec43b7 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
index ea6a424999..44a4c595d7 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
index b8f20a50f8..536c5d3a92 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
index 68c66e85d5..5f06eb9801 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
index ceb197c564..3435874521 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
index 259da04459..604cbaccdd 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
index 4eeffd84ac..aafe2e32f5 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
index 1c70d3b3cc..91465f8fd3 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
index 85d53e0e4a..f641a46a10 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts-snapshots/vue-node-multiple-promoted-previews-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts-snapshots/vue-node-multiple-promoted-previews-chromium-linux.png
index 7eb77279cc..47559f3203 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts-snapshots/vue-node-multiple-promoted-previews-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts-snapshots/vue-node-multiple-promoted-previews-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
index f888a1577f..d497fd6de3 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
index a09ec82f64..c0cef47e6d 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
index c3dc0eb1f3..60d916d2c1 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
index 7cd9b3ceae..f00bc02528 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
index 258ec471e5..0b9bd6994d 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts-snapshots/vue-reroute-node-compact-chromium-linux.png b/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts-snapshots/vue-reroute-node-compact-chromium-linux.png
index 0d89d5b618..1b0f4fa7fc 100644
Binary files a/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts-snapshots/vue-reroute-node-compact-chromium-linux.png and b/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts-snapshots/vue-reroute-node-compact-chromium-linux.png differ
diff --git a/package.json b/package.json
index b4d7093ee7..7845cbf8fa 100644
--- a/package.json
+++ b/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:",
diff --git a/packages/ingest-types/src/types.gen.ts b/packages/ingest-types/src/types.gen.ts
index 19f04d9742..bdec51e818 100644
--- a/packages/ingest-types/src/types.gen.ts
+++ b/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
 }
 
 /**
diff --git a/packages/ingest-types/src/zod.gen.ts b/packages/ingest-types/src/zod.gen.ts
index b39e7f0a1e..e1ade4d369 100644
--- a/packages/ingest-types/src/zod.gen.ts
+++ b/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()
 })
 
 /**
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f5fca20966..49def6180d 100644
--- a/pnpm-lock.yaml
+++ b/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:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index d444288907..58b8b22841 100644
--- a/pnpm-workspace.yaml
+++ b/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
diff --git a/src/components/appMode/AppModeToolbar.test.ts b/src/components/appMode/AppModeToolbar.test.ts
new file mode 100644
index 0000000000..b1ac946f8b
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/appMode/AppModeToolbar.vue b/src/components/appMode/AppModeToolbar.vue
index e123b9bc13..6f29ea04a9 100644
--- a/src/components/appMode/AppModeToolbar.vue
+++ b/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>
diff --git a/src/components/boundingBoxes/WidgetBoundingBoxes.vue b/src/components/boundingBoxes/WidgetBoundingBoxes.vue
index 9873610929..5162556a75 100644
--- a/src/components/boundingBoxes/WidgetBoundingBoxes.vue
+++ b/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,
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.test.ts b/src/components/breadcrumb/SubgraphBreadcrumb.test.ts
new file mode 100644
index 0000000000..4056c8e618
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index 2db47f9c55..25ed74b98c 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/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) => {
diff --git a/src/components/common/WorkflowActionsDropdown.test.ts b/src/components/common/WorkflowActionsDropdown.test.ts
new file mode 100644
index 0000000000..6e59b3269c
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/common/WorkflowActionsDropdown.vue b/src/components/common/WorkflowActionsDropdown.vue
index 7a42ae2540..e0482b2977 100644
--- a/src/components/common/WorkflowActionsDropdown.vue
+++ b/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"
       >
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index 09b6eeb9e0..cda4fced7b 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/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
   },
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 27f4fc6038..0d46429c1f 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/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
diff --git a/src/components/load3d/Load3D.test.ts b/src/components/load3d/Load3D.test.ts
index 014ec4b7de..60bfc516c6 100644
--- a/src/components/load3d/Load3D.test.ts
+++ b/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()
     })
   })
 
diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue
index 9d3b95ca54..33685de4a2 100644
--- a/src/components/load3d/Load3D.vue
+++ b/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>)
 
diff --git a/src/components/load3d/Load3DMenuBar.test.ts b/src/components/load3d/Load3DMenuBar.test.ts
new file mode 100644
index 0000000000..3bbbe229fd
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/load3d/Load3DMenuBar.vue b/src/components/load3d/Load3DMenuBar.vue
new file mode 100644
index 0000000000..ee20f62a83
--- /dev/null
+++ b/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>
diff --git a/src/components/load3d/controls/RecordingControls.test.ts b/src/components/load3d/controls/RecordingControls.test.ts
deleted file mode 100644
index 4d93ac1ccc..0000000000
--- a/src/components/load3d/controls/RecordingControls.test.ts
+++ /dev/null
@@ -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()
-  })
-})
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
deleted file mode 100644
index 40b1d07229..0000000000
--- a/src/components/load3d/controls/RecordingControls.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/load3d/menubar/CameraMenuGroup.test.ts b/src/components/load3d/menubar/CameraMenuGroup.test.ts
new file mode 100644
index 0000000000..95fa6fd747
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/load3d/menubar/CameraMenuGroup.vue b/src/components/load3d/menubar/CameraMenuGroup.vue
new file mode 100644
index 0000000000..8153b62711
--- /dev/null
+++ b/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>
diff --git a/src/components/load3d/menubar/GizmoMenuGroup.test.ts b/src/components/load3d/menubar/GizmoMenuGroup.test.ts
new file mode 100644
index 0000000000..ce7ddf130c
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/src/components/load3d/menubar/GizmoMenuGroup.vue b/src/components/load3d/menubar/GizmoMenuGroup.vue
new file mode 100644
index 0000000000..8a6898cdef
--- /dev/null
+++ b/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>
diff --git a/src/components/load3d/menubar/HdriMenuGroup.test.ts b/src/components/load3d/menubar/HdriMenuGroup.test.ts
new file mode 100644
index 0000000000..9ca853fda0
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/src/components/load3d/menubar/HdriMenuGroup.vue b/src/components/load3d/menubar/HdriMenuGroup.vue
new file mode 100644
index 0000000000..e558f6fef7
--- /dev/null
+++ b/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>
diff --git a/src/components/load3d/menubar/LightMenuGroup.test.ts b/src/components/load3d/menubar/LightMenuGroup.test.ts
new file mode 100644
index 0000000000..071441cced
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/src/components/load3d/menubar/LightMenuGroup.vue b/src/components/load3d/menubar/LightMenuGroup.vue
new file mode 100644
index 0000000000..e3d49fd4bc
--- /dev/null
+++ b/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>
diff --git a/src/components/load3d/menubar/ModelMenuGroup.test.ts b/src/components/load3d/menubar/ModelMenuGroup.test.ts
new file mode 100644
index 0000000000..bdb9099a84
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/src/components/load3d/menubar/ModelMenuGroup.vue b/src/components/load3d/menubar/ModelMenuGroup.vue
new file mode 100644
index 0000000000..ca51b3c4c3
--- /dev/null
+++ b/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>
diff --git a/src/components/load3d/menubar/RecordMenuControl.test.ts b/src/components/load3d/menubar/RecordMenuControl.test.ts
new file mode 100644
index 0000000000..ef49c1108a
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/load3d/menubar/RecordMenuControl.vue b/src/components/load3d/menubar/RecordMenuControl.vue
new file mode 100644
index 0000000000..402cecb404
--- /dev/null
+++ b/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>
diff --git a/src/components/load3d/menubar/SceneMenuGroup.test.ts b/src/components/load3d/menubar/SceneMenuGroup.test.ts
new file mode 100644
index 0000000000..f273543a50
--- /dev/null
+++ b/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('')
+  })
+})
diff --git a/src/components/load3d/menubar/SceneMenuGroup.vue b/src/components/load3d/menubar/SceneMenuGroup.vue
new file mode 100644
index 0000000000..c2e4761d41
--- /dev/null
+++ b/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>
diff --git a/src/components/load3d/menubar/menuBarStyles.ts b/src/components/load3d/menubar/menuBarStyles.ts
new file mode 100644
index 0000000000..bd6e56e460
--- /dev/null
+++ b/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 }
+}
diff --git a/src/components/palette/PaletteSwatchRow.test.ts b/src/components/palette/PaletteSwatchRow.test.ts
index 45fdcb171d..831b393260 100644
--- a/src/components/palette/PaletteSwatchRow.test.ts
+++ b/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 () => {
diff --git a/src/components/palette/PaletteSwatchRow.vue b/src/components/palette/PaletteSwatchRow.vue
index f662ea00c3..830308a403 100644
--- a/src/components/palette/PaletteSwatchRow.vue
+++ b/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>
diff --git a/src/components/sidebar/SideToolbar.test.ts b/src/components/sidebar/SideToolbar.test.ts
new file mode 100644
index 0000000000..8e6ed9bcbf
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 86d2d87f92..b6ae5b7876 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/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)
 
 /**
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.test.ts b/src/components/sidebar/SidebarHelpCenterIcon.test.ts
new file mode 100644
index 0000000000..6599c74da0
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index 486278076d..27107b8b91 100644
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/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>
diff --git a/src/components/sidebar/tabs/AppsSidebarTab.test.ts b/src/components/sidebar/tabs/AppsSidebarTab.test.ts
new file mode 100644
index 0000000000..c60d87782d
--- /dev/null
+++ b/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()
+    })
+  })
+})
diff --git a/src/components/sidebar/tabs/AppsSidebarTab.vue b/src/components/sidebar/tabs/AppsSidebarTab.vue
index 4c03c0acf6..edb1464d1f 100644
--- a/src/components/sidebar/tabs/AppsSidebarTab.vue
+++ b/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>
diff --git a/src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue b/src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue
index d8094c3f68..57bdbdb182 100644
--- a/src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue
@@ -30,6 +30,10 @@
           "
         />
       </Button>
+      <slot
+        name="header-actions"
+        :has-results="filteredPersistedWorkflows.length > 0"
+      />
     </template>
     <template #header>
       <SidebarTopArea>
diff --git a/src/components/ui/TypeformPopoverButton.vue b/src/components/ui/TypeformPopoverButton.vue
deleted file mode 100644
index 42f8f471bb..0000000000
--- a/src/components/ui/TypeformPopoverButton.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { breakpointsTailwind, useBreakpoints, whenever } from '@vueuse/core'
-import { useTemplateRef } from 'vue'
-
-import Popover from '@/components/ui/Popover.vue'
-import Button from '@/components/ui/button/Button.vue'
-
-const { active = true } = defineProps<{
-  dataTfWidget: string
-  active?: boolean
-}>()
-
-const feedbackRef = useTemplateRef('feedbackRef')
-const isMobile = useBreakpoints(breakpointsTailwind).smaller('md')
-
-whenever(feedbackRef, () => {
-  const scriptEl = document.createElement('script')
-  scriptEl.src = '//embed.typeform.com/next/embed.js'
-  feedbackRef.value?.appendChild(scriptEl)
-})
-</script>
-<template>
-  <Button
-    v-if="isMobile"
-    as="a"
-    :href="`https://form.typeform.com/to/${dataTfWidget}`"
-    target="_blank"
-    variant="inverted"
-    class="flex h-10 items-center justify-center gap-2.5 px-3 py-2"
-    v-bind="$attrs"
-  >
-    <i class="icon-[lucide--circle-help] size-4" />
-  </Button>
-  <Popover v-else>
-    <template #button>
-      <Button
-        variant="inverted"
-        class="flex h-10 items-center justify-center gap-2.5 px-3 py-2"
-        v-bind="$attrs"
-      >
-        <i class="icon-[lucide--circle-help] size-4" />
-      </Button>
-    </template>
-    <div v-if="active" ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
-  </Popover>
-</template>
diff --git a/src/components/ui/color-picker/ColorPicker.vue b/src/components/ui/color-picker/ColorPicker.vue
index 8ac7fed20d..8215e4e7a3 100644
--- a/src/components/ui/color-picker/ColorPicker.vue
+++ b/src/components/ui/color-picker/ColorPicker.vue
@@ -14,20 +14,27 @@ import { cn } from '@comfyorg/tailwind-utils'
 
 import ColorPickerPanel from './ColorPickerPanel.vue'
 
-defineProps<{
+const { alpha = true } = defineProps<{
   class?: string
   disabled?: boolean
+  alpha?: boolean
 }>()
 
 const modelValue = defineModel<string>({ default: '#000000' })
 
-const hsva = ref<HSVA>(hexToHsva(modelValue.value || '#000000'))
+function readHsva(hex: string): HSVA {
+  const next = hexToHsva(hex || '#000000')
+  if (!alpha) next.a = 100
+  return next
+}
+
+const hsva = ref<HSVA>(readHsva(modelValue.value))
 const displayMode = ref<'hex' | 'rgba'>('hex')
 
 watch(modelValue, (newVal) => {
   const current = hsvaToHex(hsva.value)
   if (newVal !== current) {
-    hsva.value = hexToHsva(newVal || '#000000')
+    hsva.value = readHsva(newVal)
   }
 })
 
@@ -67,49 +74,51 @@ const contentStyle = useModalLiftedZIndex(isOpen)
 <template>
   <PopoverRoot v-model:open="isOpen">
     <PopoverTrigger as-child>
-      <button
-        type="button"
-        :disabled="$props.disabled"
-        :class="
-          cn(
-            'flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-component-node-widget-background pr-2 outline-none hover:bg-component-node-widget-background-hovered disabled:cursor-not-allowed disabled:opacity-50',
-            isOpen && 'border-node-stroke',
-            $props.class
-          )
-        "
-      >
-        <div class="flex size-8 shrink-0 items-center justify-center">
-          <div class="relative size-4 overflow-hidden rounded-sm">
-            <div
-              class="absolute inset-0"
-              :style="{
-                backgroundImage:
-                  'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)',
-                backgroundSize: '4px 4px'
-              }"
-            />
-            <div
-              class="absolute inset-0"
-              :style="{ backgroundColor: previewColor }"
-            />
-          </div>
-        </div>
-        <div
-          class="flex flex-1 items-center justify-between pl-1 text-xs text-component-node-foreground"
+      <slot name="trigger">
+        <button
+          type="button"
+          :disabled="$props.disabled"
+          :class="
+            cn(
+              'flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-component-node-widget-background pr-2 outline-none hover:bg-component-node-widget-background-hovered disabled:cursor-not-allowed disabled:opacity-50',
+              isOpen && 'border-node-stroke',
+              $props.class
+            )
+          "
         >
-          <template v-if="displayMode === 'hex'">
-            <span>{{ displayHex }}</span>
-          </template>
-          <template v-else>
-            <div class="flex gap-2">
-              <span>{{ baseRgb.r }}</span>
-              <span>{{ baseRgb.g }}</span>
-              <span>{{ baseRgb.b }}</span>
+          <div class="flex size-8 shrink-0 items-center justify-center">
+            <div class="relative size-4 overflow-hidden rounded-sm">
+              <div
+                class="absolute inset-0"
+                :style="{
+                  backgroundImage:
+                    'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)',
+                  backgroundSize: '4px 4px'
+                }"
+              />
+              <div
+                class="absolute inset-0"
+                :style="{ backgroundColor: previewColor }"
+              />
             </div>
-          </template>
-          <span>{{ hsva.a }}%</span>
-        </div>
-      </button>
+          </div>
+          <div
+            class="flex flex-1 items-center justify-between pl-1 text-xs text-component-node-foreground"
+          >
+            <template v-if="displayMode === 'hex'">
+              <span>{{ displayHex }}</span>
+            </template>
+            <template v-else>
+              <div class="flex gap-2">
+                <span>{{ baseRgb.r }}</span>
+                <span>{{ baseRgb.g }}</span>
+                <span>{{ baseRgb.b }}</span>
+              </div>
+            </template>
+            <span>{{ hsva.a }}%</span>
+          </div>
+        </button>
+      </slot>
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
@@ -123,6 +132,7 @@ const contentStyle = useModalLiftedZIndex(isOpen)
         <ColorPickerPanel
           v-model:hsva="hsva"
           v-model:display-mode="displayMode"
+          :alpha
         />
       </PopoverContent>
     </PopoverPortal>
diff --git a/src/components/ui/color-picker/ColorPickerPanel.vue b/src/components/ui/color-picker/ColorPickerPanel.vue
index d7f28678a1..ebfebf2431 100644
--- a/src/components/ui/color-picker/ColorPickerPanel.vue
+++ b/src/components/ui/color-picker/ColorPickerPanel.vue
@@ -13,6 +13,8 @@ import { hsbToRgb, rgbToHex } from '@/utils/colorUtil'
 import ColorPickerSaturationValue from './ColorPickerSaturationValue.vue'
 import ColorPickerSlider from './ColorPickerSlider.vue'
 
+const { alpha = true } = defineProps<{ alpha?: boolean }>()
+
 const hsva = defineModel<HSVA>('hsva', { required: true })
 const displayMode = defineModel<'hex' | 'rgba'>('displayMode', {
   required: true
@@ -37,6 +39,7 @@ const { t } = useI18n()
     />
     <ColorPickerSlider v-model="hsva.h" type="hue" />
     <ColorPickerSlider
+      v-if="alpha"
       v-model="hsva.a"
       type="alpha"
       :hue="hsva.h"
@@ -72,7 +75,7 @@ const { t } = useI18n()
           <span class="w-6 shrink-0 text-center">{{ rgb.g }}</span>
           <span class="w-6 shrink-0 text-center">{{ rgb.b }}</span>
         </template>
-        <span class="shrink-0 border-l border-border-subtle pl-1"
+        <span v-if="alpha" class="shrink-0 border-l border-border-subtle pl-1"
           >{{ hsva.a }}%</span
         >
       </div>
diff --git a/src/composables/boundingBoxes/boundingBoxesUtil.test.ts b/src/composables/boundingBoxes/boundingBoxesUtil.test.ts
index e9d154cb44..dd959d3f0e 100644
--- a/src/composables/boundingBoxes/boundingBoxesUtil.test.ts
+++ b/src/composables/boundingBoxes/boundingBoxesUtil.test.ts
@@ -156,7 +156,7 @@ describe('fromBoundingBoxes', () => {
         y: 200,
         width: 300,
         height: 400,
-        metadata: { type: 'text', text: 'hi', desc: 'd', palette: ['#fff'] }
+        metadata: { type: 'text', text: 'hi', desc: 'd', palette: ['#ffffff'] }
       }
     ]
     expect(fromBoundingBoxes(boxes, 1000, 1000)[0]).toEqual({
@@ -167,10 +167,31 @@ describe('fromBoundingBoxes', () => {
       type: 'text',
       text: 'hi',
       desc: 'd',
-      palette: ['#fff']
+      palette: ['#ffffff']
     })
   })
 
+  it('normalizes palette entries and drops invalid colors', () => {
+    const boxes: BoundingBox[] = [
+      {
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 10,
+        metadata: {
+          type: 'obj',
+          text: '',
+          desc: '',
+          palette: ['#FF0000', '#abc', 'red', '', 123] as unknown as string[]
+        }
+      }
+    ]
+    expect(fromBoundingBoxes(boxes, 100, 100)[0].palette).toEqual([
+      '#ff0000',
+      '#aabbcc'
+    ])
+  })
+
   it('fills defaults when metadata is missing or partial', () => {
     const boxes = [{ x: 0, y: 0, width: 10, height: 10 }] as BoundingBox[]
     expect(fromBoundingBoxes(boxes, 100, 100)[0]).toMatchObject({
diff --git a/src/composables/boundingBoxes/boundingBoxesUtil.ts b/src/composables/boundingBoxes/boundingBoxesUtil.ts
index 4588b53a8d..876e2364ab 100644
--- a/src/composables/boundingBoxes/boundingBoxesUtil.ts
+++ b/src/composables/boundingBoxes/boundingBoxesUtil.ts
@@ -202,6 +202,22 @@ function isBoundingBox(b: unknown): b is BoundingBox {
   )
 }
 
+function normalizeHexColor(color: unknown): string | null {
+  if (typeof color !== 'string') return null
+  const hex = color.trim().toLowerCase()
+  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(hex)
+  if (short) {
+    return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`
+  }
+  return /^#([0-9a-f]{6}|[0-9a-f]{8})$/.test(hex) ? hex : null
+}
+
+function normalizePalette(palette: unknown): string[] {
+  return Array.isArray(palette)
+    ? palette.map(normalizeHexColor).filter((c): c is string => c !== null)
+    : []
+}
+
 export function fromBoundingBoxes(
   boxes: readonly BoundingBox[],
   width: number,
@@ -219,9 +235,7 @@ export function fromBoundingBoxes(
       type: meta.type === 'text' ? 'text' : 'obj',
       text: typeof meta.text === 'string' ? meta.text : '',
       desc: typeof meta.desc === 'string' ? meta.desc : '',
-      palette: Array.isArray(meta.palette)
-        ? meta.palette.filter((c): c is string => typeof c === 'string')
-        : []
+      palette: normalizePalette(meta.palette)
     }
   })
 }
diff --git a/src/composables/boundingBoxes/useBoundingBoxes.test.ts b/src/composables/boundingBoxes/useBoundingBoxes.test.ts
index 5e92f43b03..437beaadd1 100644
--- a/src/composables/boundingBoxes/useBoundingBoxes.test.ts
+++ b/src/composables/boundingBoxes/useBoundingBoxes.test.ts
@@ -8,14 +8,32 @@ import { useBoundingBoxes } from './useBoundingBoxes'
 import type { BoundingBox } from '@/types/boundingBoxes'
 import { toNodeId } from '@/types/nodeId'
 
-const { appState } = vi.hoisted(() => ({
-  appState: { node: null as unknown }
+const { appState, outputState } = vi.hoisted(() => ({
+  appState: { node: null as unknown },
+  outputState: {
+    outputs: undefined as unknown,
+    nodeOutputs: null as { value: Record<string, unknown> } | null
+  }
 }))
 
 vi.mock('@/scripts/app', () => ({
   app: { canvas: { graph: { getNodeById: () => appState.node } } }
 }))
 
+vi.mock('@/stores/nodeOutputStore', async () => {
+  const { ref } = await import('vue')
+  const nodeOutputs = ref<Record<string, unknown>>({})
+  outputState.nodeOutputs = nodeOutputs
+  return {
+    useNodeOutputStore: () => ({
+      nodeOutputs,
+      nodePreviewImages: ref({}),
+      getNodeImageUrls: () => undefined,
+      getNodeOutputs: () => outputState.outputs
+    })
+  }
+})
+
 const ctx = {
   measureText: (s: string) => ({ width: s.length * 7 }),
   setTransform: () => {},
@@ -27,6 +45,9 @@ const ctx = {
   save: () => {},
   restore: () => {},
   beginPath: () => {},
+  moveTo: () => {},
+  arc: () => {},
+  fill: () => {},
   rect: () => {},
   clip: () => {},
   font: '',
@@ -58,17 +79,32 @@ function makeCanvas(): HTMLCanvasElement {
   return el
 }
 
-function makeNode() {
+interface MockNode {
+  widgets: { name: string; value: unknown }[]
+  findInputSlot: (name: string) => number
+  getInputNode: () => null
+  isInputConnected?: () => boolean
+}
+
+function makeNode(): MockNode {
   return {
     widgets: [
       { name: 'width', value: 512 },
-      { name: 'height', value: 512 }
+      { name: 'height', value: 512 },
+      { name: 'last_incoming', value: [] }
     ],
     findInputSlot: () => -1,
     getInputNode: () => null
   }
 }
 
+const lastIncomingOf = (node: MockNode) =>
+  node.widgets.find((w) => w.name === 'last_incoming')!.value
+
+const setLastIncomingOf = (node: MockNode, value: BoundingBox[]) => {
+  node.widgets.find((w) => w.name === 'last_incoming')!.value = value
+}
+
 const pe = (
   clientX: number,
   clientY: number,
@@ -96,6 +132,8 @@ interface Captured extends Api {
   modelValue: Ref<BoundingBox[]>
 }
 
+const modelBoxes = (c: Captured) => c.modelValue.value
+
 function setup(initial: BoundingBox[] = []) {
   let captured: Captured | undefined
   const Harness = defineComponent({
@@ -128,9 +166,19 @@ const box = (over: Partial<BoundingBox> = {}): BoundingBox => ({
   ...over
 })
 
+function makeConnectedNode(): MockNode {
+  return {
+    ...makeNode(),
+    findInputSlot: (name: string) => (name === 'bboxes' ? 1 : -1),
+    isInputConnected: () => true
+  }
+}
+
 beforeEach(() => {
   setActivePinia(createPinia())
   appState.node = makeNode()
+  outputState.outputs = undefined
+  if (outputState.nodeOutputs) outputState.nodeOutputs.value = {}
   vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
     void Promise.resolve().then(() => cb(0))
     return 1
@@ -168,8 +216,8 @@ describe('useBoundingBoxes drawing', () => {
     c.onCanvasPointerMove(pe(60, 60))
     c.onDocPointerUp(pe(60, 60))
     await flush()
-    expect(c.modelValue.value).toHaveLength(1)
-    expect(c.modelValue.value[0].width).toBeGreaterThan(0)
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBeGreaterThan(0)
   })
 
   it('discards a zero-size draw', async () => {
@@ -177,7 +225,7 @@ describe('useBoundingBoxes drawing', () => {
     c.onPointerDown(pe(10, 10))
     c.onDocPointerUp(pe(10, 10))
     await flush()
-    expect(c.modelValue.value).toHaveLength(0)
+    expect(modelBoxes(c)).toHaveLength(0)
   })
 
   it('selects an existing region instead of drawing when clicking inside it', async () => {
@@ -185,7 +233,7 @@ describe('useBoundingBoxes drawing', () => {
     c.onPointerDown(pe(30, 30))
     c.onDocPointerUp(pe(30, 30))
     await flush()
-    expect(c.modelValue.value).toHaveLength(1)
+    expect(modelBoxes(c)).toHaveLength(1)
   })
 })
 
@@ -194,7 +242,7 @@ describe('useBoundingBoxes region editing', () => {
     const c = setup([box()])
     c.setActiveType('text')
     await flush()
-    expect(c.modelValue.value[0].metadata.type).toBe('text')
+    expect(modelBoxes(c)[0].metadata.type).toBe('text')
   })
 
   it('deletes the active region on Delete', async () => {
@@ -205,14 +253,18 @@ describe('useBoundingBoxes region editing', () => {
       stopPropagation: () => {}
     } as unknown as KeyboardEvent)
     await flush()
-    expect(c.modelValue.value).toHaveLength(0)
+    expect(modelBoxes(c)).toHaveLength(0)
   })
 
-  it('clears all regions', async () => {
+  it('clears all regions and invalidates the applied upstream input', async () => {
+    const node = makeNode()
+    setLastIncomingOf(node, [box()])
+    appState.node = node
     const c = setup([box(), box({ x: 0 })])
     c.clearAll()
     await flush()
-    expect(c.modelValue.value).toHaveLength(0)
+    expect(modelBoxes(c)).toHaveLength(0)
+    expect(lastIncomingOf(node)).toEqual([])
   })
 })
 
@@ -226,7 +278,7 @@ describe('useBoundingBoxes inline editor', () => {
     c.inlineEditor.value!.value = 'a label'
     c.commitInlineEditor()
     await flush()
-    expect(c.modelValue.value[0].metadata.desc).toBe('a label')
+    expect(modelBoxes(c)[0].metadata.desc).toBe('a label')
     expect(c.inlineEditor.value).toBeNull()
   })
 
@@ -239,6 +291,168 @@ describe('useBoundingBoxes inline editor', () => {
   })
 })
 
+describe('useBoundingBoxes incoming bboxes input', () => {
+  it('adopts cached outputs on mount without overwriting existing edits', () => {
+    const node = makeConnectedNode()
+    appState.node = node
+    const incoming = [box({ x: 0, width: 100 })]
+    outputState.outputs = { input_bboxes: incoming }
+    const c = setup([box({ x: 200, width: 300 })])
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBe(300)
+    expect(lastIncomingOf(node)).toEqual(incoming)
+  })
+
+  it('does not re-apply an already applied output after a remount', async () => {
+    const node = makeConnectedNode()
+    const incoming = [box({ x: 0, width: 100 })]
+    setLastIncomingOf(node, incoming)
+    appState.node = node
+    outputState.outputs = { input_bboxes: incoming }
+    const c = setup([box({ x: 200, width: 300 })])
+    outputState.nodeOutputs!.value = { updated: true }
+    await flush()
+    expect(modelBoxes(c)[0].width).toBe(300)
+  })
+
+  it('ignores incoming output when the input is not connected', () => {
+    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
+    const c = setup([])
+    expect(modelBoxes(c)).toHaveLength(0)
+  })
+
+  it('repopulates from the next run after clearing the canvas', async () => {
+    appState.node = makeConnectedNode()
+    const c = setup([])
+
+    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
+    outputState.nodeOutputs!.value = { n: 1 }
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+
+    c.clearAll()
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(0)
+
+    outputState.nodeOutputs!.value = { n: 2 }
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBe(100)
+  })
+
+  it('does not apply output updates while the input is disconnected', async () => {
+    let connected = true
+    appState.node = {
+      ...makeConnectedNode(),
+      isInputConnected: () => connected
+    }
+    const c = setup([])
+
+    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
+    outputState.nodeOutputs!.value = { n: 1 }
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+
+    c.clearAll()
+    await flush()
+    connected = false
+    outputState.nodeOutputs!.value = { n: 2 }
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(0)
+  })
+
+  it('does not apply incoming boxes while the user is drawing', async () => {
+    appState.node = makeConnectedNode()
+    const c = setup([])
+    c.grid.value = false
+    c.onPointerDown(pe(10, 10))
+    c.onCanvasPointerMove(pe(50, 50))
+
+    outputState.outputs = {
+      input_bboxes: [box({ x: 0, width: 100, height: 100 })]
+    }
+    outputState.nodeOutputs!.value = { n: 1 }
+    await flush()
+
+    c.onDocPointerUp(pe(50, 50))
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBe(205)
+  })
+
+  it('applies incoming boxes when outputs stream in after mount', async () => {
+    const node = makeConnectedNode()
+    appState.node = node
+    const c = setup([])
+    expect(modelBoxes(c)).toHaveLength(0)
+
+    const incoming = [box({ x: 0, width: 100 })]
+    outputState.outputs = { input_bboxes: incoming }
+    outputState.nodeOutputs!.value = { updated: true }
+    await flush()
+
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBe(100)
+    expect(lastIncomingOf(node)).toEqual(incoming)
+  })
+
+  it('re-seeds the canvas over user edits when the upstream value changes', async () => {
+    const node = makeConnectedNode()
+    setLastIncomingOf(node, [box({ x: 0, width: 100 })])
+    appState.node = node
+    const c = setup([box({ x: 200, width: 300 })])
+
+    const changed = [box({ x: 64, width: 128 })]
+    outputState.outputs = { input_bboxes: changed }
+    outputState.nodeOutputs!.value = { n: 1 }
+    await flush()
+
+    expect(modelBoxes(c)[0].width).toBe(128)
+    expect(lastIncomingOf(node)).toEqual(changed)
+  })
+})
+
+describe('useBoundingBoxes grid snapping', () => {
+  it('snaps a drawn box to the grid when grid is enabled (default)', async () => {
+    const c = setup()
+    c.onPointerDown(pe(10, 10))
+    c.onCanvasPointerMove(pe(60, 60))
+    c.onDocPointerUp(pe(60, 60))
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].x).toBe(64)
+    expect(modelBoxes(c)[0].width).toBe(256)
+  })
+
+  it('does not snap when grid is disabled', async () => {
+    const c = setup()
+    c.grid.value = false
+    c.onPointerDown(pe(10, 10))
+    c.onCanvasPointerMove(pe(55, 55))
+    c.onDocPointerUp(pe(55, 55))
+    await flush()
+    expect(modelBoxes(c)[0].width).toBe(230)
+  })
+
+  it('keeps the anchored edge fixed when resizing a single edge', async () => {
+    const c = setup([box({ x: 51, y: 51, width: 256, height: 256 })])
+    c.onPointerDown(pe(60, 30))
+    c.onCanvasPointerMove(pe(80, 30))
+    c.onDocPointerUp(pe(80, 30))
+    await flush()
+    expect(modelBoxes(c)[0].x).toBe(51)
+  })
+
+  it('removes a box that a resize collapses to zero size', async () => {
+    const c = setup([box({ x: 64, y: 64, width: 128, height: 128 })])
+    c.onPointerDown(pe(37, 25))
+    c.onCanvasPointerMove(pe(14, 25))
+    c.onDocPointerUp(pe(14, 25))
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(0)
+  })
+})
+
 describe('useBoundingBoxes hover cursor', () => {
   it('switches to a pointer cursor over a tag', async () => {
     const c = setup([box({ x: 10, y: 10, width: 256, height: 256 })])
diff --git a/src/composables/boundingBoxes/useBoundingBoxes.ts b/src/composables/boundingBoxes/useBoundingBoxes.ts
index eb8c997a70..de46956261 100644
--- a/src/composables/boundingBoxes/useBoundingBoxes.ts
+++ b/src/composables/boundingBoxes/useBoundingBoxes.ts
@@ -1,4 +1,5 @@
 import { useElementSize } from '@vueuse/core'
+import { cloneDeep, isEqual } from 'es-toolkit'
 import { storeToRefs } from 'pinia'
 import type { Ref, ShallowRef } from 'vue'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
@@ -15,6 +16,7 @@ import type {
   Region
 } from '@/composables/boundingBoxes/boundingBoxesUtil'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import type { NodeOutputWith } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import type { BoundingBox } from '@/types/boundingBoxes'
@@ -25,6 +27,10 @@ const HANDLE_PX = 8
 const DIMENSION_STEP = 16
 const BG_DIM = 0.75
 const MAX_ELEMENT_COLORS = 5
+const GRID_PX = 32
+const MAX_GRID_CELLS = 64
+const DOT_ALPHA = 0.18
+const DOT_RADIUS = 1
 
 interface InlineEditorState {
   value: string
@@ -57,6 +63,7 @@ export function useBoundingBoxes(
   const hoverTagIndex = ref<number | null>(null)
   const bgImage = ref<HTMLImageElement | null>(null)
   const inlineEditor = ref<InlineEditorState | null>(null)
+  const grid = ref(true)
 
   const { width: containerWidth } = useElementSize(canvasContainer)
 
@@ -96,6 +103,89 @@ export function useBoundingBoxes(
     return Math.max(0, Math.min(1, n))
   }
 
+  function gridSpec() {
+    const axisFraction = (size: number) =>
+      Math.max(GRID_PX, Math.ceil(size / MAX_GRID_CELLS)) / size
+    return {
+      fx: axisFraction(widthValue.value),
+      fy: axisFraction(heightValue.value)
+    }
+  }
+
+  function snapFraction(value: number, step: number) {
+    return step > 0 ? clampToCanvas(Math.round(value / step) * step) : value
+  }
+
+  function snapRegion(region: Region, mode: HitMode): Region {
+    if (!grid.value) return region
+    const { fx, fy } = gridSpec()
+    if (mode === 'move') {
+      return {
+        ...region,
+        x: Math.min(snapFraction(region.x, fx), 1 - region.w),
+        y: Math.min(snapFraction(region.y, fy), 1 - region.h)
+      }
+    }
+    const snapLeft =
+      mode === 'draw' ||
+      mode === 'resize-l' ||
+      mode === 'resize-tl' ||
+      mode === 'resize-bl'
+    const snapRight =
+      mode === 'draw' ||
+      mode === 'resize-r' ||
+      mode === 'resize-tr' ||
+      mode === 'resize-br'
+    const snapTop =
+      mode === 'draw' ||
+      mode === 'resize-t' ||
+      mode === 'resize-tl' ||
+      mode === 'resize-tr'
+    const snapBottom =
+      mode === 'draw' ||
+      mode === 'resize-b' ||
+      mode === 'resize-bl' ||
+      mode === 'resize-br'
+    const x1 = snapLeft ? snapFraction(region.x, fx) : region.x
+    const y1 = snapTop ? snapFraction(region.y, fy) : region.y
+    const x2 = snapRight
+      ? snapFraction(region.x + region.w, fx)
+      : region.x + region.w
+    const y2 = snapBottom
+      ? snapFraction(region.y + region.h, fy)
+      : region.y + region.h
+    return {
+      ...region,
+      x: x1,
+      y: y1,
+      w: Math.max(0, x2 - x1),
+      h: Math.max(0, y2 - y1)
+    }
+  }
+
+  function drawDots(ctx: CanvasRenderingContext2D, W: number, H: number) {
+    const el = canvasEl.value
+    if (!el) return
+    const { fx, fy } = gridSpec()
+    if (fx <= 0 || fy <= 0) return
+    const cols = Math.round(1 / fx)
+    const rows = Math.round(1 / fy)
+    ctx.save()
+    ctx.globalAlpha = DOT_ALPHA
+    ctx.fillStyle = getComputedStyle(el).color
+    ctx.beginPath()
+    for (let i = 0; i <= cols; i++) {
+      const cx = Math.min(1, i * fx) * W
+      for (let j = 0; j <= rows; j++) {
+        const cy = Math.min(1, j * fy) * H
+        ctx.moveTo(cx + DOT_RADIUS, cy)
+        ctx.arc(cx, cy, DOT_RADIUS, 0, Math.PI * 2)
+      }
+    }
+    ctx.fill()
+    ctx.restore()
+  }
+
   function logicalSize() {
     const el = canvasEl.value
     return { w: el?.clientWidth || 1, h: el?.clientHeight || 1 }
@@ -146,6 +236,8 @@ export function useBoundingBoxes(
       ctx.fillRect(0, 0, W, H)
     }
 
+    if (grid.value) drawDots(ctx, W, H)
+
     const showActive = focused.value || isNodeSelected.value
     const aIdx = showActive ? activeIndex.value : -1
     const order = state.value.regions
@@ -366,7 +458,7 @@ export function useBoundingBoxes(
     const dx = mN.x - dragStartNorm.value.x
     const dy = mN.y - dragStartNorm.value.y
     const nb = applyDrag(dragMode.value, boxAtStart.value, dx, dy)
-    state.value.regions[activeIndex.value] = nb
+    state.value.regions[activeIndex.value] = snapRegion(nb, dragMode.value)
     requestDraw()
   }
 
@@ -375,7 +467,7 @@ export function useBoundingBoxes(
     drawing.value = false
     canvasEl.value?.releasePointerCapture?.(e.pointerId)
     const b = state.value.regions[activeIndex.value]
-    if (b && (b.w < 0.005 || b.h < 0.005) && dragMode.value === 'draw') {
+    if (b && (b.w < 0.005 || b.h < 0.005)) {
       removeRegion(activeIndex.value)
     }
     syncState()
@@ -510,6 +602,7 @@ export function useBoundingBoxes(
   function clearAll() {
     state.value.regions = []
     activeIndex.value = -1
+    setLastIncoming([])
     syncState()
   }
 
@@ -530,6 +623,23 @@ export function useBoundingBoxes(
   watch(isNodeSelected, () => requestDraw())
   watch([widthValue, heightValue], () => syncState())
 
+  watch(
+    litegraphNode,
+    (node) => {
+      const props = node?.properties as { bboxGrid?: unknown } | undefined
+      if (props && typeof props.bboxGrid === 'boolean')
+        grid.value = props.bboxGrid
+    },
+    { immediate: true }
+  )
+  watch(grid, (enabled) => {
+    const props = litegraphNode.value?.properties as
+      | Record<string, unknown>
+      | undefined
+    if (props) props.bboxGrid = enabled
+    requestDraw()
+  })
+
   const nodeOutputStore = useNodeOutputStore()
   function applyImageDimensions(naturalWidth: number, naturalHeight: number) {
     const node = litegraphNode.value
@@ -580,10 +690,63 @@ export function useBoundingBoxes(
     }
     img.src = url
   }
-  watch(() => nodeOutputStore.nodeOutputs, updateBgImage, { deep: true })
+  function lastIncomingWidget() {
+    return litegraphNode.value?.widgets?.find((w) => w.name === 'last_incoming')
+  }
+
+  function lastIncomingValue(): BoundingBox[] {
+    const value = lastIncomingWidget()?.value
+    return Array.isArray(value) ? (value as BoundingBox[]) : []
+  }
+
+  function setLastIncoming(boxes: BoundingBox[]) {
+    const widget = lastIncomingWidget()
+    if (!widget) return
+    const next = cloneDeep(boxes)
+    widget.value = next
+    widget.callback?.(next)
+  }
+
+  function applyIncomingBoxes(apply = true) {
+    if (drawing.value) return
+    const node = litegraphNode.value
+    if (!node) return
+    const slot = node.findInputSlot('bboxes')
+    if (slot < 0 || !node.isInputConnected(slot)) return
+    const outputs = nodeOutputStore.getNodeOutputs(node) as
+      | NodeOutputWith<{ input_bboxes?: BoundingBox[] }>
+      | undefined
+    const incoming = outputs?.input_bboxes
+    if (!incoming?.length) return
+    const applied = lastIncomingValue()
+    if (isEqual(incoming, applied)) return
+    if (!apply) {
+      if (!applied.length && state.value.regions.length)
+        setLastIncoming(incoming)
+      return
+    }
+    state.value.regions = fromBoundingBoxes(
+      incoming,
+      widthValue.value,
+      heightValue.value
+    )
+    activeIndex.value = state.value.regions.length ? 0 : -1
+    setLastIncoming(incoming)
+    syncState()
+  }
+
+  watch(
+    () => nodeOutputStore.nodeOutputs,
+    () => {
+      updateBgImage()
+      applyIncomingBoxes()
+    },
+    { deep: true }
+  )
   watch(() => nodeOutputStore.nodePreviewImages, updateBgImage, { deep: true })
 
   updateBgImage()
+  applyIncomingBoxes(false)
   void nextTick(() => requestDraw())
 
   onBeforeUnmount(() => {
@@ -608,6 +771,7 @@ export function useBoundingBoxes(
     commitInlineEditor,
     setActiveType,
     clearAll,
-    syncState
+    syncState,
+    grid
   }
 }
diff --git a/src/composables/palette/usePaletteSwatchRow.test.ts b/src/composables/palette/usePaletteSwatchRow.test.ts
index ed84fb1541..54742f43b2 100644
--- a/src/composables/palette/usePaletteSwatchRow.test.ts
+++ b/src/composables/palette/usePaletteSwatchRow.test.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 import type { EffectScope } from 'vue'
 import { effectScope, ref, shallowRef } from 'vue'
 
@@ -13,17 +13,12 @@ afterEach(() => {
 function setup(initial: string[]) {
   const modelValue = ref(initial)
   const container = shallowRef(document.createElement('div'))
-  const picker = shallowRef(document.createElement('input'))
   const scope = effectScope()
   scopes.push(scope)
-  const api = scope.run(() =>
-    usePaletteSwatchRow({ modelValue, container, picker })
-  )!
-  return { modelValue, container, picker, ...api }
+  const api = scope.run(() => usePaletteSwatchRow({ modelValue, container }))!
+  return { modelValue, container, ...api }
 }
 
-const mouseEvent = () => ({ stopPropagation: vi.fn() }) as unknown as MouseEvent
-
 describe('usePaletteSwatchRow', () => {
   it('appends a default color', () => {
     const { modelValue, addColor } = setup(['#000000'])
@@ -37,31 +32,17 @@ describe('usePaletteSwatchRow', () => {
     expect(modelValue.value).toEqual(['#a', '#c'])
   })
 
-  it('seeds the picker input with the clicked color before opening it', () => {
-    const { picker, openPicker } = setup(['#112233'])
-    const click = vi.spyOn(picker.value!, 'click')
-    openPicker(0, mouseEvent())
-    expect(picker.value!.value).toBe('#112233')
-    expect(click).toHaveBeenCalled()
-  })
-
-  it('falls back to white when the slot is empty', () => {
-    const { picker, openPicker } = setup([''])
-    openPicker(0, mouseEvent())
-    expect(picker.value!.value).toBe('#ffffff')
-  })
-
-  it('writes the picked color back to the open slot', () => {
-    const { modelValue, openPicker, onPickerInput } = setup(['#a', '#b'])
-    openPicker(1, mouseEvent())
-    onPickerInput({ target: { value: '#123456' } } as unknown as Event)
+  it('updates the color at an index', () => {
+    const { modelValue, updateAt } = setup(['#a', '#b'])
+    updateAt(1, '#123456')
     expect(modelValue.value).toEqual(['#a', '#123456'])
   })
 
-  it('ignores picker input when no slot is open', () => {
-    const { modelValue, onPickerInput } = setup(['#a'])
-    onPickerInput({ target: { value: '#123456' } } as unknown as Event)
-    expect(modelValue.value).toEqual(['#a'])
+  it('ignores an update that does not change the color', () => {
+    const { modelValue, updateAt } = setup(['#a'])
+    const before = modelValue.value
+    updateAt(0, '#a')
+    expect(modelValue.value).toBe(before)
   })
 
   it('reorders via drag when the pointer crosses another swatch', () => {
diff --git a/src/composables/palette/usePaletteSwatchRow.ts b/src/composables/palette/usePaletteSwatchRow.ts
index a9876faba9..45bcfcff9e 100644
--- a/src/composables/palette/usePaletteSwatchRow.ts
+++ b/src/composables/palette/usePaletteSwatchRow.ts
@@ -5,30 +5,16 @@ import { ref } from 'vue'
 interface UsePaletteSwatchRowOptions {
   modelValue: Ref<string[]>
   container: Readonly<ShallowRef<HTMLDivElement | null>>
-  picker: Readonly<ShallowRef<HTMLInputElement | null>>
 }
 
 export function usePaletteSwatchRow({
   modelValue,
-  container,
-  picker
+  container
 }: UsePaletteSwatchRowOptions) {
-  const pickerIndex = ref<number | null>(null)
-
-  function openPicker(i: number, e: MouseEvent) {
-    e.stopPropagation()
-    pickerIndex.value = i
-    const el = picker.value
-    if (!el) return
-    el.value = modelValue.value[i] || '#ffffff'
-    el.click()
-  }
-
-  function onPickerInput(e: Event) {
-    const v = (e.target as HTMLInputElement).value
-    if (pickerIndex.value === null) return
+  function updateAt(i: number, value: string) {
+    if (modelValue.value[i] === value) return
     const next = modelValue.value.slice()
-    next[pickerIndex.value] = v
+    next[i] = value
     modelValue.value = next
   }
 
@@ -105,8 +91,7 @@ export function usePaletteSwatchRow({
   })
 
   return {
-    openPicker,
-    onPickerInput,
+    updateAt,
     remove,
     addColor,
     onPointerDown
diff --git a/src/composables/templateSearchConfig.test.ts b/src/composables/templateSearchConfig.test.ts
new file mode 100644
index 0000000000..e603efa427
--- /dev/null
+++ b/src/composables/templateSearchConfig.test.ts
@@ -0,0 +1,316 @@
+import { describe, expect, it } from 'vitest'
+
+import type { SearchResult } from 'minisearch'
+
+import {
+  createTemplateSearchIndex,
+  expandAbbreviation,
+  expandQuery,
+  rankByRelevanceThenUsage,
+  searchTemplates,
+  termFuzziness,
+  tokenize
+} from '@/composables/templateSearchConfig'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+
+const buildTemplate = (
+  overrides: Partial<TemplateInfo> & { name: string }
+): TemplateInfo => ({
+  description: '',
+  mediaType: 'image',
+  mediaSubtype: 'png',
+  ...overrides
+})
+
+describe('tokenize', () => {
+  it('splits identifiers on hyphen and underscore', () => {
+    expect(tokenize('video_ltx2_3_t2v')).toEqual([
+      'video_ltx2_3_t2v',
+      'video',
+      'ltx2',
+      '3',
+      't2v'
+    ])
+  })
+
+  it('splits a trailing version off its name so "wan 2.7" matches "wan2.7"', () => {
+    expect(tokenize('wan2.7')).toEqual(['wan2.7', 'wan', '2.7'])
+  })
+
+  it('keeps a mid-digit abbreviation whole', () => {
+    expect(tokenize('t2v')).toEqual(['t2v'])
+  })
+
+  it('emits a unigram and bigram for each char of an unspaced CJK run', () => {
+    expect(tokenize('图像放大')).toEqual([
+      '图',
+      '像',
+      '放',
+      '大',
+      '图像',
+      '像放',
+      '放大'
+    ])
+  })
+
+  it('grams katakana including the prolonged-sound mark', () => {
+    expect(tokenize('データ')).toEqual(['デ', 'ー', 'タ', 'デー', 'ータ'])
+  })
+
+  it('treats Korean as a spaced script, not an unspaced CJK run', () => {
+    expect(tokenize('업스케일')).toEqual(['업스케일'])
+  })
+
+  it('grams the CJK part of a word glued to latin, keeping the whole word', () => {
+    expect(tokenize('flux图像')).toEqual(['图', '像', '图像', 'flux图像'])
+  })
+
+  it('lowercases and drops empty tokens', () => {
+    expect(tokenize('  Flux   Kontext ')).toEqual(['flux', 'kontext'])
+  })
+})
+
+describe('termFuzziness', () => {
+  it('is exact for short terms (≤3 chars)', () => {
+    expect(termFuzziness('t2v')).toBe(false)
+    expect(termFuzziness('cn')).toBe(false)
+  })
+
+  it('is exact for any term containing a digit so versions do not blur', () => {
+    expect(termFuzziness('2.5')).toBe(false)
+    expect(termFuzziness('flux2')).toBe(false)
+  })
+
+  it('allows edits for longer alphabetic terms', () => {
+    expect(termFuzziness('control')).not.toBe(false)
+  })
+})
+
+describe('expandAbbreviation', () => {
+  it('expands cross-modality shorthand', () => {
+    expect(expandAbbreviation('t2i')).toBe('text image')
+    expect(expandAbbreviation('i2v')).toBe('image video')
+    expect(expandAbbreviation('txt2img')).toBe('text image')
+  })
+
+  it('expands same-modality transforms to editing', () => {
+    expect(expandAbbreviation('img2img')).toBe('image edit')
+    expect(expandAbbreviation('v2v')).toBe('video edit')
+  })
+
+  it('expands known acronyms', () => {
+    expect(expandAbbreviation('cn')).toBe('controlnet')
+  })
+
+  it('returns null for unknown tokens and unknown modalities', () => {
+    expect(expandAbbreviation('flux')).toBeNull()
+    expect(expandAbbreviation('x2y')).toBeNull()
+  })
+})
+
+describe('expandQuery', () => {
+  it('expands shorthand tokens within a multi-word query', () => {
+    expect(expandQuery('wan i2v')).toBe('wan image video')
+  })
+
+  it('returns null when nothing expands', () => {
+    expect(expandQuery('flux upscale')).toBeNull()
+  })
+})
+
+describe('searchTemplates', () => {
+  const buildIndex = (templates: TemplateInfo[]) =>
+    createTemplateSearchIndex(templates)
+
+  it('returns an empty array for a blank query without touching the index', () => {
+    const index = buildIndex([buildTemplate({ name: 'a', title: 'Alpha' })])
+    expect(searchTemplates(index, '   ')).toEqual([])
+  })
+
+  it('matches a prefix ("vid" → "video")', () => {
+    const index = buildIndex([
+      buildTemplate({ name: 'video', title: 'Video Generator' }),
+      buildTemplate({ name: 'audio', title: 'Audio Studio' })
+    ])
+    expect(searchTemplates(index, 'vid')).toContain('video')
+    expect(searchTemplates(index, 'vid')).not.toContain('audio')
+  })
+
+  it('tolerates a typo in a longer term ("contorlnet")', () => {
+    const index = buildIndex([
+      buildTemplate({
+        name: 'cn',
+        title: 'Union ControlNet',
+        tags: ['ControlNet']
+      })
+    ])
+    expect(searchTemplates(index, 'contorlnet')).toContain('cn')
+  })
+
+  it('does not fuzzy-match a long word onto its shorter substring', () => {
+    const index = buildIndex([
+      buildTemplate({ name: 'real', title: 'SeedVR2 Image Upscale' }),
+      buildTemplate({
+        name: 'junk',
+        title: 'Anime Text to Image',
+        description: 'configure CFG scale and steps'
+      })
+    ])
+    expect(searchTemplates(index, 'upscale')).toContain('real')
+    expect(searchTemplates(index, 'upscale')).not.toContain('junk')
+  })
+
+  it('matches a CJK term inside an unspaced CJK title', () => {
+    const index = buildIndex([
+      buildTemplate({ name: 'zh_upscale', title: '图像放大' }), // "image upscale"
+      buildTemplate({ name: 'zh_video', title: '视频补帧' }) // "video interpolation"
+    ])
+    // 放大 = "upscale"
+    expect(searchTemplates(index, '放大')).toContain('zh_upscale')
+    expect(searchTemplates(index, '放大')).not.toContain('zh_video')
+  })
+
+  it('matches a single CJK character that ends an unspaced run', () => {
+    const index = buildIndex([buildTemplate({ name: 'zh', title: '图像放大' })])
+    // 大 is only the trailing half of the last bigram; the unigram reaches it.
+    expect(searchTemplates(index, '大')).toContain('zh')
+  })
+
+  it('requires all words to match (AND) before falling back to OR', () => {
+    const index = buildIndex([
+      buildTemplate({
+        name: 'both',
+        title: 'Flux Upscale',
+        models: ['Flux'],
+        tags: ['Upscale']
+      }),
+      buildTemplate({ name: 'flux_only', title: 'Flux Text to Image' })
+    ])
+    expect(searchTemplates(index, 'flux upscale')[0]).toBe('both')
+  })
+
+  it('breaks a near-tie by higher usage', () => {
+    const index = buildIndex([
+      buildTemplate({ name: 'low', title: 'Alpha Upscale', usage: 1 }),
+      buildTemplate({ name: 'high', title: 'Beta Upscale', usage: 5000 })
+    ])
+    expect(searchTemplates(index, 'upscale')[0]).toBe('high')
+  })
+
+  it('does not let usage override a clearly stronger text match', () => {
+    const index = buildIndex([
+      buildTemplate({ name: 'exact', title: 'Outpaint', usage: 1 }),
+      buildTemplate({
+        name: 'weak',
+        title: 'Portrait',
+        description: 'has an outpaint option somewhere',
+        usage: 9000
+      })
+    ])
+    expect(searchTemplates(index, 'outpaint')[0]).toBe('exact')
+  })
+
+  it('deduplicates literal and expansion matches, keeping the literal first', () => {
+    const index = buildIndex([
+      buildTemplate({ name: 'literal', title: 'Wan T2V', tags: ['T2V'] }),
+      buildTemplate({ name: 'expanded', title: 'Text to Video Studio' })
+    ])
+    const results = searchTemplates(index, 't2v')
+    expect(results[0]).toBe('literal')
+    expect(new Set(results).size).toBe(results.length)
+  })
+
+  it('indexes localized title/description over raw english', () => {
+    const index = buildIndex([
+      buildTemplate({
+        name: 'localized',
+        title: 'raw',
+        localizedTitle: 'aquarela',
+        description: 'raw',
+        localizedDescription: 'pintura'
+      })
+    ])
+    expect(searchTemplates(index, 'aquarela')).toEqual(['localized'])
+    expect(searchTemplates(index, 'pintura')).toEqual(['localized'])
+  })
+
+  it('falls back to the name when a template has no title or description', () => {
+    const index = buildIndex([buildTemplate({ name: 'flux_kontext_edit' })])
+    expect(searchTemplates(index, 'kontext')).toEqual(['flux_kontext_edit'])
+  })
+
+  it('ranks an editing template above text-to-image for "img2img"', () => {
+    const index = buildIndex([
+      buildTemplate({
+        name: 'text_to_image',
+        title: 'Qwen Text to Image',
+        tags: ['Text to Image']
+      }),
+      buildTemplate({
+        name: 'image_edit',
+        title: 'Qwen Image Edit',
+        tags: ['Image Edit']
+      })
+    ])
+    expect(searchTemplates(index, 'img2img')[0]).toBe('image_edit')
+  })
+
+  it('ranks a title match above a tag match above a description-only match', () => {
+    const index = buildIndex([
+      buildTemplate({
+        name: 'in_description',
+        title: 'Something Else',
+        description: 'mentions upscale in passing'
+      }),
+      buildTemplate({ name: 'in_tag', title: 'Something', tags: ['Upscale'] }),
+      buildTemplate({ name: 'in_title', title: 'Upscale Studio' })
+    ])
+    expect(searchTemplates(index, 'upscale')).toEqual([
+      'in_title',
+      'in_tag',
+      'in_description'
+    ])
+  })
+
+  it('ranks an exact title above a title with extra words', () => {
+    const index = buildIndex([
+      buildTemplate({ name: 'with_extra', title: 'ControlNet Guidance' }),
+      buildTemplate({ name: 'exact', title: 'ControlNet' })
+    ])
+    expect(searchTemplates(index, 'controlnet')[0]).toBe('exact')
+  })
+})
+
+describe('rankByRelevanceThenUsage', () => {
+  const hit = (id: string, score: number, usage: number): SearchResult =>
+    ({ id, score, usage }) as unknown as SearchResult
+
+  // Scores 0.93/0.965/1.0 with usages 100/50/1 form an intransitive cycle under
+  // a pairwise relative-band compare (A>B, B>C, but A<C), which makes Array.sort
+  // input-order-dependent. Bucketing must give one stable order for any input.
+  it('produces a stable order for an intransitive cluster', () => {
+    const a = hit('a', 0.93, 100)
+    const b = hit('b', 0.965, 50)
+    const c = hit('c', 1.0, 1)
+
+    const order = (hits: SearchResult[]) =>
+      rankByRelevanceThenUsage(hits).map((h) => h.id)
+
+    const expected = order([a, b, c])
+    expect(order([c, b, a])).toEqual(expected)
+    expect(order([b, a, c])).toEqual(expected)
+    expect(order([c, a, b])).toEqual(expected)
+  })
+
+  it('breaks ties within a band by usage but not across bands', () => {
+    const strong = hit('strong', 1.0, 1)
+    const nearStrong = hit('near', 0.98, 500)
+    const weak = hit('weak', 0.5, 9000)
+
+    const ids = rankByRelevanceThenUsage([weak, strong, nearStrong]).map(
+      (h) => h.id
+    )
+    // near (higher usage, same band as strong) leads; weak stays last on score.
+    expect(ids).toEqual(['near', 'strong', 'weak'])
+  })
+})
diff --git a/src/composables/templateSearchConfig.ts b/src/composables/templateSearchConfig.ts
new file mode 100644
index 0000000000..c7c7124377
--- /dev/null
+++ b/src/composables/templateSearchConfig.ts
@@ -0,0 +1,204 @@
+import MiniSearch from 'minisearch'
+import type { SearchResult } from 'minisearch'
+
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+
+// MiniSearch serializes the index but not the search options, so the tokenizer
+// and field list live here and are used at both index and query time.
+
+const SEARCH_FIELDS = [
+  'title',
+  'description',
+  'tags',
+  'models',
+  'name'
+] as const
+
+// Usage only reorders hits within this fraction of the top score, so popularity
+// never overrides a clearly-better text match. 5% tuned empirically.
+const USAGE_TIEBREAK_BAND = 0.05
+
+// Script-matched so spaced neighbors like Korean fall to the word tokenizer.
+const CJK = /[\p{scx=Han}\p{scx=Hiragana}\p{scx=Katakana}]/u
+const CJK_RUN = new RegExp(`${CJK.source}+`, 'gu')
+
+// Unigrams + bigrams so any substring of an unspaced run lands on a token.
+function cjkGrams(word: string): string[] {
+  const grams: string[] = []
+  for (const run of word.match(CJK_RUN) ?? []) {
+    const characters = run.split('')
+    grams.push(...characters)
+    for (let i = 1; i < characters.length; i++) {
+      grams.push(characters[i - 1] + characters[i])
+    }
+  }
+  return grams
+}
+
+/**
+ * Emits sub-parts so a term matches however it's typed: `-`/`_` splits, a
+ * trailing version (`wan2.7` → `wan`, `2.7`), and CJK character grams.
+ */
+export function tokenize(text: string): string[] {
+  const tokens = new Set<string>()
+  for (const word of text.toLowerCase().split(/\s+/).filter(Boolean)) {
+    for (const gram of cjkGrams(word)) tokens.add(gram)
+    // A pure-CJK run has no whole-word token — its grams already cover it.
+    if (CJK.test(word) && !/[a-z0-9]/.test(word)) continue
+    tokens.add(word)
+    for (const part of word.split(/[-_]/)) {
+      if (part) tokens.add(part)
+    }
+    const version = word.match(/^([a-z][a-z.]*?)(\d+(?:\.\d+)*)$/)
+    if (version) {
+      tokens.add(version[1].replace(/\.$/, ''))
+      tokens.add(version[2])
+    }
+  }
+  return [...tokens]
+}
+
+// Exact for ≤3-char and digit-bearing terms; otherwise 20% of length, so a typo
+// is forgiven but `upscale` can't fuzzy-match the shorter `scale`.
+export function termFuzziness(term: string): number | false {
+  return term.length <= 3 || /\d/.test(term) ? false : 0.2
+}
+
+function searchOptions(combineWith: 'AND' | 'OR' = 'AND') {
+  // Description demoted below default so an incidental prose mention never
+  // outranks a real title/model match.
+  return {
+    boost: { title: 3, models: 2, tags: 2, description: 0.5 },
+    prefix: true,
+    fuzzy: termFuzziness,
+    combineWith,
+    tokenize
+  }
+}
+
+// `{X}2{Y}` shorthand expanded by structure (t2i, txt2img, …) rather than one
+// entry per spelling.
+const MODALITY_STEMS: Record<string, string> = {
+  t: 'text',
+  txt: 'text',
+  text: 'text',
+  i: 'image',
+  img: 'image',
+  image: 'image',
+  v: 'video',
+  vid: 'video',
+  video: 'video',
+  a: 'audio',
+  s: 'audio',
+  m: 'music'
+}
+
+const SAME_MODALITY_EDIT: Record<string, string> = {
+  image: 'image edit',
+  video: 'video edit',
+  audio: 'audio edit'
+}
+
+const ACRONYMS: Record<string, string> = {
+  cn: 'controlnet'
+}
+
+export function expandAbbreviation(token: string): string | null {
+  const lower = token.trim().toLowerCase()
+  if (ACRONYMS[lower]) return ACRONYMS[lower]
+
+  const match = lower.match(/^([a-z]+)2([a-z]+)$/)
+  if (!match) return null
+  const left = MODALITY_STEMS[match[1]]
+  const right = MODALITY_STEMS[match[2]]
+  if (!left || !right) return null
+  if (left === right) return SAME_MODALITY_EDIT[left] ?? left
+  return `${left} ${right}`
+}
+
+/** Expands shorthand tokens (`wan i2v` → `wan image video`); null if none expand. */
+export function expandQuery(query: string): string | null {
+  let changed = false
+  const out = query
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((token) => {
+      const expansion = expandAbbreviation(token.toLowerCase())
+      if (expansion) changed = true
+      return expansion ?? token
+    })
+    .join(' ')
+  return changed ? out : null
+}
+
+export function createTemplateSearchIndex(
+  templates: TemplateInfo[]
+): MiniSearch<TemplateInfo> {
+  const index = new MiniSearch<TemplateInfo>({
+    idField: 'name',
+    fields: [...SEARCH_FIELDS],
+    // Returned on each hit so the tiebreak can read usage without a second lookup.
+    storeFields: ['usage'],
+    // Index the localized strings the card actually shows, so a match explains
+    // a visible result.
+    extractField: (template, field) => {
+      if (field === 'title') return template.localizedTitle ?? template.title
+      if (field === 'description') {
+        return template.localizedDescription ?? template.description ?? ''
+      }
+      const value = template[field as keyof TemplateInfo]
+      return Array.isArray(value) ? value.join(' ') : ((value as string) ?? '')
+    },
+    tokenize,
+    searchOptions: searchOptions('AND')
+  })
+  index.addAll(templates)
+  return index
+}
+
+// Rank by relevance, with usage breaking ties inside a score band. Scores are
+// bucketed so the ordering is a stable total order (a pairwise relative-band
+// compare is intransitive). log1p dampens heavy-tailed usage.
+export function rankByRelevanceThenUsage(hits: SearchResult[]): SearchResult[] {
+  const bandSize =
+    hits.reduce((max, hit) => Math.max(max, hit.score), 0) * USAGE_TIEBREAK_BAND
+  const bucket = (score: number) =>
+    bandSize > 0 ? Math.round(score / bandSize) : 0
+  return [...hits].sort((a, b) => {
+    if (bucket(a.score) !== bucket(b.score)) return b.score - a.score
+    return Math.log1p(Number(b.usage ?? 0)) - Math.log1p(Number(a.usage ?? 0))
+  })
+}
+
+/** Ordered template names for a query: literal matches first, then dedup'd expansion matches. */
+export function searchTemplates(
+  index: MiniSearch<TemplateInfo>,
+  query: string
+): string[] {
+  const trimmed = query.trim()
+  if (!trimmed) return []
+
+  const andThenOr = (q: string): SearchResult[] => {
+    const and = index.search(q, searchOptions('AND'))
+    const hits = and.length > 0 ? and : index.search(q, searchOptions('OR'))
+    return rankByRelevanceThenUsage(hits)
+  }
+
+  const ordered: string[] = []
+  const seen = new Set<string>()
+  const collect = (hits: SearchResult[]) => {
+    for (const hit of hits) {
+      const id = String(hit.id)
+      if (!seen.has(id)) {
+        seen.add(id)
+        ordered.push(id)
+      }
+    }
+  }
+
+  collect(andThenOr(trimmed))
+  const expanded = expandQuery(trimmed)
+  if (expanded) collect(andThenOr(expanded))
+
+  return ordered
+}
diff --git a/src/composables/useLoad3d.test.ts b/src/composables/useLoad3d.test.ts
index 30c550b500..bdc7f33659 100644
--- a/src/composables/useLoad3d.test.ts
+++ b/src/composables/useLoad3d.test.ts
@@ -77,6 +77,14 @@ vi.mock('pinia', async (importOriginal) => {
   }
 })
 
+const { settingGetMock } = vi.hoisted(() => ({
+  settingGetMock: vi.fn()
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({ get: settingGetMock })
+}))
+
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn()
 }))
@@ -95,6 +103,9 @@ describe('useLoad3d', () => {
     vi.clearAllMocks()
     nodeToLoad3dMap.clear()
     vi.mocked(getActivePinia).mockReturnValue(null as unknown as Pinia)
+    settingGetMock.mockImplementation((key: string) =>
+      key === 'Comfy.Load3D.BackgroundColor' ? '282828' : undefined
+    )
 
     mockNode = createMockLGraphNode({
       properties: {
@@ -203,9 +214,7 @@ describe('useLoad3d', () => {
       getModelInfo: vi.fn().mockReturnValue(null),
       captureThumbnail: vi.fn().mockResolvedValue('data:image/png;base64,test'),
       setAnimationTime: vi.fn(),
-      renderer: {
-        domElement: mockCanvas
-      } as Partial<Load3d['renderer']> as Load3d['renderer']
+      domElement: mockCanvas
     }
 
     vi.mocked(Load3d).mockImplementation(function (this: Load3d) {
@@ -292,7 +301,7 @@ describe('useLoad3d', () => {
       mockNode.flags.collapsed = true
       mockNode.onDrawBackground?.({} as CanvasRenderingContext2D)
 
-      expect(mockLoad3d.renderer!.domElement.hidden).toBe(true)
+      expect(mockLoad3d.domElement!.hidden).toBe(true)
     })
 
     it('should initialize without loading model (model loading is handled by Load3DConfiguration)', async () => {
@@ -356,6 +365,20 @@ describe('useLoad3d', () => {
       expect(composable.isPreview.value).toBe(true)
     })
 
+    it('should set preview mode for save-viewer nodes despite width/height widgets', async () => {
+      Object.defineProperty(mockNode, 'constructor', {
+        value: { comfyClass: 'Save3DAdvanced' },
+        configurable: true
+      })
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(composable.isPreview.value).toBe(true)
+    })
+
     it('should handle initialization errors', async () => {
       vi.mocked(createLoad3d).mockImplementationOnce(() => {
         throw new Error('Load3d creation failed')
@@ -383,7 +406,37 @@ describe('useLoad3d', () => {
       const nodeRef = shallowRef<LGraphNode | null>(mockNode)
       const composable = useLoad3d(nodeRef)
 
-      expect(composable.sceneConfig.value.backgroundColor).toBe('#000000')
+      expect(composable.sceneConfig.value.backgroundColor).toBe('#282828')
+    })
+
+    it('defaults background color from the Comfy.Load3D.BackgroundColor setting', () => {
+      vi.mocked(getActivePinia).mockReturnValue({} as unknown as Pinia)
+      vi.mocked(useCanvasStore).mockReturnValue(
+        reactive({ appScalePercentage: 100 }) as unknown as ReturnType<
+          typeof useCanvasStore
+        >
+      )
+      settingGetMock.mockImplementation((key: string) =>
+        key === 'Comfy.Load3D.BackgroundColor' ? '123456' : undefined
+      )
+
+      const composable = useLoad3d(mockNode)
+
+      expect(composable.sceneConfig.value.backgroundColor).toBe('#123456')
+    })
+
+    it('attaches event listeners before running queued ready callbacks', async () => {
+      const composable = useLoad3d(mockNode)
+      let listenersAttachedWhenCallbackRan = false
+
+      composable.waitForLoad3d(() => {
+        listenersAttachedWhenCallbackRan =
+          vi.mocked(mockLoad3d.addEventListener!).mock.calls.length > 0
+      })
+
+      await composable.initializeLoad3d(document.createElement('div'))
+
+      expect(listenersAttachedWhenCallbackRan).toBe(true)
     })
 
     it('passes getZoomScale callback to createLoad3d', async () => {
diff --git a/src/composables/useLoad3d.ts b/src/composables/useLoad3d.ts
index 7dff603576..beb15264b4 100644
--- a/src/composables/useLoad3d.ts
+++ b/src/composables/useLoad3d.ts
@@ -8,6 +8,7 @@ import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { createLoad3d } from '@/extensions/core/load3d/createLoad3d'
+import { isLoad3dResultViewerNode } from '@/extensions/core/load3d/nodeTypes'
 import {
   isAssetPreviewSupported,
   persistThumbnail
@@ -118,7 +119,9 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
 
   const sceneConfig = ref<SceneConfig>({
     showGrid: true,
-    backgroundColor: '#000000',
+    backgroundColor: getActivePinia()
+      ? '#' + useSettingStore().get('Comfy.Load3D.BackgroundColor')
+      : '#282828',
     backgroundImage: '',
     backgroundRenderMode: 'tiled'
   })
@@ -177,6 +180,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
   const canExport = ref(true)
   const materialModes = ref<readonly MaterialMode[]>([
     'original',
+    'clay',
     'normal',
     'wireframe'
   ])
@@ -192,6 +196,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
       const heightWidget = node.widgets?.find((w) => w.name === 'height')
 
       if (
+        isLoad3dResultViewerNode(node.constructor.comfyClass ?? '') ||
         node.constructor.comfyClass?.startsWith('Preview') ||
         !(widthWidget && heightWidget)
       ) {
@@ -239,7 +244,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
         node.onDrawBackground,
         function (this: LGraphNode) {
           if (load3d) {
-            load3d.renderer.domElement.hidden = this.flags.collapsed ?? false
+            load3d.domElement.hidden = this.flags.collapsed ?? false
           }
         }
       )
@@ -248,6 +253,8 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
 
       nodeToLoad3dMap.set(node, load3d)
 
+      handleEvents('add')
+
       const callbacks = pendingCallbacks.get(node)
 
       if (callbacks && load3d) {
@@ -263,8 +270,6 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
           if (load3d) invokeReadyCallback(callback, load3d)
         })
       }
-
-      handleEvents('add')
     } catch (error) {
       console.error('Error initializing Load3d:', error)
       useToastStore().addAlert(
diff --git a/src/composables/useLoad3dViewer.ts b/src/composables/useLoad3dViewer.ts
index c9c7772624..1920edb37d 100644
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -4,7 +4,7 @@ import QuickLRU from '@alloc/quick-lru'
 import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { createLoad3d } from '@/extensions/core/load3d/createLoad3d'
-import { isLoad3dPreviewNode } from '@/extensions/core/load3d/nodeTypes'
+import { isLoad3dResultViewerNode } from '@/extensions/core/load3d/nodeTypes'
 import type {
   AnimationItem,
   BackgroundRenderModeType,
@@ -371,7 +371,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
         | LightConfig
         | undefined
 
-      isPreview.value = isLoad3dPreviewNode(node.type ?? '')
+      isPreview.value = isLoad3dResultViewerNode(node.type ?? '')
 
       if (sceneConfig) {
         backgroundColor.value =
diff --git a/src/composables/useTemplateFiltering.test.ts b/src/composables/useTemplateFiltering.test.ts
index 6cf2a9e59d..9ee48d0dc1 100644
--- a/src/composables/useTemplateFiltering.test.ts
+++ b/src/composables/useTemplateFiltering.test.ts
@@ -1,7 +1,6 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
-import type { IFuseOptions } from 'fuse.js'
 
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
@@ -24,11 +23,11 @@ const defaultSettingStore = {
 }
 
 const defaultRankingStore = {
-  computeDefaultScore: vi.fn(() => 0),
-  computePopularScore: vi.fn(() => 0),
-  getUsageScore: vi.fn(() => 0),
+  computeDefaultScore: vi.fn(
+    (_date?: string, _rank?: number, usage: number = 0) => usage
+  ),
   computeFreshness: vi.fn(() => 0.5),
-  isLoaded: { value: false }
+  largestUsageScore: 0
 }
 
 const mockSystemStatsStore = {
@@ -51,9 +50,10 @@ vi.mock('@/stores/systemStatsStore', () => ({
   useSystemStatsStore: vi.fn(() => mockSystemStatsStore)
 }))
 
+const trackTemplateFilterChanged = vi.hoisted(() => vi.fn())
 vi.mock('@/platform/telemetry', () => ({
   useTelemetry: vi.fn(() => ({
-    trackTemplateFilterChanged: vi.fn(),
+    trackTemplateFilterChanged,
     trackSearchQuery: vi.fn()
   }))
 }))
@@ -62,20 +62,12 @@ vi.mock('@/platform/telemetry/searchQuery/useSearchQueryTracking', () => ({
   useSearchQueryTracking: vi.fn()
 }))
 
-const mockGetFuseOptions = vi.hoisted(() => vi.fn())
-vi.mock('@/scripts/api', () => ({
-  api: {
-    getFuseOptions: mockGetFuseOptions
-  }
-}))
-
 describe('useTemplateFiltering', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     vi.clearAllMocks()
     vi.stubGlobal('__DISTRIBUTION__', 'localhost')
     mockSystemStatsStore.systemStats.system.os = 'linux'
-    mockGetFuseOptions.mockResolvedValue(null)
   })
 
   afterEach(() => {
@@ -248,117 +240,423 @@ describe('useTemplateFiltering', () => {
     ])
   })
 
-  describe('loadFuseOptions', () => {
-    it('updates fuseOptions when getFuseOptions returns valid options', async () => {
-      const templates = ref<TemplateInfo[]>([
-        {
-          name: 'test-template',
-          description: 'Test template',
-          mediaType: 'image',
-          mediaSubtype: 'png'
-        }
-      ])
-
-      const customFuseOptions: IFuseOptions<TemplateInfo> = {
-        keys: [
-          { name: 'name', weight: 0.5 },
-          { name: 'description', weight: 0.5 }
-        ],
-        threshold: 0.4,
-        includeScore: true
+  const usageRankedTemplates = () =>
+    ref<TemplateInfo[]>([
+      {
+        name: 'low',
+        title: 'Low',
+        description: '',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        usage: 10
+      },
+      {
+        name: 'high',
+        title: 'High',
+        description: '',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        usage: 900
       }
+    ])
 
-      mockGetFuseOptions.mockResolvedValueOnce(customFuseOptions)
+  it('ranks "recommended" via computeDefaultScore', async () => {
+    const { sortBy, filteredTemplates } = useTemplateFiltering(
+      usageRankedTemplates()
+    )
 
-      const { loadFuseOptions, filteredTemplates } =
-        useTemplateFiltering(templates)
+    sortBy.value = 'recommended'
+    await nextTick()
 
-      await loadFuseOptions()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'high',
+      'low'
+    ])
+    expect(defaultRankingStore.computeDefaultScore).toHaveBeenCalled()
+  })
 
-      expect(mockGetFuseOptions).toHaveBeenCalledTimes(1)
-      expect(filteredTemplates.value).toBeDefined()
-    })
+  it('ranks "popular" by raw usage without the recommended score', async () => {
+    const { sortBy, filteredTemplates } = useTemplateFiltering(
+      usageRankedTemplates()
+    )
 
-    it('does not update fuseOptions when getFuseOptions returns null', async () => {
-      const templates = ref<TemplateInfo[]>([
-        {
-          name: 'test-template',
-          description: 'Test template',
-          mediaType: 'image',
-          mediaSubtype: 'png'
-        }
-      ])
+    sortBy.value = 'popular'
+    await nextTick()
 
-      mockGetFuseOptions.mockResolvedValueOnce(null)
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'high',
+      'low'
+    ])
+    expect(defaultRankingStore.computeDefaultScore).not.toHaveBeenCalled()
+  })
 
-      const { loadFuseOptions, filteredTemplates } =
-        useTemplateFiltering(templates)
-
-      const initialResults = filteredTemplates.value
-
-      await loadFuseOptions()
-
-      expect(mockGetFuseOptions).toHaveBeenCalledTimes(1)
-      expect(filteredTemplates.value).toEqual(initialResults)
-    })
-
-    it('handles errors when getFuseOptions fails', async () => {
-      const templates = ref<TemplateInfo[]>([
-        {
-          name: 'test-template',
-          description: 'Test template',
-          mediaType: 'image',
-          mediaSubtype: 'png'
-        }
-      ])
-
-      mockGetFuseOptions.mockRejectedValueOnce(new Error('Network error'))
-
-      const { loadFuseOptions, filteredTemplates } =
-        useTemplateFiltering(templates)
-
-      const initialResults = filteredTemplates.value
-
-      await expect(loadFuseOptions()).rejects.toThrow('Network error')
-      expect(filteredTemplates.value).toEqual(initialResults)
-    })
-
-    it('recreates Fuse instance when fuseOptions change', async () => {
-      const templates = ref<TemplateInfo[]>([
-        {
-          name: 'searchable-template',
-          description: 'This is a searchable template',
-          mediaType: 'image',
-          mediaSubtype: 'png'
-        },
-        {
-          name: 'another-template',
-          description: 'Another template',
-          mediaType: 'image',
-          mediaSubtype: 'png'
-        }
-      ])
-
-      const { loadFuseOptions, searchQuery, filteredTemplates } =
-        useTemplateFiltering(templates)
-
-      const customFuseOptions = {
-        keys: [{ name: 'name', weight: 1.0 }],
-        threshold: 0.2,
-        includeScore: true,
-        includeMatches: true
+  it('filters to ComfyUI templates via the Runs On filter', async () => {
+    const templates = ref<TemplateInfo[]>([
+      {
+        name: 'open',
+        title: 'Open',
+        description: '',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        openSource: true
+      },
+      {
+        name: 'partner',
+        title: 'Partner',
+        description: '',
+        mediaType: 'image',
+        mediaSubtype: 'png',
+        openSource: false
       }
+    ])
 
-      mockGetFuseOptions.mockResolvedValueOnce(customFuseOptions)
+    const { selectedRunsOn, filteredTemplates } =
+      useTemplateFiltering(templates)
+    selectedRunsOn.value = ['ComfyUI']
+    await nextTick()
 
-      await loadFuseOptions()
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'open'
+    ])
+  })
+
+  it('sorts alphabetically by the localized title shown on the card', async () => {
+    const templates = ref<TemplateInfo[]>([
+      {
+        name: 'z-raw',
+        title: 'Apple', // raw title would sort first
+        localizedTitle: 'Zebra', // but the card shows this
+        description: '',
+        mediaType: 'image',
+        mediaSubtype: 'png'
+      },
+      {
+        name: 'a-raw',
+        title: 'Zulu',
+        localizedTitle: 'Ant',
+        description: '',
+        mediaType: 'image',
+        mediaSubtype: 'png'
+      }
+    ])
+
+    const { sortBy, filteredTemplates } = useTemplateFiltering(templates)
+    sortBy.value = 'alphabetical'
+    await nextTick()
+
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'a-raw', // Ant
+      'z-raw' // Zebra
+    ])
+  })
+
+  it('A-Z trims whitespace, groups numbers after letters, and orders them naturally', async () => {
+    const make = (name: string, title: string): TemplateInfo => ({
+      name,
+      title,
+      description: '',
+      mediaType: 'image',
+      mediaSubtype: 'png'
+    })
+    const templates = ref<TemplateInfo[]>([
+      make('ten', '1.10 Model'),
+      make('two', '1.2 Model'),
+      make('spaced', ' Apple'), // leading space must not jump to the top
+      make('zebra', 'Zebra')
+    ])
+
+    const { sortBy, filteredTemplates } = useTemplateFiltering(templates)
+    sortBy.value = 'alphabetical'
+    await nextTick()
+
+    expect(filteredTemplates.value.map((template) => template.name)).toEqual([
+      'spaced', // " Apple" trimmed → sorts as a letter, first
+      'zebra',
+      'two', // numbers grouped after letters; 1.2 before 1.10 (numeric)
+      'ten'
+    ])
+  })
+
+  describe('Search relevance (MiniSearch)', () => {
+    const names = (templates: { name: string }[]) =>
+      templates.map((template) => template.name)
+
+    const buildTemplate = (
+      overrides: Partial<TemplateInfo> & { name: string }
+    ): TemplateInfo => ({
+      description: '',
+      mediaType: 'image',
+      mediaSubtype: 'png',
+      ...overrides
+    })
+
+    async function searchFor(templates: TemplateInfo[], query: string) {
+      const composable = useTemplateFiltering(ref(templates))
+      composable.searchQuery.value = query
+      await nextTick()
+      return composable
+    }
+
+    it('matches "img2img" via abbreviation expansion', async () => {
+      const templates = [
+        buildTemplate({
+          name: 'z_image_t2i',
+          title: 'Z-Image: Text to Image',
+          tags: ['Text to Image']
+        }),
+        buildTemplate({ name: 'video_gen', title: 'LTX Text to Video' })
+      ]
+
+      const { filteredTemplates } = await searchFor(templates, 'img2img')
+
+      expect(names(filteredTemplates.value)).toContain('z_image_t2i')
+      expect(names(filteredTemplates.value)).not.toContain('video_gen')
+    })
+
+    it('matches multi-word cross-field queries like "flux upscale"', async () => {
+      const templates = [
+        buildTemplate({
+          name: 'flux_upscale',
+          title: 'Flux.1 Creative Upscale',
+          models: ['Flux.1'],
+          tags: ['Image Upscale']
+        }),
+        buildTemplate({
+          name: 'flux_txt2img',
+          title: 'Flux.1 Text to Image',
+          models: ['Flux.1']
+        }),
+        buildTemplate({
+          name: 'seedvr_upscale',
+          title: 'SeedVR2 Upscale',
+          tags: ['Image Upscale']
+        })
+      ]
+
+      const { filteredTemplates } = await searchFor(templates, 'flux upscale')
+
+      expect(names(filteredTemplates.value)[0]).toBe('flux_upscale')
+    })
+
+    it('breaks near-tied relevance by usage, dampened so it cannot override a better match', async () => {
+      const templates = [
+        buildTemplate({
+          name: 'low_usage_upscale',
+          title: 'Alpha Image Upscale',
+          tags: ['Image Upscale'],
+          usage: 5
+        }),
+        buildTemplate({
+          name: 'high_usage_upscale',
+          title: 'Beta Image Upscale',
+          tags: ['Image Upscale'],
+          usage: 5000
+        })
+      ]
+
+      const { filteredTemplates } = await searchFor(templates, 'upscale')
+
+      // Near-identical text scores → the far more used template ranks first.
+      expect(names(filteredTemplates.value)[0]).toBe('high_usage_upscale')
+    })
+
+    it('keeps relevance order even when a usage sort is persisted', async () => {
+      const templates = [
+        buildTemplate({
+          name: 'exact_match',
+          title: 'Outpaint Studio',
+          tags: ['Outpaint'],
+          usage: 1
+        }),
+        buildTemplate({
+          name: 'popular_weak_match',
+          title: 'Portrait Generator',
+          description: 'supports outpaint as a minor feature',
+          usage: 9000
+        })
+      ]
+
+      const composable = useTemplateFiltering(ref(templates))
+      composable.sortBy.value = 'popular'
+      composable.searchQuery.value = 'outpaint'
       await nextTick()
 
-      searchQuery.value = 'searchable'
+      // Search defaults to relevance regardless of the persisted browse sort,
+      // so the exact title match wins over the high-usage weak match.
+      expect(composable.sortSelection.value).toBe('relevance')
+      expect(names(composable.filteredTemplates.value)[0]).toBe('exact_match')
+    })
+
+    it('lets the user override relevance with another sort while searching', async () => {
+      const templates = [
+        buildTemplate({
+          name: 'exact_low_usage',
+          title: 'Outpaint Studio',
+          usage: 1
+        }),
+        buildTemplate({
+          name: 'weak_high_usage',
+          title: 'Portrait',
+          description: 'outpaint mentioned once',
+          usage: 9000
+        })
+      ]
+
+      const composable = useTemplateFiltering(ref(templates))
+      composable.searchQuery.value = 'outpaint'
+      await nextTick()
+      expect(composable.sortSelection.value).toBe('relevance')
+      expect(names(composable.filteredTemplates.value)[0]).toBe(
+        'exact_low_usage'
+      )
+
+      composable.sortSelection.value = 'popular'
+      await nextTick()
+      expect(composable.sortSelection.value).toBe('popular')
+      expect(names(composable.filteredTemplates.value)[0]).toBe(
+        'weak_high_usage'
+      )
+    })
+
+    it('restores the browse sort when the search is cleared and keeps relevance ephemeral', async () => {
+      const composable = useTemplateFiltering(
+        ref([buildTemplate({ name: 'only', title: 'Only' })])
+      )
+      composable.sortBy.value = 'popular'
+
+      composable.searchQuery.value = 'only'
+      await nextTick()
+      expect(composable.sortSelection.value).toBe('relevance')
+
+      composable.searchQuery.value = ''
+      await nextTick()
+      // Browse sort is untouched by the search; relevance is never persisted.
+      expect(composable.sortSelection.value).toBe('popular')
+      expect(composable.sortBy.value).toBe('popular')
+    })
+
+    it('keeps a browse sort chosen mid-search ephemeral', async () => {
+      const composable = useTemplateFiltering(
+        ref([buildTemplate({ name: 'only', title: 'Only' })])
+      )
+      composable.sortBy.value = 'newest'
+
+      composable.searchQuery.value = 'only'
+      await nextTick()
+      // Simulates the nav coordinator picking Popular during a search.
+      composable.sortSelection.value = 'popular'
+      await nextTick()
+      expect(composable.sortBy.value).toBe('newest') // persisted sort untouched
+
+      composable.searchQuery.value = ''
+      await nextTick()
+      expect(composable.sortSelection.value).toBe('newest')
+    })
+
+    it('returns no results for a query that matches nothing', async () => {
+      const templates = [
+        buildTemplate({ name: 'flux_image', title: 'Flux Image' })
+      ]
+
+      const { filteredTemplates, filteredCount } = await searchFor(
+        templates,
+        'zzzznomatch'
+      )
+
+      expect(filteredTemplates.value).toEqual([])
+      expect(filteredCount.value).toBe(0)
+    })
+
+    it('matches the localized title the card displays', async () => {
+      const templates = [
+        buildTemplate({
+          name: 'localized_only',
+          title: 'raw english',
+          localizedTitle: 'aquarela'
+        })
+      ]
+
+      const { filteredTemplates } = await searchFor(templates, 'aquarela')
+
+      expect(names(filteredTemplates.value)).toEqual(['localized_only'])
+    })
+
+    it('reports the visible sort to telemetry, not the persisted browse sort', async () => {
+      vi.useFakeTimers()
+      try {
+        const composable = useTemplateFiltering(
+          ref([buildTemplate({ name: 'only', title: 'Only' })])
+        )
+        composable.sortBy.value = 'popular'
+        composable.searchQuery.value = 'only'
+        await nextTick()
+        await vi.runOnlyPendingTimersAsync()
+
+        // Searching shows relevance, so telemetry must report relevance, not popular.
+        expect(trackTemplateFilterChanged).toHaveBeenLastCalledWith(
+          expect.objectContaining({ sort_by: 'relevance' })
+        )
+      } finally {
+        vi.useRealTimers()
+      }
+    })
+
+    it('preserves relevance order after a model filter narrows the results', async () => {
+      const templates = [
+        buildTemplate({
+          name: 'strong',
+          title: 'Flux Upscale Pro',
+          models: ['Flux'],
+          tags: ['Upscale']
+        }),
+        buildTemplate({
+          name: 'weak',
+          title: 'Flux Portrait',
+          models: ['Flux'],
+          description: 'mentions upscale once'
+        })
+      ]
+
+      const composable = useTemplateFiltering(ref(templates))
+      composable.searchQuery.value = 'upscale'
+      composable.selectedModels.value = ['Flux']
       await nextTick()
 
-      expect(filteredTemplates.value.length).toBeGreaterThan(0)
-      expect(mockGetFuseOptions).toHaveBeenCalledTimes(1)
+      // The filter keeps the search order; the stronger match stays first.
+      expect(names(composable.filteredTemplates.value)).toEqual([
+        'strong',
+        'weak'
+      ])
+    })
+
+    it('narrows to the query then restores the full set when cleared', async () => {
+      const templates = [
+        buildTemplate({ name: 'alpha_one', title: 'Alpha' }),
+        buildTemplate({ name: 'beta_two', title: 'Beta' })
+      ]
+
+      const composable = useTemplateFiltering(ref(templates))
+      composable.searchQuery.value = 'alpha'
+      await nextTick()
+      expect(names(composable.filteredTemplates.value)).toEqual(['alpha_one'])
+
+      composable.searchQuery.value = ''
+      await nextTick()
+      expect(names(composable.filteredTemplates.value)).toHaveLength(2)
+    })
+
+    it('records a non-negative largest usage score after an empty-result search', async () => {
+      const templates = [
+        buildTemplate({ name: 'gamma', title: 'Gamma', usage: 3 }),
+        buildTemplate({ name: 'delta', title: 'Delta', usage: 7 })
+      ]
+
+      const { filteredTemplates } = await searchFor(templates, 'zzzznomatch')
+      expect(filteredTemplates.value).toEqual([])
+
+      // Empty results must yield 0, not -Infinity, which would corrupt
+      // usage-normalized ranking scores.
+      expect(defaultRankingStore.largestUsageScore).toBe(0)
     })
   })
 
diff --git a/src/composables/useTemplateFiltering.ts b/src/composables/useTemplateFiltering.ts
index afd21f9383..aab9ad7f01 100644
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -1,9 +1,11 @@
-import { refDebounced, watchDebounced } from '@vueuse/core'
-import Fuse from 'fuse.js'
-import type { IFuseOptions } from 'fuse.js'
+import { watchDebounced } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
+import {
+  createTemplateSearchIndex,
+  searchTemplates
+} from '@/composables/templateSearchConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useSearchQueryTracking } from '@/platform/telemetry/searchQuery/useSearchQueryTracking'
@@ -12,7 +14,40 @@ import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { useTemplateRankingStore } from '@/stores/templateRankingStore'
 import { debounce } from 'es-toolkit/compat'
-import { api } from '@/scripts/api'
+
+type TemplateBrowseSort =
+  | 'default'
+  | 'recommended'
+  | 'popular'
+  | 'alphabetical'
+  | 'newest'
+  | 'vram-low-to-high'
+  | 'model-size-low-to-high'
+
+type TemplateSortMode = TemplateBrowseSort | 'relevance'
+
+/** The title shown on the card, trimmed for stable sorting. */
+function displayTitle(template: TemplateInfo): string {
+  return (
+    template.localizedTitle ||
+    template.title ||
+    template.name ||
+    ''
+  ).trim()
+}
+
+/** A→Z by displayed title, with number-prefixed titles grouped after letters. */
+function compareAlphabetical(a: TemplateInfo, b: TemplateInfo): number {
+  const titleA = displayTitle(a)
+  const titleB = displayTitle(b)
+  const numericA = /^\d/.test(titleA)
+  const numericB = /^\d/.test(titleB)
+  if (numericA !== numericB) return numericA ? 1 : -1
+  return titleA.localeCompare(titleB, undefined, {
+    numeric: true,
+    sensitivity: 'base'
+  })
+}
 
 /**
  * Checks whether a template is visible for the given set of distributions.
@@ -26,20 +61,6 @@ function isTemplateVisibleForDistributions(
   return distributions.some((d) => template.includeOnDistributions!.includes(d))
 }
 
-// Fuse.js configuration for fuzzy search
-const defaultFuseOptions: IFuseOptions<TemplateInfo> = {
-  keys: [
-    { name: 'name', weight: 0.3 },
-    { name: 'title', weight: 0.3 },
-    { name: 'description', weight: 0.1 },
-    { name: 'tags', weight: 0.2 },
-    { name: 'models', weight: 0.3 }
-  ],
-  threshold: 0.33,
-  includeScore: true,
-  includeMatches: true
-}
-
 export function useTemplateFiltering(
   templates: Ref<TemplateInfo[]> | TemplateInfo[]
 ) {
@@ -57,17 +78,9 @@ export function useTemplateFiltering(
   const selectedRunsOn = ref<string[]>(
     settingStore.get('Comfy.Templates.SelectedRunsOn')
   )
-  const sortBy = ref<
-    | 'default'
-    | 'recommended'
-    | 'popular'
-    | 'alphabetical'
-    | 'newest'
-    | 'vram-low-to-high'
-    | 'model-size-low-to-high'
-  >(settingStore.get('Comfy.Templates.SortBy'))
-
-  const fuseOptions = ref<IFuseOptions<TemplateInfo>>(defaultFuseOptions)
+  const sortBy = ref<TemplateBrowseSort>(
+    settingStore.get('Comfy.Templates.SortBy')
+  )
 
   const templatesArray = computed(() => {
     const templateData = 'value' in templates ? templates.value : templates
@@ -101,8 +114,8 @@ export function useTemplateFiltering(
     )
   })
 
-  const fuse = computed(
-    () => new Fuse(visibleTemplates.value, fuseOptions.value)
+  const searchIndex = computed(() =>
+    createTemplateSearchIndex(visibleTemplates.value)
   )
 
   const availableModels = computed(() => {
@@ -154,15 +167,36 @@ export function useTemplateFiltering(
     )
   )
 
-  const debouncedSearchQuery = refDebounced(searchQuery, 150)
+  const hasActiveQuery = computed(() => searchQuery.value.trim().length > 0)
+  const searchSort = ref<TemplateSortMode>('relevance')
+  watch(hasActiveQuery, (searching) => {
+    if (searching) searchSort.value = 'relevance'
+  })
+  const activeSort = computed(() =>
+    hasActiveQuery.value ? searchSort.value : sortBy.value
+  )
+
+  const sortSelection = computed<TemplateSortMode>({
+    get: () => activeSort.value,
+    set: (value) => {
+      // relevance is search-only; a browse sort chosen mid-search stays ephemeral.
+      if (value === 'relevance' || hasActiveQuery.value)
+        searchSort.value = value
+      else sortBy.value = value
+    }
+  })
 
   const filteredBySearch = computed(() => {
-    if (!debouncedSearchQuery.value.trim()) {
+    if (!hasActiveQuery.value) {
       return visibleTemplates.value
     }
 
-    const results = fuse.value.search(debouncedSearchQuery.value)
-    return results.map((result) => result.item)
+    const templatesByName = new Map(
+      visibleTemplates.value.map((template) => [template.name, template])
+    )
+    return searchTemplates(searchIndex.value, searchQuery.value)
+      .map((name) => templatesByName.get(name))
+      .filter((template): template is TemplateInfo => template !== undefined)
   })
 
   const filteredByModels = computed(() => {
@@ -224,8 +258,9 @@ export function useTemplateFiltering(
   watch(
     filteredByRunsOn,
     (templates) => {
-      rankingStore.largestUsageScore = Math.max(
-        ...templates.map((t) => t.usage || 0)
+      rankingStore.largestUsageScore = templates.reduce(
+        (max, template) => Math.max(max, template.usage ?? 0),
+        0
       )
     },
     { immediate: true }
@@ -234,7 +269,9 @@ export function useTemplateFiltering(
   const sortedTemplates = computed(() => {
     const templates = [...filteredByRunsOn.value]
 
-    switch (sortBy.value) {
+    switch (activeSort.value) {
+      case 'relevance':
+        return templates
       case 'recommended':
         // Curated: usage × 0.5 + internal × 0.3 + freshness × 0.2
         return templates.sort((a, b) => {
@@ -251,18 +288,9 @@ export function useTemplateFiltering(
           return scoreB - scoreA
         })
       case 'popular':
-        // User-driven: usage × 0.9 + freshness × 0.1
-        return templates.sort((a, b) => {
-          const scoreA = rankingStore.computePopularScore(a.date, a.usage)
-          const scoreB = rankingStore.computePopularScore(b.date, b.usage)
-          return scoreB - scoreA
-        })
+        return templates.sort((a, b) => (b.usage ?? 0) - (a.usage ?? 0))
       case 'alphabetical':
-        return templates.sort((a, b) => {
-          const nameA = a.title || a.name || ''
-          const nameB = b.title || b.name || ''
-          return nameA.localeCompare(nameB)
-        })
+        return templates.sort(compareAlphabetical)
       case 'newest':
         return templates.sort((a, b) => {
           const dateA = new Date(a.date || '1970-01-01')
@@ -292,6 +320,7 @@ export function useTemplateFiltering(
     selectedUseCases.value = []
     selectedRunsOn.value = []
     sortBy.value = 'default'
+    searchSort.value = 'relevance'
   }
 
   const removeModelFilter = (model: string) => {
@@ -317,22 +346,15 @@ export function useTemplateFiltering(
       selected_models: selectedModels.value,
       selected_use_cases: selectedUseCases.value,
       selected_runs_on: selectedRunsOn.value,
-      sort_by: sortBy.value,
+      sort_by: activeSort.value,
       filtered_count: filteredCount.value,
       total_count: totalCount.value
     })
   }, 500)
 
-  const loadFuseOptions = async () => {
-    const fetchedOptions = await api.getFuseOptions()
-    if (fetchedOptions) {
-      fuseOptions.value = fetchedOptions
-    }
-  }
-
   // Watch for filter changes and track them
   watch(
-    [searchQuery, selectedModels, selectedUseCases, selectedRunsOn, sortBy],
+    [searchQuery, selectedModels, selectedUseCases, selectedRunsOn, activeSort],
     () => {
       // Only track if at least one filter is active (to avoid tracking initial state)
       const hasActiveFilters =
@@ -340,7 +362,7 @@ export function useTemplateFiltering(
         selectedModels.value.length > 0 ||
         selectedUseCases.value.length > 0 ||
         selectedRunsOn.value.length > 0 ||
-        sortBy.value !== 'default'
+        activeSort.value !== 'default'
 
       if (hasActiveFilters) {
         debouncedTrackFilterChange()
@@ -389,6 +411,8 @@ export function useTemplateFiltering(
     selectedUseCases,
     selectedRunsOn,
     sortBy,
+    sortSelection,
+    hasActiveQuery,
 
     // Computed - Active filters (actually applied)
     activeModels,
@@ -410,7 +434,6 @@ export function useTemplateFiltering(
     resetFilters,
     removeModelFilter,
     removeUseCaseFilter,
-    removeRunsOnFilter,
-    loadFuseOptions
+    removeRunsOnFilter
   }
 }
diff --git a/src/extensions/core/createBoundingBoxes.test.ts b/src/extensions/core/createBoundingBoxes.test.ts
index 75eaf92fff..9498b4511c 100644
--- a/src/extensions/core/createBoundingBoxes.test.ts
+++ b/src/extensions/core/createBoundingBoxes.test.ts
@@ -32,7 +32,8 @@ function makeNode(connected: boolean, comfyClass = 'CreateBoundingBoxes') {
   const widgets: MockWidget[] = [
     { name: 'width', hidden: false, options: {} },
     { name: 'height', hidden: false, options: {} },
-    { name: 'other', hidden: false, options: {} }
+    { name: 'other', hidden: false, options: {} },
+    { name: 'last_incoming', hidden: false, options: {} }
   ]
   return {
     constructor: { comfyClass },
@@ -73,6 +74,15 @@ describe('Comfy.CreateBoundingBoxes extension', () => {
     expect(node.widgets[0].options.hidden).toBe(false)
   })
 
+  it('always hides the internal last_incoming widget', () => {
+    for (const connected of [true, false]) {
+      const node = makeNode(connected)
+      state.extension!.nodeCreated(node)
+      expect(node.widgets[3].hidden).toBe(true)
+      expect(node.widgets[3].options.hidden).toBe(true)
+    }
+  })
+
   it('writes visibility through the widget value store when present', () => {
     state.widgetState = { options: {} }
     const node = makeNode(true)
diff --git a/src/extensions/core/createBoundingBoxes.ts b/src/extensions/core/createBoundingBoxes.ts
index 691c61d6b9..ca4e27ca1b 100644
--- a/src/extensions/core/createBoundingBoxes.ts
+++ b/src/extensions/core/createBoundingBoxes.ts
@@ -3,6 +3,7 @@ import { useExtensionService } from '@/services/extensionService'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 const DIMENSION_WIDGETS = new Set(['width', 'height'])
+const INTERNAL_WIDGETS = new Set(['last_incoming'])
 
 useExtensionService().registerExtension({
   name: 'Comfy.CreateBoundingBoxes',
@@ -15,20 +16,30 @@ useExtensionService().registerExtension({
 
     const widgetValueStore = useWidgetValueStore()
 
+    const setWidgetHidden = (
+      widget: NonNullable<typeof node.widgets>[number],
+      hidden: boolean
+    ) => {
+      widget.hidden = hidden
+      const state = widget.widgetId
+        ? widgetValueStore.getWidget(widget.widgetId)
+        : undefined
+      if (state?.options) state.options.hidden = hidden
+      else widget.options.hidden = hidden
+    }
+
     const syncDimensionVisibility = () => {
       const slot = node.findInputSlot('background')
       const hidden = slot >= 0 && node.isInputConnected(slot)
       for (const widget of node.widgets ?? []) {
-        if (!DIMENSION_WIDGETS.has(widget.name)) continue
-        widget.hidden = hidden
-        const state = widget.widgetId
-          ? widgetValueStore.getWidget(widget.widgetId)
-          : undefined
-        if (state?.options) state.options.hidden = hidden
-        else widget.options.hidden = hidden
+        if (DIMENSION_WIDGETS.has(widget.name)) setWidgetHidden(widget, hidden)
       }
     }
 
+    for (const widget of node.widgets ?? []) {
+      if (INTERNAL_WIDGETS.has(widget.name)) setWidgetHidden(widget, true)
+    }
+
     syncDimensionVisibility()
     node.onConnectionsChange = useChainCallback(
       node.onConnectionsChange,
diff --git a/src/extensions/core/load3d.test.ts b/src/extensions/core/load3d.test.ts
index d1bcbe5a6b..2c327923ec 100644
--- a/src/extensions/core/load3d.test.ts
+++ b/src/extensions/core/load3d.test.ts
@@ -143,14 +143,23 @@ async function loadExtensionsFresh(): Promise<{
   load3DExt: ExtCreated
   preview3DExt: ExtCreated
   preview3DAdvancedExt: ExtCreated
+  save3DAdvancedExt: ExtCreated
 }> {
   vi.resetModules()
   registerExtensionMock.mockClear()
   await import('@/extensions/core/load3d')
+  const extByName = (name: string): ExtCreated => {
+    const call = registerExtensionMock.mock.calls.find(
+      (c) => (c[0] as ExtCreated).name === name
+    )
+    if (!call) throw new Error(`Extension ${name} was not registered`)
+    return call[0] as ExtCreated
+  }
   return {
-    load3DExt: registerExtensionMock.mock.calls[0][0] as ExtCreated,
-    preview3DExt: registerExtensionMock.mock.calls[1][0] as ExtCreated,
-    preview3DAdvancedExt: registerExtensionMock.mock.calls[2][0] as ExtCreated
+    load3DExt: extByName('Comfy.Load3D'),
+    preview3DExt: extByName('Comfy.Preview3D'),
+    preview3DAdvancedExt: extByName('Comfy.Preview3DAdvanced'),
+    save3DAdvancedExt: extByName('Comfy.Save3DAdvanced')
   }
 }
 
@@ -264,14 +273,15 @@ function setupBaseMocks() {
 describe('load3d module registration', () => {
   beforeEach(setupBaseMocks)
 
-  it('registers Comfy.Load3D, Comfy.Preview3D, and Comfy.Preview3DAdvanced extensions on import', async () => {
-    const { load3DExt, preview3DExt, preview3DAdvancedExt } =
+  it('registers Comfy.Load3D, Comfy.Preview3D, Comfy.Preview3DAdvanced, and Comfy.Save3DAdvanced extensions on import', async () => {
+    const { load3DExt, preview3DExt, preview3DAdvancedExt, save3DAdvancedExt } =
       await loadExtensionsFresh()
 
-    expect(registerExtensionMock).toHaveBeenCalledTimes(3)
+    expect(registerExtensionMock).toHaveBeenCalledTimes(4)
     expect(load3DExt.name).toBe('Comfy.Load3D')
     expect(preview3DExt.name).toBe('Comfy.Preview3D')
     expect(preview3DAdvancedExt.name).toBe('Comfy.Preview3DAdvanced')
+    expect(save3DAdvancedExt.name).toBe('Comfy.Save3DAdvanced')
   })
 })
 
@@ -711,6 +721,39 @@ describe('Comfy.Preview3D.onNodeOutputsUpdated', () => {
   })
 })
 
+describe('Comfy.Save3DAdvanced.onNodeOutputsUpdated', () => {
+  beforeEach(setupBaseMocks)
+
+  it('restores the saved model from the output folder when opened from history', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'Save3DAdvanced' })
+    getNodeByLocatorIdMock.mockReturnValue(node)
+
+    save3DAdvancedExt.onNodeOutputsUpdated!({
+      '7': { result: ['3d\\ComfyUI_00001.glb'] }
+    } as never)
+
+    expect(node.properties['Last Time Model File']).toBe('3d/ComfyUI_00001.glb')
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'output',
+      '3d/ComfyUI_00001.glb',
+      expect.objectContaining({ silentOnNotFound: true })
+    )
+  })
+
+  it('skips nodes whose comfyClass is not Save3DAdvanced', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'Preview3DAdvanced' })
+    getNodeByLocatorIdMock.mockReturnValue(node)
+
+    save3DAdvancedExt.onNodeOutputsUpdated!({
+      '7': { result: ['mesh.glb'] }
+    } as never)
+
+    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
+  })
+})
+
 describe('Comfy.Preview3DAdvanced.nodeCreated', () => {
   beforeEach(setupBaseMocks)
 
@@ -1032,6 +1075,50 @@ describe('Comfy.Preview3DAdvanced.getNodeMenuItems', () => {
   })
 })
 
+describe('Comfy.Save3DAdvanced.nodeCreated', () => {
+  beforeEach(setupBaseMocks)
+
+  it('skips nodes whose comfyClass is not Save3DAdvanced', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'Preview3DAdvanced' })
+
+    await save3DAdvancedExt.nodeCreated(node)
+
+    expect(waitForLoad3dMock).not.toHaveBeenCalled()
+    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
+  })
+
+  it('restores persisted models from the output folder, not temp', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({
+      comfyClass: 'Save3DAdvanced',
+      properties: { 'Last Time Model File': '3d/ComfyUI_00001_.glb' }
+    })
+
+    await save3DAdvancedExt.nodeCreated(node)
+
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'output',
+      '3d/ComfyUI_00001_.glb',
+      { silentOnNotFound: true }
+    )
+  })
+
+  it('onExecuted loads the saved file from the output folder', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'Save3DAdvanced' })
+
+    await save3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({ result: ['3d/ComfyUI_00002_.glb'] })
+
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'output',
+      '3d/ComfyUI_00002_.glb',
+      { silentOnNotFound: true }
+    )
+  })
+})
+
 describe('Comfy.Load3D scene widget serializeValue caching', () => {
   beforeEach(setupBaseMocks)
 
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
index cee600bbfa..d41c19af53 100644
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -15,8 +15,10 @@ import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper
 import type {
   CameraConfig,
   CameraState,
+  LoadFolder,
   Model3DInfo
 } from '@/extensions/core/load3d/interfaces'
+import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
 import {
   LOAD3D_NONE_MODEL,
@@ -48,6 +50,7 @@ import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
+import type { ComfyExtension } from '@/types/comfy'
 import { isLoad3dNode } from '@/utils/litegraphUtil'
 
 const inputSpecLoad3D: CustomInputSpec = {
@@ -287,8 +290,11 @@ useExtensionService().registerExtension({
   getCustomWidgets() {
     const VIEWPORT_STATE_NODES = new Set([
       'Preview3DAdvanced',
+      'Save3DAdvanced',
       'PreviewGaussianSplat',
-      'PreviewPointCloud'
+      'PreviewPointCloud',
+      'SaveGaussianSplat',
+      'SavePointCloud'
     ])
     return {
       LOAD_3D(node) {
@@ -679,155 +685,215 @@ useExtensionService().registerExtension({
   }
 })
 
-useExtensionService().registerExtension({
-  name: 'Comfy.Preview3DAdvanced',
+function applyPreview3DAdvancedResult(
+  node: LGraphNode,
+  load3d: Load3d,
+  result: NonNullable<Preview3DAdvancedOutput['result']>,
+  loadFolder: LoadFolder,
+  comfyClass: string
+): void {
+  const filePath = result[0]
+  if (!filePath) return
 
-  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
-    if (node.constructor.comfyClass !== 'Preview3DAdvanced') return []
+  const normalizedPath = filePath.replaceAll('\\', '/')
+  node.properties['Last Time Model File'] = normalizedPath
 
-    const load3d = useLoad3dService().getLoad3d(node)
-    if (!load3d) return []
+  const config = new Load3DConfiguration(load3d, node.properties)
+  config.configureForSaveMesh(loadFolder, normalizedPath, {
+    silentOnNotFound: true
+  })
 
-    if (load3d.isSplatModel()) return []
+  const cameraState = result[1]
+  const modelTransform = result[2]?.[0]
+  if (!cameraState && !modelTransform) return
 
-    return createExportMenuItems(load3d)
-  },
+  const targetGeneration = load3d.currentLoadGeneration
+  void load3d
+    .whenLoadIdle()
+    .then(() => {
+      if (load3d.currentLoadGeneration !== targetGeneration) return
+      if (cameraState) load3d.setCameraState(cameraState)
+      if (modelTransform) load3d.applyModelTransform(modelTransform)
+    })
+    .catch((error) => {
+      console.error(
+        `Failed to apply input camera_info / model_3d_info from ${comfyClass}:`,
+        error
+      )
+    })
+}
 
-  async nodeCreated(node: LGraphNode) {
-    if (node.constructor.comfyClass !== 'Preview3DAdvanced') return
+function createPreview3DAdvancedExtension(
+  comfyClass: string,
+  extensionName: string,
+  loadFolder: LoadFolder
+): ComfyExtension {
+  return {
+    name: extensionName,
 
-    const [oldWidth, oldHeight] = node.size
+    onNodeOutputsUpdated(
+      nodeOutputs: Record<NodeLocatorId, NodeExecutionOutput>
+    ) {
+      for (const [locatorId, output] of Object.entries(nodeOutputs)) {
+        const result = (output as Preview3DAdvancedOutput).result
+        if (!result?.[0]) continue
 
-    node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
+        const node = getNodeByLocatorId(app.rootGraph, locatorId)
+        if (!node || node.constructor.comfyClass !== comfyClass) continue
 
-    await nextTick()
-
-    const onExecuted = node.onExecuted
-
-    useLoad3d(node).onLoad3dReady((load3d) => {
-      const lastTimeModelFile = node.properties['Last Time Model File']
-      if (!lastTimeModelFile) return
-
-      const config = new Load3DConfiguration(load3d, node.properties)
-      config.configureForSaveMesh('temp', lastTimeModelFile as string, {
-        silentOnNotFound: true
-      })
-
-      const cameraConfig = node.properties['Camera Config'] as
-        | CameraConfig
-        | undefined
-      const cameraState = cameraConfig?.state
-      if (!cameraState) return
-
-      const targetGeneration = load3d.currentLoadGeneration
-      void load3d
-        .whenLoadIdle()
-        .then(() => {
-          if (load3d.currentLoadGeneration !== targetGeneration) return
-          load3d.setCameraState(cameraState)
-          load3d.forceRender()
-        })
-        .catch((error) => {
-          console.error(
-            'Failed to restore camera state for Preview3DAdvanced:',
-            error
+        useLoad3d(node).waitForLoad3d((load3d) => {
+          applyPreview3DAdvancedResult(
+            node,
+            load3d,
+            result,
+            loadFolder,
+            comfyClass
           )
         })
-    })
-
-    useLoad3d(node).waitForLoad3d((load3d) => {
-      const sceneWidget = node.widgets?.find((w) => w.name === 'viewport_state')
-      if (!sceneWidget) return
-
-      const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
-
-      const widthWidget = node.widgets?.find((w) => w.name === 'width')
-      const heightWidget = node.widgets?.find((w) => w.name === 'height')
-      if (widthWidget && heightWidget) {
-        load3d.setTargetSize(
-          widthWidget.value as number,
-          heightWidget.value as number
-        )
-        widthWidget.callback = (value: number) => {
-          resolveLoad3d().setTargetSize(value, heightWidget.value as number)
-        }
-        heightWidget.callback = (value: number) => {
-          resolveLoad3d().setTargetSize(widthWidget.value as number, value)
-        }
       }
+    },
 
-      sceneWidget.serializeValue = async () => {
-        const currentLoad3d = nodeToLoad3dMap.get(node)
-        if (!currentLoad3d) {
-          console.error('No load3d instance found for node')
-          return null
-        }
+    getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+      if (node.constructor.comfyClass !== comfyClass) return []
 
-        const cameraConfig: CameraConfig = (node.properties['Camera Config'] as
-          | CameraConfig
-          | undefined) || {
-          cameraType: currentLoad3d.getCurrentCameraType(),
-          fov: currentLoad3d.cameraManager.perspectiveCamera.fov
-        }
-        cameraConfig.state = currentLoad3d.getCameraState()
-        node.properties['Camera Config'] = cameraConfig
+      const load3d = useLoad3dService().getLoad3d(node)
+      if (!load3d) return []
 
-        const modelInfo = currentLoad3d.getModelInfo()
-        const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
+      if (load3d.isSplatModel()) return []
 
-        return {
-          image: '',
-          mask: '',
-          normal: '',
-          camera_info: cameraConfig.state || null,
-          recording: '',
-          model_3d_info
-        }
-      }
+      return createExportMenuItems(load3d)
+    },
 
-      node.onExecuted = function (output: Preview3DAdvancedOutput) {
-        onExecuted?.call(this, output)
+    async nodeCreated(node: LGraphNode) {
+      if (node.constructor.comfyClass !== comfyClass) return
 
-        const result = output.result
-        const filePath = result?.[0]
+      const [oldWidth, oldHeight] = node.size
 
-        if (!filePath) {
-          const msg = t('toastMessages.unableToGetModelFilePath')
-          console.error(msg)
-          useToastStore().addAlert(msg)
-          return
-        }
+      node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
 
-        const normalizedPath = filePath.replaceAll('\\', '/')
-        node.properties['Last Time Model File'] = normalizedPath
+      await nextTick()
 
-        const currentLoad3d = resolveLoad3d()
-        const config = new Load3DConfiguration(currentLoad3d, node.properties)
-        config.configureForSaveMesh('temp', normalizedPath, {
+      const onExecuted = node.onExecuted
+      const { onLoad3dReady, waitForLoad3d } = useLoad3d(node)
+
+      onLoad3dReady((load3d) => {
+        const lastTimeModelFile = node.properties['Last Time Model File']
+        if (!lastTimeModelFile) return
+
+        const config = new Load3DConfiguration(load3d, node.properties)
+        config.configureForSaveMesh(loadFolder, lastTimeModelFile as string, {
           silentOnNotFound: true
         })
 
-        const cameraState = result?.[1]
-        const modelTransform = result?.[2]?.[0]
-        if (cameraState || modelTransform) {
-          const targetGeneration = currentLoad3d.currentLoadGeneration
-          void currentLoad3d
-            .whenLoadIdle()
-            .then(() => {
-              if (currentLoad3d.currentLoadGeneration !== targetGeneration)
-                return
-              if (cameraState) currentLoad3d.setCameraState(cameraState)
-              if (modelTransform)
-                currentLoad3d.applyModelTransform(modelTransform)
-            })
-            .catch((error) => {
-              console.error(
-                'Failed to apply input camera_info / model_3d_info from Preview3DAdvanced:',
-                error
-              )
-            })
+        const cameraConfig = node.properties['Camera Config'] as
+          | CameraConfig
+          | undefined
+        const cameraState = cameraConfig?.state
+        if (!cameraState) return
+
+        const targetGeneration = load3d.currentLoadGeneration
+        void load3d
+          .whenLoadIdle()
+          .then(() => {
+            if (load3d.currentLoadGeneration !== targetGeneration) return
+            load3d.setCameraState(cameraState)
+            load3d.forceRender()
+          })
+          .catch((error) => {
+            console.error(
+              `Failed to restore camera state for ${comfyClass}:`,
+              error
+            )
+          })
+      })
+
+      waitForLoad3d((load3d) => {
+        const sceneWidget = node.widgets?.find(
+          (w) => w.name === 'viewport_state'
+        )
+        if (!sceneWidget) return
+
+        const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
+
+        const widthWidget = node.widgets?.find((w) => w.name === 'width')
+        const heightWidget = node.widgets?.find((w) => w.name === 'height')
+        if (widthWidget && heightWidget) {
+          load3d.setTargetSize(
+            widthWidget.value as number,
+            heightWidget.value as number
+          )
+          widthWidget.callback = (value: number) => {
+            resolveLoad3d().setTargetSize(value, heightWidget.value as number)
+          }
+          heightWidget.callback = (value: number) => {
+            resolveLoad3d().setTargetSize(widthWidget.value as number, value)
+          }
         }
-      }
-    })
+
+        sceneWidget.serializeValue = async () => {
+          const currentLoad3d = nodeToLoad3dMap.get(node)
+          if (!currentLoad3d) {
+            console.error('No load3d instance found for node')
+            return null
+          }
+
+          const cameraConfig: CameraConfig = (node.properties[
+            'Camera Config'
+          ] as CameraConfig | undefined) || {
+            cameraType: currentLoad3d.getCurrentCameraType(),
+            fov: currentLoad3d.cameraManager.perspectiveCamera.fov
+          }
+          cameraConfig.state = currentLoad3d.getCameraState()
+          node.properties['Camera Config'] = cameraConfig
+
+          const modelInfo = currentLoad3d.getModelInfo()
+          const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
+
+          return {
+            image: '',
+            mask: '',
+            normal: '',
+            camera_info: cameraConfig.state || null,
+            recording: '',
+            model_3d_info
+          }
+        }
+
+        node.onExecuted = function (output: Preview3DAdvancedOutput) {
+          onExecuted?.call(this, output)
+
+          const result = output.result
+          if (!result?.[0]) {
+            const msg = t('toastMessages.unableToGetModelFilePath')
+            console.error(msg)
+            useToastStore().addAlert(msg)
+            return
+          }
+
+          applyPreview3DAdvancedResult(
+            node,
+            resolveLoad3d(),
+            result,
+            loadFolder,
+            comfyClass
+          )
+        }
+      })
+    }
   }
-})
+}
+
+useExtensionService().registerExtension(
+  createPreview3DAdvancedExtension(
+    'Preview3DAdvanced',
+    'Comfy.Preview3DAdvanced',
+    'temp'
+  )
+)
+useExtensionService().registerExtension(
+  createPreview3DAdvancedExtension(
+    'Save3DAdvanced',
+    'Comfy.Save3DAdvanced',
+    'output'
+  )
+)
diff --git a/src/extensions/core/load3d/ControlsManager.test.ts b/src/extensions/core/load3d/ControlsManager.test.ts
index 21791a124f..c324ba7812 100644
--- a/src/extensions/core/load3d/ControlsManager.test.ts
+++ b/src/extensions/core/load3d/ControlsManager.test.ts
@@ -43,13 +43,8 @@ function makeMockEventManager() {
   } satisfies EventManagerInterface
 }
 
-function makeRenderer(opts: { withParent?: boolean } = {}) {
-  const canvas = document.createElement('canvas')
-  if (opts.withParent) {
-    const parent = document.createElement('div')
-    parent.appendChild(canvas)
-  }
-  return { domElement: canvas } as unknown as THREE.WebGLRenderer
+function makeElement() {
+  return document.createElement('div')
 }
 
 describe('ControlsManager', () => {
@@ -64,33 +59,19 @@ describe('ControlsManager', () => {
   })
 
   describe('construction', () => {
-    it('attaches OrbitControls to the canvas parent when one exists', () => {
-      const renderer = makeRenderer({ withParent: true })
+    it('attaches OrbitControls to the interaction element', () => {
+      const element = makeElement()
 
-      manager = new ControlsManager(renderer, camera, events)
+      manager = new ControlsManager(element, camera, events)
 
-      expect(mockOrbitControls).toHaveBeenCalledWith(
-        camera,
-        renderer.domElement.parentElement
-      )
+      expect(mockOrbitControls).toHaveBeenCalledWith(camera, element)
       expect(manager.controls.enableDamping).toBe(true)
     })
-
-    it('falls back to the canvas itself when there is no parent', () => {
-      const renderer = makeRenderer({ withParent: false })
-
-      manager = new ControlsManager(renderer, camera, events)
-
-      expect(mockOrbitControls).toHaveBeenCalledWith(
-        camera,
-        renderer.domElement
-      )
-    })
   })
 
   describe('init', () => {
     it('emits cameraChanged with a perspective state when the controls fire end', () => {
-      manager = new ControlsManager(makeRenderer(), camera, events)
+      manager = new ControlsManager(makeElement(), camera, events)
       camera.position.set(1, 2, 3)
       camera.zoom = 1.25
       manager.controls.target.set(4, 5, 6)
@@ -109,7 +90,7 @@ describe('ControlsManager', () => {
     it('reports orthographic camera type when initialized with one', () => {
       const ortho = new THREE.OrthographicCamera()
       ortho.zoom = 0.5
-      manager = new ControlsManager(makeRenderer(), ortho, events)
+      manager = new ControlsManager(makeElement(), ortho, events)
       manager.init()
 
       ;(manager.controls as unknown as { fire(e: string): void }).fire('end')
@@ -123,7 +104,7 @@ describe('ControlsManager', () => {
 
   describe('updateCamera', () => {
     it('rebinds controls to the new camera, copies position from the previous one, and preserves the target', () => {
-      manager = new ControlsManager(makeRenderer(), camera, events)
+      manager = new ControlsManager(makeElement(), camera, events)
       camera.position.set(7, 8, 9)
       manager.controls.target.set(1, 1, 1)
 
@@ -139,7 +120,7 @@ describe('ControlsManager', () => {
 
   describe('update / reset', () => {
     it('update delegates to controls.update', () => {
-      manager = new ControlsManager(makeRenderer(), camera, events)
+      manager = new ControlsManager(makeElement(), camera, events)
 
       manager.update()
 
@@ -147,7 +128,7 @@ describe('ControlsManager', () => {
     })
 
     it('reset clears the target back to the origin and refreshes', () => {
-      manager = new ControlsManager(makeRenderer(), camera, events)
+      manager = new ControlsManager(makeElement(), camera, events)
       manager.controls.target.set(5, 6, 7)
 
       manager.reset()
@@ -159,7 +140,7 @@ describe('ControlsManager', () => {
 
   describe('dispose', () => {
     it('disposes the underlying OrbitControls', () => {
-      manager = new ControlsManager(makeRenderer(), camera, events)
+      manager = new ControlsManager(makeElement(), camera, events)
 
       manager.dispose()
 
@@ -169,7 +150,7 @@ describe('ControlsManager', () => {
 
   describe('detach / attach', () => {
     it('detach disables OrbitControls interaction', () => {
-      manager = new ControlsManager(makeRenderer(), camera, events)
+      manager = new ControlsManager(makeElement(), camera, events)
       expect(manager.controls.enabled).toBe(true)
 
       manager.detach()
@@ -178,7 +159,7 @@ describe('ControlsManager', () => {
     })
 
     it('attach re-enables OrbitControls interaction', () => {
-      manager = new ControlsManager(makeRenderer(), camera, events)
+      manager = new ControlsManager(makeElement(), camera, events)
       manager.detach()
 
       manager.attach()
diff --git a/src/extensions/core/load3d/ControlsManager.ts b/src/extensions/core/load3d/ControlsManager.ts
index d5da3f950e..498ef84718 100644
--- a/src/extensions/core/load3d/ControlsManager.ts
+++ b/src/extensions/core/load3d/ControlsManager.ts
@@ -12,15 +12,14 @@ export class ControlsManager implements ControlsManagerInterface {
   private camera: THREE.Camera
 
   constructor(
-    renderer: THREE.WebGLRenderer,
+    interactionElement: HTMLElement,
     camera: THREE.Camera,
     eventManager: EventManagerInterface
   ) {
     this.eventManager = eventManager
     this.camera = camera
 
-    const container = renderer.domElement.parentElement || renderer.domElement
-    this.controls = new OrbitControls(camera, container)
+    this.controls = new OrbitControls(camera, interactionElement)
     this.controls.enableDamping = true
   }
 
diff --git a/src/extensions/core/load3d/GizmoManager.test.ts b/src/extensions/core/load3d/GizmoManager.test.ts
index 9f5174eb21..d9c5a6c8b1 100644
--- a/src/extensions/core/load3d/GizmoManager.test.ts
+++ b/src/extensions/core/load3d/GizmoManager.test.ts
@@ -55,7 +55,7 @@ function makeMockOrbitControls() {
 
 describe('GizmoManager', () => {
   let scene: THREE.Scene
-  let renderer: THREE.WebGLRenderer
+  let interactionElement: HTMLElement
   let camera: THREE.PerspectiveCamera
   let orbitControls: ReturnType<typeof makeMockOrbitControls>
   let manager: GizmoManager
@@ -66,9 +66,7 @@ describe('GizmoManager', () => {
     vi.clearAllMocks()
 
     scene = new THREE.Scene()
-    renderer = {
-      domElement: document.createElement('canvas')
-    } as unknown as THREE.WebGLRenderer
+    interactionElement = document.createElement('div')
     camera = new THREE.PerspectiveCamera()
     orbitControls = makeMockOrbitControls()
     onTransformChange = vi.fn()
@@ -80,7 +78,7 @@ describe('GizmoManager', () => {
 
     manager = new GizmoManager(
       scene,
-      renderer,
+      interactionElement,
       orbitControls,
       () => camera,
       onTransformChange
diff --git a/src/extensions/core/load3d/GizmoManager.ts b/src/extensions/core/load3d/GizmoManager.ts
index e20c3ea0be..42e9c4cdcc 100644
--- a/src/extensions/core/load3d/GizmoManager.ts
+++ b/src/extensions/core/load3d/GizmoManager.ts
@@ -15,19 +15,19 @@ export class GizmoManager {
   private activeCamera: THREE.Camera
   private mode: GizmoMode = 'translate'
   private scene: THREE.Scene
-  private renderer: THREE.WebGLRenderer
+  private interactionElement: HTMLElement
   private orbitControls: OrbitControls
   private onTransformChange?: () => void
 
   constructor(
     scene: THREE.Scene,
-    renderer: THREE.WebGLRenderer,
+    interactionElement: HTMLElement,
     orbitControls: OrbitControls,
     getActiveCamera: () => THREE.Camera,
     onTransformChange?: () => void
   ) {
     this.scene = scene
-    this.renderer = renderer
+    this.interactionElement = interactionElement
     this.orbitControls = orbitControls
     this.activeCamera = getActiveCamera()
     this.onTransformChange = onTransformChange
@@ -36,7 +36,7 @@ export class GizmoManager {
   init(): void {
     this.transformControls = new TransformControls(
       this.activeCamera,
-      this.renderer.domElement
+      this.interactionElement
     )
 
     this.transformControls.addEventListener('dragging-changed', (event) => {
diff --git a/src/extensions/core/load3d/HDRIManager.test.ts b/src/extensions/core/load3d/HDRIManager.test.ts
index 39b0fd1f71..db5a7f1f2b 100644
--- a/src/extensions/core/load3d/HDRIManager.test.ts
+++ b/src/extensions/core/load3d/HDRIManager.test.ts
@@ -1,6 +1,8 @@
 import * as THREE from 'three'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { createRendererViewState } from '@/renderer/three/sharedWebGLRenderer'
+
 import { HDRIManager } from './HDRIManager'
 import Load3dUtils from './Load3dUtils'
 
@@ -76,7 +78,12 @@ describe('HDRIManager', () => {
       dispose: vi.fn()
     })
 
-    manager = new HDRIManager(scene, {} as THREE.WebGLRenderer, eventManager)
+    manager = new HDRIManager(
+      scene,
+      {} as THREE.WebGLRenderer,
+      createRendererViewState(),
+      eventManager
+    )
   })
 
   afterEach(() => {
diff --git a/src/extensions/core/load3d/HDRIManager.ts b/src/extensions/core/load3d/HDRIManager.ts
index 7e27fbce32..9cc63f07c4 100644
--- a/src/extensions/core/load3d/HDRIManager.ts
+++ b/src/extensions/core/load3d/HDRIManager.ts
@@ -2,12 +2,14 @@ import * as THREE from 'three'
 import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader'
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
 
+import type { RendererViewState } from '@/renderer/three/sharedWebGLRenderer'
+
 import Load3dUtils from './Load3dUtils'
 import type { EventManagerInterface } from './interfaces'
 
 export class HDRIManager {
   private scene: THREE.Scene
-  private renderer: THREE.WebGLRenderer
+  private viewState: RendererViewState
   private pmremGenerator: THREE.PMREMGenerator
   private eventManager: EventManagerInterface
 
@@ -33,10 +35,11 @@ export class HDRIManager {
   constructor(
     scene: THREE.Scene,
     renderer: THREE.WebGLRenderer,
+    viewState: RendererViewState,
     eventManager: EventManagerInterface
   ) {
     this.scene = scene
-    this.renderer = renderer
+    this.viewState = viewState
     this.pmremGenerator = new THREE.PMREMGenerator(renderer)
     this.pmremGenerator.compileEquirectangularShader()
     this.eventManager = eventManager
@@ -101,8 +104,8 @@ export class HDRIManager {
     this.scene.environment = envMap
     this.scene.environmentIntensity = this._intensity
     this.scene.background = this._showAsBackground ? this.hdriTexture : null
-    this.renderer.toneMapping = THREE.ACESFilmicToneMapping
-    this.renderer.toneMappingExposure = 1.0
+    this.viewState.toneMapping = THREE.ACESFilmicToneMapping
+    this.viewState.toneMappingExposure = 1.0
     this.eventManager.emitEvent('hdriChange', {
       enabled: this._isEnabled,
       showAsBackground: this._showAsBackground
@@ -114,8 +117,8 @@ export class HDRIManager {
     if (this.scene.background === this.hdriTexture) {
       this.scene.background = null
     }
-    this.renderer.toneMapping = THREE.NoToneMapping
-    this.renderer.toneMappingExposure = 1.0
+    this.viewState.toneMapping = THREE.NoToneMapping
+    this.viewState.toneMappingExposure = 1.0
     this.eventManager.emitEvent('hdriChange', {
       enabled: false,
       showAsBackground: this._showAsBackground
diff --git a/src/extensions/core/load3d/Load3d.test.ts b/src/extensions/core/load3d/Load3d.test.ts
index db6d8c3643..5f5908428c 100644
--- a/src/extensions/core/load3d/Load3d.test.ts
+++ b/src/extensions/core/load3d/Load3d.test.ts
@@ -334,7 +334,7 @@ describe('Load3d', () => {
       const sceneResize = vi.fn()
 
       Object.assign(ctx.load3d, {
-        renderer: { domElement: canvas, setSize, setPixelRatio: vi.fn() },
+        view: { canvas, setSize },
         targetWidth: 400,
         targetHeight: 200,
         targetAspectRatio: 2,
@@ -361,26 +361,21 @@ describe('Load3d', () => {
       const updateAspectRatio = vi.fn()
       const renderBackground = vi.fn()
 
-      const canvas = document.createElement('canvas')
-      Object.defineProperty(canvas, 'clientWidth', {
-        value: 800,
-        configurable: true
-      })
-      Object.defineProperty(canvas, 'clientHeight', {
-        value: 600,
-        configurable: true
-      })
       const scene = {} as THREE.Scene
 
       Object.assign(ctx.load3d, {
-        renderer: {
-          domElement: canvas,
-          setViewport,
-          setScissor,
-          setScissorTest,
-          setClearColor,
-          clear,
-          render
+        view: {
+          width: 800,
+          height: 600,
+          state: { clearColor: new THREE.Color(0x000000), clearAlpha: 0 },
+          renderer: {
+            setViewport,
+            setScissor,
+            setScissorTest,
+            setClearColor,
+            clear,
+            render
+          }
         },
         targetWidth: 400,
         targetHeight: 200,
@@ -415,7 +410,7 @@ describe('Load3d', () => {
       })
 
       Object.assign(ctx.load3d, {
-        renderer: { domElement: canvas },
+        view: { canvas },
         targetWidth: 400,
         targetHeight: 200,
         targetAspectRatio: 2,
@@ -438,7 +433,7 @@ describe('Load3d', () => {
       expect(args[3]).toBe(400)
     })
 
-    it('handleResize calls setPixelRatio with the value returned by getZoomScaleCallback', () => {
+    it('handleResize scales the view size by getZoomScaleCallback', () => {
       delete (ctx.load3d as { handleResize?: unknown }).handleResize
 
       const parent = document.createElement('div')
@@ -453,10 +448,10 @@ describe('Load3d', () => {
       const canvas = document.createElement('canvas')
       parent.appendChild(canvas)
 
-      const setPixelRatio = vi.fn()
+      const setSize = vi.fn()
 
       Object.assign(ctx.load3d, {
-        renderer: { domElement: canvas, setSize: vi.fn(), setPixelRatio },
+        view: { canvas, setSize },
         getZoomScaleCallback: () => 2.5,
         targetWidth: 0,
         targetHeight: 0,
@@ -467,10 +462,10 @@ describe('Load3d', () => {
 
       ctx.load3d.handleResize()
 
-      expect(setPixelRatio).toHaveBeenCalledWith(2.5)
+      expect(setSize).toHaveBeenCalledWith(1000, 1000)
     })
 
-    it('handleResize defaults to pixelRatio 1 when no getZoomScaleCallback is provided', () => {
+    it('handleResize caps the zoom scale at 3', () => {
       delete (ctx.load3d as { handleResize?: unknown }).handleResize
 
       const parent = document.createElement('div')
@@ -485,10 +480,42 @@ describe('Load3d', () => {
       const canvas = document.createElement('canvas')
       parent.appendChild(canvas)
 
-      const setPixelRatio = vi.fn()
+      const setSize = vi.fn()
 
       Object.assign(ctx.load3d, {
-        renderer: { domElement: canvas, setSize: vi.fn(), setPixelRatio },
+        view: { canvas, setSize },
+        getZoomScaleCallback: () => 10,
+        targetWidth: 0,
+        targetHeight: 0,
+        isViewerMode: false,
+        cameraManager: { ...ctx.cameraManager, handleResize: vi.fn() },
+        sceneManager: { ...ctx.sceneManager, handleResize: vi.fn() }
+      })
+
+      ctx.load3d.handleResize()
+
+      expect(setSize).toHaveBeenCalledWith(1200, 1200)
+    })
+
+    it('handleResize defaults to scale 1 when no getZoomScaleCallback is provided', () => {
+      delete (ctx.load3d as { handleResize?: unknown }).handleResize
+
+      const parent = document.createElement('div')
+      Object.defineProperty(parent, 'clientWidth', {
+        value: 400,
+        configurable: true
+      })
+      Object.defineProperty(parent, 'clientHeight', {
+        value: 400,
+        configurable: true
+      })
+      const canvas = document.createElement('canvas')
+      parent.appendChild(canvas)
+
+      const setSize = vi.fn()
+
+      Object.assign(ctx.load3d, {
+        view: { canvas, setSize },
         getZoomScaleCallback: undefined,
         targetWidth: 0,
         targetHeight: 0,
@@ -499,7 +526,7 @@ describe('Load3d', () => {
 
       ctx.load3d.handleResize()
 
-      expect(setPixelRatio).toHaveBeenCalledWith(1)
+      expect(setSize).toHaveBeenCalledWith(400, 400)
     })
   })
 
@@ -510,7 +537,8 @@ describe('Load3d', () => {
       const viewHelperRender = vi.fn()
       const controlsUpdate = vi.fn()
       const renderMainScene = vi.fn()
-      const resetViewport = vi.fn()
+      const beginRender = vi.fn()
+      const blit = vi.fn()
 
       Object.assign(ctx.load3d, {
         STATUS_MOUSE_ON_NODE: true,
@@ -525,13 +553,16 @@ describe('Load3d', () => {
         },
         viewHelperManager: {
           update: viewHelperUpdate,
-          viewHelper: { render: viewHelperRender }
+          render: viewHelperRender
         },
         controlsManager: { update: controlsUpdate },
         recordingManager: { getIsRecording: vi.fn(() => false) },
         renderMainScene,
-        resetViewport,
-        renderer: {}
+        view: {
+          beginRender,
+          blit,
+          renderer: { setScissorTest: vi.fn() }
+        }
       })
 
       ;(ctx.load3d as unknown as { startAnimation(): void }).startAnimation()
@@ -546,9 +577,10 @@ describe('Load3d', () => {
       expect(animationUpdate).toHaveBeenCalledOnce()
       expect(viewHelperUpdate).toHaveBeenCalledOnce()
       expect(controlsUpdate).toHaveBeenCalledOnce()
+      expect(beginRender).toHaveBeenCalledOnce()
       expect(renderMainScene).toHaveBeenCalledOnce()
-      expect(resetViewport).toHaveBeenCalledOnce()
       expect(viewHelperRender).toHaveBeenCalledOnce()
+      expect(blit).toHaveBeenCalledOnce()
 
       // Cancel the queued rAF so the test doesn't leak frames.
       loop.stop()
@@ -560,12 +592,10 @@ describe('Load3d', () => {
 
       Object.assign(ctx.load3d, {
         renderLoop: { stop },
-        resizeObserver: null,
         contextMenuAbortController: null,
-        renderer: {
-          forceContextLoss: vi.fn(),
-          dispose: vi.fn(),
-          domElement: canvas
+        view: {
+          canvas,
+          dispose: vi.fn()
         },
         sceneManager: { ...ctx.sceneManager, dispose: vi.fn() },
         cameraManager: { ...ctx.cameraManager, dispose: vi.fn() },
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 71b0b0625d..cf48f03ba9 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -67,7 +67,7 @@ class Load3d extends Viewport3d {
   private hasLoadedModel: boolean = false
 
   constructor(
-    container: Element | HTMLElement,
+    container: HTMLElement,
     deps: Load3dDeps,
     options: Load3DOptions = {}
   ) {
@@ -255,8 +255,8 @@ class Load3d extends Viewport3d {
       this.sceneManager.backgroundTexture &&
       this.sceneManager.backgroundMesh
     ) {
-      const containerWidth = this.renderer.domElement.clientWidth
-      const containerHeight = this.renderer.domElement.clientHeight
+      const containerWidth = this.domElement.clientWidth
+      const containerHeight = this.domElement.clientHeight
 
       if (this.shouldMaintainAspectRatio()) {
         const { width, height } = computeLetterboxedViewport(
diff --git a/src/extensions/core/load3d/MeshModelAdapter.test.ts b/src/extensions/core/load3d/MeshModelAdapter.test.ts
index 7be8ed3083..b6bcb9ba52 100644
--- a/src/extensions/core/load3d/MeshModelAdapter.test.ts
+++ b/src/extensions/core/load3d/MeshModelAdapter.test.ts
@@ -108,6 +108,7 @@ describe('MeshModelAdapter', () => {
       expect(adapter.capabilities.exportable).toBe(true)
       expect([...adapter.capabilities.materialModes]).toEqual([
         'original',
+        'clay',
         'normal',
         'wireframe'
       ])
diff --git a/src/extensions/core/load3d/MeshModelAdapter.ts b/src/extensions/core/load3d/MeshModelAdapter.ts
index 515d76bdde..701d691c00 100644
--- a/src/extensions/core/load3d/MeshModelAdapter.ts
+++ b/src/extensions/core/load3d/MeshModelAdapter.ts
@@ -24,7 +24,7 @@ export class MeshModelAdapter implements ModelAdapter {
     gizmoTransform: true,
     lighting: true,
     exportable: true,
-    materialModes: ['original', 'normal', 'wireframe'],
+    materialModes: ['original', 'clay', 'normal', 'wireframe'],
     fitTargetSize: 5
   }
 
diff --git a/src/extensions/core/load3d/ModelAdapter.test.ts b/src/extensions/core/load3d/ModelAdapter.test.ts
index 6d020f1672..35718abb82 100644
--- a/src/extensions/core/load3d/ModelAdapter.test.ts
+++ b/src/extensions/core/load3d/ModelAdapter.test.ts
@@ -19,6 +19,7 @@ describe('DEFAULT_MODEL_CAPABILITIES', () => {
     expect(DEFAULT_MODEL_CAPABILITIES.exportable).toBe(true)
     expect([...DEFAULT_MODEL_CAPABILITIES.materialModes]).toEqual([
       'original',
+      'clay',
       'normal',
       'wireframe'
     ])
diff --git a/src/extensions/core/load3d/ModelAdapter.ts b/src/extensions/core/load3d/ModelAdapter.ts
index d83c1a72e0..faea503a38 100644
--- a/src/extensions/core/load3d/ModelAdapter.ts
+++ b/src/extensions/core/load3d/ModelAdapter.ts
@@ -60,7 +60,7 @@ export const DEFAULT_MODEL_CAPABILITIES: ModelAdapterCapabilities = {
   gizmoTransform: true,
   lighting: true,
   exportable: true,
-  materialModes: ['original', 'normal', 'wireframe'],
+  materialModes: ['original', 'clay', 'normal', 'wireframe'],
   fitTargetSize: 5
 }
 
diff --git a/src/extensions/core/load3d/RecordingManager.test.ts b/src/extensions/core/load3d/RecordingManager.test.ts
index 06d6508144..a5b0960888 100644
--- a/src/extensions/core/load3d/RecordingManager.test.ts
+++ b/src/extensions/core/load3d/RecordingManager.test.ts
@@ -64,16 +64,16 @@ function makeStream(): MediaStream {
   } as unknown as MediaStream
 }
 
-function makeRenderer(): THREE.WebGLRenderer {
+function makeSourceCanvas(): HTMLCanvasElement {
   const canvas = document.createElement('canvas')
   canvas.width = 800
   canvas.height = 600
-  return { domElement: canvas } as unknown as THREE.WebGLRenderer
+  return canvas
 }
 
 describe('RecordingManager', () => {
   let scene: THREE.Scene
-  let renderer: THREE.WebGLRenderer
+  let sourceCanvas: HTMLCanvasElement
   let events: ReturnType<typeof makeMockEventManager>
   let manager: RecordingManager
   let rafSpy: ReturnType<typeof vi.spyOn>
@@ -104,9 +104,9 @@ describe('RecordingManager', () => {
     vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
 
     scene = new THREE.Scene()
-    renderer = makeRenderer()
+    sourceCanvas = makeSourceCanvas()
     events = makeMockEventManager()
-    manager = new RecordingManager(scene, renderer, events)
+    manager = new RecordingManager(scene, sourceCanvas, events)
   })
 
   afterEach(() => {
diff --git a/src/extensions/core/load3d/RecordingManager.ts b/src/extensions/core/load3d/RecordingManager.ts
index f5416c59d6..a5ae79cdf4 100644
--- a/src/extensions/core/load3d/RecordingManager.ts
+++ b/src/extensions/core/load3d/RecordingManager.ts
@@ -11,7 +11,7 @@ export class RecordingManager {
   private recordingStream: MediaStream | null = null
   private recordingIndicator: THREE.Sprite | null = null
   private scene: THREE.Scene
-  private renderer: THREE.WebGLRenderer
+  private sourceCanvas: HTMLCanvasElement
   private eventManager: EventManagerInterface
   private recordingStartTime: number = 0
   private recordingDuration: number = 0
@@ -21,11 +21,11 @@ export class RecordingManager {
 
   constructor(
     scene: THREE.Scene,
-    renderer: THREE.WebGLRenderer,
+    sourceCanvas: HTMLCanvasElement,
     eventManager: EventManagerInterface
   ) {
     this.scene = scene
-    this.renderer = renderer
+    this.sourceCanvas = sourceCanvas
     this.eventManager = eventManager
     this.setupRecordingIndicator()
   }
@@ -61,7 +61,7 @@ export class RecordingManager {
     }
 
     try {
-      const sourceCanvas = this.renderer.domElement
+      const sourceCanvas = this.sourceCanvas
       const sourceWidth = sourceCanvas.width
       const sourceHeight = sourceCanvas.height
 
diff --git a/src/extensions/core/load3d/SceneManager.test.ts b/src/extensions/core/load3d/SceneManager.test.ts
index 382f81e16d..563a700ed8 100644
--- a/src/extensions/core/load3d/SceneManager.test.ts
+++ b/src/extensions/core/load3d/SceneManager.test.ts
@@ -3,6 +3,9 @@ import * as THREE from 'three'
 import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import type { RendererView } from '@/renderer/three/RendererView'
+import { createRendererViewState } from '@/renderer/three/sharedWebGLRenderer'
+
 import type { EventManagerInterface } from './interfaces'
 import Load3dUtils from './Load3dUtils'
 import { SceneManager } from './SceneManager'
@@ -65,6 +68,32 @@ function makeMockEventManager() {
   } satisfies EventManagerInterface
 }
 
+function makeView(
+  renderer: THREE.WebGLRenderer,
+  width = 400,
+  height = 300
+): RendererView {
+  const canvas = document.createElement('canvas')
+  Object.defineProperty(canvas, 'clientWidth', {
+    configurable: true,
+    value: width
+  })
+  Object.defineProperty(canvas, 'clientHeight', {
+    configurable: true,
+    value: height
+  })
+  return {
+    renderer,
+    canvas,
+    state: createRendererViewState(),
+    width,
+    height,
+    beginRender: vi.fn(),
+    blit: vi.fn(),
+    setSize: vi.fn()
+  } as unknown as RendererView
+}
+
 function makeRenderer() {
   const canvas = document.createElement('canvas')
   Object.defineProperty(canvas, 'clientWidth', {
@@ -120,7 +149,7 @@ describe('SceneManager', () => {
     camera = new THREE.PerspectiveCamera()
     events = makeMockEventManager()
     manager = new SceneManager(
-      renderer,
+      makeView(renderer),
       () => camera,
       () => ({}) as unknown as OrbitControls,
       events
@@ -592,20 +621,22 @@ describe('SceneManager', () => {
 
 function makeSceneManager(
   pixelRatio = 1,
-  cameraOverride?: THREE.PerspectiveCamera | THREE.OrthographicCamera
+  cameraOverride?: THREE.PerspectiveCamera | THREE.OrthographicCamera,
+  viewSize?: { width: number; height: number }
 ) {
   const renderer = makeMockRenderer(pixelRatio)
+  const view = makeView(renderer, viewSize?.width, viewSize?.height)
   const camera = cameraOverride ?? new THREE.PerspectiveCamera()
   const eventManager = makeMockEventManager()
   const manager = new SceneManager(
-    renderer,
+    view,
     () => camera,
     vi.fn() as unknown as () => InstanceType<
       typeof import('three/examples/jsm/controls/OrbitControls').OrbitControls
     >,
     eventManager
   )
-  return { manager, renderer, camera, eventManager }
+  return { manager, renderer, view, camera, eventManager }
 }
 
 describe('SceneManager.captureScene', () => {
@@ -648,6 +679,19 @@ describe('SceneManager.captureScene', () => {
     expect(calls.at(-1)).toEqual([400, 300])
   })
 
+  it('restores the view state first and resizes the background to the view size, not the shared buffer size', async () => {
+    const { manager, view } = makeSceneManager(1, undefined, {
+      width: 640,
+      height: 480
+    })
+    const handleResize = vi.spyOn(manager, 'handleResize')
+
+    await manager.captureScene(1920, 1080)
+
+    expect(view.beginRender).toHaveBeenCalledOnce()
+    expect(handleResize).toHaveBeenCalledWith(640, 480)
+  })
+
   it('restores perspective camera aspect after capture', async () => {
     const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
     const { manager } = makeSceneManager(1, camera)
diff --git a/src/extensions/core/load3d/SceneManager.ts b/src/extensions/core/load3d/SceneManager.ts
index 243ca72a8d..4b669b0d02 100644
--- a/src/extensions/core/load3d/SceneManager.ts
+++ b/src/extensions/core/load3d/SceneManager.ts
@@ -2,6 +2,8 @@ import { SparkRenderer } from '@sparkjsdev/spark'
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 
+import type { RendererView } from '@/renderer/three/RendererView'
+
 import Load3dUtils from './Load3dUtils'
 import {
   type BackgroundRenderModeType,
@@ -38,16 +40,18 @@ export class SceneManager implements SceneManagerInterface {
 
   private eventManager: EventManagerInterface
   private renderer: THREE.WebGLRenderer
+  private view: RendererView
 
   private getActiveCamera: () => THREE.Camera
 
   constructor(
-    renderer: THREE.WebGLRenderer,
+    view: RendererView,
     getActiveCamera: () => THREE.Camera,
     _getControls: () => OrbitControls,
     eventManager: EventManagerInterface
   ) {
-    this.renderer = renderer
+    this.view = view
+    this.renderer = view.renderer
     this.eventManager = eventManager
     this.scene = new THREE.Scene()
 
@@ -65,7 +69,7 @@ export class SceneManager implements SceneManagerInterface {
     // forceRender directly into onDirty caused a per-frame render-setDirty
     // cascade that made splats visibly "balloon" during camera interaction.
     this.sparkRenderer = new SparkRenderer({
-      renderer,
+      renderer: view.renderer,
       onDirty: () => {
         const resolve = this.nextSparkDirtyResolve
         this.nextSparkDirtyResolve = null
@@ -104,7 +108,8 @@ export class SceneManager implements SceneManagerInterface {
     this.backgroundMesh.position.set(0, 0, 0)
     this.backgroundScene.add(this.backgroundMesh)
 
-    this.renderer.setClearColor(0x000000, 0)
+    this.view.state.clearColor.set(0x000000)
+    this.view.state.clearAlpha = 0
   }
 
   init(): void {}
@@ -250,8 +255,8 @@ export class SceneManager implements SceneManagerInterface {
         this.updateBackgroundSize(
           this.backgroundTexture,
           this.backgroundMesh,
-          this.renderer.domElement.clientWidth,
-          this.renderer.domElement.clientHeight
+          this.view.canvas.clientWidth,
+          this.view.canvas.clientHeight
         )
       }
 
@@ -369,6 +374,8 @@ export class SceneManager implements SceneManagerInterface {
     width: number,
     height: number
   ): Promise<{ scene: string; mask: string; normal: string }> {
+    this.view.beginRender()
+
     const originalSize = new THREE.Vector2()
     this.renderer.getSize(originalSize)
     const originalPixelRatio = this.renderer.getPixelRatio()
@@ -495,7 +502,10 @@ export class SceneManager implements SceneManagerInterface {
       this.renderer.setPixelRatio(originalPixelRatio)
       this.renderer.setSize(originalSize.x, originalSize.y)
       this.renderer.outputColorSpace = originalOutputColorSpace
-      this.handleResize(originalSize.x, originalSize.y)
+      this.handleResize(
+        this.view.canvas.clientWidth,
+        this.view.canvas.clientHeight
+      )
     }
   }
 
diff --git a/src/extensions/core/load3d/SceneModelManager.test.ts b/src/extensions/core/load3d/SceneModelManager.test.ts
index 62442caeb5..4fc08b2b95 100644
--- a/src/extensions/core/load3d/SceneModelManager.test.ts
+++ b/src/extensions/core/load3d/SceneModelManager.test.ts
@@ -2,18 +2,13 @@ import { SparkRenderer } from '@sparkjsdev/spark'
 import * as THREE from 'three'
 import { describe, expect, it, vi } from 'vitest'
 
+import { createRendererViewState } from '@/renderer/three/sharedWebGLRenderer'
+
 import { DEFAULT_MODEL_CAPABILITIES } from './ModelAdapter'
 import type { ModelAdapterCapabilities } from './ModelAdapter'
 import { SceneModelManager } from './SceneModelManager'
 import type { EventManagerInterface } from './interfaces'
 
-function createMockRenderer(): THREE.WebGLRenderer {
-  return {
-    outputColorSpace: THREE.SRGBColorSpace,
-    dispose: vi.fn()
-  } as unknown as THREE.WebGLRenderer
-}
-
 function createMockEventManager(): EventManagerInterface {
   return {
     addEventListener: vi.fn(),
@@ -30,7 +25,7 @@ function createManager(
   } = {}
 ) {
   const scene = overrides.scene ?? new THREE.Scene()
-  const renderer = createMockRenderer()
+  const viewState = createRendererViewState()
   const eventManager = overrides.eventManager ?? createMockEventManager()
   const camera = new THREE.PerspectiveCamera()
   const getActiveCamera = () => camera
@@ -43,7 +38,7 @@ function createManager(
 
   const manager = new SceneModelManager(
     scene,
-    renderer,
+    viewState,
     eventManager,
     getActiveCamera,
     setupCamera,
@@ -54,7 +49,7 @@ function createManager(
   return {
     manager,
     scene,
-    renderer,
+    viewState,
     eventManager,
     camera,
     setupCamera,
@@ -67,7 +62,6 @@ function createManagerWithPose(opts: {
   pose: { size: THREE.Vector3; center: THREE.Vector3 } | null
 }) {
   const scene = new THREE.Scene()
-  const renderer = createMockRenderer()
   const eventManager = createMockEventManager()
   const camera = new THREE.PerspectiveCamera()
   const setupCamera = vi.fn()
@@ -79,7 +73,7 @@ function createManagerWithPose(opts: {
 
   const manager = new SceneModelManager(
     scene,
-    renderer,
+    createRendererViewState(),
     eventManager,
     () => camera,
     setupCamera,
@@ -474,7 +468,7 @@ describe('SceneModelManager', () => {
     })
 
     it('switches to depth material', async () => {
-      const { manager, renderer } = createManager()
+      const { manager, viewState } = createManager()
       const model = createMeshModel()
       await manager.setupModel(model)
 
@@ -482,7 +476,7 @@ describe('SceneModelManager', () => {
 
       const mesh = model.children[0] as THREE.Mesh
       expect(mesh.material).toBeInstanceOf(THREE.MeshDepthMaterial)
-      expect(renderer.outputColorSpace).toBe(THREE.LinearSRGBColorSpace)
+      expect(viewState.outputColorSpace).toBe(THREE.LinearSRGBColorSpace)
     })
 
     it('restores original material when switching back', async () => {
@@ -513,16 +507,16 @@ describe('SceneModelManager', () => {
       expect((mesh.material as THREE.MeshStandardMaterial).map).toBe(texture)
     })
 
-    it('sets renderer color space to SRGB for non-depth modes', async () => {
-      const { manager, renderer } = createManager()
+    it('sets view color space to SRGB for non-depth modes', async () => {
+      const { manager, viewState } = createManager()
       const model = createMeshModel()
       await manager.setupModel(model)
 
       manager.setMaterialMode('depth')
-      expect(renderer.outputColorSpace).toBe(THREE.LinearSRGBColorSpace)
+      expect(viewState.outputColorSpace).toBe(THREE.LinearSRGBColorSpace)
 
       manager.setMaterialMode('normal')
-      expect(renderer.outputColorSpace).toBe(THREE.SRGBColorSpace)
+      expect(viewState.outputColorSpace).toBe(THREE.SRGBColorSpace)
     })
 
     it('delegates to handlePLYModeSwitch for BufferGeometry original model', async () => {
diff --git a/src/extensions/core/load3d/SceneModelManager.ts b/src/extensions/core/load3d/SceneModelManager.ts
index 04cb50ff59..4c41f81760 100644
--- a/src/extensions/core/load3d/SceneModelManager.ts
+++ b/src/extensions/core/load3d/SceneModelManager.ts
@@ -2,6 +2,8 @@ import { SparkRenderer } from '@sparkjsdev/spark'
 import * as THREE from 'three'
 import type { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
 
+import type { RendererViewState } from '@/renderer/three/sharedWebGLRenderer'
+
 import { DEFAULT_MODEL_CAPABILITIES } from './ModelAdapter'
 import type { ModelAdapterCapabilities } from './ModelAdapter'
 import { buildPointCloudForMaterialMode } from './PointCloudModelAdapter'
@@ -29,6 +31,7 @@ export class SceneModelManager implements ModelManagerInterface {
   standardMaterial: THREE.MeshStandardMaterial
   wireframeMaterial: THREE.MeshBasicMaterial
   depthMaterial: THREE.MeshDepthMaterial
+  clayMaterial: THREE.MeshStandardMaterial
   originalFileName: string | null = null
   originalURL: string | null = null
   appliedTexture: THREE.Texture | null = null
@@ -37,7 +40,7 @@ export class SceneModelManager implements ModelManagerInterface {
   showSkeleton: boolean = false
 
   private scene: THREE.Scene
-  private renderer: THREE.WebGLRenderer
+  private viewState: RendererViewState
   private eventManager: EventManagerInterface
   private activeCamera: THREE.Camera
   private setupCamera: (size: THREE.Vector3, center: THREE.Vector3) => void
@@ -52,7 +55,7 @@ export class SceneModelManager implements ModelManagerInterface {
 
   constructor(
     scene: THREE.Scene,
-    renderer: THREE.WebGLRenderer,
+    viewState: RendererViewState,
     eventManager: EventManagerInterface,
     getActiveCamera: () => THREE.Camera,
     setupCamera: (size: THREE.Vector3, center: THREE.Vector3) => void,
@@ -68,7 +71,7 @@ export class SceneModelManager implements ModelManagerInterface {
     } | null = () => null
   ) {
     this.scene = scene
-    this.renderer = renderer
+    this.viewState = viewState
     this.eventManager = eventManager
     this.activeCamera = getActiveCamera()
     this.setupCamera = setupCamera
@@ -98,8 +101,44 @@ export class SceneModelManager implements ModelManagerInterface {
       depthPacking: THREE.BasicDepthPacking,
       side: THREE.DoubleSide
     })
+    this.depthMaterial.onBeforeCompile = (shader) => {
+      shader.uniforms.cameraType = {
+        value: this.activeCamera instanceof THREE.OrthographicCamera ? 1.0 : 0.0
+      }
+
+      shader.fragmentShader = `
+                uniform float cameraType;
+                ${shader.fragmentShader}
+              `
+
+      shader.fragmentShader = shader.fragmentShader.replace(
+        /gl_FragColor\s*=\s*vec4\(\s*vec3\(\s*1.0\s*-\s*fragCoordZ\s*\)\s*,\s*opacity\s*\)\s*;/,
+        `
+                  float depth = 1.0 - fragCoordZ;
+                  if (cameraType > 0.5) {
+                    depth = pow(depth, 400.0);
+                  } else {
+                    depth = pow(depth, 0.6);
+                  }
+                  gl_FragColor = vec4(vec3(depth), opacity);
+                `
+      )
+    }
+    this.depthMaterial.customProgramCacheKey = () => {
+      return this.activeCamera instanceof THREE.OrthographicCamera
+        ? 'ortho'
+        : 'persp'
+    }
 
     this.standardMaterial = this.createSTLMaterial()
+
+    this.clayMaterial = new THREE.MeshStandardMaterial({
+      color: 0x888888,
+      metalness: 0.0,
+      roughness: 0.9,
+      flatShading: false,
+      side: THREE.DoubleSide
+    })
   }
 
   init(): void {}
@@ -110,6 +149,7 @@ export class SceneModelManager implements ModelManagerInterface {
     this.standardMaterial.dispose()
     this.wireframeMaterial.dispose()
     this.depthMaterial.dispose()
+    this.clayMaterial.dispose()
 
     if (this.appliedTexture) {
       this.appliedTexture.dispose()
@@ -196,9 +236,9 @@ export class SceneModelManager implements ModelManagerInterface {
     }
 
     if (mode === 'depth') {
-      this.renderer.outputColorSpace = THREE.LinearSRGBColorSpace
+      this.viewState.outputColorSpace = THREE.LinearSRGBColorSpace
     } else {
-      this.renderer.outputColorSpace = THREE.SRGBColorSpace
+      this.viewState.outputColorSpace = THREE.SRGBColorSpace
     }
 
     if (this.currentModel) {
@@ -212,68 +252,25 @@ export class SceneModelManager implements ModelManagerInterface {
             if (!this.originalMaterials.has(child)) {
               this.originalMaterials.set(child, child.material)
             }
-            const depthMat = new THREE.MeshDepthMaterial({
-              depthPacking: THREE.BasicDepthPacking,
-              side: THREE.DoubleSide
-            })
-
-            depthMat.onBeforeCompile = (shader) => {
-              shader.uniforms.cameraType = {
-                value:
-                  this.activeCamera instanceof THREE.OrthographicCamera
-                    ? 1.0
-                    : 0.0
-              }
-
-              shader.fragmentShader = `
-                uniform float cameraType;
-                ${shader.fragmentShader}
-              `
-
-              shader.fragmentShader = shader.fragmentShader.replace(
-                /gl_FragColor\s*=\s*vec4\(\s*vec3\(\s*1.0\s*-\s*fragCoordZ\s*\)\s*,\s*opacity\s*\)\s*;/,
-                `
-                  float depth = 1.0 - fragCoordZ;
-                  if (cameraType > 0.5) {
-                    depth = pow(depth, 400.0);
-                  } else {
-                    depth = pow(depth, 0.6);
-                  }
-                  gl_FragColor = vec4(vec3(depth), opacity);
-                `
-              )
-            }
-
-            depthMat.customProgramCacheKey = () => {
-              return this.activeCamera instanceof THREE.OrthographicCamera
-                ? 'ortho'
-                : 'persp'
-            }
-
-            child.material = depthMat
+            child.material = this.depthMaterial
             break
           case 'normal':
             if (!this.originalMaterials.has(child)) {
               this.originalMaterials.set(child, child.material)
             }
-            child.material = new THREE.MeshNormalMaterial({
-              flatShading: false,
-              side: THREE.DoubleSide,
-              normalScale: new THREE.Vector2(1, 1),
-              transparent: false,
-              opacity: 1.0
-            })
+            child.material = this.normalMaterial
             break
           case 'wireframe':
             if (!this.originalMaterials.has(child)) {
               this.originalMaterials.set(child, child.material)
             }
-            child.material = new THREE.MeshBasicMaterial({
-              color: 0xffffff,
-              wireframe: true,
-              transparent: false,
-              opacity: 1.0
-            })
+            child.material = this.wireframeMaterial
+            break
+          case 'clay':
+            if (!this.originalMaterials.has(child)) {
+              this.originalMaterials.set(child, child.material)
+            }
+            child.material = this.clayMaterial
             break
           case 'original':
           case 'pointCloud':
diff --git a/src/extensions/core/load3d/ViewHelperManager.ts b/src/extensions/core/load3d/ViewHelperManager.ts
index f7824f1685..f9af740f03 100644
--- a/src/extensions/core/load3d/ViewHelperManager.ts
+++ b/src/extensions/core/load3d/ViewHelperManager.ts
@@ -15,6 +15,16 @@ export class ViewHelperManager implements ViewHelperManagerInterface {
   private getControls: () => OrbitControls
   private eventManager: EventManagerInterface
 
+  private readonly helperCamera = new THREE.OrthographicCamera(
+    -2,
+    2,
+    2,
+    -2,
+    0,
+    4
+  )
+  private readonly savedViewport = new THREE.Vector4()
+
   constructor(
     _renderer: THREE.WebGLRenderer,
     getActiveCamera: () => THREE.Camera,
@@ -24,10 +34,25 @@ export class ViewHelperManager implements ViewHelperManagerInterface {
     this.getActiveCamera = getActiveCamera
     this.getControls = getControls
     this.eventManager = eventManager
+    this.helperCamera.position.set(0, 0, 2)
   }
 
   init(): void {}
 
+  render(renderer: THREE.WebGLRenderer, size: number): void {
+    const helper = this.viewHelper
+    if (!helper.isViewHelper) return
+
+    helper.quaternion.copy(this.getActiveCamera().quaternion).invert()
+    helper.updateMatrixWorld()
+
+    renderer.clearDepth()
+    renderer.getViewport(this.savedViewport)
+    renderer.setViewport(0, 0, size, size)
+    renderer.render(helper, this.helperCamera)
+    renderer.setViewport(this.savedViewport)
+  }
+
   dispose(): void {
     if (this.viewHelper) {
       this.viewHelper.dispose()
diff --git a/src/extensions/core/load3d/Viewport3d.test.ts b/src/extensions/core/load3d/Viewport3d.test.ts
index f9299eb658..cbf1bbb058 100644
--- a/src/extensions/core/load3d/Viewport3d.test.ts
+++ b/src/extensions/core/load3d/Viewport3d.test.ts
@@ -394,14 +394,10 @@ describe('Viewport3d', () => {
         initialRenderTimer: null,
         startAnimation: vi.fn(),
         renderLoop: { stop: vi.fn() },
-        resizeObserver: null,
         disposeContextMenuGuard: null,
-        renderer: {
-          forceContextLoss: vi.fn(),
-          dispose: vi.fn(),
-          domElement: Object.assign(document.createElement('canvas'), {
-            remove: vi.fn()
-          })
+        view: {
+          canvas: document.createElement('canvas'),
+          dispose: vi.fn()
         },
         disposeManagers: vi.fn()
       })
diff --git a/src/extensions/core/load3d/Viewport3d.ts b/src/extensions/core/load3d/Viewport3d.ts
index 45d2bcc9dc..50d8884cc6 100644
--- a/src/extensions/core/load3d/Viewport3d.ts
+++ b/src/extensions/core/load3d/Viewport3d.ts
@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 
-import { WebGLViewport } from '@/renderer/three/WebGLViewport'
+import type { RendererView } from '@/renderer/three/RendererView'
 
 import type { CameraManager } from './CameraManager'
 import type { ControlsManager } from './ControlsManager'
@@ -19,8 +19,10 @@ import type { RenderLoopHandle } from './load3dRenderLoop'
 import { startRenderLoop } from './load3dRenderLoop'
 import { computeLetterboxedViewport, isLoad3dActive } from './load3dViewport'
 
+const VIEW_HELPER_SIZE = 128
+
 export type Viewport3dDeps = {
-  renderer: THREE.WebGLRenderer
+  view: RendererView
   eventManager: EventManager
   sceneManager: SceneManager
   cameraManager: CameraManager
@@ -29,7 +31,8 @@ export type Viewport3dDeps = {
   viewHelperManager: ViewHelperManager
 }
 
-export class Viewport3d extends WebGLViewport {
+export class Viewport3d {
+  protected readonly view: RendererView
   protected clock: THREE.Clock
   private renderLoop: RenderLoopHandle | null = null
   private onContextMenuCallback?: (event: MouseEvent) => void
@@ -57,13 +60,14 @@ export class Viewport3d extends WebGLViewport {
   private externalActiveCamera: THREE.Camera | null = null
   private overlay: SceneOverlay | null = null
   private initialRenderTimer: ReturnType<typeof setTimeout> | null = null
+  private viewPixelScale = 1
 
   constructor(
-    container: Element | HTMLElement,
+    container: HTMLElement,
     deps: Viewport3dDeps,
     options: Load3DOptions = {}
   ) {
-    super(deps.renderer)
+    this.view = deps.view
     this.clock = new THREE.Clock()
     this.isViewerMode = options.isViewerMode || false
     this.onContextMenuCallback = options.onContextMenu
@@ -94,7 +98,15 @@ export class Viewport3d extends WebGLViewport {
     this.STATUS_MOUSE_ON_VIEWER = false
 
     this.initContextMenu()
-    this.observeResize(container, () => this.handleResize())
+    this.view.observeResize(container, () => this.handleResize())
+  }
+
+  get renderer(): THREE.WebGLRenderer {
+    return this.view.renderer
+  }
+
+  get domElement(): HTMLCanvasElement {
+    return this.view.canvas
   }
 
   start(): void {
@@ -120,7 +132,7 @@ export class Viewport3d extends WebGLViewport {
 
   private initContextMenu(): void {
     this.disposeContextMenuGuard = attachContextMenuGuard(
-      this.renderer.domElement,
+      this.view.canvas,
       (event) => this.onContextMenuCallback?.(event),
       { isDisabled: () => this.isViewerMode }
     )
@@ -159,17 +171,23 @@ export class Viewport3d extends WebGLViewport {
   forceRender(): void {
     const delta = this.clock.getDelta()
     this.tickPerFrame(delta)
-
-    this.renderMainScene()
-    this.resetViewport()
-
-    if (this.viewHelperManager.viewHelper.render) {
-      this.viewHelperManager.viewHelper.render(this.renderer)
-    }
-
+    this.renderView()
     this.INITIAL_RENDER_DONE = true
   }
 
+  private renderView(): void {
+    this.view.beginRender()
+    this.renderMainScene()
+
+    this.renderer.setScissorTest(false)
+    this.viewHelperManager.render(
+      this.renderer,
+      VIEW_HELPER_SIZE * this.viewPixelScale
+    )
+
+    this.view.blit()
+  }
+
   protected tickPerFrame(delta: number): void {
     this.overlay?.update?.(delta)
     this.viewHelperManager.update(delta)
@@ -219,8 +237,8 @@ export class Viewport3d extends WebGLViewport {
   }
 
   renderMainScene(): void {
-    const containerWidth = this.renderer.domElement.clientWidth
-    const containerHeight = this.renderer.domElement.clientHeight
+    const viewWidth = this.view.width
+    const viewHeight = this.view.height
 
     if (this.getDimensionsCallback) {
       const dims = this.getDimensionsCallback()
@@ -229,15 +247,16 @@ export class Viewport3d extends WebGLViewport {
       }
     }
 
+    this.renderer.setViewport(0, 0, viewWidth, viewHeight)
+    this.renderer.setScissor(0, 0, viewWidth, viewHeight)
+    this.renderer.setScissorTest(true)
+
     if (this.shouldMaintainAspectRatio()) {
       const { offsetX, offsetY, width, height } = computeLetterboxedViewport(
-        { width: containerWidth, height: containerHeight },
+        { width: viewWidth, height: viewHeight },
         this.targetAspectRatio
       )
 
-      this.renderer.setViewport(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissor(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissorTest(true)
       this.renderer.setClearColor(0x0a0a0a)
       this.renderer.clear()
 
@@ -246,34 +265,23 @@ export class Viewport3d extends WebGLViewport {
 
       this.cameraManager.updateAspectRatio(width / height)
     } else {
-      this.renderer.setViewport(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissor(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissorTest(true)
+      this.renderer.setClearColor(
+        this.view.state.clearColor,
+        this.view.state.clearAlpha
+      )
+      this.renderer.clear()
     }
 
     this.sceneManager.renderBackground()
     this.renderer.render(this.sceneManager.scene, this.getRenderCamera())
   }
 
-  resetViewport(): void {
-    const width = this.renderer.domElement.clientWidth
-    const height = this.renderer.domElement.clientHeight
-
-    this.renderer.setViewport(0, 0, width, height)
-    this.renderer.setScissor(0, 0, width, height)
-    this.renderer.setScissorTest(false)
-  }
-
   protected startAnimation(): void {
     this.renderLoop = startRenderLoop({
       tick: () => {
         const delta = this.clock.getDelta()
         this.tickPerFrame(delta)
-        this.renderMainScene()
-        this.resetViewport()
-        if (this.viewHelperManager.viewHelper.render) {
-          this.viewHelperManager.viewHelper.render(this.renderer)
-        }
+        this.renderView()
       },
       isActive: () => this.isActive()
     })
@@ -346,7 +354,7 @@ export class Viewport3d extends WebGLViewport {
   }
 
   handleResize(): void {
-    const parentElement = this.renderer?.domElement?.parentElement
+    const parentElement = this.view.canvas.parentElement
 
     if (!parentElement) {
       console.warn('Parent element not found')
@@ -357,7 +365,7 @@ export class Viewport3d extends WebGLViewport {
     const containerHeight = parentElement.clientHeight
 
     const zoomScale = this.getZoomScaleCallback?.() ?? 1
-    this.renderer.setPixelRatio(Math.min(zoomScale, 3))
+    this.viewPixelScale = Math.min(zoomScale, 3)
 
     if (this.getDimensionsCallback) {
       const dims = this.getDimensionsCallback()
@@ -366,17 +374,20 @@ export class Viewport3d extends WebGLViewport {
       }
     }
 
+    this.view.setSize(
+      containerWidth * this.viewPixelScale,
+      containerHeight * this.viewPixelScale
+    )
+
     if (this.shouldMaintainAspectRatio()) {
       const { width, height } = computeLetterboxedViewport(
         { width: containerWidth, height: containerHeight },
         this.targetAspectRatio
       )
 
-      this.renderer.setSize(containerWidth, containerHeight)
       this.cameraManager.handleResize(width, height)
       this.sceneManager.handleResize(width, height)
     } else {
-      this.renderer.setSize(containerWidth, containerHeight)
       this.cameraManager.handleResize(containerWidth, containerHeight)
       this.sceneManager.handleResize(containerWidth, containerHeight)
     }
@@ -398,7 +409,7 @@ export class Viewport3d extends WebGLViewport {
 
     this.disposeManagers()
 
-    this.disposeRenderer()
+    this.view.dispose()
   }
 
   protected disposeManagers(): void {
diff --git a/src/extensions/core/load3d/createLoad3d.test.ts b/src/extensions/core/load3d/createLoad3d.test.ts
index d173773ebc..7a7f965972 100644
--- a/src/extensions/core/load3d/createLoad3d.test.ts
+++ b/src/extensions/core/load3d/createLoad3d.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { DEFAULT_MODEL_CAPABILITIES } from './ModelAdapter'
 import type { ModelAdapter, ModelAdapterCapabilities } from './ModelAdapter'
@@ -20,7 +20,14 @@ vi.mock('three', async () => {
         rendererCtor(opts)
       }
       setSize() {}
+      setPixelRatio() {}
       setClearColor() {}
+      getSize(target: { set(x: number, y: number): unknown }) {
+        target.set(300, 300)
+        return target
+      }
+      forceContextLoss() {}
+      dispose() {}
     }
   }
 })
@@ -163,6 +170,12 @@ function makeAdapter(overrides: Partial<ModelAdapter> = {}): ModelAdapter {
 }
 
 describe('createLoad3d', () => {
+  beforeEach(() => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+      drawImage: vi.fn()
+    } as unknown as ReturnType<HTMLCanvasElement['getContext']>)
+  })
+
   it('constructs the renderer with alpha + antialias and appends it to the container', () => {
     rendererCtor.mockClear()
     const container = createContainer()
diff --git a/src/extensions/core/load3d/createLoad3d.ts b/src/extensions/core/load3d/createLoad3d.ts
index 3f2d1d31c6..cde7c755a1 100644
--- a/src/extensions/core/load3d/createLoad3d.ts
+++ b/src/extensions/core/load3d/createLoad3d.ts
@@ -1,4 +1,6 @@
-import * as THREE from 'three'
+import type * as THREE from 'three'
+
+import { RendererView } from '@/renderer/three/RendererView'
 
 import { AnimationManager } from './AnimationManager'
 import { CameraManager } from './CameraManager'
@@ -17,25 +19,9 @@ import { SceneModelManager } from './SceneModelManager'
 import { ViewHelperManager } from './ViewHelperManager'
 import type { Load3DOptions } from './interfaces'
 
-function createRenderer(container: Element | HTMLElement): THREE.WebGLRenderer {
-  const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
-  renderer.setSize(300, 300)
-  renderer.setClearColor(0x282828)
-  renderer.autoClear = false
-  renderer.outputColorSpace = THREE.SRGBColorSpace
-  renderer.domElement.classList.add(
-    'absolute',
-    'inset-0',
-    'h-full',
-    'w-full',
-    'outline-none'
-  )
-  container.appendChild(renderer.domElement)
-  return renderer
-}
-
-function buildLoad3dDeps(container: Element | HTMLElement): Load3dDeps {
-  const renderer = createRenderer(container)
+function buildLoad3dDeps(container: HTMLElement): Load3dDeps {
+  const view = new RendererView(container)
+  const renderer = view.renderer
   const eventManager = new EventManager()
   // Shared mutable handle: LoaderManager writes the active adapter on each
   // load; SceneModelManager reads it for capability/bounds/dispose lookups
@@ -50,7 +36,7 @@ function buildLoad3dDeps(container: Element | HTMLElement): Load3dDeps {
   const getControls = () => controlsManager.controls
 
   const sceneManager = new SceneManager(
-    renderer,
+    view,
     getActiveCamera,
     getControls,
     eventManager
@@ -58,7 +44,7 @@ function buildLoad3dDeps(container: Element | HTMLElement): Load3dDeps {
 
   cameraManager = new CameraManager(renderer, eventManager)
   controlsManager = new ControlsManager(
-    renderer,
+    container,
     cameraManager.activeCamera,
     eventManager
   )
@@ -68,6 +54,7 @@ function buildLoad3dDeps(container: Element | HTMLElement): Load3dDeps {
   const hdriManager = new HDRIManager(
     sceneManager.scene,
     renderer,
+    view.state,
     eventManager
   )
   const viewHelperManager = new ViewHelperManager(
@@ -79,7 +66,7 @@ function buildLoad3dDeps(container: Element | HTMLElement): Load3dDeps {
 
   const modelManager = new SceneModelManager(
     sceneManager.scene,
-    renderer,
+    view.state,
     eventManager,
     getActiveCamera,
     (size, center) => cameraManager.setupForModel(size, center),
@@ -98,14 +85,14 @@ function buildLoad3dDeps(container: Element | HTMLElement): Load3dDeps {
   )
   const recordingManager = new RecordingManager(
     sceneManager.scene,
-    renderer,
+    view.canvas,
     eventManager
   )
   const animationManager = new AnimationManager(eventManager)
 
   gizmoManager = new GizmoManager(
     sceneManager.scene,
-    renderer,
+    container,
     controlsManager.controls,
     getActiveCamera,
     () => {
@@ -119,7 +106,7 @@ function buildLoad3dDeps(container: Element | HTMLElement): Load3dDeps {
   )
 
   return {
-    renderer,
+    view,
     eventManager,
     sceneManager,
     cameraManager,
@@ -137,7 +124,7 @@ function buildLoad3dDeps(container: Element | HTMLElement): Load3dDeps {
 }
 
 export function createLoad3d(
-  container: Element | HTMLElement,
+  container: HTMLElement,
   options?: Load3DOptions
 ): Load3d {
   return new Load3d(container, buildLoad3dDeps(container), options)
diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index 762f8252a5..590b655be0 100644
--- a/src/extensions/core/load3d/interfaces.ts
+++ b/src/extensions/core/load3d/interfaces.ts
@@ -11,9 +11,11 @@ export type MaterialMode =
   | 'normal'
   | 'wireframe'
   | 'depth'
+  | 'clay'
 export type UpDirection = 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
 export type CameraType = 'perspective' | 'orthographic'
 export type BackgroundRenderModeType = 'tiled' | 'panorama'
+export type LoadFolder = 'temp' | 'output'
 
 interface CameraQuaternion {
   x: number
diff --git a/src/extensions/core/load3d/nodeTypes.ts b/src/extensions/core/load3d/nodeTypes.ts
index f5d6b0a8cc..f0b5f3d3ad 100644
--- a/src/extensions/core/load3d/nodeTypes.ts
+++ b/src/extensions/core/load3d/nodeTypes.ts
@@ -3,21 +3,24 @@
  * Adding a new node type that uses the viewer = one line change here.
  */
 
-const LOAD3D_PREVIEW_NODES = new Set([
+const LOAD3D_RESULT_VIEWER_NODES = new Set([
   'Preview3D',
   'PreviewGaussianSplat',
-  'PreviewPointCloud'
+  'PreviewPointCloud',
+  'Save3DAdvanced',
+  'SaveGaussianSplat',
+  'SavePointCloud'
 ])
 
 const LOAD3D_ALL_NODES = new Set([
-  ...LOAD3D_PREVIEW_NODES,
+  ...LOAD3D_RESULT_VIEWER_NODES,
   'Load3D',
   'Load3DAdvanced',
   'SaveGLB'
 ])
 
-export const isLoad3dPreviewNode = (nodeType: string): boolean =>
-  LOAD3D_PREVIEW_NODES.has(nodeType)
+export const isLoad3dResultViewerNode = (nodeType: string): boolean =>
+  LOAD3D_RESULT_VIEWER_NODES.has(nodeType)
 
 export const isLoad3dNode = (nodeType: string): boolean =>
   LOAD3D_ALL_NODES.has(nodeType)
diff --git a/src/extensions/core/load3dLazy.test.ts b/src/extensions/core/load3dLazy.test.ts
index d7d49aaa7f..249f22a40a 100644
--- a/src/extensions/core/load3dLazy.test.ts
+++ b/src/extensions/core/load3dLazy.test.ts
@@ -90,7 +90,10 @@ describe('load3dLazy', () => {
     'Preview3D',
     'PreviewGaussianSplat',
     'PreviewPointCloud',
-    'SaveGLB'
+    'SaveGLB',
+    'Save3DAdvanced',
+    'SaveGaussianSplat',
+    'SavePointCloud'
   ])(
     'recognizes %s as a 3D node type and triggers the lazy-load path',
     async (nodeType) => {
diff --git a/src/extensions/core/load3dPreviewExtensions.test.ts b/src/extensions/core/load3dPreviewExtensions.test.ts
index f7e4cbe1be..55b73dec3f 100644
--- a/src/extensions/core/load3dPreviewExtensions.test.ts
+++ b/src/extensions/core/load3dPreviewExtensions.test.ts
@@ -76,14 +76,24 @@ type ExtCreated = ComfyExtension & {
 async function loadExtensionsFresh(): Promise<{
   splatExt: ExtCreated
   pointCloudExt: ExtCreated
+  saveSplatExt: ExtCreated
+  savePointCloudExt: ExtCreated
 }> {
   vi.resetModules()
   registerExtensionMock.mockClear()
   await import('@/extensions/core/load3dPreviewExtensions')
-  const [splatCall, pointCloudCall] = registerExtensionMock.mock.calls
+  const extByName = (name: string): ExtCreated => {
+    const call = registerExtensionMock.mock.calls.find(
+      (c) => (c[0] as ExtCreated).name === name
+    )
+    if (!call) throw new Error(`Extension ${name} was not registered`)
+    return call[0] as ExtCreated
+  }
   return {
-    splatExt: splatCall[0] as ExtCreated,
-    pointCloudExt: pointCloudCall[0] as ExtCreated
+    splatExt: extByName('Comfy.PreviewGaussianSplat'),
+    pointCloudExt: extByName('Comfy.PreviewPointCloud'),
+    saveSplatExt: extByName('Comfy.SaveGaussianSplat'),
+    savePointCloudExt: extByName('Comfy.SavePointCloud')
   }
 }
 
@@ -92,6 +102,7 @@ interface FakeLoad3d {
   isSplatModel: ReturnType<typeof vi.fn>
   forceRender: ReturnType<typeof vi.fn>
   setCameraState: ReturnType<typeof vi.fn>
+  applyModelTransform: ReturnType<typeof vi.fn>
   setTargetSize: ReturnType<typeof vi.fn>
   getCurrentCameraType: ReturnType<typeof vi.fn>
   getCameraState: ReturnType<typeof vi.fn>
@@ -106,6 +117,7 @@ function makeLoad3dMock(): FakeLoad3d {
     isSplatModel: vi.fn(() => false),
     forceRender: vi.fn(),
     setCameraState: vi.fn(),
+    applyModelTransform: vi.fn(),
     setTargetSize: vi.fn(),
     getCurrentCameraType: vi.fn(() => 'perspective'),
     getCameraState: vi.fn(() => ({ position: { x: 0, y: 0, z: 0 } })),
@@ -151,12 +163,59 @@ function setupBaseMocks() {
 describe('load3dPreviewExtensions module registration', () => {
   beforeEach(setupBaseMocks)
 
-  it('registers both preview extensions on import', async () => {
-    const { splatExt, pointCloudExt } = await loadExtensionsFresh()
+  it('registers preview and save extensions on import', async () => {
+    const { splatExt, pointCloudExt, saveSplatExt, savePointCloudExt } =
+      await loadExtensionsFresh()
 
-    expect(registerExtensionMock).toHaveBeenCalledTimes(2)
+    expect(registerExtensionMock).toHaveBeenCalledTimes(4)
     expect(splatExt.name).toBe('Comfy.PreviewGaussianSplat')
     expect(pointCloudExt.name).toBe('Comfy.PreviewPointCloud')
+    expect(saveSplatExt.name).toBe('Comfy.SaveGaussianSplat')
+    expect(savePointCloudExt.name).toBe('Comfy.SavePointCloud')
+  })
+
+  it('save extensions load the saved file from the output folder, not temp', async () => {
+    const { saveSplatExt, savePointCloudExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+
+    const splatNode = makePreviewNode({ comfyClass: 'SaveGaussianSplat' })
+    await saveSplatExt.nodeCreated(splatNode)
+    splatNode.onExecuted!({ result: ['3d/ComfyUI_00001_.ply'] })
+
+    expect(configureForSaveMeshMock).toHaveBeenLastCalledWith(
+      'output',
+      '3d/ComfyUI_00001_.ply',
+      expect.objectContaining({ silentOnNotFound: true })
+    )
+
+    const pcNode = makePreviewNode({ comfyClass: 'SavePointCloud' })
+    await savePointCloudExt.nodeCreated(pcNode)
+    pcNode.onExecuted!({ result: ['3d/ComfyUI_00002_.ply'] })
+
+    expect(configureForSaveMeshMock).toHaveBeenLastCalledWith(
+      'output',
+      '3d/ComfyUI_00002_.ply',
+      expect.objectContaining({ silentOnNotFound: true })
+    )
+  })
+
+  it('restores persisted models from the output folder on nodeCreated, not temp', async () => {
+    const { saveSplatExt } = await loadExtensionsFresh()
+    const node = makePreviewNode({
+      comfyClass: 'SaveGaussianSplat',
+      properties: { 'Last Time Model File': '3d/ComfyUI_00001_.ply' }
+    })
+
+    await saveSplatExt.nodeCreated(node)
+
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'output',
+      '3d/ComfyUI_00001_.ply',
+      expect.objectContaining({ silentOnNotFound: true })
+    )
   })
 })
 
@@ -214,6 +273,44 @@ describe('Comfy.PreviewGaussianSplat.nodeCreated', () => {
     expect(cameraConfig?.state).toEqual(cameraState)
   })
 
+  it('applies onExecuted results to the remounted instance, not the disposed closure', async () => {
+    const { splatExt } = await loadExtensionsFresh()
+    const original = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(original)
+    )
+    const node = makePreviewNode()
+
+    await splatExt.nodeCreated(node)
+
+    const remounted = makeLoad3dMock()
+    nodeToLoad3dMapMock.set(node, remounted)
+
+    node.onExecuted!({
+      result: ['scene.ply', { position: { x: 1, y: 2, z: 3 } }]
+    })
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(remounted.forceRender).toHaveBeenCalled()
+    expect(original.forceRender).not.toHaveBeenCalled()
+  })
+
+  it('re-applies the model transform from result[2] on execute', async () => {
+    const { saveSplatExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+    const node = makePreviewNode({ comfyClass: 'SaveGaussianSplat' })
+    const transform = { position: { x: 1, y: 2, z: 3 } }
+
+    await saveSplatExt.nodeCreated(node)
+    node.onExecuted!({ result: ['scene.ply', undefined, [transform]] })
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(load3d.applyModelTransform).toHaveBeenCalledWith(transform)
+  })
+
   it('syncs width/height widgets to load3d.setTargetSize and registers callbacks', async () => {
     const { splatExt } = await loadExtensionsFresh()
     const load3d = makeLoad3dMock()
diff --git a/src/extensions/core/load3dPreviewExtensions.ts b/src/extensions/core/load3dPreviewExtensions.ts
index 374ae0933a..dbe8c30ec4 100644
--- a/src/extensions/core/load3dPreviewExtensions.ts
+++ b/src/extensions/core/load3dPreviewExtensions.ts
@@ -5,6 +5,7 @@ import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper
 import type {
   CameraConfig,
   CameraState,
+  LoadFolder,
   Model3DInfo
 } from '@/extensions/core/load3d/interfaces'
 import type Load3d from '@/extensions/core/load3d/Load3d'
@@ -29,7 +30,9 @@ function applyResultToLoad3d(
   node: LGraphNode,
   load3d: Load3d,
   filePath: string,
-  cameraState: CameraState | undefined
+  cameraState: CameraState | undefined,
+  modelTransform: Model3DInfo[number] | undefined,
+  loadFolder: LoadFolder
 ): void {
   const normalizedPath = filePath.replaceAll('\\', '/')
   node.properties['Last Time Model File'] = normalizedPath
@@ -46,7 +49,7 @@ function applyResultToLoad3d(
   }
 
   const config = new Load3DConfiguration(load3d, node.properties)
-  config.configureForSaveMesh('temp', normalizedPath, {
+  config.configureForSaveMesh(loadFolder, normalizedPath, {
     silentOnNotFound: true
   })
 
@@ -54,13 +57,15 @@ function applyResultToLoad3d(
   void load3d.whenLoadIdle().then(() => {
     if (load3d.currentLoadGeneration !== targetGeneration) return
     if (cameraState) load3d.setCameraState(cameraState)
+    if (modelTransform) load3d.applyModelTransform(modelTransform)
     load3d.forceRender()
   })
 }
 
 function createPreview3DExtension(
   comfyClass: string,
-  extensionName: string
+  extensionName: string,
+  loadFolder: LoadFolder
 ): ComfyExtension {
   const applyPreviewOutput = (
     node: LGraphNode,
@@ -68,10 +73,18 @@ function createPreview3DExtension(
   ): void => {
     const filePath = result[0]
     const cameraState = result[1]
+    const modelTransform = result[2]?.[0]
     if (!filePath) return
 
     useLoad3d(node).waitForLoad3d((load3d) => {
-      applyResultToLoad3d(node, load3d, filePath, cameraState)
+      applyResultToLoad3d(
+        node,
+        load3d,
+        filePath,
+        cameraState,
+        modelTransform,
+        loadFolder
+      )
     })
   }
 
@@ -119,7 +132,7 @@ function createPreview3DExtension(
         if (!lastTimeModelFile) return
 
         const config = new Load3DConfiguration(load3d, node.properties)
-        config.configureForSaveMesh('temp', lastTimeModelFile as string, {
+        config.configureForSaveMesh(loadFolder, lastTimeModelFile as string, {
           silentOnNotFound: true
         })
 
@@ -136,6 +149,8 @@ function createPreview3DExtension(
       })
 
       waitForLoad3d((load3d) => {
+        const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
+
         const sceneWidget = node.widgets?.find(
           (w) => w.name === 'viewport_state'
         )
@@ -148,10 +163,10 @@ function createPreview3DExtension(
             heightWidget.value as number
           )
           widthWidget.callback = (value: number) => {
-            load3d.setTargetSize(value, heightWidget.value as number)
+            resolveLoad3d().setTargetSize(value, heightWidget.value as number)
           }
           heightWidget.callback = (value: number) => {
-            load3d.setTargetSize(widthWidget.value as number, value)
+            resolveLoad3d().setTargetSize(widthWidget.value as number, value)
           }
         }
 
@@ -199,7 +214,14 @@ function createPreview3DExtension(
             return
           }
 
-          applyResultToLoad3d(node, load3d, filePath, result?.[1])
+          applyResultToLoad3d(
+            node,
+            resolveLoad3d(),
+            filePath,
+            result?.[1],
+            result?.[2]?.[0],
+            loadFolder
+          )
         }
       })
     }
@@ -207,8 +229,26 @@ function createPreview3DExtension(
 }
 
 useExtensionService().registerExtension(
-  createPreview3DExtension('PreviewGaussianSplat', 'Comfy.PreviewGaussianSplat')
+  createPreview3DExtension(
+    'PreviewGaussianSplat',
+    'Comfy.PreviewGaussianSplat',
+    'temp'
+  )
 )
 useExtensionService().registerExtension(
-  createPreview3DExtension('PreviewPointCloud', 'Comfy.PreviewPointCloud')
+  createPreview3DExtension(
+    'PreviewPointCloud',
+    'Comfy.PreviewPointCloud',
+    'temp'
+  )
+)
+useExtensionService().registerExtension(
+  createPreview3DExtension(
+    'SaveGaussianSplat',
+    'Comfy.SaveGaussianSplat',
+    'output'
+  )
+)
+useExtensionService().registerExtension(
+  createPreview3DExtension('SavePointCloud', 'Comfy.SavePointCloud', 'output')
 )
diff --git a/src/extensions/core/saveImageExtraOutput.test.ts b/src/extensions/core/saveImageExtraOutput.test.ts
index 86947c10e6..e8c5bf39d8 100644
--- a/src/extensions/core/saveImageExtraOutput.test.ts
+++ b/src/extensions/core/saveImageExtraOutput.test.ts
@@ -81,6 +81,9 @@ describe('Comfy.SaveImageExtraOutput', () => {
     'SaveAudioOpus',
     'SaveAudioAdvanced',
     'SaveGLB',
+    'Save3DAdvanced',
+    'SaveGaussianSplat',
+    'SavePointCloud',
     'SaveAnimatedPNG',
     'CLIPSave',
     'VAESave',
diff --git a/src/extensions/core/saveImageExtraOutput.ts b/src/extensions/core/saveImageExtraOutput.ts
index 3c3b044ac3..5ac24b7ae6 100644
--- a/src/extensions/core/saveImageExtraOutput.ts
+++ b/src/extensions/core/saveImageExtraOutput.ts
@@ -16,6 +16,9 @@ const saveNodeTypes = new Set([
   'SaveAudioOpus',
   'SaveAudioAdvanced',
   'SaveGLB',
+  'Save3DAdvanced',
+  'SaveGaussianSplat',
+  'SavePointCloud',
   'SaveAnimatedPNG',
   'CLIPSave',
   'VAESave',
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index 04ec51a6e6..e56a2f5216 100644
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -359,6 +359,7 @@
     "colors": "لوحة الألوان",
     "descLabel": "الوصف",
     "descPlaceholder": "وصف هذه المنطقة",
+    "grid": "شبكة",
     "textLabel": "نص",
     "textPlaceholder": "النص المراد عرضه (كما هو)",
     "typeObj": "كائن",
@@ -954,6 +955,16 @@
       "title": "حوار غير صالح"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "تطبيق ComfyUI لسطح المكتب ينتظر تسجيل الدخول باستخدام حسابك. تابع فقط إذا بدأت عملية تسجيل الدخول من تطبيق ComfyUI لسطح المكتب.",
+    "confirmSummary": "تأكيد تسجيل الدخول من سطح المكتب؟",
+    "expiredDetail": "انتهت صلاحية طلب تسجيل الدخول أو تم استخدامه بالفعل. ابدأ عملية تسجيل الدخول مرة أخرى من تطبيق ComfyUI لسطح المكتب.",
+    "expiredSummary": "فشل تسجيل الدخول من سطح المكتب",
+    "failedDetail": "حدث خطأ أثناء إكمال تسجيل الدخول من سطح المكتب. ابدأ عملية تسجيل الدخول مرة أخرى من تطبيق ComfyUI لسطح المكتب.",
+    "failedSummary": "فشل تسجيل الدخول من سطح المكتب",
+    "successDetail": "يمكنك العودة إلى تطبيق ComfyUI لسطح المكتب.",
+    "successSummary": "تم تسجيل الدخول"
+  },
   "desktopMenu": {
     "confirmQuit": "هناك سير عمل غير محفوظ مفتوح؛ سيتم فقدان أي تغييرات غير محفوظة. هل تتجاهل هذا وتخرج؟",
     "confirmReinstall": "سيؤدي هذا إلى مسح ملف extra_models_config.yaml الخاص بك،\nوبدء التثبيت من جديد.\n\nهل أنت متأكد؟",
@@ -2854,6 +2865,8 @@
     "phantom subject": "موضوع شبحي",
     "photomaker": "صانع الصور",
     "pixart": "pixart",
+    "post-processors": "معالجات ما بعد",
+    "pre-processors": "معالجات ما قبل",
     "preprocessors": "المعالجون المسبقون",
     "primitive": "بدائي",
     "qwen": "تشي وين",
@@ -4123,6 +4136,7 @@
       "newest": "الأحدث",
       "popular": "الأكثر شيوعًا",
       "recommended": "موصى به",
+      "relevance": "الصلة",
       "searchPlaceholder": "بحث..."
     },
     "sorting": "ترتيب حسب",
diff --git a/src/locales/ar/nodeDefs.json b/src/locales/ar/nodeDefs.json
index 037c35e516..862a4fe5fa 100644
--- a/src/locales/ar/nodeDefs.json
+++ b/src/locales/ar/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "البذرة",
         "tooltip": "البذرة المستخدمة للتوليد."
       },
+      "thinking": {
+        "name": "التفكير",
+        "tooltip": "تفعيل منطق تحسين المطالبات للنموذج ('التفكير') لتحقيق التزام أفضل. قد يؤدي إلى زيادة كبيرة في وقت التوليد — خاصة على Seedream 5.0 Pro. يمكن تعطيله فقط في تحويل النص إلى صورة (وليس عند توفير صور مرجعية)."
+      },
       "watermark": {
         "name": "علامة مائية",
         "tooltip": "هل تريد إضافة علامة \"تم الإنشاء بواسطة الذكاء الاصطناعي\" على الصورة."
@@ -2831,6 +2835,10 @@
         "name": "الخلفية",
         "tooltip": "صورة اختيارية تُستخدم كخلفية في لوحة الرسم والمعاينة."
       },
+      "bboxes": {
+        "name": "مربعات التحديد",
+        "tooltip": "مربعات التحديد أو العناصر أو سلسلة JSON لتهيئة مساحة العمل. أي قيمة جديدة من المصدر تعيد تهيئة مساحة العمل؛ التعديلات التي تتم على مساحة العمل لها الأولوية وتبقى حتى تتغير قيمة المصدر مرة أخرى."
+      },
       "editor_state": {
         "name": "حالة المحرر",
         "tooltip": "ارسم الصناديق المحيطة وحدد نوع كل صندوق، النص، الوصف، لوحة الألوان. ابدأ بعنصر الخلفية أولاً والعناصر الأمامية أخيراً."
@@ -2839,6 +2847,10 @@
         "name": "الارتفاع",
         "tooltip": "ارتفاع لوحة الرسم وشبكة البكسل للصناديق المحيطة."
       },
+      "last_incoming": {
+        "name": "آخر قيمة واردة",
+        "tooltip": "حالة داخلية تديرها مساحة العمل: قيمة مربعات التحديد الأخيرة التي قامت بتهيئتها. اتركها فارغة لإعادة تهيئة مساحة العمل من مدخل مربعات التحديد في التشغيل التالي."
+      },
       "width": {
         "name": "العرض",
         "tooltip": "عرض لوحة الرسم وشبكة البكسل للصناديق المحيطة."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "قناع"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "معاينة ملف نموذج ثلاثي الأبعاد دون حفظه في دليل مخرجات ComfyUI.",
     "display_name": "معاينة ثلاثية الأبعاد",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "معاينة ملف نموذج ثلاثي الأبعاد دون حفظه في دليل مخرجات ComfyUI.",
     "display_name": "معاينة ثلاثية الأبعاد (متقدم)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "معاينة أي قيمة مدخلة كنص.",
     "display_name": "معاينة أي",
     "inputs": {
       "preview_mode": "وضع المعاينة",
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "معاينة الصوت دون حفظه في دليل مخرجات ComfyUI.",
     "display_name": "معاينة الصوت",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "معاينة ملف Gaussian Splat ثلاثي الأبعاد دون حفظه في دليل مخرجات ComfyUI.",
     "display_name": "معاينة Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "معاينة ملف Point Cloud ثلاثي الأبعاد دون حفظه في دليل مخرجات ComfyUI.",
     "display_name": "معاينة سحابة النقاط",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "حفظ ثلاثي الأبعاد (متقدم)",
+    "inputs": {
+      "camera_info": {
+        "name": "معلومات الكاميرا"
+      },
+      "filename_prefix": {
+        "name": "بادئة اسم الملف"
+      },
+      "height": {
+        "name": "الارتفاع"
+      },
+      "model_3d": {
+        "name": "نموذج ثلاثي الأبعاد",
+        "tooltip": "ملف نموذج ثلاثي الأبعاد من عقدة ثلاثية الأبعاد في الأعلى."
+      },
+      "model_3d_info": {
+        "name": "معلومات النموذج ثلاثي الأبعاد"
+      },
+      "viewport_state": {
+        "name": "حالة منفذ العرض"
+      },
+      "width": {
+        "name": "العرض"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "نموذج ثلاثي الأبعاد",
+        "tooltip": null
+      },
+      "1": {
+        "name": "معلومات النموذج ثلاثي الأبعاد",
+        "tooltip": null
+      },
+      "2": {
+        "name": "معلومات الكاميرا",
+        "tooltip": null
+      },
+      "3": {
+        "name": "العرض",
+        "tooltip": null
+      },
+      "4": {
+        "name": "الارتفاع",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "حفظ PNG متحرك",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "حفظ Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "ملف Gaussian Splat ثلاثي الأبعاد."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "يحفظ الصور المدخلة في مجلد مخرجات ComfyUI الخاص بك.",
     "display_name": "حفظ الصورة",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "حفظ سحابة النقاط",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "ملف سحابة نقاط (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "حفظ ملفات SVG على القرص.",
     "display_name": "عقدة حفظ SVG",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "حفظ محتوى نصي في ملف داخل مجلد الإخراج.",
+    "display_name": "حفظ نص",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "حفظ مجموعة بيانات التدريب المشفرة (latents + التهيئة) على القرص لتحميلها بكفاءة أثناء التدريب.",
     "display_name": "حفظ مجموعة بيانات التدريب",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "إنشاء تكييف إيجابي/سلبي لـ SeedVR2 من latent VAE.",
+    "display_name": "تطبيق تكييف SeedVR2",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "نموذج SeedVR2."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "التكييف الإيجابي لأخذ العينات."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "التكييف السلبي لأخذ العينات."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "محاذاة الصورة المُولدة مع الصورة الأصلية المُعاد تحجيمها وتطبيق تصحيح الألوان.",
+    "display_name": "معالجة مخرجات SeedVR2 بعد الإنتاج",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "طريقة مطابقة ألوان الصورة المُولدة مع الصورة الأصلية. lab: نقل اللون في فضاء CIELAB مع الحفاظ على التفاصيل (الأكثر دقة). wavelet: نقل اللون منخفض التردد مع الحفاظ على تفاصيل التردد العالي بعد التكبير. adain: مطابقة المتوسط والانحراف المعياري لكل قناة (الأسرع، تدرج لوني عام). none: تخطي نقل اللون (محاذاة هندسية فقط)."
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "الصورة المُولدة للمعالجة."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "الصورة الأصلية المُعاد تحجيمها قبل المعالجة المسبقة، وتُستخدم كمرجع."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "الصورة المحاذاة والمصححة الألوان."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "إضافة حواف لصورة مُعاد تحجيمها لاستخدامها في نموذج SeedVR2. يتم حذف قناة ألفا. يعيد عقدة معالجة مخرجات SeedVR2 بعد الإنتاج إضافتها من الصورة الأصلية المُعاد تحجيمها.",
+    "display_name": "معالجة مدخلات SeedVR2 قبل الإنتاج",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "الصورة المُعاد تحجيمها للمعالجة."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "الصورة المجهزة للترميز باستخدام VAE."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "تقسيم الفيديو الكامن لـ SeedVR2 إلى أجزاء زمنية متداخلة صغيرة بما يكفي ليتم معالجتها واحدة تلو الأخرى ضمن VRAM، مع توصيل مخرجات الكامن إلى كل من Apply SeedVR2 Conditioning ومدخل الكامن للعينات قبل إعادة الدمج باستخدام Merge SeedVR2 Latents.",
+    "display_name": "تقسيم SeedVR2 Latent",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = استخدم frames_per_chunk بالضبط؛ auto = توقع أكبر جزء يتناسب مع VRAM المتاح."
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "الكامن المشفر بواسطة VAE الخاص بـ SeedVR2 للتقسيم."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "إطارات الكامن المشتركة بين الأجزاء المتجاورة ويتم دمجها تدريجياً عند الدمج؛ 0 = بدون تداخل."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "الأجزاء الزمنية مرتبة حسب التسلسل."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "تداخل إطارات الكامن الفعلي بين الأجزاء المتجاورة، لاستخدامه في Merge SeedVR2 Latents."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "إعادة دمج أجزاء الكامن الزمني المُعالجة لـ SeedVR2 في كامن واحد، مع دمج كل تداخل باستخدام نافذة Hann بحجم temporal_overlap الموصول من Split SeedVR2 Latent.",
+    "display_name": "دمج SeedVR2 Latents",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "الأجزاء الزمنية المُعالجة مرتبة حسب التسلسل."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "مخرج temporal_overlap من Split SeedVR2 Latent. 0 = دمج مباشر بدون تداخل."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "الكامن الكامل بعد إعادة الدمج."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "ضع مشفر نص CLIP على جهاز محدد (افتراضي / cpu / gpu:N).\n\n- \"default\" يعيد الجهاز الذي تم تعيينه من قبل أداة التحميل.\n- \"cpu\" يثبت كل من جهاز التحميل والتفريغ على وحدة المعالجة المركزية.\n- \"gpu:N\" يثبت جهاز التحميل على وحدة معالجة الرسومات رقم N المتوفرة.\n\nعندما لا يكون الجهاز المحدد موجودًا على الجهاز الحالي\n(مثلاً سير عمل تم بناؤه على جهاز به وحدتي GPU وتم فتحه على جهاز به وحدة GPU واحدة)،\nتمرر العقدة CLIP كما هو دون تغيير وتقوم بتسجيل رسالة\nبدلاً من الفشل.",
     "display_name": "اختيار جهاز CLIP",
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index ffb8625493..297b3de1b7 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1163,6 +1163,7 @@
     "runsOnFilter": "Runs on",
     "resultsCount": "Showing {count} of {total} templates",
     "sort": {
+      "relevance": "Relevance",
       "recommended": "Recommended",
       "popular": "Popular",
       "alphabetical": "A → Z",
@@ -1812,6 +1813,8 @@
     "Runway": "Runway",
     "scail": "scail",
     "stable diffusion upscaler": "stable diffusion upscaler",
+    "post-processors": "post-processors",
+    "pre-processors": "pre-processors",
     "clip": "clip",
     "Sonilo": "Sonilo",
     "stable zero123": "stable zero123",
@@ -2065,6 +2068,7 @@
     "centerCameraOnModel": "Center Camera on Model",
     "scene": "Scene",
     "model": "Model",
+    "model3d": "3D Model",
     "camera": "Camera",
     "light": "Light",
     "switchingMaterialMode": "Switching Material Mode...",
@@ -2075,13 +2079,35 @@
     "reloadingModel": "Reloading model...",
     "uploadTexture": "Upload Texture",
     "applyingTexture": "Applying Texture...",
+    "menuBar": {
+      "showGrid": "Show grid",
+      "bgColor": "BG Color",
+      "bgImage": "BG Image",
+      "panorama": "Panorama",
+      "removeBackground": "Remove BG",
+      "upDirection": "Up Direction",
+      "material": "Material",
+      "skeleton": "Skeleton",
+      "fov": "FOV",
+      "intensity": "Intensity",
+      "record": "Record",
+      "recording": "Recording",
+      "stopRecording": "Stop recording",
+      "downloadRecording": "Download Recording",
+      "startNewRecording": "Start New Recording",
+      "deleteRecording": "Delete Recording",
+      "videoRecordingTooltip": "Video recording of the scene [mp4]",
+      "switchProjection": "Switch projection",
+      "originalMaterialOnly": "Original material only"
+    },
     "materialModes": {
       "normal": "Normal",
       "wireframe": "Wireframe",
       "original": "Original",
       "pointCloud": "Point Cloud",
       "depth": "Depth",
-      "lineart": "Lineart"
+      "lineart": "Lineart",
+      "clay": "Clay"
     },
     "upDirections": {
       "original": "Original"
@@ -2113,10 +2139,10 @@
     "uploadingModel": "Uploading 3D model...",
     "loadingHDRI": "Loading HDRI...",
     "hdri": {
-      "label": "HDRI Environment",
-      "uploadFile": "Upload HDRI (.hdr, .exr)",
-      "changeFile": "Change HDRI",
-      "removeFile": "Remove HDRI",
+      "label": "HDRI",
+      "uploadFile": "Upload",
+      "changeFile": "Change",
+      "removeFile": "Remove",
       "showAsBackground": "Show as Background",
       "intensity": "Intensity"
     },
@@ -2126,7 +2152,7 @@
       "translate": "Translate",
       "rotate": "Rotate",
       "scale": "Scale",
-      "reset": "Reset Transform"
+      "reset": "Reset"
     }
   },
   "imageCrop": {
@@ -2170,7 +2196,8 @@
     "descLabel": "description",
     "textPlaceholder": "text to render (verbatim)",
     "descPlaceholder": "description of this region",
-    "colors": "color_palette"
+    "colors": "color_palette",
+    "grid": "Grid"
   },
   "palette": {
     "addColor": "Add a color",
@@ -3085,6 +3112,7 @@
     "enterBuilderMode": "Build app",
     "editBuilderMode": "Edit app",
     "workflowActions": "Workflow actions",
+    "activeModeWorkflowActions": "{mode} mode, workflow actions",
     "clearWorkflow": "Clear Workflow",
     "deleteWorkflow": "Delete Workflow",
     "deleteBlueprint": "Delete Blueprint",
@@ -3702,8 +3730,6 @@
   },
   "linearMode": {
     "linearMode": "App Mode",
-    "beta": "App mode in beta",
-    "buildAnApp": "Build an app",
     "giveFeedback": "Give feedback",
     "graphMode": "Graph Mode",
     "dragAndDropImage": "Click to browse or drag an image",
@@ -3736,7 +3762,10 @@
       "appBuilder": "App builder",
       "apps": "Apps",
       "appsEmptyMessage": "Saved apps will show up here.",
-      "appsEmptyMessageAction": "Click below to build your first app."
+      "appsEmptyMessageAction": "Click below to build your first app.",
+      "buildAnApp": "Build an app",
+      "create": "Create",
+      "createApp": "Create app"
     },
     "arrange": {
       "noOutputs": "No outputs added yet",
@@ -3779,6 +3808,7 @@
       "support": "contact our support",
       "promptShow": "Show error report"
     },
+    "feedbackLoadError": "Failed to load feedback form. Please try again later.",
     "queue": {
       "clickToClear": "Click to clear queue",
       "clear": "Clear queue"
@@ -4416,6 +4446,10 @@
     "secretValuePlaceholderEdit": "Enter new value to change",
     "secretValueHint": "This value will be encrypted and cannot be viewed again.",
     "secretValueHintEdit": "Leave blank to keep the current value.",
+    "uploadJsonFile": "Upload JSON file",
+    "jsonFilePlaceholder": "Upload or paste the provider JSON credential",
+    "jsonFileHint": "Paste the JSON or upload a file. It will be encrypted and cannot be viewed again.",
+    "jsonFileHintEdit": "Leave blank to keep the current value, or upload a new JSON file to replace it.",
     "createdAt": "Created {date}",
     "lastUsed": "Last used {date}",
     "deleteConfirmTitle": "Delete Secret",
@@ -4425,6 +4459,9 @@
       "nameTooLong": "Name must be 255 characters or less",
       "providerRequired": "Provider is required",
       "secretValueRequired": "Secret value is required",
+      "invalidJson": "File must contain a valid JSON object",
+      "fileTooLarge": "File is too large. Upload a JSON credential under 1 MB",
+      "fileReadFailed": "Could not read the selected file. Please try again",
       "duplicateName": "A secret with this name already exists",
       "duplicateProvider": "A secret for this provider already exists"
     }
diff --git a/src/locales/en/nodeDefs.json b/src/locales/en/nodeDefs.json
index a9e40d9e0d..5bdd045f03 100644
--- a/src/locales/en/nodeDefs.json
+++ b/src/locales/en/nodeDefs.json
@@ -1317,6 +1317,10 @@
         "name": "watermark",
         "tooltip": "Whether to add an \"AI generated\" watermark to the image."
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "Enable the model's prompt-optimization reasoning ('thinking') for better adherence. Can substantially increase generation time — notably on Seedream 5.0 Pro. Can only be disabled for text-to-image (not when reference images are provided)."
+      },
       "control_after_generate": {
         "name": "control after generate"
       },
@@ -2842,6 +2846,14 @@
       "background": {
         "name": "background",
         "tooltip": "Optional image used as background in the canvas and preview."
+      },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "Bounding boxes, elements, or a JSON string to initialize the canvas. A new upstream value initializes the canvas; edits made on the canvas take priority and are kept until the upstream value changes again."
+      },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "Internal state managed by the canvas: the upstream bboxes value that last initialized it. Leave empty to re-initialize the canvas from the bboxes input on the next run."
       }
     },
     "outputs": {
@@ -10560,11 +10572,17 @@
   },
   "MaskPreview": {
     "display_name": "Preview Mask",
-    "description": "Saves the input images to your ComfyUI output directory.",
+    "description": "Preview the masks without saving them to the ComfyUI output directory.",
     "inputs": {
       "mask": {
         "name": "mask"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14574,6 +14592,7 @@
   },
   "Preview3D": {
     "display_name": "Preview 3D & Animation",
+    "description": "Preview a 3D model file without saving it to the ComfyUI output directory.",
     "inputs": {
       "model_file": {
         "name": "model_file",
@@ -14592,6 +14611,7 @@
   },
   "Preview3DAdvanced": {
     "display_name": "Preview 3D (Advanced)",
+    "description": "Preview a 3D model file without saving it to the ComfyUI output directory.",
     "inputs": {
       "model_3d": {
         "name": "model_3d",
@@ -14638,6 +14658,7 @@
   },
   "PreviewAny": {
     "display_name": "Preview as Text",
+    "description": "Preview any input value as text.",
     "inputs": {
       "source": {
         "name": "source"
@@ -14648,6 +14669,7 @@
   },
   "PreviewAudio": {
     "display_name": "Preview Audio",
+    "description": "Preview the audio without saving it to the ComfyUI output directory.",
     "inputs": {
       "audio": {
         "name": "audio"
@@ -14665,6 +14687,7 @@
   },
   "PreviewGaussianSplat": {
     "display_name": "Preview Splat",
+    "description": "Preview a gaussian splat 3D file without saving it to the ComfyUI output directory.",
     "inputs": {
       "model_3d": {
         "name": "model_3d",
@@ -14711,7 +14734,7 @@
   },
   "PreviewImage": {
     "display_name": "Preview Image",
-    "description": "Saves the input images to your ComfyUI output directory.",
+    "description": "Preview the images without saving them to the ComfyUI output directory.",
     "inputs": {
       "images": {
         "name": "images"
@@ -14725,6 +14748,7 @@
   },
   "PreviewPointCloud": {
     "display_name": "Preview Point Cloud",
+    "description": "Preview a point cloud 3D file without saving it to the ComfyUI output directory.",
     "inputs": {
       "model_3d": {
         "name": "model_3d",
@@ -14834,7 +14858,7 @@
     }
   },
   "PrimitiveString": {
-    "display_name": "Text String (DEPRECATED)",
+    "display_name": "Text",
     "inputs": {
       "value": {
         "name": "value"
@@ -14847,7 +14871,7 @@
     }
   },
   "PrimitiveStringMultiline": {
-    "display_name": "Input Text",
+    "display_name": "Text (Multiline)",
     "inputs": {
       "value": {
         "name": "value"
@@ -17205,6 +17229,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "Save 3D (Advanced)",
+    "inputs": {
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "3D model file from an upstream 3D node."
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "camera_info": {
+        "name": "camera_info"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "Save Animated PNG",
     "inputs": {
@@ -17350,6 +17423,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "Save Splat",
+    "inputs": {
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "A gaussian splat 3D file."
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "camera_info": {
+        "name": "camera_info"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveGLB": {
     "display_name": "Save 3D Model",
     "inputs": {
@@ -17503,6 +17625,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "Save Point Cloud",
+    "inputs": {
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Point cloud file (.ply)"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "camera_info": {
+        "name": "camera_info"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "display_name": "Save SVG",
     "description": "Save SVG files on disk.",
@@ -17522,6 +17693,29 @@
       }
     }
   },
+  "SaveText": {
+    "display_name": "Save Text",
+    "description": "Save text content to a file in the output directory.",
+    "inputs": {
+      "text": {
+        "name": "text"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {}
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "display_name": "Save Training Dataset",
     "description": "Save encoded training dataset (latents + conditioning) to disk for efficient loading during training.",
@@ -17824,6 +18018,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "display_name": "Apply SeedVR2 Conditioning",
+    "description": "Build SeedVR2 positive/negative conditioning from a VAE latent.",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "The SeedVR2 model."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "The positive conditioning for sampling."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "The negative conditioning for sampling."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "display_name": "Post-Process SeedVR2 Output",
+    "description": "Align the generated image with the original resized image and apply color correction.",
+    "inputs": {
+      "images": {
+        "name": "images",
+        "tooltip": "The generated image to process."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "The original resized image before pre-processing, used as reference."
+      },
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "Method to match the generated image colors to the original image. lab: transfer color in CIELAB space, preserving detail (most faithful). wavelet: transfer low-frequency color, keeping upscaled high-frequency detail. adain: match per-channel mean/std (fastest, global tint). none: skip color transfer (geometry alignment only)."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "The aligned, color-corrected image."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "display_name": "Pre-Process SeedVR2 Input",
+    "description": "Pad a resized image for SeedVR2 model. Alpha channel is dropped. The node Post-Process SeedVR2 Output re-applies it from the original resized image.",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "The resized image to process."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "The padded image for VAE encoding."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "display_name": "Split SeedVR2 Latent",
+    "description": "Split a SeedVR2 video latent into overlapping temporal chunks small enough to sample one at a time within VRAM, wiring latents outputs to both Apply SeedVR2 Conditioning and the sampler latent input before recombining with Merge SeedVR2 Latents.",
+    "inputs": {
+      "latent": {
+        "name": "latent",
+        "tooltip": "The VAE-encoded SeedVR2 latent to split."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Latent frames shared between adjacent chunks and crossfaded at merge; 0 = no overlap."
+      },
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = use frames_per_chunk exactly; auto = predict the largest chunk that fits free VRAM."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "The temporal chunks in sequence order."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "The effective latent-frame overlap between adjacent chunks, for Merge SeedVR2 Latents."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "display_name": "Merge SeedVR2 Latents",
+    "description": "Recombine sampled SeedVR2 latent temporal chunks into one latent, crossfading each overlap with a Hann window sized by the temporal_overlap wired from Split SeedVR2 Latent.",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "The sampled temporal chunks in sequence order."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "The temporal_overlap output of Split SeedVR2 Latent. 0 = plain concatenation."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "The recombined full-length latent."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "display_name": "Select CLIP Device",
     "description": "Place the CLIP text encoder on a specific device (default / cpu / gpu:N).\n\n- \"default\" restores the device assigned by the loader.\n- \"cpu\" pins both the load and offload device to CPU.\n- \"gpu:N\" pins the load device to the Nth available GPU.\n\nWhen the selected device does not exist on the current machine\n(e.g. a workflow built on a 2-GPU box opened on a 1-GPU box),\nthe node passes the CLIP through unchanged and logs a message\ninstead of failing.",
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index 2671b47bb3..6e50af52b7 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -359,6 +359,7 @@
     "colors": "paleta_de_colores",
     "descLabel": "descripción",
     "descPlaceholder": "descripción de esta región",
+    "grid": "Cuadrícula",
     "textLabel": "Texto",
     "textPlaceholder": "texto a renderizar (literal)",
     "typeObj": "obj",
@@ -954,6 +955,16 @@
       "title": "Diálogo no válido"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "La aplicación de escritorio de ComfyUI está esperando para iniciar sesión con tu cuenta. Continúa solo si acabas de iniciar sesión desde la aplicación de escritorio de ComfyUI.",
+    "confirmSummary": "¿Aprobar inicio de sesión en el escritorio?",
+    "expiredDetail": "La solicitud de inicio de sesión expiró o ya fue utilizada. Inicia sesión nuevamente desde la aplicación de escritorio de ComfyUI.",
+    "expiredSummary": "Error en el inicio de sesión en el escritorio",
+    "failedDetail": "Ocurrió un error al completar el inicio de sesión en el escritorio. Inicia sesión nuevamente desde la aplicación de escritorio de ComfyUI.",
+    "failedSummary": "Error en el inicio de sesión en el escritorio",
+    "successDetail": "Puedes volver a la aplicación de escritorio de ComfyUI.",
+    "successSummary": "Sesión iniciada"
+  },
   "desktopMenu": {
     "confirmQuit": "Hay flujos de trabajo abiertos sin guardar; se perderán los cambios no guardados. ¿Ignorar esto y salir?",
     "confirmReinstall": "Esto borrará su archivo extra_models_config.yaml,\ny comenzará la instalación nuevamente.\n\n¿Estás seguro?",
@@ -2854,6 +2865,8 @@
     "phantom subject": "sujeto fantasma",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "post-procesadores",
+    "pre-processors": "pre-procesadores",
     "preprocessors": "preprocesadores",
     "primitive": "primitivo",
     "qwen": "qwen",
@@ -4123,6 +4136,7 @@
       "newest": "Más reciente",
       "popular": "Popular",
       "recommended": "Recomendado",
+      "relevance": "Relevancia",
       "searchPlaceholder": "Buscar..."
     },
     "sorting": "Ordenar por",
diff --git a/src/locales/es/nodeDefs.json b/src/locales/es/nodeDefs.json
index de4ddd339e..3de3c9f47f 100644
--- a/src/locales/es/nodeDefs.json
+++ b/src/locales/es/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "semilla",
         "tooltip": "Semilla a utilizar para la generación."
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "Activa el razonamiento de optimización de prompts del modelo ('thinking') para una mejor adherencia. Puede aumentar considerablemente el tiempo de generación, especialmente en Seedream 5.0 Pro. Solo se puede desactivar para texto a imagen (no cuando se proporcionan imágenes de referencia)."
+      },
       "watermark": {
         "name": "marca de agua",
         "tooltip": "Indica si se añade una marca de agua de \"Generado por IA\" a la imagen."
@@ -2831,6 +2835,10 @@
         "name": "fondo",
         "tooltip": "Imagen opcional utilizada como fondo en el lienzo y la vista previa."
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "Cajas delimitadoras, elementos o una cadena JSON para inicializar el lienzo. Un nuevo valor ascendente inicializa el lienzo; las ediciones realizadas en el lienzo tienen prioridad y se mantienen hasta que el valor ascendente cambie nuevamente."
+      },
       "editor_state": {
         "name": "estado_del_editor",
         "tooltip": "Dibuja cajas delimitadoras y asigna a cada caja su tipo, texto, descripción y paleta de colores. Comienza con el elemento de fondo y termina con el primer plano."
@@ -2839,6 +2847,10 @@
         "name": "alto",
         "tooltip": "Alto del lienzo y de la cuadrícula de píxeles para las cajas delimitadoras."
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "Estado interno gestionado por el lienzo: el valor de bboxes ascendente que lo inicializó por última vez. Déjalo vacío para reinicializar el lienzo desde la entrada de bboxes en la próxima ejecución."
+      },
       "width": {
         "name": "ancho",
         "tooltip": "Ancho del lienzo y de la cuadrícula de píxeles para las cajas delimitadoras."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "mask"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "Previsualiza un archivo de modelo 3D sin guardarlo en el directorio de salida de ComfyUI.",
     "display_name": "Vista previa 3D",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "Previsualiza un archivo de modelo 3D sin guardarlo en el directorio de salida de ComfyUI.",
     "display_name": "Vista previa 3D (Avanzado)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "Previsualiza cualquier valor de entrada como texto.",
     "display_name": "Vista previa de cualquier",
     "inputs": {
       "preview_mode": {},
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "Previsualiza el audio sin guardarlo en el directorio de salida de ComfyUI.",
     "display_name": "Vista previa de audio",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "Previsualiza un archivo 3D de gaussian splat sin guardarlo en el directorio de salida de ComfyUI.",
     "display_name": "Vista previa de Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "Previsualiza un archivo de nube de puntos 3D sin guardarlo en el directorio de salida de ComfyUI.",
     "display_name": "Vista previa de nube de puntos",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "Guardar 3D (Avanzado)",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Archivo de modelo 3D de un nodo 3D ascendente."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "GuardarPNGAnimado",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "Guardar Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Un archivo 3D de gaussian splat."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "Guarda las imágenes de entrada en tu directorio de salida de ComfyUI.",
     "display_name": "Guardar Imagen",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "Guardar Nube de Puntos",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Archivo de nube de puntos (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "Guardar archivos SVG en disco.",
     "display_name": "NodoGuardarSVG",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "Guardar el contenido de texto en un archivo en el directorio de salida.",
+    "display_name": "Guardar Texto",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "Guarda el conjunto de datos de entrenamiento codificado (latents + conditioning) en disco para una carga eficiente durante el entrenamiento.",
     "display_name": "Guardar conjunto de datos de entrenamiento",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "Construir el condicionamiento positivo/negativo de SeedVR2 a partir de un latent de VAE.",
+    "display_name": "Aplicar Condicionamiento SeedVR2",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "El modelo SeedVR2."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "El condicionamiento positivo para muestreo."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "El condicionamiento negativo para muestreo."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "Alinea la imagen generada con la imagen original redimensionada y aplica corrección de color.",
+    "display_name": "Posprocesar salida de SeedVR2",
+    "inputs": {
+      "color_correction_method": {
+        "name": "método_de_corrección_de_color",
+        "tooltip": "Método para igualar los colores de la imagen generada con la imagen original. lab: transfiere el color en el espacio CIELAB, preservando el detalle (más fiel). wavelet: transfiere el color de baja frecuencia, manteniendo el detalle de alta frecuencia mejorado. adain: iguala la media/desviación estándar por canal (más rápido, tinte global). none: omite la transferencia de color (solo alineación geométrica)."
+      },
+      "images": {
+        "name": "imágenes",
+        "tooltip": "La imagen generada a procesar."
+      },
+      "original_resized_images": {
+        "name": "imágenes_redimensionadas_originales",
+        "tooltip": "La imagen original redimensionada antes del preprocesamiento, usada como referencia."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "imágenes",
+        "tooltip": "La imagen alineada y corregida en color."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "Rellena una imagen redimensionada para el modelo SeedVR2. El canal alfa se elimina. El nodo Posprocesar salida de SeedVR2 lo vuelve a aplicar desde la imagen original redimensionada.",
+    "display_name": "Preprocesar entrada de SeedVR2",
+    "inputs": {
+      "resized_images": {
+        "name": "imágenes_redimensionadas",
+        "tooltip": "La imagen redimensionada a procesar."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "imágenes",
+        "tooltip": "La imagen rellenada para la codificación VAE."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "Divide un latente de video SeedVR2 en fragmentos temporales superpuestos lo suficientemente pequeños como para muestrear uno a la vez dentro de la VRAM, conectando las salidas de latentes tanto a Aplicar condicionamiento SeedVR2 como a la entrada de latente del muestreador antes de recombinar con Unir latentes de SeedVR2.",
+    "display_name": "Dividir latente de SeedVR2",
+    "inputs": {
+      "chunking_mode": {
+        "name": "modo_de_fragmentación",
+        "tooltip": "manual = usa exactamente frames_per_chunk; auto = predice el fragmento más grande que cabe en la VRAM libre."
+      },
+      "latent": {
+        "name": "latente",
+        "tooltip": "El latente de SeedVR2 codificado por VAE a dividir."
+      },
+      "temporal_overlap": {
+        "name": "superposición_temporal",
+        "tooltip": "Fotogramas latentes compartidos entre fragmentos adyacentes y fundidos al unir; 0 = sin superposición."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latentes",
+        "tooltip": "Los fragmentos temporales en orden secuencial."
+      },
+      "1": {
+        "name": "superposición_temporal",
+        "tooltip": "La superposición efectiva de fotogramas latentes entre fragmentos adyacentes, para Unir latentes de SeedVR2."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "Recombina los fragmentos temporales muestreados del latente SeedVR2 en un solo latente, fundiendo cada superposición con una ventana de Hann del tamaño de la superposición_temporal conectada desde Dividir latente de SeedVR2.",
+    "display_name": "Unir latentes de SeedVR2",
+    "inputs": {
+      "latents": {
+        "name": "latentes",
+        "tooltip": "Los fragmentos temporales muestreados en orden secuencial."
+      },
+      "temporal_overlap": {
+        "name": "superposición_temporal",
+        "tooltip": "La salida superposición_temporal de Dividir latente de SeedVR2. 0 = concatenación simple."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latente",
+        "tooltip": "El latente recombinado de longitud completa."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "Coloca el codificador de texto CLIP en un dispositivo específico (default / cpu / gpu:N).\n\n- \"default\" restaura el dispositivo asignado por el cargador.\n- \"cpu\" fija tanto la carga como la descarga en la CPU.\n- \"gpu:N\" fija el dispositivo de carga en la N-ésima GPU disponible.\n\nCuando el dispositivo seleccionado no existe en la máquina actual\n(por ejemplo, un flujo de trabajo creado en una máquina con 2 GPU abierto en una con 1 GPU),\nel nodo pasa el CLIP sin cambios y registra un mensaje\nen lugar de fallar.",
     "display_name": "Seleccionar Dispositivo CLIP",
diff --git a/src/locales/fa/main.json b/src/locales/fa/main.json
index fbd023eaae..94824a15c4 100644
--- a/src/locales/fa/main.json
+++ b/src/locales/fa/main.json
@@ -359,6 +359,7 @@
     "colors": "پالت رنگ",
     "descLabel": "توضیحات",
     "descPlaceholder": "توضیحات این ناحیه",
+    "grid": "شبکه",
     "textLabel": "متن",
     "textPlaceholder": "متن برای نمایش (عیناً)",
     "typeObj": "obj",
@@ -954,6 +955,16 @@
       "title": "گفت‌وگوی نامعتبر"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "برنامه دسکتاپ ComfyUI در انتظار ورود به حساب شما است. فقط در صورتی ادامه دهید که همین حالا ورود را از برنامه دسکتاپ ComfyUI آغاز کرده‌اید.",
+    "confirmSummary": "تأیید ورود دسکتاپ",
+    "expiredDetail": "درخواست ورود منقضی شده یا قبلاً استفاده شده است. ورود را دوباره از برنامه دسکتاپ ComfyUI آغاز کنید.",
+    "expiredSummary": "ورود دسکتاپ ناموفق بود",
+    "failedDetail": "در تکمیل ورود دسکتاپ مشکلی پیش آمد. ورود را دوباره از برنامه دسکتاپ ComfyUI آغاز کنید.",
+    "failedSummary": "ورود دسکتاپ ناموفق بود",
+    "successDetail": "می‌توانید به برنامه دسکتاپ ComfyUI بازگردید.",
+    "successSummary": "ورود انجام شد"
+  },
   "desktopMenu": {
     "confirmQuit": "جریان‌های کاری ذخیره‌نشده باز هستند؛ هرگونه تغییر ذخیره‌نشده از بین خواهد رفت. آیا می‌خواهید بدون توجه به این موضوع خارج شوید؟",
     "confirmReinstall": "این کار فایل extra_models_config.yaml شما را پاک می‌کند\nو نصب را دوباره آغاز می‌کند.\n\nآیا مطمئن هستید؟",
@@ -2854,6 +2865,8 @@
     "phantom subject": "موضوع فانتوم",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "پردازش‌گرهای پسین",
+    "pre-processors": "پردازش‌گرهای پیشین",
     "preprocessors": "پیش‌پردازنده‌ها",
     "primitive": "ابتدایی",
     "qwen": "qwen",
@@ -4135,6 +4148,7 @@
       "newest": "جدیدترین",
       "popular": "محبوب",
       "recommended": "پیشنهادی",
+      "relevance": "مرتبط‌ترین",
       "searchPlaceholder": "جستجو..."
     },
     "sorting": "مرتب‌سازی بر اساس",
diff --git a/src/locales/fa/nodeDefs.json b/src/locales/fa/nodeDefs.json
index f4f22c3c80..132738ce46 100644
--- a/src/locales/fa/nodeDefs.json
+++ b/src/locales/fa/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "seed",
         "tooltip": "Seed مورد استفاده برای تولید."
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "فعال‌سازی استدلال بهینه‌سازی پرامپت مدل («thinking») برای تبعیت بهتر. می‌تواند زمان تولید را به طور قابل توجهی افزایش دهد — به ویژه در Seedream ۵.۰ Pro. فقط برای تبدیل متن به تصویر قابل غیرفعال‌سازی است (نه زمانی که تصاویر مرجع ارائه شده‌اند)."
+      },
       "watermark": {
         "name": "watermark",
         "tooltip": "آیا واترمارک «تولید شده توسط هوش مصنوعی» به تصویر اضافه شود یا خیر."
@@ -2831,6 +2835,10 @@
         "name": "background",
         "tooltip": "تصویر اختیاری که به عنوان پس‌زمینه در بوم و پیش‌نمایش استفاده می‌شود."
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "جعبه‌های مرزی، عناصر یا یک رشته JSON برای مقداردهی اولیه بوم (canvas). مقدار جدید بالادستی بوم را مقداردهی اولیه می‌کند؛ ویرایش‌های انجام‌شده روی بوم در اولویت هستند و تا زمانی که مقدار بالادستی دوباره تغییر کند، حفظ می‌شوند."
+      },
       "editor_state": {
         "name": "editor_state",
         "tooltip": "جعبه‌های مرزی را رسم کنید و نوع هر جعبه، متن، توضیح و پالت رنگ را تعیین کنید. با عنصر پس‌زمینه شروع و با پیش‌زمینه پایان دهید."
@@ -2839,6 +2847,10 @@
         "name": "height",
         "tooltip": "ارتفاع بوم و شبکه پیکسلی برای جعبه‌های مرزی."
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "وضعیت داخلی مدیریت‌شده توسط بوم: آخرین مقدار bboxes بالادستی که آن را مقداردهی اولیه کرده است. برای مقداردهی اولیه مجدد بوم از ورودی bboxes در اجرای بعدی، این قسمت را خالی بگذارید."
+      },
       "width": {
         "name": "width",
         "tooltip": "عرض بوم و شبکه پیکسلی برای جعبه‌های مرزی."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "ماسک"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "پیش‌نمایش یک فایل مدل سه‌بعدی بدون ذخیره آن در پوشه خروجی ComfyUI.",
     "display_name": "پیش‌نمایش سه‌بعدی و انیمیشن",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "پیش‌نمایش یک فایل مدل سه‌بعدی بدون ذخیره آن در پوشه خروجی ComfyUI.",
     "display_name": "پیش‌نمایش سه‌بعدی (پیشرفته)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "پیش‌نمایش هر مقدار ورودی به صورت متن.",
     "display_name": "پیش‌نمایش به صورت متن",
     "inputs": {
       "preview_mode": {},
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "پیش‌نمایش صدا بدون ذخیره آن در پوشه خروجی ComfyUI.",
     "display_name": "پیش‌نمایش صوت",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "پیش‌نمایش یک فایل سه‌بعدی gaussian splat بدون ذخیره آن در پوشه خروجی ComfyUI.",
     "display_name": "پیش‌نمایش Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "پیش‌نمایش یک فایل سه‌بعدی point cloud بدون ذخیره آن در پوشه خروجی ComfyUI.",
     "display_name": "پیش‌نمایش Point Cloud",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "ذخیره سه‌بعدی (پیشرفته)",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "فایل مدل سه‌بعدی از یک node سه‌بعدی بالادستی."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "ذخیره PNG متحرک",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "ذخیره Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "یک فایل سه‌بعدی gaussian splat."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "تصاویر ورودی را در پوشه خروجی ComfyUI شما ذخیره می‌کند.",
     "display_name": "ذخیره تصویر",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "ذخیره Point Cloud",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "فایل point cloud‏ (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "فایل‌های SVG را روی دیسک ذخیره کنید.",
     "display_name": "ذخیره SVG Node",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "ذخیره محتوای متنی در یک فایل در پوشه خروجی.",
+    "display_name": "ذخیره متن",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "ذخیره مجموعه داده آموزش کدگذاری‌شده (latentها + conditioning) روی دیسک برای بارگذاری سریع‌تر در زمان آموزش.",
     "display_name": "ذخیره مجموعه داده آموزشی",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "ساخت conditioning مثبت/منفی SeedVR2 از یک latent مدل VAE.",
+    "display_name": "اعمال Conditioning مدل SeedVR2",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "مدل SeedVR2."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "conditioning مثبت برای نمونه‌گیری."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "conditioning منفی برای نمونه‌گیری."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "تراز کردن تصویر تولیدشده با تصویر اصلی تغییر اندازه یافته و اعمال تصحیح رنگ.",
+    "display_name": "پردازش پس از خروجی SeedVR2",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "روش تطبیق رنگ تصویر تولیدشده با تصویر اصلی. lab: انتقال رنگ در فضای CIELAB با حفظ جزئیات (وفادارترین). wavelet: انتقال رنگ فرکانس پایین و حفظ جزئیات فرکانس بالای بزرگ‌نمایی شده. adain: تطبیق میانگین/انحراف معیار هر کانال (سریع‌ترین، تغییر رنگ کلی). none: بدون انتقال رنگ (فقط تراز هندسی)."
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "تصویر تولیدشده برای پردازش."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "تصویر اصلی تغییر اندازه یافته قبل از پیش‌پردازش، به عنوان مرجع استفاده می‌شود."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "تصویر تراز و تصحیح رنگ شده."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "افزودن حاشیه به تصویر تغییر اندازه یافته برای مدل SeedVR2. کانال آلفا حذف می‌شود. نود پردازش پس از خروجی SeedVR2 آن را از تصویر اصلی تغییر اندازه یافته مجدداً اعمال می‌کند.",
+    "display_name": "پیش‌پردازش ورودی SeedVR2",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "تصویر تغییر اندازه یافته برای پردازش."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "تصویر دارای حاشیه برای کدگذاری VAE."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "تقسیم نهفته ویدیویی SeedVR2 به بخش‌های زمانی همپوشان کوچک‌تر به اندازه‌ای که بتوان هر بار یکی را در VRAM نمونه‌برداری کرد؛ خروجی‌های نهفته به هر دو Apply SeedVR2 Conditioning و ورودی نهفته sampler متصل می‌شوند و سپس با Merge SeedVR2 Latents دوباره ترکیب می‌شوند.",
+    "display_name": "تقسیم نهفته SeedVR2",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = استفاده دقیق از frames_per_chunk؛ auto = پیش‌بینی بزرگ‌ترین بخش که در VRAM آزاد جا می‌گیرد."
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "نهفته SeedVR2 کدگذاری‌شده با VAE برای تقسیم."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "فریم‌های نهفته مشترک بین بخش‌های مجاور که هنگام ادغام crossfade می‌شوند؛ ۰ = بدون همپوشانی."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "بخش‌های زمانی به ترتیب توالی."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "میزان همپوشانی فریم‌های نهفته بین بخش‌های مجاور، برای Merge SeedVR2 Latents."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "ترکیب مجدد بخش‌های زمانی نمونه‌برداری‌شده نهفته SeedVR2 به یک نهفته، با crossfade هر همپوشانی با پنجره Hann به اندازه temporal_overlap که از Split SeedVR2 Latent متصل شده است.",
+    "display_name": "ادغام نهفته‌های SeedVR2",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "بخش‌های زمانی نمونه‌برداری‌شده به ترتیب توالی."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "خروجی temporal_overlap از Split SeedVR2 Latent. ۰ = الحاق ساده."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "نهفته ترکیب‌شده با طول کامل."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "رمزگذار متنی CLIP را روی یک دستگاه خاص قرار دهید (پیش‌فرض / cpu / gpu:N).\n\n- «default» دستگاه اختصاص داده‌شده توسط loader را بازمی‌گرداند.\n- «cpu» هر دو دستگاه بارگذاری و offload را به CPU اختصاص می‌دهد.\n- «gpu:N» دستگاه بارگذاری را به Nامین GPU موجود اختصاص می‌دهد.\n\nزمانی که دستگاه انتخاب‌شده روی سیستم فعلی وجود نداشته باشد\n(مثلاً یک workflow ساخته‌شده روی سیستمی با ۲ GPU که روی سیستمی با ۱ GPU باز می‌شود)،\nnode بدون تغییر CLIP را عبور می‌دهد و به جای خطا، پیامی را ثبت می‌کند.",
     "display_name": "انتخاب دستگاه CLIP",
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 30ebbf7077..46c95bcc99 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -359,6 +359,7 @@
     "colors": "palette_de_couleurs",
     "descLabel": "description",
     "descPlaceholder": "description de cette région",
+    "grid": "Grille",
     "textLabel": "Texte",
     "textPlaceholder": "texte à afficher (tel quel)",
     "typeObj": "objet",
@@ -954,6 +955,16 @@
       "title": "Dialogue invalide"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "L’application de bureau ComfyUI attend de se connecter avec votre compte. Continuez uniquement si vous venez de lancer la connexion depuis l’application de bureau ComfyUI.",
+    "confirmSummary": "Approuver la connexion sur le bureau ?",
+    "expiredDetail": "La demande de connexion a expiré ou a déjà été utilisée. Relancez la connexion depuis l’application de bureau ComfyUI.",
+    "expiredSummary": "Échec de la connexion sur le bureau",
+    "failedDetail": "Une erreur est survenue lors de la connexion sur le bureau. Relancez la connexion depuis l’application de bureau ComfyUI.",
+    "failedSummary": "Échec de la connexion sur le bureau",
+    "successDetail": "Vous pouvez retourner sur l’application de bureau ComfyUI.",
+    "successSummary": "Connecté"
+  },
   "desktopMenu": {
     "confirmQuit": "Il y a des flux de travail non enregistrés ouverts; toutes les modifications non enregistrées seront perdues. Ignorer cela et quitter?",
     "confirmReinstall": "Cela effacera votre fichier extra_models_config.yaml,\net commencera l'installation à nouveau.\n\nÊtes-vous sûr ?",
@@ -2854,6 +2865,8 @@
     "phantom subject": "sujet fantôme",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "post-traitements",
+    "pre-processors": "pré-traitements",
     "preprocessors": "préprocesseurs",
     "primitive": "primitif",
     "qwen": "qwen",
@@ -4123,6 +4136,7 @@
       "newest": "Plus récent",
       "popular": "Populaire",
       "recommended": "Recommandé",
+      "relevance": "Pertinence",
       "searchPlaceholder": "Rechercher..."
     },
     "sorting": "Trier par",
diff --git a/src/locales/fr/nodeDefs.json b/src/locales/fr/nodeDefs.json
index ccb72ef183..f7abe8a921 100644
--- a/src/locales/fr/nodeDefs.json
+++ b/src/locales/fr/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "graine",
         "tooltip": "Graine à utiliser pour la génération."
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "Activez le raisonnement d'optimisation du prompt du modèle (« thinking ») pour une meilleure conformité. Peut augmenter considérablement le temps de génération — notamment sur Seedream 5.0 Pro. Ne peut être désactivé que pour le texte-vers-image (pas lorsque des images de référence sont fournies)."
+      },
       "watermark": {
         "name": "filigrane",
         "tooltip": "Ajouter ou non un filigrane « Généré par IA » à l’image."
@@ -2831,6 +2835,10 @@
         "name": "arrière-plan",
         "tooltip": "Image optionnelle utilisée comme arrière-plan sur la toile et dans l’aperçu."
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "Boîtes englobantes, éléments ou une chaîne JSON pour initialiser le canvas. Une nouvelle valeur en amont initialise le canvas ; les modifications effectuées sur le canvas sont prioritaires et conservées jusqu'à ce que la valeur en amont change à nouveau."
+      },
       "editor_state": {
         "name": "état_éditeur",
         "tooltip": "Dessinez des boîtes englobantes et définissez pour chaque boîte le type, le texte, la description, la palette de couleurs. Commencez par l’élément d’arrière-plan et terminez par le premier plan."
@@ -2839,6 +2847,10 @@
         "name": "hauteur",
         "tooltip": "Hauteur de la toile et de la grille de pixels pour les boîtes englobantes."
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "État interne géré par le canvas : la dernière valeur bboxes en amont qui l'a initialisé. Laissez vide pour réinitialiser le canvas à partir de l'entrée bboxes lors de la prochaine exécution."
+      },
       "width": {
         "name": "largeur",
         "tooltip": "Largeur de la toile et de la grille de pixels pour les boîtes englobantes."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "mask"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "Prévisualisez un fichier de modèle 3D sans l'enregistrer dans le répertoire de sortie ComfyUI.",
     "display_name": "Aperçu 3D",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "Prévisualisez un fichier de modèle 3D sans l'enregistrer dans le répertoire de sortie ComfyUI.",
     "display_name": "Aperçu 3D (Avancé)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "Prévisualisez n'importe quelle valeur d'entrée sous forme de texte.",
     "display_name": "Aperçu de n'importe quel",
     "inputs": {
       "preview_mode": {},
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "Prévisualisez l'audio sans l'enregistrer dans le répertoire de sortie ComfyUI.",
     "display_name": "AperçuAudio",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "Prévisualisez un fichier 3D gaussian splat sans l'enregistrer dans le répertoire de sortie ComfyUI.",
     "display_name": "Aperçu Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "Prévisualisez un fichier 3D de nuage de points sans l'enregistrer dans le répertoire de sortie ComfyUI.",
     "display_name": "Aperçu Nuage de Points",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "Enregistrer 3D (Avancé)",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Fichier de modèle 3D provenant d'un nœud 3D en amont."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "EnregistrerPNGAnimé",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "Enregistrer Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Un fichier 3D gaussian splat."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "Enregistre les images d'entrée dans votre répertoire de sortie ComfyUI.",
     "display_name": "Enregistrer Image",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "Enregistrer le nuage de points",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Fichier nuage de points (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "Enregistrer les fichiers SVG sur le disque.",
     "display_name": "NoeudEnregistrerSVG",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "Enregistrer le contenu texte dans un fichier du répertoire de sortie.",
+    "display_name": "Enregistrer le texte",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "Enregistrer l'ensemble d'entraînement encodé (latents + conditionnement) sur le disque pour un chargement efficace pendant l'entraînement.",
     "display_name": "Enregistrer l'ensemble d'entraînement",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "Générer le conditionnement positif/négatif SeedVR2 à partir d'un latent VAE.",
+    "display_name": "Appliquer le conditionnement SeedVR2",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "Le modèle SeedVR2."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "Le conditionnement positif pour l'échantillonnage."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "Le conditionnement négatif pour l'échantillonnage."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "Aligne l’image générée avec l’image redimensionnée d’origine et applique une correction des couleurs.",
+    "display_name": "Post-traitement de la sortie SeedVR2",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "Méthode pour faire correspondre les couleurs de l’image générée à l’image d’origine. lab : transfert de couleur dans l’espace CIELAB, préservant les détails (le plus fidèle). wavelet : transfert des couleurs basses fréquences, en conservant les détails haute fréquence suréchantillonnés. adain : correspondance moyenne/écart-type par canal (le plus rapide, teinte globale). none : pas de transfert de couleur (alignement géométrique uniquement)."
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "L’image générée à traiter."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "L’image redimensionnée d’origine avant prétraitement, utilisée comme référence."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "L’image alignée et corrigée en couleur."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "Ajoute un remplissage à une image redimensionnée pour le modèle SeedVR2. Le canal alpha est supprimé. Le nœud Post-traitement SeedVR2 réapplique le canal alpha à partir de l’image redimensionnée d’origine.",
+    "display_name": "Prétraitement de l’entrée SeedVR2",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "L’image redimensionnée à traiter."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "L’image rembourrée pour l’encodage VAE."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "Découpe un latent vidéo SeedVR2 en segments temporels qui se chevauchent, suffisamment petits pour être traités un à un dans la VRAM. Les sorties latentes sont connectées à la fois à Appliquer le conditionnement SeedVR2 et à l’entrée latente du sampler, avant de les recombiner avec Fusionner les latents SeedVR2.",
+    "display_name": "Découper le latent SeedVR2",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = utilise exactement frames_per_chunk ; auto = prédit le plus grand segment possible selon la VRAM disponible."
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "Le latent SeedVR2 encodé par VAE à découper."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Images latentes partagées entre segments adjacents et fondues lors de la fusion ; 0 = pas de chevauchement."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "Les segments temporels dans l’ordre de la séquence."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "Le chevauchement effectif d’images latentes entre segments adjacents, pour Fusionner les latents SeedVR2."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "Recombine les segments temporels latents SeedVR2 échantillonnés en un seul latent, en fondant chaque chevauchement avec une fenêtre de Hann dimensionnée par le temporal_overlap issu de Découper le latent SeedVR2.",
+    "display_name": "Fusionner les latents SeedVR2",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "Les segments temporels échantillonnés dans l’ordre de la séquence."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "La sortie temporal_overlap de Découper le latent SeedVR2. 0 = simple concaténation."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "Le latent recombiné sur toute la durée."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "Place l’encodeur de texte CLIP sur un périphérique spécifique (default / cpu / gpu:N).\n\n- « default » restaure le périphérique assigné par le chargeur.\n- « cpu » force le chargement et le déchargement sur le CPU.\n- « gpu:N » force le chargement sur le N-ième GPU disponible.\n\nLorsque le périphérique sélectionné n’existe pas sur la machine actuelle\n(par exemple, un workflow créé sur une machine à 2 GPU ouvert sur une machine à 1 GPU),\nle nœud transmet le CLIP inchangé et enregistre un message\nau lieu d’échouer.",
     "display_name": "Sélectionner le périphérique CLIP",
diff --git a/src/locales/he/main.json b/src/locales/he/main.json
index fb46c2ec39..a8f6be62bf 100644
--- a/src/locales/he/main.json
+++ b/src/locales/he/main.json
@@ -359,6 +359,7 @@
     "colors": "פלטת צבעים",
     "descLabel": "תיאור",
     "descPlaceholder": "תיאור האזור הזה",
+    "grid": "רשת",
     "textLabel": "טקסט",
     "textPlaceholder": "טקסט להצגה (מילולי)",
     "typeObj": "אובייקט",
@@ -954,6 +955,16 @@
       "title": "חלון לא תקין"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "אפליקציית ComfyUI במחשב ממתינה לכניסה עם החשבון שלך. המשך רק אם התחלת כעת את תהליך הכניסה מאפליקציית ComfyUI במחשב.",
+    "confirmSummary": "לאשר כניסה משולחן העבודה?",
+    "expiredDetail": "בקשת הכניסה פגה או כבר נוצלה. יש להתחיל מחדש את תהליך הכניסה מאפליקציית ComfyUI במחשב.",
+    "expiredSummary": "הכניסה משולחן העבודה נכשלה",
+    "failedDetail": "אירעה שגיאה במהלך השלמת הכניסה משולחן העבודה. יש להתחיל מחדש את תהליך הכניסה מאפליקציית ComfyUI במחשב.",
+    "failedSummary": "הכניסה משולחן העבודה נכשלה",
+    "successDetail": "ניתן לחזור לאפליקציית ComfyUI במחשב.",
+    "successSummary": "הכניסה בוצעה בהצלחה"
+  },
   "desktopMenu": {
     "confirmQuit": "ישנם תהליכי עבודה פתוחים שלא נשמרו; כל שינוי שלא נשמר יאבד. להתעלם מכך ולצאת?",
     "confirmReinstall": "פעולה זו תנקה את קובץ extra_models_config.yaml שלך,\nותתחיל את ההתקנה מחדש.\n\nהאם אתה בטוח?",
@@ -2854,6 +2865,8 @@
     "phantom subject": "phantom subject",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "מעבדי פוסט",
+    "pre-processors": "מעבדי פרה",
     "preprocessors": "preprocessors",
     "primitive": "primitive",
     "qwen": "qwen",
@@ -4135,6 +4148,7 @@
       "newest": "החדשים ביותר",
       "popular": "פופולרי",
       "recommended": "מומלץ",
+      "relevance": "רלוונטיות",
       "searchPlaceholder": "חיפוש..."
     },
     "sorting": "מיון לפי",
diff --git a/src/locales/he/nodeDefs.json b/src/locales/he/nodeDefs.json
index b467a397a7..76f0a39e21 100644
--- a/src/locales/he/nodeDefs.json
+++ b/src/locales/he/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "seed",
         "tooltip": "זרע (seed) לשימוש ביצירה."
       },
+      "thinking": {
+        "name": "חשיבה",
+        "tooltip": "הפעלת מנגנון אופטימיזציית הפרומפט ('חשיבה') של המודל לשיפור ההתאמה. עלול להאריך משמעותית את זמן ההפקה — במיוחד ב-Seedream 5.0 Pro. ניתן לבטל רק עבור טקסט-לתמונה (לא כאשר מסופקות תמונות ייחוס)."
+      },
       "watermark": {
         "name": "watermark",
         "tooltip": "האם להוסיף סימן מים \"AI generated\" לתמונה."
@@ -2831,6 +2835,10 @@
         "name": "רקע",
         "tooltip": "תמונה אופציונלית לשימוש כרקע בקנבס ובתצוגה המקדימה."
       },
+      "bboxes": {
+        "name": "תיבות תחימה",
+        "tooltip": "תיבות תחימה, אלמנטים, או מחרוזת JSON לאתחול הקנבס. ערך חדש במעלה הזרם מאתחל את הקנבס; עריכות שבוצעו בקנבס גוברות ונשמרות עד שהערך במעלה הזרם משתנה שוב."
+      },
       "editor_state": {
         "name": "מצב עורך",
         "tooltip": "צייר תיבות גבול והגדר לכל תיבה סוג, טקסט, תיאור, ופלטת צבעים. התחל עם רכיב הרקע תחילה והקדמה בסוף."
@@ -2839,6 +2847,10 @@
         "name": "גובה",
         "tooltip": "גובה הקנבס ורשת הפיקסלים עבור תיבות הגבול."
       },
+      "last_incoming": {
+        "name": "ערך נכנס אחרון",
+        "tooltip": "מצב פנימי המנוהל על ידי הקנבס: ערך תיבות התחימה האחרון שאיתחל אותו. השאר ריק כדי לאתחל מחדש את הקנבס מהקלט bboxes בהרצה הבאה."
+      },
       "width": {
         "name": "רוחב",
         "tooltip": "רוחב הקנבס ורשת הפיקסלים עבור תיבות הגבול."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "mask"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "תצוגה מקדימה של קובץ מודל תלת-ממדי מבלי לשמור אותו בתיקיית הפלט של ComfyUI.",
     "display_name": "תצוגה מקדימה בתלת-ממד ואנימציה",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "תצוגה מקדימה של קובץ מודל תלת-ממדי מבלי לשמור אותו בתיקיית הפלט של ComfyUI.",
     "display_name": "תצוגה מקדימה בתלת-ממד (מתקדם)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "תצוגה מקדימה של כל ערך קלט כטקסט.",
     "display_name": "תצוגה מקדימה כטקסט",
     "inputs": {
       "preview_mode": {},
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "תצוגה מקדימה של האודיו מבלי לשמור אותו בתיקיית הפלט של ComfyUI.",
     "display_name": "תצוגה מקדימה של שמע",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "תצוגה מקדימה של קובץ gaussian splat תלת-ממדי מבלי לשמור אותו בתיקיית הפלט של ComfyUI.",
     "display_name": "תצוגה מקדימה Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "תצוגה מקדימה של קובץ point cloud תלת-ממדי מבלי לשמור אותו בתיקיית הפלט של ComfyUI.",
     "display_name": "תצוגה מקדימה של ענן נקודות",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "שמירת תלת-ממד (מתקדם)",
+    "inputs": {
+      "camera_info": {
+        "name": "מידע מצלמה"
+      },
+      "filename_prefix": {
+        "name": "קידומת שם קובץ"
+      },
+      "height": {
+        "name": "גובה"
+      },
+      "model_3d": {
+        "name": "מודל תלת-ממד",
+        "tooltip": "קובץ מודל תלת-ממדי מצומת תלת-ממד במעלה הזרם."
+      },
+      "model_3d_info": {
+        "name": "מידע מודל תלת-ממד"
+      },
+      "viewport_state": {
+        "name": "מצב תצוגה"
+      },
+      "width": {
+        "name": "רוחב"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "מודל תלת-ממד",
+        "tooltip": null
+      },
+      "1": {
+        "name": "מידע מודל תלת-ממד",
+        "tooltip": null
+      },
+      "2": {
+        "name": "מידע מצלמה",
+        "tooltip": null
+      },
+      "3": {
+        "name": "רוחב",
+        "tooltip": null
+      },
+      "4": {
+        "name": "גובה",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "שמור PNG מונפש",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "שמירת Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "קובץ Gaussian Splat תלת-ממדי."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "שומר את התמונות שהוזנו בתיקיית הפלט של ComfyUI.",
     "display_name": "שמירת תמונה",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "שמירת ענן נקודות",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "קובץ ענן נקודות (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "שמירת קבצי SVG בדיסק.",
     "display_name": "שמירת SVG",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "שמירת תוכן טקסט לקובץ בתיקיית הפלט.",
+    "display_name": "שמירת טקסט",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "שמירת מערך נתוני אימון מקודד (latents + conditioning) בדיסק לטעינה יעילה במהלך האימון.",
     "display_name": "שמירת מערך נתוני אימון",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "בניית Conditioning חיובי/שלילי של SeedVR2 מתוך latent של VAE.",
+    "display_name": "החלת SeedVR2 Conditioning",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "מודל SeedVR2."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "ה-Conditioning החיובי לדגימה."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "ה-Conditioning השלילי לדגימה."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "יישור התמונה שנוצרה עם התמונה המקורית ששונתה בגודלה ויישום תיקון צבע.",
+    "display_name": "עיבוד פוסט ל-SeedVR2",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "שיטה להתאמת צבעי התמונה שנוצרה לתמונה המקורית. lab: העברת צבע במרחב CIELAB, תוך שמירה על פרטים (הכי נאמן). wavelet: העברת צבע בתדר נמוך, תוך שמירה על פרטי תדר גבוה מוגדלים. adain: התאמת ממוצע/סטיית תקן לכל ערוץ (הכי מהיר, גוון גלובלי). none: דילוג על העברת צבע (רק יישור גיאומטרי)."
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "התמונה שנוצרה לעיבוד."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "התמונה המקורית ששונתה בגודלה לפני עיבוד מקדים, משמשת כהפניה."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "התמונה המיושרת עם תיקון צבע."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "הוספת ריפוד לתמונה ששונתה בגודלה עבור מודל SeedVR2. ערוץ אלפא מוסר. הצומת 'עיבוד פוסט ל-SeedVR2' מחזיר אותו מהתמונה המקורית ששונתה בגודלה.",
+    "display_name": "עיבוד מקדים ל-SeedVR2",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "התמונה ששונתה בגודלה לעיבוד."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "התמונה המרופדת לקידוד VAE."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "פיצול לטנט וידאו של SeedVR2 לקטעי זמן חופפים בגודל קטן מספיק לדגימה בודדת בזיכרון VRAM, חיבור פלטי לטנט גם ל-Apply SeedVR2 Conditioning וגם לקלט הלטנט של הסמפלר לפני איחוד מחדש עם Merge SeedVR2 Latents.",
+    "display_name": "פיצול לטנט SeedVR2",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = השתמש בדיוק ב-frames_per_chunk; auto = חיזוי הקטע הגדול ביותר שיכול להיכנס ל-VRAM פנוי."
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "הלטנט של SeedVR2 המקודד ב-VAE לפיצול."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "פריימי לטנט משותפים בין קטעים סמוכים וממוזגים בהצלבה; 0 = ללא חפיפה."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "הקטעים הזמניים בסדר רצף."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "חפיפת פריימי לטנט אפקטיבית בין קטעים סמוכים, עבור Merge SeedVR2 Latents."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "איחוד מחדש של קטעי זמן של לטנט SeedVR2 לדגימה אחת, עם הצלבה של כל חפיפה באמצעות חלון Hann בגודל temporal_overlap שמחובר מ-Split SeedVR2 Latent.",
+    "display_name": "איחוד לטנטים של SeedVR2",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "קטעי הזמן שנדגמו בסדר רצף."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "פלט temporal_overlap של Split SeedVR2 Latent. 0 = שרשור רגיל."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "הלטנט המאוחד באורך מלא."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "מקם את מקודד הטקסט של CLIP על התקן מסוים (default / cpu / gpu:N).\n\n- \"default\" משחזר את ההתקן שהוקצה על ידי הטוען.\n- \"cpu\" מקבע את ההתקן לטעינה ופריקה ל-CPU.\n- \"gpu:N\" מקבע את ההתקן לטעינה ל-GPU ה-N הזמין.\n\nכאשר ההתקן שנבחר אינו קיים במחשב הנוכחי\n(למשל תהליך עבודה שנבנה על מחשב עם 2-GPU ונפתח על מחשב עם 1-GPU),\nהצומת מעביר את ה-CLIP ללא שינוי ורק רושם הודעה\nבמקום להיכשל.",
     "display_name": "בחר התקן CLIP",
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index 8e96ab30ff..f007372a6a 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -359,6 +359,7 @@
     "colors": "カラーパレット",
     "descLabel": "説明",
     "descPlaceholder": "この領域の説明",
+    "grid": "グリッド",
     "textLabel": "テキスト",
     "textPlaceholder": "表示するテキスト（そのまま）",
     "typeObj": "obj",
@@ -954,6 +955,16 @@
       "title": "無効なダイアログ"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "ComfyUIデスクトップアプリがあなたのアカウントでサインインを待機しています。ComfyUIデスクトップアプリからサインインを開始した場合のみ続行してください。",
+    "confirmSummary": "デスクトップサインインを承認しますか？",
+    "expiredDetail": "サインインリクエストの有効期限が切れたか、すでに使用されています。ComfyUIデスクトップアプリから再度サインインを開始してください。",
+    "expiredSummary": "デスクトップサインインに失敗しました",
+    "failedDetail": "デスクトップサインインの完了中に問題が発生しました。ComfyUIデスクトップアプリから再度サインインを開始してください。",
+    "failedSummary": "デスクトップサインインに失敗しました",
+    "successDetail": "ComfyUIデスクトップアプリに戻ることができます。",
+    "successSummary": "サインインしました"
+  },
   "desktopMenu": {
     "confirmQuit": "保存されていないワークフローを終了しようとしています。保存されていない変更はすべて失われます。これを無視して終了しますか？",
     "confirmReinstall": "これにより、extra_models_config.yamlファイルがクリアされ、再インストールが開始されます。本当によろしいですか？",
@@ -2854,6 +2865,8 @@
     "phantom subject": "ファントムサブジェクト",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "ポストプロセッサー",
+    "pre-processors": "プリプロセッサー",
     "preprocessors": "前処理",
     "primitive": "プリミティブ",
     "qwen": "qwen",
@@ -4123,6 +4136,7 @@
       "newest": "新着順",
       "popular": "人気",
       "recommended": "おすすめ",
+      "relevance": "関連性",
       "searchPlaceholder": "検索..."
     },
     "sorting": "並び替え",
diff --git a/src/locales/ja/nodeDefs.json b/src/locales/ja/nodeDefs.json
index ca92c10a7b..792f989516 100644
--- a/src/locales/ja/nodeDefs.json
+++ b/src/locales/ja/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "シード",
         "tooltip": "生成に使用するシード。"
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "モデルのプロンプト最適化推論（「thinking」）を有効にして、より忠実な生成を実現します。生成時間が大幅に増加する場合があります（特にSeedream 5.0 Proで顕著です）。テキストから画像生成の場合のみ無効化できます（参照画像が指定されている場合は無効化できません）。"
+      },
       "watermark": {
         "name": "ウォーターマーク",
         "tooltip": "画像に「AI生成」のウォーターマークを追加するかどうか。"
@@ -2831,6 +2835,10 @@
         "name": "背景画像",
         "tooltip": "キャンバスやプレビューで背景として使用する画像（任意）。"
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "バウンディングボックス、要素、またはキャンバスを初期化するためのJSON文字列。新しい上流値があるとキャンバスが初期化されます。キャンバス上で行った編集は優先され、上流値が再度変更されるまで保持されます。"
+      },
       "editor_state": {
         "name": "エディタ状態",
         "tooltip": "バウンディングボックスを描画し、各ボックスのタイプ、テキスト、説明、カラーパレットを設定します。背景要素から始め、前景を最後に設定してください。"
@@ -2839,6 +2847,10 @@
         "name": "高さ",
         "tooltip": "キャンバスおよびバウンディングボックス用ピクセルグリッドの高さ。"
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "キャンバスによって管理される内部状態：最後に初期化した上流のbboxes値。空欄のままにすると、次回実行時にbboxes入力からキャンバスを再初期化します。"
+      },
       "width": {
         "name": "幅",
         "tooltip": "キャンバスおよびバウンディングボックス用ピクセルグリッドの幅。"
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "mask"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "3DモデルファイルをComfyUIの出力ディレクトリに保存せずにプレビューします。",
     "display_name": "3Dプレビュー",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "3DモデルファイルをComfyUIの出力ディレクトリに保存せずにプレビューします。",
     "display_name": "3Dプレビュー（詳細）",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "任意の入力値をテキストとしてプレビューします。",
     "display_name": "プレビュー任意",
     "inputs": {
       "preview_mode": "プレビューモード",
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "音声をComfyUIの出力ディレクトリに保存せずにプレビューします。",
     "display_name": "オーディオプレビュー",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "ガウシアンスプラット3DファイルをComfyUIの出力ディレクトリに保存せずにプレビューします。",
     "display_name": "スプラットのプレビュー",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "ポイントクラウド3DファイルをComfyUIの出力ディレクトリに保存せずにプレビューします。",
     "display_name": "ポイントクラウドのプレビュー",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "3Dを保存（詳細）",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "上流の3Dノードからの3Dモデルファイル。"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "アニメーションPNGを保存",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "スプラットを保存",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "ガウシアンスプラット3Dファイル。"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "入力画像をComfyUI出力ディレクトリに保存します。",
     "display_name": "画像を保存",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "ポイントクラウドを保存",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "ポイントクラウドファイル（.ply）"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "SVGファイルをディスクに保存します。",
     "display_name": "SVG保存ノード",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "テキスト内容を出力ディレクトリにファイルとして保存します。",
+    "display_name": "テキストを保存",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "エンコード済みのトレーニングデータセット（latent＋conditioning）をディスクに保存し、トレーニング時の効率的な読み込みを可能にします。",
     "display_name": "学習データセットを保存",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "VAE latent から SeedVR2 のポジティブ／ネガティブコンディショニングを構築します。",
+    "display_name": "SeedVR2コンディショニングを適用",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "SeedVR2モデル。"
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "サンプリング用のポジティブコンディショニング。"
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "サンプリング用のネガティブコンディショニング。"
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "生成された画像を元のリサイズ画像に合わせて整列し、色補正を適用します。",
+    "display_name": "SeedVR2出力の後処理",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "生成画像の色を元画像に合わせる方法。lab：CIELAB空間で色を転送し、ディテールを保持（最も忠実）。wavelet：低周波の色のみ転送し、高周波ディテールはアップスケールして保持。adain：チャンネルごとの平均/標準偏差を合わせる（最速、全体的な色合い）。none：色転送をスキップ（幾何学的整列のみ）。"
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "処理する生成画像。"
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "前処理前の元のリサイズ画像。参照として使用します。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "整列および色補正された画像。"
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "SeedVR2モデル用にリサイズ画像にパディングを追加します。アルファチャンネルは削除されます。ノード「SeedVR2出力の後処理」で元のリサイズ画像から再適用されます。",
+    "display_name": "SeedVR2入力の前処理",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "処理するリサイズ画像。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "VAEエンコーディング用のパディング済み画像。"
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "SeedVR2のビデオ潜在を、VRAM内で一度にサンプリングできるように重複する時間チャンクに分割します。分割された潜在は「SeedVR2コンディショニング適用」とサンプラーの潜在入力の両方に接続し、「SeedVR2潜在の結合」で再結合します。",
+    "display_name": "SeedVR2潜在の分割",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual＝frames_per_chunkを正確に使用。auto＝空きVRAMに収まる最大チャンクを自動予測。"
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "分割するVAEエンコード済みSeedVR2潜在。"
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "隣接するチャンク間で共有され、結合時にクロスフェードされる潜在フレーム数。0＝重複なし。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "時系列順の時間チャンク。"
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "隣接チャンク間の有効な潜在フレーム重複数（SeedVR2潜在の結合用）。"
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "サンプリング済みSeedVR2潜在の時間チャンクを1つの潜在に再結合します。各重複部分は、Split SeedVR2 Latentから渡されたtemporal_overlapのサイズでHann窓を使ってクロスフェードされます。",
+    "display_name": "SeedVR2潜在の結合",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "時系列順のサンプリング済み時間チャンク。"
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Split SeedVR2 Latentのtemporal_overlap出力。0＝単純な連結。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "再結合された全長の潜在。"
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "CLIPテキストエンコーダーを特定のデバイス（default / cpu / gpu:N）に配置します。\n\n- 「default」はローダーによって割り当てられたデバイスに戻します。\n- 「cpu」はロードとオフロードの両方のデバイスをCPUに固定します。\n- 「gpu:N」はロードデバイスを利用可能なN番目のGPUに固定します。\n\n選択したデバイスが現在のマシンに存在しない場合\n（例：2GPUマシンで作成したワークフローを1GPUマシンで開いた場合）、\nノードはCLIPを変更せずに通過させ、失敗せずにメッセージをログに記録します。",
     "display_name": "CLIPデバイス選択",
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index dc6c04f163..01c14a321c 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -359,6 +359,7 @@
     "colors": "색상 팔레트",
     "descLabel": "설명",
     "descPlaceholder": "이 영역에 대한 설명",
+    "grid": "그리드",
     "textLabel": "텍스트",
     "textPlaceholder": "표시할 텍스트 (원문 그대로)",
     "typeObj": "obj",
@@ -954,6 +955,16 @@
       "title": "잘못된 대화상자"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "ComfyUI 데스크톱 앱이 귀하의 계정으로 로그인 대기 중입니다. ComfyUI 데스크톱 앱에서 로그인을 시작한 경우에만 계속 진행하세요.",
+    "confirmSummary": "데스크톱 로그인 승인하시겠습니까?",
+    "expiredDetail": "로그인 요청이 만료되었거나 이미 사용되었습니다. ComfyUI 데스크톱 앱에서 다시 로그인을 시작하세요.",
+    "expiredSummary": "데스크톱 로그인 실패",
+    "failedDetail": "데스크톱 로그인 완료 중 오류가 발생했습니다. ComfyUI 데스크톱 앱에서 다시 로그인을 시작하세요.",
+    "failedSummary": "데스크톱 로그인 실패",
+    "successDetail": "ComfyUI 데스크톱 앱으로 돌아가실 수 있습니다.",
+    "successSummary": "로그인 완료"
+  },
   "desktopMenu": {
     "confirmQuit": "저장되지 않은 워크플로가 열려 있습니다. 저장되지 않은 변경 사항은 모두 손실됩니다. 이를 무시하고 종료하시겠습니까?",
     "confirmReinstall": "이 작업은 extra_models_config.yaml 파일을 지우고 설치를 다시 시작합니다. 정말로 진행하시겠습니까?",
@@ -2854,6 +2865,8 @@
     "phantom subject": "팬텀 서브젝트",
     "photomaker": "포토메이커",
     "pixart": "pixart",
+    "post-processors": "후처리기",
+    "pre-processors": "전처리기",
     "preprocessors": "전처리기",
     "primitive": "기본 입력",
     "qwen": "qwen",
@@ -4123,6 +4136,7 @@
       "newest": "최신순",
       "popular": "인기",
       "recommended": "권장",
+      "relevance": "관련성",
       "searchPlaceholder": "검색..."
     },
     "sorting": "정렬 기준",
diff --git a/src/locales/ko/nodeDefs.json b/src/locales/ko/nodeDefs.json
index 4db9625521..c600d6ca68 100644
--- a/src/locales/ko/nodeDefs.json
+++ b/src/locales/ko/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "시드",
         "tooltip": "생성에 사용할 시드입니다."
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "모델의 프롬프트 최적화 추론('thinking')을 활성화하여 더 나은 프롬프트 준수를 제공합니다. 생성 시간이 크게 증가할 수 있습니다 — 특히 Seedream 5.0 Pro에서 두드러집니다. 텍스트-투-이미지에서만 비활성화할 수 있으며, 참조 이미지가 제공된 경우에는 비활성화할 수 없습니다."
+      },
       "watermark": {
         "name": "워터마크",
         "tooltip": "이미지에 \"AI 생성됨\" 워터마크를 추가할지 여부입니다."
@@ -2831,6 +2835,10 @@
         "name": "배경",
         "tooltip": "캔버스와 미리보기에서 배경으로 사용되는 선택적 이미지입니다."
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "바운딩 박스, 요소 또는 캔버스를 초기화할 JSON 문자열입니다. 새로운 상위 값이 들어오면 캔버스가 초기화됩니다. 캔버스에서 편집한 내용이 우선 적용되며, 상위 값이 다시 변경될 때까지 유지됩니다."
+      },
       "editor_state": {
         "name": "에디터 상태",
         "tooltip": "바운딩 박스를 그리고 각 박스의 유형, 텍스트, 설명, 컬러 팔레트를 설정하세요. 배경 요소부터 시작하고 전경은 마지막에 추가하세요."
@@ -2839,6 +2847,10 @@
         "name": "높이",
         "tooltip": "캔버스 및 바운딩 박스의 픽셀 그리드 높이입니다."
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "캔버스에서 관리하는 내부 상태: 마지막으로 캔버스를 초기화한 상위 bboxes 값입니다. 비워두면 다음 실행 시 bboxes 입력값으로 캔버스를 다시 초기화합니다."
+      },
       "width": {
         "name": "너비",
         "tooltip": "캔버스 및 바운딩 박스의 픽셀 그리드 너비입니다."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "마스크"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "3D 모델 파일을 ComfyUI 출력 디렉토리에 저장하지 않고 미리보기합니다.",
     "display_name": "3D 미리보기",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "3D 모델 파일을 ComfyUI 출력 디렉토리에 저장하지 않고 미리보기합니다.",
     "display_name": "3D 미리보기 (고급)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "모든 입력 값을 텍스트로 미리보기합니다.",
     "display_name": "미리보기 아무거나",
     "inputs": {
       "preview_mode": "미리보기 모드",
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "오디오를 ComfyUI 출력 디렉토리에 저장하지 않고 미리듣기합니다.",
     "display_name": "오디오 미리듣기",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "가우시안 스플랫 3D 파일을 ComfyUI 출력 디렉토리에 저장하지 않고 미리보기합니다.",
     "display_name": "스플랫 미리보기",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "포인트 클라우드 3D 파일을 ComfyUI 출력 디렉토리에 저장하지 않고 미리보기합니다.",
     "display_name": "포인트 클라우드 미리보기",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "3D 저장 (고급)",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "상위 3D 노드에서 가져온 3D 모델 파일입니다."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "애니메이션 PNG 저장",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "스플랫 저장",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "가우시안 스플랫 3D 파일."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "입력 이미지를 ComfyUI 출력 디렉토리에 저장합니다.",
     "display_name": "이미지 저장",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "포인트 클라우드 저장",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "포인트 클라우드 파일 (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "디스크에 SVG 파일 저장.",
     "display_name": "SVG 노드 저장",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "텍스트 내용을 출력 디렉터리에 파일로 저장합니다.",
+    "display_name": "텍스트 저장",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "인코딩된 학습 데이터셋(latent + conditioning)을 디스크에 저장하여 학습 시 효율적으로 불러올 수 있습니다.",
     "display_name": "학습 데이터셋 저장",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "VAE latent에서 SeedVR2 긍정/부정 컨디셔닝을 생성합니다.",
+    "display_name": "SeedVR2 컨디셔닝 적용",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "SeedVR2 모델."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "샘플링을 위한 긍정 컨디셔닝."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "샘플링을 위한 부정 컨디셔닝."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "생성된 이미지를 원본 리사이즈 이미지와 정렬하고 색상 보정을 적용합니다.",
+    "display_name": "SeedVR2 출력 후처리",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "생성된 이미지의 색상을 원본 이미지와 맞추는 방법입니다. lab: CIELAB 공간에서 색상 전달, 디테일 보존(가장 충실함). wavelet: 저주파 색상만 전달, 업스케일된 고주파 디테일 유지. adain: 채널별 평균/표준편차 맞춤(가장 빠름, 전체 색조). none: 색상 전달 생략(기하학적 정렬만)."
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "처리할 생성된 이미지입니다."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "전처리 이전의 원본 리사이즈 이미지로, 참조용으로 사용됩니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "정렬 및 색상 보정된 이미지입니다."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "SeedVR2 모델을 위해 리사이즈된 이미지에 패딩을 추가합니다. 알파 채널은 제거됩니다. Post-Process SeedVR2 Output 노드에서 원본 리사이즈 이미지로부터 다시 적용됩니다.",
+    "display_name": "SeedVR2 입력 전처리",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "처리할 리사이즈된 이미지입니다."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "VAE 인코딩을 위한 패딩된 이미지입니다."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "SeedVR2 비디오 latent를 VRAM 내에서 한 번에 샘플링할 수 있을 만큼 겹치는 시간 청크로 분할합니다. latent 출력은 Apply SeedVR2 Conditioning과 샘플러 latent 입력 모두에 연결한 후 Merge SeedVR2 Latents로 다시 합칩니다.",
+    "display_name": "SeedVR2 latent 분할",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = frames_per_chunk 값을 그대로 사용; auto = 사용 가능한 VRAM에 맞는 최대 청크를 예측."
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "분할할 VAE 인코딩된 SeedVR2 latent입니다."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "인접 청크 간에 공유되는 latent 프레임 수로, 병합 시 크로스페이드됩니다. 0 = 겹침 없음."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "순서대로 정렬된 시간 청크입니다."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "Merge SeedVR2 Latents에서 사용할 인접 청크 간의 실제 latent 프레임 겹침 수입니다."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "샘플링된 SeedVR2 latent 시간 청크를 하나의 latent로 다시 결합합니다. 각 겹침 부분은 Split SeedVR2 Latent에서 전달된 temporal_overlap 값에 따라 Hann 윈도우로 크로스페이드됩니다.",
+    "display_name": "SeedVR2 latent 병합",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "순서대로 정렬된 샘플링된 시간 청크입니다."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Split SeedVR2 Latent의 temporal_overlap 출력값입니다. 0 = 단순 연결."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "재결합된 전체 길이의 latent입니다."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "CLIP 텍스트 인코더를 특정 디바이스에 배치합니다 (default / cpu / gpu:N).\n\n- \"default\"는 로더에서 할당된 디바이스로 복원합니다.\n- \"cpu\"는 로드 및 오프로딩 디바이스를 모두 CPU로 고정합니다.\n- \"gpu:N\"은 로드 디바이스를 N번째 사용 가능한 GPU로 고정합니다.\n\n선택한 디바이스가 현재 머신에 존재하지 않을 경우\n(예: 2-GPU 환경에서 만든 워크플로우를 1-GPU 환경에서 열 때),\n노드는 CLIP을 변경 없이 통과시키고 실패 대신 메시지를 기록합니다.",
     "display_name": "CLIP 디바이스 선택",
diff --git a/src/locales/pt-BR/main.json b/src/locales/pt-BR/main.json
index 65837ceb1a..8effca835d 100644
--- a/src/locales/pt-BR/main.json
+++ b/src/locales/pt-BR/main.json
@@ -359,6 +359,7 @@
     "colors": "paleta_de_cores",
     "descLabel": "descrição",
     "descPlaceholder": "descrição desta região",
+    "grid": "Grade",
     "textLabel": "Texto",
     "textPlaceholder": "texto a ser exibido (literal)",
     "typeObj": "obj",
@@ -954,6 +955,16 @@
       "title": "Diálogo inválido"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "O aplicativo desktop do ComfyUI está aguardando para entrar com sua conta. Continue apenas se você acabou de iniciar o login pelo aplicativo desktop do ComfyUI.",
+    "confirmSummary": "Aprovar login no desktop?",
+    "expiredDetail": "A solicitação de login expirou ou já foi utilizada. Inicie o login novamente pelo aplicativo desktop do ComfyUI.",
+    "expiredSummary": "Falha no login do desktop",
+    "failedDetail": "Algo deu errado ao concluir o login no desktop. Inicie o login novamente pelo aplicativo desktop do ComfyUI.",
+    "failedSummary": "Falha no login do desktop",
+    "successDetail": "Você pode retornar ao aplicativo desktop do ComfyUI.",
+    "successSummary": "Login realizado"
+  },
   "desktopMenu": {
     "confirmQuit": "Existem fluxos de trabalho não salvos abertos; quaisquer alterações não salvas serão perdidas. Ignorar isso e sair?",
     "confirmReinstall": "Isso irá limpar seu arquivo extra_models_config.yaml,\ne iniciar a instalação novamente.\n\nTem certeza?",
@@ -2854,6 +2865,8 @@
     "phantom subject": "phantom subject",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "pós-processadores",
+    "pre-processors": "pré-processadores",
     "preprocessors": "pré-processadores",
     "primitive": "primitivo",
     "qwen": "qwen",
@@ -4135,6 +4148,7 @@
       "newest": "Mais Recentes",
       "popular": "Popular",
       "recommended": "Recomendado",
+      "relevance": "Relevância",
       "searchPlaceholder": "Buscar..."
     },
     "sorting": "Ordenar por",
diff --git a/src/locales/pt-BR/nodeDefs.json b/src/locales/pt-BR/nodeDefs.json
index 864447b4b1..948d124bc3 100644
--- a/src/locales/pt-BR/nodeDefs.json
+++ b/src/locales/pt-BR/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "semente",
         "tooltip": "Semente utilizada para a geração."
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "Ativa o raciocínio de otimização de prompt do modelo ('thinking') para melhor aderência. Pode aumentar substancialmente o tempo de geração — especialmente no Seedream 5.0 Pro. Só pode ser desativado para texto-para-imagem (não quando imagens de referência são fornecidas)."
+      },
       "watermark": {
         "name": "marca d'água",
         "tooltip": "Se deve adicionar uma marca d'água \"Gerado por IA\" à imagem."
@@ -2831,6 +2835,10 @@
         "name": "fundo",
         "tooltip": "Imagem opcional usada como fundo na tela e na pré-visualização."
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "Caixas delimitadoras, elementos ou uma string JSON para inicializar o canvas. Um novo valor upstream inicializa o canvas; edições feitas no canvas têm prioridade e são mantidas até que o valor upstream mude novamente."
+      },
       "editor_state": {
         "name": "estado_do_editor",
         "tooltip": "Desenhe caixas delimitadoras e defina o tipo de cada caixa, texto, descrição, paleta de cores. Comece pelo elemento de fundo e termine pelo primeiro plano."
@@ -2839,6 +2847,10 @@
         "name": "altura",
         "tooltip": "Altura da tela e da grade de pixels para as caixas delimitadoras."
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "Estado interno gerenciado pelo canvas: o valor de bboxes upstream que o inicializou por último. Deixe vazio para reinicializar o canvas a partir da entrada bboxes na próxima execução."
+      },
       "width": {
         "name": "largura",
         "tooltip": "Largura da tela e da grade de pixels para as caixas delimitadoras."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "mask"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "Visualize um arquivo de modelo 3D sem salvá-lo no diretório de saída do ComfyUI.",
     "display_name": "Pré-visualização 3D & Animação",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "Visualize um arquivo de modelo 3D sem salvá-lo no diretório de saída do ComfyUI.",
     "display_name": "Visualizar 3D (Avançado)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "Visualize qualquer valor de entrada como texto.",
     "display_name": "Pré-visualizar como Texto",
     "inputs": {
       "preview_mode": "Modo de visualização",
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "Ouça o áudio sem salvá-lo no diretório de saída do ComfyUI.",
     "display_name": "Pré-visualizar Áudio",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "Visualize um arquivo 3D gaussian splat sem salvá-lo no diretório de saída do ComfyUI.",
     "display_name": "Pré-visualizar Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "Visualize um arquivo de nuvem de pontos 3D sem salvá-lo no diretório de saída do ComfyUI.",
     "display_name": "Pré-visualizar Nuvem de Pontos",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "Salvar 3D (Avançado)",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Arquivo de modelo 3D de um nó 3D upstream."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "Salvar PNG Animado",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "Salvar Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Um arquivo 3D de gaussian splat."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "Salva as imagens de entrada no diretório de saída do seu ComfyUI.",
     "display_name": "Salvar Imagem",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "Salvar Nuvem de Pontos",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Arquivo de nuvem de pontos (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "Salva arquivos SVG no disco.",
     "display_name": "Salvar Nó SVG",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "Salva o conteúdo de texto em um arquivo no diretório de saída.",
+    "display_name": "Salvar Texto",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "Salva o conjunto de dados de treinamento codificado (latents + condicionamento) no disco para carregamento eficiente durante o treinamento.",
     "display_name": "Salvar Conjunto de Dados de Treinamento",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "Constrói o condicionamento positivo/negativo SeedVR2 a partir de um latent da VAE.",
+    "display_name": "Aplicar Condicionamento SeedVR2",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "O modelo SeedVR2."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "O condicionamento positivo para amostragem."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "O condicionamento negativo para amostragem."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "Alinhe a imagem gerada com a imagem original redimensionada e aplique correção de cor.",
+    "display_name": "Pós-processar saída SeedVR2",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "Método para igualar as cores da imagem gerada à imagem original. lab: transfere cor no espaço CIELAB, preservando detalhes (mais fiel). wavelet: transfere cor de baixa frequência, mantendo detalhes de alta frequência ampliados. adain: iguala média/desvio padrão por canal (mais rápido, tonalidade global). none: ignora transferência de cor (apenas alinhamento geométrico)."
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "A imagem gerada para processar."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "A imagem original redimensionada antes do pré-processamento, usada como referência."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "A imagem alinhada e com correção de cor."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "Adiciona bordas a uma imagem redimensionada para o modelo SeedVR2. O canal alfa é removido. O nó Pós-processar saída SeedVR2 reaplica o canal alfa da imagem original redimensionada.",
+    "display_name": "Pré-processar entrada SeedVR2",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "A imagem redimensionada para processar."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "A imagem com bordas para codificação VAE."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "Divide um latente de vídeo SeedVR2 em blocos temporais sobrepostos pequenos o suficiente para serem amostrados um de cada vez na VRAM, conectando as saídas dos latentes tanto ao nó Aplicar Condicionamento SeedVR2 quanto à entrada latente do sampler antes de recombinar com Unir Latentes SeedVR2.",
+    "display_name": "Dividir latente SeedVR2",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = usa exatamente frames_per_chunk; auto = prevê o maior bloco que cabe na VRAM livre."
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "O latente SeedVR2 codificado pelo VAE para dividir."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Quadros latentes compartilhados entre blocos adjacentes e mesclados com crossfade; 0 = sem sobreposição."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "Os blocos temporais em ordem sequencial."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "A sobreposição efetiva de quadros latentes entre blocos adjacentes, para Unir Latentes SeedVR2."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "Recombina blocos temporais amostrados do latente SeedVR2 em um único latente, mesclando cada sobreposição com uma janela de Hann dimensionada pelo temporal_overlap conectado do Dividir latente SeedVR2.",
+    "display_name": "Unir latentes SeedVR2",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "Os blocos temporais amostrados em ordem sequencial."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "A saída temporal_overlap de Dividir latente SeedVR2. 0 = concatenação simples."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "O latente recombinado de comprimento total."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "Coloca o codificador de texto CLIP em um dispositivo específico (default / cpu / gpu:N).\n\n- \"default\" restaura o dispositivo atribuído pelo carregador.\n- \"cpu\" fixa tanto o carregamento quanto o descarregamento no CPU.\n- \"gpu:N\" fixa o carregamento no N-ésimo GPU disponível.\n\nQuando o dispositivo selecionado não existe na máquina atual\n(por exemplo, um fluxo de trabalho criado em uma máquina com 2 GPUs aberto em uma com 1 GPU),\no nó passa o CLIP sem alterações e registra uma mensagem\nem vez de falhar.",
     "display_name": "Selecionar Dispositivo CLIP",
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 2c14ec2639..0458806ccb 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -359,6 +359,7 @@
     "colors": "палитра_цветов",
     "descLabel": "описание",
     "descPlaceholder": "описание этой области",
+    "grid": "Сетка",
     "textLabel": "Текст",
     "textPlaceholder": "текст для отображения (дословно)",
     "typeObj": "объект",
@@ -954,6 +955,16 @@
       "title": "Неверный диалог"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "Приложение ComfyUI для рабочего стола ожидает входа в ваш аккаунт. Продолжайте только если вы только что начали вход из приложения ComfyUI для рабочего стола.",
+    "confirmSummary": "Подтвердить вход на рабочем столе?",
+    "expiredDetail": "Запрос на вход истёк или уже был использован. Начните вход заново из приложения ComfyUI для рабочего стола.",
+    "expiredSummary": "Не удалось войти на рабочем столе",
+    "failedDetail": "Произошла ошибка при завершении входа на рабочем столе. Начните вход заново из приложения ComfyUI для рабочего стола.",
+    "failedSummary": "Не удалось войти на рабочем столе",
+    "successDetail": "Вы можете вернуться в приложение ComfyUI для рабочего стола.",
+    "successSummary": "Вход выполнен"
+  },
   "desktopMenu": {
     "confirmQuit": "Открыты несохраненные рабочие процессы; все несохраненные изменения будут потеряны. Проигнорировать это и выйти?",
     "confirmReinstall": "Это очистит ваш файл extra_models_config.yaml и начнёт установку заново. Вы уверены?",
@@ -2854,6 +2865,8 @@
     "phantom subject": "фантомный объект",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "постпроцессоры",
+    "pre-processors": "препроцессоры",
     "preprocessors": "предобработчики",
     "primitive": "примитив",
     "qwen": "qwen",
@@ -4123,6 +4136,7 @@
       "newest": "Новейшие",
       "popular": "Популярные",
       "recommended": "Рекомендуемые",
+      "relevance": "Актуальность",
       "searchPlaceholder": "Поиск..."
     },
     "sorting": "Сортировать по",
diff --git a/src/locales/ru/nodeDefs.json b/src/locales/ru/nodeDefs.json
index ba672aecda..b03cd52e0a 100644
--- a/src/locales/ru/nodeDefs.json
+++ b/src/locales/ru/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "seed",
         "tooltip": "Сид для генерации."
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "Включить оптимизацию промпта модели («мышление») для лучшего соответствия. Может значительно увеличить время генерации — особенно на Seedream 5.0 Pro. Может быть отключено только для текст-в-изображение (не работает при наличии референсных изображений)."
+      },
       "watermark": {
         "name": "watermark",
         "tooltip": "Добавлять ли водяной знак «AI generated» на изображение."
@@ -2831,6 +2835,10 @@
         "name": "фон",
         "tooltip": "Необязательное изображение, используемое как фон на холсте и в предпросмотре."
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "Границы (bounding boxes), элементы или JSON-строка для инициализации холста. Новое входящее значение инициализирует холст; изменения, внесённые на холсте, имеют приоритет и сохраняются до следующего изменения входящего значения."
+      },
       "editor_state": {
         "name": "состояние_редактора",
         "tooltip": "Нарисуйте ограничивающие рамки и задайте для каждой рамки тип, текст, описание, цветовую палитру. Начинайте с фонового элемента, затем передний план."
@@ -2839,6 +2847,10 @@
         "name": "высота",
         "tooltip": "Высота холста и пиксельной сетки для ограничивающих рамок."
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "Внутреннее состояние, управляемое холстом: последнее входящее значение bboxes, которым он был инициализирован. Оставьте пустым, чтобы переинициализировать холст из входа bboxes при следующем запуске."
+      },
       "width": {
         "name": "ширина",
         "tooltip": "Ширина холста и пиксельной сетки для ограничивающих рамок."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "mask"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "Просмотр 3D-модели без сохранения в выходной каталог ComfyUI.",
     "display_name": "Предварительный просмотр 3D",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "Просмотр 3D-модели без сохранения в выходной каталог ComfyUI.",
     "display_name": "Просмотр 3D (расширенный)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "Просмотр любого входного значения в виде текста.",
     "display_name": "Предпросмотр любого",
     "inputs": {
       "preview_mode": {},
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "Прослушать аудио без сохранения в выходной каталог ComfyUI.",
     "display_name": "Предварительное прослушивание аудио",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "Просмотр 3D-файла gaussian splat без сохранения в выходной каталог ComfyUI.",
     "display_name": "Предпросмотр Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "Просмотр 3D-файла облака точек без сохранения в выходной каталог ComfyUI.",
     "display_name": "Предпросмотр облака точек",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "Сохранить 3D (расширенно)",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Файл 3D-модели от вышестоящего 3D-узла."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "Сохранить анимированный PNG",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "Сохранить Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Файл 3D Gaussian Splat."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "Сохраняет входные изображения в вашу директорию вывода ComfyUI.",
     "display_name": "Сохранить изображение",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "Сохранить облако точек",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Файл облака точек (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "Сохранить SVG файлы на диске.",
     "display_name": "SaveSVGNode",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "Сохранить текстовое содержимое в файл в выходной директории.",
+    "display_name": "Сохранить текст",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "Сохраняет закодированный обучающий датасет (латенты + условия) на диск для эффективной загрузки во время обучения.",
     "display_name": "Сохранить обучающий набор данных",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "Создать положительное/отрицательное conditioning SeedVR2 из VAE latent.",
+    "display_name": "Применить SeedVR2 Conditioning",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "Модель SeedVR2."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "Положительное conditioning для сэмплирования."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "Отрицательное conditioning для сэмплирования."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "Выровнять сгенерированное изображение с исходным изменённым по размеру изображением и применить цветокоррекцию.",
+    "display_name": "Постобработка вывода SeedVR2",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "Метод сопоставления цветов сгенерированного изображения с оригиналом. lab: перенос цвета в пространстве CIELAB с сохранением деталей (наиболее точный). wavelet: перенос низкочастотного цвета с сохранением высокочастотных деталей при увеличении. adain: сопоставление средних/стандартных отклонений по каналам (самый быстрый, глобальный оттенок). none: пропустить перенос цвета (только выравнивание геометрии)."
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "Сгенерированное изображение для обработки."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "Исходное изменённое по размеру изображение до предобработки, используется как эталон."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "Выровненное, цветокорректированное изображение."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "Добавить отступы к изменённому по размеру изображению для модели SeedVR2. Альфа-канал удаляется. Узел 'Постобработка вывода SeedVR2' повторно применяет его из исходного изменённого по размеру изображения.",
+    "display_name": "Предобработка входных данных SeedVR2",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "Изменённое по размеру изображение для обработки."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "Изображение с отступами для кодирования VAE."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "Разделить видео latent SeedVR2 на перекрывающиеся временные фрагменты, достаточно маленькие, чтобы обрабатывать их по одному в VRAM. Выходы latent подключаются как к Apply SeedVR2 Conditioning, так и к входу sampler latent перед объединением с помощью Merge SeedVR2 Latents.",
+    "display_name": "Разделить SeedVR2 latent",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = использовать frames_per_chunk точно; auto = подобрать максимальный фрагмент, который поместится в свободную VRAM."
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "Закодированный VAE latent SeedVR2 для разделения."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Кадры latent, общие для соседних фрагментов и смешиваемые при объединении; 0 = без перекрытия."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "Временные фрагменты в порядке следования."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "Фактическое перекрытие кадров latent между соседними фрагментами для Merge SeedVR2 Latents."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "Объединить обработанные временные фрагменты latent SeedVR2 в один latent, смешивая каждое перекрытие с помощью окна Ханна, размер которого задаётся temporal_overlap, переданного из Split SeedVR2 Latent.",
+    "display_name": "Объединить SeedVR2 latents",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "Обработанные временные фрагменты в порядке следования."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Выход temporal_overlap из Split SeedVR2 Latent. 0 = простая конкатенация."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "Объединённый latent полной длины."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "Размещает текстовый энкодер CLIP на определённом устройстве (default / cpu / gpu:N).\n\n- \"default\" возвращает устройство, назначенное загрузчиком.\n- \"cpu\" закрепляет загрузку и выгрузку на CPU.\n- \"gpu:N\" закрепляет загрузку на N-ой доступной GPU.\n\nЕсли выбранное устройство отсутствует на текущей машине\n(например, рабочий процесс создан на 2-GPU, а открыт на 1-GPU),\nузел пропускает CLIP без изменений и записывает сообщение\nвместо ошибки.",
     "display_name": "Выбор устройства для CLIP",
diff --git a/src/locales/tr/main.json b/src/locales/tr/main.json
index 190e0728a4..348a6b5cff 100644
--- a/src/locales/tr/main.json
+++ b/src/locales/tr/main.json
@@ -359,6 +359,7 @@
     "colors": "renk_paleti",
     "descLabel": "açıklama",
     "descPlaceholder": "bu bölgenin açıklaması",
+    "grid": "Izgara",
     "textLabel": "Metin",
     "textPlaceholder": "görüntülenecek metin (aynen)",
     "typeObj": "nesne",
@@ -954,6 +955,16 @@
       "title": "Geçersiz İletişim Kutusu"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "ComfyUI masaüstü uygulaması hesabınızla oturum açmayı bekliyor. Yalnızca ComfyUI masaüstü uygulamasından oturum açmayı yeni başlattıysanız devam edin.",
+    "confirmSummary": "Masaüstü oturum açmayı onayla?",
+    "expiredDetail": "Oturum açma isteğinin süresi doldu veya zaten kullanıldı. ComfyUI masaüstü uygulamasından tekrar oturum açmayı başlatın.",
+    "expiredSummary": "Masaüstü oturum açma başarısız",
+    "failedDetail": "Masaüstü oturum açma tamamlanırken bir hata oluştu. ComfyUI masaüstü uygulamasından tekrar oturum açmayı başlatın.",
+    "failedSummary": "Masaüstü oturum açma başarısız",
+    "successDetail": "ComfyUI masaüstü uygulamasına dönebilirsiniz.",
+    "successSummary": "Oturum açıldı"
+  },
   "desktopMenu": {
     "confirmQuit": "Kaydedilmemiş iş akışları açık; kaydedilmemiş değişiklikler kaybolacaktır. Bunu yoksayıp çıkılsın mı?",
     "confirmReinstall": "Bu işlem extra_models_config.yaml dosyanızı temizleyecek,\nve kurulumu yeniden başlatacaktır.\n\nEmin misiniz?",
@@ -2854,6 +2865,8 @@
     "phantom subject": "hayalet nesne",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "son işlemciler",
+    "pre-processors": "ön işlemciler",
     "preprocessors": "ön işlemciler",
     "primitive": "ilkel",
     "qwen": "qwen",
@@ -4123,6 +4136,7 @@
       "newest": "En Yeni",
       "popular": "Popüler",
       "recommended": "Önerilen",
+      "relevance": "Alaka",
       "searchPlaceholder": "Ara..."
     },
     "sorting": "Sıralama ölçütü",
diff --git a/src/locales/tr/nodeDefs.json b/src/locales/tr/nodeDefs.json
index cd7a728974..719da678aa 100644
--- a/src/locales/tr/nodeDefs.json
+++ b/src/locales/tr/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "tohum",
         "tooltip": "Üretim için kullanılacak tohum."
       },
+      "thinking": {
+        "name": "düşünme",
+        "tooltip": "Modelin istem optimizasyonu mantığını ('düşünme') etkinleştirerek daha iyi uyum sağlar. Üretim süresini önemli ölçüde artırabilir — özellikle Seedream 5.0 Pro'da. Sadece metinden-görüntüye işlemlerinde devre dışı bırakılabilir (referans görseller sağlandığında devre dışı bırakılamaz)."
+      },
       "watermark": {
         "name": "filigran",
         "tooltip": "Görüntüye \"Yapay Zeka ile oluşturuldu\" filigranı eklenip eklenmeyeceği."
@@ -2831,6 +2835,10 @@
         "name": "arka plan",
         "tooltip": "Tuvalde ve önizlemede arka plan olarak kullanılan isteğe bağlı görüntü."
       },
+      "bboxes": {
+        "name": "sınırlayıcı kutular",
+        "tooltip": "Sınırlayıcı kutular, öğeler veya tuvali başlatmak için bir JSON dizesi. Yeni bir yukarı akış değeri tuvali başlatır; tuvalde yapılan düzenlemeler önceliklidir ve yukarı akış değeri tekrar değişene kadar korunur."
+      },
       "editor_state": {
         "name": "düzenleyici durumu",
         "tooltip": "Sınır kutuları çizin ve her kutunun türünü, metnini, açıklamasını, renk paletini ayarlayın. Önce arka plan öğesiyle başlayın, en son ön planı ekleyin."
@@ -2839,6 +2847,10 @@
         "name": "yükseklik",
         "tooltip": "Tuvalin ve sınır kutuları için piksel ızgarasının yüksekliği."
       },
+      "last_incoming": {
+        "name": "son gelen",
+        "tooltip": "Tuval tarafından yönetilen dahili durum: onu en son başlatan yukarı akış sınırlayıcı kutular değeri. Bir sonraki çalıştırmada sınırlayıcı kutular girişinden tuvali yeniden başlatmak için boş bırakın."
+      },
       "width": {
         "name": "genişlik",
         "tooltip": "Tuvalin ve sınır kutuları için piksel ızgarasının genişliği."
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "maske"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "Bir 3D model dosyasını ComfyUI çıktı dizinine kaydetmeden önizleyin.",
     "display_name": "3D Önizleme",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "Bir 3D model dosyasını ComfyUI çıktı dizinine kaydetmeden önizleyin.",
     "display_name": "3D Önizleme (Gelişmiş)",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "Herhangi bir giriş değerini metin olarak önizleyin.",
     "display_name": "Herhangi Bir Şeyi Önizle",
     "inputs": {
       "preview_mode": "Önizleme modu",
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "Sesi ComfyUI çıktı dizinine kaydetmeden önizleyin.",
     "display_name": "Sesi Önizle",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "Bir gaussian splat 3D dosyasını ComfyUI çıktı dizinine kaydetmeden önizleyin.",
     "display_name": "Splat Önizleme",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "Bir nokta bulutu 3D dosyasını ComfyUI çıktı dizinine kaydetmeden önizleyin.",
     "display_name": "Nokta Bulutu Önizleme",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "3D Kaydet (Gelişmiş)",
+    "inputs": {
+      "camera_info": {
+        "name": "kamera bilgisi"
+      },
+      "filename_prefix": {
+        "name": "dosya adı ön eki"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "model_3d": {
+        "name": "3D model",
+        "tooltip": "Yukarı akıştaki bir 3D düğümden gelen 3D model dosyası."
+      },
+      "model_3d_info": {
+        "name": "3D model bilgisi"
+      },
+      "viewport_state": {
+        "name": "görünüm durumu"
+      },
+      "width": {
+        "name": "genişlik"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "3D model",
+        "tooltip": null
+      },
+      "1": {
+        "name": "3D model bilgisi",
+        "tooltip": null
+      },
+      "2": {
+        "name": "kamera bilgisi",
+        "tooltip": null
+      },
+      "3": {
+        "name": "genişlik",
+        "tooltip": null
+      },
+      "4": {
+        "name": "yükseklik",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "Animasyonlu PNG Kaydet",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "Splat'ı Kaydet",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Bir gaussian splat 3D dosyası."
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "Giriş görüntülerini ComfyUI çıktı dizininize kaydeder.",
     "display_name": "Görüntüyü Kaydet",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "Nokta Bulutunu Kaydet",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "Nokta bulutu dosyası (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "SVG dosyalarını diske kaydet.",
     "display_name": "SVGDüğümünüKaydet",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "Metin içeriğini çıktı dizinine bir dosyaya kaydet.",
+    "display_name": "Metni Kaydet",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "Kodlanmış eğitim veri setini (latentler + koşullandırma) eğitim sırasında verimli yükleme için diske kaydet.",
     "display_name": "Eğitim Veri Setini Kaydet",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "Bir VAE latent'inden SeedVR2 pozitif/negatif koşullandırma oluştur.",
+    "display_name": "SeedVR2 Koşullandırma Uygula",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "SeedVR2 modeli."
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "Örnekleme için pozitif koşullandırma."
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "Örnekleme için negatif koşullandırma."
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "Oluşturulan görseli orijinal yeniden boyutlandırılmış görselle hizala ve renk düzeltmesi uygula.",
+    "display_name": "SeedVR2 Çıktısını Sonradan İşle",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "Oluşturulan görselin renklerini orijinal görsele eşleştirme yöntemi. lab: Ayrıntıyı koruyarak CIELAB uzayında renk aktarımı (en sadık). wavelet: Düşük frekanslı renk aktarımı, yüksek frekanslı ayrıntıyı korur. adain: Kanal başına ortalama/std eşleştirir (en hızlı, genel tonlama). none: Renk aktarımı yok (sadece geometrik hizalama)."
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "İşlenecek oluşturulan görsel."
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "Ön işleme öncesi orijinal yeniden boyutlandırılmış görsel, referans olarak kullanılır."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "Hizalanmış, renk düzeltmesi yapılmış görsel."
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "SeedVR2 modeli için yeniden boyutlandırılmış bir görseli kenarlardan doldur. Alfa kanalı kaldırılır. Post-Process SeedVR2 Output düğümü, orijinal yeniden boyutlandırılmış görselden tekrar uygular.",
+    "display_name": "SeedVR2 Girdisini Ön İşle",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "İşlenecek yeniden boyutlandırılmış görsel."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "VAE kodlaması için kenarlardan doldurulmuş görsel."
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "Bir SeedVR2 video latent'ini, VRAM'e sığacak kadar küçük, üst üste binen zamansal parçalara ayırır. Latent çıktıları hem Apply SeedVR2 Conditioning'e hem de örnekleyici latent girişine bağlanır, ardından Merge SeedVR2 Latents ile tekrar birleştirilir.",
+    "display_name": "SeedVR2 Latent'ini Böl",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = Tam olarak frames_per_chunk kullanılır; auto = Boş VRAM'e sığacak en büyük parça tahmin edilir."
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "Bölünecek VAE ile kodlanmış SeedVR2 latent'i."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Birleştirme sırasında bitişik parçalar arasında paylaşılan latent kareler; 0 = üst üste binme yok."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "Zamansal parçalar sıralı olarak."
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "Bitişik parçalar arasındaki etkin latent-kare üst üste binmesi, Merge SeedVR2 Latents için."
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "Örneklenmiş SeedVR2 latent zamansal parçalarını tek bir latent'te birleştirir, her üst üste binmeyi Split SeedVR2 Latent'ten gelen temporal_overlap ile boyutlandırılmış Hann penceresiyle geçişli olarak birleştirir.",
+    "display_name": "SeedVR2 Latent'lerini Birleştir",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "Sıralı olarak örneklenmiş zamansal parçalar."
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Split SeedVR2 Latent'in temporal_overlap çıktısı. 0 = doğrudan birleştirme."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "Tekrar birleştirilmiş tam uzunlukta latent."
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "CLIP metin kodlayıcısını belirli bir cihaza yerleştir (default / cpu / gpu:N).\n\n- \"default\" yükleyici tarafından atanan cihazı geri yükler.\n- \"cpu\" hem yükleme hem de boşaltma cihazını CPU'ya sabitler.\n- \"gpu:N\" yükleme cihazını mevcut N. GPU'ya sabitler.\n\nSeçilen cihaz mevcut makinede yoksa\n(ör. 2-GPU'lu bir sistemde oluşturulan bir iş akışı 1-GPU'lu bir sistemde açılırsa),\ndüğüm CLIP'i değiştirmeden iletir ve hata vermek yerine bir mesaj kaydeder.",
     "display_name": "CLIP Cihazı Seç",
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index cc22a8d089..28c8f110d8 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -359,6 +359,7 @@
     "colors": "色彩調色盤",
     "descLabel": "描述",
     "descPlaceholder": "此區域的描述",
+    "grid": "網格",
     "textLabel": "文字",
     "textPlaceholder": "要呈現的文字（原文）",
     "typeObj": "物件",
@@ -954,6 +955,16 @@
       "title": "無效對話框"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "ComfyUI 桌面應用程式正在等待使用您的帳戶登入。僅在您剛從 ComfyUI 桌面應用程式啟動登入時才繼續。",
+    "confirmSummary": "批准桌面端登入？",
+    "expiredDetail": "登入請求已過期或已被使用。請從 ComfyUI 桌面應用程式重新啟動登入。",
+    "expiredSummary": "桌面端登入失敗",
+    "failedDetail": "完成桌面端登入時發生錯誤。請從 ComfyUI 桌面應用程式重新啟動登入。",
+    "failedSummary": "桌面端登入失敗",
+    "successDetail": "您可以返回 ComfyUI 桌面應用程式。",
+    "successSummary": "登入成功"
+  },
   "desktopMenu": {
     "confirmQuit": "有未儲存的工作流程，任何未儲存的變更都將遺失。確定要退出嗎？",
     "confirmReinstall": "這將清除您的 extra_models_config.yaml 檔案，\n並重新開始安裝。\n\n您確定要繼續嗎？",
@@ -2854,6 +2865,8 @@
     "phantom subject": "幻影主體",
     "photomaker": "photomaker",
     "pixart": "pixart",
+    "post-processors": "後處理器",
+    "pre-processors": "前處理器",
     "preprocessors": "前處理器",
     "primitive": "基礎元件",
     "qwen": "千問",
@@ -4123,6 +4136,7 @@
       "newest": "最新",
       "popular": "熱門",
       "recommended": "推薦",
+      "relevance": "相關性",
       "searchPlaceholder": "搜尋..."
     },
     "sorting": "排序依據",
diff --git a/src/locales/zh-TW/nodeDefs.json b/src/locales/zh-TW/nodeDefs.json
index b233f3e53d..8a37e07bb1 100644
--- a/src/locales/zh-TW/nodeDefs.json
+++ b/src/locales/zh-TW/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "種子",
         "tooltip": "用於生成的隨機種子。"
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "啟用模型的提示優化推理（「thinking」），以提升遵循度。可能大幅增加生成時間——特別是在 Seedream 5.0 Pro 上。僅可在文字轉圖像時停用（若有參考圖像則無法停用）。"
+      },
       "watermark": {
         "name": "浮水印",
         "tooltip": "是否在圖像上添加「AI 生成」浮水印。"
@@ -2831,6 +2835,10 @@
         "name": "背景",
         "tooltip": "可選，作為畫布及預覽背景的圖像。"
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "邊界框、元素，或用於初始化畫布的 JSON 字串。每當上游值變動時會重新初始化畫布；在畫布上的編輯將優先並保留，直到上游值再次變動。"
+      },
       "editor_state": {
         "name": "編輯器狀態",
         "tooltip": "繪製邊界框並設定每個框的類型、文字、描述、色板。請先設定背景元素，最後設定前景元素。"
@@ -2839,6 +2847,10 @@
         "name": "高度",
         "tooltip": "畫布及邊界框像素網格的高度。"
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "由畫布管理的內部狀態：最後一次初始化畫布的上游 bboxes 值。留空則於下次執行時，從 bboxes 輸入重新初始化畫布。"
+      },
       "width": {
         "name": "寬度",
         "tooltip": "畫布及邊界框像素網格的寬度。"
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "遮罩"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "預覽 3D 模型檔案，無需儲存至 ComfyUI 輸出目錄。",
     "display_name": "3D 預覽",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "預覽 3D 模型檔案，無需儲存至 ComfyUI 輸出目錄。",
     "display_name": "3D 預覽（進階）",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "將任意輸入值以文字預覽。",
     "display_name": "預覽任意",
     "inputs": {
       "preview_mode": "預覽模式",
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "預覽音訊，無需儲存至 ComfyUI 輸出目錄。",
     "display_name": "預覽音訊",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "預覽 gaussian splat 3D 檔案，無需儲存至 ComfyUI 輸出目錄。",
     "display_name": "預覽 Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "預覽點雲 3D 檔案，無需儲存至 ComfyUI 輸出目錄。",
     "display_name": "預覽點雲",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "儲存 3D（進階）",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "來自上游 3D 節點的 3D 模型檔案。"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "SaveAnimatedPNG",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "儲存 Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "一個 gaussian splat 3D 檔案。"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "將輸入的圖片儲存到您的 ComfyUI 輸出目錄。",
     "display_name": "儲存圖片",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "儲存點雲",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "點雲檔案 (.ply)"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "在磁碟上儲存 SVG 檔案。",
     "display_name": "儲存SVG節點",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "將文字內容儲存到輸出目錄的檔案中。",
+    "display_name": "儲存文字",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "將已編碼的訓練資料集（latent + conditioning）儲存到磁碟，以便訓練時高效載入。",
     "display_name": "儲存訓練資料集",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "從 VAE latent 建立 SeedVR2 正/負 conditioning。",
+    "display_name": "套用 SeedVR2 Conditioning",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "SeedVR2 模型。"
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "用於取樣的正向 conditioning。"
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "用於取樣的負向 conditioning。"
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "將生成的影像與原始調整尺寸後的影像對齊，並套用色彩校正。",
+    "display_name": "後處理 SeedVR2 輸出",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "將生成影像色彩匹配到原始影像的方法。lab：在 CIELAB 空間轉換色彩，保留細節（最忠實）。wavelet：轉換低頻色彩，保留升頻後的高頻細節。adain：匹配每通道平均值/標準差（最快，整體色調）。none：跳過色彩轉換（僅幾何對齊）。"
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "要處理的生成影像。"
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "預處理前的原始調整尺寸影像，作為參考用。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "對齊並色彩校正後的影像。"
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "為 SeedVR2 模型填充調整尺寸後的影像。Alpha 通道會被移除。Post-Process SeedVR2 Output 節點會從原始調整尺寸影像重新套用 Alpha 通道。",
+    "display_name": "預處理 SeedVR2 輸入",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "要處理的調整尺寸影像。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "用於 VAE 編碼的填充影像。"
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "將 SeedVR2 影片 latent 分割為重疊的時間區塊，每次僅取一個區塊以適應 VRAM，將 latents 輸出同時連接到 Apply SeedVR2 Conditioning 及取樣器 latent 輸入，最後用 Merge SeedVR2 Latents 合併。",
+    "display_name": "分割 SeedVR2 latent",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = 精確使用 frames_per_chunk；auto = 預測可容納於 VRAM 的最大區塊。"
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "要分割的 VAE 編碼 SeedVR2 latent。"
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "相鄰區塊間共享的 latent 幀數，合併時進行交叉淡化；0 代表無重疊。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "依序排列的時間區塊。"
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "相鄰區塊間實際的 latent 幀重疊數，供 Merge SeedVR2 Latents 使用。"
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "將已取樣的 SeedVR2 latent 時間區塊重新組合為一個 latent，並以 Hann 窗函數根據 Split SeedVR2 Latent 輸出的 temporal_overlap 進行交叉淡化。",
+    "display_name": "合併 SeedVR2 latents",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "依序排列的已取樣時間區塊。"
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "Split SeedVR2 Latent 的 temporal_overlap 輸出。0 代表直接串接。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "重新組合後的完整 latent。"
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "將 CLIP 文字編碼器放置於指定裝置（default / cpu / gpu:N）。\n\n- 「default」會還原為載入器分配的裝置。\n- 「cpu」會將載入與卸載裝置都固定於 CPU。\n- 「gpu:N」會將載入裝置固定於第 N 張可用 GPU。\n\n當所選裝置在目前機器上不存在時\n（例如在 2-GPU 機器建立的工作流程於 1-GPU 機器開啟），\n此節點會直接傳遞 CLIP 並記錄訊息，而不會導致失敗。",
     "display_name": "選擇 CLIP 裝置",
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 1d384f0c60..c68bea7d2d 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -359,6 +359,7 @@
     "colors": "调色板",
     "descLabel": "描述",
     "descPlaceholder": "该区域的描述",
+    "grid": "网格",
     "textLabel": "文本",
     "textPlaceholder": "要渲染的文本（原文）",
     "typeObj": "obj",
@@ -954,6 +955,16 @@
       "title": "无效对话框"
     }
   },
+  "desktopLogin": {
+    "confirmMessage": "ComfyUI 桌面应用正在等待使用您的账户登录。仅当您刚刚在 ComfyUI 桌面应用中开始登录时才继续。",
+    "confirmSummary": "批准桌面端登录？",
+    "expiredDetail": "登录请求已过期或已被使用。请在 ComfyUI 桌面应用中重新开始登录。",
+    "expiredSummary": "桌面端登录失败",
+    "failedDetail": "完成桌面端登录时出现问题。请在 ComfyUI 桌面应用中重新开始登录。",
+    "failedSummary": "桌面端登录失败",
+    "successDetail": "您可以返回 ComfyUI 桌面应用。",
+    "successSummary": "登录成功"
+  },
   "desktopMenu": {
     "confirmQuit": "有未保存的工作流开启；任何未保存的更改都将丢失。忽略此警告并退出？",
     "confirmReinstall": "这将清除您的 extra_models_config.yaml 文件，并重新开始安装。您确定吗？",
@@ -2854,6 +2865,8 @@
     "phantom subject": "幻影主体",
     "photomaker": "PhotoMaker",
     "pixart": "pixart",
+    "post-processors": "后处理器",
+    "pre-processors": "预处理器",
     "preprocessors": "预处理器",
     "primitive": "基础",
     "qwen": "Qwen千问",
@@ -4135,6 +4148,7 @@
       "newest": "最新",
       "popular": "热门",
       "recommended": "推荐",
+      "relevance": "相关性",
       "searchPlaceholder": "搜索..."
     },
     "sorting": "排序方式",
diff --git a/src/locales/zh/nodeDefs.json b/src/locales/zh/nodeDefs.json
index e66e996e8f..1a3386ab2b 100644
--- a/src/locales/zh/nodeDefs.json
+++ b/src/locales/zh/nodeDefs.json
@@ -1325,6 +1325,10 @@
         "name": "种子",
         "tooltip": "用于生成的种子。"
       },
+      "thinking": {
+        "name": "thinking",
+        "tooltip": "启用模型的提示优化推理（“thinking”），以更好地遵循提示。可能会显著增加生成时间——在 Seedream 5.0 Pro 上尤为明显。仅在文本转图像时可关闭（提供参考图像时无法关闭）。"
+      },
       "watermark": {
         "name": "水印",
         "tooltip": "是否在图像上添加“AI生成”水印。"
@@ -2831,6 +2835,10 @@
         "name": "背景",
         "tooltip": "在画布和预览中用作背景的可选图像。"
       },
+      "bboxes": {
+        "name": "bboxes",
+        "tooltip": "用于初始化画布的边界框、元素或 JSON 字符串。新的上游值会初始化画布；在画布上的编辑优先生效，并会一直保留，直到上游值再次变化。"
+      },
       "editor_state": {
         "name": "编辑器状态",
         "tooltip": "绘制边界框并设置每个框的类型、文本、描述、色板。先添加背景元素，最后添加前景元素。"
@@ -2839,6 +2847,10 @@
         "name": "高度",
         "tooltip": "画布及边界框像素网格的高度。"
       },
+      "last_incoming": {
+        "name": "last_incoming",
+        "tooltip": "由画布管理的内部状态：上次用于初始化画布的上游 bboxes 值。留空将在下次运行时根据 bboxes 输入重新初始化画布。"
+      },
       "width": {
         "name": "宽度",
         "tooltip": "画布及边界框像素网格的宽度。"
@@ -10565,6 +10577,12 @@
       "mask": {
         "name": "遮罩"
       }
+    },
+    "outputs": {
+      "0": {
+        "name": "mask",
+        "tooltip": null
+      }
     }
   },
   "MaskToImage": {
@@ -14573,6 +14591,7 @@
     }
   },
   "Preview3D": {
+    "description": "预览 3D 模型文件，无需将其保存到 ComfyUI 输出目录。",
     "display_name": "预览3D",
     "inputs": {
       "bg_image": {
@@ -14591,6 +14610,7 @@
     }
   },
   "Preview3DAdvanced": {
+    "description": "预览 3D 模型文件，无需将其保存到 ComfyUI 输出目录。",
     "display_name": "3D 预览（高级）",
     "inputs": {
       "camera_info": {
@@ -14637,6 +14657,7 @@
     }
   },
   "PreviewAny": {
+    "description": "将任意输入值以文本形式预览。",
     "display_name": "预览任意",
     "inputs": {
       "preview_mode": "预览模式",
@@ -14647,6 +14668,7 @@
     }
   },
   "PreviewAudio": {
+    "description": "预览音频，无需将其保存到 ComfyUI 输出目录。",
     "display_name": "预览音频",
     "inputs": {
       "audio": {
@@ -14664,6 +14686,7 @@
     }
   },
   "PreviewGaussianSplat": {
+    "description": "预览高斯点云 3D 文件，无需将其保存到 ComfyUI 输出目录。",
     "display_name": "预览 Splat",
     "inputs": {
       "camera_info": {
@@ -14724,6 +14747,7 @@
     }
   },
   "PreviewPointCloud": {
+    "description": "预览点云 3D 文件，无需将其保存到 ComfyUI 输出目录。",
     "display_name": "预览点云",
     "inputs": {
       "camera_info": {
@@ -17501,6 +17525,55 @@
       }
     }
   },
+  "Save3DAdvanced": {
+    "display_name": "保存 3D（高级）",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "来自上游 3D 节点的 3D 模型文件。"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveAnimatedPNG": {
     "display_name": "保存动画（APNG）",
     "inputs": {
@@ -17661,6 +17734,55 @@
       }
     }
   },
+  "SaveGaussianSplat": {
+    "display_name": "保存 Splat",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "高斯 Splat 3D 文件。"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveImage": {
     "description": "将输入图像保存到您的ComfyUI输出目录。",
     "display_name": "保存图像",
@@ -17799,6 +17921,55 @@
       }
     }
   },
+  "SavePointCloud": {
+    "display_name": "保存点云",
+    "inputs": {
+      "camera_info": {
+        "name": "camera_info"
+      },
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "height": {
+        "name": "height"
+      },
+      "model_3d": {
+        "name": "model_3d",
+        "tooltip": "点云文件（.ply）"
+      },
+      "model_3d_info": {
+        "name": "model_3d_info"
+      },
+      "viewport_state": {
+        "name": "viewport_state"
+      },
+      "width": {
+        "name": "width"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "model_3d",
+        "tooltip": null
+      },
+      "1": {
+        "name": "model_3d_info",
+        "tooltip": null
+      },
+      "2": {
+        "name": "camera_info",
+        "tooltip": null
+      },
+      "3": {
+        "name": "width",
+        "tooltip": null
+      },
+      "4": {
+        "name": "height",
+        "tooltip": null
+      }
+    }
+  },
   "SaveSVGNode": {
     "description": "在磁盘上保存 SVG 文件。",
     "display_name": "保存SVG",
@@ -17818,6 +17989,29 @@
       }
     }
   },
+  "SaveText": {
+    "description": "将文本内容保存到输出目录中的文件。",
+    "display_name": "保存文本",
+    "inputs": {
+      "filename_prefix": {
+        "name": "filename_prefix"
+      },
+      "format": {
+        "name": "format"
+      },
+      "preview_mode": {},
+      "preview_text": {},
+      "text": {
+        "name": "text"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "text",
+        "tooltip": null
+      }
+    }
+  },
   "SaveTrainingDataset": {
     "description": "将编码后的训练数据集（latent + conditioning）保存到磁盘，以便训练时高效加载。",
     "display_name": "保存训练数据集",
@@ -17945,6 +18139,117 @@
       }
     }
   },
+  "SeedVR2Conditioning": {
+    "description": "从 VAE latent 构建 SeedVR2 正/负条件。",
+    "display_name": "应用 SeedVR2 条件",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "SeedVR2 模型。"
+      },
+      "vae_conditioning": {
+        "name": "vae_conditioning"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": "用于采样的正向条件。"
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": "用于采样的负向条件。"
+      }
+    }
+  },
+  "SeedVR2PostProcessing": {
+    "description": "将生成的图像与原始调整尺寸后的图像对齐，并应用颜色校正。",
+    "display_name": "后处理 SeedVR2 输出",
+    "inputs": {
+      "color_correction_method": {
+        "name": "color_correction_method",
+        "tooltip": "将生成图像颜色与原始图像匹配的方法。lab：在 CIELAB 空间中转移颜色，保留细节（最忠实）。wavelet：转移低频颜色，保留高分辨率细节。adain：匹配每通道均值/标准差（最快，整体色调）。none：跳过颜色转移（仅几何对齐）。"
+      },
+      "images": {
+        "name": "images",
+        "tooltip": "要处理的生成图像。"
+      },
+      "original_resized_images": {
+        "name": "original_resized_images",
+        "tooltip": "预处理前的原始调整尺寸图像，作为参考。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "对齐并颜色校正后的图像。"
+      }
+    }
+  },
+  "SeedVR2Preprocess": {
+    "description": "为 SeedVR2 模型填充调整尺寸后的图像。Alpha 通道会被移除。节点“后处理 SeedVR2 输出”会从原始调整尺寸图像重新应用 Alpha 通道。",
+    "display_name": "预处理 SeedVR2 输入",
+    "inputs": {
+      "resized_images": {
+        "name": "resized_images",
+        "tooltip": "要处理的调整尺寸图像。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "images",
+        "tooltip": "用于 VAE 编码的填充图像。"
+      }
+    }
+  },
+  "SeedVR2TemporalChunk": {
+    "description": "将 SeedVR2 视频 latent 分割为重叠的时间块，每次采样一个块以适应 VRAM，将 latent 输出分别连接到“应用 SeedVR2 条件”和采样器 latent 输入，最后通过“合并 SeedVR2 latent”重新组合。",
+    "display_name": "分割 SeedVR2 latent",
+    "inputs": {
+      "chunking_mode": {
+        "name": "chunking_mode",
+        "tooltip": "manual = 精确使用 frames_per_chunk；auto = 预测可适应空闲 VRAM 的最大块。"
+      },
+      "latent": {
+        "name": "latent",
+        "tooltip": "要分割的 VAE 编码 SeedVR2 latent。"
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "相邻块之间共享的 latent 帧，在合并时进行交叉淡入；0 = 无重叠。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latents",
+        "tooltip": "按顺序排列的时间块。"
+      },
+      "1": {
+        "name": "temporal_overlap",
+        "tooltip": "相邻块之间实际的 latent 帧重叠量，用于“合并 SeedVR2 latent”。"
+      }
+    }
+  },
+  "SeedVR2TemporalMerge": {
+    "description": "将采样后的 SeedVR2 latent 时间块重新组合为一个 latent，使用 Hann 窗对每个重叠部分进行交叉淡入，窗口大小由“分割 SeedVR2 latent”传入的 temporal_overlap 决定。",
+    "display_name": "合并 SeedVR2 latent",
+    "inputs": {
+      "latents": {
+        "name": "latents",
+        "tooltip": "按顺序排列的采样时间块。"
+      },
+      "temporal_overlap": {
+        "name": "temporal_overlap",
+        "tooltip": "“分割 SeedVR2 latent”的 temporal_overlap 输出。0 = 直接拼接。"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "latent",
+        "tooltip": "重新组合后的完整 latent。"
+      }
+    }
+  },
   "SelectCLIPDevice": {
     "description": "将 CLIP 文本编码器放置在指定设备上（default / cpu / gpu:N）。\n\n- “default” 恢复加载器分配的设备。\n- “cpu” 将加载和卸载设备都固定为 CPU。\n- “gpu:N” 将加载设备固定为第 N 个可用 GPU。\n\n当所选设备在当前机器上不存在时\n（例如在 2-GPU 机器上构建的工作流在 1-GPU 机器上打开），\n节点会直接传递 CLIP 并记录消息，而不会报错。",
     "display_name": "选择 CLIP 设备",
diff --git a/src/platform/secrets/api/secretsApi.test.ts b/src/platform/secrets/api/secretsApi.test.ts
index 3dfa061eac..dc005d1d82 100644
--- a/src/platform/secrets/api/secretsApi.test.ts
+++ b/src/platform/secrets/api/secretsApi.test.ts
@@ -25,7 +25,7 @@ describe('listSecretProviders', () => {
     vi.clearAllMocks()
   })
 
-  it('requests the providers endpoint and maps ids', async () => {
+  it('requests the providers endpoint and returns the provider list', async () => {
     mockFetchApi.mockResolvedValue(
       jsonResponse({ data: [{ id: 'huggingface' }, { id: 'civitai' }] })
     )
@@ -33,7 +33,23 @@ describe('listSecretProviders', () => {
     const providers = await listSecretProviders()
 
     expect(mockFetchApi).toHaveBeenCalledWith('/secrets/providers')
-    expect(providers).toEqual(['huggingface', 'civitai'])
+    expect(providers).toEqual([{ id: 'huggingface' }, { id: 'civitai' }])
+  })
+
+  it('passes through per-provider input_type and label metadata', async () => {
+    mockFetchApi.mockResolvedValue(
+      jsonResponse({
+        data: [
+          { id: 'gemini', input_type: 'json_file', label: 'Gemini (Vertex)' }
+        ]
+      })
+    )
+
+    const providers = await listSecretProviders()
+
+    expect(providers).toEqual([
+      { id: 'gemini', input_type: 'json_file', label: 'Gemini (Vertex)' }
+    ])
   })
 
   it('returns an empty list when data is missing', async () => {
diff --git a/src/platform/secrets/api/secretsApi.ts b/src/platform/secrets/api/secretsApi.ts
index a4cf8427dc..a0a652b6aa 100644
--- a/src/platform/secrets/api/secretsApi.ts
+++ b/src/platform/secrets/api/secretsApi.ts
@@ -9,6 +9,7 @@ import type {
   SecretCreateRequest,
   SecretErrorCode,
   SecretMetadata,
+  SecretProviderInfo,
   SecretUpdateRequest
 } from '../types'
 import { SECRET_ERROR_CODES } from '../types'
@@ -57,10 +58,10 @@ export async function listSecrets(): Promise<SecretMetadata[]> {
   return data.data
 }
 
-export async function listSecretProviders(): Promise<string[]> {
+export async function listSecretProviders(): Promise<SecretProviderInfo[]> {
   const response = await api.fetchApi('/secrets/providers')
   const data = await handleResponse<SecretProvidersResponse>(response)
-  return (data.data ?? []).map((provider) => provider.id)
+  return data.data ?? []
 }
 
 export async function createSecret(
diff --git a/src/platform/secrets/components/SecretFormDialog.test.ts b/src/platform/secrets/components/SecretFormDialog.test.ts
index ad717f8038..419cf95895 100644
--- a/src/platform/secrets/components/SecretFormDialog.test.ts
+++ b/src/platform/secrets/components/SecretFormDialog.test.ts
@@ -1,10 +1,13 @@
-import { render } from '@testing-library/vue'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import SecretFormDialog from './SecretFormDialog.vue'
 
+const mockState = vi.hoisted(() => ({ inputType: 'text' as string }))
+
 vi.mock('../composables/useSecretForm', () => ({
   useSecretForm: () => ({
     form: { provider: '', name: '', secretValue: '' },
@@ -13,6 +16,9 @@ vi.mock('../composables/useSecretForm', () => ({
     apiError: '',
     providerOptions: [],
     providerHelp: '',
+    selectedInputType: computed(() => mockState.inputType),
+    fileName: ref(''),
+    loadSecretFromFile: vi.fn(),
     handleSubmit: vi.fn()
   })
 }))
@@ -83,6 +89,7 @@ const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
 describe('SecretFormDialog', () => {
   beforeEach(() => {
     capturedPointerDownOutside = null
+    mockState.inputType = 'text'
   })
 
   it('prevents backdrop pointer-down-outside from closing the dialog', () => {
@@ -96,4 +103,53 @@ describe('SecretFormDialog', () => {
     capturedPointerDownOutside!(event)
     expect(event.defaultPrevented).toBe(true)
   })
+
+  it('does not render the JSON upload control for a text provider', () => {
+    render(SecretFormDialog, {
+      global: { plugins: [i18n] },
+      props: { visible: true }
+    })
+
+    expect(screen.queryByText('secrets.uploadJsonFile')).toBeNull()
+    expect(
+      screen.queryByPlaceholderText('secrets.jsonFilePlaceholder')
+    ).toBeNull()
+  })
+
+  it('renders a file upload and textarea for a json_file provider', () => {
+    mockState.inputType = 'json_file'
+
+    render(SecretFormDialog, {
+      global: { plugins: [i18n] },
+      props: { visible: true }
+    })
+
+    expect(screen.getByText('secrets.uploadJsonFile')).toBeTruthy()
+    expect(
+      screen.getByPlaceholderText('secrets.jsonFilePlaceholder')
+    ).toBeTruthy()
+  })
+
+  it('opens the file dialog when the JSON upload button is activated by keyboard', async () => {
+    mockState.inputType = 'json_file'
+
+    const fileClickSpy = vi
+      .spyOn(HTMLInputElement.prototype, 'click')
+      .mockImplementation(() => {})
+
+    render(SecretFormDialog, {
+      global: { plugins: [i18n] },
+      props: { visible: true }
+    })
+
+    const uploadButton = screen.getByRole('button', {
+      name: 'secrets.uploadJsonFile'
+    })
+    expect(uploadButton.tabIndex).not.toBe(-1)
+
+    uploadButton.focus()
+    await userEvent.keyboard('{Enter}')
+
+    expect(fileClickSpy).toHaveBeenCalledOnce()
+  })
 })
diff --git a/src/platform/secrets/components/SecretFormDialog.vue b/src/platform/secrets/components/SecretFormDialog.vue
index bba66399a5..1c6578a372 100644
--- a/src/platform/secrets/components/SecretFormDialog.vue
+++ b/src/platform/secrets/components/SecretFormDialog.vue
@@ -76,7 +76,37 @@
             <label for="secret-value" class="text-sm font-medium">
               {{ $t('secrets.secretValue') }}
             </label>
+            <template v-if="selectedInputType === 'json_file'">
+              <Button
+                type="button"
+                variant="secondary"
+                size="sm"
+                class="w-fit"
+                @click="fileInput?.click()"
+              >
+                <i class="pi pi-upload" />
+                {{ $t('secrets.uploadJsonFile') }}
+              </Button>
+              <input
+                ref="fileInput"
+                type="file"
+                accept="application/json,.json"
+                class="hidden"
+                @change="onFileChange"
+              />
+              <span v-if="fileName" class="text-sm text-muted">
+                {{ fileName }}
+              </span>
+              <Textarea
+                id="secret-value"
+                v-model="form.secretValue"
+                :placeholder="$t('secrets.jsonFilePlaceholder')"
+                class="min-h-32 font-mono"
+                :class="{ 'p-invalid': errors.secretValue }"
+              />
+            </template>
             <Password
+              v-else
               id="secret-value"
               v-model="form.secretValue"
               :placeholder="
@@ -93,11 +123,7 @@
               {{ errors.secretValue }}
             </small>
             <small v-else class="text-muted">
-              {{
-                mode === 'edit'
-                  ? $t('secrets.secretValueHintEdit')
-                  : $t('secrets.secretValueHint')
-              }}
+              {{ secretValueHint }}
             </small>
           </div>
 
@@ -127,7 +153,8 @@
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
-import { useId } from 'vue'
+import { computed, useId, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import Dialog from '@/components/ui/dialog/Dialog.vue'
@@ -143,9 +170,10 @@ import SelectContent from '@/components/ui/select/SelectContent.vue'
 import SelectItem from '@/components/ui/select/SelectItem.vue'
 import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
 import SelectValue from '@/components/ui/select/SelectValue.vue'
+import Textarea from '@/components/ui/textarea/Textarea.vue'
 
 import { useSecretForm } from '../composables/useSecretForm'
-import type { SecretMetadata } from '../types'
+import type { SecretMetadata, SecretProviderInfo } from '../types'
 
 const {
   secret,
@@ -155,7 +183,7 @@ const {
 } = defineProps<{
   secret?: SecretMetadata
   existingProviders?: string[]
-  availableProviders?: string[] | null
+  availableProviders?: SecretProviderInfo[] | null
   mode?: 'create' | 'edit'
 }>()
 
@@ -165,7 +193,9 @@ const emit = defineEmits<{
   saved: []
 }>()
 
+const { t } = useI18n()
 const titleId = useId()
+const fileInput = useTemplateRef<HTMLInputElement>('fileInput')
 
 const {
   form,
@@ -174,6 +204,9 @@ const {
   apiError,
   providerOptions,
   providerHelp,
+  selectedInputType,
+  fileName,
+  loadSecretFromFile,
   handleSubmit
 } = useSecretForm({
   mode,
@@ -183,4 +216,21 @@ const {
   visible,
   onSaved: () => emit('saved')
 })
+
+const secretValueHint = computed(() => {
+  if (selectedInputType.value === 'json_file') {
+    return mode === 'edit'
+      ? t('secrets.jsonFileHintEdit')
+      : t('secrets.jsonFileHint')
+  }
+  return mode === 'edit'
+    ? t('secrets.secretValueHintEdit')
+    : t('secrets.secretValueHint')
+})
+
+async function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  await loadSecretFromFile(input.files?.[0] ?? null)
+  input.value = ''
+}
 </script>
diff --git a/src/platform/secrets/components/SecretFormDialog.zindex.test.ts b/src/platform/secrets/components/SecretFormDialog.zindex.test.ts
index ff16206ff1..c016a96e15 100644
--- a/src/platform/secrets/components/SecretFormDialog.zindex.test.ts
+++ b/src/platform/secrets/components/SecretFormDialog.zindex.test.ts
@@ -2,6 +2,7 @@ import { ZIndex } from '@primeuix/utils/zindex'
 import { cleanup, render, screen } from '@testing-library/vue'
 import PrimeVue from 'primevue/config'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import SecretFormDialog from './SecretFormDialog.vue'
@@ -14,6 +15,9 @@ vi.mock('../composables/useSecretForm', () => ({
     apiError: '',
     providerOptions: [],
     providerHelp: '',
+    selectedInputType: ref('text'),
+    fileName: ref(''),
+    loadSecretFromFile: vi.fn(),
     handleSubmit: vi.fn()
   })
 }))
diff --git a/src/platform/secrets/composables/useSecretForm.test.ts b/src/platform/secrets/composables/useSecretForm.test.ts
index 9a0dda58b4..4c782704f6 100644
--- a/src/platform/secrets/composables/useSecretForm.test.ts
+++ b/src/platform/secrets/composables/useSecretForm.test.ts
@@ -1,7 +1,11 @@
 import { nextTick, ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { SecretMetadata, SecretProvider } from '../types'
+import type {
+  SecretMetadata,
+  SecretProvider,
+  SecretProviderInfo
+} from '../types'
 import { useSecretForm } from './useSecretForm'
 
 vi.mock('vue-i18n', () => ({
@@ -218,7 +222,7 @@ describe('useSecretForm', () => {
       const { providerOptions } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
-        availableProviders: () => ['civitai'],
+        availableProviders: () => [{ id: 'civitai' }],
         visible,
         onSaved: vi.fn()
       })
@@ -231,7 +235,11 @@ describe('useSecretForm', () => {
       const { providerOptions } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
-        availableProviders: () => ['civitai', 'civitai', 'huggingface'],
+        availableProviders: () => [
+          { id: 'civitai' },
+          { id: 'civitai' },
+          { id: 'huggingface' }
+        ],
         visible,
         onSaved: vi.fn()
       })
@@ -247,7 +255,7 @@ describe('useSecretForm', () => {
       const { providerOptions } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
-        availableProviders: () => ['runway', 'gemini'],
+        availableProviders: () => [{ id: 'runway' }, { id: 'gemini' }],
         visible,
         onSaved: vi.fn()
       })
@@ -273,7 +281,7 @@ describe('useSecretForm', () => {
       const { providerOptions } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
-        availableProviders: () => ['brand-new-provider'],
+        availableProviders: () => [{ id: 'brand-new-provider' }],
         visible,
         onSaved: vi.fn()
       })
@@ -294,7 +302,7 @@ describe('useSecretForm', () => {
       const { providerOptions } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
-        availableProviders: () => ['huggingface'],
+        availableProviders: () => [{ id: 'huggingface' }],
         visible,
         onSaved: vi.fn()
       })
@@ -307,7 +315,7 @@ describe('useSecretForm', () => {
 
     it('reacts to availableProviders changing', () => {
       const visible = ref(true)
-      const availableProviders = ref<string[] | null>(null)
+      const availableProviders = ref<SecretProviderInfo[] | null>(null)
       const { providerOptions } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
@@ -318,14 +326,14 @@ describe('useSecretForm', () => {
 
       expect(providerOptions.value).toHaveLength(2)
 
-      availableProviders.value = ['huggingface']
+      availableProviders.value = [{ id: 'huggingface' }]
 
       expect(providerOptions.value.map((o) => o.value)).toEqual(['huggingface'])
     })
 
     it('clears a selection the resolved allowlist no longer offers', async () => {
       const visible = ref(true)
-      const availableProviders = ref<string[] | null>(null)
+      const availableProviders = ref<SecretProviderInfo[] | null>(null)
       const { form, providerOptions } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
@@ -335,7 +343,7 @@ describe('useSecretForm', () => {
       })
 
       form.provider = 'civitai'
-      availableProviders.value = ['huggingface']
+      availableProviders.value = [{ id: 'huggingface' }]
       await nextTick()
 
       expect(providerOptions.value.map((o) => o.value)).toEqual(['huggingface'])
@@ -344,7 +352,7 @@ describe('useSecretForm', () => {
 
     it('keeps a selection the resolved allowlist still offers', async () => {
       const visible = ref(true)
-      const availableProviders = ref<string[] | null>(null)
+      const availableProviders = ref<SecretProviderInfo[] | null>(null)
       const { form } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
@@ -354,7 +362,7 @@ describe('useSecretForm', () => {
       })
 
       form.provider = 'huggingface'
-      availableProviders.value = ['huggingface', 'civitai']
+      availableProviders.value = [{ id: 'huggingface' }, { id: 'civitai' }]
       await nextTick()
 
       expect(form.provider).toBe('huggingface')
@@ -366,7 +374,7 @@ describe('useSecretForm', () => {
         mode: 'edit',
         secret: () => createMockSecret({ provider: 'huggingface' }),
         existingProviders: () => [],
-        availableProviders: () => ['civitai'],
+        availableProviders: () => [{ id: 'civitai' }],
         visible,
         onSaved: vi.fn()
       })
@@ -418,7 +426,7 @@ describe('useSecretForm', () => {
       const { form, providerHelp } = useSecretForm({
         mode: 'create',
         existingProviders: () => [],
-        availableProviders: () => ['runway', 'gemini'],
+        availableProviders: () => [{ id: 'runway' }, { id: 'gemini' }],
         visible,
         onSaved: vi.fn()
       })
@@ -444,6 +452,236 @@ describe('useSecretForm', () => {
     })
   })
 
+  describe('server-driven provider metadata', () => {
+    it('prefers the server-provided label over the registry label', () => {
+      const visible = ref(true)
+      const { providerOptions } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => [{ id: 'gemini', label: 'Gemini (Vertex)' }],
+        visible,
+        onSaved: vi.fn()
+      })
+
+      expect(
+        providerOptions.value.find((o) => o.value === 'gemini')?.label
+      ).toBe('Gemini (Vertex)')
+    })
+
+    it('defaults selectedInputType to text', () => {
+      const visible = ref(true)
+      const { form, selectedInputType } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => [{ id: 'gemini' }],
+        visible,
+        onSaved: vi.fn()
+      })
+
+      expect(selectedInputType.value).toBe('text')
+      form.provider = 'gemini'
+      expect(selectedInputType.value).toBe('text')
+    })
+
+    it('reports json_file input type for a json_file provider', () => {
+      const visible = ref(true)
+      const { form, selectedInputType } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => [{ id: 'gemini', input_type: 'json_file' }],
+        visible,
+        onSaved: vi.fn()
+      })
+
+      form.provider = 'gemini'
+      expect(selectedInputType.value).toBe('json_file')
+    })
+  })
+
+  describe('json_file credential input', () => {
+    const vertexProviders: SecretProviderInfo[] = [
+      { id: 'gemini', input_type: 'json_file' }
+    ]
+
+    it('loads file contents into the secret value', async () => {
+      const visible = ref(true)
+      const { form, fileName, loadSecretFromFile } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        visible,
+        onSaved: vi.fn()
+      })
+
+      const file = new File(['{"type":"service_account"}'], 'sa.json', {
+        type: 'application/json'
+      })
+      await loadSecretFromFile(file)
+
+      expect(form.secretValue).toBe('{"type":"service_account"}')
+      expect(fileName.value).toBe('sa.json')
+    })
+
+    it('rejects invalid JSON for a json_file provider', async () => {
+      const visible = ref(true)
+      const { form, errors, handleSubmit } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => vertexProviders,
+        visible,
+        onSaved: vi.fn()
+      })
+
+      form.name = 'Vertex SA'
+      form.provider = 'gemini'
+      form.secretValue = 'not json'
+
+      await handleSubmit()
+
+      expect(mockCreate).not.toHaveBeenCalled()
+      expect(errors.secretValue).toBe('secrets.errors.invalidJson')
+    })
+
+    it('rejects JSON that is not an object for a json_file provider', async () => {
+      const visible = ref(true)
+      const { form, errors, handleSubmit } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => vertexProviders,
+        visible,
+        onSaved: vi.fn()
+      })
+
+      form.name = 'Vertex SA'
+      form.provider = 'gemini'
+      form.secretValue = '["not", "an", "object"]'
+
+      await handleSubmit()
+
+      expect(mockCreate).not.toHaveBeenCalled()
+      expect(errors.secretValue).toBe('secrets.errors.invalidJson')
+    })
+
+    it('rejects a file larger than the size cap', async () => {
+      const visible = ref(true)
+      const { form, fileName, errors, loadSecretFromFile } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        visible,
+        onSaved: vi.fn()
+      })
+
+      const oversized = new File(['x'.repeat(1024 * 1024 + 1)], 'big.json', {
+        type: 'application/json'
+      })
+      await loadSecretFromFile(oversized)
+
+      expect(form.secretValue).toBe('')
+      expect(fileName.value).toBe('')
+      expect(errors.secretValue).toBe('secrets.errors.fileTooLarge')
+    })
+
+    it('reports an error when the file read fails', async () => {
+      const visible = ref(true)
+      const { errors, loadSecretFromFile } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        visible,
+        onSaved: vi.fn()
+      })
+
+      const unreadable = {
+        name: 'sa.json',
+        size: 20,
+        text: () => Promise.reject(new Error('read failed'))
+      } as unknown as File
+      await loadSecretFromFile(unreadable)
+
+      expect(errors.secretValue).toBe('secrets.errors.fileReadFailed')
+    })
+
+    it('clears an uploaded credential when the provider changes', async () => {
+      const visible = ref(true)
+      const { form, fileName, loadSecretFromFile } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => vertexProviders,
+        visible,
+        onSaved: vi.fn()
+      })
+
+      form.provider = 'gemini'
+      await nextTick()
+      const file = new File(['{"type":"service_account"}'], 'sa.json', {
+        type: 'application/json'
+      })
+      await loadSecretFromFile(file)
+      expect(form.secretValue).toBe('{"type":"service_account"}')
+
+      form.provider = 'huggingface'
+      await nextTick()
+
+      expect(form.secretValue).toBe('')
+      expect(fileName.value).toBe('')
+    })
+
+    it('discards a file read superseded by a provider change', async () => {
+      const visible = ref(true)
+      const { form, fileName, loadSecretFromFile } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => vertexProviders,
+        visible,
+        onSaved: vi.fn()
+      })
+
+      form.provider = 'gemini'
+      await nextTick()
+
+      let resolveRead: (value: string) => void = () => {}
+      const slowFile = {
+        name: 'sa.json',
+        size: 26,
+        text: () =>
+          new Promise<string>((resolve) => {
+            resolveRead = resolve
+          })
+      } as unknown as File
+
+      const pending = loadSecretFromFile(slowFile)
+      form.provider = 'huggingface'
+      await nextTick()
+      resolveRead('{"type":"service_account"}')
+      await pending
+
+      expect(form.secretValue).toBe('')
+      expect(fileName.value).toBe('')
+    })
+
+    it('submits valid JSON for a json_file provider', async () => {
+      const visible = ref(true)
+      mockCreate.mockResolvedValue({})
+      const { form, handleSubmit } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => vertexProviders,
+        visible,
+        onSaved: vi.fn()
+      })
+
+      form.name = 'Vertex SA'
+      form.provider = 'gemini'
+      form.secretValue = '{"type":"service_account"}'
+
+      await handleSubmit()
+
+      expect(mockCreate).toHaveBeenCalledWith({
+        name: 'Vertex SA',
+        secret_value: '{"type":"service_account"}',
+        provider: 'gemini'
+      })
+    })
+  })
+
   describe('handleSubmit', () => {
     it('calls create API with correct payload', async () => {
       const visible = ref(true)
diff --git a/src/platform/secrets/composables/useSecretForm.ts b/src/platform/secrets/composables/useSecretForm.ts
index d9dd1bfbf9..2cebf1613b 100644
--- a/src/platform/secrets/composables/useSecretForm.ts
+++ b/src/platform/secrets/composables/useSecretForm.ts
@@ -10,7 +10,12 @@ import {
   getProviderLabel,
   getProviderLogo
 } from '../providers'
-import type { SecretErrorCode, SecretMetadata } from '../types'
+import type {
+  SecretErrorCode,
+  SecretInputType,
+  SecretMetadata,
+  SecretProviderInfo
+} from '../types'
 
 interface SecretFormState {
   name: string
@@ -32,11 +37,28 @@ interface ProviderOption {
   disabled: boolean
 }
 
+// A json_file credential (e.g. a Vertex service-account key) must be a JSON
+// object, so scalars and arrays are rejected even though they parse.
+function isJsonObject(value: string): boolean {
+  try {
+    const parsed: unknown = JSON.parse(value)
+    return (
+      typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)
+    )
+  } catch {
+    return false
+  }
+}
+
+// Service-account keys are only a few KB; cap uploads well above that so a huge
+// file can't be read into memory or block the main thread on JSON.parse.
+const MAX_JSON_FILE_BYTES = 1024 * 1024
+
 interface UseSecretFormOptions {
   mode: 'create' | 'edit'
   secret?: MaybeRefOrGetter<SecretMetadata | undefined>
   existingProviders: MaybeRefOrGetter<string[]>
-  availableProviders?: MaybeRefOrGetter<string[] | null>
+  availableProviders?: MaybeRefOrGetter<SecretProviderInfo[] | null>
   visible: { value: boolean }
   onSaved: () => void
 }
@@ -55,6 +77,8 @@ export function useSecretForm(options: UseSecretFormOptions) {
   const loading = ref(false)
   const apiErrorCode = ref<SecretErrorCode | null>(null)
   const apiErrorMessage = ref<string | null>(null)
+  // Name of the uploaded credential file (json_file providers), for display.
+  const fileName = ref('')
 
   const form = reactive<SecretFormState>({
     name: '',
@@ -68,6 +92,14 @@ export function useSecretForm(options: UseSecretFormOptions) {
     provider: ''
   })
 
+  // The server-returned provider metadata keyed by id, so option rendering and
+  // the selected provider's input type can look up their `label`/`input_type`.
+  const providerInfoById = computed(() => {
+    const map = new Map<string, SecretProviderInfo>()
+    for (const info of toValue(availableProviders) ?? []) map.set(info.id, info)
+    return map
+  })
+
   const providerOptions = computed<ProviderOption[]>(() => {
     // Which provider ids to render:
     // - edit mode: the field is disabled; show the defaults plus the stored
@@ -87,18 +119,27 @@ export function useSecretForm(options: UseSecretFormOptions) {
           : [...DEFAULT_PROVIDER_IDS]
     } else {
       ids =
-        available === null ? [...DEFAULT_PROVIDER_IDS] : [...new Set(available)]
+        available === null
+          ? [...DEFAULT_PROVIDER_IDS]
+          : [...new Set(available.map((p) => p.id))]
     }
 
     const existing = toValue(existingProviders)
     return ids.map((id) => ({
       value: id,
-      label: getProviderLabel(id),
+      label: providerInfoById.value.get(id)?.label ?? getProviderLabel(id),
       logo: getProviderLogo(id),
       disabled: mode === 'edit' ? false : existing.includes(id)
     }))
   })
 
+  // How the selected provider's credential is entered. Providers omitting
+  // `input_type` (and any unlisted selection) default to a single-line secret.
+  const selectedInputType = computed<SecretInputType>(() => {
+    if (!form.provider) return 'text'
+    return providerInfoById.value.get(form.provider)?.input_type ?? 'text'
+  })
+
   // Once the server allowlist resolves, drop a selection the resolved list no
   // longer offers so the user cannot submit an unlisted provider.
   watch(providerOptions, (resolvedOptions) => {
@@ -139,6 +180,7 @@ export function useSecretForm(options: UseSecretFormOptions) {
       form.secretValue = ''
       form.provider = null
     }
+    fileName.value = ''
     errors.name = ''
     errors.secretValue = ''
     errors.provider = ''
@@ -146,6 +188,42 @@ export function useSecretForm(options: UseSecretFormOptions) {
     apiErrorMessage.value = null
   }
 
+  // Bumped whenever a read is started or invalidated (by a provider change), so
+  // a slow read that resolves after the user has moved on is discarded instead
+  // of overwriting the current field.
+  let latestFileReadId = 0
+
+  async function loadSecretFromFile(file: File | null) {
+    if (!file) return
+    errors.secretValue = ''
+    if (file.size > MAX_JSON_FILE_BYTES) {
+      errors.secretValue = t('secrets.errors.fileTooLarge')
+      return
+    }
+    const readId = ++latestFileReadId
+    try {
+      const text = await file.text()
+      if (readId !== latestFileReadId) return
+      form.secretValue = text
+      fileName.value = file.name
+    } catch {
+      if (readId !== latestFileReadId) return
+      errors.secretValue = t('secrets.errors.fileReadFailed')
+    }
+  }
+
+  // Switching providers discards any entered or uploaded credential so a value
+  // captured for one provider (e.g. an uploaded JSON key) can't be submitted
+  // under another, and invalidates any in-flight file read.
+  watch(
+    () => form.provider,
+    () => {
+      latestFileReadId++
+      form.secretValue = ''
+      fileName.value = ''
+    }
+  )
+
   whenever(() => visible.value, resetForm)
 
   function validate(): boolean {
@@ -169,6 +247,14 @@ export function useSecretForm(options: UseSecretFormOptions) {
       errors.secretValue = t('secrets.errors.secretValueRequired')
       return false
     }
+    if (
+      selectedInputType.value === 'json_file' &&
+      form.secretValue &&
+      !isJsonObject(form.secretValue)
+    ) {
+      errors.secretValue = t('secrets.errors.invalidJson')
+      return false
+    }
     return true
   }
 
@@ -215,6 +301,9 @@ export function useSecretForm(options: UseSecretFormOptions) {
     apiError,
     providerOptions,
     providerHelp,
+    selectedInputType,
+    fileName,
+    loadSecretFromFile,
     handleSubmit
   }
 }
diff --git a/src/platform/secrets/composables/useSecrets.test.ts b/src/platform/secrets/composables/useSecrets.test.ts
index 5e6b64c0af..38222f9daa 100644
--- a/src/platform/secrets/composables/useSecrets.test.ts
+++ b/src/platform/secrets/composables/useSecrets.test.ts
@@ -138,7 +138,10 @@ describe('useSecrets', () => {
 
   describe('fetchProviders', () => {
     it('populates availableProviders from the API', async () => {
-      mockListSecretProviders.mockResolvedValue(['huggingface', 'civitai'])
+      mockListSecretProviders.mockResolvedValue([
+        { id: 'huggingface' },
+        { id: 'civitai' }
+      ])
 
       const { availableProviders, fetchProviders } = useSecrets()
 
@@ -146,7 +149,10 @@ describe('useSecrets', () => {
 
       await fetchProviders()
 
-      expect(availableProviders.value).toEqual(['huggingface', 'civitai'])
+      expect(availableProviders.value).toEqual([
+        { id: 'huggingface' },
+        { id: 'civitai' }
+      ])
     })
 
     it('distinguishes a server-returned empty allowlist from not-loaded', async () => {
diff --git a/src/platform/secrets/composables/useSecrets.ts b/src/platform/secrets/composables/useSecrets.ts
index 118f348834..9067fa0982 100644
--- a/src/platform/secrets/composables/useSecrets.ts
+++ b/src/platform/secrets/composables/useSecrets.ts
@@ -9,7 +9,7 @@ import {
   listSecrets,
   SecretsApiError
 } from '../api/secretsApi'
-import type { SecretMetadata } from '../types'
+import type { SecretMetadata, SecretProviderInfo } from '../types'
 
 export function useSecrets() {
   const { t } = useI18n()
@@ -17,7 +17,7 @@ export function useSecrets() {
 
   const loading = ref(false)
   const secrets = ref<SecretMetadata[]>([])
-  const availableProviders = ref<string[] | null>(null)
+  const availableProviders = ref<SecretProviderInfo[] | null>(null)
   const operatingSecretId = ref<string | null>(null)
 
   const existingProviders = computed<string[]>(() =>
diff --git a/src/platform/secrets/types.ts b/src/platform/secrets/types.ts
index 0ce02700da..4003d86e60 100644
--- a/src/platform/secrets/types.ts
+++ b/src/platform/secrets/types.ts
@@ -1,4 +1,7 @@
-import type { SecretResponse } from '@comfyorg/ingest-types'
+import type {
+  SecretProvider as SecretProviderSchema,
+  SecretResponse
+} from '@comfyorg/ingest-types'
 
 /**
  * Secret metadata as returned by the ingest API, sourced from the generated
@@ -17,6 +20,19 @@ export type SecretMetadata = SecretResponse
  */
 export type SecretProvider = 'huggingface' | 'civitai'
 
+/**
+ * A configurable provider as returned by `GET /secrets/providers`: its id plus
+ * optional presentation (`label`) and credential-entry (`input_type`) metadata.
+ */
+export type SecretProviderInfo = SecretProviderSchema
+
+/**
+ * How a provider's 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). Providers omitting `input_type` are treated as `text`.
+ */
+export type SecretInputType = NonNullable<SecretProviderInfo['input_type']>
+
 export interface SecretCreateRequest {
   name: string
   secret_value: string
diff --git a/src/platform/surveys/appModeFeedback.ts b/src/platform/surveys/appModeFeedback.ts
new file mode 100644
index 0000000000..162451e443
--- /dev/null
+++ b/src/platform/surveys/appModeFeedback.ts
@@ -0,0 +1,3 @@
+export const APP_MODE_FEEDBACK_TYPEFORM_ID = 'jmmzmlKw'
+
+export const APP_MODE_FEEDBACK_FORM_URL = `https://form.typeform.com/to/${APP_MODE_FEEDBACK_TYPEFORM_ID}`
diff --git a/src/platform/telemetry/types.ts b/src/platform/telemetry/types.ts
index 9829f359e7..369f3827ce 100644
--- a/src/platform/telemetry/types.ts
+++ b/src/platform/telemetry/types.ts
@@ -361,6 +361,7 @@ export interface TemplateFilterMetadata {
   selected_use_cases: string[]
   selected_runs_on: string[]
   sort_by:
+    | 'relevance'
     | 'default'
     | 'recommended'
     | 'popular'
diff --git a/src/renderer/core/canvas/canvasStore.test.ts b/src/renderer/core/canvas/canvasStore.test.ts
index f8677e45fe..a7be936d96 100644
--- a/src/renderer/core/canvas/canvasStore.test.ts
+++ b/src/renderer/core/canvas/canvasStore.test.ts
@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
-import { nextTick } from 'vue'
+import { nextTick, ref } from 'vue'
+import type { Ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphCanvas, Positionable } from '@/lib/litegraph/src/litegraph'
@@ -8,9 +9,13 @@ import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
+const { appModeState } = vi.hoisted(() => ({
+  appModeState: {} as { isAppMode: Ref<boolean> }
+}))
+
 vi.mock('@/composables/useAppMode', () => ({
   useAppMode: () => ({
-    isAppMode: { value: false },
+    isAppMode: appModeState.isAppMode,
     setMode: vi.fn()
   })
 }))
@@ -43,6 +48,7 @@ describe('useCanvasStore', () => {
   let store: ReturnType<typeof useCanvasStore>
 
   beforeEach(() => {
+    appModeState.isAppMode = ref(false)
     setActivePinia(createTestingPinia({ stubActions: false }))
     store = useCanvasStore()
     vi.clearAllMocks()
diff --git a/src/renderer/extensions/linearMode/LinearFeedback.vue b/src/renderer/extensions/linearMode/LinearFeedback.vue
deleted file mode 100644
index 0bdf95b048..0000000000
--- a/src/renderer/extensions/linearMode/LinearFeedback.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import TypeformPopoverButton from '@/components/ui/TypeformPopoverButton.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { side, widgetId } = defineProps<{
-  side: 'left' | 'right'
-  widgetId: string
-}>()
-
-const { t } = useI18n()
-const settingStore = useSettingStore()
-const sidebarOnLeft = computed(
-  () => settingStore.get('Comfy.Sidebar.Location') === 'left'
-)
-const visible = computed(() => sidebarOnLeft.value === (side === 'left'))
-</script>
-<template>
-  <div
-    :class="
-      cn(
-        'flex items-center gap-2 self-end px-4 pb-4 text-nowrap text-base-foreground',
-        side === 'right' && 'flex-row-reverse',
-        !visible && 'invisible'
-      )
-    "
-    :aria-hidden="!visible || undefined"
-  >
-    <TypeformPopoverButton
-      :active="visible"
-      :data-tf-widget="widgetId"
-      :align="side === 'left' ? 'start' : 'end'"
-    />
-    <div class="flex flex-col text-sm text-muted-foreground">
-      <span>{{ t('linearMode.beta') }}</span>
-      <span>{{ t('linearMode.giveFeedback') }}</span>
-    </div>
-  </div>
-</template>
diff --git a/src/renderer/extensions/linearMode/LinearPreview.test.ts b/src/renderer/extensions/linearMode/LinearPreview.test.ts
new file mode 100644
index 0000000000..c0d65d4358
--- /dev/null
+++ b/src/renderer/extensions/linearMode/LinearPreview.test.ts
@@ -0,0 +1,167 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { defineComponent } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+import LinearPreview from './LinearPreview.vue'
+import type { OutputSelection } from './linearModeTypes'
+
+const appModeState = vi.hoisted(() => ({
+  isBuilderMode: false,
+  isArrangeMode: false
+}))
+
+const outputHistoryState = vi.hoisted(() => ({
+  isWorkflowActive: false
+}))
+
+const spies = vi.hoisted(() => ({
+  cancelActiveWorkflowJobs: vi.fn(),
+  deleteAssets: vi.fn()
+}))
+
+vi.mock('@/composables/useAppMode', async () => {
+  const { computed } = await import('vue')
+  return {
+    useAppMode: () => ({
+      isBuilderMode: computed(() => appModeState.isBuilderMode),
+      isArrangeMode: computed(() => appModeState.isArrangeMode)
+    })
+  }
+})
+
+vi.mock('@/renderer/extensions/linearMode/useOutputHistory', async () => {
+  const { computed } = await import('vue')
+  return {
+    useOutputHistory: () => ({
+      allOutputs: () => [],
+      isWorkflowActive: computed(() => outputHistoryState.isWorkflowActive),
+      cancelActiveWorkflowJobs: spies.cancelActiveWorkflowJobs
+    })
+  }
+})
+
+vi.mock('@/platform/assets/composables/useMediaAssetActions', () => ({
+  useMediaAssetActions: () => ({ deleteAssets: spies.deleteAssets })
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: { rootGraph: { id: 'root' }, loadGraphData: vi.fn() }
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { download: 'Download' },
+      linearMode: {
+        rerun: 'Rerun',
+        reuseParameters: 'Reuse Parameters',
+        cancelThisRun: 'Cancel this run',
+        deleteAllAssets: 'Delete all',
+        downloadAll: 'Download all'
+      }
+    }
+  }
+})
+
+function renderPreview(
+  props: { mobile?: boolean } = {},
+  emitSelection?: OutputSelection
+) {
+  const user = userEvent.setup()
+  const outputHistoryStub = emitSelection
+    ? defineComponent({
+        emits: ['update-selection'],
+        mounted() {
+          this.$emit('update-selection', emitSelection)
+        },
+        template: '<div data-testid="output-history" />'
+      })
+    : {
+        template: '<div data-testid="output-history" />'
+      }
+  const result = render(LinearPreview, {
+    props,
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: {} },
+      stubs: {
+        ImagePreview: { template: '<div data-testid="image-preview" />' },
+        LatentPreview: { template: '<div data-testid="latent-preview" />' },
+        LinearWelcome: { template: '<div data-testid="linear-welcome" />' },
+        LinearArrange: { template: '<div data-testid="linear-arrange" />' },
+        MediaOutputPreview: true,
+        Popover: { template: '<div data-testid="output-popover" />' },
+        OutputHistory: outputHistoryStub
+      }
+    }
+  })
+  return { ...result, user }
+}
+
+describe('LinearPreview', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    appModeState.isBuilderMode = false
+    appModeState.isArrangeMode = false
+    outputHistoryState.isWorkflowActive = false
+  })
+
+  it('renders the welcome screen and output history when idle', () => {
+    renderPreview()
+
+    expect(screen.getByTestId('linear-welcome')).toBeInTheDocument()
+    expect(screen.getByTestId('output-history')).toBeInTheDocument()
+  })
+
+  it('hides the output history in builder mode', () => {
+    appModeState.isBuilderMode = true
+
+    renderPreview()
+
+    expect(screen.queryByTestId('output-history')).not.toBeInTheDocument()
+  })
+
+  it('shows the arrange view in arrange mode', () => {
+    appModeState.isArrangeMode = true
+
+    renderPreview()
+
+    expect(screen.getByTestId('linear-arrange')).toBeInTheDocument()
+    expect(screen.queryByTestId('linear-welcome')).not.toBeInTheDocument()
+  })
+
+  it('shows the latent preview and cancel control while a workflow is active', async () => {
+    outputHistoryState.isWorkflowActive = true
+
+    const { user } = renderPreview()
+
+    expect(screen.getByTestId('latent-preview')).toBeInTheDocument()
+
+    await user.click(screen.getByTestId('linear-cancel-run'))
+
+    expect(spies.cancelActiveWorkflowJobs).toHaveBeenCalled()
+  })
+
+  it('shows the selected asset actions and latent image when a selection is made', async () => {
+    const asset: AssetItem = { id: 'a1', name: 'out.png', tags: [] }
+    const selection: OutputSelection = {
+      asset,
+      canShowPreview: true,
+      latentPreviewUrl: 'blob:preview'
+    }
+
+    renderPreview({}, selection)
+
+    expect(await screen.findByTestId('linear-output-info')).toBeInTheDocument()
+    expect(screen.getByTestId('image-preview')).toBeInTheDocument()
+    expect(screen.getByTestId('output-popover')).toBeInTheDocument()
+    expect(screen.getByText('Rerun')).toBeInTheDocument()
+    expect(screen.getByText('Reuse Parameters')).toBeInTheDocument()
+  })
+})
diff --git a/src/renderer/extensions/linearMode/LinearPreview.vue b/src/renderer/extensions/linearMode/LinearPreview.vue
index 6950883fd5..7b1f19e0e2 100644
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -14,23 +14,22 @@ import ImagePreview from '@/renderer/extensions/linearMode/ImagePreview.vue'
 import LatentPreview from '@/renderer/extensions/linearMode/LatentPreview.vue'
 import LinearWelcome from '@/renderer/extensions/linearMode/LinearWelcome.vue'
 import LinearArrange from '@/renderer/extensions/linearMode/LinearArrange.vue'
-import LinearFeedback from '@/renderer/extensions/linearMode/LinearFeedback.vue'
 import MediaOutputPreview from '@/renderer/extensions/linearMode/MediaOutputPreview.vue'
 import OutputHistory from '@/renderer/extensions/linearMode/OutputHistory.vue'
 import { useOutputHistory } from '@/renderer/extensions/linearMode/useOutputHistory'
 import type { OutputSelection } from '@/renderer/extensions/linearMode/linearModeTypes'
 import { app } from '@/scripts/app'
 import type { ResultItemImpl } from '@/stores/queueStore'
+import { cn } from '@comfyorg/tailwind-utils'
 
 const { t } = useI18n()
 const mediaActions = useMediaAssetActions()
 const { isBuilderMode, isArrangeMode } = useAppMode()
 const { allOutputs, isWorkflowActive, cancelActiveWorkflowJobs } =
   useOutputHistory()
-const { runButtonClick, mobile, typeformWidgetId } = defineProps<{
+const { runButtonClick, mobile } = defineProps<{
   runButtonClick?: (e: Event) => void
   mobile?: boolean
-  typeformWidgetId?: string
 }>()
 
 const selectedItem = ref<AssetItem>()
@@ -147,28 +146,9 @@ async function rerun(e: Event) {
   <LatentPreview v-else-if="showSkeleton || isWorkflowActive" />
   <LinearArrange v-else-if="isArrangeMode" />
   <LinearWelcome v-else />
-  <div
-    v-if="!mobile"
-    class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center"
-  >
-    <LinearFeedback
-      v-if="typeformWidgetId"
-      side="left"
-      :widget-id="typeformWidgetId"
-    />
-    <OutputHistory
-      v-if="!isBuilderMode"
-      class="z-10 min-w-0"
-      @update-selection="handleSelection"
-    />
-    <LinearFeedback
-      v-if="typeformWidgetId"
-      side="right"
-      :widget-id="typeformWidgetId"
-    />
-  </div>
   <OutputHistory
-    v-else-if="!isBuilderMode"
+    v-if="!isBuilderMode"
+    :class="cn(!mobile && 'z-10 min-w-0')"
     @update-selection="handleSelection"
   />
 </template>
diff --git a/src/renderer/extensions/linearMode/MobileDisplay.vue b/src/renderer/extensions/linearMode/MobileDisplay.vue
index 2f5fce98ef..686da0a770 100644
--- a/src/renderer/extensions/linearMode/MobileDisplay.vue
+++ b/src/renderer/extensions/linearMode/MobileDisplay.vue
@@ -9,6 +9,7 @@ import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { APP_MODE_FEEDBACK_FORM_URL } from '@/platform/surveys/appModeFeedback'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -145,7 +146,12 @@ const menuEntries = computed<MenuItem[]>(() => [
     ...commandIdToMenuItem('Comfy.ShowSettingsDialog'),
     label: t('menu.settings')
   },
-  { ...commandIdToMenuItem('Comfy.ToggleHelpCenter'), label: t('menu.help') },
+  {
+    label: t('linearMode.giveFeedback'),
+    icon: 'icon-[lucide--clipboard-pen]',
+    command: () =>
+      window.open(APP_MODE_FEEDBACK_FORM_URL, '_blank', 'noopener,noreferrer')
+  },
   {
     label: t('menu.fullscreen'),
     icon: 'icon-[lucide--fullscreen]',
diff --git a/src/renderer/extensions/minimap/composables/useMinimap.test.ts b/src/renderer/extensions/minimap/composables/useMinimap.test.ts
index 5d15bccc2e..c90efec090 100644
--- a/src/renderer/extensions/minimap/composables/useMinimap.test.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimap.test.ts
@@ -24,6 +24,10 @@ interface MockGraph {
   onNodeAdded: ((node: MockNode) => void) | null
   onNodeRemoved: ((node: MockNode) => void) | null
   onConnectionChange: ((node: MockNode) => void) | null
+  events: {
+    addEventListener: Mock
+    removeEventListener: Mock
+  }
 }
 
 interface MockCanvas {
@@ -128,7 +132,11 @@ const setupMocks = () => {
     setDirtyCanvas: vi.fn(),
     onNodeAdded: null,
     onNodeRemoved: null,
-    onConnectionChange: null
+    onConnectionChange: null,
+    events: {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    }
   }
 
   moduleMockCanvas = {
@@ -292,7 +300,11 @@ describe('useMinimap', () => {
       setDirtyCanvas: vi.fn(),
       onNodeAdded: null,
       onNodeRemoved: null,
-      onConnectionChange: null
+      onConnectionChange: null,
+      events: {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn()
+      }
     }
 
     moduleMockCanvas = {
diff --git a/src/renderer/extensions/minimap/composables/useMinimapGraph.test.ts b/src/renderer/extensions/minimap/composables/useMinimapGraph.test.ts
index 88717cb264..daa112cbcd 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapGraph.test.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapGraph.test.ts
@@ -3,6 +3,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 
+import { CustomEventTarget } from '@/lib/litegraph/src/infrastructure/CustomEventTarget'
+import type { LGraphEventMap } from '@/lib/litegraph/src/infrastructure/LGraphEventMap'
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { toLinkId } from '@/types/linkId'
 import { useMinimapGraph } from '@/renderer/extensions/minimap/composables/useMinimapGraph'
@@ -45,6 +47,7 @@ describe('useMinimapGraph', () => {
         createMockLGraphNode({ id: '2', pos: [300, 200], size: [120, 60] })
       ],
       links: createMockLinks([createMockLLink({ id: toLinkId(1) })]),
+      events: new CustomEventTarget<LGraphEventMap>(),
       onNodeAdded: vi.fn(),
       onNodeRemoved: vi.fn(),
       onConnectionChange: vi.fn()
@@ -108,13 +111,6 @@ describe('useMinimapGraph', () => {
     const graphRef = ref(mockGraph) as Ref<LGraph | null>
     const graphManager = useMinimapGraph(graphRef, onGraphChangedMock)
 
-    // Store original callbacks for comparison
-    // const originalCallbacks = {
-    //   onNodeAdded: mockGraph.onNodeAdded,
-    //   onNodeRemoved: mockGraph.onNodeRemoved,
-    //   onConnectionChange: mockGraph.onConnectionChange
-    // }
-
     graphManager.setupEventListeners()
     const wrappedCallbacks = {
       onNodeAdded: mockGraph.onNodeAdded,
@@ -160,6 +156,96 @@ describe('useMinimapGraph', () => {
     expect(() => graphManager.cleanupEventListeners()).not.toThrow()
   })
 
+  it('cleanup leaves a later wrapper alone when one is layered on top', () => {
+    const graphRef = ref(mockGraph) as Ref<LGraph | null>
+    const graphManager = useMinimapGraph(graphRef, onGraphChangedMock)
+
+    graphManager.setupEventListeners()
+    const minimapWrapper = mockGraph.onNodeAdded
+
+    // Simulate another system adding its own wrapper on top
+    const downstream = vi.fn()
+    const layeredWrapper = vi.fn(function (this: unknown, node: LGraphNode) {
+      minimapWrapper?.call(this, node)
+      downstream(node)
+    })
+    mockGraph.onNodeAdded = layeredWrapper
+
+    graphManager.cleanupEventListeners()
+
+    // The newer wrapper must survive cleanup
+    expect(mockGraph.onNodeAdded).toBe(layeredWrapper)
+  })
+
+  it('a buried wrapper becomes inert after cleanup', () => {
+    const originalOnNodeAdded = vi.fn()
+    mockGraph.onNodeAdded = originalOnNodeAdded
+
+    const graphRef = ref(mockGraph) as Ref<LGraph | null>
+    const graphManager = useMinimapGraph(graphRef, onGraphChangedMock)
+
+    graphManager.setupEventListeners()
+    const buriedWrapper = mockGraph.onNodeAdded
+
+    // Layer something on top so cleanup can't restore.
+    mockGraph.onNodeAdded = vi.fn()
+    graphManager.cleanupEventListeners()
+    vi.mocked(onGraphChangedMock).mockClear()
+
+    // Call the method directly and ensure it is a no-op
+    const testNode = { id: '9' } as LGraphNode
+    buriedWrapper!(testNode)
+
+    expect(originalOnNodeAdded).toHaveBeenCalledWith(testNode)
+    expect(onGraphChangedMock).not.toHaveBeenCalled()
+  })
+
+  it('invalidates cache and fires update on visual property changes', () => {
+    const graphRef = ref(mockGraph) as Ref<LGraph | null>
+    const graphManager = useMinimapGraph(graphRef, onGraphChangedMock)
+    graphManager.setupEventListeners()
+
+    mockGraph.events.dispatch('node:property:changed', {
+      nodeId: '1',
+      property: 'color',
+      oldValue: '',
+      newValue: '#fff'
+    })
+
+    expect(onGraphChangedMock).toHaveBeenCalled()
+  })
+
+  it('ignores unrelated property changes', () => {
+    const graphRef = ref(mockGraph) as Ref<LGraph | null>
+    const graphManager = useMinimapGraph(graphRef, onGraphChangedMock)
+    graphManager.setupEventListeners()
+
+    mockGraph.events.dispatch('node:property:changed', {
+      nodeId: '1',
+      property: 'title',
+      oldValue: 'a',
+      newValue: 'b'
+    })
+
+    expect(onGraphChangedMock).not.toHaveBeenCalled()
+  })
+
+  it('detaches the property listener on cleanup', () => {
+    const graphRef = ref(mockGraph) as Ref<LGraph | null>
+    const graphManager = useMinimapGraph(graphRef, onGraphChangedMock)
+    graphManager.setupEventListeners()
+    graphManager.cleanupEventListeners()
+
+    mockGraph.events.dispatch('node:property:changed', {
+      nodeId: '1',
+      property: 'mode',
+      oldValue: 0,
+      newValue: 1
+    })
+
+    expect(onGraphChangedMock).not.toHaveBeenCalled()
+  })
+
   it('should detect node position changes', () => {
     const graphRef = ref(mockGraph) as Ref<LGraph | null>
     const graphManager = useMinimapGraph(graphRef, onGraphChangedMock)
diff --git a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
index bdd3cfb450..e621ff9ee0 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
@@ -2,11 +2,9 @@ import { useThrottleFn } from '@vueuse/core'
 import { ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
-import type {
-  LGraph,
-  LGraphNode,
-  LGraphTriggerEvent
-} from '@/lib/litegraph/src/litegraph'
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+import type { LGraphEventMap } from '@/lib/litegraph/src/infrastructure/LGraphEventMap'
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { api } from '@/scripts/api'
 import { toNodeId } from '@/types/nodeId'
@@ -19,7 +17,6 @@ interface GraphCallbacks {
   onNodeAdded?: (node: LGraphNode) => void
   onNodeRemoved?: (node: LGraphNode) => void
   onConnectionChange?: (node: LGraphNode) => void
-  onTrigger?: (event: LGraphTriggerEvent) => void
 }
 
 export function useMinimapGraph(
@@ -39,8 +36,17 @@ export function useMinimapGraph(
   // Track LayoutStore version for change detection
   const layoutStoreVersion = layoutStore.getVersion()
 
-  // Map to store original callbacks per graph ID
-  const originalCallbacksMap = new Map<string, GraphCallbacks>()
+  // Cleanup restores originals only when our wrapper is still on top, and
+  // marks any buried wrapper inert via `entry.live` so it can't fire dead work.
+  interface InstalledHooks {
+    originals: GraphCallbacks
+    wrappers: GraphCallbacks
+    live: boolean
+    onPropertyChanged: (
+      e: CustomEvent<LGraphEventMap['node:property:changed']>
+    ) => void
+  }
+  const hooksMap = new Map<string, InstalledHooks>()
 
   const handleGraphChangedThrottled = useThrottleFn(() => {
     onGraphChanged()
@@ -48,71 +54,85 @@ export function useMinimapGraph(
 
   const setupEventListeners = () => {
     const g = graph.value
-    if (!g) return
+    if (!g || hooksMap.has(g.id)) return
 
-    // Check if we've already wrapped this graph's callbacks
-    if (originalCallbacksMap.has(g.id)) {
-      return
-    }
-
-    // Store the original callbacks for this graph
-    const originalCallbacks: GraphCallbacks = {
+    const originals: GraphCallbacks = {
       onNodeAdded: g.onNodeAdded,
       onNodeRemoved: g.onNodeRemoved,
-      onConnectionChange: g.onConnectionChange,
-      onTrigger: g.onTrigger
+      onConnectionChange: g.onConnectionChange
     }
-    originalCallbacksMap.set(g.id, originalCallbacks)
+    const wrappers: GraphCallbacks = {}
 
-    g.onNodeAdded = function (node: LGraphNode) {
-      originalCallbacks.onNodeAdded?.call(this, node)
-      void handleGraphChangedThrottled()
-    }
-
-    g.onNodeRemoved = function (node: LGraphNode) {
-      originalCallbacks.onNodeRemoved?.call(this, node)
-      nodeStatesCache.delete(node.id)
-      void handleGraphChangedThrottled()
-    }
-
-    g.onConnectionChange = function (node: LGraphNode) {
-      originalCallbacks.onConnectionChange?.call(this, node)
-      void handleGraphChangedThrottled()
-    }
-
-    g.onTrigger = function (event: LGraphTriggerEvent) {
-      originalCallbacks.onTrigger?.call(this, event)
-
-      // Listen for visual property changes that affect minimap rendering
+    const onPropertyChanged = (
+      e: CustomEvent<LGraphEventMap['node:property:changed']>
+    ) => {
+      const { property, nodeId } = e.detail
       if (
-        event.type === 'node:property:changed' &&
-        (event.property === 'mode' ||
-          event.property === 'bgcolor' ||
-          event.property === 'color')
+        property === 'mode' ||
+        property === 'bgcolor' ||
+        property === 'color'
       ) {
-        // Invalidate cache for this node to force redraw
-        nodeStatesCache.delete(toNodeId(event.nodeId))
+        nodeStatesCache.delete(toNodeId(nodeId))
         void handleGraphChangedThrottled()
       }
     }
+
+    const entry: InstalledHooks = {
+      originals,
+      wrappers,
+      live: true,
+      onPropertyChanged
+    }
+    hooksMap.set(g.id, entry)
+
+    wrappers.onNodeAdded = useChainCallback(originals.onNodeAdded, function () {
+      if (!entry.live) return
+      void handleGraphChangedThrottled()
+    })
+    g.onNodeAdded = wrappers.onNodeAdded
+
+    wrappers.onNodeRemoved = useChainCallback(
+      originals.onNodeRemoved,
+      function (node: LGraphNode) {
+        if (!entry.live) return
+        nodeStatesCache.delete(node.id)
+        void handleGraphChangedThrottled()
+      }
+    )
+    g.onNodeRemoved = wrappers.onNodeRemoved
+
+    wrappers.onConnectionChange = useChainCallback(
+      originals.onConnectionChange,
+      function () {
+        if (!entry.live) return
+        void handleGraphChangedThrottled()
+      }
+    )
+    g.onConnectionChange = wrappers.onConnectionChange
+
+    g.events.addEventListener('node:property:changed', onPropertyChanged)
   }
 
   const cleanupEventListeners = (oldGraph?: LGraph) => {
     const g = oldGraph || graph.value
     if (!g) return
+    const entry = hooksMap.get(g.id)
+    if (!entry) return
+    const { originals, wrappers } = entry
 
-    const originalCallbacks = originalCallbacksMap.get(g.id)
-    if (!originalCallbacks) {
-      // Graph was never set up (e.g., minimap destroyed before init) - nothing to clean up
-      return
-    }
+    if (g.onNodeAdded === wrappers.onNodeAdded)
+      g.onNodeAdded = originals.onNodeAdded
+    if (g.onNodeRemoved === wrappers.onNodeRemoved)
+      g.onNodeRemoved = originals.onNodeRemoved
+    if (g.onConnectionChange === wrappers.onConnectionChange)
+      g.onConnectionChange = originals.onConnectionChange
+    g.events.removeEventListener(
+      'node:property:changed',
+      entry.onPropertyChanged
+    )
 
-    g.onNodeAdded = originalCallbacks.onNodeAdded
-    g.onNodeRemoved = originalCallbacks.onNodeRemoved
-    g.onConnectionChange = originalCallbacks.onConnectionChange
-    g.onTrigger = originalCallbacks.onTrigger
-
-    originalCallbacksMap.delete(g.id)
+    entry.live = false
+    hooksMap.delete(g.id)
   }
 
   const checkForChangesInternal = () => {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.test.ts
index 38caf3bc58..0a9aa8362f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.test.ts
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -135,6 +135,25 @@ describe('FormDropdownInput', () => {
   })
 
   describe('Exposed showPicker', () => {
+    const overriddenMethods = ['showPicker', 'click'] as const
+    const originalDescriptors = overriddenMethods.map(
+      (name) =>
+        [
+          name,
+          Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, name)
+        ] as const
+    )
+
+    afterEach(() => {
+      for (const [name, descriptor] of originalDescriptors) {
+        if (descriptor) {
+          Object.defineProperty(HTMLInputElement.prototype, name, descriptor)
+        } else {
+          Reflect.deleteProperty(HTMLInputElement.prototype, name)
+        }
+      }
+    })
+
     /** Mount a harness that captures the FormDropdownInput instance so we can
      *  invoke its exposed methods, mirroring how FormDropdown drives it. */
     async function mountWithRef(props: Partial<FormDropdownInputProps> = {}) {
@@ -172,9 +191,12 @@ describe('FormDropdownInput', () => {
     })
 
     it('falls back to click() when showPicker is unavailable', async () => {
-      // Simulate older browsers
-      // @ts-expect-error -- intentional removal for fallback path
-      delete HTMLInputElement.prototype.showPicker
+      // Simulate older browsers that predate showPicker
+      Object.defineProperty(HTMLInputElement.prototype, 'showPicker', {
+        value: undefined,
+        configurable: true,
+        writable: true
+      })
       const clickSpy = vi.fn()
       Object.defineProperty(HTMLInputElement.prototype, 'click', {
         value: clickSpy,
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts
index 7112931aae..627bae20b8 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.test.ts
@@ -135,25 +135,22 @@ describe('FormDropdownMenu', () => {
   })
 
   /** Regression: PrimeVue Popover teleports the menu to document.body, so
-   *  trackpad pinch-zoom and horizontal swipes must be guarded on the menu
-   *  itself rather than relying on the LGraphNode wheel handler. */
+   *  trackpad pinch-zoom must be guarded on the menu itself — `LGraphNode`
+   *  never sees these events. macOS pinch synthesizes `ctrlKey`; explicit
+   *  `⌘ + wheel` (and Windows/Linux equivalents) come through as `metaKey`. */
   it.for([
-    { name: 'pinch-zoom', overrides: { ctrlKey: true, deltaY: -10 } },
-    { name: 'horizontal swipe', overrides: { deltaX: 30, deltaY: 5 } }
-  ])('suppresses browser default for $name', ({ overrides }) => {
+    { name: 'ctrlKey', modifier: 'ctrlKey' as const },
+    { name: 'metaKey', modifier: 'metaKey' as const }
+  ])('suppresses browser default for pinch-zoom ($name)', ({ modifier }) => {
     render(FormDropdownMenu, {
       props: defaultProps,
       global: globalConfig
     })
 
     const root = screen.getByTestId('form-dropdown-menu')
-    const event = new WheelEvent('wheel', {
-      bubbles: true,
-      cancelable: true
-    })
-    Object.entries(overrides).forEach(([key, value]) => {
-      Object.defineProperty(event, key, { value })
-    })
+    const event = new WheelEvent('wheel', { bubbles: true, cancelable: true })
+    Object.defineProperty(event, modifier, { value: true })
+    Object.defineProperty(event, 'deltaY', { value: -10 })
     root.dispatchEvent(event)
 
     expect(event.defaultPrevented).toBe(true)
@@ -211,19 +208,33 @@ describe('FormDropdownMenu', () => {
     expect(emitted('show-picker')).toHaveLength(1)
   })
 
-  /** Vertical scrolling must remain native so the dropdown's own scroll
-   *  container can scroll its content. */
-  it('does not suppress vertical scroll', () => {
+  /** Regression: slow trackpad vertical scrolls emit small-delta frames with
+   *  stray horizontal jitter (`|deltaX| > |deltaY|`). preventDefault-ing those
+   *  cancelled the native scroll and starved the VirtualGrid's `useScroll`,
+   *  leaving rows blank. Horizontal-swipe-to-navigate is blocked at the page
+   *  boundary by `overscroll-behavior: none` on `html, body`, so the local
+   *  handler must NOT preventDefault these events. The `pure vertical` case
+   *  also covers plain native scrolling of the dropdown's own content. */
+  it.for([
+    { name: 'pure vertical', overrides: { deltaY: 30 } },
+    {
+      name: 'slow scroll with horizontal jitter',
+      overrides: { deltaX: 1.5, deltaY: 1.2 }
+    },
+    {
+      name: 'pronounced horizontal swipe',
+      overrides: { deltaX: 30, deltaY: 5 }
+    }
+  ])('does not suppress $name wheel', ({ overrides }) => {
     render(FormDropdownMenu, {
       props: defaultProps,
       global: globalConfig
     })
 
     const root = screen.getByTestId('form-dropdown-menu')
-    const event = new WheelEvent('wheel', {
-      deltaY: 30,
-      bubbles: true,
-      cancelable: true
+    const event = new WheelEvent('wheel', { bubbles: true, cancelable: true })
+    Object.entries(overrides).forEach(([key, value]) => {
+      Object.defineProperty(event, key, { value })
     })
     root.dispatchEvent(event)
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
index c44f05fbc5..c85c579131 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -3,7 +3,6 @@ import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import { isCanvasGestureWheel } from '@/base/wheelGestures'
 
 import type {
   FilterOption,
@@ -109,12 +108,17 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
 /**
  * The dropdown content is teleported to `document.body` by PrimeVue Popover,
  * detaching it from the LGraphNode subtree where the canvas wheel guard lives.
- * Suppress only the destructive browser defaults (page zoom on pinch and
- * back/forward on horizontal swipe); regular vertical scrolling still
- * scrolls the dropdown's own content.
+ * Pinch-zoom (`ctrl/meta + wheel`) would otherwise trigger page-level zoom and
+ * push fixed UI off-screen, so it must be suppressed locally. Horizontal
+ * swipe-to-navigate is already blocked at the page boundary by
+ * `overscroll-behavior: none` on `html, body`, so we deliberately do NOT
+ * preventDefault on horizontal-dominant wheels here — doing so cancels the
+ * trackpad's native momentum on slow vertical scrolls (where stray horizontal
+ * jitter frames satisfy `|deltaX| > |deltaY|`), starving the VirtualGrid's
+ * `useScroll` and leaving rows blank until a fast scroll re-pumps samples.
  */
 const onWheel = (event: WheelEvent) => {
-  if (isCanvasGestureWheel(event)) event.preventDefault()
+  if (event.ctrlKey || event.metaKey) event.preventDefault()
 }
 </script>
 
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxesWidget.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxesWidget.test.ts
index bc17c995fc..1c0d328862 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxesWidget.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxesWidget.test.ts
@@ -5,7 +5,7 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 import { useBoundingBoxesWidget } from './useBoundingBoxesWidget'
 
-const widgetOptions = { serialize: true, canvasOnly: false }
+const widgetOptions = { serialize: true, canvasOnly: false, hideInPanel: true }
 
 function mockNode() {
   return { addWidget: vi.fn(() => ({})) } as unknown as LGraphNode & {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxesWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxesWidget.ts
index 1df02b30d7..5d74918d7b 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxesWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxesWidget.ts
@@ -17,7 +17,8 @@ export const useBoundingBoxesWidget = (): ComfyWidgetConstructorV2 => {
       })) ?? []
     return node.addWidget('boundingboxes', spec.name, defaultValue, null, {
       serialize: true,
-      canvasOnly: false
+      canvasOnly: false,
+      hideInPanel: true
     }) as IBaseWidget
   }
 }
diff --git a/src/renderer/three/RendererView.test.ts b/src/renderer/three/RendererView.test.ts
new file mode 100644
index 0000000000..35cda4e934
--- /dev/null
+++ b/src/renderer/three/RendererView.test.ts
@@ -0,0 +1,126 @@
+import * as THREE from 'three'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { RendererView } from './RendererView'
+
+vi.mock('three', async (importOriginal) => {
+  const actual = await importOriginal<typeof THREE>()
+  class WebGLRenderer {
+    domElement = document.createElement('canvas')
+    autoClear = true
+    outputColorSpace = ''
+    toneMapping = 0
+    toneMappingExposure = 1
+    setSize(width: number, height: number) {
+      this.domElement.width = width
+      this.domElement.height = height
+    }
+    getSize(target: { set(x: number, y: number): unknown }) {
+      target.set(this.domElement.width, this.domElement.height)
+      return target
+    }
+    setPixelRatio() {}
+    setClearColor = vi.fn()
+    forceContextLoss = vi.fn()
+    dispose = vi.fn()
+  }
+  return { ...actual, WebGLRenderer }
+})
+
+const drawImage = vi.fn()
+
+beforeEach(() => {
+  drawImage.mockClear()
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+    drawImage,
+    globalCompositeOperation: 'source-over'
+  } as unknown as ReturnType<HTMLCanvasElement['getContext']>)
+})
+
+describe('RendererView', () => {
+  it('appends its own canvas to the container', () => {
+    const container = document.createElement('div')
+
+    const view = new RendererView(container)
+
+    expect(view.canvas.parentElement).toBe(container)
+    view.dispose()
+    expect(view.canvas.parentElement).toBeNull()
+  })
+
+  it('setSize resizes the view canvas and grows the shared buffer to fit', () => {
+    const container = document.createElement('div')
+    const view = new RendererView(container)
+
+    view.setSize(640.4, 480.6)
+
+    expect(view.width).toBe(640)
+    expect(view.height).toBe(481)
+    expect(view.canvas.width).toBe(640)
+    expect(view.canvas.height).toBe(481)
+    expect(view.renderer.domElement.width).toBeGreaterThanOrEqual(640)
+    expect(view.renderer.domElement.height).toBeGreaterThanOrEqual(481)
+
+    view.dispose()
+  })
+
+  it('setSize clamps degenerate sizes to 1 pixel', () => {
+    const container = document.createElement('div')
+    const view = new RendererView(container)
+
+    view.setSize(0, -5)
+
+    expect(view.width).toBe(1)
+    expect(view.height).toBe(1)
+
+    view.dispose()
+  })
+
+  it('beginRender applies the view state and regrows a shrunken shared buffer', () => {
+    const container = document.createElement('div')
+    const view = new RendererView(container)
+    view.setSize(400, 300)
+    view.state.toneMapping = THREE.ACESFilmicToneMapping
+    view.state.toneMappingExposure = 0.5
+    view.state.outputColorSpace = THREE.LinearSRGBColorSpace
+    view.state.clearAlpha = 0.25
+    view.renderer.setSize(50, 40)
+
+    view.beginRender()
+
+    expect(view.renderer.domElement.width).toBeGreaterThanOrEqual(400)
+    expect(view.renderer.domElement.height).toBeGreaterThanOrEqual(300)
+    expect(view.renderer.toneMapping).toBe(THREE.ACESFilmicToneMapping)
+    expect(view.renderer.toneMappingExposure).toBe(0.5)
+    expect(view.renderer.outputColorSpace).toBe(THREE.LinearSRGBColorSpace)
+    expect(view.renderer.setClearColor).toHaveBeenCalledWith(
+      view.state.clearColor,
+      0.25
+    )
+
+    view.dispose()
+  })
+
+  it('blit copies the bottom-left region of the shared buffer into the view canvas', () => {
+    const container = document.createElement('div')
+    const view = new RendererView(container)
+    view.renderer.setSize(1000, 800)
+    view.setSize(400, 300)
+
+    view.blit()
+
+    expect(drawImage).toHaveBeenCalledWith(
+      view.renderer.domElement,
+      0,
+      500,
+      400,
+      300,
+      0,
+      0,
+      400,
+      300
+    )
+
+    view.dispose()
+  })
+})
diff --git a/src/renderer/three/RendererView.ts b/src/renderer/three/RendererView.ts
new file mode 100644
index 0000000000..5c3ebc9833
--- /dev/null
+++ b/src/renderer/three/RendererView.ts
@@ -0,0 +1,88 @@
+import type * as THREE from 'three'
+
+import type {
+  RendererViewState,
+  SharedRendererHandle
+} from './sharedWebGLRenderer'
+import {
+  acquireSharedRenderer,
+  applyRendererViewState,
+  createRendererViewState,
+  ensureRendererSize
+} from './sharedWebGLRenderer'
+
+export class RendererView {
+  readonly renderer: THREE.WebGLRenderer
+  readonly canvas: HTMLCanvasElement
+  readonly state: RendererViewState = createRendererViewState()
+
+  width = 1
+  height = 1
+
+  private readonly context: CanvasRenderingContext2D
+  private readonly handle: SharedRendererHandle
+  private resizeObserver: ResizeObserver | null = null
+
+  constructor(container: HTMLElement) {
+    this.canvas = document.createElement('canvas')
+    this.canvas.classList.add(
+      'absolute',
+      'inset-0',
+      'h-full',
+      'w-full',
+      'outline-none'
+    )
+    const context = this.canvas.getContext('2d')
+    if (!context) {
+      throw new Error('Failed to create 2D context for 3D view')
+    }
+    this.context = context
+
+    this.handle = acquireSharedRenderer()
+    this.renderer = this.handle.renderer
+    container.appendChild(this.canvas)
+  }
+
+  setSize(width: number, height: number): void {
+    this.width = Math.max(1, Math.round(width))
+    this.height = Math.max(1, Math.round(height))
+    if (this.canvas.width !== this.width) this.canvas.width = this.width
+    if (this.canvas.height !== this.height) this.canvas.height = this.height
+    ensureRendererSize(this.renderer, this.width, this.height)
+  }
+
+  beginRender(): void {
+    ensureRendererSize(this.renderer, this.width, this.height)
+    applyRendererViewState(this.renderer, this.state)
+  }
+
+  blit(): void {
+    const source = this.renderer.domElement
+    this.context.globalCompositeOperation = 'copy'
+    this.context.drawImage(
+      source,
+      0,
+      source.height - this.height,
+      this.width,
+      this.height,
+      0,
+      0,
+      this.width,
+      this.height
+    )
+  }
+
+  observeResize(target: Element, onResize: () => void): void {
+    if (typeof ResizeObserver === 'undefined') return
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = new ResizeObserver(() => onResize())
+    this.resizeObserver.observe(target)
+  }
+
+  dispose(): void {
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = null
+    this.canvas.remove()
+    this.handle.release()
+  }
+}
diff --git a/src/renderer/three/sharedWebGLRenderer.test.ts b/src/renderer/three/sharedWebGLRenderer.test.ts
new file mode 100644
index 0000000000..af7235265c
--- /dev/null
+++ b/src/renderer/three/sharedWebGLRenderer.test.ts
@@ -0,0 +1,140 @@
+import * as THREE from 'three'
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  acquireSharedRenderer,
+  applyRendererViewState,
+  createRendererViewState,
+  ensureRendererSize
+} from './sharedWebGLRenderer'
+
+const { rendererCtor, forceContextLoss, dispose } = vi.hoisted(() => ({
+  rendererCtor: vi.fn(),
+  forceContextLoss: vi.fn(),
+  dispose: vi.fn()
+}))
+
+vi.mock('three', async (importOriginal) => {
+  const actual = await importOriginal<typeof THREE>()
+  class WebGLRenderer {
+    domElement = document.createElement('canvas')
+    autoClear = true
+    outputColorSpace = ''
+    toneMapping = 0
+    toneMappingExposure = 1
+    width = 0
+    height = 0
+    constructor(opts: unknown) {
+      rendererCtor(opts)
+    }
+    setSize(width: number, height: number) {
+      this.width = width
+      this.height = height
+    }
+    getSize(target: THREE.Vector2) {
+      target.set(this.width, this.height)
+      return target
+    }
+    setPixelRatio() {}
+    setClearColor = vi.fn()
+    forceContextLoss = forceContextLoss
+    dispose = dispose
+  }
+  return { ...actual, WebGLRenderer }
+})
+
+describe('acquireSharedRenderer', () => {
+  it('returns the same renderer for concurrent views and disposes after the last release', () => {
+    rendererCtor.mockClear()
+    forceContextLoss.mockClear()
+    dispose.mockClear()
+
+    const first = acquireSharedRenderer()
+    const second = acquireSharedRenderer()
+
+    expect(second.renderer).toBe(first.renderer)
+    expect(rendererCtor).toHaveBeenCalledTimes(1)
+
+    first.release()
+    expect(dispose).not.toHaveBeenCalled()
+
+    const disposedWhenContextLostFired: boolean[] = []
+    second.renderer.domElement.addEventListener('webglcontextlost', () => {
+      disposedWhenContextLostFired.push(dispose.mock.calls.length > 0)
+    })
+
+    second.release()
+    expect(forceContextLoss).toHaveBeenCalledTimes(1)
+    expect(dispose).toHaveBeenCalledTimes(1)
+    expect(disposedWhenContextLostFired).toEqual([false])
+  })
+
+  it('creates a fresh renderer after the previous one was torn down', () => {
+    rendererCtor.mockClear()
+
+    const first = acquireSharedRenderer()
+    first.release()
+
+    const second = acquireSharedRenderer()
+
+    expect(rendererCtor).toHaveBeenCalledTimes(2)
+    expect(second.renderer).not.toBe(first.renderer)
+    second.release()
+  })
+
+  it('ignores double release from the same handle', () => {
+    dispose.mockClear()
+
+    const first = acquireSharedRenderer()
+    const second = acquireSharedRenderer()
+
+    first.release()
+    first.release()
+
+    expect(dispose).not.toHaveBeenCalled()
+    second.release()
+    expect(dispose).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('ensureRendererSize', () => {
+  it('grows the drawing buffer per-axis but never shrinks it', () => {
+    const handle = acquireSharedRenderer()
+    const renderer = handle.renderer
+    renderer.setSize(300, 300)
+
+    ensureRendererSize(renderer, 500, 200)
+    expect(renderer.getSize(new THREE.Vector2())).toEqual(
+      new THREE.Vector2(500, 300)
+    )
+
+    ensureRendererSize(renderer, 400, 250)
+    expect(renderer.getSize(new THREE.Vector2())).toEqual(
+      new THREE.Vector2(500, 300)
+    )
+
+    handle.release()
+  })
+})
+
+describe('applyRendererViewState', () => {
+  it('writes the per-view state onto the renderer', () => {
+    const handle = acquireSharedRenderer()
+    const renderer = handle.renderer
+    const state = createRendererViewState()
+    state.toneMapping = THREE.ACESFilmicToneMapping
+    state.toneMappingExposure = 0.5
+    state.outputColorSpace = THREE.LinearSRGBColorSpace
+    state.clearColor.set(0x123456)
+    state.clearAlpha = 0.25
+
+    applyRendererViewState(renderer, state)
+
+    expect(renderer.toneMapping).toBe(THREE.ACESFilmicToneMapping)
+    expect(renderer.toneMappingExposure).toBe(0.5)
+    expect(renderer.outputColorSpace).toBe(THREE.LinearSRGBColorSpace)
+    expect(renderer.setClearColor).toHaveBeenCalledWith(state.clearColor, 0.25)
+
+    handle.release()
+  })
+})
diff --git a/src/renderer/three/sharedWebGLRenderer.ts b/src/renderer/three/sharedWebGLRenderer.ts
new file mode 100644
index 0000000000..e39b8c4727
--- /dev/null
+++ b/src/renderer/three/sharedWebGLRenderer.ts
@@ -0,0 +1,78 @@
+import * as THREE from 'three'
+
+export type RendererViewState = {
+  toneMapping: THREE.ToneMapping
+  toneMappingExposure: number
+  outputColorSpace: THREE.ColorSpace
+  clearColor: THREE.Color
+  clearAlpha: number
+}
+
+export function createRendererViewState(): RendererViewState {
+  return {
+    toneMapping: THREE.NoToneMapping,
+    toneMappingExposure: 1.0,
+    outputColorSpace: THREE.SRGBColorSpace,
+    clearColor: new THREE.Color(0x000000),
+    clearAlpha: 0
+  }
+}
+
+export function applyRendererViewState(
+  renderer: THREE.WebGLRenderer,
+  state: RendererViewState
+): void {
+  renderer.toneMapping = state.toneMapping
+  renderer.toneMappingExposure = state.toneMappingExposure
+  renderer.outputColorSpace = state.outputColorSpace
+  renderer.setClearColor(state.clearColor, state.clearAlpha)
+}
+
+export type SharedRendererHandle = {
+  renderer: THREE.WebGLRenderer
+  release: () => void
+}
+
+let sharedRenderer: THREE.WebGLRenderer | null = null
+let viewCount = 0
+
+function createSharedRenderer(): THREE.WebGLRenderer {
+  const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
+  renderer.setPixelRatio(1)
+  renderer.setSize(300, 300)
+  renderer.autoClear = false
+  renderer.outputColorSpace = THREE.SRGBColorSpace
+  return renderer
+}
+
+export function acquireSharedRenderer(): SharedRendererHandle {
+  sharedRenderer ??= createSharedRenderer()
+  viewCount++
+  const renderer = sharedRenderer
+  let released = false
+  return {
+    renderer,
+    release() {
+      if (released) return
+      released = true
+      viewCount--
+      if (viewCount > 0 || sharedRenderer !== renderer) return
+      sharedRenderer = null
+      renderer.forceContextLoss()
+      renderer.domElement.dispatchEvent(
+        new Event('webglcontextlost', { bubbles: true, cancelable: true })
+      )
+      renderer.dispose()
+    }
+  }
+}
+
+export function ensureRendererSize(
+  renderer: THREE.WebGLRenderer,
+  width: number,
+  height: number
+): void {
+  const size = renderer.getSize(new THREE.Vector2())
+  if (size.width >= width && size.height >= height) return
+  renderer.setSize(Math.max(size.width, width), Math.max(size.height, height))
+}
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index e07248ab0e..c75fc3aca2 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -19,10 +19,8 @@ import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ShareableAssetsResponse } from '@/schemas/apiSchema'
 import { zShareableAssetsResponse } from '@/schemas/apiSchema'
-import type { IFuseOptions } from 'fuse.js'
 import type {
   TemplateIncludeOnDistributionEnum,
-  TemplateInfo,
   WorkflowTemplates
 } from '@/platform/workflow/templates/types/template'
 import type {
@@ -1545,24 +1543,6 @@ export class ComfyApi extends EventTarget {
   getServerFeatures(): Record<string, unknown> {
     return { ...this.serverFeatureFlags.value }
   }
-
-  async getFuseOptions(): Promise<IFuseOptions<TemplateInfo> | null> {
-    try {
-      const res = await axios.get(
-        this.fileURL('/templates/fuse_options.json'),
-        {
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        }
-      )
-      const contentType = String(res.headers['content-type'] ?? '')
-      return contentType.includes('application/json') ? res.data : null
-    } catch (error) {
-      console.error('Error loading fuse options:', error)
-      return null
-    }
-  }
 }
 
 export const api = new ComfyApi()
diff --git a/src/stores/appModeStore.test.ts b/src/stores/appModeStore.test.ts
index bbc8d4c6c0..3ad8afdfa2 100644
--- a/src/stores/appModeStore.test.ts
+++ b/src/stores/appModeStore.test.ts
@@ -821,6 +821,74 @@ describe('appModeStore', () => {
     })
   })
 
+  describe('displayViewMode', () => {
+    const rafQueue = new Map<number, FrameRequestCallback>()
+    let nextHandle: number
+
+    const advanceFrame = () => {
+      const callbacks = [...rafQueue.values()]
+      rafQueue.clear()
+      for (const cb of callbacks) cb(0)
+    }
+
+    beforeEach(() => {
+      rafQueue.clear()
+      nextHandle = 0
+      vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+        const handle = ++nextHandle
+        rafQueue.set(handle, cb)
+        return handle
+      })
+      vi.stubGlobal('cancelAnimationFrame', (handle: number) => {
+        rafQueue.delete(handle)
+      })
+    })
+
+    afterEach(() => {
+      vi.unstubAllGlobals()
+    })
+
+    it('lags the view mode by two frames so the toggle can animate the switch', async () => {
+      workflowStore.activeWorkflow = createBuilderWorkflow('graph')
+      await nextTick()
+      expect(store.displayViewMode).toBe('graph')
+
+      workflowStore.activeWorkflow.activeMode = 'app'
+      await nextTick()
+
+      // The real mode has flipped, but the displayed mode still lags so a toggle
+      // that mounts now renders the old order before animating to the new one.
+      expect(store.viewMode).toBe('app')
+      expect(store.displayViewMode).toBe('graph')
+
+      // First frame only schedules the second; the displayed mode must not move.
+      advanceFrame()
+      expect(store.displayViewMode).toBe('graph')
+
+      // The second frame is the one that flips the displayed mode.
+      advanceFrame()
+      expect(store.displayViewMode).toBe('app')
+    })
+
+    it('cancels a stale frame chain so a rapid toggle has no transient flash', async () => {
+      workflowStore.activeWorkflow = createBuilderWorkflow('graph')
+      workflowStore.activeWorkflow.activeMode = 'app'
+      await nextTick()
+      advanceFrame()
+
+      workflowStore.activeWorkflow.activeMode = 'graph'
+      await nextTick()
+
+      // The pending second frame from the first toggle is cancelled, so it can
+      // no longer flip the displayed mode to 'app' before settling on 'graph'.
+      advanceFrame()
+      expect(store.displayViewMode).toBe('graph')
+
+      advanceFrame()
+      expect(store.displayViewMode).toBe('graph')
+    })
+  })
+
   describe('legacy selectedInput tuple migration', () => {
     const rootGraphId = '11111111-1111-4111-8111-111111111111'
 
diff --git a/src/stores/appModeStore.ts b/src/stores/appModeStore.ts
index 4ee5c1788a..9725f595e2 100644
--- a/src/stores/appModeStore.ts
+++ b/src/stores/appModeStore.ts
@@ -28,6 +28,7 @@ import { parseNodeId } from '@/types/nodeId'
 import type { NodeId } from '@/types/nodeId'
 import type { WidgetId } from '@/types/widgetId'
 import { isWidgetId, parseWidgetId } from '@/types/widgetId'
+import type { ViewMode } from '@/utils/appMode'
 
 function findWidgetByEntityId(
   rootGraph: LGraph,
@@ -50,11 +51,32 @@ export const useAppModeStore = defineStore('appMode', () => {
   const { getCanvas } = useCanvasStore()
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
-  const { mode, setMode, isBuilderMode, isSelectMode } = useAppMode()
+  const { mode, setMode, isAppMode, isBuilderMode, isSelectMode } = useAppMode()
   const emptyWorkflowDialog = useEmptyWorkflowDialog()
 
   const showVueNodeSwitchPopup = ref(false)
 
+  const viewMode = computed<ViewMode>(() => (isAppMode.value ? 'app' : 'graph'))
+
+  /**
+   * Frame-lagged mirror of {@link viewMode} driving the view-mode toggle's
+   * segment morph. The two-frame lag lets a toggle that mounts mid-switch
+   * render the previous mode first, then animate in. Kept in the store so it
+   * outlives the graph-mode toggle unmounting as the app toggle replaces it.
+   */
+  const displayViewMode = ref<ViewMode>(viewMode.value)
+  let outerFrame: number | undefined
+  let innerFrame: number | undefined
+  watch(viewMode, (next) => {
+    if (outerFrame !== undefined) cancelAnimationFrame(outerFrame)
+    if (innerFrame !== undefined) cancelAnimationFrame(innerFrame)
+    outerFrame = requestAnimationFrame(() => {
+      innerFrame = requestAnimationFrame(() => {
+        displayViewMode.value = next
+      })
+    })
+  })
+
   const selectedInputs = ref<LinearInput[]>([])
   const selectedOutputs = ref<NodeId[]>([])
   const hasOutputs = computed(() => !!selectedOutputs.value.length)
@@ -292,6 +314,8 @@ export const useAppModeStore = defineStore('appMode', () => {
     selectedInputs,
     selectedOutputs,
     updateInputConfig,
-    showVueNodeSwitchPopup
+    showVueNodeSwitchPopup,
+    viewMode,
+    displayViewMode
   }
 })
diff --git a/src/stores/templateRankingStore.test.ts b/src/stores/templateRankingStore.test.ts
index 12e7950fad..ee6a4d3d00 100644
--- a/src/stores/templateRankingStore.test.ts
+++ b/src/stores/templateRankingStore.test.ts
@@ -89,26 +89,6 @@ describe('templateRankingStore', () => {
     })
   })
 
-  describe('computePopularScore', () => {
-    it('does not use searchRank', () => {
-      const store = useTemplateRankingStore()
-      store.largestUsageScore = 100
-      // Popular score ignores searchRank - just usage + freshness
-      const score1 = store.computePopularScore('2024-01-01', 0)
-      const score2 = store.computePopularScore('2024-01-01', 0)
-      expect(score1).toBe(score2)
-    })
-
-    it('newer templates score higher', () => {
-      const store = useTemplateRankingStore()
-      store.largestUsageScore = 100
-      const today = new Date().toISOString().split('T')[0]
-      const oldScore = store.computePopularScore('2020-01-01', 0)
-      const newScore = store.computePopularScore(today, 0)
-      expect(newScore).toBeGreaterThan(oldScore)
-    })
-  })
-
   describe('searchRank edge cases', () => {
     it('handles searchRank of 0 (should still work, treated as very low)', () => {
       const store = useTemplateRankingStore()
diff --git a/src/stores/templateRankingStore.ts b/src/stores/templateRankingStore.ts
index a0dc68d8eb..8872b11229 100644
--- a/src/stores/templateRankingStore.ts
+++ b/src/stores/templateRankingStore.ts
@@ -44,23 +44,9 @@ export const useTemplateRankingStore = defineStore('templateRanking', () => {
     return normalizeUsageScore(usage) * 0.5 + internal * 0.3 + freshness * 0.2
   }
 
-  /**
-   * Compute composite score for "popular" sort.
-   * Formula: usage × 0.9 + freshness × 0.1
-   */
-  const computePopularScore = (
-    dateStr: string | undefined,
-    usage: number = 0
-  ): number => {
-    const freshness = computeFreshness(dateStr)
-
-    return normalizeUsageScore(usage) * 0.9 + freshness * 0.1
-  }
-
   return {
     largestUsageScore,
     computeFreshness,
-    computeDefaultScore,
-    computePopularScore
+    computeDefaultScore
   }
 })
diff --git a/src/utils/appMode.ts b/src/utils/appMode.ts
index 16154ddea5..b5e8c1e701 100644
--- a/src/utils/appMode.ts
+++ b/src/utils/appMode.ts
@@ -5,6 +5,8 @@ export type AppMode =
   | 'builder:outputs'
   | 'builder:arrange'
 
+export type ViewMode = 'graph' | 'app'
+
 type WorkflowModeSource = {
   activeMode: AppMode | null
   initialMode: AppMode | null | undefined
diff --git a/src/views/LinearView.test.ts b/src/views/LinearView.test.ts
new file mode 100644
index 0000000000..5325817d26
--- /dev/null
+++ b/src/views/LinearView.test.ts
@@ -0,0 +1,207 @@
+import { render, screen } from '@testing-library/vue'
+import type { DetachedWindowAPI } from 'happy-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+import LinearView from './LinearView.vue'
+
+interface ViewState {
+  sidebarLocation: 'left' | 'right'
+  isBuilderMode: boolean
+  isArrangeMode: boolean
+  activeTab: SidebarTabExtension | null
+  hasOutputs: boolean
+}
+
+const state = vi.hoisted<ViewState>(() => ({
+  sidebarLocation: 'left',
+  isBuilderMode: false,
+  isArrangeMode: false,
+  activeTab: null,
+  hasOutputs: false
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: (key: string) =>
+      key === 'Comfy.Sidebar.Location' ? state.sidebarLocation : undefined
+  })
+}))
+
+vi.mock('@/stores/workspaceStore', () => ({
+  useWorkspaceStore: () => ({
+    sidebarTab: {
+      get activeSidebarTab() {
+        return state.activeTab
+      }
+    }
+  })
+}))
+
+vi.mock('@/composables/useAppMode', async () => {
+  const { computed } = await import('vue')
+  return {
+    useAppMode: () => ({
+      isBuilderMode: computed(() => state.isBuilderMode),
+      isArrangeMode: computed(() => state.isArrangeMode)
+    })
+  }
+})
+
+vi.mock('@/stores/appModeStore', async () => {
+  const { reactive, computed } = await import('vue')
+  return {
+    useAppModeStore: () =>
+      reactive({ hasOutputs: computed(() => state.hasOutputs) })
+  }
+})
+
+vi.mock('@/composables/useStablePrimeVueSplitterSizer', () => ({
+  useStablePrimeVueSplitterSizer: () => ({ onResizeEnd: vi.fn() })
+}))
+
+function setViewport(width: number) {
+  const happyDOM = (window as unknown as { happyDOM?: DetachedWindowAPI })
+    .happyDOM
+  if (!happyDOM) {
+    throw new Error('window.happyDOM is unavailable to set viewport')
+  }
+  happyDOM.setViewport({ width, height: 800 })
+}
+
+const DESKTOP_WIDTH = 1280
+const MOBILE_WIDTH = 640
+
+const passthroughStub = { template: '<div><slot /></div>' }
+
+function leafStub(testId: string) {
+  return { template: `<div data-testid="${testId}" />` }
+}
+
+const baseStubs = {
+  Splitter: passthroughStub,
+  SplitterPanel: passthroughStub,
+  MobileDisplay: leafStub('mobile-display'),
+  AppBuilder: leafStub('app-builder'),
+  AppModeToolbar: leafStub('app-mode-toolbar'),
+  ExtensionSlot: leafStub('extension-slot'),
+  SideToolbar: leafStub('side-toolbar'),
+  TopbarBadges: leafStub('topbar-badges'),
+  TopbarSubscribeButton: leafStub('topbar-subscribe-button'),
+  WorkflowTabs: leafStub('workflow-tabs'),
+  LinearControls: leafStub('linear-controls'),
+  LinearPreview: leafStub('linear-preview'),
+  LinearProgressBar: leafStub('linear-progress-bar')
+}
+
+function renderView(overrides: Partial<ViewState> = {}) {
+  Object.assign(state, overrides)
+  return render(LinearView, {
+    global: { stubs: baseStubs }
+  })
+}
+
+const sampleTab: SidebarTabExtension = {
+  id: 'assets',
+  title: 'Assets',
+  type: 'custom',
+  render: () => {}
+}
+
+function expectRenderedBefore(first: HTMLElement, second: HTMLElement) {
+  expect(
+    first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING
+  ).toBeTruthy()
+}
+
+describe('LinearView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setViewport(DESKTOP_WIDTH)
+    Object.assign(state, {
+      sidebarLocation: 'left',
+      isBuilderMode: false,
+      isArrangeMode: false,
+      activeTab: null,
+      hasOutputs: false
+    } satisfies ViewState)
+  })
+
+  it('renders only the mobile display on small screens', () => {
+    setViewport(MOBILE_WIDTH)
+    renderView()
+
+    expect(screen.getByTestId('mobile-display')).toBeInTheDocument()
+    expect(screen.queryByTestId('workflow-tabs')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('linear-preview')).not.toBeInTheDocument()
+  })
+
+  it('renders the desktop layout with the center panel on larger screens', () => {
+    renderView()
+
+    expect(screen.queryByTestId('mobile-display')).not.toBeInTheDocument()
+    expect(screen.getByTestId('workflow-tabs')).toBeInTheDocument()
+    expect(screen.getByTestId('linear-header-progress-bar')).toBeInTheDocument()
+    expect(screen.getByTestId('linear-preview')).toBeInTheDocument()
+  })
+
+  it('shows the toolbar and puts the active tab before the controls for a left sidebar', () => {
+    renderView({
+      sidebarLocation: 'left',
+      activeTab: sampleTab,
+      hasOutputs: true
+    })
+
+    expect(screen.getByTestId('side-toolbar')).toBeInTheDocument()
+    expect(screen.getByTestId('app-mode-toolbar')).toBeInTheDocument()
+    expectRenderedBefore(
+      screen.getByTestId('extension-slot'),
+      screen.getByTestId('linear-controls')
+    )
+  })
+
+  it('puts the controls before the active tab when the sidebar is on the right', () => {
+    renderView({
+      sidebarLocation: 'right',
+      activeTab: sampleTab,
+      hasOutputs: true
+    })
+
+    expectRenderedBefore(
+      screen.getByTestId('linear-controls'),
+      screen.getByTestId('extension-slot')
+    )
+  })
+
+  it('omits both side panels when there is no active tab or output', () => {
+    renderView({ activeTab: null, hasOutputs: false })
+
+    expect(screen.queryByTestId('extension-slot')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('linear-controls')).not.toBeInTheDocument()
+    expect(screen.getByTestId('linear-preview')).toBeInTheDocument()
+  })
+
+  it('shows the app builder in the right panel for left sidebar arrange mode', () => {
+    renderView({
+      sidebarLocation: 'left',
+      isBuilderMode: true,
+      isArrangeMode: true
+    })
+
+    expect(screen.getByTestId('app-builder')).toBeInTheDocument()
+    expect(screen.queryByTestId('side-toolbar')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('app-mode-toolbar')).not.toBeInTheDocument()
+  })
+
+  it('shows the app builder in the left panel for right sidebar arrange mode', () => {
+    renderView({
+      sidebarLocation: 'right',
+      isBuilderMode: true,
+      isArrangeMode: true
+    })
+
+    expect(screen.getByTestId('app-builder')).toBeInTheDocument()
+    expect(screen.queryByTestId('side-toolbar')).not.toBeInTheDocument()
+  })
+})
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 2d5e1679c2..2f8bf91439 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -9,11 +9,11 @@ import { computed, useTemplateRef } from 'vue'
 import AppBuilder from '@/components/builder/AppBuilder.vue'
 import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { cn } from '@comfyorg/tailwind-utils'
 import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
 import LinearPreview from '@/renderer/extensions/linearMode/LinearPreview.vue'
 import LinearProgressBar from '@/renderer/extensions/linearMode/LinearProgressBar.vue'
@@ -85,8 +85,6 @@ const { onResizeEnd } = useStablePrimeVueSplitterSizer(
   [activeTab, splitterKey]
 )
 
-const TYPEFORM_WIDGET_ID = 'jmmzmlKw'
-
 const bottomLeftRef = useTemplateRef('bottomLeftRef')
 const bottomRightRef = useTemplateRef('bottomRightRef')
 const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
@@ -98,7 +96,7 @@ function dragDrop(e: DragEvent) {
 </script>
 <template>
   <MobileDisplay v-if="mobileDisplay" />
-  <div v-else class="absolute size-full" @dragover.prevent>
+  <div v-else class="absolute flex size-full flex-col" @dragover.prevent>
     <div
       class="workflow-tabs-container pointer-events-auto h-(--workflow-tabs-height) w-full border-b border-interface-stroke shadow-interface"
     >
@@ -108,92 +106,94 @@ function dragDrop(e: DragEvent) {
         <TopbarSubscribeButton />
       </div>
     </div>
-    <Splitter
-      :key="splitterKey"
-      class="bg-comfy-menu-secondary-bg h-[calc(100%-var(--workflow-tabs-height))] w-full border-none"
-      @resizestart="$event.originalEvent.preventDefault()"
-      @resizeend="onResizeEnd"
+    <div
+      class="flex flex-1 overflow-hidden bg-secondary-background"
+      :class="sidebarOnLeft ? 'flex-row' : 'flex-row-reverse'"
     >
-      <SplitterPanel
-        v-if="hasLeftPanel"
-        ref="leftPanel"
-        :size="SIDE_PANEL_SIZE"
-        :min-size="
-          sidePanelMinSize(showLeftBuilder, showRightBuilder && !activeTab)
-        "
-        :style="
-          showRightBuilder && !activeTab ? { display: 'none' } : undefined
-        "
-        :class="
-          cn(
-            'arrange-panel overflow-hidden outline-none',
-            showLeftBuilder ? 'min-w-78 bg-comfy-menu-bg' : 'min-w-78'
-          )
-        "
+      <SideToolbar
+        v-if="!isBuilderMode"
+        :visible-tab-ids="['assets', 'apps']"
+        force-connected
+        hide-workspace-toggles
+      />
+      <Splitter
+        :key="splitterKey"
+        class="h-full flex-1 border-none bg-secondary-background"
+        @resizestart="$event.originalEvent.preventDefault()"
+        @resizeend="onResizeEnd"
       >
-        <AppBuilder v-if="showLeftBuilder" />
-        <div
-          v-else-if="sidebarOnLeft && activeTab"
-          class="size-full overflow-x-hidden border-r border-border-subtle"
+        <SplitterPanel
+          v-if="hasLeftPanel"
+          ref="leftPanel"
+          :size="SIDE_PANEL_SIZE"
+          :min-size="
+            sidePanelMinSize(showLeftBuilder, showRightBuilder && !activeTab)
+          "
+          :style="
+            showRightBuilder && !activeTab ? { display: 'none' } : undefined
+          "
+          class="arrange-panel min-w-78 overflow-hidden bg-comfy-menu-bg outline-none"
         >
-          <ExtensionSlot :extension="activeTab" />
-        </div>
-        <LinearControls
-          v-else-if="!isArrangeMode"
-          ref="linearWorkflowRef"
-          :toast-to="unrefElement(bottomLeftRef) ?? undefined"
-        />
-      </SplitterPanel>
-      <SplitterPanel
-        id="linearCenterPanel"
-        data-testid="linear-center-panel"
-        :size="CENTER_PANEL_SIZE"
-        class="relative flex min-w-[20vw] flex-col gap-4 text-muted-foreground outline-none"
-        @drop="dragDrop"
-      >
-        <LinearProgressBar
-          data-testid="linear-header-progress-bar"
-          class="absolute top-0 left-0 z-21 h-1 w-[calc(100%+16px)]"
-        />
-        <LinearPreview
-          :run-button-click="linearWorkflowRef?.runButtonClick"
-          :typeform-widget-id="TYPEFORM_WIDGET_ID"
-        />
-        <div class="absolute top-2 left-4.5 z-21">
-          <AppModeToolbar v-if="!isBuilderMode" />
-        </div>
-        <div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />
-        <div ref="bottomRightRef" class="absolute right-4 bottom-7 z-20" />
-      </SplitterPanel>
-      <SplitterPanel
-        v-if="hasRightPanel"
-        ref="rightPanel"
-        :size="SIDE_PANEL_SIZE"
-        :min-size="
-          sidePanelMinSize(showRightBuilder, showLeftBuilder && !activeTab)
-        "
-        :style="showLeftBuilder && !activeTab ? { display: 'none' } : undefined"
-        :class="
-          cn(
-            'arrange-panel overflow-hidden outline-none',
-            showRightBuilder ? 'min-w-78 bg-comfy-menu-bg' : 'min-w-78'
-          )
-        "
-      >
-        <AppBuilder v-if="showRightBuilder" />
-        <LinearControls
-          v-else-if="sidebarOnLeft && !isArrangeMode"
-          ref="linearWorkflowRef"
-          :toast-to="unrefElement(bottomRightRef) ?? undefined"
-        />
-        <div
-          v-else-if="activeTab"
-          class="h-full overflow-x-hidden border-l border-border-subtle"
+          <AppBuilder v-if="showLeftBuilder" />
+          <div
+            v-else-if="sidebarOnLeft && activeTab"
+            class="size-full overflow-x-hidden border-r border-border-subtle"
+          >
+            <ExtensionSlot :extension="activeTab" />
+          </div>
+          <LinearControls
+            v-else-if="!isArrangeMode"
+            ref="linearWorkflowRef"
+            :toast-to="unrefElement(bottomLeftRef) ?? undefined"
+          />
+        </SplitterPanel>
+        <SplitterPanel
+          id="linearCenterPanel"
+          data-testid="linear-center-panel"
+          :size="CENTER_PANEL_SIZE"
+          class="relative flex min-w-[20vw] flex-col gap-4 text-muted-foreground outline-none"
+          @drop="dragDrop"
         >
-          <ExtensionSlot :extension="activeTab" />
-        </div>
-      </SplitterPanel>
-    </Splitter>
+          <LinearProgressBar
+            data-testid="linear-header-progress-bar"
+            class="absolute top-0 left-0 z-21 h-1 w-[calc(100%+16px)]"
+          />
+          <LinearPreview
+            :run-button-click="linearWorkflowRef?.runButtonClick"
+          />
+          <div class="absolute top-2 left-2 z-21">
+            <AppModeToolbar v-if="!isBuilderMode" />
+          </div>
+          <div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />
+          <div ref="bottomRightRef" class="absolute right-4 bottom-7 z-20" />
+        </SplitterPanel>
+        <SplitterPanel
+          v-if="hasRightPanel"
+          ref="rightPanel"
+          :size="SIDE_PANEL_SIZE"
+          :min-size="
+            sidePanelMinSize(showRightBuilder, showLeftBuilder && !activeTab)
+          "
+          :style="
+            showLeftBuilder && !activeTab ? { display: 'none' } : undefined
+          "
+          class="arrange-panel min-w-78 overflow-hidden bg-comfy-menu-bg outline-none"
+        >
+          <AppBuilder v-if="showRightBuilder" />
+          <LinearControls
+            v-else-if="sidebarOnLeft && !isArrangeMode"
+            ref="linearWorkflowRef"
+            :toast-to="unrefElement(bottomRightRef) ?? undefined"
+          />
+          <div
+            v-else-if="activeTab"
+            class="h-full overflow-x-hidden border-l border-border-subtle"
+          >
+            <ExtensionSlot :extension="activeTab" />
+          </div>
+        </SplitterPanel>
+      </Splitter>
+    </div>
   </div>
 </template>