diff --git a/apps/mana/apps/web/src/lib/modules/playground/ListView.svelte b/apps/mana/apps/web/src/lib/modules/playground/ListView.svelte
index febadb8b9..1560a6f3c 100644
--- a/apps/mana/apps/web/src/lib/modules/playground/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/playground/ListView.svelte
@@ -58,13 +58,14 @@
 		isLoading = true;
 		abortController = new AbortController();
 		try {
-			for await (const delta of streamCompletion({
+			for await (const chunk of streamCompletion({
 				model: selectedModel,
 				messages: wire,
 				signal: abortController.signal,
 			})) {
+				if (chunk.type !== 'delta') continue;
 				const next = [...messages];
-				next[idx] = { ...next[idx], content: next[idx].content + delta };
+				next[idx] = { ...next[idx], content: next[idx].content + chunk.content };
 				messages = next;
 			}
 		} catch (err) {
diff --git a/apps/mana/apps/web/src/lib/modules/playground/collections.ts b/apps/mana/apps/web/src/lib/modules/playground/collections.ts
index e0af6640c..dcffef604 100644
--- a/apps/mana/apps/web/src/lib/modules/playground/collections.ts
+++ b/apps/mana/apps/web/src/lib/modules/playground/collections.ts
@@ -1,12 +1,17 @@
 /**
  * Playground module — collection accessors.
  *
- * Only one table: snippets (saved system prompts). The chat history
- * itself is intentionally NOT persisted — playground is for one-off
- * exploration; chat module owns the persisted-conversation surface.
+ * Three tables: snippets (saved system prompts), conversations, and messages.
  */
 
 import { db } from '$lib/data/database';
-import type { LocalPlaygroundSnippet } from './types';
+import type {
+	LocalPlaygroundSnippet,
+	LocalPlaygroundConversation,
+	LocalPlaygroundMessage,
+} from './types';
 
 export const playgroundSnippetTable = db.table<LocalPlaygroundSnippet>('playgroundSnippets');
+export const playgroundConversationTable =
+	db.table<LocalPlaygroundConversation>('playgroundConversations');
+export const playgroundMessageTable = db.table<LocalPlaygroundMessage>('playgroundMessages');
diff --git a/apps/mana/apps/web/src/lib/modules/playground/index.ts b/apps/mana/apps/web/src/lib/modules/playground/index.ts
index b929b37a9..c6a7405dd 100644
--- a/apps/mana/apps/web/src/lib/modules/playground/index.ts
+++ b/apps/mana/apps/web/src/lib/modules/playground/index.ts
@@ -1,8 +1,8 @@
 /**
  * Playground module — barrel exports.
  *
- * Stateless LLM playground for testing prompts against different models.
- * No local-first collections needed (no persistent data model).
+ * LLM playground for testing prompts against different models with
+ * persistent chat history, token tracking, and model comparison.
  */
 
 export const PLAYGROUND_MODELS = [
diff --git a/apps/mana/apps/web/src/lib/modules/playground/llm.ts b/apps/mana/apps/web/src/lib/modules/playground/llm.ts
index 3e1015fb8..a4fd84327 100644
--- a/apps/mana/apps/web/src/lib/modules/playground/llm.ts
+++ b/apps/mana/apps/web/src/lib/modules/playground/llm.ts
@@ -61,16 +61,19 @@ export interface CompletionOptions {
 	signal?: AbortSignal;
 }
 
+/** A chunk yielded during streaming — either a content delta or final usage stats. */
+export type StreamChunk =
+	| { type: 'delta'; content: string }
+	| { type: 'usage'; promptTokens: number; completionTokens: number };
+
 /**
- * Streams a chat completion from mana-llm and yields content deltas as
- * they arrive. The caller concatenates deltas into the visible message —
- * see `routes/(app)/playground/+page.svelte` for the consumer pattern.
+ * Streams a chat completion from mana-llm and yields StreamChunks as
+ * they arrive. Content deltas have `type: 'delta'`, and the final usage
+ * stats (if the provider includes them) have `type: 'usage'`.
  *
  * Errors propagate as thrown exceptions (network failure, non-2xx, abort).
- * The playground page catches them and renders a friendly fallback rather
- * than blanking the conversation.
  */
-export async function* streamCompletion(opts: CompletionOptions): AsyncGenerator<string> {
+export async function* streamCompletion(opts: CompletionOptions): AsyncGenerator<StreamChunk> {
 	const res = await fetch(`${llmUrl()}/v1/chat/completions`, {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
@@ -112,9 +115,19 @@ export async function* streamCompletion(opts: CompletionOptions): AsyncGenerator
 				try {
 					const json = JSON.parse(data) as {
 						choices?: Array<{ delta?: { content?: string } }>;
+						usage?: { prompt_tokens?: number; completion_tokens?: number };
 					};
 					const delta = json.choices?.[0]?.delta?.content;
-					if (delta) yield delta;
+					if (delta) yield { type: 'delta', content: delta };
+
+					// Usage stats — typically in the final chunk
+					if (json.usage?.prompt_tokens != null) {
+						yield {
+							type: 'usage',
+							promptTokens: json.usage.prompt_tokens,
+							completionTokens: json.usage.completion_tokens ?? 0,
+						};
+					}
 				} catch {
 					// Malformed frame — skip silently. mana-llm occasionally
 					// emits keepalive comments and we don't want them to
diff --git a/apps/mana/apps/web/src/lib/modules/playground/module.config.ts b/apps/mana/apps/web/src/lib/modules/playground/module.config.ts
index 53786290d..d38874d5c 100644
--- a/apps/mana/apps/web/src/lib/modules/playground/module.config.ts
+++ b/apps/mana/apps/web/src/lib/modules/playground/module.config.ts
@@ -2,5 +2,9 @@ import type { ModuleConfig } from '$lib/data/module-registry';
 
 export const playgroundModuleConfig: ModuleConfig = {
 	appId: 'playground',
-	tables: [{ name: 'playgroundSnippets', syncName: 'snippets' }],
+	tables: [
+		{ name: 'playgroundSnippets', syncName: 'snippets' },
+		{ name: 'playgroundConversations', syncName: 'conversations' },
+		{ name: 'playgroundMessages', syncName: 'messages' },
+	],
 };
diff --git a/apps/mana/apps/web/src/lib/modules/playground/queries.ts b/apps/mana/apps/web/src/lib/modules/playground/queries.ts
index dd0481c64..d686a762c 100644
--- a/apps/mana/apps/web/src/lib/modules/playground/queries.ts
+++ b/apps/mana/apps/web/src/lib/modules/playground/queries.ts
@@ -9,7 +9,14 @@
 import { useLiveQueryWithDefault } from '@mana/local-store/svelte';
 import { db } from '$lib/data/database';
 import { decryptRecords } from '$lib/data/crypto';
-import type { LocalPlaygroundSnippet, PlaygroundSnippet } from './types';
+import type {
+	LocalPlaygroundSnippet,
+	PlaygroundSnippet,
+	LocalPlaygroundConversation,
+	PlaygroundConversation,
+	LocalPlaygroundMessage,
+	PlaygroundConversationMessage,
+} from './types';
 
 export function toSnippet(local: LocalPlaygroundSnippet): PlaygroundSnippet {
 	return {
@@ -43,3 +50,62 @@ export function useAllSnippets() {
 		return sorted.map(toSnippet);
 	}, [] as PlaygroundSnippet[]);
 }
+
+// ─── Conversations ──────────────────────────────────────
+
+export function toConversation(local: LocalPlaygroundConversation): PlaygroundConversation {
+	return {
+		id: local.id,
+		title: local.title,
+		model: local.model,
+		systemPrompt: local.systemPrompt,
+		temperature: local.temperature,
+		snippetId: local.snippetId,
+		isPinned: local.isPinned ?? false,
+		comparisonModels: local.comparisonModels ?? null,
+		createdAt: local.createdAt ?? new Date().toISOString(),
+		updatedAt: local.updatedAt ?? new Date().toISOString(),
+	};
+}
+
+export function toMessage(local: LocalPlaygroundMessage): PlaygroundConversationMessage {
+	return {
+		id: local.id,
+		conversationId: local.conversationId,
+		role: local.role,
+		content: local.content,
+		model: local.model,
+		promptTokens: local.promptTokens,
+		completionTokens: local.completionTokens,
+		comparisonGroupId: local.comparisonGroupId,
+		order: local.order,
+		createdAt: local.createdAt ?? new Date().toISOString(),
+	};
+}
+
+export function useAllConversations() {
+	return useLiveQueryWithDefault(async () => {
+		const locals = await db.table<LocalPlaygroundConversation>('playgroundConversations').toArray();
+		const visible = locals.filter((c) => !c.deletedAt);
+		const decrypted = await decryptRecords<LocalPlaygroundConversation>(
+			'playgroundConversations',
+			visible
+		);
+		return decrypted.map(toConversation).sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+	}, [] as PlaygroundConversation[]);
+}
+
+export function useConversationMessages(conversationId: () => string | null) {
+	return useLiveQueryWithDefault(async () => {
+		const cid = conversationId();
+		if (!cid) return [];
+		const locals = await db
+			.table<LocalPlaygroundMessage>('playgroundMessages')
+			.where('conversationId')
+			.equals(cid)
+			.sortBy('order');
+		const visible = locals.filter((m) => !m.deletedAt);
+		const decrypted = await decryptRecords<LocalPlaygroundMessage>('playgroundMessages', visible);
+		return decrypted.map(toMessage);
+	}, [] as PlaygroundConversationMessage[]);
+}
diff --git a/apps/mana/apps/web/src/lib/modules/playground/stores/conversations.svelte.ts b/apps/mana/apps/web/src/lib/modules/playground/stores/conversations.svelte.ts
new file mode 100644
index 000000000..445976bfa
--- /dev/null
+++ b/apps/mana/apps/web/src/lib/modules/playground/stores/conversations.svelte.ts
@@ -0,0 +1,89 @@
+/**
+ * Conversations Store — Mutations for playground conversations + messages.
+ *
+ * Reads come from liveQuery hooks in queries.ts.
+ */
+
+import { playgroundConversationTable, playgroundMessageTable } from '../collections';
+import { toConversation, toMessage } from '../queries';
+import type { LocalPlaygroundConversation, LocalPlaygroundMessage } from '../types';
+import { encryptRecord } from '$lib/data/crypto';
+
+export const conversationsStore = {
+	async create(data: {
+		model: string;
+		systemPrompt: string;
+		temperature: number;
+		snippetId?: string;
+		comparisonModels?: string[];
+	}) {
+		const now = new Date().toISOString();
+		const newLocal: LocalPlaygroundConversation = {
+			id: crypto.randomUUID(),
+			title: null,
+			model: data.model,
+			systemPrompt: data.systemPrompt,
+			temperature: data.temperature,
+			snippetId: data.snippetId ?? null,
+			isPinned: false,
+			comparisonModels: data.comparisonModels ?? null,
+			createdAt: now,
+			updatedAt: now,
+		};
+		const snapshot = toConversation(newLocal);
+		await encryptRecord('playgroundConversations', newLocal);
+		await playgroundConversationTable.add(newLocal);
+		return snapshot;
+	},
+
+	async updateTitle(id: string, title: string) {
+		const diff: Partial<LocalPlaygroundConversation> = {
+			title,
+			updatedAt: new Date().toISOString(),
+		};
+		await encryptRecord('playgroundConversations', diff);
+		await playgroundConversationTable.update(id, diff);
+	},
+
+	async touch(id: string) {
+		await playgroundConversationTable.update(id, {
+			updatedAt: new Date().toISOString(),
+		});
+	},
+
+	async remove(id: string) {
+		const now = new Date().toISOString();
+		await playgroundConversationTable.update(id, { deletedAt: now, updatedAt: now });
+	},
+
+	async addMessage(
+		conversationId: string,
+		data: {
+			role: 'user' | 'assistant';
+			content: string;
+			model?: string;
+			promptTokens?: number;
+			completionTokens?: number;
+			comparisonGroupId?: string;
+			order: number;
+		}
+	) {
+		const now = new Date().toISOString();
+		const newLocal: LocalPlaygroundMessage = {
+			id: crypto.randomUUID(),
+			conversationId,
+			role: data.role,
+			content: data.content,
+			model: data.model ?? null,
+			promptTokens: data.promptTokens ?? null,
+			completionTokens: data.completionTokens ?? null,
+			comparisonGroupId: data.comparisonGroupId ?? null,
+			order: data.order,
+			createdAt: now,
+		};
+		const snapshot = toMessage(newLocal);
+		await encryptRecord('playgroundMessages', newLocal);
+		await playgroundMessageTable.add(newLocal);
+		return snapshot;
+	},
+};
diff --git a/apps/mana/apps/web/src/lib/modules/playground/types.ts b/apps/mana/apps/web/src/lib/modules/playground/types.ts
index d4848764d..7b55fe02e 100644
--- a/apps/mana/apps/web/src/lib/modules/playground/types.ts
+++ b/apps/mana/apps/web/src/lib/modules/playground/types.ts
@@ -1,11 +1,11 @@
 /**
  * Playground module types.
  *
- * The playground itself is stateless (no chat history is persisted —
- * that's what the chat module is for), but the user can save reusable
- * **snippets**: a name, a system prompt, and the model + temperature
- * defaults to test it with. Snippets are the only persisted surface in
- * the module.
+ * Two persisted surfaces:
+ *  1. **Snippets** — saved system-prompt templates (name, model, temperature)
+ *  2. **Conversations** + **Messages** — full chat history that survives reload
+ *
+ * Conversations and messages are encrypted at rest (content, title, systemPrompt).
  */
 
 import type { BaseRecord } from '@mana/local-store';
@@ -37,3 +37,57 @@ export interface PlaygroundSnippet {
 	createdAt: string;
 	updatedAt: string;
 }
+
+// ─── Conversations ──────────────────────────────────────
+
+export interface LocalPlaygroundConversation extends BaseRecord {
+	title: string | null;
+	model: string;
+	systemPrompt: string;
+	temperature: number;
+	snippetId: string | null;
+	isPinned?: boolean;
+	/** When non-null, the conversation is in comparison mode. */
+	comparisonModels: string[] | null;
+}
+
+export interface PlaygroundConversation {
+	id: string;
+	title: string | null;
+	model: string;
+	systemPrompt: string;
+	temperature: number;
+	snippetId: string | null;
+	isPinned: boolean;
+	comparisonModels: string[] | null;
+	createdAt: string;
+	updatedAt: string;
+}
+
+// ─── Messages ───────────────────────────────────────────
+
+export interface LocalPlaygroundMessage extends BaseRecord {
+	conversationId: string;
+	role: 'user' | 'assistant' | 'system';
+	content: string;
+	/** Which model produced this response (null for user messages). */
+	model: string | null;
+	promptTokens: number | null;
+	completionTokens: number | null;
+	/** Ties together N assistant responses from a single comparison round. */
+	comparisonGroupId: string | null;
+	order: number;
+}
+
+export interface PlaygroundConversationMessage {
+	id: string;
+	conversationId: string;
+	role: 'user' | 'assistant' | 'system';
+	content: string;
+	model: string | null;
+	promptTokens: number | null;
+	completionTokens: number | null;
+	comparisonGroupId: string | null;
+	order: number;
+	createdAt: string;
+}
diff --git a/apps/mana/apps/web/src/routes/(app)/playground/+page.svelte b/apps/mana/apps/web/src/routes/(app)/playground/+page.svelte
index 59b3be039..0651a38f0 100644
--- a/apps/mana/apps/web/src/routes/(app)/playground/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/playground/+page.svelte
@@ -1,21 +1,49 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { PLAYGROUND_MODELS, type PlaygroundMessage } from '$lib/modules/playground';
-	import { listModels, streamCompletion, type ChatMessage } from '$lib/modules/playground/llm';
-	import { useAllSnippets } from '$lib/modules/playground/queries';
+	import { PLAYGROUND_MODELS } from '$lib/modules/playground';
+	import {
+		listModels,
+		streamCompletion,
+		type ChatMessage,
+		type StreamChunk,
+	} from '$lib/modules/playground/llm';
+	import {
+		useAllSnippets,
+		useAllConversations,
+		useConversationMessages,
+	} from '$lib/modules/playground/queries';
 	import { playgroundSnippetsStore } from '$lib/modules/playground/stores/snippets.svelte';
-	import type { PlaygroundSnippet } from '$lib/modules/playground/types';
-	import { PaperPlaneRight, Trash, Robot, FloppyDisk, PushPin, X } from '@mana/shared-icons';
+	import { conversationsStore } from '$lib/modules/playground/stores/conversations.svelte';
+	import type {
+		PlaygroundSnippet,
+		PlaygroundConversationMessage,
+	} from '$lib/modules/playground/types';
+	import {
+		PaperPlaneRight,
+		Trash,
+		Robot,
+		FloppyDisk,
+		PushPin,
+		X,
+		Plus,
+		ChatCircle,
+		ArrowsOutSimple,
+	} from '@mana/shared-icons';
 
+	// ─── Data queries ───────────────────────────────────────
 	const snippets$ = useAllSnippets();
 	const snippets = $derived(snippets$.value);
+	const conversations$ = useAllConversations();
+	const conversations = $derived(conversations$.value);
+
+	let activeConversationId = $state<string | null>(null);
+	const messages$ = useConversationMessages(() => activeConversationId);
+	const persistedMessages = $derived(messages$.value);
 
 	let snippetName = $state('');
 	let saveOpen = $state(false);
 
-	// Model list is dynamic — fetched from mana-llm/v1/models on mount.
-	// We seed with the hardcoded fallback so the selector is never empty
-	// during the first paint or when the service is unreachable.
+	// ─── Model list ─────────────────────────────────────────
 	type ModelOption = { id: string; label: string; provider: string };
 	const fallbackOptions: ModelOption[] = PLAYGROUND_MODELS.map((m) => ({
 		id: m.id,
@@ -27,11 +55,27 @@
 	let selectedModel = $state<string>(fallbackOptions[0].id);
 	let systemPrompt = $state('');
 	let userInput = $state('');
-	let messages = $state<PlaygroundMessage[]>([]);
 	let isLoading = $state(false);
 	let temperature = $state(0.7);
 	let abortController: AbortController | null = null;
 
+	// Streaming in-flight content (not yet persisted)
+	let streamingContent = $state('');
+	let streamingModel = $state('');
+	let streamingUsage = $state<{ promptTokens: number; completionTokens: number } | null>(null);
+
+	// Comparison mode
+	let comparisonMode = $state(false);
+	let comparisonModels = $state<string[]>([]);
+	let comparisonStreams = $state<
+		Array<{
+			model: string;
+			content: string;
+			usage: { promptTokens: number; completionTokens: number } | null;
+		}>
+	>([]);
+	let comparisonAbortControllers: AbortController[] = [];
+
 	onMount(async () => {
 		const remote = await listModels();
 		if (remote.length === 0) return;
@@ -40,8 +84,6 @@
 			label: m.id,
 			provider: m.owned_by,
 		}));
-		// Keep the previously-selected model if it still exists, otherwise
-		// fall back to the first one in the live list.
 		if (!modelOptions.some((m) => m.id === selectedModel)) {
 			selectedModel = modelOptions[0].id;
 		}
@@ -51,76 +93,214 @@
 		modelOptions.find((m) => m.id === selectedModel)?.label ?? selectedModel
 	);
 
+	// Combined view: persisted messages + in-flight stream
+	const displayMessages = $derived(persistedMessages);
+
+	// ─── Send ───────────────────────────────────────────────
 	async function handleSend() {
 		if (!userInput.trim() || isLoading) return;
-
-		const userMessage: PlaygroundMessage = {
-			role: 'user',
-			content: userInput.trim(),
-			timestamp: Date.now(),
-		};
-		messages = [...messages, userMessage];
+		const text = userInput.trim();
 		userInput = '';
 
-		// Build the wire-format message list. System prompt is optional;
-		// only include it when the user has actually typed one.
+		// Lazily create conversation on first send
+		let convId = activeConversationId;
+		if (!convId) {
+			const conv = await conversationsStore.create({
+				model: selectedModel,
+				systemPrompt: systemPrompt.trim(),
+				temperature,
+				comparisonModels:
+					comparisonMode && comparisonModels.length >= 2 ? comparisonModels : undefined,
+			});
+			convId = conv.id;
+			activeConversationId = convId;
+		}
+
+		// Persist user message
+		const nextOrder = persistedMessages.length;
+		await conversationsStore.addMessage(convId, {
+			role: 'user',
+			content: text,
+			order: nextOrder,
+		});
+
+		// Auto-title from first user message
+		const conv = conversations.find((c) => c.id === convId);
+		if (conv && !conv.title) {
+			await conversationsStore.updateTitle(convId, text.slice(0, 60));
+		}
+
+		// Build wire messages
 		const wire: ChatMessage[] = [];
 		if (systemPrompt.trim()) {
 			wire.push({ role: 'system', content: systemPrompt.trim() });
 		}
-		for (const m of messages) {
+		for (const m of persistedMessages) {
+			// In comparison mode, only include one model's responses for follow-up context
+			if (m.role === 'assistant' && m.comparisonGroupId) {
+				// Use the first comparison model's response as context
+				const group = persistedMessages.filter(
+					(pm) => pm.comparisonGroupId === m.comparisonGroupId
+				);
+				if (group[0]?.id !== m.id) continue;
+			}
 			wire.push({ role: m.role, content: m.content });
 		}
-
-		// Push an empty assistant placeholder that the stream fills in.
-		// Keeping it in the array (instead of a separate `streaming` slot)
-		// means the UI render path stays the same for in-flight and final
-		// messages.
-		const assistantMessage: PlaygroundMessage = {
-			role: 'assistant',
-			content: '',
-			timestamp: Date.now(),
-		};
-		messages = [...messages, assistantMessage];
-		const assistantIdx = messages.length - 1;
+		wire.push({ role: 'user', content: text });
 
 		isLoading = true;
+
+		if (comparisonMode && comparisonModels.length >= 2) {
+			await handleComparisonStream(convId, wire, nextOrder + 1);
+		} else {
+			await handleSingleStream(convId, wire, nextOrder + 1);
+		}
+
+		await conversationsStore.touch(convId);
+		isLoading = false;
+	}
+
+	async function handleSingleStream(convId: string, wire: ChatMessage[], order: number) {
+		streamingContent = '';
+		streamingModel = selectedModel;
+		streamingUsage = null;
 		abortController = new AbortController();
 
 		try {
-			for await (const delta of streamCompletion({
+			for await (const chunk of streamCompletion({
 				model: selectedModel,
 				messages: wire,
 				temperature,
 				signal: abortController.signal,
 			})) {
-				const next = [...messages];
-				next[assistantIdx] = { ...next[assistantIdx], content: next[assistantIdx].content + delta };
-				messages = next;
+				if (chunk.type === 'delta') {
+					streamingContent += chunk.content;
+				} else if (chunk.type === 'usage') {
+					streamingUsage = chunk;
+				}
 			}
 		} catch (err) {
-			const next = [...messages];
 			const reason = err instanceof Error ? err.message : 'Unbekannter Fehler';
-			const existing = next[assistantIdx].content;
-			next[assistantIdx] = {
-				...next[assistantIdx],
-				content: existing
-					? `${existing}\n\n⚠ Stream abgebrochen: ${reason}`
-					: `⚠ ${reason}\n\nIst mana-llm erreichbar (PUBLIC_MANA_LLM_URL)?`,
-			};
-			messages = next;
-		} finally {
-			isLoading = false;
-			abortController = null;
+			streamingContent += streamingContent
+				? `\n\n⚠ Stream abgebrochen: ${reason}`
+				: `⚠ ${reason}\n\nIst mana-llm erreichbar (PUBLIC_MANA_LLM_URL)?`;
 		}
+
+		// Persist assistant message
+		await conversationsStore.addMessage(convId, {
+			role: 'assistant',
+			content: streamingContent,
+			model: selectedModel,
+			promptTokens: streamingUsage?.promptTokens,
+			completionTokens: streamingUsage?.completionTokens,
+			order,
+		});
+
+		streamingContent = '';
+		streamingModel = '';
+		streamingUsage = null;
+		abortController = null;
+	}
+
+	async function handleComparisonStream(convId: string, wire: ChatMessage[], startOrder: number) {
+		const groupId = crypto.randomUUID();
+		comparisonStreams = comparisonModels.map((m) => ({ model: m, content: '', usage: null }));
+		comparisonAbortControllers = comparisonModels.map(() => new AbortController());
+
+		// Stream all models in parallel
+		const promises = comparisonModels.map(async (model, idx) => {
+			try {
+				for await (const chunk of streamCompletion({
+					model,
+					messages: wire,
+					temperature,
+					signal: comparisonAbortControllers[idx].signal,
+				})) {
+					if (chunk.type === 'delta') {
+						comparisonStreams[idx].content += chunk.content;
+						comparisonStreams = [...comparisonStreams]; // trigger reactivity
+					} else if (chunk.type === 'usage') {
+						comparisonStreams[idx].usage = chunk;
+						comparisonStreams = [...comparisonStreams];
+					}
+				}
+			} catch (err) {
+				const reason = err instanceof Error ? err.message : 'Fehler';
+				comparisonStreams[idx].content += comparisonStreams[idx].content
+					? `\n\n⚠ ${reason}`
+					: `⚠ ${reason}`;
+				comparisonStreams = [...comparisonStreams];
+			}
+		});
+
+		await Promise.allSettled(promises);
+
+		// Persist all comparison responses
+		for (let i = 0; i < comparisonStreams.length; i++) {
+			const s = comparisonStreams[i];
+			await conversationsStore.addMessage(convId, {
+				role: 'assistant',
+				content: s.content,
+				model: s.model,
+				promptTokens: s.usage?.promptTokens,
+				completionTokens: s.usage?.completionTokens,
+				comparisonGroupId: groupId,
+				order: startOrder + i,
+			});
+		}
+
+		comparisonStreams = [];
+		comparisonAbortControllers = [];
 	}
 
 	function handleStop() {
 		abortController?.abort();
+		for (const ctrl of comparisonAbortControllers) ctrl.abort();
+	}
+
+	// ─── Conversation management ────────────────────────────
+	function newConversation() {
+		abortController?.abort();
+		activeConversationId = null;
+		streamingContent = '';
+		comparisonStreams = [];
+		userInput = '';
+	}
+
+	function loadConversation(id: string) {
+		activeConversationId = id;
+		const conv = conversations.find((c) => c.id === id);
+		if (conv) {
+			systemPrompt = conv.systemPrompt;
+			if (modelOptions.some((m) => m.id === conv.model)) {
+				selectedModel = conv.model;
+			}
+			temperature = conv.temperature;
+			if (conv.comparisonModels) {
+				comparisonMode = true;
+				comparisonModels = conv.comparisonModels;
+			} else {
+				comparisonMode = false;
+			}
+		}
+	}
+
+	async function deleteConversation(e: MouseEvent, id: string) {
+		e.stopPropagation();
+		await conversationsStore.remove(id);
+		if (activeConversationId === id) newConversation();
+	}
+
+	// ─── Comparison model toggle ────────────────────────────
+	function toggleComparisonModel(modelId: string) {
+		if (comparisonModels.includes(modelId)) {
+			comparisonModels = comparisonModels.filter((m) => m !== modelId);
+		} else if (comparisonModels.length < 4) {
+			comparisonModels = [...comparisonModels, modelId];
+		}
 	}
 
 	// ─── Snippets ────────────────────────────────────────────
-
 	async function saveCurrentAsSnippet() {
 		const name = snippetName.trim();
 		const body = systemPrompt.trim();
@@ -137,9 +317,6 @@
 
 	function loadSnippet(snippet: PlaygroundSnippet) {
 		systemPrompt = snippet.systemPrompt;
-		// Only adopt the snippet's model if we actually have it in the
-		// current options list — otherwise the selector would silently
-		// jump to a model that's not available on this mana-llm instance.
 		if (modelOptions.some((m) => m.id === snippet.model)) {
 			selectedModel = snippet.model;
 		}
@@ -156,244 +333,533 @@
 		await playgroundSnippetsStore.togglePin(id);
 	}
 
-	function handleClear() {
-		abortController?.abort();
-		messages = [];
-		systemPrompt = '';
-		userInput = '';
-	}
-
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Enter' && !e.shiftKey) {
 			e.preventDefault();
 			handleSend();
 		}
 	}
+
+	function formatTokens(msg: PlaygroundConversationMessage): string | null {
+		if (msg.promptTokens == null) return null;
+		const total = msg.promptTokens + (msg.completionTokens ?? 0);
+		return `${msg.promptTokens} prompt + ${msg.completionTokens ?? 0} completion = ${total} tokens`;
+	}
+
+	/** Group comparison messages by comparisonGroupId for side-by-side rendering. */
+	function getComparisonGroups(
+		msgs: PlaygroundConversationMessage[]
+	): Map<string, PlaygroundConversationMessage[]> {
+		const groups = new Map<string, PlaygroundConversationMessage[]>();
+		for (const m of msgs) {
+			if (!m.comparisonGroupId) continue;
+			const g = groups.get(m.comparisonGroupId) ?? [];
+			g.push(m);
+			groups.set(m.comparisonGroupId, g);
+		}
+		return groups;
+	}
+
+	const comparisonGroups = $derived(getComparisonGroups(displayMessages));
+
+	let showSidebar = $state(true);
 </script>
 
 <svelte:head>
 	<title>Playground - Mana</title>
 </svelte:head>
 
-<div class="mx-auto flex h-full max-w-4xl flex-col">
-	<!-- Header -->
-	<header class="mb-4 flex items-center justify-between">
-		<div>
-			<h1 class="text-2xl font-bold text-foreground">Playground</h1>
-			<p class="text-muted-foreground mt-1 text-sm">LLM-Modelle testen & vergleichen</p>
-		</div>
-		<button
-			onclick={handleClear}
-			class="flex items-center gap-2 rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted"
-		>
-			<Trash size={16} />
-			Leeren
-		</button>
-	</header>
-
-	<!-- Config Bar -->
-	<div class="mb-4 flex flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4">
-		<div class="flex flex-col gap-1">
-			<label for="model-select" class="text-xs font-medium text-muted-foreground">Modell</label>
-			<select
-				id="model-select"
-				bind:value={selectedModel}
-				class="rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground"
-			>
-				{#each modelOptions as model}
-					<option value={model.id}>{model.label} ({model.provider})</option>
+<div class="flex h-full">
+	<!-- Sidebar: conversation list -->
+	{#if showSidebar}
+		<aside class="sidebar">
+			<button class="new-chat-btn" onclick={newConversation}>
+				<Plus size={14} />
+				Neuer Chat
+			</button>
+			<div class="conv-list">
+				{#each conversations as conv (conv.id)}
+					<button
+						class="conv-item"
+						class:active={conv.id === activeConversationId}
+						onclick={() => loadConversation(conv.id)}
+					>
+						<ChatCircle size={14} class="shrink-0 opacity-40" />
+						<span class="conv-title">{conv.title || 'Unbenannt'}</span>
+						<span
+							role="button"
+							tabindex="0"
+							class="conv-delete"
+							onclick={(e) => deleteConversation(e, conv.id)}
+							onkeydown={(e) => {
+								if (e.key === 'Enter') deleteConversation(e as unknown as MouseEvent, conv.id);
+							}}
+						>
+							<X size={10} />
+						</span>
+					</button>
 				{/each}
-			</select>
-		</div>
+			</div>
+		</aside>
+	{/if}
 
-		<div class="flex flex-col gap-1">
-			<label for="temperature" class="text-xs font-medium text-muted-foreground">
-				Temperatur: {temperature.toFixed(1)}
-			</label>
-			<input
-				id="temperature"
-				type="range"
-				min="0"
-				max="2"
-				step="0.1"
-				bind:value={temperature}
-				class="w-32 accent-primary"
-			/>
-		</div>
+	<!-- Main area -->
+	<div class="mx-auto flex h-full max-w-4xl flex-1 flex-col px-4">
+		<!-- Header -->
+		<header class="mb-4 flex items-center justify-between pt-4">
+			<div class="flex items-center gap-2">
+				<button
+					class="sidebar-toggle"
+					onclick={() => (showSidebar = !showSidebar)}
+					title={showSidebar ? 'Sidebar ausblenden' : 'Sidebar einblenden'}
+				>
+					<ArrowsOutSimple size={16} />
+				</button>
+				<div>
+					<h1 class="text-2xl font-bold text-foreground">Playground</h1>
+					<p class="text-muted-foreground mt-1 text-sm">LLM-Modelle testen & vergleichen</p>
+				</div>
+			</div>
+		</header>
 
-		<div class="flex min-w-0 flex-1 flex-col gap-1">
-			<label for="system-prompt" class="text-xs font-medium text-muted-foreground">
-				System Prompt
-			</label>
-			<div class="flex gap-2">
+		<!-- Config Bar -->
+		<div class="config-bar">
+			<div class="flex flex-col gap-1">
+				<label for="model-select" class="text-xs font-medium text-muted-foreground">Modell</label>
+				<select
+					id="model-select"
+					bind:value={selectedModel}
+					class="rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground"
+				>
+					{#each modelOptions as model}
+						<option value={model.id}>{model.label} ({model.provider})</option>
+					{/each}
+				</select>
+			</div>
+
+			<div class="flex flex-col gap-1">
+				<label for="temperature" class="text-xs font-medium text-muted-foreground">
+					Temperatur: {temperature.toFixed(1)}
+				</label>
 				<input
-					id="system-prompt"
-					type="text"
-					bind:value={systemPrompt}
-					placeholder="Optional: System-Anweisung..."
+					id="temperature"
+					type="range"
+					min="0"
+					max="2"
+					step="0.1"
+					bind:value={temperature}
+					class="w-32 accent-primary"
+				/>
+			</div>
+
+			<div class="flex min-w-0 flex-1 flex-col gap-1">
+				<label for="system-prompt" class="text-xs font-medium text-muted-foreground">
+					System Prompt
+				</label>
+				<div class="flex gap-2">
+					<input
+						id="system-prompt"
+						type="text"
+						bind:value={systemPrompt}
+						placeholder="Optional: System-Anweisung..."
+						class="flex-1 rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground"
+					/>
+					<button
+						type="button"
+						onclick={() => (saveOpen = !saveOpen)}
+						disabled={!systemPrompt.trim()}
+						title="Als Snippet speichern"
+						class="flex items-center gap-1 rounded-lg border border-border px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:opacity-40"
+					>
+						<FloppyDisk size={14} />
+					</button>
+				</div>
+			</div>
+
+			<!-- Comparison mode toggle -->
+			<div class="flex flex-col gap-1">
+				<span class="text-xs font-medium text-muted-foreground">Vergleich</span>
+				<button
+					onclick={() => {
+						comparisonMode = !comparisonMode;
+						if (comparisonMode && comparisonModels.length === 0) {
+							comparisonModels = [selectedModel];
+						}
+					}}
+					class="rounded-lg border px-3 py-1.5 text-sm transition-colors
+						{comparisonMode
+						? 'border-primary bg-primary/10 text-primary'
+						: 'border-border text-muted-foreground hover:bg-muted'}"
+				>
+					{comparisonMode ? 'An' : 'Aus'}
+				</button>
+			</div>
+		</div>
+
+		<!-- Comparison model selector -->
+		{#if comparisonMode}
+			<div class="comparison-selector">
+				<span class="text-xs text-muted-foreground">Modelle vergleichen (2-4):</span>
+				<div class="flex flex-wrap gap-1.5">
+					{#each modelOptions as model}
+						<button
+							onclick={() => toggleComparisonModel(model.id)}
+							class="rounded-full border px-2.5 py-0.5 text-xs transition-colors
+								{comparisonModels.includes(model.id)
+								? 'border-primary bg-primary/10 text-primary'
+								: 'border-border text-muted-foreground hover:bg-muted'}"
+						>
+							{model.label}
+						</button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Save snippet inline form -->
+		{#if saveOpen}
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					saveCurrentAsSnippet();
+				}}
+				class="mb-4 flex gap-2 rounded-xl border border-border bg-card p-3"
+			>
+				<input
+					bind:value={snippetName}
+					placeholder="Snippet-Name (z.B. 'JSON-Extraktor')"
 					class="flex-1 rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground"
 				/>
 				<button
-					type="button"
-					onclick={() => (saveOpen = !saveOpen)}
-					disabled={!systemPrompt.trim()}
-					title="Als Snippet speichern"
-					class="flex items-center gap-1 rounded-lg border border-border px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted disabled:opacity-40"
+					type="submit"
+					disabled={!snippetName.trim()}
+					class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-50"
 				>
-					<FloppyDisk size={14} />
+					Speichern
 				</button>
-			</div>
-		</div>
-	</div>
-
-	<!-- Save snippet inline form (toggled by FloppyDisk button) -->
-	{#if saveOpen}
-		<form
-			onsubmit={(e) => {
-				e.preventDefault();
-				saveCurrentAsSnippet();
-			}}
-			class="mb-4 flex gap-2 rounded-xl border border-border bg-card p-3"
-		>
-			<input
-				bind:value={snippetName}
-				placeholder="Snippet-Name (z.B. 'JSON-Extraktor')"
-				class="flex-1 rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground"
-			/>
-			<button
-				type="submit"
-				disabled={!snippetName.trim()}
-				class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-50"
-			>
-				Speichern
-			</button>
-			<button
-				type="button"
-				onclick={() => (saveOpen = false)}
-				class="rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted"
-			>
-				Abbrechen
-			</button>
-		</form>
-	{/if}
-
-	<!-- Saved snippets row — pill list, click to load, hover for pin/delete -->
-	{#if snippets.length > 0}
-		<div class="mb-4 flex flex-wrap items-center gap-2">
-			<span class="text-xs font-medium text-muted-foreground">Snippets:</span>
-			{#each snippets as snippet (snippet.id)}
 				<button
 					type="button"
-					onclick={() => loadSnippet(snippet)}
-					title={snippet.systemPrompt}
-					class="group flex items-center gap-1 rounded-full border border-border bg-card px-3 py-1 text-xs text-foreground transition-colors hover:bg-muted"
+					onclick={() => (saveOpen = false)}
+					class="rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted"
 				>
-					{#if snippet.isPinned}
-						<PushPin size={10} weight="fill" class="text-primary" />
-					{/if}
-					<span class="max-w-[140px] truncate">{snippet.name}</span>
-					<span
-						role="button"
-						tabindex="0"
-						onclick={(e) => togglePinSnippet(e, snippet.id)}
-						onkeydown={(e) => {
-							if (e.key === 'Enter') togglePinSnippet(e as unknown as MouseEvent, snippet.id);
-						}}
-						title={snippet.isPinned ? 'Lösen' : 'Pinnen'}
-						class="ml-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-background group-hover:opacity-60"
-					>
-						<PushPin size={10} />
-					</span>
-					<span
-						role="button"
-						tabindex="0"
-						onclick={(e) => deleteSnippet(e, snippet.id)}
-						onkeydown={(e) => {
-							if (e.key === 'Enter') deleteSnippet(e as unknown as MouseEvent, snippet.id);
-						}}
-						title="Löschen"
-						class="rounded p-0.5 opacity-0 transition-opacity hover:bg-destructive/20 hover:text-destructive group-hover:opacity-60"
-					>
-						<X size={10} />
-					</span>
+					Abbrechen
 				</button>
-			{/each}
-		</div>
-	{/if}
+			</form>
+		{/if}
 
-	<!-- Messages -->
-	<div class="flex-1 space-y-4 overflow-y-auto pb-4">
-		{#if messages.length === 0}
-			<div class="flex flex-col items-center justify-center py-16 text-center">
-				<div class="mb-4 rounded-full bg-primary/10 p-4">
-					<Robot size={40} class="text-primary" />
-				</div>
-				<h2 class="text-lg font-semibold text-foreground">Bereit zum Testen</h2>
-				<p class="mt-1 max-w-md text-sm text-muted-foreground">
-					Wähle ein Modell, schreibe einen Prompt und teste verschiedene LLMs. Aktuell: <span
-						class="font-medium text-foreground">{currentModelLabel}</span
+		<!-- Saved snippets row -->
+		{#if snippets.length > 0}
+			<div class="mb-4 flex flex-wrap items-center gap-2">
+				<span class="text-xs font-medium text-muted-foreground">Snippets:</span>
+				{#each snippets as snippet (snippet.id)}
+					<button
+						type="button"
+						onclick={() => loadSnippet(snippet)}
+						title={snippet.systemPrompt}
+						class="group flex items-center gap-1 rounded-full border border-border bg-card px-3 py-1 text-xs text-foreground transition-colors hover:bg-muted"
 					>
-				</p>
+						{#if snippet.isPinned}
+							<PushPin size={10} weight="fill" class="text-primary" />
+						{/if}
+						<span class="max-w-[140px] truncate">{snippet.name}</span>
+						<span
+							role="button"
+							tabindex="0"
+							onclick={(e) => togglePinSnippet(e, snippet.id)}
+							onkeydown={(e) => {
+								if (e.key === 'Enter') togglePinSnippet(e as unknown as MouseEvent, snippet.id);
+							}}
+							title={snippet.isPinned ? 'Lösen' : 'Pinnen'}
+							class="ml-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-background group-hover:opacity-60"
+						>
+							<PushPin size={10} />
+						</span>
+						<span
+							role="button"
+							tabindex="0"
+							onclick={(e) => deleteSnippet(e, snippet.id)}
+							onkeydown={(e) => {
+								if (e.key === 'Enter') deleteSnippet(e as unknown as MouseEvent, snippet.id);
+							}}
+							title="Löschen"
+							class="rounded p-0.5 opacity-0 transition-opacity hover:bg-destructive/20 hover:text-destructive group-hover:opacity-60"
+						>
+							<X size={10} />
+						</span>
+					</button>
+				{/each}
 			</div>
-		{:else}
-			{#each messages as message}
-				<div
-					class="rounded-xl border border-border p-4 {message.role === 'user'
-						? 'ml-8 bg-primary/5'
-						: 'mr-8 bg-card'}"
-				>
-					<div class="mb-1 text-xs font-medium text-muted-foreground">
-						{message.role === 'user' ? 'Du' : currentModelLabel}
+		{/if}
+
+		<!-- Messages -->
+		<div class="flex-1 space-y-4 overflow-y-auto pb-4">
+			{#if displayMessages.length === 0 && !streamingContent && comparisonStreams.length === 0}
+				<div class="flex flex-col items-center justify-center py-16 text-center">
+					<div class="mb-4 rounded-full bg-primary/10 p-4">
+						<Robot size={40} class="text-primary" />
 					</div>
-					{#if message.content}
-						<div class="whitespace-pre-wrap text-sm text-foreground">{message.content}</div>
+					<h2 class="text-lg font-semibold text-foreground">Bereit zum Testen</h2>
+					<p class="mt-1 max-w-md text-sm text-muted-foreground">
+						Wähle ein Modell, schreibe einen Prompt und teste verschiedene LLMs. Aktuell: <span
+							class="font-medium text-foreground">{currentModelLabel}</span
+						>
+					</p>
+				</div>
+			{:else}
+				{#each displayMessages as message (message.id)}
+					{@const tokens = formatTokens(message)}
+					{@const isComparisonMsg = !!message.comparisonGroupId}
+					{@const group = isComparisonMsg ? comparisonGroups.get(message.comparisonGroupId!) : null}
+					{@const isFirstInGroup = isComparisonMsg && group ? group[0]?.id === message.id : false}
+
+					{#if isComparisonMsg && !isFirstInGroup}
+						<!-- Skip non-first comparison messages — rendered as group below -->
+					{:else if isComparisonMsg && isFirstInGroup && group}
+						<!-- Comparison group: side-by-side -->
+						<div class="comparison-grid" style="--cols: {group.length}">
+							{#each group as gMsg (gMsg.id)}
+								{@const gTokens = formatTokens(gMsg)}
+								<div class="rounded-xl border border-border p-4 bg-card">
+									<div class="mb-1 text-xs font-medium text-muted-foreground">
+										{gMsg.model ?? 'Assistent'}
+									</div>
+									<div class="whitespace-pre-wrap text-sm text-foreground">
+										{gMsg.content}
+									</div>
+									{#if gTokens}
+										<div class="mt-2 text-[10px] text-muted-foreground">{gTokens}</div>
+									{/if}
+								</div>
+							{/each}
+						</div>
 					{:else}
-						<!-- Empty placeholder while waiting for the first delta. The
-						     bubble is already in the list, so the loading state lives
-						     inline rather than as a separate row. -->
-						<div class="flex gap-1">
-							<span
-								class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]"
-							></span>
-							<span
-								class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]"
-							></span>
-							<span
-								class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]"
-							></span>
+						<!-- Normal message -->
+						<div
+							class="rounded-xl border border-border p-4 {message.role === 'user'
+								? 'ml-8 bg-primary/5'
+								: 'mr-8 bg-card'}"
+						>
+							<div class="mb-1 text-xs font-medium text-muted-foreground">
+								{message.role === 'user' ? 'Du' : (message.model ?? currentModelLabel)}
+							</div>
+							<div class="whitespace-pre-wrap text-sm text-foreground">
+								{message.content}
+							</div>
+							{#if tokens}
+								<div class="mt-2 text-[10px] text-muted-foreground">{tokens}</div>
+							{/if}
 						</div>
 					{/if}
-				</div>
-			{/each}
-		{/if}
-	</div>
+				{/each}
 
-	<!-- Input -->
-	<div class="sticky bottom-0 border-t border-border bg-background pt-4">
-		<div class="flex gap-3">
-			<textarea
-				bind:value={userInput}
-				onkeydown={handleKeydown}
-				placeholder="Prompt eingeben... (Enter zum Senden, Shift+Enter für neue Zeile)"
-				rows={2}
-				class="flex-1 resize-none rounded-xl border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
-			></textarea>
-			{#if isLoading}
-				<button
-					onclick={handleStop}
-					class="flex items-center gap-2 self-end rounded-xl bg-destructive px-4 py-3 text-sm font-medium text-destructive-foreground transition-opacity"
-				>
-					Stop
-				</button>
-			{:else}
-				<button
-					onclick={handleSend}
-					disabled={!userInput.trim()}
-					class="flex items-center gap-2 self-end rounded-xl bg-primary px-4 py-3 text-sm font-medium text-primary-foreground transition-opacity disabled:opacity-50"
-				>
-					<PaperPlaneRight size={18} />
-				</button>
+				<!-- In-flight: single stream -->
+				{#if streamingContent || (isLoading && !comparisonMode)}
+					<div class="mr-8 rounded-xl border border-border bg-card p-4">
+						<div class="mb-1 text-xs font-medium text-muted-foreground">
+							{streamingModel || currentModelLabel}
+						</div>
+						{#if streamingContent}
+							<div class="whitespace-pre-wrap text-sm text-foreground">
+								{streamingContent}
+							</div>
+						{:else}
+							<div class="flex gap-1">
+								<span
+									class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]"
+								></span>
+								<span
+									class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]"
+								></span>
+								<span
+									class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]"
+								></span>
+							</div>
+						{/if}
+					</div>
+				{/if}
+
+				<!-- In-flight: comparison streams -->
+				{#if comparisonStreams.length > 0}
+					<div class="comparison-grid" style="--cols: {comparisonStreams.length}">
+						{#each comparisonStreams as stream}
+							<div class="rounded-xl border border-border p-4 bg-card">
+								<div class="mb-1 text-xs font-medium text-muted-foreground">
+									{stream.model}
+								</div>
+								{#if stream.content}
+									<div class="whitespace-pre-wrap text-sm text-foreground">
+										{stream.content}
+									</div>
+								{:else}
+									<div class="flex gap-1">
+										<span
+											class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]"
+										></span>
+										<span
+											class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms]"
+										></span>
+										<span
+											class="inline-block h-2 w-2 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms]"
+										></span>
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
 			{/if}
 		</div>
+
+		<!-- Input -->
+		<div class="sticky bottom-0 border-t border-border bg-background pt-4 pb-4">
+			<div class="flex gap-3">
+				<textarea
+					bind:value={userInput}
+					onkeydown={handleKeydown}
+					placeholder="Prompt eingeben... (Enter zum Senden, Shift+Enter für neue Zeile)"
+					rows={2}
+					class="flex-1 resize-none rounded-xl border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
+				></textarea>
+				{#if isLoading}
+					<button
+						onclick={handleStop}
+						class="flex items-center gap-2 self-end rounded-xl bg-destructive px-4 py-3 text-sm font-medium text-destructive-foreground transition-opacity"
+					>
+						Stop
+					</button>
+				{:else}
+					<button
+						onclick={handleSend}
+						disabled={!userInput.trim()}
+						class="flex items-center gap-2 self-end rounded-xl bg-primary px-4 py-3 text-sm font-medium text-primary-foreground transition-opacity disabled:opacity-50"
+					>
+						<PaperPlaneRight size={18} />
+					</button>
+				{/if}
+			</div>
+		</div>
 	</div>
 </div>
+
+<style>
+	.sidebar {
+		width: 220px;
+		flex-shrink: 0;
+		border-right: 1px solid hsl(var(--border));
+		display: flex;
+		flex-direction: column;
+		padding: 1rem 0.75rem;
+		gap: 0.5rem;
+		overflow-y: auto;
+	}
+	.new-chat-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		border: 1px dashed hsl(var(--border));
+		border-radius: 0.5rem;
+		background: transparent;
+		color: hsl(var(--muted-foreground));
+		font-size: 0.8125rem;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.new-chat-btn:hover {
+		border-color: hsl(var(--border) / 0.8);
+		color: hsl(var(--foreground));
+		background: hsl(var(--muted));
+	}
+	.conv-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+	.conv-item {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.5rem;
+		border: none;
+		border-radius: 0.375rem;
+		background: transparent;
+		color: hsl(var(--foreground));
+		font-size: 0.75rem;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.1s;
+	}
+	.conv-item:hover {
+		background: hsl(var(--muted));
+	}
+	.conv-item.active {
+		background: hsl(var(--primary) / 0.1);
+		color: hsl(var(--primary));
+	}
+	.conv-title {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.conv-delete {
+		display: none;
+		align-items: center;
+		padding: 0.125rem;
+		border-radius: 0.25rem;
+		color: hsl(var(--muted-foreground));
+		cursor: pointer;
+	}
+	.conv-item:hover .conv-delete {
+		display: flex;
+	}
+	.conv-delete:hover {
+		color: hsl(var(--destructive));
+		background: hsl(var(--destructive) / 0.1);
+	}
+	.sidebar-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border: none;
+		border-radius: 0.375rem;
+		background: transparent;
+		color: hsl(var(--muted-foreground));
+		cursor: pointer;
+	}
+	.sidebar-toggle:hover {
+		background: hsl(var(--muted));
+		color: hsl(var(--foreground));
+	}
+	.config-bar {
+		margin-bottom: 1rem;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-end;
+		gap: 1rem;
+		border-radius: 0.75rem;
+		border: 1px solid hsl(var(--border));
+		background: hsl(var(--card));
+		padding: 1rem;
+	}
+	.comparison-selector {
+		margin-bottom: 1rem;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem;
+		border-radius: 0.75rem;
+		border: 1px solid hsl(var(--primary) / 0.2);
+		background: hsl(var(--primary) / 0.03);
+		padding: 0.75rem 1rem;
+	}
+	.comparison-grid {
+		display: grid;
+		grid-template-columns: repeat(var(--cols, 2), 1fr);
+		gap: 0.75rem;
+		align-items: start;
+	}
+</style>