Merge pull request 'feat: memory candidates viewer (#16)' (#36) from feature/issue-16-memory-viewer into main

implementation-plans/_index.md

@@ -17,3 +17,4 @@
 | #13   | Session config sidebar component                       | COMPLETED    | [issue-013.md](issue-013.md) |
 | #14   | Preset configurations                                  | COMPLETED    | [issue-014.md](issue-014.md) |
 | #15   | Agent lineage visualization                            | COMPLETED    | [issue-015.md](issue-015.md) |
+| #16   | Memory candidates viewer                               | COMPLETED    | [issue-016.md](issue-016.md) |

implementation-plans/issue-016.md

@@ -0,0 +1,37 @@
+---
+---
+
+# Issue #16: Memory candidates viewer
+
+**Status:** COMPLETED
+**Issue:** https://git.shahondin1624.de/llm-multiverse/llm-multiverse-ui/issues/16
+**Branch:** `feature/issue-16-memory-viewer`
+
+## Acceptance Criteria
+
+- [x] Dedicated `/memory` route
+- [x] List of `MemoryCandidate` entries
+- [x] Each entry shows: content, source badge, confidence score
+- [x] Entries grouped by session
+- [x] Confidence score visualized (progress bar with color-coding)
+- [x] Filterable by source or confidence threshold
+
+## Implementation
+
+### New Files
+- `src/lib/stores/memory.svelte.ts` — reactive store for memory candidates grouped by session ID, with localStorage persistence, sample/demo data, and `addCandidates()` / `getAllBySession()` / `clearSession()` API
+- `src/lib/components/MemoryCandidateCard.svelte` — card component displaying a single memory candidate with content, color-coded source badge (Tool Output=blue, Model Knowledge=purple, Web=green, Unspecified=gray), and horizontal confidence progress bar with percentage
+- `src/routes/memory/+page.svelte` — dedicated memory route with session-grouped layout, source dropdown filter, confidence threshold slider, empty state, and back-to-chat link
+- `src/routes/memory/+page.ts` — SSR disabled for this route
+
+### Modified Files
+- `src/routes/+page.svelte` — added Memory Candidates navigation link on the home page
+- `src/routes/chat/+page.svelte` — added Memory link in the header next to Lineage; wired up capture of `finalResult.newMemoryCandidates` into the memory store
+
+### Key Decisions
+- Uses sample/demo data seeded into localStorage on first load, since the orchestrator doesn't currently include memory candidates in typical responses
+- `StoredMemoryCandidate` type decouples the UI store from protobuf Message dependency (same pattern as lineage's `SimpleAgentIdentifier`)
+- Confidence bar color-coded: green (>=80%), amber (>=50%), red (<50%)
+- Source badge colors match the project's existing badge conventions (blue, purple, green, gray)
+- Grid layout (1-3 columns responsive) for candidate cards within each session group
+- Filter controls use a source dropdown and a range slider for confidence threshold

src/lib/components/MemoryCandidateCard.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
+	import type { StoredMemoryCandidate } from '$lib/stores/memory.svelte';
+
+	let { candidate }: { candidate: StoredMemoryCandidate } = $props();
+
+	const sourceBadge = $derived.by(() => {
+		switch (candidate.source) {
+			case ResultSource.TOOL_OUTPUT:
+				return { label: 'Tool Output', bg: 'bg-blue-100', text: 'text-blue-800' };
+			case ResultSource.MODEL_KNOWLEDGE:
+				return { label: 'Model Knowledge', bg: 'bg-purple-100', text: 'text-purple-800' };
+			case ResultSource.WEB:
+				return { label: 'Web', bg: 'bg-green-100', text: 'text-green-800' };
+			default:
+				return { label: 'Unspecified', bg: 'bg-gray-100', text: 'text-gray-800' };
+		}
+	});
+
+	const confidencePct = $derived(Math.round(candidate.confidence * 100));
+
+	const confidenceColor = $derived.by(() => {
+		if (candidate.confidence >= 0.8) return { bar: 'bg-green-500', text: 'text-green-700' };
+		if (candidate.confidence >= 0.5) return { bar: 'bg-amber-500', text: 'text-amber-700' };
+		return { bar: 'bg-red-500', text: 'text-red-700' };
+	});
+</script>
+
+<div class="rounded-lg border border-gray-200 bg-white p-4">
+	<div class="mb-2 flex items-center justify-between gap-2">
+		<span
+			class="shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium {sourceBadge.bg} {sourceBadge.text}"
+		>
+			{sourceBadge.label}
+		</span>
+		<span class="text-xs font-medium {confidenceColor.text}">
+			{confidencePct}%
+		</span>
+	</div>
+
+	<p class="mb-3 text-sm text-gray-700">{candidate.content}</p>
+
+	<div class="flex items-center gap-2">
+		<div class="h-2 flex-1 overflow-hidden rounded-full bg-gray-100">
+			<div
+				class="h-full rounded-full transition-all {confidenceColor.bar}"
+				style="width: {confidencePct}%"
+			></div>
+		</div>
+	</div>
+</div>

src/lib/stores/memory.svelte.ts

@@ -0,0 +1,127 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
+
+export interface StoredMemoryCandidate {
+	content: string;
+	source: ResultSource;
+	confidence: number;
+}
+
+export interface SessionMemory {
+	sessionId: string;
+	candidates: StoredMemoryCandidate[];
+}
+
+const STORAGE_KEY = 'llm-multiverse-memory-candidates';
+
+function loadMemory(): SvelteMap<string, StoredMemoryCandidate[]> {
+	if (typeof localStorage === 'undefined') return new SvelteMap();
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return new SvelteMap();
+		const arr: [string, StoredMemoryCandidate[]][] = JSON.parse(raw);
+		return new SvelteMap(arr);
+	} catch {
+		return new SvelteMap();
+	}
+}
+
+function saveMemory(memory: SvelteMap<string, StoredMemoryCandidate[]>) {
+	if (typeof localStorage === 'undefined') return;
+	localStorage.setItem(STORAGE_KEY, JSON.stringify([...memory.entries()]));
+}
+
+function getSampleData(): SvelteMap<string, StoredMemoryCandidate[]> {
+	const samples = new SvelteMap<string, StoredMemoryCandidate[]>();
+	samples.set('session-demo-alpha', [
+		{
+			content: 'The user prefers TypeScript strict mode with no implicit any.',
+			source: ResultSource.MODEL_KNOWLEDGE,
+			confidence: 0.92
+		},
+		{
+			content: 'Project uses SvelteKit with Tailwind CSS v4 and Svelte 5 runes.',
+			source: ResultSource.TOOL_OUTPUT,
+			confidence: 0.98
+		},
+		{
+			content: 'Preferred testing framework is Vitest with Playwright for e2e.',
+			source: ResultSource.MODEL_KNOWLEDGE,
+			confidence: 0.75
+		},
+		{
+			content: 'The gRPC backend runs on port 50051 behind a Caddy reverse proxy.',
+			source: ResultSource.TOOL_OUTPUT,
+			confidence: 0.85
+		}
+	]);
+	samples.set('session-demo-beta', [
+		{
+			content: 'User asked about deploying to Kubernetes with Helm charts.',
+			source: ResultSource.WEB,
+			confidence: 0.67
+		},
+		{
+			content: 'The container registry is at registry.example.com.',
+			source: ResultSource.TOOL_OUTPUT,
+			confidence: 0.91
+		},
+		{
+			content: 'Deployment target is a 3-node k3s cluster running on ARM64.',
+			source: ResultSource.WEB,
+			confidence: 0.58
+		}
+	]);
+	samples.set('session-demo-gamma', [
+		{
+			content: 'Database schema uses PostgreSQL with pgvector extension for embeddings.',
+			source: ResultSource.TOOL_OUTPUT,
+			confidence: 0.95
+		},
+		{
+			content: 'The embedding model is all-MiniLM-L6-v2 with 384 dimensions.',
+			source: ResultSource.MODEL_KNOWLEDGE,
+			confidence: 0.82
+		}
+	]);
+	return samples;
+}
+
+function createMemoryStore() {
+	const memory = $state<SvelteMap<string, StoredMemoryCandidate[]>>(loadMemory());
+
+	// Seed sample data if store is empty
+	if (memory.size === 0) {
+		const samples = getSampleData();
+		for (const [id, candidates] of samples) {
+			memory.set(id, candidates);
+		}
+		saveMemory(memory);
+	}
+
+	function addCandidates(sessionId: string, candidates: StoredMemoryCandidate[]) {
+		if (candidates.length === 0) return;
+		const existing = memory.get(sessionId) ?? [];
+		memory.set(sessionId, [...existing, ...candidates]);
+		saveMemory(memory);
+	}
+
+	function getAllBySession(): SessionMemory[] {
+		return [...memory.entries()]
+			.map(([sessionId, candidates]) => ({ sessionId, candidates }))
+			.sort((a, b) => a.sessionId.localeCompare(b.sessionId));
+	}
+
+	function clearSession(sessionId: string) {
+		memory.delete(sessionId);
+		saveMemory(memory);
+	}
+
+	return {
+		addCandidates,
+		getAllBySession,
+		clearSession
+	};
+}
+
+export const memoryStore = createMemoryStore();

src/routes/+page.svelte

@@ -3,6 +3,7 @@
 
 	const chatHref = resolveRoute('/chat');
 	const lineageHref = resolveRoute('/lineage');
+	const memoryHref = resolveRoute('/memory');
 </script>
 
 <h1 class="text-3xl font-bold text-center mt-8">LLM Multiverse UI</h1>
@@ -12,4 +13,6 @@
 	<a href={chatHref} class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">Chat</a>
 	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
 	<a href={lineageHref} class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Agent Lineage</a>
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
+	<a href={memoryHref} class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Memory Candidates</a>
 </nav>

src/routes/chat/+page.svelte

@@ -18,6 +18,7 @@
 	import { processRequest, OrchestratorError } from '$lib/services/orchestrator';
 	import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
 	import { sessionStore } from '$lib/stores/sessions.svelte';
+	import { memoryStore } from '$lib/stores/memory.svelte';
 
 	let messages: ChatMessage[] = $state([]);
 	let isStreaming = $state(false);
@@ -30,6 +31,7 @@
 	);
 	let showConfig = $state(false);
 	const lineageHref = resolveRoute('/lineage');
+	const memoryHref = resolveRoute('/memory');
 
 	const isNonDefaultConfig = $derived(
 		sessionConfig.overrideLevel !== OverrideLevel.NONE ||
@@ -106,6 +108,16 @@
 				}
 				if (response.finalResult) {
 					finalResult = response.finalResult;
+					if (response.finalResult.newMemoryCandidates.length > 0) {
+						memoryStore.addCandidates(
+							sessionId,
+							response.finalResult.newMemoryCandidates.map((mc) => ({
+								content: mc.content,
+								source: mc.source,
+								confidence: mc.confidence
+							}))
+						);
+					}
 				}
 				const idx = messages.length - 1;
 				messages[idx] = {
@@ -145,6 +157,12 @@
 			>
 				Lineage
 			</a>
+			<a
+				href={memoryHref}
+				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+			>
+				Memory
+			</a>
 			<!-- eslint-enable svelte/no-navigation-without-resolve -->
 			<button
 				type="button"

src/routes/memory/+page.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { resolveRoute } from '$app/paths';
+	import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
+	import MemoryCandidateCard from '$lib/components/MemoryCandidateCard.svelte';
+	import { memoryStore } from '$lib/stores/memory.svelte';
+
+	const chatHref = resolveRoute('/chat');
+
+	let sourceFilter = $state<ResultSource | 'all'>('all');
+	let confidenceThreshold = $state(0);
+
+	const allSessions = $derived(memoryStore.getAllBySession());
+
+	const filteredSessions = $derived(
+		allSessions
+			.map((session) => ({
+				...session,
+				candidates: session.candidates.filter((c) => {
+					if (sourceFilter !== 'all' && c.source !== sourceFilter) return false;
+					if (c.confidence < confidenceThreshold) return false;
+					return true;
+				})
+			}))
+			.filter((session) => session.candidates.length > 0)
+	);
+
+	const totalCandidates = $derived(
+		filteredSessions.reduce((sum, s) => sum + s.candidates.length, 0)
+	);
+
+	const sourceOptions: { value: ResultSource | 'all'; label: string }[] = [
+		{ value: 'all', label: 'All Sources' },
+		{ value: ResultSource.TOOL_OUTPUT, label: 'Tool Output' },
+		{ value: ResultSource.MODEL_KNOWLEDGE, label: 'Model Knowledge' },
+		{ value: ResultSource.WEB, label: 'Web' },
+		{ value: ResultSource.UNSPECIFIED, label: 'Unspecified' }
+	];
+</script>
+
+<div class="flex h-screen flex-col bg-gray-50">
+	<!-- Header -->
+	<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
+		<div class="flex items-center gap-4">
+			<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
+			<a
+				href={chatHref}
+				class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+			>
+				&larr; Chat
+			</a>
+			<!-- eslint-enable svelte/no-navigation-without-resolve -->
+			<h1 class="text-lg font-semibold text-gray-900">Memory Candidates</h1>
+		</div>
+		<span class="rounded-md bg-amber-50 px-2 py-1 text-xs text-amber-700">
+			Sample Data
+		</span>
+	</header>
+
+	<!-- Filters -->
+	<div class="border-b border-gray-200 bg-white px-6 py-3">
+		<div class="flex flex-wrap items-center gap-4">
+			<div class="flex items-center gap-2">
+				<label for="source-filter" class="text-xs font-medium text-gray-500">Source</label>
+				<select
+					id="source-filter"
+					bind:value={sourceFilter}
+					class="rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-sm text-gray-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
+				>
+					{#each sourceOptions as opt (opt.value)}
+						<option value={opt.value}>{opt.label}</option>
+					{/each}
+				</select>
+			</div>
+
+			<div class="flex items-center gap-2">
+				<label for="confidence-threshold" class="text-xs font-medium text-gray-500">
+					Min Confidence
+				</label>
+				<input
+					id="confidence-threshold"
+					type="range"
+					min="0"
+					max="1"
+					step="0.05"
+					bind:value={confidenceThreshold}
+					class="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 accent-blue-600"
+				/>
+				<span class="w-10 text-right text-xs font-medium text-gray-600">
+					{Math.round(confidenceThreshold * 100)}%
+				</span>
+			</div>
+
+			<span class="text-xs text-gray-400">
+				{totalCandidates} candidate{totalCandidates !== 1 ? 's' : ''}
+			</span>
+		</div>
+	</div>
+
+	<!-- Content -->
+	<main class="flex-1 overflow-auto p-6">
+		{#if filteredSessions.length === 0}
+			<div class="flex flex-col items-center justify-center py-16 text-center">
+				<div class="mb-3 text-4xl text-gray-300">&#128203;</div>
+				<p class="text-sm font-medium text-gray-500">No memory candidates found</p>
+				<p class="mt-1 text-xs text-gray-400">
+					{#if sourceFilter !== 'all' || confidenceThreshold > 0}
+						Try adjusting your filters.
+					{:else}
+						Memory candidates will appear here as they are captured from orchestration results.
+					{/if}
+				</p>
+			</div>
+		{:else}
+			<div class="space-y-6">
+				{#each filteredSessions as session (session.sessionId)}
+					<section>
+						<div class="mb-3 flex items-center gap-3">
+							<h2 class="text-sm font-semibold text-gray-900">
+								Session: <span class="font-mono text-xs text-gray-600">{session.sessionId}</span>
+							</h2>
+							<span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">
+								{session.candidates.length}
+							</span>
+						</div>
+						<div class="grid gap-3 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+							{#each session.candidates as candidate, i (session.sessionId + '-' + i)}
+								<MemoryCandidateCard {candidate} />
+							{/each}
+						</div>
+					</section>
+				{/each}
+			</div>
+		{/if}
+	</main>
+</div>

src/routes/memory/+page.ts

@@ -0,0 +1,2 @@
+export const prerender = false;
+export const ssr = false;