+ {history}
{assessment ? (
-
+
{/* The comparison curve sits UNDER the live one so today's line is
never occluded by the reference it is being judged against. */}
{hasComparison ? (
diff --git a/src/components/insights/derived/score-history.tsx b/src/components/insights/derived/score-history.tsx
new file mode 100644
index 000000000..59744484d
--- /dev/null
+++ b/src/components/insights/derived/score-history.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { History } from "lucide-react";
+
+import { HealthChartDynamic } from "@/components/charts/health-chart-dynamic";
+import { TileHeader } from "@/components/insights/tile-header";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { useAuth } from "@/hooks/use-auth";
+import { useTranslations } from "@/lib/i18n/context";
+import { RING_GRADIENT, type RingHue } from "./ring-hues";
+
+/**
+ * v1.42 — a score's course over time on its detail page, directly under the
+ * score card.
+ *
+ * The three nightly scores (recovery, stress, strain) are stored readings, so
+ * they get the full metric chart every measured page carries: the 7 / 30 / 90
+ * / All switch, the tooltip, and each day opening its day view. The two
+ * composites (sleep score, readiness) are computed rather than stored, so the
+ * course they carry on their value is drawn as a compact line over its window.
+ */
+
+const DeltaSparkline = dynamic(
+ () =>
+ import("@/components/charts/chart-runtime").then((mod) => ({
+ default: mod.DeltaSparkline,
+ })),
+ { ssr: false, loading: () => null },
+);
+
+export function ScoreHistoryChart({
+ type,
+ hue,
+}: {
+ /** The stored measurement type the score is written as. */
+ type: "RECOVERY_SCORE" | "STRESS_SCORE" | "STRAIN_SCORE";
+ hue: RingHue;
+}) {
+ const { t } = useTranslations();
+ const { user } = useAuth();
+ return (
+
+
+
+ );
+}
+
+export function ScoreHistoryCard({
+ series,
+ windowDays,
+ hue,
+}: {
+ series: number[];
+ windowDays: number;
+ hue: RingHue;
+}) {
+ const { t } = useTranslations();
+ return (
+
+
+
+ {t("insights.derived.scores.historyWindow", { days: windowDays })}
+
+ }
+ />
+
+
+
+ ({ i, v }))}
+ strokeVar={RING_GRADIENT[hue][1]}
+ domain={[0, 100]}
+ />
+
+
+
+ );
+}
diff --git a/src/components/insights/derived/standards.ts b/src/components/insights/derived/standards.ts
index 39d1e3c12..a41a04394 100644
--- a/src/components/insights/derived/standards.ts
+++ b/src/components/insights/derived/standards.ts
@@ -111,7 +111,6 @@ export const METRIC_PROVENANCE: Record
=
name: "Plews et al. 2013, Sports Medicine",
url: "https://doi.org/10.1007/s40279-013-0071-8",
},
- caveatKey: "insights.derived.composite.READINESS.caveat",
},
RECOVERY_SCORE: {
methodKey: "insights.derived.composite.RECOVERY_SCORE.method",
@@ -120,7 +119,6 @@ export const METRIC_PROVENANCE: Record =
name: "Buchheit 2014, Front. Physiol.",
url: "https://doi.org/10.3389/fphys.2014.00073",
},
- caveatKey: "insights.derived.composite.RECOVERY_SCORE.caveat",
},
STRESS_SCORE: {
methodKey: "insights.derived.composite.STRESS_SCORE.method",
@@ -129,7 +127,6 @@ export const METRIC_PROVENANCE: Record =
name: "Kim et al. 2018, Psychiatry Investig.",
url: "https://doi.org/10.30773/pi.2017.08.17",
},
- caveatKey: "insights.derived.composite.STRESS_SCORE.caveat",
},
STRAIN_SCORE: {
methodKey: "insights.derived.composite.STRAIN_SCORE.method",
@@ -138,7 +135,6 @@ export const METRIC_PROVENANCE: Record =
name: "Banister 1991, TRIMP model",
url: "https://en.wikipedia.org/wiki/Training_Impulse",
},
- caveatKey: "insights.derived.composite.STRAIN_SCORE.caveat",
},
WRIST_TEMPERATURE_BASELINE: {
methodKey: "insights.derived.composite.WRIST_TEMPERATURE_BASELINE.method",
diff --git a/src/components/insights/derived/wellness-scores.tsx b/src/components/insights/derived/wellness-scores.tsx
index 29759f462..2ed39c544 100644
--- a/src/components/insights/derived/wellness-scores.tsx
+++ b/src/components/insights/derived/wellness-scores.tsx
@@ -1,6 +1,7 @@
"use client";
import { useState, type ComponentType } from "react";
+import dynamic from "next/dynamic";
import Link from "next/link";
import {
Activity,
@@ -16,7 +17,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import { useTranslations } from "@/lib/i18n/context";
import { SectionHeading } from "@/components/ui/section-heading";
import { ScoreRing } from "./score-ring";
-import { TILE_HUE, type RingHue } from "./ring-hues";
+import { RING_GRADIENT, TILE_HUE, type RingHue } from "./ring-hues";
import type { DerivedBatchRead } from "./use-derived-metric";
import type { ScoreBand } from "./band-tokens";
// Type-only — the compute payloads never drag the server graph into the bundle.
@@ -42,6 +43,17 @@ import type { WellnessScoreValue } from "@/lib/insights/derived/wellness-scores"
* rollup/persisted values; nothing warms on visit.
*/
+// The tile's history line loads through the shared chart-runtime boundary, so
+// the strip carries no recharts in its own chunk. The tile owns the fixed
+// 40 px band, so the async gap paints an empty band of the same size.
+const DeltaSparkline = dynamic(
+ () =>
+ import("@/components/charts/chart-runtime").then((mod) => ({
+ default: mod.DeltaSparkline,
+ })),
+ { ssr: false, loading: () => null },
+);
+
interface ScoreStripProps {
/** The batched-read selector from the parent dashboard's one query. */
read: DerivedBatchRead;
@@ -97,7 +109,14 @@ function RingTile({
index,
animate,
baseline,
+ history,
}: {
+ /**
+ * v1.42 — the score's course (oldest → newest) and the window it covers,
+ * drawn under the band word so each tile shows where the number came from.
+ * Fewer than two points draws nothing.
+ */
+ history?: { series: number[]; windowDays: number } | null;
score: number;
band: ScoreBand;
label: string;
@@ -165,10 +184,60 @@ function RingTile({
{bandWord}
+ {history && history.series.length >= 2 ? (
+
+
+ ({ i, v }))}
+ strokeVar={strokeVar}
+ domain={[0, 100]}
+ />
+
+
+ {t("insights.derived.scores.historyWindow", { days: windowDays })}
+
+