Merge branch 'upstream' into concedo_experimental

# Conflicts:
#	AGENTS.md
#	build-xcframework.sh

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte

@@ -231,7 +231,7 @@
 						<Collapsible.Content>
 							<div class="flex flex-col gap-0.5 pl-4">
 								{#each toolsPanel.activeGroups as group (group.label)}
-									{@const { checked, indeterminate } = toolsPanel.getGroupCheckedState(group)}
+									{@const checked = toolsPanel.isGroupChecked(group)}
 									{@const enabledCount = toolsPanel.getEnabledToolCount(group)}
 									{@const favicon = toolsPanel.getFavicon(group)}
 
@@ -259,7 +259,6 @@
 
 										<Checkbox
 											{checked}
-											{indeterminate}
 											class="h-4 w-4 shrink-0"
 											onclick={(e) => e.stopPropagation()}
 											onCheckedChange={() => toolsPanel.toggleGroupByLabel(group.label)}

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PencilRuler, ChevronDown, ChevronRight, Loader2, Info } from '@lucide/svelte';
+	import { PencilRuler, ChevronDown, ChevronRight, Loader2, Info, Check } from '@lucide/svelte';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
@@ -65,7 +65,7 @@
 			<div class="max-h-80 overflow-y-auto p-2 pr-1">
 				{#each toolsPanel.activeGroups as group (group.label)}
 					{@const isExpanded = toolsPanel.expandedGroups.has(group.label)}
-					{@const { checked, indeterminate } = toolsPanel.getGroupCheckedState(group)}
+					{@const checked = toolsPanel.isGroupChecked(group)}
 					{@const favicon = toolsPanel.getFavicon(group)}
 
 					<Collapsible.Root
@@ -104,12 +104,14 @@
 
 							<Tooltip.Root>
 								<Tooltip.Trigger>
-									<Checkbox
-										{checked}
-										{indeterminate}
-										onCheckedChange={() => toolsPanel.toggleGroupByLabel(group.label)}
-										class="mr-2 h-4 w-4 shrink-0"
-									/>
+									{#snippet child({ props })}
+										<Checkbox
+											{...props}
+											{checked}
+											onCheckedChange={() => toolsPanel.toggleGroupByLabel(group.label)}
+											class="mr-2 h-4 w-4 shrink-0"
+										/>
+									{/snippet}
 								</Tooltip.Trigger>
 
 								<Tooltip.Content side="right">
@@ -123,20 +125,25 @@
 
 						<Collapsible.Content>
 							<div class="ml-4 flex flex-col gap-0.5 border-l border-border/50 pl-2">
-								{#each group.tools as tool (tool.function.name)}
+								{#each group.tools as entry (entry.key)}
+									{@const enabled = toolsStore.isToolEnabled(entry.key)}
 									<button
 										type="button"
 										class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted/50"
-										onclick={() => toolsStore.toggleTool(tool.function.name)}
+										onclick={() => toolsStore.toggleTool(entry.key)}
 									>
-										<Checkbox
-											checked={toolsStore.isToolEnabled(tool.function.name)}
-											onCheckedChange={() => toolsStore.toggleTool(tool.function.name)}
-											class="h-4 w-4 shrink-0"
-										/>
+										<span
+											data-slot="checkbox"
+											data-state={enabled ? 'checked' : 'unchecked'}
+											class="flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+										>
+											{#if enabled}
+												<Check class="size-3.5" />
+											{/if}
+										</span>
 
 										<span class="min-w-0 flex-1 truncate font-mono text-[12px]">
-											{tool.function.name}
+											{entry.definition.function.name}
 										</span>
 									</button>
 								{/each}

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

@@ -31,7 +31,8 @@
 		agenticPendingPermissionRequest,
 		agenticResolvePermission,
 		agenticPendingContinueRequest,
-		agenticResolveContinue
+		agenticResolveContinue,
+		agenticLastError
 	} from '$lib/stores/agentic.svelte';
 	import { config } from '$lib/stores/settings.svelte';
 
@@ -56,6 +57,10 @@
 	const showToolCallInProgress = $derived(config().showToolCallInProgress as boolean);
 	const showThoughtInProgress = $derived(config().showThoughtInProgress as boolean);
 
+	const hasReasoningError = $derived(
+		isLastAssistantMessage ? !!agenticLastError(message.convId) : false
+	);
+
 	let permissionDismissed = $state(false);
 
 	const pendingPermission = $derived(
@@ -293,11 +298,21 @@
 			</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">
@@ -308,7 +323,7 @@
 		</CollapsibleContentBlock>
 	{:else if section.type === AgenticSectionType.REASONING_PENDING}
 		{@const reasoningTitle = isStreaming ? 'Reasoning...' : 'Reasoning'}
-		{@const reasoningSubtitle = isStreaming ? '' : 'incomplete'}
+		{@const reasoningSubtitle = isStreaming ? '' : hasReasoningError ? 'Error' : 'Cancelled'}
 
 		<CollapsibleContentBlock
 			open={isExpanded(index, section)}
@@ -316,6 +331,7 @@
 			icon={Brain}
 			title={reasoningTitle}
 			subtitle={reasoningSubtitle}
+			rawContent={section.content}
 			{isStreaming}
 			onToggle={() => toggleExpanded(index, section)}
 		>

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

@@ -4,6 +4,9 @@
 	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 type { Snippet } from 'svelte';
 	import type { Component } from 'svelte';
 
@@ -14,6 +17,8 @@
 		iconClass?: string;
 		title: string;
 		subtitle?: string;
+		preview?: string;
+		rawContent?: string;
 		isStreaming?: boolean;
 		onToggle?: () => void;
 		children: Snippet;
@@ -26,6 +31,8 @@
 		iconClass = 'h-4 w-4',
 		title,
 		subtitle,
+		preview,
+		rawContent,
 		isStreaming = false,
 		onToggle,
 		children
@@ -33,6 +40,20 @@
 
 	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(() => {
@@ -58,16 +79,31 @@
 	class={className}
 >
 	<Card class="gap-0 border-muted bg-muted/30 py-0">
-		<Collapsible.Trigger class="flex w-full cursor-pointer items-center justify-between p-3">
-			<div class="flex items-center gap-2 text-muted-foreground">
-				{#if IconComponent}
-					<IconComponent class={iconClass} />
-				{/if}
+		<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}
 
-				<span class="font-mono text-sm font-medium">{title}</span>
+					<span class="font-mono text-sm font-medium">{title}</span>
 
-				{#if subtitle}
-					<span class="text-xs italic">{subtitle}</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>
 				{/if}
 			</div>
 

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatToolsTab.svelte

@@ -62,13 +62,11 @@
 							<span class="w-20 shrink-0 text-center">Always allow</span>
 						</div>
 
-						{#each group.tools as tool (tool.function.name)}
-							{@const toolName = tool.function.name}
-							{@const isEnabled = toolsStore.isToolEnabled(toolName)}
-							{@const permissionKey = toolsStore.getPermissionKey(toolName)}
-							{@const isAlwaysAllowed = permissionKey
-								? permissionsStore.hasTool(permissionKey)
-								: false}
+						{#each group.tools as entry (entry.key)}
+							{@const toolName = entry.definition.function.name}
+							{@const isEnabled = toolsStore.isToolEnabled(entry.key)}
+							{@const permissionKey = entry.key}
+							{@const isAlwaysAllowed = permissionsStore.hasTool(permissionKey)}
 
 							<div class="flex items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50">
 								<TruncatedText text={toolName} class="flex-1" showTooltip={true} />
@@ -76,7 +74,7 @@
 								<div class="flex w-16 shrink-0 justify-center">
 									<Checkbox
 										checked={isEnabled}
-										onCheckedChange={() => toolsStore.toggleTool(toolName)}
+										onCheckedChange={() => toolsStore.toggleTool(entry.key)}
 										class="h-4 w-4"
 									/>
 								</div>
@@ -86,9 +84,9 @@
 										checked={isAlwaysAllowed}
 										onCheckedChange={() => {
 											if (isAlwaysAllowed) {
-												permissionsStore.revokeTool(permissionKey!);
+												permissionsStore.revokeTool(permissionKey);
 											} else {
-												permissionsStore.allowTool(permissionKey!);
+												permissionsStore.allowTool(permissionKey);
 											}
 										}}
 										class="h-4 w-4"

tools/ui/src/lib/constants/formatters.ts

@@ -6,3 +6,30 @@ export const MEDIUM_DURATION_THRESHOLD = 10;
 
 /** Default display value when no performance time is available */
 export const DEFAULT_PERFORMANCE_TIME = '0s';
+
+/** Max length before reasoning preview is truncated */
+export const MAX_PREVIEW_LENGTH = 120;
+
+export const STRIP_MARKDOWN_CAPTURE_PATTERNS: [RegExp, string][] = [
+	[/^```(.*)/gm, '$1'],
+	[/(.*)```$/gm, '$1'],
+	[/`([^`]*)`/g, '$1'],
+	[/\*\*(.*?)\*\*/g, '$1'],
+	[/__(.*?)__/g, '$1'],
+	[/\*(.*?)\*/g, '$1'],
+	[/_(.*?)_/g, '$1']
+];
+
+/* eslint-disable no-misleading-character-class */
+export const STRIP_MARKDOWN_INLINE_REGEX = new RegExp(
+	[
+		'<[^>]*>',
+		'^>\\s*',
+		'^#{1,6}\\s+',
+		'^[\\s]*[-*+]\\s+',
+		'^[\\s]*\\d+[.)]\\s+',
+		'[\\u{1F600}-\\u{1F64F}\\u{1F300}-\\u{1F5FF}\\u{1F680}-\\u{1F6FF}\\u{1F1E0}-\\u{1F1FF}\\u{2600}-\\u{26FF}\\u{2700}-\\u{27BF}\\u{FE00}-\\u{FE0F}\\u{1F900}-\\u{1F9FF}\\u{1FA00}-\\u{1FA6F}\\u{1FA70}-\\u{1FAFF}\\u{200D}\\u{20E3}\\u{231A}-\\u{231B}\\u{23E9}-\\u{23F3}\\u{23F8}-\\u{23FA}\\u{25AA}-\\u{25AB}\\u{25B6}\\u{25C0}\\u{25FB}-\\u{25FE}\\u{2934}-\\u{2935}\\u{2B05}-\\u{2B07}\\u{2B1B}-\\u{2B1C}\\u{2B50}\\u{2B55}\\u{3030}\\u{303D}\\u{3297}\\u{3299}]'
+	].join('|'),
+	'gmu'
+);
+/* eslint-enable no-misleading-character-class */

tools/ui/src/lib/constants/storage.ts

@@ -17,6 +17,9 @@ export const DB_APP_NAME_DEPRECATED = 'LlamacppWebui';
 export const ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.alwaysAllowedTools`;
 export const CONFIG_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.config`;
 export const DISABLED_TOOLS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.disabledTools`;
+
+/** Disabled tools keyed by stable selection identity, no migration from the name based key */
+export const DISABLED_TOOL_KEYS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.disabledToolKeys`;
 export const FAVORITE_MODELS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.favoriteModels`;
 export const MCP_DEFAULT_ENABLED_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.mcpDefaultEnabled`;
 export const THINKING_ENABLED_DEFAULT_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.thinkingEnabledDefault`;

tools/ui/src/lib/hooks/use-throttle.svelte.ts

@@ -0,0 +1,32 @@
+/**
+ * Creates a reactive throttle key that increments when `getValue()` changes
+ * and the throttle window has elapsed since the last increment.
+ *
+ * Useful for throttling animations that should not fire on every rapid update.
+ *
+ * @param getValue - A reactive getter for the value to watch
+ * @param ms - Throttle window in milliseconds
+ * @returns A reactive number that increments when the throttled value changes
+ */
+export function useThrottle(getValue: () => string | undefined, ms: number) {
+	let key = $state(0);
+	let throttleEnd = $state(0);
+	let lastValue: string | undefined = getValue();
+
+	$effect(() => {
+		const value = getValue();
+		if (value === lastValue) return;
+		const now = Date.now();
+		if (now >= throttleEnd) {
+			lastValue = value;
+			key++;
+			throttleEnd = now + ms;
+		}
+	});
+
+	return {
+		get key() {
+			return key;
+		}
+	};
+}

tools/ui/src/lib/hooks/use-tools-panel.svelte.ts

@@ -12,9 +12,9 @@ export interface UseToolsPanelReturn {
 	readonly activeGroups: ToolGroup[];
 	readonly totalToolCount: number;
 	readonly noToolsInfoMessage: string | null;
-	getGroupCheckedState(group: ToolGroup): { checked: boolean; indeterminate: boolean };
+	isGroupChecked(group: ToolGroup): boolean;
 	getEnabledToolCount(group: ToolGroup): number;
-	getFavicon(group: { source: ToolSource; label: string }): string | null;
+	getFavicon(group: ToolGroup): string | null;
 	isGroupDisabled(group: ToolGroup): boolean;
 	toggleGroupExpanded(label: string): void;
 	/** Toggle all tools in a group by label (avoids stale group object references). */
@@ -54,27 +54,18 @@ export function useToolsPanel(): UseToolsPanelReturn {
 		return `To enable Built-In Tools you need to run llama-server with ${CLI_FLAGS.TOOLS} all or ${CLI_FLAGS.TOOLS} <name> flag. To see MCP Tools you need to add / enable MCP Server(s).`;
 	});
 
-	function getGroupCheckedState(group: ToolGroup): { checked: boolean; indeterminate: boolean } {
-		return {
-			checked: toolsStore.isGroupFullyEnabled(group),
-			indeterminate: toolsStore.isGroupPartiallyEnabled(group)
-		};
+	function isGroupChecked(group: ToolGroup): boolean {
+		return toolsStore.isGroupFullyEnabled(group);
 	}
 
 	function getEnabledToolCount(group: ToolGroup): number {
-		return group.tools.filter((tool) => toolsStore.isToolEnabled(tool.function.name)).length;
+		return group.tools.filter((tool) => toolsStore.isToolEnabled(tool.key)).length;
 	}
 
-	function getFavicon(group: { source: ToolSource; label: string }): string | null {
-		if (group.source !== ToolSource.MCP) return null;
+	function getFavicon(group: ToolGroup): string | null {
+		if (group.source !== ToolSource.MCP || !group.serverId) return null;
 
-		for (const server of mcpStore.getServersSorted()) {
-			if (mcpStore.getServerLabel(server) === group.label) {
-				return mcpStore.getServerFavicon(server.id);
-			}
-		}
-
-		return null;
+		return mcpStore.getServerFavicon(group.serverId);
 	}
 
 	function isGroupDisabled(group: ToolGroup): boolean {
@@ -121,7 +112,7 @@ export function useToolsPanel(): UseToolsPanelReturn {
 		get noToolsInfoMessage() {
 			return noToolsInfoMessage;
 		},
-		getGroupCheckedState,
+		isGroupChecked,
 		getEnabledToolCount,
 		getFavicon,
 		isGroupDisabled,

tools/ui/src/lib/stores/tools.svelte.ts

@@ -4,12 +4,39 @@ import { mcpStore } from '$lib/stores/mcp.svelte';
 import { HealthCheckStatus, JsonSchemaType, ToolCallType, ToolSource } from '$lib/enums';
 import { config } from '$lib/stores/settings.svelte';
 import {
-	DISABLED_TOOLS_LOCALSTORAGE_KEY,
+	DISABLED_TOOL_KEYS_LOCALSTORAGE_KEY,
 	TOOL_GROUP_LABELS,
 	TOOL_SERVER_LABELS
 } from '$lib/constants';
 
-import { SvelteSet } from 'svelte/reactivity';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+
+/** Stable selection identity for a tool, shared by the disabled set and the permission store */
+function toolKey(source: ToolSource, name: string, serverId?: string): string {
+	switch (source) {
+		case ToolSource.MCP:
+			return serverId ? `mcp-${serverId}:${name}` : `mcp:${name}`;
+		case ToolSource.CUSTOM:
+			return `custom:${name}`;
+		default:
+			return `builtin:${name}`;
+	}
+}
+
+function mcpDefinition(
+	name: string,
+	description: string | undefined,
+	schema?: Record<string, unknown>
+): OpenAIToolDefinition {
+	return {
+		type: ToolCallType.FUNCTION,
+		function: {
+			name,
+			description,
+			parameters: schema ?? { type: JsonSchemaType.OBJECT, properties: {}, required: [] }
+		}
+	};
+}
 
 class ToolsStore {
 	private _builtinTools = $state<OpenAIToolDefinition[]>([]);
@@ -20,12 +47,12 @@ class ToolsStore {
 
 	constructor() {
 		try {
-			const stored = localStorage.getItem(DISABLED_TOOLS_LOCALSTORAGE_KEY);
+			const stored = localStorage.getItem(DISABLED_TOOL_KEYS_LOCALSTORAGE_KEY);
 			if (stored) {
 				const parsed = JSON.parse(stored);
 				if (Array.isArray(parsed)) {
-					for (const name of parsed) {
-						if (typeof name === 'string') this._disabledTools.add(name);
+					for (const key of parsed) {
+						if (typeof key === 'string') this._disabledTools.add(key);
 					}
 				}
 			}
@@ -33,14 +60,13 @@ class ToolsStore {
 			console.error('[ToolsStore] Failed to load disabled tools from localStorage:', err);
 		}
 
-		// Initialize builtin tools on startup
 		this.fetchBuiltinTools();
 	}
 
 	private persistDisabledTools(): void {
 		try {
 			localStorage.setItem(
-				DISABLED_TOOLS_LOCALSTORAGE_KEY,
+				DISABLED_TOOL_KEYS_LOCALSTORAGE_KEY,
 				JSON.stringify([...this._disabledTools])
 			);
 		} catch {
@@ -78,167 +104,141 @@ class ToolsStore {
 		}
 	}
 
-	/** Flat list of all tool entries with source metadata */
-	get allTools(): ToolEntry[] {
-		const entries: ToolEntry[] = [];
+	/** Normalize MCP tools from live connections when available, fall back to health check data */
+	private mcpEntries(): {
+		serverId: string;
+		serverName: string;
+		definition: OpenAIToolDefinition;
+	}[] {
+		const out: { serverId: string; serverName: string; definition: OpenAIToolDefinition }[] = [];
 
-		for (const def of this._builtinTools) {
-			entries.push({ source: ToolSource.BUILTIN, definition: def });
-		}
-
-		// Use live connections when available (full schema), fall back to health check data
 		const connections = mcpStore.getConnections();
 		if (connections.size > 0) {
 			for (const [serverId, connection] of connections) {
 				const serverName = mcpStore.getServerDisplayName(serverId);
 				for (const tool of connection.tools) {
-					const rawSchema = (tool.inputSchema as Record<string, unknown>) ?? {
-						type: JsonSchemaType.OBJECT,
-						properties: {},
-						required: []
-					};
-					entries.push({
-						source: ToolSource.MCP,
-						serverName,
+					const schema = (tool.inputSchema as Record<string, unknown>) ?? undefined;
+					out.push({
 						serverId,
-						definition: {
-							type: ToolCallType.FUNCTION,
-							function: {
-								name: tool.name,
-								description: tool.description,
-								parameters: rawSchema
-							}
-						}
+						serverName,
+						definition: mcpDefinition(tool.name, tool.description, schema)
 					});
 				}
 			}
 		} else {
 			for (const { serverId, serverName, tools } of this.getMcpToolsFromHealthChecks()) {
 				for (const tool of tools) {
-					entries.push({
-						source: ToolSource.MCP,
-						serverName,
+					out.push({
 						serverId,
-						definition: {
-							type: ToolCallType.FUNCTION,
-							function: {
-								name: tool.name,
-								description: tool.description,
-								parameters: {
-									type: JsonSchemaType.OBJECT,
-									properties: {},
-									required: []
-								}
-							}
-						}
+						serverName,
+						definition: mcpDefinition(tool.name, tool.description)
 					});
 				}
 			}
 		}
 
+		return out;
+	}
+
+	/** Canonical flat list of tool entries with source metadata and stable keys, deduped by key */
+	get allTools(): ToolEntry[] {
+		const entries: ToolEntry[] = [];
+		const seen = new SvelteSet<string>();
+
+		const push = (entry: ToolEntry) => {
+			if (seen.has(entry.key)) return;
+			seen.add(entry.key);
+			entries.push(entry);
+		};
+
+		for (const def of this._builtinTools) {
+			const name = def.function.name;
+			push({ source: ToolSource.BUILTIN, key: toolKey(ToolSource.BUILTIN, name), definition: def });
+		}
+
+		for (const { serverId, serverName, definition } of this.mcpEntries()) {
+			const name = definition.function.name;
+			push({
+				source: ToolSource.MCP,
+				serverId,
+				serverName,
+				key: toolKey(ToolSource.MCP, name, serverId),
+				definition
+			});
+		}
+
 		for (const def of this.customTools) {
-			entries.push({ source: ToolSource.CUSTOM, definition: def });
+			const name = def.function.name;
+			push({ source: ToolSource.CUSTOM, key: toolKey(ToolSource.CUSTOM, name), definition: def });
 		}
 
 		return entries;
 	}
 
-	/** Tools grouped by category for tree display */
+	/** Tools grouped by category for tree display, derived from the canonical entries */
 	get toolGroups(): ToolGroup[] {
 		const groups: ToolGroup[] = [];
+		const byKey = new SvelteMap<string, ToolGroup>();
 
-		if (this._builtinTools.length > 0) {
-			groups.push({
-				source: ToolSource.BUILTIN,
-				label: TOOL_GROUP_LABELS[ToolSource.BUILTIN],
-				tools: this._builtinTools
-			});
-		}
+		for (const entry of this.allTools) {
+			const groupKey =
+				entry.source === ToolSource.MCP ? `mcp:${entry.serverId ?? ''}` : entry.source;
 
-		// Use live connections when available, fall back to health check data
-		const connections = mcpStore.getConnections();
-		if (connections.size > 0) {
-			for (const [serverId, connection] of connections) {
-				if (connection.tools.length === 0) continue;
-				const label = mcpStore.getServerDisplayName(serverId);
-				const tools: OpenAIToolDefinition[] = connection.tools.map((tool) => {
-					const rawSchema = (tool.inputSchema as Record<string, unknown>) ?? {
-						type: JsonSchemaType.OBJECT,
-						properties: {},
-						required: []
-					};
-					return {
-						type: ToolCallType.FUNCTION,
-						function: {
-							name: tool.name,
-							description: tool.description,
-							parameters: rawSchema
-						}
-					};
-				});
-				groups.push({ source: ToolSource.MCP, label, serverId, tools });
+			let group = byKey.get(groupKey);
+			if (!group) {
+				group = {
+					source: entry.source,
+					label: this.groupLabel(entry),
+					serverId: entry.serverId,
+					tools: []
+				};
+				byKey.set(groupKey, group);
+				groups.push(group);
 			}
-		} else {
-			for (const { serverId, serverName, tools } of this.getMcpToolsFromHealthChecks()) {
-				if (tools.length === 0) continue;
-				const defs: OpenAIToolDefinition[] = tools.map((tool) => ({
-					type: ToolCallType.FUNCTION,
-					function: {
-						name: tool.name,
-						description: tool.description,
-						parameters: { type: JsonSchemaType.OBJECT, properties: {}, required: [] }
-					}
-				}));
-				groups.push({ source: ToolSource.MCP, label: serverName, serverId, tools: defs });
-			}
-		}
 
-		const custom = this.customTools;
-		if (custom.length > 0) {
-			groups.push({
-				source: ToolSource.CUSTOM,
-				label: TOOL_GROUP_LABELS[ToolSource.CUSTOM],
-				tools: custom
-			});
+			group.tools.push(entry);
 		}
 
 		return groups;
 	}
 
-	/** Only enabled tool definitions (for sending to the API) */
-	get enabledToolDefinitions(): OpenAIToolDefinition[] {
-		return this.allTools
-			.filter((t) => !this._disabledTools.has(t.definition.function.name))
-			.map((t) => t.definition);
+	private groupLabel(entry: ToolEntry): string {
+		switch (entry.source) {
+			case ToolSource.MCP:
+				return entry.serverName ?? '';
+			case ToolSource.CUSTOM:
+				return TOOL_GROUP_LABELS[ToolSource.CUSTOM];
+			default:
+				return TOOL_GROUP_LABELS[ToolSource.BUILTIN];
+		}
 	}
 
 	/**
-	 * Returns enabled tool definitions for sending to the LLM.
-	 * MCP tools use properly normalized schemas from mcpStore.
-	 * Filters out tools disabled via the UI checkboxes.
+	 * Enabled tool definitions for sending to the LLM.
+	 * MCP tools keep their normalized schemas from mcpStore.
+	 * The API identifies tools by name, so a name is sent at most once.
 	 */
 	getEnabledToolsForLLM(): OpenAIToolDefinition[] {
-		const disabled = this._disabledTools;
+		const enabledNames = new SvelteSet<string>();
+		for (const entry of this.allTools) {
+			if (!this._disabledTools.has(entry.key)) {
+				enabledNames.add(entry.definition.function.name);
+			}
+		}
+
 		const result: OpenAIToolDefinition[] = [];
+		const seen = new SvelteSet<string>();
 
-		for (const tool of this._builtinTools) {
-			if (!disabled.has(tool.function.name)) {
-				result.push(tool);
-			}
-		}
+		const take = (def: OpenAIToolDefinition) => {
+			const name = def.function.name;
+			if (!enabledNames.has(name) || seen.has(name)) return;
+			seen.add(name);
+			result.push(def);
+		};
 
-		// MCP tools with properly normalized schemas
-		for (const tool of mcpStore.getToolDefinitionsForLLM()) {
-			if (!disabled.has(tool.function.name)) {
-				result.push(tool);
-			}
-		}
-
-		for (const tool of this.customTools) {
-			if (!disabled.has(tool.function.name)) {
-				result.push(tool);
-			}
-		}
+		for (const def of this._builtinTools) take(def);
+		for (const def of mcpStore.getToolDefinitionsForLLM()) take(def);
+		for (const def of this.customTools) take(def);
 
 		return result;
 	}
@@ -263,61 +263,50 @@ class ToolsStore {
 		return this._disabledTools;
 	}
 
-	isToolEnabled(toolName: string): boolean {
-		return !this._disabledTools.has(toolName);
+	isToolEnabled(key: string): boolean {
+		return !this._disabledTools.has(key);
 	}
 
-	toggleTool(toolName: string): void {
-		if (this._disabledTools.has(toolName)) {
-			this._disabledTools.delete(toolName);
+	toggleTool(key: string): void {
+		if (this._disabledTools.has(key)) {
+			this._disabledTools.delete(key);
 		} else {
-			this._disabledTools.add(toolName);
+			this._disabledTools.add(key);
 		}
 		this.persistDisabledTools();
 	}
 
-	setToolEnabled(toolName: string, enabled: boolean): void {
+	setToolEnabled(key: string, enabled: boolean): void {
 		if (enabled) {
-			this._disabledTools.delete(toolName);
+			this._disabledTools.delete(key);
 		} else {
-			this._disabledTools.add(toolName);
+			this._disabledTools.add(key);
 		}
 	}
 
-	/**
-	 * Enable all tools belonging to a specific MCP server.
-	 * Called when a server is enabled for a conversation.
-	 */
+	/** Enable all tools belonging to a specific MCP server */
 	enableAllToolsForServer(serverId: string): void {
 		const connection = mcpStore.getConnections().get(serverId);
 		if (!connection) return;
 		for (const tool of connection.tools) {
-			this._disabledTools.delete(tool.name);
+			this._disabledTools.delete(toolKey(ToolSource.MCP, tool.name, serverId));
 		}
 		this.persistDisabledTools();
 	}
 
 	toggleGroup(group: ToolGroup): void {
-		const allEnabled = group.tools.every((t) => this.isToolEnabled(t.function.name));
+		const allEnabled = group.tools.every((t) => this.isToolEnabled(t.key));
 		for (const tool of group.tools) {
-			this.setToolEnabled(tool.function.name, !allEnabled);
+			this.setToolEnabled(tool.key, !allEnabled);
 		}
 		this.persistDisabledTools();
 	}
 
 	isGroupFullyEnabled(group: ToolGroup): boolean {
-		return group.tools.length > 0 && group.tools.every((t) => this.isToolEnabled(t.function.name));
+		return group.tools.length > 0 && group.tools.every((t) => this.isToolEnabled(t.key));
 	}
 
-	isGroupPartiallyEnabled(group: ToolGroup): boolean {
-		const enabledCount = group.tools.filter((t) => this.isToolEnabled(t.function.name)).length;
-		return enabledCount > 0 && enabledCount < group.tools.length;
-	}
-
-	/**
-	 * Get MCP tools from health check data (reactive).
-	 * Used when live connections aren't established yet.
-	 */
+	/** Get MCP tools from health check data, used when live connections aren't established yet */
 	private getMcpToolsFromHealthChecks(): {
 		serverId: string;
 		serverName: string;
@@ -337,60 +326,35 @@ class ToolsStore {
 		return result;
 	}
 
-	/** Determine the source of a tool by its name. */
-	getToolSource(toolName: string): ToolSource | null {
-		if (this._builtinTools.some((t) => t.function.name === toolName)) {
-			return ToolSource.BUILTIN;
-		}
+	/** First canonical entry matching a tool name, runtime tool calls resolve by name */
+	private findEntryByName(toolName: string): ToolEntry | null {
 		for (const entry of this.allTools) {
-			if (entry.definition.function.name === toolName) {
-				return entry.source;
-			}
+			if (entry.definition.function.name === toolName) return entry;
 		}
 		return null;
 	}
 
-	/** Get the display label for the server that owns a given tool. */
+	/** Determine the source of a tool by its name */
+	getToolSource(toolName: string): ToolSource | null {
+		return this.findEntryByName(toolName)?.source ?? null;
+	}
+
+	/** Get the display label for the server that owns a given tool */
 	getToolServerLabel(toolName: string): string {
-		for (const entry of this.allTools) {
-			if (entry.definition.function.name === toolName) {
-				if (entry.serverName) {
-					return mcpStore.getServerDisplayName(entry.serverName);
-				}
-				if (entry.source === ToolSource.BUILTIN) {
-					return TOOL_SERVER_LABELS[ToolSource.BUILTIN];
-				}
-				if (entry.source === ToolSource.CUSTOM) {
-					return TOOL_SERVER_LABELS[ToolSource.CUSTOM];
-				}
-			}
-		}
+		const entry = this.findEntryByName(toolName);
+		if (!entry) return '';
+		if (entry.serverName) return mcpStore.getServerDisplayName(entry.serverName);
+		if (entry.source === ToolSource.BUILTIN) return TOOL_SERVER_LABELS[ToolSource.BUILTIN];
+		if (entry.source === ToolSource.CUSTOM) return TOOL_SERVER_LABELS[ToolSource.CUSTOM];
 		return '';
 	}
 
-	/** Build a permission key with category prefix, e.g. "mcp-<serverId>:tool_name" */
+	/** Permission key for a tool name, identical to the selection key */
 	getPermissionKey(toolName: string): string | null {
-		for (const entry of this.allTools) {
-			if (entry.definition.function.name === toolName) {
-				switch (entry.source) {
-					case ToolSource.BUILTIN:
-						return `builtin:${toolName}`;
-					case ToolSource.CUSTOM:
-						return `custom:${toolName}`;
-					case ToolSource.MCP:
-						if (entry.serverId) {
-							return `mcp-${entry.serverId}:${toolName}`;
-						}
-						return `mcp:${toolName}`;
-					default:
-						return null;
-				}
-			}
-		}
-		return null;
+		return this.findEntryByName(toolName)?.key ?? null;
 	}
 
-	/** Check if there are any enabled tools available (builtin, MCP, or custom). */
+	/** Check if there are any enabled tools available (builtin, MCP, or custom) */
 	get hasEnabledTools(): boolean {
 		return this.getEnabledToolsForLLM().length > 0;
 	}
@@ -423,5 +387,4 @@ export const toolsStore = new ToolsStore();
 
 export const allTools = () => toolsStore.allTools;
 export const allToolDefinitions = () => toolsStore.allToolDefinitions;
-export const enabledToolDefinitions = () => toolsStore.enabledToolDefinitions;
 export const toolGroups = () => toolsStore.toolGroups;

tools/ui/src/lib/types/tools.d.ts

@@ -7,6 +7,8 @@ export interface ToolEntry {
 	serverName?: string;
 	/** For MCP tools, the server ID (used for permission keys) */
 	serverId?: string;
+	/** Stable selection identity: builtin:name, mcp-<serverId>:name, mcp:name, custom:name */
+	key: string;
 	definition: OpenAIToolDefinition;
 }
 
@@ -15,5 +17,5 @@ export interface ToolGroup {
 	label: string;
 	/** For MCP groups, the server ID */
 	serverId?: string;
-	tools: OpenAIToolDefinition[];
+	tools: ToolEntry[];
 }

tools/ui/src/lib/utils/agentic.ts

@@ -18,6 +18,7 @@ export interface AgenticSection {
 	toolArgs?: string;
 	toolResult?: string;
 	toolResultExtras?: DatabaseMessageExtra[];
+	wasInterrupted?: boolean;
 }
 
 /**
@@ -51,7 +52,8 @@ function deriveSingleTurnSections(
 		const isPending = isStreaming && !hasContentAfterReasoning;
 		sections.push({
 			type: isPending ? AgenticSectionType.REASONING_PENDING : AgenticSectionType.REASONING,
-			content: message.reasoningContent
+			content: message.reasoningContent,
+			wasInterrupted: !isStreaming && !hasContentAfterReasoning
 		});
 	}
 

tools/ui/src/lib/utils/formatters.ts

@@ -3,7 +3,11 @@ import {
 	SECONDS_PER_MINUTE,
 	SECONDS_PER_HOUR,
 	SHORT_DURATION_THRESHOLD,
-	MEDIUM_DURATION_THRESHOLD
+	MEDIUM_DURATION_THRESHOLD,
+	MAX_PREVIEW_LENGTH,
+	STRIP_MARKDOWN_INLINE_REGEX,
+	STRIP_MARKDOWN_CAPTURE_PATTERNS,
+	NEWLINE_SEPARATOR
 } from '$lib/constants';
 
 /**
@@ -151,3 +155,33 @@ export function formatAttachmentText(
 	const header = extra ? `${name} (${extra})` : name;
 	return `\n\n--- ${label}: ${header} ---\n${content}`;
 }
+
+export function formatReasoningPreview(content: string): { preview: string; overflow: number } {
+	if (!content) return { preview: '', overflow: 0 };
+
+	const lines = content.split(NEWLINE_SEPARATOR);
+	let lastLine = '';
+
+	for (let i = lines.length - 1; i >= 0; i--) {
+		let cleaned = lines[i].trim();
+		if (!cleaned) continue;
+
+		cleaned = cleaned.replace(STRIP_MARKDOWN_INLINE_REGEX, '');
+		for (const [pattern, replacement] of STRIP_MARKDOWN_CAPTURE_PATTERNS) {
+			cleaned = cleaned.replace(pattern, replacement);
+		}
+
+		if (cleaned.length > 0) {
+			lastLine = cleaned;
+			break;
+		}
+	}
+
+	const fullLength = lastLine.length;
+	const overflow = Math.max(0, fullLength - MAX_PREVIEW_LENGTH);
+	if (fullLength > MAX_PREVIEW_LENGTH) {
+		lastLine = lastLine.slice(0, MAX_PREVIEW_LENGTH) + '...';
+	}
+
+	return { preview: lastLine, overflow };
+}

tools/ui/src/lib/utils/index.ts

@@ -76,7 +76,8 @@ export {
 	formatJsonPretty,
 	formatTime,
 	formatPerformanceTime,
-	formatAttachmentText
+	formatAttachmentText,
+	formatReasoningPreview
 } from './formatters';
 
 // IME utilities