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/mcp/McpActiveServersAvatars.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { conversationsStore } from '$lib/stores/conversations.svelte';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
@@ -50,7 +51,7 @@
 	>
 		<Tooltip.Root>
 			<Tooltip.Trigger>
-				<McpLogo class="h-4 w-4" />
+				<McpLogo class={ICON_CLASS_DEFAULT} />
 			</Tooltip.Trigger>
 
 			<Tooltip.Content>
@@ -68,7 +69,7 @@
 							<img
 								src={favicon.url}
 								alt=""
-								class="h-4 w-4"
+								class={ICON_CLASS_DEFAULT}
 								onerror={(e) => {
 									(e.currentTarget as HTMLImageElement).style.display = 'none';
 								}}

tools/ui/src/lib/components/app/mcp/McpResourcePreview.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import { FileText, Loader2, AlertCircle, Download } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
@@ -140,7 +141,7 @@
 						/>
 					{:else}
 						<div class="flex items-center gap-2 rounded bg-muted p-2 text-sm text-muted-foreground">
-							<FileText class="h-4 w-4" />
+							<FileText class={ICON_CLASS_DEFAULT} />
 
 							<span>Binary content ({blob.mimeType || 'unknown type'})</span>
 						</div>

tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserHeader.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import { RefreshCw, Loader2 } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { SearchInput } from '$lib/components/app/forms';
@@ -30,9 +31,9 @@
 			title="Refresh resources"
 		>
 			{#if isLoading}
-				<Loader2 class="h-4 w-4 animate-spin" />
+				<Loader2 class="{ICON_CLASS_DEFAULT} animate-spin" />
 			{:else}
-				<RefreshCw class="h-4 w-4" />
+				<RefreshCw class={ICON_CLASS_DEFAULT} />
 			{/if}
 		</Button>
 	</div>

tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserServerItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import { FolderOpen, ChevronDown, ChevronRight, Loader2, Braces } from '@lucide/svelte';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import * as Collapsible from '$lib/components/ui/collapsible';
@@ -122,7 +123,7 @@
 					checked={isSelected}
 					onCheckedChange={(checked: boolean | 'indeterminate') =>
 						handleCheckboxChange(resource, checked === true)}
-					class="h-4 w-4"
+					class={ICON_CLASS_DEFAULT}
 				/>
 			{/if}
 
@@ -160,7 +161,7 @@
 				<McpServerIdentity
 					displayName={serverDisplayName}
 					faviconUrl={serverFaviconUrl}
-					iconClass="h-4 w-4"
+					iconClass={ICON_CLASS_DEFAULT}
 					showVersion={false}
 				/>
 			</div>

tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import { tick } from 'svelte';
 	import * as Card from '$lib/components/ui/card';
 	import { Skeleton } from '$lib/components/ui/skeleton';
@@ -134,7 +135,7 @@
 			{#if showSkeleton}
 				<div class="space-y-2">
 					<div class="flex items-center gap-2">
-						<Skeleton class="h-4 w-4 rounded" />
+						<Skeleton class="{ICON_CLASS_DEFAULT} rounded" />
 						<Skeleton class="h-3 w-24" />
 					</div>
 					<div class="flex flex-wrap gap-1.5">
@@ -146,7 +147,7 @@
 
 				<div class="space-y-1.5">
 					<div class="flex items-center gap-2">
-						<Skeleton class="h-4 w-4 rounded" />
+						<Skeleton class="{ICON_CLASS_DEFAULT} rounded" />
 						<Skeleton class="h-3 w-32" />
 					</div>
 				</div>

tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardCompact.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { mode } from 'mode-watcher';
+	import type { RecommendedMCPServer } from '$lib/types';
+
+	interface Props {
+		server: RecommendedMCPServer;
+		onClick?: () => void;
+		selected?: boolean;
+		dimmed?: boolean;
+	}
+
+	let { server, onClick, selected = false, dimmed = false }: Props = $props();
+
+	let activeIconUrl = $derived.by(() => {
+		const isDark = mode.current === 'dark';
+
+		if (isDark && server.iconUrlDark) return server.iconUrlDark;
+		if (!isDark && server.iconUrlLight) return server.iconUrlLight;
+
+		return server.iconUrl;
+	});
+</script>
+
+<Card.Root
+	class={`relative gap-3! select-none bg-muted/30 p-4 transition-all ${onClick ? 'cursor-pointer hover:bg-muted/50 hover:opacity-100' : ''} ${selected ? 'bg-muted/30 ring-1 ring-primary/40' : ''} ${dimmed ? 'opacity-50' : ''}`}
+	onclick={onClick}
+>
+	<div class="flex min-w-0 items-center gap-2">
+		{#if activeIconUrl}
+			<img
+				src={activeIconUrl}
+				alt=""
+				class="h-5 w-5 shrink-0 rounded"
+				loading="lazy"
+				decoding="async"
+			/>
+		{/if}
+
+		<h4 class="min-w-0 flex-1 truncate font-medium">{server.name}</h4>
+	</div>
+
+	<p class="text-xs text-muted-foreground">{server.description}</p>
+</Card.Root>

tools/ui/src/lib/components/app/mcp/McpServerForm.svelte

@@ -5,9 +5,14 @@
 	import type { KeyValuePair } from '$lib/types';
 	import { parseHeadersToArray, serializeHeaders } from '$lib/utils';
 	import { UrlProtocol } from '$lib/enums';
-	import { MCP_SERVER_URL_PLACEHOLDER } from '$lib/constants';
+	import {
+		AUTHORIZATION_HEADER,
+		BEARER_PREFIX,
+		CLI_FLAGS,
+		MCP_SERVER_URL_PLACEHOLDER,
+		REDACTED_HEADERS
+	} from '$lib/constants';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import { CLI_FLAGS } from '$lib/constants';
 
 	interface Props {
 		url: string;
@@ -18,6 +23,22 @@
 		onUseProxyChange?: (useProxy: boolean) => void;
 		urlError?: string | null;
 		id?: string;
+		/**
+		 * "Wants Authorization" is the user's *intent* to add a Bearer token
+		 * (separate from `hasAuthorization` which reflects what's already in
+		 * the headers). Bindable so a parent - e.g. the recommendation cards
+		 * on the "Add New Server" dialog - can flip the switch on when the
+		 * picked server ships a `needsAuthorization: true` flag.
+		 */
+		wantsAuthorization?: boolean;
+		/**
+		 * Marks the "Authorization" field as required. Locks the toggle so the
+		 * user can't dismiss it, and visually marks the field with a red
+		 * asterisk. The parent is expected to gate its submit affordance on
+		 * the bearer token actually being filled. Used by the "Add New Server"
+		 * dialog for recommendations whose `needsAuthorization` flag is true.
+		 */
+		required?: boolean;
 	}
 
 	let {
@@ -28,7 +49,9 @@
 		onHeadersChange,
 		onUseProxyChange,
 		urlError = null,
-		id = 'server'
+		id = 'server',
+		wantsAuthorization = $bindable(false),
+		required = false
 	}: Props = $props();
 
 	let isWebSocket = $derived(
@@ -38,14 +61,11 @@
 
 	let headerPairs = $derived<KeyValuePair[]>(parseHeadersToArray(headers));
 
-	const AUTHORIZATION_HEADER = 'Authorization';
-	const BEARER_PREFIX = 'Bearer ';
-
 	// Heuristic: this dedicated UI only owns Authorization headers that already
 	// carry a Bearer scheme. Anything else (e.g. Basic, raw tokens) stays in the
 	// KV section so the user can still edit those values verbatim.
 	const matchesAuthorizationKey = (key: string): boolean =>
-		key.trim().toLowerCase() === AUTHORIZATION_HEADER.toLowerCase();
+		REDACTED_HEADERS.has(key.trim().toLowerCase());
 
 	const isBearerScheme = (value: string): boolean =>
 		value.trim().toLowerCase().startsWith(BEARER_PREFIX.toLowerCase());
@@ -55,8 +75,6 @@
 
 	let hasAuthorization = $derived(headerPairs.some(ownedByBearerUi));
 
-	let wantsAuthorization = $state(false);
-
 	let showAuthorization = $derived(hasAuthorization || wantsAuthorization);
 
 	let urlInput: HTMLInputElement | null = $state(null);
@@ -119,7 +137,7 @@
 
 <div class="grid gap-2">
 	<div class="mb-4">
-		<label for="server-url-{id}" class="mb-2 block text-xs font-medium">
+		<label for="server-url-{id}" class="mb-2 block text-xs font-medium select-none">
 			Server URL <span class="text-destructive">*</span>
 		</label>
 
@@ -138,14 +156,18 @@
 		{/if}
 	</div>
 
-	<label class="flex items-center gap-2 cursor-pointer">
+	<label class="flex items-center gap-2 cursor-pointer select-none">
 		<Switch
 			id="use-authorization-{id}"
 			checked={showAuthorization}
 			onCheckedChange={setUseAuthorization}
+			disabled={required}
 		/>
 
-		<span class="text-xs text-muted-foreground">Authorization</span>
+		<span class="text-xs text-muted-foreground">
+			Authorization{#if required}
+				<span class="text-destructive">*</span>{/if}
+		</span>
 	</label>
 
 	{#if showAuthorization}

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

@@ -180,6 +180,17 @@ export { default as McpServerCardDeleteDialog } from './McpServerCard/McpServerC
 /** Skeleton loading state for server card during health checks. */
 export { default as McpServerCardSkeleton } from './McpServerCardSkeleton.svelte';
 
+/**
+ * **McpServerCardCompact** - Condensed MCP server card
+ *
+ * Static card for picker-style UIs (e.g. recommended MCP servers in the
+ * Add New Server dialog). Shows an optional favicon, the server name, and
+ * a short description. Performs no network requests - safe to render
+ * without contacting any upstream server until the user explicitly adds
+ * the server.
+ */
+export { default as McpServerCardCompact } from './McpServerCard/McpServerCardCompact.svelte';
+
 /**
  * **McpServerIdentity** - Server identity display (icon, name, version)
  *