ui : allow excluding the local backend

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash

tools/ui/src/lib/components/app/backends/BackendCard.svelte

@@ -40,23 +40,29 @@
 			</div>
 		</div>
 
-		<span class="shrink-0 rounded-md border px-2 py-0.5 text-[0.7rem] text-muted-foreground">
-			{protocolLabel}
-		</span>
+		<div class="flex shrink-0 items-center gap-1">
+			{#if isLocal}
+				<span class="rounded-md border px-2 py-0.5 text-[0.7rem] text-muted-foreground">
+					Built-in
+				</span>
+			{/if}
+
+			<span class="rounded-md border px-2 py-0.5 text-[0.7rem] text-muted-foreground">
+				{protocolLabel}
+			</span>
+		</div>
 	</div>
 
 	<div class="flex items-center justify-between gap-2">
-		{#if isLocal}
-			<span class="text-xs text-muted-foreground">Built-in</span>
-		{:else}
-			<div class="flex items-center gap-2">
-				<Switch checked={backend.enabled} onCheckedChange={(value) => onToggle?.(value)} />
+		<div class="flex items-center gap-2">
+			<Switch checked={backend.enabled} onCheckedChange={(value) => onToggle?.(value)} />
 
-				<span class="text-xs text-muted-foreground">
-					{backend.enabled ? 'Enabled' : 'Disabled'}
-				</span>
-			</div>
+			<span class="text-xs text-muted-foreground">
+				{backend.enabled ? 'Enabled' : 'Disabled'}
+			</span>
+		</div>
 
+		{#if !isLocal}
 			<div class="flex items-center gap-1">
 				<Button aria-label="Edit backend" onclick={() => onEdit?.()} size="sm" variant="ghost">
 					<Pencil class="h-3.5 w-3.5" />

tools/ui/src/lib/components/app/backends/SettingsBackends.svelte

@@ -38,7 +38,11 @@
 <div in:fade={{ duration: 150 }} class={['flex flex-col gap-4', className]}>
 	<DialogBackendForm bind:open={isAdding} backend={editing} onOpenChange={handleOpenChange} />
 
-	<BackendCard backend={backendsStore.local} isLocal />
+	<BackendCard
+		backend={backendsStore.local}
+		isLocal
+		onToggle={(enabled) => backendsStore.setLocalEnabled(enabled)}
+	/>
 
 	{#each backendsStore.external as backend (backend.id)}
 		<BackendCard

tools/ui/src/lib/constants/settings-keys.constants.ts

@@ -32,6 +32,7 @@ export const SETTINGS_KEYS = {
 	FREQUENCY_PENALTY: 'frequency_penalty',
 	FULL_HEIGHT_CODE_BLOCKS: 'fullHeightCodeBlocks',
 	JS_SANDBOX_ENABLED: 'jsSandboxEnabled',
+	LOCAL_BACKEND_ENABLED: 'localBackendEnabled',
 	MAX_IMAGE_RESOLUTION: 'maxImageMPixels',
 	MAX_TOKENS: 'max_tokens',
 	MCP_REQUEST_TIMEOUT_SECONDS: 'mcpRequestTimeoutSeconds',

tools/ui/src/lib/constants/settings.constants.ts

@@ -208,6 +208,14 @@ export const SETTINGS_REGISTRY: SettingsSectionEntry[] = [
 				label: 'Backends',
 				standaloneField: false,
 				type: SettingsFieldType.INPUT
+			},
+			{
+				defaultValue: true,
+				help: 'Query the llama-server that serves this UI. Disable it when this UI runs standalone and talks to external backends only.',
+				key: SETTINGS_KEYS.LOCAL_BACKEND_ENABLED,
+				label: 'Local backend',
+				standaloneField: false,
+				type: SettingsFieldType.CHECKBOX
 			}
 		],
 		slug: SETTINGS_SECTION_SLUGS.BACKENDS,

tools/ui/src/lib/stores/backends.svelte.ts

@@ -18,7 +18,9 @@ class BackendsStore {
 	activeId = $state<string>(LOCAL_BACKEND_ID);
 
 	get active(): Backend {
-		return this.list.find((backend) => backend.id === this.activeId) ?? this.local;
+		const active = this.enabled.find((backend) => backend.id === this.activeId);
+
+		return active ?? this.enabled[0] ?? this.local;
 	}
 
 	get enabled(): Backend[] {
@@ -34,7 +36,10 @@ class BackendsStore {
 	}
 
 	get local(): Backend {
-		return createLocalBackend(settingsStore.config.apiKey?.toString().trim() || undefined);
+		return createLocalBackend(
+			settingsStore.config.apiKey?.toString().trim() || undefined,
+			settingsStore.config[SETTINGS_KEYS.LOCAL_BACKEND_ENABLED] !== false
+		);
 	}
 
 	addBackend(backend: Backend): void {
@@ -44,7 +49,7 @@ class BackendsStore {
 	initialize(): void {
 		if (!browser) return;
 
-		setBackendsResolver(() => ({ activeId: this.activeId, backends: this.list }));
+		setBackendsResolver(() => ({ activeId: this.active.id, backends: this.list }));
 	}
 
 	removeBackend(backendId: string): void {
@@ -61,6 +66,10 @@ class BackendsStore {
 			: LOCAL_BACKEND_ID;
 	}
 
+	setLocalEnabled(enabled: boolean): void {
+		settingsStore.updateConfig(SETTINGS_KEYS.LOCAL_BACKEND_ENABLED, enabled);
+	}
+
 	updateBackend(backendId: string, updates: Partial<Backend>): void {
 		this.saveExternal(
 			this.external.map((backend) =>

tools/ui/src/lib/utils/backend.ts

@@ -26,11 +26,11 @@ export function backendModelsUrl(backend: Backend): string {
 }
 
 /** The built-in backend pointing at the server that serves this UI. */
-export function createLocalBackend(apiKey?: string): Backend {
+export function createLocalBackend(apiKey?: string, enabled = true): Backend {
 	return {
 		apiKey,
 		baseUrl: '',
-		enabled: true,
+		enabled,
 		id: LOCAL_BACKEND_ID,
 		name: 'Local',
 		protocol: 'llama.cpp'