refactor(ui): unify page headers and surface read failures

Add a PageHeader primitive (one H1 vocabulary, optional description,
back-link, and action slots) and route the hand-rolled headers through
it, so every module reads with the same title/subtitle rhythm and no
icon beside the page title. Mental Wellbeing gains a visible header.
Add a QueryErrorCard and wire the list surfaces so a failed read shows
a retry card instead of falling through to the empty state, and swap
their full-page spinners for skeletons that hold the layout.

src/components/ui/page-header.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+import { BackLink } from "@/components/ui/back-link";
+import { cn } from "@/lib/utils";
+
+/**
+ * The one canonical page header. Every module surface renders its title
+ * through this so the header vocabulary reads identically app-wide: the H1
+ * is always `text-2xl font-bold tracking-tight`, the description is always
+ * `text-muted-foreground text-sm`, and no icon sits beside the H1. An
+ * optional back-link rides above the title, and an `actions` slot holds the
+ * page's primary buttons to the right of the title block.
+ */
+export function PageHeader({
+  title,
+  description,
+  backLink,
+  actions,
+  className,
+}: {
+  title: ReactNode;
+  description?: ReactNode;
+  backLink?: { href: string; label: string; dataSlot?: string };
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-1.5", className)}>
+      {backLink ? <BackLink {...backLink} /> : null}
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 space-y-1.5">
+          <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+          {description ? (
+            <p className="text-muted-foreground text-sm">{description}</p>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex shrink-0 items-center gap-2">{actions}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

src/components/ui/query-error-card.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { AlertTriangle, RotateCw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { useTranslations } from "@/lib/i18n/context";
+import { cn } from "@/lib/utils";
+
+/**
+ * Read-failure card for list / data surfaces.
+ *
+ * Mirrors `<ChartErrorState>`'s shape + tone (AlertTriangle, a title line, a
+ * muted description, an optional Retry button) but renders inside a `Card` so
+ * a list page can tell "load failed" apart from an honest empty state — a
+ * failed query must never fall through to the "no data yet" copy. Defaults are
+ * the generic `common.*` strings so a caller can drop it in with just
+ * `onRetry`; a surface with its own "couldn't load X" string passes it through
+ * `title` / `description`.
+ */
+export function QueryErrorCard({
+  title,
+  description,
+  onRetry,
+  retryLabel,
+  className,
+}: {
+  title?: ReactNode;
+  description?: ReactNode;
+  onRetry?: () => void;
+  retryLabel?: string;
+  className?: string;
+}) {
+  const { t } = useTranslations();
+  return (
+    <Card data-slot="query-error-card" className={cn(className)}>
+      <CardContent
+        role="alert"
+        className="flex flex-col items-center justify-center gap-3 px-6 py-10 text-center"
+      >
+        <AlertTriangle
+          className="text-muted-foreground/60 h-8 w-8"
+          aria-hidden="true"
+        />
+        <p className="text-sm font-medium">{title ?? t("common.loadFailed")}</p>
+        {description ? (
+          <p className="text-muted-foreground text-sm">{description}</p>
+        ) : null}
+        {onRetry ? (
+          <Button variant="outline" size="sm" onClick={onRetry}>
+            <RotateCw className="h-3.5 w-3.5" aria-hidden="true" />
+            {retryLabel ?? t("common.retry")}
+          </Button>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}