mirror of
https://github.com/samvallad33/vestige.git
synced 2026-07-04 22:02:14 +02:00
feat: Vestige v2.0.0 "Cognitive Leap" — 3D dashboard, HyDE search, WebSocket events
The biggest release in Vestige history. Complete visual and cognitive overhaul. Dashboard: - SvelteKit 2 + Three.js 3D neural visualization at localhost:3927/dashboard - 7 interactive pages: Graph, Memories, Timeline, Feed, Explore, Intentions, Stats - WebSocket event bus with 16 event types, real-time 3D animations - Bloom post-processing, GPU instanced rendering, force-directed layout - Dream visualization mode, FSRS retention curves, command palette (Cmd+K) - Keyboard shortcuts, responsive mobile layout, PWA installable - Single binary deployment via include_dir! (22MB) Engine: - HyDE query expansion (intent classification + 3-5 semantic variants + centroid) - fastembed 5.11 with optional Nomic v2 MoE + Qwen3 reranker + Metal GPU - Emotional memory module (#29) - Criterion benchmark suite Backend: - Axum WebSocket at /ws with heartbeat + event broadcast - 7 new REST endpoints for cognitive operations - Event emission from MCP tools via shared broadcast channel - CORS for SvelteKit dev mode Distribution: - GitHub issue templates (bug report, feature request) - CHANGELOG with comprehensive v2.0 release notes - README updated with dashboard docs, architecture diagram, comparison table 734 tests passing, zero warnings, 22MB release binary. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Valladares
parent
26cee040a5
commit
c2d28f3433
321 changed files with 32695 additions and 4727 deletions
5
apps/dashboard/src/routes/(app)/+layout.svelte
Normal file
5
apps/dashboard/src/routes/(app)/+layout.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
{@render children()}
|
||||
231
apps/dashboard/src/routes/(app)/explore/+page.svelte
Normal file
231
apps/dashboard/src/routes/(app)/explore/+page.svelte
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
<script lang="ts">
|
||||
import { api } from '$stores/api';
|
||||
import type { Memory } from '$types';
|
||||
|
||||
let searchQuery = $state('');
|
||||
let targetQuery = $state('');
|
||||
let sourceMemory: Memory | null = $state(null);
|
||||
let targetMemory: Memory | null = $state(null);
|
||||
let associations: Record<string, unknown>[] = $state([]);
|
||||
let mode = $state<'associations' | 'chains' | 'bridges'>('associations');
|
||||
let loading = $state(false);
|
||||
let importanceText = $state('');
|
||||
let importanceResult: Record<string, unknown> | null = $state(null);
|
||||
|
||||
const MODE_INFO: Record<string, { icon: string; desc: string }> = {
|
||||
associations: { icon: '◎', desc: 'Spreading activation — find related memories via graph traversal' },
|
||||
chains: { icon: '⟿', desc: 'Build reasoning path from source to target memory' },
|
||||
bridges: { icon: '⬡', desc: 'Find connecting memories between two concepts' },
|
||||
};
|
||||
|
||||
async function findSource() {
|
||||
if (!searchQuery.trim()) return;
|
||||
loading = true;
|
||||
try {
|
||||
const res = await api.search(searchQuery, 1);
|
||||
if (res.results.length > 0) {
|
||||
sourceMemory = res.results[0];
|
||||
await explore();
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
finally { loading = false; }
|
||||
}
|
||||
|
||||
async function findTarget() {
|
||||
if (!targetQuery.trim()) return;
|
||||
loading = true;
|
||||
try {
|
||||
const res = await api.search(targetQuery, 1);
|
||||
if (res.results.length > 0) {
|
||||
targetMemory = res.results[0];
|
||||
if (sourceMemory) await explore();
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
finally { loading = false; }
|
||||
}
|
||||
|
||||
async function explore() {
|
||||
if (!sourceMemory) return;
|
||||
loading = true;
|
||||
try {
|
||||
const toId = (mode === 'chains' || mode === 'bridges') && targetMemory
|
||||
? targetMemory.id : undefined;
|
||||
const res = await api.explore(sourceMemory.id, mode, toId);
|
||||
associations = (res.results || res.nodes || res.chain || res.bridges || []) as Record<string, unknown>[];
|
||||
} catch { associations = []; }
|
||||
finally { loading = false; }
|
||||
}
|
||||
|
||||
async function scoreImportance() {
|
||||
if (!importanceText.trim()) return;
|
||||
importanceResult = await api.importance(importanceText) as unknown as Record<string, unknown>;
|
||||
}
|
||||
|
||||
function switchMode(m: typeof mode) {
|
||||
mode = m;
|
||||
if (sourceMemory) explore();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-5xl mx-auto space-y-8">
|
||||
<h1 class="text-xl text-bright font-semibold">Explore Connections</h1>
|
||||
|
||||
<!-- Mode selector -->
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
{#each (['associations', 'chains', 'bridges'] as const) as m}
|
||||
<button onclick={() => switchMode(m)}
|
||||
class="flex flex-col items-center gap-1 p-3 rounded-lg text-sm transition
|
||||
{mode === m
|
||||
? 'bg-synapse/15 text-synapse-glow border border-synapse/40'
|
||||
: 'bg-surface/30 text-dim border border-subtle/20 hover:border-subtle/40'}">
|
||||
<span class="text-xl">{MODE_INFO[m].icon}</span>
|
||||
<span class="font-medium">{m.charAt(0).toUpperCase() + m.slice(1)}</span>
|
||||
<span class="text-[10px] text-muted text-center">{MODE_INFO[m].desc}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Search for source memory -->
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs text-dim font-medium">Source Memory</label>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" placeholder="Search for a memory to explore from..."
|
||||
bind:value={searchQuery}
|
||||
onkeydown={(e) => e.key === 'Enter' && findSource()}
|
||||
class="flex-1 px-4 py-2.5 bg-surface border border-subtle/40 rounded-lg text-text text-sm
|
||||
placeholder:text-muted focus:outline-none focus:border-synapse/60 transition" />
|
||||
<button onclick={findSource}
|
||||
class="px-4 py-2.5 bg-synapse/20 border border-synapse/40 text-synapse-glow text-sm rounded-lg hover:bg-synapse/30 transition">
|
||||
Find
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if sourceMemory}
|
||||
<div class="p-3 bg-synapse/10 border border-synapse/30 rounded-lg">
|
||||
<div class="text-[10px] text-synapse-glow mb-1 uppercase tracking-wider">Source</div>
|
||||
<p class="text-sm text-text">{sourceMemory.content.slice(0, 200)}</p>
|
||||
<div class="flex gap-2 mt-1.5 text-[10px] text-muted">
|
||||
<span>{sourceMemory.nodeType}</span>
|
||||
<span>{(sourceMemory.retentionStrength * 100).toFixed(0)}% retention</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Target memory (for chains/bridges) -->
|
||||
{#if mode === 'chains' || mode === 'bridges'}
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs text-dim font-medium">Target Memory <span class="text-muted">(for {mode})</span></label>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" placeholder="Search for the target memory..."
|
||||
bind:value={targetQuery}
|
||||
onkeydown={(e) => e.key === 'Enter' && findTarget()}
|
||||
class="flex-1 px-4 py-2.5 bg-surface border border-subtle/40 rounded-lg text-text text-sm
|
||||
placeholder:text-muted focus:outline-none focus:border-dream/60 transition" />
|
||||
<button onclick={findTarget}
|
||||
class="px-4 py-2.5 bg-dream/20 border border-dream/40 text-dream-glow text-sm rounded-lg hover:bg-dream/30 transition">
|
||||
Find
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if targetMemory}
|
||||
<div class="p-3 bg-dream/10 border border-dream/30 rounded-lg">
|
||||
<div class="text-[10px] text-dream-glow mb-1 uppercase tracking-wider">Target</div>
|
||||
<p class="text-sm text-text">{targetMemory.content.slice(0, 200)}</p>
|
||||
<div class="flex gap-2 mt-1.5 text-[10px] text-muted">
|
||||
<span>{targetMemory.nodeType}</span>
|
||||
<span>{(targetMemory.retentionStrength * 100).toFixed(0)}% retention</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Results -->
|
||||
{#if sourceMemory}
|
||||
{#if loading}
|
||||
<div class="text-center py-8 text-dim">
|
||||
<div class="text-lg animate-pulse mb-2">◎</div>
|
||||
<p>Exploring {mode}...</p>
|
||||
</div>
|
||||
{:else if associations.length > 0}
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-sm text-bright font-semibold">{associations.length} Connections Found</h2>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
{#each associations as assoc, i}
|
||||
<div class="p-3 bg-surface/40 border border-subtle/20 rounded-lg flex items-start gap-3 hover:border-subtle/40 transition">
|
||||
<div class="w-6 h-6 rounded-full bg-synapse/15 text-synapse-glow text-xs flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
{i + 1}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm text-text line-clamp-2">{assoc.content}</p>
|
||||
<div class="flex flex-wrap gap-3 mt-1.5 text-xs text-muted">
|
||||
{#if assoc.nodeType}<span class="px-1.5 py-0.5 bg-deep rounded">{assoc.nodeType}</span>{/if}
|
||||
{#if assoc.score}<span>Score: {Number(assoc.score).toFixed(3)}</span>{/if}
|
||||
{#if assoc.similarity}<span>Similarity: {Number(assoc.similarity).toFixed(3)}</span>{/if}
|
||||
{#if assoc.retention}<span>{(Number(assoc.retention) * 100).toFixed(0)}% retention</span>{/if}
|
||||
{#if assoc.connectionType}<span class="text-synapse-glow">{assoc.connectionType}</span>{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-center py-8 text-dim">
|
||||
<div class="text-3xl mb-3 opacity-20">◬</div>
|
||||
<p>No connections found for this query.</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Importance Scorer -->
|
||||
<div class="pt-8 border-t border-subtle/20">
|
||||
<h2 class="text-lg text-bright font-semibold mb-4">Importance Scorer</h2>
|
||||
<p class="text-xs text-muted mb-3">4-channel neuroscience scoring: novelty, arousal, reward, attention</p>
|
||||
<textarea
|
||||
bind:value={importanceText}
|
||||
placeholder="Paste any text to score its importance..."
|
||||
class="w-full h-24 px-4 py-3 bg-surface border border-subtle/40 rounded-lg text-text text-sm
|
||||
placeholder:text-muted resize-none focus:outline-none focus:border-synapse/60 transition"
|
||||
></textarea>
|
||||
<button onclick={scoreImportance}
|
||||
class="mt-2 px-4 py-2 bg-dream/20 border border-dream/40 text-dream-glow text-sm rounded-lg hover:bg-dream/30 transition">
|
||||
Score
|
||||
</button>
|
||||
|
||||
{#if importanceResult}
|
||||
{@const channels = importanceResult.channels as Record<string, number> | undefined}
|
||||
{@const composite = Number(importanceResult.composite || importanceResult.compositeScore || 0)}
|
||||
<div class="mt-4 p-4 bg-surface/30 border border-subtle/20 rounded-lg">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<span class="text-3xl text-bright font-bold">{composite.toFixed(2)}</span>
|
||||
<span class="px-2 py-1 rounded text-xs {composite > 0.6
|
||||
? 'bg-recall/20 text-recall border border-recall/30'
|
||||
: 'bg-surface text-dim border border-subtle/30'}">
|
||||
{composite > 0.6 ? 'SAVE' : 'SKIP'}
|
||||
</span>
|
||||
</div>
|
||||
{#if channels}
|
||||
<div class="grid grid-cols-4 gap-3">
|
||||
{#each Object.entries(channels) as [channel, score]}
|
||||
<div>
|
||||
<div class="text-xs text-dim mb-1.5 capitalize">{channel}</div>
|
||||
<div class="h-2 bg-deep rounded-full overflow-hidden">
|
||||
<div class="h-full rounded-full transition-all duration-500
|
||||
{channel === 'novelty' ? 'bg-synapse' :
|
||||
channel === 'arousal' ? 'bg-dream' :
|
||||
channel === 'reward' ? 'bg-recall' : 'bg-amber-400'}"
|
||||
style="width: {score * 100}%"></div>
|
||||
</div>
|
||||
<div class="text-xs text-muted mt-1">{score.toFixed(2)}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
90
apps/dashboard/src/routes/(app)/feed/+page.svelte
Normal file
90
apps/dashboard/src/routes/(app)/feed/+page.svelte
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script lang="ts">
|
||||
import { eventFeed, websocket } from '$stores/websocket';
|
||||
import { EVENT_TYPE_COLORS, type VestigeEvent } from '$types';
|
||||
|
||||
function formatTime(ts: string): string {
|
||||
return new Date(ts).toLocaleTimeString();
|
||||
}
|
||||
|
||||
function eventIcon(type: string): string {
|
||||
const icons: Record<string, string> = {
|
||||
MemoryCreated: '+',
|
||||
MemoryUpdated: '~',
|
||||
MemoryDeleted: '×',
|
||||
MemoryPromoted: '↑',
|
||||
MemoryDemoted: '↓',
|
||||
SearchPerformed: '◎',
|
||||
DreamStarted: '◈',
|
||||
DreamProgress: '◈',
|
||||
DreamCompleted: '◈',
|
||||
ConsolidationStarted: '◉',
|
||||
ConsolidationCompleted: '◉',
|
||||
RetentionDecayed: '↘',
|
||||
ConnectionDiscovered: '━',
|
||||
ActivationSpread: '◬',
|
||||
ImportanceScored: '◫',
|
||||
Heartbeat: '♡',
|
||||
};
|
||||
return icons[type] || '·';
|
||||
}
|
||||
|
||||
function eventSummary(event: VestigeEvent): string {
|
||||
const d = event.data;
|
||||
switch (event.type) {
|
||||
case 'MemoryCreated': return `New ${d.node_type}: "${String(d.content_preview).slice(0, 60)}..."`;
|
||||
case 'SearchPerformed': return `Searched "${d.query}" → ${d.result_count} results (${d.duration_ms}ms)`;
|
||||
case 'DreamStarted': return `Dream started with ${d.memory_count} memories`;
|
||||
case 'DreamCompleted': return `Dream complete: ${d.connections_found} connections, ${d.insights_generated} insights (${d.duration_ms}ms)`;
|
||||
case 'ConsolidationStarted': return 'Consolidation cycle started';
|
||||
case 'ConsolidationCompleted': return `Consolidated ${d.nodes_processed} nodes, ${d.decay_applied} decayed (${d.duration_ms}ms)`;
|
||||
case 'ConnectionDiscovered': return `Connection: ${String(d.connection_type)} (weight: ${Number(d.weight).toFixed(2)})`;
|
||||
case 'ImportanceScored': return `Scored ${Number(d.composite_score).toFixed(2)}: "${String(d.content_preview).slice(0, 50)}..."`;
|
||||
case 'MemoryPromoted': return `Promoted → ${(Number(d.new_retention) * 100).toFixed(0)}% retention`;
|
||||
case 'MemoryDemoted': return `Demoted → ${(Number(d.new_retention) * 100).toFixed(0)}% retention`;
|
||||
default: return JSON.stringify(d).slice(0, 100);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-4xl mx-auto space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl text-bright font-semibold">Live Feed</h1>
|
||||
<div class="flex gap-3">
|
||||
<span class="text-dim text-sm">{$eventFeed.length} events</span>
|
||||
<button onclick={() => websocket.clearEvents()}
|
||||
class="text-xs text-muted hover:text-text transition">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $eventFeed.length === 0}
|
||||
<div class="text-center py-20 text-dim">
|
||||
<div class="text-4xl mb-4">◉</div>
|
||||
<p>Waiting for cognitive events...</p>
|
||||
<p class="text-sm text-muted mt-2">Events appear here in real-time as Vestige thinks.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each $eventFeed as event, i (i)}
|
||||
<div
|
||||
class="flex items-start gap-3 p-3 bg-surface/40 border border-subtle/15 rounded-lg
|
||||
hover:border-subtle/30 transition-all duration-200"
|
||||
style="border-left: 3px solid {EVENT_TYPE_COLORS[event.type] || '#6b7280'}"
|
||||
>
|
||||
<div class="w-6 h-6 rounded flex items-center justify-center text-xs flex-shrink-0"
|
||||
style="background: {EVENT_TYPE_COLORS[event.type] || '#6b7280'}20; color: {EVENT_TYPE_COLORS[event.type] || '#6b7280'}">
|
||||
{eventIcon(event.type)}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-0.5">
|
||||
<span class="text-xs font-medium" style="color: {EVENT_TYPE_COLORS[event.type] || '#6b7280'}">{event.type}</span>
|
||||
{#if event.data.timestamp}
|
||||
<span class="text-xs text-muted">{formatTime(String(event.data.timestamp))}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="text-sm text-dim">{eventSummary(event)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
230
apps/dashboard/src/routes/(app)/graph/+page.svelte
Normal file
230
apps/dashboard/src/routes/(app)/graph/+page.svelte
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import Graph3D from '$components/Graph3D.svelte';
|
||||
import RetentionCurve from '$components/RetentionCurve.svelte';
|
||||
import { api } from '$stores/api';
|
||||
import { eventFeed } from '$stores/websocket';
|
||||
import type { GraphResponse, Memory } from '$types';
|
||||
|
||||
let graphData: GraphResponse | null = $state(null);
|
||||
let selectedMemory: Memory | null = $state(null);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
let isDreaming = $state(false);
|
||||
let searchQuery = $state('');
|
||||
let maxNodes = $state(150);
|
||||
|
||||
onMount(() => loadGraph());
|
||||
|
||||
async function loadGraph(query?: string, centerId?: string) {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
graphData = await api.graph({
|
||||
max_nodes: maxNodes,
|
||||
depth: 3,
|
||||
query: query || undefined,
|
||||
center_id: centerId || undefined
|
||||
});
|
||||
} catch {
|
||||
error = 'No memories yet. Start using Vestige to populate your graph.';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function triggerDream() {
|
||||
isDreaming = true;
|
||||
try {
|
||||
await api.dream();
|
||||
await loadGraph();
|
||||
} catch { /* dream failed */ }
|
||||
finally { isDreaming = false; }
|
||||
}
|
||||
|
||||
async function onNodeSelect(nodeId: string) {
|
||||
try {
|
||||
selectedMemory = await api.memories.get(nodeId);
|
||||
} catch {
|
||||
selectedMemory = null;
|
||||
}
|
||||
}
|
||||
|
||||
function searchGraph() {
|
||||
if (searchQuery.trim()) loadGraph(searchQuery);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="h-full relative">
|
||||
{#if loading}
|
||||
<div class="h-full flex items-center justify-center">
|
||||
<div class="text-center space-y-4">
|
||||
<div class="w-16 h-16 mx-auto rounded-full border-2 border-synapse/30 border-t-synapse animate-spin"></div>
|
||||
<p class="text-dim text-sm">Loading memory graph...</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="h-full flex items-center justify-center">
|
||||
<div class="text-center space-y-4 max-w-md px-8">
|
||||
<div class="text-5xl opacity-30">◎</div>
|
||||
<h2 class="text-xl text-bright">Your Mind Awaits</h2>
|
||||
<p class="text-dim text-sm">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if graphData}
|
||||
<Graph3D
|
||||
nodes={graphData.nodes}
|
||||
edges={graphData.edges}
|
||||
centerId={graphData.center_id}
|
||||
events={$eventFeed}
|
||||
{isDreaming}
|
||||
onSelect={onNodeSelect}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Top controls bar -->
|
||||
<div class="absolute top-4 left-4 right-4 z-10 flex items-center gap-3">
|
||||
<!-- Search -->
|
||||
<div class="flex gap-2 flex-1 max-w-md">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Center graph on..."
|
||||
bind:value={searchQuery}
|
||||
onkeydown={(e) => e.key === 'Enter' && searchGraph()}
|
||||
class="flex-1 px-3 py-2 bg-abyss/80 backdrop-blur-sm border border-subtle/30 rounded-lg text-text text-sm
|
||||
placeholder:text-muted focus:outline-none focus:border-synapse/50 transition"
|
||||
/>
|
||||
<button onclick={searchGraph}
|
||||
class="px-3 py-2 bg-synapse/20 border border-synapse/40 text-synapse-glow text-sm rounded-lg hover:bg-synapse/30 transition backdrop-blur-sm">
|
||||
Focus
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 ml-auto">
|
||||
<!-- Node count -->
|
||||
<select bind:value={maxNodes} onchange={() => loadGraph()}
|
||||
class="px-2 py-2 bg-abyss/80 backdrop-blur-sm border border-subtle/30 rounded-lg text-dim text-xs">
|
||||
<option value={50}>50 nodes</option>
|
||||
<option value={100}>100 nodes</option>
|
||||
<option value={150}>150 nodes</option>
|
||||
<option value={200}>200 nodes</option>
|
||||
</select>
|
||||
|
||||
<!-- Dream button -->
|
||||
<button
|
||||
onclick={triggerDream}
|
||||
disabled={isDreaming}
|
||||
class="px-4 py-2 rounded-lg bg-dream/20 border border-dream/40 text-dream-glow text-sm
|
||||
hover:bg-dream/30 transition-all backdrop-blur-sm disabled:opacity-50
|
||||
{isDreaming ? 'glow-dream animate-pulse-glow' : ''}"
|
||||
>
|
||||
{isDreaming ? '◈ Dreaming...' : '◈ Dream'}
|
||||
</button>
|
||||
|
||||
<!-- Reload -->
|
||||
<button onclick={() => loadGraph()}
|
||||
class="px-3 py-2 bg-abyss/80 backdrop-blur-sm border border-subtle/30 rounded-lg text-dim text-sm hover:text-text transition">
|
||||
↻
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom stats -->
|
||||
<div class="absolute bottom-4 left-4 z-10 text-xs text-dim backdrop-blur-sm bg-abyss/60 rounded-lg px-3 py-2 border border-subtle/20">
|
||||
{#if graphData}
|
||||
<span>{graphData.nodeCount} nodes</span>
|
||||
<span class="mx-2 text-subtle">·</span>
|
||||
<span>{graphData.edgeCount} edges</span>
|
||||
<span class="mx-2 text-subtle">·</span>
|
||||
<span>depth {graphData.depth}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Selected memory panel -->
|
||||
{#if selectedMemory}
|
||||
<div class="absolute right-0 top-0 h-full w-96 bg-abyss/95 backdrop-blur-xl border-l border-subtle/30 p-6 overflow-y-auto z-20
|
||||
transition-transform duration-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="text-bright text-sm font-semibold">Memory Detail</h3>
|
||||
<button onclick={() => selectedMemory = null} class="text-dim hover:text-text text-lg leading-none">×</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<span class="px-2 py-0.5 rounded text-xs bg-synapse/20 text-synapse-glow">{selectedMemory.nodeType}</span>
|
||||
{#each selectedMemory.tags as tag}
|
||||
<span class="px-2 py-0.5 rounded text-xs bg-surface text-dim">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-text leading-relaxed whitespace-pre-wrap max-h-64 overflow-y-auto">{selectedMemory.content}</div>
|
||||
|
||||
<!-- FSRS bars -->
|
||||
<div class="space-y-2">
|
||||
{#each [
|
||||
{ label: 'Retention', value: selectedMemory.retentionStrength },
|
||||
{ label: 'Storage', value: selectedMemory.storageStrength },
|
||||
{ label: 'Retrieval', value: selectedMemory.retrievalStrength }
|
||||
] as bar}
|
||||
<div>
|
||||
<div class="flex justify-between text-xs text-dim mb-0.5">
|
||||
<span>{bar.label}</span>
|
||||
<span>{(bar.value * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
<div class="h-1.5 bg-surface rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full rounded-full transition-all duration-500"
|
||||
style="width: {bar.value * 100}%; background: {
|
||||
bar.value > 0.7 ? '#10b981' :
|
||||
bar.value > 0.4 ? '#f59e0b' : '#ef4444'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- FSRS Decay Curve -->
|
||||
<div>
|
||||
<div class="text-xs text-dim mb-1 font-medium">Retention Forecast</div>
|
||||
<RetentionCurve
|
||||
retention={selectedMemory.retentionStrength}
|
||||
stability={selectedMemory.storageStrength * 30}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-muted space-y-1">
|
||||
<div>Created: {new Date(selectedMemory.createdAt).toLocaleString()}</div>
|
||||
<div>Updated: {new Date(selectedMemory.updatedAt).toLocaleString()}</div>
|
||||
{#if selectedMemory.lastAccessedAt}
|
||||
<div>Accessed: {new Date(selectedMemory.lastAccessedAt).toLocaleString()}</div>
|
||||
{/if}
|
||||
<div>Reviews: {selectedMemory.reviewCount ?? 0}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-2">
|
||||
<button
|
||||
onclick={() => { if (selectedMemory) { api.memories.promote(selectedMemory.id); } }}
|
||||
class="flex-1 px-3 py-2 rounded bg-recall/20 text-recall text-xs hover:bg-recall/30 transition"
|
||||
>
|
||||
↑ Promote
|
||||
</button>
|
||||
<button
|
||||
onclick={() => { if (selectedMemory) { api.memories.demote(selectedMemory.id); } }}
|
||||
class="flex-1 px-3 py-2 rounded bg-decay/20 text-decay text-xs hover:bg-decay/30 transition"
|
||||
>
|
||||
↓ Demote
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Explore from this node -->
|
||||
<a
|
||||
href="/explore"
|
||||
class="block text-center px-3 py-2 rounded bg-dream/10 text-dream-glow text-xs hover:bg-dream/20 transition border border-dream/20"
|
||||
>
|
||||
◬ Explore Connections
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
184
apps/dashboard/src/routes/(app)/intentions/+page.svelte
Normal file
184
apps/dashboard/src/routes/(app)/intentions/+page.svelte
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$stores/api';
|
||||
import type { IntentionItem } from '$types';
|
||||
|
||||
let intentions: IntentionItem[] = $state([]);
|
||||
let predictions: Record<string, unknown>[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let statusFilter = $state('active');
|
||||
|
||||
const STATUS_COLORS: Record<string, string> = {
|
||||
active: 'text-synapse-glow bg-synapse/10 border-synapse/30',
|
||||
fulfilled: 'text-recall bg-recall/10 border-recall/30',
|
||||
cancelled: 'text-dim bg-surface border-subtle/30',
|
||||
snoozed: 'text-dream-glow bg-dream/10 border-dream/30',
|
||||
};
|
||||
|
||||
const PRIORITY_COLORS: Record<string, string> = {
|
||||
critical: 'text-decay',
|
||||
high: 'text-amber-400',
|
||||
normal: 'text-dim',
|
||||
low: 'text-muted',
|
||||
};
|
||||
|
||||
const TRIGGER_ICONS: Record<string, string> = {
|
||||
time: '⏰',
|
||||
context: '◎',
|
||||
event: '⚡',
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await loadData();
|
||||
});
|
||||
|
||||
async function loadData() {
|
||||
loading = true;
|
||||
try {
|
||||
const [intRes, predRes] = await Promise.all([
|
||||
api.intentions(statusFilter),
|
||||
api.predict()
|
||||
]);
|
||||
intentions = intRes.intentions || [];
|
||||
predictions = (predRes.predictions || []) as Record<string, unknown>[];
|
||||
} catch { /* ignore */ }
|
||||
finally { loading = false; }
|
||||
}
|
||||
|
||||
async function changeFilter(status: string) {
|
||||
statusFilter = status;
|
||||
await loadData();
|
||||
}
|
||||
|
||||
function formatDate(d: string | undefined): string {
|
||||
if (!d) return '';
|
||||
try {
|
||||
return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
|
||||
} catch { return d; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-5xl mx-auto space-y-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl text-bright font-semibold">Intentions & Predictions</h1>
|
||||
<span class="text-xs text-muted">{intentions.length} intentions</span>
|
||||
</div>
|
||||
|
||||
<!-- Intentions Section -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-sm text-bright font-semibold">Prospective Memory</h2>
|
||||
<span class="text-xs text-muted">"Remember to do X when Y happens"</span>
|
||||
</div>
|
||||
|
||||
<!-- Status filter tabs -->
|
||||
<div class="flex gap-1.5">
|
||||
{#each ['active', 'fulfilled', 'snoozed', 'cancelled', 'all'] as status}
|
||||
<button
|
||||
onclick={() => changeFilter(status)}
|
||||
class="px-3 py-1.5 rounded-lg text-xs transition {statusFilter === status
|
||||
? 'bg-synapse/20 text-synapse-glow border border-synapse/40'
|
||||
: 'bg-surface/40 text-dim border border-subtle/20 hover:border-subtle/40'}"
|
||||
>
|
||||
{status.charAt(0).toUpperCase() + status.slice(1)}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="space-y-2">
|
||||
{#each Array(4) as _}
|
||||
<div class="h-16 bg-surface/50 rounded-lg animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if intentions.length === 0}
|
||||
<div class="text-center py-12 text-dim">
|
||||
<div class="text-4xl mb-3 opacity-20">◇</div>
|
||||
<p>No {statusFilter === 'all' ? '' : statusFilter + ' '}intentions.</p>
|
||||
<p class="text-xs text-muted mt-1">Use "Remind me..." in conversation to create intentions.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each intentions as intention}
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg">
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Trigger icon -->
|
||||
<div class="w-8 h-8 rounded-lg bg-deep flex items-center justify-center text-lg flex-shrink-0">
|
||||
{TRIGGER_ICONS[intention.trigger_type] || '◇'}
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm text-text">{intention.content}</p>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<!-- Status badge -->
|
||||
<span class="px-2 py-0.5 text-[10px] rounded border {STATUS_COLORS[intention.status] || 'text-dim bg-surface border-subtle/30'}">
|
||||
{intention.status}
|
||||
</span>
|
||||
<!-- Priority -->
|
||||
<span class="text-[10px] {PRIORITY_COLORS[intention.priority] || 'text-muted'}">
|
||||
{intention.priority} priority
|
||||
</span>
|
||||
<!-- Trigger -->
|
||||
<span class="text-[10px] text-muted">
|
||||
{intention.trigger_type}: {intention.trigger_value.length > 40
|
||||
? intention.trigger_value.slice(0, 37) + '...'
|
||||
: intention.trigger_value}
|
||||
</span>
|
||||
{#if intention.deadline}
|
||||
<span class="text-[10px] text-dream-glow">
|
||||
deadline: {formatDate(intention.deadline)}
|
||||
</span>
|
||||
{/if}
|
||||
{#if intention.snoozed_until}
|
||||
<span class="text-[10px] text-muted">
|
||||
snoozed until {formatDate(intention.snoozed_until)}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="text-[10px] text-muted flex-shrink-0">{formatDate(intention.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Predictions Section -->
|
||||
<div class="pt-6 border-t border-subtle/20 space-y-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="text-sm text-bright font-semibold">Predicted Needs</h2>
|
||||
<span class="text-xs text-muted">What you might need next</span>
|
||||
</div>
|
||||
|
||||
{#if predictions.length === 0}
|
||||
<div class="text-center py-8 text-dim">
|
||||
<div class="text-3xl mb-3 opacity-20">◬</div>
|
||||
<p class="text-sm">No predictions yet. Use Vestige more to train the predictive model.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each predictions as pred, i}
|
||||
<div class="p-3 bg-surface/40 border border-subtle/20 rounded-lg flex items-start gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-dream/20 text-dream-glow text-xs flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
{i + 1}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm text-text line-clamp-2">{pred.content}</p>
|
||||
<div class="flex gap-3 mt-1 text-xs text-muted">
|
||||
<span>{pred.nodeType}</span>
|
||||
{#if pred.retention}
|
||||
<span>{(Number(pred.retention) * 100).toFixed(0)}% retention</span>
|
||||
{/if}
|
||||
{#if pred.predictedNeed}
|
||||
<span class="text-dream-glow">{pred.predictedNeed} need</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
140
apps/dashboard/src/routes/(app)/memories/+page.svelte
Normal file
140
apps/dashboard/src/routes/(app)/memories/+page.svelte
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$stores/api';
|
||||
import type { Memory } from '$types';
|
||||
import { NODE_TYPE_COLORS } from '$types';
|
||||
|
||||
let memories: Memory[] = $state([]);
|
||||
let searchQuery = $state('');
|
||||
let selectedType = $state('');
|
||||
let selectedTag = $state('');
|
||||
let minRetention = $state(0);
|
||||
let loading = $state(true);
|
||||
let selectedMemory: Memory | null = $state(null);
|
||||
let debounceTimer: ReturnType<typeof setTimeout>;
|
||||
|
||||
onMount(() => loadMemories());
|
||||
|
||||
async function loadMemories() {
|
||||
loading = true;
|
||||
try {
|
||||
const params: Record<string, string> = {};
|
||||
if (searchQuery) params.q = searchQuery;
|
||||
if (selectedType) params.node_type = selectedType;
|
||||
if (selectedTag) params.tag = selectedTag;
|
||||
if (minRetention > 0) params.min_retention = String(minRetention);
|
||||
const res = await api.memories.list(params);
|
||||
memories = res.memories;
|
||||
} catch {
|
||||
memories = [];
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(loadMemories, 300);
|
||||
}
|
||||
|
||||
function retentionColor(r: number): string {
|
||||
if (r > 0.7) return '#10b981';
|
||||
if (r > 0.4) return '#f59e0b';
|
||||
return '#ef4444';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-6xl mx-auto space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl text-bright font-semibold">Memories</h1>
|
||||
<span class="text-dim text-sm">{memories.length} results</span>
|
||||
</div>
|
||||
|
||||
<!-- Search & Filters -->
|
||||
<div class="flex gap-3 flex-wrap">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search memories..."
|
||||
bind:value={searchQuery}
|
||||
oninput={onSearch}
|
||||
class="flex-1 min-w-64 px-4 py-2.5 bg-surface border border-subtle/40 rounded-lg text-text text-sm
|
||||
placeholder:text-muted focus:outline-none focus:border-synapse/60 focus:ring-1 focus:ring-synapse/30 transition"
|
||||
/>
|
||||
<select bind:value={selectedType} onchange={loadMemories}
|
||||
class="px-3 py-2.5 bg-surface border border-subtle/40 rounded-lg text-dim text-sm focus:outline-none">
|
||||
<option value="">All types</option>
|
||||
<option value="fact">Fact</option>
|
||||
<option value="concept">Concept</option>
|
||||
<option value="event">Event</option>
|
||||
<option value="person">Person</option>
|
||||
<option value="place">Place</option>
|
||||
<option value="note">Note</option>
|
||||
<option value="pattern">Pattern</option>
|
||||
<option value="decision">Decision</option>
|
||||
</select>
|
||||
<div class="flex items-center gap-2 text-xs text-dim">
|
||||
<span>Min retention:</span>
|
||||
<input type="range" min="0" max="1" step="0.1" bind:value={minRetention} onchange={loadMemories}
|
||||
class="w-24 accent-synapse" />
|
||||
<span>{(minRetention * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory grid -->
|
||||
{#if loading}
|
||||
<div class="grid gap-3">
|
||||
{#each Array(8) as _}
|
||||
<div class="h-24 bg-surface/50 rounded-lg animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid gap-3">
|
||||
{#each memories as memory (memory.id)}
|
||||
<button
|
||||
onclick={() => selectedMemory = selectedMemory?.id === memory.id ? null : memory}
|
||||
class="text-left p-4 bg-surface/50 border border-subtle/20 rounded-lg hover:border-synapse/30
|
||||
hover:bg-surface transition-all duration-200 group
|
||||
{selectedMemory?.id === memory.id ? 'border-synapse/50 glow-synapse' : ''}"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="w-2 h-2 rounded-full" style="background: {NODE_TYPE_COLORS[memory.nodeType] || '#6b7280'}"></span>
|
||||
<span class="text-xs text-dim">{memory.nodeType}</span>
|
||||
{#each memory.tags.slice(0, 3) as tag}
|
||||
<span class="text-xs px-1.5 py-0.5 bg-deep rounded text-muted">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<p class="text-sm text-text leading-relaxed line-clamp-2">{memory.content}</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1 flex-shrink-0">
|
||||
<div class="w-12 h-1.5 bg-deep rounded-full overflow-hidden">
|
||||
<div class="h-full rounded-full" style="width: {memory.retentionStrength * 100}%; background: {retentionColor(memory.retentionStrength)}"></div>
|
||||
</div>
|
||||
<span class="text-xs text-muted">{(memory.retentionStrength * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if selectedMemory?.id === memory.id}
|
||||
<div class="mt-4 pt-4 border-t border-subtle/20 space-y-3">
|
||||
<p class="text-sm text-text whitespace-pre-wrap">{memory.content}</p>
|
||||
<div class="grid grid-cols-3 gap-3 text-xs text-dim">
|
||||
<div>Storage: {(memory.storageStrength * 100).toFixed(1)}%</div>
|
||||
<div>Retrieval: {(memory.retrievalStrength * 100).toFixed(1)}%</div>
|
||||
<div>Created: {new Date(memory.createdAt).toLocaleDateString()}</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button onclick={(e) => { e.stopPropagation(); api.memories.promote(memory.id); }}
|
||||
class="px-3 py-1.5 bg-recall/20 text-recall text-xs rounded hover:bg-recall/30">Promote</button>
|
||||
<button onclick={(e) => { e.stopPropagation(); api.memories.demote(memory.id); }}
|
||||
class="px-3 py-1.5 bg-decay/20 text-decay text-xs rounded hover:bg-decay/30">Demote</button>
|
||||
<button onclick={(e) => { e.stopPropagation(); api.memories.delete(memory.id); loadMemories(); }}
|
||||
class="px-3 py-1.5 bg-decay/10 text-decay/60 text-xs rounded hover:bg-decay/20 ml-auto">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
259
apps/dashboard/src/routes/(app)/settings/+page.svelte
Normal file
259
apps/dashboard/src/routes/(app)/settings/+page.svelte
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
<script lang="ts">
|
||||
import { api } from '$stores/api';
|
||||
import { isConnected, memoryCount, avgRetention } from '$stores/websocket';
|
||||
|
||||
// Operation states
|
||||
let consolidating = $state(false);
|
||||
let dreaming = $state(false);
|
||||
let consolidationResult = $state<Record<string, unknown> | null>(null);
|
||||
let dreamResult = $state<Record<string, unknown> | null>(null);
|
||||
|
||||
// Stats
|
||||
let stats = $state<Record<string, unknown> | null>(null);
|
||||
let retentionDist = $state<Record<string, unknown> | null>(null);
|
||||
let loadingStats = $state(true);
|
||||
|
||||
// Health
|
||||
let health = $state<Record<string, unknown> | null>(null);
|
||||
|
||||
$effect(() => {
|
||||
loadAllData();
|
||||
});
|
||||
|
||||
async function loadAllData() {
|
||||
loadingStats = true;
|
||||
try {
|
||||
const [s, h, r] = await Promise.all([
|
||||
api.stats().catch(() => null),
|
||||
api.health().catch(() => null),
|
||||
api.retentionDistribution().catch(() => null),
|
||||
]);
|
||||
stats = s as Record<string, unknown> | null;
|
||||
health = h as Record<string, unknown> | null;
|
||||
retentionDist = r as Record<string, unknown> | null;
|
||||
} finally {
|
||||
loadingStats = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function runConsolidation() {
|
||||
consolidating = true;
|
||||
consolidationResult = null;
|
||||
try {
|
||||
consolidationResult = await api.consolidate() as unknown as Record<string, unknown>;
|
||||
await loadAllData();
|
||||
} catch { /* ignore */ }
|
||||
finally { consolidating = false; }
|
||||
}
|
||||
|
||||
async function runDream() {
|
||||
dreaming = true;
|
||||
dreamResult = null;
|
||||
try {
|
||||
dreamResult = await api.dream() as unknown as Record<string, unknown>;
|
||||
await loadAllData();
|
||||
} catch { /* ignore */ }
|
||||
finally { dreaming = false; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-4xl mx-auto space-y-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl text-bright font-semibold">Settings & System</h1>
|
||||
<button onclick={loadAllData} class="text-xs text-dim hover:text-text transition">Refresh</button>
|
||||
</div>
|
||||
|
||||
<!-- System Health Overview -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg text-center">
|
||||
<div class="text-2xl text-bright font-bold">{$memoryCount}</div>
|
||||
<div class="text-xs text-dim mt-1">Memories</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg text-center">
|
||||
<div class="text-2xl font-bold" style="color: {$avgRetention > 0.7 ? '#10b981' : $avgRetention > 0.4 ? '#f59e0b' : '#ef4444'}">{($avgRetention * 100).toFixed(1)}%</div>
|
||||
<div class="text-xs text-dim mt-1">Avg Retention</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg text-center">
|
||||
<div class="text-2xl text-bright font-bold flex items-center justify-center gap-2">
|
||||
<div class="w-2.5 h-2.5 rounded-full {$isConnected ? 'bg-recall animate-pulse-glow' : 'bg-decay'}"></div>
|
||||
<span class="text-sm">{$isConnected ? 'Online' : 'Offline'}</span>
|
||||
</div>
|
||||
<div class="text-xs text-dim mt-1">WebSocket</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg text-center">
|
||||
<div class="text-2xl text-synapse-glow font-bold">v2.0</div>
|
||||
<div class="text-xs text-dim mt-1">Vestige</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cognitive Operations -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
|
||||
<span class="text-dream">◈</span> Cognitive Operations
|
||||
</h2>
|
||||
|
||||
<!-- Consolidation -->
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-sm text-text font-medium">FSRS-6 Consolidation</div>
|
||||
<div class="text-xs text-dim">Apply spaced-repetition decay, regenerate embeddings, run maintenance</div>
|
||||
</div>
|
||||
<button onclick={runConsolidation} disabled={consolidating}
|
||||
class="px-4 py-2 bg-warning/20 border border-warning/40 text-warning text-sm rounded-lg hover:bg-warning/30 transition disabled:opacity-50 flex items-center gap-2">
|
||||
{#if consolidating}
|
||||
<span class="w-3 h-3 border border-warning/50 border-t-warning rounded-full animate-spin"></span>
|
||||
Running...
|
||||
{:else}
|
||||
Consolidate
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{#if consolidationResult}
|
||||
<div class="bg-deep/50 p-3 rounded-lg border border-subtle/10">
|
||||
<div class="grid grid-cols-3 gap-3 text-center">
|
||||
{#if consolidationResult.processed !== undefined}
|
||||
<div>
|
||||
<div class="text-lg text-text font-semibold">{consolidationResult.processed}</div>
|
||||
<div class="text-[10px] text-muted">Processed</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if consolidationResult.decayed !== undefined}
|
||||
<div>
|
||||
<div class="text-lg text-decay font-semibold">{consolidationResult.decayed}</div>
|
||||
<div class="text-[10px] text-muted">Decayed</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if consolidationResult.embedded !== undefined}
|
||||
<div>
|
||||
<div class="text-lg text-synapse-glow font-semibold">{consolidationResult.embedded}</div>
|
||||
<div class="text-[10px] text-muted">Embedded</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Dream -->
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-sm text-text font-medium">Memory Dream Cycle</div>
|
||||
<div class="text-xs text-dim">Replay memories, discover hidden connections, synthesize insights</div>
|
||||
</div>
|
||||
<button onclick={runDream} disabled={dreaming}
|
||||
class="px-4 py-2 bg-dream/20 border border-dream/40 text-dream-glow text-sm rounded-lg hover:bg-dream/30 transition disabled:opacity-50 flex items-center gap-2
|
||||
{dreaming ? 'glow-dream animate-pulse-glow' : ''}">
|
||||
{#if dreaming}
|
||||
<span class="w-3 h-3 border border-dream/50 border-t-dream rounded-full animate-spin"></span>
|
||||
Dreaming...
|
||||
{:else}
|
||||
Dream
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{#if dreamResult}
|
||||
<div class="bg-deep/50 p-3 rounded-lg border border-subtle/10 space-y-2">
|
||||
{#if dreamResult.insights && Array.isArray(dreamResult.insights)}
|
||||
<div class="text-xs text-bright font-medium">Insights Discovered:</div>
|
||||
{#each dreamResult.insights as insight}
|
||||
<div class="text-xs text-dim bg-dream/5 border border-dream/10 rounded p-2">
|
||||
{typeof insight === 'string' ? insight : JSON.stringify(insight)}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if dreamResult.connections_found !== undefined}
|
||||
<div class="text-xs text-dim">Connections found: <span class="text-dream-glow">{dreamResult.connections_found}</span></div>
|
||||
{/if}
|
||||
{#if dreamResult.memories_replayed !== undefined}
|
||||
<div class="text-xs text-dim">Memories replayed: <span class="text-text">{dreamResult.memories_replayed}</span></div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Retention Distribution -->
|
||||
{#if retentionDist}
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
|
||||
<span class="text-recall">◫</span> Retention Distribution
|
||||
</h2>
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg">
|
||||
{#if retentionDist.buckets && Array.isArray(retentionDist.buckets)}
|
||||
<div class="flex items-end gap-1 h-32">
|
||||
{#each retentionDist.buckets as bucket, i}
|
||||
{@const maxCount = Math.max(...(retentionDist.buckets as {count: number}[]).map((b: {count: number}) => b.count), 1)}
|
||||
{@const height = ((bucket as {count: number}).count / maxCount) * 100}
|
||||
{@const color = i < 2 ? '#ef4444' : i < 4 ? '#f59e0b' : i < 7 ? '#6366f1' : '#10b981'}
|
||||
<div class="flex-1 flex flex-col items-center gap-1">
|
||||
<div class="text-[9px] text-muted">{(bucket as {count: number}).count}</div>
|
||||
<div
|
||||
class="w-full rounded-t transition-all duration-500"
|
||||
style="height: {Math.max(height, 2)}%; background: {color}; opacity: 0.7"
|
||||
></div>
|
||||
<div class="text-[9px] text-muted">{i * 10}%</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Keyboard Shortcuts -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
|
||||
<span class="text-synapse">⌨</span> Keyboard Shortcuts
|
||||
</h2>
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg">
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
{#each [
|
||||
{ key: '⌘ K', desc: 'Command palette' },
|
||||
{ key: '/', desc: 'Focus search' },
|
||||
{ key: 'G', desc: 'Go to Graph' },
|
||||
{ key: 'M', desc: 'Go to Memories' },
|
||||
{ key: 'T', desc: 'Go to Timeline' },
|
||||
{ key: 'F', desc: 'Go to Feed' },
|
||||
{ key: 'E', desc: 'Go to Explore' },
|
||||
{ key: 'S', desc: 'Go to Stats' },
|
||||
] as shortcut}
|
||||
<div class="flex items-center gap-2 py-1">
|
||||
<kbd class="px-1.5 py-0.5 bg-deep rounded text-[10px] font-mono text-muted min-w-[2rem] text-center">{shortcut.key}</kbd>
|
||||
<span class="text-dim">{shortcut.desc}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-sm text-bright font-semibold flex items-center gap-2">
|
||||
<span class="text-memory">◎</span> About
|
||||
</h2>
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg space-y-3">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-dream to-synapse flex items-center justify-center text-bright text-xl font-bold shadow-lg shadow-synapse/20">
|
||||
V
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-bright font-semibold">Vestige v2.0 "Cognitive Leap"</div>
|
||||
<div class="text-xs text-dim">Your AI's long-term memory system</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2 text-xs text-dim pt-2 border-t border-subtle/10">
|
||||
<div>29 cognitive modules</div>
|
||||
<div>FSRS-6 spaced repetition</div>
|
||||
<div>Nomic Embed v1.5 (256d)</div>
|
||||
<div>Jina Reranker v1 Turbo</div>
|
||||
<div>USearch HNSW (20x FAISS)</div>
|
||||
<div>Local-first, zero cloud</div>
|
||||
</div>
|
||||
<div class="text-[10px] text-muted pt-1">
|
||||
Built with Rust + Axum + SvelteKit 2 + Svelte 5 + Three.js + Tailwind CSS 4
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
129
apps/dashboard/src/routes/(app)/stats/+page.svelte
Normal file
129
apps/dashboard/src/routes/(app)/stats/+page.svelte
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$stores/api';
|
||||
import type { SystemStats, HealthCheck, RetentionDistribution } from '$types';
|
||||
|
||||
let stats: SystemStats | null = $state(null);
|
||||
let health: HealthCheck | null = $state(null);
|
||||
let retention: RetentionDistribution | null = $state(null);
|
||||
let loading = $state(true);
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
[stats, health, retention] = await Promise.all([
|
||||
api.stats(),
|
||||
api.health(),
|
||||
api.retentionDistribution()
|
||||
]);
|
||||
} catch {
|
||||
// API not available
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
function statusColor(status: string): string {
|
||||
return { healthy: '#10b981', degraded: '#f59e0b', critical: '#ef4444', empty: '#6b7280' }[status] || '#6b7280';
|
||||
}
|
||||
|
||||
async function runConsolidation() {
|
||||
try { await api.consolidate(); } catch { /* ignore */ }
|
||||
// Refresh
|
||||
[stats, health, retention] = await Promise.all([api.stats(), api.health(), api.retentionDistribution()]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-5xl mx-auto space-y-6">
|
||||
<h1 class="text-xl text-bright font-semibold">System Stats</h1>
|
||||
|
||||
{#if loading}
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{#each Array(8) as _}
|
||||
<div class="h-24 bg-surface/50 rounded-lg animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if stats && health}
|
||||
<!-- Status banner -->
|
||||
<div class="flex items-center gap-3 p-4 rounded-lg border" style="border-color: {statusColor(health.status)}40; background: {statusColor(health.status)}10">
|
||||
<div class="w-3 h-3 rounded-full animate-pulse-glow" style="background: {statusColor(health.status)}"></div>
|
||||
<span class="text-sm font-medium" style="color: {statusColor(health.status)}">{health.status.toUpperCase()}</span>
|
||||
<span class="text-xs text-dim">v{health.version}</span>
|
||||
</div>
|
||||
|
||||
<!-- Key metrics -->
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="p-4 bg-surface/50 border border-subtle/20 rounded-lg">
|
||||
<div class="text-2xl text-bright font-bold">{stats.totalMemories}</div>
|
||||
<div class="text-xs text-dim mt-1">Total Memories</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface/50 border border-subtle/20 rounded-lg">
|
||||
<div class="text-2xl font-bold" style="color: {stats.averageRetention > 0.7 ? '#10b981' : stats.averageRetention > 0.4 ? '#f59e0b' : '#ef4444'}">{(stats.averageRetention * 100).toFixed(1)}%</div>
|
||||
<div class="text-xs text-dim mt-1">Avg Retention</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface/50 border border-subtle/20 rounded-lg">
|
||||
<div class="text-2xl text-bright font-bold">{stats.dueForReview}</div>
|
||||
<div class="text-xs text-dim mt-1">Due for Review</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface/50 border border-subtle/20 rounded-lg">
|
||||
<div class="text-2xl text-bright font-bold">{stats.embeddingCoverage.toFixed(0)}%</div>
|
||||
<div class="text-xs text-dim mt-1">Embedding Coverage</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Retention Distribution -->
|
||||
{#if retention}
|
||||
<div class="p-6 bg-surface/30 border border-subtle/20 rounded-lg">
|
||||
<h2 class="text-sm text-bright font-semibold mb-4">Retention Distribution</h2>
|
||||
<div class="flex items-end gap-1 h-40">
|
||||
{#each retention.distribution as bucket, i}
|
||||
{@const maxCount = Math.max(...retention.distribution.map(b => b.count), 1)}
|
||||
{@const height = (bucket.count / maxCount) * 100}
|
||||
{@const color = i < 3 ? '#ef4444' : i < 5 ? '#f59e0b' : i < 7 ? '#10b981' : '#6366f1'}
|
||||
<div class="flex-1 flex flex-col items-center gap-1">
|
||||
<span class="text-xs text-dim">{bucket.count}</span>
|
||||
<div class="w-full rounded-t transition-all duration-500" style="height: {height}%; background: {color}; opacity: 0.7; min-height: 2px"></div>
|
||||
<span class="text-xs text-muted">{bucket.range}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Type breakdown -->
|
||||
<div class="p-6 bg-surface/30 border border-subtle/20 rounded-lg">
|
||||
<h2 class="text-sm text-bright font-semibold mb-4">Memory Types</h2>
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{#each Object.entries(retention.byType) as [type, count]}
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<div class="w-3 h-3 rounded-full" style="background: {({'fact':'#3b82f6','concept':'#8b5cf6','event':'#f59e0b','person':'#10b981','note':'#6b7280','pattern':'#ec4899','decision':'#ef4444'})[type] || '#6b7280'}"></div>
|
||||
<span class="text-dim">{type}</span>
|
||||
<span class="text-muted ml-auto">{count}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Endangered memories -->
|
||||
{#if retention.endangered.length > 0}
|
||||
<div class="p-6 bg-decay/5 border border-decay/20 rounded-lg">
|
||||
<h2 class="text-sm text-decay font-semibold mb-3">Endangered Memories ({retention.endangered.length})</h2>
|
||||
<div class="space-y-2 max-h-48 overflow-y-auto">
|
||||
{#each retention.endangered.slice(0, 20) as m}
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-xs text-decay">{(m.retentionStrength * 100).toFixed(0)}%</span>
|
||||
<span class="text-dim truncate">{m.content}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-3">
|
||||
<button onclick={runConsolidation}
|
||||
class="px-4 py-2 bg-warning/20 border border-warning/40 text-warning text-sm rounded-lg hover:bg-warning/30 transition">
|
||||
Run Consolidation
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
99
apps/dashboard/src/routes/(app)/timeline/+page.svelte
Normal file
99
apps/dashboard/src/routes/(app)/timeline/+page.svelte
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$stores/api';
|
||||
import type { TimelineDay } from '$types';
|
||||
import { NODE_TYPE_COLORS } from '$types';
|
||||
|
||||
let timeline: TimelineDay[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let days = $state(14);
|
||||
let expandedDay: string | null = $state(null);
|
||||
|
||||
onMount(() => loadTimeline());
|
||||
|
||||
async function loadTimeline() {
|
||||
loading = true;
|
||||
try {
|
||||
const res = await api.timeline(days, 500);
|
||||
timeline = res.timeline;
|
||||
} catch {
|
||||
timeline = [];
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-6 max-w-4xl mx-auto space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl text-bright font-semibold">Timeline</h1>
|
||||
<select bind:value={days} onchange={loadTimeline}
|
||||
class="px-3 py-2 bg-surface border border-subtle/40 rounded-lg text-dim text-sm">
|
||||
<option value={7}>7 days</option>
|
||||
<option value={14}>14 days</option>
|
||||
<option value={30}>30 days</option>
|
||||
<option value={90}>90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="space-y-4">
|
||||
{#each Array(7) as _}
|
||||
<div class="h-16 bg-surface/50 rounded-lg animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if timeline.length === 0}
|
||||
<div class="text-center py-20 text-dim">
|
||||
<p>No memories in the selected time range.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="relative">
|
||||
<!-- Timeline line -->
|
||||
<div class="absolute left-6 top-0 bottom-0 w-px bg-subtle/30"></div>
|
||||
|
||||
<div class="space-y-4">
|
||||
{#each timeline as day (day.date)}
|
||||
<div class="relative pl-14">
|
||||
<!-- Dot -->
|
||||
<div class="absolute left-4 top-3 w-5 h-5 rounded-full border-2 border-synapse bg-abyss flex items-center justify-center">
|
||||
<div class="w-2 h-2 rounded-full bg-synapse"></div>
|
||||
</div>
|
||||
|
||||
<button onclick={() => expandedDay = expandedDay === day.date ? null : day.date}
|
||||
class="w-full text-left p-4 bg-surface/40 border border-subtle/20 rounded-lg hover:border-synapse/30 transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-sm text-bright font-medium">{day.date}</span>
|
||||
<span class="text-xs text-dim ml-2">{day.count} memories</span>
|
||||
</div>
|
||||
<!-- Dots for memory types -->
|
||||
<div class="flex gap-1">
|
||||
{#each day.memories.slice(0, 10) as m}
|
||||
<div class="w-2 h-2 rounded-full" style="background: {NODE_TYPE_COLORS[m.nodeType] || '#6b7280'}; opacity: {0.3 + m.retentionStrength * 0.7}"></div>
|
||||
{/each}
|
||||
{#if day.memories.length > 10}
|
||||
<span class="text-xs text-muted">+{day.memories.length - 10}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if expandedDay === day.date}
|
||||
<div class="mt-3 pt-3 border-t border-subtle/20 space-y-2">
|
||||
{#each day.memories as m}
|
||||
<div class="flex items-start gap-2 text-sm">
|
||||
<div class="w-2 h-2 mt-1.5 rounded-full flex-shrink-0" style="background: {NODE_TYPE_COLORS[m.nodeType] || '#6b7280'}"></div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-dim line-clamp-1">{m.content}</span>
|
||||
</div>
|
||||
<span class="text-xs text-muted flex-shrink-0">{(m.retentionStrength * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
234
apps/dashboard/src/routes/+layout.svelte
Normal file
234
apps/dashboard/src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { base } from '$app/paths';
|
||||
import { websocket, isConnected, memoryCount, avgRetention } from '$stores/websocket';
|
||||
|
||||
let { children } = $props();
|
||||
let showCommandPalette = $state(false);
|
||||
let cmdQuery = $state('');
|
||||
let cmdInput: HTMLInputElement;
|
||||
|
||||
onMount(() => {
|
||||
websocket.connect();
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
showCommandPalette = !showCommandPalette;
|
||||
cmdQuery = '';
|
||||
if (showCommandPalette) {
|
||||
requestAnimationFrame(() => cmdInput?.focus());
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Escape' && showCommandPalette) {
|
||||
showCommandPalette = false;
|
||||
return;
|
||||
}
|
||||
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
|
||||
if (e.key === '/') {
|
||||
e.preventDefault();
|
||||
const searchInput = document.querySelector<HTMLInputElement>('input[type="text"]');
|
||||
searchInput?.focus();
|
||||
return;
|
||||
}
|
||||
// Single-key navigation shortcuts
|
||||
const shortcutMap: Record<string, string> = {
|
||||
g: '/', m: '/memories', t: '/timeline', f: '/feed',
|
||||
e: '/explore', i: '/intentions', s: '/stats',
|
||||
};
|
||||
const target = shortcutMap[e.key.toLowerCase()];
|
||||
if (target && !e.metaKey && !e.ctrlKey && !e.altKey) {
|
||||
e.preventDefault();
|
||||
goto(`${base}${target}`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => {
|
||||
websocket.disconnect();
|
||||
window.removeEventListener('keydown', onKeyDown);
|
||||
};
|
||||
});
|
||||
|
||||
const nav = [
|
||||
{ href: '/', label: 'Graph', icon: '◎', shortcut: 'G' },
|
||||
{ href: '/memories', label: 'Memories', icon: '◈', shortcut: 'M' },
|
||||
{ href: '/timeline', label: 'Timeline', icon: '◷', shortcut: 'T' },
|
||||
{ href: '/feed', label: 'Feed', icon: '◉', shortcut: 'F' },
|
||||
{ href: '/explore', label: 'Explore', icon: '◬', shortcut: 'E' },
|
||||
{ href: '/intentions', label: 'Intentions', icon: '◇', shortcut: 'I' },
|
||||
{ href: '/stats', label: 'Stats', icon: '◫', shortcut: 'S' },
|
||||
{ href: '/settings', label: 'Settings', icon: '⚙', shortcut: ',' },
|
||||
];
|
||||
|
||||
// Mobile nav shows top 5 items
|
||||
const mobileNav = nav.slice(0, 5);
|
||||
|
||||
function isActive(href: string, currentPath: string): boolean {
|
||||
// Strip base prefix for comparison
|
||||
const path = currentPath.startsWith(base) ? currentPath.slice(base.length) || '/' : currentPath;
|
||||
if (href === '/') return path === '/' || path === '/graph';
|
||||
return path.startsWith(href);
|
||||
}
|
||||
|
||||
let filteredNav = $derived(
|
||||
cmdQuery
|
||||
? nav.filter(n => n.label.toLowerCase().includes(cmdQuery.toLowerCase()))
|
||||
: nav
|
||||
);
|
||||
|
||||
function cmdNavigate(href: string) {
|
||||
showCommandPalette = false;
|
||||
cmdQuery = '';
|
||||
goto(href);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Desktop: sidebar + content -->
|
||||
<!-- Mobile: content + bottom nav -->
|
||||
<div class="flex flex-col md:flex-row h-screen overflow-hidden bg-void">
|
||||
<!-- Desktop Sidebar (hidden on mobile) -->
|
||||
<nav class="hidden md:flex w-16 lg:w-56 flex-shrink-0 bg-abyss border-r border-subtle/30 flex-col">
|
||||
<!-- Logo -->
|
||||
<a href="/" class="flex items-center gap-3 px-4 py-5 border-b border-subtle/20">
|
||||
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-dream to-synapse flex items-center justify-center text-bright text-sm font-bold">
|
||||
V
|
||||
</div>
|
||||
<span class="hidden lg:block text-sm font-semibold text-bright tracking-wide">VESTIGE</span>
|
||||
</a>
|
||||
|
||||
<!-- Nav items -->
|
||||
<div class="flex-1 py-3 flex flex-col gap-1 px-2">
|
||||
{#each nav as item}
|
||||
{@const active = isActive(item.href, $page.url.pathname)}
|
||||
<a
|
||||
href={item.href}
|
||||
class="flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 text-sm
|
||||
{active
|
||||
? 'bg-synapse/15 text-synapse-glow border border-synapse/30 shadow-[0_0_12px_rgba(99,102,241,0.15)]'
|
||||
: 'text-dim hover:text-text hover:bg-surface border border-transparent'}"
|
||||
>
|
||||
<span class="text-base w-5 text-center">{item.icon}</span>
|
||||
<span class="hidden lg:block">{item.label}</span>
|
||||
<span class="hidden lg:block ml-auto text-[10px] text-muted/50 font-mono">{item.shortcut}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Quick action -->
|
||||
<div class="px-2 pb-2">
|
||||
<button
|
||||
onclick={() => { showCommandPalette = true; cmdQuery = ''; requestAnimationFrame(() => cmdInput?.focus()); }}
|
||||
class="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-muted hover:text-dim hover:bg-surface/50 transition border border-subtle/20"
|
||||
>
|
||||
<span class="text-[10px] font-mono bg-surface/60 px-1.5 py-0.5 rounded">⌘K</span>
|
||||
<span class="hidden lg:block">Command</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status footer -->
|
||||
<div class="px-3 py-4 border-t border-subtle/20 space-y-2">
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<div class="w-2 h-2 rounded-full {$isConnected ? 'bg-recall animate-pulse-glow' : 'bg-decay'}"></div>
|
||||
<span class="hidden lg:block text-dim">{$isConnected ? 'Connected' : 'Offline'}</span>
|
||||
</div>
|
||||
<div class="hidden lg:block text-xs text-muted">
|
||||
<div>{$memoryCount} memories</div>
|
||||
<div>{($avgRetention * 100).toFixed(0)}% retention</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="flex-1 overflow-y-auto pb-16 md:pb-0">
|
||||
<div class="animate-page-in">
|
||||
{@render children()}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Mobile Bottom Nav (hidden on desktop) -->
|
||||
<nav class="md:hidden fixed bottom-0 inset-x-0 bg-abyss/95 backdrop-blur-xl border-t border-subtle/30 z-40 safe-bottom">
|
||||
<div class="flex items-center justify-around px-2 py-1">
|
||||
{#each mobileNav as item}
|
||||
{@const active = isActive(item.href, $page.url.pathname)}
|
||||
<a
|
||||
href={item.href}
|
||||
class="flex flex-col items-center gap-0.5 px-3 py-2 rounded-lg transition-all min-w-[3.5rem]
|
||||
{active ? 'text-synapse-glow' : 'text-muted'}"
|
||||
>
|
||||
<span class="text-lg">{item.icon}</span>
|
||||
<span class="text-[9px]">{item.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
<!-- More button opens command palette on mobile -->
|
||||
<button
|
||||
onclick={() => { showCommandPalette = true; cmdQuery = ''; requestAnimationFrame(() => cmdInput?.focus()); }}
|
||||
class="flex flex-col items-center gap-0.5 px-3 py-2 rounded-lg text-muted min-w-[3.5rem]"
|
||||
>
|
||||
<span class="text-lg">⋯</span>
|
||||
<span class="text-[9px]">More</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Command Palette overlay -->
|
||||
{#if showCommandPalette}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4 bg-void/60 backdrop-blur-sm"
|
||||
onkeydown={(e) => { if (e.key === 'Escape') showCommandPalette = false; }}
|
||||
onclick={(e) => { if (e.target === e.currentTarget) showCommandPalette = false; }}
|
||||
>
|
||||
<div class="w-full max-w-lg bg-abyss border border-subtle/40 rounded-xl shadow-2xl shadow-synapse/10 overflow-hidden">
|
||||
<div class="flex items-center gap-3 px-4 py-3 border-b border-subtle/20">
|
||||
<span class="text-synapse text-sm">◎</span>
|
||||
<input
|
||||
bind:this={cmdInput}
|
||||
bind:value={cmdQuery}
|
||||
type="text"
|
||||
placeholder="Navigate to..."
|
||||
class="flex-1 bg-transparent text-text text-sm placeholder:text-muted focus:outline-none"
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter' && filteredNav.length > 0) {
|
||||
cmdNavigate(filteredNav[0].href);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span class="text-[10px] text-muted font-mono bg-surface/40 px-1.5 py-0.5 rounded">esc</span>
|
||||
</div>
|
||||
<div class="max-h-72 overflow-y-auto py-1">
|
||||
{#each filteredNav as item}
|
||||
<button
|
||||
onclick={() => cmdNavigate(item.href)}
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-dim hover:text-text hover:bg-surface/40 transition"
|
||||
>
|
||||
<span class="text-base w-5 text-center">{item.icon}</span>
|
||||
<span>{item.label}</span>
|
||||
<span class="ml-auto text-[10px] text-muted/50 font-mono hidden md:block">{item.shortcut}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{#if filteredNav.length === 0}
|
||||
<div class="px-4 py-6 text-center text-sm text-muted">No matches</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.safe-bottom {
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
@keyframes page-in {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-page-in {
|
||||
animation: page-in 0.2s ease-out;
|
||||
}
|
||||
</style>
|
||||
158
apps/dashboard/src/routes/+page.svelte
Normal file
158
apps/dashboard/src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import Graph3D from '$components/Graph3D.svelte';
|
||||
import { api } from '$stores/api';
|
||||
import { eventFeed } from '$stores/websocket';
|
||||
import type { GraphResponse, Memory } from '$types';
|
||||
|
||||
let graphData: GraphResponse | null = $state(null);
|
||||
let selectedMemory: Memory | null = $state(null);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
let isDreaming = $state(false);
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
graphData = await api.graph({ max_nodes: 150, depth: 3 });
|
||||
} catch (e) {
|
||||
error = 'No memories yet. Start using Vestige to see your memory graph.';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
|
||||
async function triggerDream() {
|
||||
isDreaming = true;
|
||||
try {
|
||||
const result = await api.dream();
|
||||
// Reload graph with new connections
|
||||
graphData = await api.graph({ max_nodes: 150, depth: 3 });
|
||||
} catch {
|
||||
// Dream failed silently
|
||||
} finally {
|
||||
isDreaming = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onNodeSelect(nodeId: string) {
|
||||
try {
|
||||
selectedMemory = await api.memories.get(nodeId);
|
||||
} catch {
|
||||
selectedMemory = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="h-full relative">
|
||||
<!-- 3D Graph fills the viewport -->
|
||||
{#if loading}
|
||||
<div class="h-full flex items-center justify-center">
|
||||
<div class="text-center space-y-4">
|
||||
<div class="w-16 h-16 mx-auto rounded-full border-2 border-synapse/30 border-t-synapse animate-spin"></div>
|
||||
<p class="text-dim text-sm">Loading memory graph...</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="h-full flex items-center justify-center">
|
||||
<div class="text-center space-y-4 max-w-md px-8">
|
||||
<div class="text-4xl">◎</div>
|
||||
<h2 class="text-xl text-bright">Your Mind Awaits</h2>
|
||||
<p class="text-dim text-sm">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if graphData}
|
||||
<Graph3D
|
||||
nodes={graphData.nodes}
|
||||
edges={graphData.edges}
|
||||
centerId={graphData.center_id}
|
||||
events={$eventFeed}
|
||||
{isDreaming}
|
||||
onSelect={onNodeSelect}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Floating controls -->
|
||||
<div class="absolute top-4 left-4 flex gap-2 z-10">
|
||||
<button
|
||||
onclick={triggerDream}
|
||||
disabled={isDreaming}
|
||||
class="px-4 py-2 rounded-lg bg-dream/20 border border-dream/40 text-dream-glow text-sm
|
||||
hover:bg-dream/30 transition-all disabled:opacity-50 backdrop-blur-sm
|
||||
{isDreaming ? 'glow-dream animate-pulse-glow' : ''}"
|
||||
>
|
||||
{isDreaming ? '◎ Dreaming...' : '◎ Dream'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Floating stats -->
|
||||
<div class="absolute top-4 right-4 z-10 text-xs text-dim backdrop-blur-sm bg-abyss/60 rounded-lg px-3 py-2 border border-subtle/20">
|
||||
{#if graphData}
|
||||
<div>{graphData.nodeCount} nodes / {graphData.edgeCount} edges</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Selected memory detail panel -->
|
||||
{#if selectedMemory}
|
||||
<div class="absolute right-0 top-0 h-full w-96 bg-abyss/95 backdrop-blur-xl border-l border-subtle/30 p-6 overflow-y-auto z-20">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="text-bright text-sm font-semibold">Memory Detail</h3>
|
||||
<button onclick={() => selectedMemory = null} class="text-dim hover:text-text text-lg">×</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Type badge -->
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-xs bg-synapse/20 text-synapse-glow">{selectedMemory.nodeType}</span>
|
||||
{#each selectedMemory.tags as tag}
|
||||
<span class="px-2 py-0.5 rounded text-xs bg-surface text-dim">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="text-sm text-text leading-relaxed whitespace-pre-wrap">{selectedMemory.content}</div>
|
||||
|
||||
<!-- Retention bar -->
|
||||
<div>
|
||||
<div class="flex justify-between text-xs text-dim mb-1">
|
||||
<span>Retention</span>
|
||||
<span>{(selectedMemory.retentionStrength * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
<div class="h-2 bg-surface rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full rounded-full transition-all duration-500"
|
||||
style="width: {selectedMemory.retentionStrength * 100}%; background: {
|
||||
selectedMemory.retentionStrength > 0.7 ? '#10b981' :
|
||||
selectedMemory.retentionStrength > 0.4 ? '#f59e0b' : '#ef4444'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="text-xs text-dim space-y-1">
|
||||
<div>Created: {new Date(selectedMemory.createdAt).toLocaleDateString()}</div>
|
||||
<div>Reviews: {selectedMemory.reviewCount ?? 0}</div>
|
||||
{#if selectedMemory.source}
|
||||
<div>Source: {selectedMemory.source}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onclick={() => selectedMemory && api.memories.promote(selectedMemory.id)}
|
||||
class="flex-1 px-3 py-2 rounded bg-recall/20 text-recall text-xs hover:bg-recall/30 transition"
|
||||
>
|
||||
Promote
|
||||
</button>
|
||||
<button
|
||||
onclick={() => selectedMemory && api.memories.demote(selectedMemory.id)}
|
||||
class="flex-1 px-3 py-2 rounded bg-decay/20 text-decay text-xs hover:bg-decay/30 transition"
|
||||
>
|
||||
Demote
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue