[feat] Implement media asset workflow actions with shared utilities

package.json

@@ -131,6 +131,7 @@
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
     "@comfyorg/design-system": "workspace:*",
     "@comfyorg/registry-types": "workspace:*",
+    "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
     "@iconify/json": "catalog:",
     "@primeuix/forms": "catalog:",

src/locales/en/main.json

@@ -2036,8 +2036,18 @@
       "downloadStarted": "Downloading {count} files...",
       "downloadsStarted": "Started downloading {count} file(s)",
       "assetsDeletedSuccessfully": "{count} asset(s) deleted successfully",
-      "failedToDeleteAssets": "Failed to delete selected assets"
-    }
+      "failedToDeleteAssets": "Failed to delete selected assets",
+      "partialDeleteSuccess": "{succeeded} deleted successfully, {failed} failed"
+    },
+    "noJobIdFound": "No job ID found for this asset",
+    "unsupportedFileType": "Unsupported file type for loader node",
+    "nodeTypeNotFound": "Node type {nodeType} not found",
+    "failedToCreateNode": "Failed to create node",
+    "nodeAddedToWorkflow": "{nodeType} node added to workflow",
+    "noWorkflowDataFound": "No workflow data found in this asset",
+    "workflowOpenedInNewTab": "Workflow opened in new tab",
+    "failedToExportWorkflow": "Failed to export workflow",
+    "workflowExportedSuccessfully": "Workflow exported successfully"
   },
   "actionbar": {
     "dockToTop": "Dock to top",

src/platform/assets/components/MediaAssetCard.vue

@@ -37,7 +37,6 @@
             :context="{ type: assetType }"
             @view="handleZoomClick"
             @download="actions.downloadAsset()"
-            @play="actions.playAsset(asset.id)"
             @video-playing-state-changed="isVideoPlaying = $event"
             @video-controls-changed="showVideoControls = $event"
             @image-loaded="handleImageLoaded"

src/platform/assets/components/MediaAssetMoreMenu.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="flex flex-col">
+    <!-- TODO: 3D assets currently excluded from inspection.
+         When 3D loader nodes are implemented, update detectNodeTypeFromFilename
+         to return appropriate node type for .gltf, .glb files and remove this exclusion -->
     <IconTextButton
       v-if="asset?.kind !== '3D'"
       type="transparent"
@@ -12,7 +15,7 @@
     </IconTextButton>
 
     <IconTextButton
-      v-if="showWorkflowOptions"
+      v-if="showAddToWorkflow"
       type="transparent"
       label="Add to current workflow"
       @click="handleAddToWorkflow"
@@ -28,10 +31,10 @@
       </template>
     </IconTextButton>
 
-    <MediaAssetButtonDivider v-if="showWorkflowOptions" />
+    <MediaAssetButtonDivider v-if="showAddToWorkflow || showWorkflowActions" />
 
     <IconTextButton
-      v-if="showWorkflowOptions"
+      v-if="showWorkflowActions"
       type="transparent"
       label="Open as workflow in new tab"
       @click="handleOpenWorkflow"
@@ -42,7 +45,7 @@
     </IconTextButton>
 
     <IconTextButton
-      v-if="showWorkflowOptions"
+      v-if="showWorkflowActions"
       type="transparent"
       label="Export workflow"
       @click="handleExportWorkflow"
@@ -52,7 +55,7 @@
       </template>
     </IconTextButton>
 
-    <MediaAssetButtonDivider v-if="showWorkflowOptions && showCopyJobId" />
+    <MediaAssetButtonDivider v-if="showWorkflowActions && showCopyJobId" />
 
     <IconTextButton
       v-if="showCopyJobId"
@@ -85,6 +88,8 @@ import { computed, inject } from 'vue'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import { isCloud } from '@/platform/distribution/types'
+import { supportsWorkflowMetadata } from '@/platform/workflow/utils/workflowExtractionUtil'
+import { detectNodeTypeFromFilename } from '@/utils/loaderNodeUtil'
 
 import { useMediaAssetActions } from '../composables/useMediaAssetActions'
 import { MediaAssetKey } from '../schemas/mediaAssetSchema'
@@ -107,7 +112,35 @@ const assetType = computed(() => {
   return asset.value?.tags?.[0] || context.value?.type || 'output'
 })
 
-const showWorkflowOptions = computed(() => assetType.value === 'output')
+// Show "Add to current workflow" for all media files (images, videos, audio)
+// This works for any file type that has a corresponding loader node
+const showAddToWorkflow = computed(() => {
+  // Output assets can always be added
+  if (assetType.value === 'output') return true
+
+  // Input assets: check if file type is supported by loader nodes
+  // Use the same utility as the actual addWorkflow function for consistency
+  if (assetType.value === 'input' && asset.value?.name) {
+    const { nodeType } = detectNodeTypeFromFilename(asset.value.name)
+    return nodeType !== null
+  }
+
+  return false
+})
+
+// Show "Open/Export workflow" only for files with workflow metadata
+// This is more restrictive - only PNG, WEBP, FLAC support embedded workflows
+const showWorkflowActions = computed(() => {
+  // Output assets always have workflow metadata
+  if (assetType.value === 'output') return true
+
+  // Input assets: only formats that support workflow metadata
+  if (assetType.value === 'input' && asset.value?.name) {
+    return supportsWorkflowMetadata(asset.value.name)
+  }
+
+  return false
+})
 
 // Only show Copy Job ID for output assets (not for imported/input assets)
 const showCopyJobId = computed(() => {
@@ -129,7 +162,7 @@ const handleInspect = () => {
 
 const handleAddToWorkflow = () => {
   if (asset.value) {
-    actions.addWorkflow(asset.value.id)
+    actions.addWorkflow()
   }
   close()
 }
@@ -143,14 +176,14 @@ const handleDownload = () => {
 
 const handleOpenWorkflow = () => {
   if (asset.value) {
-    actions.openWorkflow(asset.value.id)
+    actions.openWorkflow()
   }
   close()
 }
 
 const handleExportWorkflow = () => {
   if (asset.value) {
-    actions.exportWorkflow(asset.value.id)
+    actions.exportWorkflow()
   }
   close()
 }