From f01f5cb287e30c72722d2244c232cbfe012ccb08 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sun, 20 Sep 2026 15:24:11 +0200
Subject: [PATCH] ui : grow the backend cards to the height of the add slot

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../app/backends/BackendCard.svelte           |  2 +-
 .../app/backends/SettingsBackends.svelte      | 28 ++++++++++++++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/tools/ui/src/lib/components/app/backends/BackendCard.svelte b/tools/ui/src/lib/components/app/backends/BackendCard.svelte
index 018e0dfb58..2009343f83 100644
--- a/tools/ui/src/lib/components/app/backends/BackendCard.svelte
+++ b/tools/ui/src/lib/components/app/backends/BackendCard.svelte
@@ -60,7 +60,7 @@
 		</div>
 	</div>
 
-	<div class="flex items-center justify-between gap-4">
+	<div class="mt-auto flex items-center justify-between gap-4">
 		<div class="flex items-center gap-2">
 			<Switch checked={backend.enabled} onCheckedChange={(value) => onToggle?.(value)} />
 
diff --git a/tools/ui/src/lib/components/app/backends/SettingsBackends.svelte b/tools/ui/src/lib/components/app/backends/SettingsBackends.svelte
index 1e1edd0cf2..6729af8a0e 100644
--- a/tools/ui/src/lib/components/app/backends/SettingsBackends.svelte
+++ b/tools/ui/src/lib/components/app/backends/SettingsBackends.svelte
@@ -2,7 +2,7 @@
 	import { Plus } from '@lucide/svelte';
 	import { BackendCard, DialogBackendForm } from '$lib/components/app/backends';
 	import { Button } from '$lib/components/ui/button';
-	import * as Card from '$lib/components/ui/card';
+	import * as Empty from '$lib/components/ui/empty';
 	import { backendsModelsStore, backendsStore, serverStore } from '$lib/stores';
 	import type { Backend, BackendProtocol } from '$lib/types';
 	import { fade } from 'svelte/transition';
@@ -76,11 +76,25 @@
 		/>
 	{/each}
 
-	<Card.Root class="items-center justify-center gap-3! border-dashed bg-muted/30 p-4">
-		<Button onclick={handleAdd} size="sm" variant="outline">
-			<Plus />
+	<Empty.Root class="border">
+		<Empty.Header>
+			<Empty.Media variant="icon">
+				<Plus />
+			</Empty.Media>
 
-			Add backend
-		</Button>
-	</Card.Root>
+			<Empty.Title>{isLlamaCpp ? 'Add a llama.cpp backend' : 'Add a backend'}</Empty.Title>
+
+			<Empty.Description>
+				{isLlamaCpp ? 'Point at another llama-server.' : 'Connect an OpenAI-compatible endpoint.'}
+			</Empty.Description>
+		</Empty.Header>
+
+		<Empty.Content>
+			<Button onclick={handleAdd} size="sm">
+				<Plus />
+
+				Add Backend
+			</Button>
+		</Empty.Content>
+	</Empty.Root>
 </div>