ontoref/assets/presentation/images/w-arch-diag-v2.svg

704 lines
70 KiB
XML
Raw Normal View History

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 900">
<style>
.orbit-flow { animation: orbit-dash 4s linear infinite; }
@keyframes orbit-dash { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.ring-glow { animation: ring-breathe 3s ease-in-out infinite; }
@keyframes ring-breathe { 0%,100% { opacity: 0.06; } 50% { opacity: 0.18; } }
.spoke { animation: spoke-dash 2s linear infinite; }
@keyframes spoke-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
.health { animation: pulse 2.2s ease-in-out infinite; }
.health-d1 { animation-delay: 0.4s; }
.health-d2 { animation-delay: 0.8s; }
.health-d3 { animation-delay: 1.2s; }
.health-d4 { animation-delay: 1.6s; }
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.https-beam { animation: https-p 4s ease-in-out infinite; }
@keyframes https-p { 0%,100% { opacity: 0.15; stroke-width: 1.5; } 50% { opacity: 0.7; stroke-width: 2.5; } }
.https-label { animation: https-lbl 4s ease-in-out infinite; }
@keyframes https-lbl { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
.solid-border { animation: solid-glow 3.5s ease-in-out infinite; }
@keyframes solid-glow { 0%,100% { stroke-opacity: 0.3; } 50% { stroke-opacity: 0.7; } }
.hub-pulse { animation: hub-beat 3s ease-in-out infinite; }
@keyframes hub-beat { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
.cred-dot { opacity: 0; }
.db-flow { animation: db-dash 2.5s linear infinite; }
@keyframes db-dash { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
</style>
<defs>
<filter id="glow-blue" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-orange" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-pink" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-purple" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-gold" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-flash" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="soft-shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000" flood-opacity="0.12"/>
</filter>
<filter id="ring-glow-f" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<radialGradient id="bg-radial" cx="50%" cy="42%" r="55%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#ffffff"/>
</radialGradient>
<radialGradient id="hub-glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#94a3b8" stop-opacity="0.15"/>
<stop offset="100%" stop-color="#94a3b8" stop-opacity="0"/>
</radialGradient>
<linearGradient id="orch-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fff8ed"/><stop offset="100%" stop-color="#fef3e0"/>
</linearGradient>
<linearGradient id="ctrl-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f0eeff"/><stop offset="100%" stop-color="#e8e5fa"/>
</linearGradient>
<linearGradient id="vault-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fef0f5"/><stop offset="100%" stop-color="#fce8f0"/>
</linearGradient>
<linearGradient id="ext-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f7ede7"/><stop offset="100%" stop-color="#f1e4dc"/>
</linearGradient>
<linearGradient id="mcp-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#edf9fc"/><stop offset="100%" stop-color="#e5f5f8"/>
</linearGradient>
<linearGradient id="surreal-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f3f0fe"/><stop offset="100%" stop-color="#eee8fc"/>
</linearGradient>
<linearGradient id="cli-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#edf2fa"/><stop offset="100%" stop-color="#e5ecf5"/>
</linearGradient>
<!-- Animated gradient for infinity engine color cycling -->
<linearGradient id="infinityGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#00D4FF;stop-opacity:1">
<animate attributeName="stop-color" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="3s" repeatCount="indefinite"/>
</stop>
<stop offset="50%" style="stop-color:#7B2BFF;stop-opacity:1">
<animate attributeName="stop-color" values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF" dur="3s" repeatCount="indefinite"/>
</stop>
<stop offset="100%" style="stop-color:#00FFB3;stop-opacity:1">
<animate attributeName="stop-color" values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3" dur="3s" repeatCount="indefinite"/>
</stop>
</linearGradient>
<marker id="arr-blue" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="#4a9eff"/>
</marker>
<marker id="arr-silver" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
</marker>
<marker id="arr-gold" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
</marker>
<marker id="arr-green" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
<polygon points="0 0, 8 3, 0 6" fill="#10b981"/>
</marker>
<marker id="arr-green-sm" markerWidth="5" markerHeight="4" refX="5" refY="2" orient="auto">
<polygon points="0 0, 5 2, 0 4" fill="#10b981"/>
</marker>
<path id="orbit-cw" d="M 640,185 A 135,135 0 1,1 640,455 A 135,135 0 1,1 640,185 Z" fill="none"/>
<path id="orbit-ccw" d="M 640,185 A 135,135 0 1,0 640,455 A 135,135 0 1,0 640,185 Z" fill="none"/>
<path id="path-orch-vault" d="M 640,185 A 135,135 0 0,0 508,276" fill="none"/>
<path id="path-vault-orch" d="M 508,276 A 135,135 0 0,1 640,185" fill="none"/>
<path id="path-cli-orch" d="M 660,98 L 660,115" fill="none"/>
</defs>
<!-- ═══ BACKGROUND ═══ -->
<rect width="1280" height="900" fill="url(#bg-radial)"/>
<g opacity="0.03">
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ccc" stroke-width="0.5"/>
</pattern>
<rect width="1280" height="900" fill="url(#grid)"/>
</g>
<!-- Star field -->
<g opacity="0.35">
<circle cx="95" cy="145" r="0.8" fill="#fff"/><circle cx="340" cy="78" r="0.6" fill="#fff"/>
<circle cx="890" cy="115" r="1" fill="#fff"/><circle cx="1120" cy="210" r="0.7" fill="#fff"/>
<circle cx="180" cy="460" r="0.5" fill="#fff"/><circle cx="1160" cy="510" r="0.8" fill="#fff"/>
<circle cx="72" cy="660" r="0.6" fill="#fff"/><circle cx="960" cy="710" r="0.9" fill="#fff"/>
</g>
<!-- ═══ TITLE ═══ -->
<g transform="translate(206, 20) scale(0.35)">
<g id="logo-content"><g><g><path d="M601.85,109.76c.89,.04,.57-.38,.7-.46-1.49,.09-.67,.57-.7,.46Z" style="fill:#4cc2f1;"/><polygon points="587.17 110.72 587.43 110.55 585.26 110.96 587.17 110.72" style="fill:#4cc2f1;"/><path d="M573.43,110.71c1.3,.71,4.98-.12,7.42,.14l.4,.16,1.1-.57c-2.97,.09-6.84,.47-8.93,.27Z" style="fill:#4cc2f1;"/><path d="M566.11,109.16c.45,.28-1.58,.24,1.71,.09-.17-.03-.21-.05-.31-.07-.3,0-.7,0-1.4-.02Z" style="fill:#4cc2f1;"/><path d="M567.51,109.18c1.45-.02-.95-.23,0,0h0Z" style="fill:#4cc2f1;"/><path d="M560.83,109.34l1.9-.25c-.4-.16-2.09-.2-1.46-.32-1.95,.14-1.55,.3-.44,.57Z" style="fill:#4cc2f1;"/><path d="M559.02,109.86l.99-.1c-.17-.07-.43-.09-.99,.1Z" style="fill:#4cc2f1;"/><path d="M562.11,109.53l-2.09,.22c.28,.12,.3,.35,.96-.08-.17,.21,.24,0,1.13-.14Z" style="fill:#4cc2f1;"/><path d="M563.29,109.64c1.07,.16,2.45,.25,.54,.5,3.64-.1,3.11-.6-.54-.5Z" style="fill:#4cc2f1;"/><path d="M572.73,111.45l1.43,.21,1.24-.24c-.62,.12-2.75-.19-2.66,.03Z" style="fill:#4cc2f1;"/><path d="M548.96,108.97c-.12,.15,.64,.4,.78,.6l1.41-.17c-.72-.1-2.09-.2-2.19-.42Z" style="fill:#4cc2f1;"/><path d="M549.75,109.57l-2.11,.26c1.88,.03,2.22-.09,2.11-.26Z" style="fill:#4cc2f1;"/><polygon points="558.69 110.65 562.14 110.11 558.02 110.66 558.69 110.65" style="fill:#4cc2f1;"/><polygon points="540.92 108.95 542.12 108.6 539.99 109.13 540.92 108.95" style="fill:#4cc2f1;"/><path d="M535.59,109.01c.88-.29-1.21-.49-.28-.67-1.45,.05-2.69,.3-3.8,.53,1.18-.13,2.44-.09,4.08,.14Z" style="fill:#4cc2f1;"/><path d="M529.64,109.2c.59-.07,1.2-.19,1.87-.33-.63,.07-1.25,.16-1.87,.33Z" style="fill:#4cc2f1;"/><path d="M544.06,109.76c-.16-.09-.48-.33-1.66-.43l.83,.43c.25,0,.54,0,.83,0Z" style="fill:#4cc2f1;"/><path d="M543.26,109.76h-.03c-.9-.02-1.52-.03-1.79-.04,.23,0,.78,.01,1.82,.04Z" style="fill:#4cc2f1;"/><path d="M544.26,109.76c-.08,0-.13,0-.21,0,.08,.04,.13,.06,.21,0Z" style="fill:#4cc2f1;"/><path d="M553.17,110.27c-1.24,.24-3.82,.5-1.32,.86,.89-.29-.54-.5,1.32-.86Z" style="fill:#4cc2f1;"/><path d="M545.29,110.29l2.24,.1c-.04-.11-.45-.28,.17-.4l-2.4,.3Z" style="fill:#4cc2f1;"/><polygon points="544.2 110.43 545.29 110.29 544.46 110.26 544.2 110.43" style="fill:#4cc2f1;"/><path d="M533.47,109.6c-.97,.19-2.02,.2-3.22,.23,1.28,.08,2.6,.13,3.86,.13,.18-.13,.73-.38-.64-.36Z" style="fill:#4cc2f1;"/><path d="M538.23,109.71c-.07,0-.15,.01-.21,.02,.13,.04,.24,.05,.21-.02Z" style="fill:#4cc2f1;"/><path d="M518.51,109.82c.07,.02,.12,.05,.19,.08,.01-.02,.02-.05,.04-.07h-.23Z" style="fill:#4cc2f1;"/><path d="M534.33,110.04c.96,.08,1.54-.02,2.08-.15-.72,.04-1.48,.07-2.3,.07-.08,.06-.09,.1,.21,.08Z" style="fill:#4cc2f1;"/><path d="M526.36,109.4c.5,.09,1.07,.17,1.67,.23-.49-.14-1.49-.35-1.67-.23Z" style="fill:#4cc2f1;"/><path d="M537.69,109.62s.09-.01,.14-.02c-.32-.09-.28-.05-.14,.02Z" style="fill:#4cc2f1;"/><path d="M537.69,109.62c-.49,.06-.88,.17-1.27,.26,.59-.03,1.13-.08,1.6-.14-.12-.03-.24-.08-.32-.12Z" style="fill:#4cc2f1;"/><path d="M514.95,112.57c.17-.4,2.7-.76,4.88-.34,2.15-.3,.74-1.6-1.13-2.33-.07,.17-.07,.33-2.28,.57,.77,.22,4.9,.51,3.04,.86-2.93,.2-2.4-.14-3.82-.35,1.21,.49-3.72,.72-3.09,1.44l2.57-.26c.05,.11-.88,.29-.17,.4Z" style="fill:#4cc2f1;"/><path d="M522.91,109.94l.91-.05c-1.04-.07-1.78-.23-3.15-.54-1.51,.19-1.83,.34-1.93,.47l4.48,.06-.31,.06Z" style="fill:#4cc2f1;"/><path d="M527.9,109.89c-.71,.43-2.89,.61-1.56,1.08,2.67-.03,1.87-.36,3.46-.55-4.31,.11,1.24-.24-1.87-.48,.85-.07,1.61-.1,2.33-.11-.78-.05-1.52-.12-2.23-.2,.04,0,.07,.02,.1,.03h.02s0,0,0,0c.19,.05,.25,.09,.04,.06-.01,0-.07,0-.09,0-.03,.06-.11,.11-.19,.16-1.25-.09-.2-.11,.19-.16,.01-.02,.05-.04,.05-.06,0,0-.01,0-.02,0l-4.31,.24c.91,.06,2.06,.05,4.08,0Z" style="fill:#4cc2f1;"/><path d="M549.54,112.05c-.13-.04-.13-.07-.14-.1-.28,.05-.38,.09,.14,.1Z" style="fill:#4cc2f1;"/><path d="M547.77,111.79c.31-.06,.57-.23,1.59-.19,.88,.13,0,.21,.04,.35,.61-.11,2.15-.31,.22-.52l-.31,.06c-1.74-.15-3.97-.69-3.66-.74,.51,.39,.95,.66,2.11,1.04Z" style="fill:#4cc2f1;"/><path d="M537.71,110.95l-3.59,.21,1.83,.37-.09-.22c2.04,.09,1.6-.19,1.86-.36Z" style="fill:#4cc2f1;"/><polygon poin
</g>
<text x="1002" y="38" text-anchor="middle" fill="#666666" font-family="'IBM Plex Mono',monospace" font-size="10" letter-spacing="3">CONTROL PLANE ARCHITECTURE</text>
<line x1="872" y1="46" x2="1132" y2="46" stroke="#ccc" stroke-width="0.8"/>
<!-- ═══ CLI ═══ -->
<g>
<rect x="235" y="104" width="140" height="68" rx="8" fill="url(#cli-grad)" filter="url(#soft-shadow)"/>
<rect x="235" y="104" width="140" height="68" rx="8" fill="none" stroke="#c5d5e5" stroke-width="1"/>
<rect x="235" y="107" width="3" height="62" rx="1.5" fill="#4a9eff" opacity="0.6"/>
<circle cx="256" cy="118" r="7" fill="#e2e8f0" stroke="#4a9eff" stroke-width="1" opacity="0.8"/>
<text x="256" y="121" text-anchor="middle" fill="#4a9eff" font-size="8" font-family="'IBM Plex Mono',monospace">$</text>
<text x="265" y="123" fill="#4a9eff" font-family="'DM Sans',sans-serif" font-weight="600" font-size="11">CLI</text>
<text x="270" y="148" fill="#6b8aaa" font-family="'IBM Plex Mono',monospace" font-size="8">provisioning</text>
</g>
<!-- Arrow: CLI → Orchestrator -->
<line x1="640" y1="98" x2="640" y2="115" stroke="#4a9eff" stroke-width="1.5" stroke-dasharray="5 3" class="spoke" opacity="0.7" marker-end="url(#arr-blue)"/>
<!-- ═══════════════════════════════════════ -->
<!-- NATS ORBITAL RING SYSTEM -->
<!-- ═══════════════════════════════════════ -->
<!-- Central area fill -->
<circle cx="640" cy="320" r="133" fill="#e8ecf0" opacity="0.55"/>
<!-- Ring outer glow -->
<circle cx="640" cy="320" r="138" fill="none" stroke="#94a3b8" stroke-width="10" opacity="0.04" class="ring-glow" filter="url(#ring-glow-f)"/>
<!-- Main orbit ring (flowing dashes) -->
<circle cx="640" cy="320" r="135" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="10 8" class="orbit-flow" opacity="0.45"/>
<!-- ═══ INFINITY ENGINE (∞ dual-wheel perpetual motion from logo) ═══ -->
<!-- Centered at (640,310), scale 0.55 from original logo coordinates -->
<!-- Left wheel center: (115.86, 113.25) | Right wheel center: (261.91, 113.28) -->
<g transform="translate(640, 310) scale(0.55) translate(-188.88, -113.27)" opacity="0.85">
<!-- Background circle with CLI gradient -->
<rect x="100" y="40" width="178" height="146" rx="12" style="fill:url(#cli-grad); opacity:0.35;"/>
<circle cx="188.88" cy="113.27" r="50" style="fill:url(#cli-grad); opacity:0.3;"/>
<!-- Left wheel — clockwise 8s (outline only) -->
<g>
<path d="M3.04,87.53c-3.66,16.4-3.36,33.43,.85,49.7l18.49-.31c2.12,7.08,5.09,13.89,8.85,20.26l-12.81,13.12c9.22,14.08,21.56,25.9,36.09,34.55l12.81-13.13c6.56,3.51,13.52,6.22,20.74,8.08l.31,18.3c16.56,3.62,33.75,3.33,50.18-.85l-.31-18.3c7.15-2.1,14.02-5.04,20.46-8.77l13.25,12.69c14.22-9.14,26.14-21.36,34.87-35.75l-13.25-12.68c3.54-6.5,6.28-13.4,8.15-20.55l18.49-.31c3.65-16.4,3.36-33.43-.85-49.7l-18.49,.31c-2.12-7.08-5.09-13.88-8.85-20.26l12.8-13.12c-9.22-14.08-21.56-25.9-36.08-34.55l-12.81,13.13c-6.56-3.51-13.53-6.23-20.75-8.08l-.31-18.3c-16.56-3.62-33.75-3.33-50.18,.85l.31,18.3c-7.15,2.1-14.01,5.04-20.45,8.77l-13.25-12.69c-14.22,9.14-26.15,21.36-34.88,35.75l13.25,12.68c-3.54,6.5-6.28,13.4-8.15,20.55l-18.49,.31Z" style="fill:#ffffff; fill-rule:evenodd; stroke:#4cc2f1; stroke-miterlimit:10; stroke-width:1.2; opacity:0.85;">
<animateTransform attributeName="transform" type="rotate" values="0 115.86 113.25;360 115.86 113.25" dur="8s" repeatCount="indefinite"/>
</path>
</g>
<!-- Right wheel — counter-clockwise 6s (outline only) -->
<g>
<path d="M167.28,92.87c-3.19,14.31-2.94,29.17,.74,43.37l16.13-.27c1.85,6.18,4.44,12.12,7.72,17.68l-11.18,11.45c8.05,12.29,18.82,22.6,31.49,30.15l11.18-11.46c5.72,3.06,11.8,5.43,18.1,7.05l.27,15.97c14.45,3.16,29.45,2.91,43.78-.74l-.27-15.97c6.24-1.83,12.23-4.4,17.85-7.66l11.56,11.08c12.41-7.97,22.81-18.64,30.43-31.19l-11.56-11.06c3.09-5.67,5.48-11.69,7.11-17.93l16.13-.27c3.18-14.31,2.93-29.17-.74-43.37l-16.13,.27c-1.85-6.18-4.44-12.11-7.72-17.68l11.17-11.44c-8.04-12.29-18.81-22.6-31.48-30.15l-11.18,11.46c-5.72-3.07-11.8-5.43-18.1-7.05l-.27-15.97c-14.45-3.16-29.45-2.91-43.78,.74l.27,15.97c-6.24,1.83-12.23,4.4-17.84,7.66l-11.56-11.08c-12.41,7.97-22.81,18.64-30.44,31.19l11.56,11.06c-3.09,5.67-5.48,11.69-7.11,17.93l-16.13,.27Z" style="fill:#ffffff; fill-rule:evenodd; stroke:#4cc2f1; stroke-miterlimit:10; stroke-width:1.2; opacity:0.85;">
<animateTransform attributeName="transform" type="rotate" values="0 261.91 113.28;-360 261.91 113.28" dur="6s" repeatCount="indefinite"/>
</path>
</g>
<!-- Left wheel golden center (strong original colors) -->
<path d="M115.86,78.19c19.55,0,35.4,15.7,35.4,35.06s-15.85,35.06-35.4,35.06-35.4-15.7-35.4-35.06,15.85-35.06,35.4-35.06" style="fill:#f2b03f; opacity:0.9;"/>
<ellipse cx="116.42" cy="115.68" rx="20.17" ry="20.15" style="fill:none; stroke:#4159a4; stroke-miterlimit:10; stroke-width:1.58px; opacity:0.8;"/>
<path d="M116.42,107.88c4.35-.04,7.91,3.43,7.95,7.73,.04,4.31-3.46,7.83-7.81,7.87-4.35,.04-7.91-3.43-7.95-7.73,0-.02,0-.05,0-.07-.02-4.29,3.48-7.78,7.81-7.8" style="fill:#fff; opacity:0.8;"/>
<!-- Right wheel golden center (strong original colors) -->
<ellipse cx="261.91" cy="113.28" rx="35.65" ry="35.31" style="fill:#f9b224; opacity:0.9;"/>
<!-- Right wheel — dashboard display (simplified from logo chronometer) -->
<circle cx="261.91" cy="113.28" r="26" style="fill:#3d5070; opacity:0.85;"/>
<!-- Window controls (3 dots) -->
<circle cx="243" cy="95" r="1.2" style="fill:#d68a87; opacity:0.6;"/>
<circle cx="247" cy="95" r="1.2" style="fill:#c9a558; opacity:0.6;"/>
<circle cx="251" cy="95" r="1.2" style="fill:#5a7093; opacity:0.6;"/>
<!-- Terminal header bar -->
<rect x="243" y="99" width="38" height="3.2" rx="1.5" style="fill:#6a7a98; opacity:0.5;"/>
<!-- Status bars (staggered widths = data readout) -->
<rect x="243" y="105" width="28" height="2.8" rx="1" style="fill:#7a8aaa; opacity:0.5;"/>
<rect x="243" y="110" width="34" height="2.8" rx="1" style="fill:#a89870; opacity:0.5;"/>
<rect x="243" y="115" width="20" height="2.8" rx="1" style="fill:#6a7a8a; opacity:0.4;"/>
<rect x="243" y="120" width="30" height="2.8" rx="1" style="fill:#7a8aaa; opacity:0.4;"/>
<!-- Green health indicator -->
<circle cx="271" cy="127" r="5.5" style="fill:#4a9e8f; opacity:0.7;">
<animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" repeatCount="indefinite"/>
</circle>
<!-- Animated checkmark -->
<path d="M268,126.5l2.5,2.5,4.2-4.2" style="fill:none; stroke:#a0c0b0; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:0.8;">
<animate attributeName="stroke-dasharray" values="0 15;15 15" dur="1.5s" repeatCount="indefinite"/>
</path>
<!-- ∞ path segments — staggered color cycling -->
<!-- Top left of ∞ -->
<path d="M225.8,83.92c1.22-1.35,2.46-2.66,3.75-3.94,16.69-16.54,43.22-18.12,61.79-3.68l17.46-2.65,2.57-16.63c-29.5-25.42-73.83-23.89-101.47,3.5-1.24,1.23-2.45,2.49-3.63,3.77l16.89,2.56,2.64,17.07Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
<animate attributeName="fill" values="#5e74b7;#00D4FF;#7B2BFF;#00FFB3;#5e74b7" dur="2s" repeatCount="indefinite"/>
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" repeatCount="indefinite"/>
</path>
<!-- Bottom left of ∞ -->
<path d="M78.59,141.18c-14.54-18.4-12.95-44.65,3.71-61.2,1.33-1.31,2.73-2.54,4.2-3.68l-17.46-2.65-2.57-16.63c-1.3,1.13-2.58,2.28-3.82,3.5-27.79,27.53-28.96,71.57-3.53,100.51l16.79-2.55,2.67-17.3Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
<animate attributeName="fill" values="#5e74b7;#7B2BFF;#00FFB3;#00D4FF;#5e74b7" dur="2s" begin="0.5s" repeatCount="indefinite"/>
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="0.5s" repeatCount="indefinite"/>
</path>
<!-- Top right of ∞ -->
<path d="M86.5,76.3c18.57-14.44,45.1-12.86,61.79,3.68,1.29,1.27,2.53,2.6,3.75,3.94l2.64-17.07,16.89-2.56c-1.18-1.28-2.39-2.54-3.63-3.77-27.64-27.39-71.97-28.92-101.48-3.5l2.57,16.63,17.46,2.65Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
<animate attributeName="fill" values="#8d9ccf;#00FFB3;#00D4FF;#7B2BFF;#8d9ccf" dur="2s" begin="1s" repeatCount="indefinite"/>
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="1s" repeatCount="indefinite"/>
</path>
<!-- Bottom right of ∞ -->
<path d="M299.26,141.18c-15.88,20.08-45.19,23.61-65.46,7.88l-.04-.03-17.46,2.65-2.57,16.63c29.5,25.42,73.83,23.89,101.47-3.5,1.24-1.22,2.4-2.49,3.53-3.78l-16.79-2.55-2.68-17.3Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
<animate attributeName="fill" values="#8d9ccf;#7B2BFF;#00D4FF;#00FFB3;#8d9ccf" dur="2s" begin="1.5s" repeatCount="indefinite"/>
<animate attributeName="stroke-width" values="0.5;2;0.5" dur="2s" begin="1.5s" repeatCount="indefinite"/>
</path>
<!-- ∞ connector arcs (static deep blue) -->
<path d="M315.19,60.52c-1.23-1.22-2.51-2.38-3.82-3.5l-2.57,16.63-17.46,2.65c1.47,1.14,2.88,2.37,4.2,3.68,16.66,16.55,18.25,42.8,3.71,61.2l2.68,17.3,16.79,2.55c25.42-28.93,24.26-72.98-3.53-100.5m-171.1,88.5c-20.2,15.76-49.48,12.31-65.39-7.7-.04-.05-.08-.1-.12-.15l-2.68,17.3-16.79,2.55c1.13,1.29,2.3,2.56,3.53,3.78,27.64,27.39,71.97,28.92,101.47,3.5l-2.57-16.63-17.46-2.65Z" style="fill:#455aa5; stroke:#3a5a7a; stroke-miterlimit:10;"/>
<!-- ∞ transition pieces -->
<path d="M204.38,103.42c1.09,1.79,2.17,3.56,3.25,5.32,5.65-8.96,11.44-17.4,18.17-24.81l-2.64-17.07-16.89-2.56c-5.38,5.87-10.34,12.11-14.83,18.68,4.58,6.77,8.8,13.66,12.94,20.45m-30.92,18.5c-1.09-1.79-2.18-3.56-3.25-5.32-6.68,10.59-13.53,20.44-21.92,28.75-1.33,1.31-2.73,2.54-4.21,3.68l17.46,2.65,2.57,16.63c1.3-1.12,2.58-2.28,3.82-3.5,6.84-6.9,13.02-14.41,18.46-22.43-4.57-6.76-8.78-13.66-12.93-20.46" style="fill:#8d9ccf; stroke:#5a7a90; stroke-miterlimit:10;"/>
<!-- Central flow — animated infinity gradient -->
<path d="M171.57,64.29c11.77,12.66,20.64,27.17,29.24,41.26,9,14.74,17.5,28.67,28.74,39.8,1.33,1.31,2.73,2.54,4.21,3.68l-17.46,2.65-2.57,16.63c-1.3-1.12-2.58-2.27-3.82-3.5-13.63-13.5-23.41-29.52-32.87-45.02-7.97-13.05-15.55-25.46-24.99-35.86l2.64-17.07,16.89-2.56Z" style="stroke:#5a7a90; stroke-miterlimit:10;">
<animate attributeName="fill" values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF" dur="3s" repeatCount="indefinite"/>
<animate attributeName="stroke-width" values="0.5;3;0.5" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite"/>
</path>
</g>
<!-- Hub labels (below infinity engine) -->
<text x="640" y="403" text-anchor="middle" fill="#7a8a9e" font-family="'DM Sans',sans-serif" font-weight="700" font-size="15" letter-spacing="1.2">Events Stream</text>
<text x="640" y="429" text-anchor="middle" fill="#666666" font-family="'IBM Plex Mono',monospace" font-size="7">NATS JetStream</text>
<text x="640" y="440" text-anchor="middle" fill="#666666" font-family="'IBM Plex Mono',monospace" font-size="7">:4222</text>
<!-- ═══════════════════════════════════════ -->
<!-- SATELLITE SERVICES -->
<!-- ═══════════════════════════════════════ -->
<!-- ─── ORCHESTRATOR (top, 0°) ─── -->
<g>
<rect x="505" y="60" width="270" height="110" rx="14" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="8 4" class="solid-border"/>
<rect x="515" y="70" width="250" height="90" rx="10" fill="url(#orch-grad)" filter="url(#soft-shadow)"/>
<rect x="515" y="70" width="250" height="90" rx="10" fill="none" stroke="#e0d5c5" stroke-width="1"/>
<rect x="515" y="73" width="3" height="84" rx="1.5" fill="#f59e0b" opacity="0.5"/>
<circle cx="535" cy="92" r="8" fill="#e2e8f0" stroke="#f59e0b" stroke-width="1" opacity="0.8"/>
<text x="535" y="96" text-anchor="middle" fill="#f59e0b" font-size="9"></text>
<text x="553" y="95" fill="#f59e0b" font-family="'DM Sans',sans-serif" font-weight="700" font-size="13" letter-spacing="0.5">Orchestrator</text>
<text x="740" y="95" text-anchor="end" fill="#f59e0b" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9011</text>
<circle cx="752" cy="92" r="3.5" fill="#f59e0b" class="health"/>
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#555555">
<rect x="528" y="113" width="220" height="14" rx="4" fill="#fef3db" stroke="#e8d5a0" stroke-width="0.5"/>
<text x="638" y="123" text-anchor="middle" opacity="0.6">Task State Machine • Provider API • SSH</text>
<rect x="528" y="137" width="220" height="14" rx="4" fill="#fef3db" stroke="#e8d5a0" stroke-width="0.5"/>
<text x="638" y="147" text-anchor="middle" opacity="0.55">Webhooks • Rollback • Audit Collector</text>
</g>
</g>
<!-- ─── CONFIGURATION (top-right, cylinder) ─── -->
<g>
<ellipse cx="990" cy="152" rx="70" ry="11" fill="#10b981" opacity="0.12" stroke="none"/>
<path d="M 920 152 Q 990 178 1060 152" stroke="#10b981" stroke-width="0.8" fill="none" stroke-dasharray="4 2" opacity="0.3"/>
<rect x="920" y="91" width="140" height="61" rx="3" fill="#10b981" stroke="none" opacity="0.06" filter="url(#soft-shadow)"/>
<ellipse cx="990" cy="91" rx="70" ry="13" fill="#10b981" opacity="0.35" stroke="none"/>
<text x="990" y="126" text-anchor="middle" fill="#10b981" font-family="'DM Sans',sans-serif" font-weight="700" font-size="12" letter-spacing="0.5">Configuration</text>
<text x="990" y="152" text-anchor="middle" fill="#0a7a52" font-family="'IBM Plex Mono',monospace" font-size="7">Nickel • ∞ TypeDialog</text>
</g>
<!-- ─── CONTROL CENTER (72°, upper-right) ─── -->
<g>
<rect x="241" y="248" width="250" height="110" rx="10" fill="url(#ctrl-grad)" filter="url(#soft-shadow)"/>
<rect x="241" y="248" width="250" height="110" rx="10" fill="none" stroke="#d5d0e8" stroke-width="1"/>
<rect x="241" y="251" width="3" height="104" rx="1.5" fill="#818cf8" opacity="0.5"/>
<circle cx="263" cy="270" r="8" fill="#e2e8f0" stroke="#818cf8" stroke-width="1" opacity="0.8"/>
<text x="263" y="274" text-anchor="middle" fill="#818cf8" font-size="9"></text>
<text x="279" y="273" fill="#818cf8" font-family="'DM Sans',sans-serif" font-weight="700" font-size="13" letter-spacing="0.5">Control Center</text>
<text x="461" y="273" text-anchor="end" fill="#818cf8" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9012</text>
<circle cx="473" cy="270" r="3.5" fill="#818cf8" class="health health-d1"/>
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#4a4870">
<rect x="254" y="301" width="220" height="14" rx="4" fill="#eae5f8" stroke="#c8c0e8" stroke-width="0.5"/>
<text x="364" y="311" text-anchor="middle" opacity="0.9">Cedar Policies • JWT • Sessions</text>
<rect x="254" y="325" width="220" height="14" rx="4" fill="#eae5f8" stroke="#c8c0e8" stroke-width="0.5"/>
<text x="364" y="335" text-anchor="middle" opacity="0.85">WebSocket • RBAC • Solo: auto-session</text>
</g>
</g>
<!-- ─── EXTENSION REGISTRY (144°, lower-right) ─── -->
<g>
<rect x="732" y="430" width="250" height="110" rx="10" fill="url(#ext-grad)" filter="url(#soft-shadow)"/>
<rect x="732" y="430" width="250" height="110" rx="10" fill="none" stroke="#d4bab2" stroke-width="1"/>
<rect x="978" y="433" width="3" height="104" rx="1.5" fill="#ef4444" opacity="0.5"/>
<circle cx="754" cy="452" r="8" fill="#e2e8f0" stroke="#ef4444" stroke-width="1" opacity="0.8"/>
<text x="754" y="456" text-anchor="middle" fill="#ef4444" font-size="9"></text>
<text x="770" y="455" fill="#ef4444" font-family="'DM Sans',sans-serif" font-weight="700" font-size="12" letter-spacing="0.5">Extensions Registry</text>
<text x="952" y="455" text-anchor="end" fill="#ef4444" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:8084</text>
<circle cx="964" cy="452" r="3.5" fill="#ef4444" class="health health-d3"/>
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#7a4868">
<rect x="745" y="483" width="220" height="14" rx="4" fill="#eee1db" stroke="#d4bab2" stroke-width="0.5"/>
<text x="855" y="493" text-anchor="middle" opacity="0.9">Git • OCI • LRU</text>
<rect x="745" y="507" width="220" height="14" rx="4" fill="#eee1db" stroke="#d4bab2" stroke-width="0.5"/>
<text x="855" y="517" text-anchor="middle" opacity="0.85">Providers • Taskservs • vault:// creds</text>
</g>
</g>
<!-- ─── AI/MCP (216°, lower-left) ─── -->
<g>
<rect x="298" y="430" width="250" height="110" rx="10" fill="url(#mcp-grad)" filter="url(#soft-shadow)"/>
<rect x="298" y="430" width="250" height="110" rx="10" fill="none" stroke="#c0e0e8" stroke-width="1"/>
<rect x="298" y="433" width="3" height="104" rx="1.5" fill="#22d3ee" opacity="0.5"/>
<circle cx="320" cy="452" r="8" fill="#e2e8f0" stroke="#22d3ee" stroke-width="1" opacity="0.8"/>
<text x="320" y="456" text-anchor="middle" fill="#22d3ee" font-size="9">🧠</text>
<text x="336" y="455" fill="#22d3ee" font-family="'DM Sans',sans-serif" font-weight="700" font-size="12" letter-spacing="0.5">AI • MCP</text>
<text x="523" y="455" text-anchor="end" fill="#22d3ee" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9082</text>
<circle cx="535" cy="452" r="3.5" fill="#22d3ee" class="health health-d2"/>
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#2a5050">
<rect x="311" y="483" width="220" height="14" rx="4" fill="#ddf2f7" stroke="#b0dce8" stroke-width="0.5"/>
<text x="421" y="493" text-anchor="middle" opacity="0.9">RAG Engine • MCP Server • Tools</text>
<rect x="311" y="507" width="220" height="14" rx="4" fill="#ddf2f7" stroke="#b0dce8" stroke-width="0.5"/>
<text x="421" y="517" text-anchor="middle" opacity="0.85">Embeddings • Model Routing • KGraph</text>
</g>
</g>
<!-- ─── VAULT SERVICE (288°, upper-left) ─── -->
<g>
<rect x="789" y="248" width="250" height="110" rx="10" fill="url(#vault-grad)" filter="url(#soft-shadow)"/>
<rect x="789" y="248" width="250" height="110" rx="10" fill="none" stroke="#f0c8d8" stroke-width="1"/>
<rect x="1035" y="251" width="3" height="104" rx="1.5" fill="#ec4899" opacity="0.5"/>
<circle cx="811" cy="270" r="8" fill="#e2e8f0" stroke="#ec4899" stroke-width="1" opacity="0.8"/>
<text x="811" y="274" text-anchor="middle" fill="#ec4899" font-size="9">🛡</text>
<text x="827" y="273" fill="#ec4899" font-family="'DM Sans',sans-serif" font-weight="700" font-size="13" letter-spacing="0.5">Vault Service</text>
<text x="1009" y="273" text-anchor="end" fill="#ec4899" font-family="'IBM Plex Mono',monospace" font-size="8" opacity="0.5">:9094</text>
<circle cx="1021" cy="270" r="3.5" fill="#ec4899" class="health health-d4"/>
<g font-family="'IBM Plex Mono',monospace" font-size="8" fill="#7a4870">
<rect x="802" y="301" width="220" height="14" rx="4" fill="#fef0f5" stroke="#f0c8d8" stroke-width="0.5"/>
<text x="912" y="311" text-anchor="middle" opacity="0.9">Lease Lifecycle • Key Management</text>
<rect x="802" y="325" width="220" height="14" rx="4" fill="#fef0f5" stroke="#f0c8d8" stroke-width="0.5"/>
<text x="912" y="335" text-anchor="middle" opacity="0.85">SOPS • Age • Secrets never in NATS</text>
</g>
</g>
<!-- ═══ VERTICAL ARROW: CONFIGURATION → VAULT ═══ -->
<line x1="995" y1="169" x2="995" y2="248" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.35" marker-end="url(#arr-green-sm)"/>
<!-- ═══ VERTICAL ARROW: CLI → CONTROL CENTER ═══ -->
<line x1="305" y1="177" x2="305" y2="248" stroke="#10b981" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.35" marker-end="url(#arr-green-sm)"/>
<!-- ═══ CLI → ORCHESTRATOR CURVE ═══ -->
<path d="M 375 138 C 430 100 480 80 505 120" fill="none" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.5"/>
<!-- ═══ CONFIGURATION → ORCHESTRATOR CURVE ═══ -->
<path d="M 920 128 C 850 90 800 70 775 120" fill="none" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.5"/>
<!-- ═══ CLI → AI CURVE ═══ -->
<path d="M 235 138 C 150 250 200 350 300 444" fill="none" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.5"/>
<!-- ═══ CONFIGURATION → EXT CURVE ═══ -->
<path d="M 1060 128 C 1145 240 1095 340 979 444" fill="none" stroke="#fbbf24" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.5"/>
<!-- ═══ HTTPS CREDENTIAL BEAM ═══ -->
<path d="M 505 168 C 450 187 420 217 447 245" fill="none" stroke="#4a9eff" stroke-width="2" class="https-beam" filter="url(#glow-blue)"/>
<path d="M 505 168 C 450 187 420 217 447 245" fill="none" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
<path d="M 447 245 C 420 217 450 187 505 168" fill="none" stroke="#4a9eff" stroke-width="2" class="https-beam" filter="url(#glow-blue)"/>
<path d="M 447 245 C 420 217 450 187 505 168" fill="none" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
<text x="475" y="209" fill="#4a9eff" font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="700" class="https-label">HTTPS</text>
<path d="M 775 168 C 830 187 860 217 833 245" fill="none" stroke="#4a9eff" stroke-width="2" class="https-beam" filter="url(#glow-blue)"/>
<path d="M 775 168 C 830 187 860 217 833 245" fill="none" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
<path d="M 833 245 C 860 217 830 187 775 168" fill="none" stroke="#4a9eff" stroke-width="2" class="https-beam" filter="url(#glow-blue)"/>
<path d="M 833 245 C 860 217 830 187 775 168" fill="none" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" class="https-beam" opacity="0.4"/>
<text x="803" y="209" fill="#4a9eff" font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="700" class="https-label">HTTPS</text>
<!-- ═══ ORBITAL PARTICLES ═══ -->
<circle r="3.5" fill="#f59e0b" opacity="0" filter="url(#glow-orange)">
<animateMotion dur="8s" begin="0s" repeatCount="indefinite">
<mpath href="#orbit-cw"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.05;0.92;1" dur="8s" repeatCount="indefinite"/>
</circle>
<circle r="2.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
<animateMotion dur="10s" begin="2s" repeatCount="indefinite">
<mpath href="#orbit-cw"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.8;0.8;0" keyTimes="0;0.05;0.92;1" dur="10s" begin="2s" repeatCount="indefinite"/>
</circle>
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
<animateMotion dur="7s" begin="1s" repeatCount="indefinite">
<mpath href="#orbit-ccw"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.05;0.92;1" dur="7s" begin="1s" repeatCount="indefinite"/>
</circle>
<circle r="2.5" fill="#818cf8" opacity="0" filter="url(#glow-purple)">
<animateMotion dur="9s" begin="4s" repeatCount="indefinite">
<mpath href="#orbit-cw"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="9s" begin="4s" repeatCount="indefinite"/>
</circle>
<circle r="3" fill="#22d3ee" opacity="0" filter="url(#glow-cyan)">
<animateMotion dur="11s" begin="3s" repeatCount="indefinite">
<mpath href="#orbit-ccw"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.75;0.75;0" keyTimes="0;0.05;0.92;1" dur="11s" begin="3s" repeatCount="indefinite"/>
</circle>
<circle r="2" fill="#ef4444" opacity="0" filter="url(#glow-orange)">
<animateMotion dur="12s" begin="5s" repeatCount="indefinite">
<mpath href="#orbit-cw"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.05;0.92;1" dur="12s" begin="5s" repeatCount="indefinite"/>
</circle>
<!-- ═══ ORBITAL FLASH EFFECTS ═══ -->
<!-- Color-matched bursts: each fires when its orbital particle passes nearest the service box -->
<!-- Orchestrator burst — amber #f59e0b, CW 8s begin=0s, particle at top at cycle boundary -->
<g>
<path d="M 640 183 L 645 178 L 635 174 L 640 170" fill="none" stroke="#f59e0b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow-flash)"/>
<circle cx="640" cy="183" r="0" fill="#f59e0b" filter="url(#glow-flash)">
<animate attributeName="r" values="10;0;0;10" keyTimes="0;0.15;0.85;1" dur="8s" begin="0s" repeatCount="indefinite"/>
</circle>
<animate attributeName="opacity" values="1;0;0;1" keyTimes="0;0.15;0.85;1" dur="8s" begin="0s" repeatCount="indefinite"/>
</g>
<!-- Vault burst — pink #ec4899, CW 10s begin=2s, particle passes Vault at keyTime=0.23 -->
<g opacity="0">
<path d="M 775 304 L 779 300 L 782 308 L 789 304" fill="none" stroke="#ec4899" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow-flash)"/>
<circle cx="775" cy="304" r="0" fill="#ec4899" filter="url(#glow-flash)">
<animate attributeName="r" values="0;0;10;0;0" keyTimes="0;0.15;0.23;0.38;1" dur="10s" begin="2s" repeatCount="indefinite"/>
</circle>
<animate attributeName="opacity" values="0;0;1;0;0" keyTimes="0;0.15;0.23;0.38;1" dur="10s" begin="2s" repeatCount="indefinite"/>
</g>
<!-- Extensions burst — red #ef4444, CW 12s begin=5s, particle passes Extensions at keyTime=0.38 -->
<g opacity="0">
<path d="M 732 420 L 736 424 L 728 427 L 732 430" fill="none" stroke="#ef4444" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow-flash)"/>
<circle cx="732" cy="420" r="0" fill="#ef4444" filter="url(#glow-flash)">
<animate attributeName="r" values="0;0;10;0;0" keyTimes="0;0.30;0.38;0.53;1" dur="12s" begin="5s" repeatCount="indefinite"/>
</circle>
<animate attributeName="opacity" values="0;0;1;0;0" keyTimes="0;0.30;0.38;0.53;1" dur="12s" begin="5s" repeatCount="indefinite"/>
</g>
<!-- AI•MCP burst — cyan #22d3ee, CCW 11s begin=3s, particle passes AI at keyTime=0.38 -->
<g opacity="0">
<path d="M 548 420 L 544 424 L 552 427 L 548 430" fill="none" stroke="#22d3ee" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow-flash)"/>
<circle cx="548" cy="420" r="0" fill="#22d3ee" filter="url(#glow-flash)">
<animate attributeName="r" values="0;0;10;0;0" keyTimes="0;0.30;0.38;0.53;1" dur="11s" begin="3s" repeatCount="indefinite"/>
</circle>
<animate attributeName="opacity" values="0;0;1;0;0" keyTimes="0;0.30;0.38;0.53;1" dur="11s" begin="3s" repeatCount="indefinite"/>
</g>
<!-- Control Center burst — purple #818cf8, CW 9s begin=4s, particle passes CC at keyTime=0.75 -->
<g opacity="0">
<path d="M 505 320 L 500 315 L 498 325 L 491 320" fill="none" stroke="#818cf8" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" filter="url(#glow-flash)"/>
<circle cx="505" cy="320" r="0" fill="#818cf8" filter="url(#glow-flash)">
<animate attributeName="r" values="0;0;10;0;0" keyTimes="0;0.67;0.75;0.90;1" dur="9s" begin="4s" repeatCount="indefinite"/>
</circle>
<animate attributeName="opacity" values="0;0;1;0;0" keyTimes="0;0.67;0.75;0.90;1" dur="9s" begin="4s" repeatCount="indefinite"/>
</g>
<!-- ═══ CREDENTIAL FLOW ═══ -->
<circle r="4" fill="#f59e0b" opacity="0" filter="url(#glow-gold)">
<animateMotion dur="2.5s" begin="0s" repeatCount="indefinite">
<mpath href="#path-orch-vault"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.95;0.95;0" keyTimes="0;0.1;0.8;1" dur="2.5s" repeatCount="indefinite"/>
</circle>
<circle r="3.5" fill="#ec4899" opacity="0" filter="url(#glow-pink)">
<animateMotion dur="2.5s" begin="4s" repeatCount="indefinite">
<mpath href="#path-vault-orch"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.9;0.9;0" keyTimes="0;0.1;0.8;1" dur="2.5s" begin="4s" repeatCount="indefinite"/>
</circle>
<circle r="3" fill="#4a9eff" opacity="0" filter="url(#glow-blue)">
<animateMotion dur="1.2s" begin="0s" repeatCount="indefinite">
<mpath href="#path-cli-orch"/>
</animateMotion>
<animate attributeName="opacity" values="0;0.85;0.85;0" keyTimes="0;0.15;0.7;1" dur="1.2s" repeatCount="indefinite"/>
</circle>
<!-- ═══ CONFIGURATION CYLINDER EDGES ═══ -->
<line x1="920" y1="95" x2="920" y2="156" stroke="#10b981" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.4"/>
<line x1="1060" y1="95" x2="1060" y2="156" stroke="#10b981" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.4"/>
<!-- ═══ DATA PERSISTENCE CYLINDER EDGES ═══ -->
<line x1="210" y1="582" x2="210" y2="669" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.4"/>
<line x1="1070" y1="582" x2="1070" y2="669" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 2" opacity="0.4"/>
<!-- ═══ CONNECTIONS TO SURREALDB ═══ -->
<g opacity="0.3">
<line x1="640" y1="460" x2="640" y2="570" stroke="#a78bfa" stroke-width="1" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
<line x1="430" y1="537" x2="430" y2="571" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
<line x1="850" y1="537" x2="850" y2="571" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
<path d="M 377 358 C 280 370 230 480 240 572" fill="none" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
<path d="M 903 358 C 1000 370 1050 480 1040 572" fill="none" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
<path d="M 1060 128 C 1195 270 1145 410 1070 577" fill="none" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
<path d="M 235 138 C 100 280 150 420 210 579" fill="none" stroke="#a78bfa" stroke-width="0.8" stroke-dasharray="4 3" class="db-flow" marker-end="url(#arr-silver)"/>
</g>
<!-- ═══ DATA PERSISTENCE ═══ -->
<g>
<ellipse cx="640" cy="669" rx="430" ry="10" fill="none" stroke="#a78bfa" stroke-width="1" opacity="0.1"/>
<path d="M 210 669 Q 640 687 1070 669" stroke="#c4a8f8" stroke-width="1" fill="none" stroke-dasharray="4 2" opacity="0.4"/>
<rect x="210" y="582" width="860" height="87" rx="8" fill="url(#surreal-grad)" stroke="none" opacity="0.6" filter="url(#soft-shadow)"/>
<ellipse cx="640" cy="582" rx="430" ry="12" fill="#a78bfa" opacity="0.45" stroke="none"/>
<text x="640" y="620" text-anchor="middle" fill="#a78bfa" font-family="'DM Sans',sans-serif" font-weight="700" font-size="11" letter-spacing="1">DATA PERSISTENCE</text>
<text x="1055" y="607" text-anchor="end" fill="#6a58b8" font-family="'IBM Plex Mono',monospace" font-size="7" opacity="0.75">Solo: RocksDB • Multi: WebSocket</text>
<g font-family="'IBM Plex Mono',monospace" font-size="7" font-weight="600">
<rect x="258" y="640" width="130" height="16" rx="3" fill="#f59e0b" stroke="#f59e0b" stroke-width="0.8" opacity="0.25"/>
<text x="323" y="651" text-anchor="middle" fill="#8a5800">orchestrator</text>
<rect x="400" y="640" width="110" height="16" rx="3" fill="#ec4899" stroke="#ec4899" stroke-width="0.8" opacity="0.25"/>
<text x="455" y="651" text-anchor="middle" fill="#900050">vault</text>
<rect x="522" y="640" width="140" height="16" rx="3" fill="#818cf8" stroke="#818cf8" stroke-width="0.8" opacity="0.25"/>
<text x="592" y="651" text-anchor="middle" fill="#2830a0">control_center</text>
<rect x="674" y="640" width="90" height="16" rx="3" fill="#10b981" stroke="#10b981" stroke-width="0.8" opacity="0.25"/>
<text x="719" y="651" text-anchor="middle" fill="#065c3a">audit</text>
<rect x="776" y="640" width="130" height="16" rx="3" fill="#4a9eff" stroke="#4a9eff" stroke-width="0.8" opacity="0.25"/>
<text x="841" y="651" text-anchor="middle" fill="#0040a0">workspace</text>
<rect x="918" y="640" width="100" height="16" rx="3" fill="none" stroke="#10b981" stroke-width="0.6" stroke-dasharray="4 2" opacity="0.5"/>
<text x="968" y="651" text-anchor="middle" fill="#065c3a">Nickel config</text>
</g>
</g>
<!-- ═══ SOLID ENFORCEMENT ═══ -->
<g transform="translate(120, 759)">
<text x="0" y="0" fill="#444444" font-family="'IBM Plex Mono',monospace" font-weight="600" font-size="8" letter-spacing="1.5">SOLID ENFORCEMENT LAYERS</text>
<g font-family="'IBM Plex Mono',monospace" font-size="7">
<rect x="0" y="8" width="80" height="12" rx="3" fill="#f59e0b" opacity="0.25" stroke="#f59e0b" stroke-width="0.5" stroke-opacity="0.7"/>
<text x="40" y="17" text-anchor="middle" fill="#c07800">Compile-time</text>
<rect x="88" y="8" width="68" height="12" rx="3" fill="#818cf8" opacity="0.25" stroke="#818cf8" stroke-width="0.5" stroke-opacity="0.7"/>
<text x="122" y="17" text-anchor="middle" fill="#4850c0">Dev-time</text>
<rect x="164" y="8" width="74" height="12" rx="3" fill="#ec4899" opacity="0.25" stroke="#ec4899" stroke-width="0.5" stroke-opacity="0.7"/>
<text x="201" y="17" text-anchor="middle" fill="#b8206a">Pre-commit</text>
<rect x="246" y="8" width="50" height="12" rx="3" fill="#ef4444" opacity="0.25" stroke="#ef4444" stroke-width="0.5" stroke-opacity="0.7"/>
<text x="271" y="17" text-anchor="middle" fill="#b82020">CI/CD</text>
<rect x="304" y="8" width="60" height="12" rx="3" fill="#22d3ee" opacity="0.25" stroke="#22d3ee" stroke-width="0.5" stroke-opacity="0.7"/>
<text x="334" y="17" text-anchor="middle" fill="#0890a8">Runtime</text>
<rect x="372" y="8" width="50" height="12" rx="3" fill="#94a3b8" opacity="0.25" stroke="#94a3b8" stroke-width="0.5" stroke-opacity="0.7"/>
<text x="397" y="17" text-anchor="middle" fill="#4a5870">Audit</text>
</g>
<g font-family="'IBM Plex Mono',monospace" font-size="7" fill="#2a2e38" opacity="0.6">
<text x="460" y="16" font-family="'IBM Plex Mono',monospace" font-size="7"><tspan fill="#f59e0b">Providers APIs or CLI</tspan><tspan fill="#2a2e38">: Orchestrator only | </tspan><tspan fill="#818cf8">SSH</tspan><tspan fill="#2a2e38">: Orchestrator + Machines | </tspan><tspan fill="#22d3ee">Auth</tspan><tspan fill="#2a2e38">: Control Center only | </tspan><tspan fill="#ec4899">Secrets</tspan><tspan fill="#2a2e38">: Vault Service API only</tspan></text>
</g>
</g>
<!-- ═══ LEGEND ═══ -->
<g transform="translate(120, 802)" font-family="'IBM Plex Mono',monospace" font-size="8">
<text x="0" y="0" fill="#444444" font-weight="600" font-size="8" letter-spacing="1.5">SERVICES</text>
<circle cx="7" cy="12" r="3" fill="#f59e0b"/><text x="15" y="16" fill="#8a7a60">Orchestrator</text>
<circle cx="7" cy="24" r="3" fill="#818cf8"/><text x="15" y="28" fill="#4a4870">Control Center</text>
<circle cx="7" cy="36" r="3" fill="#ec4899"/><text x="15" y="40" fill="#7a4870">Vault Service</text>
<circle cx="7" cy="48" r="3" fill="#ef4444"/><text x="15" y="52" fill="#7a4868">Extension Registry</text>
<circle cx="7" cy="60" r="3" fill="#22d3ee"/><text x="15" y="64" fill="#487a78">AI • MCP</text>
<text x="240" y="0" fill="#444444" font-weight="600" font-size="8" letter-spacing="1.5">INFRASTRUCTURE</text>
<circle cx="248" cy="12" r="5" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
<text x="260" y="16" fill="#666666" opacity="0.5">NATS Orbital Ring</text>
<rect x="243" y="22.5" width="6" height="6" fill="none" stroke="#ef4444" stroke-width="0.8" rx="0.5"/>
<line x1="243" y1="25.5" x2="249" y2="25.5" stroke="#ef4444" stroke-width="0.7"/>
<line x1="246" y1="22.5" x2="246" y2="28.5" stroke="#ef4444" stroke-width="0.7" opacity="0.6"/>
<text x="260" y="28" fill="#ef4444" opacity="0.5">OCI registry</text>
<line x1="240" y1="36" x2="254" y2="36" stroke="#818cf8" stroke-width="1.5"/>
<text x="260" y="40" fill="#818cf8" opacity="0.5">Token and Auth</text>
<path d="M 244 43 L 250 43 L 250 48 Q 247 52 244 48 L 244 43" fill="none" stroke="#ec4899" stroke-width="1.2" stroke-linejoin="round"/>
<text x="260" y="52" fill="#ec4899" opacity="0.5">SecretumVault</text>
<line x1="240" y1="60" x2="254" y2="60" stroke="#10b981" stroke-width="1.5"/>
<text x="260" y="64" fill="#10b981" opacity="0.5">Nickel</text>
<ellipse cx="247" cy="69" rx="5" ry="2" fill="none" stroke="#a78bfa" stroke-width="0.8"/>
<rect x="243" y="69" width="8" height="5" fill="none" stroke="#a78bfa" stroke-width="0.8" opacity="0.5"/>
<ellipse cx="247" cy="74" rx="5" ry="2" fill="#a78bfa" opacity="0.3" stroke="#a78bfa" stroke-width="0.8"/>
<text x="260" y="76" fill="#a78bfa" opacity="0.5">SurrealDB</text>
<text x="460" y="0" fill="#444444" font-weight="600" font-size="8" letter-spacing="1.5">CONNECTIONS</text>
<line x1="460" y1="12" x2="474" y2="12" stroke="#4a9eff" stroke-width="2" filter="url(#glow-blue)"/>
<line x1="460" y1="12" x2="474" y2="12" stroke="#4a9eff" stroke-width="1" stroke-dasharray="4 3" opacity="0.7"/>
<text x="486" y="16" fill="#4a9eff" opacity="0.5">Encrypted</text>
<line x1="460" y1="24" x2="474" y2="24" stroke="#ef9a3c" stroke-width="1.5" stroke-dasharray="2 2"/>
<text x="486" y="28" fill="#ef9a3c" opacity="0.3">I/O and Defs</text>
<line x1="460" y1="36" x2="474" y2="36" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="2 2"/>
<text x="486" y="40" fill="#6a5888">DBs data</text>
<line x1="460" y1="48" x2="474" y2="48" stroke="#10b981" stroke-width="1.5" stroke-dasharray="2 2"/>
<text x="486" y="52" fill="#10b981" opacity="0.5">Secure access</text>
<circle cx="468" cy="60" r="5" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
<text x="486" y="64" fill="#666666">Events Stream</text>
<text x="685" y="0" fill="#444444" font-weight="600" font-size="8" letter-spacing="1.5">MODES</text>
<rect x="685" y="11" width="40" height="10" rx="2" fill="#34d399" opacity="0.1" stroke="#34d399" stroke-width="0.4"/>
<text x="705" y="19" text-anchor="middle" fill="#34d399" font-size="7" font-weight="600">SOLO</text>
<text x="735" y="19" fill="#5a8a6a" font-size="7">RocksDB + local NATS + auto-session</text>
<rect x="685" y="25" width="40" height="10" rx="2" fill="#818cf8" opacity="0.1" stroke="#818cf8" stroke-width="0.4"/>
<text x="705" y="33" text-anchor="middle" fill="#818cf8" font-size="7" font-weight="600">MULTI</text>
<text x="735" y="33" fill="#4a4870" font-size="7">WebSocket DB + NATS cluster + JWT+Cedar</text>
<rect x="685" y="39" width="40" height="10" rx="2" fill="#f59e0b" opacity="0.1" stroke="#f59e0b" stroke-width="0.4"/>
<text x="705" y="47" text-anchor="middle" fill="#f59e0b" font-size="7" font-weight="600">ENT</text>
<text x="735" y="47" fill="#d97706" font-size="7">Enterprise</text>
</g>
<!-- ═══ DEPLOYMENT ═══ -->
<g transform="translate(145, 693)" font-family="'IBM Plex Mono',monospace">
<rect x="160" y="0" width="120" height="45" rx="6" fill="#f4ebe4" stroke="#d4bab2" stroke-width="0.8"/>
<circle cx="174" cy="15" r="3" fill="#ef4444"/><text x="182" y="18" fill="#c04040" font-size="8" font-weight="500">Production</text>
<text x="209" y="35" fill="#8a5858" font-size="7" text-anchor="middle">Hetzner • AWS</text>
<rect x="300" y="0" width="120" height="45" rx="6" fill="#fff8ed" stroke="#f0e0c0" stroke-width="0.8"/>
<circle cx="314" cy="15" r="3" fill="#f59e0b"/><text x="322" y="18" fill="#b07808" font-size="8" font-weight="500">Staging</text>
<text x="344" y="35" fill="#8a7050" font-size="7" text-anchor="middle">K8s cluster</text>
<rect x="440" y="0" width="120" height="45" rx="6" fill="#edf8f2" stroke="#c0e8d0" stroke-width="0.8"/>
<circle cx="454" cy="15" r="3" fill="#34d399"/><text x="462" y="18" fill="#208060" font-size="8" font-weight="500">Dev</text>
<text x="484" y="35" fill="#508a68" font-size="7" text-anchor="middle">Solo mode</text>
<rect x="580" y="0" width="120" height="45" rx="6" fill="#f0eeff" stroke="#d0d0f0" stroke-width="0.8"/>
<circle cx="594" cy="15" r="3" fill="#818cf8"/><text x="602" y="18" fill="#5060c0" font-size="8" font-weight="500">Edge</text>
<text x="624" y="35" fill="#68688a" font-size="7" text-anchor="middle">On-prem • IoT</text>
<rect x="720" y="0" width="120" height="45" rx="6" fill="#edf9fc" stroke="#c0e8f0" stroke-width="0.8"/>
<circle cx="734" cy="15" r="3" fill="#22d3ee"/><text x="742" y="18" fill="#1898a8" font-size="8" font-weight="500">Custom</text>
<text x="774" y="35" fill="#508888" font-size="7" text-anchor="middle">GitOps • Webhook</text>
</g>
<!-- ═══ VERSION ═══ -->
<text x="1160" y="872" text-anchor="end" fill="#4cc2f1" font-family="'IBM Plex Mono',monospace" font-size="9" letter-spacing="0.5">v3.0.11 • ∞ Architecture</text>
</svg>