From 47c743f17c655c44f14b443eca9e9ff34ce079d2 Mon Sep 17 00:00:00 2001
From: Liu <lc-soft@live.cn>
Date: Tue, 7 Apr 2026 16:11:32 +0800
Subject: [PATCH] fix: avoid Alpine SVG template rendering errors in cost
 charts

---
 crates/openfang-api/static/index_body.html   | 51 +---------------
 crates/openfang-api/static/js/pages/usage.js | 63 ++++++++++++++++++++
 2 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/crates/openfang-api/static/index_body.html b/crates/openfang-api/static/index_body.html
index b8f7f3d8d9..825b95b8fa 100644
--- a/crates/openfang-api/static/index_body.html
+++ b/crates/openfang-api/static/index_body.html
@@ -4045,20 +4045,7 @@ <h4 style="margin-top:16px;margin-bottom:8px">Top Spenders (Today)</h4>
                 <div x-show="costByProvider().length > 0" class="donut-chart-wrap">
                   <div class="donut-chart">
                     <svg viewBox="0 0 160 160" width="160" height="160">
-                      <template x-for="(seg, idx) in donutSegments()" :key="seg.provider">
-                        <circle
-                          cx="80" cy="80" r="60"
-                          fill="none"
-                          :stroke="seg.color"
-                          stroke-width="24"
-                          :stroke-dasharray="seg.dasharray"
-                          :stroke-dashoffset="seg.dashoffset"
-                          transform="rotate(-90 80 80)"
-                          class="donut-segment"
-                        >
-                          <title x-text="seg.provider + ': ' + seg.percent + '% (' + formatCost(seg.cost) + ')'"></title>
-                        </circle>
-                      </template>
+                      <g x-html="donutSegmentsSvg()"></g>
                       <!-- Center text -->
                       <text x="80" y="76" text-anchor="middle" fill="var(--text)" style="font-size:14px;font-weight:700;font-family:var(--font-mono)" x-text="formatCost(summary.total_cost_usd)"></text>
                       <text x="80" y="92" text-anchor="middle" fill="var(--text-muted)" style="font-size:9px;font-family:var(--font-mono)">TOTAL</text>
@@ -4085,41 +4072,7 @@ <h4 style="margin-top:16px;margin-bottom:8px">Top Spenders (Today)</h4>
                   <svg :viewBox="'0 0 ' + (barChartData().length * 50 + 20) + ' 180'" :width="barChartData().length * 50 + 20" height="180">
                     <!-- Baseline -->
                     <line x1="10" :x2="barChartData().length * 50 + 10" y1="150" y2="150" stroke="var(--border)" stroke-width="1"/>
-                    <template x-for="(bar, idx) in barChartData()" :key="bar.date">
-                      <g>
-                        <!-- Bar rect -->
-                        <rect
-                          :x="idx * 50 + 18"
-                          :y="150 - bar.barHeight"
-                          width="24"
-                          :height="bar.barHeight"
-                          rx="3"
-                          fill="var(--accent)"
-                          class="cost-bar"
-                          style="opacity:0.85"
-                        >
-                          <title x-text="bar.date + ': ' + formatCost(bar.cost) + ' (' + bar.calls + ' calls)'"></title>
-                        </rect>
-                        <!-- Day label -->
-                        <text
-                          :x="idx * 50 + 30"
-                          y="166"
-                          text-anchor="middle"
-                          fill="var(--text-muted)"
-                          style="font-size:9px;font-family:var(--font-mono)"
-                          x-text="bar.dayName"
-                        ></text>
-                        <!-- Cost label on top -->
-                        <text
-                          :x="idx * 50 + 30"
-                          :y="150 - bar.barHeight - 4"
-                          text-anchor="middle"
-                          fill="var(--text-dim)"
-                          style="font-size:8px;font-family:var(--font-mono)"
-                          x-text="formatCost(bar.cost)"
-                        ></text>
-                      </g>
-                    </template>
+                    <g x-html="barChartSvg()"></g>
                   </svg>
                 </div>
               </div>
diff --git a/crates/openfang-api/static/js/pages/usage.js b/crates/openfang-api/static/js/pages/usage.js
index cf1c77303d..c2ea5b6ca5 100644
--- a/crates/openfang-api/static/js/pages/usage.js
+++ b/crates/openfang-api/static/js/pages/usage.js
@@ -191,6 +191,33 @@ function analyticsPage() {
       return segments;
     },
 
+    donutSegmentsSvg() {
+      var segments = this.donutSegments();
+      if (!segments.length) return '';
+
+      function escapeXml(value) {
+        return String(value)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&apos;');
+      }
+
+      var out = [];
+      for (var i = 0; i < segments.length; i++) {
+        var seg = segments[i];
+        var title = seg.provider + ': ' + seg.percent + '% (' + this.formatCost(seg.cost) + ')';
+        out.push(
+          '<circle cx="80" cy="80" r="60" fill="none" stroke="' + escapeXml(seg.color) + '" stroke-width="24" stroke-dasharray="' + escapeXml(seg.dasharray) + '" stroke-dashoffset="' + escapeXml(seg.dashoffset) + '" transform="rotate(-90 80 80)" class="donut-segment">' +
+          '<title>' + escapeXml(title) + '</title>' +
+          '</circle>'
+        );
+      }
+
+      return out.join('');
+    },
+
     // ── Bar chart (last 7 days) ──
 
     barChartData() {
@@ -218,6 +245,42 @@ function analyticsPage() {
       return result;
     },
 
+    barChartSvg() {
+      var bars = this.barChartData();
+      if (!bars.length) return '';
+
+      function escapeXml(value) {
+        return String(value)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&apos;');
+      }
+
+      var out = [];
+      for (var i = 0; i < bars.length; i++) {
+        var bar = bars[i];
+        var x = i * 50 + 18;
+        var labelX = i * 50 + 30;
+        var y = 150 - bar.barHeight;
+        var costLabelY = y - 4;
+        var title = bar.date + ': ' + this.formatCost(bar.cost) + ' (' + bar.calls + ' calls)';
+
+        out.push(
+          '<g>' +
+          '<rect x="' + x + '" y="' + y + '" width="24" height="' + bar.barHeight + '" rx="3" fill="var(--accent)" class="cost-bar" style="opacity:0.85">' +
+          '<title>' + escapeXml(title) + '</title>' +
+          '</rect>' +
+          '<text x="' + labelX + '" y="166" text-anchor="middle" fill="var(--text-muted)" style="font-size:9px;font-family:var(--font-mono)">' + escapeXml(bar.dayName) + '</text>' +
+          '<text x="' + labelX + '" y="' + costLabelY + '" text-anchor="middle" fill="var(--text-dim)" style="font-size:8px;font-family:var(--font-mono)">' + escapeXml(this.formatCost(bar.cost)) + '</text>' +
+          '</g>'
+        );
+      }
+
+      return out.join('');
+    },
+
     // ── Cost by model table (sorted by cost descending) ──
 
     costByModelSorted() {