diff --git a/src/composables/graph/useWidgetRenderer.ts b/src/composables/graph/useWidgetRenderer.ts
index 762d9affa..ad7e185a9 100644
--- a/src/composables/graph/useWidgetRenderer.ts
+++ b/src/composables/graph/useWidgetRenderer.ts
@@ -5,7 +5,7 @@
 import {
   WidgetType,
   widgetTypeToComponent
-} from '@/components/graph/vueWidgets/widgetRegistry'
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 
 /**
  * Static mapping of LiteGraph widget types to Vue widget component names
diff --git a/src/composables/node/useNodeCanvasImagePreview.ts b/src/composables/node/useNodeCanvasImagePreview.ts
index 98d49b485..008119407 100644
--- a/src/composables/node/useNodeCanvasImagePreview.ts
+++ b/src/composables/node/useNodeCanvasImagePreview.ts
@@ -1,5 +1,5 @@
-import { useImagePreviewWidget } from '@/composables/widgets/useImagePreviewWidget'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useImagePreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget'
 
 const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'
 
diff --git a/src/composables/node/useNodeChatHistory.ts b/src/composables/node/useNodeChatHistory.ts
index 8fbe78895..a1fa3ad3a 100644
--- a/src/composables/node/useNodeChatHistory.ts
+++ b/src/composables/node/useNodeChatHistory.ts
@@ -1,6 +1,6 @@
 import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
-import { useChatHistoryWidget } from '@/composables/widgets/useChatHistoryWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useChatHistoryWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget'
 
 const CHAT_HISTORY_WIDGET_NAME = '$$node-chat-history'
 
diff --git a/src/composables/node/useNodeProgressText.ts b/src/composables/node/useNodeProgressText.ts
index 12e09bd5e..07e7488ea 100644
--- a/src/composables/node/useNodeProgressText.ts
+++ b/src/composables/node/useNodeProgressText.ts
@@ -1,5 +1,5 @@
-import { useTextPreviewWidget } from '@/composables/widgets/useProgressTextWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useTextPreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget'
 
 const TEXT_PREVIEW_WIDGET_NAME = '$$node-text-preview'
 
diff --git a/src/components/graph/vueNodes/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
similarity index 100%
rename from src/components/graph/vueNodes/InputSlot.vue
rename to src/renderer/extensions/vueNodes/components/InputSlot.vue
diff --git a/src/components/graph/vueNodes/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
similarity index 97%
rename from src/components/graph/vueNodes/LGraphNode.vue
rename to src/renderer/extensions/vueNodes/components/LGraphNode.vue
index df97ffa7c..369fe047e 100644
--- a/src/components/graph/vueNodes/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -91,11 +91,11 @@ import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
 
 // Import the VueNodeData type
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { LODLevel, useLOD } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useNodeLayout } from '@/renderer/extensions/vue-nodes/composables/useNodeLayout'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
+import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
 
-import { LiteGraph } from '../../../lib/litegraph/src/litegraph'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
diff --git a/src/components/graph/vueNodes/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
similarity index 89%
rename from src/components/graph/vueNodes/NodeContent.vue
rename to src/renderer/extensions/vueNodes/components/NodeContent.vue
index 41ae8df34..48a03670c 100644
--- a/src/components/graph/vueNodes/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -16,10 +16,9 @@
 import { onErrorCaptured, ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import type { LODLevel } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-
-import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 
 interface NodeContentProps {
   node?: LGraphNode // For backwards compatibility
diff --git a/src/components/graph/vueNodes/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
similarity index 96%
rename from src/components/graph/vueNodes/NodeHeader.vue
rename to src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 3eaaa774a..0a9e15fb1 100644
--- a/src/components/graph/vueNodes/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -45,10 +45,9 @@ import { computed, onErrorCaptured, ref, watch } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import type { LODLevel } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-
-import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 
 interface NodeHeaderProps {
   node?: LGraphNode // For backwards compatibility
diff --git a/src/components/graph/vueNodes/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
similarity index 96%
rename from src/components/graph/vueNodes/NodeSlots.vue
rename to src/renderer/extensions/vueNodes/components/NodeSlots.vue
index 527c88d8a..8310dcf33 100644
--- a/src/components/graph/vueNodes/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -35,14 +35,11 @@ import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
 
 import { useEventForwarding } from '@/composables/graph/useEventForwarding'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import type { LODLevel } from '@/composables/graph/useLOD'
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { isSlotObject } from '@/utils/typeGuardUtil'
 
-import type {
-  INodeSlot,
-  LGraphNode
-} from '../../../lib/litegraph/src/litegraph'
 import InputSlot from './InputSlot.vue'
 import OutputSlot from './OutputSlot.vue'
 
diff --git a/src/components/graph/vueNodes/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
similarity index 90%
rename from src/components/graph/vueNodes/NodeWidgets.vue
rename to src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 10bc978c1..8b077fcca 100644
--- a/src/components/graph/vueNodes/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -41,23 +41,23 @@
 <script setup lang="ts">
 import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
 
-// Import widget components directly
-import WidgetInputText from '@/components/graph/vueWidgets/WidgetInputText.vue'
-import { widgetTypeToComponent } from '@/components/graph/vueWidgets/widgetRegistry'
 import { useEventForwarding } from '@/composables/graph/useEventForwarding'
 import type {
   SafeWidgetData,
   VueNodeData
 } from '@/composables/graph/useGraphNodeManager'
-import { LODLevel } from '@/composables/graph/useLOD'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
+// Import widget components directly
+import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
 import {
   ESSENTIAL_WIDGET_TYPES,
   useWidgetRenderer
-} from '@/composables/graph/useWidgetRenderer'
-import { useErrorHandling } from '@/composables/useErrorHandling'
+} from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer'
+import { widgetTypeToComponent } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 
-import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
 import InputSlot from './InputSlot.vue'
 
 interface NodeWidgetsProps {
diff --git a/src/components/graph/vueNodes/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
similarity index 92%
rename from src/components/graph/vueNodes/OutputSlot.vue
rename to src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 2edd3f096..88c2342a3 100644
--- a/src/components/graph/vueNodes/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -38,12 +38,8 @@ import { computed, onErrorCaptured, ref } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
-
-import type {
-  INodeSlot,
-  LGraphNode
-} from '../../../lib/litegraph/src/litegraph'
-import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
 
 interface OutputSlotProps {
   node?: LGraphNode
diff --git a/src/components/graph/vueNodes/widgets/LOD_IMPLEMENTATION_GUIDE.md b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
similarity index 100%
rename from src/components/graph/vueNodes/widgets/LOD_IMPLEMENTATION_GUIDE.md
rename to src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
diff --git a/src/renderer/extensions/vueNodes/index.ts b/src/renderer/extensions/vueNodes/index.ts
new file mode 100644
index 000000000..efd903bcc
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/index.ts
@@ -0,0 +1,34 @@
+/**
+ * Vue Nodes Renderer Extension
+ *
+ * This extension provides Vue-based node rendering capabilities for ComfyUI.
+ * Domain-driven architecture organizing concerns by function rather than technical layers.
+ *
+ * Architecture:
+ * - components/ - Vue node UI components (LGraphNode, NodeHeader, etc.)
+ * - widgets/ - Widget rendering system (components, composables, registry)
+ * - lod/ - Level of Detail system for performance
+ * - layout/ - Node positioning and layout logic
+ * - interaction/ - User interaction handling (planned)
+ */
+
+// Main node components
+export { default as LGraphNode } from './components/LGraphNode.vue'
+export { default as NodeHeader } from './components/NodeHeader.vue'
+export { default as NodeContent } from './components/NodeContent.vue'
+export { default as NodeSlots } from './components/NodeSlots.vue'
+export { default as NodeWidgets } from './components/NodeWidgets.vue'
+export { default as InputSlot } from './components/InputSlot.vue'
+export { default as OutputSlot } from './components/OutputSlot.vue'
+
+// Widget system exports
+export * from './widgets/registry/widgetRegistry'
+export * from './widgets/composables/useWidgetRenderer'
+export * from './widgets/composables/useWidgetValue'
+export * from './widgets/useNodeWidgets'
+
+// Level of Detail system
+export * from './lod/useLOD'
+
+// Layout system exports
+export * from './layout/useNodeLayout'
diff --git a/src/renderer/extensions/vue-nodes/composables/useNodeLayout.ts b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
similarity index 100%
rename from src/renderer/extensions/vue-nodes/composables/useNodeLayout.ts
rename to src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
diff --git a/src/renderer/extensions/vueNodes/lod/useLOD.ts b/src/renderer/extensions/vueNodes/lod/useLOD.ts
new file mode 100644
index 000000000..9d07e37ca
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/lod/useLOD.ts
@@ -0,0 +1,186 @@
+/**
+ * Level of Detail (LOD) composable for Vue-based node rendering
+ *
+ * Provides dynamic quality adjustment based on zoom level to maintain
+ * performance with large node graphs. Uses zoom thresholds to determine
+ * how much detail to render for each node component.
+ *
+ * ## LOD Levels
+ *
+ * - **FULL** (zoom > 0.8): Complete rendering with all widgets, slots, and content
+ * - **REDUCED** (0.4 < zoom <= 0.8): Essential widgets only, simplified slots
+ * - **MINIMAL** (zoom <= 0.4): Title only, no widgets or slots
+ *
+ * ## Performance Benefits
+ *
+ * - Reduces DOM element count by up to 80% at low zoom levels
+ * - Minimizes layout calculations and paint operations
+ * - Enables smooth performance with 1000+ nodes
+ * - Maintains visual fidelity when detail is actually visible
+ *
+ * @example
+ * ```typescript
+ * const { lodLevel, shouldRenderWidgets, shouldRenderSlots } = useLOD(zoomRef)
+ *
+ * // In template
+ * <NodeWidgets v-if="shouldRenderWidgets" />
+ * <NodeSlots v-if="shouldRenderSlots" />
+ * ```
+ */
+import { type Ref, computed, readonly } from 'vue'
+
+export enum LODLevel {
+  MINIMAL = 'minimal', // zoom <= 0.4
+  REDUCED = 'reduced', // 0.4 < zoom <= 0.8
+  FULL = 'full' // zoom > 0.8
+}
+
+export interface LODConfig {
+  renderWidgets: boolean
+  renderSlots: boolean
+  renderContent: boolean
+  renderSlotLabels: boolean
+  renderWidgetLabels: boolean
+  cssClass: string
+}
+
+// LOD configuration for each level
+const LOD_CONFIGS: Record<LODLevel, LODConfig> = {
+  [LODLevel.FULL]: {
+    renderWidgets: true,
+    renderSlots: true,
+    renderContent: true,
+    renderSlotLabels: true,
+    renderWidgetLabels: true,
+    cssClass: 'lg-node--lod-full'
+  },
+  [LODLevel.REDUCED]: {
+    renderWidgets: true,
+    renderSlots: true,
+    renderContent: false,
+    renderSlotLabels: false,
+    renderWidgetLabels: false,
+    cssClass: 'lg-node--lod-reduced'
+  },
+  [LODLevel.MINIMAL]: {
+    renderWidgets: false,
+    renderSlots: false,
+    renderContent: false,
+    renderSlotLabels: false,
+    renderWidgetLabels: false,
+    cssClass: 'lg-node--lod-minimal'
+  }
+}
+
+/**
+ * Create LOD (Level of Detail) state based on zoom level
+ *
+ * @param zoomRef - Reactive reference to current zoom level (camera.z)
+ * @returns LOD state and configuration
+ */
+export function useLOD(zoomRef: Ref<number>) {
+  // Continuous LOD score (0-1) for smooth transitions
+  const lodScore = computed(() => {
+    const zoom = zoomRef.value
+    return Math.max(0, Math.min(1, zoom))
+  })
+
+  // Determine current LOD level based on zoom
+  const lodLevel = computed<LODLevel>(() => {
+    const zoom = zoomRef.value
+
+    if (zoom > 0.8) return LODLevel.FULL
+    if (zoom > 0.4) return LODLevel.REDUCED
+    return LODLevel.MINIMAL
+  })
+
+  // Get configuration for current LOD level
+  const lodConfig = computed<LODConfig>(() => LOD_CONFIGS[lodLevel.value])
+
+  // Convenience computed properties for common rendering decisions
+  const shouldRenderWidgets = computed(() => lodConfig.value.renderWidgets)
+  const shouldRenderSlots = computed(() => lodConfig.value.renderSlots)
+  const shouldRenderContent = computed(() => lodConfig.value.renderContent)
+  const shouldRenderSlotLabels = computed(
+    () => lodConfig.value.renderSlotLabels
+  )
+  const shouldRenderWidgetLabels = computed(
+    () => lodConfig.value.renderWidgetLabels
+  )
+
+  // CSS class for styling based on LOD level
+  const lodCssClass = computed(() => lodConfig.value.cssClass)
+
+  // Get essential widgets for reduced LOD (only interactive controls)
+  const getEssentialWidgets = (widgets: unknown[]): unknown[] => {
+    if (lodLevel.value === LODLevel.FULL) return widgets
+    if (lodLevel.value === LODLevel.MINIMAL) return []
+
+    // For reduced LOD, filter to essential widget types only
+    return widgets.filter((widget: any) => {
+      const type = widget?.type?.toLowerCase()
+      return [
+        'combo',
+        'select',
+        'toggle',
+        'boolean',
+        'slider',
+        'number'
+      ].includes(type)
+    })
+  }
+
+  // Performance metrics for debugging
+  const lodMetrics = computed(() => ({
+    level: lodLevel.value,
+    zoom: zoomRef.value,
+    widgetCount: shouldRenderWidgets.value ? 'full' : 'none',
+    slotCount: shouldRenderSlots.value ? 'full' : 'none'
+  }))
+
+  return {
+    // Core LOD state
+    lodLevel: readonly(lodLevel),
+    lodConfig: readonly(lodConfig),
+    lodScore: readonly(lodScore),
+
+    // Rendering decisions
+    shouldRenderWidgets,
+    shouldRenderSlots,
+    shouldRenderContent,
+    shouldRenderSlotLabels,
+    shouldRenderWidgetLabels,
+
+    // Styling
+    lodCssClass,
+
+    // Utilities
+    getEssentialWidgets,
+    lodMetrics
+  }
+}
+
+/**
+ * Get LOD level thresholds for configuration or debugging
+ */
+export const LOD_THRESHOLDS = {
+  FULL_THRESHOLD: 0.8,
+  REDUCED_THRESHOLD: 0.4,
+  MINIMAL_THRESHOLD: 0.0
+} as const
+
+/**
+ * Check if zoom level supports a specific feature
+ */
+export function supportsFeatureAtZoom(
+  zoom: number,
+  feature: keyof LODConfig
+): boolean {
+  const level =
+    zoom > 0.8
+      ? LODLevel.FULL
+      : zoom > 0.4
+        ? LODLevel.REDUCED
+        : LODLevel.MINIMAL
+  return LOD_CONFIGS[level][feature] as boolean
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
new file mode 100644
index 000000000..ae8fb7567
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Button
+      v-bind="filteredProps"
+      :disabled="readonly"
+      size="small"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  BADGE_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// Button widgets don't have a v-model value, they trigger actions
+const props = defineProps<{
+  widget: SimplifiedWidget<void>
+  readonly?: boolean
+}>()
+
+// Button specific excluded props
+const BUTTON_EXCLUDED_PROPS = [...BADGE_EXCLUDED_PROPS, 'iconClass'] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, BUTTON_EXCLUDED_PROPS)
+)
+
+const handleClick = () => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback()
+  }
+}
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
new file mode 100644
index 000000000..1c40d35a7
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
+    >
+      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChartData } from 'chart.js'
+import Chart from 'primevue/chart'
+import { computed } from 'vue'
+
+import type { ChartInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+type ChartWidgetOptions = NonNullable<ChartInputSpec['options']>
+
+const value = defineModel<ChartData>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<ChartData, ChartWidgetOptions>
+  readonly?: boolean
+}>()
+
+const chartType = computed(() => props.widget.options?.type ?? 'line')
+
+const chartData = computed(() => value.value || { labels: [], datasets: [] })
+
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      labels: {
+        color: '#FFF',
+        usePointStyle: true,
+        pointStyle: 'circle'
+      }
+    }
+  },
+  scales: {
+    x: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: true,
+        color: '#9FA2BD',
+        drawTicks: false,
+        drawOnChartArea: true,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    },
+    y: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: false,
+        drawTicks: false,
+        drawOnChartArea: false,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    }
+  }
+}))
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
new file mode 100644
index 000000000..16a3dd374
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -0,0 +1,52 @@
+<!-- Needs custom color picker for alpha support -->
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <ColorPicker
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      inline
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ColorPicker from 'primevue/colorpicker'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: '#000000',
+  emit
+})
+
+// ColorPicker specific excluded props include panel/overlay classes
+const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, COLOR_PICKER_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
new file mode 100644
index 000000000..e918a4302
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -0,0 +1,324 @@
+<template>
+  <!-- Replace entire widget with image preview when image is loaded -->
+  <!-- Edge-to-edge: -mx-2 removes the parent's p-2 (8px) padding on each side -->
+  <div
+    v-if="hasImageFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above image -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <!-- TODO: finish once we finish value bindings with Litegraph -->
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Image preview -->
+    <!-- TODO: change hardcoded colors when design system incorporated -->
+    <div class="relative group">
+      <img :src="imageUrl" :alt="selectedFile?.name" class="w-full h-auto" />
+      <!-- Darkening overlay on hover -->
+      <div
+        class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 pointer-events-none"
+      />
+      <!-- Control buttons in top right on hover -->
+      <div
+        v-if="!readonly"
+        class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+      >
+        <!-- Edit button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="handleEdit"
+        >
+          <i class="pi pi-pencil text-white text-xs"></i>
+        </button>
+        <!-- Delete button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="clearFile"
+        >
+          <i class="pi pi-times text-white text-xs"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Audio preview when audio file is loaded -->
+  <div
+    v-else-if="hasAudioFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above audio player -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Audio player -->
+    <div class="relative group px-2">
+      <div
+        class="bg-[#1a1b1e] rounded-lg p-4 flex items-center gap-4"
+        style="border: 1px solid #262729"
+      >
+        <!-- Audio icon -->
+        <div class="flex-shrink-0">
+          <i class="pi pi-volume-up text-2xl opacity-60"></i>
+        </div>
+
+        <!-- File info and controls -->
+        <div class="flex-1">
+          <div class="text-sm font-medium mb-1">{{ selectedFile?.name }}</div>
+          <div class="text-xs opacity-60">
+            {{
+              selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
+            }}
+          </div>
+        </div>
+
+        <!-- Control buttons -->
+        <div v-if="!readonly" class="flex gap-1">
+          <!-- Delete button -->
+          <button
+            class="w-8 h-8 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none hover:bg-[#262729]"
+            @click="clearFile"
+          >
+            <i class="pi pi-times text-white text-sm"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Show normal file upload UI when no image or audio is loaded -->
+  <div
+    v-else
+    class="flex flex-col gap-1 w-full border border-solid p-1 rounded-lg"
+    :style="{ borderColor: '#262729' }"
+  >
+    <div
+      class="border border-dashed p-1 rounded-md transition-colors duration-200 hover:border-[#5B5E7D]"
+      :style="{ borderColor: '#262729' }"
+    >
+      <div class="flex flex-col items-center gap-2 w-full py-4">
+        <!-- Quick and dirty file type detection for testing -->
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span class="text-xs opacity-60"> Drop your file or </span>
+        <div>
+          <Button
+            label="Browse Files"
+            size="small"
+            class="text-xs"
+            :disabled="readonly"
+            @click="triggerFileInput"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Hidden file input always available for both states -->
+  <input
+    ref="fileInputRef"
+    type="file"
+    class="hidden"
+    :accept="widget.options?.accept"
+    :multiple="false"
+    :disabled="readonly"
+    @change="handleFileChange"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+// import { useI18n } from 'vue-i18n' // Commented out for testing
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+// const { t } = useI18n() // Commented out for testing
+
+const props = defineProps<{
+  widget: SimplifiedWidget<File[] | null>
+  modelValue: File[] | null
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: File[] | null]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+// Since we only support single file, get the first file
+const selectedFile = computed(() => {
+  const files = localValue.value || []
+  return files.length > 0 ? files[0] : null
+})
+
+// Quick file type detection for testing
+const detectFileType = (file: File) => {
+  const type = file.type?.toLowerCase() || ''
+  const name = file.name?.toLowerCase() || ''
+
+  if (
+    type.startsWith('image/') ||
+    name.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
+  ) {
+    return 'image'
+  }
+  if (type.startsWith('video/') || name.match(/\.(mp4|webm|ogg|mov)$/)) {
+    return 'video'
+  }
+  if (type.startsWith('audio/') || name.match(/\.(mp3|wav|ogg|flac)$/)) {
+    return 'audio'
+  }
+  if (type === 'application/pdf' || name.endsWith('.pdf')) {
+    return 'pdf'
+  }
+  if (type.includes('zip') || name.match(/\.(zip|rar|7z|tar|gz)$/)) {
+    return 'archive'
+  }
+  return 'file'
+}
+
+// Check if we have an image file
+const hasImageFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'image'
+})
+
+// Check if we have an audio file
+const hasAudioFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'audio'
+})
+
+// Get image URL for preview
+const imageUrl = computed(() => {
+  if (hasImageFile.value && selectedFile.value) {
+    return URL.createObjectURL(selectedFile.value)
+  }
+  return ''
+})
+
+// // Get audio URL for playback
+// const audioUrl = computed(() => {
+//   if (hasAudioFile.value && selectedFile.value) {
+//     return URL.createObjectURL(selectedFile.value)
+//   }
+//   return ''
+// })
+
+// Clean up image URL when file changes
+watch(imageUrl, (newUrl, oldUrl) => {
+  if (oldUrl && oldUrl !== newUrl) {
+    URL.revokeObjectURL(oldUrl)
+  }
+})
+
+const triggerFileInput = () => {
+  fileInputRef.value?.click()
+}
+
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!props.readonly && target.files && target.files.length > 0) {
+    // Since we only support single file, take the first one
+    const file = target.files[0]
+
+    // Use the composable's onChange handler with an array
+    onChange([file])
+
+    // Reset input to allow selecting same file again
+    target.value = ''
+  }
+}
+
+const clearFile = () => {
+  // Clear the file
+  onChange(null)
+
+  // Reset file input
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const handleEdit = () => {
+  // TODO: hook up with maskeditor
+}
+
+// Clear file input when value is cleared externally
+watch(localValue, (newValue) => {
+  if (!newValue || newValue.length === 0) {
+    if (fileInputRef.value) {
+      fileInputRef.value.value = ''
+    }
+  }
+})
+
+// Clean up image URL on unmount
+onUnmounted(() => {
+  if (imageUrl.value) {
+    URL.revokeObjectURL(imageUrl.value)
+  }
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
new file mode 100644
index 000000000..3603b7ab6
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <Galleria
+      v-model:activeIndex="activeIndex"
+      :value="galleryImages"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      :show-thumbnails="showThumbnails"
+      :show-nav-buttons="showNavButtons"
+      class="max-w-full"
+      :pt="{
+        thumbnails: {
+          class: 'overflow-hidden'
+        },
+        thumbnailContent: {
+          class: 'py-4 px-2'
+        },
+        thumbnailPrevButton: {
+          class: 'm-0'
+        },
+        thumbnailNextButton: {
+          class: 'm-0'
+        }
+      }"
+    >
+      <template #item="{ item }">
+        <img
+          :src="item.itemImageSrc || item.src || item"
+          :alt="item.alt || 'Gallery image'"
+          class="w-full h-auto max-h-64 object-contain"
+        />
+      </template>
+      <template #thumbnail="{ item }">
+        <div class="p-1 w-full h-full">
+          <img
+            :src="item.thumbnailImageSrc || item.src || item"
+            :alt="item.alt || 'Gallery thumbnail'"
+            class="w-full h-full object-cover rounded-lg"
+          />
+        </div>
+      </template>
+    </Galleria>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Galleria from 'primevue/galleria'
+import { computed, ref } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  GALLERIA_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+interface GalleryImage {
+  itemImageSrc?: string
+  thumbnailImageSrc?: string
+  src?: string
+  alt?: string
+}
+
+type GalleryValue = string[] | GalleryImage[]
+
+const value = defineModel<GalleryValue>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<GalleryValue>
+  readonly?: boolean
+}>()
+
+const activeIndex = ref(0)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, GALLERIA_EXCLUDED_PROPS)
+)
+
+const galleryImages = computed(() => {
+  if (!value.value || !Array.isArray(value.value)) return []
+
+  return value.value.map((item, index) => {
+    if (typeof item === 'string') {
+      return {
+        itemImageSrc: item,
+        thumbnailImageSrc: item,
+        alt: `Image ${index + 1}`
+      }
+    }
+    return item
+  })
+})
+
+const showThumbnails = computed(() => {
+  return (
+    props.widget.options?.showThumbnails !== false &&
+    galleryImages.value.length > 1
+  )
+})
+
+const showNavButtons = computed(() => {
+  return (
+    props.widget.options?.showNavButtons !== false &&
+    galleryImages.value.length > 1
+  )
+})
+</script>
+
+<style scoped>
+/* Ensure thumbnail container doesn't overflow */
+:deep(.p-galleria-thumbnails) {
+  overflow: hidden;
+}
+
+/* Constrain thumbnail items to prevent overlap */
+:deep(.p-galleria-thumbnail-item) {
+  flex-shrink: 0;
+}
+
+/* Ensure thumbnail wrapper maintains aspect ratio */
+:deep(.p-galleria-thumbnail) {
+  overflow: hidden;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImage.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImage.vue
new file mode 100644
index 000000000..d7af95cf0
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImage.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Image v-bind="filteredProps" :src="widget.value" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Image from 'primevue/image'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  IMAGE_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// Image widgets typically don't have v-model, they display a source URL/path
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, IMAGE_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
new file mode 100644
index 000000000..e51413a30
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
@@ -0,0 +1,70 @@
+<template>
+  <ImageCompare
+    :tabindex="widget.options?.tabindex ?? 0"
+    :aria-label="widget.options?.ariaLabel"
+    :aria-labelledby="widget.options?.ariaLabelledby"
+    :pt="widget.options?.pt"
+    :pt-options="widget.options?.ptOptions"
+    :unstyled="widget.options?.unstyled"
+  >
+    <template #left>
+      <img
+        :src="beforeImage"
+        :alt="beforeAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+    <template #right>
+      <img
+        :src="afterImage"
+        :alt="afterAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+  </ImageCompare>
+</template>
+
+<script setup lang="ts">
+import ImageCompare from 'primevue/imagecompare'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+interface ImageCompareValue {
+  before: string
+  after: string
+  beforeAlt?: string
+  afterAlt?: string
+  initialPosition?: number
+}
+
+// Image compare widgets typically don't have v-model, they display comparison
+const props = defineProps<{
+  widget: SimplifiedWidget<ImageCompareValue | string>
+  readonly?: boolean
+}>()
+
+const beforeImage = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'string' ? value : value?.before || ''
+})
+
+const afterImage = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'string' ? '' : value?.after || ''
+})
+
+const beforeAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.beforeAlt
+    ? value.beforeAlt
+    : 'Before image'
+})
+
+const afterAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.afterAlt
+    ? value.afterAlt
+    : 'After image'
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
new file mode 100644
index 000000000..8cb41dfa9
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <InputText
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import { computed } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
new file mode 100644
index 000000000..4749e561c
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="widget-markdown relative w-full cursor-text"
+    @click="startEditing"
+  >
+    <!-- Display mode: Rendered markdown -->
+    <div
+      v-if="!isEditing"
+      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
+      v-html="renderedHtml"
+    />
+
+    <!-- Edit mode: Textarea -->
+    <Textarea
+      v-else
+      ref="textareaRef"
+      v-model="localValue"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      rows="6"
+      :pt="{
+        root: {
+          onBlur: handleBlur
+        }
+      }"
+      @update:model-value="onChange"
+      @click.stop
+      @keydown.stop
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed, nextTick, ref } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// State
+const isEditing = ref(false)
+const textareaRef = ref<InstanceType<typeof Textarea> | undefined>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+// Computed
+const renderedHtml = computed(() => {
+  return renderMarkdownToHtml(localValue.value || '')
+})
+
+// Methods
+const startEditing = async () => {
+  if (props.readonly || isEditing.value) return
+
+  isEditing.value = true
+  await nextTick()
+
+  // Focus the textarea
+  // @ts-expect-error - $el is an internal property of the Textarea component
+  textareaRef.value?.$el?.focus()
+}
+
+const handleBlur = () => {
+  isEditing.value = false
+}
+</script>
+
+<style scoped>
+.widget-markdown {
+  background-color: var(--p-muted-color);
+  border: 1px solid var(--p-border-color);
+  border-radius: var(--p-border-radius);
+}
+
+.widget-markdown:hover:not(:has(textarea)) {
+  background-color: var(--p-content-hover-background);
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
new file mode 100644
index 000000000..d90bc3ac7
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <MultiSelect
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MultiSelect from 'primevue/multiselect'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any[]>
+  modelValue: any[]
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any[]]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: [],
+  emit
+})
+
+// MultiSelect specific excluded props include overlay styles
+const MULTISELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'overlayStyle'
+] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, MULTISELECT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
new file mode 100644
index 000000000..266282f96
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="flex items-center justify-between gap-4"
+    :style="{ height: widgetHeight + 'px' }"
+  >
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <Select
+      v-model="localValue"
+      :options="selectOptions"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Select from 'primevue/select'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | undefined>
+  modelValue: string | number | undefined
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | undefined]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: props.widget.options?.values?.[0] || '',
+  emit
+})
+
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS)
+)
+
+// Extract select options from widget options
+const selectOptions = computed(() => {
+  const options = props.widget.options
+
+  if (options?.values && Array.isArray(options.values)) {
+    return options.values
+  }
+
+  return []
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
new file mode 100644
index 000000000..95ae3b0ef
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <SelectButton
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      :pt="{
+        pcToggleButton: {
+          label: 'text-xs'
+        }
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SelectButton from 'primevue/selectbutton'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  modelValue: any
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
+
+<style scoped>
+:deep(.p-selectbutton) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-selectbutton:hover) {
+  border-color: currentColor;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
new file mode 100644
index 000000000..de645c2b2
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSlider.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="flex items-center gap-4" :style="{ height: widgetHeight + 'px' }">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <div class="flex items-center gap-2 flex-1 justify-end">
+      <Slider
+        v-model="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+        @update:model-value="onChange"
+      />
+      <InputText
+        v-model="inputDisplayValue"
+        :disabled="readonly"
+        type="number"
+        :min="widget.options?.min"
+        :max="widget.options?.max"
+        :step="stepValue"
+        class="w-[4em] text-center text-xs px-0"
+        size="small"
+        @blur="handleInputBlur"
+        @keydown="handleInputKeydown"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import Slider from 'primevue/slider'
+import { computed, ref, watch } from 'vue'
+
+import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
+import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+  modelValue: number
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useNumberWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+
+// Get the precision value for proper number formatting
+const precision = computed(() => {
+  const p = props.widget.options?.precision
+  // Treat negative or non-numeric precision as undefined
+  return typeof p === 'number' && p >= 0 ? p : undefined
+})
+
+// Calculate the step value based on precision or widget options
+const stepValue = computed(() => {
+  // If step is explicitly defined in options, use it
+  if (props.widget.options?.step !== undefined) {
+    return String(props.widget.options.step)
+  }
+  // Otherwise, derive from precision
+  if (precision.value !== undefined) {
+    if (precision.value === 0) {
+      return '1'
+    }
+    // For precision > 0, step = 1 / (10^precision)
+    // precision 1 → 0.1, precision 2 → 0.01, etc.
+    return (1 / Math.pow(10, precision.value)).toFixed(precision.value)
+  }
+  // Default to 'any' for unrestricted stepping
+  return 'any'
+})
+
+// Format a number according to the widget's precision
+const formatNumber = (value: number): string => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return String(value)
+  }
+  // Use toFixed to ensure correct decimal places
+  return value.toFixed(precision.value)
+}
+
+// Apply precision-based rounding to a number
+const applyPrecision = (value: number): number => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return value
+  }
+  if (precision.value === 0) {
+    // Integer precision
+    return Math.round(value)
+  }
+  // Round to the specified decimal places
+  const multiplier = Math.pow(10, precision.value)
+  return Math.round(value * multiplier) / multiplier
+}
+
+// Keep a separate display value for the input field
+const inputDisplayValue = ref(formatNumber(localValue.value))
+
+// Update display value when localValue changes from external sources
+watch(localValue, (newValue) => {
+  inputDisplayValue.value = formatNumber(newValue)
+})
+
+const handleInputBlur = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value || '0'
+  const parsed = parseFloat(value)
+
+  if (!isNaN(parsed)) {
+    // Apply precision-based rounding
+    const roundedValue = applyPrecision(parsed)
+    onChange(roundedValue)
+    // Update display value with proper formatting
+    inputDisplayValue.value = formatNumber(roundedValue)
+  }
+}
+
+const handleInputKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    const target = event.target as HTMLInputElement
+    const value = target.value || '0'
+    const parsed = parseFloat(value)
+
+    if (!isNaN(parsed)) {
+      // Apply precision-based rounding
+      const roundedValue = applyPrecision(parsed)
+      onChange(roundedValue)
+      // Update display value with proper formatting
+      inputDisplayValue.value = formatNumber(roundedValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Remove number input spinners */
+:deep(input[type='number']::-webkit-inner-spin-button),
+:deep(input[type='number']::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+:deep(input[type='number']) {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
new file mode 100644
index 000000000..2b994432d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -0,0 +1,44 @@
+<template>
+  <Textarea
+    v-model="localValue"
+    v-bind="filteredProps"
+    :disabled="readonly"
+    class="w-full text-xs"
+    size="small"
+    rows="3"
+    @update:model-value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
new file mode 100644
index 000000000..7fee347ae
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <ToggleSwitch
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed } from 'vue'
+
+import { useBooleanWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<boolean>
+  modelValue: boolean
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useBooleanWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
+
+<style scoped>
+:deep(.p-toggleswitch .p-toggleswitch-slider) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-toggleswitch:hover .p-toggleswitch-slider) {
+  border-color: currentColor;
+}
+</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
new file mode 100644
index 000000000..990af664e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <TreeSelect
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TreeSelect from 'primevue/treeselect'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  modelValue: any
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+// TreeSelect specific excluded props
+const TREE_SELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'inputClass',
+  'inputStyle'
+] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, TREE_SELECT_EXCLUDED_PROPS)
+)
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts
new file mode 100644
index 000000000..bc307e3b0
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts
@@ -0,0 +1,33 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  type InputSpec,
+  isBooleanInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useBooleanWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    if (!isBooleanInputSpec(inputSpec)) {
+      throw new Error(`Invalid input data: ${inputSpec}`)
+    }
+
+    const defaultVal = inputSpec.default ?? false
+    const options = {
+      on: inputSpec.label_on,
+      off: inputSpec.label_off
+    }
+
+    return node.addWidget(
+      'toggle',
+      inputSpec.name,
+      defaultVal,
+      () => {},
+      options
+    )
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useChartWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useChartWidget.ts
new file mode 100644
index 000000000..4c94155a6
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useChartWidget.ts
@@ -0,0 +1,28 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IChartWidget } from '@/lib/litegraph/src/types/widgets'
+import {
+  type ChartInputSpec,
+  type InputSpec as InputSpecV2,
+  isChartInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useChartWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IChartWidget => {
+    if (!isChartInputSpec(inputSpec)) {
+      throw new Error('Invalid input spec for chart widget')
+    }
+
+    const { name, options = {} } = inputSpec as ChartInputSpec
+
+    const chartType = options.type || 'line'
+
+    const widget = node.addWidget('chart', name, options.data || {}, () => {}, {
+      serialize: true,
+      type: chartType,
+      ...options
+    }) as IChartWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget.ts
new file mode 100644
index 000000000..53fe6ce6e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget.ts
@@ -0,0 +1,52 @@
+import { ref } from 'vue'
+
+import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import {
+  ComponentWidgetImpl,
+  type ComponentWidgetStandardProps,
+  addWidget
+} from '@/scripts/domWidget'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+type ChatHistoryCustomProps = Omit<
+  InstanceType<typeof ChatHistoryWidget>['$props'],
+  ComponentWidgetStandardProps
+>
+
+const PADDING = 16
+
+export const useChatHistoryWidget = (
+  options: {
+    props?: ChatHistoryCustomProps
+  } = {}
+) => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    const widgetValue = ref<string>('')
+    const widget = new ComponentWidgetImpl<
+      string | object,
+      ChatHistoryCustomProps
+    >({
+      node,
+      name: inputSpec.name,
+      component: ChatHistoryWidget,
+      props: options.props,
+      inputSpec,
+      options: {
+        getValue: () => widgetValue.value,
+        setValue: (value: string | object) => {
+          widgetValue.value = typeof value === 'string' ? value : String(value)
+        },
+        getMinHeight: () => 400 + PADDING
+      }
+    })
+    addWidget(node, widget)
+    return widget
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useColorWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useColorWidget.ts
new file mode 100644
index 000000000..420e31ce0
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useColorWidget.ts
@@ -0,0 +1,20 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IColorWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  ColorInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useColorWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IColorWidget => {
+    const { name, options } = inputSpec as ColorInputSpec
+    const defaultValue = options?.default || '#000000'
+
+    const widget = node.addWidget('color', name, defaultValue, () => {}, {
+      serialize: true
+    }) as IColorWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
new file mode 100644
index 000000000..ad973325d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -0,0 +1,111 @@
+import { ref } from 'vue'
+
+import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
+import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
+import {
+  ComboInputSpec,
+  type InputSpec,
+  isComboInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import {
+  type BaseDOMWidget,
+  ComponentWidgetImpl,
+  addWidget
+} from '@/scripts/domWidget'
+import {
+  type ComfyWidgetConstructorV2,
+  addValueControlWidgets
+} from '@/scripts/widgets'
+
+import { useRemoteWidget } from './useRemoteWidget'
+
+const getDefaultValue = (inputSpec: ComboInputSpec) => {
+  if (inputSpec.default) return inputSpec.default
+  if (inputSpec.options?.length) return inputSpec.options[0]
+  if (inputSpec.remote) return 'Loading...'
+  return undefined
+}
+
+const addMultiSelectWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
+  const widgetValue = ref<string[]>([])
+  const widget = new ComponentWidgetImpl({
+    node,
+    name: inputSpec.name,
+    component: MultiSelectWidget,
+    inputSpec,
+    options: {
+      getValue: () => widgetValue.value,
+      setValue: (value: string[]) => {
+        widgetValue.value = value
+      }
+    }
+  })
+  addWidget(node, widget as BaseDOMWidget<object | string>)
+  // TODO: Add remote support to multi-select widget
+  // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3003
+  return widget
+}
+
+const addComboWidget = (node: LGraphNode, inputSpec: ComboInputSpec) => {
+  const defaultValue = getDefaultValue(inputSpec)
+  const comboOptions = inputSpec.options ?? []
+  const widget = node.addWidget(
+    'combo',
+    inputSpec.name,
+    defaultValue,
+    () => {},
+    {
+      values: comboOptions
+    }
+  ) as IComboWidget
+
+  if (inputSpec.remote) {
+    const remoteWidget = useRemoteWidget({
+      remoteConfig: inputSpec.remote,
+      defaultValue,
+      node,
+      widget
+    })
+    if (inputSpec.remote.refresh_button) remoteWidget.addRefreshButton()
+
+    const origOptions = widget.options
+    widget.options = new Proxy(origOptions, {
+      get(target, prop) {
+        // Assertion: Proxy handler passthrough
+        return prop !== 'values'
+          ? target[prop as keyof typeof target]
+          : remoteWidget.getValue()
+      }
+    })
+  }
+
+  if (inputSpec.control_after_generate) {
+    widget.linkedWidgets = addValueControlWidgets(
+      node,
+      widget,
+      undefined,
+      undefined,
+      transformInputSpecV2ToV1(inputSpec)
+    )
+  }
+
+  return widget
+}
+
+export const useComboWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    if (!isComboInputSpec(inputSpec)) {
+      throw new Error(`Invalid input data: ${inputSpec}`)
+    }
+    return inputSpec.multi_select
+      ? addMultiSelectWidget(node, inputSpec)
+      : addComboWidget(node, inputSpec)
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useFileUploadWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useFileUploadWidget.ts
new file mode 100644
index 000000000..b6c61753f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useFileUploadWidget.ts
@@ -0,0 +1,20 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IFileUploadWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  FileUploadInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useFileUploadWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IFileUploadWidget => {
+    const { name, options = {} } = inputSpec as FileUploadInputSpec
+
+    const widget = node.addWidget('fileupload', name, '', () => {}, {
+      serialize: true,
+      ...(options as Record<string, unknown>)
+    }) as IFileUploadWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
new file mode 100644
index 000000000..cfd40bf8f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
@@ -0,0 +1,81 @@
+import _ from 'lodash'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
+import {
+  type InputSpec,
+  isFloatInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { useSettingStore } from '@/stores/settingStore'
+
+function onFloatValueChange(this: INumericWidget, v: number) {
+  const round = this.options.round
+  if (round) {
+    const precision =
+      this.options.precision ?? Math.max(0, -Math.floor(Math.log10(round)))
+    const rounded = Math.round(v / round) * round
+    this.value = _.clamp(
+      Number(rounded.toFixed(precision)),
+      this.options.min ?? -Infinity,
+      this.options.max ?? Infinity
+    )
+  } else {
+    this.value = v
+  }
+}
+
+export const _for_testing = {
+  onFloatValueChange
+}
+
+export const useFloatWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    if (!isFloatInputSpec(inputSpec)) {
+      throw new Error(`Invalid input data: ${inputSpec}`)
+    }
+
+    const settingStore = useSettingStore()
+    const sliderEnabled = !settingStore.get('Comfy.DisableSliders')
+
+    const display_type = inputSpec.display
+    const widgetType =
+      sliderEnabled && display_type == 'slider'
+        ? 'slider'
+        : display_type == 'knob'
+          ? 'knob'
+          : 'number'
+
+    const step = inputSpec.step ?? 0.5
+    const precision =
+      settingStore.get('Comfy.FloatRoundingPrecision') ||
+      Math.max(0, -Math.floor(Math.log10(step)))
+    const enableRounding = !settingStore.get('Comfy.DisableFloatRounding')
+
+    /** Assertion {@link inputSpec.default} */
+    const defaultValue = (inputSpec.default as number | undefined) ?? 0
+    return node.addWidget(
+      widgetType,
+      inputSpec.name,
+      defaultValue,
+      onFloatValueChange,
+      {
+        min: inputSpec.min ?? 0,
+        max: inputSpec.max ?? 2048,
+        round:
+          enableRounding && precision && !inputSpec.round
+            ? Math.pow(10, -precision)
+            : (inputSpec.round as number),
+        /** @deprecated Use step2 instead. The 10x value is a legacy implementation. */
+        step: step * 10.0,
+        step2: step,
+        precision
+      }
+    )
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useGalleriaWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useGalleriaWidget.ts
new file mode 100644
index 000000000..e06259d29
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useGalleriaWidget.ts
@@ -0,0 +1,26 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IGalleriaWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  GalleriaInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useGalleriaWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IGalleriaWidget => {
+    const { name, options = {} } = inputSpec as GalleriaInputSpec
+
+    const widget = node.addWidget(
+      'galleria',
+      name,
+      options.images || [],
+      () => {},
+      {
+        serialize: true,
+        ...options
+      }
+    ) as IGalleriaWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts
new file mode 100644
index 000000000..a985585e5
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts
@@ -0,0 +1,20 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IImageCompareWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  ImageCompareInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useImageCompareWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IImageCompareWidget => {
+    const { name, options = {} } = inputSpec as ImageCompareInputSpec
+
+    const widget = node.addWidget('imagecompare', name, ['', ''], () => {}, {
+      serialize: true,
+      ...options
+    }) as IImageCompareWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
new file mode 100644
index 000000000..444a9409f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
@@ -0,0 +1,317 @@
+import {
+  BaseWidget,
+  type CanvasPointer,
+  type LGraphNode,
+  LiteGraph
+} from '@/lib/litegraph/src/litegraph'
+import type {
+  IBaseWidget,
+  IWidgetOptions
+} from '@/lib/litegraph/src/types/widgets'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { app } from '@/scripts/app'
+import { calculateImageGrid } from '@/scripts/ui/imagePreview'
+import { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { is_all_same_aspect_ratio } from '@/utils/imageUtil'
+
+const renderPreview = (
+  ctx: CanvasRenderingContext2D,
+  node: LGraphNode,
+  shiftY: number
+) => {
+  const canvas = useCanvasStore().getCanvas()
+  const mouse = canvas.graph_mouse
+
+  if (!canvas.pointer_is_down && node.pointerDown) {
+    if (
+      mouse[0] === node.pointerDown.pos[0] &&
+      mouse[1] === node.pointerDown.pos[1]
+    ) {
+      node.imageIndex = node.pointerDown.index
+    }
+    node.pointerDown = null
+  }
+
+  const imgs = node.imgs ?? []
+  let { imageIndex } = node
+  const numImages = imgs.length
+  if (numImages === 1 && !imageIndex) {
+    // This skips the thumbnail render section below
+    node.imageIndex = imageIndex = 0
+  }
+
+  const settingStore = useSettingStore()
+  const allowImageSizeDraw = settingStore.get('Comfy.Node.AllowImageSizeDraw')
+  const IMAGE_TEXT_SIZE_TEXT_HEIGHT = allowImageSizeDraw ? 15 : 0
+  const dw = node.size[0]
+  const dh = node.size[1] - shiftY - IMAGE_TEXT_SIZE_TEXT_HEIGHT
+
+  if (imageIndex == null) {
+    // No image selected; draw thumbnails of all
+    let cellWidth: number
+    let cellHeight: number
+    let shiftX: number
+    let cell_padding: number
+    let cols: number
+
+    const compact_mode = is_all_same_aspect_ratio(imgs)
+    if (!compact_mode) {
+      // use rectangle cell style and border line
+      cell_padding = 2
+      // Prevent infinite canvas2d scale-up
+      const largestDimension = imgs.reduce(
+        (acc, current) =>
+          Math.max(acc, current.naturalWidth, current.naturalHeight),
+        0
+      )
+      const fakeImgs = []
+      fakeImgs.length = imgs.length
+      fakeImgs[0] = {
+        naturalWidth: largestDimension,
+        naturalHeight: largestDimension
+      }
+      ;({ cellWidth, cellHeight, cols, shiftX } = calculateImageGrid(
+        fakeImgs,
+        dw,
+        dh
+      ))
+    } else {
+      cell_padding = 0
+      ;({ cellWidth, cellHeight, cols, shiftX } = calculateImageGrid(
+        imgs,
+        dw,
+        dh
+      ))
+    }
+
+    let anyHovered = false
+    node.imageRects = []
+    for (let i = 0; i < numImages; i++) {
+      const img = imgs[i]
+      const row = Math.floor(i / cols)
+      const col = i % cols
+      const x = col * cellWidth + shiftX
+      const y = row * cellHeight + shiftY
+      if (!anyHovered) {
+        anyHovered = LiteGraph.isInsideRectangle(
+          mouse[0],
+          mouse[1],
+          x + node.pos[0],
+          y + node.pos[1],
+          cellWidth,
+          cellHeight
+        )
+        if (anyHovered) {
+          node.overIndex = i
+          let value = 110
+          if (canvas.pointer_is_down) {
+            if (!node.pointerDown || node.pointerDown.index !== i) {
+              node.pointerDown = { index: i, pos: [...mouse] }
+            }
+            value = 125
+          }
+          ctx.filter = `contrast(${value}%) brightness(${value}%)`
+          canvas.canvas.style.cursor = 'pointer'
+        }
+      }
+      node.imageRects.push([x, y, cellWidth, cellHeight])
+
+      const wratio = cellWidth / img.width
+      const hratio = cellHeight / img.height
+      const ratio = Math.min(wratio, hratio)
+
+      const imgHeight = ratio * img.height
+      const imgY = row * cellHeight + shiftY + (cellHeight - imgHeight) / 2
+      const imgWidth = ratio * img.width
+      const imgX = col * cellWidth + shiftX + (cellWidth - imgWidth) / 2
+
+      ctx.drawImage(
+        img,
+        imgX + cell_padding,
+        imgY + cell_padding,
+        imgWidth - cell_padding * 2,
+        imgHeight - cell_padding * 2
+      )
+      if (!compact_mode) {
+        // rectangle cell and border line style
+        ctx.strokeStyle = '#8F8F8F'
+        ctx.lineWidth = 1
+        ctx.strokeRect(
+          x + cell_padding,
+          y + cell_padding,
+          cellWidth - cell_padding * 2,
+          cellHeight - cell_padding * 2
+        )
+      }
+
+      ctx.filter = 'none'
+    }
+
+    if (!anyHovered) {
+      node.pointerDown = null
+      node.overIndex = null
+    }
+
+    return
+  }
+  // Draw individual
+  const img = imgs[imageIndex]
+  let w = img.naturalWidth
+  let h = img.naturalHeight
+
+  const scaleX = dw / w
+  const scaleY = dh / h
+  const scale = Math.min(scaleX, scaleY, 1)
+
+  w *= scale
+  h *= scale
+
+  const x = (dw - w) / 2
+  const y = (dh - h) / 2 + shiftY
+  ctx.drawImage(img, x, y, w, h)
+
+  // Draw image size text below the image
+  if (allowImageSizeDraw) {
+    ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR
+    ctx.textAlign = 'center'
+    ctx.font = '10px sans-serif'
+    const sizeText = `${Math.round(img.naturalWidth)} × ${Math.round(img.naturalHeight)}`
+    const textY = y + h + 10
+    ctx.fillText(sizeText, x + w / 2, textY)
+  }
+
+  const drawButton = (
+    x: number,
+    y: number,
+    sz: number,
+    text: string
+  ): boolean => {
+    const hovered = LiteGraph.isInsideRectangle(
+      mouse[0],
+      mouse[1],
+      x + node.pos[0],
+      y + node.pos[1],
+      sz,
+      sz
+    )
+    let fill = '#333'
+    let textFill = '#fff'
+    let isClicking = false
+    if (hovered) {
+      canvas.canvas.style.cursor = 'pointer'
+      if (canvas.pointer_is_down) {
+        fill = '#1e90ff'
+        isClicking = true
+      } else {
+        fill = '#eee'
+        textFill = '#000'
+      }
+    }
+
+    ctx.fillStyle = fill
+    ctx.beginPath()
+    ctx.roundRect(x, y, sz, sz, [4])
+    ctx.fill()
+    ctx.fillStyle = textFill
+    ctx.font = '12px Arial'
+    ctx.textAlign = 'center'
+    ctx.fillText(text, x + 15, y + 20)
+
+    return isClicking
+  }
+
+  if (!(numImages > 1)) return
+
+  const imageNum = (node.imageIndex ?? 0) + 1
+  if (drawButton(dw - 40, dh + shiftY - 40, 30, `${imageNum}/${numImages}`)) {
+    const i = imageNum >= numImages ? 0 : imageNum
+    if (!node.pointerDown || node.pointerDown.index !== i) {
+      node.pointerDown = { index: i, pos: [...mouse] }
+    }
+  }
+
+  if (drawButton(dw - 40, shiftY + 10, 30, `x`)) {
+    if (!node.pointerDown || node.pointerDown.index !== null) {
+      node.pointerDown = { index: null, pos: [...mouse] }
+    }
+  }
+}
+
+class ImagePreviewWidget extends BaseWidget {
+  constructor(
+    node: LGraphNode,
+    name: string,
+    options: IWidgetOptions<string | object>
+  ) {
+    const widget: IBaseWidget = {
+      name,
+      options,
+      type: 'custom',
+      /** Dummy value to satisfy type requirements. */
+      value: '',
+      y: 0
+    }
+    super(widget, node)
+
+    // Don't serialize the widget value
+    this.serialize = false
+  }
+
+  override drawWidget(ctx: CanvasRenderingContext2D): void {
+    renderPreview(ctx, this.node, this.y)
+  }
+
+  override onPointerDown(pointer: CanvasPointer, node: LGraphNode): boolean {
+    pointer.onDragStart = () => {
+      const { canvas } = app
+      const { graph } = canvas
+      canvas.emitBeforeChange()
+      graph?.beforeChange()
+      // Ensure that dragging is properly cleaned up, on success or failure.
+      pointer.finally = () => {
+        canvas.isDragging = false
+        graph?.afterChange()
+        canvas.emitAfterChange()
+      }
+
+      canvas.processSelect(node, pointer.eDown)
+      canvas.isDragging = true
+    }
+
+    pointer.onDragEnd = (e) => {
+      const { canvas } = app
+      if (e.shiftKey || LiteGraph.alwaysSnapToGrid)
+        canvas.graph?.snapToGrid(canvas.selectedItems)
+
+      canvas.setDirty(true, true)
+    }
+
+    return true
+  }
+
+  override onClick(): void {}
+
+  override computeLayoutSize() {
+    return {
+      minHeight: 220,
+      minWidth: 1
+    }
+  }
+}
+
+export const useImagePreviewWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    return node.addCustomWidget(
+      new ImagePreviewWidget(node, inputSpec.name, {
+        serialize: false
+      })
+    )
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
new file mode 100644
index 000000000..bf4e18fcb
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
@@ -0,0 +1,121 @@
+import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage'
+import { useNodeImageUpload } from '@/composables/node/useNodeImageUpload'
+import { useValueTransform } from '@/composables/useValueTransform'
+import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { IComboWidget } from '@/lib/litegraph/src/types/widgets'
+import type { ResultItem, ResultItemType } from '@/schemas/apiSchema'
+import type { InputSpec } from '@/schemas/nodeDefSchema'
+import type { ComfyWidgetConstructor } from '@/scripts/widgets'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { isImageUploadInput } from '@/types/nodeDefAugmentation'
+import { createAnnotatedPath } from '@/utils/formatUtil'
+import { addToComboValues } from '@/utils/litegraphUtil'
+
+const ACCEPTED_IMAGE_TYPES = 'image/png,image/jpeg,image/webp'
+const ACCEPTED_VIDEO_TYPES = 'video/webm,video/mp4'
+
+type InternalFile = string | ResultItem
+type InternalValue = InternalFile | InternalFile[]
+type ExposedValue = string | string[]
+
+const isImageFile = (file: File) => file.type.startsWith('image/')
+const isVideoFile = (file: File) => file.type.startsWith('video/')
+
+const findFileComboWidget = (node: LGraphNode, inputName: string) =>
+  node.widgets!.find((w) => w.name === inputName) as IComboWidget & {
+    value: ExposedValue
+  }
+
+export const useImageUploadWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructor = (
+    node: LGraphNode,
+    inputName: string,
+    inputData: InputSpec
+  ) => {
+    if (!isImageUploadInput(inputData)) {
+      throw new Error(
+        'Image upload widget requires imageInputName augmentation'
+      )
+    }
+
+    const inputOptions = inputData[1]
+    const { imageInputName, allow_batch, image_folder = 'input' } = inputOptions
+    const folder: ResultItemType | undefined = image_folder
+    const nodeOutputStore = useNodeOutputStore()
+
+    const isAnimated = !!inputOptions.animated_image_upload
+    const isVideo = !!inputOptions.video_upload
+    const accept = isVideo ? ACCEPTED_VIDEO_TYPES : ACCEPTED_IMAGE_TYPES
+    const { showPreview } = isVideo ? useNodeVideo(node) : useNodeImage(node)
+
+    const fileFilter = isVideo ? isVideoFile : isImageFile
+    const fileComboWidget = findFileComboWidget(node, imageInputName)
+    const initialFile = `${fileComboWidget.value}`
+    const formatPath = (value: InternalFile) =>
+      createAnnotatedPath(value, { rootFolder: image_folder })
+
+    const transform = (internalValue: InternalValue): ExposedValue => {
+      if (!internalValue) return initialFile
+      if (Array.isArray(internalValue))
+        return allow_batch
+          ? internalValue.map(formatPath)
+          : formatPath(internalValue[0])
+      return formatPath(internalValue)
+    }
+
+    Object.defineProperty(
+      fileComboWidget,
+      'value',
+      useValueTransform(transform, initialFile)
+    )
+
+    // Setup file upload handling
+    const { openFileSelection } = useNodeImageUpload(node, {
+      allow_batch,
+      fileFilter,
+      accept,
+      folder,
+      onUploadComplete: (output) => {
+        output.forEach((path) => addToComboValues(fileComboWidget, path))
+        // @ts-expect-error litegraph combo value type does not support arrays yet
+        fileComboWidget.value = output
+        fileComboWidget.callback?.(output)
+      }
+    })
+
+    // Create the button widget for selecting the files
+    const uploadWidget = node.addWidget(
+      'button',
+      inputName,
+      'image',
+      () => openFileSelection(),
+      {
+        serialize: false
+      }
+    )
+    uploadWidget.label = t('g.choose_file_to_upload')
+
+    // Add our own callback to the combo widget to render an image when it changes
+    fileComboWidget.callback = function () {
+      nodeOutputStore.setNodeOutputs(node, fileComboWidget.value, {
+        isAnimated
+      })
+      node.graph?.setDirtyCanvas(true)
+    }
+
+    // On load if we have a value then render the image
+    // The value isnt set immediately so we need to wait a moment
+    // No change callbacks seem to be fired on initial setting of the value
+    requestAnimationFrame(() => {
+      nodeOutputStore.setNodeOutputs(node, fileComboWidget.value, {
+        isAnimated
+      })
+      showPreview({ block: false })
+    })
+
+    return { widget: uploadWidget }
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImageWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageWidget.ts
new file mode 100644
index 000000000..a6d78956d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImageWidget.ts
@@ -0,0 +1,20 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IImageWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  ImageInputSpec,
+  InputSpec as InputSpecV2
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useImageWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IImageWidget => {
+    const { name, options = {} } = inputSpec as ImageInputSpec
+
+    const widget = node.addWidget('image', name, '', () => {}, {
+      serialize: true,
+      ...options
+    }) as IImageWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
new file mode 100644
index 000000000..d7b0719e9
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
@@ -0,0 +1,97 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
+import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
+import {
+  type InputSpec,
+  isIntInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import {
+  type ComfyWidgetConstructorV2,
+  addValueControlWidget
+} from '@/scripts/widgets'
+import { useSettingStore } from '@/stores/settingStore'
+
+function onValueChange(this: INumericWidget, v: number) {
+  // For integers, always round to the nearest step
+  // step === 0 is invalid, assign 1 if options.step is 0
+  const step = this.options.step2 || 1
+
+  if (step === 1) {
+    // Simple case: round to nearest integer
+    this.value = Math.round(v)
+  } else {
+    // Round to nearest multiple of step
+    // First, determine if min value creates an offset
+    const min = this.options.min ?? 0
+    const offset = min % step
+
+    // Round to nearest step, accounting for offset
+    this.value = Math.round((v - offset) / step) * step + offset
+  }
+}
+
+export const _for_testing = {
+  onValueChange
+}
+
+export const useIntWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    if (!isIntInputSpec(inputSpec)) {
+      throw new Error(`Invalid input data: ${inputSpec}`)
+    }
+
+    const settingStore = useSettingStore()
+    const sliderEnabled = !settingStore.get('Comfy.DisableSliders')
+    const display_type = inputSpec.display
+    const widgetType =
+      sliderEnabled && display_type == 'slider'
+        ? 'slider'
+        : display_type == 'knob'
+          ? 'knob'
+          : 'number'
+
+    const step = inputSpec.step ?? 1
+    /** Assertion {@link inputSpec.default} */
+    const defaultValue = (inputSpec.default as number | undefined) ?? 0
+    const widget = node.addWidget(
+      widgetType,
+      inputSpec.name,
+      defaultValue,
+      onValueChange,
+      {
+        min: inputSpec.min ?? 0,
+        max: inputSpec.max ?? 2048,
+        /** @deprecated Use step2 instead. The 10x value is a legacy implementation. */
+        step: step * 10,
+        step2: step,
+        precision: 0
+      }
+    )
+
+    const controlAfterGenerate =
+      inputSpec.control_after_generate ??
+      /**
+       * Compatibility with legacy node convention. Int input with name
+       * 'seed' or 'noise_seed' get automatically added a control widget.
+       */
+      ['seed', 'noise_seed'].includes(inputSpec.name)
+
+    if (controlAfterGenerate) {
+      const seedControl = addValueControlWidget(
+        node,
+        widget,
+        'randomize',
+        undefined,
+        undefined,
+        transformInputSpecV2ToV1(inputSpec)
+      )
+      widget.linkedWidgets = [seedControl]
+    }
+
+    return widget
+  }
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
new file mode 100644
index 000000000..fd91330be
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
@@ -0,0 +1,115 @@
+import { Editor as TiptapEditor } from '@tiptap/core'
+import TiptapLink from '@tiptap/extension-link'
+import TiptapTable from '@tiptap/extension-table'
+import TiptapTableCell from '@tiptap/extension-table-cell'
+import TiptapTableHeader from '@tiptap/extension-table-header'
+import TiptapTableRow from '@tiptap/extension-table-row'
+import TiptapStarterKit from '@tiptap/starter-kit'
+import { Markdown as TiptapMarkdown } from 'tiptap-markdown'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { type InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { app } from '@/scripts/app'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+function addMarkdownWidget(
+  node: LGraphNode,
+  name: string,
+  opts: { defaultVal: string }
+) {
+  TiptapMarkdown.configure({
+    html: false,
+    breaks: true,
+    transformPastedText: true
+  })
+  const editor = new TiptapEditor({
+    extensions: [
+      TiptapStarterKit,
+      TiptapMarkdown,
+      TiptapLink,
+      TiptapTable,
+      TiptapTableCell,
+      TiptapTableHeader,
+      TiptapTableRow
+    ],
+    content: opts.defaultVal,
+    editable: false
+  })
+
+  const inputEl = editor.options.element as HTMLElement
+  inputEl.classList.add('comfy-markdown')
+  const textarea = document.createElement('textarea')
+  inputEl.append(textarea)
+
+  const widget = node.addDOMWidget(name, 'MARKDOWN', inputEl, {
+    getValue(): string {
+      return textarea.value
+    },
+    setValue(v: string) {
+      textarea.value = v
+      editor.commands.setContent(v)
+    }
+  })
+  widget.inputEl = inputEl
+  widget.options.minNodeSize = [400, 200]
+
+  inputEl.addEventListener('pointerdown', (event: PointerEvent) => {
+    if (event.button !== 0) {
+      app.canvas.processMouseDown(event)
+      return
+    }
+    if (event.target instanceof HTMLAnchorElement) {
+      return
+    }
+    inputEl.classList.add('editing')
+    setTimeout(() => {
+      textarea.focus()
+    }, 0)
+  })
+
+  textarea.addEventListener('blur', () => {
+    inputEl.classList.remove('editing')
+  })
+
+  textarea.addEventListener('change', () => {
+    editor.commands.setContent(textarea.value)
+    widget.callback?.(widget.value)
+  })
+
+  inputEl.addEventListener('keydown', (event: KeyboardEvent) => {
+    event.stopPropagation()
+  })
+
+  inputEl.addEventListener('pointerdown', (event: PointerEvent) => {
+    if (event.button === 1) {
+      app.canvas.processMouseDown(event)
+    }
+  })
+
+  inputEl.addEventListener('pointermove', (event: PointerEvent) => {
+    if ((event.buttons & 4) === 4) {
+      app.canvas.processMouseMove(event)
+    }
+  })
+
+  inputEl.addEventListener('pointerup', (event: PointerEvent) => {
+    if (event.button === 1) {
+      app.canvas.processMouseUp(event)
+    }
+  })
+
+  return widget
+}
+
+export const useMarkdownWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    return addMarkdownWidget(node, inputSpec.name, {
+      defaultVal: inputSpec.default ?? ''
+    })
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useMultiSelectWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useMultiSelectWidget.ts
new file mode 100644
index 000000000..2730115b7
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useMultiSelectWidget.ts
@@ -0,0 +1,21 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IMultiSelectWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  InputSpec as InputSpecV2,
+  MultiSelectInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useMultiSelectWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): IMultiSelectWidget => {
+    const { name, options = {} } = inputSpec as MultiSelectInputSpec
+
+    const widget = node.addWidget('multiselect', name, [], () => {}, {
+      serialize: true,
+      values: options.values || [],
+      ...options
+    }) as IMultiSelectWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget.ts
new file mode 100644
index 000000000..dd3f1d0c2
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget.ts
@@ -0,0 +1,55 @@
+import { ref } from 'vue'
+
+import TextPreviewWidget from '@/components/graph/widgets/TextPreviewWidget.vue'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import {
+  ComponentWidgetImpl,
+  type ComponentWidgetStandardProps,
+  addWidget
+} from '@/scripts/domWidget'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+type TextPreviewCustomProps = Omit<
+  InstanceType<typeof TextPreviewWidget>['$props'],
+  ComponentWidgetStandardProps
+>
+
+const PADDING = 16
+
+export const useTextPreviewWidget = (
+  options: {
+    minHeight?: number
+  } = {}
+) => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    const widgetValue = ref<string>('')
+    const widget = new ComponentWidgetImpl<
+      string | object,
+      TextPreviewCustomProps
+    >({
+      node,
+      name: inputSpec.name,
+      component: TextPreviewWidget,
+      inputSpec,
+      props: {
+        nodeId: node.id
+      },
+      options: {
+        getValue: () => widgetValue.value,
+        setValue: (value: string | object) => {
+          widgetValue.value = typeof value === 'string' ? value : String(value)
+        },
+        getMinHeight: () => options.minHeight ?? 42 + PADDING,
+        serialize: false
+      }
+    })
+    addWidget(node, widget)
+    return widget
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
new file mode 100644
index 000000000..0fde7592a
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
@@ -0,0 +1,274 @@
+import axios from 'axios'
+
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { IWidget } from '@/lib/litegraph/src/litegraph'
+import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
+import { api } from '@/scripts/api'
+
+const MAX_RETRIES = 5
+const TIMEOUT = 4096
+
+export interface CacheEntry<T> {
+  data: T
+  timestamp?: number
+  error?: Error | null
+  fetchPromise?: Promise<T>
+  controller?: AbortController
+  lastErrorTime?: number
+  retryCount?: number
+  failed?: boolean
+}
+
+const dataCache = new Map<string, CacheEntry<any>>()
+
+const createCacheKey = (config: RemoteWidgetConfig): string => {
+  const { route, query_params = {}, refresh = 0 } = config
+
+  const paramsKey = Object.entries(query_params)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([k, v]) => `${k}=${v}`)
+    .join('&')
+
+  return [route, `r=${refresh}`, paramsKey].join(';')
+}
+
+const getBackoff = (retryCount: number) =>
+  Math.min(1000 * Math.pow(2, retryCount), 512)
+
+const isInitialized = (entry: CacheEntry<unknown> | undefined) =>
+  entry?.data && entry?.timestamp && entry.timestamp > 0
+
+const isStale = (entry: CacheEntry<unknown> | undefined, ttl: number) =>
+  entry?.timestamp && Date.now() - entry.timestamp >= ttl
+
+const isFetching = (entry: CacheEntry<unknown> | undefined) =>
+  entry?.fetchPromise !== undefined
+
+const isFailed = (entry: CacheEntry<unknown> | undefined) =>
+  entry?.failed === true
+
+const isBackingOff = (entry: CacheEntry<unknown> | undefined) =>
+  entry?.error &&
+  entry?.lastErrorTime &&
+  Date.now() - entry.lastErrorTime < getBackoff(entry.retryCount || 0)
+
+const fetchData = async (
+  config: RemoteWidgetConfig,
+  controller: AbortController
+) => {
+  const { route, response_key, query_params, timeout = TIMEOUT } = config
+  const res = await axios.get(route, {
+    params: query_params,
+    signal: controller.signal,
+    timeout
+  })
+  return response_key ? res.data[response_key] : res.data
+}
+
+export function useRemoteWidget<
+  T extends string | number | boolean | object
+>(options: {
+  remoteConfig: RemoteWidgetConfig
+  defaultValue: T
+  node: LGraphNode
+  widget: IWidget
+}) {
+  const { remoteConfig, defaultValue, node, widget } = options
+  const { refresh = 0, max_retries = MAX_RETRIES } = remoteConfig
+  const isPermanent = refresh <= 0
+  const cacheKey = createCacheKey(remoteConfig)
+  let isLoaded = false
+  let refreshQueued = false
+
+  const setSuccess = (entry: CacheEntry<T>, data: T) => {
+    entry.retryCount = 0
+    entry.lastErrorTime = 0
+    entry.error = null
+    entry.timestamp = Date.now()
+    entry.data = data ?? defaultValue
+  }
+
+  const setError = (entry: CacheEntry<T>, error: Error | unknown) => {
+    entry.retryCount = (entry.retryCount || 0) + 1
+    entry.lastErrorTime = Date.now()
+    entry.error = error instanceof Error ? error : new Error(String(error))
+    entry.data ??= defaultValue
+    entry.fetchPromise = undefined
+    if (entry.retryCount >= max_retries) {
+      setFailed(entry)
+    }
+  }
+
+  const setFailed = (entry: CacheEntry<T>) => {
+    dataCache.set(cacheKey, {
+      data: entry.data ?? defaultValue,
+      failed: true
+    })
+  }
+
+  const isFirstLoad = () => {
+    return !isLoaded && isInitialized(dataCache.get(cacheKey))
+  }
+
+  const onFirstLoad = (data: T[]) => {
+    isLoaded = true
+    widget.value = data[0]
+    widget.callback?.(widget.value)
+    node.graph?.setDirtyCanvas(true)
+  }
+
+  const fetchValue = async () => {
+    const entry = dataCache.get(cacheKey)
+
+    if (isFailed(entry)) return entry!.data
+
+    const isValid =
+      isInitialized(entry) && (isPermanent || !isStale(entry, refresh))
+    if (isValid || isBackingOff(entry) || isFetching(entry)) return entry!.data
+
+    const currentEntry: CacheEntry<T> = entry || { data: defaultValue }
+    dataCache.set(cacheKey, currentEntry)
+
+    try {
+      currentEntry.controller = new AbortController()
+      currentEntry.fetchPromise = fetchData(
+        remoteConfig,
+        currentEntry.controller
+      )
+      const data = await currentEntry.fetchPromise
+
+      setSuccess(currentEntry, data)
+      return currentEntry.data
+    } catch (err) {
+      setError(currentEntry, err)
+      return currentEntry.data
+    } finally {
+      currentEntry.fetchPromise = undefined
+      currentEntry.controller = undefined
+    }
+  }
+
+  const onRefresh = () => {
+    if (remoteConfig.control_after_refresh) {
+      const data = getCachedValue()
+      if (!Array.isArray(data)) return // control_after_refresh is only supported for array values
+
+      switch (remoteConfig.control_after_refresh) {
+        case 'first':
+          widget.value = data[0] ?? defaultValue
+          break
+        case 'last':
+          widget.value = data.at(-1) ?? defaultValue
+          break
+      }
+      widget.callback?.(widget.value)
+      node.graph?.setDirtyCanvas(true)
+    }
+  }
+
+  /**
+   * Clear the widget's cached value, forcing a refresh on next access (e.g., a new render)
+   */
+  const clearCachedValue = () => {
+    const entry = dataCache.get(cacheKey)
+    if (!entry) return
+    if (entry.fetchPromise) entry.controller?.abort() // Abort in-flight request
+    dataCache.delete(cacheKey)
+  }
+
+  /**
+   * Get the cached value of the widget without starting a new fetch.
+   * @returns the most recently computed value of the widget.
+   */
+  function getCachedValue() {
+    return dataCache.get(cacheKey)?.data as T
+  }
+
+  /**
+   * Getter of the remote property of the widget (e.g., options.values, value, etc.).
+   * Starts the fetch process then returns the cached value immediately.
+   * @returns the most recent value of the widget.
+   */
+  function getValue(onFulfilled?: () => void) {
+    void fetchValue()
+      .then((data) => {
+        if (isFirstLoad()) onFirstLoad(data)
+        if (refreshQueued && data !== defaultValue) {
+          onRefresh()
+          refreshQueued = false
+        }
+        onFulfilled?.()
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+    return getCachedValue() ?? defaultValue
+  }
+
+  /**
+   * Force the widget to refresh its value
+   */
+  widget.refresh = function () {
+    refreshQueued = true
+    clearCachedValue()
+    getValue()
+  }
+
+  /**
+   * Add a refresh button to the node that, when clicked, will force the widget to refresh
+   */
+  function addRefreshButton() {
+    node.addWidget('button', 'refresh', 'refresh', widget.refresh)
+  }
+
+  /**
+   * Add auto-refresh toggle widget and execution success listener
+   */
+  function addAutoRefreshToggle() {
+    let autoRefreshEnabled = false
+
+    // Handler for execution success
+    const handleExecutionSuccess = () => {
+      if (autoRefreshEnabled && widget.refresh) {
+        widget.refresh()
+      }
+    }
+
+    // Add toggle widget
+    const autoRefreshWidget = node.addWidget(
+      'toggle',
+      'Auto-refresh after generation',
+      false,
+      (value: boolean) => {
+        autoRefreshEnabled = value
+      },
+      {
+        serialize: false
+      }
+    )
+
+    // Register event listener
+    api.addEventListener('execution_success', handleExecutionSuccess)
+
+    // Cleanup on node removal
+    node.onRemoved = useChainCallback(node.onRemoved, function () {
+      api.removeEventListener('execution_success', handleExecutionSuccess)
+    })
+
+    return autoRefreshWidget
+  }
+
+  // Always add auto-refresh toggle for remote widgets
+  addAutoRefreshToggle()
+
+  return {
+    getCachedValue,
+    getValue,
+    refreshValue: widget.refresh,
+    addRefreshButton,
+    getCacheEntry: () => dataCache.get(cacheKey),
+
+    cacheKey
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useSelectButtonWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useSelectButtonWidget.ts
new file mode 100644
index 000000000..f9c3af9aa
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useSelectButtonWidget.ts
@@ -0,0 +1,28 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ISelectButtonWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  InputSpec as InputSpecV2,
+  SelectButtonInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useSelectButtonWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ISelectButtonWidget => {
+    const { name, options = {} } = inputSpec as SelectButtonInputSpec
+    const values = options.values || []
+
+    const widget = node.addWidget(
+      'selectbutton',
+      name,
+      values[0] || '',
+      (_value: string) => {},
+      {
+        serialize: true,
+        values,
+        ...options
+      }
+    ) as ISelectButtonWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
new file mode 100644
index 000000000..4766925ee
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
@@ -0,0 +1,139 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  type InputSpec,
+  isStringInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { app } from '@/scripts/app'
+import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { useSettingStore } from '@/stores/settingStore'
+
+const TRACKPAD_DETECTION_THRESHOLD = 50
+
+function addMultilineWidget(
+  node: LGraphNode,
+  name: string,
+  opts: { defaultVal: string; placeholder?: string }
+) {
+  const inputEl = document.createElement('textarea')
+  inputEl.className = 'comfy-multiline-input'
+  inputEl.value = opts.defaultVal
+  inputEl.placeholder = opts.placeholder || name
+  inputEl.spellcheck = useSettingStore().get('Comfy.TextareaWidget.Spellcheck')
+
+  const widget = node.addDOMWidget(name, 'customtext', inputEl, {
+    getValue(): string {
+      return inputEl.value
+    },
+    setValue(v: string) {
+      inputEl.value = v
+    }
+  })
+
+  widget.inputEl = inputEl
+  widget.options.minNodeSize = [400, 200]
+
+  inputEl.addEventListener('input', () => {
+    widget.callback?.(widget.value)
+  })
+
+  // Allow middle mouse button panning
+  inputEl.addEventListener('pointerdown', (event: PointerEvent) => {
+    if (event.button === 1) {
+      app.canvas.processMouseDown(event)
+    }
+  })
+
+  inputEl.addEventListener('pointermove', (event: PointerEvent) => {
+    if ((event.buttons & 4) === 4) {
+      app.canvas.processMouseMove(event)
+    }
+  })
+
+  inputEl.addEventListener('pointerup', (event: PointerEvent) => {
+    if (event.button === 1) {
+      app.canvas.processMouseUp(event)
+    }
+  })
+
+  inputEl.addEventListener('wheel', (event: WheelEvent) => {
+    const gesturesEnabled = useSettingStore().get(
+      'LiteGraph.Pointer.TrackpadGestures'
+    )
+    const deltaX = event.deltaX
+    const deltaY = event.deltaY
+
+    const canScrollY = inputEl.scrollHeight > inputEl.clientHeight
+    const isHorizontal = Math.abs(deltaX) > Math.abs(deltaY)
+
+    // Prevent pinch zoom from zooming the page
+    if (event.ctrlKey) {
+      event.preventDefault()
+      event.stopPropagation()
+      app.canvas.processMouseWheel(event)
+      return
+    }
+
+    // Detect if this is likely a trackpad gesture vs mouse wheel
+    // Trackpads usually have deltaX or smaller deltaY values (< TRACKPAD_DETECTION_THRESHOLD)
+    // Mouse wheels typically have larger discrete deltaY values (>= TRACKPAD_DETECTION_THRESHOLD)
+    const isLikelyTrackpad =
+      Math.abs(deltaX) > 0 || Math.abs(deltaY) < TRACKPAD_DETECTION_THRESHOLD
+
+    // Trackpad gestures: when enabled, trackpad panning goes to canvas
+    if (gesturesEnabled && isLikelyTrackpad) {
+      event.preventDefault()
+      event.stopPropagation()
+      app.canvas.processMouseWheel(event)
+      return
+    }
+
+    // When gestures disabled: horizontal always goes to canvas (no horizontal scroll in textarea)
+    if (isHorizontal) {
+      event.preventDefault()
+      event.stopPropagation()
+      app.canvas.processMouseWheel(event)
+      return
+    }
+
+    // Vertical scrolling when gestures disabled: let textarea scroll if scrollable
+    if (canScrollY) {
+      event.stopPropagation()
+      return
+    }
+
+    // If textarea can't scroll vertically, pass to canvas
+    event.preventDefault()
+    app.canvas.processMouseWheel(event)
+  })
+
+  return widget
+}
+
+export const useStringWidget = () => {
+  const widgetConstructor: ComfyWidgetConstructorV2 = (
+    node: LGraphNode,
+    inputSpec: InputSpec
+  ) => {
+    if (!isStringInputSpec(inputSpec)) {
+      throw new Error(`Invalid input data: ${inputSpec}`)
+    }
+
+    const defaultVal = inputSpec.default ?? ''
+    const multiline = inputSpec.multiline
+
+    const widget = multiline
+      ? addMultilineWidget(node, inputSpec.name, {
+          defaultVal,
+          placeholder: inputSpec.placeholder
+        })
+      : node.addWidget('text', inputSpec.name, defaultVal, () => {}, {})
+
+    if (typeof inputSpec.dynamicPrompts === 'boolean') {
+      widget.dynamicPrompts = inputSpec.dynamicPrompts
+    }
+
+    return widget
+  }
+
+  return widgetConstructor
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget.ts
new file mode 100644
index 000000000..052c8935c
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget.ts
@@ -0,0 +1,28 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ITextareaWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  InputSpec as InputSpecV2,
+  TextareaInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useTextareaWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ITextareaWidget => {
+    const { name, options = {} } = inputSpec as TextareaInputSpec
+
+    const widget = node.addWidget(
+      'textarea',
+      name,
+      options.default || '',
+      () => {},
+      {
+        serialize: true,
+        rows: options.rows || 5,
+        cols: options.cols || 50,
+        ...options
+      }
+    ) as ITextareaWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useTreeSelectWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useTreeSelectWidget.ts
new file mode 100644
index 000000000..b497e9ae0
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useTreeSelectWidget.ts
@@ -0,0 +1,24 @@
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ITreeSelectWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  InputSpec as InputSpecV2,
+  TreeSelectInputSpec
+} from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+
+export const useTreeSelectWidget = (): ComfyWidgetConstructorV2 => {
+  return (node: LGraphNode, inputSpec: InputSpecV2): ITreeSelectWidget => {
+    const { name, options = {} } = inputSpec as TreeSelectInputSpec
+    const isMultiple = options.multiple || false
+    const defaultValue = isMultiple ? [] : ''
+
+    const widget = node.addWidget('treeselect', name, defaultValue, () => {}, {
+      serialize: true,
+      values: options.values || [],
+      multiple: isMultiple,
+      ...options
+    }) as ITreeSelectWidget
+
+    return widget
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.ts b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.ts
new file mode 100644
index 000000000..573550141
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.ts
@@ -0,0 +1,114 @@
+/**
+ * Widget renderer composable for Vue node system
+ * Maps LiteGraph widget types to Vue components
+ */
+import { WidgetType, widgetTypeToComponent } from '../registry/widgetRegistry'
+
+/**
+ * Static mapping of LiteGraph widget types to Vue widget component names
+ * Moved outside function to prevent recreation on every call
+ */
+const TYPE_TO_ENUM_MAP: Record<string, string> = {
+  // Number inputs
+  number: WidgetType.NUMBER,
+  slider: WidgetType.SLIDER,
+  INT: WidgetType.INT,
+  FLOAT: WidgetType.FLOAT,
+
+  // Text inputs
+  text: WidgetType.STRING,
+  string: WidgetType.STRING,
+  STRING: WidgetType.STRING,
+
+  // Selection
+  combo: WidgetType.COMBO,
+  COMBO: WidgetType.COMBO,
+
+  // Boolean
+  toggle: WidgetType.TOGGLESWITCH,
+  boolean: WidgetType.BOOLEAN,
+  BOOLEAN: WidgetType.BOOLEAN,
+
+  // Multiline text
+  multiline: WidgetType.TEXTAREA,
+  textarea: WidgetType.TEXTAREA,
+  customtext: WidgetType.TEXTAREA,
+  MARKDOWN: WidgetType.MARKDOWN,
+
+  // Advanced widgets
+  color: WidgetType.COLOR,
+  COLOR: WidgetType.COLOR,
+  image: WidgetType.IMAGE,
+  IMAGE: WidgetType.IMAGE,
+  imagecompare: WidgetType.IMAGECOMPARE,
+  IMAGECOMPARE: WidgetType.IMAGECOMPARE,
+  galleria: WidgetType.GALLERIA,
+  GALLERIA: WidgetType.GALLERIA,
+  file: WidgetType.FILEUPLOAD,
+  fileupload: WidgetType.FILEUPLOAD,
+  FILEUPLOAD: WidgetType.FILEUPLOAD,
+
+  // Button widget
+  button: WidgetType.BUTTON,
+  BUTTON: WidgetType.BUTTON,
+
+  // Chart widget
+  chart: WidgetType.CHART,
+  CHART: WidgetType.CHART
+} as const
+
+/**
+ * Pre-computed widget support map for O(1) lookups
+ * Maps widget type directly to boolean for fast shouldRenderAsVue checks
+ */
+const WIDGET_SUPPORT_MAP = new Map(
+  Object.entries(TYPE_TO_ENUM_MAP).map(([type, enumValue]) => [
+    type,
+    widgetTypeToComponent[enumValue] !== undefined
+  ])
+)
+
+export const ESSENTIAL_WIDGET_TYPES = new Set([
+  'combo',
+  'COMBO',
+  'select',
+  'toggle',
+  'boolean',
+  'BOOLEAN',
+  'slider',
+  'number',
+  'INT',
+  'FLOAT'
+])
+
+export const useWidgetRenderer = () => {
+  const getWidgetComponent = (widgetType: string): string => {
+    const enumKey = TYPE_TO_ENUM_MAP[widgetType]
+
+    if (enumKey && widgetTypeToComponent[enumKey]) {
+      return enumKey
+    }
+
+    return WidgetType.STRING
+  }
+
+  const shouldRenderAsVue = (widget: {
+    type?: string
+    options?: Record<string, unknown>
+  }): boolean => {
+    if (widget.options?.canvasOnly) return false
+    if (!widget.type) return false
+
+    // Check if widget type is explicitly supported
+    const isSupported = WIDGET_SUPPORT_MAP.get(widget.type)
+    if (isSupported !== undefined) return isSupported
+
+    // Fallback: unknown types are rendered as STRING widget
+    return widgetTypeToComponent[WidgetType.STRING] !== undefined
+  }
+
+  return {
+    getWidgetComponent,
+    shouldRenderAsVue
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useWidgetValue.ts b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetValue.ts
new file mode 100644
index 000000000..1cf2fb353
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useWidgetValue.ts
@@ -0,0 +1,155 @@
+/**
+ * Composable for managing widget value synchronization between Vue and LiteGraph
+ * Provides consistent pattern for immediate UI updates and LiteGraph callbacks
+ */
+import { type Ref, ref, watch } from 'vue'
+
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+export interface UseWidgetValueOptions<
+  T extends WidgetValue = WidgetValue,
+  U = T
+> {
+  /** The widget configuration from LiteGraph */
+  widget: SimplifiedWidget<T>
+  /** The current value from parent component */
+  modelValue: T
+  /** Default value if modelValue is null/undefined */
+  defaultValue: T
+  /** Emit function from component setup */
+  emit: (event: 'update:modelValue', value: T) => void
+  /** Optional value transformer before sending to LiteGraph */
+  transform?: (value: U) => T
+}
+
+export interface UseWidgetValueReturn<
+  T extends WidgetValue = WidgetValue,
+  U = T
+> {
+  /** Local value for immediate UI updates */
+  localValue: Ref<T>
+  /** Handler for user interactions */
+  onChange: (newValue: U) => void
+}
+
+/**
+ * Manages widget value synchronization with LiteGraph
+ *
+ * @example
+ * ```vue
+ * const { localValue, onChange } = useWidgetValue({
+ *   widget: props.widget,
+ *   modelValue: props.modelValue,
+ *   defaultValue: ''
+ * })
+ * ```
+ */
+export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
+  widget,
+  modelValue,
+  defaultValue,
+  emit,
+  transform
+}: UseWidgetValueOptions<T, U>): UseWidgetValueReturn<T, U> {
+  // Local value for immediate UI updates
+  const localValue = ref<T>(modelValue ?? defaultValue)
+
+  // Handle user changes
+  const onChange = (newValue: U) => {
+    // Handle different PrimeVue component signatures
+    let processedValue: T
+    if (transform) {
+      processedValue = transform(newValue)
+    } else {
+      // Ensure type safety - only cast when types are compatible
+      if (
+        typeof newValue === typeof defaultValue ||
+        newValue === null ||
+        newValue === undefined
+      ) {
+        processedValue = (newValue ?? defaultValue) as T
+      } else {
+        console.warn(
+          `useWidgetValue: Type mismatch for widget ${widget.name}. Expected ${typeof defaultValue}, got ${typeof newValue}`
+        )
+        processedValue = defaultValue
+      }
+    }
+
+    // 1. Update local state for immediate UI feedback
+    localValue.value = processedValue
+
+    // 2. Emit to parent component
+    emit('update:modelValue', processedValue)
+  }
+
+  // Watch for external updates from LiteGraph
+  watch(
+    () => modelValue,
+    (newValue) => {
+      localValue.value = newValue ?? defaultValue
+    }
+  )
+
+  return {
+    localValue: localValue as Ref<T>,
+    onChange
+  }
+}
+
+/**
+ * Type-specific helper for string widgets
+ */
+export function useStringWidgetValue(
+  widget: SimplifiedWidget<string>,
+  modelValue: string,
+  emit: (event: 'update:modelValue', value: string) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: '',
+    emit,
+    transform: (value: string | undefined) => String(value || '') // Handle undefined from PrimeVue
+  })
+}
+
+/**
+ * Type-specific helper for number widgets
+ */
+export function useNumberWidgetValue(
+  widget: SimplifiedWidget<number>,
+  modelValue: number,
+  emit: (event: 'update:modelValue', value: number) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: 0,
+    emit,
+    transform: (value: number | number[]) => {
+      // Handle PrimeVue Slider which can emit number | number[]
+      if (Array.isArray(value)) {
+        return value.length > 0 ? value[0] ?? 0 : 0
+      }
+      return Number(value) || 0
+    }
+  })
+}
+
+/**
+ * Type-specific helper for boolean widgets
+ */
+export function useBooleanWidgetValue(
+  widget: SimplifiedWidget<boolean>,
+  modelValue: boolean,
+  emit: (event: 'update:modelValue', value: boolean) => void
+) {
+  return useWidgetValue({
+    widget,
+    modelValue,
+    defaultValue: false,
+    emit,
+    transform: (value: boolean) => Boolean(value)
+  })
+}
diff --git a/src/components/graph/vueWidgets/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
similarity index 65%
rename from src/components/graph/vueWidgets/widgetRegistry.ts
rename to src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
index 295acdfd1..528be31d7 100644
--- a/src/components/graph/vueWidgets/widgetRegistry.ts
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -4,22 +4,22 @@
 import type { Component } from 'vue'
 
 // Component imports
-import WidgetButton from './WidgetButton.vue'
-import WidgetChart from './WidgetChart.vue'
-import WidgetColorPicker from './WidgetColorPicker.vue'
-import WidgetFileUpload from './WidgetFileUpload.vue'
-import WidgetGalleria from './WidgetGalleria.vue'
-import WidgetImage from './WidgetImage.vue'
-import WidgetImageCompare from './WidgetImageCompare.vue'
-import WidgetInputText from './WidgetInputText.vue'
-import WidgetMarkdown from './WidgetMarkdown.vue'
-import WidgetMultiSelect from './WidgetMultiSelect.vue'
-import WidgetSelect from './WidgetSelect.vue'
-import WidgetSelectButton from './WidgetSelectButton.vue'
-import WidgetSlider from './WidgetSlider.vue'
-import WidgetTextarea from './WidgetTextarea.vue'
-import WidgetToggleSwitch from './WidgetToggleSwitch.vue'
-import WidgetTreeSelect from './WidgetTreeSelect.vue'
+import WidgetButton from '../components/WidgetButton.vue'
+import WidgetChart from '../components/WidgetChart.vue'
+import WidgetColorPicker from '../components/WidgetColorPicker.vue'
+import WidgetFileUpload from '../components/WidgetFileUpload.vue'
+import WidgetGalleria from '../components/WidgetGalleria.vue'
+import WidgetImage from '../components/WidgetImage.vue'
+import WidgetImageCompare from '../components/WidgetImageCompare.vue'
+import WidgetInputText from '../components/WidgetInputText.vue'
+import WidgetMarkdown from '../components/WidgetMarkdown.vue'
+import WidgetMultiSelect from '../components/WidgetMultiSelect.vue'
+import WidgetSelect from '../components/WidgetSelect.vue'
+import WidgetSelectButton from '../components/WidgetSelectButton.vue'
+import WidgetSlider from '../components/WidgetSlider.vue'
+import WidgetTextarea from '../components/WidgetTextarea.vue'
+import WidgetToggleSwitch from '../components/WidgetToggleSwitch.vue'
+import WidgetTreeSelect from '../components/WidgetTreeSelect.vue'
 
 /**
  * Enum of all available widget types
diff --git a/src/renderer/extensions/vueNodes/widgets/useNodeWidgets.ts b/src/renderer/extensions/vueNodes/widgets/useNodeWidgets.ts
new file mode 100644
index 000000000..260e26d4d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/useNodeWidgets.ts
@@ -0,0 +1,182 @@
+/**
+ * Node Widget Management
+ *
+ * Handles widget state synchronization between LiteGraph and Vue.
+ * Provides wrapped callbacks to maintain consistency.
+ */
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { WidgetValue } from '@/types/simplifiedWidget'
+
+export type { WidgetValue }
+
+export interface SafeWidgetData {
+  name: string
+  type: string
+  value: WidgetValue
+  options?: Record<string, unknown>
+  callback?: ((value: unknown) => void) | undefined
+}
+
+export interface VueNodeData {
+  id: string
+  title: string
+  type: string
+  mode: number
+  selected: boolean
+  executing: boolean
+  widgets?: SafeWidgetData[]
+  inputs?: unknown[]
+  outputs?: unknown[]
+  flags?: {
+    collapsed?: boolean
+  }
+}
+
+/**
+ * Validates that a value is a valid WidgetValue type
+ */
+export function validateWidgetValue(value: unknown): WidgetValue {
+  if (value === null || value === undefined || value === void 0) {
+    return undefined
+  }
+  if (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  ) {
+    return value
+  }
+  if (typeof value === 'object') {
+    // Check if it's a File array
+    if (Array.isArray(value) && value.every((item) => item instanceof File)) {
+      return value as File[]
+    }
+    // Otherwise it's a generic object
+    return value as object
+  }
+  // If none of the above, return undefined
+  console.warn(`Invalid widget value type: ${typeof value}`, value)
+  return undefined
+}
+
+/**
+ * Extract safe widget data from LiteGraph widgets
+ */
+export function extractWidgetData(
+  widgets?: any[]
+): SafeWidgetData[] | undefined {
+  if (!widgets) return undefined
+
+  return widgets.map((widget) => {
+    try {
+      let value = widget.value
+
+      // For combo widgets, if value is undefined, use the first option as default
+      if (
+        value === undefined &&
+        widget.type === 'combo' &&
+        widget.options?.values &&
+        Array.isArray(widget.options.values) &&
+        widget.options.values.length > 0
+      ) {
+        value = widget.options.values[0]
+      }
+
+      return {
+        name: widget.name,
+        type: widget.type,
+        value: validateWidgetValue(value),
+        options: widget.options ? { ...widget.options } : undefined,
+        callback: widget.callback
+      }
+    } catch (error) {
+      return {
+        name: widget.name || 'unknown',
+        type: widget.type || 'text',
+        value: undefined,
+        options: undefined,
+        callback: undefined
+      }
+    }
+  })
+}
+
+/**
+ * Widget callback management for LiteGraph/Vue sync
+ */
+export function useNodeWidgets() {
+  /**
+   * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
+   */
+  const createWrappedCallback = (
+    widget: { value?: unknown; name: string },
+    originalCallback: ((value: unknown) => void) | undefined,
+    nodeId: string,
+    onUpdate: (nodeId: string, widgetName: string, value: unknown) => void
+  ) => {
+    let updateInProgress = false
+
+    return (value: unknown) => {
+      if (updateInProgress) return
+      updateInProgress = true
+
+      try {
+        // Validate that the value is of an acceptable type
+        if (
+          value !== null &&
+          value !== undefined &&
+          typeof value !== 'string' &&
+          typeof value !== 'number' &&
+          typeof value !== 'boolean' &&
+          typeof value !== 'object'
+        ) {
+          console.warn(`Invalid widget value type: ${typeof value}`)
+          updateInProgress = false
+          return
+        }
+
+        // Always update widget.value to ensure sync
+        widget.value = value
+
+        // Call the original callback if it exists
+        if (originalCallback) {
+          originalCallback.call(widget, value)
+        }
+
+        // Update Vue state to maintain synchronization
+        onUpdate(nodeId, widget.name, value)
+      } finally {
+        updateInProgress = false
+      }
+    }
+  }
+
+  /**
+   * Sets up widget callbacks for a node
+   */
+  const setupNodeWidgetCallbacks = (
+    node: LGraphNode,
+    onUpdate: (nodeId: string, widgetName: string, value: unknown) => void
+  ) => {
+    if (!node.widgets) return
+
+    const nodeId = String(node.id)
+
+    node.widgets.forEach((widget) => {
+      const originalCallback = widget.callback
+      widget.callback = createWrappedCallback(
+        widget,
+        originalCallback,
+        nodeId,
+        onUpdate
+      )
+    })
+  }
+
+  return {
+    validateWidgetValue,
+    extractWidgetData,
+    createWrappedCallback,
+    setupNodeWidgetCallbacks
+  }
+}
diff --git a/src/scripts/errorNodeWidgets.ts b/src/scripts/errorNodeWidgets.ts
index 71a7ddf1b..f6d114463 100644
--- a/src/scripts/errorNodeWidgets.ts
+++ b/src/scripts/errorNodeWidgets.ts
@@ -1,9 +1,9 @@
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
-import { useFloatWidget } from '@/composables/widgets/useFloatWidget'
-import { useStringWidget } from '@/composables/widgets/useStringWidget'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useBooleanWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget'
+import { useFloatWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useFloatWidget'
+import { useStringWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useStringWidget'
 
 const StringWidget = useStringWidget()
 const FloatWidget = useFloatWidget()
diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts
index 9c5d08000..655ce4464 100644
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -1,20 +1,3 @@
-import { useBooleanWidget } from '@/composables/widgets/useBooleanWidget'
-import { useChartWidget } from '@/composables/widgets/useChartWidget'
-import { useColorWidget } from '@/composables/widgets/useColorWidget'
-import { useComboWidget } from '@/composables/widgets/useComboWidget'
-import { useFileUploadWidget } from '@/composables/widgets/useFileUploadWidget'
-import { useFloatWidget } from '@/composables/widgets/useFloatWidget'
-import { useGalleriaWidget } from '@/composables/widgets/useGalleriaWidget'
-import { useImageCompareWidget } from '@/composables/widgets/useImageCompareWidget'
-import { useImageUploadWidget } from '@/composables/widgets/useImageUploadWidget'
-import { useImageWidget } from '@/composables/widgets/useImageWidget'
-import { useIntWidget } from '@/composables/widgets/useIntWidget'
-import { useMarkdownWidget } from '@/composables/widgets/useMarkdownWidget'
-import { useMultiSelectWidget } from '@/composables/widgets/useMultiSelectWidget'
-import { useSelectButtonWidget } from '@/composables/widgets/useSelectButtonWidget'
-import { useStringWidget } from '@/composables/widgets/useStringWidget'
-import { useTextareaWidget } from '@/composables/widgets/useTextareaWidget'
-import { useTreeSelectWidget } from '@/composables/widgets/useTreeSelectWidget'
 import { t } from '@/i18n'
 import { type LGraphNode, isComboWidget } from '@/lib/litegraph/src/litegraph'
 import type {
@@ -22,6 +5,23 @@ import type {
   IComboWidget,
   IStringWidget
 } from '@/lib/litegraph/src/types/widgets'
+import { useBooleanWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget'
+import { useChartWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChartWidget'
+import { useColorWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useColorWidget'
+import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
+import { useFileUploadWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useFileUploadWidget'
+import { useFloatWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useFloatWidget'
+import { useGalleriaWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useGalleriaWidget'
+import { useImageCompareWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget'
+import { useImageUploadWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget'
+import { useImageWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useImageWidget'
+import { useIntWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
+import { useMarkdownWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget'
+import { useMultiSelectWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useMultiSelectWidget'
+import { useSelectButtonWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useSelectButtonWidget'
+import { useStringWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useStringWidget'
+import { useTextareaWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget'
+import { useTreeSelectWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useTreeSelectWidget'
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
 import type { InputSpec as InputSpecV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
diff --git a/tests-ui/tests/composables/useNodeChatHistory.test.ts b/tests-ui/tests/composables/useNodeChatHistory.test.ts
index 6a6ecc6c5..0b47fabb6 100644
--- a/tests-ui/tests/composables/useNodeChatHistory.test.ts
+++ b/tests-ui/tests/composables/useNodeChatHistory.test.ts
@@ -3,23 +3,26 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-vi.mock('@/composables/widgets/useChatHistoryWidget', () => ({
-  useChatHistoryWidget: () => {
-    return (node: any, inputSpec: any) => {
-      const widget = {
-        name: inputSpec.name,
-        type: inputSpec.type
-      }
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget',
+  () => ({
+    useChatHistoryWidget: () => {
+      return (node: any, inputSpec: any) => {
+        const widget = {
+          name: inputSpec.name,
+          type: inputSpec.type
+        }
 
-      if (!node.widgets) {
-        node.widgets = []
-      }
-      node.widgets.push(widget)
+        if (!node.widgets) {
+          node.widgets = []
+        }
+        node.widgets.push(widget)
 
-      return widget
+        return widget
+      }
     }
-  }
-}))
+  })
+)
 
 // Mock LGraphNode type
 type MockNode = {
diff --git a/tests-ui/tests/performance/spatialIndexPerformance.test.ts b/tests-ui/tests/performance/spatialIndexPerformance.test.ts
index 9f11ed2bd..e1281f48c 100644
--- a/tests-ui/tests/performance/spatialIndexPerformance.test.ts
+++ b/tests-ui/tests/performance/spatialIndexPerformance.test.ts
@@ -3,7 +3,11 @@ import { beforeEach, describe, expect, it } from 'vitest'
 import { useSpatialIndex } from '@/composables/graph/useSpatialIndex'
 import type { Bounds } from '@/utils/spatial/QuadTree'
 
-describe('Spatial Index Performance', () => {
+// Skip this entire suite on CI to avoid flaky performance timing
+const isCI = Boolean(process.env.CI)
+const describeIfNotCI = isCI ? describe.skip : describe
+
+describeIfNotCI('Spatial Index Performance', () => {
   let spatialIndex: ReturnType<typeof useSpatialIndex>
 
   beforeEach(() => {
diff --git a/tests-ui/tests/stores/layoutStore.test.ts b/tests-ui/tests/renderer/core/layout/layoutStore.test.ts
similarity index 100%
rename from tests-ui/tests/stores/layoutStore.test.ts
rename to tests-ui/tests/renderer/core/layout/layoutStore.test.ts
diff --git a/tests-ui/tests/composables/graph/useLOD.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
similarity index 99%
rename from tests-ui/tests/composables/graph/useLOD.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
index 0d1301d9b..68850c18a 100644
--- a/tests-ui/tests/composables/graph/useLOD.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
@@ -6,7 +6,7 @@ import {
   LOD_THRESHOLDS,
   supportsFeatureAtZoom,
   useLOD
-} from '@/composables/graph/useLOD'
+} from '@/renderer/extensions/vueNodes/lod/useLOD'
 
 describe('useLOD', () => {
   describe('LOD level detection', () => {
diff --git a/tests-ui/tests/composables/widgets/useComboWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
similarity index 90%
rename from tests-ui/tests/composables/widgets/useComboWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
index cbdd74bab..15936d1a4 100644
--- a/tests-ui/tests/composables/widgets/useComboWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useComboWidget } from '@/composables/widgets/useComboWidget'
+import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 vi.mock('@/scripts/widgets', () => ({
diff --git a/tests-ui/tests/composables/widgets/useFloatWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
similarity index 95%
rename from tests-ui/tests/composables/widgets/useFloatWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
index 02819c9f2..6dde265a6 100644
--- a/tests-ui/tests/composables/widgets/useFloatWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { _for_testing } from '@/composables/widgets/useFloatWidget'
+import { _for_testing } from '@/renderer/extensions/vueNodes/widgets/composables/useFloatWidget'
 
 vi.mock('@/scripts/widgets', () => ({
   addValueControlWidgets: vi.fn()
diff --git a/tests-ui/tests/composables/widgets/useIntWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
similarity index 94%
rename from tests-ui/tests/composables/widgets/useIntWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
index 8bed76042..edf4efab9 100644
--- a/tests-ui/tests/composables/widgets/useIntWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { _for_testing } from '@/composables/widgets/useIntWidget'
+import { _for_testing } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
 
 vi.mock('@/scripts/widgets', () => ({
   addValueControlWidgets: vi.fn()
diff --git a/tests-ui/tests/composables/widgets/useManagerQueue.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useManagerQueue.test.ts
similarity index 100%
rename from tests-ui/tests/composables/widgets/useManagerQueue.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useManagerQueue.test.ts
diff --git a/tests-ui/tests/composables/widgets/useRemoteWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
similarity index 99%
rename from tests-ui/tests/composables/widgets/useRemoteWidget.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
index 0bf729453..9b301cce0 100644
--- a/tests-ui/tests/composables/widgets/useRemoteWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useRemoteWidget } from '@/composables/widgets/useRemoteWidget'
+import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
 import { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 
 vi.mock('axios', () => {
diff --git a/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
similarity index 96%
rename from tests-ui/tests/composables/graph/useWidgetRenderer.test.ts
rename to tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
index 78074ebeb..626a36780 100644
--- a/tests-ui/tests/composables/graph/useWidgetRenderer.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
-import { WidgetType } from '@/components/graph/vueWidgets/widgetRegistry'
-import { useWidgetRenderer } from '@/composables/graph/useWidgetRenderer'
+import { useWidgetRenderer } from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer'
+import { WidgetType } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 
 describe('useWidgetRenderer', () => {
   const { getWidgetComponent, shouldRenderAsVue } = useWidgetRenderer()