// diagrams.jsx — schematic SVG diagrams. // All diagrams paint with CSS variable references so theming is centralized. // Token mapping (var → SVG fill/stroke): // --vt-bg → background fill // --vt-ink → primary stroke / dark fill // --vt-muted → secondary text // --vt-faint → tertiary text // --vt-rule → soft hairlines // --vt-accent → teal accent (active state, "v0.1" features) // --vt-mint → mint highlight (legible on ink) // --vt-accent-bg → tinted accent fill // --vt-mint-bg → tinted mint fill const C = { bg: 'var(--vt-bg)', ink: 'var(--vt-ink)', muted: 'var(--vt-muted)', faint: 'var(--vt-faint)', rule: 'var(--vt-rule)', accent: 'var(--vt-accent)', mint: 'var(--vt-mint)', accentBg: 'var(--vt-accent-bg)', mintBg: 'var(--vt-mint-bg)', panel: 'var(--vt-panel)', }; // ══════════════════════════════════════════════════════════════════ // SystemSchematic — fig.01 // Clients (agent / human / repo) → surfaces (MCP / CLI) → core → stores. // ══════════════════════════════════════════════════════════════════ function SystemSchematic() { return (
PROCESS BOUNDARY · LOCAL MACHINE {/* Clients */} CLIENT Coding agent claude · cursor · codex CLIENT Human shell · terminal CONTEXT Repository cwd · git remote {/* Surfaces */} MCP server CLI .vestige/pin.toml (committed pointer) {[[130, 114, 130, 156], [320, 114, 320, 156], [503, 114, 503, 156]].map(([x1,y1,x2,y2], i) => ( ))} {/* Core */} CORE SERVICE · vestige-core capture · recall · disclosure · scope single in-process module · no daemon · no IPC {[[130, 200, 240, 234], [320, 200, 320, 234], [503, 200, 400, 234]].map(([x1,y1,x2,y2], i) => ( ))} {/* Stores */} CANONICAL STORE SQLite memories · representations · sources ~/.local/share/vestige/{''}.db INDEX · DERIVED FTS5 lexical · v0 rebuildable INDEX · v0.1 sqlite-vec vectors · optional rebuildable {[[200, 302, 160, 338], [310, 302, 366, 338], [430, 302, 519, 338]].map(([x1,y1,x2,y2], i) => ( ))}
); } // ══════════════════════════════════════════════════════════════════ // RecallPipeline — fig.03 // Query → scope filter → FTS + vector → merge → compact cards. // ══════════════════════════════════════════════════════════════════ function RecallPipeline() { return (
INPUT query SCOPE project filter LEXICAL · v0 FTS5 search tokens, prefix, BM25 SEMANTIC · v0.1 vector kNN per-representation MERGE dedup · score · rank by memory_id OUTPUT compact cards id · type · L1 score · score_parts available_depths
); } // ══════════════════════════════════════════════════════════════════ // StorageLayout — fig.05a // Two file-tree panels: in-repo committed pin, user-data canonical store. // ══════════════════════════════════════════════════════════════════ function StorageLayout() { const Tree = ({ title, lines }) => (
{title}
{lines}
); return (
); } // ══════════════════════════════════════════════════════════════════ // SchemaDiagram — fig.05b // Six tables: V0 core (memories, representations, sources) // V0.1 (memory_embeddings, embedding_jobs, vec_index). // ══════════════════════════════════════════════════════════════════ function SchemaDiagram() { const Table = ({ x, y, w, name, cols, accent = false }) => ( {name} {cols.map((c, i) => ( {c[0]} {c[1]} ))} ); return (
); } // ══════════════════════════════════════════════════════════════════ // EmbeddingLifecycle — fig.06 // State diagram: missing → pending → active → stale → rebuilt. // ══════════════════════════════════════════════════════════════════ function EmbeddingLifecycle() { const State = ({ x, y, w, h, label, sub, fill = C.bg, textColor = C.ink }) => ( {label} {sub && {sub}} ); const Arrow = ({ x1, y1, x2, y2, label, dy = -6 }) => ( {label && {label}} ); return (
replace
); } // ══════════════════════════════════════════════════════════════════ // LayerCostBars — small bar chart for the disclosure section. // ══════════════════════════════════════════════════════════════════ function LayerCostBars() { const layers = window.VESTIGE.layers; return (
token cost per representation (log)
{layers.map((L, i) => { const x = 30 + i * 50; const h = Math.max(4, Math.log2(L.tokens + 1) * 18); return ( {L.id} ~{L.tokens} ); })}
Default recall stops at L1. Most queries never need more.
); } Object.assign(window, { SystemSchematic, RecallPipeline, StorageLayout, SchemaDiagram, EmbeddingLifecycle, LayerCostBars });