code improve

.gitignore

@@ -78,8 +78,8 @@ vite.config.mts.timestamp-*.mjs
 *storybook.log
 storybook-static
 
-# MCP Servers
-.playwright-mcp/*
+
+
 
 .nx/cache
 .nx/workspace-data

.storybook/main.ts

@@ -15,32 +15,21 @@ const config: StorybookConfig = {
   async viteFinal(config) {
     // Use dynamic import to avoid CJS deprecation warning
     const { mergeConfig } = await import('vite')
-    const { default: tailwindcss } = await import('@tailwindcss/vite')
 
     // Filter out any plugins that might generate import maps
     if (config.plugins) {
-      config.plugins = config.plugins
-        // Type guard: ensure we have valid plugin objects with names
-        .filter(
-          (plugin): plugin is NonNullable<typeof plugin> & { name: string } => {
-            return (
-              plugin !== null &&
-              plugin !== undefined &&
-              typeof plugin === 'object' &&
-              'name' in plugin &&
-              typeof plugin.name === 'string'
-            )
-          }
-        )
-        // Business logic: filter out import-map plugins
-        .filter((plugin) => !plugin.name.includes('import-map'))
+      config.plugins = config.plugins.filter((plugin: any) => {
+        if (plugin && plugin.name && plugin.name.includes('import-map')) {
+          return false
+        }
+        return true
+      })
     }
 
     return mergeConfig(config, {
       // Replace plugins entirely to avoid inheritance issues
       plugins: [
         // Only include plugins we explicitly need for Storybook
-        tailwindcss(),
         Icons({
           compiler: 'vue3',
           customCollections: {

.storybook/preview.ts

@@ -1,7 +1,7 @@
 import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
 import { setup } from '@storybook/vue3'
-import type { Preview, StoryContext, StoryFn } from '@storybook/vue3-vite'
+import type { Preview } from '@storybook/vue3-vite'
 import { createPinia } from 'pinia'
 import 'primeicons/primeicons.css'
 import PrimeVue from 'primevue/config'
@@ -9,9 +9,11 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 
-import '@/assets/css/style.css'
-import { i18n } from '@/i18n'
-import '@/lib/litegraph/public/css/litegraph.css'
+import '../src/assets/css/style.css'
+import { i18n } from '../src/i18n'
+import '../src/lib/litegraph/public/css/litegraph.css'
+import { useWidgetStore } from '../src/stores/widgetStore'
+import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -23,11 +25,13 @@ const ComfyUIPreset = definePreset(Aura, {
 // Setup Vue app for Storybook
 setup((app) => {
   app.directive('tooltip', Tooltip)
-
-  // Create Pinia instance
   const pinia = createPinia()
-
   app.use(pinia)
+
+  // Initialize stores
+  useColorPaletteStore(pinia)
+  useWidgetStore(pinia)
+
   app.use(i18n)
   app.use(PrimeVue, {
     theme: {
@@ -46,8 +50,8 @@ setup((app) => {
   app.use(ToastService)
 })
 
-// Theme and dialog decorator
-export const withTheme = (Story: StoryFn, context: StoryContext) => {
+// Dark theme decorator
+export const withTheme = (Story: any, context: any) => {
   const theme = context.globals.theme || 'light'
 
   // Apply theme class to document root
@@ -59,7 +63,7 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.body.classList.remove('dark-theme')
   }
 
-  return Story(context.args, context)
+  return Story()
 }
 
 const preview: Preview = {

browser_tests/fixtures/UserSelectPage.ts

@@ -1,5 +1,4 @@
-import type { Page } from '@playwright/test'
-import { test as base } from '@playwright/test'
+import { Page, test as base } from '@playwright/test'
 
 export class UserSelectPage {
   constructor(

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
+import { Locator, Page } from '@playwright/test'
 
 export class ComfyNodeSearchFilterSelectionPanel {
   constructor(public readonly page: Page) {}

browser_tests/fixtures/components/SettingDialog.ts

@@ -1,6 +1,6 @@
-import type { Page } from '@playwright/test'
+import { Page } from '@playwright/test'
 
-import type { ComfyPage } from '../ComfyPage'
+import { ComfyPage } from '../ComfyPage'
 
 export class SettingDialog {
   constructor(

browser_tests/fixtures/components/SidebarTab.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
+import { Locator, Page } from '@playwright/test'
 
 class SidebarTab {
   constructor(

browser_tests/fixtures/components/Topbar.ts

@@ -1,5 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
+import { Locator, Page, expect } from '@playwright/test'
 
 export class Topbar {
   private readonly menuLocator: Locator

browser_tests/fixtures/ws.ts

@@ -12,10 +12,9 @@ export const webSocketFixture = base.extend<{
           // so we can look it up to trigger messages
           const store: Record<string, WebSocket> = ((window as any).__ws__ = {})
           window.WebSocket = class extends window.WebSocket {
-            constructor(
-              ...rest: ConstructorParameters<typeof window.WebSocket>
-            ) {
-              super(...rest)
+            constructor() {
+              // @ts-expect-error
+              super(...arguments)
               store[this.url] = this
             }
           }

browser_tests/globalSetup.ts

@@ -1,4 +1,4 @@
-import type { FullConfig } from '@playwright/test'
+import { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'
 
 import { backupPath } from './utils/backupUtils'

browser_tests/globalTeardown.ts

@@ -1,4 +1,4 @@
-import type { FullConfig } from '@playwright/test'
+import { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'
 
 import { restorePath } from './utils/backupUtils'

browser_tests/helpers/manageGroupNode.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
+import { Locator, Page } from '@playwright/test'
 
 export class ManageGroupNode {
   footer: Locator

browser_tests/helpers/templates.ts

@@ -1,7 +1,7 @@
-import type { Locator, Page } from '@playwright/test'
+import { Locator, Page } from '@playwright/test'
 import path from 'path'
 
-import type {
+import {
   TemplateInfo,
   WorkflowTemplates
 } from '../../src/platform/workflow/templates/types/template'

browser_tests/tests/actionbar.spec.ts

@@ -29,9 +29,9 @@ test.describe('Actionbar', () => {
 
     // Intercept the prompt queue endpoint
     let promptNumber = 0
-    await comfyPage.page.route('**/api/prompt', async (route, req) => {
+    comfyPage.page.route('**/api/prompt', async (route, req) => {
       await new Promise((r) => setTimeout(r, 100))
-      await route.fulfill({
+      route.fulfill({
         status: 200,
         body: JSON.stringify({
           prompt_id: promptNumber,

browser_tests/tests/changeTracker.spec.ts

@@ -1,5 +1,5 @@
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import {
+  ComfyPage,
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'

browser_tests/tests/chatHistory.spec.ts

@@ -1,5 +1,4 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
+import { Page, expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 

browser_tests/tests/dialog.spec.ts

@@ -1,5 +1,4 @@
-import type { Locator } from '@playwright/test'
-import { expect } from '@playwright/test'
+import { Locator, expect } from '@playwright/test'
 
 import type { Keybinding } from '../../src/schemas/keyBindingSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'

browser_tests/tests/extensionAPI.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import type { SettingParams } from '../../src/platform/settings/types'
+import { SettingParams } from '../../src/platform/settings/types'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Topbar commands', () => {

browser_tests/tests/groupNode.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.describe('Group Node', () => {

browser_tests/tests/interaction.spec.ts

@@ -1,13 +1,12 @@
-import type { Locator } from '@playwright/test'
-import { expect } from '@playwright/test'
-import type { Position } from '@vueuse/core'
+import { Locator, expect } from '@playwright/test'
+import { Position } from '@vueuse/core'
 
 import {
   type ComfyPage,
   comfyPageFixture as test,
   testComfySnapToGridGridSize
 } from '../fixtures/ComfyPage'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+import { type NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.describe('Item Interaction', () => {
   test('Can select/delete all items', async ({ comfyPage }) => {

browser_tests/tests/remoteWidgets.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Remote COMBO Widget', () => {
   const mockOptions = ['d', 'c', 'b', 'a']

browser_tests/tests/sidebar/queue.spec.ts

@@ -160,9 +160,7 @@ test.describe.skip('Queue sidebar', () => {
       comfyPage
     }) => {
       await comfyPage.nextFrame()
-      await expect(
-        comfyPage.menu.queueTab.getGalleryImage(firstImage)
-      ).toBeVisible()
+      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
     })
 
     test('maintains active gallery item when new tasks are added', async ({
@@ -176,9 +174,7 @@ test.describe.skip('Queue sidebar', () => {
       const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
       await newTask.waitFor({ state: 'visible' })
       // The active gallery item should still be the initial image
-      await expect(
-        comfyPage.menu.queueTab.getGalleryImage(firstImage)
-      ).toBeVisible()
+      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
     })
 
     test.describe('Gallery navigation', () => {
@@ -200,9 +196,7 @@ test.describe.skip('Queue sidebar', () => {
               delay: 256
             })
           await comfyPage.nextFrame()
-          await expect(
-            comfyPage.menu.queueTab.getGalleryImage(end)
-          ).toBeVisible()
+          expect(comfyPage.menu.queueTab.getGalleryImage(end)).toBeVisible()
         })
       })
     })

browser_tests/tests/templates.spec.ts

@@ -1,5 +1,4 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
+import { Page, expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 

browser_tests/tests/versionMismatchWarnings.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import type { SystemStats } from '../../src/schemas/apiSchema'
+import { SystemStats } from '../../src/schemas/apiSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Version Mismatch Warnings', () => {

eslint.config.ts

@@ -153,14 +153,5 @@ export default defineConfig([
         }
       ]
     }
-  },
-  {
-    files: ['tests-ui/**/*'],
-    rules: {
-      '@typescript-eslint/consistent-type-imports': [
-        'error',
-        { disallowTypeAnnotations: false }
-      ]
-    }
   }
 ])

knip.config.ts

@@ -27,7 +27,8 @@ const config: KnipConfig = {
     // Used by a custom node (that should move off of this)
     'src/scripts/ui/components/splitButton.ts',
     // Staged for for use with subgraph widget promotion
-    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts'
+    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts',
+    'src/core/graph/operations/types.ts'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.28.0",
+  "version": "1.27.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

scripts/collect-i18n-general.ts

@@ -2,7 +2,6 @@ import * as fs from 'fs'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
-import { DESKTOP_DIALOGS } from '../src/constants/desktopDialogs'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
 import type { FormItem, SettingParams } from '../src/platform/settings/types'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
@@ -132,23 +131,6 @@ test('collect-i18n-general', async ({ comfyPage }) => {
     ])
   )
 
-  // Desktop Dialogs
-  const allDesktopDialogsLocale = Object.fromEntries(
-    Object.values(DESKTOP_DIALOGS).map((dialog) => [
-      normalizeI18nKey(dialog.id),
-      {
-        title: dialog.title,
-        message: dialog.message,
-        buttons: Object.fromEntries(
-          dialog.buttons.map((button) => [
-            normalizeI18nKey(button.label),
-            button.label
-          ])
-        )
-      }
-    ])
-  )
-
   fs.writeFileSync(
     localePath,
     JSON.stringify(
@@ -162,8 +144,7 @@ test('collect-i18n-general', async ({ comfyPage }) => {
           ...allSettingCategoriesLocale
         },
         serverConfigItems: allServerConfigsLocale,
-        serverConfigCategories: allServerConfigCategoriesLocale,
-        desktopDialogs: allDesktopDialogsLocale
+        serverConfigCategories: allServerConfigCategoriesLocale
       },
       null,
       2

src/assets/css/style.css

@@ -66,8 +66,6 @@
   --color-charcoal-700: #202121;
   --color-charcoal-800: #171718;
 
-  --color-neutral-550: #636363;
-
   --color-stone-100: #444444;
   --color-stone-200: #828282;
   --color-stone-300: #bbbbbb;
@@ -105,10 +103,6 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
-  --color-coral-red-600: #973a40;
-  --color-coral-red-500: #c53f49;
-  --color-coral-red-400: #dd424e;
-
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 

src/components/common/LazyImage.vue

@@ -10,7 +10,7 @@
       class="absolute inset-0"
     />
     <img
-      v-if="cachedSrc"
+      v-show="isImageLoaded"
       ref="imageRef"
       :src="cachedSrc"
       :alt="alt"
@@ -77,8 +77,8 @@ const shouldLoad = computed(() => isIntersecting.value)
 
 watch(
   shouldLoad,
-  async (shouldLoadVal) => {
-    if (shouldLoadVal && src && !cachedSrc.value && !hasError.value) {
+  async (shouldLoad) => {
+    if (shouldLoad && src && !cachedSrc.value && !hasError.value) {
       try {
         const cachedMedia = await getCachedMedia(src)
         if (cachedMedia.error) {
@@ -93,7 +93,7 @@ watch(
         console.warn('Failed to load cached media:', error)
         cachedSrc.value = src
       }
-    } else if (!shouldLoadVal) {
+    } else if (!shouldLoad) {
       if (cachedSrc.value?.startsWith('blob:')) {
         releaseUrl(src)
       }

src/components/graph/GraphCanvas.vue

@@ -96,6 +96,7 @@ import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vu
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
@@ -117,7 +118,6 @@ import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables
 import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'

src/components/graph/GraphCanvasMenu.vue

@@ -124,11 +124,11 @@ import ButtonGroup from 'primevue/buttongroup'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/graph/SelectionToolbox.spec.ts

@@ -5,12 +5,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
 
 // Mock the composables and services
-vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
+vi.mock('@/composables/graph/useCanvasInteractions', () => ({
   useCanvasInteractions: vi.fn(() => ({
     handleWheel: vi.fn()
   }))

src/components/graph/SelectionToolbox.vue

@@ -60,9 +60,9 @@ import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButt
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
 import PublishSubgraphButton from '@/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue'
 import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionToolboxPosition'
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'

src/composables/canvas/useSelectionToolboxPosition.ts

@@ -1,4 +1,4 @@
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
 import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
@@ -170,75 +170,50 @@ export function useSelectionToolboxPosition(
     }
   )
 
-  const handleDragStateChange = (dragging: boolean) => {
-    if (dragging) {
-      handleDragStart()
-      return
-    }
+  // Watch for dragging state
+  watch(
+    () => canvasStore.canvas?.state?.draggingItems,
+    (dragging) => {
+      if (dragging) {
+        visible.value = false
 
-    handleDragEnd()
-  }
+        if (moreOptionsOpen.value) {
+          const currentSig = buildSelectionSignature(canvasStore)
+          if (currentSig !== moreOptionsSelectionSignature) {
+            moreOptionsSelectionSignature = null
+          }
+          moreOptionsWasOpenBeforeDrag = true
+          moreOptionsOpen.value = false
+          moreOptionsRestorePending.value = !!moreOptionsSelectionSignature
+          if (moreOptionsRestorePending.value) {
+            forceCloseMoreOptionsSignal.value++
+          } else {
+            moreOptionsWasOpenBeforeDrag = false
+          }
+        } else {
+          moreOptionsRestorePending.value = false
+          moreOptionsWasOpenBeforeDrag = false
+        }
+      } else {
+        requestAnimationFrame(() => {
+          updateSelectionBounds()
+          const selectionMatches = currentSelectionMatchesSignature(canvasStore)
+          const shouldRestore =
+            moreOptionsWasOpenBeforeDrag &&
+            visible.value &&
+            moreOptionsRestorePending.value &&
+            selectionMatches
 
-  const handleDragStart = () => {
-    visible.value = false
-
-    // Early return if more options wasn't open
-    if (!moreOptionsOpen.value) {
-      moreOptionsRestorePending.value = false
-      moreOptionsWasOpenBeforeDrag = false
-      return
-    }
-
-    // Handle more options cleanup
-    const currentSig = buildSelectionSignature(canvasStore)
-    const selectionChanged = currentSig !== moreOptionsSelectionSignature
-
-    if (selectionChanged) {
-      moreOptionsSelectionSignature = null
-    }
-    moreOptionsOpen.value = false
-    moreOptionsWasOpenBeforeDrag = true
-    moreOptionsRestorePending.value = !!moreOptionsSelectionSignature
-
-    if (moreOptionsRestorePending.value) {
-      forceCloseMoreOptionsSignal.value++
-      return
-    }
-
-    moreOptionsWasOpenBeforeDrag = false
-  }
-
-  const handleDragEnd = () => {
-    requestAnimationFrame(() => {
-      updateSelectionBounds()
-
-      const selectionMatches = currentSelectionMatchesSignature(canvasStore)
-      const shouldRestore =
-        moreOptionsWasOpenBeforeDrag &&
-        visible.value &&
-        moreOptionsRestorePending.value &&
-        selectionMatches
-
-      // Single point of assignment for each ref
-      moreOptionsRestorePending.value =
-        shouldRestore && moreOptionsRestorePending.value
-      moreOptionsWasOpenBeforeDrag = false
-
-      if (shouldRestore) {
-        restoreMoreOptionsSignal.value++
+          if (shouldRestore) {
+            restoreMoreOptionsSignal.value++
+          } else {
+            moreOptionsRestorePending.value = false
+          }
+          moreOptionsWasOpenBeforeDrag = false
+        })
       }
-    })
-  }
-
-  // Unified dragging state - combines both LiteGraph and Vue node dragging
-  const isDragging = computed((): boolean => {
-    const litegraphDragging = canvasStore.canvas?.state?.draggingItems ?? false
-    const vueNodeDragging =
-      shouldRenderVueNodes.value && layoutStore.isDraggingVueNodes.value
-    return litegraphDragging || vueNodeDragging
-  })
-
-  watch(isDragging, handleDragStateChange)
+    }
+  )
 
   onUnmounted(() => {
     resetMoreOptionsState()

src/composables/graph/useCanvasInteractions.ts

@@ -11,21 +11,12 @@ import { app } from '@/scripts/app'
  */
 export function useCanvasInteractions() {
   const settingStore = useSettingStore()
-  const canvasStore = useCanvasStore()
-  const { getCanvas } = canvasStore
+  const { getCanvas } = useCanvasStore()
 
   const isStandardNavMode = computed(
     () => settingStore.get('Comfy.Canvas.NavigationMode') === 'standard'
   )
 
-  /**
-   * Whether Vue node components should handle pointer events.
-   * Returns false when canvas is in read-only/panning mode (e.g., space key held for panning).
-   */
-  const shouldHandleNodePointerEvents = computed(
-    () => !(canvasStore.canvas?.read_only ?? false)
-  )
-
   /**
    * Handles wheel events from UI components that should be forwarded to canvas
    * when appropriate (e.g., Ctrl+wheel for zoom in standard mode)
@@ -106,7 +97,6 @@ export function useCanvasInteractions() {
   return {
     handleWheel,
     handlePointer,
-    forwardEventToCanvas,
-    shouldHandleNodePointerEvents
+    forwardEventToCanvas
   }
 }

src/composables/node/useNodeImage.ts

@@ -1,5 +1,5 @@
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
 

src/composables/useManagerState.ts

@@ -42,12 +42,7 @@ export function useManagerState() {
       )
 
       // Check command line args first (highest priority)
-      // --enable-manager flag enables the manager (opposite of old --disable-manager)
-      const hasEnableManager =
-        systemStats.value?.system?.argv?.includes('--enable-manager')
-
-      // If --enable-manager is NOT present, manager is disabled
-      if (!hasEnableManager) {
+      if (systemStats.value?.system?.argv?.includes('--disable-manager')) {
         return ManagerUIState.DISABLED
       }
 

src/constants/desktopDialogs.ts

@@ -1,75 +0,0 @@
-export interface DialogAction {
-  readonly label: string
-  readonly action: 'openUrl' | 'close' | 'cancel'
-  readonly url?: string
-  readonly severity?: 'danger' | 'primary' | 'secondary' | 'warn'
-  readonly returnValue: string
-}
-
-interface DesktopDialog {
-  readonly title: string
-  readonly message: string
-  readonly buttons: DialogAction[]
-}
-
-export const DESKTOP_DIALOGS = {
-  /** Shown when a corrupt venv is detected. */
-  reinstallVenv: {
-    title: 'Reinstall ComfyUI (Fresh Start)?',
-    message: `Sorry, we can't launch ComfyUI because some installed packages aren't compatible.
-
-Click Reinstall to restore ComfyUI and get back up and running.
-
-Please note: if you've added custom nodes, you'll need to reinstall them after this process.`,
-    buttons: [
-      {
-        label: 'Learn More',
-        action: 'openUrl',
-        url: 'https://docs.comfy.org',
-        returnValue: 'openDocs'
-      },
-      {
-        label: 'Reinstall',
-        action: 'close',
-        severity: 'danger',
-        returnValue: 'resetVenv'
-      }
-    ]
-  },
-  /** A dialog that is shown when an invalid dialog ID is provided. */
-  invalidDialog: {
-    title: 'Invalid Dialog',
-    message: `Invalid dialog ID was provided.`,
-    buttons: [
-      {
-        label: 'Close',
-        action: 'cancel',
-        returnValue: 'cancel'
-      }
-    ]
-  }
-} as const satisfies { [K: string]: DesktopDialog }
-
-/** The ID of a desktop dialog. */
-type DesktopDialogId = keyof typeof DESKTOP_DIALOGS
-
-/**
- * Checks if {@link id} is a valid dialog ID.
- * @param id The string to check
- * @returns `true` if the ID is a valid dialog ID, otherwise `false`
- */
-function isDialogId(id: unknown): id is DesktopDialogId {
-  return typeof id === 'string' && id in DESKTOP_DIALOGS
-}
-
-/**
- * Gets the dialog with the given ID.
- * @param dialogId The ID of the dialog to get
- * @returns The dialog with the given ID
- */
-export function getDialog(
-  dialogId: string | string[]
-): DesktopDialog & { id: DesktopDialogId } {
-  const id = isDialogId(dialogId) ? dialogId : 'invalidDialog'
-  return { id, ...structuredClone(DESKTOP_DIALOGS[id]) }
-}

src/core/graph/operations/GRAPH_MUTATION_SERVICE_DESIGN.md

@@ -0,0 +1,532 @@
+# GraphMutationService Design and Implementation
+
+## Overview
+
+GraphMutationService is the centralized service layer for all graph modification operations in ComfyUI Frontend. It provides a unified, command-based API for graph mutations with built-in error handling through the Result pattern, serving as the single entry point for all graph modification operations.
+
+## Project Background
+
+### Current System Analysis
+
+ComfyUI Frontend uses the LiteGraph library for graph operations, with main components including:
+
+1. **LGraph** (`src/lib/litegraph/src/LGraph.ts`)
+   - Core graph management class
+   - Provides basic operations like `add()`, `remove()`
+   - Supports `beforeChange()`/`afterChange()` transaction mechanism
+
+2. **LGraphNode** (`src/lib/litegraph/src/LGraphNode.ts`)
+   - Node class containing position, connections, and other properties
+   - Provides methods like `connect()`, `disconnectInput()`, `disconnectOutput()`
+
+3. **ChangeTracker** (`src/scripts/changeTracker.ts`)
+   - Existing undo/redo system
+   - Snapshot-based history tracking
+   - Supports up to 50 history states
+
+**Primary Goals:**
+- Single entry point for all graph modifications via command pattern
+- Built-in validation and error handling through Result pattern
+- Transaction support for atomic operations
+- Natural undo/redo through existing ChangeTracker
+- Clean architecture for future extensibility (CRDT support ready)
+- Comprehensive error context preservation
+
+## Architecture Patterns
+
+### Command Pattern
+All operations are executed through a unified command interface:
+
+```typescript
+interface GraphMutationOperation {
+  type: string // Operation type identifier
+  timestamp: number // For ordering and CRDT support
+  origin: CommandOrigin // Source of the command
+  params?: any // Operation-specific parameters
+}
+```
+
+### Result Pattern
+All operations return a discriminated union Result type instead of throwing exceptions:
+
+```typescript
+type Result<T, E> =
+  | { success: true; data: T }
+  | { success: false; error: E }
+```
+
+### Error Handling
+Custom error class with rich context:
+
+```typescript
+class GraphMutationError extends Error {
+  code: string
+  context: Record<string, any> // Contains operation details and original error
+}
+```
+
+### Interface-Based Architecture
+
+The GraphMutationService follows an **interface-based design pattern** with singleton state management:
+
+- **IGraphMutationService Interface**: Defines the complete contract for all graph operations
+- **GraphMutationService Class**: Implements the interface with LiteGraph integration
+- **Singleton State**: Shared clipboard and transaction state across components
+
+```typescript
+interface IGraphMutationService {
+  // Central command dispatcher
+  applyOperation(
+    operation: GraphMutationOperation
+  ): Promise<Result<any, GraphMutationError>>
+
+  // Direct operation methods (all return Result types)
+  createNode(params: createNodeParams): Promise<Result<NodeId, GraphMutationError>>
+  removeNode(nodeId: NodeId): Promise<Result<void, GraphMutationError>>
+  // ... 40+ total operations
+
+  // Undo/Redo
+  undo(): Promise<Result<void, GraphMutationError>>
+  redo(): Promise<Result<void, GraphMutationError>>
+}
+```
+
+### Core Components
+
+```typescript
+// Implementation Class
+class GraphMutationService implements IGraphMutationService {
+  private workflowStore = useWorkflowStore()
+  private static readonly CLIPBOARD_KEY = 'litegrapheditor_clipboard'
+
+  // Command dispatcher
+  async applyOperation(
+    operation: GraphMutationOperation
+  ): Promise<Result<any, GraphMutationError>> {
+    switch (operation.type) {
+      case 'createNode':
+        return await this.createNode(operation.params)
+      case 'removeNode':
+        return await this.removeNode(operation.params)
+      // ... handle all operation types
+      default:
+        return {
+          success: false,
+          error: new GraphMutationError('Unknown operation type', {
+            operation: operation.type
+          })
+        }
+    }
+  }
+
+  // All operations wrapped with error handling
+  async createNode(params: createNodeParams): Promise<Result<NodeId, GraphMutationError>> {
+    try {
+      const graph = this.getGraph()
+      graph.beforeChange()
+      // ... perform operation
+      graph.afterChange()
+      return { success: true, data: nodeId }
+    } catch (error) {
+      return {
+        success: false,
+        error: new GraphMutationError('Failed to create node', {
+          operation: 'createNode',
+          params,
+          cause: error
+        })
+      }
+    }
+  }
+}
+
+// Singleton Hook
+export const useGraphMutationService = (): IGraphMutationService => {
+  if (!graphMutationServiceInstance) {
+    graphMutationServiceInstance = new GraphMutationService()
+  }
+  return graphMutationServiceInstance
+}
+```
+
+## Implemented Operations
+
+### Node Operations (8 operations)
+
+| Operation | Description | Result Type |
+|-----------|-------------|-------------|
+| `createNode` | Create a new node in the graph | `Result<NodeId, GraphMutationError>` |
+| `removeNode` | Remove a node from the graph | `Result<void, GraphMutationError>` |
+| `updateNodeProperty` | Update a custom node property | `Result<void, GraphMutationError>` |
+| `updateNodeTitle` | Change the node's title | `Result<void, GraphMutationError>` |
+| `changeNodeMode` | Change execution mode (ALWAYS/BYPASS/etc) | `Result<void, GraphMutationError>` |
+| `cloneNode` | Create a copy of a node | `Result<NodeId, GraphMutationError>` |
+| `bypassNode` | Set node to bypass mode | `Result<void, GraphMutationError>` |
+| `unbypassNode` | Remove bypass mode from node | `Result<void, GraphMutationError>` |
+
+### Connection Operations (3 operations)
+
+| Operation | Description | Result Type |
+|-----------|-------------|-------------|
+| `connect` | Create a connection between nodes | `Result<LinkId, GraphMutationError>` |
+| `disconnect` | Disconnect a node input/output slot | `Result<boolean, GraphMutationError>` |
+| `disconnectLink` | Disconnect by link ID | `Result<void, GraphMutationError>` |
+
+### Group Operations (5 operations)
+
+| Operation | Description | Result Type |
+|-----------|-------------|-------------|
+| `createGroup` | Create a new node group | `Result<GroupId, GraphMutationError>` |
+| `removeGroup` | Delete a group (nodes remain) | `Result<void, GraphMutationError>` |
+| `updateGroupTitle` | Change group title | `Result<void, GraphMutationError>` |
+| `addNodesToGroup` | Add nodes to group and auto-resize | `Result<void, GraphMutationError>` |
+| `recomputeGroupNodes` | Recalculate which nodes are in group | `Result<void, GraphMutationError>` |
+
+### Clipboard Operations (3 operations)
+
+| Operation | Description | Result Type |
+|-----------|-------------|-------------|
+| `copyNodes` | Copy nodes to clipboard | `Result<void, GraphMutationError>` |
+| `cutNodes` | Cut nodes to clipboard | `Result<void, GraphMutationError>` |
+| `pasteNodes` | Paste nodes from clipboard | `Result<NodeId[], GraphMutationError>` |
+
+### Reroute Operations (2 operations)
+
+| Operation | Description | Result Type |
+|-----------|-------------|-------------|
+| `addReroute` | Add a reroute point on a connection | `Result<RerouteId, GraphMutationError>` |
+| `removeReroute` | Remove a reroute point | `Result<void, GraphMutationError>` |
+
+### Subgraph Operations (10 operations)
+
+| Operation | Description | Result Type |
+|-----------|-------------|-------------|
+| `createSubgraph` | Create a subgraph from selected items | `Result<{subgraph, node}, GraphMutationError>` |
+| `unpackSubgraph` | Unpack a subgraph node back into regular nodes | `Result<void, GraphMutationError>` |
+| `addSubgraphNodeInput` | Add input slot to subgraph node | `Result<number, GraphMutationError>` |
+| `addSubgraphNodeOutput` | Add output slot to subgraph node | `Result<number, GraphMutationError>` |
+| `removeSubgraphNodeInput` | Remove input slot from subgraph node | `Result<void, GraphMutationError>` |
+| `removeSubgraphNodeOutput` | Remove output slot from subgraph node | `Result<void, GraphMutationError>` |
+| `addSubgraphInput` | Add an input to a subgraph | `Result<void, GraphMutationError>` |
+| `addSubgraphOutput` | Add an output to a subgraph | `Result<void, GraphMutationError>` |
+| `removeSubgraphInput` | Remove a subgraph input | `Result<void, GraphMutationError>` |
+| `removeSubgraphOutput` | Remove a subgraph output | `Result<void, GraphMutationError>` |
+
+### Graph-level Operations (1 operation)
+
+| Operation | Description | Result Type |
+|-----------|-------------|-------------|
+| `clearGraph` | Clear all nodes and connections | `Result<void, GraphMutationError>` |
+
+### History Operations (2 operations)
+
+| Operation | Description | Result Type |
+|-----------|-------------|-------------|
+| `undo` | Undo the last operation | `Result<void, GraphMutationError>` |
+| `redo` | Redo the previously undone operation | `Result<void, GraphMutationError>` |
+
+## Usage Examples
+
+### Command Pattern Usage
+
+```typescript
+import { useGraphMutationService, CommandOrigin } from '@/core/graph/operations'
+import type { GraphMutationOperation } from '@/core/graph/operations/types'
+
+const service = useGraphMutationService()
+
+// Execute operations via command pattern
+const operation: GraphMutationOperation = {
+  type: 'createNode',
+  timestamp: Date.now(),
+  origin: CommandOrigin.Local,
+  params: {
+    type: 'LoadImage',
+    title: 'My Image Loader',
+    properties: { seed: 12345 }
+  }
+}
+
+const result = await service.applyOperation(operation)
+
+if (result.success) {
+  console.log('Node created with ID:', result.data)
+} else {
+  console.error('Failed:', result.error.message)
+  console.error('Context:', result.error.context)
+}
+```
+
+### Direct Method Usage with Result Pattern
+
+```typescript
+// All methods return Result<T, GraphMutationError>
+const result = await service.createNode({
+  type: 'LoadImage',
+  title: 'Image Loader'
+})
+
+if (result.success) {
+  const nodeId = result.data
+
+  // Update node properties
+  const updateResult = await service.updateNodeProperty({
+    nodeId,
+    property: 'seed',
+    value: 12345
+  })
+
+  if (!updateResult.success) {
+    console.error('Update failed:', updateResult.error)
+  }
+} else {
+  // Access detailed error context
+  const { operation, params, cause } = result.error.context
+  console.error(`Operation ${operation} failed:`, cause)
+}
+```
+
+### Connection Management
+
+```typescript
+// Create a connection
+const connectOp: GraphMutationOperation = {
+  type: 'connect',
+  timestamp: Date.now(),
+  origin: CommandOrigin.Local,
+  params: {
+    sourceNodeId: node1Id,
+    sourceSlot: 0,
+    targetNodeId: node2Id,
+    targetSlot: 0
+  }
+}
+
+const result = await service.applyOperation(connectOp)
+
+if (result.success) {
+  const linkId = result.data
+
+  // Later disconnect by link ID
+  const disconnectResult = await service.disconnectLink(linkId)
+
+  if (!disconnectResult.success) {
+    console.error('Disconnect failed:', disconnectResult.error)
+  }
+}
+```
+
+### Group Management
+
+```typescript
+// Create a group via command
+const createGroupOp: GraphMutationOperation = {
+  type: 'createGroup',
+  timestamp: Date.now(),
+  origin: CommandOrigin.Local,
+  params: {
+    title: 'Image Processing',
+    size: [400, 300],
+    color: '#335577'
+  }
+}
+
+const groupResult = await service.applyOperation(createGroupOp)
+
+if (groupResult.success) {
+  const groupId = groupResult.data
+
+  // Add nodes to group
+  const addNodesResult = await service.addNodesToGroup({
+    groupId,
+    nodeIds: [node1Id, node2Id]
+  })
+
+  if (!addNodesResult.success) {
+    console.error('Failed to add nodes:', addNodesResult.error)
+  }
+}
+```
+
+### Clipboard Operations
+
+```typescript
+// Copy nodes
+const copyResult = await service.copyNodes([node1Id, node2Id])
+
+if (copyResult.success) {
+  // Paste at a different location
+  const pasteResult = await service.pasteNodes()
+
+  if (pasteResult.success) {
+    console.log('Pasted nodes:', pasteResult.data)
+  } else {
+    console.error('Paste failed:', pasteResult.error)
+  }
+}
+
+// Cut operation
+const cutResult = await service.cutNodes([node3Id])
+// Original nodes marked for deletion after paste
+```
+
+### Error Context Preservation
+
+```typescript
+const result = await service.updateNodeProperty({
+  nodeId: 'invalid-node',
+  property: 'seed',
+  value: 12345
+})
+
+if (!result.success) {
+  // Rich error context available
+  console.error('Error:', result.error.message)
+  console.error('Code:', result.error.code)
+  console.error('Operation:', result.error.context.operation)
+  console.error('Parameters:', result.error.context.params)
+  console.error('Original error:', result.error.context.cause)
+}
+```
+
+### Subgraph Operations
+
+```typescript
+// Create subgraph from selected items
+const subgraphOp: GraphMutationOperation = {
+  type: 'createSubgraph',
+  timestamp: Date.now(),
+  origin: CommandOrigin.Local,
+  params: {
+    selectedItems: new Set([node1, node2, node3])
+  }
+}
+
+const result = await service.applyOperation(subgraphOp)
+
+if (result.success) {
+  const { subgraph, node } = result.data
+
+  // Add I/O to subgraph
+  await service.addSubgraphInput({
+    subgraphId: subgraph.id,
+    name: 'image',
+    type: 'IMAGE'
+  })
+}
+```
+
+### History Operations
+
+```typescript
+// All operations are undoable
+const result = await service.undo()
+
+if (result.success) {
+  console.log('Undo successful')
+} else {
+  console.error('Undo failed:', result.error.message)
+  // Might fail if no history or change tracker unavailable
+}
+
+// Redo
+const redoResult = await service.redo()
+```
+
+## Implementation Details
+
+### Integration Points
+
+1. **LiteGraph Integration**
+   - Uses `app.graph` for graph access
+   - Calls `beforeChange()`/`afterChange()` for all mutations
+   - Integrates with existing LiteGraph node/connection APIs
+
+2. **ChangeTracker Integration**
+   - Maintains compatibility with existing undo/redo system
+   - Transactions wrapped with `beforeChange()`/`afterChange()`
+   - No longer calls `checkState()` directly (removed from new implementation)
+
+3. **Error Handling**
+   - All operations wrapped in try-catch blocks
+   - Errors converted to GraphMutationError with context
+   - Original errors preserved in context.cause
+
+## Technical Decisions
+
+### Why Command Pattern?
+- **Uniformity**: Single entry point for all operations
+- **Extensibility**: Easy to add new operations
+- **CRDT Ready**: Commands include timestamp and origin for future sync
+- **Testing**: Easy to test command dispatch and execution
+
+### Why Result Pattern?
+- **Explicit Error Handling**: Forces consumers to handle errors
+- **No Exceptions**: Predictable control flow
+- **Rich Context**: Errors carry operation context
+- **Type Safety**: TypeScript discriminated unions
+
+### Why GraphMutationError?
+- **Context Preservation**: Maintains full operation context
+- **Debugging**: Detailed information for troubleshooting
+- **Standardization**: Consistent error structure
+- **Traceability**: Links errors to specific operations
+
+## Related Files
+
+- **Interface Definition**: `src/core/graph/operations/IGraphMutationService.ts`
+- **Implementation**: `src/core/graph/operations/graphMutationService.ts`
+- **Types**: `src/core/graph/operations/types.ts`
+- **Error Class**: `src/core/graph/operations/GraphMutationError.ts`
+- **Tests**: `tests-ui/tests/services/graphMutationService.test.ts`
+- **LiteGraph Core**: `src/lib/litegraph/src/LGraph.ts`
+- **Node Implementation**: `src/lib/litegraph/src/LGraphNode.ts`
+- **Change Tracking**: `src/scripts/changeTracker.ts`
+
+## Implementation Compatibility Notes
+
+### Critical Implementation Details to Maintain:
+
+1. **beforeChange/afterChange Pattern**
+   - All mutations MUST be wrapped with `graph.beforeChange()` and `graph.afterChange()`
+   - This enables undo/redo functionality through ChangeTracker
+   - Reference: Pattern used consistently throughout service
+
+2. **Node ID Management**
+   - Node IDs use NodeId type from schemas
+   - Custom IDs can be provided during creation (for workflow loading)
+
+3. **Clipboard Implementation**
+   - Uses localStorage with key 'litegrapheditor_clipboard'
+   - Maintains node connections during copy/paste
+   - Cut operation marks nodes for deletion after paste
+
+4. **Group Management**
+   - Groups auto-resize when adding nodes using `recomputeInsideNodes()`
+   - Visual operations call `graph.setDirtyCanvas(true, false)`
+
+5. **Error Handling**
+   - All operations return Result<T, GraphMutationError>
+   - Never throw exceptions from public methods
+   - Preserve original error in context.cause
+
+6. **Subgraph Support**
+   - Uses instanceof checks for SubgraphNode detection
+   - Iterates through graph._nodes to find subgraphs
+
+## Migration Strategy
+
+1. Replace direct graph method calls with service operations
+2. Update error handling from try-catch to Result pattern checking
+3. Convert operation calls to use command pattern where beneficial
+4. Leverage error context for better debugging
+5. Ensure all operations maintain existing beforeChange/afterChange patterns
+
+## Important Notes
+
+1. **Always use GraphMutationService** - Never call graph methods directly
+2. **Handle Result types** - Check success before using data
+3. **Preserve error context** - Log full error context for debugging
+4. **Command pattern ready** - Can easily add CRDT sync in future
+5. **Performance** - Result pattern and command recording have minimal overhead
+6. **Type safety** - Use TypeScript types for all operations

src/core/graph/operations/GraphMutationError.ts

@@ -0,0 +1,14 @@
+export class GraphMutationError extends Error {
+  public readonly code: string
+  public readonly context: Record<string, any>
+
+  constructor(
+    message: string,
+    context: Record<string, any>,
+    code = 'GRAPH_MUTATION_ERROR'
+  ) {
+    super(message)
+    this.code = code
+    this.context = context
+  }
+}

src/core/graph/operations/IGraphMutationService.ts

@@ -0,0 +1,144 @@
+import type { GraphMutationError } from '@/core/graph/operations/GraphMutationError'
+import type {
+  AddNodeInputParams,
+  AddNodeOutputParams,
+  AddNodesToGroupParams,
+  AddRerouteParams,
+  ChangeNodeModeParams,
+  ConnectParams,
+  CreateGroupParams,
+  CreateNodeParams,
+  CreateSubgraphParams,
+  CreateSubgraphResult,
+  DisconnectParams,
+  GraphMutationOperation,
+  NodeInputSlotParams,
+  OperationResultType,
+  Result,
+  SubgraphIndexParams,
+  SubgraphNameTypeParams,
+  UpdateGroupTitleParams,
+  UpdateNodePropertyParams,
+  UpdateNodeTitleParams
+} from '@/core/graph/operations/types'
+import type { GroupId } from '@/lib/litegraph/src/LGraphGroup'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LinkId } from '@/lib/litegraph/src/LLink'
+import type { RerouteId } from '@/lib/litegraph/src/Reroute'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+export interface IGraphMutationService {
+  applyOperation<T extends GraphMutationOperation>(
+    operation: T
+  ): Promise<Result<OperationResultType<T>, GraphMutationError>>
+
+  createNode(
+    params: CreateNodeParams
+  ): Promise<Result<NodeId, GraphMutationError>>
+
+  getNodeById(nodeId: NodeId): Promise<Result<LGraphNode, GraphMutationError>>
+
+  removeNode(nodeId: NodeId): Promise<Result<void, GraphMutationError>>
+
+  updateNodeProperty(
+    params: UpdateNodePropertyParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  updateNodeTitle(
+    params: UpdateNodeTitleParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  changeNodeMode(
+    params: ChangeNodeModeParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  cloneNode(nodeId: NodeId): Promise<Result<NodeId, GraphMutationError>>
+
+  connect(params: ConnectParams): Promise<Result<LinkId, GraphMutationError>>
+
+  disconnect(
+    params: DisconnectParams
+  ): Promise<Result<boolean, GraphMutationError>>
+
+  disconnectLink(linkId: LinkId): Promise<Result<void, GraphMutationError>>
+
+  createGroup(
+    params: CreateGroupParams
+  ): Promise<Result<GroupId, GraphMutationError>>
+
+  removeGroup(groupId: GroupId): Promise<Result<void, GraphMutationError>>
+
+  updateGroupTitle(
+    params: UpdateGroupTitleParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  addNodesToGroup(
+    params: AddNodesToGroupParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  recomputeGroupNodes(
+    groupId: GroupId
+  ): Promise<Result<void, GraphMutationError>>
+
+  addReroute(
+    params: AddRerouteParams
+  ): Promise<Result<RerouteId, GraphMutationError>>
+
+  removeReroute(rerouteId: RerouteId): Promise<Result<void, GraphMutationError>>
+
+  copyNodes(nodeIds: NodeId[]): Promise<Result<void, GraphMutationError>>
+
+  cutNodes(nodeIds: NodeId[]): Promise<Result<void, GraphMutationError>>
+
+  pasteNodes(): Promise<Result<NodeId[], GraphMutationError>>
+
+  addSubgraphNodeInput(
+    params: AddNodeInputParams
+  ): Promise<Result<number, GraphMutationError>>
+
+  addSubgraphNodeOutput(
+    params: AddNodeOutputParams
+  ): Promise<Result<number, GraphMutationError>>
+
+  removeSubgraphNodeInput(
+    params: NodeInputSlotParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  removeSubgraphNodeOutput(
+    params: NodeInputSlotParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  createSubgraph(
+    params: CreateSubgraphParams
+  ): Promise<Result<CreateSubgraphResult, GraphMutationError>>
+
+  unpackSubgraph(
+    subgraphNodeId: NodeId
+  ): Promise<Result<void, GraphMutationError>>
+
+  addSubgraphInput(
+    params: SubgraphNameTypeParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  addSubgraphOutput(
+    params: SubgraphNameTypeParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  removeSubgraphInput(
+    params: SubgraphIndexParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  removeSubgraphOutput(
+    params: SubgraphIndexParams
+  ): Promise<Result<void, GraphMutationError>>
+
+  clearGraph(): Promise<Result<void, GraphMutationError>>
+
+  bypassNode(nodeId: NodeId): Promise<Result<void, GraphMutationError>>
+
+  unbypassNode(nodeId: NodeId): Promise<Result<void, GraphMutationError>>
+
+  undo(): Promise<Result<void, GraphMutationError>>
+
+  redo(): Promise<Result<void, GraphMutationError>>
+}

src/core/graph/operations/types.ts

@@ -0,0 +1,367 @@
+/**
+ * Graph Mutation Command System - Type Definitions
+ *
+ * Defines command types for graph mutation operations with CRDT support.
+ * Each command represents an atomic operation that can be applied, undone, and synchronized.
+ */
+import type { Subgraph } from '@/lib/litegraph/src/LGraph'
+import type { GroupId, LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LinkId } from '@/lib/litegraph/src/LLink'
+import type { RerouteId } from '@/lib/litegraph/src/Reroute'
+import type {
+  SubgraphId,
+  SubgraphNode
+} from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+export type Result<T, E> =
+  | { success: true; data: T }
+  | { success: false; error: E }
+
+export interface CreateNodeParams {
+  type: string
+  properties?: Record<string, string | number | boolean | object>
+  title?: string
+}
+
+export interface UpdateNodePropertyParams {
+  nodeId: NodeId
+  property: string
+  value: string | number | boolean | object | string[] | undefined
+}
+
+export interface UpdateNodeTitleParams {
+  nodeId: NodeId
+  title: string
+}
+
+export interface ChangeNodeModeParams {
+  nodeId: NodeId
+  mode: number
+}
+
+export interface ConnectParams {
+  sourceNodeId: NodeId
+  sourceSlot: number | string
+  targetNodeId: NodeId
+  targetSlot: number | string
+}
+
+export interface DisconnectParams {
+  nodeId: NodeId
+  slot: number | string
+  slotType: 'input' | 'output'
+  targetNodeId?: NodeId
+}
+
+export interface CreateGroupParams {
+  title?: string
+  size?: [number, number]
+  color?: string
+  fontSize?: number
+}
+
+export interface UpdateGroupTitleParams {
+  groupId: GroupId
+  title: string
+}
+
+export interface AddNodesToGroupParams {
+  groupId: GroupId
+  nodeIds: NodeId[]
+}
+
+export interface AddRerouteParams {
+  pos: [number, number]
+  linkId?: LinkId
+  parentRerouteId?: RerouteId
+}
+
+export interface AddNodeInputParams {
+  nodeId: NodeId
+  name: string
+  type: string
+  extra_info?: Record<string, unknown>
+}
+
+export interface AddNodeOutputParams {
+  nodeId: NodeId
+  name: string
+  type: string
+  extra_info?: Record<string, unknown>
+}
+
+export interface CreateSubgraphParams {
+  selectedItems: Set<LGraphNode | LGraphGroup>
+}
+
+export interface NodeInputSlotParams {
+  nodeId: NodeId
+  slot: number
+}
+
+export interface SubgraphNameTypeParams {
+  subgraphId: SubgraphId
+  name: string
+  type: string
+}
+
+export interface SubgraphIndexParams {
+  subgraphId: SubgraphId
+  index: number
+}
+
+export enum CommandOrigin {
+  Local = 'local'
+}
+
+export type GraphMutationOperation =
+  | CreateNodeCommand
+  | RemoveNodeCommand
+  | UpdateNodePropertyCommand
+  | UpdateNodeTitleCommand
+  | ChangeNodeModeCommand
+  | CloneNodeCommand
+  | BypassNodeCommand
+  | UnbypassNodeCommand
+  | ConnectCommand
+  | DisconnectCommand
+  | DisconnectLinkCommand
+  | CreateGroupCommand
+  | RemoveGroupCommand
+  | UpdateGroupTitleCommand
+  | AddNodesToGroupCommand
+  | RecomputeGroupNodesCommand
+  | AddRerouteCommand
+  | RemoveRerouteCommand
+  | CopyNodesCommand
+  | CutNodesCommand
+  | PasteNodesCommand
+  | CreateSubgraphCommand
+  | UnpackSubgraphCommand
+  | AddSubgraphNodeInputCommand
+  | AddSubgraphNodeOutputCommand
+  | RemoveSubgraphNodeInputCommand
+  | RemoveSubgraphNodeOutputCommand
+  | AddSubgraphInputCommand
+  | AddSubgraphOutputCommand
+  | RemoveSubgraphInputCommand
+  | RemoveSubgraphOutputCommand
+  | ClearGraphCommand
+  | UndoCommand
+  | RedoCommand
+
+interface GraphOpBase {
+  /** Timestamp for ordering commands */
+  timestamp: number
+  /** Origin of the command */
+  origin: CommandOrigin
+}
+
+export interface CreateNodeCommand extends GraphOpBase {
+  type: 'createNode'
+  params: CreateNodeParams
+}
+
+export interface RemoveNodeCommand extends GraphOpBase {
+  type: 'removeNode'
+  params: NodeId
+}
+
+export interface UpdateNodePropertyCommand extends GraphOpBase {
+  type: 'updateNodeProperty'
+  params: UpdateNodePropertyParams
+}
+
+export interface UpdateNodeTitleCommand extends GraphOpBase {
+  type: 'updateNodeTitle'
+  params: UpdateNodeTitleParams
+}
+
+export interface ChangeNodeModeCommand extends GraphOpBase {
+  type: 'changeNodeMode'
+  params: ChangeNodeModeParams
+}
+
+export interface CloneNodeCommand extends GraphOpBase {
+  type: 'cloneNode'
+  params: NodeId
+}
+
+export interface BypassNodeCommand extends GraphOpBase {
+  type: 'bypassNode'
+  params: NodeId
+}
+
+export interface UnbypassNodeCommand extends GraphOpBase {
+  type: 'unbypassNode'
+  params: NodeId
+}
+
+export interface ConnectCommand extends GraphOpBase {
+  type: 'connect'
+  params: ConnectParams
+}
+
+export interface DisconnectCommand extends GraphOpBase {
+  type: 'disconnect'
+  params: DisconnectParams
+}
+
+export interface DisconnectLinkCommand extends GraphOpBase {
+  type: 'disconnectLink'
+  params: LinkId
+}
+
+export interface CreateGroupCommand extends GraphOpBase {
+  type: 'createGroup'
+  params: CreateGroupParams
+}
+
+export interface RemoveGroupCommand extends GraphOpBase {
+  type: 'removeGroup'
+  params: GroupId
+}
+
+export interface UpdateGroupTitleCommand extends GraphOpBase {
+  type: 'updateGroupTitle'
+  params: UpdateGroupTitleParams
+}
+
+export interface AddNodesToGroupCommand extends GraphOpBase {
+  type: 'addNodesToGroup'
+  params: AddNodesToGroupParams
+}
+
+export interface RecomputeGroupNodesCommand extends GraphOpBase {
+  type: 'recomputeGroupNodes'
+  params: GroupId
+}
+
+// Reroute Commands
+export interface AddRerouteCommand extends GraphOpBase {
+  type: 'addReroute'
+  params: AddRerouteParams
+}
+
+export interface RemoveRerouteCommand extends GraphOpBase {
+  type: 'removeReroute'
+  params: RerouteId
+}
+
+export interface CopyNodesCommand extends GraphOpBase {
+  type: 'copyNodes'
+  nodeIds: NodeId[]
+}
+
+export interface CutNodesCommand extends GraphOpBase {
+  type: 'cutNodes'
+  params: NodeId[]
+}
+
+export interface PasteNodesCommand extends GraphOpBase {
+  type: 'pasteNodes'
+}
+
+export interface CreateSubgraphCommand extends GraphOpBase {
+  type: 'createSubgraph'
+  params: CreateSubgraphParams
+}
+
+export interface UnpackSubgraphCommand extends GraphOpBase {
+  type: 'unpackSubgraph'
+  params: NodeId
+}
+
+export interface AddSubgraphNodeInputCommand extends GraphOpBase {
+  type: 'addSubgraphNodeInput'
+  params: AddNodeInputParams
+}
+
+export interface AddSubgraphNodeOutputCommand extends GraphOpBase {
+  type: 'addSubgraphNodeOutput'
+  params: AddNodeOutputParams
+}
+
+export interface RemoveSubgraphNodeInputCommand extends GraphOpBase {
+  type: 'removeSubgraphNodeInput'
+  params: NodeInputSlotParams
+}
+
+export interface RemoveSubgraphNodeOutputCommand extends GraphOpBase {
+  type: 'removeSubgraphNodeOutput'
+  params: NodeInputSlotParams
+}
+
+export interface AddSubgraphInputCommand extends GraphOpBase {
+  type: 'addSubgraphInput'
+  params: SubgraphNameTypeParams
+}
+
+export interface AddSubgraphOutputCommand extends GraphOpBase {
+  type: 'addSubgraphOutput'
+  params: SubgraphNameTypeParams
+}
+
+export interface RemoveSubgraphInputCommand extends GraphOpBase {
+  type: 'removeSubgraphInput'
+  params: SubgraphIndexParams
+}
+
+export interface RemoveSubgraphOutputCommand extends GraphOpBase {
+  type: 'removeSubgraphOutput'
+  params: SubgraphIndexParams
+}
+
+export interface ClearGraphCommand extends GraphOpBase {
+  type: 'clearGraph'
+}
+
+export interface UndoCommand extends GraphOpBase {
+  type: 'undo'
+}
+
+export interface RedoCommand extends GraphOpBase {
+  type: 'redo'
+}
+
+export type NodeIdReturnOperations = CreateNodeCommand | CloneNodeCommand
+
+export type LinkIdReturnOperations = ConnectCommand
+
+export type BooleanReturnOperations = DisconnectCommand
+
+export type GroupIdReturnOperations = CreateGroupCommand
+
+export type RerouteIdReturnOperations = AddRerouteCommand
+
+export type NodeIdArrayReturnOperations = PasteNodesCommand
+
+export type NumberReturnOperations =
+  | AddSubgraphNodeInputCommand
+  | AddSubgraphNodeOutputCommand
+
+export interface CreateSubgraphResult {
+  subgraph: Subgraph
+  node: SubgraphNode
+}
+
+export type OperationResultType<T extends GraphMutationOperation> =
+  T extends NodeIdReturnOperations
+    ? NodeId
+    : T extends LinkIdReturnOperations
+      ? LinkId
+      : T extends BooleanReturnOperations
+        ? boolean
+        : T extends GroupIdReturnOperations
+          ? GroupId
+          : T extends RerouteIdReturnOperations
+            ? RerouteId
+            : T extends NodeIdArrayReturnOperations
+              ? NodeId[]
+              : T extends NumberReturnOperations
+                ? number
+                : T extends CreateSubgraphCommand
+                  ? CreateSubgraphResult
+                  : void

src/lib/litegraph/src/LGraphGroup.ts

@@ -24,6 +24,8 @@ import {
 } from './measure'
 import type { ISerialisedGroup } from './types/serialisation'
 
+export type GroupId = number
+
 export interface IGraphGroupFlags extends Record<string, unknown> {
   pinned?: true
 }

src/lib/litegraph/src/subgraph/SubgraphNode.ts

@@ -4,10 +4,7 @@ import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LLink, type ResolvedConnection } from '@/lib/litegraph/src/LLink'
 import { RecursionError } from '@/lib/litegraph/src/infrastructure/RecursionError'
-import type {
-  ISubgraphInput,
-  IWidgetLocator
-} from '@/lib/litegraph/src/interfaces'
+import type { ISubgraphInput } from '@/lib/litegraph/src/interfaces'
 import type {
   INodeInputSlot,
   ISlotType,
@@ -34,6 +31,8 @@ import {
 } from './ExecutableNodeDTO'
 import type { SubgraphInput } from './SubgraphInput'
 
+export type SubgraphId = string
+
 /**
  * An instance of a {@link Subgraph}, displayed as a node on the containing (parent) graph.
  */
@@ -81,10 +80,9 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         const existingInput = this.inputs.find((i) => i.name == name)
         if (existingInput) {
           const linkId = subgraphInput.linkIds[0]
-          const { inputNode, input } = subgraph.links[linkId].resolve(subgraph)
+          const { inputNode } = subgraph.links[linkId].resolve(subgraph)
           const widget = inputNode?.widgets?.find?.((w) => w.name == name)
-          if (widget)
-            this.#setWidget(subgraphInput, existingInput, widget, input?.widget)
+          if (widget) this.#setWidget(subgraphInput, existingInput, widget)
           return
         }
         const input = this.addInput(name, type)
@@ -189,14 +187,13 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
     subgraphInput.events.addEventListener(
       'input-connected',
-      (e) => {
+      () => {
         if (input._widget) return
 
         const widget = subgraphInput._widget
         if (!widget) return
 
-        const widgetLocator = e.detail.input.widget
-        this.#setWidget(subgraphInput, input, widget, widgetLocator)
+        this.#setWidget(subgraphInput, input, widget)
       },
       { signal }
     )
@@ -306,7 +303,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         const widget = resolved.inputNode.getWidgetFromSlot(resolved.input)
         if (!widget) continue
 
-        this.#setWidget(subgraphInput, input, widget, resolved.input.widget)
+        this.#setWidget(subgraphInput, input, widget)
         break
       }
     }
@@ -315,13 +312,11 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   #setWidget(
     subgraphInput: Readonly<SubgraphInput>,
     input: INodeInputSlot,
-    widget: Readonly<IBaseWidget>,
-    inputWidget: IWidgetLocator | undefined
+    widget: Readonly<IBaseWidget>
   ) {
     // Use the first matching widget
-    const promotedWidget = toConcreteWidget(widget, this).createCopyForNode(
-      this
-    )
+    const targetWidget = toConcreteWidget(widget, this)
+    const promotedWidget = targetWidget.createCopyForNode(this)
 
     Object.assign(promotedWidget, {
       get name() {
@@ -379,9 +374,11 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     // NOTE: This code creates linked chains of prototypes for passing across
     // multiple levels of subgraphs. As part of this, it intentionally avoids
     // creating new objects. Have care when making changes.
+    const backingInput =
+      targetWidget.node.findInputSlot(widget.name, true)?.widget ?? {}
     input.widget ??= { name: subgraphInput.name }
     input.widget.name = subgraphInput.name
-    if (inputWidget) Object.setPrototypeOf(input.widget, inputWidget)
+    Object.setPrototypeOf(input.widget, backingInput)
 
     input._widget = promotedWidget
   }

src/locales/en/main.json

@@ -1862,17 +1862,5 @@
     "showGroups": "Show Frames/Groups",
     "renderBypassState": "Render Bypass State",
     "renderErrorState": "Render Error State"
-  },
-  "assetBrowser": {
-    "assets": "Assets",
-    "browseAssets": "Browse Assets",
-    "noAssetsFound": "No assets found",
-    "tryAdjustingFilters": "Try adjusting your search or filters",
-    "loadingModels": "Loading {type}...",
-    "connectionError": "Please check your connection and try again",
-    "noModelsInFolder": "No {type} available in this folder",
-    "searchAssetsPlaceholder": "Search assets...",
-    "allModels": "All Models",
-    "unknown": "Unknown"
   }
 }

src/main.ts

@@ -2,11 +2,6 @@ import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
 import * as Sentry from '@sentry/vue'
 import { initializeApp } from 'firebase/app'
-import {
-  browserLocalPersistence,
-  browserSessionPersistence,
-  indexedDBLocalPersistence
-} from 'firebase/auth'
 import { createPinia } from 'pinia'
 import 'primeicons/primeicons.css'
 import PrimeVue from 'primevue/config'
@@ -14,7 +9,7 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 import { createApp } from 'vue'
-import { VueFire, VueFireAuthWithDependencies } from 'vuefire'
+import { VueFire, VueFireAuth } from 'vuefire'
 
 import { FIREBASE_CONFIG } from '@/config/firebase'
 import '@/lib/litegraph/public/css/litegraph.css'
@@ -71,18 +66,6 @@ app
   .use(i18n)
   .use(VueFire, {
     firebaseApp,
-    modules: [
-      // Configure Firebase Auth persistence: localStorage first, IndexedDB last.
-      // Localstorage is preferred to IndexedDB for mobile Safari compatibility.
-      VueFireAuthWithDependencies({
-        dependencies: {
-          persistence: [
-            browserLocalPersistence,
-            browserSessionPersistence,
-            indexedDBLocalPersistence
-          ]
-        }
-      })
-    ]
+    modules: [VueFireAuth()]
   })
   .mount('#vue-app')

src/platform/assets/components/AssetBadgeGroup.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
-    <span
-      v-for="badge in badges"
-      :key="badge.label"
-      :class="
-        cn(
-          'px-2 py-1 rounded text-xs font-medium uppercase tracking-wider text-white',
-          getBadgeColor(badge.type)
-        )
-      "
-    >
-      {{ badge.label }}
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { cn } from '@/utils/tailwindUtil'
-
-type AssetBadge = {
-  label: string
-  type: 'type' | 'base' | 'size'
-}
-
-defineProps<{
-  badges: AssetBadge[]
-}>()
-
-function getBadgeColor(type: AssetBadge['type']): string {
-  switch (type) {
-    case 'type':
-      return 'bg-blue-100/90 dark-theme:bg-blue-100/80'
-    case 'base':
-      return 'bg-success-100/90 dark-theme:bg-success-100/80'
-    case 'size':
-      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
-    default:
-      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
-  }
-}
-</script>

src/platform/assets/components/AssetBrowserModal.stories.ts

@@ -1,178 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
-import {
-  createMockAssets,
-  mockAssets
-} from '@/platform/assets/fixtures/ui-mock-assets'
-
-// Story arguments interface
-interface StoryArgs {
-  nodeType: string
-  inputName: string
-  currentValue: string
-  showLeftPanel?: boolean
-}
-
-const meta: Meta<StoryArgs> = {
-  title: 'Platform/Assets/AssetBrowserModal',
-  component: AssetBrowserModal,
-  parameters: {
-    layout: 'fullscreen'
-  },
-  argTypes: {
-    nodeType: {
-      control: 'select',
-      options: ['CheckpointLoaderSimple', 'VAELoader', 'ControlNetLoader'],
-      description: 'ComfyUI node type for context'
-    },
-    inputName: {
-      control: 'select',
-      options: ['ckpt_name', 'vae_name', 'control_net_name'],
-      description: 'Widget input name'
-    },
-    currentValue: {
-      control: 'text',
-      description: 'Current selected asset value'
-    },
-    showLeftPanel: {
-      control: 'boolean',
-      description: 'Whether to show the left panel with categories'
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// Modal Layout Stories
-export const Default: Story = {
-  args: {
-    nodeType: 'CheckpointLoaderSimple',
-    inputName: 'ckpt_name',
-    currentValue: '',
-    showLeftPanel: false
-  },
-  render: (args) => ({
-    components: { AssetBrowserModal },
-    setup() {
-      const onAssetSelect = (asset: any) => {
-        console.log('Selected asset:', asset)
-      }
-      const onClose = () => {
-        console.log('Modal closed')
-      }
-
-      return {
-        ...args,
-        onAssetSelect,
-        onClose,
-        assets: mockAssets
-      }
-    },
-    template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
-        <AssetBrowserModal
-          :node-type="nodeType"
-          :input-name="inputName"
-          :show-left-panel="showLeftPanel"
-          :assets="assets"
-          @asset-select="onAssetSelect"
-          @close="onClose"
-        />
-      </div>
-    `
-  })
-}
-
-// Story demonstrating single asset type (auto-hides left panel)
-export const SingleAssetType: Story = {
-  args: {
-    nodeType: 'CheckpointLoaderSimple',
-    inputName: 'ckpt_name',
-    currentValue: '',
-    showLeftPanel: false
-  },
-  render: (args) => ({
-    components: { AssetBrowserModal },
-    setup() {
-      const onAssetSelect = (asset: any) => {
-        console.log('Selected asset:', asset)
-      }
-      const onClose = () => {
-        console.log('Modal closed')
-      }
-
-      // Create assets with only one type (checkpoints)
-      const singleTypeAssets = createMockAssets(15).map((asset) => ({
-        ...asset,
-        type: 'checkpoint'
-      }))
-
-      return { ...args, onAssetSelect, onClose, assets: singleTypeAssets }
-    },
-    template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
-        <AssetBrowserModal
-          :node-type="nodeType"
-          :input-name="inputName"
-          :show-left-panel="showLeftPanel"
-          :assets="assets"
-          @asset-select="onAssetSelect"
-          @close="onClose"
-        />
-      </div>
-    `
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Modal with assets of only one type (checkpoint) - left panel auto-hidden.'
-      }
-    }
-  }
-}
-
-// Story with left panel explicitly hidden
-export const NoLeftPanel: Story = {
-  args: {
-    nodeType: 'CheckpointLoaderSimple',
-    inputName: 'ckpt_name',
-    currentValue: '',
-    showLeftPanel: false
-  },
-  render: (args) => ({
-    components: { AssetBrowserModal },
-    setup() {
-      const onAssetSelect = (asset: any) => {
-        console.log('Selected asset:', asset)
-      }
-      const onClose = () => {
-        console.log('Modal closed')
-      }
-
-      return { ...args, onAssetSelect, onClose, assets: mockAssets }
-    },
-    template: `
-      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
-        <AssetBrowserModal
-          :node-type="nodeType"
-          :input-name="inputName"
-          :show-left-panel="showLeftPanel"
-          :assets="assets"
-          @asset-select="onAssetSelect"
-          @close="onClose"
-        />
-      </div>
-    `
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Modal with left panel explicitly disabled via showLeftPanel=false.'
-      }
-    }
-  }
-}

src/platform/assets/components/AssetBrowserModal.vue

@@ -1,95 +0,0 @@
-<template>
-  <BaseModalLayout
-    data-component-id="AssetBrowserModal"
-    class="size-full max-h-full max-w-full min-w-0"
-    :content-title="contentTitle"
-    @close="handleClose"
-  >
-    <template v-if="shouldShowLeftPanel" #leftPanel>
-      <LeftSidePanel
-        v-model="selectedCategory"
-        data-component-id="AssetBrowserModal-LeftSidePanel"
-        :nav-items="availableCategories"
-      >
-        <template #header-icon>
-          <i-lucide:folder class="size-4" />
-        </template>
-        <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
-      </LeftSidePanel>
-    </template>
-
-    <template #header>
-      <SearchBox
-        v-model="searchQuery"
-        size="lg"
-        :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
-        class="max-w-96"
-      />
-    </template>
-
-    <template #content>
-      <AssetGrid
-        :assets="filteredAssets"
-        @asset-select="handleAssetSelectAndEmit"
-      />
-    </template>
-  </BaseModalLayout>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import SearchBox from '@/components/input/SearchBox.vue'
-import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
-import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
-import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
-import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
-const props = defineProps<{
-  nodeType?: string
-  inputName?: string
-  onSelect?: (assetPath: string) => void
-  onClose?: () => void
-  showLeftPanel?: boolean
-  assets?: AssetItem[]
-}>()
-
-const emit = defineEmits<{
-  'asset-select': [asset: AssetDisplayItem]
-  close: []
-}>()
-
-// Use AssetBrowser composable for all business logic
-const {
-  searchQuery,
-  selectedCategory,
-  availableCategories,
-  contentTitle,
-  filteredAssets,
-  selectAsset
-} = useAssetBrowser(props.assets)
-
-// Dialog controls panel visibility via prop
-const shouldShowLeftPanel = computed(() => {
-  return props.showLeftPanel ?? true
-})
-
-// Handle close button - call both the prop callback and emit the event
-const handleClose = () => {
-  props.onClose?.()
-  emit('close')
-}
-
-// Handle asset selection and emit to parent
-const handleAssetSelectAndEmit = (asset: AssetDisplayItem) => {
-  selectAsset(asset) // This logs the selection for dev mode
-  emit('asset-select', asset) // Emit the full asset object
-
-  // Call prop callback if provided
-  if (props.onSelect) {
-    props.onSelect(asset.name) // Use asset name as the asset path
-  }
-}
-</script>

src/platform/assets/components/AssetCard.stories.ts

@@ -1,182 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import AssetCard from '@/platform/assets/components/AssetCard.vue'
-import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { mockAssets } from '@/platform/assets/fixtures/ui-mock-assets'
-
-// Use the first mock asset as base and transform it to display format
-const baseAsset = mockAssets[0]
-const createAssetData = (
-  overrides: Partial<AssetDisplayItem> = {}
-): AssetDisplayItem => ({
-  ...baseAsset,
-  description:
-    'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
-  formattedSize: '2.1 GB',
-  badges: [
-    { label: 'checkpoints', type: 'type' },
-    { label: '2.1 GB', type: 'size' }
-  ],
-  stats: {
-    formattedDate: '3/15/25',
-    downloadCount: '1.8k',
-    stars: '4.2k'
-  },
-  ...overrides
-})
-
-const meta: Meta<typeof AssetCard> = {
-  title: 'Platform/Assets/AssetCard',
-  component: AssetCard,
-  parameters: {
-    layout: 'centered'
-  },
-  decorators: [
-    () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900"><story /></div>'
-    })
-  ]
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Interactive: Story = {
-  args: {
-    asset: createAssetData(),
-    interactive: true
-  },
-  decorators: [
-    () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
-    })
-  ],
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Default AssetCard with complete data including badges and all stats.'
-      }
-    }
-  }
-}
-
-export const NonInteractive: Story = {
-  args: {
-    asset: createAssetData(),
-    interactive: false
-  },
-  decorators: [
-    () => ({
-      template:
-        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
-    })
-  ],
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'AssetCard in non-interactive mode - renders as div without button semantics.'
-      }
-    }
-  }
-}
-
-export const EdgeCases: Story = {
-  render: () => ({
-    components: { AssetCard },
-    setup() {
-      const edgeCases = [
-        // Default case for comparison
-        createAssetData({
-          name: 'Complete Data',
-          description: 'Asset with all data present for comparison'
-        }),
-        // No badges
-        createAssetData({
-          id: 'no-badges',
-          name: 'No Badges',
-          description: 'Testing graceful handling when badges are not provided',
-          badges: []
-        }),
-        // No stars
-        createAssetData({
-          id: 'no-stars',
-          name: 'No Stars',
-          description: 'Testing missing stars data gracefully',
-          stats: {
-            downloadCount: '1.8k',
-            formattedDate: '3/15/25'
-          }
-        }),
-        // No downloads
-        createAssetData({
-          id: 'no-downloads',
-          name: 'No Downloads',
-          description: 'Testing missing downloads data gracefully',
-          stats: {
-            stars: '4.2k',
-            formattedDate: '3/15/25'
-          }
-        }),
-        // No date
-        createAssetData({
-          id: 'no-date',
-          name: 'No Date',
-          description: 'Testing missing date data gracefully',
-          stats: {
-            stars: '4.2k',
-            downloadCount: '1.8k'
-          }
-        }),
-        // No stats at all
-        createAssetData({
-          id: 'no-stats',
-          name: 'No Stats',
-          description: 'Testing when all stats are missing',
-          stats: {}
-        }),
-        // Long description
-        createAssetData({
-          id: 'long-desc',
-          name: 'Long Description',
-          description:
-            'This is a very long description that should demonstrate how the component handles text overflow and truncation with ellipsis. The description continues with even more content to ensure we test the 2-line clamp behavior properly and see how it renders when there is significantly more text than can fit in the allocated space.'
-        }),
-        // Minimal data
-        createAssetData({
-          id: 'minimal',
-          name: 'Minimal',
-          description: 'Basic model',
-          tags: ['models'],
-          badges: [],
-          stats: {}
-        })
-      ]
-
-      return { edgeCases }
-    },
-    template: `
-      <div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-gray-900">
-        <AssetCard
-          v-for="asset in edgeCases"
-          :key="asset.id"
-          :asset="asset"
-          :interactive="true"
-          @select="(asset) => console.log('Selected:', asset)"
-        />
-      </div>
-    `
-  }),
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        story:
-          'All AssetCard edge cases in a grid layout to test graceful handling of missing data, badges, stats, and long descriptions.'
-      }
-    }
-  }
-}

src/platform/assets/components/AssetCard.vue

@@ -1,111 +0,0 @@
-<template>
-  <component
-    :is="interactive ? 'button' : 'div'"
-    data-component-id="AssetCard"
-    :data-asset-id="asset.id"
-    v-bind="elementProps"
-    :class="
-      cn(
-        // Base layout and container styles (always applied)
-        'rounded-xl overflow-hidden transition-all duration-200',
-        // Button-specific styles
-        interactive && [
-          'appearance-none bg-transparent p-0 m-0 font-inherit text-inherit outline-none cursor-pointer text-left',
-          'bg-ivory-100 border border-gray-300 dark-theme:bg-charcoal-400 dark-theme:border-charcoal-600',
-          'hover:transform hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/10 hover:border-gray-400',
-          'dark-theme:hover:shadow-lg dark-theme:hover:shadow-black/30 dark-theme:hover:border-charcoal-700',
-          'focus:outline-none focus:ring-2 focus:ring-blue-500 dark-theme:focus:ring-blue-400'
-        ],
-        // Div-specific styles
-        !interactive && [
-          'bg-ivory-100 border border-gray-300',
-          'dark-theme:bg-charcoal-400 dark-theme:border-charcoal-600'
-        ]
-      )
-    "
-    @click="interactive && $emit('select', asset)"
-    @keydown.enter="interactive && $emit('select', asset)"
-  >
-    <div class="relative w-full aspect-square overflow-hidden">
-      <div
-        class="w-full h-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-600 flex items-center justify-center"
-      ></div>
-      <AssetBadgeGroup :badges="asset.badges" />
-    </div>
-    <div class="p-4 h-32 flex flex-col justify-between">
-      <div>
-        <h3
-          :class="
-            cn(
-              'mb-2 m-0 text-base font-semibold overflow-hidden text-ellipsis whitespace-nowrap',
-              'text-slate-800',
-              'dark-theme:text-white'
-            )
-          "
-        >
-          {{ asset.name }}
-        </h3>
-        <p
-          :class="
-            cn(
-              'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
-              'text-stone-300',
-              'dark-theme:text-stone-200'
-            )
-          "
-          :title="asset.description"
-        >
-          {{ asset.description }}
-        </p>
-      </div>
-      <div
-        :class="
-          cn(
-            'flex gap-4 text-xs',
-            'text-stone-400',
-            'dark-theme:text-stone-300'
-          )
-        "
-      >
-        <span v-if="asset.stats.stars" class="flex items-center gap-1">
-          <i-lucide:star class="size-3" />
-          {{ asset.stats.stars }}
-        </span>
-        <span v-if="asset.stats.downloadCount" class="flex items-center gap-1">
-          <i-lucide:download class="size-3" />
-          {{ asset.stats.downloadCount }}
-        </span>
-        <span v-if="asset.stats.formattedDate" class="flex items-center gap-1">
-          <i-lucide:clock class="size-3" />
-          {{ asset.stats.formattedDate }}
-        </span>
-      </div>
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
-import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { cn } from '@/utils/tailwindUtil'
-
-const props = defineProps<{
-  asset: AssetDisplayItem
-  interactive?: boolean
-}>()
-
-const elementProps = computed(() =>
-  props.interactive
-    ? {
-        type: 'button',
-        'aria-label': `Select asset ${props.asset.name}`
-      }
-    : {}
-)
-
-defineEmits<{
-  select: [asset: AssetDisplayItem]
-}>()
-</script>

src/platform/assets/components/AssetFilterBar.vue

@@ -1,102 +0,0 @@
-<template>
-  <div :class="containerClasses" data-component-id="asset-filter-bar">
-    <div :class="leftSideClasses" data-component-id="asset-filter-bar-left">
-      <MultiSelect
-        v-model="fileFormats"
-        label="File formats"
-        :options="fileFormatOptions"
-        :class="selectClasses"
-        data-component-id="asset-filter-file-formats"
-        @update:model-value="handleFilterChange"
-      />
-
-      <MultiSelect
-        v-model="baseModels"
-        label="Base models"
-        :options="baseModelOptions"
-        :class="selectClasses"
-        data-component-id="asset-filter-base-models"
-        @update:model-value="handleFilterChange"
-      />
-    </div>
-
-    <div :class="rightSideClasses" data-component-id="asset-filter-bar-right">
-      <SingleSelect
-        v-model="sortBy"
-        label="Sort by"
-        :options="sortOptions"
-        :class="selectClasses"
-        data-component-id="asset-filter-sort"
-        @update:model-value="handleFilterChange"
-      >
-        <template #icon>
-          <i-lucide:arrow-up-down class="size-3" />
-        </template>
-      </SingleSelect>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import MultiSelect from '@/components/input/MultiSelect.vue'
-import SingleSelect from '@/components/input/SingleSelect.vue'
-import type { SelectOption } from '@/components/input/types'
-import { cn } from '@/utils/tailwindUtil'
-
-export interface FilterState {
-  fileFormats: string[]
-  baseModels: string[]
-  sortBy: string
-}
-
-const fileFormats = ref<SelectOption[]>([])
-const baseModels = ref<SelectOption[]>([])
-const sortBy = ref('name-asc')
-
-// TODO: Make fileFormatOptions configurable via props or assetService
-// Should support dynamic file formats based on available assets or server capabilities
-const fileFormatOptions = [
-  { name: '.ckpt', value: 'ckpt' },
-  { name: '.safetensors', value: 'safetensors' },
-  { name: '.pt', value: 'pt' }
-]
-
-// TODO: Make baseModelOptions configurable via props or assetService
-// Should support dynamic base models based on available assets or server detection
-const baseModelOptions = [
-  { name: 'SD 1.5', value: 'sd15' },
-  { name: 'SD XL', value: 'sdxl' },
-  { name: 'SD 3.5', value: 'sd35' }
-]
-
-// TODO: Make sortOptions configurable via props
-// Different asset types might need different sorting options
-const sortOptions = [
-  { name: 'A-Z', value: 'name-asc' },
-  { name: 'Z-A', value: 'name-desc' },
-  { name: 'Recent', value: 'recent' },
-  { name: 'Popular', value: 'popular' }
-]
-
-const emit = defineEmits<{
-  filterChange: [filters: FilterState]
-}>()
-
-const containerClasses = cn(
-  'flex gap-4 items-center justify-between',
-  'px-6 pt-2 pb-6'
-)
-const leftSideClasses = cn('flex gap-4 items-center')
-const rightSideClasses = cn('flex items-center')
-const selectClasses = cn('min-w-32')
-
-function handleFilterChange() {
-  emit('filterChange', {
-    fileFormats: fileFormats.value.map((option: SelectOption) => option.value),
-    baseModels: baseModels.value.map((option: SelectOption) => option.value),
-    sortBy: sortBy.value
-  })
-}
-</script>

src/platform/assets/components/AssetGrid.vue

@@ -1,70 +0,0 @@
-<template>
-  <div
-    data-component-id="AssetGrid"
-    :style="gridStyle"
-    role="grid"
-    aria-label="Asset collection"
-    :aria-rowcount="-1"
-    :aria-colcount="-1"
-    :aria-setsize="assets.length"
-  >
-    <AssetCard
-      v-for="asset in assets"
-      :key="asset.id"
-      :asset="asset"
-      :interactive="true"
-      role="gridcell"
-      @select="$emit('assetSelect', $event)"
-    />
-
-    <!-- Empty state -->
-    <div
-      v-if="assets.length === 0"
-      :class="
-        cn(
-          'col-span-full flex flex-col items-center justify-center py-16',
-          'text-stone-300 dark-theme:text-stone-200'
-        )
-      "
-    >
-      <i-lucide:search class="size-10 mb-4" />
-      <h3 class="text-lg font-medium mb-2">
-        {{ $t('assetBrowser.noAssetsFound') }}
-      </h3>
-      <p class="text-sm">{{ $t('assetBrowser.tryAdjustingFilters') }}</p>
-    </div>
-
-    <!-- Loading state -->
-    <div
-      v-if="loading"
-      class="col-span-full flex items-center justify-center py-16"
-    >
-      <i-lucide:loader
-        :class="
-          cn('size-6 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
-        "
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import AssetCard from '@/platform/assets/components/AssetCard.vue'
-import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import { createGridStyle } from '@/utils/gridUtil'
-import { cn } from '@/utils/tailwindUtil'
-
-defineProps<{
-  assets: AssetDisplayItem[]
-  loading?: boolean
-}>()
-
-defineEmits<{
-  assetSelect: [asset: AssetDisplayItem]
-}>()
-
-// Use same grid style as BaseModalLayout
-const gridStyle = computed(() => createGridStyle())
-</script>

src/platform/assets/composables/useAssetBrowser.ts

@@ -1,188 +0,0 @@
-import { computed, ref } from 'vue'
-
-import { t } from '@/i18n'
-import type { UUID } from '@/lib/litegraph/src/utils/uuid'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import {
-  getAssetBaseModel,
-  getAssetDescription
-} from '@/platform/assets/utils/assetMetadataUtils'
-import { formatSize } from '@/utils/formatUtil'
-
-type AssetBadge = {
-  label: string
-  type: 'type' | 'base' | 'size'
-}
-
-// Display properties for transformed assets
-export interface AssetDisplayItem extends AssetItem {
-  description: string
-  formattedSize: string
-  badges: AssetBadge[]
-  stats: {
-    formattedDate?: string
-    downloadCount?: string
-    stars?: string
-  }
-}
-
-/**
- * Asset Browser composable
- * Manages search, filtering, asset transformation and selection logic
- */
-export function useAssetBrowser(assets: AssetItem[] = []) {
-  // State
-  const searchQuery = ref('')
-  const selectedCategory = ref('all')
-  const sortBy = ref('name')
-
-  // Transform API asset to display asset
-  function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
-    // Extract description from metadata or create from tags
-    const typeTag = asset.tags.find((tag) => tag !== 'models')
-    const description =
-      getAssetDescription(asset) ||
-      `${typeTag || t('assetBrowser.unknown')} model`
-
-    // Format file size
-    const formattedSize = formatSize(asset.size)
-
-    // Create badges from tags and metadata
-    const badges: AssetBadge[] = []
-
-    // Type badge from non-root tag
-    if (typeTag) {
-      badges.push({ label: typeTag, type: 'type' })
-    }
-
-    // Base model badge from metadata
-    const baseModel = getAssetBaseModel(asset)
-    if (baseModel) {
-      badges.push({
-        label: baseModel,
-        type: 'base'
-      })
-    }
-
-    // Size badge
-    badges.push({ label: formattedSize, type: 'size' })
-
-    // Create display stats from API data
-    const stats = {
-      formattedDate: new Date(asset.created_at).toLocaleDateString(),
-      downloadCount: undefined, // Not available in API
-      stars: undefined // Not available in API
-    }
-
-    return {
-      ...asset,
-      description,
-      formattedSize,
-      badges,
-      stats
-    }
-  }
-
-  // Extract available categories from assets
-  const availableCategories = computed(() => {
-    const categorySet = new Set<string>()
-
-    assets.forEach((asset) => {
-      // Second tag is the category (after 'models' root tag)
-      if (asset.tags.length > 1 && asset.tags[0] === 'models') {
-        categorySet.add(asset.tags[1])
-      }
-    })
-
-    return [
-      {
-        id: 'all',
-        label: t('assetBrowser.allModels'),
-        icon: 'icon-[lucide--folder]'
-      },
-      ...Array.from(categorySet)
-        .sort()
-        .map((category) => ({
-          id: category,
-          label: category.charAt(0).toUpperCase() + category.slice(1),
-          icon: 'icon-[lucide--package]'
-        }))
-    ]
-  })
-
-  // Compute content title from selected category
-  const contentTitle = computed(() => {
-    if (selectedCategory.value === 'all') {
-      return t('assetBrowser.allModels')
-    }
-
-    const category = availableCategories.value.find(
-      (cat) => cat.id === selectedCategory.value
-    )
-    return category?.label || t('assetBrowser.assets')
-  })
-
-  // Filter functions
-  const filterByCategory = (category: string) => (asset: AssetItem) => {
-    if (category === 'all') return true
-    return asset.tags.includes(category)
-  }
-
-  const filterByQuery = (query: string) => (asset: AssetItem) => {
-    if (!query) return true
-    const lowerQuery = query.toLowerCase()
-    const description = getAssetDescription(asset)
-    return (
-      asset.name.toLowerCase().includes(lowerQuery) ||
-      (description && description.toLowerCase().includes(lowerQuery)) ||
-      asset.tags.some((tag) => tag.toLowerCase().includes(lowerQuery))
-    )
-  }
-
-  // Computed filtered and transformed assets
-  const filteredAssets = computed(() => {
-    const filtered = assets
-      .filter(filterByCategory(selectedCategory.value))
-      .filter(filterByQuery(searchQuery.value))
-
-    // Sort assets
-    filtered.sort((a, b) => {
-      switch (sortBy.value) {
-        case 'date':
-          return (
-            new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-          )
-        case 'name':
-        default:
-          return a.name.localeCompare(b.name)
-      }
-    })
-
-    // Transform to display format
-    return filtered.map(transformAssetForDisplay)
-  })
-
-  // Actions
-  function selectAsset(asset: AssetDisplayItem): UUID {
-    if (import.meta.env.DEV) {
-      console.log('Asset selected:', asset.id, asset.name)
-    }
-    return asset.id
-  }
-
-  return {
-    // State
-    searchQuery,
-    selectedCategory,
-    sortBy,
-
-    // Computed
-    availableCategories,
-    contentTitle,
-    filteredAssets,
-
-    // Actions
-    selectAsset,
-    transformAssetForDisplay
-  }
-}

src/platform/assets/composables/useAssetBrowserDialog.stories.ts

@@ -1,203 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
-import { mockAssets } from '@/platform/assets/fixtures/ui-mock-assets'
-
-// Component that simulates the useAssetBrowserDialog functionality with working close
-const DialogDemoComponent = {
-  components: { AssetBrowserModal },
-  setup() {
-    const isDialogOpen = ref(false)
-    const currentNodeType = ref('CheckpointLoaderSimple')
-    const currentInputName = ref('ckpt_name')
-    const currentValue = ref('')
-
-    const handleOpenDialog = (
-      nodeType: string,
-      inputName: string,
-      value = ''
-    ) => {
-      currentNodeType.value = nodeType
-      currentInputName.value = inputName
-      currentValue.value = value
-      isDialogOpen.value = true
-    }
-
-    const handleCloseDialog = () => {
-      isDialogOpen.value = false
-    }
-
-    const handleAssetSelected = (assetPath: string) => {
-      console.log('Asset selected:', assetPath)
-      alert(`Selected asset: ${assetPath}`)
-      isDialogOpen.value = false // Auto-close like the real composable
-    }
-
-    const handleOpenWithCurrentValue = () => {
-      handleOpenDialog(
-        'CheckpointLoaderSimple',
-        'ckpt_name',
-        'realistic_vision_v5.safetensors'
-      )
-    }
-
-    return {
-      isDialogOpen,
-      currentNodeType,
-      currentInputName,
-      currentValue,
-      handleOpenDialog,
-      handleOpenWithCurrentValue,
-      handleCloseDialog,
-      handleAssetSelected,
-      mockAssets
-    }
-  },
-  template: `
-    <div class="relative">
-      <div class="p-8 space-y-4">
-        <h2 class="text-2xl font-bold mb-6">Asset Browser Dialog Demo</h2>
-
-        <div class="space-y-4">
-          <div>
-            <h3 class="text-lg font-semibold mb-2">Different Node Types</h3>
-            <div class="flex gap-3 flex-wrap">
-              <button
-                @click="handleOpenDialog('CheckpointLoaderSimple', 'ckpt_name')"
-                class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-              >
-                Browse Checkpoints
-              </button>
-              <button
-                @click="handleOpenDialog('VAELoader', 'vae_name')"
-                class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
-              >
-                Browse VAE
-              </button>
-              <button
-                @click="handleOpenDialog('ControlNetLoader', 'control_net_name')"
-                class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700"
-              >
-                Browse ControlNet
-              </button>
-            </div>
-          </div>
-
-          <div>
-            <h3 class="text-lg font-semibold mb-2">With Current Value</h3>
-            <button
-              @click="handleOpenWithCurrentValue"
-              class="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700"
-            >
-              Change Current Model
-            </button>
-            <p class="text-sm text-gray-600 mt-1">
-              Opens with "realistic_vision_v5.safetensors" as current value
-            </p>
-          </div>
-
-          <div class="mt-8 p-4 bg-gray-100 rounded">
-            <h4 class="font-semibold mb-2">Instructions:</h4>
-            <ul class="text-sm space-y-1">
-              <li>• Click any button to open the Asset Browser dialog</li>
-              <li>• Select an asset to see the callback in action</li>
-              <li>• Check the browser console for logged events</li>
-              <li>• Try toggling the left panel with different asset types</li>
-              <li>• Close button will work properly in this demo</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <!-- Dialog Modal Overlay -->
-      <div
-        v-if="isDialogOpen"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
-        @click.self="handleCloseDialog"
-      >
-        <div class="w-[80vw] h-[80vh] max-w-[80vw] max-h-[80vh] rounded-2xl overflow-hidden">
-          <AssetBrowserModal
-            :assets="mockAssets"
-            :node-type="currentNodeType"
-            :input-name="currentInputName"
-            :current-value="currentValue"
-            @asset-select="handleAssetSelected"
-            @close="handleCloseDialog"
-          />
-        </div>
-      </div>
-    </div>
-  `
-}
-
-const meta: Meta = {
-  title: 'Platform/Assets/useAssetBrowserDialog',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Demonstrates the AssetBrowserModal functionality as used by the useAssetBrowserDialog composable.'
-      }
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Demo: Story = {
-  render: () => ({
-    components: { DialogDemoComponent },
-    template: `
-      <div>
-        <DialogDemoComponent />
-
-        <!-- Code Example Section -->
-        <div class="p-8 border-t border-gray-200 bg-gray-50">
-          <h2 class="text-2xl font-bold mb-4">Code Example</h2>
-          <p class="text-gray-600 mb-4">
-            This is how you would use the composable in your component:
-          </p>
-          <div class="bg-white p-4 rounded-lg border shadow-sm">
-            <pre><code class="text-sm">import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
-
-export default {
-  setup() {
-    const assetBrowserDialog = useAssetBrowserDialog()
-
-    const openBrowser = () => {
-      assetBrowserDialog.show({
-        nodeType: 'CheckpointLoaderSimple',
-        inputName: 'ckpt_name',
-        currentValue: '',
-        onAssetSelected: (assetPath) => {
-          console.log('Selected:', assetPath)
-          // Update your component state
-        }
-      })
-    }
-
-    return { openBrowser }
-  }
-}</code></pre>
-          </div>
-          <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
-            <p class="text-sm text-blue-800">
-              <strong>💡 Try it:</strong> Use the interactive buttons above to see this code in action!
-            </p>
-          </div>
-        </div>
-      </div>
-    `
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Complete demo showing both interactive functionality and code examples for using useAssetBrowserDialog to open the Asset Browser modal programmatically.'
-      }
-    }
-  }
-}

src/platform/assets/composables/useAssetBrowserDialog.ts

@@ -1,66 +0,0 @@
-import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
-import { useDialogStore } from '@/stores/dialogStore'
-
-interface AssetBrowserDialogProps {
-  /** ComfyUI node type for context (e.g., 'CheckpointLoaderSimple') */
-  nodeType: string
-  /** Widget input name (e.g., 'ckpt_name') */
-  inputName: string
-  /** Current selected asset value */
-  currentValue?: string
-  /** Callback for when an asset is selected */
-  onAssetSelected?: (assetPath: string) => void
-}
-
-export const useAssetBrowserDialog = () => {
-  const dialogStore = useDialogStore()
-  const dialogKey = 'global-asset-browser'
-
-  function hide() {
-    dialogStore.closeDialog({ key: dialogKey })
-  }
-
-  function show(props: AssetBrowserDialogProps) {
-    const handleAssetSelected = (assetPath: string) => {
-      props.onAssetSelected?.(assetPath)
-      hide() // Auto-close on selection
-    }
-
-    const handleClose = () => {
-      hide()
-    }
-
-    // Default dialog configuration for AssetBrowserModal
-    const dialogComponentProps = {
-      headless: true,
-      modal: true,
-      closable: false,
-      pt: {
-        root: {
-          class: 'rounded-2xl overflow-hidden'
-        },
-        header: {
-          class: 'p-0 hidden'
-        },
-        content: {
-          class: 'p-0 m-0 h-full w-full'
-        }
-      }
-    }
-
-    dialogStore.showDialog({
-      key: dialogKey,
-      component: AssetBrowserModal,
-      props: {
-        nodeType: props.nodeType,
-        inputName: props.inputName,
-        currentValue: props.currentValue,
-        onSelect: handleAssetSelected,
-        onClose: handleClose
-      },
-      dialogComponentProps
-    })
-  }
-
-  return { show, hide }
-}

src/platform/assets/composables/useAssetFilterOptions.ts

@@ -1,56 +0,0 @@
-import { uniqWith } from 'es-toolkit'
-import { computed } from 'vue'
-
-import type { SelectOption } from '@/components/input/types'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
-/**
- * Composable that extracts available filter options from asset data
- * Provides reactive computed properties for file formats and base models
- */
-export function useAssetFilterOptions(assets: AssetItem[] = []) {
-  /**
-   * Extract unique file formats from asset names
-   * Returns sorted SelectOption array with extensions
-   */
-  const availableFileFormats = computed<SelectOption[]>(() => {
-    const extensions = assets
-      .map((asset) => {
-        const extension = asset.name.split('.').pop()
-        return extension && extension !== asset.name ? extension : null
-      })
-      .filter((extension): extension is string => extension !== null)
-
-    const uniqueExtensions = uniqWith(extensions, (a, b) => a === b)
-
-    return uniqueExtensions.sort().map((format) => ({
-      name: `.${format}`,
-      value: format
-    }))
-  })
-
-  /**
-   * Extract unique base models from asset user metadata
-   * Returns sorted SelectOption array with base model names
-   */
-  const availableBaseModels = computed<SelectOption[]>(() => {
-    const models = assets
-      .map((asset) => asset.user_metadata?.base_model)
-      .filter(
-        (baseModel): baseModel is string =>
-          baseModel !== undefined && typeof baseModel === 'string'
-      )
-
-    const uniqueModels = uniqWith(models, (a, b) => a === b)
-
-    return uniqueModels.sort().map((model) => ({
-      name: model,
-      value: model
-    }))
-  })
-
-  return {
-    availableFileFormats,
-    availableBaseModels
-  }
-}

src/platform/assets/fixtures/ui-mock-assets.ts

@@ -1,128 +0,0 @@
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
-// 🎭 OBVIOUSLY FAKE MOCK DATA - DO NOT USE IN PRODUCTION! 🎭
-const fakeFunnyModelNames = [
-  '🎯_totally_real_model_v420.69',
-  '🚀_definitely_not_fake_v999',
-  '🎪_super_legit_checkpoint_pro_max',
-  '🦄_unicorn_dreams_totally_real.model',
-  '🍕_pizza_generator_supreme',
-  '🎸_rock_star_fake_data_v1337',
-  '🌮_taco_tuesday_model_deluxe',
-  '🦖_dino_nugget_generator_v3',
-  '🎮_gamer_fuel_checkpoint_xl',
-  '🍄_mushroom_kingdom_diffusion',
-  '🏴‍☠️_pirate_treasure_model_arr',
-  '🦋_butterfly_effect_generator',
-  '🎺_jazz_hands_checkpoint_pro',
-  '🥨_pretzel_logic_model_v2',
-  '🌙_midnight_snack_generator',
-  '🎭_drama_llama_checkpoint',
-  '🧙‍♀️_wizard_hat_diffusion_xl',
-  '🎪_circus_peanut_model_v4',
-  '🦒_giraffe_neck_generator',
-  '🎲_random_stuff_checkpoint_max'
-]
-
-const obviouslyFakeDescriptions = [
-  '⚠️ FAKE DATA: Generates 100% authentic fake images with premium mock quality',
-  '🎭 MOCK ALERT: This totally real model creates absolutely genuine fake content',
-  '🚨 NOT REAL: Professional-grade fake imagery for your mock data needs',
-  '🎪 DEMO ONLY: Circus-quality fake generation with extra mock seasoning',
-  '🍕 FAKE FOOD: Generates delicious fake pizzas (not edible in reality)',
-  "🎸 MOCK ROCK: Creates fake rock stars who definitely don't exist",
-  '🌮 TACO FAKERY: Tuesday-themed fake tacos for your mock appetite',
-  '🦖 PREHISTORIC FAKE: Generates extinct fake dinosaurs for demo purposes',
-  '🎮 FAKE GAMING: Level up your mock data with obviously fake content',
-  '🍄 FUNGI FICTION: Magical fake mushrooms from the demo dimension',
-  '🏴‍☠️ FAKE TREASURE: Arr! This be mock data for ye demo needs, matey!',
-  '🦋 DEMO EFFECT: Small fake changes create big mock differences',
-  '🎺 JAZZ FAKERY: Smooth fake jazz for your mock listening pleasure',
-  '🥨 MOCK LOGIC: Twisted fake reasoning for your demo requirements',
-  '🌙 MIDNIGHT MOCK: Late-night fake snacks for your demo hunger',
-  '🎭 FAKE DRAMA: Over-the-top mock emotions for demo entertainment',
-  '🧙‍♀️ WIZARD MOCK: Magically fake spells cast with demo ingredients',
-  '🎪 CIRCUS FAKE: Big top mock entertainment under the demo tent',
-  '🦒 TALL FAKE: Reaches new heights of obviously fake content',
-  '🎲 RANDOM MOCK: Generates random fake stuff for your demo pleasure'
-]
-
-// API-compliant tag structure: first tag must be root (models/input/output), second is category
-const modelCategories = ['checkpoints', 'loras', 'embeddings', 'vae']
-const baseModels = ['sd15', 'sdxl', 'sd35']
-const fileExtensions = ['.safetensors', '.ckpt', '.pt']
-const mimeTypes = [
-  'application/octet-stream',
-  'application/x-pytorch',
-  'application/x-safetensors'
-]
-
-function getRandomElement<T>(array: T[]): T {
-  return array[Math.floor(Math.random() * array.length)]
-}
-
-function getRandomNumber(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-function getRandomISODate(): string {
-  const start = new Date('2024-01-01').getTime()
-  const end = new Date('2024-12-31').getTime()
-  const randomTime = start + Math.random() * (end - start)
-  return new Date(randomTime).toISOString()
-}
-
-function generateFakeAssetHash(): string {
-  const chars = '0123456789abcdef'
-  let hash = 'blake3:'
-  for (let i = 0; i < 64; i++) {
-    hash += chars[Math.floor(Math.random() * chars.length)]
-  }
-  return hash
-}
-
-// 🎭 CREATES OBVIOUSLY FAKE ASSETS FOR DEMO/TEST PURPOSES ONLY! 🎭
-export function createMockAssets(count: number = 20): AssetItem[] {
-  return Array.from({ length: count }, (_, index) => {
-    const category = getRandomElement(modelCategories)
-    const baseModel = getRandomElement(baseModels)
-    const extension = getRandomElement(fileExtensions)
-    const mimeType = getRandomElement(mimeTypes)
-    const sizeInBytes = getRandomNumber(
-      500 * 1024 * 1024,
-      8 * 1024 * 1024 * 1024
-    ) // 500MB to 8GB
-    const createdAt = getRandomISODate()
-    const updatedAt = createdAt
-    const lastAccessTime = getRandomISODate()
-
-    const fakeFileName = `${fakeFunnyModelNames[index]}${extension}`
-
-    return {
-      id: `mock-asset-uuid-${(index + 1).toString().padStart(3, '0')}-fake`,
-      name: fakeFileName,
-      asset_hash: generateFakeAssetHash(),
-      size: sizeInBytes,
-      mime_type: mimeType,
-      tags: [
-        'models', // Root tag (required first)
-        category, // Category tag (required second for models)
-        'fake-data', // Obviously fake tag
-        ...(Math.random() > 0.5 ? ['demo-mode'] : ['test-only']),
-        ...(Math.random() > 0.7 ? ['obviously-mock'] : [])
-      ],
-      preview_url: `/api/assets/mock-asset-uuid-${(index + 1).toString().padStart(3, '0')}-fake/content`,
-      created_at: createdAt,
-      updated_at: updatedAt,
-      last_access_time: lastAccessTime,
-      user_metadata: {
-        description: obviouslyFakeDescriptions[index],
-        base_model: baseModel,
-        original_name: fakeFunnyModelNames[index],
-        warning: '🚨 THIS IS FAKE DEMO DATA - NOT A REAL MODEL! 🚨'
-      }
-    }
-  })
-}
-
-export const mockAssets = createMockAssets(20)

src/platform/assets/schemas/assetSchema.ts

@@ -1,19 +1,12 @@
 import { z } from 'zod'
 
-// Zod schemas for asset API validation matching ComfyUI Assets REST API spec
+// Zod schemas for asset API validation
 const zAsset = z.object({
   id: z.string(),
   name: z.string(),
-  asset_hash: z.string(),
-  size: z.number(),
-  mime_type: z.string(),
   tags: z.array(z.string()),
-  preview_url: z.string().optional(),
-  created_at: z.string(),
-  updated_at: z.string(),
-  last_access_time: z.string(),
-  user_metadata: z.record(z.unknown()).optional(), // API allows arbitrary key-value pairs
-  preview_id: z.string().nullable().optional()
+  size: z.number(),
+  created_at: z.string().optional()
 })
 
 const zAssetResponse = z.object({
@@ -27,22 +20,19 @@ const zModelFolder = z.object({
   folders: z.array(z.string())
 })
 
-// Zod schema for ModelFile to align with interface
-const zModelFile = z.object({
-  name: z.string(),
-  pathIndex: z.number()
-})
-
 // Export schemas following repository patterns
 export const assetResponseSchema = zAssetResponse
 
 // Export types derived from Zod schemas
-export type AssetItem = z.infer<typeof zAsset>
 export type AssetResponse = z.infer<typeof zAssetResponse>
 export type ModelFolder = z.infer<typeof zModelFolder>
-export type ModelFile = z.infer<typeof zModelFile>
 
-// Legacy interface for backward compatibility (now aligned with Zod schema)
+// Common interfaces for API responses
+export interface ModelFile {
+  name: string
+  pathIndex: number
+}
+
 export interface ModelFolderInfo {
   name: string
   folders: string[]

src/platform/assets/services/assetService.ts

@@ -67,7 +67,7 @@ function createAssetService() {
     )
 
     // Blacklist directories we don't want to show
-    const blacklistedDirectories = new Set(['configs'])
+    const blacklistedDirectories = ['configs']
 
     // Extract directory names from assets that actually exist, exclude missing assets
     const discoveredFolders = new Set<string>(
@@ -75,7 +75,7 @@ function createAssetService() {
         ?.filter((asset) => !asset.tags.includes(MISSING_TAG))
         ?.flatMap((asset) => asset.tags)
         ?.filter(
-          (tag) => tag !== MODELS_TAG && !blacklistedDirectories.has(tag)
+          (tag) => tag !== MODELS_TAG && !blacklistedDirectories.includes(tag)
         ) ?? []
     )
 

src/platform/assets/utils/assetMetadataUtils.ts

@@ -1,27 +0,0 @@
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
-/**
- * Type-safe utilities for extracting metadata from assets
- */
-
-/**
- * Safely extracts string description from asset metadata
- * @param asset - The asset to extract description from
- * @returns The description string or null if not present/not a string
- */
-export function getAssetDescription(asset: AssetItem): string | null {
-  return typeof asset.user_metadata?.description === 'string'
-    ? asset.user_metadata.description
-    : null
-}
-
-/**
- * Safely extracts string base_model from asset metadata
- * @param asset - The asset to extract base_model from
- * @returns The base_model string or null if not present/not a string
- */
-export function getAssetBaseModel(asset: AssetItem): string | null {
-  return typeof asset.user_metadata?.base_model === 'string'
-    ? asset.user_metadata.base_model
-    : null
-}

src/renderer/core/layout/store/layoutStore.ts

@@ -5,7 +5,7 @@
  * CRDT ensures conflict-free operations for both single and multi-user scenarios.
  */
 import log from 'loglevel'
-import { type ComputedRef, type Ref, computed, customRef, ref } from 'vue'
+import { type ComputedRef, type Ref, computed, customRef } from 'vue'
 import * as Y from 'yjs'
 
 import { ACTOR_CONFIG } from '@/renderer/core/layout/constants'
@@ -134,9 +134,6 @@ class LayoutStoreImpl implements LayoutStore {
   private slotSpatialIndex: SpatialIndexManager // For slots
   private rerouteSpatialIndex: SpatialIndexManager // For reroutes
 
-  // Vue dragging state for selection toolbox (public ref for direct mutation)
-  public isDraggingVueNodes = ref(false)
-
   constructor() {
     // Initialize Yjs data structures
     this.ynodes = this.ydoc.getMap('nodes')

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -10,9 +10,7 @@
         'bg-white dark-theme:bg-charcoal-800',
         'lg-node absolute rounded-2xl',
         'border border-solid border-sand-100 dark-theme:border-charcoal-600',
-        // hover (only when node should handle events)
-        shouldHandleNodePointerEvents &&
-          'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
+        'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
         'outline-transparent -outline-offset-2 outline-2',
         borderClass,
         outlineClass,
@@ -23,9 +21,7 @@
           'will-change-transform': isDragging
         },
         lodCssClass,
-        shouldHandleNodePointerEvents
-          ? 'pointer-events-auto'
-          : 'pointer-events-none'
+        'pointer-events-auto'
       )
     "
     :style="[
@@ -38,7 +34,6 @@
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
-    @wheel="handleWheel"
   >
     <div class="flex items-center">
       <template v-if="isCollapsed">
@@ -152,9 +147,7 @@ import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
 import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
 import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
@@ -243,14 +236,6 @@ const hasAnyError = computed(
 
 const bypassed = computed((): boolean => nodeData.mode === 4)
 
-// Use canvas interactions for proper wheel event handling and pointer event capture control
-const {
-  handleWheel,
-  handlePointer,
-  forwardEventToCanvas,
-  shouldHandleNodePointerEvents
-} = useCanvasInteractions()
-
 // LOD (Level of Detail) system based on zoom level
 const zoomRef = toRef(() => zoomLevel)
 const {
@@ -376,27 +361,14 @@ const handlePointerDown = (event: PointerEvent) => {
     return
   }
 
-  // Don't handle pointer events when canvas is in panning mode - forward to canvas instead
-  if (!shouldHandleNodePointerEvents.value) {
-    forwardEventToCanvas(event)
-    return
-  }
-
   // Start drag using layout system
   isDragging.value = true
-
-  // Set Vue node dragging state for selection toolbox
-  layoutStore.isDraggingVueNodes.value = true
-
   startDrag(event)
   lastY.value = event.clientY
   lastX.value = event.clientX
 }
 
 const handlePointerMove = (event: PointerEvent) => {
-  // Check if this should be forwarded to canvas (e.g., space panning, middle mouse)
-  handlePointer(event)
-
   if (isDragging.value) {
     void handleLayoutDrag(event)
   }
@@ -406,17 +378,7 @@ const handlePointerUp = (event: PointerEvent) => {
   if (isDragging.value) {
     isDragging.value = false
     void endDrag(event)
-
-    // Clear Vue node dragging state for selection toolbox
-    layoutStore.isDraggingVueNodes.value = false
   }
-
-  // Don't emit node-click when canvas is in panning mode - forward to canvas instead
-  if (!shouldHandleNodePointerEvents.value) {
-    forwardEventToCanvas(event)
-    return
-  }
-
   // Emit node-click for selection handling in GraphCanvas
   const dx = event.clientX - lastX.value
   const dy = event.clientY - lastY.value
@@ -439,12 +401,6 @@ const handleSlotClick = (
     console.warn('LGraphNode: nodeData is null/undefined in handleSlotClick')
     return
   }
-
-  // Don't handle slot clicks when canvas is in panning mode
-  if (!shouldHandleNodePointerEvents.value) {
-    return
-  }
-
   emit('slot-click', event, nodeData, slotIndex, isInput)
 }
 

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -2,20 +2,7 @@
   <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
     {{ $t('Node Widgets Error') }}
   </div>
-  <div
-    v-else
-    :class="
-      cn(
-        'lg-node-widgets flex flex-col gap-2 pr-4',
-        shouldHandleNodePointerEvents
-          ? 'pointer-events-auto'
-          : 'pointer-events-none'
-      )
-    "
-    @pointerdown="handleWidgetPointerEvent"
-    @pointermove="handleWidgetPointerEvent"
-    @pointerup="handleWidgetPointerEvent"
-  >
+  <div v-else class="lg-node-widgets flex flex-col gap-2 pr-4">
     <div
       v-for="(widget, index) in processedWidgets"
       :key="`widget-${index}-${widget.name}`"
@@ -59,7 +46,6 @@ import type {
 } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 // Import widget components directly
 import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
@@ -69,7 +55,6 @@ import {
   shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
-import { cn } from '@/utils/tailwindUtil'
 
 import InputSlot from './InputSlot.vue'
 
@@ -82,14 +67,6 @@ interface NodeWidgetsProps {
 
 const props = defineProps<NodeWidgetsProps>()
 
-const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
-  useCanvasInteractions()
-const handleWidgetPointerEvent = (event: PointerEvent) => {
-  if (!shouldHandleNodePointerEvents.value) {
-    forwardEventToCanvas(event)
-  }
-}
-
 // Error boundary implementation
 const renderError = ref<string | null>(null)
 

src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts

@@ -12,7 +12,6 @@ import type { Ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
 
 interface NodeManager {
@@ -22,7 +21,6 @@ interface NodeManager {
 export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
   const canvasStore = useCanvasStore()
   const { bringNodeToFront } = useNodeZIndex()
-  const { shouldHandleNodePointerEvents } = useCanvasInteractions()
 
   /**
    * Handle node selection events
@@ -33,8 +31,6 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     nodeData: VueNodeData,
     wasDragging: boolean
   ) => {
-    if (!shouldHandleNodePointerEvents.value) return
-
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
@@ -73,8 +69,6 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Uses LiteGraph's native collapse method for proper state management
    */
   const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
-    if (!shouldHandleNodePointerEvents.value) return
-
     if (!nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeId)
@@ -92,8 +86,6 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Updates the title in LiteGraph for persistence across sessions
    */
   const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
-    if (!shouldHandleNodePointerEvents.value) return
-
     if (!nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeId)
@@ -111,8 +103,6 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     event: PointerEvent,
     nodeData: VueNodeData
   ) => {
-    if (!shouldHandleNodePointerEvents.value) return
-
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
@@ -133,8 +123,6 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Integrates with LiteGraph's context menu system
    */
   const handleNodeRightClick = (event: PointerEvent, nodeData: VueNodeData) => {
-    if (!shouldHandleNodePointerEvents.value) return
-
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
@@ -157,8 +145,6 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Prepares node for dragging and sets appropriate visual state
    */
   const handleNodeDragStart = (event: DragEvent, nodeData: VueNodeData) => {
-    if (!shouldHandleNodePointerEvents.value) return
-
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
@@ -187,8 +173,6 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Useful for selection toolbox or area selection
    */
   const selectNodes = (nodeIds: string[], addToSelection = false) => {
-    if (!shouldHandleNodePointerEvents.value) return
-
     if (!canvasStore.canvas || !nodeManager.value) return
 
     if (!addToSelection) {
@@ -209,8 +193,6 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Deselect specific nodes
    */
   const deselectNodes = (nodeIds: string[]) => {
-    if (!shouldHandleNodePointerEvents.value) return
-
     if (!canvasStore.canvas || !nodeManager.value) return
 
     nodeIds.forEach((nodeId) => {

src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts

@@ -1,337 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import ImageCompare from 'primevue/imagecompare'
-import { describe, expect, it } from 'vitest'
-
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-import WidgetImageCompare, {
-  type ImageCompareValue
-} from './WidgetImageCompare.vue'
-
-describe('WidgetImageCompare Display', () => {
-  const createMockWidget = (
-    value: ImageCompareValue | string,
-    options: SimplifiedWidget['options'] = {}
-  ): SimplifiedWidget<ImageCompareValue | string> => ({
-    name: 'test_imagecompare',
-    type: 'object',
-    value,
-    options
-  })
-
-  const mountComponent = (
-    widget: SimplifiedWidget<ImageCompareValue | string>,
-    readonly = false
-  ) => {
-    return mount(WidgetImageCompare, {
-      global: {
-        plugins: [PrimeVue],
-        components: { ImageCompare }
-      },
-      props: {
-        widget,
-        readonly
-      }
-    })
-  }
-
-  describe('Component Rendering', () => {
-    it('renders imagecompare component with proper structure and styling', () => {
-      const value: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg'
-      }
-      const widget = createMockWidget(value)
-      const wrapper = mountComponent(widget)
-
-      // Component exists
-      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
-      expect(imageCompare.exists()).toBe(true)
-
-      // Renders both images with correct URLs
-      const images = wrapper.findAll('img')
-      expect(images).toHaveLength(2)
-      expect(images[0].attributes('src')).toBe('https://example.com/before.jpg')
-      expect(images[1].attributes('src')).toBe('https://example.com/after.jpg')
-
-      // Images have proper styling classes
-      images.forEach((img) => {
-        expect(img.classes()).toContain('object-cover')
-        expect(img.classes()).toContain('w-full')
-        expect(img.classes()).toContain('h-full')
-      })
-    })
-  })
-
-  describe('Object Value Input', () => {
-    it('handles alt text correctly - custom, default, and empty', () => {
-      // Test custom alt text
-      const customAltValue: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg',
-        beforeAlt: 'Original design',
-        afterAlt: 'Updated design'
-      }
-      const customWrapper = mountComponent(createMockWidget(customAltValue))
-      const customImages = customWrapper.findAll('img')
-      expect(customImages[0].attributes('alt')).toBe('Original design')
-      expect(customImages[1].attributes('alt')).toBe('Updated design')
-
-      // Test default alt text
-      const defaultAltValue: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg'
-      }
-      const defaultWrapper = mountComponent(createMockWidget(defaultAltValue))
-      const defaultImages = defaultWrapper.findAll('img')
-      expect(defaultImages[0].attributes('alt')).toBe('Before image')
-      expect(defaultImages[1].attributes('alt')).toBe('After image')
-
-      // Test empty string alt text (falls back to default)
-      const emptyAltValue: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg',
-        beforeAlt: '',
-        afterAlt: ''
-      }
-      const emptyWrapper = mountComponent(createMockWidget(emptyAltValue))
-      const emptyImages = emptyWrapper.findAll('img')
-      expect(emptyImages[0].attributes('alt')).toBe('Before image')
-      expect(emptyImages[1].attributes('alt')).toBe('After image')
-    })
-
-    it('handles missing and partial image URLs gracefully', () => {
-      // Missing URLs
-      const missingValue: ImageCompareValue = { before: '', after: '' }
-      const missingWrapper = mountComponent(createMockWidget(missingValue))
-      const missingImages = missingWrapper.findAll('img')
-      expect(missingImages[0].attributes('src')).toBe('')
-      expect(missingImages[1].attributes('src')).toBe('')
-
-      // Partial URLs
-      const partialValue: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: ''
-      }
-      const partialWrapper = mountComponent(createMockWidget(partialValue))
-      const partialImages = partialWrapper.findAll('img')
-      expect(partialImages[0].attributes('src')).toBe(
-        'https://example.com/before.jpg'
-      )
-      expect(partialImages[1].attributes('src')).toBe('')
-    })
-  })
-
-  describe('String Value Input', () => {
-    it('handles string value as before image only', () => {
-      const value = 'https://example.com/single.jpg'
-      const widget = createMockWidget(value)
-      const wrapper = mountComponent(widget)
-
-      const images = wrapper.findAll('img')
-      expect(images[0].attributes('src')).toBe('https://example.com/single.jpg')
-      expect(images[1].attributes('src')).toBe('')
-    })
-
-    it('uses default alt text for string values', () => {
-      const value = 'https://example.com/single.jpg'
-      const widget = createMockWidget(value)
-      const wrapper = mountComponent(widget)
-
-      const images = wrapper.findAll('img')
-      expect(images[0].attributes('alt')).toBe('Before image')
-      expect(images[1].attributes('alt')).toBe('After image')
-    })
-  })
-
-  describe('Widget Options Handling', () => {
-    it('passes through accessibility options', () => {
-      const value: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg'
-      }
-      const widget = createMockWidget(value, {
-        tabindex: 1,
-        ariaLabel: 'Compare images',
-        ariaLabelledby: 'compare-label'
-      })
-      const wrapper = mountComponent(widget)
-
-      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
-      expect(imageCompare.props('tabindex')).toBe(1)
-      expect(imageCompare.props('ariaLabel')).toBe('Compare images')
-      expect(imageCompare.props('ariaLabelledby')).toBe('compare-label')
-    })
-
-    it('uses default tabindex when not provided', () => {
-      const value: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg'
-      }
-      const widget = createMockWidget(value)
-      const wrapper = mountComponent(widget)
-
-      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
-      expect(imageCompare.props('tabindex')).toBe(0)
-    })
-
-    it('passes through PrimeVue specific options', () => {
-      const value: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg'
-      }
-      const widget = createMockWidget(value, {
-        unstyled: true,
-        pt: { root: { class: 'custom-class' } },
-        ptOptions: { mergeSections: true }
-      })
-      const wrapper = mountComponent(widget)
-
-      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
-      expect(imageCompare.props('unstyled')).toBe(true)
-      expect(imageCompare.props('pt')).toEqual({
-        root: { class: 'custom-class' }
-      })
-      expect(imageCompare.props('ptOptions')).toEqual({ mergeSections: true })
-    })
-  })
-
-  describe('Readonly Mode', () => {
-    it('renders normally in readonly mode (no interaction restrictions)', () => {
-      const value: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg'
-      }
-      const widget = createMockWidget(value)
-      const wrapper = mountComponent(widget, true)
-
-      // ImageCompare is display-only, readonly doesn't affect rendering
-      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
-      expect(imageCompare.exists()).toBe(true)
-
-      const images = wrapper.findAll('img')
-      expect(images).toHaveLength(2)
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('handles null or undefined widget value', () => {
-      const widget = createMockWidget('')
-      const wrapper = mountComponent(widget)
-
-      const images = wrapper.findAll('img')
-      expect(images[0].attributes('src')).toBe('')
-      expect(images[1].attributes('src')).toBe('')
-      expect(images[0].attributes('alt')).toBe('Before image')
-      expect(images[1].attributes('alt')).toBe('After image')
-    })
-
-    it('handles empty object value', () => {
-      const value: ImageCompareValue = {} as ImageCompareValue
-      const widget = createMockWidget(value)
-      const wrapper = mountComponent(widget)
-
-      const images = wrapper.findAll('img')
-      expect(images[0].attributes('src')).toBe('')
-      expect(images[1].attributes('src')).toBe('')
-    })
-
-    it('handles malformed object value', () => {
-      const value = { randomProp: 'test', before: '', after: '' }
-      const widget = createMockWidget(value)
-      const wrapper = mountComponent(widget)
-
-      const images = wrapper.findAll('img')
-      expect(images[0].attributes('src')).toBe('')
-      expect(images[1].attributes('src')).toBe('')
-    })
-
-    it('handles special content - long URLs, special characters, and long alt text', () => {
-      // Test very long URLs
-      const longUrl = 'https://example.com/' + 'a'.repeat(1000) + '.jpg'
-      const longUrlValue: ImageCompareValue = {
-        before: longUrl,
-        after: longUrl
-      }
-      const longUrlWrapper = mountComponent(createMockWidget(longUrlValue))
-      const longUrlImages = longUrlWrapper.findAll('img')
-      expect(longUrlImages[0].attributes('src')).toBe(longUrl)
-      expect(longUrlImages[1].attributes('src')).toBe(longUrl)
-
-      // Test special characters in URLs
-      const specialUrl =
-        'https://example.com/path with spaces & symbols!@#$.jpg'
-      const specialUrlValue: ImageCompareValue = {
-        before: specialUrl,
-        after: specialUrl
-      }
-      const specialUrlWrapper = mountComponent(
-        createMockWidget(specialUrlValue)
-      )
-      const specialUrlImages = specialUrlWrapper.findAll('img')
-      expect(specialUrlImages[0].attributes('src')).toBe(specialUrl)
-      expect(specialUrlImages[1].attributes('src')).toBe(specialUrl)
-
-      // Test very long alt text
-      const longAlt =
-        'Very long alt text that exceeds normal length: ' +
-        'description '.repeat(50)
-      const longAltValue: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg',
-        beforeAlt: longAlt,
-        afterAlt: longAlt
-      }
-      const longAltWrapper = mountComponent(createMockWidget(longAltValue))
-      const longAltImages = longAltWrapper.findAll('img')
-      expect(longAltImages[0].attributes('alt')).toBe(longAlt)
-      expect(longAltImages[1].attributes('alt')).toBe(longAlt)
-    })
-  })
-
-  describe('Template Structure', () => {
-    it('correctly assigns images to left and right template slots', () => {
-      const value: ImageCompareValue = {
-        before: 'https://example.com/before.jpg',
-        after: 'https://example.com/after.jpg'
-      }
-      const widget = createMockWidget(value)
-      const wrapper = mountComponent(widget)
-
-      const images = wrapper.findAll('img')
-      // First image (before) should be in left template slot
-      expect(images[0].attributes('src')).toBe('https://example.com/before.jpg')
-      // Second image (after) should be in right template slot
-      expect(images[1].attributes('src')).toBe('https://example.com/after.jpg')
-    })
-  })
-
-  describe('Integration', () => {
-    it('works with various URL types - data URLs and blob URLs', () => {
-      // Test data URLs
-      const dataUrl =
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=='
-      const dataUrlValue: ImageCompareValue = {
-        before: dataUrl,
-        after: dataUrl
-      }
-      const dataUrlWrapper = mountComponent(createMockWidget(dataUrlValue))
-      const dataUrlImages = dataUrlWrapper.findAll('img')
-      expect(dataUrlImages[0].attributes('src')).toBe(dataUrl)
-      expect(dataUrlImages[1].attributes('src')).toBe(dataUrl)
-
-      // Test blob URLs
-      const blobUrl =
-        'blob:http://example.com/12345678-1234-1234-1234-123456789012'
-      const blobUrlValue: ImageCompareValue = {
-        before: blobUrl,
-        after: blobUrl
-      }
-      const blobUrlWrapper = mountComponent(createMockWidget(blobUrlValue))
-      const blobUrlImages = blobUrlWrapper.findAll('img')
-      expect(blobUrlImages[0].attributes('src')).toBe(blobUrl)
-      expect(blobUrlImages[1].attributes('src')).toBe(blobUrl)
-    })
-  })
-})

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

@@ -30,7 +30,7 @@ import { computed } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-export interface ImageCompareValue {
+interface ImageCompareValue {
   before: string
   after: string
   beforeAlt?: string

src/router.ts

@@ -115,12 +115,6 @@ const router = createRouter({
           name: 'DesktopUpdateView',
           component: () => import('@/views/DesktopUpdateView.vue'),
           beforeEnter: guardElectronAccess
-        },
-        {
-          path: 'desktop-dialog/:dialogId',
-          name: 'DesktopDialogView',
-          component: () => import('@/views/DesktopDialogView.vue'),
-          beforeEnter: guardElectronAccess
         }
       ]
     }

src/services/mediaCacheService.ts

@@ -113,7 +113,7 @@ class MediaCacheService {
 
     try {
       // Fetch the media
-      const response = await fetch(src, { cache: 'force-cache' })
+      const response = await fetch(src)
       if (!response.ok) {
         throw new Error(`Failed to fetch: ${response.status}`)
       }

src/stores/firebaseAuthStore.ts

@@ -6,10 +6,12 @@ import {
   GoogleAuthProvider,
   type User,
   type UserCredential,
+  browserLocalPersistence,
   createUserWithEmailAndPassword,
   deleteUser,
   onAuthStateChanged,
   sendPasswordResetEmail,
+  setPersistence,
   signInWithEmailAndPassword,
   signInWithPopup,
   signOut,
@@ -60,12 +62,10 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
 
   // Providers
   const googleProvider = new GoogleAuthProvider()
-  googleProvider.addScope('email')
   googleProvider.setCustomParameters({
     prompt: 'select_account'
   })
   const githubProvider = new GithubAuthProvider()
-  githubProvider.addScope('user:email')
   githubProvider.setCustomParameters({
     prompt: 'select_account'
   })
@@ -80,6 +80,8 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
   // Retrieves the Firebase Auth instance. Returns `null` on the server.
   // When using this function on the client in TypeScript, you can force the type with `useFirebaseAuth()!`.
   const auth = useFirebaseAuth()!
+  // Set persistence to localStorage (works in both browser and Electron)
+  void setPersistence(auth, browserLocalPersistence)
 
   onAuthStateChanged(auth, (user) => {
     currentUser.value = user

src/views/DesktopDialogView.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
-    <h1 class="font-inter font-semibold text-xl m-0 italic">
-      {{ t(`desktopDialogs.${id}.title`, title) }}
-    </h1>
-    <p class="whitespace-pre-wrap">
-      {{ t(`desktopDialogs.${id}.message`, message) }}
-    </p>
-    <div class="flex w-full gap-2">
-      <Button
-        v-for="button in buttons"
-        :key="button.label"
-        class="rounded-lg first:mr-auto"
-        :label="
-          t(
-            `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
-            button.label
-          )
-        "
-        :severity="button.severity ?? 'secondary'"
-        @click="handleButtonClick(button)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useRoute } from 'vue-router'
-
-import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
-import { t } from '@/i18n'
-import { electronAPI } from '@/utils/envUtil'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-
-const route = useRoute()
-const { id, title, message, buttons } = getDialog(route.params.dialogId)
-
-const handleButtonClick = async (button: DialogAction) => {
-  await electronAPI().Dialog.clickButton(button.returnValue)
-}
-</script>
-
-<style scoped>
-@reference '../assets/css/style.css';
-
-.p-button-secondary {
-  @apply text-white border-none bg-neutral-600;
-}
-
-.p-button-secondary:hover {
-  @apply bg-neutral-550;
-}
-
-.p-button-secondary:active {
-  @apply bg-neutral-500;
-}
-
-.p-button-danger {
-  @apply bg-coral-red-600;
-}
-
-.p-button-danger:hover {
-  @apply bg-coral-red-500;
-}
-
-.p-button-danger:active {
-  @apply bg-coral-red-400;
-}
-</style>

tailwind.config.ts

@@ -6,16 +6,6 @@ import { iconCollection } from './build/customIconCollection'
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
-  safelist: [
-    'icon-[lucide--folder]',
-    'icon-[lucide--package]',
-    'icon-[lucide--image]',
-    'icon-[lucide--video]',
-    'icon-[lucide--box]',
-    'icon-[lucide--audio-waveform]',
-    'icon-[lucide--message-circle]'
-  ],
-
   plugins: [
     addDynamicIconSelectors({
       iconSets: {

tests-ui/platform/assets/components/AssetBrowserModal.test.ts

@@ -1,304 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
-import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
-// Mock external dependencies with minimal functionality needed for business logic tests
-vi.mock('@/components/input/SearchBox.vue', () => ({
-  default: {
-    name: 'SearchBox',
-    props: ['modelValue', 'size', 'placeholder', 'class'],
-    emits: ['update:modelValue'],
-    template: `
-      <input
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-        data-testid="search-box"
-      />
-    `
-  }
-}))
-
-vi.mock('@/components/widget/layout/BaseModalLayout.vue', () => ({
-  default: {
-    name: 'BaseModalLayout',
-    props: ['contentTitle'],
-    emits: ['close'],
-    template: `
-      <div data-testid="base-modal-layout">
-        <div v-if="$slots.leftPanel" data-testid="left-panel">
-          <slot name="leftPanel" />
-        </div>
-        <div data-testid="header">
-          <slot name="header" />
-        </div>
-        <div data-testid="content">
-          <slot name="content" />
-        </div>
-      </div>
-    `
-  }
-}))
-
-vi.mock('@/components/widget/panel/LeftSidePanel.vue', () => ({
-  default: {
-    name: 'LeftSidePanel',
-    props: ['modelValue', 'navItems'],
-    emits: ['update:modelValue'],
-    template: `
-      <div data-testid="left-side-panel">
-        <button
-          v-for="item in navItems"
-          :key="item.id"
-          @click="$emit('update:modelValue', item.id)"
-          :data-testid="'nav-item-' + item.id"
-          :class="{ active: modelValue === item.id }"
-        >
-          {{ item.label }}
-        </button>
-      </div>
-    `
-  }
-}))
-
-vi.mock('@/platform/assets/components/AssetGrid.vue', () => ({
-  default: {
-    name: 'AssetGrid',
-    props: ['assets'],
-    emits: ['asset-select'],
-    template: `
-      <div data-testid="asset-grid">
-        <div
-          v-for="asset in assets"
-          :key="asset.id"
-          @click="$emit('asset-select', asset)"
-          :data-testid="'asset-' + asset.id"
-          class="asset-card"
-        >
-          {{ asset.name }}
-        </div>
-        <div v-if="assets.length === 0" data-testid="empty-state">
-          No assets found
-        </div>
-      </div>
-    `
-  }
-}))
-
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string) => key
-  })
-}))
-
-describe('AssetBrowserModal', () => {
-  const createTestAsset = (
-    id: string,
-    name: string,
-    category: string
-  ): AssetItem => ({
-    id,
-    name,
-    asset_hash: `blake3:${id.padEnd(64, '0')}`,
-    size: 1024000,
-    mime_type: 'application/octet-stream',
-    tags: ['models', category, 'test'],
-    preview_url: `/api/assets/${id}/content`,
-    created_at: '2024-01-01T00:00:00Z',
-    updated_at: '2024-01-01T00:00:00Z',
-    last_access_time: '2024-01-01T00:00:00Z',
-    user_metadata: {
-      description: `Test ${name}`,
-      base_model: 'sd15'
-    }
-  })
-
-  const createWrapper = (
-    assets: AssetItem[] = [],
-    props: Record<string, unknown> = {}
-  ) => {
-    const pinia = createPinia()
-    setActivePinia(pinia)
-
-    return mount(AssetBrowserModal, {
-      props: {
-        assets: assets,
-        ...props
-      },
-      global: {
-        plugins: [pinia],
-        stubs: {
-          'i-lucide:folder': {
-            template: '<div data-testid="folder-icon"></div>'
-          }
-        },
-        mocks: {
-          $t: (key: string) => key
-        }
-      }
-    })
-  }
-
-  describe('Search Functionality', () => {
-    it('filters assets when search query changes', async () => {
-      const assets = [
-        createTestAsset('asset1', 'Checkpoint Model A', 'checkpoints'),
-        createTestAsset('asset2', 'Checkpoint Model B', 'checkpoints'),
-        createTestAsset('asset3', 'LoRA Model C', 'loras')
-      ]
-      const wrapper = createWrapper(assets)
-
-      const searchBox = wrapper.find('[data-testid="search-box"]')
-
-      // Search for "Checkpoint"
-      await searchBox.setValue('Checkpoint')
-      await nextTick()
-
-      // Should filter to only checkpoint assets
-      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      const filteredAssets = assetGrid.props('assets') as AssetDisplayItem[]
-
-      expect(filteredAssets.length).toBe(2)
-      expect(
-        filteredAssets.every((asset: AssetDisplayItem) =>
-          asset.name.includes('Checkpoint')
-        )
-      ).toBe(true)
-    })
-
-    it('search is case insensitive', async () => {
-      const assets = [
-        createTestAsset('asset1', 'LoRA Model C', 'loras'),
-        createTestAsset('asset2', 'Checkpoint Model', 'checkpoints')
-      ]
-      const wrapper = createWrapper(assets)
-
-      const searchBox = wrapper.find('[data-testid="search-box"]')
-
-      // Search with different case
-      await searchBox.setValue('lora')
-      await nextTick()
-
-      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      const filteredAssets = assetGrid.props('assets') as AssetDisplayItem[]
-
-      expect(filteredAssets.length).toBe(1)
-      expect(filteredAssets[0].name).toContain('LoRA')
-    })
-
-    it('shows empty state when search has no results', async () => {
-      const assets = [
-        createTestAsset('asset1', 'Checkpoint Model', 'checkpoints')
-      ]
-      const wrapper = createWrapper(assets)
-
-      const searchBox = wrapper.find('[data-testid="search-box"]')
-
-      // Search for something that doesn't exist
-      await searchBox.setValue('nonexistent')
-      await nextTick()
-
-      expect(wrapper.find('[data-testid="empty-state"]').exists()).toBe(true)
-    })
-  })
-
-  describe('Category Navigation', () => {
-    it('filters assets by selected category', async () => {
-      const assets = [
-        createTestAsset('asset1', 'Checkpoint Model A', 'checkpoints'),
-        createTestAsset('asset2', 'LoRA Model C', 'loras'),
-        createTestAsset('asset3', 'VAE Model D', 'vae')
-      ]
-      const wrapper = createWrapper(assets, { showLeftPanel: true })
-
-      // Wait for Vue reactivity and component mounting
-      await nextTick()
-
-      // Check if left panel exists first (since we have multiple categories)
-      const leftPanel = wrapper.find('[data-testid="left-panel"]')
-      expect(leftPanel.exists()).toBe(true)
-
-      // Check if the nav item exists before clicking
-      const lorasNavItem = wrapper.find('[data-testid="nav-item-loras"]')
-      expect(lorasNavItem.exists()).toBe(true)
-
-      // Click the loras category
-      await lorasNavItem.trigger('click')
-      await nextTick()
-
-      // Should filter to only LoRA assets
-      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
-      const filteredAssets = assetGrid.props('assets') as AssetDisplayItem[]
-
-      expect(filteredAssets.length).toBe(1)
-      expect(filteredAssets[0].name).toContain('LoRA')
-    })
-  })
-
-  describe('Asset Selection', () => {
-    it('emits asset-select event when asset is selected', async () => {
-      const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
-      const wrapper = createWrapper(assets)
-
-      // Click on first asset
-      await wrapper.find('[data-testid="asset-asset1"]').trigger('click')
-
-      const emitted = wrapper.emitted('asset-select')
-      expect(emitted).toBeDefined()
-      expect(emitted).toHaveLength(1)
-
-      const emittedAsset = emitted![0][0] as AssetDisplayItem
-      expect(emittedAsset.id).toBe('asset1')
-    })
-
-    it('executes onSelect callback when provided', async () => {
-      const onSelectSpy = vi.fn()
-      const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
-      const wrapper = createWrapper(assets, { onSelect: onSelectSpy })
-
-      // Click on first asset
-      await wrapper.find('[data-testid="asset-asset1"]').trigger('click')
-
-      expect(onSelectSpy).toHaveBeenCalledWith('Test Model')
-    })
-  })
-
-  describe('Left Panel Conditional Logic', () => {
-    it('hides left panel by default when showLeftPanel prop is undefined', () => {
-      const singleCategoryAssets = [
-        createTestAsset('single1', 'Asset 1', 'checkpoints'),
-        createTestAsset('single2', 'Asset 2', 'checkpoints')
-      ]
-      const wrapper = createWrapper(singleCategoryAssets)
-
-      expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(false)
-    })
-
-    it('shows left panel when showLeftPanel prop is explicitly true', () => {
-      const singleCategoryAssets = [
-        createTestAsset('single1', 'Asset 1', 'checkpoints')
-      ]
-
-      // Force show even with single category
-      const wrapper = createWrapper(singleCategoryAssets, {
-        showLeftPanel: true
-      })
-      expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(true)
-
-      // Force hide even with multiple categories
-      wrapper.unmount()
-      const multiCategoryAssets = [
-        createTestAsset('asset1', 'Checkpoint', 'checkpoints'),
-        createTestAsset('asset2', 'LoRA', 'loras')
-      ]
-      const wrapper2 = createWrapper(multiCategoryAssets, {
-        showLeftPanel: false
-      })
-      expect(wrapper2.find('[data-testid="left-panel"]').exists()).toBe(false)
-    })
-  })
-})

tests-ui/platform/assets/components/AssetFilterBar.test.ts

@@ -1,138 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
-import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vue'
-
-// Mock components with minimal functionality for business logic testing
-vi.mock('@/components/input/MultiSelect.vue', () => ({
-  default: {
-    name: 'MultiSelect',
-    props: {
-      modelValue: Array,
-      label: String,
-      options: Array,
-      class: String
-    },
-    emits: ['update:modelValue'],
-    template: `
-      <div data-testid="multi-select">
-        <select multiple @change="$emit('update:modelValue', Array.from($event.target.selectedOptions).map(o => ({ name: o.text, value: o.value })))">
-          <option v-for="option in options" :key="option.value" :value="option.value">
-            {{ option.name }}
-          </option>
-        </select>
-      </div>
-    `
-  }
-}))
-
-vi.mock('@/components/input/SingleSelect.vue', () => ({
-  default: {
-    name: 'SingleSelect',
-    props: {
-      modelValue: String,
-      label: String,
-      options: Array,
-      class: String
-    },
-    emits: ['update:modelValue'],
-    template: `
-      <div data-testid="single-select">
-        <select @change="$emit('update:modelValue', $event.target.value)">
-          <option v-for="option in options" :key="option.value" :value="option.value">
-            {{ option.name }}
-          </option>
-        </select>
-      </div>
-    `
-  }
-}))
-
-// Test factory functions
-
-describe('AssetFilterBar', () => {
-  describe('Filter State Management', () => {
-    it('maintains correct initial state', () => {
-      const wrapper = mount(AssetFilterBar)
-
-      // Test initial state through component props
-      const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
-      const singleSelect = wrapper.findComponent({ name: 'SingleSelect' })
-
-      expect(multiSelects[0].props('modelValue')).toEqual([])
-      expect(multiSelects[1].props('modelValue')).toEqual([])
-      expect(singleSelect.props('modelValue')).toBe('name-asc')
-    })
-
-    it('handles multiple simultaneous filter changes correctly', async () => {
-      const wrapper = mount(AssetFilterBar)
-
-      // Update file formats
-      const fileFormatSelect = wrapper.findAllComponents({
-        name: 'MultiSelect'
-      })[0]
-      await fileFormatSelect.vm.$emit('update:modelValue', [
-        { name: '.ckpt', value: 'ckpt' },
-        { name: '.safetensors', value: 'safetensors' }
-      ])
-
-      await nextTick()
-
-      // Update base models
-      const baseModelSelect = wrapper.findAllComponents({
-        name: 'MultiSelect'
-      })[1]
-      await baseModelSelect.vm.$emit('update:modelValue', [
-        { name: 'SD XL', value: 'sdxl' }
-      ])
-
-      await nextTick()
-
-      // Update sort
-      const sortSelect = wrapper.findComponent({ name: 'SingleSelect' })
-      await sortSelect.vm.$emit('update:modelValue', 'popular')
-
-      await nextTick()
-
-      const emitted = wrapper.emitted('filterChange')
-      expect(emitted).toHaveLength(3)
-
-      // Check final state
-      const finalState: FilterState = emitted![2][0] as FilterState
-      expect(finalState.fileFormats).toEqual(['ckpt', 'safetensors'])
-      expect(finalState.baseModels).toEqual(['sdxl'])
-      expect(finalState.sortBy).toBe('popular')
-    })
-
-    it('ensures FilterState interface compliance', async () => {
-      const wrapper = mount(AssetFilterBar)
-
-      const fileFormatSelect = wrapper.findAllComponents({
-        name: 'MultiSelect'
-      })[0]
-      await fileFormatSelect.vm.$emit('update:modelValue', [
-        { name: '.ckpt', value: 'ckpt' }
-      ])
-
-      await nextTick()
-
-      const emitted = wrapper.emitted('filterChange')
-      const filterState = emitted![0][0] as FilterState
-
-      // Type and structure assertions
-      expect(Array.isArray(filterState.fileFormats)).toBe(true)
-      expect(Array.isArray(filterState.baseModels)).toBe(true)
-      expect(typeof filterState.sortBy).toBe('string')
-
-      // Value type assertions
-      expect(filterState.fileFormats.every((f) => typeof f === 'string')).toBe(
-        true
-      )
-      expect(filterState.baseModels.every((m) => typeof m === 'string')).toBe(
-        true
-      )
-    })
-  })
-})

tests-ui/platform/assets/composables/useAssetBrowser.test.ts

@@ -1,323 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
-
-import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
-describe('useAssetBrowser', () => {
-  // Test fixtures - minimal data focused on functionality being tested
-  const createApiAsset = (overrides: Partial<AssetItem> = {}): AssetItem => ({
-    id: 'test-id',
-    name: 'test-asset.safetensors',
-    asset_hash: 'blake3:abc123',
-    size: 1024,
-    mime_type: 'application/octet-stream',
-    tags: ['models', 'checkpoints'],
-    created_at: '2024-01-01T00:00:00Z',
-    updated_at: '2024-01-01T00:00:00Z',
-    last_access_time: '2024-01-01T00:00:00Z',
-    ...overrides
-  })
-
-  describe('Asset Transformation', () => {
-    it('transforms API asset to include display properties', () => {
-      const apiAsset = createApiAsset({
-        size: 2147483648, // 2GB
-        user_metadata: { description: 'Test model' }
-      })
-
-      const { transformAssetForDisplay } = useAssetBrowser([apiAsset])
-      const result = transformAssetForDisplay(apiAsset)
-
-      // Preserves API properties
-      expect(result.id).toBe(apiAsset.id)
-      expect(result.name).toBe(apiAsset.name)
-
-      // Adds display properties
-      expect(result.description).toBe('Test model')
-      expect(result.formattedSize).toBe('2 GB')
-      expect(result.badges).toContainEqual({
-        label: 'checkpoints',
-        type: 'type'
-      })
-      expect(result.badges).toContainEqual({ label: '2 GB', type: 'size' })
-    })
-
-    it('creates fallback description from tags when metadata missing', () => {
-      const apiAsset = createApiAsset({
-        tags: ['models', 'loras'],
-        user_metadata: undefined
-      })
-
-      const { transformAssetForDisplay } = useAssetBrowser([apiAsset])
-      const result = transformAssetForDisplay(apiAsset)
-
-      expect(result.description).toBe('loras model')
-    })
-
-    it('formats various file sizes correctly', () => {
-      const { transformAssetForDisplay } = useAssetBrowser([])
-
-      const testCases = [
-        { size: 512, expected: '512 B' },
-        { size: 1536, expected: '1.5 KB' },
-        { size: 2097152, expected: '2 MB' },
-        { size: 3221225472, expected: '3 GB' }
-      ]
-
-      testCases.forEach(({ size, expected }) => {
-        const asset = createApiAsset({ size })
-        const result = transformAssetForDisplay(asset)
-        expect(result.formattedSize).toBe(expected)
-      })
-    })
-  })
-
-  describe('Tag-Based Filtering', () => {
-    it('filters assets by category tag', async () => {
-      const assets = [
-        createApiAsset({ id: '1', tags: ['models', 'checkpoints'] }),
-        createApiAsset({ id: '2', tags: ['models', 'loras'] }),
-        createApiAsset({ id: '3', tags: ['models', 'checkpoints'] })
-      ]
-
-      const { selectedCategory, filteredAssets } = useAssetBrowser(assets)
-
-      selectedCategory.value = 'checkpoints'
-      await nextTick()
-
-      expect(filteredAssets.value).toHaveLength(2)
-      expect(
-        filteredAssets.value.every((asset) =>
-          asset.tags.includes('checkpoints')
-        )
-      ).toBe(true)
-    })
-
-    it('returns all assets when category is "all"', async () => {
-      const assets = [
-        createApiAsset({ id: '1', tags: ['models', 'checkpoints'] }),
-        createApiAsset({ id: '2', tags: ['models', 'loras'] })
-      ]
-
-      const { selectedCategory, filteredAssets } = useAssetBrowser(assets)
-
-      selectedCategory.value = 'all'
-      await nextTick()
-
-      expect(filteredAssets.value).toHaveLength(2)
-    })
-  })
-
-  describe('Search Functionality', () => {
-    it('searches across asset name', async () => {
-      const assets = [
-        createApiAsset({ name: 'realistic_vision.safetensors' }),
-        createApiAsset({ name: 'anime_style.ckpt' }),
-        createApiAsset({ name: 'photorealistic_v2.safetensors' })
-      ]
-
-      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
-
-      searchQuery.value = 'realistic'
-      await nextTick()
-
-      expect(filteredAssets.value).toHaveLength(2)
-      expect(
-        filteredAssets.value.every((asset) =>
-          asset.name.toLowerCase().includes('realistic')
-        )
-      ).toBe(true)
-    })
-
-    it('searches in user metadata description', async () => {
-      const assets = [
-        createApiAsset({
-          name: 'model1.safetensors',
-          user_metadata: { description: 'fantasy artwork model' }
-        }),
-        createApiAsset({
-          name: 'model2.safetensors',
-          user_metadata: { description: 'portrait photography' }
-        })
-      ]
-
-      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
-
-      searchQuery.value = 'fantasy'
-      await nextTick()
-
-      expect(filteredAssets.value).toHaveLength(1)
-      expect(filteredAssets.value[0].name).toBe('model1.safetensors')
-    })
-
-    it('handles empty search results', async () => {
-      const assets = [createApiAsset({ name: 'test.safetensors' })]
-
-      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
-
-      searchQuery.value = 'nonexistent'
-      await nextTick()
-
-      expect(filteredAssets.value).toHaveLength(0)
-    })
-  })
-
-  describe('Combined Search and Filtering', () => {
-    it('applies both search and category filter', async () => {
-      const assets = [
-        createApiAsset({
-          name: 'realistic_checkpoint.safetensors',
-          tags: ['models', 'checkpoints']
-        }),
-        createApiAsset({
-          name: 'realistic_lora.safetensors',
-          tags: ['models', 'loras']
-        }),
-        createApiAsset({
-          name: 'anime_checkpoint.safetensors',
-          tags: ['models', 'checkpoints']
-        })
-      ]
-
-      const { searchQuery, selectedCategory, filteredAssets } =
-        useAssetBrowser(assets)
-
-      searchQuery.value = 'realistic'
-      selectedCategory.value = 'checkpoints'
-      await nextTick()
-
-      expect(filteredAssets.value).toHaveLength(1)
-      expect(filteredAssets.value[0].name).toBe(
-        'realistic_checkpoint.safetensors'
-      )
-    })
-  })
-
-  describe('Sorting', () => {
-    it('sorts assets by name', async () => {
-      const assets = [
-        createApiAsset({ name: 'zebra.safetensors' }),
-        createApiAsset({ name: 'alpha.safetensors' }),
-        createApiAsset({ name: 'beta.safetensors' })
-      ]
-
-      const { sortBy, filteredAssets } = useAssetBrowser(assets)
-
-      sortBy.value = 'name'
-      await nextTick()
-
-      const names = filteredAssets.value.map((asset) => asset.name)
-      expect(names).toEqual([
-        'alpha.safetensors',
-        'beta.safetensors',
-        'zebra.safetensors'
-      ])
-    })
-
-    it('sorts assets by creation date', async () => {
-      const assets = [
-        createApiAsset({ created_at: '2024-03-01T00:00:00Z' }),
-        createApiAsset({ created_at: '2024-01-01T00:00:00Z' }),
-        createApiAsset({ created_at: '2024-02-01T00:00:00Z' })
-      ]
-
-      const { sortBy, filteredAssets } = useAssetBrowser(assets)
-
-      sortBy.value = 'date'
-      await nextTick()
-
-      const dates = filteredAssets.value.map((asset) => asset.created_at)
-      expect(dates).toEqual([
-        '2024-03-01T00:00:00Z',
-        '2024-02-01T00:00:00Z',
-        '2024-01-01T00:00:00Z'
-      ])
-    })
-  })
-
-  describe('Asset Selection', () => {
-    it('returns selected asset UUID for efficient handling', () => {
-      const asset = createApiAsset({
-        id: 'test-uuid-123',
-        name: 'selected_model.safetensors'
-      })
-      const { selectAsset, transformAssetForDisplay } = useAssetBrowser([asset])
-
-      const displayAsset = transformAssetForDisplay(asset)
-      const result = selectAsset(displayAsset)
-
-      expect(result).toBe('test-uuid-123')
-    })
-  })
-
-  describe('Dynamic Category Extraction', () => {
-    it('extracts categories from asset tags', () => {
-      const assets = [
-        createApiAsset({ tags: ['models', 'checkpoints'] }),
-        createApiAsset({ tags: ['models', 'loras'] }),
-        createApiAsset({ tags: ['models', 'checkpoints'] }) // duplicate
-      ]
-
-      const { availableCategories } = useAssetBrowser(assets)
-
-      expect(availableCategories.value).toEqual([
-        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
-        {
-          id: 'checkpoints',
-          label: 'Checkpoints',
-          icon: 'icon-[lucide--package]'
-        },
-        { id: 'loras', label: 'Loras', icon: 'icon-[lucide--package]' }
-      ])
-    })
-
-    it('handles assets with no category tag', () => {
-      const assets = [
-        createApiAsset({ tags: ['models'] }), // No second tag
-        createApiAsset({ tags: ['models', 'vae'] })
-      ]
-
-      const { availableCategories } = useAssetBrowser(assets)
-
-      expect(availableCategories.value).toEqual([
-        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
-        { id: 'vae', label: 'Vae', icon: 'icon-[lucide--package]' }
-      ])
-    })
-
-    it('ignores non-models root tags', () => {
-      const assets = [
-        createApiAsset({ tags: ['input', 'images'] }),
-        createApiAsset({ tags: ['models', 'checkpoints'] })
-      ]
-
-      const { availableCategories } = useAssetBrowser(assets)
-
-      expect(availableCategories.value).toEqual([
-        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
-        {
-          id: 'checkpoints',
-          label: 'Checkpoints',
-          icon: 'icon-[lucide--package]'
-        }
-      ])
-    })
-
-    it('computes content title from selected category', () => {
-      const assets = [createApiAsset({ tags: ['models', 'checkpoints'] })]
-      const { selectedCategory, contentTitle } = useAssetBrowser(assets)
-
-      // Default
-      expect(contentTitle.value).toBe('All Models')
-
-      // Set specific category
-      selectedCategory.value = 'checkpoints'
-      expect(contentTitle.value).toBe('Checkpoints')
-
-      // Unknown category
-      selectedCategory.value = 'unknown'
-      expect(contentTitle.value).toBe('Assets')
-    })
-  })
-})

tests-ui/platform/assets/composables/useAssetBrowserDialog.test.ts

@@ -1,89 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
-import { useDialogStore } from '@/stores/dialogStore'
-
-// Mock the dialog store
-vi.mock('@/stores/dialogStore')
-
-// Test factory functions
-interface AssetBrowserProps {
-  nodeType: string
-  inputName: string
-  onAssetSelected?: ReturnType<typeof vi.fn>
-}
-
-function createAssetBrowserProps(
-  overrides: Partial<AssetBrowserProps> = {}
-): AssetBrowserProps {
-  return {
-    nodeType: 'CheckpointLoaderSimple',
-    inputName: 'ckpt_name',
-    ...overrides
-  }
-}
-
-describe('useAssetBrowserDialog', () => {
-  describe('Asset Selection Flow', () => {
-    it('auto-closes dialog when asset is selected', () => {
-      // Create fresh mocks for this test
-      const mockShowDialog = vi.fn()
-      const mockCloseDialog = vi.fn()
-
-      vi.mocked(useDialogStore).mockReturnValue({
-        showDialog: mockShowDialog,
-        closeDialog: mockCloseDialog
-      } as Partial<ReturnType<typeof useDialogStore>> as ReturnType<
-        typeof useDialogStore
-      >)
-
-      const assetBrowserDialog = useAssetBrowserDialog()
-      const onAssetSelected = vi.fn()
-      const props = createAssetBrowserProps({ onAssetSelected })
-
-      assetBrowserDialog.show(props)
-
-      // Get the onSelect handler that was passed to the dialog
-      const dialogCall = mockShowDialog.mock.calls[0][0]
-      const onSelectHandler = dialogCall.props.onSelect
-
-      // Simulate asset selection
-      onSelectHandler('selected-asset-path')
-
-      // Should call the original callback and close dialog
-      expect(onAssetSelected).toHaveBeenCalledWith('selected-asset-path')
-      expect(mockCloseDialog).toHaveBeenCalledWith({
-        key: 'global-asset-browser'
-      })
-    })
-
-    it('closes dialog when close handler is called', () => {
-      // Create fresh mocks for this test
-      const mockShowDialog = vi.fn()
-      const mockCloseDialog = vi.fn()
-
-      vi.mocked(useDialogStore).mockReturnValue({
-        showDialog: mockShowDialog,
-        closeDialog: mockCloseDialog
-      } as Partial<ReturnType<typeof useDialogStore>> as ReturnType<
-        typeof useDialogStore
-      >)
-
-      const assetBrowserDialog = useAssetBrowserDialog()
-      const props = createAssetBrowserProps()
-
-      assetBrowserDialog.show(props)
-
-      // Get the onClose handler that was passed to the dialog
-      const dialogCall = mockShowDialog.mock.calls[0][0]
-      const onCloseHandler = dialogCall.props.onClose
-
-      // Simulate dialog close
-      onCloseHandler()
-
-      expect(mockCloseDialog).toHaveBeenCalledWith({
-        key: 'global-asset-browser'
-      })
-    })
-  })
-})

tests-ui/platform/assets/composables/useAssetFilterOptions.test.ts

@@ -1,159 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-
-// Test factory functions
-function createTestAsset(overrides: Partial<AssetItem> = {}): AssetItem {
-  return {
-    id: 'test-uuid',
-    name: 'test-model.safetensors',
-    asset_hash: 'blake3:test123',
-    size: 123456,
-    mime_type: 'application/octet-stream',
-    tags: ['models', 'checkpoints'],
-    created_at: '2024-01-01T00:00:00Z',
-    updated_at: '2024-01-01T00:00:00Z',
-    last_access_time: '2024-01-01T00:00:00Z',
-    user_metadata: {
-      base_model: 'sd15'
-    },
-    ...overrides
-  }
-}
-
-describe('useAssetFilterOptions', () => {
-  describe('File Format Extraction', () => {
-    it('extracts file formats from asset names', () => {
-      const assets = [
-        createTestAsset({ name: 'model1.safetensors' }),
-        createTestAsset({ name: 'model2.ckpt' }),
-        createTestAsset({ name: 'model3.pt' })
-      ]
-
-      const { availableFileFormats } = useAssetFilterOptions(assets)
-
-      expect(availableFileFormats.value).toEqual([
-        { name: '.ckpt', value: 'ckpt' },
-        { name: '.pt', value: 'pt' },
-        { name: '.safetensors', value: 'safetensors' }
-      ])
-    })
-
-    it('handles duplicate file formats', () => {
-      const assets = [
-        createTestAsset({ name: 'model1.safetensors' }),
-        createTestAsset({ name: 'model2.safetensors' }),
-        createTestAsset({ name: 'model3.ckpt' })
-      ]
-
-      const { availableFileFormats } = useAssetFilterOptions(assets)
-
-      expect(availableFileFormats.value).toEqual([
-        { name: '.ckpt', value: 'ckpt' },
-        { name: '.safetensors', value: 'safetensors' }
-      ])
-    })
-
-    it('handles assets with no file extension', () => {
-      const assets = [
-        createTestAsset({ name: 'model_no_extension' }),
-        createTestAsset({ name: 'model.safetensors' })
-      ]
-
-      const { availableFileFormats } = useAssetFilterOptions(assets)
-
-      expect(availableFileFormats.value).toEqual([
-        { name: '.safetensors', value: 'safetensors' }
-      ])
-    })
-
-    it('handles empty asset list', () => {
-      const { availableFileFormats } = useAssetFilterOptions([])
-
-      expect(availableFileFormats.value).toEqual([])
-    })
-  })
-
-  describe('Base Model Extraction', () => {
-    it('extracts base models from user metadata', () => {
-      const assets = [
-        createTestAsset({ user_metadata: { base_model: 'sd15' } }),
-        createTestAsset({ user_metadata: { base_model: 'sdxl' } }),
-        createTestAsset({ user_metadata: { base_model: 'sd35' } })
-      ]
-
-      const { availableBaseModels } = useAssetFilterOptions(assets)
-
-      expect(availableBaseModels.value).toEqual([
-        { name: 'sd15', value: 'sd15' },
-        { name: 'sd35', value: 'sd35' },
-        { name: 'sdxl', value: 'sdxl' }
-      ])
-    })
-
-    it('handles duplicate base models', () => {
-      const assets = [
-        createTestAsset({ user_metadata: { base_model: 'sd15' } }),
-        createTestAsset({ user_metadata: { base_model: 'sd15' } }),
-        createTestAsset({ user_metadata: { base_model: 'sdxl' } })
-      ]
-
-      const { availableBaseModels } = useAssetFilterOptions(assets)
-
-      expect(availableBaseModels.value).toEqual([
-        { name: 'sd15', value: 'sd15' },
-        { name: 'sdxl', value: 'sdxl' }
-      ])
-    })
-
-    it('handles assets with missing user_metadata', () => {
-      const assets = [
-        createTestAsset({ user_metadata: undefined }),
-        createTestAsset({ user_metadata: { base_model: 'sd15' } })
-      ]
-
-      const { availableBaseModels } = useAssetFilterOptions(assets)
-
-      expect(availableBaseModels.value).toEqual([
-        { name: 'sd15', value: 'sd15' }
-      ])
-    })
-
-    it('handles assets with missing base_model field', () => {
-      const assets = [
-        createTestAsset({ user_metadata: { description: 'A test model' } }),
-        createTestAsset({ user_metadata: { base_model: 'sdxl' } })
-      ]
-
-      const { availableBaseModels } = useAssetFilterOptions(assets)
-
-      expect(availableBaseModels.value).toEqual([
-        { name: 'sdxl', value: 'sdxl' }
-      ])
-    })
-
-    it('handles empty asset list', () => {
-      const { availableBaseModels } = useAssetFilterOptions([])
-
-      expect(availableBaseModels.value).toEqual([])
-    })
-  })
-
-  describe('Reactivity', () => {
-    it('returns computed properties that can be reactive', () => {
-      const assets = [createTestAsset({ name: 'model.safetensors' })]
-
-      const { availableFileFormats, availableBaseModels } =
-        useAssetFilterOptions(assets)
-
-      // These should be computed refs
-      expect(availableFileFormats.value).toBeDefined()
-      expect(availableBaseModels.value).toBeDefined()
-      expect(typeof availableFileFormats.value).toBe('object')
-      expect(typeof availableBaseModels.value).toBe('object')
-      expect(Array.isArray(availableFileFormats.value)).toBe(true)
-      expect(Array.isArray(availableBaseModels.value)).toBe(true)
-    })
-  })
-})

tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -1,6 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { VueWrapper, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'

tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts

@@ -14,7 +14,7 @@ import {
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import type { TaskLog } from '@/types/comfyManagerTypes'
+import { TaskLog } from '@/types/comfyManagerTypes'
 
 // Mock modules
 vi.mock('@/stores/comfyManagerStore')

tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts

@@ -2,8 +2,12 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
-import type { LGraphNode, Positionable } from '@/lib/litegraph/src/litegraph'
-import { LGraphEventMode, Reroute } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphEventMode,
+  LGraphNode,
+  Positionable,
+  Reroute
+} from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 

tests-ui/tests/composables/graph/useCanvasInteractions.test.ts

@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 
 // Mock stores
 vi.mock('@/renderer/core/canvas/canvasStore', () => {

tests-ui/tests/composables/useManagerQueue.test.ts

@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import { useManagerQueue } from '@/composables/useManagerQueue'
-import type { components } from '@/types/generatedManagerTypes'
+import { components } from '@/types/generatedManagerTypes'
 
 // Mock dialog service
 vi.mock('@/services/dialogService', () => ({

tests-ui/tests/composables/useManagerState.test.ts

@@ -56,10 +56,10 @@ describe('useManagerState', () => {
   })
 
   describe('managerUIState property', () => {
-    it('should return DISABLED state when --enable-manager is NOT present', () => {
+    it('should return DISABLED state when --disable-manager is present', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
         systemStats: ref({
-          system: { argv: ['python', 'main.py'] } // No --enable-manager flag
+          system: { argv: ['python', 'main.py', '--disable-manager'] }
         }),
         isInitialized: ref(true)
       } as any)
@@ -76,14 +76,7 @@ describe('useManagerState', () => {
     it('should return LEGACY_UI state when --enable-manager-legacy-ui is present', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
         systemStats: ref({
-          system: {
-            argv: [
-              'python',
-              'main.py',
-              '--enable-manager',
-              '--enable-manager-legacy-ui'
-            ]
-          } // Both flags needed
+          system: { argv: ['python', 'main.py', '--enable-manager-legacy-ui'] }
         }),
         isInitialized: ref(true)
       } as any)
@@ -99,9 +92,7 @@ describe('useManagerState', () => {
 
     it('should return NEW_UI state when client and server both support v4', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -123,9 +114,7 @@ describe('useManagerState', () => {
 
     it('should return LEGACY_UI state when server supports v4 but client does not', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -147,9 +136,7 @@ describe('useManagerState', () => {
 
     it('should return LEGACY_UI state when legacy manager extension exists', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
@@ -168,9 +155,7 @@ describe('useManagerState', () => {
 
     it('should return NEW_UI state when server feature flags are undefined', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
@@ -190,9 +175,7 @@ describe('useManagerState', () => {
 
     it('should return LEGACY_UI state when server does not support v4', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
@@ -229,17 +212,14 @@ describe('useManagerState', () => {
 
       const managerState = useManagerState()
 
-      // When systemStats is null, we can't check for --enable-manager flag, so manager is disabled
-      expect(managerState.managerUIState.value).toBe(ManagerUIState.DISABLED)
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.NEW_UI)
     })
   })
 
   describe('helper properties', () => {
     it('isManagerEnabled should return true when state is not DISABLED', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -257,7 +237,7 @@ describe('useManagerState', () => {
     it('isManagerEnabled should return false when state is DISABLED', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
         systemStats: ref({
-          system: { argv: ['python', 'main.py'] } // No --enable-manager flag means disabled
+          system: { argv: ['python', 'main.py', '--disable-manager'] }
         }),
         isInitialized: ref(true)
       } as any)
@@ -272,9 +252,7 @@ describe('useManagerState', () => {
 
     it('isNewManagerUI should return true when state is NEW_UI', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -292,14 +270,7 @@ describe('useManagerState', () => {
     it('isLegacyManagerUI should return true when state is LEGACY_UI', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
         systemStats: ref({
-          system: {
-            argv: [
-              'python',
-              'main.py',
-              '--enable-manager',
-              '--enable-manager-legacy-ui'
-            ]
-          } // Both flags needed
+          system: { argv: ['python', 'main.py', '--enable-manager-legacy-ui'] }
         }),
         isInitialized: ref(true)
       } as any)
@@ -314,9 +285,7 @@ describe('useManagerState', () => {
 
     it('shouldShowInstallButton should return true only for NEW_UI', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -333,9 +302,7 @@ describe('useManagerState', () => {
 
     it('shouldShowManagerButtons should return true when not DISABLED', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager'] }
-        }), // Need --enable-manager
+        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({

tests-ui/tests/composables/useNodeChatHistory.test.ts

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 vi.mock(
   '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget',

tests-ui/tests/composables/useServerLogs.test.ts

@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import { useServerLogs } from '@/composables/useServerLogs'
-import type { LogsWsMessage } from '@/schemas/apiSchema'
+import { LogsWsMessage } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 
 vi.mock('@/scripts/api', () => ({

tests-ui/tests/litegraph/canvas/LinkConnectorSubgraphInputValidation.test.ts

@@ -5,7 +5,7 @@ import { LinkConnector } from '@/lib/litegraph/src/litegraph'
 import { MovingOutputLink } from '@/lib/litegraph/src/litegraph'
 import { ToOutputRenderLink } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode, LLink } from '@/lib/litegraph/src/litegraph'
-import type { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
+import { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
 
 import { createTestSubgraph } from '../subgraph/fixtures/subgraphHelpers'
 

tests-ui/tests/litegraph/core/LGraphNode.titleButtons.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/litegraph'
-import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 describe('LGraphNode Title Buttons', () => {

tests-ui/tests/litegraph/core/LinkConnector.integration.test.ts

@@ -1,12 +1,13 @@
 // TODO: Fix these tests after migration
 import { afterEach, describe, expect, vi } from 'vitest'
 
-import type { LGraph, Reroute } from '@/lib/litegraph/src/litegraph'
 import {
   type CanvasPointerEvent,
+  LGraph,
   LGraphNode,
   LLink,
   LinkConnector,
+  Reroute,
   type RerouteId
 } from '@/lib/litegraph/src/litegraph'
 

tests-ui/tests/litegraph/core/NodeSlot.test.ts

@@ -1,9 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import type {
-  INodeInputSlot,
-  INodeOutputSlot
-} from '@/lib/litegraph/src/litegraph'
+import { INodeInputSlot, INodeOutputSlot } from '@/lib/litegraph/src/litegraph'
 import {
   inputAsSerialisable,
   outputAsSerialisable

tests-ui/tests/litegraph/subgraph/SubgraphConversion.test.ts

@@ -1,8 +1,9 @@
 // TODO: Fix these tests after migration
 import { assert, describe, expect, it } from 'vitest'
 
-import type { ISlotType, LGraph } from '@/lib/litegraph/src/litegraph'
 import {
+  ISlotType,
+  LGraph,
   LGraphGroup,
   LGraphNode,
   LiteGraph

tests-ui/tests/litegraph/subgraph/SubgraphNode.titleButton.test.ts

@@ -2,7 +2,7 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/litegraph'
-import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 
 import {
   createTestSubgraph,

tests-ui/tests/litegraph/subgraph/SubgraphSlotConnections.test.ts

@@ -5,8 +5,8 @@ import { LinkConnector } from '@/lib/litegraph/src/litegraph'
 import { ToInputFromIoNodeLink } from '@/lib/litegraph/src/litegraph'
 import { SUBGRAPH_INPUT_ID } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode, type LinkNetwork } from '@/lib/litegraph/src/litegraph'
-import type { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
-import type { NodeOutputSlot } from '@/lib/litegraph/src/litegraph'
+import { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
+import { NodeOutputSlot } from '@/lib/litegraph/src/litegraph'
 import {
   isSubgraphInput,
   isSubgraphOutput

tests-ui/tests/litegraph/subgraph/SubgraphWidgetPromotion.test.ts

@@ -1,8 +1,8 @@
 // TODO: Fix these tests after migration
 import { describe, expect, it } from 'vitest'
 
-import type { ISlotType, Subgraph } from '@/lib/litegraph/src/litegraph'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ISlotType } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode, Subgraph } from '@/lib/litegraph/src/litegraph'
 import type { TWidgetType } from '@/lib/litegraph/src/litegraph'
 import { BaseWidget } from '@/lib/litegraph/src/litegraph'
 

tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts

@@ -5,9 +5,8 @@
  * in their test files. Each fixture provides a clean, pre-configured subgraph
  * setup for different testing scenarios.
  */
-import type { Subgraph } from '@/lib/litegraph/src/litegraph'
-import { LGraph } from '@/lib/litegraph/src/litegraph'
-import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
+import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 
 import { test } from '../../core/fixtures/testExtensions'
 import {

tests-ui/tests/nodeSearchService.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import { NodeSearchService } from '@/services/nodeSearchService'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 

tests-ui/tests/platform/assets/utils/assetMetadataUtils.test.ts

@@ -1,65 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import {
-  getAssetBaseModel,
-  getAssetDescription
-} from '@/platform/assets/utils/assetMetadataUtils'
-
-describe('assetMetadataUtils', () => {
-  const mockAsset: AssetItem = {
-    id: 'test-id',
-    name: 'test-model',
-    asset_hash: 'hash123',
-    size: 1024,
-    mime_type: 'application/octet-stream',
-    tags: ['models', 'checkpoints'],
-    created_at: '2024-01-01T00:00:00Z',
-    updated_at: '2024-01-01T00:00:00Z',
-    last_access_time: '2024-01-01T00:00:00Z'
-  }
-
-  describe('getAssetDescription', () => {
-    it('should return string description when present', () => {
-      const asset = {
-        ...mockAsset,
-        user_metadata: { description: 'A test model' }
-      }
-      expect(getAssetDescription(asset)).toBe('A test model')
-    })
-
-    it('should return null when description is not a string', () => {
-      const asset = {
-        ...mockAsset,
-        user_metadata: { description: 123 }
-      }
-      expect(getAssetDescription(asset)).toBeNull()
-    })
-
-    it('should return null when no metadata', () => {
-      expect(getAssetDescription(mockAsset)).toBeNull()
-    })
-  })
-
-  describe('getAssetBaseModel', () => {
-    it('should return string base_model when present', () => {
-      const asset = {
-        ...mockAsset,
-        user_metadata: { base_model: 'SDXL' }
-      }
-      expect(getAssetBaseModel(asset)).toBe('SDXL')
-    })
-
-    it('should return null when base_model is not a string', () => {
-      const asset = {
-        ...mockAsset,
-        user_metadata: { base_model: 123 }
-      }
-      expect(getAssetBaseModel(asset)).toBeNull()
-    })
-
-    it('should return null when no metadata', () => {
-      expect(getAssetBaseModel(mockAsset)).toBeNull()
-    })
-  })
-})

tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts

@@ -1,11 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import type { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 
@@ -13,18 +12,10 @@ vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn()
 }))
 
-vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
-  useCanvasInteractions: vi.fn()
-}))
-
 vi.mock('@/renderer/core/layout/operations/layoutMutations', () => ({
   useLayoutMutations: vi.fn()
 }))
 
-vi.mock('@/composables/graph/useGraphNodeManager', () => ({
-  useGraphNodeManager: vi.fn()
-}))
-
 function createMockCanvas(): Pick<
   LGraphCanvas,
   'select' | 'deselect' | 'deselectAll'
@@ -77,22 +68,12 @@ function createMockLayoutMutations(): Pick<
   }
 }
 
-function createMockCanvasInteractions(): Pick<
-  ReturnType<typeof useCanvasInteractions>,
-  'shouldHandleNodePointerEvents'
-> {
-  return {
-    shouldHandleNodePointerEvents: computed(() => true) // Default to allowing pointer events
-  }
-}
-
 describe('useNodeEventHandlers', () => {
   let mockCanvas: ReturnType<typeof createMockCanvas>
   let mockNode: ReturnType<typeof createMockNode>
   let mockNodeManager: ReturnType<typeof createMockNodeManager>
   let mockCanvasStore: ReturnType<typeof createMockCanvasStore>
   let mockLayoutMutations: ReturnType<typeof createMockLayoutMutations>
-  let mockCanvasInteractions: ReturnType<typeof createMockCanvasInteractions>
 
   const testNodeData: VueNodeData = {
     id: 'node-1',
@@ -109,7 +90,6 @@ describe('useNodeEventHandlers', () => {
     mockNodeManager = createMockNodeManager(mockNode)
     mockCanvasStore = createMockCanvasStore(mockCanvas)
     mockLayoutMutations = createMockLayoutMutations()
-    mockCanvasInteractions = createMockCanvasInteractions()
 
     vi.mocked(useCanvasStore).mockReturnValue(
       mockCanvasStore as ReturnType<typeof useCanvasStore>
@@ -117,9 +97,6 @@ describe('useNodeEventHandlers', () => {
     vi.mocked(useLayoutMutations).mockReturnValue(
       mockLayoutMutations as ReturnType<typeof useLayoutMutations>
     )
-    vi.mocked(useCanvasInteractions).mockReturnValue(
-      mockCanvasInteractions as ReturnType<typeof useCanvasInteractions>
-    )
   })
 
   describe('handleNodeSelect', () => {

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
-import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
+import { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 
 vi.mock('axios', () => {
   return {