From 3eb65f47151af4fb4ccfaf33d6e77154546e7259 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 15 Aug 2026 00:06:38 -0600
Subject: [PATCH] refac

---
 .../Markdown/ConsecutiveDetailsGroup.svelte   | 21 +++++++++++-----
 .../chat/Messages/structuredOutput.ts         | 12 +++++++--
 .../components/common/ToolCallDisplay.svelte  | 25 +++++++++++++------
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte b/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
index 443ca05932..e566ad6c6e 100644
--- a/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
+++ b/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { decode } from 'html-entities';
 	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
@@ -14,7 +16,7 @@
 
 	import { settings } from '$lib/stores';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<Writable<i18nType>>('i18n');
 
 	export let id = '';
 	export let tokens: Array<{
@@ -53,7 +55,14 @@
 	$: pendingToolTokens = tokens.filter(
 		(t) => t?.attributes?.type === 'tool_calls' && t?.attributes?.status === 'pending'
 	);
-	$: hasPending = pendingToolTokens.length > 0;
+	$: hasActiveToolCalls = tokens.some(
+		(t) =>
+			t?.attributes?.type === 'tool_calls' &&
+			t?.attributes?.status !== 'rejected' &&
+			t?.attributes?.status !== 'failed' &&
+			t?.attributes?.status !== 'incomplete' &&
+			t?.attributes?.done !== 'true'
+	);
 	$: hasRejected = tokens.some(
 		(t) => t?.attributes?.type === 'tool_calls' && t?.attributes?.status === 'rejected'
 	);
@@ -89,7 +98,7 @@
 
 		if (toolCallCount > 0) {
 			// Group by tool name and show counts
-			const nameCounts = {};
+			const nameCounts: Record<string, number> = {};
 			tokens
 				.filter((t) => t?.attributes?.type === 'tool_calls')
 				.forEach((t) => {
@@ -115,7 +124,7 @@
 		return detail;
 	})();
 
-	$: prefixText = hasPending ? $i18n.t('Exploring') : $i18n.t('Explored');
+	$: prefixText = hasActiveToolCalls ? $i18n.t('Exploring') : $i18n.t('Explored');
 </script>
 
 <div {id} class="w-full min-w-0">
@@ -140,7 +149,7 @@
 		>
 			<div class="flex items-center gap-1.5 min-w-0">
 				<!-- Status icon -->
-				{#if hasPending}
+				{#if hasActiveToolCalls}
 					<div>
 						<Spinner className="size-4" />
 					</div>
@@ -160,7 +169,7 @@
 
 				<!-- Summary text -->
 				<div class="flex-1 line-clamp-1">
-					<span class="text-gray-600 dark:text-gray-300 {hasPending ? 'shimmer' : ''}"
+					<span class="text-gray-600 dark:text-gray-300 {hasActiveToolCalls ? 'shimmer' : ''}"
 						>{prefixText}</span
 					>
 					{#if summaryText}
diff --git a/src/lib/components/chat/Messages/structuredOutput.ts b/src/lib/components/chat/Messages/structuredOutput.ts
index 40e509457a..bb5eee4e66 100644
--- a/src/lib/components/chat/Messages/structuredOutput.ts
+++ b/src/lib/components/chat/Messages/structuredOutput.ts
@@ -146,7 +146,9 @@ function buildToolCallToken(item: OutputItem, toolOutputByCallId: Record<string,
 	const callId = item.call_id ?? item.id ?? '';
 	const resultItem = toolOutputByCallId[callId];
 	const status = String(item.status ?? '');
-	const isDone = isDoneStatus(item.status) || !!resultItem;
+	const isPending = status === 'pending';
+	const isDone = !!resultItem || status === 'failed' || status === 'incomplete';
+	const isExecuting = !isDone && status === 'completed';
 	let name = item.name ?? '';
 	if (name === 'delegate_task') {
 		try {
@@ -164,7 +166,13 @@ function buildToolCallToken(item: OutputItem, toolOutputByCallId: Record<string,
 
 	return {
 		summary:
-			status === 'pending' ? 'Tool Approval Needed' : isDone ? 'Tool Executed' : 'Executing...',
+			isPending
+				? 'Tool Approval Needed'
+				: isDone
+					? 'Tool Executed'
+					: isExecuting
+						? 'Executing...'
+						: 'Preparing...',
 		text: getToolResultText(resultItem),
 		attributes: {
 			type: 'tool_calls',
diff --git a/src/lib/components/common/ToolCallDisplay.svelte b/src/lib/components/common/ToolCallDisplay.svelte
index c3105bca44..155f07cd36 100644
--- a/src/lib/components/common/ToolCallDisplay.svelte
+++ b/src/lib/components/common/ToolCallDisplay.svelte
@@ -3,7 +3,9 @@
 	import { v4 as uuidv4 } from 'uuid';
 
 	import { getContext } from 'svelte';
-	const i18n = getContext('i18n');
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
+	const i18n = getContext<Writable<i18nType>>('i18n');
 
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
@@ -100,9 +102,14 @@
 		open || needsApproval || needsInput || (Array.isArray(embeds) && embeds.length > 0)
 			? decode(attributes?.arguments ?? '')
 			: '';
-	$: isDone = attributes?.done === 'true';
 	$: isRejected = attributes?.status === 'rejected';
-	$: isExecuting = !needsApproval && !needsInput && attributes?.done && attributes?.done !== 'true';
+	$: isDone =
+		attributes?.done === 'true' ||
+		attributes?.status === 'failed' ||
+		attributes?.status === 'incomplete';
+	$: isExecuting = !isDone && !isRejected && attributes?.status === 'completed';
+	$: isPreparing = !isDone && !isRejected && !needsApproval && !needsInput && !isExecuting;
+	$: isActive = isPreparing || isExecuting;
 
 	$: parsedArgs = parseArguments(args);
 	$: parsedResult = parseJSONString(result);
@@ -151,12 +158,12 @@
 			on:keydown={toggleOpenOnKeydown}
 		>
 			<div
-				class="w-full min-w-0 max-w-full font-normal flex items-center gap-1.5 {isExecuting
+				class="w-full min-w-0 max-w-full font-normal flex items-center gap-1.5 {isActive
 					? 'shimmer'
 					: ''}"
 			>
 				<!-- Status icon -->
-				{#if isExecuting}
+				{#if isActive}
 					<div>
 						<Spinner className="size-4" />
 					</div>
@@ -180,14 +187,16 @@
 					<span class="@md:hidden text-black dark:text-white">{attributes.name}</span>
 					<!-- Full label (md and above) -->
 					<span class="hidden @md:inline font-normal">
-						{#if isDone}
+						{#if isRejected}
+							{$i18n.t('Denied {{NAME}}', { NAME: attributes.name })}
+						{:else if isDone}
 							{$i18n.t('View Result from {{NAME}}', { NAME: attributes.name })}
 						{:else if needsInput}
 							{$i18n.t('Input needed')}
 						{:else if needsApproval}
 							{$i18n.t('Allow {{NAME}}?', { NAME: attributes.name })}
-						{:else if isRejected}
-							{$i18n.t('Denied {{NAME}}', { NAME: attributes.name })}
+						{:else if isPreparing}
+							{$i18n.t('Preparing {{NAME}}...', { NAME: attributes.name })}
 						{:else}
 							{$i18n.t('Executing {{NAME}}...', { NAME: attributes.name })}
 						{/if}