fix(captain): pie charts showed their title in quotes, and their labels too small

mermaid keeps a pie title's quotes as literal text (other chart types strip
them), so the widget unquotes pie titles before rendering. Pie title, legend
and slice labels are sized up, since the chart is drawn wide and scaled down to
the panel.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

public/assets/css/captain.css

@@ -260,7 +260,7 @@
     direction: ltr; overflow-x: auto;
 }
 .cpt-chart svg { display: block; width: 100%; height: auto; margin-inline: auto; stroke-width: initial; }
-.cpt-chart text.slice { paint-order: stroke; stroke: rgba(15, 23, 42, .35); stroke-width: 2px; }
+.cpt-chart text.slice { paint-order: stroke; stroke: rgba(15, 23, 42, .3); stroke-width: 1.5px; font-weight: 700; }
 .cpt-chart__tools { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .2s ease; }
 .cpt-chart:hover .cpt-chart__tools, .cpt-chart:focus-within .cpt-chart__tools { opacity: 1; }
 .cpt-chart__tools .cpt-icon { width: 30px; height: 30px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }

public/assets/js/captain.js

@@ -123,9 +123,10 @@
                     primaryColor: tint(brand, 0.9), primaryBorderColor: brand, primaryTextColor: '#0f172a',
                     secondaryColor: '#f1f5f9', tertiaryColor: '#f8fafc', lineColor: '#94a3b8', textColor: '#334155',
                     pieStrokeColor: '#ffffff', pieStrokeWidth: '2px', pieOuterStrokeWidth: '0px',
-                    pieTitleTextSize: '15px', pieTitleTextColor: '#0f172a',
-                    pieSectionTextColor: '#ffffff', pieSectionTextSize: '13px',
-                    pieLegendTextColor: '#334155', pieLegendTextSize: '13px',
+                    // Sized for the panel: the chart is drawn wide and scaled down to fit it.
+                    pieTitleTextSize: '20px', pieTitleTextColor: '#0f172a',
+                    pieSectionTextColor: '#ffffff', pieSectionTextSize: '16px',
+                    pieLegendTextColor: '#334155', pieLegendTextSize: '16px',
                     xyChart: {
                         backgroundColor: '#ffffff', titleColor: '#0f172a',
                         xAxisLabelColor: '#475569', yAxisLabelColor: '#475569',
@@ -457,7 +458,7 @@
         for (const fig of figs) {
             const id = 'cpt-m-' + Math.random().toString(36).slice(2, 10);
             try {
-                const { svg } = await mermaid.render(id, fig.dataset.src || '');
+                const { svg } = await mermaid.render(id, normalizeChart(fig.dataset.src || ''));
                 fig.classList.remove('cpt-chart--pending');
                 fig.innerHTML = svg;
                 const title = /title\s+"([^"]+)"/.exec(fig.dataset.src || '');
@@ -478,6 +479,12 @@
         scrollDown(false);
     }
 
+    // mermaid keeps a pie title's quotes as literal text (every other chart type
+    // strips them), and the model is told to quote Arabic titles.
+    function normalizeChart(src) {
+        return /^\s*pie\b/.test(src) ? src.replace(/(\btitle\s+)"([^"\n]*)"/, '$1$2') : src;
+    }
+
     function chartFailed(fig) {
         fig.classList.remove('cpt-chart--pending');
         fig.classList.add('cpt-chart--error');