ui: Restructure repo to use tools/ui folder and ui / UI / llama-ui / LLAMA_UI naming (#23064)

* webui: Move static build output from `tools/server/public` to `build/ui` directory * refactor: Move to `tools/ui` * refactor: rename CMake variables and preprocessor defines - Rename LLAMA_BUILD_WEBUI -> LLAMA_BUILD_UI (old kept as deprecated) - Rename LLAMA_USE_PREBUILT_WEBUI -> LLAMA_USE_PREBUILT_UI (old kept as deprecated) - Backward compat: old vars auto-forward to new ones with DEPRECATION warning - Rename internal vars: WEBUI_SOURCE -> UI_SOURCE, WEBUI_SOURCE_DIR -> UI_SOURCE_DIR, etc. - Rename HF bucket: LLAMA_WEBUI_HF_BUCKET -> LLAMA_UI_HF_BUCKET - Emit both LLAMA_BUILD_WEBUI and LLAMA_BUILD_UI preprocessor defines - Emit both LLAMA_WEBUI_DEFAULT_ENABLED and LLAMA_UI_DEFAULT_ENABLED * refactor: rename CLI flags (--webui -> --ui) with backward compat - Add --ui/--no-ui (old --webui/--no-webui kept as deprecated aliases) - Add --ui-config (old --webui-config kept as deprecated alias) - Add --ui-config-file (old --webui-config-file kept as deprecated alias) - Add --ui-mcp-proxy/--no-ui-mcp-proxy (old --webui-mcp-proxy kept as deprecated) - Add new env vars: LLAMA_ARG_UI, LLAMA_ARG_UI_CONFIG, LLAMA_ARG_UI_CONFIG_FILE, LLAMA_ARG_UI_MCP_PROXY - C++ struct fields: params.ui, params.ui_config_json, params.ui_mcp_proxy added alongside old fields - Backward compat: old fields synced to new ones in g_params_to_internals * refactor: update C++ server internals with backward compat - Rename json_webui_settings -> json_ui_settings (both kept in server_context_meta) - Rename params.webui usage -> params.ui (both synced, old still works) - JSON API emits both "ui"/"ui_settings" and "webui"/"webui_settings" keys - Server routes use params.ui_mcp_proxy || params.webui_mcp_proxy - Preprocessor guards use #if defined(LLAMA_BUILD_UI) || defined(LLAMA_BUILD_WEBUI) * refactor: rename CI/CD workflows, artifacts, and build script - Rename webui-build.yml -> ui-build.yml; artifact webui-build -> ui-build - Rename webui-publish.yml -> ui-publish.yml; var HF_BUCKET_WEBUI_STATIC_OUTPUT -> HF_BUCKET_UI_STATIC_OUTPUT - Rename server-webui.yml -> server-ui.yml; job webui-build/checks -> ui-build/checks - Update server.yml: job/artifact refs webui-build -> ui-build - Update release.yml: all webui-build/publish refs -> ui-build/publish; HF_TOKEN_WEBUI_STATIC_OUTPUT -> HF_TOKEN_UI_STATIC_OUTPUT - Update server-self-hosted.yml: webui-build -> ui-build - Update build-self-hosted.yml: HF_WEBUI_VERSION -> HF_UI_VERSION - Rename webui-download.cmake -> ui-download.cmake (internal refs updated) - Update labeler.yml: server/webui -> server/ui path label * docs: update CODEOWNERS and server README docs - Update CODEOWNERS: team ggml-org/llama-webui -> ggml-org/llama-ui, path /tools/server/webui/ -> /tools/ui/ - Update server README.md: CLI tables show --ui flags with deprecated --webui aliases - Update server README-dev.md: "WebUI" -> "UI", paths updated to tools/ui/ * fix: Small fixes for UI build * fix: CMake.txt syntax * chore: Formatting * fix: `.editorconfig` for llama-ui * chore: Formatting * refactor: Use `APP_NAME` in Error route * refactor: Cleanup * refactor: Single migration service * make llama-ui a linkable target * fix: UI Build output * fix: Missing change * fix: separate llama-ui npm build output into build/tools/ui/dist subfolder + use cmake npm build instead of downloading ui-build.yml artifacts in CI * refactor: UI workflows cleanup --------- Co-authored-by: Xuan Son Nguyen <son@huggingface.co>
2026-05-16 02:02:40 +02:00
parent 49d1701bd2
commit 59778f0196
565 changed files with 1610 additions and 694 deletions
@@ -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?.()}
@@ -0,0 +1,103 @@
+<script lang="ts">
+	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';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { replaceState } from '$app/navigation';
+	import { APP_NAME, NEW_CHAT_PARAM } from '$lib/constants';
+
+	let qParam = $derived(page.url.searchParams.get('q'));
+	let modelParam = $derived(page.url.searchParams.get('model'));
+	let newChatParam = $derived(page.url.searchParams.get(NEW_CHAT_PARAM));
+
+	// Dialog state for model not available error
+	let showModelNotAvailable = $state(false);
+	let requestedModelName = $state('');
+	let availableModelNames = $derived(modelOptions().map((m) => m.model));
+
+	/**
+	 * Clear URL params after message is sent to prevent re-sending on refresh
+	 */
+	function clearUrlParams() {
+		const url = new URL(page.url);
+
+		url.searchParams.delete('q');
+		url.searchParams.delete('model');
+		url.searchParams.delete(NEW_CHAT_PARAM);
+
+		replaceState(url.toString(), {});
+	}
+
+	async function handleUrlParams() {
+		await modelsStore.fetch();
+
+		if (modelParam) {
+			const model = modelsStore.findModelByName(modelParam);
+
+			if (model) {
+				try {
+					await modelsStore.selectModelById(model.id);
+				} catch (error) {
+					console.error('Failed to select model:', error);
+					requestedModelName = modelParam;
+					showModelNotAvailable = true;
+
+					return;
+				}
+			} else {
+				requestedModelName = modelParam;
+				showModelNotAvailable = true;
+
+				return;
+			}
+		}
+
+		// Handle ?q= parameter - create new conversation and send message
+		if (qParam !== null) {
+			await conversationsStore.createConversation();
+			clearUrlParams();
+		} else if (modelParam || newChatParam === 'true') {
+			clearUrlParams();
+		}
+	}
+
+	onMount(async () => {
+		if (!isConversationsInitialized()) {
+			await conversationsStore.initialize();
+		}
+
+		conversationsStore.clearActiveConversation();
+		chatStore.clearUIState();
+
+		if (
+			isRouterMode() &&
+			modelsStore.selectedModelName &&
+			!modelsStore.isModelLoaded(modelsStore.selectedModelName)
+		) {
+			modelsStore.clearSelection();
+
+			const first = modelOptions().find((m) => modelsStore.loadedModelIds.includes(m.model));
+			if (first) {
+				await modelsStore.selectModelById(first.id);
+			}
+		}
+
+		// Handle URL params only if we have ?q= or ?model= or ?new_chat=true
+		if (qParam !== null || modelParam !== null || newChatParam === 'true') {
+			await handleUrlParams();
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>{APP_NAME}</title>
+</svelte:head>
+
+<DialogModelNotAvailable
+	bind:open={showModelNotAvailable}
+	modelName={requestedModelName}
+	availableModels={availableModelNames}
+/>
@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { validateApiKey } from '$lib/utils';
+
+export const load: PageLoad = async ({ fetch }) => {
+	await validateApiKey(fetch);
+};
@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { goto, replaceState } from '$app/navigation';
+	import { page } from '$app/state';
+	import { afterNavigate } from '$app/navigation';
+	import { DialogModelNotAvailable } from '$lib/components/app';
+	import { APP_NAME, ROUTES } from '$lib/constants';
+	import { chatStore, isLoading } from '$lib/stores/chat.svelte';
+	import { conversationsStore, activeConversation } from '$lib/stores/conversations.svelte';
+	import { modelsStore, modelOptions } from '$lib/stores/models.svelte';
+
+	let chatId = $derived(page.params.id);
+	let currentChatId: string | undefined = undefined;
+
+	// URL parameters for prompt and model selection
+	let qParam = $derived(page.url.searchParams.get('q'));
+	let modelParam = $derived(page.url.searchParams.get('model'));
+
+	// Dialog state for model not available error
+	let showModelNotAvailable = $state(false);
+	let requestedModelName = $state('');
+	let availableModelNames = $derived(modelOptions().map((m) => m.model));
+
+	// Track if URL params have been processed for this chat
+	let urlParamsProcessed = $state(false);
+
+	/**
+	 * Clear URL params after message is sent to prevent re-sending on refresh
+	 */
+	function clearUrlParams() {
+		const url = new URL(page.url);
+		url.searchParams.delete('q');
+		url.searchParams.delete('model');
+		replaceState(url.toString(), {});
+	}
+
+	async function handleUrlParams() {
+		// Ensure models are loaded first
+		await modelsStore.fetch();
+
+		// Handle model parameter - select model if provided
+		if (modelParam) {
+			const model = modelsStore.findModelByName(modelParam);
+			if (model) {
+				try {
+					await modelsStore.selectModelById(model.id);
+				} catch (error) {
+					console.error('Failed to select model:', error);
+					requestedModelName = modelParam;
+					showModelNotAvailable = true;
+					return;
+				}
+			} else {
+				// Model not found - show error dialog
+				requestedModelName = modelParam;
+				showModelNotAvailable = true;
+				return;
+			}
+		}
+
+		// Handle ?q= parameter - send message in current conversation
+		if (qParam !== null) {
+			await chatStore.sendMessage(qParam);
+			// Clear URL params after message is sent
+			clearUrlParams();
+		} else if (modelParam) {
+			// Clear params even if no message was sent (just model selection)
+			clearUrlParams();
+		}
+
+		urlParamsProcessed = true;
+	}
+
+	afterNavigate(() => {
+		setTimeout(() => {
+			void modelsStore.selectModelFromLastAssistantResponse();
+		}, 100);
+	});
+
+	$effect(() => {
+		if (chatId && chatId !== currentChatId) {
+			currentChatId = chatId;
+			urlParamsProcessed = false; // Reset for new chat
+
+			// Skip loading if this conversation is already active (e.g., just created)
+			if (activeConversation()?.id === chatId) {
+				// Still handle URL params even if conversation is active
+				if ((qParam !== null || modelParam !== null) && !urlParamsProcessed) {
+					handleUrlParams();
+				}
+				return;
+			}
+
+			(async () => {
+				const success = await conversationsStore.loadConversation(chatId);
+				if (success) {
+					chatStore.syncLoadingStateForChat(chatId);
+
+					// Handle URL params after conversation is loaded
+					if ((qParam !== null || modelParam !== null) && !urlParamsProcessed) {
+						await handleUrlParams();
+					}
+				} else {
+					await goto(ROUTES.START);
+				}
+			})();
+		}
+	});
+
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			const handleBeforeUnload = () => {
+				if (isLoading()) {
+					console.log('Page unload detected while streaming - aborting stream');
+					chatStore.stopGeneration();
+				}
+			};
+
+			window.addEventListener('beforeunload', handleBeforeUnload);
+
+			return () => {
+				window.removeEventListener('beforeunload', handleBeforeUnload);
+			};
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>{activeConversation()?.name || 'Chat'} - {APP_NAME}</title>
+</svelte:head>
+
+<DialogModelNotAvailable
+	bind:open={showModelNotAvailable}
+	modelName={requestedModelName}
+	availableModels={availableModelNames}
+/>
@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { validateApiKey } from '$lib/utils';
+
+export const load: PageLoad = async ({ fetch }) => {
+	await validateApiKey(fetch);
+};
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { ServerErrorSplash } from '$lib/components/app';
+	import { ROUTES } from '$lib/constants/routes';
+	import { APP_NAME } from '$lib/constants';
+
+	let error = $derived($page.error);
+	let status = $derived($page.status);
+
+	// Check if this is an API key related error
+	let isApiKeyError = $derived(
+		status === 401 ||
+			status === 403 ||
+			error?.message?.toLowerCase().includes('access denied') ||
+			error?.message?.toLowerCase().includes('unauthorized') ||
+			error?.message?.toLowerCase().includes('invalid api key')
+	);
+
+	function handleRetry() {
+		// Navigate back to home page after successful API key validation
+		goto(ROUTES.START);
+	}
+</script>
+
+<svelte:head>
+	<title>Error {status} - {APP_NAME}</title>
+</svelte:head>
+
+{#if isApiKeyError}
+	<ServerErrorSplash
+		error={error?.message || 'Access denied - check server permissions'}
+		onRetry={handleRetry}
+		showRetry={false}
+		showTroubleshooting={false}
+	/>
+{:else}
+	<!-- Generic error page for non-API key errors -->
+	<div class="flex h-full items-center justify-center">
+		<div class="w-full max-w-md px-4 text-center">
+			<div class="mb-6">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10"
+				>
+					<svg
+						class="h-8 w-8 text-destructive"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+						/>
+					</svg>
+				</div>
+				<h1 class="mb-2 text-2xl font-bold">Error {status}</h1>
+				<p class="text-muted-foreground">
+					{error?.message || 'Something went wrong'}
+				</p>
+			</div>
+			<button
+				onclick={() => goto(ROUTES.START)}
+				class="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
+			>
+				Go Home
+			</button>
+		</div>
+	</div>
+{/if}
@@ -0,0 +1,269 @@
+<script lang="ts">
+	import '../app.css';
+	import { base } from '$app/paths';
+	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { untrack } from 'svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import {
+		DesktopIconStrip,
+		DialogConversationTitleUpdate,
+		SidebarNavigation
+	} from '$lib/components/app';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { isRouterMode, serverStore } from '$lib/stores/server.svelte';
+	import { config, settingsStore } from '$lib/stores/settings.svelte';
+	import { ModeWatcher } from 'mode-watcher';
+	import { ROUTES } from '$lib/constants/routes';
+	import { RouterService } from '$lib/services/router.service';
+	import { Toaster } from 'svelte-sonner';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { TOOLTIP_DELAY_DURATION } from '$lib/constants';
+	import { IsMobile } from '$lib/hooks/is-mobile.svelte';
+	import { useKeyboardShortcuts } from '$lib/hooks/use-keyboard-shortcuts.svelte';
+	import { useSettingsNavigation } from '$lib/hooks/use-settings-navigation.svelte';
+	import { conversations } from '$lib/stores/conversations.svelte';
+
+	let { children } = $props();
+
+	let alwaysShowSidebarOnDesktop = $derived(config().alwaysShowSidebarOnDesktop);
+	let isMobile = new IsMobile();
+	let isDesktop = $derived(!isMobile.current);
+	let sidebarOpen = $state(false);
+	let mounted = $state(false);
+	let innerHeight = $state<number | undefined>();
+	let chatSidebar:
+		| { activateSearchMode?: () => void; editActiveConversation?: () => void }
+		| undefined = $state();
+
+	let titleUpdateDialogOpen = $state(false);
+	let titleUpdateCurrentTitle = $state('');
+	let titleUpdateNewTitle = $state('');
+	let titleUpdateResolve: ((value: boolean) => void) | null = null;
+
+	const panelNav = useSettingsNavigation();
+
+	function navigateToConversation(direction: -1 | 1) {
+		const allConvs = conversations();
+		if (allConvs.length === 0) return;
+
+		const currentId = page.params.id;
+
+		if (!currentId) {
+			goto(RouterService.chat(allConvs[direction === 1 ? 0 : allConvs.length - 1].id));
+
+			return;
+		}
+
+		const idx = allConvs.findIndex((c) => c.id === currentId);
+		if (idx === -1) return;
+
+		const targetIdx = idx + direction;
+
+		if (targetIdx >= 0 && targetIdx < allConvs.length) {
+			goto(RouterService.chat(allConvs[targetIdx].id));
+		} else {
+			goto(ROUTES.NEW_CHAT);
+		}
+	}
+
+	// Global keyboard shortcuts
+	const { handleKeydown } = useKeyboardShortcuts({
+		editActiveConversation: () => chatSidebar?.editActiveConversation?.(),
+
+		navigateToPrevConversation: () => navigateToConversation(-1),
+
+		navigateToNextConversation: () => navigateToConversation(1)
+	});
+
+	function checkApiKey() {
+		const apiKey = config().apiKey;
+
+		if (
+			(page.route.id === '/(chat)' || page.route.id === '/(chat)/chat/[id]') &&
+			page.status !== 401 &&
+			page.status !== 403
+		) {
+			const headers: Record<string, string> = {
+				'Content-Type': 'application/json'
+			};
+
+			if (apiKey && apiKey.trim() !== '') {
+				headers.Authorization = `Bearer ${apiKey.trim()}`;
+			}
+
+			fetch(`${base}/props`, { headers })
+				.then((response) => {
+					if (response.status === 401 || response.status === 403) {
+						window.location.reload();
+					}
+				})
+				.catch((e) => {
+					console.error('Error checking API key:', e);
+				});
+		}
+	}
+
+	function handleTitleUpdateCancel() {
+		titleUpdateDialogOpen = false;
+
+		if (titleUpdateResolve) {
+			titleUpdateResolve(false);
+			titleUpdateResolve = null;
+		}
+	}
+
+	function handleTitleUpdateConfirm() {
+		titleUpdateDialogOpen = false;
+
+		if (titleUpdateResolve) {
+			titleUpdateResolve(true);
+			titleUpdateResolve = null;
+		}
+	}
+
+	onMount(() => {
+		mounted = true;
+	});
+
+	$effect(() => {
+		if (alwaysShowSidebarOnDesktop && isDesktop) {
+			sidebarOpen = true;
+			return;
+		}
+	});
+
+	// Initialize server properties on app load (run once)
+	$effect(() => {
+		// Only fetch if we don't already have props
+		if (!serverStore.props) {
+			untrack(() => {
+				serverStore.fetch();
+			});
+		}
+	});
+
+	// Sync settings when server props are loaded
+	$effect(() => {
+		const serverProps = serverStore.props;
+
+		if (serverProps) {
+			settingsStore.syncWithServerDefaults();
+		}
+	});
+
+	// Fetch router models when in router mode (for status and modalities)
+	// Wait for models to be loaded first, run only once
+	let routerModelsFetched = false;
+
+	$effect(() => {
+		const isRouter = isRouterMode();
+		const modelsCount = modelsStore.models.length;
+
+		// Only fetch router models once when we have models loaded and in router mode
+		if (isRouter && modelsCount > 0 && !routerModelsFetched) {
+			routerModelsFetched = true;
+			untrack(() => {
+				modelsStore.fetchRouterModels();
+			});
+		}
+	});
+
+	// Background MCP server health checks on app load
+	// Fetch enabled servers from settings and run health checks in background
+	$effect(() => {
+		if (!browser) return;
+
+		const mcpServers = mcpStore.getServers();
+
+		// Only run health checks if we have enabled servers with URLs
+		const enabledServers = mcpServers.filter((s) => s.enabled && s.url.trim());
+
+		if (enabledServers.length > 0) {
+			untrack(() => {
+				// Run health checks in background (don't await)
+				mcpStore.runHealthChecksForServers(enabledServers, false).catch((error) => {
+					console.warn('[layout] MCP health checks failed:', error);
+				});
+			});
+		}
+	});
+
+	// Monitor API key changes and redirect to error page if removed or changed when required
+	$effect(() => {
+		checkApiKey();
+	});
+
+	// Set up title update confirmation callback
+	$effect(() => {
+		conversationsStore.setTitleUpdateConfirmationCallback(
+			async (currentTitle: string, newTitle: string) => {
+				return new Promise<boolean>((resolve) => {
+					titleUpdateCurrentTitle = currentTitle;
+					titleUpdateNewTitle = newTitle;
+					titleUpdateResolve = resolve;
+					titleUpdateDialogOpen = true;
+				});
+			}
+		);
+	});
+</script>
+
+<Tooltip.Provider delayDuration={TOOLTIP_DELAY_DURATION}>
+	<ModeWatcher />
+
+	<Toaster richColors />
+
+	<DialogConversationTitleUpdate
+		bind:open={titleUpdateDialogOpen}
+		currentTitle={titleUpdateCurrentTitle}
+		newTitle={titleUpdateNewTitle}
+		onConfirm={handleTitleUpdateConfirm}
+		onCancel={handleTitleUpdateCancel}
+	/>
+
+	<Sidebar.Provider bind:open={sidebarOpen}>
+		<div class="flex h-screen w-full" style:height="{innerHeight}px">
+			<Sidebar.Root variant="floating" class="h-full">
+				<SidebarNavigation bind:this={chatSidebar} />
+			</Sidebar.Root>
+
+			{#if !(alwaysShowSidebarOnDesktop && isDesktop) && !(panelNav.isSettingsRoute && !isDesktop)}
+				{#if mounted}
+					<div in:fade={{ duration: 200 }}>
+						<Sidebar.Trigger
+							class="transition-left absolute left-0 z-[900] duration-200 ease-linear {sidebarOpen
+								? 'left-[calc(var(--sidebar-width)+0.75rem)] max-md:hidden'
+								: 'left-0!'}"
+							style="translate: 1rem 1rem;"
+						/>
+					</div>
+				{/if}
+			{/if}
+
+			{#if isDesktop && !alwaysShowSidebarOnDesktop}
+				<DesktopIconStrip
+					{sidebarOpen}
+					onSearchClick={() => {
+						if (chatSidebar?.activateSearchMode) {
+							chatSidebar.activateSearchMode();
+						}
+
+						sidebarOpen = true;
+					}}
+				/>
+			{/if}
+
+			<Sidebar.Inset class="flex flex-1 flex-col overflow-hidden">
+				{@render children?.()}
+			</Sidebar.Inset>
+		</div>
+	</Sidebar.Provider>
+</Tooltip.Provider>
+
+<svelte:window onkeydown={handleKeydown} bind:innerHeight />
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { SettingsMcpServers } from '$lib/components/app/settings';
+</script>
+
+<SettingsMcpServers class="mx-auto w-full p-4 md:p-8 md:py-8" />
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { page } from '$app/state';
+	import { ActionIcon } from '$lib/components/app';
+	import { SETTINGS_FALLBACK_EXIT_ROUTE } from '$lib/constants';
+
+	let { children } = $props();
+
+	let previousRouteId = $state<string | null>(null);
+
+	$effect(() => {
+		const currentId = page.route.id;
+		return () => {
+			previousRouteId = currentId;
+		};
+	});
+
+	function handleClose() {
+		const prevIsSettings = previousRouteId?.startsWith('/settings');
+		if (browser && window.history.length > 1 && !prevIsSettings) {
+			history.back();
+		} else {
+			goto(SETTINGS_FALLBACK_EXIT_ROUTE);
+		}
+	}
+</script>
+
+<div class="relative h-full">
+	<div class="fixed top-4.5 right-4 z-50 md:hidden">
+		<ActionIcon icon={X} tooltip="Close" onclick={handleClose} />
+	</div>
+
+	<div class="min-h-full">
+		{@render children?.()}
+	</div>
+</div>
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { SettingsChat } from '$lib/components/app/settings';
+	import { page } from '$app/state';
+	import { replaceState } from '$app/navigation';
+	import { RouterService } from '$lib/services';
+	import { SETTINGS_SECTION_SLUGS } from '$lib/constants';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		if (!page.params.section) {
+			replaceState(RouterService.settings(SETTINGS_SECTION_SLUGS.GENERAL), {});
+		}
+	});
+</script>
+
+<SettingsChat initialSection={(page.params as Record<string, string | undefined>).section} />