fix(ui): draw every failed read through a read-failure primitive

Around thirty surfaces drew a failed read their own way: a bare
destructive paragraph with no retry, a muted line saying the data was
still being learned, a skeleton that never ended, an error card nested
in a tile, or nothing at all. None of them told an ended session from a
refusal. They now use QueryErrorRow or QueryErrorCard with the query's
error and a retry, inset where a card already frames them, and keep
their card and title where the page would otherwise jump. Hydration and
caffeine now fail the same way.

The recovery page no longer points to Integrations while Oura's first
resilience level is simply on its way.

A guard reads every read hook's isError branch and refuses hand-rolled
markup there, and refuses a framed error row inside a card.

src/components/illness/illness-correlation-card.tsx

@@ -18,6 +18,7 @@ import { useTranslations } from "@/lib/i18n/context";
 
 import { useIllnessCorrelation } from "./use-illness";
 import type { IllnessCorrelationValue, IllnessVitalDeviation } from "./types";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
 
 /** Translate a MeasurementType to its illness-surface label. */
 function useVitalLabel() {
@@ -168,7 +169,8 @@ function CorrelationBody({ value }: { value: IllnessCorrelationValue }) {
 
 export function IllnessCorrelationCard({ episodeId }: { episodeId: string }) {
   const { t } = useTranslations();
-  const { data, isLoading, isError } = useIllnessCorrelation(episodeId);
+  const { data, isLoading, isError, error, refetch } =
+    useIllnessCorrelation(episodeId);
 
   return (
     <Card>
@@ -186,7 +188,15 @@ export function IllnessCorrelationCard({ episodeId }: { episodeId: string }) {
             <Skeleton className="h-4 w-1/2" />
             <Skeleton className="h-4 w-2/3" />
           </div>
-        ) : isError || !data || data.status !== "ok" || !data.value ? (
+        ) : isError && !data ? (
+          // A failed read is not "still learning": it says so and can retry.
+          <QueryErrorRow
+            inset
+            error={error}
+            slot="illness-correlation-error"
+            onRetry={() => void refetch()}
+          />
+        ) : !data || data.status !== "ok" || !data.value ? (
           <p className="text-muted-foreground text-sm">
             {t("illness.correlation.learning")}
           </p>

src/components/illness/illness-day-timeline.tsx

@@ -25,6 +25,7 @@ import { useUnitDisplay } from "@/hooks/use-unit-display";
 import { ILLNESS_SYMPTOM_CATALOG } from "./symptom-catalog";
 import { useIllnessDayLogList } from "./use-illness";
 import type { IllnessDayLogDTO } from "./types";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
 
 function symptomLabelKey(key: string): string | null {
   return ILLNESS_SYMPTOM_CATALOG.find((s) => s.key === key)?.labelKey ?? null;
@@ -106,7 +107,10 @@ export function IllnessDayTimeline({
   // v1.36.x — logging a day is not a delegated verb.
   const { canManageDomain } = useRecordCapabilities();
   const canManageIllness = canManageDomain("illness");
-  const { data, isLoading, isError } = useIllnessDayLogList(episodeId, "desc");
+  const { data, isLoading, isError, error, refetch } = useIllnessDayLogList(
+    episodeId,
+    "desc",
+  );
 
   const dayLogs = data?.dayLogs ?? [];
 
@@ -122,9 +126,13 @@ export function IllnessDayTimeline({
             <Skeleton className="h-4 w-2/3" />
           </div>
         ) : isError ? (
-          <p className="text-muted-foreground text-sm">
-            {t("illness.timeline.error")}
-          </p>
+          <QueryErrorRow
+            inset
+            error={error}
+            slot="illness-timeline-error"
+            message={t("illness.timeline.error")}
+            onRetry={() => void refetch()}
+          />
         ) : dayLogs.length === 0 ? (
           <div className="space-y-3">
             <p className="text-muted-foreground text-sm">

src/components/illness/illness-insights-card.tsx

@@ -20,6 +20,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "@/lib/i18n/context";
 
 import { useIllnessInsights } from "./use-illness";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
 
 export function IllnessInsightsCard({
   windowDays = 365,
@@ -55,6 +56,13 @@ export function IllnessInsightsCard({
             <Skeleton className="h-4 w-2/3" />
             <Skeleton className="h-4 w-1/2" />
           </div>
+        ) : counts.isError && !data ? (
+          <QueryErrorRow
+            inset
+            error={counts.error}
+            slot="illness-insights-error"
+            onRetry={() => void counts.refetch()}
+          />
         ) : !hasEpisodes ? (
           <p className="text-muted-foreground text-sm">
             {t("illness.insights.none")}
@@ -83,11 +91,14 @@ export function IllnessInsightsCard({
               <div className="space-y-2">
                 <Skeleton className="h-4 w-1/2" />
               </div>
-            ) : gap.isError || !gap.data ? (
-              <p className="text-muted-foreground">
-                {t("illness.insights.typicalGapLearning")}
-              </p>
-            ) : gap.data.typicalRecoveryGapDays === null ? (
+            ) : gap.isError && !gap.data ? (
+              <QueryErrorRow
+                inset
+                error={gap.error}
+                slot="illness-insights-gap-error"
+                onRetry={() => void gap.refetch()}
+              />
+            ) : !gap.data || gap.data.typicalRecoveryGapDays === null ? (
               <p className="text-muted-foreground">
                 {t("illness.insights.typicalGapLearning")}
               </p>