fix(agent): match the design spec on branding and greeting

From a refresh of the V0 design spec (Notion "In-App Agent V0 - Design &
Requirements", Section A + B5) against the shipped panel:

- Branding: the design pins "the original Comfy mark" everywhere; the
  panel used a lucide sparkles placeholder. Swap to the square Comfy
  mark (icon-[comfy--comfy-c]) on all four surfaces - the sidebar tab,
  the top-bar "Ask Comfy Agent" button, the panel header title row, and
  the empty-state mark.
- Empty state: B5 requires a centered Comfy mark with a glow above the
  greeting; it was missing. Add it (accent-tinted, currentColor glow).
- Greeting: B5/Section A want the account first name ("Hello Jo,"); the
  panel rendered "Hello there," because the name was never wired. Pull
  the first name from useCurrentUser and pass it through to the greeting,
  falling back to the existing neutral default when there is no name.

Tests: assert the Comfy mark on both the tab registration and the top-bar
button; add a greeting-personalization test; loosen the e2e greeting
assertion to the stable "Hello" prefix so it survives personalization.

Typecheck, browser typecheck, oxlint, eslint, and knip clean; 1159 unit
tests pass.

.claude/settings.json

@@ -1,86 +0,0 @@
-{
-  "hooks": {
-    "PreToolUse": [
-      {
-        "matcher": "Bash",
-        "hooks": [
-          {
-            "type": "command",
-            "if": "Bash(tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc directly.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(vue-tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running vue-tsc directly.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc via npx.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of running tsc via pnpx.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpm exec tsc *)",
-            "command": "echo 'Use `pnpm typecheck` instead of `pnpm exec tsc`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of npx vitest.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of pnpx vitest.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx eslint *)",
-            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of npx eslint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx eslint *)",
-            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of pnpx eslint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx prettier *)",
-            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx prettier *)",
-            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx oxlint *)",
-            "command": "echo 'Use `pnpm oxlint` instead of npx oxlint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx stylelint *)",
-            "command": "echo 'Use `pnpm stylelint` instead of npx stylelint.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(npx knip *)",
-            "command": "echo 'Use `pnpm knip` instead of npx knip.' >&2 && exit 2"
-          },
-          {
-            "type": "command",
-            "if": "Bash(pnpx knip *)",
-            "command": "echo 'Use `pnpm knip` instead of pnpx knip.' >&2 && exit 2"
-          }
-        ]
-      }
-    ]
-  }
-}

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -134,6 +134,27 @@ jobs:
           fi
           echo '✅ No Customer.io references found'
 
+      - name: Scan dist for Syft telemetry references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for Syft references...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e '(?i)syft' \
+            -e '(?i)sy-d\.io' \
+            dist; then
+            echo '❌ ERROR: Syft references found in dist assets!'
+            echo 'Syft must be properly tree-shaken from OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
+            echo '2. Call telemetry via useTelemetry() hook'
+            echo '3. Use conditional dynamic imports behind isCloud checks'
+            exit 1
+          fi
+          echo '✅ No Syft references found'
+
       - name: Scan dist for Cloudflare Turnstile sitekey references
         run: |
           set -euo pipefail

.github/workflows/ci-tests-e2e-coverage.yaml

@@ -121,7 +121,7 @@ jobs:
             --title "ComfyUI E2E Coverage" \
             --no-function-coverage \
             --precision 1 \
-            --ignore-errors source,unmapped,range \
+            --ignore-errors source,unmapped \
             --synthesize-missing
 
       - name: Upload HTML report artifact

.github/workflows/ci-tests-storybook.yaml

@@ -95,6 +95,7 @@ jobs:
     if: |
       github.event_name == 'workflow_dispatch'
       || (github.event_name == 'pull_request'
+          && github.event.pull_request.head.repo.fork == false
           && startsWith(github.head_ref, 'version-bump-')
           && (needs.changes.outputs.storybook-changes == 'true'
               || needs.changes.outputs.app-frontend-changes == 'true'

.github/workflows/ci-tests-unit.yaml

@@ -55,6 +55,3 @@ jobs:
           flags: unit
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: false
-
-      - name: Enforce critical coverage gate
-        run: pnpm test:coverage:critical

.github/workflows/ci-vercel-website-preview.yaml

@@ -30,7 +30,7 @@ concurrency:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
     runs-on: ubuntu-latest
     permissions:
       contents: read

.github/workflows/ci-website-e2e.yaml

@@ -67,7 +67,15 @@ jobs:
 
       - name: Deploy report to Cloudflare
         id: deploy
-        if: always() && !cancelled()
+        if: >-
+          ${{
+            always() &&
+            !cancelled() &&
+            (
+              github.event_name != 'pull_request' ||
+              github.event.pull_request.head.repo.fork == false
+            )
+          }}
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

.github/workflows/cla.yml

@@ -5,7 +5,6 @@ on:
     types: [created]
   pull_request_target:
     types: [opened, synchronize, closed]
-  merge_group:
 
 permissions:
   actions: write
@@ -17,13 +16,41 @@ jobs:
   cla-assistant:
     runs-on: ubuntu-latest
     steps:
+      # The CLA action normally requires every commit author in a PR to sign.
+      # We only want the PR author to sign, so we allowlist all other committers
+      # by computing them from the PR's commits and excluding the PR author.
+      - name: Build author-only allowlist
+        id: allowlist
+        if: >
+          github.event_name == 'pull_request_target' ||
+          (github.event_name == 'issue_comment' && github.event.issue.pull_request && (
+            github.event.comment.body == 'recheck' ||
+            github.event.comment.body == 'I have read and agree to the Contributor License Agreement'
+          ))
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number || github.event.issue.number }}
+          PR_AUTHOR: ${{ github.event.pull_request.user.login || github.event.issue.user.login }}
+          BASE_ALLOWLIST: action@github.com,actions-user,ampagent,claude,comfy-pr-bot,GitHub Action,github-actions,github-actions[bot],Glary Bot,Glary-Bot,*[bot]
+        run: |
+          others=$(gh api "repos/${{ github.repository }}/pulls/${PR_NUMBER}/commits" --paginate \
+            --jq '.[] | (.author.login // empty), (.committer.login // empty)' \
+            | sort -u | grep -vix "${PR_AUTHOR}" | paste -sd, -)
+          if [ -n "$others" ]; then
+            echo "allowlist=${BASE_ALLOWLIST},${others}" >> "$GITHUB_OUTPUT"
+          else
+            echo "allowlist=${BASE_ALLOWLIST}" >> "$GITHUB_OUTPUT"
+          fi
+
       - name: CLA Assistant
         # Run on PR events, on "recheck" comment, or when someone posts the exact signing phrase.
         # IMPORTANT: this phrase must match `custom-pr-sign-comment` below.
         if: >
           github.event_name == 'pull_request_target' ||
-          github.event.comment.body == 'recheck' ||
-          github.event.comment.body == 'I have read and agree to the Contributor License Agreement'
+          (github.event_name == 'issue_comment' && github.event.issue.pull_request && (
+            github.event.comment.body == 'recheck' ||
+            github.event.comment.body == 'I have read and agree to the Contributor License Agreement'
+          ))
         uses: contributor-assistant/github-action@ca4a40a7d1004f18d9960b404b97e5f30a505a08 # v2.6.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -39,9 +66,10 @@ jobs:
           path-to-signatures: signatures/cla.json
           branch: main
 
-          # Allowlist bots so they don't need to sign (optional, comma-separated).
+          # Only the PR author must sign: bots plus every non-author committer
+          # are allowlisted via the "Build author-only allowlist" step above.
           # *[bot] is a catch-all for any GitHub App bot account.
-          allowlist: action@github.com,actions-user,ampagent,claude,comfy-pr-bot,GitHub Action,github-actions,Glary Bot,Glary-Bot,*[bot]
+          allowlist: ${{ steps.allowlist.outputs.allowlist }}
 
           # Custom PR comment messages
           custom-notsigned-prcomment: |

.github/workflows/cloud-dispatch-build.yaml

@@ -32,12 +32,13 @@ jobs:
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       (github.event_name != 'pull_request' ||
-       (github.event.action == 'labeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-       (github.event.action == 'synchronize' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
+       (github.event.pull_request.head.repo.fork == false &&
+        ((github.event.action == 'labeled' &&
+          contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
+         (github.event.action == 'synchronize' &&
+          (contains(github.event.pull_request.labels.*.name, 'preview') ||
+           contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
+           contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))))
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload

.github/workflows/cloud-dispatch-cleanup.yaml

@@ -21,6 +21,7 @@ jobs:
     # - Preview label specifically removed
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      github.event.pull_request.head.repo.fork == false &&
       ((github.event.action == 'closed' &&
         (contains(github.event.pull_request.labels.*.name, 'preview') ||
          contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||

apps/website/public/icons/node-link.svg

@@ -1,3 +1,3 @@
-<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Vector" d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="var(--fill-0, #F2FF59)"/>
+<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="#F2FF59"/>
 </svg>

apps/website/src/components/blocks/FeatureGrid01.vue

@@ -56,7 +56,7 @@ const columnClass: Record<ColumnCount, string> = {
 
 <template>
   <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
-    <SectionHeader :label="eyebrow" align="start">
+    <SectionHeader max-width="xl" :label="eyebrow" align="start">
       {{ heading }}
       <template v-if="subtitle" #subtitle>
         <p class="mt-4 max-w-xl text-sm text-smoke-700 lg:text-base">

apps/website/src/components/common/SiteFooter.vue

@@ -38,7 +38,8 @@ const topColumns: { title: string; links: FooterLink[] }[] = [
       { label: t('nav.comfyCloud', locale), href: routes.cloud },
       { label: t('nav.comfyApi', locale), href: routes.api },
       { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise },
-      { label: t('nav.mcpServer', locale), href: routes.mcp }
+      { label: t('nav.mcpServer', locale), href: routes.mcp },
+      { label: t('nav.supportedModels', locale), href: routes.models }
     ]
   },
   {

apps/website/src/components/contact/FormSection.vue

@@ -33,36 +33,41 @@ useHeroAnimation({
 </script>
 
 <template>
-  <section ref="sectionRef" class="px-4 py-20 lg:flex lg:px-20 lg:py-24">
+  <section
+    ref="sectionRef"
+    class="px-4 py-20 lg:flex lg:gap-16 lg:px-20 lg:py-24"
+  >
     <!-- Left column: intro + image -->
     <div class="lg:w-1/2">
-      <SectionLabel ref="badgeRef">
-        {{ t(tk('badge'), locale) }}
-      </SectionLabel>
+      <div class="lg:max-w-xl">
+        <SectionLabel ref="badgeRef">
+          {{ t(tk('badge'), locale) }}
+        </SectionLabel>
 
-      <h1
-        ref="headingRef"
-        class="text-primary-comfy-canvas mt-4 text-3xl font-light whitespace-pre-line lg:text-5xl"
-      >
-        {{ t(tk('heading'), locale) }}
-      </h1>
+        <h1
+          ref="headingRef"
+          class="mt-4 text-3xl font-light whitespace-pre-line text-primary-comfy-canvas lg:text-5xl"
+        >
+          {{ t(tk('heading'), locale) }}
+        </h1>
 
-      <div ref="descRef">
-        <p class="text-primary-comfy-canvas mt-4 text-sm">
-          {{ t(tk('description'), locale) }}
-        </p>
+        <div ref="descRef">
+          <p class="mt-4 text-sm text-primary-comfy-canvas">
+            {{ t(tk('description'), locale) }}
+          </p>
 
-        <p class="text-primary-comfy-canvas mt-4 text-sm">
-          {{ t(tk('supportLink'), locale) }}
-          <a
-            href="https://docs.comfy.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-primary-comfy-yellow underline"
-          >
-            {{ t(tk('supportLinkCta'), locale) }}
-          </a>
-        </p>
+          <p class="mt-4 text-sm text-primary-comfy-canvas">
+            {{ t(tk('supportLink'), locale) }}
+            <a
+              href="https://docs.comfy.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-primary-comfy-yellow underline"
+            >
+              {{ t(tk('supportLinkCta'), locale) }}
+            </a>
+          </p>
+        </div>
       </div>
 
       <div ref="imageRef" class="mt-8 overflow-hidden rounded-2xl lg:-ml-20">

apps/website/src/components/customers/ArticleNav.vue

@@ -15,7 +15,7 @@ const { categories } = defineProps<{
 
 const activeSection = ref(categories[0]?.value ?? '')
 
-const HEADER_OFFSET = -144
+const HEADER_OFFSET_PX = -144
 const BOTTOM_THRESHOLD_PX = 4
 const SCROLL_SAFETY_MS = 1500
 
@@ -52,7 +52,7 @@ function scrollToSection(id: string) {
   const el = document.getElementById(id)
   if (el) {
     scrollTo(el, {
-      offset: HEADER_OFFSET,
+      offset: HEADER_OFFSET_PX,
       duration: 0.8,
       immediate: prefersReducedMotion(),
       onComplete: clearScrollLock

apps/website/src/components/customers/content/ListItem.astro

@@ -1,5 +1,5 @@
 <li
-  class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow before:content-['']"
+  class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow"
 >
   <slot />
 </li>

apps/website/src/data/mainNavigation.ts

@@ -40,13 +40,13 @@ export function getMainNavigation(locale: Locale): NavItem[] {
     {
       label: t('nav.products', locale),
       featured: {
-        imageSrc: 'https://media.comfy.org/website/nav/featured-model-card.jpg',
+        imageSrc: 'https://media.comfy.org/website/nav/mcp-card.webp',
         imageAlt: t('nav.featuredProductsAlt', locale),
         title: t('nav.featuredProductsTitle', locale),
         cta: {
-          label: t('cta.tryWorkflow', locale),
+          label: t('cta.getStarted', locale),
           ariaLabel: t('nav.featuredProductsCtaAria', locale),
-          href: 'https://comfy.org/workflows/api_seedance2_0_r2v-64f4db9e3e33/'
+          href: routes.mcp
         }
       },
       columns: [
@@ -82,6 +82,7 @@ export function getMainNavigation(locale: Locale): NavItem[] {
               href: routes.launches,
               badge: 'new'
             },
+            { label: t('nav.supportedModels', locale), href: routes.models },
             {
               label: t('nav.docs', locale),
               href: externalLinks.docs,

apps/website/src/i18n/translations.ts

@@ -26,6 +26,10 @@ const translations = {
     en: 'Try Workflow',
     'zh-CN': '试用工作流'
   },
+  'cta.getStarted': {
+    en: 'GET STARTED',
+    'zh-CN': '快速开始'
+  },
   'cta.watchNow': {
     en: 'Watch Now',
     'zh-CN': '立即观看'
@@ -2183,6 +2187,7 @@ const translations = {
   'nav.badgeNew': { en: 'NEW', 'zh-CN': '新' },
   // Column headers used in HeaderMainDesktop dropdowns
   'nav.mcpServer': { en: 'Comfy MCP', 'zh-CN': 'Comfy MCP' },
+  'nav.supportedModels': { en: 'Supported Models', 'zh-CN': '支持的模型' },
   'nav.colFeatures': { en: 'Features', 'zh-CN': '功能' },
   'nav.colPrograms': { en: 'Programs', 'zh-CN': '项目' },
   'nav.colConnect': { en: 'Connect', 'zh-CN': '联系' },
@@ -2196,16 +2201,16 @@ const translations = {
   // 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'
+    en: 'NEW: COMFY MCP',
+    'zh-CN': '全新发布：Comfy MCP'
   },
   'nav.featuredProductsAlt': {
-    en: 'Seedance 2.0 release feature image',
-    'zh-CN': 'Seedance 2.0 发布精选图片'
+    en: 'Comfy MCP feature image',
+    'zh-CN': 'Comfy MCP 精选图片'
   },
   'nav.featuredProductsCtaAria': {
-    en: 'Try the Seedance 2.0 workflow',
-    'zh-CN': '试用 Seedance 2.0 工作流'
+    en: 'Get started with Comfy MCP',
+    'zh-CN': '开始使用 Comfy MCP'
   },
   'nav.featuredCommunityTitle': {
     en: 'Sky Replacement',

browser_tests/assets/linear-validation-warning.json

@@ -0,0 +1,45 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": {
+        "0": 64,
+        "1": 104
+      },
+      "size": {
+        "0": 210,
+        "1": 58
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "linearData": {
+      "inputs": [],
+      "outputs": ["9"]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -537,7 +537,6 @@ export const comfyPageFixture = base.extend<{
         'Comfy.TutorialCompleted': true,
         'Comfy.Queue.MaxHistoryItems': 64,
         'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize,
-        'Comfy.VueNodes.AutoScaleLayout': false,
         // Disable toast warning about version compatibility, as they may or
         // may not appear - depending on upstream ComfyUI dependencies
         'Comfy.VersionCompatibility.DisableWarnings': true,

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -34,6 +34,10 @@ export class AppModeHelper {
   public readonly outputPlaceholder: Locator
   /** The linear-mode widget list container (visible in app mode). */
   public readonly linearWidgets: Locator
+  /** The validation warning shown above the app mode run button. */
+  public readonly validationWarning: Locator
+  /** The action that opens graph mode errors from the validation warning. */
+  public readonly viewErrorsInGraphButton: Locator
   /** The PrimeVue Popover for the image picker (renders with role="dialog"). */
   public readonly imagePickerPopover: Locator
   /** The Run button in the app mode footer. */
@@ -92,13 +96,19 @@ export class AppModeHelper {
     this.outputPlaceholder = this.page.getByTestId(
       TestIds.builder.outputPlaceholder
     )
-    this.linearWidgets = this.page.getByTestId('linear-widgets')
+    this.linearWidgets = this.page.getByTestId(TestIds.linear.widgetContainer)
+    this.validationWarning = this.page.getByTestId(
+      TestIds.linear.validationWarning
+    )
+    this.viewErrorsInGraphButton = this.validationWarning.getByTestId(
+      TestIds.linear.viewErrorsInGraph
+    )
     this.imagePickerPopover = this.page
       .getByRole('dialog')
       .filter({ has: this.page.getByRole('button', { name: 'All' }) })
       .first()
     this.runButton = this.page
-      .getByTestId('linear-run-button')
+      .getByTestId(TestIds.linear.runButton)
       .getByRole('button', { name: /run/i })
     this.welcome = this.page.getByTestId(TestIds.appMode.welcome)
     this.emptyWorkflowText = this.page.getByTestId(

browser_tests/fixtures/helpers/TemplateHelper.ts

@@ -6,6 +6,10 @@ import type {
 } from '@/platform/workflow/templates/types/template'
 import { mockTemplateIndex } from '@e2e/fixtures/data/templateFixtures'
 
+const ROUTE_PATTERN_WORKFLOW_TEMPLATES = /\/api\/workflow_templates(?:\?.*)?$/
+const ROUTE_PATTERN_TEMPLATE_INDEX = /\/templates\/index\.json(?:\?.*)?$/
+const ROUTE_PATTERN_TEMPLATE_THUMBNAILS = /\/templates\/.*\.webp(?:\?.*)?$/
+
 interface TemplateConfig {
   readonly templates: readonly TemplateInfo[]
   readonly index: readonly WorkflowTemplates[] | null
@@ -41,10 +45,6 @@ export function withTemplates(templates: TemplateInfo[]): TemplateOperator {
 export class TemplateHelper {
   private templates: TemplateInfo[]
   private index: WorkflowTemplates[] | null
-  private routeHandlers: Array<{
-    pattern: string
-    handler: (route: Route) => Promise<void>
-  }> = []
 
   constructor(
     private readonly page: Page,
@@ -64,29 +64,30 @@ export class TemplateHelper {
   }
 
   async mock(): Promise<void> {
+    await this.mockCustomTemplates()
     await this.mockIndex()
     await this.mockThumbnails()
   }
 
-  async mockIndex(): Promise<void> {
+  async mockCustomTemplates(): Promise<void> {
     const customTemplatesHandler = async (route: Route) => {
-      const customTemplates: Record<string, string[]> = {}
       await route.fulfill({
         status: 200,
-        body: JSON.stringify(customTemplates),
+        body: '{}',
         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)
 
+    await this.page.route(
+      ROUTE_PATTERN_WORKFLOW_TEMPLATES,
+      customTemplatesHandler
+    )
+  }
+
+  async mockIndex(): Promise<void> {
     const indexHandler = async (route: Route) => {
       const payload = this.index ?? mockTemplateIndex(this.templates)
       await route.fulfill({
@@ -98,9 +99,8 @@ export class TemplateHelper {
         }
       })
     }
-    const indexPattern = '**/templates/index.json'
-    this.routeHandlers.push({ pattern: indexPattern, handler: indexHandler })
-    await this.page.route(indexPattern, indexHandler)
+
+    await this.page.route(ROUTE_PATTERN_TEMPLATE_INDEX, indexHandler)
   }
 
   async mockThumbnails(): Promise<void> {
@@ -114,12 +114,8 @@ export class TemplateHelper {
         }
       })
     }
-    const thumbnailPattern = '**/templates/**.webp'
-    this.routeHandlers.push({
-      pattern: thumbnailPattern,
-      handler: thumbnailHandler
-    })
-    await this.page.route(thumbnailPattern, thumbnailHandler)
+
+    await this.page.route(ROUTE_PATTERN_TEMPLATE_THUMBNAILS, thumbnailHandler)
   }
 
   getTemplates(): TemplateInfo[] {
@@ -129,15 +125,6 @@ export class TemplateHelper {
   get templateCount(): number {
     return this.templates.length
   }
-
-  async clearMocks(): Promise<void> {
-    for (const { pattern, handler } of this.routeHandlers) {
-      await this.page.unroute(pattern, handler)
-    }
-    this.routeHandlers = []
-    this.templates = []
-    this.index = null
-  }
 }
 
 export function createTemplateHelper(

browser_tests/fixtures/selectors.ts

@@ -172,6 +172,9 @@ export const TestIds = {
     mobileNavigation: 'linear-mobile-navigation',
     mobileWorkflows: 'linear-mobile-workflows',
     outputInfo: 'linear-output-info',
+    runButton: 'linear-run-button',
+    validationWarning: 'linear-validation-warning',
+    viewErrorsInGraph: 'linear-view-errors',
     widgetContainer: 'linear-widgets'
   },
   builder: {

browser_tests/fixtures/templateApiFixture.ts

@@ -7,10 +7,6 @@ export const templateApiFixture = base.extend<{
   templateApi: TemplateHelper
 }>({
   templateApi: async ({ page }, use) => {
-    const templateApi = createTemplateHelper(page)
-
-    await use(templateApi)
-
-    await templateApi.clearMocks()
+    await use(createTemplateHelper(page))
   }
 })

browser_tests/tests/agent/agentPanel.spec.ts

@@ -0,0 +1,196 @@
+import type { WebSocketRoute } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
+
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+
+import enMessages from '@/locales/en/main.json'
+import type { AgentWsEvent } from '@/workbench/extensions/agent/schemas/agentApiSchema'
+
+import {
+  DRAFT_PATCH,
+  MESSAGE_DELTA_EVENT,
+  MESSAGE_DONE_EVENT,
+  THINKING_EVENT,
+  TOOL_CALL_EVENT,
+  mockAgentBoot
+} from '@e2e/tests/agent/agentPanelMocks'
+
+/**
+ * In-App Agent panel e2e coverage (FE-1187).
+ *
+ * The panel is a CLOUD-ONLY workbench extension: `src/extensions/core/index.ts`
+ * imports `agentPanel.ts` only under `if (isCloud)`, and `isCloud` is the
+ * build-time `__DISTRIBUTION__ === 'cloud'` define. It therefore exists only in
+ * the cloud build, which the `cloud` Playwright project runs against
+ * (`frontend-dist-cloud` in CI; `playwright.config.ts` gives that project
+ * `grep: /@cloud/` while every other project greps it out). These specs are
+ * tagged `@cloud` so they run there and nowhere else. The `comfyPageFixture`
+ * itself already installs the cloud Firebase-auth mock for any `@cloud` test and
+ * boots the app, so tests only arrange agent mocks and act.
+ *
+ * The tab is additionally gated FAIL-CLOSED by the PostHog flag
+ * `agent-in-app-experience`: `agentPanel.ts` reads `posthog.isFeatureEnabled`
+ * and only registers the sidebar tab once it is `true`. PostHog only initializes
+ * when `/api/features` supplies a `posthog_project_token`, so the mocks seed both
+ * the token and the flag (through PostHog `bootstrap.featureFlags`, which resolves
+ * the read synchronously with no `/decide` network call — see `agentPanelMocks.ts`).
+ * `agentFlagEnabled` (default true) is a fixture option a test flips off to model
+ * the fail-closed default.
+ *
+ * REST is mocked via `page.route` (POST messages -> 202, GET draft snapshot) and
+ * server->client WS frames are injected with the repo's `webSocketFixture`
+ * (`context.routeWebSocket(/\/ws/)`): `ws.send(JSON.stringify({type, data}))`
+ * pushes a frame onto the app's shared `/ws`, which is exactly where the panel's
+ * reconnecting event source listens.
+ */
+
+type AgentFixtures = {
+  agentFlagEnabled: boolean
+  postedMessages: string[]
+}
+
+// Install agent boot + REST mocks in the `page` fixture (before navigation) and
+// expose the recorded POST bodies. `comfyPageFixture` consumes this same `page`
+// and then boots the app, so the mocks are in place before mount.
+const agentCloudFixture = comfyPageFixture.extend<AgentFixtures>({
+  agentFlagEnabled: [true, { option: true }],
+  postedMessages: async ({ page, agentFlagEnabled }, use) => {
+    const { postedMessages } = await mockAgentBoot(page, {
+      agentFlag: agentFlagEnabled
+    })
+    await use(postedMessages)
+  }
+})
+
+const test = mergeTests(agentCloudFixture, webSocketFixture)
+
+const AGENT_TAB_BUTTON = '.agent-panel-tab-button'
+
+// Push one agent WS event onto the app's /ws in the ComfyUI envelope shape.
+function pushEvent(ws: WebSocketRoute, event: AgentWsEvent): void {
+  ws.send(JSON.stringify(event))
+}
+
+test.describe('In-App Agent panel', { tag: '@cloud' }, () => {
+  test.describe('flag off', () => {
+    test.use({ agentFlagEnabled: false })
+
+    test('does not register the agent rail tab', async ({
+      comfyPage,
+      postedMessages
+    }) => {
+      // Touch the fixture so its mocks (flag-off /api/features) are installed.
+      expect(postedMessages).toHaveLength(0)
+
+      // Fail-closed: with the PostHog flag false the sidebar tab is never
+      // registered, so the rail button must not exist.
+      await expect(comfyPage.page.locator(AGENT_TAB_BUTTON)).toHaveCount(0)
+    })
+  })
+
+  test('shows the greeting, inserts a suggested prompt, and completes a chat turn', async ({
+    comfyPage,
+    postedMessages,
+    getWebSocket
+  }) => {
+    const page = comfyPage.page
+
+    // Flag on: the rail tab is registered. Open it.
+    const tabButton = page.locator(AGENT_TAB_BUTTON)
+    await expect(tabButton).toBeVisible()
+    await tabButton.click()
+
+    const panel = page.locator('#agent-panel-root')
+    await expect(panel).toBeVisible()
+
+    // Empty state: greeting + question and the five suggested-prompt chips. The greeting
+    // personalizes to the account's first name, so match the stable prefix, not a fixed name.
+    await expect(panel.getByText(/^Hello/)).toBeVisible()
+    await expect(panel.getByText('What do you want to make?')).toBeVisible()
+    // Sourced from the bundled locale so the spec cannot drift from the rendered prompts.
+    const firstPrompt = enMessages.agent.suggestedPrompts[0]
+    const promptChip = panel.getByRole('button', { name: firstPrompt })
+    await expect(promptChip).toBeVisible()
+
+    const composer = panel.getByPlaceholder('Ask the agent anything...')
+    const sendButton = panel.getByRole('button', { name: 'Send' })
+
+    // Clicking a suggested prompt INSERTS it into the composer, it does not send.
+    await expect(composer).toHaveValue('')
+    await promptChip.click()
+    await expect(composer).toHaveValue(firstPrompt)
+    expect(
+      postedMessages,
+      'inserting a prompt must not POST a message'
+    ).toHaveLength(0)
+
+    // Submitting sends the composed message: POST /api/agent/threads/new/messages.
+    const ws = await getWebSocket()
+    await sendButton.click()
+    await expect.poll(() => postedMessages.length).toBeGreaterThanOrEqual(1)
+    expect(postedMessages[0]).toContain(firstPrompt)
+    // The composer clears once the send is accepted.
+    await expect(composer).toHaveValue('')
+
+    // agent_thinking -> the "Thinking..." status is visible.
+    pushEvent(ws, THINKING_EVENT)
+    await expect(panel.getByText('Thinking...')).toBeVisible()
+
+    // agent_tool_call (ok) -> a tool-call group card appears ("Ran 1 tool call").
+    pushEvent(ws, TOOL_CALL_EVENT)
+    await expect(panel.getByText('Ran 1 tool call')).toBeVisible()
+
+    // agent_message_delta with markdown -> rendered agent message; the **bold**
+    // run renders as <strong>.
+    pushEvent(ws, MESSAGE_DELTA_EVENT)
+    await expect(
+      panel.locator('strong', { hasText: 'fully ready' })
+    ).toBeVisible()
+    // Text arriving clears the thinking chip.
+    await expect(panel.getByText('Thinking...')).toBeHidden()
+
+    // agent_message_done -> the turn settles: the primary button returns to Send
+    // (it is Stop while streaming).
+    pushEvent(ws, MESSAGE_DONE_EVENT)
+    await expect(panel.getByRole('button', { name: 'Send' })).toBeVisible()
+    await expect(panel.getByRole('button', { name: 'Stop' })).toHaveCount(0)
+  })
+
+  test('applies a draft_patch graph to the canvas', async ({
+    comfyPage,
+    postedMessages,
+    getWebSocket
+  }) => {
+    const page = comfyPage.page
+    const panel = page.locator('#agent-panel-root')
+
+    const tabButton = page.locator(AGENT_TAB_BUTTON)
+    await expect(tabButton).toBeVisible()
+    await tabButton.click()
+    await expect(panel).toBeVisible()
+
+    // The draft store only adopts a draft_patch whose workflow_id matches the
+    // server's workflow. The server returns that id in the message ack, and the
+    // panel binds the draft store to it. So send once to establish the bind before
+    // pushing the patch. A draft_patch is otherwise NEVER turn-filtered.
+    await panel.getByPlaceholder('Ask the agent anything...').fill('Build it')
+    await panel.getByRole('button', { name: 'Send' }).click()
+    await expect.poll(() => postedMessages.length).toBeGreaterThanOrEqual(1)
+
+    const ws = await getWebSocket()
+    pushEvent(ws, { type: 'draft_patch', data: DRAFT_PATCH })
+
+    // The two-node draft graph is validated and handed to app.loadGraphData, so
+    // the canvas graph must reflect it.
+    await expect
+      .poll(() => page.evaluate(() => window.app!.graph!.nodes.length))
+      .toBe(2)
+    const nodeTypes = await page.evaluate(() =>
+      window.app!.graph!.nodes.map((n) => n.type)
+    )
+    expect(nodeTypes).toEqual(
+      expect.arrayContaining(['CheckpointLoaderSimple', 'SaveImage'])
+    )
+  })
+})

browser_tests/tests/agent/agentPanelMocks.ts

@@ -0,0 +1,272 @@
+import type { Page, Route } from '@playwright/test'
+
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+import type {
+  AgentDraftSnapshot,
+  AgentTurnAccepted,
+  AgentWsEvent,
+  DraftPatchData
+} from '@/workbench/extensions/agent/schemas/agentApiSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+
+/**
+ * Typed mocks for the In-App Agent panel e2e spec. Every REST body and WS frame
+ * is annotated with the shared agent contract types
+ * (`@/workbench/extensions/agent/schemas/agentApiSchema`) and the workflow schema,
+ * so a wire-shape drift is a compile error here, not a flaky runtime failure. The
+ * payload values are copied from the captured fixtures under
+ * `src/workbench/extensions/agent/schemas/__fixtures__/agent/`.
+ */
+
+// The turn everything in scenario 2 & 3 is addressed by. The panel adopts this
+// server-minted message_id (from the POST 202 ack) as the TurnId that keys the
+// assistant message the WS frames stream into.
+const THREAD_ID = 'd4c016c4-3b8c-44cf-97de-1ae27e43e718'
+const TURN_ID = '3818ba00-d772-4a3f-98c1-9312725b577d'
+const WORKFLOW_ID = 'a81718a4-02ae-41e6-ae85-c33b7bb880f6'
+
+// The 202 body the panel's postMessage('new') expects: {thread_id, message_id}
+// plus the captured additive workflow_id (the schema is passthrough).
+const TURN_ACCEPTED: AgentTurnAccepted = {
+  message_id: TURN_ID,
+  thread_id: THREAD_ID,
+  workflow_id: WORKFLOW_ID
+}
+
+/**
+ * A minimal schema-valid v0.4 workflow. `validateComfyWorkflow` first parses a
+ * top-level `version: number` (the captured draft graphs omit it, so they would
+ * be rejected before ever reaching the canvas); this shape carries `version`,
+ * `last_node_id`, `last_link_id`, `nodes` and `links` so it survives validation
+ * and `app.loadGraphData` actually applies it. Two nodes so the assertion on the
+ * canvas node count is unambiguous.
+ */
+const DRAFT_GRAPH: ComfyWorkflowJSON = {
+  version: 0.4,
+  last_node_id: 2,
+  last_link_id: 0,
+  nodes: [
+    {
+      id: 1,
+      type: 'CheckpointLoaderSimple',
+      pos: [100, 300],
+      size: [210, 100],
+      flags: {},
+      order: 0,
+      mode: 0,
+      inputs: [],
+      outputs: [
+        { name: 'MODEL', type: 'MODEL', links: [] },
+        { name: 'CLIP', type: 'CLIP', links: [] },
+        { name: 'VAE', type: 'VAE', links: [] }
+      ],
+      properties: {},
+      widgets_values: ['sd_xl_base_1.0.safetensors']
+    },
+    {
+      id: 2,
+      type: 'SaveImage',
+      pos: [1400, 300],
+      size: [210, 100],
+      flags: {},
+      order: 1,
+      mode: 0,
+      inputs: [{ name: 'images', type: 'IMAGE', link: null }],
+      outputs: [],
+      properties: {},
+      widgets_values: ['ComfyUI']
+    }
+  ],
+  links: []
+}
+
+// The GET /api/agent/draft snapshot body: {content, version}. content rides the
+// wire as an opaque object; the panel re-validates it before loading.
+const DRAFT_SNAPSHOT: AgentDraftSnapshot = {
+  content: DRAFT_GRAPH as unknown as Record<string, unknown>,
+  version: 24
+}
+
+// A draft_patch WS event whose content is the minimal valid graph above. The panel
+// adopts monotonically, so the version must exceed any snapshot already adopted.
+export const DRAFT_PATCH: DraftPatchData = {
+  base_version: 24,
+  version: 25,
+  content: DRAFT_GRAPH as unknown as Record<string, unknown>,
+  workflow_id: WORKFLOW_ID,
+  message_id: TURN_ID,
+  thread_id: THREAD_ID
+}
+
+// The chat-turn WS frames for scenario 2, in arrival order. Each rides the ComfyUI
+// envelope {type, data}; values copied from ws-turn-ask-run.jsonl but retargeted to
+// TURN_ID so they land on the turn the POST ack opened.
+export const THINKING_EVENT: AgentWsEvent = {
+  type: 'agent_thinking',
+  data: {
+    delta: "I'll set the positive prompt to your red fox scene.",
+    message_id: TURN_ID,
+    thread_id: THREAD_ID
+  }
+}
+
+export const TOOL_CALL_EVENT: AgentWsEvent = {
+  type: 'agent_tool_call',
+  data: {
+    tool_name: 'set_widget',
+    status: 'ok',
+    args: ['workflow', 'set-widget', 'workflow.json'],
+    message_id: TURN_ID,
+    thread_id: THREAD_ID
+  }
+}
+
+// Markdown delta: the **bold** run renders as <strong> through the sanitizing
+// markdown pipeline, which the spec asserts on.
+const MESSAGE_DELTA_TEXT =
+  'The graph is **fully ready** to go — prompt set to the red fox in the snow.'
+
+export const MESSAGE_DELTA_EVENT: AgentWsEvent = {
+  type: 'agent_message_delta',
+  data: {
+    delta: MESSAGE_DELTA_TEXT,
+    message_id: TURN_ID,
+    thread_id: THREAD_ID
+  }
+}
+
+export const MESSAGE_DONE_EVENT: AgentWsEvent = {
+  type: 'agent_message_done',
+  data: {
+    message_id: TURN_ID,
+    thread_id: THREAD_ID,
+    usage: {
+      input_tokens: 4493,
+      output_tokens: 425,
+      total_tokens: 12393,
+      cache_read_input_tokens: 35596,
+      cache_creation_input_tokens: 0
+    }
+  }
+}
+
+/**
+ * `/api/features` payload that boots the cloud telemetry provider with PostHog AND
+ * turns the agent gate on. PostHog only initializes when a `posthog_project_token`
+ * is present, and the panel's fail-closed gate reads `posthog.isFeatureEnabled`;
+ * seeding the flag through PostHog's `bootstrap.featureFlags` makes that read
+ * resolve `true` synchronously at init with no `/decide` round-trip, so the gate is
+ * deterministic. Omit `agentFlag` (or pass false) to model the fail-closed default.
+ */
+function agentFeatures(agentFlag: boolean): RemoteConfig {
+  return {
+    team_workspaces_enabled: true,
+    posthog_project_token: 'phc_e2e_agent_panel',
+    posthog_config: {
+      // Never let posthog-js reach its flags endpoint in the test env; bootstrap
+      // alone supplies the flag value the gate reads.
+      advanced_disable_flags: true,
+      bootstrap: {
+        featureFlags: { 'agent-in-app-experience': agentFlag }
+      }
+    }
+  }
+}
+
+const jsonRoute = (body: unknown) => ({
+  status: 200,
+  contentType: 'application/json',
+  body: JSON.stringify(body)
+})
+
+/**
+ * Boots the cloud app against fully mocked boot + agent REST endpoints. Mirrors
+ * `CloudWorkspaceMockHelper.mockBoot`, adding the agent's own REST surface
+ * (`postMessage`, `getDraft`). Returns the recorded POST bodies so the spec can
+ * assert the composed message reached the wire. Auth (Firebase) is mocked by the
+ * caller via `CloudAuthHelper` before navigation.
+ */
+export async function mockAgentBoot(
+  page: Page,
+  { agentFlag }: { agentFlag: boolean }
+): Promise<{ postedMessages: string[] }> {
+  const postedMessages: string[] = []
+
+  await page.route('**/api/features', (r) =>
+    r.fulfill(jsonRoute(agentFeatures(agentFlag)))
+  )
+  await page.route('**/api/system_stats', (r) =>
+    r.fulfill(jsonRoute(mockSystemStats))
+  )
+  await page.route('**/api/users', (r) =>
+    r.fulfill(
+      jsonRoute({
+        storage: 'server',
+        migrated: true,
+        users: { 'test-user-e2e': 'E2E Test User' }
+      })
+    )
+  )
+  // TutorialCompleted marks the user as returning so the new-user Templates dialog
+  // never auto-opens over the sidebar rail; errors tab off suppresses a 401 toast.
+  await page.route('**/api/settings', (r) =>
+    r.fulfill(
+      jsonRoute({
+        'Comfy.TutorialCompleted': true,
+        'Comfy.RightSidePanel.ShowErrorsTab': false
+      })
+    )
+  )
+  await page.route('**/api/userdata**', (r) => r.fulfill(jsonRoute([])))
+  await page.route('**/api/extensions', (r) => r.fulfill(jsonRoute([])))
+  await page.route('**/api/object_info', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/global_subgraphs', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/i18n', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/auth/session', (r) =>
+    r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
+  )
+  await page.route('**/api/auth/token', (r) =>
+    r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
+  )
+  await page.route('**/releases**', (r) => r.fulfill(jsonRoute([])))
+  await page.route('**/api/workspaces', (r) =>
+    r.fulfill(
+      jsonRoute({
+        workspaces: [
+          {
+            id: 'ws-personal',
+            name: 'Personal',
+            type: 'personal',
+            role: 'owner'
+          }
+        ]
+      })
+    )
+  )
+
+  // POST /api/agent/threads/new/messages -> 202 {thread_id, message_id, workflow_id}.
+  // The server owns the workflow and returns its id in this ack; the panel binds the
+  // draft store to it and then only adopts draft_patch events whose workflow_id
+  // matches. Record the body so the spec can assert the composed text was sent, not
+  // just that a request fired. GET on the same path (history hydration) is empty.
+  await page.route('**/api/agent/threads/*/messages', (route: Route) => {
+    const request = route.request()
+    if (request.method() === 'POST') {
+      postedMessages.push(request.postData() ?? '')
+      return route.fulfill({
+        status: 202,
+        contentType: 'application/json',
+        body: JSON.stringify(TURN_ACCEPTED)
+      })
+    }
+    return route.fulfill(jsonRoute([]))
+  })
+
+  await page.route('**/api/agent/draft**', (r) =>
+    r.fulfill(jsonRoute(DRAFT_SNAPSHOT))
+  )
+
+  return { postedMessages }
+}

browser_tests/tests/appModeValidationWarning.spec.ts

@@ -0,0 +1,106 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { NodeError, PromptResponse } from '@/schemas/apiSchema'
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+import { enableErrorsOverlay } from '@e2e/fixtures/helpers/ErrorsTabHelper'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const SAVE_IMAGE_NODE_ID = '9'
+
+function buildSaveImageRequiredInputError(): NodeError {
+  return {
+    class_type: 'SaveImage',
+    dependent_outputs: [],
+    errors: [
+      {
+        type: 'required_input_missing',
+        message: 'Required input is missing: images',
+        details: '',
+        extra_info: { input_name: 'images' }
+      }
+    ]
+  }
+}
+
+test.describe(
+  'App mode validation warning',
+  { tag: ['@ui', '@workflow'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsOverlay(comfyPage)
+      await comfyPage.workflow.loadWorkflow('linear-validation-warning')
+      await comfyPage.appMode.toggleAppMode()
+      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+    })
+
+    test('opens graph errors from the app mode validation warning', async ({
+      comfyPage
+    }) => {
+      await expect(comfyPage.appMode.validationWarning).toBeHidden()
+
+      const exec = new ExecutionHelper(comfyPage)
+      await exec.mockValidationFailure({
+        [SAVE_IMAGE_NODE_ID]: buildSaveImageRequiredInputError()
+      })
+
+      await comfyPage.appMode.runButton.click()
+      const appModeOverlay = comfyPage.appMode.centerPanel.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(appModeOverlay).toBeHidden()
+
+      await expect(comfyPage.appMode.validationWarning).toBeVisible()
+      await expect(comfyPage.appMode.validationWarning).toContainText(
+        /Required input missing/i
+      )
+      await expect(comfyPage.appMode.viewErrorsInGraphButton).toBeVisible()
+
+      await comfyPage.appMode.viewErrorsInGraphButton.click()
+
+      await expect(comfyPage.appMode.linearWidgets).toBeHidden()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.root)
+      ).toBeVisible()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
+      ).toBeVisible()
+    })
+
+    test('keeps the app mode run button enabled when the warning is visible', async ({
+      comfyPage
+    }) => {
+      const exec = new ExecutionHelper(comfyPage)
+      await exec.mockValidationFailure({
+        [SAVE_IMAGE_NODE_ID]: buildSaveImageRequiredInputError()
+      })
+
+      await comfyPage.appMode.runButton.click()
+      await expect(comfyPage.appMode.validationWarning).toBeVisible()
+      await expect(comfyPage.appMode.runButton).toBeEnabled()
+
+      let promptQueued = false
+      const mockResponse: PromptResponse = {
+        prompt_id: 'test-id',
+        node_errors: {},
+        error: ''
+      }
+      await comfyPage.page.route(
+        '**/api/prompt',
+        async (route) => {
+          promptQueued = true
+          await route.fulfill({
+            status: 200,
+            body: JSON.stringify(mockResponse)
+          })
+        },
+        { times: 1 }
+      )
+
+      await comfyPage.appMode.runButton.click()
+
+      await expect.poll(() => promptQueued).toBe(true)
+    })
+  }
+)

browser_tests/tests/dialogs/pricingTableDeepLink.spec.ts

@@ -28,7 +28,12 @@ const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
 // matches it against the members self-row.
 const SELF_EMAIL = 'e2e@test.comfy.org'
 
-const BOOT_FEATURES = { team_workspaces_enabled: true } satisfies RemoteConfig
+// consolidated_billing_enabled routes personal workspaces to the unified
+// pricing table asserted here; without it they fall back to the legacy table.
+const BOOT_FEATURES = {
+  team_workspaces_enabled: true,
+  consolidated_billing_enabled: true
+} satisfies RemoteConfig
 // Disable the experimental Asset API: with it on (cloud default) the unmocked
 // asset endpoints 403 and workflow restore throws uncaught, aborting the
 // GraphCanvas onMounted chain before the deep-link loader.

browser_tests/tests/graph.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 
+import { toLinkId } from '@/types/linkId'
 import { toNodeId } from '@/types/nodeId'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
@@ -15,9 +16,10 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
     await comfyPage.workflow.loadWorkflow('inputs/input_order_swap')
     await expect
       .poll(() =>
-        comfyPage.page.evaluate(() => {
-          return window.app!.graph!.links.get(1)?.target_slot
-        })
+        comfyPage.page.evaluate(
+          (linkId) => window.app!.graph!.links.get(linkId)?.target_slot,
+          toLinkId(1)
+        )
       )
       .toBe(1)
   })

browser_tests/tests/linearMode.spec.ts

@@ -3,6 +3,7 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Linear Mode', { tag: '@ui' }, () => {
   test('Displays linear controls when app mode active', async ({
@@ -16,7 +17,9 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   test('Run button visible in linear mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(comfyPage.page.getByTestId('linear-run-button')).toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.linear.runButton)
+    ).toBeVisible()
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {

browser_tests/tests/maskEditor.spec.ts

@@ -46,6 +46,7 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     { tag: ['@smoke', '@screenshot'] },
     async ({ comfyPage, maskEditor }) => {
       const { nodeId } = await maskEditor.loadImageOnNode()
+      await comfyPage.canvasOps.pan({ x: 0, y: 40 }, { x: 300, y: 300 })
 
       const nodeHeader = comfyPage.vueNodes
         .getNodeLocator(nodeId)

browser_tests/tests/subgraph/subgraphSlots.spec.ts

@@ -691,7 +691,8 @@ test(
       const emptySlotPos = await seedIOSlot.getOpenSlotPosition()
       await comfyPage.canvas.hover({ position: emptySlotPos })
       await comfyPage.page.mouse.down()
-      await stepsSlot.hover()
+      const { width, height } = (await stepsSlot.boundingBox())!
+      await stepsSlot.hover({ position: { x: (width * 3) / 4, y: height / 2 } })
       await expect.poll(hasSnap).toBe(true)
       await comfyPage.page.mouse.up()
 

browser_tests/tests/templateFilteringCount.spec.ts

@@ -17,7 +17,7 @@ test.describe(
   'Template distribution filtering count',
   { tag: '@cloud' },
   () => {
-    test.beforeEach(async ({ comfyPage, templateApi }) => {
+    test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.Templates.SelectedModels', [])
       await comfyPage.settings.setSetting(
         'Comfy.Templates.SelectedUseCases',
@@ -25,8 +25,6 @@ test.describe(
       )
       await comfyPage.settings.setSetting('Comfy.Templates.SelectedRunsOn', [])
       await comfyPage.settings.setSetting('Comfy.Templates.SortBy', 'default')
-
-      await templateApi.mockThumbnails()
     })
 
     test('displayed count matches visible cards when distribution filter excludes templates', async ({
@@ -56,7 +54,7 @@ test.describe(
           })
         ])
       )
-      await templateApi.mockIndex()
+      await templateApi.mock()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()
@@ -101,7 +99,7 @@ test.describe(
           })
         ])
       )
-      await templateApi.mockIndex()
+      await templateApi.mock()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()
@@ -143,7 +141,7 @@ test.describe(
           })
         ])
       )
-      await templateApi.mockIndex()
+      await templateApi.mock()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()
@@ -184,7 +182,7 @@ test.describe(
           })
         ])
       )
-      await templateApi.mockIndex()
+      await templateApi.mock()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()
@@ -222,7 +220,7 @@ test.describe(
           })
         ])
       )
-      await templateApi.mockIndex()
+      await templateApi.mock()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -1238,7 +1238,7 @@ test(
   { tag: '@vue-nodes' },
   async ({ comfyMouse, comfyPage }) => {
     async function performDisconnect(slot: Locator, isFast: boolean) {
-      await comfyMouse.dragElementBy(slot, { x: isFast ? -25 : -80 })
+      await comfyMouse.dragElementBy(slot, { x: isFast ? -30 : -80 })
 
       if (!isFast) {
         await expect(comfyPage.contextMenu.litegraphContextMenu).toBeVisible()
@@ -1251,7 +1251,7 @@ test(
 
     const ksamplerLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
     const ksampler = new VueNodeFixture(ksamplerLocator)
-    await comfyMouse.dragElementBy(ksamplerLocator, { x: 100 })
+    await comfyMouse.dragElementBy(ksampler.title, { x: 100 })
 
     await test.step('Disconnection with normal links', async () => {
       await performDisconnect(ksampler.getSlot('model'), true)

browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts

@@ -234,7 +234,8 @@ test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
       await comfyPage.page
         .context()
         .grantPermissions(['clipboard-read', 'clipboard-write'])
-      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+      await comfyPage.nodeOps.clearGraph()
+      await comfyPage.searchBoxV2.addNode('Load Image')
       await comfyPage.vueNodes.waitForNodes(1)
       await comfyPage.page
         .locator('[data-node-id] img')

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -14,7 +14,8 @@ const wstest = mergeTests(test, webSocketFixture)
 
 test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
-    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.nodeOps.clearGraph()
+    await comfyPage.searchBoxV2.addNode('Load Image')
 
     const loadImageNode = (
       await comfyPage.nodeOps.getNodeRefsByType('LoadImage')

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -12,14 +12,14 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
   const getHeaderPos = async (
     comfyPage: ComfyPage,
     title: string
-  ): Promise<{ x: number; y: number; width: number; height: number }> => {
+  ): Promise<{ x: number; y: number }> => {
     const box = await comfyPage.vueNodes
       .getNodeByTitle(title)
       .getByTestId('node-title')
       .first()
       .boundingBox()
     if (!box) throw new Error(`${title} header not found`)
-    return box
+    return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
   }
 
   const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) =>
@@ -84,29 +84,27 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await comfyPage.idleFrames(2)
   }
 
-  test('should allow moving nodes by dragging', async ({ comfyPage }) => {
-    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
-      x: 256,
-      y: 256
-    })
+  test('should allow moving nodes by dragging', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const initialHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+    await comfyMouse.dragElementBy(node.header, { x: 100, y: 100 })
 
     const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
+    await expectPosChanged(initialHeaderPos, newHeaderPos)
   })
 
   test('should not move node when pointer moves less than drag threshold', async ({
-    comfyPage
+    comfyPage,
+    comfyMouse
   }) => {
     const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
 
     // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
-    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
-      steps: 5
-    })
-    await comfyPage.page.mouse.up()
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+    await comfyMouse.dragElementBy(node.header, { x: 2, y: 1 })
     await comfyPage.nextFrame()
 
     const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
@@ -295,14 +293,12 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
       await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
 
       // Re-fetch drag source after clicks in case the header reflowed.
-      const dragSrc = await getHeaderPos(comfyPage, 'Load Checkpoint')
-      const centerX = dragSrc.x + dragSrc.width / 2
-      const centerY = dragSrc.y + dragSrc.height / 2
+      const headerPos = await getHeaderPos(comfyPage, 'Load Checkpoint')
 
-      await comfyPage.page.mouse.move(centerX, centerY)
+      await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
       await comfyPage.page.mouse.down()
       await comfyPage.nextFrame()
-      await comfyPage.page.mouse.move(centerX + dx, centerY + dy, {
+      await comfyPage.page.mouse.move(headerPos.x + dx, headerPos.y + dy, {
         steps: 20
       })
       await comfyPage.page.mouse.up()

browser_tests/tests/vueNodes/nodeStates/pin.spec.ts

@@ -42,7 +42,10 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     await expect(pinIndicator2).toBeHidden()
   })
 
-  test('should not allow dragging pinned nodes', async ({ comfyPage }) => {
+  test('should not allow dragging pinned nodes', async ({
+    comfyMouse,
+    comfyPage
+  }) => {
     const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
     await checkpointNodeHeader.click()
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
@@ -50,10 +53,7 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     // Try to drag the node
     const headerPos = await checkpointNodeHeader.boundingBox()
     if (!headerPos) throw new Error('Failed to get header position')
-    await comfyPage.canvasOps.dragAndDrop(
-      { x: headerPos.x, y: headerPos.y },
-      { x: headerPos.x + 256, y: headerPos.y + 256 }
-    )
+    await comfyMouse.dragElementBy(checkpointNodeHeader, { x: 256, y: 256 })
 
     // Verify the node is not dragged (same position before and after click-and-drag)
     await expect
@@ -64,11 +64,7 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     await checkpointNodeHeader.click()
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
 
-    // Try to drag the node again
-    await comfyPage.canvasOps.dragAndDrop(
-      { x: headerPos.x, y: headerPos.y },
-      { x: headerPos.x + 256, y: headerPos.y + 256 }
-    )
+    await comfyMouse.dragElementBy(checkpointNodeHeader, { x: 256, y: 256 })
 
     // Verify the node is dragged
     await expect

browser_tests/tests/widgetCopyButton.spec.ts

@@ -5,12 +5,7 @@ import {
 
 test.describe('Widget copy button', { tag: ['@ui', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    // Add a PreviewAny node which has a read-only textarea with a copy button
-    await comfyPage.page.evaluate(() => {
-      const node = window.LiteGraph!.createNode('PreviewAny')
-      window.app!.graph.add(node)
-    })
-
+    await comfyPage.searchBoxV2.addNode('Preview as Text')
     await comfyPage.vueNodes.waitForNodes()
   })
 

global.d.ts

@@ -41,6 +41,29 @@ interface GtagFunction {
   (...args: unknown[]): void
 }
 
+type SyftDataTraits = Record<string, string | number | null | undefined>
+
+interface SyftDataPendingFetch {
+  args: unknown[]
+  resolve: (value: unknown) => void
+  reject: (reason?: unknown) => void
+}
+
+interface SyftDataClient {
+  identify(email: string, traits?: SyftDataTraits): void
+  signup(email: string, traits?: SyftDataTraits): void
+  track(event: string, traits?: SyftDataTraits): void
+  page(...args: unknown[]): void
+  q?: unknown[][]
+  fi?: SyftDataPendingFetch[]
+  fetchID?: (...args: unknown[]) => Promise<unknown>
+}
+
+/** Installed by the Syft UMD instead of SyftDataClient when telemetry is opted out */
+interface SyftDisabledClient {
+  enable: () => void
+}
+
 interface Window {
   __CONFIG__: {
     gtm_container_id?: string
@@ -78,6 +101,8 @@ interface Window {
   }
   dataLayer?: Array<Record<string, unknown>>
   gtag?: GtagFunction
+  syft?: SyftDataClient | SyftDisabledClient
+  syftc?: { sourceId?: string; enabled?: boolean }
   ire_o?: string
   ire?: ImpactQueueFunction
   rewardful?: RewardfulQueueFunction

package.json

@@ -53,7 +53,6 @@
     "test:browser:coverage": "cross-env COLLECT_COVERAGE=true pnpm test:browser",
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
     "test:coverage": "vitest run --coverage",
-    "test:coverage:critical": "cross-env COVERAGE_CRITICAL=true vitest run --coverage",
     "test:unit": "vitest run",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",
@@ -121,6 +120,7 @@
     "primevue": "catalog:",
     "reka-ui": "catalog:",
     "semver": "^7.7.2",
+    "shiki": "catalog:",
     "three": "catalog:",
     "tiptap-markdown": "^0.8.10",
     "typegpu": "catalog:",

packages/design-system/src/css/comfyIconSet.js

@@ -1,10 +1,4 @@
-import {
-  cleanupSVG,
-  importDirectorySync,
-  isEmptyColor,
-  parseColors,
-  runSVGO
-} from '@iconify/tools'
+import { cleanupSVG, importDirectorySync, runSVGO } from '@iconify/tools'
 import { resolve } from 'node:path'
 
 export const COMFY_ICON_PREFIX = 'comfy'
@@ -13,13 +7,6 @@ const COMFY_ICONS_DIR = resolve(import.meta.dirname, '../icons')
 
 let cached
 
-/**
- * Load the comfy icon folder as a normalized Iconify icon set.
- *
- * Mirrors the pipeline that `@plugin "@iconify/tailwind4" { from-folder(...) }`
- * runs internally so monotone hardcoded colors become `currentColor` and
- * outer-svg attributes like `fill="none"` survive the body extraction.
- */
 export function loadComfyIconSet() {
   if (cached) return cached
   const iconSet = importDirectorySync(COMFY_ICONS_DIR)
@@ -32,18 +19,6 @@ export function loadComfyIconSet() {
     }
     try {
       cleanupSVG(svg)
-      const palette = parseColors(svg)
-      const colors = palette.colors.filter(
-        (color) => typeof color === 'string' || !isEmptyColor(color)
-      )
-      const totalColors = colors.length + (palette.hasUnsetColor ? 1 : 0)
-      if (totalColors < 2) {
-        parseColors(svg, {
-          defaultColor: 'currentColor',
-          callback: (_attr, colorStr, color) =>
-            !color || isEmptyColor(color) ? colorStr : 'currentColor'
-        })
-      }
       runSVGO(svg)
       iconSet.fromSVG(name, svg)
     } catch {

packages/design-system/src/css/iconifyDynamicPlugin.js

@@ -1,23 +0,0 @@
-import { getDynamicCSSRules } from '@iconify/tailwind4/lib/plugins/dynamic.js'
-import plugin from 'tailwindcss/plugin'
-
-import { COMFY_ICON_PREFIX, loadComfyIconSet } from './comfyIconSet.js'
-
-const SCALE = 1.2
-
-const options = {
-  iconSets: { [COMFY_ICON_PREFIX]: loadComfyIconSet() },
-  scale: SCALE
-}
-
-export default plugin(({ matchComponents }) => {
-  matchComponents({
-    icon: (icon) => {
-      try {
-        return getDynamicCSSRules(icon, options)
-      } catch {
-        return {}
-      }
-    }
-  })
-})

packages/design-system/src/css/iconifyDynamicPlugin.ts

@@ -0,0 +1,49 @@
+import { loadIconSet } from '@iconify/tailwind4/lib/helpers/loader.js'
+import { getDynamicCSSRules } from '@iconify/tailwind4/lib/plugins/dynamic.js'
+import { getIconsCSSData } from '@iconify/utils/lib/css/icons'
+import { matchIconName } from '@iconify/utils/lib/icon/name'
+import plugin from 'tailwindcss/plugin'
+
+import { COMFY_ICON_PREFIX, loadComfyIconSet } from './comfyIconSet.js'
+
+const SCALE = 1.2
+
+const options = {
+  iconSets: { [COMFY_ICON_PREFIX]: loadComfyIconSet() },
+  scale: SCALE
+}
+
+function getModeCSSRules(icon: string, mode: 'mask' | 'background') {
+  const nameParts = icon.split(/--|:/)
+  if (nameParts.length !== 2) return {}
+
+  const [prefix, name] = nameParts
+  if (!(prefix.match(matchIconName) && name.match(matchIconName))) return {}
+
+  const iconSet =
+    prefix === COMFY_ICON_PREFIX ? loadComfyIconSet() : loadIconSet(prefix)
+  if (!iconSet) return {}
+
+  const generated = getIconsCSSData(iconSet, [name], {
+    iconSelector: '.icon',
+    mode
+  })
+  if (generated.css.length !== 1) return {}
+
+  const size = { width: `${SCALE}em`, height: `${SCALE}em` }
+  return { ...generated.common?.rules, ...size, ...generated.css[0].rules }
+}
+
+export default plugin(({ matchComponents }) => {
+  matchComponents({
+    icon: (icon) => {
+      try {
+        return getDynamicCSSRules(icon, options)
+      } catch {
+        return {}
+      }
+    },
+    'icon-img': (icon) => getModeCSSRules(icon, 'background'),
+    'icon-mask': (icon) => getModeCSSRules(icon, 'mask')
+  })
+})

packages/design-system/src/css/style.css

@@ -8,12 +8,12 @@
 
 @plugin 'tailwindcss-primeui';
 
-@plugin "./iconifyDynamicPlugin.js";
+@plugin "./iconifyDynamicPlugin.ts";
 
 @plugin "./lucideStrokePlugin.js";
 
 /* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,anthropic,bfl,bria,bytedance,bytedance-mono,claude,comfy-logo,credits,elevenlabs,extensions-blocks,file-output,gemini,gemini-mono,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
+@source inline("icon-[comfy--{ai-model,anthropic,bfl,bria,bytedance,claude,comfy-logo,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
 
 @custom-variant touch (@media (hover: none));
 
@@ -197,7 +197,7 @@
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
   --node-component-header-icon: var(--color-ash-800);
-  --node-component-header-surface: var(--color-smoke-400);
+  --node-component-header-surface: var(--color-smoke-200);
   --node-component-outline: var(--color-black);
   --node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
   --node-component-slot-dot-outline-opacity-mult: 1;
@@ -343,7 +343,7 @@
   --node-component-border-executing: var(--color-blue-500);
   --node-component-border-selected: var(--color-charcoal-200);
   --node-component-header-icon: var(--color-smoke-800);
-  --node-component-header-surface: var(--color-charcoal-800);
+  --node-component-header-surface: var(--color-charcoal-700);
   --node-component-outline: var(--color-white);
   --node-component-ring: rgb(var(--color-smoke-500) / 20%);
   --node-component-slot-dot-outline-opacity: 10%;
@@ -727,14 +727,14 @@ body {
 /* Shared markdown content styling for consistent rendering across components */
 .comfy-markdown-content {
   /* Typography */
-  font-size: 0.875rem; /* text-sm */
+  font-size: var(--comfy-textarea-font-size);
   line-height: 1.6;
   word-wrap: break-word;
 }
 
 /* Headings */
 .comfy-markdown-content h1 {
-  font-size: 22px; /* text-[22px] */
+  font-size: calc(22 / 14 * var(--comfy-textarea-font-size));
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */
@@ -745,7 +745,7 @@ body {
 }
 
 .comfy-markdown-content h2 {
-  font-size: 18px; /* text-[18px] */
+  font-size: calc(18 / 14 * var(--comfy-textarea-font-size));
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */
@@ -756,7 +756,7 @@ body {
 }
 
 .comfy-markdown-content h3 {
-  font-size: 16px; /* text-[16px] */
+  font-size: calc(16 / 14 * var(--comfy-textarea-font-size));
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */

packages/design-system/src/icons/3d-decomp.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.30005 7L7.65005 9.5M12 12L12 22M12 12L16.35 9.5M12 12L7.65005 9.5M20.7001 7L16.35 9.5M16.35 9.5V19.8156M16.35 9.5L7.5 4.2699M7.5 4.2699L11 2.2699C11.304 2.09437 11.6489 2.00195 12 2.00195C12.3511 2.00195 12.696 2.09437 13 2.2699L16.5 4.2699L20 6.2699C20.3037 6.44526 20.556 6.69742 20.7315 7.00106C20.9071 7.30471 20.9996 7.64918 21 7.9999V15.9999C20.9996 16.3506 20.9071 16.6951 20.7315 16.9987C20.556 17.3024 20.3037 17.5545 20 17.7299L16.35 19.8156L13 21.7299C12.696 21.9054 12.3511 21.9979 12 21.9979C11.6489 21.9979 11.304 21.9054 11 21.7299L7.65005 19.8156L4 17.7299C3.69626 17.5545 3.44398 17.3024 3.26846 16.9987C3.09294 16.6951 3.00036 16.3506 3 15.9999V7.9999C3.00036 7.64918 3.09294 7.30471 3.26846 7.00106C3.44398 6.69742 3.69626 6.44526 4 6.2699L7.5 4.2699ZM7.65005 9.5V19.8156M7.65005 9.5L16.5 4.2699" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.30005 7L7.65005 9.5M12 12L12 22M12 12L16.35 9.5M12 12L7.65005 9.5M20.7001 7L16.35 9.5M16.35 9.5V19.8156M16.35 9.5L7.5 4.2699M7.5 4.2699L11 2.2699C11.304 2.09437 11.6489 2.00195 12 2.00195C12.3511 2.00195 12.696 2.09437 13 2.2699L16.5 4.2699L20 6.2699C20.3037 6.44526 20.556 6.69742 20.7315 7.00106C20.9071 7.30471 20.9996 7.64918 21 7.9999V15.9999C20.9996 16.3506 20.9071 16.6951 20.7315 16.9987C20.556 17.3024 20.3037 17.5545 20 17.7299L16.35 19.8156L13 21.7299C12.696 21.9054 12.3511 21.9979 12 21.9979C11.6489 21.9979 11.304 21.9054 11 21.7299L7.65005 19.8156L4 17.7299C3.69626 17.5545 3.44398 17.3024 3.26846 16.9987C3.09294 16.6951 3.00036 16.3506 3 15.9999V7.9999C3.00036 7.64918 3.09294 7.30471 3.26846 7.00106C3.44398 6.69742 3.69626 6.44526 4 6.2699L7.5 4.2699ZM7.65005 9.5V19.8156M7.65005 9.5L16.5 4.2699" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

packages/design-system/src/icons/README.md

@@ -164,6 +164,34 @@ packages/design-system/src/icons/
 
 No imports needed - icons are auto-discovered!
 
+## Render Mode: Mask vs Image
+
+The default render mode is decided by the SVG's own colors:
+
+- **Mask** — SVG with `currentColor`. The shape is displayed as a background
+  mask, so it adapts to the theme via `text-*` classes.
+- **Image** — the SVG uses concrete colors (e.g. `#d97757`). It is embedded
+  as an image, preserving its own colors; `text-*` has no effect. Use this for
+  brand logos that must keep their palette.
+
+```
+workflow.svg   fill="currentColor"  -> mask  (themeable)
+claude.svg     fill="#d97757"       -> image (brand color preserved)
+```
+
+### Forcing a mode at usage time
+
+```vue
+<template>
+  <i class="icon-[comfy--openai]" />
+  <!-- default from SVG colors -->
+  <i class="icon-img-[comfy--openai]" />
+  <!-- force image, own colors -->
+  <i class="icon-mask-[comfy--luma]" />
+  <!-- force themeable mask -->
+</template>
+```
+
 ## Icon Guidelines
 
 ### Naming Conventions

packages/design-system/src/icons/batch-images-node.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 17L12.9427 14.9426C12.6926 14.6927 12.3536 14.5522 12 14.5522C11.6464 14.5522 11.3074 14.6927 11.0573 14.9426L5 21M20 15C20.5523 15 21 14.5523 21 14V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H10C9.44772 3 9 3.44772 9 4M17 18C17.5523 18 18 17.5523 18 17V8C18 7.46957 17.7893 6.96086 17.4142 6.58579C17.0391 6.21071 16.5304 6 16 6H7C6.44772 6 6 6.44772 6 7M4.33333 9H13.6667C14.403 9 15 9.59695 15 10.3333V19.6667C15 20.403 14.403 21 13.6667 21H4.33333C3.59695 21 3 20.403 3 19.6667V10.3333C3 9.59695 3.59695 9 4.33333 9ZM8.33333 13C8.33333 13.7364 7.73638 14.3333 7 14.3333C6.26362 14.3333 5.66667 13.7364 5.66667 13C5.66667 12.2636 6.26362 11.6667 7 11.6667C7.73638 11.6667 8.33333 12.2636 8.33333 13Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 17L12.9427 14.9426C12.6926 14.6927 12.3536 14.5522 12 14.5522C11.6464 14.5522 11.3074 14.6927 11.0573 14.9426L5 21M20 15C20.5523 15 21 14.5523 21 14V5C21 4.46957 20.7893 3.96086 20.4142 3.58579C20.0391 3.21071 19.5304 3 19 3H10C9.44772 3 9 3.44772 9 4M17 18C17.5523 18 18 17.5523 18 17V8C18 7.46957 17.7893 6.96086 17.4142 6.58579C17.0391 6.21071 16.5304 6 16 6H7C6.44772 6 6 6.44772 6 7M4.33333 9H13.6667C14.403 9 15 9.59695 15 10.3333V19.6667C15 20.403 14.403 21 13.6667 21H4.33333C3.59695 21 3 20.403 3 19.6667V10.3333C3 9.59695 3.59695 9 4.33333 9ZM8.33333 13C8.33333 13.7364 7.73638 14.3333 7 14.3333C6.26362 14.3333 5.66667 13.7364 5.66667 13C5.66667 12.2636 6.26362 11.6667 7 11.6667C7.73638 11.6667 8.33333 12.2636 8.33333 13Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

packages/design-system/src/icons/bfl.svg

@@ -1,6 +1,6 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1471_12672)">
-<path d="M365.047 229.802H310.584L256.118 153.072L86.2157 392.168H140.796L256.115 229.807H310.581L195.261 392.168H249.994L365.047 229.802L512 436.698H470.893V436.7H426.019V392.343L365.047 306.532L304.415 392.178V436.698H163.632L163.629 436.703H109.164L109.167 436.698H-0.105347L256.118 76L365.047 229.802Z" fill="white"/>
+<path d="M365.047 229.802H310.584L256.118 153.072L86.2157 392.168H140.796L256.115 229.807H310.581L195.261 392.168H249.994L365.047 229.802L512 436.698H470.893V436.7H426.019V392.343L365.047 306.532L304.415 392.178V436.698H163.632L163.629 436.703H109.164L109.167 436.698H-0.105347L256.118 76L365.047 229.802Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_1471_12672">