migrated spr stuff

atlas/books/sysmonstm/explainer/images/02-grpc-streaming.svg

@@ -0,0 +1,83 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 300">
+  <defs>
+    <marker id="arr" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#e94560"/>
+    </marker>
+  </defs>
+
+  <!-- Background -->
+  <rect width="700" height="300" fill="#1a1a2e"/>
+
+  <!-- Title -->
+  <text x="350" y="30" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="16" font-weight="bold">gRPC Client-Side Streaming</text>
+
+  <!-- Collector box -->
+  <g transform="translate(50, 80)">
+    <rect width="180" height="160" rx="8" fill="#16213e" stroke="#e94560" stroke-width="2"/>
+    <text x="90" y="25" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="13" font-weight="bold">Collector</text>
+
+    <!-- Metric items -->
+    <g transform="translate(15, 45)">
+      <rect width="150" height="25" rx="4" fill="#0f3460"/>
+      <text x="10" y="17" fill="#a0a0a0" font-family="monospace" font-size="10">CPU: 45%</text>
+    </g>
+    <g transform="translate(15, 75)">
+      <rect width="150" height="25" rx="4" fill="#0f3460"/>
+      <text x="10" y="17" fill="#a0a0a0" font-family="monospace" font-size="10">Memory: 62%</text>
+    </g>
+    <g transform="translate(15, 105)">
+      <rect width="150" height="25" rx="4" fill="#0f3460"/>
+      <text x="10" y="17" fill="#a0a0a0" font-family="monospace" font-size="10">Disk: 78%</text>
+    </g>
+  </g>
+
+  <!-- Stream visualization -->
+  <g transform="translate(250, 100)">
+    <!-- Stream line -->
+    <line x1="0" y1="60" x2="180" y2="60" stroke="#e94560" stroke-width="3" stroke-dasharray="8,4"/>
+
+    <!-- Metric packets -->
+    <g transform="translate(20, 45)">
+      <rect width="30" height="30" rx="4" fill="#e94560"/>
+      <text x="15" y="20" text-anchor="middle" fill="#fff" font-family="monospace" font-size="10">M1</text>
+    </g>
+    <g transform="translate(70, 45)">
+      <rect width="30" height="30" rx="4" fill="#e94560" opacity="0.8"/>
+      <text x="15" y="20" text-anchor="middle" fill="#fff" font-family="monospace" font-size="10">M2</text>
+    </g>
+    <g transform="translate(120, 45)">
+      <rect width="30" height="30" rx="4" fill="#e94560" opacity="0.6"/>
+      <text x="15" y="20" text-anchor="middle" fill="#fff" font-family="monospace" font-size="10">M3</text>
+    </g>
+
+    <text x="90" y="110" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="10">Continuous stream of metrics</text>
+  </g>
+
+  <!-- Aggregator box -->
+  <g transform="translate(450, 80)">
+    <rect width="180" height="160" rx="8" fill="#16213e" stroke="#e94560" stroke-width="2"/>
+    <text x="90" y="25" text-anchor="middle" fill="#e94560" font-family="system-ui" font-size="13" font-weight="bold">Aggregator</text>
+
+    <!-- Batch indicator -->
+    <g transform="translate(15, 45)">
+      <rect width="150" height="40" rx="4" fill="#0f3460"/>
+      <text x="75" y="17" text-anchor="middle" fill="#eee" font-family="system-ui" font-size="10">Batch: 20 metrics</text>
+      <text x="75" y="32" text-anchor="middle" fill="#4ade80" font-family="system-ui" font-size="9">Flush to storage</text>
+    </g>
+
+    <!-- Storage icons -->
+    <g transform="translate(15, 100)">
+      <rect width="65" height="30" rx="4" fill="#0f3460"/>
+      <text x="32" y="20" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Redis</text>
+    </g>
+    <g transform="translate(95, 100)">
+      <rect width="70" height="30" rx="4" fill="#0f3460"/>
+      <text x="35" y="20" text-anchor="middle" fill="#a0a0a0" font-family="system-ui" font-size="9">Timescale</text>
+    </g>
+  </g>
+
+  <!-- Legend -->
+  <g transform="translate(50, 260)">
+    <text x="0" y="0" fill="#a0a0a0" font-family="system-ui" font-size="11">One persistent connection. Metrics flow continuously. No polling overhead.</text>
+  </g>
+</svg>