[feat] Implement media asset workflow actions and refactor duplications

Implemented 4 missing workflow features for media assets:
- copyJobId: Fixed to properly extract promptId from metadata
- addWorkflow: Add loader nodes (LoadImage/LoadVideo/LoadAudio) to canvas
- openWorkflow: Open workflow from asset metadata/embedded PNG in new tab
- exportWorkflow: Export workflow as JSON file

Created shared utilities to eliminate code duplication:
- assetTypeUtil.ts: Extract asset type with fallback (replaced 6 duplications)
- assetUrlUtil.ts: Construct asset URLs (replaced 3 duplications)
- workflowActionsService.ts: Shared workflow export/open operations
- workflowExtractionUtil.ts: Extract workflows from jobs/assets
- loaderNodeUtil.ts: Detect loader node types from filenames

Refactored existing code:
- Used formatUtil.getMediaTypeFromFilename() in loaderNodeUtil
- Extracted deleteAssetApi() helper to reduce deletion logic duplication
- Moved isResultItemType type guard to shared typeGuardUtil.ts
- Added 9 i18n strings for proper localization
- Added @comfyorg/shared-frontend-utils dependency

Input assets now support workflow features where applicable:
- All media files (JPEG/PNG/MP4/etc) can be added to current workflow
- PNG/WEBP/FLAC files with embedded metadata support open/export workflow

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

Co-Authored-By: Claude <noreply@anthropic.com>

Author: viva-jinyi

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

@@ -2044,7 +2044,16 @@
       "downloadsStarted": "Started downloading {count} file(s)",
       "assetsDeletedSuccessfully": "{count} asset(s) deleted successfully",
       "failedToDeleteAssets": "Failed to delete selected assets"
-    }
+    },
+    "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

@@ -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(() => {