WIP on allozaur/20677-webui-server-tools

tools/server/public/index.html

@@ -18,7 +18,7 @@
 		<div style="display: contents">
 			<script>
 				{
-					__sveltekit_1a51eho = {
+					__sveltekit_guu7zu = {
 						base: new URL('.', location).pathname.slice(0, -1)
 					};
 

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

@@ -66,6 +66,17 @@
 
 	let emptyFileNames = $state<string[]>([]);
 
+	// Incremented each time isEmpty transitions false→true, forcing welcome screen remount with transitions
+	let introKey = $state(0);
+	let wasEmpty = false;
+
+	$effect(() => {
+		if (isEmpty && !wasEmpty) {
+			introKey++;
+		}
+		wasEmpty = isEmpty;
+	});
+
 	let initialMessage = $state('');
 
 	let isEmpty = $derived(
@@ -363,10 +374,7 @@
 				}}
 			/>
 
-			<div
-				class="pointer-events-none sticky right-0 bottom-4 left-0 mt-auto"
-				in:slide={{ duration: 150, axis: 'y' }}
-			>
+			<div class="pointer-events-none sticky right-0 bottom-4 left-0 mt-auto">
 				<ChatScreenProcessingInfo />
 
 				{#if hasPropsError}
@@ -422,6 +430,7 @@
 		ondrop={handleDrop}
 		role="main"
 	>
+		{#key introKey}
 		<div class="w-full max-w-[48rem] px-4">
 			<div class="mb-10 text-center" in:fade={{ duration: 300 }}>
 				<h1 class="mb-2 text-2xl font-semibold tracking-tight md:text-3xl">Hello there</h1>
@@ -471,6 +480,7 @@
 				/>
 			</div>
 		</div>
+		{/key}
 	</div>
 {/if}
 

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

@@ -454,10 +454,10 @@
 
 		<!-- Mobile Header with Horizontal Scrollable Menu -->
 		<div class="sticky top-0 z-10 flex flex-col bg-background md:hidden">
-			<div class="flex items-center gap-2 px-4 pt-4 md:pt-6 pb-2">
+			<div class="flex items-center gap-2 px-4 pt-4 pb-2 md:pt-6">
 				<Settings class="h-5 w-5 md:h-6 md:w-6" />
 
-				<h1 class="text-xl md:text-2xl font-semibold">Settings</h1>
+				<h1 class="text-xl font-semibold md:text-2xl">Settings</h1>
 			</div>
 
 			<div class="border-b border-border/30 py-2">
@@ -510,7 +510,7 @@
 			</div>
 		</div>
 
-		<div class="mx-auto max-w-3xl flex-1">
+		<div class="mx-auto max-w-2xl flex-1">
 			<div class="space-y-6 p-4 md:p-6 md:pt-28">
 				<div class="grid">
 					<div class="mb-6 flex hidden items-center gap-2 border-b border-border/30 pb-6 md:flex">

tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsImportExportTab.svelte

@@ -178,7 +178,7 @@
 	<div class="flex items-center gap-2 pb-4">
 		<Database class="h-5 w-5 md:h-6 md:w-6" />
 
-		<h1 class="text-xl md:text-2xl font-semibold">Import / Export</h1>
+		<h1 class="text-xl font-semibold md:text-2xl">Import / Export</h1>
 	</div>
 
 	<div class="space-y-4">

tools/server/webui/src/lib/components/app/mcp/McpServersSettings.svelte

@@ -84,10 +84,10 @@
 	}
 </script>
 
-<div class="p-4 md:p-0 md:absolute md:top-8 md:left-8 flex items-center gap-2">
+<div class="flex items-center gap-2 p-4 md:absolute md:top-8 md:left-8 md:p-0">
 	<McpLogo class="h-5 w-5 md:h-6 md:w-6" />
 
-	<h1 class="text-xl md:text-2xl font-semibold">MCP Servers</h1>
+	<h1 class="text-xl font-semibold md:text-2xl">MCP Servers</h1>
 </div>
 
 <div class="sticky top-0 z-10 mt-4 flex items-start justify-end gap-4 px-8 py-4">

tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte

@@ -86,7 +86,7 @@
 							side === 'left'
 								? 'left-3 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-0.775)] group-data-[collapsible=offcanvas]:opacity-0'
 								: 'right-3 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-0.775)] group-data-[collapsible=offcanvas]:opacity-0',
-							'my-3 overflow-hidden rounded-2xl border border-sidebar-border shadow-md'
+							'my-3 overflow-hidden rounded-3xl border border-sidebar-border shadow-md'
 						]
 					: [
 							'h-svh transition-[left,right,width]',

tools/server/webui/src/routes/(chat)/+layout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { ChatScreen } from '$lib/components/app';
+
+	let { children } = $props();
+
+	let showCenteredEmpty = $derived(!page.params.id);
+</script>
+
+<ChatScreen {showCenteredEmpty} />
+
+{@render children?.()}

tools/server/webui/src/routes/(chat)/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ChatScreen, DialogModelNotAvailable } from '$lib/components/app';
+	import { DialogModelNotAvailable } from '$lib/components/app';
 	import { chatStore } from '$lib/stores/chat.svelte';
 	import { conversationsStore, isConversationsInitialized } from '$lib/stores/conversations.svelte';
 	import { modelsStore, modelOptions } from '$lib/stores/models.svelte';
@@ -90,8 +90,6 @@
 	<title>llama.cpp</title>
 </svelte:head>
 
-<ChatScreen showCenteredEmpty />
-
 <DialogModelNotAvailable
 	bind:open={showModelNotAvailable}
 	modelName={requestedModelName}

tools/server/webui/src/routes/(chat)/chat/[id]/+page.svelte

@@ -2,7 +2,7 @@
 	import { goto, replaceState } from '$app/navigation';
 	import { page } from '$app/state';
 	import { afterNavigate } from '$app/navigation';
-	import { ChatScreen, DialogModelNotAvailable } from '$lib/components/app';
+	import { DialogModelNotAvailable } from '$lib/components/app';
 	import { chatStore, isLoading } from '$lib/stores/chat.svelte';
 	import {
 		conversationsStore,
@@ -169,8 +169,6 @@
 	<title>{activeConversation()?.name || 'Chat'} - llama.cpp</title>
 </svelte:head>
 
-<ChatScreen />
-
 <DialogModelNotAvailable
 	bind:open={showModelNotAvailable}
 	modelName={requestedModelName}

tools/server/webui/src/routes/+layout.svelte

@@ -204,7 +204,7 @@
 		const apiKey = config().apiKey;
 
 		if (
-			(page.route.id === '/' || page.route.id === '/chat/[id]') &&
+			(page.route.id === '/(chat)' || page.route.id === '/(chat)/chat/[id]') &&
 			page.status !== 401 &&
 			page.status !== 403
 		) {
@@ -335,8 +335,6 @@
 				</aside>
 			{/if}
 
-
-
 			<Sidebar.Inset class="flex flex-1 flex-col overflow-auto">
 				{@render children?.()}
 			</Sidebar.Inset>

tools/server/webui/src/routes/settings/chat/+page.svelte

@@ -10,5 +10,5 @@
 <ChatSettings
 	onSave={() => goto('#/')}
 	initialSection={sectionParam ?? undefined}
-	class="mx-auto h-full md:pl-8"
+	class="mx-auto max-h-[100dvh] md:pl-8"
 />