ui: Agentic Content UX improvements (#25450)

* feat: Add shimmer text animation for processing state indicators

* feat: Redesign CollapsibleContentBlock component with improved UX

* feat: Add conditional setting display support with dependsOn field

* feat: Add showAgenticTurnStats setting for per-turn statistics

* feat: Update ChatMessageAgenticContent with improved UI and new features

* feat: Enhance file read tool UI/UX

* feat: Refine styling of collapsible content and code preview blocks

* feat: add terminal variant to CollapsibleContentBlock

* feat: add built-in tools UI registry

* feat: extract ChatMessageReasoningBlock and ChatMessageToolCallBlock

* refactor: simplify ChatMessageAgenticContent to use extracted blocks

* fix: correct markdown content block margin spacing

* fix: reorganize SettingsChatFields layout and reset button positioning

* fix: use direct map access in agentic store session methods

* refactor: remove reasoning preview/throttle system from CollapsibleContentBlock

* feat: add auto-scroll to reasoning block and remove showThoughtInProgress

* feat: add ChatMessageToolCallDateTime component and support for new tool types

* feat: improve auto-scroll reliability in reasoning block with RAF coalescing and MutationObserver

* feat: show MCP server favicon for tools without a built-in icon

* feat: add search-results parsing utilities and tests

* feat: add ChatMessageToolCallSearchResults component

* feat: integrate search results rendering into ChatMessageAgenticContent

* feat: display tool call input alongside output in ChatMessageToolCallBlock

* style: use muted foreground color in reasoning block content

* chore: Format

* feat: Refine reasoning block layout and make pending thoughts display configurable

* feat: Stream tool call code blocks with auto-scroll and handle partial JSON

* feat: add streaming permission gate infrastructure

* feat: wire permission gate into the agentic loop

* fix: bail out on abort and skip already-approved tool calls

* fix: clear partial tool calls on abort and savePartialResponse

* test: cover partial tool call cleanup end-to-end

* refactor: Remove streaming permission gate logic

* fix: Correct autoscroll and streaming gates for tool calls and reasoning blocks

* refactor: Chat Message Assistant componentization

* fix: Show health metadata for disabled MCP servers and promote connections on enable

* fix: Inherit global enabled state for missing MCP per-chat overrides

* refactor: Cleanup

* refactor: Split ChatMessageToolCallBlock into dedicated components

* feat: Add live streaming and auto-scroll for tool execution output

* feat: Add line numbers and change markers to file edit diffs

* chore: Formatting

* feat: Add type definitions and utilities for recommended MCP servers

* feat: Add recommended MCP servers configuration and storage key

* feat: Add McpServerCardCompact component for recommended servers

* feat: Add recommended servers section to Add New Server dialog

* feat: Update McpServerForm to support authorization requirements

* feat: Add select-none classes for text selection prevention

* feat: Add recommended MCP server icon assets

* refactor: Store dismissed MCP recommendations as a boolean flag

* feat: Render tool results as JSON or Markdown based on detected content type

* feat: UI improvement

* feat: Render search block early and update heading to show execution state

* fix: Prevent non-web-search tools from triggering the search UI block

* refactor: Cleanup

* refactor: Extract hardcoded icon size classes into shared constants

* refactor: Extract hardcoded tool result separator into a shared constant

* refactor: Tool Calls UI/logic

* refactor: Cleanup

* refactor: Cleanup

* refactor: Cleanup

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte

@@ -1,40 +1,29 @@
 <script lang="ts">
-	import { Wrench, Loader2, Brain } from '@lucide/svelte';
 	import {
 		ChatMessageStatistics,
-		CollapsibleContentBlock,
 		MarkdownContent,
-		SyntaxHighlightedCode,
 		ChatMessageActionCardPermissionRequest,
 		ChatMessageActionCardContinueRequest
 	} from '$lib/components/app';
 
-	import {
-		AgenticSectionType,
-		ChatMessageStatsView,
-		FileTypeText,
-		ToolPermissionDecision
-	} from '$lib/enums';
+	import { AgenticSectionType, ChatMessageStatsView, ToolPermissionDecision } from '$lib/enums';
 	import type {
 		ChatMessageAgenticTimings,
 		ChatMessageAgenticTurnStats,
 		DatabaseMessage
 	} from '$lib/types';
-	import {
-		deriveAgenticSections,
-		formatJsonPretty,
-		parseToolResultWithImages,
-		type AgenticSection,
-		type ToolResultLine
-	} from '$lib/utils';
+	import { deriveAgenticSections, type AgenticSection } from '$lib/utils';
 	import {
 		agenticPendingPermissionRequest,
 		agenticResolvePermission,
 		agenticPendingContinueRequest,
 		agenticResolveContinue,
-		agenticLastError
+		agenticLastError,
+		agenticExecutingToolCallId
 	} from '$lib/stores/agentic.svelte';
 	import { config } from '$lib/stores/settings.svelte';
+	import ChatMessageReasoningBlock from './ChatMessageReasoningBlock.svelte';
+	import ChatMessageToolCallBlock from './ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte';
 
 	interface Props {
 		message: DatabaseMessage;
@@ -52,10 +41,10 @@
 
 	let expandedStates: Record<number, boolean> = $state({});
 
-	const showToolCallInProgress = $derived(config().showToolCallInProgress as boolean);
-	const showThoughtInProgress = $derived(config().showThoughtInProgress as boolean);
 	const renderThinkingAsMarkdown = $derived(config().renderThinkingAsMarkdown as boolean);
-	const showMessageStats = $derived(config().showMessageStats as boolean);
+	const showThoughtInProgress = $derived(Boolean(config().showThoughtInProgress));
+	const showMessageStats = $derived(Boolean(config().showMessageStats));
+	const showAgenticTurnStats = $derived(showMessageStats && Boolean(config().showAgenticTurnStats));
 
 	const hasReasoningError = $derived(
 		isLastAssistantMessage ? !!agenticLastError(message.convId) : false
@@ -67,7 +56,6 @@
 		isStreaming && isLastAssistantMessage ? agenticPendingPermissionRequest(message.convId) : null
 	);
 
-	// Reset dismissed when pendingPermission changes (new request or cleared)
 	let prevPendingRef: typeof pendingPermission = null;
 	$effect(() => {
 		if (pendingPermission !== prevPendingRef) {
@@ -106,33 +94,43 @@
 
 	const sections = $derived(deriveAgenticSections(message, toolMessages, [], isStreaming));
 
-	// Parse tool results with images
-	const sectionsParsed = $derived(
-		sections.map((section) => ({
-			...section,
-			parsedLines: section.toolResult
-				? parseToolResultWithImages(section.toolResult, section.toolResultExtras || message?.extra)
-				: ([] as ToolResultLine[])
-		}))
+	const currentlyExecutingToolCallId = $derived(
+		isStreaming ? agenticExecutingToolCallId(message.convId) : null
 	);
 
-	// Group flat sections into agentic turns
-	// A new turn starts when a non-tool section follows a tool section
-	const turnGroups = $derived.by(() => {
-		const turns: { sections: (typeof sectionsParsed)[number][]; flatIndices: number[] }[] = [];
-		let currentTurn: (typeof sectionsParsed)[number][] = [];
+	// Skip sections the user manually collapsed - we never override an explicit false.
+	let lastSeenExecutingToolCallId: string | null = null;
+	$effect(() => {
+		const current = currentlyExecutingToolCallId;
+		const previous = lastSeenExecutingToolCallId;
+		lastSeenExecutingToolCallId = current;
+		if (!current || current === previous) return;
+		const idx = sections.findIndex((s) => s.toolCallId === current);
+		if (idx >= 0 && expandedStates[idx] === undefined) {
+			expandedStates[idx] = true;
+		}
+	});
+
+	type TurnGroup = {
+		sections: AgenticSection[];
+		flatIndices: number[];
+	};
+
+	const turnGroups: TurnGroup[] = $derived.by(() => {
+		const groups: TurnGroup[] = [];
+		let currentTurn: AgenticSection[] = [];
 		let currentIndices: number[] = [];
 		let prevWasTool = false;
 
-		for (let i = 0; i < sectionsParsed.length; i++) {
-			const section = sectionsParsed[i];
+		for (let i = 0; i < sections.length; i++) {
+			const section = sections[i];
 			const isTool =
 				section.type === AgenticSectionType.TOOL_CALL ||
 				section.type === AgenticSectionType.TOOL_CALL_PENDING ||
 				section.type === AgenticSectionType.TOOL_CALL_STREAMING;
 
 			if (!isTool && prevWasTool && currentTurn.length > 0) {
-				turns.push({ sections: currentTurn, flatIndices: currentIndices });
+				groups.push({ sections: currentTurn, flatIndices: currentIndices });
 				currentTurn = [];
 				currentIndices = [];
 			}
@@ -143,10 +141,10 @@
 		}
 
 		if (currentTurn.length > 0) {
-			turns.push({ sections: currentTurn, flatIndices: currentIndices });
+			groups.push({ sections: currentTurn, flatIndices: currentIndices });
 		}
 
-		return turns;
+		return groups;
 	});
 
 	function getDefaultExpanded(section: AgenticSection): boolean {
@@ -154,7 +152,7 @@
 			section.type === AgenticSectionType.TOOL_CALL_PENDING ||
 			section.type === AgenticSectionType.TOOL_CALL_STREAMING
 		) {
-			return showToolCallInProgress;
+			return false;
 		}
 
 		if (section.type === AgenticSectionType.REASONING_PENDING) {
@@ -189,181 +187,46 @@
 	}
 </script>
 
-{#snippet renderSection(section: (typeof sectionsParsed)[number], index: number)}
+{#snippet renderSection(section: AgenticSection, index: number)}
 	{#if section.type === AgenticSectionType.TEXT}
 		<div class="agentic-text">
 			<MarkdownContent content={section.content} attachments={message?.extra} />
 		</div>
-	{:else if section.type === AgenticSectionType.TOOL_CALL_STREAMING}
-		{@const streamingIcon = isStreaming ? Loader2 : Loader2}
-		{@const streamingIconClass = isStreaming ? 'h-4 w-4 animate-spin' : 'h-4 w-4'}
-
-		<CollapsibleContentBlock
+	{:else if section.type === AgenticSectionType.REASONING || section.type === AgenticSectionType.REASONING_PENDING}
+		<ChatMessageReasoningBlock
+			{section}
 			open={isExpanded(index, section)}
-			class="my-2"
-			icon={streamingIcon}
-			iconClass={streamingIconClass}
-			title={section.toolName || 'Tool call'}
-			subtitle={isStreaming ? '' : 'incomplete'}
 			{isStreaming}
+			{renderThinkingAsMarkdown}
+			{hasReasoningError}
+			attachments={message?.extra}
 			onToggle={() => toggleExpanded(index, section)}
-		>
-			<div class="pt-3">
-				<div class="my-3 flex items-center gap-2 text-xs text-muted-foreground">
-					<span>Arguments:</span>
-
-					{#if isStreaming}
-						<Loader2 class="h-3 w-3 animate-spin" />
-					{/if}
-				</div>
-				{#if section.toolArgs}
-					<SyntaxHighlightedCode
-						code={formatJsonPretty(section.toolArgs)}
-						language={FileTypeText.JSON}
-						maxHeight="20rem"
-						class="text-xs"
-					/>
-				{:else if isStreaming}
-					<div class="rounded bg-muted/30 p-2 text-xs text-muted-foreground italic">
-						Receiving arguments...
-					</div>
-				{:else}
-					<div
-						class="rounded bg-yellow-500/10 p-2 text-xs text-yellow-600 italic dark:text-yellow-400"
-					>
-						Response was truncated
-					</div>
-				{/if}
-			</div>
-		</CollapsibleContentBlock>
-	{:else if section.type === AgenticSectionType.TOOL_CALL || section.type === AgenticSectionType.TOOL_CALL_PENDING}
-		{@const isPending = section.type === AgenticSectionType.TOOL_CALL_PENDING}
-		{@const toolIcon = isPending ? Loader2 : Wrench}
-		{@const toolIconClass = isPending ? 'h-4 w-4 animate-spin' : 'h-4 w-4'}
-
-		<CollapsibleContentBlock
+		/>
+	{:else if section.type === AgenticSectionType.TOOL_CALL || section.type === AgenticSectionType.TOOL_CALL_PENDING || section.type === AgenticSectionType.TOOL_CALL_STREAMING}
+		<ChatMessageToolCallBlock
+			{section}
 			open={isExpanded(index, section)}
-			class="my-2"
-			icon={toolIcon}
-			iconClass={toolIconClass}
-			title={section.toolName || ''}
-			subtitle={isPending ? 'executing...' : undefined}
-			isStreaming={isPending}
-			onToggle={() => toggleExpanded(index, section)}
-		>
-			{#if section.toolArgs && section.toolArgs !== '{}'}
-				<div class="pt-3">
-					<div class="my-3 text-xs text-muted-foreground">Arguments:</div>
-
-					<SyntaxHighlightedCode
-						code={formatJsonPretty(section.toolArgs)}
-						language={FileTypeText.JSON}
-						maxHeight="20rem"
-						class="text-xs"
-					/>
-				</div>
-			{/if}
-
-			<div class="pt-3">
-				<div class="my-3 flex items-center gap-2 text-xs text-muted-foreground">
-					<span>Result:</span>
-
-					{#if isPending}
-						<Loader2 class="h-3 w-3 animate-spin" />
-					{/if}
-				</div>
-				{#if isPending}
-					<div class="rounded bg-muted/30 p-2 text-xs text-muted-foreground italic">
-						Waiting for result...
-					</div>
-				{:else if section.toolResult}
-					<div class="overflow-auto rounded-lg border border-border bg-muted p-4">
-						{#each section.parsedLines as line, i (i)}
-							<div class="font-mono text-xs leading-relaxed whitespace-pre-wrap">
-								{line.text}
-							</div>
-							{#if line.image}
-								<img
-									src={line.image.base64Url}
-									alt={line.image.name}
-									class="mt-2 mb-2 h-auto max-w-full rounded-lg"
-									loading="lazy"
-								/>
-							{/if}
-						{/each}
-					</div>
-				{:else}
-					<div class="rounded bg-muted/30 p-2 text-xs text-muted-foreground italic">No output</div>
-				{/if}
-			</div>
-		</CollapsibleContentBlock>
-	{:else if section.type === AgenticSectionType.REASONING}
-		{@const reasoningSubtitle = section.wasInterrupted
-			? hasReasoningError
-				? 'Error'
-				: 'Cancelled'
-			: isStreaming
-				? ''
-				: undefined}
-
-		<CollapsibleContentBlock
-			open={isExpanded(index, section)}
-			class="my-2"
-			icon={Brain}
-			title="Reasoning"
-			subtitle={reasoningSubtitle}
-			rawContent={section.content}
-			onToggle={() => toggleExpanded(index, section)}
-		>
-			<div class="pt-3">
-				{#if renderThinkingAsMarkdown}
-					<MarkdownContent content={section.content} attachments={message?.extra} />
-				{:else}
-					<div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
-						{section.content}
-					</div>
-				{/if}
-			</div>
-		</CollapsibleContentBlock>
-	{:else if section.type === AgenticSectionType.REASONING_PENDING}
-		{@const reasoningTitle = isStreaming ? 'Reasoning...' : 'Reasoning'}
-		{@const reasoningSubtitle = isStreaming ? '' : hasReasoningError ? 'Error' : 'Cancelled'}
-
-		<CollapsibleContentBlock
-			open={isExpanded(index, section)}
-			class="my-2"
-			icon={Brain}
-			title={reasoningTitle}
-			subtitle={reasoningSubtitle}
-			rawContent={section.content}
 			{isStreaming}
+			isExecuting={section.toolCallId !== undefined &&
+				section.toolCallId === currentlyExecutingToolCallId}
+			attachments={message?.extra}
 			onToggle={() => toggleExpanded(index, section)}
-		>
-			<div class="pt-3">
-				{#if renderThinkingAsMarkdown}
-					<MarkdownContent content={section.content} attachments={message?.extra} />
-				{:else}
-					<div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
-						{section.content}
-					</div>
-				{/if}
-			</div>
-		</CollapsibleContentBlock>
+		/>
 	{/if}
 {/snippet}
 
-<div class="agentic-content">
+<div class="agentic-content gap-2">
 	{#if turnGroups.length > 1}
 		{#each turnGroups as turn, turnIndex (turnIndex)}
 			{@const turnStats = message?.timings?.agentic?.perTurn?.[turnIndex]}
 
-			<div class="agentic-turn group/turn grid gap-3 mb-4">
+			<div class="agentic-turn group/turn grid gap-2">
 				{#each turn.sections as section, sIdx (turn.flatIndices[sIdx])}
 					{@render renderSection(section, turn.flatIndices[sIdx])}
 				{/each}
 
-				{#if turnStats && showMessageStats}
-					<div class="turn-stats transition-opacity duration-150">
+				{#if turnStats && showAgenticTurnStats}
+					<div class="turn-stats transition-opacity duration-150 mt-1 mb-4">
 						<ChatMessageStatistics
 							promptTokens={turnStats.llm.prompt_n}
 							promptMs={turnStats.llm.prompt_ms}
@@ -380,7 +243,7 @@
 			</div>
 		{/each}
 	{:else}
-		{#each sectionsParsed as section, index (index)}
+		{#each sections as section, index (index)}
 			{@render renderSection(section, index)}
 		{/each}
 	{/if}
@@ -404,7 +267,6 @@
 		flex-direction: column;
 		width: 100%;
 		max-width: 48rem;
-		gap: 1rem;
 	}
 
 	.agentic-content > :global(*),