[automated] Apply ESLint and Oxfmt fixes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

browser_tests/fixtures/ComfyPage.ts

@@ -35,7 +35,6 @@ import { SubgraphHelper } from './helpers/SubgraphHelper'
 import { ToastHelper } from './helpers/ToastHelper'
 import { WorkflowHelper } from './helpers/WorkflowHelper'
 import type { NodeReference } from './utils/litegraphUtils'
-import type { WorkspaceStore } from '../types/globals'
 
 dotenv.config()
 
@@ -141,9 +140,7 @@ class ConfirmDialog {
 
     // Wait for workflow service to finish if it's busy
     await this.page.waitForFunction(
-      () =>
-        (window.app?.extensionManager as WorkspaceStore | undefined)?.workflow
-          ?.isBusy === false,
+      () => window.app?.extensionManager?.workflow?.isBusy === false,
       undefined,
       { timeout: 3000 }
     )
@@ -391,7 +388,7 @@ export class ComfyPage {
 
   async setFocusMode(focusMode: boolean) {
     await this.page.evaluate((focusMode) => {
-      ;(window.app!.extensionManager as WorkspaceStore).focusMode = focusMode
+      window.app!.extensionManager.focusMode = focusMode
     }, focusMode)
     await this.nextFrame()
   }

browser_tests/fixtures/components/SidebarTab.ts

@@ -1,6 +1,5 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { WorkspaceStore } from '../../types/globals'
 import { TestIds } from '../selectors'
 
 class SidebarTab {
@@ -153,9 +152,7 @@ export class WorkflowsSidebarTab extends SidebarTab {
 
     // Wait for workflow service to finish renaming
     await this.page.waitForFunction(
-      () =>
-        !(window.app?.extensionManager as WorkspaceStore | undefined)?.workflow
-          ?.isBusy,
+      () => !window.app?.extensionManager?.workflow?.isBusy,
       undefined,
       { timeout: 3000 }
     )

browser_tests/fixtures/components/Topbar.ts

@@ -1,7 +1,5 @@
 import type { Locator, Page } from '@playwright/test'
 
-import type { WorkspaceStore } from '../../types/globals'
-
 export class Topbar {
   private readonly menuLocator: Locator
   private readonly menuTrigger: Locator
@@ -87,7 +85,7 @@ export class Topbar {
 
     // Wait for workflow service to finish saving
     await this.page.waitForFunction(
-      () => !(window.app!.extensionManager as WorkspaceStore).workflow.isBusy,
+      () => !window.app!.extensionManager.workflow.isBusy,
       undefined,
       { timeout: 3000 }
     )

browser_tests/fixtures/helpers/WorkflowHelper.ts

@@ -4,7 +4,6 @@ import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON
 } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
-import type { WorkspaceStore } from '../../types/globals'
 import type { ComfyPage } from '../ComfyPage'
 
 type FolderStructure = {
@@ -47,9 +46,7 @@ export class WorkflowHelper {
     }
 
     await this.comfyPage.page.evaluate(async () => {
-      await (
-        window.app!.extensionManager as WorkspaceStore
-      ).workflow.syncWorkflows()
+      await window.app!.extensionManager.workflow.syncWorkflows()
     })
 
     // Wait for Vue to re-render the workflow list
@@ -90,24 +87,21 @@ export class WorkflowHelper {
 
   async getUndoQueueSize(): Promise<number | undefined> {
     return this.comfyPage.page.evaluate(() => {
-      const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-        .activeWorkflow
+      const workflow = window.app!.extensionManager.workflow.activeWorkflow
       return workflow?.changeTracker.undoQueue.length
     })
   }
 
   async getRedoQueueSize(): Promise<number | undefined> {
     return this.comfyPage.page.evaluate(() => {
-      const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-        .activeWorkflow
+      const workflow = window.app!.extensionManager.workflow.activeWorkflow
       return workflow?.changeTracker.redoQueue.length
     })
   }
 
   async isCurrentWorkflowModified(): Promise<boolean | undefined> {
     return this.comfyPage.page.evaluate(() => {
-      return (window.app!.extensionManager as WorkspaceStore).workflow
-        .activeWorkflow?.isModified
+      return window.app!.extensionManager.workflow.activeWorkflow?.isModified
     })
   }
 

browser_tests/helpers/actionbar.ts

@@ -2,7 +2,6 @@ import type { Locator, Page } from '@playwright/test'
 
 import type { AutoQueueMode } from '../../src/stores/queueStore'
 import { TestIds } from '../fixtures/selectors'
-import type { WorkspaceStore } from '../types/globals'
 
 export class ComfyActionbar {
   public readonly root: Locator
@@ -46,14 +45,13 @@ class ComfyQueueButtonOptions {
 
   public async setMode(mode: AutoQueueMode) {
     await this.page.evaluate((mode) => {
-      ;(window.app!.extensionManager as WorkspaceStore).queueSettings.mode =
-        mode
+      window.app!.extensionManager.queueSettings.mode = mode
     }, mode)
   }
 
   public async getMode() {
     return await this.page.evaluate(() => {
-      return (window.app!.extensionManager as WorkspaceStore).queueSettings.mode
+      return window.app!.extensionManager.queueSettings.mode
     })
   }
 }

browser_tests/tests/actionbar.spec.ts

@@ -4,7 +4,6 @@ import { expect, mergeTests } from '@playwright/test'
 import type { StatusWsMessage } from '../../src/schemas/apiSchema'
 import { comfyPageFixture } from '../fixtures/ComfyPage'
 import { webSocketFixture } from '../fixtures/ws'
-import type { WorkspaceStore } from '../types/globals'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
@@ -55,9 +54,7 @@ test.describe('Actionbar', { tag: '@ui' }, () => {
         )
         node!.widgets![0].value = value
 
-        ;(
-          window.app!.extensionManager as WorkspaceStore
-        ).workflow.activeWorkflow?.changeTracker.checkState()
+        window.app!.extensionManager.workflow.activeWorkflow?.changeTracker.checkState()
       }, value)
     }
 

browser_tests/tests/browserTabTitle.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { WorkspaceStore } from '../types/globals'
 
 test.describe('Browser tab title', { tag: '@smoke' }, () => {
   test.describe('Beta Menu', () => {
@@ -11,8 +10,7 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
 
     test('Can display workflow name', async ({ comfyPage }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return (window.app!.extensionManager as WorkspaceStore).workflow
-          .activeWorkflow?.filename
+        return window.app!.extensionManager.workflow.activeWorkflow?.filename
       })
       await expect
         .poll(() => comfyPage.page.title())
@@ -25,8 +23,7 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
       comfyPage
     }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return (window.app!.extensionManager as WorkspaceStore).workflow
-          .activeWorkflow?.filename
+        return window.app!.extensionManager.workflow.activeWorkflow?.filename
       })
       expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
 
@@ -40,9 +37,7 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
 
       // Delete the saved workflow for cleanup.
       await comfyPage.page.evaluate(async () => {
-        return (
-          window.app!.extensionManager as WorkspaceStore
-        ).workflow.activeWorkflow?.delete()
+        return window.app!.extensionManager.workflow.activeWorkflow?.delete()
       })
     })
   })

browser_tests/tests/colorPalette.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import type { WorkspaceStore } from '../types/globals'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -179,9 +178,7 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
 
   test('Can add custom color palette', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(async (p) => {
-      await (
-        window.app!.extensionManager as WorkspaceStore
-      ).colorPalette.addCustomColorPalette(p)
+      await window.app!.extensionManager.colorPalette.addCustomColorPalette(p)
     }, customColorPalettes.obsidian_dark)
     expect(await comfyPage.toast.getToastErrorCount()).toBe(0)
 

browser_tests/types/extensionManager.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Module augmentation that extends the public ExtensionManager interface
+ * with internal properties exposed by the WorkspaceStore.
+ *
+ * This augmentation is scoped to browser_tests (via browser_tests/tsconfig.json)
+ * and allows tests to access store internals without type casts.
+ */
+import type { useColorPaletteService } from '@/services/colorPaletteService'
+import type { useQueueSettingsStore } from '@/stores/queueStore'
+import type { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+
+declare module '@/types/extensionTypes' {
+  interface ExtensionManager {
+    workflow: ReturnType<typeof useWorkflowStore>
+    queueSettings: ReturnType<typeof useQueueSettingsStore>
+    colorPalette: ReturnType<typeof useColorPaletteService>
+    focusMode: boolean
+  }
+}

browser_tests/types/globals.d.ts

@@ -4,7 +4,6 @@ import type { LGraphBadge } from '@/lib/litegraph/src/LGraphBadge'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { LiteGraphGlobal } from '@/lib/litegraph/src/LiteGraphGlobal'
 import type { ComfyApp } from '@/scripts/app'
-import type { useWorkspaceStore } from '@/stores/workspaceStore'
 
 /**
  * Helper type for accessing nodes by ID in browser tests.
@@ -54,16 +53,3 @@ declare global {
   const LiteGraph: LiteGraphGlobal | undefined
   const LGraphBadge: typeof LGraphBadge | undefined
 }
-
-/**
- * Internal store type for browser test access.
- * Used to access properties not exposed via the public ExtensionManager interface.
- *
- * @example
- * ```ts
- * await page.evaluate(() => {
- *   ;(window.app!.extensionManager as WorkspaceStore).workflow.syncWorkflows()
- * })
- * ```
- */
-export type WorkspaceStore = ReturnType<typeof useWorkspaceStore>

knip.config.ts

@@ -46,9 +46,6 @@ const config: KnipConfig = {
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
-    // Pending integration - accessible color picker components
-    'src/components/ui/color-picker/ColorPickerSaturationValue.vue',
-    'src/components/ui/color-picker/ColorPickerSlider.vue',
     // Agent review check config, not part of the build
     '.agents/checks/eslint.strict.config.js'
   ],

src/components/ui/color-picker/ColorPickerSaturationValue.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { hue } = defineProps<{
-  hue: number
-}>()
-
-const saturation = defineModel<number>('saturation', { required: true })
-const value = defineModel<number>('value', { required: true })
-
-const { t } = useI18n()
-
-const containerRef = ref<HTMLElement | null>(null)
-
-const hueBackground = computed(() => `hsl(${hue}, 100%, 50%)`)
-
-const handleStyle = computed(() => ({
-  left: `${saturation.value}%`,
-  top: `${100 - value.value}%`
-}))
-
-function clamp(v: number, min: number, max: number) {
-  return Math.max(min, Math.min(max, v))
-}
-
-function updateFromPointer(e: PointerEvent) {
-  const el = containerRef.value
-  if (!el) return
-  const rect = el.getBoundingClientRect()
-  const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-  const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))
-  saturation.value = Math.round(x * 100)
-  value.value = Math.round((1 - y) * 100)
-}
-
-function handlePointerDown(e: PointerEvent) {
-  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-  updateFromPointer(e)
-}
-
-function handlePointerMove(e: PointerEvent) {
-  if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return
-  updateFromPointer(e)
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  const step = e.shiftKey ? 10 : 1
-  switch (e.key) {
-    case 'ArrowLeft':
-      e.preventDefault()
-      saturation.value = clamp(saturation.value - step, 0, 100)
-      break
-    case 'ArrowRight':
-      e.preventDefault()
-      saturation.value = clamp(saturation.value + step, 0, 100)
-      break
-    case 'ArrowUp':
-      e.preventDefault()
-      value.value = clamp(value.value + step, 0, 100)
-      break
-    case 'ArrowDown':
-      e.preventDefault()
-      value.value = clamp(value.value - step, 0, 100)
-      break
-  }
-}
-</script>
-
-<template>
-  <div
-    ref="containerRef"
-    role="slider"
-    tabindex="0"
-    :aria-label="t('colorPicker.saturationValue')"
-    :aria-valuetext="`${t('colorPicker.saturation')}: ${saturation}%, ${t('colorPicker.brightness')}: ${value}%`"
-    class="relative aspect-square w-full cursor-crosshair rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-highlight"
-    :style="{ backgroundColor: hueBackground, touchAction: 'none' }"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @keydown="handleKeydown"
-  >
-    <div
-      class="absolute inset-0 rounded-sm bg-linear-to-r from-white to-transparent"
-    />
-    <div
-      class="absolute inset-0 rounded-sm bg-linear-to-b from-transparent to-black"
-    />
-    <div
-      class="pointer-events-none absolute size-3.5 -translate-1/2 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)]"
-      :style="handleStyle"
-    />
-  </div>
-</template>

src/components/ui/color-picker/ColorPickerSlider.vue

@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { hsbToRgb, rgbToHex } from '@/utils/colorUtil'
-
-const {
-  type,
-  hue = 0,
-  saturation = 100,
-  brightness = 100
-} = defineProps<{
-  type: 'hue' | 'alpha'
-  hue?: number
-  saturation?: number
-  brightness?: number
-}>()
-
-const modelValue = defineModel<number>({ required: true })
-
-const { t } = useI18n()
-
-const max = computed(() => (type === 'hue' ? 360 : 100))
-
-const fraction = computed(() => modelValue.value / max.value)
-
-const trackBackground = computed(() => {
-  if (type === 'hue') {
-    return 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
-  }
-  const rgb = hsbToRgb({ h: hue, s: saturation, b: brightness })
-  const hex = rgbToHex(rgb)
-  return `linear-gradient(to right, transparent, ${hex})`
-})
-
-const containerStyle = computed(() => {
-  if (type === 'alpha') {
-    return {
-      backgroundImage:
-        'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)',
-      backgroundSize: '8px 8px',
-      touchAction: 'none'
-    }
-  }
-  return {
-    background: trackBackground.value,
-    touchAction: 'none'
-  }
-})
-
-const ariaLabel = computed(() =>
-  type === 'hue' ? t('colorPicker.hue') : t('colorPicker.alpha')
-)
-
-function clamp(v: number, min: number, maxVal: number) {
-  return Math.max(min, Math.min(maxVal, v))
-}
-
-function updateFromPointer(e: PointerEvent) {
-  const el = e.currentTarget as HTMLElement
-  const rect = el.getBoundingClientRect()
-  const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-  modelValue.value = Math.round(x * max.value)
-}
-
-function handlePointerDown(e: PointerEvent) {
-  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
-  updateFromPointer(e)
-}
-
-function handlePointerMove(e: PointerEvent) {
-  if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return
-  updateFromPointer(e)
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  const step = e.shiftKey ? 10 : 1
-  switch (e.key) {
-    case 'ArrowLeft':
-      e.preventDefault()
-      modelValue.value = clamp(modelValue.value - step, 0, max.value)
-      break
-    case 'ArrowRight':
-      e.preventDefault()
-      modelValue.value = clamp(modelValue.value + step, 0, max.value)
-      break
-  }
-}
-</script>
-
-<template>
-  <div
-    role="slider"
-    tabindex="0"
-    :aria-label="ariaLabel"
-    :aria-valuenow="modelValue"
-    :aria-valuemin="0"
-    :aria-valuemax="max"
-    class="relative flex h-4 cursor-pointer items-center rounded-full p-px outline-none focus-visible:ring-2 focus-visible:ring-highlight"
-    :style="containerStyle"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @keydown="handleKeydown"
-  >
-    <div
-      v-if="type === 'alpha'"
-      class="absolute inset-0 rounded-full"
-      :style="{ background: trackBackground }"
-    />
-    <div
-      class="pointer-events-none absolute aspect-square h-full -translate-x-1/2 rounded-full border-2 border-white shadow-[0_0_2px_rgba(0,0,0,0.6)]"
-      :style="{ left: `${fraction * 100}%` }"
-    />
-  </div>
-</template>

src/locales/en/main.json

@@ -483,13 +483,6 @@
     "black": "Black",
     "custom": "Custom"
   },
-  "colorPicker": {
-    "saturationValue": "Saturation and brightness",
-    "saturation": "Saturation",
-    "brightness": "Brightness",
-    "hue": "Hue",
-    "alpha": "Alpha"
-  },
   "contextMenu": {
     "Inputs": "Inputs",
     "Outputs": "Outputs",