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/content/CollapsibleContentBlock.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
 	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { Card } from '$lib/components/ui/card';
-	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
-	import { useThrottle } from '$lib/hooks/use-throttle.svelte';
-	import { formatReasoningPreview } from '$lib/utils';
-	import { config } from '$lib/stores/settings.svelte';
+	import { cn } from '$lib/components/ui/utils';
 	import type { Snippet } from 'svelte';
 	import type { Component } from 'svelte';
 
@@ -15,11 +11,11 @@
 		class?: string;
 		icon?: Component;
 		iconClass?: string;
-		title: string;
+		iconUrl?: string | null;
+		title?: string;
+		titleSnippet?: Snippet;
 		subtitle?: string;
-		preview?: string;
-		rawContent?: string;
-		isStreaming?: boolean;
+		shimmerTitle?: boolean;
 		onToggle?: () => void;
 		children: Snippet;
 	}
@@ -28,45 +24,18 @@
 		open = $bindable(false),
 		class: className = '',
 		icon: IconComponent,
-		iconClass = 'h-4 w-4',
-		title,
+		iconClass = ICON_CLASS_DEFAULT,
+		iconUrl = null,
+		title = '',
+		titleSnippet,
 		subtitle,
-		preview,
-		rawContent,
-		isStreaming = false,
+		shimmerTitle = false,
 		onToggle,
 		children
 	}: Props = $props();
 
-	let contentContainer: HTMLDivElement | undefined = $state();
-
-	const showThoughtInProgress = $derived(config().showThoughtInProgress as boolean);
-
-	let previewKey = useThrottle(() => rawContent ?? preview ?? '', 500);
-	let displayedPreview = $state('');
-	let displayedOverflow = $state(0);
-
-	$effect(() => {
-		void previewKey.key;
-		const content = rawContent ?? preview ?? '';
-		const result = formatReasoningPreview(content);
-		displayedPreview = result.preview;
-		displayedOverflow = result.overflow;
-	});
-
-	const autoScroll = createAutoScrollController();
-
-	$effect(() => {
-		autoScroll.setContainer(contentContainer);
-	});
-
-	$effect(() => {
-		// Only auto-scroll when open and streaming
-		autoScroll.updateInterval(open && isStreaming);
-	});
-
-	function handleScroll() {
-		autoScroll.handleScroll();
+	function hideBrokenIcon(event: Event) {
+		(event.currentTarget as HTMLImageElement).style.display = 'none';
 	}
 </script>
 
@@ -76,59 +45,54 @@
 		open = value;
 		onToggle?.();
 	}}
-	class="{className} my-0!"
+	class={cn('group/collapsible', 'my-0!', className)}
 >
-	<Card class="gap-0 border-muted bg-muted/30 py-0">
-		<Collapsible.Trigger class="flex w-full cursor-pointer items-start justify-between gap-2 p-3">
-			<div class="flex min-w-0 items-center gap-2">
-				<div class="flex items-center gap-2 text-muted-foreground">
-					{#if IconComponent}
-						<IconComponent class={iconClass} />
-					{/if}
+	<Collapsible.Trigger
+		class={cn(
+			'flex w-full cursor-pointer items-start justify-between gap-2 text-left',
+			'py-1.5 pr-1'
+		)}
+	>
+		<div class="flex min-w-0 items-start gap-2 text-muted-foreground">
+			{#if iconUrl}
+				<img
+					src={iconUrl}
+					alt=""
+					class={cn('shrink-0 rounded-sm  mt-0.75', iconClass)}
+					onerror={hideBrokenIcon}
+				/>
+			{:else if IconComponent}
+				<IconComponent class={cn('shrink-0 text-muted-foreground/60 mt-0.75', iconClass)} />
+			{/if}
 
-					<span class="font-mono text-sm font-medium">{title}</span>
-
-					{#if subtitle}
-						<span class="text-xs italic">{subtitle}</span>
-					{/if}
-				</div>
-
-				{#if displayedPreview && !showThoughtInProgress}
-					<div class="flex min-w-0 items-baseline justify-between gap-2">
-						<div class="w-3/4 truncate text-xs text-muted-foreground/80">
-							{displayedPreview}
-						</div>
-						{#if displayedOverflow > 0}
-							<span class="shrink-0 text-xs text-muted-foreground/60"
-								>{displayedOverflow}+ chars</span
-							>
-						{/if}
-					</div>
+			<span class={cn('text-sm font-medium', shimmerTitle ? 'shimmer-text' : 'text-foreground/80')}>
+				{#if titleSnippet}
+					{@render titleSnippet()}
+				{:else}
+					{title}
 				{/if}
-			</div>
+			</span>
 
-			<div
-				class={buttonVariants({
-					variant: 'ghost',
-					size: 'sm',
-					class: 'h-6 w-6 p-0 text-muted-foreground hover:text-foreground'
-				})}
-			>
-				<ChevronsUpDownIcon class="h-4 w-4" />
+			{#if subtitle}
+				<span class="text-xs italic text-muted-foreground/70">{subtitle}</span>
+			{/if}
+		</div>
 
-				<span class="sr-only">Toggle content</span>
-			</div>
-		</Collapsible.Trigger>
+		<ChevronDown
+			class={cn(
+				'size-4 shrink-0 text-muted-foreground/60 transition-all duration-150 ease-out opacity-0 group-hover/collapsible:opacity-100 mt-0.75',
+				open && 'rotate-180'
+			)}
+		/>
 
-		<Collapsible.Content>
-			<div
-				bind:this={contentContainer}
-				class="overflow-y-auto border-t border-muted px-3 pb-3"
-				onscroll={handleScroll}
-				style="min-height: var(--min-message-height); max-height: var(--max-message-height);"
-			>
+		<span class="sr-only">Toggle content</span>
+	</Collapsible.Trigger>
+
+	<Collapsible.Content>
+		<div class="pl-1.5 grid min-w-0" style="min-height: var(--min-message-height);">
+			<div class="min-w-0 border-l border-muted-foreground/20 pl-4 pb-2 my-2">
 				{@render children()}
 			</div>
-		</Collapsible.Content>
-	</Card>
+		</div>
+	</Collapsible.Content>
 </Collapsible.Root>

tools/ui/src/lib/components/app/content/CollapsibleTerminalBlock.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
+	import { cn } from '$lib/components/ui/utils';
+	import { ICON_CLASS_DEFAULT } from '$lib/constants';
+	import type { Snippet } from 'svelte';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		open?: boolean;
+		class?: string;
+		icon?: Component;
+		iconClass?: string;
+		iconUrl?: string | null;
+		title?: string;
+		titleSnippet?: Snippet;
+		subtitle?: string;
+		shimmerTitle?: boolean;
+		onToggle?: () => void;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		class: className = '',
+		icon: IconComponent,
+		iconClass = ICON_CLASS_DEFAULT,
+		iconUrl = null,
+		title = '',
+		titleSnippet,
+		subtitle,
+		shimmerTitle = false,
+		onToggle,
+		children
+	}: Props = $props();
+
+	function hideBrokenIcon(event: Event) {
+		(event.currentTarget as HTMLImageElement).style.display = 'none';
+	}
+</script>
+
+<Collapsible.Root
+	{open}
+	onOpenChange={(value) => {
+		open = value;
+		onToggle?.();
+	}}
+	class={cn('group/collapsible', 'overflow-hidden rounded-md', className)}
+	style="background: var(--code-background); border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);"
+>
+	<Collapsible.Trigger
+		class={cn(
+			'flex w-full cursor-pointer items-start justify-between gap-2 text-left',
+			'px-3 py-2'
+		)}
+	>
+		<div class="flex min-w-0 items-start gap-2 text-muted-foreground">
+			{#if iconUrl}
+				<img
+					src={iconUrl}
+					alt=""
+					class={cn('shrink-0 rounded-sm mt-0.5', iconClass)}
+					onerror={hideBrokenIcon}
+				/>
+			{:else if IconComponent}
+				<IconComponent class={cn('shrink-0 text-muted-foreground/60 mt-0.5', iconClass)} />
+			{/if}
+
+			<span class={cn('text-sm font-medium', shimmerTitle ? 'shimmer-text' : 'text-foreground/80')}>
+				{#if titleSnippet}
+					{@render titleSnippet()}
+				{:else}
+					{title}
+				{/if}
+			</span>
+
+			{#if subtitle}
+				<span class="text-xs italic text-muted-foreground/70">{subtitle}</span>
+			{/if}
+		</div>
+
+		<ChevronDown
+			class={cn(
+				'size-4 shrink-0 text-muted-foreground/60 transition-all duration-150 ease-out opacity-0 group-hover/collapsible:opacity-100 mt-0.5',
+				open && 'rotate-180'
+			)}
+		/>
+
+		<span class="sr-only">Toggle content</span>
+	</Collapsible.Trigger>
+
+	<Collapsible.Content>
+		<div class="p-3 pt-1">
+			{@render children()}
+		</div>
+	</Collapsible.Content>
+</Collapsible.Root>

tools/ui/src/lib/components/app/content/MarkdownContent/markdown-content.css

@@ -19,8 +19,16 @@
 	line-height: 1.75;
 }
 
+.markdown-content :global(.markdown-block:first-child p:first-child) {
+	margin-block-start: 0;
+}
+
+.markdown-content :global(.markdown-block:last-child p:last-child) {
+	margin-block-end: 0;
+}
+
 .markdown-content :global(:is(h1, h2, h3, h4, h5, h6):first-child) {
-	margin-top: 0;
+	margin-top: 0.5rem;
 }
 
 /* Headers with consistent spacing */

tools/ui/src/lib/components/app/content/MermaidPreviewControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import { Download } from '@lucide/svelte';
 	import ZoomInIcon from '@lucide/svelte/icons/zoom-in';
 	import ZoomOutIcon from '@lucide/svelte/icons/zoom-out';
@@ -36,7 +37,7 @@
 			title="Zoom out"
 			aria-label="Zoom out"
 		>
-			<ZoomOutIcon class="mermaid-preview-btn-icon h-4 w-4" />
+			<ZoomOutIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
 		</button>
 		<span
 			class="mermaid-preview-zoom-label min-w-[3.5rem] px-0.5 text-center text-xs font-medium text-muted-foreground tabular-nums select-none"
@@ -48,7 +49,7 @@
 			title="Zoom in"
 			aria-label="Zoom in"
 		>
-			<ZoomInIcon class="mermaid-preview-btn-icon h-4 w-4" />
+			<ZoomInIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
 		</button>
 		<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
 
@@ -58,7 +59,7 @@
 			title="Reset view"
 			aria-label="Reset view"
 		>
-			<RotateCcwIcon class="mermaid-preview-btn-icon h-4 w-4" />
+			<RotateCcwIcon class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
 		</button>
 		<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
 
@@ -68,7 +69,7 @@
 			title="Download SVG"
 			aria-label="Download SVG"
 		>
-			<Download class="mermaid-preview-btn-icon h-4 w-4" />
+			<Download class="mermaid-preview-btn-icon {ICON_CLASS_DEFAULT}" />
 		</button>
 	</div>
 </div>

tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import hljs from 'highlight.js';
 	import { browser } from '$app/environment';
 	import { mode } from 'mode-watcher';
 
 	import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
 	import githubLightCss from 'highlight.js/styles/github.css?inline';
 	import { ColorMode } from '$lib/enums';
+	import { SYNTAX_CODE_SCROLL_AT_BOTTOM_THRESHOLD_PX } from '$lib/constants/auto-scroll';
+	import { highlightCode } from '$lib/utils';
 
 	interface Props {
 		code: string;
@@ -13,6 +14,9 @@
 		class?: string;
 		maxHeight?: string;
 		maxWidth?: string;
+		/** Auto-scrolls to the bottom of new chunks; pauses on user scroll-up
+		 *  until the user returns to the bottom. */
+		streaming?: boolean;
 	}
 
 	let {
@@ -20,10 +24,17 @@
 		language = 'text',
 		class: className = '',
 		maxHeight = '60vh',
-		maxWidth = ''
+		maxWidth = '',
+		streaming = false
 	}: Props = $props();
 
-	let highlightedHtml = $state('');
+	const highlightedHtml = $derived(highlightCode(code, language));
+
+	let scrollEl = $state<HTMLDivElement>();
+	let userScrolledUp = $state(false);
+	let lastScrollTop = 0;
+	const SCROLL_BOTTOM_THRESHOLD_PX = SYNTAX_CODE_SCROLL_AT_BOTTOM_THRESHOLD_PX;
+	let pendingFrame: number | null = null;
 
 	function loadHighlightTheme(isDark: boolean) {
 		if (!browser) return;
@@ -38,6 +49,36 @@
 		document.head.appendChild(style);
 	}
 
+	function isAtBottom(): boolean {
+		if (!scrollEl) return false;
+		return (
+			scrollEl.scrollHeight - scrollEl.clientHeight - scrollEl.scrollTop <=
+			SCROLL_BOTTOM_THRESHOLD_PX
+		);
+	}
+
+	function scrollToBottomOnFrame() {
+		if (pendingFrame !== null || !scrollEl || userScrolledUp) return;
+		pendingFrame = requestAnimationFrame(() => {
+			pendingFrame = null;
+			// User may scroll between scheduling and paint.
+			if (scrollEl && !userScrolledUp) {
+				scrollEl.scrollTop = scrollEl.scrollHeight;
+			}
+		});
+	}
+
+	function handleScrollEvent() {
+		if (!scrollEl) return;
+		const isScrollingUp = scrollEl.scrollTop < lastScrollTop;
+		if (isScrollingUp && !isAtBottom()) {
+			userScrolledUp = true;
+		} else if (isAtBottom()) {
+			userScrolledUp = false;
+		}
+		lastScrollTop = scrollEl.scrollTop;
+	}
+
 	$effect(() => {
 		const currentMode = mode.current;
 		const isDark = currentMode === ColorMode.DARK;
@@ -45,46 +86,64 @@
 		loadHighlightTheme(isDark);
 	});
 
+	// Pin to bottom at the start of each streaming episode.
 	$effect(() => {
-		if (!code) {
-			highlightedHtml = '';
-			return;
+		if (streaming) {
+			userScrolledUp = false;
+			lastScrollTop = 0;
 		}
+	});
 
-		try {
-			// Check if the language is supported
-			const lang = language.toLowerCase();
-			const isSupported = hljs.getLanguage(lang);
+	$effect(() => {
+		void code;
+		if (!streaming || userScrolledUp) return;
+		scrollToBottomOnFrame();
+	});
 
-			if (isSupported) {
-				const result = hljs.highlight(code, { language: lang });
-				highlightedHtml = result.value;
-			} else {
-				// Try auto-detection or fallback to plain text
-				const result = hljs.highlightAuto(code);
-				highlightedHtml = result.value;
-			}
-		} catch {
-			// Fallback to escaped plain text
-			highlightedHtml = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-		}
+	// Layout shifts that don't change `code` (highlight.js re-tokenize, line-wrap reflow).
+	$effect(() => {
+		if (!streaming || !scrollEl) return;
+
+		const observer = new MutationObserver(() => scrollToBottomOnFrame());
+		observer.observe(scrollEl, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+
+		return () => observer.disconnect();
 	});
 </script>
 
 <div
-	class="code-preview-wrapper min-w-0 max-w-full overflow-x-auto rounded-lg border border-border bg-muted {className}"
-	style="max-height: {maxHeight}; {maxWidth ? `max-width: ${maxWidth};` : ''}"
+	bind:this={scrollEl}
+	onscroll={handleScrollEvent}
+	class="code-preview-wrapper min-w-0 max-w-full overflow-auto rounded-xl border shadow-[0_1px_2px_0_rgb(0_0_0_/_0.05)] {className}"
+	style="border-color: color-mix(in oklch, var(--border) 30%, transparent); background: var(--code-background); max-height: {maxHeight}; {maxWidth
+		? `max-width: ${maxWidth};`
+		: ''}"
 >
-	<!-- Needs to be formatted as single line for proper rendering -->
+	<!-- Single line: hljs injection depends on a contiguous source string. -->
 	<pre class="m-0"><code class="hljs text-sm leading-relaxed">{@html highlightedHtml}</code></pre>
 </div>
 
 <style>
+	.code-preview-wrapper {
+		overscroll-behavior: contain;
+	}
+
 	.code-preview-wrapper pre {
 		background: transparent;
+		padding: 0;
 	}
 
 	.code-preview-wrapper code {
 		background: transparent;
+		display: block;
+		padding: 0.5rem;
+	}
+
+	:global(.dark) .code-preview-wrapper {
+		border-color: color-mix(in oklch, var(--border) 20%, transparent);
 	}
 </style>

tools/ui/src/lib/components/app/content/index.ts

@@ -68,7 +68,6 @@ export { default as SyntaxHighlightedCode } from './SyntaxHighlightedCode.svelte
  * ```svelte
  * <CollapsibleContentBlock
  *   bind:open
- *   icon={BrainIcon}
  *   title="Thinking..."
  *   isStreaming
  * >
@@ -78,6 +77,22 @@ export { default as SyntaxHighlightedCode } from './SyntaxHighlightedCode.svelte
  */
 export { default as CollapsibleContentBlock } from './CollapsibleContentBlock.svelte';
 
+/**
+ * **CollapsibleTerminalBlock** - Expandable content card with a terminal-style frame
+ *
+ * Same shape as CollapsibleContentBlock, but with a `code-background`
+ * fill, subtle border, and tightened padding suited for shell command
+ * output and similar dense / monospace content.
+ *
+ * @example
+ * ```svelte
+ * <CollapsibleTerminalBlock bind:open title="Run command">
+ *   <pre>{output}</pre>
+ * </CollapsibleTerminalBlock>
+ * ```
+ */
+export { default as CollapsibleTerminalBlock } from './CollapsibleTerminalBlock.svelte';
+
 /**
  * **MermaidPreview** - Interactive Mermaid diagram viewer
  *