From cfdd002b7cc3e14a9ca2a28a5cbd08251dd5d555 Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Mon, 2 Feb 2026 17:16:40 +0100
Subject: [PATCH] Road to No Explicit Any Part 10 (#8499)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

This PR removes `any` types from UI component files and replaces them
with proper TypeScript types.

### Key Changes

#### Type Safety Improvements
- Replaced `any` with `unknown`, explicit types, or proper interfaces
across UI components
- Used `ComponentPublicInstance` with explicit method signatures for
component refs
- Used `Record<string, unknown>` for dynamic property access
- Added generics for form components with flexible value types
- Used `CSSProperties` for style objects

### Files Changed

UI Components:
- src/components/common/ComfyImage.vue - Used proper class prop type
- src/components/common/DeviceInfo.vue - Used `string | number` for
formatValue
- src/components/common/FormItem.vue - Used `unknown` for model value
- src/components/common/FormRadioGroup.vue - Added generic type
parameter
- src/components/common/TreeExplorer.vue - Used proper async function
signature
- src/components/custom/widget/WorkflowTemplateSelectorDialog.vue -
Fixed duplicate import
- src/components/graph/CanvasModeSelector.vue - Used
`ComponentPublicInstance` for ref
- src/components/node/NodePreview.vue - Changed `any` to `unknown`
- src/components/queue/job/JobDetailsPopover.vue - Removed unnecessary
casts
- src/components/queue/job/JobFiltersBar.vue - Removed `as any` casts
- src/platform/assets/components/MediaAssetContextMenu.vue - Added
`ContextMenuInstance` type
- src/renderer/extensions/minimap/MiniMapPanel.vue - Used
`CSSProperties`
- src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts -
Added `PrimeVueTooltipElement` interface
-
src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
- Used `Record<string, unknown>`
-
src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
- Added `LicenseObject` interface

### Testing
- All TypeScript type checking passes (`pnpm typecheck`)
- Linting passes without errors (`pnpm lint`)

Part of the "Road to No Explicit Any" initiative.

### Previous PRs in this series:
- Part 2: #7401
- Part 3: #7935
- Part 4: #7970
- Part 5: #8064
- Part 6: #8083
- Part 7: #8092
- Part 8 Group 1: #8253
- Part 8 Group 2: #8258
- Part 8 Group 3: #8304
- Part 8 Group 4: #8314
- Part 8 Group 5: #8329
- Part 8 Group 6: #8344
- Part 8 Group 7: #8459
- Part 8 Group 8: #8496
- Part 9: #8498
- Part 10: #8499

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8499-Road-to-No-Explicit-Any-Part-10-2f86d73d365081aab129f165c7d02434)
by [Unito](https://www.unito.io)
---
 src/components/common/ComfyImage.vue          |  5 ++++-
 src/components/common/DeviceInfo.vue          |  8 ++++++--
 src/components/common/FormItem.vue            |  4 ++--
 src/components/common/FormRadioGroup.vue      |  6 +++---
 src/components/common/TreeExplorer.vue        |  2 +-
 .../widget/WorkflowTemplateSelectorDialog.vue |  4 ++--
 src/components/graph/CanvasModeSelector.vue   |  5 +++--
 src/components/node/NodePreview.vue           |  5 ++++-
 .../queue/job/JobDetailsPopover.vue           |  4 ++--
 src/components/queue/job/JobFiltersBar.vue    |  4 ++--
 .../components/MediaAssetContextMenu.vue      | 10 ++++++++--
 .../extensions/minimap/MiniMapPanel.vue       |  3 ++-
 .../vueNodes/composables/useNodeTooltips.ts   |  7 ++++++-
 .../components/form/FormSelectButton.vue      | 20 ++++++++++---------
 .../infoPanel/tabs/DescriptionTabPanel.vue    |  7 ++++++-
 15 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/src/components/common/ComfyImage.vue b/src/components/common/ComfyImage.vue
index aa6a66c55..351d1cde4 100644
--- a/src/components/common/ComfyImage.vue
+++ b/src/components/common/ComfyImage.vue
@@ -38,7 +38,10 @@ const {
   alt = 'Image content'
 } = defineProps<{
   src: string
-  class?: any
+  class?:
+    | string
+    | Record<string, boolean>
+    | (string | Record<string, boolean>)[]
   contain?: boolean
   alt?: string
 }>()
diff --git a/src/components/common/DeviceInfo.vue b/src/components/common/DeviceInfo.vue
index 8e00fd16b..ab141cfbc 100644
--- a/src/components/common/DeviceInfo.vue
+++ b/src/components/common/DeviceInfo.vue
@@ -28,13 +28,17 @@ const deviceColumns: { field: keyof DeviceStats; header: string }[] = [
   { field: 'torch_vram_free', header: 'Torch VRAM Free' }
 ]
 
-const formatValue = (value: any, field: string) => {
+const formatValue = (value: string | number, field: string) => {
   if (
     ['vram_total', 'vram_free', 'torch_vram_total', 'torch_vram_free'].includes(
       field
     )
   ) {
-    return formatSize(value)
+    const num = Number(value)
+    if (Number.isFinite(num)) {
+      return formatSize(num)
+    }
+    return value
   }
   return value
 }
diff --git a/src/components/common/FormItem.vue b/src/components/common/FormItem.vue
index 011f80753..b2161b2e7 100644
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -47,7 +47,7 @@ import InputSlider from '@/components/common/InputSlider.vue'
 import UrlInput from '@/components/common/UrlInput.vue'
 import type { FormItem } from '@/platform/settings/types'
 
-const formValue = defineModel<any>('formValue')
+const formValue = defineModel<unknown>('formValue')
 const props = defineProps<{
   item: FormItem
   id?: string
@@ -61,7 +61,7 @@ function getFormAttrs(item: FormItem) {
     attrs['renderFunction'] = () =>
       inputType(
         props.item.name,
-        (v: any) => (formValue.value = v),
+        (v: unknown) => (formValue.value = v),
         formValue.value,
         item.attrs
       )
diff --git a/src/components/common/FormRadioGroup.vue b/src/components/common/FormRadioGroup.vue
index 6155bed0f..607a3c407 100644
--- a/src/components/common/FormRadioGroup.vue
+++ b/src/components/common/FormRadioGroup.vue
@@ -20,14 +20,14 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | number | boolean | null">
 import RadioButton from 'primevue/radiobutton'
 import { computed } from 'vue'
 
 import type { SettingOption } from '@/platform/settings/types'
 
 const props = defineProps<{
-  modelValue: any
+  modelValue: T
   options?: (string | SettingOption | Record<string, string>)[]
   optionLabel?: string
   optionValue?: string
@@ -35,7 +35,7 @@ const props = defineProps<{
 }>()
 
 defineEmits<{
-  'update:modelValue': [value: any]
+  'update:modelValue': [value: T]
 }>()
 
 const normalizedOptions = computed<SettingOption[]>(() => {
diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 828d8ff45..47fca1946 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -221,7 +221,7 @@ const wrapCommandWithErrorHandler = (
 ) => {
   return isAsync
     ? errorHandling.wrapWithErrorHandlingAsync(
-        command as (...args: any[]) => Promise<any>,
+        command as (event: MenuItemCommandEvent) => Promise<void>,
         menuTargetNode.value?.handleError
       )
     : errorHandling.wrapWithErrorHandling(
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index 2ed71befc..a60b2808f 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -412,8 +412,8 @@ import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
-import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
@@ -794,7 +794,7 @@ watch(
 )
 
 // Methods
-const onLoadWorkflow = async (template: any) => {
+const onLoadWorkflow = async (template: TemplateInfo) => {
   loadingTemplate.value = template.name
   try {
     await loadWorkflowTemplate(
diff --git a/src/components/graph/CanvasModeSelector.vue b/src/components/graph/CanvasModeSelector.vue
index e6c78fd1a..48efb50b1 100644
--- a/src/components/graph/CanvasModeSelector.vue
+++ b/src/components/graph/CanvasModeSelector.vue
@@ -55,6 +55,7 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
+import type { ComponentPublicInstance } from 'vue'
 import { computed, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -66,7 +67,7 @@ interface Props {
 }
 
 defineProps<Props>()
-const buttonRef = ref<InstanceType<typeof Button>>()
+const buttonRef = ref<ComponentPublicInstance | null>(null)
 const popover = ref<InstanceType<typeof Popover>>()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
@@ -92,7 +93,7 @@ const lockCommandText = computed(() =>
 )
 
 const toggle = (event: Event) => {
-  const el = (buttonRef.value as any)?.$el || buttonRef.value
+  const el = buttonRef.value?.$el || buttonRef.value
   popover.value?.toggle(event, el)
 }
 
diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index 9734d5b43..56d80a9c8 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -124,7 +124,10 @@ const slotInputDefs = allInputDefs.filter(
 const widgetInputDefs = allInputDefs.filter((input) =>
   widgetStore.inputIsWidget(input)
 )
-const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
+const truncateDefaultValue = (
+  value: unknown,
+  charLimit: number = 32
+): string => {
   let stringValue: string
 
   if (typeof value === 'object' && value !== null) {
diff --git a/src/components/queue/job/JobDetailsPopover.vue b/src/components/queue/job/JobDetailsPopover.vue
index d2d3a7ad1..da751cbab 100644
--- a/src/components/queue/job/JobDetailsPopover.vue
+++ b/src/components/queue/job/JobDetailsPopover.vue
@@ -296,7 +296,7 @@ const extraRows = computed<DetailRow[]>(() => {
     ]
   }
   if (jobState.value === 'completed') {
-    const task = taskForJob.value as any
+    const task = taskForJob.value
     const endTs: number | undefined = task?.executionEndTimestamp
     const execMs: number | undefined = task?.executionTime
     const generatedOnValue = endTs ? formatClockTime(endTs, locale.value) : ''
@@ -321,7 +321,7 @@ const extraRows = computed<DetailRow[]>(() => {
     return rows
   }
   if (jobState.value === 'failed') {
-    const task = taskForJob.value as any
+    const task = taskForJob.value
     const execMs: number | undefined = task?.executionTime
     const failedAfterValue =
       execMs !== undefined ? formatElapsedTime(execMs) : ''
diff --git a/src/components/queue/job/JobFiltersBar.vue b/src/components/queue/job/JobFiltersBar.vue
index 6631d4b38..a227c46d9 100644
--- a/src/components/queue/job/JobFiltersBar.vue
+++ b/src/components/queue/job/JobFiltersBar.vue
@@ -179,7 +179,7 @@ const onFilterClick = (event: Event) => {
   }
 }
 const selectWorkflowFilter = (value: 'all' | 'current') => {
-  ;(filterPopoverRef.value as any)?.hide?.()
+  filterPopoverRef.value?.hide()
   emit('update:selectedWorkflowFilter', value)
 }
 
@@ -190,7 +190,7 @@ const onSortClick = (event: Event) => {
 }
 
 const selectSortMode = (value: JobSortMode) => {
-  ;(sortPopoverRef.value as any)?.hide?.()
+  sortPopoverRef.value?.hide()
   emit('update:selectedSortMode', value)
 }
 
diff --git a/src/platform/assets/components/MediaAssetContextMenu.vue b/src/platform/assets/components/MediaAssetContextMenu.vue
index 35b97fab7..e78d525b1 100644
--- a/src/platform/assets/components/MediaAssetContextMenu.vue
+++ b/src/platform/assets/components/MediaAssetContextMenu.vue
@@ -32,6 +32,7 @@
 import { onClickOutside } from '@vueuse/core'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
+import type { ComponentPublicInstance } from 'vue'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -72,13 +73,18 @@ const emit = defineEmits<{
   'bulk-export-workflow': [assets: AssetItem[]]
 }>()
 
-const contextMenu = ref<InstanceType<typeof ContextMenu>>()
+type ContextMenuInstance = ComponentPublicInstance & {
+  show: (event: MouseEvent) => void
+  hide: () => void
+}
+
+const contextMenu = ref<ContextMenuInstance | null>(null)
 const actions = useMediaAssetActions()
 const { t } = useI18n()
 
 // Close context menu when clicking outside
 onClickOutside(
-  computed(() => (contextMenu.value as any)?.$el),
+  computed(() => contextMenu.value?.$el),
   () => {
     hide()
   }
diff --git a/src/renderer/extensions/minimap/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
index 35430319a..f32a7c3a3 100644
--- a/src/renderer/extensions/minimap/MiniMapPanel.vue
+++ b/src/renderer/extensions/minimap/MiniMapPanel.vue
@@ -79,11 +79,12 @@
 
 <script setup lang="ts">
 import Checkbox from 'primevue/checkbox'
+import type { CSSProperties } from 'vue'
 
 import type { MinimapSettingsKey } from '@/renderer/extensions/minimap/types'
 
 defineProps<{
-  panelStyles: any
+  panelStyles: CSSProperties
   nodeColors: boolean
   showLinks: boolean
   showGroups: boolean
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
index f81844f94..99e0c9250 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
@@ -12,6 +12,11 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
+// PrimeVue adds this internal property to elements with tooltips
+interface PrimeVueTooltipElement extends Element {
+  $_ptooltipId?: string
+}
+
 /**
  * Hide all visible tooltips by dispatching mouseleave events
  *
@@ -41,7 +46,7 @@ const hideTooltipsGlobally = () => {
     // Find the target element that owns this tooltip
     const targetElements = document.querySelectorAll('[data-pd-tooltip="true"]')
     for (const targetEl of targetElements) {
-      if ((targetEl as any).$_ptooltipId === tooltipId) {
+      if ((targetEl as PrimeVueTooltipElement).$_ptooltipId === tooltipId) {
         ;(targetEl as HTMLElement).dispatchEvent(
           new MouseEvent('mouseleave', { bubbles: true })
         )
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index cca84a353..30b3b5fa5 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -76,25 +76,27 @@ const getOptionValue = (option: T, index: number): ModelValue => {
   }
 
   const valueField = props.optionValue
+  const optionRecord = option as Record<string, unknown>
   const value =
-    (option as any)[valueField] ??
+    optionRecord[valueField] ??
     option.value ??
-    (option as any).name ??
+    optionRecord.name ??
     option.label ??
     index
-  return value
+  return value as ModelValue
 }
 
 // for display with PrimeVue compatibility
 const getOptionLabel = (option: T): string => {
   if (typeof option === 'object' && option !== null) {
     const labelField = props.optionLabel
-    return (
-      (option as any)[labelField] ??
-      option.label ??
-      (option as any).name ??
-      option.value ??
-      String(option)
+    const optionRecord = option as Record<string, unknown>
+    return String(
+      optionRecord[labelField] ??
+        option.label ??
+        optionRecord.name ??
+        option.value ??
+        option
     )
   }
   return String(option)
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
index bfd0e7486..3bc1ca3c5 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
@@ -92,8 +92,13 @@ const createLicenseUrl = (filename: string, repoUrl: string): string => {
   return `${baseRepoUrl}/blob/main/${licenseFile}`
 }
 
+interface LicenseObject {
+  file?: string
+  text?: string
+}
+
 const parseLicenseObject = (
-  licenseObj: any
+  licenseObj: LicenseObject
 ): { text: string; isUrl: boolean } => {
   const licenseFile = licenseObj.file || licenseObj.text