From a75fbc6aafe585ec6256097c41f95efae4998a4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 9 May 2026 01:24:47 +0200
Subject: [PATCH] fix(insights): primary recommendation parses metric: chart
 tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The base-system prompt invites the model to embed `metric:WEIGHT` /
`metric:BP` etc. tokens in `primaryRecommendation` so the UI can drop
inline charts under the prose. The hero "Key Takeaway" card was the
only renderer printing the field raw — when the model followed the
instructions, the user saw the literal string `metric:WEIGHT` inside
the recommendation. Apply the same `stripChartTokens` + `<InlineCharts>`
pattern that the summary already uses.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/insights/insight-advisor-card.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/insights/insight-advisor-card.tsx b/src/components/insights/insight-advisor-card.tsx
index 20246da2b..af74dafef 100644
--- a/src/components/insights/insight-advisor-card.tsx
+++ b/src/components/insights/insight-advisor-card.tsx
@@ -402,13 +402,20 @@ export function InsightAdvisorCard({
           </div>
         )}
 
-        {/* Primary Recommendation */}
+        {/* Primary Recommendation — prose first, then any inline charts the
+         * model emitted via `metric:<TYPE>` tokens. Tokens are stripped from
+         * the visible text so they never leak into the hero card. */}
         {insight.primaryRecommendation && (
-          <div className="border-dracula-purple bg-dracula-purple/5 rounded-md border-l-2 px-4 py-3">
+          <div className="border-dracula-purple bg-dracula-purple/5 space-y-3 rounded-md border-l-2 px-4 py-3">
             <p className="text-dracula-purple mb-1 text-xs font-medium tracking-widest uppercase">
               {t("insights.keyTakeaway")}
             </p>
-            <p className="text-sm">{insight.primaryRecommendation}</p>
+            <p className="text-sm">
+              {stripChartTokens(insight.primaryRecommendation)}
+            </p>
+            <InlineCharts
+              tokens={parseChartTokens(insight.primaryRecommendation)}
+            />
           </div>
         )}