SvelteKit-based WebUI (#14839)

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { formatFileSize, getFileTypeLabel, getPreviewText } from '$lib/utils/file-preview';
+	import { FileTypeCategory, MimeTypeText } from '$lib/enums/files';
+
+	interface Props {
+		class?: string;
+		id: string;
+		onClick?: (event?: MouseEvent) => void;
+		onRemove?: (id: string) => void;
+		name: string;
+		readonly?: boolean;
+		size?: number;
+		textContent?: string;
+		type: string;
+	}
+
+	let {
+		class: className = '',
+		id,
+		onClick,
+		onRemove,
+		name,
+		readonly = false,
+		size,
+		textContent,
+		type
+	}: Props = $props();
+</script>
+
+{#if type === MimeTypeText.PLAIN || type === FileTypeCategory.TEXT}
+	{#if readonly}
+		<!-- Readonly mode (ChatMessage) -->
+		<button
+			class="cursor-pointer rounded-lg border border-border bg-muted p-3 transition-shadow hover:shadow-md {className} w-full max-w-2xl"
+			onclick={onClick}
+			aria-label={`Preview ${name}`}
+			type="button"
+		>
+			<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>
+
+					{#if size}
+						<span class="text-xs text-muted-foreground">{formatFileSize(size)}</span>
+					{/if}
+
+					{#if textContent && type === 'text'}
+						<div class="relative mt-2 w-full">
+							<div
+								class="overflow-hidden font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-muted-foreground"
+							>
+								{getPreviewText(textContent)}
+							</div>
+
+							{#if textContent.length > 150}
+								<div
+									class="pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-muted to-transparent"
+								></div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</div>
+		</button>
+	{:else}
+		<!-- Non-readonly mode (ChatForm) -->
+		<div class="relative rounded-lg border border-border bg-muted p-3 {className} w-64">
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				class="absolute top-2 right-2 h-6 w-6 bg-white/20 p-0 hover:bg-white/30"
+				onclick={() => onRemove?.(id)}
+				aria-label="Remove file"
+			>
+				<X class="h-3 w-3" />
+			</Button>
+
+			<div class="pr-8">
+				<span class="mb-3 block truncate text-sm font-medium text-foreground">{name}</span>
+
+				{#if textContent}
+					<div class="relative">
+						<div
+							class="overflow-hidden font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-muted-foreground"
+							style="max-height: 3.6em; line-height: 1.2em;"
+						>
+							{getPreviewText(textContent)}
+						</div>
+
+						{#if textContent.length > 150}
+							<div
+								class="pointer-events-none absolute right-0 bottom-0 left-0 h-4 bg-gradient-to-t from-muted to-transparent"
+							></div>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+{:else}
+	<button
+		class="flex items-center gap-2 gap-3 rounded-lg border border-border bg-muted p-3 {className}"
+		onclick={onClick}
+	>
+		<div
+			class="flex h-8 w-8 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary"
+		>
+			{getFileTypeLabel(type)}
+		</div>
+
+		<div class="flex flex-col gap-1">
+			<span class="max-w-36 truncate text-sm font-medium text-foreground md:max-w-72">
+				{name}
+			</span>
+
+			{#if size}
+				<span class="text-left text-xs text-muted-foreground">{formatFileSize(size)}</span>
+			{/if}
+		</div>
+
+		{#if !readonly}
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				class="h-6 w-6 p-0"
+				onclick={(e) => {
+					e.stopPropagation();
+					onRemove?.(id);
+				}}
+			>
+				<X class="h-3 w-3" />
+			</Button>
+		{/if}
+	</button>
+{/if}

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentImagePreview.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		id: string;
+		name: string;
+		preview: string;
+		readonly?: boolean;
+		onRemove?: (id: string) => void;
+		onClick?: (event?: MouseEvent) => void;
+		class?: string;
+		// Customizable size props
+		width?: string;
+		height?: string;
+		imageClass?: string;
+	}
+
+	let {
+		id,
+		name,
+		preview,
+		readonly = false,
+		onRemove,
+		onClick,
+		class: className = '',
+		// Default to small size for form previews
+		width = 'w-auto',
+		height = 'h-24',
+		imageClass = ''
+	}: Props = $props();
+</script>
+
+<div class="relative overflow-hidden rounded-lg border border-border bg-muted {className}">
+	{#if onClick}
+		<button
+			type="button"
+			class="block h-full w-full rounded-lg focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
+			onclick={onClick}
+			aria-label="Preview {name}"
+		>
+			<img
+				src={preview}
+				alt={name}
+				class="{height} {width} cursor-pointer object-cover {imageClass}"
+			/>
+		</button>
+	{:else}
+		<img
+			src={preview}
+			alt={name}
+			class="{height} {width} cursor-pointer object-cover {imageClass}"
+		/>
+	{/if}
+
+	{#if !readonly}
+		<div
+			class="absolute top-1 right-1 flex items-center justify-center opacity-0 transition-opacity hover:opacity-100"
+		>
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				class="h-6 w-6 bg-white/20 p-0 text-white hover:bg-white/30"
+				onclick={() => onRemove?.(id)}
+			>
+				<X class="h-3 w-3" />
+			</Button>
+		</div>
+	{/if}
+</div>

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreviewDialog.svelte

@@ -0,0 +1,305 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { FileText, Image, Music, FileIcon, Eye } from '@lucide/svelte';
+	import { FileTypeCategory, MimeTypeApplication } from '$lib/enums/files';
+	import { convertPDFToImage } from '$lib/utils/pdf-processing';
+	import { Button } from '$lib/components/ui/button';
+	import { getFileTypeCategory } from '$lib/utils/file-type';
+	import { formatFileSize } from '$lib/utils/file-preview';
+
+	interface Props {
+		open: boolean;
+		// Either an uploaded file or a stored attachment
+		uploadedFile?: ChatUploadedFile;
+		attachment?: DatabaseMessageExtra;
+		// For uploaded files
+		preview?: string;
+		name?: string;
+		type?: string;
+		size?: number;
+		textContent?: string;
+	}
+
+	let {
+		open = $bindable(),
+		uploadedFile,
+		attachment,
+		preview,
+		name,
+		type,
+		size,
+		textContent
+	}: Props = $props();
+
+	let displayName = $derived(uploadedFile?.name || attachment?.name || name || 'Unknown File');
+
+	let displayPreview = $derived(
+		uploadedFile?.preview || (attachment?.type === 'imageFile' ? attachment.base64Url : preview)
+	);
+
+	let displayType = $derived(
+		uploadedFile?.type ||
+			(attachment?.type === 'imageFile'
+				? 'image'
+				: attachment?.type === 'textFile'
+					? 'text'
+					: attachment?.type === 'audioFile'
+						? attachment.mimeType || 'audio'
+						: attachment?.type === 'pdfFile'
+							? MimeTypeApplication.PDF
+							: type || 'unknown')
+	);
+
+	let displaySize = $derived(uploadedFile?.size || size);
+
+	let displayTextContent = $derived(
+		uploadedFile?.textContent ||
+			(attachment?.type === 'textFile'
+				? attachment.content
+				: attachment?.type === 'pdfFile'
+					? attachment.content
+					: textContent)
+	);
+
+	let isAudio = $derived(
+		getFileTypeCategory(displayType) === FileTypeCategory.AUDIO || displayType === 'audio'
+	);
+
+	let isImage = $derived(
+		getFileTypeCategory(displayType) === FileTypeCategory.IMAGE || displayType === 'image'
+	);
+
+	let isPdf = $derived(displayType === MimeTypeApplication.PDF);
+
+	let isText = $derived(
+		getFileTypeCategory(displayType) === FileTypeCategory.TEXT || displayType === 'text'
+	);
+
+	let IconComponent = $derived(() => {
+		if (isImage) return Image;
+		if (isText || isPdf) return FileText;
+		if (isAudio) return Music;
+
+		return FileIcon;
+	});
+
+	let pdfViewMode = $state<'text' | 'pages'>('pages');
+
+	let pdfImages = $state<string[]>([]);
+
+	let pdfImagesLoading = $state(false);
+
+	let pdfImagesError = $state<string | null>(null);
+
+	async function loadPdfImages() {
+		if (!isPdf || pdfImages.length > 0 || pdfImagesLoading) return;
+
+		pdfImagesLoading = true;
+		pdfImagesError = null;
+
+		try {
+			let file: File | null = null;
+
+			if (uploadedFile?.file) {
+				file = uploadedFile.file;
+			} else if (attachment?.type === 'pdfFile') {
+				// Check if we have pre-processed images
+				if (attachment.images && Array.isArray(attachment.images)) {
+					pdfImages = attachment.images;
+					return;
+				}
+
+				// Convert base64 back to File for processing
+				if (attachment.base64Data) {
+					const base64Data = 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: MimeTypeApplication.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 (open && isPdf && pdfViewMode === 'pages') {
+			loadPdfImages();
+		}
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content class="grid max-h-[90vh] max-w-5xl overflow-hidden !p-10 sm:w-auto sm:max-w-6xl">
+		<Dialog.Header class="flex-shrink-0">
+			<div class="flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					{#if IconComponent}
+						<IconComponent class="h-5 w-5 text-muted-foreground" />
+					{/if}
+
+					<div>
+						<Dialog.Title class="text-left">{displayName}</Dialog.Title>
+
+						<div class="flex items-center gap-2 text-sm text-muted-foreground">
+							<span>{displayType}</span>
+
+							{#if displaySize}
+								<span>•</span>
+
+								<span>{formatFileSize(displaySize)}</span>
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				{#if isPdf}
+					<div class="flex items-center gap-2">
+						<Button
+							variant={pdfViewMode === 'text' ? 'default' : 'outline'}
+							size="sm"
+							onclick={() => (pdfViewMode = 'text')}
+							disabled={pdfImagesLoading}
+						>
+							<FileText class="mr-1 h-4 w-4" />
+
+							Text
+						</Button>
+
+						<Button
+							variant={pdfViewMode === 'pages' ? 'default' : 'outline'}
+							size="sm"
+							onclick={() => {
+								pdfViewMode = 'pages';
+								loadPdfImages();
+							}}
+							disabled={pdfImagesLoading}
+						>
+							{#if pdfImagesLoading}
+								<div
+									class="mr-1 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+								></div>
+							{:else}
+								<Eye class="mr-1 h-4 w-4" />
+							{/if}
+
+							Pages
+						</Button>
+					</div>
+				{/if}
+			</div>
+		</Dialog.Header>
+
+		<div class="flex-1 overflow-auto">
+			{#if isImage && displayPreview}
+				<div class="flex items-center justify-center">
+					<img
+						src={displayPreview}
+						alt={displayName}
+						class="max-h-full rounded-lg object-contain shadow-lg"
+					/>
+				</div>
+			{:else if isPdf && pdfViewMode === 'pages'}
+				{#if pdfImagesLoading}
+					<div class="flex 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-primary border-t-transparent"
+							></div>
+
+							<p class="text-muted-foreground">Converting PDF to images...</p>
+						</div>
+					</div>
+				{:else if pdfImagesError}
+					<div class="flex items-center justify-center p-8">
+						<div class="text-center">
+							<FileText class="mx-auto mb-4 h-16 w-16 text-muted-foreground" />
+
+							<p class="mb-4 text-muted-foreground">Failed to load PDF images</p>
+
+							<p class="text-sm text-muted-foreground">{pdfImagesError}</p>
+
+							<Button class="mt-4" onclick={() => (pdfViewMode = 'text')}>View as Text</Button>
+						</div>
+					</div>
+				{:else if pdfImages.length > 0}
+					<div class="max-h-[70vh] space-y-4 overflow-auto">
+						{#each pdfImages as image, index (image)}
+							<div class="text-center">
+								<p class="mb-2 text-sm text-muted-foreground">Page {index + 1}</p>
+
+								<img
+									src={image}
+									alt="PDF Page {index + 1}"
+									class="mx-auto max-w-full rounded-lg shadow-lg"
+								/>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<div class="flex items-center justify-center p-8">
+						<div class="text-center">
+							<FileText class="mx-auto mb-4 h-16 w-16 text-muted-foreground" />
+
+							<p class="mb-4 text-muted-foreground">No PDF pages available</p>
+						</div>
+					</div>
+				{/if}
+			{:else if (isText || (isPdf && pdfViewMode === 'text')) && displayTextContent}
+				<div
+					class="max-h-[60vh] overflow-auto rounded-lg bg-muted p-4 font-mono text-sm break-words whitespace-pre-wrap"
+				>
+					{displayTextContent}
+				</div>
+			{:else if isAudio}
+				<div class="flex 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-muted-foreground" />
+
+						{#if attachment?.type === 'audioFile'}
+							<audio
+								controls
+								class="mb-4 w-full"
+								src="data:{attachment.mimeType};base64,{attachment.base64Data}"
+							>
+								Your browser does not support the audio element.
+							</audio>
+						{:else if uploadedFile?.preview}
+							<audio controls class="mb-4 w-full" src={uploadedFile.preview}>
+								Your browser does not support the audio element.
+							</audio>
+						{:else}
+							<p class="mb-4 text-muted-foreground">Audio preview not available</p>
+						{/if}
+
+						<p class="text-sm text-muted-foreground">
+							{displayName}
+						</p>
+					</div>
+				</div>
+			{:else}
+				<div class="flex items-center justify-center p-8">
+					<div class="text-center">
+						{#if IconComponent}
+							<IconComponent class="mx-auto mb-4 h-16 w-16 text-muted-foreground" />
+						{/if}
+
+						<p class="mb-4 text-muted-foreground">Preview not available for this file type</p>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { ChatAttachmentImagePreview, ChatAttachmentFilePreview } from '$lib/components/app';
+	import { FileTypeCategory } from '$lib/enums/files';
+	import { getFileTypeCategory } from '$lib/utils/file-type';
+	import ChatAttachmentPreviewDialog from './ChatAttachmentPreviewDialog.svelte';
+
+	interface Props {
+		class?: 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;
+	}
+
+	let {
+		class: className = '',
+		attachments = [],
+		readonly = false,
+		onFileRemove,
+		uploadedFiles = $bindable([]),
+		// Default to small size for form previews
+		imageClass = '',
+		imageHeight = 'h-24',
+		imageWidth = 'w-auto'
+	}: Props = $props();
+
+	let displayItems = $derived(getDisplayItems());
+
+	// Preview dialog state
+	let previewDialogOpen = $state(false);
+	let previewItem = $state<{
+		uploadedFile?: ChatUploadedFile;
+		attachment?: DatabaseMessageExtra;
+		preview?: string;
+		name?: string;
+		type?: string;
+		size?: number;
+		textContent?: string;
+	} | null>(null);
+
+	function getDisplayItems() {
+		const items: Array<{
+			id: string;
+			name: string;
+			size?: number;
+			preview?: string;
+			type: string;
+			isImage: boolean;
+			uploadedFile?: ChatUploadedFile;
+			attachment?: DatabaseMessageExtra;
+			attachmentIndex?: number;
+			textContent?: string;
+		}> = [];
+
+		// Add uploaded files (ChatForm)
+		for (const file of uploadedFiles) {
+			items.push({
+				id: file.id,
+				name: file.name,
+				size: file.size,
+				preview: file.preview,
+				type: file.type,
+				isImage: getFileTypeCategory(file.type) === FileTypeCategory.IMAGE,
+				uploadedFile: file,
+				textContent: file.textContent
+			});
+		}
+
+		// Add stored attachments (ChatMessage)
+		for (const [index, attachment] of attachments.entries()) {
+			if (attachment.type === 'imageFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					preview: attachment.base64Url,
+					type: 'image',
+					isImage: true,
+					attachment,
+					attachmentIndex: index
+				});
+			} else if (attachment.type === 'textFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					type: 'text',
+					isImage: false,
+					attachment,
+					attachmentIndex: index,
+					textContent: attachment.content
+				});
+			} else if (attachment.type === 'audioFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					type: attachment.mimeType || 'audio',
+					isImage: false,
+					attachment,
+					attachmentIndex: index
+				});
+			} else if (attachment.type === 'pdfFile') {
+				items.push({
+					id: `attachment-${index}`,
+					name: attachment.name,
+					type: 'application/pdf',
+					isImage: false,
+					attachment,
+					attachmentIndex: index,
+					textContent: attachment.content
+				});
+			}
+		}
+
+		return items;
+	}
+
+	function openPreview(item: (typeof displayItems)[0], event?: Event) {
+		if (event) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+
+		previewItem = {
+			uploadedFile: item.uploadedFile,
+			attachment: item.attachment,
+			preview: item.preview,
+			name: item.name,
+			type: item.type,
+			size: item.size,
+			textContent: item.textContent
+		};
+		previewDialogOpen = true;
+	}
+</script>
+
+{#if displayItems.length > 0}
+	<div class="flex flex-wrap items-start {readonly ? 'justify-end' : ''} gap-3 {className}">
+		{#each displayItems as item (item.id)}
+			{#if item.isImage && item.preview}
+				<ChatAttachmentImagePreview
+					class="cursor-pointer"
+					id={item.id}
+					name={item.name}
+					preview={item.preview}
+					{readonly}
+					onRemove={onFileRemove}
+					height={imageHeight}
+					width={imageWidth}
+					{imageClass}
+					onClick={(event) => openPreview(item, event)}
+				/>
+			{:else}
+				<ChatAttachmentFilePreview
+					class="cursor-pointer"
+					id={item.id}
+					name={item.name}
+					type={item.type}
+					size={item.size}
+					{readonly}
+					onRemove={onFileRemove}
+					textContent={item.textContent}
+					onClick={(event) => openPreview(item, event)}
+				/>
+			{/if}
+		{/each}
+	</div>
+{/if}
+
+{#if previewItem}
+	<ChatAttachmentPreviewDialog
+		bind:open={previewDialogOpen}
+		uploadedFile={previewItem.uploadedFile}
+		attachment={previewItem.attachment}
+		preview={previewItem.preview}
+		name={previewItem.name}
+		type={previewItem.type}
+		size={previewItem.size}
+		textContent={previewItem.textContent}
+	/>
+{/if}

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import {
+		ChatAttachmentsList,
+		ChatFormActions,
+		ChatFormFileInputInvisible,
+		ChatFormHelperText,
+		ChatFormTextarea
+	} from '$lib/components/app';
+	import { INPUT_CLASSES } from '$lib/constants/input-classes';
+	import { config } from '$lib/stores/settings.svelte';
+	import { FileTypeCategory, MimeTypeApplication } from '$lib/enums/files';
+	import {
+		AudioRecorder,
+		convertToWav,
+		createAudioFile,
+		isAudioRecordingSupported
+	} from '$lib/utils/audio-recording';
+	import { onMount } from 'svelte';
+	import {
+		FileExtensionAudio,
+		FileExtensionImage,
+		FileExtensionPdf,
+		FileExtensionText,
+		MimeTypeAudio,
+		MimeTypeImage,
+		MimeTypeText
+	} from '$lib/enums/files';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		onFileRemove?: (fileId: string) => void;
+		onFileUpload?: (files: File[]) => void;
+		onSend?: (message: string, files?: ChatUploadedFile[]) => Promise<boolean>;
+		onStop?: () => void;
+		showHelperText?: boolean;
+		uploadedFiles?: ChatUploadedFile[];
+	}
+
+	let {
+		class: className,
+		disabled = false,
+		isLoading = false,
+		onFileRemove,
+		onFileUpload,
+		onSend,
+		onStop,
+		showHelperText = true,
+		uploadedFiles = $bindable([])
+	}: Props = $props();
+
+	let audioRecorder: AudioRecorder | undefined;
+	let currentConfig = $derived(config());
+	let fileAcceptString = $state<string | undefined>(undefined);
+	let fileInputRef: ChatFormFileInputInvisible | undefined = $state(undefined);
+	let isRecording = $state(false);
+	let message = $state('');
+	let pasteLongTextToFileLength = $derived(Number(currentConfig.pasteLongTextToFileLen) || 2500);
+	let previousIsLoading = $state(isLoading);
+	let recordingSupported = $state(false);
+	let textareaRef: ChatFormTextarea | undefined = $state(undefined);
+
+	function getAcceptStringForFileType(fileType: FileTypeCategory): string {
+		switch (fileType) {
+			case FileTypeCategory.IMAGE:
+				return [...Object.values(FileExtensionImage), ...Object.values(MimeTypeImage)].join(',');
+			case FileTypeCategory.AUDIO:
+				return [...Object.values(FileExtensionAudio), ...Object.values(MimeTypeAudio)].join(',');
+			case FileTypeCategory.PDF:
+				return [...Object.values(FileExtensionPdf), ...Object.values(MimeTypeApplication)].join(
+					','
+				);
+			case FileTypeCategory.TEXT:
+				return [...Object.values(FileExtensionText), MimeTypeText.PLAIN].join(',');
+			default:
+				return '';
+		}
+	}
+
+	function handleFileSelect(files: File[]) {
+		onFileUpload?.(files);
+	}
+
+	function handleFileUpload(fileType?: FileTypeCategory) {
+		if (fileType) {
+			fileAcceptString = getAcceptStringForFileType(fileType);
+		} else {
+			fileAcceptString = undefined;
+		}
+
+		// Use setTimeout to ensure the accept attribute is applied before opening dialog
+		setTimeout(() => {
+			fileInputRef?.click();
+		}, 10);
+	}
+
+	async function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+
+			if ((!message.trim() && uploadedFiles.length === 0) || disabled || isLoading) return;
+
+			const messageToSend = message.trim();
+			const filesToSend = [...uploadedFiles];
+
+			message = '';
+			uploadedFiles = [];
+
+			textareaRef?.resetHeight();
+
+			const success = await onSend?.(messageToSend, filesToSend);
+
+			if (!success) {
+				message = messageToSend;
+				uploadedFiles = filesToSend;
+			}
+		}
+	}
+
+	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();
+			onFileUpload?.(files);
+			return;
+		}
+
+		const text = event.clipboardData.getData(MimeTypeText.PLAIN);
+
+		if (
+			text.length > 0 &&
+			pasteLongTextToFileLength > 0 &&
+			text.length > pasteLongTextToFileLength
+		) {
+			event.preventDefault();
+
+			const textFile = new File([text], 'Pasted', {
+				type: MimeTypeText.PLAIN
+			});
+
+			onFileUpload?.([textFile]);
+		}
+	}
+
+	async function handleMicClick() {
+		if (!audioRecorder || !recordingSupported) {
+			console.warn('Audio recording not supported');
+			return;
+		}
+
+		if (isRecording) {
+			try {
+				const audioBlob = await audioRecorder.stopRecording();
+				const wavBlob = await convertToWav(audioBlob);
+				const audioFile = createAudioFile(wavBlob);
+
+				onFileUpload?.([audioFile]);
+				isRecording = false;
+			} catch (error) {
+				console.error('Failed to stop recording:', error);
+				isRecording = false;
+			}
+		} else {
+			try {
+				await audioRecorder.startRecording();
+				isRecording = true;
+			} catch (error) {
+				console.error('Failed to start recording:', error);
+			}
+		}
+	}
+
+	function handleStop() {
+		onStop?.();
+	}
+
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		if ((!message.trim() && uploadedFiles.length === 0) || disabled || isLoading) return;
+
+		const messageToSend = message.trim();
+		const filesToSend = [...uploadedFiles];
+
+		message = '';
+		uploadedFiles = [];
+
+		textareaRef?.resetHeight();
+
+		const success = await onSend?.(messageToSend, filesToSend);
+
+		if (!success) {
+			message = messageToSend;
+			uploadedFiles = filesToSend;
+		}
+	}
+
+	onMount(() => {
+		setTimeout(() => textareaRef?.focus(), 10);
+		recordingSupported = isAudioRecordingSupported();
+		audioRecorder = new AudioRecorder();
+	});
+
+	afterNavigate(() => {
+		setTimeout(() => textareaRef?.focus(), 10);
+	});
+
+	$effect(() => {
+		if (previousIsLoading && !isLoading) {
+			setTimeout(() => textareaRef?.focus(), 10);
+		}
+
+		previousIsLoading = isLoading;
+	});
+</script>
+
+<ChatFormFileInputInvisible
+	bind:this={fileInputRef}
+	bind:accept={fileAcceptString}
+	onFileSelect={handleFileSelect}
+/>
+
+<form
+	onsubmit={handleSubmit}
+	class="{INPUT_CLASSES} border-radius-bottom-none mx-auto max-w-[48rem] overflow-hidden rounded-3xl backdrop-blur-md {className}"
+>
+	<ChatAttachmentsList bind:uploadedFiles {onFileRemove} class="mb-3 px-5 pt-5" />
+
+	<div
+		class="flex-column relative min-h-[48px] items-center rounded-3xl px-5 py-3 shadow-sm transition-all focus-within:shadow-md"
+		onpaste={handlePaste}
+	>
+		<ChatFormTextarea
+			bind:this={textareaRef}
+			bind:value={message}
+			onKeydown={handleKeydown}
+			{disabled}
+		/>
+
+		<ChatFormActions
+			canSend={message.trim().length > 0 || uploadedFiles.length > 0}
+			{disabled}
+			{isLoading}
+			{isRecording}
+			onFileUpload={handleFileUpload}
+			onMicClick={handleMicClick}
+			onStop={handleStop}
+		/>
+	</div>
+</form>
+
+<ChatFormHelperText show={showHelperText} />

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActionFileAttachments.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { Paperclip, Image, FileText, File, Volume2 } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
+	import { FileTypeCategory } from '$lib/enums/files';
+	import { supportsAudio, supportsVision } from '$lib/stores/server.svelte';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		onFileUpload?: (fileType?: FileTypeCategory) => void;
+	}
+
+	let { class: className = '', disabled = false, onFileUpload }: Props = $props();
+
+	const fileUploadTooltipText = $derived.by(() => {
+		return !supportsVision()
+			? 'Text files and PDFs supported. Images, audio, and video require vision models.'
+			: 'Attach files';
+	});
+
+	function handleFileUpload(fileType?: FileTypeCategory) {
+		onFileUpload?.(fileType);
+	}
+</script>
+
+<div class="flex items-center gap-1 {className}">
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger name="Attach files">
+			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+				<Tooltip.Trigger>
+					<Button
+						class="file-upload-button h-8 w-8 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
+						{disabled}
+						type="button"
+					>
+						<span class="sr-only">Attach files</span>
+
+						<Paperclip class="h-4 w-4" />
+					</Button>
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<p>{fileUploadTooltipText}</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		</DropdownMenu.Trigger>
+
+		<DropdownMenu.Content align="start" class="w-48">
+			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+				<Tooltip.Trigger class="w-full">
+					<DropdownMenu.Item
+						class="images-button flex cursor-pointer items-center gap-2"
+						disabled={!supportsVision()}
+						onclick={() => handleFileUpload(FileTypeCategory.IMAGE)}
+					>
+						<Image class="h-4 w-4" />
+
+						<span>Images</span>
+					</DropdownMenu.Item>
+				</Tooltip.Trigger>
+
+				{#if !supportsVision()}
+					<Tooltip.Content>
+						<p>Images require vision models to be processed</p>
+					</Tooltip.Content>
+				{/if}
+			</Tooltip.Root>
+
+			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+				<Tooltip.Trigger class="w-full">
+					<DropdownMenu.Item
+						class="audio-button flex cursor-pointer items-center gap-2"
+						disabled={!supportsAudio()}
+						onclick={() => handleFileUpload(FileTypeCategory.AUDIO)}
+					>
+						<Volume2 class="h-4 w-4" />
+
+						<span>Audio Files</span>
+					</DropdownMenu.Item>
+				</Tooltip.Trigger>
+
+				{#if !supportsAudio()}
+					<Tooltip.Content>
+						<p>Audio files require audio models to be processed</p>
+					</Tooltip.Content>
+				{/if}
+			</Tooltip.Root>
+
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={() => handleFileUpload(FileTypeCategory.TEXT)}
+			>
+				<FileText class="h-4 w-4" />
+
+				<span>Text Files</span>
+			</DropdownMenu.Item>
+
+			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+				<Tooltip.Trigger class="w-full">
+					<DropdownMenu.Item
+						class="flex cursor-pointer items-center gap-2"
+						onclick={() => handleFileUpload(FileTypeCategory.PDF)}
+					>
+						<File class="h-4 w-4" />
+
+						<span>PDF Files</span>
+					</DropdownMenu.Item>
+				</Tooltip.Trigger>
+
+				{#if !supportsVision()}
+					<Tooltip.Content>
+						<p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
+					</Tooltip.Content>
+				{/if}
+			</Tooltip.Root>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+</div>

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActionRecord.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Mic } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { supportsAudio } from '$lib/stores/server.svelte';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		isRecording?: boolean;
+		onMicClick?: () => void;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		isLoading = false,
+		isRecording = false,
+		onMicClick
+	}: Props = $props();
+</script>
+
+<div class="flex items-center gap-1 {className}">
+	<Tooltip.Root delayDuration={100}>
+		<Tooltip.Trigger>
+			<Button
+				class="h-8 w-8 rounded-full p-0 {isRecording
+					? 'animate-pulse bg-red-500 text-white hover:bg-red-600'
+					: 'bg-transparent text-muted-foreground hover:bg-foreground/10 hover:text-foreground'} {!supportsAudio()
+					? 'cursor-not-allowed opacity-50'
+					: ''}"
+				disabled={disabled || isLoading || !supportsAudio()}
+				onclick={onMicClick}
+				type="button"
+			>
+				<span class="sr-only">{isRecording ? 'Stop recording' : 'Start recording'}</span>
+
+				<Mic class="h-4 w-4" />
+			</Button>
+		</Tooltip.Trigger>
+
+		{#if !supportsAudio()}
+			<Tooltip.Content>
+				<p>Current model does not support audio</p>
+			</Tooltip.Content>
+		{/if}
+	</Tooltip.Root>
+</div>

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Square, ArrowUp } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import ChatFormActionFileAttachments from './ChatFormActionFileAttachments.svelte';
+	import ChatFormActionRecord from './ChatFormActionRecord.svelte';
+	import type { FileTypeCategory } from '$lib/enums/files';
+
+	interface Props {
+		canSend?: boolean;
+		class?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		isRecording?: boolean;
+		onFileUpload?: (fileType?: FileTypeCategory) => void;
+		onMicClick?: () => void;
+		onStop?: () => void;
+	}
+
+	let {
+		canSend = false,
+		class: className = '',
+		disabled = false,
+		isLoading = false,
+		isRecording = false,
+		onFileUpload,
+		onMicClick,
+		onStop
+	}: Props = $props();
+</script>
+
+<div class="flex items-center justify-between gap-1 {className}">
+	<ChatFormActionFileAttachments {disabled} {onFileUpload} />
+
+	<div class="flex gap-2">
+		{#if isLoading}
+			<Button
+				type="button"
+				onclick={onStop}
+				class="h-8 w-8 bg-transparent p-0 hover:bg-destructive/20"
+			>
+				<span class="sr-only">Stop</span>
+				<Square class="h-8 w-8 fill-destructive stroke-destructive" />
+			</Button>
+		{:else}
+			<ChatFormActionRecord {disabled} {isLoading} {isRecording} {onMicClick} />
+
+			<Button
+				type="submit"
+				disabled={!canSend || disabled || isLoading}
+				class="h-8 w-8 rounded-full p-0"
+			>
+				<span class="sr-only">Send</span>
+				<ArrowUp class="h-12 w-12" />
+			</Button>
+		{/if}
+	</div>
+</div>

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormFileInputInvisible.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { generateModalityAwareAcceptString } from '$lib/utils/modality-file-validation';
+
+	interface Props {
+		accept?: string;
+		class?: string;
+		multiple?: boolean;
+		onFileSelect?: (files: File[]) => void;
+	}
+
+	let {
+		accept = $bindable(),
+		class: className = '',
+		multiple = true,
+		onFileSelect
+	}: Props = $props();
+
+	let fileInputElement: HTMLInputElement | undefined;
+
+	// Use modality-aware accept string by default, but allow override
+	let finalAccept = $derived(accept ?? generateModalityAwareAcceptString());
+
+	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}
+	accept={finalAccept}
+	onchange={handleFileSelect}
+	class="hidden {className}"
+/>

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormHelperText.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		show?: boolean;
+	}
+
+	let { class: className = '', show = true }: Props = $props();
+</script>
+
+{#if show}
+	<div class="mt-4 flex items-center justify-center {className}">
+		<p class="text-xs text-muted-foreground">
+			Press <kbd class="rounded bg-muted px-1 py-0.5 font-mono text-xs">Enter</kbd> to send,
+			<kbd class="rounded bg-muted px-1 py-0.5 font-mono text-xs">Shift + Enter</kbd> for new line
+		</p>
+	</div>
+{/if}

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import autoResizeTextarea from '$lib/utils/autoresize-textarea';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		onKeydown?: (event: KeyboardEvent) => void;
+		onPaste?: (event: ClipboardEvent) => void;
+		placeholder?: string;
+		value?: string;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		onKeydown,
+		onPaste,
+		placeholder = 'Ask anything...',
+		value = $bindable('')
+	}: Props = $props();
+
+	let textareaElement: HTMLTextAreaElement | undefined;
+
+	onMount(() => {
+		if (textareaElement) {
+			textareaElement.focus();
+		}
+	});
+
+	// Expose the textarea element for external access
+	export function getElement() {
+		return textareaElement;
+	}
+
+	export function focus() {
+		textareaElement?.focus();
+	}
+
+	export function resetHeight() {
+		if (textareaElement) {
+			textareaElement.style.height = '1rem';
+		}
+	}
+</script>
+
+<div class="flex-1 {className}">
+	<textarea
+		bind:this={textareaElement}
+		bind:value
+		class="text-md max-h-32 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"
+		class:cursor-not-allowed={disabled}
+		{disabled}
+		onkeydown={onKeydown}
+		oninput={(event) => autoResizeTextarea(event.currentTarget)}
+		onpaste={onPaste}
+		{placeholder}
+	></textarea>
+</div>

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import { getDeletionInfo } from '$lib/stores/chat.svelte';
+	import { copyToClipboard } from '$lib/utils/copy';
+	import { parseThinkingContent } from '$lib/utils/thinking';
+	import ChatMessageAssistant from './ChatMessageAssistant.svelte';
+	import ChatMessageUser from './ChatMessageUser.svelte';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		onCopy?: (message: DatabaseMessage) => void;
+		onDelete?: (message: DatabaseMessage) => void;
+		onEditWithBranching?: (message: DatabaseMessage, newContent: string) => void;
+		onEditWithReplacement?: (
+			message: DatabaseMessage,
+			newContent: string,
+			shouldBranch: boolean
+		) => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onRegenerateWithBranching?: (message: DatabaseMessage) => void;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+	}
+
+	let {
+		class: className = '',
+		message,
+		onCopy,
+		onDelete,
+		onEditWithBranching,
+		onEditWithReplacement,
+		onNavigateToSibling,
+		onRegenerateWithBranching,
+		siblingInfo = null
+	}: Props = $props();
+
+	let deletionInfo = $state<{
+		totalCount: number;
+		userMessages: number;
+		assistantMessages: number;
+		messageTypes: string[];
+	} | null>(null);
+	let editedContent = $state(message.content);
+	let isEditing = $state(false);
+	let showDeleteDialog = $state(false);
+	let shouldBranchAfterEdit = $state(false);
+	let textareaElement: HTMLTextAreaElement | undefined = $state();
+
+	let thinkingContent = $derived.by(() => {
+		if (message.role === 'assistant') {
+			if (message.thinking) {
+				return message.thinking;
+			}
+
+			const parsed = parseThinkingContent(message.content);
+
+			return parsed.thinking;
+		}
+		return null;
+	});
+
+	let messageContent = $derived.by(() => {
+		if (message.role === 'assistant') {
+			const parsed = parseThinkingContent(message.content);
+			return parsed.cleanContent?.replace('<|channel|>analysis', '');
+		}
+
+		return message.content?.replace('<|channel|>analysis', '');
+	});
+
+	function handleCancelEdit() {
+		isEditing = false;
+		editedContent = message.content;
+	}
+
+	async function handleCopy() {
+		await copyToClipboard(message.content, 'Message copied to clipboard');
+		onCopy?.(message);
+	}
+
+	function handleConfirmDelete() {
+		onDelete?.(message);
+		showDeleteDialog = false;
+	}
+
+	async function handleDelete() {
+		deletionInfo = await getDeletionInfo(message.id);
+		showDeleteDialog = true;
+	}
+
+	function handleEdit() {
+		isEditing = true;
+		editedContent = message.content;
+
+		setTimeout(() => {
+			if (textareaElement) {
+				textareaElement.focus();
+				textareaElement.setSelectionRange(
+					textareaElement.value.length,
+					textareaElement.value.length
+				);
+			}
+		}, 0);
+	}
+
+	function handleEditedContentChange(content: string) {
+		editedContent = content;
+	}
+
+	function handleEditKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSaveEdit();
+		} else if (event.key === 'Escape') {
+			event.preventDefault();
+			handleCancelEdit();
+		}
+	}
+
+	function handleRegenerate() {
+		onRegenerateWithBranching?.(message);
+	}
+
+	function handleSaveEdit() {
+		if (message.role === 'user') {
+			onEditWithBranching?.(message, editedContent.trim());
+		} else {
+			onEditWithReplacement?.(message, editedContent.trim(), shouldBranchAfterEdit);
+		}
+
+		isEditing = false;
+		shouldBranchAfterEdit = false;
+	}
+
+	function handleShowDeleteDialogChange(show: boolean) {
+		showDeleteDialog = show;
+	}
+</script>
+
+{#if message.role === 'user'}
+	<ChatMessageUser
+		bind:textareaElement
+		class={className}
+		{deletionInfo}
+		{editedContent}
+		{isEditing}
+		{message}
+		onCancelEdit={handleCancelEdit}
+		onConfirmDelete={handleConfirmDelete}
+		onCopy={handleCopy}
+		onDelete={handleDelete}
+		onEdit={handleEdit}
+		onEditKeydown={handleEditKeydown}
+		onEditedContentChange={handleEditedContentChange}
+		{onNavigateToSibling}
+		onSaveEdit={handleSaveEdit}
+		onShowDeleteDialogChange={handleShowDeleteDialogChange}
+		{showDeleteDialog}
+		{siblingInfo}
+	/>
+{:else}
+	<ChatMessageAssistant
+		bind:textareaElement
+		class={className}
+		{deletionInfo}
+		{editedContent}
+		{isEditing}
+		{message}
+		{messageContent}
+		onCancelEdit={handleCancelEdit}
+		onConfirmDelete={handleConfirmDelete}
+		onCopy={handleCopy}
+		onDelete={handleDelete}
+		onEdit={handleEdit}
+		onEditKeydown={handleEditKeydown}
+		onEditedContentChange={handleEditedContentChange}
+		{onNavigateToSibling}
+		onRegenerate={handleRegenerate}
+		onSaveEdit={handleSaveEdit}
+		onShowDeleteDialogChange={handleShowDeleteDialogChange}
+		{shouldBranchAfterEdit}
+		onShouldBranchAfterEditChange={(value) => (shouldBranchAfterEdit = value)}
+		{showDeleteDialog}
+		{siblingInfo}
+		{thinkingContent}
+	/>
+{/if}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { Edit, Copy, RefreshCw, Trash2 } from '@lucide/svelte';
+	import { ActionButton, ConfirmationDialog } from '$lib/components/app';
+	import ChatMessageBranchingControls from './ChatMessageBranchingControls.svelte';
+
+	interface Props {
+		message: DatabaseMessage;
+		role: 'user' | '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;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+	}
+
+	let {
+		actionsPosition,
+		deletionInfo,
+		justify,
+		message,
+		onCopy,
+		onEdit,
+		onConfirmDelete,
+		onDelete,
+		onNavigateToSibling,
+		onShowDeleteDialogChange,
+		onRegenerate,
+		role,
+		siblingInfo = null,
+		showDeleteDialog
+	}: Props = $props();
+
+	function handleConfirmDelete() {
+		onConfirmDelete();
+		onShowDeleteDialogChange(false);
+	}
+</script>
+
+<div class="relative {justify === 'start' ? 'mt-2' : ''} flex h-6 items-center justify-{justify}">
+	<div
+		class="flex items-center text-xs text-muted-foreground transition-opacity group-hover:opacity-0"
+	>
+		{new Date(message.timestamp).toLocaleTimeString(undefined, {
+			hour: '2-digit',
+			minute: '2-digit'
+		})}
+	</div>
+
+	<div
+		class="absolute top-0 {actionsPosition === 'left'
+			? 'left-0'
+			: 'right-0'} flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100"
+	>
+		{#if siblingInfo && siblingInfo.totalSiblings > 1}
+			<ChatMessageBranchingControls {siblingInfo} {onNavigateToSibling} />
+		{/if}
+
+		<div
+			class="pointer-events-none inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+		>
+			<ActionButton icon={Copy} tooltip="Copy" onclick={onCopy} />
+
+			{#if onEdit}
+				<ActionButton icon={Edit} tooltip="Edit" onclick={onEdit} />
+			{/if}
+
+			{#if role === 'assistant' && onRegenerate}
+				<ActionButton icon={RefreshCw} tooltip="Regenerate" onclick={onRegenerate} />
+			{/if}
+
+			<ActionButton icon={Trash2} tooltip="Delete" onclick={onDelete} />
+		</div>
+	</div>
+</div>
+
+<ConfirmationDialog
+	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)}
+/>

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { ChatMessageThinkingBlock, MarkdownContent } from '$lib/components/app';
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { isLoading } from '$lib/stores/chat.svelte';
+	import { fade } from 'svelte/transition';
+	import { Check, X } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { INPUT_CLASSES } from '$lib/constants/input-classes';
+	import ChatMessageActions from './ChatMessageActions.svelte';
+	import Label from '$lib/components/ui/label/label.svelte';
+
+	interface Props {
+		class?: string;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		editedContent?: string;
+		isEditing?: boolean;
+		message: DatabaseMessage;
+		messageContent: string | undefined;
+		onCancelEdit?: () => void;
+		onCopy: () => void;
+		onConfirmDelete: () => void;
+		onDelete: () => void;
+		onEdit?: () => void;
+		onEditKeydown?: (event: KeyboardEvent) => void;
+		onEditedContentChange?: (content: string) => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onRegenerate: () => void;
+		onSaveEdit?: () => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		onShouldBranchAfterEditChange?: (value: boolean) => void;
+		showDeleteDialog: boolean;
+		shouldBranchAfterEdit?: boolean;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		textareaElement?: HTMLTextAreaElement;
+		thinkingContent: string | null;
+	}
+
+	let {
+		class: className = '',
+		deletionInfo,
+		editedContent = '',
+		isEditing = false,
+		message,
+		messageContent,
+		onCancelEdit,
+		onConfirmDelete,
+		onCopy,
+		onDelete,
+		onEdit,
+		onEditKeydown,
+		onEditedContentChange,
+		onNavigateToSibling,
+		onRegenerate,
+		onSaveEdit,
+		onShowDeleteDialogChange,
+		onShouldBranchAfterEditChange,
+		showDeleteDialog,
+		shouldBranchAfterEdit = false,
+		siblingInfo = null,
+		textareaElement = $bindable(),
+		thinkingContent
+	}: Props = $props();
+
+	const processingState = useProcessingState();
+</script>
+
+<div
+	class="text-md group w-full leading-7.5 {className}"
+	role="group"
+	aria-label="Assistant message with actions"
+>
+	{#if thinkingContent}
+		<ChatMessageThinkingBlock
+			reasoningContent={thinkingContent}
+			isStreaming={!message.timestamp}
+			hasRegularContent={!!messageContent?.trim()}
+		/>
+	{/if}
+
+	{#if message?.role === 'assistant' && isLoading() && !message?.content?.trim()}
+		<div class="mt-6 w-full max-w-[48rem]" in:fade>
+			<div class="processing-container">
+				<span class="processing-text">
+					{processingState.getProcessingMessage()}
+				</span>
+			</div>
+		</div>
+	{/if}
+
+	{#if isEditing}
+		<div class="w-full">
+			<textarea
+				bind:this={textareaElement}
+				bind:value={editedContent}
+				class="min-h-[50vh] w-full resize-y rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
+				onkeydown={onEditKeydown}
+				oninput={(e) => onEditedContentChange?.(e.currentTarget.value)}
+				placeholder="Edit assistant message..."
+			></textarea>
+
+			<div class="mt-2 flex items-center justify-between">
+				<div class="flex items-center space-x-2">
+					<Checkbox
+						id="branch-after-edit"
+						bind:checked={shouldBranchAfterEdit}
+						onCheckedChange={(checked) => onShouldBranchAfterEditChange?.(checked === true)}
+					/>
+					<Label for="branch-after-edit" class="cursor-pointer text-sm text-muted-foreground">
+						Branch conversation after edit
+					</Label>
+				</div>
+				<div class="flex gap-2">
+					<Button class="h-8 px-3" onclick={onCancelEdit} size="sm" variant="outline">
+						<X class="mr-1 h-3 w-3" />
+						Cancel
+					</Button>
+
+					<Button class="h-8 px-3" onclick={onSaveEdit} disabled={!editedContent?.trim()} size="sm">
+						<Check class="mr-1 h-3 w-3" />
+						Save
+					</Button>
+				</div>
+			</div>
+		</div>
+	{:else if message.role === 'assistant'}
+		<MarkdownContent content={messageContent || ''} />
+	{:else}
+		<div class="text-sm whitespace-pre-wrap">
+			{messageContent}
+		</div>
+	{/if}
+
+	{#if message.timestamp && !isEditing}
+		<ChatMessageActions
+			{message}
+			role="assistant"
+			justify="start"
+			actionsPosition="left"
+			{siblingInfo}
+			{showDeleteDialog}
+			{deletionInfo}
+			{onCopy}
+			{onEdit}
+			{onRegenerate}
+			{onDelete}
+			{onConfirmDelete}
+			{onNavigateToSibling}
+			{onShowDeleteDialogChange}
+		/>
+	{/if}
+</div>
+
+<style>
+	.processing-container {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+
+	.processing-text {
+		background: linear-gradient(
+			90deg,
+			var(--muted-foreground),
+			var(--foreground),
+			var(--muted-foreground)
+		);
+		background-size: 200% 100%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		animation: shine 1s linear infinite;
+		font-weight: 500;
+		font-size: 0.875rem;
+	}
+
+	@keyframes shine {
+		to {
+			background-position: -200% 0;
+		}
+	}
+</style>

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageBranchingControls.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	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
+	);
+
+	function handleNext() {
+		if (nextSiblingId) {
+			onNavigateToSibling?.(nextSiblingId);
+		}
+	}
+
+	function handlePrevious() {
+		if (previousSiblingId) {
+			onNavigateToSibling?.(previousSiblingId);
+		}
+	}
+</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"
+	>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<Button
+					aria-label="Previous message version"
+					class="h-5 w-5 p-0 {!hasPrevious ? 'cursor-not-allowed opacity-30' : ''}"
+					disabled={!hasPrevious}
+					onclick={handlePrevious}
+					size="sm"
+					variant="ghost"
+				>
+					<ChevronLeft class="h-3 w-3" />
+				</Button>
+			</Tooltip.Trigger>
+
+			<Tooltip.Content>
+				<p>Previous version</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+
+		<span class="px-1 font-mono text-xs">
+			{siblingInfo.currentIndex + 1}/{siblingInfo.totalSiblings}
+		</span>
+
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<Button
+					aria-label="Next message version"
+					class="h-5 w-5 p-0 {!hasNext ? 'cursor-not-allowed opacity-30' : ''}"
+					disabled={!hasNext}
+					onclick={handleNext}
+					size="sm"
+					variant="ghost"
+				>
+					<ChevronRight class="h-3 w-3" />
+				</Button>
+			</Tooltip.Trigger>
+
+			<Tooltip.Content>
+				<p>Next version</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+	</div>
+{/if}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageThinkingBlock.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Brain } from '@lucide/svelte';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { Card } from '$lib/components/ui/card';
+	import { MarkdownContent } from '$lib/components/app';
+	import { config } from '$lib/stores/settings.svelte';
+
+	interface Props {
+		class?: string;
+		hasRegularContent?: boolean;
+		isStreaming?: boolean;
+		reasoningContent: string | null;
+	}
+
+	let {
+		class: className = '',
+		hasRegularContent = false,
+		isStreaming = false,
+		reasoningContent
+	}: Props = $props();
+
+	const currentConfig = config();
+
+	let isExpanded = $state(currentConfig.showThoughtInProgress);
+
+	$effect(() => {
+		if (hasRegularContent && reasoningContent && currentConfig.showThoughtInProgress) {
+			isExpanded = false;
+		}
+	});
+</script>
+
+<Collapsible.Root bind:open={isExpanded} class="mb-6 {className}">
+	<Card class="gap-0 border-muted bg-muted/30 py-0">
+		<Collapsible.Trigger class="flex cursor-pointer items-center justify-between p-3">
+			<div class="flex items-center gap-2 text-muted-foreground">
+				<Brain class="h-4 w-4" />
+
+				<span class="text-sm font-medium">
+					{isStreaming ? 'Reasoning...' : 'Reasoning'}
+				</span>
+			</div>
+
+			<div
+				class={buttonVariants({
+					variant: 'ghost',
+					size: 'sm',
+					class: 'h-6 w-6 p-0 text-muted-foreground hover:text-foreground'
+				})}
+			>
+				<ChevronsUpDownIcon class="h-4 w-4" />
+
+				<span class="sr-only">Toggle reasoning content</span>
+			</div>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content>
+			<div class="border-t border-muted px-3 pb-3">
+				<div class="pt-3">
+					<MarkdownContent content={reasoningContent || ''} class="text-xs leading-relaxed" />
+				</div>
+			</div>
+		</Collapsible.Content>
+	</Card>
+</Collapsible.Root>

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { Check, X } from '@lucide/svelte';
+	import { Card } from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import { ChatAttachmentsList } from '$lib/components/app';
+	import { INPUT_CLASSES } from '$lib/constants/input-classes';
+	import ChatMessageActions from './ChatMessageActions.svelte';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		isEditing: boolean;
+		editedContent: string;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		showDeleteDialog: boolean;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		onCancelEdit: () => void;
+		onSaveEdit: () => void;
+		onEditKeydown: (event: KeyboardEvent) => void;
+		onEditedContentChange: (content: string) => void;
+		onCopy: () => void;
+		onEdit: () => void;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		textareaElement?: HTMLTextAreaElement;
+	}
+
+	let {
+		class: className = '',
+		message,
+		isEditing,
+		editedContent,
+		siblingInfo = null,
+		showDeleteDialog,
+		deletionInfo,
+		onCancelEdit,
+		onSaveEdit,
+		onEditKeydown,
+		onEditedContentChange,
+		onCopy,
+		onEdit,
+		onDelete,
+		onConfirmDelete,
+		onNavigateToSibling,
+		onShowDeleteDialogChange,
+		textareaElement = $bindable()
+	}: Props = $props();
+</script>
+
+<div
+	aria-label="User message with actions"
+	class="group flex flex-col items-end gap-2 {className}"
+	role="group"
+>
+	{#if isEditing}
+		<div class="w-full max-w-[80%]">
+			<textarea
+				bind:this={textareaElement}
+				bind:value={editedContent}
+				class="min-h-[60px] w-full resize-none rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
+				onkeydown={onEditKeydown}
+				oninput={(e) => onEditedContentChange(e.currentTarget.value)}
+				placeholder="Edit your message..."
+			></textarea>
+
+			<div class="mt-2 flex justify-end gap-2">
+				<Button class="h-8 px-3" onclick={onCancelEdit} size="sm" variant="outline">
+					<X class="mr-1 h-3 w-3" />
+
+					Cancel
+				</Button>
+
+				<Button class="h-8 px-3" onclick={onSaveEdit} disabled={!editedContent.trim()} size="sm">
+					<Check class="mr-1 h-3 w-3" />
+
+					Send
+				</Button>
+			</div>
+		</div>
+	{:else}
+		{#if message.extra && message.extra.length > 0}
+			<div class="mb-2 max-w-[80%]">
+				<ChatAttachmentsList attachments={message.extra} readonly={true} imageHeight="h-80" />
+			</div>
+		{/if}
+
+		{#if message.content.trim()}
+			<Card class="max-w-[80%] rounded-2xl bg-primary px-2.5 py-1.5 text-primary-foreground">
+				<div class="text-md whitespace-pre-wrap">
+					{message.content}
+				</div>
+			</Card>
+		{/if}
+
+		{#if message.timestamp}
+			<div class="max-w-[80%]">
+				<ChatMessageActions
+					actionsPosition="right"
+					{deletionInfo}
+					justify="end"
+					{message}
+					{onConfirmDelete}
+					{onCopy}
+					{onDelete}
+					{onEdit}
+					{onNavigateToSibling}
+					{onShowDeleteDialogChange}
+					{siblingInfo}
+					{showDeleteDialog}
+					role="user"
+				/>
+			</div>
+		{/if}
+	{/if}
+</div>

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { ChatMessage } from '$lib/components/app';
+	import { DatabaseStore } from '$lib/stores/database';
+	import {
+		activeConversation,
+		deleteMessage,
+		navigateToSibling,
+		editMessageWithBranching,
+		editAssistantMessage,
+		regenerateMessageWithBranching
+	} from '$lib/stores/chat.svelte';
+	import { getMessageSiblings } from '$lib/utils/branching';
+
+	interface Props {
+		class?: string;
+		messages?: DatabaseMessage[];
+		onUserAction?: () => void;
+	}
+
+	let { class: className, messages = [], onUserAction }: Props = $props();
+
+	let allConversationMessages = $state<DatabaseMessage[]>([]);
+
+	function refreshAllMessages() {
+		const conversation = activeConversation();
+
+		if (conversation) {
+			DatabaseStore.getConversationMessages(conversation.id).then((messages) => {
+				allConversationMessages = messages;
+			});
+		} else {
+			allConversationMessages = [];
+		}
+	}
+
+	// Single effect that tracks both conversation and message changes
+	$effect(() => {
+		const conversation = activeConversation();
+
+		if (conversation) {
+			refreshAllMessages();
+		}
+	});
+
+	let displayMessages = $derived.by(() => {
+		if (!messages.length) {
+			return [];
+		}
+
+		return messages.map((message) => {
+			const siblingInfo = getMessageSiblings(allConversationMessages, message.id);
+
+			return {
+				message,
+				siblingInfo: siblingInfo || {
+					message,
+					siblingIds: [message.id],
+					currentIndex: 0,
+					totalSiblings: 1
+				}
+			};
+		});
+	});
+
+	async function handleNavigateToSibling(siblingId: string) {
+		await navigateToSibling(siblingId);
+	}
+
+	async function handleEditWithBranching(message: DatabaseMessage, newContent: string) {
+		onUserAction?.();
+
+		await editMessageWithBranching(message.id, newContent);
+
+		refreshAllMessages();
+	}
+
+	async function handleEditWithReplacement(
+		message: DatabaseMessage,
+		newContent: string,
+		shouldBranch: boolean
+	) {
+		onUserAction?.();
+
+		await editAssistantMessage(message.id, newContent, shouldBranch);
+
+		refreshAllMessages();
+	}
+
+	async function handleRegenerateWithBranching(message: DatabaseMessage) {
+		onUserAction?.();
+
+		await regenerateMessageWithBranching(message.id);
+
+		refreshAllMessages();
+	}
+	async function handleDeleteMessage(message: DatabaseMessage) {
+		await deleteMessage(message.id);
+
+		refreshAllMessages();
+	}
+</script>
+
+<div class="flex h-full flex-col space-y-10 pt-16 md:pt-24 {className}" style="height: auto; ">
+	{#each displayMessages as { message, siblingInfo } (message.id)}
+		<ChatMessage
+			class="mx-auto w-full max-w-[48rem]"
+			{message}
+			{siblingInfo}
+			onDelete={handleDeleteMessage}
+			onNavigateToSibling={handleNavigateToSibling}
+			onEditWithBranching={handleEditWithBranching}
+			onEditWithReplacement={handleEditWithReplacement}
+			onRegenerateWithBranching={handleRegenerateWithBranching}
+		/>
+	{/each}
+</div>

tools/server/webui/src/lib/components/app/chat/ChatProcessingInfo.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { PROCESSING_INFO_TIMEOUT } from '$lib/constants/processing-info';
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { slotsService } from '$lib/services/slots';
+	import { isLoading, activeMessages, activeConversation } from '$lib/stores/chat.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+
+	const processingState = useProcessingState();
+
+	let processingDetails = $derived(processingState.getProcessingDetails());
+
+	let showSlotsInfo = $derived(isLoading() || config().keepStatsVisible);
+
+	$effect(() => {
+		const keepStatsVisible = config().keepStatsVisible;
+
+		if (keepStatsVisible || isLoading()) {
+			processingState.startMonitoring();
+		}
+
+		if (!isLoading() && !keepStatsVisible) {
+			setTimeout(() => {
+				if (!config().keepStatsVisible) {
+					processingState.stopMonitoring();
+				}
+			}, PROCESSING_INFO_TIMEOUT);
+		}
+	});
+
+	$effect(() => {
+		activeConversation();
+
+		const messages = activeMessages() as DatabaseMessage[];
+		const keepStatsVisible = config().keepStatsVisible;
+
+		if (keepStatsVisible) {
+			if (messages.length === 0) {
+				slotsService.clearState();
+				return;
+			}
+
+			let foundTimingData = false;
+
+			for (let i = messages.length - 1; i >= 0; i--) {
+				const message = messages[i];
+				if (message.role === 'assistant' && message.timings) {
+					foundTimingData = true;
+
+					slotsService
+						.updateFromTimingData({
+							prompt_n: message.timings.prompt_n || 0,
+							predicted_n: message.timings.predicted_n || 0,
+							predicted_per_second:
+								message.timings.predicted_n && message.timings.predicted_ms
+									? (message.timings.predicted_n / message.timings.predicted_ms) * 1000
+									: 0,
+							cache_n: message.timings.cache_n || 0
+						})
+						.catch((error) => {
+							console.warn('Failed to update processing state from stored timings:', error);
+						});
+					break;
+				}
+			}
+
+			if (!foundTimingData) {
+				slotsService.clearState();
+			}
+		}
+	});
+</script>
+
+<div class="chat-processing-info-container" class:visible={showSlotsInfo}>
+	<div class="chat-processing-info-content">
+		{#each processingDetails as detail (detail)}
+			<span class="chat-processing-info-detail">{detail}</span>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.chat-processing-info-container {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		padding: 1.5rem 1rem;
+		opacity: 0;
+		transform: translateY(50%);
+		pointer-events: none;
+		transition:
+			opacity 300ms ease-out,
+			transform 300ms ease-out;
+	}
+
+	.chat-processing-info-container.visible {
+		opacity: 1;
+		pointer-events: auto;
+		transform: translateY(0);
+	}
+
+	.chat-processing-info-content {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 1rem;
+		justify-content: center;
+		max-width: 48rem;
+		margin: 0 auto;
+	}
+
+	.chat-processing-info-detail {
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		padding: 0.25rem 0.75rem;
+		background: var(--muted);
+		border-radius: 0.375rem;
+		font-family:
+			ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
+		white-space: nowrap;
+	}
+
+	@media (max-width: 768px) {
+		.chat-processing-info-content {
+			gap: 0.5rem;
+		}
+
+		.chat-processing-info-detail {
+			font-size: 0.7rem;
+			padding: 0.2rem 0.5rem;
+		}
+	}
+</style>

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte

@@ -0,0 +1,467 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import {
+		ChatForm,
+		ChatScreenHeader,
+		ChatMessages,
+		ChatProcessingInfo,
+		EmptyFileAlertDialog,
+		ServerInfo,
+		ServerLoadingSplash,
+		ConfirmationDialog
+	} from '$lib/components/app';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import {
+		AUTO_SCROLL_AT_BOTTOM_THRESHOLD,
+		AUTO_SCROLL_INTERVAL,
+		INITIAL_SCROLL_DELAY
+	} from '$lib/constants/auto-scroll';
+	import {
+		activeMessages,
+		activeConversation,
+		deleteConversation,
+		isLoading,
+		sendMessage,
+		stopGeneration,
+		setMaxContextError
+	} from '$lib/stores/chat.svelte';
+	import {
+		supportsVision,
+		supportsAudio,
+		serverLoading,
+		serverStore
+	} from '$lib/stores/server.svelte';
+	import { contextService } from '$lib/services';
+	import { parseFilesToMessageExtras } from '$lib/utils/convert-files-to-extra';
+	import { isFileTypeSupported } from '$lib/utils/file-type';
+	import { filterFilesByModalities } from '$lib/utils/modality-file-validation';
+	import { processFilesToChatUploaded } from '$lib/utils/process-uploaded-files';
+	import { onMount } from 'svelte';
+	import { fade, fly, slide } from 'svelte/transition';
+	import { Trash2 } from '@lucide/svelte';
+	import ChatScreenDragOverlay from './ChatScreenDragOverlay.svelte';
+
+	let { showCenteredEmpty = false } = $props();
+
+	let autoScrollEnabled = $state(true);
+	let chatScrollContainer: HTMLDivElement | undefined = $state();
+	let dragCounter = $state(0);
+	let isDragOver = $state(false);
+	let lastScrollTop = $state(0);
+	let scrollInterval: ReturnType<typeof setInterval> | undefined;
+	let scrollTimeout: ReturnType<typeof setTimeout> | undefined;
+	let showFileErrorDialog = $state(false);
+	let uploadedFiles = $state<ChatUploadedFile[]>([]);
+	let userScrolledUp = $state(false);
+
+	let fileErrorData = $state<{
+		generallyUnsupported: File[];
+		modalityUnsupported: File[];
+		modalityReasons: Record<string, string>;
+		supportedTypes: string[];
+	}>({
+		generallyUnsupported: [],
+		modalityUnsupported: [],
+		modalityReasons: {},
+		supportedTypes: []
+	});
+
+	let showDeleteDialog = $state(false);
+
+	let showEmptyFileDialog = $state(false);
+
+	let emptyFileNames = $state<string[]>([]);
+
+	let isEmpty = $derived(
+		showCenteredEmpty && !activeConversation() && activeMessages().length === 0 && !isLoading()
+	);
+
+	let isServerLoading = $derived(serverLoading());
+
+	async function handleDeleteConfirm() {
+		const conversation = activeConversation();
+		if (conversation) {
+			await deleteConversation(conversation.id);
+		}
+		showDeleteDialog = false;
+	}
+
+	function handleDragEnter(event: DragEvent) {
+		event.preventDefault();
+		dragCounter++;
+		if (event.dataTransfer?.types.includes('Files')) {
+			isDragOver = true;
+		}
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault();
+		dragCounter--;
+		if (dragCounter === 0) {
+			isDragOver = false;
+		}
+	}
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault();
+	}
+
+	function handleDrop(event: DragEvent) {
+		event.preventDefault();
+		isDragOver = false;
+		dragCounter = 0;
+
+		if (event.dataTransfer?.files) {
+			processFiles(Array.from(event.dataTransfer.files));
+		}
+	}
+
+	function handleFileRemove(fileId: string) {
+		uploadedFiles = uploadedFiles.filter((f) => f.id !== fileId);
+	}
+
+	function handleFileUpload(files: File[]) {
+		processFiles(files);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		const isCtrlOrCmd = event.ctrlKey || event.metaKey;
+
+		if (isCtrlOrCmd && event.shiftKey && (event.key === 'd' || event.key === 'D')) {
+			event.preventDefault();
+			if (activeConversation()) {
+				showDeleteDialog = true;
+			}
+		}
+	}
+
+	function handleScroll() {
+		if (!chatScrollContainer) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = chatScrollContainer;
+		const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+		const isAtBottom = distanceFromBottom < AUTO_SCROLL_AT_BOTTOM_THRESHOLD;
+
+		if (scrollTop < lastScrollTop && !isAtBottom) {
+			userScrolledUp = true;
+			autoScrollEnabled = false;
+		} else if (isAtBottom && userScrolledUp) {
+			userScrolledUp = false;
+			autoScrollEnabled = true;
+		}
+
+		if (scrollTimeout) {
+			clearTimeout(scrollTimeout);
+		}
+
+		scrollTimeout = setTimeout(() => {
+			if (isAtBottom) {
+				userScrolledUp = false;
+				autoScrollEnabled = true;
+			}
+		}, AUTO_SCROLL_INTERVAL);
+
+		lastScrollTop = scrollTop;
+	}
+
+	async function handleSendMessage(message: string, files?: ChatUploadedFile[]): Promise<boolean> {
+		const result = files ? await parseFilesToMessageExtras(files) : undefined;
+
+		if (result?.emptyFiles && result.emptyFiles.length > 0) {
+			emptyFileNames = result.emptyFiles;
+			showEmptyFileDialog = true;
+
+			if (files) {
+				const emptyFileNamesSet = new Set(result.emptyFiles);
+				uploadedFiles = uploadedFiles.filter((file) => !emptyFileNamesSet.has(file.name));
+			}
+			return false;
+		}
+
+		const extras = result?.extras;
+
+		// Check context limit using real-time slots data
+		const contextCheck = await contextService.checkContextLimit();
+
+		if (contextCheck && contextCheck.wouldExceed) {
+			const errorMessage = contextService.getContextErrorMessage(contextCheck);
+
+			setMaxContextError({
+				message: errorMessage,
+				estimatedTokens: contextCheck.currentUsage,
+				maxContext: contextCheck.maxContext
+			});
+
+			return false;
+		}
+
+		// Enable autoscroll for user-initiated message sending
+		userScrolledUp = false;
+		autoScrollEnabled = true;
+		await sendMessage(message, extras);
+		scrollChatToBottom();
+
+		return true;
+	}
+
+	async function processFiles(files: File[]) {
+		const generallySupported: File[] = [];
+		const generallyUnsupported: File[] = [];
+
+		for (const file of files) {
+			if (isFileTypeSupported(file.name, file.type)) {
+				generallySupported.push(file);
+			} else {
+				generallyUnsupported.push(file);
+			}
+		}
+
+		const { supportedFiles, unsupportedFiles, modalityReasons } =
+			filterFilesByModalities(generallySupported);
+
+		const allUnsupportedFiles = [...generallyUnsupported, ...unsupportedFiles];
+
+		if (allUnsupportedFiles.length > 0) {
+			const supportedTypes: string[] = ['text files', 'PDFs'];
+
+			if (supportsVision()) supportedTypes.push('images');
+			if (supportsAudio()) supportedTypes.push('audio files');
+
+			fileErrorData = {
+				generallyUnsupported,
+				modalityUnsupported: unsupportedFiles,
+				modalityReasons,
+				supportedTypes
+			};
+			showFileErrorDialog = true;
+		}
+
+		if (supportedFiles.length > 0) {
+			const processed = await processFilesToChatUploaded(supportedFiles);
+			uploadedFiles = [...uploadedFiles, ...processed];
+		}
+	}
+
+	function scrollChatToBottom(behavior: ScrollBehavior = 'smooth') {
+		chatScrollContainer?.scrollTo({
+			top: chatScrollContainer?.scrollHeight,
+			behavior
+		});
+	}
+
+	afterNavigate(() => {
+		setTimeout(() => scrollChatToBottom('instant'), INITIAL_SCROLL_DELAY);
+	});
+
+	onMount(() => {
+		setTimeout(() => scrollChatToBottom('instant'), INITIAL_SCROLL_DELAY);
+	});
+
+	$effect(() => {
+		if (isLoading() && autoScrollEnabled) {
+			scrollInterval = setInterval(scrollChatToBottom, AUTO_SCROLL_INTERVAL);
+		} else if (scrollInterval) {
+			clearInterval(scrollInterval);
+			scrollInterval = undefined;
+		}
+	});
+</script>
+
+{#if isDragOver}
+	<ChatScreenDragOverlay />
+{/if}
+
+<svelte:window onkeydown={handleKeydown} />
+
+<ChatScreenHeader />
+
+{#if !isEmpty}
+	<div
+		bind:this={chatScrollContainer}
+		aria-label="Chat interface with file drop zone"
+		class="flex h-full flex-col overflow-y-auto px-4 md:px-6"
+		ondragenter={handleDragEnter}
+		ondragleave={handleDragLeave}
+		ondragover={handleDragOver}
+		ondrop={handleDrop}
+		onscroll={handleScroll}
+		role="main"
+	>
+		<ChatMessages
+			class="mb-16 md:mb-24"
+			messages={activeMessages()}
+			onUserAction={() => {
+				userScrolledUp = false;
+				autoScrollEnabled = true;
+				scrollChatToBottom();
+			}}
+		/>
+
+		<div
+			class="pointer-events-none sticky right-0 bottom-0 left-0 mt-auto"
+			in:slide={{ duration: 150, axis: 'y' }}
+		>
+			<ChatProcessingInfo />
+
+			<div class="conversation-chat-form pointer-events-auto rounded-t-3xl pb-4">
+				<ChatForm
+					isLoading={isLoading()}
+					onFileRemove={handleFileRemove}
+					onFileUpload={handleFileUpload}
+					onSend={handleSendMessage}
+					onStop={() => stopGeneration()}
+					showHelperText={false}
+					bind:uploadedFiles
+				/>
+			</div>
+		</div>
+	</div>
+{:else if isServerLoading}
+	<!-- Server Loading State -->
+	<ServerLoadingSplash />
+{:else if serverStore.modelName}
+	<div
+		aria-label="Welcome screen with file drop zone"
+		class="flex h-full items-center justify-center"
+		ondragenter={handleDragEnter}
+		ondragleave={handleDragLeave}
+		ondragover={handleDragOver}
+		ondrop={handleDrop}
+		role="main"
+	>
+		<div class="w-full max-w-2xl px-4">
+			<div class="mb-8 text-center" in:fade={{ duration: 300 }}>
+				<h1 class="mb-2 text-3xl font-semibold tracking-tight">llama.cpp</h1>
+
+				<p class="text-lg text-muted-foreground">How can I help you today?</p>
+			</div>
+
+			<div class="mb-6 flex justify-center" in:fly={{ y: 10, duration: 300, delay: 200 }}>
+				<ServerInfo />
+			</div>
+
+			<div in:fly={{ y: 10, duration: 250, delay: 300 }}>
+				<ChatForm
+					isLoading={isLoading()}
+					onFileRemove={handleFileRemove}
+					onFileUpload={handleFileUpload}
+					onSend={handleSendMessage}
+					onStop={() => stopGeneration()}
+					showHelperText={true}
+					bind:uploadedFiles
+				/>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- File Upload Error Alert Dialog -->
+<AlertDialog.Root bind:open={showFileErrorDialog}>
+	<AlertDialog.Portal>
+		<AlertDialog.Overlay />
+
+		<AlertDialog.Content class="max-w-md">
+			<AlertDialog.Header>
+				<AlertDialog.Title>File Upload Error</AlertDialog.Title>
+
+				<AlertDialog.Description class="text-sm text-muted-foreground">
+					Some files cannot be uploaded with the current model.
+				</AlertDialog.Description>
+			</AlertDialog.Header>
+
+			<div class="space-y-4">
+				{#if fileErrorData.generallyUnsupported.length > 0}
+					<div class="space-y-2">
+						<h4 class="text-sm font-medium text-destructive">Unsupported File Types</h4>
+
+						<div class="space-y-1">
+							{#each fileErrorData.generallyUnsupported as file (file.name)}
+								<div class="rounded-md bg-destructive/10 px-3 py-2">
+									<p class="font-mono text-sm break-all text-destructive">
+										{file.name}
+									</p>
+
+									<p class="mt-1 text-xs text-muted-foreground">File type not supported</p>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				{#if fileErrorData.modalityUnsupported.length > 0}
+					<div class="space-y-2">
+						<h4 class="text-sm font-medium text-destructive">Model Compatibility Issues</h4>
+
+						<div class="space-y-1">
+							{#each fileErrorData.modalityUnsupported as file (file.name)}
+								<div class="rounded-md bg-destructive/10 px-3 py-2">
+									<p class="font-mono text-sm break-all text-destructive">
+										{file.name}
+									</p>
+
+									<p class="mt-1 text-xs text-muted-foreground">
+										{fileErrorData.modalityReasons[file.name] || 'Not supported by current model'}
+									</p>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<div class="rounded-md bg-muted/50 p-3">
+					<h4 class="mb-2 text-sm font-medium">This model supports:</h4>
+
+					<p class="text-sm text-muted-foreground">
+						{fileErrorData.supportedTypes.join(', ')}
+					</p>
+				</div>
+			</div>
+
+			<AlertDialog.Footer>
+				<AlertDialog.Action onclick={() => (showFileErrorDialog = false)}>
+					Got it
+				</AlertDialog.Action>
+			</AlertDialog.Footer>
+		</AlertDialog.Content>
+	</AlertDialog.Portal>
+</AlertDialog.Root>
+
+<ConfirmationDialog
+	bind:open={showDeleteDialog}
+	title="Delete Conversation"
+	description="Are you sure you want to delete this conversation? This action cannot be undone and will permanently remove all messages in this conversation."
+	confirmText="Delete"
+	cancelText="Cancel"
+	variant="destructive"
+	icon={Trash2}
+	onConfirm={handleDeleteConfirm}
+	onCancel={() => (showDeleteDialog = false)}
+/>
+
+<EmptyFileAlertDialog
+	bind:open={showEmptyFileDialog}
+	emptyFiles={emptyFileNames}
+	onOpenChange={(open) => {
+		if (!open) {
+			emptyFileNames = [];
+		}
+	}}
+/>
+
+<style>
+	.conversation-chat-form {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: fixed;
+			bottom: 0;
+			z-index: -1;
+			left: 0;
+			right: 0;
+			width: 100%;
+			height: 2.375rem;
+			background-color: var(--background);
+		}
+	}
+</style>

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenDragOverlay.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { Upload } from '@lucide/svelte';
+</script>
+
+<div
+	class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+>
+	<div
+		class="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-border bg-background p-12 shadow-lg"
+	>
+		<Upload class="mb-4 h-12 w-12 text-muted-foreground" />
+
+		<p class="text-lg font-medium text-foreground">Attach a file</p>
+
+		<p class="text-sm text-muted-foreground">Drop your files here to upload</p>
+	</div>
+</div>

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenHeader.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Settings } from '@lucide/svelte';
+	import { ChatSettingsDialog } from '$lib/components/app';
+	import { Button } from '$lib/components/ui/button';
+
+	let settingsOpen = $state(false);
+
+	function toggleSettings() {
+		settingsOpen = true;
+	}
+</script>
+
+<header
+	class="md:background-transparent pointer-events-none fixed top-0 right-0 left-0 z-50 flex items-center justify-end bg-background/40 p-4 backdrop-blur-xl md:left-[var(--sidebar-width)]"
+>
+	<div class="pointer-events-auto flex items-center space-x-2">
+		<Button variant="ghost" size="sm" onclick={toggleSettings}>
+			<Settings class="h-4 w-4" />
+		</Button>
+	</div>
+</header>
+
+<ChatSettingsDialog open={settingsOpen} onOpenChange={(open) => (settingsOpen = open)} />

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsDialog.svelte

@@ -0,0 +1,472 @@
+<script lang="ts">
+	import { Settings, Funnel, AlertTriangle, Brain, Cog, Monitor, Sun, Moon } from '@lucide/svelte';
+	import { ChatSettingsFooter, ChatSettingsSection } from '$lib/components/app';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Input } from '$lib/components/ui/input';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import { ScrollArea } from '$lib/components/ui/scroll-area';
+	import * as Select from '$lib/components/ui/select';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import { SETTING_CONFIG_DEFAULT, SETTING_CONFIG_INFO } from '$lib/constants/settings-config';
+	import { supportsVision } from '$lib/stores/server.svelte';
+	import { config, updateMultipleConfig, resetConfig } from '$lib/stores/settings.svelte';
+	import { setMode } from 'mode-watcher';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		onOpenChange?: (open: boolean) => void;
+		open?: boolean;
+	}
+
+	let { onOpenChange, open = false }: Props = $props();
+
+	const settingSections: Array<{
+		fields: SettingsFieldConfig[];
+		icon: Component;
+		title: string;
+	}> = [
+		{
+			title: 'General',
+			icon: Settings,
+			fields: [
+				{ key: 'apiKey', label: 'API Key', type: 'input' },
+				{
+					key: 'systemMessage',
+					label: 'System Message (will be disabled if left empty)',
+					type: 'textarea'
+				},
+				{
+					key: 'theme',
+					label: 'Theme',
+					type: 'select',
+					options: [
+						{ value: 'system', label: 'System', icon: Monitor },
+						{ value: 'light', label: 'Light', icon: Sun },
+						{ value: 'dark', label: 'Dark', icon: Moon }
+					]
+				},
+				{
+					key: 'showTokensPerSecond',
+					label: 'Show tokens per second',
+					type: 'checkbox'
+				},
+				{
+					key: 'keepStatsVisible',
+					label: 'Keep stats visible after generation',
+					type: 'checkbox'
+				},
+				{
+					key: 'askForTitleConfirmation',
+					label: 'Ask for confirmation before changing conversation title',
+					type: 'checkbox'
+				},
+				{
+					key: 'pasteLongTextToFileLen',
+					label: 'Paste long text to file length',
+					type: 'input'
+				},
+				{
+					key: 'pdfAsImage',
+					label: 'Parse PDF as image',
+					type: 'checkbox'
+				}
+			]
+		},
+		{
+			title: 'Samplers',
+			icon: Funnel,
+			fields: [
+				{
+					key: 'samplers',
+					label: 'Samplers',
+					type: 'input'
+				}
+			]
+		},
+		{
+			title: 'Penalties',
+			icon: AlertTriangle,
+			fields: [
+				{
+					key: 'repeat_last_n',
+					label: 'Repeat last N',
+					type: 'input'
+				},
+				{
+					key: 'repeat_penalty',
+					label: 'Repeat penalty',
+					type: 'input'
+				},
+				{
+					key: 'presence_penalty',
+					label: 'Presence penalty',
+					type: 'input'
+				},
+				{
+					key: 'frequency_penalty',
+					label: 'Frequency penalty',
+					type: 'input'
+				},
+				{
+					key: 'dry_multiplier',
+					label: 'DRY multiplier',
+					type: 'input'
+				},
+				{
+					key: 'dry_base',
+					label: 'DRY base',
+					type: 'input'
+				},
+				{
+					key: 'dry_allowed_length',
+					label: 'DRY allowed length',
+					type: 'input'
+				},
+				{
+					key: 'dry_penalty_last_n',
+					label: 'DRY penalty last N',
+					type: 'input'
+				}
+			]
+		},
+		{
+			title: 'Reasoning',
+			icon: Brain,
+			fields: [
+				{
+					key: 'showThoughtInProgress',
+					label: 'Show thought in progress',
+					type: 'checkbox'
+				}
+			]
+		},
+		{
+			title: 'Advanced',
+			icon: Cog,
+			fields: [
+				{
+					key: 'temperature',
+					label: 'Temperature',
+					type: 'input'
+				},
+				{
+					key: 'dynatemp_range',
+					label: 'Dynamic temperature range',
+					type: 'input'
+				},
+				{
+					key: 'dynatemp_exponent',
+					label: 'Dynamic temperature exponent',
+					type: 'input'
+				},
+				{
+					key: 'top_k',
+					label: 'Top K',
+					type: 'input'
+				},
+				{
+					key: 'top_p',
+					label: 'Top P',
+					type: 'input'
+				},
+				{
+					key: 'min_p',
+					label: 'Min P',
+					type: 'input'
+				},
+				{
+					key: 'xtc_probability',
+					label: 'XTC probability',
+					type: 'input'
+				},
+				{
+					key: 'xtc_threshold',
+					label: 'XTC threshold',
+					type: 'input'
+				},
+				{
+					key: 'typ_p',
+					label: 'Typical P',
+					type: 'input'
+				},
+				{
+					key: 'max_tokens',
+					label: 'Max tokens',
+					type: 'input'
+				},
+				{
+					key: 'custom',
+					label: 'Custom JSON',
+					type: 'textarea'
+				}
+			]
+		}
+		// TODO: Experimental features section will be implemented after initial release
+		// This includes Python interpreter (Pyodide integration) and other experimental features
+		// {
+		// 	title: 'Experimental',
+		// 	icon: Beaker,
+		// 	fields: [
+		// 		{
+		// 			key: 'pyInterpreterEnabled',
+		// 			label: 'Enable Python interpreter',
+		// 			type: 'checkbox'
+		// 		}
+		// 	]
+		// }
+	];
+
+	let activeSection = $state('General');
+	let currentSection = $derived(
+		settingSections.find((section) => section.title === activeSection) || settingSections[0]
+	);
+	let localConfig: SettingsConfigType = $state({ ...config() });
+	let originalTheme: string = $state('');
+
+	function handleThemeChange(newTheme: string) {
+		localConfig.theme = newTheme;
+
+		setMode(newTheme as 'light' | 'dark' | 'system');
+	}
+
+	function handleClose() {
+		if (localConfig.theme !== originalTheme) {
+			setMode(originalTheme as 'light' | 'dark' | 'system');
+		}
+		onOpenChange?.(false);
+	}
+
+	function handleReset() {
+		resetConfig();
+
+		localConfig = { ...SETTING_CONFIG_DEFAULT };
+
+		setMode(SETTING_CONFIG_DEFAULT.theme as 'light' | 'dark' | 'system');
+		originalTheme = SETTING_CONFIG_DEFAULT.theme as string;
+	}
+
+	function handleSave() {
+		// Validate custom JSON if provided
+		if (localConfig.custom && typeof localConfig.custom === 'string' && localConfig.custom.trim()) {
+			try {
+				JSON.parse(localConfig.custom);
+			} catch (error) {
+				alert('Invalid JSON in custom parameters. Please check the format and try again.');
+				console.error(error);
+				return;
+			}
+		}
+
+		// Convert numeric strings to numbers for numeric fields
+		const processedConfig = { ...localConfig };
+		const numericFields = [
+			'temperature',
+			'top_k',
+			'top_p',
+			'min_p',
+			'max_tokens',
+			'pasteLongTextToFileLen',
+			'dynatemp_range',
+			'dynatemp_exponent',
+			'typ_p',
+			'xtc_probability',
+			'xtc_threshold',
+			'repeat_last_n',
+			'repeat_penalty',
+			'presence_penalty',
+			'frequency_penalty',
+			'dry_multiplier',
+			'dry_base',
+			'dry_allowed_length',
+			'dry_penalty_last_n'
+		];
+
+		for (const field of numericFields) {
+			if (processedConfig[field] !== undefined && processedConfig[field] !== '') {
+				const numValue = Number(processedConfig[field]);
+				if (!isNaN(numValue)) {
+					processedConfig[field] = numValue;
+				} else {
+					alert(`Invalid numeric value for ${field}. Please enter a valid number.`);
+					return;
+				}
+			}
+		}
+
+		updateMultipleConfig(processedConfig);
+		onOpenChange?.(false);
+	}
+
+	$effect(() => {
+		if (open) {
+			localConfig = { ...config() };
+			originalTheme = config().theme as string;
+		}
+	});
+</script>
+
+<Dialog.Root {open} onOpenChange={handleClose}>
+	<Dialog.Content class="flex h-[64vh] flex-col gap-0 p-0" style="max-width: 48rem;">
+		<div class="flex flex-1 overflow-hidden">
+			<div class="w-64 border-r border-border/30 p-6">
+				<nav class="space-y-1 py-2">
+					<Dialog.Title class="mb-6 flex items-center gap-2">Settings</Dialog.Title>
+
+					{#each settingSections as section (section.title)}
+						<button
+							class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent {activeSection ===
+							section.title
+								? 'bg-accent text-accent-foreground'
+								: 'text-muted-foreground'}"
+							onclick={() => (activeSection = section.title)}
+						>
+							<section.icon class="h-4 w-4" />
+
+							<span class="ml-2">{section.title}</span>
+						</button>
+					{/each}
+				</nav>
+			</div>
+
+			<ScrollArea class="flex-1">
+				<div class="space-y-6 p-6">
+					<ChatSettingsSection title={currentSection.title} Icon={currentSection.icon}>
+						{#each currentSection.fields as field (field.key)}
+							<div class="space-y-2">
+								{#if field.type === 'input'}
+									<Label for={field.key} class="block text-sm font-medium">
+										{field.label}
+									</Label>
+
+									<Input
+										id={field.key}
+										value={String(localConfig[field.key] || '')}
+										onchange={(e) => (localConfig[field.key] = e.currentTarget.value)}
+										placeholder={`Default: ${SETTING_CONFIG_DEFAULT[field.key] || 'none'}`}
+										class="max-w-md"
+									/>
+									{#if field.help || SETTING_CONFIG_INFO[field.key]}
+										<p class="mt-1 text-xs text-muted-foreground">
+											{field.help || SETTING_CONFIG_INFO[field.key]}
+										</p>
+									{/if}
+								{:else if field.type === 'textarea'}
+									<Label for={field.key} class="block text-sm font-medium">
+										{field.label}
+									</Label>
+
+									<Textarea
+										id={field.key}
+										value={String(localConfig[field.key] || '')}
+										onchange={(e) => (localConfig[field.key] = e.currentTarget.value)}
+										placeholder={`Default: ${SETTING_CONFIG_DEFAULT[field.key] || 'none'}`}
+										class="min-h-[100px] max-w-2xl"
+									/>
+									{#if field.help || SETTING_CONFIG_INFO[field.key]}
+										<p class="mt-1 text-xs text-muted-foreground">
+											{field.help || SETTING_CONFIG_INFO[field.key]}
+										</p>
+									{/if}
+								{:else if field.type === 'select'}
+									{@const selectedOption = field.options?.find(
+										(opt: { value: string; label: string; icon?: Component }) =>
+											opt.value === localConfig[field.key]
+									)}
+
+									<Label for={field.key} class="block text-sm font-medium">
+										{field.label}
+									</Label>
+
+									<Select.Root
+										type="single"
+										value={localConfig[field.key]}
+										onValueChange={(value) => {
+											if (field.key === 'theme' && value) {
+												handleThemeChange(value);
+											} else {
+												localConfig[field.key] = value;
+											}
+										}}
+									>
+										<Select.Trigger class="max-w-md">
+											<div class="flex items-center gap-2">
+												{#if selectedOption?.icon}
+													{@const IconComponent = selectedOption.icon}
+													<IconComponent class="h-4 w-4" />
+												{/if}
+
+												{selectedOption?.label || `Select ${field.label.toLowerCase()}`}
+											</div>
+										</Select.Trigger>
+										<Select.Content>
+											{#if field.options}
+												{#each field.options as option (option.value)}
+													<Select.Item value={option.value} label={option.label}>
+														<div class="flex items-center gap-2">
+															{#if option.icon}
+																{@const IconComponent = option.icon}
+																<IconComponent class="h-4 w-4" />
+															{/if}
+															{option.label}
+														</div>
+													</Select.Item>
+												{/each}
+											{/if}
+										</Select.Content>
+									</Select.Root>
+									{#if field.help || SETTING_CONFIG_INFO[field.key]}
+										<p class="mt-1 text-xs text-muted-foreground">
+											{field.help || SETTING_CONFIG_INFO[field.key]}
+										</p>
+									{/if}
+								{:else if field.type === 'checkbox'}
+									{@const isDisabled = field.key === 'pdfAsImage' && !supportsVision()}
+									<div class="flex items-start space-x-3">
+										<Checkbox
+											id={field.key}
+											checked={Boolean(localConfig[field.key])}
+											disabled={isDisabled}
+											onCheckedChange={(checked) => (localConfig[field.key] = checked)}
+											class="mt-1"
+										/>
+
+										<div class="space-y-1">
+											<label
+												for={field.key}
+												class="cursor-pointer text-sm leading-none font-medium {isDisabled
+													? 'text-muted-foreground'
+													: ''}"
+											>
+												{field.label}
+											</label>
+
+											{#if field.help || SETTING_CONFIG_INFO[field.key]}
+												<p class="text-xs text-muted-foreground">
+													{field.help || SETTING_CONFIG_INFO[field.key]}
+												</p>
+											{:else if field.key === 'pdfAsImage' && !supportsVision()}
+												<p class="text-xs text-muted-foreground">
+													PDF-to-image processing requires a vision-capable model. PDFs will be
+													processed as text.
+												</p>
+											{/if}
+										</div>
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</ChatSettingsSection>
+
+					<div class="mt-8 border-t pt-6">
+						<p class="text-xs text-muted-foreground">
+							Settings are saved in browser's localStorage
+						</p>
+					</div>
+				</div>
+			</ScrollArea>
+		</div>
+
+		<ChatSettingsFooter onClose={handleClose} onReset={handleReset} onSave={handleSave} />
+	</Dialog.Content>
+</Dialog.Root>

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFooter.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		onClose?: () => void;
+		onReset?: () => void;
+		onSave?: () => void;
+	}
+
+	let { onClose, onReset, onSave }: Props = $props();
+
+	function handleClose() {
+		onClose?.();
+	}
+
+	function handleReset() {
+		onReset?.();
+	}
+
+	function handleSave() {
+		onSave?.();
+	}
+</script>
+
+<div class="flex justify-between border-t border-border/30 p-6">
+	<Button variant="outline" onclick={handleReset}>Reset to default</Button>
+
+	<div class="flex gap-2">
+		<Button variant="outline" onclick={handleClose}>Close</Button>
+
+		<Button onclick={handleSave}>Save</Button>
+	</div>
+</div>

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsSection.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		title: string;
+		Icon: Component;
+	}
+
+	let { children, title, Icon }: Props = $props();
+</script>
+
+<div>
+	<div class="mb-6 flex items-center gap-2 border-b border-border/30 pb-6">
+		<Icon class="h-5 w-5" />
+
+		<h3 class="text-lg font-semibold">{title}</h3>
+	</div>
+
+	<div class="space-y-6">
+		{@render children()}
+	</div>
+</div>

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { ChatSidebarConversationItem } from '$lib/components/app';
+	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar';
+	import {
+		conversations,
+		deleteConversation,
+		updateConversationName
+	} from '$lib/stores/chat.svelte';
+	import ChatSidebarActions from './ChatSidebarActions.svelte';
+
+	const sidebar = Sidebar.useSidebar();
+
+	let currentChatId = $derived(page.params.id);
+	let isSearchModeActive = $state(false);
+	let searchQuery = $state('');
+
+	let filteredConversations = $derived.by(() => {
+		if (searchQuery.trim().length > 0) {
+			return conversations().filter((conversation: { name: string }) =>
+				conversation.name.toLowerCase().includes(searchQuery.toLowerCase())
+			);
+		}
+
+		return conversations();
+	});
+
+	async function editConversation(id: string, name: string) {
+		await updateConversationName(id, name);
+	}
+
+	async function handleDeleteConversation(id: string) {
+		await deleteConversation(id);
+	}
+
+	export function handleMobileSidebarItemClick() {
+		if (sidebar.isMobile) {
+			sidebar.toggle();
+		}
+	}
+
+	export function activateSearchMode() {
+		isSearchModeActive = true;
+	}
+
+	export function editActiveConversation() {
+		if (currentChatId) {
+			const activeConversation = filteredConversations.find((conv) => conv.id === currentChatId);
+
+			if (activeConversation) {
+				const event = new CustomEvent('edit-active-conversation', {
+					detail: { conversationId: currentChatId }
+				});
+				document.dispatchEvent(event);
+			}
+		}
+	}
+
+	async function selectConversation(id: string) {
+		if (isSearchModeActive) {
+			isSearchModeActive = false;
+			searchQuery = '';
+		}
+
+		await goto(`/chat/${id}`);
+	}
+</script>
+
+<ScrollArea class="h-[100vh]">
+	<Sidebar.Header class=" top-0 z-10 gap-6 bg-sidebar/50 px-4 pt-4 pb-2 backdrop-blur-lg md:sticky">
+		<a href="/" onclick={handleMobileSidebarItemClick}>
+			<h1 class="inline-flex items-center gap-1 px-2 text-xl font-semibold">llama.cpp</h1>
+		</a>
+
+		<ChatSidebarActions {handleMobileSidebarItemClick} bind:isSearchModeActive bind:searchQuery />
+	</Sidebar.Header>
+
+	<Sidebar.Group class="mt-4 space-y-2 p-0 px-4">
+		{#if (filteredConversations.length > 0 && isSearchModeActive) || !isSearchModeActive}
+			<Sidebar.GroupLabel>
+				{isSearchModeActive ? 'Search results' : 'Conversations'}
+			</Sidebar.GroupLabel>
+		{/if}
+
+		<Sidebar.GroupContent>
+			<Sidebar.Menu>
+				{#each filteredConversations as conversation (conversation.id)}
+					<Sidebar.MenuItem class="mb-1" onclick={handleMobileSidebarItemClick}>
+						<ChatSidebarConversationItem
+							conversation={{
+								id: conversation.id,
+								name: conversation.name,
+								lastModified: conversation.lastModified,
+								currNode: conversation.currNode
+							}}
+							isActive={currentChatId === conversation.id}
+							onSelect={selectConversation}
+							onEdit={editConversation}
+							onDelete={handleDeleteConversation}
+						/>
+					</Sidebar.MenuItem>
+				{/each}
+
+				{#if filteredConversations.length === 0}
+					<div class="px-2 py-4 text-center">
+						<p class="mb-4 p-4 text-sm text-muted-foreground">
+							{searchQuery.length > 0
+								? 'No results found'
+								: isSearchModeActive
+									? 'Start typing to see results'
+									: 'No conversations yet'}
+						</p>
+					</div>
+				{/if}
+			</Sidebar.Menu>
+		</Sidebar.GroupContent>
+	</Sidebar.Group>
+
+	<div class="bottom-0 z-10 bg-sidebar bg-sidebar/50 px-4 py-4 backdrop-blur-lg md:sticky">
+		<p class="text-xs text-muted-foreground">Conversations are stored locally in your browser.</p>
+	</div>
+</ScrollArea>

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarActions.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Search, SquarePen, X } from '@lucide/svelte';
+	import { KeyboardShortcutInfo } from '$lib/components/app';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+
+	interface Props {
+		handleMobileSidebarItemClick: () => void;
+		isSearchModeActive: boolean;
+		searchQuery: string;
+	}
+
+	let {
+		handleMobileSidebarItemClick,
+		isSearchModeActive = $bindable(),
+		searchQuery = $bindable()
+	}: Props = $props();
+
+	let searchInput: HTMLInputElement | null = $state(null);
+
+	function handleSearchModeDeactivate() {
+		isSearchModeActive = false;
+		searchQuery = '';
+	}
+
+	$effect(() => {
+		if (isSearchModeActive) {
+			searchInput?.focus();
+		}
+	});
+</script>
+
+<div class="space-y-0.5">
+	{#if isSearchModeActive}
+		<div class="relative">
+			<Search class="absolute top-2.5 left-2 h-4 w-4 text-muted-foreground" />
+
+			<Input
+				bind:ref={searchInput}
+				bind:value={searchQuery}
+				onkeydown={(e) => e.key === 'Escape' && handleSearchModeDeactivate()}
+				placeholder="Search conversations..."
+				class="pl-8"
+			/>
+
+			<X
+				class="cursor-pointertext-muted-foreground absolute top-2.5 right-2 h-4 w-4"
+				onclick={handleSearchModeDeactivate}
+			/>
+		</div>
+	{:else}
+		<Button
+			class="w-full justify-between hover:[&>kbd]:opacity-100"
+			href="/?new_chat=true"
+			onclick={handleMobileSidebarItemClick}
+			variant="ghost"
+		>
+			<div class="flex items-center gap-2">
+				<SquarePen class="h-4 w-4" />
+				New chat
+			</div>
+
+			<KeyboardShortcutInfo keys={['shift', 'cmd', 'o']} />
+		</Button>
+
+		<Button
+			class="w-full justify-between hover:[&>kbd]:opacity-100"
+			onclick={() => {
+				isSearchModeActive = true;
+			}}
+			variant="ghost"
+		>
+			<div class="flex items-center gap-2">
+				<Search class="h-4 w-4" />
+				Search conversations
+			</div>
+
+			<KeyboardShortcutInfo keys={['cmd', 'k']} />
+		</Button>
+	{/if}
+</div>

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarConversationItem.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import { Trash2, Pencil, MoreHorizontal } from '@lucide/svelte';
+	import { ActionDropdown, ConfirmationDialog } from '$lib/components/app';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import Input from '$lib/components/ui/input/input.svelte';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		isActive?: boolean;
+		conversation: DatabaseConversation;
+		onDelete?: (id: string) => void;
+		onEdit?: (id: string, name: string) => void;
+		onSelect?: (id: string) => void;
+		showLastModified?: boolean;
+	}
+
+	let {
+		conversation,
+		onDelete,
+		onEdit,
+		onSelect,
+		isActive = false,
+		showLastModified = false
+	}: Props = $props();
+
+	let editedName = $state('');
+	let showDeleteDialog = $state(false);
+	let showDropdown = $state(false);
+	let showEditDialog = $state(false);
+
+	function formatLastModified(timestamp: number) {
+		const now = Date.now();
+		const diff = now - timestamp;
+		const minutes = Math.floor(diff / (1000 * 60));
+		const hours = Math.floor(diff / (1000 * 60 * 60));
+		const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+		if (minutes < 1) return 'Just now';
+		if (minutes < 60) return `${minutes}m ago`;
+		if (hours < 24) return `${hours}h ago`;
+		return `${days}d ago`;
+	}
+
+	function handleConfirmDelete() {
+		onDelete?.(conversation.id);
+	}
+
+	function handleConfirmEdit() {
+		if (!editedName.trim()) return;
+		onEdit?.(conversation.id, editedName);
+	}
+
+	function handleEdit(event: Event) {
+		event.stopPropagation();
+		editedName = conversation.name;
+		showEditDialog = true;
+	}
+
+	function handleSelect() {
+		onSelect?.(conversation.id);
+	}
+
+	function handleGlobalEditEvent(event: Event) {
+		const customEvent = event as CustomEvent<{ conversationId: string }>;
+		if (customEvent.detail.conversationId === conversation.id && isActive) {
+			handleEdit(event);
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener('edit-active-conversation', handleGlobalEditEvent as EventListener);
+
+		return () => {
+			document.removeEventListener(
+				'edit-active-conversation',
+				handleGlobalEditEvent as EventListener
+			);
+		};
+	});
+</script>
+
+<button
+	class="group flex w-full cursor-pointer items-center justify-between space-x-3 rounded-lg px-3 py-1.5 text-left transition-colors hover:bg-foreground/10 {isActive
+		? 'bg-foreground/5 text-accent-foreground'
+		: ''}"
+	onclick={handleSelect}
+>
+	<div class="text flex min-w-0 flex-1 items-center space-x-3">
+		<div class="min-w-0 flex-1">
+			<p class="truncate text-sm font-medium">{conversation.name}</p>
+
+			{#if showLastModified}
+				<div class="mt-2 flex flex-wrap items-center space-y-2 space-x-2">
+					<span class="w-full text-xs text-muted-foreground">
+						{formatLastModified(conversation.lastModified)}
+					</span>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<div class="actions flex items-center">
+		<ActionDropdown
+			triggerIcon={MoreHorizontal}
+			triggerTooltip="More actions"
+			bind:open={showDropdown}
+			actions={[
+				{
+					icon: Pencil,
+					label: 'Edit',
+					onclick: handleEdit,
+					shortcut: ['shift', 'cmd', 'e']
+				},
+				{
+					icon: Trash2,
+					label: 'Delete',
+					onclick: (e) => {
+						e.stopPropagation();
+						showDeleteDialog = true;
+					},
+					variant: 'destructive',
+					shortcut: ['shift', 'cmd', 'd'],
+					separator: true
+				}
+			]}
+		/>
+
+		<ConfirmationDialog
+			bind:open={showDeleteDialog}
+			title="Delete Conversation"
+			description={`Are you sure you want to delete "${conversation.name}"? This action cannot be undone and will permanently remove all messages in this conversation.`}
+			confirmText="Delete"
+			cancelText="Cancel"
+			variant="destructive"
+			icon={Trash2}
+			onConfirm={handleConfirmDelete}
+			onCancel={() => (showDeleteDialog = false)}
+		/>
+
+		<AlertDialog.Root bind:open={showEditDialog}>
+			<AlertDialog.Content>
+				<AlertDialog.Header>
+					<AlertDialog.Title>Edit Conversation Name</AlertDialog.Title>
+
+					<AlertDialog.Description>
+						<Input
+							class="mt-4 text-foreground"
+							onkeydown={(e) => {
+								if (e.key === 'Enter') {
+									e.preventDefault();
+									handleConfirmEdit();
+									showEditDialog = false;
+								}
+							}}
+							placeholder="Enter a new name"
+							type="text"
+							bind:value={editedName}
+						/>
+					</AlertDialog.Description>
+				</AlertDialog.Header>
+
+				<AlertDialog.Footer>
+					<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+
+					<AlertDialog.Action onclick={handleConfirmEdit}>Save</AlertDialog.Action>
+				</AlertDialog.Footer>
+			</AlertDialog.Content>
+		</AlertDialog.Root>
+	</div>
+</button>
+
+<style>
+	button {
+		:global([data-slot='dropdown-menu-trigger']:not([data-state='open'])) {
+			opacity: 0;
+		}
+
+		&:is(:hover) :global([data-slot='dropdown-menu-trigger']) {
+			opacity: 1;
+		}
+	}
+</style>

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarSearch.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input';
+	import { Search } from '@lucide/svelte';
+
+	interface Props {
+		value?: string;
+		placeholder?: string;
+		onInput?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Search conversations...',
+		onInput,
+		class: className
+	}: Props = $props();
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+
+		value = target.value;
+		onInput?.(target.value);
+	}
+</script>
+
+<div class="relative mb-4 {className}">
+	<Search
+		class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-muted-foreground"
+	/>
+
+	<Input bind:value class="pl-10" oninput={handleInput} {placeholder} type="search" />
+</div>

tools/server/webui/src/lib/components/app/chat/ChatSidebar/handle-mobile-sidebar-item-click.ts

@@ -0,0 +1,9 @@
+import { useSidebar } from '$lib/components/ui/sidebar';
+
+const sidebar = useSidebar();
+
+export function handleMobileSidebarItemClick() {
+	if (sidebar.isMobile) {
+		sidebar.toggle();
+	}
+}

tools/server/webui/src/lib/components/app/dialogs/ConfirmationDialog.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		description: string;
+		confirmText?: string;
+		cancelText?: string;
+		variant?: 'default' | 'destructive';
+		icon?: Component;
+		onConfirm: () => void;
+		onCancel: () => void;
+		onKeydown?: (event: KeyboardEvent) => void;
+	}
+
+	let {
+		open = $bindable(),
+		title,
+		description,
+		confirmText = 'Confirm',
+		cancelText = 'Cancel',
+		variant = 'default',
+		icon,
+		onConfirm,
+		onCancel,
+		onKeydown
+	}: Props = $props();
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			onConfirm();
+		}
+		onKeydown?.(event);
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			onCancel();
+		}
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content onkeydown={handleKeydown}>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				{#if icon}
+					{@const IconComponent = icon}
+					<IconComponent class="h-5 w-5 {variant === 'destructive' ? 'text-destructive' : ''}" />
+				{/if}
+				{title}
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				{description}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={onCancel}>{cancelText}</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={onConfirm}
+				class={variant === 'destructive' ? 'bg-destructive text-white hover:bg-destructive/80' : ''}
+			>
+				{confirmText}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

tools/server/webui/src/lib/components/app/dialogs/ConversationTitleUpdateDialog.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		open: boolean;
+		currentTitle: string;
+		newTitle: string;
+		onConfirm: () => void;
+		onCancel: () => void;
+	}
+
+	let { open = $bindable(), currentTitle, newTitle, onConfirm, onCancel }: Props = $props();
+</script>
+
+<AlertDialog.Root bind:open>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Update Conversation Title?</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				Do you want to update the conversation title to match the first message content?
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<div class="space-y-4 pt-2 pb-6">
+			<div class="space-y-2">
+				<p class="text-sm font-medium text-muted-foreground">Current title:</p>
+
+				<p class="rounded-md bg-muted/50 p-3 text-sm font-medium">{currentTitle}</p>
+			</div>
+
+			<div class="space-y-2">
+				<p class="text-sm font-medium text-muted-foreground">New title would be:</p>
+
+				<p class="rounded-md bg-muted/50 p-3 text-sm font-medium">{newTitle}</p>
+			</div>
+		</div>
+
+		<AlertDialog.Footer>
+			<Button variant="outline" onclick={onCancel}>Keep Current Title</Button>
+
+			<Button onclick={onConfirm}>Update Title</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

tools/server/webui/src/lib/components/app/dialogs/EmptyFileAlertDialog.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { FileX } from '@lucide/svelte';
+
+	interface Props {
+		open: boolean;
+		emptyFiles: string[];
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), emptyFiles, onOpenChange }: Props = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				<FileX class="h-5 w-5 text-destructive" />
+
+				Empty Files Detected
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				The following files are empty and have been removed from your attachments:
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<div class="space-y-3 text-sm">
+			<div class="rounded-lg bg-muted p-3">
+				<div class="mb-2 font-medium">Empty Files:</div>
+
+				<ul class="list-inside list-disc space-y-1 text-muted-foreground">
+					{#each emptyFiles as fileName (fileName)}
+						<li class="font-mono text-sm">{fileName}</li>
+					{/each}
+				</ul>
+			</div>
+
+			<div>
+				<div class="mb-2 font-medium">What happened:</div>
+
+				<ul class="list-inside list-disc space-y-1 text-muted-foreground">
+					<li>Empty files cannot be processed or sent to the AI model</li>
+
+					<li>These files have been automatically removed from your attachments</li>
+
+					<li>You can try uploading files with content instead</li>
+				</ul>
+			</div>
+		</div>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Action onclick={() => handleOpenChange(false)}>Got it</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

tools/server/webui/src/lib/components/app/dialogs/MaximumContextAlertDialog.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { AlertTriangle } from '@lucide/svelte';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { maxContextError, clearMaxContextError } from '$lib/stores/chat.svelte';
+</script>
+
+<AlertDialog.Root
+	open={maxContextError() !== null}
+	onOpenChange={(open) => !open && clearMaxContextError()}
+>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				<AlertTriangle class="h-5 w-5 text-destructive" />
+
+				Message Too Long
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				Your message exceeds the model's context window and cannot be processed.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		{#if maxContextError()}
+			<div class="space-y-3 text-sm">
+				<div class="rounded-lg bg-muted p-3">
+					<div class="mb-2 font-medium">Token Usage:</div>
+
+					<div class="space-y-1 text-muted-foreground">
+						<div>
+							Estimated tokens:
+
+							<span class="font-mono">
+								{maxContextError()?.estimatedTokens.toLocaleString()}
+							</span>
+						</div>
+
+						<div>
+							Context window:
+
+							<span class="font-mono">
+								{maxContextError()?.maxContext.toLocaleString()}
+							</span>
+						</div>
+					</div>
+				</div>
+
+				<div>
+					<div class="mb-2 font-medium">Suggestions:</div>
+
+					<ul class="list-inside list-disc space-y-1 text-muted-foreground">
+						<li>Shorten your message</li>
+
+						<li>Remove some file attachments</li>
+
+						<li>Start a new conversation</li>
+					</ul>
+				</div>
+			</div>
+		{/if}
+
+		<AlertDialog.Footer>
+			<AlertDialog.Action onclick={() => clearMaxContextError()}>Got it</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

tools/server/webui/src/lib/components/app/index.ts

@@ -0,0 +1,50 @@
+export { default as ChatAttachmentsList } from './chat/ChatAttachments/ChatAttachmentsList.svelte';
+export { default as ChatAttachmentFilePreview } from './chat/ChatAttachments/ChatAttachmentFilePreview.svelte';
+export { default as ChatAttachmentImagePreview } from './chat/ChatAttachments/ChatAttachmentImagePreview.svelte';
+export { default as ChatAttachmentPreviewDialog } from './chat/ChatAttachments/ChatAttachmentPreviewDialog.svelte';
+
+export { default as ChatForm } from './chat/ChatForm/ChatForm.svelte';
+export { default as ChatFormTextarea } from './chat/ChatForm/ChatFormTextarea.svelte';
+export { default as ChatFormActions } from './chat/ChatForm/ChatFormActions.svelte';
+export { default as ChatFormActionFileAttachments } from './chat/ChatForm/ChatFormActionFileAttachments.svelte';
+export { default as ChatFormActionRecord } from './chat/ChatForm/ChatFormActionRecord.svelte';
+export { default as ChatFormHelperText } from './chat/ChatForm/ChatFormHelperText.svelte';
+export { default as ChatFormFileInputInvisible } from './chat/ChatForm/ChatFormFileInputInvisible.svelte';
+
+export { default as ChatMessage } from './chat/ChatMessages/ChatMessage.svelte';
+export { default as ChatMessages } from './chat/ChatMessages/ChatMessages.svelte';
+export { default as ChatMessageThinkingBlock } from './chat/ChatMessages/ChatMessageThinkingBlock.svelte';
+export { default as MessageBranchingControls } from './chat/ChatMessages/ChatMessageBranchingControls.svelte';
+
+export { default as ChatProcessingInfo } from './chat/ChatProcessingInfo.svelte';
+
+export { default as ChatScreenHeader } from './chat/ChatScreen/ChatScreenHeader.svelte';
+export { default as ChatScreen } from './chat/ChatScreen/ChatScreen.svelte';
+
+export { default as ChatSettingsDialog } from './chat/ChatSettings/ChatSettingsDialog.svelte';
+export { default as ChatSettingsSection } from './chat/ChatSettings/ChatSettingsSection.svelte';
+export { default as ChatSettingsFooter } from './chat/ChatSettings/ChatSettingsFooter.svelte';
+
+export { default as ChatSidebar } from './chat/ChatSidebar/ChatSidebar.svelte';
+export { default as ChatSidebarConversationItem } from './chat/ChatSidebar/ChatSidebarConversationItem.svelte';
+export { default as ChatSidebarSearch } from './chat/ChatSidebar/ChatSidebarSearch.svelte';
+
+export { default as EmptyFileAlertDialog } from './dialogs/EmptyFileAlertDialog.svelte';
+
+export { default as ConversationTitleUpdateDialog } from './dialogs/ConversationTitleUpdateDialog.svelte';
+
+export { default as MaximumContextAlertDialog } from './dialogs/MaximumContextAlertDialog.svelte';
+
+export { default as KeyboardShortcutInfo } from './misc/KeyboardShortcutInfo.svelte';
+
+export { default as MarkdownContent } from './misc/MarkdownContent.svelte';
+
+export { default as ServerStatus } from './server/ServerStatus.svelte';
+export { default as ServerErrorSplash } from './server/ServerErrorSplash.svelte';
+export { default as ServerLoadingSplash } from './server/ServerLoadingSplash.svelte';
+export { default as ServerInfo } from './server/ServerInfo.svelte';
+
+// Shared components
+export { default as ActionButton } from './misc/ActionButton.svelte';
+export { default as ActionDropdown } from './misc/ActionDropdown.svelte';
+export { default as ConfirmationDialog } from './dialogs/ConfirmationDialog.svelte';

tools/server/webui/src/lib/components/app/misc/ActionButton.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		icon: Component;
+		tooltip: string;
+		variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+		size?: 'default' | 'sm' | 'lg' | 'icon';
+		class?: string;
+		disabled?: boolean;
+		onclick: () => void;
+		'aria-label'?: string;
+	}
+
+	let {
+		icon,
+		tooltip,
+		variant = 'ghost',
+		size = 'sm',
+		class: className = '',
+		disabled = false,
+		onclick,
+		'aria-label': ariaLabel
+	}: Props = $props();
+</script>
+
+<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+	<Tooltip.Trigger>
+		<Button
+			{variant}
+			{size}
+			{disabled}
+			{onclick}
+			class="h-6 w-6 p-0 {className}"
+			aria-label={ariaLabel || tooltip}
+		>
+			{@const IconComponent = icon}
+			<IconComponent class="h-3 w-3" />
+		</Button>
+	</Tooltip.Trigger>
+
+	<Tooltip.Content>
+		<p>{tooltip}</p>
+	</Tooltip.Content>
+</Tooltip.Root>

tools/server/webui/src/lib/components/app/misc/ActionDropdown.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { KeyboardShortcutInfo } from '$lib/components/app';
+	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
+	import type { Component } from 'svelte';
+
+	interface ActionItem {
+		icon: Component;
+		label: string;
+		onclick: (event: Event) => void;
+		variant?: 'default' | 'destructive';
+		disabled?: boolean;
+		shortcut?: string[];
+		separator?: boolean;
+	}
+
+	interface Props {
+		triggerIcon: Component;
+		triggerTooltip?: string;
+		triggerClass?: string;
+		actions: ActionItem[];
+		align?: 'start' | 'center' | 'end';
+		open?: boolean;
+	}
+
+	let {
+		triggerIcon,
+		triggerTooltip,
+		triggerClass = '',
+		actions,
+		align = 'end',
+		open = $bindable(false)
+	}: Props = $props();
+</script>
+
+<DropdownMenu.Root bind:open>
+	<DropdownMenu.Trigger
+		class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground {triggerClass}"
+	>
+		{#if triggerTooltip}
+			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+				<Tooltip.Trigger>
+					{@render iconComponent(triggerIcon, 'h-3 w-3')}
+					<span class="sr-only">{triggerTooltip}</span>
+				</Tooltip.Trigger>
+				<Tooltip.Content>
+					<p>{triggerTooltip}</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		{:else}
+			{@render iconComponent(triggerIcon, 'h-3 w-3')}
+		{/if}
+	</DropdownMenu.Trigger>
+
+	<DropdownMenu.Content {align} class="z-999 w-48">
+		{#each actions as action, index (action.label)}
+			{#if action.separator && index > 0}
+				<DropdownMenu.Separator />
+			{/if}
+
+			<DropdownMenu.Item
+				onclick={action.onclick}
+				variant={action.variant}
+				disabled={action.disabled}
+				class="flex items-center justify-between hover:[&>kbd]:opacity-100"
+			>
+				<div class="flex items-center gap-2">
+					{@render iconComponent(
+						action.icon,
+						`h-4 w-4 ${action.variant === 'destructive' ? 'text-destructive' : ''}`
+					)}
+					{action.label}
+				</div>
+
+				{#if action.shortcut}
+					<KeyboardShortcutInfo keys={action.shortcut} variant={action.variant} />
+				{/if}
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+{#snippet iconComponent(IconComponent: Component, className: string)}
+	<IconComponent class={className} />
+{/snippet}

tools/server/webui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ArrowBigUp } from '@lucide/svelte';
+
+	interface Props {
+		keys: string[];
+		variant?: 'default' | 'destructive';
+		class?: string;
+	}
+
+	let { keys, variant = 'default', class: className = '' }: Props = $props();
+
+	let baseClasses =
+		'px-1 pointer-events-none inline-flex select-none items-center gap-0.5 font-sans text-md font-medium opacity-0 transition-opacity -my-1';
+	let variantClasses = variant === 'destructive' ? 'text-destructive' : 'text-muted-foreground';
+</script>
+
+<kbd class="{baseClasses} {variantClasses} {className}">
+	{#each keys as key, index (index)}
+		{#if key === 'shift'}
+			<ArrowBigUp class="h-1 w-1 {variant === 'destructive' ? 'text-destructive' : ''} -mr-1" />
+		{:else if key === 'cmd'}
+			<span class={variant === 'destructive' ? 'text-destructive' : ''}>⌘</span>
+		{:else}
+			{key.toUpperCase()}
+		{/if}
+
+		{#if index < keys.length - 1}
+			<span> </span>
+		{/if}
+	{/each}
+</kbd>

tools/server/webui/src/lib/components/app/misc/MarkdownContent.svelte

@@ -0,0 +1,625 @@
+<script lang="ts">
+	import { remark } from 'remark';
+	import remarkBreaks from 'remark-breaks';
+	import remarkGfm from 'remark-gfm';
+	import remarkMath from 'remark-math';
+	import rehypeHighlight from 'rehype-highlight';
+	import remarkRehype from 'remark-rehype';
+	import rehypeKatex from 'rehype-katex';
+	import rehypeStringify from 'rehype-stringify';
+	import { copyCodeToClipboard } from '$lib/utils/copy';
+	import 'highlight.js/styles/github-dark.css';
+	import 'katex/dist/katex.min.css';
+
+	interface Props {
+		content: string;
+		class?: string;
+	}
+
+	let { content, class: className = '' }: Props = $props();
+
+	let containerRef = $state<HTMLDivElement>();
+	let processedHtml = $state('');
+
+	let processor = $derived(() => {
+		return remark()
+			.use(remarkGfm) // GitHub Flavored Markdown
+			.use(remarkMath) // Parse $inline$ and $$block$$ math
+			.use(remarkBreaks) // Convert line breaks to <br>
+			.use(remarkRehype) // Convert to rehype (HTML AST)
+			.use(rehypeKatex) // Render math using KaTeX
+			.use(rehypeHighlight) // Add syntax highlighting
+			.use(rehypeStringify); // Convert to HTML string
+	});
+
+	function enhanceLinks(html: string): string {
+		const tempDiv = document.createElement('div');
+		tempDiv.innerHTML = html;
+
+		// Make all links open in new tabs
+		const linkElements = tempDiv.querySelectorAll('a[href]');
+		for (const link of linkElements) {
+			link.setAttribute('target', '_blank');
+			link.setAttribute('rel', 'noopener noreferrer');
+		}
+
+		return tempDiv.innerHTML;
+	}
+
+	function enhanceCodeBlocks(html: string): string {
+		const tempDiv = document.createElement('div');
+		tempDiv.innerHTML = html;
+
+		const preElements = tempDiv.querySelectorAll('pre');
+
+		for (const [index, pre] of Array.from(preElements).entries()) {
+			const codeElement = pre.querySelector('code');
+
+			if (!codeElement) continue;
+
+			let language = 'text';
+			const classList = Array.from(codeElement.classList);
+
+			for (const className of classList) {
+				if (className.startsWith('language-')) {
+					language = className.replace('language-', '');
+					break;
+				}
+			}
+
+			const rawCode = codeElement.textContent || '';
+			const codeId = `code-${Date.now()}-${index}`;
+
+			codeElement.setAttribute('data-code-id', codeId);
+			codeElement.setAttribute('data-raw-code', rawCode);
+
+			const wrapper = document.createElement('div');
+			wrapper.className = 'code-block-wrapper';
+
+			const header = document.createElement('div');
+			header.className = 'code-block-header';
+
+			const languageLabel = document.createElement('span');
+			languageLabel.className = 'code-language';
+			languageLabel.textContent = language;
+
+			const copyButton = document.createElement('button');
+			copyButton.className = 'copy-code-btn';
+			copyButton.setAttribute('data-code-id', codeId);
+			copyButton.setAttribute('title', 'Copy code');
+			copyButton.setAttribute('type', 'button');
+
+			copyButton.innerHTML = `
+				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+			`;
+
+			header.appendChild(languageLabel);
+			header.appendChild(copyButton);
+			wrapper.appendChild(header);
+
+			const clonedPre = pre.cloneNode(true) as HTMLElement;
+			wrapper.appendChild(clonedPre);
+
+			pre.parentNode?.replaceChild(wrapper, pre);
+		}
+
+		return tempDiv.innerHTML;
+	}
+
+	async function processMarkdown(text: string): Promise<string> {
+		try {
+			const result = await processor().process(text);
+			const html = String(result);
+			const enhancedLinks = enhanceLinks(html);
+
+			return enhanceCodeBlocks(enhancedLinks);
+		} catch (error) {
+			console.error('Markdown processing error:', error);
+
+			// Fallback to plain text with line breaks
+			return text.replace(/\n/g, '<br>');
+		}
+	}
+
+	function setupCopyButtons() {
+		if (!containerRef) return;
+
+		const copyButtons = containerRef.querySelectorAll('.copy-code-btn');
+
+		for (const button of copyButtons) {
+			button.addEventListener('click', async (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+
+				const target = e.currentTarget as HTMLButtonElement;
+				const codeId = target.getAttribute('data-code-id');
+
+				if (!codeId) {
+					console.error('No code ID found on button');
+					return;
+				}
+
+				// Find the code element within the same wrapper
+				const wrapper = target.closest('.code-block-wrapper');
+				if (!wrapper) {
+					console.error('No wrapper found');
+					return;
+				}
+
+				const codeElement = wrapper.querySelector('code[data-code-id]');
+				if (!codeElement) {
+					console.error('No code element found in wrapper');
+					return;
+				}
+
+				const rawCode = codeElement.getAttribute('data-raw-code');
+				if (!rawCode) {
+					console.error('No raw code found');
+					return;
+				}
+
+				try {
+					await copyCodeToClipboard(rawCode);
+				} catch (error) {
+					console.error('Failed to copy code:', error);
+				}
+			});
+		}
+	}
+
+	$effect(() => {
+		if (content) {
+			processMarkdown(content)
+				.then((result) => {
+					processedHtml = result;
+				})
+				.catch((error) => {
+					console.error('Failed to process markdown:', error);
+					processedHtml = content.replace(/\n/g, '<br>');
+				});
+		} else {
+			processedHtml = '';
+		}
+	});
+
+	$effect(() => {
+		if (containerRef && processedHtml) {
+			setupCopyButtons();
+		}
+	});
+</script>
+
+<div bind:this={containerRef} class={className}>
+	<!-- eslint-disable-next-line no-at-html-tags -->
+	{@html processedHtml}
+</div>
+
+<style>
+	/* Base typography styles */
+	div :global(p) {
+		margin-bottom: 1rem;
+		line-height: 1.75;
+	}
+
+	/* Headers with consistent spacing */
+	div :global(h1) {
+		font-size: 1.875rem;
+		font-weight: 700;
+		margin: 1.5rem 0 0.75rem 0;
+		line-height: 1.2;
+	}
+
+	div :global(h2) {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: 1.25rem 0 0.5rem 0;
+		line-height: 1.3;
+	}
+
+	div :global(h3) {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin: 1.5rem 0 0.5rem 0;
+		line-height: 1.4;
+	}
+
+	div :global(h4) {
+		font-size: 1.125rem;
+		font-weight: 600;
+		margin: 0.75rem 0 0.25rem 0;
+	}
+
+	div :global(h5) {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0.5rem 0 0.25rem 0;
+	}
+
+	div :global(h6) {
+		font-size: 0.875rem;
+		font-weight: 600;
+		margin: 0.5rem 0 0.25rem 0;
+	}
+
+	/* Text formatting */
+	div :global(strong) {
+		font-weight: 600;
+	}
+
+	div :global(em) {
+		font-style: italic;
+	}
+
+	div :global(del) {
+		text-decoration: line-through;
+		opacity: 0.7;
+	}
+
+	/* Inline code */
+	div :global(code:not(pre code)) {
+		background: var(--muted);
+		color: var(--muted-foreground);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.375rem;
+		font-size: 0.875rem;
+		font-family:
+			ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+			'Liberation Mono', Menlo, monospace;
+	}
+
+	/* Links */
+	div :global(a) {
+		color: var(--primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+		transition: color 0.2s ease;
+	}
+
+	div :global(a:hover) {
+		color: var(--primary);
+	}
+
+	/* Lists */
+	div :global(ul) {
+		list-style-type: disc;
+		margin-left: 1.5rem;
+		margin-bottom: 1rem;
+	}
+
+	div :global(ol) {
+		list-style-type: decimal;
+		margin-left: 1.5rem;
+		margin-bottom: 1rem;
+	}
+
+	div :global(li) {
+		margin-bottom: 0.25rem;
+		padding-left: 0.5rem;
+	}
+
+	div :global(li::marker) {
+		color: var(--muted-foreground);
+	}
+
+	/* Nested lists */
+	div :global(ul ul) {
+		list-style-type: circle;
+		margin-top: 0.25rem;
+		margin-bottom: 0.25rem;
+	}
+
+	div :global(ol ol) {
+		list-style-type: lower-alpha;
+		margin-top: 0.25rem;
+		margin-bottom: 0.25rem;
+	}
+
+	/* Task lists */
+	div :global(.task-list-item) {
+		list-style: none;
+		margin-left: 0;
+		padding-left: 0;
+	}
+
+	div :global(.task-list-item-checkbox) {
+		margin-right: 0.5rem;
+		margin-top: 0.125rem;
+	}
+
+	/* Blockquotes */
+	div :global(blockquote) {
+		border-left: 4px solid var(--border);
+		padding: 0.5rem 1rem;
+		margin: 1.5rem 0;
+		font-style: italic;
+		color: var(--muted-foreground);
+		background: var(--muted);
+		border-radius: 0 0.375rem 0.375rem 0;
+	}
+
+	/* Tables */
+	div :global(table) {
+		width: 100%;
+		margin: 1.5rem 0;
+		border-collapse: collapse;
+		border: 1px solid var(--border);
+		border-radius: 0.375rem;
+		overflow: hidden;
+	}
+
+	div :global(th) {
+		background: hsl(var(--muted) / 0.3);
+		border: 1px solid var(--border);
+		padding: 0.5rem 0.75rem;
+		text-align: left;
+		font-weight: 600;
+	}
+
+	div :global(td) {
+		border: 1px solid var(--border);
+		padding: 0.5rem 0.75rem;
+	}
+
+	div :global(tr:nth-child(even)) {
+		background: hsl(var(--muted) / 0.1);
+	}
+
+	/* Horizontal rules */
+	div :global(hr) {
+		border: none;
+		border-top: 1px solid var(--border);
+		margin: 1.5rem 0;
+	}
+
+	/* Images */
+	div :global(img) {
+		border-radius: 0.5rem;
+		box-shadow:
+			0 1px 3px 0 rgb(0 0 0 / 0.1),
+			0 1px 2px -1px rgb(0 0 0 / 0.1);
+		margin: 1.5rem 0;
+		max-width: 100%;
+		height: auto;
+	}
+
+	/* Code blocks */
+
+	div :global(.code-block-wrapper) {
+		margin: 1.5rem 0;
+		border-radius: 0.75rem;
+		overflow: hidden;
+		border: 1px solid var(--border);
+		background: var(--code-background);
+	}
+
+	div :global(.code-block-header) {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.5rem 1rem;
+		background: hsl(var(--muted) / 0.5);
+		border-bottom: 1px solid var(--border);
+		font-size: 0.875rem;
+	}
+
+	div :global(.code-language) {
+		color: var(--code-foreground);
+		font-weight: 500;
+		font-family:
+			ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+			'Liberation Mono', Menlo, monospace;
+		text-transform: uppercase;
+		font-size: 0.75rem;
+		letter-spacing: 0.05em;
+	}
+
+	div :global(.copy-code-btn) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		background: transparent;
+		color: var(--code-foreground);
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	div :global(.copy-code-btn:hover) {
+		transform: scale(1.05);
+	}
+
+	div :global(.copy-code-btn:active) {
+		transform: scale(0.95);
+	}
+
+	div :global(.code-block-wrapper pre) {
+		background: transparent;
+		padding: 1rem;
+		margin: 0;
+		overflow-x: auto;
+		border-radius: 0;
+		border: none;
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+
+	div :global(pre) {
+		background: var(--muted);
+		margin: 1.5rem 0;
+		overflow-x: auto;
+		border-radius: 1rem;
+		border: none;
+	}
+
+	div :global(code) {
+		background: transparent;
+		color: var(--code-foreground);
+	}
+
+	/* Mentions and hashtags */
+	div :global(.mention) {
+		color: hsl(var(--primary));
+		font-weight: 500;
+		text-decoration: none;
+	}
+
+	div :global(.mention:hover) {
+		text-decoration: underline;
+	}
+
+	div :global(.hashtag) {
+		color: hsl(var(--primary));
+		font-weight: 500;
+		text-decoration: none;
+	}
+
+	div :global(.hashtag:hover) {
+		text-decoration: underline;
+	}
+
+	/* Advanced table enhancements */
+	div :global(table) {
+		transition: all 0.2s ease;
+	}
+
+	div :global(table:hover) {
+		box-shadow:
+			0 4px 6px -1px rgb(0 0 0 / 0.1),
+			0 2px 4px -2px rgb(0 0 0 / 0.1);
+	}
+
+	div :global(th:hover),
+	div :global(td:hover) {
+		background: var(--muted);
+	}
+
+	/* Enhanced blockquotes */
+	div :global(blockquote) {
+		transition: all 0.2s ease;
+		position: relative;
+	}
+
+	div :global(blockquote:hover) {
+		border-left-width: 6px;
+		background: var(--muted);
+		transform: translateX(2px);
+	}
+
+	div :global(blockquote::before) {
+		content: '"';
+		position: absolute;
+		top: -0.5rem;
+		left: 0.5rem;
+		font-size: 3rem;
+		color: var(--muted-foreground);
+		font-family: serif;
+		line-height: 1;
+	}
+
+	/* Enhanced images */
+	div :global(img) {
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+
+	div :global(img:hover) {
+		transform: scale(1.02);
+		box-shadow:
+			0 10px 15px -3px rgb(0 0 0 / 0.1),
+			0 4px 6px -4px rgb(0 0 0 / 0.1);
+	}
+
+	/* Image zoom overlay */
+	div :global(.image-zoom-overlay) {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.8);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1000;
+		cursor: pointer;
+	}
+
+	div :global(.image-zoom-overlay img) {
+		max-width: 90vw;
+		max-height: 90vh;
+		border-radius: 0.5rem;
+		box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+	}
+
+	/* Enhanced horizontal rules */
+	div :global(hr) {
+		border: none;
+		height: 2px;
+		background: linear-gradient(to right, transparent, var(--border), transparent);
+		margin: 2rem 0;
+		position: relative;
+	}
+
+	div :global(hr::after) {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 1rem;
+		height: 1rem;
+		background: var(--border);
+		border-radius: 50%;
+	}
+
+	/* Scrollable tables */
+	div :global(.table-wrapper) {
+		overflow-x: auto;
+		margin: 1.5rem 0;
+		border-radius: 0.5rem;
+		border: 1px solid var(--border);
+	}
+
+	div :global(.table-wrapper table) {
+		margin: 0;
+		border: none;
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 640px) {
+		div :global(h1) {
+			font-size: 1.5rem;
+		}
+
+		div :global(h2) {
+			font-size: 1.25rem;
+		}
+
+		div :global(h3) {
+			font-size: 1.125rem;
+		}
+
+		div :global(table) {
+			font-size: 0.875rem;
+		}
+
+		div :global(th),
+		div :global(td) {
+			padding: 0.375rem 0.5rem;
+		}
+
+		div :global(.table-wrapper) {
+			margin: 0.5rem -1rem;
+			border-radius: 0;
+			border-left: none;
+			border-right: none;
+		}
+	}
+
+	/* Dark mode adjustments */
+	@media (prefers-color-scheme: dark) {
+		div :global(blockquote:hover) {
+			background: var(--muted);
+		}
+	}
+</style>

tools/server/webui/src/lib/components/app/server/ServerErrorSplash.svelte

@@ -0,0 +1,281 @@
+<script lang="ts">
+	import { AlertTriangle, RefreshCw, Key, CheckCircle, XCircle } from '@lucide/svelte';
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import { serverStore, serverLoading } from '$lib/stores/server.svelte';
+	import { config, updateConfig } from '$lib/stores/settings.svelte';
+	import { fade, fly, scale } from 'svelte/transition';
+
+	interface Props {
+		class?: string;
+		error: string;
+		onRetry?: () => void;
+		showRetry?: boolean;
+		showTroubleshooting?: boolean;
+	}
+
+	let {
+		class: className = '',
+		error,
+		onRetry,
+		showRetry = true,
+		showTroubleshooting = false
+	}: Props = $props();
+
+	let isServerLoading = $derived(serverLoading());
+	let isAccessDeniedError = $derived(
+		error.toLowerCase().includes('access denied') ||
+			error.toLowerCase().includes('invalid api key') ||
+			error.toLowerCase().includes('unauthorized') ||
+			error.toLowerCase().includes('401') ||
+			error.toLowerCase().includes('403')
+	);
+
+	let apiKeyInput = $state('');
+	let showApiKeyInput = $state(false);
+	let apiKeyState = $state<'idle' | 'validating' | 'success' | 'error'>('idle');
+	let apiKeyError = $state('');
+
+	function handleRetryConnection() {
+		if (onRetry) {
+			onRetry();
+		} else {
+			serverStore.fetchServerProps();
+		}
+	}
+
+	function handleShowApiKeyInput() {
+		showApiKeyInput = true;
+		// Pre-fill with current API key if it exists
+		const currentConfig = config();
+		apiKeyInput = currentConfig.apiKey?.toString() || '';
+	}
+
+	async function handleSaveApiKey() {
+		if (!apiKeyInput.trim()) return;
+
+		apiKeyState = 'validating';
+		apiKeyError = '';
+
+		try {
+			// Update the API key in settings first
+			updateConfig('apiKey', apiKeyInput.trim());
+
+			// Test the API key by making a real request to the server
+			const response = await fetch('/props', {
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${apiKeyInput.trim()}`
+				}
+			});
+
+			if (response.ok) {
+				// API key is valid - User Story B
+				apiKeyState = 'success';
+
+				// Show success state briefly, then navigate to home
+				setTimeout(() => {
+					goto('/');
+				}, 1000);
+			} else {
+				// API key is invalid - User Story A
+				apiKeyState = 'error';
+
+				if (response.status === 401 || response.status === 403) {
+					apiKeyError = 'Invalid API key - please check and try again';
+				} else {
+					apiKeyError = `Authentication failed (${response.status})`;
+				}
+
+				// Reset to idle state after showing error (don't reload UI)
+				setTimeout(() => {
+					apiKeyState = 'idle';
+				}, 3000);
+			}
+		} catch (error) {
+			// Network or other errors - User Story A
+			apiKeyState = 'error';
+
+			if (error instanceof Error) {
+				if (error.message.includes('fetch')) {
+					apiKeyError = 'Cannot connect to server - check if server is running';
+				} else {
+					apiKeyError = error.message;
+				}
+			} else {
+				apiKeyError = 'Connection error - please try again';
+			}
+
+			// Reset to idle state after showing error (don't reload UI)
+			setTimeout(() => {
+				apiKeyState = 'idle';
+			}, 3000);
+		}
+	}
+
+	function handleApiKeyKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			handleSaveApiKey();
+		}
+	}
+</script>
+
+<div class="flex h-full items-center justify-center {className}">
+	<div class="w-full max-w-md px-4 text-center">
+		<div class="mb-6" in:fade={{ duration: 300 }}>
+			<div
+				class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10"
+			>
+				<AlertTriangle class="h-8 w-8 text-destructive" />
+			</div>
+
+			<h2 class="mb-2 text-xl font-semibold">Server Connection Error</h2>
+
+			<p class="mb-4 text-sm text-muted-foreground">
+				{error}
+			</p>
+		</div>
+
+		{#if isAccessDeniedError && !showApiKeyInput}
+			<div in:fly={{ y: 10, duration: 300, delay: 200 }} class="mb-4">
+				<Button onclick={handleShowApiKeyInput} variant="outline" class="w-full">
+					<Key class="h-4 w-4" />
+					Enter API Key
+				</Button>
+			</div>
+		{/if}
+
+		{#if showApiKeyInput}
+			<div in:fly={{ y: 10, duration: 300, delay: 200 }} class="mb-4 space-y-3 text-left">
+				<div class="space-y-2">
+					<Label for="api-key-input" class="text-sm font-medium">API Key</Label>
+
+					<div class="relative">
+						<Input
+							id="api-key-input"
+							placeholder="Enter your API key..."
+							bind:value={apiKeyInput}
+							onkeydown={handleApiKeyKeydown}
+							class="w-full pr-10 {apiKeyState === 'error'
+								? 'border-destructive'
+								: apiKeyState === 'success'
+									? 'border-green-500'
+									: ''}"
+							disabled={apiKeyState === 'validating'}
+						/>
+						{#if apiKeyState === 'validating'}
+							<div class="absolute top-1/2 right-3 -translate-y-1/2">
+								<RefreshCw class="h-4 w-4 animate-spin text-muted-foreground" />
+							</div>
+						{:else if apiKeyState === 'success'}
+							<div
+								class="absolute top-1/2 right-3 -translate-y-1/2"
+								in:scale={{ duration: 200, start: 0.8 }}
+							>
+								<CheckCircle class="h-4 w-4 text-green-500" />
+							</div>
+						{:else if apiKeyState === 'error'}
+							<div
+								class="absolute top-1/2 right-3 -translate-y-1/2"
+								in:scale={{ duration: 200, start: 0.8 }}
+							>
+								<XCircle class="h-4 w-4 text-destructive" />
+							</div>
+						{/if}
+					</div>
+					{#if apiKeyError}
+						<p class="text-sm text-destructive" in:fly={{ y: -10, duration: 200 }}>
+							{apiKeyError}
+						</p>
+					{/if}
+					{#if apiKeyState === 'success'}
+						<p class="text-sm text-green-600" in:fly={{ y: -10, duration: 200 }}>
+							✓ API key validated successfully! Connecting...
+						</p>
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<Button
+						onclick={handleSaveApiKey}
+						disabled={!apiKeyInput.trim() ||
+							apiKeyState === 'validating' ||
+							apiKeyState === 'success'}
+						class="flex-1"
+					>
+						{#if apiKeyState === 'validating'}
+							<RefreshCw class="h-4 w-4 animate-spin" />
+							Validating...
+						{:else if apiKeyState === 'success'}
+							Success!
+						{:else}
+							Save & Retry
+						{/if}
+					</Button>
+					<Button
+						onclick={() => {
+							showApiKeyInput = false;
+							apiKeyState = 'idle';
+							apiKeyError = '';
+						}}
+						variant="outline"
+						class="flex-1"
+						disabled={apiKeyState === 'validating'}
+					>
+						Cancel
+					</Button>
+				</div>
+			</div>
+		{/if}
+
+		{#if showRetry}
+			<div in:fly={{ y: 10, duration: 300, delay: 200 }}>
+				<Button onclick={handleRetryConnection} disabled={isServerLoading} class="w-full">
+					{#if isServerLoading}
+						<RefreshCw class="h-4 w-4 animate-spin" />
+
+						Connecting...
+					{:else}
+						<RefreshCw class="h-4 w-4" />
+
+						Retry Connection
+					{/if}
+				</Button>
+			</div>
+		{/if}
+
+		{#if showTroubleshooting}
+			<div class="mt-4 text-left" in:fly={{ y: 10, duration: 300, delay: 400 }}>
+				<details class="text-sm">
+					<summary class="cursor-pointer text-muted-foreground hover:text-foreground">
+						Troubleshooting
+					</summary>
+
+					<div class="mt-2 space-y-3 text-xs text-muted-foreground">
+						<div class="space-y-2">
+							<p class="mb-4 font-medium">Start the llama-server:</p>
+
+							<div class="rounded bg-muted/50 px-2 py-1 font-mono text-xs">
+								<p>llama-server -hf ggml-org/gemma-3-4b-it-GGUF</p>
+							</div>
+
+							<p>or</p>
+
+							<div class="rounded bg-muted/50 px-2 py-1 font-mono text-xs">
+								<p class="mt-1">llama-server -m locally-stored-model.gguf</p>
+							</div>
+						</div>
+						<ul class="list-disc space-y-1 pl-4">
+							<li>Check that the server is accessible at the correct URL</li>
+
+							<li>Verify your network connection</li>
+
+							<li>Check server logs for any error messages</li>
+						</ul>
+					</div>
+				</details>
+			</div>
+		{/if}
+	</div>
+</div>

tools/server/webui/src/lib/components/app/server/ServerInfo.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Server, Eye, Mic } from '@lucide/svelte';
+	import { Badge } from '$lib/components/ui/badge';
+	import { serverStore } from '$lib/stores/server.svelte';
+
+	let modalities = $derived(serverStore.supportedModalities);
+	let model = $derived(serverStore.modelName);
+	let props = $derived(serverStore.serverProps);
+</script>
+
+{#if props}
+	<div class="flex flex-wrap items-center justify-center gap-4 text-sm text-muted-foreground">
+		{#if model}
+			<Badge variant="outline" class="text-xs">
+				<Server class="mr-1 h-3 w-3" />
+
+				<span class="block max-w-[50vw] truncate">{model}</span>
+			</Badge>
+		{/if}
+
+		<div class="flex gap-4">
+			{#if props.default_generation_settings.n_ctx}
+				<Badge variant="secondary" class="text-xs">
+					ctx: {props.default_generation_settings.n_ctx.toLocaleString()}
+				</Badge>
+			{/if}
+
+			{#if modalities.length > 0}
+				{#each modalities as modality (modality)}
+					<Badge variant="secondary" class="text-xs">
+						{#if modality === 'vision'}
+							<Eye class="mr-1 h-3 w-3" />
+						{:else if modality === 'audio'}
+							<Mic class="mr-1 h-3 w-3" />
+						{/if}
+
+						{modality}
+					</Badge>
+				{/each}
+			{/if}
+		</div>
+	</div>
+{/if}

tools/server/webui/src/lib/components/app/server/ServerLoadingSplash.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Server } from '@lucide/svelte';
+	import { ServerStatus } from '$lib/components/app';
+	import { fade } from 'svelte/transition';
+
+	interface Props {
+		class?: string;
+		message?: string;
+	}
+
+	let { class: className = '', message = 'Initializing connection to llama.cpp server...' }: Props =
+		$props();
+</script>
+
+<div class="flex h-full items-center justify-center {className}">
+	<div class="text-center">
+		<div class="mb-4" in:fade={{ duration: 300 }}>
+			<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+				<Server class="h-8 w-8 animate-pulse text-muted-foreground" />
+			</div>
+
+			<h2 class="mb-2 text-xl font-semibold">Connecting to Server</h2>
+
+			<p class="text-sm text-muted-foreground">
+				{message}
+			</p>
+		</div>
+
+		<div class="mt-4">
+			<ServerStatus class="justify-center" />
+		</div>
+	</div>
+</div>

tools/server/webui/src/lib/components/app/server/ServerStatus.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { AlertTriangle, Server } from '@lucide/svelte';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Button } from '$lib/components/ui/button';
+	import { serverProps, serverLoading, serverError, modelName } from '$lib/stores/server.svelte';
+
+	interface Props {
+		class?: string;
+		showActions?: boolean;
+	}
+
+	let { class: className = '', showActions = false }: Props = $props();
+
+	let error = $derived(serverError());
+	let loading = $derived(serverLoading());
+	let model = $derived(modelName());
+	let serverData = $derived(serverProps());
+
+	function getStatusColor() {
+		if (loading) return 'bg-yellow-500';
+		if (error) return 'bg-red-500';
+		if (serverData) return 'bg-green-500';
+
+		return 'bg-gray-500';
+	}
+
+	function getStatusText() {
+		if (loading) return 'Connecting...';
+		if (error) return 'Connection Error';
+		if (serverData) return 'Connected';
+
+		return 'Unknown';
+	}
+</script>
+
+<div class="flex items-center space-x-3 {className}">
+	<div class="flex items-center space-x-2">
+		<div class="h-2 w-2 rounded-full {getStatusColor()}"></div>
+
+		<span class="text-sm text-muted-foreground">{getStatusText()}</span>
+	</div>
+
+	{#if serverData && !error}
+		<Badge variant="outline" class="text-xs">
+			<Server class="mr-1 h-3 w-3" />
+
+			{model || 'Unknown Model'}
+		</Badge>
+
+		{#if serverData.default_generation_settings.n_ctx}
+			<Badge variant="secondary" class="text-xs">
+				ctx: {serverData.default_generation_settings.n_ctx.toLocaleString()}
+			</Badge>
+		{/if}
+	{/if}
+
+	{#if showActions && error}
+		<Button variant="outline" size="sm" class="text-destructive">
+			<AlertTriangle class="h-4 w-4" />
+
+			{error}
+		</Button>
+	{/if}
+</div>