From 92f332efe67d098779a32e46a682ec9eb92956b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 10 May 2026 15:38:52 +0200
Subject: [PATCH] feat(insights): add <DailyBriefing> card component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New `src/components/insights/daily-briefing.tsx` renders the
full-width briefing card from the v1.4.20 redesign — narrative
paragraph + 0-5 key-finding rows below it, each row carries a
tone-coloured left bar (green/orange/cyan), metric icon, headline,
detail line, and an optional delta badge in the matching tone.

States covered:
  - loaded: paragraph + findings + optional 'Generated <time>' meta
  - empty (briefing=null + !loading): EmptyState with 'Generate
    briefing' CTA wired through onRegenerate
  - loading: animate-pulse skeleton matching the rest of the app's
    loading affordance
  - empty findings: paragraph still renders; the findings block
    hides cleanly so the card doesn't paint a void section header

Optional metaSlot in the card header so the comparison toggle can
migrate from the hero to the briefing card in commit 5.

EN + DE translation keys added (insights.dailyBriefing.*). Test
suite: +18 specs covering rendering + states + locale + tone bars.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../__tests__/daily-briefing.test.tsx         | 203 +++++++++++++
 src/components/insights/daily-briefing.tsx    | 273 ++++++++++++++++++
 2 files changed, 476 insertions(+)
 create mode 100644 src/components/insights/__tests__/daily-briefing.test.tsx
 create mode 100644 src/components/insights/daily-briefing.tsx

diff --git a/src/components/insights/__tests__/daily-briefing.test.tsx b/src/components/insights/__tests__/daily-briefing.test.tsx
new file mode 100644
index 000000000..a87e577be
--- /dev/null
+++ b/src/components/insights/__tests__/daily-briefing.test.tsx
@@ -0,0 +1,203 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { I18nProvider } from "@/lib/i18n/context";
+import { DailyBriefing } from "../daily-briefing";
+import type { DailyBriefing as DailyBriefingPayload } from "@/lib/ai/schema";
+
+/**
+ * v1.4.20 phase B1 — full-width Daily Briefing card.
+ *
+ * The card sits below the hero strip on `/insights` and renders the
+ * narrative paragraph + 0-5 key-finding rows produced by the AI
+ * pipeline. Tests cover: paragraph rendering, finding rows + tones +
+ * deltas, locale-aware title, empty state with CTA, loading skeleton,
+ * meta slot.
+ */
+
+function render(node: React.ReactNode, locale: "en" | "de" = "en") {
+  return renderToStaticMarkup(
+    <I18nProvider initialLocale={locale}>{node}</I18nProvider>,
+  );
+}
+
+const baseBriefing: DailyBriefingPayload = {
+  paragraph:
+    "You're trending well this week. Blood pressure is in target band on 9 of 10 readings, weight is down 2.5 kg over the last 30 days, and your medication compliance streak is now 21 days.",
+  keyFindings: [
+    {
+      tone: "good",
+      headline: "Blood pressure entered target",
+      detail: "9 of last 10 readings under 130/85.",
+      delta: "↓ 4 mmHg",
+      sourceWindow: "30d",
+      sourceMetric: "bp",
+    },
+    {
+      tone: "watch",
+      headline: "Monday-morning systolic spike",
+      detail: "+6 mmHg vs other weekdays.",
+      delta: "+6 mmHg",
+      sourceWindow: "30d",
+      sourceMetric: "bp",
+    },
+    {
+      tone: "info",
+      headline: "Weight down 30 d",
+      detail: "Linear, sustainable rate. BMI now 26.0.",
+      delta: null,
+      sourceWindow: "30d",
+      sourceMetric: "weight",
+    },
+  ],
+};
+
+describe("<DailyBriefing>", () => {
+  it("renders the title in English", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    expect(html).toMatch(/data-slot="daily-briefing"/);
+    expect(html).toContain("Daily Briefing");
+  });
+
+  it("renders the title in German", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />, "de");
+    expect(html).toContain("Tagesbriefing");
+  });
+
+  it("renders the narrative paragraph", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    expect(html).toMatch(/data-slot="daily-briefing-paragraph"/);
+    expect(html).toContain(
+      "Blood pressure is in target band on 9 of 10 readings",
+    );
+  });
+
+  it("renders one row per key finding", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    const matches = html.match(/data-slot="daily-briefing-finding"/g) ?? [];
+    expect(matches.length).toBe(3);
+    expect(html).toContain("Blood pressure entered target");
+    expect(html).toContain("Monday-morning systolic spike");
+    expect(html).toContain("Weight down 30 d");
+  });
+
+  it("renders the delta string when supplied", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    expect(html).toMatch(/data-slot="daily-briefing-delta"/);
+    expect(html).toContain("↓ 4 mmHg");
+    expect(html).toContain("+6 mmHg");
+  });
+
+  it("does NOT render a delta badge when delta is null", () => {
+    const html = render(
+      <DailyBriefing
+        briefing={{
+          ...baseBriefing,
+          keyFindings: [
+            {
+              ...baseBriefing.keyFindings[2],
+            },
+          ],
+        }}
+      />,
+    );
+    // Only one finding rendered, and it has delta=null.
+    const deltas = html.match(/data-slot="daily-briefing-delta"/g) ?? [];
+    expect(deltas.length).toBe(0);
+  });
+
+  it("uses tone-specific colour classes per finding", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    expect(html).toContain("bg-dracula-green"); // tone=good bar
+    expect(html).toContain("bg-dracula-orange"); // tone=watch bar
+    expect(html).toContain("bg-dracula-cyan"); // tone=info bar
+  });
+
+  it("renders the 'Generated <time>' caption when updatedAt is supplied", () => {
+    const fiveMinutesAgo = new Date(Date.now() - 5 * 60_000).toISOString();
+    const html = render(
+      <DailyBriefing briefing={baseBriefing} updatedAt={fiveMinutesAgo} />,
+    );
+    expect(html).toMatch(/data-slot="daily-briefing-updated"/);
+    expect(html).toContain("Generated");
+  });
+
+  it("does NOT render the updated caption when updatedAt is missing", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    expect(html).not.toContain('data-slot="daily-briefing-updated"');
+  });
+
+  it("renders the keyFindings title separator", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    expect(html).toMatch(/data-slot="daily-briefing-findings-title"/);
+    expect(html).toContain("Key findings");
+  });
+
+  it("hides the keyFindings section when the array is empty", () => {
+    const html = render(
+      <DailyBriefing
+        briefing={{ ...baseBriefing, keyFindings: [] }}
+      />,
+    );
+    expect(html).not.toContain('data-slot="daily-briefing-findings-title"');
+    expect(html).not.toContain('data-slot="daily-briefing-findings"');
+    // Paragraph still renders.
+    expect(html).toContain("trending well this week");
+  });
+
+  it("renders the empty state when briefing is null and not loading", () => {
+    const html = render(<DailyBriefing briefing={null} />);
+    expect(html).toMatch(/data-slot="daily-briefing-empty"/);
+    expect(html).toContain("No briefing yet");
+  });
+
+  it("renders the empty-state CTA when onRegenerate is supplied", () => {
+    const html = render(
+      <DailyBriefing briefing={null} onRegenerate={() => {}} />,
+    );
+    expect(html).toMatch(/data-slot="daily-briefing-empty-cta"/);
+    expect(html).toContain("Generate briefing");
+  });
+
+  it("hides the empty-state CTA when onRegenerate is not supplied", () => {
+    const html = render(<DailyBriefing briefing={null} />);
+    expect(html).not.toContain('data-slot="daily-briefing-empty-cta"');
+  });
+
+  it("disables the empty-state CTA while regenerating", () => {
+    const html = render(
+      <DailyBriefing
+        briefing={null}
+        onRegenerate={() => {}}
+        regenerating
+      />,
+    );
+    expect(html).toMatch(
+      /data-slot="daily-briefing-empty-cta"[^>]*disabled/,
+    );
+    expect(html).toContain("Regenerating");
+  });
+
+  it("renders the shimmer skeleton when loading", () => {
+    const html = render(<DailyBriefing briefing={null} loading />);
+    expect(html).toMatch(/data-slot="daily-briefing-skeleton"/);
+    expect(html).toContain("animate-pulse");
+    // Empty state must NOT render while loading.
+    expect(html).not.toContain('data-slot="daily-briefing-empty"');
+  });
+
+  it("renders the meta slot when supplied", () => {
+    const html = render(
+      <DailyBriefing
+        briefing={baseBriefing}
+        metaSlot={<span data-testid="meta-token">meta-content</span>}
+      />,
+    );
+    expect(html).toMatch(/data-slot="daily-briefing-meta-slot"/);
+    expect(html).toContain("meta-content");
+  });
+
+  it("does NOT render the meta-slot wrapper when metaSlot is missing", () => {
+    const html = render(<DailyBriefing briefing={baseBriefing} />);
+    expect(html).not.toContain('data-slot="daily-briefing-meta-slot"');
+  });
+});
diff --git a/src/components/insights/daily-briefing.tsx b/src/components/insights/daily-briefing.tsx
new file mode 100644
index 000000000..575fb70f5
--- /dev/null
+++ b/src/components/insights/daily-briefing.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import { Activity, FileText, Heart, Pill, Scale, Smile, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { EmptyState } from "@/components/ui/empty-state";
+import { useTranslations } from "@/lib/i18n/context";
+import { cn } from "@/lib/utils";
+import type {
+  DailyBriefing as DailyBriefingPayload,
+  DailyBriefingKeyFinding,
+} from "@/lib/ai/schema";
+
+/**
+ * v1.4.20 phase B1 — full-width Daily Briefing card.
+ *
+ * Renders the narrative paragraph + 0-5 key-finding rows synthesised
+ * by the AI insight pipeline. Lives directly below the hero strip on
+ * `/insights`. Keeps the existing per-section advisor + status cards
+ * untouched — this card is additive, not a replacement.
+ *
+ * Loading state: shimmer skeleton via Tailwind's `animate-pulse` so
+ * it matches the rest of the app.
+ *
+ * Empty state: when `briefing === null && !loading`, renders an
+ * <EmptyState> with a "Generate briefing" CTA wired through
+ * `onRegenerate`. The CTA hides cleanly when no handler is supplied.
+ */
+
+interface DailyBriefingProps {
+  /** Briefing payload — null when the cache has none. */
+  briefing: DailyBriefingPayload | null;
+  /** ISO timestamp of the briefing's generation, surfaced as a meta line. */
+  updatedAt?: string | null;
+  /** Loading state — shimmer skeleton replaces content. */
+  loading?: boolean;
+  /** Optional CTA wiring for the empty-state generate button. */
+  onRegenerate?: () => void;
+  /** Disables the regenerate CTA while a generation is in flight. */
+  regenerating?: boolean;
+  /**
+   * Optional slot for a meta control mounted in the card header — the
+   * comparison toggle migrates here from the hero in commit 5.
+   */
+  metaSlot?: React.ReactNode;
+}
+
+const METRIC_ICON: Record<DailyBriefingKeyFinding["sourceMetric"], React.ComponentType<{ className?: string }>> = {
+  bp: Heart,
+  weight: Scale,
+  pulse: Activity,
+  mood: Smile,
+  compliance: Pill,
+};
+
+const TONE_BAR_CLASSNAME: Record<DailyBriefingKeyFinding["tone"], string> = {
+  good: "bg-dracula-green",
+  watch: "bg-dracula-orange",
+  info: "bg-dracula-cyan",
+};
+
+const TONE_TEXT_CLASSNAME: Record<DailyBriefingKeyFinding["tone"], string> = {
+  good: "text-dracula-green",
+  watch: "text-dracula-orange",
+  info: "text-dracula-cyan",
+};
+
+function DeltaBadge({
+  delta,
+  tone,
+}: {
+  delta: string | null;
+  tone: DailyBriefingKeyFinding["tone"];
+}) {
+  if (!delta) return null;
+  return (
+    <span
+      data-slot="daily-briefing-delta"
+      className={cn("text-xs font-semibold tabular-nums", TONE_TEXT_CLASSNAME[tone])}
+    >
+      {delta}
+    </span>
+  );
+}
+
+function KeyFindingRow({ finding }: { finding: DailyBriefingKeyFinding }) {
+  const Icon = METRIC_ICON[finding.sourceMetric];
+  return (
+    <div
+      data-slot="daily-briefing-finding"
+      className="border-border/60 bg-card/40 relative flex items-start gap-3 rounded-md border p-3"
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "absolute top-3 bottom-3 left-0 w-[3px] rounded-r",
+          TONE_BAR_CLASSNAME[finding.tone],
+        )}
+      />
+      <Icon
+        className={cn("mt-0.5 h-4 w-4 shrink-0", TONE_TEXT_CLASSNAME[finding.tone])}
+        aria-hidden="true"
+      />
+      <div className="min-w-0 flex-1 space-y-1">
+        <div className="flex items-start justify-between gap-3">
+          <p className="text-sm leading-snug font-medium">{finding.headline}</p>
+          <DeltaBadge delta={finding.delta} tone={finding.tone} />
+        </div>
+        <p className="text-muted-foreground text-xs leading-snug">{finding.detail}</p>
+      </div>
+    </div>
+  );
+}
+
+function BriefingSkeleton() {
+  return (
+    <div
+      data-slot="daily-briefing-skeleton"
+      className="space-y-4 motion-reduce:animate-none"
+      aria-hidden="true"
+    >
+      <div className="space-y-2">
+        <div className="bg-muted/60 h-3 w-11/12 animate-pulse rounded" />
+        <div className="bg-muted/60 h-3 w-10/12 animate-pulse rounded" />
+        <div className="bg-muted/60 h-3 w-9/12 animate-pulse rounded" />
+        <div className="bg-muted/60 h-3 w-8/12 animate-pulse rounded" />
+      </div>
+      <div className="space-y-2">
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className="border-border/40 bg-card/30 flex h-16 items-center rounded-md border p-3"
+          >
+            <div className="bg-muted/60 h-3 w-1/3 animate-pulse rounded" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function DailyBriefing({
+  briefing,
+  updatedAt,
+  loading = false,
+  onRegenerate,
+  regenerating = false,
+  metaSlot,
+}: DailyBriefingProps) {
+  const { t } = useTranslations();
+
+  return (
+    <Card data-slot="daily-briefing" className="overflow-hidden">
+      <CardHeader className="pb-3">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <Sparkles
+              className="text-dracula-purple h-4 w-4 shrink-0"
+              aria-hidden="true"
+            />
+            <CardTitle className="text-base font-semibold">
+              {t("insights.dailyBriefing.title")}
+            </CardTitle>
+          </div>
+          {metaSlot && (
+            <div data-slot="daily-briefing-meta-slot" className="flex items-center gap-2">
+              {metaSlot}
+            </div>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <>
+            <span className="sr-only" aria-live="polite">
+              {t("insights.dailyBriefing.loadingLabel")}
+            </span>
+            <BriefingSkeleton />
+          </>
+        ) : briefing ? (
+          <div className="space-y-4">
+            <p
+              data-slot="daily-briefing-paragraph"
+              className="text-foreground text-sm leading-relaxed"
+            >
+              {briefing.paragraph}
+            </p>
+            {briefing.keyFindings.length > 0 && (
+              <div className="space-y-2">
+                <p
+                  data-slot="daily-briefing-findings-title"
+                  className="text-muted-foreground text-[11px] font-semibold tracking-wide uppercase"
+                >
+                  {t("insights.dailyBriefing.keyFindingsTitle")}
+                </p>
+                <div
+                  data-slot="daily-briefing-findings"
+                  className="space-y-2"
+                >
+                  {briefing.keyFindings.map((finding, index) => (
+                    <KeyFindingRow
+                      key={`${finding.sourceMetric}-${index}`}
+                      finding={finding}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+            {updatedAt && (
+              <p
+                data-slot="daily-briefing-updated"
+                className="text-muted-foreground border-border/60 border-t pt-3 text-xs"
+              >
+                {t("insights.heroGenerated", {
+                  time: formatRelativeTime(updatedAt, t),
+                })}
+              </p>
+            )}
+          </div>
+        ) : (
+          <EmptyState
+            data-slot="daily-briefing-empty"
+            variant="plain"
+            icon={<FileText className="size-5" />}
+            title={t("insights.dailyBriefing.emptyTitle")}
+            description={t("insights.dailyBriefing.emptyDescription")}
+            action={
+              onRegenerate ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={onRegenerate}
+                  disabled={regenerating}
+                  data-slot="daily-briefing-empty-cta"
+                  className="gap-1.5"
+                >
+                  <Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
+                  <span>
+                    {regenerating
+                      ? t("insights.heroRegenerating")
+                      : t("insights.dailyBriefing.emptyAction")}
+                  </span>
+                </Button>
+              ) : null
+            }
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * Bucketed relative-time using i18n translation keys so every surface
+ * shares vocabulary. Buckets: <1m, <1h, <24h, else days. Mirrors the
+ * helper in `<InsightsPageHero>` so the two cards format the same way.
+ */
+function formatRelativeTime(
+  iso: string,
+  t: (key: string, params?: Record<string, string | number>) => string,
+): string {
+  const target = new Date(iso).getTime();
+  if (Number.isNaN(target)) return "";
+  const diffMs = Date.now() - target;
+  if (diffMs < 60_000) return t("insights.relativeJustNow");
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 60) return t("insights.relativeMinutesAgo", { count: minutes });
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return t("insights.relativeHoursAgo", { count: hours });
+  const days = Math.floor(hours / 24);
+  return t("insights.relativeDaysAgo", { count: days });
+}