mirror of
https://github.com/samvallad33/vestige.git
synced 2026-05-01 03:46:22 +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
100
apps/dashboard/src/app.css
Normal file
100
apps/dashboard/src/app.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
/* Vestige cosmic dark palette */
|
||||
--color-void: #050510;
|
||||
--color-abyss: #0a0a1a;
|
||||
--color-deep: #10102a;
|
||||
--color-surface: #161638;
|
||||
--color-elevated: #1e1e4a;
|
||||
--color-subtle: #2a2a5e;
|
||||
--color-muted: #4a4a7a;
|
||||
--color-dim: #7a7aaa;
|
||||
--color-text: #e0e0ff;
|
||||
--color-bright: #ffffff;
|
||||
|
||||
/* Accent colors */
|
||||
--color-synapse: #6366f1;
|
||||
--color-synapse-glow: #818cf8;
|
||||
--color-dream: #a855f7;
|
||||
--color-dream-glow: #c084fc;
|
||||
--color-memory: #3b82f6;
|
||||
--color-recall: #10b981;
|
||||
--color-decay: #ef4444;
|
||||
--color-warning: #f59e0b;
|
||||
|
||||
/* Node type colors */
|
||||
--color-node-fact: #3b82f6;
|
||||
--color-node-concept: #8b5cf6;
|
||||
--color-node-event: #f59e0b;
|
||||
--color-node-person: #10b981;
|
||||
--color-node-place: #06b6d4;
|
||||
--color-node-note: #6b7280;
|
||||
--color-node-pattern: #ec4899;
|
||||
--color-node-decision: #ef4444;
|
||||
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
html {
|
||||
background: var(--color-void);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-abyss);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-subtle);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-muted);
|
||||
}
|
||||
|
||||
/* Glow effects */
|
||||
.glow-synapse {
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), 0 0 60px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
.glow-dream {
|
||||
box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), 0 0 60px rgba(168, 85, 247, 0.1);
|
||||
}
|
||||
.glow-memory {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Pulse animation for live indicators */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Neural particle animation */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) translateX(0); }
|
||||
25% { transform: translateY(-10px) translateX(5px); }
|
||||
50% { transform: translateY(-5px) translateX(-5px); }
|
||||
75% { transform: translateY(-15px) translateX(3px); }
|
||||
}
|
||||
|
||||
/* Retention bar colors */
|
||||
.retention-critical { color: var(--color-decay); }
|
||||
.retention-low { color: var(--color-warning); }
|
||||
.retention-good { color: var(--color-recall); }
|
||||
.retention-strong { color: var(--color-synapse); }
|
||||
20
apps/dashboard/src/app.html
Normal file
20
apps/dashboard/src/app.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#050510" />
|
||||
<meta name="description" content="Vestige — Cognitive Memory Dashboard. 3D visualization of your AI's long-term memory." />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="Vestige" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="/favicon.svg" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
%sveltekit.head%
|
||||
<title>Vestige</title>
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
795
apps/dashboard/src/lib/components/Graph3D.svelte
Normal file
795
apps/dashboard/src/lib/components/Graph3D.svelte
Normal file
|
|
@ -0,0 +1,795 @@
|
|||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
|
||||
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
||||
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
|
||||
import type { GraphNode, GraphEdge, VestigeEvent } from '$types';
|
||||
import { NODE_TYPE_COLORS } from '$types';
|
||||
|
||||
interface Props {
|
||||
nodes: GraphNode[];
|
||||
edges: GraphEdge[];
|
||||
centerId: string;
|
||||
events?: VestigeEvent[];
|
||||
isDreaming?: boolean;
|
||||
onSelect?: (nodeId: string) => void;
|
||||
}
|
||||
|
||||
let { nodes, edges, centerId, events = [], isDreaming = false, onSelect }: Props = $props();
|
||||
|
||||
let container: HTMLDivElement;
|
||||
let renderer: THREE.WebGLRenderer;
|
||||
let scene: THREE.Scene;
|
||||
let camera: THREE.PerspectiveCamera;
|
||||
let controls: OrbitControls;
|
||||
let composer: EffectComposer;
|
||||
let bloomPass: UnrealBloomPass;
|
||||
let raycaster: THREE.Raycaster;
|
||||
let mouse: THREE.Vector2;
|
||||
let animationId: number;
|
||||
let nodeGroup: THREE.Group;
|
||||
let edgeGroup: THREE.Group;
|
||||
let particleSystem: THREE.Points;
|
||||
let starField: THREE.Points;
|
||||
|
||||
// Maps for lookup
|
||||
let nodeMeshMap = new Map<string, THREE.Mesh>();
|
||||
let nodePositions = new Map<string, THREE.Vector3>();
|
||||
let labelSprites = new Map<string, THREE.Sprite>();
|
||||
let hoveredNode: string | null = null;
|
||||
let selectedNode: string | null = null;
|
||||
|
||||
// Force simulation state
|
||||
let velocities = new Map<string, THREE.Vector3>();
|
||||
let simulationRunning = true;
|
||||
let simulationStep = 0;
|
||||
|
||||
// Event-driven animation state
|
||||
let processedEventCount = 0;
|
||||
let pulseEffects: { nodeId: string; intensity: number; color: THREE.Color; decay: number }[] = [];
|
||||
let connectionFlashes: { line: THREE.Line; intensity: number }[] = [];
|
||||
let spawnBursts: { position: THREE.Vector3; age: number; particles: THREE.Points }[] = [];
|
||||
let dreamTrails: { points: THREE.Vector3[]; line: THREE.Line; age: number }[] = [];
|
||||
let shockwaves: { mesh: THREE.Mesh; age: number; maxAge: number }[] = [];
|
||||
|
||||
onMount(() => {
|
||||
initScene();
|
||||
createStarField();
|
||||
createGraph();
|
||||
createParticleSystem();
|
||||
animate();
|
||||
|
||||
window.addEventListener('resize', onResize);
|
||||
container.addEventListener('pointermove', onPointerMove);
|
||||
container.addEventListener('click', onClick);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
cancelAnimationFrame(animationId);
|
||||
window.removeEventListener('resize', onResize);
|
||||
renderer?.dispose();
|
||||
composer?.dispose();
|
||||
});
|
||||
|
||||
function initScene() {
|
||||
// Scene
|
||||
scene = new THREE.Scene();
|
||||
scene.fog = new THREE.FogExp2(0x050510, 0.008);
|
||||
|
||||
// Camera
|
||||
camera = new THREE.PerspectiveCamera(60, container.clientWidth / container.clientHeight, 0.1, 2000);
|
||||
camera.position.set(0, 30, 80);
|
||||
|
||||
// Renderer (WebGL2 — WebGPU requires async init, use WebGL for now with bloom)
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
alpha: true,
|
||||
powerPreference: 'high-performance'
|
||||
});
|
||||
renderer.setSize(container.clientWidth, container.clientHeight);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
renderer.toneMappingExposure = 1.2;
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// Controls
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
controls.rotateSpeed = 0.5;
|
||||
controls.zoomSpeed = 0.8;
|
||||
controls.minDistance = 10;
|
||||
controls.maxDistance = 500;
|
||||
controls.autoRotate = true;
|
||||
controls.autoRotateSpeed = 0.3;
|
||||
|
||||
// Post-processing: Bloom
|
||||
composer = new EffectComposer(renderer);
|
||||
composer.addPass(new RenderPass(scene, camera));
|
||||
bloomPass = new UnrealBloomPass(
|
||||
new THREE.Vector2(container.clientWidth, container.clientHeight),
|
||||
0.8, // strength
|
||||
0.4, // radius
|
||||
0.85 // threshold
|
||||
);
|
||||
composer.addPass(bloomPass);
|
||||
|
||||
// Lighting
|
||||
const ambient = new THREE.AmbientLight(0x1a1a3a, 0.5);
|
||||
scene.add(ambient);
|
||||
|
||||
const point1 = new THREE.PointLight(0x6366f1, 1.5, 200);
|
||||
point1.position.set(50, 50, 50);
|
||||
scene.add(point1);
|
||||
|
||||
const point2 = new THREE.PointLight(0xa855f7, 1, 200);
|
||||
point2.position.set(-50, -30, -50);
|
||||
scene.add(point2);
|
||||
|
||||
// Raycaster
|
||||
raycaster = new THREE.Raycaster();
|
||||
raycaster.params.Points = { threshold: 2 };
|
||||
mouse = new THREE.Vector2();
|
||||
}
|
||||
|
||||
function createStarField() {
|
||||
const starGeo = new THREE.BufferGeometry();
|
||||
const starCount = 3000;
|
||||
const positions = new Float32Array(starCount * 3);
|
||||
const sizes = new Float32Array(starCount);
|
||||
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
positions[i * 3] = (Math.random() - 0.5) * 1000;
|
||||
positions[i * 3 + 1] = (Math.random() - 0.5) * 1000;
|
||||
positions[i * 3 + 2] = (Math.random() - 0.5) * 1000;
|
||||
sizes[i] = Math.random() * 1.5;
|
||||
}
|
||||
|
||||
starGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||||
starGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
|
||||
|
||||
const starMat = new THREE.PointsMaterial({
|
||||
color: 0x6366f1,
|
||||
size: 0.5,
|
||||
transparent: true,
|
||||
opacity: 0.4,
|
||||
sizeAttenuation: true,
|
||||
blending: THREE.AdditiveBlending
|
||||
});
|
||||
|
||||
starField = new THREE.Points(starGeo, starMat);
|
||||
scene.add(starField);
|
||||
}
|
||||
|
||||
function createGraph() {
|
||||
nodeGroup = new THREE.Group();
|
||||
edgeGroup = new THREE.Group();
|
||||
|
||||
// Position nodes using force-directed initial layout
|
||||
const nodeCount = nodes.length;
|
||||
const phi = (1 + Math.sqrt(5)) / 2; // Golden ratio for sphere distribution
|
||||
|
||||
nodes.forEach((node, i) => {
|
||||
// Fibonacci sphere distribution for initial positions
|
||||
const y = 1 - (2 * i) / (nodeCount - 1 || 1);
|
||||
const radius = Math.sqrt(1 - y * y);
|
||||
const theta = 2 * Math.PI * i / phi;
|
||||
const spread = 30 + nodeCount * 0.5;
|
||||
|
||||
const pos = new THREE.Vector3(
|
||||
radius * Math.cos(theta) * spread,
|
||||
y * spread,
|
||||
radius * Math.sin(theta) * spread
|
||||
);
|
||||
|
||||
// Center node at origin
|
||||
if (node.isCenter) pos.set(0, 0, 0);
|
||||
|
||||
nodePositions.set(node.id, pos);
|
||||
velocities.set(node.id, new THREE.Vector3());
|
||||
|
||||
// Create node mesh
|
||||
const size = 0.5 + node.retention * 2;
|
||||
const color = NODE_TYPE_COLORS[node.type] || '#6b7280';
|
||||
|
||||
const geometry = new THREE.SphereGeometry(size, 16, 16);
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
color: new THREE.Color(color),
|
||||
emissive: new THREE.Color(color),
|
||||
emissiveIntensity: 0.3 + node.retention * 0.5,
|
||||
roughness: 0.3,
|
||||
metalness: 0.1,
|
||||
transparent: true,
|
||||
opacity: 0.3 + node.retention * 0.7,
|
||||
});
|
||||
|
||||
const mesh = new THREE.Mesh(geometry, material);
|
||||
mesh.position.copy(pos);
|
||||
mesh.userData = { nodeId: node.id, type: node.type, retention: node.retention };
|
||||
|
||||
nodeMeshMap.set(node.id, mesh);
|
||||
nodeGroup.add(mesh);
|
||||
|
||||
// Glow sprite
|
||||
const spriteMat = new THREE.SpriteMaterial({
|
||||
color: new THREE.Color(color),
|
||||
transparent: true,
|
||||
opacity: 0.15 + node.retention * 0.2,
|
||||
blending: THREE.AdditiveBlending,
|
||||
});
|
||||
const sprite = new THREE.Sprite(spriteMat);
|
||||
sprite.scale.set(size * 4, size * 4, 1);
|
||||
sprite.position.copy(pos);
|
||||
sprite.userData = { isGlow: true, nodeId: node.id };
|
||||
nodeGroup.add(sprite);
|
||||
|
||||
// Text label sprite (distance-faded)
|
||||
const labelText = node.label || node.type;
|
||||
const labelSprite = createTextSprite(labelText, '#e2e8f0');
|
||||
labelSprite.position.copy(pos);
|
||||
labelSprite.position.y += size * 2 + 1.5;
|
||||
labelSprite.userData = { isLabel: true, nodeId: node.id, offset: size * 2 + 1.5 };
|
||||
nodeGroup.add(labelSprite);
|
||||
labelSprites.set(node.id, labelSprite);
|
||||
});
|
||||
|
||||
// Create edges
|
||||
edges.forEach(edge => {
|
||||
const sourcePos = nodePositions.get(edge.source);
|
||||
const targetPos = nodePositions.get(edge.target);
|
||||
if (!sourcePos || !targetPos) return;
|
||||
|
||||
const points = [sourcePos, targetPos];
|
||||
const geometry = new THREE.BufferGeometry().setFromPoints(points);
|
||||
const material = new THREE.LineBasicMaterial({
|
||||
color: 0x4a4a7a,
|
||||
transparent: true,
|
||||
opacity: Math.min(0.1 + edge.weight * 0.5, 0.6),
|
||||
blending: THREE.AdditiveBlending,
|
||||
});
|
||||
|
||||
const line = new THREE.Line(geometry, material);
|
||||
line.userData = { source: edge.source, target: edge.target };
|
||||
edgeGroup.add(line);
|
||||
});
|
||||
|
||||
scene.add(edgeGroup);
|
||||
scene.add(nodeGroup);
|
||||
}
|
||||
|
||||
function createParticleSystem() {
|
||||
const particleCount = 500;
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const positions = new Float32Array(particleCount * 3);
|
||||
const colors = new Float32Array(particleCount * 3);
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
positions[i * 3] = (Math.random() - 0.5) * 100;
|
||||
positions[i * 3 + 1] = (Math.random() - 0.5) * 100;
|
||||
positions[i * 3 + 2] = (Math.random() - 0.5) * 100;
|
||||
// Purple-blue neural particles
|
||||
colors[i * 3] = 0.4 + Math.random() * 0.3;
|
||||
colors[i * 3 + 1] = 0.3 + Math.random() * 0.2;
|
||||
colors[i * 3 + 2] = 0.8 + Math.random() * 0.2;
|
||||
}
|
||||
|
||||
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||||
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
|
||||
|
||||
const material = new THREE.PointsMaterial({
|
||||
size: 0.3,
|
||||
vertexColors: true,
|
||||
transparent: true,
|
||||
opacity: 0.4,
|
||||
blending: THREE.AdditiveBlending,
|
||||
sizeAttenuation: true,
|
||||
});
|
||||
|
||||
particleSystem = new THREE.Points(geometry, material);
|
||||
scene.add(particleSystem);
|
||||
}
|
||||
|
||||
function createTextSprite(text: string, color: string): THREE.Sprite {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d')!;
|
||||
canvas.width = 512;
|
||||
canvas.height = 64;
|
||||
|
||||
// Truncate text
|
||||
const label = text.length > 40 ? text.slice(0, 37) + '...' : text;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.font = 'bold 28px -apple-system, BlinkMacSystemFont, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
|
||||
// Shadow for readability
|
||||
ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
|
||||
ctx.shadowBlur = 6;
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 2;
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(label, canvas.width / 2, canvas.height / 2);
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
texture.needsUpdate = true;
|
||||
|
||||
const mat = new THREE.SpriteMaterial({
|
||||
map: texture,
|
||||
transparent: true,
|
||||
opacity: 0,
|
||||
depthTest: false,
|
||||
sizeAttenuation: true,
|
||||
});
|
||||
|
||||
const sprite = new THREE.Sprite(mat);
|
||||
sprite.scale.set(12, 1.5, 1);
|
||||
return sprite;
|
||||
}
|
||||
|
||||
function runForceSimulation() {
|
||||
if (!simulationRunning || simulationStep > 300) return;
|
||||
simulationStep++;
|
||||
|
||||
const alpha = Math.max(0.001, 1 - simulationStep / 300);
|
||||
const repulsionStrength = 500;
|
||||
const attractionStrength = 0.01;
|
||||
const dampening = 0.9;
|
||||
|
||||
// Repulsion between all nodes
|
||||
const nodeIds = Array.from(nodePositions.keys());
|
||||
for (let i = 0; i < nodeIds.length; i++) {
|
||||
for (let j = i + 1; j < nodeIds.length; j++) {
|
||||
const posA = nodePositions.get(nodeIds[i])!;
|
||||
const posB = nodePositions.get(nodeIds[j])!;
|
||||
const diff = new THREE.Vector3().subVectors(posA, posB);
|
||||
const dist = diff.length() || 1;
|
||||
const force = repulsionStrength / (dist * dist) * alpha;
|
||||
const dir = diff.normalize().multiplyScalar(force);
|
||||
|
||||
velocities.get(nodeIds[i])!.add(dir);
|
||||
velocities.get(nodeIds[j])!.sub(dir);
|
||||
}
|
||||
}
|
||||
|
||||
// Attraction along edges
|
||||
edges.forEach(edge => {
|
||||
const posA = nodePositions.get(edge.source);
|
||||
const posB = nodePositions.get(edge.target);
|
||||
if (!posA || !posB) return;
|
||||
|
||||
const diff = new THREE.Vector3().subVectors(posB, posA);
|
||||
const dist = diff.length();
|
||||
const force = dist * attractionStrength * edge.weight * alpha;
|
||||
const dir = diff.normalize().multiplyScalar(force);
|
||||
|
||||
velocities.get(edge.source)!.add(dir);
|
||||
velocities.get(edge.target)!.sub(dir);
|
||||
});
|
||||
|
||||
// Centering force
|
||||
nodeIds.forEach(id => {
|
||||
const pos = nodePositions.get(id)!;
|
||||
const vel = velocities.get(id)!;
|
||||
vel.sub(pos.clone().multiplyScalar(0.001 * alpha));
|
||||
vel.multiplyScalar(dampening);
|
||||
pos.add(vel);
|
||||
|
||||
// Update mesh positions
|
||||
const mesh = nodeMeshMap.get(id);
|
||||
if (mesh) mesh.position.copy(pos);
|
||||
});
|
||||
|
||||
// Update glow sprite and label positions
|
||||
nodeGroup.children.forEach(child => {
|
||||
if (child.userData.nodeId) {
|
||||
const pos = nodePositions.get(child.userData.nodeId);
|
||||
if (!pos) return;
|
||||
if (child.userData.isGlow) {
|
||||
child.position.copy(pos);
|
||||
} else if (child.userData.isLabel) {
|
||||
child.position.copy(pos);
|
||||
child.position.y += child.userData.offset;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update edge positions
|
||||
edgeGroup.children.forEach(child => {
|
||||
const line = child as THREE.Line;
|
||||
const sourcePos = nodePositions.get(line.userData.source);
|
||||
const targetPos = nodePositions.get(line.userData.target);
|
||||
if (sourcePos && targetPos) {
|
||||
const positions = line.geometry.attributes.position as THREE.BufferAttribute;
|
||||
positions.setXYZ(0, sourcePos.x, sourcePos.y, sourcePos.z);
|
||||
positions.setXYZ(1, targetPos.x, targetPos.y, targetPos.z);
|
||||
positions.needsUpdate = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function animate() {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
|
||||
const time = performance.now() * 0.001;
|
||||
|
||||
// Force simulation
|
||||
runForceSimulation();
|
||||
|
||||
// Animate particles
|
||||
if (particleSystem) {
|
||||
const positions = particleSystem.geometry.attributes.position as THREE.BufferAttribute;
|
||||
for (let i = 0; i < positions.count; i++) {
|
||||
positions.setY(i, positions.getY(i) + Math.sin(time + i * 0.1) * 0.02);
|
||||
positions.setX(i, positions.getX(i) + Math.cos(time + i * 0.05) * 0.01);
|
||||
}
|
||||
positions.needsUpdate = true;
|
||||
}
|
||||
|
||||
// Slow star rotation
|
||||
if (starField) {
|
||||
starField.rotation.y += 0.0001;
|
||||
starField.rotation.x += 0.00005;
|
||||
}
|
||||
|
||||
// Node breathing (retention-based pulse)
|
||||
nodeMeshMap.forEach((mesh, id) => {
|
||||
const node = nodes.find(n => n.id === id);
|
||||
if (!node) return;
|
||||
const breathe = 1 + Math.sin(time * 1.5 + nodes.indexOf(node) * 0.5) * 0.05 * node.retention;
|
||||
mesh.scale.setScalar(breathe);
|
||||
|
||||
// Highlight hovered
|
||||
const mat = mesh.material as THREE.MeshStandardMaterial;
|
||||
if (id === hoveredNode) {
|
||||
mat.emissiveIntensity = 1.0;
|
||||
} else if (id === selectedNode) {
|
||||
mat.emissiveIntensity = 0.8;
|
||||
} else {
|
||||
mat.emissiveIntensity = 0.3 + node.retention * 0.5;
|
||||
}
|
||||
});
|
||||
|
||||
// Distance-based label visibility
|
||||
labelSprites.forEach((sprite, id) => {
|
||||
const pos = nodePositions.get(id);
|
||||
if (!pos) return;
|
||||
const dist = camera.position.distanceTo(pos);
|
||||
const mat = sprite.material as THREE.SpriteMaterial;
|
||||
// Fade in when close (< 40 units), fade out when far (> 80 units)
|
||||
const targetOpacity = id === hoveredNode || id === selectedNode
|
||||
? 1.0
|
||||
: dist < 40 ? 0.9 : dist < 80 ? 0.9 * (1 - (dist - 40) / 40) : 0;
|
||||
mat.opacity += (targetOpacity - mat.opacity) * 0.1;
|
||||
});
|
||||
|
||||
// Dream mode: slower rotation, purple tint, stronger bloom
|
||||
if (isDreaming) {
|
||||
controls.autoRotateSpeed = 0.1;
|
||||
bloomPass.strength = 1.5;
|
||||
scene.fog = new THREE.FogExp2(0x0a0520, 0.006);
|
||||
} else {
|
||||
controls.autoRotateSpeed = 0.3;
|
||||
bloomPass.strength = 0.8;
|
||||
}
|
||||
|
||||
// Process incoming events
|
||||
processEvents();
|
||||
|
||||
// Update visual effects
|
||||
updateEffects(time);
|
||||
|
||||
controls.update();
|
||||
composer.render();
|
||||
}
|
||||
|
||||
function processEvents() {
|
||||
if (!events || events.length <= processedEventCount) return;
|
||||
|
||||
const newEvents = events.slice(processedEventCount);
|
||||
processedEventCount = events.length;
|
||||
|
||||
for (const event of newEvents) {
|
||||
switch (event.type) {
|
||||
case 'MemoryCreated': {
|
||||
// Spawn burst: ring of particles expanding outward
|
||||
const nodeId = (event.data as { id?: string })?.id;
|
||||
const pos = nodeId ? nodePositions.get(nodeId) : null;
|
||||
const burstPos = pos?.clone() ?? new THREE.Vector3(
|
||||
(Math.random() - 0.5) * 40,
|
||||
(Math.random() - 0.5) * 40,
|
||||
(Math.random() - 0.5) * 40
|
||||
);
|
||||
createSpawnBurst(burstPos, new THREE.Color(0x10b981));
|
||||
|
||||
// Also create a shockwave ring
|
||||
createShockwave(burstPos, new THREE.Color(0x10b981));
|
||||
break;
|
||||
}
|
||||
case 'SearchPerformed': {
|
||||
// Pulse all visible nodes with blue ripple
|
||||
const query = (event.data as { query?: string })?.query;
|
||||
nodeMeshMap.forEach((_, id) => {
|
||||
pulseEffects.push({
|
||||
nodeId: id,
|
||||
intensity: 0.6 + Math.random() * 0.4,
|
||||
color: new THREE.Color(0x3b82f6),
|
||||
decay: 0.02
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'DreamStarted': {
|
||||
// Dramatic: pulse everything purple, slow time
|
||||
nodeMeshMap.forEach((_, id) => {
|
||||
pulseEffects.push({
|
||||
nodeId: id,
|
||||
intensity: 1.0,
|
||||
color: new THREE.Color(0xa855f7),
|
||||
decay: 0.005
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'DreamProgress': {
|
||||
// Light up specific memories as they're "replayed"
|
||||
const memoryId = (event.data as { memory_id?: string })?.memory_id;
|
||||
if (memoryId && nodeMeshMap.has(memoryId)) {
|
||||
pulseEffects.push({
|
||||
nodeId: memoryId,
|
||||
intensity: 1.5,
|
||||
color: new THREE.Color(0xc084fc),
|
||||
decay: 0.01
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'DreamCompleted': {
|
||||
// Celebration burst from center
|
||||
createSpawnBurst(new THREE.Vector3(0, 0, 0), new THREE.Color(0xa855f7));
|
||||
createShockwave(new THREE.Vector3(0, 0, 0), new THREE.Color(0xa855f7));
|
||||
break;
|
||||
}
|
||||
case 'ConnectionDiscovered': {
|
||||
const data = event.data as { source?: string; target?: string };
|
||||
const srcPos = data.source ? nodePositions.get(data.source) : null;
|
||||
const tgtPos = data.target ? nodePositions.get(data.target) : null;
|
||||
if (srcPos && tgtPos) {
|
||||
createConnectionFlash(srcPos, tgtPos, new THREE.Color(0xf59e0b));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'RetentionDecayed': {
|
||||
const decayId = (event.data as { id?: string })?.id;
|
||||
if (decayId && nodeMeshMap.has(decayId)) {
|
||||
pulseEffects.push({
|
||||
nodeId: decayId,
|
||||
intensity: 0.8,
|
||||
color: new THREE.Color(0xef4444),
|
||||
decay: 0.03
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'MemoryPromoted': {
|
||||
const promoId = (event.data as { id?: string })?.id;
|
||||
if (promoId && nodeMeshMap.has(promoId)) {
|
||||
pulseEffects.push({
|
||||
nodeId: promoId,
|
||||
intensity: 1.2,
|
||||
color: new THREE.Color(0x10b981),
|
||||
decay: 0.01
|
||||
});
|
||||
const promoPos = nodePositions.get(promoId);
|
||||
if (promoPos) createShockwave(promoPos, new THREE.Color(0x10b981));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'ConsolidationCompleted': {
|
||||
// Global shimmer effect
|
||||
nodeMeshMap.forEach((_, id) => {
|
||||
pulseEffects.push({
|
||||
nodeId: id,
|
||||
intensity: 0.4 + Math.random() * 0.3,
|
||||
color: new THREE.Color(0xf59e0b),
|
||||
decay: 0.015
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createSpawnBurst(position: THREE.Vector3, color: THREE.Color) {
|
||||
const count = 60;
|
||||
const geo = new THREE.BufferGeometry();
|
||||
const positions = new Float32Array(count * 3);
|
||||
const velocitiesArr = new Float32Array(count * 3);
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
positions[i * 3] = position.x;
|
||||
positions[i * 3 + 1] = position.y;
|
||||
positions[i * 3 + 2] = position.z;
|
||||
// Random outward velocity
|
||||
const theta = Math.random() * Math.PI * 2;
|
||||
const phi = Math.acos(2 * Math.random() - 1);
|
||||
const speed = 0.3 + Math.random() * 0.5;
|
||||
velocitiesArr[i * 3] = Math.sin(phi) * Math.cos(theta) * speed;
|
||||
velocitiesArr[i * 3 + 1] = Math.sin(phi) * Math.sin(theta) * speed;
|
||||
velocitiesArr[i * 3 + 2] = Math.cos(phi) * speed;
|
||||
}
|
||||
|
||||
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||||
geo.setAttribute('velocity', new THREE.BufferAttribute(velocitiesArr, 3));
|
||||
|
||||
const mat = new THREE.PointsMaterial({
|
||||
color,
|
||||
size: 0.6,
|
||||
transparent: true,
|
||||
opacity: 1.0,
|
||||
blending: THREE.AdditiveBlending,
|
||||
sizeAttenuation: true,
|
||||
});
|
||||
|
||||
const pts = new THREE.Points(geo, mat);
|
||||
scene.add(pts);
|
||||
spawnBursts.push({ position: position.clone(), age: 0, particles: pts });
|
||||
}
|
||||
|
||||
function createShockwave(position: THREE.Vector3, color: THREE.Color) {
|
||||
const geo = new THREE.RingGeometry(0.1, 0.5, 64);
|
||||
const mat = new THREE.MeshBasicMaterial({
|
||||
color,
|
||||
transparent: true,
|
||||
opacity: 0.8,
|
||||
side: THREE.DoubleSide,
|
||||
blending: THREE.AdditiveBlending,
|
||||
});
|
||||
const ring = new THREE.Mesh(geo, mat);
|
||||
ring.position.copy(position);
|
||||
// Face camera
|
||||
ring.lookAt(camera.position);
|
||||
scene.add(ring);
|
||||
shockwaves.push({ mesh: ring, age: 0, maxAge: 60 });
|
||||
}
|
||||
|
||||
function createConnectionFlash(from: THREE.Vector3, to: THREE.Vector3, color: THREE.Color) {
|
||||
const points = [from.clone(), to.clone()];
|
||||
const geo = new THREE.BufferGeometry().setFromPoints(points);
|
||||
const mat = new THREE.LineBasicMaterial({
|
||||
color,
|
||||
transparent: true,
|
||||
opacity: 1.0,
|
||||
blending: THREE.AdditiveBlending,
|
||||
});
|
||||
const line = new THREE.Line(geo, mat);
|
||||
scene.add(line);
|
||||
connectionFlashes.push({ line, intensity: 1.0 });
|
||||
}
|
||||
|
||||
function updateEffects(time: number) {
|
||||
// Update pulse effects on nodes
|
||||
for (let i = pulseEffects.length - 1; i >= 0; i--) {
|
||||
const pulse = pulseEffects[i];
|
||||
pulse.intensity -= pulse.decay;
|
||||
if (pulse.intensity <= 0) {
|
||||
pulseEffects.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
const mesh = nodeMeshMap.get(pulse.nodeId);
|
||||
if (mesh) {
|
||||
const mat = mesh.material as THREE.MeshStandardMaterial;
|
||||
mat.emissive.lerp(pulse.color, pulse.intensity * 0.3);
|
||||
mat.emissiveIntensity = Math.max(mat.emissiveIntensity, pulse.intensity);
|
||||
}
|
||||
}
|
||||
|
||||
// Update spawn burst particles
|
||||
for (let i = spawnBursts.length - 1; i >= 0; i--) {
|
||||
const burst = spawnBursts[i];
|
||||
burst.age++;
|
||||
if (burst.age > 120) {
|
||||
scene.remove(burst.particles);
|
||||
burst.particles.geometry.dispose();
|
||||
(burst.particles.material as THREE.Material).dispose();
|
||||
spawnBursts.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
const positions = burst.particles.geometry.attributes.position as THREE.BufferAttribute;
|
||||
const vels = burst.particles.geometry.attributes.velocity as THREE.BufferAttribute;
|
||||
for (let j = 0; j < positions.count; j++) {
|
||||
positions.setX(j, positions.getX(j) + vels.getX(j));
|
||||
positions.setY(j, positions.getY(j) + vels.getY(j));
|
||||
positions.setZ(j, positions.getZ(j) + vels.getZ(j));
|
||||
// Dampen velocity
|
||||
vels.setX(j, vels.getX(j) * 0.97);
|
||||
vels.setY(j, vels.getY(j) * 0.97);
|
||||
vels.setZ(j, vels.getZ(j) * 0.97);
|
||||
}
|
||||
positions.needsUpdate = true;
|
||||
const mat = burst.particles.material as THREE.PointsMaterial;
|
||||
mat.opacity = Math.max(0, 1 - burst.age / 120);
|
||||
mat.size = 0.6 * (1 - burst.age / 200);
|
||||
}
|
||||
|
||||
// Update shockwave rings
|
||||
for (let i = shockwaves.length - 1; i >= 0; i--) {
|
||||
const sw = shockwaves[i];
|
||||
sw.age++;
|
||||
if (sw.age > sw.maxAge) {
|
||||
scene.remove(sw.mesh);
|
||||
sw.mesh.geometry.dispose();
|
||||
(sw.mesh.material as THREE.Material).dispose();
|
||||
shockwaves.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
const progress = sw.age / sw.maxAge;
|
||||
const scale = 1 + progress * 20;
|
||||
sw.mesh.scale.setScalar(scale);
|
||||
(sw.mesh.material as THREE.MeshBasicMaterial).opacity = 0.8 * (1 - progress);
|
||||
sw.mesh.lookAt(camera.position);
|
||||
}
|
||||
|
||||
// Update connection flash lines
|
||||
for (let i = connectionFlashes.length - 1; i >= 0; i--) {
|
||||
const flash = connectionFlashes[i];
|
||||
flash.intensity -= 0.015;
|
||||
if (flash.intensity <= 0) {
|
||||
scene.remove(flash.line);
|
||||
flash.line.geometry.dispose();
|
||||
(flash.line.material as THREE.Material).dispose();
|
||||
connectionFlashes.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
(flash.line.material as THREE.LineBasicMaterial).opacity = flash.intensity;
|
||||
}
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
if (!container) return;
|
||||
const w = container.clientWidth;
|
||||
const h = container.clientHeight;
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(w, h);
|
||||
composer.setSize(w, h);
|
||||
}
|
||||
|
||||
function onPointerMove(event: PointerEvent) {
|
||||
const rect = container.getBoundingClientRect();
|
||||
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
|
||||
raycaster.setFromCamera(mouse, camera);
|
||||
const meshes = Array.from(nodeMeshMap.values());
|
||||
const intersects = raycaster.intersectObjects(meshes);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
hoveredNode = intersects[0].object.userData.nodeId;
|
||||
container.style.cursor = 'pointer';
|
||||
} else {
|
||||
hoveredNode = null;
|
||||
container.style.cursor = 'grab';
|
||||
}
|
||||
}
|
||||
|
||||
function onClick() {
|
||||
if (hoveredNode) {
|
||||
selectedNode = hoveredNode;
|
||||
onSelect?.(hoveredNode);
|
||||
|
||||
// Fly camera to selected node
|
||||
const pos = nodePositions.get(hoveredNode);
|
||||
if (pos) {
|
||||
const target = pos.clone();
|
||||
controls.target.lerp(target, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={container} class="w-full h-full"></div>
|
||||
84
apps/dashboard/src/lib/components/RetentionCurve.svelte
Normal file
84
apps/dashboard/src/lib/components/RetentionCurve.svelte
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
retention: number;
|
||||
stability: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
let { retention, stability, width = 240, height = 80 }: Props = $props();
|
||||
|
||||
// FSRS-6 retention formula: R(t) = e^(-t/S)
|
||||
// where S = stability (in days), t = time since last review
|
||||
function retentionAt(days: number): number {
|
||||
if (stability <= 0) return 0;
|
||||
return Math.exp(-days / stability);
|
||||
}
|
||||
|
||||
// Generate SVG path for the decay curve
|
||||
let curvePath = $derived(() => {
|
||||
const points: string[] = [];
|
||||
const maxDays = Math.max(stability * 3, 30);
|
||||
const padding = 4;
|
||||
const w = width - padding * 2;
|
||||
const h = height - padding * 2;
|
||||
|
||||
for (let i = 0; i <= 50; i++) {
|
||||
const t = (i / 50) * maxDays;
|
||||
const r = retentionAt(t);
|
||||
const x = padding + (i / 50) * w;
|
||||
const y = padding + (1 - r) * h;
|
||||
points.push(`${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`);
|
||||
}
|
||||
return points.join(' ');
|
||||
});
|
||||
|
||||
// Key prediction points
|
||||
let predictions = $derived([
|
||||
{ label: 'Now', days: 0, value: retention },
|
||||
{ label: '1d', days: 1, value: retentionAt(1) },
|
||||
{ label: '7d', days: 7, value: retentionAt(7) },
|
||||
{ label: '30d', days: 30, value: retentionAt(30) },
|
||||
]);
|
||||
|
||||
function retColor(r: number): string {
|
||||
if (r > 0.7) return '#10b981';
|
||||
if (r > 0.4) return '#f59e0b';
|
||||
return '#ef4444';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-2">
|
||||
<!-- SVG Curve -->
|
||||
<svg {width} {height} class="w-full" viewBox="0 0 {width} {height}">
|
||||
<!-- Grid lines -->
|
||||
<line x1="4" y1="{4 + (height - 8) * 0.5}" x2="{width - 4}" y2="{4 + (height - 8) * 0.5}" stroke="#2a2a5e" stroke-width="0.5" stroke-dasharray="2,4" />
|
||||
<line x1="4" y1="{4 + (height - 8) * 0.8}" x2="{width - 4}" y2="{4 + (height - 8) * 0.8}" stroke="#ef444430" stroke-width="0.5" stroke-dasharray="2,4" />
|
||||
|
||||
<!-- Decay curve -->
|
||||
<path d={curvePath()} fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" />
|
||||
|
||||
<!-- Fill under curve -->
|
||||
<path d="{curvePath()} L{width - 4},{height - 4} L4,{height - 4} Z" fill="url(#curveGrad)" opacity="0.15" />
|
||||
|
||||
<!-- Current retention dot -->
|
||||
<circle cx="4" cy="{4 + (1 - retention) * (height - 8)}" r="3" fill={retColor(retention)} />
|
||||
|
||||
<defs>
|
||||
<linearGradient id="curveGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#6366f1" />
|
||||
<stop offset="100%" stop-color="#6366f100" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- Prediction pills -->
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
{#each predictions as pred}
|
||||
<div class="flex items-center gap-1 text-[10px]">
|
||||
<span class="text-muted">{pred.label}:</span>
|
||||
<span style="color: {retColor(pred.value)}">{(pred.value * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
86
apps/dashboard/src/lib/stores/api.ts
Normal file
86
apps/dashboard/src/lib/stores/api.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import type {
|
||||
MemoryListResponse,
|
||||
Memory,
|
||||
SearchResult,
|
||||
SystemStats,
|
||||
HealthCheck,
|
||||
TimelineResponse,
|
||||
GraphResponse,
|
||||
DreamResult,
|
||||
ImportanceScore,
|
||||
RetentionDistribution,
|
||||
ConsolidationResult,
|
||||
IntentionItem
|
||||
} from '$types';
|
||||
|
||||
const BASE = '/api';
|
||||
|
||||
async function fetcher<T>(path: string, options?: RequestInit): Promise<T> {
|
||||
const res = await fetch(`${BASE}${path}`, {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
...options
|
||||
});
|
||||
if (!res.ok) throw new Error(`API ${res.status}: ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export const api = {
|
||||
// Memories
|
||||
memories: {
|
||||
list: (params?: Record<string, string>) => {
|
||||
const qs = params ? '?' + new URLSearchParams(params).toString() : '';
|
||||
return fetcher<MemoryListResponse>(`/memories${qs}`);
|
||||
},
|
||||
get: (id: string) => fetcher<Memory>(`/memories/${id}`),
|
||||
delete: (id: string) => fetcher<{ deleted: boolean }>(`/memories/${id}`, { method: 'DELETE' }),
|
||||
promote: (id: string) => fetcher<Memory>(`/memories/${id}/promote`, { method: 'POST' }),
|
||||
demote: (id: string) => fetcher<Memory>(`/memories/${id}/demote`, { method: 'POST' })
|
||||
},
|
||||
|
||||
// Search
|
||||
search: (q: string, limit = 20) =>
|
||||
fetcher<SearchResult>(`/search?q=${encodeURIComponent(q)}&limit=${limit}`),
|
||||
|
||||
// Stats & Health
|
||||
stats: () => fetcher<SystemStats>('/stats'),
|
||||
health: () => fetcher<HealthCheck>('/health'),
|
||||
|
||||
// Timeline
|
||||
timeline: (days = 7, limit = 200) =>
|
||||
fetcher<TimelineResponse>(`/timeline?days=${days}&limit=${limit}`),
|
||||
|
||||
// Graph
|
||||
graph: (params?: { query?: string; center_id?: string; depth?: number; max_nodes?: number }) => {
|
||||
const qs = params ? '?' + new URLSearchParams(
|
||||
Object.entries(params)
|
||||
.filter(([, v]) => v !== undefined)
|
||||
.map(([k, v]) => [k, String(v)])
|
||||
).toString() : '';
|
||||
return fetcher<GraphResponse>(`/graph${qs}`);
|
||||
},
|
||||
|
||||
// Cognitive operations
|
||||
dream: () => fetcher<DreamResult>('/dream', { method: 'POST' }),
|
||||
|
||||
explore: (fromId: string, action = 'associations', toId?: string, limit = 10) =>
|
||||
fetcher<Record<string, unknown>>('/explore', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ from_id: fromId, action, to_id: toId, limit })
|
||||
}),
|
||||
|
||||
predict: () => fetcher<Record<string, unknown>>('/predict', { method: 'POST' }),
|
||||
|
||||
importance: (content: string) =>
|
||||
fetcher<ImportanceScore>('/importance', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ content })
|
||||
}),
|
||||
|
||||
consolidate: () => fetcher<ConsolidationResult>('/consolidate', { method: 'POST' }),
|
||||
|
||||
retentionDistribution: () => fetcher<RetentionDistribution>('/retention-distribution'),
|
||||
|
||||
// Intentions
|
||||
intentions: (status = 'active') =>
|
||||
fetcher<{ intentions: IntentionItem[]; total: number; filter: string }>(`/intentions?status=${status}`)
|
||||
};
|
||||
103
apps/dashboard/src/lib/stores/websocket.ts
Normal file
103
apps/dashboard/src/lib/stores/websocket.ts
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { writable, derived } from 'svelte/store';
|
||||
import type { VestigeEvent } from '$types';
|
||||
|
||||
const MAX_EVENTS = 200;
|
||||
|
||||
function createWebSocketStore() {
|
||||
const { subscribe, set, update } = writable<{
|
||||
connected: boolean;
|
||||
events: VestigeEvent[];
|
||||
lastHeartbeat: VestigeEvent | null;
|
||||
error: string | null;
|
||||
}>({
|
||||
connected: false,
|
||||
events: [],
|
||||
lastHeartbeat: null,
|
||||
error: null
|
||||
});
|
||||
|
||||
let ws: WebSocket | null = null;
|
||||
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let reconnectAttempts = 0;
|
||||
|
||||
function connect(url?: string) {
|
||||
const wsUrl = url || (window.location.port === '5173'
|
||||
? `ws://${window.location.hostname}:3927/ws`
|
||||
: `ws://${window.location.host}/ws`);
|
||||
|
||||
if (ws?.readyState === WebSocket.OPEN) return;
|
||||
|
||||
try {
|
||||
ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
reconnectAttempts = 0;
|
||||
update(s => ({ ...s, connected: true, error: null }));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const parsed: VestigeEvent = JSON.parse(event.data);
|
||||
update(s => {
|
||||
if (parsed.type === 'Heartbeat') {
|
||||
return { ...s, lastHeartbeat: parsed };
|
||||
}
|
||||
const events = [parsed, ...s.events].slice(0, MAX_EVENTS);
|
||||
return { ...s, events };
|
||||
});
|
||||
} catch {
|
||||
// Ignore malformed messages
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
update(s => ({ ...s, connected: false }));
|
||||
scheduleReconnect(wsUrl);
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
update(s => ({ ...s, error: 'WebSocket connection failed' }));
|
||||
};
|
||||
} catch (e) {
|
||||
update(s => ({ ...s, error: String(e) }));
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleReconnect(url: string) {
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer);
|
||||
const delay = Math.min(1000 * 2 ** reconnectAttempts, 30000);
|
||||
reconnectAttempts++;
|
||||
reconnectTimer = setTimeout(() => connect(url), delay);
|
||||
}
|
||||
|
||||
function disconnect() {
|
||||
if (reconnectTimer) clearTimeout(reconnectTimer);
|
||||
ws?.close();
|
||||
ws = null;
|
||||
set({ connected: false, events: [], lastHeartbeat: null, error: null });
|
||||
}
|
||||
|
||||
function clearEvents() {
|
||||
update(s => ({ ...s, events: [] }));
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
connect,
|
||||
disconnect,
|
||||
clearEvents
|
||||
};
|
||||
}
|
||||
|
||||
export const websocket = createWebSocketStore();
|
||||
|
||||
// Derived stores for specific event types
|
||||
export const isConnected = derived(websocket, $ws => $ws.connected);
|
||||
export const eventFeed = derived(websocket, $ws => $ws.events);
|
||||
export const heartbeat = derived(websocket, $ws => $ws.lastHeartbeat);
|
||||
export const memoryCount = derived(websocket, $ws =>
|
||||
($ws.lastHeartbeat?.data?.memory_count as number) ?? 0
|
||||
);
|
||||
export const avgRetention = derived(websocket, $ws =>
|
||||
($ws.lastHeartbeat?.data?.avg_retention as number) ?? 0
|
||||
);
|
||||
207
apps/dashboard/src/lib/types/index.ts
Normal file
207
apps/dashboard/src/lib/types/index.ts
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
// Vestige API Types — auto-matched to Rust backend
|
||||
|
||||
export interface Memory {
|
||||
id: string;
|
||||
content: string;
|
||||
nodeType: string;
|
||||
tags: string[];
|
||||
retentionStrength: number;
|
||||
storageStrength: number;
|
||||
retrievalStrength: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
source?: string;
|
||||
reviewCount?: number;
|
||||
combinedScore?: number;
|
||||
sentimentScore?: number;
|
||||
sentimentMagnitude?: number;
|
||||
lastAccessedAt?: string;
|
||||
nextReviewAt?: string;
|
||||
validFrom?: string;
|
||||
validUntil?: string;
|
||||
}
|
||||
|
||||
export interface SearchResult {
|
||||
query: string;
|
||||
total: number;
|
||||
durationMs: number;
|
||||
results: Memory[];
|
||||
}
|
||||
|
||||
export interface MemoryListResponse {
|
||||
total: number;
|
||||
memories: Memory[];
|
||||
}
|
||||
|
||||
export interface SystemStats {
|
||||
totalMemories: number;
|
||||
dueForReview: number;
|
||||
averageRetention: number;
|
||||
averageStorageStrength: number;
|
||||
averageRetrievalStrength: number;
|
||||
withEmbeddings: number;
|
||||
embeddingCoverage: number;
|
||||
embeddingModel: string;
|
||||
oldestMemory?: string;
|
||||
newestMemory?: string;
|
||||
}
|
||||
|
||||
export interface HealthCheck {
|
||||
status: 'healthy' | 'degraded' | 'critical' | 'empty';
|
||||
totalMemories: number;
|
||||
averageRetention: number;
|
||||
version: string;
|
||||
}
|
||||
|
||||
export interface TimelineDay {
|
||||
date: string;
|
||||
count: number;
|
||||
memories: Memory[];
|
||||
}
|
||||
|
||||
export interface TimelineResponse {
|
||||
days: number;
|
||||
totalMemories: number;
|
||||
timeline: TimelineDay[];
|
||||
}
|
||||
|
||||
export interface GraphNode {
|
||||
id: string;
|
||||
label: string;
|
||||
type: string;
|
||||
retention: number;
|
||||
tags: string[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
isCenter: boolean;
|
||||
}
|
||||
|
||||
export interface GraphEdge {
|
||||
source: string;
|
||||
target: string;
|
||||
weight: number;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface GraphResponse {
|
||||
nodes: GraphNode[];
|
||||
edges: GraphEdge[];
|
||||
center_id: string;
|
||||
depth: number;
|
||||
nodeCount: number;
|
||||
edgeCount: number;
|
||||
}
|
||||
|
||||
export interface DreamResult {
|
||||
status: string;
|
||||
memoriesReplayed: number;
|
||||
connectionsPersisted: number;
|
||||
insights: DreamInsight[];
|
||||
stats: {
|
||||
newConnectionsFound: number;
|
||||
connectionsPersisted: number;
|
||||
memoriesStrengthened: number;
|
||||
memoriesCompressed: number;
|
||||
insightsGenerated: number;
|
||||
durationMs: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface DreamInsight {
|
||||
type: string;
|
||||
insight: string;
|
||||
sourceMemories: string[];
|
||||
confidence: number;
|
||||
noveltyScore: number;
|
||||
}
|
||||
|
||||
export interface ImportanceScore {
|
||||
composite: number;
|
||||
channels: {
|
||||
novelty: number;
|
||||
arousal: number;
|
||||
reward: number;
|
||||
attention: number;
|
||||
};
|
||||
recommendation: 'save' | 'skip';
|
||||
}
|
||||
|
||||
export interface RetentionDistribution {
|
||||
distribution: { range: string; count: number }[];
|
||||
byType: Record<string, number>;
|
||||
endangered: Memory[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface ConsolidationResult {
|
||||
nodesProcessed: number;
|
||||
decayApplied: number;
|
||||
embeddingsGenerated: number;
|
||||
duplicatesMerged: number;
|
||||
activationsComputed: number;
|
||||
durationMs: number;
|
||||
}
|
||||
|
||||
// WebSocket event types
|
||||
export type VestigeEventType =
|
||||
| 'Connected'
|
||||
| 'MemoryCreated'
|
||||
| 'MemoryUpdated'
|
||||
| 'MemoryDeleted'
|
||||
| 'MemoryPromoted'
|
||||
| 'MemoryDemoted'
|
||||
| 'SearchPerformed'
|
||||
| 'DreamStarted'
|
||||
| 'DreamProgress'
|
||||
| 'DreamCompleted'
|
||||
| 'ConsolidationStarted'
|
||||
| 'ConsolidationCompleted'
|
||||
| 'RetentionDecayed'
|
||||
| 'ConnectionDiscovered'
|
||||
| 'ActivationSpread'
|
||||
| 'ImportanceScored'
|
||||
| 'Heartbeat';
|
||||
|
||||
export interface VestigeEvent {
|
||||
type: VestigeEventType;
|
||||
data: Record<string, unknown>;
|
||||
}
|
||||
|
||||
// Intentions (prospective memory)
|
||||
export interface IntentionItem {
|
||||
id: string;
|
||||
content: string;
|
||||
trigger_type: string;
|
||||
trigger_value: string;
|
||||
status: string;
|
||||
priority: string;
|
||||
created_at: string;
|
||||
deadline?: string;
|
||||
snoozed_until?: string;
|
||||
}
|
||||
|
||||
// Node type colors for visualization
|
||||
export const NODE_TYPE_COLORS: Record<string, string> = {
|
||||
fact: '#3b82f6', // blue
|
||||
concept: '#8b5cf6', // purple
|
||||
event: '#f59e0b', // amber
|
||||
person: '#10b981', // emerald
|
||||
place: '#06b6d4', // cyan
|
||||
note: '#6b7280', // gray
|
||||
pattern: '#ec4899', // pink
|
||||
decision: '#ef4444', // red
|
||||
};
|
||||
|
||||
export const EVENT_TYPE_COLORS: Record<string, string> = {
|
||||
MemoryCreated: '#10b981',
|
||||
MemoryUpdated: '#3b82f6',
|
||||
MemoryDeleted: '#ef4444',
|
||||
SearchPerformed: '#6366f1',
|
||||
DreamStarted: '#8b5cf6',
|
||||
DreamCompleted: '#a855f7',
|
||||
ConsolidationStarted: '#f59e0b',
|
||||
ConsolidationCompleted: '#f97316',
|
||||
ConnectionDiscovered: '#06b6d4',
|
||||
ImportanceScored: '#ec4899',
|
||||
Heartbeat: '#6b7280',
|
||||
};
|
||||
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