New tools rendering (#2005)

* Optimize message update handling and rendering

Refactors ChatMessage.svelte to interleave tool and stream updates for more accurate message rendering, consolidates consecutive stream tokens, and updates ToolUpdate.svelte styles for improved spacing. Also optimizes update handling in both the client and server to merge consecutive stream updates, reducing unnecessary array growth and improving performance.

* Improve message updates reactivity and storage efficiency

In the Svelte page, message update merging now creates new objects and arrays to ensure UI reactivity when streaming tokens are merged. On the server, ephemeral stream tokens and keep-alive updates are filtered out before persisting messages to the database, reducing payload size and improving rehydration performance.

* Improve chat message block handling and update persistence

Refactors ChatMessage.svelte to better handle interleaved tool and stream updates, ensuring correct text chunking and fallback behavior. Updates the conversation server logic to persist lightweight stream update markers (with token length only) instead of full tokens, preserving update order without duplicating content and improving rehydration performance.

* Improve type safety and token handling in chat messages

Adds explicit 'as const' type annotations for message block types in ChatMessage.svelte to improve type safety. Fixes token merging in conversation page to handle undefined tokens safely. Updates server logic to preserve existing token length if already present, preventing recomputation and ensuring correct ordering.

* Update ChatMessage.svelte

* Refactor chat block UI and improve tool/result handling

Introduces BlockWrapper.svelte for consistent block layout and connectors in chat UI. Refactors ToolUpdate and OpenReasoningResults to use BlockWrapper, improving expand/collapse behavior and visual feedback for loading, errors, and results. Updates message streaming logic to support compressed tokens with length markers, and cleans up related code in ChatMessage and server logic for more reliable rendering and update merging.

* Refine chat block styling and tool update UI

Improves visual spacing and block linking in chat components, updates icon and ring color logic for tool updates, and refines expandable content UI. Removes unused imports and adjusts styles for better consistency and clarity.

* Update tool status icon and loading color

Replaces the hammer icon with a check icon when a tool update is successful in ToolUpdate.svelte. Adjusts the loading path color opacity in BlockWrapper.svelte for improved visual feedback.

* Update error color classes for consistency

Adjusted Tailwind CSS classes for error backgrounds and borders to use more consistent red shades and opacity in both light and dark modes. This improves visual clarity and maintains a uniform appearance for error states.

* Update +page.svelte

* Update +page.svelte

* Refactor chat components for improved reasoning UI

Replaces global <think> block regex usage with a non-global version to avoid lastIndex side effects. Updates OpenReasoningResults to auto-expand on initial loading and improves collapsed preview by stripping markdown. Removes unused navigation props and UI from ToolUpdate for cleaner code.

* Update OpenReasoningResults.svelte

* Refine chat UI sizing and color styles

Adjusted icon and spacing sizes in BlockWrapper.svelte for improved alignment. Updated ToolUpdate.svelte to use more consistent gray text colors. Increased heading font sizes for .prose-sm in main.css from 55% to 75% of original for better readability.

* Update BlockWrapper.svelte

src/lib/components/chat/BlockWrapper.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		icon: Snippet;
+		iconBg?: string;
+		iconRing?: string;
+		hasNext?: boolean;
+		loading?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		icon,
+		iconBg = "bg-gray-50 dark:bg-gray-800",
+		iconRing = "ring-gray-100 dark:ring-gray-700",
+		hasNext = false,
+		loading = false,
+		children,
+	}: Props = $props();
+</script>
+
+<div class="group flex gap-2 has-[+.prose]:mb-1.5 [.prose+&]:mt-3">
+	<!-- Left column: icon + connector line -->
+	<div class="flex w-[22px] flex-shrink-0 flex-col items-center">
+		<div
+			class="relative z-0 flex h-[22px] w-[22px] items-center justify-center rounded-md ring-1 {iconBg} {iconRing}"
+		>
+			{@render icon()}
+			{#if loading}
+				<svg
+					class="pointer-events-none absolute inset-0 h-[22px] w-[22px]"
+					viewBox="0 0 22 22"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect
+						x="0.5"
+						y="0.5"
+						width="21"
+						height="21"
+						rx="5.5"
+						class="loading-path stroke-current text-purple-500/20"
+						stroke-width="1"
+						fill="none"
+					/>
+				</svg>
+			{/if}
+		</div>
+		{#if hasNext}
+			<div class="my-1 w-px flex-1 bg-gray-200 dark:bg-gray-700"></div>
+		{/if}
+	</div>
+
+	<!-- Right column: content -->
+	<div class="min-w-0 flex-1 pb-2 pt-px">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	@keyframes loading {
+		to {
+			stroke-dashoffset: -100;
+		}
+	}
+
+	.loading-path {
+		stroke-dasharray: 60 40;
+		animation: loading 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+	}
+</style>

src/lib/components/chat/ChatMessage.svelte

@@ -20,6 +20,7 @@
 	import { requireAuthUser } from "$lib/utils/auth";
 	import ToolUpdate from "./ToolUpdate.svelte";
 	import { isMessageToolUpdate } from "$lib/utils/messageUpdates";
+	import { MessageUpdateType, type MessageToolUpdate } from "$lib/types/MessageUpdate";
 
 	interface Props {
 		message: Message;
@@ -83,6 +84,10 @@
 		const wrapper = document.createElement("div");
 		wrapper.appendChild(range.cloneContents());
 
+		wrapper.querySelectorAll("[data-exclude-from-copy]").forEach((el) => {
+			el.remove();
+		});
+
 		wrapper.querySelectorAll("*").forEach((el) => {
 			el.removeAttribute("style");
 			el.removeAttribute("class");
@@ -110,6 +115,8 @@
 
 	// Zero-config reasoning autodetection: detect <think> blocks in content
 	const THINK_BLOCK_REGEX = /(<think>[\s\S]*?(?:<\/think>|$))/gi;
+	// Non-global version for .test() calls to avoid lastIndex side effects
+	const THINK_BLOCK_TEST_REGEX = /(<think>[\s\S]*?(?:<\/think>|$))/i;
 	let hasClientThink = $derived(message.content.split(THINK_BLOCK_REGEX).length > 1);
 
 	// Strip think blocks for clipboard copy (always, regardless of detection)
@@ -117,39 +124,85 @@
 		message.content.replace(THINK_BLOCK_REGEX, "").trim()
 	);
 
-	// Group tool updates (if any) by uuid for display
-	let toolUpdateGroups = $derived.by(() => {
-		const groups: Record<string, import("$lib/types/MessageUpdate").MessageToolUpdate[]> = {};
-		for (const u of message.updates ?? []) {
-			if (!isMessageToolUpdate(u)) continue;
-			(groups[u.uuid] ||= []).push(u);
+	type Block =
+		| { type: "text"; content: string }
+		| { type: "tool"; uuid: string; updates: MessageToolUpdate[] };
+
+	let blocks = $derived.by(() => {
+		const updates = message.updates ?? [];
+		const res: Block[] = [];
+		const hasTools = updates.some(isMessageToolUpdate);
+		let contentCursor = 0;
+		let sawFinalAnswer = false;
+
+		// Fast path: no tool updates at all
+		if (!hasTools && updates.length === 0) {
+			if (message.content) return [{ type: "text" as const, content: message.content }];
+			return [];
 		}
-		return groups;
-	});
-	let hasToolUpdates = $derived(Object.keys(toolUpdateGroups).length > 0);
 
-	// Flatten to ordered array and keep a navigation index (defaults to last)
-	let toolGroups = $derived(Object.values(toolUpdateGroups));
-	let toolNavIndex = $state(0);
-	// Auto-follow newest tool group while streaming until user navigates manually
-	let toolAutoFollowLatest = $state(true);
-	$effect(() => {
-		const len = toolGroups.length;
-		if (len === 0) {
-			toolNavIndex = 0;
-			return;
+		for (const update of updates) {
+			if (update.type === MessageUpdateType.Stream) {
+				const token =
+					typeof update.token === "string" && update.token.length > 0 ? update.token : null;
+				const len = token !== null ? token.length : (update.len ?? 0);
+				const chunk =
+					token ??
+					(message.content ? message.content.slice(contentCursor, contentCursor + len) : "");
+				contentCursor += len;
+				if (!chunk) continue;
+				const last = res.at(-1);
+				if (last?.type === "text") last.content += chunk;
+				else res.push({ type: "text" as const, content: chunk });
+			} else if (isMessageToolUpdate(update)) {
+				const last = res.at(-1);
+				if (last?.type === "tool" && last.uuid === update.uuid) {
+					last.updates.push(update);
+				} else {
+					res.push({ type: "tool" as const, uuid: update.uuid, updates: [update] });
+				}
+			} else if (update.type === MessageUpdateType.FinalAnswer) {
+				sawFinalAnswer = true;
+				const finalText = update.text ?? "";
+				const currentText = res
+					.filter((b) => b.type === "text")
+					.map((b) => (b as { type: "text"; content: string }).content)
+					.join("");
+
+				let addedText = "";
+				if (finalText.startsWith(currentText)) {
+					addedText = finalText.slice(currentText.length);
+				} else if (!currentText.endsWith(finalText)) {
+					const needsGap = !/\n\n$/.test(currentText) && !/^\n/.test(finalText);
+					addedText = (needsGap ? "\n\n" : "") + finalText;
+				}
+
+				if (addedText) {
+					const last = res.at(-1);
+					if (last?.type === "text") {
+						last.content += addedText;
+					} else {
+						res.push({ type: "text" as const, content: addedText });
+					}
+				}
+			}
 		}
-		// Clamp if groups shrink or grow
-		if (toolNavIndex > len - 1) toolNavIndex = len - 1;
-		// While streaming, default to most recent group unless user navigated away
-		if (isLast && loading && toolAutoFollowLatest) toolNavIndex = len - 1;
-	});
 
-	// When streaming ends, re-enable auto-follow for the next turn
-	$effect(() => {
-		if (!loading) {
-			toolAutoFollowLatest = true;
+		// If content remains unmatched (e.g., persisted stream markers), append the remainder
+		// Skip when a FinalAnswer already provided the authoritative text.
+		if (!sawFinalAnswer && message.content && contentCursor < message.content.length) {
+			const remaining = message.content.slice(contentCursor);
+			if (remaining.length > 0) {
+				const last = res.at(-1);
+				if (last?.type === "text") last.content += remaining;
+				else res.push({ type: "text" as const, content: remaining });
+			}
+		} else if (!res.some((b) => b.type === "text") && message.content) {
+			// Fallback: no text produced at all
+			res.push({ type: "text" as const, content: message.content });
 		}
+
+		return res;
 	});
 
 	$effect(() => {
@@ -200,63 +253,56 @@
 				</div>
 			{/if}
 
-			{#if hasToolUpdates}
-				{#if toolGroups.length}
-					{@const group = toolGroups[toolNavIndex]}
-					<ToolUpdate
-						tool={group}
-						{loading}
-						index={toolNavIndex}
-						total={toolGroups.length}
-						onprev={() => {
-							toolAutoFollowLatest = false;
-							toolNavIndex = Math.max(0, toolNavIndex - 1);
-						}}
-						onnext={() => {
-							toolNavIndex = Math.min(toolGroups.length - 1, toolNavIndex + 1);
-							// If user moves back to the newest group, resume auto-follow
-							toolAutoFollowLatest = toolNavIndex === toolGroups.length - 1;
-						}}
-					/>
-				{/if}
-			{/if}
-
 			<div bind:this={contentEl} oncopy={handleCopy}>
-				{#if isLast && loading && message.content.length === 0}
+				{#if isLast && loading && blocks.length === 0}
 					<IconLoading classNames="loading inline ml-2 first:ml-0" />
 				{/if}
+				{#each blocks as block, blockIndex (block.type === "tool" ? `${block.uuid}-${blockIndex}` : `text-${blockIndex}`)}
+					{@const nextBlock = blocks[blockIndex + 1]}
+					{@const nextBlockHasThink =
+						nextBlock?.type === "text" && THINK_BLOCK_TEST_REGEX.test(nextBlock.content)}
+					{@const nextIsLinkable = nextBlock?.type === "tool" || nextBlockHasThink}
+					{#if block.type === "tool"}
+						<div data-exclude-from-copy class="has-[+.prose]:mb-3 [.prose+&]:mt-4">
+							<ToolUpdate tool={block.updates} {loading} hasNext={nextIsLinkable} />
+						</div>
+					{:else if block.type === "text"}
+						{#if isLast && loading && block.content.length === 0}
+							<IconLoading classNames="loading inline ml-2 first:ml-0" />
+						{/if}
 
-				{#if hasClientThink}
-					{#each message.content.split(THINK_BLOCK_REGEX) as part, _i}
-						{#if part && part.startsWith("<think>")}
-							{@const isClosed = part.endsWith("</think>")}
-							{@const thinkContent = part.slice(7, isClosed ? -8 : undefined)}
-							{@const isInterrupted = !isClosed && !loading}
-							{@const summary =
-								isClosed || isInterrupted
-									? thinkContent.trim().split(/\n+/)[0] || "Reasoning"
-									: "Thinking..."}
-
-							<OpenReasoningResults
-								{summary}
-								content={thinkContent}
-								loading={isLast && loading && !isClosed}
-							/>
-						{:else if part && part.trim().length > 0}
+						{#if hasClientThink}
+							{@const parts = block.content.split(THINK_BLOCK_REGEX)}
+							{#each parts as part, partIndex}
+								{@const remainingParts = parts.slice(partIndex + 1)}
+								{@const hasMoreLinkable =
+									remainingParts.some((p) => p && THINK_BLOCK_TEST_REGEX.test(p)) || nextIsLinkable}
+								{#if part && part.startsWith("<think>")}
+									{@const isClosed = part.endsWith("</think>")}
+									{@const thinkContent = part.slice(7, isClosed ? -8 : undefined)}
+
+									<OpenReasoningResults
+										content={thinkContent}
+										loading={isLast && loading && !isClosed}
+										hasNext={hasMoreLinkable}
+									/>
+								{:else if part && part.trim().length > 0}
+									<div
+										class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 prose-img:my-0 prose-img:rounded-lg dark:prose-pre:bg-gray-900"
+									>
+										<MarkdownRenderer content={part} loading={isLast && loading} />
+									</div>
+								{/if}
+							{/each}
+						{:else}
 							<div
 								class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 prose-img:my-0 prose-img:rounded-lg dark:prose-pre:bg-gray-900"
 							>
-								<MarkdownRenderer content={part} loading={isLast && loading} />
+								<MarkdownRenderer content={block.content} loading={isLast && loading} />
 							</div>
 						{/if}
-					{/each}
-				{:else}
-					<div
-						class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 prose-img:my-0 prose-img:rounded-lg dark:prose-pre:bg-gray-900"
-					>
-						<MarkdownRenderer content={message.content} loading={isLast && loading} />
-					</div>
-				{/if}
+					{/if}
+				{/each}
 			</div>
 		</div>
 

src/lib/components/chat/OpenReasoningResults.svelte

@@ -1,86 +1,81 @@
 <script lang="ts">
 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
-	import CarbonCaretDown from "~icons/carbon/caret-down";
+	import BlockWrapper from "./BlockWrapper.svelte";
 
 	interface Props {
-		summary: string;
 		content: string;
 		loading?: boolean;
+		hasNext?: boolean;
 	}
 
-	let { summary, content, loading = false }: Props = $props();
-	let isOpen = $state(loading);
+	let { content, loading = false, hasNext = false }: Props = $props();
+	let isOpen = $state(false);
+	let wasLoading = $state(false);
+	let initialized = $state(false);
 
+	// Track loading transitions to auto-expand/collapse
 	$effect(() => {
-		isOpen = loading;
+		// Auto-expand on first render if already loading
+		if (!initialized) {
+			initialized = true;
+			if (loading) {
+				isOpen = true;
+				wasLoading = true;
+				return;
+			}
+		}
+
+		if (loading && !wasLoading) {
+			// Loading started - auto-expand
+			isOpen = true;
+		} else if (!loading && wasLoading) {
+			// Loading finished - auto-collapse
+			isOpen = false;
+		}
+		wasLoading = loading;
 	});
 </script>
 
-<details
-	bind:open={isOpen}
-	class="group flex w-fit max-w-full flex-col rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 [&:has(+_.prose)]:mb-4 [.prose+&]:mt-4 [details+&]:mt-2"
+{#snippet icon()}
+	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">
+		<path
+			class="stroke-gray-500 dark:stroke-gray-400"
+			style="stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round;"
+			d="M16 6v3.33M16 6c0-2.65 3.25-4.3 5.4-2.62 1.2.95 1.6 2.65.95 4.04a3.63 3.63 0 0 1 4.61.16 3.45 3.45 0 0 1 .46 4.37 5.32 5.32 0 0 1 1.87 4.75c-.22 1.66-1.39 3.6-3.07 4.14M16 6c0-2.65-3.25-4.3-5.4-2.62a3.37 3.37 0 0 0-.95 4.04 3.65 3.65 0 0 0-4.6.16 3.37 3.37 0 0 0-.49 4.27 5.57 5.57 0 0 0-1.85 4.85 5.3 5.3 0 0 0 3.07 4.15M16 9.33v17.34m0-17.34c0 2.18 1.82 4 4 4m6.22 7.5c.67 1.3.56 2.91-.27 4.11a4.05 4.05 0 0 1-4.62 1.5c0 1.53-1.05 2.9-2.66 2.9A2.7 2.7 0 0 1 16 26.66m10.22-5.83a4.05 4.05 0 0 0-3.55-2.17m-16.9 2.18a4.05 4.05 0 0 0 .28 4.1c1 1.44 2.92 2.09 4.59 1.5 0 1.52 1.12 2.88 2.7 2.88A2.7 2.7 0 0 0 16 26.67M5.78 20.85a4.04 4.04 0 0 1 3.55-2.18"
+		/>
+	</svg>
+{/snippet}
+
+<BlockWrapper
+	{icon}
+	{hasNext}
+	iconBg="bg-gray-100 dark:bg-gray-700"
+	iconRing="ring-gray-200 dark:ring-gray-600"
 >
-	<summary
-		class="
-		grid min-w-72 cursor-pointer select-none grid-cols-[40px,1fr,24px] items-center gap-2.5 rounded-xl p-2 group-open:rounded-b-none hover:bg-gray-50 dark:hover:bg-gray-800/20"
+	<!-- Collapsed view (clickable to expand) -->
+	<button
+		type="button"
+		class="group/text w-full cursor-pointer text-left"
+		onclick={() => (isOpen = !isOpen)}
 	>
-		<div
-			class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
-		>
-			<div class="grid h-dvh place-items-center">
-				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
-					<path
-						class="stroke-gray-600 dark:stroke-gray-400"
-						style="stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round;"
-						d="M16 6v3.33M16 6c0-2.65 3.25-4.3 5.4-2.62 1.2.95 1.6 2.65.95 4.04a3.63 3.63 0 0 1 4.61.16 3.45 3.45 0 0 1 .46 4.37 5.32 5.32 0 0 1 1.87 4.75c-.22 1.66-1.39 3.6-3.07 4.14M16 6c0-2.65-3.25-4.3-5.4-2.62a3.37 3.37 0 0 0-.95 4.04 3.65 3.65 0 0 0-4.6.16 3.37 3.37 0 0 0-.49 4.27 5.57 5.57 0 0 0-1.85 4.85 5.3 5.3 0 0 0 3.07 4.15M16 9.33v17.34m0-17.34c0 2.18 1.82 4 4 4m6.22 7.5c.67 1.3.56 2.91-.27 4.11a4.05 4.05 0 0 1-4.62 1.5c0 1.53-1.05 2.9-2.66 2.9A2.7 2.7 0 0 1 16 26.66m10.22-5.83a4.05 4.05 0 0 0-3.55-2.17m-16.9 2.18a4.05 4.05 0 0 0 .28 4.1c1 1.44 2.92 2.09 4.59 1.5 0 1.52 1.12 2.88 2.7 2.88A2.7 2.7 0 0 0 16 26.67M5.78 20.85a4.04 4.04 0 0 1 3.55-2.18"
-					/>
-
-					{#if loading}
-						<path
-							class="animate-pulse stroke-white"
-							style="stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50;"
-							d="M16 6v3.33M16 6c0-2.65 3.25-4.3 5.4-2.62 1.2.95 1.6 2.65.95 4.04a3.63 3.63 0 0 1 4.61.16 3.45 3.45 0 0 1 .46 4.37 5.32 5.32 0 0 1 1.87 4.75c-.22 1.66-1.39 3.6-3.07 4.14M16 6c0-2.65-3.25-4.3-5.4-2.62a3.37 3.37 0 0 0-.95 4.04 3.65 3.65 0 0 0-4.6.16 3.37 3.37 0 0 0-.49 4.27 5.57 5.57 0 0 0-1.85 4.85 5.3 5.3 0 0 0 3.07 4.15M16 9.33v17.34m0-17.34c0 2.18 1.82 4 4 4m6.22 7.5c.67 1.3.56 2.91-.27 4.11a4.05 4.05 0 0 1-4.62 1.5c0 1.53-1.05 2.9-2.66 2.9A2.7 2.7 0 0 1 16 26.66m10.22-5.83a4.05 4.05 0 0 0-3.55-2.17m-16.9 2.18a4.05 4.05 0 0 0 .28 4.1c1 1.44 2.92 2.09 4.59 1.5 0 1.52 1.12 2.88 2.7 2.88A2.7 2.7 0 0 0 16 26.67M5.78 20.85a4.04 4.04 0 0 1 3.55-2.18"
-						>
-							<animate
-								attributeName="stroke-dashoffset"
-								values="0;500"
-								dur="12s"
-								repeatCount="indefinite"
-							/>
-						</path>
-					{/if}
-				</svg>
+		{#if isOpen}
+			<!-- Expanded: show full content -->
+			<div
+				class="prose prose-sm max-w-none text-sm leading-relaxed text-gray-500 dark:prose-invert dark:text-gray-400"
+			>
+				<MarkdownRenderer {content} {loading} />
 			</div>
-		</div>
-		<dl class="leading-4">
-			<dd class="text-sm">Reasoning</dd>
-			<dt
-				class="flex items-center gap-1 truncate whitespace-nowrap text-[.82rem] text-gray-400"
+		{:else}
+			<!-- Collapsed: 2-line preview (plain text, strip markdown) -->
+			<div
+				class="line-clamp-2 text-sm leading-relaxed text-gray-500 dark:text-gray-400"
 				class:animate-pulse={loading}
 			>
-				{summary.length > 33
-					? summary.substring(0, 33) + "..."
-					: summary.endsWith("...")
-						? summary
-						: summary + "..."}
-			</dt>
-		</dl>
-		<CarbonCaretDown
-			class="transition-rotate size-5 -rotate-90 text-gray-400 group-open:rotate-0"
-		/>
-	</summary>
-
-	<div
-		class="prose prose-sm !max-w-none space-y-4 border-t border-gray-200 p-3 text-sm text-gray-600 dark:prose-invert prose-img:my-0 prose-img:rounded-lg dark:border-gray-800 dark:text-gray-400"
-	>
-		{#key content}
-			<MarkdownRenderer {content} {loading} />
-		{/key}
-	</div>
-</details>
-
-<style>
-	details summary::-webkit-details-marker {
-		display: none;
-	}
-</style>
+				{content
+					.replace(/[#*_`~[\]]/g, "")
+					.replace(/\n+/g, " ")
+					.trim()}
+			</div>
+		{/if}
+	</button>
+</BlockWrapper>

src/lib/components/chat/ToolUpdate.svelte

@@ -6,38 +6,32 @@
 		isMessageToolResultUpdate,
 	} from "$lib/utils/messageUpdates";
 	import LucideHammer from "~icons/lucide/hammer";
+	import LucideCheck from "~icons/lucide/check";
 	import { ToolResultStatus, type ToolFront } from "$lib/types/Tool";
 	import { page } from "$app/state";
-	import { onDestroy } from "svelte";
-	import { browser } from "$app/environment";
-	import CarbonChevronLeft from "~icons/carbon/chevron-left";
 	import CarbonChevronRight from "~icons/carbon/chevron-right";
+	import BlockWrapper from "./BlockWrapper.svelte";
 
 	interface Props {
 		tool: MessageToolUpdate[];
 		loading?: boolean;
-		// Optional navigation props when multiple tool groups exist
-		index?: number;
-		total?: number;
-		onprev?: () => void;
-		onnext?: () => void;
+		hasNext?: boolean;
 	}
 
-	let { tool, loading = false, index, total, onprev, onnext }: Props = $props();
+	let { tool, loading = false, hasNext = false }: Props = $props();
+
+	let isOpen = $state(false);
 
 	let toolFnName = $derived(tool.find(isMessageToolCallUpdate)?.call.name);
 	let toolError = $derived(tool.some(isMessageToolErrorUpdate));
 	let toolDone = $derived(tool.some(isMessageToolResultUpdate));
-	let eta = $derived(tool.find((update) => update.subtype === MessageToolUpdateType.ETA)?.eta);
+	let isExecuting = $derived(!toolDone && !toolError && loading);
+	let toolSuccess = $derived(toolDone && !toolError);
 
 	const availableTools: ToolFront[] = $derived.by(
 		() => (page.data as { tools?: ToolFront[] } | undefined)?.tools ?? []
 	);
 
-	let loadingBarEl: HTMLDivElement | undefined = $state(undefined);
-	let animation: Animation | undefined = $state(undefined);
-	let showingLoadingBar = $state(false);
-
 	type ToolOutput = Record<string, unknown>;
 	type McpImageContent = {
 		type: "image";
@@ -98,218 +92,169 @@
 			metadata: getMetadataEntries(output),
 		}));
 
-	$effect(() => {
-		if (!toolError && !toolDone && loading && loadingBarEl && eta) {
-			loadingBarEl.classList.remove("hidden");
-			showingLoadingBar = true;
-			animation = loadingBarEl.animate([{ width: "0%" }, { width: "calc(100%+1rem)" }], {
-				duration: (eta ?? 0) * 1000,
-				fill: "forwards",
-			});
-		}
-	});
-
-	onDestroy(() => {
-		animation?.cancel();
-	});
+	// Icon styling based on state
+	let iconBg = $derived(
+		toolError ? "bg-red-100 dark:bg-red-900/40" : "bg-purple-100 dark:bg-purple-900/40"
+	);
 
-	$effect(() => {
-		if ((!loading || toolDone || toolError) && browser && loadingBarEl && showingLoadingBar) {
-			showingLoadingBar = false;
-			loadingBarEl.classList.remove("hidden");
-			animation?.cancel();
-			const fromWidth = getComputedStyle(loadingBarEl).width;
-			animation = loadingBarEl.animate([{ width: fromWidth }, { width: "calc(100%+1rem)" }], {
-				duration: 300,
-				fill: "forwards",
-			});
-			setTimeout(() => loadingBarEl?.classList.add("hidden"), 300);
-		}
-	});
+	let iconRing = $derived(
+		toolError ? "ring-red-200 dark:ring-red-500/30" : "ring-purple-200 dark:ring-purple-500/30"
+	);
 </script>
 
-{#if toolFnName}
-	<details
-		class="group/tool my-2.5 w-fit max-w-full cursor-pointer rounded-lg border border-gray-200 bg-white px-1 {(total ??
-			0) > 1
-			? ''
-			: 'pr-2'} text-sm shadow-sm first:mt-0 open:mb-3 open:border-purple-500/10 open:bg-purple-600/5 open:shadow-sm dark:border-gray-800 dark:bg-gray-900 open:dark:border-purple-800/40 open:dark:bg-purple-800/10 [&+details]:-mt-2"
-	>
-		<summary
-			class="relative flex select-none list-none items-center gap-1.5 py-1 group-open/tool:text-purple-700 group-open/tool:dark:text-purple-300"
-		>
-			<div
-				bind:this={loadingBarEl}
-				class="absolute -m-1 hidden h-full w-full rounded-lg bg-purple-500/5 transition-all dark:bg-purple-500/10"
-			></div>
+{#snippet icon()}
+	{#if toolSuccess}
+		<LucideCheck class="size-3.5 text-purple-600 dark:text-purple-400" />
+	{:else}
+		<LucideHammer
+			class="size-3.5 {toolError
+				? 'text-red-500 dark:text-red-400'
+				: 'text-purple-600 dark:text-purple-400'}"
+		/>
+	{/if}
+{/snippet}
 
-			<div
-				class="relative grid size-[22px] place-items-center rounded bg-purple-600/10 dark:bg-purple-600/20"
+{#if toolFnName}
+	<BlockWrapper {icon} {iconBg} {iconRing} {hasNext} loading={isExecuting}>
+		<!-- Header row -->
+		<div class="flex w-full select-none items-center gap-2">
+			<button
+				type="button"
+				class="flex flex-1 cursor-pointer items-center gap-2 text-left"
+				onclick={() => (isOpen = !isOpen)}
 			>
-				<svg
-					class="absolute inset-0 text-purple-500/40 transition-opacity"
-					class:invisible={toolDone || toolError}
-					width="22"
-					height="22"
-					viewBox="0 0 38 38"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
+				<span
+					class="text-sm font-medium {isExecuting
+						? 'text-purple-700 dark:text-purple-300'
+						: toolError
+							? 'text-red-600 dark:text-red-400'
+							: 'text-gray-700 dark:text-gray-300'}"
 				>
-					<path
-						class="loading-path"
-						d="M8 2.5H30C30 2.5 35.5 2.5 35.5 8V30C35.5 30 35.5 35.5 30 35.5H8C8 35.5 2.5 35.5 2.5 30V8C2.5 8 2.5 2.5 8 2.5Z"
-						pathLength="100"
-						stroke="currentColor"
-						stroke-width="1"
-						stroke-linecap="round"
-						id="shape"
-					/>
-				</svg>
-				<LucideHammer class="size-3.5 text-purple-700 dark:text-purple-500" />
-			</div>
-
-			<span class="relative">
-				{toolError ? "Error calling" : toolDone ? "Called" : "Calling"} tool
-				<span class="font-semibold"
-					>{availableTools.find((entry) => entry.name === toolFnName)?.displayName ??
-						toolFnName}</span
-				>
-			</span>
-
-			{#if (total ?? 0) > 1}
-				<div class="relative ml-auto flex items-center gap-1.5">
-					<div
-						class="flex items-center divide-x rounded-md border border-gray-200 bg-gray-50 dark:divide-gray-700 dark:border-gray-800 dark:bg-gray-800"
+					{toolError ? "Error calling" : toolDone ? "Called" : "Calling"} tool
+					<code
+						class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-gray-500 opacity-90 dark:bg-gray-800 dark:text-gray-400"
 					>
-						<button
-							type="button"
-							class="btn size-5 text-xs text-gray-500 hover:text-gray-700 focus:ring-0 disabled:opacity-40 dark:text-gray-400 dark:hover:text-gray-200"
-							title="Previous tool"
-							aria-label="Previous tool"
-							disabled={(index ?? 0) <= 0}
-							onclick={(e) => {
-								e.preventDefault();
-								e.stopPropagation();
-								onprev?.();
-							}}
-						>
-							<CarbonChevronLeft />
-						</button>
-
-						<span
-							class="select-none px-1 text-center text-[10px] font-medium text-gray-500 dark:text-gray-400"
-							aria-live="polite"
-						>
-							{(index ?? 0) + 1} <span class="text-gray-300 dark:text-gray-500">/</span>
-							{total}
-						</span>
-						<button
-							type="button"
-							class="btn size-5 text-xs text-gray-500 hover:text-gray-700 focus:ring-0 disabled:opacity-40 dark:text-gray-400 dark:hover:text-gray-200"
-							title="Next tool"
-							aria-label="Next tool"
-							disabled={(index ?? 0) >= (total ?? 1) - 1}
-							onclick={(e) => {
-								e.preventDefault();
-								e.stopPropagation();
-								onnext?.();
-							}}
-						>
-							<CarbonChevronRight />
-						</button>
-					</div>
-				</div>
-			{/if}
-		</summary>
+						{availableTools.find((entry) => entry.name === toolFnName)?.displayName ?? toolFnName}
+					</code>
+				</span>
+			</button>
 
-		{#each tool as update}
-			{#if update.subtype === MessageToolUpdateType.Call}
-				<div class="mt-1 flex items-center gap-2 opacity-80">
-					<h3 class="text-sm">Parameters</h3>
-					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20"></div>
-				</div>
-				<ul class="py-1 text-sm">
-					{#each Object.entries(update.call.parameters ?? {}) as [key, value]}
-						{#if value != null}
-							<li>
-								<span class="font-semibold">{key}</span>:
-								<span class="whitespace-pre-wrap">{formatValue(value)}</span>
-							</li>
-						{/if}
-					{/each}
-				</ul>
-			{:else if update.subtype === MessageToolUpdateType.Error}
-				<div class="mt-1 flex items-center gap-2 opacity-80">
-					<h3 class="text-sm">Error</h3>
-					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20"></div>
-				</div>
-				<p class="text-sm">{update.message}</p>
-			{:else if isMessageToolResultUpdate(update) && update.result.status === ToolResultStatus.Success && update.result.display}
-				<div class="mt-1 flex items-center gap-2 opacity-80">
-					<h3 class="text-sm">Result</h3>
-					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20"></div>
-				</div>
-				<div class="py-1 text-sm">
-					{#each parseToolOutputs(update.result.outputs) as parsedOutput}
-						<div class="space-y-2 py-2 first:pt-0 last:pb-0">
-							{#if parsedOutput.text}
-								<!-- prettier-ignore -->
-								<pre class="whitespace-pre-wrap break-all font-mono text-xs">{parsedOutput.text}</pre>
-							{/if}
+			<button
+				type="button"
+				class="cursor-pointer"
+				onclick={() => (isOpen = !isOpen)}
+				aria-label={isOpen ? "Collapse" : "Expand"}
+			>
+				<CarbonChevronRight
+					class="size-4 text-gray-400 transition-transform duration-200 {isOpen ? 'rotate-90' : ''}"
+				/>
+			</button>
+		</div>
 
-							{#if parsedOutput.images.length > 0}
-								<div class="flex flex-wrap gap-2">
-									{#each parsedOutput.images as image, imageIndex}
-										<img
-											alt={`Tool result image ${imageIndex + 1}`}
-											class="max-h-60 rounded border border-gray-200 dark:border-gray-800"
-											src={`data:${image.mimeType};base64,${image.data}`}
-										/>
-									{/each}
+		<!-- Expandable content -->
+		{#if isOpen}
+			<div class="mt-2 space-y-3">
+				{#each tool as update, i (`${update.subtype}-${i}`)}
+					{#if update.subtype === MessageToolUpdateType.Call}
+						<div class="space-y-1">
+							<div
+								class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
+							>
+								Input
+							</div>
+							<div
+								class="rounded-md border border-gray-100 bg-gray-50 p-2 text-gray-500 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-400"
+							>
+								<pre class="whitespace-pre-wrap break-all font-mono text-xs">{formatValue(
+										update.call.parameters
+									)}</pre>
+							</div>
+						</div>
+					{:else if update.subtype === MessageToolUpdateType.Error}
+						<div class="space-y-1">
+							<div
+								class="text-[10px] font-semibold uppercase tracking-wider text-red-500 dark:text-red-400"
+							>
+								Error
+							</div>
+							<div
+								class="rounded-md border border-red-200 bg-red-50 p-2 text-red-600 dark:border-red-500/30 dark:bg-red-900/20 dark:text-red-400"
+							>
+								<pre class="whitespace-pre-wrap break-all font-mono text-xs">{update.message}</pre>
+							</div>
+						</div>
+					{:else if isMessageToolResultUpdate(update) && update.result.status === ToolResultStatus.Success && update.result.display}
+						<div class="space-y-1">
+							<div class="flex items-center gap-2">
+								<div
+									class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
+								>
+									Output
 								</div>
-							{/if}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="12"
+									height="12"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="text-emerald-500"
+								>
+									<circle cx="12" cy="12" r="10"></circle>
+									<path d="m9 12 2 2 4-4"></path>
+								</svg>
+							</div>
+							<div
+								class="scrollbar-custom rounded-md border border-gray-100 bg-white p-2 text-gray-500 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-400"
+							>
+								{#each parseToolOutputs(update.result.outputs) as parsedOutput}
+									<div class="space-y-2">
+										{#if parsedOutput.text}
+											<pre
+												class="scrollbar-custom max-h-60 overflow-y-auto whitespace-pre-wrap break-all font-mono text-xs">{parsedOutput.text}</pre>
+										{/if}
+
+										{#if parsedOutput.images.length > 0}
+											<div class="flex flex-wrap gap-2">
+												{#each parsedOutput.images as image, imageIndex}
+													<img
+														alt={`Tool result image ${imageIndex + 1}`}
+														class="max-h-60 rounded border border-gray-200 dark:border-gray-700"
+														src={`data:${image.mimeType};base64,${image.data}`}
+													/>
+												{/each}
+											</div>
+										{/if}
 
-							{#if parsedOutput.metadata.length > 0}
-								<ul class="space-y-1">
-									{#each parsedOutput.metadata as [key, value]}
-										<li>
-											<span class="font-semibold">{key}</span>:
-											<span class="whitespace-pre-wrap">{formatValue(value)}</span>
-										</li>
-									{/each}
-								</ul>
-							{/if}
+										{#if parsedOutput.metadata.length > 0}
+											<pre class="whitespace-pre-wrap break-all font-mono text-xs">{formatValue(
+													Object.fromEntries(parsedOutput.metadata)
+												)}</pre>
+										{/if}
+									</div>
+								{/each}
+							</div>
 						</div>
-					{/each}
-				</div>
-			{:else if isMessageToolResultUpdate(update) && update.result.status === ToolResultStatus.Error && update.result.display}
-				<div class="mt-1 flex items-center gap-2 opacity-80">
-					<h3 class="text-sm text-red-600 dark:text-red-400">Error</h3>
-					<div class="h-px flex-1 bg-gradient-to-r from-red-500/20"></div>
-				</div>
-				<p class="whitespace-pre-wrap text-sm text-red-600 dark:text-red-400">
-					{update.result.message}
-				</p>
-			{/if}
-		{/each}
-	</details>
+					{:else if isMessageToolResultUpdate(update) && update.result.status === ToolResultStatus.Error && update.result.display}
+						<div class="space-y-1">
+							<div
+								class="text-[10px] font-semibold uppercase tracking-wider text-red-500 dark:text-red-400"
+							>
+								Error
+							</div>
+							<div
+								class="rounded-md border border-red-200 bg-red-50 p-2 text-red-600 dark:border-red-500/30 dark:bg-red-900/20 dark:text-red-400"
+							>
+								<pre class="whitespace-pre-wrap break-all font-mono text-xs">{update.result
+										.message}</pre>
+							</div>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</BlockWrapper>
 {/if}
-
-<style>
-	details summary::-webkit-details-marker {
-		display: none;
-	}
-
-	@keyframes loading {
-		to {
-			/* move one full perimeter, normalized via pathLength=100 */
-			stroke-dashoffset: -100;
-		}
-	}
-
-	.loading-path {
-		/* larger traveling gap for clearer motion */
-		stroke-dasharray: 80 20; /* 80% dash, 20% gap */
-		animation: loading 1.6s linear infinite;
-	}
-</style>

src/lib/types/MessageUpdate.ts

@@ -44,6 +44,8 @@ export interface MessageTitleUpdate {
 export interface MessageStreamUpdate {
 	type: MessageUpdateType.Stream;
 	token: string;
+	/** Length of the original token. Used for compressed/persisted stream markers where token is empty. */
+	len?: number;
 }
 
 // Tool updates (for MCP and function calling)

src/routes/conversation/[id]/+page.svelte

@@ -250,13 +250,27 @@
 					update.token = update.token.replaceAll("\0", "");
 				}
 
-				const isHighFrequencyUpdate =
-					update.type === MessageUpdateType.Stream ||
-					(update.type === MessageUpdateType.Status &&
-						update.status === MessageUpdateStatus.KeepAlive);
-
-				if (!isHighFrequencyUpdate) {
-					messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
+				const isKeepAlive =
+					update.type === MessageUpdateType.Status &&
+					update.status === MessageUpdateStatus.KeepAlive;
+
+				if (!isKeepAlive) {
+					if (update.type === MessageUpdateType.Stream) {
+						const existingUpdates = messageToWriteTo.updates ?? [];
+						const lastUpdate = existingUpdates.at(-1);
+						if (lastUpdate?.type === MessageUpdateType.Stream) {
+							// Create fresh objects/arrays so the UI reacts to merged tokens
+							const merged = {
+								...lastUpdate,
+								token: (lastUpdate.token ?? "") + (update.token ?? ""),
+							};
+							messageToWriteTo.updates = [...existingUpdates.slice(0, -1), merged];
+						} else {
+							messageToWriteTo.updates = [...existingUpdates, update];
+						}
+					} else {
+						messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
+					}
 				}
 				const currentTime = new Date();
 
@@ -394,7 +408,7 @@
 
 	function handleKeydown(event: KeyboardEvent) {
 		// Stop generation on ESC key when loading
-		if (event.key === "Escape" && loading) {
+		if (event.key === "Escape" && $loading) {
 			event.preventDefault();
 			stopGeneration();
 		}
@@ -485,7 +499,7 @@
 		const navigatingAway =
 			navigation.to?.route.id !== page.route.id || navigation.to?.params?.id !== page.params.id;
 
-		if (loading && navigatingAway) {
+		if ($loading && navigatingAway) {
 			addBackgroundGeneration({ id: page.params.id, startedAt: Date.now() });
 		}
 
@@ -499,7 +513,7 @@
 	});
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <svelte:head>
 	<title>{title}</title>

src/routes/conversation/[id]/+server.ts

@@ -11,6 +11,7 @@ import {
 	MessageUpdateType,
 	MessageReasoningUpdateType,
 	type MessageUpdate,
+	type MessageStreamUpdate,
 } from "$lib/types/MessageUpdate";
 import { uploadFile } from "$lib/server/files/uploadFile";
 import { convertLegacyConversation } from "$lib/utils/tree/convertLegacyConversation";
@@ -330,9 +331,27 @@ export async function POST({ request, locals, params, getClientAddress }) {
 	const metricsLabels = { model: metricsModelId };
 
 	const persistConversation = async () => {
+		const messagesForSave = conv.messages.map((msg) => {
+			const filteredUpdates =
+				msg.updates
+					?.filter(
+						(u) =>
+							!(u.type === MessageUpdateType.Status && u.status === MessageUpdateStatus.KeepAlive)
+					)
+					.map((u) => {
+						if (u.type !== MessageUpdateType.Stream) return u;
+						// Preserve existing len if already compressed, otherwise compute from token
+						const len = u.len ?? (u.token ?? "").length;
+						// store a lightweight marker to preserve ordering without duplicating content
+						return { type: MessageUpdateType.Stream, token: "", len } satisfies MessageStreamUpdate;
+					}) ?? [];
+
+			return { ...msg, updates: filteredUpdates };
+		});
+
 		await collections.conversations.updateOne(
 			{ _id: convId },
-			{ $set: { messages: conv.messages, title: conv.title, updatedAt: new Date() } }
+			{ $set: { messages: messagesForSave, title: conv.title, updatedAt: new Date() } }
 		);
 	};
 
@@ -470,15 +489,16 @@ export async function POST({ request, locals, params, getClientAddress }) {
 					}
 				}
 
-				// Append to the persistent message updates if it's not a stream update
+				// Append updates for audit/replay (streams too, to preserve ordering)
 				if (
-					event.type !== MessageUpdateType.Stream &&
 					!(
 						event.type === MessageUpdateType.Status &&
 						event.status === MessageUpdateStatus.KeepAlive
 					)
 				) {
-					messageToWriteTo?.updates?.push(event);
+					messageToWriteTo?.updates?.push(
+						event.type === MessageUpdateType.Stream ? { ...event } : event
+					);
 				}
 
 				// Avoid remote keylogging attack executed by watching packet lengths

src/styles/main.css

@@ -88,34 +88,34 @@ body {
 		@apply border-[0.5px] bg-white text-gray-600 dark:border-gray-700 dark:!bg-gray-900 dark:bg-inherit dark:text-inherit;
 	}
 
-	/* Override prose-sm title sizes - 55% of original */
+	/* Override prose-sm title sizes - 75% of original */
 	.prose-sm :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-		font-size: 1.17857em; /* 55% */
+		font-size: 1.6em; /* 75% */
 		@apply font-semibold;
 	}
 
 	.prose-sm :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-		font-size: 0.78571em; /* 55% */
+		font-size: 1.07em; /* 75% */
 		@apply font-semibold;
 	}
 
 	.prose-sm :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-		font-size: 0.70714em; /* 55% */
+		font-size: 0.96em; /* 75% */
 		@apply font-semibold;
 	}
 
 	.prose-sm :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-		font-size: 0.58929em; /* 55% */
+		font-size: 0.8em; /* 75% */
 		@apply font-semibold;
 	}
 
 	.prose-sm :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-		font-size: 0.55em; /* 55% */
+		font-size: 0.75em; /* 75% */
 		@apply font-semibold;
 	}
 
 	.prose-sm :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-		font-size: 0.55em; /* 55% */
+		font-size: 0.7em; /* 75% */
 		@apply font-semibold;
 	}
 }