diff --git a/src/components/insights/trend-annotation.tsx b/src/components/insights/trend-annotation.tsx
index 3ebdc243a..009528e0a 100644
--- a/src/components/insights/trend-annotation.tsx
+++ b/src/components/insights/trend-annotation.tsx
@@ -43,6 +43,55 @@ export type TrendAnnotationConfidenceBand = "low" | "moderate" | "high";
export type TrendAnnotationStatus = "pending" | "needs_data" | "generated";
+/**
+ * Shared presentational shell for a filled trend caption — the bordered
+ * card + Sparkles affordance + `text-foreground` prose treatment. Both
+ * the advisor-authored annotation (the legacy triple) and the additive
+ * metric's standard description (`captionKey`) render through this shell
+ * so the Trends row reads with a single typographic rhythm and the two
+ * paths can't drift apart. `children` carries the line(s) below the
+ * caption prose (e.g. a confidence chip). `slot` / `metric` pass through
+ * to the wrapper's `data-*` hooks so each call site keeps its own
+ * test-stable selector.
+ */
+export function TrendCaptionCard({
+ text,
+ slot,
+ metric,
+ children,
+}: {
+ text: string;
+ slot: string;
+ metric: string;
+ children?: React.ReactNode;
+}) {
+ return (
+
+
+
+ {/* v1.4.28 R3c-Insights — `line-clamp-3` bounds caption
+ variance (FB-K2). A 1-sentence BP annotation paints
+ ~3 lines wrapped; a 4-line mood annotation used to push
+ the cell taller, which `auto-rows-fr` propagated to
+ every neighbour cell. With the clamp the longest
+ annotation ends with an ellipsis at 3 lines and the
+ row stays at a single visual rhythm. */}
+
+ {text}
+
+ {children}
+
+
+ );
+}
+
interface TrendAnnotationProps {
/** The metric this annotation describes. Drives the empty-state copy. */
metric: "bp" | "weight" | "mood";
@@ -122,36 +171,20 @@ export function TrendAnnotation({
}
return (
-
-
-
- {/* v1.4.28 R3c-Insights — `line-clamp-3` bounds caption
- variance (FB-K2). A 1-sentence BP annotation paints
- ~3 lines wrapped; a 4-line mood annotation used to push
- the cell taller, which `auto-rows-fr` propagated to
- every neighbour cell. With the clamp the longest
- annotation ends with an ellipsis at 3 lines and the
- row stays at a single visual rhythm. */}
-
- {stripChartTokens(annotation)}
-
- {confidence ? (
-
- {t(CONFIDENCE_LABEL_KEY[confidence])}
-
- ) : null}
-
-
+ {confidence ? (
+
+ {t(CONFIDENCE_LABEL_KEY[confidence])}
+
+ ) : null}
+
);
}
diff --git a/src/components/insights/trends-row.tsx b/src/components/insights/trends-row.tsx
index 77bc0e29d..1bfc94499 100644
--- a/src/components/insights/trends-row.tsx
+++ b/src/components/insights/trends-row.tsx
@@ -13,6 +13,7 @@ import {
} from "@/lib/insights/trend-chart-select";
import {
TrendAnnotation,
+ TrendCaptionCard,
type TrendAnnotationConfidenceBand,
type TrendAnnotationStatus,
} from "./trend-annotation";
@@ -216,13 +217,16 @@ export function TrendsRow({
// v1.8.6 W8 — additive metrics carry no advisor
// annotation. Paint the metric's standard one-line
// description so the card is never caption-less.
-
- {t(config.captionKey)}
-
+ // v1.8.7 W-E — render that description through the same
+ // `` shell the advisor caption uses, so
+ // the fallback caption shares the bordered card, Sparkles
+ // affordance, and `text-foreground` typography rather than
+ // standing out as a plain muted line.
+
)}
);