mirror of
https://github.com/samvallad33/vestige.git
synced 2026-07-04 22:02:14 +02:00
feat: dashboard v2.1 glassmorphism + graph decomposition + fix flaky macOS vector test
Dashboard v2.1 "Nuclear" upgrade: - Dark glassmorphism UI system (4-tier glass utilities, ambient orbs, nav glow) - Graph3D decomposed from 806-line monolith into 10 focused modules - Custom GLSL shaders (nebula FBM background, chromatic aberration, film grain, vignette) - Enhanced dream mode with smooth 2s lerped transitions and aurora cycling - Cognitive pipeline visualizer (7-stage search cascade animation) - Temporal playback slider (scrub through memory evolution over time) - Bioluminescent color palette for node types and events Fix flaky CI test on macOS: - vector::tests::test_add_and_search used near-identical test vectors (additive phase shift) - Changed to multiplicative frequency so each seed produces a distinct vector Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Valladares
parent
2c1f499a8b
commit
d98cf6136a
241 changed files with 6262 additions and 4884 deletions
|
|
@ -74,10 +74,10 @@
|
|||
<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
|
||||
class="flex flex-col items-center gap-1 p-3 rounded-xl 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'}">
|
||||
? 'glass !border-synapse/30 text-synapse-glow'
|
||||
: 'glass-subtle text-dim hover:bg-white/[0.03]'}">
|
||||
<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>
|
||||
|
|
@ -87,22 +87,22 @@
|
|||
|
||||
<!-- Search for source memory -->
|
||||
<div class="space-y-3">
|
||||
<label class="text-xs text-dim font-medium">Source Memory</label>
|
||||
<span class="text-xs text-dim font-medium">Source Memory</span>
|
||||
<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" />
|
||||
class="flex-1 px-4 py-2.5 bg-white/[0.03] border border-synapse/10 rounded-xl text-text text-sm
|
||||
placeholder:text-muted focus:outline-none focus:border-synapse/40 transition backdrop-blur-sm" />
|
||||
<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">
|
||||
class="px-4 py-2.5 bg-synapse/20 border border-synapse/40 text-synapse-glow text-sm rounded-xl 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="p-3 glass rounded-xl !border-synapse/20">
|
||||
<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">
|
||||
|
|
@ -115,22 +115,22 @@
|
|||
<!-- 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>
|
||||
<span class="text-xs text-dim font-medium">Target Memory <span class="text-muted">(for {mode})</span></span>
|
||||
<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" />
|
||||
class="flex-1 px-4 py-2.5 bg-white/[0.03] border border-synapse/10 rounded-xl text-text text-sm
|
||||
placeholder:text-muted focus:outline-none focus:border-dream/40 transition backdrop-blur-sm" />
|
||||
<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">
|
||||
class="px-4 py-2.5 bg-dream/20 border border-dream/40 text-dream-glow text-sm rounded-xl 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="p-3 glass rounded-xl !border-dream/20">
|
||||
<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">
|
||||
|
|
@ -155,14 +155,14 @@
|
|||
</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="p-3 glass-subtle rounded-xl flex items-start gap-3 hover:bg-white/[0.03] 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.nodeType}<span class="px-1.5 py-0.5 bg-white/[0.04] 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}
|
||||
|
|
@ -182,29 +182,29 @@
|
|||
{/if}
|
||||
|
||||
<!-- Importance Scorer -->
|
||||
<div class="pt-8 border-t border-subtle/20">
|
||||
<div class="pt-8 border-t border-synapse/10">
|
||||
<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"
|
||||
class="w-full h-24 px-4 py-3 bg-white/[0.03] border border-synapse/10 rounded-xl text-text text-sm
|
||||
placeholder:text-muted resize-none focus:outline-none focus:border-synapse/40 transition backdrop-blur-sm"
|
||||
></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">
|
||||
class="mt-2 px-4 py-2 bg-dream/20 border border-dream/40 text-dream-glow text-sm rounded-xl 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="mt-4 p-4 glass rounded-xl">
|
||||
<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
|
||||
<span class="px-2 py-1 rounded-lg text-xs {composite > 0.6
|
||||
? 'bg-recall/20 text-recall border border-recall/30'
|
||||
: 'bg-surface text-dim border border-subtle/30'}">
|
||||
: 'bg-white/[0.04] text-dim border border-subtle/20'}">
|
||||
{composite > 0.6 ? 'SAVE' : 'SKIP'}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { eventFeed, websocket } from '$stores/websocket';
|
||||
import { EVENT_TYPE_COLORS, type VestigeEvent } from '$types';
|
||||
import PipelineVisualizer from '$components/PipelineVisualizer.svelte';
|
||||
|
||||
function formatTime(ts: string): string {
|
||||
return new Date(ts).toLocaleTimeString();
|
||||
|
|
@ -66,22 +67,31 @@
|
|||
<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'}"
|
||||
class="flex items-start gap-3 p-3 glass-subtle rounded-xl
|
||||
hover:bg-white/[0.03] transition-all duration-200"
|
||||
style="border-left: 3px solid {EVENT_TYPE_COLORS[event.type] || '#8B95A5'}"
|
||||
>
|
||||
<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'}">
|
||||
style="background: {EVENT_TYPE_COLORS[event.type] || '#8B95A5'}15; color: {EVENT_TYPE_COLORS[event.type] || '#8B95A5'}">
|
||||
{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>
|
||||
<span class="text-xs font-medium" style="color: {EVENT_TYPE_COLORS[event.type] || '#8B95A5'}">{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>
|
||||
{#if event.type === 'SearchPerformed'}
|
||||
<div class="mt-2">
|
||||
<PipelineVisualizer
|
||||
resultCount={Number(event.data.result_count) || 0}
|
||||
durationMs={Number(event.data.duration_ms) || 0}
|
||||
active={true}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@
|
|||
import { onMount } from 'svelte';
|
||||
import Graph3D from '$components/Graph3D.svelte';
|
||||
import RetentionCurve from '$components/RetentionCurve.svelte';
|
||||
import TimeSlider from '$components/TimeSlider.svelte';
|
||||
import { api } from '$stores/api';
|
||||
import { eventFeed } from '$stores/websocket';
|
||||
import type { GraphResponse, Memory } from '$types';
|
||||
import type { GraphResponse, GraphNode, GraphEdge, Memory } from '$types';
|
||||
import { filterByDate } from '$lib/graph/temporal';
|
||||
|
||||
let graphData: GraphResponse | null = $state(null);
|
||||
let selectedMemory: Memory | null = $state(null);
|
||||
|
|
@ -13,6 +15,21 @@
|
|||
let isDreaming = $state(false);
|
||||
let searchQuery = $state('');
|
||||
let maxNodes = $state(150);
|
||||
let temporalEnabled = $state(false);
|
||||
let temporalDate = $state(new Date());
|
||||
|
||||
// Filtered graph data based on temporal mode
|
||||
let displayNodes = $derived.by((): GraphNode[] => {
|
||||
if (!graphData) return [];
|
||||
if (!temporalEnabled) return graphData.nodes;
|
||||
return filterByDate(graphData.nodes, graphData.edges, temporalDate).visibleNodes;
|
||||
});
|
||||
|
||||
let displayEdges = $derived.by((): GraphEdge[] => {
|
||||
if (!graphData) return [];
|
||||
if (!temporalEnabled) return graphData.edges;
|
||||
return filterByDate(graphData.nodes, graphData.edges, temporalDate).visibleEdges;
|
||||
});
|
||||
|
||||
onMount(() => loadGraph());
|
||||
|
||||
|
|
@ -73,8 +90,8 @@
|
|||
</div>
|
||||
{:else if graphData}
|
||||
<Graph3D
|
||||
nodes={graphData.nodes}
|
||||
edges={graphData.edges}
|
||||
nodes={displayNodes}
|
||||
edges={displayEdges}
|
||||
centerId={graphData.center_id}
|
||||
events={$eventFeed}
|
||||
{isDreaming}
|
||||
|
|
@ -91,11 +108,11 @@
|
|||
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"
|
||||
class="flex-1 px-3 py-2 glass rounded-xl text-text text-sm
|
||||
placeholder:text-muted focus:outline-none focus:!border-synapse/40 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">
|
||||
class="px-3 py-2 bg-synapse/20 border border-synapse/40 text-synapse-glow text-sm rounded-xl hover:bg-synapse/30 transition backdrop-blur-sm">
|
||||
Focus
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -103,7 +120,7 @@
|
|||
<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">
|
||||
class="px-2 py-2 glass rounded-xl text-dim text-xs">
|
||||
<option value={50}>50 nodes</option>
|
||||
<option value={100}>100 nodes</option>
|
||||
<option value={150}>150 nodes</option>
|
||||
|
|
@ -114,7 +131,7 @@
|
|||
<button
|
||||
onclick={triggerDream}
|
||||
disabled={isDreaming}
|
||||
class="px-4 py-2 rounded-lg bg-dream/20 border border-dream/40 text-dream-glow text-sm
|
||||
class="px-4 py-2 rounded-xl 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' : ''}"
|
||||
>
|
||||
|
|
@ -123,26 +140,35 @@
|
|||
|
||||
<!-- 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">
|
||||
class="px-3 py-2 glass rounded-xl 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">
|
||||
<div class="absolute bottom-4 left-4 z-10 text-xs text-dim glass rounded-xl px-3 py-2">
|
||||
{#if graphData}
|
||||
<span>{graphData.nodeCount} nodes</span>
|
||||
<span>{displayNodes.length} nodes</span>
|
||||
<span class="mx-2 text-subtle">·</span>
|
||||
<span>{graphData.edgeCount} edges</span>
|
||||
<span>{displayEdges.length} edges</span>
|
||||
<span class="mx-2 text-subtle">·</span>
|
||||
<span>depth {graphData.depth}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Temporal playback slider -->
|
||||
{#if graphData}
|
||||
<TimeSlider
|
||||
nodes={graphData.nodes}
|
||||
onDateChange={(date) => { temporalDate = date; }}
|
||||
onToggle={(enabled) => { temporalEnabled = enabled; }}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- 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
|
||||
<div class="absolute right-0 top-0 h-full w-96 glass-panel 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>
|
||||
|
|
@ -151,9 +177,9 @@
|
|||
|
||||
<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>
|
||||
<span class="px-2 py-0.5 rounded-lg 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>
|
||||
<span class="px-2 py-0.5 rounded-lg text-xs bg-white/[0.04] text-dim">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
|
@ -171,7 +197,7 @@
|
|||
<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-1.5 bg-white/[0.04] rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full rounded-full transition-all duration-500"
|
||||
style="width: {bar.value * 100}%; background: {
|
||||
|
|
@ -205,13 +231,13 @@
|
|||
<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"
|
||||
class="flex-1 px-3 py-2 rounded-xl 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"
|
||||
class="flex-1 px-3 py-2 rounded-xl bg-decay/20 text-decay text-xs hover:bg-decay/30 transition"
|
||||
>
|
||||
↓ Demote
|
||||
</button>
|
||||
|
|
@ -220,7 +246,7 @@
|
|||
<!-- 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"
|
||||
class="block text-center px-3 py-2 rounded-xl bg-dream/10 text-dream-glow text-xs hover:bg-dream/20 transition border border-dream/20"
|
||||
>
|
||||
◬ Explore Connections
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
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',
|
||||
cancelled: 'text-dim bg-white/[0.03] border-subtle/20',
|
||||
snoozed: 'text-dream-glow bg-dream/10 border-dream/30',
|
||||
};
|
||||
|
||||
|
|
@ -76,9 +76,9 @@
|
|||
{#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
|
||||
class="px-3 py-1.5 rounded-xl 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'}"
|
||||
: 'glass-subtle text-dim hover:bg-white/[0.03]'}"
|
||||
>
|
||||
{status.charAt(0).toUpperCase() + status.slice(1)}
|
||||
</button>
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
{#if loading}
|
||||
<div class="space-y-2">
|
||||
{#each Array(4) as _}
|
||||
<div class="h-16 bg-surface/50 rounded-lg animate-pulse"></div>
|
||||
<div class="h-16 glass-subtle rounded-xl animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if intentions.length === 0}
|
||||
|
|
@ -100,10 +100,10 @@
|
|||
{: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="p-4 glass-subtle rounded-xl">
|
||||
<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">
|
||||
<div class="w-8 h-8 rounded-lg bg-white/[0.04] flex items-center justify-center text-lg flex-shrink-0">
|
||||
{TRIGGER_ICONS[intention.trigger_type] || '◇'}
|
||||
</div>
|
||||
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
<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'}">
|
||||
<span class="px-2 py-0.5 text-[10px] rounded-lg border {STATUS_COLORS[intention.status] || 'text-dim bg-white/[0.03] border-subtle/20'}">
|
||||
{intention.status}
|
||||
</span>
|
||||
<!-- Priority -->
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Predictions Section -->
|
||||
<div class="pt-6 border-t border-subtle/20 space-y-4">
|
||||
<div class="pt-6 border-t border-synapse/10 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>
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
{: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="p-3 glass-subtle rounded-xl 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>
|
||||
|
|
|
|||
|
|
@ -57,11 +57,11 @@
|
|||
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"
|
||||
class="flex-1 min-w-64 px-4 py-2.5 bg-white/[0.03] border border-synapse/10 rounded-xl text-text text-sm
|
||||
placeholder:text-muted focus:outline-none focus:border-synapse/40 focus:ring-1 focus:ring-synapse/20 transition backdrop-blur-sm"
|
||||
/>
|
||||
<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">
|
||||
class="px-3 py-2.5 bg-white/[0.03] border border-synapse/10 rounded-xl text-dim text-sm focus:outline-none backdrop-blur-sm">
|
||||
<option value="">All types</option>
|
||||
<option value="fact">Fact</option>
|
||||
<option value="concept">Concept</option>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
{#if loading}
|
||||
<div class="grid gap-3">
|
||||
{#each Array(8) as _}
|
||||
<div class="h-24 bg-surface/50 rounded-lg animate-pulse"></div>
|
||||
<div class="h-24 glass-subtle rounded-xl animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
|
|
@ -92,17 +92,17 @@
|
|||
{#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' : ''}"
|
||||
class="text-left p-4 glass-subtle rounded-xl hover:bg-white/[0.04]
|
||||
transition-all duration-200 group
|
||||
{selectedMemory?.id === memory.id ? '!border-synapse/40 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="w-2 h-2 rounded-full" style="background: {NODE_TYPE_COLORS[memory.nodeType] || '#8B95A5'}"></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>
|
||||
<span class="text-xs px-1.5 py-0.5 bg-white/[0.04] rounded text-muted">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<p class="text-sm text-text leading-relaxed line-clamp-2">{memory.content}</p>
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
</div>
|
||||
|
||||
{#if selectedMemory?.id === memory.id}
|
||||
<div class="mt-4 pt-4 border-t border-subtle/20 space-y-3">
|
||||
<div class="mt-4 pt-4 border-t border-synapse/10 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>
|
||||
|
|
@ -126,13 +126,13 @@
|
|||
<div class="flex gap-2">
|
||||
<span role="button" tabindex="0" onclick={(e) => { e.stopPropagation(); api.memories.promote(memory.id); }}
|
||||
onkeydown={(e) => { if (e.key === 'Enter') { 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 cursor-pointer select-none">Promote</span>
|
||||
class="px-3 py-1.5 bg-recall/20 text-recall text-xs rounded-lg hover:bg-recall/30 cursor-pointer select-none">Promote</span>
|
||||
<span role="button" tabindex="0" onclick={(e) => { e.stopPropagation(); api.memories.demote(memory.id); }}
|
||||
onkeydown={(e) => { if (e.key === 'Enter') { 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 cursor-pointer select-none">Demote</span>
|
||||
class="px-3 py-1.5 bg-decay/20 text-decay text-xs rounded-lg hover:bg-decay/30 cursor-pointer select-none">Demote</span>
|
||||
<span role="button" tabindex="0" onclick={async (e) => { e.stopPropagation(); await api.memories.delete(memory.id); loadMemories(); }}
|
||||
onkeydown={async (e) => { if (e.key === 'Enter') { e.stopPropagation(); await 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 cursor-pointer select-none">Delete</span>
|
||||
class="px-3 py-1.5 bg-decay/10 text-decay/60 text-xs rounded-lg hover:bg-decay/20 ml-auto cursor-pointer select-none">Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -66,23 +66,23 @@
|
|||
|
||||
<!-- 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="p-4 glass rounded-xl 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="p-4 glass rounded-xl 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="p-4 glass rounded-xl 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="p-4 glass rounded-xl text-center">
|
||||
<div class="text-2xl text-synapse-glow font-bold">v2.1</div>
|
||||
<div class="text-xs text-dim mt-1">Vestige</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,14 +94,14 @@
|
|||
</h2>
|
||||
|
||||
<!-- Consolidation -->
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg space-y-3">
|
||||
<div class="p-4 glass rounded-xl 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">
|
||||
class="px-4 py-2 bg-warning/20 border border-warning/40 text-warning text-sm rounded-xl 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...
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
</button>
|
||||
</div>
|
||||
{#if consolidationResult}
|
||||
<div class="bg-deep/50 p-3 rounded-lg border border-subtle/10">
|
||||
<div class="bg-white/[0.02] p-3 rounded-lg border border-synapse/10">
|
||||
<div class="grid grid-cols-3 gap-3 text-center">
|
||||
{#if consolidationResult.nodesProcessed !== undefined}
|
||||
<div>
|
||||
|
|
@ -137,14 +137,14 @@
|
|||
</div>
|
||||
|
||||
<!-- Dream -->
|
||||
<div class="p-4 bg-surface/30 border border-subtle/20 rounded-lg space-y-3">
|
||||
<div class="p-4 glass rounded-xl 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
|
||||
class="px-4 py-2 bg-dream/20 border border-dream/40 text-dream-glow text-sm rounded-xl 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>
|
||||
|
|
@ -155,11 +155,11 @@
|
|||
</button>
|
||||
</div>
|
||||
{#if dreamResult}
|
||||
<div class="bg-deep/50 p-3 rounded-lg border border-subtle/10 space-y-2">
|
||||
<div class="bg-white/[0.02] p-3 rounded-lg border border-synapse/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">
|
||||
<div class="text-xs text-dim bg-dream/5 border border-dream/10 rounded-lg p-2">
|
||||
{typeof insight === 'string' ? insight : JSON.stringify(insight)}
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
<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">
|
||||
<div class="p-4 glass rounded-xl">
|
||||
{#if retentionDist.distribution && Array.isArray(retentionDist.distribution)}
|
||||
<div class="flex items-end gap-1 h-32">
|
||||
{#each retentionDist.distribution as bucket, i}
|
||||
|
|
@ -208,7 +208,7 @@
|
|||
<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="p-4 glass-subtle rounded-xl">
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
{#each [
|
||||
{ key: '⌘ K', desc: 'Command palette' },
|
||||
|
|
@ -221,7 +221,7 @@
|
|||
{ 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>
|
||||
<kbd class="px-1.5 py-0.5 bg-white/[0.04] rounded text-[10px] font-mono text-muted min-w-[2rem] text-center">{shortcut.key}</kbd>
|
||||
<span class="text-dim">{shortcut.desc}</span>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -234,17 +234,17 @@
|
|||
<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="p-4 glass rounded-xl 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-sm text-bright font-semibold">Vestige v2.1 "Nuclear Dashboard"</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 class="grid grid-cols-2 gap-2 text-xs text-dim pt-2 border-t border-synapse/10">
|
||||
<div>29 cognitive modules</div>
|
||||
<div>FSRS-6 spaced repetition</div>
|
||||
<div>Nomic Embed v1.5 (256d)</div>
|
||||
|
|
|
|||
|
|
@ -42,12 +42,12 @@
|
|||
{#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>
|
||||
<div class="h-24 glass-subtle rounded-xl 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="flex items-center gap-3 p-4 glass rounded-xl" style="border-color: {statusColor(health.status)}30">
|
||||
<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>
|
||||
|
|
@ -55,19 +55,19 @@
|
|||
|
||||
<!-- 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="p-4 glass rounded-xl">
|
||||
<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="p-4 glass rounded-xl">
|
||||
<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="p-4 glass rounded-xl">
|
||||
<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="p-4 glass rounded-xl">
|
||||
<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>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
<!-- Retention Distribution -->
|
||||
{#if retention}
|
||||
<div class="p-6 bg-surface/30 border border-subtle/20 rounded-lg">
|
||||
<div class="p-6 glass rounded-xl">
|
||||
<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}
|
||||
|
|
@ -92,12 +92,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Type breakdown -->
|
||||
<div class="p-6 bg-surface/30 border border-subtle/20 rounded-lg">
|
||||
<div class="p-6 glass-subtle rounded-xl">
|
||||
<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>
|
||||
<div class="w-3 h-3 rounded-full" style="background: {({'fact':'#00A8FF','concept':'#9D00FF','event':'#FFB800','person':'#00FFD1','note':'#8B95A5','pattern':'#FF3CAC','decision':'#FF4757'})[type] || '#8B95A5'}"></div>
|
||||
<span class="text-dim">{type}</span>
|
||||
<span class="text-muted ml-auto">{count}</span>
|
||||
</div>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
|
||||
<!-- Endangered memories -->
|
||||
{#if retention.endangered.length > 0}
|
||||
<div class="p-6 bg-decay/5 border border-decay/20 rounded-lg">
|
||||
<div class="p-6 glass rounded-xl !border-decay/20">
|
||||
<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}
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
<!-- 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">
|
||||
class="px-4 py-2 bg-warning/20 border border-warning/40 text-warning text-sm rounded-xl hover:bg-warning/30 transition">
|
||||
Run Consolidation
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<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">
|
||||
class="px-3 py-2 bg-white/[0.03] border border-synapse/10 rounded-xl text-dim text-sm focus:outline-none backdrop-blur-sm">
|
||||
<option value={7}>7 days</option>
|
||||
<option value={14}>14 days</option>
|
||||
<option value={30}>30 days</option>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
{#if loading}
|
||||
<div class="space-y-4">
|
||||
{#each Array(7) as _}
|
||||
<div class="h-16 bg-surface/50 rounded-lg animate-pulse"></div>
|
||||
<div class="h-16 glass-subtle rounded-xl animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if timeline.length === 0}
|
||||
|
|
@ -49,18 +49,18 @@
|
|||
{:else}
|
||||
<div class="relative">
|
||||
<!-- Timeline line -->
|
||||
<div class="absolute left-6 top-0 bottom-0 w-px bg-subtle/30"></div>
|
||||
<div class="absolute left-6 top-0 bottom-0 w-px bg-synapse/15"></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="absolute left-4 top-3 w-5 h-5 rounded-full border-2 border-synapse bg-void 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">
|
||||
class="w-full text-left p-4 glass-subtle rounded-xl hover:bg-white/[0.03] transition-all">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-sm text-bright font-medium">{day.date}</span>
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
<!-- 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>
|
||||
<div class="w-2 h-2 rounded-full" style="background: {NODE_TYPE_COLORS[m.nodeType] || '#8B95A5'}; 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>
|
||||
|
|
@ -78,10 +78,10 @@
|
|||
</div>
|
||||
|
||||
{#if expandedDay === day.date}
|
||||
<div class="mt-3 pt-3 border-t border-subtle/20 space-y-2">
|
||||
<div class="mt-3 pt-3 border-t border-synapse/10 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="w-2 h-2 mt-1.5 rounded-full flex-shrink-0" style="background: {NODE_TYPE_COLORS[m.nodeType] || '#8B95A5'}"></div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="text-dim line-clamp-1">{m.content}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
let { children } = $props();
|
||||
let showCommandPalette = $state(false);
|
||||
let cmdQuery = $state('');
|
||||
let cmdInput: HTMLInputElement;
|
||||
let cmdInput = $state<HTMLInputElement>(undefined as unknown as HTMLInputElement);
|
||||
|
||||
onMount(() => {
|
||||
websocket.connect();
|
||||
|
|
@ -87,14 +87,19 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<!-- Ambient background orbs -->
|
||||
<div class="ambient-orb ambient-orb-1" aria-hidden="true"></div>
|
||||
<div class="ambient-orb ambient-orb-2" aria-hidden="true"></div>
|
||||
<div class="ambient-orb ambient-orb-3" aria-hidden="true"></div>
|
||||
|
||||
<!-- Desktop: sidebar + content -->
|
||||
<!-- Mobile: content + bottom nav -->
|
||||
<div class="flex flex-col md:flex-row h-screen overflow-hidden bg-void">
|
||||
<div class="flex flex-col md:flex-row h-screen overflow-hidden bg-void relative z-[1]">
|
||||
<!-- 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">
|
||||
<nav class="hidden md:flex w-16 lg:w-56 flex-shrink-0 glass-sidebar flex-col">
|
||||
<!-- Logo -->
|
||||
<a href="/graph" 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">
|
||||
<a href="/graph" class="flex items-center gap-3 px-4 py-5 border-b border-synapse/10">
|
||||
<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 shadow-lg shadow-synapse/20">
|
||||
V
|
||||
</div>
|
||||
<span class="hidden lg:block text-sm font-semibold text-bright tracking-wide">VESTIGE</span>
|
||||
|
|
@ -108,8 +113,8 @@
|
|||
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'}"
|
||||
? 'bg-synapse/15 text-synapse-glow border border-synapse/30 shadow-[0_0_12px_rgba(99,102,241,0.15)] nav-active-border'
|
||||
: 'text-dim hover:text-text hover:bg-white/[0.03] border border-transparent'}"
|
||||
>
|
||||
<span class="text-base w-5 text-center">{item.icon}</span>
|
||||
<span class="hidden lg:block">{item.label}</span>
|
||||
|
|
@ -122,15 +127,15 @@
|
|||
<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"
|
||||
class="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-muted hover:text-dim hover:bg-white/[0.03] transition border border-subtle/15"
|
||||
>
|
||||
<span class="text-[10px] font-mono bg-surface/60 px-1.5 py-0.5 rounded">⌘K</span>
|
||||
<span class="text-[10px] font-mono bg-white/[0.04] 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="px-3 py-4 border-t border-synapse/10 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>
|
||||
|
|
@ -150,7 +155,7 @@
|
|||
</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">
|
||||
<nav class="md:hidden fixed bottom-0 inset-x-0 glass border-t border-synapse/10 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)}
|
||||
|
|
@ -183,8 +188,8 @@
|
|||
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">
|
||||
<div class="w-full max-w-lg glass-panel rounded-xl shadow-2xl shadow-synapse/10 overflow-hidden">
|
||||
<div class="flex items-center gap-3 px-4 py-3 border-b border-synapse/10">
|
||||
<span class="text-synapse text-sm">◎</span>
|
||||
<input
|
||||
bind:this={cmdInput}
|
||||
|
|
@ -198,13 +203,13 @@
|
|||
}
|
||||
}}
|
||||
/>
|
||||
<span class="text-[10px] text-muted font-mono bg-surface/40 px-1.5 py-0.5 rounded">esc</span>
|
||||
<span class="text-[10px] text-muted font-mono bg-white/[0.04] 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"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-dim hover:text-text hover:bg-white/[0.04] transition"
|
||||
>
|
||||
<span class="text-base w-5 text-center">{item.icon}</span>
|
||||
<span>{item.label}</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue