From e0089d93d032b332a92171f2a2015112f206ddbb Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Thu, 5 Mar 2026 10:26:03 +0000 Subject: [PATCH] feat: App mode progress updates (#9375) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - move progress bar below preview thumbnail instead of overlaying it - add interactive pending placeholder - fix: scope in-progress items to active workflow in output history ## Screenshots (if applicable) image ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9375-feat-App-mode-progress-updates-3196d73d3650817ea891c9e744893846) by [Unito](https://www.unito.io) --- .../linearMode/LinearProgressBar.vue | 7 +++- .../extensions/linearMode/OutputHistory.vue | 36 +++++++++++----- .../OutputHistoryActiveQueueItem.test.ts | 42 +++++++++++++++++++ .../OutputHistoryActiveQueueItem.vue | 2 +- .../linearMode/OutputPreviewItem.vue | 7 +--- 5 files changed, 77 insertions(+), 17 deletions(-) create mode 100644 src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.test.ts diff --git a/src/renderer/extensions/linearMode/LinearProgressBar.vue b/src/renderer/extensions/linearMode/LinearProgressBar.vue index 55d0f77369..67ce37dc0a 100644 --- a/src/renderer/extensions/linearMode/LinearProgressBar.vue +++ b/src/renderer/extensions/linearMode/LinearProgressBar.vue @@ -8,11 +8,13 @@ defineOptions({ inheritAttrs: false }) const { class: className, overallOpacity = 1, - activeOpacity = 1 + activeOpacity = 1, + rounded = false } = defineProps<{ class?: string overallOpacity?: number activeOpacity?: number + rounded?: boolean }>() const { totalPercent, currentNodePercent } = useQueueProgress() @@ -24,16 +26,19 @@ const queueStore = useQueueStore() cn( 'relative h-2 bg-secondary-background transition-opacity', queueStore.runningTasks.length === 0 && 'opacity-0', + rounded && 'rounded-sm', className ) " >
diff --git a/src/renderer/extensions/linearMode/OutputHistory.vue b/src/renderer/extensions/linearMode/OutputHistory.vue index 12bea017bf..b281910fe6 100644 --- a/src/renderer/extensions/linearMode/OutputHistory.vue +++ b/src/renderer/extensions/linearMode/OutputHistory.vue @@ -55,6 +55,12 @@ const visibleHistory = computed(() => const selectableItems = computed(() => { const items: SelectionValue[] = [] + if ( + queueCount.value > 0 && + store.activeWorkflowInProgressItems.length === 0 + ) { + items.push({ id: 'slot:pending', kind: 'inProgress', itemId: 'pending' }) + } for (const item of store.activeWorkflowInProgressItems) { items.push({ id: `slot:${item.id}`, @@ -177,7 +183,7 @@ useResizeObserver(outputsRef, () => { }) watch( [ - () => store.inProgressItems.length, + () => store.activeWorkflowInProgressItems.length, () => visibleHistory.value[0]?.id, queueCount ], @@ -280,26 +286,36 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => { data-testid="linear-outputs" class="py-3 overflow-y-clip overflow-x-auto min-w-0" > -
+
-
- -
+ + +
+
({ + useI18n: () => ({ t: (key: string) => key }) +})) + +vi.mock('@/stores/commandStore', () => ({ + useCommandStore: () => ({ + execute: vi.fn() + }) +})) + +function mountComponent(queueCount: number) { + return shallowMount(OutputHistoryActiveQueueItem, { + props: { queueCount } + }) +} + +describe('OutputHistoryActiveQueueItem', () => { + it('shows badge when queueCount is 1', () => { + const wrapper = mountComponent(1) + const badge = wrapper.find('[aria-hidden="true"]') + expect(badge.exists()).toBe(true) + expect(badge.text()).toBe('1') + }) + + it('shows badge with correct count when queueCount is 3', () => { + const wrapper = mountComponent(3) + const badge = wrapper.find('[aria-hidden="true"]') + expect(badge.exists()).toBe(true) + expect(badge.text()).toBe('3') + }) + + it('hides badge when queueCount is 0', () => { + const wrapper = mountComponent(0) + const badge = wrapper.find('[aria-hidden="true"]') + expect(badge.exists()).toBe(false) + }) +}) diff --git a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue index a1b5d26b52..07706ed742 100644 --- a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue +++ b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue @@ -48,7 +48,7 @@ function clearQueue(close: () => void) {