diff --git a/docs-src/assets/pr-1508-webui-before-after.svg b/docs-src/assets/pr-1508-webui-before-after.svg
new file mode 100644
index 00000000..2933d5ea
--- /dev/null
+++ b/docs-src/assets/pr-1508-webui-before-after.svg
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="760" viewBox="0 0 1400 760" role="img" aria-labelledby="title desc">
+  <title id="title">PR #1508 WebUI Before After</title>
+  <desc id="desc">Comparison summary for newly added model-calling component visibility in WebUI.</desc>
+  <defs>
+    <style>
+      .bg { fill: #0f172a; }
+      .panel { fill: #111827; stroke: #334155; stroke-width: 2; rx: 14; }
+      .h1 { fill: #e2e8f0; font: 700 30px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      .h2 { fill: #f8fafc; font: 700 24px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      .txt { fill: #cbd5e1; font: 500 20px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      .ok { fill: #22c55e; font: 700 22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      .bad { fill: #f97316; font: 700 22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      .cap { fill: #94a3b8; font: 500 18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+      .code { fill: #a5b4fc; font: 600 18px ui-monospace, SFMono-Regular, Menlo, monospace; }
+    </style>
+  </defs>
+
+  <rect class="bg" x="0" y="0" width="1400" height="760" />
+
+  <text class="h1" x="60" y="72">MaiBot WebUI - New Model-Calling Component Visibility (PR #1508)</text>
+  <text class="cap" x="60" y="108">Note: This is a verification diagram (not a runtime screenshot).</text>
+
+  <rect class="panel" x="60" y="150" width="620" height="540" />
+  <text class="h2" x="92" y="200">Before</text>
+  <text class="bad" x="92" y="236">Not visible in WebUI task config</text>
+
+  <text class="txt" x="92" y="288">- New model-calling component missing in task cards</text>
+  <text class="txt" x="92" y="326">- Missing in task mapping label table</text>
+  <text class="txt" x="92" y="364">- Model rename sync does not cover this task</text>
+  <text class="txt" x="92" y="402">- Used-by check does not include this task</text>
+  <text class="txt" x="92" y="440">- Operationally callable, but frontend visibility incomplete</text>
+
+  <text class="code" x="92" y="520">File (dev active bundle): webui/dist/assets/index-CbKchl83.js</text>
+
+  <rect class="panel" x="720" y="150" width="620" height="540" />
+  <text class="h2" x="752" y="200">After</text>
+  <text class="ok" x="752" y="236">Visible and manageable in WebUI</text>
+
+  <text class="txt" x="752" y="288">- Added task label mapping for the new component</text>
+  <text class="txt" x="752" y="326">- Added task card entry in model task config UI</text>
+  <text class="txt" x="752" y="364">- Added rename propagation in model list mapping</text>
+  <text class="txt" x="752" y="402">- Added used-by model detection coverage</text>
+  <text class="txt" x="752" y="440">- Frontend task visibility consistent with backend invocation</text>
+
+  <text class="code" x="752" y="520">Issue: #1505  |  PR: #1508 (base: dev)</text>
+
+  <text class="cap" x="60" y="730">Generated for PR documentation and reviewer quick-check.</text>
+</svg>