fix(queue): identify rows by queue item ID

invokeai/frontend/webv2/public/locales/en.json

@@ -3031,7 +3031,6 @@
       },
       "noCurrentItem": "No current item",
       "noCurrentItemDescription": "The scoped queue has no in-progress item to cancel.",
-      "noPrompt": "No prompt",
       "openQueue": "Open Queue",
       "pauseProcessor": "Pause Processor",
       "processorPaused": "Processor paused",

invokeai/frontend/webv2/src/features/queue/ui/QueueItemRow.browser.test.tsx

@@ -13,7 +13,12 @@ import type * as QueueDataStore from './queueDataStore';
 import { QueueItemRow } from './QueueItemRow';
 import { QueueUiProvider, type QueueUiAdapter } from './QueueUiContext';
 
-vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key: string) => key }) }));
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, values?: { id?: number }) =>
+      key === 'widgets.queue.itemTitle' ? `Queue item #${values?.id}` : key,
+  }),
+}));
 const commands = vi.hoisted(() => ({
   cancelItem: vi.fn(() => Promise.resolve()),
   retryItems: vi.fn((itemIds: number[]) => Promise.resolve(itemIds)),
@@ -78,13 +83,15 @@ afterEach(async () => {
   host.remove();
 });
 
-const render = async (ui: QueueUiAdapter, queueItem: QueueItemReadModel) => {
+const render = async (ui: QueueUiAdapter, ...queueItems: QueueItemReadModel[]) => {
   await act(() =>
     root.render(
       <ChakraProvider value={system}>
         <QueueUiProvider adapter={ui}>
           <div role="list">
-            <QueueItemRow item={queueItem} />
+            {queueItems.map((queueItem) => (
+              <QueueItemRow key={queueItem.id} item={queueItem} />
+            ))}
           </div>
         </QueueUiProvider>
       </ChakraProvider>
@@ -104,7 +111,8 @@ describe('QueueItemRow', () => {
     expect(card.querySelector('[role="presentation"] [data-list-primary]')).toBe(primary());
     expect(primary().tagName).toBe('BUTTON');
     expect(primary().getAttribute('aria-expanded')).toBe('false');
-    expect(primary().textContent).toContain('A castle at dusk');
+    expect(primary().textContent).toContain('Queue item #7');
+    expect(card.textContent).not.toContain('A castle at dusk');
 
     const cancel = host.querySelector<HTMLButtonElement>('button[aria-label="widgets.queue.cancelItem"]')!;
 
@@ -119,10 +127,24 @@ describe('QueueItemRow', () => {
     expect(primary().getAttribute('aria-expanded')).toBe('true');
     // The details stay inside the list item, so they read as part of the row.
     expect(card.textContent).toContain('common.prompt');
+    expect(card.textContent).toContain('A castle at dusk');
+    expect(primary().textContent).toContain('Queue item #7');
 
     await act(() => primary().click());
     expect(primary().getAttribute('aria-expanded')).toBe('false');
     expect(card.textContent).not.toContain('common.prompt');
+    expect(card.textContent).not.toContain('A castle at dusk');
+  });
+
+  it('distinguishes workflow rows without prompt metadata by their queue item ids', async () => {
+    await render(adapter(), item({ fieldValues: [], id: 21 }), item({ fieldValues: [], id: 22 }));
+
+    const rows = host.querySelectorAll<HTMLElement>('[data-list-primary]');
+
+    expect(rows).toHaveLength(2);
+    expect(rows[0]!.textContent).toContain('Queue item #21');
+    expect(rows[1]!.textContent).toContain('Queue item #22');
+    expect(host.textContent).not.toContain('widgets.queue.noPrompt');
   });
 
   it('renders a row without viewable details as static content, not a button', async () => {

invokeai/frontend/webv2/src/features/queue/ui/QueueItemRow.tsx

@@ -2,7 +2,7 @@
 import type { QueueItemReadModel } from '@features/queue/core/types';
 
 import { Box, HStack, Icon, Text } from '@chakra-ui/react';
-import { extractGenerationMeta, getResultImageName } from '@features/queue/core/generationMeta';
+import { getResultImageName } from '@features/queue/core/generationMeta';
 import { parseQueueItemOriginProjectId } from '@features/queue/data/events';
 import { useItemProgress } from '@features/queue/data/itemProgressStore';
 import { ListItem } from '@platform/ui/list/ListItem';
@@ -34,7 +34,6 @@ export const QueueItemRow = memo(
     // Warm the actions chunk on intent so the first expand has nothing to wait for.
     const preload = useCallback(() => preloadItemActions?.(), [preloadItemActions]);
     const consumedRevealRequestIdRef = useRef<number | null>(null);
-    const meta = extractGenerationMeta(item);
     const duration = formatDuration(item.startedAt, item.completedAt);
     const age = formatCompactAge(item.completedAt ?? item.createdAt);
     const ageLabel = [duration, age].filter(Boolean).join(' · ');
@@ -107,8 +106,7 @@ export const QueueItemRow = memo(
           isExpanded={canExpand ? expanded : undefined}
           leading={<QueueItemThumbnail boxSize="8" imageName={resultImageName} liveImage={liveImage} />}
           role="presentation"
-          title={meta.positivePrompt?.trim() || t('widgets.queue.noPrompt')}
-          titleTruncate="end"
+          title={t('widgets.queue.itemTitle', { id: item.id })}
           trailing={
             canExpand ? (
               <Icon