Add care experience breakdown pie chart

README.md

@@ -98,6 +98,7 @@ Backend listens on `http://localhost:8000`, Gradio on `http://localhost:7860`.
 After the conversation completes, the app runs post-conversation analysis and populates:
 - Bottom-up findings (emergent themes) with evidence
 - Top-down coding (care experience rubric + codebook categories) with evidence
+  - Care experience includes a model-rated positive/mixed/negative split (for pie chart summary)
 
 ### Analysis frameworks
 

backend/api/conversation_service.py

@@ -144,7 +144,7 @@ async def run_resource_agent_analysis(
     )
 
     schema_version = "9"
-    analysis_prompt_version = "v4-3pass"
+    analysis_prompt_version = "v5-3pass"
 
     evidence_catalog: Dict[str, Dict[str, Any]] = {}
     for message in transcript:
@@ -243,6 +243,11 @@ async def run_resource_agent_analysis(
             "{\n"
             f"  \"schema_version\": \"{schema_version}\",\n"
             f"  \"analysis_prompt_version\": \"{analysis_prompt_version}\",\n"
+            "  \"care_experience_breakdown\": {\n"
+            "    \"positive\": number,  // 0-100, sums to 100 with mixed + negative\n"
+            "    \"mixed\": number,\n"
+            "    \"negative\": number\n"
+            "  },\n"
             "  \"care_experience\": {\n"
             "    \"positive\": {\n"
             "      \"summary\": string,\n"
@@ -348,6 +353,26 @@ async def run_resource_agent_analysis(
         await _phase("rubric", "running")
         rubric_raw = await client.generate(prompt=_rubric_prompt(), system_prompt=rubric_system_prompt, temperature=0.2)
         rubric = json.loads(rubric_raw) if isinstance(rubric_raw, str) else {}
+        breakdown = rubric.get("care_experience_breakdown") or {}
+        breakdown_normalized = {}
+        if isinstance(breakdown, dict):
+            for key in ("positive", "mixed", "negative"):
+                value = breakdown.get(key)
+                try:
+                    num = float(value)
+                except (TypeError, ValueError):
+                    num = None
+                if num is not None:
+                    if num <= 1.0:
+                        num = num * 100.0
+                    breakdown_normalized[key] = max(0.0, min(100.0, num))
+        if breakdown_normalized:
+            total = sum(breakdown_normalized.values())
+            if total > 0:
+                for key in breakdown_normalized:
+                    breakdown_normalized[key] = round((breakdown_normalized[key] / total) * 100.0, 1)
+        else:
+            breakdown_normalized = None
         care_experience = rubric.get("care_experience") or {}
         for key in ("positive", "mixed", "negative", "neutral"):
             box = care_experience.get(key)
@@ -356,6 +381,7 @@ async def run_resource_agent_analysis(
                 if normalized is not None:
                     box["confidence"] = normalized
         await _partial({
+            "care_experience_breakdown": breakdown_normalized,
             "care_experience": care_experience,
         })
         await _phase("rubric", "complete")
@@ -397,6 +423,7 @@ async def run_resource_agent_analysis(
             "analysis_prompt_version": analysis_prompt_version,
             "evidence_catalog": evidence_catalog,
             "themes": themes,
+            "care_experience_breakdown": breakdown_normalized,
             "care_experience": care_experience,
             "top_down_codebook": td_book or {
                 "template_id": top_down_template_id or "",

docs/capabilities.md

@@ -88,6 +88,7 @@ Analysis runs post-conversation (or on uploaded text) and produces evidence-back
 
 - **Bottom-up findings** (emergent themes)
 - **Care experience rubric** (fixed buckets: positive / mixed / negative / neutral)
+  - Includes a model-rated split across positive/mixed/negative (for a pie chart summary)
 - **Top-down codebook categories** (template-driven)
 
 ### Analysis execution (3-pass)

frontend/pages/shared_views.py

@@ -443,6 +443,34 @@ def get_shared_views_js() -> str:
             } = props;
 
             const care = activeResources?.care_experience || null;
+            const breakdownRaw = activeResources?.care_experience_breakdown || null;
+            const normalizeBreakdown = (raw) => {
+                if (!raw || typeof raw !== 'object') return null;
+                const toNum = (v) => {
+                    if (typeof v === 'number') return v;
+                    const parsed = parseFloat(String(v));
+                    return Number.isFinite(parsed) ? parsed : null;
+                };
+                const out = {
+                    positive: toNum(raw.positive),
+                    mixed: toNum(raw.mixed),
+                    negative: toNum(raw.negative)
+                };
+                if (out.positive == null && out.mixed == null && out.negative == null) return null;
+                Object.keys(out).forEach((k) => {
+                    const v = out[k];
+                    if (v == null) return;
+                    out[k] = v <= 1 ? v * 100 : v;
+                });
+                const total = (out.positive || 0) + (out.mixed || 0) + (out.negative || 0);
+                if (!total) return null;
+                return {
+                    positive: Math.round(((out.positive || 0) / total) * 1000) / 10,
+                    mixed: Math.round(((out.mixed || 0) / total) * 1000) / 10,
+                    negative: Math.round(((out.negative || 0) / total) * 1000) / 10
+                };
+            };
+            const breakdown = normalizeBreakdown(breakdownRaw);
             if (!care || typeof care !== 'object') {
                 return (
                     <p className="text-slate-400 text-center py-8 text-sm">
@@ -459,6 +487,47 @@ def get_shared_views_js() -> str:
             const neutral = care.neutral || null;
             return (
                 <>
+                    {breakdown && (
+                        <div className="bg-slate-50 border border-slate-200 rounded-lg p-3">
+                            <div className="flex items-center justify-between gap-2 mb-2">
+                                <div className="text-xs font-semibold text-slate-600">Care experience split</div>
+                                <div className="relative group">
+                                    <div className="h-5 w-5 rounded-full border border-slate-300 text-slate-500 flex items-center justify-center text-[11px] font-semibold bg-white cursor-help">
+                                        i
+                                    </div>
+                                    <div className="pointer-events-none absolute right-0 top-6 z-10 w-64 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs text-slate-700 shadow-lg opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+                                        This pie chart reflects the model’s own judgment of how strongly the conversation supports positive, mixed, or negative experiences. It is a weighted perception (not a simple count), so one strong negative can outweigh many mild positives.
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-4">
+                                <div
+                                    className="h-20 w-20 rounded-full border border-slate-200"
+                                    style={{
+                                        background: `conic-gradient(#16a34a 0% ${breakdown.positive}%, #f59e0b ${breakdown.positive}% ${breakdown.positive + breakdown.mixed}%, #ef4444 ${breakdown.positive + breakdown.mixed}% 100%)`
+                                    }}
+                                    title={`Positive ${breakdown.positive}%, Mixed ${breakdown.mixed}%, Negative ${breakdown.negative}%`}
+                                />
+                                <div className="space-y-1 text-xs text-slate-700">
+                                    <div className="flex items-center gap-2">
+                                        <span className="inline-block h-2.5 w-2.5 rounded-full bg-green-600" />
+                                        <span>Positive</span>
+                                        <span className="ml-auto font-semibold">{breakdown.positive}%</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <span className="inline-block h-2.5 w-2.5 rounded-full bg-amber-500" />
+                                        <span>Mixed</span>
+                                        <span className="ml-auto font-semibold">{breakdown.mixed}%</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <span className="inline-block h-2.5 w-2.5 rounded-full bg-red-500" />
+                                        <span>Negative</span>
+                                        <span className="ml-auto font-semibold">{breakdown.negative}%</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
                     {renderCareBox('Positive', 'positive', positive, 'No positive insights detected.')}
                     {renderCareBox('Mixed / Tradeoffs', 'mixed', mixed, 'No mixed/tradeoff insights detected.')}
                     {renderCareBox('Negative', 'negative', negative, 'No negative insights detected.')}