From db9977926cc917eb15bc8127cadd67d6f64a1363 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 29 Jun 2026 12:43:32 -0500
Subject: [PATCH] refac

---
 .../components/chat/ToolServersModal.svelte   | 69 +++++++++++++++----
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/chat/ToolServersModal.svelte b/src/lib/components/chat/ToolServersModal.svelte
index 71f83f64f3..269a84761d 100644
--- a/src/lib/components/chat/ToolServersModal.svelte
+++ b/src/lib/components/chat/ToolServersModal.svelte
@@ -1,13 +1,8 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte';
-	import { models, config, toolServers, tools, terminalServers } from '$lib/stores';
-
-	import { toast } from 'svelte-sonner';
-	import { deleteSharedChatById, getChatById, shareChatById } from '$lib/apis/chats';
-	import { copyToClipboard } from '$lib/utils';
+	import { getContext } from 'svelte';
+	import { toolServers, tools } from '$lib/stores';
 
 	import Modal from '../common/Modal.svelte';
-	import Link from '../icons/Link.svelte';
 	import Collapsible from '../common/Collapsible.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 
@@ -19,6 +14,25 @@
 	$: selectedTools = ($tools ?? []).filter((tool) => selectedToolIds.includes(tool.id));
 
 	const i18n = getContext('i18n');
+
+	const authStatus = (tool) =>
+		tool?.authenticated === false
+			? {
+					label: $i18n.t('Auth required'),
+					dot: 'bg-amber-500',
+					pill: 'text-amber-700 dark:text-amber-300'
+				}
+			: tool?.authenticated === true
+				? {
+						label: $i18n.t('Connected'),
+						dot: 'bg-green-500',
+						pill: 'text-green-700 dark:text-green-300'
+					}
+				: {
+						label: $i18n.t('No auth'),
+						dot: 'bg-gray-400',
+						pill: 'text-gray-500 dark:text-gray-400'
+					};
 </script>
 
 <Modal bind:show size="md">
@@ -46,22 +60,47 @@
 			<div class="px-5 pb-3 w-full flex flex-col justify-center">
 				<div class=" text-sm dark:text-gray-300 mb-1">
 					{#each selectedTools as tool}
-						<Collapsible buttonClassName="w-full mb-0.5">
-							<div class="truncate">
-								<div class="text-sm font-medium dark:text-gray-100 text-gray-800 truncate">
-									{tool?.name}
+						{@const status = authStatus(tool)}
+						{@const toolSpecs = tool?.specs ?? []}
+						<Collapsible
+							buttonClassName="w-full mb-1 rounded-lg px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+							chevron={toolSpecs.length > 0}
+							disabled={toolSpecs.length === 0}
+						>
+							<div class="min-w-0 flex-1">
+								<div class="flex items-center gap-2 min-w-0">
+									<span class="size-2 rounded-full {status.dot}"></span>
+									<div class="text-sm font-medium dark:text-gray-100 text-gray-800 truncate">
+										{tool?.name}
+									</div>
 								</div>
 
 								{#if tool?.meta?.description}
-									<div class="text-xs text-gray-500">
+									<div class="text-xs text-gray-500 truncate">
 										{tool?.meta?.description}
 									</div>
 								{/if}
 							</div>
 
-							<!-- <div slot="content">
-							{JSON.stringify(tool, null, 2)}
-						</div> -->
+							<div class="ml-3 flex shrink-0 items-center gap-2 text-[11px]">
+								<span class="text-gray-500 dark:text-gray-400">{$i18n.t('Enabled')}</span>
+								<span class={status.pill}>{status.label}</span>
+								{#if toolSpecs.length > 0}
+									<span class="text-gray-500 dark:text-gray-400">
+										{$i18n.t('{{COUNT}} tools', { COUNT: toolSpecs.length })}
+									</span>
+								{/if}
+							</div>
+
+							<div slot="content" class="pl-4 pr-2 pb-2 text-xs text-gray-500 dark:text-gray-400">
+								{#if toolSpecs.length > 0}
+									{#each toolSpecs as toolSpec}
+										<div class="mt-1 truncate">
+											{toolSpec?.name ?? toolSpec?.function?.name}
+										</div>
+									{/each}
+								{/if}
+							</div>
 						</Collapsible>
 					{/each}
 				</div>