agentic-os/docs/agentic-os-architecture.svg

224 lines
15 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 1000" font-family="'Inter', 'Segoe UI', -apple-system, sans-serif">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0f0f1a"/>
<stop offset="100%" stop-color="#1a1a2e"/>
</linearGradient>
<linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#a29bfe"/>
<stop offset="100%" stop-color="#fd79a8"/>
</linearGradient>
<linearGradient id="dashGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#6c5ce7" stop-opacity="0.3"/>
<stop offset="0.5" stop-color="#6c5ce7" stop-opacity="0.6"/>
<stop offset="1" stop-color="#6c5ce7" stop-opacity="0.3"/>
</linearGradient>
<linearGradient id="opencodeGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6c5ce7"/>
<stop offset="100%" stop-color="#4a3db8"/>
</linearGradient>
<linearGradient id="hermesGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#00cec9"/>
<stop offset="100%" stop-color="#009b97"/>
</linearGradient>
<linearGradient id="geminiGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fd79a8"/>
<stop offset="100%" stop-color="#d65a85"/>
</linearGradient>
<!-- Layer accent colors -->
<linearGradient id="l7" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#6c5ce7" stop-opacity="0.15"/>
<stop offset="100%" stop-color="#6c5ce7" stop-opacity="0.05"/>
<animate attributeName="x2" values="0;1;0" dur="8s" repeatCount="indefinite"/>
</linearGradient>
<linearGradient id="accent7" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#6c5ce7"/><stop offset="100%" stop-color="#a29bfe"/></linearGradient>
<linearGradient id="accent6" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#00cec9"/><stop offset="100%" stop-color="#55efc4"/></linearGradient>
<linearGradient id="accent5" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#fd79a8"/><stop offset="100%" stop-color="#fab1a0"/></linearGradient>
<linearGradient id="accent4" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#fdcb6e"/><stop offset="100%" stop-color="#ffeaa7"/></linearGradient>
<linearGradient id="accent3" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#e17055"/><stop offset="100%" stop-color="#fab1a0"/></linearGradient>
<linearGradient id="accent2" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#81ecec"/><stop offset="100%" stop-color="#00b894"/></linearGradient>
<linearGradient id="accent1" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#b2bec3"/><stop offset="100%" stop-color="#dfe6e9"/></linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="layerShadow">
<feDropShadow dx="0" dy="1" stdDeviation="3" flood-color="#000" flood-opacity="0.4"/>
</filter>
<filter id="agentShadow">
<feDropShadow dx="0" dy="3" stdDeviation="6" flood-color="#000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Background -->
<rect width="900" height="1000" fill="url(#bgGrad)" rx="16"/>
<!-- Subtle grid pattern -->
<g opacity="0.03">
<line x1="0" y1="0" x2="0" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="90" y1="0" x2="90" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="180" y1="0" x2="180" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="270" y1="0" x2="270" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="360" y1="0" x2="360" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="450" y1="0" x2="450" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="540" y1="0" x2="540" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="630" y1="0" x2="630" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="720" y1="0" x2="720" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="810" y1="0" x2="810" y2="1000" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="0" x2="900" y2="0" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="100" x2="900" y2="100" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="200" x2="900" y2="200" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="300" x2="900" y2="300" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="400" x2="900" y2="400" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="500" x2="900" y2="500" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="600" x2="900" y2="600" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="700" x2="900" y2="700" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="800" x2="900" y2="800" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="900" x2="900" y2="900" stroke="#fff" stroke-width="0.5"/>
<line x1="0" y1="1000" x2="900" y2="1000" stroke="#fff" stroke-width="0.5"/>
</g>
<!-- Outer container border -->
<rect x="25" y="20" width="850" height="960" rx="12" fill="none" stroke="#2d2d4a" stroke-width="1"/>
<!-- Title -->
<text x="450" y="58" text-anchor="middle" fill="url(#titleGrad)" font-size="20" font-weight="800" letter-spacing="2">AGENTIC OS</text>
<text x="450" y="78" text-anchor="middle" fill="#636e8a" font-size="11" font-weight="500" letter-spacing="4">MULTI-AGENT ORCHESTRATION PLATFORM</text>
<line x1="250" y1="88" x2="650" y2="88" stroke="#2d2d4a" stroke-width="1"/>
<!-- ============ LAYERS ============ -->
<!-- Layer 7: Dashboard -->
<rect x="60" y="105" width="780" height="58" rx="10" fill="url(#l7)" stroke="#6c5ce7" stroke-width="1" stroke-opacity="0.3" filter="url(#layerShadow)"/>
<rect x="60" y="105" width="4" height="58" rx="2" fill="url(#accent7)"/>
<circle cx="82" cy="109" r="3" fill="#6c5ce7" opacity="0.5"/>
<text x="80" y="138" fill="#a29bfe" font-size="10" font-weight="700" letter-spacing="1.5">LAYER 7</text>
<text x="450" y="130" text-anchor="middle" fill="#ffffff" font-size="15" font-weight="700">Web Dashboard</text>
<text x="450" y="150" text-anchor="middle" fill="#6c6c8a" font-size="11">FastAPI + Tailwind SPA — 13 interactive pages with Chart.js gauges</text>
<line x1="450" y1="166" x2="450" y2="176" stroke="#3d3d5a" stroke-width="1.5" stroke-dasharray="4,3"/>
<!-- Layer 6: Self-Evolution -->
<rect x="60" y="179" width="780" height="58" rx="10" fill="#12121e" stroke="#00cec9" stroke-width="1" stroke-opacity="0.3" filter="url(#layerShadow)"/>
<rect x="60" y="179" width="4" height="58" rx="2" fill="url(#accent6)"/>
<circle cx="82" cy="183" r="3" fill="#00cec9" opacity="0.5"/>
<text x="80" y="212" fill="#00cec9" font-size="10" font-weight="700" letter-spacing="1.5">LAYER 6</text>
<text x="450" y="204" text-anchor="middle" fill="#ffffff" font-size="15" font-weight="700">Self-Evolution + Capability Manager</text>
<text x="450" y="224" text-anchor="middle" fill="#6c6c8a" font-size="11">Track agent capabilities and evolve routing rules over time</text>
<line x1="450" y1="240" x2="450" y2="250" stroke="#3d3d5a" stroke-width="1.5" stroke-dasharray="4,3"/>
<!-- Layer 5: Scheduler -->
<rect x="60" y="253" width="780" height="58" rx="10" fill="#12121e" stroke="#fd79a8" stroke-width="1" stroke-opacity="0.3" filter="url(#layerShadow)"/>
<rect x="60" y="253" width="4" height="58" rx="2" fill="url(#accent5)"/>
<circle cx="82" cy="257" r="3" fill="#fd79a8" opacity="0.5"/>
<text x="80" y="286" fill="#fd79a8" font-size="10" font-weight="700" letter-spacing="1.5">LAYER 5</text>
<text x="450" y="278" text-anchor="middle" fill="#ffffff" font-size="15" font-weight="700">Scheduler + Awareness + Health Guardian</text>
<text x="450" y="298" text-anchor="middle" fill="#6c6c8a" font-size="11">APScheduler — Heartbeat health check every 5 minutes — Auto-restart</text>
<line x1="450" y1="314" x2="450" y2="324" stroke="#3d3d5a" stroke-width="1.5" stroke-dasharray="4,3"/>
<!-- Layer 4: Memory -->
<rect x="60" y="327" width="780" height="58" rx="10" fill="#12121e" stroke="#fdcb6e" stroke-width="1" stroke-opacity="0.3" filter="url(#layerShadow)"/>
<rect x="60" y="327" width="4" height="58" rx="2" fill="url(#accent4)"/>
<circle cx="82" cy="331" r="3" fill="#fdcb6e" opacity="0.5"/>
<text x="80" y="360" fill="#fdcb6e" font-size="10" font-weight="700" letter-spacing="1.5">LAYER 4</text>
<text x="450" y="352" text-anchor="middle" fill="#ffffff" font-size="15" font-weight="700">Memory Graph + Consolidation</text>
<text x="450" y="372" text-anchor="middle" fill="#6c6c8a" font-size="11">Hermes SQLite FTS5 — Entity-relation tracking — Weekly synthesis</text>
<line x1="450" y1="388" x2="450" y2="398" stroke="#3d3d5a" stroke-width="1.5" stroke-dasharray="4,3"/>
<!-- Layer 3: Skills -->
<rect x="60" y="401" width="780" height="58" rx="10" fill="#12121e" stroke="#e17055" stroke-width="1" stroke-opacity="0.3" filter="url(#layerShadow)"/>
<rect x="60" y="401" width="4" height="58" rx="2" fill="url(#accent3)"/>
<circle cx="82" cy="405" r="3" fill="#e17055" opacity="0.5"/>
<text x="80" y="434" fill="#e17055" font-size="10" font-weight="700" letter-spacing="1.5">LAYER 3</text>
<text x="450" y="426" text-anchor="middle" fill="#ffffff" font-size="15" font-weight="700">Skills Hub + Eval + Learnings Loop</text>
<text x="450" y="446" text-anchor="middle" fill="#6c6c8a" font-size="11">16 modular skills — SKILL.md + eval.json + score-history per execution</text>
<line x1="450" y1="462" x2="450" y2="472" stroke="#3d3d5a" stroke-width="1.5" stroke-dasharray="4,3"/>
<!-- Layer 2: Business Brain -->
<rect x="60" y="475" width="780" height="58" rx="10" fill="#12121e" stroke="#81ecec" stroke-width="1" stroke-opacity="0.3" filter="url(#layerShadow)"/>
<rect x="60" y="475" width="4" height="58" rx="2" fill="url(#accent2)"/>
<circle cx="82" cy="479" r="3" fill="#81ecec" opacity="0.5"/>
<text x="80" y="508" fill="#81ecec" font-size="10" font-weight="700" letter-spacing="1.5">LAYER 2</text>
<text x="450" y="500" text-anchor="middle" fill="#ffffff" font-size="15" font-weight="700">Business Brain + Context Folders</text>
<text x="450" y="520" text-anchor="middle" fill="#6c6c8a" font-size="11">7 brain files — Ephemeral run context per skill execution</text>
<line x1="450" y1="536" x2="450" y2="546" stroke="#3d3d5a" stroke-width="1.5" stroke-dasharray="4,3"/>
<!-- Layer 1: Agent Router -->
<rect x="60" y="549" width="780" height="58" rx="10" fill="#12121e" stroke="#b2bec3" stroke-width="1" stroke-opacity="0.3" filter="url(#layerShadow)"/>
<rect x="60" y="549" width="4" height="58" rx="2" fill="url(#accent1)"/>
<circle cx="82" cy="553" r="3" fill="#b2bec3" opacity="0.5"/>
<text x="80" y="582" fill="#b2bec3" font-size="10" font-weight="700" letter-spacing="1.5">LAYER 1</text>
<text x="450" y="574" text-anchor="middle" fill="#ffffff" font-size="15" font-weight="700">Agent Router + Standards + Profiles</text>
<text x="450" y="594" text-anchor="middle" fill="#6c6c8a" font-size="11">Routing rules — Discover/inject standards — Per-project profiles</text>
<!-- Big arrow connector -->
<rect x="430" y="617" width="40" height="28" rx="4" fill="#2d2d4a"/>
<polygon points="450,640 438,630 462,630" fill="#55557a"/>
<text x="450" y="634" text-anchor="middle" fill="#6c6c8a" font-size="8" font-weight="600">ROUTES</text>
<!-- ============ 3-AGENT ENGINE ============ -->
<rect x="60" y="652" width="780" height="200" rx="12" fill="#0d0d18" stroke="#6c5ce7" stroke-width="0.5" stroke-opacity="0.2"/>
<rect x="60" y="652" width="780" height="36" rx="12" fill="#1a1a2e" stroke="#6c5ce7" stroke-width="0.5" stroke-opacity="0.15"/>
<rect x="60" y="676" width="780" height="1" fill="#2d2d4a"/>
<circle cx="85" cy="670" r="4" fill="#a29bfe" opacity="0.6"/>
<text x="450" y="675" text-anchor="middle" fill="#a29bfe" font-size="11" font-weight="700" letter-spacing="2">3-AGENT EXECUTION ENGINE</text>
<!-- Agent 1: opencode -->
<rect x="85" y="700" width="225" height="135" rx="10" fill="url(#opencodeGrad)" filter="url(#agentShadow)"/>
<rect x="85" y="700" width="225" height="4" rx="2" fill="#8b7cf7"/>
<!-- Agent icon area -->
<circle cx="197" cy="732" r="18" fill="#ffffff" fill-opacity="0.15"/>
<text x="197" y="738" text-anchor="middle" fill="#ffffff" font-size="16"></text>
<text x="197" y="764" text-anchor="middle" fill="#ffffff" font-size="16" font-weight="700">opencode</text>
<text x="197" y="782" text-anchor="middle" fill="#c8c0ff" font-size="11">Code &amp; DevOps Agent</text>
<line x1="110" y1="793" x2="285" y2="793" stroke="#ffffff" stroke-opacity="0.1" stroke-width="1"/>
<circle cx="110" cy="808" r="2.5" fill="#c8c0ff"/>
<text x="120" y="812" fill="#c8c0ff" font-size="10">Code generation &amp; file operations</text>
<circle cx="110" cy="823" r="2.5" fill="#c8c0ff"/>
<text x="120" y="827" fill="#c8c0ff" font-size="10">DevOps / GCP infrastructure</text>
<!-- Agent 2: Hermes Agent -->
<rect x="337" y="700" width="225" height="135" rx="10" fill="url(#hermesGrad)" filter="url(#agentShadow)"/>
<rect x="337" y="700" width="225" height="4" rx="2" fill="#33d9d6"/>
<circle cx="449" cy="732" r="18" fill="#ffffff" fill-opacity="0.15"/>
<text x="449" y="738" text-anchor="middle" fill="#ffffff" font-size="16">🧠</text>
<text x="449" y="764" text-anchor="middle" fill="#ffffff" font-size="16" font-weight="700">Hermes Agent</text>
<text x="449" y="782" text-anchor="middle" fill="#c0fff0" font-size="11">Memory &amp; Scheduling Agent</text>
<line x1="362" y1="793" x2="537" y2="793" stroke="#ffffff" stroke-opacity="0.1" stroke-width="1"/>
<circle cx="362" cy="808" r="2.5" fill="#c0fff0"/>
<text x="372" y="812" fill="#c0fff0" font-size="10">Persistent memory — SQLite FTS5</text>
<circle cx="362" cy="823" r="2.5" fill="#c0fff0"/>
<text x="372" y="827" fill="#c0fff0" font-size="10">Cron scheduling &amp; Telegram/Discord</text>
<!-- Agent 3: Gemini CLI -->
<rect x="589" y="700" width="225" height="135" rx="10" fill="url(#geminiGrad)" filter="url(#agentShadow)"/>
<rect x="589" y="700" width="225" height="4" rx="2" fill="#faa0c0"/>
<circle cx="701" cy="732" r="18" fill="#ffffff" fill-opacity="0.15"/>
<text x="701" y="738" text-anchor="middle" fill="#ffffff" font-size="16">🔍</text>
<text x="701" y="764" text-anchor="middle" fill="#ffffff" font-size="16" font-weight="700">Gemini CLI</text>
<text x="701" y="782" text-anchor="middle" fill="#ffe0ee" font-size="11">Research &amp; Analysis Agent</text>
<line x1="614" y1="793" x2="789" y2="793" stroke="#ffffff" stroke-opacity="0.1" stroke-width="1"/>
<circle cx="614" cy="808" r="2.5" fill="#ffe0ee"/>
<text x="624" y="812" fill="#ffe0ee" font-size="10">Web research &amp; multi-modal analysis</text>
<circle cx="614" cy="823" r="2.5" fill="#ffe0ee"/>
<text x="624" y="827" fill="#ffe0ee" font-size="10">Data analysis &amp; document understanding</text>
<!-- Footer -->
<rect x="250" y="870" width="400" height="28" rx="14" fill="#1a1a2e" stroke="#2d2d4a" stroke-width="1"/>
<text x="450" y="889" text-anchor="middle" fill="#636e8a" font-size="10">138 files · 16 skills · 7 brain files · 13 dashboard pages · MIT</text>
<rect x="200" y="905" width="500" height="24" rx="12" fill="#1a1a2e" stroke="#2d2d4a" stroke-width="0.5"/>
<text x="450" y="921" text-anchor="middle" fill="#fdcb6e" font-size="10">100% Free Tier — OpenRouter · Gemini Flash · Local opencode</text>
<text x="450" y="960" text-anchor="middle" fill="#3d3d5a" font-size="9">github.com/modimihir07/agentic-os</text>
</svg>