diff --git a/.changeset/chat-phase-one.md b/.changeset/chat-phase-one.md
new file mode 100644
index 0000000..196cfd9
--- /dev/null
+++ b/.changeset/chat-phase-one.md
@@ -0,0 +1,5 @@
+---
+'contextvm-site': minor
+---
+
+Add the phase-one chat workspace with OpenRouter auto mode, provider and model configuration, streaming chat, and persistent conversations.
diff --git a/bun.lock b/bun.lock
index 90831c8..616eeac 100644
--- a/bun.lock
+++ b/bun.lock
@@ -22,6 +22,7 @@
         "marked": "^17.0.5",
         "mode-watcher": "^1.1.0",
         "nostr-tools": "^2.23.3",
+        "openai": "^6.38.0",
         "rxjs": "^7.8.2",
         "zod": "^4.3.6",
       },
@@ -751,6 +752,8 @@
 
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
+    "openai": ["openai@6.38.0", "", { "peerDependencies": { "ws": "^8.18.0", "zod": "^3.25 || ^4.0" }, "optionalPeers": ["ws", "zod"], "bin": { "openai": "bin/cli" } }, "sha512-AoMplt2UalrpgUDMh3L09QWjNRlgJPipclQvA6sYAaeF6nHNBMgmikAZGmcYLn8on4d9sQY9Q8bOLfrBS7Lc8g=="],
+
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
     "outdent": ["outdent@0.5.0", "", {}, "sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q=="],
diff --git a/package.json b/package.json
index 2da256c..285a63d 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
 		"marked": "^17.0.5",
 		"mode-watcher": "^1.1.0",
 		"nostr-tools": "^2.23.3",
+		"openai": "^6.38.0",
 		"rxjs": "^7.8.2",
 		"zod": "^4.3.6"
 	}
diff --git a/src/app.css b/src/app.css
index e623f11..84ef932 100644
--- a/src/app.css
+++ b/src/app.css
@@ -132,6 +132,7 @@
 
 	pre {
 		@apply overflow-x-auto rounded-lg bg-muted p-4;
+		max-width: 100%;
 	}
 
 	blockquote {
@@ -435,6 +436,28 @@
 	animation: fade-in-up 0.8s ease-out;
 }
 
+/* ============================================
+   Chat Bubble Overflow Containment
+   ============================================ */
+
+/* Force code blocks inside prose containers to respect parent width.
+   <pre> has an intrinsic min-width equal to content; this resets it. */
+.prose pre,
+.prose .code-block {
+	min-width: 0;
+	max-width: 100%;
+}
+
+.prose .code-block > div {
+	min-width: 0;
+	max-width: 100%;
+}
+
+/* Code blocks inside chat bubbles: force the scrollable container
+   to compute its width from the bubble, not from its content.
+   The key trick is width:0 + min-width:100% on the scroll wrapper,
+   applied via inline styles in ChatBubble.svelte's renderer. */
+
 /* ============================================
    Mobile Optimizations
    ============================================ */
diff --git a/src/lib/components/chat/AutoModeBanner.svelte b/src/lib/components/chat/AutoModeBanner.svelte
new file mode 100644
index 0000000..af6c45f
--- /dev/null
+++ b/src/lib/components/chat/AutoModeBanner.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import KeyRoundIcon from '@lucide/svelte/icons/key-round';
+	import SparklesIcon from '@lucide/svelte/icons/sparkles';
+
+	let { usingDefaultKey = false }: { usingDefaultKey?: boolean } = $props();
+</script>
+
+<div
+	class="flex flex-col gap-3 rounded-lg border border-sidebar-border bg-sidebar-accent/45 px-3 py-2.5 text-sm sm:flex-row sm:items-center sm:justify-between"
+>
+	<div class="flex min-w-0 items-start gap-2.5">
+		<div
+			class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-background/70 text-primary"
+		>
+			<SparklesIcon class="h-4 w-4" />
+		</div>
+		<div class="min-w-0">
+			<p class="font-medium text-foreground">OpenRouter auto mode</p>
+			<p class="text-xs leading-5 text-muted-foreground">
+				Free models rotate automatically. Add your own key for steadier limits.
+			</p>
+		</div>
+	</div>
+	{#if usingDefaultKey}
+		<div
+			class="inline-flex w-fit items-center gap-1.5 rounded-md border border-border bg-background/70 px-2 py-1 text-xs text-muted-foreground"
+		>
+			<KeyRoundIcon class="h-3.5 w-3.5" />
+			Bundled public key
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
new file mode 100644
index 0000000..b979948
--- /dev/null
+++ b/src/lib/components/chat/Chat.svelte
@@ -0,0 +1,434 @@
+<script lang="ts">
+	import {
+		isAutoMode,
+		isUsingDefaultKey,
+		type ChatMessage,
+		type LLMConfig
+	} from '$lib/types/chat-types';
+	import {
+		createConversation,
+		getConversation,
+		updateConversation
+	} from '$lib/services/conversation-store.svelte';
+	import { LLMService } from '$lib/services/llm';
+	import ChatBubble from '$lib/components/chat/ChatBubble.svelte';
+	import ChatInput from '$lib/components/chat/ChatInput.svelte';
+	import AutoModeBanner from '$lib/components/chat/AutoModeBanner.svelte';
+	import { cn } from '$lib/utils.js';
+	import ServerIcon from '@lucide/svelte/icons/server';
+	import GitBranchIcon from '@lucide/svelte/icons/git-branch';
+	import PlugIcon from '@lucide/svelte/icons/plug';
+	import TerminalIcon from '@lucide/svelte/icons/terminal';
+
+	type PromptItem = { text: string; icon: typeof ServerIcon };
+
+	const PROMPT_POOL: PromptItem[] = [
+		{
+			text: 'Find MCP servers that offer code analysis tools',
+			icon: ServerIcon
+		},
+		{
+			text: 'List all available tools on my connected servers',
+			icon: ServerIcon
+		},
+		{
+			text: 'Compare capabilities of two MCP server providers',
+			icon: ServerIcon
+		},
+		{
+			text: 'Design a multi-step workflow using MCP tools',
+			icon: GitBranchIcon
+		},
+		{
+			text: 'Chain a file reader and a summarizer tool together',
+			icon: GitBranchIcon
+		},
+		{
+			text: 'Build an automated code review pipeline with MCP',
+			icon: GitBranchIcon
+		},
+		{
+			text: 'Help me connect a new MCP server via Nostr relay',
+			icon: PlugIcon
+		},
+		{
+			text: 'Generate a server announcement event for my tools',
+			icon: PlugIcon
+		},
+		{
+			text: 'Walk me through setting up a ContextVM transport',
+			icon: PlugIcon
+		},
+		{
+			text: 'Use the connected tools to analyze this codebase',
+			icon: TerminalIcon
+		},
+		{
+			text: 'Run a tool and explain the output step by step',
+			icon: TerminalIcon
+		},
+		{
+			text: 'Draft a Nostr event to publish my MCP server',
+			icon: TerminalIcon
+		}
+	];
+
+	const shuffleArray = <T,>(items: T[]) => {
+		const result = [...items];
+		for (let i = result.length - 1; i > 0; i -= 1) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[result[i], result[j]] = [result[j], result[i]];
+		}
+		return result;
+	};
+
+	let {
+		conversationId = $bindable(null),
+		config,
+		lastUsedModel = $bindable('')
+	}: {
+		conversationId?: string | null;
+		config: LLMConfig;
+		lastUsedModel?: string;
+	} = $props();
+
+	let messages = $state<ChatMessage[]>([]);
+	let isStreaming = $state(false);
+	let errorMessage = $state<string | null>(null);
+	let llmService: LLMService | null = null;
+	let abortController: AbortController | null = null;
+	let scrollRef = $state<HTMLDivElement | null>(null);
+	// Intentionally non-reactive: used only as a stale-update guard token.
+	let conversationToken = 0;
+	let loadedConversationId: string | null = null;
+	let isNearBottom = $state(true);
+	let starterPrompts = $state<PromptItem[]>(shuffleArray(PROMPT_POOL).slice(0, 3));
+	let persistTimeout: ReturnType<typeof setTimeout> | null = null;
+	let pendingPersist: { id: string; messages: ChatMessage[] } | null = null;
+
+	const autoModeEnabled = $derived(isAutoMode(config));
+	const usingDefaultKey = $derived(isUsingDefaultKey(config));
+
+	$effect(() => {
+		if (llmService) {
+			llmService.reconfigure(config);
+			return;
+		}
+
+		llmService = new LLMService(config);
+	});
+
+	$effect(() => {
+		const activeId = conversationId ?? null;
+		if (activeId === loadedConversationId) {
+			return;
+		}
+
+		loadedConversationId = activeId;
+		conversationToken += 1;
+		const token = conversationToken;
+		abortController?.abort();
+		abortController = null;
+		isStreaming = false;
+		errorMessage = null;
+		lastUsedModel = '';
+
+		if (!activeId) {
+			messages = [];
+			return;
+		}
+
+		(async () => {
+			try {
+				const conversation = await getConversation(activeId);
+				if (token !== conversationToken) {
+					return;
+				}
+
+				messages = conversation?.messages ?? [];
+			} catch (error) {
+				if (token !== conversationToken) {
+					return;
+				}
+
+				errorMessage =
+					error instanceof Error ? error.message : 'Failed to load conversation messages.';
+				messages = [];
+			}
+		})();
+
+		return () => {
+			abortController?.abort();
+		};
+	});
+
+	$effect(() => {
+		void messages.length;
+		void isStreaming;
+		if (!scrollRef) {
+			return;
+		}
+
+		queueMicrotask(() => {
+			if (isNearBottom) {
+				scrollRef?.scrollTo({ top: scrollRef.scrollHeight, behavior: 'smooth' });
+			}
+		});
+	});
+
+	const updateIsNearBottom = () => {
+		if (!scrollRef) {
+			return;
+		}
+
+		const distance = scrollRef.scrollHeight - scrollRef.scrollTop - scrollRef.clientHeight;
+		isNearBottom = distance < 160;
+	};
+
+	const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
+		scrollRef?.scrollTo({ top: scrollRef.scrollHeight, behavior });
+	};
+
+	const debouncedPersist = (id: string, nextMessages: ChatMessage[], ms = 1000) => {
+		pendingPersist = { id, messages: nextMessages };
+		if (persistTimeout) {
+			return;
+		}
+
+		persistTimeout = setTimeout(() => {
+			const pending = pendingPersist;
+			persistTimeout = null;
+			pendingPersist = null;
+
+			if (!pending) {
+				return;
+			}
+
+			updateConversation(pending.id, pending.messages).catch((error) => {
+				console.error('Failed to persist conversation:', error);
+			});
+		}, ms);
+	};
+
+	const clearDebouncedPersist = (id: string) => {
+		if (pendingPersist?.id !== id) {
+			return;
+		}
+
+		pendingPersist = null;
+		if (persistTimeout) {
+			clearTimeout(persistTimeout);
+			persistTimeout = null;
+		}
+	};
+
+	const handleStop = () => {
+		abortController?.abort();
+	};
+
+	const handleSend = async (content: string) => {
+		if (!content.trim() || !llmService || isStreaming) {
+			return;
+		}
+
+		let activeId = conversationId;
+		if (!activeId) {
+			try {
+				const newConv = await createConversation();
+				activeId = newConv.id;
+				messages = [];
+				loadedConversationId = activeId;
+				conversationId = activeId;
+			} catch (error) {
+				errorMessage = error instanceof Error ? error.message : 'Failed to create conversation.';
+				return;
+			}
+		}
+
+		errorMessage = null;
+		const token = conversationToken;
+		const userMessage: ChatMessage = {
+			id: crypto.randomUUID(),
+			content,
+			role: 'user',
+			timestamp: new Date()
+		};
+
+		const streamMessages = messages;
+		streamMessages.push(userMessage);
+		const outgoingMessages = [...streamMessages];
+		isStreaming = true;
+
+		try {
+			await updateConversation(activeId, streamMessages);
+		} catch (error) {
+			if (token === conversationToken) {
+				errorMessage = error instanceof Error ? error.message : 'Failed to save message.';
+				isStreaming = false;
+			}
+			return;
+		}
+
+		if (token !== conversationToken) {
+			return;
+		}
+
+		const assistantMessage: ChatMessage = {
+			id: crypto.randomUUID(),
+			content: '',
+			role: 'assistant',
+			timestamp: new Date()
+		};
+		streamMessages.push(assistantMessage);
+		const assistant = streamMessages[streamMessages.length - 1];
+
+		if (!assistant) {
+			if (token === conversationToken) {
+				isStreaming = false;
+			}
+			return;
+		}
+
+		const controller = new AbortController();
+		abortController = controller;
+
+		try {
+			const result = await llmService.sendMessage(outgoingMessages, {
+				signal: controller.signal,
+				onDelta: (delta) => {
+					if (token !== conversationToken) {
+						return;
+					}
+
+					assistant.content += delta;
+					debouncedPersist(activeId, streamMessages);
+					if (isNearBottom) {
+						scrollToBottom('auto');
+					}
+				},
+				onReset: (model) => {
+					if (token !== conversationToken) {
+						return;
+					}
+
+					assistant.content = '';
+					debouncedPersist(activeId, streamMessages);
+					lastUsedModel = model;
+				}
+			});
+
+			if (result.content && result.content !== assistant.content) {
+				assistant.content = result.content;
+			}
+			if (token === conversationToken) {
+				lastUsedModel = result.model;
+			}
+		} catch (error) {
+			if (controller.signal.aborted) {
+				if (!assistant.content) {
+					const assistantIndex = streamMessages.findIndex((message) => message.id === assistant.id);
+					if (assistantIndex >= 0) {
+						streamMessages.splice(assistantIndex, 1);
+					}
+				}
+				return;
+			}
+
+			const errorText = error instanceof Error ? error.message : 'Something went wrong.';
+			if (token === conversationToken) {
+				errorMessage = errorText;
+			}
+			assistant.content = `Error: ${errorText}`;
+		} finally {
+			clearDebouncedPersist(activeId);
+			if (token === conversationToken) {
+				isStreaming = false;
+				abortController = null;
+			}
+			try {
+				await updateConversation(activeId, streamMessages);
+			} catch (_error) {
+				// Conversation might have been deleted mid-stream, safe to ignore.
+			}
+		}
+	};
+</script>
+
+<div class="flex h-full min-h-0 min-w-0 flex-col overflow-hidden">
+	{#if autoModeEnabled}
+		<div class="border-b border-border bg-background/80 px-4 py-3">
+			<AutoModeBanner {usingDefaultKey} />
+		</div>
+	{/if}
+	<div
+		class="min-h-0 w-full min-w-0 flex-1 overflow-x-hidden overflow-y-auto"
+		bind:this={scrollRef}
+		onscroll={updateIsNearBottom}
+	>
+		{#if !conversationId}
+			<div class="flex h-full items-center justify-center px-6">
+				<p class="max-w-sm text-center text-sm text-muted-foreground">
+					Choose a conversation or start a new one to begin chatting.
+				</p>
+			</div>
+		{:else if messages.length === 0}
+			<div
+				class="animate-fade-in-up mx-auto flex h-full w-full max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center"
+			>
+				<div class="relative">
+					<div class="absolute inset-0 rounded-2xl bg-primary/10 blur-2xl"></div>
+					<div
+						class="relative flex h-12 w-12 items-center justify-center rounded-2xl border border-border/60 bg-background text-sm font-semibold text-primary"
+					>
+						CV
+					</div>
+				</div>
+				<div class="space-y-2">
+					<p class="text-xl font-semibold text-foreground">What can I help you build?</p>
+					<p class="text-sm leading-6 text-muted-foreground">
+						Orchestrate MCP servers, explore tools, and manage workflows — all from this chat.
+					</p>
+				</div>
+				<div class="grid w-full gap-3 sm:grid-cols-3">
+					{#each starterPrompts as prompt (prompt.text)}
+						{@const Icon = prompt.icon}
+						<button
+							type="button"
+							class="group flex h-full items-start gap-3 rounded-xl border border-border/60 bg-card/60 px-3.5 py-3 text-left text-sm leading-5 text-foreground shadow-sm backdrop-blur transition-all duration-150 hover:-translate-y-0.5 hover:border-primary/30 hover:bg-card/80 disabled:cursor-not-allowed disabled:opacity-60"
+							disabled={isStreaming}
+							onclick={() => handleSend(prompt.text)}
+						>
+							<span
+								class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
+							>
+								<Icon class="h-4 w-4" />
+							</span>
+							<span class="min-w-0 text-left">{prompt.text}</span>
+						</button>
+					{/each}
+				</div>
+				<p class="text-[11px] text-muted-foreground/60">
+					Press Enter to send · Shift+Enter for new line
+				</p>
+			</div>
+		{:else}
+			<div class="mx-auto w-full max-w-4xl space-y-4 px-4 py-6">
+				{#each messages as message (message.id)}
+					<ChatBubble {message} />
+				{/each}
+			</div>
+		{/if}
+	</div>
+	<div class="border-t border-border bg-background/80 px-4 py-4">
+		<div class={cn('mx-auto max-w-4xl space-y-2', errorMessage ? 'pb-2' : '')}>
+			{#if errorMessage}
+				<p
+					class="rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive"
+				>
+					{errorMessage}
+				</p>
+			{/if}
+			<ChatInput {isStreaming} onSend={handleSend} onStop={handleStop} />
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/chat/ChatBubble.svelte b/src/lib/components/chat/ChatBubble.svelte
new file mode 100644
index 0000000..2769b02
--- /dev/null
+++ b/src/lib/components/chat/ChatBubble.svelte
@@ -0,0 +1,124 @@
+<script lang="ts" module>
+	import { marked } from 'marked';
+
+	const escapeHtml = (value: string) =>
+		value
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#39;');
+
+	const renderer = new marked.Renderer();
+	const codeClass =
+		'relative overflow-x-auto rounded-lg border border-border/60 bg-muted/60 p-3 text-sm';
+	const buttonClass =
+		'code-copy absolute right-2 top-2 rounded-full border border-border/70 bg-background/80 px-2 py-0.5 text-[10px] font-medium text-muted-foreground opacity-0 transition-opacity duration-150 hover:text-foreground group-hover:opacity-100';
+
+	renderer.code = ({ text, lang }: { text: string; lang?: string }) => {
+		const langClass = lang ? `language-${lang}` : '';
+		const label = lang ? `Copy ${lang}` : 'Copy';
+		const escaped = escapeHtml(text);
+		return `
+<div class="code-block group relative my-3 rounded-lg bg-muted/60" style="width:100%;min-width:0;max-width:100%">
+	<button type="button" class="${buttonClass} z-10" aria-label="${label}">Copy</button>
+	<div class="overflow-x-auto rounded-lg" style="width:0;min-width:100%">
+		<pre class="${codeClass} m-0" style="min-width:0"><code class="${langClass}">${escaped}</code></pre>
+	</div>
+</div>
+`;
+	};
+
+	const parseOptions = {
+		async: false,
+		breaks: true,
+		gfm: true,
+		renderer
+	} as const;
+</script>
+
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import DOMPurify from 'dompurify';
+	import type { ChatMessage } from '$lib/types/chat-types';
+	import { cn, copyToClipboard, formatRelativeTime } from '$lib/utils.js';
+
+	let { message }: { message: ChatMessage } = $props();
+
+	const html = $derived.by(() => {
+		const raw = marked.parse(message.content ?? '', parseOptions) as string;
+		return browser ? DOMPurify.sanitize(raw) : '';
+	});
+
+	const timestampLabel = $derived.by(() => formatRelativeTime(message.timestamp));
+
+	const handleCodeCopy = async (event: MouseEvent) => {
+		const target = event.target as HTMLElement | null;
+		const button = target?.closest('.code-copy');
+		if (!button) {
+			return;
+		}
+
+		const block = button.closest('.code-block');
+		const code = block?.querySelector('code')?.textContent ?? '';
+		if (!code) {
+			return;
+		}
+
+		await copyToClipboard(code);
+	};
+</script>
+
+<div
+	class={cn('flex w-full min-w-0 gap-2', message.role === 'user' ? 'justify-end' : 'justify-start')}
+>
+	{#if message.role !== 'user'}
+		<div
+			class="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-gradient-to-br from-primary/20 via-background to-background text-[11px] font-semibold text-primary/80"
+		>
+			CV
+		</div>
+	{/if}
+	<div
+		class={cn(
+			'flex max-w-[90%] min-w-0 flex-1 flex-col overflow-hidden md:max-w-2xl lg:max-w-3xl',
+			message.role === 'user' ? 'items-end' : 'items-start'
+		)}
+	>
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+		<div
+			class={cn(
+				'relative w-full rounded-2xl px-4 py-3 text-sm leading-relaxed break-words shadow-sm',
+				message.role === 'user'
+					? 'bg-gradient-to-br from-primary to-primary/85 text-primary-foreground shadow-md shadow-primary/10'
+					: message.role === 'system'
+						? 'bg-muted text-muted-foreground'
+						: 'border border-border/60 bg-card/80 text-card-foreground backdrop-blur-sm',
+				message.role !== 'user' ? 'prose prose-sm dark:prose-invert max-w-none' : ''
+			)}
+			onclick={handleCodeCopy}
+		>
+			{#if message.role === 'user'}
+				<p class="whitespace-pre-wrap">{message.content}</p>
+			{:else if message.role === 'assistant' && !message.content}
+				<span class="flex h-5 items-center gap-1.5" aria-label="Assistant is responding">
+					<span
+						class="h-1.5 w-1.5 animate-pulse rounded-full bg-primary/70 shadow-[0_0_6px_rgba(59,130,246,0.35)]"
+					></span>
+					<span
+						class="h-1.5 w-1.5 animate-pulse rounded-full bg-primary/60 shadow-[0_0_6px_rgba(59,130,246,0.3)] [animation-delay:120ms]"
+					></span>
+					<span
+						class="h-1.5 w-1.5 animate-pulse rounded-full bg-primary/50 shadow-[0_0_6px_rgba(59,130,246,0.25)] [animation-delay:240ms]"
+					></span>
+				</span>
+			{:else}
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitized through DOMPurify before rendering -->
+				{@html html}
+			{/if}
+		</div>
+		{#if timestampLabel}
+			<span class="mt-1 text-[10px] text-muted-foreground/50">{timestampLabel}</span>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/chat/ChatInput.svelte b/src/lib/components/chat/ChatInput.svelte
new file mode 100644
index 0000000..163195c
--- /dev/null
+++ b/src/lib/components/chat/ChatInput.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+	import SquareIcon from '@lucide/svelte/icons/square';
+
+	let {
+		value = $bindable(''),
+		isStreaming = false,
+		disabled = false,
+		onSend,
+		onStop,
+		placeholder = 'Ask ContextVM...',
+		class: className
+	}: {
+		value?: string;
+		isStreaming?: boolean;
+		disabled?: boolean;
+		onSend?: (value: string) => void;
+		onStop?: () => void;
+		placeholder?: string;
+		class?: string;
+	} = $props();
+
+	let textareaRef = $state<HTMLTextAreaElement | null>(null);
+	const isSendDisabled = $derived(!isStreaming && (disabled || value.trim().length === 0));
+
+	const resize = () => {
+		if (!textareaRef) {
+			return;
+		}
+
+		textareaRef.style.height = 'auto';
+		textareaRef.style.height = `${Math.min(textareaRef.scrollHeight, 180)}px`;
+	};
+
+	const handleSend = () => {
+		const trimmed = value.trim();
+		if (!trimmed || isStreaming || disabled) {
+			return;
+		}
+
+		onSend?.(trimmed);
+		value = '';
+		resize();
+		textareaRef?.focus();
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			handleSend();
+		}
+	};
+
+	const handleInput = () => {
+		resize();
+	};
+
+	$effect(() => {
+		if (typeof value === 'string') {
+			resize();
+		}
+	});
+</script>
+
+<div class={cn('space-y-1', className)}>
+	<div
+		class={cn(
+			'flex items-end gap-2 rounded-2xl border border-border bg-background/90 p-2 shadow-sm backdrop-blur transition-all focus-within:border-primary/60 focus-within:shadow-lg focus-within:ring-2 focus-within:ring-primary/15 hover:border-primary/40 hover:shadow-md'
+		)}
+	>
+		<Textarea
+			bind:ref={textareaRef}
+			bind:value
+			rows={1}
+			class="min-h-[44px] w-full resize-none border-none bg-transparent text-sm shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-0"
+			{placeholder}
+			{disabled}
+			onkeydown={handleKeydown}
+			oninput={handleInput}
+		/>
+		<Button
+			size="icon"
+			variant={isStreaming ? 'secondary' : 'default'}
+			class={cn('h-9 w-9 transition-all', isStreaming ? 'animate-pulse' : 'hover:scale-105')}
+			disabled={isSendDisabled}
+			onclick={() => (isStreaming ? onStop?.() : handleSend())}
+		>
+			{#if isStreaming}
+				<SquareIcon class="h-4 w-4" />
+				<span class="sr-only">Stop generating</span>
+			{:else}
+				<ArrowUpIcon class="h-4 w-4" />
+				<span class="sr-only">Send message</span>
+			{/if}
+		</Button>
+	</div>
+	<div class="flex items-center justify-between px-1 text-[11px] text-muted-foreground">
+		<span>Enter to send</span>
+		<span>Shift+Enter for new line</span>
+	</div>
+</div>
diff --git a/src/lib/components/chat/ChatSidebar.svelte b/src/lib/components/chat/ChatSidebar.svelte
new file mode 100644
index 0000000..008001b
--- /dev/null
+++ b/src/lib/components/chat/ChatSidebar.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import ConversationList from '$lib/components/chat/ConversationList.svelte';
+
+	let { activeId = $bindable(null) }: { activeId?: string | null } = $props();
+</script>
+
+<Sidebar.Root collapsible="icon" class="border-r border-border/60 bg-sidebar/95">
+	<Sidebar.Header class="border-b border-border/60 bg-sidebar/80">
+		<div class="flex items-center justify-between gap-2">
+			<div class="flex items-center gap-2 group-data-[state=collapsed]/sidebar:hidden">
+				<div
+					class="flex h-9 w-9 items-center justify-center rounded-xl bg-sidebar-accent text-sm font-semibold text-sidebar-accent-foreground shadow-sm"
+				>
+					CV
+				</div>
+				<div class="flex flex-col">
+					<span class="text-sm leading-none font-semibold"> Chat </span>
+					<span class="text-xs text-muted-foreground"> Your conversations </span>
+				</div>
+			</div>
+			<Sidebar.Trigger />
+		</div>
+		<Sidebar.Menu class="group-data-[state=collapsed]/sidebar:hidden">
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton
+					isActive={true}
+					class="transition-colors data-[active=true]:bg-sidebar-accent/80 data-[active=true]:text-sidebar-accent-foreground"
+				>
+					Conversations
+				</Sidebar.MenuButton>
+			</Sidebar.MenuItem>
+		</Sidebar.Menu>
+	</Sidebar.Header>
+	<Sidebar.Content class="px-2 pb-4 group-data-[state=collapsed]/sidebar:hidden">
+		<ConversationList bind:activeId />
+	</Sidebar.Content>
+	<Sidebar.Rail />
+</Sidebar.Root>
diff --git a/src/lib/components/chat/ConversationList.svelte b/src/lib/components/chat/ConversationList.svelte
new file mode 100644
index 0000000..49b7b9a
--- /dev/null
+++ b/src/lib/components/chat/ConversationList.svelte
@@ -0,0 +1,299 @@
+<script lang="ts">
+	import type { Conversation } from '$lib/types/chat-types';
+	import {
+		conversationStore,
+		createConversation,
+		deleteConversation,
+		renameConversation
+	} from '$lib/services/conversation-store.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { cn } from '$lib/utils.js';
+	import { toast } from 'svelte-sonner';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import PencilIcon from '@lucide/svelte/icons/pencil';
+	import Trash2Icon from '@lucide/svelte/icons/trash-2';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import XIcon from '@lucide/svelte/icons/x';
+	import MessageSquareIcon from '@lucide/svelte/icons/message-square';
+
+	let { activeId = $bindable(null) }: { activeId?: string | null } = $props();
+
+	let editingId = $state<string | null>(null);
+	let editingTitle = $state('');
+
+	let deleteTarget = $state<Conversation | null>(null);
+	let deleteOpen = $state(false);
+	let isCreating = $state(false);
+	let renamingId = $state<string | null>(null);
+	let deletingId = $state<string | null>(null);
+
+	const handleCreate = async () => {
+		if (isCreating) {
+			return;
+		}
+
+		isCreating = true;
+		try {
+			const conversation = await createConversation();
+			activeId = conversation.id;
+		} catch (error) {
+			console.error('Failed to create conversation:', error);
+			toast.error('Failed to create conversation.');
+		} finally {
+			isCreating = false;
+		}
+	};
+
+	const handleSelect = (id: string) => {
+		activeId = id;
+	};
+
+	const startRename = (conversation: Conversation) => {
+		editingId = conversation.id;
+		editingTitle = conversation.title;
+	};
+
+	const commitRename = async () => {
+		if (!editingId || renamingId) {
+			return;
+		}
+
+		const nextId = editingId;
+		const nextTitle = editingTitle;
+		renamingId = nextId;
+
+		try {
+			await renameConversation(nextId, nextTitle);
+			if (editingId === nextId) {
+				editingId = null;
+				editingTitle = '';
+			}
+		} catch (error) {
+			console.error('Failed to rename conversation:', error);
+			toast.error('Failed to rename conversation.');
+		} finally {
+			if (renamingId === nextId) {
+				renamingId = null;
+			}
+		}
+	};
+
+	const cancelRename = () => {
+		if (renamingId) {
+			return;
+		}
+
+		editingId = null;
+		editingTitle = '';
+	};
+
+	const openDeleteDialog = (conversation: Conversation) => {
+		deleteTarget = conversation;
+		deleteOpen = true;
+	};
+
+	const confirmDelete = async () => {
+		if (!deleteTarget || deletingId) {
+			return;
+		}
+
+		const targetId = deleteTarget.id;
+		deletingId = targetId;
+
+		try {
+			await deleteConversation(targetId);
+			deleteOpen = false;
+			deleteTarget = null;
+
+			if (activeId === targetId) {
+				const fallback = conversationStore.conversations[0]?.id ?? null;
+				if (fallback) {
+					activeId = fallback;
+					return;
+				}
+
+				const conversation = await createConversation();
+				activeId = conversation.id;
+			}
+		} catch (error) {
+			console.error('Failed to delete conversation:', error);
+			toast.error('Failed to delete conversation.');
+		} finally {
+			if (deletingId === targetId) {
+				deletingId = null;
+			}
+		}
+	};
+
+	const handleRenameKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			commitRename();
+		}
+
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			cancelRename();
+		}
+	};
+
+	const formatConversationMeta = (conversation: Conversation) => {
+		const updatedAt = new Date(conversation.updatedAt);
+		const dateLabel = Number.isNaN(updatedAt.getTime())
+			? ''
+			: new Intl.DateTimeFormat(undefined, {
+					month: 'short',
+					day: 'numeric'
+				}).format(updatedAt);
+		const messageCount = conversation.messages.length;
+		const countLabel = `${messageCount} ${messageCount === 1 ? 'message' : 'messages'}`;
+
+		return dateLabel ? `${countLabel} · ${dateLabel}` : countLabel;
+	};
+</script>
+
+<div class="flex items-center justify-between gap-2 px-1">
+	<p class="text-xs font-semibold tracking-wide text-muted-foreground uppercase">Conversations</p>
+	<Button
+		variant="outline"
+		size="sm"
+		class="h-8 gap-1.5 border-transparent bg-gradient-to-r from-primary/90 to-primary px-2.5 text-xs text-primary-foreground shadow-sm hover:from-primary hover:to-primary/80 hover:shadow-md"
+		disabled={isCreating}
+		onclick={handleCreate}
+	>
+		<PlusIcon class="h-3.5 w-3.5" />
+		New
+	</Button>
+</div>
+
+<ScrollArea class="mt-3 h-full">
+	{#if conversationStore.loading}
+		<div
+			class="rounded-lg border border-border/60 bg-background/40 px-3 py-4 text-sm text-muted-foreground"
+		>
+			Loading conversations...
+		</div>
+	{:else if conversationStore.conversations.length === 0}
+		<div class="rounded-lg border border-dashed border-border bg-background/35 px-3 py-6">
+			<div class="flex flex-col items-center gap-2 text-center">
+				<div
+					class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary"
+				>
+					<MessageSquareIcon class="h-4 w-4" />
+				</div>
+				<p class="text-sm font-medium">No conversations yet</p>
+				<p class="text-xs leading-5 text-muted-foreground">Start a new chat to save it here.</p>
+				<Button size="sm" class="mt-1 h-8" disabled={isCreating} onclick={handleCreate}>
+					<PlusIcon class="mr-1.5 h-3.5 w-3.5" />
+					Start new chat
+				</Button>
+			</div>
+		</div>
+	{:else}
+		<div class="space-y-1 px-1 pb-2">
+			{#each conversationStore.conversations as conversation (conversation.id)}
+				<div
+					class={cn(
+						'group flex items-center gap-2 rounded-lg border px-2 py-2 text-sm transition-all',
+						activeId === conversation.id
+							? 'border-primary/40 bg-sidebar-accent text-sidebar-accent-foreground shadow-md shadow-primary/10'
+							: 'border-transparent text-sidebar-foreground/80 hover:border-sidebar-border/70 hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground hover:shadow-sm'
+					)}
+				>
+					{#if editingId === conversation.id}
+						<Input
+							class="h-8 bg-background/70"
+							bind:value={editingTitle}
+							onkeydown={handleRenameKeydown}
+							onblur={commitRename}
+						/>
+						<div class="flex items-center gap-1">
+							<Button variant="ghost" size="icon" class="h-7 w-7" onclick={commitRename}>
+								<CheckIcon class="h-3.5 w-3.5" />
+								<span class="sr-only">Save name</span>
+							</Button>
+							<Button
+								variant="ghost"
+								size="icon"
+								class="h-7 w-7"
+								disabled={renamingId === conversation.id}
+								onclick={cancelRename}
+							>
+								<XIcon class="h-3.5 w-3.5" />
+								<span class="sr-only">Cancel rename</span>
+							</Button>
+						</div>
+					{:else}
+						<button
+							class="flex min-w-0 flex-1 items-start gap-2 text-left"
+							onclick={() => handleSelect(conversation.id)}
+						>
+							<MessageSquareIcon class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+							<span class="min-w-0">
+								<span class="block truncate font-medium">{conversation.title}</span>
+								<span class="block truncate text-xs text-muted-foreground">
+									{formatConversationMeta(conversation)}
+								</span>
+							</span>
+						</button>
+						<div
+							class="flex items-center gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
+						>
+							<Button
+								variant="ghost"
+								size="icon"
+								class="h-7 w-7"
+								onclick={() => startRename(conversation)}
+							>
+								<PencilIcon class="h-3.5 w-3.5" />
+								<span class="sr-only">Rename conversation</span>
+							</Button>
+							<Button
+								variant="ghost"
+								size="icon"
+								class="h-7 w-7 text-destructive"
+								onclick={() => openDeleteDialog(conversation)}
+							>
+								<Trash2Icon class="h-3.5 w-3.5" />
+								<span class="sr-only">Delete conversation</span>
+							</Button>
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</ScrollArea>
+
+<Dialog.Root
+	bind:open={deleteOpen}
+	onOpenChange={(open) => {
+		deleteOpen = open;
+		if (!open) {
+			deleteTarget = null;
+		}
+	}}
+>
+	<Dialog.Content class="sm:max-w-[420px]">
+		<Dialog.Header>
+			<Dialog.Title>Delete conversation</Dialog.Title>
+			<Dialog.Description>
+				This will permanently remove
+				<strong class="font-semibold"> {deleteTarget?.title ?? 'this conversation'} </strong>.
+			</Dialog.Description>
+		</Dialog.Header>
+		<Dialog.Footer class="flex gap-2 sm:justify-end">
+			<Button variant="outline" onclick={() => (deleteOpen = false)}>Cancel</Button>
+			<Button
+				variant="destructive"
+				disabled={deletingId === deleteTarget?.id}
+				onclick={confirmDelete}
+			>
+				Delete
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/lib/components/chat/LLMConfig.svelte b/src/lib/components/chat/LLMConfig.svelte
new file mode 100644
index 0000000..f687289
--- /dev/null
+++ b/src/lib/components/chat/LLMConfig.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import * as Sheet from '$lib/components/ui/sheet/index.js';
+	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import SettingsIcon from '@lucide/svelte/icons/settings';
+	import KeyRoundIcon from '@lucide/svelte/icons/key-round';
+	import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
+	import ProviderCombobox from '$lib/components/chat/ProviderCombobox.svelte';
+	import ModelCombobox from '$lib/components/chat/ModelCombobox.svelte';
+	import {
+		DEFAULT_LLM_CONFIG,
+		DEFAULT_OPENROUTER_KEY,
+		PROVIDER_PRESETS,
+		isUsingDefaultKey,
+		type LLMConfig,
+		type ProviderPreset
+	} from '$lib/types/chat-types';
+
+	const STORAGE_KEY = 'contextvm.chat.config';
+	const sanitizeConfig = (current: LLMConfig) => ({ ...current, apiKey: '' });
+
+	let { config = $bindable({ ...DEFAULT_LLM_CONFIG }) }: { config?: LLMConfig } = $props();
+	let hasLoadedStoredConfig = $state(false);
+	let lastStoredConfig = $state('');
+	const selectedProvider = $derived(
+		PROVIDER_PRESETS.find((preset) => preset.key === config.provider) ?? PROVIDER_PRESETS[0]
+	);
+	const usingDefaultKey = $derived(isUsingDefaultKey(config));
+	const keyStatus = $derived.by(() => {
+		if (usingDefaultKey) {
+			return 'Bundled public key';
+		}
+
+		if (config.apiKey.trim()) {
+			return 'Custom key';
+		}
+
+		return selectedProvider?.requiresKey ? 'Key required' : 'No key';
+	});
+	const modelStatus = $derived(
+		config.model === 'auto' ? 'Auto free models' : config.model || 'No model selected'
+	);
+
+	const handleProviderSelect = (preset: ProviderPreset) => {
+		const nextModel =
+			preset.key === 'openrouter' ? 'auto' : config.model === 'auto' ? '' : config.model;
+		const nextApiKey =
+			preset.key === 'openrouter'
+				? config.apiKey || DEFAULT_OPENROUTER_KEY
+				: config.apiKey === DEFAULT_OPENROUTER_KEY
+					? ''
+					: config.apiKey;
+		const nextBaseURL = preset.key === 'custom' ? config.baseURL : preset.baseURL;
+
+		config = {
+			...config,
+			provider: preset.key,
+			baseURL: nextBaseURL,
+			apiKey: nextApiKey,
+			model: nextModel
+		};
+	};
+
+	const resetConfig = () => {
+		config = { ...DEFAULT_LLM_CONFIG };
+	};
+
+	const useDefaultKey = () => {
+		config = { ...config, apiKey: DEFAULT_OPENROUTER_KEY };
+	};
+
+	const handleBaseUrlInput = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		config = { ...config, baseURL: target.value };
+	};
+
+	const handleApiKeyInput = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		config = { ...config, apiKey: target.value };
+	};
+
+	const handleModelChange = (modelId: string) => {
+		config = { ...config, model: modelId };
+	};
+
+	onMount(() => {
+		if (!browser) {
+			return;
+		}
+
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) {
+			hasLoadedStoredConfig = true;
+			return;
+		}
+
+		try {
+			const stored = JSON.parse(raw) as Partial<LLMConfig>;
+			const { apiKey: _ignored, ...storedSafe } = stored;
+			const nextConfig = { ...DEFAULT_LLM_CONFIG, ...storedSafe };
+			if (nextConfig.provider === 'openrouter' && !nextConfig.apiKey) {
+				nextConfig.apiKey = DEFAULT_OPENROUTER_KEY;
+			}
+			if (nextConfig.provider !== 'openrouter' && nextConfig.model === 'auto') {
+				nextConfig.model = '';
+			}
+			config = nextConfig;
+		} catch (_error) {
+			config = { ...DEFAULT_LLM_CONFIG };
+		} finally {
+			hasLoadedStoredConfig = true;
+		}
+	});
+
+	$effect(() => {
+		if (!browser || !hasLoadedStoredConfig) {
+			return;
+		}
+
+		const serialized = JSON.stringify(sanitizeConfig(config));
+		if (serialized === lastStoredConfig) {
+			return;
+		}
+
+		localStorage.setItem(STORAGE_KEY, serialized);
+		lastStoredConfig = serialized;
+	});
+</script>
+
+<Sheet.Root>
+	<Sheet.Trigger class={buttonVariants({ variant: 'outline', size: 'icon' })}>
+		<SettingsIcon class="h-4 w-4" />
+		<span class="sr-only">Open settings</span>
+	</Sheet.Trigger>
+	<Sheet.Content side="right" class="w-full max-w-md">
+		<Sheet.Header>
+			<Sheet.Title>Chat settings</Sheet.Title>
+			<Sheet.Description>
+				Choose the provider, model, and key used for this browser.
+			</Sheet.Description>
+		</Sheet.Header>
+		<div class="space-y-5 px-5 py-6">
+			<div class="rounded-xl border border-border bg-muted/30 p-3">
+				<div class="grid gap-3 text-sm">
+					<div class="flex items-center justify-between gap-3">
+						<span class="text-muted-foreground">Provider</span>
+						<span class="truncate font-medium">{selectedProvider?.label ?? config.provider}</span>
+					</div>
+					<div class="flex items-center justify-between gap-3">
+						<span class="text-muted-foreground">Model</span>
+						<span class="truncate font-medium">{modelStatus}</span>
+					</div>
+					<div class="flex items-center justify-between gap-3">
+						<span class="text-muted-foreground">Key</span>
+						<span
+							class="inline-flex max-w-[13rem] items-center gap-1.5 truncate rounded-md border border-border bg-background px-2 py-1 text-xs"
+							class:text-primary={usingDefaultKey}
+							class:text-destructive={selectedProvider?.requiresKey && !config.apiKey.trim()}
+						>
+							<KeyRoundIcon class="h-3.5 w-3.5 shrink-0" />
+							<span class="truncate">{keyStatus}</span>
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="space-y-2">
+				<Label>Provider</Label>
+				<ProviderCombobox value={config.provider} onSelect={handleProviderSelect} />
+			</div>
+			<div class="space-y-2">
+				<Label>Base URL</Label>
+				<Input
+					value={config.baseURL}
+					oninput={handleBaseUrlInput}
+					placeholder="https://api.example.com/v1"
+				/>
+				<p class="text-xs leading-5 text-muted-foreground">
+					Pasted completion endpoints are normalized automatically.
+				</p>
+			</div>
+			<div class="space-y-2">
+				<Label>API key</Label>
+				<Input
+					type="password"
+					value={config.apiKey}
+					oninput={handleApiKeyInput}
+					placeholder="sk-..."
+				/>
+				{#if config.provider === 'openrouter' && !usingDefaultKey}
+					<Button variant="ghost" size="sm" class="h-7 px-0 text-xs" onclick={useDefaultKey}>
+						Use default OpenRouter key
+					</Button>
+				{:else if usingDefaultKey}
+					<p class="text-xs leading-5 text-muted-foreground">
+						The default key is public and limited to free-model usage.
+					</p>
+				{:else if selectedProvider?.requiresKey && !config.apiKey.trim()}
+					<p class="text-xs leading-5 text-destructive">This provider needs your API key.</p>
+				{/if}
+			</div>
+			<div class="space-y-2">
+				<Label>Model</Label>
+				<ModelCombobox
+					provider={config.provider}
+					baseURL={config.baseURL}
+					apiKey={config.apiKey}
+					value={config.model}
+					onChange={handleModelChange}
+				/>
+			</div>
+			<div class="flex items-center justify-between border-t border-border pt-4">
+				<p class="text-xs text-muted-foreground">Provider and model persist on this device.</p>
+				<Button variant="outline" size="sm" class="gap-1.5" onclick={resetConfig}>
+					<RotateCcwIcon class="h-3.5 w-3.5" />
+					Reset
+				</Button>
+			</div>
+		</div>
+	</Sheet.Content>
+</Sheet.Root>
diff --git a/src/lib/components/chat/ModelCombobox.svelte b/src/lib/components/chat/ModelCombobox.svelte
new file mode 100644
index 0000000..2f0da20
--- /dev/null
+++ b/src/lib/components/chat/ModelCombobox.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+	import * as Popover from '$lib/components/ui/popover/index.js';
+	import * as Command from '$lib/components/ui/command/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { cn } from '$lib/utils.js';
+	import { LLMService } from '$lib/services/llm';
+	import { FREE_MODEL_SUFFIX } from '$lib/services/auto-mode';
+	import { DEFAULT_OPENROUTER_KEY } from '$lib/types/chat-types';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		provider,
+		baseURL,
+		apiKey,
+		value = $bindable(''),
+		onChange
+	}: {
+		provider: string;
+		baseURL: string;
+		apiKey: string;
+		value?: string;
+		onChange?: (model: string) => void;
+	} = $props();
+
+	let open = $state(false);
+	let status = $state<'idle' | 'loading' | 'error'>('idle');
+	let errorMessage = $state<string | null>(null);
+	let models = $state<string[]>([]);
+	let debounceHandle: ReturnType<typeof setTimeout> | null = null;
+	let activeAbort: AbortController | null = null;
+
+	const showAuto = $derived(provider === 'openrouter');
+	const freeModels = $derived(models.filter((id) => id.endsWith(FREE_MODEL_SUFFIX)));
+	const paidModels = $derived(models.filter((id) => !id.endsWith(FREE_MODEL_SUFFIX)));
+
+	const selectedLabel = $derived.by(() => {
+		if (showAuto && value === 'auto') {
+			return 'Auto (free models)';
+		}
+
+		return value || 'Select model';
+	});
+
+	$effect(() => {
+		if (!baseURL.trim()) {
+			models = [];
+			status = 'idle';
+			errorMessage = null;
+			activeAbort?.abort();
+			return;
+		}
+
+		let cancelled = false;
+		status = 'loading';
+		errorMessage = null;
+
+		if (debounceHandle) {
+			clearTimeout(debounceHandle);
+		}
+		activeAbort?.abort();
+		const controller = new AbortController();
+		activeAbort = controller;
+
+		const modelListApiKey = apiKey || (provider === 'openrouter' ? DEFAULT_OPENROUTER_KEY : '');
+
+		debounceHandle = setTimeout(() => {
+			LLMService.fetchModelList(baseURL, modelListApiKey, controller.signal)
+				.then((list) => {
+					if (cancelled || controller.signal.aborted) {
+						return;
+					}
+
+					if (!list.length) {
+						status = 'error';
+						errorMessage = 'No models returned from the provider.';
+						models = [];
+						return;
+					}
+
+					models = list;
+					status = 'idle';
+				})
+				.catch((error) => {
+					if (cancelled || controller.signal.aborted) {
+						return;
+					}
+
+					status = 'error';
+					models = [];
+					errorMessage = error instanceof Error ? error.message : 'Failed to load models.';
+				});
+		}, 300);
+
+		return () => {
+			cancelled = true;
+			if (debounceHandle) {
+				clearTimeout(debounceHandle);
+				debounceHandle = null;
+			}
+			if (activeAbort === controller) {
+				activeAbort = null;
+			}
+			controller.abort();
+		};
+	});
+
+	const handleSelect = (modelId: string) => {
+		value = modelId;
+		onChange?.(modelId);
+		open = false;
+	};
+
+	const handleManualInput = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		value = target.value;
+		onChange?.(target.value);
+	};
+</script>
+
+{#if status === 'error'}
+	<div class="space-y-2">
+		<Input placeholder="Enter a model id" {value} oninput={handleManualInput} />
+		<p class="text-xs text-destructive">
+			{errorMessage ?? 'Model list unavailable. Enter the model id manually.'}
+		</p>
+	</div>
+{:else}
+	<Popover.Root bind:open>
+		<Popover.Trigger
+			role="combobox"
+			aria-expanded={open}
+			class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 text-sm shadow-xs"
+		>
+			<span class="truncate">{selectedLabel}</span>
+			<ChevronsUpDownIcon class="ml-2 h-4 w-4 opacity-50" />
+		</Popover.Trigger>
+		<Popover.Content class="p-0">
+			<Command.Root>
+				<Command.Input placeholder="Search models..." />
+				<Command.List>
+					{#if status === 'loading'}
+						<Command.Loading>Loading models...</Command.Loading>
+					{:else}
+						<Command.Empty>No models found.</Command.Empty>
+						{#if showAuto}
+							<Command.Group>
+								<Command.GroupHeading>Auto</Command.GroupHeading>
+								<Command.GroupItems>
+									<Command.Item value="auto" onSelect={() => handleSelect('auto')}>
+										<CheckIcon
+											class={cn('h-4 w-4', value === 'auto' ? 'opacity-100' : 'opacity-0')}
+										/>
+										Auto (free models)
+									</Command.Item>
+								</Command.GroupItems>
+							</Command.Group>
+						{/if}
+						{#if freeModels.length}
+							<Command.Group>
+								<Command.GroupHeading>Free models</Command.GroupHeading>
+								<Command.GroupItems>
+									{#each freeModels as model (model)}
+										<Command.Item value={model} onSelect={() => handleSelect(model)}>
+											<CheckIcon
+												class={cn('h-4 w-4', value === model ? 'opacity-100' : 'opacity-0')}
+											/>
+											<span class="truncate">{model}</span>
+										</Command.Item>
+									{/each}
+								</Command.GroupItems>
+							</Command.Group>
+						{/if}
+						{#if paidModels.length}
+							<Command.Group>
+								<Command.GroupHeading>All models</Command.GroupHeading>
+								<Command.GroupItems>
+									{#each paidModels as model (model)}
+										<Command.Item value={model} onSelect={() => handleSelect(model)}>
+											<CheckIcon
+												class={cn('h-4 w-4', value === model ? 'opacity-100' : 'opacity-0')}
+											/>
+											<span class="truncate">{model}</span>
+										</Command.Item>
+									{/each}
+								</Command.GroupItems>
+							</Command.Group>
+						{/if}
+					{/if}
+				</Command.List>
+			</Command.Root>
+		</Popover.Content>
+	</Popover.Root>
+{/if}
diff --git a/src/lib/components/chat/ProviderCombobox.svelte b/src/lib/components/chat/ProviderCombobox.svelte
new file mode 100644
index 0000000..5ad1562
--- /dev/null
+++ b/src/lib/components/chat/ProviderCombobox.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import * as Popover from '$lib/components/ui/popover/index.js';
+	import * as Command from '$lib/components/ui/command/index.js';
+	import { PROVIDER_PRESETS, type ProviderPreset } from '$lib/types/chat-types';
+	import { cn } from '$lib/utils.js';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		value = $bindable(PROVIDER_PRESETS[0]?.key ?? 'openrouter'),
+		onSelect
+	}: {
+		value?: string;
+		onSelect?: (preset: ProviderPreset) => void;
+	} = $props();
+
+	let open = $state(false);
+
+	const selectedPreset = $derived(PROVIDER_PRESETS.find((preset) => preset.key === value));
+
+	const handleSelect = (preset: ProviderPreset) => {
+		value = preset.key;
+		onSelect?.(preset);
+		open = false;
+	};
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger
+		role="combobox"
+		aria-expanded={open}
+		class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 text-sm shadow-xs"
+	>
+		<span class="truncate">{selectedPreset?.label ?? 'Select provider'}</span>
+		<ChevronsUpDownIcon class="ml-2 h-4 w-4 opacity-50" />
+	</Popover.Trigger>
+	<Popover.Content class="p-0">
+		<Command.Root>
+			<Command.Input placeholder="Search providers..." />
+			<Command.List>
+				<Command.Empty>No providers found.</Command.Empty>
+				<Command.Group>
+					<Command.GroupItems>
+						{#each PROVIDER_PRESETS as preset (preset.key)}
+							<Command.Item value={preset.key} onSelect={() => handleSelect(preset)}>
+								<CheckIcon
+									class={cn('h-4 w-4', value === preset.key ? 'opacity-100' : 'opacity-0')}
+								/>
+								<div class="flex flex-col">
+									<span>{preset.label}</span>
+									<span class="text-xs text-muted-foreground">
+										{preset.baseURL || 'Custom base URL'}
+									</span>
+								</div>
+							</Command.Item>
+						{/each}
+					</Command.GroupItems>
+				</Command.Group>
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>
diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
index 32d0f71..65dbdd3 100644
--- a/src/lib/components/header.svelte
+++ b/src/lib/components/header.svelte
@@ -11,6 +11,7 @@
 	import * as Sheet from './ui/sheet/index.js';
 
 	const homeHref = $derived<`/`>('/');
+	const chatHref = $derived<`/chat`>('/chat');
 	const serversHref = $derived<`/servers`>('/servers');
 	const blogHref = $derived<`/blog`>('/blog');
 	const slidesHref = $derived<`/slides`>('/slides');
@@ -47,6 +48,14 @@
 		<div class="hidden items-center space-x-4 sm:flex sm:space-x-6">
 			<!-- Navigation Links -->
 			<nav class="flex items-center space-x-4 text-sm font-medium sm:space-x-6">
+				<a
+					href={resolve(chatHref)}
+					class="transition-colors {$page.url.pathname.startsWith(resolve(chatHref))
+						? 'font-semibold text-primary'
+						: 'text-foreground/60 hover:text-primary'}"
+				>
+					Chat
+				</a>
 				<a
 					href={resolve(serversHref)}
 					class="transition-colors {$page.url.pathname.startsWith(resolve(serversHref))
@@ -132,6 +141,17 @@
 				<Sheet.Content side="right" class="w-[300px] p-6 sm:w-[400px]">
 					<div class="py-4">
 						<nav class="flex flex-col space-y-1">
+							<a
+								href={resolve(chatHref)}
+								onclick={() => (isMenuOpen = false)}
+								class="rounded-md px-4 py-3 text-base font-medium transition-colors {$page.url.pathname.startsWith(
+									resolve(chatHref)
+								)
+									? 'bg-primary/10 text-primary'
+									: 'text-foreground/80 hover:bg-accent hover:text-foreground'}"
+							>
+								Chat
+							</a>
 							<a
 								href={resolve(serversHref)}
 								onclick={() => (isMenuOpen = false)}
diff --git a/src/lib/components/ui/command/command-empty.svelte b/src/lib/components/ui/command/command-empty.svelte
new file mode 100644
index 0000000..ea4105c
--- /dev/null
+++ b/src/lib/components/ui/command/command-empty.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.EmptyProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn('py-6 text-center text-sm text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.Empty>
diff --git a/src/lib/components/ui/command/command-group-heading.svelte b/src/lib/components/ui/command/command-group-heading.svelte
new file mode 100644
index 0000000..d050646
--- /dev/null
+++ b/src/lib/components/ui/command/command-group-heading.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.GroupHeadingProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.GroupHeading
+	bind:ref
+	data-slot="command-group-heading"
+	class={cn('px-2 pt-2 text-xs font-semibold text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.GroupHeading>
diff --git a/src/lib/components/ui/command/command-group-items.svelte b/src/lib/components/ui/command/command-group-items.svelte
new file mode 100644
index 0000000..d29e1a4
--- /dev/null
+++ b/src/lib/components/ui/command/command-group-items.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.GroupItemsProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.GroupItems
+	bind:ref
+	data-slot="command-group-items"
+	class={cn('space-y-1', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.GroupItems>
diff --git a/src/lib/components/ui/command/command-group.svelte b/src/lib/components/ui/command/command-group.svelte
new file mode 100644
index 0000000..62f2065
--- /dev/null
+++ b/src/lib/components/ui/command/command-group.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.GroupProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn('py-1', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.Group>
diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte
new file mode 100644
index 0000000..64ff445
--- /dev/null
+++ b/src/lib/components/ui/command/command-input.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.InputProps> = $props();
+</script>
+
+<CommandPrimitive.Input
+	bind:ref
+	data-slot="command-input"
+	class={cn(
+		'h-10 w-full border-b border-border bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground focus:outline-none',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-item.svelte b/src/lib/components/ui/command/command-item.svelte
new file mode 100644
index 0000000..2779372
--- /dev/null
+++ b/src/lib/components/ui/command/command-item.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.ItemProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		'flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-muted data-[selected]:text-foreground',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.Item>
diff --git a/src/lib/components/ui/command/command-list.svelte b/src/lib/components/ui/command/command-list.svelte
new file mode 100644
index 0000000..44f855c
--- /dev/null
+++ b/src/lib/components/ui/command/command-list.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.ListProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn('max-h-72 overflow-hidden', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.List>
diff --git a/src/lib/components/ui/command/command-loading.svelte b/src/lib/components/ui/command/command-loading.svelte
new file mode 100644
index 0000000..9337b98
--- /dev/null
+++ b/src/lib/components/ui/command/command-loading.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.LoadingProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.Loading
+	bind:ref
+	data-slot="command-loading"
+	class={cn('py-6 text-center text-sm text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.Loading>
diff --git a/src/lib/components/ui/command/command-separator.svelte b/src/lib/components/ui/command/command-separator.svelte
new file mode 100644
index 0000000..31e3e1f
--- /dev/null
+++ b/src/lib/components/ui/command/command-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.SeparatorProps> = $props();
+</script>
+
+<CommandPrimitive.Separator
+	bind:ref
+	data-slot="command-separator"
+	class={cn('my-1 h-px bg-border', className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/command/command-viewport.svelte b/src/lib/components/ui/command/command-viewport.svelte
new file mode 100644
index 0000000..cb5050e
--- /dev/null
+++ b/src/lib/components/ui/command/command-viewport.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.ViewportProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.Viewport
+	bind:ref
+	data-slot="command-viewport"
+	class={cn('max-h-72 overflow-y-auto p-1', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.Viewport>
diff --git a/src/lib/components/ui/command/command.svelte b/src/lib/components/ui/command/command.svelte
new file mode 100644
index 0000000..1da85b9
--- /dev/null
+++ b/src/lib/components/ui/command/command.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<CommandPrimitive.Root
+	bind:ref
+	data-slot="command"
+	class={cn(
+		'flex h-full w-full flex-col overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</CommandPrimitive.Root>
diff --git a/src/lib/components/ui/command/index.ts b/src/lib/components/ui/command/index.ts
new file mode 100644
index 0000000..aaa0162
--- /dev/null
+++ b/src/lib/components/ui/command/index.ts
@@ -0,0 +1,37 @@
+import Root from './command.svelte';
+import Input from './command-input.svelte';
+import List from './command-list.svelte';
+import Viewport from './command-viewport.svelte';
+import Empty from './command-empty.svelte';
+import Loading from './command-loading.svelte';
+import Group from './command-group.svelte';
+import GroupHeading from './command-group-heading.svelte';
+import GroupItems from './command-group-items.svelte';
+import Item from './command-item.svelte';
+import Separator from './command-separator.svelte';
+
+export {
+	Root,
+	Input,
+	List,
+	Viewport,
+	Empty,
+	Loading,
+	Group,
+	GroupHeading,
+	GroupItems,
+	Item,
+	Separator,
+	//
+	Root as Command,
+	Input as CommandInput,
+	List as CommandList,
+	Viewport as CommandViewport,
+	Empty as CommandEmpty,
+	Loading as CommandLoading,
+	Group as CommandGroup,
+	GroupHeading as CommandGroupHeading,
+	GroupItems as CommandGroupItems,
+	Item as CommandItem,
+	Separator as CommandSeparator
+};
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..285e430
--- /dev/null
+++ b/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,18 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Trigger from './popover-trigger.svelte';
+import Content from './popover-content.svelte';
+
+const Root = PopoverPrimitive.Root;
+const Portal = PopoverPrimitive.Portal;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Portal,
+	//
+	Root as Popover,
+	Trigger as PopoverTrigger,
+	Content as PopoverContent,
+	Portal as PopoverPortal
+};
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..960af94
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<PopoverPrimitive.ContentProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		class={cn(
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-[--bits-popover-anchor-width] rounded-lg border border-border bg-popover p-2 text-popover-foreground shadow-lg outline-none',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</PopoverPrimitive.Content>
+</PopoverPrimitive.Portal>
diff --git a/src/lib/components/ui/popover/popover-trigger.svelte b/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000..9f4cffd
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<PopoverPrimitive.TriggerProps> & {
+		children: Snippet;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Trigger bind:ref data-slot="popover-trigger" class={cn(className)} {...restProps}>
+	{@render children?.()}
+</PopoverPrimitive.Trigger>
diff --git a/src/lib/components/ui/scroll-area/index.ts b/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..aa6145c
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,7 @@
+import Root from './scroll-area.svelte';
+
+export {
+	Root,
+	//
+	Root as ScrollArea
+};
diff --git a/src/lib/components/ui/scroll-area/scroll-area.svelte b/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000..185e3f3
--- /dev/null
+++ b/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="scroll-area"
+	class={cn('relative h-full w-full', className)}
+	{...restProps}
+>
+	<div class="h-full w-full overflow-auto">{@render children?.()}</div>
+</div>
diff --git a/src/lib/components/ui/sidebar/constants.ts b/src/lib/components/ui/sidebar/constants.ts
new file mode 100644
index 0000000..8b5dc8e
--- /dev/null
+++ b/src/lib/components/ui/sidebar/constants.ts
@@ -0,0 +1,3 @@
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
diff --git a/src/lib/components/ui/sidebar/context.ts b/src/lib/components/ui/sidebar/context.ts
new file mode 100644
index 0000000..89a581d
--- /dev/null
+++ b/src/lib/components/ui/sidebar/context.ts
@@ -0,0 +1,25 @@
+import { getContext } from 'svelte';
+
+export type SidebarState = 'expanded' | 'collapsed';
+
+export interface SidebarContext {
+	open: boolean;
+	openMobile: boolean;
+	state: SidebarState;
+	isMobile: boolean;
+	setOpen: (open: boolean) => void;
+	setOpenMobile: (open: boolean) => void;
+	toggle: () => void;
+}
+
+export const SIDEBAR_CONTEXT = Symbol('sidebar-context');
+
+export function useSidebar(): SidebarContext {
+	const context = getContext<SidebarContext>(SIDEBAR_CONTEXT);
+
+	if (!context) {
+		throw new Error('Sidebar context not found');
+	}
+
+	return context;
+}
diff --git a/src/lib/components/ui/sidebar/index.ts b/src/lib/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..5499be2
--- /dev/null
+++ b/src/lib/components/ui/sidebar/index.ts
@@ -0,0 +1,49 @@
+import Provider from './sidebar-provider.svelte';
+import Root from './sidebar-root.svelte';
+import Header from './sidebar-header.svelte';
+import Footer from './sidebar-footer.svelte';
+import Content from './sidebar-content.svelte';
+import Group from './sidebar-group.svelte';
+import GroupLabel from './sidebar-group-label.svelte';
+import GroupContent from './sidebar-group-content.svelte';
+import Menu from './sidebar-menu.svelte';
+import MenuItem from './sidebar-menu-item.svelte';
+import MenuButton from './sidebar-menu-button.svelte';
+import Trigger from './sidebar-trigger.svelte';
+import Rail from './sidebar-rail.svelte';
+import { useSidebar } from './context';
+import { SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_MOBILE } from './constants';
+
+export {
+	Provider,
+	Root,
+	Header,
+	Footer,
+	Content,
+	Group,
+	GroupLabel,
+	GroupContent,
+	Menu,
+	MenuItem,
+	MenuButton,
+	Trigger,
+	Rail,
+	useSidebar,
+	SIDEBAR_KEYBOARD_SHORTCUT,
+	SIDEBAR_WIDTH,
+	SIDEBAR_WIDTH_MOBILE,
+	//
+	Provider as SidebarProvider,
+	Root as Sidebar,
+	Header as SidebarHeader,
+	Footer as SidebarFooter,
+	Content as SidebarContent,
+	Group as SidebarGroup,
+	GroupLabel as SidebarGroupLabel,
+	GroupContent as SidebarGroupContent,
+	Menu as SidebarMenu,
+	MenuItem as SidebarMenuItem,
+	MenuButton as SidebarMenuButton,
+	Trigger as SidebarTrigger,
+	Rail as SidebarRail
+};
diff --git a/src/lib/components/ui/sidebar/sidebar-content.svelte b/src/lib/components/ui/sidebar/sidebar-content.svelte
new file mode 100644
index 0000000..c45b828
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-content"
+	class={cn('flex-1 overflow-auto px-3 py-2', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-footer.svelte b/src/lib/components/ui/sidebar/sidebar-footer.svelte
new file mode 100644
index 0000000..f52ceb3
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	class={cn(
+		'mt-auto border-t border-sidebar-border bg-[var(--sidebar)]/95 px-3 py-3 backdrop-blur',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/src/lib/components/ui/sidebar/sidebar-group-content.svelte
new file mode 100644
index 0000000..25d3f69
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	class={cn('space-y-1', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/src/lib/components/ui/sidebar/sidebar-group-label.svelte
new file mode 100644
index 0000000..53a4750
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-label"
+	class={cn(
+		'flex items-center gap-2 px-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-group.svelte b/src/lib/components/ui/sidebar/sidebar-group.svelte
new file mode 100644
index 0000000..eaeddc0
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="sidebar-group" class={cn('space-y-2', className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-header.svelte b/src/lib/components/ui/sidebar/sidebar-header.svelte
new file mode 100644
index 0000000..ea962f5
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-header"
+	class={cn(
+		'sticky top-0 z-10 flex flex-col gap-2 border-b border-sidebar-border bg-[var(--sidebar)]/95 px-3 py-3 backdrop-blur',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
new file mode 100644
index 0000000..4bb594b
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	type MenuButtonProps = WithElementRef<HTMLButtonAttributes> & {
+		isActive?: boolean;
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		isActive = false,
+		children,
+		...restProps
+	}: MenuButtonProps = $props();
+</script>
+
+<button
+	bind:this={ref}
+	data-slot="sidebar-menu-button"
+	data-active={isActive}
+	class={cn(
+		'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-sidebar-ring/40 focus-visible:outline-none',
+		isActive
+			? 'bg-sidebar-accent text-sidebar-accent-foreground'
+			: 'text-sidebar-foreground/80 hover:bg-sidebar-accent/80 hover:text-sidebar-accent-foreground',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
new file mode 100644
index 0000000..9dd9f52
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="sidebar-menu-item" class={cn('relative', className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu.svelte b/src/lib/components/ui/sidebar/sidebar-menu.svelte
new file mode 100644
index 0000000..5e5f74e
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu"
+	class={cn('flex flex-col gap-1', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-provider.svelte b/src/lib/components/ui/sidebar/sidebar-provider.svelte
new file mode 100644
index 0000000..d0cf950
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { onMount, setContext } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { SIDEBAR_CONTEXT, type SidebarContext } from './context';
+	import { SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_MOBILE } from './constants';
+
+	let {
+		open = $bindable(true),
+		onOpenChange,
+		class: className,
+		style: styleOverride,
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	} = $props();
+
+	let openMobile = $state(false);
+	let isMobile = $state(false);
+
+	const setOpen = (value: boolean) => {
+		if (open === value) {
+			return;
+		}
+
+		open = value;
+		onOpenChange?.(value);
+	};
+
+	const setOpenMobile = (value: boolean) => {
+		openMobile = value;
+	};
+
+	const sidebar: SidebarContext = {
+		get open() {
+			return open;
+		},
+		get openMobile() {
+			return openMobile;
+		},
+		get state() {
+			return open ? 'expanded' : 'collapsed';
+		},
+		get isMobile() {
+			return isMobile;
+		},
+		setOpen,
+		setOpenMobile,
+		toggle: () => {
+			if (isMobile) {
+				openMobile = !openMobile;
+				return;
+			}
+
+			setOpen(!open);
+		}
+	};
+
+	setContext(SIDEBAR_CONTEXT, sidebar);
+
+	const baseStyle = `--sidebar-width: ${SIDEBAR_WIDTH}; --sidebar-width-mobile: ${SIDEBAR_WIDTH_MOBILE};`;
+	const styleValue = $derived(styleOverride ? `${baseStyle} ${styleOverride}` : baseStyle);
+
+	onMount(() => {
+		if (!browser) {
+			return;
+		}
+
+		const media = window.matchMedia('(max-width: 1024px)');
+		const update = () => {
+			isMobile = media.matches;
+			if (!isMobile) {
+				openMobile = false;
+			}
+		};
+
+		update();
+		media.addEventListener('change', update);
+
+		const onKeydown = (event: KeyboardEvent) => {
+			if (!event.metaKey && !event.ctrlKey) {
+				return;
+			}
+
+			if (event.key.toLowerCase() !== SIDEBAR_KEYBOARD_SHORTCUT) {
+				return;
+			}
+
+			event.preventDefault();
+			sidebar.toggle();
+		};
+
+		window.addEventListener('keydown', onKeydown);
+
+		return () => {
+			media.removeEventListener('change', update);
+			window.removeEventListener('keydown', onKeydown);
+		};
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar-provider
+	class={cn('group/sidebar flex min-h-screen w-full', className)}
+	style={styleValue}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-rail.svelte b/src/lib/components/ui/sidebar/sidebar-rail.svelte
new file mode 100644
index 0000000..da95f26
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { useSidebar } from './context';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	data-slot="sidebar-rail"
+	class={cn(
+		'absolute inset-y-0 right-0 hidden w-2 cursor-col-resize bg-transparent transition-colors group-data-[state=collapsed]/sidebar:block hover:bg-sidebar-accent/40',
+		className
+	)}
+	onclick={() => sidebar.toggle()}
+	{...restProps}
+>
+	{@render children?.()}
+</button>
diff --git a/src/lib/components/ui/sidebar/sidebar-root.svelte b/src/lib/components/ui/sidebar/sidebar-root.svelte
new file mode 100644
index 0000000..5dd5d4b
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-root.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { useSidebar } from './context';
+
+	type SidebarSide = 'left' | 'right';
+	type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+	type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+
+	let {
+		ref = $bindable(null),
+		side = 'left',
+		variant = 'sidebar',
+		collapsible = 'offcanvas',
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		side?: SidebarSide;
+		variant?: SidebarVariant;
+		collapsible?: SidebarCollapsible;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+{#if sidebar.isMobile && sidebar.openMobile}
+	<button
+		class="fixed inset-0 z-40 bg-black/50"
+		aria-label="Close sidebar"
+		onclick={() => sidebar.setOpenMobile(false)}
+	></button>
+{/if}
+
+<aside
+	bind:this={ref}
+	data-sidebar
+	data-state={sidebar.state}
+	data-collapsible={collapsible}
+	data-variant={variant}
+	data-side={side}
+	class={cn(
+		'group/sidebar z-50 flex flex-col bg-[var(--sidebar)] text-[var(--sidebar-foreground)] transition-[width,transform] duration-200 ease-out',
+		side === 'left' ? 'border-r border-sidebar-border' : 'border-l border-sidebar-border',
+		side === 'left' ? 'left-0' : 'right-0',
+		sidebar.isMobile ? 'fixed inset-y-0' : 'sticky top-0 h-screen',
+		sidebar.isMobile
+			? sidebar.openMobile
+				? 'translate-x-0 shadow-2xl'
+				: side === 'left'
+					? '-translate-x-full'
+					: 'translate-x-full'
+			: 'translate-x-0',
+		sidebar.isMobile
+			? 'w-[var(--sidebar-width-mobile)]'
+			: collapsible === 'icon' && sidebar.state === 'collapsed'
+				? 'w-14'
+				: 'w-[var(--sidebar-width)]',
+		variant === 'floating' ? 'm-3 rounded-xl border border-sidebar-border shadow-lg' : '',
+		variant === 'inset' ? 'm-3 rounded-xl border border-sidebar-border' : '',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</aside>
diff --git a/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
new file mode 100644
index 0000000..428c77a
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import { useSidebar } from './context';
+
+	type TriggerProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement>;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		type = 'button',
+		children,
+		...restProps
+	}: TriggerProps = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-slot="sidebar-trigger"
+	class={cn(
+		'inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium text-sidebar-foreground/70 transition-colors outline-none hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring/40 disabled:pointer-events-none disabled:opacity-50',
+		className
+	)}
+	{type}
+	onclick={() => sidebar.toggle()}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PanelLeftIcon class="h-4 w-4" />
+		<span class="sr-only">Toggle sidebar</span>
+	{/if}
+</button>
diff --git a/src/lib/services/auto-mode.ts b/src/lib/services/auto-mode.ts
new file mode 100644
index 0000000..c98b7b5
--- /dev/null
+++ b/src/lib/services/auto-mode.ts
@@ -0,0 +1,94 @@
+import type OpenAI from 'openai';
+
+export const FREE_MODEL_SUFFIX = ':free';
+
+export async function fetchFreeModels(client: OpenAI): Promise<string[]> {
+	const response = await client.models.list();
+	const freeModels = response.data
+		.map((model) => model.id)
+		.filter((id) => id.endsWith(FREE_MODEL_SUFFIX));
+	return [...new Set(freeModels)];
+}
+
+export function isRetryableError(error: unknown): boolean {
+	if (!error || typeof error !== 'object') {
+		return false;
+	}
+
+	const status = (error as { status?: number }).status;
+	if (status && [408, 429, 500, 502, 503, 504].includes(status)) {
+		return true;
+	}
+
+	const code = (error as { code?: string }).code;
+	if (code === 'rate_limit_exceeded') {
+		return true;
+	}
+
+	return false;
+}
+
+export class FreeModelRotator {
+	private readonly client: OpenAI;
+	private readonly cacheMs: number;
+	private models: string[] = [];
+	private currentIndex = 0;
+	private lastFetched = 0;
+	private refreshPromise: Promise<string[]> | null = null;
+
+	constructor(client: OpenAI, cacheMs = 10 * 60 * 1000) {
+		this.client = client;
+		this.cacheMs = cacheMs;
+	}
+
+	public async getModels(force = false): Promise<string[]> {
+		const now = Date.now();
+		const isFresh = now - this.lastFetched < this.cacheMs;
+
+		if (!force && this.models.length > 0 && isFresh) {
+			return this.models;
+		}
+
+		if (this.refreshPromise) {
+			return this.refreshPromise;
+		}
+
+		this.refreshPromise = fetchFreeModels(this.client)
+			.then((models) => {
+				this.models = models;
+				this.lastFetched = Date.now();
+				this.currentIndex = 0;
+				return this.models;
+			})
+			.finally(() => {
+				this.refreshPromise = null;
+			});
+
+		return this.refreshPromise;
+	}
+
+	public async getCurrentModel(): Promise<string | null> {
+		const models = await this.getModels();
+
+		if (models.length === 0) {
+			return null;
+		}
+
+		if (this.currentIndex >= models.length) {
+			this.currentIndex = 0;
+		}
+
+		return models[this.currentIndex] ?? null;
+	}
+
+	public async advanceModel(): Promise<string | null> {
+		const models = await this.getModels();
+
+		if (models.length === 0) {
+			return null;
+		}
+
+		this.currentIndex = (this.currentIndex + 1) % models.length;
+		return models[this.currentIndex] ?? null;
+	}
+}
diff --git a/src/lib/services/conversation-store.svelte.ts b/src/lib/services/conversation-store.svelte.ts
new file mode 100644
index 0000000..53dcff3
--- /dev/null
+++ b/src/lib/services/conversation-store.svelte.ts
@@ -0,0 +1,255 @@
+import { browser } from '$app/environment';
+import type { ChatMessage, Conversation } from '$lib/types/chat-types';
+import { truncateString } from '$lib/utils';
+
+const DB_NAME = 'contextvm-chat';
+const DB_VERSION = 1;
+const STORE_NAME = 'conversations';
+const DEFAULT_TITLE = 'New Chat';
+
+export const conversationStore = $state({
+	conversations: [] as Conversation[],
+	loading: false,
+	error: null as string | null
+});
+
+let dbPromise: Promise<IDBDatabase> | null = null;
+
+function openDatabase(): Promise<IDBDatabase> {
+	if (!browser) {
+		return Promise.reject(new Error('IndexedDB is only available in the browser'));
+	}
+
+	if (dbPromise) {
+		return dbPromise;
+	}
+
+	dbPromise = new Promise((resolve, reject) => {
+		const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+		request.onupgradeneeded = () => {
+			const db = request.result;
+			if (!db.objectStoreNames.contains(STORE_NAME)) {
+				const store = db.createObjectStore(STORE_NAME, { keyPath: 'id' });
+				store.createIndex('updatedAt', 'updatedAt', { unique: false });
+			}
+		};
+
+		request.onerror = () => {
+			dbPromise = null;
+			reject(request.error);
+		};
+
+		request.onsuccess = () => {
+			resolve(request.result);
+		};
+	});
+
+	return dbPromise;
+}
+
+function requestToPromise<T>(request: IDBRequest<T>): Promise<T> {
+	return new Promise((resolve, reject) => {
+		request.onsuccess = () => resolve(request.result);
+		request.onerror = () => reject(request.error);
+	});
+}
+
+function waitForTransaction(transaction: IDBTransaction): Promise<void> {
+	return new Promise((resolve, reject) => {
+		transaction.oncomplete = () => resolve();
+		transaction.onerror = () => reject(transaction.error);
+		transaction.onabort = () => reject(transaction.error);
+	});
+}
+
+function toTimestamp(value: Date | number | string): number {
+	if (value instanceof Date) {
+		return value.getTime();
+	}
+
+	const asNumber = typeof value === 'number' ? value : Date.parse(String(value));
+	return Number.isNaN(asNumber) ? 0 : asNumber;
+}
+
+function deriveTitle(messages: ChatMessage[]): string {
+	const firstUserMessage = messages.find(
+		(message) => message.role === 'user' && message.content.trim().length > 0
+	);
+
+	if (!firstUserMessage) {
+		return DEFAULT_TITLE;
+	}
+
+	return truncateString(firstUserMessage.content.trim(), 64);
+}
+
+function upsertConversationInStore(conversation: Conversation): void {
+	const existing = conversationStore.conversations;
+	const index = existing.findIndex((item) => item.id === conversation.id);
+	const next = [...existing];
+
+	if (index >= 0) {
+		next[index] = conversation;
+	} else {
+		next.unshift(conversation);
+	}
+
+	conversationStore.conversations = next.sort(
+		(a, b) => toTimestamp(b.updatedAt) - toTimestamp(a.updatedAt)
+	);
+}
+
+function removeConversationFromStore(id: string): void {
+	conversationStore.conversations = conversationStore.conversations.filter(
+		(conversation) => conversation.id !== id
+	);
+}
+
+async function saveConversation(conversation: Conversation): Promise<void> {
+	const db = await openDatabase();
+	const transaction = db.transaction(STORE_NAME, 'readwrite');
+	transaction.objectStore(STORE_NAME).put($state.snapshot(conversation));
+	await waitForTransaction(transaction);
+}
+
+async function removeConversation(id: string): Promise<void> {
+	const db = await openDatabase();
+	const transaction = db.transaction(STORE_NAME, 'readwrite');
+	transaction.objectStore(STORE_NAME).delete(id);
+	await waitForTransaction(transaction);
+}
+
+export async function listConversations(): Promise<Conversation[]> {
+	if (!browser) {
+		conversationStore.conversations = [];
+		return [];
+	}
+
+	conversationStore.loading = true;
+
+	try {
+		const db = await openDatabase();
+		const transaction = db.transaction(STORE_NAME, 'readonly');
+		const store = transaction.objectStore(STORE_NAME);
+		const results = await requestToPromise(store.getAll());
+
+		const conversations = [...results].sort(
+			(a, b) => toTimestamp(b.updatedAt) - toTimestamp(a.updatedAt)
+		);
+
+		conversationStore.conversations = conversations;
+		conversationStore.error = null;
+		return conversations;
+	} catch (error) {
+		conversationStore.error =
+			error instanceof Error ? error.message : 'Failed to load conversations';
+		throw error;
+	} finally {
+		conversationStore.loading = false;
+	}
+}
+
+export async function getConversation(id: string): Promise<Conversation | null> {
+	if (!browser) {
+		return null;
+	}
+
+	const db = await openDatabase();
+	const transaction = db.transaction(STORE_NAME, 'readonly');
+	const store = transaction.objectStore(STORE_NAME);
+	const conversation = await requestToPromise(store.get(id));
+	return (conversation as Conversation | undefined) ?? null;
+}
+
+export async function createConversation(): Promise<Conversation> {
+	if (!browser) {
+		throw new Error('IndexedDB is only available in the browser');
+	}
+
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- persisted timestamp, not a live reactive clock
+	const now = new Date();
+	const conversation: Conversation = {
+		id: crypto.randomUUID(),
+		title: DEFAULT_TITLE,
+		messages: [],
+		createdAt: now,
+		updatedAt: now
+	};
+
+	await saveConversation(conversation);
+	upsertConversationInStore(conversation);
+	return conversation;
+}
+
+export async function updateConversation(
+	id: string,
+	messages: ChatMessage[]
+): Promise<Conversation> {
+	if (!browser) {
+		throw new Error('IndexedDB is only available in the browser');
+	}
+
+	const db = await openDatabase();
+	const transaction = db.transaction(STORE_NAME, 'readwrite');
+	const store = transaction.objectStore(STORE_NAME);
+
+	const existing = (await requestToPromise(store.get(id))) as Conversation | undefined;
+	if (!existing) {
+		throw new Error('Conversation not found');
+	}
+
+	const nextTitle =
+		existing.title.trim() === DEFAULT_TITLE || existing.title.trim().length === 0
+			? deriveTitle(messages)
+			: existing.title;
+
+	const updated: Conversation = {
+		...existing,
+		title: nextTitle,
+		messages,
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		updatedAt: new Date()
+	};
+
+	store.put($state.snapshot(updated));
+	await waitForTransaction(transaction);
+	upsertConversationInStore(updated);
+	return updated;
+}
+
+export async function deleteConversation(id: string): Promise<void> {
+	if (!browser) {
+		throw new Error('IndexedDB is only available in the browser');
+	}
+
+	await removeConversation(id);
+	removeConversationFromStore(id);
+}
+
+export async function renameConversation(id: string, title: string): Promise<Conversation> {
+	if (!browser) {
+		throw new Error('IndexedDB is only available in the browser');
+	}
+
+	const db = await openDatabase();
+	const transaction = db.transaction(STORE_NAME, 'readwrite');
+	const store = transaction.objectStore(STORE_NAME);
+
+	const existing = (await requestToPromise(store.get(id))) as Conversation | undefined;
+	if (!existing) {
+		throw new Error('Conversation not found');
+	}
+
+	const updated: Conversation = {
+		...existing,
+		title: title.trim() || DEFAULT_TITLE,
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		updatedAt: new Date()
+	};
+
+	store.put($state.snapshot(updated));
+	await waitForTransaction(transaction);
+	upsertConversationInStore(updated);
+	return updated;
+}
diff --git a/src/lib/services/llm.ts b/src/lib/services/llm.ts
new file mode 100644
index 0000000..a4ac15d
--- /dev/null
+++ b/src/lib/services/llm.ts
@@ -0,0 +1,200 @@
+import OpenAI from 'openai';
+import type { ChatCompletionMessageParam } from 'openai/resources/chat/completions';
+import { isAutoMode, type ChatMessage, type LLMConfig } from '$lib/types/chat-types';
+import { FreeModelRotator, isRetryableError } from '$lib/services/auto-mode';
+
+export interface SendMessageOptions {
+	signal?: AbortSignal;
+	onDelta?: (delta: string) => void;
+	onReset?: (model: string) => void;
+}
+
+export interface SendMessageResult {
+	content: string;
+	model: string;
+}
+
+export { APIError } from 'openai';
+
+export function normalizeBaseURL(baseURL: string): string {
+	let trimmed = baseURL.trim().replace(/\/+$/, '');
+
+	if (!trimmed) {
+		return '';
+	}
+
+	for (const suffix of ['/chat/completions', '/completions']) {
+		if (trimmed.endsWith(suffix)) {
+			trimmed = trimmed.slice(0, -suffix.length);
+		}
+	}
+
+	if (/\/v\d+$/.test(trimmed)) {
+		return trimmed;
+	}
+
+	return `${trimmed}/v1`;
+}
+
+function toOpenAiMessages(messages: ChatMessage[]): ChatCompletionMessageParam[] {
+	return messages.map((message) => ({
+		role: message.role,
+		content: message.content
+	}));
+}
+
+function getDefaultHeaders(baseURL: string): Record<string, string> | undefined {
+	const isOpenRouter = baseURL.includes('openrouter.ai');
+	return isOpenRouter && typeof window !== 'undefined'
+		? {
+				'HTTP-Referer': window.location.origin,
+				'X-Title': 'ContextVM'
+			}
+		: undefined;
+}
+
+export class LLMService {
+	private config: LLMConfig;
+	private client: OpenAI;
+	private autoMode: FreeModelRotator | null = null;
+	private lastUsedModel: string | null = null;
+
+	constructor(config: LLMConfig) {
+		this.config = config;
+		this.client = this.createClient(config);
+		this.autoMode = isAutoMode(config) ? new FreeModelRotator(this.client) : null;
+	}
+
+	public reconfigure(config: LLMConfig): void {
+		this.config = config;
+		this.client = this.createClient(config);
+		this.autoMode = isAutoMode(config) ? new FreeModelRotator(this.client) : null;
+	}
+
+	public getConfig(): LLMConfig {
+		return this.config;
+	}
+
+	public getActiveModel(): string | null {
+		return this.lastUsedModel;
+	}
+
+	public static async fetchModelList(
+		baseURL: string,
+		apiKey: string,
+		signal?: AbortSignal
+	): Promise<string[]> {
+		const normalizedBaseURL = normalizeBaseURL(baseURL);
+		const client = new OpenAI({
+			apiKey,
+			baseURL: normalizedBaseURL,
+			defaultHeaders: getDefaultHeaders(normalizedBaseURL),
+			dangerouslyAllowBrowser: true
+		});
+
+		const response = await client.models.list(signal ? { signal } : undefined);
+		return response.data.map((model) => model.id);
+	}
+
+	public async fetchModels(signal?: AbortSignal): Promise<string[]> {
+		const response = await this.client.models.list(signal ? { signal } : undefined);
+		return response.data.map((model) => model.id);
+	}
+
+	public async testConnection(): Promise<void> {
+		await this.client.models.list();
+	}
+
+	public async sendMessage(
+		messages: ChatMessage[],
+		options: SendMessageOptions = {}
+	): Promise<SendMessageResult> {
+		const { onDelta, onReset, signal } = options;
+
+		if (!this.autoMode || this.config.model !== 'auto') {
+			if (!this.config.model.trim()) {
+				throw new Error('Select a model before sending a message.');
+			}
+
+			return this.streamChat(this.config.model, messages, onDelta, signal);
+		}
+
+		const models = await this.autoMode.getModels();
+		if (models.length === 0) {
+			throw new Error('No free models available');
+		}
+
+		let model = await this.autoMode.getCurrentModel();
+		let lastError: unknown;
+		const maxAttempts = models.length;
+
+		for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+			if (!model) {
+				break;
+			}
+
+			if (attempt > 0) {
+				onReset?.(model);
+			}
+
+			try {
+				return await this.streamChat(model, messages, onDelta, signal);
+			} catch (error) {
+				lastError = error;
+
+				if (!isRetryableError(error)) {
+					throw error;
+				}
+
+				model = await this.autoMode.advanceModel();
+			}
+		}
+
+		throw lastError instanceof Error
+			? lastError
+			: new Error('Failed to send message with free models');
+	}
+
+	private createClient(config: LLMConfig): OpenAI {
+		const baseURL = normalizeBaseURL(config.baseURL);
+
+		return new OpenAI({
+			apiKey: config.apiKey,
+			baseURL,
+			defaultHeaders: getDefaultHeaders(baseURL),
+			dangerouslyAllowBrowser: true
+		});
+	}
+
+	private async streamChat(
+		model: string,
+		messages: ChatMessage[],
+		onDelta: ((delta: string) => void) | undefined,
+		signal: AbortSignal | undefined
+	): Promise<SendMessageResult> {
+		const stream = await this.client.chat.completions.create(
+			{
+				model,
+				messages: toOpenAiMessages(messages),
+				stream: true
+			},
+			{
+				signal
+			}
+		);
+
+		let content = '';
+
+		for await (const chunk of stream) {
+			const delta = chunk.choices[0]?.delta?.content ?? '';
+
+			if (delta) {
+				content += delta;
+				onDelta?.(delta);
+			}
+		}
+
+		this.lastUsedModel = model;
+		return { content, model };
+	}
+}
diff --git a/src/lib/types/chat-types.ts b/src/lib/types/chat-types.ts
new file mode 100644
index 0000000..18d2979
--- /dev/null
+++ b/src/lib/types/chat-types.ts
@@ -0,0 +1,89 @@
+export interface ChatMessage {
+	id: string;
+	content: string;
+	role: 'user' | 'assistant' | 'system';
+	timestamp: Date;
+}
+
+export interface Conversation {
+	id: string;
+	title: string;
+	messages: ChatMessage[];
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+export interface LLMConfig {
+	provider: string;
+	baseURL: string;
+	apiKey: string;
+	model: string;
+}
+
+export interface ProviderPreset {
+	key: string;
+	label: string;
+	baseURL: string;
+	requiresKey: boolean;
+}
+
+export const PROVIDER_PRESETS: ProviderPreset[] = [
+	{
+		key: 'openrouter',
+		label: 'OpenRouter',
+		baseURL: 'https://openrouter.ai/api/v1',
+		requiresKey: false
+	},
+	{
+		key: 'openai',
+		label: 'OpenAI',
+		baseURL: 'https://api.openai.com/v1',
+		requiresKey: true
+	},
+	{
+		key: 'ollama',
+		label: 'Ollama',
+		baseURL: 'http://localhost:11434/v1',
+		requiresKey: false
+	},
+	{
+		key: 'lmstudio',
+		label: 'LM Studio',
+		baseURL: 'http://localhost:1234/v1',
+		requiresKey: false
+	},
+	{
+		key: 'custom',
+		label: 'Custom',
+		baseURL: '',
+		requiresKey: false
+	}
+];
+
+const ENV_OPENROUTER_KEY = (import.meta.env.PUBLIC_OPENROUTER_KEY ?? '').trim();
+
+export const DEFAULT_OPENROUTER_KEY =
+	ENV_OPENROUTER_KEY ||
+	(typeof window !== 'undefined'
+		? atob(
+				'c2stb3ItdjEtY2Y5ZWE3MjJiY2FmZThiMTAyMDRiYTBhMTVkODBiZGZmMjE5ZTM2NDQ1MDRjZjAxZGY0YjBmYjM3MGRjNGUyYg=='
+			)
+		: '');
+
+export const DEFAULT_LLM_CONFIG: LLMConfig = {
+	provider: 'openrouter',
+	baseURL: 'https://openrouter.ai/api/v1',
+	apiKey: DEFAULT_OPENROUTER_KEY,
+	model: 'auto'
+};
+
+export function isAutoMode(config: LLMConfig): boolean {
+	return config.model === 'auto' && config.baseURL.toLowerCase().includes('openrouter.ai');
+}
+
+export function isUsingDefaultKey(config: LLMConfig): boolean {
+	return (
+		config.baseURL.toLowerCase().includes('openrouter.ai') &&
+		config.apiKey === DEFAULT_OPENROUTER_KEY
+	);
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 82ca3a8..2afe562 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -38,6 +38,34 @@ export function formatUnixTimestamp(
 	return date.toLocaleString(locale, options);
 }
 
+export function formatRelativeTime(value: Date | string): string {
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) {
+		return '';
+	}
+
+	const deltaSeconds = Math.floor((Date.now() - date.getTime()) / 1000);
+	if (deltaSeconds < 20) {
+		return 'just now';
+	}
+	if (deltaSeconds < 60) {
+		return `${deltaSeconds}s ago`;
+	}
+
+	const deltaMinutes = Math.floor(deltaSeconds / 60);
+	if (deltaMinutes < 60) {
+		return `${deltaMinutes}m ago`;
+	}
+
+	const deltaHours = Math.floor(deltaMinutes / 60);
+	if (deltaHours < 24) {
+		return `${deltaHours}h ago`;
+	}
+
+	const deltaDays = Math.floor(deltaHours / 24);
+	return `${deltaDays}d ago`;
+}
+
 // Server capability utilities
 export function hasCapability(server: InitializeResult, capability: string): boolean {
 	return capability in server.capabilities;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a6f0245..be5e72d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Header from '$lib/components/header.svelte';
 	import Footer from '$lib/components/footer.svelte';
+	import { page } from '$app/stores';
 	import { ModeWatcher } from 'mode-watcher';
 	import '../app.css';
 	import { setThemeContext } from '@sjsf/shadcn4-theme';
@@ -24,8 +25,14 @@
 	<Header />
 	<RelayWidget />
 	<Toaster />
-	<div class="min-h-screen pt-14">
+	<div
+		class={$page.url.pathname.startsWith('/chat')
+			? 'min-h-[calc(100dvh-3.5rem)] pt-14'
+			: 'min-h-screen pt-14'}
+	>
 		{@render children()}
 	</div>
-	<Footer />
+	{#if !$page.url.pathname.startsWith('/chat')}
+		<Footer />
+	{/if}
 </QueryClientProvider>
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
new file mode 100644
index 0000000..e786536
--- /dev/null
+++ b/src/routes/chat/+page.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import ChatSidebar from '$lib/components/chat/ChatSidebar.svelte';
+	import Chat from '$lib/components/chat/Chat.svelte';
+	import LLMConfig from '$lib/components/chat/LLMConfig.svelte';
+	import { createConversation, listConversations } from '$lib/services/conversation-store.svelte';
+	import SEO from '$lib/components/SEO.svelte';
+	import {
+		DEFAULT_LLM_CONFIG,
+		PROVIDER_PRESETS,
+		isUsingDefaultKey,
+		type LLMConfig as ChatLLMConfig
+	} from '$lib/types/chat-types';
+
+	let activeConversationId = $state<string | null>(null);
+	let config = $state<ChatLLMConfig>({ ...DEFAULT_LLM_CONFIG });
+	let lastUsedModel = $state('');
+	const selectedProvider = $derived(
+		PROVIDER_PRESETS.find((preset) => preset.key === config.provider) ?? PROVIDER_PRESETS[0]
+	);
+	const modelLabel = $derived(
+		config.model === 'auto' ? 'Auto free models' : config.model || 'No model'
+	);
+	const usingDefaultKey = $derived(isUsingDefaultKey(config));
+	const keyLabel = $derived(usingDefaultKey ? 'Default key' : 'Custom key');
+
+	onMount(async () => {
+		try {
+			const conversations = await listConversations();
+			if (conversations.length) {
+				activeConversationId = conversations[0].id;
+				return;
+			}
+
+			const conversation = await createConversation();
+			activeConversationId = conversation.id;
+		} catch (error) {
+			console.error('Failed to initialize chat:', error);
+		}
+	});
+</script>
+
+<SEO
+	title="Chat"
+	description="Try ContextVM with an LLM chat. Zero config with free models or bring your own API key."
+	url="https://contextvm.com/chat"
+/>
+
+<Sidebar.Provider class="h-[calc(100dvh-3.5rem)] min-h-0 overflow-hidden">
+	<ChatSidebar bind:activeId={activeConversationId} />
+	<main
+		class="relative flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-gradient-to-br from-background via-muted/30 to-background"
+	>
+		<div
+			class="flex items-center justify-between border-b border-border bg-background/80 px-4 py-3 backdrop-blur"
+		>
+			<div class="flex items-center gap-2">
+				<Sidebar.Trigger class="lg:hidden" />
+				<div class="flex flex-col">
+					<span class="text-sm font-semibold">Chat</span>
+					<span class="text-xs text-muted-foreground">Context-aware LLM workspace</span>
+				</div>
+			</div>
+			<div class="flex min-w-0 items-center gap-2">
+				<div class="hidden min-w-0 items-center gap-2 md:flex">
+					<span
+						class="rounded-md border border-border bg-background/70 px-2 py-1 text-xs text-muted-foreground"
+					>
+						{selectedProvider?.label ?? config.provider}
+					</span>
+					<span
+						class="max-w-[14rem] truncate rounded-md border border-border bg-background/70 px-2 py-1 text-xs text-muted-foreground"
+					>
+						{modelLabel}
+					</span>
+					{#if lastUsedModel}
+						<span
+							class="max-w-[14rem] truncate rounded-md border border-primary/20 bg-primary/10 px-2 py-1 text-xs text-primary"
+						>
+							Last used: {lastUsedModel}
+						</span>
+					{/if}
+					<span
+						class="rounded-md border border-border bg-background/70 px-2 py-1 text-xs"
+						class:text-primary={usingDefaultKey}
+						class:text-muted-foreground={!usingDefaultKey}
+					>
+						{keyLabel}
+					</span>
+				</div>
+				<LLMConfig bind:config />
+			</div>
+		</div>
+		<div class="min-h-0 flex-1 overflow-hidden">
+			<Chat bind:conversationId={activeConversationId} bind:lastUsedModel {config} />
+		</div>
+	</main>
+</Sidebar.Provider>
diff --git a/src/routes/chat/+page.ts b/src/routes/chat/+page.ts
new file mode 100644
index 0000000..d43d0cd
--- /dev/null
+++ b/src/routes/chat/+page.ts
@@ -0,0 +1 @@
+export const prerender = false;