Skip to content

Instantly share code, notes, and snippets.

@drewstone

drewstone/diagram-1-isolation-vs-state.html

Created February 4, 2026 05:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save drewstone/cec6fbf6cf36dddd87f3c3f06e95b258 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save drewstone/cec6fbf6cf36dddd87f3c3f06e95b258 to your computer and use it in GitHub Desktop.
Download ZIP
Agent Sandbox Landscape - v12 (Fixed numbering, cleaner labels)
Raw
diagram-1-isolation-vs-state.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Sandbox Isolation & State Matrix</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(145deg, #0a0a12 0%, #0f0f1a 50%, #0a0a12 100%);
min-height: 100vh;
min-height: 100dvh;
padding: clamp(16px, 4vw, 40px);
color: #fff;
overflow-x: hidden;
}
.container {
max-width: 720px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: clamp(1.2rem, 5vw, 2rem);
font-weight: 800;
margin-bottom: 8px;
background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.03em;
}
.subtitle {
text-align: center;
font-size: clamp(0.75rem, 2.5vw, 0.95rem);
color: #64748b;
margin-bottom: clamp(24px, 6vw, 40px);
}
/* Matrix container */
.matrix-wrapper {
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: clamp(16px, 4vw, 24px);
padding: clamp(16px, 4vw, 28px);
overflow-x: auto;
}
.matrix {
display: grid;
grid-template-columns: auto repeat(3, 1fr);
gap: 3px;
min-width: 340px;
}
/* Column headers */
.col-header {
padding: clamp(12px, 3vw, 18px);
text-align: center;
font-size: clamp(0.6rem, 2vw, 0.8rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 10px 10px 0 0;
}
.col-header.isolate {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.08));
color: #fbbf24;
border-bottom: 2px solid rgba(245, 158, 11, 0.5);
}
.col-header.container {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.08));
color: #60a5fa;
border-bottom: 2px solid rgba(59, 130, 246, 0.5);
}
.col-header.microvm {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.08));
color: #34d399;
border-bottom: 2px solid rgba(16, 185, 129, 0.5);
}
.corner { background: transparent; }
/* Row headers */
.row-header {
padding: clamp(10px, 2.5vw, 16px) clamp(8px, 2vw, 14px);
font-size: clamp(0.58rem, 1.9vw, 0.75rem);
font-weight: 600;
color: #94a3b8;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
text-align: right;
background: rgba(255, 255, 255, 0.02);
border-radius: 10px 0 0 10px;
}
.row-header .icon {
font-size: clamp(0.8rem, 2.5vw, 1.1rem);
}
/* Matrix cells */
.cell {
background: rgba(255, 255, 255, 0.015);
padding: clamp(10px, 2.5vw, 16px);
min-height: clamp(60px, 15vw, 90px);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: clamp(6px, 1.5vw, 10px);
}
.cell.isolate-col { background: rgba(245, 158, 11, 0.04); }
.cell.container-col { background: rgba(59, 130, 246, 0.04); }
.cell.microvm-col { background: rgba(16, 185, 129, 0.04); }
/* Provider chips with logos */
.provider {
display: inline-flex;
align-items: center;
gap: clamp(4px, 1vw, 6px);
padding: clamp(5px, 1.2vw, 7px) clamp(10px, 2.5vw, 14px);
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(12px);
border-radius: 18px;
font-size: clamp(0.52rem, 1.7vw, 0.7rem);
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.12);
white-space: nowrap;
transition: all 0.2s ease;
}
.provider:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.provider img {
width: clamp(12px, 3vw, 16px);
height: clamp(12px, 3vw, 16px);
border-radius: 3px;
object-fit: contain;
}
.provider .price {
margin-left: 4px;
font-weight: 400;
color: #64748b;
font-size: clamp(0.48rem, 1.5vw, 0.62rem);
}
.provider.isolate { border-color: rgba(245, 158, 11, 0.35); }
.provider.container { border-color: rgba(59, 130, 246, 0.35); }
.provider.microvm { border-color: rgba(16, 185, 129, 0.35); }
/* Empty cell indicator */
.cell-empty {
color: #334155;
font-size: clamp(0.55rem, 1.6vw, 0.68rem);
font-style: italic;
}
/* Legend */
.legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(20px, 5vw, 32px);
margin-top: clamp(24px, 6vw, 36px);
padding: clamp(16px, 4vw, 24px);
background: rgba(255, 255, 255, 0.02);
border-radius: clamp(12px, 3vw, 16px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: clamp(0.58rem, 1.9vw, 0.72rem);
color: #94a3b8;
}
.legend-swatch {
width: clamp(28px, 7vw, 40px);
height: clamp(12px, 3vw, 16px);
border-radius: 6px;
}
.legend-swatch.isolate {
background: linear-gradient(90deg, rgba(245, 158, 11, 0.5), rgba(245, 158, 11, 0.15));
border: 1px solid rgba(245, 158, 11, 0.6);
}
.legend-swatch.container {
background: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.15));
border: 1px solid rgba(59, 130, 246, 0.6);
}
.legend-swatch.microvm {
background: linear-gradient(90deg, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.15));
border: 1px solid rgba(16, 185, 129, 0.6);
}
/* Insights */
.insights {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(10px, 2.5vw, 14px);
margin-top: clamp(20px, 5vw, 28px);
}
.insight {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: clamp(10px, 2.5vw, 14px);
padding: clamp(14px, 3.5vw, 20px);
text-align: center;
}
.insight-icon {
font-size: clamp(1.4rem, 5vw, 1.8rem);
margin-bottom: 8px;
}
.insight-label {
font-size: clamp(0.55rem, 1.7vw, 0.68rem);
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.4;
margin-bottom: 4px;
}
.insight-value {
font-size: clamp(0.65rem, 2.1vw, 0.85rem);
font-weight: 700;
}
.insight.isolate .insight-value { color: #fbbf24; }
.insight.container .insight-value { color: #60a5fa; }
.insight.microvm .insight-value { color: #34d399; }
@media (max-width: 400px) {
.insights { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="container">
<h1>Sandbox Isolation & State</h1>
<p class="subtitle">Isolation technology vs data persistence model</p>
<div class="matrix-wrapper">
<div class="matrix">
<!-- Header row -->
<div class="corner"></div>
<div class="col-header isolate">V8 Isolates</div>
<div class="col-header container">Containers</div>
<div class="col-header microvm">MicroVMs</div>
<!-- Checkpoint row -->
<div class="row-header"><span class="icon">💾</span>Checkpoint</div>
<div class="cell isolate-col">
<span class="cell-empty">—</span>
</div>
<div class="cell container-col">
<div class="provider container">
<img src="https://www.google.com/s2/favicons?domain=daytona.io&sz=64" alt="">
Daytona
</div>
</div>
<div class="cell microvm-col">
<div class="provider microvm">
<img src="https://www.google.com/s2/favicons?domain=runloop.ai&sz=64" alt="">
Runloop<span class="price">$0.11/hr</span>
</div>
</div>
<!-- Persistent row -->
<div class="row-header"><span class="icon">💿</span>Persistent</div>
<div class="cell isolate-col">
<span class="cell-empty">—</span>
</div>
<div class="cell container-col">
<div class="provider container">
<img src="https://www.google.com/s2/favicons?domain=railway.app&sz=64" alt="">
Railway<span class="price">$0.01/GB</span>
</div>
<div class="provider container">
<img src="https://www.google.com/s2/favicons?domain=replit.com&sz=64" alt="">
Replit
</div>
</div>
<div class="cell microvm-col">
<div class="provider microvm">
<img src="https://www.google.com/s2/favicons?domain=fly.io&sz=64" alt="">
Fly.io<span class="price">$0.07/hr</span>
</div>
</div>
<!-- Session row -->
<div class="row-header"><span class="icon">⏱️</span>Session</div>
<div class="cell isolate-col">
<div class="provider isolate">
<img src="https://www.google.com/s2/favicons?domain=sprites.cloud&sz=64" alt="">
Sprites<span class="price">$0.07/hr</span>
</div>
</div>
<div class="cell container-col">
<div class="provider container">
<img src="https://www.google.com/s2/favicons?domain=modal.com&sz=64" alt="">
Modal<span class="price">$0.14/hr</span>
</div>
<div class="provider container">
<img src="https://www.google.com/s2/favicons?domain=beam.cloud&sz=64" alt="">
Beam<span class="price">$0.10/hr</span>
</div>
</div>
<div class="cell microvm-col">
<div class="provider microvm">
<img src="https://www.google.com/s2/favicons?domain=e2b.dev&sz=64" alt="">
E2B<span class="price">$0.10/hr</span>
</div>
<div class="provider microvm">
<img src="https://www.google.com/s2/favicons?domain=deno.com&sz=64" alt="">
Deno<span class="price">$0.05/hr</span>
</div>
</div>
<!-- Stateless row -->
<div class="row-header"><span class="icon">⚡</span>Stateless</div>
<div class="cell isolate-col">
<div class="provider isolate">
<img src="https://www.google.com/s2/favicons?domain=cloudflare.com&sz=64" alt="">
Cloudflare<span class="price">$0.50/M</span>
</div>
<div class="provider isolate">
<img src="https://www.google.com/s2/favicons?domain=vercel.com&sz=64" alt="">
Vercel<span class="price">$0.60/M</span>
</div>
</div>
<div class="cell container-col">
<span class="cell-empty">—</span>
</div>
<div class="cell microvm-col">
<span class="cell-empty">—</span>
</div>
</div>
</div>
<div class="legend">
<div class="legend-item"><div class="legend-swatch isolate"></div>V8 Isolates</div>
<div class="legend-item"><div class="legend-swatch container"></div>Containers</div>
<div class="legend-item"><div class="legend-swatch microvm"></div>MicroVMs</div>
</div>
<div class="insights">
<div class="insight isolate">
<div class="insight-icon">⚡</div>
<div class="insight-label">V8 Isolates</div>
<div class="insight-value">~0ms cold start</div>
</div>
<div class="insight container">
<div class="insight-icon">📦</div>
<div class="insight-label">Containers</div>
<div class="insight-value">Shared kernel</div>
</div>
<div class="insight microvm">
<div class="insight-icon">🔒</div>
<div class="insight-label">MicroVMs</div>
<div class="insight-value">Full VM isolation</div>
</div>
</div>
</div>
</body>
</html>
Raw
diagram-2-coldstart-vs-duration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Cold Start vs Workload Duration</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(145deg, #0a0a12 0%, #0f0f1a 50%, #0a0a12 100%);
min-height: 100vh;
min-height: 100dvh;
padding: clamp(16px, 4vw, 40px);
color: #fff;
overflow-x: hidden;
}
.container {
max-width: 700px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: clamp(1.2rem, 5vw, 2rem);
font-weight: 700;
margin-bottom: 8px;
background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
text-align: center;
font-size: clamp(0.75rem, 2.5vw, 0.95rem);
color: #64748b;
margin-bottom: clamp(24px, 6vw, 40px);
}
.chart-wrapper {
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: clamp(16px, 4vw, 24px);
padding: clamp(16px, 4vw, 32px);
}
/* Main layout: y-title | y-ticks | chart */
.chart-layout {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-rows: 1fr auto;
gap: 0;
}
/* Y-axis title - far left, vertically centered */
.y-title {
grid-row: 1;
grid-column: 1;
writing-mode: vertical-rl;
transform: rotate(180deg);
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(0.6rem, 1.8vw, 0.75rem);
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1.5px;
padding-right: clamp(6px, 1.5vw, 12px);
}
/* Y-axis ticks - second column */
.y-ticks {
grid-row: 1;
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 4% 0;
padding-right: clamp(6px, 1.5vw, 10px);
}
.y-tick {
font-size: clamp(0.55rem, 1.8vw, 0.7rem);
color: #64748b;
text-align: right;
white-space: nowrap;
}
/* Chart area - third column */
.chart-area {
grid-row: 1;
grid-column: 3;
position: relative;
aspect-ratio: 1.15;
border-left: 2px solid rgba(255, 255, 255, 0.12);
border-bottom: 2px solid rgba(255, 255, 255, 0.12);
border-radius: 0 0 0 8px;
}
/* Grid lines */
.chart-area::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 25% 25%;
}
/* X-axis ticks - spans under chart */
.x-ticks {
grid-row: 2;
grid-column: 3;
display: flex;
justify-content: space-between;
padding: clamp(6px, 1.5vw, 10px) 4% 0;
}
.x-tick {
font-size: clamp(0.55rem, 1.8vw, 0.7rem);
color: #64748b;
text-align: center;
}
/* X-axis title - centered below */
.x-title {
text-align: center;
margin-top: clamp(12px, 3vw, 20px);
font-size: clamp(0.6rem, 1.8vw, 0.75rem);
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* ZONES */
.zone {
position: absolute;
border-radius: clamp(12px, 3vw, 20px);
padding: clamp(10px, 2.5vw, 16px);
}
.zone-label {
font-size: clamp(0.55rem, 1.8vw, 0.72rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.zone-edge {
bottom: 1%;
left: 1%;
width: 34%;
height: 40%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.02) 100%);
border: 1px solid rgba(59, 130, 246, 0.25);
}
.zone-edge .zone-label { color: #60a5fa; }
.zone-code {
bottom: 20%;
left: 24%;
width: 40%;
height: 48%;
background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0.02) 100%);
border: 1px solid rgba(236, 72, 153, 0.25);
}
.zone-code .zone-label { color: #f472b6; }
.zone-agent {
top: 1%;
right: 1%;
width: 52%;
height: 58%;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.02) 100%);
border: 1px solid rgba(16, 185, 129, 0.25);
}
.zone-agent .zone-label { color: #34d399; }
/* Provider cards */
.provider {
position: absolute;
display: flex;
align-items: center;
gap: clamp(4px, 1vw, 8px);
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: clamp(8px, 2vw, 12px);
padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2.5vw, 16px);
font-size: clamp(0.6rem, 2vw, 0.8rem);
font-weight: 600;
white-space: nowrap;
transform: translate(-50%, -50%);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
z-index: 10;
transition: all 0.2s ease;
}
.provider:hover {
transform: translate(-50%, -50%) scale(1.05);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
z-index: 20;
}
.provider img {
width: clamp(14px, 4vw, 20px);
height: clamp(14px, 4vw, 20px);
border-radius: 4px;
}
.provider .meta {
font-size: clamp(0.5rem, 1.5vw, 0.65rem);
font-weight: 400;
color: #64748b;
}
.provider.edge { border-color: rgba(59, 130, 246, 0.4); }
.provider.code { border-color: rgba(236, 72, 153, 0.4); }
.provider.agent { border-color: rgba(16, 185, 129, 0.4); }
/* Tangle - spans multiple zones */
.tangle-range {
position: absolute;
right: 6%;
bottom: 25%;
top: 8%;
width: clamp(90px, 22vw, 130px);
background: linear-gradient(180deg,
rgba(124, 58, 237, 0.25) 0%,
rgba(236, 72, 153, 0.25) 50%,
rgba(124, 58, 237, 0.15) 100%);
border: 2px solid #ec4899;
border-radius: clamp(12px, 3vw, 18px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(4px, 1vw, 8px);
padding: clamp(8px, 2vw, 14px);
box-shadow: 0 0 30px rgba(236, 72, 153, 0.3), inset 0 0 20px rgba(124, 58, 237, 0.1);
z-index: 15;
animation: tangle-glow 2.5s infinite ease-in-out;
}
@keyframes tangle-glow {
0%, 100% { box-shadow: 0 0 30px rgba(236, 72, 153, 0.3), inset 0 0 20px rgba(124, 58, 237, 0.1); }
50% { box-shadow: 0 0 45px rgba(236, 72, 153, 0.5), inset 0 0 30px rgba(124, 58, 237, 0.2); }
}
.tangle-range .tangle-logo {
width: clamp(28px, 8vw, 40px);
height: auto;
}
.tangle-range .tangle-name {
font-size: clamp(0.7rem, 2.2vw, 0.9rem);
font-weight: 700;
background: linear-gradient(135deg, #a78bfa, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tangle-range .tangle-desc {
font-size: clamp(0.45rem, 1.4vw, 0.58rem);
color: #c4b5fd;
text-align: center;
line-height: 1.3;
}
.tangle-range .range-arrow {
position: absolute;
left: -24px;
top: 50%;
transform: translateY(-50%);
font-size: clamp(0.5rem, 1.5vw, 0.65rem);
color: #a78bfa;
writing-mode: vertical-rl;
transform: translateY(-50%) rotate(180deg);
}
/* Positions */
.p-cloudflare { left: 10%; bottom: 8%; }
.p-vercel { left: 16%; bottom: 18%; }
.p-sprites { left: 22%; bottom: 30%; }
.p-deno { left: 52%; bottom: 42%; }
.p-e2b { left: 46%; bottom: 36%; }
.p-modal { left: 38%; bottom: 48%; }
.p-beam { left: 50%; bottom: 30%; }
.p-fly { left: 60%; bottom: 58%; }
.p-railway { left: 68%; bottom: 72%; }
.p-runloop { left: 76%; bottom: 56%; }
.p-replit { left: 82%; bottom: 78%; }
.p-daytona { left: 92%; bottom: 90%; }
/* Legend */
.legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(16px, 4vw, 28px);
margin-top: clamp(20px, 5vw, 32px);
padding: clamp(14px, 3.5vw, 22px);
background: rgba(255, 255, 255, 0.02);
border-radius: clamp(12px, 3vw, 16px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: clamp(0.6rem, 2vw, 0.75rem);
color: #94a3b8;
}
.legend-swatch {
width: clamp(28px, 7vw, 40px);
height: clamp(12px, 3vw, 16px);
border-radius: 6px;
}
.legend-swatch.edge {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.15));
border: 1px solid rgba(59, 130, 246, 0.5);
}
.legend-swatch.code {
background: linear-gradient(135deg, rgba(236, 72, 153, 0.5), rgba(236, 72, 153, 0.15));
border: 1px solid rgba(236, 72, 153, 0.5);
}
.legend-swatch.agent {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.15));
border: 1px solid rgba(16, 185, 129, 0.5);
}
</style>
</head>
<body>
<div class="container">
<h1>Cold Start vs Workload Duration</h1>
<p class="subtitle">Where each sandbox shines: ephemeral functions to persistent dev environments</p>
<div class="chart-wrapper">
<div class="chart-layout">
<div class="y-title">Workload Duration →</div>
<div class="y-ticks">
<span class="y-tick">Days+</span>
<span class="y-tick">Hours</span>
<span class="y-tick">Minutes</span>
<span class="y-tick">Seconds</span>
</div>
<div class="chart-area">
<div class="zone zone-edge"><span class="zone-label">API / Edge</span></div>
<div class="zone zone-code"><span class="zone-label">Code Execution</span></div>
<div class="zone zone-agent"><span class="zone-label">Agent Sessions</span></div>
<!-- Tangle spans from code execution to long-running -->
<div class="tangle-range">
<img class="tangle-logo" src="https://cdn.prod.website-files.com/6494562b44a28080aafcbad4/65aaf8b0818b1d504cbdf81b_Tnt%20Logo.png" alt="Tangle">
<span class="tangle-name">Tangle</span>
<span class="tangle-desc">Minutes to Days+<br>Multi-driver</span>
</div>
<div class="provider edge p-cloudflare">
<img src="https://www.google.com/s2/favicons?domain=cloudflare.com&sz=64" alt="">
Cloudflare
</div>
<div class="provider edge p-vercel">
<img src="https://www.google.com/s2/favicons?domain=vercel.com&sz=64" alt="">
Vercel
</div>
<div class="provider edge p-sprites">
<img src="https://www.google.com/s2/favicons?domain=sprites.cloud&sz=64" alt="">
Sprites
</div>
<div class="provider code p-deno">
<img src="https://www.google.com/s2/favicons?domain=deno.com&sz=64" alt="">
Deno
</div>
<div class="provider code p-e2b">
<img src="https://www.google.com/s2/favicons?domain=e2b.dev&sz=64" alt="">
E2B
</div>
<div class="provider code p-modal">
<img src="https://www.google.com/s2/favicons?domain=modal.com&sz=64" alt="">
Modal
</div>
<div class="provider code p-beam">
<img src="https://www.google.com/s2/favicons?domain=beam.cloud&sz=64" alt="">
Beam
</div>
<div class="provider agent p-fly">
<img src="https://www.google.com/s2/favicons?domain=fly.io&sz=64" alt="">
Fly.io
</div>
<div class="provider agent p-railway">
<img src="https://www.google.com/s2/favicons?domain=railway.app&sz=64" alt="">
Railway
</div>
<div class="provider agent p-runloop">
<img src="https://www.google.com/s2/favicons?domain=runloop.ai&sz=64" alt="">
Runloop
</div>
<div class="provider agent p-replit">
<img src="https://www.google.com/s2/favicons?domain=replit.com&sz=64" alt="">
Replit
</div>
<div class="provider agent p-daytona">
<img src="https://www.google.com/s2/favicons?domain=daytona.io&sz=64" alt="">
Daytona
</div>
</div>
<div class="x-ticks">
<span class="x-tick">&lt;50ms</span>
<span class="x-tick">~500ms</span>
<span class="x-tick">~2s</span>
<span class="x-tick">~10s+</span>
</div>
</div>
<div class="x-title">Cold Start Time →</div>
</div>
<div class="legend">
<div class="legend-item"><div class="legend-swatch edge"></div>API / Edge</div>
<div class="legend-item"><div class="legend-swatch code"></div>Code Execution</div>
<div class="legend-item"><div class="legend-swatch agent"></div>Agent Sessions</div>
</div>
</div>
</body>
</html>
Raw
diagram-3-vc-positioning.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Agent Compute: Market Landscape</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(145deg, #0a0a12 0%, #0f0f1a 50%, #0a0a12 100%);
min-height: 100vh;
min-height: 100dvh;
padding: clamp(16px, 4vw, 40px);
color: #fff;
overflow-x: hidden;
}
.container {
max-width: 720px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: clamp(1.2rem, 5vw, 2rem);
font-weight: 800;
margin-bottom: 8px;
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f97316 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.03em;
}
.subtitle {
text-align: center;
font-size: clamp(0.75rem, 2.5vw, 0.95rem);
color: #64748b;
margin-bottom: clamp(24px, 6vw, 40px);
}
.chart-wrapper {
position: relative;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: clamp(16px, 4vw, 24px);
padding: clamp(16px, 4vw, 32px);
}
/* Axis titles OUTSIDE */
.y-axis-title {
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
font-size: clamp(0.65rem, 2vw, 0.8rem);
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
}
.x-axis-title {
text-align: center;
margin-top: clamp(16px, 4vw, 24px);
font-size: clamp(0.65rem, 2vw, 0.8rem);
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.chart {
margin-left: clamp(36px, 9vw, 50px);
}
/* Quadrant grid */
.quadrants {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 3px;
aspect-ratio: 1;
border-left: 2px solid rgba(255, 255, 255, 0.12);
border-bottom: 2px solid rgba(255, 255, 255, 0.12);
border-radius: 0 0 0 8px;
}
.quad {
padding: clamp(12px, 3vw, 20px);
display: flex;
flex-direction: column;
gap: clamp(8px, 2vw, 12px);
border-radius: clamp(10px, 2.5vw, 16px);
position: relative;
}
.quad-label {
font-size: clamp(0.5rem, 1.6vw, 0.65rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.7;
}
/* Q1: Low DX + Agent Native (top-left) - DIY Agent Infra */
.q1 {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.03) 100%);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.q1 .quad-label { color: #fbbf24; }
/* Q2: High DX + Agent Native (top-right) - TANGLE'S QUADRANT */
.q2 {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.03) 100%);
border: 1px solid rgba(16, 185, 129, 0.3);
box-shadow: inset 0 0 40px rgba(16, 185, 129, 0.08);
}
.q2 .quad-label { color: #34d399; }
/* Q3: Low DX + Generic (bottom-left) - Raw Infra */
.q3 {
background: linear-gradient(135deg, rgba(100, 116, 139, 0.12) 0%, rgba(100, 116, 139, 0.02) 100%);
border: 1px solid rgba(100, 116, 139, 0.2);
}
.q3 .quad-label { color: #94a3b8; }
/* Q4: High DX + Generic (bottom-right) - Serverless/PaaS */
.q4 {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.03) 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.q4 .quad-label { color: #60a5fa; }
/* Provider chips with logos */
.providers {
display: flex;
flex-wrap: wrap;
gap: clamp(6px, 1.5vw, 10px);
}
.provider {
display: inline-flex;
align-items: center;
gap: clamp(4px, 1vw, 6px);
padding: clamp(5px, 1.2vw, 8px) clamp(10px, 2.5vw, 14px);
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(12px);
border-radius: 20px;
font-size: clamp(0.55rem, 1.8vw, 0.72rem);
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.12);
transition: all 0.2s ease;
}
.provider:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.provider img {
width: clamp(12px, 3vw, 16px);
height: clamp(12px, 3vw, 16px);
border-radius: 3px;
object-fit: contain;
}
/* Tangle special treatment */
.provider.tangle {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(236, 72, 153, 0.5));
border: 2px solid #ec4899;
box-shadow: 0 0 24px rgba(236, 72, 153, 0.4);
font-size: clamp(0.6rem, 2vw, 0.8rem);
padding: clamp(6px, 1.5vw, 10px) clamp(12px, 3vw, 18px);
animation: glow 2.5s infinite ease-in-out;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 24px rgba(236, 72, 153, 0.4); }
50% { box-shadow: 0 0 36px rgba(236, 72, 153, 0.6), 0 0 60px rgba(124, 58, 237, 0.3); }
}
.quad-note {
font-size: clamp(0.5rem, 1.5vw, 0.62rem);
color: inherit;
opacity: 0.5;
margin-top: auto;
line-height: 1.4;
font-style: italic;
}
/* Y-axis labels */
.y-labels {
position: absolute;
left: 0;
top: 0;
bottom: 0;
transform: translateX(-100%);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8% 0;
padding-right: 8px;
}
.y-label {
font-size: clamp(0.5rem, 1.6vw, 0.65rem);
color: #64748b;
text-align: right;
white-space: nowrap;
}
/* X-axis labels */
.x-labels {
display: flex;
justify-content: space-between;
padding: 8px 8% 0;
}
.x-label {
font-size: clamp(0.5rem, 1.6vw, 0.65rem);
color: #64748b;
}
/* Key features */
.features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(10px, 2.5vw, 16px);
margin-top: clamp(24px, 6vw, 36px);
}
.feature {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: clamp(10px, 2.5vw, 14px);
padding: clamp(14px, 3.5vw, 20px);
}
.feature h3 {
font-size: clamp(0.65rem, 2vw, 0.8rem);
font-weight: 600;
margin-bottom: 8px;
color: #e2e8f0;
}
.feature p {
font-size: clamp(0.55rem, 1.7vw, 0.7rem);
color: #94a3b8;
line-height: 1.5;
}
.feature .hl {
color: #ec4899;
font-weight: 600;
}
@media (max-width: 400px) {
.features { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="container">
<h1>Agent Compute Landscape</h1>
<p class="subtitle">Developer experience vs agent-native features</p>
<div class="chart-wrapper">
<div class="y-axis-title">Agent Specialization →</div>
<div class="chart">
<div class="y-labels">
<span class="y-label">Agent-Native</span>
<span class="y-label">Generic</span>
</div>
<div class="quadrants">
<!-- Q1: Low DX + Agent Native -->
<div class="quad q1">
<span class="quad-label">DIY Agent Infra</span>
<div class="providers">
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=docker.com&sz=64" alt="">
Docker MCP
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=morph.so&sz=64" alt="">
Morph
</div>
</div>
<div class="quad-note">Build your own agent runtime</div>
</div>
<!-- Q2: High DX + Agent Native - TANGLE -->
<div class="quad q2">
<span class="quad-label">Turnkey Agent Platforms</span>
<div class="providers">
<div class="provider tangle">
<img src="https://cdn.prod.website-files.com/6494562b44a28080aafcbad4/65aaf8b0818b1d504cbdf81b_Tnt%20Logo.png" alt="" style="width: 18px; height: auto;">
Tangle
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=e2b.dev&sz=64" alt="">
E2B
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=runloop.ai&sz=64" alt="">
Runloop
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=deno.com&sz=64" alt="">
Deno
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=daytona.io&sz=64" alt="">
Daytona
</div>
</div>
<div class="quad-note">Tangle: centralized cloud + decentralized operators</div>
</div>
<!-- Q3: Low DX + Generic -->
<div class="quad q3">
<span class="quad-label">Raw Infrastructure</span>
<div class="providers">
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=fly.io&sz=64" alt="">
Fly.io
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=akash.network&sz=64" alt="">
Akash
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=fluence.network&sz=64" alt="">
Fluence
</div>
</div>
<div class="quad-note">Low-level, you do the work</div>
</div>
<!-- Q4: High DX + Generic -->
<div class="quad q4">
<span class="quad-label">Serverless / PaaS</span>
<div class="providers">
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=modal.com&sz=64" alt="">
Modal
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=railway.app&sz=64" alt="">
Railway
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=replit.com&sz=64" alt="">
Replit
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=beam.cloud&sz=64" alt="">
Beam
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=vercel.com&sz=64" alt="">
Vercel
</div>
<div class="provider">
<img src="https://www.google.com/s2/favicons?domain=cloudflare.com&sz=64" alt="">
Cloudflare
</div>
</div>
<div class="quad-note">Great DX, not agent-specific</div>
</div>
</div>
<div class="x-labels">
<span class="x-label">DIY / Low-level</span>
<span class="x-label">Turnkey / High-level</span>
</div>
</div>
<div class="x-axis-title">Developer Experience →</div>
</div>
<div class="features">
<div class="feature">
<h3>🔮 Why Tangle is Different</h3>
<p><span class="hl">Both centralized AND decentralized</span>. Start on managed cloud, graduate to on-chain operators with cryptographic SLA guarantees.</p>
</div>
<div class="feature">
<h3>🔒 Agent Profiles</h3>
<p><span class="hl">Pre-configured sandboxes</span>: prompts, permissions, MCP servers, credential policies. Operators compete on specialization.</p>
</div>
<div class="feature">
<h3>⚡ Multi-Driver Architecture</h3>
<p><span class="hl">Docker, Firecracker, Host-Agent</span>. Choose isolation level per workload. CRIU checkpointing for live migration.</p>
</div>
<div class="feature">
<h3>🤖 Native Agent Backends</h3>
<p><span class="hl">OpenCode, Claude Code, Codex, Amp</span>. Model switching and BYOK built into the platform.</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment