[feat] Implement media asset workflow actions with shared utilities (#6696)

## Summary

Implements 4 missing media asset workflow features and creates shared
utilities to eliminate code duplication.

## Implemented Features

### 1. Copy Job ID ✅
- Properly extracts promptId using `getOutputAssetMetadata`
- Uses `useCopyToClipboard` composable

### 2. Add to Current Workflow ✅
- Adds LoadImage/LoadVideo/LoadAudio nodes to canvas
- Supports all media file types (JPEG, PNG, MP4, etc.)
- Auto-detects appropriate node type using `detectNodeTypeFromFilename`
utility

### 3. Open Workflow in New Tab ✅
- Extracts workflow from asset metadata or embedded PNG
- Opens workflow in new tab

### 4. Export Workflow ✅
- Exports workflow as JSON file
- Supports optional filename prompt

## Code Refactoring

### Created Shared Utilities:
1. **`assetTypeUtil.ts`** - `getAssetType()` function eliminates 6
instances of `asset.tags?.[0] || 'output'`
2. **`assetUrlUtil.ts`** - `getAssetUrl()` function consolidates 3 URL
construction patterns
3. **`workflowActionsService.ts`** - Shared service for workflow
export/open operations
4. **`workflowExtractionUtil.ts`** - Extract workflows from jobs/assets
5. **`loaderNodeUtil.ts`** - Detect loader node types from filenames

### Improvements to Existing Code:
- Refactored to use `formatUtil.getMediaTypeFromFilename()`
- Extracted `deleteAssetApi()` helper to reduce deletion logic
duplication (~40 lines)
- Moved `isResultItemType` type guard to shared `typeGuardUtil.ts`
- Added 9 i18n strings for proper localization
- Added `@comfyorg/shared-frontend-utils` dependency

## Input Assets Support

Improved input assets to support workflow features where applicable:
- ✅ All media files (JPEG/PNG/MP4, etc.) → "Add to current workflow"
enabled
- ✅ PNG/WEBP/FLAC with embedded metadata → "Open/Export workflow"
enabled

## Impact

- **~150+ lines** of duplicate code eliminated
- **5 new utility files** created to improve code reusability
- **11 files** changed, **483 insertions**, **234 deletions**

## Testing

✅ TypeScript typecheck passed  
✅ ESLint passed  
✅ Knip passed

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6696-feat-Implement-media-asset-workflow-actions-with-shared-utilities-2ab6d73d365081fb8ae9d71ce6e38589)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <[email protected]>
Co-authored-by: GitHub Action <[email protected]>

Author: 3 people

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:",

pnpm-lock.yaml

@@ -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/locales/en/main.json

@@ -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/MediaAssetCard.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()
 }