feat: add dark/light theme toggle with system preference support (#18)
Add theme switching with three modes (system/light/dark) using Tailwind v4 class-based dark mode. Theme preference is persisted in localStorage and defaults to the system's prefers-color-scheme. All components updated with dark: variants for consistent dark mode rendering including SVG elements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
@@ -1,8 +1,13 @@
|
||||
<script lang="ts">
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import '../app.css';
|
||||
import { themeStore } from '$lib/stores/theme.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
$effect(() => {
|
||||
themeStore.init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -10,3 +15,13 @@
|
||||
</svelte:head>
|
||||
|
||||
{@render children()}
|
||||
|
||||
<style>
|
||||
:global(.theme-transition),
|
||||
:global(.theme-transition *) {
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
border-color 0.3s ease,
|
||||
color 0.3s ease !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { resolveRoute } from '$app/paths';
|
||||
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
|
||||
|
||||
const chatHref = resolveRoute('/chat');
|
||||
const lineageHref = resolveRoute('/lineage');
|
||||
@@ -7,15 +8,20 @@
|
||||
const auditHref = resolveRoute('/audit');
|
||||
</script>
|
||||
|
||||
<h1 class="text-3xl font-bold text-center mt-8">LLM Multiverse UI</h1>
|
||||
<p class="text-center text-gray-600 mt-2">Orchestration interface</p>
|
||||
<nav class="flex justify-center gap-4 mt-6">
|
||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
|
||||
<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>
|
||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
|
||||
<a href={auditHref} class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">Audit Log</a>
|
||||
</nav>
|
||||
<div class="flex min-h-screen flex-col items-center bg-white dark:bg-gray-900">
|
||||
<div class="absolute right-4 top-4">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-center mt-8 text-gray-900 dark:text-gray-100">LLM Multiverse UI</h1>
|
||||
<p class="text-center text-gray-600 dark:text-gray-400 mt-2">Orchestration interface</p>
|
||||
<nav class="flex justify-center gap-4 mt-6">
|
||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
|
||||
<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 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">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 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">Memory Candidates</a>
|
||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
|
||||
<a href={auditHref} class="rounded-lg bg-gray-100 dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">Audit Log</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { resolveRoute } from '$app/paths';
|
||||
import AuditTimeline from '$lib/components/AuditTimeline.svelte';
|
||||
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
|
||||
import { auditStore } from '$lib/stores/audit.svelte';
|
||||
import type { AuditEventType } from '$lib/stores/audit.svelte';
|
||||
|
||||
@@ -38,30 +39,33 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="flex h-screen flex-col bg-gray-50">
|
||||
<div class="flex h-screen flex-col bg-gray-50 dark:bg-gray-900">
|
||||
<!-- Header -->
|
||||
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
|
||||
<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 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"
|
||||
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
← Chat
|
||||
</a>
|
||||
<!-- eslint-enable svelte/no-navigation-without-resolve -->
|
||||
<h1 class="text-lg font-semibold text-gray-900">Audit Log</h1>
|
||||
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Audit Log</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<span class="rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
|
||||
Sample Data
|
||||
</span>
|
||||
</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="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-6 py-3">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="session-select" class="text-xs font-medium text-gray-500">Session</label>
|
||||
<label for="session-select" class="text-xs font-medium text-gray-500 dark:text-gray-400">Session</label>
|
||||
<select
|
||||
id="session-select"
|
||||
value={selectedSessionId ?? ''}
|
||||
@@ -69,7 +73,7 @@
|
||||
const target = e.target as HTMLSelectElement;
|
||||
if (target.value) selectSession(target.value);
|
||||
}}
|
||||
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"
|
||||
class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2.5 py-1.5 text-sm text-gray-700 dark:text-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="" disabled>Select a session</option>
|
||||
{#each allSessions as session (session.sessionId)}
|
||||
@@ -82,11 +86,11 @@
|
||||
|
||||
{#if selectedSessionId}
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="type-filter" class="text-xs font-medium text-gray-500">Type</label>
|
||||
<label for="type-filter" class="text-xs font-medium text-gray-500 dark:text-gray-400">Type</label>
|
||||
<select
|
||||
id="type-filter"
|
||||
bind:value={typeFilter}
|
||||
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"
|
||||
class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2.5 py-1.5 text-sm text-gray-700 dark:text-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
{#each filterOptions as opt (opt.value)}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
@@ -94,7 +98,7 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<span class="text-xs text-gray-400">
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">
|
||||
{totalEvents} event{totalEvents !== 1 ? 's' : ''}
|
||||
</span>
|
||||
{/if}
|
||||
@@ -106,17 +110,17 @@
|
||||
{#if !selectedSessionId}
|
||||
{#if allSessions.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 audit events recorded</p>
|
||||
<p class="mt-1 text-xs text-gray-400">
|
||||
<div class="mb-3 text-4xl text-gray-300 dark:text-gray-600">📋</div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">No audit events recorded</p>
|
||||
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
||||
Events will appear here as orchestration sessions run.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<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">Select a session to view its audit log</p>
|
||||
<p class="mt-1 text-xs text-gray-400">
|
||||
<div class="mb-3 text-4xl text-gray-300 dark:text-gray-600">🔍</div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Select a session to view its audit log</p>
|
||||
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
||||
Choose a session from the dropdown above.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
import FinalResult from '$lib/components/FinalResult.svelte';
|
||||
import SessionSidebar from '$lib/components/SessionSidebar.svelte';
|
||||
import ConfigSidebar from '$lib/components/ConfigSidebar.svelte';
|
||||
import ThemeToggle from '$lib/components/ThemeToggle.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';
|
||||
@@ -153,7 +154,7 @@
|
||||
const idx = messages.length - 1;
|
||||
messages[idx] = {
|
||||
...messages[idx],
|
||||
content: `⚠ ${msg}`
|
||||
content: `\u26A0 ${msg}`
|
||||
};
|
||||
} finally {
|
||||
isStreaming = false;
|
||||
@@ -162,38 +163,39 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-screen">
|
||||
<div class="flex h-screen bg-white dark:bg-gray-900">
|
||||
<SessionSidebar onSelectSession={handleSelectSession} onNewChat={handleNewChat} />
|
||||
|
||||
<div class="flex flex-1 flex-col">
|
||||
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
|
||||
<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
|
||||
<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3">
|
||||
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Chat</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
|
||||
<a
|
||||
href={lineageHref}
|
||||
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
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"
|
||||
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
Memory
|
||||
</a>
|
||||
<a
|
||||
href={auditHref}
|
||||
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
Audit
|
||||
</a>
|
||||
<!-- eslint-enable svelte/no-navigation-without-resolve -->
|
||||
<ThemeToggle />
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showConfig = !showConfig)}
|
||||
class="flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-sm
|
||||
{showConfig ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
|
||||
{showConfig ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'}"
|
||||
>
|
||||
{#if isNonDefaultConfig}
|
||||
<span class="h-2 w-2 rounded-full bg-amber-500"></span>
|
||||
@@ -212,14 +214,14 @@
|
||||
|
||||
{#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}
|
||||
<div class="flex justify-start px-4 pb-2">
|
||||
<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]"
|
||||
<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 dark:bg-gray-700 px-4 py-2.5">
|
||||
<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400 [animation-delay:0ms]"
|
||||
></span>
|
||||
<span
|
||||
class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:150ms]"
|
||||
class="h-2 w-2 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400 [animation-delay:150ms]"
|
||||
></span>
|
||||
<span
|
||||
class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:300ms]"
|
||||
class="h-2 w-2 animate-bounce rounded-full bg-gray-500 dark:bg-gray-400 [animation-delay:300ms]"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -230,7 +232,7 @@
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="mx-4 mb-2 rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">
|
||||
<div class="mx-4 mb-2 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-2 text-sm text-red-600 dark:text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { resolveRoute } from '$app/paths';
|
||||
import { AgentType } from '$lib/proto/llm_multiverse/v1/common_pb';
|
||||
import LineageTree from '$lib/components/LineageTree.svelte';
|
||||
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
|
||||
import type { LineageNode, SimpleAgentIdentifier } from '$lib/types/lineage';
|
||||
import {
|
||||
buildLineageTree,
|
||||
@@ -30,23 +31,26 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="flex h-screen flex-col bg-gray-50">
|
||||
<div class="flex h-screen flex-col bg-gray-50 dark:bg-gray-900">
|
||||
<!-- Header -->
|
||||
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
|
||||
<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 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"
|
||||
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
← Chat
|
||||
</a>
|
||||
<!-- eslint-enable svelte/no-navigation-without-resolve -->
|
||||
<h1 class="text-lg font-semibold text-gray-900">Agent Lineage</h1>
|
||||
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Agent Lineage</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<span class="rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
|
||||
Sample Data
|
||||
</span>
|
||||
</div>
|
||||
<span class="rounded-md bg-amber-50 px-2 py-1 text-xs text-amber-700">
|
||||
Sample Data
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
@@ -55,8 +59,8 @@
|
||||
<LineageTree nodes={treeNodes} onSelectNode={handleSelectNode} />
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3">
|
||||
<span class="text-xs font-medium text-gray-500">Agent Types:</span>
|
||||
<div class="mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3">
|
||||
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent Types:</span>
|
||||
{#each agentTypeLegend as type (type)}
|
||||
{@const colors = agentTypeColor(type)}
|
||||
<span
|
||||
@@ -76,14 +80,14 @@
|
||||
{#if selectedNode}
|
||||
{@const colors = agentTypeColor(selectedNode.agentType)}
|
||||
<aside
|
||||
class="w-72 shrink-0 border-l border-gray-200 bg-white p-4 overflow-y-auto"
|
||||
class="w-72 shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 overflow-y-auto"
|
||||
>
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-sm font-semibold text-gray-900">Agent Details</h2>
|
||||
<h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Agent Details</h2>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (selectedNode = null)}
|
||||
class="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
||||
class="rounded p-1 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
aria-label="Close detail panel"
|
||||
>
|
||||
✕
|
||||
@@ -92,12 +96,12 @@
|
||||
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<p class="text-xs font-medium text-gray-500">Agent ID</p>
|
||||
<p class="mt-0.5 break-all font-mono text-sm text-gray-900">{selectedNode.id}</p>
|
||||
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent ID</p>
|
||||
<p class="mt-0.5 break-all font-mono text-sm text-gray-900 dark:text-gray-100">{selectedNode.id}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-xs font-medium text-gray-500">Agent Type</p>
|
||||
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent Type</p>
|
||||
<span
|
||||
class="mt-0.5 inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium {colors.badge}"
|
||||
>
|
||||
@@ -110,29 +114,29 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-xs font-medium text-gray-500">Spawn Depth</p>
|
||||
<p class="mt-0.5 text-sm text-gray-900">{selectedNode.spawnDepth}</p>
|
||||
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Spawn Depth</p>
|
||||
<p class="mt-0.5 text-sm text-gray-900 dark:text-gray-100">{selectedNode.spawnDepth}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-xs font-medium text-gray-500">Children</p>
|
||||
<p class="mt-0.5 text-sm text-gray-900">{selectedNode.children.length}</p>
|
||||
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Children</p>
|
||||
<p class="mt-0.5 text-sm text-gray-900 dark:text-gray-100">{selectedNode.children.length}</p>
|
||||
</div>
|
||||
|
||||
{#if selectedNode.children.length > 0}
|
||||
<div>
|
||||
<p class="text-xs font-medium text-gray-500">Child Agents</p>
|
||||
<p class="text-xs font-medium text-gray-500 dark:text-gray-400">Child Agents</p>
|
||||
<ul class="mt-1 space-y-1">
|
||||
{#each selectedNode.children as child (child.id)}
|
||||
{@const childColors = agentTypeColor(child.agentType)}
|
||||
<li
|
||||
class="flex items-center gap-2 rounded-md border border-gray-100 px-2 py-1.5"
|
||||
class="flex items-center gap-2 rounded-md border border-gray-100 dark:border-gray-700 px-2 py-1.5"
|
||||
>
|
||||
<span
|
||||
class="h-2 w-2 shrink-0 rounded-full"
|
||||
style="background-color: {childColors.stroke}"
|
||||
></span>
|
||||
<span class="truncate font-mono text-xs text-gray-700">{child.id}</span>
|
||||
<span class="truncate font-mono text-xs text-gray-700 dark:text-gray-300">{child.id}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { resolveRoute } from '$app/paths';
|
||||
import { ResultSource } from '$lib/proto/llm_multiverse/v1/common_pb';
|
||||
import MemoryCandidateCard from '$lib/components/MemoryCandidateCard.svelte';
|
||||
import ThemeToggle from '$lib/components/ThemeToggle.svelte';
|
||||
import { memoryStore } from '$lib/stores/memory.svelte';
|
||||
|
||||
const chatHref = resolveRoute('/chat');
|
||||
@@ -37,34 +38,37 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="flex h-screen flex-col bg-gray-50">
|
||||
<div class="flex h-screen flex-col bg-gray-50 dark:bg-gray-900">
|
||||
<!-- Header -->
|
||||
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
|
||||
<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 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"
|
||||
class="rounded-lg px-2.5 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
|
||||
>
|
||||
← Chat
|
||||
</a>
|
||||
<!-- eslint-enable svelte/no-navigation-without-resolve -->
|
||||
<h1 class="text-lg font-semibold text-gray-900">Memory Candidates</h1>
|
||||
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Memory Candidates</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<span class="rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
|
||||
Sample Data
|
||||
</span>
|
||||
</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="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 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>
|
||||
<label for="source-filter" class="text-xs font-medium text-gray-500 dark:text-gray-400">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"
|
||||
class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2.5 py-1.5 text-sm text-gray-700 dark:text-gray-300 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>
|
||||
@@ -73,7 +77,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="confidence-threshold" class="text-xs font-medium text-gray-500">
|
||||
<label for="confidence-threshold" class="text-xs font-medium text-gray-500 dark:text-gray-400">
|
||||
Min Confidence
|
||||
</label>
|
||||
<input
|
||||
@@ -83,14 +87,14 @@
|
||||
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"
|
||||
class="h-2 w-32 cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700 accent-blue-600"
|
||||
/>
|
||||
<span class="w-10 text-right text-xs font-medium text-gray-600">
|
||||
<span class="w-10 text-right text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{Math.round(confidenceThreshold * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="text-xs text-gray-400">
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">
|
||||
{totalCandidates} candidate{totalCandidates !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
@@ -100,9 +104,9 @@
|
||||
<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">
|
||||
<div class="mb-3 text-4xl text-gray-300 dark:text-gray-600">📋</div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">No memory candidates found</p>
|
||||
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
||||
{#if sourceFilter !== 'all' || confidenceThreshold > 0}
|
||||
Try adjusting your filters.
|
||||
{:else}
|
||||
@@ -115,10 +119,10 @@
|
||||
{#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 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
Session: <span class="font-mono text-xs text-gray-600 dark:text-gray-400">{session.sessionId}</span>
|
||||
</h2>
|
||||
<span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">
|
||||
<span class="rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400">
|
||||
{session.candidates.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user