webui: add configurable base path support for subdirectory deployment

- Add configurable base path in svelte.config.js (default: '' for backward compatibility)
- Update all hardcoded URLs to use prefix for API calls and navigation
- Enables deployment in subdirectories (e.g., /llama, /ai, etc.) while maintaining root deployment compatibility
- Affected: fetch calls to /props, /v1, /slots and all goto/href navigation

Note: Current implementation assumes client and API share same base path.
Future enhancement could separate client base path from API base path for
advanced proxy/security configurations where only client UI is in subdirectory.

Author: ServeurpersoCom

tools/server/public/index.html.gz

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { ChatSidebarConversationItem } from '$lib/components/app';
@@ -64,13 +65,13 @@
 			searchQuery = '';
 		}
 
-		await goto(`/chat/${id}`);
+		await goto(`${base}/chat/${id}`);
 	}
 </script>
 
 <ScrollArea class="h-[100vh]">
 	<Sidebar.Header class=" top-0 z-10 gap-6 bg-sidebar/50 px-4 pt-4 pb-2 backdrop-blur-lg md:sticky">
-		<a href="/" onclick={handleMobileSidebarItemClick}>
+		<a href="{base}/" onclick={handleMobileSidebarItemClick}>
 			<h1 class="inline-flex items-center gap-1 px-2 text-xl font-semibold">llama.cpp</h1>
 		</a>
 

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { Search, SquarePen, X } from '@lucide/svelte';
 	import { KeyboardShortcutInfo } from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
@@ -51,7 +52,7 @@
 	{:else}
 		<Button
 			class="w-full justify-between hover:[&>kbd]:opacity-100"
-			href="/?new_chat=true"
+			href="{base}/?new_chat=true"
 			onclick={handleMobileSidebarItemClick}
 			variant="ghost"
 		>

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarActions.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { AlertTriangle, RefreshCw, Key, CheckCircle, XCircle } from '@lucide/svelte';
 	import { goto } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
@@ -64,7 +65,7 @@
 			updateConfig('apiKey', apiKeyInput.trim());
 
 			// Test the API key by making a real request to the server
-			const response = await fetch('/props', {
+			const response = await fetch('${base}/props', {
 				headers: {
 					'Content-Type': 'application/json',
 					Authorization: `Bearer ${apiKeyInput.trim()}`
@@ -77,7 +78,7 @@
 
 				// Show success state briefly, then navigate to home
 				setTimeout(() => {
-					goto('/');
+					goto(`${base}/`);
 				}, 1000);
 			} else {
 				// API key is invalid - User Story A

tools/server/webui/src/lib/components/app/server/ServerErrorSplash.svelte

@@ -1,3 +1,4 @@
+import { base } from '$app/paths';
 import { config } from '$lib/stores/settings.svelte';
 import { slotsService } from './slots';
 /**
@@ -164,7 +165,7 @@ export class ChatService {
 			const currentConfig = config();
 			const apiKey = currentConfig.apiKey?.toString().trim();
 
-			const response = await fetch(`/v1/chat/completions`, {
+			const response = await fetch(`${base}/v1/chat/completions`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json',
@@ -531,7 +532,7 @@ export class ChatService {
 			const currentConfig = config();
 			const apiKey = currentConfig.apiKey?.toString().trim();
 
-			const response = await fetch(`/props`, {
+			const response = await fetch(`${base}/props`, {
 				headers: {
 					'Content-Type': 'application/json',
 					...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})

tools/server/webui/src/lib/services/chat.ts

@@ -1,3 +1,4 @@
+import { base } from '$app/paths';
 import { config } from '$lib/stores/settings.svelte';
 
 /**
@@ -138,7 +139,7 @@ export class SlotsService {
 			const currentConfig = config();
 			const apiKey = currentConfig.apiKey?.toString().trim();
 
-			const response = await fetch('/slots', {
+			const response = await fetch(`${base}/slots`, {
 				headers: {
 					...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})
 				}

tools/server/webui/src/lib/services/slots.ts

@@ -1,3 +1,4 @@
+import { base } from '$app/paths';
 import { DatabaseStore } from '$lib/stores/database';
 import { chatService, slotsService } from '$lib/services';
 import { serverStore } from '$lib/stores/server.svelte';
@@ -100,7 +101,7 @@ class ChatStore {
 
 		this.maxContextError = null;
 
-		await goto(`/chat/${conversation.id}`);
+		await goto(`${base}/chat/${conversation.id}`);
 
 		return conversation.id;
 	}
@@ -910,7 +911,7 @@ class ChatStore {
 			if (this.activeConversation?.id === convId) {
 				this.activeConversation = null;
 				this.activeMessages = [];
-				await goto('/?new_chat=true');
+				await goto(`${base}/?new_chat=true`);
 			}
 		} catch (error) {
 			console.error('Failed to delete conversation:', error);

tools/server/webui/src/lib/stores/chat.svelte.ts

@@ -1,3 +1,4 @@
+import { base } from '$app/paths';
 import { ChatService } from '$lib/services/chat';
 import { config } from '$lib/stores/settings.svelte';
 
@@ -98,7 +99,7 @@ class ServerStore {
 			const currentConfig = config();
 			const apiKey = currentConfig.apiKey?.toString().trim();
 
-			const response = await fetch('/slots', {
+			const response = await fetch(`${base}/slots`, {
 				headers: {
 					...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})
 				}

tools/server/webui/src/lib/stores/server.svelte.ts

@@ -1,3 +1,4 @@
+import { base } from '$app/paths';
 import { error } from '@sveltejs/kit';
 import { browser } from '$app/environment';
 import { config } from '$lib/stores/settings.svelte';
@@ -22,7 +23,7 @@ export async function validateApiKey(fetch: typeof globalThis.fetch): Promise<vo
 			headers.Authorization = `Bearer ${apiKey}`;
 		}
 
-		const response = await fetch('/props', { headers });
+		const response = await fetch(`${base}/props`, { headers });
 
 		if (!response.ok) {
 			if (response.status === 401 || response.status === 403) {

tools/server/webui/src/lib/utils/api-key-validation.ts

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { ServerErrorSplash } from '$lib/components/app';
@@ -17,7 +18,7 @@
 
 	function handleRetry() {
 		// Navigate back to home page after successful API key validation
-		goto('/');
+		goto(`${base}/`);
 	}
 </script>
 
@@ -60,7 +61,7 @@
 				</p>
 			</div>
 			<button
-				onclick={() => goto('/')}
+				onclick={() => goto(`${base}/`)}
 				class="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
 			>
 				Go Home