From 3a6c88ade94c7633af9a91b7f3905e886075781e Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 27 Feb 2026 16:47:36 -0600
Subject: [PATCH] refac

---
 .../chat/MessageInput/TerminalMenu.svelte     | 151 ++++++++++++------
 1 file changed, 102 insertions(+), 49 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/TerminalMenu.svelte b/src/lib/components/chat/MessageInput/TerminalMenu.svelte
index 848d081f20..cc73f04f2b 100644
--- a/src/lib/components/chat/MessageInput/TerminalMenu.svelte
+++ b/src/lib/components/chat/MessageInput/TerminalMenu.svelte
@@ -66,7 +66,10 @@
 
 		// Disable all direct terminals when switching to a system terminal
 		if ($settings?.terminalServers?.some((s) => s.enabled)) {
-			const updatedServers = ($settings.terminalServers ?? []).map((s) => ({ ...s, enabled: false }));
+			const updatedServers = ($settings.terminalServers ?? []).map((s) => ({
+				...s,
+				enabled: false
+			}));
 			settings.set({
 				...$settings,
 				terminalServers: updatedServers
@@ -111,17 +114,29 @@
 			<!-- Direct terminals (gated by permission) -->
 			{#if $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">
+					<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; showSettings.set(true); }}
+							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
+								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>
@@ -130,69 +145,107 @@
 				{#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
+						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>
+							<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
+									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}
 
-				<hr class="border-gray-100 dark:border-gray-800 my-1" />
+				{#if directTerminals.length > 0 && systemTerminals.length > 0}
+					<hr class="border-gray-100 dark:border-gray-800 my-1" />
+				{/if}
 			{/if}
 
 			<!-- System terminals -->
-			<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}
-			</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 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}
+				</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>