// VIEWER VIEW — for curious, non-technical minds
const { useState, useEffect, useRef } = React;
const TICKER_MESSAGES = [
{ label: "SESSION OPEN", text: "Orchestrator receiving message · context assembly begins" },
{ label: "MEMORY QUERY", text: "Traversing graph · 3 contexts in scope · 18 chunks retrieved" },
{ label: "SPECIALIST ROUTE", text: "Dispatching to domain specialist · business_deal context active · memory scoped" },
{ label: "CONTEXT READY", text: "Specialist response assembled · writing to memory queue" },
{ label: "RESPONSE SENT", text: "Exchange delivered · write worker consolidation fired async" },
{ label: "GRAPH WRITE", text: "4 new chunks stored · topic affinities updated · session closed" },
];
const TENETS = [
{ label: "Nothing is deleted", body: "Every exchange is permanent. Corrections append to the record — they never overwrite it. The history of what was said, and how understanding changed, is always preserved." },
{ label: "Privacy is structural", body: "Context boundaries are encoded into the graph's topology. A query that can't reach a node by traversal cannot retrieve it — not by rule, by structure." },
{ label: "The system earns trust", body: "Proactive agency requires explicit consent, demonstrated reliability, and full auditability. The system waits to be trusted rather than assuming it." },
{ label: "Every decision is traceable", body: "Every insight, classification, and correction carries a provenance chain. Nothing happens without a record of why." },
];
const CONCEPTS = [
{
color: "#e8a84c",
icon: (
),
title: "Agents",
body: "The orchestrator coordinates. Domain specialists execute. Each agent has a defined scope of knowledge and access — and they collaborate without crossing boundaries.",
},
{
color: "#9d7ee8",
icon: (
),
title: "Memory",
body: "Every conversation is written into a permanent graph — not a flat log. The system knows who said what, when, and in what context, and can traverse that knowledge like a map.",
},
{
color: "#38d4c8",
icon: (
),
title: "Context",
body: "Your data is organized into distinct contexts. Access is determined by graph structure — not by a policy engine that can be misconfigured. Personal memories cannot reach professional queries.",
},
{
color: "#3dd68c",
icon: (
),
title: "Insight",
body: "A background process traverses the graph while you sleep — not responding to questions, but noticing patterns. Clusters that formed across months. Connections you didn't name. The system shows what it noticed.",
},
];
// SVG Flow Diagram
function FlowDiagram({ animSpeed = 1, labelDensity = "full" }) {
const NODES = [
{ id: "you", cx: 95, cy: 385, r: 28, color: "#38d4c8", label: "YOU", sub: null },
{ id: "sera", cx: 365, cy: 240, r: 40, color: "#e8a84c", label: "ORCHESTRATOR", sub: "Routes · Assembles" },
{ id: "spec", cx: 185, cy: 95, r: 30, color: "#e8a84c", label: "SPECIALISTS", sub: "Domain Experts" },
{ id: "mem", cx: 630, cy: 135, r: 35, color: "#9d7ee8", label: "MEMORY", sub: "FalkorDB Graph" },
{ id: "cara", cx: 585, cy: 375, r: 26, color: "#38d4c8", label: "WRITE WORKER", sub: "Consolidates" },
];
const FLOWS = [
{ id: "f1", d: "M 95 385 C 160 320 260 270 365 240", color: "#38d4c8", dur: "2.6s", opacity: 1, packets: 3 },
{ id: "f2", d: "M 365 240 C 270 295 175 345 95 385", color: "#e8a84c", dur: "2.9s", opacity: 1, packets: 3 },
{ id: "f3", d: "M 365 240 C 450 200 540 160 630 135", color: "#9d7ee8", dur: "2.2s", opacity: 1, packets: 3 },
{ id: "f4", d: "M 630 135 C 555 170 465 210 365 240", color: "#9d7ee8", dur: "2.2s", opacity: 0.7, packets: 3, begin: 1.1 },
{ id: "f5", d: "M 365 240 C 315 190 250 140 185 95", color: "#e8a84c", dur: "2.0s", opacity: 0.9, packets: 2 },
{ id: "f6", d: "M 185 95 C 250 135 315 190 365 240", color: "#e8a84c", dur: "2.0s", opacity: 0.6, packets: 2, begin: 1.0 },
{ id: "f7", d: "M 365 240 C 440 295 515 345 585 375", color: "#38d4c8", dur: "2.5s", opacity: 0.4, packets: 2 },
{ id: "f8", d: "M 585 375 C 610 295 625 215 630 135", color: "#38d4c8", dur: "2.8s", opacity: 0.4, packets: 2 },
];
return (
);
}
function ViewerView({ animSpeed = 1, labelDensity = "full" }) {
const [tickerIdx, setTickerIdx] = useState(0);
const [tickerVisible, setTickerVisible] = useState(true);
useEffect(() => {
const interval = setInterval(() => {
setTickerVisible(false);
setTimeout(() => {
setTickerIdx(i => (i + 1) % TICKER_MESSAGES.length);
setTickerVisible(true);
}, 350);
}, 2800);
return () => clearInterval(interval);
}, []);
const tick = TICKER_MESSAGES[tickerIdx];
return (
{/* Headline */}
The System
Memory is efficient because context is explicit.
An AI agent system that remembers — structured, private, and permanently auditable. Every conversation becomes knowledge. Every piece of knowledge knows its place.