fix: Media Assets group badge count to use previewable_outputs_count (#14347)

_Requested by **Alexis Rolland, Christian Byrne** · [Slack
thread](https://comfy-organization.slack.com/archives/C0A4XMHANP3/p1785382578658559?thread_ts=1785382578.658559&cid=C0A4XMHANP3)_

## Before

The Media Assets group badge on a job's stacked asset card reads
`outputs_count`, which counts every output item across every node for a
job regardless of file type. The expanded/drilldown view only ever
renders `task.previewableOutputs` (image, video, audio, 3D, text by
extension). Any job that also produces a non-previewable saved file
alongside real media — for example `SaveLatent`, which writes a
`.latent` file with no previewable extension or media type — gets that
file counted toward the badge but never shown when a user drills into
the group, so the badge shows a higher number than what's actually there
(matching the original report: badge says 3, expanding only shows 2).

## After

The badge now reads a new `previewable_outputs_count` field when the
backend provides it, computed server-side using the same
previewable-media definition the frontend's expanded view already
applies, so the count matches the drilldown for the common case.

## How

`src/platform/remote/comfyui/jobs/jobTypes.ts` adds
`previewable_outputs_count` to the job schema (same optional/nullable
shape as the existing `outputs_count`; this is a hand-written Zod schema
shared by both local ComfyUI and Cloud, not a generated client).
`src/stores/queueStore.ts` adds a `previewableOutputsCount` getter on
`TaskItemImpl` mirroring the existing `outputsCount` getter.
`src/stores/assetsStore.ts`'s `mapHistoryToAssets` now computes the
badge's `outputCount` as `task.previewableOutputsCount ??
task.outputsCount ?? task.previewableOutputs.length`, preferring the new
field, falling back to the old total when it's absent, and finally to
the existing client-side computation used today. Tests added/updated in
`assetsStore.test.ts` and `queueStore.test.ts` cover the getter and the
badge preferring the new field over the old one.

## Dependencies

This depends on two companion backend PRs adding
`previewable_outputs_count`, same field name and concept on both
distributions since local ComfyUI and Cloud both serve this frontend
through the same `/jobs` schema:
- Cloud: Comfy-Org/cloud#5857 (ingest API's
`JobEntry`/`JobDetailResponse`) — open, not merged as of 2026-08-09.
- Core/local ComfyUI: Comfy-Org/ComfyUI#15148
(`/api/jobs`) — open, not merged as of 2026-08-09.

Both are currently open (neither is a draft) and awaiting review/merge.
Until whichever backend a user is on ships its half, this frontend
change is inert and the badge keeps behaving exactly as it does today,
since the fallback chain covers the field's absence. On Comfy Cloud
specifically, the badge won't show corrected counts until #5857 merges
and deploys. For local ComfyUI, the badge already worked identically
before this change (`outputsCount ?? previewableOutputs.length`) and
continues to work identically once #15148 lands, since
`previewableOutputsCount` simply takes priority when present — no
regression either way for local users.

## Known cross-repo inconsistency (resolved)

Previously flagged here: `SaveText` saves its output under the `"files"`
media-type key with a real `.txt` filename, and this frontend
(`isPreviewableMediaType`/`isText`) and Core's `is_previewable()` both
treat that as previewable via a text-extension fallback, while Cloud's
`SupportsPreview()` (as of the initial #5857 draft) had no equivalent
text fallback — meaning a Cloud job with a `SaveText` output alongside
real media would under-count relative to the drilldown once
`previewable_outputs_count` shipped.

This is resolved: Cloud PR #5857 (merged) addresses it via
`isBadgePreviewable()`/`isCountablePreviewable()`, which explicitly
includes text, matching Core's `PREVIEWABLE_MEDIA_TYPES`. No cross-repo
inconsistency remains.

---
_Generated by [Claude Code](https://claude.ai/code)_

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>

Author: 3 people

browser_tests/tests/sidebar/assetsSidebarTab.spec.ts

@@ -93,14 +93,61 @@ const multiOutputJobDetail: JobDetail = {
   }
 }
 
+const previewableCountJob = createRouteMockJob({
+  id: 'previewable-count-job',
+  create_time: routeMockJobTimestamp - 4_000,
+  execution_start_time: routeMockJobTimestamp - 4_000,
+  execution_end_time: routeMockJobTimestamp,
+  preview_output: {
+    filename: 'previewable-count-a.png',
+    subfolder: '',
+    type: 'output',
+    nodeId: '4',
+    mediaType: 'images'
+  },
+  outputs_count: 3,
+  previewable_outputs_count: 2
+})
+
+// outputs_count (3) also counts the non-previewable "latents" file below;
+// previewable_outputs_count (2) counts only what the expanded view renders.
+const previewableCountJobDetail: JobDetail = {
+  ...previewableCountJob,
+  outputs: {
+    '4': {
+      images: [
+        {
+          filename: 'previewable-count-a.png',
+          subfolder: '',
+          type: 'output'
+        },
+        {
+          filename: 'previewable-count-b.png',
+          subfolder: '',
+          type: 'output'
+        }
+      ],
+      latents: [
+        {
+          filename: 'previewable-count.latent',
+          subfolder: '',
+          type: 'output'
+        }
+      ]
+    }
+  }
+}
+
 const generatedJobs: RawJobListItem[] = [alphaJob, betaJob]
 
 const viewFiles = {
   'alpha.png': {},
   'beta.png': {},
   'imported.png': {},
   'multi-output-a.png': {},
-  'multi-output-b.png': {}
+  'multi-output-b.png': {},
+  'previewable-count-a.png': {},
+  'previewable-count-b.png': {}
 }
 
 async function mockInputFiles(page: Page, files: readonly string[]) {
@@ -283,6 +330,31 @@ test.describe('FE-130 assets sidebar route mocks', () => {
     ).toHaveJSProperty('naturalWidth', 1)
   })
 
+  test('group badge shows previewable_outputs_count, matching the expanded drilldown', async ({
+    comfyPage,
+    jobsRoutes
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+
+    await jobsRoutes.mockJobsHistory([previewableCountJob])
+    await jobsRoutes.mockJobDetail(
+      'previewable-count-job',
+      previewableCountJobDetail
+    )
+
+    await comfyPage.setup()
+    await tab.open()
+
+    const badge = tab
+      .getAssetCardByName('previewable-count-a')
+      .getByRole('button', { name: 'See more outputs' })
+    await expect(badge).toHaveText('2')
+
+    await badge.click()
+    await expect(tab.backToAssetsButton).toBeVisible()
+    await expect(tab.assetCards).toHaveCount(2)
+  })
+
   test('deletes a generated output asset through explicit history refresh', async ({
     comfyPage,
     jobsRoutes

src/platform/remote/comfyui/jobs/jobTypes.ts

@@ -6,6 +6,7 @@
  * Jobs API provides a memory-optimized alternative to history API.
  */
 
+import { zJobEntry } from '@comfyorg/ingest-types/zod'
 import { z } from 'zod'
 
 import { resultItemType, zTaskOutput } from '@/schemas/apiSchema'
@@ -62,7 +63,13 @@ const zRawJobListItem = z
     execution_start_time: z.number().nullable().optional(),
     execution_end_time: z.number().nullable().optional(),
     preview_output: zPreviewOutput.nullable().optional(),
-    outputs_count: z.number().nullable().optional(),
+    // Sourced from the generated `@comfyorg/ingest-types` JobEntry schema
+    // (outputs_count/previewable_outputs_count), widened to nullable since
+    // local ComfyUI's /api/jobs sends explicit nulls where Cloud omits.
+    // .int() inherited from zJobEntry; intentionally stricter than the previous z.number()
+    outputs_count: zJobEntry.shape.outputs_count.nullable(),
+    previewable_outputs_count:
+      zJobEntry.shape.previewable_outputs_count.nullable(),
     execution_error: zExecutionError.nullable().optional(),
     workflow_id: z.string().nullable().optional(),
     priority: z.number().optional()

src/stores/assetsStore.test.ts

@@ -122,10 +122,12 @@ vi.mock('@/stores/queueStore', () => ({
       | undefined
     public jobId: string
     public outputsCount: number | null
+    public previewableOutputsCount: number | undefined
 
     constructor(public job: JobListItem) {
       this.jobId = job.id
       this.outputsCount = job.outputs_count ?? null
+      this.previewableOutputsCount = job.previewable_outputs_count ?? undefined
       if (mockOutputOverrides.value) {
         this.flatOutputs = mockOutputOverrides.value
         const previewable = mockOutputOverrides.value.filter(
@@ -648,6 +650,33 @@ describe('assetsStore - Refactored (Option A)', () => {
       expect(asset.user_metadata).toHaveProperty('allOutputs')
       expect(Array.isArray(asset.user_metadata!.allOutputs)).toBe(true)
     })
+
+    it('prefers previewable_outputs_count over outputs_count for the group badge', async () => {
+      const job: JobListItem = {
+        ...createMockJobItem(0),
+        outputs_count: 3,
+        previewable_outputs_count: 2
+      }
+      vi.mocked(api.getHistory).mockResolvedValue([job])
+
+      await store.updateHistory()
+
+      const asset = store.historyAssets[0]
+      expect(asset.user_metadata!.outputCount).toBe(2)
+    })
+
+    it('falls back to outputs_count when previewable_outputs_count is absent', async () => {
+      const job: JobListItem = {
+        ...createMockJobItem(0),
+        outputs_count: 3
+      }
+      vi.mocked(api.getHistory).mockResolvedValue([job])
+
+      await store.updateHistory()
+
+      const asset = store.historyAssets[0]
+      expect(asset.user_metadata!.outputCount).toBe(3)
+    })
   })
 
   describe('Cover Image Selection', () => {

src/stores/assetsStore.ts

@@ -78,7 +78,10 @@ function mapHistoryToAssets(historyItems: JobListItem[]): AssetItem[] {
 
     assetItem.user_metadata = {
       ...assetItem.user_metadata,
-      outputCount: task.outputsCount ?? task.previewableOutputs.length,
+      outputCount:
+        task.previewableOutputsCount ??
+        task.outputsCount ??
+        task.previewableOutputs.length,
       allOutputs: task.previewableOutputs
     }
 

src/stores/queueStore.test.ts

@@ -280,6 +280,41 @@ describe('TaskItemImpl', () => {
       expect(taskItem.executionError).toEqual(errorDetail)
     })
   })
+
+  describe('previewableOutputsCount', () => {
+    it('returns undefined when the job has no previewable_outputs_count', () => {
+      const job = createHistoryJob(0, 'job-id')
+      const taskItem = new TaskItemImpl(job)
+      expect(taskItem.previewableOutputsCount).toBeUndefined()
+    })
+
+    it('returns the server-provided previewable_outputs_count', () => {
+      const job: JobListItem = {
+        ...createHistoryJob(0, 'job-id'),
+        previewable_outputs_count: 2
+      }
+      const taskItem = new TaskItemImpl(job)
+      expect(taskItem.previewableOutputsCount).toBe(2)
+    })
+
+    it('returns 0 when previewable_outputs_count is 0', () => {
+      const job: JobListItem = {
+        ...createHistoryJob(0, 'job-id'),
+        previewable_outputs_count: 0
+      }
+      const taskItem = new TaskItemImpl(job)
+      expect(taskItem.previewableOutputsCount).toBe(0)
+    })
+
+    it('normalizes an explicit null previewable_outputs_count to undefined', () => {
+      const job: JobListItem = {
+        ...createHistoryJob(0, 'job-id'),
+        previewable_outputs_count: null
+      }
+      const taskItem = new TaskItemImpl(job)
+      expect(taskItem.previewableOutputsCount).toBeUndefined()
+    })
+  })
 })
 
 describe('useQueueStore', () => {

src/stores/queueStore.ts

@@ -330,6 +330,11 @@ export class TaskItemImpl {
     return this.job.outputs_count ?? undefined
   }
 
+  /** Absent on backends or jobs that predate this field. */
+  get previewableOutputsCount(): number | undefined {
+    return this.job.previewable_outputs_count ?? undefined
+  }
+
   get status() {
     return this.job.status
   }
@@ -580,7 +585,11 @@ export const useQueueStore = defineStore('queue', () => {
           const existing = existingByJobId.get(job.id)
           if (!existing) return new TaskItemImpl(job)
           // Recreate if outputs_count changed to ensure lazy loading works
-          if (existing.outputsCount !== (job.outputs_count ?? undefined)) {
+          if (
+            existing.outputsCount !== (job.outputs_count ?? undefined) ||
+            existing.previewableOutputsCount !==
+              (job.previewable_outputs_count ?? undefined)
+          ) {
             return new TaskItemImpl(job)
           }
           return existing

src/stores/workspace/assetsSidebarBadgeStore.ts

@@ -6,8 +6,9 @@ import { useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 const getAddedAssetCount = (task: TaskItemImpl): number => {
-  if (typeof task.outputsCount === 'number') {
-    return Math.max(task.outputsCount, 0)
+  const count = task.previewableOutputsCount ?? task.outputsCount
+  if (typeof count === 'number') {
+    return Math.max(count, 0)
   }
 
   return task.previewOutput ? 1 : 0