MaCH repo

02-request-pipeline-flow.svg

@@ -0,0 +1,95 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 300" width="760" height="300">
+  <rect width="760" height="300" fill="#09080f"/>
+  <defs>
+    <linearGradient id="sg1" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#3b82f6"/>
+      <stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+    <linearGradient id="sg2" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#8b5cf6"/>
+      <stop offset="100%" stop-color="#7c3aed"/>
+    </linearGradient>
+    <linearGradient id="sg3" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#d97706"/>
+    </linearGradient>
+    <linearGradient id="sg4" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#10b981"/>
+      <stop offset="100%" stop-color="#059669"/>
+    </linearGradient>
+    <style>text{font-family:'JetBrains Mono','Fira Code',monospace}</style>
+  </defs>
+
+  <!-- Outer container -->
+  <rect x="20" y="16" width="720" height="268" rx="14" fill="#0f0d1a" stroke="#1e1b2e" stroke-width="1.5"/>
+
+  <!-- Route label -->
+  <text x="44" y="46" fill="#94a3b8" font-size="12" font-weight="600">POST /todos</text>
+
+  <!-- .before label -->
+  <text x="44" y="72" fill="#475569" font-size="9">.before</text>
+
+  <!-- session() box: x=44 w=108 → right edge 152 -->
+  <rect x="44" y="80" width="108" height="40" rx="8" fill="#1e293b" stroke="#3b82f6" stroke-width="1"/>
+  <text x="98" y="105" text-anchor="middle" fill="#93c5fd" font-size="11" font-weight="600">session()</text>
+
+  <!-- Arrow 1: line 152→170, triangle tip at 180 -->
+  <line x1="152" y1="100" x2="170" y2="100" stroke="#64748b" stroke-width="1.5"/>
+  <polygon points="180,100 170,95 170,105" fill="#64748b"/>
+
+  <!-- .post pipeline label -->
+  <text x="188" y="72" fill="#475569" font-size="9">.post pipeline</text>
+
+  <!-- param() box: x=188 w=108 → right edge 296 -->
+  <rect x="188" y="80" width="108" height="40" rx="8" fill="url(#sg1)"/>
+  <text x="242" y="98" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">param()</text>
+  <text x="242" y="113" text-anchor="middle" fill="rgba(255,255,255,0.65)" font-size="8">validate title</text>
+
+  <!-- Arrow 2: line 296→314, triangle tip at 324 -->
+  <line x1="296" y1="100" x2="314" y2="100" stroke="#64748b" stroke-width="1.5"/>
+  <polygon points="324,100 314,95 314,105" fill="#64748b"/>
+
+  <!-- db() box: x=324 w=108 → right edge 432 -->
+  <rect x="324" y="80" width="108" height="40" rx="8" fill="url(#sg2)"/>
+  <text x="378" y="98" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">db()</text>
+  <text x="378" y="113" text-anchor="middle" fill="rgba(255,255,255,0.65)" font-size="8">INSERT todo</text>
+
+  <!-- Arrow 3: line 432→450, triangle tip at 460 -->
+  <line x1="432" y1="100" x2="450" y2="100" stroke="#64748b" stroke-width="1.5"/>
+  <polygon points="460,100 450,95 450,105" fill="#64748b"/>
+
+  <!-- emit() box: x=460 w=108 → right edge 568 -->
+  <rect x="460" y="80" width="108" height="40" rx="8" fill="url(#sg3)"/>
+  <text x="514" y="98" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">emit()</text>
+  <text x="514" y="113" text-anchor="middle" fill="rgba(255,255,255,0.65)" font-size="8">todo_created</text>
+
+  <!-- Arrow 4: line 568→586, triangle tip at 596 -->
+  <line x1="568" y1="100" x2="586" y2="100" stroke="#64748b" stroke-width="1.5"/>
+  <polygon points="596,100 586,95 586,105" fill="#64748b"/>
+
+  <!-- redirect() box: x=596 w=108 → right edge 704 -->
+  <rect x="596" y="80" width="108" height="40" rx="8" fill="url(#sg4)"/>
+  <text x="650" y="98" text-anchor="middle" fill="#fff" font-size="11" font-weight="700">redirect()</text>
+  <text x="650" y="113" text-anchor="middle" fill="rgba(255,255,255,0.65)" font-size="8">302 → /todos</text>
+
+  <!-- ===== Pipeline Context ===== -->
+  <rect x="44" y="146" width="672" height="120" rx="10" fill="#111827" stroke="#1f2937" stroke-width="1"/>
+  <text x="64" y="170" fill="#6b7280" font-size="10" font-weight="600">PIPELINE CONTEXT</text>
+
+  <!-- Context cards: each 148w x 52h, gap 12 -->
+  <rect x="60" y="182" width="148" height="52" rx="6" fill="#1e1b2e" stroke="#3b82f6" stroke-width="0.75"/>
+  <text x="134" y="206" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">user_id</text>
+  <text x="134" y="222" text-anchor="middle" fill="#6b7280" font-size="9">← session</text>
+
+  <rect x="220" y="182" width="148" height="52" rx="6" fill="#1e1b2e" stroke="#3b82f6" stroke-width="0.75"/>
+  <text x="294" y="206" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">title</text>
+  <text x="294" y="222" text-anchor="middle" fill="#6b7280" font-size="9">← param</text>
+
+  <rect x="380" y="182" width="148" height="52" rx="6" fill="#1e1b2e" stroke="#8b5cf6" stroke-width="0.75"/>
+  <text x="454" y="206" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">todo</text>
+  <text x="454" y="222" text-anchor="middle" fill="#6b7280" font-size="9">← db .set</text>
+
+  <rect x="540" y="182" width="148" height="52" rx="6" fill="#1e1b2e" stroke="#374151" stroke-width="0.75"/>
+  <text x="614" y="206" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">base_layout</text>
+  <text x="614" y="222" text-anchor="middle" fill="#6b7280" font-size="9">← .context</text>
+</svg>