103 lines
5.2 KiB
HTML
103 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@page { size: 7.5in 9in; margin: 0; }
|
|
body { margin: 0; padding: 40px; font-family: 'Helvetica Neue', Arial, sans-serif; background: #f8fafc; }
|
|
.container { background: white; border-radius: 16px; padding: 40px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
|
.title { text-align: center; font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 4px; letter-spacing: -0.3px; }
|
|
.subtitle { text-align: center; font-size: 12px; color: #64748b; margin-bottom: 30px; }
|
|
|
|
.agents-row { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; }
|
|
.agent-card { background: #1e40af; color: white; border-radius: 10px; padding: 14px 20px; text-align: center; width: 180px; }
|
|
.agent-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
|
|
.agent-role { font-size: 10px; opacity: 0.85; }
|
|
|
|
.connector { text-align: center; color: #94a3b8; font-size: 20px; margin: 6px 0; }
|
|
|
|
.layer { background: #0f172a; border-radius: 10px; padding: 16px 24px; margin: 0 40px 16px; }
|
|
.layer-title { color: #3b82f6; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
|
|
.layer-desc { color: #94a3b8; font-size: 11px; }
|
|
|
|
.sub-layer { background: #1e293b; border-radius: 10px; padding: 14px 24px; margin: 0 40px 16px; display: flex; align-items: center; justify-content: space-between; }
|
|
.sub-label { color: #3b82f6; font-size: 12px; font-weight: 600; }
|
|
.sub-icons { display: flex; gap: 8px; }
|
|
.sub-icon { background: #334155; color: #94a3b8; border-radius: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
|
|
|
|
.mcp-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 40px; justify-content: center; }
|
|
.mcp-card { background: white; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; text-align: center; width: 130px; }
|
|
.mcp-name { font-size: 10px; font-weight: 600; color: #0f172a; }
|
|
.mcp-tools { font-size: 9px; color: #3b82f6; margin-top: 2px; }
|
|
|
|
.mcp-section { background: #f1f5f9; border-radius: 10px; padding: 16px; margin: 0 40px; }
|
|
.mcp-section-title { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; text-align: center; margin-bottom: 12px; }
|
|
|
|
.total { text-align: center; margin-top: 12px; font-size: 11px; color: #64748b; font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="title">SOLVR WORK OS</div>
|
|
<div class="subtitle">AI-Powered Service Platform Architecture</div>
|
|
|
|
<div class="agents-row">
|
|
<div class="agent-card">
|
|
<div class="agent-name">DOT</div>
|
|
<div class="agent-role">Zack's Assistant / Chief of Staff</div>
|
|
</div>
|
|
<div class="agent-card">
|
|
<div class="agent-name">ROSE</div>
|
|
<div class="agent-role">Allyson's Assistant / Growth Engine</div>
|
|
</div>
|
|
<div class="agent-card">
|
|
<div class="agent-name">MILES</div>
|
|
<div class="agent-role">Operations Manager / Orchestrator</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector">▼ ▼ ▼</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-title">Shared Memory & Coordination Layer</div>
|
|
<div class="layer-desc">SQLite — Company knowledge, client context, agent messaging, task queue, privacy scoping</div>
|
|
</div>
|
|
|
|
<div class="connector">▼</div>
|
|
|
|
<div class="sub-layer">
|
|
<div>
|
|
<div class="sub-label">Sub-Agent Layer</div>
|
|
<div style="color: #64748b; font-size: 10px;">Spawned on demand by Miles for bulk work</div>
|
|
</div>
|
|
<div class="sub-icons">
|
|
<div class="sub-icon">S1</div>
|
|
<div class="sub-icon">S2</div>
|
|
<div class="sub-icon">S3</div>
|
|
<div class="sub-icon">S4</div>
|
|
<div class="sub-icon">...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connector">▼</div>
|
|
|
|
<div class="mcp-section">
|
|
<div class="mcp-section-title">MCP Servers (via OpenClaw) — 235+ Tools</div>
|
|
<div class="mcp-grid">
|
|
<div class="mcp-card"><div class="mcp-name">GoHighLevel</div><div class="mcp-tools">65+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">Google Workspace</div><div class="mcp-tools">40+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">Notion</div><div class="mcp-tools">25+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">LinkedIn</div><div class="mcp-tools">15+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">Google Ads</div><div class="mcp-tools">20+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">Meta Ads</div><div class="mcp-tools">20+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">GA4 Analytics</div><div class="mcp-tools">15+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">Whisper Transcribe</div><div class="mcp-tools">10+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">Design Generator</div><div class="mcp-tools">15+ tools</div></div>
|
|
<div class="mcp-card"><div class="mcp-name">Telegram / Comms</div><div class="mcp-tools">10+ tools</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="total">10 MCP Servers • 235+ Tools • Full Source Code • You Own Everything</div>
|
|
</div>
|
|
</body>
|
|
</html>
|