Merge commit '9963b81f6392da8066958c177db77ad4b4a8f284' into concedo_experimental

# Conflicts:
#	.github/workflows/server.yml
#	SECURITY.md
#	docs/backend/SYCL.md
#	examples/model-conversion/README.md
#	examples/model-conversion/scripts/embedding/compare-embeddings-logits.sh
#	ggml/src/ggml-hexagon/ggml-hexagon.cpp
#	ggml/src/ggml-hexagon/htp/matmul-ops.c
#	tests/CMakeLists.txt
#	tests/test-chat.cpp
#	tests/test-json-schema-to-grammar.cpp

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

@@ -241,7 +241,7 @@
 				</div>
 			{/if}
 		{:else if (isText || (isPdf && pdfViewMode === 'text')) && displayTextContent}
-			<SyntaxHighlightedCode code={displayTextContent} {language} maxWidth="69rem" />
+			<SyntaxHighlightedCode code={displayTextContent} {language} maxWidth="calc(69rem - 2rem)" />
 		{:else if isAudio}
 			<div class="flex items-center justify-center p-8">
 				<div class="w-full max-w-md text-center">

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RemoveButton } from '$lib/components/app';
-	import { getFileTypeLabel, getPreviewText, formatFileSize, isTextFile } from '$lib/utils';
+	import { formatFileSize, getFileTypeLabel, getPreviewText, isTextFile } from '$lib/utils';
 	import { AttachmentType } from '$lib/enums';
 
 	interface Props {

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

@@ -24,7 +24,7 @@
 		MimeTypeImage,
 		MimeTypeText
 	} from '$lib/enums';
-	import { isIMEComposing } from '$lib/utils';
+	import { isIMEComposing, parseClipboardContent } from '$lib/utils';
 	import {
 		AudioRecorder,
 		convertToWav,
@@ -191,7 +191,6 @@
 
 			if ((!message.trim() && uploadedFiles.length === 0) || disabled || isLoading) return;
 
-			// Check if model is selected first
 			if (!checkModelSelected()) return;
 
 			const messageToSend = message.trim();
@@ -228,6 +227,31 @@
 
 		const text = event.clipboardData.getData(MimeTypeText.PLAIN);
 
+		if (text.startsWith('"')) {
+			const parsed = parseClipboardContent(text);
+
+			if (parsed.textAttachments.length > 0) {
+				event.preventDefault();
+
+				message = parsed.message;
+
+				const attachmentFiles = parsed.textAttachments.map(
+					(att) =>
+						new File([att.content], att.name, {
+							type: MimeTypeText.PLAIN
+						})
+				);
+
+				onFileUpload?.(attachmentFiles);
+
+				setTimeout(() => {
+					textareaRef?.focus();
+				}, 10);
+
+				return;
+			}
+		}
+
 		if (
 			text.length > 0 &&
 			pasteLongTextToFileLength > 0 &&

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

@@ -35,7 +35,7 @@
 
 <div class="flex items-center gap-1 {className}">
 	<DropdownMenu.Root>
-		<DropdownMenu.Trigger name="Attach files">
+		<DropdownMenu.Trigger name="Attach files" {disabled}>
 			<Tooltip.Root>
 				<Tooltip.Trigger>
 					<Button

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

@@ -173,6 +173,7 @@
 	/>
 
 	<ModelsSelector
+		{disabled}
 		bind:this={selectorModelRef}
 		currentModel={conversationModel}
 		forceForegroundText={true}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { chatStore } from '$lib/stores/chat.svelte';
-	import { copyToClipboard, isIMEComposing } from '$lib/utils';
+	import { config } from '$lib/stores/settings.svelte';
+	import { copyToClipboard, isIMEComposing, formatMessageForClipboard } from '$lib/utils';
 	import ChatMessageAssistant from './ChatMessageAssistant.svelte';
 	import ChatMessageUser from './ChatMessageUser.svelte';
 	import ChatMessageSystem from './ChatMessageSystem.svelte';
@@ -87,7 +88,9 @@
 	}
 
 	async function handleCopy() {
-		await copyToClipboard(message.content, 'Message copied to clipboard');
+		const asPlainText = Boolean(config().copyTextAttachmentsAsPlainText);
+		const clipboardContent = formatMessageForClipboard(message.content, message.extra, asPlainText);
+		await copyToClipboard(clipboardContent, 'Message copied to clipboard');
 		onCopy?.(message);
 	}
 

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

@@ -57,6 +57,11 @@
 					label: 'Paste long text to file length',
 					type: 'input'
 				},
+				{
+					key: 'copyTextAttachmentsAsPlainText',
+					label: 'Copy text attachments as plain text',
+					type: 'checkbox'
+				},
 				{
 					key: 'enableContinueGeneration',
 					label: 'Enable "Continue" button',
@@ -109,6 +114,16 @@
 					key: 'disableAutoScroll',
 					label: 'Disable automatic scroll',
 					type: 'checkbox'
+				},
+				{
+					key: 'alwaysShowSidebarOnDesktop',
+					label: 'Always show sidebar on desktop',
+					type: 'checkbox'
+				},
+				{
+					key: 'autoShowSidebarOnNewChat',
+					label: 'Auto-show sidebar on new chat',
+					type: 'checkbox'
 				}
 			]
 		},
@@ -404,7 +419,7 @@
 	</div>
 
 	<!-- Mobile Header with Horizontal Scrollable Menu -->
-	<div class="flex flex-col md:hidden">
+	<div class="flex flex-col pt-6 md:hidden">
 		<div class="border-b border-border/30 py-4">
 			<!-- Horizontal Scrollable Category Menu with Navigation -->
 			<div class="relative flex items-center" style="scroll-padding: 1rem;">

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

@@ -9,6 +9,7 @@
 	import Input from '$lib/components/ui/input/input.svelte';
 	import { conversationsStore, conversations } from '$lib/stores/conversations.svelte';
 	import { chatStore } from '$lib/stores/chat.svelte';
+	import { getPreviewText } from '$lib/utils/text';
 	import ChatSidebarActions from './ChatSidebarActions.svelte';
 
 	const sidebar = Sidebar.useSidebar();
@@ -20,6 +21,9 @@
 	let showEditDialog = $state(false);
 	let selectedConversation = $state<DatabaseConversation | null>(null);
 	let editedName = $state('');
+	let selectedConversationNamePreview = $derived.by(() =>
+		selectedConversation ? getPreviewText(selectedConversation.name) : ''
+	);
 
 	let filteredConversations = $derived.by(() => {
 		if (searchQuery.trim().length > 0) {
@@ -162,7 +166,7 @@
 	bind:open={showDeleteDialog}
 	title="Delete Conversation"
 	description={selectedConversation
-		? `Are you sure you want to delete "${selectedConversation.name}"? This action cannot be undone and will permanently remove all messages in this conversation.`
+		? `Are you sure you want to delete "${selectedConversationNamePreview}"? This action cannot be undone and will permanently remove all messages in this conversation.`
 		: ''}
 	confirmText="Delete"
 	cancelText="Cancel"

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

@@ -504,6 +504,14 @@
 		background: hsl(var(--muted) / 0.1);
 	}
 
+	/* User message markdown should keep table borders visible on light primary backgrounds */
+	div.markdown-user-content :global(table),
+	div.markdown-user-content :global(th),
+	div.markdown-user-content :global(td),
+	div.markdown-user-content :global(.table-wrapper) {
+		border-color: currentColor;
+	}
+
 	/* Horizontal rules */
 	div :global(hr) {
 		border: none;
@@ -642,6 +650,21 @@
 		background: var(--muted);
 	}
 
+	/* Disable hover effects when rendering user messages */
+	.markdown-user-content :global(a),
+	.markdown-user-content :global(a:hover) {
+		color: var(--primary-foreground);
+	}
+
+	.markdown-user-content :global(table:hover) {
+		box-shadow: none;
+	}
+
+	.markdown-user-content :global(th:hover),
+	.markdown-user-content :global(td:hover) {
+		background: inherit;
+	}
+
 	/* Enhanced blockquotes */
 	div :global(blockquote) {
 		transition: all 0.2s ease;

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

@@ -72,9 +72,10 @@
 
 <div
 	class="code-preview-wrapper overflow-auto rounded-lg border border-border bg-muted {className}"
-	style="max-height: {maxHeight};"
+	style="max-height: {maxHeight}; max-width: {maxWidth};"
 >
-	<pre class="m-0 overflow-x-auto p-4 max-w-[{maxWidth}]"><code class="hljs text-sm leading-relaxed"
+	<!-- Needs to be formatted as single line for proper rendering -->
+	<pre class="m-0 overflow-x-auto p-4"><code class="hljs text-sm leading-relaxed"
 			>{@html highlightedHtml}</code
 		></pre>
 </div>

tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte

@@ -179,51 +179,37 @@
 		});
 	});
 
+	// Handle changes to the model selector pop-down or the model dialog, depending on if the server is in
+	// router mode or not.
 	function handleOpenChange(open: boolean) {
 		if (loading || updating) return;
 
-		if (open) {
-			isOpen = true;
-			searchTerm = '';
-			highlightedIndex = -1;
+		if (isRouter) {
+			if (open) {
+				isOpen = true;
+				searchTerm = '';
+				highlightedIndex = -1;
 
-			// Focus search input after popover opens
-			tick().then(() => {
-				requestAnimationFrame(() => searchInputRef?.focus());
-			});
+				// Focus search input after popover opens
+				tick().then(() => {
+					requestAnimationFrame(() => searchInputRef?.focus());
+				});
 
-			if (isRouter) {
 				modelsStore.fetchRouterModels().then(() => {
 					modelsStore.fetchModalitiesForLoadedModels();
 				});
+			} else {
+				isOpen = false;
+				searchTerm = '';
+				highlightedIndex = -1;
 			}
 		} else {
-			isOpen = false;
-			searchTerm = '';
-			highlightedIndex = -1;
+			showModelDialog = open;
 		}
 	}
 
-	function handleTriggerClick() {
-		if (loading || updating) return;
-
-		if (!isRouter) {
-			// Single model mode: show dialog instead of popover
-			showModelDialog = true;
-		}
-		// For router mode, the Popover handles open/close
-	}
-
 	export function open() {
-		if (isRouter) {
-			handleOpenChange(true);
-		} else {
-			showModelDialog = true;
-		}
-	}
-
-	function closeMenu() {
-		handleOpenChange(false);
+		handleOpenChange(true);
 	}
 
 	function handleSearchKeyDown(event: KeyboardEvent) {
@@ -292,7 +278,7 @@
 		}
 
 		if (shouldCloseMenu) {
-			closeMenu();
+			handleOpenChange(false);
 
 			// Focus the chat textarea after model selection
 			requestAnimationFrame(() => {
@@ -360,8 +346,181 @@
 	{:else}
 		{@const selectedOption = getDisplayOption()}
 
-		<Popover.Root bind:open={isOpen} onOpenChange={handleOpenChange}>
-			<Popover.Trigger
+		{#if isRouter}
+			<Popover.Root bind:open={isOpen} onOpenChange={handleOpenChange}>
+				<Popover.Trigger
+					class={cn(
+						`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
+						!isCurrentModelInCache()
+							? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
+							: forceForegroundText
+								? 'text-foreground'
+								: isHighlightedCurrentModelActive
+									? 'text-foreground'
+									: 'text-muted-foreground',
+						isOpen ? 'text-foreground' : ''
+					)}
+					style="max-width: min(calc(100cqw - 6.5rem), 32rem)"
+					disabled={disabled || updating}
+				>
+					<Package class="h-3.5 w-3.5" />
+
+					<span class="truncate font-medium">
+						{selectedOption?.model || 'Select model'}
+					</span>
+
+					{#if updating}
+						<Loader2 class="h-3 w-3.5 animate-spin" />
+					{:else}
+						<ChevronDown class="h-3 w-3.5" />
+					{/if}
+				</Popover.Trigger>
+
+				<Popover.Content
+					class="group/popover-content w-96 max-w-[calc(100vw-2rem)] p-0"
+					align="end"
+					sideOffset={8}
+					collisionPadding={16}
+				>
+					<div class="flex max-h-[50dvh] flex-col overflow-hidden">
+						<div
+							class="order-1 shrink-0 border-b p-4 group-data-[side=top]/popover-content:order-2 group-data-[side=top]/popover-content:border-t group-data-[side=top]/popover-content:border-b-0"
+						>
+							<SearchInput
+								id="model-search"
+								placeholder="Search models..."
+								bind:value={searchTerm}
+								bind:ref={searchInputRef}
+								onClose={() => handleOpenChange(false)}
+								onKeyDown={handleSearchKeyDown}
+							/>
+						</div>
+						<div
+							class="models-list order-2 min-h-0 flex-1 overflow-y-auto group-data-[side=top]/popover-content:order-1"
+						>
+							{#if !isCurrentModelInCache() && currentModel}
+								<!-- Show unavailable model as first option (disabled) -->
+								<button
+									type="button"
+									class="flex w-full cursor-not-allowed items-center bg-red-400/10 px-4 py-2 text-left text-sm text-red-400"
+									role="option"
+									aria-selected="true"
+									aria-disabled="true"
+									disabled
+								>
+									<span class="truncate">{selectedOption?.name || currentModel}</span>
+									<span class="ml-2 text-xs whitespace-nowrap opacity-70">(not available)</span>
+								</button>
+								<div class="my-1 h-px bg-border"></div>
+							{/if}
+							{#if filteredOptions.length === 0}
+								<p class="px-4 py-3 text-sm text-muted-foreground">No models found.</p>
+							{/if}
+							{#each filteredOptions as option, index (option.id)}
+								{@const status = getModelStatus(option.model)}
+								{@const isLoaded = status === ServerModelStatus.LOADED}
+								{@const isLoading = status === ServerModelStatus.LOADING}
+								{@const isSelected = currentModel === option.model || activeId === option.id}
+								{@const isCompatible = isModelCompatible(option)}
+								{@const isHighlighted = index === highlightedIndex}
+								{@const missingModalities = getMissingModalities(option)}
+
+								<div
+									class={cn(
+										'group flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition focus:outline-none',
+										isCompatible
+											? 'cursor-pointer hover:bg-muted focus:bg-muted'
+											: 'cursor-not-allowed opacity-50',
+										isSelected || isHighlighted
+											? 'bg-accent text-accent-foreground'
+											: isCompatible
+												? 'hover:bg-accent hover:text-accent-foreground'
+												: '',
+										isLoaded ? 'text-popover-foreground' : 'text-muted-foreground'
+									)}
+									role="option"
+									aria-selected={isSelected || isHighlighted}
+									aria-disabled={!isCompatible}
+									tabindex={isCompatible ? 0 : -1}
+									onclick={() => isCompatible && handleSelect(option.id)}
+									onmouseenter={() => (highlightedIndex = index)}
+									onkeydown={(e) => {
+										if (isCompatible && (e.key === 'Enter' || e.key === ' ')) {
+											e.preventDefault();
+											handleSelect(option.id);
+										}
+									}}
+								>
+									<span class="min-w-0 flex-1 truncate">{option.model}</span>
+
+									{#if missingModalities}
+										<span class="flex shrink-0 items-center gap-1 text-muted-foreground/70">
+											{#if missingModalities.vision}
+												<Tooltip.Root>
+													<Tooltip.Trigger>
+														<EyeOff class="h-3.5 w-3.5" />
+													</Tooltip.Trigger>
+													<Tooltip.Content class="z-[9999]">
+														<p>No vision support</p>
+													</Tooltip.Content>
+												</Tooltip.Root>
+											{/if}
+											{#if missingModalities.audio}
+												<Tooltip.Root>
+													<Tooltip.Trigger>
+														<MicOff class="h-3.5 w-3.5" />
+													</Tooltip.Trigger>
+													<Tooltip.Content class="z-[9999]">
+														<p>No audio support</p>
+													</Tooltip.Content>
+												</Tooltip.Root>
+											{/if}
+										</span>
+									{/if}
+
+									{#if isLoading}
+										<Tooltip.Root>
+											<Tooltip.Trigger>
+												<Loader2 class="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+											</Tooltip.Trigger>
+											<Tooltip.Content class="z-[9999]">
+												<p>Loading model...</p>
+											</Tooltip.Content>
+										</Tooltip.Root>
+									{:else if isLoaded}
+										<Tooltip.Root>
+											<Tooltip.Trigger>
+												<button
+													type="button"
+													class="relative ml-2 flex h-4 w-4 shrink-0 items-center justify-center"
+													onclick={(e) => {
+														e.stopPropagation();
+														modelsStore.unloadModel(option.model);
+													}}
+												>
+													<span
+														class="mr-2 h-2 w-2 rounded-full bg-green-500 transition-opacity group-hover:opacity-0"
+													></span>
+													<Power
+														class="absolute mr-2 h-4 w-4 text-red-500 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-600"
+													/>
+												</button>
+											</Tooltip.Trigger>
+											<Tooltip.Content class="z-[9999]">
+												<p>Unload model</p>
+											</Tooltip.Content>
+										</Tooltip.Root>
+									{:else}
+										<span class="mx-2 h-2 w-2 rounded-full bg-muted-foreground/50"></span>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					</div>
+				</Popover.Content>
+			</Popover.Root>
+		{:else}
+			<button
 				class={cn(
 					`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs transition hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60`,
 					!isCurrentModelInCache()
@@ -374,165 +533,20 @@
 					isOpen ? 'text-foreground' : ''
 				)}
 				style="max-width: min(calc(100cqw - 6.5rem), 32rem)"
-				onclick={handleTriggerClick}
-				disabled={disabled || updating || !isRouter}
+				onclick={() => handleOpenChange(true)}
+				disabled={disabled || updating}
 			>
 				<Package class="h-3.5 w-3.5" />
 
 				<span class="truncate font-medium">
-					{selectedOption?.model || 'Select model'}
+					{selectedOption?.model}
 				</span>
 
 				{#if updating}
 					<Loader2 class="h-3 w-3.5 animate-spin" />
-				{:else if isRouter}
-					<ChevronDown class="h-3 w-3.5" />
 				{/if}
-			</Popover.Trigger>
-
-			<Popover.Content
-				class="group/popover-content w-96 max-w-[calc(100vw-2rem)] p-0"
-				align="end"
-				sideOffset={8}
-				collisionPadding={16}
-			>
-				<div class="flex max-h-[50dvh] flex-col overflow-hidden">
-					<div
-						class="order-1 shrink-0 border-b p-4 group-data-[side=top]/popover-content:order-2 group-data-[side=top]/popover-content:border-t group-data-[side=top]/popover-content:border-b-0"
-					>
-						<SearchInput
-							id="model-search"
-							placeholder="Search models..."
-							bind:value={searchTerm}
-							bind:ref={searchInputRef}
-							onClose={closeMenu}
-							onKeyDown={handleSearchKeyDown}
-						/>
-					</div>
-					<div
-						class="models-list order-2 min-h-0 flex-1 overflow-y-auto group-data-[side=top]/popover-content:order-1"
-					>
-						{#if !isCurrentModelInCache() && currentModel}
-							<!-- Show unavailable model as first option (disabled) -->
-							<button
-								type="button"
-								class="flex w-full cursor-not-allowed items-center bg-red-400/10 px-4 py-2 text-left text-sm text-red-400"
-								role="option"
-								aria-selected="true"
-								aria-disabled="true"
-								disabled
-							>
-								<span class="truncate">{selectedOption?.name || currentModel}</span>
-								<span class="ml-2 text-xs whitespace-nowrap opacity-70">(not available)</span>
-							</button>
-							<div class="my-1 h-px bg-border"></div>
-						{/if}
-						{#if filteredOptions.length === 0}
-							<p class="px-4 py-3 text-sm text-muted-foreground">No models found.</p>
-						{/if}
-						{#each filteredOptions as option, index (option.id)}
-							{@const status = getModelStatus(option.model)}
-							{@const isLoaded = status === ServerModelStatus.LOADED}
-							{@const isLoading = status === ServerModelStatus.LOADING}
-							{@const isSelected = currentModel === option.model || activeId === option.id}
-							{@const isCompatible = isModelCompatible(option)}
-							{@const isHighlighted = index === highlightedIndex}
-							{@const missingModalities = getMissingModalities(option)}
-
-							<div
-								class={cn(
-									'group flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition focus:outline-none',
-									isCompatible
-										? 'cursor-pointer hover:bg-muted focus:bg-muted'
-										: 'cursor-not-allowed opacity-50',
-									isSelected || isHighlighted
-										? 'bg-accent text-accent-foreground'
-										: isCompatible
-											? 'hover:bg-accent hover:text-accent-foreground'
-											: '',
-									isLoaded ? 'text-popover-foreground' : 'text-muted-foreground'
-								)}
-								role="option"
-								aria-selected={isSelected || isHighlighted}
-								aria-disabled={!isCompatible}
-								tabindex={isCompatible ? 0 : -1}
-								onclick={() => isCompatible && handleSelect(option.id)}
-								onmouseenter={() => (highlightedIndex = index)}
-								onkeydown={(e) => {
-									if (isCompatible && (e.key === 'Enter' || e.key === ' ')) {
-										e.preventDefault();
-										handleSelect(option.id);
-									}
-								}}
-							>
-								<span class="min-w-0 flex-1 truncate">{option.model}</span>
-
-								{#if missingModalities}
-									<span class="flex shrink-0 items-center gap-1 text-muted-foreground/70">
-										{#if missingModalities.vision}
-											<Tooltip.Root>
-												<Tooltip.Trigger>
-													<EyeOff class="h-3.5 w-3.5" />
-												</Tooltip.Trigger>
-												<Tooltip.Content class="z-[9999]">
-													<p>No vision support</p>
-												</Tooltip.Content>
-											</Tooltip.Root>
-										{/if}
-										{#if missingModalities.audio}
-											<Tooltip.Root>
-												<Tooltip.Trigger>
-													<MicOff class="h-3.5 w-3.5" />
-												</Tooltip.Trigger>
-												<Tooltip.Content class="z-[9999]">
-													<p>No audio support</p>
-												</Tooltip.Content>
-											</Tooltip.Root>
-										{/if}
-									</span>
-								{/if}
-
-								{#if isLoading}
-									<Tooltip.Root>
-										<Tooltip.Trigger>
-											<Loader2 class="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
-										</Tooltip.Trigger>
-										<Tooltip.Content class="z-[9999]">
-											<p>Loading model...</p>
-										</Tooltip.Content>
-									</Tooltip.Root>
-								{:else if isLoaded}
-									<Tooltip.Root>
-										<Tooltip.Trigger>
-											<button
-												type="button"
-												class="relative ml-2 flex h-4 w-4 shrink-0 items-center justify-center"
-												onclick={(e) => {
-													e.stopPropagation();
-													modelsStore.unloadModel(option.model);
-												}}
-											>
-												<span
-													class="mr-2 h-2 w-2 rounded-full bg-green-500 transition-opacity group-hover:opacity-0"
-												></span>
-												<Power
-													class="absolute mr-2 h-4 w-4 text-red-500 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-600"
-												/>
-											</button>
-										</Tooltip.Trigger>
-										<Tooltip.Content class="z-[9999]">
-											<p>Unload model</p>
-										</Tooltip.Content>
-									</Tooltip.Root>
-								{:else}
-									<span class="mx-2 h-2 w-2 rounded-full bg-muted-foreground/50"></span>
-								{/if}
-							</div>
-						{/each}
-					</div>
-				</div>
-			</Popover.Content>
-		</Popover.Root>
+			</button>
+		{/if}
 	{/if}
 </div>
 

tools/server/webui/src/lib/constants/settings-config.ts

@@ -12,9 +12,12 @@ export const SETTING_CONFIG_DEFAULT: Record<string, string | number | boolean> =
 	showMessageStats: true,
 	askForTitleConfirmation: false,
 	pasteLongTextToFileLen: 2500,
+	copyTextAttachmentsAsPlainText: false,
 	pdfAsImage: false,
 	disableAutoScroll: false,
 	renderUserContentAsMarkdown: false,
+	alwaysShowSidebarOnDesktop: false,
+	autoShowSidebarOnNewChat: true,
 	autoMicOnEmpty: false,
 	// make sure these default values are in sync with `common.h`
 	samplers: 'top_k;typ_p;top_p;min_p;temperature',
@@ -50,6 +53,8 @@ export const SETTING_CONFIG_INFO: Record<string, string> = {
 		'Choose the color theme for the interface. You can choose between System (follows your device settings), Light, or Dark.',
 	pasteLongTextToFileLen:
 		'On pasting long text, it will be converted to a file. You can control the file length by setting the value of this parameter. Value 0 means disable.',
+	copyTextAttachmentsAsPlainText:
+		'When copying a message with text attachments, combine them into a single plain text string instead of a special format that can be pasted back as attachments.',
 	samplers:
 		'The order at which samplers are applied, in simplified way. Default is "top_k;typ_p;top_p;min_p;temperature": top_k->typ_p->top_p->min_p->temperature',
 	temperature:
@@ -96,6 +101,10 @@ export const SETTING_CONFIG_INFO: Record<string, string> = {
 	disableAutoScroll:
 		'Disable automatic scrolling while messages stream so you can control the viewport position manually.',
 	renderUserContentAsMarkdown: 'Render user messages using markdown formatting in the chat.',
+	alwaysShowSidebarOnDesktop:
+		'Always keep the sidebar visible on desktop instead of auto-hiding it.',
+	autoShowSidebarOnNewChat:
+		'Automatically show sidebar when starting a new chat. Disable to keep the sidebar hidden until you click on it.',
 	autoMicOnEmpty:
 		'Automatically show microphone button instead of send button when textarea is empty for models with audio modality support.',
 	pyInterpreterEnabled:

tools/server/webui/src/lib/utils/clipboard.ts

@@ -0,0 +1,262 @@
+import { toast } from 'svelte-sonner';
+import { AttachmentType } from '$lib/enums';
+import type {
+	DatabaseMessageExtra,
+	DatabaseMessageExtraTextFile,
+	DatabaseMessageExtraLegacyContext
+} from '$lib/types/database';
+
+/**
+ * Copy text to clipboard with toast notification
+ * Uses modern clipboard API when available, falls back to legacy method for non-secure contexts
+ * @param text - Text to copy to clipboard
+ * @param successMessage - Custom success message (optional)
+ * @param errorMessage - Custom error message (optional)
+ * @returns Promise<boolean> - True if successful, false otherwise
+ */
+export async function copyToClipboard(
+	text: string,
+	successMessage = 'Copied to clipboard',
+	errorMessage = 'Failed to copy to clipboard'
+): Promise<boolean> {
+	try {
+		// Try modern clipboard API first (secure contexts only)
+		if (navigator.clipboard && navigator.clipboard.writeText) {
+			await navigator.clipboard.writeText(text);
+			toast.success(successMessage);
+			return true;
+		}
+
+		// Fallback for non-secure contexts
+		const textArea = document.createElement('textarea');
+		textArea.value = text;
+		textArea.style.position = 'fixed';
+		textArea.style.left = '-999999px';
+		textArea.style.top = '-999999px';
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+
+		const successful = document.execCommand('copy');
+		document.body.removeChild(textArea);
+
+		if (successful) {
+			toast.success(successMessage);
+			return true;
+		} else {
+			throw new Error('execCommand failed');
+		}
+	} catch (error) {
+		console.error('Failed to copy to clipboard:', error);
+		toast.error(errorMessage);
+		return false;
+	}
+}
+
+/**
+ * Copy code with HTML entity decoding and toast notification
+ * @param rawCode - Raw code string that may contain HTML entities
+ * @param successMessage - Custom success message (optional)
+ * @param errorMessage - Custom error message (optional)
+ * @returns Promise<boolean> - True if successful, false otherwise
+ */
+export async function copyCodeToClipboard(
+	rawCode: string,
+	successMessage = 'Code copied to clipboard',
+	errorMessage = 'Failed to copy code'
+): Promise<boolean> {
+	const doc = new DOMParser().parseFromString(rawCode, 'text/html');
+	const decodedCode = doc.body.textContent ?? rawCode;
+
+	return copyToClipboard(decodedCode, successMessage, errorMessage);
+}
+
+/**
+ * Format for text attachments when copied to clipboard
+ */
+export interface ClipboardTextAttachment {
+	type: typeof AttachmentType.TEXT;
+	name: string;
+	content: string;
+}
+
+/**
+ * Parsed result from clipboard content
+ */
+export interface ParsedClipboardContent {
+	message: string;
+	textAttachments: ClipboardTextAttachment[];
+}
+
+/**
+ * Formats a message with text attachments for clipboard copying.
+ *
+ * Default format (asPlainText = false):
+ * ```
+ * "Text message content"
+ * [
+ *   {"type":"TEXT","name":"filename.txt","content":"..."},
+ *   {"type":"TEXT","name":"another.txt","content":"..."}
+ * ]
+ * ```
+ *
+ * Plain text format (asPlainText = true):
+ * ```
+ * Text message content
+ *
+ * file content here
+ *
+ * another file content
+ * ```
+ *
+ * @param content - The message text content
+ * @param extras - Optional array of message attachments
+ * @param asPlainText - If true, format as plain text without JSON structure
+ * @returns Formatted string for clipboard
+ */
+export function formatMessageForClipboard(
+	content: string,
+	extras?: DatabaseMessageExtra[],
+	asPlainText: boolean = false
+): string {
+	// Filter only text attachments (TEXT type and legacy CONTEXT type)
+	const textAttachments =
+		extras?.filter(
+			(extra): extra is DatabaseMessageExtraTextFile | DatabaseMessageExtraLegacyContext =>
+				extra.type === AttachmentType.TEXT || extra.type === AttachmentType.LEGACY_CONTEXT
+		) ?? [];
+
+	if (textAttachments.length === 0) {
+		return content;
+	}
+
+	if (asPlainText) {
+		const parts = [content];
+		for (const att of textAttachments) {
+			parts.push(att.content);
+		}
+		return parts.join('\n\n');
+	}
+
+	const clipboardAttachments: ClipboardTextAttachment[] = textAttachments.map((att) => ({
+		type: AttachmentType.TEXT,
+		name: att.name,
+		content: att.content
+	}));
+
+	return `${JSON.stringify(content)}\n${JSON.stringify(clipboardAttachments, null, 2)}`;
+}
+
+/**
+ * Parses clipboard content to extract message and text attachments.
+ * Supports both plain text and the special format with attachments.
+ *
+ * @param clipboardText - Raw text from clipboard
+ * @returns Parsed content with message and attachments
+ */
+export function parseClipboardContent(clipboardText: string): ParsedClipboardContent {
+	const defaultResult: ParsedClipboardContent = {
+		message: clipboardText,
+		textAttachments: []
+	};
+
+	if (!clipboardText.startsWith('"')) {
+		return defaultResult;
+	}
+
+	try {
+		let stringEndIndex = -1;
+		let escaped = false;
+
+		for (let i = 1; i < clipboardText.length; i++) {
+			const char = clipboardText[i];
+
+			if (escaped) {
+				escaped = false;
+				continue;
+			}
+
+			if (char === '\\') {
+				escaped = true;
+				continue;
+			}
+
+			if (char === '"') {
+				stringEndIndex = i;
+				break;
+			}
+		}
+
+		if (stringEndIndex === -1) {
+			return defaultResult;
+		}
+
+		const jsonStringPart = clipboardText.substring(0, stringEndIndex + 1);
+		const remainingPart = clipboardText.substring(stringEndIndex + 1).trim();
+
+		const message = JSON.parse(jsonStringPart) as string;
+
+		if (!remainingPart || !remainingPart.startsWith('[')) {
+			return {
+				message,
+				textAttachments: []
+			};
+		}
+
+		const attachments = JSON.parse(remainingPart) as unknown[];
+
+		const validAttachments: ClipboardTextAttachment[] = [];
+
+		for (const att of attachments) {
+			if (isValidTextAttachment(att)) {
+				validAttachments.push({
+					type: AttachmentType.TEXT,
+					name: att.name,
+					content: att.content
+				});
+			}
+		}
+
+		return {
+			message,
+			textAttachments: validAttachments
+		};
+	} catch {
+		return defaultResult;
+	}
+}
+
+/**
+ * Type guard to validate a text attachment object
+ * @param obj The object to validate
+ * @returns true if the object is a valid text attachment
+ */
+function isValidTextAttachment(
+	obj: unknown
+): obj is { type: string; name: string; content: string } {
+	if (typeof obj !== 'object' || obj === null) {
+		return false;
+	}
+
+	const record = obj as Record<string, unknown>;
+
+	return (
+		(record.type === AttachmentType.TEXT || record.type === 'TEXT') &&
+		typeof record.name === 'string' &&
+		typeof record.content === 'string'
+	);
+}
+
+/**
+ * Checks if clipboard content contains our special format with attachments
+ * @param clipboardText - Raw text from clipboard
+ * @returns true if the clipboard content contains our special format with attachments
+ */
+export function hasClipboardAttachments(clipboardText: string): boolean {
+	if (!clipboardText.startsWith('"')) {
+		return false;
+	}
+
+	const parsed = parseClipboardContent(clipboardText);
+	return parsed.textAttachments.length > 0;
+}

tools/server/webui/src/lib/utils/copy.ts

@@ -1,71 +0,0 @@
-import { toast } from 'svelte-sonner';
-
-/**
- * Copy text to clipboard with toast notification
- * Uses modern clipboard API when available, falls back to legacy method for non-secure contexts
- * @param text - Text to copy to clipboard
- * @param successMessage - Custom success message (optional)
- * @param errorMessage - Custom error message (optional)
- * @returns Promise<boolean> - True if successful, false otherwise
- */
-export async function copyToClipboard(
-	text: string,
-	successMessage = 'Copied to clipboard',
-	errorMessage = 'Failed to copy to clipboard'
-): Promise<boolean> {
-	try {
-		// Try modern clipboard API first (secure contexts only)
-		if (navigator.clipboard && navigator.clipboard.writeText) {
-			await navigator.clipboard.writeText(text);
-			toast.success(successMessage);
-			return true;
-		}
-
-		// Fallback for non-secure contexts
-		const textArea = document.createElement('textarea');
-		textArea.value = text;
-		textArea.style.position = 'fixed';
-		textArea.style.left = '-999999px';
-		textArea.style.top = '-999999px';
-		document.body.appendChild(textArea);
-		textArea.focus();
-		textArea.select();
-
-		const successful = document.execCommand('copy');
-		document.body.removeChild(textArea);
-
-		if (successful) {
-			toast.success(successMessage);
-			return true;
-		} else {
-			throw new Error('execCommand failed');
-		}
-	} catch (error) {
-		console.error('Failed to copy to clipboard:', error);
-		toast.error(errorMessage);
-		return false;
-	}
-}
-
-/**
- * Copy code with HTML entity decoding and toast notification
- * @param rawCode - Raw code string that may contain HTML entities
- * @param successMessage - Custom success message (optional)
- * @param errorMessage - Custom error message (optional)
- * @returns Promise<boolean> - True if successful, false otherwise
- */
-export async function copyCodeToClipboard(
-	rawCode: string,
-	successMessage = 'Code copied to clipboard',
-	errorMessage = 'Failed to copy code'
-): Promise<boolean> {
-	// Decode HTML entities
-	const decodedCode = rawCode
-		.replace(/&amp;/g, '&')
-		.replace(/&lt;/g, '<')
-		.replace(/&gt;/g, '>')
-		.replace(/&quot;/g, '"')
-		.replace(/&#39;/g, "'");
-
-	return copyToClipboard(decodedCode, successMessage, errorMessage);
-}

tools/server/webui/src/lib/utils/file-preview.ts

@@ -34,12 +34,3 @@ export function getFileTypeLabel(input: string | undefined): string {
 	// Handle AttachmentType or other plain strings
 	return input.toUpperCase();
 }
-
-/**
- * Truncates text content for preview display
- * @param content - The text content to truncate
- * @returns Truncated content with ellipsis if needed
- */
-export function getPreviewText(content: string): string {
-	return content.length > 150 ? content.substring(0, 150) + '...' : content;
-}

tools/server/webui/src/lib/utils/index.ts

@@ -40,10 +40,19 @@ export { setConfigValue, getConfigValue, configToParameterRecord } from './confi
 export { createMessageCountMap, getMessageCount } from './conversation-utils';
 
 // Clipboard utilities
-export { copyToClipboard, copyCodeToClipboard } from './copy';
+export {
+	copyToClipboard,
+	copyCodeToClipboard,
+	formatMessageForClipboard,
+	parseClipboardContent,
+	hasClipboardAttachments,
+	type ClipboardTextAttachment,
+	type ParsedClipboardContent
+} from './clipboard';
 
 // File preview utilities
-export { getFileTypeLabel, getPreviewText } from './file-preview';
+export { getFileTypeLabel } from './file-preview';
+export { getPreviewText } from './text';
 
 // File type utilities
 export {

tools/server/webui/src/lib/utils/latex-protection.test.ts

@@ -1,376 +0,0 @@
-/* eslint-disable no-irregular-whitespace */
-import { describe, it, expect, test } from 'vitest';
-import { maskInlineLaTeX, preprocessLaTeX } from './latex-protection';
-
-describe('maskInlineLaTeX', () => {
-	it('should protect LaTeX $x + y$ but not money $3.99', () => {
-		const latexExpressions: string[] = [];
-		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('I have $10, $3.99 and <<LATEX_0>> and <<LATEX_1>>. The amount is $2,000.');
-		expect(latexExpressions).toEqual(['$x + y$', '$100x$']);
-	});
-
-	it('should ignore money like $5 and $12.99', () => {
-		const latexExpressions: string[] = [];
-		const input = 'Prices are $12.99 and $5. Tax?';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('Prices are $12.99 and $5. Tax?');
-		expect(latexExpressions).toEqual([]);
-	});
-
-	it('should protect inline math $a^2 + b^2$ even after text', () => {
-		const latexExpressions: string[] = [];
-		const input = 'Pythagorean: $a^2 + b^2 = c^2$.';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('Pythagorean: <<LATEX_0>>.');
-		expect(latexExpressions).toEqual(['$a^2 + b^2 = c^2$']);
-	});
-
-	it('should not protect math that has letter after closing $ (e.g. units)', () => {
-		const latexExpressions: string[] = [];
-		const input = 'The cost is $99 and change.';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('The cost is $99 and change.');
-		expect(latexExpressions).toEqual([]);
-	});
-
-	it('should allow $x$ followed by punctuation', () => {
-		const latexExpressions: string[] = [];
-		const input = 'We know $x$, right?';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('We know <<LATEX_0>>, right?');
-		expect(latexExpressions).toEqual(['$x$']);
-	});
-
-	it('should work across multiple lines', () => {
-		const latexExpressions: string[] = [];
-		const input = `Emma buys cupcakes for $3 each.\nHow much is $x + y$?`;
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe(`Emma buys cupcakes for $3 each.\nHow much is <<LATEX_0>>?`);
-		expect(latexExpressions).toEqual(['$x + y$']);
-	});
-
-	it('should not protect $100 but protect $matrix$', () => {
-		const latexExpressions: string[] = [];
-		const input = '$100 and $\\mathrm{GL}_2(\\mathbb{F}_7)$ are different.';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('$100 and <<LATEX_0>> are different.');
-		expect(latexExpressions).toEqual(['$\\mathrm{GL}_2(\\mathbb{F}_7)$']);
-	});
-
-	it('should skip if $ is followed by digit and alphanumeric after close (money)', () => {
-		const latexExpressions: string[] = [];
-		const input = 'I paid $5 quickly.';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('I paid $5 quickly.');
-		expect(latexExpressions).toEqual([]);
-	});
-
-	it('should protect LaTeX even with special chars inside', () => {
-		const latexExpressions: string[] = [];
-		const input = 'Consider $\\alpha_1 + \\beta_2$ now.';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('Consider <<LATEX_0>> now.');
-		expect(latexExpressions).toEqual(['$\\alpha_1 + \\beta_2$']);
-	});
-
-	it('short text', () => {
-		const latexExpressions: string[] = ['$0$'];
-		const input = '$a$\n$a$ and $b$';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('<<LATEX_1>>\n<<LATEX_2>> and <<LATEX_3>>');
-		expect(latexExpressions).toEqual(['$0$', '$a$', '$a$', '$b$']);
-	});
-
-	it('empty text', () => {
-		const latexExpressions: string[] = [];
-		const input = '$\n$$\n';
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe('$\n$$\n');
-		expect(latexExpressions).toEqual([]);
-	});
-
-	it('LaTeX-spacer preceded by backslash', () => {
-		const latexExpressions: string[] = [];
-		const input = `\\[
-\\boxed{
-\\begin{aligned}
-N_{\\text{att}}^{\\text{(MHA)}} &=
-h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
-&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
-&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
-&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
-\\end{aligned}}
-\\]`;
-		const output = maskInlineLaTeX(input, latexExpressions);
-
-		expect(output).toBe(input);
-		expect(latexExpressions).toEqual([]);
-	});
-});
-
-describe('preprocessLaTeX', () => {
-	test('converts inline \\( ... \\) to $...$', () => {
-		const input =
-			'\\( \\mathrm{GL}_2(\\mathbb{F}_7) \\): Group of invertible matrices with entries in \\(\\mathbb{F}_7\\).';
-		const output = preprocessLaTeX(input);
-		expect(output).toBe(
-			'$ \\mathrm{GL}_2(\\mathbb{F}_7) $: Group of invertible matrices with entries in $\\mathbb{F}_7$.'
-		);
-	});
-
-	test("don't inline \\\\( ... \\) to $...$", () => {
-		const input =
-			'Chapter 20 of The TeXbook, in source "Definitions\\\\(also called Macros)", containst the formula \\((x_1,\\ldots,x_n)\\).';
-		const output = preprocessLaTeX(input);
-		expect(output).toBe(
-			'Chapter 20 of The TeXbook, in source "Definitions\\\\(also called Macros)", containst the formula $(x_1,\\ldots,x_n)$.'
-		);
-	});
-
-	test('preserves display math \\[ ... \\] and protects adjacent text', () => {
-		const input = `Some kernel of \\(\\mathrm{SL}_2(\\mathbb{F}_7)\\):
-  \\[
-  \\left\\{ \\begin{pmatrix} 1 & 0 \\\\ 0 & 1 \\end{pmatrix}, \\begin{pmatrix} -1 & 0 \\\\ 0 & -1 \\end{pmatrix} \\right\\} = \\{\\pm I\\}
-  \\]`;
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(`Some kernel of $\\mathrm{SL}_2(\\mathbb{F}_7)$:
-  $$
-  \\left\\{ \\begin{pmatrix} 1 & 0 \\\\ 0 & 1 \\end{pmatrix}, \\begin{pmatrix} -1 & 0 \\\\ 0 & -1 \\end{pmatrix} \\right\\} = \\{\\pm I\\}
-  $$`);
-	});
-
-	test('handles standalone display math equation', () => {
-		const input = `Algebra:
-\\[
-x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
-\\]`;
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(`Algebra:
-$$
-x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
-$$`);
-	});
-
-	test('does not interpret currency values as LaTeX', () => {
-		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe('I have \\$10, \\$3.99 and $x + y$ and $100x$. The amount is \\$2,000.');
-	});
-
-	test('ignores dollar signs followed by digits (money), but keeps valid math $x + y$', () => {
-		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe('I have \\$10, \\$3.99 and $x + y$ and $100x$. The amount is \\$2,000.');
-	});
-
-	test('handles real-world word problems with amounts and no math delimiters', () => {
-		const input =
-			'Emma buys 2 cupcakes for $3 each and 1 cookie for $1.50. How much money does she spend in total?';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(
-			'Emma buys 2 cupcakes for \\$3 each and 1 cookie for \\$1.50. How much money does she spend in total?'
-		);
-	});
-
-	test('handles decimal amounts in word problem correctly', () => {
-		const input =
-			'Maria has $20. She buys a notebook for $4.75 and a pack of pencils for $3.25. How much change does she receive?';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(
-			'Maria has \\$20. She buys a notebook for \\$4.75 and a pack of pencils for \\$3.25. How much change does she receive?'
-		);
-	});
-
-	test('preserves display math with surrounding non-ASCII text', () => {
-		const input = `1 kg の質量は
-  \\[
-  E = (1\\ \\text{kg}) \\times (3.0 \\times 10^8\\ \\text{m/s})^2 \\approx 9.0 \\times 10^{16}\\ \\text{J}
-  \\]
-  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。`;
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(
-			`1 kg の質量は
-  $$
-  E = (1\\ \\text{kg}) \\times (3.0 \\times 10^8\\ \\text{m/s})^2 \\approx 9.0 \\times 10^{16}\\ \\text{J}
-  $$
-  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。`
-		);
-	});
-
-	test('LaTeX-spacer preceded by backslash', () => {
-		const input = `\\[
-\\boxed{
-\\begin{aligned}
-N_{\\text{att}}^{\\text{(MHA)}} &=
-h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
-&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
-&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
-&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
-\\end{aligned}}
-\\]`;
-		const output = preprocessLaTeX(input);
-		expect(output).toBe(
-			`$$
-\\boxed{
-\\begin{aligned}
-N_{\\text{att}}^{\\text{(MHA)}} &=
-h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
-&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
-&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
-&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
-\\end{aligned}}
-$$`
-		);
-	});
-
-	test('converts \\[ ... \\] even when preceded by text without space', () => {
-		const input = 'Some line ...\nAlgebra: \\[x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}\\]';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(
-			'Some line ...\nAlgebra: \n$$x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}$$\n'
-		);
-	});
-
-	test('converts \\[ ... \\] in table-cells', () => {
-		const input = `| ID | Expression |\n| #1 | \\[
-			x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
-\\] |`;
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(
-			'| ID | Expression |\n| #1 | $x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}$ |'
-		);
-	});
-
-	test('escapes isolated $ before digits ($5 → \\$5), but not valid math', () => {
-		const input = 'This costs $5 and this is math $x^2$. $100 is money.';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe('This costs \\$5 and this is math $x^2$. \\$100 is money.');
-		// Note: Since $x^2$ is detected as valid LaTeX, it's preserved.
-		// $5 becomes \$5 only *after* real math is masked — but here it's correct because the masking logic avoids treating $5 as math.
-	});
-
-	test('display with LaTeX-line-breaks', () => {
-		const input = String.raw`- Algebraic topology, Homotopy Groups of $\mathbb{S}^3$:
-$$\pi_n(\mathbb{S}^3) = \begin{cases}
-\mathbb{Z} & n = 3 \\
-0 & n > 3, n \neq 4 \\
-\mathbb{Z}_2 & n = 4 \\
-\end{cases}$$`;
-		const output = preprocessLaTeX(input);
-		// If the formula contains '\\' the $$-delimiters should be in their own line.
-		expect(output).toBe(`- Algebraic topology, Homotopy Groups of $\\mathbb{S}^3$:
-$$\n\\pi_n(\\mathbb{S}^3) = \\begin{cases}
-\\mathbb{Z} & n = 3 \\\\
-0 & n > 3, n \\neq 4 \\\\
-\\mathbb{Z}_2 & n = 4 \\\\
-\\end{cases}\n$$`);
-	});
-
-	test('handles mhchem notation safely if present', () => {
-		const input = 'Chemical reaction: \\( \\ce{H2O} \\) and $\\ce{CO2}$';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe('Chemical reaction: $ \\ce{H2O} $ and $\\ce{CO2}$');
-	});
-
-	test('preserves code blocks', () => {
-		const input = 'Inline code: `sum $total` and block:\n```\ndollar $amount\n```\nEnd.';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(input); // Code blocks prevent misinterpretation
-	});
-
-	test('preserves backslash parentheses in code blocks (GitHub issue)', () => {
-		const input = '```python\nfoo = "\\(bar\\)"\n```';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(input); // Code blocks should not have LaTeX conversion applied
-	});
-
-	test('preserves backslash brackets in code blocks', () => {
-		const input = '```python\nfoo = "\\[bar\\]"\n```';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(input); // Code blocks should not have LaTeX conversion applied
-	});
-
-	test('preserves backslash parentheses in inline code', () => {
-		const input = 'Use `foo = "\\(bar\\)"` in your code.';
-		const output = preprocessLaTeX(input);
-
-		expect(output).toBe(input);
-	});
-
-	test('escape backslash in mchem ce', () => {
-		const input = 'mchem ce:\n$\\ce{2H2(g) + O2(g) -> 2H2O(l)}$';
-		const output = preprocessLaTeX(input);
-
-		// mhchem-escape would insert a backslash here.
-		expect(output).toBe('mchem ce:\n$\\ce{2H2(g) + O2(g) -> 2H2O(l)}$');
-	});
-
-	test('escape backslash in mchem pu', () => {
-		const input = 'mchem pu:\n$\\pu{-572 kJ mol^{-1}}$';
-		const output = preprocessLaTeX(input);
-
-		// mhchem-escape would insert a backslash here.
-		expect(output).toBe('mchem pu:\n$\\pu{-572 kJ mol^{-1}}$');
-	});
-
-	test('LaTeX in blockquotes with display math', () => {
-		const input =
-			'> **Definition (limit):**  \n>  \\[\n>  \\lim_{x\\to a} f(x) = L\n>  \\]\n>  means that as \\(x\\) gets close to \\(a\\).';
-		const output = preprocessLaTeX(input);
-
-		// Blockquote markers should be preserved, LaTeX should be converted
-		expect(output).toContain('> **Definition (limit):**');
-		expect(output).toContain('$$');
-		expect(output).toContain('$x$');
-		expect(output).not.toContain('\\[');
-		expect(output).not.toContain('\\]');
-		expect(output).not.toContain('\\(');
-		expect(output).not.toContain('\\)');
-	});
-
-	test('LaTeX in blockquotes with inline math', () => {
-		const input =
-			"> The derivative \\(f'(x)\\) at point \\(x=a\\) measures slope.\n> Formula: \\(f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}\\)";
-		const output = preprocessLaTeX(input);
-
-		// Blockquote markers should be preserved, inline LaTeX converted to $...$
-		expect(output).toContain("> The derivative $f'(x)$ at point $x=a$ measures slope.");
-		expect(output).toContain("> Formula: $f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}$");
-	});
-
-	test('Mixed content with blockquotes and regular text', () => {
-		const input =
-			'Regular text with \\(x^2\\).\n\n> Quote with \\(y^2\\).\n\nMore text with \\(z^2\\).';
-		const output = preprocessLaTeX(input);
-
-		// All LaTeX should be converted, blockquote markers preserved
-		expect(output).toBe('Regular text with $x^2$.\n\n> Quote with $y^2$.\n\nMore text with $z^2$.');
-	});
-});

tools/server/webui/src/lib/utils/model-names.test.ts

@@ -1,51 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { isValidModelName, normalizeModelName } from './model-names';
-
-describe('normalizeModelName', () => {
-	it('preserves Hugging Face org/model format (single slash)', () => {
-		// Single slash is treated as Hugging Face format and preserved
-		expect(normalizeModelName('meta-llama/Llama-3.1-8B')).toBe('meta-llama/Llama-3.1-8B');
-		expect(normalizeModelName('models/model-name-1')).toBe('models/model-name-1');
-	});
-
-	it('extracts filename from multi-segment paths', () => {
-		// Multiple slashes -> extract just the filename
-		expect(normalizeModelName('path/to/model/model-name-2')).toBe('model-name-2');
-		expect(normalizeModelName('/absolute/path/to/model')).toBe('model');
-	});
-
-	it('extracts filename from backslash paths', () => {
-		expect(normalizeModelName('C\\Models\\model-name-1')).toBe('model-name-1');
-		expect(normalizeModelName('path\\to\\model\\model-name-2')).toBe('model-name-2');
-	});
-
-	it('handles mixed path separators', () => {
-		expect(normalizeModelName('path/to\\model/model-name-2')).toBe('model-name-2');
-	});
-
-	it('returns simple names as-is', () => {
-		expect(normalizeModelName('simple-model')).toBe('simple-model');
-		expect(normalizeModelName('model-name-2')).toBe('model-name-2');
-	});
-
-	it('trims whitespace', () => {
-		expect(normalizeModelName('  model-name  ')).toBe('model-name');
-	});
-
-	it('returns empty string for empty input', () => {
-		expect(normalizeModelName('')).toBe('');
-		expect(normalizeModelName('   ')).toBe('');
-	});
-});
-
-describe('isValidModelName', () => {
-	it('returns true for valid names', () => {
-		expect(isValidModelName('model')).toBe(true);
-		expect(isValidModelName('path/to/model.bin')).toBe(true);
-	});
-
-	it('returns false for empty values', () => {
-		expect(isValidModelName('')).toBe(false);
-		expect(isValidModelName('   ')).toBe(false);
-	});
-});

tools/server/webui/src/lib/utils/text.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a shortened preview of the provided content capped at the given length.
+ * Appends an ellipsis when the content exceeds the maximum.
+ */
+export function getPreviewText(content: string, max = 150): string {
+	return content.length > max ? content.slice(0, max) + '...' : content;
+}

tools/server/webui/src/routes/+layout.svelte

@@ -14,6 +14,7 @@
 	import { goto } from '$app/navigation';
 	import { modelsStore } from '$lib/stores/models.svelte';
 	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
+	import { IsMobile } from '$lib/hooks/is-mobile.svelte';
 
 	let { children } = $props();
 
@@ -21,6 +22,10 @@
 	let isHomeRoute = $derived(page.route.id === '/');
 	let isNewChatMode = $derived(page.url.searchParams.get('new_chat') === 'true');
 	let showSidebarByDefault = $derived(activeMessages().length > 0 || isLoading());
+	let alwaysShowSidebarOnDesktop = $derived(config().alwaysShowSidebarOnDesktop);
+	let autoShowSidebarOnNewChat = $derived(config().autoShowSidebarOnNewChat);
+	let isMobile = new IsMobile();
+	let isDesktop = $derived(!isMobile.current);
 	let sidebarOpen = $state(false);
 	let innerHeight = $state<number | undefined>();
 	let chatSidebar:
@@ -76,6 +81,11 @@
 	}
 
 	$effect(() => {
+		if (alwaysShowSidebarOnDesktop && isDesktop) {
+			sidebarOpen = true;
+			return;
+		}
+
 		if (isHomeRoute && !isNewChatMode) {
 			// Auto-collapse sidebar when navigating to home route (but not in new chat mode)
 			sidebarOpen = false;
@@ -83,8 +93,11 @@
 			// Keep sidebar open in new chat mode
 			sidebarOpen = true;
 		} else if (isChatRoute) {
-			// On chat routes, show sidebar by default
-			sidebarOpen = true;
+			// On chat routes, only auto-show sidebar if setting is enabled
+			if (autoShowSidebarOnNewChat) {
+				sidebarOpen = true;
+			}
+			// If setting is disabled, don't change sidebar state - let user control it manually
 		} else {
 			// Other routes follow default behavior
 			sidebarOpen = showSidebarByDefault;
@@ -190,12 +203,14 @@
 				<ChatSidebar bind:this={chatSidebar} />
 			</Sidebar.Root>
 
-			<Sidebar.Trigger
-				class="transition-left absolute left-0 z-[900] h-8 w-8 duration-200 ease-linear {sidebarOpen
-					? 'md:left-[var(--sidebar-width)]'
-					: ''}"
-				style="translate: 1rem 1rem;"
-			/>
+			{#if !(alwaysShowSidebarOnDesktop && isDesktop)}
+				<Sidebar.Trigger
+					class="transition-left absolute left-0 z-[900] h-8 w-8 duration-200 ease-linear {sidebarOpen
+						? 'md:left-[var(--sidebar-width)]'
+						: ''}"
+					style="translate: 1rem 1rem;"
+				/>
+			{/if}
 
 			<Sidebar.Inset class="flex flex-1 flex-col overflow-hidden">
 				{@render children?.()}