feat: add memory candidates viewer with filtering and confidence visualization
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
135
src/routes/memory/+page.svelte
Normal file
135
src/routes/memory/+page.svelte
Normal file
@@ -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"
|
||||
>
|
||||
← 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">📋</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>
|
||||
Reference in New Issue
Block a user