From f4f11d667d146346b10de05b8fb84de46178d275 Mon Sep 17 00:00:00 2001
From: wannes depuydt <depuydtwannes2010@gmail.com>
Date: Wed, 8 Apr 2026 16:25:25 +0200
Subject: [PATCH] feat(ui): improve grouped tool-call summaries and status
 rendering

---
 docs/TOOL_CALL_GROUPING.md                    |  132 ++
 .../Markdown/ConsecutiveDetailsGroup.svelte   |  355 ++-
 .../Messages/Markdown/MarkdownTokens.svelte   |   88 +-
 .../components/common/ToolCallDisplay.svelte  | 1953 +++++++++++++++--
 src/lib/utils/toolCallInlineStyles.ts         |   12 +
 src/lib/utils/toolCallPresentation.ts         |  717 ++++++
 6 files changed, 3071 insertions(+), 186 deletions(-)
 create mode 100644 docs/TOOL_CALL_GROUPING.md
 create mode 100644 src/lib/utils/toolCallInlineStyles.ts
 create mode 100644 src/lib/utils/toolCallPresentation.ts

diff --git a/docs/TOOL_CALL_GROUPING.md b/docs/TOOL_CALL_GROUPING.md
new file mode 100644
index 0000000000..ab145ad145
--- /dev/null
+++ b/docs/TOOL_CALL_GROUPING.md
@@ -0,0 +1,132 @@
+# Tool Call Grouping System
+
+This document explains how grouped tool-call labels (for example "Reviewed Chats" and "Managed memory") are matched, ordered, and rendered.
+
+## Where Group Ordering Lives
+
+The group matching and ordering are defined in:
+
+- `src/lib/utils/toolCallPresentation.ts`
+- Constant: `TOOL_COMBINATION_RULES`
+
+Rules are evaluated in ascending `order`.
+
+- Smaller `order` = higher priority (matched first)
+- First matching rule wins
+
+## Match System (Easy To Edit)
+
+Each rule supports these match clauses:
+
+- `allOf`: every tool name listed must be present
+- `anyOf`: at least one tool name listed must be present
+- `noneOf`: none of the listed tool names may be present
+- `onlyOf`: all tools in the group must be in this allow-list (no extra tools)
+
+Rule shape:
+
+```ts
+{
+  id: 'unique.rule.id',
+  order: 100,
+  iconKey: 'chat',
+  pendingPrefix: 'Reviewing Chats',
+  donePrefix: 'Reviewed Chats',
+  match: {
+    allOf: ['search_chats'],
+    anyOf: ['view_chat'],
+    noneOf: ['delete_memory'],
+    onlyOf: ['search_chats', 'view_chat']
+  },
+  showDetailList: false
+}
+```
+
+`onlyOf` is optional. Use it when a rule should only match a bounded set of tools.
+
+## Named Group Behavior
+
+When a rule matches, the grouped summary uses the rule prefix and icon.
+
+By default, named groups hide the trailing raw tool list (for example "search_chats, view_chat").
+
+- Default is `showDetailList: false`
+- Set `showDetailList: true` only when you explicitly want to append the raw tool names
+
+## Add A New Group
+
+1. Open `src/lib/utils/toolCallPresentation.ts`.
+2. Add a rule to `TOOL_COMBINATION_RULES`.
+3. Choose an `order` that places it before/after related rules.
+4. Ensure `id` is unique.
+5. Set prefixes and icon.
+6. Set `showDetailList` only if needed.
+
+## Practical Ordering Strategy
+
+Use these ranges to keep rules organized:
+
+- `100-299`: web and knowledge research
+- `300-499`: chats and notes review
+- `500-699`: channels and media
+- `700-999`: broad fallback groups (memory/notes/code)
+
+Put narrow/specific rules before broad/fallback rules.
+
+## Examples
+
+### 1) Web search + code execution (but not note viewing)
+
+```ts
+{
+  id: 'web.search_and_execute_code',
+  order: 150,
+  iconKey: 'terminal',
+  pendingPrefix: 'Researching and Executing',
+  donePrefix: 'Researched and Executed',
+  match: {
+    allOf: ['search_web', 'execute_code'],
+    noneOf: ['view_note'],
+    onlyOf: ['search_web', 'fetch_url', 'execute_code']
+  }
+}
+```
+
+### 2) New "Reviewed Tasks" group
+
+```ts
+{
+  id: 'tasks.review',
+  order: 350,
+  iconKey: 'note',
+  pendingPrefix: 'Reviewing Tasks',
+  donePrefix: 'Reviewed Tasks',
+  match: {
+    allOf: ['search_tasks'],
+    anyOf: ['view_task']
+  }
+}
+```
+
+### 3) Broad fallback for any task activity
+
+```ts
+{
+  id: 'tasks.manage',
+  order: 950,
+  iconKey: 'note',
+  pendingPrefix: 'Managing tasks',
+  donePrefix: 'Managed tasks',
+  match: {
+    anyOf: ['search_tasks', 'view_task', 'create_task', 'update_task', 'delete_task']
+  }
+}
+```
+
+## Rendering Location
+
+The grouped summary UI reads these values in:
+
+- `src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte`
+
+It now suppresses the trailing list whenever a named group is active unless `showDetailList` is set to `true` in the matched rule.
diff --git a/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte b/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
index 598511eb25..1da1adb6d0 100644
--- a/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
+++ b/src/lib/components/chat/Messages/Markdown/ConsecutiveDetailsGroup.svelte
@@ -1,20 +1,42 @@
 <script lang="ts">
 	import { decode } from 'html-entities';
 	import { getContext } from 'svelte';
+	import type { Readable } from 'svelte/store';
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
-	import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
 	import Sparkles from '$lib/components/icons/Sparkles.svelte';
-	import CheckCircle from '$lib/components/icons/CheckCircle.svelte';
+	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
+	import Link from '$lib/components/icons/Link.svelte';
+	import Photo from '$lib/components/icons/Photo.svelte';
+	import Terminal from '$lib/components/icons/Terminal.svelte';
+	import Database from '$lib/components/icons/Database.svelte';
+	import Note from '$lib/components/icons/Note.svelte';
+	import ChatBubble from '$lib/components/icons/ChatBubble.svelte';
+	import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
+	import BookOpen from '$lib/components/icons/BookOpen.svelte';
+	import ClockRotateRight from '$lib/components/icons/ClockRotateRight.svelte';
+	import Document from '$lib/components/icons/Document.svelte';
 	import FullHeightIframe from '$lib/components/common/FullHeightIframe.svelte';
 
 	import { settings } from '$lib/stores';
+	import {
+		INLINE_TOOL_CHEVRON_CLASS,
+		INLINE_TOOL_ICON_CENTER_OFFSET_CLASS,
+		INLINE_TOOL_ROW_CLASS,
+		INLINE_TOOL_TITLE_CLASS,
+		INLINE_TOOL_TRIGGER_CLASS
+	} from '$lib/utils/toolCallInlineStyles';
+	import {
+		getToolPresentation,
+		getToolCombinationSummary,
+		type ToolIconKey
+	} from '$lib/utils/toolCallPresentation';
 
-	const i18n = getContext('i18n');
+	const i18n = getContext<Readable<{ t: (key: string, params?: Record<string, unknown>) => string }>>('i18n');
 
 	export let id = '';
 	export let tokens: Array<{
@@ -30,24 +52,198 @@
 	}> = [];
 
 	export let messageDone = true;
+	export let groupClosed = false;
 
-	let open = $settings?.expandDetails ?? false;
+	let open = false;
+	let allEmbeds: Array<{ name: string; embed: string; args?: string }> = [];
+	type ToolCallStatus = 'success' | 'failed' | 'neutral';
+	type SummaryIconEntry = { iconKey: ToolIconKey; status: ToolCallStatus };
+	let summaryIconEntries: SummaryIconEntry[] = [];
+	const STACK_STEP_PX = 11;
 
-	function parseJSONString(str: string) {
+	const FAILURE_TEXT_PATTERN = /error|failed|exception|traceback/i;
+	const FAILURE_STATUS_PATTERN = /error|fail|failed|exception/;
+	const NO_RESULTS_TEXT_PATTERN = /\b(?:no|0)\s+(?:result|results|match|matches)\b|not\s+found|none\s+found|empty/i;
+
+	function parseJSONString(str: string): unknown {
 		try {
 			return parseJSONString(JSON.parse(str));
-		} catch (e) {
+		} catch (_parseError) {
+			void _parseError;
 			return str;
 		}
 	}
 
-	$: toolCallCount = tokens.filter((t) => t?.attributes?.type === 'tool_calls').length;
-	$: reasoningCount = tokens.filter((t) => t?.attributes?.type === 'reasoning').length;
-	$: hasPending =
-		!messageDone &&
-		tokens.some((t) => t?.attributes?.done !== undefined && t?.attributes?.done !== 'true');
+	function getDecodedResult(token: (typeof tokens)[number]): string {
+		const raw = (token?.attributes as { result?: string } | undefined)?.result;
+		return decode(raw ?? '');
+	}
 
+	function isFailedResult(rawResult: string): boolean {
+		if (!rawResult.trim()) {
+			return false;
+		}
+
+		const parsed = parseJSONString(rawResult);
+
+		if (typeof parsed === 'string') {
+			return FAILURE_TEXT_PATTERN.test(parsed);
+		}
+
+		if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+			return false;
+		}
+
+		const record = parsed as Record<string, unknown>;
+		const success = record.success;
+		const ok = record.ok;
+		const status = String(record.status ?? '').toLowerCase();
+		const hasFailureStatus = FAILURE_STATUS_PATTERN.test(status);
+		const errorField = record.error;
+		const hasErrorField =
+			errorField !== undefined &&
+			errorField !== null &&
+			String(errorField).trim().length > 0;
+		const message = String(record.message ?? record.result ?? '').trim();
+
+		return (
+			success === false ||
+			ok === false ||
+			hasFailureStatus ||
+			hasErrorField ||
+			FAILURE_TEXT_PATTERN.test(message)
+		);
+	}
+
+	function isEmptyCollection(value: unknown): boolean {
+		if (Array.isArray(value)) {
+			return value.length === 0;
+		}
+
+		if (value && typeof value === 'object') {
+			return Object.keys(value as Record<string, unknown>).length === 0;
+		}
+
+		return false;
+	}
+
+	function isNoResultsResult(rawResult: string): boolean {
+		if (!rawResult.trim()) {
+			return true;
+		}
+
+		const parsed = parseJSONString(rawResult);
+
+		if (typeof parsed === 'string') {
+			const text = parsed.trim();
+			return text.length === 0 || NO_RESULTS_TEXT_PATTERN.test(text);
+		}
+
+		if (Array.isArray(parsed)) {
+			return parsed.length === 0;
+		}
+
+		if (!parsed || typeof parsed !== 'object') {
+			return false;
+		}
+
+		const record = parsed as Record<string, unknown>;
+		const countValues = [record.total, record.count, record.results_count, record.match_count];
+		if (countValues.some((value) => Number(value) === 0)) {
+			return true;
+		}
+
+		const payloadCandidates = [
+			record.results,
+			record.items,
+			record.matches,
+			record.data,
+			record.channels,
+			record.messages,
+			record.chats,
+			record.notes,
+			record.memories,
+			record.files,
+			record.result
+		];
+
+		if (payloadCandidates.some((value) => isEmptyCollection(value))) {
+			return true;
+		}
+
+		const message = String(record.message ?? '').trim();
+		if (message && NO_RESULTS_TEXT_PATTERN.test(message)) {
+			return true;
+		}
+
+		return Object.keys(record).length === 0;
+	}
+
+	function getToolCallStatus(token: (typeof tokens)[number]): ToolCallStatus {
+		const rawResult = getDecodedResult(token);
+		const failed = isFailedResult(rawResult);
+		if (failed) {
+			return 'failed';
+		}
+
+		const toolName = String(token?.attributes?.name ?? '').toLowerCase();
+		const isDiscoveryTool = /(search|list|query|find)/.test(toolName);
+		if (token?.attributes?.done === 'true' && isDiscoveryTool && isNoResultsResult(rawResult)) {
+			return 'neutral';
+		}
+
+		if (token?.attributes?.done === 'true') {
+			return 'success';
+		}
+
+		return 'neutral';
+	}
+
+	function getStatusClass(status: ToolCallStatus): string {
+		if (status === 'failed') {
+			return 'text-rose-500 dark:text-rose-400';
+		}
+
+		if (status === 'success') {
+			return 'text-emerald-500 dark:text-emerald-400';
+		}
+
+		return 'text-gray-400 dark:text-gray-500';
+	}
+
+	$: toolCallCount = tokens.filter((t) => t?.attributes?.type === 'tool_calls').length;
 	$: codeInterpreterCount = tokens.filter((t) => t?.attributes?.type === 'code_interpreter').length;
+	$: lastToolCall = [...tokens]
+		.reverse()
+		.find((t) => t?.attributes?.type === 'tool_calls');
+	$: hasPending = !groupClosed && !messageDone && (lastToolCall?.attributes?.done ?? 'false') !== 'true';
+
+	function getSummaryIcon(iconKey: ToolIconKey): typeof GlobeAlt {
+		const iconMap: Record<ToolIconKey, typeof GlobeAlt> = {
+			globe: GlobeAlt,
+			link: Link,
+			photo: Photo,
+			terminal: Terminal,
+			database: Database,
+			note: Note,
+			chat: ChatBubble,
+			channels: ChatBubbles,
+			book: BookOpen,
+			clock: ClockRotateRight,
+			sparkles: Sparkles,
+			document: Document
+		};
+
+		return iconMap[iconKey] ?? Sparkles;
+	}
+
+	function getEmbedSrc(item: unknown): string {
+		if (item && typeof item === 'object' && 'embed' in item) {
+			return String((item as { embed: unknown }).embed);
+		}
+
+		return '';
+	}
 
 	// Collect all embeds from tool_calls tokens
 	$: allEmbeds = (() => {
@@ -66,17 +262,80 @@
 						});
 					}
 				}
-			} catch {}
+			} catch (_embedParseError) {
+				void _embedParseError;
+				// Ignore malformed embed payloads in summary rendering.
+			}
 		}
 		return result;
 	})();
 
+	$: toolCallNames = tokens
+		.filter((t) => t?.attributes?.type === 'tool_calls')
+		.map((t) => t?.attributes?.name ?? 'tool');
+
+	$: combinationSummary = getToolCombinationSummary(toolCallNames, hasPending);
+	$: firstToolPresentation = getToolPresentation(toolCallNames[0]);
+	$: summaryIconEntries = (() => {
+		const calls = tokens.filter((t) => t?.attributes?.type === 'tool_calls');
+
+		type IconAggregate = {
+			iconKey: ToolIconKey;
+			firstIndex: number;
+			statusOrder: ToolCallStatus[];
+		};
+
+		const aggregateMap = new Map<ToolIconKey, IconAggregate>();
+
+		for (let idx = 0; idx < calls.length; idx += 1) {
+			const call = calls[idx];
+			const iconKey = getToolPresentation(call?.attributes?.name ?? 'tool').iconKey;
+			const status = getToolCallStatus(call);
+			const current = aggregateMap.get(iconKey) ?? {
+				iconKey,
+				firstIndex: idx,
+				statusOrder: []
+			};
+
+			if (!current.statusOrder.includes(status)) {
+				current.statusOrder.push(status);
+			}
+
+			aggregateMap.set(iconKey, current);
+		}
+
+		const ordered = [...aggregateMap.values()].sort((a, b) => a.firstIndex - b.firstIndex);
+		const entries: SummaryIconEntry[] = [];
+
+		for (const item of ordered) {
+			// Preserve encounter order for each icon key, e.g. failed -> success -> neutral.
+			for (const status of item.statusOrder) {
+				entries.push({ iconKey: item.iconKey, status });
+			}
+		}
+
+		if (entries.length > 0) {
+			return entries;
+		}
+
+		return [
+			{
+				iconKey: combinationSummary?.iconKey ?? firstToolPresentation.iconKey,
+				status: 'neutral'
+			}
+		];
+	})();
+
 	$: summaryText = (() => {
 		const parts = [];
 
+		if (combinationSummary && !combinationSummary.showDetailList) {
+			return '';
+		}
+
 		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) => {
@@ -98,33 +357,68 @@
 			}
 		}
 
-		const prefix = hasPending ? $i18n.t('Exploring') : $i18n.t('Explored');
 		const detail = parts.join(', ');
 		return detail;
 	})();
 
-	$: prefixText = hasPending ? $i18n.t('Exploring') : $i18n.t('Explored');
+	$: prefixText = combinationSummary
+		? combinationSummary.prefix
+		: hasPending
+			? $i18n.t('Exploring')
+			: $i18n.t('Explored');
+	$: topSummaryIconIndex = Math.max(summaryIconEntries.length - 1, 0);
 </script>
 
 <div {id} class="w-full">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<button
-		class="w-fit text-left text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition cursor-pointer"
+		class={INLINE_TOOL_TRIGGER_CLASS}
 		aria-label={$i18n.t('Toggle details')}
 		aria-expanded={open}
 		on:click={() => {
 			open = !open;
 		}}
 	>
-		<div class="flex items-center gap-1.5">
+		<div class="{INLINE_TOOL_ROW_CLASS} {hasPending ? 'shimmer' : ''}">
 			<!-- Status icon -->
 			{#if hasPending}
 				<div>
 					<Spinner className="size-4" />
 				</div>
 			{:else if toolCallCount > 0}
-				<div class="text-emerald-500 dark:text-emerald-400">
-					<CheckCircle className="size-4" strokeWidth="2" />
+				<div class="text-emerald-500 dark:text-emerald-400 size-4 relative overflow-visible shrink-0">
+					{#if summaryIconEntries.length > 1}
+						{#each summaryIconEntries as entry, idx}
+							{@const isTopIcon = idx === topSummaryIconIndex}
+							{@const collapseUnderTop = open && !isTopIcon}
+							{@const stackOffset = (summaryIconEntries.length - 1 - idx) * STACK_STEP_PX}
+							<div
+								class="absolute top-0 {isTopIcon ? '' : 'transition-[transform,opacity] duration-600 ease-[cubic-bezier(0.34,1.56,0.64,1)]'} {getStatusClass(entry.status)} {collapseUnderTop ? 'opacity-0 pointer-events-none' : 'opacity-100'}"
+								style="right: {stackOffset}px; z-index: {idx + 1}; transition-delay: {!isTopIcon && collapseUnderTop ? Math.abs(idx - topSummaryIconIndex) * 80 : 0}ms; transform-origin: center; transform: {isTopIcon
+									? 'none'
+									: `translate3d(${collapseUnderTop ? stackOffset : 0}px, 0, 0) scale(${collapseUnderTop ? 0.78 : 1})`};"
+							>
+								{#if idx > 0}
+									<!-- Icon-shape cutout: same glyph, thicker stroke, background color -->
+									<svelte:component
+										this={getSummaryIcon(entry.iconKey)}
+										className="absolute -inset-[2px] size-5 text-white dark:text-gray-900 fill-white dark:fill-gray-900 z-0"
+										strokeWidth="3"
+									/>
+								{/if}
+								<svelte:component
+									this={getSummaryIcon(entry.iconKey)}
+									className="relative z-10 size-4"
+									strokeWidth="2"
+								/>
+							</div>
+						{/each}
+					{:else}
+						<svelte:component
+							this={getSummaryIcon(summaryIconEntries[0].iconKey)}
+							className="size-4 {getStatusClass(summaryIconEntries[0].status)}"
+							strokeWidth="2"
+						/>
+					{/if}
 				</div>
 			{:else}
 				<div class="text-gray-400 dark:text-gray-500">
@@ -133,8 +427,8 @@
 			{/if}
 
 			<!-- Summary text -->
-			<div class="flex-1 line-clamp-1">
-				<span class="text-gray-600 dark:text-gray-300 {hasPending ? 'shimmer' : ''}"
+			<div class={INLINE_TOOL_TITLE_CLASS}>
+				<span class="{hasPending ? 'shimmer' : ''}"
 					>{prefixText}</span
 				>
 				{#if summaryText}
@@ -143,16 +437,23 @@
 			</div>
 
 			<!-- Chevron -->
-			<div class="flex shrink-0 self-center text-gray-400 dark:text-gray-500">
+			<div class={INLINE_TOOL_CHEVRON_CLASS}>
 				{#if open}
-					<ChevronUp strokeWidth="3.5" className="size-3" />
+					<ChevronUp strokeWidth="3.5" className="size-3.5" />
 				{:else}
-					<ChevronDown strokeWidth="3.5" className="size-3" />
+					<ChevronDown strokeWidth="3.5" className="size-3.5" />
 				{/if}
 			</div>
 		</div>
 	</button>
 
+	{#if open}
+		<div
+			transition:slide={{ duration: 160, easing: quintOut, axis: 'y' }}
+			class="{INLINE_TOOL_ICON_CENTER_OFFSET_CLASS} mt-[-6px] h-3 -mb-1px w-px bg-gray-200 dark:bg-gray-800"
+		></div>
+	{/if}
+
 	{#if open}
 		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
 			<div class="mb-0.5 space-y-0.5">
@@ -165,8 +466,8 @@
 		{#each allEmbeds as embedItem, idx}
 			<div id={`${id}-embed-${idx}`}>
 				<FullHeightIframe
-					src={embedItem.embed}
-					args={embedItem.args}
+					src={getEmbedSrc(embedItem)}
+					args={null}
 					allowScripts={true}
 					allowForms={$settings?.iframeSandboxAllowForms ?? false}
 					allowSameOrigin={$settings?.iframeSandboxAllowSameOrigin ?? false}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index 961b731924..6b35d24ef4 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { decode } from 'html-entities';
-	import { onMount, getContext } from 'svelte';
-	const i18n = getContext('i18n');
+	import { getContext } from 'svelte';
+	import type { Readable } from 'svelte/store';
+	const i18n = getContext<Readable<{ t: (key: string, params?: Record<string, unknown>) => string }>>('i18n');
 
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
@@ -20,6 +21,7 @@
 	import ToolCallDisplay from '$lib/components/common/ToolCallDisplay.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Download from '$lib/components/icons/Download.svelte';
+	import CheckCircle from '$lib/components/icons/CheckCircle.svelte';
 	import ConsecutiveDetailsGroup from './ConsecutiveDetailsGroup.svelte';
 
 	import HtmlToken from './HTMLToken.svelte';
@@ -30,7 +32,7 @@
 	export let tokens: Token[];
 	export let top = true;
 	export let attributes = {};
-	export let sourceIds = [];
+	export let sourceIds: string[] = [];
 
 	export let done = true;
 
@@ -53,21 +55,24 @@
 		return 'h' + depth;
 	};
 
-	const GROUPABLE_DETAIL_TYPES = new Set(['tool_calls', 'reasoning', 'code_interpreter']);
+	const GROUPABLE_DETAIL_TYPES = new Set(['tool_calls']);
+	type DetailGroupItem = Token & { attributes?: { type?: string; done?: string }; text?: string };
+	type DetailGroupToken = { type: 'detail_group'; items: DetailGroupItem[]; groupClosed: boolean };
 
 	const isGroupableDetailToken = (token: Token & { attributes?: { type?: string } }) => {
 		return token?.type === 'details' && GROUPABLE_DETAIL_TYPES.has(token?.attributes?.type ?? '');
 	};
 
 	const getDisplayTokens = (tokenList: Token[] = []) => {
-		const displayTokens = [];
-		let detailGroup = [];
+		const displayTokens: Array<Token | DetailGroupToken> = [];
+		let detailGroup: DetailGroupItem[] = [];
 
-		const flushDetailGroup = () => {
+		const flushDetailGroup = (groupClosed: boolean) => {
 			if (detailGroup.length > 1) {
 				displayTokens.push({
 					type: 'detail_group',
-					items: [...detailGroup]
+					items: [...detailGroup],
+					groupClosed
 				});
 			} else if (detailGroup.length === 1) {
 				displayTokens.push(detailGroup[0]);
@@ -80,17 +85,44 @@
 			if (isGroupableDetailToken(token)) {
 				detailGroup.push(token);
 			} else {
-				flushDetailGroup();
+				flushDetailGroup(true);
 				displayTokens.push(token);
 			}
 		}
 
-		flushDetailGroup();
+		flushDetailGroup(false);
 
 		return displayTokens;
 	};
 
-	const getDetailTextContent = (token) => {
+	const hasLaterToolCall = (items: DetailGroupItem[], index: number): boolean => {
+		for (let i = index + 1; i < items.length; i += 1) {
+			if (items[i]?.attributes?.type === 'tool_calls') {
+				return true;
+			}
+		}
+
+		return false;
+	};
+
+	const getNormalizedGroupedToolDone = (
+		items: DetailGroupItem[],
+		index: number,
+		rawDone: string | undefined,
+		groupClosed: boolean
+	): string => {
+		if (rawDone === 'true') {
+			return 'true';
+		}
+
+		if (hasLaterToolCall(items, index) || groupClosed) {
+			return 'true';
+		}
+
+		return rawDone ?? 'false';
+	};
+
+	const getDetailTextContent = (token: DetailGroupItem): string => {
 		return decode(token?.text || '')
 			.replace(/<summary>.*?<\/summary>/gi, '')
 			.trim();
@@ -370,20 +402,33 @@
 		<ConsecutiveDetailsGroup
 			id={`${id}-${tokenIdx}-detail-group`}
 			tokens={token.items}
+			groupClosed={token.groupClosed === true}
 			messageDone={done}
 		>
-			<div slot="content" class="space-y-1">
+			<div slot="content" class="space-y-0.5">
 				{#each token.items as detailToken, detailIdx}
 					{@const textContent = getDetailTextContent(detailToken)}
 
 					{#if detailToken?.attributes?.type === 'tool_calls'}
+						{@const toolDone = getNormalizedGroupedToolDone(
+							token.items,
+							detailIdx,
+							detailToken?.attributes?.done,
+							token.groupClosed === true
+						)}
 						<ToolCallDisplay
 							id={`${id}-${tokenIdx}-${detailIdx}-tc`}
-							attributes={detailToken.attributes}
+							attributes={{ ...detailToken.attributes, done: toolDone }}
 							grouped={true}
-							open={$settings?.expandDetails ?? false}
-							className="w-full space-y-1"
+							open={false}
+							className="w-full"
 						/>
+
+						{#if hasLaterToolCall(token.items, detailIdx) || (token.groupClosed === true && detailIdx === token.items.length - 1)}
+							<div class="ml-[26px] -mt-0.5 -mb-px h-2 flex items-center">
+								<div class="w-px h-full bg-gray-200 dark:bg-gray-800"></div>
+							</div>
+						{/if}
 					{:else if textContent.length > 0}
 						<Collapsible
 							title={detailToken.summary}
@@ -418,6 +463,15 @@
 						/>
 					{/if}
 				{/each}
+
+				{#if token.groupClosed === true}
+					<div class="ml-[18px] flex items-center gap-1.5 py-0.5 text-gray-600 dark:text-gray-300">
+						<div class="shrink-0 text-gray-400 dark:text-gray-500">
+							<CheckCircle className="size-4" strokeWidth="2" />
+						</div>
+						<div>{$i18n.t('Done')}</div>
+					</div>
+				{/if}
 			</div>
 		</ConsecutiveDetailsGroup>
 	{:else if token.type === 'details'}
@@ -428,7 +482,7 @@
 			<ToolCallDisplay
 				id={`${id}-${tokenIdx}-tc`}
 				attributes={token.attributes}
-				open={$settings?.expandDetails ?? false}
+				open={false}
 				className="w-full space-y-1"
 			/>
 		{:else if textContent.length > 0}
@@ -547,7 +601,7 @@
 			{onSourceClick}
 		/>
 	{:else if token.type === 'space'}
-		<div class="my-2" />
+		<div class="my-2"></div>
 	{:else}
 		{console.log('Unknown token', token)}
 	{/if}
diff --git a/src/lib/components/common/ToolCallDisplay.svelte b/src/lib/components/common/ToolCallDisplay.svelte
index e1c5a3bfb4..6302a0f896 100644
--- a/src/lib/components/common/ToolCallDisplay.svelte
+++ b/src/lib/components/common/ToolCallDisplay.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { decode } from 'html-entities';
-	import { v4 as uuidv4 } from 'uuid';
 
 	import { getContext } from 'svelte';
-	const i18n = getContext('i18n');
-
+	import type { Readable } from 'svelte/store';
+	const i18n = getContext<Readable<{ t: (key: string, params?: Record<string, unknown>) => string }>>('i18n');
 	import { slide } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
@@ -13,10 +12,32 @@
 	import Spinner from './Spinner.svelte';
 	import Markdown from '../chat/Messages/Markdown.svelte';
 	import WrenchSolid from '../icons/WrenchSolid.svelte';
-	import CheckCircle from '../icons/CheckCircle.svelte';
+	import GlobeAlt from '../icons/GlobeAlt.svelte';
+	import Link from '../icons/Link.svelte';
+	import Photo from '../icons/Photo.svelte';
+	import Terminal from '../icons/Terminal.svelte';
+	import Database from '../icons/Database.svelte';
+	import Note from '../icons/Note.svelte';
+	import ChatBubble from '../icons/ChatBubble.svelte';
+	import ChatBubbles from '../icons/ChatBubbles.svelte';
+	import BookOpen from '../icons/BookOpen.svelte';
+	import ClockRotateRight from '../icons/ClockRotateRight.svelte';
+	import Document from '../icons/Document.svelte';
+	import Sparkles from '../icons/Sparkles.svelte';
 	import Image from './Image.svelte';
 	import FullHeightIframe from './FullHeightIframe.svelte';
 	import { settings } from '$lib/stores';
+	import {
+		INLINE_TOOL_CHEVRON_CLASS,
+		INLINE_TOOL_ICON_CENTER_OFFSET_CLASS,
+		INLINE_TOOL_ROW_CLASS,
+		INLINE_TOOL_TITLE_CLASS,
+		INLINE_TOOL_TRIGGER_CLASS
+	} from '$lib/utils/toolCallInlineStyles';
+	import {
+		getToolPresentation,
+		type ToolIconKey
+	} from '$lib/utils/toolCallPresentation';
 
 	export let id: string = '';
 	export let attributes: {
@@ -35,20 +56,59 @@
 	export let className = '';
 
 	const RESULT_PREVIEW_LIMIT = 10000;
+	const PRIMARY_MEMORY_KEYS = ['content', 'memory', 'value', 'text', 'entry'];
+	const PRIMARY_NOTES_KEYS = ['content', 'note', 'text', 'body'];
+	const PRIMARY_CODE_KEYS = ['code', 'script', 'command', 'python', 'source'];
+	const FAILURE_TEXT_PATTERN = /error|failed|exception|traceback/i;
+	const FAILURE_STATUS_PATTERN = /error|fail|failed|exception/;
+	const SEARCH_NO_MATCH_PATTERN = /no matches? found|no results?|empty/i;
+	const SEARCH_RESULT_COLLECTION_KEYS = ['results', 'items', 'matches', 'files', 'documents', 'data'];
+	const KNOWLEDGE_COLLECTION_KEYS = [
+		'items',
+		'results',
+		'files',
+		'bases',
+		'knowledge_bases',
+		'knowledge_files',
+		'documents',
+		'data'
+	];
+	const MEMORY_COLLECTION_KEYS = ['memories', 'items', 'entries', 'results', 'data'];
+	const CODE_OUTPUT_MAPPING: Array<[string, string, CodeOutputBlock['tone']]> = [
+		['stdout', 'Stdout', 'success'],
+		['output', 'Output', 'neutral'],
+		['result', 'Result', 'neutral'],
+		['stderr', 'Stderr', 'error'],
+		['error', 'Error', 'error'],
+		['traceback', 'Traceback', 'error']
+	];
+
 	let expandedResult = false;
+	type ArgRow = { key: string; value: string };
+	let argRows: ArgRow[] = [];
+	let searchWebResults: SearchResultItem[] = [];
 
 	$: if (!open) expandedResult = false;
-	export let buttonClassName =
-		'w-fit text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition';
+	export let buttonClassName = 'w-full transition';
 
-	const componentId = id || uuidv4();
+	const componentId = id || crypto.randomUUID();
 
-	function parseJSONString(str: string) {
-		try {
-			return parseJSONString(JSON.parse(str));
-		} catch (e) {
-			return str;
+	function parseJSONString(str: string): unknown {
+		let parsed: unknown = str;
+
+		for (let idx = 0; idx < 2; idx += 1) {
+			if (typeof parsed !== 'string') {
+				break;
+			}
+
+			try {
+				parsed = JSON.parse(parsed);
+			} catch {
+				break;
+			}
 		}
+
+		return parsed;
 	}
 
 	function formatJSONString(str: string) {
@@ -59,7 +119,7 @@
 			} else {
 				return String(parsed);
 			}
-		} catch (e) {
+		} catch {
 			return str;
 		}
 	}
@@ -76,6 +136,260 @@
 		}
 	}
 
+	type SearchResultItem = {
+		title?: string;
+		link?: string;
+		snippet?: string;
+		name?: string;
+		url?: string;
+		source?: string;
+		description?: string;
+		content?: string;
+	};
+
+	type CodeOutputBlock = {
+		label: string;
+		value: string;
+		tone: 'neutral' | 'error' | 'success';
+	};
+	type FailureInfo = {
+		title: string;
+		message: string;
+		details?: string;
+	};
+
+	type KnowledgeItem = {
+		title: string;
+		subtitle?: string;
+		content?: string;
+	};
+
+	type TimestampDiagram = {
+		currentLabel: string;
+		targetLabel: string;
+		relativeLabel: string;
+		isFuture: boolean;
+	};
+
+	type CurrentTimestampDisplay = {
+		dateLabel: string;
+		timeLabel: string;
+	};
+
+	function getToolIcon(iconKey: ToolIconKey): typeof GlobeAlt {
+		const iconMap: Record<ToolIconKey, typeof GlobeAlt> = {
+			globe: GlobeAlt,
+			link: Link,
+			photo: Photo,
+			terminal: Terminal,
+			database: Database,
+			note: Note,
+			chat: ChatBubble,
+			channels: ChatBubbles,
+			book: BookOpen,
+			clock: ClockRotateRight,
+			sparkles: Sparkles,
+			document: Document
+		};
+
+		return iconMap[iconKey] ?? Sparkles;
+	}
+
+	function isSearchWebResult(value: unknown): value is SearchResultItem[] {
+		return (
+			Array.isArray(value) &&
+			value.every(
+				(item) =>
+					typeof item === 'object' &&
+					item !== null &&
+					('title' in item ||
+						'link' in item ||
+						'snippet' in item ||
+						'name' in item ||
+						'url' in item ||
+						'content' in item)
+			)
+		);
+	}
+
+	function extractSearchResults(value: unknown): SearchResultItem[] {
+		if (isSearchWebResult(value)) {
+			return value;
+		}
+
+		if (!value || typeof value !== 'object' || Array.isArray(value)) {
+			return [];
+		}
+
+		const record = value as Record<string, unknown>;
+		for (const key of SEARCH_RESULT_COLLECTION_KEYS) {
+			const candidate = record[key];
+			if (isSearchWebResult(candidate)) {
+				return candidate;
+			}
+		}
+
+		return [];
+	}
+
+	function getSearchResultTitle(item: unknown): string {
+		if (item && typeof item === 'object' && 'title' in item) {
+			return String((item as { title: unknown }).title ?? '');
+		}
+
+		if (item && typeof item === 'object' && 'name' in item) {
+			return String((item as { name: unknown }).name ?? '');
+		}
+
+		if (item && typeof item === 'object' && 'source' in item) {
+			return String((item as { source: unknown }).source ?? '');
+		}
+
+		return '';
+	}
+
+	function getSearchResultLink(item: unknown): string {
+		if (item && typeof item === 'object' && 'link' in item) {
+			return String((item as { link: unknown }).link ?? '');
+		}
+
+		if (item && typeof item === 'object' && 'url' in item) {
+			return String((item as { url: unknown }).url ?? '');
+		}
+
+		return '';
+	}
+
+	function getSearchResultSnippet(item: unknown): string {
+		if (item && typeof item === 'object' && 'snippet' in item) {
+			return String((item as { snippet: unknown }).snippet ?? '');
+		}
+
+		if (item && typeof item === 'object' && 'description' in item) {
+			return String((item as { description: unknown }).description ?? '');
+		}
+
+		if (item && typeof item === 'object' && 'content' in item) {
+			return String((item as { content: unknown }).content ?? '');
+		}
+
+		return '';
+	}
+
+	function getSearchFallbackLine(item: unknown): string {
+		if (typeof item === 'string') {
+			return item.trim();
+		}
+
+		const record = asRecord(item);
+		if (!record) {
+			return toDisplayText(item).trim();
+		}
+
+		for (const key of ['path', 'file', 'filename', 'title', 'name', 'source', 'url', 'id']) {
+			const text = toDisplayText(record[key]).trim();
+			if (text) {
+				return text;
+			}
+		}
+
+		for (const key of ['snippet', 'description', 'content', 'text', 'message']) {
+			const text = toDisplayText(record[key]).trim();
+			if (text) {
+				return text;
+			}
+		}
+
+		return '';
+	}
+
+	function getSearchFallbackLines(value: unknown): string[] {
+		if (!isSearchTool) {
+			return [];
+		}
+
+		if (value === null || value === undefined) {
+			return [];
+		}
+
+		if (typeof value === 'string') {
+			const text = value.trim();
+			return text ? [text] : [];
+		}
+
+		if (Array.isArray(value)) {
+			if (value.length === 0) {
+				return ['No matches found.'];
+			}
+
+			const lines = value
+				.map((entry) => getSearchFallbackLine(entry))
+				.filter((line) => line.length > 0);
+
+			return lines.length > 0 ? lines : ['No matches found.'];
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return [];
+		}
+
+		for (const key of [...SEARCH_RESULT_COLLECTION_KEYS, 'json']) {
+			const candidate = record[key];
+			if (Array.isArray(candidate)) {
+				if (candidate.length === 0) {
+					return ['No matches found.'];
+				}
+
+				const lines = candidate
+					.map((entry) => getSearchFallbackLine(entry))
+					.filter((line) => line.length > 0);
+
+				return lines.length > 0 ? lines : ['No matches found.'];
+			}
+		}
+
+		const totalText = toDisplayText(record.total ?? record.count).trim();
+		if (totalText === '0') {
+			return ['No matches found.'];
+		}
+
+		for (const key of ['message', 'result', 'content', 'text']) {
+			const text = toDisplayText(record[key]).trim();
+			if (text) {
+				return [text];
+			}
+		}
+
+		return [];
+	}
+
+	function isImageFileObject(file: unknown): file is { type?: string; content_type?: string; url?: string } {
+		if (!file || typeof file !== 'object') {
+			return false;
+		}
+
+		const typedFile = file as { type?: string; content_type?: string; url?: string };
+		return (
+			(typedFile.type === 'image' || (typedFile.content_type ?? '').startsWith('image/')) &&
+			Boolean(typedFile.url)
+		);
+	}
+
+	function getArgRowKey(row: unknown): string {
+		if (row && typeof row === 'object' && 'key' in row) {
+			return String((row as { key: unknown }).key);
+		}
+		return '';
+	}
+
+	function getArgRowValue(row: unknown): string {
+		if (row && typeof row === 'object' && 'value' in row) {
+			return String((row as { value: unknown }).value);
+		}
+		return '';
+	}
+
 	$: args = decode(attributes?.arguments ?? '');
 	$: result = decode(attributes?.result ?? '');
 	$: files = parseJSONString(decode(attributes?.files ?? ''));
@@ -85,6 +399,783 @@
 
 	$: parsedArgs = parseArguments(args);
 	$: parsedResult = parseJSONString(result);
+	$: hasFileOutput = Array.isArray(files) && files.length > 0;
+	$: hasResultOutput = result.trim().length > 0 || hasFileOutput;
+	$: toolPresentation = getToolPresentation(attributes?.name);
+	$: toolName = toolPresentation.displayName;
+	$: toolIcon = getToolIcon(toolPresentation.iconKey);
+	$: isSearchTool =
+		toolPresentation.rawName.startsWith('search_') ||
+		toolPresentation.rawName.startsWith('query_');
+	$: isMemoryTool = toolPresentation.semantic === 'memory';
+	$: isNotesTool = toolPresentation.semantic === 'notes';
+	$: isCodeTool = toolPresentation.semantic === 'code';
+	$: isKnowledgeTool = toolPresentation.semantic === 'knowledge';
+	$: isCurrentTimestampTool = toolPresentation.rawName === 'get_current_timestamp';
+	$: isCalculateTimestampTool = toolPresentation.rawName === 'calculate_timestamp';
+	$: isKnowledgeQueryTool = ['query_knowledge_files', 'query_knowledge_bases'].includes(
+		toolPresentation.rawName
+	);
+	$: isKnowledgeViewTool = ['view_file', 'view_knowledge_file'].includes(toolPresentation.rawName);
+	$: detailBlockClass = isSearchTool
+		? 'bg-emerald-50/65 dark:bg-emerald-950/20 border border-emerald-100/80 dark:border-emerald-900/40'
+		: isMemoryTool
+			? 'bg-sky-50/65 dark:bg-sky-950/20 border border-sky-100/80 dark:border-sky-900/40'
+			: isNotesTool
+				? 'bg-amber-50/65 dark:bg-amber-950/20 border border-amber-100/80 dark:border-amber-900/40'
+				: isCodeTool
+					? 'bg-slate-50/80 dark:bg-slate-950/25 border border-slate-200/80 dark:border-slate-800/80'
+					: isKnowledgeTool
+						? 'bg-cyan-50/65 dark:bg-cyan-950/20 border border-cyan-100/80 dark:border-cyan-900/40'
+					: 'bg-gray-50/70 dark:bg-gray-850/35';
+	$: searchWebResults = extractSearchResults(parsedResult);
+	$: searchFallbackLines = getSearchFallbackLines(parsedResult);
+	$: hasSearchOutput = searchWebResults.length > 0 || searchFallbackLines.length > 0;
+	$: isSearchNoMatch =
+		isSearchTool &&
+		searchWebResults.length === 0 &&
+		searchFallbackLines.length > 0 &&
+		searchFallbackLines.every((line) => SEARCH_NO_MATCH_PATTERN.test(line));
+	$: argRows = parsedArgs
+		? Object.entries(parsedArgs).map(([key, value]) => ({
+				key,
+				value: typeof value === 'object' ? JSON.stringify(value) : String(value)
+			}))
+		: [];
+	$: inputCountLabel = `${argRows.length} input field${argRows.length === 1 ? '' : 's'}`;
+	$: resultLength = typeof parsedResult === 'string' ? parsedResult.length : result.length;
+	$: memoryItems = getMemoryItems(parsedResult);
+	$: codeOutputBlocks = getCodeOutputBlocks(parsedResult);
+	$: notePreview = getNotePreview(parsedResult);
+	$: noteInputPreview = getNoteInputPreview(parsedArgs);
+	$: codeInputSnippet = getCodeInputSnippet(parsedArgs);
+	$: currentTimestampDisplay = getCurrentTimestampDisplay(parsedResult);
+	$: calculateTimestampDiagram = getCalculateTimestampDiagram(parsedResult, parsedArgs);
+	$: knowledgeItems = getKnowledgeItems(parsedResult);
+	$: knowledgeAnswer = getKnowledgeAnswer(parsedResult);
+	$: knowledgeDocument = getKnowledgeDocument(parsedResult);
+	$: failureInfo = getFailureInfo(parsedResult);
+	$: isFailed = failureInfo !== null;
+	$: doneIconClass = isFailed
+		? 'text-rose-500 dark:text-rose-400'
+		: !hasResultOutput || isSearchNoMatch
+		? 'text-gray-400 dark:text-gray-500'
+		: 'text-emerald-500 dark:text-emerald-400';
+	$: useCompactResult = shouldUseCompactResult(parsedResult);
+	$: showResultCount = !(
+		failureInfo !== null ||
+		useCompactResult ||
+		(isMemoryTool && memoryItems.length > 0) ||
+		(isSearchTool && hasSearchOutput) ||
+		(isCodeTool && codeOutputBlocks.length > 0) ||
+		(isNotesTool && notePreview !== null) ||
+		(isCurrentTimestampTool && currentTimestampDisplay !== null) ||
+		(isCalculateTimestampTool && calculateTimestampDiagram !== null) ||
+		(isKnowledgeTool &&
+			(knowledgeItems.length > 0 || knowledgeAnswer !== null || knowledgeDocument !== null))
+	);
+
+	function toDate(value: unknown): Date | null {
+		if (value instanceof Date && !Number.isNaN(value.getTime())) {
+			return value;
+		}
+
+		if (typeof value === 'number' && Number.isFinite(value)) {
+			const timestamp = value > 1_000_000_000_000 ? value : value * 1000;
+			const date = new Date(timestamp);
+			return Number.isNaN(date.getTime()) ? null : date;
+		}
+
+		if (typeof value === 'string') {
+			const trimmed = value.trim();
+			if (!trimmed) {
+				return null;
+			}
+
+			if (/^\d{10,13}$/.test(trimmed)) {
+				const numeric = Number(trimmed);
+				if (Number.isFinite(numeric)) {
+					const timestamp = trimmed.length >= 13 ? numeric : numeric * 1000;
+					const date = new Date(timestamp);
+					if (!Number.isNaN(date.getTime())) {
+						return date;
+					}
+				}
+			}
+
+			const parsed = new Date(trimmed);
+			return Number.isNaN(parsed.getTime()) ? null : parsed;
+		}
+
+		return null;
+	}
+
+	function extractTimestampDate(value: unknown): Date | null {
+		const direct = toDate(value);
+		if (direct) {
+			return direct;
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return null;
+		}
+
+		for (const key of [
+			'timestamp',
+			'datetime',
+			'date',
+			'time',
+			'current_timestamp',
+			'current_iso',
+			'calculated_timestamp',
+			'calculated_iso',
+			'current_time',
+			'calculated_time',
+			'result',
+			'value'
+		]) {
+			const parsed = toDate(record[key]);
+			if (parsed) {
+				return parsed;
+			}
+		}
+
+		return null;
+	}
+
+	function formatDateParts(value: Date): CurrentTimestampDisplay {
+		return {
+			dateLabel: value.toLocaleDateString(undefined, {
+				year: 'numeric',
+				month: 'short',
+				day: '2-digit'
+			}),
+			timeLabel: value.toLocaleTimeString(undefined, {
+				hour: '2-digit',
+				minute: '2-digit',
+				second: '2-digit'
+			})
+		};
+	}
+
+	function getCurrentTimestampDisplay(value: unknown): CurrentTimestampDisplay | null {
+		if (!isCurrentTimestampTool) {
+			return null;
+		}
+
+		const parsedDate = extractTimestampDate(value);
+		if (parsedDate) {
+			return formatDateParts(parsedDate);
+		}
+
+		if (typeof value === 'string' && value.trim()) {
+			const fromString = toDate(value);
+			return fromString ? formatDateParts(fromString) : null;
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return null;
+		}
+
+		for (const key of [
+			'current_iso',
+			'current_timestamp',
+			'time',
+			'datetime',
+			'timestamp',
+			'result',
+			'message'
+		]) {
+			const text = toDisplayText(record[key]).trim();
+			if (text) {
+				const fromRecord = toDate(text);
+				if (fromRecord) {
+					return formatDateParts(fromRecord);
+				}
+			}
+		}
+
+		return null;
+	}
+
+	function getRelativeDiffLabel(target: Date, current: Date): string {
+		const diffMs = target.getTime() - current.getTime();
+		const absMs = Math.abs(diffMs);
+
+		if (absMs < 1_000) {
+			return 'Now';
+		}
+
+		const units: Array<[string, number]> = [
+			['year', 365 * 24 * 60 * 60 * 1000],
+			['month', 30 * 24 * 60 * 60 * 1000],
+			['week', 7 * 24 * 60 * 60 * 1000],
+			['day', 24 * 60 * 60 * 1000],
+			['hour', 60 * 60 * 1000],
+			['minute', 60 * 1000],
+			['second', 1000]
+		];
+
+		for (const [unit, ms] of units) {
+			if (absMs >= ms) {
+				const count = Math.round(absMs / ms);
+				const label = `${count} ${unit}${count === 1 ? '' : 's'}`;
+				return diffMs >= 0 ? `In ${label}` : `${label} ago`;
+			}
+		}
+
+		return 'Now';
+	}
+
+	function getRelativeLabelFromArgs(
+		target: Date,
+		current: Date,
+		argsValue: Record<string, unknown> | null
+	): string {
+		if (!argsValue) {
+			return getRelativeDiffLabel(target, current);
+		}
+
+		for (const [key, raw] of Object.entries(argsValue)) {
+			if (!key.endsWith('_ago') && !key.endsWith('_from_now')) {
+				continue;
+			}
+
+			const amount = Number(raw);
+			if (!Number.isFinite(amount)) {
+				continue;
+			}
+
+			const baseUnit = key
+				.replace(/_(ago|from_now)$/i, '')
+				.replace(/_/g, ' ')
+				.replace(/s$/, '');
+			const absAmount = Math.abs(amount);
+			const unit = `${baseUnit}${absAmount === 1 ? '' : 's'}`;
+			const label = `${absAmount} ${unit}`;
+
+			if (key.endsWith('_from_now')) {
+				return `In ${label}`;
+			}
+
+			return `${label} ago`;
+		}
+
+		for (const key of ['relative', 'offset', 'duration', 'label', 'expression', 'query']) {
+			const text = toDisplayText(argsValue[key]).trim();
+			if (text) {
+				return text;
+			}
+		}
+
+		const amountRaw = argsValue.amount ?? argsValue.value;
+		const amount = typeof amountRaw === 'number' ? amountRaw : Number(amountRaw);
+		const unitRaw = toDisplayText(argsValue.unit ?? argsValue.interval).trim().toLowerCase();
+		const direction = toDisplayText(argsValue.direction ?? argsValue.when).trim().toLowerCase();
+
+		if (Number.isFinite(amount) && unitRaw) {
+			const absAmount = Math.abs(amount);
+			const normalizedUnit = unitRaw.endsWith('s') ? unitRaw : `${unitRaw}s`;
+			const label = `${absAmount} ${normalizedUnit}`;
+
+			if (direction.includes('future') || direction.includes('after') || direction.includes('from')) {
+				return `In ${label}`;
+			}
+
+			if (direction.includes('past') || direction.includes('ago') || direction.includes('before')) {
+				return `${label} ago`;
+			}
+
+			return target.getTime() >= current.getTime() ? `In ${label}` : `${label} ago`;
+		}
+
+		return getRelativeDiffLabel(target, current);
+	}
+
+	function getCalculateTimestampDiagram(
+		value: unknown,
+		argsValue: Record<string, unknown> | null
+	): TimestampDiagram | null {
+		if (!isCalculateTimestampTool) {
+			return null;
+		}
+
+		const record = asRecord(value);
+		const targetDate = record
+			? extractTimestampDate(record.calculated_iso ?? record.calculated_timestamp ?? value)
+			: extractTimestampDate(value);
+		if (!targetDate) {
+			return null;
+		}
+
+		const currentDate = record
+			? extractTimestampDate(record.current_iso ?? record.current_timestamp ?? record.current_time) ||
+				new Date()
+			: new Date();
+		return {
+			currentLabel: currentDate.toLocaleString(),
+			targetLabel: targetDate.toLocaleString(),
+			relativeLabel: getRelativeLabelFromArgs(targetDate, currentDate, argsValue),
+			isFuture: targetDate.getTime() > currentDate.getTime()
+		};
+	}
+
+	function isPrimaryPayloadArg(key: string): boolean {
+		const normalized = key.toLowerCase();
+
+		if (isMemoryTool) {
+			return PRIMARY_MEMORY_KEYS.includes(normalized);
+		}
+
+		if (isNotesTool) {
+			return PRIMARY_NOTES_KEYS.includes(normalized);
+		}
+
+		if (isCodeTool) {
+			return PRIMARY_CODE_KEYS.includes(normalized);
+		}
+
+		return false;
+	}
+
+	function isScalarValue(value: unknown): boolean {
+		return ['string', 'number', 'boolean'].includes(typeof value) || value === null;
+	}
+
+	function shouldUseCompactResult(value: unknown): boolean {
+		if (!(isMemoryTool || isNotesTool || isCodeTool)) {
+			return false;
+		}
+
+		if (typeof value === 'string') {
+			return value.trim().length > 0 && value.length <= 120;
+		}
+
+		if (!value || typeof value !== 'object' || Array.isArray(value)) {
+			return false;
+		}
+
+		const record = value as Record<string, unknown>;
+		const keys = Object.keys(record);
+		if (keys.length === 0 || keys.length > 6) {
+			return false;
+		}
+
+		const allowedKeys = new Set([
+			'success',
+			'ok',
+			'status',
+			'result',
+			'message',
+			'id',
+			'memory_id',
+			'note_id'
+		]);
+
+		const knownShape = keys.every((key) => allowedKeys.has(key.toLowerCase()));
+		if (!knownShape) {
+			return false;
+		}
+
+		return Object.values(record).every((entry) => {
+			if (!isScalarValue(entry)) {
+				return false;
+			}
+
+			return typeof entry === 'string' ? entry.length <= 140 : true;
+		});
+	}
+
+	function getCompactResultText(value: unknown): string {
+		if (typeof value === 'string') {
+			return value.trim() || 'Success';
+		}
+
+		if (!value || typeof value !== 'object' || Array.isArray(value)) {
+			return 'Success';
+		}
+
+		const record = value as Record<string, unknown>;
+		if (typeof record.success === 'boolean') {
+			return record.success ? 'Success' : 'Failed';
+		}
+
+		if (typeof record.ok === 'boolean') {
+			return record.ok ? 'Success' : 'Failed';
+		}
+
+		for (const key of ['status', 'result', 'message']) {
+			const raw = record[key];
+			if (typeof raw === 'string' && raw.trim()) {
+				const normalized = raw.trim();
+				return normalized.charAt(0).toUpperCase() + normalized.slice(1);
+			}
+		}
+
+		return 'Success';
+	}
+
+	function asRecord(value: unknown): Record<string, unknown> | null {
+		if (!value || typeof value !== 'object' || Array.isArray(value)) {
+			return null;
+		}
+
+		return value as Record<string, unknown>;
+	}
+
+	function toDisplayText(value: unknown): string {
+		if (typeof value === 'string') {
+			return value;
+		}
+
+		if (['number', 'boolean'].includes(typeof value)) {
+			return String(value);
+		}
+
+		if (value === null || value === undefined) {
+			return '';
+		}
+
+		try {
+			return JSON.stringify(value);
+		} catch {
+			return String(value);
+		}
+	}
+
+	function getMemoryItems(value: unknown): unknown[] {
+		if (!isMemoryTool) {
+			return [];
+		}
+
+		if (Array.isArray(value)) {
+			return value;
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return [];
+		}
+
+		for (const key of MEMORY_COLLECTION_KEYS) {
+			const candidate = record[key];
+			if (Array.isArray(candidate)) {
+				return candidate;
+			}
+		}
+
+		return [];
+	}
+
+	function getMemoryItemTitle(item: unknown, index: number): string {
+		if (typeof item === 'string') {
+			return `Memory ${index + 1}`;
+		}
+
+		const record = asRecord(item);
+		if (!record) {
+			return `Memory ${index + 1}`;
+		}
+
+		for (const key of ['title', 'name', 'id', 'memory_id']) {
+			const value = record[key];
+			if (typeof value === 'string' && value.trim()) {
+				return value;
+			}
+		}
+
+		return `Memory ${index + 1}`;
+	}
+
+	function getMemoryItemBody(item: unknown): string {
+		if (typeof item === 'string') {
+			return item;
+		}
+
+		const record = asRecord(item);
+		if (!record) {
+			return toDisplayText(item);
+		}
+
+		for (const key of ['content', 'text', 'memory', 'value', 'summary', 'message']) {
+			const value = record[key];
+			if (typeof value === 'string' && value.trim()) {
+				return value;
+			}
+		}
+
+		return toDisplayText(item);
+	}
+
+	function getCodeOutputBlocks(value: unknown): CodeOutputBlock[] {
+		if (!isCodeTool) {
+			return [];
+		}
+
+		const blocks: CodeOutputBlock[] = [];
+
+		if (typeof value === 'string') {
+			if (value.trim()) {
+				blocks.push({ label: 'Output', value, tone: 'neutral' });
+			}
+			return blocks;
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return blocks;
+		}
+
+		for (const [key, label, tone] of CODE_OUTPUT_MAPPING) {
+			const raw = record[key];
+			const text = toDisplayText(raw).trim();
+			if (text) {
+				blocks.push({ label, value: text, tone });
+			}
+		}
+
+		return blocks;
+	}
+
+	function getNotePreview(value: unknown): { title: string; content: string } | null {
+		if (!isNotesTool) {
+			return null;
+		}
+
+		if (typeof value === 'string' && value.trim()) {
+			return {
+				title: 'Note',
+				content: value
+			};
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return null;
+		}
+
+		const title = toDisplayText(record.title || record.name || 'Note').trim() || 'Note';
+		const content = toDisplayText(
+			record.content || record.text || record.note || record.body || record.message
+		).trim();
+
+		if (!content) {
+			return null;
+		}
+
+		return { title, content };
+	}
+
+	function getKnowledgeItems(value: unknown): KnowledgeItem[] {
+		if (!isKnowledgeTool) {
+			return [];
+		}
+
+		const toItem = (entry: unknown, index: number): KnowledgeItem => {
+			if (typeof entry === 'string') {
+				return {
+					title: `Knowledge ${index + 1}`,
+					content: entry
+				};
+			}
+
+			const record = asRecord(entry);
+			if (!record) {
+				return {
+					title: `Knowledge ${index + 1}`,
+					content: toDisplayText(entry)
+				};
+			}
+
+			const title =
+				toDisplayText(record.name || record.title || record.file_name || record.basename || record.id)
+					.trim() || `Knowledge ${index + 1}`;
+
+			const subtitle = toDisplayText(record.type || record.kind || record.collection || '').trim();
+			const content = toDisplayText(
+				record.description || record.summary || record.content || record.snippet || record.text || ''
+			).trim();
+
+			return {
+				title,
+				subtitle: subtitle || undefined,
+				content: content || undefined
+			};
+		};
+
+		if (Array.isArray(value)) {
+			return value.map((entry, index) => toItem(entry, index));
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return [];
+		}
+
+		for (const key of KNOWLEDGE_COLLECTION_KEYS) {
+			const candidate = record[key];
+			if (Array.isArray(candidate)) {
+				return candidate.map((entry, index) => toItem(entry, index));
+			}
+		}
+
+		return [];
+	}
+
+	function getKnowledgeAnswer(value: unknown): string | null {
+		if (!isKnowledgeTool || !isKnowledgeQueryTool) {
+			return null;
+		}
+
+		if (typeof value === 'string' && value.trim()) {
+			return value.trim();
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return null;
+		}
+
+		for (const key of ['answer', 'response', 'result', 'content', 'text', 'message']) {
+			const text = toDisplayText(record[key]).trim();
+			if (text) {
+				return text;
+			}
+		}
+
+		return null;
+	}
+
+	function getKnowledgeDocument(value: unknown): string | null {
+		if (!isKnowledgeTool || !isKnowledgeViewTool) {
+			return null;
+		}
+
+		if (typeof value === 'string' && value.trim()) {
+			return value.trim();
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return null;
+		}
+
+		for (const key of ['content', 'text', 'body', 'result', 'data']) {
+			const text = toDisplayText(record[key]).trim();
+			if (text) {
+				return text;
+			}
+		}
+
+		return null;
+	}
+	function getNoteInputPreview(
+		value: Record<string, unknown> | null
+	): { title: string; content: string } | null {
+		if (!isNotesTool || !value) {
+			return null;
+		}
+
+		const title = toDisplayText(value.title || value.name || 'Note').trim() || 'Note';
+		const content = toDisplayText(
+			value.content || value.text || value.note || value.body || value.value || ''
+		).trim();
+
+		if (!content) {
+			return null;
+		}
+
+		return { title, content };
+	}
+
+	function getCodeInputSnippet(value: Record<string, unknown> | null): string | null {
+		if (!isCodeTool || !value) {
+			return null;
+		}
+
+		for (const key of PRIMARY_CODE_KEYS) {
+			const snippet = toDisplayText(value[key]).trim();
+			if (snippet) {
+				return snippet;
+			}
+		}
+
+		return null;
+	}
+
+	function getFailureInfo(value: unknown): FailureInfo | null {
+		if (value === null || value === undefined) {
+			return null;
+		}
+
+		if (typeof value === 'string') {
+			const text = value.trim();
+			if (!text) {
+				return null;
+			}
+
+			if (FAILURE_TEXT_PATTERN.test(text)) {
+				return {
+					title: 'Tool Failed',
+					message: text
+				};
+			}
+
+			return null;
+		}
+
+		const record = asRecord(value);
+		if (!record) {
+			return null;
+		}
+
+		const success = record.success;
+		const ok = record.ok;
+		const status = toDisplayText(record.status).toLowerCase();
+		const hasFailureStatus = FAILURE_STATUS_PATTERN.test(status);
+
+		const rawError = record.error;
+		const hasExplicitErrorField =
+			rawError !== undefined && rawError !== null && toDisplayText(rawError).trim().length > 0;
+		const errorText =
+			typeof rawError === 'string'
+				? rawError
+				: rawError && typeof rawError === 'object' && 'message' in rawError
+					? toDisplayText((rawError as Record<string, unknown>).message)
+					: '';
+
+		const message =
+			errorText ||
+			toDisplayText(record.message) ||
+			toDisplayText(record.result) ||
+			toDisplayText(record.detail);
+
+		const details =
+			toDisplayText(record.stderr) ||
+			toDisplayText(record.traceback) ||
+			toDisplayText(record.stack) ||
+			'';
+
+		if (success === false || ok === false || hasFailureStatus || hasExplicitErrorField || message) {
+			if (
+				success === false ||
+				ok === false ||
+				hasExplicitErrorField ||
+				hasFailureStatus ||
+				FAILURE_TEXT_PATTERN.test(message)
+			) {
+				return {
+					title: 'Tool Failed',
+					message: message || 'The tool reported a failure.',
+					details: details || undefined
+				};
+			}
+		}
+
+		return null;
+	}
 </script>
 
 <div {id} class={className}>
@@ -92,13 +1183,13 @@
 		<!-- Embed Mode: Show iframes without collapsible behavior -->
 		<div class="py-1 w-full cursor-pointer">
 			<div class="w-full text-xs text-gray-500">
-				{attributes.name}
+				{toolName}
 			</div>
 			{#each embeds as embed, idx}
 				<div class="my-2" id={`${componentId}-tool-call-embed-${idx}`}>
 					<FullHeightIframe
 						src={embed}
-						{args}
+						args={null}
 						allowScripts={true}
 						allowForms={$settings?.iframeSandboxAllowForms ?? false}
 						allowSameOrigin={$settings?.iframeSandboxAllowSameOrigin ?? false}
@@ -109,160 +1200,738 @@
 		</div>
 	{:else}
 		<!-- Tool call display -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div
-			class="{buttonClassName} cursor-pointer"
-			on:pointerup={() => {
-				open = !open;
-			}}
-		>
+		{#if grouped}
 			<div
-				class="w-full max-w-full font-medium flex items-center gap-1.5 {isExecuting
-					? 'shimmer'
+				class="w-full max-w-full rounded-[20px] border border-gray-100 dark:border-gray-850/60 bg-white/70 dark:bg-gray-900/40 transition {isExecuting
+					? 'tool-call-running-border'
 					: ''}"
 			>
-				<!-- Status icon -->
-				{#if isExecuting}
-					<div>
-						<Spinner className="size-4" />
-					</div>
-				{:else if isDone}
-					<div class="text-emerald-500 dark:text-emerald-400">
-						<CheckCircle className="size-4" strokeWidth="2" />
-					</div>
-				{:else}
-					<div class="text-gray-400 dark:text-gray-500">
-						<WrenchSolid className="size-3.5" />
-					</div>
-				{/if}
-
-				<!-- Label -->
-				<div class="flex-1 line-clamp-1">
-					<!-- Short label (below md) -->
-					<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}
-							<Markdown
-								id={`${componentId}-tool-call-title`}
-								content={$i18n.t('View Result from **{{NAME}}**', {
-									NAME: attributes.name
-								})}
-							/>
-						{:else}
-							<Markdown
-								id={`${componentId}-tool-call-executing`}
-								content={$i18n.t('Executing **{{NAME}}**...', {
-									NAME: attributes.name
-								})}
-							/>
-						{/if}
-					</span>
-				</div>
-
-				<!-- Chevron -->
-				<div class="flex shrink-0 self-center translate-y-[1px]">
-					{#if open}
-						<ChevronUp strokeWidth="3.5" className="size-3.5" />
-					{:else}
-						<ChevronDown strokeWidth="3.5" className="size-3.5" />
-					{/if}
-				</div>
-			</div>
-		</div>
-
-		{#if open}
-			<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
-				<div class="border border-gray-50 dark:border-gray-850/30 rounded-2xl my-1.5 p-3 space-y-3">
-					<!-- Input -->
-					{#if args}
-						<div>
-							<div
-								class="text-[10px] uppercase tracking-wider font-medium text-gray-400 dark:text-gray-500 mb-1.5 px-1"
-							>
-								{$i18n.t('Input')}
-							</div>
-
-							{#if parsedArgs}
-								<div class="px-1 space-y-0.5">
-									{#each Object.entries(parsedArgs) as [key, value]}
-										<div class="flex gap-2 text-xs py-0.5">
-											<span class="font-medium text-gray-600 dark:text-gray-400 shrink-0"
-												>{key}</span
-											>
-											<span class="text-gray-800 dark:text-gray-200 break-all"
-												>{typeof value === 'object' ? JSON.stringify(value) : value}</span
-											>
-										</div>
-									{/each}
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					class="{buttonClassName} tool-call-trigger cursor-pointer px-3 py-3 hover:bg-white dark:hover:bg-gray-900/70 transition {open ? 'rounded-t-[20px]' : 'rounded-[20px]'}"
+					on:pointerup={() => {
+						open = !open;
+					}}
+				>
+					<div class="w-full flex items-start gap-2.5">
+						<div class="size-7 rounded-[8px] shrink-0 bg-gray-100 dark:bg-gray-850 text-gray-600 dark:text-gray-300 flex items-center justify-center">
+							{#if isExecuting}
+								<Spinner className="size-4" />
+							{:else if isDone}
+								<div class={doneIconClass}>
+									<svelte:component this={toolIcon} className="size-4" strokeWidth="2" />
 								</div>
 							{:else}
-								<div class="tool-call-body w-full max-w-none!">
-									<Markdown
-										id={`${componentId}-tool-call-args`}
-										content={`\`\`\`json\n${formatJSONString(args)}\n\`\`\``}
-									/>
+								<div class="text-gray-500 dark:text-gray-400">
+									<WrenchSolid className="size-3.5" />
 								</div>
 							{/if}
 						</div>
-					{/if}
 
-					<!-- Output -->
-					{#if isDone && result}
-						<div>
-							<div
-								class="text-[10px] uppercase tracking-wider font-medium text-gray-400 dark:text-gray-500 mb-1.5 px-1"
-							>
-								{$i18n.t('Output')}
+						<div class="flex-1 min-w-0">
+							<div class="flex items-center gap-2 min-w-0">
+								<div class="line-clamp-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+									{toolName}
+								</div>
 							</div>
-							<div class="w-full max-w-none!">
-								{#if typeof parsedResult === 'object' && parsedResult !== null}
-									<Markdown
-										id={`${componentId}-tool-call-result`}
-										content={`\`\`\`json\n${JSON.stringify(parsedResult, null, 2)}\n\`\`\``}
-									/>
+
+							<div class="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-1 {isExecuting ? 'shimmer' : ''}">
+								{#if isExecuting}
+									{toolPresentation.runningLabel} · {inputCountLabel}
+								{:else if isDone}
+									{toolPresentation.doneLabel} · {inputCountLabel}
 								{:else}
-									{@const resultStr = String(parsedResult)}
-									{@const isTruncated = resultStr.length > RESULT_PREVIEW_LIMIT && !expandedResult}
-									<pre
-										class="text-xs text-gray-600 dark:text-gray-300 whitespace-pre-wrap break-words font-mono">{isTruncated
-											? resultStr.slice(0, RESULT_PREVIEW_LIMIT)
-											: resultStr}</pre>
-									{#if isTruncated}
-										<button
-											class="mt-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
-											on:click|stopPropagation={() => {
-												expandedResult = true;
-											}}
-										>
-											{$i18n.t('Show all ({{COUNT}} characters)', {
-												COUNT: resultStr.length.toLocaleString()
-											})}
-										</button>
-									{/if}
+									{$i18n.t('Ready to run')} · {toolName}
 								{/if}
 							</div>
 						</div>
-					{/if}
+
+						<div class="flex shrink-0 self-center translate-y-px">
+							{#if open}
+								<ChevronUp strokeWidth="3.5" className="size-3.5" />
+							{:else}
+								<ChevronDown strokeWidth="3.5" className="size-3.5" />
+							{/if}
+						</div>
+					</div>
 				</div>
+
+				{#if open}
+					<div transition:slide={{ duration: 200, easing: quintOut, axis: 'y' }}>
+						<div class="tool-call-expand p-2 border-t border-gray-100 dark:border-gray-850/60 bg-white/70 dark:bg-gray-900/40 rounded-b-[20px] space-y-2">
+							<!-- Input -->
+							{#if args}
+								<div
+									class="rounded-xl px-2.5 py-2 {detailBlockClass}"
+								>
+									<div
+										class="text-[10px] uppercase tracking-wider font-semibold text-gray-500 dark:text-gray-400 mb-1.5"
+									>
+										{toolPresentation.inputLabel}
+									</div>
+
+									{#if parsedArgs}
+										{#if isNotesTool && noteInputPreview}
+											<div class="rounded-lg border border-amber-200/80 dark:border-amber-900/60 bg-amber-50/70 dark:bg-amber-950/20 px-3 py-2.5">
+												<div class="text-[11px] uppercase tracking-wide font-semibold text-amber-700 dark:text-amber-300 mb-1">
+													{noteInputPreview.title}
+												</div>
+												<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word leading-relaxed">
+													{noteInputPreview.content}
+												</div>
+											</div>
+										{:else if isCodeTool && codeInputSnippet}
+											<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/40 overflow-hidden">
+												<div class="px-2.5 py-1 border-b border-gray-100 dark:border-gray-800 text-[11px] uppercase tracking-wide font-semibold text-slate-600 dark:text-slate-300">
+													Code
+												</div>
+												<pre class="px-2.5 py-2 text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word font-mono">{codeInputSnippet}</pre>
+											</div>
+										{:else}
+											<div class="space-y-1">
+												{#each argRows as row}
+													{#if isPrimaryPayloadArg(getArgRowKey(row))}
+														<div class="text-xs py-0.5 text-gray-700 dark:text-gray-200 break-all leading-relaxed">
+															{getArgRowValue(row)}
+														</div>
+													{:else}
+														<div class="flex gap-2 text-xs py-0.5 items-start">
+															<span class="font-medium text-gray-600 dark:text-gray-300 shrink-0 px-1.5 py-0.5 rounded-md bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800"
+																>{getArgRowKey(row)}</span
+															>
+															<span class="text-gray-700 dark:text-gray-200 break-all pt-0.5"
+																>{getArgRowValue(row)}</span
+															>
+														</div>
+													{/if}
+												{/each}
+											</div>
+										{/if}
+									{:else}
+										<div class="tool-call-body w-full max-w-none! rounded-lg overflow-hidden border border-gray-100 dark:border-gray-800">
+											<Markdown
+												id={`${componentId}-tool-call-args`}
+												content={`\`\`\`json\n${formatJSONString(args)}\n\`\`\``}
+											/>
+										</div>
+									{/if}
+								</div>
+							{/if}
+
+							<!-- Output -->
+							{#if isDone && result}
+								<div
+									class="rounded-xl px-2.5 py-2 {detailBlockClass}"
+								>
+									<div class="flex items-center justify-between gap-2 mb-1.5">
+										<div class="text-[10px] uppercase tracking-wider font-semibold text-gray-500 dark:text-gray-400">
+											{toolPresentation.outputLabel}
+										</div>
+										{#if showResultCount}
+											<div class="text-[10px] text-gray-400 dark:text-gray-500">
+												{$i18n.t('{{COUNT}} chars', { COUNT: resultLength.toLocaleString() })}
+											</div>
+										{/if}
+									</div>
+									<div class="w-full max-w-none! rounded-lg overflow-hidden border border-gray-100 dark:border-gray-800 bg-white/70 dark:bg-gray-900/60">
+										{#if failureInfo}
+											<div class="px-3 py-2.5">
+												<div class="flex flex-wrap items-center gap-2">
+													<div class="inline-flex items-center rounded-md border border-rose-200 dark:border-rose-900/60 bg-rose-50/90 dark:bg-rose-950/30 px-2 py-1 text-xs font-medium text-rose-700 dark:text-rose-300">
+														{failureInfo.title}
+													</div>
+													<div class="text-xs text-rose-800 dark:text-rose-200 whitespace-pre-wrap wrap-break-word">
+														{failureInfo.message}
+													</div>
+												</div>
+												{#if failureInfo.details}
+													<pre class="mt-2 text-[11px] text-rose-700 dark:text-rose-300 whitespace-pre-wrap wrap-break-word font-mono">{failureInfo.details}</pre>
+												{/if}
+											</div>
+										{:else if isCurrentTimestampTool && currentTimestampDisplay}
+											<div class="px-3 py-3">
+												<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+													<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Current Time</div>
+													<div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{currentTimestampDisplay.dateLabel}</div>
+													<div class="text-xs text-gray-600 dark:text-gray-300 mt-0.5 font-mono">{currentTimestampDisplay.timeLabel}</div>
+												</div>
+											</div>
+										{:else if isCalculateTimestampTool && calculateTimestampDiagram}
+											<div class="px-3 py-2.5 overflow-x-auto">
+												<div class="min-w-[560px] flex items-center gap-2">
+												{#if calculateTimestampDiagram.isFuture}
+													<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+														<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Result</div>
+														<div class="text-sm text-gray-800 dark:text-gray-100 wrap-break-word">{calculateTimestampDiagram.targetLabel}</div>
+													</div>
+													<div class="flex-1 min-w-[180px] px-1">
+														<div class="text-[11px] text-center font-medium text-gray-600 dark:text-gray-300 mb-1">{calculateTimestampDiagram.relativeLabel}</div>
+														<div class="h-px w-full bg-gray-300 dark:bg-gray-700"></div>
+													</div>
+													<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+														<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Current Date</div>
+														<div class="text-sm text-gray-800 dark:text-gray-100 wrap-break-word">{calculateTimestampDiagram.currentLabel}</div>
+													</div>
+												{:else}
+													<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+														<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Current Date</div>
+														<div class="text-sm text-gray-800 dark:text-gray-100 wrap-break-word">{calculateTimestampDiagram.currentLabel}</div>
+													</div>
+													<div class="flex-1 min-w-[180px] px-1">
+														<div class="text-[11px] text-center font-medium text-gray-600 dark:text-gray-300 mb-1">{calculateTimestampDiagram.relativeLabel}</div>
+														<div class="h-px w-full bg-gray-300 dark:bg-gray-700"></div>
+													</div>
+													<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+														<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Result</div>
+														<div class="text-sm text-gray-800 dark:text-gray-100 wrap-break-word">{calculateTimestampDiagram.targetLabel}</div>
+													</div>
+												{/if}
+												</div>
+											</div>
+										{:else if isSearchTool && hasSearchOutput}
+											{#if searchWebResults.length > 0}
+												<div class="divide-y divide-gray-100 dark:divide-gray-800">
+													{#each searchWebResults as item, idx}
+														{@const resultLink = getSearchResultLink(item)}
+														{@const resultTitle = getSearchResultTitle(item)}
+														{@const resultSnippet = getSearchResultSnippet(item)}
+														<div class="px-3 py-2.5">
+															<div class="text-[11px] uppercase tracking-wide font-semibold text-emerald-600 dark:text-emerald-400 mb-1">
+																Result {idx + 1}
+															</div>
+															{#if resultLink}
+																<a
+																	href={resultLink}
+																	target="_blank"
+																	rel="noopener noreferrer"
+																	class="block text-xs text-emerald-700 dark:text-emerald-300 truncate"
+																>
+																	{resultLink}
+																</a>
+															{/if}
+															{#if resultTitle}
+																<div class="text-sm font-medium text-gray-900 dark:text-gray-100 mt-1">
+																	{resultTitle}
+																</div>
+															{/if}
+															{#if resultSnippet}
+																<div class="text-xs text-gray-600 dark:text-gray-300 mt-1 whitespace-pre-wrap wrap-break-word">
+																	{resultSnippet}
+																</div>
+															{/if}
+														</div>
+													{/each}
+												</div>
+											{:else}
+												<div class="divide-y divide-gray-100 dark:divide-gray-800">
+													{#each searchFallbackLines as line, idx}
+														<div class="px-3 py-2.5">
+															{#if line === 'No matches found.'}
+																<div class="inline-flex items-center rounded-md border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/60 px-2 py-1 text-xs font-medium text-gray-600 dark:text-gray-300">
+																	{line}
+																</div>
+															{:else}
+																<div class="text-[11px] uppercase tracking-wide font-semibold text-emerald-600 dark:text-emerald-400 mb-1">
+																	Result {idx + 1}
+																</div>
+																<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+																	{line}
+																</div>
+															{/if}
+														</div>
+													{/each}
+												</div>
+											{/if}
+										{:else if isMemoryTool && memoryItems.length > 0}
+											<div class="divide-y divide-gray-100 dark:divide-gray-800">
+												{#each memoryItems as memoryItem, idx}
+													<div class="px-3 py-2.5">
+														<div class="text-[11px] uppercase tracking-wide font-semibold text-sky-700 dark:text-sky-300 mb-1">
+															{getMemoryItemTitle(memoryItem, idx)}
+														</div>
+														<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+															{getMemoryItemBody(memoryItem)}
+														</div>
+													</div>
+												{/each}
+											</div>
+										{:else if isCodeTool && codeOutputBlocks.length > 0}
+											<div class="divide-y divide-gray-100 dark:divide-gray-800">
+												{#each codeOutputBlocks as block}
+													<div class="px-3 py-2.5">
+														<div class="text-[11px] uppercase tracking-wide font-semibold mb-1 {block.tone === 'error'
+															? 'text-rose-700 dark:text-rose-300'
+															: block.tone === 'success'
+																? 'text-emerald-700 dark:text-emerald-300'
+																: 'text-slate-700 dark:text-slate-300'}">
+															{block.label}
+														</div>
+														<pre class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word font-mono">{block.value}</pre>
+													</div>
+												{/each}
+											</div>
+										{:else if isNotesTool && notePreview}
+											<div class="px-3 py-2.5">
+												<div class="text-[11px] uppercase tracking-wide font-semibold text-amber-700 dark:text-amber-300 mb-1">
+													{notePreview.title}
+												</div>
+												<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+													{notePreview.content}
+												</div>
+											</div>
+										{:else if isKnowledgeTool && knowledgeItems.length > 0}
+											<div class="divide-y divide-gray-100 dark:divide-gray-800">
+												{#each knowledgeItems as item}
+													<div class="px-3 py-2.5">
+														<div class="text-[11px] uppercase tracking-wide font-semibold text-cyan-700 dark:text-cyan-300 mb-1">
+															{item.title}
+														</div>
+														{#if item.subtitle}
+															<div class="text-[11px] text-cyan-600/90 dark:text-cyan-400/90 mb-1">
+																{item.subtitle}
+															</div>
+														{/if}
+														{#if item.content}
+															<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+																{item.content}
+															</div>
+														{/if}
+													</div>
+												{/each}
+											</div>
+										{:else if isKnowledgeTool && knowledgeAnswer}
+											<div class="px-3 py-2.5">
+												<div class="text-[11px] uppercase tracking-wide font-semibold text-cyan-700 dark:text-cyan-300 mb-1">
+													Answer
+												</div>
+												<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+													{knowledgeAnswer}
+												</div>
+											</div>
+										{:else if isKnowledgeTool && knowledgeDocument}
+											<div class="px-3 py-2.5">
+												<div class="text-[11px] uppercase tracking-wide font-semibold text-cyan-700 dark:text-cyan-300 mb-1">
+													Document
+												</div>
+												<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+													{knowledgeDocument}
+												</div>
+											</div>
+										{:else if useCompactResult}
+											<div class="px-3 py-2.5">
+												<div class="inline-flex items-center rounded-md border border-emerald-200 dark:border-emerald-900/60 bg-emerald-50/90 dark:bg-emerald-950/30 px-2 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">
+													{getCompactResultText(parsedResult)}
+												</div>
+											</div>
+										{:else if typeof parsedResult === 'object' && parsedResult !== null}
+											<pre class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word font-mono p-2.5">{JSON.stringify(parsedResult, null, 2)}</pre>
+										{:else}
+											{@const resultStr = String(parsedResult)}
+											{@const isTruncated = resultStr.length > RESULT_PREVIEW_LIMIT && !expandedResult}
+											<pre class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word font-mono p-2.5">{isTruncated
+												? resultStr.slice(0, RESULT_PREVIEW_LIMIT)
+												: resultStr}</pre>
+											{#if isTruncated}
+												<button
+													class="m-2 mt-0 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
+													on:click|stopPropagation={() => {
+														expandedResult = true;
+													}}
+												>
+													{$i18n.t('Show all ({{COUNT}} characters)', {
+														COUNT: resultStr.length.toLocaleString()
+													})}
+												</button>
+											{/if}
+										{/if}
+									</div>
+								</div>
+							{/if}
+						</div>
+					</div>
+				{/if}
 			</div>
+		{:else}
+			<div class="w-full">
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					class="{buttonClassName} tool-call-trigger {INLINE_TOOL_TRIGGER_CLASS}"
+					on:pointerup={() => {
+						open = !open;
+					}}
+				>
+					<div class="{INLINE_TOOL_ROW_CLASS} {isExecuting ? 'shimmer' : ''}">
+						<div class="shrink-0 size-4 flex items-center justify-center">
+						{#if isExecuting}
+							<Spinner className="size-4" />
+						{:else if isDone}
+							<div class={doneIconClass}>
+								<svelte:component this={toolIcon} className="size-4" strokeWidth="2" />
+							</div>
+						{:else}
+							<div class="text-gray-400 dark:text-gray-500">
+								<WrenchSolid className="size-3.5" />
+							</div>
+						{/if}
+						</div>
+
+						<div class={INLINE_TOOL_TITLE_CLASS}>
+							{toolName}
+						</div>
+
+						<div class={INLINE_TOOL_CHEVRON_CLASS}>
+							{#if open}
+								<ChevronUp strokeWidth="3.5" className="size-3.5" />
+							{:else}
+								<ChevronDown strokeWidth="3.5" className="size-3.5" />
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				{#if open}
+					<div transition:slide={{ duration: 160, easing: quintOut, axis: 'y' }} class="{INLINE_TOOL_ICON_CENTER_OFFSET_CLASS} mt-[-6px] h-3 -mb-[4px] w-px bg-gray-200 dark:bg-gray-800"></div>
+				{/if}
+				</div>
+
+			{#if open}
+				<div transition:slide={{ duration: 200, easing: quintOut, axis: 'y' }}>
+					<div class="tool-call-expand rounded-[20px] border border-gray-100 dark:border-gray-850/60 bg-white/70 dark:bg-gray-900/40 p-2 space-y-2">
+						<!-- Input -->
+						{#if args}
+							<div
+								class="rounded-xl px-2.5 py-2 {detailBlockClass}"
+							>
+								<div
+									class="text-[10px] uppercase tracking-wider font-semibold text-gray-500 dark:text-gray-400 mb-1.5"
+								>
+									{toolPresentation.inputLabel}
+								</div>
+
+								{#if parsedArgs}
+									{#if isNotesTool && noteInputPreview}
+										<div class="rounded-lg border border-amber-200/80 dark:border-amber-900/60 bg-amber-50/70 dark:bg-amber-950/20 px-3 py-2.5">
+											<div class="text-[11px] uppercase tracking-wide font-semibold text-amber-700 dark:text-amber-300 mb-1">
+												{noteInputPreview.title}
+											</div>
+											<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word leading-relaxed">
+												{noteInputPreview.content}
+											</div>
+										</div>
+									{:else if isCodeTool && codeInputSnippet}
+										<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/40 overflow-hidden">
+											<div class="px-2.5 py-1 border-b border-gray-100 dark:border-gray-800 text-[11px] uppercase tracking-wide font-semibold text-slate-600 dark:text-slate-300">
+												Code
+											</div>
+											<pre class="px-2.5 py-2 text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word font-mono">{codeInputSnippet}</pre>
+										</div>
+									{:else}
+										<div class="space-y-1">
+											{#each argRows as row}
+												{#if isPrimaryPayloadArg(getArgRowKey(row))}
+													<div class="text-xs py-0.5 text-gray-700 dark:text-gray-200 break-all leading-relaxed">
+														{getArgRowValue(row)}
+													</div>
+												{:else}
+													<div class="flex gap-2 text-xs py-0.5 items-start">
+														<span class="font-medium text-gray-600 dark:text-gray-300 shrink-0 px-1.5 py-0.5 rounded-md bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800"
+															>{getArgRowKey(row)}</span
+														>
+														<span class="text-gray-700 dark:text-gray-200 break-all pt-0.5"
+															>{getArgRowValue(row)}</span
+														>
+													</div>
+												{/if}
+											{/each}
+										</div>
+									{/if}
+								{:else}
+									<div class="tool-call-body w-full max-w-none! rounded-lg overflow-hidden border border-gray-100 dark:border-gray-800">
+										<Markdown
+											id={`${componentId}-tool-call-args`}
+											content={`\`\`\`json\n${formatJSONString(args)}\n\`\`\``}
+										/>
+									</div>
+								{/if}
+							</div>
+						{/if}
+
+						<!-- Output -->
+						{#if isDone && result}
+							<div
+								class="rounded-xl px-2.5 py-2 {detailBlockClass}"
+							>
+								<div class="flex items-center justify-between gap-2 mb-1.5">
+									<div class="text-[10px] uppercase tracking-wider font-semibold text-gray-500 dark:text-gray-400">
+										{toolPresentation.outputLabel}
+									</div>
+									{#if showResultCount}
+										<div class="text-[10px] text-gray-400 dark:text-gray-500">
+											{$i18n.t('{{COUNT}} chars', { COUNT: resultLength.toLocaleString() })}
+										</div>
+									{/if}
+								</div>
+								<div class="w-full max-w-none! rounded-lg overflow-hidden border border-gray-100 dark:border-gray-800 bg-white/70 dark:bg-gray-900/60">
+									{#if failureInfo}
+										<div class="px-3 py-2.5">
+											<div class="flex flex-wrap items-center gap-2">
+												<div class="inline-flex items-center rounded-md border border-rose-200 dark:border-rose-900/60 bg-rose-50/90 dark:bg-rose-950/30 px-2 py-1 text-xs font-medium text-rose-700 dark:text-rose-300">
+													{failureInfo.title}
+												</div>
+												<div class="text-xs text-rose-800 dark:text-rose-200 whitespace-pre-wrap wrap-break-word">
+													{failureInfo.message}
+												</div>
+											</div>
+											{#if failureInfo.details}
+												<pre class="mt-2 text-[11px] text-rose-700 dark:text-rose-300 whitespace-pre-wrap wrap-break-word font-mono">{failureInfo.details}</pre>
+											{/if}
+										</div>
+									{:else if isCurrentTimestampTool && currentTimestampDisplay}
+										<div class="px-3 py-3">
+											<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+												<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Current Time</div>
+												<div class="text-sm font-semibold text-gray-900 dark:text-gray-100">{currentTimestampDisplay.dateLabel}</div>
+												<div class="text-xs text-gray-600 dark:text-gray-300 mt-0.5 font-mono">{currentTimestampDisplay.timeLabel}</div>
+											</div>
+										</div>
+									{:else if isCalculateTimestampTool && calculateTimestampDiagram}
+										<div class="px-3 py-2.5 overflow-x-auto">
+											<div class="min-w-[560px] flex items-center gap-2">
+											{#if calculateTimestampDiagram.isFuture}
+												<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+													<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Result</div>
+													<div class="text-sm text-gray-800 dark:text-gray-100 wrap-break-word">{calculateTimestampDiagram.targetLabel}</div>
+												</div>
+												<div class="flex-1 min-w-[180px] px-1">
+													<div class="text-[11px] text-center font-medium text-gray-600 dark:text-gray-300 mb-1">{calculateTimestampDiagram.relativeLabel}</div>
+													<div class="h-px w-full bg-gray-300 dark:bg-gray-700"></div>
+												</div>
+												<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+													<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Current Date</div>
+													<div class="text-sm text-gray-800 dark:text-gray-100 wrap-break-word">{calculateTimestampDiagram.currentLabel}</div>
+												</div>
+											{:else}
+												<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+													<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Current Date</div>
+													<div class="text-sm text-gray-800 dark:text-gray-100 wrap-break-word">{calculateTimestampDiagram.currentLabel}</div>
+												</div>
+												<div class="flex-1 min-w-[180px] px-1">
+													<div class="text-[11px] text-center font-medium text-gray-600 dark:text-gray-300 mb-1">{calculateTimestampDiagram.relativeLabel}</div>
+													<div class="h-px w-full bg-gray-300 dark:bg-gray-700"></div>
+												</div>
+												<div class="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900/60 px-2.5 py-2">
+													<div class="text-[10px] uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 mb-1">Result</div>
+													<div class="text-sm text-gray-800 dark:text-gray-100 wrap-break-word">{calculateTimestampDiagram.targetLabel}</div>
+												</div>
+											{/if}
+											</div>
+										</div>
+									{:else if isSearchTool && hasSearchOutput}
+										{#if searchWebResults.length > 0}
+											<div class="divide-y divide-gray-100 dark:divide-gray-800">
+												{#each searchWebResults as item, idx}
+													{@const resultLink = getSearchResultLink(item)}
+													{@const resultTitle = getSearchResultTitle(item)}
+													{@const resultSnippet = getSearchResultSnippet(item)}
+													<div class="px-3 py-2.5">
+														<div class="text-[11px] uppercase tracking-wide font-semibold text-emerald-600 dark:text-emerald-400 mb-1">
+															Result {idx + 1}
+														</div>
+														{#if resultLink}
+															<a
+																href={resultLink}
+																target="_blank"
+																rel="noopener noreferrer"
+																class="block text-xs text-emerald-700 dark:text-emerald-300 truncate"
+															>
+																{resultLink}
+															</a>
+														{/if}
+														{#if resultTitle}
+															<div class="text-sm font-medium text-gray-900 dark:text-gray-100 mt-1">
+																{resultTitle}
+															</div>
+														{/if}
+														{#if resultSnippet}
+															<div class="text-xs text-gray-600 dark:text-gray-300 mt-1 whitespace-pre-wrap wrap-break-word">
+																{resultSnippet}
+															</div>
+														{/if}
+													</div>
+												{/each}
+											</div>
+										{:else}
+											<div class="divide-y divide-gray-100 dark:divide-gray-800">
+												{#each searchFallbackLines as line, idx}
+													<div class="px-3 py-2.5">
+														{#if line === 'No matches found.'}
+															<div class="inline-flex items-center rounded-md border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/60 px-2 py-1 text-xs font-medium text-gray-600 dark:text-gray-300">
+																{line}
+															</div>
+														{:else}
+															<div class="text-[11px] uppercase tracking-wide font-semibold text-emerald-600 dark:text-emerald-400 mb-1">
+																Result {idx + 1}
+															</div>
+															<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+																{line}
+															</div>
+														{/if}
+													</div>
+												{/each}
+											</div>
+										{/if}
+									{:else if isMemoryTool && memoryItems.length > 0}
+										<div class="divide-y divide-gray-100 dark:divide-gray-800">
+											{#each memoryItems as memoryItem, idx}
+												<div class="px-3 py-2.5">
+													<div class="text-[11px] uppercase tracking-wide font-semibold text-sky-700 dark:text-sky-300 mb-1">
+														{getMemoryItemTitle(memoryItem, idx)}
+													</div>
+													<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+														{getMemoryItemBody(memoryItem)}
+													</div>
+												</div>
+											{/each}
+										</div>
+									{:else if isCodeTool && codeOutputBlocks.length > 0}
+										<div class="divide-y divide-gray-100 dark:divide-gray-800">
+											{#each codeOutputBlocks as block}
+												<div class="px-3 py-2.5">
+													<div class="text-[11px] uppercase tracking-wide font-semibold mb-1 {block.tone === 'error'
+														? 'text-rose-700 dark:text-rose-300'
+														: block.tone === 'success'
+															? 'text-emerald-700 dark:text-emerald-300'
+															: 'text-slate-700 dark:text-slate-300'}">
+														{block.label}
+													</div>
+													<pre class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word font-mono">{block.value}</pre>
+												</div>
+											{/each}
+										</div>
+									{:else if isNotesTool && notePreview}
+										<div class="px-3 py-2.5">
+											<div class="text-[11px] uppercase tracking-wide font-semibold text-amber-700 dark:text-amber-300 mb-1">
+												{notePreview.title}
+											</div>
+											<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+												{notePreview.content}
+											</div>
+										</div>
+									{:else if isKnowledgeTool && knowledgeItems.length > 0}
+										<div class="divide-y divide-gray-100 dark:divide-gray-800">
+											{#each knowledgeItems as item}
+												<div class="px-3 py-2.5">
+													<div class="text-[11px] uppercase tracking-wide font-semibold text-cyan-700 dark:text-cyan-300 mb-1">
+														{item.title}
+													</div>
+													{#if item.subtitle}
+														<div class="text-[11px] text-cyan-600/90 dark:text-cyan-400/90 mb-1">
+															{item.subtitle}
+														</div>
+													{/if}
+													{#if item.content}
+														<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+															{item.content}
+														</div>
+													{/if}
+												</div>
+											{/each}
+										</div>
+									{:else if isKnowledgeTool && knowledgeAnswer}
+										<div class="px-3 py-2.5">
+											<div class="text-[11px] uppercase tracking-wide font-semibold text-cyan-700 dark:text-cyan-300 mb-1">
+												Answer
+											</div>
+											<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+												{knowledgeAnswer}
+											</div>
+										</div>
+									{:else if isKnowledgeTool && knowledgeDocument}
+										<div class="px-3 py-2.5">
+											<div class="text-[11px] uppercase tracking-wide font-semibold text-cyan-700 dark:text-cyan-300 mb-1">
+												Document
+											</div>
+											<div class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word">
+												{knowledgeDocument}
+											</div>
+										</div>
+									{:else if useCompactResult}
+										<div class="px-3 py-2.5">
+											<div class="inline-flex items-center rounded-md border border-emerald-200 dark:border-emerald-900/60 bg-emerald-50/90 dark:bg-emerald-950/30 px-2 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">
+												{getCompactResultText(parsedResult)}
+											</div>
+										</div>
+									{:else if typeof parsedResult === 'object' && parsedResult !== null}
+										<pre class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word font-mono p-2.5">{JSON.stringify(parsedResult, null, 2)}</pre>
+									{:else}
+										{@const resultStr = String(parsedResult)}
+										{@const isTruncated = resultStr.length > RESULT_PREVIEW_LIMIT && !expandedResult}
+										<pre class="text-xs text-gray-700 dark:text-gray-200 whitespace-pre-wrap wrap-break-word font-mono p-2.5">{isTruncated
+											? resultStr.slice(0, RESULT_PREVIEW_LIMIT)
+											: resultStr}</pre>
+										{#if isTruncated}
+											<button
+												class="m-2 mt-0 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
+												on:click|stopPropagation={() => {
+													expandedResult = true;
+												}}
+											>
+												{$i18n.t('Show all ({{COUNT}} characters)', {
+													COUNT: resultStr.length.toLocaleString()
+												})}
+											</button>
+										{/if}
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
 		{/if}
 	{/if}
 
 	<!-- Files display (images etc.) when done -->
 	{#if isDone}
-		{#if typeof files === 'object'}
-			{#each files ?? [] as file, idx}
+		{#if Array.isArray(files)}
+			{#each files as file}
 				{#if typeof file === 'string'}
 					{#if file.startsWith('data:image/')}
-						<Image id={`${componentId}-tool-call-result-${idx}`} src={file} alt="Image" />
+						<Image src={file} alt="Image" />
 					{/if}
-				{:else if typeof file === 'object'}
-					{#if (file.type === 'image' || (file?.content_type ?? '').startsWith('image/')) && file.url}
-						<Image id={`${componentId}-tool-call-result-${idx}`} src={file.url} alt="Image" />
+				{:else if isImageFileObject(file)}
+					{#if file.url}
+						<Image src={file.url} alt="Image" />
 					{/if}
 				{/if}
 			{/each}
 		{/if}
 	{/if}
 </div>
+
+<style>
+	:global(.tool-call-body pre) {
+		margin: 0;
+	}
+
+	.tool-call-running-border {
+		box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.18);
+	}
+
+	:global(.dark) .tool-call-running-border {
+		box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.22);
+	}
+
+	.tool-call-expand {
+		animation: tool-call-expand-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	@keyframes tool-call-expand-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>
diff --git a/src/lib/utils/toolCallInlineStyles.ts b/src/lib/utils/toolCallInlineStyles.ts
new file mode 100644
index 0000000000..12b1d26803
--- /dev/null
+++ b/src/lib/utils/toolCallInlineStyles.ts
@@ -0,0 +1,12 @@
+export const INLINE_TOOL_TRIGGER_CLASS =
+	'w-full max-w-full text-left cursor-pointer py-1 pl-[10px] ml-[10px] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition';
+
+export const INLINE_TOOL_ROW_CLASS = 'flex items-center gap-1.5 min-w-0';
+
+export const INLINE_TOOL_TITLE_CLASS = 'line-clamp-1 min-w-0 text-gray-600 dark:text-gray-300';
+
+export const INLINE_TOOL_CHEVRON_CLASS =
+	'flex shrink-0 self-center text-gray-400 dark:text-gray-500 translate-y-[1px]';
+
+// Trigger has ml-[10px] + pl-[10px], icon center is +8px from content start => 28px total.
+export const INLINE_TOOL_ICON_CENTER_OFFSET_CLASS = 'ml-[27px]';
diff --git a/src/lib/utils/toolCallPresentation.ts b/src/lib/utils/toolCallPresentation.ts
new file mode 100644
index 0000000000..bd03d4f1e5
--- /dev/null
+++ b/src/lib/utils/toolCallPresentation.ts
@@ -0,0 +1,717 @@
+export type ToolIconKey =
+	| 'globe'
+	| 'link'
+	| 'photo'
+	| 'terminal'
+	| 'database'
+	| 'note'
+	| 'chat'
+	| 'channels'
+	| 'book'
+	| 'clock'
+	| 'sparkles'
+	| 'document';
+
+export type ToolSemantic =
+	| 'search_web'
+	| 'fetch_url'
+	| 'image'
+	| 'code'
+	| 'memory'
+	| 'notes'
+	| 'chats'
+	| 'channels'
+	| 'knowledge'
+	| 'time'
+	| 'skills'
+	| 'generic';
+
+
+export type ToolPresentation = {
+	rawName: string;
+	displayName: string;
+	semantic: ToolSemantic;
+	iconKey: ToolIconKey;
+	runningLabel: string;
+	doneLabel: string;
+	inputLabel: string;
+	outputLabel: string;
+};
+
+const EXACT_TOOL_MAP: Record<string, Omit<ToolPresentation, 'rawName' | 'displayName'>> = {
+	get_current_timestamp: {
+		semantic: 'time',
+		iconKey: 'clock',
+		runningLabel: 'Checking Time',
+		doneLabel: 'Checked Time',
+		inputLabel: 'Time Request',
+		outputLabel: 'Timestamp',
+	},
+	calculate_timestamp: {
+		semantic: 'time',
+		iconKey: 'clock',
+		runningLabel: 'Calculating Time',
+		doneLabel: 'Calculated Time',
+		inputLabel: 'Time Offsets',
+		outputLabel: 'Calculated Timestamp',
+	},
+	search_web: {
+		semantic: 'search_web',
+		iconKey: 'globe',
+		runningLabel: 'Searching the web',
+		doneLabel: 'Searched the web',
+		inputLabel: 'Search Query',
+		outputLabel: 'Search Results',
+	},
+	fetch_url: {
+		semantic: 'fetch_url',
+		iconKey: 'link',
+		runningLabel: 'Fetching Web Page',
+		doneLabel: 'Fetched Web Page',
+		inputLabel: 'URL',
+		outputLabel: 'Page Content',
+	},
+	generate_image: {
+		semantic: 'image',
+		iconKey: 'photo',
+		runningLabel: 'Generating Image',
+		doneLabel: 'Generated Image',
+		inputLabel: 'Image Prompt',
+		outputLabel: 'Generated Asset',
+	},
+	edit_image: {
+		semantic: 'image',
+		iconKey: 'photo',
+		runningLabel: 'Editing Image',
+		doneLabel: 'Edited Image',
+		inputLabel: 'Edit Request',
+		outputLabel: 'Edited Asset',
+	},
+	execute_code: {
+		semantic: 'code',
+		iconKey: 'terminal',
+		runningLabel: 'Executing code',
+		doneLabel: 'Executed code',
+		inputLabel: 'Code',
+		outputLabel: 'Execution Result',
+	},
+	search_memories: {
+		semantic: 'memory',
+		iconKey: 'database',
+		runningLabel: 'Searching memories',
+		doneLabel: 'Searched memories',
+		inputLabel: 'Memory Query',
+		outputLabel: 'Memory Matches',
+	},
+	add_memory: {
+		semantic: 'memory',
+		iconKey: 'database',
+		runningLabel: 'Saving memory',
+		doneLabel: 'Saved memory',
+		inputLabel: 'Memory to Save',
+		outputLabel: 'Stored Memory',
+	},
+	replace_memory_content: {
+		semantic: 'memory',
+		iconKey: 'database',
+		runningLabel: 'Updating memory',
+		doneLabel: 'Updated memory',
+		inputLabel: 'Memory Update',
+		outputLabel: 'Memory Update Result',
+	},
+	delete_memory: {
+		semantic: 'memory',
+		iconKey: 'database',
+		runningLabel: 'Deleting memory',
+		doneLabel: 'Deleted memory',
+		inputLabel: 'Memory Target',
+		outputLabel: 'Delete Result',
+	},
+	list_memories: {
+		semantic: 'memory',
+		iconKey: 'database',
+		runningLabel: 'Listing memories',
+		doneLabel: 'Listed memories',
+		inputLabel: 'List Filters',
+		outputLabel: 'Memory List',
+	},
+	search_notes: {
+		semantic: 'notes',
+		iconKey: 'note',
+		runningLabel: 'Searching notes',
+		doneLabel: 'Searched notes',
+		inputLabel: 'Note Query',
+		outputLabel: 'Note Matches',
+	},
+	view_note: {
+		semantic: 'notes',
+		iconKey: 'note',
+		runningLabel: 'Opening note',
+		doneLabel: 'Opened note',
+		inputLabel: 'Note Target',
+		outputLabel: 'Note Content',
+	},
+	write_note: {
+		semantic: 'notes',
+		iconKey: 'note',
+		runningLabel: 'Writing note',
+		doneLabel: 'Wrote note',
+		inputLabel: 'Note to Save',
+		outputLabel: 'Saved Note',
+	},
+	replace_note_content: {
+		semantic: 'notes',
+		iconKey: 'note',
+		runningLabel: 'Updating note',
+		doneLabel: 'Updated note',
+		inputLabel: 'Note Update',
+		outputLabel: 'Note Update Result',
+	},
+	search_chats: {
+		semantic: 'chats',
+		iconKey: 'chat',
+		runningLabel: 'Searching Chats',
+		doneLabel: 'Searched Chats',
+		inputLabel: 'Chat Query',
+		outputLabel: 'Chat Matches',
+	},
+	view_chat: {
+		semantic: 'chats',
+		iconKey: 'chat',
+		runningLabel: 'Opening Chat',
+		doneLabel: 'Opened Chat',
+		inputLabel: 'Chat Target',
+		outputLabel: 'Chat Transcript',
+	},
+	search_channels: {
+		semantic: 'channels',
+		iconKey: 'channels',
+		runningLabel: 'Searching Channels',
+		doneLabel: 'Searched Channels',
+		inputLabel: 'Channel Query',
+		outputLabel: 'Channel Matches',
+	},
+	search_channel_messages: {
+		semantic: 'channels',
+		iconKey: 'channels',
+		runningLabel: 'Searching Messages',
+		doneLabel: 'Searched Messages',
+		inputLabel: 'Message Query',
+		outputLabel: 'Message Matches',
+	},
+	view_channel_message: {
+		semantic: 'channels',
+		iconKey: 'channels',
+		runningLabel: 'Opening Message',
+		doneLabel: 'Opened Message',
+		inputLabel: 'Message Target',
+		outputLabel: 'Message Detail',
+	},
+	view_channel_thread: {
+		semantic: 'channels',
+		iconKey: 'channels',
+		runningLabel: 'Opening Thread',
+		doneLabel: 'Opened Thread',
+		inputLabel: 'Thread Target',
+		outputLabel: 'Thread Detail',
+	},
+	list_knowledge_bases: {
+		semantic: 'knowledge',
+		iconKey: 'book',
+		runningLabel: 'Listing Knowledge Bases',
+		doneLabel: 'Listed Knowledge Bases',
+		inputLabel: 'Knowledge Filter',
+		outputLabel: 'Knowledge Bases',
+	},
+	search_knowledge_bases: {
+		semantic: 'knowledge',
+		iconKey: 'book',
+		runningLabel: 'Searching Knowledge Bases',
+		doneLabel: 'Searched Knowledge Bases',
+		inputLabel: 'Knowledge Query',
+		outputLabel: 'Knowledge Matches',
+	},
+	search_knowledge_files: {
+		semantic: 'knowledge',
+		iconKey: 'book',
+		runningLabel: 'Searching Knowledge Files',
+		doneLabel: 'Searched Knowledge Files',
+		inputLabel: 'File Query',
+		outputLabel: 'File Matches',
+	},
+	view_file: {
+		semantic: 'knowledge',
+		iconKey: 'document',
+		runningLabel: 'Opening File',
+		doneLabel: 'Opened File',
+		inputLabel: 'File Target',
+		outputLabel: 'File Content',
+	},
+	view_knowledge_file: {
+		semantic: 'knowledge',
+		iconKey: 'document',
+		runningLabel: 'Opening Knowledge File',
+		doneLabel: 'Opened Knowledge File',
+		inputLabel: 'File Target',
+		outputLabel: 'File Content',
+	},
+	list_knowledge: {
+		semantic: 'knowledge',
+		iconKey: 'book',
+		runningLabel: 'Listing Knowledge',
+		doneLabel: 'Listed Knowledge',
+		inputLabel: 'Knowledge Filter',
+		outputLabel: 'Knowledge List',
+	},
+	query_knowledge_files: {
+		semantic: 'knowledge',
+		iconKey: 'book',
+		runningLabel: 'Querying Knowledge Files',
+		doneLabel: 'Queried Knowledge Files',
+		inputLabel: 'Knowledge Query',
+		outputLabel: 'Knowledge Answer',
+	},
+	query_knowledge_bases: {
+		semantic: 'knowledge',
+		iconKey: 'book',
+		runningLabel: 'Querying Knowledge Bases',
+		doneLabel: 'Queried Knowledge Bases',
+		inputLabel: 'Knowledge Query',
+		outputLabel: 'Knowledge Answer',
+	},
+	view_skill: {
+		semantic: 'skills',
+		iconKey: 'sparkles',
+		runningLabel: 'Loading Skill',
+		doneLabel: 'Loaded Skill',
+		inputLabel: 'Skill Target',
+		outputLabel: 'Skill Content',
+	}
+};
+
+function toTitleCaseWords(value: string): string {
+	return value
+		.replace(/[_.-]+/g, ' ')
+		.replace(/([a-z])([A-Z])/g, '$1 $2')
+		.split(/\s+/)
+		.filter(Boolean)
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+		.join(' ')
+		.trim();
+}
+
+function inferFallback(rawName: string): Omit<ToolPresentation, 'rawName' | 'displayName'> {
+	const normalized = rawName.toLowerCase();
+
+	if (/search/.test(normalized) && /web|url|http|browse/.test(normalized)) {
+		return {
+			semantic: 'search_web',
+			iconKey: 'globe',
+			runningLabel: 'Searching the web',
+			doneLabel: 'Searched the web',
+			inputLabel: 'Search Query',
+			outputLabel: 'Search Results',
+		};
+	}
+
+	if (/fetch|url|http|crawl/.test(normalized)) {
+		return {
+			semantic: 'fetch_url',
+			iconKey: 'link',
+			runningLabel: 'Fetching Content',
+			doneLabel: 'Fetched Content',
+			inputLabel: 'URL',
+			outputLabel: 'Content',
+		};
+	}
+
+	if (/code|python|terminal|exec|command|script/.test(normalized)) {
+		return {
+			semantic: 'code',
+			iconKey: 'terminal',
+			runningLabel: 'Executing code',
+			doneLabel: 'Executed code',
+			inputLabel: 'Code',
+			outputLabel: 'Execution Result',
+		};
+	}
+
+	if (/memories|memory/.test(normalized)) {
+		if (/search|find|query/.test(normalized)) {
+			return {
+				semantic: 'memory',
+				iconKey: 'database',
+				runningLabel: 'Searching memories',
+				doneLabel: 'Searched memories',
+				inputLabel: 'Memory Query',
+				outputLabel: 'Memory Matches',
+			};
+		}
+
+		if (/list/.test(normalized)) {
+			return {
+				semantic: 'memory',
+				iconKey: 'database',
+				runningLabel: 'Listing memories',
+				doneLabel: 'Listed memories',
+				inputLabel: 'List Filters',
+				outputLabel: 'Memory List',
+			};
+		}
+
+		if (/delete|remove/.test(normalized)) {
+			return {
+				semantic: 'memory',
+				iconKey: 'database',
+				runningLabel: 'Deleting memory',
+				doneLabel: 'Deleted memory',
+				inputLabel: 'Memory Target',
+				outputLabel: 'Delete Result',
+			};
+		}
+
+		if (/replace|update|edit/.test(normalized)) {
+			return {
+				semantic: 'memory',
+				iconKey: 'database',
+				runningLabel: 'Updating memory',
+				doneLabel: 'Updated memory',
+				inputLabel: 'Memory Update',
+				outputLabel: 'Memory Update Result',
+			};
+		}
+
+		return {
+			semantic: 'memory',
+			iconKey: 'database',
+			runningLabel: 'Saving memory',
+			doneLabel: 'Saved memory',
+			inputLabel: 'Memory Content',
+			outputLabel: 'Stored Memory',
+		};
+	}
+
+	if (/notes|note/.test(normalized)) {
+		if (/search|find|query/.test(normalized)) {
+			return {
+				semantic: 'notes',
+				iconKey: 'note',
+				runningLabel: 'Searching notes',
+				doneLabel: 'Searched notes',
+				inputLabel: 'Note Query',
+				outputLabel: 'Note Matches',
+			};
+		}
+
+		if (/view|read|open/.test(normalized)) {
+			return {
+				semantic: 'notes',
+				iconKey: 'note',
+				runningLabel: 'Opening note',
+				doneLabel: 'Opened note',
+				inputLabel: 'Note Target',
+				outputLabel: 'Note Content',
+			};
+		}
+
+		if (/replace|update|edit/.test(normalized)) {
+			return {
+				semantic: 'notes',
+				iconKey: 'note',
+				runningLabel: 'Updating note',
+				doneLabel: 'Updated note',
+				inputLabel: 'Note Update',
+				outputLabel: 'Note Update Result',
+			};
+		}
+
+		if (/delete|remove/.test(normalized)) {
+			return {
+				semantic: 'notes',
+				iconKey: 'note',
+				runningLabel: 'Deleting note',
+				doneLabel: 'Deleted note',
+				inputLabel: 'Note Target',
+				outputLabel: 'Delete Result',
+			};
+		}
+
+		return {
+			semantic: 'notes',
+			iconKey: 'note',
+			runningLabel: 'Writing note',
+			doneLabel: 'Wrote note',
+			inputLabel: 'Note Draft',
+			outputLabel: 'Saved Note',
+		};
+	}
+
+	if (/knowledge|note|memory|chat|channel|file|document/.test(normalized)) {
+		return {
+			semantic: 'generic',
+			iconKey: 'document',
+			runningLabel: 'Running Tool',
+			doneLabel: 'Completed Tool',
+			inputLabel: 'Input',
+			outputLabel: 'Output',
+		};
+	}
+
+	return {
+		semantic: 'generic',
+		iconKey: 'sparkles',
+		runningLabel: 'Running Tool',
+		doneLabel: 'Completed Tool',
+		inputLabel: 'Input',
+		outputLabel: 'Output',
+	};
+}
+
+export function getToolPresentation(name: string | undefined): ToolPresentation {
+	const rawName = (name ?? 'tool').trim() || 'tool';
+	const displayName = toTitleCaseWords(rawName);
+	const fromMap = EXACT_TOOL_MAP[rawName];
+	const inferred = fromMap ?? inferFallback(rawName);
+
+	return {
+		rawName,
+		displayName,
+		...inferred
+	};
+}
+
+export type ToolCombination = {
+	iconKey: ToolIconKey;
+	prefix: string;
+	showDetailList: boolean;
+	matchedRuleId: string;
+};
+
+export type ToolCombinationMatch = {
+	allOf?: string[];
+	anyOf?: string[];
+	noneOf?: string[];
+	onlyOf?: string[];
+};
+
+export type ToolCombinationRule = {
+	id: string;
+	order: number;
+	iconKey: ToolIconKey;
+	pendingPrefix: string;
+	donePrefix: string;
+	match: ToolCombinationMatch;
+	showDetailList?: boolean;
+};
+
+// Rules are evaluated by ascending order. Lower order wins.
+export const TOOL_COMBINATION_RULES: ToolCombinationRule[] = [
+	{
+		id: 'web.search_and_fetch',
+		order: 100,
+		iconKey: 'globe',
+		pendingPrefix: 'Searching the Web',
+		donePrefix: 'Searched the Web',
+		match: { allOf: ['search_web', 'fetch_url'] }
+	},
+	{
+		id: 'web.search_and_execute_code',
+		order: 150,
+		iconKey: 'terminal',
+		pendingPrefix: 'Researching and Executing',
+		donePrefix: 'Researched and Executed',
+		match: {
+			allOf: ['search_web', 'execute_code'],
+			noneOf: ['view_note'],
+			onlyOf: ['search_web', 'fetch_url', 'execute_code']
+		}
+	},
+	{
+		id: 'knowledge.research',
+		order: 200,
+		iconKey: 'book',
+		pendingPrefix: 'Researching Knowledge',
+		donePrefix: 'Researched Knowledge',
+		match: {
+			anyOf: ['search_knowledge_bases', 'search_knowledge_files'],
+			allOf: ['query_knowledge_bases']
+		}
+	},
+	{
+		id: 'knowledge.search_and_view',
+		order: 210,
+		iconKey: 'book',
+		pendingPrefix: 'Researching Knowledge',
+		donePrefix: 'Researched Knowledge',
+		match: {
+			anyOf: ['search_knowledge_bases', 'search_knowledge_files'],
+			allOf: ['view_file']
+		}
+	},
+	{
+		id: 'knowledge.search_and_view_knowledge_file',
+		order: 220,
+		iconKey: 'book',
+		pendingPrefix: 'Researching Knowledge',
+		donePrefix: 'Researched Knowledge',
+		match: {
+			anyOf: ['search_knowledge_bases', 'search_knowledge_files'],
+			allOf: ['view_knowledge_file']
+		}
+	},
+	{
+		id: 'notes.review',
+		order: 300,
+		iconKey: 'note',
+		pendingPrefix: 'Reviewing Notes',
+		donePrefix: 'Reviewed Notes',
+		match: {
+			allOf: ['search_notes'],
+			anyOf: ['view_note', 'write_note', 'replace_note_content']
+		}
+	},
+	{
+		id: 'chats.review',
+		order: 400,
+		iconKey: 'chat',
+		pendingPrefix: 'Reviewing Chats',
+		donePrefix: 'Reviewed Chats',
+		match: { allOf: ['search_chats', 'view_chat'] }
+	},
+	{
+		id: 'channels.explore',
+		order: 500,
+		iconKey: 'channels',
+		pendingPrefix: 'Exploring Channels',
+		donePrefix: 'Explored Channels',
+		match: {
+			allOf: ['search_channels'],
+			anyOf: ['search_channel_messages', 'view_channel_message', 'view_channel_thread']
+		}
+	},
+	{
+		id: 'images.create_or_edit',
+		order: 600,
+		iconKey: 'photo',
+		pendingPrefix: 'Creating Images',
+		donePrefix: 'Created Images',
+		match: { anyOf: ['generate_image', 'edit_image'] }
+	},
+	{
+		id: 'code.execute',
+		order: 700,
+		iconKey: 'terminal',
+		pendingPrefix: 'Executing Code',
+		donePrefix: 'Executed Code',
+		match: { onlyOf: ['execute_code'] }
+	},
+	{
+		id: 'memory.manage',
+		order: 800,
+		iconKey: 'database',
+		pendingPrefix: 'Managing Memory',
+		donePrefix: 'Managed Memory',
+		match: {
+			onlyOf: [
+				'search_memories',
+				'list_memories',
+				'add_memory',
+				'replace_memory_content',
+				'delete_memory'
+			]
+		}
+	},
+	{
+		id: 'notes.manage',
+		order: 900,
+		iconKey: 'note',
+		pendingPrefix: 'Managing Notes',
+		donePrefix: 'Managed Notes',
+		match: {
+			onlyOf: ['search_notes', 'view_note', 'write_note', 'replace_note_content']
+		}
+	},
+	{
+		id: 'remember_and_write_note',
+		order: 1000,
+		iconKey: 'note',
+		pendingPrefix: 'Remembering and Writing Note',
+		donePrefix: 'Remembered and Wrote Note',
+		match: {
+			onlyOf: ['write_memory', 'write_note']
+		}
+	}
+];
+
+function normalizeToolName(name: string): string {
+	return name.trim().toLowerCase();
+}
+
+function hasAll(set: Set<string>, items: string[]): boolean {
+	return items.every((item) => set.has(normalizeToolName(item)));
+}
+
+function hasAny(set: Set<string>, items: string[]): boolean {
+	return items.some((item) => set.has(normalizeToolName(item)));
+}
+
+function hasNone(set: Set<string>, items: string[]): boolean {
+	return items.every((item) => !set.has(normalizeToolName(item)));
+}
+
+function hasOnly(set: Set<string>, items: string[]): boolean {
+	if (items.length === 0) {
+		return set.size === 0;
+	}
+
+	const allowed = new Set(items.map((item) => normalizeToolName(item)));
+	for (const value of set) {
+		if (!allowed.has(value)) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+function matchesCombinationRule(rule: ToolCombinationRule, set: Set<string>): boolean {
+	const { allOf, anyOf, noneOf, onlyOf } = rule.match;
+
+	if (allOf && allOf.length > 0 && !hasAll(set, allOf)) {
+		return false;
+	}
+
+	if (anyOf && anyOf.length > 0 && !hasAny(set, anyOf)) {
+		return false;
+	}
+
+	if (noneOf && noneOf.length > 0 && !hasNone(set, noneOf)) {
+		return false;
+	}
+
+	if (onlyOf && !hasOnly(set, onlyOf)) {
+		return false;
+	}
+
+	return true;
+}
+
+export function getToolCombinationSummary(names: string[], pending: boolean): ToolCombination | null {
+	const set = new Set(names.map((name) => normalizeToolName(name)));
+	const orderedRules = [...TOOL_COMBINATION_RULES].sort((a, b) => a.order - b.order);
+
+	for (const rule of orderedRules) {
+		if (!matchesCombinationRule(rule, set)) {
+			continue;
+		}
+
+		return {
+			iconKey: rule.iconKey,
+			prefix: pending ? rule.pendingPrefix : rule.donePrefix,
+			showDetailList: rule.showDetailList ?? false,
+			matchedRuleId: rule.id
+		};
+	}
+
+	return null;
+}