feat: complete web curriculum visuals

web/public/course-assets/s02_tool_use/concurrency-comparison.svg

@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 500" font-family="system-ui, -apple-system, sans-serif">
+  <defs>
+    <linearGradient id="header" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#1e3a5f"/><stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+    <linearGradient id="teach" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#fef3c7"/><stop offset="100%" stop-color="#fde68a"/>
+    </linearGradient>
+    <linearGradient id="cc" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#dcfce7"/><stop offset="100%" stop-color="#bbf7d0"/>
+    </linearGradient>
+    <marker id="arrow-g" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#16a34a"/>
+    </marker>
+  </defs>
+
+  <rect width="760" height="500" fill="#fafbfc" rx="8"/>
+  <rect x="0" y="0" width="760" height="36" fill="url(#header)" rx="8"/>
+  <rect x="0" y="28" width="760" height="8" fill="url(#header)"/>
+  <text x="380" y="24" fill="#fff" font-size="14" font-weight="700" text-anchor="middle">Tool Concurrency — 教学版 vs Claude Code</text>
+
+  <!-- Input tool blocks -->
+  <rect x="180" y="52" width="400" height="28" rx="14" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1"/>
+  <text x="380" y="71" fill="#475569" font-size="11" font-weight="600" text-anchor="middle">模型一次返回 5 个工具调用</text>
+
+  <rect x="38" y="92" width="100" height="36" rx="4" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/>
+  <text x="88" y="114" fill="#1e40af" font-size="10" font-weight="600" text-anchor="middle">read A.py</text>
+
+  <rect x="148" y="92" width="100" height="36" rx="4" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/>
+  <text x="198" y="114" fill="#1e40af" font-size="10" font-weight="600" text-anchor="middle">glob *.py</text>
+
+  <rect x="258" y="92" width="110" height="36" rx="4" fill="#fef3c7" stroke="#fbbf24" stroke-width="1"/>
+  <text x="313" y="114" fill="#92400e" font-size="10" font-weight="600" text-anchor="middle">bash "ls -la"</text>
+
+  <rect x="378" y="92" width="100" height="36" rx="4" fill="#fee2e2" stroke="#fca5a5" stroke-width="1"/>
+  <text x="428" y="114" fill="#991b1b" font-size="10" font-weight="600" text-anchor="middle">write B.py</text>
+
+  <rect x="488" y="92" width="100" height="36" rx="4" fill="#dbeafe" stroke="#93c5fd" stroke-width="1"/>
+  <text x="538" y="114" fill="#1e40af" font-size="10" font-weight="600" text-anchor="middle">read C.py</text>
+
+  <!-- LEFT: Teaching Version -->
+  <rect x="20" y="156" width="350" height="230" rx="8" fill="url(#teach)" stroke="#d97706" stroke-width="1.5"/>
+  <text x="195" y="180" fill="#92400e" font-size="13" font-weight="700" text-anchor="middle">教学版：按原始顺序逐个执行</text>
+
+  <rect x="35" y="192" width="320" height="46" rx="4" fill="#fff" stroke="#fbbf24" stroke-width="0.5"/>
+  <text x="46" y="209" fill="#92400e" font-size="9" font-family="monospace">for block in response.content:</text>
+  <text x="46" y="224" fill="#92400e" font-size="9" font-family="monospace">  TOOL_HANDLERS[name](**input)</text>
+
+  <text x="195" y="258" fill="#92400e" font-size="10" font-weight="600" text-anchor="middle">结果：5 次串行调用，不做 batch</text>
+
+  <rect x="45" y="270" width="300" height="20" rx="4" fill="#fff7ed" stroke="#fbbf24" stroke-width="0.7"/>
+  <text x="60" y="284" fill="#92400e" font-size="8" font-weight="600">1. read A.py</text>
+
+  <rect x="45" y="294" width="300" height="20" rx="4" fill="#fff7ed" stroke="#fbbf24" stroke-width="0.7"/>
+  <text x="60" y="308" fill="#92400e" font-size="8" font-weight="600">2. glob *.py</text>
+
+  <rect x="45" y="318" width="300" height="20" rx="4" fill="#fff7ed" stroke="#fbbf24" stroke-width="0.7"/>
+  <text x="60" y="332" fill="#92400e" font-size="8" font-weight="600">3. bash "ls -la"</text>
+
+  <rect x="45" y="342" width="145" height="20" rx="4" fill="#fff7ed" stroke="#fbbf24" stroke-width="0.7"/>
+  <text x="60" y="356" fill="#92400e" font-size="8" font-weight="600">4. write B.py</text>
+
+  <rect x="200" y="342" width="145" height="20" rx="4" fill="#fff7ed" stroke="#fbbf24" stroke-width="0.7"/>
+  <text x="215" y="356" fill="#92400e" font-size="8" font-weight="600">5. read C.py</text>
+
+  <text x="195" y="378" fill="#dc2626" font-size="8" font-weight="600" text-anchor="middle">教学重点：先理解 tool_use 分发，暂不引入并发执行</text>
+
+  <!-- RIGHT: Claude Code -->
+  <rect x="390" y="156" width="350" height="230" rx="8" fill="url(#cc)" stroke="#16a34a" stroke-width="1.5"/>
+  <text x="565" y="180" fill="#166534" font-size="13" font-weight="700" text-anchor="middle">Claude Code：isConcurrencySafe(input)</text>
+
+  <rect x="405" y="192" width="320" height="38" rx="4" fill="#fff" stroke="#86efac" stroke-width="0.5"/>
+  <text x="416" y="207" fill="#166534" font-size="9" font-family="monospace">每个工具调用单独判断：</text>
+  <text x="416" y="222" fill="#166534" font-size="9" font-family="monospace">tool.isConcurrencySafe(parsedInput) → bool</text>
+
+  <text x="565" y="250" fill="#166534" font-size="10" font-weight="600" text-anchor="middle">结果：3 个 batch（按连续块分批）</text>
+
+  <rect x="400" y="258" width="155" height="50" rx="4" fill="#dcfce7" stroke="#86efac" stroke-width="1"/>
+  <text x="477" y="276" fill="#166534" font-size="8" font-weight="600" text-anchor="middle">Batch 1</text>
+  <text x="477" y="289" fill="#166534" font-size="8" text-anchor="middle">并发</text>
+  <text x="477" y="302" fill="#166534" font-size="7" text-anchor="middle">read A · glob · bash "ls"</text>
+
+  <line x1="560" y1="283" x2="575" y2="283" stroke="#16a34a" stroke-width="1" marker-end="url(#arrow-g)"/>
+
+  <rect x="580" y="258" width="65" height="50" rx="4" fill="#fee2e2" stroke="#fca5a5" stroke-width="1"/>
+  <text x="612" y="276" fill="#991b1b" font-size="8" font-weight="600" text-anchor="middle">Batch 2</text>
+  <text x="612" y="289" fill="#991b1b" font-size="8" text-anchor="middle">串行</text>
+  <text x="612" y="302" fill="#991b1b" font-size="7" text-anchor="middle">write B</text>
+
+  <line x1="650" y1="283" x2="665" y2="283" stroke="#16a34a" stroke-width="1" marker-end="url(#arrow-g)"/>
+
+  <rect x="670" y="258" width="55" height="50" rx="4" fill="#dcfce7" stroke="#86efac" stroke-width="1"/>
+  <text x="697" y="276" fill="#166534" font-size="8" font-weight="600" text-anchor="middle">Batch 3</text>
+  <text x="697" y="289" fill="#166534" font-size="8" text-anchor="middle">并发</text>
+  <text x="697" y="302" fill="#166534" font-size="7" text-anchor="middle">read C</text>
+
+  <text x="565" y="332" fill="#16a34a" font-size="8" font-weight="600" text-anchor="middle">bash "ls" 是并发安全调用，且和 read/glob 连续，所以留在 Batch 1</text>
+
+  <text x="565" y="366" fill="#16a34a" font-size="9" font-weight="600" text-anchor="middle">✓ 按输入判断并发安全，不按工具名硬编码</text>
+  <text x="565" y="380" fill="#16a34a" font-size="9" font-weight="600" text-anchor="middle">✓ 保留原始顺序，只在连续安全块内部并发</text>
+
+  <!-- Bottom Summary -->
+  <rect x="20" y="402" width="720" height="82" rx="6" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1"/>
+  <text x="40" y="424" fill="#1e3a5f" font-size="12" font-weight="600">核心差异</text>
+  <text x="40" y="444" fill="#475569" font-size="10">• 教学版：按 response.content 原始顺序逐个执行，不做并发，也不分 batch</text>
+  <text x="40" y="460" fill="#475569" font-size="10">• CC：按 isConcurrencySafe(input) 判断，并把连续的并发安全调用合成同一个 batch</text>
+  <text x="40" y="476" fill="#475569" font-size="10">• 差异重点：教学版聚焦工具分发；CC 在保持顺序语义的同时优化安全并发</text>
+</svg>