sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
dev_arc_aws/docs/aws-architecture/system-design.html
Samuel James b9f6d4f61e
All checks were successful
CI / validate (pull_request) Successful in 57s
Details
Add system design, CloudFormation, theming assets, cleanup 
- System design doc (self-hosted + module model, hybrid architecture)
- HTML visualization for design review
- Architecture diagram (Python diagrams library, real AWS icons)
- CloudFormation template (t4g.small EC2 + Docker Compose)
- Theme reference images (midnight blue, forest, light)
- Updated README for new product direction
- MCP config (context7 only, removed aws-docs)
- Backend type deps fixed for Windows dev

Co-authored-by: Samuel James <ssamjame@amazon.com>
Co-authored-by: Kiro <noreply@kiro.dev>
2026-06-24 09:54:37 -04:00

419 lines
19 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArchNest — Product Design Review</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #0D0E10; color: #E8E6E0; line-height: 1.6; }
.container { max-width: 1400px; margin: 0 auto; padding: 40px 60px 120px; }
h1 { font-size: 32px; color: #C8A434; font-weight: 700; margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; }
h2 { font-size: 22px; color: #C8A434; font-weight: 600; margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 1px solid #1E2025; }
h3 { font-size: 16px; color: #E8E6E0; font-weight: 600; margin: 24px 0 12px; }
p { margin: 12px 0; color: #E8E6E0; font-size: 14px; }
.subtitle { color: #7A7D85; font-size: 14px; margin-bottom: 32px; }
.card { background: #141518; border: 1px solid #1E2025; border-radius: 12px; padding: 24px; margin: 16px 0; }
.card:hover { border-color: #C8A434; transition: border-color 0.2s ease; }
.card-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #7A7D85; margin-bottom: 12px; font-weight: 500; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
th { background: #141518; color: #C8A434; text-align: left; padding: 12px 16px; border: 1px solid #1E2025; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
td { padding: 10px 16px; border: 1px solid #1E2025; color: #E8E6E0; }
tr:hover td { background: #1a1b1f; }
code { background: #1a1b1f; color: #C8A434; padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'JetBrains Mono', monospace; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-green { background: rgba(46,204,113,0.15); color: #2ECC71; }
.badge-gold { background: rgba(200,164,52,0.15); color: #C8A434; }
.badge-blue { background: rgba(59,130,246,0.15); color: #3B82F6; }
.mermaid { background: #141518; border-radius: 12px; padding: 24px; margin: 24px 0; border: 1px solid #1E2025; }
.feature-list { list-style: none; padding: 0; }
.feature-list li { padding: 8px 0; border-bottom: 1px solid #1E2025; font-size: 14px; }
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before { content: "\2192"; color: #C8A434; margin-right: 10px; }
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .section-grid { grid-template-columns: 1fr; } }
.cost-total { font-size: 28px; font-weight: 700; color: #C8A434; }
.module-price { font-size: 20px; font-weight: 700; color: #2ECC71; }
.theme-swatch { display: inline-block; width: 24px; height: 24px; border-radius: 6px; margin-right: 6px; vertical-align: middle; border: 1px solid #1E2025; }
.approval-bar { position: sticky; bottom: 0; background: #141518; border-top: 1px solid #C8A434; padding: 16px 60px; display: flex; justify-content: space-between; align-items: center; z-index: 100; }
.btn { padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.btn-approve { background: #C8A434; color: #0D0E10; }
.btn-approve:hover { background: #dab944; }
.btn-reject { background: transparent; color: #E74C3C; border: 1px solid #E74C3C; }
.btn-reject:hover { background: rgba(231,76,60,0.1); }
.hero { background: linear-gradient(135deg, #141518 0%, #0D0E10 50%, #1a1510 100%); border-radius: 16px; padding: 48px; margin-bottom: 32px; border: 1px solid #1E2025; }
.lock-icon { color: #7A7D85; margin-right: 6px; }
.free-badge { background: rgba(46,204,113,0.15); color: #2ECC71; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; margin-left: 8px; }
.paid-badge { background: rgba(200,164,52,0.15); color: #C8A434; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; margin-left: 8px; }
</style>
</head>
<body>
<div class="container">
<div class="hero">
<h1>ArchNest</h1>
<p class="subtitle">Self-Hosted Product Design — Open Core + Paid Modules</p>
<p>Free self-hosted ops dashboard. Unlock features with $5 one-time module purchases. Own it forever. No subscriptions.</p>
<div style="margin-top: 16px;">
<span class="badge badge-green">Free Core</span>
<span class="badge badge-gold">$5/Module</span>
<span class="badge badge-blue">Self-Hosted</span>
</div>
</div>
<h2>Business Model</h2>
<div class="section-grid">
<div class="card">
<div class="card-title">How It Works</div>
<ul class="feature-list">
<li>Free core — genuinely useful self-hosted dashboard</li>
<li>$5 one-time purchase per module (30 modules available)</li>
<li>Bundles at discount ($10-$99)</li>
<li>Free core updates forever</li>
<li>Customer owns it — no vendor lock-in</li>
</ul>
</div>
<div class="card">
<div class="card-title">Your Economics</div>
<ul class="feature-list">
<li>Infrastructure cost: ~$1/month (license server)</li>
<li>Profit margin: 95%+ per sale</li>
<li>Zero churn (one-time, not subscription)</li>
<li>Zero hosting cost per customer</li>
<li>Net per $5 module (after Stripe): $4.55</li>
</ul>
</div>
</div>
<h2>Free Core</h2>
<div class="card">
<div class="card-title">Ships Free — No Purchase Required</div>
<table>
<tr><th>Feature</th><th>Free Limit</th></tr>
<tr><td>Dashboard (Glance)</td><td>Full</td></tr>
<tr><td>Infrastructure Overview</td><td>Full</td></tr>
<tr><td>SSH Terminal</td><td>1 tab, 1 pane</td></tr>
<tr><td>SSH Tunnels</td><td>Manual start only</td></tr>
<tr><td>SFTP File Manager</td><td>Full</td></tr>
<tr><td>Docker Management</td><td>TCP API only, 1 source</td></tr>
<tr><td>Host Metrics</td><td>Basic (CPU/memory/disk)</td></tr>
<tr><td>Bookmarks</td><td>10 max</td></tr>
<tr><td>SSH Hosts</td><td>3 max</td></tr>
<tr><td>Users</td><td>1 (admin only)</td></tr>
<tr><td>Theme</td><td>ArchNest Dark only</td></tr>
<tr><td>Help Page</td><td>Full</td></tr>
</table>
</div>
<h2>Paid Modules — $5 Each</h2>
<h3>SSH Modules (8)</h3>
<div class="grid">
<div class="card">
<div class="card-title">1. Multi-Pane Terminal <span class="paid-badge">$5</span></div>
<p>Split panes (2/4), multiple tabs</p>
</div>
<div class="card">
<div class="card-title">2. tmux Integration <span class="paid-badge">$5</span></div>
<p>Attach to existing tmux sessions</p>
</div>
<div class="card">
<div class="card-title">3. Jump-Host Chaining <span class="paid-badge">$5</span></div>
<p>Connect through intermediary hosts</p>
</div>
<div class="card">
<div class="card-title">4. Certificate Auth <span class="paid-badge">$5</span></div>
<p>OPKSSH certificate-based SSH auth</p>
</div>
<div class="card">
<div class="card-title">5. Tunnel Auto-Start <span class="paid-badge">$5</span></div>
<p>Tunnels start automatically on boot</p>
</div>
<div class="card">
<div class="card-title">6. Persistent Sessions <span class="paid-badge">$5</span></div>
<p>Terminal sessions survive navigation</p>
</div>
<div class="card">
<div class="card-title">7. Session Recording <span class="paid-badge">$5</span></div>
<p>Record terminal sessions to disk</p>
</div>
<div class="card">
<div class="card-title">8. Host-to-Host Transfer <span class="paid-badge">$5</span></div>
<p>Copy/move files between SSH hosts</p>
</div>
</div>
<h3>Docker Modules (4)</h3>
<div class="grid">
<div class="card">
<div class="card-title">9. Docker over SSH <span class="paid-badge">$5</span></div>
<p>Manage containers via CLI over SSH</p>
</div>
<div class="card">
<div class="card-title">10. Docker Push Agent <span class="paid-badge">$5</span></div>
<p>Outbound-only monitoring agent</p>
</div>
<div class="card">
<div class="card-title">11. Container Exec <span class="paid-badge">$5</span></div>
<p>Interactive shell into containers</p>
</div>
<div class="card">
<div class="card-title">12. Container Details <span class="paid-badge">$5</span></div>
<p>Full inspect: ports, networks, env, mounts</p>
</div>
</div>
<h3>Integration Modules (6)</h3>
<div class="grid">
<div class="card">
<div class="card-title">13. Unlimited SSH Hosts <span class="paid-badge">$5</span></div>
<p>Remove 3-host cap</p>
</div>
<div class="card">
<div class="card-title">14. Proxmox <span class="paid-badge">$5</span></div>
<p>VM/LXC management</p>
</div>
<div class="card">
<div class="card-title">15. AWS <span class="paid-badge">$5</span></div>
<p>EC2 + STS resource inventory</p>
</div>
<div class="card">
<div class="card-title">16. Cloudflare <span class="paid-badge">$5</span></div>
<p>DNS zones, resource listing</p>
</div>
<div class="card">
<div class="card-title">17. NetBird <span class="paid-badge">$5</span></div>
<p>Mesh peers, connectivity</p>
</div>
<div class="card">
<div class="card-title">18. Uptime Kuma <span class="paid-badge">$5</span></div>
<p>Monitor status/health</p>
</div>
</div>
<h3>Desktop & Theme Modules (6)</h3>
<div class="grid">
<div class="card">
<div class="card-title">19. Remote Desktop: RDP <span class="paid-badge">$5</span></div>
<p>Windows RDP via Guacamole</p>
</div>
<div class="card">
<div class="card-title">20. Remote Desktop: VNC <span class="paid-badge">$5</span></div>
<p>VNC sessions via Guacamole</p>
</div>
<div class="card">
<div class="card-title">21. Remote Desktop: Telnet <span class="paid-badge">$5</span></div>
<p>Telnet sessions via Guacamole</p>
</div>
<div class="card">
<div class="card-title">22. Theme: Midnight Blue <span class="paid-badge">$5</span></div>
<div style="margin:4px 0;"><span class="theme-swatch" style="background:#0B0F1A;"></span><span class="theme-swatch" style="background:#3B82F6;"></span></div>
</div>
<div class="card">
<div class="card-title">23. Theme: Forest <span class="paid-badge">$5</span></div>
<div style="margin:4px 0;"><span class="theme-swatch" style="background:#0A120E;"></span><span class="theme-swatch" style="background:#10B981;"></span></div>
</div>
<div class="card">
<div class="card-title">24. Theme: Light <span class="paid-badge">$5</span></div>
<div style="margin:4px 0;"><span class="theme-swatch" style="background:#F5F5F5;"></span><span class="theme-swatch" style="background:#C8A434;"></span></div>
</div>
</div>
<h3>Platform Modules (6)</h3>
<div class="grid">
<div class="card">
<div class="card-title">25. Multi-User <span class="paid-badge">$5</span></div>
<p>Admin/member roles, up to 10 seats</p>
</div>
<div class="card">
<div class="card-title">26. Advanced Metrics <span class="paid-badge">$5</span></div>
<p>Network, processes, ports, firewall, login stats</p>
</div>
<div class="card">
<div class="card-title">27. Data Export/Import <span class="paid-badge">$5</span></div>
<p>Backup/restore full config as JSON</p>
</div>
<div class="card">
<div class="card-title">28. Audit Log <span class="paid-badge">$5</span></div>
<p>Full activity log with export</p>
</div>
<div class="card">
<div class="card-title">29. Unlimited Bookmarks <span class="paid-badge">$5</span></div>
<p>Remove 10-bookmark cap</p>
</div>
<div class="card">
<div class="card-title">30. Global Search <span class="paid-badge">$5</span></div>
<p>Search pages, integrations, bookmarks</p>
</div>
</div>
<h2>Bundles</h2>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
<div class="card" style="text-align:center;">
<div class="card-title">SSH Pro</div>
<p class="module-price">$25</p>
<p style="color:#7A7D85;font-size:12px;">All 8 SSH modules (save $15)</p>
</div>
<div class="card" style="text-align:center;">
<div class="card-title">Docker Pro</div>
<p class="module-price">$15</p>
<p style="color:#7A7D85;font-size:12px;">All 4 Docker modules (save $5)</p>
</div>
<div class="card" style="text-align:center;">
<div class="card-title">Remote Desktop</div>
<p class="module-price">$10</p>
<p style="color:#7A7D85;font-size:12px;">RDP + VNC + Telnet (save $5)</p>
</div>
<div class="card" style="text-align:center;">
<div class="card-title">All Themes</div>
<p class="module-price">$10</p>
<p style="color:#7A7D85;font-size:12px;">3 extra themes (save $5)</p>
</div>
<div class="card" style="text-align:center;border-color:#C8A434;">
<div class="card-title" style="color:#C8A434;">Everything</div>
<p class="cost-total">$99</p>
<p style="color:#7A7D85;font-size:12px;">All 30 modules forever (save $51)</p>
</div>
</div>
<h2>License System</h2>
<div class="mermaid">
graph LR
BOOT[ArchNest Boot] --> CHECK[License Check<br/>HTTPS to license server]
CHECK --> RESP[Signed Response<br/>modules + valid_until]
RESP --> VALIDATE[Validate Ed25519<br/>signature locally]
VALIDATE --> UNLOCK[Unlock purchased<br/>modules]
UNLOCK --> WEEKLY[Re-check weekly]
WEEKLY --> CHECK
</div>
<div class="section-grid">
<div class="card">
<div class="card-title">How It Works</div>
<ul class="feature-list">
<li>Phone-home on boot + once weekly</li>
<li>Returns signed JSON: modules[] + valid_until (7 days)</li>
<li>Ed25519 signature validated locally (public key in code)</li>
<li>Works offline for 7 days between checks</li>
<li>After 7 days offline → falls back to free core</li>
</ul>
</div>
<div class="card">
<div class="card-title">License Server Stack</div>
<ul class="feature-list">
<li>Cloudflare Workers (free tier: 100K req/day)</li>
<li>Cloudflare D1 database (free tier: 5GB)</li>
<li>Stripe for payments</li>
<li>Total cost: ~$1/month + Stripe fees</li>
<li>Net per module sale: $4.55 (after Stripe)</li>
</ul>
</div>
</div>
<h2>Purchase Flow</h2>
<div class="mermaid">
graph LR
BROWSE[Browse Module Store<br/>in Settings] --> BUY[Click Buy → $5]
BUY --> STRIPE[Stripe Checkout]
STRIPE --> WEBHOOK[Webhook → License Server]
WEBHOOK --> RECORD[Record purchase<br/>in D1 database]
RECORD --> POLL[Next license check<br/>returns new module]
POLL --> ACTIVE[Feature unlocks]
</div>
<h2>Revenue Projections</h2>
<div class="card">
<table>
<tr><th>Stage</th><th>Installs/mo</th><th>Avg Modules Bought</th><th>Revenue/mo</th></tr>
<tr><td>Early (month 1-3)</td><td>50</td><td>3 modules ($15)</td><td>$750</td></tr>
<tr><td>Growth (month 4-6)</td><td>200</td><td>4 modules ($20)</td><td>$4,000</td></tr>
<tr><td>Steady (month 7-12)</td><td>500</td><td>5 modules ($25)</td><td>$12,500</td></tr>
<tr><td>Mature (year 2)</td><td>1,000</td><td>$30 avg (bundles)</td><td>$30,000</td></tr>
</table>
<p style="margin-top:16px;color:#7A7D85;">Infrastructure cost stays at ~$1/month regardless of scale. 95%+ margin at all stages.</p>
</div>
<h2>What Changes From Current Code</h2>
<div class="card">
<table>
<tr><th>Area</th><th>Current</th><th>New</th></tr>
<tr><td>Database</td><td>SQLite</td><td>SQLite (stays)</td></tr>
<tr><td>Auth</td><td>Local JWT</td><td>Local JWT (stays)</td></tr>
<tr><td>Multi-tenant</td><td>N/A</td><td>Not needed (single-tenant per install)</td></tr>
<tr><td>License</td><td>None</td><td>Weekly phone-home + signature validation</td></tr>
<tr><td>Module gating</td><td>None</td><td>Fastify middleware + frontend lock UI</td></tr>
<tr><td>Settings</td><td>Current tabs</td><td>+ "Module Store" tab</td></tr>
<tr><td>Stripe</td><td>None</td><td>Checkout for purchases</td></tr>
</table>
<p style="margin-top:16px;"><strong>Key insight:</strong> Almost no infrastructure changes. You're adding a license layer and a store UI — not rewriting anything.</p>
</div>
<h2>Implementation Phases</h2>
<div class="grid">
<div class="card">
<div class="card-title">Phase 1 — License Infrastructure</div>
<ul class="feature-list">
<li>Build license server (CF Workers + D1)</li>
<li>Add license check to backend</li>
<li>Add module enforcement middleware</li>
<li>Add "Module Store" tab in Settings</li>
</ul>
</div>
<div class="card">
<div class="card-title">Phase 2 — Module Gating</div>
<ul class="feature-list">
<li>Define module boundaries in routes</li>
<li>Add lock UI to gated features</li>
<li>Free tier caps (3 hosts, 1 pane, 10 bookmarks)</li>
</ul>
</div>
<div class="card">
<div class="card-title">Phase 3 — Purchase Flow</div>
<ul class="feature-list">
<li>Stripe Checkout integration</li>
<li>Module activation on webhook</li>
<li>Bundle discounts</li>
<li>Purchase history in Settings</li>
</ul>
</div>
<div class="card">
<div class="card-title">Phase 4 — Distribution</div>
<ul class="feature-list">
<li>Public Docker image</li>
<li>Landing page + module catalog</li>
<li>Installation docs</li>
<li>Demo instance</li>
</ul>
</div>
</div>
<h2>Open Decisions</h2>
<table>
<tr><th>#</th><th>Question</th><th>Options</th></tr>
<tr><td>1</td><td>Source code visibility</td><td>Open-source (MIT) vs source-available (BSL) vs proprietary</td></tr>
<tr><td>2</td><td>Distribution</td><td>Docker Hub vs GitHub Container Registry</td></tr>
<tr><td>3</td><td>Landing page</td><td>Cloudflare Pages vs separate repo</td></tr>
<tr><td>4</td><td>Refund policy</td><td>30-day vs no refunds ($5 is low)</td></tr>
<tr><td>5</td><td>Module store UX</td><td>In-app tab vs external website</td></tr>
<tr><td>6</td><td>License transfer</td><td>Unlimited vs 1/year</td></tr>
</table>
</div>
<div class="approval-bar">
<div>
<strong style="color: #C8A434;">Product Design Review</strong>
<span style="color: #7A7D85; margin-left: 12px;">ArchNest — Self-Hosted + $5 Modules</span>
</div>
<div>
<button class="btn btn-reject" onclick="alert('Tell Kiro what to change.')">Request Changes</button>
<button class="btn btn-approve" style="margin-left: 12px;" onclick="alert('Approved! Ready to build the license system.')">Approve Design</button>
</div>
</div>
<script>
mermaid.initialize({ theme: 'dark', themeVariables: { primaryColor: '#C8A434', primaryTextColor: '#E8E6E0', primaryBorderColor: '#1E2025', lineColor: '#7A7D85', secondaryColor: '#141518', tertiaryColor: '#0D0E10', background: '#141518', mainBkg: '#141518', nodeBorder: '#C8A434' }});
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink