From 3df7d7f1656155027d1dea2ad98a51d06afd9916 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 9 Feb 2026 19:43:09 +0100
Subject: [PATCH] refactor: Cleanup

---
 .../ChatAttachmentMcpResource.svelte          |  43 +---
 .../dialogs/DialogMcpServersSettings.svelte   |   1 -
 .../app/mcp/McpServersSelector.svelte         |  98 ++++-----
 .../app/models/ModelsSelector.svelte          | 194 +++++++++---------
 .../src/lib/stores/conversations.svelte.ts    |   1 -
 5 files changed, 154 insertions(+), 183 deletions(-)

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte
index 7ef28f3f2b..17ad550009 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
-	import { FileText, Loader2, AlertCircle, Database, Image, Code, File } from '@lucide/svelte';
+	import { Loader2, AlertCircle } from '@lucide/svelte';
 	import { cn } from '$lib/components/ui/utils';
 	import { mcpStore } from '$lib/stores/mcp.svelte';
-	import type { MCPResourceAttachment, MCPResourceInfo } from '$lib/types';
-	import {
-		IMAGE_FILE_EXTENSION_REGEX,
-		CODE_FILE_EXTENSION_REGEX,
-		TEXT_FILE_EXTENSION_REGEX
-	} from '$lib/constants/mcp-resource';
-	import { MimeTypePrefix, MimeTypeIncludes, UriPattern } from '$lib/enums';
+	import type { MCPResourceAttachment } from '$lib/types';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { ActionIconRemove } from '$lib/components/app';
+	import { getResourceIcon } from '$lib/utils';
 
 	interface Props {
 		attachment: MCPResourceAttachment;
@@ -21,41 +16,15 @@
 
 	let { attachment, onRemove, onClick, class: className }: Props = $props();
 
-	function getResourceIcon(resource: MCPResourceInfo) {
-		const mimeType = resource.mimeType?.toLowerCase() || '';
-		const uri = resource.uri.toLowerCase();
-
-		if (mimeType.startsWith(MimeTypePrefix.IMAGE) || IMAGE_FILE_EXTENSION_REGEX.test(uri)) {
-			return Image;
-		}
-
-		if (
-			mimeType.includes(MimeTypeIncludes.JSON) ||
-			mimeType.includes(MimeTypeIncludes.JAVASCRIPT) ||
-			mimeType.includes(MimeTypeIncludes.TYPESCRIPT) ||
-			CODE_FILE_EXTENSION_REGEX.test(uri)
-		) {
-			return Code;
-		}
-
-		if (mimeType.includes(MimeTypePrefix.TEXT) || TEXT_FILE_EXTENSION_REGEX.test(uri)) {
-			return FileText;
-		}
-
-		if (uri.includes(UriPattern.DATABASE_KEYWORD) || uri.includes(UriPattern.DATABASE_SCHEME)) {
-			return Database;
-		}
-
-		return File;
-	}
-
 	function getStatusClass(attachment: MCPResourceAttachment): string {
 		if (attachment.error) return 'border-red-500/50 bg-red-500/10';
 		if (attachment.loading) return 'border-border/50 bg-muted/30';
 		return 'border-border/50 bg-muted/30';
 	}
 
-	const ResourceIcon = $derived(getResourceIcon(attachment.resource));
+	const ResourceIcon = $derived(
+		getResourceIcon(attachment.resource.mimeType, attachment.resource.uri)
+	);
 	const serverName = $derived(mcpStore.getServerDisplayName(attachment.resource.serverName));
 	const favicon = $derived(mcpStore.getServerFavicon(attachment.resource.serverName));
 </script>
diff --git a/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
index 51bd86d812..f0cd325d49 100644
--- a/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
+++ b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import * as Dialog from '$lib/components/ui/dialog';
 	import { McpLogo, McpServersSettings } from '$lib/components/app';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
 
 	interface Props {
 		onOpenChange?: (open: boolean) => void;
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServersSelector.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServersSelector.svelte
index 0d1707c1c0..991ce1b8c6 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpServersSelector.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServersSelector.svelte
@@ -100,59 +100,61 @@
 				emptyMessage="No servers found"
 				isEmpty={filteredMcpServers.length === 0}
 			>
+				<div class="max-h-64 overflow-y-auto">
+					{#each filteredMcpServers as server (server.id)}
+						{@const healthState = mcpStore.getHealthCheckState(server.id)}
+						{@const hasError = healthState.status === HealthCheckStatus.ERROR}
+						{@const isEnabledForChat = isServerEnabledForChat(server.id)}
 
-		<div class="max-h-64 overflow-y-auto">
-			{#each filteredMcpServers as server (server.id)}
-				{@const healthState = mcpStore.getHealthCheckState(server.id)}
-				{@const hasError = healthState.status === HealthCheckStatus.ERROR}
-				{@const isEnabledForChat = isServerEnabledForChat(server.id)}
+						<button
+							type="button"
+							class="flex w-full items-center justify-between gap-2 px-2 py-2 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+							onclick={() => !hasError && toggleServerForChat(server.id)}
+							disabled={hasError}
+						>
+							<div class="flex min-w-0 flex-1 items-center gap-2">
+								{#if getFaviconUrl(server.url)}
+									<img
+										src={getFaviconUrl(server.url)}
+										alt=""
+										class="h-4 w-4 shrink-0 rounded-sm"
+										onerror={(e) => {
+											(e.currentTarget as HTMLImageElement).style.display = 'none';
+										}}
+									/>
+								{/if}
 
-				<button
-					type="button"
-					class="flex w-full items-center justify-between gap-2 px-2 py-2 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
-					onclick={() => !hasError && toggleServerForChat(server.id)}
-					disabled={hasError}
-				>
-					<div class="flex min-w-0 flex-1 items-center gap-2">
-						{#if getFaviconUrl(server.url)}
-							<img
-								src={getFaviconUrl(server.url)}
-								alt=""
-								class="h-4 w-4 shrink-0 rounded-sm"
-								onerror={(e) => {
-									(e.currentTarget as HTMLImageElement).style.display = 'none';
-								}}
+								<span class="truncate text-sm">{getServerLabel(server)}</span>
+
+								{#if hasError}
+									<span
+										class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
+									>
+										Error
+									</span>
+								{/if}
+							</div>
+
+							<Switch
+								checked={isEnabledForChat}
+								disabled={hasError}
+								onclick={(e: MouseEvent) => e.stopPropagation()}
+								onCheckedChange={() => toggleServerForChat(server.id)}
 							/>
-						{/if}
+						</button>
+					{/each}
+				</div>
 
-						<span class="truncate text-sm">{getServerLabel(server)}</span>
+				{#snippet footer()}
+					<DropdownMenu.Item
+						class="flex cursor-pointer items-center gap-2"
+						onclick={onSettingsClick}
+					>
+						<Settings class="h-4 w-4" />
 
-						{#if hasError}
-							<span
-								class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
-							>
-								Error
-							</span>
-						{/if}
-					</div>
-
-					<Switch
-						checked={isEnabledForChat}
-						disabled={hasError}
-						onclick={(e: MouseEvent) => e.stopPropagation()}
-						onCheckedChange={() => toggleServerForChat(server.id)}
-					/>
-				</button>
-			{/each}
-		</div>
-
-		{#snippet footer()}
-			<DropdownMenu.Item class="flex cursor-pointer items-center gap-2" onclick={onSettingsClick}>
-				<Settings class="h-4 w-4" />
-
-				<span>Manage MCP Servers</span>
-			</DropdownMenu.Item>
-		{/snippet}
+						<span>Manage MCP Servers</span>
+					</DropdownMenu.Item>
+				{/snippet}
 			</DropdownMenuSearchable>
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
diff --git a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
index d7d528e3ad..f6b16408ca 100644
--- a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
+++ b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
@@ -301,7 +301,10 @@
 					</button>
 				</DropdownMenu.Trigger>
 
-				<DropdownMenu.Content align="end" class="w-full max-w-[100vw] pt-0 sm:w-max sm:max-w-[calc(100vw-2rem)]">
+				<DropdownMenu.Content
+					align="end"
+					class="w-full max-w-[100vw] pt-0 sm:w-max sm:max-w-[calc(100vw-2rem)]"
+				>
 					<DropdownMenuSearchable
 						bind:searchValue={searchTerm}
 						placeholder="Search models..."
@@ -309,104 +312,103 @@
 						emptyMessage="No models found."
 						isEmpty={filteredOptions.length === 0 && isCurrentModelInCache()}
 					>
+						<div class="models-list">
+							{#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 p-2 text-left text-sm text-red-400"
+									role="option"
+									aria-selected="true"
+									aria-disabled="true"
+									disabled
+								>
+									<span
+										class="min-w-0 flex-1 truncate text-left sm:overflow-visible sm:text-clip sm:whitespace-nowrap"
+									>
+										{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 isHighlighted = index === highlightedIndex}
 
-				<div class="models-list">
-					{#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 p-2 text-left text-sm text-red-400"
-							role="option"
-							aria-selected="true"
-							aria-disabled="true"
-							disabled
-						>
-							<span
-								class="min-w-0 flex-1 truncate text-left sm:overflow-visible sm:text-clip sm:whitespace-nowrap"
-							>
-								{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 isHighlighted = index === highlightedIndex}
+								<div
+									class={cn(
+										'group flex w-full items-center gap-2 rounded-sm p-2 text-left text-sm transition focus:outline-none',
+										'cursor-pointer hover:bg-muted focus:bg-muted',
+										isSelected || isHighlighted
+											? 'bg-accent text-accent-foreground'
+											: 'hover:bg-accent hover:text-accent-foreground',
+										isLoaded ? 'text-popover-foreground' : 'text-muted-foreground'
+									)}
+									role="option"
+									aria-selected={isSelected || isHighlighted}
+									tabindex="0"
+									onclick={() => handleSelect(option.id)}
+									onmouseenter={() => (highlightedIndex = index)}
+									onkeydown={(e) => {
+										if (e.key === 'Enter' || e.key === ' ') {
+											e.preventDefault();
+											handleSelect(option.id);
+										}
+									}}
+								>
+									<span
+										class="min-w-0 flex-1 truncate text-left sm:overflow-visible sm:pr-2 sm:text-clip sm:whitespace-nowrap"
+									>
+										{option.model}
+									</span>
 
-						<div
-							class={cn(
-								'group flex w-full items-center gap-2 rounded-sm p-2 text-left text-sm transition focus:outline-none',
-								'cursor-pointer hover:bg-muted focus:bg-muted',
-								isSelected || isHighlighted
-									? 'bg-accent text-accent-foreground'
-									: 'hover:bg-accent hover:text-accent-foreground',
-								isLoaded ? 'text-popover-foreground' : 'text-muted-foreground'
-							)}
-							role="option"
-							aria-selected={isSelected || isHighlighted}
-							tabindex="0"
-							onclick={() => handleSelect(option.id)}
-							onmouseenter={() => (highlightedIndex = index)}
-							onkeydown={(e) => {
-								if (e.key === 'Enter' || e.key === ' ') {
-									e.preventDefault();
-									handleSelect(option.id);
-								}
-							}}
-						>
-							<span
-								class="min-w-0 flex-1 truncate text-left sm:overflow-visible sm:pr-2 sm:text-clip sm:whitespace-nowrap"
-							>
-								{option.model}
-							</span>
-
-							<div class="flex w-6 shrink-0 justify-center">
-								{#if isLoading}
-									<Tooltip.Root>
-										<Tooltip.Trigger>
-											<Loader2 class="h-4 w-4 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 flex h-4 w-4 items-center justify-center"
-												onclick={(e) => {
-													e.stopPropagation();
-													modelsStore.unloadModel(option.model);
-												}}
-											>
-												<span
-													class="h-2 w-2 rounded-full bg-green-500 transition-opacity group-hover:opacity-0"
-												></span>
-												<Power
-													class="absolute 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="h-2 w-2 rounded-full bg-muted-foreground/50"></span>
-								{/if}
-							</div>
+									<div class="flex w-6 shrink-0 justify-center">
+										{#if isLoading}
+											<Tooltip.Root>
+												<Tooltip.Trigger>
+													<Loader2 class="h-4 w-4 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 flex h-4 w-4 items-center justify-center"
+														onclick={(e) => {
+															e.stopPropagation();
+															modelsStore.unloadModel(option.model);
+														}}
+													>
+														<span
+															class="h-2 w-2 rounded-full bg-green-500 transition-opacity group-hover:opacity-0"
+														></span>
+														<Power
+															class="absolute 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="h-2 w-2 rounded-full bg-muted-foreground/50"></span>
+										{/if}
+									</div>
+								</div>
+							{/each}
 						</div>
-					{/each}
-					</div>
 					</DropdownMenuSearchable>
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
diff --git a/tools/server/webui/src/lib/stores/conversations.svelte.ts b/tools/server/webui/src/lib/stores/conversations.svelte.ts
index 18bb5eb887..ec1daa90d9 100644
--- a/tools/server/webui/src/lib/stores/conversations.svelte.ts
+++ b/tools/server/webui/src/lib/stores/conversations.svelte.ts
@@ -24,7 +24,6 @@ import { toast } from 'svelte-sonner';
 import { DatabaseService } from '$lib/services/database.service';
 import { config } from '$lib/stores/settings.svelte';
 import { filterByLeafNodeId, findLeafNode } from '$lib/utils';
-import { mcpStore } from '$lib/stores/mcp.svelte';
 import type { McpServerOverride } from '$lib/types/database';
 import { MessageRole } from '$lib/enums';