diff --git a/.github/workflows/publish-desktop-bridge-types.yaml b/.github/workflows/publish-desktop-bridge-types.yaml
new file mode 100644
index 0000000000..2116bbfad2
--- /dev/null
+++ b/.github/workflows/publish-desktop-bridge-types.yaml
@@ -0,0 +1,142 @@
+name: Publish Desktop Bridge Types
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to publish (e.g., 0.1.2)'
+        required: true
+        type: string
+      dist_tag:
+        description: 'npm dist-tag to use'
+        required: true
+        default: latest
+        type: string
+      ref:
+        description: 'Git ref to checkout (commit SHA, tag, or branch)'
+        required: false
+        type: string
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dist_tag:
+        required: false
+        type: string
+        default: latest
+      ref:
+        required: false
+        type: string
+    secrets:
+      NPM_TOKEN:
+        required: true
+
+concurrency:
+  group: publish-desktop-bridge-types-${{ github.workflow }}-${{ inputs.version }}-${{ inputs.dist_tag }}
+  cancel-in-progress: false
+
+jobs:
+  publish_desktop_bridge_types:
+    name: Publish @comfyorg/comfyui-desktop-bridge-types
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Validate inputs
+        env:
+          VERSION: ${{ inputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          SEMVER_REGEX='^(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-((0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*))?(\+([0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*))?$'
+          if [[ ! "$VERSION" =~ $SEMVER_REGEX ]]; then
+            echo "::error title=Invalid version::Version '$VERSION' must follow semantic versioning (x.y.z[-suffix][+build])" >&2
+            exit 1
+          fi
+
+      - name: Determine ref to checkout
+        id: resolve_ref
+        env:
+          REF: ${{ inputs.ref }}
+          DEFAULT_REF: ${{ github.ref_name }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          if [ -z "$REF" ]; then
+            REF="$DEFAULT_REF"
+          fi
+          if ! git check-ref-format --allow-onelevel "$REF"; then
+            echo "::error title=Invalid ref::Ref '$REF' fails git check-ref-format validation." >&2
+            exit 1
+          fi
+          echo "ref=$REF" >> "$GITHUB_OUTPUT"
+
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ steps.resolve_ref.outputs.ref }}
+          fetch-depth: 1
+          persist-credentials: false
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+
+      - name: Verify package
+        id: pkg
+        env:
+          INPUT_VERSION: ${{ inputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          PACKAGE_JSON=packages/comfyui-desktop-bridge-types/package.json
+          NAME=$(node -p "require('./${PACKAGE_JSON}').name")
+          VERSION=$(node -p "require('./${PACKAGE_JSON}').version")
+          if [ "$VERSION" != "$INPUT_VERSION" ]; then
+            echo "::error title=Version mismatch::${PACKAGE_JSON} version $VERSION does not match input $INPUT_VERSION" >&2
+            exit 1
+          fi
+          echo "name=$NAME" >> "$GITHUB_OUTPUT"
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Check if version already on npm
+        id: check_npm
+        env:
+          NAME: ${{ steps.pkg.outputs.name }}
+          VER: ${{ steps.pkg.outputs.version }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          STATUS=0
+          OUTPUT=$(npm view "${NAME}@${VER}" --json 2>&1) || STATUS=$?
+          if [ "$STATUS" -eq 0 ]; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+            echo "::warning title=Already published::${NAME}@${VER} already exists on npm. Skipping publish."
+          else
+            if echo "$OUTPUT" | grep -q "E404"; then
+              echo "exists=false" >> "$GITHUB_OUTPUT"
+            else
+              echo "::error title=Registry lookup failed::$OUTPUT" >&2
+              exit "$STATUS"
+            fi
+          fi
+
+      - name: Publish package
+        if: steps.check_npm.outputs.exists == 'false'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          DIST_TAG: ${{ inputs.dist_tag }}
+        run: pnpm publish --access public --tag "$DIST_TAG" --no-git-checks --ignore-scripts
+        working-directory: packages/comfyui-desktop-bridge-types
diff --git a/.github/workflows/release-draft-create.yaml b/.github/workflows/release-draft-create.yaml
index a39ca0d026..5ed222046c 100644
--- a/.github/workflows/release-draft-create.yaml
+++ b/.github/workflows/release-draft-create.yaml
@@ -92,9 +92,7 @@ jobs:
           make_latest: >-
             ${{ github.event.pull_request.base.ref == 'main' &&
                 needs.build.outputs.is_prerelease == 'false' }}
-          draft: >-
-            ${{ github.event.pull_request.base.ref != 'main' ||
-                needs.build.outputs.is_prerelease == 'true' }}
+          draft: ${{ needs.build.outputs.is_prerelease == 'true' }}
           prerelease: >-
             ${{ needs.build.outputs.is_prerelease == 'true' }}
           generate_release_notes: true
diff --git a/apps/website/components.json b/apps/website/components.json
new file mode 100644
index 0000000000..9a42978fcb
--- /dev/null
+++ b/apps/website/components.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "font": "inter",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "pointer": true,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}
diff --git a/apps/website/e2e/navigation.spec.ts b/apps/website/e2e/navigation.spec.ts
index 682baddbca..999cef164d 100644
--- a/apps/website/e2e/navigation.spec.ts
+++ b/apps/website/e2e/navigation.spec.ts
@@ -2,6 +2,13 @@ import { expect } from '@playwright/test'
 
 import { test } from './fixtures/blockExternalMedia'
 
+const TOP_LEVEL_LABELS = [
+  'Products',
+  'Pricing',
+  'Community',
+  'Company'
+] as const
+
 test.describe('Desktop navigation @smoke', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/')
@@ -17,14 +24,10 @@ test.describe('Desktop navigation @smoke', () => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopLinks = nav.getByTestId('desktop-nav-links')
 
-    for (const label of [
-      'PRODUCTS',
-      'PRICING',
-      'COMMUNITY',
-      'RESOURCES',
-      'COMPANY'
-    ]) {
-      await expect(desktopLinks.getByText(label).first()).toBeVisible()
+    for (const label of TOP_LEVEL_LABELS) {
+      await expect(
+        desktopLinks.getByText(label, { exact: true }).first()
+      ).toBeVisible()
     }
   })
 
@@ -49,11 +52,11 @@ test.describe('Desktop dropdown @interaction', () => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopLinks = nav.getByTestId('desktop-nav-links')
     const productsButton = desktopLinks.getByRole('button', {
-      name: /PRODUCTS/i
+      name: 'Products'
     })
     await productsButton.hover()
 
-    const dropdown = productsButton.locator('..').getByTestId('nav-dropdown')
+    const dropdown = nav.getByTestId('nav-dropdown')
     for (const item of [
       'Comfy Desktop',
       'Comfy Cloud',
@@ -67,19 +70,20 @@ test.describe('Desktop dropdown @interaction', () => {
   test('moving mouse away closes dropdown', async ({ page }) => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopLinks = nav.getByTestId('desktop-nav-links')
-    await desktopLinks.getByRole('button', { name: /PRODUCTS/i }).hover()
+    await desktopLinks.getByRole('button', { name: 'Products' }).hover()
 
     const comfyLocal = nav.getByRole('link', { name: 'Comfy Desktop' }).first()
     await expect(comfyLocal).toBeVisible()
 
-    await page.locator('main').hover()
+    const viewport = page.viewportSize()
+    await page.mouse.move(10, (viewport?.height ?? 800) - 10)
     await expect(comfyLocal).toBeHidden()
   })
 
   test('Escape key closes dropdown', async ({ page }) => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopLinks = nav.getByTestId('desktop-nav-links')
-    await desktopLinks.getByRole('button', { name: /PRODUCTS/i }).hover()
+    await desktopLinks.getByRole('button', { name: 'Products' }).hover()
 
     const comfyLocal = nav.getByRole('link', { name: 'Comfy Desktop' }).first()
     await expect(comfyLocal).toBeVisible()
@@ -105,11 +109,11 @@ test.describe('Mobile menu @mobile', () => {
   }) => {
     await page.getByRole('button', { name: 'Toggle menu' }).click()
 
-    const menu = page.locator('#site-mobile-menu')
+    const menu = page.getByRole('dialog')
     await expect(menu).toBeVisible()
 
-    for (const label of ['PRODUCTS', 'PRICING', 'COMMUNITY']) {
-      await expect(menu.getByText(label).first()).toBeVisible()
+    for (const label of ['Products', 'Pricing', 'Community']) {
+      await expect(menu.getByText(label, { exact: true }).first()).toBeVisible()
     }
   })
 
@@ -118,24 +122,14 @@ test.describe('Mobile menu @mobile', () => {
   }) => {
     await page.getByRole('button', { name: 'Toggle menu' }).click()
 
-    const menu = page.locator('#site-mobile-menu')
-    await menu.getByText('PRODUCTS').first().click()
+    const menu = page.getByRole('dialog')
+    await menu.getByRole('button', { name: 'Products' }).click()
 
     await expect(menu.getByText('Comfy Desktop')).toBeVisible()
     await expect(menu.getByText('Comfy Cloud')).toBeVisible()
 
     await menu.getByRole('button', { name: /BACK/i }).click()
-    await expect(menu.getByText('PRODUCTS').first()).toBeVisible()
-  })
-
-  test('CTA buttons visible in mobile menu', async ({ page }) => {
-    await page.getByRole('button', { name: 'Toggle menu' }).click()
-
-    const menu = page.locator('#site-mobile-menu')
-    await expect(
-      menu.getByRole('link', { name: 'DOWNLOAD DESKTOP' })
-    ).toBeVisible()
-    await expect(menu.getByRole('link', { name: 'LAUNCH CLOUD' })).toBeVisible()
+    await expect(menu.getByRole('button', { name: 'Products' })).toBeVisible()
   })
 })
 
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 8baa457ed9..9cca495e6e 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 467114e646..664794c6ef 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 cb240c61e0..79cb386349 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 eff4a0aee9..88afa29215 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/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-3-lg-visual-linux.png b/apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-3-lg-visual-linux.png
index 9b1571d022..8bf7c36cd9 100644
Binary files a/apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-3-lg-visual-linux.png and b/apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-3-lg-visual-linux.png differ
diff --git a/apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-4-xl-visual-linux.png b/apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-4-xl-visual-linux.png
index 56674ca703..b6ba02ec4b 100644
Binary files a/apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-4-xl-visual-linux.png and b/apps/website/e2e/visual-responsive.spec.ts-snapshots/pricing-tiers-4-xl-visual-linux.png differ
diff --git a/apps/website/package.json b/apps/website/package.json
index 2c7cfe834a..e1168b7102 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -25,12 +25,15 @@
     "@comfyorg/object-info-parser": "workspace:*",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
+    "@lucide/vue": "catalog:",
     "@vercel/analytics": "catalog:",
     "@vueuse/core": "catalog:",
+    "class-variance-authority": "catalog:",
     "cva": "catalog:",
     "gsap": "catalog:",
     "lenis": "catalog:",
     "posthog-js": "catalog:",
+    "reka-ui": "catalog:",
     "three": "catalog:",
     "vue": "catalog:",
     "zod": "catalog:"
@@ -43,6 +46,7 @@
     "astro": "catalog:",
     "tailwindcss": "catalog:",
     "tsx": "catalog:",
+    "tw-animate-css": "catalog:",
     "typescript": "catalog:",
     "vitest": "catalog:"
   }
diff --git a/apps/website/src/components/common/Badge.vue b/apps/website/src/components/common/Badge.vue
deleted file mode 100644
index 0d7879f02a..0000000000
--- a/apps/website/src/components/common/Badge.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-import type { BadgeVariants } from './badge.variants'
-import { badgeVariants } from './badge.variants'
-
-const { variant, class: className } = defineProps<{
-  variant?: BadgeVariants['variant']
-  class?: string
-}>()
-</script>
-
-<template>
-  <span :class="cn(badgeVariants({ variant }), className)">
-    <slot />
-  </span>
-</template>
diff --git a/apps/website/src/components/common/ContentSection.vue b/apps/website/src/components/common/ContentSection.vue
index a45794b915..17c0a12d17 100644
--- a/apps/website/src/components/common/ContentSection.vue
+++ b/apps/website/src/components/common/ContentSection.vue
@@ -114,7 +114,7 @@ function scrollToSection(id: string) {
   <section class="px-4 pt-8 pb-24 lg:px-20 lg:pt-24 lg:pb-40">
     <div class="lg:flex lg:gap-16">
       <!-- Desktop sticky nav -->
-      <aside class="scrollbar-none hidden lg:block lg:w-48 lg:shrink-0">
+      <aside class="hidden scrollbar-none lg:block lg:w-48 lg:shrink-0">
         <div class="sticky top-32">
           <CategoryNav
             :categories="categories"
@@ -135,7 +135,7 @@ function scrollToSection(id: string) {
         >
           <h2
             v-if="section.hasTitle"
-            class="text-primary-comfy-canvas mb-6 text-2xl font-light"
+            class="mb-6 text-2xl font-light text-primary-comfy-canvas"
           >
             {{ t(key(section.id, 'title'), locale) }}
           </h2>
@@ -144,7 +144,7 @@ function scrollToSection(id: string) {
             <!-- Paragraph -->
             <p
               v-if="block.type === 'paragraph'"
-              class="text-primary-comfy-canvas mt-4 text-sm/relaxed"
+              class="mt-4 text-sm/relaxed text-primary-comfy-canvas"
               v-html="t(key(section.id, `block.${i}`), locale)"
             />
 
@@ -167,7 +167,7 @@ function scrollToSection(id: string) {
                   locale
                 ).split('\n')"
                 :key="j"
-                class="text-primary-comfy-canvas flex items-start gap-2"
+                class="flex items-start gap-2 text-primary-comfy-canvas"
               >
                 <span
                   class="bg-primary-comfy-yellow mt-1.5 size-1.5 shrink-0 rounded-full"
@@ -187,7 +187,7 @@ function scrollToSection(id: string) {
                   locale
                 ).split('\n')"
                 :key="j"
-                class="text-primary-comfy-canvas flex items-start gap-3"
+                class="flex items-start gap-3 text-primary-comfy-canvas"
               >
                 <span
                   class="text-primary-comfy-yellow shrink-0 font-semibold tabular-nums"
@@ -205,7 +205,7 @@ function scrollToSection(id: string) {
                 :alt="t(key(section.id, `block.${i}.alt`), locale)"
                 class="w-full rounded-2xl object-cover"
               />
-              <figcaption class="text-primary-comfy-canvas mt-3 text-xs">
+              <figcaption class="mt-3 text-xs text-primary-comfy-canvas">
                 {{ t(key(section.id, `block.${i}.caption`), locale) }}
               </figcaption>
             </figure>
@@ -221,7 +221,7 @@ function scrollToSection(id: string) {
               "
             >
               <p
-                class="text-primary-comfy-canvas text-lg/relaxed font-light italic"
+                class="text-lg/relaxed font-light text-primary-comfy-canvas italic"
               >
                 "{{ t(key(section.id, `block.${i}.text`), locale) }}"
               </p>
@@ -238,17 +238,17 @@ function scrollToSection(id: string) {
               <SectionLabel>
                 {{ t(key(section.id, `block.${i}.label`), locale) }}
               </SectionLabel>
-              <p class="text-primary-comfy-canvas mt-2 text-sm font-semibold">
+              <p class="mt-2 text-sm font-semibold text-primary-comfy-canvas">
                 {{ t(key(section.id, `block.${i}.name`), locale) }}
               </p>
-              <p class="text-primary-comfy-canvas text-xs">
+              <p class="text-xs text-primary-comfy-canvas">
                 {{ t(key(section.id, `block.${i}.role`), locale) }}
               </p>
               <template v-if="hasKey(key(section.id, `block.${i}.name2`))">
-                <p class="text-primary-comfy-canvas mt-4 text-sm font-semibold">
+                <p class="mt-4 text-sm font-semibold text-primary-comfy-canvas">
                   {{ t(key(section.id, `block.${i}.name2`), locale) }}
                 </p>
-                <p class="text-primary-comfy-canvas text-xs">
+                <p class="text-xs text-primary-comfy-canvas">
                   {{ t(key(section.id, `block.${i}.role2`), locale) }}
                 </p>
               </template>
diff --git a/apps/website/src/components/common/HeaderMain/HeaderMain.vue b/apps/website/src/components/common/HeaderMain/HeaderMain.vue
new file mode 100644
index 0000000000..2541de8212
--- /dev/null
+++ b/apps/website/src/components/common/HeaderMain/HeaderMain.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { Locale } from '../../../i18n/translations.ts'
+import { t } from '../../../i18n/translations.ts'
+import { externalLinks, getRoutes } from '../../../config/routes.ts'
+import GitHubStarBadge from '../GitHubStarBadge.vue'
+import HeaderMainDesktop from './HeaderMainDesktop.vue'
+import HeaderMainMobile from './HeaderMainMobile.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const { locale = 'en', githubStars = '' } = defineProps<{
+  locale?: Locale
+  githubStars?: string
+}>()
+const routes = getRoutes(locale)
+
+const ctaButtons = [
+  {
+    prefix: t('nav.ctaDesktopPrefix', locale),
+    core: t('nav.ctaDesktopCore', locale),
+    ariaLabel: t('nav.downloadLocal', locale),
+    href: routes.download,
+    primary: false
+  },
+  {
+    prefix: t('nav.ctaCloudPrefix', locale),
+    core: t('nav.ctaCloudCore', locale),
+    ariaLabel: t('nav.launchCloud', locale),
+    href: externalLinks.cloud,
+    primary: true
+  }
+]
+</script>
+
+<template>
+  <nav
+    class="fixed inset-x-0 top-0 z-50 flex items-center justify-between gap-4 bg-primary-comfy-ink px-6 py-5 lg:gap-4 lg:px-[clamp(0.25rem,4vw,5rem)] lg:py-8"
+    aria-label="Main navigation"
+  >
+    <a
+      :href="routes.home"
+      class="inline-grid h-10 shrink-0 grid-cols-1 grid-rows-1 transition-[width]"
+      aria-label="Comfy home"
+    >
+      <img
+        src="/icons/logomark.svg"
+        alt="Comfy"
+        class="col-span-full row-span-full h-8"
+      />
+      <div
+        class="relative col-span-full row-span-full h-10 w-0 overflow-clip transition-[width] xl:w-36"
+      >
+        <img
+          src="/icons/logo.svg"
+          alt="Comfy"
+          class="absolute top-0 left-0 h-10 w-36 max-w-none object-contain object-left"
+        />
+      </div>
+    </a>
+
+    <!-- Desktop nav links -->
+    <HeaderMainDesktop :locale class="hidden lg:block" />
+    <HeaderMainMobile :locale class="lg:hidden" />
+
+    <!-- Desktop CTA buttons -->
+    <div
+      data-testid="desktop-nav-cta"
+      class="hidden shrink-0 items-center gap-2 lg:flex"
+    >
+      <GitHubStarBadge v-if="githubStars" :stars="githubStars" />
+      <Button
+        v-for="cta in ctaButtons"
+        :key="cta.href"
+        as="a"
+        :href="cta.href"
+        :variant="cta.primary ? 'default' : 'outline'"
+        :aria-label="cta.ariaLabel"
+      >
+        <span
+          ><span class="hidden xl:inline-block">{{ cta.prefix }}&nbsp;</span
+          >{{ cta.core }}</span
+        >
+      </Button>
+    </div>
+  </nav>
+</template>
diff --git a/apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue b/apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue
new file mode 100644
index 0000000000..c95737e084
--- /dev/null
+++ b/apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import NavigationMenu from '@/components/ui/navigation-menu/NavigationMenu.vue'
+import NavigationMenuContent from '@/components/ui/navigation-menu/NavigationMenuContent.vue'
+import NavigationMenuItem from '@/components/ui/navigation-menu/NavigationMenuItem.vue'
+import NavigationMenuLink from '@/components/ui/navigation-menu/NavigationMenuLink.vue'
+import NavigationMenuList from '@/components/ui/navigation-menu/NavigationMenuList.vue'
+import NavigationMenuTrigger from '@/components/ui/navigation-menu/NavigationMenuTrigger.vue'
+import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu/navigationMenuTriggerStyle'
+
+import {
+  isHrefActive,
+  useCurrentPath
+} from '../../../composables/useCurrentPath'
+import { getMainNavigation } from '../../../data/mainNavigation'
+import type { NavItem } from '../../../data/mainNavigation'
+import type { Locale } from '../../../i18n/translations'
+import NavColumn from './NavColumn.vue'
+import NavFeaturedCard from './NavFeaturedCard.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const mainNavigation = getMainNavigation(locale)
+const currentPath = useCurrentPath()
+
+function isNavItemActive(navItem: NavItem, path: string): boolean {
+  if (navItem.href) return isHrefActive(navItem.href, path)
+  return (
+    navItem.columns?.some((column) =>
+      column.items.some((item) => isHrefActive(item.href, path))
+    ) ?? false
+  )
+}
+</script>
+
+<template>
+  <NavigationMenu data-testid="desktop-nav-links">
+    <NavigationMenuList>
+      <NavigationMenuItem
+        v-for="navItem in mainNavigation"
+        :key="navItem.label"
+      >
+        <template v-if="navItem.columns?.length">
+          <NavigationMenuTrigger
+            :active="isNavItemActive(navItem, currentPath)"
+          >
+            {{ navItem.label }}
+          </NavigationMenuTrigger>
+          <NavigationMenuContent class="w-auto" data-testid="nav-dropdown">
+            <ul class="flex w-max gap-16">
+              <NavFeaturedCard
+                v-if="navItem.featured"
+                :featured="navItem.featured"
+              />
+              <NavColumn
+                v-for="column in navItem.columns"
+                :key="column.header"
+                :column="column"
+                :locale="locale"
+                :current-path="currentPath"
+              />
+            </ul>
+          </NavigationMenuContent>
+        </template>
+        <NavigationMenuLink
+          v-else
+          as-child
+          :active="isNavItemActive(navItem, currentPath)"
+          :class="navigationMenuTriggerStyle()"
+        >
+          <a :href="navItem.href" class="ppformula-text-center">{{
+            navItem.label
+          }}</a>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>
diff --git a/apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue b/apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue
new file mode 100644
index 0000000000..ec65c90faa
--- /dev/null
+++ b/apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import BreadthumbIcon from '@/components/icons/BreadthumbIcon.vue'
+import { ChevronLeft, ChevronRight } from '@lucide/vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { getMainNavigation } from '../../../data/mainNavigation'
+import { getRoutes } from '../../../config/routes.ts'
+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 Sheet from '@/components/ui/sheet/Sheet.vue'
+import SheetContent from '@/components/ui/sheet/SheetContent.vue'
+import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
+import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
+import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
+import SheetTrigger from '@/components/ui/sheet/SheetTrigger.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const routes = getRoutes(locale)
+const mainNavigation = getMainNavigation(locale)
+
+const isOpen = ref(false)
+const activeSection = ref<string | null>(null)
+
+const activeItem = computed(() =>
+  mainNavigation.find(
+    (item) => item.label === activeSection.value && item.columns
+  )
+)
+
+watch(isOpen, (open) => {
+  if (open) {
+    lockScroll()
+  } else {
+    unlockScroll()
+    activeSection.value = null
+  }
+})
+
+onUnmounted(() => {
+  if (isOpen.value) unlockScroll({ skipRestore: true })
+})
+</script>
+
+<template>
+  <div>
+    <Sheet v-model:open="isOpen">
+      <SheetTrigger
+        :aria-label="t('nav.toggleMenu', locale)"
+        class="bg-primary-comfy-yellow grid size-10 shrink-0 cursor-pointer place-items-center rounded-xl text-primary-comfy-ink hover:opacity-90"
+      >
+        <BreadthumbIcon class="h-3 w-5 text-primary-comfy-ink" />
+      </SheetTrigger>
+      <SheetContent
+        side="right"
+        class="flex size-full flex-col px-6 py-5 sm:max-w-none"
+        :close-label="t('nav.close', locale)"
+      >
+        <SheetHeader class="sr-only">
+          <SheetTitle>{{ t('nav.menu', locale) }}</SheetTitle>
+          <SheetDescription>
+            {{ t('nav.mobileMenuDescription', locale) }}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div>
+          <a
+            :href="routes.home"
+            class="focus-visible:border-primary-comfy-yellow focus-visible:ring-primary-comfy-yellow/50 inline-flex w-auto shrink-0 focus-visible:ring-3"
+          >
+            <img src="/icons/logomark.svg" alt="" class="h-11 w-auto" />
+            <span class="sr-only">{{ t('nav.home', locale) }}</span>
+          </a>
+        </div>
+
+        <div class="relative mt-4 flex-1 overflow-hidden">
+          <!-- Top-level nav -->
+          <nav
+            :class="
+              cn(
+                'absolute inset-0 overflow-y-auto p-1',
+                activeItem ? 'opacity-0' : ''
+              )
+            "
+            :aria-label="t('nav.menu', locale)"
+            :inert="activeItem ? true : undefined"
+          >
+            <ul class="flex flex-col gap-y-8">
+              <li v-for="item in mainNavigation" :key="item.label">
+                <Button
+                  :as="item.columns ? 'button' : 'a'"
+                  variant="navMuted"
+                  :type="item.columns ? 'button' : undefined"
+                  :href="item.columns ? undefined : item.href"
+                  @click="item.columns && (activeSection = item.label)"
+                >
+                  {{ item.label }}
+                  <template #append>
+                    <ChevronRight class="size-7" />
+                  </template>
+                </Button>
+              </li>
+            </ul>
+          </nav>
+
+          <!-- Drill-down sub-panel -->
+          <div
+            class="absolute inset-0 bg-primary-comfy-ink transition-transform duration-300 ease-out"
+            :class="
+              activeItem
+                ? 'translate-x-0'
+                : 'pointer-events-none translate-x-full'
+            "
+            :inert="activeItem ? undefined : true"
+            :aria-hidden="!activeItem"
+          >
+            <div class="size-full overflow-y-auto py-8">
+              <Button
+                type="button"
+                variant="link"
+                @click="activeSection = null"
+              >
+                <template #prepend>
+                  <ChevronLeft />
+                </template>
+                {{ t('nav.back', locale) }}
+              </Button>
+
+              <div v-if="activeItem" class="mt-6 flex flex-col gap-y-12">
+                <div
+                  v-for="column in activeItem.columns"
+                  :key="column.header"
+                  class="flex flex-col gap-y-3"
+                >
+                  <p
+                    class="text-primary-warm-gray text-base font-bold tracking-wider uppercase"
+                  >
+                    {{ column.header }}
+                  </p>
+                  <Button
+                    v-for="link in column.items"
+                    :key="link.label"
+                    :href="link.href"
+                    variant="nav"
+                    as="a"
+                    :target="link.external ? '_blank' : undefined"
+                    :rel="link.external ? 'noopener noreferrer' : undefined"
+                  >
+                    <NavLinkContent :item="link" :locale="locale" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="pointer-events-none absolute inset-x-0 top-0 h-8 bg-linear-to-b from-primary-comfy-ink to-transparent"
+            />
+            <div
+              class="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-linear-to-t from-primary-comfy-ink to-transparent"
+            />
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </div>
+</template>
diff --git a/apps/website/src/components/common/HeaderMain/NavColumn.vue b/apps/website/src/components/common/HeaderMain/NavColumn.vue
new file mode 100644
index 0000000000..90bd8a8817
--- /dev/null
+++ b/apps/website/src/components/common/HeaderMain/NavColumn.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import NavigationMenuLink from '@/components/ui/navigation-menu/NavigationMenuLink.vue'
+
+import { isHrefActive } from '../../../composables/useCurrentPath'
+import type { NavColumn } from '../../../data/mainNavigation'
+import type { Locale } from '../../../i18n/translations'
+import NavLinkContent from './NavLinkContent.vue'
+
+defineProps<{ column: NavColumn; locale: Locale; currentPath: string }>()
+</script>
+
+<template>
+  <li class="flex flex-col space-y-4">
+    <p class="font-formula text-primary-warm-gray pl-2 text-sm font-medium">
+      {{ column.header }}
+    </p>
+    <ul class="flex flex-col">
+      <li v-for="item in column.items" :key="item.label">
+        <NavigationMenuLink
+          as-child
+          :active="isHrefActive(item.href, currentPath)"
+          class="hover:bg-transparency-white-t4"
+        >
+          <a
+            :href="item.href"
+            :target="item.external ? '_blank' : undefined"
+            :rel="item.external ? 'noopener noreferrer' : undefined"
+            class="whitespace-nowrap"
+          >
+            <NavLinkContent :item="item" :locale="locale" />
+          </a>
+        </NavigationMenuLink>
+      </li>
+    </ul>
+  </li>
+</template>
diff --git a/apps/website/src/components/common/HeaderMain/NavFeaturedCard.vue b/apps/website/src/components/common/HeaderMain/NavFeaturedCard.vue
new file mode 100644
index 0000000000..cbfcdc4854
--- /dev/null
+++ b/apps/website/src/components/common/HeaderMain/NavFeaturedCard.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import ButtonPill from '@/components/ui/button-pill/ButtonPill.vue'
+
+import type { NavFeatured } from '../../../data/mainNavigation'
+
+defineProps<{ featured: NavFeatured }>()
+</script>
+
+<template>
+  <li class="shrink-0">
+    <a
+      :href="featured.cta.href"
+      :aria-label="featured.cta.ariaLabel"
+      class="group/pill-trigger relative block"
+    >
+      <img
+        class="aspect-4/3 w-62 max-w-none rounded-xl"
+        :src="featured.imageSrc"
+        :alt="featured.imageAlt ?? ''"
+      />
+      <p class="mt-4 font-extrabold uppercase">
+        {{ featured.title }}
+      </p>
+      <div class="mt-1">
+        <ButtonPill as="span" icon-position="left" variant="ghost">
+          {{ featured.cta.label }}
+        </ButtonPill>
+      </div>
+    </a>
+  </li>
+</template>
diff --git a/apps/website/src/components/common/HeaderMain/NavLinkContent.vue b/apps/website/src/components/common/HeaderMain/NavLinkContent.vue
new file mode 100644
index 0000000000..473d9567fe
--- /dev/null
+++ b/apps/website/src/components/common/HeaderMain/NavLinkContent.vue
@@ -0,0 +1,23 @@
+<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'
+
+defineProps<{ item: NavColumnItem; locale: Locale }>()
+</script>
+
+<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>
+    <ArrowUpRight
+      v-if="item.external"
+      class="text-primary-comfy-yellow size-4"
+    />
+  </span>
+</template>
diff --git a/apps/website/src/components/common/MaskRevealButton.vue b/apps/website/src/components/common/MaskRevealButton.vue
deleted file mode 100644
index 83c3803d3c..0000000000
--- a/apps/website/src/components/common/MaskRevealButton.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-import type { HTMLAttributes } from 'vue'
-
-import type { MaskRevealButtonVariants } from './maskRevealButton.variants'
-import {
-  maskRevealButtonBadgeVariants,
-  maskRevealButtonVariants,
-  maskRevealLabelVariants
-} from './maskRevealButton.variants'
-
-const {
-  href,
-  target,
-  rel,
-  type = 'button',
-  disabled,
-  ariaLabel,
-  variant,
-  size,
-  iconPosition,
-  hideLabel = true,
-  class: customClass = ''
-} = defineProps<{
-  href?: string
-  target?: string
-  rel?: string
-  type?: 'button' | 'submit' | 'reset'
-  disabled?: boolean
-  ariaLabel?: string
-  variant?: MaskRevealButtonVariants['variant']
-  size?: MaskRevealButtonVariants['size']
-  iconPosition?: MaskRevealButtonVariants['iconPosition']
-  hideLabel?: boolean
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <component
-    :is="href ? 'a' : 'button'"
-    :href="href || undefined"
-    :target="href ? target : undefined"
-    :rel="href ? rel : undefined"
-    :type="!href ? type : undefined"
-    :disabled="!href ? disabled : undefined"
-    :aria-label="ariaLabel"
-    :class="
-      cn(maskRevealButtonVariants({ variant, size, iconPosition }), customClass)
-    "
-  >
-    <span
-      :data-icon-position="iconPosition ?? 'right'"
-      :data-hidden="hideLabel ? 'true' : 'false'"
-      :class="maskRevealLabelVariants()"
-    >
-      <slot />
-    </span>
-    <span
-      :class="maskRevealButtonBadgeVariants({ variant, size, iconPosition })"
-      aria-hidden="true"
-    >
-      <span class="inline-flex transition-transform duration-500">
-        <slot name="icon">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-4"
-          >
-            <path d="M7 17 17 7" />
-            <path d="M7 7h10v10" />
-          </svg>
-        </slot>
-      </span>
-    </span>
-  </component>
-</template>
diff --git a/apps/website/src/components/common/MobileMenu.vue b/apps/website/src/components/common/MobileMenu.vue
deleted file mode 100644
index dcef970f44..0000000000
--- a/apps/website/src/components/common/MobileMenu.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
-
-import type { Locale } from '../../i18n/translations'
-import { t } from '../../i18n/translations'
-import { lockScroll, unlockScroll } from '../../composables/scrollLock'
-import BrandButton from './BrandButton.vue'
-import type { NavLink } from './NavDesktopLink.vue'
-
-interface CtaLink {
-  label: string
-  href: string
-  primary: boolean
-}
-
-const {
-  open = false,
-  navigating = false,
-  links = [],
-  ctaLinks = [],
-  locale = 'en'
-} = defineProps<{
-  open?: boolean
-  navigating?: boolean
-  links?: NavLink[]
-  ctaLinks?: CtaLink[]
-  locale?: Locale
-}>()
-
-const emit = defineEmits<{
-  close: []
-}>()
-
-const menuRef = ref<HTMLElement | undefined>()
-const activeSection = ref<string | null>(null)
-
-const activeSectionItems = computed(
-  () => links.find((l) => l.label === activeSection.value)?.items
-)
-
-function onNavigate() {
-  activeSection.value = null
-  emit('close')
-}
-
-const FOCUSABLE =
-  'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
-
-function trapFocus(e: KeyboardEvent) {
-  if (e.key !== 'Tab') return
-  const menu = menuRef.value
-  if (!menu) return
-  const focusable = [...menu.querySelectorAll<HTMLElement>(FOCUSABLE)]
-  if (!focusable.length) return
-  const first = focusable[0]
-  const last = focusable[focusable.length - 1]
-  if (e.shiftKey && document.activeElement === first) {
-    e.preventDefault()
-    last.focus()
-  } else if (!e.shiftKey && document.activeElement === last) {
-    e.preventDefault()
-    first.focus()
-  }
-}
-
-watch(
-  () => open,
-  async (isOpen) => {
-    if (isOpen) {
-      lockScroll()
-      await nextTick()
-      const menu = menuRef.value
-      const firstFocusable = menu?.querySelector<HTMLElement>(FOCUSABLE)
-      firstFocusable?.focus()
-      menu?.addEventListener('keydown', trapFocus)
-    } else {
-      menuRef.value?.removeEventListener('keydown', trapFocus)
-      unlockScroll({ skipRestore: navigating })
-    }
-  }
-)
-
-onUnmounted(() => {
-  menuRef.value?.removeEventListener('keydown', trapFocus)
-  if (open) unlockScroll({ skipRestore: true })
-})
-</script>
-
-<template>
-  <div
-    v-show="open"
-    id="site-mobile-menu"
-    ref="menuRef"
-    role="dialog"
-    aria-modal="true"
-    :inert="!open"
-    :aria-label="t('nav.menu', locale)"
-    class="bg-primary-comfy-ink fixed inset-0 z-40 flex flex-col px-6 pt-24 pb-8 lg:hidden"
-  >
-    <!-- Main list -->
-    <template v-if="!activeSection">
-      <div class="flex flex-1 flex-col gap-8">
-        <template v-for="link in links" :key="link.label">
-          <button
-            v-if="link.items"
-            class="text-primary-comfy-canvas text-left text-3xl font-medium"
-            @click="activeSection = link.label"
-          >
-            {{ link.label }}
-          </button>
-          <a
-            v-else
-            :href="link.href"
-            class="text-primary-comfy-canvas text-3xl font-medium"
-            @click="onNavigate"
-          >
-            {{ link.label }}
-          </a>
-        </template>
-      </div>
-
-      <div class="flex flex-col gap-3">
-        <BrandButton
-          v-for="cta in ctaLinks"
-          :key="cta.href"
-          :href="cta.href"
-          :variant="cta.primary ? 'solid' : 'outline'"
-          size="lg"
-          class="w-full"
-        >
-          {{ cta.label }}
-        </BrandButton>
-      </div>
-    </template>
-
-    <!-- Drill-down sub-menu -->
-    <template v-else>
-      <div class="flex flex-1 flex-col">
-        <button
-          class="text-primary-comfy-yellow mb-6 flex items-center gap-2 text-sm font-bold tracking-wide uppercase"
-          @click="activeSection = null"
-        >
-          <span
-            aria-hidden="true"
-            class="bg-primary-comfy-yellow size-3 -translate-y-px rotate-180"
-            style="
-              mask: url('/icons/arrow-right.svg') center / contain no-repeat;
-            "
-          />
-          {{ t('nav.back', locale) }}
-        </button>
-
-        <p class="text-primary-warm-gray mb-8 text-sm font-bold uppercase">
-          {{ activeSection }}
-        </p>
-
-        <div class="flex flex-col gap-8 pl-2">
-          <a
-            v-for="item in activeSectionItems"
-            :key="item.href"
-            :href="item.href"
-            class="text-primary-comfy-canvas flex items-center gap-3 text-3xl font-medium"
-            @click="onNavigate"
-          >
-            {{ item.label }}
-            <span
-              v-if="item.badge"
-              class="bg-primary-comfy-yellow font-formula-narrow text-primary-comfy-ink -skew-x-12 rounded-sm px-1 py-0.5 text-xs font-semibold"
-            >
-              <span class="ppformula-text-center inline-block skew-x-12">{{
-                item.badge
-              }}</span>
-            </span>
-            <img
-              v-if="item.external"
-              src="/icons/arrow-up-right.svg"
-              alt=""
-              class="size-5"
-              aria-hidden="true"
-            />
-          </a>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
diff --git a/apps/website/src/components/common/NavDesktopLink.vue b/apps/website/src/components/common/NavDesktopLink.vue
deleted file mode 100644
index ead0fea99f..0000000000
--- a/apps/website/src/components/common/NavDesktopLink.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-type NavDropdownItem = {
-  label: string
-  href: string
-  badge?: string
-  external?: boolean
-}
-
-export type NavLink = {
-  label: string
-  href?: string
-  items?: NavDropdownItem[]
-}
-
-const {
-  link,
-  currentPath,
-  isOpen = false
-} = defineProps<{
-  link: NavLink
-  currentPath: string
-  isOpen?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'open', label: string): void
-  (e: 'close'): void
-  (e: 'toggle', label: string): void
-}>()
-</script>
-
-<template>
-  <div
-    class="relative"
-    @mouseenter="link.items?.length && emit('open', link.label)"
-    @mouseleave="emit('close')"
-    @focusin="link.items?.length && emit('open', link.label)"
-    @focusout="emit('close')"
-  >
-    <button
-      v-if="link.items?.length"
-      type="button"
-      :class="
-        cn(
-          'group flex cursor-pointer items-center gap-1.5 py-3 text-sm font-bold tracking-wide uppercase transition-colors',
-          link.items.some((item) => currentPath === item.href)
-            ? 'text-primary-comfy-yellow'
-            : 'text-primary-comfy-canvas hover:text-primary-warm-gray'
-        )
-      "
-      aria-haspopup="true"
-      :aria-expanded="isOpen"
-      @click="emit('toggle', link.label)"
-    >
-      {{ link.label }}
-      <span
-        aria-hidden="true"
-        :class="
-          cn(
-            'text-base leading-none transition-colors',
-            link.items.some((item) => currentPath === item.href)
-              ? 'text-primary-comfy-yellow'
-              : 'text-primary-comfy-canvas group-hover:text-primary-warm-gray'
-          )
-        "
-      >
-        ▾
-      </span>
-    </button>
-
-    <a
-      v-else
-      :href="link.href"
-      :aria-current="currentPath === link.href ? 'page' : undefined"
-      :class="
-        cn(
-          'flex items-center gap-1.5 py-3 text-sm font-bold tracking-wide uppercase transition-colors',
-          currentPath === link.href
-            ? 'text-primary-comfy-yellow'
-            : 'text-primary-comfy-canvas hover:text-primary-warm-gray'
-        )
-      "
-    >
-      {{ link.label }}
-    </a>
-
-    <div
-      v-if="link.items?.length"
-      v-show="isOpen"
-      data-testid="nav-dropdown"
-      class="bg-transparency-ink-t80 absolute top-full left-0 w-max rounded-xl p-2 shadow-lg backdrop-blur-2xl backdrop-saturate-150"
-    >
-      <a
-        v-for="item in link.items"
-        :key="item.href"
-        :href="item.href"
-        :aria-current="currentPath === item.href ? 'page' : undefined"
-        :class="
-          cn(
-            'flex items-center gap-2 rounded-sm p-2 text-xs font-medium tracking-wide transition-colors',
-            currentPath === item.href
-              ? 'text-primary-comfy-yellow'
-              : 'text-primary-comfy-canvas hover:bg-transparency-white-t4 hover:text-white'
-          )
-        "
-        @click="emit('close')"
-      >
-        {{ item.label }}
-        <span
-          v-if="item.badge"
-          class="bg-primary-comfy-yellow font-formula-narrow text-primary-comfy-ink -skew-x-12 rounded-sm px-1 py-0.5 text-[9px]/3 leading-none font-bold"
-        >
-          <span class="ppformula-text-center inline-block skew-x-12">{{
-            item.badge
-          }}</span>
-        </span>
-        <img
-          v-if="item.external"
-          src="/icons/arrow-up-right.svg"
-          alt=""
-          class="ml-auto size-4"
-          aria-hidden="true"
-        />
-      </a>
-    </div>
-  </div>
-</template>
diff --git a/apps/website/src/components/common/PillButton.vue b/apps/website/src/components/common/PillButton.vue
deleted file mode 100644
index adfb216203..0000000000
--- a/apps/website/src/components/common/PillButton.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-import type { HTMLAttributes } from 'vue'
-
-import type { PillButtonVariants } from './pillButton.variants'
-import {
-  pillButtonBadgeVariants,
-  pillButtonVariants
-} from './pillButton.variants'
-
-const {
-  href,
-  target,
-  rel,
-  type = 'button',
-  disabled,
-  ariaLabel,
-  variant,
-  size,
-  iconPosition,
-  hideLabel = false,
-  class: customClass = ''
-} = defineProps<{
-  href?: string
-  target?: string
-  rel?: string
-  type?: 'button' | 'submit' | 'reset'
-  disabled?: boolean
-  ariaLabel?: string
-  variant?: PillButtonVariants['variant']
-  size?: PillButtonVariants['size']
-  iconPosition?: PillButtonVariants['iconPosition']
-  hideLabel?: boolean
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <component
-    :is="href ? 'a' : 'button'"
-    :href="href || undefined"
-    :target="href ? target : undefined"
-    :rel="href ? rel : undefined"
-    :type="!href ? type : undefined"
-    :disabled="!href ? disabled : undefined"
-    :aria-label="ariaLabel"
-    :class="
-      cn(pillButtonVariants({ variant, size, iconPosition }), customClass)
-    "
-  >
-    <span
-      :class="
-        cn(
-          'relative leading-none transition-all duration-500',
-          hideLabel && 'opacity-0 group-hover:opacity-100'
-        )
-      "
-    >
-      <slot />
-    </span>
-    <span
-      :class="pillButtonBadgeVariants({ variant, size, iconPosition })"
-      aria-hidden="true"
-    >
-      <span class="inline-flex transition-transform duration-500">
-        <slot name="icon">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-4"
-          >
-            <path d="M7 17 17 7" />
-            <path d="M7 7h10v10" />
-          </svg>
-        </slot>
-      </span>
-    </span>
-  </component>
-</template>
diff --git a/apps/website/src/components/common/SiteNav.vue b/apps/website/src/components/common/SiteNav.vue
deleted file mode 100644
index c65b24e17e..0000000000
--- a/apps/website/src/components/common/SiteNav.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-import {
-  breakpointsTailwind,
-  useBreakpoints,
-  useEventListener,
-  whenever
-} from '@vueuse/core'
-import { nextTick, onMounted, ref } from 'vue'
-
-import type { Locale } from '../../i18n/translations'
-import { t } from '../../i18n/translations'
-import { externalLinks, getRoutes } from '../../config/routes'
-import BrandButton from './BrandButton.vue'
-import GitHubStarBadge from './GitHubStarBadge.vue'
-import MobileMenu from './MobileMenu.vue'
-import NavDesktopLink from './NavDesktopLink.vue'
-import type { NavLink } from './NavDesktopLink.vue'
-
-const { locale = 'en', githubStars = '' } = defineProps<{
-  locale?: Locale
-  githubStars?: string
-}>()
-const routes = getRoutes(locale)
-
-const navLinks: NavLink[] = [
-  {
-    label: t('nav.products', locale),
-    items: [
-      { label: t('nav.comfyLocal', locale), href: routes.download },
-      { label: t('nav.comfyCloud', locale), href: routes.cloud },
-      {
-        label: t('nav.comfyApi', locale),
-        href: routes.api,
-        badge: t('nav.badgeNew', locale)
-      },
-      { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise }
-    ]
-  },
-  { label: t('nav.pricing', locale), href: routes.cloudPricing },
-  {
-    label: t('nav.community', locale),
-    items: [
-      {
-        label: t('nav.comfyHub', locale),
-        href: externalLinks.workflows,
-        badge: t('nav.badgeNew', locale)
-      },
-      { label: t('nav.gallery', locale), href: routes.gallery }
-    ]
-  },
-  {
-    label: t('nav.resources', locale),
-    items: [
-      { label: t('nav.learning', locale), href: routes.learning },
-      {
-        label: t('nav.blogs', locale),
-        href: externalLinks.blog,
-        external: true
-      },
-      {
-        label: t('nav.github', locale),
-        href: externalLinks.github,
-        external: true
-      },
-      {
-        label: t('nav.discord', locale),
-        href: externalLinks.discord,
-        external: true
-      },
-      {
-        label: t('nav.docs', locale),
-        href: externalLinks.docs,
-        external: true
-      },
-      {
-        label: t('nav.youtube', locale),
-        href: externalLinks.youtube,
-        external: true
-      }
-    ]
-  },
-  {
-    label: t('nav.company', locale),
-    items: [
-      { label: t('nav.aboutUs', locale), href: routes.about },
-      { label: t('nav.careers', locale), href: routes.careers },
-      { label: t('nav.customerStories', locale), href: routes.customers }
-    ]
-  }
-]
-
-const ctaButtons = [
-  {
-    label: t('nav.downloadLocal', locale),
-    prefix: 'DOWNLOAD',
-    core: 'DESKTOP',
-    href: routes.download,
-    primary: false
-  },
-  {
-    label: t('nav.launchCloud', locale),
-    prefix: 'LAUNCH',
-    core: 'CLOUD',
-    href: externalLinks.cloud,
-    primary: true
-  }
-]
-
-const currentPath = ref('')
-const openDesktopDropdown = ref<string | null>(null)
-const mobileMenuOpen = ref(false)
-const isNavigating = ref(false)
-const hamburgerRef = ref<HTMLButtonElement | undefined>()
-
-function closeMobileMenu() {
-  mobileMenuOpen.value = false
-  hamburgerRef.value?.focus()
-}
-
-function toggleDesktopDropdown(label: string) {
-  openDesktopDropdown.value = openDesktopDropdown.value === label ? null : label
-}
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') {
-    closeMobileMenu()
-    openDesktopDropdown.value = null
-  }
-}
-
-async function onNavigate() {
-  isNavigating.value = true
-  closeMobileMenu()
-  openDesktopDropdown.value = null
-  currentPath.value = window.location.pathname
-  await nextTick()
-  isNavigating.value = false
-}
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const isDesktop = breakpoints.greaterOrEqual('lg')
-
-whenever(isDesktop, () => {
-  mobileMenuOpen.value = false
-  // Don't focus hamburger when transitioning to desktop — it's hidden
-})
-
-onMounted(() => {
-  currentPath.value = window.location.pathname
-  useEventListener(document, 'keydown', onKeydown)
-  useEventListener(document, 'astro:after-swap', onNavigate)
-})
-</script>
-
-<template>
-  <MobileMenu
-    :open="mobileMenuOpen"
-    :navigating="isNavigating"
-    :links="navLinks"
-    :cta-links="ctaButtons"
-    :locale="locale"
-    @close="closeMobileMenu"
-  />
-
-  <nav
-    class="fixed inset-x-0 top-0 z-50 flex items-center justify-between gap-4 bg-primary-comfy-ink px-6 py-5 lg:gap-4 lg:px-[clamp(0.25rem,4vw,5rem)] lg:py-8"
-    aria-label="Main navigation"
-  >
-    <a
-      :href="routes.home"
-      class="inline-grid h-10 shrink-0 grid-cols-1 grid-rows-1 transition-[width]"
-      aria-label="Comfy home"
-    >
-      <img
-        src="/icons/logomark.svg"
-        alt="Comfy"
-        class="col-span-full row-span-full h-8"
-      />
-      <div
-        class="relative col-span-full row-span-full h-10 w-0 overflow-clip transition-[width] xl:w-36"
-      >
-        <img
-          src="/icons/logo.svg"
-          alt="Comfy"
-          class="absolute top-0 left-0 h-10 w-36 max-w-none object-contain object-left"
-        />
-      </div>
-    </a>
-
-    <!-- Desktop nav links -->
-    <div
-      data-testid="desktop-nav-links"
-      class="hidden items-center gap-[clamp(1rem,2.5vw,2.5rem)] lg:flex"
-    >
-      <NavDesktopLink
-        v-for="link in navLinks"
-        :key="link.label"
-        :link="link"
-        :current-path="currentPath"
-        :is-open="openDesktopDropdown === link.label"
-        @open="openDesktopDropdown = $event"
-        @close="openDesktopDropdown = null"
-        @toggle="toggleDesktopDropdown"
-      />
-    </div>
-
-    <!-- Desktop CTA buttons -->
-    <div
-      data-testid="desktop-nav-cta"
-      class="hidden shrink-0 items-center gap-2 lg:flex"
-    >
-      <GitHubStarBadge v-if="githubStars" :stars="githubStars" />
-      <BrandButton
-        v-for="cta in ctaButtons"
-        :key="cta.href"
-        :href="cta.href"
-        :variant="cta.primary ? 'solid' : 'outline'"
-        size="nav"
-        :aria-label="cta.label"
-      >
-        <span
-          class="inline-block max-w-0 overflow-hidden align-bottom transition-[max-width] duration-300 ease-in-out xl:max-w-28"
-          aria-hidden="true"
-          >{{ cta.prefix }}&nbsp;</span
-        >{{ cta.core }}
-      </BrandButton>
-    </div>
-
-    <!-- Mobile hamburger -->
-    <button
-      ref="hamburgerRef"
-      :class="
-        cn(
-          'flex size-10 items-center justify-center rounded-xl lg:hidden',
-          mobileMenuOpen
-            ? 'border-primary-comfy-yellow border-2 bg-transparent'
-            : 'bg-primary-comfy-yellow'
-        )
-      "
-      :aria-label="t('nav.toggleMenu', locale)"
-      aria-controls="site-mobile-menu"
-      :aria-expanded="mobileMenuOpen"
-      @click="mobileMenuOpen = !mobileMenuOpen"
-    >
-      <img
-        v-if="!mobileMenuOpen"
-        src="/icons/breadthumb.svg"
-        alt=""
-        class="h-3"
-        aria-hidden="true"
-      />
-      <img
-        v-else
-        src="/icons/close.svg"
-        alt=""
-        class="size-5"
-        aria-hidden="true"
-      />
-    </button>
-  </nav>
-</template>
diff --git a/apps/website/src/components/common/badge.variants.ts b/apps/website/src/components/common/badge.variants.ts
deleted file mode 100644
index 6023cc32c6..0000000000
--- a/apps/website/src/components/common/badge.variants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const badgeVariants = cva({
-  base: 'text-primary-warm-gray focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-4 py-1 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
-  variants: {
-    variant: {
-      default: 'bg-transparency-ink-t80',
-      subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas'
-    }
-  },
-  defaultVariants: {
-    variant: 'default'
-  }
-})
-
-export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/apps/website/src/components/common/maskRevealButton.variants.ts b/apps/website/src/components/common/maskRevealButton.variants.ts
deleted file mode 100644
index 9ae2583add..0000000000
--- a/apps/website/src/components/common/maskRevealButton.variants.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const maskRevealButtonVariants = cva({
-  base: 'group relative uppercase inline-flex w-fit cursor-pointer items-center overflow-hidden rounded-lg p-1 font-bold text-nowrap transition-all duration-500 disabled:cursor-not-allowed disabled:opacity-50',
-  variants: {
-    variant: {
-      solid: 'bg-primary-comfy-yellow text-primary-comfy-ink',
-      ghost: 'text-primary-comfy-yellow bg-transparent'
-    },
-    size: {
-      sm: 'h-10 text-xs',
-      md: 'h-12 text-sm',
-      lg: 'h-14 text-base'
-    },
-    iconPosition: {
-      right: '',
-      left: ''
-    }
-  },
-  compoundVariants: [
-    { size: 'sm', iconPosition: 'right', class: 'ps-12 pe-4' },
-    { size: 'md', iconPosition: 'right', class: 'ps-14 pe-6' },
-    { size: 'lg', iconPosition: 'right', class: 'ps-16 pe-8' },
-    { size: 'sm', iconPosition: 'left', class: 'ps-4 pe-12' },
-    { size: 'md', iconPosition: 'left', class: 'ps-6 pe-14' },
-    { size: 'lg', iconPosition: 'left', class: 'ps-8 pe-16' }
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-    iconPosition: 'right'
-  }
-})
-
-export const maskRevealButtonBadgeVariants = cva({
-  base: 'absolute z-10 flex items-center justify-center rounded-lg transition-all duration-500',
-  variants: {
-    variant: {
-      solid: 'bg-primary-comfy-ink text-primary-comfy-yellow',
-      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
-    },
-    size: {
-      sm: 'size-8',
-      md: 'size-10',
-      lg: 'size-12'
-    },
-    iconPosition: {
-      right: '',
-      left: ''
-    }
-  },
-  compoundVariants: [
-    {
-      size: 'sm',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-36px)]'
-    },
-    {
-      size: 'md',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-44px)]'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-52px)]'
-    },
-    {
-      size: 'sm',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-36px)]'
-    },
-    {
-      size: 'md',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-44px)]'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-52px)]'
-    }
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-    iconPosition: 'right'
-  }
-})
-
-export const maskRevealLabelVariants = cva({
-  base: [
-    'relative inline-block align-baseline',
-    '[will-change:mask-size,-webkit-mask-size]',
-    '[mask-image:linear-gradient(black,black)] [-webkit-mask-image:linear-gradient(black,black)]',
-    'mask-no-repeat [-webkit-mask-repeat:no-repeat]',
-    'transition-[mask-size,-webkit-mask-size] duration-500 ease-in-out',
-    'data-[icon-position=right]:[mask-position:100%_0] data-[icon-position=right]:[-webkit-mask-position:100%_0]',
-    'data-[icon-position=left]:[mask-position:0_0] data-[icon-position=left]:[-webkit-mask-position:0_0]',
-    'data-[hidden=true]:[mask-size:0%_100%] data-[hidden=true]:[-webkit-mask-size:0%_100%]',
-    'data-[hidden=false]:[mask-size:100%_100%] data-[hidden=false]:[-webkit-mask-size:100%_100%]',
-    'group-hover:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-hover:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]',
-    'group-focus-visible:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-focus-visible:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]'
-  ].join(' ')
-})
-
-export type MaskRevealButtonVariants = VariantProps<
-  typeof maskRevealButtonVariants
->
diff --git a/apps/website/src/components/common/pillButton.variants.ts b/apps/website/src/components/common/pillButton.variants.ts
deleted file mode 100644
index 33091ff761..0000000000
--- a/apps/website/src/components/common/pillButton.variants.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const pillButtonVariants = cva({
-  base: 'group relative inline-flex w-fit cursor-pointer items-center overflow-hidden rounded-lg p-1 font-bold text-nowrap transition-all duration-500 disabled:cursor-not-allowed disabled:opacity-50',
-  variants: {
-    variant: {
-      solid: 'bg-primary-comfy-yellow text-primary-comfy-ink',
-      ghost: 'text-primary-comfy-yellow bg-transparent'
-    },
-    size: {
-      sm: 'h-10 text-xs',
-      md: 'h-12 text-sm',
-      lg: 'h-14 text-base'
-    },
-    iconPosition: {
-      right: '',
-      left: ''
-    }
-  },
-  compoundVariants: [
-    {
-      size: 'sm',
-      iconPosition: 'right',
-      class: 'ps-4 pe-12 hover:ps-12 hover:pe-4'
-    },
-    {
-      size: 'md',
-      iconPosition: 'right',
-      class: 'ps-6 pe-14 hover:ps-14 hover:pe-6'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'right',
-      class: 'ps-8 pe-16 hover:ps-16 hover:pe-8'
-    },
-    {
-      size: 'sm',
-      iconPosition: 'left',
-      class: 'ps-12 pe-4 hover:ps-4 hover:pe-12'
-    },
-    {
-      size: 'md',
-      iconPosition: 'left',
-      class: 'ps-14 pe-6 hover:ps-6 hover:pe-14'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'left',
-      class: 'ps-16 pe-8 hover:ps-8 hover:pe-16'
-    }
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-    iconPosition: 'right'
-  }
-})
-
-export const pillButtonBadgeVariants = cva({
-  base: 'absolute z-10 flex items-center justify-center rounded-lg transition-all duration-500',
-  variants: {
-    variant: {
-      solid: 'bg-primary-comfy-ink text-primary-comfy-yellow',
-      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
-    },
-    size: {
-      sm: 'size-8',
-      md: 'size-10',
-      lg: 'size-12'
-    },
-    iconPosition: {
-      right: '',
-      left: ''
-    }
-  },
-  compoundVariants: [
-    {
-      size: 'sm',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-36px)]'
-    },
-    {
-      size: 'md',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-44px)]'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-52px)]'
-    },
-    {
-      size: 'sm',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-36px)]'
-    },
-    {
-      size: 'md',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-44px)]'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-52px)]'
-    }
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-    iconPosition: 'right'
-  }
-})
-
-export type PillButtonVariants = VariantProps<typeof pillButtonVariants>
diff --git a/apps/website/src/components/customers/HeroSection.vue b/apps/website/src/components/customers/HeroSection.vue
index 5ff5903d3c..e5c3a873c8 100644
--- a/apps/website/src/components/customers/HeroSection.vue
+++ b/apps/website/src/components/customers/HeroSection.vue
@@ -58,13 +58,13 @@ function handleLogoLoad() {
         </SectionLabel>
         <h1
           ref="headingRef"
-          class="text-primary-comfy-canvas mt-4 text-4xl/tight font-light lg:text-6xl"
+          class="mt-4 text-4xl/tight font-light text-primary-comfy-canvas lg:text-6xl"
         >
           {{ t('customers.hero.heading', locale) }}
         </h1>
         <p
           ref="bodyRef"
-          class="text-primary-comfy-canvas mt-6 max-w-lg text-base"
+          class="mt-6 max-w-lg text-base text-primary-comfy-canvas"
         >
           {{ t('customers.hero.body', locale) }}
         </p>
@@ -72,7 +72,12 @@ function handleLogoLoad() {
     </div>
 
     <!-- Video -->
-    <div ref="videoRef" class="max-w-9xl mx-auto px-4 pb-20 lg:px-20 lg:pb-40">
+
+    <div
+      id="hero-video"
+      ref="videoRef"
+      class="max-w-9xl mx-auto scroll-mt-24 px-4 pb-20 lg:scroll-mt-36 lg:px-20 lg:pb-40"
+    >
       <VideoPlayer
         src="https://media.comfy.org/website/customers/blackmath/video.webm"
         poster="https://media.comfy.org/website/customers/blackmath/poster.webp"
diff --git a/apps/website/src/components/customers/StorySection.vue b/apps/website/src/components/customers/StorySection.vue
index cc644e9f5f..236bd37190 100644
--- a/apps/website/src/components/customers/StorySection.vue
+++ b/apps/website/src/components/customers/StorySection.vue
@@ -35,7 +35,7 @@ const prefix = locale === 'zh-CN' ? '/zh-CN' : ''
             {{ t(story.category, locale) }}
           </span>
           <h3
-            class="text-primary-comfy-canvas mt-2 text-lg/snug font-light lg:text-xl/snug"
+            class="mt-2 text-lg/snug font-light text-primary-comfy-canvas lg:text-xl/snug"
           >
             {{ t(story.title, locale) }}
           </h3>
diff --git a/apps/website/src/components/customers/WhatsNextSection.vue b/apps/website/src/components/customers/WhatsNextSection.vue
index 66710f0350..74e99bd1cd 100644
--- a/apps/website/src/components/customers/WhatsNextSection.vue
+++ b/apps/website/src/components/customers/WhatsNextSection.vue
@@ -19,7 +19,7 @@ const {
 
 <template>
   <section class="px-4 py-16 lg:px-20 lg:py-24">
-    <h2 class="text-primary-comfy-canvas mb-10 text-2xl font-light lg:text-3xl">
+    <h2 class="mb-10 text-2xl font-light text-primary-comfy-canvas lg:text-3xl">
       {{ t('customers.story.whatsNext' as TranslationKey, locale) }}
     </h2>
 
@@ -35,18 +35,18 @@ const {
       </a>
 
       <div class="flex flex-col gap-6">
-        <h3 class="text-primary-comfy-canvas text-xl font-light lg:text-2xl">
+        <h3 class="text-xl font-light text-primary-comfy-canvas lg:text-2xl">
           {{ title }}
         </h3>
 
         <a :href="href" class="flex items-center gap-3">
           <span
-            class="bg-primary-comfy-yellow text-primary-comfy-ink flex size-10 items-center justify-center rounded-full"
+            class="bg-primary-comfy-yellow flex size-10 items-center justify-center rounded-full text-primary-comfy-ink"
           >
             <span class="text-lg font-bold">›</span>
           </span>
           <span
-            class="text-primary-comfy-canvas ppformula-text-center text-sm font-semibold tracking-wider uppercase"
+            class="ppformula-text-center text-sm font-semibold tracking-wider text-primary-comfy-canvas uppercase"
           >
             {{ t('customers.story.viewArticle' as TranslationKey, locale) }}
           </span>
diff --git a/apps/website/src/components/demos/DemoNavSection.vue b/apps/website/src/components/demos/DemoNavSection.vue
index 14ff5c8e22..790234cff4 100644
--- a/apps/website/src/components/demos/DemoNavSection.vue
+++ b/apps/website/src/components/demos/DemoNavSection.vue
@@ -21,7 +21,7 @@ const nextHref = `${localePrefix}/demos/${nextSlug}`
 
 <template>
   <section class="px-4 py-16 lg:px-20 lg:py-24">
-    <h2 class="text-primary-comfy-canvas mb-10 text-2xl font-light lg:text-3xl">
+    <h2 class="mb-10 text-2xl font-light text-primary-comfy-canvas lg:text-3xl">
       {{ t('demos.nav.nextDemo' as TranslationKey, locale) }}
     </h2>
 
@@ -37,18 +37,18 @@ const nextHref = `${localePrefix}/demos/${nextSlug}`
       </a>
 
       <div class="flex flex-col gap-6">
-        <h3 class="text-primary-comfy-canvas text-xl font-light lg:text-2xl">
+        <h3 class="text-xl font-light text-primary-comfy-canvas lg:text-2xl">
           {{ nextTitle }}
         </h3>
 
         <a :href="nextHref" class="flex items-center gap-3">
           <span
-            class="bg-primary-comfy-yellow text-primary-comfy-ink flex size-10 items-center justify-center rounded-full"
+            class="bg-primary-comfy-yellow flex size-10 items-center justify-center rounded-full text-primary-comfy-ink"
           >
             <span class="text-lg font-bold">›</span>
           </span>
           <span
-            class="text-primary-comfy-canvas ppformula-text-center text-sm font-semibold tracking-wider uppercase"
+            class="ppformula-text-center text-sm font-semibold tracking-wider text-primary-comfy-canvas uppercase"
           >
             {{ t('demos.nav.viewDemo' as TranslationKey, locale) }}
           </span>
diff --git a/apps/website/src/components/icons/BreadthumbIcon.vue b/apps/website/src/components/icons/BreadthumbIcon.vue
new file mode 100644
index 0000000000..7c01693679
--- /dev/null
+++ b/apps/website/src/components/icons/BreadthumbIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 12"
+    fill="none"
+    aria-hidden="true"
+    :class="$props.class"
+  >
+    <path
+      d="M20 1C20 1.55228 19.5523 2 19 2H17.5C16.6716 2 16 2.67157 16 3.5C16 4.32843 16.6716 5 17.5 5H19C19.5523 5 20 5.44772 20 6C20 6.55228 19.5523 7 19 7H7.5C6.67157 7 6 7.67157 6 8.5C6 9.32843 6.67157 10 7.5 10H19C19.5523 10 20 10.4477 20 11C20 11.5523 19.5523 12 19 12H1C0.447715 12 0 11.5523 0 11C0 10.4477 0.447715 10 1 10H2.5C3.32843 10 4 9.32843 4 8.5C4 7.67157 3.32843 7 2.5 7H1C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5H12.5C13.3284 5 14 4.32843 14 3.5C14 2.67157 13.3284 2 12.5 2H1C0.447716 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H19C19.5523 0 20 0.447715 20 1Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/apps/website/src/components/learning/FeaturedWorkflowSection.vue b/apps/website/src/components/learning/FeaturedWorkflowSection.vue
index 4f6abb5363..e6cc60410a 100644
--- a/apps/website/src/components/learning/FeaturedWorkflowSection.vue
+++ b/apps/website/src/components/learning/FeaturedWorkflowSection.vue
@@ -2,7 +2,7 @@
 import type { Locale } from '../../i18n/translations'
 
 import { t } from '../../i18n/translations'
-import Badge from '../common/Badge.vue'
+import Badge from '../ui/badge/Badge.vue'
 import BrandButton from '../common/BrandButton.vue'
 import VideoPlayer from '../common/VideoPlayer.vue'
 
diff --git a/apps/website/src/components/learning/TutorialsSection.vue b/apps/website/src/components/learning/TutorialsSection.vue
index 5270e48693..cbf8fa9999 100644
--- a/apps/website/src/components/learning/TutorialsSection.vue
+++ b/apps/website/src/components/learning/TutorialsSection.vue
@@ -8,8 +8,8 @@ import {
   learningTutorials
 } from '../../data/learningTutorials'
 import { t } from '../../i18n/translations'
-import Badge from '../common/Badge.vue'
-import MaskRevealButton from '../common/MaskRevealButton.vue'
+import Badge from '../ui/badge/Badge.vue'
+import { ButtonMask } from '../ui/button-mask'
 import TutorialDetailDialog from './TutorialDetailDialog.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
@@ -76,13 +76,14 @@ const activeTutorial = () =>
               {{ t('learning.tutorials.titlePrefix', locale) }}<br />
               {{ tutorial.title[locale] }}
             </h3>
-            <MaskRevealButton
+            <ButtonMask
               v-if="tutorial.href"
+              as="a"
               :href="tutorial.href"
               icon-position="right"
               class="shrink-0"
               variant="ghost"
-              size="sm"
+              size="default"
             >
               {{ t('cta.tryWorkflow', locale) }}
               <template #icon>
@@ -98,7 +99,7 @@ const activeTutorial = () =>
                   <polyline points="9 6 15 12 9 18" />
                 </svg>
               </template>
-            </MaskRevealButton>
+            </ButtonMask>
           </div>
 
           <ul class="flex flex-wrap gap-2">
diff --git a/apps/website/src/components/ui/badge/Badge.vue b/apps/website/src/components/ui/badge/Badge.vue
new file mode 100644
index 0000000000..23671f0db6
--- /dev/null
+++ b/apps/website/src/components/ui/badge/Badge.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { BadgeVariants } from '.'
+import { badgeVariants } from '.'
+
+const {
+  variant,
+  size,
+  class: className,
+  prependIcon,
+  appendIcon
+} = defineProps<{
+  variant?: BadgeVariants['variant']
+  size?: BadgeVariants['size']
+  class?: string
+  prependIcon?: Component
+  appendIcon?: Component
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="badge"
+    :data-variant="variant"
+    :data-size="size"
+    :class="cn(badgeVariants({ variant, size }), className)"
+  >
+    <slot name="prepend">
+      <component :is="prependIcon" v-if="prependIcon" />
+    </slot>
+    <span class="ppformula-text-center">
+      <slot />
+    </span>
+    <slot name="append">
+      <component :is="appendIcon" v-if="appendIcon" />
+    </slot>
+  </span>
+</template>
diff --git a/apps/website/src/components/ui/badge/index.ts b/apps/website/src/components/ui/badge/index.ts
new file mode 100644
index 0000000000..9409498153
--- /dev/null
+++ b/apps/website/src/components/ui/badge/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const badgeVariants = cva({
+  base: 'text-primary-warm-gray font-formula leading-none focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+  variants: {
+    variant: {
+      default: 'bg-transparency-ink-t80',
+      subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas',
+      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'
+    },
+    size: {
+      md: 'px-4 py-1 text-xs',
+      xs: 'px-2 py-0.5 text-[9px]'
+    }
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'default'
+  }
+})
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/apps/website/src/components/common/MaskRevealButton.stories.ts b/apps/website/src/components/ui/button-mask/ButtonMask.stories.ts
similarity index 51%
rename from apps/website/src/components/common/MaskRevealButton.stories.ts
rename to apps/website/src/components/ui/button-mask/ButtonMask.stories.ts
index a03002b8ed..95a2870bbc 100644
--- a/apps/website/src/components/common/MaskRevealButton.stories.ts
+++ b/apps/website/src/components/ui/button-mask/ButtonMask.stories.ts
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import MaskRevealButton from './MaskRevealButton.vue'
+import ButtonMask from './ButtonMask.vue'
 
-const meta: Meta<typeof MaskRevealButton> = {
-  title: 'Website/Common/MaskRevealButton',
-  component: MaskRevealButton,
+const meta: Meta<typeof ButtonMask> = {
+  title: 'Website/UI/ButtonMask',
+  component: ButtonMask,
   tags: ['autodocs'],
   decorators: [
     () => ({
@@ -12,22 +12,19 @@ const meta: Meta<typeof MaskRevealButton> = {
     })
   ],
   argTypes: {
-    href: { control: 'text' },
-    target: { control: 'text' },
-    rel: { control: 'text' },
-    type: {
+    as: {
       control: { type: 'select' },
-      options: ['button', 'submit', 'reset']
+      options: ['button', 'a']
     },
+    asChild: { control: 'boolean' },
     disabled: { control: 'boolean' },
-    ariaLabel: { control: 'text' },
     variant: {
       control: { type: 'select' },
       options: ['solid', 'ghost']
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg']
+      options: ['default', 'lg', 'icon']
     },
     iconPosition: {
       control: { type: 'select' },
@@ -41,57 +38,57 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: { href: '#' },
+  args: { as: 'a', href: '#' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: `<MaskRevealButton v-bind="args">Try Workflow</MaskRevealButton>`
+    template: `<ButtonMask v-bind="args">Try Workflow</ButtonMask>`
   })
 }
 
 export const Ghost: Story = {
-  args: { href: '#', variant: 'ghost' },
+  args: { as: 'a', href: '#', variant: 'ghost' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Read More</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Read More</ButtonMask>'
   })
 }
 
 export const IconLeft: Story = {
-  args: { href: '#', iconPosition: 'left' },
+  args: { as: 'a', href: '#', iconPosition: 'left' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Go Back</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Go Back</ButtonMask>'
   })
 }
 
-export const SmallSolid: Story = {
-  args: { href: '#', size: 'sm' },
+export const DefaultSolid: Story = {
+  args: { as: 'a', href: '#', size: 'default' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Try Workflow</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Try Workflow</ButtonMask>'
   })
 }
 
 export const LargeSolid: Story = {
-  args: { href: '#', size: 'lg' },
+  args: { as: 'a', href: '#', size: 'lg' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: `<MaskRevealButton v-bind="args">Let's Collaborate</MaskRevealButton>`
+    template: `<ButtonMask v-bind="args">Let's Collaborate</ButtonMask>`
   })
 }
 
 export const WithCustomIcon: Story = {
-  args: { href: '#' },
+  args: { as: 'a', href: '#' },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
     template: `
-      <MaskRevealButton v-bind="args">
+      <ButtonMask v-bind="args">
         Next Step
         <template #icon>
           <svg
@@ -106,57 +103,53 @@ export const WithCustomIcon: Story = {
             <polyline points="9 6 15 12 9 18" />
           </svg>
         </template>
-      </MaskRevealButton>
+      </ButtonMask>
     `
   })
 }
 
 export const LabelVisible: Story = {
-  args: { href: '#', hideLabel: false },
+  args: { as: 'a', href: '#', hideLabel: false },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template:
-      '<MaskRevealButton v-bind="args">Always Visible</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Always Visible</ButtonMask>'
   })
 }
 
 export const Disabled: Story = {
   args: { disabled: true },
   render: (args) => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Unavailable</MaskRevealButton>'
+    template: '<ButtonMask v-bind="args">Unavailable</ButtonMask>'
   })
 }
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { MaskRevealButton },
+    components: { ButtonMask },
     template: `
       <div class="flex flex-col gap-8">
         <div class="flex flex-col gap-3">
           <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Solid</span>
           <div class="flex flex-wrap items-center gap-4">
-            <MaskRevealButton href="#" variant="solid" size="sm">Small</MaskRevealButton>
-            <MaskRevealButton href="#" variant="solid" size="md">Medium</MaskRevealButton>
-            <MaskRevealButton href="#" variant="solid" size="lg">Large</MaskRevealButton>
+            <ButtonMask as="a" href="#" variant="solid" size="default">Default</ButtonMask>
+            <ButtonMask as="a" href="#" variant="solid" size="lg">Large</ButtonMask>
           </div>
         </div>
         <div class="flex flex-col gap-3">
           <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Ghost</span>
           <div class="flex flex-wrap items-center gap-4">
-            <MaskRevealButton href="#" variant="ghost" size="sm">Small</MaskRevealButton>
-            <MaskRevealButton href="#" variant="ghost" size="md">Medium</MaskRevealButton>
-            <MaskRevealButton href="#" variant="ghost" size="lg">Large</MaskRevealButton>
+            <ButtonMask as="a" href="#" variant="ghost" size="default">Default</ButtonMask>
+            <ButtonMask as="a" href="#" variant="ghost" size="lg">Large</ButtonMask>
           </div>
         </div>
         <div class="flex flex-col gap-3">
           <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Icon Left</span>
           <div class="flex flex-wrap items-center gap-4">
-            <MaskRevealButton href="#" iconPosition="left" size="sm">Small</MaskRevealButton>
-            <MaskRevealButton href="#" iconPosition="left" size="md">Medium</MaskRevealButton>
-            <MaskRevealButton href="#" iconPosition="left" size="lg">Large</MaskRevealButton>
+            <ButtonMask as="a" href="#" iconPosition="left" size="default">Default</ButtonMask>
+            <ButtonMask as="a" href="#" iconPosition="left" size="lg">Large</ButtonMask>
           </div>
         </div>
       </div>
diff --git a/apps/website/src/components/ui/button-mask/ButtonMask.vue b/apps/website/src/components/ui/button-mask/ButtonMask.vue
new file mode 100644
index 0000000000..566454db26
--- /dev/null
+++ b/apps/website/src/components/ui/button-mask/ButtonMask.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { ChevronRight } from '@lucide/vue'
+import { Primitive } from 'reka-ui'
+import type { PrimitiveProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+
+import type { ButtonMaskVariants } from '.'
+import {
+  BUTTON_MASK_LABEL_CLASS,
+  buttonMaskBadgeVariants,
+  buttonMaskVariants
+} from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonMaskVariants['variant']
+  size?: ButtonMaskVariants['size']
+  iconPosition?: ButtonMaskVariants['iconPosition']
+  hideLabel?: boolean
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+}
+
+const {
+  as = 'button',
+  asChild,
+  variant,
+  size,
+  iconPosition,
+  hideLabel = true,
+  class: className,
+  disabled
+} = defineProps<Props>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="button-mask"
+    :data-variant="variant"
+    :data-size="size"
+    :as
+    :as-child
+    :disabled
+    :class="cn(buttonMaskVariants({ variant, size, iconPosition }), className)"
+  >
+    <span
+      :data-icon-position="iconPosition ?? 'right'"
+      :data-hidden="hideLabel ? 'true' : 'false'"
+      :class="BUTTON_MASK_LABEL_CLASS"
+    >
+      <slot />
+    </span>
+    <span
+      :class="buttonMaskBadgeVariants({ variant, size, iconPosition })"
+      aria-hidden="true"
+    >
+      <span class="inline-flex transition-transform duration-500">
+        <slot name="icon">
+          <ChevronRight class="size-4" :stroke-width="2" />
+        </slot>
+      </span>
+    </span>
+  </Primitive>
+</template>
diff --git a/apps/website/src/components/ui/button-mask/index.ts b/apps/website/src/components/ui/button-mask/index.ts
new file mode 100644
index 0000000000..dc9cc36806
--- /dev/null
+++ b/apps/website/src/components/ui/button-mask/index.ts
@@ -0,0 +1,94 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export { default as ButtonMask } from './ButtonMask.vue'
+
+export const buttonMaskVariants = cva({
+  base: 'group/button-mask relative inline-flex w-fit uppercase cursor-pointer items-center overflow-hidden rounded-2xl p-1 text-sm font-bold tracking-wider text-nowrap transition-all duration-500 disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    variant: {
+      solid: 'bg-primary-comfy-yellow text-primary-comfy-ink',
+      ghost: 'text-primary-comfy-yellow bg-transparent'
+    },
+    size: {
+      default: 'h-10 px-6 py-2.5 has-[>svg]:px-3',
+      lg: 'h-14 px-8 py-4 has-[>svg]:px-5'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    { size: 'default', iconPosition: 'right', class: 'ps-12 pe-4' },
+    { size: 'lg', iconPosition: 'right', class: 'ps-16 pe-8' },
+    { size: 'default', iconPosition: 'left', class: 'ps-4 pe-12' },
+    { size: 'lg', iconPosition: 'left', class: 'ps-8 pe-16' }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'default',
+    iconPosition: 'right'
+  }
+})
+
+export const buttonMaskBadgeVariants = cva({
+  base: 'absolute z-10 flex items-center justify-center rounded-xl transition-all duration-500',
+  variants: {
+    variant: {
+      solid: 'text-primary-comfy-yellow bg-primary-comfy-ink',
+      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
+    },
+    size: {
+      default: 'size-8',
+      lg: 'size-12'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'default',
+      iconPosition: 'right',
+      class: 'right-1 group-hover/button-mask:right-[calc(100%-36px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'right',
+      class: 'right-1 group-hover/button-mask:right-[calc(100%-52px)]'
+    },
+    {
+      size: 'default',
+      iconPosition: 'left',
+      class: 'left-1 group-hover/button-mask:left-[calc(100%-36px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'left',
+      class: 'left-1 group-hover/button-mask:left-[calc(100%-52px)]'
+    }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'default',
+    iconPosition: 'right'
+  }
+})
+
+export const BUTTON_MASK_LABEL_CLASS = [
+  'ppformula-text-center relative inline-block align-baseline',
+  '[will-change:mask-size,-webkit-mask-size]',
+  '[mask-image:linear-gradient(black,black)] [-webkit-mask-image:linear-gradient(black,black)]',
+  'mask-no-repeat [-webkit-mask-repeat:no-repeat]',
+  'transition-[mask-size,-webkit-mask-size] duration-500 ease-in-out',
+  'data-[icon-position=right]:[mask-position:100%_0] data-[icon-position=right]:[-webkit-mask-position:100%_0]',
+  'data-[icon-position=left]:[mask-position:0_0] data-[icon-position=left]:[-webkit-mask-position:0_0]',
+  'data-[hidden=true]:[mask-size:0%_100%] data-[hidden=true]:[-webkit-mask-size:0%_100%]',
+  'data-[hidden=false]:[mask-size:100%_100%] data-[hidden=false]:[-webkit-mask-size:100%_100%]',
+  'group-hover/button-mask:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-hover/button-mask:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]',
+  'group-focus-visible/button-mask:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-focus-visible/button-mask:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]'
+].join(' ')
+
+export type ButtonMaskVariants = VariantProps<typeof buttonMaskVariants>
diff --git a/apps/website/src/components/common/PillButton.stories.ts b/apps/website/src/components/ui/button-pill/ButtonPill.stories.ts
similarity index 54%
rename from apps/website/src/components/common/PillButton.stories.ts
rename to apps/website/src/components/ui/button-pill/ButtonPill.stories.ts
index c6971759fe..dbe7884d67 100644
--- a/apps/website/src/components/common/PillButton.stories.ts
+++ b/apps/website/src/components/ui/button-pill/ButtonPill.stories.ts
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import PillButton from './PillButton.vue'
+import ButtonPill from './ButtonPill.vue'
 
-const meta: Meta<typeof PillButton> = {
-  title: 'Website/Common/PillButton',
-  component: PillButton,
+const meta: Meta<typeof ButtonPill> = {
+  title: 'Website/UI/ButtonPill',
+  component: ButtonPill,
   tags: ['autodocs'],
   decorators: [
     () => ({
@@ -12,22 +12,19 @@ const meta: Meta<typeof PillButton> = {
     })
   ],
   argTypes: {
-    href: { control: 'text' },
-    target: { control: 'text' },
-    rel: { control: 'text' },
-    type: {
+    as: {
       control: { type: 'select' },
-      options: ['button', 'submit', 'reset']
+      options: ['button', 'a']
     },
+    asChild: { control: 'boolean' },
     disabled: { control: 'boolean' },
-    ariaLabel: { control: 'text' },
     variant: {
       control: { type: 'select' },
       options: ['solid', 'ghost']
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg']
+      options: ['default', 'lg', 'icon']
     },
     iconPosition: {
       control: { type: 'select' },
@@ -41,57 +38,57 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const AsAnchor: Story = {
-  args: { href: '#' },
+  args: { as: 'a', href: '#' },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
-    template: `<PillButton v-bind="args">Let's Collaborate</PillButton>`
+    template: `<ButtonPill v-bind="args">Let's Collaborate</ButtonPill>`
   })
 }
 
 export const AsButton: Story = {
-  args: { type: 'button' },
+  args: { as: 'button', type: 'button' },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Submit</PillButton>'
+    template: '<ButtonPill v-bind="args">Submit</ButtonPill>'
   })
 }
 
 export const Ghost: Story = {
-  args: { href: '#', variant: 'ghost' },
+  args: { as: 'a', href: '#', variant: 'ghost' },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Read More</PillButton>'
+    template: '<ButtonPill v-bind="args">Read More</ButtonPill>'
   })
 }
 
-export const SmallSolid: Story = {
-  args: { href: '#', size: 'sm' },
+export const DefaultSolid: Story = {
+  args: { as: 'a', href: '#', size: 'default' },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Try Workflow</PillButton>'
+    template: '<ButtonPill v-bind="args">Try Workflow</ButtonPill>'
   })
 }
 
 export const LargeSolid: Story = {
-  args: { href: '#', size: 'lg' },
+  args: { as: 'a', href: '#', size: 'lg' },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
-    template: `<PillButton v-bind="args">Let's Collaborate</PillButton>`
+    template: `<ButtonPill v-bind="args">Let's Collaborate</ButtonPill>`
   })
 }
 
 export const WithCustomIcon: Story = {
-  args: { href: '#' },
+  args: { as: 'a', href: '#' },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
     template: `
-      <PillButton v-bind="args">
+      <ButtonPill v-bind="args">
         Next Step
         <template #icon>
           <svg
@@ -106,57 +103,55 @@ export const WithCustomIcon: Story = {
             <polyline points="9 6 15 12 9 18" />
           </svg>
         </template>
-      </PillButton>
+      </ButtonPill>
     `
   })
 }
 
 export const IconLeft: Story = {
-  args: { href: '#', iconPosition: 'left' },
+  args: { as: 'a', href: '#', iconPosition: 'left' },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Go Back</PillButton>'
+    template: '<ButtonPill v-bind="args">Go Back</ButtonPill>'
   })
 }
 
 export const RevealLabelOnHover: Story = {
-  args: { href: '#', hideLabel: true },
+  args: { as: 'a', href: '#', hideLabel: true },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Try Workflow</PillButton>'
+    template: '<ButtonPill v-bind="args">Try Workflow</ButtonPill>'
   })
 }
 
 export const Disabled: Story = {
   args: { disabled: true },
   render: (args) => ({
-    components: { PillButton },
+    components: { ButtonPill },
     setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Unavailable</PillButton>'
+    template: '<ButtonPill v-bind="args">Unavailable</ButtonPill>'
   })
 }
 
 export const AllVariants: Story = {
   render: () => ({
-    components: { PillButton },
+    components: { ButtonPill },
     template: `
       <div class="flex flex-col gap-8">
         <div class="flex flex-col gap-3">
           <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Solid</span>
           <div class="flex flex-wrap items-center gap-4">
-            <PillButton href="#" variant="solid" size="sm">Small</PillButton>
-            <PillButton href="#" variant="solid" size="md">Medium</PillButton>
-            <PillButton href="#" variant="solid" size="lg">Large</PillButton>
+            <ButtonPill as="a" href="#" variant="solid" size="default">Default</ButtonPill>
+            <ButtonPill as="a" href="#" variant="solid" size="lg">Large</ButtonPill>
           </div>
         </div>
         <div class="flex flex-col gap-3">
           <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Ghost</span>
           <div class="flex flex-wrap items-center gap-4">
-            <PillButton href="#" variant="ghost" size="sm">Small</PillButton>
-            <PillButton href="#" variant="ghost" size="md">Medium</PillButton>
-            <PillButton href="#" variant="ghost" size="lg">Large</PillButton>
+            <ButtonPill as="a" href="#" variant="ghost" size="default">Default</ButtonPill>
+            <ButtonPill as="a" href="#" variant="ghost" size="lg">Large</ButtonPill>
           </div>
         </div>
       </div>
diff --git a/apps/website/src/components/ui/button-pill/ButtonPill.vue b/apps/website/src/components/ui/button-pill/ButtonPill.vue
new file mode 100644
index 0000000000..88cc5212aa
--- /dev/null
+++ b/apps/website/src/components/ui/button-pill/ButtonPill.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { ChevronRight } from '@lucide/vue'
+import { Primitive } from 'reka-ui'
+import type { PrimitiveProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+
+import type { ButtonPillVariants } from '.'
+import { buttonPillBadgeVariants, buttonPillVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonPillVariants['variant']
+  size?: ButtonPillVariants['size']
+  iconPosition?: ButtonPillVariants['iconPosition']
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+}
+
+const {
+  as = 'button',
+  asChild,
+  variant,
+  size,
+  iconPosition,
+  class: className,
+  disabled
+} = defineProps<Props>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="button-pill"
+    :data-variant="variant"
+    :data-size="size"
+    :as
+    :as-child
+    :disabled
+    :class="cn(buttonPillVariants({ variant, size, iconPosition }), className)"
+  >
+    <span
+      :class="
+        cn(
+          'ppformula-text-center relative leading-none transition-all duration-500'
+        )
+      "
+    >
+      <slot />
+    </span>
+    <span
+      :class="buttonPillBadgeVariants({ variant, size, iconPosition })"
+      aria-hidden="true"
+    >
+      <span class="inline-flex transition-transform duration-500">
+        <slot name="icon">
+          <ChevronRight class="size-4" :stroke-width="2" />
+        </slot>
+      </span>
+    </span>
+  </Primitive>
+</template>
diff --git a/apps/website/src/components/ui/button-pill/index.ts b/apps/website/src/components/ui/button-pill/index.ts
new file mode 100644
index 0000000000..910f228449
--- /dev/null
+++ b/apps/website/src/components/ui/button-pill/index.ts
@@ -0,0 +1,102 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const buttonPillVariants = cva({
+  base: 'group/button-pill isolate relative inline-flex w-fit uppercase cursor-pointer items-center overflow-hidden rounded-2xl p-1 text-sm font-bold tracking-wider text-nowrap transition-all duration-500 disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    variant: {
+      solid: 'bg-primary-comfy-yellow text-primary-comfy-ink',
+      ghost: 'text-primary-comfy-yellow bg-transparent'
+    },
+    size: {
+      default: 'h-10 px-6 py-2.5 has-[>svg]:px-3',
+      lg: 'h-14 px-8 py-4 has-[>svg]:px-5'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'default',
+      iconPosition: 'right',
+      class:
+        'ps-6 pe-14 group-hover/pill-trigger:ps-14 group-hover/pill-trigger:pe-6 hover:ps-14 hover:pe-6'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'right',
+      class:
+        'ps-8 pe-16 group-hover/pill-trigger:ps-16 group-hover/pill-trigger:pe-8 hover:ps-16 hover:pe-8'
+    },
+    {
+      size: 'default',
+      iconPosition: 'left',
+      class:
+        'ps-14 pe-6 group-hover/pill-trigger:ps-6 group-hover/pill-trigger:pe-14 hover:ps-6 hover:pe-14'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'left',
+      class:
+        'ps-16 pe-8 group-hover/pill-trigger:ps-8 group-hover/pill-trigger:pe-16 hover:ps-8 hover:pe-16'
+    }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'default',
+    iconPosition: 'right'
+  }
+})
+
+export const buttonPillBadgeVariants = cva({
+  base: 'absolute z-10 flex items-center justify-center rounded-xl transition-all duration-500',
+  variants: {
+    variant: {
+      solid: 'text-primary-comfy-yellow bg-primary-comfy-ink',
+      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
+    },
+    size: {
+      default: 'size-8',
+      lg: 'size-12'
+    },
+    iconPosition: {
+      right: '',
+      left: ''
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'default',
+      iconPosition: 'right',
+      class:
+        'right-1 group-hover/button-pill:right-[calc(100%-36px)] group-hover/pill-trigger:right-[calc(100%-36px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'right',
+      class:
+        'right-1 group-hover/button-pill:right-[calc(100%-52px)] group-hover/pill-trigger:right-[calc(100%-52px)]'
+    },
+    {
+      size: 'default',
+      iconPosition: 'left',
+      class:
+        'left-1 group-hover/button-pill:left-[calc(100%-36px)] group-hover/pill-trigger:left-[calc(100%-36px)]'
+    },
+    {
+      size: 'lg',
+      iconPosition: 'left',
+      class:
+        'left-1 group-hover/button-pill:left-[calc(100%-52px)] group-hover/pill-trigger:left-[calc(100%-52px)]'
+    }
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    size: 'default',
+    iconPosition: 'right'
+  }
+})
+
+export type ButtonPillVariants = VariantProps<typeof buttonPillVariants>
diff --git a/apps/website/src/components/ui/button/Button.vue b/apps/website/src/components/ui/button/Button.vue
new file mode 100644
index 0000000000..52be21d0a5
--- /dev/null
+++ b/apps/website/src/components/ui/button/Button.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { Component, HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '@comfyorg/tailwind-utils'
+import { buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+  prependIcon?: Component
+  appendIcon?: Component
+}
+
+const {
+  as = 'button',
+  asChild,
+  variant,
+  size,
+  class: className,
+  disabled,
+  prependIcon,
+  appendIcon
+} = defineProps<Props>()
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as
+    :as-child
+    :disabled
+    :class="cn(buttonVariants({ variant, size }), className)"
+  >
+    <slot name="prepend">
+      <component :is="prependIcon" v-if="prependIcon" />
+    </slot>
+    <span class="ppformula-text-center">
+      <slot />
+    </span>
+    <slot name="append">
+      <component :is="appendIcon" v-if="appendIcon" />
+    </slot>
+  </Primitive>
+</template>
diff --git a/apps/website/src/components/ui/button/index.ts b/apps/website/src/components/ui/button/index.ts
new file mode 100644
index 0000000000..ece57585f5
--- /dev/null
+++ b/apps/website/src/components/ui/button/index.ts
@@ -0,0 +1,31 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export const buttonVariants = cva(
+  [
+    "focus-visible:border-primary-comfy-yellow focus-visible:ring-primary-comfy-yellow/50 aria-invalid:bg-destructive aria-invalid:hover:bg-destructive/90 inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-2xl text-sm font-bold tracking-wider whitespace-nowrap transition-all duration-200 outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {
+      size: {
+        default: 'h-10 px-6 py-2.5',
+        lg: 'h-14 px-8 py-4 text-base'
+      },
+      variant: {
+        default:
+          'bg-primary-comfy-yellow hover:bg-primary-comfy-yellow/90 text-primary-comfy-ink uppercase',
+        outline:
+          'text-primary-comfy-yellow hover:bg-primary-comfy-yellow border uppercase hover:text-primary-comfy-ink',
+        link: "text-primary-comfy-yellow h-auto justify-start px-0 py-1 text-base uppercase hover:opacity-90 [&_svg:not([class*='size-'])]:size-6",
+        nav: 'text-primary-warm-white hover:text-primary-comfy-yellow h-auto justify-between px-0 py-1 text-start text-2xl font-medium',
+        navMuted:
+          'hover:text-primary-comfy-yellow h-auto w-full justify-between px-0 py-1 text-start text-2xl font-medium text-primary-comfy-canvas uppercase'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/apps/website/src/components/ui/navigation-menu/NavigationMenu.vue b/apps/website/src/components/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 0000000000..ad068d94a8
--- /dev/null
+++ b/apps/website/src/components/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'reka-ui'
+import { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+
+const {
+  viewport = true,
+  class: className,
+  ...restProps
+} = defineProps<
+  NavigationMenuRootProps & {
+    class?: HTMLAttributes['class']
+    viewport?: boolean
+  }
+>()
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(
+  computed(() => ({ ...restProps })),
+  emits
+)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-slot="slotProps"
+    data-slot="navigation-menu"
+    :data-viewport="viewport"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className
+      )
+    "
+  >
+    <slot v-bind="slotProps" />
+    <NavigationMenuViewport v-if="viewport" />
+  </NavigationMenuRoot>
+</template>
diff --git a/apps/website/src/components/ui/navigation-menu/NavigationMenuContent.vue b/apps/website/src/components/ui/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 0000000000..c8e5613191
--- /dev/null
+++ b/apps/website/src/components/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type {
+  NavigationMenuContentEmits,
+  NavigationMenuContentProps
+} from 'reka-ui'
+import { NavigationMenuContent, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className, ...restProps } = defineProps<
+  NavigationMenuContentProps & { class?: HTMLAttributes['class'] }
+>()
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const forwarded = useForwardPropsEmits(
+  computed(() => ({ ...restProps })),
+  emits
+)
+</script>
+
+<template>
+  <NavigationMenuContent
+    data-slot="navigation-menu-content"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'top-0 left-0 w-full px-8 py-6 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-primary-comfy-ink-light group-data-[viewport=false]/navigation-menu:border-primary-comfy-ink-light group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-3xl group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:text-primary-comfy-canvas group-data-[viewport=false]/navigation-menu:shadow-sm group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95',
+        className
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/apps/website/src/components/ui/navigation-menu/NavigationMenuItem.vue b/apps/website/src/components/ui/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 0000000000..a72cede914
--- /dev/null
+++ b/apps/website/src/components/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from 'reka-ui'
+import { NavigationMenuItem } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className, ...restProps } = defineProps<
+  NavigationMenuItemProps & { class?: HTMLAttributes['class'] }
+>()
+</script>
+
+<template>
+  <NavigationMenuItem
+    data-slot="navigation-menu-item"
+    v-bind="restProps"
+    :class="cn('relative', className)"
+  >
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/apps/website/src/components/ui/navigation-menu/NavigationMenuLink.vue b/apps/website/src/components/ui/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 0000000000..4101639ba3
--- /dev/null
+++ b/apps/website/src/components/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'reka-ui'
+import { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className, ...restProps } = defineProps<
+  NavigationMenuLinkProps & { class?: HTMLAttributes['class'] }
+>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(
+  computed(() => ({ ...restProps })),
+  emits
+)
+</script>
+
+<template>
+  <NavigationMenuLink
+    data-slot="navigation-menu-link"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'data-active:text-primary-comfy-yellow focus:bg-transparency-white-t4 ring-primary-comfy-yellow outline-primary-comfy-yellow flex flex-col gap-1 rounded-xl p-2 text-sm transition-[color,box-shadow] hover:text-white focus:text-white focus-visible:ring-4 focus-visible:outline-1 data-active:bg-transparent data-active:hover:bg-transparent [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+        className
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/apps/website/src/components/ui/navigation-menu/NavigationMenuList.vue b/apps/website/src/components/ui/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 0000000000..d767bf709e
--- /dev/null
+++ b/apps/website/src/components/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from 'reka-ui'
+import { NavigationMenuList, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className, ...restProps } = defineProps<
+  NavigationMenuListProps & { class?: HTMLAttributes['class'] }
+>()
+
+const forwardedProps = useForwardProps(computed(() => ({ ...restProps })))
+</script>
+
+<template>
+  <NavigationMenuList
+    data-slot="navigation-menu-list"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        className
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/apps/website/src/components/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/website/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 0000000000..3791de08af
--- /dev/null
+++ b/apps/website/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ChevronDown } from '@lucide/vue'
+import type { NavigationMenuTriggerProps } from 'reka-ui'
+import { NavigationMenuTrigger, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+import { navigationMenuTriggerStyle } from './navigationMenuTriggerStyle'
+
+const {
+  class: className,
+  active,
+  ...restProps
+} = defineProps<
+  NavigationMenuTriggerProps & {
+    class?: HTMLAttributes['class']
+    active?: boolean
+  }
+>()
+
+const forwardedProps = useForwardProps(computed(() => ({ ...restProps })))
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    data-slot="navigation-menu-trigger"
+    v-bind="forwardedProps"
+    :data-active="active ? '' : undefined"
+    :class="cn(navigationMenuTriggerStyle(), 'group', className)"
+  >
+    <span class="ppformula-text-center">
+      <slot />
+    </span>
+    <ChevronDown
+      class="relative ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/apps/website/src/components/ui/navigation-menu/NavigationMenuViewport.vue b/apps/website/src/components/ui/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 0000000000..1279dee3c7
--- /dev/null
+++ b/apps/website/src/components/ui/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from 'reka-ui'
+import { NavigationMenuViewport, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className, ...restProps } = defineProps<
+  NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }
+>()
+
+const forwardedProps = useForwardProps(computed(() => ({ ...restProps })))
+</script>
+
+<template>
+  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
+    <NavigationMenuViewport
+      data-slot="navigation-menu-viewport"
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center bg-primary-comfy-ink-light border-primary-comfy-ink-light relative left-(--reka-navigation-menu-viewport-left) mt-1.5 h-(--reka-navigation-menu-viewport-height) w-full overflow-hidden rounded-3xl border text-primary-comfy-canvas shadow-sm data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-(--reka-navigation-menu-viewport-width)',
+          className
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/apps/website/src/components/ui/navigation-menu/navigationMenuTriggerStyle.ts b/apps/website/src/components/ui/navigation-menu/navigationMenuTriggerStyle.ts
new file mode 100644
index 0000000000..3d717b601f
--- /dev/null
+++ b/apps/website/src/components/ui/navigation-menu/navigationMenuTriggerStyle.ts
@@ -0,0 +1,10 @@
+import { cva } from 'class-variance-authority'
+
+export const navigationMenuTriggerStyle = cva([
+  'group font-formula inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-2xl px-4 py-3 text-sm font-extrabold tracking-wider text-primary-comfy-canvas uppercase transition-[color,box-shadow] outline-none',
+  'hover:text-primary-warm-gray',
+  'data-[state=open]:hover:text-primary-comfy-yellow data-[state=open]:text-primary-comfy-yellow data-[state=open]:focus:text-primary-comfy-yellow',
+  'data-active:text-primary-comfy-yellow data-active:hover:text-primary-comfy-yellow',
+  'focus:bg-accent focus-visible:ring-primary-comfy-yellow focus:text-accent-foreground focus-visible:ring-3 focus-visible:outline-1',
+  'disabled:pointer-events-none disabled:opacity-50'
+])
diff --git a/apps/website/src/components/ui/sheet/Sheet.vue b/apps/website/src/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000000..ff2e3d8a63
--- /dev/null
+++ b/apps/website/src/components/ui/sheet/Sheet.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
diff --git a/apps/website/src/components/ui/sheet/SheetClose.vue b/apps/website/src/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000000..f9a549a6e9
--- /dev/null
+++ b/apps/website/src/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose data-slot="sheet-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/apps/website/src/components/ui/sheet/SheetContent.vue b/apps/website/src/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000000..3423e147b3
--- /dev/null
+++ b/apps/website/src/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { X } from '@lucide/vue'
+import { DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@comfyorg/tailwind-utils'
+import SheetClose from './SheetClose.vue'
+import SheetOverlay from './SheetOverlay.vue'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  closeLabel: string
+}
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const {
+  side = 'right',
+  closeLabel,
+  class: classProp,
+  ...delegatedProps
+} = defineProps<SheetContentProps>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="
+        cn(
+          'fixed z-50 flex flex-col gap-4 bg-primary-comfy-ink transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500',
+          side === 'right' &&
+            'inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+          side === 'left' &&
+            'inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+          side === 'top' &&
+            'inset-x-0 top-0 h-auto data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+          side === 'bottom' &&
+            'inset-x-0 bottom-0 h-auto data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          classProp
+        )
+      "
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <SheetClose
+        class="focus:ring-primary-comfy-yellow/50 text-primary-comfy-yellow border-primary-comfy-yellow absolute top-4 right-4 rounded-xl border p-2 ring-offset-primary-comfy-ink transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <X class="size-6" />
+        <span class="sr-only">{{ closeLabel }}</span>
+      </SheetClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/apps/website/src/components/ui/sheet/SheetDescription.vue b/apps/website/src/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000000..2b6d162dc1
--- /dev/null
+++ b/apps/website/src/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription } from 'reka-ui'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const props = defineProps<
+  DialogDescriptionProps & { class?: HTMLAttributes['class'] }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-primary-warm-gray text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/apps/website/src/components/ui/sheet/SheetHeader.vue b/apps/website/src/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000000..04bcc7e7f0
--- /dev/null
+++ b/apps/website/src/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/website/src/components/ui/sheet/SheetOverlay.vue b/apps/website/src/components/ui/sheet/SheetOverlay.vue
new file mode 100644
index 0000000000..6195e20ec2
--- /dev/null
+++ b/apps/website/src/components/ui/sheet/SheetOverlay.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay } from 'reka-ui'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const props = defineProps<
+  DialogOverlayProps & { class?: HTMLAttributes['class'] }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="
+      cn(
+        'bg-transparency-white-t4 fixed inset-0 z-50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        props.class
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/apps/website/src/components/ui/sheet/SheetTitle.vue b/apps/website/src/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000000..1c119daa82
--- /dev/null
+++ b/apps/website/src/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle } from 'reka-ui'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const props = defineProps<
+  DialogTitleProps & { class?: HTMLAttributes['class'] }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    :class="cn('text-primary-warm-white font-semibold', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/apps/website/src/components/ui/sheet/SheetTrigger.vue b/apps/website/src/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000000..f1ad672594
--- /dev/null
+++ b/apps/website/src/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger data-slot="sheet-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/apps/website/src/composables/useCurrentPath.ts b/apps/website/src/composables/useCurrentPath.ts
new file mode 100644
index 0000000000..3f76609830
--- /dev/null
+++ b/apps/website/src/composables/useCurrentPath.ts
@@ -0,0 +1,32 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+export function useCurrentPath() {
+  const currentPath = ref('')
+
+  function update() {
+    currentPath.value = window.location.pathname
+  }
+
+  onMounted(() => {
+    update()
+    document.addEventListener('astro:page-load', update)
+    window.addEventListener('popstate', update)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('astro:page-load', update)
+    window.removeEventListener('popstate', update)
+  })
+
+  return currentPath
+}
+
+export function isHrefActive(href: string, currentPath: string): boolean {
+  if (!href || !currentPath || href.startsWith('http')) return false
+  const path = href.split('#')[0].split('?')[0]
+  if (!path) return false
+  function norm(s: string) {
+    return s.length > 1 ? s.replace(/\/$/, '') : s
+  }
+  return norm(path) === norm(currentPath)
+}
diff --git a/apps/website/src/config/routes.ts b/apps/website/src/config/routes.ts
index 7201034e99..4713d5646d 100644
--- a/apps/website/src/config/routes.ts
+++ b/apps/website/src/config/routes.ts
@@ -62,9 +62,12 @@ export const externalLinks = {
   docsSubscription: 'https://docs.comfy.org/support/subscription/subscribing',
   github: 'https://github.com/Comfy-Org/ComfyUI',
   githubInstall: 'https://github.com/Comfy-Org/ComfyUI#installing',
+  instagram: 'https://www.instagram.com/comfyui/',
   platform: 'https://platform.comfy.org',
   platformUsage: 'https://platform.comfy.org/profile/usage',
+  reddit: 'https://www.reddit.com/r/comfyui/',
   support: 'https://support.comfy.org/hc/en-us',
   workflows: 'https://comfy.org/workflows',
+  x: 'https://x.com/ComfyUI',
   youtube: 'https://www.youtube.com/@ComfyOrg'
 } as const
diff --git a/apps/website/src/data/mainNavigation.ts b/apps/website/src/data/mainNavigation.ts
new file mode 100644
index 0000000000..9ccca1256f
--- /dev/null
+++ b/apps/website/src/data/mainNavigation.ts
@@ -0,0 +1,193 @@
+import { externalLinks, getRoutes } from '../config/routes'
+import type { Locale } from '../i18n/translations'
+import { t } from '../i18n/translations'
+
+export type NavColumnItem = {
+  label: string
+  href: string
+  badge?: 'new'
+  external?: boolean
+}
+
+export type NavColumn = {
+  header: string
+  items: NavColumnItem[]
+}
+
+export type NavFeatured = {
+  imageSrc: string
+  imageAlt?: string
+  title: string
+  cta: {
+    label: string
+    ariaLabel?: string
+    href: string
+  }
+}
+
+export type NavItem =
+  | {
+      label: string
+      columns: NavColumn[]
+      featured?: NavFeatured
+      href?: never
+    }
+  | { label: string; href: string; columns?: never; featured?: never }
+
+export function getMainNavigation(locale: Locale): NavItem[] {
+  const routes = getRoutes(locale)
+  return [
+    {
+      label: t('nav.products', locale),
+      featured: {
+        imageSrc: 'https://media.comfy.org/website/nav/featured-model-card.jpg',
+        imageAlt: t('nav.featuredProductsAlt', locale),
+        title: t('nav.featuredProductsTitle', locale),
+        cta: {
+          label: t('cta.tryWorkflow', locale),
+          ariaLabel: t('nav.featuredProductsCtaAria', locale),
+          href: 'https://comfy.org/workflows/api_seedance2_0_r2v-64f4db9e3e33/'
+        }
+      },
+      columns: [
+        {
+          header: t('nav.products', locale),
+          items: [
+            { label: t('nav.comfyLocal', locale), href: routes.download },
+            { label: t('nav.comfyCloud', locale), href: routes.cloud },
+            {
+              label: t('nav.comfyApi', locale),
+              href: routes.api,
+              badge: 'new'
+            },
+            {
+              label: t('nav.comfyEnterprise', locale),
+              href: routes.cloudEnterprise
+            }
+          ]
+        },
+        {
+          header: t('nav.colFeatures', locale),
+          items: [
+            // TODO: no page yet — re-enable when landing pages ship
+            // { label: t('nav.mcpServer', locale), href: '#', badge: 'new' },
+            // { label: t('nav.appMode', locale), href: '#' },
+            // { label: t('nav.agentSkills', locale), href: '#' },
+            {
+              label: t('nav.docs', locale),
+              href: externalLinks.docs,
+              external: true
+            }
+          ]
+        }
+      ]
+    },
+    { label: t('nav.pricing', locale), href: routes.cloudPricing },
+    {
+      label: t('nav.community', locale),
+      featured: {
+        imageSrc: 'https://media.comfy.org/website/nav/featured-demo-card.jpg',
+        imageAlt: t('nav.featuredCommunityAlt', locale),
+        title: t('nav.featuredCommunityTitle', locale),
+        cta: {
+          label: t('cta.watchDemo', locale),
+          ariaLabel: t('nav.featuredCommunityCtaAria', locale),
+          href: 'https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/'
+        }
+      },
+      columns: [
+        {
+          header: t('nav.colPrograms', locale),
+          items: [
+            { label: t('nav.comfyHub', locale), href: externalLinks.workflows },
+            { label: t('nav.gallery', locale), href: routes.gallery },
+            {
+              label: t('nav.affiliates', locale),
+              href: routes.affiliates,
+              badge: 'new'
+            },
+            {
+              label: t('nav.learning', locale),
+              href: routes.learning,
+              badge: 'new'
+            }
+          ]
+        },
+        {
+          header: t('nav.colConnect', locale),
+          items: [
+            {
+              label: t('nav.discord', locale),
+              href: externalLinks.discord,
+              external: true
+            },
+            {
+              label: t('nav.github', locale),
+              href: externalLinks.github,
+              external: true
+            },
+            {
+              label: t('nav.youtube', locale),
+              href: externalLinks.youtube,
+              external: true
+            },
+            {
+              label: t('nav.reddit', locale),
+              href: externalLinks.reddit,
+              external: true
+            },
+            {
+              label: t('nav.x', locale),
+              href: externalLinks.x,
+              external: true
+            },
+            {
+              label: t('nav.instagram', locale),
+              href: externalLinks.instagram,
+              external: true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: t('nav.company', locale),
+      featured: {
+        imageSrc: 'https://media.comfy.org/website/nav/customer-story-card.jpg',
+        imageAlt: t('nav.featuredCompanyAlt', locale),
+        title: t('nav.featuredCompanyTitle', locale),
+        cta: {
+          label: t('cta.watchNow', locale),
+          ariaLabel: t('nav.featuredCompanyCtaAria', locale),
+          href: '/customers#hero-video'
+        }
+      },
+      columns: [
+        {
+          header: t('nav.company', locale),
+          items: [
+            { label: t('nav.aboutUs', locale), href: routes.about },
+            { label: t('nav.careers', locale), href: routes.careers },
+            { label: t('nav.contact', locale), href: routes.contact }
+          ]
+        },
+        {
+          header: t('nav.colMore', locale),
+          items: [
+            {
+              label: t('nav.customerStories', locale),
+              href: routes.customers
+            },
+            // TODO: no /brand page yet
+            // { label: t('nav.brand', locale), href: '#' },
+            {
+              label: t('nav.blogs', locale),
+              href: externalLinks.blog,
+              external: true
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/apps/website/src/i18n/translations.ts b/apps/website/src/i18n/translations.ts
index b49b4a7b8c..480bb3a6d8 100644
--- a/apps/website/src/i18n/translations.ts
+++ b/apps/website/src/i18n/translations.ts
@@ -16,6 +16,14 @@ const translations = {
     en: 'Try Workflow',
     'zh-CN': '试用工作流'
   },
+  'cta.watchNow': {
+    en: 'Watch Now',
+    'zh-CN': '立即观看'
+  },
+  'cta.watchDemo': {
+    en: 'Watch Demo',
+    'zh-CN': '观看演示'
+  },
 
   // HeroSection
   'hero.title': {
@@ -1843,10 +1851,69 @@ const translations = {
   'nav.customerStories': { en: 'Customer Stories', 'zh-CN': '客户故事' },
   'nav.downloadLocal': { en: 'DOWNLOAD DESKTOP', 'zh-CN': '下载桌面版' },
   'nav.launchCloud': { en: 'LAUNCH CLOUD', 'zh-CN': '启动云端' },
+  'nav.ctaDesktopPrefix': { en: 'DOWNLOAD', 'zh-CN': '下载' },
+  'nav.ctaDesktopCore': { en: 'DESKTOP', 'zh-CN': '桌面版' },
+  'nav.ctaCloudPrefix': { en: 'LAUNCH', 'zh-CN': '启动' },
+  'nav.ctaCloudCore': { en: 'CLOUD', 'zh-CN': '云端' },
+  'nav.home': { en: 'Comfy home', 'zh-CN': 'Comfy 首页' },
   'nav.menu': { en: 'Menu', 'zh-CN': '菜单' },
   'nav.toggleMenu': { en: 'Toggle menu', 'zh-CN': '切换菜单' },
+  'nav.close': { en: 'Close', 'zh-CN': '关闭' },
+  'nav.mobileMenuDescription': {
+    en: 'Site navigation and quick links',
+    'zh-CN': '网站导航和快速链接'
+  },
   'nav.back': { en: 'BACK', 'zh-CN': '返回' },
   'nav.badgeNew': { en: 'NEW', 'zh-CN': '新' },
+  // Column headers used in HeaderMainDesktop dropdowns
+  'nav.colFeatures': { en: 'Features', 'zh-CN': '功能' },
+  'nav.colPrograms': { en: 'Programs', 'zh-CN': '项目' },
+  'nav.colConnect': { en: 'Connect', 'zh-CN': '联系' },
+  'nav.colMore': { en: 'More', 'zh-CN': '更多' },
+  // Dropdown items not yet covered above
+  'nav.reddit': { en: 'Reddit', 'zh-CN': 'Reddit' },
+  'nav.x': { en: 'X', 'zh-CN': 'X' },
+  'nav.instagram': { en: 'Instagram', 'zh-CN': 'Instagram' },
+  'nav.affiliates': { en: 'Affiliates', 'zh-CN': '联盟计划' },
+  'nav.contact': { en: 'Contact', 'zh-CN': '联系我们' },
+  // Featured dropdown cards — keys are keyed by parent nav item, not card content,
+  // so the copy can be swapped without renaming the key.
+  'nav.featuredProductsTitle': {
+    en: 'New Release: Seedance 2.0',
+    'zh-CN': '全新发布：Seedance 2.0'
+  },
+  'nav.featuredProductsAlt': {
+    en: 'Seedance 2.0 release feature image',
+    'zh-CN': 'Seedance 2.0 发布精选图片'
+  },
+  'nav.featuredProductsCtaAria': {
+    en: 'Try the Seedance 2.0 workflow',
+    'zh-CN': '试用 Seedance 2.0 工作流'
+  },
+  'nav.featuredCommunityTitle': {
+    en: 'Sky Replacement',
+    'zh-CN': '天空替换'
+  },
+  'nav.featuredCommunityAlt': {
+    en: 'Sky Replacement workflow demo image',
+    'zh-CN': '天空替换工作流演示图片'
+  },
+  'nav.featuredCommunityCtaAria': {
+    en: 'Watch the Sky Replacement demo',
+    'zh-CN': '观看天空替换演示'
+  },
+  'nav.featuredCompanyTitle': {
+    en: 'Customer story: Black Math',
+    'zh-CN': '客户故事：Black Math'
+  },
+  'nav.featuredCompanyAlt': {
+    en: 'Black Math customer story image',
+    'zh-CN': 'Black Math 客户故事图片'
+  },
+  'nav.featuredCompanyCtaAria': {
+    en: 'Watch the Black Math customer story',
+    'zh-CN': '观看 Black Math 客户故事'
+  },
 
   // SiteFooter
   'footer.tagline': {
diff --git a/apps/website/src/layouts/BaseLayout.astro b/apps/website/src/layouts/BaseLayout.astro
index 9f4ffb3a42..1ebc2ac91c 100644
--- a/apps/website/src/layouts/BaseLayout.astro
+++ b/apps/website/src/layouts/BaseLayout.astro
@@ -4,7 +4,7 @@ import Analytics from '@vercel/analytics/astro'
 import '../styles/global.css'
 import type { Locale } from '../i18n/translations'
 import SiteFooter from '../components/common/SiteFooter.vue'
-import SiteNav from '../components/common/SiteNav.vue'
+import HeaderMain from '../components/common/HeaderMain/HeaderMain.vue'
 import { escapeJsonLd } from '../utils/escapeJsonLd'
 import { fetchGitHubStars, formatStarCount } from '../utils/github'
 
@@ -137,7 +137,7 @@ const websiteJsonLd = {
       </noscript>
     )}
 
-    <SiteNav locale={locale} github-stars={githubStars} client:load />
+    <HeaderMain locale={locale} github-stars={githubStars} client:load />
     <main class="mt-20 lg:mt-32">
       <slot />
     </main>
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
index 9b1a8906c8..b018f834fe 100644
--- a/apps/website/src/pages/index.astro
+++ b/apps/website/src/pages/index.astro
@@ -1,20 +1,30 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro'
-import ProductCardsSection from '../components/home/ProductCardsSection.vue'
-import HeroSection from '../components/home/HeroSection.vue'
-import SocialProofBarSection from '../components/common/SocialProofBarSection.vue'
-import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vue'
-import UseCaseSection from '../components/home/UseCaseSection.vue'
-import CaseStudySpotlightSection from '../components/home/CaseStudySpotlightSection.vue'
-import GetStartedSection from '../components/home/GetStartedSection.vue'
-import BuildWhatSection from '../components/home/BuildWhatSection.vue'
-import { t } from '../i18n/translations'
+import BaseLayout from "../layouts/BaseLayout.astro";
+import ProductCardsSection from "../components/home/ProductCardsSection.vue";
+import HeroSection from "../components/home/HeroSection.vue";
+import SocialProofBarSection from "../components/common/SocialProofBarSection.vue";
+import ProductShowcaseSection from "../components/home/ProductShowcaseSection.vue";
+import UseCaseSection from "../components/home/UseCaseSection.vue";
+import CaseStudySpotlightSection from "../components/home/CaseStudySpotlightSection.vue";
+import GetStartedSection from "../components/home/GetStartedSection.vue";
+import BuildWhatSection from "../components/home/BuildWhatSection.vue";
+import { t } from "../i18n/translations";
 ---
 
 <BaseLayout
   title="Comfy — Professional Control of Visual AI"
-  description={t('hero.subtitle', 'en')}
-  keywords={['comfyui app', 'comfyui web app', 'comfy ui application', 'comfyui application', 'comfy app', 'comfyui', 'visual ai app', 'node-based ai', 'generative ai workflows']}
+  description={t("hero.subtitle", "en")}
+  keywords={[
+    "comfyui app",
+    "comfyui web app",
+    "comfy ui application",
+    "comfyui application",
+    "comfy app",
+    "comfyui",
+    "visual ai app",
+    "node-based ai",
+    "generative ai workflows",
+  ]}
 >
   <HeroSection client:load />
   <SocialProofBarSection />
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index c3d934adc5..6d2e2e044a 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -1,6 +1,16 @@
+@import 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
+
 @import 'tailwindcss';
 @import '@comfyorg/design-system/css/base.css';
+@import 'tw-animate-css';
 
+/* PP Formula's native vertical metrics place the baseline too high, so caps
+   sit in the upper half of the line box. Overriding ascent/descent re-anchors
+   the baseline so caps render optically centered when line-height is tight. 
+    BUT, IT IS NOT WELL SUPPORTED:
+    ascent-override: 92%;
+    descent-override: 8%;
+    line-gap-override: 0%; */
 @font-face {
   font-family: 'PP Formula';
   src: url('/fonts/PPFormula-Light.woff2') format('woff2');
@@ -53,10 +63,12 @@
   --color-site-dropdown: #332b38;
   --color-primary-comfy-yellow: #f2ff59;
   --color-primary-comfy-ink: #211927;
+  --color-primary-comfy-ink-light: #2a2330;
   --color-primary-comfy-canvas: #c2bfb9;
   --color-primary-warm-white: #f0efed;
   --color-primary-warm-gray: #7e7c78;
   --color-secondary-mauve: #4d3762;
+  --color-destructive: #f44336;
   --color-primary-comfy-plum: #49378b;
   --color-secondary-cool-gray: #3c3c3c;
   --color-illustration-forest: #20464c;
@@ -100,6 +112,7 @@
   0% {
     transform: translateX(0);
   }
+
   100% {
     transform: translateX(calc(-100% - var(--marquee-gap, 0px)));
   }
@@ -109,6 +122,7 @@
   0% {
     transform: translateX(calc(-100% - var(--marquee-gap, 0px)));
   }
+
   100% {
     transform: translateX(0);
   }
@@ -131,9 +145,11 @@
     transform: scale(1);
     opacity: 1;
   }
+
   85% {
     opacity: 1;
   }
+
   100% {
     transform: scale(1.75);
     opacity: 0;
@@ -174,6 +190,7 @@
 @utility scrollbar-none {
   -ms-overflow-style: none;
   scrollbar-width: none;
+
   &::-webkit-scrollbar {
     display: none;
   }
diff --git a/browser_tests/fixtures/helpers/TemplateHelper.ts b/browser_tests/fixtures/helpers/TemplateHelper.ts
index 98a6d431f4..e008e51eac 100644
--- a/browser_tests/fixtures/helpers/TemplateHelper.ts
+++ b/browser_tests/fixtures/helpers/TemplateHelper.ts
@@ -69,6 +69,24 @@ export class TemplateHelper {
   }
 
   async mockIndex(): Promise<void> {
+    const customTemplatesHandler = async (route: Route) => {
+      const customTemplates: Record<string, string[]> = {}
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(customTemplates),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const customTemplatesPattern = '**/api/workflow_templates'
+    this.routeHandlers.push({
+      pattern: customTemplatesPattern,
+      handler: customTemplatesHandler
+    })
+    await this.page.route(customTemplatesPattern, customTemplatesHandler)
+
     const indexHandler = async (route: Route) => {
       const payload = this.index ?? mockTemplateIndex(this.templates)
       await route.fulfill({
diff --git a/browser_tests/fixtures/helpers/WorkflowHelper.ts b/browser_tests/fixtures/helpers/WorkflowHelper.ts
index cdb40dd306..cc82451df0 100644
--- a/browser_tests/fixtures/helpers/WorkflowHelper.ts
+++ b/browser_tests/fixtures/helpers/WorkflowHelper.ts
@@ -2,7 +2,7 @@ import { readFileSync } from 'fs'
 
 import { test } from '@playwright/test'
 
-import type { AppMode } from '@/composables/useAppMode'
+import type { AppMode } from '@/utils/appMode'
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON
diff --git a/browser_tests/tests/maskEditor.spec.ts b/browser_tests/tests/maskEditor.spec.ts
index 895bbb0ba0..d6a084a6f9 100644
--- a/browser_tests/tests/maskEditor.spec.ts
+++ b/browser_tests/tests/maskEditor.spec.ts
@@ -32,6 +32,10 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
       await expect(dialog.getByText('Save')).toBeVisible()
       await expect(dialog.getByText('Cancel')).toBeVisible()
 
+      await dialog.getByTestId('pointer-zone').hover()
+      await dialog.getByText('Brush Settings').hover()
+      await expect(dialog.getByTestId('brush-cursor')).toHaveCSS('opacity', '0')
+
       await comfyPage.expectScreenshot(dialog, 'mask-editor-dialog-open.png')
     }
   )
diff --git a/browser_tests/tests/maskEditor.spec.ts-snapshots/mask-editor-dialog-open-chromium-linux.png b/browser_tests/tests/maskEditor.spec.ts-snapshots/mask-editor-dialog-open-chromium-linux.png
index ff2540d06e..8bb40b6a72 100644
Binary files a/browser_tests/tests/maskEditor.spec.ts-snapshots/mask-editor-dialog-open-chromium-linux.png and b/browser_tests/tests/maskEditor.spec.ts-snapshots/mask-editor-dialog-open-chromium-linux.png differ
diff --git a/browser_tests/tests/nodeHelp.spec.ts b/browser_tests/tests/nodeHelp.spec.ts
index 4db74cde39..744750212d 100644
--- a/browser_tests/tests/nodeHelp.spec.ts
+++ b/browser_tests/tests/nodeHelp.spec.ts
@@ -4,7 +4,6 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
-import type { WorkspaceStore } from '@e2e/types/globals'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 // TODO: there might be a better solution for this
@@ -35,56 +34,6 @@ async function openSelectionToolboxHelp(comfyPage: ComfyPage) {
   return comfyPage.page.getByTestId('properties-panel')
 }
 
-async function setLocaleAndWaitForWorkflowReload(
-  comfyPage: ComfyPage,
-  locale: string
-) {
-  await comfyPage.page.evaluate(async (targetLocale) => {
-    const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-      .activeWorkflow
-
-    if (!workflow) {
-      throw new Error('No active workflow while waiting for locale reload')
-    }
-
-    const changeTracker = workflow.changeTracker.constructor as unknown as {
-      isLoadingGraph: boolean
-    }
-
-    let sawLoading = false
-    const waitForReload = new Promise<void>((resolve, reject) => {
-      const timeoutAt = performance.now() + 5000
-
-      const tick = () => {
-        if (changeTracker.isLoadingGraph) {
-          sawLoading = true
-        }
-
-        if (sawLoading && !changeTracker.isLoadingGraph) {
-          resolve()
-          return
-        }
-
-        if (performance.now() > timeoutAt) {
-          reject(
-            new Error(
-              `Timed out waiting for workflow reload after setting locale to ${targetLocale}`
-            )
-          )
-          return
-        }
-
-        requestAnimationFrame(tick)
-      }
-
-      tick()
-    })
-
-    await window.app!.extensionManager.setting.set('Comfy.Locale', targetLocale)
-    await waitForReload
-  }, locale)
-}
-
 test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
@@ -398,34 +347,33 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
       await expect(helpPage.locator('img[alt="Safe Image"]')).toBeVisible()
     })
 
-    test('Should handle locale-specific documentation', async ({
-      comfyPage
-    }) => {
-      // Mock different responses for different locales
-      await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: `# KSamplerノード
+    test.describe('Locale-specific documentation', () => {
+      test.use({ initialSettings: { 'Comfy.Locale': 'ja' } })
+
+      test('Should handle locale-specific documentation', async ({
+        comfyPage
+      }) => {
+        // Mock different responses for different locales
+        await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: `# KSamplerノード
 
 これは日本語のドキュメントです。
 `
+          })
         })
-      })
 
-      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: `# KSampler Node
+        await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: `# KSampler Node
 
 This is English documentation.
 `
+          })
         })
-      })
 
-      // Set locale to Japanese
-      await setLocaleAndWaitForWorkflowReload(comfyPage, 'ja')
-
-      try {
         await comfyPage.workflow.loadWorkflow('default')
         const ksamplerNodes =
           await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -434,9 +382,7 @@ This is English documentation.
         const helpPage = await openSelectionToolboxHelp(comfyPage)
         await expect(helpPage).toContainText('KSamplerノード')
         await expect(helpPage).toContainText('これは日本語のドキュメントです')
-      } finally {
-        await setLocaleAndWaitForWorkflowReload(comfyPage, 'en')
-      }
+      })
     })
 
     test('Should handle network errors gracefully', async ({ comfyPage }) => {
diff --git a/browser_tests/tests/painter.spec.ts b/browser_tests/tests/painter.spec.ts
index a790a956be..3056e89d25 100644
--- a/browser_tests/tests/painter.spec.ts
+++ b/browser_tests/tests/painter.spec.ts
@@ -10,13 +10,16 @@ import {
 } from '@e2e/fixtures/utils/painter'
 import type { TestGraphAccess } from '@e2e/types/globals'
 
+const HIDDEN_PAINTER_WIDGET_NAMES = ['width', 'height', 'bg_color'] as const
+const HIDDEN_PAINTER_NUMBER_WIDGET_NAMES = ['width', 'height'] as const
+
 test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => window.app?.graph?.clear())
     await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
   })
 
-  test.describe('Widget rendering', { tag: ['@widget'] }, () => {
+  test.describe('Widget rendering', () => {
     test('Node enforces minimum size', async ({ comfyPage }) => {
       const size = await comfyPage.page.evaluate(() => {
         const graph = window.graph as TestGraphAccess | undefined
@@ -28,17 +31,15 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
       expect(size![1]).toBeGreaterThanOrEqual(550)
     })
 
-    test('Width, height, and bg_color standard widgets are hidden', async ({
+    test('Does not render hidden standard widgets in Vue mode', async ({
       comfyPage
     }) => {
-      const hiddenFlags = await comfyPage.page.evaluate(() => {
-        const graph = window.graph as TestGraphAccess | undefined
-        const node = graph?._nodes_by_id?.['1']
-        return (node?.widgets ?? [])
-          .filter((w) => ['width', 'height', 'bg_color'].includes(w.name))
-          .map((w) => w.options.hidden ?? false)
-      })
-      expect(hiddenFlags).toEqual([true, true, true])
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      for (const widgetName of HIDDEN_PAINTER_WIDGET_NAMES) {
+        await expect(node.getByLabel(widgetName, { exact: true })).toBeHidden()
+      }
     })
   })
 
@@ -788,6 +789,49 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
   })
 })
 
+test.describe(
+  'Painter legacy LiteGraph rendering',
+  { tag: ['@widget', '@canvas'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.page.evaluate(() => window.app?.graph?.clear())
+      await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
+    })
+
+    test('Does not open editors for backend-hidden number widget rows in legacy LiteGraph', async ({
+      comfyPage
+    }) => {
+      const painterNodes = await comfyPage.nodeOps.getNodeRefsByType('Painter')
+      expect(painterNodes).toHaveLength(1)
+      const painterNode = painterNodes[0]!
+      const maskWidget = await painterNode.getWidgetByName('mask')
+      const maskWidgetClientPosition = await maskWidget.getPosition()
+      const widgetRowClientHeight = await comfyPage.page.evaluate(
+        () =>
+          (window.LiteGraph!.NODE_WIDGET_HEIGHT + 4) *
+          window.app!.canvas.ds.scale
+      )
+      const legacyPrompt = comfyPage.page.locator('.graphdialog')
+      await expect(legacyPrompt).toBeHidden()
+
+      for (const [
+        index,
+        widgetName
+      ] of HIDDEN_PAINTER_NUMBER_WIDGET_NAMES.entries()) {
+        await test.step(`Click ${widgetName} row`, async () => {
+          await comfyPage.page.mouse.click(
+            maskWidgetClientPosition.x,
+            maskWidgetClientPosition.y + widgetRowClientHeight * (index + 1)
+          )
+          await comfyPage.nextFrame()
+          await expect(legacyPrompt).toBeHidden()
+        })
+      }
+    })
+  }
+)
+
 test.describe(
   'Painter — input image connection',
   { tag: ['@widget', '@vue-nodes', '@slow'] },
diff --git a/browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts b/browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts
index a9bccefe4f..e38e86d583 100644
--- a/browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts
+++ b/browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts
@@ -114,6 +114,25 @@ test.describe(
           .poll(() => collectWidgetLabels(shownSection))
           .not.toContain('text')
       })
+
+      test(
+        'control after generate does not display',
+        { tag: '@vue-nodes' },
+        async ({ comfyPage }) => {
+          await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+          const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+          const { editor } = comfyPage.subgraph
+          await editor.ensureOpen(subgraphNode)
+
+          await expect(
+            editor.promotionItems.first(),
+            'some promotion item is visible'
+          ).toBeVisible()
+
+          const widgetName = 'control_after_generate'
+          await expect(editor.resolveItem({ widgetName })).toBeHidden()
+        }
+      )
     })
 
     test.describe('Parameters tab (WidgetActions menu)', () => {
diff --git a/browser_tests/tests/subscriptionPaywallError.spec.ts b/browser_tests/tests/subscriptionPaywallError.spec.ts
new file mode 100644
index 0000000000..f900bb7489
--- /dev/null
+++ b/browser_tests/tests/subscriptionPaywallError.spec.ts
@@ -0,0 +1,68 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import type { PromptResponse } from '@/schemas/apiSchema'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+// Regression for #12840: a free-tier paywall on queue (`POST /prompt` 402 with
+// `{ error: { type: 'PAYMENT_REQUIRED', message: 'Subscription required to
+// queue workflows' } }`) is an account precondition. It must open its own modal
+// and stay out of the error panel, instead of surfacing the raw backend string
+// with non-actionable Find-on-GitHub / Copy actions.
+test.describe('Subscription paywall on queue', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  async function mockQueueError(page: Page, error: PromptResponse['error']) {
+    const body: PromptResponse = { node_errors: {}, error }
+    await page.route('**/api/prompt', async (route) => {
+      await route.fulfill({
+        status: 402,
+        contentType: 'application/json',
+        body: JSON.stringify(body)
+      })
+    })
+  }
+
+  test('keeps the subscription paywall out of the error panel', async ({
+    comfyPage
+  }) => {
+    await mockQueueError(comfyPage.page, {
+      type: 'PAYMENT_REQUIRED',
+      message: 'Subscription required to queue workflows',
+      details: ''
+    })
+
+    const queued = comfyPage.page.waitForResponse('**/api/prompt')
+    await comfyPage.actionbar.queueButton.primaryButton.click()
+    await queued
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    ).toBeHidden()
+  })
+
+  test('still surfaces ordinary queue errors in the error panel', async ({
+    comfyPage
+  }) => {
+    await mockQueueError(comfyPage.page, {
+      type: 'server_error',
+      message: 'The server exploded',
+      details: ''
+    })
+
+    const queued = comfyPage.page.waitForResponse('**/api/prompt')
+    await comfyPage.actionbar.queueButton.primaryButton.click()
+    await queued
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    ).toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/templateFilteringCount.spec.ts b/browser_tests/tests/templateFilteringCount.spec.ts
index 59f7d898b6..56474ba735 100644
--- a/browser_tests/tests/templateFilteringCount.spec.ts
+++ b/browser_tests/tests/templateFilteringCount.spec.ts
@@ -1,13 +1,13 @@
 import { expect, mergeTests } from '@playwright/test'
 
 import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { createCloudAssetsFixture } from '@e2e/fixtures/assetApiFixture'
 import { makeTemplate } from '@e2e/fixtures/data/templateFixtures'
 import { withTemplates } from '@e2e/fixtures/helpers/TemplateHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { templateApiFixture } from '@e2e/fixtures/templateApiFixture'
 
-const test = mergeTests(comfyPageFixture, templateApiFixture)
+const test = mergeTests(createCloudAssetsFixture([]), templateApiFixture)
 
 const Cloud = TemplateIncludeOnDistributionEnum.Cloud
 const Desktop = TemplateIncludeOnDistributionEnum.Desktop
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 410d45172c..2a5c6cd50f 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/eslint.config.ts b/eslint.config.ts
index cae55b1204..3e4ebb54d2 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -420,7 +420,6 @@ export default defineConfig([
       '@intlify/vue-i18n/no-raw-text': 'off'
     }
   },
-
   // i18n import enforcement
   // Vue components must use the useI18n() composable, not the global t/d/st/te
   {
diff --git a/package.json b/package.json
index ac859ecf66..079590ae00 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
   "dependencies": {
     "@alloc/quick-lru": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
+    "@comfyorg/comfyui-desktop-bridge-types": "workspace:*",
     "@comfyorg/comfyui-electron-types": "catalog:",
     "@comfyorg/design-system": "workspace:*",
     "@comfyorg/fbx-exporter-three": "^1.0.1",
diff --git a/packages/comfyui-desktop-bridge-types/comfyDesktopBridge.d.ts b/packages/comfyui-desktop-bridge-types/comfyDesktopBridge.d.ts
new file mode 100644
index 0000000000..a3c606c3a9
--- /dev/null
+++ b/packages/comfyui-desktop-bridge-types/comfyDesktopBridge.d.ts
@@ -0,0 +1,91 @@
+export interface ComfyDownloadProgress {
+  url: string
+  filename: string
+  directory?: string
+  progress: number
+  receivedBytes?: number
+  totalBytes?: number
+  speedBytesPerSec?: number
+  etaSeconds?: number
+  status:
+    | 'pending'
+    | 'downloading'
+    | 'paused'
+    | 'completed'
+    | 'error'
+    | 'cancelled'
+  error?: string
+  isImage?: boolean
+}
+
+export interface TerminalRestore {
+  buffer: string[]
+  size: { cols: number; rows: number }
+  exited: boolean
+}
+
+export interface LogsRestore {
+  installationId: string
+  buffer: string[]
+}
+
+export interface LogsOutputMsg {
+  installationId: string
+  text: string
+}
+
+export type ComfyDesktop2TelemetryValue = string | number | boolean | null
+export type ComfyDesktop2TelemetryProperties = Record<
+  string,
+  ComfyDesktop2TelemetryValue | ComfyDesktop2TelemetryValue[]
+>
+
+export interface ComfyDesktop2TerminalBridge {
+  subscribe(installationId?: string): Promise<TerminalRestore>
+  unsubscribe(installationId?: string): Promise<void>
+  write(data: string, installationId?: string): Promise<void>
+  resize(cols: number, rows: number, installationId?: string): Promise<void>
+  restart(installationId?: string): Promise<TerminalRestore>
+  openPopout(): Promise<void>
+  onOutput(callback: (data: string) => void): () => void
+  onExited(callback: () => void): () => void
+}
+
+export interface ComfyDesktop2LogsBridge {
+  subscribe(installationId?: string): Promise<LogsRestore>
+  unsubscribe(installationId?: string): Promise<void>
+  openPopout(): Promise<void>
+  onOutput(callback: (msg: LogsOutputMsg) => void): () => void
+}
+
+export interface ComfyDesktop2TelemetryBridge {
+  capture(event: string, properties?: ComfyDesktop2TelemetryProperties): void
+}
+
+export interface ComfyDesktop2Bridge {
+  isRemote(): boolean
+  downloadModel?: (
+    url: string,
+    filename: string,
+    directory: string
+  ) => Promise<boolean>
+  downloadAsset?: (
+    url: string,
+    filename: string,
+    authToken?: string
+  ) => Promise<boolean>
+  pauseDownload?: (url: string) => Promise<boolean>
+  resumeDownload?: (url: string) => Promise<boolean>
+  cancelDownload?: (url: string) => Promise<boolean>
+  onDownloadProgress?: (
+    callback: (data: ComfyDownloadProgress) => void
+  ) => () => void
+  reportTheme?: (bg: string, text: string) => void
+  Terminal?: ComfyDesktop2TerminalBridge
+  Logs?: ComfyDesktop2LogsBridge
+  Telemetry?: ComfyDesktop2TelemetryBridge
+}
+
+export type ComfyDesktop2BridgeImplementation = {
+  [K in keyof ComfyDesktop2Bridge]-?: NonNullable<ComfyDesktop2Bridge[K]>
+}
diff --git a/packages/comfyui-desktop-bridge-types/index.d.ts b/packages/comfyui-desktop-bridge-types/index.d.ts
new file mode 100644
index 0000000000..2db482361b
--- /dev/null
+++ b/packages/comfyui-desktop-bridge-types/index.d.ts
@@ -0,0 +1 @@
+export * from './comfyDesktopBridge.js'
diff --git a/packages/comfyui-desktop-bridge-types/index.js b/packages/comfyui-desktop-bridge-types/index.js
new file mode 100644
index 0000000000..336ce12bb9
--- /dev/null
+++ b/packages/comfyui-desktop-bridge-types/index.js
@@ -0,0 +1 @@
+export {}
diff --git a/packages/comfyui-desktop-bridge-types/package.json b/packages/comfyui-desktop-bridge-types/package.json
new file mode 100644
index 0000000000..d68019c2af
--- /dev/null
+++ b/packages/comfyui-desktop-bridge-types/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@comfyorg/comfyui-desktop-bridge-types",
+  "version": "0.1.2",
+  "description": "TypeScript definitions for the Comfy Desktop hosted frontend bridge",
+  "homepage": "https://comfy.org",
+  "license": "MIT",
+  "author": {
+    "name": "Comfy Org",
+    "email": "support@comfy.org",
+    "url": "https://www.comfy.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Comfy-Org/ComfyUI_frontend.git"
+  },
+  "files": [
+    "comfyDesktopBridge.d.ts",
+    "index.d.ts",
+    "index.js"
+  ],
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/shared-frontend-utils/src/formatUtil.test.ts b/packages/shared-frontend-utils/src/formatUtil.test.ts
index aac174e2cf..6e1b7650ec 100644
--- a/packages/shared-frontend-utils/src/formatUtil.test.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.test.ts
@@ -102,6 +102,7 @@ describe('formatUtil', () => {
         expect(getMediaTypeFromFilename('sound.wav')).toBe('audio')
         expect(getMediaTypeFromFilename('music.ogg')).toBe('audio')
         expect(getMediaTypeFromFilename('audio.flac')).toBe('audio')
+        expect(getMediaTypeFromFilename('music.opus')).toBe('audio')
       })
     })
 
diff --git a/packages/shared-frontend-utils/src/formatUtil.ts b/packages/shared-frontend-utils/src/formatUtil.ts
index 91a55384d1..3a8b045afb 100644
--- a/packages/shared-frontend-utils/src/formatUtil.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.ts
@@ -590,7 +590,7 @@ const IMAGE_EXTENSIONS = [
   'svg'
 ] as const
 const VIDEO_EXTENSIONS = ['mp4', 'm4v', 'webm', 'mov', 'avi', 'mkv'] as const
-const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
+const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac', 'opus'] as const
 const THREE_D_EXTENSIONS = [
   'obj',
   'fbx',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c18181986..b8ad46edc8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,9 @@ catalogs:
     '@lobehub/i18n-cli':
       specifier: ^1.26.1
       version: 1.26.1
+    '@lucide/vue':
+      specifier: ^1.17.0
+      version: 1.18.0
     '@pinia/testing':
       specifier: ^1.0.3
       version: 1.0.3
@@ -186,6 +189,9 @@ catalogs:
     axios:
       specifier: ^1.15.2
       version: 1.16.1
+    class-variance-authority:
+      specifier: ^0.7.1
+      version: 0.7.1
     cross-env:
       specifier: ^10.1.0
       version: 10.1.0
@@ -429,6 +435,9 @@ importers:
       '@atlaskit/pragmatic-drag-and-drop':
         specifier: ^1.3.1
         version: 1.3.1
+      '@comfyorg/comfyui-desktop-bridge-types':
+        specifier: workspace:*
+        version: link:packages/comfyui-desktop-bridge-types
       '@comfyorg/comfyui-electron-types':
         specifier: 'catalog:'
         version: 0.6.2
@@ -947,12 +956,18 @@ importers:
       '@comfyorg/tailwind-utils':
         specifier: workspace:*
         version: link:../../packages/tailwind-utils
+      '@lucide/vue':
+        specifier: 'catalog:'
+        version: 1.18.0(vue@3.5.34(typescript@5.9.3))
       '@vercel/analytics':
         specifier: 'catalog:'
         version: 2.0.1(react@19.2.4)(vue-router@4.4.3(vue@3.5.34(typescript@5.9.3)))(vue@3.5.34(typescript@5.9.3))
       '@vueuse/core':
         specifier: 'catalog:'
         version: 14.2.0(vue@3.5.34(typescript@5.9.3))
+      class-variance-authority:
+        specifier: 'catalog:'
+        version: 0.7.1
       cva:
         specifier: 'catalog:'
         version: 1.0.0-beta.4(typescript@5.9.3)
@@ -965,6 +980,9 @@ importers:
       posthog-js:
         specifier: 'catalog:'
         version: 1.358.1
+      reka-ui:
+        specifier: 'catalog:'
+        version: 2.5.0(typescript@5.9.3)(vue@3.5.34(typescript@5.9.3))
       three:
         specifier: 'catalog:'
         version: 0.184.0
@@ -996,6 +1014,9 @@ importers:
       tsx:
         specifier: 'catalog:'
         version: 4.19.4
+      tw-animate-css:
+        specifier: 'catalog:'
+        version: 1.3.8
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
@@ -1003,6 +1024,8 @@ importers:
         specifier: 'catalog:'
         version: 4.1.8(@opentelemetry/api@1.9.0)(@types/node@25.0.3)(@vitest/coverage-v8@4.0.16(vitest@4.1.8))(@vitest/ui@4.0.16(vitest@4.1.8))(happy-dom@20.9.0)(jsdom@27.4.0)(vite@8.0.13(@types/node@25.0.3)(esbuild@0.27.3)(jiti@2.7.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.9.0))
 
+  packages/comfyui-desktop-bridge-types: {}
+
   packages/design-system:
     dependencies:
       '@iconify-json/lucide':
@@ -2397,6 +2420,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@lucide/vue@1.18.0':
+    resolution: {integrity: sha512-DmnUpDB85PlMZ+ofjZLcKq3JoJnaD1bk7SIj9xwUvqerfNqA6hCLa0/m3gIybH6rdrErABbqvTD8yYJdNqiZ3Q==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   '@lukeed/csprng@1.1.0':
     resolution: {integrity: sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==}
     engines: {node: '>=8'}
@@ -4852,6 +4880,9 @@ packages:
   citty@0.2.1:
     resolution: {integrity: sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -10535,6 +10566,10 @@ snapshots:
       - ws
       - zod
 
+  '@lucide/vue@1.18.0(vue@3.5.34(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.34(typescript@5.9.3)
+
   '@lukeed/csprng@1.1.0': {}
 
   '@lukeed/uuid@2.0.1':
@@ -13011,6 +13046,10 @@ snapshots:
 
   citty@0.2.1: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clean-css@5.3.3:
     dependencies:
       source-map: 0.6.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8faf6f4a66..a6c417d5e8 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -25,6 +25,7 @@ catalog:
   '@iconify/utils': ^3.1.0
   '@intlify/eslint-plugin-vue-i18n': ^4.5.0
   '@lobehub/i18n-cli': ^1.26.1
+  '@lucide/vue': ^1.17.0
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
@@ -71,6 +72,7 @@ catalog:
   algoliasearch: ^5.21.0
   astro: ^6.4.2
   axios: ^1.15.2
+  class-variance-authority: ^0.7.1
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4
   dompurify: ^3.4.5
@@ -165,7 +167,7 @@ overrides:
   vite: 'catalog:'
   '@tiptap/pm': 2.27.2
   '@types/eslint': '-'
-  #Security overrides
+  # Security overrides
   lodash: ^4.18.0
   yaml: ^2.8.3
   minimatch@^9.0.0: ^9.0.7
diff --git a/scripts/prepare-types.js b/scripts/prepare-types.js
index 625579dad5..ff12f341d5 100644
--- a/scripts/prepare-types.js
+++ b/scripts/prepare-types.js
@@ -2,6 +2,12 @@ import fs from 'fs'
 import path from 'path'
 
 const mainPackage = JSON.parse(fs.readFileSync('./package.json', 'utf8'))
+const desktopBridgeTypesPackage = JSON.parse(
+  fs.readFileSync(
+    './packages/comfyui-desktop-bridge-types/package.json',
+    'utf8'
+  )
+)
 
 // Create the types-only package.json
 const typesPackage = {
@@ -16,7 +22,9 @@ const typesPackage = {
   homepage: mainPackage.homepage,
   description: `TypeScript definitions for ${mainPackage.name}`,
   license: mainPackage.license,
-  dependencies: {},
+  dependencies: {
+    '@comfyorg/comfyui-desktop-bridge-types': desktopBridgeTypesPackage.version
+  },
   peerDependencies: {
     vue: mainPackage.dependencies.vue,
     zod: mainPackage.dependencies.zod
@@ -34,5 +42,3 @@ fs.writeFileSync(
   path.join(distDir, 'package.json'),
   JSON.stringify(typesPackage, null, 2)
 )
-
-console.log('Types package.json have been prepared in the dist directory')
diff --git a/src/components/builder/BuilderFooterToolbar.test.ts b/src/components/builder/BuilderFooterToolbar.test.ts
index 4efe8ef10d..835c2ce770 100644
--- a/src/components/builder/BuilderFooterToolbar.test.ts
+++ b/src/components/builder/BuilderFooterToolbar.test.ts
@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import type { AppMode } from '@/composables/useAppMode'
+import type { AppMode } from '@/utils/appMode'
 
 import BuilderFooterToolbar from '@/components/builder/BuilderFooterToolbar.vue'
 
diff --git a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
index 2e32532769..71b6587f90 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -5,6 +5,7 @@ import { computed, onMounted, shallowRef, watch } from 'vue'
 
 import DraggableList from '@/components/common/DraggableList.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import {
   demotePromotedInput,
   demoteWidget,
@@ -53,6 +54,7 @@ const canvasStore = useCanvasStore()
 const previewExposureStore = usePreviewExposureStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const { searchQuery } = storeToRefs(rightSidePanelStore)
+const { shouldRenderVueNodes } = useVueFeatureFlags()
 
 const activeNode = computed(() => {
   const node = canvasStore.selectedItems[0]
@@ -175,9 +177,13 @@ const candidateWidgets = computed<WidgetItem[]>(() => {
   const node = activeNode.value
   if (!node) return []
   const promotedSourceKeys = new Set(activeRows.value.map(activeRowSourceKey))
-  return interiorWidgets.value.filter(
-    ([n, w]) => !promotedSourceKeys.has(`${n.id}:${w.name}`)
-  )
+  return interiorWidgets.value
+    .filter(([n, w]) => !promotedSourceKeys.has(`${n.id}:${w.name}`))
+    .filter(
+      ([, w]) =>
+        w.name.startsWith('$$') ||
+        !(w.options.canvasOnly && shouldRenderVueNodes.value)
+    )
 })
 const filteredCandidates = computed<WidgetItem[]>(() => {
   const query = searchQuery.value.toLowerCase()
diff --git a/src/composables/useAppMode.ts b/src/composables/useAppMode.ts
index cee04d309a..1ffb9a8641 100644
--- a/src/composables/useAppMode.ts
+++ b/src/composables/useAppMode.ts
@@ -1,28 +1,8 @@
 import { computed, ref } from 'vue'
 
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-
-export type AppMode =
-  | 'graph'
-  | 'app'
-  | 'builder:inputs'
-  | 'builder:outputs'
-  | 'builder:arrange'
-
-type WorkflowModeSource = {
-  activeMode: AppMode | null
-  initialMode: AppMode | null | undefined
-}
-
-export function getWorkflowMode(
-  workflow: WorkflowModeSource | null | undefined
-): AppMode {
-  return workflow?.activeMode ?? workflow?.initialMode ?? 'graph'
-}
-
-export function isAppModeValue(mode: AppMode): boolean {
-  return mode === 'app' || mode === 'builder:arrange'
-}
+import { getWorkflowMode, isAppModeValue } from '@/utils/appMode'
+import type { AppMode } from '@/utils/appMode'
 
 const enableAppBuilder = ref(true)
 
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 2686f79328..06fdc147ce 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -4,6 +4,7 @@ import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteG
 import { useSubgraphOperations } from '@/composables/graph/useSubgraphOperations'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
+import { useRunButtonTelemetry } from '@/composables/useRunButtonTelemetry'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
   DEFAULT_LIGHT_COLOR_PALETTE
@@ -85,6 +86,7 @@ export function useCoreCommands(): ComfyCommand[] {
   const executionStore = useExecutionStore()
   const modelStore = useModelStore()
   const telemetry = useTelemetry()
+  const { trackRunButton } = useRunButtonTelemetry()
   const { staticUrls, buildDocsUrl } = useExternalLink()
   const settingStore = useSettingStore()
 
@@ -499,7 +501,7 @@ export function useCoreCommands(): ComfyCommand[] {
         subscribe_to_run?: boolean
         trigger_source?: ExecutionTriggerSource
       }) => {
-        useTelemetry()?.trackRunButton(metadata)
+        trackRunButton(metadata)
         if (!isActiveSubscription.value) {
           showSubscriptionDialog()
           return
@@ -522,7 +524,7 @@ export function useCoreCommands(): ComfyCommand[] {
         subscribe_to_run?: boolean
         trigger_source?: ExecutionTriggerSource
       }) => {
-        useTelemetry()?.trackRunButton(metadata)
+        trackRunButton(metadata)
         if (!isActiveSubscription.value) {
           showSubscriptionDialog()
           return
@@ -544,7 +546,7 @@ export function useCoreCommands(): ComfyCommand[] {
         subscribe_to_run?: boolean
         trigger_source?: ExecutionTriggerSource
       }) => {
-        useTelemetry()?.trackRunButton(metadata)
+        trackRunButton(metadata)
         if (!isActiveSubscription.value) {
           showSubscriptionDialog()
           return
diff --git a/src/composables/useRunButtonTelemetry.test.ts b/src/composables/useRunButtonTelemetry.test.ts
new file mode 100644
index 0000000000..25d166496c
--- /dev/null
+++ b/src/composables/useRunButtonTelemetry.test.ts
@@ -0,0 +1,112 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const state = vi.hoisted(() => ({
+  mode: { value: 'graph' },
+  isAppMode: { value: false },
+  telemetry: {
+    trackRunButton: vi.fn()
+  },
+  executionContext: {
+    is_template: false,
+    workflow_name: 'Desktop workflow',
+    custom_node_count: 2,
+    total_node_count: 4,
+    subgraph_count: 1,
+    has_api_nodes: true,
+    api_node_names: ['LoadImage'],
+    has_toolkit_nodes: false,
+    toolkit_node_names: []
+  },
+  executionContextError: null as Error | null
+}))
+
+vi.mock('@/composables/useAppMode', () => ({
+  useAppMode: () => ({
+    mode: state.mode,
+    isAppMode: state.isAppMode
+  })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => state.telemetry
+}))
+
+vi.mock('@/platform/telemetry/utils/getExecutionContext', () => ({
+  getExecutionContext: () => {
+    if (state.executionContextError) throw state.executionContextError
+    return state.executionContext
+  }
+}))
+
+import {
+  getRunButtonTelemetryProperties,
+  useRunButtonTelemetry
+} from './useRunButtonTelemetry'
+
+describe('useRunButtonTelemetry', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    state.telemetry.trackRunButton.mockClear()
+    state.mode.value = 'graph'
+    state.isAppMode.value = false
+    state.executionContextError = null
+  })
+
+  it('builds run button properties from workspace state', () => {
+    localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
+
+    expect(
+      getRunButtonTelemetryProperties({
+        subscribe_to_run: true,
+        trigger_source: 'button'
+      })
+    ).toEqual({
+      subscribe_to_run: true,
+      workflow_type: 'custom',
+      workflow_name: 'Desktop workflow',
+      custom_node_count: 2,
+      total_node_count: 4,
+      subgraph_count: 1,
+      has_api_nodes: true,
+      api_node_names: ['LoadImage'],
+      has_toolkit_nodes: false,
+      toolkit_node_names: [],
+      trigger_source: 'button',
+      view_mode: 'graph',
+      is_app_mode: false,
+      dock_state: 'floating'
+    })
+  })
+
+  it('tracks the completed run button payload', () => {
+    useRunButtonTelemetry().trackRunButton({ trigger_source: 'linear' })
+
+    expect(state.telemetry.trackRunButton).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
+        subscribe_to_run: false,
+        trigger_source: 'linear',
+        workflow_name: 'Desktop workflow'
+      })
+    )
+  })
+
+  it('does not throw when run button context collection fails', () => {
+    const error = new Error('Context unavailable')
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    state.executionContextError = error
+
+    try {
+      expect(() =>
+        useRunButtonTelemetry().trackRunButton({ trigger_source: 'linear' })
+      ).not.toThrow()
+
+      expect(state.telemetry.trackRunButton).not.toHaveBeenCalled()
+      expect(consoleError).toHaveBeenCalledExactlyOnceWith(
+        '[Telemetry] Run button tracking failed',
+        error
+      )
+    } finally {
+      consoleError.mockRestore()
+    }
+  })
+})
diff --git a/src/composables/useRunButtonTelemetry.ts b/src/composables/useRunButtonTelemetry.ts
new file mode 100644
index 0000000000..cff02dbb45
--- /dev/null
+++ b/src/composables/useRunButtonTelemetry.ts
@@ -0,0 +1,52 @@
+import { useAppMode } from '@/composables/useAppMode'
+import { useTelemetry } from '@/platform/telemetry'
+import type {
+  ExecutionTriggerSource,
+  RunButtonProperties
+} from '@/platform/telemetry/types'
+import { getActionbarDockState } from '@/platform/telemetry/utils/getActionbarDockState'
+import { getExecutionContext } from '@/platform/telemetry/utils/getExecutionContext'
+
+export type RunButtonTelemetryOptions = {
+  subscribe_to_run?: boolean
+  trigger_source?: ExecutionTriggerSource
+}
+
+export function getRunButtonTelemetryProperties(
+  options?: RunButtonTelemetryOptions
+): RunButtonProperties {
+  const executionContext = getExecutionContext()
+  const { mode, isAppMode } = useAppMode()
+
+  return {
+    subscribe_to_run: options?.subscribe_to_run ?? false,
+    workflow_type: executionContext.is_template ? 'template' : 'custom',
+    workflow_name: executionContext.workflow_name ?? 'untitled',
+    custom_node_count: executionContext.custom_node_count,
+    total_node_count: executionContext.total_node_count,
+    subgraph_count: executionContext.subgraph_count,
+    has_api_nodes: executionContext.has_api_nodes,
+    api_node_names: executionContext.api_node_names,
+    has_toolkit_nodes: executionContext.has_toolkit_nodes,
+    toolkit_node_names: executionContext.toolkit_node_names,
+    trigger_source: options?.trigger_source,
+    view_mode: mode.value,
+    is_app_mode: isAppMode.value,
+    dock_state: getActionbarDockState()
+  }
+}
+
+export function useRunButtonTelemetry() {
+  function trackRunButton(options?: RunButtonTelemetryOptions): void {
+    const telemetry = useTelemetry()
+    if (!telemetry) return
+
+    try {
+      telemetry.trackRunButton(getRunButtonTelemetryProperties(options))
+    } catch (error) {
+      console.error('[Telemetry] Run button tracking failed', error)
+    }
+  }
+
+  return { trackRunButton }
+}
diff --git a/src/extensions/core/cloudSubscription.ts b/src/extensions/core/cloudSubscription.ts
deleted file mode 100644
index 4a107d6f73..0000000000
--- a/src/extensions/core/cloudSubscription.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { watch } from 'vue'
-
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useExtensionService } from '@/services/extensionService'
-
-/**
- * Cloud-only extension that enforces active subscription requirement
- */
-useExtensionService().registerExtension({
-  name: 'Comfy.Cloud.Subscription',
-
-  setup: async () => {
-    const { isLoggedIn } = useCurrentUser()
-    const { requireActiveSubscription } = useBillingContext()
-
-    const checkSubscriptionStatus = () => {
-      if (!isLoggedIn.value) return
-      void requireActiveSubscription()
-    }
-
-    watch(() => isLoggedIn.value, checkSubscriptionStatus, {
-      immediate: true
-    })
-  }
-})
diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts
index 3a2a9fd4b4..37cc00935f 100644
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -36,10 +36,6 @@ if (isCloud) {
   await import('./cloudRemoteConfig')
   await import('./cloudBadges')
   await import('./cloudSessionCookie')
-
-  if (window.__CONFIG__?.subscription_required) {
-    await import('./cloudSubscription')
-  }
 }
 
 // Feedback button for cloud and nightly builds
diff --git a/src/extensions/core/load3d/ControlsManager.test.ts b/src/extensions/core/load3d/ControlsManager.test.ts
index 0769f9c2dd..21791a124f 100644
--- a/src/extensions/core/load3d/ControlsManager.test.ts
+++ b/src/extensions/core/load3d/ControlsManager.test.ts
@@ -14,6 +14,7 @@ vi.mock('three/examples/jsm/controls/OrbitControls', () => {
     object: THREE.Camera
     domElement: HTMLElement
     enableDamping = false
+    enabled = true
     target = new THREE.Vector3()
     update = vi.fn()
     dispose = vi.fn()
@@ -165,4 +166,24 @@ describe('ControlsManager', () => {
       expect(manager.controls.dispose).toHaveBeenCalled()
     })
   })
+
+  describe('detach / attach', () => {
+    it('detach disables OrbitControls interaction', () => {
+      manager = new ControlsManager(makeRenderer(), camera, events)
+      expect(manager.controls.enabled).toBe(true)
+
+      manager.detach()
+
+      expect(manager.controls.enabled).toBe(false)
+    })
+
+    it('attach re-enables OrbitControls interaction', () => {
+      manager = new ControlsManager(makeRenderer(), camera, events)
+      manager.detach()
+
+      manager.attach()
+
+      expect(manager.controls.enabled).toBe(true)
+    })
+  })
 })
diff --git a/src/extensions/core/load3d/ControlsManager.ts b/src/extensions/core/load3d/ControlsManager.ts
index 3018a0bcb4..d5da3f950e 100644
--- a/src/extensions/core/load3d/ControlsManager.ts
+++ b/src/extensions/core/load3d/ControlsManager.ts
@@ -63,6 +63,15 @@ export class ControlsManager implements ControlsManagerInterface {
     camera.position.copy(position)
     this.controls.update()
   }
+
+  detach(): void {
+    this.controls.enabled = false
+  }
+
+  attach(): void {
+    this.controls.enabled = true
+  }
+
   reset(): void {
     this.controls.target.set(0, 0, 0)
     this.controls.update()
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index a6e2efb590..71b0b0625d 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -2,26 +2,19 @@ import * as THREE from 'three'
 import { clone as cloneSkinned } from 'three/examples/jsm/utils/SkeletonUtils.js'
 
 import type { AnimationManager } from './AnimationManager'
-import type { CameraManager } from './CameraManager'
-import type { ControlsManager } from './ControlsManager'
-import type { EventManager } from './EventManager'
 import type { GizmoManager } from './GizmoManager'
 import type { HDRIManager } from './HDRIManager'
-import type { LightingManager } from './LightingManager'
 import type { LoaderManager } from './LoaderManager'
-import { DIRECT_EXPORT_FORMATS } from './constants'
 import { ModelExporter } from './ModelExporter'
 import { DEFAULT_MODEL_CAPABILITIES } from './ModelAdapter'
 import type { AdapterRef, ModelAdapterCapabilities } from './ModelAdapter'
 import type { RecordingManager } from './RecordingManager'
-import type { SceneManager } from './SceneManager'
 import type { SceneModelManager } from './SceneModelManager'
-import type { ViewHelperManager } from './ViewHelperManager'
+import { Viewport3d, type Viewport3dDeps } from './Viewport3d'
 import { computeCameraFromMatrices } from './cameraFromMatrices'
+import { DIRECT_EXPORT_FORMATS } from './constants'
 import type {
-  CameraState,
   CaptureResult,
-  EventCallback,
   GizmoMode,
   Load3DOptions,
   LoadModelOptions,
@@ -29,20 +22,10 @@ import type {
   Model3DTransform,
   UpDirection
 } from './interfaces'
-import { attachContextMenuGuard } from './load3dContextMenuGuard'
-import type { RenderLoopHandle } from './load3dRenderLoop'
-import { startRenderLoop } from './load3dRenderLoop'
 import { computeLetterboxedViewport, isLoad3dActive } from './load3dViewport'
 
-export type Load3dDeps = {
-  renderer: THREE.WebGLRenderer
-  eventManager: EventManager
-  sceneManager: SceneManager
-  cameraManager: CameraManager
-  controlsManager: ControlsManager
-  lightingManager: LightingManager
+export type Load3dDeps = Viewport3dDeps & {
   hdriManager: HDRIManager
-  viewHelperManager: ViewHelperManager
   loaderManager: LoaderManager
   modelManager: SceneModelManager
   recordingManager: RecordingManager
@@ -70,22 +53,8 @@ function positionThumbnailCamera(
   camera.updateProjectionMatrix()
 }
 
-class Load3d {
-  renderer: THREE.WebGLRenderer
-  protected clock: THREE.Clock
-  private renderLoop: RenderLoopHandle | null = null
-  private loadingPromise: Promise<void> | null = null
-  private _loadGeneration: number = 0
-  private onContextMenuCallback?: (event: MouseEvent) => void
-  private getDimensionsCallback?: () => { width: number; height: number } | null
-
-  eventManager: EventManager
-  sceneManager: SceneManager
-  cameraManager: CameraManager
-  controlsManager: ControlsManager
-  lightingManager: LightingManager
+class Load3d extends Viewport3d {
   hdriManager: HDRIManager
-  viewHelperManager: ViewHelperManager
   loaderManager: LoaderManager
   modelManager: SceneModelManager
   recordingManager: RecordingManager
@@ -93,19 +62,8 @@ class Load3d {
   gizmoManager: GizmoManager
   adapterRef: AdapterRef
 
-  STATUS_MOUSE_ON_NODE: boolean
-  STATUS_MOUSE_ON_SCENE: boolean
-  STATUS_MOUSE_ON_VIEWER: boolean
-  INITIAL_RENDER_DONE: boolean = false
-
-  targetWidth: number = 0
-  targetHeight: number = 0
-  targetAspectRatio: number = 1
-  isViewerMode: boolean = false
-
-  private disposeContextMenuGuard: (() => void) | null = null
-  private resizeObserver: ResizeObserver | null = null
-  private getZoomScaleCallback: (() => number) | undefined
+  private loadingPromise: Promise<void> | null = null
+  private _loadGeneration: number = 0
   private hasLoadedModel: boolean = false
 
   constructor(
@@ -113,26 +71,9 @@ class Load3d {
     deps: Load3dDeps,
     options: Load3DOptions = {}
   ) {
-    this.clock = new THREE.Clock()
-    this.isViewerMode = options.isViewerMode || false
-    this.onContextMenuCallback = options.onContextMenu
-    this.getDimensionsCallback = options.getDimensions
-    this.getZoomScaleCallback = options.getZoomScale
+    super(container, deps, options)
 
-    if (options.width && options.height) {
-      this.targetWidth = options.width
-      this.targetHeight = options.height
-      this.targetAspectRatio = options.width / options.height
-    }
-
-    this.renderer = deps.renderer
-    this.eventManager = deps.eventManager
-    this.sceneManager = deps.sceneManager
-    this.cameraManager = deps.cameraManager
-    this.controlsManager = deps.controlsManager
-    this.lightingManager = deps.lightingManager
     this.hdriManager = deps.hdriManager
-    this.viewHelperManager = deps.viewHelperManager
     this.loaderManager = deps.loaderManager
     this.modelManager = deps.modelManager
     this.recordingManager = deps.recordingManager
@@ -140,35 +81,16 @@ class Load3d {
     this.gizmoManager = deps.gizmoManager
     this.adapterRef = deps.adapterRef
 
-    this.sceneManager.init()
-    this.cameraManager.init()
-    this.controlsManager.init()
-    this.lightingManager.init()
     this.loaderManager.init()
     this.animationManager.init()
     this.gizmoManager.init()
 
-    this.viewHelperManager.createViewHelper(container)
-    this.viewHelperManager.init()
-
-    this.STATUS_MOUSE_ON_NODE = false
-    this.STATUS_MOUSE_ON_SCENE = false
-    this.STATUS_MOUSE_ON_VIEWER = false
-
-    this.initContextMenu()
-    this.initResizeObserver(container)
-
-    this.handleResize()
-    this.startAnimation()
-
     this.eventManager.addEventListener('modelReady', () => {
       if (this.adapterRef.current?.kind !== 'splat') return
       void this.repaintWhenSparkPaintable()
     })
 
-    setTimeout(() => {
-      this.forceRender()
-    }, 100)
+    this.start()
   }
 
   private async repaintWhenSparkPaintable(): Promise<void> {
@@ -178,49 +100,14 @@ class Load3d {
     this.forceRender()
   }
 
-  private initResizeObserver(container: Element | HTMLElement): void {
-    if (typeof ResizeObserver === 'undefined') return
-
-    this.resizeObserver?.disconnect()
-    this.resizeObserver = new ResizeObserver(() => {
-      this.handleResize()
-    })
-    this.resizeObserver.observe(container)
-  }
-
-  private initContextMenu(): void {
-    this.disposeContextMenuGuard = attachContextMenuGuard(
-      this.renderer.domElement,
-      (event) => this.onContextMenuCallback?.(event),
-      { isDisabled: () => this.isViewerMode }
-    )
-  }
-
-  getEventManager(): EventManager {
-    return this.eventManager
-  }
-
-  getSceneManager(): SceneManager {
-    return this.sceneManager
-  }
-  getCameraManager(): CameraManager {
-    return this.cameraManager
-  }
-  getControlsManager(): ControlsManager {
-    return this.controlsManager
-  }
-  getLightingManager(): LightingManager {
-    return this.lightingManager
-  }
-  getViewHelperManager(): ViewHelperManager {
-    return this.viewHelperManager
-  }
   getLoaderManager(): LoaderManager {
     return this.loaderManager
   }
+
   getModelManager(): SceneModelManager {
     return this.modelManager
   }
+
   getRecordingManager(): RecordingManager {
     return this.recordingManager
   }
@@ -229,119 +116,12 @@ class Load3d {
     return this.gizmoManager
   }
 
-  getTargetSize(): { width: number; height: number } {
-    return {
-      width: this.targetWidth,
-      height: this.targetHeight
-    }
-  }
-
-  private shouldMaintainAspectRatio(): boolean {
-    return this.isViewerMode || (this.targetWidth > 0 && this.targetHeight > 0)
-  }
-
-  forceRender(): void {
-    const delta = this.clock.getDelta()
+  protected override tickPerFrame(delta: number): void {
     this.animationManager.update(delta)
-    this.viewHelperManager.update(delta)
-    this.controlsManager.update()
-
-    this.renderMainScene()
-
-    this.resetViewport()
-
-    if (this.viewHelperManager.viewHelper.render) {
-      this.viewHelperManager.viewHelper.render(this.renderer)
-    }
-
-    this.INITIAL_RENDER_DONE = true
+    super.tickPerFrame(delta)
   }
 
-  renderMainScene(): void {
-    const containerWidth = this.renderer.domElement.clientWidth
-    const containerHeight = this.renderer.domElement.clientHeight
-
-    if (this.getDimensionsCallback) {
-      const dims = this.getDimensionsCallback()
-      if (dims) {
-        this.targetWidth = dims.width
-        this.targetHeight = dims.height
-        this.targetAspectRatio = dims.width / dims.height
-      }
-    }
-
-    if (this.shouldMaintainAspectRatio()) {
-      const { offsetX, offsetY, width, height } = computeLetterboxedViewport(
-        { width: containerWidth, height: containerHeight },
-        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()
-
-      this.renderer.setViewport(offsetX, offsetY, width, height)
-      this.renderer.setScissor(offsetX, offsetY, width, height)
-
-      this.cameraManager.updateAspectRatio(width / height)
-    } else {
-      // No aspect ratio constraint: fill the entire container
-      this.renderer.setViewport(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissor(0, 0, containerWidth, containerHeight)
-      this.renderer.setScissorTest(true)
-    }
-
-    this.sceneManager.renderBackground()
-    this.renderer.render(
-      this.sceneManager.scene,
-      this.cameraManager.activeCamera
-    )
-  }
-
-  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)
-  }
-
-  private startAnimation(): void {
-    this.renderLoop = startRenderLoop({
-      tick: () => {
-        const delta = this.clock.getDelta()
-        this.animationManager.update(delta)
-        this.viewHelperManager.update(delta)
-        this.controlsManager.update()
-
-        this.renderMainScene()
-
-        this.resetViewport()
-
-        if (this.viewHelperManager.viewHelper.render) {
-          this.viewHelperManager.viewHelper.render(this.renderer)
-        }
-      },
-      isActive: () => this.isActive()
-    })
-  }
-
-  updateStatusMouseOnNode(onNode: boolean): void {
-    this.STATUS_MOUSE_ON_NODE = onNode
-  }
-
-  updateStatusMouseOnScene(onScene: boolean): void {
-    this.STATUS_MOUSE_ON_SCENE = onScene
-  }
-
-  updateStatusMouseOnViewer(onViewer: boolean): void {
-    this.STATUS_MOUSE_ON_VIEWER = onViewer
-  }
-
-  isActive(): boolean {
+  override isActive(): boolean {
     return isLoad3dActive({
       mouseOnNode: this.STATUS_MOUSE_ON_NODE,
       mouseOnScene: this.STATUS_MOUSE_ON_SCENE,
@@ -444,9 +224,27 @@ class Load3d {
     return ModelExporter.detectFormatFromURL(url)
   }
 
+  protected override onActiveCameraChanged(): void {
+    this.gizmoManager.updateCamera(this.cameraManager.activeCamera)
+  }
+
+  setFOV(fov: number): void {
+    this.cameraManager.setFOV(fov)
+    this.forceRender()
+  }
+
   setBackgroundColor(color: string): void {
     this.sceneManager.setBackgroundColor(color)
+    this.forceRender()
+  }
 
+  toggleGrid(showGrid: boolean): void {
+    this.sceneManager.toggleGrid(showGrid)
+    this.forceRender()
+  }
+
+  setLightIntensity(intensity: number): void {
+    this.lightingManager.setLightIntensity(intensity)
     this.forceRender()
   }
 
@@ -473,7 +271,6 @@ class Load3d {
           height
         )
       } else {
-        // No aspect ratio constraints: fill container
         this.sceneManager.updateBackgroundSize(
           this.sceneManager.backgroundTexture,
           this.sceneManager.backgroundMesh,
@@ -488,12 +285,6 @@ class Load3d {
 
   removeBackgroundImage(): void {
     this.sceneManager.removeBackgroundImage()
-
-    this.forceRender()
-  }
-
-  toggleGrid(showGrid: boolean): void {
-    this.sceneManager.toggleGrid(showGrid)
     this.forceRender()
   }
 
@@ -502,39 +293,6 @@ class Load3d {
     this.forceRender()
   }
 
-  toggleCamera(cameraType?: 'perspective' | 'orthographic'): void {
-    this.cameraManager.toggleCamera(cameraType)
-
-    this.controlsManager.updateCamera(this.cameraManager.activeCamera)
-    this.gizmoManager.updateCamera(this.cameraManager.activeCamera)
-    this.viewHelperManager.recreateViewHelper()
-
-    this.handleResize()
-  }
-
-  getCurrentCameraType(): 'perspective' | 'orthographic' {
-    return this.cameraManager.getCurrentCameraType()
-  }
-
-  getCurrentModel(): THREE.Object3D | null {
-    return this.modelManager.currentModel
-  }
-
-  setCameraState(state: CameraState): void {
-    this.cameraManager.setCameraState(state)
-
-    this.forceRender()
-  }
-
-  getCameraState(): CameraState {
-    return this.cameraManager.getCameraState()
-  }
-
-  setFOV(fov: number): void {
-    this.cameraManager.setFOV(fov)
-    this.forceRender()
-  }
-
   setCameraFromMatrices(
     extrinsics: readonly (readonly number[])[],
     intrinsics: readonly (readonly number[])[]
@@ -553,19 +311,15 @@ class Load3d {
     this.setFOV(fovYDegrees)
   }
 
+  getCurrentModel(): THREE.Object3D | null {
+    return this.modelManager.currentModel
+  }
+
   setMaterialMode(mode: MaterialMode): void {
     this.modelManager.setMaterialMode(mode)
     this.forceRender()
   }
 
-  /**
-   * Monotonic counter that ticks once per loadModel call, **before** any
-   * await. Callers can capture this immediately after triggering a load and
-   * later compare against `currentLoadGeneration` to verify their load is
-   * still the latest one — useful when chaining post-load work
-   * (e.g. applying camera matrices) through `whenLoadIdle()`, which would
-   * otherwise wait for any newer queued load and apply stale state to it.
-   */
   get currentLoadGeneration(): number {
     return this._loadGeneration
   }
@@ -606,8 +360,6 @@ class Load3d {
     originalFileName?: string,
     options?: LoadModelOptions
   ): Promise<void> {
-    // First load always uses default framing; subsequent reloads preserve
-    // the user's framing.
     const shouldRetainView = this.hasLoadedModel
     const savedCameraState = shouldRetainView
       ? this.cameraManager.getCameraState()
@@ -623,7 +375,6 @@ class Load3d {
 
     await this.loaderManager.loadModel(url, originalFileName, options)
 
-    // Auto-detect and setup animations if present
     if (this.modelManager.currentModel) {
       this.animationManager.setupModelAnimations(
         this.modelManager.currentModel,
@@ -633,7 +384,6 @@ class Load3d {
     }
 
     if (savedCameraState) {
-      // setupForModel runs during loadModel and clobbers the camera; restore on top.
       if (
         savedCameraState.cameraType !==
         this.cameraManager.getCurrentCameraType()
@@ -674,11 +424,6 @@ class Load3d {
     this.forceRender()
   }
 
-  setLightIntensity(intensity: number): void {
-    this.lightingManager.setLightIntensity(intensity)
-    this.forceRender()
-  }
-
   async loadHDRI(url: string): Promise<void> {
     await this.hdriManager.loadHDRI(url)
     this.forceRender()
@@ -706,73 +451,10 @@ class Load3d {
     this.forceRender()
   }
 
-  setTargetSize(width: number, height: number): void {
-    this.targetWidth = width
-    this.targetHeight = height
-    this.targetAspectRatio = width / height
-    this.handleResize()
-  }
-
-  addEventListener<T>(event: string, callback: EventCallback<T>): void {
-    this.eventManager.addEventListener(event, callback)
-  }
-
-  removeEventListener<T>(event: string, callback: EventCallback<T>): void {
-    this.eventManager.removeEventListener(event, callback)
-  }
-
   emitModelReady(): void {
     this.eventManager.emitEvent('modelReady', null)
   }
 
-  refreshViewport(): void {
-    this.handleResize()
-  }
-
-  handleResize(): void {
-    const parentElement = this.renderer?.domElement?.parentElement
-
-    if (!parentElement) {
-      console.warn('Parent element not found')
-      return
-    }
-
-    const containerWidth = parentElement.clientWidth
-    const containerHeight = parentElement.clientHeight
-
-    // Scale pixel density to match the graph zoom level so the 3D scene
-    // renders at the correct resolution when the canvas is zoomed in or out.
-    const zoomScale = this.getZoomScaleCallback?.() ?? 1
-    this.renderer.setPixelRatio(Math.min(zoomScale, 3))
-
-    if (this.getDimensionsCallback) {
-      const dims = this.getDimensionsCallback()
-      if (dims) {
-        this.targetWidth = dims.width
-        this.targetHeight = dims.height
-        this.targetAspectRatio = dims.width / dims.height
-      }
-    }
-
-    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 {
-      // No aspect ratio constraint: use container dimensions directly
-      this.renderer.setSize(containerWidth, containerHeight)
-      this.cameraManager.handleResize(containerWidth, containerHeight)
-      this.sceneManager.handleResize(containerWidth, containerHeight)
-    }
-
-    this.forceRender()
-  }
-
   captureScene(width: number, height: number): Promise<CaptureResult> {
     this.gizmoManager.removeFromScene()
 
@@ -818,7 +500,6 @@ class Load3d {
     this.recordingManager.clearRecording()
   }
 
-  // Animation methods
   public setAnimationSpeed(speed: number): void {
     this.animationManager.setAnimationSpeed(speed)
   }
@@ -977,41 +658,15 @@ class Load3d {
     this.forceRender()
   }
 
-  public remove(): void {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-      this.resizeObserver = null
-    }
-
-    this.disposeContextMenuGuard?.()
-    this.disposeContextMenuGuard = null
-
-    this.renderer.forceContextLoss()
-    const canvas = this.renderer.domElement
-    const event = new Event('webglcontextlost', {
-      bubbles: true,
-      cancelable: true
-    })
-    canvas.dispatchEvent(event)
-
-    this.renderLoop?.stop()
-    this.renderLoop = null
-
-    this.sceneManager.dispose()
-    this.cameraManager.dispose()
-    this.controlsManager.dispose()
-    this.lightingManager.dispose()
+  protected override disposeManagers(): void {
+    super.disposeManagers()
     this.hdriManager.dispose()
-    this.viewHelperManager.dispose()
     this.loaderManager.dispose()
     this.modelManager.dispose()
     this.adapterRef.current = null
     this.recordingManager.dispose()
     this.animationManager.dispose()
     this.gizmoManager.dispose()
-
-    this.renderer.dispose()
-    this.renderer.domElement.remove()
   }
 }
 
diff --git a/src/extensions/core/load3d/Viewport3d.test.ts b/src/extensions/core/load3d/Viewport3d.test.ts
new file mode 100644
index 0000000000..f9299eb658
--- /dev/null
+++ b/src/extensions/core/load3d/Viewport3d.test.ts
@@ -0,0 +1,433 @@
+import * as THREE from 'three'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { Viewport3d } from '@/extensions/core/load3d/Viewport3d'
+
+type CameraStub = {
+  toggleCamera: ReturnType<typeof vi.fn>
+  setupForModel: ReturnType<typeof vi.fn>
+  reset: ReturnType<typeof vi.fn>
+  getCameraState: ReturnType<typeof vi.fn>
+  setCameraState: ReturnType<typeof vi.fn>
+  setFOV: ReturnType<typeof vi.fn>
+  getCurrentCameraType: ReturnType<typeof vi.fn>
+  handleResize: ReturnType<typeof vi.fn>
+  updateAspectRatio: ReturnType<typeof vi.fn>
+  activeCamera: THREE.Camera
+}
+
+type SceneStub = {
+  captureScene: ReturnType<typeof vi.fn>
+  setBackgroundColor: ReturnType<typeof vi.fn>
+  setBackgroundImage: ReturnType<typeof vi.fn>
+  removeBackgroundImage: ReturnType<typeof vi.fn>
+  toggleGrid: ReturnType<typeof vi.fn>
+  setBackgroundRenderMode: ReturnType<typeof vi.fn>
+  handleResize: ReturnType<typeof vi.fn>
+  renderBackground: ReturnType<typeof vi.fn>
+  dispose: ReturnType<typeof vi.fn>
+  updateBackgroundSize: ReturnType<typeof vi.fn>
+  backgroundTexture: unknown
+  backgroundMesh: unknown
+  scene: THREE.Scene
+}
+
+function makeViewportInstance() {
+  const cameraManager: CameraStub = {
+    toggleCamera: vi.fn(),
+    setupForModel: vi.fn(),
+    reset: vi.fn(),
+    getCameraState: vi.fn(() => ({
+      position: new THREE.Vector3(),
+      target: new THREE.Vector3(),
+      zoom: 1,
+      cameraType: 'perspective' as const
+    })),
+    setCameraState: vi.fn(),
+    setFOV: vi.fn(),
+    getCurrentCameraType: vi.fn(() => 'perspective' as const),
+    handleResize: vi.fn(),
+    updateAspectRatio: vi.fn(),
+    activeCamera: new THREE.PerspectiveCamera()
+  }
+  const sceneManager: SceneStub = {
+    captureScene: vi.fn(),
+    setBackgroundColor: vi.fn(),
+    setBackgroundImage: vi.fn().mockResolvedValue(undefined),
+    removeBackgroundImage: vi.fn(),
+    toggleGrid: vi.fn(),
+    setBackgroundRenderMode: vi.fn(),
+    handleResize: vi.fn(),
+    renderBackground: vi.fn(),
+    dispose: vi.fn(),
+    updateBackgroundSize: vi.fn(),
+    backgroundTexture: null,
+    backgroundMesh: null,
+    scene: new THREE.Scene()
+  }
+  const controlsManager = {
+    updateCamera: vi.fn(),
+    update: vi.fn(),
+    dispose: vi.fn(),
+    reset: vi.fn(),
+    detach: vi.fn(),
+    attach: vi.fn()
+  }
+  const lightingManager = {
+    setLightIntensity: vi.fn(),
+    dispose: vi.fn()
+  }
+  const viewHelperManager = {
+    recreateViewHelper: vi.fn(),
+    update: vi.fn(),
+    visibleViewHelper: vi.fn(),
+    viewHelper: { render: vi.fn() },
+    dispose: vi.fn()
+  }
+  const eventManager = {
+    emitEvent: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+
+  const viewport = Object.create(Viewport3d.prototype) as Viewport3d
+  Object.assign(viewport, {
+    cameraManager,
+    sceneManager,
+    controlsManager,
+    lightingManager,
+    viewHelperManager,
+    eventManager,
+    forceRender: vi.fn(),
+    handleResize: vi.fn()
+  })
+
+  return {
+    viewport,
+    cameraManager,
+    sceneManager,
+    controlsManager,
+    lightingManager,
+    viewHelperManager,
+    eventManager,
+    forceRender: viewport.forceRender as ReturnType<typeof vi.fn>
+  }
+}
+
+describe('Viewport3d', () => {
+  let ctx: ReturnType<typeof makeViewportInstance>
+
+  beforeEach(() => {
+    ctx = makeViewportInstance()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('camera delegation (model-independent)', () => {
+    it('toggleCamera updates controls and recreates view helper without touching model state', () => {
+      ctx.viewport.toggleCamera('orthographic')
+
+      expect(ctx.cameraManager.toggleCamera).toHaveBeenCalledWith(
+        'orthographic'
+      )
+      expect(ctx.controlsManager.updateCamera).toHaveBeenCalledWith(
+        ctx.cameraManager.activeCamera
+      )
+      expect(ctx.viewHelperManager.recreateViewHelper).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('isActive (no model concerns)', () => {
+    it('returns false when no mouse activity is present', () => {
+      Object.assign(ctx.viewport, {
+        STATUS_MOUSE_ON_NODE: false,
+        STATUS_MOUSE_ON_SCENE: false,
+        STATUS_MOUSE_ON_VIEWER: false,
+        INITIAL_RENDER_DONE: true
+      })
+      expect(ctx.viewport.isActive()).toBe(false)
+    })
+
+    it('does not consult recording or animation state — that is a Load3d concern', () => {
+      Object.assign(ctx.viewport, {
+        STATUS_MOUSE_ON_NODE: false,
+        STATUS_MOUSE_ON_SCENE: false,
+        STATUS_MOUSE_ON_VIEWER: false,
+        INITIAL_RENDER_DONE: true
+      })
+      expect(() => ctx.viewport.isActive()).not.toThrow()
+    })
+  })
+
+  describe('manager accessors', () => {
+    it('exposes managers through both fields and getters', () => {
+      expect(ctx.viewport.cameraManager).toBe(ctx.cameraManager)
+      expect(ctx.viewport.getCameraManager()).toBe(ctx.cameraManager)
+      expect(ctx.viewport.sceneManager).toBe(ctx.sceneManager)
+      expect(ctx.viewport.getSceneManager()).toBe(ctx.sceneManager)
+      expect(ctx.viewport.controlsManager).toBe(ctx.controlsManager)
+      expect(ctx.viewport.getControlsManager()).toBe(ctx.controlsManager)
+      expect(ctx.viewport.lightingManager).toBe(ctx.lightingManager)
+      expect(ctx.viewport.getLightingManager()).toBe(ctx.lightingManager)
+      expect(ctx.viewport.viewHelperManager).toBe(ctx.viewHelperManager)
+      expect(ctx.viewport.getViewHelperManager()).toBe(ctx.viewHelperManager)
+      expect(ctx.viewport.eventManager).toBe(ctx.eventManager)
+      expect(ctx.viewport.getEventManager()).toBe(ctx.eventManager)
+    })
+  })
+
+  describe('POV swap (setExternalActiveCamera)', () => {
+    it('getRenderCamera returns the orbit camera when no external camera is set', () => {
+      expect(ctx.viewport.getRenderCamera()).toBe(
+        ctx.cameraManager.activeCamera
+      )
+    })
+
+    it('getRenderCamera returns the external camera once installed', () => {
+      const subjectCamera = new THREE.PerspectiveCamera()
+      ctx.viewport.setExternalActiveCamera(subjectCamera)
+
+      expect(ctx.viewport.getRenderCamera()).toBe(subjectCamera)
+    })
+
+    it('installing an external camera detaches controls and hides the view helper', () => {
+      const subjectCamera = new THREE.PerspectiveCamera()
+      ctx.viewport.setExternalActiveCamera(subjectCamera)
+
+      expect(ctx.controlsManager.detach).toHaveBeenCalledOnce()
+      expect(ctx.viewHelperManager.visibleViewHelper).toHaveBeenCalledWith(
+        false
+      )
+      expect(ctx.forceRender).toHaveBeenCalled()
+    })
+
+    it('clearing the external camera re-attaches controls and shows the view helper', () => {
+      const subjectCamera = new THREE.PerspectiveCamera()
+      ctx.viewport.setExternalActiveCamera(subjectCamera)
+      ctx.controlsManager.detach.mockClear()
+      ctx.controlsManager.attach.mockClear()
+      ctx.viewHelperManager.visibleViewHelper.mockClear()
+
+      ctx.viewport.setExternalActiveCamera(null)
+
+      expect(ctx.controlsManager.attach).toHaveBeenCalledOnce()
+      expect(ctx.viewHelperManager.visibleViewHelper).toHaveBeenCalledWith(true)
+      expect(ctx.viewport.getRenderCamera()).toBe(
+        ctx.cameraManager.activeCamera
+      )
+    })
+
+    it('setting the same external camera twice is a no-op', () => {
+      const subjectCamera = new THREE.PerspectiveCamera()
+      ctx.viewport.setExternalActiveCamera(subjectCamera)
+      ctx.controlsManager.detach.mockClear()
+
+      ctx.viewport.setExternalActiveCamera(subjectCamera)
+
+      expect(ctx.controlsManager.detach).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('overlay', () => {
+    function makeOverlay() {
+      return {
+        attach: vi.fn(),
+        detach: vi.fn(),
+        update: vi.fn(),
+        onActiveCameraChange: vi.fn(),
+        dispose: vi.fn()
+      }
+    }
+
+    it('setOverlay attaches to the scene and notifies of the current render camera', () => {
+      const overlay = makeOverlay()
+      ctx.viewport.setOverlay(overlay)
+
+      expect(overlay.attach).toHaveBeenCalledWith(ctx.sceneManager.scene)
+      expect(overlay.onActiveCameraChange).toHaveBeenCalledWith(
+        ctx.cameraManager.activeCamera
+      )
+      expect(ctx.viewport.getOverlay()).toBe(overlay)
+    })
+
+    it('replacing an overlay detaches and disposes the prior one', () => {
+      const first = makeOverlay()
+      const second = makeOverlay()
+      ctx.viewport.setOverlay(first)
+      ctx.viewport.setOverlay(second)
+
+      expect(first.detach).toHaveBeenCalledOnce()
+      expect(first.dispose).toHaveBeenCalledOnce()
+      expect(second.attach).toHaveBeenCalledWith(ctx.sceneManager.scene)
+      expect(ctx.viewport.getOverlay()).toBe(second)
+    })
+
+    it('removeOverlay detaches and disposes the installed overlay', () => {
+      const overlay = makeOverlay()
+      ctx.viewport.setOverlay(overlay)
+
+      ctx.viewport.removeOverlay()
+
+      expect(overlay.detach).toHaveBeenCalledOnce()
+      expect(overlay.dispose).toHaveBeenCalledOnce()
+      expect(ctx.viewport.getOverlay()).toBeNull()
+    })
+
+    it('tickPerFrame forwards delta to the overlay before view-helper/controls update', () => {
+      const overlay = makeOverlay()
+      ctx.viewport.setOverlay(overlay)
+
+      const tick = (
+        ctx.viewport as unknown as {
+          tickPerFrame(delta: number): void
+        }
+      ).tickPerFrame.bind(ctx.viewport)
+      tick(0.016)
+
+      expect(overlay.update).toHaveBeenCalledWith(0.016)
+      expect(ctx.viewHelperManager.update).toHaveBeenCalledWith(0.016)
+      expect(ctx.controlsManager.update).toHaveBeenCalledOnce()
+    })
+
+    it('toggleCamera notifies the overlay with the new orbit camera (when no POV)', () => {
+      const overlay = makeOverlay()
+      ctx.viewport.setOverlay(overlay)
+      overlay.onActiveCameraChange.mockClear()
+
+      ctx.viewport.toggleCamera('orthographic')
+
+      expect(overlay.onActiveCameraChange).toHaveBeenCalledWith(
+        ctx.cameraManager.activeCamera
+      )
+    })
+
+    it('toggleCamera does NOT notify the overlay while a POV camera is active', () => {
+      const overlay = makeOverlay()
+      const subjectCamera = new THREE.PerspectiveCamera()
+      ctx.viewport.setOverlay(overlay)
+      ctx.viewport.setExternalActiveCamera(subjectCamera)
+      overlay.onActiveCameraChange.mockClear()
+
+      ctx.viewport.toggleCamera('orthographic')
+
+      expect(overlay.onActiveCameraChange).not.toHaveBeenCalled()
+    })
+
+    it('setExternalActiveCamera notifies the overlay with the new render camera', () => {
+      const overlay = makeOverlay()
+      const subjectCamera = new THREE.PerspectiveCamera()
+      ctx.viewport.setOverlay(overlay)
+      overlay.onActiveCameraChange.mockClear()
+
+      ctx.viewport.setExternalActiveCamera(subjectCamera)
+
+      expect(overlay.onActiveCameraChange).toHaveBeenCalledWith(subjectCamera)
+    })
+  })
+
+  describe('applyTargetSize guards', () => {
+    function applyTargetSize(width: number, height: number): void {
+      ;(
+        ctx.viewport as unknown as {
+          applyTargetSize(w: number, h: number): void
+        }
+      ).applyTargetSize(width, height)
+    }
+
+    beforeEach(() => {
+      Object.assign(ctx.viewport, {
+        targetWidth: 0,
+        targetHeight: 0,
+        targetAspectRatio: 1
+      })
+    })
+
+    it('writes width / height / aspect when both inputs are positive finite', () => {
+      applyTargetSize(800, 400)
+
+      expect(ctx.viewport.targetWidth).toBe(800)
+      expect(ctx.viewport.targetHeight).toBe(400)
+      expect(ctx.viewport.targetAspectRatio).toBe(2)
+    })
+
+    it.for([
+      ['zero width', 0, 100],
+      ['zero height', 100, 0],
+      ['negative width', -100, 100],
+      ['negative height', 100, -100],
+      ['NaN width', Number.NaN, 100],
+      ['Infinity height', 100, Number.POSITIVE_INFINITY]
+    ] as const)('rejects %s without touching prior state', ([, w, h]) => {
+      Object.assign(ctx.viewport, {
+        targetWidth: 800,
+        targetHeight: 400,
+        targetAspectRatio: 2
+      })
+
+      applyTargetSize(w, h)
+
+      expect(ctx.viewport.targetWidth).toBe(800)
+      expect(ctx.viewport.targetHeight).toBe(400)
+      expect(ctx.viewport.targetAspectRatio).toBe(2)
+    })
+
+    it('setTargetSize routes through the guard', () => {
+      Object.assign(ctx.viewport, {
+        targetWidth: 800,
+        targetHeight: 400,
+        targetAspectRatio: 2
+      })
+
+      ctx.viewport.setTargetSize(0, 0)
+
+      expect(ctx.viewport.targetAspectRatio).toBe(2)
+    })
+  })
+
+  describe('start / remove lifecycle', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+      Object.assign(ctx.viewport, {
+        hasStarted: false,
+        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()
+          })
+        },
+        disposeManagers: vi.fn()
+      })
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('start schedules a deferred forceRender and remove clears it before the timer fires', () => {
+      ctx.viewport.start()
+      ctx.forceRender.mockClear()
+
+      ctx.viewport.remove()
+      vi.advanceTimersByTime(500)
+
+      expect(ctx.forceRender).not.toHaveBeenCalled()
+    })
+
+    it('the deferred forceRender does fire when remove is not called', () => {
+      ctx.viewport.start()
+      ctx.forceRender.mockClear()
+
+      vi.advanceTimersByTime(100)
+
+      expect(ctx.forceRender).toHaveBeenCalledOnce()
+    })
+  })
+})
diff --git a/src/extensions/core/load3d/Viewport3d.ts b/src/extensions/core/load3d/Viewport3d.ts
new file mode 100644
index 0000000000..a35bd52de6
--- /dev/null
+++ b/src/extensions/core/load3d/Viewport3d.ts
@@ -0,0 +1,440 @@
+import * as THREE from 'three'
+
+import type { CameraManager } from './CameraManager'
+import type { ControlsManager } from './ControlsManager'
+import type { EventManager } from './EventManager'
+import type { LightingManager } from './LightingManager'
+import type { SceneManager } from './SceneManager'
+import type { ViewHelperManager } from './ViewHelperManager'
+import type {
+  CameraState,
+  EventCallback,
+  Load3DOptions,
+  SceneOverlay
+} from './interfaces'
+import { attachContextMenuGuard } from './load3dContextMenuGuard'
+import type { RenderLoopHandle } from './load3dRenderLoop'
+import { startRenderLoop } from './load3dRenderLoop'
+import { computeLetterboxedViewport, isLoad3dActive } from './load3dViewport'
+
+export type Viewport3dDeps = {
+  renderer: THREE.WebGLRenderer
+  eventManager: EventManager
+  sceneManager: SceneManager
+  cameraManager: CameraManager
+  controlsManager: ControlsManager
+  lightingManager: LightingManager
+  viewHelperManager: ViewHelperManager
+}
+
+export class Viewport3d {
+  renderer: THREE.WebGLRenderer
+  protected clock: THREE.Clock
+  private renderLoop: RenderLoopHandle | null = null
+  private onContextMenuCallback?: (event: MouseEvent) => void
+  private getDimensionsCallback?: () => { width: number; height: number } | null
+
+  eventManager: EventManager
+  sceneManager: SceneManager
+  cameraManager: CameraManager
+  controlsManager: ControlsManager
+  lightingManager: LightingManager
+  viewHelperManager: ViewHelperManager
+
+  STATUS_MOUSE_ON_NODE: boolean
+  STATUS_MOUSE_ON_SCENE: boolean
+  STATUS_MOUSE_ON_VIEWER: boolean
+  INITIAL_RENDER_DONE: boolean = false
+
+  targetWidth: number = 0
+  targetHeight: number = 0
+  targetAspectRatio: number = 1
+  isViewerMode: boolean = false
+
+  private disposeContextMenuGuard: (() => void) | null = null
+  private resizeObserver: ResizeObserver | null = null
+  private getZoomScaleCallback: (() => number) | undefined
+  private externalActiveCamera: THREE.Camera | null = null
+  private overlay: SceneOverlay | null = null
+  private initialRenderTimer: ReturnType<typeof setTimeout> | null = null
+
+  constructor(
+    container: Element | HTMLElement,
+    deps: Viewport3dDeps,
+    options: Load3DOptions = {}
+  ) {
+    this.clock = new THREE.Clock()
+    this.isViewerMode = options.isViewerMode || false
+    this.onContextMenuCallback = options.onContextMenu
+    this.getDimensionsCallback = options.getDimensions
+    this.getZoomScaleCallback = options.getZoomScale
+
+    if (options.width !== undefined && options.height !== undefined) {
+      this.applyTargetSize(options.width, options.height)
+    }
+
+    this.renderer = deps.renderer
+    this.eventManager = deps.eventManager
+    this.sceneManager = deps.sceneManager
+    this.cameraManager = deps.cameraManager
+    this.controlsManager = deps.controlsManager
+    this.lightingManager = deps.lightingManager
+    this.viewHelperManager = deps.viewHelperManager
+
+    this.sceneManager.init()
+    this.cameraManager.init()
+    this.controlsManager.init()
+    this.lightingManager.init()
+
+    this.viewHelperManager.createViewHelper(container)
+    this.viewHelperManager.init()
+
+    this.STATUS_MOUSE_ON_NODE = false
+    this.STATUS_MOUSE_ON_SCENE = false
+    this.STATUS_MOUSE_ON_VIEWER = false
+
+    this.initContextMenu()
+    this.initResizeObserver(container)
+  }
+
+  start(): void {
+    if (this.hasStarted) return
+    this.hasStarted = true
+    this.handleResize()
+    this.startAnimation()
+    this.initialRenderTimer = setTimeout(() => {
+      this.initialRenderTimer = null
+      this.forceRender()
+    }, 100)
+  }
+
+  private hasStarted: boolean = false
+
+  private applyTargetSize(width: number, height: number): void {
+    if (!Number.isFinite(width) || !Number.isFinite(height)) return
+    if (width <= 0 || height <= 0) return
+    this.targetWidth = width
+    this.targetHeight = height
+    this.targetAspectRatio = width / height
+  }
+
+  private initResizeObserver(container: Element | HTMLElement): void {
+    if (typeof ResizeObserver === 'undefined') return
+
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleResize()
+    })
+    this.resizeObserver.observe(container)
+  }
+
+  private initContextMenu(): void {
+    this.disposeContextMenuGuard = attachContextMenuGuard(
+      this.renderer.domElement,
+      (event) => this.onContextMenuCallback?.(event),
+      { isDisabled: () => this.isViewerMode }
+    )
+  }
+
+  getEventManager(): EventManager {
+    return this.eventManager
+  }
+  getSceneManager(): SceneManager {
+    return this.sceneManager
+  }
+  getCameraManager(): CameraManager {
+    return this.cameraManager
+  }
+  getControlsManager(): ControlsManager {
+    return this.controlsManager
+  }
+  getLightingManager(): LightingManager {
+    return this.lightingManager
+  }
+  getViewHelperManager(): ViewHelperManager {
+    return this.viewHelperManager
+  }
+
+  getTargetSize(): { width: number; height: number } {
+    return {
+      width: this.targetWidth,
+      height: this.targetHeight
+    }
+  }
+
+  protected shouldMaintainAspectRatio(): boolean {
+    return this.isViewerMode || (this.targetWidth > 0 && this.targetHeight > 0)
+  }
+
+  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.INITIAL_RENDER_DONE = true
+  }
+
+  protected tickPerFrame(delta: number): void {
+    this.overlay?.update?.(delta)
+    this.viewHelperManager.update(delta)
+    this.controlsManager.update()
+  }
+
+  getRenderCamera(): THREE.Camera {
+    return this.externalActiveCamera ?? this.cameraManager.activeCamera
+  }
+
+  setExternalActiveCamera(camera: THREE.Camera | null): void {
+    if (this.externalActiveCamera === camera) return
+    this.externalActiveCamera = camera
+    if (camera) {
+      this.controlsManager.detach()
+      this.viewHelperManager.visibleViewHelper(false)
+    } else {
+      this.controlsManager.attach()
+      this.viewHelperManager.visibleViewHelper(true)
+    }
+    this.overlay?.onActiveCameraChange?.(this.getRenderCamera())
+    this.forceRender()
+  }
+
+  setOverlay(overlay: SceneOverlay): void {
+    if (this.overlay === overlay) return
+    if (this.overlay) {
+      this.overlay.detach()
+      this.overlay.dispose()
+    }
+    this.overlay = overlay
+    overlay.attach(this.sceneManager.scene)
+    overlay.onActiveCameraChange?.(this.getRenderCamera())
+    this.forceRender()
+  }
+
+  removeOverlay(): void {
+    if (!this.overlay) return
+    this.overlay.detach()
+    this.overlay.dispose()
+    this.overlay = null
+    this.forceRender()
+  }
+
+  getOverlay(): SceneOverlay | null {
+    return this.overlay
+  }
+
+  renderMainScene(): void {
+    const containerWidth = this.renderer.domElement.clientWidth
+    const containerHeight = this.renderer.domElement.clientHeight
+
+    if (this.getDimensionsCallback) {
+      const dims = this.getDimensionsCallback()
+      if (dims) {
+        this.applyTargetSize(dims.width, dims.height)
+      }
+    }
+
+    if (this.shouldMaintainAspectRatio()) {
+      const { offsetX, offsetY, width, height } = computeLetterboxedViewport(
+        { width: containerWidth, height: containerHeight },
+        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()
+
+      this.renderer.setViewport(offsetX, offsetY, width, height)
+      this.renderer.setScissor(offsetX, offsetY, width, height)
+
+      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.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)
+        }
+      },
+      isActive: () => this.isActive()
+    })
+  }
+
+  updateStatusMouseOnNode(onNode: boolean): void {
+    this.STATUS_MOUSE_ON_NODE = onNode
+  }
+
+  updateStatusMouseOnScene(onScene: boolean): void {
+    this.STATUS_MOUSE_ON_SCENE = onScene
+  }
+
+  updateStatusMouseOnViewer(onViewer: boolean): void {
+    this.STATUS_MOUSE_ON_VIEWER = onViewer
+  }
+
+  isActive(): boolean {
+    return isLoad3dActive({
+      mouseOnNode: this.STATUS_MOUSE_ON_NODE,
+      mouseOnScene: this.STATUS_MOUSE_ON_SCENE,
+      mouseOnViewer: this.STATUS_MOUSE_ON_VIEWER,
+      recording: false,
+      initialRenderDone: this.INITIAL_RENDER_DONE,
+      animationPlaying: false
+    })
+  }
+
+  toggleCamera(cameraType?: 'perspective' | 'orthographic'): void {
+    this.cameraManager.toggleCamera(cameraType)
+    this.controlsManager.updateCamera(this.cameraManager.activeCamera)
+    this.onActiveCameraChanged()
+    this.viewHelperManager.recreateViewHelper()
+    if (!this.externalActiveCamera) {
+      this.overlay?.onActiveCameraChange?.(this.cameraManager.activeCamera)
+    }
+    this.handleResize()
+  }
+
+  protected onActiveCameraChanged(): void {}
+
+  getCurrentCameraType(): 'perspective' | 'orthographic' {
+    return this.cameraManager.getCurrentCameraType()
+  }
+
+  setCameraState(state: CameraState): void {
+    this.cameraManager.setCameraState(state)
+    this.forceRender()
+  }
+
+  getCameraState(): CameraState {
+    return this.cameraManager.getCameraState()
+  }
+
+  setTargetSize(width: number, height: number): void {
+    this.applyTargetSize(width, height)
+    this.handleResize()
+  }
+
+  addEventListener<T>(event: string, callback: EventCallback<T>): void {
+    this.eventManager.addEventListener(event, callback)
+  }
+
+  removeEventListener<T>(event: string, callback: EventCallback<T>): void {
+    this.eventManager.removeEventListener(event, callback)
+  }
+
+  refreshViewport(): void {
+    this.handleResize()
+  }
+
+  handleResize(): void {
+    const parentElement = this.renderer?.domElement?.parentElement
+
+    if (!parentElement) {
+      console.warn('Parent element not found')
+      return
+    }
+
+    const containerWidth = parentElement.clientWidth
+    const containerHeight = parentElement.clientHeight
+
+    const zoomScale = this.getZoomScaleCallback?.() ?? 1
+    this.renderer.setPixelRatio(Math.min(zoomScale, 3))
+
+    if (this.getDimensionsCallback) {
+      const dims = this.getDimensionsCallback()
+      if (dims) {
+        this.applyTargetSize(dims.width, dims.height)
+      }
+    }
+
+    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)
+    }
+
+    this.forceRender()
+  }
+
+  remove(): void {
+    if (this.initialRenderTimer) {
+      clearTimeout(this.initialRenderTimer)
+      this.initialRenderTimer = null
+    }
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+
+    this.disposeContextMenuGuard?.()
+    this.disposeContextMenuGuard = null
+
+    this.renderer.forceContextLoss()
+    const canvas = this.renderer.domElement
+    const event = new Event('webglcontextlost', {
+      bubbles: true,
+      cancelable: true
+    })
+    canvas.dispatchEvent(event)
+
+    this.renderLoop?.stop()
+    this.renderLoop = null
+
+    this.disposeManagers()
+
+    this.renderer.dispose()
+    this.renderer.domElement.remove()
+  }
+
+  protected disposeManagers(): void {
+    if (this.overlay) {
+      this.overlay.detach()
+      this.overlay.dispose()
+      this.overlay = null
+    }
+    this.sceneManager.dispose()
+    this.cameraManager.dispose()
+    this.controlsManager.dispose()
+    this.lightingManager.dispose()
+    this.viewHelperManager.dispose()
+  }
+}
diff --git a/src/extensions/core/load3d/constants.ts b/src/extensions/core/load3d/constants.ts
index bb00c7f0d6..1f00368e4e 100644
--- a/src/extensions/core/load3d/constants.ts
+++ b/src/extensions/core/load3d/constants.ts
@@ -27,7 +27,7 @@ export const LOAD3D_NONE_MODEL = 'none'
 
 export const DIRECT_EXPORT_FORMATS = new Set(['ply', 'spz', 'splat', 'ksplat'])
 
-export interface ExportFormatOption {
+interface ExportFormatOption {
   label: string
   value: string
 }
diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index 0fc13c70f9..762f8252a5 100644
--- a/src/extensions/core/load3d/interfaces.ts
+++ b/src/extensions/core/load3d/interfaces.ts
@@ -244,6 +244,14 @@ export interface LoadModelOptions {
   silentOnNotFound?: boolean
 }
 
+export interface SceneOverlay {
+  attach(scene: THREE.Scene): void
+  detach(): void
+  update?(deltaSeconds: number): void
+  onActiveCameraChange?(camera: THREE.Camera): void
+  dispose(): void
+}
+
 export interface LoaderManagerInterface {
   init(): void
   dispose(): void
diff --git a/src/main.ts b/src/main.ts
index 3ad3e0199b..374e2d9248 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -31,21 +31,27 @@ import App from './App.vue'
 import './assets/css/style.css'
 import { i18n } from './i18n'
 
-/**
- * CRITICAL: Load remote config FIRST for cloud builds to ensure
- * window.__CONFIG__is available for all modules during initialization
- */
 const isCloud = __DISTRIBUTION__ === 'cloud'
+const hasHostTelemetryBridge = Boolean(window.__comfyDesktop2?.Telemetry)
+const requiresRemoteConfigBootstrap = isCloud || hasHostTelemetryBridge
 
-if (isCloud) {
+if (requiresRemoteConfigBootstrap) {
   const { refreshRemoteConfig } =
     await import('@/platform/remoteConfig/refreshRemoteConfig')
   await refreshRemoteConfig({ useAuth: false })
+}
 
+if (isCloud) {
   const { initTelemetry } = await import('@/platform/telemetry/initTelemetry')
   await initTelemetry()
 }
 
+if (hasHostTelemetryBridge) {
+  const { initHostTelemetry } =
+    await import('@/platform/telemetry/initHostTelemetry')
+  initHostTelemetry()
+}
+
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
     // @ts-expect-error fixme ts strict error
diff --git a/src/platform/assets/mappings/modelNodeMappings.ts b/src/platform/assets/mappings/modelNodeMappings.ts
index 4bf7df7087..9182e55e23 100644
--- a/src/platform/assets/mappings/modelNodeMappings.ts
+++ b/src/platform/assets/mappings/modelNodeMappings.ts
@@ -223,8 +223,18 @@ export const MODEL_NODE_MAPPINGS: ReadonlyArray<
   ['film', 'FILM VFI', 'ckpt_name'],
 
   // ---- Ultralytics YOLO detectors (ComfyUI-Impact-Pack) ----
-  ['ultralytics/bbox', 'UltralyticsDetectorProvider', 'model_name'],
-  ['ultralytics/segm', 'UltralyticsDetectorProvider', 'model_name'],
+  // Intentionally NOT mapped to the asset-picker. The cloud asset-ingestion
+  // metadata for nested model folders (`ultralytics/bbox`, `ultralytics/segm`)
+  // still has the two known half-bugs described in #12075:
+  //   1. Tag lookup mismatch (cloud stores combined tags, picker queries split).
+  //   2. Submitted value mismatch (picker returns basenames, ingest expects
+  //      subdirectory-prefixed `bbox/<file>` / `segm/<file>`).
+  // PR #12151 re-added the bbox/segm entries before either half was fixed,
+  // reintroducing the FaceDetailer breakage. Until BE-689 lands the cloud-side
+  // fixes, leave these disabled so the node falls back to the static combo
+  // populated from `/api/object_info`.
+  // ['ultralytics/bbox', 'UltralyticsDetectorProvider', 'model_name'],
+  // ['ultralytics/segm', 'UltralyticsDetectorProvider', 'model_name'],
 
   // ---- Mel-Band RoFormer audio separation (ComfyUI-MelBandRoFormer) ----
   ['diffusion_models', 'MelBandRoFormerModelLoader', 'model_name'],
diff --git a/src/platform/cloud/subscription/components/SubscribeToRun.vue b/src/platform/cloud/subscription/components/SubscribeToRun.vue
index 929994e76d..dc8d3efb60 100644
--- a/src/platform/cloud/subscription/components/SubscribeToRun.vue
+++ b/src/platform/cloud/subscription/components/SubscribeToRun.vue
@@ -22,8 +22,8 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useRunButtonTelemetry } from '@/composables/useRunButtonTelemetry'
 import { isCloud } from '@/platform/distribution/types'
-import { useTelemetry } from '@/platform/telemetry'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 
 const { t } = useI18n()
@@ -32,6 +32,7 @@ const isMdOrLarger = breakpoints.greaterOrEqual('md')
 
 const { permissions } = useWorkspaceUI()
 const { showSubscriptionDialog } = useBillingContext()
+const { trackRunButton } = useRunButtonTelemetry()
 
 const canResubscribe = computed(() => permissions.value.canManageSubscription)
 
@@ -50,7 +51,7 @@ const buttonTooltip = computed(() =>
 
 function handleSubscribeToRun() {
   if (isCloud) {
-    useTelemetry()?.trackRunButton({ subscribe_to_run: true })
+    trackRunButton({ subscribe_to_run: true })
   }
 
   showSubscriptionDialog()
diff --git a/src/platform/cloud/subscription/composables/useAccountPreconditionDialog.test.ts b/src/platform/cloud/subscription/composables/useAccountPreconditionDialog.test.ts
new file mode 100644
index 0000000000..64f102bf8d
--- /dev/null
+++ b/src/platform/cloud/subscription/composables/useAccountPreconditionDialog.test.ts
@@ -0,0 +1,58 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useAccountPreconditionDialog } from './useAccountPreconditionDialog'
+
+const mockDialogService = {
+  showApiNodesSignInDialog: vi.fn(),
+  showSubscriptionRequiredDialog: vi.fn(),
+  showTopUpCreditsDialog: vi.fn()
+}
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: vi.fn(() => mockDialogService)
+}))
+
+describe('useAccountPreconditionDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('routes a sign-in precondition to the API sign-in dialog with the node type', () => {
+    useAccountPreconditionDialog().open('sign_in', { nodeType: 'ApiNode' })
+
+    expect(mockDialogService.showApiNodesSignInDialog).toHaveBeenCalledWith([
+      'ApiNode'
+    ])
+    expect(
+      mockDialogService.showSubscriptionRequiredDialog
+    ).not.toHaveBeenCalled()
+    expect(mockDialogService.showTopUpCreditsDialog).not.toHaveBeenCalled()
+  })
+
+  it('routes a sign-in precondition with no node type to an empty list', () => {
+    useAccountPreconditionDialog().open('sign_in')
+
+    expect(mockDialogService.showApiNodesSignInDialog).toHaveBeenCalledWith([])
+  })
+
+  it('routes a subscription precondition to the subscription dialog', () => {
+    useAccountPreconditionDialog().open('subscription')
+
+    expect(
+      mockDialogService.showSubscriptionRequiredDialog
+    ).toHaveBeenCalledTimes(1)
+    expect(mockDialogService.showApiNodesSignInDialog).not.toHaveBeenCalled()
+    expect(mockDialogService.showTopUpCreditsDialog).not.toHaveBeenCalled()
+  })
+
+  it('routes a credit precondition to the top-up dialog', () => {
+    useAccountPreconditionDialog().open('credits', { nodeType: 'PartnerNode' })
+
+    expect(mockDialogService.showTopUpCreditsDialog).toHaveBeenCalledWith({
+      isInsufficientCredits: true
+    })
+    expect(
+      mockDialogService.showSubscriptionRequiredDialog
+    ).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/platform/cloud/subscription/composables/useAccountPreconditionDialog.ts b/src/platform/cloud/subscription/composables/useAccountPreconditionDialog.ts
new file mode 100644
index 0000000000..1828bd2e2c
--- /dev/null
+++ b/src/platform/cloud/subscription/composables/useAccountPreconditionDialog.ts
@@ -0,0 +1,38 @@
+import type { AccountPrecondition } from '@/platform/errorCatalog/accountPreconditionRouting'
+import { useDialogService } from '@/services/dialogService'
+
+export interface AccountPreconditionContext {
+  /** Node type that triggered the precondition, used as modal context. */
+  nodeType?: string
+}
+
+// Routes a resolved account precondition to its dedicated modal. This is the
+// single seam where FE-978 attaches role-aware (member vs owner) subscription
+// content: the `subscription` branch resolves to the subscription dialog, whose
+// inner content FE-978 specializes for cancelled/inactive team states.
+export function useAccountPreconditionDialog() {
+  const dialogService = useDialogService()
+
+  function open(
+    precondition: AccountPrecondition,
+    context: AccountPreconditionContext = {}
+  ): void {
+    switch (precondition) {
+      case 'sign_in':
+        void dialogService.showApiNodesSignInDialog(
+          context.nodeType ? [context.nodeType] : []
+        )
+        return
+      case 'subscription':
+        void dialogService.showSubscriptionRequiredDialog()
+        return
+      case 'credits':
+        void dialogService.showTopUpCreditsDialog({
+          isInsufficientCredits: true
+        })
+        return
+    }
+  }
+
+  return { open }
+}
diff --git a/src/platform/errorCatalog/accountPreconditionRouting.test.ts b/src/platform/errorCatalog/accountPreconditionRouting.test.ts
new file mode 100644
index 0000000000..3082f90286
--- /dev/null
+++ b/src/platform/errorCatalog/accountPreconditionRouting.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  isAccountPreconditionCatalogId,
+  preconditionForCatalogId,
+  resolveAccountPrecondition
+} from './accountPreconditionRouting'
+import {
+  EXECUTION_FAILED_CATALOG_ID,
+  INSUFFICIENT_CREDITS_CATALOG_ID,
+  SIGN_IN_REQUIRED_CATALOG_ID,
+  SUBSCRIPTION_REQUIRED_CATALOG_ID,
+  SUBSCRIPTION_UPGRADE_REQUIRED_CATALOG_ID,
+  WORKSPACE_INSUFFICIENT_CREDITS_CATALOG_ID
+} from './catalogIds'
+
+describe('resolveAccountPrecondition', () => {
+  it('classifies a sign-in error', () => {
+    expect(
+      resolveAccountPrecondition({
+        exceptionType: 'RuntimeError',
+        exceptionMessage: 'Unauthorized: Please login first to use this node.'
+      })
+    ).toBe('sign_in')
+  })
+
+  it('classifies an inactive-subscription error', () => {
+    expect(
+      resolveAccountPrecondition({
+        exceptionType: 'InactiveSubscriptionError',
+        exceptionMessage:
+          'User has no active subscription. Please subscribe to a plan to continue.'
+      })
+    ).toBe('subscription')
+  })
+
+  it('classifies the queue paywall (PAYMENT_REQUIRED) as a subscription precondition', () => {
+    expect(
+      resolveAccountPrecondition({
+        exceptionType: 'PAYMENT_REQUIRED',
+        exceptionMessage: 'Subscription required to queue workflows'
+      })
+    ).toBe('subscription')
+  })
+
+  it('classifies a subscription-upgrade error as a subscription precondition', () => {
+    expect(
+      resolveAccountPrecondition({
+        exceptionType: 'RuntimeError',
+        exceptionMessage:
+          'the following private models require a subscription upgrade: flux-pro'
+      })
+    ).toBe('subscription')
+  })
+
+  it('classifies an account credit error', () => {
+    expect(
+      resolveAccountPrecondition({
+        exceptionType: 'InsufficientFundsError',
+        exceptionMessage:
+          'Payment Required: Please add credits to your account to use this node.'
+      })
+    ).toBe('credits')
+  })
+
+  it('classifies a workspace credit error', () => {
+    expect(
+      resolveAccountPrecondition({
+        exceptionType: 'RuntimeError',
+        exceptionMessage:
+          'Payment Required: Please add credits to your workspace to continue.'
+      })
+    ).toBe('credits')
+  })
+
+  it('returns undefined for an ordinary workflow error', () => {
+    expect(
+      resolveAccountPrecondition({
+        exceptionType: 'RuntimeError',
+        exceptionMessage: 'CUDA out of memory'
+      })
+    ).toBeUndefined()
+  })
+})
+
+describe('preconditionForCatalogId / isAccountPreconditionCatalogId', () => {
+  it('maps every precondition catalog id', () => {
+    expect(preconditionForCatalogId(SIGN_IN_REQUIRED_CATALOG_ID)).toBe(
+      'sign_in'
+    )
+    expect(preconditionForCatalogId(SUBSCRIPTION_REQUIRED_CATALOG_ID)).toBe(
+      'subscription'
+    )
+    expect(
+      preconditionForCatalogId(SUBSCRIPTION_UPGRADE_REQUIRED_CATALOG_ID)
+    ).toBe('subscription')
+    expect(preconditionForCatalogId(INSUFFICIENT_CREDITS_CATALOG_ID)).toBe(
+      'credits'
+    )
+    expect(
+      preconditionForCatalogId(WORKSPACE_INSUFFICIENT_CREDITS_CATALOG_ID)
+    ).toBe('credits')
+  })
+
+  it('does not treat a workflow error catalog id as a precondition', () => {
+    expect(
+      preconditionForCatalogId(EXECUTION_FAILED_CATALOG_ID)
+    ).toBeUndefined()
+    expect(isAccountPreconditionCatalogId(EXECUTION_FAILED_CATALOG_ID)).toBe(
+      false
+    )
+    expect(isAccountPreconditionCatalogId(undefined)).toBe(false)
+  })
+})
diff --git a/src/platform/errorCatalog/accountPreconditionRouting.ts b/src/platform/errorCatalog/accountPreconditionRouting.ts
new file mode 100644
index 0000000000..a3f6338268
--- /dev/null
+++ b/src/platform/errorCatalog/accountPreconditionRouting.ts
@@ -0,0 +1,44 @@
+import {
+  INSUFFICIENT_CREDITS_CATALOG_ID,
+  SIGN_IN_REQUIRED_CATALOG_ID,
+  SUBSCRIPTION_REQUIRED_CATALOG_ID,
+  SUBSCRIPTION_UPGRADE_REQUIRED_CATALOG_ID,
+  WORKSPACE_INSUFFICIENT_CREDITS_CATALOG_ID
+} from './catalogIds'
+import type { RuntimeErrorInfo } from './runtimeErrorMatcher'
+import { resolveRuntimeCatalogMatch } from './runtimeErrorMatcher'
+
+// Account preconditions are gating states (sign-in, subscription, credits) that
+// must open their own modal instead of surfacing as a workflow error. They are
+// excluded from the error panel and the error count.
+export type AccountPrecondition = 'sign_in' | 'subscription' | 'credits'
+
+const CATALOG_ID_TO_PRECONDITION = new Map<string, AccountPrecondition>([
+  [SIGN_IN_REQUIRED_CATALOG_ID, 'sign_in'],
+  [SUBSCRIPTION_REQUIRED_CATALOG_ID, 'subscription'],
+  [SUBSCRIPTION_UPGRADE_REQUIRED_CATALOG_ID, 'subscription'],
+  [INSUFFICIENT_CREDITS_CATALOG_ID, 'credits'],
+  [WORKSPACE_INSUFFICIENT_CREDITS_CATALOG_ID, 'credits']
+])
+
+export function preconditionForCatalogId(
+  catalogId: string | undefined
+): AccountPrecondition | undefined {
+  if (!catalogId) return undefined
+  return CATALOG_ID_TO_PRECONDITION.get(catalogId)
+}
+
+export function isAccountPreconditionCatalogId(
+  catalogId: string | undefined
+): boolean {
+  return preconditionForCatalogId(catalogId) !== undefined
+}
+
+// Classifies a single runtime error payload into the account precondition it
+// represents, or `undefined` when it is an ordinary workflow error.
+export function resolveAccountPrecondition(
+  info: RuntimeErrorInfo
+): AccountPrecondition | undefined {
+  const match = resolveRuntimeCatalogMatch(info)
+  return preconditionForCatalogId(match?.catalogId)
+}
diff --git a/src/platform/errorCatalog/runtimeErrorMatcher.ts b/src/platform/errorCatalog/runtimeErrorMatcher.ts
index 76e13ef811..933b375123 100644
--- a/src/platform/errorCatalog/runtimeErrorMatcher.ts
+++ b/src/platform/errorCatalog/runtimeErrorMatcher.ts
@@ -37,7 +37,8 @@ const WORKSPACE_INSUFFICIENT_CREDITS_MESSAGES = new Set([
 ])
 const SUBSCRIPTION_REQUIRED_MESSAGES = new Set([
   'Workspace has no active subscription. Please subscribe to a plan to continue.',
-  'User has no active subscription. Please subscribe to a plan to continue.'
+  'User has no active subscription. Please subscribe to a plan to continue.',
+  'Subscription required to queue workflows'
 ])
 const SUBSCRIPTION_UPGRADE_REQUIRED_PREFIX =
   'the following private models require a subscription upgrade:'
@@ -120,7 +121,7 @@ const PREPROCESSING_FAILED_PREFIXES = [
   'Failed to complete preparation:'
 ]
 
-interface RuntimeErrorInfo {
+export interface RuntimeErrorInfo {
   exceptionType: string
   exceptionMessage: string
 }
diff --git a/src/platform/missingModel/missingModelDownload.test.ts b/src/platform/missingModel/missingModelDownload.test.ts
index c1a8c0f3a1..1991cadfe5 100644
--- a/src/platform/missingModel/missingModelDownload.test.ts
+++ b/src/platform/missingModel/missingModelDownload.test.ts
@@ -39,7 +39,6 @@ beforeEach(() => {
   vi.restoreAllMocks()
   vi.resetAllMocks()
   delete window.__comfyDesktop2
-  delete window.__comfyDesktop2Remote
 })
 
 describe('fetchModelMetadata', () => {
@@ -258,7 +257,10 @@ describe('downloadModel', () => {
         (url: string, filename: string, directory: string) => Promise<boolean>
       >()
       .mockResolvedValue(true)
-    window.__comfyDesktop2 = { downloadModel: desktopDownloadModel }
+    window.__comfyDesktop2 = {
+      isRemote: () => false,
+      downloadModel: desktopDownloadModel
+    }
 
     downloadModel(
       {
@@ -289,7 +291,10 @@ describe('downloadModel', () => {
         (url: string, filename: string, directory: string) => Promise<boolean>
       >()
       .mockRejectedValue(bridgeError)
-    window.__comfyDesktop2 = { downloadModel: desktopDownloadModel }
+    window.__comfyDesktop2 = {
+      isRemote: () => false,
+      downloadModel: desktopDownloadModel
+    }
 
     downloadModel(
       {
@@ -323,7 +328,10 @@ describe('downloadModel', () => {
       .mockImplementation(() => {
         throw bridgeError
       })
-    window.__comfyDesktop2 = { downloadModel: desktopDownloadModel }
+    window.__comfyDesktop2 = {
+      isRemote: () => false,
+      downloadModel: desktopDownloadModel
+    }
 
     downloadModel(
       {
@@ -353,8 +361,10 @@ describe('downloadModel', () => {
         (url: string, filename: string, directory: string) => Promise<boolean>
       >()
       .mockResolvedValue(true)
-    window.__comfyDesktop2 = { downloadModel: desktopDownloadModel }
-    window.__comfyDesktop2Remote = true
+    window.__comfyDesktop2 = {
+      isRemote: () => true,
+      downloadModel: desktopDownloadModel
+    }
 
     downloadModel(
       {
diff --git a/src/platform/missingModel/missingModelDownload.ts b/src/platform/missingModel/missingModelDownload.ts
index d881613000..dd8d8ddeeb 100644
--- a/src/platform/missingModel/missingModelDownload.ts
+++ b/src/platform/missingModel/missingModelDownload.ts
@@ -2,21 +2,7 @@ import { downloadUrlToHfRepoUrl, isCivitaiModelUrl } from '@/utils/formatUtil'
 import { isDesktop } from '@/platform/distribution/types'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
-
-interface ComfyDesktop2Bridge {
-  downloadModel: (
-    url: string,
-    filename: string,
-    directory: string
-  ) => Promise<boolean>
-}
-
-declare global {
-  interface Window {
-    __comfyDesktop2?: ComfyDesktop2Bridge
-    __comfyDesktop2Remote?: boolean
-  }
-}
+import type { ComfyDesktop2Bridge } from '@/types'
 
 const ALLOWED_SOURCES = [
   'https://civitai.com/',
@@ -55,7 +41,7 @@ async function startDesktop2ModelDownload(
   model: ModelWithUrl
 ): Promise<void> {
   try {
-    await bridge.downloadModel(model.url, model.name, model.directory)
+    await bridge.downloadModel?.(model.url, model.name, model.directory)
   } catch (error: unknown) {
     console.error('Failed to start Desktop2 model download:', error)
   }
@@ -90,7 +76,7 @@ export function downloadModel(
   paths: Record<string, string[]>
 ): void {
   const desktop2Bridge = window.__comfyDesktop2
-  if (desktop2Bridge?.downloadModel && !window.__comfyDesktop2Remote) {
+  if (desktop2Bridge?.downloadModel && !desktop2Bridge.isRemote()) {
     void startDesktop2ModelDownload(desktop2Bridge, model)
     return
   }
diff --git a/src/platform/remoteConfig/refreshRemoteConfig.ts b/src/platform/remoteConfig/refreshRemoteConfig.ts
index f861fbf8fc..449be328fd 100644
--- a/src/platform/remoteConfig/refreshRemoteConfig.ts
+++ b/src/platform/remoteConfig/refreshRemoteConfig.ts
@@ -1,5 +1,3 @@
-import { api } from '@/scripts/api'
-
 import {
   cachedTeamWorkspacesEnabled,
   remoteConfig,
@@ -14,6 +12,13 @@ interface RefreshRemoteConfigOptions {
   useAuth?: boolean
 }
 
+async function fetchRemoteConfig(useAuth: boolean): Promise<Response> {
+  if (!useAuth) return fetch('/api/features', { cache: 'no-store' })
+
+  const { api } = await import('@/scripts/api')
+  return api.fetchApi('/features', { cache: 'no-store' })
+}
+
 /**
  * Loads remote configuration from the backend /features endpoint
  * and updates the reactive remoteConfig ref.
@@ -29,9 +34,7 @@ export async function refreshRemoteConfig(
   const { useAuth = true } = options
 
   try {
-    const response = useAuth
-      ? await api.fetchApi('/features', { cache: 'no-store' })
-      : await fetch('/api/features', { cache: 'no-store' })
+    const response = await fetchRemoteConfig(useAuth)
 
     if (response.ok) {
       const config = await response.json()
diff --git a/src/platform/remoteConfig/types.ts b/src/platform/remoteConfig/types.ts
index 6d9188d4fc..a2c65fc051 100644
--- a/src/platform/remoteConfig/types.ts
+++ b/src/platform/remoteConfig/types.ts
@@ -94,6 +94,7 @@ export type RemoteConfig = {
   comfy_platform_base_url?: string
   firebase_config?: FirebaseRuntimeConfig
   telemetry_disabled_events?: TelemetryEventName[]
+  enable_telemetry?: boolean
   model_upload_button_enabled?: boolean
   asset_rename_enabled?: boolean
   private_models_enabled?: boolean
diff --git a/src/platform/telemetry/TelemetryRegistry.ts b/src/platform/telemetry/TelemetryRegistry.ts
index ebd04939ca..6f4d45f9c1 100644
--- a/src/platform/telemetry/TelemetryRegistry.ts
+++ b/src/platform/telemetry/TelemetryRegistry.ts
@@ -9,7 +9,6 @@ import type {
   ShareLinkOpenedMetadata,
   ExecutionErrorMetadata,
   ExecutionSuccessMetadata,
-  ExecutionTriggerSource,
   HelpCenterClosedMetadata,
   HelpCenterOpenedMetadata,
   HelpResourceClickedMetadata,
@@ -19,6 +18,7 @@ import type {
   SearchQueryMetadata,
   PageViewMetadata,
   PageVisibilityMetadata,
+  RunButtonProperties,
   SettingChangedMetadata,
   SharedWorkflowRunMetadata,
   ShellLayoutMetadata,
@@ -112,11 +112,8 @@ export class TelemetryRegistry implements TelemetryDispatcher {
     this.dispatch((provider) => provider.trackApiCreditTopupSucceeded?.())
   }
 
-  trackRunButton(options?: {
-    subscribe_to_run?: boolean
-    trigger_source?: ExecutionTriggerSource
-  }): void {
-    this.dispatch((provider) => provider.trackRunButton?.(options))
+  trackRunButton(properties: RunButtonProperties): void {
+    this.dispatch((provider) => provider.trackRunButton?.(properties))
   }
 
   startTopupTracking(): void {
diff --git a/src/platform/telemetry/initHostTelemetry.test.ts b/src/platform/telemetry/initHostTelemetry.test.ts
new file mode 100644
index 0000000000..3e61f69278
--- /dev/null
+++ b/src/platform/telemetry/initHostTelemetry.test.ts
@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { setTelemetryRegistry, useTelemetry } from '@/platform/telemetry'
+import { initHostTelemetry } from '@/platform/telemetry/initHostTelemetry'
+import { TelemetryEvents } from '@/platform/telemetry/types'
+
+const fetchMock = vi.fn()
+vi.stubGlobal('fetch', fetchMock)
+
+describe('initHostTelemetry', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+    remoteConfig.value = {}
+    setTelemetryRegistry(null)
+    localStorage.clear()
+    delete window.__comfyDesktop2
+  })
+
+  it('leaves the registry untouched when enable_telemetry is on but the host Telemetry bridge is absent', () => {
+    remoteConfig.value = { enable_telemetry: true }
+
+    initHostTelemetry()
+
+    expect(useTelemetry()).toBeNull()
+    expect(fetchMock).not.toHaveBeenCalled()
+  })
+
+  it('leaves the registry untouched when enable_telemetry is off', () => {
+    window.__comfyDesktop2 = {
+      isRemote: () => false,
+      Telemetry: { capture: vi.fn() }
+    }
+    remoteConfig.value = { enable_telemetry: false }
+
+    initHostTelemetry()
+
+    expect(useTelemetry()).toBeNull()
+  })
+
+  it('registers the host telemetry sink when enable_telemetry and the bridge are present', () => {
+    const capture = vi.fn()
+    window.__comfyDesktop2 = { isRemote: () => false, Telemetry: { capture } }
+    remoteConfig.value = { enable_telemetry: true }
+
+    initHostTelemetry()
+    useTelemetry()?.trackSignupOpened()
+
+    expect(capture).toHaveBeenCalledWith(
+      TelemetryEvents.USER_SIGN_UP_OPENED,
+      undefined
+    )
+  })
+})
diff --git a/src/platform/telemetry/initHostTelemetry.ts b/src/platform/telemetry/initHostTelemetry.ts
new file mode 100644
index 0000000000..76e3ba268f
--- /dev/null
+++ b/src/platform/telemetry/initHostTelemetry.ts
@@ -0,0 +1,23 @@
+import { setTelemetryRegistry } from './index'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { getDevOverride } from '@/utils/devFeatureFlagOverride'
+import { TelemetryRegistry } from './TelemetryRegistry'
+import { HostTelemetrySink } from './providers/host/HostTelemetrySink'
+
+const ENABLE_TELEMETRY_FEATURE = 'enable_telemetry'
+
+function isHostTelemetryEnabled(): boolean {
+  const override = getDevOverride<boolean>(ENABLE_TELEMETRY_FEATURE)
+  if (override !== undefined) return override
+
+  return remoteConfig.value.enable_telemetry === true
+}
+
+export function initHostTelemetry(): void {
+  if (!isHostTelemetryEnabled()) return
+  if (!window.__comfyDesktop2?.Telemetry) return
+
+  const registry = new TelemetryRegistry()
+  registry.registerProvider(new HostTelemetrySink())
+  setTelemetryRegistry(registry)
+}
diff --git a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts
index a644f1b623..1d2dbb9d3a 100644
--- a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts
+++ b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.test.ts
@@ -1,11 +1,4 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-vi.mock('@/composables/useAppMode', () => ({
-  useAppMode: () => ({
-    mode: { value: 'app' },
-    isAppMode: { value: true }
-  })
-}))
+import { beforeEach, describe, expect, it } from 'vitest'
 
 import { GtmTelemetryProvider } from './GtmTelemetryProvider'
 
@@ -192,8 +185,22 @@ describe('GtmTelemetryProvider', () => {
 
     it('pushes run_workflow with trigger_source', () => {
       const provider = createInitializedProvider()
-      localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
-      provider.trackRunButton({ trigger_source: 'button' })
+      provider.trackRunButton({
+        subscribe_to_run: false,
+        workflow_type: 'custom',
+        workflow_name: 'untitled',
+        custom_node_count: 0,
+        total_node_count: 0,
+        subgraph_count: 0,
+        has_api_nodes: false,
+        api_node_names: [],
+        has_toolkit_nodes: false,
+        toolkit_node_names: [],
+        trigger_source: 'button',
+        view_mode: 'app',
+        is_app_mode: true,
+        dock_state: 'floating'
+      })
       expect(lastDataLayerEntry()).toMatchObject({
         event: 'run_workflow',
         trigger_source: 'button',
diff --git a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.ts
index f2667acd84..a1b3404f7f 100644
--- a/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/GtmTelemetryProvider.ts
@@ -5,7 +5,6 @@ import type {
   EnterLinearMetadata,
   ExecutionErrorMetadata,
   ExecutionSuccessMetadata,
-  ExecutionTriggerSource,
   HelpCenterClosedMetadata,
   HelpCenterOpenedMetadata,
   HelpResourceClickedMetadata,
@@ -13,6 +12,7 @@ import type {
   NodeSearchResultMetadata,
   PageViewMetadata,
   PageVisibilityMetadata,
+  RunButtonProperties,
   SettingChangedMetadata,
   ShareFlowMetadata,
   SubscriptionMetadata,
@@ -29,8 +29,7 @@ import type {
   WorkflowImportMetadata,
   WorkflowSavedMetadata
 } from '../../types'
-import { useAppMode } from '@/composables/useAppMode'
-import { getActionbarDockState } from '../../utils/getActionbarDockState'
+import { TelemetryEvents } from '../../types'
 
 /**
  * Google Tag Manager telemetry provider.
@@ -154,7 +153,7 @@ export class GtmTelemetryProvider implements TelemetryProvider {
   }
 
   trackBeginCheckout(metadata: BeginCheckoutMetadata): void {
-    this.pushEvent('begin_checkout', metadata)
+    this.pushEvent(TelemetryEvents.BEGIN_CHECKOUT, metadata)
   }
 
   trackSubscription(
@@ -183,18 +182,13 @@ export class GtmTelemetryProvider implements TelemetryProvider {
     )
   }
 
-  trackRunButton(options?: {
-    subscribe_to_run?: boolean
-    trigger_source?: ExecutionTriggerSource
-  }): void {
-    const { mode, isAppMode } = useAppMode()
-
+  trackRunButton(properties: RunButtonProperties): void {
     this.pushEvent('run_workflow', {
-      subscribe_to_run: options?.subscribe_to_run ?? false,
-      trigger_source: options?.trigger_source ?? 'unknown',
-      view_mode: mode.value,
-      is_app_mode: isAppMode.value,
-      dock_state: getActionbarDockState()
+      subscribe_to_run: properties.subscribe_to_run,
+      trigger_source: properties.trigger_source ?? 'unknown',
+      view_mode: properties.view_mode,
+      is_app_mode: properties.is_app_mode,
+      dock_state: properties.dock_state
     })
   }
 
diff --git a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.test.ts b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.test.ts
index 30e21dbcbc..6b47a05315 100644
--- a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.test.ts
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.test.ts
@@ -17,13 +17,6 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: () => ({ onUserResolved: mockOnUserResolved })
 }))
 
-vi.mock('@/composables/useAppMode', () => ({
-  useAppMode: () => ({
-    mode: { value: 'graph' },
-    isAppMode: { value: false }
-  })
-}))
-
 const topupMocks = vi.hoisted(() => ({
   startTopupTracking: vi.fn(),
   clearTopupTracking: vi.fn(),
@@ -31,20 +24,6 @@ const topupMocks = vi.hoisted(() => ({
 }))
 vi.mock('@/platform/telemetry/topupTracker', () => topupMocks)
 
-vi.mock('@/platform/telemetry/utils/getExecutionContext', () => ({
-  getExecutionContext: () => ({
-    is_template: false,
-    workflow_name: 'untitled',
-    custom_node_count: 0,
-    total_node_count: 0,
-    subgraph_count: 0,
-    has_api_nodes: false,
-    api_node_names: [],
-    has_toolkit_nodes: false,
-    toolkit_node_names: []
-  })
-}))
-
 const mockNormalizeSurveyResponses = vi.hoisted(() => vi.fn())
 vi.mock('@/platform/telemetry/utils/surveyNormalization', () => ({
   normalizeSurveyResponses: mockNormalizeSurveyResponses
@@ -59,6 +38,7 @@ import type {
   AuthMetadata,
   DefaultViewSetMetadata,
   EnterLinearMetadata,
+  RunButtonProperties,
   ShareFlowMetadata,
   ShellLayoutMetadata,
   SurveyResponses,
@@ -450,27 +430,33 @@ describe('MixpanelTelemetryProvider — direct event tracking methods', () => {
     )
   })
 
-  it('trackRunButton populates RunButtonProperties from the execution context', async () => {
+  it('trackRunButton forwards RunButtonProperties', async () => {
     const provider = new MixpanelTelemetryProvider()
     await waitForMixpanelInit()
     mockMixpanel.track.mockClear()
-    localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
 
-    provider.trackRunButton({
+    const properties: RunButtonProperties = {
       subscribe_to_run: true,
-      trigger_source: 'button'
-    })
+      workflow_type: 'custom',
+      workflow_name: 'untitled',
+      custom_node_count: 0,
+      total_node_count: 0,
+      subgraph_count: 0,
+      has_api_nodes: false,
+      api_node_names: [],
+      has_toolkit_nodes: false,
+      toolkit_node_names: [],
+      trigger_source: 'button',
+      view_mode: 'graph',
+      is_app_mode: false,
+      dock_state: 'floating'
+    }
+
+    provider.trackRunButton(properties)
 
     expect(mockMixpanel.track).toHaveBeenCalledWith(
       TelemetryEvents.RUN_BUTTON_CLICKED,
-      expect.objectContaining({
-        subscribe_to_run: true,
-        workflow_type: 'custom',
-        trigger_source: 'button',
-        view_mode: 'graph',
-        is_app_mode: false,
-        dock_state: 'floating'
-      })
+      properties
     )
   })
 
diff --git a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
index 6b8bdf4b39..463e910f2e 100644
--- a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
@@ -2,7 +2,6 @@ import type { OverridedMixpanel } from 'mixpanel-browser'
 import { omit } from 'es-toolkit'
 import { watch } from 'vue'
 
-import { useAppMode } from '@/composables/useAppMode'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import {
   checkForCompletedTopup as checkTopupUtil,
@@ -11,14 +10,11 @@ import {
 } from '@/platform/telemetry/topupTracker'
 import type { AuditLog } from '@/services/customerEventsService'
 
-import { getExecutionContext } from '../../utils/getExecutionContext'
-
 import type {
   AuthMetadata,
   CreditTopupMetadata,
   DefaultViewSetMetadata,
   EnterLinearMetadata,
-  ExecutionTriggerSource,
   HelpCenterClosedMetadata,
   HelpCenterOpenedMetadata,
   HelpResourceClickedMetadata,
@@ -48,7 +44,6 @@ import type {
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import type { RemoteConfig } from '@/platform/remoteConfig/types'
 import { TelemetryEvents } from '../../types'
-import { getActionbarDockState } from '../../utils/getActionbarDockState'
 import { normalizeSurveyResponses } from '../../utils/surveyNormalization'
 
 const DEFAULT_DISABLED_EVENTS = [
@@ -276,31 +271,8 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     clearTopupUtil()
   }
 
-  trackRunButton(options?: {
-    subscribe_to_run?: boolean
-    trigger_source?: ExecutionTriggerSource
-  }): void {
-    const executionContext = getExecutionContext()
-    const { mode, isAppMode } = useAppMode()
-
-    const runButtonProperties: RunButtonProperties = {
-      subscribe_to_run: options?.subscribe_to_run || false,
-      workflow_type: executionContext.is_template ? 'template' : 'custom',
-      workflow_name: executionContext.workflow_name ?? 'untitled',
-      custom_node_count: executionContext.custom_node_count,
-      total_node_count: executionContext.total_node_count,
-      subgraph_count: executionContext.subgraph_count,
-      has_api_nodes: executionContext.has_api_nodes,
-      api_node_names: executionContext.api_node_names,
-      has_toolkit_nodes: executionContext.has_toolkit_nodes,
-      toolkit_node_names: executionContext.toolkit_node_names,
-      trigger_source: options?.trigger_source,
-      view_mode: mode.value,
-      is_app_mode: isAppMode.value,
-      dock_state: getActionbarDockState()
-    }
-
-    this.trackEvent(TelemetryEvents.RUN_BUTTON_CLICKED, runButtonProperties)
+  trackRunButton(properties: RunButtonProperties): void {
+    this.trackEvent(TelemetryEvents.RUN_BUTTON_CLICKED, properties)
   }
 
   trackSurvey(
diff --git a/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts
index 55bbcf0818..3f709b2e6e 100644
--- a/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/PostHogTelemetryProvider.ts
@@ -3,7 +3,6 @@ import { watch } from 'vue'
 
 import { createPostHogBeforeSend } from '@comfyorg/shared-frontend-utils/piiUtil'
 
-import { useAppMode } from '@/composables/useAppMode'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
@@ -15,7 +14,6 @@ import type {
   EnterLinearMetadata,
   ShareFlowMetadata,
   ShareLinkOpenedMetadata,
-  ExecutionTriggerSource,
   HelpCenterClosedMetadata,
   HelpCenterOpenedMetadata,
   HelpResourceClickedMetadata,
@@ -46,8 +44,6 @@ import type {
   WorkflowSavedMetadata
 } from '../../types'
 import { TelemetryEvents } from '../../types'
-import { getActionbarDockState } from '../../utils/getActionbarDockState'
-import { getExecutionContext } from '../../utils/getExecutionContext'
 import { normalizeSurveyResponses } from '../../utils/surveyNormalization'
 
 const DEFAULT_DISABLED_EVENTS = [
@@ -374,31 +370,8 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
     this.trackEvent(TelemetryEvents.API_CREDIT_TOPUP_SUCCEEDED)
   }
 
-  trackRunButton(options?: {
-    subscribe_to_run?: boolean
-    trigger_source?: ExecutionTriggerSource
-  }): void {
-    const executionContext = getExecutionContext()
-    const { mode, isAppMode } = useAppMode()
-
-    const runButtonProperties: RunButtonProperties = {
-      subscribe_to_run: options?.subscribe_to_run || false,
-      workflow_type: executionContext.is_template ? 'template' : 'custom',
-      workflow_name: executionContext.workflow_name ?? 'untitled',
-      custom_node_count: executionContext.custom_node_count,
-      total_node_count: executionContext.total_node_count,
-      subgraph_count: executionContext.subgraph_count,
-      has_api_nodes: executionContext.has_api_nodes,
-      api_node_names: executionContext.api_node_names,
-      has_toolkit_nodes: executionContext.has_toolkit_nodes,
-      toolkit_node_names: executionContext.toolkit_node_names,
-      trigger_source: options?.trigger_source,
-      view_mode: mode.value,
-      is_app_mode: isAppMode.value,
-      dock_state: getActionbarDockState()
-    }
-
-    this.trackEvent(TelemetryEvents.RUN_BUTTON_CLICKED, runButtonProperties)
+  trackRunButton(properties: RunButtonProperties): void {
+    this.trackEvent(TelemetryEvents.RUN_BUTTON_CLICKED, properties)
   }
 
   trackSurvey(
diff --git a/src/platform/telemetry/providers/host/HostTelemetrySink.test.ts b/src/platform/telemetry/providers/host/HostTelemetrySink.test.ts
new file mode 100644
index 0000000000..70cdbd8ca7
--- /dev/null
+++ b/src/platform/telemetry/providers/host/HostTelemetrySink.test.ts
@@ -0,0 +1,126 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { TelemetryEvents } from '@/platform/telemetry/types'
+
+import { HostTelemetrySink } from './HostTelemetrySink'
+
+const state = vi.hoisted(() => ({
+  capture: vi.fn()
+}))
+
+describe('HostTelemetrySink', () => {
+  beforeEach(() => {
+    state.capture.mockClear()
+    window.__comfyDesktop2 = {
+      isRemote: () => false,
+      Telemetry: {
+        capture: state.capture
+      }
+    }
+  })
+
+  afterEach(() => {
+    delete window.__comfyDesktop2
+  })
+
+  it('forwards run button telemetry to the host bridge', () => {
+    new HostTelemetrySink().trackRunButton({
+      subscribe_to_run: true,
+      workflow_type: 'custom',
+      workflow_name: 'Host workflow',
+      custom_node_count: 2,
+      total_node_count: 4,
+      subgraph_count: 1,
+      has_api_nodes: true,
+      api_node_names: ['LoadImage'],
+      has_toolkit_nodes: false,
+      toolkit_node_names: [],
+      trigger_source: 'button',
+      view_mode: 'graph',
+      is_app_mode: false,
+      dock_state: 'docked'
+    })
+
+    expect(state.capture).toHaveBeenCalledExactlyOnceWith(
+      TelemetryEvents.RUN_BUTTON_CLICKED,
+      {
+        subscribe_to_run: true,
+        workflow_type: 'custom',
+        workflow_name: 'Host workflow',
+        custom_node_count: 2,
+        total_node_count: 4,
+        subgraph_count: 1,
+        has_api_nodes: true,
+        api_node_names: ['LoadImage'],
+        has_toolkit_nodes: false,
+        toolkit_node_names: [],
+        trigger_source: 'button',
+        view_mode: 'graph',
+        is_app_mode: false,
+        dock_state: 'docked'
+      }
+    )
+  })
+
+  it('keeps primitive arrays and drops nested payloads', () => {
+    new HostTelemetrySink().trackWorkflowImported({
+      missing_node_count: 2,
+      missing_node_types: ['MissingA', 'MissingB'],
+      missing_node_packs: [
+        {
+          pack_id: 'pack',
+          node_types: ['MissingA']
+        }
+      ],
+      open_source: 'file_drop',
+      share_id: 'share-id'
+    })
+
+    expect(state.capture).toHaveBeenCalledExactlyOnceWith(
+      TelemetryEvents.WORKFLOW_IMPORTED,
+      {
+        missing_node_count: 2,
+        missing_node_types: ['MissingA', 'MissingB'],
+        open_source: 'file_drop',
+        share_id: 'share-id'
+      }
+    )
+  })
+
+  it('forwards begin checkout using the existing GA4 event name', () => {
+    new HostTelemetrySink().trackBeginCheckout({
+      user_id: 'user-id',
+      tier: 'pro',
+      cycle: 'monthly',
+      checkout_type: 'new',
+      ecommerce: {
+        items: [
+          {
+            item_name: 'Pro',
+            price: 100,
+            quantity: 1
+          }
+        ]
+      }
+    })
+
+    expect(state.capture).toHaveBeenCalledExactlyOnceWith(
+      TelemetryEvents.BEGIN_CHECKOUT,
+      {
+        user_id: 'user-id',
+        tier: 'pro',
+        cycle: 'monthly',
+        checkout_type: 'new'
+      }
+    )
+  })
+
+  it('does nothing when the host bridge is absent', () => {
+    delete window.__comfyDesktop2
+
+    expect(() =>
+      new HostTelemetrySink().trackNodeSearch({ query: 'k sampler' })
+    ).not.toThrow()
+    expect(state.capture).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/platform/telemetry/providers/host/HostTelemetrySink.ts b/src/platform/telemetry/providers/host/HostTelemetrySink.ts
new file mode 100644
index 0000000000..7a4ac01bae
--- /dev/null
+++ b/src/platform/telemetry/providers/host/HostTelemetrySink.ts
@@ -0,0 +1,295 @@
+import type {
+  ComfyDesktop2TelemetryBridge,
+  ComfyDesktop2TelemetryValue
+} from '@comfyorg/comfyui-desktop-bridge-types'
+import {
+  checkForCompletedTopup as checkTopupUtil,
+  clearTopupTracking as clearTopupUtil,
+  startTopupTracking as startTopupUtil
+} from '@/platform/telemetry/topupTracker'
+import type { AuditLog } from '@/services/customerEventsService'
+
+import type {
+  AuthMetadata,
+  BeginCheckoutMetadata,
+  DefaultViewSetMetadata,
+  EnterLinearMetadata,
+  ExecutionErrorMetadata,
+  ExecutionSuccessMetadata,
+  HelpCenterClosedMetadata,
+  HelpCenterOpenedMetadata,
+  HelpResourceClickedMetadata,
+  NodeAddedMetadata,
+  NodeSearchMetadata,
+  NodeSearchResultMetadata,
+  PageViewMetadata,
+  PageVisibilityMetadata,
+  RunButtonProperties,
+  SearchQueryMetadata,
+  SettingChangedMetadata,
+  ShareFlowMetadata,
+  ShareLinkOpenedMetadata,
+  SharedWorkflowRunMetadata,
+  SubscriptionMetadata,
+  SubscriptionSuccessMetadata,
+  SurveyResponses,
+  TabCountMetadata,
+  TelemetryEventName,
+  TelemetryProvider,
+  TemplateFilterMetadata,
+  TemplateLibraryClosedMetadata,
+  TemplateLibraryMetadata,
+  TemplateMetadata,
+  UiButtonClickMetadata,
+  WorkflowCreatedMetadata,
+  WorkflowImportMetadata,
+  WorkflowSavedMetadata
+} from '../../types'
+import { TelemetryEvents } from '../../types'
+import { normalizeSurveyResponses } from '../../utils/surveyNormalization'
+
+type HostTelemetryProperties = Parameters<
+  ComfyDesktop2TelemetryBridge['capture']
+>[1]
+
+function isHostTelemetryPrimitive(
+  value: unknown
+): value is ComfyDesktop2TelemetryValue {
+  return (
+    value === null ||
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  )
+}
+
+function toHostTelemetryProperties(
+  properties?: object
+): HostTelemetryProperties {
+  if (!properties) return undefined
+
+  const out: NonNullable<HostTelemetryProperties> = {}
+  for (const [key, value] of Object.entries(properties)) {
+    if (isHostTelemetryPrimitive(value)) {
+      out[key] = value
+    } else if (Array.isArray(value) && value.every(isHostTelemetryPrimitive)) {
+      out[key] = value
+    }
+  }
+
+  return out
+}
+
+export class HostTelemetrySink implements TelemetryProvider {
+  private capture(event: TelemetryEventName, properties?: object): void {
+    window.__comfyDesktop2?.Telemetry?.capture(
+      event,
+      toHostTelemetryProperties(properties)
+    )
+  }
+
+  trackSignupOpened(): void {
+    this.capture(TelemetryEvents.USER_SIGN_UP_OPENED)
+  }
+
+  trackAuth(metadata: AuthMetadata): void {
+    this.capture(TelemetryEvents.USER_AUTH_COMPLETED, metadata)
+  }
+
+  trackUserLoggedIn(): void {
+    this.capture(TelemetryEvents.USER_LOGGED_IN)
+  }
+
+  trackSubscription(
+    event: 'modal_opened' | 'subscribe_clicked',
+    metadata?: SubscriptionMetadata
+  ): void {
+    this.capture(
+      event === 'modal_opened'
+        ? TelemetryEvents.SUBSCRIPTION_REQUIRED_MODAL_OPENED
+        : TelemetryEvents.SUBSCRIBE_NOW_BUTTON_CLICKED,
+      metadata
+    )
+  }
+
+  trackBeginCheckout(metadata: BeginCheckoutMetadata): void {
+    this.capture(TelemetryEvents.BEGIN_CHECKOUT, metadata)
+  }
+
+  trackMonthlySubscriptionSucceeded(
+    metadata?: SubscriptionSuccessMetadata
+  ): void {
+    this.capture(TelemetryEvents.MONTHLY_SUBSCRIPTION_SUCCEEDED, metadata)
+  }
+
+  trackMonthlySubscriptionCancelled(): void {
+    this.capture(TelemetryEvents.MONTHLY_SUBSCRIPTION_CANCELLED)
+  }
+
+  trackAddApiCreditButtonClicked(): void {
+    this.capture(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
+  }
+
+  trackApiCreditTopupButtonPurchaseClicked(amount: number): void {
+    this.capture(TelemetryEvents.API_CREDIT_TOPUP_BUTTON_PURCHASE_CLICKED, {
+      credit_amount: amount
+    })
+  }
+
+  trackApiCreditTopupSucceeded(): void {
+    this.capture(TelemetryEvents.API_CREDIT_TOPUP_SUCCEEDED)
+  }
+
+  trackRunButton(properties: RunButtonProperties): void {
+    this.capture(TelemetryEvents.RUN_BUTTON_CLICKED, properties)
+  }
+
+  startTopupTracking(): void {
+    startTopupUtil()
+  }
+
+  checkForCompletedTopup(events: AuditLog[] | undefined | null): boolean {
+    return checkTopupUtil(events)
+  }
+
+  clearTopupTracking(): void {
+    clearTopupUtil()
+  }
+
+  trackSurvey(
+    stage: 'opened' | 'submitted',
+    responses?: SurveyResponses
+  ): void {
+    this.capture(
+      stage === 'opened'
+        ? TelemetryEvents.USER_SURVEY_OPENED
+        : TelemetryEvents.USER_SURVEY_SUBMITTED,
+      responses ? normalizeSurveyResponses(responses) : undefined
+    )
+  }
+
+  trackEmailVerification(stage: 'opened' | 'requested' | 'completed'): void {
+    const event =
+      stage === 'opened'
+        ? TelemetryEvents.USER_EMAIL_VERIFY_OPENED
+        : stage === 'requested'
+          ? TelemetryEvents.USER_EMAIL_VERIFY_REQUESTED
+          : TelemetryEvents.USER_EMAIL_VERIFY_COMPLETED
+    this.capture(event)
+  }
+
+  trackTemplate(metadata: TemplateMetadata): void {
+    this.capture(TelemetryEvents.TEMPLATE_WORKFLOW_OPENED, metadata)
+  }
+
+  trackTemplateLibraryOpened(metadata: TemplateLibraryMetadata): void {
+    this.capture(TelemetryEvents.TEMPLATE_LIBRARY_OPENED, metadata)
+  }
+
+  trackTemplateLibraryClosed(metadata: TemplateLibraryClosedMetadata): void {
+    this.capture(TelemetryEvents.TEMPLATE_LIBRARY_CLOSED, metadata)
+  }
+
+  trackWorkflowImported(metadata: WorkflowImportMetadata): void {
+    this.capture(TelemetryEvents.WORKFLOW_IMPORTED, metadata)
+  }
+
+  trackWorkflowOpened(metadata: WorkflowImportMetadata): void {
+    this.capture(TelemetryEvents.WORKFLOW_OPENED, metadata)
+  }
+
+  trackWorkflowSaved(metadata: WorkflowSavedMetadata): void {
+    this.capture(TelemetryEvents.WORKFLOW_SAVED, metadata)
+  }
+
+  trackDefaultViewSet(metadata: DefaultViewSetMetadata): void {
+    this.capture(TelemetryEvents.DEFAULT_VIEW_SET, metadata)
+  }
+
+  trackEnterLinear(metadata: EnterLinearMetadata): void {
+    this.capture(TelemetryEvents.ENTER_LINEAR_MODE, metadata)
+  }
+
+  trackShareFlow(metadata: ShareFlowMetadata): void {
+    this.capture(TelemetryEvents.SHARE_FLOW, metadata)
+  }
+
+  trackShareLinkOpened(metadata: ShareLinkOpenedMetadata): void {
+    this.capture(TelemetryEvents.SHARE_LINK_OPENED, metadata)
+  }
+
+  trackPageVisibilityChanged(metadata: PageVisibilityMetadata): void {
+    this.capture(TelemetryEvents.PAGE_VISIBILITY_CHANGED, metadata)
+  }
+
+  trackTabCount(metadata: TabCountMetadata): void {
+    this.capture(TelemetryEvents.TAB_COUNT_TRACKING, metadata)
+  }
+
+  trackNodeSearch(metadata: NodeSearchMetadata): void {
+    this.capture(TelemetryEvents.NODE_SEARCH, metadata)
+  }
+
+  trackNodeSearchResultSelected(metadata: NodeSearchResultMetadata): void {
+    this.capture(TelemetryEvents.NODE_SEARCH_RESULT_SELECTED, metadata)
+  }
+
+  trackSearchQuery(metadata: SearchQueryMetadata): void {
+    this.capture(TelemetryEvents.SEARCH_QUERY, metadata)
+  }
+
+  trackNodeAdded(metadata: NodeAddedMetadata): void {
+    this.capture(TelemetryEvents.NODE_ADDED, metadata)
+  }
+
+  trackTemplateFilterChanged(metadata: TemplateFilterMetadata): void {
+    this.capture(TelemetryEvents.TEMPLATE_FILTER_CHANGED, metadata)
+  }
+
+  trackHelpCenterOpened(metadata: HelpCenterOpenedMetadata): void {
+    this.capture(TelemetryEvents.HELP_CENTER_OPENED, metadata)
+  }
+
+  trackHelpResourceClicked(metadata: HelpResourceClickedMetadata): void {
+    this.capture(TelemetryEvents.HELP_RESOURCE_CLICKED, metadata)
+  }
+
+  trackHelpCenterClosed(metadata: HelpCenterClosedMetadata): void {
+    this.capture(TelemetryEvents.HELP_CENTER_CLOSED, metadata)
+  }
+
+  trackWorkflowCreated(metadata: WorkflowCreatedMetadata): void {
+    this.capture(TelemetryEvents.WORKFLOW_CREATED, metadata)
+  }
+
+  trackWorkflowExecution(): void {
+    this.capture(TelemetryEvents.EXECUTION_START)
+  }
+
+  trackExecutionError(metadata: ExecutionErrorMetadata): void {
+    this.capture(TelemetryEvents.EXECUTION_ERROR, metadata)
+  }
+
+  trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void {
+    this.capture(TelemetryEvents.EXECUTION_SUCCESS, metadata)
+  }
+
+  trackSharedWorkflowRun(metadata: SharedWorkflowRunMetadata): void {
+    this.capture(TelemetryEvents.SHARED_WORKFLOW_RUN, metadata)
+  }
+
+  trackSettingChanged(metadata: SettingChangedMetadata): void {
+    this.capture(TelemetryEvents.SETTING_CHANGED, metadata)
+  }
+
+  trackUiButtonClicked(metadata: UiButtonClickMetadata): void {
+    this.capture(TelemetryEvents.UI_BUTTON_CLICKED, metadata)
+  }
+
+  trackPageView(pageName: string, properties?: PageViewMetadata): void {
+    this.capture(TelemetryEvents.PAGE_VIEW, {
+      page_name: pageName,
+      ...properties
+    })
+  }
+}
diff --git a/src/platform/telemetry/types.ts b/src/platform/telemetry/types.ts
index b2e69ecee0..f759a488a1 100644
--- a/src/platform/telemetry/types.ts
+++ b/src/platform/telemetry/types.ts
@@ -12,11 +12,11 @@
  * 3. Check dist/assets/*.js files contain no tracking code
  */
 
-import type { AppMode } from '@/composables/useAppMode'
 import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { AuditLog } from '@/services/customerEventsService'
+import type { AppMode } from '@/utils/appMode'
 
 /**
  * Authentication metadata for sign-up tracking
@@ -486,10 +486,7 @@ export interface TelemetryProvider {
   trackAddApiCreditButtonClicked?(): void
   trackApiCreditTopupButtonPurchaseClicked?(amount: number): void
   trackApiCreditTopupSucceeded?(): void
-  trackRunButton?(options?: {
-    subscribe_to_run?: boolean
-    trigger_source?: ExecutionTriggerSource
-  }): void
+  trackRunButton?(properties: RunButtonProperties): void
 
   // Credit top-up tracking (composition with internal utilities)
   startTopupTracking?(): void
@@ -592,6 +589,7 @@ export const TelemetryEvents = {
   API_CREDIT_TOPUP_BUTTON_PURCHASE_CLICKED:
     'app:api_credit_topup_button_purchase_clicked',
   API_CREDIT_TOPUP_SUCCEEDED: 'app:api_credit_topup_succeeded',
+  BEGIN_CHECKOUT: 'begin_checkout',
 
   // Onboarding Survey
   USER_SURVEY_OPENED: 'app:user_survey_opened',
diff --git a/src/platform/telemetry/utils/getShellLayoutSnapshot.test.ts b/src/platform/telemetry/utils/getShellLayoutSnapshot.test.ts
index 0875d1fe9e..92982456ec 100644
--- a/src/platform/telemetry/utils/getShellLayoutSnapshot.test.ts
+++ b/src/platform/telemetry/utils/getShellLayoutSnapshot.test.ts
@@ -5,13 +5,7 @@ const state = vi.hoisted(() => ({
   activeSidebarTabId: null as string | null,
   rightSidePanelOpen: false,
   bottomPanelVisible: false,
-  openWorkflows: [] as unknown[],
-  mode: { value: 'graph' },
-  isAppMode: { value: false }
-}))
-
-vi.mock('@/composables/useAppMode', () => ({
-  useAppMode: () => ({ mode: state.mode, isAppMode: state.isAppMode })
+  openWorkflows: [] as unknown[]
 }))
 
 vi.mock('@/platform/settings/settingStore', () => ({
@@ -48,12 +42,12 @@ describe('getShellLayoutSnapshot', () => {
     state.rightSidePanelOpen = false
     state.bottomPanelVisible = false
     state.openWorkflows = []
-    state.mode.value = 'graph'
-    state.isAppMode.value = false
   })
 
   it('captures the default layout', () => {
-    expect(getShellLayoutSnapshot()).toEqual({
+    expect(
+      getShellLayoutSnapshot({ view_mode: 'graph', is_app_mode: false })
+    ).toEqual({
       view_mode: 'graph',
       is_app_mode: false,
       dock_state: 'docked',
@@ -71,10 +65,10 @@ describe('getShellLayoutSnapshot', () => {
     state.rightSidePanelOpen = true
     state.bottomPanelVisible = true
     state.openWorkflows = [{}, {}, {}]
-    state.mode.value = 'app'
-    state.isAppMode.value = true
 
-    expect(getShellLayoutSnapshot()).toEqual({
+    expect(
+      getShellLayoutSnapshot({ view_mode: 'app', is_app_mode: true })
+    ).toEqual({
       view_mode: 'app',
       is_app_mode: true,
       dock_state: 'floating',
diff --git a/src/platform/telemetry/utils/getShellLayoutSnapshot.ts b/src/platform/telemetry/utils/getShellLayoutSnapshot.ts
index c11861f181..54d96dc474 100644
--- a/src/platform/telemetry/utils/getShellLayoutSnapshot.ts
+++ b/src/platform/telemetry/utils/getShellLayoutSnapshot.ts
@@ -1,4 +1,3 @@
-import { useAppMode } from '@/composables/useAppMode'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
@@ -8,11 +7,15 @@ import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import type { ShellLayoutMetadata } from '../types'
 import { getActionbarDockState } from './getActionbarDockState'
 
-export function getShellLayoutSnapshot(): ShellLayoutMetadata {
-  const { mode, isAppMode } = useAppMode()
+type ShellLayoutMode = Pick<ShellLayoutMetadata, 'view_mode' | 'is_app_mode'>
+
+export function getShellLayoutSnapshot({
+  view_mode,
+  is_app_mode
+}: ShellLayoutMode): ShellLayoutMetadata {
   return {
-    view_mode: mode.value,
-    is_app_mode: isAppMode.value,
+    view_mode,
+    is_app_mode,
     dock_state: getActionbarDockState(),
     actionbar_position: useSettingStore().get('Comfy.UseNewMenu'),
     active_sidebar_tab: useSidebarTabStore().activeSidebarTabId,
diff --git a/src/platform/workflow/core/services/workflowService.test.ts b/src/platform/workflow/core/services/workflowService.test.ts
index 888b8b74cb..1587d16bd9 100644
--- a/src/platform/workflow/core/services/workflowService.test.ts
+++ b/src/platform/workflow/core/services/workflowService.test.ts
@@ -18,9 +18,9 @@ import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import { app } from '@/scripts/app'
 import { useAppMode } from '@/composables/useAppMode'
-import type { AppMode } from '@/composables/useAppMode'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { createMockChangeTracker } from '@/utils/__tests__/litegraphTestUtils'
+import type { AppMode } from '@/utils/appMode'
 import { t } from '@/i18n'
 
 function createModeTestWorkflow(
diff --git a/src/platform/workflow/core/services/workflowService.ts b/src/platform/workflow/core/services/workflowService.ts
index c709184a8c..d1afff8863 100644
--- a/src/platform/workflow/core/services/workflowService.ts
+++ b/src/platform/workflow/core/services/workflowService.ts
@@ -23,7 +23,6 @@ import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
 import { useDialogService } from '@/services/dialogService'
 import { useAppMode } from '@/composables/useAppMode'
-import type { AppMode } from '@/composables/useAppMode'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
@@ -37,6 +36,7 @@ import {
   appendWorkflowJsonExt,
   generateUUID
 } from '@/utils/formatUtil'
+import type { AppMode } from '@/utils/appMode'
 
 function linearModeToAppMode(linearMode: unknown): AppMode | null {
   if (typeof linearMode !== 'boolean') return null
diff --git a/src/platform/workflow/management/stores/comfyWorkflow.ts b/src/platform/workflow/management/stores/comfyWorkflow.ts
index 3e357d0a54..9b05a2035b 100644
--- a/src/platform/workflow/management/stores/comfyWorkflow.ts
+++ b/src/platform/workflow/management/stores/comfyWorkflow.ts
@@ -2,13 +2,13 @@ import { markRaw } from 'vue'
 
 import { t } from '@/i18n'
 import type { ChangeTracker } from '@/scripts/changeTracker'
-import type { AppMode } from '@/composables/useAppMode'
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import { UserFile } from '@/stores/userFileStore'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { MissingModelCandidate } from '@/platform/missingModel/types'
 import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
 import type { MissingNodeType } from '@/types/comfy'
+import type { AppMode } from '@/utils/appMode'
 
 export interface InputWidgetConfig {
   height?: number
diff --git a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.test.ts b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.test.ts
new file mode 100644
index 0000000000..38d422c0ae
--- /dev/null
+++ b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.test.ts
@@ -0,0 +1,165 @@
+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 { CreateTopupResponse } from '@/platform/workspace/api/workspaceApi'
+
+import TopUpCreditsDialogContentWorkspace from './TopUpCreditsDialogContentWorkspace.vue'
+
+const mockFetchBalance = vi.fn()
+const mockFetchStatus = vi.fn()
+const mockTopup = vi.fn<(amountCents: number) => Promise<CreateTopupResponse>>()
+const mockStartOperation = vi.fn()
+const mockShowSettings = vi.fn()
+const mockToastAdd = vi.fn()
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    fetchBalance: mockFetchBalance,
+    fetchStatus: mockFetchStatus,
+    topup: (amountCents: number) => mockTopup(amountCents)
+  })
+}))
+
+vi.mock('@/platform/workspace/stores/billingOperationStore', () => ({
+  useBillingOperationStore: () => ({
+    hasPendingOperations: false,
+    startOperation: mockStartOperation
+  })
+}))
+
+vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
+  useSettingsDialog: () => ({ show: mockShowSettings })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({ closeDialog: vi.fn() })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    trackApiCreditTopupButtonPurchaseClicked: vi.fn()
+  })
+}))
+
+vi.mock('@/platform/telemetry/topupTracker', () => ({
+  clearTopupTracking: vi.fn()
+}))
+
+vi.mock('@/composables/useExternalLink', () => ({
+  useExternalLink: () => ({
+    buildDocsUrl: () => 'https://docs.comfy.org',
+    docsPaths: { partnerNodesPricing: '' }
+  })
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: mockToastAdd })
+}))
+
+vi.mock('@/base/credits/comfyCredits', () => ({
+  creditsToUsd: (credits: number) => credits,
+  usdToCredits: (usd: number) => usd
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { close: 'Close' },
+      subscription: { addCredits: 'Add credits' },
+      credits: {
+        topUp: {
+          addMoreCredits: 'Add more credits',
+          addMoreCreditsToRun: 'Add more credits to run',
+          selectAmount: 'Select amount',
+          youPay: 'You pay',
+          youGet: 'You get',
+          purchaseSuccess: 'Credits added successfully!',
+          purchaseError: 'Purchase Failed',
+          purchaseErrorDetail: 'Failed to purchase credits: {error}',
+          unknownError: 'An unknown error occurred',
+          minRequired: 'Minimum required',
+          maxAllowed: 'Maximum allowed',
+          needMore: 'Need more?',
+          contactUs: 'Contact us',
+          viewPricing: 'View pricing',
+          insufficientWorkflowMessage: 'Insufficient credits'
+        }
+      }
+    }
+  }
+})
+
+function topupResponse(
+  status: CreateTopupResponse['status']
+): CreateTopupResponse {
+  return {
+    billing_op_id: 'op-1',
+    topup_id: 'topup-1',
+    status,
+    amount_cents: 5000
+  }
+}
+
+function renderDialog() {
+  return render(TopUpCreditsDialogContentWorkspace, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        FormattedNumberStepper: {
+          name: 'FormattedNumberStepper',
+          props: ['modelValue'],
+          template: '<div />'
+        }
+      }
+    }
+  })
+}
+
+async function clickAddCredits() {
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: 'Add credits' }))
+}
+
+describe('TopUpCreditsDialogContentWorkspace', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFetchBalance.mockResolvedValue(undefined)
+    mockFetchStatus.mockResolvedValue(undefined)
+  })
+
+  it('refreshes both balance and status after a completed top-up', async () => {
+    mockTopup.mockResolvedValue(topupResponse('completed'))
+
+    renderDialog()
+    await clickAddCredits()
+
+    expect(mockFetchBalance).toHaveBeenCalledOnce()
+    expect(mockFetchStatus).toHaveBeenCalledOnce()
+    expect(mockShowSettings).toHaveBeenCalledWith('workspace')
+  })
+
+  it('does not refresh balance or status for a pending top-up', async () => {
+    mockTopup.mockResolvedValue(topupResponse('pending'))
+
+    renderDialog()
+    await clickAddCredits()
+
+    expect(mockStartOperation).toHaveBeenCalledWith('op-1', 'topup')
+    expect(mockFetchBalance).not.toHaveBeenCalled()
+    expect(mockFetchStatus).not.toHaveBeenCalled()
+  })
+
+  it('does not refresh balance or status for a failed top-up', async () => {
+    mockTopup.mockResolvedValue(topupResponse('failed'))
+
+    renderDialog()
+    await clickAddCredits()
+
+    expect(mockFetchBalance).not.toHaveBeenCalled()
+    expect(mockFetchStatus).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
index 55f716fa9a..38ead95902 100644
--- a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
@@ -176,7 +176,7 @@ const settingsDialog = useSettingsDialog()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
-const { fetchBalance, topup } = useBillingContext()
+const { fetchBalance, fetchStatus, topup } = useBillingContext()
 
 const billingOperationStore = useBillingOperationStore()
 const isPolling = computed(() => billingOperationStore.hasPendingOperations)
@@ -265,7 +265,7 @@ async function handleBuy() {
         summary: t('credits.topUp.purchaseSuccess'),
         life: 5000
       })
-      await fetchBalance()
+      await Promise.all([fetchBalance(), fetchStatus()])
       handleClose(false)
       settingsDialog.show('workspace')
     } else if (response.status === 'pending') {
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index a0706bb338..59d3ef4b07 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -61,6 +61,8 @@ import {
   ComponentWidgetImpl,
   DOMWidgetImpl
 } from '@/scripts/domWidget'
+import { useAccountPreconditionDialog } from '@/platform/cloud/subscription/composables/useAccountPreconditionDialog'
+import { resolveAccountPrecondition } from '@/platform/errorCatalog/accountPreconditionRouting'
 import { useDialogService } from '@/services/dialogService'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -787,20 +789,13 @@ export class ComfyApp {
     })
 
     api.addEventListener('execution_error', ({ detail }) => {
-      // Check if this is an auth-related error or credits-related error
-      if (
-        detail.exception_message?.includes(
-          'Unauthorized: Please login first to use this node.'
-        )
-      ) {
-        useDialogService().showApiNodesSignInDialog([detail.node_type])
-      } else if (
-        detail.exception_message?.includes(
-          'Payment Required: Please add credits to your account to use this node.'
-        )
-      ) {
-        useDialogService().showTopUpCreditsDialog({
-          isInsufficientCredits: true
+      const precondition = resolveAccountPrecondition({
+        exceptionType: detail.exception_type ?? '',
+        exceptionMessage: detail.exception_message ?? ''
+      })
+      if (precondition) {
+        useAccountPreconditionDialog().open(precondition, {
+          nodeType: detail.node_type
         })
       } else if (useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) {
         useExecutionErrorStore().showErrorOverlay()
@@ -1697,6 +1692,24 @@ export class ComfyApp {
               this.canvas.draw(true, true)
             }
           } catch (error: unknown) {
+            const preconditionResponseError =
+              error instanceof PromptExecutionError &&
+              typeof error.response.error === 'object'
+                ? error.response.error
+                : undefined
+            const promptPrecondition = preconditionResponseError
+              ? resolveAccountPrecondition({
+                  exceptionType: preconditionResponseError.type,
+                  exceptionMessage: preconditionResponseError.message
+                })
+              : undefined
+            // Account preconditions (sign-in, subscription, credits) open their
+            // own modal and must stay out of the error panel and error count.
+            if (promptPrecondition) {
+              useAccountPreconditionDialog().open(promptPrecondition)
+              console.error(error)
+              break
+            }
             if (
               error instanceof PromptExecutionError &&
               typeof error.response.error === 'object' &&
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 3f6f061e14..5e00d97679 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -1,11 +1,11 @@
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { WORKFLOW_ACCEPT_STRING } from '@/platform/workflow/core/types/formats'
-import { type StatusWsMessageStatus } from '@/schemas/apiSchema'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
-import { isCloud } from '@/platform/distribution/types'
+import { useRunButtonTelemetry } from '@/composables/useRunButtonTelemetry'
 import { extractWorkflow } from '@/platform/remote/comfyui/jobs/fetchJobs'
 import type { JobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
+import { WORKFLOW_ACCEPT_STRING } from '@/platform/workflow/core/types/formats'
+import { type StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -487,10 +487,10 @@ export class ComfyUI {
           id: 'queue-button',
           textContent: 'Queue Prompt',
           onclick: () => {
-            if (isCloud) {
-              useTelemetry()?.trackRunButton({ trigger_source: 'legacy_ui' })
-              useTelemetry()?.trackWorkflowExecution()
-            }
+            useRunButtonTelemetry().trackRunButton({
+              trigger_source: 'legacy_ui'
+            })
+            useTelemetry()?.trackWorkflowExecution()
             app.queuePrompt(0, this.batchCount)
           }
         }),
@@ -595,10 +595,10 @@ export class ComfyUI {
             id: 'queue-front-button',
             textContent: 'Queue Front',
             onclick: () => {
-              if (isCloud) {
-                useTelemetry()?.trackRunButton({ trigger_source: 'legacy_ui' })
-                useTelemetry()?.trackWorkflowExecution()
-              }
+              useRunButtonTelemetry().trackRunButton({
+                trigger_source: 'legacy_ui'
+              })
+              useTelemetry()?.trackWorkflowExecution()
               app.queuePrompt(-1, this.batchCount)
             }
           }),
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index 648d0d04d1..c47bdac713 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -302,6 +302,7 @@ export const useLitegraphService = () => {
         advanced: inputSpec.advanced,
         hidden: inputSpec.hidden
       })
+      if (inputSpec.hidden !== undefined) widget.hidden = inputSpec.hidden
       if (dynamic) widget.tooltip = inputSpec.tooltip
     }
 
diff --git a/src/stores/executionStore.test.ts b/src/stores/executionStore.test.ts
index 8df4484fcf..54292ce375 100644
--- a/src/stores/executionStore.test.ts
+++ b/src/stores/executionStore.test.ts
@@ -1127,6 +1127,13 @@ describe('useExecutionStore - WebSocket event handlers', () => {
       expect(store.queuedJobs['job-1']).toBeUndefined()
     })
 
+    it('does not track success for jobs this client did not queue', () => {
+      fire('execution_success', { prompt_id: 'foreign-job', timestamp: 0 })
+
+      expect(mockTrackExecutionSuccess).not.toHaveBeenCalled()
+      expect(mockTrackSharedWorkflowRun).not.toHaveBeenCalled()
+    })
+
     it('tracks shared workflow run when the queued workflow has share attribution', () => {
       const workflow = createQueuedWorkflow()
       workflow.shareId = 'share-1'
@@ -1299,6 +1306,75 @@ describe('useExecutionStore - WebSocket event handlers', () => {
         exception_message: 'CUDA OOM'
       })
     })
+
+    it('keeps a subscription precondition (no node_id) out of the error panel and count', () => {
+      const errorStore = useExecutionErrorStore()
+
+      fire('execution_error', {
+        prompt_id: 'job-1',
+        node_id: null,
+        exception_type: 'InactiveSubscriptionError',
+        exception_message:
+          'User has no active subscription. Please subscribe to a plan to continue.',
+        traceback: []
+      })
+
+      expect(errorStore.lastExecutionError).toBeNull()
+      expect(errorStore.lastPromptError).toBeNull()
+      expect(errorStore.lastNodeErrors).toBeNull()
+      expect(errorStore.totalErrorCount).toBe(0)
+    })
+
+    it('keeps a sign-in precondition out of the error panel and count', () => {
+      const errorStore = useExecutionErrorStore()
+
+      fire('execution_error', {
+        prompt_id: 'job-1',
+        node_id: 'n1',
+        node_type: 'ApiNode',
+        exception_type: 'RuntimeError',
+        exception_message: 'Unauthorized: Please login first to use this node.',
+        traceback: []
+      })
+
+      expect(errorStore.lastExecutionError).toBeNull()
+      expect(errorStore.lastPromptError).toBeNull()
+      expect(errorStore.totalErrorCount).toBe(0)
+    })
+
+    it('keeps a runtime credit precondition at a node out of the error panel and count', () => {
+      const errorStore = useExecutionErrorStore()
+
+      fire('execution_error', {
+        prompt_id: 'job-1',
+        node_id: 'n1',
+        node_type: 'PartnerApiNode',
+        exception_type: 'InsufficientFundsError',
+        exception_message:
+          'Payment Required: Please add credits to your account to use this node.',
+        traceback: []
+      })
+
+      expect(errorStore.lastExecutionError).toBeNull()
+      expect(errorStore.lastPromptError).toBeNull()
+      expect(errorStore.totalErrorCount).toBe(0)
+    })
+
+    it('still routes an ordinary node runtime error to the error panel', () => {
+      const errorStore = useExecutionErrorStore()
+
+      fire('execution_error', {
+        prompt_id: 'job-1',
+        node_id: 'n1',
+        node_type: 'KSampler',
+        exception_type: 'RuntimeError',
+        exception_message: 'Something unrelated broke',
+        traceback: []
+      })
+
+      expect(errorStore.lastExecutionError).not.toBeNull()
+      expect(errorStore.totalErrorCount).toBe(1)
+    })
   })
 
   describe('notification', () => {
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index f6ad3bc9c8..980f46b1c0 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -2,13 +2,9 @@ import { defineStore } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
 
 import { useNodeProgressText } from '@/composables/node/useNodeProgressText'
-import type { AppMode } from '@/composables/useAppMode'
-import {
-  getWorkflowMode,
-  isAppModeValue,
-  useAppMode
-} from '@/composables/useAppMode'
+import { useAppMode } from '@/composables/useAppMode'
 import { isCloud } from '@/platform/distribution/types'
+import { resolveAccountPrecondition } from '@/platform/errorCatalog/accountPreconditionRouting'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -40,6 +36,8 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { classifyCloudValidationError } from '@/utils/executionErrorUtil'
 import { executionIdToNodeLocatorId } from '@/utils/graphTraversalUtil'
+import type { AppMode } from '@/utils/appMode'
+import { getWorkflowMode, isAppModeValue } from '@/utils/appMode'
 
 interface ExecutionNodeInfo {
   title?: string | null
@@ -315,8 +313,8 @@ export const useExecutionStore = defineStore('execution', () => {
   function handleExecutionSuccess(e: CustomEvent<ExecutionSuccessWsMessage>) {
     const jobId = e.detail.prompt_id
     const queuedJob = queuedJobs.value[jobId]
-    if (isCloud && queuedJob) {
-      const telemetry = useTelemetry()
+    const telemetry = useTelemetry()
+    if (queuedJob) {
       telemetry?.trackExecutionSuccess({
         jobId
       })
@@ -426,18 +424,22 @@ export const useExecutionStore = defineStore('execution', () => {
   }
 
   function handleExecutionError(e: CustomEvent<ExecutionErrorWsMessage>) {
-    if (isCloud) {
-      useTelemetry()?.trackExecutionError({
-        jobId: e.detail.prompt_id,
-        nodeId: String(e.detail.node_id),
-        nodeType: e.detail.node_type,
-        error: e.detail.exception_message
-      })
+    useTelemetry()?.trackExecutionError({
+      jobId: e.detail.prompt_id,
+      nodeId: String(e.detail.node_id),
+      nodeType: e.detail.node_type,
+      error: e.detail.exception_message
+    })
 
+    if (isCloud) {
       // Cloud wraps validation errors (400) in exception_message as embedded JSON.
       if (handleCloudValidationError(e.detail)) return
     }
 
+    // Account preconditions (sign-in, subscription, credits) open their own
+    // modal and must stay out of the error panel and error count.
+    if (handleAccountPreconditionError(e.detail)) return
+
     // Service-level errors (e.g. "Job has stagnated") have no associated node.
     // Route them as job errors
     if (handleServiceLevelError(e.detail)) return
@@ -448,6 +450,20 @@ export const useExecutionStore = defineStore('execution', () => {
     resetExecutionState(e.detail.prompt_id)
   }
 
+  function handleAccountPreconditionError(
+    detail: ExecutionErrorWsMessage
+  ): boolean {
+    const precondition = resolveAccountPrecondition({
+      exceptionType: detail.exception_type ?? '',
+      exceptionMessage: detail.exception_message ?? ''
+    })
+    if (!precondition) return false
+
+    clearInitializationByJobId(detail.prompt_id)
+    resetExecutionState(detail.prompt_id)
+    return true
+  }
+
   function handleServiceLevelError(detail: ExecutionErrorWsMessage): boolean {
     const nodeId = detail.node_id
     if (nodeId !== null && nodeId !== undefined && String(nodeId) !== '')
diff --git a/src/types/index.ts b/src/types/index.ts
index 947c9b3ad2..dd54c46fec 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,3 +1,4 @@
+import type { ComfyDesktop2Bridge } from '@comfyorg/comfyui-desktop-bridge-types'
 import type {
   DeviceStats,
   EmbeddingsResponse,
@@ -25,6 +26,7 @@ import type {
 } from './extensionTypes'
 
 export type { ComfyExtension } from './comfy'
+export type { ComfyDesktop2Bridge } from '@comfyorg/comfyui-desktop-bridge-types'
 export type { ComfyApi } from '@/scripts/api'
 export type { ComfyApp } from '@/scripts/app'
 export type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
@@ -88,5 +90,7 @@ declare global {
 
     /** For use in tests to track app initialization state */
     __appReadiness?: AppReadiness
+
+    __comfyDesktop2?: ComfyDesktop2Bridge
   }
 }
diff --git a/src/utils/appMode.ts b/src/utils/appMode.ts
new file mode 100644
index 0000000000..16154ddea5
--- /dev/null
+++ b/src/utils/appMode.ts
@@ -0,0 +1,21 @@
+export type AppMode =
+  | 'graph'
+  | 'app'
+  | 'builder:inputs'
+  | 'builder:outputs'
+  | 'builder:arrange'
+
+type WorkflowModeSource = {
+  activeMode: AppMode | null
+  initialMode: AppMode | null | undefined
+}
+
+export function getWorkflowMode(
+  workflow: WorkflowModeSource | null | undefined
+): AppMode {
+  return workflow?.activeMode ?? workflow?.initialMode ?? 'graph'
+}
+
+export function isAppModeValue(mode: AppMode): boolean {
+  return mode === 'app' || mode === 'builder:arrange'
+}
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 24c7eaedc0..bcfda399b1 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -111,7 +111,7 @@ const queueStore = useQueueStore()
 const assetsStore = useAssetsStore()
 const versionCompatibilityStore = useVersionCompatibilityStore()
 const graphCanvasContainerRef = ref<HTMLDivElement | null>(null)
-const { isBuilderMode } = useAppMode()
+const { isBuilderMode, mode, isAppMode } = useAppMode()
 const { linearMode } = storeToRefs(useCanvasStore())
 
 watch(linearMode, (isLinear) => {
@@ -354,7 +354,12 @@ const onGraphReady = () => {
 
     // Shell layout snapshot, once per session (cloud only)
     if (isCloud && telemetry) {
-      telemetry.trackShellLayout(getShellLayoutSnapshot())
+      telemetry.trackShellLayout(
+        getShellLayoutSnapshot({
+          view_mode: mode.value,
+          is_app_mode: isAppMode.value
+        })
+      )
     }
 
     // Setting values now available after comfyApp.setup.