Switched web UI to hash-based routing

Author: isaac-mcfadyen

tools/server/public/index.html.gz

@@ -64,7 +64,7 @@
 			searchQuery = '';
 		}
 
-		await goto(`/chat/${id}`);
+		await goto(`#/chat/${id}`);
 	}
 </script>
 

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

@@ -51,7 +51,7 @@
 	{:else}
 		<Button
 			class="w-full justify-between hover:[&>kbd]:opacity-100"
-			href="/?new_chat=true"
+			href="?new_chat=true#/"
 			onclick={handleMobileSidebarItemClick}
 			variant="ghost"
 		>

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

@@ -64,7 +64,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('./props', {
 				headers: {
 					'Content-Type': 'application/json',
 					Authorization: `Bearer ${apiKeyInput.trim()}`
@@ -77,7 +77,7 @@
 
 				// Show success state briefly, then navigate to home
 				setTimeout(() => {
-					goto('/');
+					goto(`#/`);
 				}, 1000);
 			} else {
 				// API key is invalid - User Story A

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

@@ -164,7 +164,7 @@ export class ChatService {
 			const currentConfig = config();
 			const apiKey = currentConfig.apiKey?.toString().trim();
 
-			const response = await fetch(`/v1/chat/completions`, {
+			const response = await fetch(`./v1/chat/completions`, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json',
@@ -531,7 +531,7 @@ export class ChatService {
 			const currentConfig = config();
 			const apiKey = currentConfig.apiKey?.toString().trim();
 
-			const response = await fetch(`/props`, {
+			const response = await fetch(`./props`, {
 				headers: {
 					'Content-Type': 'application/json',
 					...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})

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

@@ -138,7 +138,7 @@ export class SlotsService {
 			const currentConfig = config();
 			const apiKey = currentConfig.apiKey?.toString().trim();
 
-			const response = await fetch('/slots', {
+			const response = await fetch(`./slots`, {
 				headers: {
 					...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})
 				}

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

@@ -100,7 +100,7 @@ class ChatStore {
 
 		this.maxContextError = null;
 
-		await goto(`/chat/${conversation.id}`);
+		await goto(`#/chat/${conversation.id}`);
 
 		return conversation.id;
 	}
@@ -910,7 +910,7 @@ class ChatStore {
 			if (this.activeConversation?.id === convId) {
 				this.activeConversation = null;
 				this.activeMessages = [];
-				await goto('/?new_chat=true');
+				await goto(`?new_chat=true#/`);
 			}
 		} catch (error) {
 			console.error('Failed to delete conversation:', error);

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

@@ -98,7 +98,7 @@ class ServerStore {
 			const currentConfig = config();
 			const apiKey = currentConfig.apiKey?.toString().trim();
 
-			const response = await fetch('/slots', {
+			const response = await fetch(`./slots`, {
 				headers: {
 					...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})
 				}

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

@@ -22,7 +22,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(`./props`, { headers });
 
 		if (!response.ok) {
 			if (response.status === 401 || response.status === 403) {

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

@@ -17,7 +17,7 @@
 
 	function handleRetry() {
 		// Navigate back to home page after successful API key validation
-		goto('/');
+		goto('#/');
 	}
 </script>
 
@@ -60,7 +60,7 @@
 				</p>
 			</div>
 			<button
-				onclick={() => goto('/')}
+				onclick={() => goto('#/')}
 				class="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
 			>
 				Go Home