Inital commit

tools/ui/src/lib/assets/logo.svg

@@ -0,0 +1,7 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M244.95 8C215.233 8 187.774 23.8591 172.923 49.5999L95.6009 183.625C60.2162 244.959 104.481 321.6 175.29 321.6H208L316.977 132.708C348.959 77.2719 308.95 8 244.95 8ZM208 321.6H351.947C415.982 321.6 456.013 390.91 424.013 446.377C409.155 472.132 381.681 488 351.947 488H271.29C200.481 488 156.216 411.359 191.601 350.026L208 321.6Z" fill="currentColor"/>
+    <path d="M208 321.6H16L106.462 164.8L208 321.6Z" fill="currentColor"/>
+    <path d="M388.923 8L208 321.6L253.6 8H388.923Z" fill="currentColor"/>
+    <path d="M304 488H112L202.462 331.2L304 488Z" fill="currentColor"/>
+    <path d="M496 321.6H208L419.399 454.4L496 321.6Z" fill="currentColor"/>
+</svg>

tools/ui/src/lib/components/app/SKILL.md

@@ -0,0 +1,11 @@
+---
+name: app
+description: Opinionated app components building on top of ./ui primitives
+---
+
+- Can include business logic and state management
+- Can include data fetching and caching logic
+- Should use original spelling for HTML-native events and `camelCase` for custom events
+- Props and markup attributes should be listed alphabetically
+- Use JS Objects and Arrays for CSS classes and styles when they are dynamic
+- Whenever there can be repetition in the component's markup, if it's too small to be decoupled as a separate component — use Svelte 5's `{#snippet}` + `{@render}`

tools/ui/src/lib/components/app/actions/ActionIcon.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { Button, type ButtonVariant, type ButtonSize } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import type { Component } from 'svelte';
+	import { TooltipSide } from '$lib/enums';
+
+	interface Props {
+		ariaLabel?: string;
+		class?: string;
+		disabled?: boolean;
+		href?: string;
+		icon: Component;
+		iconSize?: string;
+		onclick?: (e?: MouseEvent) => void;
+		size?: ButtonSize;
+		stopPropagationOnClick?: boolean;
+		tooltip?: string;
+		variant?: ButtonVariant;
+		tooltipSide?: TooltipSide;
+	}
+
+	let {
+		icon,
+		tooltip,
+		variant = 'ghost',
+		href = '',
+		size = 'sm',
+		class: className = '',
+		disabled = false,
+		iconSize = 'h-3 w-3',
+		tooltipSide = TooltipSide.TOP,
+		stopPropagationOnClick = false,
+		onclick,
+		ariaLabel
+	}: Props = $props();
+
+	let innerWidth = $state(0);
+	const showTooltip = $derived(!!tooltip && innerWidth > 768);
+</script>
+
+{#snippet button(props = {})}
+	<Button
+		{...props}
+		{href}
+		{variant}
+		{size}
+		{disabled}
+		onclick={(e: MouseEvent) => {
+			if (stopPropagationOnClick) e.stopPropagation();
+
+			onclick?.(e);
+		}}
+		class="h-6 w-6 p-0 {className} flex hover:bg-transparent data-[state=open]:bg-transparent!"
+		aria-label={ariaLabel || tooltip}
+	>
+		{#if icon}
+			{@const IconComponent = icon}
+
+			<IconComponent class={iconSize} />
+		{/if}
+	</Button>
+{/snippet}
+
+{#if showTooltip}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<!-- prevent another nested button element -->
+			{#snippet child({ props })}
+				{#if disabled}
+					<!-- disabled buttons have pointer-events:none; wrap in a span so the tooltip hover surface stays alive -->
+					<span {...props}>
+						{@render button({})}
+					</span>
+				{:else}
+					{@render button(props)}
+				{/if}
+			{/snippet}
+		</Tooltip.Trigger>
+
+		<Tooltip.Content side={tooltipSide}>
+			<p>{tooltip}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	{@render button({ href })}
+{/if}
+
+<svelte:window bind:innerWidth />

tools/ui/src/lib/components/app/actions/ActionIconCopyToClipboard.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { Copy } from '@lucide/svelte';
+	import { copyToClipboard } from '$lib/utils';
+	import ActionIcon from './ActionIcon.svelte';
+
+	export let ariaLabel: string = 'Copy to clipboard';
+	export let canCopy: boolean = true;
+	export let text: string;
+</script>
+
+<ActionIcon
+	icon={Copy}
+	tooltip={ariaLabel}
+	iconSize={ICON_CLASS_DEFAULT}
+	disabled={!canCopy}
+	onclick={() => canCopy && copyToClipboard(text)}
+/>

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

@@ -0,0 +1,13 @@
+/**
+ *
+ * ACTIONS
+ *
+ * Small interactive components for user actions.
+ *
+ */
+
+/** Styled icon button for action triggers with tooltip. */
+export { default as ActionIcon } from './ActionIcon.svelte';
+
+/** Copy-to-clipboard icon button with clipboard logic. */
+export { default as ActionIconCopyToClipboard } from './ActionIconCopyToClipboard.svelte';

tools/ui/src/lib/components/app/badges/BadgeInfo.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+		class?: string;
+		icon?: Snippet;
+	}
+
+	let { children, class: className = '', icon, ...rest }: Props = $props();
+</script>
+
+<button
+	{...rest}
+	class={[
+		'inline-flex cursor-pointer items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75',
+		className
+	]}
+>
+	{#if icon}
+		{@render icon()}
+	{/if}
+
+	{@render children()}
+</button>

tools/ui/src/lib/components/app/badges/BadgesModality.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Eye, Mic, Video } from '@lucide/svelte';
+	import { ModelModality } from '$lib/enums';
+
+	interface Props {
+		modalities: ModelModality[];
+		class?: string;
+	}
+
+	let { modalities, class: className = '' }: Props = $props();
+</script>
+
+{#each modalities as modality (modality)}
+	{#if modality === ModelModality.VISION || modality === ModelModality.AUDIO || modality === ModelModality.VIDEO}
+		<span
+			class={[
+				'inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium',
+				className
+			]}
+		>
+			{#if modality === ModelModality.VISION}
+				<Eye class="h-3 w-3" />
+
+				Vision (Image)
+			{:else if modality === ModelModality.VIDEO}
+				<Video class="h-3 w-3" />
+
+				Vision (Video)
+			{:else}
+				<Mic class="h-3 w-3" />
+
+				Audio
+			{/if}
+		</span>
+	{/if}
+{/each}

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

@@ -0,0 +1,13 @@
+/**
+ *
+ * BADGES & INDICATORS
+ *
+ * Small visual indicators for status and metadata.
+ *
+ */
+
+/** Generic info badge with optional tooltip and click handler. */
+export { default as BadgeInfo } from './BadgeInfo.svelte';
+
+/** Badge indicating model modality (vision, audio, tools). */
+export { default as BadgesModality } from './BadgesModality.svelte';

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsList.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import {
+		ChatAttachmentsListItem,
+		DialogChatAttachmentsPreview,
+		DialogMcpResourcePreview,
+		HorizontalScrollCarousel
+	} from '$lib/components/app';
+	import type { DatabaseMessageExtraMcpResource } from '$lib/types';
+	import { getAttachmentDisplayItems, isMcpPrompt, isMcpResource } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		// For ChatMessage - stored attachments
+		attachments?: DatabaseMessageExtra[];
+		readonly?: boolean;
+		// For ChatForm - pending uploads
+		onFileRemove?: (fileId: string) => void;
+		uploadedFiles?: ChatUploadedFile[];
+		// Image size customization
+		imageClass?: string;
+		imageHeight?: string;
+		imageWidth?: string;
+		// Limit display to single row with "+ X more" button
+		limitToSingleRow?: boolean;
+		// For vision modality check
+		activeModelId?: string;
+	}
+
+	let {
+		class: className = '',
+		style = '',
+		attachments = [],
+		readonly = false,
+		onFileRemove,
+		uploadedFiles = $bindable([]),
+		// Default to small size for form previews
+		imageClass = '',
+		imageHeight = 'h-24',
+		imageWidth = 'w-auto',
+		limitToSingleRow = false,
+		activeModelId
+	}: Props = $props();
+
+	let carouselRef: HorizontalScrollCarousel | undefined = $state();
+	let mcpResourcePreviewOpen = $state(false);
+	let mcpResourcePreviewExtra = $state<DatabaseMessageExtraMcpResource | null>(null);
+	let previewFocusIndex = $state(0);
+	let viewAllDialogOpen = $state(false);
+
+	let displayItems = $derived(getAttachmentDisplayItems({ uploadedFiles, attachments }));
+
+	function openPreview(item: ChatAttachmentDisplayItem, event?: MouseEvent) {
+		event?.stopPropagation();
+		event?.preventDefault();
+
+		// Find the index of the clicked item among non-MCP attachments
+		const nonMcpItems = displayItems.filter((i) => !isMcpPrompt(i) && !isMcpResource(i));
+		const index = nonMcpItems.findIndex((i) => i.id === item.id);
+
+		previewFocusIndex = index >= 0 ? index : 0;
+		viewAllDialogOpen = true;
+	}
+
+	function openMcpResourcePreview(extra: DatabaseMessageExtraMcpResource) {
+		mcpResourcePreviewExtra = extra;
+		mcpResourcePreviewOpen = true;
+	}
+
+	$effect(() => {
+		if (carouselRef && displayItems.length) {
+			carouselRef.resetScroll();
+		}
+	});
+</script>
+
+{#snippet attachmentitem(item: ChatAttachmentDisplayItem)}
+	<ChatAttachmentsListItem
+		{imageClass}
+		{imageHeight}
+		{imageWidth}
+		{item}
+		{limitToSingleRow}
+		{onFileRemove}
+		onMcpResourcePreview={openMcpResourcePreview}
+		onPreview={(i: ChatAttachmentDisplayItem, event?: MouseEvent) => openPreview(i, event)}
+		{readonly}
+	/>
+{/snippet}
+
+{#if displayItems.length > 0}
+	<div class={className} {style}>
+		{#if limitToSingleRow}
+			<HorizontalScrollCarousel bind:this={carouselRef}>
+				{#each displayItems as item (item.id)}
+					{@render attachmentitem(item)}
+				{/each}
+			</HorizontalScrollCarousel>
+		{:else}
+			<div class="flex flex-wrap items-start justify-end gap-3">
+				{#each displayItems as item (item.id)}
+					{@render attachmentitem(item)}
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<DialogChatAttachmentsPreview
+	{activeModelId}
+	{attachments}
+	bind:open={viewAllDialogOpen}
+	{previewFocusIndex}
+	{uploadedFiles}
+/>
+
+{#if mcpResourcePreviewExtra}
+	<DialogMcpResourcePreview extra={mcpResourcePreviewExtra} bind:open={mcpResourcePreviewOpen} />
+{/if}

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItem.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import {
+		ChatAttachmentsListItemMcpPrompt,
+		ChatAttachmentsListItemMcpResource,
+		ChatAttachmentsListItemThumbnailImage,
+		ChatAttachmentsListItemThumbnailFile
+	} from '$lib/components/app';
+	import { AttachmentType } from '$lib/enums';
+	import type {
+		ChatAttachmentDisplayItem,
+		DatabaseMessageExtraMcpPrompt,
+		DatabaseMessageExtraMcpResource,
+		MCPResourceAttachment
+	} from '$lib/types';
+	import { isMcpPrompt, isMcpResource, isPdfFile } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		imageClass?: string;
+		imageHeight?: string;
+		imageWidth?: string;
+		item: ChatAttachmentDisplayItem;
+		limitToSingleRow?: boolean;
+		onFileRemove?: (fileId: string) => void;
+		onMcpResourcePreview?: (extra: DatabaseMessageExtraMcpResource) => void;
+		onPreview?: (item: ChatAttachmentDisplayItem) => void;
+		readonly?: boolean;
+	}
+
+	let {
+		class: className = '',
+		imageClass = '',
+		imageHeight = 'h-24',
+		imageWidth = 'w-auto',
+		item,
+		limitToSingleRow = false,
+		onFileRemove,
+		onMcpResourcePreview,
+		onPreview,
+		readonly = false
+	}: Props = $props();
+
+	const scrollClasses = $derived(limitToSingleRow ? 'first:ml-4 last:mr-4' : '');
+
+	function toMcpResourceAttachment(
+		extra: DatabaseMessageExtraMcpResource,
+		id: string
+	): MCPResourceAttachment {
+		return {
+			id,
+			resource: {
+				uri: extra.uri,
+				name: extra.name,
+				title: extra.name,
+				serverName: extra.serverName
+			}
+		};
+	}
+</script>
+
+{#if isMcpPrompt(item)}
+	{@const mcpPrompt =
+		item.attachment?.type === AttachmentType.MCP_PROMPT
+			? (item.attachment as DatabaseMessageExtraMcpPrompt)
+			: item.uploadedFile?.mcpPrompt
+				? {
+						type: AttachmentType.MCP_PROMPT as const,
+						name: item.name,
+						serverName: item.uploadedFile.mcpPrompt.serverName,
+						promptName: item.uploadedFile.mcpPrompt.promptName,
+						content: item.textContent ?? '',
+						arguments: item.uploadedFile.mcpPrompt.arguments
+					}
+				: null}
+	{#if mcpPrompt}
+		<ChatAttachmentsListItemMcpPrompt
+			class="max-w-[300px] min-w-[200px] flex-shrink-0 {className} {scrollClasses}"
+			prompt={mcpPrompt}
+			{readonly}
+			isLoading={item.isLoading}
+			loadError={item.loadError}
+			onRemove={onFileRemove ? () => onFileRemove(item.id) : undefined}
+		/>
+	{/if}
+{:else if isMcpResource(item)}
+	{@const mcpResource = item.attachment as DatabaseMessageExtraMcpResource}
+
+	<ChatAttachmentsListItemMcpResource
+		class="flex-shrink-0 {className} {scrollClasses}"
+		attachment={toMcpResourceAttachment(mcpResource, item.id)}
+		onclick={() => onMcpResourcePreview?.(mcpResource)}
+	/>
+{:else if item.isImage && item.preview}
+	<ChatAttachmentsListItemThumbnailImage
+		class="flex-shrink-0 cursor-pointer {className} {scrollClasses}"
+		id={item.id}
+		name={item.name}
+		preview={item.preview}
+		{readonly}
+		onRemove={onFileRemove}
+		height={imageHeight}
+		width={imageWidth}
+		{imageClass}
+		onclick={() => onPreview?.(item)}
+	/>
+{:else if isPdfFile(item.attachment, item.uploadedFile)}
+	<ChatAttachmentsListItemThumbnailFile
+		class="flex-shrink-0 cursor-pointer {className} {scrollClasses}"
+		id={item.id}
+		name={item.name}
+		size={item.size}
+		{readonly}
+		onRemove={onFileRemove}
+		textContent={item.textContent}
+		attachment={item.attachment}
+		uploadedFile={item.uploadedFile}
+		onclick={() => onPreview?.(item)}
+	/>
+{:else}
+	<ChatAttachmentsListItemThumbnailFile
+		class="flex-shrink-0 cursor-pointer {className} {scrollClasses}"
+		id={item.id}
+		name={item.name}
+		size={item.size}
+		{readonly}
+		onRemove={onFileRemove}
+		textContent={item.textContent}
+		attachment={item.attachment}
+		uploadedFile={item.uploadedFile}
+		onclick={() => onPreview?.(item)}
+	/>
+{/if}

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpPrompt.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { ChatMessageMcpPromptContent, ActionIcon } from '$lib/components/app';
+	import { X } from '@lucide/svelte';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+	import { McpPromptVariant } from '$lib/enums';
+
+	interface Props {
+		class?: string;
+		isLoading?: boolean;
+		loadError?: string;
+		onRemove?: () => void;
+		prompt: DatabaseMessageExtraMcpPrompt;
+		readonly?: boolean;
+	}
+
+	let {
+		class: className = '',
+		isLoading = false,
+		loadError,
+		onRemove,
+		prompt,
+		readonly = false
+	}: Props = $props();
+</script>
+
+<div class="group relative {className}">
+	<ChatMessageMcpPromptContent
+		{isLoading}
+		{loadError}
+		{prompt}
+		variant={McpPromptVariant.ATTACHMENT}
+	/>
+
+	{#if !readonly && onRemove}
+		<div
+			class="absolute top-10 right-2 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+		>
+			<ActionIcon icon={X} tooltip="Remove" stopPropagationOnClick onclick={() => onRemove?.()} />
+		</div>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpResource.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { Loader2, AlertCircle } from '@lucide/svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import type { MCPResourceAttachment } from '$lib/types';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ActionIcon } from '$lib/components/app';
+	import { X } from '@lucide/svelte';
+	import { getResourceIcon, getResourceDisplayName } from '$lib/utils';
+
+	interface Props {
+		attachment: MCPResourceAttachment;
+		class?: string;
+		onclick?: () => void;
+		onRemove?: (attachmentId: string) => void;
+	}
+
+	let { attachment, class: className, onclick, onRemove }: Props = $props();
+
+	const ResourceIcon = $derived(
+		getResourceIcon(attachment.resource.mimeType, attachment.resource.uri)
+	);
+	const serverName = $derived(mcpStore.getServerDisplayName(attachment.resource.serverName));
+	const favicon = $derived(mcpStore.getServerFavicon(attachment.resource.serverName));
+
+	function getStatusClass(attachment: MCPResourceAttachment): string {
+		if (attachment.error) return 'border-red-500/50 bg-red-500/10';
+		if (attachment.loading) return 'border-border/50 bg-muted/30';
+
+		return 'border-border/50 bg-muted/30';
+	}
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger>
+		<button
+			class={[
+				'flex flex-shrink-0 items-center gap-1.5 rounded-md border px-2 py-0.75 text-sm transition-colors',
+				getStatusClass(attachment),
+				onclick && 'cursor-pointer hover:bg-muted/50',
+				className
+			]}
+			disabled={!onclick}
+			{onclick}
+			type="button"
+		>
+			{#if attachment.loading}
+				<Loader2 class="h-3 w-3 animate-spin text-muted-foreground" />
+			{:else if attachment.error}
+				<AlertCircle class="h-3 w-3 text-red-500" />
+			{:else}
+				<ResourceIcon class="h-3 w-3 text-muted-foreground" />
+			{/if}
+
+			<span class="max-w-[150px] truncate text-xs">
+				{getResourceDisplayName(attachment.resource)}
+			</span>
+
+			{#if onRemove}
+				<ActionIcon
+					class="-my-2 -mr-1.5 bg-transparent"
+					icon={X}
+					iconSize="h-2 w-2"
+					onclick={() => onRemove?.(attachment.id)}
+					stopPropagationOnClick
+					tooltip="Remove"
+				/>
+			{/if}
+		</button>
+	</Tooltip.Trigger>
+
+	<Tooltip.Content>
+		<div class="flex items-center gap-1 text-xs">
+			{#if favicon}
+				<img
+					alt={attachment.resource.serverName}
+					class="h-3 w-3 shrink-0 rounded-sm"
+					onerror={(e) => {
+						(e.currentTarget as HTMLImageElement).style.display = 'none';
+					}}
+					src={favicon}
+				/>
+			{/if}
+
+			<span class="truncate">
+				{serverName}
+			</span>
+		</div>
+	</Tooltip.Content>
+</Tooltip.Root>

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailFile.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { X, Music, Video } from '@lucide/svelte';
+	import {
+		formatFileSize,
+		getFileTypeLabel,
+		getPreviewText,
+		isPdfFile,
+		isAudioFile,
+		isVideoFile,
+		isTextFile
+	} from '$lib/utils';
+	import { ActionIcon } from '$lib/components/app';
+	import { AttachmentType } from '$lib/enums';
+
+	interface Props {
+		attachment?: DatabaseMessageExtra;
+		class?: string;
+		id: string;
+		onclick?: (event: MouseEvent) => void;
+		onRemove?: (id: string) => void;
+		name: string;
+		readonly?: boolean;
+		size?: number;
+		textContent?: string;
+		// Either uploaded file or stored attachment
+		uploadedFile?: ChatUploadedFile;
+	}
+
+	let {
+		attachment,
+		class: className = '',
+		id,
+		onclick,
+		onRemove,
+		name,
+		readonly = false,
+		size,
+		textContent,
+		uploadedFile
+	}: Props = $props();
+
+	let isPdf = $derived(isPdfFile(attachment, uploadedFile));
+	let isAudio = $derived(isAudioFile(attachment, uploadedFile));
+	let isVideo = $derived(isVideoFile(attachment, uploadedFile));
+	let isPdfWithContent = $derived(isPdf && !!textContent);
+
+	let isText = $derived(isTextFile(attachment, uploadedFile));
+	let isTextWithContent = $derived(isText && !!textContent);
+
+	let fileTypeLabel = $derived.by(() => {
+		if (uploadedFile?.type) {
+			return getFileTypeLabel(uploadedFile.type);
+		}
+
+		if (attachment) {
+			if ('mimeType' in attachment && attachment.mimeType) {
+				return getFileTypeLabel(attachment.mimeType);
+			}
+
+			if (attachment.type) {
+				return getFileTypeLabel(attachment.type);
+			}
+		}
+
+		return getFileTypeLabel(name);
+	});
+
+	let pdfProcessingMode = $derived.by(() => {
+		if (attachment?.type === AttachmentType.PDF) {
+			const pdfAttachment = attachment as DatabaseMessageExtraPdfFile;
+
+			return pdfAttachment.processedAsImages ? 'Sent as Image' : 'Sent as Text';
+		}
+
+		return null;
+	});
+</script>
+
+{#snippet textPreview(content: string)}
+	<div class="relative">
+		<div
+			class="font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-muted-foreground {!readonly
+				? 'max-h-3rem line-height-1.2'
+				: ''}"
+		>
+			{getPreviewText(content)}
+		</div>
+
+		{#if content.length > 150}
+			<div
+				class="pointer-events-none absolute right-0 bottom-0 left-0 h-4 bg-gradient-to-t from-muted to-transparent {readonly
+					? 'h-6'
+					: ''}"
+			></div>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet removeButton()}
+	<div
+		class="absolute top-2 right-2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
+	>
+		<ActionIcon icon={X} tooltip="Remove" stopPropagationOnClick onclick={() => onRemove?.(id)} />
+	</div>
+{/snippet}
+
+{#snippet fileIcon()}
+	<div
+		class="flex h-8 w-8 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary"
+	>
+		{#if isAudio}
+			<Music class="{ICON_CLASS_DEFAULT} text-white/70" />
+		{:else if isVideo}
+			<Video class="{ICON_CLASS_DEFAULT} text-white/70" />
+		{:else}
+			{fileTypeLabel}
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet info(text: string | undefined)}
+	{#if text}
+		<span class="text-xs text-muted-foreground">{text}</span>
+	{/if}
+{/snippet}
+
+{#if isTextWithContent || isPdfWithContent}
+	<button
+		aria-label={readonly ? `Preview ${name}` : undefined}
+		class="rounded-lg border border-border bg-muted p-3 {className} cursor-pointer {readonly
+			? 'w-full max-w-2xl transition-shadow hover:shadow-md'
+			: `group relative text-left ${textContent ? 'max-h-24 max-w-72' : 'max-w-36'}`} overflow-hidden"
+		{onclick}
+		type="button"
+	>
+		{#if !readonly}
+			{@render removeButton()}
+		{/if}
+
+		<div class={[!readonly && 'pr-8', 'overflow-hidden']}>
+			{#if readonly}
+				<div class="flex items-start gap-3">
+					<div class="flex min-w-0 flex-1 flex-col items-start text-left">
+						<span class="w-full truncate text-sm font-medium text-foreground">{name}</span>
+
+						{@render info(pdfProcessingMode || (size ? formatFileSize(size) : undefined))}
+
+						{#if textContent}
+							{@render textPreview(textContent)}
+						{/if}
+					</div>
+				</div>
+			{:else}
+				<span class="mb-3 block truncate text-sm font-medium text-foreground">{name}</span>
+
+				{#if textContent}
+					{@render textPreview(textContent)}
+				{/if}
+			{/if}
+		</div>
+	</button>
+{:else}
+	<button
+		class="group flex items-center gap-3 rounded-lg border border-border bg-muted p-3 {className} relative"
+		{onclick}
+		type="button"
+	>
+		{@render fileIcon()}
+
+		<div class="flex flex-col items-start gap-0.5">
+			<span
+				class="max-w-24 truncate text-sm font-medium text-foreground {readonly
+					? ''
+					: 'group-hover:pr-6'} md:max-w-32"
+			>
+				{name}
+			</span>
+
+			{@render info(pdfProcessingMode || (size ? formatFileSize(size) : undefined))}
+		</div>
+
+		{#if !readonly}
+			{@render removeButton()}
+		{/if}
+	</button>
+{/if}

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailImage.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { ActionIcon } from '$lib/components/app';
+	import { X } from '@lucide/svelte';
+
+	interface Props {
+		class?: string;
+		height?: string;
+		id: string;
+		imageClass?: string;
+		onclick?: (event?: MouseEvent) => void;
+		onRemove?: (id: string) => void;
+		name: string;
+		preview: string;
+		readonly?: boolean;
+		width?: string;
+	}
+
+	let {
+		class: className = '',
+		height = 'h-16',
+		id,
+		imageClass = '',
+		onclick,
+		onRemove,
+		name,
+		preview,
+		readonly = false,
+		width = 'w-auto'
+	}: Props = $props();
+</script>
+
+{#snippet image()}
+	<img src={preview} alt={name} class="{height} {width} cursor-pointer object-cover {imageClass}" />
+{/snippet}
+
+<div
+	class="group relative overflow-hidden rounded-lg bg-muted shadow-lg dark:border dark:border-muted {className}"
+>
+	{#if onclick}
+		<button
+			aria-label="Preview {name}"
+			class="block h-full w-full rounded-lg focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
+			{onclick}
+			type="button"
+		>
+			{@render image()}
+		</button>
+	{:else}
+		{@render image()}
+	{/if}
+
+	{#if !readonly}
+		<div
+			class="absolute top-1 right-1 flex items-center justify-center opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
+		>
+			<ActionIcon
+				class="text-white"
+				icon={X}
+				onclick={() => onRemove?.(id)}
+				stopPropagationOnClick
+				tooltip="Remove"
+			/>
+		</div>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+	import {
+		ChatAttachmentsPreviewCurrentItem,
+		ChatAttachmentsPreviewFileInfo,
+		ChatAttachmentsPreviewNavButtons,
+		ChatAttachmentsPreviewThumbnailStrip
+	} from '$lib/components/app';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import {
+		createBase64DataUrl,
+		formatFileSize,
+		getAttachmentDisplayItems,
+		getLanguageFromFilename,
+		isAudioFile,
+		isVideoFile,
+		isImageFile,
+		isMcpPrompt,
+		isMcpResource,
+		isPdfFile,
+		isTextFile
+	} from '$lib/utils';
+
+	interface PreviewItem {
+		id: string;
+		name: string;
+		size?: number;
+		preview?: string;
+		uploadedFile?: ChatUploadedFile;
+		attachment?: DatabaseMessageExtra;
+		textContent?: string;
+		isImage: boolean;
+		isAudio: boolean;
+		isVideo: boolean;
+	}
+
+	interface Props {
+		uploadedFiles?: ChatUploadedFile[];
+		attachments?: DatabaseMessageExtra[];
+		activeModelId?: string;
+		class?: string;
+		previewFocusIndex?: number;
+	}
+
+	let {
+		uploadedFiles = [],
+		attachments = [],
+		activeModelId,
+		class: className = '',
+		previewFocusIndex = 0
+	}: Props = $props();
+
+	let allItems = $derived(
+		getAttachmentDisplayItems({ uploadedFiles, attachments })
+			.filter((item) => !isMcpPrompt(item) && !isMcpResource(item))
+			.map(
+				(item): PreviewItem => ({
+					...item,
+					isImage: isImageFile(item.attachment, item.uploadedFile),
+					isAudio: isAudioFile(item.attachment, item.uploadedFile),
+					isVideo: isVideoFile(item.attachment, item.uploadedFile)
+				})
+			)
+	);
+
+	let currentIndex = $state(0);
+
+	$effect(() => {
+		if (previewFocusIndex >= 0 && previewFocusIndex < allItems.length) {
+			currentIndex = previewFocusIndex;
+		}
+	});
+
+	$effect(() => {
+		const handler = (e: Event) => {
+			const delta = (e as CustomEvent).detail;
+
+			if (delta < 0) {
+				currentIndex = currentIndex > 0 ? currentIndex - 1 : allItems.length - 1;
+			} else {
+				currentIndex = currentIndex < allItems.length - 1 ? currentIndex + 1 : 0;
+			}
+		};
+
+		document.addEventListener('chat-attachments-nav', handler);
+
+		return () => document.removeEventListener('chat-attachments-nav', handler);
+	});
+
+	$effect(() => {
+		const index = currentIndex;
+		setTimeout(() => {
+			const thumbnail = document.querySelector(`[data-thumbnail-index="${index}"]`);
+
+			thumbnail?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+		}, 0);
+	});
+
+	let currentItem = $derived(allItems[currentIndex] ?? null);
+	let displayName = $derived(
+		currentItem?.name ||
+			currentItem?.uploadedFile?.name ||
+			currentItem?.attachment?.name ||
+			'Unknown File'
+	);
+	let isAudio = $derived(
+		currentItem ? isAudioFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+	let isVideo = $derived(
+		currentItem ? isVideoFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+	let isImage = $derived(
+		currentItem ? isImageFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+	let isPdf = $derived(
+		currentItem ? isPdfFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+	let isText = $derived(
+		currentItem ? isTextFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+
+	let displayPreview = $derived(
+		currentItem?.uploadedFile?.preview ||
+			(isImage && currentItem?.attachment && 'base64Url' in currentItem.attachment
+				? currentItem.attachment.base64Url
+				: currentItem?.preview)
+	);
+
+	let displayTextContent = $derived(
+		currentItem?.uploadedFile?.textContent ||
+			(currentItem?.attachment && 'content' in currentItem.attachment
+				? currentItem.attachment.content
+				: currentItem?.textContent)
+	);
+
+	let language = $derived(getLanguageFromFilename(displayName));
+
+	let fileSize = $derived(currentItem?.size ? formatFileSize(currentItem.size) : '');
+
+	let hasVisionModality = $derived(
+		currentItem && activeModelId ? modelsStore.modelSupportsVision(activeModelId) : false
+	);
+
+	let audioSrc = $derived(
+		isAudio && currentItem
+			? (currentItem.uploadedFile?.preview ??
+					(currentItem.attachment &&
+					'mimeType' in currentItem.attachment &&
+					'base64Data' in currentItem.attachment
+						? createBase64DataUrl(
+								currentItem.attachment.mimeType,
+								currentItem.attachment.base64Data
+							)
+						: null))
+			: null
+	);
+
+	let videoSrc = $derived(
+		isVideo && currentItem
+			? (currentItem.uploadedFile?.preview ??
+					(currentItem.attachment &&
+					'mimeType' in currentItem.attachment &&
+					'base64Data' in currentItem.attachment
+						? createBase64DataUrl(
+								currentItem.attachment.mimeType,
+								currentItem.attachment.base64Data
+							)
+						: null))
+			: null
+	);
+
+	export function prev() {
+		currentIndex = currentIndex > 0 ? currentIndex - 1 : allItems.length - 1;
+	}
+
+	export function next() {
+		currentIndex = currentIndex < allItems.length - 1 ? currentIndex + 1 : 0;
+	}
+
+	function onNavigate(index: number) {
+		currentIndex = index;
+	}
+</script>
+
+<div class="{className} flex flex-col text-white">
+	<div class="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden">
+		<ChatAttachmentsPreviewNavButtons onPrev={prev} onNext={next} show={allItems.length > 1} />
+
+		<div class="flex h-full w-full flex-col items-center justify-start overflow-auto py-4">
+			{#if currentItem}
+				<ChatAttachmentsPreviewFileInfo {displayName} {fileSize} />
+
+				<ChatAttachmentsPreviewCurrentItem
+					{currentItem}
+					{isImage}
+					{isAudio}
+					{isVideo}
+					{isPdf}
+					{isText}
+					{displayPreview}
+					{displayTextContent}
+					{audioSrc}
+					{videoSrc}
+					{language}
+					{hasVisionModality}
+					{activeModelId}
+				/>
+			{/if}
+
+			<ChatAttachmentsPreviewThumbnailStrip items={allItems} {currentIndex} {onNavigate} />
+		</div>
+	</div>
+</div>

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItem.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { ChatAttachmentDisplayItem } from '$lib/types';
+	import { Image, Music, Video, FileText, FileIcon } from '@lucide/svelte';
+	import ChatAttachmentsPreviewCurrentItemPdf from './ChatAttachmentsPreviewCurrentItemPdf.svelte';
+	import ChatAttachmentsPreviewCurrentItemImage from './ChatAttachmentsPreviewCurrentItemImage.svelte';
+	import ChatAttachmentsPreviewCurrentItemAudio from './ChatAttachmentsPreviewCurrentItemAudio.svelte';
+	import ChatAttachmentsPreviewCurrentItemVideo from './ChatAttachmentsPreviewCurrentItemVideo.svelte';
+	import ChatAttachmentsPreviewCurrentItemText from './ChatAttachmentsPreviewCurrentItemText.svelte';
+	import ChatAttachmentsPreviewCurrentItemUnavailable from './ChatAttachmentsPreviewCurrentItemUnavailable.svelte';
+
+	interface Props {
+		currentItem: ChatAttachmentDisplayItem | null;
+		isImage: boolean;
+		isAudio: boolean;
+		isVideo: boolean;
+		isPdf: boolean;
+		isText: boolean;
+		displayPreview: string | undefined;
+		displayTextContent: string | undefined;
+		audioSrc: string | null;
+		videoSrc: string | null;
+		language: string;
+		hasVisionModality: boolean;
+		activeModelId?: string;
+	}
+
+	let {
+		currentItem,
+		isImage,
+		isAudio,
+		isVideo,
+		isPdf,
+		isText,
+		displayPreview,
+		displayTextContent,
+		audioSrc,
+		videoSrc,
+		language,
+		hasVisionModality,
+		activeModelId
+	}: Props = $props();
+
+	let IconComponent = $derived(
+		isImage ? Image : isText || isPdf ? FileText : isAudio ? Music : isVideo ? Video : FileIcon
+	);
+
+	let isUnavailable = $derived(
+		!isPdf && !isImage && !(isText && displayTextContent) && !isAudio && !isVideo
+	);
+</script>
+
+{#if currentItem}
+	{#key currentItem.id}
+		{#if isPdf}
+			<ChatAttachmentsPreviewCurrentItemPdf
+				{currentItem}
+				displayName={currentItem.name}
+				{displayTextContent}
+				{hasVisionModality}
+				{activeModelId}
+			/>
+		{:else if isImage}
+			<ChatAttachmentsPreviewCurrentItemImage {currentItem} {displayPreview} />
+		{:else if isText && displayTextContent}
+			<ChatAttachmentsPreviewCurrentItemText {displayTextContent} {language} />
+		{:else if isAudio}
+			<ChatAttachmentsPreviewCurrentItemAudio {currentItem} {audioSrc} />
+		{:else if isVideo}
+			<ChatAttachmentsPreviewCurrentItemVideo {currentItem} {videoSrc} />
+		{:else if isUnavailable}
+			<ChatAttachmentsPreviewCurrentItemUnavailable {IconComponent} />
+		{/if}
+	{/key}
+{/if}

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemAudio.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Music } from '@lucide/svelte';
+
+	interface Props {
+		currentItem: { name?: string } | null;
+		audioSrc: string | null;
+	}
+
+	let { currentItem, audioSrc }: Props = $props();
+</script>
+
+<div class="flex flex-1 items-center justify-center p-8">
+	<div class="w-full max-w-md text-center">
+		<Music class="mx-auto mb-4 h-16 w-16 text-white/50" />
+
+		{#if audioSrc}
+			<audio controls class="mb-4 w-full" src={audioSrc}>
+				Your browser does not support the audio element.
+			</audio>
+		{:else}
+			<p class="mb-4 text-white/70">Audio preview not available</p>
+		{/if}
+
+		<p class="text-sm text-white/50">{currentItem?.name || 'Audio'}</p>
+	</div>
+</div>

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemImage.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	interface Props {
+		currentItem: { name?: string } | null;
+		displayPreview: string | undefined;
+	}
+
+	let { currentItem, displayPreview }: Props = $props();
+</script>
+
+{#if displayPreview}
+	<div class="flex flex-1 items-center justify-center">
+		<img
+			src={displayPreview}
+			alt={currentItem?.name || 'preview'}
+			class="max-h-[80vh] max-w-[80vw] rounded-lg object-contain shadow-lg"
+		/>
+	</div>
+{/if}

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemPdf.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import type { ChatAttachmentDisplayItem } from '$lib/types';
+	import { FileText, Eye, Info } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Alert from '$lib/components/ui/alert';
+	import { SyntaxHighlightedCode } from '$lib/components/app';
+	import { getLanguageFromFilename } from '$lib/utils';
+	import { convertPDFToImage } from '$lib/utils/browser-only';
+	import { PdfViewMode } from '$lib/enums';
+
+	interface Props {
+		currentItem: ChatAttachmentDisplayItem | null;
+		displayName: string;
+		displayTextContent: string | undefined;
+		hasVisionModality: boolean;
+		activeModelId?: string;
+	}
+
+	let { currentItem, displayName, displayTextContent, hasVisionModality, activeModelId }: Props =
+		$props();
+
+	let pdfViewMode = $state<PdfViewMode>(PdfViewMode.PAGES);
+	let pdfImages = $state<string[]>([]);
+	let pdfImagesLoading = $state(false);
+	let pdfImagesError = $state<string | null>(null);
+
+	let language = $derived(getLanguageFromFilename(displayName));
+
+	async function loadPdfImages() {
+		if (pdfImages.length > 0 || pdfImagesLoading || !currentItem) return;
+
+		pdfImagesLoading = true;
+		pdfImagesError = null;
+
+		try {
+			let file: File | null = null;
+
+			if (currentItem.uploadedFile?.file) {
+				file = currentItem.uploadedFile.file;
+			} else if (currentItem.attachment) {
+				// Check if we have pre-processed images
+				if (
+					'images' in currentItem.attachment &&
+					currentItem.attachment.images &&
+					Array.isArray(currentItem.attachment.images) &&
+					currentItem.attachment.images.length > 0
+				) {
+					pdfImages = currentItem.attachment.images;
+					return;
+				}
+
+				// Convert base64 back to File for processing
+				if ('base64Data' in currentItem.attachment && currentItem.attachment.base64Data) {
+					const base64Data = currentItem.attachment.base64Data;
+					const byteCharacters = atob(base64Data);
+					const byteNumbers = new Array(byteCharacters.length);
+					for (let i = 0; i < byteCharacters.length; i++) {
+						byteNumbers[i] = byteCharacters.charCodeAt(i);
+					}
+					const byteArray = new Uint8Array(byteNumbers);
+					file = new File([byteArray], displayName, { type: 'application/pdf' });
+				}
+			}
+
+			if (file) {
+				pdfImages = await convertPDFToImage(file);
+			} else {
+				throw new Error('No PDF file available for conversion');
+			}
+		} catch (error) {
+			pdfImagesError = error instanceof Error ? error.message : 'Failed to load PDF images';
+		} finally {
+			pdfImagesLoading = false;
+		}
+	}
+
+	$effect(() => {
+		if (pdfViewMode === PdfViewMode.PAGES) {
+			loadPdfImages();
+		}
+	});
+</script>
+
+<div class="mb-4 flex items-center justify-end gap-2">
+	<Button
+		variant={pdfViewMode === PdfViewMode.TEXT ? 'default' : 'outline'}
+		size="sm"
+		onclick={() => (pdfViewMode = PdfViewMode.TEXT)}
+		disabled={pdfImagesLoading}
+	>
+		<FileText class="mr-1 {ICON_CLASS_DEFAULT}" />
+		Text
+	</Button>
+
+	<Button
+		variant={pdfViewMode === PdfViewMode.PAGES ? 'default' : 'outline'}
+		size="sm"
+		onclick={() => (pdfViewMode = PdfViewMode.PAGES)}
+		disabled={pdfImagesLoading}
+	>
+		{#if pdfImagesLoading}
+			<div
+				class="mr-1 {ICON_CLASS_DEFAULT} animate-spin rounded-full border-2 border-current border-t-transparent"
+			></div>
+		{:else}
+			<Eye class="mr-1 {ICON_CLASS_DEFAULT}" />
+		{/if}
+		Pages
+	</Button>
+</div>
+
+{#if !hasVisionModality && activeModelId && currentItem}
+	<Alert.Root class="mb-4 max-w-4xl">
+		<Info class={ICON_CLASS_DEFAULT} />
+		<Alert.Title>Preview only</Alert.Title>
+		<Alert.Description>
+			<span class="inline-flex">
+				The selected model does not support vision. Only the extracted
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<span
+					class="mx-1 cursor-pointer underline"
+					onclick={() => (pdfViewMode = PdfViewMode.TEXT)}
+				>
+					text
+				</span>
+				will be sent to the model.
+			</span>
+		</Alert.Description>
+	</Alert.Root>
+{/if}
+
+{#if pdfImagesLoading}
+	<div class="flex flex-1 items-center justify-center p-8">
+		<div class="text-center">
+			<div
+				class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-white border-t-transparent"
+			></div>
+			<p class="text-white/70">Converting PDF to images...</p>
+		</div>
+	</div>
+{:else if pdfImagesError}
+	<div class="flex flex-1 items-center justify-center p-8">
+		<div class="text-center">
+			<FileText class="mx-auto mb-4 h-16 w-16 text-white/50" />
+			<p class="mb-4 text-white/70">Failed to load PDF images</p>
+			<p class="text-sm text-white/50">{pdfImagesError}</p>
+		</div>
+	</div>
+{:else if pdfImages.length > 0}
+	{#each pdfImages as image, index (image)}
+		<p class="mb-2 text-sm text-white/50">Page {index + 1}</p>
+		<img src={image} alt="PDF Page {index + 1}" class="mx-auto max-w-[85vw] rounded-lg shadow-lg" />
+		<div class="h-4"></div>
+	{/each}
+{:else}
+	<div class="flex flex-1 items-center justify-center p-8">
+		<div class="text-center">
+			<FileText class="mx-auto mb-4 h-16 w-16 text-white/50" />
+			<p class="text-white/70">No PDF pages available</p>
+		</div>
+	</div>
+{/if}
+
+{#if pdfViewMode === PdfViewMode.TEXT && displayTextContent}
+	<div class="px-4 pb-4">
+		<SyntaxHighlightedCode
+			class="max-w-4xl"
+			code={displayTextContent}
+			{language}
+			maxHeight="none"
+		/>
+	</div>
+{/if}

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemText.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { SyntaxHighlightedCode } from '$lib/components/app';
+
+	interface Props {
+		displayTextContent: string | undefined;
+		language: string;
+	}
+
+	let { displayTextContent, language }: Props = $props();
+</script>
+
+{#if displayTextContent}
+	<div class="px-4 pb-4">
+		<SyntaxHighlightedCode
+			class="max-w-4xl"
+			code={displayTextContent}
+			{language}
+			maxHeight="none"
+		/>
+	</div>
+{/if}

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemUnavailable.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	interface Props {
+		IconComponent: Component;
+	}
+
+	let { IconComponent }: Props = $props();
+</script>
+
+<div class="flex flex-1 items-center justify-center p-8">
+	<div class="text-center">
+		<IconComponent class="mx-auto mb-4 h-16 w-16 text-white/50" />
+
+		<p class="text-white/70">Preview not available for this file type</p>
+	</div>
+</div>

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemVideo.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Video } from '@lucide/svelte';
+
+	interface Props {
+		currentItem: { name?: string } | null;
+		videoSrc: string | null;
+	}
+
+	let { currentItem, videoSrc }: Props = $props();
+</script>
+
+<div class="flex flex-1 items-center justify-center p-8">
+	<div class="w-full max-w-md text-center">
+		<Video class="mx-auto mb-4 h-16 w-16 text-white/50" />
+
+		{#if videoSrc}
+			<video controls class="mb-4 w-full" src={videoSrc}>
+				<track kind="captions" src="" />
+				Your browser does not support the video element.
+			</video>
+		{:else}
+			<p class="mb-4 text-white/70">Video preview not available</p>
+		{/if}
+
+		<p class="text-sm text-white/50">{currentItem?.name || 'Video'}</p>
+	</div>
+</div>

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewFileInfo.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		displayName: string;
+		fileSize: string;
+	}
+
+	let { displayName, fileSize }: Props = $props();
+</script>
+
+<div class="sticky top-0 z-[20] mb-4 rounded-lg bg-black/5 px-4 py-2 text-center backdrop-blur-md">
+	<p class="font-medium text-white">{displayName}</p>
+
+	{#if fileSize}
+		<p class="text-xs text-white/60">{fileSize}</p>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewNavButtons.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		onPrev: () => void;
+		onNext: () => void;
+		show: boolean;
+	}
+
+	let { onPrev, onNext, show }: Props = $props();
+</script>
+
+{#if show}
+	<Button
+		variant="secondary"
+		size="icon"
+		class="absolute top-1/2 left-4 z-10 h-8 w-8 -translate-y-1/2 rounded-full bg-background/5 p-0 text-white!"
+		onclick={onPrev}
+		aria-label="Previous"
+	>
+		<ChevronLeft class="size-4" />
+	</Button>
+
+	<Button
+		variant="secondary"
+		size="icon"
+		class="absolute top-1/2 right-4 z-10 h-8 w-8 -translate-y-1/2 rounded-full bg-background/5 p-0 text-white!"
+		onclick={onNext}
+		aria-label="Next"
+	>
+		<ChevronRight class="size-4" />
+	</Button>
+{/if}

tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewThumbnailStrip.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { Music, Video, FileText } from '@lucide/svelte';
+	import { HorizontalScrollCarousel } from '$lib/components/app/misc';
+
+	interface PreviewItem {
+		id: string;
+		name: string;
+		isImage: boolean;
+		isAudio: boolean;
+		isVideo: boolean;
+		preview?: string;
+	}
+
+	interface Props {
+		items: PreviewItem[];
+		currentIndex: number;
+		onNavigate: (index: number) => void;
+	}
+
+	let { items, currentIndex, onNavigate }: Props = $props();
+
+	function getFileExtension(name: string): string {
+		const parts = name.split('.');
+		if (parts.length > 1) {
+			return parts.pop()?.toUpperCase() ?? '';
+		}
+		return '';
+	}
+</script>
+
+{#if items.length > 1}
+	<div class="sticky bottom-0 z-10 mt-4 flex-shrink-0">
+		<HorizontalScrollCarousel class="max-w-full">
+			{#each items as item, index (item.id)}
+				<button
+					data-thumbnail-index={index}
+					class={[
+						'relative flex-shrink-0 cursor-pointer overflow-hidden rounded border-2 bg-black/80 backdrop-blur-sm transition-all hover:opacity-90',
+						index === currentIndex ? 'border-white' : 'border-transparent opacity-60',
+						'[&:not(:first-child)]:last:mr-4 [&:not(:last-child)]:first:ml-4'
+					]}
+					onclick={() => onNavigate(index)}
+					aria-label={`Go to ${item.name}`}
+				>
+					{#if item.isImage && item.preview}
+						<img src={item.preview} alt={item.name} class="h-12 w-12 object-cover" />
+					{:else}
+						<div
+							class="bg-foreground-muted/50 flex h-12 w-12 flex-col items-center justify-center gap-0.5 py-1"
+						>
+							{#if item.isAudio}
+								<Music class="{ICON_CLASS_DEFAULT} text-white/70" />
+							{:else if item.isVideo}
+								<Video class="{ICON_CLASS_DEFAULT} text-white/70" />
+							{:else}
+								<FileText class="{ICON_CLASS_DEFAULT} text-white/70" />
+							{/if}
+
+							<span class="font-mono text-[9px] text-white/60">{getFileExtension(item.name)}</span>
+						</div>
+					{/if}
+				</button>
+			{/each}
+		</HorizontalScrollCarousel>
+	</div>
+{/if}

tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -0,0 +1,575 @@
+<script lang="ts">
+	import {
+		ChatAttachmentsList,
+		ChatFormActions,
+		ChatFormFileInputInvisible,
+		ChatFormMcpResourcesList,
+		ChatFormPickers,
+		ChatFormTextarea,
+		DialogMcpResourcesBrowser
+	} from '$lib/components/app';
+	import {
+		CLIPBOARD_CONTENT_QUOTE_PREFIX,
+		INPUT_CLASSES,
+		SETTING_CONFIG_DEFAULT,
+		INITIAL_FILE_SIZE,
+		PROMPT_CONTENT_SEPARATOR,
+		PROMPT_TRIGGER_PREFIX,
+		RESOURCE_TRIGGER_PREFIX
+	} from '$lib/constants';
+	import {
+		ContentPartType,
+		FileExtensionText,
+		KeyboardKey,
+		MimeTypeText,
+		SpecialFileType
+	} from '$lib/enums';
+	import { config } from '$lib/stores/settings.svelte';
+	import ContextGaugePopup from './ChatFormContextGauge/ContextGaugePopup.svelte';
+	import { modelOptions, selectedModelId } from '$lib/stores/models.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpHasResourceAttachments } from '$lib/stores/mcp-resources.svelte';
+	import { conversationsStore, activeMessages } from '$lib/stores/conversations.svelte';
+	import type { GetPromptResult, MCPPromptInfo, MCPResourceInfo, PromptMessage } from '$lib/types';
+	import { isIMEComposing, parseClipboardContent, uuid } from '$lib/utils';
+	import {
+		AudioRecorder,
+		convertToWav,
+		createAudioFile,
+		isAudioRecordingSupported
+	} from '$lib/utils/browser-only';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		// Data
+		attachments?: DatabaseMessageExtra[];
+		uploadedFiles?: ChatUploadedFile[];
+		value?: string;
+
+		// UI State
+		class?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		placeholder?: string;
+		showMcpPromptButton?: boolean;
+		showAddButton?: boolean;
+		showModelSelector?: boolean;
+
+		// Event Handlers
+		onAttachmentRemove?: (index: number) => void;
+		onFilesAdd?: (files: File[]) => void;
+		onStop?: () => void;
+		onSubmit?: () => void;
+		onSystemPromptClick?: (draft: { message: string; files: ChatUploadedFile[] }) => void;
+		onUploadedFileRemove?: (fileId: string) => void;
+		onUploadedFilesChange?: (files: ChatUploadedFile[]) => void;
+		onValueChange?: (value: string) => void;
+	}
+
+	let {
+		attachments = [],
+		class: className = '',
+		disabled = false,
+		isLoading = false,
+		placeholder = 'Type a message...',
+		showMcpPromptButton = false,
+		showAddButton = true,
+		showModelSelector = true,
+		uploadedFiles = $bindable([]),
+		value = $bindable(''),
+		onAttachmentRemove,
+		onFilesAdd,
+		onStop,
+		onSubmit,
+		onSystemPromptClick,
+		onUploadedFileRemove,
+		onUploadedFilesChange,
+		onValueChange
+	}: Props = $props();
+
+	// Component References
+	let audioRecorder: AudioRecorder | undefined;
+	let chatFormActionsRef: ChatFormActions | undefined = $state(undefined);
+	let fileInputRef: ChatFormFileInputInvisible | undefined = $state(undefined);
+	let pickersRef: { handleKeydown: (event: KeyboardEvent) => boolean } | undefined =
+		$state(undefined);
+	let textareaRef: ChatFormTextarea | undefined = $state(undefined);
+
+	// Audio Recording State
+	let isRecording = $state(false);
+	let recordingSupported = $state(false);
+
+	// Picker State
+	let isPromptPickerOpen = $state(false);
+	let promptSearchQuery = $state('');
+	let isInlineResourcePickerOpen = $state(false);
+	let resourceSearchQuery = $state('');
+
+	// Resource Dialog State
+	let isResourceDialogOpen = $state(false);
+	let preSelectedResourceUri = $state<string | undefined>(undefined);
+
+	let currentConfig = $derived(config());
+
+	let pasteLongTextToFileLength = $derived.by(() => {
+		const n = Number(currentConfig.pasteLongTextToFileLen);
+		return Number.isNaN(n) ? Number(SETTING_CONFIG_DEFAULT.pasteLongTextToFileLen) : n;
+	});
+
+	let isRouter = $derived(isRouterMode());
+	let conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+	let activeModelId = $derived.by(() => {
+		const options = modelOptions();
+
+		if (!isRouter) {
+			return options.length > 0 ? options[0].model : null;
+		}
+
+		const selectedId = selectedModelId();
+		if (selectedId) {
+			const model = options.find((m) => m.id === selectedId);
+			if (model) return model.model;
+		}
+
+		if (conversationModel) {
+			const model = options.find((m) => m.model === conversationModel);
+			if (model) return model.model;
+		}
+
+		return null;
+	});
+
+	let hasModelSelected = $derived(!isRouter || !!conversationModel || !!selectedModelId());
+	let hasLoadingAttachments = $derived(uploadedFiles.some((f) => f.isLoading));
+	let hasAttachments = $derived(
+		(attachments && attachments.length > 0) || (uploadedFiles && uploadedFiles.length > 0)
+	);
+	let canSubmit = $derived(value.trim().length > 0 || hasAttachments);
+
+	onMount(() => {
+		recordingSupported = isAudioRecordingSupported();
+		audioRecorder = new AudioRecorder();
+	});
+
+	export function focus() {
+		textareaRef?.focus();
+	}
+
+	export function resetTextareaHeight() {
+		textareaRef?.resetHeight();
+	}
+
+	export function openModelSelector() {
+		chatFormActionsRef?.openModelSelector();
+	}
+
+	export function checkModelSelected(): boolean {
+		if (!hasModelSelected) {
+			chatFormActionsRef?.openModelSelector();
+			return false;
+		}
+		return true;
+	}
+
+	function handleFileSelect(files: File[]) {
+		onFilesAdd?.(files);
+	}
+
+	function handleFileUpload() {
+		fileInputRef?.click();
+	}
+
+	function handleFileRemove(fileId: string) {
+		if (fileId.startsWith('attachment-')) {
+			const index = parseInt(fileId.replace('attachment-', ''), 10);
+			if (!isNaN(index) && index >= 0 && index < attachments.length) {
+				onAttachmentRemove?.(index);
+			}
+		} else {
+			onUploadedFileRemove?.(fileId);
+		}
+	}
+
+	function handleInput() {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+		const hasServers = mcpStore.hasEnabledServers(perChatOverrides);
+
+		if (value.startsWith(PROMPT_TRIGGER_PREFIX) && hasServers) {
+			isPromptPickerOpen = true;
+			promptSearchQuery = value.slice(1);
+			isInlineResourcePickerOpen = false;
+			resourceSearchQuery = '';
+		} else if (
+			value.startsWith(RESOURCE_TRIGGER_PREFIX) &&
+			hasServers &&
+			mcpStore.hasResourcesCapability(perChatOverrides)
+		) {
+			isInlineResourcePickerOpen = true;
+			resourceSearchQuery = value.slice(1);
+			isPromptPickerOpen = false;
+			promptSearchQuery = '';
+		} else {
+			isPromptPickerOpen = false;
+			promptSearchQuery = '';
+			isInlineResourcePickerOpen = false;
+			resourceSearchQuery = '';
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (pickersRef?.handleKeydown(event)) {
+			return;
+		}
+
+		if (event.key === KeyboardKey.ESCAPE && isPromptPickerOpen) {
+			isPromptPickerOpen = false;
+			promptSearchQuery = '';
+			return;
+		}
+
+		if (event.key === KeyboardKey.ESCAPE && isInlineResourcePickerOpen) {
+			isInlineResourcePickerOpen = false;
+			resourceSearchQuery = '';
+			return;
+		}
+
+		if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
+			const isModifier = event.ctrlKey || event.metaKey;
+			const sendOnEnter = currentConfig.sendOnEnter !== false;
+
+			if (sendOnEnter || isModifier) {
+				event.preventDefault();
+
+				if (!canSubmit || disabled || hasLoadingAttachments) return;
+
+				onSubmit?.();
+			}
+		}
+	}
+
+	function handlePaste(event: ClipboardEvent) {
+		if (!event.clipboardData) return;
+
+		const files = Array.from(event.clipboardData.items)
+			.filter((item) => item.kind === 'file')
+			.map((item) => item.getAsFile())
+			.filter((file): file is File => file !== null);
+
+		if (files.length > 0) {
+			event.preventDefault();
+			onFilesAdd?.(files);
+			return;
+		}
+
+		const text = event.clipboardData.getData(MimeTypeText.PLAIN);
+
+		if (text.startsWith(CLIPBOARD_CONTENT_QUOTE_PREFIX)) {
+			const parsed = parseClipboardContent(text);
+
+			if (parsed.textAttachments.length > 0 || parsed.mcpPromptAttachments.length > 0) {
+				event.preventDefault();
+				value = parsed.message;
+				onValueChange?.(parsed.message);
+
+				// Handle text attachments as files
+				if (parsed.textAttachments.length > 0) {
+					const attachmentFiles = parsed.textAttachments.map(
+						(att) =>
+							new File([att.content], att.name, {
+								type: MimeTypeText.PLAIN
+							})
+					);
+					onFilesAdd?.(attachmentFiles);
+				}
+
+				// Handle MCP prompt attachments as ChatUploadedFile with mcpPrompt data
+				if (parsed.mcpPromptAttachments.length > 0) {
+					const mcpPromptFiles: ChatUploadedFile[] = parsed.mcpPromptAttachments.map((att) => ({
+						id: uuid(),
+						name: att.name,
+						size: att.content.length,
+						type: SpecialFileType.MCP_PROMPT,
+						file: new File([att.content], `${att.name}${FileExtensionText.TXT}`, {
+							type: MimeTypeText.PLAIN
+						}),
+						isLoading: false,
+						textContent: att.content,
+						mcpPrompt: {
+							serverName: att.serverName,
+							promptName: att.promptName,
+							arguments: att.arguments
+						}
+					}));
+
+					uploadedFiles = [...uploadedFiles, ...mcpPromptFiles];
+					onUploadedFilesChange?.(uploadedFiles);
+				}
+
+				setTimeout(() => {
+					textareaRef?.focus();
+				}, 10);
+
+				return;
+			}
+		}
+
+		if (
+			text.length > 0 &&
+			pasteLongTextToFileLength > 0 &&
+			text.length > pasteLongTextToFileLength
+		) {
+			event.preventDefault();
+
+			const textFile = new File([text], 'Pasted', {
+				type: MimeTypeText.PLAIN
+			});
+
+			onFilesAdd?.([textFile]);
+		}
+	}
+
+	function handlePromptLoadStart(
+		placeholderId: string,
+		promptInfo: MCPPromptInfo,
+		args?: Record<string, string>
+	) {
+		// Only clear the value if the prompt was triggered by typing '/'
+		if (value.startsWith(PROMPT_TRIGGER_PREFIX)) {
+			value = '';
+			onValueChange?.('');
+		}
+		isPromptPickerOpen = false;
+		promptSearchQuery = '';
+
+		const promptName = promptInfo.title || promptInfo.name;
+		const placeholder: ChatUploadedFile = {
+			id: placeholderId,
+			name: promptName,
+			size: INITIAL_FILE_SIZE,
+			type: SpecialFileType.MCP_PROMPT,
+			file: new File([], 'loading'),
+			isLoading: true,
+			mcpPrompt: {
+				serverName: promptInfo.serverName,
+				promptName: promptInfo.name,
+				arguments: args ? { ...args } : undefined
+			}
+		};
+
+		uploadedFiles = [...uploadedFiles, placeholder];
+		onUploadedFilesChange?.(uploadedFiles);
+		textareaRef?.focus();
+	}
+
+	function handlePromptLoadComplete(placeholderId: string, result: GetPromptResult) {
+		const promptText = result.messages
+			?.map((msg: PromptMessage) => {
+				if (typeof msg.content === 'string') {
+					return msg.content;
+				}
+
+				if (msg.content.type === ContentPartType.TEXT) {
+					return msg.content.text;
+				}
+
+				return '';
+			})
+			.filter(Boolean)
+			.join(PROMPT_CONTENT_SEPARATOR);
+
+		uploadedFiles = uploadedFiles.map((f) =>
+			f.id === placeholderId
+				? {
+						...f,
+						isLoading: false,
+						textContent: promptText,
+						size: promptText.length,
+						file: new File([promptText], `${f.name}${FileExtensionText.TXT}`, {
+							type: MimeTypeText.PLAIN
+						})
+					}
+				: f
+		);
+		onUploadedFilesChange?.(uploadedFiles);
+	}
+
+	function handlePromptLoadError(placeholderId: string, error: string) {
+		uploadedFiles = uploadedFiles.map((f) =>
+			f.id === placeholderId ? { ...f, isLoading: false, loadError: error } : f
+		);
+		onUploadedFilesChange?.(uploadedFiles);
+	}
+
+	function handlePromptPickerClose() {
+		isPromptPickerOpen = false;
+		promptSearchQuery = '';
+		textareaRef?.focus();
+	}
+
+	function handleInlineResourcePickerClose() {
+		isInlineResourcePickerOpen = false;
+		resourceSearchQuery = '';
+		textareaRef?.focus();
+	}
+
+	function handleInlineResourceSelect() {
+		if (value.startsWith(RESOURCE_TRIGGER_PREFIX)) {
+			value = '';
+			onValueChange?.('');
+		}
+
+		isInlineResourcePickerOpen = false;
+		resourceSearchQuery = '';
+		textareaRef?.focus();
+	}
+
+	function handleBrowseResources() {
+		isInlineResourcePickerOpen = false;
+		resourceSearchQuery = '';
+
+		if (value.startsWith(RESOURCE_TRIGGER_PREFIX)) {
+			value = '';
+			onValueChange?.('');
+		}
+
+		isResourceDialogOpen = true;
+	}
+
+	async function handleMicClick() {
+		if (!audioRecorder || !recordingSupported) {
+			console.warn('Audio recording not supported');
+			return;
+		}
+
+		if (isRecording) {
+			isRecording = false;
+			try {
+				const audioBlob = await audioRecorder.stopRecording();
+				const wavBlob = await convertToWav(audioBlob);
+				const audioFile = createAudioFile(wavBlob);
+
+				onFilesAdd?.([audioFile]);
+			} catch (error) {
+				console.error('Failed to stop recording:', error);
+			}
+		} else {
+			try {
+				await audioRecorder.startRecording();
+				isRecording = true;
+			} catch (error) {
+				console.error('Failed to start recording:', error);
+			}
+		}
+	}
+</script>
+
+<ChatFormFileInputInvisible bind:this={fileInputRef} onFileSelect={handleFileSelect} />
+
+<form
+	class="relative {className}"
+	onsubmit={(event) => {
+		event.preventDefault();
+
+		if (!canSubmit || disabled || hasLoadingAttachments) return;
+
+		onSubmit?.();
+	}}
+>
+	<ChatFormPickers
+		bind:this={pickersRef}
+		{isPromptPickerOpen}
+		{promptSearchQuery}
+		{isInlineResourcePickerOpen}
+		{resourceSearchQuery}
+		onPromptPickerClose={handlePromptPickerClose}
+		onInlineResourcePickerClose={handleInlineResourcePickerClose}
+		onInlineResourceSelect={handleInlineResourceSelect}
+		onPromptLoadStart={handlePromptLoadStart}
+		onPromptLoadComplete={handlePromptLoadComplete}
+		onPromptLoadError={handlePromptLoadError}
+		onInlineResourceBrowse={handleBrowseResources}
+	/>
+
+	<div
+		class="{INPUT_CLASSES} overflow-hidden rounded-4xl md:rounded-3xl backdrop-blur-md {disabled
+			? 'cursor-not-allowed opacity-60'
+			: ''}"
+		data-slot="input-area"
+	>
+		<ChatAttachmentsList
+			{attachments}
+			bind:uploadedFiles
+			onFileRemove={handleFileRemove}
+			limitToSingleRow
+			class="py-5"
+			style="scroll-padding: 1rem;"
+			activeModelId={activeModelId ?? undefined}
+		/>
+
+		<div
+			class="flex-column relative min-h-12 items-center rounded-4xl md:rounded-3xl py-2 pb-2.25 shadow-sm transition-all focus-within:shadow-md md:py-3!"
+			onpaste={handlePaste}
+		>
+			<ChatFormTextarea
+				class="px-5 py-1.5 md:pt-0"
+				bind:this={textareaRef}
+				bind:value
+				onKeydown={handleKeydown}
+				onInput={() => {
+					handleInput();
+					onValueChange?.(value);
+				}}
+				{disabled}
+				{placeholder}
+			/>
+
+			{#if mcpHasResourceAttachments()}
+				<ChatFormMcpResourcesList
+					class="mb-3"
+					onResourceClick={(uri) => {
+						preSelectedResourceUri = uri;
+						isResourceDialogOpen = true;
+					}}
+				/>
+			{/if}
+
+			<ChatFormActions
+				class="px-3"
+				bind:this={chatFormActionsRef}
+				canSend={canSubmit}
+				{disabled}
+				{isLoading}
+				isReasoning={chatStore.isReasoning}
+				{isRecording}
+				{showAddButton}
+				{showModelSelector}
+				{uploadedFiles}
+				onFileUpload={handleFileUpload}
+				onMicClick={handleMicClick}
+				{onStop}
+				onSystemPromptClick={() => onSystemPromptClick?.({ message: value, files: uploadedFiles })}
+				onMcpPromptClick={showMcpPromptButton ? () => (isPromptPickerOpen = true) : undefined}
+				onMcpResourcesClick={() => (isResourceDialogOpen = true)}
+			/>
+		</div>
+	</div>
+
+	<ContextGaugePopup />
+</form>
+
+<DialogMcpResourcesBrowser
+	bind:open={isResourceDialogOpen}
+	preSelectedUri={preSelectedResourceUri}
+	onAttach={(resource: MCPResourceInfo) => {
+		mcpStore.attachResource(resource.uri);
+	}}
+	onOpenChange={(newOpen: boolean) => {
+		if (!newOpen) {
+			preSelectedResourceUri = undefined;
+		}
+	}}
+/>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { Plus } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ATTACHMENT_TOOLTIP_TEXT } from '$lib/constants';
+
+	interface Props {
+		disabled?: boolean;
+		onclick?: (e: MouseEvent) => void;
+	}
+
+	let { disabled = false, onclick }: Props = $props();
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger class="w-full">
+		<Button
+			class="file-upload-button md:h-8 md:w-8 h-9 w-9 rounded-full p-0"
+			{disabled}
+			{onclick}
+			variant="secondary"
+			type="button"
+		>
+			<span class="sr-only">{ATTACHMENT_TOOLTIP_TEXT}</span>
+
+			<Plus class={ICON_CLASS_DEFAULT} />
+		</Button>
+	</Tooltip.Trigger>
+
+	<Tooltip.Content>
+		<p>{ATTACHMENT_TOOLTIP_TEXT}</p>
+	</Tooltip.Content>
+</Tooltip.Root>

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

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { Plus, File, MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { buttonVariants } from '$lib/components/ui/button';
+	import { cn } from '$lib/components/ui/utils';
+	import {
+		ATTACHMENT_FILE_ITEMS,
+		ATTACHMENT_TOOLTIP_TEXT,
+		TOOLTIP_DELAY_DURATION
+	} from '$lib/constants';
+	import {
+		ChatFormActionAddToolsSubmenu,
+		ChatFormActionAddMcpServersSubmenu,
+		ChatFormActionAddReasoningSubmenu
+	} from '$lib/components/app';
+	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		hasAudioModality?: boolean;
+		hasVideoModality?: boolean;
+		hasVisionModality?: boolean;
+		hasMcpPromptsSupport?: boolean;
+		hasMcpResourcesSupport?: boolean;
+		onFileUpload?: () => void;
+		onSystemPromptClick?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpSettingsClick?: () => void;
+		onMcpResourcesClick?: () => void;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hasAudioModality = false,
+		hasVideoModality = false,
+		hasVisionModality = false,
+		hasMcpPromptsSupport = false,
+		hasMcpResourcesSupport = false,
+		onFileUpload,
+		onSystemPromptClick,
+		onMcpPromptClick,
+		onMcpSettingsClick,
+		onMcpResourcesClick
+	}: Props = $props();
+
+	let dropdownOpen = $state(false);
+
+	function handleMcpSettingsClick() {
+		dropdownOpen = false;
+		onMcpSettingsClick?.();
+	}
+
+	const attachmentMenu = useAttachmentMenu(
+		() => ({
+			hasVisionModality,
+			hasAudioModality,
+			hasVideoModality,
+			hasMcpPromptsSupport,
+			hasMcpResourcesSupport
+		}),
+		() => ({ onFileUpload, onSystemPromptClick, onMcpPromptClick, onMcpResourcesClick }),
+		() => {
+			dropdownOpen = false;
+		}
+	);
+</script>
+
+<div class="flex items-center gap-1 {className}">
+	<DropdownMenu.Root bind:open={dropdownOpen}>
+		<!-- ignoreNonKeyboardFocus prevents the tooltip from flashing when the
+		     menu closes and focus returns to the trigger -->
+		<Tooltip.Root ignoreNonKeyboardFocus>
+			<Tooltip.Trigger>
+				{#snippet child({ props })}
+					<DropdownMenu.Trigger
+						{...props}
+						class={cn(
+							buttonVariants({ variant: 'secondary' }),
+							'file-upload-button h-8 w-8 cursor-pointer rounded-full p-0'
+						)}
+						{disabled}
+					>
+						<span class="sr-only">{ATTACHMENT_TOOLTIP_TEXT}</span>
+
+						<Plus class={ICON_CLASS_DEFAULT} />
+					</DropdownMenu.Trigger>
+				{/snippet}
+			</Tooltip.Trigger>
+
+			<Tooltip.Content>
+				<p>{ATTACHMENT_TOOLTIP_TEXT}</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+
+		<DropdownMenu.Content align="start" class="w-52">
+			<ChatFormActionAddReasoningSubmenu />
+
+			<DropdownMenu.Separator />
+
+			<DropdownMenu.Sub>
+				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+					<File class={ICON_CLASS_DEFAULT} />
+
+					<span>Add files</span>
+				</DropdownMenu.SubTrigger>
+
+				<DropdownMenu.SubContent class="w-48">
+					{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
+						{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
+						{#if enabled}
+							<DropdownMenu.Item
+								class="{item.class ?? ''} flex cursor-pointer items-center gap-2"
+								onclick={() => attachmentMenu.callbacks[item.action]()}
+							>
+								<item.icon class={ICON_CLASS_DEFAULT} />
+
+								<span>{item.label}</span>
+							</DropdownMenu.Item>
+						{:else if item.disabledTooltip}
+							<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+								<Tooltip.Trigger tabindex={-1}>
+									{#snippet child({ props })}
+										<div {...props} class="cursor-default">
+											<DropdownMenu.Item
+												class="{item.class ?? ''} flex items-center gap-2"
+												disabled
+											>
+												<item.icon class={ICON_CLASS_DEFAULT} />
+
+												<span>{item.label}</span>
+											</DropdownMenu.Item>
+										</div>
+									{/snippet}
+								</Tooltip.Trigger>
+
+								<Tooltip.Content side="right">
+									<p>{item.disabledTooltip}</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						{/if}
+					{/each}
+				</DropdownMenu.SubContent>
+			</DropdownMenu.Sub>
+
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={onSystemPromptClick}
+			>
+				<MessageSquare class={ICON_CLASS_DEFAULT} />
+
+				<span>System Message</span>
+			</DropdownMenu.Item>
+
+			<ChatFormActionAddToolsSubmenu />
+
+			<ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
+
+			{#if hasMcpPromptsSupport}
+				<DropdownMenu.Separator />
+
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={onMcpPromptClick}
+				>
+					<Zap class={ICON_CLASS_DEFAULT} />
+
+					<span>MCP Prompt</span>
+				</DropdownMenu.Item>
+			{/if}
+
+			{#if hasMcpResourcesSupport}
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={onMcpResourcesClick}
+				>
+					<FolderOpen class={ICON_CLASS_DEFAULT} />
+
+					<span>MCP Resources</span>
+				</DropdownMenu.Item>
+			{/if}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+</div>

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

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { Settings, Plus } from '@lucide/svelte';
+	import { Switch } from '$lib/components/ui/switch';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { McpLogo, DropdownMenuSearchable, McpServerIdentity } from '$lib/components/app';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { HealthCheckStatus } from '$lib/enums';
+	import type { MCPServerSettingsEntry } from '$lib/types';
+	import { goto } from '$app/navigation';
+	import { ROUTES } from '$lib/constants/routes';
+
+	interface Props {
+		onMcpSettingsClick?: () => void;
+	}
+
+	let { onMcpSettingsClick }: Props = $props();
+
+	let mcpSearchQuery = $state('');
+	// Every configured server is listed; `enabled` is an on/off state,
+	// not a visibility filter, so a disabled server stays toggleable.
+	let mcpServers = $derived(mcpStore.getServers());
+	let hasMcpServers = $derived(mcpServers.length > 0);
+	let filteredMcpServers = $derived.by(() => {
+		const query = mcpSearchQuery.toLowerCase().trim();
+		if (!query) return mcpServers;
+		return mcpServers.filter((s) => {
+			const name = getServerLabel(s).toLowerCase();
+			const url = s.url.toLowerCase();
+			return name.includes(query) || url.includes(query);
+		});
+	});
+
+	function getServerLabel(server: MCPServerSettingsEntry): string {
+		return mcpStore.getServerLabel(server);
+	}
+
+	function isServerEnabledForChat(serverId: string): boolean {
+		return conversationsStore.isMcpServerEnabledForChat(serverId);
+	}
+
+	async function toggleServerForChat(serverId: string) {
+		await conversationsStore.toggleMcpServerForChat(serverId);
+	}
+
+	function handleMcpSubMenuOpen(open: boolean) {
+		if (open) {
+			mcpSearchQuery = '';
+			mcpStore.runHealthChecksForServers(mcpServers);
+		}
+	}
+
+	function handleMcpSettingsClick() {
+		onMcpSettingsClick?.();
+
+		goto(`${hasMcpServers ? '' : '?add'}${ROUTES.MCP_SERVERS}`);
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Sub onOpenChange={handleMcpSubMenuOpen}>
+		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+			<McpLogo class={ICON_CLASS_DEFAULT} />
+
+			<span>MCP Servers</span>
+		</DropdownMenu.SubTrigger>
+
+		<DropdownMenu.SubContent class="w-72 pt-0">
+			{#if hasMcpServers}
+				<DropdownMenuSearchable
+					placeholder="Search servers..."
+					bind:searchValue={mcpSearchQuery}
+					emptyMessage="No servers found"
+					isEmpty={filteredMcpServers.length === 0}
+				>
+					<div class="max-h-64 overflow-y-auto">
+						{#each filteredMcpServers as server (server.id)}
+							{@const healthState = mcpStore.getHealthCheckState(server.id)}
+							{@const hasError = healthState.status === HealthCheckStatus.ERROR}
+							{@const isEnabledForChat = isServerEnabledForChat(server.id)}
+							{@const displayName = getServerLabel(server)}
+							{@const faviconUrl = mcpStore.getServerFavicon(server.id)}
+
+							<button
+								type="button"
+								class="flex w-full items-center justify-between gap-2 rounded-sm px-2 py-2 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+								onclick={() => !hasError && toggleServerForChat(server.id)}
+								disabled={hasError}
+							>
+								<div class="flex min-w-0 flex-1 items-center gap-2">
+									<div class="min-w-0 flex-1">
+										<McpServerIdentity
+											{displayName}
+											{faviconUrl}
+											iconClass={ICON_CLASS_DEFAULT}
+											iconRounded="rounded-sm"
+											showVersion={false}
+											nameClass="text-sm"
+										/>
+									</div>
+
+									{#if hasError}
+										<span
+											class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
+										>
+											Error
+										</span>
+									{/if}
+								</div>
+
+								<Switch
+									checked={isEnabledForChat}
+									disabled={hasError}
+									onclick={(e) => e.stopPropagation()}
+									onCheckedChange={() => toggleServerForChat(server.id)}
+								/>
+							</button>
+						{/each}
+					</div>
+
+					{#snippet footer()}
+						<DropdownMenu.Item
+							class="flex cursor-pointer items-center gap-2"
+							onclick={handleMcpSettingsClick}
+						>
+							<Settings class={ICON_CLASS_DEFAULT} />
+
+							<span>Manage MCP Servers</span>
+						</DropdownMenu.Item>
+					{/snippet}
+				</DropdownMenuSearchable>
+			{:else}
+				<div class="px-2 py-3 text-center text-sm text-muted-foreground">
+					No MCP servers configured
+				</div>
+
+				<DropdownMenu.Separator />
+
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={handleMcpSettingsClick}
+				>
+					<Plus class={ICON_CLASS_DEFAULT} />
+
+					<span>Add MCP Servers</span>
+				</DropdownMenu.Item>
+			{/if}
+		</DropdownMenu.SubContent>
+	</DropdownMenu.Sub>
+</DropdownMenu.Root>

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { Lightbulb, LightbulbOff, Check, Info } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { useReasoningMenu } from '$lib/hooks/use-reasoning-menu.svelte';
+
+	const reasoning = useReasoningMenu();
+</script>
+
+{#if reasoning.modelSupportsThinking}
+	<DropdownMenu.Sub>
+		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+			{#if reasoning.thinkingEnabled}
+				<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
+			{:else if reasoning.isOff}
+				<LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+			{:else}
+				<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+			{/if}
+
+			<span
+				class="text-sm inline-flex gap-2 {!reasoning.thinkingEnabled
+					? 'text-muted-foreground'
+					: ''}"
+			>
+				Reasoning
+
+				<span class="capitalize text-muted-foreground">
+					{reasoning.currentEffort}
+				</span>
+			</span>
+		</DropdownMenu.SubTrigger>
+
+		<DropdownMenu.SubContent
+			class="w-60 bg-popover p-1.5 text-popover-foreground shadow-md outline-none"
+		>
+			{#each reasoning.levels as level (level.value)}
+				{@const tokenLabel = reasoning.tokenLabel(level)}
+				<DropdownMenu.Item
+					class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent {reasoning.isSelected(
+						level
+					)
+						? 'bg-accent'
+						: ''}"
+					onclick={() => reasoning.select(level)}
+				>
+					{#if reasoning.isSelected(level)}
+						<Check class="{ICON_CLASS_DEFAULT} shrink-0 text-foreground" />
+					{:else}
+						<div class="{ICON_CLASS_DEFAULT} shrink-0"></div>
+					{/if}
+
+					<span class="flex-1">{level.label}</span>
+
+					{#if tokenLabel}
+						<span class="text-[11px] text-muted-foreground opacity-60">
+							{tokenLabel}
+						</span>
+					{/if}
+
+					{#if level.hasInfo}
+						<Tooltip.Root>
+							<Tooltip.Trigger>
+								<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+							</Tooltip.Trigger>
+							<Tooltip.Content side="left">
+								<p>Maximum reasoning effort with extended context usage</p>
+							</Tooltip.Content>
+						</Tooltip.Root>
+					{/if}
+				</DropdownMenu.Item>
+			{/each}
+		</DropdownMenu.SubContent>
+	</DropdownMenu.Sub>
+{/if}

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

@@ -0,0 +1,378 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import type { Snippet } from 'svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { File, MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
+	import { Switch } from '$lib/components/ui/switch';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { TOOLTIP_DELAY_DURATION } from '$lib/constants';
+	import { ATTACHMENT_FILE_ITEMS } from '$lib/constants/attachment-menu';
+	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
+	import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';
+	import { useReasoningMenu } from '$lib/hooks/use-reasoning-menu.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { McpLogo } from '$lib/components/app';
+	import {
+		PencilRuler,
+		ChevronDown,
+		ChevronRight,
+		Lightbulb,
+		LightbulbOff,
+		Check
+	} from '@lucide/svelte';
+	import { HealthCheckStatus } from '$lib/enums';
+	import { AttachmentAction } from '$lib/enums/attachment.enums';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		hasAudioModality?: boolean;
+		hasVideoModality?: boolean;
+		hasVisionModality?: boolean;
+		hasMcpPromptsSupport?: boolean;
+		hasMcpResourcesSupport?: boolean;
+		onFileUpload?: () => void;
+		onSystemPromptClick?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpResourcesClick?: () => void;
+		trigger: Snippet<[{ disabled: boolean; onclick?: () => void }]>;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hasAudioModality = false,
+		hasVisionModality = false,
+		hasVideoModality = false,
+		hasMcpPromptsSupport = false,
+		hasMcpResourcesSupport = false,
+		onFileUpload,
+		onSystemPromptClick,
+		onMcpPromptClick,
+		onMcpResourcesClick,
+		trigger
+	}: Props = $props();
+
+	let sheetOpen = $state(false);
+	let reasoningExpanded = $state(false);
+	let filesExpanded = $state(true);
+	let toolsExpanded = $state(false);
+	let mcpExpanded = $state(false);
+
+	const attachmentMenu = useAttachmentMenu(
+		() => ({
+			hasVisionModality,
+			hasAudioModality,
+			hasVideoModality,
+			hasMcpPromptsSupport,
+			hasMcpResourcesSupport
+		}),
+		() => ({ onFileUpload, onSystemPromptClick, onMcpPromptClick, onMcpResourcesClick }),
+		() => {
+			sheetOpen = false;
+		}
+	);
+
+	const toolsPanel = useToolsPanel();
+	const reasoning = useReasoningMenu();
+
+	const sheetItemClass =
+		'flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent active:bg-accent disabled:cursor-not-allowed disabled:opacity-50';
+
+	const sheetItemRowClass =
+		'flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-accent';
+
+	let mcpServers = $derived(mcpStore.getServers());
+</script>
+
+<div class="flex items-center gap-1 {className}">
+	<Sheet.Root bind:open={sheetOpen}>
+		{@render trigger({ disabled, onclick: () => (sheetOpen = true) })}
+
+		<Sheet.Content side="bottom" class="max-h-[85vh] gap-0 overflow-y-auto">
+			<Sheet.Header>
+				<Sheet.Title>Add to chat</Sheet.Title>
+
+				<Sheet.Description class="sr-only">
+					Add files, system prompt or configure MCP servers
+				</Sheet.Description>
+			</Sheet.Header>
+
+			<div class="flex flex-col gap-1 px-1.5 pb-2">
+				{#if reasoning.modelSupportsThinking}
+					<Collapsible.Root
+						open={reasoningExpanded}
+						onOpenChange={(open) => (reasoningExpanded = open)}
+					>
+						<Collapsible.Trigger class={sheetItemClass}>
+							{#if reasoningExpanded}
+								<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0" />
+							{:else}
+								<ChevronRight class="{ICON_CLASS_DEFAULT} shrink-0" />
+							{/if}
+
+							{#if reasoning.thinkingEnabled}
+								<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
+							{:else if reasoning.isOff}
+								<LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+							{:else}
+								<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+							{/if}
+
+							<span class="flex-1">Reasoning</span>
+
+							<span class="text-xs capitalize text-muted-foreground">
+								{reasoning.currentEffort}
+							</span>
+						</Collapsible.Trigger>
+
+						<Collapsible.Content>
+							<div class="flex flex-col gap-0.5 pl-4">
+								{#each reasoning.levels as level (level.value)}
+									{@const tokenLabel = reasoning.tokenLabel(level)}
+									<button
+										type="button"
+										class={sheetItemRowClass}
+										class:bg-accent={reasoning.isSelected(level)}
+										onclick={() => reasoning.select(level)}
+									>
+										<div class="flex min-w-0 items-center gap-3">
+											{#if reasoning.isSelected(level)}
+												<Check class="{ICON_CLASS_DEFAULT} shrink-0 text-foreground" />
+											{:else}
+												<div class="{ICON_CLASS_DEFAULT} shrink-0"></div>
+											{/if}
+
+											<span class="text-sm">{level.label}</span>
+										</div>
+
+										{#if tokenLabel}
+											<span class="shrink-0 text-[11px] text-muted-foreground opacity-60">
+												{tokenLabel}
+											</span>
+										{/if}
+									</button>
+								{/each}
+							</div>
+						</Collapsible.Content>
+					</Collapsible.Root>
+				{/if}
+
+				<Collapsible.Root open={filesExpanded} onOpenChange={(open) => (filesExpanded = open)}>
+					<Collapsible.Trigger class={sheetItemClass}>
+						{#if filesExpanded}
+							<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0" />
+						{:else}
+							<ChevronRight class="{ICON_CLASS_DEFAULT} shrink-0" />
+						{/if}
+
+						<File class="{ICON_CLASS_DEFAULT} shrink-0" />
+
+						<span class="flex-1">Add files</span>
+					</Collapsible.Trigger>
+
+					<Collapsible.Content>
+						<div class="flex flex-col gap-0.5 pl-4">
+							{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
+								{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
+								{#if enabled}
+									<button
+										type="button"
+										class={sheetItemClass}
+										onclick={() => attachmentMenu.callbacks[item.action]()}
+									>
+										<item.icon class="{ICON_CLASS_DEFAULT} shrink-0" />
+
+										<span>{item.label}</span>
+									</button>
+								{:else if item.disabledTooltip}
+									<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+										<Tooltip.Trigger>
+											<button type="button" class={sheetItemClass} disabled>
+												<item.icon class="{ICON_CLASS_DEFAULT} shrink-0" />
+
+												<span>{item.label}</span>
+											</button>
+										</Tooltip.Trigger>
+
+										<Tooltip.Content side="right">
+											<p>{item.disabledTooltip}</p>
+										</Tooltip.Content>
+									</Tooltip.Root>
+								{/if}
+							{/each}
+						</div>
+					</Collapsible.Content>
+				</Collapsible.Root>
+
+				<Collapsible.Root open={mcpExpanded} onOpenChange={(open) => (mcpExpanded = open)}>
+					<Collapsible.Trigger class={sheetItemClass}>
+						{#if mcpExpanded}
+							<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0" />
+						{:else}
+							<ChevronRight class="{ICON_CLASS_DEFAULT} shrink-0" />
+						{/if}
+
+						<McpLogo class="inline {ICON_CLASS_DEFAULT} shrink-0" />
+
+						<span class="flex-1">MCP Servers</span>
+
+						<span class="text-xs text-muted-foreground">
+							{mcpServers.length} server{mcpServers.length !== 1 ? 's' : ''}
+						</span>
+					</Collapsible.Trigger>
+
+					<Collapsible.Content>
+						<div class="flex flex-col gap-0.5 pl-4">
+							{#each mcpServers as server (server.id)}
+								{@const healthState = mcpStore.getHealthCheckState(server.id)}
+								{@const hasError = healthState.status === HealthCheckStatus.ERROR}
+								{@const displayName = mcpStore.getServerLabel(server)}
+								{@const faviconUrl = mcpStore.getServerFavicon(server.id)}
+								{@const isEnabled = conversationsStore.isMcpServerEnabledForChat(server.id)}
+
+								<button
+									type="button"
+									class={sheetItemRowClass}
+									onclick={() => !hasError && conversationsStore.toggleMcpServerForChat(server.id)}
+									disabled={hasError}
+								>
+									<div class="flex min-w-0 flex-1 items-center gap-2">
+										{#if faviconUrl}
+											<img
+												src={faviconUrl}
+												alt=""
+												class="{ICON_CLASS_DEFAULT} shrink-0 rounded-sm"
+												onerror={(e) => {
+													(e.currentTarget as HTMLImageElement).style.display = 'none';
+												}}
+											/>
+										{/if}
+
+										<span class="min-w-0 truncate text-sm">{displayName}</span>
+									</div>
+
+									{#if hasError}
+										<span
+											class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
+										>
+											Error
+										</span>
+									{:else}
+										<Switch
+											checked={isEnabled}
+											onCheckedChange={() => conversationsStore.toggleMcpServerForChat(server.id)}
+										/>
+									{/if}
+								</button>
+							{/each}
+
+							{#if mcpServers.length === 0}
+								<div class="px-3 py-2 text-center text-sm text-muted-foreground">
+									No MCP servers configured
+								</div>
+							{/if}
+						</div>
+					</Collapsible.Content>
+				</Collapsible.Root>
+
+				{#if toolsPanel.totalToolCount > 0}
+					<Collapsible.Root open={toolsExpanded} onOpenChange={(open) => (toolsExpanded = open)}>
+						<Collapsible.Trigger class={sheetItemClass}>
+							{#if toolsExpanded}
+								<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0" />
+							{:else}
+								<ChevronRight class="{ICON_CLASS_DEFAULT} shrink-0" />
+							{/if}
+
+							<PencilRuler class="inline {ICON_CLASS_DEFAULT} shrink-0" />
+
+							<span class="flex-1">Tools</span>
+
+							<span class="text-xs text-muted-foreground">
+								{toolsPanel.totalToolCount} tool{toolsPanel.totalToolCount !== 1 ? 's' : ''}
+							</span>
+						</Collapsible.Trigger>
+
+						<Collapsible.Content>
+							<div class="flex flex-col gap-0.5 pl-4">
+								{#each toolsPanel.activeGroups as group (group.key)}
+									{@const checked = toolsPanel.isGroupChecked(group)}
+									{@const enabledCount = toolsPanel.getEnabledToolCount(group)}
+									{@const favicon = toolsPanel.getFavicon(group)}
+
+									<button
+										type="button"
+										class={sheetItemRowClass}
+										onclick={() => toolsPanel.toggleGroupByKey(group.key)}
+									>
+										{#if favicon}
+											<img
+												src={favicon}
+												alt=""
+												class="{ICON_CLASS_DEFAULT} shrink-0 rounded-sm"
+												onerror={(e) => {
+													(e.currentTarget as HTMLImageElement).style.display = 'none';
+												}}
+											/>
+										{/if}
+
+										<span class="min-w-0 flex-1 truncate text-sm font-medium">{group.label}</span>
+
+										<span class="shrink-0 text-xs text-muted-foreground">
+											{enabledCount}/{group.tools.length}
+										</span>
+
+										<Checkbox
+											{checked}
+											class="{ICON_CLASS_DEFAULT} shrink-0"
+											onclick={(e) => e.stopPropagation()}
+											onCheckedChange={() => toolsPanel.toggleGroupByKey(group.key)}
+										/>
+									</button>
+								{/each}
+							</div>
+						</Collapsible.Content>
+					</Collapsible.Root>
+				{/if}
+
+				<button
+					type="button"
+					class={sheetItemClass}
+					onclick={() => attachmentMenu.callbacks[AttachmentAction.SYSTEM_PROMPT_CLICK]()}
+				>
+					<MessageSquare class="{ICON_CLASS_DEFAULT} shrink-0" />
+
+					<span>System Message</span>
+				</button>
+
+				{#if hasMcpPromptsSupport}
+					<button
+						type="button"
+						class={sheetItemClass}
+						onclick={() => attachmentMenu.callbacks[AttachmentAction.MCP_PROMPT_CLICK]()}
+					>
+						<Zap class="{ICON_CLASS_DEFAULT} shrink-0" />
+
+						<span>MCP Prompt</span>
+					</button>
+				{/if}
+
+				{#if hasMcpResourcesSupport}
+					<button
+						type="button"
+						class={sheetItemClass}
+						onclick={() => attachmentMenu.callbacks[AttachmentAction.MCP_RESOURCES_CLICK]()}
+					>
+						<FolderOpen class="{ICON_CLASS_DEFAULT} shrink-0" />
+
+						<span>MCP Resources</span>
+					</button>
+				{/if}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+</div>

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	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';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { CLI_FLAGS } from '$lib/constants';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';
+
+	const toolsPanel = useToolsPanel();
+	const hasMcpServersAvailable = $derived(mcpStore.getServers().length > 0);
+</script>
+
+<DropdownMenu.Sub onOpenChange={(open) => open && toolsPanel.handleOpen()}>
+	<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+		<PencilRuler class={ICON_CLASS_DEFAULT} />
+
+		<span>Tools</span>
+	</DropdownMenu.SubTrigger>
+
+	<DropdownMenu.SubContent class="w-72 p-0">
+		{#if toolsPanel.totalToolCount === 0}
+			{#if toolsStore.loading}
+				<div class="px-3 py-4 text-center text-sm text-muted-foreground">
+					<Loader2 class="mx-auto mb-1 {ICON_CLASS_DEFAULT} animate-spin" />
+
+					Loading tools...
+				</div>
+			{:else if toolsStore.isToolsEndpointUnreachable}
+				<div class="grid gap-2.5 px-3 py-4 text-sm text-muted-foreground">
+					<span class="flex gap-2">
+						<Info class="mt-0.5 {ICON_CLASS_DEFAULT} shrink-0" />
+
+						<span>
+							Run llama-server with <code>{CLI_FLAGS.TOOLS}</code> flag to enable
+
+							<strong>Built-in Tools</strong>.
+						</span>
+					</span>
+
+					<span class="flex gap-2">
+						<Info class="mt-0.5 {ICON_CLASS_DEFAULT} shrink-0" />
+
+						<span>
+							{hasMcpServersAvailable ? 'Enable' : 'Add'} MCP Server(s) to access
+
+							<strong>MCP Tools</strong>.
+						</span>
+					</span>
+				</div>
+			{:else if toolsStore.error}
+				<div class="px-3 py-4 text-center text-sm text-muted-foreground">Failed to load tools</div>
+			{:else if toolsPanel.noToolsInfoMessage}
+				<div class="flex gap-2 px-3 py-4 text-sm text-muted-foreground">
+					<Info class="mt-0.5 {ICON_CLASS_DEFAULT} shrink-0" />
+
+					<span>{toolsPanel.noToolsInfoMessage}</span>
+				</div>
+			{:else}
+				<div class="px-3 py-4 text-center text-sm text-muted-foreground">No tools available</div>
+			{/if}
+		{:else}
+			<div class="max-h-80 overflow-y-auto p-2 pr-1">
+				{#each toolsPanel.activeGroups as group (group.key)}
+					{@const isExpanded = toolsPanel.expandedGroups.has(group.key)}
+					{@const checked = toolsPanel.isGroupChecked(group)}
+					{@const favicon = toolsPanel.getFavicon(group)}
+
+					<Collapsible.Root
+						open={isExpanded}
+						onOpenChange={() => toolsPanel.toggleGroupExpanded(group.key)}
+					>
+						<div class="flex items-center gap-1">
+							<Collapsible.Trigger
+								class="flex min-w-0 flex-1 items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50"
+							>
+								{#if isExpanded}
+									<ChevronDown class="h-3.5 w-3.5 shrink-0" />
+								{:else}
+									<ChevronRight class="h-3.5 w-3.5 shrink-0" />
+								{/if}
+
+								<span class="inline-flex min-w-0 items-center gap-1.5 font-medium">
+									{#if favicon}
+										<img
+											src={favicon}
+											alt=""
+											class="{ICON_CLASS_DEFAULT} shrink-0 rounded-sm"
+											onerror={(e) => {
+												(e.currentTarget as HTMLImageElement).style.display = 'none';
+											}}
+										/>
+									{/if}
+
+									<span class="truncate">{group.label}</span>
+								</span>
+
+								<span class="ml-auto shrink-0 text-xs text-muted-foreground">
+									{toolsPanel.getEnabledToolCount(group)}/{group.tools.length}
+								</span>
+							</Collapsible.Trigger>
+
+							<Tooltip.Root>
+								<Tooltip.Trigger>
+									{#snippet child({ props })}
+										<Checkbox
+											{...props}
+											{checked}
+											onCheckedChange={() => toolsPanel.toggleGroupByKey(group.key)}
+											class="mr-2 {ICON_CLASS_DEFAULT} shrink-0"
+										/>
+									{/snippet}
+								</Tooltip.Trigger>
+
+								<Tooltip.Content side="right">
+									<p>
+										{checked ? 'Disable' : 'Enable'}
+										{group.tools.length} tool{group.tools.length !== 1 ? 's' : ''}
+									</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						</div>
+
+						<Collapsible.Content>
+							<div class="ml-4 flex flex-col gap-0.5 border-l border-border/50 pl-2">
+								{#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(entry.key)}
+									>
+										<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]">
+											{entry.definition.function.name}
+										</span>
+									</button>
+								{/each}
+							</div>
+						</Collapsible.Content>
+					</Collapsible.Root>
+				{/each}
+			</div>
+		{/if}
+	</DropdownMenu.SubContent>
+</DropdownMenu.Sub>

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import ChatFormActionAddDropdown from './ChatFormActionAddDropdown.svelte';
+	import ChatFormActionAddSheet from './ChatFormActionAddSheet.svelte';
+	import ChatFormActionAddButton from './ChatFormActionAddButton.svelte';
+
+	interface Props {
+		disabled?: boolean;
+		hasAudioModality?: boolean;
+		hasVideoModality?: boolean;
+		hasMcpPromptsSupport?: boolean;
+		hasMcpResourcesSupport?: boolean;
+		hasVisionModality?: boolean;
+		onFileUpload?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpResourcesClick?: () => void;
+		onMcpSettingsClick?: () => void;
+		onSystemPromptClick?: () => void;
+	}
+
+	let {
+		disabled = false,
+		hasAudioModality = false,
+		hasVideoModality = false,
+		hasMcpPromptsSupport = false,
+		hasMcpResourcesSupport = false,
+		hasVisionModality = false,
+		onFileUpload,
+		onMcpPromptClick,
+		onMcpResourcesClick,
+		onMcpSettingsClick,
+		onSystemPromptClick
+	}: Props = $props();
+</script>
+
+{#if isMobile.current}
+	<ChatFormActionAddSheet
+		{disabled}
+		{hasAudioModality}
+		{hasVideoModality}
+		{hasVisionModality}
+		{hasMcpPromptsSupport}
+		{hasMcpResourcesSupport}
+		{onFileUpload}
+		{onSystemPromptClick}
+		{onMcpPromptClick}
+		{onMcpResourcesClick}
+	>
+		{#snippet trigger({ disabled, onclick })}
+			<ChatFormActionAddButton {disabled} {onclick} />
+		{/snippet}
+	</ChatFormActionAddSheet>
+{:else}
+	<ChatFormActionAddDropdown
+		{disabled}
+		{hasAudioModality}
+		{hasVideoModality}
+		{hasVisionModality}
+		{hasMcpPromptsSupport}
+		{hasMcpResourcesSupport}
+		{onFileUpload}
+		{onMcpPromptClick}
+		{onMcpResourcesClick}
+		{onMcpSettingsClick}
+		{onSystemPromptClick}
+	/>
+{/if}

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

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import {
+		modelsStore,
+		modelOptions,
+		selectedModelId,
+		selectedModelName
+	} from '$lib/stores/models.svelte';
+	import { isRouterMode, serverError } from '$lib/stores/server.svelte';
+	import { ModelsSelectorDropdown, ModelsSelectorSheet } from '$lib/components/app';
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { activeMessages } from '$lib/stores/conversations.svelte';
+
+	interface Props {
+		disabled?: boolean;
+		forceForegroundText?: boolean;
+		hasAudioModality?: boolean;
+		hasVideoModality?: boolean;
+		hasVisionModality?: boolean;
+		hasModelSelected?: boolean;
+		isSelectedModelInCache?: boolean;
+		submitTooltip?: string;
+		useGlobalSelection?: boolean;
+	}
+
+	let {
+		disabled = false,
+		forceForegroundText = false,
+		hasAudioModality = $bindable(false),
+		hasVideoModality = $bindable(false),
+		hasVisionModality = $bindable(false),
+		hasModelSelected = $bindable(false),
+		isSelectedModelInCache = $bindable(true),
+		submitTooltip = $bindable(''),
+		useGlobalSelection = false
+	}: Props = $props();
+
+	let isRouter = $derived(isRouterMode());
+	let isOffline = $derived(!!serverError());
+
+	let conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+
+	let lastSyncedConversationModel: string | null = null;
+
+	let selectorModel = $derived.by(() => {
+		const storeModel = selectedModelName();
+		if (storeModel && storeModel !== conversationModel) {
+			return storeModel;
+		}
+
+		if (conversationModel) {
+			return conversationModel;
+		}
+
+		return null;
+	});
+
+	$effect(() => {
+		if (conversationModel && conversationModel !== lastSyncedConversationModel) {
+			if (modelOptions().some((m) => m.model === conversationModel)) {
+				modelsStore.selectedModelName = conversationModel;
+				modelsStore.selectModelByName(conversationModel);
+			} else {
+				modelsStore.selectedModelName = null;
+				modelsStore.clearSelection();
+			}
+			lastSyncedConversationModel = conversationModel;
+		} else if (
+			isRouter &&
+			!modelsStore.selectedModelId &&
+			modelsStore.loadedModelIds.length > 0 &&
+			activeMessages().length > 0 &&
+			!conversationModel
+		) {
+			lastSyncedConversationModel = null;
+			const first = modelOptions().find((m) => modelsStore.loadedModelIds.includes(m.model));
+			if (first) modelsStore.selectModelById(first.id);
+		}
+	});
+
+	let activeModelId = $derived.by(() => {
+		const options = modelOptions();
+
+		if (!isRouter) {
+			return options.length > 0 ? options[0].model : null;
+		}
+
+		const selectedId = selectedModelId();
+
+		if (selectedId) {
+			const model = options.find((m) => m.id === selectedId);
+
+			if (model) return model.model;
+		}
+
+		if (conversationModel) {
+			const model = options.find((m) => m.model === conversationModel);
+
+			if (model) return model.model;
+		}
+
+		return null;
+	});
+
+	let modelPropsVersion = $state(0); // Used to trigger reactivity after fetch
+
+	$effect(() => {
+		if (activeModelId) {
+			const cached = modelsStore.getModelProps(activeModelId);
+
+			if (!cached) {
+				modelsStore.fetchModelProps(activeModelId).then(() => {
+					modelPropsVersion++;
+				});
+			}
+		}
+	});
+
+	$effect(() => {
+		void modelPropsVersion;
+
+		hasAudioModality = activeModelId ? modelsStore.modelSupportsAudio(activeModelId) : false;
+	});
+
+	$effect(() => {
+		void modelPropsVersion;
+
+		hasVideoModality = activeModelId ? modelsStore.modelSupportsVideo(activeModelId) : false;
+	});
+
+	$effect(() => {
+		void modelPropsVersion;
+
+		hasVisionModality = activeModelId ? modelsStore.modelSupportsVision(activeModelId) : false;
+	});
+
+	$effect(() => {
+		hasModelSelected = !isRouter || !!conversationModel || !!selectedModelId();
+	});
+
+	$effect(() => {
+		if (!isRouter) {
+			isSelectedModelInCache = true;
+		} else if (conversationModel) {
+			isSelectedModelInCache = modelOptions().some((option) => option.model === conversationModel);
+		} else {
+			const currentModelId = selectedModelId();
+
+			if (!currentModelId) {
+				isSelectedModelInCache = false;
+			} else {
+				isSelectedModelInCache = modelOptions().some((option) => option.id === currentModelId);
+			}
+		}
+	});
+
+	$effect(() => {
+		if (!hasModelSelected) {
+			submitTooltip = 'Please select a model first';
+		} else if (!isSelectedModelInCache) {
+			submitTooltip = 'Selected model is not available, please select another';
+		} else {
+			submitTooltip = '';
+		}
+	});
+
+	let selectorModelRef: ModelsSelectorDropdown | ModelsSelectorSheet | undefined =
+		$state(undefined);
+
+	export function open() {
+		selectorModelRef?.open();
+	}
+</script>
+
+{#if isMobile.current}
+	<ModelsSelectorSheet
+		disabled={disabled || isOffline}
+		bind:this={selectorModelRef}
+		currentModel={selectorModel}
+		{forceForegroundText}
+		{useGlobalSelection}
+	/>
+{:else}
+	<ModelsSelectorDropdown
+		disabled={disabled || isOffline}
+		bind:this={selectorModelRef}
+		currentModel={selectorModel}
+		{forceForegroundText}
+		{useGlobalSelection}
+	/>
+{/if}

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { Mic, Square } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		hasAudioModality?: boolean;
+		isLoading?: boolean;
+		isRecording?: boolean;
+		onMicClick?: () => void;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hasAudioModality = false,
+		isLoading = false,
+		isRecording = false,
+		onMicClick
+	}: Props = $props();
+</script>
+
+<div class="flex items-center gap-1 {className}">
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				class="h-8 w-8 rounded-full p-0 {isRecording
+					? 'animate-pulse bg-red-500 text-white hover:bg-red-600'
+					: ''}"
+				disabled={disabled || isLoading || !hasAudioModality}
+				onclick={onMicClick}
+				type="button"
+			>
+				<span class="sr-only">{isRecording ? 'Stop recording' : 'Start recording'}</span>
+
+				{#if isRecording}
+					<Square class="{ICON_CLASS_DEFAULT} animate-pulse fill-white" />
+				{:else}
+					<Mic class={ICON_CLASS_DEFAULT} />
+				{/if}
+			</Button>
+		</Tooltip.Trigger>
+
+		{#if !hasAudioModality}
+			<Tooltip.Content>
+				<p>Current model does not support audio</p>
+			</Tooltip.Content>
+		{/if}
+	</Tooltip.Root>
+</div>

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { ArrowUp } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface Props {
+		canSend?: boolean;
+		disabled?: boolean;
+		showErrorState?: boolean;
+		tooltipLabel?: string;
+	}
+
+	let { canSend = false, disabled = false, showErrorState = false, tooltipLabel }: Props = $props();
+
+	let isDisabled = $derived(!canSend || disabled);
+</script>
+
+{#snippet submitButton(props = {})}
+	<Button
+		type="submit"
+		disabled={isDisabled}
+		class={[
+			'md:h-8 md:w-8 h-9 w-9 rounded-full p-0',
+			showErrorState &&
+				'bg-red-400/10 text-red-400 hover:bg-red-400/20 hover:text-red-400 disabled:opacity-100'
+		]}
+		{...props}
+	>
+		<span class="sr-only">Send</span>
+		<ArrowUp class="h-12 w-12" />
+	</Button>
+{/snippet}
+
+{#if tooltipLabel}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{@render submitButton()}
+		</Tooltip.Trigger>
+
+		<Tooltip.Content>
+			<p>{tooltipLabel}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	{@render submitButton()}
+{/if}

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

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import { Square, SkipForward } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { ChatService } from '$lib/services';
+	import {
+		ChatFormActionsAdd,
+		ChatFormActionModels,
+		ChatFormActionRecord,
+		ChatFormActionSubmit,
+		ChatFormContextGauge
+	} from '$lib/components/app';
+	import { FileTypeCategory, MessageRole } from '$lib/enums';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import { activeMessages, conversationsStore } from '$lib/stores/conversations.svelte';
+	import {
+		activeProcessingState,
+		isChatStreaming,
+		isLoading as chatIsLoading
+	} from '$lib/stores/chat.svelte';
+	import { getFileTypeCategory } from '$lib/utils';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { ROUTES } from '$lib/constants/routes';
+
+	interface Props {
+		canSend?: boolean;
+		canSubmit?: boolean;
+		class?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		isReasoning?: boolean;
+		isRecording?: boolean;
+		showAddButton?: boolean;
+		showModelSelector?: boolean;
+		uploadedFiles?: ChatUploadedFile[];
+		onFileUpload?: () => void;
+		onMicClick?: () => void;
+		onStop?: () => void;
+		onSystemPromptClick?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpResourcesClick?: () => void;
+	}
+
+	let {
+		canSend = false,
+		canSubmit = false,
+		class: className = '',
+		disabled = false,
+		isLoading = false,
+		isReasoning = false,
+		isRecording = false,
+		showAddButton = true,
+		showModelSelector = true,
+		uploadedFiles = [],
+		onFileUpload,
+		onMicClick,
+		onStop,
+		onSystemPromptClick,
+		onMcpPromptClick,
+		onMcpResourcesClick
+	}: Props = $props();
+
+	let currentConfig = $derived(config());
+
+	let hasMcpPromptsSupport = $derived.by(() => {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+
+		return mcpStore.hasPromptsCapability(perChatOverrides);
+	});
+
+	let hasMcpResourcesSupport = $derived.by(() => {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+
+		return mcpStore.hasResourcesCapability(perChatOverrides);
+	});
+
+	let hasAudioModality = $state(false);
+	let hasVideoModality = $state(false);
+	let hasVisionModality = $state(false);
+	let hasModelSelected = $state(false);
+	let isSelectedModelInCache = $state(true);
+	let submitTooltip = $state('');
+
+	let hasAudioAttachments = $derived(
+		uploadedFiles.some((file) => getFileTypeCategory(file.type) === FileTypeCategory.AUDIO)
+	);
+	let shouldShowRecordButton = $derived(
+		hasAudioModality && !canSubmit && !hasAudioAttachments && currentConfig.autoMicOnEmpty
+	);
+
+	let selectorModelRef: ChatFormActionModels | undefined = $state(undefined);
+
+	export function openModelSelector() {
+		selectorModelRef?.open();
+	}
+	// the streaming assistant message carries both the completion id and the model that
+	// produced it, targeting reasoning control from the same source keeps them consistent
+	let activeMessage = $derived(
+		conversationsStore.activeMessages[conversationsStore.activeMessages.length - 1]
+	);
+
+	let hasProcessedTokens = $derived.by(() => {
+		if (!page.params.id) return false;
+
+		const messages = activeMessages() as DatabaseMessage[];
+		let totalHistoricalTokens = 0;
+		for (const m of messages) {
+			if (m.role !== MessageRole.ASSISTANT) continue;
+			const timings = m.timings;
+			if (!timings) continue;
+			const agenticLlm = timings.agentic?.llm;
+			if (agenticLlm?.prompt_n != null || agenticLlm?.predicted_n != null) {
+				totalHistoricalTokens += (agenticLlm?.prompt_n ?? 0) + (agenticLlm?.predicted_n ?? 0);
+			} else {
+				totalHistoricalTokens += (timings.prompt_n ?? 0) + (timings.predicted_n ?? 0);
+			}
+		}
+		if (totalHistoricalTokens > 0) return true;
+
+		if (!chatIsLoading() && !isChatStreaming()) return false;
+
+		const processingState = activeProcessingState();
+		if (!processingState) return false;
+		const livePromptTokens = Math.max(
+			processingState.promptTokens ?? 0,
+			processingState.promptProgress?.processed ?? 0
+		);
+		const liveOutputTokens = processingState.outputTokensUsed ?? 0;
+		return livePromptTokens > 0 || liveOutputTokens > 0;
+	});
+</script>
+
+<div
+	class="flex w-full items-center gap-3 {className} {showAddButton ? '' : 'justify-end'}"
+	style="container-type: inline-size"
+>
+	{#if showAddButton}
+		<div class="mr-auto flex items-center gap-2">
+			<ChatFormActionsAdd
+				{disabled}
+				{hasAudioModality}
+				{hasVideoModality}
+				{hasVisionModality}
+				{hasMcpPromptsSupport}
+				{hasMcpResourcesSupport}
+				{onFileUpload}
+				{onSystemPromptClick}
+				{onMcpPromptClick}
+				{onMcpResourcesClick}
+				onMcpSettingsClick={() => goto(ROUTES.MCP_SERVERS)}
+			/>
+		</div>
+	{/if}
+
+	<div class="flex items-center gap-1.5">
+		{#if hasProcessedTokens}
+			<ChatFormContextGauge />
+		{/if}
+
+		{#if showModelSelector}
+			<ChatFormActionModels
+				{disabled}
+				bind:this={selectorModelRef}
+				bind:hasAudioModality
+				bind:hasVideoModality
+				bind:hasVisionModality
+				bind:hasModelSelected
+				bind:isSelectedModelInCache
+				bind:submitTooltip
+				forceForegroundText
+				useGlobalSelection
+			/>
+		{/if}
+	</div>
+
+	{#if isReasoning}
+		<Button
+			type="button"
+			variant="secondary"
+			onclick={() =>
+				ChatService.stopReasoning(activeMessage?.completionId ?? '', activeMessage?.model)}
+			class="group h-8 w-8 rounded-full p-0"
+			title="Skip reasoning"
+		>
+			<span class="sr-only">Skip reasoning</span>
+
+			<SkipForward
+				class="{ICON_CLASS_DEFAULT} stroke-muted-foreground group-hover:stroke-foreground"
+			/>
+		</Button>
+	{/if}
+
+	{#if isLoading && !canSubmit}
+		<Button
+			type="button"
+			variant="secondary"
+			onclick={onStop}
+			class="group h-8 w-8 rounded-full p-0 hover:bg-destructive/10!"
+		>
+			<span class="sr-only">Stop</span>
+
+			<Square
+				class="h-8 w-8 fill-muted-foreground stroke-muted-foreground group-hover:fill-destructive group-hover:stroke-destructive hover:fill-destructive hover:stroke-destructive"
+			/>
+		</Button>
+	{:else if shouldShowRecordButton}
+		<ChatFormActionRecord {disabled} {hasAudioModality} {isLoading} {isRecording} {onMicClick} />
+	{:else}
+		<ChatFormActionSubmit
+			canSend={canSend && (showModelSelector ? hasModelSelected && isSelectedModelInCache : true)}
+			{disabled}
+			tooltipLabel={submitTooltip}
+			showErrorState={showModelSelector && hasModelSelected && !isSelectedModelInCache}
+		/>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ChatFormContextGauge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { activeConversation, activeMessages } from '$lib/stores/conversations.svelte';
+	import { chatStore, isChatStreaming, isLoading } from '$lib/stores/chat.svelte';
+	import { useContextGauge } from '$lib/hooks/use-context-gauge.svelte';
+	import ContextGaugeDial from './ContextGaugeDial.svelte';
+	import {
+		gaugeTriggerClick,
+		gaugeTriggerEnter,
+		gaugeTriggerKeydown,
+		gaugeTriggerLeave,
+		gaugeTriggerPointerDown
+	} from '$lib/stores/context-gauge-popup.svelte';
+
+	const gauge = useContextGauge();
+
+	$effect(() => {
+		const conv = activeConversation();
+		untrack(() => chatStore.setActiveProcessingConversation(conv?.id ?? null));
+	});
+
+	$effect(() => {
+		const conv = activeConversation();
+		const messages = activeMessages() as DatabaseMessage[];
+		if (!conv) return;
+		if (isLoading() || isChatStreaming()) return;
+
+		if (messages.length === 0) {
+			untrack(() => chatStore.clearProcessingState(conv.id));
+			return;
+		}
+
+		untrack(() => chatStore.restoreProcessingStateFromMessages(messages, conv.id));
+	});
+
+	$effect(() => {
+		gauge.startMonitoring();
+	});
+</script>
+
+<div
+	role="button"
+	tabindex="0"
+	aria-label="Context usage"
+	data-context-gauge-trigger
+	class="flex h-5 w-5 cursor-default items-center justify-center"
+	onclick={gaugeTriggerClick}
+	onkeydown={gaugeTriggerKeydown}
+	onpointerdown={gaugeTriggerPointerDown}
+	onpointerenter={gaugeTriggerEnter}
+	onpointerleave={gaugeTriggerLeave}
+>
+	<ContextGaugeDial percent={gauge.contextPercent} level={gauge.colorLevel} />
+</div>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetailRow.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: string;
+		subtitle?: string;
+	}
+
+	let { label, value, subtitle }: Props = $props();
+</script>
+
+<div class="grid gap-1.5">
+	<div class="flex items-baseline justify-between">
+		<span class="text-muted-foreground">{label}</span>
+		<span class="font-mono text-muted-foreground">{value}</span>
+	</div>
+
+	{#if subtitle}
+		<div class="text-[10px] leading-tight text-muted-foreground/70">{subtitle}</div>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { ChevronDown } from '@lucide/svelte';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { STATS_UNITS } from '$lib/constants';
+	import ContextGaugeDetailRow from './ContextGaugeDetailRow.svelte';
+
+	interface Props {
+		currentRead: number;
+		currentFresh: number;
+		currentCache: number;
+		currentOutput: number;
+		kvTotal: number;
+		cumulativeRead: number;
+		cumulativeOutput: number;
+		cumulativeCacheTotal: number;
+		averageTokensPerSecond: number | null;
+		transientDetails: string[];
+	}
+
+	let {
+		currentRead,
+		currentFresh,
+		currentCache,
+		currentOutput,
+		kvTotal,
+		cumulativeRead,
+		cumulativeOutput,
+		cumulativeCacheTotal,
+		averageTokensPerSecond,
+		transientDetails
+	}: Props = $props();
+
+	let open = $state(false);
+
+	const hasCumulative = $derived(cumulativeRead > 0 || cumulativeOutput > 0);
+	const hasCurrent = $derived(currentRead > 0 || currentOutput > 0);
+</script>
+
+<Collapsible.Root bind:open class="mt-3 border-t border-border/50 pt-4">
+	<Collapsible.Trigger
+		class="flex w-full cursor-pointer items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+	>
+		<span>Token usage details</span>
+
+		<ChevronDown class={'ml-auto h-3 w-3 transition-transform' + (open ? ' rotate-180' : '')} />
+	</Collapsible.Trigger>
+
+	<Collapsible.Content class="flex flex-col gap-4 text-xs pt-4">
+		{#if hasCumulative}
+			<div>
+				<h3 class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70 mb-2">
+					Across all turns
+				</h3>
+
+				<div class="flex flex-col gap-2">
+					{#if cumulativeRead > 0}
+						<ContextGaugeDetailRow
+							label="Prompt tokens evaluated"
+							value={`${cumulativeRead.toLocaleString()} tok`}
+							subtitle={cumulativeCacheTotal > 0
+								? `${cumulativeCacheTotal.toLocaleString()} reused from KV cache`
+								: undefined}
+						/>
+					{/if}
+					{#if cumulativeOutput > 0}
+						<ContextGaugeDetailRow
+							label="Tokens generated"
+							value={`${cumulativeOutput.toLocaleString()} tok`}
+						/>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		{#if hasCurrent}
+			<div>
+				<h3 class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70 mb-2">
+					This turn · KV cache
+				</h3>
+
+				<div class="flex flex-col gap-2">
+					{#if currentRead > 0}
+						<ContextGaugeDetailRow
+							label="Prompt"
+							value={`${currentRead.toLocaleString()} tok`}
+							subtitle={currentCache > 0
+								? `${currentFresh.toLocaleString()} fresh + ${currentCache.toLocaleString()} cached`
+								: undefined}
+						/>
+					{/if}
+
+					{#if currentOutput > 0}
+						<ContextGaugeDetailRow
+							label="Generated"
+							value={`${currentOutput.toLocaleString()} tok`}
+						/>
+					{/if}
+
+					<div class="pt-1 mt-0.5 border-t border-border/30">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">KV cache total</span>
+							<span class="font-mono font-medium">{kvTotal.toLocaleString()} tok</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		{#if averageTokensPerSecond !== null}
+			<div class="pt-1.5 mt-1 border-t border-border/30">
+				<ContextGaugeDetailRow
+					label="Avg speed"
+					value={`${averageTokensPerSecond.toFixed(1)}${STATS_UNITS.TOKENS_PER_SECOND}`}
+				/>
+			</div>
+		{/if}
+
+		{#each transientDetails as detail (detail)}
+			<div class="font-mono text-muted-foreground">{detail}</div>
+		{/each}
+	</Collapsible.Content>
+</Collapsible.Root>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDial.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { ColorLevel } from './context-gauge';
+	import { colorLevelTextClass } from './context-gauge';
+
+	interface Props {
+		percent: number | null;
+		level: ColorLevel;
+		size?: 'sm' | 'md';
+	}
+
+	let { percent, level, size = 'sm' }: Props = $props();
+
+	const RADIUS = 11;
+	const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+	const strokeLevelClass = $derived(colorLevelTextClass(level));
+	const dimensions = $derived(size === 'md' ? 'h-6 w-6' : 'h-5 w-5');
+	const strokeWidth = $derived(size === 'md' ? 4 : 3);
+</script>
+
+<svg viewBox="0 0 32 32" fill="none" class={dimensions}>
+	<circle
+		cx="16"
+		cy="16"
+		r={RADIUS}
+		stroke="currentColor"
+		stroke-opacity="0.1"
+		stroke-width={strokeWidth}
+	/>
+
+	<circle
+		cx="16"
+		cy="16"
+		r={RADIUS}
+		class="transition-colors duration-300 {strokeLevelClass}"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-dasharray={CIRCUMFERENCE}
+		stroke-dashoffset={percent !== null ? CIRCUMFERENCE * (1 - percent / 100) : CIRCUMFERENCE}
+		transform="rotate(-90 16 16)"
+	/>
+</svg>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeLoadModel.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Loader2 } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		modelId: string | null;
+		isLoading: boolean;
+		onLoad: () => void;
+	}
+
+	let { modelId, isLoading, onLoad }: Props = $props();
+</script>
+
+{#if modelId !== null && !isLoading}
+	<div class="flex flex-col gap-2 border-t border-border/50 pt-2 text-xs text-muted-foreground">
+		<span>Available context size is only visible once the model is loaded.</span>
+		<Button size="sm" variant="secondary" class="self-start" onclick={onLoad}>Load model</Button>
+	</div>
+{:else if isLoading}
+	<div class="flex items-center gap-2 border-t border-border/50 pt-2 text-xs text-muted-foreground">
+		<Loader2 class="h-3.5 w-3.5 animate-spin" />
+		<span>Loading model...</span>
+	</div>
+{/if}

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugePopup.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { formatParameters } from '$lib/utils/formatters';
+	import { useContextGauge } from '$lib/hooks/use-context-gauge.svelte';
+	import ContextGaugeDetails from './ContextGaugeDetails.svelte';
+	import ContextGaugeLoadModel from './ContextGaugeLoadModel.svelte';
+	import { colorLevelBgClass, colorLevelTextClass } from './context-gauge';
+	import {
+		gaugePopup,
+		gaugeCardEnter,
+		gaugeCardLeave,
+		gaugePopupClose
+	} from '$lib/stores/context-gauge-popup.svelte';
+
+	const gauge = useContextGauge();
+
+	// The gauge hook wraps a processing state instance that only follows the
+	// live stream while its own monitoring flag is set, so the card instance
+	// starts monitoring like the dial does.
+	$effect(() => {
+		gauge.startMonitoring();
+	});
+
+	let cardEl = $state<HTMLElement | null>(null);
+
+	// Any press outside the card and outside the dial closes the card.
+	// Presses on the dial are excluded because the dial handles its own
+	// toggle; the listener only exists while the card is open.
+	$effect(() => {
+		if (!gaugePopup.open) return;
+
+		const onPointerDown = (event: PointerEvent) => {
+			const target = event.target;
+			if (!(target instanceof Node)) return;
+			if (cardEl?.contains(target)) return;
+			if (target instanceof Element && target.closest('[data-context-gauge-trigger]')) return;
+			gaugePopupClose();
+		};
+
+		document.addEventListener('pointerdown', onPointerDown, true);
+		return () => document.removeEventListener('pointerdown', onPointerDown, true);
+	});
+
+	const showProgressBar = $derived(
+		gauge.contextTotal !== null &&
+			gauge.contextTotal > 0 &&
+			(gauge.activeModelId !== null || gauge.isActiveModelLoaded)
+	);
+</script>
+
+{#if gaugePopup.open}
+	<div
+		role="status"
+		bind:this={cardEl}
+		class="absolute z-50 w-64 -translate-x-1/2 rounded-lg border border-border/50 bg-popover p-3 text-sm text-popover-foreground shadow-lg ring-1 ring-foreground/10"
+		style="left: {gaugePopup.centerX}px; bottom: {gaugePopup.bottom}px"
+		onpointerenter={gaugeCardEnter}
+		onpointerleave={gaugeCardLeave}
+	>
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center gap-2">
+				<span class="font-medium">Context</span>
+				<span class="text-muted-foreground">·</span>
+				<span class="font-mono text-muted-foreground">
+					{formatParameters(gauge.contextUsed)}
+					/ {gauge.contextTotal !== null ? formatParameters(gauge.contextTotal) : '-'}
+				</span>
+			</div>
+
+			{#if gauge.activeModelId !== null && !gauge.isActiveModelLoaded}
+				<ContextGaugeLoadModel
+					modelId={gauge.activeModelId}
+					isLoading={gauge.isActiveModelLoading}
+					onLoad={gauge.loadModel}
+				/>
+			{:else if showProgressBar}
+				<div class="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+					<div
+						class="h-full rounded-full transition-all duration-300 {colorLevelBgClass(
+							gauge.colorLevel
+						)}"
+						style="width: {gauge.contextPercent}%"
+					></div>
+				</div>
+
+				<div class="flex justify-between text-xs text-muted-foreground">
+					<span>
+						<span class={colorLevelTextClass(gauge.colorLevel)}>{gauge.contextPercent}%</span> used
+					</span>
+					<span>
+						{formatParameters((gauge.contextTotal ?? 0) - gauge.contextUsed)} remaining
+					</span>
+				</div>
+			{:else}
+				<div class="text-xs text-muted-foreground">No context info available</div>
+			{/if}
+
+			{#if gauge.hasAnyUsage}
+				<ContextGaugeDetails
+					currentRead={gauge.currentRead}
+					currentFresh={gauge.currentFresh}
+					currentCache={gauge.currentCache}
+					currentOutput={gauge.currentOutput}
+					kvTotal={gauge.kvTotal}
+					cumulativeRead={gauge.cumulativeRead}
+					cumulativeOutput={gauge.cumulativeOutput}
+					cumulativeCacheTotal={gauge.cumulativeCacheTotal}
+					averageTokensPerSecond={gauge.averageTokensPerSecond}
+					transientDetails={gauge.transientDetails}
+				/>
+			{/if}
+		</div>
+	</div>
+{/if}

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/context-gauge.ts

@@ -0,0 +1,37 @@
+export type ColorLevel = 'ok' | 'warning' | 'critical' | 'neutral';
+
+const WARNING_THRESHOLD = 80;
+const CRITICAL_THRESHOLD = 95;
+
+export function colorLevelFromPercent(percent: number | null): ColorLevel {
+	if (percent === null) return 'neutral';
+	if (percent >= CRITICAL_THRESHOLD) return 'critical';
+	if (percent >= WARNING_THRESHOLD) return 'warning';
+	return 'ok';
+}
+
+export function colorLevelTextClass(level: ColorLevel): string {
+	switch (level) {
+		case 'critical':
+			return 'text-red-400';
+		case 'warning':
+			return 'text-amber-400';
+		case 'ok':
+			return 'text-muted-foreground';
+		default:
+			return 'text-muted-foreground';
+	}
+}
+
+export function colorLevelBgClass(level: ColorLevel): string {
+	switch (level) {
+		case 'critical':
+			return 'bg-red-500';
+		case 'warning':
+			return 'bg-amber-500';
+		case 'ok':
+			return 'bg-green-500';
+		default:
+			return 'bg-muted';
+	}
+}

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormFileInputInvisible.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		multiple?: boolean;
+		onFileSelect?: (files: File[]) => void;
+	}
+
+	let { class: className = '', multiple = true, onFileSelect }: Props = $props();
+
+	let fileInputElement: HTMLInputElement | undefined;
+
+	export function click() {
+		fileInputElement?.click();
+	}
+
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+
+		if (input.files) {
+			onFileSelect?.(Array.from(input.files));
+		}
+	}
+</script>
+
+<input
+	bind:this={fileInputElement}
+	type="file"
+	{multiple}
+	onchange={handleFileSelect}
+	class="hidden {className}"
+/>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormMcpResourcesList.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import {
+		mcpResourceAttachments,
+		mcpHasResourceAttachments
+	} from '$lib/stores/mcp-resources.svelte';
+	import {
+		ChatAttachmentsListItemMcpResource,
+		HorizontalScrollCarousel
+	} from '$lib/components/app';
+
+	interface Props {
+		class?: string;
+		onResourceClick?: (uri: string) => void;
+	}
+
+	let { class: className, onResourceClick }: Props = $props();
+
+	const attachments = $derived(mcpResourceAttachments());
+	const hasAttachments = $derived(mcpHasResourceAttachments());
+
+	function handleRemove(attachmentId: string) {
+		mcpStore.removeResourceAttachment(attachmentId);
+	}
+
+	function handleResourceClick(uri: string) {
+		onResourceClick?.(uri);
+	}
+</script>
+
+{#if hasAttachments}
+	<div class={className}>
+		<HorizontalScrollCarousel gapSize="2">
+			{#each attachments as attachment, i (attachment.id)}
+				<ChatAttachmentsListItemMcpResource
+					class={i === 0 ? 'ml-3' : ''}
+					{attachment}
+					onRemove={handleRemove}
+					onclick={() => handleResourceClick(attachment.resource.uri)}
+				/>
+			{/each}
+		</HorizontalScrollCarousel>
+	</div>
+{/if}

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerItemHeader.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { MCPServerSettingsEntry } from '$lib/types';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+
+	interface Props {
+		server: MCPServerSettingsEntry | undefined;
+		serverLabel: string;
+		title: string;
+		description?: string;
+		titleExtra?: Snippet;
+		subtitle?: Snippet;
+	}
+
+	let { server, serverLabel, title, description, titleExtra, subtitle }: Props = $props();
+
+	let faviconUrl = $derived(server ? mcpStore.getServerFavicon(server.id) : null);
+</script>
+
+<div class="min-w-0 flex-1">
+	<div class="mb-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+		{#if faviconUrl}
+			<img
+				src={faviconUrl}
+				alt=""
+				class="h-3 w-3 shrink-0 rounded-sm"
+				onerror={(e) => {
+					(e.currentTarget as HTMLImageElement).style.display = 'none';
+				}}
+			/>
+		{/if}
+
+		<span>{serverLabel}</span>
+	</div>
+
+	<div class="flex items-center gap-2">
+		<span class="font-medium">
+			{title}
+		</span>
+
+		{#if titleExtra}
+			{@render titleExtra()}
+		{/if}
+	</div>
+
+	{#if description}
+		<p class="mt-0.5 truncate text-sm text-muted-foreground">
+			{description}
+		</p>
+	{/if}
+
+	{#if subtitle}
+		{@render subtitle()}
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerList.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import { SearchInput } from '$lib/components/app';
+	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte';
+	import { CHAT_FORM_POPOVER_MAX_HEIGHT } from '$lib/constants';
+
+	interface Props {
+		items: T[];
+		isLoading: boolean;
+		selectedIndex: number;
+		searchQuery: string;
+		showSearchInput: boolean;
+		searchPlaceholder?: string;
+		emptyMessage?: string;
+		itemKey: (item: T, index: number) => string;
+		item: Snippet<[T, number, boolean]>;
+		skeleton?: Snippet;
+		footer?: Snippet;
+	}
+
+	let {
+		items,
+		isLoading,
+		selectedIndex,
+		searchQuery = $bindable(),
+		showSearchInput,
+		searchPlaceholder = 'Search...',
+		emptyMessage = 'No items available',
+		itemKey,
+		item,
+		skeleton,
+		footer
+	}: Props = $props();
+
+	let listContainer = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		if (listContainer && selectedIndex >= 0 && selectedIndex < items.length) {
+			const selectedElement = listContainer.querySelector(
+				`[data-picker-index="${selectedIndex}"]`
+			) as HTMLElement;
+
+			if (selectedElement) {
+				selectedElement.scrollIntoView({
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'nearest'
+				});
+			}
+		}
+	});
+</script>
+
+<ScrollArea>
+	{#if showSearchInput}
+		<div class="absolute top-0 right-0 left-0 z-10 p-2 pb-0">
+			<SearchInput placeholder={searchPlaceholder} bind:value={searchQuery} />
+		</div>
+	{/if}
+
+	<div
+		bind:this={listContainer}
+		class={[`${CHAT_FORM_POPOVER_MAX_HEIGHT} p-2`, showSearchInput && 'pt-13']}
+	>
+		{#if isLoading}
+			{#if skeleton}
+				{@render skeleton()}
+			{/if}
+		{:else if items.length === 0}
+			<div class="py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
+		{:else}
+			{#each items as itemData, index (itemKey(itemData, index))}
+				{@render item(itemData, index, index === selectedIndex)}
+			{/each}
+		{/if}
+	</div>
+
+	{#if footer}
+		{@render footer()}
+	{/if}
+</ScrollArea>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		isSelected?: boolean;
+		onclick: () => void;
+		dataIndex?: number;
+		children: Snippet;
+	}
+
+	let { isSelected = false, onclick, dataIndex, children }: Props = $props();
+</script>
+
+<button
+	type="button"
+	data-picker-index={dataIndex}
+	{onclick}
+	class="flex w-full cursor-pointer items-start gap-3 rounded-lg px-3 py-2 text-left hover:bg-accent/50 {isSelected
+		? 'bg-accent/50'
+		: ''}"
+>
+	{@render children()}
+</button>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItemSkeleton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		titleWidth?: string;
+		showBadge?: boolean;
+	}
+
+	let { titleWidth = 'w-48', showBadge = false }: Props = $props();
+</script>
+
+<div class="flex w-full items-start gap-3 rounded-lg px-3 py-2">
+	<div class="min-w-0 flex-1 space-y-2">
+		<!-- Server label skeleton -->
+		<div class="mb-2 flex items-center gap-1.5">
+			<div class="h-3 w-3 shrink-0 animate-pulse rounded-sm bg-muted"></div>
+			<div class="h-3 w-24 animate-pulse rounded bg-muted"></div>
+		</div>
+
+		<!-- Title skeleton -->
+		<div class="flex items-center gap-2">
+			<div class="h-4 {titleWidth} animate-pulse rounded bg-muted"></div>
+
+			{#if showBadge}
+				<div class="h-4 w-12 animate-pulse rounded-full bg-muted"></div>
+			{/if}
+		</div>
+
+		<!-- Description skeleton -->
+		<div class="h-3 w-full animate-pulse rounded bg-muted"></div>
+	</div>
+</div>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerPopover.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Popover from '$lib/components/ui/popover';
+
+	interface Props {
+		class?: string;
+		isOpen?: boolean;
+		srLabel?: string;
+		onClose?: () => void;
+		onKeydown?: (event: KeyboardEvent) => void;
+		children: Snippet;
+	}
+
+	let {
+		class: className = '',
+		isOpen = $bindable(false),
+		srLabel = 'Open picker',
+		onClose,
+		onKeydown,
+		children
+	}: Props = $props();
+</script>
+
+<Popover.Root
+	bind:open={isOpen}
+	onOpenChange={(open) => {
+		if (!open) {
+			onClose?.();
+		}
+	}}
+>
+	<Popover.Trigger
+		class="pointer-events-none absolute inset-0 opacity-0"
+		tabindex={-1}
+		aria-hidden="true"
+	>
+		<span class="sr-only">{srLabel}</span>
+	</Popover.Trigger>
+
+	<Popover.Content
+		side="top"
+		align="start"
+		sideOffset={12}
+		class="w-[var(--bits-popover-anchor-width)] max-w-none rounded-xl border-border/50 p-0 shadow-xl {className}"
+		onkeydown={onKeydown}
+		onOpenAutoFocus={(event) => event.preventDefault()}
+	>
+		{@render children()}
+	</Popover.Content>
+</Popover.Root>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte

@@ -0,0 +1,435 @@
+<script lang="ts">
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { debounce, uuid } from '$lib/utils';
+	import { KeyboardKey } from '$lib/enums';
+	import type { MCPPromptInfo, GetPromptResult, MCPServerSettingsEntry } from '$lib/types';
+	import { SvelteMap } from 'svelte/reactivity';
+	import {
+		ChatFormPickerPopover,
+		ChatFormPickerList,
+		ChatFormPickerListItem,
+		ChatFormPickerItemHeader,
+		ChatFormPickerListItemSkeleton,
+		ChatFormPromptPickerArgumentForm
+	} from '$lib/components/app/chat';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+
+	interface Props {
+		class?: string;
+		isOpen?: boolean;
+		searchQuery?: string;
+		onClose?: () => void;
+		onPromptLoadStart?: (
+			placeholderId: string,
+			promptInfo: MCPPromptInfo,
+			args?: Record<string, string>
+		) => void;
+		onPromptLoadComplete?: (placeholderId: string, result: GetPromptResult) => void;
+		onPromptLoadError?: (placeholderId: string, error: string) => void;
+	}
+
+	let {
+		class: className = '',
+		isOpen = false,
+		searchQuery = '',
+		onClose,
+		onPromptLoadStart,
+		onPromptLoadComplete,
+		onPromptLoadError
+	}: Props = $props();
+
+	let prompts = $state<MCPPromptInfo[]>([]);
+	let isLoading = $state(false);
+	let selectedPrompt = $state<MCPPromptInfo | null>(null);
+	let promptArgs = $state<Record<string, string>>({});
+	let selectedIndex = $state(0);
+	let internalSearchQuery = $state('');
+	let promptError = $state<string | null>(null);
+	let selectedIndexBeforeArgumentForm = $state<number | null>(null);
+
+	let suggestions = $state<Record<string, string[]>>({});
+	let loadingSuggestions = $state<Record<string, boolean>>({});
+	let activeAutocomplete = $state<string | null>(null);
+	let autocompleteIndex = $state(0);
+
+	let serverSettingsMap = $derived.by(() => {
+		const servers = mcpStore.getServers();
+		const map = new SvelteMap<string, MCPServerSettingsEntry>();
+
+		for (const server of servers) {
+			map.set(server.id, server);
+		}
+
+		return map;
+	});
+
+	$effect(() => {
+		if (isOpen) {
+			loadPrompts();
+			selectedIndex = 0;
+		} else {
+			selectedPrompt = null;
+			promptArgs = {};
+			promptError = null;
+		}
+	});
+
+	$effect(() => {
+		if (filteredPrompts.length > 0 && selectedIndex >= filteredPrompts.length) {
+			selectedIndex = 0;
+		}
+	});
+
+	async function loadPrompts() {
+		isLoading = true;
+
+		try {
+			const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+
+			const initialized = await mcpStore.ensureInitialized(perChatOverrides);
+
+			if (!initialized) {
+				prompts = [];
+
+				return;
+			}
+
+			prompts = await mcpStore.getAllPrompts();
+		} catch (error) {
+			console.error('[ChatFormPickerMcpPrompts] Failed to load prompts:', error);
+			prompts = [];
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handlePromptClick(prompt: MCPPromptInfo) {
+		const args = prompt.arguments ?? [];
+
+		if (args.length > 0) {
+			selectedIndexBeforeArgumentForm = selectedIndex;
+			selectedPrompt = prompt;
+			promptArgs = {};
+			promptError = null;
+
+			requestAnimationFrame(() => {
+				const firstInput = document.querySelector(`#arg-${args[0].name}`) as HTMLInputElement;
+				if (firstInput) {
+					firstInput.focus();
+				}
+			});
+		} else {
+			executePrompt(prompt, {});
+		}
+	}
+
+	async function executePrompt(prompt: MCPPromptInfo, args: Record<string, string>) {
+		promptError = null;
+
+		const placeholderId = uuid();
+
+		const nonEmptyArgs = Object.fromEntries(
+			Object.entries(args).filter(([, value]) => value.trim() !== '')
+		);
+		const argsToPass = Object.keys(nonEmptyArgs).length > 0 ? nonEmptyArgs : undefined;
+
+		onPromptLoadStart?.(placeholderId, prompt, argsToPass);
+		onClose?.();
+
+		try {
+			const result = await mcpStore.getPrompt(prompt.serverName, prompt.name, args);
+			onPromptLoadComplete?.(placeholderId, result);
+		} catch (error) {
+			const errorMessage =
+				error instanceof Error ? error.message : 'Unknown error executing prompt';
+			onPromptLoadError?.(placeholderId, errorMessage);
+		}
+	}
+
+	function handleArgumentSubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		if (selectedPrompt) {
+			executePrompt(selectedPrompt, promptArgs);
+		}
+	}
+
+	const fetchCompletions = debounce(async (argName: string, value: string) => {
+		if (!selectedPrompt || value.length < 1) {
+			suggestions[argName] = [];
+
+			return;
+		}
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			console.log('[ChatFormPickerMcpPrompts] Fetching completions for:', {
+				serverName: selectedPrompt.serverName,
+				promptName: selectedPrompt.name,
+				argName,
+				value
+			});
+		}
+
+		loadingSuggestions[argName] = true;
+
+		try {
+			const result = await mcpStore.getPromptCompletions(
+				selectedPrompt.serverName,
+				selectedPrompt.name,
+				argName,
+				value
+			);
+
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+				console.log('[ChatFormPickerMcpPrompts] Autocomplete result:', {
+					argName,
+					value,
+					result,
+					suggestionsCount: result?.values.length ?? 0
+				});
+			}
+
+			if (result && result.values.length > 0) {
+				// Filter out empty strings from suggestions
+				const filteredValues = result.values.filter((v) => v.trim() !== '');
+
+				if (filteredValues.length > 0) {
+					suggestions[argName] = filteredValues;
+					activeAutocomplete = argName;
+					autocompleteIndex = 0;
+				} else {
+					suggestions[argName] = [];
+				}
+			} else {
+				suggestions[argName] = [];
+			}
+		} catch (error) {
+			console.error('[ChatFormPickerMcpPrompts] Failed to fetch completions:', error);
+			suggestions[argName] = [];
+		} finally {
+			loadingSuggestions[argName] = false;
+		}
+	}, 200);
+
+	function handleArgInput(argName: string, value: string) {
+		promptArgs[argName] = value;
+		fetchCompletions(argName, value);
+	}
+
+	function selectSuggestion(argName: string, value: string) {
+		promptArgs[argName] = value;
+		suggestions[argName] = [];
+		activeAutocomplete = null;
+	}
+
+	function handleArgKeydown(event: KeyboardEvent, argName: string) {
+		const argSuggestions = suggestions[argName] ?? [];
+
+		// Handle Escape - return to prompt selection list
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			event.stopPropagation();
+			handleCancelArgumentForm();
+			return;
+		}
+
+		if (argSuggestions.length === 0 || activeAutocomplete !== argName) return;
+
+		if (event.key === KeyboardKey.ARROW_DOWN) {
+			event.preventDefault();
+			autocompleteIndex = Math.min(autocompleteIndex + 1, argSuggestions.length - 1);
+		} else if (event.key === KeyboardKey.ARROW_UP) {
+			event.preventDefault();
+			autocompleteIndex = Math.max(autocompleteIndex - 1, 0);
+		} else if (event.key === KeyboardKey.ENTER && argSuggestions[autocompleteIndex]) {
+			event.preventDefault();
+			event.stopPropagation();
+			selectSuggestion(argName, argSuggestions[autocompleteIndex]);
+		}
+	}
+
+	function handleArgBlur(argName: string) {
+		// Delay to allow click on suggestion
+		setTimeout(() => {
+			if (activeAutocomplete === argName) {
+				suggestions[argName] = [];
+				activeAutocomplete = null;
+			}
+		}, 150);
+	}
+
+	function handleArgFocus(argName: string) {
+		if ((suggestions[argName]?.length ?? 0) > 0) {
+			activeAutocomplete = argName;
+		}
+	}
+
+	function handleCancelArgumentForm() {
+		// Restore the previously selected prompt index
+		if (selectedIndexBeforeArgumentForm !== null) {
+			selectedIndex = selectedIndexBeforeArgumentForm;
+			selectedIndexBeforeArgumentForm = null;
+		}
+		selectedPrompt = null;
+		promptArgs = {};
+		promptError = null;
+	}
+
+	export function handleKeydown(event: KeyboardEvent): boolean {
+		if (!isOpen) return false;
+
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			if (selectedPrompt) {
+				// Return to prompt selection list, keeping the selected prompt active
+				handleCancelArgumentForm();
+			} else {
+				onClose?.();
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ARROW_DOWN) {
+			event.preventDefault();
+			if (filteredPrompts.length > 0) {
+				selectedIndex = (selectedIndex + 1) % filteredPrompts.length;
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ARROW_UP) {
+			event.preventDefault();
+			if (filteredPrompts.length > 0) {
+				selectedIndex = selectedIndex === 0 ? filteredPrompts.length - 1 : selectedIndex - 1;
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ENTER && !selectedPrompt) {
+			event.preventDefault();
+			if (filteredPrompts[selectedIndex]) {
+				handlePromptClick(filteredPrompts[selectedIndex]);
+			}
+
+			return true;
+		}
+
+		return false;
+	}
+
+	let filteredPrompts = $derived.by(() => {
+		const sortedServers = mcpStore.getServers();
+		const serverOrderMap = new Map(sortedServers.map((server, index) => [server.id, index]));
+
+		const sortedPrompts = [...prompts].sort((a, b) => {
+			const orderA = serverOrderMap.get(a.serverName) ?? Number.MAX_SAFE_INTEGER;
+			const orderB = serverOrderMap.get(b.serverName) ?? Number.MAX_SAFE_INTEGER;
+			return orderA - orderB;
+		});
+
+		const query = (searchQuery || internalSearchQuery).toLowerCase();
+		if (!query) return sortedPrompts;
+
+		return sortedPrompts.filter(
+			(prompt) =>
+				prompt.name.toLowerCase().includes(query) ||
+				prompt.title?.toLowerCase().includes(query) ||
+				prompt.description?.toLowerCase().includes(query)
+		);
+	});
+
+	let showSearchInput = $derived(prompts.length > 3);
+</script>
+
+<ChatFormPickerPopover
+	bind:isOpen
+	class={className}
+	srLabel="Open prompt picker"
+	{onClose}
+	onKeydown={handleKeydown}
+>
+	{#if selectedPrompt}
+		{@const prompt = selectedPrompt}
+		{@const server = serverSettingsMap.get(prompt.serverName)}
+		{@const serverLabel = server ? mcpStore.getServerLabel(server) : prompt.serverName}
+
+		<div class="p-4">
+			<ChatFormPickerItemHeader
+				{server}
+				{serverLabel}
+				title={prompt.title || prompt.name}
+				description={prompt.description}
+			>
+				{#snippet titleExtra()}
+					{#if prompt.arguments?.length}
+						<Badge variant="secondary">
+							{prompt.arguments.length} arg{prompt.arguments.length > 1 ? 's' : ''}
+						</Badge>
+					{/if}
+				{/snippet}
+			</ChatFormPickerItemHeader>
+
+			<ChatFormPromptPickerArgumentForm
+				prompt={selectedPrompt}
+				{promptArgs}
+				{suggestions}
+				{loadingSuggestions}
+				{activeAutocomplete}
+				{autocompleteIndex}
+				{promptError}
+				onArgInput={handleArgInput}
+				onArgKeydown={handleArgKeydown}
+				onArgBlur={handleArgBlur}
+				onArgFocus={handleArgFocus}
+				onSelectSuggestion={selectSuggestion}
+				onSubmit={handleArgumentSubmit}
+				onCancel={handleCancelArgumentForm}
+			/>
+		</div>
+	{:else}
+		<ChatFormPickerList
+			items={filteredPrompts}
+			{isLoading}
+			{selectedIndex}
+			bind:searchQuery={internalSearchQuery}
+			{showSearchInput}
+			searchPlaceholder="Search prompts..."
+			emptyMessage="No MCP prompts available"
+			itemKey={(prompt) => prompt.serverName + ':' + prompt.name}
+		>
+			{#snippet item(prompt, index, isSelected)}
+				{@const server = serverSettingsMap.get(prompt.serverName)}
+				{@const serverLabel = server ? mcpStore.getServerLabel(server) : prompt.serverName}
+
+				<ChatFormPickerListItem
+					dataIndex={index}
+					{isSelected}
+					onclick={() => handlePromptClick(prompt)}
+				>
+					<ChatFormPickerItemHeader
+						{server}
+						{serverLabel}
+						title={prompt.title || prompt.name}
+						description={prompt.description}
+					>
+						{#snippet titleExtra()}
+							{#if prompt.arguments?.length}
+								<Badge variant="secondary">
+									{prompt.arguments.length} arg{prompt.arguments.length > 1 ? 's' : ''}
+								</Badge>
+							{/if}
+						{/snippet}
+					</ChatFormPickerItemHeader>
+				</ChatFormPickerListItem>
+			{/snippet}
+
+			{#snippet skeleton()}
+				<ChatFormPickerListItemSkeleton titleWidth="w-32" showBadge />
+			{/snippet}
+		</ChatFormPickerList>
+	{/if}
+</ChatFormPickerPopover>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentForm.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { MCPPromptInfo } from '$lib/types';
+	import ChatFormPromptPickerArgumentInput from './ChatFormPromptPickerArgumentInput.svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		prompt: MCPPromptInfo;
+		promptArgs: Record<string, string>;
+		suggestions: Record<string, string[]>;
+		loadingSuggestions: Record<string, boolean>;
+		activeAutocomplete: string | null;
+		autocompleteIndex: number;
+		promptError: string | null;
+		onArgInput: (argName: string, value: string) => void;
+		onArgKeydown: (event: KeyboardEvent, argName: string) => void;
+		onArgBlur: (argName: string) => void;
+		onArgFocus: (argName: string) => void;
+		onSelectSuggestion: (argName: string, value: string) => void;
+		onSubmit: (event: SubmitEvent) => void;
+		onCancel: () => void;
+	}
+
+	let {
+		prompt,
+		promptArgs,
+		suggestions,
+		loadingSuggestions,
+		activeAutocomplete,
+		autocompleteIndex,
+		promptError,
+		onArgInput,
+		onArgKeydown,
+		onArgBlur,
+		onArgFocus,
+		onSelectSuggestion,
+		onSubmit,
+		onCancel
+	}: Props = $props();
+</script>
+
+<form onsubmit={onSubmit} class="space-y-3 pt-4">
+	{#each prompt.arguments ?? [] as arg (arg.name)}
+		<ChatFormPromptPickerArgumentInput
+			argument={arg}
+			value={promptArgs[arg.name] ?? ''}
+			suggestions={suggestions[arg.name] ?? []}
+			isLoadingSuggestions={loadingSuggestions[arg.name] ?? false}
+			isAutocompleteActive={activeAutocomplete === arg.name}
+			autocompleteIndex={activeAutocomplete === arg.name ? autocompleteIndex : 0}
+			onInput={(value) => onArgInput(arg.name, value)}
+			onKeydown={(e) => onArgKeydown(e, arg.name)}
+			onBlur={() => onArgBlur(arg.name)}
+			onFocus={() => onArgFocus(arg.name)}
+			onSelectSuggestion={(value) => onSelectSuggestion(arg.name, value)}
+		/>
+	{/each}
+
+	{#if promptError}
+		<div
+			class="flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+			role="alert"
+		>
+			<span class="shrink-0">⚠</span>
+
+			<span>{promptError}</span>
+		</div>
+	{/if}
+
+	<div class="mt-8 flex justify-end gap-2">
+		<Button type="button" size="sm" onclick={onCancel} variant="secondary">Cancel</Button>
+
+		<Button size="sm" type="submit">Use Prompt</Button>
+	</div>
+</form>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentInput.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { MCPPromptInfo } from '$lib/types';
+	import { fly } from 'svelte/transition';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+
+	type PromptArgument = NonNullable<MCPPromptInfo['arguments']>[number];
+
+	interface Props {
+		argument: PromptArgument;
+		value: string;
+		suggestions?: string[];
+		isLoadingSuggestions?: boolean;
+		isAutocompleteActive?: boolean;
+		autocompleteIndex?: number;
+		onInput: (value: string) => void;
+		onKeydown: (event: KeyboardEvent) => void;
+		onBlur: () => void;
+		onFocus: () => void;
+		onSelectSuggestion: (value: string) => void;
+	}
+
+	let {
+		argument,
+		value = '',
+		suggestions = [],
+		isLoadingSuggestions = false,
+		isAutocompleteActive = false,
+		autocompleteIndex = 0,
+		onInput,
+		onKeydown,
+		onBlur,
+		onFocus,
+		onSelectSuggestion
+	}: Props = $props();
+</script>
+
+<div class="relative grid gap-1">
+	<Label for="arg-{argument.name}" class="mb-1 text-muted-foreground">
+		<span>
+			{argument.name}
+
+			{#if argument.required}
+				<span class="text-destructive">*</span>
+			{/if}
+		</span>
+
+		{#if isLoadingSuggestions}
+			<span class="text-xs text-muted-foreground/50">...</span>
+		{/if}
+	</Label>
+
+	<Input
+		id="arg-{argument.name}"
+		type="text"
+		{value}
+		oninput={(e) => onInput(e.currentTarget.value)}
+		onkeydown={onKeydown}
+		onblur={onBlur}
+		onfocus={onFocus}
+		placeholder={argument.description || argument.name}
+		required={argument.required}
+		autocomplete="off"
+	/>
+
+	{#if isAutocompleteActive && suggestions.length > 0}
+		<div
+			class="absolute top-full right-0 left-0 z-10 mt-1 max-h-32 overflow-y-auto rounded-lg border border-border/50 bg-background shadow-lg"
+			transition:fly={{ y: -5, duration: 100 }}
+		>
+			{#each suggestions as suggestion, i (suggestion)}
+				<button
+					type="button"
+					onmousedown={() => onSelectSuggestion(suggestion)}
+					class="w-full px-3 py-1.5 text-left text-sm hover:bg-accent {i === autocompleteIndex
+						? 'bg-accent'
+						: ''}"
+				>
+					{suggestion}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpResources.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpResourceStore } from '$lib/stores/mcp-resources.svelte';
+	import { KeyboardKey } from '$lib/enums';
+	import type { MCPResourceInfo, MCPServerSettingsEntry } from '$lib/types';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { FolderOpen } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import {
+		ChatFormPickerPopover,
+		ChatFormPickerList,
+		ChatFormPickerListItem,
+		ChatFormPickerItemHeader,
+		ChatFormPickerListItemSkeleton
+	} from '$lib/components/app/chat';
+
+	interface Props {
+		class?: string;
+		isOpen?: boolean;
+		searchQuery?: string;
+		onClose?: () => void;
+		onResourceSelect?: (resource: MCPResourceInfo) => void;
+		onBrowse?: () => void;
+	}
+
+	let {
+		class: className = '',
+		isOpen = false,
+		searchQuery = '',
+		onClose,
+		onResourceSelect,
+		onBrowse
+	}: Props = $props();
+
+	let resources = $state<MCPResourceInfo[]>([]);
+	let isLoading = $state(false);
+	let selectedIndex = $state(0);
+	let internalSearchQuery = $state('');
+
+	let serverSettingsMap = $derived.by(() => {
+		const servers = mcpStore.getServers();
+		const map = new SvelteMap<string, MCPServerSettingsEntry>();
+
+		for (const server of servers) {
+			map.set(server.id, server);
+		}
+
+		return map;
+	});
+
+	$effect(() => {
+		if (isOpen) {
+			loadResources();
+			selectedIndex = 0;
+		}
+	});
+
+	$effect(() => {
+		if (filteredResources.length > 0 && selectedIndex >= filteredResources.length) {
+			selectedIndex = 0;
+		}
+	});
+
+	async function loadResources() {
+		isLoading = true;
+
+		try {
+			const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+			const initialized = await mcpStore.ensureInitialized(perChatOverrides);
+
+			if (!initialized) {
+				resources = [];
+
+				return;
+			}
+
+			await mcpStore.fetchAllResources();
+			resources = mcpResourceStore.getAllResourceInfos();
+		} catch (error) {
+			console.error('[ChatFormPickerMcpResources] Failed to load resources:', error);
+			resources = [];
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleResourceClick(resource: MCPResourceInfo) {
+		mcpStore.attachResource(resource.uri);
+
+		onResourceSelect?.(resource);
+		onClose?.();
+	}
+
+	function isResourceAttached(uri: string): boolean {
+		return mcpResourceStore.isAttached(uri);
+	}
+
+	export function handleKeydown(event: KeyboardEvent): boolean {
+		if (!isOpen) return false;
+
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			onClose?.();
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ARROW_DOWN) {
+			event.preventDefault();
+
+			if (filteredResources.length > 0) {
+				selectedIndex = (selectedIndex + 1) % filteredResources.length;
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ARROW_UP) {
+			event.preventDefault();
+			if (filteredResources.length > 0) {
+				selectedIndex = selectedIndex === 0 ? filteredResources.length - 1 : selectedIndex - 1;
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ENTER) {
+			event.preventDefault();
+			if (filteredResources[selectedIndex]) {
+				handleResourceClick(filteredResources[selectedIndex]);
+			}
+
+			return true;
+		}
+
+		return false;
+	}
+
+	let filteredResources = $derived.by(() => {
+		const sortedServers = mcpStore.getServers();
+		const serverOrderMap = new Map(sortedServers.map((server, index) => [server.id, index]));
+
+		const sortedResources = [...resources].sort((a, b) => {
+			const orderA = serverOrderMap.get(a.serverName) ?? Number.MAX_SAFE_INTEGER;
+			const orderB = serverOrderMap.get(b.serverName) ?? Number.MAX_SAFE_INTEGER;
+
+			return orderA - orderB;
+		});
+
+		const query = (searchQuery || internalSearchQuery).toLowerCase();
+		if (!query) return sortedResources;
+
+		return sortedResources.filter(
+			(resource) =>
+				resource.name.toLowerCase().includes(query) ||
+				resource.title?.toLowerCase().includes(query) ||
+				resource.description?.toLowerCase().includes(query) ||
+				resource.uri.toLowerCase().includes(query)
+		);
+	});
+
+	let showSearchInput = $derived(resources.length > 3);
+</script>
+
+<ChatFormPickerPopover
+	bind:isOpen
+	class={className}
+	srLabel="Open resource picker"
+	{onClose}
+	onKeydown={handleKeydown}
+>
+	<ChatFormPickerList
+		items={filteredResources}
+		{isLoading}
+		{selectedIndex}
+		bind:searchQuery={internalSearchQuery}
+		{showSearchInput}
+		searchPlaceholder="Search resources..."
+		emptyMessage="No MCP resources available"
+		itemKey={(resource) => resource.serverName + ':' + resource.uri}
+	>
+		{#snippet item(resource, index, isSelected)}
+			{@const server = serverSettingsMap.get(resource.serverName)}
+			{@const serverLabel = server ? mcpStore.getServerLabel(server) : resource.serverName}
+
+			<ChatFormPickerListItem
+				dataIndex={index}
+				{isSelected}
+				onclick={() => handleResourceClick(resource)}
+			>
+				<ChatFormPickerItemHeader
+					{server}
+					{serverLabel}
+					title={resource.title || resource.name}
+					description={resource.description}
+				>
+					{#snippet titleExtra()}
+						{#if isResourceAttached(resource.uri)}
+							<span
+								class="inline-flex items-center rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary"
+							>
+								attached
+							</span>
+						{/if}
+					{/snippet}
+
+					{#snippet subtitle()}
+						<p class="mt-0.5 truncate text-xs text-muted-foreground/60">
+							{resource.uri}
+						</p>
+					{/snippet}
+				</ChatFormPickerItemHeader>
+			</ChatFormPickerListItem>
+		{/snippet}
+
+		{#snippet skeleton()}
+			<ChatFormPickerListItemSkeleton />
+		{/snippet}
+
+		{#snippet footer()}
+			{#if onBrowse && resources.length > 3}
+				<Button
+					class="fixed right-3 bottom-3"
+					type="button"
+					onclick={onBrowse}
+					variant="secondary"
+					size="sm"
+				>
+					<FolderOpen class="h-3 w-3" />
+
+					Browse all
+				</Button>
+			{/if}
+		{/snippet}
+	</ChatFormPickerList>
+</ChatFormPickerPopover>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickers.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import ChatFormPickerMcpPrompts from './ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte';
+	import ChatFormPickerMcpResources from './ChatFormPickerMcpResources.svelte';
+	import type { GetPromptResult, MCPPromptInfo } from '$lib/types';
+
+	interface Props {
+		isPromptPickerOpen?: boolean;
+		promptSearchQuery?: string;
+		isInlineResourcePickerOpen?: boolean;
+		resourceSearchQuery?: string;
+		onPromptPickerClose?: () => void;
+		onInlineResourcePickerClose?: () => void;
+		onInlineResourceSelect?: () => void;
+		onPromptLoadStart?: (
+			placeholderId: string,
+			promptInfo: MCPPromptInfo,
+			args?: Record<string, string>
+		) => void;
+		onPromptLoadComplete?: (placeholderId: string, result: GetPromptResult) => void;
+		onPromptLoadError?: (placeholderId: string, error: string) => void;
+		onInlineResourceBrowse?: () => void;
+	}
+
+	let {
+		isPromptPickerOpen,
+		promptSearchQuery,
+		isInlineResourcePickerOpen,
+		resourceSearchQuery,
+		onPromptPickerClose,
+		onInlineResourcePickerClose,
+		onInlineResourceSelect,
+		onPromptLoadStart,
+		onPromptLoadComplete,
+		onPromptLoadError,
+		onInlineResourceBrowse
+	}: Props = $props();
+
+	let promptPickerRef: ChatFormPickerMcpPrompts | undefined = $state(undefined);
+	let resourcePickerRef: ChatFormPickerMcpResources | undefined = $state(undefined);
+
+	/**
+	 * Delegates keyboard events to the active picker child.
+	 * Returns true if the event was handled.
+	 */
+	export function handleKeydown(event: KeyboardEvent): boolean {
+		if (isPromptPickerOpen && promptPickerRef?.handleKeydown(event)) {
+			return true;
+		}
+
+		if (isInlineResourcePickerOpen && resourcePickerRef?.handleKeydown(event)) {
+			return true;
+		}
+
+		return false;
+	}
+</script>
+
+<ChatFormPickerMcpPrompts
+	bind:this={promptPickerRef}
+	isOpen={isPromptPickerOpen}
+	searchQuery={promptSearchQuery}
+	onClose={onPromptPickerClose}
+	{onPromptLoadStart}
+	{onPromptLoadComplete}
+	{onPromptLoadError}
+/>
+
+<ChatFormPickerMcpResources
+	bind:this={resourcePickerRef}
+	isOpen={isInlineResourcePickerOpen}
+	searchQuery={resourceSearchQuery}
+	onClose={onInlineResourcePickerClose}
+	onResourceSelect={onInlineResourceSelect}
+	onBrowse={onInlineResourceBrowse}
+/>

tools/ui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { autoResizeTextarea } from '$lib/utils';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		onInput?: () => void;
+		onKeydown?: (event: KeyboardEvent) => void;
+		onPaste?: (event: ClipboardEvent) => void;
+		placeholder?: string;
+		value?: string;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		onInput,
+		onKeydown,
+		onPaste,
+		placeholder = 'Ask anything...',
+		value = $bindable('')
+	}: Props = $props();
+
+	let textareaElement: HTMLTextAreaElement | undefined;
+
+	onMount(() => {
+		if (textareaElement) {
+			autoResizeTextarea(textareaElement);
+			textareaElement.focus();
+		}
+	});
+
+	// Expose the textarea element for external access
+	export function getElement() {
+		return textareaElement;
+	}
+
+	export function focus() {
+		if (isMobile.current) return;
+
+		textareaElement?.focus({ preventScroll: true });
+	}
+
+	export function resetHeight() {
+		if (textareaElement) {
+			textareaElement.style.height = '1rem';
+		}
+	}
+</script>
+
+<div class="flex-1 {className}">
+	<textarea
+		bind:this={textareaElement}
+		bind:value
+		class={[
+			'text-md min-h-12 w-full resize-none border-0 bg-transparent p-0 leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0',
+			disabled && 'cursor-not-allowed'
+		]}
+		style="max-height: var(--max-message-height);"
+		{disabled}
+		onkeydown={onKeydown}
+		oninput={(event) => {
+			autoResizeTextarea(event.currentTarget);
+			onInput?.();
+		}}
+		onpaste={onPaste}
+		{placeholder}
+	></textarea>
+</div>

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

@@ -0,0 +1,411 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getChatActionsContext, setMessageEditContext } from '$lib/contexts';
+	import { chatStore, pendingEditMessageId } from '$lib/stores/chat.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { DatabaseService } from '$lib/services/database.service';
+	import { SYSTEM_MESSAGE_PLACEHOLDER } from '$lib/constants';
+	import { REASONING_TAGS } from '$lib/constants/agentic';
+	import { MessageRole, AttachmentType, AgenticSectionType } from '$lib/enums';
+	import {
+		ChatMessageAssistant,
+		ChatMessageUser,
+		ChatMessageSystem,
+		ChatMessageMcpPrompt
+	} from '$lib/components/app/chat';
+	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
+	import { deriveAgenticSections } from '$lib/utils';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+	import { ROUTES } from '$lib/constants/routes';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		toolMessages?: DatabaseMessage[];
+		isLastAssistantMessage?: boolean;
+		isLastUserMessage?: boolean;
+		nextAssistantMessage?: DatabaseMessage | null;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+	}
+
+	let {
+		class: className = '',
+		message,
+		toolMessages = [],
+		isLastAssistantMessage = false,
+		isLastUserMessage = false,
+		nextAssistantMessage = null,
+		siblingInfo = null
+	}: Props = $props();
+
+	const chatActions = getChatActionsContext();
+
+	let deletionInfo = $state<{
+		totalCount: number;
+		userMessages: number;
+		assistantMessages: number;
+		messageTypes: string[];
+	} | null>(null);
+	let editedContent = $derived(message.content);
+
+	let rawEditContent = $derived.by(() => {
+		if (message.role !== MessageRole.ASSISTANT) return undefined;
+
+		const sections = deriveAgenticSections(message, toolMessages, [], false);
+		const parts: string[] = [];
+
+		for (const section of sections) {
+			switch (section.type) {
+				case AgenticSectionType.REASONING:
+				case AgenticSectionType.REASONING_PENDING:
+					parts.push(`${REASONING_TAGS.START}\n${section.content}\n${REASONING_TAGS.END}`);
+					break;
+
+				case AgenticSectionType.TEXT:
+					parts.push(section.content);
+					break;
+
+				case AgenticSectionType.TOOL_CALL:
+				case AgenticSectionType.TOOL_CALL_PENDING:
+				case AgenticSectionType.TOOL_CALL_STREAMING: {
+					const callObj: Record<string, unknown> = { name: section.toolName };
+
+					if (section.toolArgs) {
+						try {
+							callObj.arguments = JSON.parse(section.toolArgs);
+						} catch {
+							callObj.arguments = section.toolArgs;
+						}
+					}
+
+					parts.push(JSON.stringify(callObj, null, 2));
+
+					if (section.toolResult) {
+						parts.push(`[Tool Result]\n${section.toolResult}`);
+					}
+
+					break;
+				}
+			}
+		}
+
+		return parts.join('\n\n\n');
+	});
+	let editedExtras = $derived<DatabaseMessageExtra[]>(message.extra ? [...message.extra] : []);
+	let editedUploadedFiles = $state<ChatUploadedFile[]>([]);
+	let isEditing = $state(false);
+	let showDeleteDialog = $state(false);
+	let shouldBranchAfterEdit = $state(false);
+	let textareaElement: HTMLTextAreaElement | undefined = $state();
+
+	let showSaveOnlyOption = $derived(message.role === MessageRole.USER);
+	let showBranchAfterEditOption = $derived(message.role === MessageRole.ASSISTANT);
+
+	setMessageEditContext({
+		get isEditing() {
+			return isEditing;
+		},
+		get editedContent() {
+			return editedContent;
+		},
+		get editedExtras() {
+			return editedExtras;
+		},
+		get editedUploadedFiles() {
+			return editedUploadedFiles;
+		},
+		get originalContent() {
+			return message.role === MessageRole.ASSISTANT
+				? (rawEditContent ?? message.content)
+				: message.content;
+		},
+		get originalExtras() {
+			return message.extra || [];
+		},
+		get showSaveOnlyOption() {
+			return showSaveOnlyOption;
+		},
+		get showBranchAfterEditOption() {
+			return showBranchAfterEditOption;
+		},
+		get shouldBranchAfterEdit() {
+			return shouldBranchAfterEdit;
+		},
+		get messageRole() {
+			return message.role;
+		},
+		get rawEditContent() {
+			return rawEditContent;
+		},
+		setContent: (content: string) => {
+			editedContent = content;
+		},
+		setExtras: (extras: DatabaseMessageExtra[]) => {
+			editedExtras = extras;
+		},
+		setUploadedFiles: (files: ChatUploadedFile[]) => {
+			editedUploadedFiles = files;
+		},
+		setShouldBranchAfterEdit: (value: boolean) => {
+			shouldBranchAfterEdit = value;
+		},
+		save: handleSaveEdit,
+		saveOnly: handleSaveEditOnly,
+		cancel: handleCancelEdit,
+		startEdit: handleEdit
+	});
+
+	let mcpPromptExtra = $derived.by(() => {
+		if (message.role !== MessageRole.USER) return null;
+		if (message.content.trim()) return null;
+		if (!message.extra || message.extra.length !== 1) return null;
+
+		const extra = message.extra[0];
+
+		if (extra.type === AttachmentType.MCP_PROMPT) {
+			return extra as DatabaseMessageExtraMcpPrompt;
+		}
+
+		return null;
+	});
+
+	$effect(() => {
+		const pendingId = pendingEditMessageId();
+
+		if (pendingId && pendingId === message.id && !isEditing) {
+			handleEdit();
+			chatStore.clearPendingEditMessageId();
+		}
+	});
+
+	async function handleCancelEdit() {
+		isEditing = false;
+
+		// If canceling a new system message with placeholder content, remove it without deleting children
+		if (message.role === MessageRole.SYSTEM && message.content === SYSTEM_MESSAGE_PLACEHOLDER) {
+			const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
+
+			if (conversationDeleted) {
+				goto(ROUTES.START);
+			}
+
+			return;
+		}
+
+		editedContent =
+			message.role === MessageRole.ASSISTANT
+				? rawEditContent || message.content || ''
+				: message.content;
+		editedExtras = message.extra ? [...message.extra] : [];
+		editedUploadedFiles = [];
+	}
+
+	function handleCopy() {
+		chatActions.copy(message);
+	}
+
+	async function handleConfirmDelete() {
+		if (message.role === MessageRole.SYSTEM) {
+			const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
+
+			if (conversationDeleted) {
+				goto(ROUTES.START);
+			}
+		} else {
+			chatActions.delete(message);
+		}
+
+		showDeleteDialog = false;
+	}
+
+	async function handleDelete() {
+		deletionInfo = await chatStore.getDeletionInfo(message.id);
+		showDeleteDialog = true;
+	}
+
+	function handleEdit() {
+		isEditing = true;
+		// Clear temporary placeholder content for system messages
+		if (message.role === MessageRole.SYSTEM && message.content === SYSTEM_MESSAGE_PLACEHOLDER) {
+			editedContent = '';
+		} else if (message.role === MessageRole.ASSISTANT) {
+			editedContent = rawEditContent || message.content || '';
+		} else {
+			editedContent = message.content;
+		}
+
+		textareaElement?.focus({ preventScroll: true });
+		editedExtras = message.extra ? [...message.extra] : [];
+		editedUploadedFiles = [];
+
+		setTimeout(() => {
+			if (textareaElement) {
+				textareaElement.focus();
+				textareaElement.setSelectionRange(
+					textareaElement.value.length,
+					textareaElement.value.length
+				);
+			}
+		}, 0);
+	}
+
+	function handleRegenerate(modelOverride?: string) {
+		chatActions.regenerateWithBranching(message, modelOverride);
+	}
+
+	function handleContinue() {
+		chatActions.continueAssistantMessage(message);
+	}
+
+	function handleForkConversation(options: { name: string; includeAttachments: boolean }) {
+		chatActions.forkConversation(message, options);
+	}
+
+	function handleNavigateToSibling(siblingId: string) {
+		chatActions.navigateToSibling(siblingId);
+	}
+
+	async function handleSaveEdit() {
+		if (message.role === MessageRole.SYSTEM) {
+			// System messages: update in place without branching
+			const newContent = editedContent.trim();
+
+			// If content is empty, remove without deleting children
+			if (!newContent) {
+				const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
+				isEditing = false;
+				if (conversationDeleted) {
+					goto(ROUTES.START);
+				}
+				return;
+			}
+
+			await DatabaseService.updateMessage(message.id, { content: newContent });
+			const index = conversationsStore.findMessageIndex(message.id);
+			if (index !== -1) {
+				conversationsStore.updateMessageAtIndex(index, { content: newContent });
+			}
+		} else if (message.role === MessageRole.USER) {
+			const finalExtras = await getMergedExtras();
+			chatActions.editWithBranching(message, editedContent.trim(), finalExtras);
+		} else {
+			// For assistant messages, preserve exact content including trailing whitespace
+			// This is important for the Continue feature to work properly
+			chatActions.editWithReplacement(message, editedContent, shouldBranchAfterEdit);
+		}
+
+		isEditing = false;
+		shouldBranchAfterEdit = false;
+		editedUploadedFiles = [];
+	}
+
+	async function handleSaveEditOnly() {
+		if (message.role === MessageRole.USER) {
+			// For user messages, trim to avoid accidental whitespace
+			const finalExtras = await getMergedExtras();
+			chatActions.editUserMessagePreserveResponses(message, editedContent.trim(), finalExtras);
+		}
+
+		isEditing = false;
+		editedUploadedFiles = [];
+	}
+
+	async function getMergedExtras(): Promise<DatabaseMessageExtra[]> {
+		if (editedUploadedFiles.length === 0) {
+			return editedExtras;
+		}
+
+		const plainFiles = $state.snapshot(editedUploadedFiles);
+		const result = await parseFilesToMessageExtras(plainFiles);
+		const newExtras = result?.extras || [];
+
+		return [...editedExtras, ...newExtras];
+	}
+
+	function handleShowDeleteDialogChange(show: boolean) {
+		showDeleteDialog = show;
+	}
+</script>
+
+<div class="chat-message">
+	{#if message.role === MessageRole.SYSTEM}
+		<ChatMessageSystem
+			bind:textareaElement
+			class={className}
+			{deletionInfo}
+			{message}
+			onConfirmDelete={handleConfirmDelete}
+			onCopy={handleCopy}
+			onDelete={handleDelete}
+			onEdit={handleEdit}
+			onNavigateToSibling={handleNavigateToSibling}
+			onShowDeleteDialogChange={handleShowDeleteDialogChange}
+			{showDeleteDialog}
+			{siblingInfo}
+		/>
+	{:else if mcpPromptExtra}
+		<ChatMessageMcpPrompt
+			class={className}
+			{deletionInfo}
+			{message}
+			mcpPrompt={mcpPromptExtra}
+			onConfirmDelete={handleConfirmDelete}
+			onCopy={handleCopy}
+			onDelete={handleDelete}
+			onEdit={handleEdit}
+			onNavigateToSibling={handleNavigateToSibling}
+			onShowDeleteDialogChange={handleShowDeleteDialogChange}
+			{showDeleteDialog}
+			{siblingInfo}
+		/>
+	{:else if message.role === MessageRole.USER}
+		<ChatMessageUser
+			class={className}
+			{deletionInfo}
+			{isLastUserMessage}
+			{message}
+			{nextAssistantMessage}
+			onConfirmDelete={handleConfirmDelete}
+			onCopy={handleCopy}
+			onDelete={handleDelete}
+			onEdit={handleEdit}
+			onForkConversation={handleForkConversation}
+			onNavigateToSibling={handleNavigateToSibling}
+			onShowDeleteDialogChange={handleShowDeleteDialogChange}
+			{showDeleteDialog}
+			{siblingInfo}
+		/>
+	{:else}
+		<ChatMessageAssistant
+			bind:textareaElement
+			class={className}
+			{deletionInfo}
+			{isLastAssistantMessage}
+			{message}
+			{toolMessages}
+			onConfirmDelete={handleConfirmDelete}
+			onContinue={handleContinue}
+			onCopy={handleCopy}
+			onDelete={handleDelete}
+			onEdit={handleEdit}
+			onForkConversation={handleForkConversation}
+			onNavigateToSibling={handleNavigateToSibling}
+			onRegenerate={handleRegenerate}
+			onShowDeleteDialogChange={handleShowDeleteDialogChange}
+			{showDeleteDialog}
+			{siblingInfo}
+		/>
+	{/if}
+</div>
+
+<style>
+	/*
+	 * The browser skips layout and paint for messages outside the
+	 * viewport. contain-intrinsic-size reuses the last rendered size
+	 * once known; 500px sizes messages that have never been rendered.
+	 */
+	.chat-message {
+		content-visibility: auto;
+		contain-intrinsic-size: auto 500px;
+	}
+</style>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+	import {
+		ChatMessageAgenticContent,
+		ChatMessageActionIcons,
+		ChatMessageAssistantModel,
+		ChatMessageAssistantProcessingInfo,
+		ChatMessageAssistantRawOutput,
+		ChatMessageAssistantStatistics,
+		ChatMessageEditForm
+	} from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { chatStore, isLoading, isChatStreaming } from '$lib/stores/chat.svelte';
+	import { modelLoadProgressText } from '$lib/utils';
+	import { MessageRole } from '$lib/enums';
+	import { config } from '$lib/stores/settings.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import { modelsStore } from '$lib/stores/models.svelte';
+
+	import { hasAgenticContent } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		isLastAssistantMessage?: boolean;
+		message: DatabaseMessage;
+		toolMessages?: DatabaseMessage[];
+		onCopy: () => void;
+		onConfirmDelete: () => void;
+		onContinue?: () => void;
+		onDelete: () => void;
+		onEdit?: () => void;
+		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onRegenerate: (modelOverride?: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		showDeleteDialog: boolean;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		textareaElement?: HTMLTextAreaElement;
+	}
+
+	let {
+		class: className = '',
+		deletionInfo,
+		isLastAssistantMessage = false,
+		message,
+		toolMessages = [],
+		onConfirmDelete,
+		onContinue,
+		onCopy,
+		onDelete,
+		onEdit,
+		onForkConversation,
+		onNavigateToSibling,
+		onRegenerate,
+		onShowDeleteDialogChange,
+		showDeleteDialog,
+		siblingInfo = null,
+		textareaElement = $bindable()
+	}: Props = $props();
+
+	// Get edit context
+	const editCtx = getMessageEditContext();
+
+	const isAgentic = $derived(hasAgenticContent(message, toolMessages));
+	const processingState = useProcessingState();
+
+	let currentConfig = $derived(config());
+	let isRouter = $derived(isRouterMode());
+
+	let showRawOutput = $state(false);
+
+	let displayedModel = $derived(message.model ?? null);
+
+	let isCurrentlyLoading = $derived(isLoading());
+	let isStreaming = $derived(isChatStreaming());
+	let hasNoContent = $derived(!message?.content?.trim());
+	let isActivelyProcessing = $derived(isCurrentlyLoading || isStreaming);
+
+	// during a router auto-load the message has no model yet: target the model frozen in the
+	// persisted stream state (survives a reload), then fall back to the dropdown selection
+	let loadTargetModel = $derived(
+		message.model ?? chatStore.getResumeModel(message.convId) ?? modelsStore.selectedModelName
+	);
+	let modelLoadProgress = $derived(
+		isRouter && loadTargetModel ? modelsStore.getLoadProgress(loadTargetModel) : null
+	);
+	let modelLoadingText = $derived(modelLoadProgressText(modelLoadProgress));
+
+	let showProcessingInfoTop = $derived(
+		message?.role === MessageRole.ASSISTANT &&
+			isActivelyProcessing &&
+			hasNoContent &&
+			!isAgentic &&
+			isLastAssistantMessage
+	);
+
+	let showProcessingInfoBottom = $derived(
+		message?.role === MessageRole.ASSISTANT &&
+			isActivelyProcessing &&
+			(!hasNoContent || isAgentic) &&
+			isLastAssistantMessage
+	);
+
+	let assistantEl: HTMLDivElement | undefined = $state();
+	let lastUserMessageHeight = $state(0);
+	let assistantMarginTop = $state(0);
+
+	$effect(() => {
+		if (!assistantEl) return;
+
+		assistantMarginTop = Math.round(parseFloat(getComputedStyle(assistantEl).marginTop));
+
+		const chatMessageEl = assistantEl.closest('.chat-message');
+		const previousChatMessage = chatMessageEl?.previousElementSibling;
+		const userMessageEl = previousChatMessage?.querySelector(
+			'.chat-message-user'
+		) as HTMLElement | null;
+
+		if (!userMessageEl) {
+			lastUserMessageHeight = 0;
+			return;
+		}
+
+		const updateHeight = () => {
+			const rect = userMessageEl.getBoundingClientRect();
+			const marginTop = Math.round(parseFloat(getComputedStyle(userMessageEl).marginTop));
+			lastUserMessageHeight = Math.round(rect.height + marginTop);
+		};
+
+		updateHeight();
+
+		const resizeObserver = new ResizeObserver(updateHeight);
+		resizeObserver.observe(userMessageEl);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+
+	$effect(() => {
+		if (showProcessingInfoTop || showProcessingInfoBottom) {
+			processingState.startMonitoring();
+		}
+	});
+</script>
+
+<div
+	bind:this={assistantEl}
+	class="chat-message-assistant text-md group w-full leading-7.5 {className}"
+	style:--last-user-message-height={lastUserMessageHeight > 0
+		? `${lastUserMessageHeight}px`
+		: undefined}
+	style:--assistant-margin-top={assistantMarginTop > 0 ? `${assistantMarginTop}px` : undefined}
+	role="group"
+	aria-label="Assistant message with actions"
+>
+	{#if showProcessingInfoTop}
+		<ChatMessageAssistantProcessingInfo {modelLoadingText} {processingState} position="top" />
+	{/if}
+
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
+	{:else}
+		{#if showRawOutput}
+			<ChatMessageAssistantRawOutput {message} {toolMessages} />
+		{:else}
+			<ChatMessageAgenticContent
+				{message}
+				{toolMessages}
+				isStreaming={isChatStreaming()}
+				{isLastAssistantMessage}
+			/>
+		{/if}
+	{/if}
+
+	{#if showProcessingInfoBottom}
+		<ChatMessageAssistantProcessingInfo {modelLoadingText} {processingState} position="bottom" />
+	{/if}
+
+	<div class="info my-6 grid gap-4 tabular-nums">
+		{#if displayedModel}
+			<div class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground">
+				<ChatMessageAssistantModel
+					{displayedModel}
+					isLoading={isLoading()}
+					{isRouter}
+					{onRegenerate}
+				/>
+
+				<ChatMessageAssistantStatistics
+					{message}
+					isLoading={isLoading()}
+					{processingState}
+					showMessageStats={currentConfig.showMessageStats}
+				/>
+			</div>
+		{/if}
+	</div>
+
+	{#if message.timestamp && !editCtx.isEditing}
+		<ChatMessageActionIcons
+			role={MessageRole.ASSISTANT}
+			justify="start"
+			actionsPosition="left"
+			{siblingInfo}
+			{showDeleteDialog}
+			{deletionInfo}
+			{onCopy}
+			{onEdit}
+			{onRegenerate}
+			onContinue={currentConfig.enableContinueGeneration ? onContinue : undefined}
+			{onForkConversation}
+			{onDelete}
+			{onConfirmDelete}
+			{onNavigateToSibling}
+			{onShowDeleteDialogChange}
+			showRawOutputSwitch={currentConfig.showRawOutputSwitch}
+			rawOutputEnabled={showRawOutput}
+			onRawOutputToggle={(enabled) => (showRawOutput = enabled)}
+		/>
+	{/if}
+</div>
+
+<style>
+	:global(.chat-message):last-child .chat-message-assistant {
+		--assistant-min-height-offset: calc(
+			var(--last-user-message-height, 19rem) + var(--chat-form-height, 6rem) +
+				var(--chat-form-bottom-position, 0.5rem) + var(--chat-form-padding-top, 6rem) +
+				var(--assistant-margin-top, 3rem)
+		);
+		min-height: calc(100dvh - var(--assistant-min-height-offset));
+
+		@media (width > 768px) {
+			--assistant-min-height-offset: calc(
+				var(--last-user-message-height, 18rem) + var(--chat-form-height, 6rem) +
+					var(--chat-form-bottom-position, 1rem) + var(--chat-form-padding-top, 6rem) +
+					var(--assistant-margin-top, 3rem)
+			);
+		}
+	}
+</style>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistantModel.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { ModelBadge, ModelsSelectorDropdown } from '$lib/components/app';
+	import { copyToClipboard } from '$lib/utils';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { ServerModelStatus } from '$lib/enums';
+
+	interface Props {
+		displayedModel: string | null;
+		isRouter: boolean;
+		isLoading: boolean;
+		onRegenerate: (modelOverride?: string) => void;
+	}
+
+	let { displayedModel, isRouter, isLoading, onRegenerate }: Props = $props();
+
+	let pendingModel = $state<string | null>(null);
+
+	function handleCopyModel() {
+		void copyToClipboard(displayedModel ?? '');
+	}
+</script>
+
+{#if isRouter}
+	<ModelsSelectorDropdown
+		currentModel={pendingModel ?? displayedModel}
+		disabled={isLoading}
+		onModelChange={async (modelId: string, modelName: string) => {
+			const status = modelsStore.getModelStatus(modelId);
+
+			if (status !== ServerModelStatus.LOADED) {
+				pendingModel = modelId;
+
+				try {
+					await modelsStore.loadModel(modelId);
+				} finally {
+					pendingModel = null;
+				}
+			}
+
+			onRegenerate(modelName);
+			return true;
+		}}
+	/>
+{:else}
+	<ModelBadge model={displayedModel || undefined} onclick={handleCopyModel} />
+{/if}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistantProcessingInfo.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { UseProcessingStateReturn } from '$lib/hooks/use-processing-state.svelte';
+
+	interface Props {
+		modelLoadingText: string | null;
+		processingState: UseProcessingStateReturn;
+		position: 'top' | 'bottom';
+	}
+
+	let { modelLoadingText, processingState, position }: Props = $props();
+
+	const marginClass = position === 'top' ? 'mt-6' : 'mt-4';
+</script>
+
+<div class="{marginClass} w-full max-w-3xl" in:fade>
+	<div class="flex flex-col items-start gap-2">
+		<span class="shimmer-text text-sm">
+			{modelLoadingText ??
+				processingState.getPromptProgressText() ??
+				processingState.getProcessingMessage() ??
+				'Processing...'}
+		</span>
+	</div>
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistantRawOutput.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { deriveAgenticSections, buildAssistantRawOutput } from '$lib/utils';
+
+	interface Props {
+		message: DatabaseMessage;
+		toolMessages?: DatabaseMessage[];
+	}
+
+	let { message, toolMessages = [] }: Props = $props();
+
+	let rawOutputContent = $derived.by(() => {
+		const sections = deriveAgenticSections(message, toolMessages, [], false);
+		return buildAssistantRawOutput(sections);
+	});
+</script>
+
+<pre class="raw-output">{rawOutputContent || ''}</pre>
+
+<style>
+	.raw-output {
+		width: 100%;
+		max-width: 48rem;
+		margin-top: 1.5rem;
+		padding: 1rem 1.25rem;
+		border-radius: 1rem;
+		background: hsl(var(--muted) / 0.3);
+		color: var(--foreground);
+		font-size: 0.875rem;
+		line-height: 1.6;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+</style>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistantStatistics.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { ChatMessageStatistics } from '$lib/components/app';
+	import { ChatMessageStatisticsMode } from '$lib/enums';
+	import type { UseProcessingStateReturn } from '$lib/hooks/use-processing-state.svelte';
+
+	interface Props {
+		message: DatabaseMessage;
+		isLoading: boolean;
+		processingState: UseProcessingStateReturn;
+		showMessageStats: boolean;
+	}
+
+	let { message, isLoading, processingState, showMessageStats }: Props = $props();
+</script>
+
+{#if showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
+	{@const agentic = message.timings.agentic}
+	<ChatMessageStatistics
+		mode={ChatMessageStatisticsMode.GENERATION}
+		promptTokens={agentic ? agentic.llm.prompt_n : message.timings.prompt_n}
+		promptMs={agentic ? agentic.llm.prompt_ms : message.timings.prompt_ms}
+		predictedTokens={agentic ? agentic.llm.predicted_n : message.timings.predicted_n}
+		predictedMs={agentic ? agentic.llm.predicted_ms : message.timings.predicted_ms}
+		agenticTimings={agentic}
+	/>
+{:else if isLoading && showMessageStats}
+	{@const liveStats = processingState.getLiveProcessingStats()}
+	{@const genStats = processingState.getLiveGenerationStats()}
+
+	{#if genStats}
+		<ChatMessageStatistics
+			mode={ChatMessageStatisticsMode.GENERATION}
+			isLive
+			promptTokens={liveStats?.tokensProcessed}
+			promptMs={liveStats?.timeMs}
+			predictedTokens={genStats.tokensGenerated}
+			predictedMs={genStats.timeMs}
+		/>
+	{/if}
+{/if}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPrompt.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import {
+		ChatMessageActionIcons,
+		ChatMessageEditForm,
+		ChatMessageMcpPromptContent
+	} from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { MessageRole, McpPromptVariant } from '$lib/enums';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		mcpPrompt: DatabaseMessageExtraMcpPrompt;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		showDeleteDialog: boolean;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		onCopy: () => void;
+		onEdit: () => void;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+	}
+
+	let {
+		class: className = '',
+		message,
+		mcpPrompt,
+		siblingInfo = null,
+		showDeleteDialog,
+		deletionInfo,
+		onCopy,
+		onEdit,
+		onDelete,
+		onConfirmDelete,
+		onNavigateToSibling,
+		onShowDeleteDialogChange
+	}: Props = $props();
+
+	// Get edit context
+	const editCtx = getMessageEditContext();
+</script>
+
+<div
+	aria-label="MCP Prompt message with actions"
+	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
+	role="group"
+>
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
+	{:else}
+		<ChatMessageMcpPromptContent
+			prompt={mcpPrompt}
+			variant={McpPromptVariant.MESSAGE}
+			class="w-full max-w-[80%]"
+		/>
+
+		{#if message.timestamp}
+			<div class="max-w-[80%]">
+				<ChatMessageActionIcons
+					actionsPosition="right"
+					{deletionInfo}
+					justify="end"
+					{onConfirmDelete}
+					{onCopy}
+					{onDelete}
+					{onEdit}
+					{onNavigateToSibling}
+					{onShowDeleteDialogChange}
+					{siblingInfo}
+					{showDeleteDialog}
+					role={MessageRole.USER}
+				/>
+			</div>
+		{/if}
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPromptContent.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { Card } from '$lib/components/ui/card';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { McpPromptVariant } from '$lib/enums';
+	import { TruncatedText } from '$lib/components/app/misc';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface ContentPart {
+		text: string;
+		argKey: string | null;
+	}
+
+	interface Props {
+		class?: string;
+		prompt: DatabaseMessageExtraMcpPrompt;
+		variant?: McpPromptVariant;
+		isLoading?: boolean;
+		loadError?: string;
+	}
+
+	let {
+		class: className = '',
+		prompt,
+		variant = McpPromptVariant.MESSAGE,
+		isLoading = false,
+		loadError
+	}: Props = $props();
+
+	let hoveredArgKey = $state<string | null>(null);
+	let argumentEntries = $derived(Object.entries(prompt.arguments ?? {}));
+	let hasArguments = $derived(prompt.arguments && Object.keys(prompt.arguments).length > 0);
+	let hasContent = $derived(prompt.content && prompt.content.trim().length > 0);
+
+	let contentParts = $derived.by((): ContentPart[] => {
+		if (!prompt.content || !hasArguments) {
+			return [{ text: prompt.content || '', argKey: null }];
+		}
+
+		const parts: ContentPart[] = [];
+		let remaining = prompt.content;
+
+		const valueToKey = new SvelteMap<string, string>();
+		for (const [key, value] of argumentEntries) {
+			if (value && value.trim()) {
+				valueToKey.set(value, key);
+			}
+		}
+
+		const sortedValues = [...valueToKey.keys()].sort((a, b) => b.length - a.length);
+
+		while (remaining.length > 0) {
+			let earliestMatch: { index: number; value: string; key: string } | null = null;
+
+			for (const value of sortedValues) {
+				const index = remaining.indexOf(value);
+				if (index !== -1 && (earliestMatch === null || index < earliestMatch.index)) {
+					earliestMatch = { index, value, key: valueToKey.get(value)! };
+				}
+			}
+
+			if (earliestMatch) {
+				if (earliestMatch.index > 0) {
+					parts.push({ text: remaining.slice(0, earliestMatch.index), argKey: null });
+				}
+
+				parts.push({ text: earliestMatch.value, argKey: earliestMatch.key });
+				remaining = remaining.slice(earliestMatch.index + earliestMatch.value.length);
+			} else {
+				parts.push({ text: remaining, argKey: null });
+
+				break;
+			}
+		}
+
+		return parts;
+	});
+
+	let showArgBadges = $derived(hasArguments && !isLoading && !loadError);
+	let isAttachment = $derived(variant === McpPromptVariant.ATTACHMENT);
+	let textSizeClass = $derived(isAttachment ? 'text-xs' : 'text-md');
+	let paddingClass = $derived(isAttachment ? 'px-3 py-2' : 'px-3.75 py-2.5');
+	let maxHeightStyle = $derived(
+		isAttachment ? 'max-height: 6rem;' : 'max-height: var(--max-message-height);'
+	);
+
+	const serverFavicon = $derived(mcpStore.getServerFavicon(prompt.serverName));
+	const serverDisplayName = $derived(mcpStore.getServerDisplayName(prompt.serverName));
+</script>
+
+<div class="flex flex-col gap-2 {className}">
+	<div class="flex items-center justify-between gap-2">
+		<div class="inline-flex flex-wrap items-center gap-1.25 text-xs text-muted-foreground">
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					{#if serverFavicon}
+						<img
+							src={serverFavicon}
+							alt=""
+							class="h-3.5 w-3.5 shrink-0 rounded-sm"
+							onerror={(e) => {
+								(e.currentTarget as HTMLImageElement).style.display = 'none';
+							}}
+						/>
+					{/if}
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<span>{serverDisplayName}</span>
+				</Tooltip.Content>
+			</Tooltip.Root>
+
+			<TruncatedText text={prompt.name} />
+		</div>
+
+		{#if showArgBadges}
+			<div class="flex flex-wrap justify-end gap-1">
+				{#each argumentEntries as [key, value] (key)}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<span
+								class="rounded-sm bg-purple-200/60 px-1.5 py-0.5 text-[10px] leading-none text-purple-700 transition-opacity dark:bg-purple-800/40 dark:text-purple-300 {hoveredArgKey &&
+								hoveredArgKey !== key
+									? 'opacity-30'
+									: ''}"
+								onmouseenter={() => (hoveredArgKey = key)}
+								onmouseleave={() => (hoveredArgKey = null)}
+							>
+								{key}
+							</span>
+						</Tooltip.Trigger>
+
+						<Tooltip.Content>
+							<span class="max-w-xs break-all">{value}</span>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if loadError}
+		<Card
+			class="relative overflow-hidden rounded-[1.125rem] border border-destructive/50 bg-destructive/10 backdrop-blur-md"
+		>
+			<div
+				class="overflow-y-auto {paddingClass}"
+				style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
+			>
+				<span class="{textSizeClass} text-destructive">{loadError}</span>
+			</div>
+		</Card>
+	{:else if isLoading}
+		<Card
+			class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 px-1 py-2 backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
+		>
+			<div
+				class="overflow-y-auto {paddingClass}"
+				style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
+			>
+				<div class="space-y-2">
+					<div class="h-3 w-3/4 animate-pulse rounded bg-foreground/20"></div>
+
+					<div class="h-3 w-full animate-pulse rounded bg-foreground/20"></div>
+
+					<div class="h-3 w-5/6 animate-pulse rounded bg-foreground/20"></div>
+				</div>
+			</div>
+		</Card>
+	{:else if hasContent}
+		<Card
+			class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 py-0 text-foreground backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
+		>
+			<div
+				class="overflow-y-auto {paddingClass}"
+				style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
+			>
+				<span class="{textSizeClass} whitespace-pre-wrap">
+					<!-- This formatting is needed to keep the text in proper shape -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					{#each contentParts as part, i (i)}{#if part.argKey}<span
+								class="rounded-sm bg-purple-300/50 px-0.5 text-purple-900 transition-opacity dark:bg-purple-700/50 dark:text-purple-100 {hoveredArgKey &&
+								hoveredArgKey !== part.argKey
+									? 'opacity-30'
+									: ''}"
+								onmouseenter={() => (hoveredArgKey = part.argKey)}
+								onmouseleave={() => (hoveredArgKey = null)}>{part.text}</span
+							>{:else}<span class="transition-opacity {hoveredArgKey ? 'opacity-30' : ''}"
+								>{part.text}</span
+							>{/if}{/each}</span
+				>
+			</div>
+		</Card>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+	import { Check, X } from '@lucide/svelte';
+	import { ChatMessageActionIcons, MarkdownContent } from '$lib/components/app';
+	import { Button } from '$lib/components/ui/button';
+	import { Card } from '$lib/components/ui/card';
+	import { INPUT_CLASSES } from '$lib/constants';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { KeyboardKey, MessageRole } from '$lib/enums';
+	import { config } from '$lib/stores/settings.svelte';
+	import { autoResizeTextarea, isIMEComposing } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		showDeleteDialog: boolean;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		onCopy: () => void;
+		onEdit: () => void;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		textareaElement?: HTMLTextAreaElement;
+	}
+
+	let {
+		class: className = '',
+		message,
+		siblingInfo = null,
+		showDeleteDialog,
+		deletionInfo,
+		onCopy,
+		onEdit,
+		onDelete,
+		onConfirmDelete,
+		onNavigateToSibling,
+		onShowDeleteDialogChange,
+		textareaElement = $bindable()
+	}: Props = $props();
+
+	const editCtx = getMessageEditContext();
+
+	function handleEditKeydown(event: KeyboardEvent) {
+		if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
+			event.preventDefault();
+
+			editCtx.save();
+		} else if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+
+			editCtx.cancel();
+		}
+	}
+
+	let isMultiline = $state(false);
+	let messageElement: HTMLElement | undefined = $state();
+	let isExpanded = $state(false);
+	let contentHeight = $state(0);
+
+	const MAX_HEIGHT = 200; // pixels
+	const currentConfig = config();
+
+	let showExpandButton = $derived(contentHeight > MAX_HEIGHT);
+
+	$effect(() => {
+		if (!messageElement || !message.content.trim()) return;
+
+		if (message.content.includes('\n')) {
+			isMultiline = true;
+		}
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const element = entry.target as HTMLElement;
+				const estimatedSingleLineHeight = 24;
+
+				isMultiline = element.offsetHeight > estimatedSingleLineHeight * 1.5;
+				contentHeight = element.scrollHeight;
+			}
+		});
+
+		resizeObserver.observe(messageElement);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+	$effect(() => {
+		if (editCtx.isEditing && textareaElement) {
+			autoResizeTextarea(textareaElement);
+		}
+	});
+
+	function toggleExpand() {
+		isExpanded = !isExpanded;
+	}
+</script>
+
+<div
+	aria-label="System message with actions"
+	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
+	role="group"
+>
+	{#if editCtx.isEditing}
+		<div class="w-full max-w-[80%]">
+			<textarea
+				style="max-height: var(--max-message-height);"
+				bind:this={textareaElement}
+				value={editCtx.editedContent}
+				class="min-h-[60px] w-full resize-none rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
+				onkeydown={handleEditKeydown}
+				oninput={(e) => {
+					autoResizeTextarea(e.currentTarget);
+					editCtx.setContent(e.currentTarget.value);
+				}}
+				placeholder="Edit system message..."
+			></textarea>
+
+			<div class="mt-2 flex justify-end gap-2">
+				<Button class="h-8 px-3" onclick={editCtx.cancel} size="sm" variant="outline">
+					<X class="mr-1 h-3 w-3" />
+
+					Cancel
+				</Button>
+
+				<Button
+					class="h-8 px-3"
+					onclick={editCtx.save}
+					disabled={!editCtx.editedContent.trim()}
+					size="sm"
+				>
+					<Check class="mr-1 h-3 w-3" />
+
+					Save
+				</Button>
+			</div>
+		</div>
+	{:else}
+		{#if message.content.trim()}
+			<div class="relative max-w-[80%]">
+				<button
+					class="group/expand w-full text-left {!isExpanded && showExpandButton
+						? 'cursor-pointer'
+						: 'cursor-auto'}"
+					onclick={showExpandButton && !isExpanded ? toggleExpand : undefined}
+					type="button"
+				>
+					<Card
+						class="overflow-y-auto rounded-[1.125rem] !border-2 !border-dashed !border-border/50 bg-muted px-3.75 py-1.5 data-[multiline]:py-2.5"
+						data-multiline={isMultiline ? '' : undefined}
+						style="border: 2px dashed hsl(var(--border)); max-height: var(--max-message-height); overflow-wrap: anywhere; word-break: break-word;"
+					>
+						<div
+							class="relative transition-all duration-300 {isExpanded
+								? 'cursor-text select-text'
+								: 'select-none'}"
+							style={!isExpanded && showExpandButton
+								? `max-height: ${MAX_HEIGHT}px;`
+								: 'max-height: none;'}
+						>
+							{#if currentConfig.renderUserContentAsMarkdown}
+								<div bind:this={messageElement} class={isExpanded ? 'cursor-text' : ''}>
+									<MarkdownContent class="markdown-system-content" content={message.content} />
+								</div>
+							{:else}
+								<span
+									bind:this={messageElement}
+									class="text-md whitespace-pre-wrap {isExpanded ? 'cursor-text' : ''}"
+								>
+									{message.content}
+								</span>
+							{/if}
+
+							{#if !isExpanded && showExpandButton}
+								<div
+									class="pointer-events-none absolute right-0 bottom-0 left-0 h-48 bg-gradient-to-t from-muted to-transparent"
+								></div>
+
+								<div
+									class="pointer-events-none absolute right-0 bottom-4 left-0 flex justify-center opacity-0 transition-opacity group-hover/expand:opacity-100"
+								>
+									<Button
+										class="rounded-full px-4 py-1.5 text-xs shadow-md"
+										size="sm"
+										variant="outline"
+									>
+										Show full system message
+									</Button>
+								</div>
+							{/if}
+						</div>
+
+						{#if isExpanded && showExpandButton}
+							<div class="mb-2 flex justify-center">
+								<Button
+									class="rounded-full px-4 py-1.5 text-xs"
+									onclick={(e) => {
+										e.stopPropagation();
+										toggleExpand();
+									}}
+									size="sm"
+									variant="outline"
+								>
+									Collapse System Message
+								</Button>
+							</div>
+						{/if}
+					</Card>
+				</button>
+			</div>
+		{/if}
+
+		{#if message.timestamp}
+			<div class="max-w-[80%]">
+				<ChatMessageActionIcons
+					actionsPosition="right"
+					{deletionInfo}
+					justify="end"
+					{onConfirmDelete}
+					{onCopy}
+					{onDelete}
+					{onEdit}
+					{onNavigateToSibling}
+					{onShowDeleteDialogChange}
+					{siblingInfo}
+					{showDeleteDialog}
+					role={MessageRole.USER}
+				/>
+			</div>
+		{/if}
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { BuiltInTool } from '$lib/enums';
+	import {
+		extractSearchQuery,
+		extractSearchResults,
+		isWebSearchToolName,
+		type AgenticSection
+	} from '$lib/utils';
+	import type { DatabaseMessageExtra } from '$lib/types';
+	import ChatMessageToolCallBlockDefault from './ChatMessageToolCallBlockDefault.svelte';
+	import ChatMessageToolCallBlockEditFile from './ChatMessageToolCallBlockEditFile.svelte';
+	import ChatMessageToolCallBlockExecShellCommand from './ChatMessageToolCallBlockExecShellCommand.svelte';
+	import ChatMessageToolCallBlockFileGlobSearch from './ChatMessageToolCallBlockFileGlobSearch.svelte';
+	import ChatMessageToolCallBlockGetDatetime from './ChatMessageToolCallBlockGetDatetime.svelte';
+	import ChatMessageToolCallBlockGrepSearch from './ChatMessageToolCallBlockGrepSearch.svelte';
+	import ChatMessageToolCallBlockReadFile from './ChatMessageToolCallBlockReadFile.svelte';
+	import ChatMessageToolCallBlockRunJavascript from './ChatMessageToolCallBlockRunJavascript.svelte';
+	import ChatMessageToolCallBlockSearchResults from './ChatMessageToolCallBlockSearchResults.svelte';
+	import ChatMessageToolCallBlockWriteFile from './ChatMessageToolCallBlockWriteFile.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		attachments?: DatabaseMessageExtra[];
+		open: boolean;
+		isStreaming: boolean;
+		isExecuting?: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, attachments, open, isStreaming, isExecuting, onToggle }: Props = $props();
+
+	const searchResults = $derived(extractSearchResults(section.toolResult));
+	const searchQuery = $derived(extractSearchQuery(section.toolArgs));
+	const isSearchCall = $derived(
+		searchResults.length > 0 || (searchQuery.length > 0 && isWebSearchToolName(section.toolName))
+	);
+</script>
+
+{#if isSearchCall}
+	<ChatMessageToolCallBlockSearchResults {section} {open} {isStreaming} {onToggle} />
+{:else if section.toolName === BuiltInTool.GET_DATETIME}
+	<ChatMessageToolCallBlockGetDatetime {section} {isStreaming} />
+{:else if section.toolName === BuiltInTool.READ_FILE}
+	<ChatMessageToolCallBlockReadFile {section} {open} {isStreaming} {onToggle} />
+{:else if section.toolName === BuiltInTool.EDIT_FILE}
+	<ChatMessageToolCallBlockEditFile {section} {open} {isStreaming} {onToggle} />
+{:else if section.toolName === BuiltInTool.WRITE_FILE}
+	<ChatMessageToolCallBlockWriteFile {section} {open} {isStreaming} {onToggle} />
+{:else if section.toolName === BuiltInTool.EXEC_SHELL_COMMAND}
+	<ChatMessageToolCallBlockExecShellCommand
+		{section}
+		{open}
+		{isStreaming}
+		{isExecuting}
+		{attachments}
+		{onToggle}
+	/>
+{:else if section.toolName === BuiltInTool.FILE_GLOB_SEARCH}
+	<ChatMessageToolCallBlockFileGlobSearch {section} {open} {isStreaming} {onToggle} />
+{:else if section.toolName === BuiltInTool.GREP_SEARCH}
+	<ChatMessageToolCallBlockGrepSearch {section} {open} {isStreaming} {onToggle} />
+{:else if section.toolName === BuiltInTool.RUN_JAVASCRIPT}
+	<ChatMessageToolCallBlockRunJavascript {section} {open} {isStreaming} {onToggle} />
+{:else}
+	<ChatMessageToolCallBlockDefault {section} {open} {isStreaming} {attachments} {onToggle} />
+{/if}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockDefault.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	// Fall-through renderer for tool calls without a dedicated block.
+	// Renders section.toolArgs / section.toolResult directly using the
+	// shared chrome shell.
+
+	import { Loader2 } from '@lucide/svelte';
+	import { MarkdownContent, SyntaxHighlightedCode } from '$lib/components/app';
+	import { FileTypeText, ToolResultKind } from '$lib/enums';
+	import { MAX_HEIGHT_CODE_BLOCK } from '$lib/constants';
+	import {
+		classifyToolResult,
+		formatJsonPretty,
+		parseToolResultWithImages,
+		type AgenticSection
+	} from '$lib/utils';
+	import { getBuiltinToolUi } from '$lib/constants/built-in-tools';
+	import type { DatabaseMessageExtra } from '$lib/types';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		attachments?: DatabaseMessageExtra[];
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, attachments, onToggle }: Props = $props();
+
+	const title = $derived(getBuiltinToolUi(section.toolName)?.label ?? section.toolName ?? '');
+	const outputKind = $derived(classifyToolResult(section.toolResult));
+	const parsedLines = $derived(
+		section.toolResult ? parseToolResultWithImages(section.toolResult, attachments) : []
+	);
+</script>
+
+<ToolCallBlock {section} {open} {isStreaming} meta={null} {title} {onToggle}>
+	{#snippet children(_meta, ctx)}
+		{#if ctx.isStreamingCall}
+			<div class="mb-2 flex items-center gap-2 text-xs text-muted-foreground/70">
+				<span>Input</span>
+				{#if ctx.isStreaming}
+					<Loader2 class="h-3 w-3 animate-spin" />
+				{/if}
+			</div>
+			{#if section.toolArgs}
+				<SyntaxHighlightedCode
+					code={formatJsonPretty(section.toolArgs)}
+					language={FileTypeText.JSON}
+					maxHeight={MAX_HEIGHT_CODE_BLOCK}
+					streaming={ctx.isCodeStreaming}
+				/>
+			{:else if ctx.isStreaming}
+				<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
+					Receiving arguments...
+				</div>
+			{:else}
+				<div
+					class="rounded bg-yellow-500/10 p-2 text-xs text-yellow-600 italic dark:text-yellow-400"
+				>
+					Response was truncated
+				</div>
+			{/if}
+		{:else}
+			{@const showInput = Boolean(section.toolArgs)}
+			{#if showInput}
+				<div class="mb-1.5 flex items-center gap-2 text-xs text-muted-foreground/70">
+					<span>Input</span>
+				</div>
+				<SyntaxHighlightedCode
+					code={formatJsonPretty(section.toolArgs ?? '')}
+					language={FileTypeText.JSON}
+					maxHeight={MAX_HEIGHT_CODE_BLOCK}
+					streaming={ctx.isCodeStreaming}
+				/>
+			{/if}
+			<div
+				class={showInput
+					? 'mt-4 mb-1.5 flex items-center gap-2 text-xs text-muted-foreground/70'
+					: 'mb-1.5 flex items-center gap-2 text-xs text-muted-foreground/70'}
+			>
+				<span>Output</span>
+				{#if ctx.isPending}
+					<Loader2 class="h-3 w-3 animate-spin" />
+				{/if}
+			</div>
+			{#if ctx.isPending}
+				<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
+					Waiting for result...
+				</div>
+			{:else if section.toolResult}
+				{#if outputKind === ToolResultKind.JSON}
+					<SyntaxHighlightedCode
+						code={formatJsonPretty(section.toolResult)}
+						language={FileTypeText.JSON}
+						maxHeight={MAX_HEIGHT_CODE_BLOCK}
+					/>
+				{:else if outputKind === ToolResultKind.MARKDOWN}
+					<MarkdownContent content={section.toolResult} {attachments} />
+				{:else}
+					<div class="overflow-auto">
+						{#each parsedLines as line, i (i)}
+							<div class="font-mono text-[11px] leading-relaxed whitespace-pre-wrap">
+								{line.text}
+							</div>
+							{#if line.image}
+								<img
+									src={line.image.base64Url}
+									alt={line.image.name}
+									class="mt-2 mb-2 h-auto max-w-full rounded-lg"
+									loading="lazy"
+								/>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			{:else}
+				<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">No output</div>
+			{/if}
+		{/if}
+	{/snippet}
+</ToolCallBlock>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockEditFile.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import { XCircle } from '@lucide/svelte';
+	import { MAX_HEIGHT_CODE_BLOCK, RESULT_STAT_SEPARATOR } from '$lib/constants';
+	import { computeLineDiff, prefixFor, type AgenticSection } from '$lib/utils';
+	import { parseEditFileMeta } from './parsers/edit-file';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, onToggle }: Props = $props();
+
+	const editFileMeta = $derived(parseEditFileMeta(section));
+	const editDiffs = $derived(
+		(editFileMeta?.edits ?? []).map((edit) => computeLineDiff(edit.oldText, edit.newText))
+	);
+</script>
+
+<ToolCallBlock {section} {open} {isStreaming} meta={editFileMeta} {onToggle}>
+	{#snippet titleSnippet()}
+		<span class="text-muted-foreground">Edit file </span>
+		<span class="font-mono">{editFileMeta?.filePath}</span>
+		{#if editFileMeta?.errorMessage}
+			<span class="ml-1 text-xs italic text-muted-foreground/70">(failed)</span>
+		{/if}
+	{/snippet}
+
+	{#snippet children(meta, _ctx)}
+		{#if meta?.errorMessage}
+			<div
+				class="flex items-start gap-2 rounded bg-red-500/10 p-2 text-xs text-red-600 italic dark:text-red-400"
+			>
+				<XCircle class="mt-0.5 h-3 w-3 shrink-0" />
+				<span>{meta.errorMessage}</span>
+			</div>
+		{:else if meta && meta.edits.length > 0}
+			{#each editDiffs as diffLines, ei (ei)}
+				<div class={ei === 0 ? '' : 'mt-3'}>
+					<div class="mb-1.5 text-xs text-muted-foreground/70 italic">
+						Edit {ei + 1}&nbsp;of&nbsp;{meta.edits.length}
+					</div>
+					<div class="diff-block" style:max-height={MAX_HEIGHT_CODE_BLOCK}>
+						<div class="diff-pre">
+							{#each diffLines as line, li (li)}
+								<div class="diff-line diff-{line.kind}">
+									<span class="diff-old-num">{line.oldLine ?? ''}</span>
+									<span class="diff-marker">{prefixFor(line.kind)}</span>
+									<span class="diff-new-num">{line.newLine ?? ''}</span>
+									<span class="diff-text">{line.text || ' '}</span>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			{/each}
+			<div class="mt-1.5 text-xs text-muted-foreground/70 italic">
+				{#if meta.resultMessage}
+					{meta.resultMessage}{meta.editsApplied != null ? RESULT_STAT_SEPARATOR : ''}{/if}
+				{#if meta.editsApplied != null}
+					<span class="font-mono">{meta.editsApplied}</span>
+					{meta.editsApplied === 1 ? 'edit' : 'edits'}&nbsp;applied
+				{/if}
+			</div>
+		{:else}
+			<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">No edits</div>
+		{/if}
+	{/snippet}
+</ToolCallBlock>
+
+<style>
+	.diff-block {
+		overflow: auto;
+		border-radius: 0.75rem;
+		border-width: 1px;
+		border-color: color-mix(in oklch, var(--border) 30%, transparent);
+		background: var(--code-background);
+		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	}
+
+	:global(.dark) .diff-block {
+		border-color: color-mix(in oklch, var(--border) 20%, transparent);
+	}
+
+	/* Each row is a 4-column grid: old-line#, marker, new-line#, text.
+	 * The gutters stay fixed-width so the text column lines up unversally. */
+	.diff-line {
+		display: grid;
+		grid-template-columns: 3.25rem 1.5rem 3.25rem 1fr;
+		font-family: var(--font-mono);
+		font-size: 11px;
+		line-height: 1.65;
+		align-items: stretch;
+	}
+
+	.diff-old-num,
+	.diff-new-num {
+		text-align: right;
+		padding-right: 0.5rem;
+		user-select: none;
+		color: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.diff-marker {
+		text-align: center;
+		color: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
+		user-select: none;
+	}
+
+	.diff-line.diff-add {
+		background-color: #f0fff4;
+		color: #22863a;
+	}
+	.diff-line.diff-add .diff-new-num,
+	.diff-line.diff-add .diff-marker {
+		color: #22863a;
+	}
+
+	.diff-line.diff-remove {
+		background-color: #ffeef0;
+		color: #b31d28;
+	}
+	.diff-line.diff-remove .diff-old-num,
+	.diff-line.diff-remove .diff-marker {
+		color: #b31d28;
+	}
+
+	.diff-line.diff-add .diff-old-num,
+	.diff-line.diff-remove .diff-new-num {
+		/* Empty gutter columns for add/remove rows mirror git unification
+		 * (added lines don't have an old number, removed lines don't have a
+		 * new number). Keep them visible so columns stay aligned across
+		 * mixed rows. */
+		opacity: 0;
+	}
+
+	.diff-text {
+		padding-left: 0.4rem;
+		padding-right: 0.5rem;
+		white-space: pre;
+		overflow-x: auto;
+		min-width: 0;
+	}
+
+	:global(.dark) .diff-line.diff-add {
+		background-color: #033a16;
+		color: #aff5b4;
+	}
+	:global(.dark) .diff-line.diff-add .diff-new-num,
+	:global(.dark) .diff-line.diff-add .diff-marker {
+		color: #aff5b4;
+	}
+	:global(.dark) .diff-line.diff-remove {
+		background-color: #67060c;
+		color: #ffdcd7;
+	}
+	:global(.dark) .diff-line.diff-remove .diff-old-num,
+	:global(.dark) .diff-line.diff-remove .diff-marker {
+		color: #ffdcd7;
+	}
+</style>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockExecShellCommand.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+	// Block for `exec_shell_command`. Unlike the other tools, this
+	// renderer uses CollapsibleTerminalBlock (terminal-style frame)
+	// and treats "live" output chunks as active even after the call
+	// resolved, so the spinner stays on while stdout is still flowing.
+	// The scroll-to-bottom auto-scroll logic mirrors what was here
+	// before extraction.
+
+	import { Check, Loader2, XCircle, AlertTriangle } from '@lucide/svelte';
+	import { CollapsibleTerminalBlock } from '$lib/components/app';
+	import { SETTINGS_KEYS } from '$lib/constants';
+	import { config } from '$lib/stores/settings.svelte';
+	import { TOOL_RUNTIME_SCROLL_AT_BOTTOM_THRESHOLD_PX } from '$lib/constants/auto-scroll';
+	import {
+		highlightCode,
+		isExitCodeSummaryLine,
+		parseExecShellCommandError,
+		parseExecShellCommandExitStatus,
+		parseToolResultWithImages,
+		type AgenticSection,
+		type ExecShellExitStatus,
+		type ToolResultLine
+	} from '$lib/utils';
+	import { parseExecShellCommandMeta } from './parsers/exec-shell-command';
+	import type { DatabaseMessageExtra } from '$lib/types';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		/** True while the agentic loop is streaming output chunks for THIS
+		 *  tool call. Drives max-height + auto-scroll while true; releases
+		 *  them when the loop reports this call as done. */
+		isExecuting?: boolean;
+		attachments?: DatabaseMessageExtra[];
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, isExecuting = false, attachments, onToggle }: Props = $props();
+
+	// `isLive` covers all in-flight phases: pre-chunk spinner and
+	// streaming itself. Frozen output (tool done while agent continues)
+	// is not live.
+	const isLive = $derived(isExecuting);
+
+	const execShellMeta = $derived(parseExecShellCommandMeta(section));
+	const execShellError = $derived(parseExecShellCommandError(section.toolResult));
+	const execShellExitStatus: ExecShellExitStatus | undefined = $derived(
+		parseExecShellCommandExitStatus(section.toolResult)
+	);
+
+	const parsedLines: ToolResultLine[] = $derived(
+		section.toolResult ? parseToolResultWithImages(section.toolResult, attachments) : []
+	);
+
+	// Drop the trailing "[exit code: N]" line - rendered as a colored
+	// badge below. During streaming we keep it so a partial stream still
+	// shows the status once the final chunk lands.
+	const outputLines: ToolResultLine[] = $derived(
+		execShellExitStatus && parsedLines.length > 0
+			? parsedLines.slice(0, parsedLines.length - 1)
+			: parsedLines
+	);
+
+	const isExitCodeFinalLine = $derived(
+		execShellExitStatus !== undefined &&
+			parsedLines.length > 0 &&
+			isExitCodeSummaryLine(parsedLines[parsedLines.length - 1].text, execShellExitStatus)
+	);
+
+	// Highlight just the command for the title; the (typically large)
+	// output blob uses bare monospace to skip hljs per-line highlighting.
+	const highlightedCommandHtml = $derived(
+		execShellMeta ? highlightCode(execShellMeta.command, 'bash') : ''
+	);
+
+	const exitBadgeClass = $derived(
+		execShellExitStatus?.timedOut
+			? 'exit-badge warning'
+			: execShellExitStatus?.code === 0
+				? 'exit-badge success'
+				: 'exit-badge failure'
+	);
+
+	const useFullHeightCodeBlocks = $derived(
+		Boolean(config()[SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS])
+	);
+
+	const autoScroll = $derived(isLive && !useFullHeightCodeBlocks);
+
+	const SCROLL_BOTTOM_THRESHOLD_PX = TOOL_RUNTIME_SCROLL_AT_BOTTOM_THRESHOLD_PX;
+
+	let scrollEl: HTMLDivElement | undefined = $state();
+	let userScrolledUp = $state(false);
+	let lastScrollTop = 0;
+	let pendingFrame: number | null = null;
+
+	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;
+
+			// Re-check on rAF - 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(() => {
+		void section.toolResult;
+		if (!scrollEl || !autoScroll) return;
+		scrollToBottomOnFrame();
+	});
+
+	$effect(() => {
+		// Catch layout changes that don't touch toolResult (line-wrap
+		// reflow, image attaches, hljs settle).
+		if (!scrollEl || !autoScroll) return;
+
+		const observer = new MutationObserver(() => scrollToBottomOnFrame());
+		observer.observe(scrollEl, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+
+		return () => observer.disconnect();
+	});
+
+	$effect(() => {
+		// Reset on stream end so the next render (full-height) starts
+		// pinned.
+		if (!isLive) {
+			userScrolledUp = false;
+			lastScrollTop = 0;
+		}
+	});
+</script>
+
+{#snippet execShellTitle()}
+	{#if highlightedCommandHtml}
+		<span class="font-mono">{@html highlightedCommandHtml}</span>
+	{:else}
+		<span class="font-mono">{execShellMeta?.command}</span>
+	{/if}
+{/snippet}
+
+<ToolCallBlock
+	{section}
+	{open}
+	{isStreaming}
+	meta={execShellMeta ? { errorMessage: execShellError } : null}
+	wrapper={CollapsibleTerminalBlock}
+	extraLiveStreaming={isLive}
+	spinIconWhenActive={true}
+	{onToggle}
+>
+	{#snippet titleSnippet()}
+		{@render execShellTitle()}
+	{/snippet}
+
+	{#snippet children(_meta, ctx)}
+		{#if ctx.isPending}
+			<div class="flex items-start gap-2 text-xs text-muted-foreground/70">
+				<Loader2 class="h-3 w-3 animate-spin" />
+				Running...
+			</div>
+		{:else if execShellError}
+			<div class="flex items-start gap-2 text-xs text-red-600 italic dark:text-red-400">
+				<XCircle class="mt-0.5 h-3 w-3 shrink-0" />
+				<span>{execShellError}</span>
+			</div>
+		{:else if section.toolResult}
+			<div
+				bind:this={scrollEl}
+				class="terminal-output"
+				class:is-clamped={!useFullHeightCodeBlocks}
+				onscroll={handleScrollEvent}
+			>
+				{#each outputLines as line, i (i)}
+					<div class="font-mono text-[11px] leading-relaxed whitespace-pre-wrap">{line.text}</div>
+					{#if line.image}
+						<img
+							src={line.image.base64Url}
+							alt={line.image.name}
+							class="mt-2 mb-2 h-auto max-w-full rounded-lg"
+							loading="lazy"
+						/>
+					{/if}
+				{/each}
+
+				{#if isExitCodeFinalLine && execShellExitStatus}
+					<div class={exitBadgeClass}>
+						{#if execShellExitStatus.timedOut}
+							<AlertTriangle class="h-3 w-3" />
+							<span>timed out</span>
+							<span class="exit-sep">&middot;</span>
+							<span>exit {execShellExitStatus.code}</span>
+						{:else if execShellExitStatus.code === 0}
+							<Check class="h-3 w-3" />
+							<span>exit 0</span>
+						{:else}
+							<XCircle class="h-3 w-3" />
+							<span>exit {execShellExitStatus.code}</span>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	{/snippet}
+</ToolCallBlock>
+
+<style>
+	.terminal-output {
+		overscroll-behavior: contain;
+	}
+
+	.terminal-output.is-clamped {
+		max-height: 28rem;
+		overflow-y: auto;
+		scrollbar-gutter: stable;
+		padding-right: 0.25rem;
+	}
+
+	.exit-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		margin-top: 0.5rem;
+		padding: 0.2rem 0.55rem;
+		border-radius: 0.375rem;
+		font-family: var(--font-mono);
+		font-size: 11px;
+		font-weight: 500;
+		letter-spacing: 0.01em;
+		line-height: 1;
+	}
+
+	.exit-badge.success {
+		background: color-mix(in oklch, var(--color-green-500, #22c55e) 14%, transparent);
+		color: var(--color-green-700, #15803d);
+	}
+
+	:global(.dark) .exit-badge.success {
+		background: color-mix(in oklch, var(--color-green-400, #4ade80) 18%, transparent);
+		color: var(--color-green-300, #86efac);
+	}
+
+	.exit-badge.failure {
+		background: color-mix(in oklch, var(--color-red-500, #ef4444) 14%, transparent);
+		color: var(--color-red-700, #b91c1c);
+	}
+
+	:global(.dark) .exit-badge.failure {
+		background: color-mix(in oklch, var(--color-red-400, #f87171) 18%, transparent);
+		color: var(--color-red-300, #fca5a5);
+	}
+
+	.exit-badge.warning {
+		background: color-mix(in oklch, var(--color-amber-500, #f59e0b) 14%, transparent);
+		color: var(--color-amber-700, #b45309);
+	}
+
+	:global(.dark) .exit-badge.warning {
+		background: color-mix(in oklch, var(--color-amber-400, #fbbf24) 18%, transparent);
+		color: var(--color-amber-300, #fcd34d);
+	}
+
+	.exit-sep {
+		opacity: 0.45;
+	}
+</style>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockFileGlobSearch.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { XCircle } from '@lucide/svelte';
+	import { type AgenticSection } from '$lib/utils';
+	import { parseFileGlobSearchMeta } from './parsers/file-glob-search';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, onToggle }: Props = $props();
+
+	const fileGlobMeta = $derived(parseFileGlobSearchMeta(section));
+</script>
+
+<ToolCallBlock {section} {open} {isStreaming} meta={fileGlobMeta} {onToggle}>
+	{#snippet titleSnippet()}
+		{#if fileGlobMeta}
+			<span class="text-muted-foreground"
+				>{fileGlobMeta.include === '**' ? 'List files' : 'Search files'}&nbsp;</span
+			>
+			{#if fileGlobMeta.include !== '**'}
+				<span class="font-mono">{fileGlobMeta.include}</span>
+			{/if}
+			<span class="text-muted-foreground">&nbsp;in&nbsp;</span>
+			<span class="font-mono">{fileGlobMeta.path}</span>
+		{/if}
+	{/snippet}
+
+	{#snippet children(meta, ctx)}
+		{#if ctx.isPending}
+			<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
+				Searching...
+			</div>
+		{:else if meta?.errorMessage}
+			<div
+				class="flex items-start gap-2 rounded bg-red-500/10 p-2 text-xs text-red-600 italic dark:text-red-400"
+			>
+				<XCircle class="mt-0.5 h-3 w-3 shrink-0" />
+				<span>{meta.errorMessage}</span>
+			</div>
+		{:else if meta && meta.matches.length > 0}
+			<div class="max-h-96 overflow-auto">
+				{#each meta.matches as match, i (i)}
+					<div class="font-mono text-[11px] leading-relaxed whitespace-pre-wrap">{match}</div>
+				{/each}
+			</div>
+			<div class="mt-1.5 text-xs text-muted-foreground/70 italic">
+				Total matches: <span class="font-mono">{meta.totalMatches ?? meta.matches.length}</span>
+			</div>
+		{:else}
+			<div class="text-xs text-muted-foreground/70 italic">No matches</div>
+			<div class="mt-1.5 text-xs text-muted-foreground/70 italic">
+				Total matches: <span class="font-mono">{meta?.totalMatches ?? 0}</span>
+			</div>
+		{/if}
+	{/snippet}
+</ToolCallBlock>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockGetDatetime.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Clock, Loader2 } from '@lucide/svelte';
+	import { AgenticSectionType } from '$lib/enums';
+	import type { AgenticSection } from '$lib/utils';
+
+	interface Props {
+		section: AgenticSection;
+		isStreaming?: boolean;
+	}
+
+	let { section, isStreaming = false }: Props = $props();
+
+	const isPending = $derived(section.type === AgenticSectionType.TOOL_CALL_PENDING);
+	const isStreamingCall = $derived(section.type === AgenticSectionType.TOOL_CALL_STREAMING);
+	const showSpinner = $derived(isPending || (isStreamingCall && isStreaming));
+
+	type GetDatetimeMeta = {
+		dateString?: string;
+		errorMessage?: string;
+	};
+
+	function parseGetDatetimeMeta(toolResultString: string | undefined): GetDatetimeMeta {
+		if (!toolResultString) return {};
+
+		try {
+			const parsed: unknown = JSON.parse(toolResultString);
+			if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+				const obj = parsed as Record<string, unknown>;
+				if (typeof obj.error === 'string') return { errorMessage: obj.error };
+				if (typeof obj.result === 'string') return { dateString: obj.result.trim() };
+			}
+		} catch {
+			return { dateString: toolResultString.trim() };
+		}
+
+		return {};
+	}
+
+	const dateMeta = $derived(parseGetDatetimeMeta(section.toolResult));
+</script>
+
+<div class="text-muted-foreground flex items-center gap-2 py-1.5">
+	<Clock class="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+	{#if showSpinner}
+		<span class="text-foreground/80 text-sm font-medium">Current time</span>
+		<Loader2 class="text-muted-foreground/70 h-3 w-3 animate-spin" />
+	{:else if dateMeta.errorMessage}
+		<span class="text-foreground/80 text-sm font-medium">Current time&nbsp;</span>
+		<span class="text-red-600 text-xs italic dark:text-red-400">-&nbsp;{dateMeta.errorMessage}</span
+		>
+	{:else if dateMeta.dateString}
+		<span class="text-foreground/80 text-sm font-medium">Current time is&nbsp;</span>
+		<span class="font-mono text-foreground/90 text-sm">{dateMeta.dateString}</span>
+	{:else}
+		<span class="text-foreground/80 text-sm font-medium">Current time</span>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockGrepSearch.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { XCircle } from '@lucide/svelte';
+	import { type AgenticSection } from '$lib/utils';
+	import { parseGrepSearchMeta } from './parsers/grep-search';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, onToggle }: Props = $props();
+
+	const grepMeta = $derived(parseGrepSearchMeta(section));
+</script>
+
+<ToolCallBlock {section} {open} {isStreaming} meta={grepMeta} {onToggle}>
+	{#snippet titleSnippet()}
+		{#if grepMeta}
+			<span class="text-muted-foreground">Search for&nbsp;</span>
+			<span class="font-mono">{grepMeta.pattern}</span>
+			<span class="text-muted-foreground">&nbsp;in&nbsp;</span>
+			<span class="font-mono">{grepMeta.path}</span>
+		{/if}
+	{/snippet}
+
+	{#snippet children(meta, ctx)}
+		{#if ctx.isPending}
+			<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
+				Searching...
+			</div>
+		{:else if meta?.errorMessage}
+			<div
+				class="flex items-start gap-2 rounded bg-red-500/10 p-2 text-xs text-red-600 italic dark:text-red-400"
+			>
+				<XCircle class="mt-0.5 h-3 w-3 shrink-0" />
+				<span>{meta.errorMessage}</span>
+			</div>
+		{:else if meta && meta.matches.length > 0}
+			<div class="max-h-96 overflow-auto">
+				{#each meta.matches as match, mi (mi)}
+					<div class="font-mono text-[11px] leading-relaxed">
+						<span class="text-muted-foreground/70">{match.file}</span>
+						{#if meta.showLineNumbers && match.line != null}
+							<span class="text-muted-foreground/70">:{match.line}</span>
+						{/if}
+						<span class="text-muted-foreground/70">:</span>
+						<span>{match.content}</span>
+					</div>
+				{/each}
+			</div>
+			<div class="mt-1.5 text-xs text-muted-foreground/70 italic">
+				Total matches: <span class="font-mono">{meta.totalMatches ?? meta.matches.length}</span>
+				{#if meta.showLineNumbers}
+					&nbsp;<span class="italic">(with line numbers)</span>
+				{/if}
+			</div>
+		{:else}
+			<div class="text-xs text-muted-foreground/70 italic">No matches</div>
+			<div class="mt-1.5 text-xs text-muted-foreground/70 italic">
+				Total matches: <span class="font-mono">{meta?.totalMatches ?? 0}</span>
+			</div>
+		{/if}
+	{/snippet}
+</ToolCallBlock>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockReadFile.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { SyntaxHighlightedCode } from '$lib/components/app';
+	import { DEFAULT_LANGUAGE, MAX_HEIGHT_CODE_BLOCK } from '$lib/constants';
+	import { type AgenticSection } from '$lib/utils';
+	import { parseReadFileMeta } from './parsers/read-file';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, onToggle }: Props = $props();
+
+	const readFileMeta = $derived(parseReadFileMeta(section));
+</script>
+
+<ToolCallBlock {section} {open} {isStreaming} meta={readFileMeta} {onToggle}>
+	{#snippet titleSnippet()}
+		<span class="text-muted-foreground">Read file </span>
+		<span class="font-mono">{readFileMeta?.fileName}</span>
+		{#if readFileMeta?.lineRange}
+			<span class="text-muted-foreground"
+				>&nbsp;(lines {readFileMeta.lineRange.start}-{readFileMeta.lineRange.end})</span
+			>
+		{/if}
+	{/snippet}
+
+	{#snippet children(_meta, _ctx)}
+		{#if section.toolResult}
+			<SyntaxHighlightedCode
+				code={section.toolResult}
+				language={readFileMeta?.language ?? DEFAULT_LANGUAGE}
+				maxHeight={MAX_HEIGHT_CODE_BLOCK}
+			/>
+		{:else}
+			<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">
+				Waiting for file content...
+			</div>
+		{/if}
+	{/snippet}
+</ToolCallBlock>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockRunJavascript.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { XCircle, Terminal } from '@lucide/svelte';
+	import { SyntaxHighlightedCode } from '$lib/components/app';
+	import { FileTypeText } from '$lib/enums';
+	import { MAX_HEIGHT_CODE_BLOCK } from '$lib/constants';
+	import { getBuiltinToolUi, type AgenticSection } from '$lib/utils';
+	import { parseRunJavascriptMeta } from './parsers/run-javascript';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, onToggle }: Props = $props();
+
+	const runJsMeta = $derived(parseRunJavascriptMeta(section));
+	const title = $derived(getBuiltinToolUi(section.toolName)?.label ?? section.toolName ?? '');
+</script>
+
+<ToolCallBlock {section} {open} {isStreaming} meta={runJsMeta} {title} {onToggle}>
+	{#snippet children(meta, ctx)}
+		{#if ctx.isPending}
+			<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">Running...</div>
+		{:else if meta?.errorMessage}
+			<div
+				class="flex items-start gap-2 rounded bg-red-500/10 p-2 text-xs text-red-600 italic dark:text-red-400"
+			>
+				<XCircle class="mt-0.5 h-3 w-3 shrink-0" />
+				<span>{meta.errorMessage}</span>
+			</div>
+			<div class="mt-3">
+				<SyntaxHighlightedCode
+					code={meta.code}
+					language={FileTypeText.JAVASCRIPT}
+					maxHeight={MAX_HEIGHT_CODE_BLOCK}
+					streaming={ctx.isCodeStreaming}
+				/>
+			</div>
+		{:else if meta}
+			<SyntaxHighlightedCode
+				code={meta.code}
+				language={FileTypeText.JAVASCRIPT}
+				maxHeight={MAX_HEIGHT_CODE_BLOCK}
+				streaming={ctx.isCodeStreaming}
+			/>
+			<div class="mb-2 mt-3 flex items-center gap-2 text-xs text-muted-foreground/70">
+				<Terminal class="h-3 w-3" />
+				<span>Console</span>
+				{#if meta.timeoutMs != null}
+					<span class="font-mono">&middot;&nbsp;timeout&nbsp;{meta.timeoutMs}&nbsp;ms</span>
+				{/if}
+			</div>
+			{#if section.toolResult}
+				<div class="mt-1">
+					<SyntaxHighlightedCode
+						code={section.toolResult}
+						language={FileTypeText.JAVASCRIPT}
+						maxHeight={MAX_HEIGHT_CODE_BLOCK}
+					/>
+				</div>
+			{:else}
+				<div class="rounded bg-muted/20 p-2 text-xs text-muted-foreground/70 italic">No output</div>
+			{/if}
+		{/if}
+	{/snippet}
+</ToolCallBlock>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockSearchResults.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT, ICON_CLASS_SPIN } from '$lib/constants/css-classes';
+	import { Globe, Loader2 } from '@lucide/svelte';
+	import { CollapsibleContentBlock } from '$lib/components/app';
+	import * as HoverCard from '$lib/components/ui/hover-card';
+	import { AgenticSectionType } from '$lib/enums';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import {
+		extractSearchResults,
+		extractSearchQuery,
+		faviconForUrl,
+		sanitizeExternalUrl,
+		type SearchResult,
+		type AgenticSection
+	} from '$lib/utils';
+
+	interface Props {
+		section: AgenticSection;
+		open?: boolean;
+		isStreaming?: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, open = $bindable(false), isStreaming = false, onToggle }: Props = $props();
+
+	const isPending = $derived(section.type === AgenticSectionType.TOOL_CALL_PENDING);
+	const isStreamingCall = $derived(section.type === AgenticSectionType.TOOL_CALL_STREAMING);
+	const showSpinner = $derived(isPending || (isStreamingCall && isStreaming));
+
+	const results = $derived(extractSearchResults(section.toolResult));
+	const query = $derived(extractSearchQuery(section.toolArgs));
+
+	// Same icon-resolution chain as ChatMessageToolCallBlockDefault so
+	// MCP-server branding is consistent across both views. Spinner wins
+	// while the call is in flight so the user sees execution status.
+	const iconUrl = $derived(showSpinner ? null : mcpStore.getServerFaviconForTool(section.toolName));
+	const icon = $derived(showSpinner ? Loader2 : undefined);
+	const iconClass = $derived(showSpinner ? ICON_CLASS_SPIN : ICON_CLASS_DEFAULT);
+
+	// Verb reflects state: "Searching" while the call is in flight, "Searched"
+	// once results (or a definitive empty response) have arrived. Lets the
+	// heading read as a live progress indicator rather than a completed
+	// retrospective.
+	const title = $derived.by(() => {
+		const verb = showSpinner ? 'Searching' : 'Searched';
+		return query ? `${verb} web for "${query}"` : `${verb} web`;
+	});
+
+	function hideBrokenIcon(event: Event) {
+		(event.currentTarget as HTMLImageElement).style.display = 'none';
+	}
+
+	function formatPublishDate(iso: string | undefined): string | null {
+		if (!iso) return null;
+		try {
+			const date = new Date(iso);
+			if (Number.isNaN(date.getTime())) return iso;
+			return date.toLocaleDateString(undefined, {
+				year: 'numeric',
+				month: 'short',
+				day: 'numeric'
+			});
+		} catch {
+			return iso;
+		}
+	}
+
+	function hostFor(url: string): string | null {
+		try {
+			return new URL(url).host;
+		} catch {
+			return null;
+		}
+	}
+
+	function hasDetails(result: SearchResult): boolean {
+		return Boolean(result.highlights || result.published || result.author);
+	}
+</script>
+
+{#snippet pill(result: SearchResult)}
+	{@const faviconUrl = faviconForUrl(result.url)}
+	{@const safeUrl = sanitizeExternalUrl(result.url)}
+	{@const showHoverCard = safeUrl !== null && hasDetails(result)}
+	{#if safeUrl}
+		<HoverCard.Root openDelay={150} closeDelay={100}>
+			<HoverCard.Trigger
+				href={safeUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="hover:bg-muted/80 focus-visible:ring-ring inline-flex max-w-full items-center gap-1.5 rounded-full border bg-muted px-2.5 py-1 text-xs transition-colors outline-none focus-visible:ring-2"
+			>
+				{#if faviconUrl}
+					<img
+						src={faviconUrl}
+						alt=""
+						class="h-3 w-3 shrink-0 rounded-sm"
+						onerror={hideBrokenIcon}
+					/>
+				{:else}
+					<Globe class="text-muted-foreground/70 h-3 w-3 shrink-0" />
+				{/if}
+				<span class="truncate font-medium text-foreground/80">{result.title}</span>
+			</HoverCard.Trigger>
+			{#if showHoverCard}
+				{@const publishDate = formatPublishDate(result.published)}
+				{@const host = hostFor(safeUrl)}
+				<HoverCard.Content
+					side="top"
+					align="start"
+					sideOffset={6}
+					class="bg-popover text-popover-foreground z-50 w-80 max-w-[90vw] rounded-lg border p-0 shadow-lg"
+				>
+					<div class="flex flex-col gap-2 p-3">
+						<a
+							href={safeUrl}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="line-clamp-3 text-sm font-medium leading-snug hover:underline"
+							>{result.title}</a
+						>
+						{#if publishDate || result.author}
+							<div class="text-muted-foreground flex items-center gap-1.5 text-[11px]">
+								{#if publishDate}
+									<span>{publishDate}</span>
+								{/if}
+								{#if publishDate && result.author}
+									<span class="opacity-50">&middot;</span>
+								{/if}
+								{#if result.author}
+									<span class="truncate">{result.author}</span>
+								{/if}
+							</div>
+						{/if}
+						{#if result.highlights}
+							<p
+								class="text-popover-foreground/85 line-clamp-5 text-xs leading-relaxed whitespace-pre-line"
+							>
+								{result.highlights}
+							</p>
+						{/if}
+						{#if host}
+							<div class="text-muted-foreground/80 truncate text-[11px]">{host}</div>
+						{/if}
+					</div>
+				</HoverCard.Content>
+			{/if}
+		</HoverCard.Root>
+	{/if}
+{/snippet}
+
+<CollapsibleContentBlock {open} class="my-2" {icon} {iconClass} {iconUrl} {title} {onToggle}>
+	{#if results.length > 0}
+		<div class="flex flex-wrap items-center gap-2 pb-1">
+			{#each results as result (result.url)}
+				{@render pill(result)}
+			{/each}
+		</div>
+	{:else if showSpinner}
+		<div class="text-muted-foreground/70 flex items-center gap-2 py-1 text-xs italic">
+			<Loader2 class="h-3 w-3 animate-spin" />
+			<span>Searching...</span>
+		</div>
+	{:else}
+		<div class="text-muted-foreground/70 py-1 text-xs italic">No results</div>
+	{/if}
+</CollapsibleContentBlock>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlockWriteFile.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { XCircle } from '@lucide/svelte';
+	import { SyntaxHighlightedCode } from '$lib/components/app';
+	import { MAX_HEIGHT_CODE_BLOCK, RESULT_STAT_SEPARATOR } from '$lib/constants';
+	import { type AgenticSection } from '$lib/utils';
+	import { parseWriteFileMeta } from './parsers/write-file';
+	import ToolCallBlock from './ToolCallBlock.svelte';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		onToggle?: () => void;
+	}
+
+	let { section, open, isStreaming, onToggle }: Props = $props();
+
+	const writeFileMeta = $derived(parseWriteFileMeta(section));
+</script>
+
+<ToolCallBlock {section} {open} {isStreaming} meta={writeFileMeta} {onToggle}>
+	{#snippet titleSnippet()}
+		<span class="text-muted-foreground">Write file </span>
+		<span class="font-mono">{writeFileMeta?.filePath}</span>
+		{#if writeFileMeta?.errorMessage}
+			<span class="ml-1 text-xs italic text-muted-foreground/70">(failed)</span>
+		{/if}
+	{/snippet}
+
+	{#snippet children(meta, ctx)}
+		{#if meta?.errorMessage}
+			<div
+				class="flex items-start gap-2 rounded bg-red-500/10 p-2 text-xs text-red-600 italic dark:text-red-400"
+			>
+				<XCircle class="mt-0.5 h-3 w-3 shrink-0" />
+				<span>{meta.errorMessage}</span>
+			</div>
+		{:else if meta}
+			<SyntaxHighlightedCode
+				code={meta.content}
+				language={meta.language}
+				maxHeight={MAX_HEIGHT_CODE_BLOCK}
+				streaming={ctx.isCodeStreaming}
+			/>
+			<div class="mt-1.5 text-xs text-muted-foreground/70 italic">
+				{#if meta.resultMessage}
+					{meta.resultMessage}{meta.bytesWritten != null ? RESULT_STAT_SEPARATOR : ''}{/if}
+				{#if meta.bytesWritten != null}
+					<span class="font-mono">{meta.bytesWritten}</span>
+					bytes
+				{/if}
+			</div>
+		{/if}
+	{/snippet}
+</ToolCallBlock>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/ToolCallBlock.svelte

@@ -0,0 +1,129 @@
+<script lang="ts" generics="TMeta">
+	// Generic chrome shell shared by every per-tool block under
+	// `ChatMessageToolCall/`. Owns:
+	//   - the collapsible wrapper (defaults to CollapsibleContentBlock;
+	//     `exec_shell_command` swaps in CollapsibleTerminalBlock via the
+	//     `wrapper` prop);
+	//   - the icon, spinner state, and MCP favicon fallback chain;
+	//   - the status subtitle pill.
+	// Components supply only their `meta`, a title snippet, and a body
+	// snippet - everything around them is this single source of truth.
+
+	import { Loader2, Wrench } from '@lucide/svelte';
+	import { CollapsibleContentBlock } from '$lib/components/app';
+	import { ICON_CLASS_DEFAULT, ICON_CLASS_SPIN } from '$lib/constants/css-classes';
+	import { AgenticSectionType } from '$lib/enums';
+	import { getBuiltinToolUi } from '$lib/constants/built-in-tools';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import type { Component, Snippet } from 'svelte';
+	import type { AgenticSection, BuiltinToolUiEntry } from '$lib/utils';
+
+	type ToolCallBlockMetaWithError = TMeta & { errorMessage?: string };
+
+	interface ToolCallCtx {
+		isStreaming: boolean;
+		isPending: boolean;
+		isStreamingCall: boolean;
+		isCodeStreaming: boolean;
+	}
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		/**
+		 * The per-tool meta, including any `errorMessage` field that the
+		 * shared chrome uses to compute the status pill subtitle.
+		 */
+		meta: ToolCallBlockMetaWithError | null | undefined;
+		/**
+		 * True while the tool's process is actively producing output
+		 * chunks after its args finished streaming (used by
+		 * `exec_shell_command`'s stdout feed).
+		 */
+		extraLiveStreaming?: boolean;
+		/**
+		 * Swap the title-row icon for a spinning `Loader2` while the
+		 * spinner is showing. Only meaningful for tools where "live"
+		 * is interesting (e.g. exec_shell_command showing the in-flight
+		 * process). Other tools leave it off and render the spinner
+		 * inline within the body.
+		 */
+		spinIconWhenActive?: boolean;
+		/**
+		 * Wrapper component that renders the title row and the body
+		 * children. Defaults to CollapsibleContentBlock;
+		 * `exec_shell_command` uses CollapsibleTerminalBlock for its
+		 * terminal-style frame.
+		 */
+		wrapper?: typeof CollapsibleContentBlock;
+		title?: string;
+		titleSnippet?: Snippet;
+		onToggle?: () => void;
+		children: Snippet<[TMeta | null | undefined, ToolCallCtx]>;
+	}
+
+	let {
+		section,
+		open,
+		isStreaming,
+		meta,
+		extraLiveStreaming = false,
+		spinIconWhenActive = false,
+		wrapper: Wrapper = CollapsibleContentBlock,
+		title,
+		titleSnippet,
+		onToggle,
+		children
+	}: Props = $props();
+
+	const isPending = $derived(section.type === AgenticSectionType.TOOL_CALL_PENDING);
+	const isStreamingCall = $derived(section.type === AgenticSectionType.TOOL_CALL_STREAMING);
+	const showSpinner = $derived(isPending || (isStreamingCall && isStreaming) || extraLiveStreaming);
+	const isCodeStreaming = $derived(isStreaming && (isPending || isStreamingCall));
+
+	const toolUi: BuiltinToolUiEntry | null = $derived(getBuiltinToolUi(section.toolName));
+	const toolIcon: Component = $derived(
+		spinIconWhenActive && showSpinner ? Loader2 : (toolUi?.icon ?? Wrench)
+	);
+	const toolIconClass = $derived(
+		spinIconWhenActive && showSpinner ? ICON_CLASS_SPIN : ICON_CLASS_DEFAULT
+	);
+	// Drop the MCP favicon while the spinner is on so the title row
+	// signals "in flight" without being overwritten by server branding.
+	const mcpServerFavicon = $derived(
+		showSpinner ? null : mcpStore.getServerFaviconForTool(section.toolName)
+	);
+	const iconUrl = $derived(
+		showSpinner || (toolUi?.icon ?? null) || !mcpServerFavicon ? null : mcpServerFavicon
+	);
+
+	function subtitleFor(errorMessage?: string): string | undefined {
+		if (extraLiveStreaming) return 'streaming...';
+		if (showSpinner) return 'executing...';
+		if (errorMessage) return 'failed';
+		if (isStreamingCall && !isStreaming) return 'incomplete';
+		return undefined;
+	}
+
+	const subtitle = $derived(subtitleFor(meta?.errorMessage));
+</script>
+
+<Wrapper
+	{open}
+	class="my-2"
+	icon={toolIcon}
+	iconClass={toolIconClass}
+	{iconUrl}
+	{title}
+	{titleSnippet}
+	{subtitle}
+	{onToggle}
+>
+	{@render children(meta, {
+		isStreaming,
+		isPending,
+		isStreamingCall,
+		isCodeStreaming
+	})}
+</Wrapper>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/_shared.ts

@@ -0,0 +1,49 @@
+// Helpers shared by the per-tool meta parsers under
+// `src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/`.
+// Each tool needs the same first three steps (tool-name check,
+// args-present check, JSON parse) - keeping them here lets each parser
+// stay focused on its own format quirks.
+
+import { BuiltInTool } from '$lib/enums';
+import { parsePartialJsonArgs } from '$lib/utils/parse-partial-json-args';
+import type { AgenticSection } from '$lib/utils/agentic';
+
+/**
+ * Strict (final-state) JSON parser for a tool-args blob. Mirrors the
+ * behaviour the per-tool components used before extraction: an
+ * invalid JSON blob, a JSON array, or a JSON primitive all map to
+ * `null` so callers don't have to guard against surprise shapes.
+ */
+function parseFinalToolArgs(blob: string): Record<string, unknown> | null {
+	try {
+		const parsed: unknown = JSON.parse(blob);
+		if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+			return parsed as Record<string, unknown>;
+		}
+		return null;
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Parse a section's toolArgs against an expected tool name. Returns
+ * `null` when:
+ *   - the section's toolName doesn't match (component isn't for this
+ *     tool);
+ *   - the section has no args yet (call hasn't started streaming);
+ *   - or the args blob can't be parsed.
+ *
+ * Pass `{ partial: true }` for tools that need to render incrementally
+ * as each token lands (read_file, edit_file, write_file).
+ */
+export function parseToolArgs(
+	expected: BuiltInTool,
+	section: AgenticSection,
+	options: { partial?: boolean } = {}
+): Record<string, unknown> | null {
+	if (section.toolName !== expected || !section.toolArgs) return null;
+	return options.partial
+		? parsePartialJsonArgs(section.toolArgs)
+		: parseFinalToolArgs(section.toolArgs);
+}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/edit-file.ts

@@ -0,0 +1,71 @@
+// Meta parser for `edit_file` tool calls. Reads the file path and the
+// array of edits from the streamed args (partial JSON for incremental
+// rendering), plus the result blob for `result` / `edits_applied` /
+// `error` fields.
+
+import { BuiltInTool } from '$lib/enums';
+import { FILE_PATH_SEPARATOR_REGEX } from '$lib/constants';
+import { tryParseToolResultObject, type AgenticSection } from '$lib/utils';
+import { parseToolArgs } from './_shared';
+
+export type EditFileEdit = {
+	oldText: string;
+	newText: string;
+};
+
+export type EditFileMeta = {
+	fileName: string;
+	filePath: string;
+	edits: EditFileEdit[];
+	resultMessage?: string;
+	editsApplied?: number;
+	errorMessage?: string;
+};
+
+export function parseEditFileMeta(section: AgenticSection): EditFileMeta | null {
+	const args = parseToolArgs(BuiltInTool.EDIT_FILE, section, { partial: true });
+	if (!args) return null;
+
+	const rawPath = args.path ?? args.file_path ?? args.filePath;
+	if (typeof rawPath !== 'string' || !rawPath) return null;
+
+	const fileName = rawPath.split(FILE_PATH_SEPARATOR_REGEX).pop() || rawPath;
+
+	// Filter the streamed edits array strictly: each entry must be an
+	// object with a non-empty `old_text`. Edits without an old_text
+	// would diff against empty and render as a full re-write.
+	const rawEdits = Array.isArray(args.edits) ? args.edits : [];
+	const edits: EditFileEdit[] = [];
+	for (const e of rawEdits) {
+		if (!e || typeof e !== 'object' || Array.isArray(e)) continue;
+		const obj = e as Record<string, unknown>;
+		const oldText = typeof obj.old_text === 'string' ? obj.old_text : '';
+		if (!oldText) continue;
+		const newText = typeof obj.new_text === 'string' ? obj.new_text : '';
+		edits.push({ oldText, newText });
+	}
+
+	const resultObj = tryParseToolResultObject(section.toolResult);
+	let resultMessage: string | undefined;
+	let editsApplied: number | undefined;
+	let errorMessage: string | undefined;
+	if (typeof resultObj?.error === 'string') {
+		errorMessage = resultObj.error;
+	} else if (resultObj) {
+		if (typeof resultObj.result === 'string') {
+			resultMessage = resultObj.result;
+		}
+		if (Number.isFinite(Number(resultObj.edits_applied))) {
+			editsApplied = Number(resultObj.edits_applied);
+		}
+	}
+
+	return {
+		fileName,
+		filePath: rawPath,
+		edits,
+		resultMessage,
+		editsApplied,
+		errorMessage
+	};
+}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/exec-shell-command.ts

@@ -0,0 +1,23 @@
+// Meta parser for `exec_shell_command` tool calls. Surfaces the
+// command text from args `command` / `cmd` / `shell_command` aliases.
+// The exit-status and error parsing live in their own utilities
+// (`parse-exec-shell-status.ts` / `parse-exec-shell-error.ts`) - this
+// file only deals with what's strictly about *calling* the tool, since
+// the error / exit status elide from call-section to result-section.
+
+import { BuiltInTool } from '$lib/enums';
+import type { AgenticSection } from '$lib/utils';
+import { parseToolArgs } from './_shared';
+
+export type ExecShellCommandMeta = {
+	command: string;
+};
+
+export function parseExecShellCommandMeta(section: AgenticSection): ExecShellCommandMeta | null {
+	const args = parseToolArgs(BuiltInTool.EXEC_SHELL_COMMAND, section);
+	if (!args) return null;
+
+	const commandRaw = args.command ?? args.cmd ?? args.shell_command;
+	if (typeof commandRaw !== 'string' || !commandRaw) return null;
+	return { command: commandRaw };
+}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/file-glob-search.ts

@@ -0,0 +1,58 @@
+// Meta parser for `file_glob_search` tool calls. Reads the path,
+// include pattern, and optional exclude from the args (strict parsing)
+// and the matches from the result blob. Like grep_search, the result
+// parser keeps the original raw-text fallback for MCP servers that
+// emit unparseable output.
+
+import { BuiltInTool } from '$lib/enums';
+import { splitSearchSummaryList, type AgenticSection } from '$lib/utils';
+import { parseToolArgs } from './_shared';
+
+export type FileGlobSearchMeta = {
+	path: string;
+	include: string;
+	exclude?: string;
+	matches: string[];
+	totalMatches?: number;
+	errorMessage?: string;
+};
+
+export function parseFileGlobSearchMeta(section: AgenticSection): FileGlobSearchMeta | null {
+	const args = parseToolArgs(BuiltInTool.FILE_GLOB_SEARCH, section);
+	if (!args) return null;
+
+	const path = typeof args.path === 'string' ? args.path : '';
+	const include = typeof args.include === 'string' && args.include ? args.include : '**';
+	const exclude = typeof args.exclude === 'string' && args.exclude ? args.exclude : undefined;
+	if (!path) return null;
+
+	let matches: string[] = [];
+	let totalMatches: number | undefined;
+	let errorMessage: string | undefined;
+
+	const toolResultString = section.toolResult;
+	if (toolResultString) {
+		try {
+			const parsed: unknown = JSON.parse(toolResultString);
+			if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+				const obj = parsed as Record<string, unknown>;
+				if (typeof obj.error === 'string') {
+					errorMessage = obj.error;
+				} else if (typeof obj.plain_text_response === 'string') {
+					const split = splitSearchSummaryList(obj.plain_text_response, (total) => {
+						totalMatches = total;
+					});
+					matches = split.lines;
+				}
+			}
+		} catch {
+			// See grep-search.ts: same fallback used there.
+			const split = splitSearchSummaryList(toolResultString, (total) => {
+				totalMatches = total;
+			});
+			matches = split.lines;
+		}
+	}
+
+	return { path, include, exclude, matches, totalMatches, errorMessage };
+}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/grep-search.ts

@@ -0,0 +1,108 @@
+// Meta parser for `grep_search` tool calls. Reads the path/pattern
+// triplet from args (strict parsing - we wait for the args to
+// complete) and the matches from the result blob. The result parser
+// keeps the original "scan result as raw text on JSON.parse failure"
+// fallback so MCP servers that return unparseable output still get
+// surfaced.
+
+import { BuiltInTool } from '$lib/enums';
+import { splitSearchSummaryList, type AgenticSection } from '$lib/utils';
+import { parseToolArgs } from './_shared';
+
+export type GrepSearchMatch = {
+	file: string;
+	line?: number;
+	content: string;
+};
+
+export type GrepSearchMeta = {
+	path: string;
+	pattern: string;
+	include: string;
+	exclude?: string;
+	showLineNumbers: boolean;
+	matches: GrepSearchMatch[];
+	totalMatches?: number;
+	errorMessage?: string;
+};
+
+export function parseGrepSearchMeta(section: AgenticSection): GrepSearchMeta | null {
+	const args = parseToolArgs(BuiltInTool.GREP_SEARCH, section);
+	if (!args) return null;
+
+	const path = typeof args.path === 'string' ? args.path : '';
+	const pattern = typeof args.pattern === 'string' ? args.pattern : '';
+	if (!path || !pattern) return null;
+
+	const include = typeof args.include === 'string' && args.include ? args.include : '**';
+	const exclude = typeof args.exclude === 'string' && args.exclude ? args.exclude : undefined;
+	const showLineNumbers = args.return_line_numbers === true;
+
+	let matches: GrepSearchMatch[] = [];
+	let totalMatches: number | undefined;
+	let errorMessage: string | undefined;
+
+	const toolResultString = section.toolResult;
+	if (toolResultString) {
+		try {
+			const parsed: unknown = JSON.parse(toolResultString);
+			if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+				const obj = parsed as Record<string, unknown>;
+				if (typeof obj.error === 'string') {
+					errorMessage = obj.error;
+				} else if (typeof obj.plain_text_response === 'string') {
+					const split = splitSearchSummaryList(obj.plain_text_response, (total) => {
+						totalMatches = total;
+					});
+					matches = split.lines.map((line) => parseGrepLine(line, showLineNumbers));
+				}
+			}
+		} catch {
+			// Result wasn't JSON: keep behaviour for MCP servers that
+			// emit raw text and treat each line as a `<file>:<content>`
+			// (or `<file>:<line>:<content>`) match.
+			const split = splitSearchSummaryList(toolResultString, (total) => {
+				totalMatches = total;
+			});
+			matches = split.lines.map((line) => parseGrepLine(line, showLineNumbers));
+		}
+	}
+
+	return {
+		path,
+		pattern,
+		include,
+		exclude,
+		showLineNumbers,
+		matches,
+		totalMatches,
+		errorMessage
+	};
+}
+
+function parseGrepLine(line: string, showLineNumbers: boolean): GrepSearchMatch {
+	// Server output:
+	//   <file>:<content>          when return_line_numbers=false
+	//   <file>:<lineno>:<content> when return_line_numbers=true
+	const firstColon = line.indexOf(':');
+	if (firstColon === -1) {
+		return { file: line, content: '' };
+	}
+	const file = line.slice(0, firstColon);
+	const tail = line.slice(firstColon + 1);
+
+	if (!showLineNumbers) {
+		return { file, content: tail };
+	}
+
+	const secondColon = tail.indexOf(':');
+	if (secondColon === -1) {
+		return { file, content: tail };
+	}
+	const lineNum = parseInt(tail.slice(0, secondColon), 10);
+	return {
+		file,
+		line: Number.isFinite(lineNum) ? lineNum : undefined,
+		content: tail.slice(secondColon + 1)
+	};
+}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/read-file.ts

@@ -0,0 +1,52 @@
+// Meta parser for `read_file` tool calls. Reads the file path and an
+// optional line range (either `start_line`+`end_line` or
+// `start_line`+`line_count`). Args are parsed partially so a header
+// can render incrementally as the file path streams in.
+
+import { BuiltInTool } from '$lib/enums';
+import {
+	DEFAULT_LANGUAGE,
+	FILE_PATH_SEPARATOR_REGEX,
+	TEXT_LANGUAGE_PREFIX_REGEX
+} from '$lib/constants';
+import { getFileTypeByExtension, type AgenticSection } from '$lib/utils';
+import { parseToolArgs } from './_shared';
+
+export type ReadFileMeta = {
+	fileName: string;
+	lineRange: { start: number; end: number } | null;
+	language: string;
+};
+
+export function parseReadFileMeta(section: AgenticSection): ReadFileMeta | null {
+	const args = parseToolArgs(BuiltInTool.READ_FILE, section, { partial: true });
+	if (!args) return null;
+
+	const rawPath = args.path ?? args.file_path ?? args.filePath;
+	if (typeof rawPath !== 'string' || !rawPath) return null;
+
+	const fileName = rawPath.split(FILE_PATH_SEPARATOR_REGEX).pop() || rawPath;
+
+	// Models emit range arguments under several aliases. Accept all to
+	// stay forgiving across prompt variations.
+	const startRaw = args.start_line ?? args.line_start ?? args.startLine ?? args.from_line;
+	const endRaw = args.end_line ?? args.line_end ?? args.endLine ?? args.to_line;
+	const countRaw = args.line_count ?? args.count ?? args.num_lines;
+
+	let lineRange: { start: number; end: number } | null = null;
+	const sNum = Number(startRaw);
+	const eNum = Number(endRaw);
+	if (startRaw != null && endRaw != null && Number.isFinite(sNum) && Number.isFinite(eNum)) {
+		lineRange = { start: sNum, end: eNum };
+	} else if (startRaw != null && countRaw != null) {
+		const cNum = Number(countRaw);
+		if (Number.isFinite(sNum) && Number.isFinite(cNum)) {
+			lineRange = { start: sNum, end: sNum + cNum - 1 };
+		}
+	}
+
+	const fileType = getFileTypeByExtension(fileName);
+	const language = fileType ? fileType.replace(TEXT_LANGUAGE_PREFIX_REGEX, '') : DEFAULT_LANGUAGE;
+
+	return { fileName, lineRange, language };
+}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/run-javascript.ts

@@ -0,0 +1,56 @@
+// Meta parser for `run_javascript` tool calls. Reads the JS code and
+// optional timeout from args (strict parsing) and surfaces any error
+// from the result blob. SandboxService.formatReply emits a JSON object
+// containing an `error` field on failure, but a partial/non-JSON
+// failure renders as a flat line beginning with `Error:`. Both shapes
+// are handled.
+
+import { BuiltInTool } from '$lib/enums';
+import type { AgenticSection } from '$lib/utils';
+import { parseToolArgs } from './_shared';
+
+export type RunJavascriptMeta = {
+	code: string;
+	timeoutMs?: number;
+	errorMessage?: string;
+};
+
+export function parseRunJavascriptMeta(section: AgenticSection): RunJavascriptMeta | null {
+	const args = parseToolArgs(BuiltInTool.RUN_JAVASCRIPT, section);
+	if (!args) return null;
+
+	const code = typeof args.code === 'string' ? args.code : '';
+	if (!code) return null;
+
+	const timeoutRaw = Number(args.timeout_ms);
+	const timeoutMs = Number.isFinite(timeoutRaw) && timeoutRaw > 0 ? timeoutRaw : undefined;
+
+	let errorMessage: string | undefined;
+	const toolResultString = section.toolResult;
+	if (toolResultString) {
+		// Branches matter here: a JSON object can carry `error`, but a
+		// JSON array always represents successful output (sandbox returns
+		// the array of values). Only when the result isn't a JSON object
+		// do we scan raw lines for the `Error:` prefix.
+		let parsedObject: Record<string, unknown> | null = null;
+		try {
+			const parsed: unknown = JSON.parse(toolResultString);
+			if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+				parsedObject = parsed as Record<string, unknown>;
+			}
+		} catch {
+			parsedObject = null;
+		}
+		if (typeof parsedObject?.error === 'string') {
+			errorMessage = parsedObject.error;
+		} else if (!parsedObject) {
+			const errorLine = toolResultString
+				.split('\n')
+				.map((line) => line.trim())
+				.find((line) => line.startsWith('Error:'));
+			if (errorLine) errorMessage = errorLine.slice('Error:'.length).trim();
+		}
+	}
+
+	return { code, timeoutMs, errorMessage };
+}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageToolCall/parsers/write-file.ts

@@ -0,0 +1,54 @@
+// Meta parser for `write_file` tool calls. Reads the path/content from
+// the streamed args (partial JSON so we can render before the call
+// finishes) and surfaces `bytes`, `result`, and `error` from the
+// result blob.
+
+import { BuiltInTool } from '$lib/enums';
+import {
+	DEFAULT_LANGUAGE,
+	FILE_PATH_SEPARATOR_REGEX,
+	TEXT_LANGUAGE_PREFIX_REGEX
+} from '$lib/constants';
+import { getFileTypeByExtension, tryParseToolResultObject, type AgenticSection } from '$lib/utils';
+import { parseToolArgs } from './_shared';
+
+export type WriteFileMeta = {
+	fileName: string;
+	filePath: string;
+	language: string;
+	content: string;
+	bytesWritten?: number;
+	resultMessage?: string;
+	errorMessage?: string;
+};
+
+export function parseWriteFileMeta(section: AgenticSection): WriteFileMeta | null {
+	const args = parseToolArgs(BuiltInTool.WRITE_FILE, section, { partial: true });
+	if (!args) return null;
+
+	// Tool contracts drifted over time: some models emit `path`,
+	// others `file_path` / `filePath`. Accept all three.
+	const rawPath = args.path ?? args.file_path ?? args.filePath;
+	if (typeof rawPath !== 'string' || !rawPath) return null;
+
+	const fileName = rawPath.split(FILE_PATH_SEPARATOR_REGEX).pop() || rawPath;
+	const content = typeof args.content === 'string' ? args.content : '';
+	const language =
+		getFileTypeByExtension(rawPath)?.replace(TEXT_LANGUAGE_PREFIX_REGEX, '') ?? DEFAULT_LANGUAGE;
+
+	const resultObj = tryParseToolResultObject(section.toolResult);
+	const bytesWritten =
+		resultObj && Number.isFinite(Number(resultObj.bytes)) ? Number(resultObj.bytes) : undefined;
+	const resultMessage = typeof resultObj?.result === 'string' ? resultObj.result : undefined;
+	const errorMessage = typeof resultObj?.error === 'string' ? resultObj.error : undefined;
+
+	return {
+		fileName,
+		filePath: rawPath,
+		language,
+		content,
+		bytesWritten,
+		resultMessage,
+		errorMessage
+	};
+}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUser.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import {
+		ChatMessageActionIcons,
+		ChatMessageEditForm,
+		ChatMessageStatistics,
+		ChatMessageUserBubble
+	} from '$lib/components/app/chat';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { isLoading } from '$lib/stores/chat.svelte';
+	import { MessageRole, ChatMessageStatisticsMode } from '$lib/enums';
+	import { config } from '$lib/stores/settings.svelte';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		isLastUserMessage?: boolean;
+		nextAssistantMessage?: DatabaseMessage | null;
+		showDeleteDialog: boolean;
+		onEdit: () => void;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onCopy: () => void;
+	}
+
+	let {
+		class: className = '',
+		message,
+		siblingInfo = null,
+		deletionInfo,
+		isLastUserMessage = false,
+		nextAssistantMessage = null,
+		showDeleteDialog,
+		onEdit,
+		onDelete,
+		onConfirmDelete,
+		onForkConversation,
+		onShowDeleteDialogChange,
+		onNavigateToSibling,
+		onCopy
+	}: Props = $props();
+
+	// Get contexts
+	const editCtx = getMessageEditContext();
+	const processingState = useProcessingState();
+
+	const currentConfig = $derived(config());
+	const isActivelyProcessing = $derived(isLastUserMessage && isLoading());
+
+	// For agentic turns, prefer the cumulative agentic.llm totals over per-call timings.
+	let storedReadingStats = $derived.by(() => {
+		const timings = nextAssistantMessage?.timings;
+		if (!timings?.prompt_n || !timings?.prompt_ms) return null;
+
+		const agentic = timings.agentic;
+
+		return {
+			promptTokens: agentic ? agentic.llm.prompt_n : timings.prompt_n,
+			promptMs: agentic ? agentic.llm.prompt_ms : timings.prompt_ms
+		};
+	});
+
+	let showStoredReadingStats = $derived(
+		Boolean(currentConfig.showMessageStats) && storedReadingStats !== null
+	);
+
+	let showLiveReadingStats = $derived(
+		Boolean(currentConfig.showMessageStats) && isActivelyProcessing && storedReadingStats === null
+	);
+
+	$effect(() => {
+		if (showLiveReadingStats) {
+			processingState.startMonitoring();
+		}
+	});
+</script>
+
+<div
+	aria-label="User message with actions"
+	class="chat-message-user group flex flex-col items-end gap-3 md:gap-2 {className}"
+	role="group"
+>
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
+	{:else}
+		<ChatMessageUserBubble
+			content={message.content}
+			attachments={message.extra}
+			renderMarkdown={true}
+		/>
+
+		{#if showStoredReadingStats}
+			<!-- Reading stats sourced from the assistant message that followed this turn -->
+			<div class="info my-2 grid w-full justify-items-end gap-4 tabular-nums">
+				<div
+					class="inline-flex flex-wrap items-start justify-end gap-2 text-xs text-muted-foreground"
+				>
+					<ChatMessageStatistics
+						mode={ChatMessageStatisticsMode.READING}
+						promptTokens={storedReadingStats!.promptTokens}
+						promptMs={storedReadingStats!.promptMs}
+					/>
+				</div>
+			</div>
+		{:else if showLiveReadingStats}
+			{@const liveStats = processingState.getLiveProcessingStats()}
+			{#if liveStats}
+				<div class="info my-2 grid w-full justify-items-end gap-4 tabular-nums">
+					<div
+						class="inline-flex flex-wrap items-start justify-end gap-2 text-xs text-muted-foreground"
+					>
+						<ChatMessageStatistics
+							mode={ChatMessageStatisticsMode.READING}
+							isLive
+							promptTokens={liveStats.tokensProcessed}
+							promptMs={liveStats.timeMs}
+						/>
+					</div>
+				</div>
+			{/if}
+		{/if}
+
+		{#if message.timestamp}
+			<div class="max-w-[80%]">
+				<ChatMessageActionIcons
+					actionsPosition="right"
+					{deletionInfo}
+					justify="end"
+					{onConfirmDelete}
+					{onCopy}
+					{onDelete}
+					{onEdit}
+					{onForkConversation}
+					{onNavigateToSibling}
+					{onShowDeleteDialogChange}
+					{siblingInfo}
+					{showDeleteDialog}
+					role={MessageRole.USER}
+				/>
+			</div>
+		{/if}
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserBubble.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Card } from '$lib/components/ui/card';
+	import { ChatAttachmentsList, MarkdownContent } from '$lib/components/app';
+	import { config } from '$lib/stores/settings.svelte';
+	import type { DatabaseMessageExtra } from '$lib/types/database';
+
+	interface Props {
+		content: string;
+		attachments?: DatabaseMessageExtra[];
+		renderMarkdown?: boolean;
+		textColorClass?: string;
+		cardBgClass?: string;
+		maxHeightStyle?: string;
+	}
+
+	let {
+		content,
+		attachments = [],
+		renderMarkdown = false,
+		textColorClass = 'text-foreground',
+		cardBgClass = 'dark:bg-primary/15',
+		maxHeightStyle = ''
+	}: Props = $props();
+
+	let isMultiline = $state(false);
+	let messageElement: HTMLElement | undefined = $state();
+	const currentConfig = config();
+
+	$effect(() => {
+		if (!messageElement || !content.trim()) return;
+
+		if (content.includes('\n')) {
+			isMultiline = true;
+			return;
+		}
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const element = entry.target as HTMLElement;
+				const estimatedSingleLineHeight = 24; // Typical line height for text-md
+
+				isMultiline = element.offsetHeight > estimatedSingleLineHeight * 1.5;
+			}
+		});
+
+		resizeObserver.observe(messageElement);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+</script>
+
+{#if attachments && attachments.length > 0}
+	<div class="mb-2 max-w-[80%]">
+		<ChatAttachmentsList {attachments} readonly imageHeight="h-40" />
+	</div>
+{/if}
+
+{#if content.trim()}
+	<Card
+		class="chat-message-user-bubble max-w-[80%] overflow-y-auto rounded-[1.125rem] border-none bg-primary/5 px-3.75 py-1.5 {textColorClass} backdrop-blur-md data-multiline:py-2.5 {cardBgClass}"
+		data-multiline={isMultiline ? '' : undefined}
+		style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
+	>
+		{#if renderMarkdown && currentConfig.renderUserContentAsMarkdown}
+			<div bind:this={messageElement}>
+				<MarkdownContent class="markdown-user-content" {content} />
+			</div>
+		{:else}
+			<span bind:this={messageElement} class="text-md whitespace-pre-wrap">
+				{content}
+			</span>
+		{/if}
+	</Card>
+{/if}

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { ActionIcon, ChatMessageEditForm, ChatMessageUserBubble } from '$lib/components/app';
+	import { ArrowUp, Edit, Trash2 } from '@lucide/svelte';
+	import { useMessageEditContext } from '$lib/hooks/use-message-edit-context.svelte';
+
+	interface Props {
+		class?: string;
+		content: string;
+		extras?: DatabaseMessageExtra[];
+		onSendImmediately: () => void;
+		onEdit: (newContent: string, extras?: DatabaseMessageExtra[]) => void;
+		onDelete: () => void;
+	}
+
+	let {
+		class: className = '',
+		content,
+		extras = [],
+		onSendImmediately,
+		onEdit,
+		onDelete
+	}: Props = $props();
+
+	const editCtx = useMessageEditContext({
+		getContent: () => content,
+		getExtras: () => extras,
+		onSave: (content, extras) => onEdit(content, extras)
+	});
+</script>
+
+<div
+	aria-label="Pending user message"
+	class="group flex flex-col items-end gap-3 transition-opacity hover:opacity-80 md:gap-2 {className} sticky bottom-32"
+	role="group"
+>
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
+	{:else}
+		<ChatMessageUserBubble
+			{content}
+			attachments={extras}
+			textColorClass="text-muted-foreground"
+			cardBgClass="dark:bg-primary/8"
+			maxHeightStyle="overflow-wrap: anywhere; word-break: break-word;"
+		/>
+
+		<div class="max-w-[80%]">
+			<div class="relative flex h-6 items-center justify-between">
+				<div class="right-0 flex items-center gap-2 opacity-100 transition-opacity">
+					<div
+						class="pointer-events-auto inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-hover:opacity-100"
+					>
+						<ActionIcon icon={Edit} tooltip="Edit" onclick={editCtx.handleEdit} />
+						<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
+						<ActionIcon icon={ArrowUp} tooltip="Send immediately" onclick={onSendImmediately} />
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCard.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
+	import type { Snippet, Component } from 'svelte';
+
+	interface Props {
+		icon: Component<{ class?: string }>;
+		message: Snippet;
+		actions: Snippet;
+	}
+
+	let { icon: IconComponent, message, actions }: Props = $props();
+</script>
+
+<div class="my-2 rounded-lg border border-border bg-card p-3">
+	<div class="mb-3 flex items-center gap-2 text-sm">
+		<IconComponent class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+		<span>
+			{@render message()}
+		</span>
+	</div>
+	<div class="flex flex-wrap items-center gap-2">
+		{@render actions()}
+	</div>
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardContinueRequest.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { RotateCw } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import ChatMessageActionCard from './ChatMessageActionCard.svelte';
+
+	interface Props {
+		onDecision: (shouldContinue: boolean) => void;
+	}
+
+	let { onDecision }: Props = $props();
+</script>
+
+<ChatMessageActionCard icon={RotateCw}>
+	{#snippet message()}
+		Agentic turn limit reached. Continue?
+	{/snippet}
+
+	{#snippet actions()}
+		<Button size="sm" onclick={() => onDecision(true)}>Continue</Button>
+
+		<Button
+			variant="destructive"
+			size="sm"
+			class="text-destructive hover:text-destructive"
+			onclick={() => onDecision(false)}
+		>
+			Stop
+		</Button>
+	{/snippet}
+</ChatMessageActionCard>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardPermissionRequest.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { ChevronDown, ShieldQuestion } from '@lucide/svelte';
+	import { ChatMessageActionCard } from '$lib/components/app';
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import * as ButtonGroup from '$lib/components/ui/button-group';
+	import { cn } from '$lib/components/ui/utils';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { ToolSource, ToolPermissionDecision } from '$lib/enums';
+	import { TOOL_SERVER_LABELS } from '$lib/constants';
+	import { toolsStore } from '$lib/stores/tools.svelte';
+
+	interface Props {
+		toolName: string;
+		serverLabel: string;
+		onDecision: (decision: ToolPermissionDecision) => void;
+	}
+
+	let { toolName, serverLabel, onDecision }: Props = $props();
+</script>
+
+<ChatMessageActionCard icon={ShieldQuestion}>
+	{#snippet message()}
+		Allow use of <span class="font-semibold">{toolName}</span>{#if serverLabel}
+			&nbsp;from <span class="font-semibold">{serverLabel}</span>{/if}?
+	{/snippet}
+
+	{#snippet actions()}
+		<DropdownMenu.Root>
+			<ButtonGroup.Root class="overflow-hidden rounded-md shadow-sm">
+				<Button
+					variant="secondary"
+					size="sm"
+					class="!rounded-r-none !shadow-none"
+					onclick={() => onDecision(ToolPermissionDecision.ONCE)}
+				>
+					Allow once
+				</Button>
+
+				<ButtonGroup.Separator />
+
+				<DropdownMenu.Trigger
+					class={cn(
+						buttonVariants({ variant: 'secondary', size: 'sm' }),
+						'inline-flex cursor-pointer items-center !rounded-l-none !shadow-none !px-2'
+					)}
+					aria-label="More allow options"
+				>
+					<ChevronDown class="h-3.5 w-3.5" />
+				</DropdownMenu.Trigger>
+			</ButtonGroup.Root>
+
+			<DropdownMenu.Content align="start" class="min-w-[8rem]">
+				<DropdownMenu.Item onclick={() => onDecision(ToolPermissionDecision.ALWAYS)}>
+					Always allow <pre>{toolName}</pre>
+					tool
+				</DropdownMenu.Item>
+				{#if serverLabel}
+					<DropdownMenu.Item onclick={() => onDecision(ToolPermissionDecision.ALWAYS_SERVER)}>
+						Always allow all tools from {serverLabel}
+					</DropdownMenu.Item>
+				{:else}
+					{@const source = toolsStore.getToolSource(toolName)}
+					{@const providerName =
+						source === ToolSource.BUILTIN
+							? TOOL_SERVER_LABELS[ToolSource.BUILTIN]
+							: source === ToolSource.CUSTOM
+								? TOOL_SERVER_LABELS[ToolSource.CUSTOM]
+								: 'MCP Tools'}
+					<DropdownMenu.Item onclick={() => onDecision(ToolPermissionDecision.ALWAYS_SERVER)}>
+						Approve all tools from {providerName}
+					</DropdownMenu.Item>
+				{/if}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+
+		<Button variant="destructive" size="sm" onclick={() => onDecision(ToolPermissionDecision.DENY)}>
+			Deny
+		</Button>
+	{/snippet}
+</ChatMessageActionCard>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIcons.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { Edit, Copy, RefreshCw, Trash2, ArrowRight, GitBranch } from '@lucide/svelte';
+	import {
+		ActionIcon,
+		ChatMessageActionIconsBranchingControls,
+		DialogConfirmation
+	} from '$lib/components/app';
+	import { Switch } from '$lib/components/ui/switch';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import Input from '$lib/components/ui/input/input.svelte';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import { MessageRole } from '$lib/enums';
+	import { activeConversation } from '$lib/stores/conversations.svelte';
+
+	interface Props {
+		role: MessageRole.USER | MessageRole.ASSISTANT;
+		justify: 'start' | 'end';
+		actionsPosition: 'left' | 'right';
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		showDeleteDialog: boolean;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		onCopy: () => void;
+		onEdit?: () => void;
+		onRegenerate?: () => void;
+		onContinue?: () => void;
+		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		showRawOutputSwitch?: boolean;
+		rawOutputEnabled?: boolean;
+		onRawOutputToggle?: (enabled: boolean) => void;
+	}
+
+	let {
+		actionsPosition,
+		deletionInfo,
+		justify,
+		onCopy,
+		onEdit,
+		onConfirmDelete,
+		onContinue,
+		onDelete,
+		onForkConversation,
+		onNavigateToSibling,
+		onShowDeleteDialogChange,
+		onRegenerate,
+		role,
+		siblingInfo = null,
+		showDeleteDialog,
+		showRawOutputSwitch = false,
+		rawOutputEnabled = false,
+		onRawOutputToggle
+	}: Props = $props();
+
+	let showForkDialog = $state(false);
+	let forkName = $state('');
+	let forkIncludeAttachments = $state(true);
+
+	function handleConfirmDelete() {
+		onConfirmDelete();
+		onShowDeleteDialogChange(false);
+	}
+
+	function handleOpenForkDialog() {
+		const conv = activeConversation();
+
+		forkName = `Fork of ${conv?.name ?? 'Conversation'}`;
+		forkIncludeAttachments = true;
+		showForkDialog = true;
+	}
+
+	function handleConfirmFork() {
+		onForkConversation?.({ name: forkName.trim(), includeAttachments: forkIncludeAttachments });
+		showForkDialog = false;
+	}
+</script>
+
+<div class="relative {justify === 'start' ? 'mt-2' : ''} flex h-6 items-center justify-between">
+	<div
+		class="{actionsPosition === 'left'
+			? 'left-0'
+			: 'right-0'} flex items-center gap-2 opacity-100 transition-opacity"
+	>
+		{#if siblingInfo && siblingInfo.totalSiblings > 1}
+			<ChatMessageActionIconsBranchingControls {siblingInfo} {onNavigateToSibling} />
+		{/if}
+
+		<div
+			class="pointer-events-auto inset-0 flex items-center gap-1 opacity-100 transition-all duration-150"
+		>
+			<ActionIcon icon={Copy} tooltip="Copy" onclick={onCopy} />
+
+			{#if onEdit}
+				<ActionIcon icon={Edit} tooltip="Edit" onclick={onEdit} />
+			{/if}
+
+			{#if role === MessageRole.ASSISTANT && onRegenerate}
+				<ActionIcon icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
+			{/if}
+
+			{#if role === MessageRole.ASSISTANT && onContinue}
+				<ActionIcon icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
+			{/if}
+
+			{#if onForkConversation}
+				<ActionIcon icon={GitBranch} tooltip="Fork conversation" onclick={handleOpenForkDialog} />
+			{/if}
+
+			<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
+		</div>
+	</div>
+
+	{#if showRawOutputSwitch}
+		<div class="flex items-center gap-2">
+			<span class="text-xs text-muted-foreground">Show raw output</span>
+			<Switch
+				checked={rawOutputEnabled}
+				onCheckedChange={(checked) => onRawOutputToggle?.(checked)}
+			/>
+		</div>
+	{/if}
+</div>
+
+<DialogConfirmation
+	bind:open={showDeleteDialog}
+	title="Delete Message"
+	description={deletionInfo && deletionInfo.totalCount > 1
+		? `This will delete ${deletionInfo.totalCount} messages including: ${deletionInfo.userMessages} user message${deletionInfo.userMessages > 1 ? 's' : ''} and ${deletionInfo.assistantMessages} assistant response${deletionInfo.assistantMessages > 1 ? 's' : ''}. All messages in this branch and their responses will be permanently removed. This action cannot be undone.`
+		: 'Are you sure you want to delete this message? This action cannot be undone.'}
+	confirmText={deletionInfo && deletionInfo.totalCount > 1
+		? `Delete ${deletionInfo.totalCount} Messages`
+		: 'Delete'}
+	cancelText="Cancel"
+	variant="destructive"
+	icon={Trash2}
+	onConfirm={handleConfirmDelete}
+	onCancel={() => onShowDeleteDialogChange(false)}
+/>
+
+<DialogConfirmation
+	bind:open={showForkDialog}
+	title="Fork Conversation"
+	description="Create a new conversation branching from this message."
+	confirmText="Fork"
+	cancelText="Cancel"
+	icon={GitBranch}
+	onConfirm={handleConfirmFork}
+	onCancel={() => (showForkDialog = false)}
+>
+	<div class="flex flex-col gap-4 py-2">
+		<div class="flex flex-col gap-2">
+			<Label for="fork-name">Title</Label>
+
+			<Input
+				id="fork-name"
+				class="text-foreground"
+				placeholder="Enter fork name"
+				type="text"
+				bind:value={forkName}
+			/>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<Checkbox
+				id="fork-attachments"
+				checked={forkIncludeAttachments}
+				onCheckedChange={(checked) => {
+					forkIncludeAttachments = checked === true;
+				}}
+			/>
+
+			<Label for="fork-attachments" class="cursor-pointer text-sm font-normal">
+				Include all attachments
+			</Label>
+		</div>
+	</div>
+</DialogConfirmation>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIconsBranchingControls.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import { ActionIcon } from '$lib/components/app';
+
+	interface Props {
+		class?: string;
+		siblingInfo: ChatMessageSiblingInfo | null;
+		onNavigateToSibling?: (siblingId: string) => void;
+	}
+
+	let { class: className = '', siblingInfo, onNavigateToSibling }: Props = $props();
+
+	let hasPrevious = $derived(siblingInfo && siblingInfo.currentIndex > 0);
+	let hasNext = $derived(siblingInfo && siblingInfo.currentIndex < siblingInfo.totalSiblings - 1);
+	let nextSiblingId = $derived(
+		hasNext ? siblingInfo!.siblingIds[siblingInfo!.currentIndex + 1] : null
+	);
+	let previousSiblingId = $derived(
+		hasPrevious ? siblingInfo!.siblingIds[siblingInfo!.currentIndex - 1] : null
+	);
+</script>
+
+{#if siblingInfo && siblingInfo.totalSiblings > 1}
+	<div
+		aria-label="Message version {siblingInfo.currentIndex + 1} of {siblingInfo.totalSiblings}"
+		class="flex items-center gap-1 text-xs text-muted-foreground {className}"
+		role="navigation"
+	>
+		<ActionIcon
+			icon={ChevronLeft}
+			tooltip="Previous version"
+			disabled={!hasPrevious}
+			class="h-5 w-5 p-0 {!hasPrevious ? '!cursor-not-allowed opacity-30' : ''}"
+			onclick={() => onNavigateToSibling?.(previousSiblingId!)}
+		/>
+
+		<span class="px-1 font-mono text-xs">
+			{siblingInfo.currentIndex + 1}/{siblingInfo.totalSiblings}
+		</span>
+
+		<ActionIcon
+			icon={ChevronRight}
+			tooltip="Next version"
+			disabled={!hasNext}
+			class="h-5 w-5 p-0 {!hasNext ? 'opacity-30' : ''}"
+			onclick={() => onNavigateToSibling?.(nextSiblingId!)}
+		/>
+	</div>
+{/if}

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

@@ -0,0 +1,273 @@
+<script lang="ts">
+	import {
+		ChatMessageStatistics,
+		MarkdownContent,
+		ChatMessageActionCardPermissionRequest,
+		ChatMessageActionCardContinueRequest
+	} from '$lib/components/app';
+
+	import { AgenticSectionType, ChatMessageStatsView, ToolPermissionDecision } from '$lib/enums';
+	import type {
+		ChatMessageAgenticTimings,
+		ChatMessageAgenticTurnStats,
+		DatabaseMessage
+	} from '$lib/types';
+	import { deriveAgenticSections, type AgenticSection } from '$lib/utils';
+	import {
+		agenticPendingPermissionRequest,
+		agenticResolvePermission,
+		agenticPendingContinueRequest,
+		agenticResolveContinue,
+		agenticLastError,
+		agenticExecutingToolCallId
+	} from '$lib/stores/agentic.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import ChatMessageReasoningBlock from './ChatMessageReasoningBlock.svelte';
+	import ChatMessageToolCallBlock from './ChatMessage/ChatMessageToolCall/ChatMessageToolCallBlock.svelte';
+
+	interface Props {
+		message: DatabaseMessage;
+		toolMessages?: DatabaseMessage[];
+		isStreaming?: boolean;
+		isLastAssistantMessage?: boolean;
+	}
+
+	let {
+		message,
+		toolMessages = [],
+		isStreaming = false,
+		isLastAssistantMessage = false
+	}: Props = $props();
+
+	let expandedStates: Record<number, boolean> = $state({});
+
+	const renderThinkingAsMarkdown = $derived(config().renderThinkingAsMarkdown as boolean);
+	const showThoughtInProgress = $derived(Boolean(config().showThoughtInProgress));
+	const alwaysShowToolCallContent = $derived(Boolean(config().alwaysShowToolCallContent));
+	const showMessageStats = $derived(Boolean(config().showMessageStats));
+	const showAgenticTurnStats = $derived(showMessageStats && Boolean(config().showAgenticTurnStats));
+
+	const hasReasoningError = $derived(
+		isLastAssistantMessage ? !!agenticLastError(message.convId) : false
+	);
+
+	let permissionDismissed = $state(false);
+
+	const pendingPermission = $derived(
+		isStreaming && isLastAssistantMessage ? agenticPendingPermissionRequest(message.convId) : null
+	);
+
+	let prevPendingRef: typeof pendingPermission = null;
+	$effect(() => {
+		if (pendingPermission !== prevPendingRef) {
+			prevPendingRef = pendingPermission;
+			if (pendingPermission) {
+				permissionDismissed = false;
+			}
+		}
+	});
+
+	function handlePermission(decision: ToolPermissionDecision) {
+		permissionDismissed = true;
+		agenticResolvePermission(message.convId, decision);
+	}
+
+	let continueDismissed = $state(false);
+
+	const pendingContinue = $derived(
+		isStreaming && isLastAssistantMessage ? agenticPendingContinueRequest(message.convId) : false
+	);
+
+	let prevContinueRef = false;
+	$effect(() => {
+		if (pendingContinue !== prevContinueRef) {
+			prevContinueRef = pendingContinue;
+			if (pendingContinue) {
+				continueDismissed = false;
+			}
+		}
+	});
+
+	function handleContinue(shouldContinue: boolean) {
+		continueDismissed = true;
+		agenticResolveContinue(message.convId, shouldContinue);
+	}
+
+	const sections = $derived(deriveAgenticSections(message, toolMessages, [], isStreaming));
+
+	const currentlyExecutingToolCallId = $derived(
+		isStreaming ? agenticExecutingToolCallId(message.convId) : null
+	);
+
+	type TurnGroup = {
+		sections: AgenticSection[];
+		flatIndices: number[];
+	};
+
+	const turnGroups: TurnGroup[] = $derived.by(() => {
+		const groups: TurnGroup[] = [];
+		let currentTurn: AgenticSection[] = [];
+		let currentIndices: number[] = [];
+		let prevWasTool = false;
+
+		for (let i = 0; i < sections.length; i++) {
+			const section = sections[i];
+			const isTool =
+				section.type === AgenticSectionType.TOOL_CALL ||
+				section.type === AgenticSectionType.TOOL_CALL_PENDING ||
+				section.type === AgenticSectionType.TOOL_CALL_STREAMING;
+
+			if (!isTool && prevWasTool && currentTurn.length > 0) {
+				groups.push({ sections: currentTurn, flatIndices: currentIndices });
+				currentTurn = [];
+				currentIndices = [];
+			}
+
+			currentTurn.push(section);
+			currentIndices.push(i);
+			prevWasTool = isTool;
+		}
+
+		if (currentTurn.length > 0) {
+			groups.push({ sections: currentTurn, flatIndices: currentIndices });
+		}
+
+		return groups;
+	});
+
+	function getDefaultExpanded(section: AgenticSection): boolean {
+		if (
+			section.type === AgenticSectionType.TOOL_CALL ||
+			section.type === AgenticSectionType.TOOL_CALL_PENDING ||
+			section.type === AgenticSectionType.TOOL_CALL_STREAMING
+		) {
+			return alwaysShowToolCallContent;
+		}
+
+		if (section.type === AgenticSectionType.REASONING_PENDING) {
+			return showThoughtInProgress;
+		}
+
+		return false;
+	}
+
+	function isExpanded(index: number, section: AgenticSection): boolean {
+		if (expandedStates[index] !== undefined) {
+			return expandedStates[index];
+		}
+
+		return getDefaultExpanded(section);
+	}
+
+	function toggleExpanded(index: number, section: AgenticSection) {
+		const currentState = isExpanded(index, section);
+
+		expandedStates[index] = !currentState;
+	}
+
+	function buildTurnAgenticTimings(stats: ChatMessageAgenticTurnStats): ChatMessageAgenticTimings {
+		return {
+			turns: 1,
+			toolCallsCount: stats.toolCalls.length,
+			toolsMs: stats.toolsMs,
+			toolCalls: stats.toolCalls,
+			llm: stats.llm
+		};
+	}
+</script>
+
+{#snippet renderSection(section: AgenticSection, index: number)}
+	{#if section.type === AgenticSectionType.TEXT}
+		<div class="agentic-text">
+			<MarkdownContent content={section.content} attachments={message?.extra} />
+		</div>
+	{:else if section.type === AgenticSectionType.REASONING || section.type === AgenticSectionType.REASONING_PENDING}
+		<ChatMessageReasoningBlock
+			{section}
+			open={isExpanded(index, section)}
+			{isStreaming}
+			{renderThinkingAsMarkdown}
+			{hasReasoningError}
+			attachments={message?.extra}
+			onToggle={() => toggleExpanded(index, section)}
+		/>
+	{:else if section.type === AgenticSectionType.TOOL_CALL || section.type === AgenticSectionType.TOOL_CALL_PENDING || section.type === AgenticSectionType.TOOL_CALL_STREAMING}
+		<ChatMessageToolCallBlock
+			{section}
+			open={isExpanded(index, section)}
+			{isStreaming}
+			isExecuting={section.toolCallId !== undefined &&
+				section.toolCallId === currentlyExecutingToolCallId}
+			attachments={message?.extra}
+			onToggle={() => toggleExpanded(index, section)}
+		/>
+	{/if}
+{/snippet}
+
+<div class="agentic-content gap-2">
+	{#if turnGroups.length > 1}
+		{#each turnGroups as turn, turnIndex (turnIndex)}
+			{@const turnStats = message?.timings?.agentic?.perTurn?.[turnIndex]}
+
+			<div class="agentic-turn group/turn grid gap-2">
+				{#each turn.sections as section, sIdx (turn.flatIndices[sIdx])}
+					{@render renderSection(section, turn.flatIndices[sIdx])}
+				{/each}
+
+				{#if turnStats && showAgenticTurnStats}
+					<div class="turn-stats transition-opacity duration-150 mt-1 mb-4">
+						<ChatMessageStatistics
+							promptTokens={turnStats.llm.prompt_n}
+							promptMs={turnStats.llm.prompt_ms}
+							predictedTokens={turnStats.llm.predicted_n}
+							predictedMs={turnStats.llm.predicted_ms}
+							agenticTimings={turnStats.toolCalls.length > 0
+								? buildTurnAgenticTimings(turnStats)
+								: undefined}
+							initialView={ChatMessageStatsView.GENERATION}
+							hideSummary
+						/>
+					</div>
+				{/if}
+			</div>
+		{/each}
+	{:else}
+		{#each sections as section, index (index)}
+			{@render renderSection(section, index)}
+		{/each}
+	{/if}
+
+	{#if pendingPermission && !permissionDismissed}
+		<ChatMessageActionCardPermissionRequest
+			toolName={pendingPermission.toolName}
+			serverLabel={pendingPermission.serverLabel}
+			onDecision={handlePermission}
+		/>
+	{/if}
+
+	{#if pendingContinue && !continueDismissed}
+		<ChatMessageActionCardContinueRequest onDecision={handleContinue} />
+	{/if}
+</div>
+
+<style>
+	.agentic-content {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: 48rem;
+	}
+
+	.agentic-content > :global(*),
+	.agentic-turn > :global(*) {
+		min-width: 0;
+	}
+
+	.agentic-text {
+		width: 100%;
+	}
+
+	.turn-stats {
+		border-top: 1px solid hsl(var(--muted) / 0.5);
+	}
+</style>

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

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { X, AlertTriangle } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Switch } from '$lib/components/ui/switch';
+	import { ChatForm, DialogConfirmation } from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { KeyboardKey, MessageRole } from '$lib/enums';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { processFilesToChatUploaded } from '$lib/utils/browser-only';
+
+	const editCtx = getMessageEditContext();
+
+	let saveWithoutRegenerate = $state(false);
+	let showDiscardDialog = $state(false);
+	let branchAfterEdit = $state(false);
+
+	let isUserMessage = $derived(editCtx.messageRole === MessageRole.USER);
+	let isAssistantMessage = $derived(editCtx.messageRole === MessageRole.ASSISTANT);
+
+	let hasUnsavedChanges = $derived.by(() => {
+		if (editCtx.editedContent !== editCtx.originalContent) return true;
+		if (editCtx.editedUploadedFiles.length > 0) return true;
+
+		const extrasChanged =
+			editCtx.editedExtras.length !== editCtx.originalExtras.length ||
+			editCtx.editedExtras.some((extra, i) => extra !== editCtx.originalExtras[i]);
+
+		if (extrasChanged) return true;
+
+		return false;
+	});
+
+	let hasAttachments = $derived(
+		(editCtx.editedExtras && editCtx.editedExtras.length > 0) ||
+			(editCtx.editedUploadedFiles && editCtx.editedUploadedFiles.length > 0)
+	);
+
+	let canSubmit = $derived(editCtx.editedContent.trim().length > 0 || hasAttachments);
+
+	function handleGlobalKeydown(event: KeyboardEvent) {
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			attemptCancel();
+		}
+	}
+
+	function attemptCancel() {
+		if (hasUnsavedChanges) {
+			showDiscardDialog = true;
+		} else {
+			editCtx.cancel();
+		}
+	}
+
+	function handleSubmit() {
+		if (!canSubmit) return;
+
+		if (isUserMessage && saveWithoutRegenerate && editCtx.showSaveOnlyOption) {
+			editCtx.saveOnly();
+		} else {
+			if (isAssistantMessage && editCtx.setShouldBranchAfterEdit) {
+				editCtx.setShouldBranchAfterEdit(branchAfterEdit);
+			}
+
+			editCtx.save();
+		}
+
+		saveWithoutRegenerate = false;
+		branchAfterEdit = false;
+	}
+
+	function handleAttachmentRemove(index: number) {
+		const newExtras = [...editCtx.editedExtras];
+		newExtras.splice(index, 1);
+		editCtx.setExtras(newExtras);
+	}
+
+	function handleUploadedFileRemove(fileId: string) {
+		const newFiles = editCtx.editedUploadedFiles.filter((f) => f.id !== fileId);
+		editCtx.setUploadedFiles(newFiles);
+	}
+
+	async function handleFilesAdd(files: File[]) {
+		const processed = await processFilesToChatUploaded(files);
+		editCtx.setUploadedFiles([...editCtx.editedUploadedFiles, ...processed]);
+	}
+
+	$effect(() => {
+		chatStore.setEditModeActive(handleFilesAdd);
+
+		return () => {
+			chatStore.clearEditMode();
+		};
+	});
+</script>
+
+<svelte:window onkeydown={handleGlobalKeydown} />
+
+<div class="relative w-full max-w-[80%]">
+	<ChatForm
+		value={editCtx.editedContent}
+		attachments={editCtx.editedExtras}
+		bind:uploadedFiles={editCtx.editedUploadedFiles}
+		placeholder="Edit your message..."
+		showMcpPromptButton
+		showAddButton={editCtx.messageRole === MessageRole.USER}
+		showModelSelector={editCtx.messageRole === MessageRole.USER}
+		onValueChange={editCtx.setContent}
+		onAttachmentRemove={handleAttachmentRemove}
+		onUploadedFileRemove={handleUploadedFileRemove}
+		onFilesAdd={handleFilesAdd}
+		onSubmit={handleSubmit}
+	/>
+</div>
+
+<div class="mt-2 flex w-full max-w-[80%] items-center justify-between">
+	{#if isUserMessage && editCtx.showSaveOnlyOption}
+		<div class="flex items-center gap-2">
+			<Switch id="save-only-switch" bind:checked={saveWithoutRegenerate} class="scale-75" />
+
+			<label for="save-only-switch" class="cursor-pointer text-xs text-muted-foreground">
+				Update without re-sending
+			</label>
+		</div>
+	{:else if isAssistantMessage}
+		<div class="flex items-center gap-2">
+			<Switch id="branch-after-edit" bind:checked={branchAfterEdit} class="scale-75" />
+
+			<label for="branch-after-edit" class="cursor-pointer text-xs text-muted-foreground">
+				Branch conversation after edit
+			</label>
+		</div>
+	{:else}
+		<div></div>
+	{/if}
+
+	<Button class="h-7 px-3 text-xs" onclick={attemptCancel} size="sm" variant="ghost">
+		<X class="mr-1 h-3 w-3" />
+
+		Cancel
+	</Button>
+</div>
+
+<DialogConfirmation
+	bind:open={showDiscardDialog}
+	title="Discard changes?"
+	description="You have unsaved changes. Are you sure you want to discard them?"
+	confirmText="Discard"
+	cancelText="Keep editing"
+	variant="destructive"
+	icon={AlertTriangle}
+	onConfirm={editCtx.cancel}
+	onCancel={() => (showDiscardDialog = false)}
+/>

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

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { Lightbulb } from '@lucide/svelte';
+	import { CollapsibleContentBlock, MarkdownContent } from '$lib/components/app';
+	import { AgenticSectionType } from '$lib/enums';
+	import { REASONING_SCROLL_AT_BOTTOM_THRESHOLD_PX } from '$lib/constants/auto-scroll';
+	import type { DatabaseMessageExtra } from '$lib/types';
+	import type { AgenticSection } from '$lib/utils';
+
+	interface Props {
+		section: AgenticSection;
+		open: boolean;
+		isStreaming: boolean;
+		renderThinkingAsMarkdown: boolean;
+		hasReasoningError?: boolean;
+		attachments?: DatabaseMessageExtra[];
+		onToggle?: () => void;
+	}
+
+	let {
+		section,
+		open,
+		isStreaming,
+		renderThinkingAsMarkdown,
+		hasReasoningError = false,
+		attachments,
+		onToggle
+	}: Props = $props();
+
+	const REASONING_HEADER = 'Reasoning';
+	const REASONING_HEADER_PENDING = 'Reasoning...';
+	const REASONING_SUBTITLE_ERROR = 'Error';
+	const REASONING_SUBTITLE_CANCELLED = 'Cancelled';
+
+	const isPending = $derived(section.type === AgenticSectionType.REASONING_PENDING);
+	const title = $derived(isPending && isStreaming ? REASONING_HEADER_PENDING : REASONING_HEADER);
+	const subtitle = $derived.by(() => {
+		if (isPending && !isStreaming) {
+			return hasReasoningError ? REASONING_SUBTITLE_ERROR : REASONING_SUBTITLE_CANCELLED;
+		}
+		if (section.wasInterrupted) {
+			return hasReasoningError ? REASONING_SUBTITLE_ERROR : REASONING_SUBTITLE_CANCELLED;
+		}
+		return isStreaming ? '' : undefined;
+	});
+	const shimmerTitle = $derived(isPending && isStreaming);
+
+	let scrollEl: HTMLDivElement | undefined = $state();
+
+	const SCROLL_BOTTOM_THRESHOLD_PX = REASONING_SCROLL_AT_BOTTOM_THRESHOLD_PX;
+
+	let userScrolledUp = $state(false);
+	let lastScrollTop = 0;
+	let pendingFrame: number | null = null;
+
+	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(() => {
+		void section.content;
+		if (!scrollEl || !isPending || !isStreaming) return;
+		scrollToBottomOnFrame();
+	});
+
+	$effect(() => {
+		// Layout shifts that don't change section.content (markdown re-parse,
+		// syntax-highlight settle, image loads).
+		if (!scrollEl || !isPending || !isStreaming) return;
+
+		const observer = new MutationObserver(() => scrollToBottomOnFrame());
+		observer.observe(scrollEl, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+
+		return () => observer.disconnect();
+	});
+
+	$effect(() => {
+		// Pin to bottom at the start of each round.
+		if (!isPending) {
+			userScrolledUp = false;
+			lastScrollTop = 0;
+		}
+	});
+</script>
+
+<CollapsibleContentBlock
+	{open}
+	class="my-2"
+	icon={Lightbulb}
+	iconClass="h-3.5 w-3.5"
+	{title}
+	{subtitle}
+	{shimmerTitle}
+	{onToggle}
+>
+	<div
+		bind:this={scrollEl}
+		class="reasoning-content"
+		class:is-streaming={isPending}
+		onscroll={handleScrollEvent}
+	>
+		{#if renderThinkingAsMarkdown}
+			<MarkdownContent content={section.content} class="text-muted-foreground" {attachments} />
+		{:else}
+			<div
+				class="text-[13px] leading-relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
+			>
+				{section.content}
+			</div>
+		{/if}
+	</div>
+</CollapsibleContentBlock>
+
+<style>
+	.reasoning-content.is-streaming {
+		max-height: 28rem;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		scrollbar-gutter: stable;
+		padding-right: 0.25rem;
+	}
+</style>

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

@@ -0,0 +1,293 @@
+<script lang="ts">
+	import { Clock, Gauge, WholeWord, BookOpenText, Sparkles, Wrench, Layers } from '@lucide/svelte';
+	import { ChatMessageStatisticsBadge } from '$lib/components/app';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ChatMessageStatsView, ChatMessageStatisticsMode } from '$lib/enums';
+	import type { ChatMessageAgenticTimings } from '$lib/types/chat';
+	import { formatPerformanceTime } from '$lib/utils';
+	import { MS_PER_SECOND, DEFAULT_PERFORMANCE_TIME } from '$lib/constants';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		predictedTokens?: number;
+		predictedMs?: number;
+		promptTokens?: number;
+		promptMs?: number;
+		isLive?: boolean;
+		isProcessingPrompt?: boolean;
+		initialView?: ChatMessageStatsView;
+		agenticTimings?: ChatMessageAgenticTimings;
+		onActiveViewChange?: (view: ChatMessageStatsView) => void;
+		hideSummary?: boolean;
+		mode?: ChatMessageStatisticsMode;
+	}
+
+	let {
+		predictedTokens,
+		predictedMs,
+		promptTokens,
+		promptMs,
+		isLive = false,
+		isProcessingPrompt = false,
+		initialView = ChatMessageStatsView.GENERATION,
+		agenticTimings,
+		onActiveViewChange,
+		hideSummary = false,
+		mode = ChatMessageStatisticsMode.SWITCHABLE
+	}: Props = $props();
+
+	let isSwitchable = $derived(mode === ChatMessageStatisticsMode.SWITCHABLE);
+
+	let activeView: ChatMessageStatsView = $derived(
+		mode === ChatMessageStatisticsMode.READING
+			? ChatMessageStatsView.READING
+			: mode === ChatMessageStatisticsMode.GENERATION
+				? ChatMessageStatsView.GENERATION
+				: initialView
+	);
+	let hasAutoSwitchedToGeneration = $state(false);
+
+	$effect(() => {
+		if (isSwitchable) {
+			onActiveViewChange?.(activeView);
+		}
+	});
+
+	// In live mode: auto-switch to GENERATION tab when prompt processing completes
+	$effect(() => {
+		if (isLive && isSwitchable) {
+			// Auto-switch to generation tab only when prompt processing is done (once)
+			if (
+				!hasAutoSwitchedToGeneration &&
+				!isProcessingPrompt &&
+				predictedTokens &&
+				predictedTokens > 0
+			) {
+				activeView = ChatMessageStatsView.GENERATION;
+				hasAutoSwitchedToGeneration = true;
+			} else if (!hasAutoSwitchedToGeneration) {
+				// Stay on READING while prompt is still being processed
+				activeView = ChatMessageStatsView.READING;
+			}
+		}
+	});
+
+	let hasGenerationStats = $derived(
+		predictedTokens !== undefined &&
+			predictedTokens > 0 &&
+			predictedMs !== undefined &&
+			predictedMs > 0
+	);
+
+	let tokensPerSecond = $derived(
+		hasGenerationStats ? (predictedTokens! / predictedMs!) * MS_PER_SECOND : 0
+	);
+	let formattedTime = $derived(
+		predictedMs !== undefined ? formatPerformanceTime(predictedMs) : DEFAULT_PERFORMANCE_TIME
+	);
+
+	let promptTokensPerSecond = $derived(
+		promptTokens !== undefined && promptMs !== undefined && promptMs > 0
+			? (promptTokens / promptMs) * MS_PER_SECOND
+			: undefined
+	);
+
+	let formattedPromptTime = $derived(
+		promptMs !== undefined ? formatPerformanceTime(promptMs) : undefined
+	);
+
+	let hasPromptStats = $derived(
+		promptTokens !== undefined &&
+			promptMs !== undefined &&
+			promptTokensPerSecond !== undefined &&
+			formattedPromptTime !== undefined
+	);
+
+	let isGenerationDisabled = $derived(isLive && isSwitchable && !hasGenerationStats);
+
+	let hasAgenticStats = $derived(agenticTimings !== undefined && agenticTimings.toolCallsCount > 0);
+
+	let agenticToolsPerSecond = $derived(
+		hasAgenticStats && agenticTimings!.toolsMs > 0
+			? (agenticTimings!.toolCallsCount / agenticTimings!.toolsMs) * MS_PER_SECOND
+			: 0
+	);
+
+	let formattedAgenticToolsTime = $derived(
+		hasAgenticStats ? formatPerformanceTime(agenticTimings!.toolsMs) : DEFAULT_PERFORMANCE_TIME
+	);
+
+	let agenticTotalTimeMs = $derived(
+		hasAgenticStats
+			? agenticTimings!.toolsMs + agenticTimings!.llm.predicted_ms + agenticTimings!.llm.prompt_ms
+			: 0
+	);
+
+	let formattedAgenticTotalTime = $derived(formatPerformanceTime(agenticTotalTimeMs));
+</script>
+
+{#snippet viewButton(opts: {
+	view: ChatMessageStatsView;
+	icon: Component;
+	label: string;
+	tooltipText: string;
+	disabled?: boolean;
+})}
+	{@const IconComponent = opts.icon}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<!-- prevent another nested button element -->
+			{#snippet child({ props })}
+				<button
+					{...props}
+					type="button"
+					class="inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors {activeView ===
+					opts.view
+						? 'bg-background text-foreground shadow-sm'
+						: opts.disabled
+							? 'cursor-not-allowed opacity-40'
+							: 'hover:text-foreground'}"
+					onclick={() => !opts.disabled && (activeView = opts.view)}
+					disabled={opts.disabled}
+				>
+					<IconComponent class="h-3 w-3" />
+
+					<span class="sr-only">{opts.label}</span>
+				</button>
+			{/snippet}
+		</Tooltip.Trigger>
+
+		<Tooltip.Content>
+			<p>{opts.tooltipText}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{/snippet}
+
+<div class="inline-flex items-center text-xs text-muted-foreground">
+	{#if isSwitchable}
+		<div class="inline-flex items-center rounded-sm bg-muted-foreground/15 p-0.5">
+			{#if hasPromptStats || isLive}
+				{@render viewButton({
+					view: ChatMessageStatsView.READING,
+					icon: BookOpenText,
+					label: 'Reading',
+					tooltipText: 'Processing'
+				})}
+			{/if}
+
+			{@render viewButton({
+				view: ChatMessageStatsView.GENERATION,
+				icon: Sparkles,
+				label: 'Generation',
+				tooltipText: isGenerationDisabled ? 'Waiting for tokens...' : 'Generation',
+				disabled: isGenerationDisabled
+			})}
+
+			{#if hasAgenticStats}
+				{@render viewButton({
+					view: ChatMessageStatsView.TOOLS,
+					icon: Wrench,
+					label: 'Tools',
+					tooltipText: 'Tool calls'
+				})}
+
+				{#if !hideSummary}
+					{@render viewButton({
+						view: ChatMessageStatsView.SUMMARY,
+						icon: Layers,
+						label: 'Summary',
+						tooltipText: 'Agentic summary'
+					})}
+				{/if}
+			{/if}
+		</div>
+	{/if}
+
+	<div class="flex items-center gap-1 px-2">
+		{#if activeView === ChatMessageStatsView.GENERATION && hasGenerationStats}
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={WholeWord}
+				value="{predictedTokens?.toLocaleString()} tokens"
+				tooltipLabel="Generated tokens"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedTime}
+				tooltipLabel="Generation time"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Gauge}
+				value="{tokensPerSecond.toFixed(2)} t/s"
+				tooltipLabel="Generation speed"
+			/>
+		{:else if activeView === ChatMessageStatsView.TOOLS && hasAgenticStats}
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Wrench}
+				value="{agenticTimings!.toolCallsCount} calls"
+				tooltipLabel="Tool calls executed"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedAgenticToolsTime}
+				tooltipLabel="Tool execution time"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Gauge}
+				value="{agenticToolsPerSecond.toFixed(2)} calls/s"
+				tooltipLabel="Tool execution rate"
+			/>
+		{:else if activeView === ChatMessageStatsView.SUMMARY && hasAgenticStats}
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Layers}
+				value="{agenticTimings!.turns} turns"
+				tooltipLabel="Agentic turns (LLM calls)"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={WholeWord}
+				value="{agenticTimings!.llm.predicted_n.toLocaleString()} tokens"
+				tooltipLabel="Total tokens generated"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedAgenticTotalTime}
+				tooltipLabel="Total time (LLM + tools)"
+			/>
+		{:else if hasPromptStats && (mode === ChatMessageStatisticsMode.READING || isSwitchable)}
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={WholeWord}
+				value="{promptTokens} tokens"
+				tooltipLabel="Prompt tokens"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedPromptTime ?? '0s'}
+				tooltipLabel="Prompt processing time"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Gauge}
+				value="{promptTokensPerSecond!.toFixed(2)} tokens/s"
+				tooltipLabel="Prompt processing speed"
+			/>
+		{/if}
+	</div>
+</div>

tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatisticsBadge.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { BadgeInfo } from '$lib/components/app';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { copyToClipboard } from '$lib/utils';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		class?: string;
+		icon: Component;
+		value: string | number;
+		tooltipLabel?: string;
+	}
+
+	let { class: className = '', icon: IconComponent, value, tooltipLabel }: Props = $props();
+
+	function handleClick() {
+		void copyToClipboard(String(value));
+	}
+</script>
+
+{#if tooltipLabel}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<!-- prevent another nested button element -->
+			{#snippet child({ props })}
+				<BadgeInfo {...props} class={className} onclick={handleClick}>
+					{#snippet icon()}
+						<IconComponent class="h-3 w-3" />
+					{/snippet}
+
+					{value}
+				</BadgeInfo>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>{tooltipLabel}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	<BadgeInfo class={className} onclick={handleClick}>
+		{#snippet icon()}
+			<IconComponent class="h-3 w-3" />
+		{/snippet}
+
+		{value}
+	</BadgeInfo>
+{/if}

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

@@ -0,0 +1,279 @@
+<script lang="ts">
+	import { ChatMessage, ChatMessageUserPending } from '$lib/components/app';
+	import { setChatActionsContext } from '$lib/contexts';
+	import { MessageRole } from '$lib/enums';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import {
+		chatPendingMessageContent,
+		chatPendingMessageExtras,
+		chatClearPendingMessage,
+		chatInjectPendingMessage
+	} from '$lib/stores/chat.svelte';
+	import { conversationsStore, activeConversation } from '$lib/stores/conversations.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import {
+		agenticPendingSteeringMessageContent,
+		agenticPendingSteeringMessageExtras,
+		agenticClearSteeringMessage,
+		agenticInjectSteeringMessage
+	} from '$lib/stores/agentic.svelte';
+	import {
+		buildSiblingInfoMap,
+		copyToClipboard,
+		formatMessageForClipboard,
+		hasAgenticContent
+	} from '$lib/utils';
+
+	interface Props {
+		messages?: DatabaseMessage[];
+		onUserAction?: () => void;
+		onMessagesReady?: (messageCount: number) => void;
+	}
+
+	let { messages = [], onUserAction, onMessagesReady }: Props = $props();
+
+	let allConversationMessages = $state<DatabaseMessage[]>([]);
+
+	const currentConfig = config();
+
+	setChatActionsContext({
+		copy: async (message: DatabaseMessage) => {
+			const asPlainText = Boolean(currentConfig.copyTextAttachmentsAsPlainText);
+			const clipboardContent = formatMessageForClipboard(
+				message.content,
+				message.extra,
+				asPlainText
+			);
+			await copyToClipboard(clipboardContent, 'Message copied to clipboard');
+		},
+
+		delete: async (message: DatabaseMessage) => {
+			await chatStore.deleteMessage(message.id);
+			refreshAllMessages();
+		},
+
+		navigateToSibling: async (siblingId: string) => {
+			await conversationsStore.navigateToSibling(siblingId);
+		},
+
+		editWithBranching: async (
+			message: DatabaseMessage,
+			newContent: string,
+			newExtras?: DatabaseMessageExtra[]
+		) => {
+			onUserAction?.();
+			await chatStore.editMessageWithBranching(message.id, newContent, newExtras);
+			refreshAllMessages();
+		},
+
+		editWithReplacement: async (
+			message: DatabaseMessage,
+			newContent: string,
+			shouldBranch: boolean
+		) => {
+			onUserAction?.();
+			await chatStore.editAssistantMessage(message.id, newContent, shouldBranch);
+			refreshAllMessages();
+		},
+
+		editUserMessagePreserveResponses: async (
+			message: DatabaseMessage,
+			newContent: string,
+			newExtras?: DatabaseMessageExtra[]
+		) => {
+			onUserAction?.();
+			await chatStore.editUserMessagePreserveResponses(message.id, newContent, newExtras);
+			refreshAllMessages();
+		},
+
+		regenerateWithBranching: async (message: DatabaseMessage, modelOverride?: string) => {
+			onUserAction?.();
+			await chatStore.regenerateMessageWithBranching(message.id, modelOverride);
+			refreshAllMessages();
+		},
+
+		continueAssistantMessage: async (message: DatabaseMessage) => {
+			onUserAction?.();
+			await chatStore.continueAssistantMessage(message.id);
+			refreshAllMessages();
+		},
+
+		forkConversation: async (
+			message: DatabaseMessage,
+			options: { name: string; includeAttachments: boolean }
+		) => {
+			await conversationsStore.forkConversation(message.id, options);
+		}
+	});
+
+	function refreshAllMessages() {
+		const conversation = activeConversation();
+
+		if (conversation) {
+			conversationsStore.getConversationMessages(conversation.id).then((messages) => {
+				allConversationMessages = messages;
+			});
+		} else {
+			allConversationMessages = [];
+		}
+	}
+
+	// Refresh messages whenever the active conversation changes
+	$effect(() => {
+		if (activeConversation()) {
+			refreshAllMessages();
+		}
+	});
+
+	$effect(() => {
+		void allConversationMessages;
+
+		onMessagesReady?.(displayMessages.length);
+	});
+
+	let siblingInfoByMessageId = $derived(buildSiblingInfoMap(allConversationMessages));
+
+	let displayMessages = $derived.by(() => {
+		if (!messages.length) {
+			return [];
+		}
+
+		const filteredMessages = currentConfig.showSystemMessage
+			? messages
+			: messages.filter((msg) => msg.type !== MessageRole.SYSTEM);
+
+		// Build display entries, grouping agentic sessions into single entries.
+		// An agentic session = assistant(with tool_calls) → tool → assistant → tool → ... → assistant(final)
+		const result: Array<{
+			message: DatabaseMessage;
+			toolMessages: DatabaseMessage[];
+			isLastAssistantMessage: boolean;
+			isLastUserMessage: boolean;
+			nextAssistantMessage: DatabaseMessage | null;
+			siblingInfo: ChatMessageSiblingInfo;
+		}> = [];
+
+		for (let i = 0; i < filteredMessages.length; i++) {
+			const msg = filteredMessages[i];
+
+			// Skip tool messages - they're grouped with preceding assistant
+			if (msg.role === MessageRole.TOOL) continue;
+
+			const toolMessages: DatabaseMessage[] = [];
+			if (msg.role === MessageRole.ASSISTANT && hasAgenticContent(msg)) {
+				let j = i + 1;
+
+				while (j < filteredMessages.length) {
+					const next = filteredMessages[j];
+
+					if (next.role === MessageRole.TOOL) {
+						toolMessages.push(next);
+
+						j++;
+					} else if (next.role === MessageRole.ASSISTANT) {
+						toolMessages.push(next);
+
+						j++;
+					} else {
+						break;
+					}
+				}
+
+				i = j - 1;
+			} else if (msg.role === MessageRole.ASSISTANT) {
+				let j = i + 1;
+
+				while (j < filteredMessages.length && filteredMessages[j].role === MessageRole.TOOL) {
+					toolMessages.push(filteredMessages[j]);
+					j++;
+				}
+			}
+
+			const siblingInfo = siblingInfoByMessageId.get(msg.id) ?? {
+				message: msg,
+				siblingIds: [msg.id],
+				currentIndex: 0,
+				totalSiblings: 1
+			};
+
+			result.push({
+				message: msg,
+				toolMessages,
+				isLastAssistantMessage: false,
+				isLastUserMessage: false,
+				nextAssistantMessage: null,
+				siblingInfo
+			});
+		}
+
+		let lastAssistantIdx = -1;
+		for (let i = result.length - 1; i >= 0; i--) {
+			if (result[i].message.role === MessageRole.ASSISTANT) {
+				result[i].isLastAssistantMessage = true;
+				lastAssistantIdx = i;
+				break;
+			}
+		}
+
+		if (lastAssistantIdx > 0 && result[lastAssistantIdx - 1].message.role === MessageRole.USER) {
+			result[lastAssistantIdx - 1].isLastUserMessage = true;
+		}
+
+		for (let i = 0; i < result.length; i++) {
+			if (result[i].message.role !== MessageRole.USER) continue;
+
+			for (let j = i + 1; j < result.length; j++) {
+				if (result[j].message.role === MessageRole.ASSISTANT) {
+					result[i].nextAssistantMessage = result[j].message;
+					break;
+				}
+			}
+		}
+
+		return result;
+	});
+</script>
+
+<div>
+	{#each displayMessages as { message, toolMessages, isLastAssistantMessage, isLastUserMessage, nextAssistantMessage, siblingInfo } (message.id)}
+		<ChatMessage
+			class="mx-auto mt-12 w-full max-w-3xl"
+			{message}
+			{toolMessages}
+			{isLastAssistantMessage}
+			{isLastUserMessage}
+			{nextAssistantMessage}
+			{siblingInfo}
+		/>
+	{/each}
+
+	{#if activeConversation() && agenticPendingSteeringMessageContent(activeConversation()!.id)}
+		{@const convId = activeConversation()!.id}
+		{@const pendingContent = agenticPendingSteeringMessageContent(convId)}
+
+		{#if pendingContent}
+			<ChatMessageUserPending
+				class="mx-auto mt-12 w-full max-w-[48rem]"
+				content={pendingContent}
+				extras={agenticPendingSteeringMessageExtras(convId)}
+				onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
+				onEdit={(newContent, extras) => agenticInjectSteeringMessage(convId, newContent, extras)}
+				onDelete={() => agenticClearSteeringMessage(convId)}
+			/>
+		{/if}
+	{:else if activeConversation() && chatPendingMessageContent(activeConversation()!.id)}
+		{@const convId = activeConversation()!.id}
+		{@const pendingContent = chatPendingMessageContent(convId)}
+
+		{#if pendingContent}
+			<ChatMessageUserPending
+				class="mx-auto mt-12 w-full max-w-[48rem]"
+				content={pendingContent}
+				extras={chatPendingMessageExtras(convId)}
+				onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
+				onEdit={(newContent, extras) => chatInjectPendingMessage(convId, newContent, extras)}
+				onDelete={() => chatClearPendingMessage(convId)}
+			/>
+		{/if}
+	{/if}
+</div>