From 9b4f0326608468ea3b538fc2f5a7eca888bcf204 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 5 Oct 2025 23:35:04 -0500
Subject: [PATCH] refac: external tool server view

---
 .../components/admin/Settings/Tools.svelte    |  2 +-
 .../chat/Settings/Tools/Connection.svelte     | 37 ++++++-------------
 2 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/admin/Settings/Tools.svelte b/src/lib/components/admin/Settings/Tools.svelte
index 28a30b23b5..f0169a0eca 100644
--- a/src/lib/components/admin/Settings/Tools.svelte
+++ b/src/lib/components/admin/Settings/Tools.svelte
@@ -83,7 +83,7 @@
 							</Tooltip>
 						</div>
 
-						<div class="flex flex-col gap-1.5">
+						<div class="flex flex-col gap-1">
 							{#each servers as server, idx}
 								<Connection
 									bind:connection={server}
diff --git a/src/lib/components/chat/Settings/Tools/Connection.svelte b/src/lib/components/chat/Settings/Tools/Connection.svelte
index 3b07a1d679..6c8fece82f 100644
--- a/src/lib/components/chat/Settings/Tools/Connection.svelte
+++ b/src/lib/components/chat/Settings/Tools/Connection.svelte
@@ -7,6 +7,7 @@
 	import Cog6 from '$lib/components/icons/Cog6.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import AddToolServerModal from '$lib/components/AddToolServerModal.svelte';
+	import WrenchAlt from '$lib/components/icons/WrenchAlt.svelte';
 
 	export let onDelete = () => {};
 	export let onSubmit = () => {};
@@ -41,33 +42,19 @@
 />
 
 <div class="flex w-full gap-2 items-center">
-	<Tooltip
-		className="w-full relative"
-		content={$i18n.t(`WebUI will make requests to "{{url}}"`, {
-			url: `${connection?.url}/${connection?.path ?? 'openapi.json'}`
-		})}
-		placement="top-start"
-	>
+	<Tooltip className="w-full relative" content={''} placement="top-start">
 		<div class="flex w-full">
-			<div class="flex-1 relative">
-				<input
-					class=" outline-hidden w-full bg-transparent {!(connection?.config?.enable ?? true)
-						? 'opacity-50'
-						: ''}"
-					placeholder={$i18n.t('API Base URL')}
-					bind:value={connection.url}
-					autocomplete="off"
-				/>
+			<div
+				class="flex-1 relative flex gap-1.5 items-center {!(connection?.config?.enable ?? true)
+					? 'opacity-50'
+					: ''}"
+			>
+				<WrenchAlt />
+				<div class=" capitalize outline-hidden w-full bg-transparent">
+					{connection?.info?.name ?? connection?.url}
+					<span class="text-gray-500">{connection?.info?.id}</span>
+				</div>
 			</div>
-
-			{#if (connection?.auth_type ?? 'bearer') === 'bearer'}
-				<SensitiveInput
-					inputClassName=" outline-hidden bg-transparent w-full"
-					placeholder={$i18n.t('API Key')}
-					bind:value={connection.key}
-					required={false}
-				/>
-			{/if}
 		</div>
 	</Tooltip>