From 43c30428a66df9092880669b89ecfdc4e31bd796 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 28 Feb 2026 21:16:53 -0600
Subject: [PATCH] refac

---
 src/lib/components/chat/MessageInput.svelte   |   8 +-
 .../chat/MessageInput/TerminalMenu.svelte     | 279 +++++++++---------
 2 files changed, 149 insertions(+), 138 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 46932e30dc..a222783be5 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1014,7 +1014,7 @@
 			}
 
 			tools.set(await getTools(localStorage.token));
-		}
+		};
 		initialize();
 
 		return () => {
@@ -1031,7 +1031,7 @@
 				dropzoneElement.removeEventListener('drop', onDrop);
 				dropzoneElement.removeEventListener('dragleave', onDragLeave);
 			}
-		}
+		};
 	});
 </script>
 
@@ -1809,7 +1809,9 @@
 
 										{#if (!history?.currentId || history.messages[history.currentId]?.done == true) && ($_user?.role === 'admin' || ($_user?.permissions?.chat?.stt ?? true))}
 											<!-- Terminal Server Selector -->
-											<TerminalMenu bind:show={showTerminalMenu} />
+											{#if ($terminalServers ?? []).length > 0 || ($settings?.terminalServers ?? []).some((s) => s.url)}
+												<TerminalMenu bind:show={showTerminalMenu} />
+											{/if}
 
 											<!-- {$i18n.t('Record voice')} -->
 											<Tooltip content={$i18n.t('Dictate')}>
diff --git a/src/lib/components/chat/MessageInput/TerminalMenu.svelte b/src/lib/components/chat/MessageInput/TerminalMenu.svelte
index aebdb758de..bfe4814231 100644
--- a/src/lib/components/chat/MessageInput/TerminalMenu.svelte
+++ b/src/lib/components/chat/MessageInput/TerminalMenu.svelte
@@ -84,119 +84,56 @@
 	$: selectedDirectTerminal = directTerminals.find((t) => t.url === $selectedTerminalId);
 
 	$: selectedLabel =
-		selectedSystemTerminal?.name ??
-		selectedDirectTerminal?.name ??
-		selectedDirectTerminal?.url?.replace(/^https?:\/\//, '') ??
-		null;
+		selectedSystemTerminal?.name ||
+		selectedSystemTerminal?.id ||
+		selectedDirectTerminal?.name ||
+		selectedDirectTerminal?.url?.replace(/^https?:\/\//, '') ||
+		$i18n.t('Terminal');
 </script>
 
-<Dropdown bind:show>
-	<Tooltip content={$i18n.t('Terminal')} placement="top">
-		<button
-			type="button"
-			class="flex items-center gap-1.5 px-2 py-1.5 text-sm transition rounded-lg cursor-pointer"
-		>
-			<Cloud className="size-3.5" strokeWidth="2" />
-			{#if $selectedTerminalId && selectedLabel}
-				<span class="truncate text-xs max-w-[100px] sm:max-w-[150px]">{selectedLabel}</span>
-			{/if}
-		</button>
-	</Tooltip>
+<div class="flex items-center translate-x-0.5">
+	<Dropdown bind:show>
+		<Tooltip content={$i18n.t('Terminal')} placement="top">
+			<button
+				type="button"
+				class="flex items-center gap-1.5 translate-y-[1px] hover:bg-gray-50 dark:hover:bg-gray-850 text-sm transition rounded-lg cursor-pointer {$selectedTerminalId &&
+				selectedLabel
+					? ' px-2.5 py-1 '
+					: ' p-2 opacity-50'}"
+			>
+				<Cloud className="size-3.5" strokeWidth="2" />
 
-	<div slot="content">
-		<DropdownMenu.Content
-			class="w-full max-w-56 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
-			sideOffset={4}
-			side="bottom"
-			align="end"
-			transition={flyAndScale}
-		>
-			<!-- Direct terminals (gated by permission) -->
-			{#if directTerminals.length > 0 && ($user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true))}
-				<div class="flex items-center justify-between px-3 py-1">
-					<span
-						class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider"
+				{#if $selectedTerminalId && selectedLabel}
+					<span class="truncate text-[13px] max-w-[100px] sm:max-w-[150px] capitalize"
+						>{selectedLabel}</span
 					>
-						{$i18n.t('Direct')}
-					</span>
-					<Tooltip content={$i18n.t('Add Terminal')} placement="top">
-						<button
-							type="button"
-							class="p-0.5 rounded-md text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition"
-							on:click|stopPropagation={() => {
-								show = false;
-								showSettings.set(true);
-							}}
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
-								fill="currentColor"
-								class="size-3.5"
-							>
-								<path
-									d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
-								/>
-							</svg>
-						</button>
-					</Tooltip>
-				</div>
-
-				{#each directTerminals as terminal}
-					<button
-						type="button"
-						class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {$selectedTerminalId ===
-						terminal.url
-							? 'bg-gray-50 dark:bg-gray-800/50'
-							: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
-						on:click={() => selectDirect(terminal)}
-					>
-						<div class="flex flex-1 gap-2 items-center truncate">
-							<Cloud className="size-4 shrink-0" strokeWidth="2" />
-							<span class="truncate"
-								>{terminal.name || terminal.url.replace(/^https?:\/\//, '')}</span
-							>
-						</div>
-						{#if $selectedTerminalId === terminal.url}
-							<div class="shrink-0 text-emerald-600 dark:text-emerald-400">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 20 20"
-									fill="currentColor"
-									class="size-4"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							</div>
-						{/if}
-					</button>
-				{/each}
-
-				{#if directTerminals.length > 0 && systemTerminals.length > 0}
-					<hr class="border-gray-100 dark:border-gray-800 my-1" />
 				{/if}
-			{/if}
+			</button>
+		</Tooltip>
 
-			<!-- System terminals -->
-			{#if systemTerminals.length > 0}
-				<div class="flex items-center justify-between px-3 py-1">
-					<span
-						class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider"
-					>
-						{$i18n.t('System')}
-					</span>
-					{#if $user?.role === 'admin'}
+		<div slot="content">
+			<DropdownMenu.Content
+				class="w-full max-w-56 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
+				sideOffset={4}
+				side="bottom"
+				align="end"
+				transition={flyAndScale}
+			>
+				<!-- Direct terminals (gated by permission) -->
+				{#if directTerminals.length > 0 && ($user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true))}
+					<div class="flex items-center justify-between px-3 py-1">
+						<span
+							class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider"
+						>
+							{$i18n.t('Direct')}
+						</span>
 						<Tooltip content={$i18n.t('Add Terminal')} placement="top">
 							<button
 								type="button"
 								class="p-0.5 rounded-md text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition"
 								on:click|stopPropagation={() => {
 									show = false;
-									goto('/admin/settings/integrations');
+									showSettings.set(true);
 								}}
 							>
 								<svg
@@ -211,41 +148,113 @@
 								</svg>
 							</button>
 						</Tooltip>
-					{/if}
-				</div>
+					</div>
 
-				{#each systemTerminals as terminal}
-					<button
-						type="button"
-						class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {$selectedTerminalId ===
-						terminal.id
-							? 'bg-gray-50 dark:bg-gray-800/50'
-							: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
-						on:click={() => selectSystem(terminal)}
-					>
-						<div class="flex flex-1 gap-2 items-center truncate">
-							<Cloud className="size-4 shrink-0" strokeWidth="2" />
-							<span class="truncate">{terminal.name || $i18n.t('Terminal')}</span>
-						</div>
-						{#if $selectedTerminalId === terminal.id}
-							<div class="shrink-0 text-emerald-600 dark:text-emerald-400">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 20 20"
-									fill="currentColor"
-									class="size-4"
+					{#each directTerminals as terminal}
+						<button
+							type="button"
+							class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {$selectedTerminalId ===
+							terminal.url
+								? 'bg-gray-50 dark:bg-gray-800/50'
+								: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
+							on:click={() => selectDirect(terminal)}
+						>
+							<div class="flex flex-1 gap-2 items-center truncate">
+								<Cloud className="size-4 shrink-0" strokeWidth="2" />
+								<span class="truncate"
+									>{terminal.name || terminal.url.replace(/^https?:\/\//, '')}</span
 								>
-									<path
-										fill-rule="evenodd"
-										d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-										clip-rule="evenodd"
-									/>
-								</svg>
 							</div>
+							{#if $selectedTerminalId === terminal.url}
+								<div class="shrink-0 text-emerald-600 dark:text-emerald-400">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="size-4"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</div>
+							{/if}
+						</button>
+					{/each}
+
+					{#if directTerminals.length > 0 && systemTerminals.length > 0}
+						<hr class="border-gray-100 dark:border-gray-800 my-1" />
+					{/if}
+				{/if}
+
+				<!-- System terminals -->
+				{#if systemTerminals.length > 0}
+					<div class="flex items-center justify-between px-3 py-1">
+						<span
+							class="text-[10px] font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider"
+						>
+							{$i18n.t('System')}
+						</span>
+						{#if $user?.role === 'admin'}
+							<Tooltip content={$i18n.t('Add Terminal')} placement="top">
+								<button
+									type="button"
+									class="p-0.5 rounded-md text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition"
+									on:click|stopPropagation={() => {
+										show = false;
+										goto('/admin/settings/integrations');
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="size-3.5"
+									>
+										<path
+											d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+										/>
+									</svg>
+								</button>
+							</Tooltip>
 						{/if}
-					</button>
-				{/each}
-			{/if}
-		</DropdownMenu.Content>
-	</div>
-</Dropdown>
+					</div>
+
+					{#each systemTerminals as terminal}
+						<button
+							type="button"
+							class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {$selectedTerminalId ===
+							terminal.id
+								? 'bg-gray-50 dark:bg-gray-800/50'
+								: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
+							on:click={() => selectSystem(terminal)}
+						>
+							<div class="flex flex-1 gap-2 items-center truncate">
+								<Cloud className="size-4 shrink-0" strokeWidth="2" />
+								<span class="truncate">{terminal.name || $i18n.t('Terminal')}</span>
+							</div>
+							{#if $selectedTerminalId === terminal.id}
+								<div class="shrink-0 text-emerald-600 dark:text-emerald-400">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="size-4"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</div>
+							{/if}
+						</button>
+					{/each}
+				{/if}
+			</DropdownMenu.Content>
+		</div>
+	</Dropdown>
+</div>