feat: replace model library tree with model browser dialog

packages/design-system/src/css/style.css

@@ -317,6 +317,12 @@
   --modal-card-tag-background: var(--color-smoke-200);
   --modal-card-tag-foreground: var(--base-foreground);
   --modal-panel-background: var(--color-white);
+
+  /* Table tokens */
+  --table-row-even-background: #f9fafb;
+  --table-row-odd-background: #ffffff;
+  --table-row-hover-background: #f3f4f6;
+  --table-header-background: #f5f5f5;
 }
 
 .dark-theme {
@@ -454,6 +460,12 @@
   --modal-card-tag-background: var(--color-ash-800);
   --modal-card-tag-foreground: var(--base-foreground);
   --modal-panel-background: var(--color-charcoal-600);
+
+  /* Table tokens */
+  --table-row-even-background: #1e1e1e;
+  --table-row-odd-background: #252525;
+  --table-row-hover-background: #2a2a2a;
+  --table-header-background: #1a1a1a;
 }
 
 @theme inline {
@@ -590,6 +602,12 @@
   --color-accent-background: var(--accent-background);
   --color-brand-yellow: var(--brand-yellow);
   --color-brand-blue: var(--brand-blue);
+
+  /* Table tokens */
+  --color-table-row-even-background: var(--table-row-even-background);
+  --color-table-row-odd-background: var(--table-row-odd-background);
+  --color-table-row-hover-background: var(--table-row-hover-background);
+  --color-table-header-background: var(--table-header-background);
 }
 
 @custom-variant dark-theme {

src/components/sidebar/SideToolbar.vue

@@ -65,6 +65,7 @@ import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPa
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { useModelBrowserDialog } from '@/platform/models/browser/composables/useModelBrowserDialog'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -115,7 +116,8 @@ const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
 /**
  * Handle sidebar tab icon click.
  * - Emits UI button telemetry for known tabs
- * - Delegates to the corresponding toggle command
+ * - For model-library tab, opens model browser dialog instead
+ * - Delegates to the corresponding toggle command for other tabs
  */
 const onTabClick = async (item: SidebarTabExtension) => {
   const telemetry = useTelemetry()
@@ -129,11 +131,14 @@ const onTabClick = async (item: SidebarTabExtension) => {
     telemetry?.trackUiButtonClicked({
       button_id: 'sidebar_tab_node_library_selected'
     })
-  else if (isModelLibraryTab)
+  else if (isModelLibraryTab) {
     telemetry?.trackUiButtonClicked({
       button_id: 'sidebar_tab_model_library_selected'
     })
-  else if (isWorkflowsTab)
+    const { show } = useModelBrowserDialog()
+    show()
+    return
+  } else if (isWorkflowsTab)
     telemetry?.trackUiButtonClicked({
       button_id: 'sidebar_tab_workflows_selected'
     })

src/components/widget/panel/LeftSidePanel.vue

@@ -8,6 +8,7 @@
     >
       <div v-if="'items' in item" class="flex flex-col gap-2">
         <NavTitle
+          v-if="item.title"
           v-model="collapsedGroups[item.title]"
           :title="item.title"
           :collapsible="item.collapsible"

src/locales/en/main.json

@@ -132,6 +132,7 @@
     "searchSettings": "Search Settings",
     "searchNodes": "Search Nodes",
     "searchModels": "Search Models",
+    "browseModels": "Browse Models",
     "searchKeybindings": "Search Keybindings",
     "searchExtensions": "Search Extensions",
     "search": "Search",
@@ -2824,5 +2825,52 @@
       "label": "Preview Version",
       "tooltip": "You are using a nightly version of ComfyUI. Please use the feedback button to share your thoughts about these features."
     }
+  },
+  "modelBrowser": {
+    "title": "Model Library",
+    "use": "Use",
+    "showInfo": "Show Info",
+    "viewDetails": "View details",
+    "modelInfo": "Model Info",
+    "selectModelToViewInfo": "Select a model to view details",
+    "searchPlaceholder": "Search models...",
+    "allModels": "All Models",
+    "filterByType": "BY TYPE",
+    "noModels": "No models found",
+    "noModelsForFilter": "No models match your filters",
+    "noFavorites": "No favorite models",
+    "loading": "Loading models...",
+    "error": "Failed to load models",
+    "errorLoading": "Failed to load models",
+    "retry": "Retry",
+    "clearFilters": "Clear Filters",
+    "columns": {
+      "modelName": "Model name",
+      "baseModel": "Base model",
+      "modelType": "Model type",
+      "fileSize": "File size",
+      "dateModified": "Date modified"
+    },
+    "basicInfo": "Basic Info",
+    "displayName": "Display Name",
+    "fileName": "File Name",
+    "filePath": "File Path",
+    "fileSize": "File Size",
+    "lastModified": "Last Modified",
+    "modelTagging": "Model Tagging",
+    "modelType": "Model Type",
+    "additionalTags": "Additional Tags",
+    "modelDescription": "Model Description",
+    "description": "Description",
+    "sortBy": "Sort by",
+    "sortAZ": "A-Z",
+    "sortZA": "Z-A",
+    "sortBySize": "Size",
+    "sortRecent": "Date",
+    "fileFormats": "File Formats",
+    "modelTypes": "Model Types",
+    "viewGrid": "Grid view",
+    "viewList": "List view",
+    "bookmarked": "Bookmarked"
   }
 }

src/platform/assets/utils/createModelNodeFromAsset.ts

@@ -1,4 +1,3 @@
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, Point } from '@/lib/litegraph/src/litegraph'
 import { assetItemSchema } from '@/platform/assets/schemas/assetSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
@@ -7,10 +6,7 @@ import {
   MODELS_TAG
 } from '@/platform/assets/services/assetService'
 import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
-import { useLitegraphService } from '@/services/litegraphService'
-import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+import { createNodeFromModel } from '@/utils/nodeCreation/createNodeFromModel'
 
 interface CreateNodeOptions {
   position?: Point
@@ -117,81 +113,19 @@ export function createModelNodeFromAsset(
     }
   }
 
-  const modelToNodeStore = useModelToNodeStore()
-  const provider = modelToNodeStore.getNodeProvider(category)
-  if (!provider) {
-    console.error(`No node provider registered for category: ${category}`)
-    return {
-      success: false,
-      error: {
-        code: 'NO_PROVIDER',
-        message: `No node provider registered for category: ${category}`,
-        assetId: validAsset.id,
-        details: { category }
-      }
-    }
-  }
+  // Use shared core function to create node
+  const result = createNodeFromModel(category, filename, validAsset.id, options)
 
-  const litegraphService = useLitegraphService()
-  const pos = options?.position ?? litegraphService.getCanvasCenter()
-
-  const node = LiteGraph.createNode(
-    provider.nodeDef.name,
-    provider.nodeDef.display_name,
-    { pos }
-  )
-
-  if (!node) {
-    console.error(`Failed to create node for type: ${provider.nodeDef.name}`)
+  if (!result.success) {
+    // Map generic error to asset-specific error format
     return {
       success: false,
       error: {
-        code: 'NODE_CREATION_FAILED',
-        message: `Failed to create node for type: ${provider.nodeDef.name}`,
-        assetId: validAsset.id,
-        details: { nodeType: provider.nodeDef.name }
-      }
+        ...result.error,
+        assetId: result.error.itemId
+      } as NodeCreationError
     }
   }
 
-  const workflowStore = useWorkflowStore()
-  const targetGraph = workflowStore.isSubgraphActive
-    ? workflowStore.activeSubgraph
-    : app.canvas.graph
-
-  if (!targetGraph) {
-    console.error('No active graph available')
-    return {
-      success: false,
-      error: {
-        code: 'NO_GRAPH',
-        message: 'No active graph available',
-        assetId: validAsset.id
-      }
-    }
-  }
-
-  const widget = node.widgets?.find((w) => w.name === provider.key)
-  if (!widget) {
-    console.error(
-      `Widget ${provider.key} not found on node ${provider.nodeDef.name}`
-    )
-    return {
-      success: false,
-      error: {
-        code: 'MISSING_WIDGET',
-        message: `Widget ${provider.key} not found on node ${provider.nodeDef.name}`,
-        assetId: validAsset.id,
-        details: { widgetName: provider.key, nodeType: provider.nodeDef.name }
-      }
-    }
-  }
-
-  // Set widget value BEFORE adding to graph so the node is created with correct value
-  widget.value = filename
-
-  // Now add the node to the graph with the correct widget value already set
-  targetGraph.add(node)
-
-  return { success: true, value: node }
+  return result
 }