From cafb9c09d33787b2e4c69450f01347cc54884dc8 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 19 Jan 2026 16:55:46 +0100
Subject: [PATCH] feat: UI improvements

---
 .../app/dialogs/DialogMcpServersSettings.svelte      |  4 ++--
 .../app/mcp/McpServerCard/McpServerCard.svelte       | 10 +++++-----
 .../src/lib/components/app/mcp/McpServerForm.svelte  |  8 +++++---
 .../src/lib/components/app/misc/KeyValuePairs.svelte | 12 +++++++-----
 4 files changed, 19 insertions(+), 15 deletions(-)

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 33a931e33e..f483b7682e 100644
--- a/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
+++ b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
@@ -21,7 +21,7 @@
 			md:h-[80vh] md:max-h-[80vh] md:min-h-0 md:rounded-lg"
 		style="max-width: 56rem;"
 	>
-		<div class="border-b p-4 md:p-6">
+		<div class="border-b border-border/30 p-4 md:p-6">
 			<Dialog.Title class="inline-flex items-center text-lg font-semibold">
 				<McpLogo class="mr-2 inline h-4 w-4" />
 
@@ -36,7 +36,7 @@
 			<McpSettingsSection />
 		</div>
 
-		<div class="flex items-center justify-end gap-3 border-t p-4 md:p-6">
+		<div class="flex items-center justify-end gap-3 border-t border-border/30 p-4 md:p-6">
 			<Button onclick={handleClose}>Close</Button>
 		</div>
 	</Dialog.Content>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
index de6860bee4..d911d08171 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
@@ -127,18 +127,18 @@
 		/>
 
 		{#if isError && errorMessage}
-			<p class="mt-2 text-xs text-destructive">{errorMessage}</p>
+			<p class="text-xs text-destructive">{errorMessage}</p>
 		{/if}
 
 		{#if isConnected && serverInfo?.description}
-			<p class="mt-3 line-clamp-2 text-xs text-muted-foreground">
+			<p class="line-clamp-2 text-xs text-muted-foreground">
 				{serverInfo.description}
 			</p>
 		{/if}
 
-		<div class="mt-2 grid gap-3">
+		<div class="grid gap-3">
 			{#if isConnected && instructions}
-				<McpServerInfo {instructions} class="mt-3" />
+				<McpServerInfo {instructions} />
 			{/if}
 
 			{#if tools.length > 0}
@@ -150,7 +150,7 @@
 			{/if}
 		</div>
 
-		<div class="mt-4 flex justify-between gap-4">
+		<div class="flex justify-between gap-4">
 			{#if protocolVersion}
 				<div class="flex flex-wrap items-center gap-1">
 					<span class="text-[10px] text-muted-foreground">
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerForm.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerForm.svelte
index 41cb82cc2e..11d7a8667a 100644
--- a/tools/server/webui/src/lib/components/app/mcp/McpServerForm.svelte
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerForm.svelte
@@ -32,11 +32,12 @@
 	}
 </script>
 
-<div class="space-y-3">
+<div class="grid gap-3">
 	<div>
-		<label for="server-url-{id}" class="mb-1 block text-xs font-medium">
+		<label for="server-url-{id}" class="mb-2 block text-xs font-medium">
 			Server URL <span class="text-destructive">*</span>
 		</label>
+
 		<Input
 			id="server-url-{id}"
 			type="url"
@@ -45,8 +46,9 @@
 			oninput={(e) => onUrlChange(e.currentTarget.value)}
 			class={urlError ? 'border-destructive' : ''}
 		/>
+
 		{#if urlError}
-			<p class="mt-1 text-xs text-destructive">{urlError}</p>
+			<p class="mt-1.5 text-xs text-destructive">{urlError}</p>
 		{/if}
 	</div>
 
diff --git a/tools/server/webui/src/lib/components/app/misc/KeyValuePairs.svelte b/tools/server/webui/src/lib/components/app/misc/KeyValuePairs.svelte
index 586b51edc2..504692cbed 100644
--- a/tools/server/webui/src/lib/components/app/misc/KeyValuePairs.svelte
+++ b/tools/server/webui/src/lib/components/app/misc/KeyValuePairs.svelte
@@ -48,7 +48,7 @@
 </script>
 
 <div>
-	<div class="mb-1 flex items-center justify-between">
+	<div class="mb-2 flex items-center justify-between">
 		{#if sectionLabel}
 			<span class="text-xs font-medium">
 				{sectionLabel}
@@ -60,7 +60,7 @@
 
 		<button
 			type="button"
-			class="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+			class="inline-flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
 			onclick={addPair}
 		>
 			<Plus class="h-3 w-3" />
@@ -68,9 +68,9 @@
 		</button>
 	</div>
 	{#if pairs.length > 0}
-		<div class="space-y-2">
+		<div class="space-y-3">
 			{#each pairs as pair, index (index)}
-				<div class="flex items-start gap-2">
+				<div class="flex items-center gap-2">
 					<Input
 						type="text"
 						placeholder={keyPlaceholder}
@@ -78,6 +78,7 @@
 						oninput={(e) => updatePairKey(index, e.currentTarget.value)}
 						class="flex-1"
 					/>
+
 					<textarea
 						placeholder={valuePlaceholder}
 						value={pair.value}
@@ -88,9 +89,10 @@
 						class="flex-1 resize-none rounded-md border border-input bg-transparent px-3 py-2 text-sm leading-5 placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
 						rows="1"
 					></textarea>
+
 					<button
 						type="button"
-						class="shrink-0 p-1 text-muted-foreground hover:text-destructive"
+						class="shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
 						onclick={() => removePair(index)}
 						aria-label="Remove item"
 					>