chore: udate docs, add architecture diagrams
Some checks failed
Documentation Lint & Validation / Markdown Linting (push) Has been cancelled
Documentation Lint & Validation / Validate mdBook Configuration (push) Has been cancelled
Documentation Lint & Validation / Content & Structure Validation (push) Has been cancelled
mdBook Build & Deploy / Build mdBook (push) Has been cancelled
Rust CI / Security Audit (push) Has been cancelled
Rust CI / Check + Test + Lint (nightly) (push) Has been cancelled
Rust CI / Check + Test + Lint (stable) (push) Has been cancelled
Documentation Lint & Validation / Lint & Validation Summary (push) Has been cancelled
mdBook Build & Deploy / Documentation Quality Check (push) Has been cancelled
mdBook Build & Deploy / Deploy to GitHub Pages (push) Has been cancelled
mdBook Build & Deploy / Notification (push) Has been cancelled
Some checks failed
Documentation Lint & Validation / Markdown Linting (push) Has been cancelled
Documentation Lint & Validation / Validate mdBook Configuration (push) Has been cancelled
Documentation Lint & Validation / Content & Structure Validation (push) Has been cancelled
mdBook Build & Deploy / Build mdBook (push) Has been cancelled
Rust CI / Security Audit (push) Has been cancelled
Rust CI / Check + Test + Lint (nightly) (push) Has been cancelled
Rust CI / Check + Test + Lint (stable) (push) Has been cancelled
Documentation Lint & Validation / Lint & Validation Summary (push) Has been cancelled
mdBook Build & Deploy / Documentation Quality Check (push) Has been cancelled
mdBook Build & Deploy / Deploy to GitHub Pages (push) Has been cancelled
mdBook Build & Deploy / Notification (push) Has been cancelled
This commit is contained in:
Jesús Pérez
parent
4efea3053e
commit
df829421d8
GPG Key ID:
9F243E355E0BC939
576
assets/vapora_architecture.svg
Normal file
576
assets/vapora_architecture.svg
Normal file
@ -0,0 +1,576 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1020" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;500;600&display=swap');
|
||||
</style>
|
||||
|
||||
<!-- Brand gradients -->
|
||||
<linearGradient id="grad-main" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="50%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-cyan-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="100%" stop-color="#a855f7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-purple-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.8"/>
|
||||
<stop offset="50%" stop-color="#a855f7" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-cyan" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#22d3ee" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#a855f7" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ec4899" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-sm">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-md">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-lg">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glass-card">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
|
||||
<feOffset dx="0" dy="1" result="shadow"/>
|
||||
<feFlood flood-color="#000" flood-opacity="0.3" result="color"/>
|
||||
<feComposite in="color" in2="shadow" operator="in" result="shadow"/>
|
||||
<feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Animated particle marker -->
|
||||
<circle id="particle-cyan" r="3" fill="#22d3ee" filter="url(#glow-md)"/>
|
||||
<circle id="particle-purple" r="3" fill="#a855f7" filter="url(#glow-md)"/>
|
||||
<circle id="particle-pink" r="3" fill="#ec4899" filter="url(#glow-md)"/>
|
||||
<circle id="particle-sm-cyan" r="2" fill="#22d3ee" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-purple" r="2" fill="#a855f7" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-pink" r="2" fill="#ec4899" filter="url(#glow-sm)"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- BACKGROUND -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<rect width="1400" height="1020" fill="#0a0a0a"/>
|
||||
|
||||
<!-- Subtle tech grid -->
|
||||
<g opacity="0.04" stroke="#22d3ee" stroke-width="0.5">
|
||||
<line x1="0" y1="0" x2="1400" y2="0"><animate attributeName="y1" values="0;1020" dur="60s" repeatCount="indefinite"/><animate attributeName="y2" values="0;1020" dur="60s" repeatCount="indefinite"/></line>
|
||||
<line x1="100" y1="0" x2="100" y2="1020"/>
|
||||
<line x1="250" y1="0" x2="250" y2="1020"/>
|
||||
<line x1="400" y1="0" x2="400" y2="1020"/>
|
||||
<line x1="550" y1="0" x2="550" y2="1020"/>
|
||||
<line x1="700" y1="0" x2="700" y2="1020"/>
|
||||
<line x1="850" y1="0" x2="850" y2="1020"/>
|
||||
<line x1="1000" y1="0" x2="1000" y2="1020"/>
|
||||
<line x1="1150" y1="0" x2="1150" y2="1020"/>
|
||||
<line x1="1300" y1="0" x2="1300" y2="1020"/>
|
||||
<line x1="0" y1="130" x2="1400" y2="130"/>
|
||||
<line x1="0" y1="260" x2="1400" y2="260"/>
|
||||
<line x1="0" y1="420" x2="1400" y2="420"/>
|
||||
<line x1="0" y1="580" x2="1400" y2="580"/>
|
||||
<line x1="0" y1="720" x2="1400" y2="720"/>
|
||||
<line x1="0" y1="860" x2="1400" y2="860"/>
|
||||
</g>
|
||||
|
||||
<!-- Ambient glow orbs -->
|
||||
<circle cx="240" cy="350" r="180" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="r" values="160;200;160" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="690" cy="360" r="175" fill="#a855f7" opacity="0.05">
|
||||
<animate attributeName="r" values="175;195;175" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1130" cy="350" r="200" fill="#ec4899" opacity="0.07">
|
||||
<animate attributeName="r" values="180;220;180" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- TITLE -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="42" font-family="'JetBrains Mono', monospace" font-size="22" font-weight="800" fill="url(#grad-main)" letter-spacing="6" text-anchor="middle" filter="url(#glow-sm)">VAPORA ARCHITECTURE</text>
|
||||
<text x="700" y="62" font-family="'Inter', sans-serif" font-size="11" fill="#a855f7" opacity="0.6" letter-spacing="3" text-anchor="middle">18 CRATES · 354 TESTS · 100% RUST</text>
|
||||
|
||||
<!-- Layer labels (left side) -->
|
||||
<text x="30" y="115" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 115)">PRESENTATION</text>
|
||||
<text x="30" y="290" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 290)">SERVICES</text>
|
||||
<text x="30" y="485" font-family="'JetBrains Mono', monospace" font-size="10" fill="#ec4899" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 485)">INTELLIGENCE</text>
|
||||
<text x="30" y="640" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 640)">DATA</text>
|
||||
<text x="30" y="850" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 850)">PROVIDERS</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 1: FRONTEND (y=80) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend card -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="2"/>
|
||||
<rect x="494" y="80" width="412" height="1.5" rx="1" fill="url(#grad-main)" opacity="0.8"/>
|
||||
<text x="700" y="106" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#22d3ee" text-anchor="middle" filter="url(#glow-sm)">Leptos WASM Frontend</text>
|
||||
<text x="700" y="124" font-family="'Inter', sans-serif" font-size="10" fill="#ffffff" opacity="0.5" text-anchor="middle">Kanban Board · Glassmorphism UI · UnoCSS · Reactive Components</text>
|
||||
<!-- Pulse ring -->
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="none" stroke="#22d3ee" stroke-opacity="0.15">
|
||||
<animate attributeName="stroke-opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTION: Frontend → Services -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend to Backend -->
|
||||
<path id="path-fe-be" d="M 580 145 L 580 160 Q 580 175 480 175 L 280 175 Q 260 175 260 195 L 260 210" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-be"/></animateMotion></use>
|
||||
|
||||
<!-- Frontend to Agents -->
|
||||
<line x1="700" y1="145" x2="700" y2="210" stroke="#a855f7" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-purple" opacity="0.8"><animateMotion dur="2s" repeatCount="indefinite" path="M 700 145 L 700 210"/></use>
|
||||
|
||||
<!-- Frontend to MCP -->
|
||||
<path id="path-fe-mcp" d="M 820 145 L 820 160 Q 820 175 920 175 L 1100 175 Q 1140 175 1140 195 L 1140 210" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-mcp"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 2: SERVICES (y=210) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend / Axum API -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="210" width="310" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="104" y="210" width="302" height="1.5" rx="1" fill="#22d3ee" opacity="0.6"/>
|
||||
<text x="255" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#22d3ee" text-anchor="middle">Axum Backend API</text>
|
||||
<text x="255" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">40+ REST Endpoints · 161 Tests</text>
|
||||
<!-- Sub-items -->
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="120" y="278">Projects</text>
|
||||
<text x="180" y="278">Tasks</text>
|
||||
<text x="225" y="278">Agents</text>
|
||||
<text x="280" y="278">Workflows</text>
|
||||
<text x="350" y="278">Proposals</text>
|
||||
<text x="120" y="294">Swarm</text>
|
||||
<text x="175" y="294">Metrics</text>
|
||||
<text x="235" y="294">RLM API</text>
|
||||
<text x="300" y="294">WebSocket</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Agent Runtime -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="540" y="210" width="310" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="544" y="210" width="302" height="1.5" rx="1" fill="#a855f7" opacity="0.6"/>
|
||||
<text x="695" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#a855f7" text-anchor="middle">Agent Runtime</text>
|
||||
<text x="695" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Orchestration · Learning Profiles · 71 Tests</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="560" y="278">Registry</text>
|
||||
<text x="625" y="278">Coordinator</text>
|
||||
<text x="720" y="278">Scoring</text>
|
||||
<text x="785" y="278">Profiles</text>
|
||||
<text x="560" y="294">12 Roles</text>
|
||||
<text x="630" y="294">Health Checks</text>
|
||||
<text x="735" y="294">Recency Bias</text>
|
||||
</g>
|
||||
<!-- Heartbeat animation -->
|
||||
<circle cx="835" cy="225" r="4" fill="#a855f7" opacity="0.07">
|
||||
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- MCP Gateway -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="210" width="310" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="984" y="210" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#ec4899" text-anchor="middle">MCP Gateway</text>
|
||||
<text x="1135" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Model Context Protocol · Plugin System</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="1000" y="278">Stdio Transport</text>
|
||||
<text x="1105" y="278">SSE Transport</text>
|
||||
<text x="1210" y="278">JSON-RPC</text>
|
||||
<text x="1000" y="294">6 Tools</text>
|
||||
<text x="1060" y="294">Tool Registry</text>
|
||||
<text x="1160" y="294">Schema Validation</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- A2A Protocol (small card overlapping) -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="445" y="280" width="86" height="35" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="488" y="300" font-family="'JetBrains Mono', monospace" font-size="9" font-weight="700" fill="#a855f7" opacity="0.6" text-anchor="middle">A2A Protocol</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Services → Intelligence -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend → RLM -->
|
||||
<path id="path-be-rlm" d="M 200 310 L 200 380" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 200 310 L 200 380"/></use>
|
||||
|
||||
<!-- Backend → SurrealDB (arco por la derecha para evitar KG) -->
|
||||
<path id="path-be-sdb" d="M 320 310 L 320 340 Q 320 360 360 360 L 420 360 Q 435 360 435 380 Q 435 580 420 580 L 420 585" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.35" stroke-dasharray="4 4"/>
|
||||
|
||||
<!-- Agents → LLM Router -->
|
||||
<line x1="695" y1="310" x2="695" y2="380" stroke="#a855f7" stroke-width="2.4" stroke-opacity="0.3"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="1.5s" begin="0.75s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
|
||||
<!-- Agents → Swarm -->
|
||||
<path id="path-ag-sw" d="M 800 310 L 800 340 Q 800 355 900 355 L 1050 355 Q 1070 355 1070 375 L 1070 380" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-ag-sw"/></animateMotion></use>
|
||||
|
||||
<!-- MCP → Agents -->
|
||||
<path id="path-mcp-ag" d="M 1020 310 L 1020 320 Q 1020 332 920 332 L 810 332 Q 800 332 800 320 L 800 310" fill="none" stroke="#ec4899" stroke-width="1.6" stroke-opacity="0.35" stroke-dasharray="3 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 3: INTELLIGENCE (y=380) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM Engine -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="380" width="340" height="130" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="64" y="380" width="332" height="2" rx="1" fill="url(#grad-main)" opacity="0.7"/>
|
||||
<text x="230" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">RLM Engine</text>
|
||||
<text x="230" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Recursive Language Models · 38 Tests · 17k+ LOC</text>
|
||||
|
||||
<!-- RLM sub-components as mini pills -->
|
||||
<g transform="translate(75, 435)">
|
||||
<!-- Chunking -->
|
||||
<rect x="0" y="0" width="80" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="40" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Chunking</text>
|
||||
<!-- Hybrid Search -->
|
||||
<rect x="90" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="137" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Hybrid Search</text>
|
||||
<!-- Dispatcher -->
|
||||
<rect x="195" y="0" width="80" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="235" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Dispatcher</text>
|
||||
</g>
|
||||
<g transform="translate(75, 465)">
|
||||
<!-- BM25 -->
|
||||
<rect x="0" y="0" width="65" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">BM25</text>
|
||||
<!-- Semantic -->
|
||||
<rect x="75" y="0" width="70" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="110" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Semantic</text>
|
||||
<!-- RRF -->
|
||||
<rect x="155" y="0" width="50" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">RRF</text>
|
||||
<!-- Sandbox -->
|
||||
<rect x="215" y="0" width="60" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Sandbox</text>
|
||||
</g>
|
||||
|
||||
<!-- Animated search indicator -->
|
||||
<g transform="translate(370, 400)">
|
||||
<circle r="6" fill="none" stroke="#22d3ee" stroke-width="0.8" opacity="0.07">
|
||||
<animate attributeName="r" values="4;8;4" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- LLM Router -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="500" y="380" width="380" height="130" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="504" y="380" width="372" height="2" rx="1" fill="#a855f7" opacity="0.7"/>
|
||||
<text x="690" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#a855f7" text-anchor="middle" filter="url(#glow-sm)">Multi-IA LLM Router</text>
|
||||
<text x="690" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Budget Enforcement · Cost Tracking · 53 Tests</text>
|
||||
|
||||
<!-- Router sub-components -->
|
||||
<g transform="translate(515, 435)">
|
||||
<rect x="0" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="47" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Rule Router</text>
|
||||
<rect x="105" y="0" width="115" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="162" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Budget Manager</text>
|
||||
<rect x="230" y="0" width="110" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="285" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Cost Tracker</text>
|
||||
</g>
|
||||
<g transform="translate(515, 465)">
|
||||
<rect x="0" y="0" width="95" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="47" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Fallback Chain</text>
|
||||
<rect x="105" y="0" width="90" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="150" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Cost Ranker</text>
|
||||
<rect x="205" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Providers</text>
|
||||
</g>
|
||||
|
||||
<!-- Routing indicator animation -->
|
||||
<g transform="translate(855, 400)">
|
||||
<line x1="-6" y1="0" x2="6" y2="0" stroke="#a855f7" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#ec4899" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Swarm Coordinator -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="380" width="310" height="130" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="984" y="380" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">Swarm Coordinator</text>
|
||||
<text x="1135" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Load Balancing · Prometheus · 6 Tests</text>
|
||||
|
||||
<g transform="translate(995, 435)">
|
||||
<rect x="0" y="0" width="90" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="45" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Assignment</text>
|
||||
<rect x="100" y="0" width="90" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="145" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Filtering</text>
|
||||
<rect x="200" y="0" width="80" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="240" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Metrics</text>
|
||||
</g>
|
||||
<g transform="translate(995, 465)">
|
||||
<rect x="0" y="0" width="130" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="65" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">success_rate / (1+load)</text>
|
||||
<rect x="140" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Capabilities</text>
|
||||
</g>
|
||||
|
||||
<!-- Swarm pulse -->
|
||||
<circle cx="1270" cy="395" r="3" fill="#ec4899" opacity="0.07">
|
||||
<animate attributeName="r" values="2;5;2" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- RLM → LLM Router connection -->
|
||||
<path id="path-rlm-llm" d="M 400 445 L 500 445" fill="none" stroke="url(#grad-cyan-purple)" stroke-width="3" stroke-opacity="0.3"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 400 445 L 500 445"/></use>
|
||||
|
||||
<!-- LLM Router → Swarm connection -->
|
||||
<path d="M 880 445 L 980 445" fill="none" stroke="url(#grad-purple-pink)" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 880 445 L 980 445"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Intelligence → Data -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM → KG -->
|
||||
<path id="path-rlm-kg" d="M 160 510 L 160 575" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 160 510 L 160 575"/></use>
|
||||
|
||||
<!-- RLM → SurrealDB -->
|
||||
<path id="path-rlm-sdb" d="M 300 510 L 300 540 Q 300 555 400 555 L 530 555 Q 545 555 545 575" fill="none" stroke="#22d3ee" stroke-width="2.4" stroke-opacity="0.25"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-rlm-sdb"/></animateMotion></use>
|
||||
|
||||
<!-- LLM Router → Providers (goes down below data) -->
|
||||
<path id="path-llm-providers" d="M 790 510 L 790 725" fill="none" stroke="#a855f7" stroke-width="3" stroke-opacity="0.2"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="3s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="3s" begin="1.5s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
|
||||
<!-- Swarm → NATS -->
|
||||
<path id="path-sw-nats" d="M 1135 510 L 1135 575" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 1135 510 L 1135 575"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 4: DATA LAYER (y=575) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Knowledge Graph -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="575" width="260" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="2"/>
|
||||
<rect x="60" y="575" width="260" height="1.5" rx="1" fill="#22d3ee" opacity="0.5"/>
|
||||
<text x="190" y="600" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Knowledge Graph</text>
|
||||
<text x="190" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.4" text-anchor="middle">Temporal History · Learning Curves · 20 Tests</text>
|
||||
<g transform="translate(75, 630)">
|
||||
<rect x="0" y="0" width="80" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="40" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Executions</text>
|
||||
<rect x="90" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="125" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Similarity</text>
|
||||
<rect x="170" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="200" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Causal</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="575" width="340" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="420" y="575" width="340" height="2" rx="1" fill="url(#grad-main)" opacity="0.6"/>
|
||||
<text x="590" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">SurrealDB</text>
|
||||
<text x="590" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Multi-Model Database · Multi-Tenant Scopes</text>
|
||||
|
||||
<g transform="translate(435, 630)">
|
||||
<rect x="0" y="0" width="65" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Projects</text>
|
||||
<rect x="75" y="0" width="50" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="100" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Tasks</text>
|
||||
<rect x="135" y="0" width="55" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="162" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agents</text>
|
||||
<rect x="200" y="0" width="55" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="227" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Chunks</text>
|
||||
<rect x="265" y="0" width="45" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="287" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- DB activity indicator -->
|
||||
<g transform="translate(735, 590)">
|
||||
<rect x="0" y="0" width="2" height="10" fill="#22d3ee" opacity="0.4">
|
||||
<animate attributeName="height" values="6;12;6" dur="1.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="5" y="0" width="2" height="8" fill="#a855f7" opacity="0.4">
|
||||
<animate attributeName="height" values="8;14;8" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="10" y="0" width="2" height="12" fill="#ec4899" opacity="0.4">
|
||||
<animate attributeName="height" values="10;16;10" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- KG → SurrealDB -->
|
||||
<line x1="320" y1="630" x2="420" y2="630" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 320 630 L 420 630"/></use>
|
||||
|
||||
<!-- NATS JetStream -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="860" y="575" width="340" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="860" y="575" width="340" height="1.5" rx="1" fill="#ec4899" opacity="0.5"/>
|
||||
<text x="1030" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">NATS JetStream</text>
|
||||
<text x="1030" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Message Queue · Async Coordination · Pub/Sub</text>
|
||||
|
||||
<g transform="translate(875, 630)">
|
||||
<rect x="0" y="0" width="75" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="37" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agent Jobs</text>
|
||||
<rect x="85" y="0" width="75" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="122" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Workflows</text>
|
||||
<rect x="170" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="205" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Proposals</text>
|
||||
<rect x="250" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="280" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- Message pulse animation -->
|
||||
<g transform="translate(1125, 590)">
|
||||
<circle r="4" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.07">
|
||||
<animate attributeName="r" values="3;8;3" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#ffffff" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB ↔ NATS bridge line -->
|
||||
<line x1="760" y1="625" x2="860" y2="625" stroke="url(#grad-purple-pink)" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="4 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Data → Providers -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Central provider trunk (from LLM Router, already drawn) -->
|
||||
<!-- Branch to each provider -->
|
||||
<path id="path-to-claude" d="M 790 725 Q 790 750 500 750 L 245 750 Q 225 750 225 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-to-claude"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-openai" d="M 790 725 Q 790 760 600 760 L 555 760 Q 545 760 545 785" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2s" repeatCount="indefinite"><mpath href="#path-to-openai"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-gemini" d="M 790 725 Q 790 770 810 770 L 855 770 Q 865 770 865 785" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-to-gemini"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-ollama" d="M 790 725 Q 790 750 900 750 L 1155 750 Q 1175 750 1175 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.8s" repeatCount="indefinite"><mpath href="#path-to-ollama"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 5: LLM PROVIDERS (y=810) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Claude -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="225" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Anthropic Claude</text>
|
||||
<text x="225" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">Opus · Sonnet · Haiku</text>
|
||||
</g>
|
||||
|
||||
<!-- OpenAI -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="785" width="250" height="55" rx="6" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="545" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#a855f7" text-anchor="middle">OpenAI</text>
|
||||
<text x="545" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">GPT-4 · GPT-4o · GPT-3.5</text>
|
||||
</g>
|
||||
|
||||
<!-- Gemini -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="740" y="785" width="250" height="55" rx="6" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="865" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#ec4899" text-anchor="middle">Google Gemini</text>
|
||||
<text x="865" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">2.0 Pro · Flash · 1.5 Pro</text>
|
||||
</g>
|
||||
|
||||
<!-- Ollama -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="1060" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="1185" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Ollama (Local)</text>
|
||||
<text x="1185" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">Llama · Mistral · CodeLlama</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SUPPORTING CRATES (bottom strip) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(0, 882)">
|
||||
<rect x="60" y="0" width="1280" height="50" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="700" y="16" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.7" text-anchor="middle" letter-spacing="2">SUPPORTING CRATES</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="10" opacity="0.6" text-anchor="middle">
|
||||
<text x="130" y="36" fill="#22d3ee">vapora-shared</text>
|
||||
<text x="260" y="36" fill="#a855f7">vapora-tracking</text>
|
||||
<text x="400" y="36" fill="#ec4899">vapora-telemetry</text>
|
||||
<text x="540" y="36" fill="#22d3ee">vapora-analytics</text>
|
||||
<text x="680" y="36" fill="#a855f7">vapora-worktree</text>
|
||||
<text x="820" y="36" fill="#ec4899">vapora-doc-lifecycle</text>
|
||||
<text x="975" y="36" fill="#22d3ee">vapora-workflow-engine</text>
|
||||
<text x="1140" y="36" fill="#a855f7">vapora-cli</text>
|
||||
<text x="1250" y="36" fill="#ec4899">vapora-leptos-ui</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- OBSERVABILITY STRIP (right edge) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(1340, 80)">
|
||||
<rect x="0" y="0" width="4" height="790" rx="2" fill="url(#grad-vertical)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="15" y="400" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.6" letter-spacing="2" text-anchor="middle" transform="rotate(90 15 400)">PROMETHEUS · GRAFANA · OPENTELEMETRY</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- FOOTER -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="970" font-family="'JetBrains Mono', monospace" font-size="11" font-weight="700" fill="url(#grad-main)" text-anchor="middle" opacity="0.7" letter-spacing="3">VAPORA v1.2.0</text>
|
||||
<text x="700" y="993" font-family="'Inter', sans-serif" font-size="9" fill="#a855f7" opacity="0.6" text-anchor="middle" letter-spacing="1">Evaporate complexity · Full-Stack Rust · Production Ready</text>
|
||||
|
||||
<!-- Bottom gradient bar -->
|
||||
<rect x="400" y="1005" width="600" height="2" rx="1" fill="url(#grad-main)" opacity="0.3"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 42 KiB |
576
assets/vapora_architecture_white.svg
Normal file
576
assets/vapora_architecture_white.svg
Normal file
@ -0,0 +1,576 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1020" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;500;600&display=swap');
|
||||
</style>
|
||||
|
||||
<!-- Brand gradients -->
|
||||
<linearGradient id="grad-main" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="50%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-cyan-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="100%" stop-color="#a855f7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-purple-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.8"/>
|
||||
<stop offset="50%" stop-color="#a855f7" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-cyan" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#22d3ee" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#a855f7" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ec4899" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-sm">
|
||||
<feGaussianBlur stdDeviation="0.5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-md">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-lg">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glass-card">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
|
||||
<feOffset dx="0" dy="1" result="shadow"/>
|
||||
<feFlood flood-color="#000" flood-opacity="0.3" result="color"/>
|
||||
<feComposite in="color" in2="shadow" operator="in" result="shadow"/>
|
||||
<feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Animated particle marker -->
|
||||
<circle id="particle-cyan" r="3" fill="#22d3ee" filter="url(#glow-md)"/>
|
||||
<circle id="particle-purple" r="3" fill="#a855f7" filter="url(#glow-md)"/>
|
||||
<circle id="particle-pink" r="3" fill="#ec4899" filter="url(#glow-md)"/>
|
||||
<circle id="particle-sm-cyan" r="2" fill="#22d3ee" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-purple" r="2" fill="#a855f7" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-pink" r="2" fill="#ec4899" filter="url(#glow-sm)"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- BACKGROUND -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<rect width="1400" height="1020" fill="#ffffff"/>
|
||||
|
||||
<!-- Subtle tech grid -->
|
||||
<g opacity="0.08" stroke="#22d3ee" stroke-width="0.5">
|
||||
<line x1="0" y1="0" x2="1400" y2="0"><animate attributeName="y1" values="0;1020" dur="60s" repeatCount="indefinite"/><animate attributeName="y2" values="0;1020" dur="60s" repeatCount="indefinite"/></line>
|
||||
<line x1="100" y1="0" x2="100" y2="1020"/>
|
||||
<line x1="250" y1="0" x2="250" y2="1020"/>
|
||||
<line x1="400" y1="0" x2="400" y2="1020"/>
|
||||
<line x1="550" y1="0" x2="550" y2="1020"/>
|
||||
<line x1="700" y1="0" x2="700" y2="1020"/>
|
||||
<line x1="850" y1="0" x2="850" y2="1020"/>
|
||||
<line x1="1000" y1="0" x2="1000" y2="1020"/>
|
||||
<line x1="1150" y1="0" x2="1150" y2="1020"/>
|
||||
<line x1="1300" y1="0" x2="1300" y2="1020"/>
|
||||
<line x1="0" y1="130" x2="1400" y2="130"/>
|
||||
<line x1="0" y1="260" x2="1400" y2="260"/>
|
||||
<line x1="0" y1="420" x2="1400" y2="420"/>
|
||||
<line x1="0" y1="580" x2="1400" y2="580"/>
|
||||
<line x1="0" y1="720" x2="1400" y2="720"/>
|
||||
<line x1="0" y1="860" x2="1400" y2="860"/>
|
||||
</g>
|
||||
|
||||
<!-- Ambient glow orbs -->
|
||||
<circle cx="240" cy="350" r="180" fill="#22d3ee" opacity="0.05">
|
||||
<animate attributeName="r" values="160;200;160" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="690" cy="360" r="175" fill="#a855f7" opacity="0.04">
|
||||
<animate attributeName="r" values="175;195;175" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1130" cy="350" r="200" fill="#ec4899" opacity="0.05">
|
||||
<animate attributeName="r" values="180;220;180" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- TITLE -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="42" font-family="'JetBrains Mono', monospace" font-size="22" font-weight="800" fill="url(#grad-main)" letter-spacing="6" text-anchor="middle" filter="url(#glow-sm)">VAPORA ARCHITECTURE</text>
|
||||
<text x="700" y="62" font-family="'Inter', sans-serif" font-size="11" fill="#a855f7" opacity="0.6" letter-spacing="3" text-anchor="middle">18 CRATES · 354 TESTS · 100% RUST</text>
|
||||
|
||||
<!-- Layer labels (left side) -->
|
||||
<text x="30" y="115" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 115)">PRESENTATION</text>
|
||||
<text x="30" y="290" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 290)">SERVICES</text>
|
||||
<text x="30" y="485" font-family="'JetBrains Mono', monospace" font-size="10" fill="#ec4899" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 485)">INTELLIGENCE</text>
|
||||
<text x="30" y="640" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 640)">DATA</text>
|
||||
<text x="30" y="850" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 850)">PROVIDERS</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 1: FRONTEND (y=80) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend card -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1"/>
|
||||
<rect x="494" y="80" width="412" height="1.5" rx="1" fill="url(#grad-main)" opacity="0.8"/>
|
||||
<text x="700" y="106" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#22d3ee" text-anchor="middle" filter="url(#glow-sm)">Leptos WASM Frontend</text>
|
||||
<text x="700" y="124" font-family="'Inter', sans-serif" font-size="10" fill="#1f2937" opacity="0.85" text-anchor="middle">Kanban Board · Glassmorphism UI · UnoCSS · Reactive Components</text>
|
||||
<!-- Pulse ring -->
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="none" stroke="#22d3ee" stroke-opacity="0.15">
|
||||
<animate attributeName="stroke-opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTION: Frontend → Services -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend to Backend -->
|
||||
<path id="path-fe-be" d="M 580 145 L 580 160 Q 580 175 480 175 L 280 175 Q 260 175 260 195 L 260 210" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-be"/></animateMotion></use>
|
||||
|
||||
<!-- Frontend to Agents -->
|
||||
<line x1="700" y1="145" x2="700" y2="210" stroke="#a855f7" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-purple" opacity="0.8"><animateMotion dur="2s" repeatCount="indefinite" path="M 700 145 L 700 210"/></use>
|
||||
|
||||
<!-- Frontend to MCP -->
|
||||
<path id="path-fe-mcp" d="M 820 145 L 820 160 Q 820 175 920 175 L 1100 175 Q 1140 175 1140 195 L 1140 210" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-mcp"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 2: SERVICES (y=210) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend / Axum API -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="210" width="310" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="104" y="210" width="302" height="1.5" rx="1" fill="#22d3ee" opacity="0.6"/>
|
||||
<text x="255" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#22d3ee" text-anchor="middle">Axum Backend API</text>
|
||||
<text x="255" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">40+ REST Endpoints · 161 Tests</text>
|
||||
<!-- Sub-items -->
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="120" y="278">Projects</text>
|
||||
<text x="180" y="278">Tasks</text>
|
||||
<text x="225" y="278">Agents</text>
|
||||
<text x="280" y="278">Workflows</text>
|
||||
<text x="350" y="278">Proposals</text>
|
||||
<text x="120" y="294">Swarm</text>
|
||||
<text x="175" y="294">Metrics</text>
|
||||
<text x="235" y="294">RLM API</text>
|
||||
<text x="300" y="294">WebSocket</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Agent Runtime -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="540" y="210" width="310" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="544" y="210" width="302" height="1.5" rx="1" fill="#a855f7" opacity="0.6"/>
|
||||
<text x="695" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#a855f7" text-anchor="middle">Agent Runtime</text>
|
||||
<text x="695" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Orchestration · Learning Profiles · 71 Tests</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="560" y="278">Registry</text>
|
||||
<text x="625" y="278">Coordinator</text>
|
||||
<text x="720" y="278">Scoring</text>
|
||||
<text x="785" y="278">Profiles</text>
|
||||
<text x="560" y="294">12 Roles</text>
|
||||
<text x="630" y="294">Health Checks</text>
|
||||
<text x="735" y="294">Recency Bias</text>
|
||||
</g>
|
||||
<!-- Heartbeat animation -->
|
||||
<circle cx="835" cy="225" r="4" fill="#a855f7" opacity="0.04">
|
||||
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- MCP Gateway -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="210" width="310" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="984" y="210" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#ec4899" text-anchor="middle">MCP Gateway</text>
|
||||
<text x="1135" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Model Context Protocol · Plugin System</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="1000" y="278">Stdio Transport</text>
|
||||
<text x="1105" y="278">SSE Transport</text>
|
||||
<text x="1210" y="278">JSON-RPC</text>
|
||||
<text x="1000" y="294">6 Tools</text>
|
||||
<text x="1060" y="294">Tool Registry</text>
|
||||
<text x="1160" y="294">Schema Validation</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- A2A Protocol (small card overlapping) -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="445" y="280" width="86" height="35" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="488" y="300" font-family="'JetBrains Mono', monospace" font-size="9" font-weight="700" fill="#a855f7" opacity="0.6" text-anchor="middle">A2A Protocol</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Services → Intelligence -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend → RLM -->
|
||||
<path id="path-be-rlm" d="M 200 310 L 200 380" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 200 310 L 200 380"/></use>
|
||||
|
||||
<!-- Backend → SurrealDB (arco por la derecha para evitar KG) -->
|
||||
<path id="path-be-sdb" d="M 320 310 L 320 340 Q 320 360 360 360 L 420 360 Q 435 360 435 380 Q 435 580 420 580 L 420 585" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.35" stroke-dasharray="4 4"/>
|
||||
|
||||
<!-- Agents → LLM Router -->
|
||||
<line x1="695" y1="310" x2="695" y2="380" stroke="#a855f7" stroke-width="2.4" stroke-opacity="0.3"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="1.5s" begin="0.75s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
|
||||
<!-- Agents → Swarm -->
|
||||
<path id="path-ag-sw" d="M 800 310 L 800 340 Q 800 355 900 355 L 1050 355 Q 1070 355 1070 375 L 1070 380" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-ag-sw"/></animateMotion></use>
|
||||
|
||||
<!-- MCP → Agents -->
|
||||
<path id="path-mcp-ag" d="M 1020 310 L 1020 320 Q 1020 332 920 332 L 810 332 Q 800 332 800 320 L 800 310" fill="none" stroke="#ec4899" stroke-width="1.6" stroke-opacity="0.35" stroke-dasharray="3 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 3: INTELLIGENCE (y=380) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM Engine -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="380" width="340" height="130" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="64" y="380" width="332" height="2" rx="1" fill="url(#grad-main)" opacity="0.7"/>
|
||||
<text x="230" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">RLM Engine</text>
|
||||
<text x="230" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Recursive Language Models · 38 Tests · 17k+ LOC</text>
|
||||
|
||||
<!-- RLM sub-components as mini pills -->
|
||||
<g transform="translate(75, 435)">
|
||||
<!-- Chunking -->
|
||||
<rect x="0" y="0" width="80" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="40" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Chunking</text>
|
||||
<!-- Hybrid Search -->
|
||||
<rect x="90" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="137" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Hybrid Search</text>
|
||||
<!-- Dispatcher -->
|
||||
<rect x="195" y="0" width="80" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="235" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Dispatcher</text>
|
||||
</g>
|
||||
<g transform="translate(75, 465)">
|
||||
<!-- BM25 -->
|
||||
<rect x="0" y="0" width="65" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">BM25</text>
|
||||
<!-- Semantic -->
|
||||
<rect x="75" y="0" width="70" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="110" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Semantic</text>
|
||||
<!-- RRF -->
|
||||
<rect x="155" y="0" width="50" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">RRF</text>
|
||||
<!-- Sandbox -->
|
||||
<rect x="215" y="0" width="60" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Sandbox</text>
|
||||
</g>
|
||||
|
||||
<!-- Animated search indicator -->
|
||||
<g transform="translate(370, 400)">
|
||||
<circle r="6" fill="none" stroke="#22d3ee" stroke-width="0.8" opacity="0.07">
|
||||
<animate attributeName="r" values="4;8;4" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- LLM Router -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="500" y="380" width="380" height="130" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="504" y="380" width="372" height="2" rx="1" fill="#a855f7" opacity="0.7"/>
|
||||
<text x="690" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#a855f7" text-anchor="middle" filter="url(#glow-sm)">Multi-IA LLM Router</text>
|
||||
<text x="690" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Budget Enforcement · Cost Tracking · 53 Tests</text>
|
||||
|
||||
<!-- Router sub-components -->
|
||||
<g transform="translate(515, 435)">
|
||||
<rect x="0" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="47" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Rule Router</text>
|
||||
<rect x="105" y="0" width="115" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="162" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Budget Manager</text>
|
||||
<rect x="230" y="0" width="110" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="285" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Cost Tracker</text>
|
||||
</g>
|
||||
<g transform="translate(515, 465)">
|
||||
<rect x="0" y="0" width="95" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="47" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Fallback Chain</text>
|
||||
<rect x="105" y="0" width="90" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="150" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Cost Ranker</text>
|
||||
<rect x="205" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Providers</text>
|
||||
</g>
|
||||
|
||||
<!-- Routing indicator animation -->
|
||||
<g transform="translate(855, 400)">
|
||||
<line x1="-6" y1="0" x2="6" y2="0" stroke="#a855f7" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#ec4899" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Swarm Coordinator -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="380" width="310" height="130" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="984" y="380" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">Swarm Coordinator</text>
|
||||
<text x="1135" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Load Balancing · Prometheus · 6 Tests</text>
|
||||
|
||||
<g transform="translate(995, 435)">
|
||||
<rect x="0" y="0" width="90" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="45" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Assignment</text>
|
||||
<rect x="100" y="0" width="90" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="145" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Filtering</text>
|
||||
<rect x="200" y="0" width="80" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="240" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Metrics</text>
|
||||
</g>
|
||||
<g transform="translate(995, 465)">
|
||||
<rect x="0" y="0" width="130" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="65" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">success_rate / (1+load)</text>
|
||||
<rect x="140" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Capabilities</text>
|
||||
</g>
|
||||
|
||||
<!-- Swarm pulse -->
|
||||
<circle cx="1270" cy="395" r="3" fill="#ec4899" opacity="0.04">
|
||||
<animate attributeName="r" values="2;5;2" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- RLM → LLM Router connection -->
|
||||
<path id="path-rlm-llm" d="M 400 445 L 500 445" fill="none" stroke="url(#grad-cyan-purple)" stroke-width="3" stroke-opacity="0.3"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 400 445 L 500 445"/></use>
|
||||
|
||||
<!-- LLM Router → Swarm connection -->
|
||||
<path d="M 880 445 L 980 445" fill="none" stroke="url(#grad-purple-pink)" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 880 445 L 980 445"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Intelligence → Data -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM → KG -->
|
||||
<path id="path-rlm-kg" d="M 160 510 L 160 575" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 160 510 L 160 575"/></use>
|
||||
|
||||
<!-- RLM → SurrealDB -->
|
||||
<path id="path-rlm-sdb" d="M 300 510 L 300 540 Q 300 555 400 555 L 530 555 Q 545 555 545 575" fill="none" stroke="#22d3ee" stroke-width="2.4" stroke-opacity="0.25"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-rlm-sdb"/></animateMotion></use>
|
||||
|
||||
<!-- LLM Router → Providers (goes down below data) -->
|
||||
<path id="path-llm-providers" d="M 790 510 L 790 725" fill="none" stroke="#a855f7" stroke-width="3" stroke-opacity="0.2"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="3s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="3s" begin="1.5s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
|
||||
<!-- Swarm → NATS -->
|
||||
<path id="path-sw-nats" d="M 1135 510 L 1135 575" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 1135 510 L 1135 575"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 4: DATA LAYER (y=575) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Knowledge Graph -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="575" width="260" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="1"/>
|
||||
<rect x="60" y="575" width="260" height="1.5" rx="1" fill="#22d3ee" opacity="0.5"/>
|
||||
<text x="190" y="600" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Knowledge Graph</text>
|
||||
<text x="190" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.7" text-anchor="middle">Temporal History · Learning Curves · 20 Tests</text>
|
||||
<g transform="translate(75, 630)">
|
||||
<rect x="0" y="0" width="80" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="40" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Executions</text>
|
||||
<rect x="90" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="125" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Similarity</text>
|
||||
<rect x="170" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="200" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Causal</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="575" width="340" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="420" y="575" width="340" height="2" rx="1" fill="url(#grad-main)" opacity="0.6"/>
|
||||
<text x="590" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">SurrealDB</text>
|
||||
<text x="590" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Multi-Model Database · Multi-Tenant Scopes</text>
|
||||
|
||||
<g transform="translate(435, 630)">
|
||||
<rect x="0" y="0" width="65" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Projects</text>
|
||||
<rect x="75" y="0" width="50" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="100" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Tasks</text>
|
||||
<rect x="135" y="0" width="55" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="162" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agents</text>
|
||||
<rect x="200" y="0" width="55" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="227" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Chunks</text>
|
||||
<rect x="265" y="0" width="45" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="287" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- DB activity indicator -->
|
||||
<g transform="translate(735, 590)">
|
||||
<rect x="0" y="0" width="2" height="10" fill="#22d3ee" opacity="0.4">
|
||||
<animate attributeName="height" values="6;12;6" dur="1.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="5" y="0" width="2" height="8" fill="#a855f7" opacity="0.4">
|
||||
<animate attributeName="height" values="8;14;8" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="10" y="0" width="2" height="12" fill="#ec4899" opacity="0.4">
|
||||
<animate attributeName="height" values="10;16;10" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- KG → SurrealDB -->
|
||||
<line x1="320" y1="630" x2="420" y2="630" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 320 630 L 420 630"/></use>
|
||||
|
||||
<!-- NATS JetStream -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="860" y="575" width="340" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="860" y="575" width="340" height="1.5" rx="1" fill="#ec4899" opacity="0.5"/>
|
||||
<text x="1030" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">NATS JetStream</text>
|
||||
<text x="1030" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Message Queue · Async Coordination · Pub/Sub</text>
|
||||
|
||||
<g transform="translate(875, 630)">
|
||||
<rect x="0" y="0" width="75" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="37" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agent Jobs</text>
|
||||
<rect x="85" y="0" width="75" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="122" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Workflows</text>
|
||||
<rect x="170" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="205" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Proposals</text>
|
||||
<rect x="250" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="280" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- Message pulse animation -->
|
||||
<g transform="translate(1125, 590)">
|
||||
<circle r="4" fill="none" stroke="#22d3ee" stroke-width="1.5" opacity="0.07">
|
||||
<animate attributeName="r" values="3;8;3" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.4;1" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB ↔ NATS bridge line -->
|
||||
<line x1="760" y1="625" x2="860" y2="625" stroke="url(#grad-purple-pink)" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="4 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Data → Providers -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Central provider trunk (from LLM Router, already drawn) -->
|
||||
<!-- Branch to each provider -->
|
||||
<path id="path-to-claude" d="M 790 725 Q 790 750 500 750 L 245 750 Q 225 750 225 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-to-claude"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-openai" d="M 790 725 Q 790 760 600 760 L 555 760 Q 545 760 545 785" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2s" repeatCount="indefinite"><mpath href="#path-to-openai"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-gemini" d="M 790 725 Q 790 770 810 770 L 855 770 Q 865 770 865 785" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-to-gemini"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-ollama" d="M 790 725 Q 790 750 900 750 L 1155 750 Q 1175 750 1175 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.8s" repeatCount="indefinite"><mpath href="#path-to-ollama"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 5: LLM PROVIDERS (y=810) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Claude -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="225" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Anthropic Claude</text>
|
||||
<text x="225" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">Opus · Sonnet · Haiku</text>
|
||||
</g>
|
||||
|
||||
<!-- OpenAI -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="785" width="250" height="55" rx="6" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="545" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#a855f7" text-anchor="middle">OpenAI</text>
|
||||
<text x="545" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">GPT-4 · GPT-4o · GPT-3.5</text>
|
||||
</g>
|
||||
|
||||
<!-- Gemini -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="740" y="785" width="250" height="55" rx="6" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="865" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#ec4899" text-anchor="middle">Google Gemini</text>
|
||||
<text x="865" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">2.0 Pro · Flash · 1.5 Pro</text>
|
||||
</g>
|
||||
|
||||
<!-- Ollama -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="1060" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="1185" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Ollama (Local)</text>
|
||||
<text x="1185" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">Llama · Mistral · CodeLlama</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SUPPORTING CRATES (bottom strip) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(0, 882)">
|
||||
<rect x="60" y="0" width="1280" height="50" rx="6" fill="rgba(168,85,247,0.04)" stroke="#a855f7" stroke-opacity="0.1" stroke-width="0.5"/>
|
||||
<text x="700" y="16" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.7" text-anchor="middle" letter-spacing="2">SUPPORTING CRATES</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="10" opacity="0.6" text-anchor="middle">
|
||||
<text x="130" y="36" fill="#22d3ee">vapora-shared</text>
|
||||
<text x="260" y="36" fill="#a855f7">vapora-tracking</text>
|
||||
<text x="400" y="36" fill="#ec4899">vapora-telemetry</text>
|
||||
<text x="540" y="36" fill="#22d3ee">vapora-analytics</text>
|
||||
<text x="680" y="36" fill="#a855f7">vapora-worktree</text>
|
||||
<text x="820" y="36" fill="#ec4899">vapora-doc-lifecycle</text>
|
||||
<text x="975" y="36" fill="#22d3ee">vapora-workflow-engine</text>
|
||||
<text x="1140" y="36" fill="#a855f7">vapora-cli</text>
|
||||
<text x="1250" y="36" fill="#ec4899">vapora-leptos-ui</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- OBSERVABILITY STRIP (right edge) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(1340, 80)">
|
||||
<rect x="0" y="0" width="4" height="790" rx="2" fill="url(#grad-vertical)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="15" y="400" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.6" letter-spacing="2" text-anchor="middle" transform="rotate(90 15 400)">PROMETHEUS · GRAFANA · OPENTELEMETRY</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- FOOTER -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="970" font-family="'JetBrains Mono', monospace" font-size="11" font-weight="700" fill="url(#grad-main)" text-anchor="middle" opacity="0.7" letter-spacing="3">VAPORA v1.2.0</text>
|
||||
<text x="700" y="993" font-family="'Inter', sans-serif" font-size="9" fill="#a855f7" opacity="0.6" text-anchor="middle" letter-spacing="1">Evaporate complexity · Full-Stack Rust · Production Ready</text>
|
||||
|
||||
<!-- Bottom gradient bar -->
|
||||
<rect x="400" y="1005" width="600" height="2" rx="1" fill="url(#grad-main)" opacity="0.3"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 42 KiB |
1
assets/web/architecture-diagram.html
Normal file
1
assets/web/architecture-diagram.html
Normal file
@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>VAPORA — Architecture</title><style> @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap");:root{--bg-primary:#0a0a0a;--text-primary:#c8ccd4;--border-light:rgba(255,255,255,0.1);--border-color:rgba(34,211,238,0.3);}html.light-mode{--bg-primary:#ffffff;--text-primary:#1a1a1a;--border-light:rgba(0,0,0,0.1);--border-color:rgba(0,0,0,0.1);}*{margin:0;padding:0;box-sizing:border-box;}body{background:var(--bg-primary);color:var(--text-primary);font-family:"Inter",sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background-color 0.3s ease,color 0.3s ease;}.diagram-container{width:1400px;height:1020px;position:relative;display:inline-block;}svg{width:100%;height:100%;}.nav-toggle{position:fixed;top:2rem;right:2rem;z-index:100;display:flex;gap:0.5rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;padding:0.3rem 0.3rem;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.1);}.nav-btn{background:transparent;border:none;color:#94a3b8;padding:0.5rem 1rem;border-radius:18px;cursor:pointer;font-weight:700;font-size:0.85rem;text-transform:uppercase;transition:all 0.3s ease;font-family:"JetBrains Mono",monospace;text-decoration:none;display:inline-block;}.nav-btn.active{background:linear-gradient(135deg,#22d3ee 0%,#a855f7 100%);color:#fff;}.nav-btn:hover{color:#22d3ee;}.theme-toggle{background:transparent;border:none;color:var(--text-primary);padding:0.5rem 1rem;border-radius:18px;cursor:pointer;font-weight:700;font-size:1.2rem;transition:all 0.3s ease;}.theme-toggle:hover{color:#22d3ee;}@media (max-width:768px){.nav-toggle{top:1rem;right:1rem;}.diagram-container{width:100vw;height:auto;}}</style></head><body><div class="nav-toggle"><button style="display: none" class="nav-btn active" data-lang="en" onclick="switchLanguage('en')" > EN </button><button style="display: none" class="nav-btn" data-lang="es" onclick="switchLanguage('es')" > ES </button><button class="theme-toggle" onclick="toggleTheme()" title="Toggle light/dark mode" ><span id="theme-icon">🌙</span></button><a href="index.html" class="nav-btn" style=" background: rgba(34, 211, 238, 0.2); border: 1px solid rgba(34, 211, 238, 0.5); " >← VAPORA</a ></div><div class="diagram-container"><img id="dark-svg" src="vapora_architecture.svg" alt="VAPORA Architecture - Dark Mode" style="width: 100%; height: 100%; display: block" /><img id="light-svg" src="vapora_architecture_white.svg" alt="VAPORA Architecture - Light Mode" style="width: 100%; height: 100%; display: none" /></div><script> const LANG_KEY = "vapora-arch-lang";function getCurrentLanguage(){return localStorage.getItem(LANG_KEY)|| "en";}function switchLanguage(lang){localStorage.setItem(LANG_KEY,lang);document .querySelectorAll(".nav-btn[data-lang]").forEach((btn)=>{btn.classList.remove("active");if(btn.dataset.lang === lang){btn.classList.add("active");}});document .querySelectorAll("[data-en][data-es]").forEach((el)=>{const content = el.dataset[lang];el.textContent = content;});document.documentElement.lang = lang;}document.addEventListener("DOMContentLoaded",()=>{const currentLang = getCurrentLanguage();switchLanguage(currentLang);const currentTheme = getTheme();setTheme(currentTheme);});const THEME_KEY = "vapora-theme";function getTheme(){return localStorage.getItem(THEME_KEY)|| "dark";}function setTheme(theme){localStorage.setItem(THEME_KEY,theme);const html = document.documentElement;const icon = document.getElementById("theme-icon");const darkSvg = document.getElementById("dark-svg");const lightSvg = document.getElementById("light-svg");if(theme === "light"){html.classList.add("light-mode");icon.textContent = "🌙";if(darkSvg)darkSvg.style.display = "none";if(lightSvg)lightSvg.style.display = "block";}else{html.classList.remove("light-mode");icon.textContent = "☀️";if(darkSvg)darkSvg.style.display = "block";if(lightSvg)lightSvg.style.display = "none";}}function toggleTheme(){const currentTheme = getTheme();const newTheme = currentTheme === "dark" ? "light" : "dark";setTheme(newTheme);}</script></body></html>
|
||||
250
assets/web/src/architecture-diagram.html
Normal file
250
assets/web/src/architecture-diagram.html
Normal file
@ -0,0 +1,250 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>VAPORA — Architecture</title>
|
||||
<style>
|
||||
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap");
|
||||
|
||||
:root {
|
||||
--bg-primary: #0a0a0a;
|
||||
--text-primary: #c8ccd4;
|
||||
--border-light: rgba(255, 255, 255, 0.1);
|
||||
--border-color: rgba(34, 211, 238, 0.3);
|
||||
}
|
||||
|
||||
html.light-mode {
|
||||
--bg-primary: #ffffff;
|
||||
--text-primary: #1a1a1a;
|
||||
--border-light: rgba(0, 0, 0, 0.1);
|
||||
--border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-family: "Inter", sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
|
||||
.diagram-container {
|
||||
width: 1400px;
|
||||
height: 1020px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Navigation Menu */
|
||||
.nav-toggle {
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 0.3rem 0.3rem;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 18px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.3s ease;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: linear-gradient(135deg, #22d3ee 0%, #a855f7 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
color: #22d3ee;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 18px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
color: #22d3ee;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-toggle {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
.diagram-container {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-toggle">
|
||||
<button
|
||||
style="display: none"
|
||||
class="nav-btn active"
|
||||
data-lang="en"
|
||||
onclick="switchLanguage('en')"
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
<button
|
||||
style="display: none"
|
||||
class="nav-btn"
|
||||
data-lang="es"
|
||||
onclick="switchLanguage('es')"
|
||||
>
|
||||
ES
|
||||
</button>
|
||||
<button
|
||||
class="theme-toggle"
|
||||
onclick="toggleTheme()"
|
||||
title="Toggle light/dark mode"
|
||||
>
|
||||
<span id="theme-icon">🌙</span>
|
||||
</button>
|
||||
<a
|
||||
href="index.html"
|
||||
class="nav-btn"
|
||||
style="
|
||||
background: rgba(34, 211, 238, 0.2);
|
||||
border: 1px solid rgba(34, 211, 238, 0.5);
|
||||
"
|
||||
>← VAPORA</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="diagram-container">
|
||||
<img
|
||||
id="dark-svg"
|
||||
src="vapora_architecture.svg"
|
||||
alt="VAPORA Architecture - Dark Mode"
|
||||
style="width: 100%; height: 100%; display: block"
|
||||
/>
|
||||
<img
|
||||
id="light-svg"
|
||||
src="vapora_architecture_white.svg"
|
||||
alt="VAPORA Architecture - Light Mode"
|
||||
style="width: 100%; height: 100%; display: none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Language management
|
||||
const LANG_KEY = "vapora-arch-lang";
|
||||
|
||||
function getCurrentLanguage() {
|
||||
return localStorage.getItem(LANG_KEY) || "en";
|
||||
}
|
||||
|
||||
function switchLanguage(lang) {
|
||||
localStorage.setItem(LANG_KEY, lang);
|
||||
|
||||
// Update language buttons
|
||||
document
|
||||
.querySelectorAll(".nav-btn[data-lang]")
|
||||
.forEach((btn) => {
|
||||
btn.classList.remove("active");
|
||||
if (btn.dataset.lang === lang) {
|
||||
btn.classList.add("active");
|
||||
}
|
||||
});
|
||||
|
||||
// Update all translatable elements
|
||||
document
|
||||
.querySelectorAll("[data-en][data-es]")
|
||||
.forEach((el) => {
|
||||
const content = el.dataset[lang];
|
||||
el.textContent = content;
|
||||
});
|
||||
|
||||
document.documentElement.lang = lang;
|
||||
}
|
||||
|
||||
// Initialize language on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const currentLang = getCurrentLanguage();
|
||||
switchLanguage(currentLang);
|
||||
const currentTheme = getTheme();
|
||||
setTheme(currentTheme);
|
||||
});
|
||||
|
||||
// Theme management
|
||||
const THEME_KEY = "vapora-theme";
|
||||
|
||||
function getTheme() {
|
||||
return localStorage.getItem(THEME_KEY) || "dark";
|
||||
}
|
||||
|
||||
function setTheme(theme) {
|
||||
localStorage.setItem(THEME_KEY, theme);
|
||||
const html = document.documentElement;
|
||||
const icon = document.getElementById("theme-icon");
|
||||
const darkSvg = document.getElementById("dark-svg");
|
||||
const lightSvg = document.getElementById("light-svg");
|
||||
|
||||
if (theme === "light") {
|
||||
html.classList.add("light-mode");
|
||||
icon.textContent = "🌙";
|
||||
if (darkSvg) darkSvg.style.display = "none";
|
||||
if (lightSvg) lightSvg.style.display = "block";
|
||||
} else {
|
||||
html.classList.remove("light-mode");
|
||||
icon.textContent = "☀️";
|
||||
if (darkSvg) darkSvg.style.display = "block";
|
||||
if (lightSvg) lightSvg.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const currentTheme = getTheme();
|
||||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||||
setTheme(newTheme);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
576
assets/web/src/vapora_architecture.svg
Normal file
576
assets/web/src/vapora_architecture.svg
Normal file
@ -0,0 +1,576 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1020" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;500;600&display=swap');
|
||||
</style>
|
||||
|
||||
<!-- Brand gradients -->
|
||||
<linearGradient id="grad-main" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="50%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-cyan-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="100%" stop-color="#a855f7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-purple-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.8"/>
|
||||
<stop offset="50%" stop-color="#a855f7" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-cyan" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#22d3ee" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#a855f7" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ec4899" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-sm">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-md">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-lg">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glass-card">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
|
||||
<feOffset dx="0" dy="1" result="shadow"/>
|
||||
<feFlood flood-color="#000" flood-opacity="0.3" result="color"/>
|
||||
<feComposite in="color" in2="shadow" operator="in" result="shadow"/>
|
||||
<feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Animated particle marker -->
|
||||
<circle id="particle-cyan" r="3" fill="#22d3ee" filter="url(#glow-md)"/>
|
||||
<circle id="particle-purple" r="3" fill="#a855f7" filter="url(#glow-md)"/>
|
||||
<circle id="particle-pink" r="3" fill="#ec4899" filter="url(#glow-md)"/>
|
||||
<circle id="particle-sm-cyan" r="2" fill="#22d3ee" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-purple" r="2" fill="#a855f7" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-pink" r="2" fill="#ec4899" filter="url(#glow-sm)"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- BACKGROUND -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<rect width="1400" height="1020" fill="#0a0a0a"/>
|
||||
|
||||
<!-- Subtle tech grid -->
|
||||
<g opacity="0.04" stroke="#22d3ee" stroke-width="0.5">
|
||||
<line x1="0" y1="0" x2="1400" y2="0"><animate attributeName="y1" values="0;1020" dur="60s" repeatCount="indefinite"/><animate attributeName="y2" values="0;1020" dur="60s" repeatCount="indefinite"/></line>
|
||||
<line x1="100" y1="0" x2="100" y2="1020"/>
|
||||
<line x1="250" y1="0" x2="250" y2="1020"/>
|
||||
<line x1="400" y1="0" x2="400" y2="1020"/>
|
||||
<line x1="550" y1="0" x2="550" y2="1020"/>
|
||||
<line x1="700" y1="0" x2="700" y2="1020"/>
|
||||
<line x1="850" y1="0" x2="850" y2="1020"/>
|
||||
<line x1="1000" y1="0" x2="1000" y2="1020"/>
|
||||
<line x1="1150" y1="0" x2="1150" y2="1020"/>
|
||||
<line x1="1300" y1="0" x2="1300" y2="1020"/>
|
||||
<line x1="0" y1="130" x2="1400" y2="130"/>
|
||||
<line x1="0" y1="260" x2="1400" y2="260"/>
|
||||
<line x1="0" y1="420" x2="1400" y2="420"/>
|
||||
<line x1="0" y1="580" x2="1400" y2="580"/>
|
||||
<line x1="0" y1="720" x2="1400" y2="720"/>
|
||||
<line x1="0" y1="860" x2="1400" y2="860"/>
|
||||
</g>
|
||||
|
||||
<!-- Ambient glow orbs -->
|
||||
<circle cx="240" cy="350" r="180" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="r" values="160;200;160" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="690" cy="360" r="175" fill="#a855f7" opacity="0.05">
|
||||
<animate attributeName="r" values="175;195;175" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1130" cy="350" r="200" fill="#ec4899" opacity="0.07">
|
||||
<animate attributeName="r" values="180;220;180" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- TITLE -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="42" font-family="'JetBrains Mono', monospace" font-size="22" font-weight="800" fill="url(#grad-main)" letter-spacing="6" text-anchor="middle" filter="url(#glow-sm)">VAPORA ARCHITECTURE</text>
|
||||
<text x="700" y="62" font-family="'Inter', sans-serif" font-size="11" fill="#a855f7" opacity="0.6" letter-spacing="3" text-anchor="middle">18 CRATES · 354 TESTS · 100% RUST</text>
|
||||
|
||||
<!-- Layer labels (left side) -->
|
||||
<text x="30" y="115" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 115)">PRESENTATION</text>
|
||||
<text x="30" y="290" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 290)">SERVICES</text>
|
||||
<text x="30" y="485" font-family="'JetBrains Mono', monospace" font-size="10" fill="#ec4899" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 485)">INTELLIGENCE</text>
|
||||
<text x="30" y="640" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 640)">DATA</text>
|
||||
<text x="30" y="850" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 850)">PROVIDERS</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 1: FRONTEND (y=80) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend card -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="2"/>
|
||||
<rect x="494" y="80" width="412" height="1.5" rx="1" fill="url(#grad-main)" opacity="0.8"/>
|
||||
<text x="700" y="106" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#22d3ee" text-anchor="middle" filter="url(#glow-sm)">Leptos WASM Frontend</text>
|
||||
<text x="700" y="124" font-family="'Inter', sans-serif" font-size="10" fill="#ffffff" opacity="0.5" text-anchor="middle">Kanban Board · Glassmorphism UI · UnoCSS · Reactive Components</text>
|
||||
<!-- Pulse ring -->
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="none" stroke="#22d3ee" stroke-opacity="0.15">
|
||||
<animate attributeName="stroke-opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTION: Frontend → Services -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend to Backend -->
|
||||
<path id="path-fe-be" d="M 580 145 L 580 160 Q 580 175 480 175 L 280 175 Q 260 175 260 195 L 260 210" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-be"/></animateMotion></use>
|
||||
|
||||
<!-- Frontend to Agents -->
|
||||
<line x1="700" y1="145" x2="700" y2="210" stroke="#a855f7" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-purple" opacity="0.8"><animateMotion dur="2s" repeatCount="indefinite" path="M 700 145 L 700 210"/></use>
|
||||
|
||||
<!-- Frontend to MCP -->
|
||||
<path id="path-fe-mcp" d="M 820 145 L 820 160 Q 820 175 920 175 L 1100 175 Q 1140 175 1140 195 L 1140 210" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-mcp"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 2: SERVICES (y=210) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend / Axum API -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="210" width="310" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="104" y="210" width="302" height="1.5" rx="1" fill="#22d3ee" opacity="0.6"/>
|
||||
<text x="255" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#22d3ee" text-anchor="middle">Axum Backend API</text>
|
||||
<text x="255" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">40+ REST Endpoints · 161 Tests</text>
|
||||
<!-- Sub-items -->
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="120" y="278">Projects</text>
|
||||
<text x="180" y="278">Tasks</text>
|
||||
<text x="225" y="278">Agents</text>
|
||||
<text x="280" y="278">Workflows</text>
|
||||
<text x="350" y="278">Proposals</text>
|
||||
<text x="120" y="294">Swarm</text>
|
||||
<text x="175" y="294">Metrics</text>
|
||||
<text x="235" y="294">RLM API</text>
|
||||
<text x="300" y="294">WebSocket</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Agent Runtime -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="540" y="210" width="310" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="544" y="210" width="302" height="1.5" rx="1" fill="#a855f7" opacity="0.6"/>
|
||||
<text x="695" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#a855f7" text-anchor="middle">Agent Runtime</text>
|
||||
<text x="695" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Orchestration · Learning Profiles · 71 Tests</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="560" y="278">Registry</text>
|
||||
<text x="625" y="278">Coordinator</text>
|
||||
<text x="720" y="278">Scoring</text>
|
||||
<text x="785" y="278">Profiles</text>
|
||||
<text x="560" y="294">12 Roles</text>
|
||||
<text x="630" y="294">Health Checks</text>
|
||||
<text x="735" y="294">Recency Bias</text>
|
||||
</g>
|
||||
<!-- Heartbeat animation -->
|
||||
<circle cx="835" cy="225" r="4" fill="#a855f7" opacity="0.07">
|
||||
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- MCP Gateway -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="210" width="310" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="984" y="210" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#ec4899" text-anchor="middle">MCP Gateway</text>
|
||||
<text x="1135" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Model Context Protocol · Plugin System</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="1000" y="278">Stdio Transport</text>
|
||||
<text x="1105" y="278">SSE Transport</text>
|
||||
<text x="1210" y="278">JSON-RPC</text>
|
||||
<text x="1000" y="294">6 Tools</text>
|
||||
<text x="1060" y="294">Tool Registry</text>
|
||||
<text x="1160" y="294">Schema Validation</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- A2A Protocol (small card overlapping) -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="445" y="280" width="86" height="35" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="488" y="300" font-family="'JetBrains Mono', monospace" font-size="9" font-weight="700" fill="#a855f7" opacity="0.6" text-anchor="middle">A2A Protocol</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Services → Intelligence -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend → RLM -->
|
||||
<path id="path-be-rlm" d="M 200 310 L 200 380" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 200 310 L 200 380"/></use>
|
||||
|
||||
<!-- Backend → SurrealDB (arco por la derecha para evitar KG) -->
|
||||
<path id="path-be-sdb" d="M 320 310 L 320 340 Q 320 360 360 360 L 420 360 Q 435 360 435 380 Q 435 580 420 580 L 420 585" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.35" stroke-dasharray="4 4"/>
|
||||
|
||||
<!-- Agents → LLM Router -->
|
||||
<line x1="695" y1="310" x2="695" y2="380" stroke="#a855f7" stroke-width="2.4" stroke-opacity="0.3"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="1.5s" begin="0.75s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
|
||||
<!-- Agents → Swarm -->
|
||||
<path id="path-ag-sw" d="M 800 310 L 800 340 Q 800 355 900 355 L 1050 355 Q 1070 355 1070 375 L 1070 380" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-ag-sw"/></animateMotion></use>
|
||||
|
||||
<!-- MCP → Agents -->
|
||||
<path id="path-mcp-ag" d="M 1020 310 L 1020 320 Q 1020 332 920 332 L 810 332 Q 800 332 800 320 L 800 310" fill="none" stroke="#ec4899" stroke-width="1.6" stroke-opacity="0.35" stroke-dasharray="3 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 3: INTELLIGENCE (y=380) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM Engine -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="380" width="340" height="130" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="64" y="380" width="332" height="2" rx="1" fill="url(#grad-main)" opacity="0.7"/>
|
||||
<text x="230" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">RLM Engine</text>
|
||||
<text x="230" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Recursive Language Models · 38 Tests · 17k+ LOC</text>
|
||||
|
||||
<!-- RLM sub-components as mini pills -->
|
||||
<g transform="translate(75, 435)">
|
||||
<!-- Chunking -->
|
||||
<rect x="0" y="0" width="80" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="40" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Chunking</text>
|
||||
<!-- Hybrid Search -->
|
||||
<rect x="90" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="137" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Hybrid Search</text>
|
||||
<!-- Dispatcher -->
|
||||
<rect x="195" y="0" width="80" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="235" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Dispatcher</text>
|
||||
</g>
|
||||
<g transform="translate(75, 465)">
|
||||
<!-- BM25 -->
|
||||
<rect x="0" y="0" width="65" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">BM25</text>
|
||||
<!-- Semantic -->
|
||||
<rect x="75" y="0" width="70" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="110" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Semantic</text>
|
||||
<!-- RRF -->
|
||||
<rect x="155" y="0" width="50" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">RRF</text>
|
||||
<!-- Sandbox -->
|
||||
<rect x="215" y="0" width="60" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Sandbox</text>
|
||||
</g>
|
||||
|
||||
<!-- Animated search indicator -->
|
||||
<g transform="translate(370, 400)">
|
||||
<circle r="6" fill="none" stroke="#22d3ee" stroke-width="0.8" opacity="0.07">
|
||||
<animate attributeName="r" values="4;8;4" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- LLM Router -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="500" y="380" width="380" height="130" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="504" y="380" width="372" height="2" rx="1" fill="#a855f7" opacity="0.7"/>
|
||||
<text x="690" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#a855f7" text-anchor="middle" filter="url(#glow-sm)">Multi-IA LLM Router</text>
|
||||
<text x="690" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Budget Enforcement · Cost Tracking · 53 Tests</text>
|
||||
|
||||
<!-- Router sub-components -->
|
||||
<g transform="translate(515, 435)">
|
||||
<rect x="0" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="47" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Rule Router</text>
|
||||
<rect x="105" y="0" width="115" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="162" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Budget Manager</text>
|
||||
<rect x="230" y="0" width="110" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="285" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Cost Tracker</text>
|
||||
</g>
|
||||
<g transform="translate(515, 465)">
|
||||
<rect x="0" y="0" width="95" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="47" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Fallback Chain</text>
|
||||
<rect x="105" y="0" width="90" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="150" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Cost Ranker</text>
|
||||
<rect x="205" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Providers</text>
|
||||
</g>
|
||||
|
||||
<!-- Routing indicator animation -->
|
||||
<g transform="translate(855, 400)">
|
||||
<line x1="-6" y1="0" x2="6" y2="0" stroke="#a855f7" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#ec4899" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Swarm Coordinator -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="380" width="310" height="130" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="984" y="380" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">Swarm Coordinator</text>
|
||||
<text x="1135" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Load Balancing · Prometheus · 6 Tests</text>
|
||||
|
||||
<g transform="translate(995, 435)">
|
||||
<rect x="0" y="0" width="90" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="45" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Assignment</text>
|
||||
<rect x="100" y="0" width="90" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="145" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Filtering</text>
|
||||
<rect x="200" y="0" width="80" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="240" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Metrics</text>
|
||||
</g>
|
||||
<g transform="translate(995, 465)">
|
||||
<rect x="0" y="0" width="130" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="65" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">success_rate / (1+load)</text>
|
||||
<rect x="140" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Capabilities</text>
|
||||
</g>
|
||||
|
||||
<!-- Swarm pulse -->
|
||||
<circle cx="1270" cy="395" r="3" fill="#ec4899" opacity="0.07">
|
||||
<animate attributeName="r" values="2;5;2" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- RLM → LLM Router connection -->
|
||||
<path id="path-rlm-llm" d="M 400 445 L 500 445" fill="none" stroke="url(#grad-cyan-purple)" stroke-width="3" stroke-opacity="0.3"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 400 445 L 500 445"/></use>
|
||||
|
||||
<!-- LLM Router → Swarm connection -->
|
||||
<path d="M 880 445 L 980 445" fill="none" stroke="url(#grad-purple-pink)" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 880 445 L 980 445"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Intelligence → Data -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM → KG -->
|
||||
<path id="path-rlm-kg" d="M 160 510 L 160 575" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 160 510 L 160 575"/></use>
|
||||
|
||||
<!-- RLM → SurrealDB -->
|
||||
<path id="path-rlm-sdb" d="M 300 510 L 300 540 Q 300 555 400 555 L 530 555 Q 545 555 545 575" fill="none" stroke="#22d3ee" stroke-width="2.4" stroke-opacity="0.25"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-rlm-sdb"/></animateMotion></use>
|
||||
|
||||
<!-- LLM Router → Providers (goes down below data) -->
|
||||
<path id="path-llm-providers" d="M 790 510 L 790 725" fill="none" stroke="#a855f7" stroke-width="3" stroke-opacity="0.2"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="3s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="3s" begin="1.5s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
|
||||
<!-- Swarm → NATS -->
|
||||
<path id="path-sw-nats" d="M 1135 510 L 1135 575" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 1135 510 L 1135 575"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 4: DATA LAYER (y=575) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Knowledge Graph -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="575" width="260" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="2"/>
|
||||
<rect x="60" y="575" width="260" height="1.5" rx="1" fill="#22d3ee" opacity="0.5"/>
|
||||
<text x="190" y="600" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Knowledge Graph</text>
|
||||
<text x="190" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.4" text-anchor="middle">Temporal History · Learning Curves · 20 Tests</text>
|
||||
<g transform="translate(75, 630)">
|
||||
<rect x="0" y="0" width="80" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="40" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Executions</text>
|
||||
<rect x="90" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="125" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Similarity</text>
|
||||
<rect x="170" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="200" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Causal</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="575" width="340" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="420" y="575" width="340" height="2" rx="1" fill="url(#grad-main)" opacity="0.6"/>
|
||||
<text x="590" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">SurrealDB</text>
|
||||
<text x="590" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Multi-Model Database · Multi-Tenant Scopes</text>
|
||||
|
||||
<g transform="translate(435, 630)">
|
||||
<rect x="0" y="0" width="65" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Projects</text>
|
||||
<rect x="75" y="0" width="50" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="100" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Tasks</text>
|
||||
<rect x="135" y="0" width="55" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="162" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agents</text>
|
||||
<rect x="200" y="0" width="55" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="227" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Chunks</text>
|
||||
<rect x="265" y="0" width="45" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="287" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- DB activity indicator -->
|
||||
<g transform="translate(735, 590)">
|
||||
<rect x="0" y="0" width="2" height="10" fill="#22d3ee" opacity="0.4">
|
||||
<animate attributeName="height" values="6;12;6" dur="1.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="5" y="0" width="2" height="8" fill="#a855f7" opacity="0.4">
|
||||
<animate attributeName="height" values="8;14;8" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="10" y="0" width="2" height="12" fill="#ec4899" opacity="0.4">
|
||||
<animate attributeName="height" values="10;16;10" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- KG → SurrealDB -->
|
||||
<line x1="320" y1="630" x2="420" y2="630" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 320 630 L 420 630"/></use>
|
||||
|
||||
<!-- NATS JetStream -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="860" y="575" width="340" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="860" y="575" width="340" height="1.5" rx="1" fill="#ec4899" opacity="0.5"/>
|
||||
<text x="1030" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">NATS JetStream</text>
|
||||
<text x="1030" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Message Queue · Async Coordination · Pub/Sub</text>
|
||||
|
||||
<g transform="translate(875, 630)">
|
||||
<rect x="0" y="0" width="75" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="37" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agent Jobs</text>
|
||||
<rect x="85" y="0" width="75" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="122" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Workflows</text>
|
||||
<rect x="170" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="205" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Proposals</text>
|
||||
<rect x="250" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="280" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- Message pulse animation -->
|
||||
<g transform="translate(1125, 590)">
|
||||
<circle r="4" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.07">
|
||||
<animate attributeName="r" values="3;8;3" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#ffffff" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB ↔ NATS bridge line -->
|
||||
<line x1="760" y1="625" x2="860" y2="625" stroke="url(#grad-purple-pink)" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="4 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Data → Providers -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Central provider trunk (from LLM Router, already drawn) -->
|
||||
<!-- Branch to each provider -->
|
||||
<path id="path-to-claude" d="M 790 725 Q 790 750 500 750 L 245 750 Q 225 750 225 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-to-claude"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-openai" d="M 790 725 Q 790 760 600 760 L 555 760 Q 545 760 545 785" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2s" repeatCount="indefinite"><mpath href="#path-to-openai"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-gemini" d="M 790 725 Q 790 770 810 770 L 855 770 Q 865 770 865 785" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-to-gemini"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-ollama" d="M 790 725 Q 790 750 900 750 L 1155 750 Q 1175 750 1175 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.8s" repeatCount="indefinite"><mpath href="#path-to-ollama"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 5: LLM PROVIDERS (y=810) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Claude -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="225" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Anthropic Claude</text>
|
||||
<text x="225" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">Opus · Sonnet · Haiku</text>
|
||||
</g>
|
||||
|
||||
<!-- OpenAI -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="785" width="250" height="55" rx="6" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="545" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#a855f7" text-anchor="middle">OpenAI</text>
|
||||
<text x="545" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">GPT-4 · GPT-4o · GPT-3.5</text>
|
||||
</g>
|
||||
|
||||
<!-- Gemini -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="740" y="785" width="250" height="55" rx="6" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="865" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#ec4899" text-anchor="middle">Google Gemini</text>
|
||||
<text x="865" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">2.0 Pro · Flash · 1.5 Pro</text>
|
||||
</g>
|
||||
|
||||
<!-- Ollama -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="1060" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="1185" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Ollama (Local)</text>
|
||||
<text x="1185" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">Llama · Mistral · CodeLlama</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SUPPORTING CRATES (bottom strip) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(0, 882)">
|
||||
<rect x="60" y="0" width="1280" height="50" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="700" y="16" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.7" text-anchor="middle" letter-spacing="2">SUPPORTING CRATES</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="10" opacity="0.6" text-anchor="middle">
|
||||
<text x="130" y="36" fill="#22d3ee">vapora-shared</text>
|
||||
<text x="260" y="36" fill="#a855f7">vapora-tracking</text>
|
||||
<text x="400" y="36" fill="#ec4899">vapora-telemetry</text>
|
||||
<text x="540" y="36" fill="#22d3ee">vapora-analytics</text>
|
||||
<text x="680" y="36" fill="#a855f7">vapora-worktree</text>
|
||||
<text x="820" y="36" fill="#ec4899">vapora-doc-lifecycle</text>
|
||||
<text x="975" y="36" fill="#22d3ee">vapora-workflow-engine</text>
|
||||
<text x="1140" y="36" fill="#a855f7">vapora-cli</text>
|
||||
<text x="1250" y="36" fill="#ec4899">vapora-leptos-ui</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- OBSERVABILITY STRIP (right edge) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(1340, 80)">
|
||||
<rect x="0" y="0" width="4" height="790" rx="2" fill="url(#grad-vertical)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="15" y="400" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.6" letter-spacing="2" text-anchor="middle" transform="rotate(90 15 400)">PROMETHEUS · GRAFANA · OPENTELEMETRY</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- FOOTER -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="970" font-family="'JetBrains Mono', monospace" font-size="11" font-weight="700" fill="url(#grad-main)" text-anchor="middle" opacity="0.7" letter-spacing="3">VAPORA v1.2.0</text>
|
||||
<text x="700" y="993" font-family="'Inter', sans-serif" font-size="9" fill="#a855f7" opacity="0.6" text-anchor="middle" letter-spacing="1">Evaporate complexity · Full-Stack Rust · Production Ready</text>
|
||||
|
||||
<!-- Bottom gradient bar -->
|
||||
<rect x="400" y="1005" width="600" height="2" rx="1" fill="url(#grad-main)" opacity="0.3"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 42 KiB |
576
assets/web/src/vapora_architecture_white.svg
Normal file
576
assets/web/src/vapora_architecture_white.svg
Normal file
@ -0,0 +1,576 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1020" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;500;600&display=swap');
|
||||
</style>
|
||||
|
||||
<!-- Brand gradients -->
|
||||
<linearGradient id="grad-main" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="50%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-cyan-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="100%" stop-color="#a855f7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-purple-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.8"/>
|
||||
<stop offset="50%" stop-color="#a855f7" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-cyan" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#22d3ee" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#a855f7" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ec4899" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-sm">
|
||||
<feGaussianBlur stdDeviation="0.5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-md">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-lg">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glass-card">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
|
||||
<feOffset dx="0" dy="1" result="shadow"/>
|
||||
<feFlood flood-color="#000" flood-opacity="0.3" result="color"/>
|
||||
<feComposite in="color" in2="shadow" operator="in" result="shadow"/>
|
||||
<feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Animated particle marker -->
|
||||
<circle id="particle-cyan" r="3" fill="#22d3ee" filter="url(#glow-md)"/>
|
||||
<circle id="particle-purple" r="3" fill="#a855f7" filter="url(#glow-md)"/>
|
||||
<circle id="particle-pink" r="3" fill="#ec4899" filter="url(#glow-md)"/>
|
||||
<circle id="particle-sm-cyan" r="2" fill="#22d3ee" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-purple" r="2" fill="#a855f7" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-pink" r="2" fill="#ec4899" filter="url(#glow-sm)"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- BACKGROUND -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<rect width="1400" height="1020" fill="#ffffff"/>
|
||||
|
||||
<!-- Subtle tech grid -->
|
||||
<g opacity="0.08" stroke="#22d3ee" stroke-width="0.5">
|
||||
<line x1="0" y1="0" x2="1400" y2="0"><animate attributeName="y1" values="0;1020" dur="60s" repeatCount="indefinite"/><animate attributeName="y2" values="0;1020" dur="60s" repeatCount="indefinite"/></line>
|
||||
<line x1="100" y1="0" x2="100" y2="1020"/>
|
||||
<line x1="250" y1="0" x2="250" y2="1020"/>
|
||||
<line x1="400" y1="0" x2="400" y2="1020"/>
|
||||
<line x1="550" y1="0" x2="550" y2="1020"/>
|
||||
<line x1="700" y1="0" x2="700" y2="1020"/>
|
||||
<line x1="850" y1="0" x2="850" y2="1020"/>
|
||||
<line x1="1000" y1="0" x2="1000" y2="1020"/>
|
||||
<line x1="1150" y1="0" x2="1150" y2="1020"/>
|
||||
<line x1="1300" y1="0" x2="1300" y2="1020"/>
|
||||
<line x1="0" y1="130" x2="1400" y2="130"/>
|
||||
<line x1="0" y1="260" x2="1400" y2="260"/>
|
||||
<line x1="0" y1="420" x2="1400" y2="420"/>
|
||||
<line x1="0" y1="580" x2="1400" y2="580"/>
|
||||
<line x1="0" y1="720" x2="1400" y2="720"/>
|
||||
<line x1="0" y1="860" x2="1400" y2="860"/>
|
||||
</g>
|
||||
|
||||
<!-- Ambient glow orbs -->
|
||||
<circle cx="240" cy="350" r="180" fill="#22d3ee" opacity="0.05">
|
||||
<animate attributeName="r" values="160;200;160" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="690" cy="360" r="175" fill="#a855f7" opacity="0.04">
|
||||
<animate attributeName="r" values="175;195;175" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1130" cy="350" r="200" fill="#ec4899" opacity="0.05">
|
||||
<animate attributeName="r" values="180;220;180" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- TITLE -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="42" font-family="'JetBrains Mono', monospace" font-size="22" font-weight="800" fill="url(#grad-main)" letter-spacing="6" text-anchor="middle" filter="url(#glow-sm)">VAPORA ARCHITECTURE</text>
|
||||
<text x="700" y="62" font-family="'Inter', sans-serif" font-size="11" fill="#a855f7" opacity="0.6" letter-spacing="3" text-anchor="middle">18 CRATES · 354 TESTS · 100% RUST</text>
|
||||
|
||||
<!-- Layer labels (left side) -->
|
||||
<text x="30" y="115" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 115)">PRESENTATION</text>
|
||||
<text x="30" y="290" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 290)">SERVICES</text>
|
||||
<text x="30" y="485" font-family="'JetBrains Mono', monospace" font-size="10" fill="#ec4899" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 485)">INTELLIGENCE</text>
|
||||
<text x="30" y="640" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 640)">DATA</text>
|
||||
<text x="30" y="850" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 850)">PROVIDERS</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 1: FRONTEND (y=80) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend card -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1"/>
|
||||
<rect x="494" y="80" width="412" height="1.5" rx="1" fill="url(#grad-main)" opacity="0.8"/>
|
||||
<text x="700" y="106" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#22d3ee" text-anchor="middle" filter="url(#glow-sm)">Leptos WASM Frontend</text>
|
||||
<text x="700" y="124" font-family="'Inter', sans-serif" font-size="10" fill="#1f2937" opacity="0.85" text-anchor="middle">Kanban Board · Glassmorphism UI · UnoCSS · Reactive Components</text>
|
||||
<!-- Pulse ring -->
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="none" stroke="#22d3ee" stroke-opacity="0.15">
|
||||
<animate attributeName="stroke-opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTION: Frontend → Services -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend to Backend -->
|
||||
<path id="path-fe-be" d="M 580 145 L 580 160 Q 580 175 480 175 L 280 175 Q 260 175 260 195 L 260 210" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-be"/></animateMotion></use>
|
||||
|
||||
<!-- Frontend to Agents -->
|
||||
<line x1="700" y1="145" x2="700" y2="210" stroke="#a855f7" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-purple" opacity="0.8"><animateMotion dur="2s" repeatCount="indefinite" path="M 700 145 L 700 210"/></use>
|
||||
|
||||
<!-- Frontend to MCP -->
|
||||
<path id="path-fe-mcp" d="M 820 145 L 820 160 Q 820 175 920 175 L 1100 175 Q 1140 175 1140 195 L 1140 210" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-mcp"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 2: SERVICES (y=210) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend / Axum API -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="210" width="310" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="104" y="210" width="302" height="1.5" rx="1" fill="#22d3ee" opacity="0.6"/>
|
||||
<text x="255" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#22d3ee" text-anchor="middle">Axum Backend API</text>
|
||||
<text x="255" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">40+ REST Endpoints · 161 Tests</text>
|
||||
<!-- Sub-items -->
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="120" y="278">Projects</text>
|
||||
<text x="180" y="278">Tasks</text>
|
||||
<text x="225" y="278">Agents</text>
|
||||
<text x="280" y="278">Workflows</text>
|
||||
<text x="350" y="278">Proposals</text>
|
||||
<text x="120" y="294">Swarm</text>
|
||||
<text x="175" y="294">Metrics</text>
|
||||
<text x="235" y="294">RLM API</text>
|
||||
<text x="300" y="294">WebSocket</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Agent Runtime -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="540" y="210" width="310" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="544" y="210" width="302" height="1.5" rx="1" fill="#a855f7" opacity="0.6"/>
|
||||
<text x="695" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#a855f7" text-anchor="middle">Agent Runtime</text>
|
||||
<text x="695" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Orchestration · Learning Profiles · 71 Tests</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="560" y="278">Registry</text>
|
||||
<text x="625" y="278">Coordinator</text>
|
||||
<text x="720" y="278">Scoring</text>
|
||||
<text x="785" y="278">Profiles</text>
|
||||
<text x="560" y="294">12 Roles</text>
|
||||
<text x="630" y="294">Health Checks</text>
|
||||
<text x="735" y="294">Recency Bias</text>
|
||||
</g>
|
||||
<!-- Heartbeat animation -->
|
||||
<circle cx="835" cy="225" r="4" fill="#a855f7" opacity="0.04">
|
||||
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- MCP Gateway -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="210" width="310" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="984" y="210" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#ec4899" text-anchor="middle">MCP Gateway</text>
|
||||
<text x="1135" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Model Context Protocol · Plugin System</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="1000" y="278">Stdio Transport</text>
|
||||
<text x="1105" y="278">SSE Transport</text>
|
||||
<text x="1210" y="278">JSON-RPC</text>
|
||||
<text x="1000" y="294">6 Tools</text>
|
||||
<text x="1060" y="294">Tool Registry</text>
|
||||
<text x="1160" y="294">Schema Validation</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- A2A Protocol (small card overlapping) -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="445" y="280" width="86" height="35" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="488" y="300" font-family="'JetBrains Mono', monospace" font-size="9" font-weight="700" fill="#a855f7" opacity="0.6" text-anchor="middle">A2A Protocol</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Services → Intelligence -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend → RLM -->
|
||||
<path id="path-be-rlm" d="M 200 310 L 200 380" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 200 310 L 200 380"/></use>
|
||||
|
||||
<!-- Backend → SurrealDB (arco por la derecha para evitar KG) -->
|
||||
<path id="path-be-sdb" d="M 320 310 L 320 340 Q 320 360 360 360 L 420 360 Q 435 360 435 380 Q 435 580 420 580 L 420 585" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.35" stroke-dasharray="4 4"/>
|
||||
|
||||
<!-- Agents → LLM Router -->
|
||||
<line x1="695" y1="310" x2="695" y2="380" stroke="#a855f7" stroke-width="2.4" stroke-opacity="0.3"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="1.5s" begin="0.75s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
|
||||
<!-- Agents → Swarm -->
|
||||
<path id="path-ag-sw" d="M 800 310 L 800 340 Q 800 355 900 355 L 1050 355 Q 1070 355 1070 375 L 1070 380" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-ag-sw"/></animateMotion></use>
|
||||
|
||||
<!-- MCP → Agents -->
|
||||
<path id="path-mcp-ag" d="M 1020 310 L 1020 320 Q 1020 332 920 332 L 810 332 Q 800 332 800 320 L 800 310" fill="none" stroke="#ec4899" stroke-width="1.6" stroke-opacity="0.35" stroke-dasharray="3 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 3: INTELLIGENCE (y=380) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM Engine -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="380" width="340" height="130" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="64" y="380" width="332" height="2" rx="1" fill="url(#grad-main)" opacity="0.7"/>
|
||||
<text x="230" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">RLM Engine</text>
|
||||
<text x="230" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Recursive Language Models · 38 Tests · 17k+ LOC</text>
|
||||
|
||||
<!-- RLM sub-components as mini pills -->
|
||||
<g transform="translate(75, 435)">
|
||||
<!-- Chunking -->
|
||||
<rect x="0" y="0" width="80" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="40" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Chunking</text>
|
||||
<!-- Hybrid Search -->
|
||||
<rect x="90" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="137" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Hybrid Search</text>
|
||||
<!-- Dispatcher -->
|
||||
<rect x="195" y="0" width="80" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="235" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Dispatcher</text>
|
||||
</g>
|
||||
<g transform="translate(75, 465)">
|
||||
<!-- BM25 -->
|
||||
<rect x="0" y="0" width="65" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">BM25</text>
|
||||
<!-- Semantic -->
|
||||
<rect x="75" y="0" width="70" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="110" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Semantic</text>
|
||||
<!-- RRF -->
|
||||
<rect x="155" y="0" width="50" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">RRF</text>
|
||||
<!-- Sandbox -->
|
||||
<rect x="215" y="0" width="60" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Sandbox</text>
|
||||
</g>
|
||||
|
||||
<!-- Animated search indicator -->
|
||||
<g transform="translate(370, 400)">
|
||||
<circle r="6" fill="none" stroke="#22d3ee" stroke-width="0.8" opacity="0.07">
|
||||
<animate attributeName="r" values="4;8;4" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- LLM Router -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="500" y="380" width="380" height="130" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="504" y="380" width="372" height="2" rx="1" fill="#a855f7" opacity="0.7"/>
|
||||
<text x="690" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#a855f7" text-anchor="middle" filter="url(#glow-sm)">Multi-IA LLM Router</text>
|
||||
<text x="690" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Budget Enforcement · Cost Tracking · 53 Tests</text>
|
||||
|
||||
<!-- Router sub-components -->
|
||||
<g transform="translate(515, 435)">
|
||||
<rect x="0" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="47" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Rule Router</text>
|
||||
<rect x="105" y="0" width="115" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="162" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Budget Manager</text>
|
||||
<rect x="230" y="0" width="110" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="285" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Cost Tracker</text>
|
||||
</g>
|
||||
<g transform="translate(515, 465)">
|
||||
<rect x="0" y="0" width="95" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="47" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Fallback Chain</text>
|
||||
<rect x="105" y="0" width="90" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="150" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Cost Ranker</text>
|
||||
<rect x="205" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Providers</text>
|
||||
</g>
|
||||
|
||||
<!-- Routing indicator animation -->
|
||||
<g transform="translate(855, 400)">
|
||||
<line x1="-6" y1="0" x2="6" y2="0" stroke="#a855f7" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#ec4899" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Swarm Coordinator -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="380" width="310" height="130" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="984" y="380" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">Swarm Coordinator</text>
|
||||
<text x="1135" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Load Balancing · Prometheus · 6 Tests</text>
|
||||
|
||||
<g transform="translate(995, 435)">
|
||||
<rect x="0" y="0" width="90" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="45" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Assignment</text>
|
||||
<rect x="100" y="0" width="90" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="145" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Filtering</text>
|
||||
<rect x="200" y="0" width="80" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="240" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Metrics</text>
|
||||
</g>
|
||||
<g transform="translate(995, 465)">
|
||||
<rect x="0" y="0" width="130" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="65" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">success_rate / (1+load)</text>
|
||||
<rect x="140" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Capabilities</text>
|
||||
</g>
|
||||
|
||||
<!-- Swarm pulse -->
|
||||
<circle cx="1270" cy="395" r="3" fill="#ec4899" opacity="0.04">
|
||||
<animate attributeName="r" values="2;5;2" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- RLM → LLM Router connection -->
|
||||
<path id="path-rlm-llm" d="M 400 445 L 500 445" fill="none" stroke="url(#grad-cyan-purple)" stroke-width="3" stroke-opacity="0.3"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 400 445 L 500 445"/></use>
|
||||
|
||||
<!-- LLM Router → Swarm connection -->
|
||||
<path d="M 880 445 L 980 445" fill="none" stroke="url(#grad-purple-pink)" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 880 445 L 980 445"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Intelligence → Data -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM → KG -->
|
||||
<path id="path-rlm-kg" d="M 160 510 L 160 575" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 160 510 L 160 575"/></use>
|
||||
|
||||
<!-- RLM → SurrealDB -->
|
||||
<path id="path-rlm-sdb" d="M 300 510 L 300 540 Q 300 555 400 555 L 530 555 Q 545 555 545 575" fill="none" stroke="#22d3ee" stroke-width="2.4" stroke-opacity="0.25"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-rlm-sdb"/></animateMotion></use>
|
||||
|
||||
<!-- LLM Router → Providers (goes down below data) -->
|
||||
<path id="path-llm-providers" d="M 790 510 L 790 725" fill="none" stroke="#a855f7" stroke-width="3" stroke-opacity="0.2"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="3s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="3s" begin="1.5s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
|
||||
<!-- Swarm → NATS -->
|
||||
<path id="path-sw-nats" d="M 1135 510 L 1135 575" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 1135 510 L 1135 575"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 4: DATA LAYER (y=575) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Knowledge Graph -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="575" width="260" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="1"/>
|
||||
<rect x="60" y="575" width="260" height="1.5" rx="1" fill="#22d3ee" opacity="0.5"/>
|
||||
<text x="190" y="600" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Knowledge Graph</text>
|
||||
<text x="190" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.7" text-anchor="middle">Temporal History · Learning Curves · 20 Tests</text>
|
||||
<g transform="translate(75, 630)">
|
||||
<rect x="0" y="0" width="80" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="40" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Executions</text>
|
||||
<rect x="90" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="125" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Similarity</text>
|
||||
<rect x="170" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="200" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Causal</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="575" width="340" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="420" y="575" width="340" height="2" rx="1" fill="url(#grad-main)" opacity="0.6"/>
|
||||
<text x="590" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">SurrealDB</text>
|
||||
<text x="590" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Multi-Model Database · Multi-Tenant Scopes</text>
|
||||
|
||||
<g transform="translate(435, 630)">
|
||||
<rect x="0" y="0" width="65" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Projects</text>
|
||||
<rect x="75" y="0" width="50" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="100" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Tasks</text>
|
||||
<rect x="135" y="0" width="55" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="162" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agents</text>
|
||||
<rect x="200" y="0" width="55" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="227" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Chunks</text>
|
||||
<rect x="265" y="0" width="45" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="287" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- DB activity indicator -->
|
||||
<g transform="translate(735, 590)">
|
||||
<rect x="0" y="0" width="2" height="10" fill="#22d3ee" opacity="0.4">
|
||||
<animate attributeName="height" values="6;12;6" dur="1.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="5" y="0" width="2" height="8" fill="#a855f7" opacity="0.4">
|
||||
<animate attributeName="height" values="8;14;8" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="10" y="0" width="2" height="12" fill="#ec4899" opacity="0.4">
|
||||
<animate attributeName="height" values="10;16;10" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- KG → SurrealDB -->
|
||||
<line x1="320" y1="630" x2="420" y2="630" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 320 630 L 420 630"/></use>
|
||||
|
||||
<!-- NATS JetStream -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="860" y="575" width="340" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="860" y="575" width="340" height="1.5" rx="1" fill="#ec4899" opacity="0.5"/>
|
||||
<text x="1030" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">NATS JetStream</text>
|
||||
<text x="1030" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Message Queue · Async Coordination · Pub/Sub</text>
|
||||
|
||||
<g transform="translate(875, 630)">
|
||||
<rect x="0" y="0" width="75" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="37" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agent Jobs</text>
|
||||
<rect x="85" y="0" width="75" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="122" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Workflows</text>
|
||||
<rect x="170" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="205" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Proposals</text>
|
||||
<rect x="250" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="280" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- Message pulse animation -->
|
||||
<g transform="translate(1125, 590)">
|
||||
<circle r="4" fill="none" stroke="#22d3ee" stroke-width="1.5" opacity="0.07">
|
||||
<animate attributeName="r" values="3;8;3" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.4;1" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB ↔ NATS bridge line -->
|
||||
<line x1="760" y1="625" x2="860" y2="625" stroke="url(#grad-purple-pink)" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="4 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Data → Providers -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Central provider trunk (from LLM Router, already drawn) -->
|
||||
<!-- Branch to each provider -->
|
||||
<path id="path-to-claude" d="M 790 725 Q 790 750 500 750 L 245 750 Q 225 750 225 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-to-claude"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-openai" d="M 790 725 Q 790 760 600 760 L 555 760 Q 545 760 545 785" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2s" repeatCount="indefinite"><mpath href="#path-to-openai"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-gemini" d="M 790 725 Q 790 770 810 770 L 855 770 Q 865 770 865 785" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-to-gemini"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-ollama" d="M 790 725 Q 790 750 900 750 L 1155 750 Q 1175 750 1175 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.8s" repeatCount="indefinite"><mpath href="#path-to-ollama"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 5: LLM PROVIDERS (y=810) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Claude -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="225" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Anthropic Claude</text>
|
||||
<text x="225" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">Opus · Sonnet · Haiku</text>
|
||||
</g>
|
||||
|
||||
<!-- OpenAI -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="785" width="250" height="55" rx="6" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="545" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#a855f7" text-anchor="middle">OpenAI</text>
|
||||
<text x="545" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">GPT-4 · GPT-4o · GPT-3.5</text>
|
||||
</g>
|
||||
|
||||
<!-- Gemini -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="740" y="785" width="250" height="55" rx="6" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="865" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#ec4899" text-anchor="middle">Google Gemini</text>
|
||||
<text x="865" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">2.0 Pro · Flash · 1.5 Pro</text>
|
||||
</g>
|
||||
|
||||
<!-- Ollama -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="1060" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="1185" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Ollama (Local)</text>
|
||||
<text x="1185" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">Llama · Mistral · CodeLlama</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SUPPORTING CRATES (bottom strip) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(0, 882)">
|
||||
<rect x="60" y="0" width="1280" height="50" rx="6" fill="rgba(168,85,247,0.04)" stroke="#a855f7" stroke-opacity="0.1" stroke-width="0.5"/>
|
||||
<text x="700" y="16" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.7" text-anchor="middle" letter-spacing="2">SUPPORTING CRATES</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="10" opacity="0.6" text-anchor="middle">
|
||||
<text x="130" y="36" fill="#22d3ee">vapora-shared</text>
|
||||
<text x="260" y="36" fill="#a855f7">vapora-tracking</text>
|
||||
<text x="400" y="36" fill="#ec4899">vapora-telemetry</text>
|
||||
<text x="540" y="36" fill="#22d3ee">vapora-analytics</text>
|
||||
<text x="680" y="36" fill="#a855f7">vapora-worktree</text>
|
||||
<text x="820" y="36" fill="#ec4899">vapora-doc-lifecycle</text>
|
||||
<text x="975" y="36" fill="#22d3ee">vapora-workflow-engine</text>
|
||||
<text x="1140" y="36" fill="#a855f7">vapora-cli</text>
|
||||
<text x="1250" y="36" fill="#ec4899">vapora-leptos-ui</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- OBSERVABILITY STRIP (right edge) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(1340, 80)">
|
||||
<rect x="0" y="0" width="4" height="790" rx="2" fill="url(#grad-vertical)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="15" y="400" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.6" letter-spacing="2" text-anchor="middle" transform="rotate(90 15 400)">PROMETHEUS · GRAFANA · OPENTELEMETRY</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- FOOTER -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="970" font-family="'JetBrains Mono', monospace" font-size="11" font-weight="700" fill="url(#grad-main)" text-anchor="middle" opacity="0.7" letter-spacing="3">VAPORA v1.2.0</text>
|
||||
<text x="700" y="993" font-family="'Inter', sans-serif" font-size="9" fill="#a855f7" opacity="0.6" text-anchor="middle" letter-spacing="1">Evaporate complexity · Full-Stack Rust · Production Ready</text>
|
||||
|
||||
<!-- Bottom gradient bar -->
|
||||
<rect x="400" y="1005" width="600" height="2" rx="1" fill="url(#grad-main)" opacity="0.3"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 42 KiB |
119
assets/web/src/vapora_white.svg
Normal file
119
assets/web/src/vapora_white.svg
Normal file
@ -0,0 +1,119 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="170 40 590 300" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<!-- Google Fonts import -->
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap');
|
||||
</style>
|
||||
<linearGradient id="techGradWhite" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#22d3ee;stop-opacity:1"/>
|
||||
<stop offset="50%" style="stop-color:#a855f7;stop-opacity:1"/>
|
||||
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="vertGradWhite" x1="0%" y1="100%" x2="0%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#22d3ee;stop-opacity:1"/>
|
||||
<stop offset="50%" style="stop-color:#a855f7;stop-opacity:0.8"/>
|
||||
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:0.4"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="techGlowWhite">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="strongGlowWhite">
|
||||
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="glassWhite">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="blur"/>
|
||||
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"/>
|
||||
<feBlend in="SourceGraphic" in2="goo"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Fondo blanco -->
|
||||
<rect width="800" height="400" fill="#ffffff"/>
|
||||
|
||||
<!-- Grid de fondo técnico sutil -->
|
||||
<g opacity="0.08" stroke="#22d3ee" stroke-width="1">
|
||||
<line x1="0" y1="133" x2="800" y2="133"/>
|
||||
<line x1="0" y1="200" x2="800" y2="200"/>
|
||||
<line x1="0" y1="267" x2="800" y2="267"/>
|
||||
<line x1="133" y1="0" x2="133" y2="400"/>
|
||||
<line x1="267" y1="0" x2="267" y2="400"/>
|
||||
<line x1="400" y1="0" x2="400" y2="400"/>
|
||||
<line x1="533" y1="0" x2="533" y2="400"/>
|
||||
<line x1="667" y1="0" x2="667" y2="400"/>
|
||||
</g>
|
||||
|
||||
<!-- Símbolo técnico: flujo de datos ascendente -->
|
||||
<g transform="translate(267, 280)">
|
||||
<rect x="-25" y="0" width="50" height="6.67" fill="url(#techGradWhite)" opacity="0.8" rx="3.33"/>
|
||||
|
||||
<path d="M 0 0 L 0 -50 L 8.33 -58 L -8.33 -75 L 8.33 -92 L -8.33 -108 L 8.33 -125 L 0 -133 L 0 -200" stroke="url(#vertGradWhite)" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#techGlowWhite)"/>
|
||||
|
||||
<path d="M -33 0 L -33 -42 L -30 -58 L -37 -75 L -30 -92 L -37 -108 L -33 -125 L -33 -167" stroke="#22d3ee" stroke-width="3.33" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlowWhite)"/>
|
||||
|
||||
<path d="M -58 0 L -58 -33 L -53 -50 L -63 -67 L -53 -83 L -63 -100 L -58 -117 L -58 -142" stroke="#a855f7" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5"/>
|
||||
|
||||
<path d="M 33 0 L 33 -42 L 30 -58 L 37 -75 L 30 -92 L 37 -108 L 33 -125 L 33 -167" stroke="#ec4899" stroke-width="3.33" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlowWhite)"/>
|
||||
|
||||
<path d="M 58 0 L 58 -33 L 53 -50 L 63 -67 L 53 -83 L 63 -100 L 58 -117 L 58 -142" stroke="#22d3ee" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5"/>
|
||||
|
||||
<circle cx="0" cy="-67" r="5" fill="#22d3ee" filter="url(#strongGlowWhite)"/>
|
||||
<circle cx="0" cy="-100" r="4.17" fill="#a855f7" filter="url(#strongGlowWhite)"/>
|
||||
<circle cx="0" cy="-133" r="3.33" fill="#ec4899" filter="url(#strongGlowWhite)"/>
|
||||
|
||||
<circle cx="-33" cy="-83" r="3.33" fill="#22d3ee" opacity="0.7"/>
|
||||
<circle cx="33" cy="-92" r="3.33" fill="#ec4899" opacity="0.7"/>
|
||||
<circle cx="-58" cy="-58" r="2.5" fill="#a855f7" opacity="0.5"/>
|
||||
<circle cx="58" cy="-67" r="2.5" fill="#22d3ee" opacity="0.5"/>
|
||||
|
||||
<polygon points="0,-158 5,-162 5,-167 0,-170 -5,-167 -5,-162" stroke="#22d3ee" fill="none" stroke-width="1.67" opacity="0.6"/>
|
||||
<polygon points="-42,-117 -37,-120 -37,-125 -42,-128 -47,-125 -47,-120" stroke="#a855f7" fill="none" stroke-width="1.67" opacity="0.5"/>
|
||||
<polygon points="42,-125 47,-128 47,-133 42,-137 37,-133 37,-128" stroke="#ec4899" fill="none" stroke-width="1.67" opacity="0.5"/>
|
||||
|
||||
<line x1="-33" y1="-100" x2="-8" y2="-100" stroke="#22d3ee" stroke-width="0.83" opacity="0.4"/>
|
||||
<line x1="8" y1="-117" x2="33" y2="-117" stroke="#ec4899" stroke-width="0.83" opacity="0.4"/>
|
||||
<line x1="-58" y1="-83" x2="-37" y2="-83" stroke="#a855f7" stroke-width="0.83" opacity="0.3"/>
|
||||
<line x1="37" y1="-92" x2="58" y2="-92" stroke="#22d3ee" stroke-width="0.83" opacity="0.3"/>
|
||||
</g>
|
||||
|
||||
<!-- Texto VAPORA -->
|
||||
<g filter="url(#glassWhite)">
|
||||
<text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="url(#techGradWhite)" letter-spacing="5" text-anchor="middle">
|
||||
VAPORA
|
||||
</text>
|
||||
|
||||
<text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="0.83" letter-spacing="5" text-anchor="middle">
|
||||
VAPORA
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Glow en texto -->
|
||||
<text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="url(#techGradWhite)" letter-spacing="5" filter="url(#techGlowWhite)" opacity="0.3" text-anchor="middle">
|
||||
VAPORA
|
||||
</text>
|
||||
|
||||
<!-- Tagline -->
|
||||
<text x="550" y="240" font-family="'Inter', sans-serif" font-size="20" fill="#a855f7" opacity="0.8" letter-spacing="0.25em" text-anchor="middle">
|
||||
Evaporate complexity
|
||||
</text>
|
||||
|
||||
<!-- Indicador técnico decorativo -->
|
||||
<g transform="translate(550, 280)">
|
||||
<rect x="0" y="0" width="2" height="13.33" fill="#22d3ee" opacity="0.6"/>
|
||||
<rect x="6.67" y="0" width="2" height="16.67" fill="#a855f7" opacity="0.6"/>
|
||||
<rect x="13.33" y="0" width="2" height="10" fill="#ec4899" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
576
assets/web/vapora_architecture.svg
Normal file
576
assets/web/vapora_architecture.svg
Normal file
@ -0,0 +1,576 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1020" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;500;600&display=swap');
|
||||
</style>
|
||||
|
||||
<!-- Brand gradients -->
|
||||
<linearGradient id="grad-main" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="50%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-cyan-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="100%" stop-color="#a855f7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-purple-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.8"/>
|
||||
<stop offset="50%" stop-color="#a855f7" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-cyan" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#22d3ee" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#a855f7" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ec4899" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-sm">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-md">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-lg">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glass-card">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
|
||||
<feOffset dx="0" dy="1" result="shadow"/>
|
||||
<feFlood flood-color="#000" flood-opacity="0.3" result="color"/>
|
||||
<feComposite in="color" in2="shadow" operator="in" result="shadow"/>
|
||||
<feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Animated particle marker -->
|
||||
<circle id="particle-cyan" r="3" fill="#22d3ee" filter="url(#glow-md)"/>
|
||||
<circle id="particle-purple" r="3" fill="#a855f7" filter="url(#glow-md)"/>
|
||||
<circle id="particle-pink" r="3" fill="#ec4899" filter="url(#glow-md)"/>
|
||||
<circle id="particle-sm-cyan" r="2" fill="#22d3ee" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-purple" r="2" fill="#a855f7" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-pink" r="2" fill="#ec4899" filter="url(#glow-sm)"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- BACKGROUND -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<rect width="1400" height="1020" fill="#0a0a0a"/>
|
||||
|
||||
<!-- Subtle tech grid -->
|
||||
<g opacity="0.04" stroke="#22d3ee" stroke-width="0.5">
|
||||
<line x1="0" y1="0" x2="1400" y2="0"><animate attributeName="y1" values="0;1020" dur="60s" repeatCount="indefinite"/><animate attributeName="y2" values="0;1020" dur="60s" repeatCount="indefinite"/></line>
|
||||
<line x1="100" y1="0" x2="100" y2="1020"/>
|
||||
<line x1="250" y1="0" x2="250" y2="1020"/>
|
||||
<line x1="400" y1="0" x2="400" y2="1020"/>
|
||||
<line x1="550" y1="0" x2="550" y2="1020"/>
|
||||
<line x1="700" y1="0" x2="700" y2="1020"/>
|
||||
<line x1="850" y1="0" x2="850" y2="1020"/>
|
||||
<line x1="1000" y1="0" x2="1000" y2="1020"/>
|
||||
<line x1="1150" y1="0" x2="1150" y2="1020"/>
|
||||
<line x1="1300" y1="0" x2="1300" y2="1020"/>
|
||||
<line x1="0" y1="130" x2="1400" y2="130"/>
|
||||
<line x1="0" y1="260" x2="1400" y2="260"/>
|
||||
<line x1="0" y1="420" x2="1400" y2="420"/>
|
||||
<line x1="0" y1="580" x2="1400" y2="580"/>
|
||||
<line x1="0" y1="720" x2="1400" y2="720"/>
|
||||
<line x1="0" y1="860" x2="1400" y2="860"/>
|
||||
</g>
|
||||
|
||||
<!-- Ambient glow orbs -->
|
||||
<circle cx="240" cy="350" r="180" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="r" values="160;200;160" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="690" cy="360" r="175" fill="#a855f7" opacity="0.05">
|
||||
<animate attributeName="r" values="175;195;175" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1130" cy="350" r="200" fill="#ec4899" opacity="0.07">
|
||||
<animate attributeName="r" values="180;220;180" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- TITLE -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="42" font-family="'JetBrains Mono', monospace" font-size="22" font-weight="800" fill="url(#grad-main)" letter-spacing="6" text-anchor="middle" filter="url(#glow-sm)">VAPORA ARCHITECTURE</text>
|
||||
<text x="700" y="62" font-family="'Inter', sans-serif" font-size="11" fill="#a855f7" opacity="0.6" letter-spacing="3" text-anchor="middle">18 CRATES · 354 TESTS · 100% RUST</text>
|
||||
|
||||
<!-- Layer labels (left side) -->
|
||||
<text x="30" y="115" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 115)">PRESENTATION</text>
|
||||
<text x="30" y="290" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 290)">SERVICES</text>
|
||||
<text x="30" y="485" font-family="'JetBrains Mono', monospace" font-size="10" fill="#ec4899" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 485)">INTELLIGENCE</text>
|
||||
<text x="30" y="640" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 640)">DATA</text>
|
||||
<text x="30" y="850" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 850)">PROVIDERS</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 1: FRONTEND (y=80) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend card -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="2"/>
|
||||
<rect x="494" y="80" width="412" height="1.5" rx="1" fill="url(#grad-main)" opacity="0.8"/>
|
||||
<text x="700" y="106" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#22d3ee" text-anchor="middle" filter="url(#glow-sm)">Leptos WASM Frontend</text>
|
||||
<text x="700" y="124" font-family="'Inter', sans-serif" font-size="10" fill="#ffffff" opacity="0.5" text-anchor="middle">Kanban Board · Glassmorphism UI · UnoCSS · Reactive Components</text>
|
||||
<!-- Pulse ring -->
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="none" stroke="#22d3ee" stroke-opacity="0.15">
|
||||
<animate attributeName="stroke-opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTION: Frontend → Services -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend to Backend -->
|
||||
<path id="path-fe-be" d="M 580 145 L 580 160 Q 580 175 480 175 L 280 175 Q 260 175 260 195 L 260 210" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-be"/></animateMotion></use>
|
||||
|
||||
<!-- Frontend to Agents -->
|
||||
<line x1="700" y1="145" x2="700" y2="210" stroke="#a855f7" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-purple" opacity="0.8"><animateMotion dur="2s" repeatCount="indefinite" path="M 700 145 L 700 210"/></use>
|
||||
|
||||
<!-- Frontend to MCP -->
|
||||
<path id="path-fe-mcp" d="M 820 145 L 820 160 Q 820 175 920 175 L 1100 175 Q 1140 175 1140 195 L 1140 210" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-mcp"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 2: SERVICES (y=210) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend / Axum API -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="210" width="310" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="104" y="210" width="302" height="1.5" rx="1" fill="#22d3ee" opacity="0.6"/>
|
||||
<text x="255" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#22d3ee" text-anchor="middle">Axum Backend API</text>
|
||||
<text x="255" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">40+ REST Endpoints · 161 Tests</text>
|
||||
<!-- Sub-items -->
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="120" y="278">Projects</text>
|
||||
<text x="180" y="278">Tasks</text>
|
||||
<text x="225" y="278">Agents</text>
|
||||
<text x="280" y="278">Workflows</text>
|
||||
<text x="350" y="278">Proposals</text>
|
||||
<text x="120" y="294">Swarm</text>
|
||||
<text x="175" y="294">Metrics</text>
|
||||
<text x="235" y="294">RLM API</text>
|
||||
<text x="300" y="294">WebSocket</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Agent Runtime -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="540" y="210" width="310" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="544" y="210" width="302" height="1.5" rx="1" fill="#a855f7" opacity="0.6"/>
|
||||
<text x="695" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#a855f7" text-anchor="middle">Agent Runtime</text>
|
||||
<text x="695" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Orchestration · Learning Profiles · 71 Tests</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="560" y="278">Registry</text>
|
||||
<text x="625" y="278">Coordinator</text>
|
||||
<text x="720" y="278">Scoring</text>
|
||||
<text x="785" y="278">Profiles</text>
|
||||
<text x="560" y="294">12 Roles</text>
|
||||
<text x="630" y="294">Health Checks</text>
|
||||
<text x="735" y="294">Recency Bias</text>
|
||||
</g>
|
||||
<!-- Heartbeat animation -->
|
||||
<circle cx="835" cy="225" r="4" fill="#a855f7" opacity="0.07">
|
||||
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- MCP Gateway -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="210" width="310" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="984" y="210" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#ec4899" text-anchor="middle">MCP Gateway</text>
|
||||
<text x="1135" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Model Context Protocol · Plugin System</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.35">
|
||||
<text x="1000" y="278">Stdio Transport</text>
|
||||
<text x="1105" y="278">SSE Transport</text>
|
||||
<text x="1210" y="278">JSON-RPC</text>
|
||||
<text x="1000" y="294">6 Tools</text>
|
||||
<text x="1060" y="294">Tool Registry</text>
|
||||
<text x="1160" y="294">Schema Validation</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- A2A Protocol (small card overlapping) -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="445" y="280" width="86" height="35" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="488" y="300" font-family="'JetBrains Mono', monospace" font-size="9" font-weight="700" fill="#a855f7" opacity="0.6" text-anchor="middle">A2A Protocol</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Services → Intelligence -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend → RLM -->
|
||||
<path id="path-be-rlm" d="M 200 310 L 200 380" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 200 310 L 200 380"/></use>
|
||||
|
||||
<!-- Backend → SurrealDB (arco por la derecha para evitar KG) -->
|
||||
<path id="path-be-sdb" d="M 320 310 L 320 340 Q 320 360 360 360 L 420 360 Q 435 360 435 380 Q 435 580 420 580 L 420 585" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.35" stroke-dasharray="4 4"/>
|
||||
|
||||
<!-- Agents → LLM Router -->
|
||||
<line x1="695" y1="310" x2="695" y2="380" stroke="#a855f7" stroke-width="2.4" stroke-opacity="0.3"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="1.5s" begin="0.75s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
|
||||
<!-- Agents → Swarm -->
|
||||
<path id="path-ag-sw" d="M 800 310 L 800 340 Q 800 355 900 355 L 1050 355 Q 1070 355 1070 375 L 1070 380" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-ag-sw"/></animateMotion></use>
|
||||
|
||||
<!-- MCP → Agents -->
|
||||
<path id="path-mcp-ag" d="M 1020 310 L 1020 320 Q 1020 332 920 332 L 810 332 Q 800 332 800 320 L 800 310" fill="none" stroke="#ec4899" stroke-width="1.6" stroke-opacity="0.35" stroke-dasharray="3 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 3: INTELLIGENCE (y=380) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM Engine -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="380" width="340" height="130" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="64" y="380" width="332" height="2" rx="1" fill="url(#grad-main)" opacity="0.7"/>
|
||||
<text x="230" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">RLM Engine</text>
|
||||
<text x="230" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Recursive Language Models · 38 Tests · 17k+ LOC</text>
|
||||
|
||||
<!-- RLM sub-components as mini pills -->
|
||||
<g transform="translate(75, 435)">
|
||||
<!-- Chunking -->
|
||||
<rect x="0" y="0" width="80" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="40" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Chunking</text>
|
||||
<!-- Hybrid Search -->
|
||||
<rect x="90" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="137" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Hybrid Search</text>
|
||||
<!-- Dispatcher -->
|
||||
<rect x="195" y="0" width="80" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="235" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Dispatcher</text>
|
||||
</g>
|
||||
<g transform="translate(75, 465)">
|
||||
<!-- BM25 -->
|
||||
<rect x="0" y="0" width="65" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">BM25</text>
|
||||
<!-- Semantic -->
|
||||
<rect x="75" y="0" width="70" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="110" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Semantic</text>
|
||||
<!-- RRF -->
|
||||
<rect x="155" y="0" width="50" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">RRF</text>
|
||||
<!-- Sandbox -->
|
||||
<rect x="215" y="0" width="60" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Sandbox</text>
|
||||
</g>
|
||||
|
||||
<!-- Animated search indicator -->
|
||||
<g transform="translate(370, 400)">
|
||||
<circle r="6" fill="none" stroke="#22d3ee" stroke-width="0.8" opacity="0.07">
|
||||
<animate attributeName="r" values="4;8;4" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- LLM Router -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="500" y="380" width="380" height="130" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="504" y="380" width="372" height="2" rx="1" fill="#a855f7" opacity="0.7"/>
|
||||
<text x="690" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#a855f7" text-anchor="middle" filter="url(#glow-sm)">Multi-IA LLM Router</text>
|
||||
<text x="690" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Budget Enforcement · Cost Tracking · 53 Tests</text>
|
||||
|
||||
<!-- Router sub-components -->
|
||||
<g transform="translate(515, 435)">
|
||||
<rect x="0" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="47" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Rule Router</text>
|
||||
<rect x="105" y="0" width="115" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="162" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Budget Manager</text>
|
||||
<rect x="230" y="0" width="110" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="285" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Cost Tracker</text>
|
||||
</g>
|
||||
<g transform="translate(515, 465)">
|
||||
<rect x="0" y="0" width="95" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="47" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Fallback Chain</text>
|
||||
<rect x="105" y="0" width="90" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="150" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Cost Ranker</text>
|
||||
<rect x="205" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Providers</text>
|
||||
</g>
|
||||
|
||||
<!-- Routing indicator animation -->
|
||||
<g transform="translate(855, 400)">
|
||||
<line x1="-6" y1="0" x2="6" y2="0" stroke="#a855f7" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#ec4899" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Swarm Coordinator -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="380" width="310" height="130" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="984" y="380" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">Swarm Coordinator</text>
|
||||
<text x="1135" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Load Balancing · Prometheus · 6 Tests</text>
|
||||
|
||||
<g transform="translate(995, 435)">
|
||||
<rect x="0" y="0" width="90" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="45" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Assignment</text>
|
||||
<rect x="100" y="0" width="90" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="145" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Filtering</text>
|
||||
<rect x="200" y="0" width="80" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="240" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Metrics</text>
|
||||
</g>
|
||||
<g transform="translate(995, 465)">
|
||||
<rect x="0" y="0" width="130" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="65" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">success_rate / (1+load)</text>
|
||||
<rect x="140" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Capabilities</text>
|
||||
</g>
|
||||
|
||||
<!-- Swarm pulse -->
|
||||
<circle cx="1270" cy="395" r="3" fill="#ec4899" opacity="0.07">
|
||||
<animate attributeName="r" values="2;5;2" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- RLM → LLM Router connection -->
|
||||
<path id="path-rlm-llm" d="M 400 445 L 500 445" fill="none" stroke="url(#grad-cyan-purple)" stroke-width="3" stroke-opacity="0.3"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 400 445 L 500 445"/></use>
|
||||
|
||||
<!-- LLM Router → Swarm connection -->
|
||||
<path d="M 880 445 L 980 445" fill="none" stroke="url(#grad-purple-pink)" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 880 445 L 980 445"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Intelligence → Data -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM → KG -->
|
||||
<path id="path-rlm-kg" d="M 160 510 L 160 575" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 160 510 L 160 575"/></use>
|
||||
|
||||
<!-- RLM → SurrealDB -->
|
||||
<path id="path-rlm-sdb" d="M 300 510 L 300 540 Q 300 555 400 555 L 530 555 Q 545 555 545 575" fill="none" stroke="#22d3ee" stroke-width="2.4" stroke-opacity="0.25"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-rlm-sdb"/></animateMotion></use>
|
||||
|
||||
<!-- LLM Router → Providers (goes down below data) -->
|
||||
<path id="path-llm-providers" d="M 790 510 L 790 725" fill="none" stroke="#a855f7" stroke-width="3" stroke-opacity="0.2"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="3s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="3s" begin="1.5s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
|
||||
<!-- Swarm → NATS -->
|
||||
<path id="path-sw-nats" d="M 1135 510 L 1135 575" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 1135 510 L 1135 575"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 4: DATA LAYER (y=575) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Knowledge Graph -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="575" width="260" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="2"/>
|
||||
<rect x="60" y="575" width="260" height="1.5" rx="1" fill="#22d3ee" opacity="0.5"/>
|
||||
<text x="190" y="600" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Knowledge Graph</text>
|
||||
<text x="190" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.4" text-anchor="middle">Temporal History · Learning Curves · 20 Tests</text>
|
||||
<g transform="translate(75, 630)">
|
||||
<rect x="0" y="0" width="80" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="40" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Executions</text>
|
||||
<rect x="90" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="125" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Similarity</text>
|
||||
<rect x="170" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="200" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Causal</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="575" width="340" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="420" y="575" width="340" height="2" rx="1" fill="url(#grad-main)" opacity="0.6"/>
|
||||
<text x="590" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">SurrealDB</text>
|
||||
<text x="590" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Multi-Model Database · Multi-Tenant Scopes</text>
|
||||
|
||||
<g transform="translate(435, 630)">
|
||||
<rect x="0" y="0" width="65" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Projects</text>
|
||||
<rect x="75" y="0" width="50" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="100" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Tasks</text>
|
||||
<rect x="135" y="0" width="55" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="162" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agents</text>
|
||||
<rect x="200" y="0" width="55" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="227" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Chunks</text>
|
||||
<rect x="265" y="0" width="45" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="287" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- DB activity indicator -->
|
||||
<g transform="translate(735, 590)">
|
||||
<rect x="0" y="0" width="2" height="10" fill="#22d3ee" opacity="0.4">
|
||||
<animate attributeName="height" values="6;12;6" dur="1.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="5" y="0" width="2" height="8" fill="#a855f7" opacity="0.4">
|
||||
<animate attributeName="height" values="8;14;8" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="10" y="0" width="2" height="12" fill="#ec4899" opacity="0.4">
|
||||
<animate attributeName="height" values="10;16;10" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- KG → SurrealDB -->
|
||||
<line x1="320" y1="630" x2="420" y2="630" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 320 630 L 420 630"/></use>
|
||||
|
||||
<!-- NATS JetStream -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="860" y="575" width="340" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="2"/>
|
||||
<rect x="860" y="575" width="340" height="1.5" rx="1" fill="#ec4899" opacity="0.5"/>
|
||||
<text x="1030" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">NATS JetStream</text>
|
||||
<text x="1030" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#ffffff" opacity="0.45" text-anchor="middle">Message Queue · Async Coordination · Pub/Sub</text>
|
||||
|
||||
<g transform="translate(875, 630)">
|
||||
<rect x="0" y="0" width="75" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="37" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agent Jobs</text>
|
||||
<rect x="85" y="0" width="75" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="122" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Workflows</text>
|
||||
<rect x="170" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="205" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Proposals</text>
|
||||
<rect x="250" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="280" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- Message pulse animation -->
|
||||
<g transform="translate(1125, 590)">
|
||||
<circle r="4" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.07">
|
||||
<animate attributeName="r" values="3;8;3" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#ffffff" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB ↔ NATS bridge line -->
|
||||
<line x1="760" y1="625" x2="860" y2="625" stroke="url(#grad-purple-pink)" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="4 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Data → Providers -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Central provider trunk (from LLM Router, already drawn) -->
|
||||
<!-- Branch to each provider -->
|
||||
<path id="path-to-claude" d="M 790 725 Q 790 750 500 750 L 245 750 Q 225 750 225 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-to-claude"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-openai" d="M 790 725 Q 790 760 600 760 L 555 760 Q 545 760 545 785" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2s" repeatCount="indefinite"><mpath href="#path-to-openai"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-gemini" d="M 790 725 Q 790 770 810 770 L 855 770 Q 865 770 865 785" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-to-gemini"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-ollama" d="M 790 725 Q 790 750 900 750 L 1155 750 Q 1175 750 1175 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.8s" repeatCount="indefinite"><mpath href="#path-to-ollama"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 5: LLM PROVIDERS (y=810) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Claude -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="225" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Anthropic Claude</text>
|
||||
<text x="225" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">Opus · Sonnet · Haiku</text>
|
||||
</g>
|
||||
|
||||
<!-- OpenAI -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="785" width="250" height="55" rx="6" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="545" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#a855f7" text-anchor="middle">OpenAI</text>
|
||||
<text x="545" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">GPT-4 · GPT-4o · GPT-3.5</text>
|
||||
</g>
|
||||
|
||||
<!-- Gemini -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="740" y="785" width="250" height="55" rx="6" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="865" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#ec4899" text-anchor="middle">Google Gemini</text>
|
||||
<text x="865" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">2.0 Pro · Flash · 1.5 Pro</text>
|
||||
</g>
|
||||
|
||||
<!-- Ollama -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="1060" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="1185" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Ollama (Local)</text>
|
||||
<text x="1185" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#ffffff" opacity="0.4" text-anchor="middle">Llama · Mistral · CodeLlama</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SUPPORTING CRATES (bottom strip) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(0, 882)">
|
||||
<rect x="60" y="0" width="1280" height="50" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="700" y="16" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.7" text-anchor="middle" letter-spacing="2">SUPPORTING CRATES</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="10" opacity="0.6" text-anchor="middle">
|
||||
<text x="130" y="36" fill="#22d3ee">vapora-shared</text>
|
||||
<text x="260" y="36" fill="#a855f7">vapora-tracking</text>
|
||||
<text x="400" y="36" fill="#ec4899">vapora-telemetry</text>
|
||||
<text x="540" y="36" fill="#22d3ee">vapora-analytics</text>
|
||||
<text x="680" y="36" fill="#a855f7">vapora-worktree</text>
|
||||
<text x="820" y="36" fill="#ec4899">vapora-doc-lifecycle</text>
|
||||
<text x="975" y="36" fill="#22d3ee">vapora-workflow-engine</text>
|
||||
<text x="1140" y="36" fill="#a855f7">vapora-cli</text>
|
||||
<text x="1250" y="36" fill="#ec4899">vapora-leptos-ui</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- OBSERVABILITY STRIP (right edge) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(1340, 80)">
|
||||
<rect x="0" y="0" width="4" height="790" rx="2" fill="url(#grad-vertical)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="15" y="400" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.6" letter-spacing="2" text-anchor="middle" transform="rotate(90 15 400)">PROMETHEUS · GRAFANA · OPENTELEMETRY</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- FOOTER -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="970" font-family="'JetBrains Mono', monospace" font-size="11" font-weight="700" fill="url(#grad-main)" text-anchor="middle" opacity="0.7" letter-spacing="3">VAPORA v1.2.0</text>
|
||||
<text x="700" y="993" font-family="'Inter', sans-serif" font-size="9" fill="#a855f7" opacity="0.6" text-anchor="middle" letter-spacing="1">Evaporate complexity · Full-Stack Rust · Production Ready</text>
|
||||
|
||||
<!-- Bottom gradient bar -->
|
||||
<rect x="400" y="1005" width="600" height="2" rx="1" fill="url(#grad-main)" opacity="0.3"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 42 KiB |
576
assets/web/vapora_architecture_white.svg
Normal file
576
assets/web/vapora_architecture_white.svg
Normal file
@ -0,0 +1,576 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1020" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Inter:wght@400;500;600&display=swap');
|
||||
</style>
|
||||
|
||||
<!-- Brand gradients -->
|
||||
<linearGradient id="grad-main" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="50%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-cyan-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee"/>
|
||||
<stop offset="100%" stop-color="#a855f7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-purple-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.8"/>
|
||||
<stop offset="50%" stop-color="#a855f7" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-cyan" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#22d3ee" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-purple" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#a855f7" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#a855f7" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="grad-card-pink" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ec4899" stop-opacity="0.12"/>
|
||||
<stop offset="100%" stop-color="#ec4899" stop-opacity="0.03"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filters -->
|
||||
<filter id="glow-sm">
|
||||
<feGaussianBlur stdDeviation="0.5" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-md">
|
||||
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glow-lg">
|
||||
<feGaussianBlur stdDeviation="6" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
<filter id="glass-card">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
|
||||
<feOffset dx="0" dy="1" result="shadow"/>
|
||||
<feFlood flood-color="#000" flood-opacity="0.3" result="color"/>
|
||||
<feComposite in="color" in2="shadow" operator="in" result="shadow"/>
|
||||
<feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
|
||||
<!-- Animated particle marker -->
|
||||
<circle id="particle-cyan" r="3" fill="#22d3ee" filter="url(#glow-md)"/>
|
||||
<circle id="particle-purple" r="3" fill="#a855f7" filter="url(#glow-md)"/>
|
||||
<circle id="particle-pink" r="3" fill="#ec4899" filter="url(#glow-md)"/>
|
||||
<circle id="particle-sm-cyan" r="2" fill="#22d3ee" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-purple" r="2" fill="#a855f7" filter="url(#glow-sm)"/>
|
||||
<circle id="particle-sm-pink" r="2" fill="#ec4899" filter="url(#glow-sm)"/>
|
||||
</defs>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- BACKGROUND -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<rect width="1400" height="1020" fill="#ffffff"/>
|
||||
|
||||
<!-- Subtle tech grid -->
|
||||
<g opacity="0.08" stroke="#22d3ee" stroke-width="0.5">
|
||||
<line x1="0" y1="0" x2="1400" y2="0"><animate attributeName="y1" values="0;1020" dur="60s" repeatCount="indefinite"/><animate attributeName="y2" values="0;1020" dur="60s" repeatCount="indefinite"/></line>
|
||||
<line x1="100" y1="0" x2="100" y2="1020"/>
|
||||
<line x1="250" y1="0" x2="250" y2="1020"/>
|
||||
<line x1="400" y1="0" x2="400" y2="1020"/>
|
||||
<line x1="550" y1="0" x2="550" y2="1020"/>
|
||||
<line x1="700" y1="0" x2="700" y2="1020"/>
|
||||
<line x1="850" y1="0" x2="850" y2="1020"/>
|
||||
<line x1="1000" y1="0" x2="1000" y2="1020"/>
|
||||
<line x1="1150" y1="0" x2="1150" y2="1020"/>
|
||||
<line x1="1300" y1="0" x2="1300" y2="1020"/>
|
||||
<line x1="0" y1="130" x2="1400" y2="130"/>
|
||||
<line x1="0" y1="260" x2="1400" y2="260"/>
|
||||
<line x1="0" y1="420" x2="1400" y2="420"/>
|
||||
<line x1="0" y1="580" x2="1400" y2="580"/>
|
||||
<line x1="0" y1="720" x2="1400" y2="720"/>
|
||||
<line x1="0" y1="860" x2="1400" y2="860"/>
|
||||
</g>
|
||||
|
||||
<!-- Ambient glow orbs -->
|
||||
<circle cx="240" cy="350" r="180" fill="#22d3ee" opacity="0.05">
|
||||
<animate attributeName="r" values="160;200;160" dur="8s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="690" cy="360" r="175" fill="#a855f7" opacity="0.04">
|
||||
<animate attributeName="r" values="175;195;175" dur="10s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="1130" cy="350" r="200" fill="#ec4899" opacity="0.05">
|
||||
<animate attributeName="r" values="180;220;180" dur="9s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- TITLE -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="42" font-family="'JetBrains Mono', monospace" font-size="22" font-weight="800" fill="url(#grad-main)" letter-spacing="6" text-anchor="middle" filter="url(#glow-sm)">VAPORA ARCHITECTURE</text>
|
||||
<text x="700" y="62" font-family="'Inter', sans-serif" font-size="11" fill="#a855f7" opacity="0.6" letter-spacing="3" text-anchor="middle">18 CRATES · 354 TESTS · 100% RUST</text>
|
||||
|
||||
<!-- Layer labels (left side) -->
|
||||
<text x="30" y="115" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 115)">PRESENTATION</text>
|
||||
<text x="30" y="290" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 290)">SERVICES</text>
|
||||
<text x="30" y="485" font-family="'JetBrains Mono', monospace" font-size="10" fill="#ec4899" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 485)">INTELLIGENCE</text>
|
||||
<text x="30" y="640" font-family="'JetBrains Mono', monospace" font-size="10" fill="#22d3ee" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 640)">DATA</text>
|
||||
<text x="30" y="850" font-family="'JetBrains Mono', monospace" font-size="10" fill="#a855f7" opacity="0.7" letter-spacing="2" transform="rotate(-90 30 850)">PROVIDERS</text>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 1: FRONTEND (y=80) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend card -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1"/>
|
||||
<rect x="494" y="80" width="412" height="1.5" rx="1" fill="url(#grad-main)" opacity="0.8"/>
|
||||
<text x="700" y="106" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#22d3ee" text-anchor="middle" filter="url(#glow-sm)">Leptos WASM Frontend</text>
|
||||
<text x="700" y="124" font-family="'Inter', sans-serif" font-size="10" fill="#1f2937" opacity="0.85" text-anchor="middle">Kanban Board · Glassmorphism UI · UnoCSS · Reactive Components</text>
|
||||
<!-- Pulse ring -->
|
||||
<rect x="490" y="80" width="420" height="65" rx="8" fill="none" stroke="#22d3ee" stroke-opacity="0.15">
|
||||
<animate attributeName="stroke-opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTION: Frontend → Services -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Frontend to Backend -->
|
||||
<path id="path-fe-be" d="M 580 145 L 580 160 Q 580 175 480 175 L 280 175 Q 260 175 260 195 L 260 210" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-be"/></animateMotion></use>
|
||||
|
||||
<!-- Frontend to Agents -->
|
||||
<line x1="700" y1="145" x2="700" y2="210" stroke="#a855f7" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-purple" opacity="0.8"><animateMotion dur="2s" repeatCount="indefinite" path="M 700 145 L 700 210"/></use>
|
||||
|
||||
<!-- Frontend to MCP -->
|
||||
<path id="path-fe-mcp" d="M 820 145 L 820 160 Q 820 175 920 175 L 1100 175 Q 1140 175 1140 195 L 1140 210" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.8"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-fe-mcp"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 2: SERVICES (y=210) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend / Axum API -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="210" width="310" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="104" y="210" width="302" height="1.5" rx="1" fill="#22d3ee" opacity="0.6"/>
|
||||
<text x="255" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#22d3ee" text-anchor="middle">Axum Backend API</text>
|
||||
<text x="255" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">40+ REST Endpoints · 161 Tests</text>
|
||||
<!-- Sub-items -->
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="120" y="278">Projects</text>
|
||||
<text x="180" y="278">Tasks</text>
|
||||
<text x="225" y="278">Agents</text>
|
||||
<text x="280" y="278">Workflows</text>
|
||||
<text x="350" y="278">Proposals</text>
|
||||
<text x="120" y="294">Swarm</text>
|
||||
<text x="175" y="294">Metrics</text>
|
||||
<text x="235" y="294">RLM API</text>
|
||||
<text x="300" y="294">WebSocket</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Agent Runtime -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="540" y="210" width="310" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="544" y="210" width="302" height="1.5" rx="1" fill="#a855f7" opacity="0.6"/>
|
||||
<text x="695" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#a855f7" text-anchor="middle">Agent Runtime</text>
|
||||
<text x="695" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Orchestration · Learning Profiles · 71 Tests</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="560" y="278">Registry</text>
|
||||
<text x="625" y="278">Coordinator</text>
|
||||
<text x="720" y="278">Scoring</text>
|
||||
<text x="785" y="278">Profiles</text>
|
||||
<text x="560" y="294">12 Roles</text>
|
||||
<text x="630" y="294">Health Checks</text>
|
||||
<text x="735" y="294">Recency Bias</text>
|
||||
</g>
|
||||
<!-- Heartbeat animation -->
|
||||
<circle cx="835" cy="225" r="4" fill="#a855f7" opacity="0.04">
|
||||
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.3;0.6;0.3" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- MCP Gateway -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="210" width="310" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="984" y="210" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="237" font-family="'JetBrains Mono', monospace" font-size="13" font-weight="700" fill="#ec4899" text-anchor="middle">MCP Gateway</text>
|
||||
<text x="1135" y="256" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Model Context Protocol · Plugin System</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.65">
|
||||
<text x="1000" y="278">Stdio Transport</text>
|
||||
<text x="1105" y="278">SSE Transport</text>
|
||||
<text x="1210" y="278">JSON-RPC</text>
|
||||
<text x="1000" y="294">6 Tools</text>
|
||||
<text x="1060" y="294">Tool Registry</text>
|
||||
<text x="1160" y="294">Schema Validation</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- A2A Protocol (small card overlapping) -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="445" y="280" width="86" height="35" rx="6" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="488" y="300" font-family="'JetBrains Mono', monospace" font-size="9" font-weight="700" fill="#a855f7" opacity="0.6" text-anchor="middle">A2A Protocol</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Services → Intelligence -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Backend → RLM -->
|
||||
<path id="path-be-rlm" d="M 200 310 L 200 380" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 200 310 L 200 380"/></use>
|
||||
|
||||
<!-- Backend → SurrealDB (arco por la derecha para evitar KG) -->
|
||||
<path id="path-be-sdb" d="M 320 310 L 320 340 Q 320 360 360 360 L 420 360 Q 435 360 435 380 Q 435 580 420 580 L 420 585" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.35" stroke-dasharray="4 4"/>
|
||||
|
||||
<!-- Agents → LLM Router -->
|
||||
<line x1="695" y1="310" x2="695" y2="380" stroke="#a855f7" stroke-width="2.4" stroke-opacity="0.3"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="1.5s" begin="0.75s" repeatCount="indefinite" path="M 695 310 L 695 380"/></use>
|
||||
|
||||
<!-- Agents → Swarm -->
|
||||
<path id="path-ag-sw" d="M 800 310 L 800 340 Q 800 355 900 355 L 1050 355 Q 1070 355 1070 375 L 1070 380" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-ag-sw"/></animateMotion></use>
|
||||
|
||||
<!-- MCP → Agents -->
|
||||
<path id="path-mcp-ag" d="M 1020 310 L 1020 320 Q 1020 332 920 332 L 810 332 Q 800 332 800 320 L 800 310" fill="none" stroke="#ec4899" stroke-width="1.6" stroke-opacity="0.35" stroke-dasharray="3 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 3: INTELLIGENCE (y=380) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM Engine -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="380" width="340" height="130" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="64" y="380" width="332" height="2" rx="1" fill="url(#grad-main)" opacity="0.7"/>
|
||||
<text x="230" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">RLM Engine</text>
|
||||
<text x="230" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Recursive Language Models · 38 Tests · 17k+ LOC</text>
|
||||
|
||||
<!-- RLM sub-components as mini pills -->
|
||||
<g transform="translate(75, 435)">
|
||||
<!-- Chunking -->
|
||||
<rect x="0" y="0" width="80" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="40" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Chunking</text>
|
||||
<!-- Hybrid Search -->
|
||||
<rect x="90" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="137" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Hybrid Search</text>
|
||||
<!-- Dispatcher -->
|
||||
<rect x="195" y="0" width="80" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="235" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Dispatcher</text>
|
||||
</g>
|
||||
<g transform="translate(75, 465)">
|
||||
<!-- BM25 -->
|
||||
<rect x="0" y="0" width="65" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">BM25</text>
|
||||
<!-- Semantic -->
|
||||
<rect x="75" y="0" width="70" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="110" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Semantic</text>
|
||||
<!-- RRF -->
|
||||
<rect x="155" y="0" width="50" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">RRF</text>
|
||||
<!-- Sandbox -->
|
||||
<rect x="215" y="0" width="60" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Sandbox</text>
|
||||
</g>
|
||||
|
||||
<!-- Animated search indicator -->
|
||||
<g transform="translate(370, 400)">
|
||||
<circle r="6" fill="none" stroke="#22d3ee" stroke-width="0.8" opacity="0.07">
|
||||
<animate attributeName="r" values="4;8;4" dur="3s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="3" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="3s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- LLM Router -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="500" y="380" width="380" height="130" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="504" y="380" width="372" height="2" rx="1" fill="#a855f7" opacity="0.7"/>
|
||||
<text x="690" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#a855f7" text-anchor="middle" filter="url(#glow-sm)">Multi-IA LLM Router</text>
|
||||
<text x="690" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Budget Enforcement · Cost Tracking · 53 Tests</text>
|
||||
|
||||
<!-- Router sub-components -->
|
||||
<g transform="translate(515, 435)">
|
||||
<rect x="0" y="0" width="95" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="47" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Rule Router</text>
|
||||
<rect x="105" y="0" width="115" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="162" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Budget Manager</text>
|
||||
<rect x="230" y="0" width="110" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="285" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Cost Tracker</text>
|
||||
</g>
|
||||
<g transform="translate(515, 465)">
|
||||
<rect x="0" y="0" width="95" height="20" rx="3" fill="rgba(168,85,247,0.08)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="47" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Fallback Chain</text>
|
||||
<rect x="105" y="0" width="90" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="150" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Cost Ranker</text>
|
||||
<rect x="205" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="245" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Providers</text>
|
||||
</g>
|
||||
|
||||
<!-- Routing indicator animation -->
|
||||
<g transform="translate(855, 400)">
|
||||
<line x1="-6" y1="0" x2="6" y2="0" stroke="#a855f7" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
<line x1="0" y1="-6" x2="0" y2="6" stroke="#ec4899" stroke-width="1.5" opacity="0.5">
|
||||
<animateTransform attributeName="transform" type="rotate" values="0;360" dur="4s" repeatCount="indefinite"/>
|
||||
</line>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Swarm Coordinator -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="980" y="380" width="310" height="130" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="984" y="380" width="302" height="1.5" rx="1" fill="#ec4899" opacity="0.6"/>
|
||||
<text x="1135" y="405" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">Swarm Coordinator</text>
|
||||
<text x="1135" y="422" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Load Balancing · Prometheus · 6 Tests</text>
|
||||
|
||||
<g transform="translate(995, 435)">
|
||||
<rect x="0" y="0" width="90" height="22" rx="4" fill="rgba(236,72,153,0.12)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="45" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#ec4899" opacity="0.8" text-anchor="middle" dominant-baseline="central">Assignment</text>
|
||||
<rect x="100" y="0" width="90" height="22" rx="4" fill="rgba(34,211,238,0.12)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="145" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#22d3ee" opacity="0.8" text-anchor="middle" dominant-baseline="central">Filtering</text>
|
||||
<rect x="200" y="0" width="80" height="22" rx="4" fill="rgba(168,85,247,0.12)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.5"/>
|
||||
<text x="240" y="11" font-family="'JetBrains Mono', monospace" font-size="7" fill="#a855f7" opacity="0.8" text-anchor="middle" dominant-baseline="central">Metrics</text>
|
||||
</g>
|
||||
<g transform="translate(995, 465)">
|
||||
<rect x="0" y="0" width="130" height="20" rx="3" fill="rgba(236,72,153,0.08)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="65" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">success_rate / (1+load)</text>
|
||||
<rect x="140" y="0" width="80" height="20" rx="3" fill="rgba(34,211,238,0.08)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="180" y="10" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Capabilities</text>
|
||||
</g>
|
||||
|
||||
<!-- Swarm pulse -->
|
||||
<circle cx="1270" cy="395" r="3" fill="#ec4899" opacity="0.04">
|
||||
<animate attributeName="r" values="2;5;2" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
|
||||
<!-- RLM → LLM Router connection -->
|
||||
<path id="path-rlm-llm" d="M 400 445 L 500 445" fill="none" stroke="url(#grad-cyan-purple)" stroke-width="3" stroke-opacity="0.3"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 400 445 L 500 445"/></use>
|
||||
|
||||
<!-- LLM Router → Swarm connection -->
|
||||
<path d="M 880 445 L 980 445" fill="none" stroke="url(#grad-purple-pink)" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 880 445 L 980 445"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Intelligence → Data -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- RLM → KG -->
|
||||
<path id="path-rlm-kg" d="M 160 510 L 160 575" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 160 510 L 160 575"/></use>
|
||||
|
||||
<!-- RLM → SurrealDB -->
|
||||
<path id="path-rlm-sdb" d="M 300 510 L 300 540 Q 300 555 400 555 L 530 555 Q 545 555 545 575" fill="none" stroke="#22d3ee" stroke-width="2.4" stroke-opacity="0.25"/>
|
||||
<use href="#particle-cyan" opacity="0.7"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-rlm-sdb"/></animateMotion></use>
|
||||
|
||||
<!-- LLM Router → Providers (goes down below data) -->
|
||||
<path id="path-llm-providers" d="M 790 510 L 790 725" fill="none" stroke="#a855f7" stroke-width="3" stroke-opacity="0.2"/>
|
||||
<use href="#particle-purple" opacity="0.8"><animateMotion dur="3s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
<use href="#particle-sm-purple" opacity="0.5"><animateMotion dur="3s" begin="1.5s" repeatCount="indefinite" path="M 790 510 L 790 725"/></use>
|
||||
|
||||
<!-- Swarm → NATS -->
|
||||
<path id="path-sw-nats" d="M 1135 510 L 1135 575" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.25"/>
|
||||
<use href="#particle-sm-pink" opacity="0.7"><animateMotion dur="1.8s" repeatCount="indefinite" path="M 1135 510 L 1135 575"/></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 4: DATA LAYER (y=575) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Knowledge Graph -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="60" y="575" width="260" height="100" rx="8" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="1"/>
|
||||
<rect x="60" y="575" width="260" height="1.5" rx="1" fill="#22d3ee" opacity="0.5"/>
|
||||
<text x="190" y="600" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Knowledge Graph</text>
|
||||
<text x="190" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.7" text-anchor="middle">Temporal History · Learning Curves · 20 Tests</text>
|
||||
<g transform="translate(75, 630)">
|
||||
<rect x="0" y="0" width="80" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="40" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Executions</text>
|
||||
<rect x="90" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="125" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Similarity</text>
|
||||
<rect x="170" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="200" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Causal</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="575" width="340" height="100" rx="8" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.4" stroke-width="1.2"/>
|
||||
<rect x="420" y="575" width="340" height="2" rx="1" fill="url(#grad-main)" opacity="0.6"/>
|
||||
<text x="590" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="url(#grad-main)" text-anchor="middle" filter="url(#glow-sm)">SurrealDB</text>
|
||||
<text x="590" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Multi-Model Database · Multi-Tenant Scopes</text>
|
||||
|
||||
<g transform="translate(435, 630)">
|
||||
<rect x="0" y="0" width="65" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="32" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Projects</text>
|
||||
<rect x="75" y="0" width="50" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="100" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Tasks</text>
|
||||
<rect x="135" y="0" width="55" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="162" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agents</text>
|
||||
<rect x="200" y="0" width="55" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="227" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Chunks</text>
|
||||
<rect x="265" y="0" width="45" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="287" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- DB activity indicator -->
|
||||
<g transform="translate(735, 590)">
|
||||
<rect x="0" y="0" width="2" height="10" fill="#22d3ee" opacity="0.4">
|
||||
<animate attributeName="height" values="6;12;6" dur="1.2s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="5" y="0" width="2" height="8" fill="#a855f7" opacity="0.4">
|
||||
<animate attributeName="height" values="8;14;8" dur="1.5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<rect x="10" y="0" width="2" height="12" fill="#ec4899" opacity="0.4">
|
||||
<animate attributeName="height" values="10;16;10" dur="1s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- KG → SurrealDB -->
|
||||
<line x1="320" y1="630" x2="420" y2="630" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="1.5s" repeatCount="indefinite" path="M 320 630 L 420 630"/></use>
|
||||
|
||||
<!-- NATS JetStream -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="860" y="575" width="340" height="100" rx="8" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.35" stroke-width="1"/>
|
||||
<rect x="860" y="575" width="340" height="1.5" rx="1" fill="#ec4899" opacity="0.5"/>
|
||||
<text x="1030" y="600" font-family="'JetBrains Mono', monospace" font-size="14" font-weight="700" fill="#ec4899" text-anchor="middle" filter="url(#glow-sm)">NATS JetStream</text>
|
||||
<text x="1030" y="617" font-family="'Inter', sans-serif" font-size="9" fill="#1f2937" opacity="0.75" text-anchor="middle">Message Queue · Async Coordination · Pub/Sub</text>
|
||||
|
||||
<g transform="translate(875, 630)">
|
||||
<rect x="0" y="0" width="75" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="37" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">Agent Jobs</text>
|
||||
<rect x="85" y="0" width="75" height="18" rx="3" fill="rgba(34,211,238,0.1)" stroke="#22d3ee" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="122" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#22d3ee" opacity="0.6" text-anchor="middle" dominant-baseline="central">Workflows</text>
|
||||
<rect x="170" y="0" width="70" height="18" rx="3" fill="rgba(168,85,247,0.1)" stroke="#a855f7" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="205" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#a855f7" opacity="0.6" text-anchor="middle" dominant-baseline="central">Proposals</text>
|
||||
<rect x="250" y="0" width="60" height="18" rx="3" fill="rgba(236,72,153,0.1)" stroke="#ec4899" stroke-opacity="0.2" stroke-width="0.5"/>
|
||||
<text x="280" y="9" font-family="'Inter', sans-serif" font-size="7" fill="#ec4899" opacity="0.6" text-anchor="middle" dominant-baseline="central">A2A</text>
|
||||
</g>
|
||||
|
||||
<!-- Message pulse animation -->
|
||||
<g transform="translate(1125, 590)">
|
||||
<circle r="4" fill="none" stroke="#22d3ee" stroke-width="1.5" opacity="0.07">
|
||||
<animate attributeName="r" values="3;8;3" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.4;1" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle r="2" fill="#22d3ee" opacity="0.07">
|
||||
<animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- SurrealDB ↔ NATS bridge line -->
|
||||
<line x1="760" y1="625" x2="860" y2="625" stroke="url(#grad-purple-pink)" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="4 3"/>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- CONNECTIONS: Data → Providers -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Central provider trunk (from LLM Router, already drawn) -->
|
||||
<!-- Branch to each provider -->
|
||||
<path id="path-to-claude" d="M 790 725 Q 790 750 500 750 L 245 750 Q 225 750 225 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.5s" repeatCount="indefinite"><mpath href="#path-to-claude"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-openai" d="M 790 725 Q 790 760 600 760 L 555 760 Q 545 760 545 785" fill="none" stroke="#a855f7" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-purple" opacity="0.6"><animateMotion dur="2s" repeatCount="indefinite"><mpath href="#path-to-openai"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-gemini" d="M 790 725 Q 790 770 810 770 L 855 770 Q 865 770 865 785" fill="none" stroke="#ec4899" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-pink" opacity="0.6"><animateMotion dur="2.2s" repeatCount="indefinite"><mpath href="#path-to-gemini"/></animateMotion></use>
|
||||
|
||||
<path id="path-to-ollama" d="M 790 725 Q 790 750 900 750 L 1155 750 Q 1175 750 1175 785" fill="none" stroke="#22d3ee" stroke-width="2" stroke-opacity="0.2"/>
|
||||
<use href="#particle-sm-cyan" opacity="0.6"><animateMotion dur="2.8s" repeatCount="indefinite"><mpath href="#path-to-ollama"/></animateMotion></use>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- ROW 5: LLM PROVIDERS (y=810) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
|
||||
<!-- Claude -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="100" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="225" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Anthropic Claude</text>
|
||||
<text x="225" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">Opus · Sonnet · Haiku</text>
|
||||
</g>
|
||||
|
||||
<!-- OpenAI -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="420" y="785" width="250" height="55" rx="6" fill="url(#grad-card-purple)" stroke="#a855f7" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="545" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#a855f7" text-anchor="middle">OpenAI</text>
|
||||
<text x="545" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">GPT-4 · GPT-4o · GPT-3.5</text>
|
||||
</g>
|
||||
|
||||
<!-- Gemini -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="740" y="785" width="250" height="55" rx="6" fill="url(#grad-card-pink)" stroke="#ec4899" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="865" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#ec4899" text-anchor="middle">Google Gemini</text>
|
||||
<text x="865" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">2.0 Pro · Flash · 1.5 Pro</text>
|
||||
</g>
|
||||
|
||||
<!-- Ollama -->
|
||||
<g filter="url(#glass-card)">
|
||||
<rect x="1060" y="785" width="250" height="55" rx="6" fill="url(#grad-card-cyan)" stroke="#22d3ee" stroke-opacity="0.3" stroke-width="0.8"/>
|
||||
<text x="1185" y="810" font-family="'JetBrains Mono', monospace" font-size="12" font-weight="700" fill="#22d3ee" text-anchor="middle">Ollama (Local)</text>
|
||||
<text x="1185" y="827" font-family="'Inter', sans-serif" font-size="8" fill="#1f2937" opacity="0.7" text-anchor="middle">Llama · Mistral · CodeLlama</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- SUPPORTING CRATES (bottom strip) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(0, 882)">
|
||||
<rect x="60" y="0" width="1280" height="50" rx="6" fill="rgba(168,85,247,0.04)" stroke="#a855f7" stroke-opacity="0.1" stroke-width="0.5"/>
|
||||
<text x="700" y="16" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.7" text-anchor="middle" letter-spacing="2">SUPPORTING CRATES</text>
|
||||
<g font-family="'Inter', sans-serif" font-size="10" opacity="0.6" text-anchor="middle">
|
||||
<text x="130" y="36" fill="#22d3ee">vapora-shared</text>
|
||||
<text x="260" y="36" fill="#a855f7">vapora-tracking</text>
|
||||
<text x="400" y="36" fill="#ec4899">vapora-telemetry</text>
|
||||
<text x="540" y="36" fill="#22d3ee">vapora-analytics</text>
|
||||
<text x="680" y="36" fill="#a855f7">vapora-worktree</text>
|
||||
<text x="820" y="36" fill="#ec4899">vapora-doc-lifecycle</text>
|
||||
<text x="975" y="36" fill="#22d3ee">vapora-workflow-engine</text>
|
||||
<text x="1140" y="36" fill="#a855f7">vapora-cli</text>
|
||||
<text x="1250" y="36" fill="#ec4899">vapora-leptos-ui</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- OBSERVABILITY STRIP (right edge) -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<g transform="translate(1340, 80)">
|
||||
<rect x="0" y="0" width="4" height="790" rx="2" fill="url(#grad-vertical)" opacity="0.3">
|
||||
<animate attributeName="opacity" values="0.2;0.4;0.2" dur="5s" repeatCount="indefinite"/>
|
||||
</rect>
|
||||
<text x="15" y="400" font-family="'JetBrains Mono', monospace" font-size="9" fill="#a855f7" opacity="0.6" letter-spacing="2" text-anchor="middle" transform="rotate(90 15 400)">PROMETHEUS · GRAFANA · OPENTELEMETRY</text>
|
||||
</g>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<!-- FOOTER -->
|
||||
<!-- ═══════════════════════════════════════ -->
|
||||
<text x="700" y="970" font-family="'JetBrains Mono', monospace" font-size="11" font-weight="700" fill="url(#grad-main)" text-anchor="middle" opacity="0.7" letter-spacing="3">VAPORA v1.2.0</text>
|
||||
<text x="700" y="993" font-family="'Inter', sans-serif" font-size="9" fill="#a855f7" opacity="0.6" text-anchor="middle" letter-spacing="1">Evaporate complexity · Full-Stack Rust · Production Ready</text>
|
||||
|
||||
<!-- Bottom gradient bar -->
|
||||
<rect x="400" y="1005" width="600" height="2" rx="1" fill="url(#grad-main)" opacity="0.3"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 42 KiB |
119
assets/web/vapora_white.svg
Normal file
119
assets/web/vapora_white.svg
Normal file
@ -0,0 +1,119 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="170 40 590 300" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<!-- Google Fonts import -->
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap');
|
||||
</style>
|
||||
<linearGradient id="techGradWhite" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#22d3ee;stop-opacity:1"/>
|
||||
<stop offset="50%" style="stop-color:#a855f7;stop-opacity:1"/>
|
||||
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="vertGradWhite" x1="0%" y1="100%" x2="0%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#22d3ee;stop-opacity:1"/>
|
||||
<stop offset="50%" style="stop-color:#a855f7;stop-opacity:0.8"/>
|
||||
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:0.4"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="techGlowWhite">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="strongGlowWhite">
|
||||
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="glassWhite">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="blur"/>
|
||||
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"/>
|
||||
<feBlend in="SourceGraphic" in2="goo"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Fondo blanco -->
|
||||
<rect width="800" height="400" fill="#ffffff"/>
|
||||
|
||||
<!-- Grid de fondo técnico sutil -->
|
||||
<g opacity="0.08" stroke="#22d3ee" stroke-width="1">
|
||||
<line x1="0" y1="133" x2="800" y2="133"/>
|
||||
<line x1="0" y1="200" x2="800" y2="200"/>
|
||||
<line x1="0" y1="267" x2="800" y2="267"/>
|
||||
<line x1="133" y1="0" x2="133" y2="400"/>
|
||||
<line x1="267" y1="0" x2="267" y2="400"/>
|
||||
<line x1="400" y1="0" x2="400" y2="400"/>
|
||||
<line x1="533" y1="0" x2="533" y2="400"/>
|
||||
<line x1="667" y1="0" x2="667" y2="400"/>
|
||||
</g>
|
||||
|
||||
<!-- Símbolo técnico: flujo de datos ascendente -->
|
||||
<g transform="translate(267, 280)">
|
||||
<rect x="-25" y="0" width="50" height="6.67" fill="url(#techGradWhite)" opacity="0.8" rx="3.33"/>
|
||||
|
||||
<path d="M 0 0 L 0 -50 L 8.33 -58 L -8.33 -75 L 8.33 -92 L -8.33 -108 L 8.33 -125 L 0 -133 L 0 -200" stroke="url(#vertGradWhite)" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#techGlowWhite)"/>
|
||||
|
||||
<path d="M -33 0 L -33 -42 L -30 -58 L -37 -75 L -30 -92 L -37 -108 L -33 -125 L -33 -167" stroke="#22d3ee" stroke-width="3.33" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlowWhite)"/>
|
||||
|
||||
<path d="M -58 0 L -58 -33 L -53 -50 L -63 -67 L -53 -83 L -63 -100 L -58 -117 L -58 -142" stroke="#a855f7" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5"/>
|
||||
|
||||
<path d="M 33 0 L 33 -42 L 30 -58 L 37 -75 L 30 -92 L 37 -108 L 33 -125 L 33 -167" stroke="#ec4899" stroke-width="3.33" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlowWhite)"/>
|
||||
|
||||
<path d="M 58 0 L 58 -33 L 53 -50 L 63 -67 L 53 -83 L 63 -100 L 58 -117 L 58 -142" stroke="#22d3ee" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5"/>
|
||||
|
||||
<circle cx="0" cy="-67" r="5" fill="#22d3ee" filter="url(#strongGlowWhite)"/>
|
||||
<circle cx="0" cy="-100" r="4.17" fill="#a855f7" filter="url(#strongGlowWhite)"/>
|
||||
<circle cx="0" cy="-133" r="3.33" fill="#ec4899" filter="url(#strongGlowWhite)"/>
|
||||
|
||||
<circle cx="-33" cy="-83" r="3.33" fill="#22d3ee" opacity="0.7"/>
|
||||
<circle cx="33" cy="-92" r="3.33" fill="#ec4899" opacity="0.7"/>
|
||||
<circle cx="-58" cy="-58" r="2.5" fill="#a855f7" opacity="0.5"/>
|
||||
<circle cx="58" cy="-67" r="2.5" fill="#22d3ee" opacity="0.5"/>
|
||||
|
||||
<polygon points="0,-158 5,-162 5,-167 0,-170 -5,-167 -5,-162" stroke="#22d3ee" fill="none" stroke-width="1.67" opacity="0.6"/>
|
||||
<polygon points="-42,-117 -37,-120 -37,-125 -42,-128 -47,-125 -47,-120" stroke="#a855f7" fill="none" stroke-width="1.67" opacity="0.5"/>
|
||||
<polygon points="42,-125 47,-128 47,-133 42,-137 37,-133 37,-128" stroke="#ec4899" fill="none" stroke-width="1.67" opacity="0.5"/>
|
||||
|
||||
<line x1="-33" y1="-100" x2="-8" y2="-100" stroke="#22d3ee" stroke-width="0.83" opacity="0.4"/>
|
||||
<line x1="8" y1="-117" x2="33" y2="-117" stroke="#ec4899" stroke-width="0.83" opacity="0.4"/>
|
||||
<line x1="-58" y1="-83" x2="-37" y2="-83" stroke="#a855f7" stroke-width="0.83" opacity="0.3"/>
|
||||
<line x1="37" y1="-92" x2="58" y2="-92" stroke="#22d3ee" stroke-width="0.83" opacity="0.3"/>
|
||||
</g>
|
||||
|
||||
<!-- Texto VAPORA -->
|
||||
<g filter="url(#glassWhite)">
|
||||
<text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="url(#techGradWhite)" letter-spacing="5" text-anchor="middle">
|
||||
VAPORA
|
||||
</text>
|
||||
|
||||
<text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="0.83" letter-spacing="5" text-anchor="middle">
|
||||
VAPORA
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Glow en texto -->
|
||||
<text x="550" y="207" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="90" font-weight="800" fill="url(#techGradWhite)" letter-spacing="5" filter="url(#techGlowWhite)" opacity="0.3" text-anchor="middle">
|
||||
VAPORA
|
||||
</text>
|
||||
|
||||
<!-- Tagline -->
|
||||
<text x="550" y="240" font-family="'Inter', sans-serif" font-size="20" fill="#a855f7" opacity="0.8" letter-spacing="0.25em" text-anchor="middle">
|
||||
Evaporate complexity
|
||||
</text>
|
||||
|
||||
<!-- Indicador técnico decorativo -->
|
||||
<g transform="translate(550, 280)">
|
||||
<rect x="0" y="0" width="2" height="13.33" fill="#22d3ee" opacity="0.6"/>
|
||||
<rect x="6.67" y="0" width="2" height="16.67" fill="#a855f7" opacity="0.6"/>
|
||||
<rect x="13.33" y="0" width="2" height="10" fill="#ec4899" opacity="0.6"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
@ -0,0 +1,402 @@
|
||||
# ADR-008: Recursive Language Models (RLM) Integration
|
||||
|
||||
**Date**: 2026-02-16
|
||||
**Status**: Accepted
|
||||
**Deciders**: VAPORA Team
|
||||
**Technical Story**: Phase 9 - RLM as Core Foundation
|
||||
|
||||
## Context and Problem Statement
|
||||
|
||||
VAPORA's agent system relied on **direct LLM calls** for all reasoning tasks, which created fundamental limitations:
|
||||
|
||||
1. **Context window limitations**: Single LLM calls fail beyond 50-100k tokens (context rot)
|
||||
2. **No knowledge reuse**: Historical executions were not semantically searchable
|
||||
3. **Single-shot reasoning**: No distributed analysis across document chunks
|
||||
4. **Cost inefficiency**: Processing entire documents repeatedly instead of relevant chunks
|
||||
5. **No incremental learning**: Agents couldn't learn from past successful solutions
|
||||
|
||||
**Question**: How do we enable long-context reasoning, knowledge reuse, and distributed LLM processing in VAPORA?
|
||||
|
||||
## Decision Drivers
|
||||
|
||||
**Must Have:**
|
||||
- Handle documents >100k tokens without context rot
|
||||
- Semantic search over historical executions
|
||||
- Distributed reasoning across document chunks
|
||||
- Integration with existing SurrealDB + NATS architecture
|
||||
- Support multiple LLM providers (OpenAI, Claude, Ollama)
|
||||
|
||||
**Should Have:**
|
||||
- Hybrid search (keyword + semantic)
|
||||
- Cost tracking per provider
|
||||
- Prometheus metrics
|
||||
- Sandboxed execution environment
|
||||
|
||||
**Nice to Have:**
|
||||
- WASM-based fast execution tier
|
||||
- Docker warm pool for complex tasks
|
||||
|
||||
## Considered Options
|
||||
|
||||
### Option 1: RAG (Retrieval-Augmented Generation) Only
|
||||
|
||||
**Approach**: Traditional RAG with vector embeddings + SurrealDB
|
||||
|
||||
**Pros:**
|
||||
- Simple to implement
|
||||
- Well-understood pattern
|
||||
- Good for basic Q&A
|
||||
|
||||
**Cons:**
|
||||
- ❌ No distributed reasoning (single LLM call)
|
||||
- ❌ Keyword search limitations (only semantic)
|
||||
- ❌ No execution sandbox
|
||||
- ❌ Limited to simple retrieval tasks
|
||||
|
||||
### Option 2: LangChain/LlamaIndex Integration
|
||||
|
||||
**Approach**: Use existing framework (LangChain or LlamaIndex)
|
||||
|
||||
**Pros:**
|
||||
- Pre-built components
|
||||
- Active community
|
||||
- Many integrations
|
||||
|
||||
**Cons:**
|
||||
- ❌ Python-based (VAPORA is Rust-first)
|
||||
- ❌ Heavy dependencies
|
||||
- ❌ Less control over implementation
|
||||
- ❌ Tight coupling to framework abstractions
|
||||
|
||||
### Option 3: Recursive Language Models (RLM) - **SELECTED**
|
||||
|
||||
**Approach**: Custom Rust implementation with distributed reasoning, hybrid search, and sandboxed execution
|
||||
|
||||
**Pros:**
|
||||
- ✅ Native Rust (zero-cost abstractions, safety)
|
||||
- ✅ Hybrid search (BM25 + semantic + RRF fusion)
|
||||
- ✅ Distributed LLM calls across chunks
|
||||
- ✅ Sandboxed execution (WASM + Docker)
|
||||
- ✅ Full control over implementation
|
||||
- ✅ Reuses existing VAPORA patterns (SurrealDB, NATS, Prometheus)
|
||||
|
||||
**Cons:**
|
||||
- ⚠️ More initial implementation effort
|
||||
- ⚠️ Maintaining custom codebase
|
||||
|
||||
**Decision**: **Option 3 - RLM Custom Implementation**
|
||||
|
||||
## Decision Outcome
|
||||
|
||||
### Chosen Solution: Recursive Language Models (RLM)
|
||||
|
||||
Implement a **native Rust RLM system** as a foundational VAPORA component, providing:
|
||||
|
||||
1. **Chunking**: Fixed, Semantic, Code-aware strategies
|
||||
2. **Hybrid Search**: BM25 (Tantivy) + Semantic (embeddings) + RRF fusion
|
||||
3. **Distributed Reasoning**: Parallel LLM calls across relevant chunks
|
||||
4. **Sandboxed Execution**: WASM tier (<10ms) + Docker tier (80-150ms)
|
||||
5. **Knowledge Graph**: Store execution history with learning curves
|
||||
6. **Multi-Provider**: OpenAI, Claude, Gemini, Ollama support
|
||||
|
||||
### Architecture Overview
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ RLM Engine │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ Chunking │ │ Hybrid Search│ │ Dispatcher │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ • Fixed │ │ • BM25 │ │ • Parallel │ │
|
||||
│ │ • Semantic │ │ • Semantic │ │ LLM calls │ │
|
||||
│ │ • Code │ │ • RRF Fusion │ │ • Aggregation│ │
|
||||
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ Storage │ │ Sandbox │ │ Metrics │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ • SurrealDB │ │ • WASM │ │ • Prometheus │ │
|
||||
│ │ • Chunks │ │ • Docker │ │ • Costs │ │
|
||||
│ │ • Buffers │ │ • Auto-tier │ │ • Latency │ │
|
||||
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Implementation Details
|
||||
|
||||
**Crate**: `vapora-rlm` (17,000+ LOC)
|
||||
|
||||
**Key Components:**
|
||||
|
||||
```rust
|
||||
// 1. Chunking
|
||||
pub enum ChunkingStrategy {
|
||||
Fixed, // Fixed-size chunks with overlap
|
||||
Semantic, // Unicode-aware, sentence boundaries
|
||||
Code, // AST-based (Rust, Python, JS)
|
||||
}
|
||||
|
||||
// 2. Hybrid Search
|
||||
pub struct HybridSearch {
|
||||
bm25_index: Arc<BM25Index>, // Tantivy in-memory
|
||||
storage: Arc<dyn Storage>, // SurrealDB
|
||||
config: HybridSearchConfig, // RRF weights
|
||||
}
|
||||
|
||||
// 3. LLM Dispatch
|
||||
pub struct LLMDispatcher {
|
||||
client: Option<Arc<dyn LLMClient>>, // Multi-provider
|
||||
config: DispatchConfig, // Aggregation strategy
|
||||
}
|
||||
|
||||
// 4. Sandbox
|
||||
pub enum SandboxTier {
|
||||
WASM, // <10ms, WASI-compatible commands
|
||||
Docker, // <150ms, full compatibility
|
||||
}
|
||||
```
|
||||
|
||||
**Database Schema** (SCHEMALESS for flexibility):
|
||||
|
||||
```sql
|
||||
-- Chunks (from documents)
|
||||
DEFINE TABLE rlm_chunks SCHEMALESS;
|
||||
DEFINE INDEX idx_rlm_chunks_chunk_id ON TABLE rlm_chunks COLUMNS chunk_id UNIQUE;
|
||||
DEFINE INDEX idx_rlm_chunks_doc_id ON TABLE rlm_chunks COLUMNS doc_id;
|
||||
|
||||
-- Execution History (for learning)
|
||||
DEFINE TABLE rlm_executions SCHEMALESS;
|
||||
DEFINE INDEX idx_rlm_executions_execution_id ON TABLE rlm_executions COLUMNS execution_id UNIQUE;
|
||||
DEFINE INDEX idx_rlm_executions_doc_id ON TABLE rlm_executions COLUMNS doc_id;
|
||||
```
|
||||
|
||||
**Key Decision**: Use **SCHEMALESS** instead of SCHEMAFULL tables to avoid conflicts with SurrealDB's auto-generated `id` fields.
|
||||
|
||||
### Production Usage
|
||||
|
||||
```rust
|
||||
use vapora_rlm::{RLMEngine, ChunkingConfig, EmbeddingConfig};
|
||||
use vapora_llm_router::providers::OpenAIClient;
|
||||
|
||||
// Setup LLM client
|
||||
let llm_client = Arc::new(OpenAIClient::new(
|
||||
api_key, "gpt-4".to_string(),
|
||||
4096, 0.7, 5.0, 15.0
|
||||
)?);
|
||||
|
||||
// Configure RLM
|
||||
let config = RLMEngineConfig {
|
||||
chunking: ChunkingConfig {
|
||||
strategy: ChunkingStrategy::Semantic,
|
||||
chunk_size: 1000,
|
||||
overlap: 200,
|
||||
},
|
||||
embedding: Some(EmbeddingConfig::openai_small()),
|
||||
auto_rebuild_bm25: true,
|
||||
max_chunks_per_doc: 10_000,
|
||||
};
|
||||
|
||||
// Create engine
|
||||
let engine = RLMEngine::with_llm_client(
|
||||
storage, bm25_index, llm_client, Some(config)
|
||||
)?;
|
||||
|
||||
// Usage
|
||||
let chunks = engine.load_document(doc_id, content, None).await?;
|
||||
let results = engine.query(doc_id, "error handling", None, 5).await?;
|
||||
let response = engine.dispatch_subtask(doc_id, "Analyze code", None, 5).await?;
|
||||
```
|
||||
|
||||
## Consequences
|
||||
|
||||
### Positive
|
||||
|
||||
**Performance:**
|
||||
- ✅ Handles 100k+ line documents without context rot
|
||||
- ✅ Query latency: ~90ms average (100 queries benchmark)
|
||||
- ✅ WASM tier: <10ms for simple commands
|
||||
- ✅ Docker tier: <150ms from warm pool
|
||||
- ✅ Full workflow: <30s for 10k lines (2728 chunks)
|
||||
|
||||
**Functionality:**
|
||||
- ✅ Hybrid search outperforms pure semantic or BM25 alone
|
||||
- ✅ Distributed reasoning reduces hallucinations
|
||||
- ✅ Knowledge Graph enables learning from past executions
|
||||
- ✅ Multi-provider support (OpenAI, Claude, Ollama)
|
||||
|
||||
**Quality:**
|
||||
- ✅ 38/38 tests passing (100% pass rate)
|
||||
- ✅ 0 clippy warnings
|
||||
- ✅ Comprehensive E2E, performance, security tests
|
||||
- ✅ Production-ready with real persistence (no stubs)
|
||||
|
||||
**Cost Efficiency:**
|
||||
- ✅ Chunk-based processing reduces token usage
|
||||
- ✅ Cost tracking per provider and task
|
||||
- ✅ Local Ollama option for development (free)
|
||||
|
||||
### Negative
|
||||
|
||||
**Complexity:**
|
||||
- ⚠️ Additional component to maintain (17k+ LOC)
|
||||
- ⚠️ Learning curve for distributed reasoning patterns
|
||||
- ⚠️ More moving parts (chunking, BM25, embeddings, dispatch)
|
||||
|
||||
**Infrastructure:**
|
||||
- ⚠️ Requires SurrealDB for persistence
|
||||
- ⚠️ Requires embedding provider (OpenAI/Ollama)
|
||||
- ⚠️ Optional Docker for full sandbox tier
|
||||
|
||||
**Performance Trade-offs:**
|
||||
- ⚠️ Load time ~22s for 10k lines (chunking + embedding + indexing)
|
||||
- ⚠️ BM25 rebuild time proportional to document size
|
||||
- ⚠️ Memory usage: ~25MB per WASM instance, ~100-300MB per Docker container
|
||||
|
||||
### Risks and Mitigations
|
||||
|
||||
| Risk | Mitigation | Status |
|
||||
|------|-----------|--------|
|
||||
| SurrealDB schema conflicts | Use SCHEMALESS tables | ✅ Resolved |
|
||||
| BM25 index performance | In-memory Tantivy, auto-rebuild | ✅ Verified |
|
||||
| LLM provider costs | Cost tracking, local Ollama option | ✅ Implemented |
|
||||
| Sandbox escape | WASM isolation, Docker security tests | ✅ 13/13 tests passing |
|
||||
| Context window limits | Chunking + hybrid search + aggregation | ✅ Handles 100k+ tokens |
|
||||
|
||||
## Validation
|
||||
|
||||
### Test Coverage
|
||||
|
||||
```
|
||||
Basic integration: 4/4 ✅ (100%)
|
||||
E2E integration: 9/9 ✅ (100%)
|
||||
Security: 13/13 ✅ (100%)
|
||||
Performance: 8/8 ✅ (100%)
|
||||
Debug tests: 4/4 ✅ (100%)
|
||||
───────────────────────────────────
|
||||
Total: 38/38 ✅ (100%)
|
||||
```
|
||||
|
||||
### Performance Benchmarks
|
||||
|
||||
```
|
||||
Query Latency (100 queries):
|
||||
Average: 90.6ms
|
||||
P50: 87.5ms
|
||||
P95: 88.3ms
|
||||
P99: 91.7ms
|
||||
|
||||
Large Document (10k lines):
|
||||
Load: ~22s (2728 chunks)
|
||||
Query: ~565ms
|
||||
Full workflow: <30s
|
||||
|
||||
BM25 Index:
|
||||
Build time: ~100ms for 1000 docs
|
||||
Search: <1ms for most queries
|
||||
```
|
||||
|
||||
### Integration Points
|
||||
|
||||
**Existing VAPORA Components:**
|
||||
- ✅ `vapora-llm-router`: LLM client integration
|
||||
- ✅ `vapora-knowledge-graph`: Execution history persistence
|
||||
- ✅ `vapora-shared`: Common error types and models
|
||||
- ✅ SurrealDB: Persistent storage backend
|
||||
- ✅ Prometheus: Metrics export
|
||||
|
||||
**New Integration Surface:**
|
||||
```rust
|
||||
// Backend API
|
||||
POST /api/v1/rlm/analyze
|
||||
{
|
||||
"content": "...",
|
||||
"query": "...",
|
||||
"strategy": "semantic"
|
||||
}
|
||||
|
||||
// Agent Coordinator
|
||||
let rlm_result = rlm_engine.dispatch_subtask(
|
||||
doc_id, task.description, None, 5
|
||||
).await?;
|
||||
```
|
||||
|
||||
## Related Decisions
|
||||
|
||||
- **ADR-003**: Multi-provider LLM routing (Phase 6 dependency)
|
||||
- **ADR-005**: Knowledge Graph temporal modeling (RLM execution history)
|
||||
- **ADR-006**: Prometheus metrics standardization (RLM metrics)
|
||||
|
||||
## References
|
||||
|
||||
**Implementation:**
|
||||
- `crates/vapora-rlm/` - Full RLM implementation
|
||||
- `crates/vapora-rlm/PRODUCTION.md` - Production setup guide
|
||||
- `crates/vapora-rlm/examples/` - Working examples
|
||||
- `migrations/008_rlm_schema.surql` - Database schema
|
||||
|
||||
**External:**
|
||||
- [Tantivy](https://github.com/quickwit-oss/tantivy) - BM25 full-text search
|
||||
- [RRF Paper](https://plg.uwaterloo.ca/~gvcormac/cormacksigir09-rrf.pdf) - Reciprocal Rank Fusion
|
||||
- [WASM Security Model](https://webassembly.org/docs/security/)
|
||||
|
||||
**Tests:**
|
||||
- `tests/e2e_integration.rs` - End-to-end workflow tests
|
||||
- `tests/performance_test.rs` - Performance benchmarks
|
||||
- `tests/security_test.rs` - Sandbox security validation
|
||||
|
||||
## Notes
|
||||
|
||||
**Why SCHEMALESS vs SCHEMAFULL?**
|
||||
|
||||
Initial implementation used SCHEMAFULL with explicit `id` field definitions:
|
||||
```sql
|
||||
DEFINE TABLE rlm_chunks SCHEMAFULL;
|
||||
DEFINE FIELD id ON TABLE rlm_chunks TYPE record<rlm_chunks>; -- ❌ Conflict
|
||||
```
|
||||
|
||||
This caused data persistence failures because SurrealDB auto-generates `id` fields. Changed to SCHEMALESS:
|
||||
```sql
|
||||
DEFINE TABLE rlm_chunks SCHEMALESS; -- ✅ Works
|
||||
DEFINE INDEX idx_rlm_chunks_chunk_id ON TABLE rlm_chunks COLUMNS chunk_id UNIQUE;
|
||||
```
|
||||
|
||||
Indexes still work with SCHEMALESS, providing necessary performance without schema conflicts.
|
||||
|
||||
**Why Hybrid Search?**
|
||||
|
||||
Pure BM25 (keyword):
|
||||
- ✅ Fast, exact matches
|
||||
- ❌ Misses semantic similarity
|
||||
|
||||
Pure Semantic (embeddings):
|
||||
- ✅ Understands meaning
|
||||
- ❌ Expensive, misses exact keywords
|
||||
|
||||
Hybrid (BM25 + Semantic + RRF):
|
||||
- ✅ Best of both worlds
|
||||
- ✅ Reciprocal Rank Fusion combines rankings optimally
|
||||
- ✅ Empirically outperforms either alone
|
||||
|
||||
**Why Custom Implementation vs Framework?**
|
||||
|
||||
Frameworks (LangChain, LlamaIndex):
|
||||
- Python-based (VAPORA is Rust)
|
||||
- Heavy abstractions
|
||||
- Less control
|
||||
- Dependency lock-in
|
||||
|
||||
Custom Rust RLM:
|
||||
- Native performance
|
||||
- Full control
|
||||
- Zero-cost abstractions
|
||||
- Direct integration with VAPORA patterns
|
||||
|
||||
**Trade-off accepted**: More initial effort for long-term maintainability and performance.
|
||||
|
||||
---
|
||||
|
||||
**Supersedes**: None (new decision)
|
||||
**Amended by**: None
|
||||
**Last Updated**: 2026-02-16
|
||||
540
docs/guides/rlm-usage-guide.md
Normal file
540
docs/guides/rlm-usage-guide.md
Normal file
@ -0,0 +1,540 @@
|
||||
# RLM Usage Guide - Recursive Language Models
|
||||
|
||||
Guide completa para usar y adaptar el sistema RLM en VAPORA.
|
||||
|
||||
## Tabla de Contenidos
|
||||
|
||||
- [Introducción](#introducción)
|
||||
- [Conceptos Básicos](#conceptos-básicos)
|
||||
- [Configuración](#configuración)
|
||||
- [Casos de Uso](#casos-de-uso)
|
||||
- [Adaptación](#adaptación)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
|
||||
## Introducción
|
||||
|
||||
### ¿Qué es RLM?
|
||||
|
||||
RLM (Recursive Language Models) es un sistema de razonamiento distribuido que permite:
|
||||
|
||||
- **Procesar documentos grandes** (>100k tokens) sin limitaciones de contexto
|
||||
- **Búsqueda híbrida** (keywords + semántica) con RRF fusion
|
||||
- **Razonamiento distribuido** mediante llamadas LLM paralelas
|
||||
- **Aprendizaje incremental** desde historial de ejecuciones
|
||||
|
||||
### ¿Cuándo usar RLM?
|
||||
|
||||
**Usa RLM cuando:**
|
||||
- ✅ Documentos >50k tokens
|
||||
- ✅ Necesitas búsqueda semántica + keywords
|
||||
- ✅ Razonamiento sobre múltiples partes del documento
|
||||
- ✅ Reutilizar soluciones de ejecuciones pasadas
|
||||
|
||||
**No uses RLM cuando:**
|
||||
- ❌ Documentos pequeños (<10k tokens) - usa LLM directo
|
||||
- ❌ Solo necesitas chat simple
|
||||
- ❌ Latencia crítica (<100ms) - usa cache/embeddings directos
|
||||
|
||||
## Conceptos Básicos
|
||||
|
||||
### 1. Chunking (Fragmentación)
|
||||
|
||||
Divide documentos en chunks (fragmentos) manejables:
|
||||
|
||||
```rust
|
||||
use vapora_rlm::chunking::{ChunkingConfig, ChunkingStrategy};
|
||||
|
||||
// Fixed: Tamaño fijo con overlap
|
||||
let config = ChunkingConfig {
|
||||
strategy: ChunkingStrategy::Fixed,
|
||||
chunk_size: 1000, // 1000 caracteres por chunk
|
||||
overlap: 200, // 200 caracteres de overlap
|
||||
};
|
||||
|
||||
// Semantic: Respeta límites de oraciones
|
||||
let config = ChunkingConfig {
|
||||
strategy: ChunkingStrategy::Semantic,
|
||||
chunk_size: 1000,
|
||||
overlap: 200,
|
||||
};
|
||||
|
||||
// Code: Usa AST para código fuente
|
||||
let config = ChunkingConfig {
|
||||
strategy: ChunkingStrategy::Code,
|
||||
chunk_size: 1500,
|
||||
overlap: 300,
|
||||
};
|
||||
```
|
||||
|
||||
**Guía de selección:**
|
||||
|
||||
| Tipo de contenido | Estrategia recomendada | Chunk size |
|
||||
|-------------------|------------------------|------------|
|
||||
| Prosa, docs | Semantic | 1000-2000 |
|
||||
| Código fuente | Code | 1500-3000 |
|
||||
| Logs, datos | Fixed | 500-1000 |
|
||||
| Mixto | Semantic | 1000-1500 |
|
||||
|
||||
### 2. Hybrid Search (Búsqueda Híbrida)
|
||||
|
||||
Combina BM25 (keywords) + embeddings (semántica) + RRF:
|
||||
|
||||
```rust
|
||||
// Automático - RLM maneja la búsqueda híbrida
|
||||
let results = engine.query(
|
||||
doc_id, // ID del documento
|
||||
"error handling", // Query (keywords)
|
||||
None, // Embedding opcional
|
||||
5, // Top 5 resultados
|
||||
).await?;
|
||||
|
||||
// Resultados incluyen scores híbridos
|
||||
for result in results {
|
||||
println!("Score: {}", result.score); // Score RRF combinado
|
||||
println!("BM25: {:?}", result.bm25_score);
|
||||
println!("Semantic: {:?}", result.semantic_score);
|
||||
println!("Content: {}", result.chunk.content);
|
||||
}
|
||||
```
|
||||
|
||||
**Scores:**
|
||||
- `score`: Score RRF final (mayor = mejor)
|
||||
- `bm25_score`: Score keyword (TF-IDF based)
|
||||
- `semantic_score`: Score semántico (cosine similarity)
|
||||
|
||||
### 3. LLM Dispatch (Razonamiento Distribuido)
|
||||
|
||||
Envía chunks relevantes al LLM para análisis:
|
||||
|
||||
```rust
|
||||
let response = engine.dispatch_subtask(
|
||||
doc_id, // Documento
|
||||
"Explain error handling", // Tarea para el LLM
|
||||
None, // Embedding query opcional
|
||||
5, // Top 5 chunks relevantes
|
||||
).await?;
|
||||
|
||||
println!("LLM Response: {}", response.text);
|
||||
println!("Tokens: {} in, {} out",
|
||||
response.total_input_tokens,
|
||||
response.total_output_tokens
|
||||
);
|
||||
println!("Cost: ${:.4}",
|
||||
(response.total_input_tokens as f64 * 5.0 / 1_000_000.0) +
|
||||
(response.total_output_tokens as f64 * 15.0 / 1_000_000.0)
|
||||
);
|
||||
```
|
||||
|
||||
## Configuración
|
||||
|
||||
### Setup Básico (Development)
|
||||
|
||||
```rust
|
||||
use std::sync::Arc;
|
||||
use surrealdb::engine::remote::ws::Ws;
|
||||
use surrealdb::opt::auth::Root;
|
||||
use surrealdb::Surreal;
|
||||
use vapora_llm_router::providers::OllamaClient;
|
||||
use vapora_rlm::search::bm25::BM25Index;
|
||||
use vapora_rlm::storage::SurrealDBStorage;
|
||||
use vapora_rlm::RLMEngine;
|
||||
|
||||
#[tokio::main]
|
||||
async fn main() -> anyhow::Result<()> {
|
||||
// 1. SurrealDB
|
||||
let db = Surreal::new::<Ws>("127.0.0.1:8000").await?;
|
||||
db.signin(Root {
|
||||
username: "root",
|
||||
password: "root",
|
||||
}).await?;
|
||||
db.use_ns("dev").use_db("rlm").await?;
|
||||
|
||||
// 2. Ollama (local, gratis)
|
||||
let llm_client = Arc::new(OllamaClient::new(
|
||||
"http://localhost:11434".to_string(),
|
||||
"llama3.2".to_string(),
|
||||
4096, 0.7,
|
||||
)?);
|
||||
|
||||
// 3. Storage y BM25
|
||||
let storage = Arc::new(SurrealDBStorage::new(db));
|
||||
let bm25_index = Arc::new(BM25Index::new()?);
|
||||
|
||||
// 4. RLM Engine
|
||||
let engine = RLMEngine::with_llm_client(
|
||||
storage,
|
||||
bm25_index,
|
||||
llm_client,
|
||||
None, // Config por defecto
|
||||
)?;
|
||||
|
||||
Ok(())
|
||||
}
|
||||
```
|
||||
|
||||
### Setup Producción (OpenAI)
|
||||
|
||||
```rust
|
||||
use vapora_llm_router::providers::OpenAIClient;
|
||||
use vapora_rlm::engine::RLMEngineConfig;
|
||||
use vapora_rlm::chunking::{ChunkingConfig, ChunkingStrategy};
|
||||
use vapora_rlm::embeddings::EmbeddingConfig;
|
||||
|
||||
// LLM client
|
||||
let llm_client = Arc::new(OpenAIClient::new(
|
||||
std::env::var("OPENAI_API_KEY")?,
|
||||
"gpt-4".to_string(),
|
||||
4096, 0.7,
|
||||
5.0, // $5 per 1M input tokens
|
||||
15.0, // $15 per 1M output tokens
|
||||
)?);
|
||||
|
||||
// Config optimizada
|
||||
let config = RLMEngineConfig {
|
||||
chunking: ChunkingConfig {
|
||||
strategy: ChunkingStrategy::Semantic,
|
||||
chunk_size: 1500,
|
||||
overlap: 300,
|
||||
},
|
||||
embedding: Some(EmbeddingConfig::openai_small()),
|
||||
auto_rebuild_bm25: true,
|
||||
max_chunks_per_doc: 10_000,
|
||||
};
|
||||
|
||||
// Engine con config
|
||||
let engine = RLMEngine::with_llm_client(
|
||||
storage,
|
||||
bm25_index,
|
||||
llm_client,
|
||||
Some(config),
|
||||
)?;
|
||||
```
|
||||
|
||||
## Casos de Uso
|
||||
|
||||
### 1. Análisis de Código (Code Review)
|
||||
|
||||
```rust
|
||||
// Cargar repositorio
|
||||
let code = std::fs::read_to_string("src/main.rs")?;
|
||||
let chunks = engine.load_document("repo/main.rs", &code, None).await?;
|
||||
|
||||
// Buscar errores potenciales
|
||||
let results = engine.query(
|
||||
"repo/main.rs",
|
||||
"unsafe unwrap panic error", // Keywords
|
||||
None,
|
||||
10
|
||||
).await?;
|
||||
|
||||
// Analizar con LLM
|
||||
let review = engine.dispatch_subtask(
|
||||
"repo/main.rs",
|
||||
"Review this Rust code for potential bugs, unsafe patterns, \
|
||||
and suggest improvements following best practices",
|
||||
None,
|
||||
10 // Top 10 chunks relevantes
|
||||
).await?;
|
||||
|
||||
println!("Code Review:\n{}", review.text);
|
||||
```
|
||||
|
||||
### 2. Documentación Q&A
|
||||
|
||||
```rust
|
||||
// Cargar documentación
|
||||
let docs = std::fs::read_to_string("docs/README.md")?;
|
||||
engine.load_document("docs", &docs, None).await?;
|
||||
|
||||
// Query usuario
|
||||
let question = "How do I configure authentication?";
|
||||
let relevant_chunks = engine.query("docs", question, None, 5).await?;
|
||||
|
||||
// Respuesta del LLM basada en docs
|
||||
let answer = engine.dispatch_subtask(
|
||||
"docs",
|
||||
&format!("Answer this question based on the documentation: {}", question),
|
||||
None,
|
||||
5
|
||||
).await?;
|
||||
|
||||
println!("Answer: {}", answer.text);
|
||||
```
|
||||
|
||||
### 3. Log Analysis
|
||||
|
||||
```rust
|
||||
// Cargar logs (grandes volúmenes)
|
||||
let logs = std::fs::read_to_string("/var/log/app.log")?;
|
||||
let chunks = engine.load_document(
|
||||
"logs/app",
|
||||
&logs,
|
||||
Some(ChunkingConfig {
|
||||
strategy: ChunkingStrategy::Fixed,
|
||||
chunk_size: 500, // Logs más pequeños
|
||||
overlap: 50,
|
||||
})
|
||||
).await?;
|
||||
|
||||
// Buscar errores
|
||||
let errors = engine.query(
|
||||
"logs/app",
|
||||
"ERROR FATAL exception crash",
|
||||
None,
|
||||
20
|
||||
).await?;
|
||||
|
||||
// Análisis de root cause
|
||||
let analysis = engine.dispatch_subtask(
|
||||
"logs/app",
|
||||
"Analyze these error logs and identify the root cause. \
|
||||
Suggest fixes and preventive measures.",
|
||||
None,
|
||||
20
|
||||
).await?;
|
||||
|
||||
println!("Root Cause Analysis:\n{}", analysis.text);
|
||||
```
|
||||
|
||||
### 4. Knowledge Base Building
|
||||
|
||||
```rust
|
||||
// Cargar múltiples documentos
|
||||
let docs = vec![
|
||||
("guide1.md", std::fs::read_to_string("docs/guide1.md")?),
|
||||
("guide2.md", std::fs::read_to_string("docs/guide2.md")?),
|
||||
("api.md", std::fs::read_to_string("docs/api.md")?),
|
||||
];
|
||||
|
||||
for (id, content) in docs {
|
||||
engine.load_document(id, &content, None).await?;
|
||||
}
|
||||
|
||||
// Query cross-document
|
||||
let results = engine.query(
|
||||
"guide1.md", // Busca en este doc primero
|
||||
"authentication setup",
|
||||
None,
|
||||
5
|
||||
).await?;
|
||||
|
||||
// También buscar en otros docs
|
||||
let all_results = futures::future::join_all(
|
||||
["guide1.md", "guide2.md", "api.md"]
|
||||
.iter()
|
||||
.map(|doc_id| engine.query(doc_id, "authentication", None, 3))
|
||||
).await;
|
||||
```
|
||||
|
||||
## Adaptación
|
||||
|
||||
### Tuning de Performance
|
||||
|
||||
#### 1. Chunk Size Optimization
|
||||
|
||||
```rust
|
||||
// Para documentos técnicos densos
|
||||
ChunkingConfig {
|
||||
strategy: ChunkingStrategy::Semantic,
|
||||
chunk_size: 2000, // Chunks grandes = más contexto
|
||||
overlap: 400, // Overlap mayor para continuidad
|
||||
}
|
||||
|
||||
// Para búsqueda precisa
|
||||
ChunkingConfig {
|
||||
strategy: ChunkingStrategy::Fixed,
|
||||
chunk_size: 500, // Chunks pequeños = precisión
|
||||
overlap: 50, // Overlap menor = más chunks únicos
|
||||
}
|
||||
```
|
||||
|
||||
**Regla general:**
|
||||
- Chunks grandes (1500-2000): Más contexto, menos chunks, búsqueda más lenta
|
||||
- Chunks medianos (1000-1500): Balance óptimo
|
||||
- Chunks pequeños (500-1000): Precisión alta, más chunks, más tokens
|
||||
|
||||
#### 2. Embedding Provider Selection
|
||||
|
||||
```rust
|
||||
use vapora_rlm::embeddings::EmbeddingConfig;
|
||||
|
||||
// Desarrollo local (gratis)
|
||||
let config = RLMEngineConfig {
|
||||
embedding: Some(EmbeddingConfig::ollama("llama3.2")),
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
// Producción (mejor calidad)
|
||||
let config = RLMEngineConfig {
|
||||
embedding: Some(EmbeddingConfig::openai_large()), // 3072 dims
|
||||
..Default::default()
|
||||
};
|
||||
|
||||
// Balance costo/calidad
|
||||
let config = RLMEngineConfig {
|
||||
embedding: Some(EmbeddingConfig::openai_small()), // 1536 dims
|
||||
..Default::default()
|
||||
};
|
||||
```
|
||||
|
||||
#### 3. Query Optimization
|
||||
|
||||
```rust
|
||||
// Búsqueda amplia (exploratoria)
|
||||
let results = engine.query(doc_id, query, None, 20).await?;
|
||||
|
||||
// Búsqueda precisa (top results)
|
||||
let results = engine.query(doc_id, query, None, 3).await?;
|
||||
|
||||
// Con embedding personalizado
|
||||
let embedding = embedding_generator.embed(query).await?;
|
||||
let results = engine.query(doc_id, query, Some(&embedding), 5).await?;
|
||||
```
|
||||
|
||||
### Custom Chunking Strategy
|
||||
|
||||
```rust
|
||||
use vapora_rlm::chunking::{Chunker, ChunkResult};
|
||||
|
||||
// Implementa tu propia estrategia
|
||||
pub struct CustomChunker {
|
||||
chunk_size: usize,
|
||||
// ... custom logic
|
||||
}
|
||||
|
||||
impl Chunker for CustomChunker {
|
||||
fn chunk(&self, text: &str) -> Result<Vec<ChunkResult>, ChunkingError> {
|
||||
// Tu lógica de chunking
|
||||
todo!()
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Custom Aggregation Strategy
|
||||
|
||||
```rust
|
||||
use vapora_rlm::dispatch::{DispatchConfig, AggregationStrategy};
|
||||
|
||||
let config = DispatchConfig {
|
||||
include_content: true,
|
||||
include_metadata: false,
|
||||
max_chunks_per_dispatch: 10,
|
||||
aggregation: AggregationStrategy::MajorityVote, // Para clasificación
|
||||
};
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Problem: Query returns 0 results
|
||||
|
||||
**Diagnóstico:**
|
||||
```rust
|
||||
// 1. Verificar chunks cargados
|
||||
let stats = bm25_index.stats();
|
||||
println!("BM25 docs: {}", stats.num_docs);
|
||||
|
||||
// 2. Verificar storage
|
||||
let chunks = storage.get_chunks(doc_id).await?;
|
||||
println!("Storage chunks: {}", chunks.len());
|
||||
|
||||
// 3. Test BM25 directo
|
||||
let bm25_results = bm25_index.search(query, 10)?;
|
||||
println!("BM25 results: {}", bm25_results.len());
|
||||
```
|
||||
|
||||
**Soluciones:**
|
||||
- Asegurar que `load_document()` completó exitosamente
|
||||
- Verificar que el query matchea contenido del documento
|
||||
- Aumentar límite de resultados (`limit`)
|
||||
- Usar keywords más generales
|
||||
|
||||
### Problem: Slow load performance
|
||||
|
||||
**Diagnóstico:**
|
||||
```rust
|
||||
let start = Instant::now();
|
||||
let chunks = engine.load_document(doc_id, content, None).await?;
|
||||
println!("Load time: {:?}", start.elapsed());
|
||||
println!("Chunks created: {}", chunks);
|
||||
println!("Time per chunk: {:?}", start.elapsed() / chunks as u32);
|
||||
```
|
||||
|
||||
**Optimizaciones:**
|
||||
- Deshabilitar embeddings temporalmente: `embedding: None`
|
||||
- Aumentar chunk size (menos chunks)
|
||||
- Usar `auto_rebuild_bm25: false` y rebuild manual
|
||||
- Batch loading para múltiples documentos
|
||||
|
||||
### Problem: High LLM costs
|
||||
|
||||
**Monitoreo:**
|
||||
```rust
|
||||
let response = engine.dispatch_subtask(doc_id, task, None, 5).await?;
|
||||
|
||||
let cost = (response.total_input_tokens as f64 * 5.0 / 1_000_000.0)
|
||||
+ (response.total_output_tokens as f64 * 15.0 / 1_000_000.0);
|
||||
|
||||
println!("Cost this call: ${:.4}", cost);
|
||||
println!("Input tokens: {}", response.total_input_tokens);
|
||||
println!("Output tokens: {}", response.total_output_tokens);
|
||||
```
|
||||
|
||||
**Reducciones:**
|
||||
- Reducir `limit` en queries (menos chunks al LLM)
|
||||
- Usar modelos más baratos (gpt-3.5-turbo vs gpt-4)
|
||||
- Usar Ollama local para desarrollo
|
||||
- Cache de resultados frecuentes
|
||||
- Chunk size más grande (menos llamadas)
|
||||
|
||||
### Problem: SurrealDB schema errors
|
||||
|
||||
**Verificación:**
|
||||
```bash
|
||||
# Aplicar schema correcto
|
||||
cd crates/vapora-rlm/tests
|
||||
bash test_setup.sh
|
||||
```
|
||||
|
||||
**Alternativa manual:**
|
||||
```sql
|
||||
-- Conectar a SurrealDB
|
||||
USE NS production DB rlm;
|
||||
|
||||
-- Verificar tablas
|
||||
INFO FOR DB;
|
||||
|
||||
-- Limpiar si necesario
|
||||
REMOVE TABLE rlm_chunks;
|
||||
REMOVE TABLE rlm_buffers;
|
||||
REMOVE TABLE rlm_executions;
|
||||
|
||||
-- Reaplicar schema
|
||||
-- (copiar contenido de migrations/008_rlm_schema.surql)
|
||||
```
|
||||
|
||||
## Ejemplos Completos
|
||||
|
||||
Ver directorio `examples/`:
|
||||
|
||||
```bash
|
||||
# Local development con Ollama (gratis)
|
||||
cargo run --example local_ollama
|
||||
|
||||
# Production con OpenAI
|
||||
export OPENAI_API_KEY="sk-..."
|
||||
cargo run --example production_setup
|
||||
```
|
||||
|
||||
## Referencias
|
||||
|
||||
- **ADR**: `docs/architecture/decisions/008-recursive-language-models-integration.md`
|
||||
- **Production Guide**: `crates/vapora-rlm/PRODUCTION.md`
|
||||
- **API Docs**: `cargo doc --open -p vapora-rlm`
|
||||
- **Tests**: `crates/vapora-rlm/tests/`
|
||||
|
||||
## Siguiente Paso
|
||||
|
||||
1. ✅ Ejecuta ejemplo local: `cargo run --example local_ollama`
|
||||
2. ✅ Lee el ADR para decisiones arquitecturales
|
||||
3. ✅ Revisa tests para ejemplos de uso: `tests/e2e_integration.rs`
|
||||
4. ✅ Consulta PRODUCTION.md para deployment
|
||||
30
migrations/008_rlm_schema.surql
Normal file
30
migrations/008_rlm_schema.surql
Normal file
@ -0,0 +1,30 @@
|
||||
-- Migration 008: RLM Schema
|
||||
-- Creates tables for Recursive Language Models (RLM) integration
|
||||
-- Provides chunking, buffering, and execution history storage
|
||||
|
||||
-- Use test namespace and database
|
||||
USE NS test_rlm_e2e DB test_rlm_e2e;
|
||||
|
||||
-- RLM Chunks table (from documents)
|
||||
-- Note: Using SCHEMALESS instead of SCHEMAFULL because:
|
||||
-- 1. SurrealDB auto-generates `id` field for all records
|
||||
-- 2. Explicit `id` field definition in SCHEMAFULL causes conflicts with CREATE queries
|
||||
-- 3. SCHEMALESS provides flexibility while still allowing indexes
|
||||
DEFINE TABLE rlm_chunks SCHEMALESS;
|
||||
|
||||
-- Indexes for efficient queries (work with SCHEMALESS tables)
|
||||
DEFINE INDEX idx_rlm_chunks_chunk_id ON TABLE rlm_chunks COLUMNS chunk_id UNIQUE;
|
||||
DEFINE INDEX idx_rlm_chunks_doc_id ON TABLE rlm_chunks COLUMNS doc_id;
|
||||
|
||||
-- RLM Buffers table (pass-by-reference for large contexts)
|
||||
DEFINE TABLE rlm_buffers SCHEMALESS;
|
||||
|
||||
-- Indexes for buffers
|
||||
DEFINE INDEX idx_rlm_buffers_buffer_id ON TABLE rlm_buffers COLUMNS buffer_id UNIQUE;
|
||||
|
||||
-- RLM Execution History table (for learning)
|
||||
DEFINE TABLE rlm_executions SCHEMALESS;
|
||||
|
||||
-- Indexes for execution history
|
||||
DEFINE INDEX idx_rlm_executions_execution_id ON TABLE rlm_executions COLUMNS execution_id UNIQUE;
|
||||
DEFINE INDEX idx_rlm_executions_doc_id ON TABLE rlm_executions COLUMNS doc_id;
|
||||
Loading…
x
Reference in New Issue
Block a user