William Valentin
114 lines
13 KiB
HTML
114 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Will's Swarm Infrastructure</title>
|
|
<style>
|
|
:root { color-scheme: dark; --bg:#020617; --panel:#0f172a; --text:#e2e8f0; --muted:#94a3b8; }
|
|
body { margin:0; background:var(--bg); color:var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
|
|
.wrap { max-width: 1320px; margin: 0 auto; padding: 28px; }
|
|
.header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
|
|
.dot { width:12px; height:12px; border-radius:50%; background:#34d399; box-shadow:0 0 18px #34d399; animation:pulse 1.8s infinite; }
|
|
@keyframes pulse { 0%,100%{opacity:.6; transform:scale(.9)} 50%{opacity:1; transform:scale(1.15)} }
|
|
h1 { font-size: 24px; margin:0; letter-spacing:-.02em; }
|
|
.sub { color:var(--muted); margin:4px 0 22px; font-size:13px; }
|
|
.card { border:1px solid #1e293b; border-radius:16px; background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(2,6,23,.9)); padding:18px; box-shadow:0 24px 80px rgba(0,0,0,.35); }
|
|
svg { width:100%; height:auto; display:block; }
|
|
.cards { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:16px; }
|
|
.info { border:1px solid #1e293b; border-radius:12px; background:#0f172a; padding:14px; }
|
|
.info h3 { margin:0 0 8px; font-size:13px; }
|
|
.info ul { margin:0; padding-left:0; list-style:none; color:#cbd5e1; font-size:12px; line-height:1.6; }
|
|
.footer { color:#64748b; font-size:11px; margin-top:14px; }
|
|
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="header"><div class="dot"></div><div><h1>Will's Swarm Infrastructure</h1><div class="sub">Atlas/Hermes gateway + n8n automation + agentmon monitoring + local AI/search/voice services</div></div></div>
|
|
<div class="card">
|
|
<svg viewBox="0 0 1280 900" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Swarm infrastructure architecture diagram">
|
|
<defs>
|
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/></pattern>
|
|
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" fill="#38bdf8" /></marker>
|
|
<marker id="arrowGreen" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" fill="#34d399" /></marker>
|
|
<marker id="arrowOrange" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" fill="#fb923c" /></marker>
|
|
<marker id="arrowRose" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" fill="#fb7185" /></marker>
|
|
<filter id="glow"><feGaussianBlur stdDeviation="2.5" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
|
<style>
|
|
.title{font:700 13px monospace; fill:#e2e8f0}.label{font:11px monospace; fill:#cbd5e1}.tiny{font:9px monospace; fill:#94a3b8}.port{font:8px monospace; fill:#64748b}
|
|
.edge{fill:none; stroke:#38bdf8; stroke-width:1.8; marker-end:url(#arrow); opacity:.8}.edgeG{fill:none; stroke:#34d399; stroke-width:1.8; marker-end:url(#arrowGreen); opacity:.85}.edgeO{fill:none; stroke:#fb923c; stroke-width:1.8; marker-end:url(#arrowOrange); opacity:.85}.edgeR{fill:none; stroke:#fb7185; stroke-width:1.8; stroke-dasharray:5,4; marker-end:url(#arrowRose); opacity:.85}
|
|
</style>
|
|
</defs>
|
|
<rect width="1280" height="900" fill="#020617"/><rect width="1280" height="900" fill="url(#grid)" opacity="0.7"/>
|
|
|
|
<!-- arrows behind nodes -->
|
|
<path class="edge" d="M140 120 C210 120 210 205 280 205"/>
|
|
<path class="edge" d="M140 190 C210 190 210 235 280 235"/>
|
|
<path class="edge" d="M140 260 C210 260 210 265 280 265"/>
|
|
<path class="edgeG" d="M470 240 C545 240 545 320 620 320"/>
|
|
<path class="edgeG" d="M470 240 C545 240 545 455 620 455"/>
|
|
<path class="edgeO" d="M820 320 C890 320 890 210 965 210"/>
|
|
<path class="edgeO" d="M820 320 C890 320 890 315 965 315"/>
|
|
<path class="edgeO" d="M820 320 C890 320 890 420 965 420"/>
|
|
<path class="edgeR" d="M820 455 C890 455 890 595 965 595"/>
|
|
<path class="edgeR" d="M820 455 C890 455 890 705 965 705"/>
|
|
<path class="edgeG" d="M820 455 C890 455 890 790 965 790"/>
|
|
<path class="edge" d="M815 635 C900 635 900 650 965 650"/>
|
|
<path class="edge" d="M815 695 C900 695 900 735 965 735"/>
|
|
<path class="edgeG" d="M625 635 C555 635 555 720 470 720"/>
|
|
<path class="edge" d="M470 720 C545 720 545 565 620 565"/>
|
|
|
|
<!-- boundaries -->
|
|
<rect x="250" y="80" width="250" height="260" rx="14" fill="none" stroke="#fbbf24" stroke-width="1.4" stroke-dasharray="8,5" opacity=".75"/>
|
|
<text x="265" y="103" class="tiny" fill="#fbbf24">Hermes gateway layer</text>
|
|
<rect x="590" y="105" width="260" height="655" rx="14" fill="none" stroke="#fbbf24" stroke-width="1.4" stroke-dasharray="8,5" opacity=".75"/>
|
|
<text x="605" y="128" class="tiny" fill="#fbbf24">n8n + agentmon observability</text>
|
|
<rect x="935" y="95" width="280" height="760" rx="14" fill="none" stroke="#fbbf24" stroke-width="1.4" stroke-dasharray="8,5" opacity=".75"/>
|
|
<text x="950" y="118" class="tiny" fill="#fbbf24">local swarm services</text>
|
|
|
|
<!-- external channels -->
|
|
<g><rect x="30" y="90" width="110" height="58" rx="8" fill="#0f172a"/><rect x="30" y="90" width="110" height="58" rx="8" fill="rgba(30,41,59,.5)" stroke="#94a3b8" stroke-width="1.5"/><text x="50" y="116" class="title">Telegram</text><text x="52" y="134" class="tiny">DM/groups</text></g>
|
|
<g><rect x="30" y="160" width="110" height="58" rx="8" fill="#0f172a"/><rect x="30" y="160" width="110" height="58" rx="8" fill="rgba(30,41,59,.5)" stroke="#94a3b8" stroke-width="1.5"/><text x="52" y="186" class="title">Discord</text><text x="48" y="204" class="tiny">#ops-alerts</text></g>
|
|
<g><rect x="30" y="230" width="110" height="58" rx="8" fill="#0f172a"/><rect x="30" y="230" width="110" height="58" rx="8" fill="rgba(30,41,59,.5)" stroke="#94a3b8" stroke-width="1.5"/><text x="65" y="256" class="title">Email</text><text x="48" y="274" class="tiny">Gmail IMAP</text></g>
|
|
|
|
<!-- Hermes -->
|
|
<g filter="url(#glow)"><rect x="280" y="180" width="190" height="100" rx="10" fill="#0f172a"/><rect x="280" y="180" width="190" height="100" rx="10" fill="rgba(8,51,68,.4)" stroke="#22d3ee" stroke-width="1.8"/><text x="325" y="213" class="title">Atlas / Hermes</text><text x="310" y="235" class="label">default profile gateway</text><text x="318" y="258" class="tiny">tools • memory • specialists</text></g>
|
|
|
|
<!-- n8n and agentmon -->
|
|
<g><rect x="620" y="280" width="200" height="80" rx="10" fill="#0f172a"/><rect x="620" y="280" width="200" height="80" rx="10" fill="rgba(6,78,59,.4)" stroke="#34d399" stroke-width="1.8"/><text x="705" y="312" text-anchor="middle" class="title">n8n-agent</text><text x="705" y="333" text-anchor="middle" class="tiny">automation workflows</text><text x="705" y="350" text-anchor="middle" class="port">:18808 host / :5678 container</text></g>
|
|
<g><rect x="620" y="415" width="200" height="85" rx="10" fill="#0f172a"/><rect x="620" y="415" width="200" height="85" rx="10" fill="rgba(6,78,59,.4)" stroke="#34d399" stroke-width="1.8"/><text x="720" y="445" text-anchor="middle" class="title">agentmon-query</text><text x="720" y="466" text-anchor="middle" class="tiny">aggregate snapshots/API</text><text x="720" y="484" text-anchor="middle" class="port">:8081 /v1/events</text></g>
|
|
<g><rect x="620" y="530" width="200" height="210" rx="10" fill="#0f172a"/><rect x="620" y="530" width="200" height="210" rx="10" fill="rgba(251,146,60,.14)" stroke="#fb923c" stroke-width="1.8"/><text x="720" y="560" text-anchor="middle" class="title">agentmon pipeline</text><text x="720" y="590" text-anchor="middle" class="tiny">ingest :8080</text><text x="720" y="615" text-anchor="middle" class="tiny">NATS JetStream</text><text x="720" y="640" text-anchor="middle" class="tiny">event processor</text><text x="720" y="665" text-anchor="middle" class="tiny">Postgres DB</text><text x="720" y="690" text-anchor="middle" class="tiny">web UI :8082</text><text x="720" y="720" text-anchor="middle" class="port">swarm.snapshot + openclaw.snapshot</text></g>
|
|
|
|
<!-- Local services -->
|
|
<g><rect x="965" y="165" width="210" height="80" rx="9" fill="#0f172a"/><rect x="965" y="165" width="210" height="80" rx="9" fill="rgba(6,78,59,.4)" stroke="#34d399" stroke-width="1.6"/><text x="1070" y="195" text-anchor="middle" class="title">LiteLLM</text><text x="1070" y="216" text-anchor="middle" class="tiny">LLM router + DB</text><text x="1070" y="234" text-anchor="middle" class="port">:18804</text></g>
|
|
<g><rect x="965" y="275" width="210" height="80" rx="9" fill="#0f172a"/><rect x="965" y="275" width="210" height="80" rx="9" fill="rgba(8,51,68,.4)" stroke="#22d3ee" stroke-width="1.6"/><text x="1070" y="305" text-anchor="middle" class="title">Search</text><text x="1070" y="326" text-anchor="middle" class="tiny">SearXNG + Brave MCP</text><text x="1070" y="344" text-anchor="middle" class="port">:18803 / :18802</text></g>
|
|
<g><rect x="965" y="385" width="210" height="80" rx="9" fill="#0f172a"/><rect x="965" y="385" width="210" height="80" rx="9" fill="rgba(8,51,68,.4)" stroke="#22d3ee" stroke-width="1.6"/><text x="1070" y="415" text-anchor="middle" class="title">Voice</text><text x="1070" y="436" text-anchor="middle" class="tiny">Kokoro + Whisper</text><text x="1070" y="454" text-anchor="middle" class="port">:18805 / :18816</text></g>
|
|
<g><rect x="965" y="555" width="210" height="80" rx="9" fill="#0f172a"/><rect x="965" y="555" width="210" height="80" rx="9" fill="rgba(76,29,149,.4)" stroke="#a78bfa" stroke-width="1.6"/><text x="1070" y="585" text-anchor="middle" class="title">Docker services</text><text x="1070" y="606" text-anchor="middle" class="tiny">agentmon.monitor=true</text><text x="1070" y="624" text-anchor="middle" class="port">swarm/service snapshots</text></g>
|
|
<g><rect x="965" y="665" width="210" height="80" rx="9" fill="#0f172a"/><rect x="965" y="665" width="210" height="80" rx="9" fill="rgba(120,53,15,.3)" stroke="#fbbf24" stroke-width="1.6"/><text x="1070" y="695" text-anchor="middle" class="title">OpenClaw VMs</text><text x="1070" y="716" text-anchor="middle" class="tiny">currently dormant</text><text x="1070" y="734" text-anchor="middle" class="port">openclaw.snapshot</text></g>
|
|
<g><rect x="965" y="775" width="210" height="60" rx="9" fill="#0f172a"/><rect x="965" y="775" width="210" height="60" rx="9" fill="rgba(76,29,149,.4)" stroke="#a78bfa" stroke-width="1.6"/><text x="1070" y="802" text-anchor="middle" class="title">Obsidian / RAG</text><text x="1070" y="822" text-anchor="middle" class="port">:27123/:27124 + ChromaDB</text></g>
|
|
|
|
<!-- host local ai box -->
|
|
<g><rect x="280" y="675" width="190" height="100" rx="10" fill="#0f172a"/><rect x="280" y="675" width="190" height="100" rx="10" fill="rgba(76,29,149,.4)" stroke="#a78bfa" stroke-width="1.8"/><text x="375" y="706" text-anchor="middle" class="title">host local AI</text><text x="375" y="730" text-anchor="middle" class="tiny">llama.cpp :18806</text><text x="375" y="752" text-anchor="middle" class="tiny">Ollama embed :18807</text></g>
|
|
|
|
<!-- legend -->
|
|
<g transform="translate(40,820)">
|
|
<text class="tiny" fill="#94a3b8">Legend</text>
|
|
<rect x="0" y="16" width="14" height="10" fill="rgba(8,51,68,.4)" stroke="#22d3ee"/><text x="22" y="25" class="tiny">Gateway/Search/Voice</text>
|
|
<rect x="180" y="16" width="14" height="10" fill="rgba(6,78,59,.4)" stroke="#34d399"/><text x="202" y="25" class="tiny">Automation/API</text>
|
|
<rect x="320" y="16" width="14" height="10" fill="rgba(76,29,149,.4)" stroke="#a78bfa"/><text x="342" y="25" class="tiny">Data/AI stores</text>
|
|
<rect x="475" y="16" width="14" height="10" fill="rgba(251,146,60,.14)" stroke="#fb923c"/><text x="497" y="25" class="tiny">Event bus/pipeline</text>
|
|
<line x1="650" y1="22" x2="700" y2="22" class="edgeR"/><text x="710" y="25" class="tiny">Monitoring flows</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="cards">
|
|
<div class="info"><h3>Monitoring model</h3><ul><li>• n8n direct probes critical ports</li><li>• agentmon aggregates Docker/OpenClaw snapshots</li><li>• n8n polls agentmon for stale/degraded state</li></ul></div>
|
|
<div class="info"><h3>Operational endpoints</h3><ul><li>• n8n: 127.0.0.1:18808</li><li>• agentmon query/UI: 8081 / 8082</li><li>• local LLM/embed: 18806 / 18807</li></ul></div>
|
|
<div class="info"><h3>Source paths</h3><ul><li>• Swarm repo: ~/lab/swarm</li><li>• Agentmon repo: ~/lab/agentmon</li><li>• Workflows: swarm-common/n8n-workflows</li></ul></div>
|
|
</div>
|
|
<div class="footer">Generated as repo documentation. Open locally in a browser; no JavaScript, all SVG inline.</div>
|
|
</div>
|
|
</body>
|
|
</html>
|