feat: apply stable names to automatic RUM views

Adds frontend support for a quota based free tier.
- Adds a indicator component beneath the run button (docked/undocked/app
mode)
- Tracks available usages as workflows are queued. This is enforced by
backend, but updated quota information is not sent after initial load.
- Tracks partner node presence in graph (Workflows with partner nodes
are not allowed under the quota system)

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/c8dd53c3-9eff-4712-a4c2-c3d31bbbae35"/>
| <img width="360" alt="after"
src="https://github.com/user-attachments/assets/c9410799-130d-4332-b2f8-20e993402f2c"
/>|

---------

Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>

.github/workflows/ci-perf-report.yaml

@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 30
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.21
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.17
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}

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

@@ -63,7 +63,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 60
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.21
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.17
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -121,7 +121,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.21
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.17
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}

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

@@ -28,7 +28,7 @@ jobs:
     if: ${{ needs.changes.outputs.app-website-changes == 'true' || needs.changes.outputs.packages-changes == 'true' }}
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      image: mcr.microsoft.com/playwright:v1.58.1-noble
     timeout-minutes: 15
     permissions:
       contents: read

.github/workflows/pr-update-playwright-expectations.yaml

@@ -77,7 +77,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.21
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.17
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-update-website-screenshots.yaml

@@ -14,7 +14,7 @@ jobs:
   update-screenshots:
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.61.1-noble
+      image: mcr.microsoft.com/playwright:v1.58.1-noble
     timeout-minutes: 15
     permissions:
       contents: write
@@ -128,9 +128,6 @@ jobs:
 
       - name: Remove label
         if: always() && github.event_name == 'pull_request'
-        # Label cleanup is best-effort; the restricted pull_request token may
-        # lack permission to remove labels and must not fail the run.
-        continue-on-error: true
         uses: actions/github-script@v8
         env:
           PR_NUMBER: ${{ steps.pr-info.outputs.pr-number }}

.stylelintrc.json

@@ -6,19 +6,15 @@
       "customSyntax": "postcss-html"
     }
   ],
-  "languageOptions": {
-    "syntax": {
-      "types": {
-        "radial-gradient()": "| <any-value>"
-      }
-    }
-  },
   "rules": {
     "import-notation": "string",
     "font-family-no-missing-generic-family-keyword": true,
     "declaration-property-value-no-unknown": [
       true,
       {
+        "typesSyntax": {
+          "radial-gradient()": "| <any-value>"
+        },
         "ignoreProperties": {
           "speak": ["none"],
           "app-region": ["drag", "no-drag"],

browser_tests/fixtures/components/Actionbar.ts

@@ -8,11 +8,13 @@ export class ComfyActionbar {
   public readonly root: Locator
   public readonly queueButton: ComfyQueueButton
   public readonly propertiesButton: Locator
+  public readonly dragHandle: Locator
 
   constructor(public readonly page: Page) {
     this.root = page.locator('.actionbar-container')
     this.queueButton = new ComfyQueueButton(this)
     this.propertiesButton = this.root.getByLabel('Toggle properties panel')
+    this.dragHandle = this.root.locator('.drag-handle')
   }
 
   async isDocked() {

browser_tests/fixtures/components/FreeTierQuota.ts

@@ -0,0 +1,21 @@
+import type { Locator } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class FreeTierQuota {
+  readonly root: Locator
+
+  constructor(comfyPage: ComfyPage) {
+    this.root = comfyPage.page.getByTestId(TestIds.topbar.freeTierQuota)
+  }
+
+  async getMax() {
+    const text = await this.root.textContent()
+    return text?.match(/(\d+) \/ (\d+)/)?.[2]
+  }
+  async getAvailable() {
+    const text = await this.root.textContent()
+    return text?.match(/(\d+) \/ (\d+)/)?.[1]
+  }
+}

browser_tests/fixtures/data/README.md

@@ -17,7 +17,9 @@ import { mockSystemStats } from '../fixtures/data/systemStats'
 
 // Extend the base set with test-specific nodes
 const nodeDefs = createMockNodeDefinitions({
-  MyCustomNode: {/* ... */}
+  MyCustomNode: {
+    /* ... */
+  }
 })
 
 await page.route('**/api/object_info', (route) =>

browser_tests/fixtures/selectors.ts

@@ -103,7 +103,8 @@ export const TestIds = {
     loginButtonPopoverLearnMore: 'login-button-popover-learn-more',
     workflowTabs: 'topbar-workflow-tabs',
     integratedTabBarActions: 'integrated-tab-bar-actions',
-    actionBarButtons: 'action-bar-buttons'
+    actionBarButtons: 'action-bar-buttons',
+    freeTierQuota: 'free-tier-quota'
   },
   nodeLibrary: {
     bookmarksSection: 'node-library-bookmarks-section'

browser_tests/tests/freeTierQuota.spec.ts

@@ -0,0 +1,63 @@
+import { expect, mergeTests } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
+import { FreeTierQuota } from '@e2e/fixtures/components/FreeTierQuota'
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+
+const wstest = mergeTests(test, webSocketFixture)
+
+test.describe('Free Tier Quota', { tag: ['@cloud', '@vue-nodes'] }, () => {
+  test.beforeEach(async ({ page }) => {
+    const features = {
+      free_tier_job_allowance_enabled: true,
+      free_tier_balance: { allowance: 5, remaining: 3, used: 0 }
+    }
+    await page.route('**/api/features', (r) => r.fulfill(jsonRoute(features)))
+  })
+
+  wstest('Free Tier Quota', async ({ comfyPage, comfyMouse, getWebSocket }) => {
+    const execution = new ExecutionHelper(comfyPage, await getWebSocket())
+    const freeTierQuota = new FreeTierQuota(comfyPage)
+
+    await test.step('Populates initial state from config', async () => {
+      await expect.poll(() => freeTierQuota.getAvailable()).toBe('3')
+      expect(await freeTierQuota.getMax()).toBe('5')
+    })
+
+    await test.step('available decrements on run', async () => {
+      await execution.run()
+      await expect.poll(() => freeTierQuota.getAvailable()).toBe('2')
+    })
+
+    await test.step('connects to detached run button', async () => {
+      const handle = comfyPage.actionbar.dragHandle
+      await comfyMouse.dragElementBy(handle, { x: -100, y: 100 })
+      await expect.poll(() => comfyPage.actionbar.isDocked()).toBe(false)
+      expect(await freeTierQuota.getAvailable()).toBe('2')
+      await comfyMouse.dragElementBy(handle, { x: 100, y: -100 })
+      await expect.poll(() => comfyPage.actionbar.isDocked()).toBe(true)
+    })
+
+    await test.step('Detects workflows with Partner nodes', async () => {
+      await comfyPage.searchBoxV2.addNode('Node With Price Badge')
+      const node = await comfyPage.vueNodes.getFixtureByTitle('Price Badge')
+      await expect.poll(() => freeTierQuota.getAvailable()).toBe(undefined)
+      await node.delete()
+      await expect.poll(() => freeTierQuota.getAvailable()).toBe('2')
+    })
+
+    await test.step('Does not decrease past 0', async () => {
+      await execution.run()
+      await expect.poll(() => freeTierQuota.getAvailable()).toBe('1')
+      await execution.run()
+      await expect.poll(() => freeTierQuota.getAvailable()).toBe(undefined)
+      await execution.run()
+      await execution.run()
+      await execution.run()
+      await comfyPage.nextFrame()
+      expect(await freeTierQuota.getAvailable()).toBe(undefined)
+    })
+  })
+})

docs/guidance/storybook.md

@@ -31,7 +31,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {/* props */}
+  args: {
+    /* props */
+  }
 }
 ```
 

knip.config.ts

@@ -37,8 +37,10 @@ const config: KnipConfig = {
       entry: ['src/scripts/**/*.ts']
     }
   },
+  ignoreBinaries: ['python3'],
   ignoreDependencies: [
     // Weird importmap things
+    '@iconify-json/lucide',
     '@iconify/json',
     '@primeuix/forms',
     '@primeuix/styled',

package.json

@@ -97,7 +97,7 @@
     "@vee-validate/zod": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
-    "@vueuse/router": "^14.3.0",
+    "@vueuse/router": "^14.2.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",
@@ -111,7 +111,7 @@
     "extendable-media-recorder": "^9.2.27",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "firebase": "catalog:",
-    "fuse.js": "7.0.0",
+    "fuse.js": "^7.0.0",
     "glob": "catalog:",
     "jsonata": "catalog:",
     "loglevel": "^1.9.2",
@@ -219,5 +219,5 @@
     "node": ">=25 <26",
     "pnpm": ">=11.3"
   },
-  "packageManager": "pnpm@11.13.1"
+  "packageManager": "pnpm@11.3.0"
 }

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

@@ -78,9 +78,9 @@
   --color-interface-panel-job-progress-border: var(--base-foreground);
 
   --color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
-  --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b / 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b / 0.1);
-  --color-modal-tag: rgb(from var(--color-smoke-400) r g b / 0.4);
+  --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
+  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
+  --color-modal-tag: rgb(from var(--color-smoke-400) r g b/ 0.4);
   --color-alpha-charcoal-600-30: color-mix(
     in srgb,
     var(--color-charcoal-600) 30%,
@@ -107,7 +107,7 @@
   --color-highlight: var(--p-primary-color);
 
   /* Special Colors (temporary) */
-  --color-dark-elevation-1-5: rgba(from white r g b / 0.015);
+  --color-dark-elevation-1.5: rgba(from white r g b/ 0.015);
   --color-dark-elevation-2: rgba(from white r g b / 0.03);
 }
 
@@ -1873,9 +1873,9 @@ audio.comfy-audio.empty-audio-widget {
     /* Shadow Cover TOP */
     linear-gradient(--value(--color-*) 30%, transparent) center top,
     /* Shadow Cover BOTTOM */
-    linear-gradient(transparent, --value(--color-*) 70%) center bottom,
+      linear-gradient(transparent, --value(--color-*) 70%) center bottom,
     /* Shadow TOP */
-    radial-gradient(
+      radial-gradient(
         farthest-side at 50% 0,
         color-mix(in oklab, --value(--color-*), #777777 35%),
         60%,
@@ -1883,7 +1883,7 @@ audio.comfy-audio.empty-audio-widget {
       )
       center top,
     /* Shadow BOTTOM */
-    radial-gradient(
+      radial-gradient(
         farthest-side at 50% 100%,
         color-mix(in oklab, --value(--color-*), #777777 35%),
         60%,

pnpm-workspace.yaml

@@ -24,26 +24,26 @@ catalog:
   '@iconify/tailwind4': ^1.2.3
   '@iconify/tools': ^5.0.3
   '@iconify/utils': ^3.1.0
-  '@intlify/eslint-plugin-vue-i18n': ^4.5.1
+  '@intlify/eslint-plugin-vue-i18n': ^4.5.0
   '@lobehub/i18n-cli': ^1.26.1
   '@lucide/vue': ^1.17.0
-  '@pinia/testing': ^2.0.1
-  '@playwright/test': ^1.61.1
+  '@pinia/testing': ^1.0.3
+  '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
   '@primeuix/utils': ^0.3.2
-  '@primevue/core': 4.2.5
-  '@primevue/forms': 4.2.5
+  '@primevue/core': ^4.2.5
+  '@primevue/forms': ^4.2.5
   '@primevue/icons': 4.2.5
-  '@primevue/themes': 4.2.5
+  '@primevue/themes': ^4.2.5
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^2.1.0
-  '@storybook/addon-docs': ^10.5.0
+  '@storybook/addon-docs': ^10.2.10
   '@storybook/addon-mcp': 0.1.6
-  '@storybook/vue3': ^10.5.0
-  '@storybook/vue3-vite': ^10.5.0
-  '@tailwindcss/vite': ^4.3.2
+  '@storybook/vue3': ^10.2.10
+  '@storybook/vue3-vite': ^10.2.10
+  '@tailwindcss/vite': ^4.3.0
   '@tanstack/vue-virtual': ^3.13.12
   '@testing-library/jest-dom': ^6.9.1
   '@testing-library/user-event': ^14.6.1
@@ -59,16 +59,16 @@ catalog:
   '@total-typescript/shoehorn': ^0.1.2
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
-  '@types/node': ^25.9.5
+  '@types/node': ^24.1.0
   '@types/semver': ^7.7.0
   '@types/three': ^0.184.1
   '@vee-validate/zod': ^4.15.1
   '@vercel/analytics': ^2.0.1
-  '@vitejs/plugin-vue': ^6.0.8
-  '@vitest/coverage-v8': ^4.1.10
-  '@vitest/ui': ^4.1.10
-  '@vueuse/core': ^14.3.0
-  '@vueuse/integrations': ^14.3.0
+  '@vitejs/plugin-vue': ^6.0.0
+  '@vitest/coverage-v8': ^4.0.16
+  '@vitest/ui': ^4.0.16
+  '@vueuse/core': ^14.2.0
+  '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
   astro: ^6.4.2
@@ -76,75 +76,75 @@ catalog:
   class-variance-authority: ^0.7.1
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4
-  dompurify: 3.4.7
+  dompurify: ^3.4.5
   dotenv: ^16.4.5
-  eslint: ^10.7.0
+  eslint: ^10.4.0
   eslint-config-prettier: ^10.1.8
-  eslint-import-resolver-typescript: ^4.4.5
-  eslint-plugin-better-tailwindcss: ^4.6.1
-  eslint-plugin-import-x: ^4.17.1
-  eslint-plugin-oxlint: 1.73.0
-  eslint-plugin-playwright: ^2.10.5
-  eslint-plugin-storybook: ^10.5.0
-  eslint-plugin-testing-library: ^7.16.2
+  eslint-import-resolver-typescript: ^4.4.4
+  eslint-plugin-better-tailwindcss: ^4.3.1
+  eslint-plugin-import-x: ^4.16.2
+  eslint-plugin-oxlint: 1.69.0
+  eslint-plugin-playwright: ^2.10.1
+  eslint-plugin-storybook: ^10.2.10
+  eslint-plugin-testing-library: ^7.16.1
   eslint-plugin-unused-imports: ^4.4.1
-  eslint-plugin-vue: ^10.9.2
+  eslint-plugin-vue: ^10.9.1
   fallow: ^2.102.0
   fast-check: ^4.5.3
   firebase: ^11.6.0
   glob: ^13.0.6
-  globals: ^17.7.0
+  globals: ^16.5.0
   gsap: ^3.14.2
-  happy-dom: 20.9.0
+  happy-dom: ^20.8.9
   husky: ^9.1.7
-  jiti: 2.7.0
-  jsdom: ^29.1.1
+  jiti: 2.6.1
+  jsdom: ^27.4.0
   jsonata: ^2.1.0
-  knip: ^6.27.0
+  knip: ^6.15.0
   lenis: ^1.3.21
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   minisearch: ^7.2.0
   mixpanel-browser: ^2.71.0
   monocart-coverage-reports: ^2.12.9
-  oxfmt: ^0.59.0
-  oxlint: ^1.74.0
-  oxlint-tsgolint: ^0.24.0
+  oxfmt: ^0.54.0
+  oxlint: ^1.69.0
+  oxlint-tsgolint: ^0.23.0
   picocolors: ^1.1.1
-  pinia: ^4.0.2
+  pinia: ^3.0.4
   postcss-html: ^1.8.0
   posthog-js: ^1.358.1
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
-  primevue: 4.2.5
+  primevue: ^4.2.5
   reka-ui: 2.5.0
   rollup-plugin-visualizer: ^6.0.4
-  storybook: ^10.5.0
-  stylelint: ^17.14.0
-  tailwindcss: ^4.3.2
+  storybook: ^10.2.10
+  stylelint: ^16.26.1
+  tailwindcss: ^4.3.0
   tailwindcss-primeui: ^0.6.1
   three: ^0.184.0
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
   typegpu: ^0.8.2
-  typescript: ^6.0.3
-  typescript-eslint: ^8.64.0
+  typescript: ^5.9.3
+  typescript-eslint: ^8.60.0
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
   uuid: ^11.1.1
   vee-validate: ^4.15.1
-  vite: ^8.1.4
+  vite: ^8.0.13
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
-  vite-plugin-vue-devtools: ^8.1.5
-  vitest: ^4.1.10
-  vue: ^3.5.39
-  vue-component-type-helpers: ^3.3.7
-  vue-eslint-parser: ^10.4.1
-  vue-i18n: ^11.4.6
-  vue-router: ^5.2.0
-  vue-tsc: ^3.3.7
+  vite-plugin-vue-devtools: ^8.0.0
+  vitest: ^4.1.0
+  vue: ^3.5.34
+  vue-component-type-helpers: ^3.2.1
+  vue-eslint-parser: ^10.4.0
+  vue-i18n: ^9.14.5
+  vue-router: ^4.4.3
+  vue-tsc: ^3.2.5
   vuefire: ^3.2.1
   wwobjloader2: ^6.2.1
   yjs: ^13.6.27

src/base/common/async.ts

@@ -32,11 +32,11 @@ let _runWhenIdle: (
  * Falls back to setTimeout-based scheduling in browsers without native support.
  */
 export let runWhenGlobalIdle: (
-  callback: (idle: IdleDeadline) => void,
-  timeout?: number
-) => IDisposable
+    callback: (idle: IdleDeadline) => void,
+    timeout?: number
+  ) => IDisposable
 
-// Self-invoking function to set up the idle callback implementation
+  // Self-invoking function to set up the idle callback implementation
 ;(function () {
   const safeGlobal: GlobalWindow = globalThis as GlobalWindow
 

src/components/TopMenuSection.test.ts

@@ -629,7 +629,7 @@ describe('TopMenuSection', () => {
       await nextTick()
 
       expect(querySpy).toHaveBeenCalledTimes(1)
-      expect(actionbarContainer!.classList).toContain('px-2')
+      expect(actionbarContainer!.classList).not.toContain('w-0')
     } finally {
       unmount()
       vi.unstubAllGlobals()

src/components/TopMenuSection.vue

@@ -11,7 +11,7 @@
       </div>
 
       <div class="mx-1 flex flex-col items-end gap-1">
-        <div class="flex items-center gap-2">
+        <div class="flex items-start gap-2">
           <div
             v-if="managerState.shouldShowManagerButtons.value || isCloud"
             class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
@@ -34,61 +34,75 @@
             </Button>
           </div>
 
-          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
-            <ActionBarButtons />
-            <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+          <div
+            class="pointer-events-auto z-1 flex flex-col rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 py-1.75 shadow-interface"
+          >
             <div
-              ref="legacyCommandsContainerRef"
-              data-testid="legacy-topbar-container"
-              class="[&:not(:has(*>*:not(:empty)))]:hidden"
-            ></div>
-
-            <ComfyActionbar
-              :top-menu-container="actionbarContainerRef"
-              :queue-overlay-expanded="isQueueOverlayExpanded"
-              @update:progress-target="updateProgressTarget"
-            />
-            <CurrentUserButton
-              v-if="isLoggedIn && !isIntegratedTabBar"
-              class="shrink-0"
-            />
-            <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
-            <Button
-              v-if="isCloud && flags.workflowSharingEnabled"
-              v-tooltip.bottom="shareTooltipConfig"
-              variant="secondary"
-              :aria-label="t('actionbar.shareTooltip')"
-              @click="() => openShareDialog().catch(toastErrorHandler)"
-              @pointerenter="prefetchShareDialog"
+              ref="actionbarContainerRef"
+              :class="
+                cn(
+                  'actionbar-container relative flex items-center gap-2',
+                  isActionbarContainerEmpty &&
+                    '-ml-2 w-0 min-w-0 border-transparent shadow-none has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
+                )
+              "
             >
-              <i class="icon-[comfy--send] size-4" />
-              <span class="not-md:hidden">
-                {{ t('actionbar.share') }}
-              </span>
-            </Button>
-            <div v-if="!isRightSidePanelOpen" class="relative">
-              <Button
-                v-tooltip.bottom="rightSidePanelTooltipConfig"
-                :class="
-                  cn(
-                    showErrorIndicatorOnPanelButton &&
-                      'outline-1 outline-destructive-background'
-                  )
-                "
-                variant="secondary"
-                size="icon"
-                :aria-label="t('rightSidePanel.togglePanel')"
-                @click="openRightSidePanel"
-              >
-                <i class="icon-[lucide--panel-right] size-4" />
-              </Button>
-              <StatusBadge
-                v-if="showErrorIndicatorOnPanelButton"
-                variant="dot"
-                severity="danger"
-                class="absolute -top-1 -right-1"
+              <ActionBarButtons />
+              <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+              <div
+                ref="legacyCommandsContainerRef"
+                data-testid="legacy-topbar-container"
+                class="[&:not(:has(*>*:not(:empty)))]:hidden"
+              ></div>
+
+              <ComfyActionbar
+                :top-menu-container="actionbarContainerRef"
+                :queue-overlay-expanded="isQueueOverlayExpanded"
+                @update:progress-target="updateProgressTarget"
               />
+              <CurrentUserButton
+                v-if="isLoggedIn && !isIntegratedTabBar"
+                class="shrink-0"
+              />
+              <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
+              <Button
+                v-if="isCloud && flags.workflowSharingEnabled"
+                v-tooltip.bottom="shareTooltipConfig"
+                variant="secondary"
+                :aria-label="t('actionbar.shareTooltip')"
+                @click="() => openShareDialog().catch(toastErrorHandler)"
+                @pointerenter="prefetchShareDialog"
+              >
+                <i class="icon-[comfy--send] size-4" />
+                <span class="not-md:hidden">
+                  {{ t('actionbar.share') }}
+                </span>
+              </Button>
+              <div v-if="!isRightSidePanelOpen" class="relative">
+                <Button
+                  v-tooltip.bottom="rightSidePanelTooltipConfig"
+                  :class="
+                    cn(
+                      showErrorIndicatorOnPanelButton &&
+                        'outline-1 outline-destructive-background'
+                    )
+                  "
+                  variant="secondary"
+                  size="icon"
+                  :aria-label="t('rightSidePanel.togglePanel')"
+                  @click="openRightSidePanel"
+                >
+                  <i class="icon-[lucide--panel-right] size-4" />
+                </Button>
+                <StatusBadge
+                  v-if="showErrorIndicatorOnPanelButton"
+                  variant="dot"
+                  severity="danger"
+                  class="absolute -top-1 -right-1"
+                />
+              </div>
             </div>
+            <FreeTierQuota v-if="!isActionbarFloating" />
           </div>
         </div>
         <ErrorOverlay />
@@ -147,6 +161,7 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import FreeTierQuota from '@/platform/cloud/subscription/components/FreeTierQuota.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'
@@ -209,21 +224,6 @@ const hasDockedButtons = computed(() => {
 const isActionbarContainerEmpty = computed(
   () => isActionbarFloating.value && !hasDockedButtons.value
 )
-const actionbarContainerClass = computed(() => {
-  const base =
-    'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface'
-
-  if (isActionbarContainerEmpty.value) {
-    return cn(
-      base,
-      '-ml-2 w-0 min-w-0 border-transparent shadow-none',
-      'has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto',
-      'has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
-    )
-  }
-
-  return cn(base, 'px-2', 'border-interface-stroke')
-})
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )

src/components/actionbar/ComfyActionbar.vue

@@ -75,6 +75,7 @@
         </Button>
         <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
       </div>
+      <FreeTierQuota v-if="!isDocked" />
     </Panel>
 
     <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
@@ -109,6 +110,7 @@ import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import FreeTierQuota from '@/platform/cloud/subscription/components/FreeTierQuota.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts

@@ -4,11 +4,11 @@ import { nextTick, ref } from 'vue'
 
 import CloudRunButtonWrapper from './CloudRunButtonWrapper.vue'
 
-const mockIsActiveSubscription = ref(true)
+const mockCanRunWorkflows = ref(true)
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
-    isActiveSubscription: mockIsActiveSubscription
+    canRunWorkflows: mockCanRunWorkflows
   })
 }))
 
@@ -32,7 +32,7 @@ function renderWrapper() {
 
 describe('CloudRunButtonWrapper', () => {
   beforeEach(() => {
-    mockIsActiveSubscription.value = true
+    mockCanRunWorkflows.value = true
   })
 
   it('renders the runnable queue button when the subscription is active', () => {
@@ -45,7 +45,7 @@ describe('CloudRunButtonWrapper', () => {
   })
 
   it('locks the run button when the subscription is inactive', () => {
-    mockIsActiveSubscription.value = false
+    mockCanRunWorkflows.value = false
     renderWrapper()
 
     expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
@@ -53,12 +53,12 @@ describe('CloudRunButtonWrapper', () => {
   })
 
   it('unlocks the run button once the subscription becomes active again', async () => {
-    mockIsActiveSubscription.value = false
+    mockCanRunWorkflows.value = false
     renderWrapper()
 
     expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
 
-    mockIsActiveSubscription.value = true
+    mockCanRunWorkflows.value = true
     await nextTick()
 
     expect(screen.getByTestId('queue-button')).toBeInTheDocument()

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="currentButton"
-    :key="isActiveSubscription ? 'queue' : 'subscribe'"
+    :key="canRunWorkflows ? 'queue' : 'subscribe'"
   />
 </template>
 <script setup lang="ts">
@@ -11,9 +11,9 @@ import ComfyQueueButton from '@/components/actionbar/ComfyRunButton/ComfyQueueBu
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
 
-const { isActiveSubscription } = useBillingContext()
+const { canRunWorkflows } = useBillingContext()
 
 const currentButton = computed(() =>
-  isActiveSubscription.value ? ComfyQueueButton : SubscribeToRunButton
+  canRunWorkflows.value ? ComfyQueueButton : SubscribeToRunButton
 )
 </script>

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -429,7 +429,7 @@ const commandsData = computed<ICommandData[]>(() => {
     id: command.id,
     label: t(
       `commands.${normalizeI18nKey(command.id)}.label`,
-      command.label ?? command.id
+      command.label ?? ''
     ),
     keybindings: keybindingStore.getKeybindingsByCommandId(command.id),
     source: command.source,

src/components/ui/chart/useChart.ts

@@ -12,7 +12,7 @@ import {
   PointElement,
   Tooltip
 } from 'chart.js'
-import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import type { Ref } from 'vue'
 
@@ -129,7 +129,7 @@ export function useChart(
   data: Ref<ChartData>,
   options?: Ref<ChartOptions | undefined>
 ) {
-  const chartInstance = shallowRef<Chart | null>(null)
+  const chartInstance = ref<Chart | null>(null)
 
   function createChart() {
     if (!canvasRef.value) return

src/composables/billing/types.ts

@@ -120,4 +120,5 @@ export interface BillingContext extends BillingState, BillingActions {
    */
   isTeamPlan: ComputedRef<boolean>
   getMaxSeats: (tierKey: TierKey) => number
+  canRunWorkflows: ComputedRef<boolean>
 }

src/composables/billing/useBillingContext.ts

@@ -6,6 +6,7 @@ import {
   getTierFeatures
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
 import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type {
   PreviewSubscribeOptions,
@@ -129,6 +130,16 @@ function useBillingContextInternal(): BillingContext {
 
   const isFreeTier = computed(() => subscription.value?.tier === 'FREE')
 
+  const freeTierQuota = useFreeTierQuota()
+
+  const canRunWorkflows = computed(
+    () =>
+      isActiveSubscription.value &&
+      (!isFreeTier.value ||
+        !freeTierQuota.quotaEnabled.value ||
+        freeTierQuota.freeTierExecutionPermitted.value)
+  )
+
   const isLegacyTeamPlan = computed(
     () =>
       type.value === 'workspace' &&
@@ -312,6 +323,7 @@ function useBillingContextInternal(): BillingContext {
     isLoading,
     error,
     isActiveSubscription,
+    canRunWorkflows,
     isFreeTier,
     isLegacyTeamPlan,
     isTeamPlan,

src/composables/maskeditor/useGPUResources.ts

@@ -207,8 +207,7 @@ export function useGPUResources() {
   async function initTypeGPU(): Promise<void> {
     if (store.tgpuRoot) {
       /* c8 ignore start */
-      // typegpu vendors its own WebGPU types; align with @webgpu/types
-      device = store.tgpuRoot.device as GPUDevice
+      device = store.tgpuRoot.device
       return
       /* c8 ignore stop */
     }
@@ -216,7 +215,7 @@ export function useGPUResources() {
       /* c8 ignore start — requires functional WebGPU hardware */
       const root = await tgpu.init()
       store.tgpuRoot = root
-      device = root.device as GPUDevice
+      device = root.device
       console.warn('✅ TypeGPU initialized! Root:', root)
       console.warn('Device info:', root.device.limits)
       /* c8 ignore stop */

src/composables/node/usePriceBadge.ts

@@ -1,12 +1,19 @@
+import { createSharedComposable } from '@vueuse/core'
+import { computed, toValue } from 'vue'
+
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
 
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodePricing } from '@/composables/node/useNodePricing'
 import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput'
+import { trackNodePrice } from '@/renderer/extensions/vueNodes/composables/usePartitionedBadges'
+import { app } from '@/scripts/app'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
+import { mapAllNodes } from '@/utils/graphTraversalUtil'
 
 type LinkedWidgetInput = INodeInputSlot & {
   _subgraphSlot?: SubgraphInput
@@ -150,3 +157,20 @@ export const usePriceBadge = () => {
     updateSubgraphCredits
   }
 }
+export const useCreditsBadgesInGraph = createSharedComposable(() => {
+  const { isCreditsBadge } = usePriceBadge()
+  const vueNodeLifecycle = useVueNodeLifecycle()
+  return computed(() => {
+    void vueNodeLifecycle.nodeManager.value?.vueNodeData.size
+    if (!app.graph) return []
+    return mapAllNodes(app.graph, (node) => {
+      if (node.isSubgraphNode()) return
+
+      const priceBadge = node.badges.find(isCreditsBadge)
+      if (!priceBadge) return
+
+      trackNodePrice(node)
+      return [node.title, toValue(priceBadge).text, node.id] as const
+    })
+  })
+})

src/composables/useCopyToClipboard.test.ts

@@ -1,8 +1,17 @@
+import { computed, ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-const mockWriteText = vi.fn()
+const mockCopy = vi.fn()
 const mockToastAdd = vi.fn()
 
+vi.mock('@vueuse/core', () => ({
+  useClipboard: vi.fn(() => ({
+    copy: mockCopy,
+    copied: ref(false),
+    isSupported: computed(() => true)
+  }))
+}))
+
 vi.mock('primevue/usetoast', () => ({
   useToast: vi.fn(() => ({
     add: mockToastAdd
@@ -13,31 +22,34 @@ vi.mock('@/i18n', () => ({
   t: (key: string) => key
 }))
 
+import { useClipboard } from '@vueuse/core'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 
 describe('useCopyToClipboard', () => {
   beforeEach(() => {
     vi.resetAllMocks()
-    Object.defineProperty(navigator, 'clipboard', {
-      configurable: true,
-      value: { writeText: mockWriteText }
+    vi.mocked(useClipboard).mockReturnValue({
+      copy: mockCopy,
+      copied: ref(false),
+      isSupported: computed(() => true),
+      text: ref('')
     })
   })
 
   it('shows success toast when modern clipboard succeeds', async () => {
-    mockWriteText.mockResolvedValue(undefined)
+    mockCopy.mockResolvedValue(undefined)
 
     const { copyToClipboard } = useCopyToClipboard()
     await copyToClipboard('hello')
 
-    expect(mockWriteText).toHaveBeenCalledWith('hello')
+    expect(mockCopy).toHaveBeenCalledWith('hello')
     expect(mockToastAdd).toHaveBeenCalledWith(
       expect.objectContaining({ severity: 'success' })
     )
   })
 
   it('falls back to legacy when modern clipboard fails', async () => {
-    mockWriteText.mockRejectedValue(new Error('Not allowed'))
+    mockCopy.mockRejectedValue(new Error('Not allowed'))
     document.execCommand = vi.fn(() => true)
 
     const { copyToClipboard } = useCopyToClipboard()
@@ -50,7 +62,7 @@ describe('useCopyToClipboard', () => {
   })
 
   it('shows error toast when both modern and legacy fail', async () => {
-    mockWriteText.mockRejectedValue(new Error('Not allowed'))
+    mockCopy.mockRejectedValue(new Error('Not allowed'))
     document.execCommand = vi.fn(() => false)
 
     const { copyToClipboard } = useCopyToClipboard()
@@ -61,17 +73,19 @@ describe('useCopyToClipboard', () => {
     )
   })
 
-  it('falls through to legacy when clipboard API is unavailable', async () => {
-    Object.defineProperty(navigator, 'clipboard', {
-      configurable: true,
-      value: undefined
+  it('falls through to legacy when isSupported is false', async () => {
+    vi.mocked(useClipboard).mockReturnValue({
+      copy: mockCopy,
+      copied: ref(false),
+      isSupported: computed(() => false),
+      text: ref('')
     })
     document.execCommand = vi.fn(() => true)
 
     const { copyToClipboard } = useCopyToClipboard()
     await copyToClipboard('hello')
 
-    expect(mockWriteText).not.toHaveBeenCalled()
+    expect(mockCopy).not.toHaveBeenCalled()
     expect(document.execCommand).toHaveBeenCalledWith('copy')
     expect(mockToastAdd).toHaveBeenCalledWith(
       expect.objectContaining({ severity: 'success' })

src/composables/useCopyToClipboard.ts

@@ -1,3 +1,4 @@
+import { useClipboard } from '@vueuse/core'
 import { useToast } from 'primevue/usetoast'
 
 import { t } from '@/i18n'
@@ -19,14 +20,15 @@ function legacyCopy(text: string): boolean {
 }
 
 export function useCopyToClipboard() {
+  const { copy, isSupported } = useClipboard()
   const toast = useToast()
 
   async function copyToClipboard(text: string) {
     let success = false
 
     try {
-      if (navigator.clipboard) {
-        await navigator.clipboard.writeText(text)
+      if (isSupported.value) {
+        await copy(text)
         success = true
       }
     } catch {

src/composables/useCoreCommands.test.ts

@@ -260,7 +260,7 @@ describe('useCoreCommands', () => {
   function createMockSettingStore(
     getReturnValue: boolean
   ): ReturnType<typeof useSettingStore> {
-    return fromPartial<ReturnType<typeof useSettingStore>>({
+    return {
       get: vi.fn().mockReturnValue(getReturnValue),
       addSetting: vi.fn(),
       load: vi.fn(),
@@ -287,7 +287,7 @@ describe('useCoreCommands', () => {
       $onAction: vi.fn(),
       $dispose: vi.fn(),
       _customProperties: new Set()
-    })
+    } satisfies ReturnType<typeof useSettingStore>
   }
 
   beforeEach(() => {

src/composables/useFeatureFlags.ts

@@ -33,6 +33,7 @@ export enum ServerFeatureFlag {
   SHOW_SIGNIN_BUTTON = 'show_signin_button',
   UNIFIED_CLOUD_AUTH = 'unified_cloud_auth',
   BILLING_CONTROL_ENABLED = 'billing_control_enabled',
+  FREE_TIER_JOB_ALLOWANCE_ENABLED = 'free_tier_job_allowance_enabled',
   SIGNUP_TURNSTILE = 'signup_turnstile'
 }
 
@@ -202,6 +203,16 @@ export function useFeatureFlags() {
         cachedBillingControlEnabled
       )
     },
+    get freeTierJobAllowanceEnabled() {
+      const config = remoteConfig.value as typeof remoteConfig.value & {
+        free_tier_job_allowance_enabled?: boolean
+      }
+      return resolveFlag(
+        ServerFeatureFlag.FREE_TIER_JOB_ALLOWANCE_ENABLED,
+        config.free_tier_job_allowance_enabled,
+        false
+      )
+    },
     get signupTurnstileMode() {
       return resolveFlag(
         ServerFeatureFlag.SIGNUP_TURNSTILE,

src/i18n.test.ts

@@ -7,7 +7,6 @@ let loadLocale: typeof I18nModule.loadLocale
 let mergeCustomNodesI18n: typeof I18nModule.mergeCustomNodesI18n
 let resolveSupportedLocale: typeof I18nModule.resolveSupportedLocale
 let setActiveLocale: typeof I18nModule.setActiveLocale
-let te: typeof I18nModule.te
 
 async function importI18nModule() {
   const i18nModule = await import('./i18n')
@@ -16,13 +15,10 @@ async function importI18nModule() {
   mergeCustomNodesI18n = i18nModule.mergeCustomNodesI18n
   resolveSupportedLocale = i18nModule.resolveSupportedLocale
   setActiveLocale = i18nModule.setActiveLocale
-  te = i18nModule.te
 }
 
 // Mock the JSON imports before importing i18n module
-vi.mock('./locales/en/main.json', () => ({
-  default: { welcome: 'Welcome', enOnly: 'English only' }
-}))
+vi.mock('./locales/en/main.json', () => ({ default: { welcome: 'Welcome' } }))
 vi.mock('./locales/en/nodeDefs.json', () => ({
   default: { testNode: 'Test Node' }
 }))
@@ -232,16 +228,6 @@ describe('i18n', () => {
     })
   })
 
-  describe('te', () => {
-    it('checks only the active locale, never the fallback locale', async () => {
-      expect(te('enOnly')).toBe(true)
-
-      await setActiveLocale('zh')
-      expect(te('welcome')).toBe(true)
-      expect(te('enOnly')).toBe(false)
-    })
-  })
-
   describe('resolveSupportedLocale', () => {
     it('returns the canonical tag when the input is shipped', () => {
       expect(resolveSupportedLocale('en')).toBe('en')

src/i18n.ts

@@ -155,10 +155,7 @@ export const i18n = createI18n({
 
 /** Convenience shorthand: i18n.global */
 export const t: (typeof i18n.global)['t'] = i18n.global.t
-// vue-i18n 11's te() consults the fallback locale; default to the active
-// locale to preserve the v9 behavior our fallback paths rely on.
-export const te: (typeof i18n.global)['te'] = (key, locale) =>
-  i18n.global.te(key, locale ?? i18n.global.locale.value)
+export const te: (typeof i18n.global)['te'] = i18n.global.te
 export const d: (typeof i18n.global)['d'] = i18n.global.d
 const tm = i18n.global.tm
 

src/locales/en/main.json

@@ -3587,6 +3587,9 @@
     "dockToTop": "Dock to top",
     "feedback": "Feedback",
     "feedbackTooltip": "Feedback",
+    "freeTierRuns": "{available} / {MAX_AVAILABLE} runs left",
+    "freeTierRunsExhausted": "No runs left",
+    "freeTierPartner": "Partner nodes need a paid plan",
     "share": "Share",
     "shareTooltip": "Share workflow"
   },

src/platform/cloud/onboarding/survey/surveySchema.ts

@@ -19,9 +19,7 @@ export const hasNonEmptyValue = (
   return true
 }
 
-export const isOtherValue = (
-  current: string | string[] | undefined
-): boolean =>
+export const isOtherValue = (current: string | string[] | undefined): boolean =>
   Array.isArray(current) ? current.includes('other') : current === 'other'
 
 const conditionMatches = (

src/platform/cloud/subscription/components/FreeTierQuota.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { cn } from '@comfyorg/tailwind-utils'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
+
+const DOT_COLORS = [
+  'bg-destructive-background',
+  'bg-warning-background',
+  'bg-success-background'
+]
+
+const { showSubscriptionDialog } = useBillingContext()
+const { t } = useI18n()
+const { available, hasInvalidNodes, maxAvailable, quotaEnabled } =
+  useFreeTierQuota()
+
+const dotColor = computed(() => {
+  const ratio = maxAvailable.value ? available.value / maxAvailable.value : 0
+  return DOT_COLORS[
+    Math.min(Math.floor(ratio * DOT_COLORS.length), DOT_COLORS.length - 1)
+  ]
+})
+const label = computed(() =>
+  available.value === 0
+    ? t('actionbar.freeTierRunsExhausted')
+    : t('actionbar.freeTierRuns', {
+        available: available.value,
+        MAX_AVAILABLE: maxAvailable.value
+      })
+)
+</script>
+<template>
+  <div
+    v-if="quotaEnabled"
+    class="mt-2 w-full cursor-pointer border-t border-border-subtle bg-comfy-menu-bg px-4 pt-2 select-none"
+    data-testid="free-tier-quota"
+    @click="showSubscriptionDialog({ reason: 'free_tier_quota' })"
+  >
+    <div
+      v-if="hasInvalidNodes"
+      class="flex w-full items-center justify-center gap-2"
+    >
+      <i class="icon-[comfy--credits] bg-amber-400" />
+      {{ t('actionbar.freeTierPartner') }}
+    </div>
+    <div v-else class="flex w-full items-center justify-between">
+      <div class="flex gap-2" :aria-label="label" role="img">
+        <div
+          v-for="index in maxAvailable"
+          :key="index"
+          :class="
+            cn(
+              'size-1.5 rounded-full',
+              index > available ? 'bg-secondary-background-selected' : dotColor
+            )
+          "
+        />
+      </div>
+      <div v-text="label" />
+    </div>
+  </div>
+</template>

src/platform/cloud/subscription/composables/useFreeTierQuota.ts

@@ -0,0 +1,45 @@
+import { createSharedComposable } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+import { useCreditsBadgesInGraph } from '@/composables/node/usePriceBadge'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+
+export const useFreeTierQuota = createSharedComposable(function () {
+  const { flags } = useFeatureFlags()
+  const creditsBadges = useCreditsBadgesInGraph()
+
+  const available = ref(0)
+  const maxAvailable = ref(0)
+  watch(
+    () => remoteConfig.value.free_tier_balance?.remaining,
+    (val) => (available.value = val ?? 0),
+    { immediate: true }
+  )
+  watch(
+    () => remoteConfig.value.free_tier_balance?.allowance,
+    (val) => (maxAvailable.value = val ?? 0),
+    { immediate: true }
+  )
+
+  const quotaEnabled = computed(
+    () => flags.freeTierJobAllowanceEnabled && maxAvailable.value > 0
+  )
+  const hasInvalidNodes = computed(() => creditsBadges.value.length > 0)
+  const freeTierExecutionPermitted = computed(
+    () => !hasInvalidNodes.value && quotaEnabled.value && available.value > 0
+  )
+
+  function trackRun() {
+    if (available.value > 0) available.value--
+  }
+
+  return {
+    available,
+    freeTierExecutionPermitted,
+    hasInvalidNodes,
+    maxAvailable,
+    quotaEnabled,
+    trackRun
+  }
+})

src/platform/remoteConfig/types.ts

@@ -110,6 +110,11 @@ export type RemoteConfig = {
   user_secrets_enabled?: boolean
   node_library_essentials_enabled?: boolean
   free_tier_credits?: number
+  free_tier_balance?: {
+    allowance: number
+    used: number
+    remaining: number
+  }
   new_free_tier_subscriptions?: boolean
   workflow_sharing_enabled?: boolean
   comfyhub_upload_enabled?: boolean

src/platform/telemetry/initTelemetry.ts

@@ -28,7 +28,8 @@ export async function initTelemetry(): Promise<void> {
       { PostHogTelemetryProvider },
       { ClickHouseTelemetryProvider },
       { SyftTelemetryProvider },
-      { CustomerIoTelemetryProvider }
+      { CustomerIoTelemetryProvider },
+      { DatadogRumTelemetryProvider }
     ] = await Promise.all([
       import('./TelemetryRegistry'),
       import('./providers/cloud/MixpanelTelemetryProvider'),
@@ -37,7 +38,8 @@ export async function initTelemetry(): Promise<void> {
       import('./providers/cloud/PostHogTelemetryProvider'),
       import('./providers/cloud/ClickHouseTelemetryProvider'),
       import('./providers/cloud/SyftTelemetryProvider'),
-      import('./providers/cloud/CustomerIoTelemetryProvider')
+      import('./providers/cloud/CustomerIoTelemetryProvider'),
+      import('./providers/cloud/DatadogRumTelemetryProvider')
     ])
 
     const registry = new TelemetryRegistry()
@@ -48,6 +50,7 @@ export async function initTelemetry(): Promise<void> {
     registry.registerProvider(new ClickHouseTelemetryProvider())
     registry.registerProvider(new SyftTelemetryProvider())
     registry.registerProvider(new CustomerIoTelemetryProvider())
+    registry.registerProvider(new DatadogRumTelemetryProvider())
 
     setTelemetryRegistry(registry)
   })()

src/platform/telemetry/providers/cloud/DatadogRumTelemetryProvider.test.ts

@@ -0,0 +1,57 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { DatadogRumTelemetryProvider } from './DatadogRumTelemetryProvider'
+
+const setViewName = vi.fn()
+
+function installDatadogRum(): void {
+  Object.defineProperty(window, 'DD_RUM', {
+    configurable: true,
+    value: { setViewName }
+  })
+}
+
+afterEach(() => {
+  setViewName.mockReset()
+  Reflect.deleteProperty(window, 'DD_RUM')
+})
+
+describe('DatadogRumTelemetryProvider', () => {
+  it.for([
+    { expected: 'workspace', path: 'https://cloud.comfy.org/' },
+    { expected: 'account_access', path: 'https://cloud.comfy.org/cloud/' },
+    { expected: 'account_access', path: 'https://cloud.comfy.org/cloud/login' },
+    {
+      expected: 'account_access',
+      path: 'https://cloud.comfy.org/cloud/subscribe?plan=creator'
+    },
+    {
+      expected: 'oauth_consent',
+      path: 'https://cloud.comfy.org/cloud/oauth/consent?oauth_request_id=redacted'
+    },
+    {
+      expected: 'support_recovery',
+      path: 'https://cloud.comfy.org/cloud/forgot-password'
+    },
+    {
+      expected: 'support_recovery',
+      path: 'https://cloud.comfy.org/cloud/sorry-contact-support'
+    },
+    {
+      expected: 'support_recovery',
+      path: 'https://cloud.comfy.org/cloud/auth-timeout'
+    }
+  ] as const)('names the current view $expected', ({ expected, path }) => {
+    installDatadogRum()
+
+    new DatadogRumTelemetryProvider().trackPageView('ignored', { path })
+
+    expect(setViewName).toHaveBeenCalledWith(expected)
+  })
+
+  it('does nothing when Datadog RUM is unavailable', () => {
+    expect(() =>
+      new DatadogRumTelemetryProvider().trackPageView('ignored')
+    ).not.toThrow()
+  })
+})

src/platform/telemetry/providers/cloud/DatadogRumTelemetryProvider.ts

@@ -0,0 +1,40 @@
+import type { PageViewMetadata, TelemetryProvider } from '../../types'
+
+interface DatadogRumClient {
+  setViewName(name: string): void
+}
+
+interface WindowWithDatadogRum extends Window {
+  DD_RUM?: DatadogRumClient
+}
+
+type ViewName =
+  | 'account_access'
+  | 'oauth_consent'
+  | 'support_recovery'
+  | 'workspace'
+
+const SUPPORT_RECOVERY_PATHS = new Set([
+  '/cloud/auth-timeout',
+  '/cloud/forgot-password',
+  '/cloud/sorry-contact-support'
+])
+
+function getViewName(path = window.location.href): ViewName {
+  const pathname = new URL(path, window.location.origin).pathname.replace(
+    /\/$/,
+    ''
+  )
+  if (pathname === '/cloud/oauth/consent') return 'oauth_consent'
+  if (SUPPORT_RECOVERY_PATHS.has(pathname)) return 'support_recovery'
+  if (pathname === '/cloud' || pathname.startsWith('/cloud/'))
+    return 'account_access'
+  return 'workspace'
+}
+
+export class DatadogRumTelemetryProvider implements TelemetryProvider {
+  trackPageView(_pageName: string, properties?: PageViewMetadata): void {
+    const rum = (window as WindowWithDatadogRum).DD_RUM
+    rum?.setViewName(getViewName(properties?.path))
+  }
+}

src/platform/telemetry/types.ts

@@ -33,6 +33,7 @@ export type PaymentIntentSource =
   | 'invite_member_upsell'
   | 'upload_model_upgrade'
   | 'team_upgrade_resume'
+  | 'free_tier_quota'
 
 export type SubscriptionCheckoutType = 'new' | 'change'
 export type SubscriptionCheckoutTier = TierKey | 'team'

src/platform/updates/components/WhatsNewPopup.vue

@@ -231,7 +231,6 @@ defineExpose({
 
 /* What's new title - targets h2 or strong text after h1 */
 .content-text :deep(h2),
-/* stylelint-disable-next-line selector-max-type -- generated markdown offers no class hooks */
 .content-text :deep(h1 + p strong) {
   color: var(--text-primary);
   font-family: Inter, sans-serif;

src/renderer/extensions/linearMode/LinearControls.test.ts

@@ -12,7 +12,7 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { toNodeId } from '@/types/nodeId'
 
 const billingMock = vi.hoisted(() => ({
-  isActiveSubscription: true
+  canRunWorkflows: true
 }))
 
 const overlayMock = vi.hoisted(() => ({
@@ -22,7 +22,7 @@ const overlayMock = vi.hoisted(() => ({
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
-    isActiveSubscription: billingMock.isActiveSubscription
+    canRunWorkflows: billingMock.canRunWorkflows
   })
 }))
 
@@ -77,14 +77,14 @@ const nodeErrors: Record<string, NodeError> = {
 
 function renderControls({
   hasError = false,
-  isActiveSubscription = true,
+  canRunWorkflows = true,
   mobile = false
 }: {
   hasError?: boolean
-  isActiveSubscription?: boolean
+  canRunWorkflows?: boolean
   mobile?: boolean
 } = {}) {
-  billingMock.isActiveSubscription = isActiveSubscription
+  billingMock.canRunWorkflows = canRunWorkflows
 
   const pinia = createTestingPinia({
     createSpy: vi.fn,
@@ -120,7 +120,7 @@ function renderControls({
 describe('LinearControls', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    billingMock.isActiveSubscription = true
+    billingMock.canRunWorkflows = true
     overlayMock.overlayMessage = 'KSampler is missing a required input: model'
     overlayMock.overlayTitle = 'Required input missing'
   })
@@ -187,7 +187,7 @@ describe('LinearControls', () => {
     ({ mobile }) => {
       renderControls({
         hasError: true,
-        isActiveSubscription: false,
+        canRunWorkflows: false,
         mobile
       })
 

src/renderer/extensions/linearMode/LinearControls.vue

@@ -11,6 +11,7 @@ import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
+import FreeTierQuota from '@/platform/cloud/subscription/components/FreeTierQuota.vue'
 import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -28,7 +29,7 @@ const { t } = useI18n()
 const commandStore = useCommandStore()
 const { batchCount } = storeToRefs(useQueueSettingsStore())
 const settingStore = useSettingStore()
-const { isActiveSubscription } = useBillingContext()
+const { canRunWorkflows } = useBillingContext()
 const workflowStore = useWorkflowStore()
 const { isBuilderMode } = useAppMode()
 const appModeStore = useAppModeStore()
@@ -54,7 +55,7 @@ const linearRunButtonTestId = 'linear-run-button'
 const showRunErrorWarning = computed(
   () =>
     hasAnyError.value &&
-    toValue(isActiveSubscription) &&
+    toValue(canRunWorkflows) &&
     toValue(overlayMessage).trim().length > 0
 )
 
@@ -152,10 +153,7 @@ function handleDragDrop() {
         class="border-t border-node-component-border p-4 pb-6"
       >
         <LinearRunErrorWarning v-if="showRunErrorWarning" />
-        <SubscribeToRunButton
-          v-if="!isActiveSubscription"
-          class="mt-4 w-full"
-        />
+        <SubscribeToRunButton v-if="!canRunWorkflows" class="mt-4 w-full" />
         <div v-else class="mt-4 flex">
           <PartnerNodesList mobile />
           <Popover side="top" @open-auto-focus.prevent>
@@ -210,10 +208,7 @@ function handleDragDrop() {
           :max="settingStore.get('Comfy.QueueButton.BatchCountLimit')"
           class="h-7 min-w-40"
         />
-        <SubscribeToRunButton
-          v-if="!isActiveSubscription"
-          class="mt-4 w-full"
-        />
+        <SubscribeToRunButton v-if="!canRunWorkflows" class="mt-4 w-full" />
         <Button
           v-else
           variant="primary"
@@ -229,6 +224,7 @@ function handleDragDrop() {
           <i aria-hidden="true" class="icon-[lucide--play]" />
           {{ t('menu.run') }}
         </Button>
+        <FreeTierQuota />
       </section>
     </div>
   </div>

src/renderer/extensions/linearMode/PartnerNodesList.vue

@@ -4,33 +4,17 @@ import {
   CollapsibleRoot,
   CollapsibleTrigger
 } from 'reka-ui'
-import { computed, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import Popover from '@/components/ui/Popover.vue'
-import { usePriceBadge } from '@/composables/node/usePriceBadge'
+import { useCreditsBadgesInGraph } from '@/composables/node/usePriceBadge'
 import PartnerNodeItem from '@/renderer/extensions/linearMode/PartnerNodeItem.vue'
-import { trackNodePrice } from '@/renderer/extensions/vueNodes/composables/usePartitionedBadges'
-import { app } from '@/scripts/app'
-import { mapAllNodes } from '@/utils/graphTraversalUtil'
 
 defineProps<{ mobile?: boolean }>()
 
-const { isCreditsBadge } = usePriceBadge()
+const creditsBadges = useCreditsBadgesInGraph()
 const { t } = useI18n()
-
-const creditsBadges = computed(() =>
-  mapAllNodes(app.graph, (node) => {
-    if (node.isSubgraphNode()) return
-
-    const priceBadge = node.badges.find(isCreditsBadge)
-    if (!priceBadge) return
-
-    trackNodePrice(node)
-    return [node.title, toValue(priceBadge).text, node.id] as const
-  })
-)
 </script>
 <template>
   <Popover v-if="mobile && creditsBadges.length" side="top">

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue

@@ -224,10 +224,9 @@ function resolveValues(values: unknown): string[] {
 }
 
 const modelValue = defineModel<string | undefined>({
-  default(modelProps: Record<string, unknown>) {
+  default(modelProps: Props) {
     try {
-      const modelWidget = modelProps.widget as Props['widget'] | undefined
-      const values = modelWidget?.options?.values
+      const values = modelProps.widget.options?.values
       const resolved = typeof values === 'function' ? values() : values
       const firstValue = Array.isArray(resolved)
         ? resolved.find((value) => value !== null && value !== undefined)

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -41,9 +41,8 @@ provide(
 )
 
 const modelValue = defineModel<string | undefined>({
-  default(modelProps: Record<string, unknown>) {
-    const modelWidget = modelProps.widget as Props['widget'] | undefined
-    const values = modelWidget?.options?.values
+  default(props: Props) {
+    const values = props.widget.options?.values
     return (Array.isArray(values) ? values[0] : undefined) ?? ''
   }
 })

src/scripts/app.ts

@@ -24,6 +24,7 @@ import { snapPoint } from '@/lib/litegraph/src/measure'
 import type { Vector2 } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
+import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -1813,6 +1814,7 @@ export class ComfyApp {
               isPartialExecution
             })
           }
+          useFreeTierQuota().trackRun()
           this.canvas.draw(true, true)
           await this.ui.queue.update()
         }

src/scripts/metadata/ebml.ts

@@ -124,7 +124,7 @@ const findElementsInTag = (
   end: number,
   id: Uint8Array
 ): EbmlElementRange | null => {
-  for (let pos = start; pos < end - 1;) {
+  for (let pos = start; pos < end - 1; ) {
     if (matchesId(data, pos, id)) {
       const size = readVint(data, pos + 2)
       if (size && size.value > 0) {
@@ -307,7 +307,7 @@ const ebmlToString = (
 const parseMetadata = (data: Uint8Array): ComfyMetadata => {
   const meta: ComfyMetadata = {}
 
-  for (let pos = 0; pos < data.length - 2;) {
+  for (let pos = 0; pos < data.length - 2; ) {
     const tagInfo = findNextTag(data, pos)
     if (!tagInfo) {
       pos++

src/services/README.md

@@ -306,9 +306,13 @@ export function useNodeFactory() {
     // Create node based on type and configuration
     switch (type) {
       case 'basic':
-        return {/* basic node implementation */}
+        return {
+          /* basic node implementation */
+        }
       case 'complex':
-        return {/* complex node implementation */}
+        return {
+          /* complex node implementation */
+        }
       default:
         throw new Error(`Unknown node type: ${type}`)
     }
@@ -343,7 +347,9 @@ Services in ComfyUI can be tested effectively using different approaches dependi
 
 ```typescript
 // Manual instantiation required
-const mockData = [/* test data */]
+const mockData = [
+  /* test data */
+]
 const service = new NodeSearchService(mockData)
 ```
 

src/stores/authStore.test.ts

@@ -147,7 +147,9 @@ describe('useAuthStore', () => {
   let authStateCallback: (user: User | null) => void
   let idTokenCallback: (user: User | null) => void
 
-  const mockAuth: MockAuth = {/* mock Auth object */}
+  const mockAuth: MockAuth = {
+    /* mock Auth object */
+  }
 
   const mockUser: MockUser = {
     uid: 'test-user-id',

src/storybook/mocks/useBillingContext.ts

@@ -55,6 +55,7 @@ export function useBillingContext(): BillingContext {
     isLoading: ref(false),
     error: ref<string | null>(null),
     isActiveSubscription: computed(() => state.value.isActiveSubscription),
+    canRunWorkflows: computed(() => state.value.isActiveSubscription),
     isFreeTier: computed(() => false),
     isLegacyTeamPlan: computed(() => false),
     isTeamPlan: computed(() => state.value.isTeamPlan),

src/utils/linkFixer.ts

@@ -132,9 +132,9 @@ export function fixBadLinks(
       // We can set to null (delete), so undefined means we haven't set it at all.
       if (patchedNode['inputs']![slot] !== undefined) {
         logger.log(
-          ` > Already set ${node.id}.inputs[${slot}] to ${
-            patchedNode['inputs']![slot]!
-          } Skipping.`
+          ` > Already set ${node.id}.inputs[${slot}] to ${patchedNode[
+            'inputs'
+          ]![slot]!} Skipping.`
         )
         return false
       }