Skip to content

Commit 0deb2cd

Browse files
gitsofaryangitsofaryan
committed
feat: Introduce a new simulation dashboard with inspector, terminal, canvas, and sidebar components.
1 parent 871c4dd commit 0deb2cd

9 files changed

Lines changed: 2426 additions & 616 deletions

File tree

‎frontend/src/app/components/HandoffSimulator.tsx‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
"use client";
2+
3+
import { useState, useEffect, useCallback } from "react";
4+
5+
/* ─── Phase types for the expanded simulation ─────────────────────────── */
6+
type Phase =
7+
| "idle"
8+
| "agentB_session"
9+
| "agentB_fhe"
10+
| "data_to_ipfs"
11+
| "ipfs_confirm"
12+
| "ucan_issue"
13+
| "ucan_to_a"
14+
| "agentA_verify"
15+
| "fetch_from_ipfs"
16+
| "agentA_decrypt"
17+
| "discovery_sync"
18+
| "complete";
19+
20+
interface TimelineEntry {
21+
phase: Phase;
22+
label: string;
23+
actor: string;
24+
detail: string;
25+
code?: string;
26+
}
27+
28+
const TIMELINE: TimelineEntry[] = [
29+
{ phase: "agentB_session", label: "Initial Session", actor: "B", detail: "Creating 'CHAT_ALICE' namespace on-chain...", code: "await agent.createSession('CHAT_ALICE');" },
30+
{ phase: "agentB_fhe", label: "FHE Encryption", actor: "B→Zama", detail: "Wrapping sensitive keys in Zama fhEVM vault...", code: "await zama.encryptSecret(agentKey);" },
31+
{ phase: "data_to_ipfs", label: "IPFS Storage", actor: "B→IPFS", detail: "Pinning 20MB session history to Storacha...", code: "const cid = await storacha.upload(sessionData);" },
32+
{ phase: "ipfs_confirm", label: "CID Confirmed", actor: "IPFS", detail: "bafybeigh... — Data is now immutable and global.", code: "// Decentralized storage verified" },
33+
{ phase: "ucan_issue", label: "UCAN Auth", actor: "B", detail: "Issuing session/read to Agent A's identity...", code: "const ucan = await agentB.delegate(agentA, cid);" },
34+
{ phase: "ucan_to_a", label: "Handoff Signal", actor: "B→A", detail: "Transmitting UCAN + CID to Agent A...", code: "// Zero-trust handoff initiated" },
35+
{ phase: "agentA_verify", label: "Validation", actor: "A", detail: "Agent A verifies UCAN signature chain...", code: "await ucan.verify(token, agentB.did);" },
36+
{ phase: "fetch_from_ipfs", label: "Gateway Race", actor: "A→IPFS", detail: "Parallel retrieval from 4 global gateways...", code: "const data = await agentA.fetch(cid);" },
37+
{ phase: "agentA_decrypt", label: "Vault Access", actor: "A→Zama", detail: "Decrypting shared keys via fhEVM...", code: "const secret = await zama.decrypt(vaultHash);" },
38+
{ phase: "discovery_sync", label: "Global Discovery", actor: "A→Registry", detail: "Updating public registry: Agent A is now owner.", code: "await registry.update('CHAT_ALICE', agentA.did);" },
39+
{ phase: "complete", label: "Success", actor: "✅", detail: "Handoff complete. Agent A has full context.", code: "// AgentDB: The future of agent memory." },
40+
];
41+
42+
/* ─── SVG Illustration: Comprehensive Scene ──────────────────────────── */
43+
function SimulationScene({ currentPhase }: { currentPhase: Phase }) {
44+
const isAgentBActive = ["agentB_session", "agentB_fhe", "data_to_ipfs", "ucan_issue"].includes(currentPhase);
45+
const isZamaActive = ["agentB_fhe", "agentA_decrypt"].includes(currentPhase);
46+
const isIpfsActive = ["data_to_ipfs", "ipfs_confirm", "fetch_from_ipfs"].includes(currentPhase);
47+
const isUcanActive = ["ucan_issue", "ucan_to_a", "agentA_verify"].includes(currentPhase);
48+
const isAgentAActive = ["agentA_verify", "fetch_from_ipfs", "agentA_decrypt", "discovery_sync", "complete"].includes(currentPhase);
49+
const isComplete = currentPhase === "complete";
50+
51+
// Packet show logic
52+
const showBtoZama = currentPhase === "agentB_fhe";
53+
const showBtoIPFS = currentPhase === "data_to_ipfs";
54+
const showBtoUCAN = currentPhase === "ucan_issue";
55+
const showUCANtoA = currentPhase === "ucan_to_a";
56+
const showIPFStoA = currentPhase === "fetch_from_ipfs";
57+
const showZamatoA = currentPhase === "agentA_decrypt";
58+
59+
return (
60+
<svg viewBox="0 0 640 400" fill="none" xmlns="http://www.w3.org/2000/svg" className="sim-svg-scene">
61+
<defs>
62+
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
63+
<feGaussianBlur stdDeviation="3" result="blur" />
64+
<feComposite in="SourceGraphic" in2="blur" operator="over" />
65+
</filter>
66+
</defs>
67+
68+
{/* Connection Paths */}
69+
<path d="M140 160 Q200 60 320 80" stroke="#222" strokeWidth="1" strokeDasharray="4 4" /> {/* B to IPFS */}
70+
<path d="M140 200 Q200 240 280 220" stroke="#222" strokeWidth="1" strokeDasharray="4 4" /> {/* B to Zama */}
71+
<path d="M140 240 Q240 340 320 320" stroke="#222" strokeWidth="1" strokeDasharray="4 4" /> {/* B to UCAN */}
72+
73+
<path d="M360 320 Q440 340 500 240" stroke="#222" strokeWidth="1" strokeDasharray="4 4" /> {/* UCAN to A */}
74+
<path d="M360 220 Q440 240 500 200" stroke="#222" strokeWidth="1" strokeDasharray="4 4" /> {/* Zama to A */}
75+
<path d="M320 120 Q440 60 500 160" stroke="#222" strokeWidth="1" strokeDasharray="4 4" /> {/* IPFS to A */}
76+
77+
{/* Active Path Glows */}
78+
{isIpfsActive && <path d="M140 160 Q200 60 320 80" stroke="#10b981" strokeWidth="2" strokeDasharray="4 4" className="sim-line-glow" opacity="0.4" />}
79+
{isZamaActive && <path d="M140 200 Q200 240 280 220" stroke="#f59e0b" strokeWidth="2" strokeDasharray="4 4" className="sim-line-glow" opacity="0.4" />}
80+
{isUcanActive && <path d="M140 240 Q240 340 320 320" stroke="#6366f1" strokeWidth="2" strokeDasharray="4 4" className="sim-line-glow" opacity="0.4" />}
81+
82+
{/* Packets */}
83+
{showBtoZama && <circle r="4" fill="#f59e0b" filter="url(#glow)"><animateMotion dur="1s" repeatCount="indefinite" path="M140 200 Q200 240 280 220" /></circle>}
84+
{showBtoIPFS && <circle r="4" fill="#10b981" filter="url(#glow)"><animateMotion dur="1s" repeatCount="indefinite" path="M140 160 Q200 60 320 80" /></circle>}
85+
{showBtoUCAN && <circle r="4" fill="#6366f1" filter="url(#glow)"><animateMotion dur="1s" repeatCount="indefinite" path="M140 240 Q240 340 320 320" /></circle>}
86+
{showUCANtoA && <circle r="4" fill="#6366f1" filter="url(#glow)"><animateMotion dur="1s" repeatCount="indefinite" path="M360 320 Q440 340 500 240" /></circle>}
87+
{showIPFStoA && <circle r="4" fill="#10b981" filter="url(#glow)"><animateMotion dur="1s" repeatCount="indefinite" path="M320 120 Q440 60 500 160" /></circle>}
88+
{showZamatoA && <circle r="4" fill="#f59e0b" filter="url(#glow)"><animateMotion dur="1s" repeatCount="indefinite" path="M360 220 Q440 240 500 200" /></circle>}
89+
90+
{/* Agent B */}
91+
<g transform="translate(60, 150)">
92+
<rect width="80" height="100" rx="12" fill="#12121e" stroke={isAgentBActive ? "#6366f1" : "#222"} strokeWidth="2" className={isAgentBActive ? "sim-node-svg-glow" : ""} />
93+
<rect x="15" y="15" width="50" height="35" rx="6" fill="#0c0c14" />
94+
<circle cx="30" cy="32" r="3" fill="#6366f1" opacity={isAgentBActive ? 1 : 0.3} />
95+
<circle cx="50" cy="32" r="3" fill="#6366f1" opacity={isAgentBActive ? 1 : 0.3} />
96+
<text x="40" y="75" fontSize="10" fill="#888" textAnchor="middle" fontFamily="monospace">Agent B</text>
97+
<text x="40" y="88" fontSize="8" fill="#6366f1" textAnchor="middle" fontFamily="monospace" opacity="0.6">Original</text>
98+
</g>
99+
100+
{/* Storacha / IPFS */}
101+
<g transform="translate(320, 80)">
102+
<circle r="45" fill="#080c14" stroke={isIpfsActive ? "#10b981" : "#222"} strokeWidth="2" className={isIpfsActive ? "sim-node-svg-glow-green" : ""} />
103+
<path d="M-30 0 Q0 -40 30 0 Q0 40 -30 0" stroke="#10b981" strokeWidth="0.5" opacity="0.2" fill="none" />
104+
<text y="5" fontSize="9" fill="#10b981" textAnchor="middle" fontFamily="monospace" fontWeight="bold">Storacha</text>
105+
<text y="18" fontSize="7" fill="#10b981" textAnchor="middle" fontFamily="monospace" opacity="0.5">IPFS Memory</text>
106+
</g>
107+
108+
{/* Zama Vault */}
109+
<g transform="translate(280, 190)">
110+
<rect width="80" height="55" rx="10" fill="#140f08" stroke={isZamaActive ? "#f59e0b" : "#222"} strokeWidth="2" className={isZamaActive ? "sim-node-svg-glow-amber" : ""} />
111+
<text x="40" y="25" fontSize="9" fill="#f59e0b" textAnchor="middle" fontFamily="monospace" fontWeight="bold">Zama Vault</text>
112+
<text x="40" y="38" fontSize="7" fill="#f59e0b" textAnchor="middle" fontFamily="monospace" opacity="0.5">FHE Secure</text>
113+
{/* lock icon */}
114+
<path d="M35 12 L35 8 Q40 4 45 8 L45 12" stroke="#f59e0b" strokeWidth="1.5" fill="none" opacity="0.6" />
115+
</g>
116+
117+
{/* UCAN Token */}
118+
<g transform="translate(280, 290)">
119+
<rect width="80" height="55" rx="8" fill="#0d0d1a" stroke={isUcanActive ? "#6366f1" : "#222"} strokeWidth="1.5" className={isUcanActive ? "sim-node-svg-glow-purple" : ""} />
120+
<text x="40" y="25" fontSize="9" fill="#6366f1" textAnchor="middle" fontFamily="monospace" fontWeight="bold">UCAN Auth</text>
121+
<text x="40" y="40" fontSize="7" fill="#888" textAnchor="middle" fontFamily="monospace">Delegation</text>
122+
</g>
123+
124+
{/* Agent A */}
125+
<g transform="translate(500, 150)">
126+
<rect width="80" height="100" rx="12" fill="#12121e" stroke={isAgentAActive ? (isComplete ? "#10b981" : "#6366f1") : "#222"} strokeWidth="2" className={isAgentAActive ? "sim-node-svg-glow" : ""} />
127+
<rect x="15" y="15" width="50" height="35" rx="6" fill="#0c0c14" />
128+
<circle cx="30" cy="32" r="3" fill={isComplete ? "#10b981" : "#6366f1"} opacity={isAgentAActive ? 1 : 0.3} />
129+
<circle cx="50" cy="32" r="3" fill={isComplete ? "#10b981" : "#6366f1"} opacity={isAgentAActive ? 1 : 0.3} />
130+
<text x="40" y="75" fontSize="10" fill="#888" textAnchor="middle" fontFamily="monospace">Agent A</text>
131+
<text x="40" y="88" fontSize="8" fill="#6366f1" textAnchor="middle" fontFamily="monospace" opacity="0.6">Recipient</text>
132+
</g>
133+
134+
{/* Success Notification */}
135+
{isComplete && (
136+
<g transform="translate(240, 20)">
137+
<rect width="160" height="30" rx="15" fill="#10b981" opacity="0.1" stroke="#10b981" strokeWidth="1" />
138+
<text x="80" y="20" fontSize="10" fill="#10b981" textAnchor="middle" fontFamily="monospace" fontWeight="bold">✅ CONTEXT SYNCED</text>
139+
</g>
140+
)}
141+
</svg>
142+
);
143+
}
144+
145+
/* ─── Main Component: Side-by-Side Layout ───────────────────────────── */
146+
export default function HandoffSimulator() {
147+
const [currentPhaseIndex, setCurrentPhaseIndex] = useState(-1);
148+
const [isRunning, setIsRunning] = useState(false);
149+
150+
const currentPhase = currentPhaseIndex >= 0 ? TIMELINE[currentPhaseIndex]?.phase || "idle" : "idle";
151+
152+
const runSimulation = useCallback(() => {
153+
setIsRunning(true);
154+
setCurrentPhaseIndex(0);
155+
}, []);
156+
157+
const reset = () => {
158+
setIsRunning(false);
159+
setCurrentPhaseIndex(-1);
160+
};
161+
162+
useEffect(() => {
163+
if (!isRunning || currentPhaseIndex < 0) return;
164+
if (currentPhaseIndex >= TIMELINE.length) {
165+
setIsRunning(false);
166+
return;
167+
}
168+
169+
const timer = setTimeout(() => {
170+
if (currentPhaseIndex < TIMELINE.length - 1) {
171+
setCurrentPhaseIndex((i) => i + 1);
172+
} else {
173+
setIsRunning(false);
174+
}
175+
}, 1800);
176+
177+
return () => clearTimeout(timer);
178+
}, [isRunning, currentPhaseIndex]);
179+
180+
return (
181+
<section className="sim-section-side">
182+
<div className="sim-header">
183+
<div>
184+
<span className="lp-section-eyebrow">Interactive Workflow</span>
185+
<h2 className="sim-title">How AgentDB Works</h2>
186+
<p className="sim-subtitle">Decentralized Handoff Protocol (11 Phases)</p>
187+
</div>
188+
<button className="sim-btn" onClick={isRunning ? reset : runSimulation}>
189+
{isRunning ? "Stop" : currentPhaseIndex >= TIMELINE.length - 1 ? "Replay" : "▶ Start Simulation"}
190+
</button>
191+
</div>
192+
193+
<div className="sim-side-layout">
194+
{/* Left: Simulation SVG */}
195+
<div className="sim-canvas-side">
196+
<div className="sim-grid-overlay" />
197+
<SimulationScene currentPhase={currentPhase} />
198+
</div>
199+
200+
{/* Right: Timeline & Terminal */}
201+
<div className="sim-info-side">
202+
<div className="sim-timeline-vertical-premium">
203+
{TIMELINE.map((entry, i) => (
204+
<div
205+
key={entry.phase}
206+
className={`sim-vtl-item-premium ${i < currentPhaseIndex ? "done" : i === currentPhaseIndex ? "active" : ""}`}
207+
style={{ opacity: i > currentPhaseIndex + 1 ? 0.3 : 1 }}
208+
>
209+
<div className="dot" />
210+
<div className="content">
211+
<div className="label">{entry.label}</div>
212+
{i === currentPhaseIndex && <div className="detail">{entry.detail}</div>}
213+
</div>
214+
</div>
215+
))}
216+
</div>
217+
218+
<div className="sim-terminal-premium">
219+
<div className="sim-term-header">
220+
<span className="dot red" />
221+
<span className="dot yellow" />
222+
<span className="dot green" />
223+
<span className="title">agent-db-kernel.log</span>
224+
</div>
225+
<div className="sim-term-body">
226+
{TIMELINE.slice(0, Math.max(0, currentPhaseIndex + 1)).map((entry, i) => (
227+
<div key={i} className="line">
228+
<span className="prompt">❯</span>
229+
<span className="code">{entry.code}</span>
230+
</div>
231+
))}
232+
{currentPhaseIndex < 0 && <div className="line muted">Waiting for signal...</div>}
233+
</div>
234+
</div>
235+
</div>
236+
</div>
237+
</section>
238+
);
239+
}

0 commit comments

Comments
 (0)