App Mode - Progress/outputs - 5 (#9028)

## Summary

Adds new store for tracking outputs lin linear mode and reworks outputs
to display the following: skeleton -> latent preview -> node output ->
job result.

## Changes

- **What**: 
- New store for wrangling various events into a usable list of live
outputs
- Replace manual list with reka-ui list box
- Extract various composables

## Review Focus
Getting all the events and stores aligned to happen consistently and in
the correct order was a challenge, unifying the various sources. so
suggestions there would be good

## Screenshots (if applicable)


https://github.com/user-attachments/assets/13449780-ee48-4d9a-b3aa-51dca0a124c7

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9028-App-Mode-Progress-outputs-5-30d6d73d3650817aaa9dee622fffe426)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

src/renderer/extensions/linearMode/flattenNodeOutput.test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest'
+
+import { flattenNodeOutput } from '@/renderer/extensions/linearMode/flattenNodeOutput'
+import type { NodeExecutionOutput } from '@/schemas/apiSchema'
+
+function makeOutput(
+  overrides: Partial<NodeExecutionOutput> = {}
+): NodeExecutionOutput {
+  return { ...overrides }
+}
+
+describe(flattenNodeOutput, () => {
+  it('returns empty array for output with no known media types', () => {
+    const result = flattenNodeOutput(['1', makeOutput({ text: 'hello' })])
+    expect(result).toEqual([])
+  })
+
+  it('flattens images into ResultItemImpl instances', () => {
+    const output = makeOutput({
+      images: [
+        { filename: 'a.png', subfolder: '', type: 'output' },
+        { filename: 'b.png', subfolder: 'sub', type: 'output' }
+      ]
+    })
+
+    const result = flattenNodeOutput(['42', output])
+
+    expect(result).toHaveLength(2)
+    expect(result[0].filename).toBe('a.png')
+    expect(result[0].nodeId).toBe('42')
+    expect(result[0].mediaType).toBe('images')
+    expect(result[1].filename).toBe('b.png')
+    expect(result[1].subfolder).toBe('sub')
+  })
+
+  it('flattens audio outputs', () => {
+    const output = makeOutput({
+      audio: [{ filename: 'sound.wav', subfolder: '', type: 'output' }]
+    })
+
+    const result = flattenNodeOutput([7, output])
+
+    expect(result).toHaveLength(1)
+    expect(result[0].mediaType).toBe('audio')
+    expect(result[0].nodeId).toBe(7)
+  })
+
+  it('flattens multiple media types in a single output', () => {
+    const output = makeOutput({
+      images: [{ filename: 'img.png', subfolder: '', type: 'output' }],
+      video: [{ filename: 'vid.mp4', subfolder: '', type: 'output' }]
+    })
+
+    const result = flattenNodeOutput(['1', output])
+
+    expect(result).toHaveLength(2)
+    const types = result.map((r) => r.mediaType)
+    expect(types).toContain('images')
+    expect(types).toContain('video')
+  })
+
+  it('handles gifs and 3d output types', () => {
+    const output = makeOutput({
+      gifs: [
+        { filename: 'anim.gif', subfolder: '', type: 'output' }
+      ] as NodeExecutionOutput['gifs'],
+      '3d': [
+        { filename: 'model.glb', subfolder: '', type: 'output' }
+      ] as NodeExecutionOutput['3d']
+    })
+
+    const result = flattenNodeOutput(['5', output])
+
+    expect(result).toHaveLength(2)
+    const types = result.map((r) => r.mediaType)
+    expect(types).toContain('gifs')
+    expect(types).toContain('3d')
+  })
+
+  it('ignores empty arrays', () => {
+    const output = makeOutput({ images: [], audio: [] })
+    const result = flattenNodeOutput(['1', output])
+    expect(result).toEqual([])
+  })
+})