implementation-plans/_index.md

@@ -13,3 +13,4 @@
 | #9    | Intermediate results display                           | COMPLETED    | [issue-009.md](issue-009.md) |
 | #10   | Final result rendering with artifacts                  | COMPLETED    | [issue-010.md](issue-010.md) |
 | #11   | Session creation and ID management                     | COMPLETED    | [issue-011.md](issue-011.md) |
+| #12   | Session history sidebar                                | COMPLETED    | [issue-012.md](issue-012.md) |

implementation-plans/issue-012.md

@@ -0,0 +1,17 @@
+---
+---
+
+# Issue #12: Session history sidebar
+
+**Status:** COMPLETED
+**Issue:** https://git.shahondin1624.de/llm-multiverse/llm-multiverse-ui/issues/12
+**Branch:** `feature/issue-12-session-sidebar`
+
+## Acceptance Criteria
+
+- [x] Left sidebar component listing past sessions
+- [x] Each entry shows timestamp and first-message preview
+- [x] Click on a session loads its message history
+- [x] Session message history persisted in localStorage
+- [x] Sessions sorted by most recent first
+- [x] Delete session option (with confirmation)

src/lib/components/SessionSidebar.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { sessionStore } from '$lib/stores/sessions.svelte';
+
+	let {
+		onSelectSession,
+		onNewChat
+	}: { onSelectSession: (id: string) => void; onNewChat: () => void } = $props();
+
+	let confirmDeleteId: string | null = $state(null);
+
+	const sessions = $derived(sessionStore.getAllSessions());
+	const activeId = $derived(sessionStore.activeSessionId);
+
+	function handleDelete(e: MouseEvent, id: string) {
+		e.stopPropagation();
+		if (confirmDeleteId === id) {
+			sessionStore.deleteSession(id);
+			confirmDeleteId = null;
+			if (sessionStore.activeSessionId) {
+				onSelectSession(sessionStore.activeSessionId);
+			}
+		} else {
+			confirmDeleteId = id;
+		}
+	}
+
+	function formatDate(date: Date): string {
+		const now = new Date();
+		const diff = now.getTime() - date.getTime();
+		const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+		if (days === 0) return 'Today';
+		if (days === 1) return 'Yesterday';
+		if (days < 7) return `${days} days ago`;
+		return date.toLocaleDateString();
+	}
+</script>
+
+<aside class="flex h-full w-64 flex-col border-r border-gray-200 bg-gray-50">
+	<div class="border-b border-gray-200 p-3">
+		<button
+			type="button"
+			onclick={onNewChat}
+			class="w-full rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700"
+		>
+			+ New Chat
+		</button>
+	</div>
+
+	<div class="flex-1 overflow-y-auto">
+		{#if sessions.length === 0}
+			<p class="p-4 text-center text-sm text-gray-400">No sessions yet</p>
+		{:else}
+			{#each sessions as session (session.id)}
+				<div
+					role="button"
+					tabindex="0"
+					onclick={() => onSelectSession(session.id)}
+					onkeydown={(e) => { if (e.key === 'Enter') onSelectSession(session.id); }}
+					class="group flex w-full cursor-pointer items-start gap-2 border-b border-gray-100 px-3 py-3 text-left hover:bg-gray-100
+						{activeId === session.id ? 'bg-blue-50 border-l-2 border-l-blue-500' : ''}"
+				>
+					<div class="min-w-0 flex-1">
+						<p class="truncate text-sm font-medium text-gray-900">{session.title}</p>
+						<p class="mt-0.5 text-xs text-gray-500">{formatDate(session.createdAt)}</p>
+					</div>
+					<button
+						type="button"
+						onclick={(e) => handleDelete(e, session.id)}
+						class="shrink-0 rounded p-1 text-xs opacity-0 group-hover:opacity-100
+							{confirmDeleteId === session.id
+							? 'bg-red-100 text-red-600'
+							: 'text-gray-400 hover:bg-gray-200 hover:text-gray-600'}"
+						title={confirmDeleteId === session.id ? 'Click again to confirm' : 'Delete session'}
+					>
+						{confirmDeleteId === session.id ? '✓' : '✕'}
+					</button>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</aside>

src/lib/stores/sessions.svelte.ts

@@ -91,6 +91,16 @@ function createSessionStore() {
 		}
 	}
 
+	function deleteSession(id: string) {
+		sessions.delete(id);
+		if (activeSessionId === id) {
+			const remaining = getAllSessions();
+			activeSessionId = remaining.length > 0 ? remaining[0].id : null;
+			if (activeSessionId) saveActiveSessionId(activeSessionId);
+		}
+		saveSessions(sessions);
+	}
+
 	function getAllSessions(): Session[] {
 		return [...sessions.values()].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
 	}
@@ -102,6 +112,7 @@ function createSessionStore() {
 		getOrCreateSession,
 		updateMessages,
 		switchSession,
+		deleteSession,
 		getAllSessions
 	};
 }

src/routes/chat/+page.svelte

@@ -9,6 +9,7 @@
 	import OrchestrationProgress from '$lib/components/OrchestrationProgress.svelte';
 	import ThinkingSection from '$lib/components/ThinkingSection.svelte';
 	import FinalResult from '$lib/components/FinalResult.svelte';
+	import SessionSidebar from '$lib/components/SessionSidebar.svelte';
 	import { processRequest, OrchestratorError } from '$lib/services/orchestrator';
 	import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
 	import { sessionStore } from '$lib/stores/sessions.svelte';
@@ -20,15 +21,18 @@
 	let intermediateResult: string = $state('');
 	let finalResult: SubagentResult | null = $state(null);
 
-	// Initialize session from URL or create new one
+	function navigateToSession(sessionId: string, replace = false) {
+		const url = `${resolveRoute('/chat')}?session=${sessionId}`;
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
+		goto(url, { replaceState: replace });
+	}
+
 	$effect(() => {
 		const sessionParam = $page.url.searchParams.get('session');
 		const session = sessionStore.getOrCreateSession(sessionParam ?? undefined);
 		messages = [...session.messages];
 		if (!sessionParam || sessionParam !== session.id) {
-			const url = `${resolveRoute('/chat')}?session=${session.id}`;
+			navigateToSession(session.id, true);
-			// eslint-disable-next-line svelte/no-navigation-without-resolve
-			goto(url, { replaceState: true });
 		}
 	});
 
@@ -37,9 +41,18 @@
 		messages = [];
 		error = null;
 		finalResult = null;
-		const url = `${resolveRoute('/chat')}?session=${session.id}`;
+		navigateToSession(session.id);
-		// eslint-disable-next-line svelte/no-navigation-without-resolve
+	}
-		goto(url);
+
+	function handleSelectSession(id: string) {
+		sessionStore.switchSession(id);
+		const session = sessionStore.activeSession;
+		if (session) {
+			messages = [...session.messages];
+			error = null;
+			finalResult = null;
+			navigateToSession(id);
+		}
 	}
 
 	async function handleSend(content: string) {
@@ -102,16 +115,12 @@
 	}
 </script>
 
-<div class="flex h-screen flex-col">
+<div class="flex h-screen">
-	<header class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
+	<SessionSidebar onSelectSession={handleSelectSession} onNewChat={handleNewChat} />
+
+	<div class="flex flex-1 flex-col">
+		<header class="border-b border-gray-200 bg-white px-4 py-3">
 			<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
-		<button
-			type="button"
-			onclick={handleNewChat}
-			class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200"
-		>
-			New Chat
-		</button>
 		</header>
 
 		<MessageList {messages} />
@@ -126,9 +135,11 @@
 				<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 px-4 py-2.5">
 					<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:0ms]"
 					></span>
-				<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:150ms]"
+					<span
+						class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:150ms]"
 					></span>
-				<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:300ms]"
+					<span
+						class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:300ms]"
 					></span>
 				</div>
 			</div>
@@ -145,4 +156,5 @@
 		{/if}
 
 		<MessageInput onSend={handleSend} disabled={isStreaming} />
+	</div>
 </div>