From 521a677a375f05f669228cd17fac03e2cc6b694f Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Tue, 15 Sep 2026 02:56:50 +0200
Subject: [PATCH] ui : only show the server error when no backend is available

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../ChatFormActionModels.svelte               |  4 +-
 .../app/chat/ChatScreen/ChatScreen.svelte     |  4 +-
 .../ChatScreen/ChatScreenServerError.svelte   |  7 +++-
 .../hooks/use-backend-availability.svelte.ts  | 38 +++++++++++++++++++
 4 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 tools/ui/src/lib/hooks/use-backend-availability.svelte.ts

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte
index a4baa40bf9..be09f2fdd7 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { ModelsSelectorDropdown, ModelsSelectorSheet } from '$lib/components/app';
+	import { useBackendAvailability } from '$lib/hooks/use-backend-availability.svelte';
 	import { conversationsStore, deviceStore, modelsStore, serverStore } from '$lib/stores';
 	import { getConversationModel } from '$lib/utils';
 
@@ -28,7 +29,8 @@
 	}: Props = $props();
 
 	let isRouter = $derived(serverStore.isRouterMode);
-	let isOffline = $derived(!!serverStore.error);
+	const availability = useBackendAvailability();
+	let isOffline = $derived(availability.isOffline);
 
 	let conversationModel = $derived(
 		getConversationModel(conversationsStore.activeMessages as DatabaseMessage[])
diff --git a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index 6cea95d0d0..b414dd5c3c 100644
--- a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -13,6 +13,7 @@
 	} from '$lib/components/app';
 	import { LANDING_SETTLE_MAX_MS, LANDING_STABLE_FRAMES, ROUTES } from '$lib/constants';
 	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
+	import { useBackendAvailability } from '$lib/hooks/use-backend-availability.svelte';
 	import { useChatScreenActiveModel } from '$lib/hooks/use-chat-screen-active-model.svelte';
 	import { useChatScreenDragAndDrop } from '$lib/hooks/use-chat-screen-drag-and-drop.svelte';
 	import { useChatScreenFileUpload } from '$lib/hooks/use-chat-screen-file-upload.svelte';
@@ -45,7 +46,8 @@
 	);
 	let activeErrorDialog = $derived(chatStore.errorDialogState);
 	let isServerLoading = $derived(serverStore.loading);
-	let hasPropsError = $derived(!!serverStore.error);
+	const availability = useBackendAvailability();
+	let hasPropsError = $derived(availability.isOffline);
 	let isCurrentConversationLoading = $derived(chatStore.isLoading || chatStore.isStreaming());
 	let chatFormBottomPosition = $derived.by(() => {
 		if (!deviceStore.isMobile) return '1rem';
diff --git a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenServerError.svelte b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenServerError.svelte
index cf9f55fd7f..401aa2f11a 100644
--- a/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenServerError.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenServerError.svelte
@@ -2,13 +2,16 @@
 	import { AlertTriangle, Loader2, RefreshCw } from '@lucide/svelte';
 	import * as Alert from '$lib/components/ui/alert';
 	import { ICON_CLASS_DEFAULT } from '$lib/constants';
+	import { useBackendAvailability } from '$lib/hooks/use-backend-availability.svelte';
 	import { serverStore } from '$lib/stores';
 
-	let hasError = $derived(!!serverStore.error);
+	const availability = useBackendAvailability();
+
 	let isLoadingModel = $derived(serverStore.status === 503);
+	let hasError = $derived(availability.isOffline);
 </script>
 
-{#if hasError}
+{#if hasError || isLoadingModel}
 	<div class="pointer-events-auto mx-auto mb-4 max-w-[48rem] px-1">
 		<Alert.Root variant={isLoadingModel ? 'default' : 'destructive'}>
 			{#if isLoadingModel}
diff --git a/tools/ui/src/lib/hooks/use-backend-availability.svelte.ts b/tools/ui/src/lib/hooks/use-backend-availability.svelte.ts
new file mode 100644
index 0000000000..c78284c2d5
--- /dev/null
+++ b/tools/ui/src/lib/hooks/use-backend-availability.svelte.ts
@@ -0,0 +1,38 @@
+/**
+ * Backend availability for connection error states.
+ *
+ * The server error banner and the offline affordances should only appear when
+ * no backend can serve requests. The active backend failing is not enough:
+ * with an external backend configured, the UI stays usable.
+ */
+
+import { LOCAL_BACKEND_ID } from '$lib/constants';
+import { backendsModelsStore, backendsStore, serverStore } from '$lib/stores';
+
+export interface BackendAvailability {
+	readonly hasAvailableBackend: boolean;
+	readonly isOffline: boolean;
+}
+
+export function useBackendAvailability(): BackendAvailability {
+	const hasAvailableBackend = $derived.by(() => {
+		// no connection error at all: nothing to report
+		if (!serverStore.error) return true;
+
+		// the local server failed, but an external backend may still be usable
+		return backendsStore.enabled.some(
+			(backend) =>
+				backend.id !== LOCAL_BACKEND_ID && backendsModelsStore.get(backend.id).error === null
+		);
+	});
+
+	return {
+		get hasAvailableBackend() {
+			return hasAvailableBackend;
+		},
+
+		get isOffline() {
+			return !hasAvailableBackend;
+		}
+	};
+}