test: cover graph selection and menu composables

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

@@ -15,7 +15,7 @@ const { categories } = defineProps<{
 
 const activeSection = ref(categories[0]?.value ?? '')
 
-const HEADER_OFFSET_PX = -144
+const HEADER_OFFSET = -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_PX,
+      offset: HEADER_OFFSET,
       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"
+  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-['']"
 >
   <slot />
 </li>

browser_tests/assets/linear-validation-warning.json

@@ -1,45 +0,0 @@
-{
-  "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/helpers/AppModeHelper.ts

@@ -34,10 +34,6 @@ 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. */
@@ -96,19 +92,13 @@ export class AppModeHelper {
     this.outputPlaceholder = this.page.getByTestId(
       TestIds.builder.outputPlaceholder
     )
-    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.linearWidgets = this.page.getByTestId('linear-widgets')
     this.imagePickerPopover = this.page
       .getByRole('dialog')
       .filter({ has: this.page.getByRole('button', { name: 'All' }) })
       .first()
     this.runButton = this.page
-      .getByTestId(TestIds.linear.runButton)
+      .getByTestId('linear-run-button')
       .getByRole('button', { name: /run/i })
     this.welcome = this.page.getByTestId(TestIds.appMode.welcome)
     this.emptyWorkflowText = this.page.getByTestId(

browser_tests/fixtures/selectors.ts

@@ -172,9 +172,6 @@ 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/tests/appModeValidationWarning.spec.ts

@@ -1,106 +0,0 @@
-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/graph.spec.ts

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

browser_tests/tests/linearMode.spec.ts

@@ -3,7 +3,6 @@ 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 ({
@@ -17,9 +16,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   test('Run button visible in linear mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(
-      comfyPage.page.getByTestId(TestIds.linear.runButton)
-    ).toBeVisible()
+    await expect(comfyPage.page.getByTestId('linear-run-button')).toBeVisible()
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {

src/components/error/ErrorOverlay.vue

@@ -37,7 +37,7 @@
             size="unset"
             class="min-h-8 rounded-lg px-3 py-2 text-xs font-normal"
             data-testid="error-overlay-see-errors"
-            @click="viewErrorsInGraph"
+            @click="seeErrors"
           >
             {{
               appMode
@@ -67,18 +67,31 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
-import { useViewErrorsInGraph } from '@/composables/useViewErrorsInGraph'
 
 const { appMode = false } = defineProps<{ appMode?: boolean }>()
 
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
-const { viewErrorsInGraph } = useViewErrorsInGraph()
+const rightSidePanelStore = useRightSidePanelStore()
+const canvasStore = useCanvasStore()
 
 const { isVisible, overlayMessage, overlayTitle } = useErrorOverlayState()
 
 function dismiss() {
   executionErrorStore.dismissErrorOverlay()
 }
+
+function seeErrors() {
+  canvasStore.linearMode = false
+  if (canvasStore.canvas) {
+    canvasStore.canvas.deselectAll()
+    canvasStore.updateSelectedItems()
+  }
+
+  rightSidePanelStore.openPanel('errors')
+  executionErrorStore.dismissErrorOverlay()
+}
 </script>

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -224,7 +224,7 @@ const handleOpenUserSettings = () => {
 }
 
 const handleOpenPlansAndPricing = () => {
-  subscriptionDialog.showPricingTable({ reason: 'avatar_menu_plans' })
+  subscriptionDialog.showPricingTable()
   emit('close')
 }
 
@@ -239,7 +239,8 @@ const handleOpenPlanAndCreditsSettings = () => {
 }
 
 const handleTopUp = () => {
-  useTelemetry()?.trackAddApiCreditButtonClicked({ source: 'avatar_menu' })
+  // Track purchase credits entry from avatar popover
+  useTelemetry()?.trackAddApiCreditButtonClicked()
   dialogService.showTopUpCreditsDialog()
   emit('close')
 }
@@ -253,7 +254,7 @@ const handleOpenPartnerNodesInfo = () => {
 }
 
 const handleUpgradeToAddCredits = () => {
-  subscriptionDialog.showPricingTable({ reason: 'upgrade_to_add_credits' })
+  subscriptionDialog.showPricingTable()
   emit('close')
 }
 

src/components/topbar/TopbarSubscribeButton.vue

@@ -21,6 +21,6 @@ const { isFreeTier } = useBillingContext()
 const subscriptionDialog = useSubscriptionDialog()
 
 function handleClick() {
-  subscriptionDialog.showPricingTable({ reason: 'subscribe_now_button' })
+  subscriptionDialog.showPricingTable()
 }
 </script>

src/composables/billing/types.ts

@@ -1,6 +1,5 @@
 import type { ComputedRef, Ref } from 'vue'
 
-import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import type {
   BillingStatus,
@@ -76,10 +75,9 @@ export interface BillingActions {
    */
   requireActiveSubscription: () => Promise<void>
   /**
-   * Shows the subscription dialog. Pass a reason so the paywall open and any
-   * downstream checkout stay attributed to the triggering product moment.
+   * Shows the subscription dialog.
    */
-  showSubscriptionDialog: (options?: SubscriptionDialogOptions) => void
+  showSubscriptionDialog: () => void
 }
 
 export interface BillingState {

src/composables/billing/useBillingContext.ts

@@ -7,7 +7,6 @@ import {
   getTierFeatures
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
-import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type {
   PreviewSubscribeOptions,
   SubscribeOptions
@@ -282,8 +281,8 @@ function useBillingContextInternal(): BillingContext {
     return activeContext.value.requireActiveSubscription()
   }
 
-  function showSubscriptionDialog(options?: SubscriptionDialogOptions) {
-    return activeContext.value.showSubscriptionDialog(options)
+  function showSubscriptionDialog() {
+    return activeContext.value.showSubscriptionDialog()
   }
 
   return {

src/composables/billing/useLegacyBilling.ts

@@ -2,7 +2,6 @@ import { computed, ref } from 'vue'
 
 import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type {
   BillingStatus,
   BillingSubscriptionStatus,
@@ -190,12 +189,12 @@ export function useLegacyBilling(): BillingState & BillingActions {
   async function requireActiveSubscription(): Promise<void> {
     await fetchStatus()
     if (!isActiveSubscription.value) {
-      legacyShowSubscriptionDialog({ reason: 'subscription_required' })
+      legacyShowSubscriptionDialog()
     }
   }
 
-  function showSubscriptionDialog(options?: SubscriptionDialogOptions): void {
-    legacyShowSubscriptionDialog(options)
+  function showSubscriptionDialog(): void {
+    legacyShowSubscriptionDialog()
   }
 
   return {

src/composables/graph/useGroupMenuOptions.test.ts

@@ -0,0 +1,217 @@
+import type * as VueI18n from 'vue-i18n'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphGroup } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useGroupMenuOptions } from '@/composables/graph/useGroupMenuOptions'
+
+const { canvas, captureCanvasState, isLightTheme, refreshCanvas, settings } =
+  vi.hoisted(() => ({
+    canvas: { setDirty: vi.fn() },
+    captureCanvasState: vi.fn(),
+    isLightTheme: { value: false },
+    refreshCanvas: vi.fn(),
+    settings: { 'Comfy.GroupSelectedNodes.Padding': 10 } as Record<
+      string,
+      unknown
+    >
+  }))
+
+vi.mock('vue-i18n', async (importOriginal) => ({
+  ...(await importOriginal<typeof VueI18n>()),
+  useI18n: () => ({ t: (key: string) => key })
+}))
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({ get: (k: string) => settings[k] })
+}))
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({
+    activeWorkflow: { changeTracker: { captureCanvasState } }
+  })
+}))
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({ canvas })
+}))
+vi.mock('@/composables/graph/useCanvasRefresh', () => ({
+  useCanvasRefresh: () => ({ refreshCanvas })
+}))
+vi.mock('@/composables/graph/useNodeCustomization', () => ({
+  useNodeCustomization: () => ({
+    shapeOptions: [{ value: 1, localizedName: 'Box' }],
+    colorOptions: [
+      { value: { dark: '#111', light: '#eee' }, localizedName: 'Red' }
+    ],
+    isLightTheme
+  })
+}))
+
+function group(over: Record<string, unknown> = {}): LGraphGroup {
+  return {
+    recomputeInsideNodes: vi.fn(),
+    resizeTo: vi.fn(),
+    children: [],
+    graph: { change: vi.fn() },
+    nodes: [],
+    ...over
+  } as unknown as LGraphGroup
+}
+
+beforeEach(() => {
+  canvas.setDirty.mockReset()
+  captureCanvasState.mockReset()
+  isLightTheme.value = false
+  refreshCanvas.mockReset()
+})
+
+describe('useGroupMenuOptions', () => {
+  it('fits a group to its nodes, resizing with the configured padding', () => {
+    const g = group()
+    useGroupMenuOptions().getFitGroupToNodesOption(g).action?.()
+
+    expect(g.recomputeInsideNodes).toHaveBeenCalled()
+    expect(g.resizeTo).toHaveBeenCalledWith(g.children, 10)
+    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
+    expect(captureCanvasState).toHaveBeenCalled()
+  })
+
+  it('aborts the fit action when recompute throws', () => {
+    const g = group({
+      recomputeInsideNodes: vi.fn(() => {
+        throw new Error('boom')
+      })
+    })
+    useGroupMenuOptions().getFitGroupToNodesOption(g).action?.()
+
+    expect(g.resizeTo).not.toHaveBeenCalled()
+  })
+
+  it('applies a shape to all group nodes via the shape submenu', () => {
+    const node = { shape: 0, mode: LGraphEventMode.ALWAYS }
+    const bump = vi.fn()
+    const option = useGroupMenuOptions().getGroupShapeOptions(
+      group({ nodes: [node] }),
+      bump
+    )
+    option.submenu?.[0].action?.()
+
+    expect(node.shape).toBe(1)
+    expect(refreshCanvas).toHaveBeenCalled()
+    expect(bump).toHaveBeenCalled()
+  })
+
+  it('handles shape actions when a group has no nodes array', () => {
+    const bump = vi.fn()
+    useGroupMenuOptions()
+      .getGroupShapeOptions(group({ nodes: undefined }), bump)
+      .submenu?.[0].action?.()
+
+    expect(refreshCanvas).toHaveBeenCalled()
+    expect(bump).toHaveBeenCalled()
+  })
+
+  it('applies a color to the group via the color submenu (dark theme)', () => {
+    const g = group()
+    const bump = vi.fn()
+    useGroupMenuOptions().getGroupColorOptions(g, bump).submenu?.[0].action?.()
+
+    expect((g as unknown as { color: string }).color).toBe('#111')
+    expect(bump).toHaveBeenCalled()
+  })
+
+  it('applies a light-theme color to the group via the color submenu', () => {
+    const g = group()
+    const bump = vi.fn()
+    isLightTheme.value = true
+    useGroupMenuOptions().getGroupColorOptions(g, bump).submenu?.[0].action?.()
+
+    expect((g as unknown as { color: string }).color).toBe('#eee')
+    expect(bump).toHaveBeenCalled()
+  })
+
+  it('returns no mode options for an empty group', () => {
+    expect(useGroupMenuOptions().getGroupModeOptions(group(), vi.fn())).toEqual(
+      []
+    )
+  })
+
+  it('returns no mode options when a group has no nodes array', () => {
+    expect(
+      useGroupMenuOptions().getGroupModeOptions(
+        group({ nodes: undefined }),
+        vi.fn()
+      )
+    ).toEqual([])
+  })
+
+  it('returns no mode options when recomputing group nodes fails', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const options = useGroupMenuOptions().getGroupModeOptions(
+      group({
+        recomputeInsideNodes: vi.fn(() => {
+          throw new Error('boom')
+        })
+      }),
+      vi.fn()
+    )
+
+    expect(options).toEqual([])
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Failed to recompute nodes in group for mode options:',
+      expect.any(Error)
+    )
+
+    warnSpy.mockRestore()
+  })
+
+  it('builds mode options for uniform nodes and applies the new mode', () => {
+    const node = { shape: 0, mode: LGraphEventMode.ALWAYS }
+    const bump = vi.fn()
+    const options = useGroupMenuOptions().getGroupModeOptions(
+      group({ nodes: [node] }),
+      bump
+    )
+
+    expect(options.length).toBeGreaterThan(0)
+    options[0].action?.()
+    expect(node.mode).not.toBe(LGraphEventMode.ALWAYS)
+    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
+    expect(bump).toHaveBeenCalled()
+  })
+
+  it('offers two alternate modes when all nodes are NEVER', () => {
+    const options = useGroupMenuOptions().getGroupModeOptions(
+      group({ nodes: [{ mode: LGraphEventMode.NEVER }] }),
+      vi.fn()
+    )
+    expect(options).toHaveLength(2)
+  })
+
+  it('offers two alternate modes when all nodes are BYPASS', () => {
+    const options = useGroupMenuOptions().getGroupModeOptions(
+      group({ nodes: [{ mode: LGraphEventMode.BYPASS }] }),
+      vi.fn()
+    )
+    expect(options).toHaveLength(2)
+  })
+
+  it('offers all three modes when nodes have mixed modes', () => {
+    const options = useGroupMenuOptions().getGroupModeOptions(
+      group({
+        nodes: [
+          { mode: LGraphEventMode.ALWAYS },
+          { mode: LGraphEventMode.NEVER }
+        ]
+      }),
+      vi.fn()
+    )
+    expect(options).toHaveLength(3)
+  })
+
+  it('offers all three modes when the uniform mode is unknown', () => {
+    const options = useGroupMenuOptions().getGroupModeOptions(
+      group({ nodes: [{ mode: 999 }] }),
+      vi.fn()
+    )
+    expect(options).toHaveLength(3)
+  })
+})

src/composables/graph/useMoreOptionsMenu.test.ts

@@ -0,0 +1,294 @@
+import { ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LGraphGroup } from '@/lib/litegraph/src/litegraph'
+import {
+  isNodeOptionsOpen,
+  registerNodeOptionsInstance,
+  showNodeOptions,
+  toggleNodeOptions,
+  useMoreOptionsMenu
+} from '@/composables/graph/useMoreOptionsMenu'
+
+const {
+  canvasState,
+  extraWidgetOptions,
+  imageOptions,
+  nodeMenu,
+  selectionMenu,
+  selectionState
+} = vi.hoisted(() => ({
+  canvasState: {
+    canvas: undefined as
+      | undefined
+      | {
+          getNodeMenuOptions: ReturnType<typeof vi.fn>
+        }
+  },
+  extraWidgetOptions: {
+    value: [] as Array<{ content: string; callback?: () => void }>
+  },
+  imageOptions: {
+    value: [] as Array<{ label: string; hasSubmenu?: boolean; submenu?: [] }>
+  },
+  nodeMenu: {
+    visualOptions: {
+      value: [] as Array<{
+        label: string
+        hasSubmenu?: boolean
+        submenu?: Array<{ label: string; action: () => void }>
+      }>
+    }
+  },
+  selectionMenu: {
+    basicOptions: { value: [{ label: 'Copy' }] },
+    multipleOptions: { value: [{ label: 'Align' }] },
+    subgraphOptions: { value: [] as Array<{ label: string }> }
+  },
+  selectionState: {
+    selectedItems: { value: [] as unknown[] },
+    selectedNodes: { value: [] as unknown[] },
+    canOpenNodeInfo: { value: false },
+    openNodeInfo: vi.fn(() => true),
+    hasSubgraphs: { value: false },
+    hasImageNode: { value: false },
+    hasOutputNodesSelected: { value: false },
+    hasMultipleSelection: { value: false },
+    computeSelectionFlags: vi.fn(() => ({
+      collapsed: false,
+      pinned: false
+    }))
+  }
+}))
+
+vi.mock('@/composables/graph/useSelectionState', () => ({
+  useSelectionState: () => selectionState
+}))
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => canvasState
+}))
+vi.mock('@/services/litegraphService', () => ({
+  getExtraOptionsForWidget: () => extraWidgetOptions.value
+}))
+vi.mock('@/composables/graph/useImageMenuOptions', () => ({
+  useImageMenuOptions: () => ({
+    getImageMenuOptions: () => imageOptions.value
+  })
+}))
+vi.mock('@/composables/graph/useNodeMenuOptions', () => ({
+  useNodeMenuOptions: () => ({
+    getNodeInfoOption: (openNodeInfo: () => boolean) => ({
+      label: 'Node Info',
+      action: openNodeInfo
+    }),
+    getNodeVisualOptions: () => nodeMenu.visualOptions.value,
+    getPinOption: () => ({ label: 'Pin' }),
+    getBypassOption: () => ({ label: 'Bypass' }),
+    getRunBranchOption: () => ({ label: 'Run Branch' })
+  })
+}))
+vi.mock('@/composables/graph/useGroupMenuOptions', () => ({
+  useGroupMenuOptions: () => ({
+    getFitGroupToNodesOption: () => ({ label: 'Fit' }),
+    getGroupColorOptions: () => ({ label: 'Group Color' }),
+    getGroupModeOptions: () => [{ label: 'Group Mode' }]
+  })
+}))
+vi.mock('@/composables/graph/useSelectionMenuOptions', () => ({
+  useSelectionMenuOptions: () => ({
+    getBasicSelectionOptions: () => selectionMenu.basicOptions.value,
+    getMultipleNodesOptions: () => selectionMenu.multipleOptions.value,
+    getSubgraphOptions: () => selectionMenu.subgraphOptions.value
+  })
+}))
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  registerNodeOptionsInstance(null)
+  canvasState.canvas = undefined
+  extraWidgetOptions.value = []
+  imageOptions.value = []
+  nodeMenu.visualOptions.value = []
+  selectionMenu.basicOptions.value = [{ label: 'Copy' }]
+  selectionMenu.multipleOptions.value = [{ label: 'Align' }]
+  selectionMenu.subgraphOptions.value = []
+  selectionState.selectedItems.value = []
+  selectionState.selectedNodes.value = []
+  selectionState.canOpenNodeInfo.value = false
+  selectionState.hasSubgraphs.value = false
+  selectionState.hasImageNode.value = false
+  selectionState.hasOutputNodesSelected.value = false
+  selectionState.hasMultipleSelection.value = false
+  selectionState.computeSelectionFlags.mockReturnValue({
+    collapsed: false,
+    pinned: false
+  })
+})
+
+function labels() {
+  return useMoreOptionsMenu()
+    .menuOptions.value.map((o) => o.label)
+    .filter(Boolean)
+}
+
+describe('node options popover instance', () => {
+  it('reports closed when no instance is registered', () => {
+    expect(isNodeOptionsOpen()).toBe(false)
+  })
+
+  it('reflects the registered instance open state and forwards toggle/show', () => {
+    const toggle = vi.fn()
+    const show = vi.fn()
+    registerNodeOptionsInstance({
+      toggle,
+      show,
+      hide: vi.fn(),
+      isOpen: ref(true)
+    })
+
+    expect(isNodeOptionsOpen()).toBe(true)
+    toggleNodeOptions(new Event('click'))
+    showNodeOptions(new MouseEvent('contextmenu'))
+    expect(toggle).toHaveBeenCalled()
+    expect(show).toHaveBeenCalled()
+  })
+})
+
+describe('useMoreOptionsMenu', () => {
+  it('assembles a non-empty menu for a single selected node', () => {
+    const node = { id: 1, widgets: [] }
+    selectionState.selectedItems.value = [node]
+    selectionState.selectedNodes.value = [node]
+
+    expect(labels()).toContain('Copy')
+    expect(labels()).toContain('Pin')
+  })
+
+  it('includes run-branch and multiple-node options for output selections', () => {
+    const nodes = [
+      { id: 1, widgets: [] },
+      { id: 2, widgets: [] }
+    ]
+    selectionState.selectedItems.value = nodes
+    selectionState.selectedNodes.value = nodes
+    selectionState.hasOutputNodesSelected.value = true
+    selectionState.hasMultipleSelection.value = true
+
+    const menuLabels = labels()
+    expect(menuLabels).toContain('Run Branch')
+    expect(menuLabels).toContain('Align')
+  })
+
+  it('recomputes menu flags after a manual bump', () => {
+    const { bump, menuOptions } = useMoreOptionsMenu()
+    void menuOptions.value
+    expect(selectionState.computeSelectionFlags).toHaveBeenCalledTimes(1)
+
+    bump()
+    void menuOptions.value
+    expect(selectionState.computeSelectionFlags).toHaveBeenCalledTimes(2)
+  })
+
+  it('assembles group-context options for a single selected group', () => {
+    const group = new LGraphGroup('Group')
+    selectionState.selectedItems.value = [group]
+    selectionState.selectedNodes.value = []
+
+    const menuLabels = labels()
+    expect(menuLabels).toContain('Group Mode')
+    expect(menuLabels).toContain('Fit')
+    expect(menuLabels).toContain('Group Color')
+  })
+
+  it('includes node info and visual options for a single node', () => {
+    const node = { id: 1, widgets: [] }
+    selectionState.selectedItems.value = [node]
+    selectionState.selectedNodes.value = [node]
+    selectionState.canOpenNodeInfo.value = true
+    nodeMenu.visualOptions.value = [
+      { label: 'Minimize Node' },
+      { label: 'Shape', hasSubmenu: true, submenu: [] },
+      { label: 'Color', hasSubmenu: true, submenu: [] }
+    ]
+
+    const menu = useMoreOptionsMenu().menuOptions.value
+    expect(menu.map((o) => o.label)).toEqual(
+      expect.arrayContaining(['Node Info', 'Minimize Node', 'Shape', 'Color'])
+    )
+    menu.find((o) => o.label === 'Node Info')?.action?.()
+    expect(selectionState.openNodeInfo).toHaveBeenCalled()
+  })
+
+  it('returns only entries that have populated submenus', () => {
+    const node = { id: 1, widgets: [] }
+    selectionState.selectedItems.value = [node]
+    selectionState.selectedNodes.value = [node]
+    nodeMenu.visualOptions.value = [
+      { label: 'Minimize Node' },
+      {
+        label: 'Shape',
+        hasSubmenu: true,
+        submenu: [{ label: 'Box', action: vi.fn() }]
+      },
+      { label: 'Color', hasSubmenu: true }
+    ]
+
+    expect(
+      useMoreOptionsMenu().menuOptionsWithSubmenu.value.map((o) => o.label)
+    ).toEqual(['Shape'])
+  })
+
+  it('includes image menu options for a selected image node', () => {
+    const node = { id: 1, widgets: [] }
+    selectionState.selectedItems.value = [node]
+    selectionState.selectedNodes.value = [node]
+    selectionState.hasImageNode.value = true
+    imageOptions.value = [{ label: 'Open Image' }]
+
+    expect(labels()).toContain('Open Image')
+  })
+
+  it('merges LiteGraph menu options for a single selected node', () => {
+    const node = { id: 1, widgets: [] }
+    const getNodeMenuOptions = vi.fn(() => [
+      { content: 'Extension Action', callback: vi.fn() }
+    ])
+    selectionState.selectedItems.value = [node]
+    selectionState.selectedNodes.value = [node]
+    canvasState.canvas = { getNodeMenuOptions }
+
+    expect(labels()).toContain('Extension Action')
+    expect(getNodeMenuOptions).toHaveBeenCalledWith(node)
+  })
+
+  it('keeps Vue options when LiteGraph menu construction throws', () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const node = { id: 1, widgets: [] }
+    selectionState.selectedItems.value = [node]
+    selectionState.selectedNodes.value = [node]
+    canvasState.canvas = {
+      getNodeMenuOptions: vi.fn(() => {
+        throw new Error('boom')
+      })
+    }
+
+    expect(labels()).toContain('Copy')
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Error getting LiteGraph menu items:',
+      expect.any(Error)
+    )
+
+    errorSpy.mockRestore()
+  })
+
+  it('adds hovered widget options to the selected node menu', () => {
+    const node = { id: 1, widgets: [{ name: 'image' }] }
+    selectionState.selectedItems.value = [node]
+    selectionState.selectedNodes.value = [node]
+    extraWidgetOptions.value = [{ content: 'Widget Extra', callback: vi.fn() }]
+
+    showNodeOptions(new MouseEvent('contextmenu'), 'image')
+
+    expect(labels()).toContain('Widget Extra')
+  })
+})

src/composables/graph/useNodeCustomization.test.ts

@@ -0,0 +1,175 @@
+import type * as VueI18n from 'vue-i18n'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+
+import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
+
+const { selection, refreshCanvas, palette } = vi.hoisted(() => ({
+  selection: { items: [] as unknown[] },
+  refreshCanvas: vi.fn(),
+  palette: { light_theme: false }
+}))
+
+vi.mock('vue-i18n', async (importOriginal) => ({
+  ...(await importOriginal<typeof VueI18n>()),
+  useI18n: () => ({ t: (key: string) => key })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({
+    get selectedItems() {
+      return selection.items
+    }
+  })
+}))
+
+vi.mock('@/stores/workspace/colorPaletteStore', () => ({
+  useColorPaletteStore: () => ({
+    get completedActivePalette() {
+      return { light_theme: palette.light_theme }
+    }
+  })
+}))
+
+vi.mock('@/composables/graph/useCanvasRefresh', () => ({
+  useCanvasRefresh: () => ({ refreshCanvas })
+}))
+
+function colorable(bgcolor?: string) {
+  return {
+    setColorOption: vi.fn(),
+    getColorOption: () => (bgcolor ? { bgcolor } : null)
+  }
+}
+
+beforeEach(() => {
+  selection.items = []
+  refreshCanvas.mockReset()
+  palette.light_theme = false
+})
+
+describe('useNodeCustomization', () => {
+  it('exposes color and shape option lists', () => {
+    const { colorOptions, shapeOptions } = useNodeCustomization()
+    expect(colorOptions.length).toBeGreaterThan(1)
+    expect(shapeOptions.length).toBeGreaterThan(0)
+  })
+
+  it('reflects the active palette light-theme flag', () => {
+    palette.light_theme = true
+    expect(useNodeCustomization().isLightTheme.value).toBe(true)
+  })
+
+  it('clears color on all colorable items for the no-color option', () => {
+    const item = colorable()
+    selection.items = [item]
+    useNodeCustomization().applyColor(null)
+
+    expect(item.setColorOption).toHaveBeenCalledWith(null)
+    expect(refreshCanvas).toHaveBeenCalled()
+  })
+
+  it('applies a named color option to colorable items', () => {
+    const item = colorable()
+    selection.items = [item]
+    const { colorOptions, applyColor } = useNodeCustomization()
+    const named = colorOptions.at(-1)!
+
+    applyColor(named)
+
+    expect(item.setColorOption).toHaveBeenCalledTimes(1)
+    expect(item.setColorOption.mock.calls[0][0]).not.toBeNull()
+  })
+
+  it('skips non-colorable items when applying colors', () => {
+    const item = colorable()
+    selection.items = [{}, item]
+
+    useNodeCustomization().applyColor(null)
+
+    expect(item.setColorOption).toHaveBeenCalledWith(null)
+    expect(refreshCanvas).toHaveBeenCalled()
+  })
+
+  it('returns null current color for an empty selection', () => {
+    expect(useNodeCustomization().getCurrentColor()).toBeNull()
+  })
+
+  it('returns null current color when no selected item is colorable', () => {
+    selection.items = [{}]
+    expect(useNodeCustomization().getCurrentColor()).toBeNull()
+  })
+
+  it('reports a recognized current color', () => {
+    const { colorOptions, getCurrentColor } = useNodeCustomization()
+    const named = colorOptions.at(-1)!
+    selection.items = [colorable(named.value.dark)]
+
+    expect(getCurrentColor()?.name).toBe(named.name)
+  })
+
+  it('falls back to the no-color option for an unrecognized current color', () => {
+    selection.items = [colorable('#not-a-known-color')]
+    const result = useNodeCustomization().getCurrentColor()
+    expect(result?.name).toBe('noColor')
+  })
+
+  it('no-ops shape changes when no graph nodes are selected', () => {
+    selection.items = [colorable()]
+    const { applyShape, shapeOptions } = useNodeCustomization()
+    applyShape(shapeOptions[0])
+    expect(refreshCanvas).not.toHaveBeenCalled()
+  })
+
+  it('returns null current shape with no nodes selected', () => {
+    expect(useNodeCustomization().getCurrentShape()).toBeNull()
+  })
+
+  it('applies a shape to selected graph nodes and refreshes', () => {
+    const node = new LGraphNode('Test')
+    selection.items = [node]
+    const { applyShape, shapeOptions } = useNodeCustomization()
+    const target = shapeOptions[0]
+
+    applyShape(target)
+
+    expect(node.shape).toBe(target.value)
+    expect(refreshCanvas).toHaveBeenCalled()
+  })
+
+  it('reports the current shape of a selected node', () => {
+    const node = new LGraphNode('Test')
+    const { shapeOptions, getCurrentShape } = useNodeCustomization()
+    node.shape = shapeOptions[0].value
+    selection.items = [node]
+
+    expect(getCurrentShape()?.value).toBe(shapeOptions[0].value)
+  })
+
+  it('uses the default shape when a selected node has no shape', () => {
+    const node = new LGraphNode('Test')
+    Object.defineProperty(node, 'shape', {
+      value: undefined,
+      writable: true,
+      configurable: true
+    })
+    const { shapeOptions, getCurrentShape } = useNodeCustomization()
+    selection.items = [node]
+
+    expect(getCurrentShape()?.value).toBe(shapeOptions[0].value)
+  })
+
+  it('falls back to the default shape for an unknown node shape', () => {
+    const node = new LGraphNode('Test')
+    Object.defineProperty(node, 'shape', {
+      value: 999,
+      writable: true,
+      configurable: true
+    })
+    const { shapeOptions, getCurrentShape } = useNodeCustomization()
+    selection.items = [node]
+
+    expect(getCurrentShape()?.value).toBe(shapeOptions[0].value)
+  })
+})

src/composables/graph/useNodeMenuOptions.test.ts

@@ -10,30 +10,43 @@ import { LGraphEventMode, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { toNodeId } from '@/types/nodeId'
 
-// canvasStore transitively imports the app singleton; stub it so the real
-// ComfyApp module never loads during these unit tests.
+const { actions, customization } = vi.hoisted(() => ({
+  actions: {
+    adjustNodeSize: vi.fn(),
+    toggleNodeCollapse: vi.fn(),
+    toggleNodePin: vi.fn(),
+    toggleNodeBypass: vi.fn(),
+    runBranch: vi.fn()
+  },
+  customization: {
+    shapeOptions: [] as Array<{ localizedName: string; value: string }>,
+    colorOptions: [] as Array<{
+      name: string
+      localizedName: string
+      value: { dark: string; light: string }
+    }>,
+    applyShape: vi.fn(),
+    applyColor: vi.fn(),
+    isLightTheme: { value: false }
+  }
+}))
+
 vi.mock('@/scripts/app', () => ({
   app: { canvas: { selected_nodes: null } }
 }))
 
 vi.mock('@/composables/graph/useNodeCustomization', () => ({
   useNodeCustomization: () => ({
-    shapeOptions: [],
-    applyShape: vi.fn(),
-    applyColor: vi.fn(),
-    colorOptions: [],
-    isLightTheme: { value: false }
+    shapeOptions: customization.shapeOptions,
+    applyShape: customization.applyShape,
+    applyColor: customization.applyColor,
+    colorOptions: customization.colorOptions,
+    isLightTheme: customization.isLightTheme
   })
 }))
 
 vi.mock('@/composables/graph/useSelectedNodeActions', () => ({
-  useSelectedNodeActions: () => ({
-    adjustNodeSize: vi.fn(),
-    toggleNodeCollapse: vi.fn(),
-    toggleNodePin: vi.fn(),
-    toggleNodeBypass: vi.fn(),
-    runBranch: vi.fn()
-  })
+  useSelectedNodeActions: () => actions
 }))
 
 const i18n = createI18n({
@@ -69,9 +82,29 @@ const getBypassLabel = (selected: LGraphNode[]): string => {
   return label
 }
 
-describe('useNodeMenuOptions.getBypassOption', () => {
+function readNodeMenuOptions<T>(
+  read: (options: ReturnType<typeof useNodeMenuOptions>) => T
+): T {
+  const unread = Symbol('unread')
+  const result: { value: T | typeof unread } = { value: unread }
+  const Wrapper = defineComponent({
+    setup() {
+      result.value = read(useNodeMenuOptions())
+      return () => null
+    }
+  })
+  render(Wrapper, { global: { plugins: [i18n] } })
+  if (result.value === unread) throw new Error('Composable was not read')
+  return result.value
+}
+
+describe('useNodeMenuOptions', () => {
   beforeEach(() => {
+    vi.clearAllMocks()
     setActivePinia(createPinia())
+    customization.shapeOptions = []
+    customization.colorOptions = []
+    customization.isLightTheme.value = false
   })
 
   it('labels as "Bypass" when no node is bypassed', () => {
@@ -97,4 +130,109 @@ describe('useNodeMenuOptions.getBypassOption', () => {
       ])
     ).toBe('contextMenu.Bypass')
   })
+
+  it('labels visual node options from the collapsed state and bumps after action', () => {
+    const expandBump = vi.fn()
+    const expand = readNodeMenuOptions(
+      ({ getNodeVisualOptions }) =>
+        getNodeVisualOptions({ collapsed: true, pinned: false }, expandBump)[0]
+    )
+    expect(expand).toMatchObject({
+      label: 'contextMenu.Expand Node',
+      icon: 'icon-[lucide--maximize-2]'
+    })
+    expand.action?.()
+    expect(actions.toggleNodeCollapse).toHaveBeenCalledTimes(1)
+    expect(expandBump).toHaveBeenCalledTimes(1)
+
+    const minimize = readNodeMenuOptions(
+      ({ getNodeVisualOptions }) =>
+        getNodeVisualOptions({ collapsed: false, pinned: false }, vi.fn())[0]
+    )
+    expect(minimize).toMatchObject({
+      label: 'contextMenu.Minimize Node',
+      icon: 'icon-[lucide--minimize-2]'
+    })
+  })
+
+  it('labels pin options from the pinned state and bumps after action', () => {
+    const bump = vi.fn()
+    const unpin = readNodeMenuOptions(({ getPinOption }) =>
+      getPinOption({ collapsed: false, pinned: true }, bump)
+    )
+    expect(unpin).toMatchObject({
+      label: 'contextMenu.Unpin',
+      icon: 'icon-[lucide--pin-off]'
+    })
+    unpin.action?.()
+    expect(actions.toggleNodePin).toHaveBeenCalledTimes(1)
+    expect(bump).toHaveBeenCalledTimes(1)
+
+    const pin = readNodeMenuOptions(({ getPinOption }) =>
+      getPinOption({ collapsed: false, pinned: false }, vi.fn())
+    )
+    expect(pin).toMatchObject({
+      label: 'contextMenu.Pin',
+      icon: 'icon-[lucide--pin]'
+    })
+  })
+
+  it('builds shape and color submenus and applies selected values', () => {
+    customization.shapeOptions = [{ localizedName: 'Box', value: 'box' }]
+    customization.colorOptions = [
+      {
+        name: 'noColor',
+        localizedName: 'No Color',
+        value: { dark: '#000', light: '#fff' }
+      },
+      {
+        name: 'red',
+        localizedName: 'Red',
+        value: { dark: '#111', light: '#eee' }
+      }
+    ]
+
+    const { visualOptions, colorSubmenu } = readNodeMenuOptions((options) => ({
+      visualOptions: options.getNodeVisualOptions(
+        { collapsed: false, pinned: false },
+        vi.fn()
+      ),
+      colorSubmenu: options.colorSubmenu.value
+    }))
+
+    expect(visualOptions[1].submenu).toEqual([
+      expect.objectContaining({ label: 'Box' })
+    ])
+    visualOptions[1].submenu?.[0].action()
+    expect(customization.applyShape).toHaveBeenCalledWith(
+      customization.shapeOptions[0]
+    )
+
+    expect(colorSubmenu).toEqual([
+      expect.objectContaining({ label: 'No Color', color: '#000' }),
+      expect.objectContaining({ label: 'Red', color: '#111' })
+    ])
+    colorSubmenu[0].action()
+    colorSubmenu[1].action()
+    expect(customization.applyColor).toHaveBeenNthCalledWith(1, null)
+    expect(customization.applyColor).toHaveBeenNthCalledWith(
+      2,
+      customization.colorOptions[1]
+    )
+  })
+
+  it('uses light-theme colors for the color submenu', () => {
+    customization.isLightTheme.value = true
+    customization.colorOptions = [
+      {
+        name: 'red',
+        localizedName: 'Red',
+        value: { dark: '#111', light: '#eee' }
+      }
+    ]
+
+    expect(
+      readNodeMenuOptions((options) => options.colorSubmenu.value[0].color)
+    ).toBe('#eee')
+  })
 })

src/composables/graph/useSelectionOperations.test.ts

@@ -0,0 +1,238 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useSelectionOperations } from '@/composables/graph/useSelectionOperations'
+
+const {
+  canvas,
+  toastAdd,
+  captureCanvasState,
+  updateSelectedItems,
+  prompt,
+  titleEditor,
+  store
+} = vi.hoisted(() => ({
+  canvas: {
+    selectedItems: new Set<unknown>(),
+    copyToClipboard: vi.fn(),
+    pasteFromClipboard: vi.fn(),
+    deleteSelected: vi.fn(),
+    setDirty: vi.fn()
+  },
+  toastAdd: vi.fn(),
+  captureCanvasState: vi.fn(),
+  updateSelectedItems: vi.fn(),
+  prompt: vi.fn(),
+  titleEditor: { titleEditorTarget: null as unknown },
+  store: { selectedItems: [] as unknown[] }
+}))
+
+vi.mock('@/scripts/app', () => ({ app: { canvas } }))
+vi.mock('@/i18n', () => ({ t: (key: string) => key }))
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: () => ({ add: toastAdd })
+}))
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: () => ({
+    activeWorkflow: { changeTracker: { captureCanvasState } }
+  })
+}))
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({
+    updateSelectedItems,
+    get selectedItems() {
+      return store.selectedItems
+    }
+  }),
+  useTitleEditorStore: () => titleEditor
+}))
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({ prompt })
+}))
+
+beforeEach(() => {
+  canvas.selectedItems = new Set()
+  canvas.copyToClipboard.mockReset()
+  canvas.pasteFromClipboard.mockReset()
+  canvas.deleteSelected.mockReset()
+  canvas.setDirty.mockReset()
+  toastAdd.mockReset()
+  captureCanvasState.mockReset()
+  updateSelectedItems.mockReset()
+  prompt.mockReset()
+  titleEditor.titleEditorTarget = null
+  store.selectedItems = []
+})
+
+describe('useSelectionOperations', () => {
+  it('warns and does nothing when copying an empty selection', () => {
+    useSelectionOperations().copySelection()
+    expect(canvas.copyToClipboard).not.toHaveBeenCalled()
+    expect(toastAdd).toHaveBeenCalledWith({
+      severity: 'warn',
+      summary: 'g.nothingToCopy',
+      detail: 'g.selectItemsToCopy',
+      life: 3000
+    })
+  })
+
+  it('copies a non-empty selection and reports success', () => {
+    canvas.selectedItems = new Set(['a'])
+    useSelectionOperations().copySelection()
+    expect(canvas.copyToClipboard).toHaveBeenCalled()
+    expect(toastAdd).toHaveBeenCalledWith({
+      severity: 'success',
+      summary: 'g.copied',
+      detail: 'g.itemsCopiedToClipboard',
+      life: 2000
+    })
+  })
+
+  it('pastes from clipboard and captures canvas state', () => {
+    useSelectionOperations().pasteSelection()
+    expect(canvas.pasteFromClipboard).toHaveBeenCalledWith({
+      connectInputs: false
+    })
+    expect(captureCanvasState).toHaveBeenCalled()
+  })
+
+  it('duplicates by copy, clear, paste', () => {
+    canvas.selectedItems = new Set(['a'])
+    useSelectionOperations().duplicateSelection()
+    expect(canvas.copyToClipboard).toHaveBeenCalled()
+    expect(canvas.selectedItems.size).toBe(0)
+    expect(updateSelectedItems).toHaveBeenCalled()
+    expect(canvas.pasteFromClipboard).toHaveBeenCalledWith({
+      connectInputs: false
+    })
+    expect(captureCanvasState).toHaveBeenCalled()
+  })
+
+  it('warns when duplicating nothing', () => {
+    useSelectionOperations().duplicateSelection()
+    expect(canvas.copyToClipboard).not.toHaveBeenCalled()
+    expect(toastAdd).toHaveBeenCalledWith({
+      severity: 'warn',
+      summary: 'g.nothingToDuplicate',
+      detail: 'g.selectItemsToDuplicate',
+      life: 3000
+    })
+  })
+
+  it('deletes a non-empty selection and marks the canvas dirty', () => {
+    canvas.selectedItems = new Set(['a'])
+    useSelectionOperations().deleteSelection()
+    expect(canvas.deleteSelected).toHaveBeenCalled()
+    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
+    expect(captureCanvasState).toHaveBeenCalled()
+  })
+
+  it('warns when deleting nothing', () => {
+    useSelectionOperations().deleteSelection()
+    expect(canvas.deleteSelected).not.toHaveBeenCalled()
+    expect(toastAdd).toHaveBeenCalledWith({
+      severity: 'warn',
+      summary: 'g.nothingToDelete',
+      detail: 'g.selectItemsToDelete',
+      life: 3000
+    })
+  })
+
+  it('routes a single node rename to the title editor', async () => {
+    const node = new LGraphNode('Test')
+    store.selectedItems = [node]
+
+    await useSelectionOperations().renameSelection()
+
+    expect(titleEditor.titleEditorTarget).toBe(node)
+    expect(prompt).not.toHaveBeenCalled()
+  })
+
+  it('renames a single non-node item via the prompt dialog', async () => {
+    const group = { title: 'Old' }
+    store.selectedItems = [group]
+    prompt.mockResolvedValue('New')
+
+    await useSelectionOperations().renameSelection()
+
+    expect(group.title).toBe('New')
+    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
+    expect(captureCanvasState).toHaveBeenCalled()
+  })
+
+  it('leaves a single titled item unchanged when the prompt returns the same title', async () => {
+    const group = { title: 'Old' }
+    store.selectedItems = [group]
+    prompt.mockResolvedValue('Old')
+
+    await useSelectionOperations().renameSelection()
+
+    expect(group.title).toBe('Old')
+    expect(canvas.setDirty).not.toHaveBeenCalled()
+    expect(captureCanvasState).not.toHaveBeenCalled()
+  })
+
+  it('does not assign a title to a selected item without a title property', async () => {
+    const item = {}
+    store.selectedItems = [item]
+    prompt.mockResolvedValue('New')
+
+    await useSelectionOperations().renameSelection()
+
+    expect(item).toEqual({})
+    expect(canvas.setDirty).not.toHaveBeenCalled()
+    expect(captureCanvasState).not.toHaveBeenCalled()
+  })
+
+  it('batch-renames multiple items with an indexed base name', async () => {
+    const a = { title: 'a' }
+    const b = { title: 'b' }
+    store.selectedItems = [a, b]
+    prompt.mockResolvedValue('Item')
+
+    await useSelectionOperations().renameSelection()
+
+    expect(a.title).toBe('Item 1')
+    expect(b.title).toBe('Item 2')
+    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
+    expect(captureCanvasState).toHaveBeenCalled()
+  })
+
+  it('skips untitled items during batch rename', async () => {
+    const a = { title: 'a' }
+    const b = {}
+    store.selectedItems = [a, b]
+    prompt.mockResolvedValue('Item')
+
+    await useSelectionOperations().renameSelection()
+
+    expect(a.title).toBe('Item 1')
+    expect(b).toEqual({})
+    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
+    expect(captureCanvasState).toHaveBeenCalled()
+  })
+
+  it('leaves a multiple selection unchanged when batch rename is cancelled', async () => {
+    const a = { title: 'a' }
+    const b = { title: 'b' }
+    store.selectedItems = [a, b]
+    prompt.mockResolvedValue('')
+
+    await useSelectionOperations().renameSelection()
+
+    expect(a.title).toBe('a')
+    expect(b.title).toBe('b')
+    expect(canvas.setDirty).not.toHaveBeenCalled()
+    expect(captureCanvasState).not.toHaveBeenCalled()
+  })
+
+  it('warns when renaming an empty selection', async () => {
+    await useSelectionOperations().renameSelection()
+    expect(toastAdd).toHaveBeenCalledWith({
+      severity: 'warn',
+      summary: 'g.nothingToRename',
+      detail: 'g.selectItemsToRename',
+      life: 3000
+    })
+  })
+})

src/composables/graph/useSelectionState.test.ts

@@ -8,7 +8,12 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
+import {
+  isImageNode,
+  isLGraphGroup,
+  isLGraphNode,
+  isLoad3dNode
+} from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
 import {
   createMockLGraphNode,
@@ -17,7 +22,9 @@ import {
 
 vi.mock('@/utils/litegraphUtil', () => ({
   isLGraphNode: vi.fn(),
-  isImageNode: vi.fn()
+  isImageNode: vi.fn(),
+  isLGraphGroup: vi.fn(),
+  isLoad3dNode: vi.fn()
 }))
 
 vi.mock('@/utils/nodeFilterUtil', () => ({
@@ -96,6 +103,16 @@ describe('useSelectionState', () => {
       const typedNode = node as { type?: string }
       return typedNode?.type === 'ImageNode'
     })
+    vi.mocked(isLGraphGroup).mockImplementation((item: unknown) => {
+      const typedItem = item as { isGroup?: boolean }
+      return typedItem?.isGroup === true
+    })
+    vi.mocked(isLoad3dNode).mockImplementation((node: unknown) => {
+      const typedNode = node as { type?: string }
+      return (
+        typedNode?.type === 'Load3D' || typedNode?.type === 'Load3DAnimation'
+      )
+    })
     vi.mocked(filterOutputNodes).mockImplementation((nodes) =>
       nodes.filter((n) => n.type === 'OutputNode')
     )
@@ -135,6 +152,21 @@ describe('useSelectionState', () => {
       const { hasMultipleSelection } = useSelectionState()
       expect(hasMultipleSelection.value).toBe(false)
     })
+
+    test('hasGroupedNodesSelection should detect a group containing nodes', () => {
+      const canvasStore = useCanvasStore()
+      const graphNode = createMockLGraphNode({ id: 2 })
+      const group = createMockPositionable({ id: 2000 })
+      Object.assign(group, {
+        isGroup: true,
+        isNode: false,
+        children: new Set([graphNode])
+      })
+      canvasStore.$state.selectedItems = [group]
+
+      const { hasGroupedNodesSelection } = useSelectionState()
+      expect(hasGroupedNodesSelection.value).toBe(true)
+    })
   })
 
   describe('Node Type Filtering', () => {
@@ -215,6 +247,13 @@ describe('useSelectionState', () => {
       const newIsPinned = newSelectedNodes.value.some((n) => n.pinned === true)
       expect(newIsPinned).toBe(false)
     })
+
+    test('should compute default flags for an empty node selection', () => {
+      expect(useSelectionState().computeSelectionFlags()).toEqual({
+        collapsed: false,
+        pinned: false
+      })
+    })
   })
 
   describe('Node Info', () => {

src/composables/node/useNodePricing.test.ts

@@ -1,4 +1,6 @@
-import { describe, expect, it } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
 
 import { CREDITS_PER_USD, formatCredits } from '@/base/credits/comfyCredits'
 import {
@@ -12,6 +14,7 @@ import {
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { ComfyNodeDef, PriceBadge } from '@/schemas/nodeDefSchema'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { toNodeId } from '@/types/nodeId'
 import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
@@ -123,6 +126,47 @@ function createMockNode(
   })
 }
 
+async function flushMacrotask(): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, 0))
+}
+
+async function resolveDisplayPrice(
+  node: LGraphNode,
+  widgetOverrides?: ReadonlyMap<string, unknown>
+): Promise<string> {
+  const { getNodeDisplayPrice, pricingRevision } = useNodePricing()
+  const startRevision = pricingRevision.value
+
+  // Wait on pricingRevision (bumped when async evaluation settles) instead of a
+  // fixed sleep. A cache hit schedules nothing, so the bounded poll falls through.
+  getNodeDisplayPrice(node, widgetOverrides)
+  for (let attempt = 0; attempt < 50; attempt++) {
+    if (pricingRevision.value !== startRevision) break
+    await flushMacrotask()
+  }
+
+  return getNodeDisplayPrice(node, widgetOverrides)
+}
+
+function createStoredNodeDef(
+  name: string,
+  price_badge?: PriceBadge
+): ComfyNodeDef {
+  return {
+    name,
+    display_name: name,
+    description: '',
+    category: 'test',
+    input: { required: {}, optional: {} },
+    output: [],
+    output_name: [],
+    output_is_list: [],
+    output_node: false,
+    python_module: 'test',
+    price_badge
+  } satisfies ComfyNodeDef
+}
+
 // -----------------------------------------------------------------------------
 // Tests
 // -----------------------------------------------------------------------------
@@ -189,6 +233,32 @@ describe('useNodePricing', () => {
       expect(price).toBe(creditsLabel(0.5))
     })
 
+    it('should parse numeric strings and reject blank or invalid numbers', async () => {
+      const expression =
+        '{"type":"usd","usd": (widgets.count != null) ? widgets.count * 0.01 : 0.20}'
+      const badge = priceBadge(expression, [{ name: 'count', type: 'INT' }])
+
+      const parsedNode = createMockNodeWithPriceBadge(
+        'TestNumericStringNode',
+        badge,
+        [{ name: 'count', value: ' 5 ' }]
+      )
+      const blankNode = createMockNodeWithPriceBadge(
+        'TestBlankNumericStringNode',
+        badge,
+        [{ name: 'count', value: '   ' }]
+      )
+      const invalidNode = createMockNodeWithPriceBadge(
+        'TestInvalidNumericStringNode',
+        badge,
+        [{ name: 'count', value: 'five' }]
+      )
+
+      expect(await resolveDisplayPrice(parsedNode)).toBe(creditsLabel(0.05))
+      expect(await resolveDisplayPrice(blankNode)).toBe(creditsLabel(0.2))
+      expect(await resolveDisplayPrice(invalidNode)).toBe(creditsLabel(0.2))
+    })
+
     it('should handle COMBO widget with numeric value', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNodeWithPriceBadge(
@@ -222,6 +292,19 @@ describe('useNodePricing', () => {
       expect(price).toBe(creditsLabel(0.1))
     })
 
+    it('should preserve boolean combo values', async () => {
+      const node = createMockNodeWithPriceBadge(
+        'TestComboBooleanNode',
+        priceBadge(
+          '(widgets.enabled = false) ? {"type":"usd","usd":0.04} : {"type":"usd","usd":0.08}',
+          [{ name: 'enabled', type: 'COMBO' }]
+        ),
+        [{ name: 'enabled', value: false }]
+      )
+
+      expect(await resolveDisplayPrice(node)).toBe(creditsLabel(0.04))
+    })
+
     it('should handle BOOLEAN widget', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNodeWithPriceBadge(
@@ -238,6 +321,51 @@ describe('useNodePricing', () => {
       expect(price).toBe(creditsLabel(0.1))
     })
 
+    it('should parse BOOLEAN widget string values', async () => {
+      const badge = priceBadge(
+        '{"type":"usd","usd": widgets.premium ? 0.10 : 0.05}',
+        [{ name: 'premium', type: 'BOOLEAN' }]
+      )
+      const enabledNode = createMockNodeWithPriceBadge(
+        'TestBooleanStringTrueNode',
+        badge,
+        [{ name: 'premium', value: ' TRUE ' }]
+      )
+      const disabledNode = createMockNodeWithPriceBadge(
+        'TestBooleanStringFalseNode',
+        badge,
+        [{ name: 'premium', value: 'false' }]
+      )
+
+      expect(await resolveDisplayPrice(enabledNode)).toBe(creditsLabel(0.1))
+      expect(await resolveDisplayPrice(disabledNode)).toBe(creditsLabel(0.05))
+    })
+
+    it('should reject invalid BOOLEAN strings', async () => {
+      const node = createMockNodeWithPriceBadge(
+        'TestInvalidBooleanStringNode',
+        priceBadge(
+          '{"type":"usd","usd": widgets.premium = null ? 0.05 : 0.10}',
+          [{ name: 'premium', type: 'BOOLEAN' }]
+        ),
+        [{ name: 'premium', value: 'sometimes' }]
+      )
+
+      expect(await resolveDisplayPrice(node)).toBe(creditsLabel(0.05))
+    })
+
+    it('should reject object values for numeric widgets', async () => {
+      const node = createMockNodeWithPriceBadge(
+        'TestObjectNumericNode',
+        priceBadge('{"type":"usd","usd": widgets.count = null ? 0.05 : 0.10}', [
+          { name: 'count', type: 'INT' }
+        ]),
+        [{ name: 'count', value: { count: 5 } }]
+      )
+
+      expect(await resolveDisplayPrice(node)).toBe(creditsLabel(0.05))
+    })
+
     it('should handle STRING widget (lowercased)', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNodeWithPriceBadge(
@@ -468,6 +596,42 @@ describe('useNodePricing', () => {
     })
   })
 
+  describe('dependency context', () => {
+    it('should prefer widget overrides over node widget values', async () => {
+      const node = createMockNodeWithPriceBadge(
+        'TestWidgetOverrideNode',
+        priceBadge('{"type":"usd","usd": widgets.count * 0.01}', [
+          { name: 'count', type: 'INT' }
+        ]),
+        [{ name: 'count', value: 2 }]
+      )
+
+      const price = await resolveDisplayPrice(node, new Map([['count', '7']]))
+
+      expect(price).toBe(creditsLabel(0.07))
+    })
+
+    it('should treat missing input group arrays as zero connected inputs', async () => {
+      const node = Object.assign(createMockLGraphNode(), {
+        widgets: [],
+        constructor: {
+          nodeData: {
+            name: 'TestMissingInputGroupArrayNode',
+            api_node: true,
+            price_badge: priceBadge(
+              '{"type":"usd","usd": (inputGroups.images = 0) ? 0.05 : 0.10}',
+              [],
+              [],
+              ['images']
+            )
+          }
+        }
+      })
+
+      expect(await resolveDisplayPrice(node)).toBe(creditsLabel(0.05))
+    })
+  })
+
   describe('edge cases', () => {
     it('should return empty string for non-API nodes', () => {
       const { getNodeDisplayPrice } = useNodePricing()
@@ -595,6 +759,86 @@ describe('useNodePricing', () => {
     })
   })
 
+  describe('node type pricing dependencies', () => {
+    beforeEach(() => {
+      setActivePinia(createTestingPinia({ stubActions: false }))
+    })
+
+    it('returns empty dependency metadata for node types without pricing', () => {
+      const store = useNodeDefStore()
+      store.addNodeDef(createStoredNodeDef('UnpricedNode'))
+      const {
+        getInputGroupPrefixes,
+        getInputNames,
+        getRelevantWidgetNames,
+        hasDynamicPricing
+      } = useNodePricing()
+
+      expect(getRelevantWidgetNames('UnpricedNode')).toEqual([])
+      expect(hasDynamicPricing('UnpricedNode')).toBe(false)
+      expect(getInputGroupPrefixes('UnpricedNode')).toEqual([])
+      expect(getInputNames('UnpricedNode')).toEqual([])
+    })
+
+    it('dedupes dynamic pricing dependencies while preserving order', () => {
+      const store = useNodeDefStore()
+      store.addNodeDef(
+        createStoredNodeDef(
+          'DynamicPricingNode',
+          priceBadge(
+            '{"type":"usd","usd":0.05}',
+            [
+              { name: 'seed', type: 'INT' },
+              { name: 'quality', type: 'COMBO' }
+            ],
+            ['image', 'seed'],
+            ['clips', 'image']
+          )
+        )
+      )
+      const {
+        getInputGroupPrefixes,
+        getInputNames,
+        getRelevantWidgetNames,
+        hasDynamicPricing
+      } = useNodePricing()
+
+      expect(getRelevantWidgetNames('DynamicPricingNode')).toEqual([
+        'seed',
+        'quality',
+        'image',
+        'clips'
+      ])
+      expect(hasDynamicPricing('DynamicPricingNode')).toBe(true)
+      expect(getInputGroupPrefixes('DynamicPricingNode')).toEqual([
+        'clips',
+        'image'
+      ])
+      expect(getInputNames('DynamicPricingNode')).toEqual(['image', 'seed'])
+    })
+
+    it('handles fixed pricing metadata without dependencies', () => {
+      const store = useNodeDefStore()
+      store.addNodeDef(
+        createStoredNodeDef(
+          'FixedPricingNode',
+          priceBadge('{"type":"usd","usd":0.05}')
+        )
+      )
+      const {
+        getInputGroupPrefixes,
+        getInputNames,
+        getRelevantWidgetNames,
+        hasDynamicPricing
+      } = useNodePricing()
+
+      expect(getRelevantWidgetNames('FixedPricingNode')).toEqual([])
+      expect(hasDynamicPricing('FixedPricingNode')).toBe(false)
+      expect(getInputGroupPrefixes('FixedPricingNode')).toEqual([])
+      expect(getInputNames('FixedPricingNode')).toEqual([])
+    })
+  })
+
   describe('reactive revision', () => {
     it('bumps pricingRevision after an async evaluation resolves (Nodes 1.0 mode)', async () => {
       const { getNodeDisplayPrice, pricingRevision } = useNodePricing()
@@ -743,6 +987,24 @@ describe('useNodePricing', () => {
       expect(price).toBe('')
     })
 
+    it('should reuse the cached empty label after runtime failures', async () => {
+      const { getNodeDisplayPrice, pricingRevision } = useNodePricing()
+      const node = createMockNodeWithPriceBadge(
+        'TestCachedRuntimeErrorNode',
+        priceBadge('$lookup(undefined, "key")')
+      )
+
+      expect(await resolveDisplayPrice(node)).toBe('')
+      const revisionAfterFailure = pricingRevision.value
+
+      // A second read of the same signature must reuse the cached empty label
+      // without scheduling another evaluation (no revision bump).
+      expect(getNodeDisplayPrice(node)).toBe('')
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      expect(getNodeDisplayPrice(node)).toBe('')
+      expect(pricingRevision.value).toBe(revisionAfterFailure)
+    })
+
     it('should return empty string for invalid PricingResult type', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNodeWithPriceBadge(
@@ -968,8 +1230,21 @@ describe('formatPricingResult', () => {
       expect(result).toBe('~10.6')
     })
 
+    it('should parse string usd values with default approximate formatting', () => {
+      const result = formatPricingResult(
+        { type: 'usd', usd: '0.05' },
+        { valueOnly: true, defaults: { approximate: true } }
+      )
+      expect(result).toBe('~10.6')
+    })
+
     it('should return empty for null usd', () => {
-      const result = formatPricingResult({ type: 'usd', usd: null as never })
+      const result = formatPricingResult({ type: 'usd', usd: null })
+      expect(result).toBe('')
+    })
+
+    it('should return empty for blank string usd', () => {
+      const result = formatPricingResult({ type: 'usd', usd: '   ' })
       expect(result).toBe('')
     })
   })
@@ -999,6 +1274,14 @@ describe('formatPricingResult', () => {
       )
       expect(result).toBe('10.6')
     })
+
+    it('should parse string range values with default approximate formatting', () => {
+      const result = formatPricingResult(
+        { type: 'range_usd', min_usd: '0.05', max_usd: '0.1' },
+        { valueOnly: true, defaults: { approximate: true } }
+      )
+      expect(result).toBe('~10.6-21.1')
+    })
   })
 
   describe('type: list_usd', () => {
@@ -1017,6 +1300,22 @@ describe('formatPricingResult', () => {
       )
       expect(result).toBe('10.6/21.1')
     })
+
+    it('should return valueOnly format with approximate prefix', () => {
+      const result = formatPricingResult(
+        { type: 'list_usd', usd: [0.05, 0.1] },
+        { valueOnly: true, defaults: { approximate: true } }
+      )
+      expect(result).toBe('~10.6/21.1')
+    })
+
+    it('should return empty when list value is not an array', () => {
+      const result = formatPricingResult({
+        type: 'list_usd',
+        usd: 'not-a-list'
+      })
+      expect(result).toBe('')
+    })
   })
 
   describe('type: text', () => {
@@ -1024,6 +1323,11 @@ describe('formatPricingResult', () => {
       const result = formatPricingResult({ type: 'text', text: 'Free' })
       expect(result).toBe('Free')
     })
+
+    it('should return empty when text is missing', () => {
+      const result = formatPricingResult({ type: 'text' })
+      expect(result).toBe('')
+    })
   })
 
   describe('legacy format', () => {
@@ -1190,6 +1494,29 @@ describe('evaluateNodeDefPricing', () => {
     expect(result).toBe('21.1') // 10 * 0.01 = 0.1 USD = 21.1 credits
   })
 
+  it('should use default value from optional input spec', async () => {
+    const nodeDef = createMockNodeDef({
+      name: 'OptionalDefaultValueNode',
+      price_badge: {
+        engine: 'jsonata',
+        expr: '{"type":"usd","usd": widgets.count * 0.01}',
+        depends_on: {
+          widgets: [{ name: 'count', type: 'INT' }],
+          inputs: [],
+          input_groups: []
+        }
+      },
+      input: {
+        required: {},
+        optional: {
+          count: ['INT', { default: 4 }]
+        }
+      }
+    })
+    const result = await evaluateNodeDefPricing(nodeDef)
+    expect(result).toBe('8.4')
+  })
+
   it('should use first option for COMBO without default', async () => {
     const nodeDef = createMockNodeDef({
       name: 'ComboNode',
@@ -1265,6 +1592,30 @@ describe('evaluateNodeDefPricing', () => {
     expect(result).toBe('10.6')
   })
 
+  it('should handle combo option arrays with primitive values', async () => {
+    const nodeDef = createMockNodeDef({
+      name: 'PrimitiveOptionsNode',
+      price_badge: {
+        engine: 'jsonata',
+        expr: '{"type":"usd","usd": widgets.mode = "fast" ? 0.05 : 0.10}',
+        depends_on: {
+          widgets: [{ name: 'mode', type: 'COMBO' }],
+          inputs: [],
+          input_groups: []
+        }
+      },
+      input: {
+        required: {
+          mode: ['COMBO', { options: ['fast', 'slow'] }]
+        }
+      }
+    })
+
+    const result = await evaluateNodeDefPricing(nodeDef)
+
+    expect(result).toBe('10.6')
+  })
+
   it('should assume inputs disconnected in preview', async () => {
     const nodeDef = createMockNodeDef({
       name: 'InputConnectedNode',

src/composables/useCoreCommands.ts

@@ -503,7 +503,7 @@ export function useCoreCommands(): ComfyCommand[] {
       }) => {
         trackRunButton(metadata)
         if (!isActiveSubscription.value) {
-          showSubscriptionDialog({ reason: 'subscribe_to_run' })
+          showSubscriptionDialog()
           return
         }
 
@@ -526,7 +526,7 @@ export function useCoreCommands(): ComfyCommand[] {
       }) => {
         trackRunButton(metadata)
         if (!isActiveSubscription.value) {
-          showSubscriptionDialog({ reason: 'subscribe_to_run' })
+          showSubscriptionDialog()
           return
         }
 
@@ -548,7 +548,7 @@ export function useCoreCommands(): ComfyCommand[] {
       }) => {
         trackRunButton(metadata)
         if (!isActiveSubscription.value) {
-          showSubscriptionDialog({ reason: 'subscribe_to_run' })
+          showSubscriptionDialog()
           return
         }
 

src/composables/useViewErrorsInGraph.test.ts

@@ -1,105 +0,0 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { LGraph, LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { createMockCanvasRenderingContext2D } from '@/utils/__tests__/litegraphTestUtils'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-
-import { useViewErrorsInGraph } from './useViewErrorsInGraph'
-
-const apiMock = vi.hoisted(() => ({
-  getSettings: vi.fn(),
-  storeSetting: vi.fn(),
-  storeSettings: vi.fn()
-}))
-
-vi.mock('@/scripts/api', () => ({
-  api: apiMock
-}))
-
-const appMock = vi.hoisted(() => ({
-  ui: {
-    settings: {
-      dispatchChange: vi.fn()
-    }
-  },
-  rootGraph: {
-    events: new EventTarget(),
-    nodes: []
-  }
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: appMock
-}))
-
-function createSelectedCanvas() {
-  const graph = new LGraph()
-  const canvasElement = document.createElement('canvas')
-  canvasElement.width = 800
-  canvasElement.height = 600
-  canvasElement.getContext = vi
-    .fn()
-    .mockReturnValue(createMockCanvasRenderingContext2D())
-
-  const canvas = new LGraphCanvas(canvasElement, graph, {
-    skip_events: true,
-    skip_render: true
-  })
-  const node = new LGraphNode('Selected Node')
-  graph.add(node)
-  canvas.selectedItems.add(node)
-  node.selected = true
-
-  return { canvas, node }
-}
-
-describe('useViewErrorsInGraph', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    setActivePinia(createPinia())
-    apiMock.getSettings.mockResolvedValue({})
-    apiMock.storeSetting.mockResolvedValue(undefined)
-    apiMock.storeSettings.mockResolvedValue(undefined)
-  })
-
-  it('opens graph errors and clears app-mode error UI state', () => {
-    const canvasStore = useCanvasStore()
-    const executionErrorStore = useExecutionErrorStore()
-    const rightSidePanelStore = useRightSidePanelStore()
-    const workflowStore = useWorkflowStore()
-    const { canvas, node } = createSelectedCanvas()
-    workflowStore.activeWorkflow = {
-      activeMode: 'app'
-    } as typeof workflowStore.activeWorkflow
-    canvasStore.canvas = canvas
-    canvasStore.selectedItems = [node]
-    executionErrorStore.showErrorOverlay()
-
-    useViewErrorsInGraph().viewErrorsInGraph()
-
-    expect(node.selected).toBe(false)
-    expect(canvasStore.linearMode).toBe(false)
-    expect(canvasStore.selectedItems).toEqual([])
-    expect(rightSidePanelStore.activeTab).toBe('errors')
-    expect(rightSidePanelStore.isOpen).toBe(true)
-    expect(executionErrorStore.isErrorOverlayOpen).toBe(false)
-  })
-
-  it('opens graph errors when the canvas is not initialized', () => {
-    const canvasStore = useCanvasStore()
-    const executionErrorStore = useExecutionErrorStore()
-    const rightSidePanelStore = useRightSidePanelStore()
-    canvasStore.canvas = null
-    executionErrorStore.showErrorOverlay()
-
-    expect(() => useViewErrorsInGraph().viewErrorsInGraph()).not.toThrow()
-
-    expect(rightSidePanelStore.activeTab).toBe('errors')
-    expect(rightSidePanelStore.isOpen).toBe(true)
-    expect(executionErrorStore.isErrorOverlayOpen).toBe(false)
-  })
-})

src/composables/useViewErrorsInGraph.ts

@@ -1,22 +0,0 @@
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-
-export function useViewErrorsInGraph() {
-  const canvasStore = useCanvasStore()
-  const executionErrorStore = useExecutionErrorStore()
-  const rightSidePanelStore = useRightSidePanelStore()
-
-  function viewErrorsInGraph() {
-    canvasStore.linearMode = false
-    if (canvasStore.canvas) {
-      canvasStore.canvas.deselectAll()
-      canvasStore.updateSelectedItems()
-    }
-
-    rightSidePanelStore.openPanel('errors')
-    executionErrorStore.dismissErrorOverlay()
-  }
-
-  return { viewErrorsInGraph }
-}

src/platform/assets/components/UploadModelUpgradeModal.vue

@@ -25,6 +25,6 @@ function handleClose() {
 }
 
 function handleSubscribe() {
-  showSubscriptionDialog({ reason: 'upload_model_upgrade' })
+  showSubscriptionDialog()
 }
 </script>

src/platform/cloud/onboarding/CloudSubscriptionRedirectView.test.ts

@@ -140,10 +140,7 @@ describe('CloudSubscriptionRedirectView', () => {
     expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
       'creator',
       'monthly',
-      {
-        openInNewTab: false,
-        paymentIntentSource: 'deep_link'
-      }
+      false
     )
 
     // Shows loading affordances
@@ -172,10 +169,7 @@ describe('CloudSubscriptionRedirectView', () => {
     expect(mockPerformSubscriptionCheckout).toHaveBeenCalledWith(
       'creator',
       'monthly',
-      {
-        openInNewTab: false,
-        paymentIntentSource: 'deep_link'
-      }
+      false
     )
   })
 
@@ -186,8 +180,7 @@ describe('CloudSubscriptionRedirectView', () => {
     expect(screen.getByText('Subscribe to Team Plan')).toBeInTheDocument()
     expect(mockPerformTeamSubscriptionCheckout).toHaveBeenCalledWith(
       'team_700',
-      'yearly',
-      { paymentIntentSource: 'deep_link' }
+      'yearly'
     )
     // Team never goes through the personal checkout path
     expect(mockPerformSubscriptionCheckout).not.toHaveBeenCalled()

src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue

@@ -94,9 +94,7 @@ const runRedirect = wrapWithErrorHandlingAsync(async () => {
       return
     }
     isTeamCheckout.value = true
-    await performTeamSubscriptionCheckout(stopId, billingCycle, {
-      paymentIntentSource: 'deep_link'
-    })
+    await performTeamSubscriptionCheckout(stopId, billingCycle)
     return
   }
 
@@ -114,10 +112,7 @@ const runRedirect = wrapWithErrorHandlingAsync(async () => {
   if (isActiveSubscription.value) {
     await accessBillingPortal(undefined, false)
   } else {
-    await performSubscriptionCheckout(tierKeyParam, billingCycle, {
-      openInNewTab: false,
-      paymentIntentSource: 'deep_link'
-    })
+    await performSubscriptionCheckout(tierKeyParam, billingCycle, false)
   }
 }, reportError)
 

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

@@ -351,12 +351,12 @@ const handleRefresh = wrapWithErrorHandlingAsync(async () => {
 })
 
 function handleAddCredits() {
-  telemetry?.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
+  telemetry?.trackAddApiCreditButtonClicked()
   void dialogService.showTopUpCreditsDialog()
 }
 
 function handleUpgradeToAddCredits() {
-  showPricingTable({ reason: 'upgrade_to_add_credits' })
+  showPricingTable()
 }
 
 async function handleWindowFocus() {

src/platform/cloud/subscription/components/FreeTierDialogContent.test.ts

@@ -5,8 +5,6 @@ import { render, screen } from '@testing-library/vue'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
-
 import FreeTierDialogContent from './FreeTierDialogContent.vue'
 
 const mockRenewalDate = vi.hoisted(() => ({ value: null as string | null }))
@@ -17,7 +15,7 @@ vi.mock('@/composables/billing/useBillingContext', () => ({
   }))
 }))
 
-function renderComponent(props?: { reason?: PaymentIntentSource }) {
+function renderComponent() {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
@@ -25,7 +23,6 @@ function renderComponent(props?: { reason?: PaymentIntentSource }) {
   })
 
   return render(FreeTierDialogContent, {
-    props,
     global: {
       plugins: [i18n]
     }
@@ -46,18 +43,4 @@ describe('FreeTierDialogContent', () => {
     renderComponent()
     expect(screen.queryByText(/credits refresh on/)).not.toBeInTheDocument()
   })
-
-  it('keeps the generic copy for intent reasons outside the credits variants', () => {
-    mockRenewalDate.value = '2026-07-15T10:00:00Z'
-    renderComponent({ reason: 'subscribe_to_run' })
-    expect(
-      screen.getByText('Your credits refresh on Jul 15, 2026.')
-    ).toBeInTheDocument()
-  })
-
-  it('swaps to the out-of-credits copy without the refresh line', () => {
-    mockRenewalDate.value = '2026-07-15T10:00:00Z'
-    renderComponent({ reason: 'out_of_credits' })
-    expect(screen.queryByText(/credits refresh on/)).not.toBeInTheDocument()
-  })
 })

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

@@ -52,7 +52,7 @@
           </p>
 
           <p
-            v-if="!isCreditsBlockedVariant"
+            v-if="!reason || reason === 'subscription_required'"
             class="m-0 text-sm text-text-secondary"
           >
             {{
@@ -65,7 +65,10 @@
           </p>
 
           <p
-            v-if="!isCreditsBlockedVariant && formattedRenewalDate"
+            v-if="
+              (!reason || reason === 'subscription_required') &&
+              formattedRenewalDate
+            "
             class="m-0 text-sm text-text-secondary"
           >
             {{
@@ -85,7 +88,7 @@
           @click="$emit('upgrade')"
         >
           {{
-            isCreditsBlockedVariant
+            reason === 'out_of_credits' || reason === 'top_up_blocked'
               ? $t('subscription.freeTier.upgradeCta')
               : $t('subscription.freeTier.subscribeCta')
           }}
@@ -100,12 +103,12 @@ import { computed } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { getTierCredits } from '@/platform/cloud/subscription/constants/tierPricing'
 
-const { reason } = defineProps<{
-  reason?: PaymentIntentSource
+defineProps<{
+  reason?: SubscriptionDialogReason
 }>()
 
 defineEmits<{
@@ -126,10 +129,4 @@ const formattedRenewalDate = computed(() => {
 })
 
 const freeTierCredits = computed(() => getTierCredits('free'))
-
-// Only these two variants replace the generic free-tier copy; any other
-// intent reason (subscribe_to_run, deep_link, ...) keeps the default pitch.
-const isCreditsBlockedVariant = computed(
-  () => reason === 'out_of_credits' || reason === 'top_up_blocked'
-)
 </script>

src/platform/cloud/subscription/components/PricingTable.test.ts

@@ -261,7 +261,6 @@ describe('PricingTable', () => {
         tier: 'creator',
         cycle: 'yearly',
         checkout_type: 'change',
-        checkout_attempt_id: expect.any(String),
         previous_tier: 'standard'
       })
       expect(mockAccessBillingPortal).toHaveBeenCalledWith('creator-yearly')
@@ -342,7 +341,6 @@ describe('PricingTable', () => {
       expect(
         window.localStorage.getItem(PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY)
       ).toBeNull()
-      expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
     })
 
     it('should use the latest userId value when it changes after mount', async () => {
@@ -368,7 +366,6 @@ describe('PricingTable', () => {
         tier: 'creator',
         cycle: 'yearly',
         checkout_type: 'change',
-        checkout_attempt_id: expect.any(String),
         previous_tier: 'standard'
       })
     })

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

@@ -277,19 +277,13 @@ import type {
   TierKey,
   TierPricing
 } from '@/platform/cloud/subscription/constants/tierPricing'
-import {
-  recordPendingSubscriptionCheckoutAttempt,
-  withPendingCheckoutAttemptId
-} from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
+import { recordPendingSubscriptionCheckoutAttempt } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 import { performSubscriptionCheckout } from '@/platform/cloud/subscription/utils/subscriptionCheckoutUtil'
 import { isPlanDowngrade } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
-import type {
-  CheckoutAttributionMetadata,
-  PaymentIntentSource
-} from '@/platform/telemetry/types'
+import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
 import { useAuthStore } from '@/stores/authStore'
 
 type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
@@ -327,10 +321,6 @@ interface PricingTierConfig {
   isPopular?: boolean
 }
 
-const { reason } = defineProps<{
-  reason?: PaymentIntentSource
-}>()
-
 const emit = defineEmits<{
   chooseTeamWorkspace: []
 }>()
@@ -473,17 +463,16 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
         } as const
         const previousPlan = currentPlanDescriptor.value
         const checkoutAttribution = await getCheckoutAttributionForCloud()
-        const beginCheckoutMetadata = userId.value
-          ? {
-              user_id: userId.value,
-              tier: targetPlan.tierKey,
-              cycle: targetPlan.billingCycle,
-              checkout_type: 'change' as const,
-              ...(reason ? { payment_intent_source: reason } : {}),
-              ...checkoutAttribution,
-              ...(previousPlan ? { previous_tier: previousPlan.tierKey } : {})
-            }
-          : null
+        if (userId.value) {
+          telemetry?.trackBeginCheckout({
+            user_id: userId.value,
+            tier: targetPlan.tierKey,
+            cycle: targetPlan.billingCycle,
+            checkout_type: 'change',
+            ...checkoutAttribution,
+            ...(previousPlan ? { previous_tier: previousPlan.tierKey } : {})
+          })
+        }
         // Pass the target tier to create a deep link to subscription update confirmation
         const checkoutTier = getCheckoutTier(
           targetPlan.tierKey,
@@ -498,39 +487,29 @@ const handleSubscribe = wrapWithErrorHandlingAsync(
 
         if (downgrade) {
           // TODO(COMFY-StripeProration): Remove once backend checkout creation mirrors portal proration ("change at billing end")
-          const didOpenPortal = await accessBillingPortal()
-          if (didOpenPortal && beginCheckoutMetadata) {
-            telemetry?.trackBeginCheckout(beginCheckoutMetadata)
-          }
+          await accessBillingPortal()
         } else {
           const didOpenPortal = await accessBillingPortal(checkoutTier)
           if (!didOpenPortal) {
             return
           }
 
-          const pendingAttempt = recordPendingSubscriptionCheckoutAttempt({
+          recordPendingSubscriptionCheckoutAttempt({
             tier: targetPlan.tierKey,
             cycle: targetPlan.billingCycle,
             checkout_type: 'change',
-            payment_intent_source: reason,
             ...(previousPlan ? { previous_tier: previousPlan.tierKey } : {}),
             ...(previousPlan
               ? { previous_cycle: previousPlan.billingCycle }
               : {})
           })
-          if (beginCheckoutMetadata) {
-            telemetry?.trackBeginCheckout(
-              withPendingCheckoutAttemptId(
-                beginCheckoutMetadata,
-                pendingAttempt
-              )
-            )
-          }
         }
       } else {
-        await performSubscriptionCheckout(tierKey, currentBillingCycle.value, {
-          paymentIntentSource: reason
-        })
+        await performSubscriptionCheckout(
+          tierKey,
+          currentBillingCycle.value,
+          true
+        )
       }
     } finally {
       isLoading.value = false

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

@@ -56,7 +56,7 @@ const handleSubscribe = () => {
     current_tier: tier.value?.toLowerCase()
   })
   isAwaitingStripeSubscription.value = true
-  showSubscriptionDialog({ reason: 'subscribe_now_button' })
+  showSubscriptionDialog()
 }
 
 onBeforeUnmount(() => {

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

@@ -54,6 +54,6 @@ function handleSubscribeToRun() {
     trackRunButton({ subscribe_to_run: true })
   }
 
-  showSubscriptionDialog({ reason: 'subscribe_to_run' })
+  showSubscriptionDialog()
 }
 </script>

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

@@ -48,9 +48,7 @@
             v-if="isActiveSubscription"
             variant="primary"
             class="rounded-lg px-4 py-2 text-sm font-normal text-text-primary"
-            @click="
-              showSubscriptionDialog({ reason: 'settings_billing_panel' })
-            "
+            @click="showSubscriptionDialog"
           >
             {{ $t('subscription.upgradePlan') }}
           </Button>

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

@@ -33,11 +33,7 @@
       </i18n-t>
     </div>
 
-    <PricingTable
-      :reason
-      class="flex-1"
-      @choose-team-workspace="handleChooseTeam"
-    />
+    <PricingTable class="flex-1" @choose-team-workspace="handleChooseTeam" />
 
     <!-- Contact and Enterprise Links -->
     <div class="flex flex-col items-center gap-2">
@@ -161,11 +157,11 @@ import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 
 const { onClose, reason, onChooseTeam } = defineProps<{
   onClose: () => void
-  reason?: PaymentIntentSource
+  reason?: SubscriptionDialogReason
   onChooseTeam?: () => void
 }>()
 

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

@@ -24,9 +24,7 @@ export function useAccountPreconditionDialog() {
         )
         return
       case 'subscription':
-        void dialogService.showSubscriptionRequiredDialog({
-          reason: 'subscription_required'
-        })
+        void dialogService.showSubscriptionRequiredDialog()
         return
       case 'credits':
         void dialogService.showTopUpCreditsDialog({

src/platform/cloud/subscription/composables/usePricingTableUrlLoader.test.ts

@@ -55,6 +55,12 @@ vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
   })
 }))
 
+const mockTrackSubscription = vi.hoisted(() => vi.fn())
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackSubscription: mockTrackSubscription })
+}))
+
 describe('usePricingTableUrlLoader', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -90,6 +96,9 @@ describe('usePricingTableUrlLoader', () => {
       reason: 'deep_link',
       planMode: undefined
     })
+    expect(mockTrackSubscription).toHaveBeenCalledWith('modal_opened', {
+      reason: 'deep_link'
+    })
     expect(mockRouterReplace).toHaveBeenCalledWith({ query: {} })
   })
 
@@ -141,6 +150,7 @@ describe('usePricingTableUrlLoader', () => {
     await loadPricingTableFromUrl()
 
     expect(mockShowPricingTable).not.toHaveBeenCalled()
+    expect(mockTrackSubscription).not.toHaveBeenCalled()
   })
 
   it('denies, strips, and clears together when the user is not eligible', async () => {
@@ -151,6 +161,7 @@ describe('usePricingTableUrlLoader', () => {
     await loadPricingTableFromUrl()
 
     expect(mockShowPricingTable).not.toHaveBeenCalled()
+    expect(mockTrackSubscription).not.toHaveBeenCalled()
     expect(mockRouterReplace).toHaveBeenCalledWith({
       query: { other: 'param' }
     })
@@ -219,6 +230,7 @@ describe('usePricingTableUrlLoader', () => {
     )
 
     expect(mockShowPricingTable).not.toHaveBeenCalled()
+    expect(mockTrackSubscription).not.toHaveBeenCalled()
     expect(mockRouterReplace).toHaveBeenCalledWith({ query: {} })
     expect(preservedQueryMocks.clearPreservedQuery).toHaveBeenCalledWith(
       'pricing'

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

@@ -7,6 +7,7 @@ import {
   mergePreservedQueryIntoQuery
 } from '@/platform/navigation/preservedQueryManager'
 import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
+import { useTelemetry } from '@/platform/telemetry'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 
@@ -61,6 +62,7 @@ export function usePricingTableUrlLoader() {
     const planMode =
       param === 'team' || param === 'personal' ? param : undefined
 
+    useTelemetry()?.trackSubscription('modal_opened', { reason: 'deep_link' })
     subscriptionDialog.showPricingTable({ reason: 'deep_link', planMode })
   }
 

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

@@ -15,7 +15,7 @@ import { t } from '@/i18n'
 import { fetchWithUnifiedRemint } from '@/platform/auth/unified/remintRetry'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
-import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
 import { AuthStoreError, useAuthStore } from '@/stores/authStore'
 import { useDialogService } from '@/services/dialogService'
@@ -237,7 +237,14 @@ function useSubscriptionInternal() {
     })
   }, reportError)
 
-  const showSubscriptionDialog = (options?: SubscriptionDialogOptions) => {
+  const showSubscriptionDialog = (options?: {
+    reason?: SubscriptionDialogReason
+  }) => {
+    useTelemetry()?.trackSubscription('modal_opened', {
+      current_tier: subscriptionTier.value?.toLowerCase(),
+      reason: options?.reason
+    })
+
     void showSubscriptionRequiredDialog(options)
   }
 
@@ -270,7 +277,7 @@ function useSubscriptionInternal() {
     await fetchSubscriptionStatus()
 
     if (!isSubscribedOrIsNotCloud.value) {
-      showSubscriptionDialog({ reason: 'subscription_required' })
+      showSubscriptionDialog()
     }
   }
 

src/platform/cloud/subscription/composables/useSubscriptionActions.test.ts

@@ -39,23 +39,15 @@ vi.mock('@/stores/commandStore', () => ({
 }))
 
 // useTelemetry() returns null in OSS, a dispatcher in cloud — toggle via mockIsCloud.
-const {
-  mockIsCloud,
-  mockTrackHelpResourceClicked,
-  mockTrackAddApiCreditButtonClicked
-} = vi.hoisted(() => ({
+const { mockIsCloud, mockTrackHelpResourceClicked } = vi.hoisted(() => ({
   mockIsCloud: { value: true },
-  mockTrackHelpResourceClicked: vi.fn(),
-  mockTrackAddApiCreditButtonClicked: vi.fn()
+  mockTrackHelpResourceClicked: vi.fn()
 }))
 
 vi.mock('@/platform/telemetry', () => ({
   useTelemetry: () =>
     mockIsCloud.value
-      ? {
-          trackHelpResourceClicked: mockTrackHelpResourceClicked,
-          trackAddApiCreditButtonClicked: mockTrackAddApiCreditButtonClicked
-        }
+      ? { trackHelpResourceClicked: mockTrackHelpResourceClicked }
       : null
 }))
 
@@ -77,9 +69,6 @@ describe('useSubscriptionActions', () => {
       const { handleAddApiCredits } = useSubscriptionActions()
       handleAddApiCredits()
       expect(mockShowTopUpCreditsDialog).toHaveBeenCalledOnce()
-      expect(mockTrackAddApiCreditButtonClicked).toHaveBeenCalledWith({
-        source: 'settings_billing_panel'
-      })
     })
   })
 

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

@@ -21,9 +21,6 @@ export function useSubscriptionActions() {
   })
 
   const handleAddApiCredits = () => {
-    telemetry?.trackAddApiCreditButtonClicked({
-      source: 'settings_billing_panel'
-    })
     void dialogService.showTopUpCreditsDialog()
   }
 

src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts

@@ -5,10 +5,8 @@ import { useSubscriptionDialog } from './useSubscriptionDialog'
 const mockCloseDialog = vi.fn()
 const mockShowLayoutDialog = vi.fn()
 const mockShowTeamWorkspacesDialog = vi.fn()
-const mockTrackSubscription = vi.hoisted(() => vi.fn())
 const mockIsInPersonalWorkspace = vi.hoisted(() => ({ value: true }))
 const mockIsFreeTier = vi.hoisted(() => ({ value: false }))
-const mockTier = vi.hoisted(() => ({ value: 'FREE' as string | null }))
 const mockTeamWorkspacesEnabled = vi.hoisted(() => ({ value: false }))
 const mockIsCloud = vi.hoisted(() => ({ value: true }))
 const mockIsLegacyTeamPlan = vi.hoisted(() => ({ value: false }))
@@ -62,15 +60,10 @@ vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
     isFreeTier: mockIsFreeTier,
-    isLegacyTeamPlan: mockIsLegacyTeamPlan,
-    tier: mockTier
+    isLegacyTeamPlan: mockIsLegacyTeamPlan
   })
 }))
 
-vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({ trackSubscription: mockTrackSubscription })
-}))
-
 vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({
   useWorkspaceUI: () => ({
     permissions: {
@@ -87,7 +80,6 @@ describe('useSubscriptionDialog', () => {
     mockIsCloud.value = true
     mockIsInPersonalWorkspace.value = true
     mockIsFreeTier.value = false
-    mockTier.value = 'FREE'
     mockTeamWorkspacesEnabled.value = false
     mockIsLegacyTeamPlan.value = false
     mockCanManageSubscription.value = true
@@ -206,51 +198,6 @@ describe('useSubscriptionDialog', () => {
       const props = mockShowLayoutDialog.mock.calls[0][0].props
       expect(props.initialPlanMode).toBe('team')
     })
-
-    it('tracks modal_opened with the caller reason and current tier', () => {
-      mockTier.value = 'STANDARD'
-      const { showPricingTable } = useSubscriptionDialog()
-
-      showPricingTable({ reason: 'upgrade_to_add_credits' })
-
-      expect(mockTrackSubscription).toHaveBeenCalledWith('modal_opened', {
-        current_tier: 'standard',
-        reason: 'upgrade_to_add_credits'
-      })
-    })
-
-    it('tracks modal_opened on the workspace (unified) path too', () => {
-      mockTeamWorkspacesEnabled.value = true
-      const { showPricingTable } = useSubscriptionDialog()
-
-      showPricingTable({ reason: 'subscribe_to_run' })
-
-      expect(mockTrackSubscription).toHaveBeenCalledWith(
-        'modal_opened',
-        expect.objectContaining({ reason: 'subscribe_to_run' })
-      )
-    })
-
-    it('does not track modal_opened for the inactive member dialog', () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockIsInPersonalWorkspace.value = false
-      mockCanManageSubscription.value = false
-      const { showPricingTable } = useSubscriptionDialog()
-
-      showPricingTable({ reason: 'subscribe_to_run' })
-
-      expect(mockShowLayoutDialog).toHaveBeenCalledTimes(1)
-      expect(mockTrackSubscription).not.toHaveBeenCalled()
-    })
-
-    it('does not track on non-cloud', () => {
-      mockIsCloud.value = false
-      const { showPricingTable } = useSubscriptionDialog()
-
-      showPricingTable({ reason: 'subscribe_to_run' })
-
-      expect(mockTrackSubscription).not.toHaveBeenCalled()
-    })
   })
 
   describe('show', () => {
@@ -288,20 +235,6 @@ describe('useSubscriptionDialog', () => {
         expect.objectContaining({ key: 'subscription-required' })
       )
     })
-
-    it('tracks modal_opened with the reason for the free-tier dialog', () => {
-      mockIsFreeTier.value = true
-      mockIsInPersonalWorkspace.value = true
-      const { show } = useSubscriptionDialog()
-
-      show({ reason: 'out_of_credits' })
-
-      expect(mockTrackSubscription).toHaveBeenCalledTimes(1)
-      expect(mockTrackSubscription).toHaveBeenCalledWith(
-        'modal_opened',
-        expect.objectContaining({ reason: 'out_of_credits' })
-      )
-    })
   })
 
   describe('startTeamWorkspaceUpgradeFlow', () => {

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

@@ -4,8 +4,6 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
-import { useTelemetry } from '@/platform/telemetry'
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 
@@ -13,8 +11,14 @@ const DIALOG_KEY = 'subscription-required'
 const FREE_TIER_DIALOG_KEY = 'free-tier-info'
 const RESUME_PRICING_KEY = 'comfy:resume-team-pricing'
 
-export interface SubscriptionDialogOptions {
-  reason?: PaymentIntentSource
+export type SubscriptionDialogReason =
+  | 'subscription_required'
+  | 'out_of_credits'
+  | 'top_up_blocked'
+  | 'deep_link'
+
+interface SubscriptionDialogOptions {
+  reason?: SubscriptionDialogReason
   /**
    * Forces the unified pricing dialog to open on a specific plan tab,
    * overriding the workspace-derived default (e.g. an "Upgrade to Team" CTA
@@ -34,17 +38,6 @@ export const useSubscriptionDialog = () => {
     dialogStore.closeDialog({ key: FREE_TIER_DIALOG_KEY })
   }
 
-  // Fired here — the choke point every paywall/pricing dialog variant passes
-  // through — so both the legacy and workspace billing paths emit it.
-  function trackModalOpened(reason?: PaymentIntentSource) {
-    // Resolved lazily to avoid the useBillingContext import cycle (see below).
-    const { tier } = useBillingContext()
-    useTelemetry()?.trackSubscription('modal_opened', {
-      current_tier: tier.value?.toLowerCase(),
-      reason
-    })
-  }
-
   function showPricingTable(options?: SubscriptionDialogOptions) {
     if (!isCloud) return
 
@@ -78,8 +71,6 @@ export const useSubscriptionDialog = () => {
       return
     }
 
-    trackModalOpened(options?.reason)
-
     // Shared dialog shell styling for both variants.
     const dialogComponentProps = {
       style: 'width: min(1328px, 95vw); max-height: 958px;',
@@ -176,8 +167,6 @@ export const useSubscriptionDialog = () => {
     // (not at composable setup) to avoid the useBillingContext import cycle.
     const { isFreeTier } = useBillingContext()
     if (isFreeTier.value && workspaceStore.isInPersonalWorkspace) {
-      trackModalOpened(options?.reason)
-
       const component = defineAsyncComponent(
         () =>
           import('@/platform/cloud/subscription/components/FreeTierDialogContent.vue')
@@ -247,7 +236,7 @@ export const useSubscriptionDialog = () => {
       sessionStorage.removeItem(RESUME_PRICING_KEY)
 
       if (!workspaceStore.isInPersonalWorkspace) {
-        showPricingTable({ reason: 'team_upgrade_resume' })
+        showPricingTable()
       }
     } catch {
       // sessionStorage may be unavailable

src/platform/cloud/subscription/utils/subscriptionCheckoutTracker.test.ts

@@ -1,49 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import {
-  clearPendingSubscriptionCheckoutAttempt,
-  consumePendingSubscriptionCheckoutSuccess,
-  recordPendingSubscriptionCheckoutAttempt
-} from './subscriptionCheckoutTracker'
-
-const activeProStatus = {
-  is_active: true,
-  subscription_tier: 'PRO',
-  subscription_duration: 'MONTHLY'
-} as const
-
-describe('subscriptionCheckoutTracker', () => {
-  beforeEach(() => {
-    clearPendingSubscriptionCheckoutAttempt()
-  })
-
-  it('round-trips payment_intent_source from attempt to success metadata', () => {
-    recordPendingSubscriptionCheckoutAttempt({
-      tier: 'pro',
-      cycle: 'monthly',
-      checkout_type: 'new',
-      payment_intent_source: 'subscribe_to_run'
-    })
-
-    const metadata = consumePendingSubscriptionCheckoutSuccess(activeProStatus)
-
-    expect(metadata).toMatchObject({
-      tier: 'pro',
-      checkout_type: 'new',
-      payment_intent_source: 'subscribe_to_run'
-    })
-  })
-
-  it('omits payment_intent_source when the attempt had none', () => {
-    recordPendingSubscriptionCheckoutAttempt({
-      tier: 'pro',
-      cycle: 'monthly',
-      checkout_type: 'new'
-    })
-
-    const metadata = consumePendingSubscriptionCheckoutSuccess(activeProStatus)
-
-    expect(metadata).not.toBeNull()
-    expect(metadata).not.toHaveProperty('payment_intent_source')
-  })
-})

src/platform/cloud/subscription/utils/subscriptionCheckoutTracker.ts

@@ -7,12 +7,7 @@ import type {
   TierKey
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
-import type {
-  BeginCheckoutMetadata,
-  PaymentIntentSource,
-  SubscriptionCheckoutType,
-  SubscriptionSuccessMetadata
-} from '@/platform/telemetry/types'
+import type { SubscriptionSuccessMetadata } from '@/platform/telemetry/types'
 
 const PENDING_SUBSCRIPTION_CHECKOUT_MAX_AGE_MS = 6 * 60 * 60 * 1000
 const VALID_TIER_KEYS = new Set<TierKey>([
@@ -28,6 +23,7 @@ export const PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY =
 export const PENDING_SUBSCRIPTION_CHECKOUT_EVENT =
   'comfy:subscription-checkout-attempt-changed'
 
+type CheckoutType = 'new' | 'change'
 type SubscriptionDuration = 'MONTHLY' | 'ANNUAL'
 
 interface SubscriptionStatusSnapshot {
@@ -36,24 +32,22 @@ interface SubscriptionStatusSnapshot {
   subscription_duration?: SubscriptionDuration | null
 }
 
-export interface PendingSubscriptionCheckoutAttempt {
+interface PendingSubscriptionCheckoutAttempt {
   attempt_id: string
   started_at_ms: number
   tier: TierKey
   cycle: BillingCycle
-  checkout_type: SubscriptionCheckoutType
+  checkout_type: CheckoutType
   previous_tier?: TierKey
   previous_cycle?: BillingCycle
-  payment_intent_source?: PaymentIntentSource
 }
 
-interface PendingSubscriptionCheckoutAttemptInput {
+interface RecordPendingSubscriptionCheckoutAttemptInput {
   tier: TierKey
   cycle: BillingCycle
-  checkout_type: SubscriptionCheckoutType
+  checkout_type: CheckoutType
   previous_tier?: TierKey
   previous_cycle?: BillingCycle
-  payment_intent_source?: PaymentIntentSource
 }
 
 const dispatchPendingCheckoutChangeEvent = () => {
@@ -174,9 +168,6 @@ const normalizeAttempt = (
     ...(candidate.previous_cycle === 'monthly' ||
     candidate.previous_cycle === 'yearly'
       ? { previous_cycle: candidate.previous_cycle }
-      : {}),
-    ...(typeof candidate.payment_intent_source === 'string'
-      ? { payment_intent_source: candidate.payment_intent_source }
       : {})
   }
 }
@@ -233,27 +224,20 @@ const getPendingSubscriptionCheckoutAttempt =
 export const hasPendingSubscriptionCheckoutAttempt = (): boolean =>
   getPendingSubscriptionCheckoutAttempt() !== null
 
-export const createPendingSubscriptionCheckoutAttempt = (
-  input: PendingSubscriptionCheckoutAttemptInput
+export const recordPendingSubscriptionCheckoutAttempt = (
+  input: RecordPendingSubscriptionCheckoutAttemptInput
 ): PendingSubscriptionCheckoutAttempt => {
-  return {
+  const storage = getStorage()
+  const attempt: PendingSubscriptionCheckoutAttempt = {
     attempt_id: createAttemptId(),
     started_at_ms: Date.now(),
     tier: input.tier,
     cycle: input.cycle,
     checkout_type: input.checkout_type,
     ...(input.previous_tier ? { previous_tier: input.previous_tier } : {}),
-    ...(input.previous_cycle ? { previous_cycle: input.previous_cycle } : {}),
-    ...(input.payment_intent_source
-      ? { payment_intent_source: input.payment_intent_source }
-      : {})
+    ...(input.previous_cycle ? { previous_cycle: input.previous_cycle } : {})
   }
-}
 
-export const persistPendingSubscriptionCheckoutAttempt = (
-  attempt: PendingSubscriptionCheckoutAttempt
-): PendingSubscriptionCheckoutAttempt => {
-  const storage = getStorage()
   if (!storage) {
     return attempt
   }
@@ -271,21 +255,6 @@ export const persistPendingSubscriptionCheckoutAttempt = (
   return attempt
 }
 
-export const recordPendingSubscriptionCheckoutAttempt = (
-  input: PendingSubscriptionCheckoutAttemptInput
-): PendingSubscriptionCheckoutAttempt =>
-  persistPendingSubscriptionCheckoutAttempt(
-    createPendingSubscriptionCheckoutAttempt(input)
-  )
-
-export const withPendingCheckoutAttemptId = (
-  metadata: BeginCheckoutMetadata,
-  attempt: PendingSubscriptionCheckoutAttempt
-): BeginCheckoutMetadata => ({
-  ...metadata,
-  checkout_attempt_id: attempt.attempt_id
-})
-
 const didAttemptSucceed = (
   attempt: PendingSubscriptionCheckoutAttempt,
   status: SubscriptionStatusSnapshot
@@ -318,9 +287,6 @@ export const consumePendingSubscriptionCheckoutSuccess = (
     cycle: attempt.cycle,
     checkout_type: attempt.checkout_type,
     ...(attempt.previous_tier ? { previous_tier: attempt.previous_tier } : {}),
-    ...(attempt.payment_intent_source
-      ? { payment_intent_source: attempt.payment_intent_source }
-      : {}),
     value,
     currency: 'USD',
     ecommerce: {

src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.test.ts

@@ -132,14 +132,13 @@ describe('performSubscriptionCheckout', () => {
       json: async () => ({ checkout_url: checkoutUrl })
     } as Response)
 
-    await performSubscriptionCheckout('pro', 'yearly')
+    await performSubscriptionCheckout('pro', 'yearly', true)
 
     expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith({
       user_id: 'user-123',
       tier: 'pro',
       cycle: 'yearly',
       checkout_type: 'new',
-      checkout_attempt_id: expect.any(String),
       ga_client_id: 'ga-client-id',
       ga_session_id: 'ga-session-id',
       ga_session_number: 'ga-session-number',
@@ -151,12 +150,6 @@ describe('performSubscriptionCheckout', () => {
       gbraid: 'gbraid-456',
       wbraid: 'wbraid-789'
     })
-    const beginCheckoutMetadata =
-      mockTelemetry.trackBeginCheckout.mock.calls[0][0]
-    const [, storedAttempt] = mockLocalStorage.setItem.mock.calls[0]
-    expect(beginCheckoutMetadata.checkout_attempt_id).toBe(
-      JSON.parse(storedAttempt).attempt_id
-    )
     expect(global.fetch).toHaveBeenCalledWith(
       expect.stringContaining(
         '/customers/cloud-subscription-checkout/pro-yearly'
@@ -193,7 +186,7 @@ describe('performSubscriptionCheckout', () => {
       json: async () => ({ checkout_url: checkoutUrl })
     } as Response)
 
-    await performSubscriptionCheckout('pro', 'monthly')
+    await performSubscriptionCheckout('pro', 'monthly', true)
 
     expect(warnSpy).toHaveBeenCalledWith(
       '[SubscriptionCheckout] Failed to collect checkout attribution',
@@ -210,43 +203,11 @@ describe('performSubscriptionCheckout', () => {
       user_id: 'user-123',
       tier: 'pro',
       cycle: 'monthly',
-      checkout_type: 'new',
-      checkout_attempt_id: expect.any(String)
+      checkout_type: 'new'
     })
     expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
   })
 
-  it('carries the payment intent source into begin_checkout and the pending attempt', async () => {
-    const checkoutUrl = 'https://checkout.stripe.com/test'
-    const openSpy = vi
-      .spyOn(window, 'open')
-      .mockImplementation(() => window as unknown as Window)
-
-    vi.mocked(global.fetch).mockResolvedValue({
-      ok: true,
-      json: async () => ({ checkout_url: checkoutUrl })
-    } as Response)
-
-    await performSubscriptionCheckout('pro', 'monthly', {
-      paymentIntentSource: 'out_of_credits'
-    })
-
-    expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith(
-      expect.objectContaining({ payment_intent_source: 'out_of_credits' })
-    )
-    const beginCheckoutMetadata =
-      mockTelemetry.trackBeginCheckout.mock.calls[0][0]
-    const [, storedAttempt] = mockLocalStorage.setItem.mock.calls[0]
-    const pendingAttempt = JSON.parse(storedAttempt)
-    expect(pendingAttempt).toMatchObject({
-      payment_intent_source: 'out_of_credits'
-    })
-    expect(beginCheckoutMetadata.checkout_attempt_id).toBe(
-      pendingAttempt.attempt_id
-    )
-    openSpy.mockRestore()
-  })
-
   it('uses the latest userId when it changes after checkout starts', async () => {
     const checkoutUrl = 'https://checkout.stripe.com/test'
     const openSpy = vi
@@ -261,7 +222,7 @@ describe('performSubscriptionCheckout', () => {
       json: async () => ({ checkout_url: checkoutUrl })
     } as Response)
 
-    const checkoutPromise = performSubscriptionCheckout('pro', 'yearly')
+    const checkoutPromise = performSubscriptionCheckout('pro', 'yearly', true)
 
     mockUserId.value = 'user-late'
     authHeader.resolve({ Authorization: 'Bearer test-token' })
@@ -274,14 +235,13 @@ describe('performSubscriptionCheckout', () => {
         user_id: 'user-late',
         tier: 'pro',
         cycle: 'yearly',
-        checkout_type: 'new',
-        checkout_attempt_id: expect.any(String)
+        checkout_type: 'new'
       })
     )
     expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
   })
 
-  it('does not persist the pending attempt when the checkout popup is blocked', async () => {
+  it('does not persist a pending attempt when the checkout popup is blocked', async () => {
     const checkoutUrl = 'https://checkout.stripe.com/test'
     const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
 
@@ -290,18 +250,11 @@ describe('performSubscriptionCheckout', () => {
       json: async () => ({ checkout_url: checkoutUrl })
     } as Response)
 
-    await performSubscriptionCheckout('pro', 'monthly')
+    await performSubscriptionCheckout('pro', 'monthly', true)
 
     expect(openSpy).toHaveBeenCalledWith(checkoutUrl, '_blank')
-    const storedAttempt = window.localStorage.getItem(
-      PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY
-    )
-    expect(storedAttempt).toBeNull()
-    expect(mockLocalStorage.setItem).not.toHaveBeenCalled()
-    expect(mockTelemetry.trackBeginCheckout).toHaveBeenCalledWith(
-      expect.objectContaining({
-        checkout_attempt_id: expect.any(String)
-      })
-    )
+    expect(
+      window.localStorage.getItem(PENDING_SUBSCRIPTION_CHECKOUT_STORAGE_KEY)
+    ).toBeNull()
   })
 })

src/platform/cloud/subscription/utils/subscriptionCheckoutUtil.ts

@@ -4,19 +4,12 @@ import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { getComfyApiBaseUrl } from '@/config/comfyApi'
 import { t } from '@/i18n'
 import { fetchWithUnifiedRemint } from '@/platform/auth/unified/remintRetry'
-import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
-import {
-  createPendingSubscriptionCheckoutAttempt,
-  persistPendingSubscriptionCheckoutAttempt,
-  withPendingCheckoutAttemptId
-} from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
-import type {
-  CheckoutAttributionMetadata,
-  PaymentIntentSource
-} from '@/platform/telemetry/types'
 import { AuthStoreError, useAuthStore } from '@/stores/authStore'
+import type { CheckoutAttributionMetadata } from '@/platform/telemetry/types'
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import { recordPendingSubscriptionCheckoutAttempt } from '@/platform/cloud/subscription/utils/subscriptionCheckoutTracker'
 import type { BillingCycle } from './subscriptionTierRank'
 
 type CheckoutTier = TierKey | `${TierKey}-yearly`
@@ -38,11 +31,6 @@ const getCheckoutAttributionForCloud =
     return getCheckoutAttribution()
   }
 
-interface PerformSubscriptionCheckoutOptions {
-  openInNewTab?: boolean
-  paymentIntentSource?: PaymentIntentSource
-}
-
 /**
  * Core subscription checkout logic shared between PricingTable and
  * SubscriptionRedirectView. Handles:
@@ -59,12 +47,10 @@ interface PerformSubscriptionCheckoutOptions {
 export async function performSubscriptionCheckout(
   tierKey: TierKey,
   currentBillingCycle: BillingCycle,
-  options: PerformSubscriptionCheckoutOptions = {}
+  openInNewTab: boolean = true
 ): Promise<void> {
   if (!isCloud) return
 
-  const { openInNewTab = true, paymentIntentSource } = options
-
   const authStore = useAuthStore()
   const { userId } = storeToRefs(authStore)
   const telemetry = useTelemetry()
@@ -122,29 +108,14 @@ export async function performSubscriptionCheckout(
   const data = await response.json()
 
   if (data.checkout_url) {
-    const pendingAttempt = createPendingSubscriptionCheckoutAttempt({
-      tier: tierKey,
-      cycle: currentBillingCycle,
-      checkout_type: 'new',
-      payment_intent_source: paymentIntentSource
-    })
-
     if (userId.value) {
-      telemetry?.trackBeginCheckout(
-        withPendingCheckoutAttemptId(
-          {
-            user_id: userId.value,
-            tier: tierKey,
-            cycle: currentBillingCycle,
-            checkout_type: 'new',
-            ...(paymentIntentSource
-              ? { payment_intent_source: paymentIntentSource }
-              : {}),
-            ...checkoutAttribution
-          },
-          pendingAttempt
-        )
-      )
+      telemetry?.trackBeginCheckout({
+        user_id: userId.value,
+        tier: tierKey,
+        cycle: currentBillingCycle,
+        checkout_type: 'new',
+        ...checkoutAttribution
+      })
     }
 
     if (openInNewTab) {
@@ -152,9 +123,18 @@ export async function performSubscriptionCheckout(
       if (!checkoutWindow) {
         return
       }
-      persistPendingSubscriptionCheckoutAttempt(pendingAttempt)
+
+      recordPendingSubscriptionCheckoutAttempt({
+        tier: tierKey,
+        cycle: currentBillingCycle,
+        checkout_type: 'new'
+      })
     } else {
-      persistPendingSubscriptionCheckoutAttempt(pendingAttempt)
+      recordPendingSubscriptionCheckoutAttempt({
+        tier: tierKey,
+        cycle: currentBillingCycle,
+        checkout_type: 'new'
+      })
       globalThis.location.href = data.checkout_url
     }
   }

src/platform/cloud/subscription/utils/teamSubscriptionCheckoutUtil.test.ts

@@ -1,13 +1,9 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, reactive } from 'vue'
 
-const { mockIsCloud, mockSubscribe, mockTrackBeginCheckout, mockUserId } =
-  vi.hoisted(() => ({
-    mockIsCloud: { value: true },
-    mockSubscribe: vi.fn(),
-    mockTrackBeginCheckout: vi.fn(),
-    mockUserId: { value: 'user-1' as string | null }
-  }))
+const { mockIsCloud, mockSubscribe } = vi.hoisted(() => ({
+  mockIsCloud: { value: true },
+  mockSubscribe: vi.fn()
+}))
 
 vi.mock('@/platform/distribution/types', () => ({
   get isCloud() {
@@ -20,12 +16,6 @@ vi.mock('@/config/comfyApi', () => ({
 vi.mock('@/platform/workspace/api/workspaceApi', () => ({
   workspaceApi: { subscribe: mockSubscribe }
 }))
-vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({ trackBeginCheckout: mockTrackBeginCheckout })
-}))
-vi.mock('@/stores/authStore', () => ({
-  useAuthStore: () => reactive({ userId: computed(() => mockUserId.value) })
-}))
 
 import { performTeamSubscriptionCheckout } from './teamSubscriptionCheckoutUtil'
 
@@ -53,9 +43,7 @@ describe('performTeamSubscriptionCheckout', () => {
       billing_op_id: 'op_1'
     })
 
-    await performTeamSubscriptionCheckout('team_700', 'yearly', {
-      paymentIntentSource: 'deep_link'
-    })
+    await performTeamSubscriptionCheckout('team_700', 'yearly')
 
     expect(mockSubscribe).toHaveBeenCalledWith('team_per_credit_annual', {
       returnUrl: 'https://app.test/payment/success',
@@ -63,14 +51,6 @@ describe('performTeamSubscriptionCheckout', () => {
       teamCreditStopId: 'team_700'
     })
     expect(assignedHref).toBe('https://stripe.test/pay')
-    expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
-      user_id: 'user-1',
-      tier: 'team',
-      cycle: 'yearly',
-      checkout_type: 'new',
-      billing_op_id: 'op_1',
-      payment_intent_source: 'deep_link'
-    })
   })
 
   it('uses the monthly slug and lands in the app when no Stripe step is needed', async () => {
@@ -102,16 +82,6 @@ describe('performTeamSubscriptionCheckout', () => {
     expect(assignedHref).toBeUndefined()
   })
 
-  it('does not track begin_checkout when subscribe fails', async () => {
-    mockSubscribe.mockRejectedValueOnce(new Error('subscribe failed'))
-
-    await expect(
-      performTeamSubscriptionCheckout('team_700', 'yearly')
-    ).rejects.toThrow('subscribe failed')
-
-    expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
-  })
-
   it('does nothing off cloud', async () => {
     mockIsCloud.value = false
 

src/platform/cloud/subscription/utils/teamSubscriptionCheckoutUtil.ts

@@ -1,16 +1,10 @@
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import { getTeamPlanSlug } from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
 import { isCloud } from '@/platform/distribution/types'
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
-import { trackWorkspaceCheckoutStarted } from '@/platform/workspace/utils/workspaceCheckoutTelemetry'
 
 import type { BillingCycle } from './subscriptionTierRank'
 
-interface PerformTeamSubscriptionCheckoutOptions {
-  paymentIntentSource?: PaymentIntentSource
-}
-
 /**
  * Direct team-plan checkout for the marketing `/cloud/subscribe?tier=team` deep
  * link: subscribes to the per-credit Team plan at the chosen slider stop and
@@ -28,8 +22,7 @@ interface PerformTeamSubscriptionCheckoutOptions {
  */
 export async function performTeamSubscriptionCheckout(
   teamCreditStopId: string,
-  billingCycle: BillingCycle,
-  options: PerformTeamSubscriptionCheckoutOptions = {}
+  billingCycle: BillingCycle
 ): Promise<void> {
   if (!isCloud) return
 
@@ -40,14 +33,6 @@ export async function performTeamSubscriptionCheckout(
     teamCreditStopId
   })
 
-  trackWorkspaceCheckoutStarted({
-    tier: 'team',
-    cycle: billingCycle,
-    checkoutType: 'new',
-    billingOpId: response.billing_op_id,
-    paymentIntentSource: options.paymentIntentSource
-  })
-
   if (response.status === 'needs_payment_method') {
     // A needs_payment_method response without a URL is unusable: surface it to
     // the caller's error handling rather than silently dropping the user home

src/platform/settings/components/ColorPaletteMessage.test.ts

@@ -1,176 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import ColorPaletteMessage from './ColorPaletteMessage.vue'
-
-import type * as Pinia from 'pinia'
-
-const testI18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: {} }
-})
-
-const mockSettingStore = vi.hoisted(() => ({
-  set: vi.fn()
-}))
-
-const mockColorPaletteService = vi.hoisted(() => ({
-  exportColorPalette: vi.fn(),
-  importColorPalette: vi.fn(),
-  deleteCustomColorPalette: vi.fn()
-}))
-
-const mockColorPaletteState = vi.hoisted(() => ({
-  refs: null as null | {
-    palettes: {
-      value: Array<{ id: string; name: string }>
-    }
-    activePaletteId: {
-      value: string
-    }
-  },
-  customPaletteIds: new Set<string>()
-}))
-
-vi.mock('pinia', async (importOriginal: () => Promise<typeof Pinia>) => {
-  const actual = await importOriginal()
-  return {
-    ...actual,
-    storeToRefs: (store: object) => store
-  }
-})
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => mockSettingStore
-}))
-
-vi.mock('@/services/colorPaletteService', () => ({
-  useColorPaletteService: () => mockColorPaletteService
-}))
-
-vi.mock('@/stores/workspace/colorPaletteStore', async () => {
-  const { ref } = await import('vue')
-
-  const palettes = ref([
-    { id: 'builtin', name: 'Builtin' },
-    { id: 'custom', name: 'Custom' }
-  ])
-  const activePaletteId = ref('builtin')
-
-  mockColorPaletteState.refs = {
-    palettes,
-    activePaletteId
-  }
-
-  return {
-    useColorPaletteStore: () => ({
-      palettes,
-      activePaletteId,
-      isCustomPalette: (paletteId: string) =>
-        mockColorPaletteState.customPaletteIds.has(paletteId)
-    })
-  }
-})
-
-vi.mock('@/components/ui/button/Button.vue', () => ({
-  default: {
-    props: ['title', 'disabled'],
-    emits: ['click'],
-    template: `
-      <button
-        type="button"
-        :title="title"
-        :disabled="disabled"
-        @click="$emit('click')"
-      >
-        <slot />
-      </button>
-    `
-  }
-}))
-
-vi.mock('primevue/message', () => ({
-  default: {
-    template: '<section><slot /></section>'
-  }
-}))
-
-vi.mock('primevue/select', () => ({
-  default: {
-    props: ['modelValue', 'options'],
-    emits: ['update:modelValue'],
-    template: `
-      <select
-        data-testid="palette-select"
-        :value="modelValue"
-        @change="$emit('update:modelValue', $event.target.value)"
-      >
-        <option v-for="option in options" :key="option.id" :value="option.id">
-          {{ option.name }}
-        </option>
-      </select>
-    `
-  }
-}))
-
-function renderMessage() {
-  return render(ColorPaletteMessage, {
-    global: {
-      plugins: [testI18n]
-    }
-  })
-}
-
-describe('ColorPaletteMessage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockSettingStore.set.mockResolvedValue(undefined)
-    mockColorPaletteService.importColorPalette.mockResolvedValue(null)
-    mockColorPaletteState.customPaletteIds = new Set(['custom'])
-    if (mockColorPaletteState.refs) {
-      mockColorPaletteState.refs.activePaletteId.value = 'builtin'
-      mockColorPaletteState.refs.palettes.value = [
-        { id: 'builtin', name: 'Builtin' },
-        { id: 'custom', name: 'Custom' }
-      ]
-    }
-  })
-
-  it('exports and deletes the active custom palette', async () => {
-    renderMessage()
-
-    await userEvent.click(screen.getByTitle('g.export'))
-    expect(mockColorPaletteService.exportColorPalette).toHaveBeenCalledWith(
-      'builtin'
-    )
-    expect(screen.getByTitle('g.delete')).toBeDisabled()
-
-    await fireEvent.update(screen.getByTestId('palette-select'), 'custom')
-    await userEvent.click(screen.getByTitle('g.delete'))
-
-    expect(
-      mockColorPaletteService.deleteCustomColorPalette
-    ).toHaveBeenCalledWith('custom')
-  })
-
-  it('persists imported palettes only when import returns a palette', async () => {
-    renderMessage()
-
-    await userEvent.click(screen.getByTitle('g.import'))
-    expect(mockSettingStore.set).not.toHaveBeenCalled()
-
-    mockColorPaletteService.importColorPalette.mockResolvedValue({
-      id: 'imported',
-      name: 'Imported'
-    })
-
-    await userEvent.click(screen.getByTitle('g.import'))
-    expect(mockSettingStore.set).toHaveBeenCalledWith(
-      'Comfy.ColorPalette',
-      'imported'
-    )
-  })
-})

src/platform/settings/components/ExtensionPanel.test.ts

@@ -1,306 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import ExtensionPanel from './ExtensionPanel.vue'
-
-const testI18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: {} }
-})
-
-interface MockExtension {
-  name: string
-}
-
-const mockSettingStore = vi.hoisted(() => ({
-  set: vi.fn()
-}))
-
-const mockExtensionState = vi.hoisted(() => ({
-  store: {
-    extensions: [
-      { name: 'core.color' },
-      { name: 'custom.pack' },
-      { name: 'readonly.pack' }
-    ] as MockExtension[],
-    inactiveDisabledExtensionNames: ['inactive.pack'],
-    hasThirdPartyExtensions: true,
-    enabled: new Set(['core.color', 'custom.pack', 'readonly.pack']),
-    core: new Set(['core.color']),
-    readOnly: new Set(['readonly.pack']),
-    isExtensionEnabled(name: string) {
-      return this.enabled.has(name)
-    },
-    isCoreExtension(name: string) {
-      return this.core.has(name)
-    },
-    isExtensionReadOnly(name: string) {
-      return this.readOnly.has(name)
-    }
-  }
-}))
-
-vi.mock('@primevue/core/api', () => ({
-  FilterMatchMode: {
-    CONTAINS: 'contains'
-  }
-}))
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => mockSettingStore
-}))
-
-vi.mock('@/stores/extensionStore', () => ({
-  useExtensionStore: () => mockExtensionState.store
-}))
-
-vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
-  default: {
-    props: ['modelValue', 'placeholder'],
-    emits: ['update:modelValue'],
-    template: `
-      <input
-        data-testid="extension-search"
-        :value="modelValue"
-        :placeholder="placeholder"
-        @input="$emit('update:modelValue', $event.target.value)"
-      />
-    `
-  }
-}))
-
-vi.mock('@/components/ui/button/Button.vue', () => ({
-  default: {
-    props: ['disabled'],
-    emits: ['click'],
-    template: `
-      <button type="button" :disabled="disabled" @click="$emit('click', $event)">
-        <slot />
-      </button>
-    `
-  }
-}))
-
-vi.mock('primevue/message', () => ({
-  default: {
-    template: '<section data-testid="extension-message"><slot /></section>'
-  }
-}))
-
-vi.mock('primevue/selectbutton', () => ({
-  default: {
-    props: ['modelValue', 'options'],
-    emits: ['update:modelValue'],
-    template: `
-      <div data-testid="extension-filter">
-        <button
-          v-for="option in options"
-          :key="option.value"
-          type="button"
-          @click="$emit('update:modelValue', option.value)"
-        >
-          {{ option.label }}
-        </button>
-      </div>
-    `
-  }
-}))
-
-vi.mock('primevue/datatable', () => ({
-  default: {
-    props: ['value', 'selection'],
-    emits: ['update:selection'],
-    template: `
-      <section data-testid="extension-table">
-        <button
-          type="button"
-          data-testid="select-visible"
-          @click="$emit('update:selection', value)"
-        >
-          select
-        </button>
-        <div v-for="ext in value" :key="ext.name" data-testid="extension-row">
-          {{ ext.name }}
-        </div>
-        <slot />
-      </section>
-    `
-  }
-}))
-
-vi.mock('primevue/column', () => ({
-  default: {
-    template: '<div><slot name="header" /><slot /></div>'
-  }
-}))
-
-vi.mock('primevue/contextmenu', () => ({
-  default: {
-    props: ['model'],
-    methods: {
-      show: vi.fn()
-    },
-    template: `
-      <div data-testid="extension-menu">
-        <button
-          v-for="item in model.filter((entry) => !entry.separator)"
-          :key="item.label"
-          type="button"
-          :disabled="item.disabled"
-          @click="item.command?.()"
-        >
-          {{ item.label }}
-        </button>
-      </div>
-    `
-  }
-}))
-
-vi.mock('primevue/tag', () => ({
-  default: {
-    props: ['value'],
-    template: '<span>{{ value }}</span>'
-  }
-}))
-
-vi.mock('primevue/toggleswitch', () => ({
-  default: {
-    props: ['modelValue', 'disabled'],
-    emits: ['update:modelValue', 'change'],
-    template: `
-      <button
-        type="button"
-        :disabled="disabled"
-        data-testid="extension-toggle"
-        @click="$emit('update:modelValue', !modelValue); $emit('change')"
-      >
-        {{ String(modelValue) }}
-      </button>
-    `
-  }
-}))
-
-function renderPanel() {
-  return render(ExtensionPanel, {
-    global: {
-      plugins: [testI18n]
-    }
-  })
-}
-
-describe('ExtensionPanel', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockSettingStore.set.mockResolvedValue(undefined)
-    mockExtensionState.store.extensions = [
-      { name: 'core.color' },
-      { name: 'custom.pack' },
-      { name: 'readonly.pack' }
-    ]
-    mockExtensionState.store.inactiveDisabledExtensionNames = ['inactive.pack']
-    mockExtensionState.store.hasThirdPartyExtensions = true
-    mockExtensionState.store.enabled = new Set([
-      'core.color',
-      'custom.pack',
-      'readonly.pack'
-    ])
-    mockExtensionState.store.core = new Set(['core.color'])
-    mockExtensionState.store.readOnly = new Set(['readonly.pack'])
-  })
-
-  it('filters extensions by all, core, and custom categories', async () => {
-    renderPanel()
-
-    expect(screen.getByTestId('extension-table')).toHaveTextContent(
-      'core.color'
-    )
-    expect(screen.getByTestId('extension-table')).toHaveTextContent(
-      'custom.pack'
-    )
-
-    await userEvent.click(screen.getByRole('button', { name: 'g.core' }))
-    expect(screen.getByTestId('extension-table')).toHaveTextContent(
-      'core.color'
-    )
-    expect(screen.getByTestId('extension-table')).not.toHaveTextContent(
-      'custom.pack'
-    )
-
-    await userEvent.click(screen.getByRole('button', { name: 'g.custom' }))
-    expect(screen.getByTestId('extension-table')).not.toHaveTextContent(
-      'core.color'
-    )
-    expect(screen.getByTestId('extension-table')).toHaveTextContent(
-      'custom.pack'
-    )
-    expect(screen.getByTestId('extension-table')).toHaveTextContent(
-      'readonly.pack'
-    )
-  })
-
-  it('applies selected extension commands without changing read-only rows', async () => {
-    renderPanel()
-
-    await userEvent.click(screen.getByTestId('select-visible'))
-    await userEvent.click(
-      screen.getByRole('button', { name: 'g.disableSelected' })
-    )
-
-    expect(mockSettingStore.set).toHaveBeenLastCalledWith(
-      'Comfy.Extension.Disabled',
-      ['inactive.pack', 'core.color', 'custom.pack']
-    )
-    expect(screen.getByTestId('extension-message')).toHaveTextContent(
-      'core.color'
-    )
-    expect(screen.getByTestId('extension-message')).toHaveTextContent(
-      'custom.pack'
-    )
-    expect(screen.getByTestId('extension-message')).not.toHaveTextContent(
-      'readonly.pack'
-    )
-
-    await userEvent.click(
-      screen.getByRole('button', { name: 'g.enableSelected' })
-    )
-    expect(mockSettingStore.set).toHaveBeenLastCalledWith(
-      'Comfy.Extension.Disabled',
-      ['inactive.pack']
-    )
-  })
-
-  it('applies bulk commands and disables third-party command when unavailable', async () => {
-    const { unmount } = renderPanel()
-
-    await userEvent.click(screen.getByRole('button', { name: 'g.disableAll' }))
-    expect(mockSettingStore.set).toHaveBeenLastCalledWith(
-      'Comfy.Extension.Disabled',
-      ['inactive.pack', 'core.color', 'custom.pack']
-    )
-
-    await userEvent.click(screen.getByRole('button', { name: 'g.enableAll' }))
-    expect(mockSettingStore.set).toHaveBeenLastCalledWith(
-      'Comfy.Extension.Disabled',
-      ['inactive.pack']
-    )
-
-    await userEvent.click(
-      screen.getByRole('button', { name: 'g.disableThirdParty' })
-    )
-    expect(mockSettingStore.set).toHaveBeenLastCalledWith(
-      'Comfy.Extension.Disabled',
-      ['inactive.pack', 'custom.pack', 'readonly.pack']
-    )
-
-    unmount()
-    mockExtensionState.store.hasThirdPartyExtensions = false
-    renderPanel()
-
-    expect(
-      screen.getByRole('button', { name: 'g.disableThirdParty' })
-    ).toBeDisabled()
-  })
-})

src/platform/settings/components/ServerConfigPanel.test.ts

@@ -1,317 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import ServerConfigPanel from './ServerConfigPanel.vue'
-import type * as Pinia from 'pinia'
-
-const testI18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: {} }
-})
-
-const mockSettingStore = vi.hoisted(() => ({
-  set: vi.fn()
-}))
-
-const mockToastStore = vi.hoisted(() => ({
-  add: vi.fn()
-}))
-
-const mockCopy = vi.hoisted(() => vi.fn())
-
-const mockElectronAPI = vi.hoisted(() => ({
-  restartApp: vi.fn()
-}))
-
-const mockServerConfigStore = vi.hoisted(() => ({
-  refs: null as null | {
-    serverConfigsByCategory: {
-      value: Record<
-        string,
-        Array<{
-          id: string
-          name: string
-          value: string
-          initialValue: string
-          tooltip?: string
-        }>
-      >
-    }
-    serverConfigValues: { value: Record<string, string> }
-    launchArgs: { value: string[] }
-    commandLineArgs: { value: string }
-    modifiedConfigs: {
-      value: Array<{
-        id: string
-        name: string
-        value: string
-        initialValue: string
-      }>
-    }
-  },
-  revertChanges: vi.fn()
-}))
-
-vi.mock('pinia', async (importOriginal) => {
-  const actual = await importOriginal<typeof Pinia>()
-  return {
-    ...actual,
-    storeToRefs: (store: object) => store
-  }
-})
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => mockSettingStore
-}))
-
-vi.mock('@/platform/updates/common/toastStore', () => ({
-  useToastStore: () => mockToastStore
-}))
-
-vi.mock('@/stores/serverConfigStore', async () => {
-  const { ref } = await import('vue')
-
-  const serverConfigsByCategory = ref({
-    general: [
-      {
-        id: 'listen',
-        name: 'Listen',
-        value: 'true',
-        initialValue: 'false',
-        tooltip: 'Enable listen mode'
-      },
-      {
-        id: 'preview',
-        name: 'Preview',
-        value: 'auto',
-        initialValue: 'auto'
-      }
-    ]
-  })
-  const serverConfigValues = ref({ listen: 'true' })
-  const launchArgs = ref(['--listen'])
-  const commandLineArgs = ref('python main.py --listen')
-  const modifiedConfigs = ref([
-    {
-      id: 'listen',
-      name: 'Listen',
-      value: 'true',
-      initialValue: 'false'
-    }
-  ])
-
-  mockServerConfigStore.refs = {
-    serverConfigsByCategory,
-    serverConfigValues,
-    launchArgs,
-    commandLineArgs,
-    modifiedConfigs
-  }
-
-  return {
-    useServerConfigStore: () => ({
-      serverConfigsByCategory,
-      serverConfigValues,
-      launchArgs,
-      commandLineArgs,
-      modifiedConfigs,
-      revertChanges: mockServerConfigStore.revertChanges
-    })
-  }
-})
-
-vi.mock('@/composables/useCopyToClipboard', () => ({
-  useCopyToClipboard: () => ({
-    copyToClipboard: mockCopy
-  })
-}))
-
-vi.mock('@/utils/envUtil', () => ({
-  electronAPI: () => mockElectronAPI
-}))
-
-vi.mock('@/components/common/FormItem.vue', () => ({
-  default: {
-    props: ['id', 'item', 'labelClass'],
-    template: `
-      <label
-        :data-testid="'server-config-' + id"
-        :data-highlighted="String(Boolean(labelClass?.['text-highlight']))"
-        :title="item.tooltip"
-      >
-        {{ item.name }}={{ item.value }}
-      </label>
-    `
-  }
-}))
-
-vi.mock('@/components/ui/button/Button.vue', () => ({
-  default: {
-    props: ['ariaLabel'],
-    emits: ['click'],
-    template: `
-      <button type="button" :aria-label="ariaLabel" @click="$emit('click')">
-        <slot />
-      </button>
-    `
-  }
-}))
-
-vi.mock('primevue/divider', () => ({
-  default: {
-    template: '<hr />'
-  }
-}))
-
-vi.mock('primevue/message', () => ({
-  default: {
-    template: '<section><slot name="icon" /><slot /></section>'
-  }
-}))
-
-function renderPanel() {
-  return render(ServerConfigPanel, {
-    global: {
-      plugins: [testI18n]
-    }
-  })
-}
-
-describe('ServerConfigPanel', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockSettingStore.set.mockResolvedValue(undefined)
-    mockCopy.mockResolvedValue(undefined)
-    mockElectronAPI.restartApp.mockResolvedValue(undefined)
-    mockServerConfigStore.revertChanges.mockReset()
-    if (mockServerConfigStore.refs) {
-      mockServerConfigStore.refs.serverConfigsByCategory.value = {
-        general: [
-          {
-            id: 'listen',
-            name: 'Listen',
-            value: 'true',
-            initialValue: 'false',
-            tooltip: 'Enable listen mode'
-          },
-          {
-            id: 'preview',
-            name: 'Preview',
-            value: 'auto',
-            initialValue: 'auto'
-          }
-        ]
-      }
-      mockServerConfigStore.refs.serverConfigValues.value = { listen: 'true' }
-      mockServerConfigStore.refs.launchArgs.value = ['--listen']
-      mockServerConfigStore.refs.commandLineArgs.value =
-        'python main.py --listen'
-      mockServerConfigStore.refs.modifiedConfigs.value = [
-        {
-          id: 'listen',
-          name: 'Listen',
-          value: 'true',
-          initialValue: 'false'
-        }
-      ]
-    }
-  })
-
-  it('renders modified configs, translates form items, and copies command line args', async () => {
-    const user = userEvent.setup()
-    renderPanel()
-
-    expect(screen.getByText('serverConfig.modifiedConfigs')).toBeInTheDocument()
-    expect(screen.getByText('Listen: false → true')).toBeInTheDocument()
-    expect(screen.getByTestId('server-config-listen')).toHaveAttribute(
-      'data-highlighted',
-      'true'
-    )
-    expect(screen.getByTestId('server-config-listen')).toHaveAttribute(
-      'title',
-      'Enable listen mode'
-    )
-    expect(screen.getByTestId('server-config-preview')).toHaveAttribute(
-      'data-highlighted',
-      'false'
-    )
-
-    await user.click(screen.getByLabelText('g.copyToClipboard'))
-
-    expect(mockCopy).toHaveBeenCalledWith('python main.py --listen')
-  })
-
-  it('reverts, restarts, and suppresses the unmount warning after restart', async () => {
-    const user = userEvent.setup()
-    const { unmount } = renderPanel()
-
-    await user.click(
-      screen.getByRole('button', { name: 'serverConfig.revertChanges' })
-    )
-    expect(mockServerConfigStore.revertChanges).toHaveBeenCalledTimes(1)
-
-    await user.click(
-      screen.getByRole('button', { name: 'serverConfig.restart' })
-    )
-    expect(mockElectronAPI.restartApp).toHaveBeenCalledTimes(1)
-
-    unmount()
-
-    expect(mockToastStore.add).not.toHaveBeenCalled()
-  })
-
-  it('persists launch args and server config values through watchers', async () => {
-    renderPanel()
-
-    if (!mockServerConfigStore.refs) {
-      throw new Error('server config refs were not initialized')
-    }
-
-    mockServerConfigStore.refs.launchArgs.value = ['--cpu']
-    await nextTick()
-    mockServerConfigStore.refs.serverConfigValues.value = { listen: 'false' }
-    await nextTick()
-
-    expect(mockSettingStore.set).toHaveBeenCalledWith(
-      'Comfy.Server.LaunchArgs',
-      ['--cpu']
-    )
-    expect(mockSettingStore.set).toHaveBeenCalledWith(
-      'Comfy.Server.ServerConfigValues',
-      { listen: 'false' }
-    )
-  })
-
-  it('warns on unmount only when modified configs remain', () => {
-    if (!mockServerConfigStore.refs) {
-      throw new Error('server config refs were not initialized')
-    }
-
-    mockServerConfigStore.refs.modifiedConfigs.value = []
-    const empty = renderPanel()
-    empty.unmount()
-    expect(mockToastStore.add).not.toHaveBeenCalled()
-
-    mockServerConfigStore.refs.modifiedConfigs.value = [
-      {
-        id: 'listen',
-        name: 'Listen',
-        value: 'true',
-        initialValue: 'false'
-      }
-    ]
-    const modified = renderPanel()
-    modified.unmount()
-
-    expect(mockToastStore.add).toHaveBeenCalledWith({
-      severity: 'warn',
-      summary: 'serverConfig.restartRequiredToastSummary',
-      detail: 'serverConfig.restartRequiredToastDetail',
-      life: 10_000
-    })
-  })
-})

src/platform/settings/components/SettingDialog.test.ts

@@ -1,542 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import SettingDialog from './SettingDialog.vue'
-
-const testI18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: {} }
-})
-
-interface MockSettingTreeNode {
-  key: string
-  label: string
-  leaf?: boolean
-  sortOrder?: number
-  data?: { id: string; name: string; sortOrder?: number }
-  children?: MockSettingTreeNode[]
-}
-
-const mockFetchBalance = vi.hoisted(() => vi.fn())
-
-const mockSettingUI = vi.hoisted(() => ({
-  defaultPanel: undefined as string | undefined,
-  refs: null as null | {
-    settingCategories: {
-      value: MockSettingTreeNode[]
-    }
-    navGroups: {
-      value: Array<{
-        title: string
-        items: Array<{
-          id: string
-          label: string
-          icon?: string
-          badge?: string
-        }>
-      }>
-    }
-  }
-}))
-
-const mockSettingSearch = vi.hoisted(() => ({
-  refs: null as null | {
-    searchQuery: { value: string }
-    inSearch: { value: boolean }
-    searchResultsCategories: { value: Set<string> }
-    matchedNavItemKeys: { value: Set<string> }
-    results: {
-      value: Array<{
-        label: string
-        category?: string
-        settings: Array<{ id: string; name: string; sortOrder?: number }>
-      }>
-    }
-  },
-  handleSearch: vi.fn()
-}))
-
-vi.mock('@/composables/billing/useBillingContext', () => ({
-  useBillingContext: () => ({
-    fetchBalance: mockFetchBalance
-  })
-}))
-
-vi.mock('@/platform/telemetry/searchQuery/useSearchQueryTracking', () => ({
-  useSearchQueryTracking: vi.fn()
-}))
-
-vi.mock('@/components/widget/layout/BaseModalLayout.vue', () => ({
-  default: {
-    template: `
-      <section data-testid="settings-dialog">
-        <header data-testid="left-title"><slot name="leftPanelHeaderTitle" /></header>
-        <aside data-testid="left-panel"><slot name="leftPanel" /></aside>
-        <div data-testid="header"><slot name="header" /></div>
-        <div data-testid="header-actions"><slot name="header-right-area" /></div>
-        <main data-testid="content"><slot name="content" /></main>
-      </section>
-    `
-  }
-}))
-
-vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
-  default: {
-    props: ['modelValue', 'placeholder', 'autofocus'],
-    emits: ['update:modelValue', 'search'],
-    template: `
-      <input
-        data-testid="settings-search"
-        :value="modelValue"
-        :placeholder="placeholder"
-        :data-autofocus="String(autofocus)"
-        @input="$emit('update:modelValue', $event.target.value)"
-        @change="$emit('search', $event.target.value)"
-      />
-    `
-  }
-}))
-
-vi.mock('@/components/widget/nav/NavTitle.vue', () => ({
-  default: {
-    props: ['title'],
-    template: '<h3>{{ title }}</h3>'
-  }
-}))
-
-vi.mock('@/components/widget/nav/NavItem.vue', () => ({
-  default: {
-    props: ['icon', 'badge', 'active'],
-    emits: ['click'],
-    template: `
-      <button
-        type="button"
-        :data-nav-id="$attrs['data-nav-id']"
-        :data-active="String(active)"
-        @click="$emit('click')"
-      >
-        <slot />
-      </button>
-    `
-  }
-}))
-
-vi.mock('@/components/dialog/content/setting/CurrentUserMessage.vue', () => ({
-  default: {
-    template: '<p data-testid="current-user-message">current user</p>'
-  }
-}))
-
-vi.mock('@/platform/settings/components/ColorPaletteMessage.vue', () => ({
-  default: {
-    template: '<p data-testid="color-palette-message">palette</p>'
-  }
-}))
-
-vi.mock('@/platform/settings/components/SettingsPanel.vue', () => ({
-  default: {
-    props: ['settingGroups'],
-    template: `
-      <div data-testid="settings-panel">
-        <section v-for="group in settingGroups" :key="group.label">
-          <h4>{{ group.label }}</h4>
-          <span v-for="setting in group.settings" :key="setting.id">
-            {{ setting.id }}
-          </span>
-        </section>
-      </div>
-    `
-  }
-}))
-
-vi.mock('@/platform/settings/composables/useSettingUI', async () => {
-  const { computed, defineComponent, h, ref } = await import('vue')
-
-  const settingCategories = ref([
-    {
-      key: 'Comfy',
-      label: 'Comfy',
-      children: [
-        {
-          key: 'General',
-          label: 'General',
-          children: [
-            {
-              key: 'Comfy.High',
-              label: 'High',
-              leaf: true,
-              data: { id: 'Comfy.High', name: 'High', sortOrder: 30 }
-            },
-            {
-              key: 'Comfy.Low',
-              label: 'Low',
-              leaf: true,
-              data: { id: 'Comfy.Low', name: 'Low', sortOrder: 10 }
-            }
-          ]
-        },
-        {
-          key: 'Advanced',
-          label: 'Advanced',
-          children: [
-            {
-              key: 'Comfy.Advanced',
-              label: 'Advanced',
-              leaf: true,
-              data: { id: 'Comfy.Advanced', name: 'Advanced' }
-            }
-          ]
-        }
-      ]
-    },
-    {
-      key: 'Appearance',
-      label: 'Appearance',
-      children: [
-        {
-          key: 'Palette',
-          label: 'Palette',
-          children: [
-            {
-              key: 'Appearance.Palette',
-              label: 'Palette',
-              leaf: true,
-              data: {
-                id: 'Appearance.Palette',
-                name: 'Palette',
-                sortOrder: 20
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ])
-
-  const navGroups = ref([
-    {
-      title: 'Core',
-      items: [
-        { id: 'Comfy', label: 'Comfy', icon: 'settings' },
-        { id: 'Appearance', label: 'Appearance', icon: 'palette' },
-        { id: 'keybinding', label: 'Keybinding', icon: 'keyboard' },
-        { id: 'credits', label: 'Credits', icon: 'coins' }
-      ]
-    }
-  ])
-
-  const keybindingPanel = {
-    node: { key: 'keybinding', label: 'Keybinding', children: [] },
-    component: defineComponent({
-      name: 'MockKeybindingPanel',
-      setup: () => () => h('div', { 'data-testid': 'keybinding-panel' }, 'keys')
-    })
-  }
-
-  mockSettingUI.refs = {
-    settingCategories,
-    navGroups
-  }
-
-  return {
-    useSettingUI: vi.fn((defaultPanel?: string) => ({
-      defaultCategory: computed(
-        () =>
-          settingCategories.value.find((c) => c.key === defaultPanel) ??
-          settingCategories.value[0]
-      ),
-      settingCategories,
-      navGroups,
-      findCategoryByKey: (key: string) =>
-        settingCategories.value.find((c) => c.key === key) ?? null,
-      findPanelByKey: (key: string) =>
-        key === 'keybinding' ? keybindingPanel : null
-    }))
-  }
-})
-
-vi.mock('@/platform/settings/composables/useSettingSearch', async () => {
-  const { computed, ref } = await import('vue')
-
-  const searchQuery = ref('')
-  const inSearch = ref(false)
-  const searchResultsCategories = ref(new Set<string>())
-  const matchedNavItemKeys = ref(new Set<string>())
-  const results = ref([
-    {
-      label: 'Search Group',
-      category: 'Comfy',
-      settings: [{ id: 'Comfy.SearchResult', name: 'Search Result' }]
-    }
-  ])
-
-  mockSettingSearch.refs = {
-    searchQuery,
-    inSearch,
-    searchResultsCategories,
-    matchedNavItemKeys,
-    results
-  }
-
-  mockSettingSearch.handleSearch.mockImplementation(
-    (query: string, navItems: Array<{ key: string; label: string }> = []) => {
-      searchQuery.value = query
-      inSearch.value = query.length > 0
-      searchResultsCategories.value = query.includes('appearance')
-        ? new Set(['Appearance'])
-        : new Set()
-      matchedNavItemKeys.value = new Set(
-        navItems
-          .filter((item) => item.label.toLowerCase().includes(query))
-          .map((item) => item.key)
-      )
-    }
-  )
-
-  return {
-    useSettingSearch: vi.fn(() => ({
-      searchQuery,
-      inSearch,
-      searchResultsCategories: computed(() => searchResultsCategories.value),
-      matchedNavItemKeys: computed(() => matchedNavItemKeys.value),
-      handleSearch: mockSettingSearch.handleSearch,
-      getSearchResults: vi.fn(() => results.value)
-    }))
-  }
-})
-
-function renderDialog(
-  props: Partial<InstanceType<typeof SettingDialog>['$props']> = {}
-) {
-  return render(SettingDialog, {
-    props: {
-      onClose: vi.fn(),
-      ...props
-    },
-    global: {
-      plugins: [testI18n]
-    }
-  })
-}
-
-describe('SettingDialog', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockFetchBalance.mockReset()
-    if (mockSettingSearch.refs) {
-      mockSettingSearch.refs.searchQuery.value = ''
-      mockSettingSearch.refs.inSearch.value = false
-      mockSettingSearch.refs.searchResultsCategories.value = new Set()
-      mockSettingSearch.refs.matchedNavItemKeys.value = new Set()
-    }
-  })
-
-  it('renders the default category panel with sorted groups and settings', () => {
-    renderDialog()
-
-    expect(screen.getByTestId('current-user-message')).toBeInTheDocument()
-    expect(screen.getByTestId('settings-panel')).toHaveTextContent('General')
-    expect(screen.getByTestId('settings-panel')).toHaveTextContent('Advanced')
-    expect(screen.getByTestId('settings-panel').textContent).toMatch(
-      /Comfy\.High.*Comfy\.Low/
-    )
-    expect(screen.getByRole('button', { name: 'Comfy' })).toHaveAttribute(
-      'data-active',
-      'true'
-    )
-  })
-
-  it('switches category from the nav and fetches credits balance for credits', async () => {
-    const user = userEvent.setup()
-    renderDialog()
-
-    await user.click(screen.getByRole('button', { name: 'Appearance' }))
-    expect(screen.getByTestId('color-palette-message')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Appearance' })).toHaveAttribute(
-      'data-active',
-      'true'
-    )
-
-    await user.click(screen.getByRole('button', { name: 'Credits' }))
-    await nextTick()
-
-    expect(mockFetchBalance).toHaveBeenCalledTimes(1)
-  })
-
-  it('renders panel header slots and disables search autofocus for keybindings', async () => {
-    const user = userEvent.setup()
-    renderDialog()
-
-    await user.click(screen.getByRole('button', { name: 'Keybinding' }))
-    await nextTick()
-
-    expect(screen.getByTestId('keybinding-panel')).toBeInTheDocument()
-    expect(screen.getByTestId('header')).not.toBeEmptyDOMElement()
-    expect(screen.getByTestId('header-actions')).not.toBeEmptyDOMElement()
-    expect(screen.getByTestId('settings-search')).toHaveAttribute(
-      'data-autofocus',
-      'false'
-    )
-  })
-
-  it('renders search results and activates the first matching nav item', async () => {
-    const user = userEvent.setup()
-    renderDialog()
-
-    const input = screen.getByTestId('settings-search')
-    await user.type(input, 'appearance')
-    await user.tab()
-    await nextTick()
-
-    expect(mockSettingSearch.handleSearch).toHaveBeenCalledWith(
-      'appearance',
-      expect.arrayContaining([{ key: 'Appearance', label: 'Appearance' }])
-    )
-    expect(screen.getByTestId('settings-panel')).toHaveTextContent(
-      'Comfy.SearchResult'
-    )
-    expect(screen.getByRole('button', { name: 'Appearance' })).toHaveAttribute(
-      'data-active',
-      'true'
-    )
-  })
-
-  it('keeps search mode active when no nav item or category matches', async () => {
-    const user = userEvent.setup()
-    renderDialog()
-
-    const input = screen.getByTestId('settings-search')
-    await user.type(input, 'unmatched')
-    await user.tab()
-    await nextTick()
-
-    expect(screen.getByTestId('settings-panel')).toHaveTextContent(
-      'Comfy.SearchResult'
-    )
-    expect(screen.getByRole('button', { name: 'Comfy' })).toHaveAttribute(
-      'data-active',
-      'false'
-    )
-  })
-
-  it('restores the default category after clearing search', async () => {
-    const user = userEvent.setup()
-    renderDialog()
-
-    const input = screen.getByTestId('settings-search')
-    await user.type(input, 'unmatched')
-    await user.tab()
-    await nextTick()
-    await user.clear(input)
-    await user.tab()
-    await nextTick()
-
-    expect(screen.getByTestId('current-user-message')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Comfy' })).toHaveAttribute(
-      'data-active',
-      'true'
-    )
-  })
-
-  it('sorts groups by label when group sort order ties', async () => {
-    const refs = mockSettingUI.refs
-    if (!refs) throw new Error('Expected setting UI refs')
-
-    const originalCategories = refs.settingCategories.value
-    const originalNavGroups = refs.navGroups.value
-    refs.settingCategories.value = [
-      ...originalCategories,
-      {
-        key: 'Tie',
-        label: 'Tie',
-        children: [
-          {
-            key: 'Beta',
-            label: 'Beta',
-            children: [
-              {
-                key: 'Tie.Beta',
-                label: 'Beta',
-                leaf: true,
-                data: { id: 'Tie.Beta', name: 'Beta', sortOrder: 5 }
-              }
-            ]
-          },
-          {
-            key: 'Alpha',
-            label: 'Alpha',
-            children: [
-              {
-                key: 'Tie.Alpha',
-                label: 'Alpha',
-                leaf: true,
-                data: { id: 'Tie.Alpha', name: 'Alpha', sortOrder: 5 }
-              },
-              {
-                key: 'Tie.NoSort',
-                label: 'NoSort',
-                leaf: true,
-                data: { id: 'Tie.NoSort', name: 'NoSort' }
-              }
-            ]
-          }
-        ]
-      }
-    ]
-    refs.navGroups.value = [
-      {
-        title: 'Core',
-        items: [
-          ...originalNavGroups[0].items,
-          { id: 'Tie', label: 'Tie', icon: 'settings' }
-        ]
-      }
-    ]
-
-    try {
-      renderDialog()
-      await userEvent.click(screen.getByRole('button', { name: 'Tie' }))
-      await nextTick()
-
-      expect(screen.getByTestId('settings-panel').textContent).toMatch(
-        /Alpha.*Beta/
-      )
-      expect(screen.getByTestId('settings-panel').textContent).toMatch(
-        /Tie\.Alpha.*Tie\.NoSort/
-      )
-    } finally {
-      refs.settingCategories.value = originalCategories
-      refs.navGroups.value = originalNavGroups
-    }
-  })
-
-  it('scrolls to a target setting and removes its highlight after animation', async () => {
-    const target = document.createElement('div')
-    target.dataset.settingId = 'Comfy.Target'
-    const scrollIntoView = vi.fn()
-    target.scrollIntoView = scrollIntoView
-    document.body.appendChild(target)
-
-    try {
-      renderDialog({ scrollToSettingId: 'Comfy.Target' })
-      await nextTick()
-      await nextTick()
-
-      expect(scrollIntoView).toHaveBeenCalledWith({
-        behavior: 'smooth',
-        block: 'center'
-      })
-      expect(target.classList.contains('setting-highlight')).toBe(true)
-
-      target.dispatchEvent(new Event('animationend'))
-
-      expect(target.classList.contains('setting-highlight')).toBe(false)
-    } finally {
-      target.remove()
-    }
-  })
-})

src/platform/settings/composables/useLitegraphSettings.test.ts

@@ -1,199 +0,0 @@
-import { nextTick, reactive } from 'vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
-import {
-  CanvasPointer,
-  LGraphNode,
-  LiteGraph
-} from '@/lib/litegraph/src/litegraph'
-
-type SettingValue = boolean | number | string
-
-// The real canvasStore exposes `canvas` via a shallowRef, so the mock must be
-// reactive for the composable's watchEffects to re-run when the canvas mounts
-// after setup. `vi.hoisted` runs before imports, hence the dynamic import.
-const { canvasStore, settings } = await vi.hoisted(async () => {
-  const { reactive } = await import('vue')
-  return {
-    canvasStore: reactive({
-      canvas: undefined as
-        | undefined
-        | {
-            show_info?: SettingValue
-            zoom_speed?: SettingValue
-            auto_pan_speed?: SettingValue
-            links_render_mode?: SettingValue
-            min_font_size_for_lod?: SettingValue
-            linkMarkerShape?: SettingValue
-            maximumFps?: SettingValue
-            dragZoomEnabled?: SettingValue
-            liveSelection?: SettingValue
-            groupSelectChildren?: SettingValue
-            draw: ReturnType<typeof vi.fn>
-            setDirty: ReturnType<typeof vi.fn>
-          }
-    }),
-    settings: {
-      current: {} as Record<string, SettingValue>
-    }
-  }
-})
-
-vi.mock('@/lib/litegraph/src/litegraph', () => {
-  class MockCanvasPointer {
-    static doubleClickTime = 0
-    static bufferTime = 0
-    static maxClickDrift = 0
-  }
-
-  class MockLGraphNode {
-    static keepAllLinksOnBypass = false
-  }
-
-  return {
-    CanvasPointer: MockCanvasPointer,
-    LGraphNode: MockLGraphNode,
-    LiteGraph: {
-      Reroute: {},
-      snaps_for_comfy: false,
-      snap_highlights_node: false,
-      middle_click_slot_add_default_node: false,
-      CANVAS_GRID_SIZE: 0,
-      alwaysSnapToGrid: false,
-      context_menu_scaling: 1,
-      canvasNavigationMode: 'legacy',
-      macTrackpadGestures: false,
-      leftMouseClickBehavior: 'select',
-      mouseWheelScroll: 'zoom',
-      saveViewportWithGraph: false
-    }
-  }
-})
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({
-    get: (key: string) => settings.current[key]
-  })
-}))
-
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => canvasStore
-}))
-
-function makeCanvas() {
-  return {
-    draw: vi.fn(),
-    setDirty: vi.fn()
-  }
-}
-
-beforeEach(() => {
-  settings.current = reactive({
-    'Comfy.Graph.CanvasInfo': true,
-    'Comfy.Graph.ZoomSpeed': 1.25,
-    'Comfy.Graph.AutoPanSpeed': 0.75,
-    'Comfy.Node.AutoSnapLinkToSlot': true,
-    'Comfy.Node.SnapHighlightsNode': true,
-    'Comfy.Node.BypassAllLinksOnDelete': true,
-    'Comfy.Node.MiddleClickRerouteNode': true,
-    'Comfy.LinkRenderMode': 2,
-    'LiteGraph.Canvas.MinFontSizeForLOD': 9,
-    'Comfy.Graph.LinkMarkers': 'arrow',
-    'LiteGraph.Canvas.MaximumFps': 42,
-    'Comfy.Graph.CtrlShiftZoom': true,
-    'Comfy.Graph.LiveSelection': true,
-    'Comfy.Pointer.DoubleClickTime': 250,
-    'Comfy.Pointer.ClickBufferTime': 80,
-    'Comfy.Pointer.ClickDrift': 4,
-    'Comfy.SnapToGrid.GridSize': 16,
-    'pysssss.SnapToGrid': true,
-    'LiteGraph.ContextMenu.Scaling': 1.5,
-    'LiteGraph.Reroute.SplineOffset': 32,
-    'Comfy.Canvas.NavigationMode': 'standard',
-    'Comfy.Canvas.LeftMouseClickBehavior': 'panning',
-    'Comfy.Canvas.MouseWheelScroll': 'panning',
-    'Comfy.EnableWorkflowViewRestore': true,
-    'LiteGraph.Group.SelectChildrenOnClick': true
-  })
-  canvasStore.canvas = reactive(makeCanvas())
-})
-
-describe('useLitegraphSettings', () => {
-  it('applies canvas settings and marks affected layers dirty', () => {
-    useLitegraphSettings()
-
-    expect(canvasStore.canvas?.show_info).toBe(true)
-    expect(canvasStore.canvas?.zoom_speed).toBe(1.25)
-    expect(canvasStore.canvas?.auto_pan_speed).toBe(0.75)
-    expect(canvasStore.canvas?.links_render_mode).toBe(2)
-    expect(canvasStore.canvas?.min_font_size_for_lod).toBe(9)
-    expect(canvasStore.canvas?.linkMarkerShape).toBe('arrow')
-    expect(canvasStore.canvas?.maximumFps).toBe(42)
-    expect(canvasStore.canvas?.dragZoomEnabled).toBe(true)
-    expect(canvasStore.canvas?.liveSelection).toBe(true)
-    expect(canvasStore.canvas?.groupSelectChildren).toBe(true)
-    expect(canvasStore.canvas?.draw).toHaveBeenCalledWith(false, true)
-    expect(canvasStore.canvas?.setDirty).toHaveBeenCalledWith(false, true)
-    expect(canvasStore.canvas?.setDirty).toHaveBeenCalledWith(true, true)
-  })
-
-  it('applies global LiteGraph and pointer settings', () => {
-    useLitegraphSettings()
-
-    expect(LiteGraph.snaps_for_comfy).toBe(true)
-    expect(LiteGraph.snap_highlights_node).toBe(true)
-    expect(LGraphNode.keepAllLinksOnBypass).toBe(true)
-    expect(LiteGraph.middle_click_slot_add_default_node).toBe(true)
-    expect(CanvasPointer.doubleClickTime).toBe(250)
-    expect(CanvasPointer.bufferTime).toBe(80)
-    expect(CanvasPointer.maxClickDrift).toBe(4)
-    expect(LiteGraph.CANVAS_GRID_SIZE).toBe(16)
-    expect(LiteGraph.alwaysSnapToGrid).toBe(true)
-    expect(LiteGraph.context_menu_scaling).toBe(1.5)
-    expect(LiteGraph.Reroute.maxSplineOffset).toBe(32)
-    expect(LiteGraph.canvasNavigationMode).toBe('standard')
-    expect(LiteGraph.macTrackpadGestures).toBe(true)
-    expect(LiteGraph.leftMouseClickBehavior).toBe('panning')
-    expect(LiteGraph.mouseWheelScroll).toBe('panning')
-    expect(LiteGraph.saveViewportWithGraph).toBe(true)
-  })
-
-  it('responds when reactive settings change', async () => {
-    useLitegraphSettings()
-
-    settings.current['Comfy.Graph.CanvasInfo'] = false
-    settings.current['Comfy.Canvas.NavigationMode'] = 'custom'
-    settings.current['LiteGraph.Group.SelectChildrenOnClick'] = false
-    await nextTick()
-
-    expect(canvasStore.canvas?.show_info).toBe(false)
-    expect(canvasStore.canvas?.groupSelectChildren).toBe(false)
-    expect(LiteGraph.canvasNavigationMode).toBe('custom')
-    expect(LiteGraph.macTrackpadGestures).toBe(false)
-  })
-
-  it('updates global settings when the canvas is not mounted yet', () => {
-    canvasStore.canvas = undefined
-
-    useLitegraphSettings()
-
-    expect(LiteGraph.snaps_for_comfy).toBe(true)
-    expect(CanvasPointer.doubleClickTime).toBe(250)
-  })
-
-  it('applies canvas settings once the canvas mounts after setup', async () => {
-    canvasStore.canvas = undefined
-
-    useLitegraphSettings()
-
-    canvasStore.canvas = reactive(makeCanvas())
-    await nextTick()
-
-    expect(canvasStore.canvas?.show_info).toBe(true)
-    expect(canvasStore.canvas?.zoom_speed).toBe(1.25)
-    expect(canvasStore.canvas?.links_render_mode).toBe(2)
-    expect(canvasStore.canvas?.draw).toHaveBeenCalledWith(false, true)
-    expect(canvasStore.canvas?.setDirty).toHaveBeenCalledWith(false, true)
-  })
-})

src/platform/settings/composables/useSettingUI.test.ts

@@ -1,9 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
-import { render } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
-import { createI18n } from 'vue-i18n'
+import { ref } from 'vue'
 
 import {
   getSettingInfo,
@@ -13,68 +11,31 @@ import type { SettingTreeNode } from '@/platform/settings/settingStore'
 
 import { useSettingUI } from './useSettingUI'
 
-const testI18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: {} }
-})
-
-function runSettingUI(...args: Parameters<typeof useSettingUI>) {
-  let result!: ReturnType<typeof useSettingUI>
-  render(
-    defineComponent({
-      setup() {
-        result = useSettingUI(...args)
-        return {}
-      },
-      template: '<div />'
-    }),
-    { global: { plugins: [testI18n] } }
-  )
-  return result
-}
-
-const { auth, billing, dist, featureFlags, vueFlags } = vi.hoisted(() => ({
-  auth: { isLoggedIn: { value: false } },
-  billing: {
-    isActiveSubscription: { value: false },
-    type: { value: 'legacy' as const }
-  },
-  dist: { isCloud: false, isDesktop: false },
-  featureFlags: { teamWorkspacesEnabled: false, userSecretsEnabled: false },
-  vueFlags: { shouldRenderVueNodes: { value: false } }
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (_: string, fallback: string) => fallback })
 }))
 
 vi.mock('@/composables/auth/useCurrentUser', () => ({
-  useCurrentUser: () => ({ isLoggedIn: auth.isLoggedIn })
+  useCurrentUser: () => ({ isLoggedIn: ref(false) })
 }))
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
-  useBillingContext: () => ({
-    isActiveSubscription: billing.isActiveSubscription,
-    type: billing.type
-  })
+  useBillingContext: () => ({ isActiveSubscription: ref(false) })
 }))
 
 vi.mock('@/composables/useFeatureFlags', () => ({
   useFeatureFlags: () => ({
-    flags: featureFlags
+    flags: { teamWorkspacesEnabled: false, userSecretsEnabled: false }
   })
 }))
 
 vi.mock('@/composables/useVueFeatureFlags', () => ({
-  useVueFeatureFlags: () => ({
-    shouldRenderVueNodes: vueFlags.shouldRenderVueNodes
-  })
+  useVueFeatureFlags: () => ({ shouldRenderVueNodes: ref(false) })
 }))
 
 vi.mock('@/platform/distribution/types', () => ({
-  get isCloud() {
-    return dist.isCloud
-  },
-  get isDesktop() {
-    return dist.isDesktop
-  }
+  isCloud: false,
+  isDesktop: false
 }))
 
 vi.mock('@/platform/settings/settingStore', () => ({
@@ -88,7 +49,6 @@ interface MockSettingParams {
   type: string
   defaultValue: unknown
   category?: string[]
-  hideInVueNodes?: boolean
 }
 
 describe('useSettingUI', () => {
@@ -112,24 +72,13 @@ describe('useSettingUI', () => {
       defaultValue: 'dark'
     }
   }
-  let settingsById: Record<string, MockSettingParams>
 
   beforeEach(() => {
     setActivePinia(createTestingPinia())
     vi.clearAllMocks()
-    auth.isLoggedIn.value = false
-    billing.isActiveSubscription.value = false
-    billing.type.value = 'legacy'
-    dist.isCloud = false
-    dist.isDesktop = false
-    featureFlags.teamWorkspacesEnabled = false
-    featureFlags.userSecretsEnabled = false
-    vueFlags.shouldRenderVueNodes.value = false
-    Object.assign(window, { __CONFIG__: {} })
 
-    settingsById = mockSettings
     vi.mocked(useSettingStore).mockReturnValue({
-      settingsById
+      settingsById: mockSettings
     } as ReturnType<typeof useSettingStore>)
 
     vi.mocked(getSettingInfo).mockImplementation((setting) => {
@@ -149,22 +98,22 @@ describe('useSettingUI', () => {
   }
 
   it('defaults to first category when no params are given', () => {
-    const { defaultCategory, settingCategories } = runSettingUI()
+    const { defaultCategory, settingCategories } = useSettingUI()
     expect(defaultCategory.value).toBe(settingCategories.value[0])
   })
 
   it('resolves category from scrollToSettingId', () => {
-    const { defaultCategory, settingCategories } = runSettingUI(
+    const { defaultCategory, settingCategories } = useSettingUI(
       undefined,
       'Comfy.Locale'
     )
-    expect(defaultCategory.value).toBe(
-      findCategory(settingCategories.value, 'Comfy')
-    )
+    const comfyCategory = findCategory(settingCategories.value, 'Comfy')
+    expect(comfyCategory).toBeDefined()
+    expect(defaultCategory.value).toBe(comfyCategory)
   })
 
   it('resolves different category from scrollToSettingId', () => {
-    const { defaultCategory, settingCategories } = runSettingUI(
+    const { defaultCategory, settingCategories } = useSettingUI(
       undefined,
       'Appearance.Theme'
     )
@@ -172,11 +121,12 @@ describe('useSettingUI', () => {
       settingCategories.value,
       'Appearance'
     )
+    expect(appearanceCategory).toBeDefined()
     expect(defaultCategory.value).toBe(appearanceCategory)
   })
 
   it('falls back to first category for unknown scrollToSettingId', () => {
-    const { defaultCategory, settingCategories } = runSettingUI(
+    const { defaultCategory, settingCategories } = useSettingUI(
       undefined,
       'NonExistent.Setting'
     )
@@ -184,192 +134,7 @@ describe('useSettingUI', () => {
   })
 
   it('gives defaultPanel precedence over scrollToSettingId', () => {
-    const { defaultCategory } = runSettingUI('about', 'Comfy.Locale')
+    const { defaultCategory } = useSettingUI('about', 'Comfy.Locale')
     expect(defaultCategory.value.key).toBe('about')
   })
-
-  it('falls back when defaultPanel is not in the menu', () => {
-    const { defaultCategory, settingCategories } = runSettingUI('subscription')
-    expect(defaultCategory.value).toBe(settingCategories.value[0])
-  })
-
-  it('moves floating settings into Other and hides Vue-node-only settings', () => {
-    settingsById = {
-      Floating: {
-        id: 'Floating',
-        name: 'Floating',
-        type: 'boolean',
-        defaultValue: false
-      },
-      'Hidden.Setting': {
-        id: 'Hidden.Setting',
-        name: 'Hidden',
-        type: 'hidden',
-        defaultValue: false
-      },
-      'Vue.Hidden': {
-        id: 'Vue.Hidden',
-        name: 'Vue Hidden',
-        type: 'boolean',
-        defaultValue: false,
-        hideInVueNodes: true
-      }
-    }
-    vi.mocked(useSettingStore).mockReturnValue({
-      settingsById
-    } as ReturnType<typeof useSettingStore>)
-    vueFlags.shouldRenderVueNodes.value = true
-
-    const { settingCategories } = runSettingUI()
-
-    expect(settingCategories.value.map((category) => category.label)).toEqual([
-      'Other'
-    ])
-    expect(
-      settingCategories.value[0].children?.map((node) => node.key)
-    ).toEqual(['root/Floating'])
-  })
-
-  it('adds gated cloud, desktop, workspace, and secrets panels', () => {
-    auth.isLoggedIn.value = true
-    billing.isActiveSubscription.value = true
-    dist.isCloud = true
-    dist.isDesktop = true
-    featureFlags.teamWorkspacesEnabled = true
-    featureFlags.userSecretsEnabled = true
-    Object.assign(window, { __CONFIG__: { subscription_required: true } })
-
-    const { findCategoryByKey, findPanelByKey, navGroups, panels } =
-      runSettingUI()
-
-    expect(panels.value.map((panel) => panel.node.key)).toEqual([
-      'about',
-      'credits',
-      'user',
-      'workspace',
-      'keybinding',
-      'extension',
-      'server-config',
-      'subscription',
-      'secrets'
-    ])
-    expect(navGroups.value.map((group) => group.title)).toEqual([
-      'Workspace',
-      'General'
-    ])
-    expect(findCategoryByKey('secrets')?.key).toBe('secrets')
-    expect(findCategoryByKey('missing')).toBeNull()
-    expect(findPanelByKey('subscription')?.node.key).toBe('subscription')
-    expect(findPanelByKey('missing')).toBeNull()
-  })
-
-  it('builds the legacy account menu from auth and subscription gates', () => {
-    auth.isLoggedIn.value = true
-    billing.isActiveSubscription.value = true
-    dist.isCloud = true
-    featureFlags.userSecretsEnabled = true
-    Object.assign(window, { __CONFIG__: { subscription_required: true } })
-
-    const { navGroups, panels } = runSettingUI()
-
-    expect(panels.value.map((panel) => panel.node.key)).toEqual([
-      'about',
-      'credits',
-      'user',
-      'keybinding',
-      'extension',
-      'subscription',
-      'secrets'
-    ])
-    expect(navGroups.value[0]).toEqual({
-      title: 'Account',
-      items: [
-        {
-          id: 'user',
-          label: 'User',
-          icon: 'icon-[lucide--user]'
-        },
-        {
-          id: 'subscription',
-          label: 'PlanCredits',
-          icon: 'icon-[lucide--credit-card]'
-        },
-        {
-          id: 'secrets',
-          label: 'Secrets',
-          icon: 'icon-[lucide--key-round]'
-        }
-      ]
-    })
-  })
-
-  it('includes credits in legacy account settings when login is not subscription-gated', () => {
-    auth.isLoggedIn.value = true
-    dist.isCloud = true
-
-    const { navGroups } = runSettingUI()
-
-    expect(navGroups.value[0].items.map((item) => item.id)).toEqual([
-      'user',
-      'credits'
-    ])
-  })
-
-  it('builds workspace menus without optional children when gates are closed', () => {
-    dist.isCloud = true
-    featureFlags.teamWorkspacesEnabled = true
-
-    const { navGroups, panels } = runSettingUI()
-
-    expect(panels.value.map((panel) => panel.node.key)).toEqual([
-      'about',
-      'credits',
-      'user',
-      'keybinding',
-      'extension'
-    ])
-    expect(navGroups.value.map((group) => group.title)).toEqual([
-      'Workspace',
-      'General'
-    ])
-    expect(navGroups.value[0].items).toEqual([])
-  })
-
-  it('uses label and fallback icons for custom categories', () => {
-    settingsById = {
-      'Acme.Tools.Toggle': {
-        id: 'Acme.Tools.Toggle',
-        name: 'Toggle',
-        type: 'boolean',
-        defaultValue: false,
-        category: ['Acme Tools', 'Toggles']
-      },
-      PlanSetting: {
-        id: 'PlanSetting',
-        name: 'Plan Setting',
-        type: 'boolean',
-        defaultValue: false,
-        category: ['PlanCredits', 'Credits']
-      }
-    }
-    vi.mocked(useSettingStore).mockReturnValue({
-      settingsById
-    } as ReturnType<typeof useSettingStore>)
-
-    const { navGroups } = runSettingUI()
-    const settingsItems = navGroups.value[1].items
-
-    expect(settingsItems).toEqual([
-      {
-        id: 'root/Acme Tools',
-        label: 'Acme Tools',
-        icon: 'icon-[lucide--plug]'
-      },
-      {
-        id: 'root/PlanCredits',
-        label: 'PlanCredits',
-        icon: 'icon-[lucide--credit-card]'
-      }
-    ])
-  })
 })

src/platform/settings/constants/coreSettings.test.ts

@@ -1,200 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
-import type { SettingParams } from '@/platform/settings/types'
-import type { Keybinding } from '@/platform/keybindings/types'
-
-const mockSettingStore = vi.hoisted(() => ({
-  get: vi.fn(),
-  set: vi.fn(),
-  setMany: vi.fn()
-}))
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => mockSettingStore
-}))
-
-vi.mock('@/platform/distribution/types', () => ({
-  isCloud: false,
-  isDesktop: false,
-  isNightly: false
-}))
-
-vi.mock('@/locales/localeConfig', () => ({
-  getDefaultLocale: () => 'en',
-  SUPPORTED_LOCALE_OPTIONS: [{ value: 'en', text: 'English' }]
-}))
-
-function setting<T = unknown>(id: string): SettingParams<T> {
-  const result = CORE_SETTINGS.find((item) => item.id === id)
-  if (!result) throw new Error(`Missing setting ${id}`)
-  return result as SettingParams<T>
-}
-
-describe('CORE_SETTINGS', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    document.body.className = ''
-    document.body.innerHTML = ''
-  })
-
-  it('uses compact sidebar size below the wide breakpoint', () => {
-    vi.stubGlobal('innerWidth', 1200)
-
-    const defaultValue = setting('Comfy.Sidebar.Size').defaultValue
-
-    expect(typeof defaultValue).toBe('function')
-    expect((defaultValue as () => string)()).toBe('small')
-  })
-
-  it('uses normal sidebar size above the wide breakpoint', () => {
-    vi.stubGlobal('innerWidth', 1600)
-
-    const defaultValue = setting('Comfy.Sidebar.Size').defaultValue
-
-    expect((defaultValue as () => string)()).toBe('normal')
-  })
-
-  it('updates dependent canvas settings when navigation mode changes', async () => {
-    const navigation = setting<string>('Comfy.Canvas.NavigationMode')
-
-    await navigation.onChange?.('standard', 'legacy')
-    expect(mockSettingStore.setMany).toHaveBeenLastCalledWith({
-      'Comfy.Canvas.LeftMouseClickBehavior': 'select',
-      'Comfy.Canvas.MouseWheelScroll': 'panning'
-    })
-
-    await navigation.onChange?.('legacy', 'standard')
-    expect(mockSettingStore.setMany).toHaveBeenLastCalledWith({
-      'Comfy.Canvas.LeftMouseClickBehavior': 'panning',
-      'Comfy.Canvas.MouseWheelScroll': 'zoom'
-    })
-  })
-
-  it('does not update dependent canvas settings on initial navigation setup', async () => {
-    await setting<string>('Comfy.Canvas.NavigationMode').onChange?.('standard')
-
-    expect(mockSettingStore.setMany).not.toHaveBeenCalled()
-  })
-
-  it('keeps preset navigation mode when left-click behavior still matches it', async () => {
-    mockSettingStore.get.mockReturnValue('standard')
-
-    await setting<string>('Comfy.Canvas.LeftMouseClickBehavior').onChange?.(
-      'select'
-    )
-
-    expect(mockSettingStore.set).not.toHaveBeenCalled()
-  })
-
-  it('marks navigation mode custom when left-click behavior diverges from the preset', async () => {
-    mockSettingStore.get.mockReturnValue('standard')
-
-    await setting<string>('Comfy.Canvas.LeftMouseClickBehavior').onChange?.(
-      'panning'
-    )
-
-    expect(mockSettingStore.set).toHaveBeenCalledWith(
-      'Comfy.Canvas.NavigationMode',
-      'custom'
-    )
-  })
-
-  it('does not rewrite custom navigation mode from left-click behavior', async () => {
-    mockSettingStore.get.mockReturnValue('custom')
-
-    await setting<string>('Comfy.Canvas.LeftMouseClickBehavior').onChange?.(
-      'select'
-    )
-
-    expect(mockSettingStore.set).not.toHaveBeenCalled()
-  })
-
-  it('keeps preset navigation mode when wheel behavior still matches it', async () => {
-    mockSettingStore.get.mockReturnValue('legacy')
-
-    await setting<string>('Comfy.Canvas.MouseWheelScroll').onChange?.('zoom')
-
-    expect(mockSettingStore.set).not.toHaveBeenCalled()
-  })
-
-  it('marks navigation mode custom when wheel behavior diverges from the preset', async () => {
-    mockSettingStore.get.mockReturnValue('legacy')
-
-    await setting<string>('Comfy.Canvas.MouseWheelScroll').onChange?.('panning')
-
-    expect(mockSettingStore.set).toHaveBeenCalledWith(
-      'Comfy.Canvas.NavigationMode',
-      'custom'
-    )
-  })
-
-  it('toggles the dev-mode API save button when present', () => {
-    const button = document.createElement('button')
-    button.id = 'comfy-dev-save-api-button'
-    document.body.append(button)
-
-    const devMode = setting<boolean>('Comfy.DevMode')
-    devMode.onChange?.(true)
-    expect(button.style.display).toBe('flex')
-
-    devMode.onChange?.(false)
-    expect(button.style.display).toBe('none')
-  })
-
-  it('ignores the dev-mode button handler when the element is absent', () => {
-    expect(() =>
-      setting<boolean>('Comfy.DevMode').onChange?.(true)
-    ).not.toThrow()
-  })
-
-  it('toggles the disabled animations body class', () => {
-    const animations = setting<boolean>('Comfy.Appearance.DisableAnimations')
-
-    animations.onChange?.(true)
-    expect(document.body.classList.contains('disable-animations')).toBe(true)
-
-    animations.onChange?.(false)
-    expect(document.body.classList.contains('disable-animations')).toBe(false)
-  })
-
-  it('migrates deprecated menu and workflow tab values', () => {
-    expect(
-      setting<string>('Comfy.UseNewMenu').migrateDeprecatedValue?.('Floating')
-    ).toBe('Top')
-    expect(
-      setting<string>('Comfy.UseNewMenu').migrateDeprecatedValue?.('Bottom')
-    ).toBe('Top')
-    expect(
-      setting<string>('Comfy.UseNewMenu').migrateDeprecatedValue?.('Top')
-    ).toBe('Top')
-    expect(
-      setting<string>(
-        'Comfy.Workflow.WorkflowTabsPosition'
-      ).migrateDeprecatedValue?.('Topbar (2nd-row)')
-    ).toBe('Topbar')
-  })
-
-  it('migrates graph-canvas keybinding target selectors', () => {
-    const bindings = [
-      {
-        combo: { key: 'a' },
-        commandId: 'test.command',
-        targetSelector: '#graph-canvas'
-      },
-      {
-        combo: { key: 'b' },
-        commandId: 'other.command',
-        targetSelector: '#other'
-      }
-    ]
-
-    const migrated =
-      setting<Keybinding[]>(
-        'Comfy.Keybinding.UnsetBindings'
-      ).migrateDeprecatedValue?.(bindings) ?? []
-
-    expect(migrated[0].targetElementId).toBe('graph-canvas-container')
-    expect(migrated[1].targetElementId).toBeUndefined()
-  })
-})

src/platform/telemetry/TelemetryRegistry.test.ts

@@ -30,39 +30,6 @@ describe('TelemetryRegistry', () => {
     expect(b.trackSearchQuery).toHaveBeenCalledExactlyOnceWith(payload)
   })
 
-  it('dispatches trackBeginCheckout with intent metadata to every provider', () => {
-    const a: TelemetryProvider = { trackBeginCheckout: vi.fn() }
-    const b: TelemetryProvider = {}
-    const registry = new TelemetryRegistry()
-    registry.registerProvider(a)
-    registry.registerProvider(b)
-
-    const metadata = {
-      user_id: 'user-1',
-      tier: 'pro' as const,
-      cycle: 'monthly' as const,
-      checkout_type: 'new' as const,
-      payment_intent_source: 'subscribe_to_run' as const
-    }
-    registry.trackBeginCheckout(metadata)
-
-    expect(a.trackBeginCheckout).toHaveBeenCalledExactlyOnceWith(metadata)
-  })
-
-  it('dispatches trackAddApiCreditButtonClicked with its source', () => {
-    const provider: TelemetryProvider = {
-      trackAddApiCreditButtonClicked: vi.fn()
-    }
-    const registry = new TelemetryRegistry()
-    registry.registerProvider(provider)
-
-    registry.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
-
-    expect(
-      provider.trackAddApiCreditButtonClicked
-    ).toHaveBeenCalledExactlyOnceWith({ source: 'credits_panel' })
-  })
-
   it('skips providers that do not implement trackSearchQuery', () => {
     const empty: TelemetryProvider = {}
     const registry = new TelemetryRegistry()

src/platform/telemetry/TelemetryRegistry.ts

@@ -1,7 +1,6 @@
 import type { AuditLog } from '@/services/customerEventsService'
 
 import type {
-  AddCreditsClickMetadata,
   AuthMetadata,
   BeginCheckoutMetadata,
   DefaultViewSetMetadata,
@@ -100,10 +99,8 @@ export class TelemetryRegistry implements TelemetryDispatcher {
     this.dispatch((provider) => provider.trackMonthlySubscriptionCancelled?.())
   }
 
-  trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
-    this.dispatch((provider) =>
-      provider.trackAddApiCreditButtonClicked?.(metadata)
-    )
+  trackAddApiCreditButtonClicked(): void {
+    this.dispatch((provider) => provider.trackAddApiCreditButtonClicked?.())
   }
 
   trackApiCreditTopupButtonPurchaseClicked(amount: number): void {

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

@@ -313,42 +313,6 @@ describe('PostHogTelemetryProvider', () => {
       )
     })
 
-    it('captures begin_checkout with intent metadata', async () => {
-      const provider = createProvider()
-      await vi.dynamicImportSettled()
-
-      provider.trackBeginCheckout({
-        user_id: 'user-1',
-        tier: 'pro',
-        cycle: 'monthly',
-        checkout_type: 'new',
-        payment_intent_source: 'subscribe_to_run'
-      })
-
-      expect(hoisted.mockCapture).toHaveBeenCalledWith(
-        TelemetryEvents.BEGIN_CHECKOUT,
-        {
-          user_id: 'user-1',
-          tier: 'pro',
-          cycle: 'monthly',
-          checkout_type: 'new',
-          payment_intent_source: 'subscribe_to_run'
-        }
-      )
-    })
-
-    it('captures add-credit clicks with their source', async () => {
-      const provider = createProvider()
-      await vi.dynamicImportSettled()
-
-      provider.trackAddApiCreditButtonClicked({ source: 'credits_panel' })
-
-      expect(hoisted.mockCapture).toHaveBeenCalledWith(
-        TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED,
-        { source: 'credits_panel' }
-      )
-    })
-
     it('captures share attribution events', async () => {
       const provider = createProvider()
       await vi.dynamicImportSettled()

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

@@ -10,9 +10,7 @@ import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import type { RemoteConfig } from '@/platform/remoteConfig/types'
 
 import type {
-  AddCreditsClickMetadata,
   AuthMetadata,
-  BeginCheckoutMetadata,
   DefaultViewSetMetadata,
   EnterLinearMetadata,
   ShareFlowMetadata,
@@ -352,12 +350,8 @@ export class PostHogTelemetryProvider implements TelemetryProvider {
     this.trackEvent(eventName, metadata)
   }
 
-  trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
-    this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED, metadata)
-  }
-
-  trackBeginCheckout(metadata: BeginCheckoutMetadata): void {
-    this.trackEvent(TelemetryEvents.BEGIN_CHECKOUT, metadata)
+  trackAddApiCreditButtonClicked(): void {
+    this.trackEvent(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
   }
 
   trackMonthlySubscriptionSucceeded(

src/platform/telemetry/providers/host/HostTelemetrySink.test.ts

@@ -115,17 +115,6 @@ describe('HostTelemetrySink', () => {
     )
   })
 
-  it('forwards add-credit clicks with their source', () => {
-    new HostTelemetrySink().trackAddApiCreditButtonClicked({
-      source: 'avatar_menu'
-    })
-
-    expect(state.capture).toHaveBeenCalledExactlyOnceWith(
-      TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED,
-      { source: 'avatar_menu' }
-    )
-  })
-
   it('does nothing when the host bridge is absent', () => {
     delete window.__comfyDesktop2
 

src/platform/telemetry/providers/host/HostTelemetrySink.ts

@@ -10,7 +10,6 @@ import {
 import type { AuditLog } from '@/services/customerEventsService'
 
 import type {
-  AddCreditsClickMetadata,
   AuthMetadata,
   BeginCheckoutMetadata,
   DefaultViewSetMetadata,
@@ -127,8 +126,8 @@ export class HostTelemetrySink implements TelemetryProvider {
     this.capture(TelemetryEvents.MONTHLY_SUBSCRIPTION_CANCELLED)
   }
 
-  trackAddApiCreditButtonClicked(metadata?: AddCreditsClickMetadata): void {
-    this.capture(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED, metadata)
+  trackAddApiCreditButtonClicked(): void {
+    this.capture(TelemetryEvents.ADD_API_CREDIT_BUTTON_CLICKED)
   }
 
   trackApiCreditTopupButtonPurchaseClicked(amount: number): void {

src/platform/telemetry/types.ts

@@ -12,29 +12,12 @@
  * 3. Check dist/assets/*.js files contain no tracking code
  */
 
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { AuditLog } from '@/services/customerEventsService'
 import type { AppMode } from '@/utils/appMode'
 
-export type PaymentIntentSource =
-  | 'subscription_required'
-  | 'out_of_credits'
-  | 'top_up_blocked'
-  | 'deep_link'
-  | 'subscribe_to_run'
-  | 'subscribe_now_button'
-  | 'upgrade_to_add_credits'
-  | 'settings_billing_panel'
-  | 'avatar_menu_plans'
-  | 'team_members_panel'
-  | 'invite_member_upsell'
-  | 'upload_model_upgrade'
-  | 'team_upgrade_resume'
-
-export type SubscriptionCheckoutType = 'new' | 'change'
-export type SubscriptionCheckoutTier = TierKey | 'team'
-
 /**
  * Authentication metadata for sign-up tracking
  */
@@ -443,23 +426,16 @@ export interface CheckoutAttributionMetadata {
 
 export interface SubscriptionMetadata {
   current_tier?: string
-  reason?: PaymentIntentSource
-}
-
-export interface AddCreditsClickMetadata {
-  source: 'credits_panel' | 'avatar_menu' | 'settings_billing_panel'
+  reason?: SubscriptionDialogReason
 }
 
 export interface BeginCheckoutMetadata
   extends Record<string, unknown>, CheckoutAttributionMetadata {
   user_id: string
-  tier: SubscriptionCheckoutTier
+  tier: TierKey
   cycle: BillingCycle
-  checkout_type: SubscriptionCheckoutType
-  checkout_attempt_id?: string
-  billing_op_id?: string
+  checkout_type: 'new' | 'change'
   previous_tier?: TierKey
-  payment_intent_source?: PaymentIntentSource
 }
 
 interface EcommerceItemMetadata {
@@ -481,9 +457,8 @@ export interface SubscriptionSuccessMetadata extends Record<string, unknown> {
   checkout_attempt_id: string
   tier: TierKey
   cycle: BillingCycle
-  checkout_type: SubscriptionCheckoutType
+  checkout_type: 'new' | 'change'
   previous_tier?: TierKey
-  payment_intent_source?: PaymentIntentSource
   value: number
   currency: string
   ecommerce: EcommerceMetadata
@@ -514,7 +489,7 @@ export interface TelemetryProvider {
     metadata?: SubscriptionSuccessMetadata
   ): void
   trackMonthlySubscriptionCancelled?(): void
-  trackAddApiCreditButtonClicked?(metadata?: AddCreditsClickMetadata): void
+  trackAddApiCreditButtonClicked?(): void
   trackApiCreditTopupButtonPurchaseClicked?(amount: number): void
   trackApiCreditTopupSucceeded?(): void
   trackWorkspaceInviteSent?(metadata: WorkspaceInviteMetadata): void

src/platform/workspace/components/CurrentUserPopoverWorkspace.vue

@@ -321,7 +321,7 @@ const handleOpenWorkspaceSettings = () => {
 }
 
 const handleOpenPlansAndPricing = () => {
-  subscriptionDialog.showPricingTable({ reason: 'avatar_menu_plans' })
+  subscriptionDialog.showPricingTable()
   emit('close')
 }
 
@@ -336,12 +336,13 @@ const handleOpenPlanAndCreditsSettings = () => {
 }
 
 const handleUpgradeToAddCredits = () => {
-  subscriptionDialog.showPricingTable({ reason: 'upgrade_to_add_credits' })
+  subscriptionDialog.showPricingTable()
   emit('close')
 }
 
 const handleTopUp = () => {
-  useTelemetry()?.trackAddApiCreditButtonClicked({ source: 'avatar_menu' })
+  // Track purchase credits entry from avatar popover
+  useTelemetry()?.trackAddApiCreditButtonClicked()
   dialogService.showTopUpCreditsDialog()
   emit('close')
 }

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -391,13 +391,12 @@ const showZeroState = computed(
 )
 
 function handleSubscribeWorkspace() {
-  showSubscriptionDialog({ reason: 'settings_billing_panel' })
+  showSubscriptionDialog()
 }
 
 function handleUpgrade() {
-  if (isFreeTierPlan.value)
-    showPricingTable({ reason: 'settings_billing_panel' })
-  else showSubscriptionDialog({ reason: 'settings_billing_panel' })
+  if (isFreeTierPlan.value) showPricingTable()
+  else showSubscriptionDialog()
 }
 
 function handleViewMoreDetails() {

src/platform/workspace/components/SubscriptionRequiredDialogContentUnified.vue

@@ -113,7 +113,7 @@ import { cn } from '@comfyorg/tailwind-utils'
 import { useEventListener } from '@vueuse/core'
 
 import Button from '@/components/ui/button/Button.vue'
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'
 
 import SubscriptionAddPaymentPreviewWorkspace from './SubscriptionAddPaymentPreviewWorkspace.vue'
@@ -123,7 +123,7 @@ import UnifiedPricingTable from './UnifiedPricingTable.vue'
 
 const { onClose, reason, initialPlanMode } = defineProps<{
   onClose: () => void
-  reason?: PaymentIntentSource
+  reason?: SubscriptionDialogReason
   initialPlanMode?: 'personal' | 'team'
 }>()
 
@@ -152,7 +152,7 @@ const {
   handleConfirmTransition,
   handleTeamSubscribe,
   handleResubscribe
-} = useSubscriptionCheckout(emit, reason)
+} = useSubscriptionCheckout(emit)
 
 // Backspace mirrors the back arrow on the confirm step, but never while an
 // editable element is focused (let it delete text there).

src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts

@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 
 import SubscriptionRequiredDialogContentWorkspace from './SubscriptionRequiredDialogContentWorkspace.vue'
 
@@ -17,10 +17,25 @@ const mockHandleResubscribe = vi.fn()
 const mockHandleSuccessClose = vi.fn()
 const mockCheckoutStep = ref<'pricing' | 'preview' | 'success'>('pricing')
 const mockPreviewData = ref<{ transition_type: string } | null>(null)
-const mockUseSubscriptionCheckout = vi.hoisted(() => vi.fn())
 
 vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
-  useSubscriptionCheckout: mockUseSubscriptionCheckout
+  useSubscriptionCheckout: () => ({
+    checkoutStep: mockCheckoutStep,
+    isLoadingPreview: ref(false),
+    loadingTier: ref(null),
+    isSubscribing: ref(false),
+    isResubscribing: ref(false),
+    previewData: mockPreviewData,
+    selectedTierKey: ref('standard'),
+    selectedBillingCycle: ref('yearly'),
+    isPolling: ref(false),
+    handleSubscribeClick: mockHandleSubscribeClick,
+    handleBackToPricing: mockHandleBackToPricing,
+    handleAddCreditCard: mockHandleAddCreditCard,
+    handleConfirmTransition: mockHandleConfirmTransition,
+    handleResubscribe: mockHandleResubscribe,
+    handleSuccessClose: mockHandleSuccessClose
+  })
 }))
 
 const i18n = createI18n({
@@ -76,7 +91,7 @@ const SuccessStub = {
 function renderComponent(
   props: {
     onClose?: () => void
-    reason?: PaymentIntentSource
+    reason?: SubscriptionDialogReason
     isPersonal?: boolean
   } = {}
 ) {
@@ -106,23 +121,6 @@ function renderComponent(
 describe('SubscriptionRequiredDialogContentWorkspace', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockUseSubscriptionCheckout.mockReturnValue({
-      checkoutStep: mockCheckoutStep,
-      isLoadingPreview: ref(false),
-      loadingTier: ref(null),
-      isSubscribing: ref(false),
-      isResubscribing: ref(false),
-      previewData: mockPreviewData,
-      selectedTierKey: ref('standard'),
-      selectedBillingCycle: ref('yearly'),
-      isPolling: ref(false),
-      handleSubscribeClick: mockHandleSubscribeClick,
-      handleBackToPricing: mockHandleBackToPricing,
-      handleAddCreditCard: mockHandleAddCreditCard,
-      handleConfirmTransition: mockHandleConfirmTransition,
-      handleResubscribe: mockHandleResubscribe,
-      handleSuccessClose: mockHandleSuccessClose
-    })
     mockCheckoutStep.value = 'pricing'
     mockPreviewData.value = null
   })
@@ -134,15 +132,6 @@ describe('SubscriptionRequiredDialogContentWorkspace', () => {
     expect(screen.queryByTestId('transition-preview')).not.toBeInTheDocument()
   })
 
-  it('passes the reason into subscription checkout', () => {
-    renderComponent({ reason: 'out_of_credits' })
-
-    expect(mockUseSubscriptionCheckout).toHaveBeenCalledWith(
-      expect.any(Function),
-      'out_of_credits'
-    )
-  })
-
   it('shows the team workspace header by default', () => {
     renderComponent()
     expect(screen.getByText('Team Workspace')).toBeInTheDocument()

src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue

@@ -116,7 +116,7 @@
 import { cn } from '@comfyorg/tailwind-utils'
 
 import Button from '@/components/ui/button/Button.vue'
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'
 
 import PricingTableWorkspace from './PricingTableWorkspace.vue'
@@ -130,7 +130,7 @@ const {
   isPersonal = false
 } = defineProps<{
   onClose: () => void
-  reason?: PaymentIntentSource
+  reason?: SubscriptionDialogReason
   isPersonal?: boolean
 }>()
 
@@ -154,7 +154,7 @@ const {
   handleConfirmTransition,
   handleResubscribe,
   handleSuccessClose
-} = useSubscriptionCheckout(emit, reason)
+} = useSubscriptionCheckout(emit)
 </script>
 
 <style scoped>

src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue

@@ -61,9 +61,6 @@ function onDismiss() {
 
 function onUpgrade() {
   dialogStore.closeDialog({ key: 'invite-member-upsell' })
-  subscriptionDialog.show({
-    planMode: 'team',
-    reason: 'invite_member_upsell'
-  })
+  subscriptionDialog.show({ planMode: 'team' })
 }
 </script>

src/platform/workspace/composables/useMembersPanel.ts

@@ -277,7 +277,7 @@ export function useMembersPanel() {
   }
 
   function showTeamPlans() {
-    subscriptionDialog.show({ planMode: 'team', reason: 'team_members_panel' })
+    subscriptionDialog.show({ planMode: 'team' })
   }
 
   return {

src/platform/workspace/composables/useSubscriptionCheckout.test.ts

@@ -1,9 +1,8 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, reactive } from 'vue'
+import { computed } from 'vue'
 
-import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import type { Plan } from '@/platform/workspace/api/workspaceApi'
 
 import { findPlanSlug } from './useSubscriptionCheckout'
@@ -76,9 +75,7 @@ const {
   mockPlans,
   mockResubscribe,
   mockToastAdd,
-  mockStartOperation,
-  mockTrackBeginCheckout,
-  mockUserId
+  mockStartOperation
 } = vi.hoisted(() => ({
   mockSubscribe: vi.fn(),
   mockPreviewSubscribe: vi.fn(),
@@ -87,9 +84,7 @@ const {
   mockPlans: { value: [] as Plan[] },
   mockResubscribe: vi.fn(),
   mockToastAdd: vi.fn(),
-  mockStartOperation: vi.fn(),
-  mockTrackBeginCheckout: vi.fn(),
-  mockUserId: { value: 'user-1' as string | null }
+  mockStartOperation: vi.fn()
 }))
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
@@ -124,14 +119,7 @@ vi.mock('primevue/usetoast', () => ({
 }))
 
 vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({
-    trackMonthlySubscriptionSucceeded: vi.fn(),
-    trackBeginCheckout: mockTrackBeginCheckout
-  })
-}))
-
-vi.mock('@/stores/authStore', () => ({
-  useAuthStore: () => reactive({ userId: computed(() => mockUserId.value) })
+  useTelemetry: () => ({ trackMonthlySubscriptionSucceeded: vi.fn() })
 }))
 
 vi.mock('vue-i18n', async (importOriginal) => {
@@ -147,10 +135,10 @@ vi.mock('vue-i18n', async (importOriginal) => {
 describe('useSubscriptionCheckout', () => {
   let emit: ReturnType<typeof vi.fn>
 
-  async function setup(paymentIntentSource?: PaymentIntentSource) {
+  async function setup() {
     const { useSubscriptionCheckout } =
       await import('./useSubscriptionCheckout')
-    return useSubscriptionCheckout(emit as never, paymentIntentSource)
+    return useSubscriptionCheckout(emit as never)
   }
 
   beforeEach(() => {
@@ -158,7 +146,6 @@ describe('useSubscriptionCheckout', () => {
     vi.clearAllMocks()
     mockPlans.value = allPlans()
     mockStartOperation.mockResolvedValue({ status: 'succeeded' })
-    mockUserId.value = 'user-1'
     emit = vi.fn()
   })
 
@@ -472,13 +459,6 @@ describe('useSubscriptionCheckout', () => {
         cancelUrl: 'https://platform.comfy.org/payment/failed'
       })
       expect(checkout.checkoutStep.value).toBe('success')
-      expect(mockTrackBeginCheckout).toHaveBeenCalledWith(
-        expect.objectContaining({
-          tier: 'team',
-          checkout_type: 'new',
-          billing_op_id: 'op-team-1'
-        })
-      )
     })
 
     it('uses the annual plan slug for the yearly cycle', async () => {
@@ -573,39 +553,6 @@ describe('useSubscriptionCheckout', () => {
           detail: 'Team payment failed'
         })
       )
-      expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
-    })
-
-    it('keeps team checkout_type as change when the preview request fails', async () => {
-      const checkout = await setup()
-      mockPreviewSubscribe.mockRejectedValueOnce(new Error('not supported'))
-      await checkout.handleSubscribeTeamClick({
-        stop: {
-          id: 'team_1400',
-          usd: 1400,
-          credits: 295_400,
-          discountedUsd: 1295
-        },
-        billingCycle: 'monthly',
-        isChange: true
-      })
-      mockSubscribe.mockResolvedValueOnce({
-        status: 'subscribed',
-        billing_op_id: 'op-team-change'
-      })
-      mockFetchStatus.mockResolvedValueOnce(undefined)
-      mockFetchBalance.mockResolvedValueOnce(undefined)
-
-      await checkout.handleTeamSubscribe()
-
-      expect(mockTrackBeginCheckout).toHaveBeenCalledWith(
-        expect.objectContaining({
-          tier: 'team',
-          cycle: 'monthly',
-          checkout_type: 'change',
-          billing_op_id: 'op-team-change'
-        })
-      )
     })
   })
 
@@ -656,47 +603,6 @@ describe('useSubscriptionCheckout', () => {
       expect(checkout.checkoutStep.value).toBe('success')
     })
 
-    it('skips begin_checkout when no user id is available', async () => {
-      mockUserId.value = null
-      const checkout = await setup('subscribe_to_run')
-      checkout.selectedTierKey.value = 'standard'
-      checkout.selectedBillingCycle.value = 'yearly'
-      mockSubscribe.mockResolvedValueOnce({
-        status: 'subscribed',
-        billing_op_id: 'op-1'
-      })
-      mockFetchStatus.mockResolvedValueOnce(undefined)
-      mockFetchBalance.mockResolvedValueOnce(undefined)
-
-      await checkout.handleAddCreditCard()
-
-      expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
-      mockUserId.value = 'user-1'
-    })
-
-    it('fires begin_checkout carrying the payment intent source', async () => {
-      const checkout = await setup('subscribe_to_run')
-      checkout.selectedTierKey.value = 'standard'
-      checkout.selectedBillingCycle.value = 'yearly'
-      mockSubscribe.mockResolvedValueOnce({
-        status: 'subscribed',
-        billing_op_id: 'op-1'
-      })
-      mockFetchStatus.mockResolvedValueOnce(undefined)
-      mockFetchBalance.mockResolvedValueOnce(undefined)
-
-      await checkout.handleAddCreditCard()
-
-      expect(mockTrackBeginCheckout).toHaveBeenCalledWith({
-        user_id: 'user-1',
-        tier: 'standard',
-        cycle: 'yearly',
-        checkout_type: 'new',
-        billing_op_id: 'op-1',
-        payment_intent_source: 'subscribe_to_run'
-      })
-    })
-
     it('opens payment URL when needs_payment_method', async () => {
       const checkout = await setup()
       checkout.selectedTierKey.value = 'standard'
@@ -814,7 +720,6 @@ describe('useSubscriptionCheckout', () => {
           detail: 'Payment failed'
         })
       )
-      expect(mockTrackBeginCheckout).not.toHaveBeenCalled()
     })
   })
 

src/platform/workspace/composables/useSubscriptionCheckout.ts

@@ -9,26 +9,16 @@ import type { TeamPlanSelection } from '@/platform/cloud/subscription/constants/
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import { useTelemetry } from '@/platform/telemetry'
-import type {
-  PaymentIntentSource,
-  SubscriptionCheckoutType
-} from '@/platform/telemetry/types'
 import type {
   Plan,
   PreviewSubscribeResponse,
   SubscribeResponse
 } from '@/platform/workspace/api/workspaceApi'
 import { useBillingOperationStore } from '@/platform/workspace/stores/billingOperationStore'
-import { trackWorkspaceCheckoutStarted } from '@/platform/workspace/utils/workspaceCheckoutTelemetry'
 
 type CheckoutStep = 'pricing' | 'preview' | 'success'
 type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
 
-interface SelectedTeamCheckout {
-  stop: TeamPlanSelection
-  checkoutType: SubscriptionCheckoutType
-}
-
 /**
  * Which screen the `preview` step shows. Only a change prorates: a team change
  * carries `previewData` (handleSubscribeTeamClick sets it solely for an immediate
@@ -55,12 +45,9 @@ export function findPlanSlug(
   return plan?.slug ?? null
 }
 
-export function useSubscriptionCheckout(
-  emit: {
-    (e: 'close', subscribed: boolean): void
-  },
-  paymentIntentSource?: PaymentIntentSource
-) {
+export function useSubscriptionCheckout(emit: {
+  (e: 'close', subscribed: boolean): void
+}) {
   const { t } = useI18n()
   const toast = useToast()
   const {
@@ -81,16 +68,13 @@ export function useSubscriptionCheckout(
   const isResubscribing = ref(false)
   const previewData = ref<PreviewSubscribeResponse | null>(null)
   const selectedTierKey = ref<CheckoutTierKey | null>(null)
-  const selectedTeamCheckout = ref<SelectedTeamCheckout | null>(null)
+  const selectedTeamStop = ref<TeamPlanSelection | null>(null)
   const selectedBillingCycle = ref<BillingCycle>('yearly')
   const isPolling = computed(() => billingOperationStore.hasPendingOperations)
-  const selectedTeamStop = computed(
-    () => selectedTeamCheckout.value?.stop ?? null
-  )
-  const isTeamCheckout = computed(() => selectedTeamCheckout.value !== null)
+  const isTeamCheckout = computed(() => selectedTeamStop.value !== null)
 
   const previewVariant = computed<PreviewVariant>(() => {
-    if (selectedTeamCheckout.value) {
+    if (selectedTeamStop.value) {
       return previewData.value ? 'team-change' : 'team-new'
     }
     if (previewData.value) {
@@ -170,10 +154,7 @@ export function useSubscriptionCheckout(
     billingCycle: BillingCycle
     isChange?: boolean
   }) {
-    selectedTeamCheckout.value = {
-      stop: payload.stop,
-      checkoutType: payload.isChange ? 'change' : 'new'
-    }
+    selectedTeamStop.value = payload.stop
     selectedBillingCycle.value = payload.billingCycle
     selectedTierKey.value = null
     previewData.value = null
@@ -201,7 +182,7 @@ export function useSubscriptionCheckout(
   function handleBackToPricing() {
     checkoutStep.value = 'pricing'
     previewData.value = null
-    selectedTeamCheckout.value = null
+    selectedTeamStop.value = null
   }
 
   function handleSuccessClose() {
@@ -209,34 +190,20 @@ export function useSubscriptionCheckout(
   }
 
   async function handleSubscription() {
-    const tierKey = selectedTierKey.value
-    if (!tierKey) return
-
-    const billingCycle = selectedBillingCycle.value
-    const checkoutType =
-      previewData.value &&
-      previewData.value.transition_type !== 'new_subscription'
-        ? 'change'
-        : 'new'
+    if (!selectedTierKey.value) return
 
     isSubscribing.value = true
     try {
-      const planSlug = getApiPlanSlug(tierKey, billingCycle)
+      const planSlug = getApiPlanSlug(
+        selectedTierKey.value,
+        selectedBillingCycle.value
+      )
       if (!planSlug) return
       const response = await subscribe(planSlug, {
         returnUrl: `${getComfyPlatformBaseUrl()}/payment/success`,
         cancelUrl: `${getComfyPlatformBaseUrl()}/payment/failed`
       })
 
-      if (response) {
-        trackWorkspaceCheckoutStarted({
-          tier: tierKey,
-          cycle: billingCycle,
-          checkoutType,
-          billingOpId: response.billing_op_id,
-          paymentIntentSource
-        })
-      }
       await handleSubscribeResponse(response)
     } catch (error) {
       showSubscribeError(error)
@@ -302,8 +269,8 @@ export function useSubscriptionCheckout(
   }
 
   async function handleTeamSubscription() {
-    const teamCheckout = selectedTeamCheckout.value
-    if (!teamCheckout?.stop.id) {
+    const stop = selectedTeamStop.value
+    if (!stop?.id) {
       toast.add({
         severity: 'error',
         summary: t('subscription.teamPlan.name'),
@@ -312,28 +279,16 @@ export function useSubscriptionCheckout(
       return
     }
 
-    const { stop, checkoutType } = teamCheckout
-    const billingCycle = selectedBillingCycle.value
-
     isSubscribing.value = true
     try {
-      const planSlug = getTeamPlanSlug(billingCycle)
+      const planSlug = getTeamPlanSlug(selectedBillingCycle.value)
       const response = await subscribe(planSlug, {
         teamCreditStopId: stop.id,
-        billingCycle,
+        billingCycle: selectedBillingCycle.value,
         returnUrl: `${getComfyPlatformBaseUrl()}/payment/success`,
         cancelUrl: `${getComfyPlatformBaseUrl()}/payment/failed`
       })
 
-      if (response) {
-        trackWorkspaceCheckoutStarted({
-          tier: 'team',
-          cycle: billingCycle,
-          checkoutType,
-          billingOpId: response.billing_op_id,
-          paymentIntentSource
-        })
-      }
       await handleSubscribeResponse(response)
     } catch (error) {
       showSubscribeError(error)

src/platform/workspace/composables/useWorkspaceBilling.ts

@@ -2,7 +2,6 @@ import { computed, ref, shallowRef } from 'vue'
 
 import { useBillingPlans } from '@/platform/cloud/subscription/composables/useBillingPlans'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
-import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type {
   BillingBalanceResponse,
   BillingStatusResponse,
@@ -276,12 +275,12 @@ export function useWorkspaceBilling(): BillingState & BillingActions {
   async function requireActiveSubscription(): Promise<void> {
     await fetchStatus()
     if (!isActiveSubscription.value) {
-      subscriptionDialog.show({ reason: 'subscription_required' })
+      subscriptionDialog.show()
     }
   }
 
-  function showSubscriptionDialog(options?: SubscriptionDialogOptions): void {
-    subscriptionDialog.show(options)
+  function showSubscriptionDialog(): void {
+    subscriptionDialog.show()
   }
 
   return {

src/platform/workspace/utils/workspaceCheckoutTelemetry.ts

@@ -1,38 +0,0 @@
-import { useTelemetry } from '@/platform/telemetry'
-import type {
-  PaymentIntentSource,
-  SubscriptionCheckoutTier,
-  SubscriptionCheckoutType
-} from '@/platform/telemetry/types'
-import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
-import { useAuthStore } from '@/stores/authStore'
-
-interface TrackWorkspaceCheckoutStartedOptions {
-  tier: SubscriptionCheckoutTier
-  cycle: BillingCycle
-  checkoutType: SubscriptionCheckoutType
-  billingOpId: string
-  paymentIntentSource?: PaymentIntentSource
-}
-
-export function trackWorkspaceCheckoutStarted({
-  tier,
-  cycle,
-  checkoutType,
-  billingOpId,
-  paymentIntentSource
-}: TrackWorkspaceCheckoutStartedOptions) {
-  const { userId } = useAuthStore()
-  if (!userId) return
-
-  useTelemetry()?.trackBeginCheckout({
-    user_id: userId,
-    tier,
-    cycle,
-    checkout_type: checkoutType,
-    billing_op_id: billingOpId,
-    ...(paymentIntentSource
-      ? { payment_intent_source: paymentIntentSource }
-      : {})
-  })
-}

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

@@ -1,208 +0,0 @@
-import { createTestingPinia } from '@pinia/testing'
-import { render, screen, within } from '@testing-library/vue'
-import { setActivePinia } from 'pinia'
-import { createI18n } from 'vue-i18n'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { NodeError } from '@/schemas/apiSchema'
-import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
-import { LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID } from '@/renderer/extensions/linearMode/linearRunErrorWarningIds'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { toNodeId } from '@/types/nodeId'
-
-const billingMock = vi.hoisted(() => ({
-  isActiveSubscription: true
-}))
-
-const overlayMock = vi.hoisted(() => ({
-  overlayMessage: 'KSampler is missing a required input: model',
-  overlayTitle: 'Required input missing'
-}))
-
-vi.mock('@/composables/billing/useBillingContext', () => ({
-  useBillingContext: () => ({
-    isActiveSubscription: billingMock.isActiveSubscription
-  })
-}))
-
-vi.mock('@/components/error/useErrorOverlayState', () => ({
-  useErrorOverlayState: () => ({
-    overlayMessage: overlayMock.overlayMessage,
-    overlayTitle: overlayMock.overlayTitle
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      linearMode: {
-        error: {
-          goto: 'Show errors in graph'
-        },
-        mobileNoWorkflow: 'No workflow',
-        runCount: 'Run count',
-        viewJob: 'View job'
-      },
-      menu: {
-        run: 'Run'
-      },
-      menuLabels: {
-        publish: 'Publish'
-      },
-      queue: {
-        jobAddedToQueue: 'Job added to queue',
-        jobQueueing: 'Queueing'
-      }
-    }
-  }
-})
-
-const nodeErrors: Record<string, NodeError> = {
-  '1': {
-    class_type: 'TestNode',
-    dependent_outputs: [],
-    errors: [
-      {
-        type: 'required_input_missing',
-        message: 'Missing input',
-        details: '',
-        extra_info: { input_name: 'prompt' }
-      }
-    ]
-  }
-}
-
-function renderControls({
-  hasError = false,
-  isActiveSubscription = true,
-  mobile = false
-}: {
-  hasError?: boolean
-  isActiveSubscription?: boolean
-  mobile?: boolean
-} = {}) {
-  billingMock.isActiveSubscription = isActiveSubscription
-
-  const pinia = createTestingPinia({
-    createSpy: vi.fn,
-    stubActions: false
-  })
-  setActivePinia(pinia)
-
-  useAppModeStore().selectedOutputs = [toNodeId(1)]
-  if (hasError) {
-    useExecutionErrorStore().lastNodeErrors = nodeErrors
-  }
-
-  const toastTarget = document.createElement('div')
-
-  return render(LinearControls, {
-    props: { mobile, toastTo: toastTarget },
-    global: {
-      plugins: [pinia, i18n],
-      stubs: {
-        AppModeWidgetList: true,
-        Loader: true,
-        PartnerNodesList: true,
-        Popover: {
-          template: '<div><slot name="button" /><slot /></div>'
-        },
-        ScrubableNumberInput: true,
-        SubscribeToRunButton: true
-      }
-    }
-  })
-}
-
-describe('LinearControls', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    billingMock.isActiveSubscription = true
-    overlayMock.overlayMessage = 'KSampler is missing a required input: model'
-    overlayMock.overlayTitle = 'Required input missing'
-  })
-
-  it.for([
-    { label: 'desktop', mobile: false },
-    { label: 'mobile', mobile: true }
-  ])('shows a workflow error warning in $label controls', ({ mobile }) => {
-    renderControls({ hasError: true, mobile })
-
-    const warning = screen.getByRole('status')
-    expect(
-      within(warning).getByText('Required input missing')
-    ).toBeInTheDocument()
-    expect(
-      within(warning).getByText('KSampler is missing a required input: model')
-    ).toBeInTheDocument()
-    expect(
-      within(warning).getByRole('button', { name: 'Show errors in graph' })
-    ).toBeInTheDocument()
-    expect(within(warning).queryByLabelText('Close')).not.toBeInTheDocument()
-    const runButton = screen.getByRole('button', { name: 'Run' })
-    expect(runButton).toHaveAttribute(
-      'aria-describedby',
-      LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
-    )
-    const description = screen.getByTestId(
-      'linear-validation-warning-description'
-    )
-    expect(description).toHaveAttribute(
-      'id',
-      LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
-    )
-    expect(description).toHaveTextContent('Required input missing')
-    expect(description).toHaveTextContent(
-      'KSampler is missing a required input: model'
-    )
-    expect(description).not.toHaveTextContent('Show errors in graph')
-  })
-
-  it.for([
-    { label: 'desktop', mobile: false },
-    { label: 'mobile', mobile: true }
-  ])(
-    'does not show the workflow error warning in $label controls without graph errors',
-    ({ mobile }) => {
-      renderControls({ mobile })
-
-      expect(screen.queryByRole('status')).not.toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'Show errors in graph' })
-      ).not.toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'Run' })).not.toHaveAttribute(
-        'aria-describedby'
-      )
-    }
-  )
-
-  it.for([
-    { label: 'desktop', mobile: false },
-    { label: 'mobile', mobile: true }
-  ])(
-    'does not show the workflow error warning in $label controls without an active subscription',
-    ({ mobile }) => {
-      renderControls({
-        hasError: true,
-        isActiveSubscription: false,
-        mobile
-      })
-
-      expect(screen.queryByRole('status')).not.toBeInTheDocument()
-    }
-  )
-
-  it('does not show the warning when the error copy is empty', () => {
-    overlayMock.overlayMessage = ''
-
-    renderControls({ hasError: true })
-
-    expect(screen.queryByRole('status')).not.toBeInTheDocument()
-    expect(screen.getByRole('button', { name: 'Run' })).not.toHaveAttribute(
-      'aria-describedby'
-    )
-  })
-})

src/renderer/extensions/linearMode/LinearControls.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { useTimeout } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, ref, toValue, useTemplateRef } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import AppModeWidgetList from '@/components/builder/AppModeWidgetList.vue'
-import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
 import Loader from '@/components/loader/Loader.vue'
 import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
 import Popover from '@/components/ui/Popover.vue'
@@ -15,15 +14,11 @@ import SubscribeToRunButton from '@/platform/cloud/subscription/components/Subsc
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import LinearRunErrorWarning from '@/renderer/extensions/linearMode/LinearRunErrorWarning.vue'
-import { LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID } from '@/renderer/extensions/linearMode/linearRunErrorWarningIds'
 import PartnerNodesList from '@/renderer/extensions/linearMode/PartnerNodesList.vue'
 import { useCommandStore } from '@/stores/commandStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
 import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const { batchCount } = storeToRefs(useQueueSettingsStore())
@@ -33,8 +28,6 @@ const workflowStore = useWorkflowStore()
 const { isBuilderMode } = useAppMode()
 const appModeStore = useAppModeStore()
 const { hasOutputs } = storeToRefs(appModeStore)
-const { hasAnyError } = storeToRefs(useExecutionErrorStore())
-const { overlayMessage } = useErrorOverlayState()
 
 const { toastTo, mobile } = defineProps<{
   toastTo?: string | HTMLElement
@@ -50,13 +43,6 @@ const { ready: jobToastTimeout, start: resetJobToastTimeout } = useTimeout(
   { controls: true, immediate: false }
 )
 const widgetListRef = useTemplateRef('widgetListRef')
-const linearRunButtonTestId = 'linear-run-button'
-const showRunErrorWarning = computed(
-  () =>
-    hasAnyError.value &&
-    toValue(isActiveSubscription) &&
-    toValue(overlayMessage).trim().length > 0
-)
 
 //TODO: refactor out of this file.
 //code length is small, but changes should propagate
@@ -148,10 +134,9 @@ function handleDragDrop() {
       <PartnerNodesList v-if="!mobile" />
       <section
         v-if="mobile"
-        :data-testid="linearRunButtonTestId"
+        data-testid="linear-run-button"
         class="border-t border-node-component-border p-4 pb-6"
       >
-        <LinearRunErrorWarning v-if="showRunErrorWarning" />
         <SubscribeToRunButton
           v-if="!isActiveSubscription"
           class="mt-4 w-full"
@@ -181,24 +166,18 @@ function handleDragDrop() {
             variant="primary"
             class="grow"
             size="lg"
-            :aria-describedby="
-              showRunErrorWarning
-                ? LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
-                : undefined
-            "
             @click="runButtonClick"
           >
-            <i aria-hidden="true" class="icon-[lucide--play]" />
+            <i class="icon-[lucide--play]" />
             {{ t('menu.run') }}
           </Button>
         </div>
       </section>
       <section
         v-else
-        :data-testid="linearRunButtonTestId"
+        data-testid="linear-run-button"
         class="border-t border-node-component-border p-4 pb-6"
       >
-        <LinearRunErrorWarning v-if="showRunErrorWarning" />
         <div
           class="m-1 mb-2 text-node-component-slot-text"
           v-text="t('linearMode.runCount')"
@@ -219,14 +198,9 @@ function handleDragDrop() {
           variant="primary"
           class="mt-4 w-full text-sm"
           size="lg"
-          :aria-describedby="
-            showRunErrorWarning
-              ? LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
-              : undefined
-          "
           @click="runButtonClick"
         >
-          <i aria-hidden="true" class="icon-[lucide--play]" />
+          <i class="icon-[lucide--play]" />
           {{ t('menu.run') }}
         </Button>
       </section>

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

@@ -1,92 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { createI18n } from 'vue-i18n'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import LinearRunErrorWarning from '@/renderer/extensions/linearMode/LinearRunErrorWarning.vue'
-import { LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID } from '@/renderer/extensions/linearMode/linearRunErrorWarningIds'
-
-const mocks = vi.hoisted(() => ({
-  overlayMessage: 'KSampler is missing a required input: model',
-  overlayTitle: 'Required input missing',
-  viewErrorsInGraph: vi.fn()
-}))
-
-vi.mock('@/components/error/useErrorOverlayState', () => ({
-  useErrorOverlayState: () => ({
-    overlayMessage: mocks.overlayMessage,
-    overlayTitle: mocks.overlayTitle
-  })
-}))
-
-vi.mock('@/composables/useViewErrorsInGraph', () => ({
-  useViewErrorsInGraph: () => ({
-    viewErrorsInGraph: mocks.viewErrorsInGraph
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      linearMode: {
-        error: {
-          goto: 'Show errors in graph'
-        }
-      }
-    }
-  }
-})
-
-function renderWarning() {
-  const user = userEvent.setup()
-  const result = render(LinearRunErrorWarning, {
-    global: { plugins: [i18n] }
-  })
-
-  return { ...result, user }
-}
-
-describe('LinearRunErrorWarning', () => {
-  beforeEach(() => {
-    mocks.viewErrorsInGraph.mockReset()
-  })
-
-  it('shows the current error overlay title and message without a close action', () => {
-    renderWarning()
-
-    const warning = screen.getByRole('status')
-    expect(warning).toHaveTextContent('Required input missing')
-    expect(warning).toHaveTextContent(
-      'KSampler is missing a required input: model'
-    )
-    expect(screen.getByText('Required input missing')).toHaveAttribute(
-      'title',
-      'Required input missing'
-    )
-    const description = screen.getByTestId(
-      'linear-validation-warning-description'
-    )
-    expect(description).toHaveAttribute(
-      'id',
-      LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID
-    )
-    expect(description).toHaveTextContent('Required input missing')
-    expect(description).toHaveTextContent(
-      'KSampler is missing a required input: model'
-    )
-    expect(description).not.toHaveTextContent('Show errors in graph')
-    expect(screen.queryByLabelText('Close')).not.toBeInTheDocument()
-  })
-
-  it('opens graph errors when the action is clicked', async () => {
-    const { user } = renderWarning()
-
-    await user.click(
-      screen.getByRole('button', { name: 'Show errors in graph' })
-    )
-
-    expect(mocks.viewErrorsInGraph).toHaveBeenCalledOnce()
-  })
-})

src/renderer/extensions/linearMode/LinearRunErrorWarning.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
-import { useViewErrorsInGraph } from '@/composables/useViewErrorsInGraph'
-import { LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID } from '@/renderer/extensions/linearMode/linearRunErrorWarningIds'
-
-const { t } = useI18n()
-const { viewErrorsInGraph } = useViewErrorsInGraph()
-const { overlayMessage, overlayTitle } = useErrorOverlayState()
-</script>
-
-<template>
-  <div
-    role="status"
-    data-testid="linear-validation-warning"
-    class="mb-3 flex w-full flex-col gap-2 overflow-hidden rounded-lg border border-l-4 border-border-default border-l-destructive-background bg-base-background p-3 shadow-interface transition-colors duration-200 ease-in-out"
-  >
-    <div
-      :id="LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID"
-      data-testid="linear-validation-warning-description"
-      class="flex flex-col gap-2"
-    >
-      <div class="flex w-full items-start gap-2">
-        <i
-          aria-hidden="true"
-          class="mt-0.5 icon-[lucide--circle-x] size-4 shrink-0 text-destructive-background"
-        />
-        <span
-          class="min-w-0 flex-1 truncate text-sm text-base-foreground"
-          :title="overlayTitle"
-        >
-          {{ overlayTitle }}
-        </span>
-      </div>
-
-      <div
-        class="flex w-full items-start gap-2"
-        data-testid="linear-validation-warning-message"
-      >
-        <span class="size-4 shrink-0" aria-hidden="true" />
-        <p
-          class="m-0 line-clamp-3 min-w-0 flex-1 text-sm/snug wrap-break-word whitespace-pre-wrap text-muted-foreground"
-        >
-          {{ overlayMessage }}
-        </p>
-      </div>
-    </div>
-
-    <div class="flex w-full items-center justify-end pt-2">
-      <Button
-        variant="secondary"
-        size="unset"
-        class="min-h-8 rounded-lg px-3 py-2 text-xs font-normal"
-        data-testid="linear-view-errors"
-        @click="viewErrorsInGraph"
-      >
-        {{ t('linearMode.error.goto') }}
-      </Button>
-    </div>
-  </div>
-</template>

src/renderer/extensions/linearMode/linearRunErrorWarningIds.ts

@@ -1,2 +0,0 @@
-export const LINEAR_RUN_ERROR_WARNING_DESCRIPTION_ID =
-  'linear-run-error-warning'

src/renderer/extensions/vueNodes/composables/usePartitionedBadges.test.ts

@@ -1,225 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
-import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
-import {
-  trackNodePrice,
-  usePartitionedBadges
-} from '@/renderer/extensions/vueNodes/composables/usePartitionedBadges'
-import { toNodeId } from '@/types/nodeId'
-import { NodeBadgeMode } from '@/types/nodeSource'
-
-const { settings, nodeDefs, pricing, getNodeRevisionRefMock, getWidgetMock } =
-  vi.hoisted(() => ({
-    settings: {} as Record<string, unknown>,
-    nodeDefs: {} as Record<string, unknown>,
-    pricing: {
-      dynamic: false,
-      widgets: [] as string[],
-      inputs: [] as string[],
-      groups: [] as string[]
-    },
-    getNodeRevisionRefMock: vi.fn(() => ({ value: 0 })),
-    getWidgetMock: vi.fn(() => ({ value: 'widget-value' }))
-  }))
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    canvas: { graph: { getNodeById: () => null, rootGraph: { id: 'g1' } } }
-  }
-}))
-
-vi.mock('@/composables/node/useNodePricing', () => ({
-  useNodePricing: () => ({
-    getRelevantWidgetNames: () => pricing.widgets,
-    hasDynamicPricing: () => pricing.dynamic,
-    getInputGroupPrefixes: () => pricing.groups,
-    getInputNames: () => pricing.inputs,
-    getNodeRevisionRef: getNodeRevisionRefMock
-  })
-}))
-
-vi.mock('@/composables/node/usePriceBadge', () => ({
-  usePriceBadge: () => ({
-    isCreditsBadge: (b: { text?: string }) => b.text?.startsWith('$') ?? false
-  })
-}))
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({ get: (key: string) => settings[key] })
-}))
-
-vi.mock('@/stores/nodeDefStore', () => ({
-  useNodeDefStore: () => ({ nodeDefsByName: nodeDefs })
-}))
-
-vi.mock('@/stores/widgetValueStore', () => ({
-  useWidgetValueStore: () => ({ getWidget: getWidgetMock })
-}))
-
-function nodeData(overrides: Partial<VueNodeData> = {}): VueNodeData {
-  return {
-    executing: false,
-    id: toNodeId(1),
-    mode: 0,
-    selected: false,
-    title: 'Test node',
-    type: 'TestNode',
-    apiNode: false,
-    badges: [],
-    inputs: [],
-    ...overrides
-  } satisfies VueNodeData
-}
-
-function inputSlot(
-  name: string,
-  readLink: () => number | null
-): INodeInputSlot {
-  return {
-    name,
-    type: '*',
-    boundingRect: [0, 0, 0, 0],
-    get link() {
-      return readLink()
-    },
-    set link(_value: number | null) {}
-  } as INodeInputSlot
-}
-
-function badge(text: string): LGraphBadge {
-  return new LGraphBadge({ text })
-}
-
-beforeEach(() => {
-  settings['Comfy.NodeBadge.NodeSourceBadgeMode'] = NodeBadgeMode.None
-  settings['Comfy.NodeBadge.NodeLifeCycleBadgeMode'] = NodeBadgeMode.None
-  settings['Comfy.NodeBadge.NodeIdBadgeMode'] = NodeBadgeMode.None
-  for (const k of Object.keys(nodeDefs)) delete nodeDefs[k]
-  nodeDefs['TestNode'] = { isCoreNode: false }
-  pricing.dynamic = false
-  pricing.widgets = []
-  pricing.inputs = []
-  pricing.groups = []
-  getNodeRevisionRefMock.mockClear()
-  getWidgetMock.mockClear()
-})
-
-describe('usePartitionedBadges', () => {
-  it('emits no core badges when every badge mode is None', () => {
-    const result = usePartitionedBadges(nodeData()).value
-    expect(result.core).toEqual([])
-  })
-
-  it('tracks dynamic-pricing dependencies for an api node without throwing', () => {
-    pricing.dynamic = true
-    pricing.widgets = ['seed']
-    pricing.inputs = ['model']
-    pricing.groups = ['lora']
-    const result = usePartitionedBadges(
-      nodeData({
-        apiNode: true,
-        inputs: [
-          inputSlot('model', () => 1),
-          inputSlot('lora.0', () => 2),
-          inputSlot('unrelated', () => null)
-        ]
-      })
-    ).value
-
-    expect(result).toHaveProperty('core')
-    expect(result).toHaveProperty('extension')
-  })
-
-  it('adds an id badge when the id mode is enabled', () => {
-    settings['Comfy.NodeBadge.NodeIdBadgeMode'] = NodeBadgeMode.ShowAll
-    const result = usePartitionedBadges(nodeData({ id: toNodeId(7) })).value
-    expect(result.core).toContainEqual({ text: '#7' })
-  })
-
-  it('adds a lifecycle badge, trimmed of brackets', () => {
-    settings['Comfy.NodeBadge.NodeLifeCycleBadgeMode'] = NodeBadgeMode.ShowAll
-    nodeDefs['TestNode'] = {
-      isCoreNode: false,
-      nodeLifeCycleBadgeText: '[BETA]'
-    }
-    const result = usePartitionedBadges(nodeData()).value
-    expect(result.core).toContainEqual({ text: 'BETA' })
-  })
-
-  it('adds a source badge for non-core nodes when source mode is on', () => {
-    settings['Comfy.NodeBadge.NodeSourceBadgeMode'] = NodeBadgeMode.ShowAll
-    nodeDefs['TestNode'] = {
-      isCoreNode: false,
-      nodeSource: { badgeText: 'my-pack' }
-    }
-    const result = usePartitionedBadges(nodeData()).value
-    expect(result.core).toContainEqual({ text: 'my-pack' })
-  })
-
-  it('partitions extension badges (skipping the first) from credits badges', () => {
-    const result = usePartitionedBadges(
-      nodeData({
-        badges: [badge('skipped'), badge('ext-badge'), badge('$5 per run')]
-      })
-    ).value
-
-    expect(result.extension.map((badge) => badge.text)).toEqual(['ext-badge'])
-    expect(result.pricing).toEqual([{ required: '$5', rest: 'per run' }])
-  })
-
-  it('flags hasComfyBadge for a core node with source ShowAll and no pricing', () => {
-    settings['Comfy.NodeBadge.NodeSourceBadgeMode'] = NodeBadgeMode.ShowAll
-    nodeDefs['TestNode'] = { isCoreNode: true }
-    const result = usePartitionedBadges(
-      nodeData({ badges: [badge('x')] })
-    ).value
-    expect(result.hasComfyBadge).toBe(true)
-  })
-})
-
-describe('trackNodePrice', () => {
-  it('no-ops for a node without dynamic pricing', () => {
-    pricing.dynamic = false
-    trackNodePrice({ id: '1', type: 'Static', inputs: [] })
-
-    expect(getNodeRevisionRefMock).toHaveBeenCalledWith(toNodeId('1'))
-    expect(getWidgetMock).not.toHaveBeenCalled()
-  })
-
-  it('touches widget, input, and input-group pricing dependencies', () => {
-    pricing.dynamic = true
-    pricing.widgets = ['seed']
-    pricing.inputs = ['model']
-    pricing.groups = ['lora']
-    let modelReads = 0
-    let groupReads = 0
-    let unrelatedReads = 0
-
-    trackNodePrice({
-      id: '2',
-      type: 'Dynamic',
-      inputs: [
-        inputSlot('model', () => {
-          modelReads += 1
-          return 1
-        }),
-        inputSlot('lora.0', () => {
-          groupReads += 1
-          return 2
-        }),
-        inputSlot('unrelated', () => {
-          unrelatedReads += 1
-          return null
-        })
-      ]
-    })
-
-    expect(getNodeRevisionRefMock).toHaveBeenCalledWith(toNodeId('2'))
-    expect(getWidgetMock).toHaveBeenCalled()
-    expect(modelReads).toBe(1)
-    expect(groupReads).toBe(1)
-    expect(unrelatedReads).toBe(0)
-  })
-})

src/services/dialogService.ts

@@ -18,7 +18,7 @@ import type {
 } from '@/stores/dialogStore'
 
 import type { ComponentAttrs } from 'vue-component-type-helpers'
-import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type { WorkspaceRole } from '@/platform/workspace/api/workspaceApi'
 
 // Lazy loaders for dialogs - components are loaded on first use
@@ -442,9 +442,9 @@ export const useDialogService = () => {
     })
   }
 
-  async function showSubscriptionRequiredDialog(
-    options?: SubscriptionDialogOptions
-  ) {
+  async function showSubscriptionRequiredDialog(options?: {
+    reason?: SubscriptionDialogReason
+  }) {
     if (!isCloud || !window.__CONFIG__?.subscription_required) {
       return
     }

src/views/LinearView.vue

@@ -9,6 +9,7 @@ import { computed, useTemplateRef } from 'vue'
 import AppBuilder from '@/components/builder/AppBuilder.vue'
 import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import ErrorOverlay from '@/components/error/ErrorOverlay.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
@@ -164,6 +165,7 @@ function dragDrop(e: DragEvent) {
         </div>
         <div ref="bottomLeftRef" class="absolute bottom-7 left-4 z-20" />
         <div ref="bottomRightRef" class="absolute right-4 bottom-7 z-20" />
+        <div class="absolute top-4 right-4 z-20"><ErrorOverlay app-mode /></div>
       </SplitterPanel>
       <SplitterPanel
         v-if="hasRightPanel"