feat(topics): add the Topics preview area, its navigation entry and its switch

/topics shows a tile per topic the record holds data for, and names the
empty topics and the module-hidden ones once each. /topics/<topic>
shows the topic today, its signals side by side over 7, 30, 90 days or
a year against their usual range, how they move together, their trends,
its blocks, the single-metric pages behind it and what it is missing.
Every topic links into the metric pages, which stay as they are, and
each page ends on a neutral note that this is a preview.

Settings > System > Preview features is listed again and switches the
area on for the person reading. While it is on, the sidebar carries a
Topics entry with a Beta badge directly below Insights and the phone's
More sheet leads with a Topics tile; the bottom bar does not change.
The pages leave for Insights when the switch is off.

The charts load through the shared chart runtime. The sidebar rows move
into their own module and the More sheet tile into its own component,
so neither shell file grows; the lab trend wording is shared between the
marker page and the metabolism topic. Copy in all nine locales.

bundle-budget.json

@@ -116,6 +116,8 @@
     "/settings/modules/[module]/page": 374,
     "/settings/page": 282,
     "/timeline/page": 331,
+    "/topics/[topic]/page": 298,
+    "/topics/page": 293,
     "/vaccinations/page": 327
   }
 }

eslint.config.mjs

@@ -236,6 +236,7 @@ const eslintConfig = defineConfig([
       "src/components/charts/workout-elevation-chart.tsx",
       "src/components/insights/coach-panel/result-chart.tsx",
       "src/components/insights/derived/score-trend-chart.tsx",
+      "src/components/topics/topic-side-by-side-chart.tsx",
     ],
     rules: {
       "no-restricted-imports": [

messages/de.json

@@ -509,7 +509,9 @@
     "documents": "Dokumente",
     "vaccinations": "Impfungen",
     "mentalWellbeing": "Seelisches Wohlbefinden",
-    "timeline": "Zeitleiste"
+    "timeline": "Zeitleiste",
+    "topics": "Themen",
+    "previewBadge": "Beta"
   },
   "auth": {
     "login": "Anmelden",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "Geteilter Zugriff",
         "subtitle": "Wer deine Gesundheitsakte öffnen kann und wessen Akte du öffnen kannst."
+      },
+      "preview": {
+        "title": "Vorschau-Funktionen",
+        "subtitle": "Probier aus, was noch nicht fertig ist. Alles hier bleibt aus, bis du es einschaltest."
       }
     },
     "profile": "Profil",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "Passkey entfernt.",
     "integrationDisconnected": "{provider} getrennt.",
     "integrationDisconnectFailed": "{provider} konnte nicht getrennt werden.",
+    "preview": {
+      "topics": {
+        "title": "Themen",
+        "description": "Fügt einen Bereich Themen hinzu, der zusammengehörige Werte bündelt, neben deinen Insights-Seiten.",
+        "detail": "Acht Themen, von Herz bis Zyklus, zeigen deine Werte nebeneinander, wie sie zusammenhängen, und führen in die Einzelseiten, die du schon kennst. Deine Insights-Seiten, die Navigation und alle Links bleiben genau, wie sie sind. Alles wird aus deinen eigenen Werten berechnet, ohne KI. Ausschalten entfernt den Eintrag und löscht nichts.",
+        "savedOn": "Themen-Vorschau eingeschaltet.",
+        "savedOff": "Themen-Vorschau ausgeschaltet.",
+        "open": "Themen öffnen"
+      },
+      "loadError": "Deine Vorschau-Einstellungen konnten nicht geladen werden."
+    },
     "timezoneSaved": "Zeitzone gespeichert.",
     "moduleState": {
       "on": "An",
@@ -13825,5 +13842,171 @@
       "startsOn": "Beginn",
       "endsOn": "Ende"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "Themen",
+      "description": "Zusammengehörige Werte, aus deinen eigenen Daten gebündelt; öffne ein Thema, um sie nebeneinander zu sehen.",
+      "emptyTitle": "Noch nichts zum Bündeln",
+      "emptyDescription": "Themen erscheinen, sobald es Werte dafür gibt: von einem Gerät, aus einem Import oder von dir eingetragen.",
+      "notRecorded": "Noch keine Werte für: {topics}.",
+      "hiddenByModule": "Ausgeblendet, weil das Modul aus ist: {topics}.",
+      "modulesLink": "Module in den Einstellungen ändern"
+    },
+    "detail": {
+      "back": "Alle Themen"
+    },
+    "loadError": "Die Themen konnten nicht geladen werden.",
+    "previewNote": "Das ist eine Vorschau. Sie kann sich zwischen Versionen ändern, und deine Einzelseiten bleiben, wie sie sind.",
+    "recorded": "Erfasste Werte: {count} von {total}",
+    "tone": {
+      "steady": "Stabil",
+      "watch": "Einen Blick wert",
+      "learning": "Lernt noch"
+    },
+    "summary": {
+      "outsideAbove": "{signal} liegt über deinem üblichen Bereich.",
+      "outsideBelow": "{signal} liegt unter deinem üblichen Bereich.",
+      "labs": "{count} von {total} Laborwerten liegen im Referenzbereich.",
+      "cycleDay": "Zyklustag {day}.",
+      "steadyAll": "Alles Erfasste liegt in deinem üblichen Bereich.",
+      "steadySome": "{count} von {total} Werten liegen in deinem üblichen Bereich; für die übrigen lernt HealthLog noch.",
+      "learning": "Dein üblicher Bereich wird noch gelernt. Eine Woche mit Werten reicht.",
+      "empty": "Noch nichts erfasst."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "im Bereich",
+      "cycleDay": "Tag {day}"
+    },
+    "signals": {
+      "mood": "Stimmung"
+    },
+    "units": {
+      "moodScale": "von 5"
+    },
+    "names": {
+      "heart": {
+        "title": "Herz",
+        "description": "Ruhepuls, Herzfrequenzvariabilität und Fitness, mit dem Schlaf und Training, die sie bewegen."
+      },
+      "body": {
+        "title": "Körper",
+        "description": "Gewicht und Körperzusammensetzung im Verlauf."
+      },
+      "bloodPressure": {
+        "title": "Blutdruck",
+        "description": "Systolisch, diastolisch und Puls, mit Schlaf und Aktivität drumherum."
+      },
+      "sleep": {
+        "title": "Schlaf",
+        "description": "Schlafdauer und die Werte, die nachts gemessen werden."
+      },
+      "activity": {
+        "title": "Aktivität & Training",
+        "description": "Schritte, Trainingsminuten, aktive Energie und Trainingslast."
+      },
+      "metabolism": {
+        "title": "Stoffwechsel & Labor",
+        "description": "Blutzucker und deine Laborwerte, mit dem Trend jedes Markers."
+      },
+      "mind": {
+        "title": "Psyche",
+        "description": "Stimmung und Fragebögen neben Schlaf und Aktivität."
+      },
+      "cycle": {
+        "title": "Zyklus",
+        "description": "Dein Zyklus mit der Temperatur und dem Ruhepuls, die ihm folgen."
+      }
+    },
+    "sources": {
+      "heart": "Diese Werte kommen von einer Uhr, einem Ring oder Brustgurt, aus Apple Health oder Health Connect oder von dir eingetragen.",
+      "body": "Diese Werte kommen von einer Waage, aus einem Import oder von dir eingetragen.",
+      "bloodPressure": "Diese Werte kommen von einem Blutdruckmessgerät, aus einem Import oder von dir eingetragen.",
+      "sleep": "Diese Werte kommen von einer Uhr oder einem Ring, aus Apple Health oder Health Connect oder von dir eingetragen.",
+      "activity": "Diese Werte kommen von Handy, Uhr oder Ring oder aus Apple Health oder Health Connect.",
+      "metabolism": "Blutzucker kommt von einem Messgerät, aus einem Sensor-Import oder von dir; Laborwerte aus einem Laborbericht oder von dir eingetragen.",
+      "mind": "Diese Werte kommen aus deinen Stimmungseinträgen und den Fragebögen auf der Seite Seelisches Wohlbefinden.",
+      "cycle": "Diese Werte kommen aus deinem Zyklusprotokoll und einem Temperatursensor am Handgelenk."
+    },
+    "today": {
+      "title": "Heute",
+      "usual": "Üblich {low}–{high}",
+      "learning": "Üblicher Bereich wird noch gelernt",
+      "asOf": "Stand {date}",
+      "details": "Details"
+    },
+    "state": {
+      "within": "Im Bereich",
+      "above": "Über üblich",
+      "below": "Unter üblich",
+      "learning": "Lernt noch"
+    },
+    "chart": {
+      "title": "Nebeneinander",
+      "legend": "Schattiert: dein üblicher Bereich.",
+      "label": "{signals} im gewählten Zeitraum, je eine Zeile."
+    },
+    "range": {
+      "label": "Zeitraum",
+      "7d": "7 T",
+      "30d": "30 T",
+      "90d": "90 T",
+      "1y": "1 J"
+    },
+    "relationships": {
+      "title": "Wie sie zusammenhängen",
+      "insufficient": "{x} und {y}: bisher {count} von {required} gemeinsamen Tagen.",
+      "noClearLink": "Kein klarer Zusammenhang zwischen {x} und {y} über {count} gemeinsame Tage.",
+      "splitHigher": "Wenn {x} unter {threshold} lag, war {y} um {amount} höher als an anderen Tagen.",
+      "splitLower": "Wenn {x} unter {threshold} lag, war {y} um {amount} niedriger als an anderen Tagen.",
+      "splitDays": "Tage darunter: {below}. Andere Tage: {other}.",
+      "correlationSameDayHigher": "Wenn {x} höher liegt, ist auch {y} meist höher (r = {r}).",
+      "correlationSameDayLower": "Wenn {x} höher liegt, ist {y} meist niedriger (r = {r}).",
+      "correlationNextDayHigher": "Wenn {x} höher liegt, ist {y} am nächsten Tag meist höher (r = {r}).",
+      "correlationNextDayLower": "Wenn {x} höher liegt, ist {y} am nächsten Tag meist niedriger (r = {r}).",
+      "pairedDays": "Gemeinsame Tage: {count}",
+      "footnote": "Erscheint, sobald zwei Werte an mindestens 14 Tagen zusammen vorliegen. Ein Muster, keine Ursache.",
+      "scatterCaption": "Jeder Punkt ist ein Tag: {x} nach rechts, {y} nach oben."
+    },
+    "trends": {
+      "title": "Trends",
+      "window": "90 Tage, Wochenmittel",
+      "insufficient": "Braucht 14 Tage, bisher {count}"
+    },
+    "labs": {
+      "title": "Laborwerte",
+      "above": "Über dem Bereich",
+      "below": "Unter dem Bereich",
+      "trendsTitle": "Trends",
+      "trendNeeds": "Ein Trend braucht drei Werte über mindestens ein Jahr. Noch nicht so weit: {markers}."
+    },
+    "screeners": {
+      "title": "Fragebögen",
+      "none": "Noch keine Fragebögen ausgefüllt.",
+      "checkIns": "Ausgefüllt: {count}",
+      "improved": "Besser als beim ersten Mal",
+      "worsened": "Schlechter als beim ersten Mal",
+      "within_threshold": "Im üblichen Schwankungsbereich",
+      "single": "Bisher einmal ausgefüllt",
+      "open": "Seelisches Wohlbefinden öffnen"
+    },
+    "cycle": {
+      "title": "Zyklus",
+      "today": "Zyklustag {day}.",
+      "todayWithPhase": "Zyklustag {day}, {phase}.",
+      "average": "Durchschnittliche Zykluslänge: {days} Tage.",
+      "needs": "Ein Durchschnitt braucht zwei erfasste Periodenbeginne; bisher sind es {count}.",
+      "lengths": "Letzte Zyklen in Tagen: {lengths}",
+      "open": "Zyklus öffnen"
+    },
+    "links": {
+      "title": "Einzelseiten",
+      "workouts": "Workouts"
+    },
+    "missing": {
+      "title": "Noch nicht erfasst: {signals}.",
+      "connect": "Quelle verbinden"
+    }
   }
 }

messages/en.json

@@ -509,7 +509,9 @@
     "documents": "Documents",
     "vaccinations": "Vaccinations",
     "mentalWellbeing": "Mental wellbeing",
-    "timeline": "Timeline"
+    "timeline": "Timeline",
+    "topics": "Topics",
+    "previewBadge": "Beta"
   },
   "auth": {
     "login": "Sign in",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "Shared access",
         "subtitle": "Who can open your health record, and whose you can open."
+      },
+      "preview": {
+        "title": "Preview features",
+        "subtitle": "Try what is not finished yet. Everything here stays off until you switch it on."
       }
     },
     "profile": "Profile",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "Passkey removed.",
     "integrationDisconnected": "{provider} disconnected.",
     "integrationDisconnectFailed": "Could not disconnect {provider}.",
+    "preview": {
+      "topics": {
+        "title": "Topics",
+        "description": "Adds a Topics area that brings related signals together, beside your Insights pages.",
+        "detail": "Eight topics, from heart to cycle, show your signals side by side, how they move together and links into the single-metric pages you already use. Your Insights pages, navigation and links stay exactly as they are. Everything is computed from your own values, without AI. Switching it off removes the entry and deletes nothing.",
+        "savedOn": "Topics preview switched on.",
+        "savedOff": "Topics preview switched off.",
+        "open": "Open Topics"
+      },
+      "loadError": "Could not load your preview settings."
+    },
     "timezoneSaved": "Timezone saved.",
     "moduleState": {
       "on": "On",
@@ -13877,5 +13894,171 @@
       "startsOn": "Start",
       "endsOn": "End"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "Topics",
+      "description": "Related signals brought together from your own values; open one to see them side by side.",
+      "emptyTitle": "Nothing to bring together yet",
+      "emptyDescription": "Topics appear once there are readings for them, from a device, an import or your own entries.",
+      "notRecorded": "Nothing recorded yet for: {topics}.",
+      "hiddenByModule": "Hidden because the module is off: {topics}.",
+      "modulesLink": "Change modules in Settings"
+    },
+    "detail": {
+      "back": "All topics"
+    },
+    "loadError": "Could not load the topics.",
+    "previewNote": "This is a preview. It may change between releases, and your single-metric pages stay as they are.",
+    "recorded": "Signals recorded: {count} of {total}",
+    "tone": {
+      "steady": "Steady",
+      "watch": "Worth a look",
+      "learning": "Learning"
+    },
+    "summary": {
+      "outsideAbove": "{signal} is above your usual range.",
+      "outsideBelow": "{signal} is below your usual range.",
+      "labs": "{count} of {total} lab values sit inside their reference range.",
+      "cycleDay": "Cycle day {day}.",
+      "steadyAll": "Everything recorded sits inside your usual range.",
+      "steadySome": "{count} of {total} signals sit inside your usual range; the others are still being learned.",
+      "learning": "Still learning your usual range. A week of readings is enough.",
+      "empty": "Nothing recorded yet."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "in range",
+      "cycleDay": "Day {day}"
+    },
+    "signals": {
+      "mood": "Mood"
+    },
+    "units": {
+      "moodScale": "of 5"
+    },
+    "names": {
+      "heart": {
+        "title": "Heart",
+        "description": "Resting heart rate, heart-rate variability and cardio fitness, with the sleep and training that move them."
+      },
+      "body": {
+        "title": "Body",
+        "description": "Weight and body composition over time."
+      },
+      "bloodPressure": {
+        "title": "Blood pressure",
+        "description": "Systolic, diastolic and pulse, with the sleep and activity around them."
+      },
+      "sleep": {
+        "title": "Sleep",
+        "description": "Time asleep and the signals measured at night."
+      },
+      "activity": {
+        "title": "Activity & training",
+        "description": "Steps, exercise minutes, active energy and training load."
+      },
+      "metabolism": {
+        "title": "Metabolism & labs",
+        "description": "Blood glucose and your lab values, with each marker's trend."
+      },
+      "mind": {
+        "title": "Mind",
+        "description": "Mood and screener check-ins beside sleep and activity."
+      },
+      "cycle": {
+        "title": "Cycle",
+        "description": "Your cycle with the temperature and resting heart rate that follow it."
+      }
+    },
+    "sources": {
+      "heart": "These come from a watch, ring or chest strap, from Apple Health or Health Connect, or from your own entries.",
+      "body": "These come from a smart scale, an import or your own entries.",
+      "bloodPressure": "These come from a blood pressure monitor, an import or your own entries.",
+      "sleep": "These come from a watch or ring, from Apple Health or Health Connect, or from your own entries.",
+      "activity": "These come from a phone, watch or ring, or from Apple Health or Health Connect.",
+      "metabolism": "Glucose comes from a meter, a sensor import or your own entries; lab values from a lab report or your own entries.",
+      "mind": "These come from mood entries and the check-ins on the mental wellbeing page.",
+      "cycle": "These come from your cycle log and a wrist temperature sensor."
+    },
+    "today": {
+      "title": "Today",
+      "usual": "Usual {low}–{high}",
+      "learning": "Usual range still being learned",
+      "asOf": "As of {date}",
+      "details": "Details"
+    },
+    "state": {
+      "within": "Within",
+      "above": "Above usual",
+      "below": "Below usual",
+      "learning": "Learning"
+    },
+    "chart": {
+      "title": "Side by side",
+      "legend": "Shaded: your usual range.",
+      "label": "{signals} over the selected period, one row each."
+    },
+    "range": {
+      "label": "Period",
+      "7d": "7d",
+      "30d": "30d",
+      "90d": "90d",
+      "1y": "1y"
+    },
+    "relationships": {
+      "title": "How they move together",
+      "insufficient": "{x} and {y}: {count} of {required} paired days so far.",
+      "noClearLink": "No clear link between {x} and {y} over {count} paired days.",
+      "splitHigher": "When {x} was under {threshold}, {y} was {amount} higher than on other days.",
+      "splitLower": "When {x} was under {threshold}, {y} was {amount} lower than on other days.",
+      "splitDays": "Days under: {below}. Other days: {other}.",
+      "correlationSameDayHigher": "When {x} runs higher, {y} tends to be higher too (r = {r}).",
+      "correlationSameDayLower": "When {x} runs higher, {y} tends to be lower (r = {r}).",
+      "correlationNextDayHigher": "When {x} runs higher, {y} the next day tends to be higher (r = {r}).",
+      "correlationNextDayLower": "When {x} runs higher, {y} the next day tends to be lower (r = {r}).",
+      "pairedDays": "Paired days: {count}",
+      "footnote": "Shown once two signals overlap on at least 14 days. A pattern, not a cause.",
+      "scatterCaption": "Each dot is one day: {x} across, {y} up."
+    },
+    "trends": {
+      "title": "Trends",
+      "window": "90 days, weekly means",
+      "insufficient": "Needs 14 days, {count} so far"
+    },
+    "labs": {
+      "title": "Lab values",
+      "above": "Above range",
+      "below": "Below range",
+      "trendsTitle": "Trends",
+      "trendNeeds": "A trend needs three values spanning a year. Not there yet: {markers}."
+    },
+    "screeners": {
+      "title": "Check-ins",
+      "none": "No screener check-ins yet.",
+      "checkIns": "Check-ins: {count}",
+      "improved": "Better than the first",
+      "worsened": "Worse than the first",
+      "within_threshold": "Within the usual wobble",
+      "single": "One check-in so far",
+      "open": "Open mental wellbeing"
+    },
+    "cycle": {
+      "title": "Cycle",
+      "today": "Cycle day {day}.",
+      "todayWithPhase": "Cycle day {day}, {phase} phase.",
+      "average": "Average cycle length: {days} days.",
+      "needs": "An average needs two logged period starts; there are {count} so far.",
+      "lengths": "Recent cycles, in days: {lengths}",
+      "open": "Open the cycle page"
+    },
+    "links": {
+      "title": "Single-metric pages",
+      "workouts": "Workouts"
+    },
+    "missing": {
+      "title": "Not recorded yet: {signals}.",
+      "connect": "Connect a source"
+    }
   }
 }

messages/es.json

@@ -509,7 +509,9 @@
     "documents": "Documentos",
     "vaccinations": "Vacunas",
     "mentalWellbeing": "Bienestar mental",
-    "timeline": "Cronología"
+    "timeline": "Cronología",
+    "topics": "Temas",
+    "previewBadge": "Beta"
   },
   "auth": {
     "login": "Iniciar sesión",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "Acceso compartido",
         "subtitle": "Quién puede abrir tu historial de salud y cuál puedes abrir tú."
+      },
+      "preview": {
+        "title": "Funciones en vista previa",
+        "subtitle": "Prueba lo que aún no está terminado. Todo aquí sigue desactivado hasta que lo actives."
       }
     },
     "profile": "Perfil",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "Passkey eliminada.",
     "integrationDisconnected": "{provider} desconectado.",
     "integrationDisconnectFailed": "No se pudo desconectar {provider}.",
+    "preview": {
+      "topics": {
+        "title": "Temas",
+        "description": "Añade un área Temas que reúne valores relacionados, junto a tus páginas de Insights.",
+        "detail": "Ocho temas, del corazón al ciclo, muestran tus valores uno al lado del otro, cómo se mueven juntos y enlaces a las páginas por métrica que ya usas. Tus páginas de Insights, la navegación y los enlaces quedan exactamente como están. Todo se calcula con tus propios valores, sin IA. Desactivarlo quita la entrada y no borra nada.",
+        "savedOn": "Vista previa de Temas activada.",
+        "savedOff": "Vista previa de Temas desactivada.",
+        "open": "Abrir Temas"
+      },
+      "loadError": "No se pudieron cargar tus ajustes de vista previa."
+    },
     "timezoneSaved": "Zona horaria guardada.",
     "moduleState": {
       "on": "Activado",
@@ -13825,5 +13842,171 @@
       "startsOn": "Inicio",
       "endsOn": "Fin"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "Temas",
+      "description": "Valores relacionados, reunidos a partir de tus propios datos; abre un tema para verlos uno al lado del otro.",
+      "emptyTitle": "Todavía no hay nada que reunir",
+      "emptyDescription": "Los temas aparecen en cuanto hay valores para ellos: de un dispositivo, una importación o tus propios registros.",
+      "notRecorded": "Aún sin registros para: {topics}.",
+      "hiddenByModule": "Ocultos porque el módulo está desactivado: {topics}.",
+      "modulesLink": "Cambiar módulos en los ajustes"
+    },
+    "detail": {
+      "back": "Todos los temas"
+    },
+    "loadError": "No se pudieron cargar los temas.",
+    "previewNote": "Esto es una vista previa. Puede cambiar entre versiones, y tus páginas por métrica siguen como están.",
+    "recorded": "Valores registrados: {count} de {total}",
+    "tone": {
+      "steady": "Estable",
+      "watch": "Merece un vistazo",
+      "learning": "Aprendiendo"
+    },
+    "summary": {
+      "outsideAbove": "{signal} está por encima de tu rango habitual.",
+      "outsideBelow": "{signal} está por debajo de tu rango habitual.",
+      "labs": "{count} de {total} análisis están dentro de su rango de referencia.",
+      "cycleDay": "Día {day} del ciclo.",
+      "steadyAll": "Todo lo registrado está dentro de tu rango habitual.",
+      "steadySome": "{count} de {total} valores están dentro de tu rango habitual; los demás aún se están aprendiendo.",
+      "learning": "Tu rango habitual aún se está aprendiendo. Basta con una semana de registros.",
+      "empty": "Aún no hay nada registrado."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "en rango",
+      "cycleDay": "Día {day}"
+    },
+    "signals": {
+      "mood": "Estado de ánimo"
+    },
+    "units": {
+      "moodScale": "de 5"
+    },
+    "names": {
+      "heart": {
+        "title": "Corazón",
+        "description": "Frecuencia cardíaca en reposo, variabilidad y forma cardiovascular, con el sueño y el entrenamiento que las mueven."
+      },
+      "body": {
+        "title": "Cuerpo",
+        "description": "Peso y composición corporal a lo largo del tiempo."
+      },
+      "bloodPressure": {
+        "title": "Presión arterial",
+        "description": "Sistólica, diastólica y pulso, con el sueño y la actividad a su alrededor."
+      },
+      "sleep": {
+        "title": "Sueño",
+        "description": "Tiempo dormido y los valores medidos por la noche."
+      },
+      "activity": {
+        "title": "Actividad y entrenamiento",
+        "description": "Pasos, minutos de ejercicio, energía activa y carga de entrenamiento."
+      },
+      "metabolism": {
+        "title": "Metabolismo y análisis",
+        "description": "Glucosa y tus análisis, con la tendencia de cada marcador."
+      },
+      "mind": {
+        "title": "Mente",
+        "description": "Estado de ánimo y cuestionarios junto al sueño y la actividad."
+      },
+      "cycle": {
+        "title": "Ciclo",
+        "description": "Tu ciclo con la temperatura y la frecuencia cardíaca en reposo que lo acompañan."
+      }
+    },
+    "sources": {
+      "heart": "Estos valores vienen de un reloj, un anillo o una banda pectoral, de Apple Salud o Health Connect, o de tus propios registros.",
+      "body": "Estos valores vienen de una báscula inteligente, una importación o tus propios registros.",
+      "bloodPressure": "Estos valores vienen de un tensiómetro, una importación o tus propios registros.",
+      "sleep": "Estos valores vienen de un reloj o un anillo, de Apple Salud o Health Connect, o de tus propios registros.",
+      "activity": "Estos valores vienen de un teléfono, un reloj o un anillo, o de Apple Salud o Health Connect.",
+      "metabolism": "La glucosa viene de un medidor, una importación de sensor o tus registros; los análisis, de un informe de laboratorio o de tus registros.",
+      "mind": "Estos valores vienen de tus registros de ánimo y de los cuestionarios de la página Bienestar mental.",
+      "cycle": "Estos valores vienen de tu registro del ciclo y de un sensor de temperatura en la muñeca."
+    },
+    "today": {
+      "title": "Hoy",
+      "usual": "Habitual {low}–{high}",
+      "learning": "Rango habitual aún en aprendizaje",
+      "asOf": "A fecha de {date}",
+      "details": "Detalles"
+    },
+    "state": {
+      "within": "Dentro",
+      "above": "Por encima",
+      "below": "Por debajo",
+      "learning": "Aprendiendo"
+    },
+    "chart": {
+      "title": "Uno al lado del otro",
+      "legend": "Sombreado: tu rango habitual.",
+      "label": "{signals} en el periodo elegido, una fila cada uno."
+    },
+    "range": {
+      "label": "Periodo",
+      "7d": "7 d",
+      "30d": "30 d",
+      "90d": "90 d",
+      "1y": "1 a"
+    },
+    "relationships": {
+      "title": "Cómo se mueven juntos",
+      "insufficient": "{x} y {y}: {count} de {required} días emparejados por ahora.",
+      "noClearLink": "Sin relación clara entre {x} y {y} en {count} días emparejados.",
+      "splitHigher": "Cuando {x} estuvo por debajo de {threshold}, {y} fue {amount} más alto que otros días.",
+      "splitLower": "Cuando {x} estuvo por debajo de {threshold}, {y} fue {amount} más bajo que otros días.",
+      "splitDays": "Días por debajo: {below}. Otros días: {other}.",
+      "correlationSameDayHigher": "Cuando {x} sube, {y} también suele estar más alto (r = {r}).",
+      "correlationSameDayLower": "Cuando {x} sube, {y} suele estar más bajo (r = {r}).",
+      "correlationNextDayHigher": "Cuando {x} sube, {y} suele estar más alto al día siguiente (r = {r}).",
+      "correlationNextDayLower": "Cuando {x} sube, {y} suele estar más bajo al día siguiente (r = {r}).",
+      "pairedDays": "Días emparejados: {count}",
+      "footnote": "Se muestra cuando dos valores coinciden en al menos 14 días. Un patrón, no una causa.",
+      "scatterCaption": "Cada punto es un día: {x} en horizontal, {y} en vertical."
+    },
+    "trends": {
+      "title": "Tendencias",
+      "window": "90 días, medias semanales",
+      "insufficient": "Necesita 14 días, {count} por ahora"
+    },
+    "labs": {
+      "title": "Análisis",
+      "above": "Por encima del rango",
+      "below": "Por debajo del rango",
+      "trendsTitle": "Tendencias",
+      "trendNeeds": "Una tendencia necesita tres valores a lo largo de al menos un año. Aún no: {markers}."
+    },
+    "screeners": {
+      "title": "Cuestionarios",
+      "none": "Aún no has completado ningún cuestionario.",
+      "checkIns": "Completados: {count}",
+      "improved": "Mejor que la primera vez",
+      "worsened": "Peor que la primera vez",
+      "within_threshold": "Dentro de la variación habitual",
+      "single": "Completado una vez por ahora",
+      "open": "Abrir Bienestar mental"
+    },
+    "cycle": {
+      "title": "Ciclo",
+      "today": "Día {day} del ciclo.",
+      "todayWithPhase": "Día {day} del ciclo, fase {phase}.",
+      "average": "Duración media del ciclo: {days} días.",
+      "needs": "Una media necesita dos inicios de periodo registrados; por ahora hay {count}.",
+      "lengths": "Últimos ciclos, en días: {lengths}",
+      "open": "Abrir la página del ciclo"
+    },
+    "links": {
+      "title": "Páginas por métrica",
+      "workouts": "Entrenamientos"
+    },
+    "missing": {
+      "title": "Aún sin registrar: {signals}.",
+      "connect": "Conectar una fuente"
+    }
   }
 }

messages/fr.json

@@ -509,7 +509,9 @@
     "documents": "Documents",
     "vaccinations": "Vaccinations",
     "mentalWellbeing": "Bien-être mental",
-    "timeline": "Chronologie"
+    "timeline": "Chronologie",
+    "topics": "Thèmes",
+    "previewBadge": "Bêta"
   },
   "auth": {
     "login": "Se connecter",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "Accès partagé",
         "subtitle": "Qui peut ouvrir votre dossier de santé, et lequel vous pouvez ouvrir."
+      },
+      "preview": {
+        "title": "Fonctions en avant-première",
+        "subtitle": "Essayez ce qui n'est pas encore terminé. Tout reste désactivé ici jusqu'à ce que vous l'activiez."
       }
     },
     "profile": "Profil",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "Passkey supprimée.",
     "integrationDisconnected": "{provider} déconnecté.",
     "integrationDisconnectFailed": "Impossible de déconnecter {provider}.",
+    "preview": {
+      "topics": {
+        "title": "Thèmes",
+        "description": "Ajoute un espace Thèmes qui rassemble les mesures liées, à côté de vos pages Insights.",
+        "detail": "Huit thèmes, du cœur au cycle, montrent vos mesures côte à côte, la façon dont elles évoluent ensemble et des liens vers les pages par mesure que vous utilisez déjà. Vos pages Insights, la navigation et les liens restent exactement tels quels. Tout est calculé à partir de vos propres valeurs, sans IA. Désactiver retire l'entrée et ne supprime rien.",
+        "savedOn": "Aperçu Thèmes activé.",
+        "savedOff": "Aperçu Thèmes désactivé.",
+        "open": "Ouvrir Thèmes"
+      },
+      "loadError": "Impossible de charger vos réglages d'avant-première."
+    },
     "timezoneSaved": "Fuseau horaire enregistré.",
     "moduleState": {
       "on": "Activé",
@@ -13798,5 +13815,171 @@
       "startsOn": "Début",
       "endsOn": "Fin"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "Thèmes",
+      "description": "Des mesures liées, rassemblées à partir de vos propres valeurs ; ouvrez un thème pour les voir côte à côte.",
+      "emptyTitle": "Rien à rassembler pour l'instant",
+      "emptyDescription": "Les thèmes apparaissent dès qu'il y a des mesures pour eux : d'un appareil, d'un import ou saisies par vous.",
+      "notRecorded": "Rien d'enregistré pour l'instant : {topics}.",
+      "hiddenByModule": "Masqués car le module est désactivé : {topics}.",
+      "modulesLink": "Modifier les modules dans les réglages"
+    },
+    "detail": {
+      "back": "Tous les thèmes"
+    },
+    "loadError": "Impossible de charger les thèmes.",
+    "previewNote": "Ceci est un aperçu. Il peut changer d'une version à l'autre, et vos pages par mesure restent telles quelles.",
+    "recorded": "Mesures enregistrées : {count} sur {total}",
+    "tone": {
+      "steady": "Stable",
+      "watch": "À regarder",
+      "learning": "En apprentissage"
+    },
+    "summary": {
+      "outsideAbove": "{signal} est au-dessus de votre plage habituelle.",
+      "outsideBelow": "{signal} est en dessous de votre plage habituelle.",
+      "labs": "{count} analyses sur {total} se situent dans leur plage de référence.",
+      "cycleDay": "Jour {day} du cycle.",
+      "steadyAll": "Tout ce qui est enregistré se situe dans votre plage habituelle.",
+      "steadySome": "{count} mesures sur {total} se situent dans votre plage habituelle ; les autres sont encore en apprentissage.",
+      "learning": "Votre plage habituelle est encore en apprentissage. Une semaine de mesures suffit.",
+      "empty": "Rien d'enregistré pour l'instant."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "dans la plage",
+      "cycleDay": "Jour {day}"
+    },
+    "signals": {
+      "mood": "Humeur"
+    },
+    "units": {
+      "moodScale": "sur 5"
+    },
+    "names": {
+      "heart": {
+        "title": "Cœur",
+        "description": "Fréquence cardiaque au repos, variabilité et condition cardio, avec le sommeil et l'entraînement qui les font varier."
+      },
+      "body": {
+        "title": "Corps",
+        "description": "Poids et composition corporelle dans le temps."
+      },
+      "bloodPressure": {
+        "title": "Tension artérielle",
+        "description": "Systolique, diastolique et pouls, avec le sommeil et l'activité autour."
+      },
+      "sleep": {
+        "title": "Sommeil",
+        "description": "Temps de sommeil et mesures prises la nuit."
+      },
+      "activity": {
+        "title": "Activité et entraînement",
+        "description": "Pas, minutes d'exercice, énergie active et charge d'entraînement."
+      },
+      "metabolism": {
+        "title": "Métabolisme et analyses",
+        "description": "Glycémie et vos analyses, avec la tendance de chaque marqueur."
+      },
+      "mind": {
+        "title": "Psychisme",
+        "description": "Humeur et questionnaires à côté du sommeil et de l'activité."
+      },
+      "cycle": {
+        "title": "Cycle",
+        "description": "Votre cycle avec la température et la fréquence cardiaque au repos qui le suivent."
+      }
+    },
+    "sources": {
+      "heart": "Ces valeurs viennent d'une montre, d'une bague ou d'une ceinture thoracique, d'Apple Santé ou de Health Connect, ou de vos saisies.",
+      "body": "Ces valeurs viennent d'une balance connectée, d'un import ou de vos saisies.",
+      "bloodPressure": "Ces valeurs viennent d'un tensiomètre, d'un import ou de vos saisies.",
+      "sleep": "Ces valeurs viennent d'une montre ou d'une bague, d'Apple Santé ou de Health Connect, ou de vos saisies.",
+      "activity": "Ces valeurs viennent d'un téléphone, d'une montre ou d'une bague, ou d'Apple Santé ou de Health Connect.",
+      "metabolism": "La glycémie vient d'un lecteur, d'un import de capteur ou de vos saisies ; les analyses d'un compte rendu de laboratoire ou de vos saisies.",
+      "mind": "Ces valeurs viennent de vos saisies d'humeur et des questionnaires de la page Bien-être mental.",
+      "cycle": "Ces valeurs viennent de votre journal de cycle et d'un capteur de température au poignet."
+    },
+    "today": {
+      "title": "Aujourd'hui",
+      "usual": "Habituel {low}–{high}",
+      "learning": "Plage habituelle encore en apprentissage",
+      "asOf": "Au {date}",
+      "details": "Détails"
+    },
+    "state": {
+      "within": "Dans la plage",
+      "above": "Au-dessus",
+      "below": "En dessous",
+      "learning": "En apprentissage"
+    },
+    "chart": {
+      "title": "Côte à côte",
+      "legend": "Zone ombrée : votre plage habituelle.",
+      "label": "{signals} sur la période choisie, une ligne chacune."
+    },
+    "range": {
+      "label": "Période",
+      "7d": "7 j",
+      "30d": "30 j",
+      "90d": "90 j",
+      "1y": "1 a"
+    },
+    "relationships": {
+      "title": "Comment elles évoluent ensemble",
+      "insufficient": "{x} et {y} : {count} jours communs sur {required} pour l'instant.",
+      "noClearLink": "Pas de lien net entre {x} et {y} sur {count} jours communs.",
+      "splitHigher": "Quand {x} était sous {threshold}, {y} était plus élevé de {amount} que les autres jours.",
+      "splitLower": "Quand {x} était sous {threshold}, {y} était plus bas de {amount} que les autres jours.",
+      "splitDays": "Jours en dessous : {below}. Autres jours : {other}.",
+      "correlationSameDayHigher": "Quand {x} est plus élevé, {y} tend à l'être aussi (r = {r}).",
+      "correlationSameDayLower": "Quand {x} est plus élevé, {y} tend à être plus bas (r = {r}).",
+      "correlationNextDayHigher": "Quand {x} est plus élevé, {y} tend à être plus élevé le lendemain (r = {r}).",
+      "correlationNextDayLower": "Quand {x} est plus élevé, {y} tend à être plus bas le lendemain (r = {r}).",
+      "pairedDays": "Jours communs : {count}",
+      "footnote": "Affiché dès que deux mesures se recoupent sur au moins 14 jours. Une tendance, pas une cause.",
+      "scatterCaption": "Chaque point est un jour : {x} en abscisse, {y} en ordonnée."
+    },
+    "trends": {
+      "title": "Tendances",
+      "window": "90 jours, moyennes hebdomadaires",
+      "insufficient": "Il faut 14 jours, {count} pour l'instant"
+    },
+    "labs": {
+      "title": "Analyses",
+      "above": "Au-dessus de la plage",
+      "below": "En dessous de la plage",
+      "trendsTitle": "Tendances",
+      "trendNeeds": "Une tendance demande trois valeurs sur au moins un an. Pas encore : {markers}."
+    },
+    "screeners": {
+      "title": "Questionnaires",
+      "none": "Aucun questionnaire rempli pour l'instant.",
+      "checkIns": "Remplis : {count}",
+      "improved": "Mieux que la première fois",
+      "worsened": "Moins bien que la première fois",
+      "within_threshold": "Dans la variation habituelle",
+      "single": "Rempli une fois pour l'instant",
+      "open": "Ouvrir Bien-être mental"
+    },
+    "cycle": {
+      "title": "Cycle",
+      "today": "Jour {day} du cycle.",
+      "todayWithPhase": "Jour {day} du cycle, phase {phase}.",
+      "average": "Durée moyenne du cycle : {days} jours.",
+      "needs": "Une moyenne demande deux débuts de règles enregistrés ; il y en a {count} pour l'instant.",
+      "lengths": "Derniers cycles, en jours : {lengths}",
+      "open": "Ouvrir la page Cycle"
+    },
+    "links": {
+      "title": "Pages par mesure",
+      "workouts": "Entraînements"
+    },
+    "missing": {
+      "title": "Pas encore enregistré : {signals}.",
+      "connect": "Connecter une source"
+    }
   }
 }

messages/it.json

@@ -509,7 +509,9 @@
     "documents": "Documenti",
     "vaccinations": "Vaccinazioni",
     "mentalWellbeing": "Benessere mentale",
-    "timeline": "Cronologia"
+    "timeline": "Cronologia",
+    "topics": "Temi",
+    "previewBadge": "Beta"
   },
   "auth": {
     "login": "Accedi",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "Accesso condiviso",
         "subtitle": "Chi può aprire la tua cartella sanitaria e quale puoi aprire tu."
+      },
+      "preview": {
+        "title": "Funzioni in anteprima",
+        "subtitle": "Prova ciò che non è ancora finito. Tutto qui resta spento finché non lo attivi."
       }
     },
     "profile": "Profilo",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "Passkey rimossa.",
     "integrationDisconnected": "{provider} disconnesso.",
     "integrationDisconnectFailed": "Impossibile disconnettere {provider}.",
+    "preview": {
+      "topics": {
+        "title": "Temi",
+        "description": "Aggiunge un'area Temi che raccoglie valori collegati, accanto alle tue pagine Insights.",
+        "detail": "Otto temi, dal cuore al ciclo, mostrano i tuoi valori affiancati, come si muovono insieme e collegamenti alle pagine per metrica che già usi. Le tue pagine Insights, la navigazione e i link restano esattamente come sono. Tutto è calcolato dai tuoi valori, senza IA. Disattivarla toglie la voce e non cancella nulla.",
+        "savedOn": "Anteprima Temi attivata.",
+        "savedOff": "Anteprima Temi disattivata.",
+        "open": "Apri Temi"
+      },
+      "loadError": "Impossibile caricare le impostazioni delle anteprime."
+    },
     "timezoneSaved": "Fuso orario salvato.",
     "moduleState": {
       "on": "Attivo",
@@ -13825,5 +13842,171 @@
       "startsOn": "Inizio",
       "endsOn": "Fine"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "Temi",
+      "description": "Valori collegati, raccolti dai tuoi dati; apri un tema per vederli affiancati.",
+      "emptyTitle": "Ancora niente da raccogliere",
+      "emptyDescription": "I temi compaiono appena ci sono valori per loro: da un dispositivo, da un'importazione o inseriti da te.",
+      "notRecorded": "Ancora nessun valore per: {topics}.",
+      "hiddenByModule": "Nascosti perché il modulo è spento: {topics}.",
+      "modulesLink": "Cambia i moduli nelle impostazioni"
+    },
+    "detail": {
+      "back": "Tutti i temi"
+    },
+    "loadError": "Impossibile caricare i temi.",
+    "previewNote": "Questa è un'anteprima. Può cambiare tra una versione e l'altra, e le tue pagine per metrica restano come sono.",
+    "recorded": "Valori registrati: {count} di {total}",
+    "tone": {
+      "steady": "Stabile",
+      "watch": "Da guardare",
+      "learning": "In apprendimento"
+    },
+    "summary": {
+      "outsideAbove": "{signal} è sopra il tuo intervallo abituale.",
+      "outsideBelow": "{signal} è sotto il tuo intervallo abituale.",
+      "labs": "{count} esami su {total} rientrano nel loro intervallo di riferimento.",
+      "cycleDay": "Giorno {day} del ciclo.",
+      "steadyAll": "Tutto ciò che è registrato rientra nel tuo intervallo abituale.",
+      "steadySome": "{count} valori su {total} rientrano nel tuo intervallo abituale; gli altri sono ancora in apprendimento.",
+      "learning": "Il tuo intervallo abituale è ancora in apprendimento. Basta una settimana di valori.",
+      "empty": "Ancora niente di registrato."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "nell'intervallo",
+      "cycleDay": "Giorno {day}"
+    },
+    "signals": {
+      "mood": "Umore"
+    },
+    "units": {
+      "moodScale": "su 5"
+    },
+    "names": {
+      "heart": {
+        "title": "Cuore",
+        "description": "Frequenza cardiaca a riposo, variabilità e forma cardio, con il sonno e l'allenamento che le influenzano."
+      },
+      "body": {
+        "title": "Corpo",
+        "description": "Peso e composizione corporea nel tempo."
+      },
+      "bloodPressure": {
+        "title": "Pressione arteriosa",
+        "description": "Sistolica, diastolica e polso, con il sonno e l'attività intorno."
+      },
+      "sleep": {
+        "title": "Sonno",
+        "description": "Tempo di sonno e i valori misurati di notte."
+      },
+      "activity": {
+        "title": "Attività e allenamento",
+        "description": "Passi, minuti di esercizio, energia attiva e carico di allenamento."
+      },
+      "metabolism": {
+        "title": "Metabolismo ed esami",
+        "description": "Glicemia e i tuoi esami, con l'andamento di ogni marcatore."
+      },
+      "mind": {
+        "title": "Mente",
+        "description": "Umore e questionari accanto a sonno e attività."
+      },
+      "cycle": {
+        "title": "Ciclo",
+        "description": "Il tuo ciclo con la temperatura e la frequenza cardiaca a riposo che lo seguono."
+      }
+    },
+    "sources": {
+      "heart": "Questi valori arrivano da un orologio, un anello o una fascia toracica, da Apple Salute o Health Connect, o dai tuoi inserimenti.",
+      "body": "Questi valori arrivano da una bilancia smart, da un'importazione o dai tuoi inserimenti.",
+      "bloodPressure": "Questi valori arrivano da un misuratore di pressione, da un'importazione o dai tuoi inserimenti.",
+      "sleep": "Questi valori arrivano da un orologio o un anello, da Apple Salute o Health Connect, o dai tuoi inserimenti.",
+      "activity": "Questi valori arrivano da telefono, orologio o anello, o da Apple Salute o Health Connect.",
+      "metabolism": "La glicemia arriva da un glucometro, da un'importazione del sensore o dai tuoi inserimenti; gli esami da un referto o dai tuoi inserimenti.",
+      "mind": "Questi valori arrivano dalle tue registrazioni dell'umore e dai questionari della pagina Benessere mentale.",
+      "cycle": "Questi valori arrivano dal tuo diario del ciclo e da un sensore di temperatura al polso."
+    },
+    "today": {
+      "title": "Oggi",
+      "usual": "Abituale {low}–{high}",
+      "learning": "Intervallo abituale ancora in apprendimento",
+      "asOf": "Al {date}",
+      "details": "Dettagli"
+    },
+    "state": {
+      "within": "Nell'intervallo",
+      "above": "Sopra il solito",
+      "below": "Sotto il solito",
+      "learning": "In apprendimento"
+    },
+    "chart": {
+      "title": "Affiancati",
+      "legend": "Area ombreggiata: il tuo intervallo abituale.",
+      "label": "{signals} nel periodo scelto, una riga ciascuno."
+    },
+    "range": {
+      "label": "Periodo",
+      "7d": "7 g",
+      "30d": "30 g",
+      "90d": "90 g",
+      "1y": "1 a"
+    },
+    "relationships": {
+      "title": "Come si muovono insieme",
+      "insufficient": "{x} e {y}: finora {count} giorni abbinati su {required}.",
+      "noClearLink": "Nessun legame chiaro tra {x} e {y} su {count} giorni abbinati.",
+      "splitHigher": "Quando {x} era sotto {threshold}, {y} era più alto di {amount} rispetto agli altri giorni.",
+      "splitLower": "Quando {x} era sotto {threshold}, {y} era più basso di {amount} rispetto agli altri giorni.",
+      "splitDays": "Giorni sotto: {below}. Altri giorni: {other}.",
+      "correlationSameDayHigher": "Quando {x} è più alto, anche {y} tende a esserlo (r = {r}).",
+      "correlationSameDayLower": "Quando {x} è più alto, {y} tende a essere più basso (r = {r}).",
+      "correlationNextDayHigher": "Quando {x} è più alto, il giorno dopo {y} tende a essere più alto (r = {r}).",
+      "correlationNextDayLower": "Quando {x} è più alto, il giorno dopo {y} tende a essere più basso (r = {r}).",
+      "pairedDays": "Giorni abbinati: {count}",
+      "footnote": "Compare quando due valori si sovrappongono per almeno 14 giorni. Uno schema, non una causa.",
+      "scatterCaption": "Ogni punto è un giorno: {x} in orizzontale, {y} in verticale."
+    },
+    "trends": {
+      "title": "Andamenti",
+      "window": "90 giorni, medie settimanali",
+      "insufficient": "Servono 14 giorni, finora {count}"
+    },
+    "labs": {
+      "title": "Esami",
+      "above": "Sopra l'intervallo",
+      "below": "Sotto l'intervallo",
+      "trendsTitle": "Andamenti",
+      "trendNeeds": "Un andamento richiede tre valori nell'arco di almeno un anno. Non ancora: {markers}."
+    },
+    "screeners": {
+      "title": "Questionari",
+      "none": "Ancora nessun questionario compilato.",
+      "checkIns": "Compilati: {count}",
+      "improved": "Meglio della prima volta",
+      "worsened": "Peggio della prima volta",
+      "within_threshold": "Entro la variazione abituale",
+      "single": "Compilato una volta finora",
+      "open": "Apri Benessere mentale"
+    },
+    "cycle": {
+      "title": "Ciclo",
+      "today": "Giorno {day} del ciclo.",
+      "todayWithPhase": "Giorno {day} del ciclo, fase {phase}.",
+      "average": "Durata media del ciclo: {days} giorni.",
+      "needs": "Una media richiede due inizi di mestruazione registrati; finora sono {count}.",
+      "lengths": "Ultimi cicli, in giorni: {lengths}",
+      "open": "Apri la pagina del ciclo"
+    },
+    "links": {
+      "title": "Pagine per metrica",
+      "workouts": "Allenamenti"
+    },
+    "missing": {
+      "title": "Non ancora registrato: {signals}.",
+      "connect": "Collega una fonte"
+    }
   }
 }

messages/ko.json

@@ -509,7 +509,9 @@
     "documents": "문서",
     "vaccinations": "예방접종",
     "mentalWellbeing": "정신 건강",
-    "timeline": "타임라인"
+    "timeline": "타임라인",
+    "topics": "주제",
+    "previewBadge": "베타"
   },
   "auth": {
     "login": "로그인",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "공유 접근",
         "subtitle": "내 건강 기록을 누가 열 수 있고, 내가 누구의 기록을 열 수 있는지예요."
+      },
+      "preview": {
+        "title": "미리 보기 기능",
+        "subtitle": "아직 완성되지 않은 기능을 써 보세요. 여기 있는 기능은 직접 켜기 전까지 꺼져 있습니다."
       }
     },
     "profile": "프로필",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "패스키를 삭제했어요.",
     "integrationDisconnected": "{provider} 연결을 해제했어요.",
     "integrationDisconnectFailed": "{provider} 연결을 해제하지 못했어요.",
+    "preview": {
+      "topics": {
+        "title": "주제",
+        "description": "관련된 수치를 한데 모은 주제 영역을 인사이트 페이지 옆에 추가합니다.",
+        "detail": "심장부터 주기까지 여덟 가지 주제가 수치를 나란히 보여 주고, 함께 어떻게 움직이는지와 이미 쓰고 있는 개별 지표 페이지로 가는 링크를 보여 줍니다. 인사이트 페이지, 내비게이션, 링크는 그대로 유지됩니다. 모든 계산은 AI 없이 본인의 수치로 합니다. 끄면 메뉴 항목만 사라지고 아무것도 삭제되지 않습니다.",
+        "savedOn": "주제 미리 보기를 켰습니다.",
+        "savedOff": "주제 미리 보기를 껐습니다.",
+        "open": "주제 열기"
+      },
+      "loadError": "미리 보기 설정을 불러오지 못했습니다."
+    },
     "timezoneSaved": "시간대를 저장했습니다.",
     "moduleState": {
       "on": "켜짐",
@@ -13758,5 +13775,171 @@
       "startsOn": "시작",
       "endsOn": "종료"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "주제",
+      "description": "본인의 수치에서 관련 지표를 모았습니다. 주제를 열면 나란히 볼 수 있습니다.",
+      "emptyTitle": "아직 모을 수치가 없습니다",
+      "emptyDescription": "기기, 가져오기 또는 직접 입력으로 수치가 생기면 주제가 나타납니다.",
+      "notRecorded": "아직 기록이 없는 주제: {topics}.",
+      "hiddenByModule": "모듈이 꺼져 있어 숨김: {topics}.",
+      "modulesLink": "설정에서 모듈 변경"
+    },
+    "detail": {
+      "back": "모든 주제"
+    },
+    "loadError": "주제를 불러오지 못했습니다.",
+    "previewNote": "미리 보기 기능입니다. 버전마다 바뀔 수 있으며, 개별 지표 페이지는 그대로입니다.",
+    "recorded": "기록된 지표: {total}개 중 {count}개",
+    "tone": {
+      "steady": "안정적",
+      "watch": "살펴볼 만함",
+      "learning": "학습 중"
+    },
+    "summary": {
+      "outsideAbove": "{signal}이(가) 평소 범위보다 높습니다.",
+      "outsideBelow": "{signal}이(가) 평소 범위보다 낮습니다.",
+      "labs": "검사 수치 {total}개 중 {count}개가 참고 범위 안에 있습니다.",
+      "cycleDay": "주기 {day}일째.",
+      "steadyAll": "기록된 모든 수치가 평소 범위 안에 있습니다.",
+      "steadySome": "{total}개 중 {count}개 지표가 평소 범위 안에 있으며, 나머지는 아직 학습 중입니다.",
+      "learning": "평소 범위를 아직 학습 중입니다. 일주일 치 기록이면 충분합니다.",
+      "empty": "아직 기록이 없습니다."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "범위 내",
+      "cycleDay": "{day}일째"
+    },
+    "signals": {
+      "mood": "기분"
+    },
+    "units": {
+      "moodScale": "/ 5"
+    },
+    "names": {
+      "heart": {
+        "title": "심장",
+        "description": "안정 시 심박수, 심박 변이도, 심폐 체력과 이에 영향을 주는 수면과 운동."
+      },
+      "body": {
+        "title": "신체",
+        "description": "시간에 따른 체중과 체성분."
+      },
+      "bloodPressure": {
+        "title": "혈압",
+        "description": "수축기, 이완기 혈압과 맥박, 그리고 주변의 수면과 활동."
+      },
+      "sleep": {
+        "title": "수면",
+        "description": "수면 시간과 밤에 측정되는 수치."
+      },
+      "activity": {
+        "title": "활동 및 운동",
+        "description": "걸음 수, 운동 시간, 활동 에너지와 훈련 부하."
+      },
+      "metabolism": {
+        "title": "대사 및 검사",
+        "description": "혈당과 검사 수치, 그리고 각 지표의 추세."
+      },
+      "mind": {
+        "title": "마음",
+        "description": "수면과 활동 옆에 놓인 기분과 설문."
+      },
+      "cycle": {
+        "title": "주기",
+        "description": "주기와 이를 따라 변하는 체온, 안정 시 심박수."
+      }
+    },
+    "sources": {
+      "heart": "이 수치는 워치, 링, 가슴 스트랩, Apple 건강 또는 Health Connect, 직접 입력에서 옵니다.",
+      "body": "이 수치는 스마트 체중계, 가져오기 또는 직접 입력에서 옵니다.",
+      "bloodPressure": "이 수치는 혈압계, 가져오기 또는 직접 입력에서 옵니다.",
+      "sleep": "이 수치는 워치나 링, Apple 건강 또는 Health Connect, 직접 입력에서 옵니다.",
+      "activity": "이 수치는 휴대폰, 워치, 링 또는 Apple 건강이나 Health Connect에서 옵니다.",
+      "metabolism": "혈당은 혈당 측정기, 센서 가져오기 또는 직접 입력에서, 검사 수치는 검사 보고서나 직접 입력에서 옵니다.",
+      "mind": "이 수치는 기분 기록과 정신 건강 페이지의 설문에서 옵니다.",
+      "cycle": "이 수치는 주기 기록과 손목 온도 센서에서 옵니다."
+    },
+    "today": {
+      "title": "오늘",
+      "usual": "평소 {low}–{high}",
+      "learning": "평소 범위 학습 중",
+      "asOf": "{date} 기준",
+      "details": "자세히"
+    },
+    "state": {
+      "within": "범위 내",
+      "above": "평소보다 높음",
+      "below": "평소보다 낮음",
+      "learning": "학습 중"
+    },
+    "chart": {
+      "title": "나란히 보기",
+      "legend": "음영: 평소 범위.",
+      "label": "선택한 기간의 {signals}, 지표마다 한 줄."
+    },
+    "range": {
+      "label": "기간",
+      "7d": "7일",
+      "30d": "30일",
+      "90d": "90일",
+      "1y": "1년"
+    },
+    "relationships": {
+      "title": "함께 움직이는 방식",
+      "insufficient": "{x}와(과) {y}: 지금까지 {required}일 중 {count}일이 겹칩니다.",
+      "noClearLink": "겹치는 {count}일 동안 {x}와(과) {y} 사이에 뚜렷한 관계가 없습니다.",
+      "splitHigher": "{x}이(가) {threshold} 미만일 때 {y}이(가) 다른 날보다 {amount} 높았습니다.",
+      "splitLower": "{x}이(가) {threshold} 미만일 때 {y}이(가) 다른 날보다 {amount} 낮았습니다.",
+      "splitDays": "미만인 날: {below}. 다른 날: {other}.",
+      "correlationSameDayHigher": "{x}이(가) 높을수록 {y}도 높은 경향이 있습니다 (r = {r}).",
+      "correlationSameDayLower": "{x}이(가) 높을수록 {y}은(는) 낮은 경향이 있습니다 (r = {r}).",
+      "correlationNextDayHigher": "{x}이(가) 높으면 다음 날 {y}도 높은 경향이 있습니다 (r = {r}).",
+      "correlationNextDayLower": "{x}이(가) 높으면 다음 날 {y}은(는) 낮은 경향이 있습니다 (r = {r}).",
+      "pairedDays": "겹치는 날: {count}",
+      "footnote": "두 지표가 14일 이상 겹치면 표시됩니다. 패턴일 뿐 원인이 아닙니다.",
+      "scatterCaption": "점 하나가 하루입니다. 가로는 {x}, 세로는 {y}."
+    },
+    "trends": {
+      "title": "추세",
+      "window": "90일, 주간 평균",
+      "insufficient": "14일이 필요합니다. 지금까지 {count}일"
+    },
+    "labs": {
+      "title": "검사 수치",
+      "above": "범위 초과",
+      "below": "범위 미만",
+      "trendsTitle": "추세",
+      "trendNeeds": "추세에는 1년 이상에 걸친 수치 세 개가 필요합니다. 아직 부족: {markers}."
+    },
+    "screeners": {
+      "title": "설문",
+      "none": "아직 작성한 설문이 없습니다.",
+      "checkIns": "작성 횟수: {count}",
+      "improved": "처음보다 좋아짐",
+      "worsened": "처음보다 나빠짐",
+      "within_threshold": "평소 변동 범위 내",
+      "single": "지금까지 한 번 작성",
+      "open": "정신 건강 열기"
+    },
+    "cycle": {
+      "title": "주기",
+      "today": "주기 {day}일째.",
+      "todayWithPhase": "주기 {day}일째, {phase}.",
+      "average": "평균 주기 길이: {days}일.",
+      "needs": "평균을 내려면 생리 시작일 기록이 두 번 필요합니다. 지금까지 {count}번입니다.",
+      "lengths": "최근 주기(일): {lengths}",
+      "open": "주기 페이지 열기"
+    },
+    "links": {
+      "title": "개별 지표 페이지",
+      "workouts": "운동"
+    },
+    "missing": {
+      "title": "아직 기록되지 않음: {signals}.",
+      "connect": "데이터 소스 연결"
+    }
   }
 }

messages/nl.json

@@ -509,7 +509,9 @@
     "documents": "Documenten",
     "vaccinations": "Vaccinaties",
     "mentalWellbeing": "Mentaal welzijn",
-    "timeline": "Tijdlijn"
+    "timeline": "Tijdlijn",
+    "topics": "Thema's",
+    "previewBadge": "Bèta"
   },
   "auth": {
     "login": "Inloggen",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "Gedeelde toegang",
         "subtitle": "Wie je gezondheidsdossier kan openen, en wiens dossier jij kunt openen."
+      },
+      "preview": {
+        "title": "Voorvertoningen",
+        "subtitle": "Probeer wat nog niet af is. Alles hier blijft uit tot je het aanzet."
       }
     },
     "profile": "Profiel",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "Passkey verwijderd.",
     "integrationDisconnected": "{provider} ontkoppeld.",
     "integrationDisconnectFailed": "{provider} kon niet worden ontkoppeld.",
+    "preview": {
+      "topics": {
+        "title": "Thema's",
+        "description": "Voegt een gedeelte Thema's toe dat samenhangende waarden bundelt, naast je Inzichten-pagina's.",
+        "detail": "Acht thema's, van hart tot cyclus, tonen je waarden naast elkaar, hoe ze samen bewegen en links naar de pagina's per meetwaarde die je al gebruikt. Je Inzichten-pagina's, de navigatie en alle links blijven precies zoals ze zijn. Alles wordt uit je eigen waarden berekend, zonder AI. Uitzetten haalt de ingang weg en verwijdert niets.",
+        "savedOn": "Voorvertoning Thema's aangezet.",
+        "savedOff": "Voorvertoning Thema's uitgezet.",
+        "open": "Thema's openen"
+      },
+      "loadError": "Je voorvertoningsinstellingen konden niet worden geladen."
+    },
     "timezoneSaved": "Tijdzone opgeslagen.",
     "moduleState": {
       "on": "Aan",
@@ -13758,5 +13775,171 @@
       "startsOn": "Begin",
       "endsOn": "Einde"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "Thema's",
+      "description": "Samenhangende waarden, gebundeld uit je eigen gegevens; open een thema om ze naast elkaar te zien.",
+      "emptyTitle": "Nog niets om te bundelen",
+      "emptyDescription": "Thema's verschijnen zodra er waarden voor zijn: van een apparaat, uit een import of door jou ingevoerd.",
+      "notRecorded": "Nog niets vastgelegd voor: {topics}.",
+      "hiddenByModule": "Verborgen omdat de module uit staat: {topics}.",
+      "modulesLink": "Modules wijzigen in de instellingen"
+    },
+    "detail": {
+      "back": "Alle thema's"
+    },
+    "loadError": "De thema's konden niet worden geladen.",
+    "previewNote": "Dit is een voorvertoning. Die kan per versie veranderen, en je pagina's per meetwaarde blijven zoals ze zijn.",
+    "recorded": "Vastgelegde waarden: {count} van {total}",
+    "tone": {
+      "steady": "Stabiel",
+      "watch": "Het bekijken waard",
+      "learning": "Leert nog"
+    },
+    "summary": {
+      "outsideAbove": "{signal} ligt boven je gebruikelijke bereik.",
+      "outsideBelow": "{signal} ligt onder je gebruikelijke bereik.",
+      "labs": "{count} van {total} labwaarden liggen binnen hun referentiebereik.",
+      "cycleDay": "Cyclusdag {day}.",
+      "steadyAll": "Alles wat is vastgelegd ligt binnen je gebruikelijke bereik.",
+      "steadySome": "{count} van {total} waarden liggen binnen je gebruikelijke bereik; de andere worden nog geleerd.",
+      "learning": "Je gebruikelijke bereik wordt nog geleerd. Een week aan metingen is genoeg.",
+      "empty": "Nog niets vastgelegd."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "binnen bereik",
+      "cycleDay": "Dag {day}"
+    },
+    "signals": {
+      "mood": "Stemming"
+    },
+    "units": {
+      "moodScale": "van 5"
+    },
+    "names": {
+      "heart": {
+        "title": "Hart",
+        "description": "Rusthartslag, hartslagvariabiliteit en conditie, met de slaap en training die ze beïnvloeden."
+      },
+      "body": {
+        "title": "Lichaam",
+        "description": "Gewicht en lichaamssamenstelling door de tijd."
+      },
+      "bloodPressure": {
+        "title": "Bloeddruk",
+        "description": "Systolisch, diastolisch en hartslag, met de slaap en activiteit eromheen."
+      },
+      "sleep": {
+        "title": "Slaap",
+        "description": "Slaapduur en de waarden die 's nachts worden gemeten."
+      },
+      "activity": {
+        "title": "Activiteit en training",
+        "description": "Stappen, trainingsminuten, actieve energie en trainingsbelasting."
+      },
+      "metabolism": {
+        "title": "Stofwisseling en lab",
+        "description": "Bloedglucose en je labwaarden, met de trend van elke marker."
+      },
+      "mind": {
+        "title": "Geest",
+        "description": "Stemming en vragenlijsten naast slaap en activiteit."
+      },
+      "cycle": {
+        "title": "Cyclus",
+        "description": "Je cyclus met de temperatuur en rusthartslag die ermee meebewegen."
+      }
+    },
+    "sources": {
+      "heart": "Deze waarden komen van een horloge, ring of borstband, uit Apple Gezondheid of Health Connect, of van je eigen invoer.",
+      "body": "Deze waarden komen van een slimme weegschaal, een import of je eigen invoer.",
+      "bloodPressure": "Deze waarden komen van een bloeddrukmeter, een import of je eigen invoer.",
+      "sleep": "Deze waarden komen van een horloge of ring, uit Apple Gezondheid of Health Connect, of van je eigen invoer.",
+      "activity": "Deze waarden komen van een telefoon, horloge of ring, of uit Apple Gezondheid of Health Connect.",
+      "metabolism": "Glucose komt van een meter, een sensorimport of je eigen invoer; labwaarden uit een labrapport of je eigen invoer.",
+      "mind": "Deze waarden komen uit je stemmingsregistraties en de vragenlijsten op de pagina Mentaal welzijn.",
+      "cycle": "Deze waarden komen uit je cycluslogboek en een temperatuursensor aan de pols."
+    },
+    "today": {
+      "title": "Vandaag",
+      "usual": "Gebruikelijk {low}–{high}",
+      "learning": "Gebruikelijk bereik wordt nog geleerd",
+      "asOf": "Per {date}",
+      "details": "Details"
+    },
+    "state": {
+      "within": "Binnen bereik",
+      "above": "Boven gebruikelijk",
+      "below": "Onder gebruikelijk",
+      "learning": "Leert nog"
+    },
+    "chart": {
+      "title": "Naast elkaar",
+      "legend": "Gearceerd: je gebruikelijke bereik.",
+      "label": "{signals} in de gekozen periode, elk op een eigen rij."
+    },
+    "range": {
+      "label": "Periode",
+      "7d": "7 d",
+      "30d": "30 d",
+      "90d": "90 d",
+      "1y": "1 j"
+    },
+    "relationships": {
+      "title": "Hoe ze samen bewegen",
+      "insufficient": "{x} en {y}: tot nu toe {count} van {required} gedeelde dagen.",
+      "noClearLink": "Geen duidelijk verband tussen {x} en {y} over {count} gedeelde dagen.",
+      "splitHigher": "Als {x} onder {threshold} lag, was {y} {amount} hoger dan op andere dagen.",
+      "splitLower": "Als {x} onder {threshold} lag, was {y} {amount} lager dan op andere dagen.",
+      "splitDays": "Dagen eronder: {below}. Andere dagen: {other}.",
+      "correlationSameDayHigher": "Als {x} hoger is, is {y} meestal ook hoger (r = {r}).",
+      "correlationSameDayLower": "Als {x} hoger is, is {y} meestal lager (r = {r}).",
+      "correlationNextDayHigher": "Als {x} hoger is, is {y} de volgende dag meestal hoger (r = {r}).",
+      "correlationNextDayLower": "Als {x} hoger is, is {y} de volgende dag meestal lager (r = {r}).",
+      "pairedDays": "Gedeelde dagen: {count}",
+      "footnote": "Verschijnt zodra twee waarden op minstens 14 dagen samenvallen. Een patroon, geen oorzaak.",
+      "scatterCaption": "Elke stip is één dag: {x} horizontaal, {y} verticaal."
+    },
+    "trends": {
+      "title": "Trends",
+      "window": "90 dagen, weekgemiddelden",
+      "insufficient": "Heeft 14 dagen nodig, nu {count}"
+    },
+    "labs": {
+      "title": "Labwaarden",
+      "above": "Boven het bereik",
+      "below": "Onder het bereik",
+      "trendsTitle": "Trends",
+      "trendNeeds": "Een trend heeft drie waarden over minstens een jaar nodig. Nog niet: {markers}."
+    },
+    "screeners": {
+      "title": "Vragenlijsten",
+      "none": "Nog geen vragenlijsten ingevuld.",
+      "checkIns": "Ingevuld: {count}",
+      "improved": "Beter dan de eerste keer",
+      "worsened": "Slechter dan de eerste keer",
+      "within_threshold": "Binnen de gebruikelijke schommeling",
+      "single": "Tot nu toe één keer ingevuld",
+      "open": "Mentaal welzijn openen"
+    },
+    "cycle": {
+      "title": "Cyclus",
+      "today": "Cyclusdag {day}.",
+      "todayWithPhase": "Cyclusdag {day}, {phase}.",
+      "average": "Gemiddelde cycluslengte: {days} dagen.",
+      "needs": "Een gemiddelde heeft twee vastgelegde menstruatiestarts nodig; nu zijn het er {count}.",
+      "lengths": "Recente cycli in dagen: {lengths}",
+      "open": "Cycluspagina openen"
+    },
+    "links": {
+      "title": "Pagina's per meetwaarde",
+      "workouts": "Workouts"
+    },
+    "missing": {
+      "title": "Nog niet vastgelegd: {signals}.",
+      "connect": "Een bron koppelen"
+    }
   }
 }

messages/pl.json

@@ -509,7 +509,9 @@
     "documents": "Dokumenty",
     "vaccinations": "Szczepienia",
     "mentalWellbeing": "Dobrostan psychiczny",
-    "timeline": "Oś czasu"
+    "timeline": "Oś czasu",
+    "topics": "Tematy",
+    "previewBadge": "Beta"
   },
   "auth": {
     "login": "Zaloguj się",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "Udostępniony dostęp",
         "subtitle": "Kto może otworzyć twoją kartę zdrowia i czyją kartę możesz otworzyć ty."
+      },
+      "preview": {
+        "title": "Funkcje w wersji próbnej",
+        "subtitle": "Wypróbuj to, co jeszcze nie jest gotowe. Wszystko tutaj pozostaje wyłączone, dopóki tego nie włączysz."
       }
     },
     "profile": "Profil",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "Usunięto passkey.",
     "integrationDisconnected": "Rozłączono {provider}.",
     "integrationDisconnectFailed": "Nie udało się rozłączyć {provider}.",
+    "preview": {
+      "topics": {
+        "title": "Tematy",
+        "description": "Dodaje obszar Tematy, który zbiera powiązane wartości, obok Twoich stron Insights.",
+        "detail": "Osiem tematów, od serca po cykl, pokazuje Twoje wartości obok siebie, jak zmieniają się razem, oraz linki do stron pojedynczych wskaźników, których już używasz. Strony Insights, nawigacja i linki zostają dokładnie takie, jakie są. Wszystko jest liczone z Twoich własnych wartości, bez AI. Wyłączenie usuwa wpis i niczego nie kasuje.",
+        "savedOn": "Wersja próbna Tematów włączona.",
+        "savedOff": "Wersja próbna Tematów wyłączona.",
+        "open": "Otwórz Tematy"
+      },
+      "loadError": "Nie udało się wczytać ustawień wersji próbnych."
+    },
     "timezoneSaved": "Strefa czasowa zapisana.",
     "moduleState": {
       "on": "Włączone",
@@ -13825,5 +13842,171 @@
       "startsOn": "Początek",
       "endsOn": "Koniec"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "Tematy",
+      "description": "Powiązane wartości zebrane z Twoich danych; otwórz temat, aby zobaczyć je obok siebie.",
+      "emptyTitle": "Na razie nie ma czego zebrać",
+      "emptyDescription": "Tematy pojawiają się, gdy są dla nich wartości: z urządzenia, z importu lub wpisane przez Ciebie.",
+      "notRecorded": "Brak jeszcze wartości dla: {topics}.",
+      "hiddenByModule": "Ukryte, bo moduł jest wyłączony: {topics}.",
+      "modulesLink": "Zmień moduły w ustawieniach"
+    },
+    "detail": {
+      "back": "Wszystkie tematy"
+    },
+    "loadError": "Nie udało się wczytać tematów.",
+    "previewNote": "To wersja próbna. Może się zmieniać między wydaniami, a strony pojedynczych wskaźników zostają bez zmian.",
+    "recorded": "Zapisane wartości: {count} z {total}",
+    "tone": {
+      "steady": "Stabilnie",
+      "watch": "Warto zerknąć",
+      "learning": "W trakcie nauki"
+    },
+    "summary": {
+      "outsideAbove": "{signal} jest powyżej Twojego zwykłego zakresu.",
+      "outsideBelow": "{signal} jest poniżej Twojego zwykłego zakresu.",
+      "labs": "{count} z {total} wyników badań mieści się w zakresie referencyjnym.",
+      "cycleDay": "Dzień cyklu {day}.",
+      "steadyAll": "Wszystko, co zapisane, mieści się w Twoim zwykłym zakresie.",
+      "steadySome": "{count} z {total} wartości mieści się w Twoim zwykłym zakresie; pozostałe są jeszcze poznawane.",
+      "learning": "Twój zwykły zakres jest jeszcze poznawany. Wystarczy tydzień pomiarów.",
+      "empty": "Nic jeszcze nie zapisano."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "w zakresie",
+      "cycleDay": "Dzień {day}"
+    },
+    "signals": {
+      "mood": "Nastrój"
+    },
+    "units": {
+      "moodScale": "z 5"
+    },
+    "names": {
+      "heart": {
+        "title": "Serce",
+        "description": "Tętno spoczynkowe, zmienność rytmu serca i wydolność, wraz ze snem i treningiem, które na nie wpływają."
+      },
+      "body": {
+        "title": "Ciało",
+        "description": "Masa ciała i skład ciała w czasie."
+      },
+      "bloodPressure": {
+        "title": "Ciśnienie krwi",
+        "description": "Skurczowe, rozkurczowe i tętno, wraz ze snem i aktywnością wokół nich."
+      },
+      "sleep": {
+        "title": "Sen",
+        "description": "Czas snu i wartości mierzone w nocy."
+      },
+      "activity": {
+        "title": "Aktywność i trening",
+        "description": "Kroki, minuty ćwiczeń, aktywna energia i obciążenie treningowe."
+      },
+      "metabolism": {
+        "title": "Metabolizm i badania",
+        "description": "Glukoza i Twoje wyniki badań, z trendem każdego markera."
+      },
+      "mind": {
+        "title": "Psychika",
+        "description": "Nastrój i kwestionariusze obok snu i aktywności."
+      },
+      "cycle": {
+        "title": "Cykl",
+        "description": "Twój cykl wraz z temperaturą i tętnem spoczynkowym, które za nim podążają."
+      }
+    },
+    "sources": {
+      "heart": "Te wartości pochodzą z zegarka, pierścienia lub pasa piersiowego, z Apple Zdrowie lub Health Connect albo z Twoich wpisów.",
+      "body": "Te wartości pochodzą z inteligentnej wagi, z importu lub z Twoich wpisów.",
+      "bloodPressure": "Te wartości pochodzą z ciśnieniomierza, z importu lub z Twoich wpisów.",
+      "sleep": "Te wartości pochodzą z zegarka lub pierścienia, z Apple Zdrowie lub Health Connect albo z Twoich wpisów.",
+      "activity": "Te wartości pochodzą z telefonu, zegarka lub pierścienia albo z Apple Zdrowie lub Health Connect.",
+      "metabolism": "Glukoza pochodzi z glukometru, importu z sensora lub Twoich wpisów; wyniki badań z raportu laboratoryjnego lub Twoich wpisów.",
+      "mind": "Te wartości pochodzą z Twoich wpisów nastroju i kwestionariuszy na stronie Dobrostan psychiczny.",
+      "cycle": "Te wartości pochodzą z Twojego dziennika cyklu i czujnika temperatury na nadgarstku."
+    },
+    "today": {
+      "title": "Dziś",
+      "usual": "Zwykle {low}–{high}",
+      "learning": "Zwykły zakres jest jeszcze poznawany",
+      "asOf": "Stan na {date}",
+      "details": "Szczegóły"
+    },
+    "state": {
+      "within": "W zakresie",
+      "above": "Powyżej zwykłego",
+      "below": "Poniżej zwykłego",
+      "learning": "W trakcie nauki"
+    },
+    "chart": {
+      "title": "Obok siebie",
+      "legend": "Zacieniowane: Twój zwykły zakres.",
+      "label": "{signals} w wybranym okresie, każdy w osobnym wierszu."
+    },
+    "range": {
+      "label": "Okres",
+      "7d": "7 d",
+      "30d": "30 d",
+      "90d": "90 d",
+      "1y": "1 r"
+    },
+    "relationships": {
+      "title": "Jak zmieniają się razem",
+      "insufficient": "{x} i {y}: na razie {count} z {required} wspólnych dni.",
+      "noClearLink": "Brak wyraźnego związku między {x} a {y} w ciągu {count} wspólnych dni.",
+      "splitHigher": "Gdy {x} było poniżej {threshold}, {y} było o {amount} wyższe niż w inne dni.",
+      "splitLower": "Gdy {x} było poniżej {threshold}, {y} było o {amount} niższe niż w inne dni.",
+      "splitDays": "Dni poniżej: {below}. Pozostałe dni: {other}.",
+      "correlationSameDayHigher": "Gdy {x} jest wyższe, {y} zwykle też jest wyższe (r = {r}).",
+      "correlationSameDayLower": "Gdy {x} jest wyższe, {y} zwykle jest niższe (r = {r}).",
+      "correlationNextDayHigher": "Gdy {x} jest wyższe, następnego dnia {y} zwykle jest wyższe (r = {r}).",
+      "correlationNextDayLower": "Gdy {x} jest wyższe, następnego dnia {y} zwykle jest niższe (r = {r}).",
+      "pairedDays": "Wspólne dni: {count}",
+      "footnote": "Pokazywane, gdy dwie wartości pokrywają się przez co najmniej 14 dni. Wzorzec, nie przyczyna.",
+      "scatterCaption": "Każdy punkt to jeden dzień: {x} w poziomie, {y} w pionie."
+    },
+    "trends": {
+      "title": "Trendy",
+      "window": "90 dni, średnie tygodniowe",
+      "insufficient": "Potrzeba 14 dni, na razie {count}"
+    },
+    "labs": {
+      "title": "Wyniki badań",
+      "above": "Powyżej zakresu",
+      "below": "Poniżej zakresu",
+      "trendsTitle": "Trendy",
+      "trendNeeds": "Trend wymaga trzech wartości w ciągu co najmniej roku. Jeszcze nie: {markers}."
+    },
+    "screeners": {
+      "title": "Kwestionariusze",
+      "none": "Nie wypełniono jeszcze żadnego kwestionariusza.",
+      "checkIns": "Wypełnione: {count}",
+      "improved": "Lepiej niż za pierwszym razem",
+      "worsened": "Gorzej niż za pierwszym razem",
+      "within_threshold": "W granicach zwykłych wahań",
+      "single": "Na razie wypełniony raz",
+      "open": "Otwórz Dobrostan psychiczny"
+    },
+    "cycle": {
+      "title": "Cykl",
+      "today": "Dzień cyklu {day}.",
+      "todayWithPhase": "Dzień cyklu {day}, faza: {phase}.",
+      "average": "Średnia długość cyklu: {days} dni.",
+      "needs": "Średnia wymaga dwóch zapisanych początków miesiączki; na razie jest ich {count}.",
+      "lengths": "Ostatnie cykle w dniach: {lengths}",
+      "open": "Otwórz stronę cyklu"
+    },
+    "links": {
+      "title": "Strony wskaźników",
+      "workouts": "Treningi"
+    },
+    "missing": {
+      "title": "Jeszcze nie zapisano: {signals}.",
+      "connect": "Połącz źródło"
+    }
   }
 }

messages/pt-BR.json

@@ -509,7 +509,9 @@
     "documents": "Documentos",
     "vaccinations": "Vacinas",
     "mentalWellbeing": "Bem-estar mental",
-    "timeline": "Linha do tempo"
+    "timeline": "Linha do tempo",
+    "topics": "Temas",
+    "previewBadge": "Beta"
   },
   "auth": {
     "login": "Entrar",
@@ -6142,6 +6144,10 @@
       "access": {
         "title": "Acesso compartilhado",
         "subtitle": "Quem pode abrir seu registro de saúde e de quem você pode abrir."
+      },
+      "preview": {
+        "title": "Recursos em prévia",
+        "subtitle": "Experimente o que ainda não está pronto. Tudo aqui fica desligado até você ativar."
       }
     },
     "profile": "Perfil",
@@ -7627,6 +7633,17 @@
     "passkeyRemovedToast": "Chave de acesso removida.",
     "integrationDisconnected": "{provider} desconectado.",
     "integrationDisconnectFailed": "Não foi possível desconectar {provider}.",
+    "preview": {
+      "topics": {
+        "title": "Temas",
+        "description": "Adiciona uma área Temas que reúne valores relacionados, ao lado das suas páginas de Análises.",
+        "detail": "Oito temas, do coração ao ciclo, mostram seus valores lado a lado, como eles variam juntos e links para as páginas por métrica que você já usa. Suas páginas de Análises, a navegação e os links continuam exatamente como estão. Tudo é calculado a partir dos seus próprios valores, sem IA. Desativar remove a entrada e não apaga nada.",
+        "savedOn": "Prévia de Temas ativada.",
+        "savedOff": "Prévia de Temas desativada.",
+        "open": "Abrir Temas"
+      },
+      "loadError": "Não foi possível carregar suas configurações de prévia."
+    },
     "timezoneSaved": "Fuso horário salvo.",
     "moduleState": {
       "on": "Ligado",
@@ -13758,5 +13775,171 @@
       "startsOn": "Início",
       "endsOn": "Fim"
     }
+  },
+  "topics": {
+    "overview": {
+      "title": "Temas",
+      "description": "Valores relacionados reunidos a partir dos seus dados; abra um tema para vê-los lado a lado.",
+      "emptyTitle": "Ainda não há o que reunir",
+      "emptyDescription": "Os temas aparecem assim que houver valores para eles: de um dispositivo, de uma importação ou registrados por você.",
+      "notRecorded": "Ainda sem registros para: {topics}.",
+      "hiddenByModule": "Ocultos porque o módulo está desligado: {topics}.",
+      "modulesLink": "Alterar módulos nas configurações"
+    },
+    "detail": {
+      "back": "Todos os temas"
+    },
+    "loadError": "Não foi possível carregar os temas.",
+    "previewNote": "Isto é uma prévia. Pode mudar entre versões, e suas páginas por métrica continuam como estão.",
+    "recorded": "Valores registrados: {count} de {total}",
+    "tone": {
+      "steady": "Estável",
+      "watch": "Vale uma olhada",
+      "learning": "Aprendendo"
+    },
+    "summary": {
+      "outsideAbove": "{signal} está acima da sua faixa habitual.",
+      "outsideBelow": "{signal} está abaixo da sua faixa habitual.",
+      "labs": "{count} de {total} exames estão dentro da faixa de referência.",
+      "cycleDay": "Dia {day} do ciclo.",
+      "steadyAll": "Tudo o que foi registrado está dentro da sua faixa habitual.",
+      "steadySome": "{count} de {total} valores estão dentro da sua faixa habitual; os demais ainda estão sendo aprendidos.",
+      "learning": "Sua faixa habitual ainda está sendo aprendida. Uma semana de registros basta.",
+      "empty": "Nada registrado ainda."
+    },
+    "headline": {
+      "labsValue": "{count}/{total}",
+      "labsUnit": "na faixa",
+      "cycleDay": "Dia {day}"
+    },
+    "signals": {
+      "mood": "Humor"
+    },
+    "units": {
+      "moodScale": "de 5"
+    },
+    "names": {
+      "heart": {
+        "title": "Coração",
+        "description": "Frequência cardíaca em repouso, variabilidade e condicionamento, com o sono e o treino que os influenciam."
+      },
+      "body": {
+        "title": "Corpo",
+        "description": "Peso e composição corporal ao longo do tempo."
+      },
+      "bloodPressure": {
+        "title": "Pressão arterial",
+        "description": "Sistólica, diastólica e pulso, com o sono e a atividade ao redor."
+      },
+      "sleep": {
+        "title": "Sono",
+        "description": "Tempo dormindo e os valores medidos à noite."
+      },
+      "activity": {
+        "title": "Atividade e treino",
+        "description": "Passos, minutos de exercício, energia ativa e carga de treino."
+      },
+      "metabolism": {
+        "title": "Metabolismo e exames",
+        "description": "Glicose e seus exames, com a tendência de cada marcador."
+      },
+      "mind": {
+        "title": "Mente",
+        "description": "Humor e questionários ao lado do sono e da atividade."
+      },
+      "cycle": {
+        "title": "Ciclo",
+        "description": "Seu ciclo com a temperatura e a frequência cardíaca em repouso que o acompanham."
+      }
+    },
+    "sources": {
+      "heart": "Esses valores vêm de um relógio, anel ou cinta peitoral, do Apple Saúde ou do Health Connect, ou dos seus registros.",
+      "body": "Esses valores vêm de uma balança inteligente, de uma importação ou dos seus registros.",
+      "bloodPressure": "Esses valores vêm de um medidor de pressão, de uma importação ou dos seus registros.",
+      "sleep": "Esses valores vêm de um relógio ou anel, do Apple Saúde ou do Health Connect, ou dos seus registros.",
+      "activity": "Esses valores vêm de um celular, relógio ou anel, ou do Apple Saúde ou do Health Connect.",
+      "metabolism": "A glicose vem de um glicosímetro, de uma importação do sensor ou dos seus registros; os exames, de um laudo ou dos seus registros.",
+      "mind": "Esses valores vêm dos seus registros de humor e dos questionários da página Bem-estar mental.",
+      "cycle": "Esses valores vêm do seu registro do ciclo e de um sensor de temperatura no pulso."
+    },
+    "today": {
+      "title": "Hoje",
+      "usual": "Habitual {low}–{high}",
+      "learning": "Faixa habitual ainda em aprendizado",
+      "asOf": "Em {date}",
+      "details": "Detalhes"
+    },
+    "state": {
+      "within": "Dentro",
+      "above": "Acima do habitual",
+      "below": "Abaixo do habitual",
+      "learning": "Aprendendo"
+    },
+    "chart": {
+      "title": "Lado a lado",
+      "legend": "Sombreado: sua faixa habitual.",
+      "label": "{signals} no período escolhido, uma linha cada."
+    },
+    "range": {
+      "label": "Período",
+      "7d": "7d",
+      "30d": "30d",
+      "90d": "90d",
+      "1y": "1a"
+    },
+    "relationships": {
+      "title": "Como eles variam juntos",
+      "insufficient": "{x} e {y}: {count} de {required} dias pareados até agora.",
+      "noClearLink": "Nenhuma relação clara entre {x} e {y} em {count} dias pareados.",
+      "splitHigher": "Quando {x} ficou abaixo de {threshold}, {y} foi {amount} mais alto do que nos outros dias.",
+      "splitLower": "Quando {x} ficou abaixo de {threshold}, {y} foi {amount} mais baixo do que nos outros dias.",
+      "splitDays": "Dias abaixo: {below}. Outros dias: {other}.",
+      "correlationSameDayHigher": "Quando {x} sobe, {y} também tende a ficar mais alto (r = {r}).",
+      "correlationSameDayLower": "Quando {x} sobe, {y} tende a ficar mais baixo (r = {r}).",
+      "correlationNextDayHigher": "Quando {x} sobe, {y} tende a ficar mais alto no dia seguinte (r = {r}).",
+      "correlationNextDayLower": "Quando {x} sobe, {y} tende a ficar mais baixo no dia seguinte (r = {r}).",
+      "pairedDays": "Dias pareados: {count}",
+      "footnote": "Aparece quando dois valores coincidem em pelo menos 14 dias. Um padrão, não uma causa.",
+      "scatterCaption": "Cada ponto é um dia: {x} na horizontal, {y} na vertical."
+    },
+    "trends": {
+      "title": "Tendências",
+      "window": "90 dias, médias semanais",
+      "insufficient": "Precisa de 14 dias, {count} até agora"
+    },
+    "labs": {
+      "title": "Exames",
+      "above": "Acima da faixa",
+      "below": "Abaixo da faixa",
+      "trendsTitle": "Tendências",
+      "trendNeeds": "Uma tendência precisa de três valores ao longo de pelo menos um ano. Ainda não: {markers}."
+    },
+    "screeners": {
+      "title": "Questionários",
+      "none": "Nenhum questionário respondido ainda.",
+      "checkIns": "Respondidos: {count}",
+      "improved": "Melhor que na primeira vez",
+      "worsened": "Pior que na primeira vez",
+      "within_threshold": "Dentro da variação habitual",
+      "single": "Respondido uma vez até agora",
+      "open": "Abrir Bem-estar mental"
+    },
+    "cycle": {
+      "title": "Ciclo",
+      "today": "Dia {day} do ciclo.",
+      "todayWithPhase": "Dia {day} do ciclo, fase {phase}.",
+      "average": "Duração média do ciclo: {days} dias.",
+      "needs": "Uma média precisa de dois inícios de menstruação registrados; até agora são {count}.",
+      "lengths": "Ciclos recentes, em dias: {lengths}",
+      "open": "Abrir a página do ciclo"
+    },
+    "links": {
+      "title": "Páginas por métrica",
+      "workouts": "Treinos"
+    },
+    "missing": {
+      "title": "Ainda não registrado: {signals}.",
+      "connect": "Conectar uma fonte"
+    }
   }
 }

src/__tests__/baselines/source-file-lines.json

@@ -1,7 +1,7 @@
 {
   "$comment": "Production files over 800 lines and their length. Maintained by src/__tests__/source-size-ratchet.test.ts.",
-  "count": 123,
-  "total": 145428,
+  "count": 122,
+  "total": 144573,
   "entries": {
     "app/api/dashboard/summary/route.ts": 1032,
     "app/api/documents/inbound/route.ts": 811,
@@ -25,7 +25,6 @@
     "components/insights/derived/vitals-dashboard.tsx": 1033,
     "components/insights/health-score-card.tsx": 1023,
     "components/insights/insights-tab-strip.tsx": 1086,
-    "components/layout/sidebar-nav.tsx": 855,
     "components/measurement-reminders/vorsorge-section.tsx": 1536,
     "components/measurements/measurement-form.tsx": 815,
     "components/measurements/measurement-list.tsx": 2019,

src/__tests__/baselines/source-function-lines.json

@@ -1,7 +1,7 @@
 {
   "$comment": "Production functions over 200 lines, keyed \"file :: name\", and their length. Maintained by src/__tests__/source-size-ratchet.test.ts.",
   "count": 411,
-  "total": 148109,
+  "total": 148044,
   "entries": {
     "app/achievements/page.tsx :: AchievementsPage": 206,
     "app/api/admin/backups/upload/route.ts :: apiHandler(arg)": 314,
@@ -9,7 +9,7 @@
     "app/api/admin/settings/route.ts :: apiHandler(arg) #2": 217,
     "app/api/analytics/route.ts :: buildAnalyticsResponse": 446,
     "app/api/auth/login/route.ts :: apiHandler(arg)": 262,
-    "app/api/auth/me/route.ts :: apiHandler(arg)": 386,
+    "app/api/auth/me/route.ts :: apiHandler(arg)": 384,
     "app/api/auth/oidc/callback/route.ts :: apiHandler(arg)": 499,
     "app/api/auth/register/route.ts :: apiHandler(arg)": 275,
     "app/api/coach/about-me/route.ts :: apiHandler(arg) #2": 309,
@@ -173,9 +173,9 @@
     "components/labs/ocr-review-dialog.tsx :: OcrReviewDialog": 359,
     "components/labs/ocr-row-editor.tsx :: OcrRowEditor": 393,
     "components/layout/auth-shell.tsx :: AuthShell": 520,
-    "components/layout/bottom-nav.tsx :: BottomNav": 262,
+    "components/layout/bottom-nav.tsx :: BottomNav": 229,
     "components/layout/capture-picker.tsx :: CapturePicker": 235,
-    "components/layout/sidebar-nav.tsx :: SidebarNav": 372,
+    "components/layout/sidebar-nav.tsx :: SidebarNav": 342,
     "components/layout/top-bar.tsx :: TopBar": 212,
     "components/links/entity-link-picker.tsx :: EntityLinkPicker": 392,
     "components/measurement-reminders/vorsorge-dashboard-card.tsx :: VorsorgeDashboardCard": 215,

src/__tests__/baselines/test-as-never.json

@@ -1,7 +1,7 @@
 {
   "$comment": "as never casts in tests, per test file under src/. Maintained by src/__tests__/test-realism-ratchet.test.ts.",
-  "count": 524,
-  "total": 5495,
+  "count": 523,
+  "total": 5494,
   "entries": {
     "__tests__/api/auth/login/mfa-branch.test.ts": 10,
     "__tests__/api/auth/mfa/verify.test.ts": 9,
@@ -273,7 +273,6 @@
     "components/medications/__tests__/use-medication-intake.test.ts": 1,
     "components/medications/detail/efficacy/__tests__/change-at-start-summary.test.tsx": 1,
     "components/mood/__tests__/mood-list-url-sync.test.tsx": 1,
-    "components/settings/__tests__/settings-shell.test.tsx": 1,
     "components/settings/integrations/__tests__/dawarich-card.test.tsx": 1,
     "components/timeline/__tests__/medication-rows.test.ts": 1,
     "lib/__tests__/acting-account-resolver.test.ts": 5,

src/__tests__/baselines/version-stamp-comments.json

@@ -1,7 +1,7 @@
 {
   "$comment": "Comment lines that open with a release version, per file under src/. Maintained by src/__tests__/version-stamp-ratchet.test.ts.",
   "count": 2954,
-  "total": 10500,
+  "total": 10499,
   "entries": {
     "__tests__/account-payload-consumer-guard.test.ts": 2,
     "__tests__/acting-account-boundary-guard.test.ts": 7,
@@ -2807,7 +2807,7 @@
     "lib/rollups/mood-rollups.ts": 4,
     "lib/rollups/tiered-context.ts": 6,
     "lib/score-config/rows.ts": 1,
-    "lib/settings/section-slugs.ts": 20,
+    "lib/settings/section-slugs.ts": 19,
     "lib/sharing/__tests__/account-access-parse.test.ts": 3,
     "lib/sharing/__tests__/account-access.test.ts": 2,
     "lib/sharing/__tests__/account-label.test.ts": 1,

src/__tests__/settings-copy-tense.test.ts

@@ -3,8 +3,9 @@
  *
  * The workout-route switch is off for new accounts, which is what its detail
  * says rather than "off by default": an account that already held tracks at
- * the upgrade started with it on (migration 0434). (The Topics preview switch
- * this file also held is unlisted until its pages ship, and its copy with it.)
+ * the upgrade started with it on (migration 0434). The Topics preview switch
+ * this file also held describes pages that now exist, so its copy is in the
+ * present tense like every other switch.
  */
 import { describe, expect, it } from "vitest";
 

src/__tests__/settings-legacy-routes.test.ts

@@ -54,6 +54,8 @@ const HISTORICAL_SETTINGS_PATHS: readonly string[] = [
   "/settings/export",
   "/settings/advanced",
   "/settings/privacy",
+  // Preview features (Settings > System).
+  "/settings/preview",
   "/settings/about",
   // The per-module personalisation slugs before the layout hub.
   "/settings/dashboard",

src/app/topics/[topic]/page.tsx

@@ -0,0 +1,24 @@
+import { notFound } from "next/navigation";
+
+import { TopicDetailView } from "@/components/topics/topic-detail";
+import { TopicsPreviewGate } from "@/components/topics/topics-preview-gate";
+import { isTopicKey } from "@/lib/topics/registry";
+
+/**
+ * `/topics/<topic>` (preview): one topic page. A name that is not a topic is
+ * a 404 here, before anything renders; the preview switch is checked by the
+ * gate, the record's modules by the route behind the page.
+ */
+export default async function TopicPage({
+  params,
+}: {
+  params: Promise<{ topic: string }>;
+}) {
+  const { topic } = await params;
+  if (!isTopicKey(topic)) notFound();
+  return (
+    <TopicsPreviewGate>
+      <TopicDetailView topic={topic} />
+    </TopicsPreviewGate>
+  );
+}

src/app/topics/page.tsx

@@ -0,0 +1,14 @@
+import { TopicsOverview } from "@/components/topics/topics-overview";
+import { TopicsPreviewGate } from "@/components/topics/topics-preview-gate";
+
+/**
+ * `/topics` (preview): the topic overview. Exists only for a person who
+ * switched the preview on; see `TopicsPreviewGate`.
+ */
+export default function TopicsPage() {
+  return (
+    <TopicsPreviewGate>
+      <TopicsOverview />
+    </TopicsPreviewGate>
+  );
+}

src/components/charts/chart-runtime.ts

@@ -58,3 +58,4 @@ export { NutrientDailyBarChart } from "./nutrient-daily-bar-chart";
 export { WorkoutHrChart } from "./workout-hr-chart";
 export { WorkoutElevationChart } from "./workout-elevation-chart";
 export { CoachResultChart } from "@/components/insights/coach-panel/result-chart";
+export { TopicSideBySideChart } from "@/components/topics/topic-side-by-side-chart";

src/components/command-palette/__tests__/build-index.test.ts

@@ -12,6 +12,7 @@ function index(over: Partial<PaletteIndexInput> = {}) {
     t,
     modules: {},
     navModules: {},
+    previews: null,
     inSharedRecord: false,
     sections: null,
     isAdmin: false,
@@ -27,6 +28,16 @@ function index(over: Partial<PaletteIndexInput> = {}) {
 
 const ids = (entries: ReturnType<typeof index>) => entries.map((e) => e.id);
 
+describe("buildPaletteIndex — previews", () => {
+  it("offers the Topics page only while the person switched the preview on", () => {
+    expect(ids(index())).not.toContain("nav:/topics");
+    expect(ids(index({ previews: { topics: false } }))).not.toContain(
+      "nav:/topics",
+    );
+    expect(ids(index({ previews: { topics: true } }))).toContain("nav:/topics");
+  });
+});
+
 describe("buildPaletteIndex — modules", () => {
   it("a switched-off module takes its page, its Insights page and its cards along", () => {
     const off = { mood: false, timeline: false, environment: false };

src/components/command-palette/build-index.ts

@@ -18,6 +18,7 @@ import { SETTINGS_SECTIONS } from "@/components/settings/settings-shell";
 import { SUB_PAGE_SLUGS } from "@/lib/insights/sub-page-metric";
 import { MODULE_REGISTRY, type ModuleKey } from "@/lib/modules/registry";
 import { isSurfaceVisible, type SurfaceModuleMap } from "@/lib/modules/surface";
+import type { PreviewFeatures } from "@/lib/settings/preview-features";
 import type { ShareDomain } from "@/lib/sharing/scope";
 
 import {
@@ -74,6 +75,8 @@ export interface PaletteIndexInput {
   modules: SurfaceModuleMap | undefined;
   /** The same map with `coach` following the AI capability (`useNavModules`). */
   navModules: SurfaceModuleMap | undefined;
+  /** The person's own preview opt-ins; null offers no preview page. */
+  previews: PreviewFeatures | null;
   inSharedRecord: boolean;
   /** The shared record's covered sections, when there is one. */
   sections: ReadonlyArray<ShareDomain> | null;
@@ -121,6 +124,7 @@ export function buildPaletteIndex(input: PaletteIndexInput): PaletteEntry[] {
     true,
     input.inSharedRecord,
     input.sections,
+    input.previews,
   );
   const navHrefs = new Set(nav.map((d) => d.href));
   for (const d of nav) {

src/components/command-palette/use-palette-index.ts

@@ -10,6 +10,7 @@ import { useAiCapability } from "@/hooks/use-ai-capability";
 import { useAuth } from "@/hooks/use-auth";
 import { useModuleEnabledState } from "@/hooks/use-module-toggle";
 import { useNavModules } from "@/hooks/use-nav-modules";
+import { usePreviewFeatures } from "@/hooks/use-preview-features";
 import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
 import {
   buildPaletteIndex,
@@ -32,6 +33,7 @@ export function usePaletteIndex(): PaletteEntry[] {
   const { t } = useTranslations();
   const { user } = useAuth();
   const navModules = useNavModules();
+  const previews = usePreviewFeatures();
   const capabilities = useRecordCapabilities();
   const { inSharedRecord, sections, recordKind, level } = capabilities;
   const coach = useAiCapability("coach");
@@ -64,6 +66,7 @@ export function usePaletteIndex(): PaletteEntry[] {
         t,
         modules: user?.modules,
         navModules,
+        previews,
         inSharedRecord,
         sections,
         isAdmin: user?.role === "ADMIN",
@@ -85,6 +88,7 @@ export function usePaletteIndex(): PaletteEntry[] {
       user?.modules,
       user?.role,
       navModules,
+      previews,
       inSharedRecord,
       sections,
       recordKind,

src/components/labs/lab-trend-card.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { TileHeader } from "@/components/insights/tile-header";
 import { useFormatters, useTranslations } from "@/lib/i18n/context";
 
+import { labTrendLines } from "./lab-trend-lines";
 import type { BiomarkerTrendDto } from "./types";
 
 /**
@@ -27,44 +28,12 @@ export function LabTrendCard({
   const fmt = useFormatters();
   if (!trend || trend.status !== "ok") return null;
 
-  const digits = Math.abs(trend.slopePerYear) >= 10 ? 0 : 2;
-  const per = (v: number) => fmt.number(Math.abs(v), digits);
-  const direction =
-    trend.slopePerYear > 0
-      ? "rising"
-      : trend.slopePerYear < 0
-        ? "falling"
-        : "flat";
-  const slopeLine = t(`labs.trend.slope.${direction}`, {
-    amount: per(trend.slopePerYear),
+  const { slope: slopeLine, projection: projectionLine } = labTrendLines(
+    trend,
     unit,
-    n: trend.n,
-    since: fmt.dateShortSmartCalendar(trend.firstAt),
-  });
-  const projectionLine =
-    trend.projection === "exits" && trend.exitDate
-      ? t(`labs.trend.projection.exits.${trend.exitBound ?? "high"}`, {
-          date: fmt.dateShortSmartCalendar(trend.exitDate),
-        })
-      : trend.projection === "no_band"
-        ? null
-        : trend.projection === "stale"
-          ? t("labs.trend.projection.stale", {
-              date: fmt.dateShortSmartCalendar(trend.lastAt),
-            })
-          : trend.projection === "beyond_horizon"
-            ? t(
-                trend.horizonCapped
-                  ? "labs.trend.projection.beyond_horizon_capped"
-                  : "labs.trend.projection.beyond_horizon",
-                {
-                  years: fmt.number(
-                    trend.horizonYears,
-                    trend.horizonCapped ? 0 : 1,
-                  ),
-                },
-              )
-            : t(`labs.trend.projection.${trend.projection}`);
+    t,
+    fmt,
+  );
 
   return (
     <Card data-slot="lab-trend">

src/components/labs/lab-trend-lines.ts

@@ -0,0 +1,60 @@
+import type { Formatters } from "@/lib/format-locale";
+
+import type { BiomarkerTrendDto } from "./types";
+
+type Translate = (
+  key: string,
+  params?: Record<string, string | number>,
+) => string;
+
+/**
+ * The two sentences a lab trend reads as: the slope across the readings, and
+ * where the straight line would meet the reference band (or why it is not
+ * drawn). Shared by the marker page's trend card and the metabolism topic, so
+ * one trend is never worded two ways.
+ */
+export function labTrendLines(
+  trend: Extract<BiomarkerTrendDto, { status: "ok" }>,
+  unit: string,
+  t: Translate,
+  fmt: Formatters,
+): { slope: string; projection: string | null } {
+  const digits = Math.abs(trend.slopePerYear) >= 10 ? 0 : 2;
+  const direction =
+    trend.slopePerYear > 0
+      ? "rising"
+      : trend.slopePerYear < 0
+        ? "falling"
+        : "flat";
+  const slope = t(`labs.trend.slope.${direction}`, {
+    amount: fmt.number(Math.abs(trend.slopePerYear), digits),
+    unit,
+    n: trend.n,
+    since: fmt.dateShortSmartCalendar(trend.firstAt),
+  });
+  const projection =
+    trend.projection === "exits" && trend.exitDate
+      ? t(`labs.trend.projection.exits.${trend.exitBound ?? "high"}`, {
+          date: fmt.dateShortSmartCalendar(trend.exitDate),
+        })
+      : trend.projection === "no_band"
+        ? null
+        : trend.projection === "stale"
+          ? t("labs.trend.projection.stale", {
+              date: fmt.dateShortSmartCalendar(trend.lastAt),
+            })
+          : trend.projection === "beyond_horizon"
+            ? t(
+                trend.horizonCapped
+                  ? "labs.trend.projection.beyond_horizon_capped"
+                  : "labs.trend.projection.beyond_horizon",
+                {
+                  years: fmt.number(
+                    trend.horizonYears,
+                    trend.horizonCapped ? 0 : 1,
+                  ),
+                },
+              )
+            : t(`labs.trend.projection.${trend.projection}`);
+  return { slope, projection };
+}

src/components/layout/__tests__/nav-model-shared-record.test.ts

@@ -105,13 +105,31 @@ describe("the destination list under a switch", () => {
   });
 
   it("changes nothing for a session in its own record", () => {
-    const own = visibleNavDestinations(ALL_MODULES, true).map((d) => d.href);
+    const own = visibleNavDestinations(ALL_MODULES, true, false, null, {
+      topics: true,
+    }).map((d) => d.href);
     expect(own).toEqual(
       NAV_DESTINATIONS.filter((d) => !d.sharedRecordOnly).map((d) => d.href),
     );
     expect(own).not.toContain("/profile");
   });
 
+  it("offers Topics inside a whole-record share only with the viewer's own preview on", () => {
+    const share = (previews: { topics: boolean } | null) =>
+      visibleNavDestinations(ALL_MODULES, true, true, null, previews).map(
+        (d) => d.href,
+      );
+    expect(share({ topics: true })).toContain("/topics");
+    expect(share({ topics: false })).not.toContain("/topics");
+    expect(share(null)).not.toContain("/topics");
+    // A grant scoped to sections never opens a page that lays them side by side.
+    expect(
+      visibleNavDestinations(ALL_MODULES, true, true, ["measurements"], {
+        topics: true,
+      }).map((d) => d.href),
+    ).not.toContain("/topics");
+  });
+
   it("offers the read-only profile summary only inside a shared record", () => {
     expect(hrefsInSharedRecord()).toContain("/profile");
   });

src/components/layout/__tests__/nav-model.test.ts

@@ -215,6 +215,42 @@ describe("mobileMoreHubDestinations — the F-1 mobile invariant (feature-only h
   });
 });
 
+describe("a preview entry (Topics)", () => {
+  it("exists only while the person reading switched the preview on", () => {
+    const hrefs = (previews: { topics: boolean } | null, mounted = true) =>
+      visibleNavDestinations({}, mounted, false, null, previews).map(
+        (d) => d.href,
+      );
+    expect(hrefs(null)).not.toContain("/topics");
+    expect(hrefs({ topics: false })).not.toContain("/topics");
+    expect(hrefs({ topics: true })).toContain("/topics");
+    // Fail-closed before mount, so SSR and the first paint agree.
+    expect(hrefs({ topics: true }, false)).not.toContain("/topics");
+  });
+
+  it("sits directly below Insights in the sidebar", () => {
+    const hrefs = visibleNavDestinations({}, true, false, null, {
+      topics: true,
+    }).map((d) => d.href);
+    expect(hrefs[hrefs.indexOf("/insights") + 1]).toBe("/topics");
+  });
+
+  it("leads the phone's More hub with its badge and never takes a bottom-bar slot", () => {
+    const hub = mobileMoreHubDestinations({
+      modules: {},
+      previews: { topics: true },
+    });
+    expect(hub[0]).toMatchObject({ href: "/topics", preview: "topics" });
+    expect(BOTTOM_NAV_PRIMARY_SLOT_HREFS).not.toContain("/topics");
+    expect(
+      mobileMoreHubDestinations({
+        modules: {},
+        previews: { topics: false },
+      }).map((d) => d.href),
+    ).not.toContain("/topics");
+  });
+});
+
 describe("isNavDestinationActive most-specific resolution", () => {
   it("matches the dashboard only on an exact path", () => {
     expect(isNavDestinationActive("/", "/")).toBe(true);

src/components/layout/bottom-nav.tsx

@@ -21,6 +21,8 @@ import { isSurfaceVisible } from "@/lib/modules/surface";
 import { useCallback, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/use-auth";
 import { useNavModules } from "@/hooks/use-nav-modules";
+import { usePreviewFeatures } from "@/hooks/use-preview-features";
+import { PreviewBadge } from "@/components/topics/preview-badge";
 import { useMounted } from "@/hooks/use-mounted";
 import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
 import {
@@ -42,6 +44,8 @@ interface NavLink {
   href: string;
   tKey: string;
   icon: LucideIcon;
+  /** A preview entry; its tile carries the Beta badge. */
+  preview?: string;
 }
 
 // v1.12.x — iOS-parity bottom bar (additive middle-path).
@@ -111,6 +115,7 @@ export function BottomNav() {
   // The Coach entry follows the `coach` AI capability (a Coach that cannot
   // answer is not offered); the sidebar reads the same map.
   const navModules = useNavModules();
+  const previews = usePreviewFeatures();
   const moreHub = useMemo<ReadonlyArray<NavLink>>(
     () =>
       mobileMoreHubDestinations({
@@ -118,8 +123,9 @@ export function BottomNav() {
         mounted,
         sharedRecord,
         sections,
+        previews,
       }),
-    [navModules, mounted, sharedRecord, sections],
+    [navModules, mounted, sharedRecord, sections, previews],
   );
 
   // Every slot but Home asks two things: does sharing cover it, and does its
@@ -289,52 +295,72 @@ export function BottomNav() {
               second line instead of clipping the last character at the tile
               edge. */}
           <div className="grid grid-cols-2 gap-2 px-3 pt-4 pb-4">
-            {moreHub.map((item) => {
-              const isActive = isActiveLink(item.href);
-              return (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  onClick={() => setMoreOpen(false)}
-                  aria-current={isActive ? "page" : undefined}
-                  // v1.12 — `min-h-14` matches the capture-picker tiles so
-                  // the equivalent tappable rows share one height at this
-                  // tier (and the larger row is a more comfortable target).
-                  // v1.22.1 — trim the inner padding/gap (`px-3`, `gap-2.5`)
-                  // to hand the label more horizontal room without changing
-                  // the shared tile height.
-                  className={cn(
-                    "border-border flex min-h-14 items-center gap-2.5 rounded-lg border px-3 py-3 transition-colors",
-                    isActive
-                      ? "text-primary bg-primary/5"
-                      : "text-foreground hover:bg-accent/40",
-                  )}
-                >
-                  <item.icon className="h-5 w-5 shrink-0" aria-hidden="true" />
-                  {/* v1.18.10 — show the FULL label, never an ellipsis
-                      that hides meaning. The W7 `truncate` clipped long words
-                      ("Benachrichtigungen" → "Benachrichtigun…"); the goal is a
-                      readable label, not a balanced tile. Shrink the type to
-                      `text-xs` so long single-word locales (de/es/fr/it) fit on
-                      one line where they can, and allow a 2-line `line-clamp-2`
-                      fallback (with `[overflow-wrap:anywhere]` so a long word
-                      breaks rather than overflowing) for the rare label that
-                      still cannot fit one line. `min-w-0` lets the flex child
-                      shrink below its content width. v1.22.1 — with the wider
-                      text area above, "Benachrichtigungen" wraps fully inside
-                      two lines down to a 320 px viewport. */}
-                  <span
-                    className="line-clamp-2 min-w-0 text-xs leading-tight font-medium [overflow-wrap:anywhere]"
-                    title={t(item.tKey)}
-                  >
-                    {t(item.tKey)}
-                  </span>
-                </Link>
-              );
-            })}
+            {moreHub.map((item) => (
+              <MoreHubTile
+                key={item.href}
+                item={item}
+                active={isActiveLink(item.href)}
+                onNavigate={() => setMoreOpen(false)}
+              />
+            ))}
           </div>
         </SheetContent>
       </Sheet>
     </>
   );
 }
+
+/** One destination tile in the More sheet. */
+function MoreHubTile({
+  item,
+  active,
+  onNavigate,
+}: {
+  item: NavLink;
+  active: boolean;
+  onNavigate: () => void;
+}) {
+  const { t } = useTranslations();
+  return (
+    <Link
+      href={item.href}
+      onClick={onNavigate}
+      aria-current={active ? "page" : undefined}
+      // v1.12 — `min-h-14` matches the capture-picker tiles so
+      // the equivalent tappable rows share one height at this
+      // tier (and the larger row is a more comfortable target).
+      // v1.22.1 — trim the inner padding/gap (`px-3`, `gap-2.5`)
+      // to hand the label more horizontal room without changing
+      // the shared tile height.
+      className={cn(
+        "border-border flex min-h-14 items-center gap-2.5 rounded-lg border px-3 py-3 transition-colors",
+        active
+          ? "text-primary bg-primary/5"
+          : "text-foreground hover:bg-accent/40",
+      )}
+    >
+      <item.icon className="h-5 w-5 shrink-0" aria-hidden="true" />
+      {/* v1.18.10 — show the FULL label, never an ellipsis
+          that hides meaning. The W7 `truncate` clipped long words
+          ("Benachrichtigungen" → "Benachrichtigun…"); the goal is a
+          readable label, not a balanced tile. Shrink the type to
+          `text-xs` so long single-word locales (de/es/fr/it) fit on
+          one line where they can, and allow a 2-line `line-clamp-2`
+          fallback (with `[overflow-wrap:anywhere]` so a long word
+          breaks rather than overflowing) for the rare label that
+          still cannot fit one line. `min-w-0` lets the flex child
+          shrink below its content width. v1.22.1 — with the wider
+          text area above, "Benachrichtigungen" wraps fully inside
+          two lines down to a 320 px viewport. */}
+      <span
+        className="line-clamp-2 min-w-0 text-xs leading-tight font-medium [overflow-wrap:anywhere]"
+        title={t(item.tKey)}
+      >
+        {t(item.tKey)}
+      </span>
+      {item.preview ? (
+        <PreviewBadge label={t("nav.previewBadge")} className="ml-auto" />
+      ) : null}
+    </Link>
+  );
+}

src/components/layout/global-shortcuts.tsx

@@ -29,6 +29,7 @@ import {
 } from "@/components/layout/nav-model";
 import { useAuth } from "@/hooks/use-auth";
 import { useNavModules } from "@/hooks/use-nav-modules";
+import { usePreviewFeatures } from "@/hooks/use-preview-features";
 import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
 import {
   createShortcutReader,
@@ -103,6 +104,7 @@ export function openCapturePicker(): void {
 function useShortcutOffer(): ShortcutOffer & { canCapture: boolean } {
   const { user } = useAuth();
   const navModules = useNavModules();
+  const previews = usePreviewFeatures();
   const capabilities = useRecordCapabilities();
   const { inSharedRecord, sections, recordKind, level } = capabilities;
   const manageableDomains = user?.accountAccess?.active?.manageableDomains;
@@ -111,10 +113,14 @@ function useShortcutOffer(): ShortcutOffer & { canCapture: boolean } {
       .length > 0;
   const navHrefs = useMemo(
     () =>
-      visibleNavDestinations(navModules, true, inSharedRecord, sections).map(
-        (d) => d.href,
-      ),
-    [navModules, inSharedRecord, sections],
+      visibleNavDestinations(
+        navModules,
+        true,
+        inSharedRecord,
+        sections,
+        previews,
+      ).map((d) => d.href),
+    [navModules, inSharedRecord, sections, previews],
   );
   const settingsHref = useMemo(
     () =>

src/components/layout/nav-model.ts

@@ -8,6 +8,7 @@ import {
   FlaskConical,
   History,
   Home,
+  Layers,
   Lightbulb,
   MessagesSquare,
   Pill,
@@ -29,6 +30,10 @@ import {
   type SettingsRecordContext,
 } from "@/lib/record-settings/classification";
 import { isSharedRecordPathPresentable } from "@/lib/navigation/shared-record";
+import type {
+  PreviewFeatureKey,
+  PreviewFeatures,
+} from "@/lib/settings/preview-features";
 import type { ShareDomain } from "@/lib/sharing/scope";
 
 /**
@@ -78,6 +83,14 @@ export interface NavDestination {
   sharedRecord?: boolean;
   /** A record-only view, intentionally absent from the actor's own nav. */
   sharedRecordOnly?: boolean;
+  /**
+   * A preview the person switches on for themselves (Settings >
+   * System > Preview features). The entry exists only while that flag is on
+   * for the person reading, carries a Beta badge, and leads the phone's More
+   * hub so a freshly switched-on preview is found. Fail-closed: hidden until
+   * the account payload has said yes.
+   */
+  preview?: PreviewFeatureKey;
 }
 
 /**
@@ -250,6 +263,21 @@ export const NAV_DESTINATIONS: ReadonlyArray<NavDestination> = [
     icon: Lightbulb,
     tourId: "nav-insights",
   },
+  // Topics (preview): overview pages that bring related signals
+  // together and link into the single-metric Insights pages, which stay
+  // exactly as they are. Directly below Insights in the sidebar; on a phone it
+  // lands in the More hub (first), never in the bottom bar. Only while the
+  // person reading switched the preview on. A record read across sections,
+  // like the timeline: a delegate holding the whole record sees it (with their
+  // own preview on), a scoped grant never does.
+  {
+    href: "/topics",
+    sharedRecord: true,
+    tKey: "nav.topics",
+    icon: Layers,
+    tourId: "nav-topics",
+    preview: "topics",
+  },
   // v1.17.1 — the Coach finally gets a single labeled nav home. It
   // was reachable from seven scattered entry points (FAB, hero CTA, empty
   // states, per-metric icons …) but nowhere in the nav, so a new user
@@ -377,7 +405,11 @@ function isNavDestinationVisible(
   mounted = true,
   sharedRecord = false,
   sections: readonly ShareDomain[] | null = null,
+  previews: PreviewFeatures | null = null,
 ): boolean {
+  // A preview entry exists only once the payload has said the person reading
+  // switched it on: fail-closed before mount and while the payload is absent.
+  if (d.preview && (!mounted || previews?.[d.preview] !== true)) return false;
   if (
     sharedRecord &&
     (d.sharedRecord !== true ||
@@ -440,9 +472,17 @@ export function visibleNavDestinations(
   mounted = true,
   sharedRecord = false,
   sections: readonly ShareDomain[] | null = null,
+  previews: PreviewFeatures | null = null,
 ): NavDestination[] {
   return NAV_DESTINATIONS.filter((d) =>
-    isNavDestinationVisible(d, modules, mounted, sharedRecord, sections),
+    isNavDestinationVisible(
+      d,
+      modules,
+      mounted,
+      sharedRecord,
+      sections,
+      previews,
+    ),
   );
 }
 
@@ -463,6 +503,8 @@ export interface MobileMoreHubEntry {
   href: string;
   tKey: string;
   icon: LucideIcon;
+  /** Set for a preview entry, which the tile marks with a Beta badge. */
+  preview?: PreviewFeatureKey;
 }
 
 /**
@@ -483,15 +525,28 @@ export function mobileMoreHubDestinations(opts: {
   sharedRecord?: boolean;
   /** Server-resolved scope for the active shared record. */
   sections?: readonly ShareDomain[] | null;
+  /** The person's own preview opt-ins; absent hides every preview. */
+  previews?: PreviewFeatures | null;
 }): MobileMoreHubEntry[] {
-  return visibleNavDestinations(
+  const entries = visibleNavDestinations(
     opts.modules,
     opts.mounted ?? true,
     opts.sharedRecord ?? false,
     opts.sections ?? null,
+    opts.previews ?? null,
   )
     .filter((d) => !BOTTOM_NAV_PRIMARY_SLOT_HREFS.includes(d.href))
-    .map((d) => ({ href: d.href, tKey: d.tKey, icon: d.icon }));
+    .map((d) => ({
+      href: d.href,
+      tKey: d.tKey,
+      icon: d.icon,
+      ...(d.preview ? { preview: d.preview } : {}),
+    }));
+  // A preview someone just switched on leads the hub, where it is found; the
+  // rest keep model order. `Array.prototype.sort` is stable.
+  return entries.sort(
+    (a, b) => Number(b.preview !== undefined) - Number(a.preview !== undefined),
+  );
 }
 
 /**

src/components/layout/sidebar-nav.tsx

@@ -27,11 +27,18 @@ import {
   visibleUtilityDestinations,
 } from "@/components/layout/nav-model";
 import { SHELL_HEADER_BAND } from "@/components/layout/shell-metrics";
+import {
+  RAIL_LIST_GAP,
+  RAIL_SHORT_PY,
+  railRowClass,
+  SidebarNavItem,
+} from "@/components/layout/sidebar-rail";
 import { cn } from "@/lib/utils";
 import { Logo } from "@/components/ui/logo";
 import { useAuth, useLogout } from "@/hooks/use-auth";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useNavModules } from "@/hooks/use-nav-modules";
+import { usePreviewFeatures } from "@/hooks/use-preview-features";
 import { useMounted } from "@/hooks/use-mounted";
 import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
 import { useTheme } from "@/components/providers";
@@ -328,45 +335,6 @@ function SidebarUserSection({ collapsed }: { collapsed: boolean }) {
   );
 }
 
-/**
- * Height-based density for the rail. A 13-inch laptop at 100 % zoom leaves
- * the browser roughly 700–860 px, and the full destination list plus the
- * footer rows did not fit: the list scrolled, and on a classic-scrollbar
- * platform (Windows) the rail grew a native scrollbar with arrow buttons.
- * On short windows the rows close their gaps first, then step their height
- * down; tall windows keep the roomy default. Desktop-only by construction —
- * the rail is hidden below `md`, so the phone layout never sees these steps.
- *
- * Steps (rows are full-width, so the click target is the whole row):
- * - default: 40 px rows, 4 px apart
- * - max-height 940 px: gaps close (40 px pitch), list and user padding tighten
- * - max-height 820 px: 36 px rows
- * - max-height 740 px: 32 px rows — the one step under 40 px, taken only
- *   where the alternative is rows hidden behind a scroll edge
- */
-// Disjoint height ranges, not nested max-heights: two arbitrary media
-// variants on one property cascade in stylesheet order, not by how narrow
-// the query is, so a nested pair let the 36 px step win on a 720 px window.
-// The height steps apply to a mouse only. Under a finger (a touch tablet)
-// the rows keep the 44 px touch floor and the list scrolls behind its fades
-// instead. A phone held sideways never sees the rail: it keeps the phone
-// shell (`shell-mobile`).
-const RAIL_ROW_HEIGHT =
-  "min-h-10 pointer-coarse:min-h-11 [@media(hover:hover)_and_(pointer:fine)_and_(740px<height<=820px)]:min-h-9 [@media(hover:hover)_and_(pointer:fine)_and_(height<=740px)]:min-h-8";
-const RAIL_LIST_GAP = "space-y-1 [@media(max-height:940px)]:space-y-0";
-const RAIL_SHORT_PY = "[@media(max-height:940px)]:py-1.5";
-
-/** Rail row, collapsed (icon only) or expanded (icon + label). */
-function railRowClass(collapsed: boolean): string {
-  return cn(
-    "flex items-center rounded-lg transition-colors",
-    RAIL_ROW_HEIGHT,
-    collapsed
-      ? "justify-center px-2.5"
-      : "gap-3 px-3 py-1.5 text-sm font-medium",
-  );
-}
-
 /** Height of the fade at a scroll edge that has more content beyond it. */
 const RAIL_FADE = "1.5rem";
 
@@ -525,9 +493,17 @@ export function SidebarNav() {
   // The Coach entry follows the `coach` AI capability, like every other
   // Coach entry point; the rest of the map is `modules` unchanged.
   const navModules = useNavModules();
+  const previews = usePreviewFeatures();
   const visibleNavItems = useMemo(
-    () => visibleNavDestinations(navModules, mounted, sharedRecord, sections),
-    [navModules, mounted, sharedRecord, sections],
+    () =>
+      visibleNavDestinations(
+        navModules,
+        mounted,
+        sharedRecord,
+        sections,
+        previews,
+      ),
+    [navModules, mounted, sharedRecord, sections, previews],
   );
   // Collapsed = the user's stored choice, or — with no stored choice — a
   // viewport default: tablet widths (md–lg, e.g. an iPad held upright)
@@ -757,59 +733,21 @@ export function SidebarNav() {
             }}
           >
             <div className={RAIL_LIST_GAP}>
-              {visibleNavItems.map((item) => {
-                const isActive = isNavDestinationActive(
-                  item.href,
-                  pathname,
-                  visibleNavItems,
-                );
-                const label = t(item.tKey);
-
-                if (collapsed) {
-                  return (
-                    <Tooltip key={item.href}>
-                      <TooltipTrigger asChild>
-                        <Link
-                          href={item.href}
-                          aria-current={isActive ? "page" : undefined}
-                          data-tour-id={item.tourId}
-                          {...(item.href === "/medications" ? medsIntent : {})}
-                          className={cn(
-                            railRowClass(true),
-                            isActive
-                              ? "bg-primary/10 text-primary"
-                              : "text-foreground hover:bg-accent",
-                          )}
-                        >
-                          <item.icon className="h-4 w-4" />
-                        </Link>
-                      </TooltipTrigger>
-                      <TooltipContent side="right" sideOffset={8}>
-                        {label}
-                      </TooltipContent>
-                    </Tooltip>
-                  );
-                }
-
-                return (
-                  <Link
-                    key={item.href}
-                    href={item.href}
-                    aria-current={isActive ? "page" : undefined}
-                    data-tour-id={item.tourId}
-                    {...(item.href === "/medications" ? medsIntent : {})}
-                    className={cn(
-                      railRowClass(false),
-                      isActive
-                        ? "bg-primary/10 text-primary"
-                        : "text-foreground hover:bg-accent",
-                    )}
-                  >
-                    <item.icon className="h-4 w-4" />
-                    {label}
-                  </Link>
-                );
-              })}
+              {visibleNavItems.map((item) => (
+                <SidebarNavItem
+                  key={item.href}
+                  item={item}
+                  label={t(item.tKey)}
+                  badge={item.preview ? t("nav.previewBadge") : null}
+                  active={isNavDestinationActive(
+                    item.href,
+                    pathname,
+                    visibleNavItems,
+                  )}
+                  collapsed={collapsed}
+                  intent={item.href === "/medications" ? medsIntent : undefined}
+                />
+              ))}
             </div>
           </nav>
 

src/components/layout/sidebar-rail.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+/**
+ * The rail's rows: the height steps every row shares and one destination
+ * row, collapsed or expanded. Split from `sidebar-nav.tsx`, which keeps the
+ * shell, the footer and the user menu.
+ */
+import Link from "next/link";
+
+import type { NavDestination } from "@/components/layout/nav-model";
+import { PreviewBadge } from "@/components/topics/preview-badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { medicationsPrefetchIntentProps } from "@/lib/queries/prefetch-medications";
+import { cn } from "@/lib/utils";
+
+/**
+ * Height-based density for the rail. A 13-inch laptop at 100 % zoom leaves
+ * the browser roughly 700–860 px, and the full destination list plus the
+ * footer rows did not fit: the list scrolled, and on a classic-scrollbar
+ * platform (Windows) the rail grew a native scrollbar with arrow buttons.
+ * On short windows the rows close their gaps first, then step their height
+ * down; tall windows keep the roomy default. Desktop-only by construction —
+ * the rail is hidden below `md`, so the phone layout never sees these steps.
+ *
+ * Steps (rows are full-width, so the click target is the whole row):
+ * - default: 40 px rows, 4 px apart
+ * - max-height 940 px: gaps close (40 px pitch), list and user padding tighten
+ * - max-height 820 px: 36 px rows
+ * - max-height 740 px: 32 px rows — the one step under 40 px, taken only
+ *   where the alternative is rows hidden behind a scroll edge
+ */
+// Disjoint height ranges, not nested max-heights: two arbitrary media
+// variants on one property cascade in stylesheet order, not by how narrow
+// the query is, so a nested pair let the 36 px step win on a 720 px window.
+// The height steps apply to a mouse only. Under a finger (a touch tablet)
+// the rows keep the 44 px touch floor and the list scrolls behind its fades
+// instead. A phone held sideways never sees the rail: it keeps the phone
+// shell (`shell-mobile`).
+const RAIL_ROW_HEIGHT =
+  "min-h-10 pointer-coarse:min-h-11 [@media(hover:hover)_and_(pointer:fine)_and_(740px<height<=820px)]:min-h-9 [@media(hover:hover)_and_(pointer:fine)_and_(height<=740px)]:min-h-8";
+export const RAIL_LIST_GAP = "space-y-1 [@media(max-height:940px)]:space-y-0";
+export const RAIL_SHORT_PY = "[@media(max-height:940px)]:py-1.5";
+
+/** Rail row, collapsed (icon only) or expanded (icon + label). */
+export function railRowClass(collapsed: boolean): string {
+  return cn(
+    "flex items-center rounded-lg transition-colors",
+    RAIL_ROW_HEIGHT,
+    collapsed
+      ? "justify-center px-2.5"
+      : "gap-3 px-3 py-1.5 text-sm font-medium",
+  );
+}
+
+/** One destination in the rail: an icon row when collapsed, icon and label when expanded. */
+export function SidebarNavItem({
+  item,
+  label,
+  badge,
+  active,
+  collapsed,
+  intent,
+}: {
+  item: NavDestination;
+  label: string;
+  /** The Beta mark of a preview entry, or null. */
+  badge: string | null;
+  active: boolean;
+  collapsed: boolean;
+  /** The medications prefetch handlers, on that one row. */
+  intent?: ReturnType<typeof medicationsPrefetchIntentProps>;
+}) {
+  const className = cn(
+    railRowClass(collapsed),
+    active ? "bg-primary/10 text-primary" : "text-foreground hover:bg-accent",
+  );
+  if (collapsed) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Link
+            href={item.href}
+            aria-current={active ? "page" : undefined}
+            data-tour-id={item.tourId}
+            {...intent}
+            className={className}
+          >
+            <item.icon className="h-4 w-4" />
+          </Link>
+        </TooltipTrigger>
+        <TooltipContent side="right" sideOffset={8}>
+          {label}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+  return (
+    <Link
+      href={item.href}
+      aria-current={active ? "page" : undefined}
+      data-tour-id={item.tourId}
+      {...intent}
+      className={className}
+    >
+      <item.icon className="h-4 w-4" />
+      {label}
+      {badge ? <PreviewBadge label={badge} className="ml-auto" /> : null}
+    </Link>
+  );
+}

src/components/settings/__tests__/preview-section.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { I18nProvider } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+import { PreviewSection } from "../preview-section";
+import { primeLocales } from "@/__tests__/helpers/prime-locales";
+
+primeLocales("de");
+
+function render(topics: boolean | undefined, locale: "en" | "de" = "en") {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, refetchOnMount: false } },
+  });
+  if (topics !== undefined) {
+    client.setQueryData(queryKeys.previewFeatures(), { topics });
+  }
+  return renderToStaticMarkup(
+    <I18nProvider initialLocale={locale}>
+      <QueryClientProvider client={client}>
+        <PreviewSection />
+      </QueryClientProvider>
+    </I18nProvider>,
+  );
+}
+
+const switchState = (html: string, state: "true" | "false") =>
+  new RegExp(
+    `data-slot="settings-preview-topics-switch"[^>]*aria-checked="${state}"|aria-checked="${state}"[^>]*data-slot="settings-preview-topics-switch"`,
+  ).test(html);
+
+describe("<PreviewSection>", () => {
+  it("shows the Topics switch off by default, saved on change", () => {
+    const html = render(false);
+    expect(switchState(html, "false")).toBe(true);
+    expect(html).toContain("Topics");
+    expect(html).toContain('data-slot="preview-badge"');
+    // A switch, no Save: one save model per card.
+    expect(html).not.toContain('type="submit"');
+    // Nothing to open while it is off.
+    expect(html).not.toContain('data-slot="settings-preview-topics-open"');
+  });
+
+  it("reads on once the person switched it on and offers the way in", () => {
+    const html = render(true);
+    expect(switchState(html, "true")).toBe(true);
+    expect(html).toMatch(
+      /data-slot="settings-preview-topics-open"[^>]*href="\/topics"|href="\/topics"[^>]*data-slot="settings-preview-topics-open"/,
+    );
+  });
+
+  it("names the switch by its visible title and leaks no raw key", () => {
+    const html = render(false, "de");
+    expect(html).toContain('aria-labelledby="settings-preview-topics-title"');
+    expect(html).toContain("Themen");
+    expect(html).not.toContain("settings.preview.");
+    expect(html).not.toContain("nav.previewBadge");
+  });
+});

src/components/settings/__tests__/settings-shell.test.tsx

@@ -170,19 +170,12 @@ describe("SETTINGS_SECTION_SLUGS", () => {
       // v1.23 — "Data & Privacy" assembles the export / deletion / retention /
       // encryption / session / activity pieces into one pane, after `advanced`.
       "privacy",
+      // Per-user preview opt-ins, in the System group before About.
+      "preview",
       "about",
     ]);
   });
 
-  it("lists no Preview features page until the topic pages ship", () => {
-    // The stored flag and its API stay; the page and its nav entry return
-    // with the first preview the switch actually turns on.
-    expect(isSettingsSectionSlug("preview")).toBe(false);
-    expect(SETTINGS_SECTIONS.some((s) => s.slug === ("preview" as never))).toBe(
-      false,
-    );
-  });
-
   it("`isSettingsSectionSlug` accepts known slugs and rejects others", () => {
     for (const slug of SETTINGS_SECTION_SLUGS) {
       expect(isSettingsSectionSlug(slug)).toBe(true);
@@ -249,6 +242,7 @@ describe("<SettingsShell>", () => {
       gesundheitsakte: "data",
       privacy: "data",
       advanced: "data",
+      preview: "system",
       about: "system",
     });
     // Every routable section has a nav entry, and nothing else does.

src/components/settings/preview-section.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+/**
+ * Settings > System > Preview features.
+ *
+ * One switch per preview feature, each off until the person turns it on, each
+ * saved the moment it changes (`PATCH /api/settings/preview-features`). A
+ * preview adds something beside what is there and never replaces a page.
+ *
+ * The switch is the person's own and stays theirs while they act on somebody
+ * else's record. Saving refreshes the account payload too, because the
+ * navigation reads the flag from there: the Topics entry appears or goes the
+ * moment the switch moves.
+ */
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { Layers } from "lucide-react";
+
+import { toastWrittenOutcome } from "@/components/outcome/outcome-toast";
+import { SettingsCard } from "@/components/settings/settings-card";
+import { SettingsCardHeader } from "@/components/settings/_card-header";
+import { PreviewBadge } from "@/components/topics/preview-badge";
+import { InlineAction } from "@/components/ui/inline-action";
+import { QueryErrorRow } from "@/components/ui/query-error-row";
+import { Switch } from "@/components/ui/switch";
+import { apiGet, apiPatch } from "@/lib/api/api-fetch";
+import { showErrorToast } from "@/lib/errors/error-toast";
+import { useTranslations } from "@/lib/i18n/context";
+import { queryKeys } from "@/lib/query-keys";
+import {
+  DEFAULT_PREVIEW_FEATURES,
+  type PreviewFeatures,
+} from "@/lib/settings/preview-features";
+
+export function PreviewSection() {
+  const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const key = queryKeys.previewFeatures();
+
+  const query = useQuery({
+    queryKey: key,
+    queryFn: () => apiGet<PreviewFeatures>("/api/settings/preview-features"),
+  });
+  const features = query.data ?? DEFAULT_PREVIEW_FEATURES;
+
+  const toggle = useMutation({
+    mutationKey: key,
+    mutationFn: (topics: boolean) =>
+      apiPatch<PreviewFeatures>("/api/settings/preview-features", { topics }),
+    onMutate: async (topics) => {
+      await queryClient.cancelQueries({ queryKey: key });
+      const previous = queryClient.getQueryData<PreviewFeatures>(key);
+      queryClient.setQueryData<PreviewFeatures>(key, {
+        ...(previous ?? DEFAULT_PREVIEW_FEATURES),
+        topics,
+      });
+      return { previous };
+    },
+    onSuccess: (saved, topics) => {
+      if (saved) queryClient.setQueryData(key, saved);
+      void queryClient.invalidateQueries({ queryKey: queryKeys.authMe() });
+      toastWrittenOutcome(
+        "success",
+        topics
+          ? t("settings.preview.topics.savedOn")
+          : t("settings.preview.topics.savedOff"),
+      );
+    },
+    onError: (failure, _topics, context) => {
+      queryClient.setQueryData(key, context?.previous);
+      showErrorToast(t("settings.savingError"), { cause: failure });
+    },
+  });
+
+  return (
+    <SettingsCard data-slot="settings-preview-topics">
+      <SettingsCardHeader
+        anchor="preview-topics"
+        icon={Layers}
+        title={t("settings.preview.topics.title")}
+        titleId="settings-preview-topics-title"
+        titleAccessory={<PreviewBadge label={t("nav.previewBadge")} />}
+        description={t("settings.preview.topics.description")}
+        status={
+          <Switch
+            data-slot="settings-preview-topics-switch"
+            checked={features.topics}
+            disabled={query.isLoading || toggle.isPending}
+            onCheckedChange={(next) => toggle.mutate(next)}
+            aria-labelledby="settings-preview-topics-title"
+          />
+        }
+      />
+      {query.isError ? (
+        <QueryErrorRow
+          inset
+          error={query.error}
+          slot="settings-preview-error"
+          message={t("settings.preview.loadError")}
+          onRetry={() => void query.refetch()}
+        />
+      ) : null}
+      <p className="text-sm">{t("settings.preview.topics.detail")}</p>
+      {features.topics ? (
+        <p className="text-sm">
+          <InlineAction asChild tone="primary" size="sm">
+            <Link href="/topics" data-slot="settings-preview-topics-open">
+              {t("settings.preview.topics.open")}
+            </Link>
+          </InlineAction>
+        </p>
+      ) : null}
+    </SettingsCard>
+  );
+}

src/components/settings/settings-section-loader.tsx

@@ -124,6 +124,10 @@ const LOADERS: Record<
     import("@/components/settings/privacy-section").then(
       (m) => m.PrivacySection,
     ),
+  preview: () =>
+    import("@/components/settings/preview-section").then(
+      (m) => m.PreviewSection,
+    ),
 };
 
 const SECTIONS: Record<SettingsSectionSlug, ComponentType<SectionProps>> = {
@@ -158,6 +162,7 @@ const SECTIONS: Record<SettingsSectionSlug, ComponentType<SectionProps>> = {
   export: dynamic(LOADERS.export, { loading: () => <SectionLoading /> }),
   advanced: dynamic(LOADERS.advanced, { loading: () => <SectionLoading /> }),
   privacy: dynamic(LOADERS.privacy, { loading: () => <SectionLoading /> }),
+  preview: dynamic(LOADERS.preview, { loading: () => <SectionLoading /> }),
 };
 
 /**

src/components/settings/settings-shell.tsx

@@ -26,6 +26,7 @@ import {
   CloudSun,
   Download,
   FileHeart,
+  FlaskConical,
   Gauge,
   Info,
   KeyRound,
@@ -274,6 +275,12 @@ export const SETTINGS_SECTIONS: readonly SettingsSection[] = [
     group: "data",
   },
   // ── System ──
+  {
+    slug: "preview",
+    titleKey: "settings.sections.preview.title",
+    icon: FlaskConical,
+    group: "system",
+  },
   {
     slug: "about",
     titleKey: "settings.sections.about.title",

src/components/topics/__tests__/topic-messages.test.ts

@@ -0,0 +1,62 @@
+/**
+ * The topic pages build several message keys at run time (one per topic,
+ * range, state, tone, verdict). The call-site coverage guard sees literal keys
+ * only, so this holds every built key against every locale.
+ */
+import { describe, expect, it } from "vitest";
+
+import { locales } from "@/lib/i18n/config";
+import { TOPIC_KEYS, TOPIC_RANGES } from "@/lib/topics/registry";
+
+import {
+  topicDescriptionKey,
+  topicSourcesKey,
+  topicTitleKey,
+} from "../topic-meta";
+
+function resolve(bundle: unknown, key: string): unknown {
+  return key
+    .split(".")
+    .reduce<unknown>(
+      (node, part) =>
+        node && typeof node === "object"
+          ? (node as Record<string, unknown>)[part]
+          : undefined,
+      bundle,
+    );
+}
+
+const BUILT_KEYS = [
+  ...TOPIC_KEYS.flatMap((key) => [
+    topicTitleKey(key),
+    topicDescriptionKey(key),
+    topicSourcesKey(key),
+  ]),
+  ...TOPIC_RANGES.map((range) => `topics.range.${range}`),
+  ...["within", "above", "below", "learning"].map((s) => `topics.state.${s}`),
+  ...["steady", "watch", "learning"].map((s) => `topics.tone.${s}`),
+  ...["improved", "worsened", "within_threshold"].map(
+    (v) => `topics.screeners.${v}`,
+  ),
+  ...["above", "below"].map((s) => `topics.labs.${s}`),
+  ...["SameDay", "NextDay"].flatMap((lag) =>
+    ["Higher", "Lower"].map(
+      (dir) => `topics.relationships.correlation${lag}${dir}`,
+    ),
+  ),
+];
+
+describe("topic message keys", () => {
+  it.each(locales)("every built key resolves to text in %s", async (locale) => {
+    const bundle = (await import(`../../../../messages/${locale}.json`))
+      .default;
+    const missing = BUILT_KEYS.filter(
+      (key) => typeof resolve(bundle, key) !== "string",
+    );
+    expect(missing).toEqual([]);
+  });
+
+  it("checks a non-empty set", () => {
+    expect(BUILT_KEYS.length).toBeGreaterThan(40);
+  });
+});

src/components/topics/__tests__/topic-tile.test.tsx

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+import { I18nProvider } from "@/lib/i18n/context";
+import type { TopicOverviewEntry } from "@/lib/topics/build";
+import { primeLocales } from "@/__tests__/helpers/prime-locales";
+
+import { TopicTile } from "../topic-tile";
+
+primeLocales("de");
+
+function render(entry: TopicOverviewEntry, locale: "en" | "de" = "en") {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false, enabled: false } },
+  });
+  return renderToStaticMarkup(
+    <I18nProvider initialLocale={locale}>
+      <QueryClientProvider client={client}>
+        <TopicTile entry={entry} />
+      </QueryClientProvider>
+    </I18nProvider>,
+  );
+}
+
+const heart: TopicOverviewEntry = {
+  key: "heart",
+  headline: {
+    kind: "signal",
+    key: "RESTING_HEART_RATE",
+    value: 59,
+    day: "2026-10-22",
+  },
+  summary: {
+    code: "outside",
+    signal: "RESTING_HEART_RATE",
+    direction: "above",
+    count: null,
+    total: null,
+  },
+  tone: "watch",
+  sparkline: [58, 59, 61],
+  recorded: 2,
+  total: 4,
+};
+
+describe("<TopicTile>", () => {
+  it("links the visible title to the topic and words the server's sentence", () => {
+    const html = render(heart);
+    expect(html).toMatch(
+      /href="\/topics\/heart"[^>]*data-slot="topic-tile-link"[^>]*>Heart<|data-slot="topic-tile-link"[^>]*href="\/topics\/heart"[^>]*>Heart</,
+    );
+    expect(html).toContain('data-code="outside"');
+    expect(html).toContain("above your usual range");
+    expect(html).toContain('data-tone="watch"');
+    expect(html).toContain("2 of 4");
+    expect(html).toMatch(/>59(\.0)?</);
+  });
+
+  it("speaks German and leaks no raw key", () => {
+    const html = render(heart, "de");
+    expect(html).toContain(">Herz<");
+    expect(html).toContain("über deinem üblichen Bereich");
+    expect(html).not.toMatch(/topics\.[a-z]/);
+  });
+
+  it("says a block headline in words, without a sparkline", () => {
+    const html = render({
+      ...heart,
+      key: "metabolism",
+      headline: { kind: "labs", inRange: 11, total: 12 },
+      summary: {
+        code: "labs",
+        signal: null,
+        direction: null,
+        count: 11,
+        total: 12,
+      },
+      tone: "watch",
+      sparkline: [],
+    });
+    expect(html).toContain("11/12");
+    expect(html).toContain("11 of 12 lab values");
+  });
+});

src/components/topics/preview-badge.tsx

@@ -0,0 +1,29 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+/**
+ * The "Beta" mark beside a preview: the nav entry, the More tile, the page
+ * title and the Settings switch. A status, so a `Badge`, in the one accent a
+ * preview carries. Its text is part of the accessible name of whatever it
+ * sits in, which is what a visible label should be.
+ */
+export function PreviewBadge({
+  label,
+  className,
+}: {
+  label: string;
+  className?: string;
+}) {
+  return (
+    <Badge
+      variant="outline"
+      data-slot="preview-badge"
+      className={cn(
+        "border-primary/40 text-primary text-2xs px-1.5 py-0 tracking-wide uppercase",
+        className,
+      )}
+    >
+      {label}
+    </Badge>
+  );
+}

src/components/topics/preview-note.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { FlaskConical } from "lucide-react";
+
+import { useTranslations } from "@/lib/i18n/context";
+
+/**
+ * The line every topic page ends on: this is a preview, it may change, and
+ * the single-metric pages are untouched. Neutral, with no link out.
+ */
+export function PreviewNote() {
+  const { t } = useTranslations();
+  return (
+    <p
+      className="text-muted-foreground flex items-start gap-2 text-xs"
+      data-slot="topics-preview-note"
+    >
+      <FlaskConical className="mt-px size-3.5 shrink-0" aria-hidden="true" />
+      <span>{t("topics.previewNote")}</span>
+    </p>
+  );
+}

src/components/topics/topic-blocks.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import Link from "next/link";
+import { Brain, Droplets } from "lucide-react";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { InlineAction } from "@/components/ui/inline-action";
+import { ScorePill } from "@/components/ui/score-pill";
+import { TileHeader } from "@/components/insights/tile-header";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { AssessmentTrend } from "@/lib/mental-health/assessment-trend";
+import type { TopicCycleSummary } from "@/lib/topics/read";
+
+import { INSTRUMENT_LABEL, TOPIC_EXTRA_HREF } from "./topic-meta";
+
+const VERDICT_TONE = {
+  improved: "success",
+  worsened: "warning",
+  within_threshold: "neutral",
+} as const;
+
+/**
+ * The mind topic's screener block: each instrument's latest total and how it
+ * moved since the first check-in, measured against the change studies treat
+ * as meaningful (the check-in page's own trend).
+ */
+export function TopicScreenersCard({
+  screeners,
+}: {
+  screeners: AssessmentTrend[];
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  return (
+    <Card data-slot="topic-screeners">
+      <CardHeader>
+        <TileHeader
+          icon={Brain}
+          titleAs="h2"
+          title={t("topics.screeners.title")}
+        />
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        {screeners.length === 0 ? (
+          <p className="text-sm" data-slot="topic-screeners-none">
+            {t("topics.screeners.none")}
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-3">
+            {screeners.map((trend) => (
+              <li
+                key={trend.instrument}
+                className="flex flex-wrap items-center justify-between gap-2"
+                data-slot="topic-screener"
+                data-instrument={trend.instrument}
+              >
+                <div className="min-w-0">
+                  <p className="text-sm font-medium">
+                    {INSTRUMENT_LABEL[trend.instrument] ?? trend.instrument}{" "}
+                    <span className="tabular-nums">
+                      {fmt.number(trend.latest.score, 0)}
+                    </span>
+                  </p>
+                  <p className="text-muted-foreground text-xs">
+                    {t("topics.screeners.checkIns", { count: trend.n })}
+                  </p>
+                </div>
+                {trend.sinceFirst ? (
+                  <ScorePill tone={VERDICT_TONE[trend.sinceFirst]}>
+                    {t(`topics.screeners.${trend.sinceFirst}`)}
+                  </ScorePill>
+                ) : (
+                  <span className="text-muted-foreground text-xs">
+                    {t("topics.screeners.single")}
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+        <InlineAction asChild tone="primary" size="xs">
+          <Link href={TOPIC_EXTRA_HREF.screeners} className="self-start">
+            {t("topics.screeners.open")}
+          </Link>
+        </InlineAction>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * The cycle topic's block: today's cycle day and phase as the cycle page
+ * decides them, and the lengths of the completed cycles on record.
+ */
+export function TopicCycleCard({ cycle }: { cycle: TopicCycleSummary }) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  return (
+    <Card data-slot="topic-cycle">
+      <CardHeader>
+        <TileHeader
+          icon={Droplets}
+          titleAs="h2"
+          title={t("topics.cycle.title")}
+        />
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        {cycle.today ? (
+          <p className="text-sm font-medium">
+            {cycle.today.phase
+              ? t("topics.cycle.todayWithPhase", {
+                  day: cycle.today.dayOfCycle,
+                  phase: t(`cycle.phase.${cycle.today.phase}`),
+                })
+              : t("topics.cycle.today", { day: cycle.today.dayOfCycle })}
+          </p>
+        ) : null}
+        {cycle.averageLength !== null ? (
+          <p className="text-sm">
+            {t("topics.cycle.average", {
+              days: fmt.number(cycle.averageLength, 1),
+              count: cycle.lengths.length,
+            })}
+          </p>
+        ) : (
+          <p className="text-sm" data-slot="topic-cycle-needs">
+            {t("topics.cycle.needs", { count: cycle.periodsLogged })}
+          </p>
+        )}
+        {cycle.lengths.length > 0 ? (
+          <p className="text-muted-foreground text-xs tabular-nums">
+            {t("topics.cycle.lengths", {
+              lengths: cycle.lengths.map((l) => fmt.integer(l)).join(", "),
+            })}
+          </p>
+        ) : null}
+        <InlineAction asChild tone="primary" size="xs">
+          <Link href={TOPIC_EXTRA_HREF.cycle} className="self-start">
+            {t("topics.cycle.open")}
+          </Link>
+        </InlineAction>
+      </CardContent>
+    </Card>
+  );
+}

src/components/topics/topic-detail.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+
+import { TrainingLoadCard } from "@/components/workouts/training-load-card";
+import { PageHeader } from "@/components/ui/page-header";
+import { QueryErrorCard } from "@/components/ui/query-error-card";
+import { Segmented } from "@/components/ui/segmented";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTranslations } from "@/lib/i18n/context";
+import {
+  DEFAULT_TOPIC_RANGE,
+  TOPIC_RANGES,
+  type TopicKey,
+  type TopicRange,
+} from "@/lib/topics/registry";
+
+import { PreviewBadge } from "./preview-badge";
+import { PreviewNote } from "./preview-note";
+import { TopicCycleCard, TopicScreenersCard } from "./topic-blocks";
+import { TopicLabsCard } from "./topic-labs-card";
+import { TopicLinksCard, TopicMissingCard } from "./topic-links-card";
+import { topicDescriptionKey, topicTitleKey } from "./topic-meta";
+import { TopicRelationshipsCard } from "./topic-relationships-card";
+import { TopicSideBySideCard } from "./topic-side-by-side-card";
+import { TopicTodayCard } from "./topic-today-card";
+import { TopicTrendsCard } from "./topic-trends-card";
+import { useTopicDetail } from "./use-topics";
+
+function DetailSkeleton() {
+  return (
+    <div className="space-y-6" aria-hidden="true">
+      <Skeleton className="h-40 rounded-xl" />
+      <Skeleton className="h-80 rounded-xl" />
+      <div className="grid gap-4 md:grid-cols-2">
+        <Skeleton className="h-64 rounded-xl" />
+        <Skeleton className="h-64 rounded-xl" />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * `/topics/<topic>`: the topic's signals today, side by side over a chosen
+ * window, how they move together, their trends, the topic's blocks, the
+ * single-metric pages behind it and what it holds nothing for yet.
+ */
+export function TopicDetailView({ topic }: { topic: TopicKey }) {
+  const { t } = useTranslations();
+  const [range, setRange] = useState<TopicRange>(DEFAULT_TOPIC_RANGE);
+  const query = useTopicDetail(topic, range, true);
+  const detail = query.data?.key === topic ? query.data : undefined;
+
+  return (
+    <div className="space-y-6" data-slot="topic-detail" data-topic={topic}>
+      <PageHeader
+        title={t(topicTitleKey(topic))}
+        titleAccessory={<PreviewBadge label={t("nav.previewBadge")} />}
+        description={t(topicDescriptionKey(topic))}
+        backLink={{
+          href: "/topics",
+          label: t("topics.detail.back"),
+          dataSlot: "topic-back",
+        }}
+      />
+      <Segmented
+        options={TOPIC_RANGES.map((value) => ({
+          value,
+          label: t(`topics.range.${value}`),
+        }))}
+        value={range}
+        onChange={setRange}
+        label={t("topics.range.label")}
+        slot="topic-range"
+        size="sm"
+      />
+
+      {query.isError ? (
+        <QueryErrorCard
+          error={query.error}
+          title={t("topics.loadError")}
+          onRetry={() => void query.refetch()}
+        />
+      ) : !detail ? (
+        <DetailSkeleton />
+      ) : (
+        <div
+          className="space-y-6"
+          data-slot="topic-detail-body"
+          data-status={detail.status}
+        >
+          <TopicTodayCard detail={detail} />
+          <TopicSideBySideCard detail={detail} />
+          {detail.relationships.length > 0 ||
+          detail.trends.length > 0 ||
+          detail.training?.status === "ok" ? (
+            <div className="grid items-start gap-4 md:grid-cols-2">
+              <TopicRelationshipsCard relationships={detail.relationships} />
+              <div className="flex flex-col gap-4">
+                <TopicTrendsCard trends={detail.trends} />
+                <TrainingLoadCard trainingLoad={detail.training ?? undefined} />
+              </div>
+            </div>
+          ) : null}
+          {detail.labs ? <TopicLabsCard labs={detail.labs} /> : null}
+          {detail.screeners ? (
+            <TopicScreenersCard screeners={detail.screeners} />
+          ) : null}
+          {detail.cycle ? <TopicCycleCard cycle={detail.cycle} /> : null}
+          <div className="grid items-start gap-4 md:grid-cols-2">
+            <TopicLinksCard detail={detail} />
+            <TopicMissingCard detail={detail} />
+          </div>
+        </div>
+      )}
+      <PreviewNote />
+    </div>
+  );
+}

src/components/topics/topic-labs-card.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import Link from "next/link";
+import { FlaskConical, TrendingUp } from "lucide-react";
+
+import { labTrendLines } from "@/components/labs/lab-trend-lines";
+import { useLabNumber } from "@/components/labs/use-lab-format";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { ScorePill } from "@/components/ui/score-pill";
+import { TileHeader } from "@/components/insights/tile-header";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import { formatReferenceRange } from "@/lib/labs/reference-range";
+import type { TopicLabMarker, TopicLabPanel } from "@/lib/topics/labs";
+
+function MarkerTile({ marker }: { marker: TopicLabMarker }) {
+  const { t } = useTranslations();
+  const labNumber = useLabNumber();
+  const range = formatReferenceRange(marker.low, marker.high, (v) =>
+    labNumber(v),
+  );
+  const outside = marker.status === "above" || marker.status === "below";
+  return (
+    <Link
+      href={`/labs/${marker.biomarkerId}`}
+      data-slot="topic-lab-marker"
+      data-status={marker.status}
+      className="border-border hover:bg-accent/40 focus-visible:ring-ring/50 flex min-w-0 flex-col gap-1 rounded-lg border p-3 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+    >
+      <span className="text-foreground truncate text-xs font-medium">
+        {marker.name}
+      </span>
+      <span className="flex items-baseline gap-1">
+        <span className="text-lg font-semibold tabular-nums">
+          {labNumber(marker.latest)}
+        </span>
+        <span className="text-muted-foreground text-xs">{marker.unit}</span>
+      </span>
+      {range ? (
+        <span className="text-muted-foreground text-xs">{range}</span>
+      ) : null}
+      {outside ? (
+        <ScorePill tone="warning" className="self-start">
+          {t(`topics.labs.${marker.status}`)}
+        </ScorePill>
+      ) : null}
+    </Link>
+  );
+}
+
+/**
+ * The metabolism topic's lab block: each marker's newest reading against the
+ * window it is judged by, then what the markers' trend lines say. A trend
+ * needs three readings spanning a year; markers short of that are named in
+ * one sentence instead of being given a line.
+ */
+export function TopicLabsCard({ labs }: { labs: TopicLabPanel }) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const trending = labs.markers.filter((m) => m.trend.status === "ok");
+  const short = labs.markers.filter((m) => m.trend.status !== "ok");
+
+  return (
+    <Card data-slot="topic-labs">
+      <CardHeader>
+        <TileHeader
+          icon={FlaskConical}
+          titleAs="h2"
+          title={t("topics.labs.title")}
+          right={
+            labs.latestOn ? (
+              <span className="text-muted-foreground text-xs">
+                {fmt.dateShortSmartCalendar(labs.latestOn)}
+              </span>
+            ) : null
+          }
+        />
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
+          {labs.markers.map((marker) => (
+            <MarkerTile key={marker.biomarkerId} marker={marker} />
+          ))}
+        </div>
+        <section
+          className="flex flex-col gap-2"
+          aria-labelledby="topic-lab-trends-heading"
+        >
+          <h3
+            id="topic-lab-trends-heading"
+            className="text-foreground flex items-center gap-2 text-sm font-semibold"
+          >
+            <TrendingUp className="size-4" aria-hidden="true" />
+            {t("topics.labs.trendsTitle")}
+          </h3>
+          {trending.map((marker) => {
+            if (marker.trend.status !== "ok") return null;
+            const lines = labTrendLines(marker.trend, marker.unit, t, fmt);
+            return (
+              <div
+                key={marker.biomarkerId}
+                data-slot="topic-lab-trend"
+                data-projection={marker.trend.projection}
+              >
+                <p className="text-sm font-medium">{marker.name}</p>
+                <p className="text-sm">{lines.slope}</p>
+                {lines.projection ? (
+                  <p className="text-sm">{lines.projection}</p>
+                ) : null}
+              </div>
+            );
+          })}
+          {short.length > 0 ? (
+            <p
+              className="text-muted-foreground text-xs"
+              data-slot="topic-lab-trend-short"
+            >
+              {t("topics.labs.trendNeeds", {
+                markers: short.map((m) => m.name).join(", "),
+              })}
+            </p>
+          ) : null}
+        </section>
+      </CardContent>
+    </Card>
+  );
+}

src/components/topics/topic-links-card.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronRight, Info, Lightbulb } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import { useTranslations } from "@/lib/i18n/context";
+import type { TopicDetail } from "@/lib/topics/build";
+
+import { TOPIC_EXTRA_HREF, topicSourcesKey } from "./topic-meta";
+import { useSignalFormat } from "./use-signal-format";
+
+interface PageLink {
+  href: string;
+  label: string;
+  value: string | null;
+}
+
+/**
+ * The single-metric pages behind the topic, unchanged and one tap away: a
+ * topic is an overview, never a replacement for any of them.
+ */
+export function TopicLinksCard({ detail }: { detail: TopicDetail }) {
+  const { t } = useTranslations();
+  const format = useSignalFormat();
+  const links: PageLink[] = [];
+  const seen = new Set<string>();
+  const add = (link: PageLink) => {
+    if (seen.has(link.href)) return;
+    seen.add(link.href);
+    links.push(link);
+  };
+  for (const signal of detail.signals) {
+    if (!signal.href || !signal.latest) continue;
+    add({
+      href: signal.href,
+      label: format.label(signal.key),
+      value: format.value(signal.key, signal.latest.value),
+    });
+  }
+  if (detail.labs) {
+    add({ href: TOPIC_EXTRA_HREF.labs, label: t("nav.labs"), value: null });
+  }
+  if (detail.training?.status === "ok") {
+    add({
+      href: TOPIC_EXTRA_HREF.training,
+      label: t("topics.links.workouts"),
+      value: null,
+    });
+  }
+  if (links.length === 0) return null;
+
+  return (
+    <Card data-slot="topic-links">
+      <CardHeader>
+        <TileHeader
+          icon={Lightbulb}
+          titleAs="h2"
+          title={t("topics.links.title")}
+        />
+      </CardHeader>
+      <CardContent>
+        <ul className="divide-border flex flex-col divide-y">
+          {links.map((link) => (
+            <li key={link.href}>
+              <Link
+                href={link.href}
+                data-slot="topic-link"
+                className="hover:bg-accent/40 focus-visible:ring-ring/50 flex min-h-11 items-center gap-3 rounded-md py-2 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              >
+                <span className="min-w-0 flex-1 text-sm font-medium">
+                  {link.label}
+                </span>
+                {link.value ? (
+                  <span className="text-muted-foreground text-xs tabular-nums">
+                    {link.value}
+                  </span>
+                ) : null}
+                <ChevronRight
+                  className="text-muted-foreground size-4 shrink-0"
+                  aria-hidden="true"
+                />
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * What the topic could show but holds nothing for yet, and where such values
+ * come from. Never a zero, never an empty chart.
+ */
+export function TopicMissingCard({ detail }: { detail: TopicDetail }) {
+  const { t } = useTranslations();
+  const format = useSignalFormat();
+  const { inSharedRecord } = useRecordCapabilities();
+  if (detail.missing.length === 0) return null;
+  return (
+    <Card
+      data-slot="topic-missing"
+      className="border-dashed shadow-none"
+      density="compact"
+    >
+      <CardContent className="flex flex-col gap-2">
+        <p className="flex items-start gap-2 text-sm font-medium">
+          <Info className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+          <span>
+            {t("topics.missing.title", {
+              signals: detail.missing.map((k) => format.label(k)).join(", "),
+            })}
+          </span>
+        </p>
+        <p className="text-muted-foreground text-xs">
+          {t(topicSourcesKey(detail.key))}
+        </p>
+        {inSharedRecord ? null : (
+          <Button asChild variant="outline" size="sm" className="self-start">
+            <Link href="/settings/integrations">
+              {t("topics.missing.connect")}
+            </Link>
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/components/topics/topic-meta.ts

@@ -0,0 +1,74 @@
+/**
+ * Client-side presentation of the topics: the glyph per topic, the message
+ * keys of its name and description, and where each extra block's own page
+ * lives. Kept apart from the server registry so the browser bundle carries
+ * no read code; the keys themselves come from `@/lib/topics/registry`.
+ */
+import {
+  Activity,
+  Brain,
+  Droplets,
+  FlaskConical,
+  Gauge,
+  Heart,
+  Moon,
+  Scale,
+  type LucideIcon,
+} from "lucide-react";
+
+import type { TopicExtra, TopicKey } from "@/lib/topics/registry";
+
+export const TOPIC_ICONS: Readonly<Record<TopicKey, LucideIcon>> = {
+  heart: Heart,
+  body: Scale,
+  "blood-pressure": Gauge,
+  sleep: Moon,
+  activity: Activity,
+  metabolism: FlaskConical,
+  mind: Brain,
+  cycle: Droplets,
+};
+
+/** Message-key segment per topic (`topics.names.<id>.title`). */
+export const TOPIC_MESSAGE_ID: Readonly<Record<TopicKey, string>> = {
+  heart: "heart",
+  body: "body",
+  "blood-pressure": "bloodPressure",
+  sleep: "sleep",
+  activity: "activity",
+  metabolism: "metabolism",
+  mind: "mind",
+  cycle: "cycle",
+};
+
+export function topicTitleKey(key: TopicKey): string {
+  return `topics.names.${TOPIC_MESSAGE_ID[key]}.title`;
+}
+
+export function topicDescriptionKey(key: TopicKey): string {
+  return `topics.names.${TOPIC_MESSAGE_ID[key]}.description`;
+}
+
+/** Where to record what an empty topic is missing (`topics.empty.<id>`). */
+export function topicSourcesKey(key: TopicKey): string {
+  return `topics.sources.${TOPIC_MESSAGE_ID[key]}`;
+}
+
+/** The page each extra block opens. */
+export const TOPIC_EXTRA_HREF: Readonly<Record<TopicExtra, string>> = {
+  training: "/insights/workouts",
+  labs: "/labs",
+  screeners: "/mental-wellbeing",
+  cycle: "/cycle",
+};
+
+export function topicHref(key: TopicKey): string {
+  return `/topics/${key}`;
+}
+
+/** The screener names as the check-in page writes them. */
+export const INSTRUMENT_LABEL: Readonly<Record<string, string>> = {
+  PHQ9: "PHQ-9",
+  GAD7: "GAD-7",
+  WHO5: "WHO-5",
+};

src/components/topics/topic-relationships-card.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Info, Link2 } from "lucide-react";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TileHeader } from "@/components/insights/tile-header";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { TopicRelationship } from "@/lib/topics/stats";
+
+import { useSignalAxis, useSignalFormat } from "./use-signal-format";
+
+const ScatterCorrelationChart = dynamic(
+  () =>
+    import("@/components/charts/chart-runtime").then((mod) => ({
+      default: mod.ScatterCorrelationChart,
+    })),
+  { ssr: false, loading: () => <Skeleton className="h-44 w-full" /> },
+);
+
+const STATUS_DOT = {
+  linked: "bg-chart-1",
+  no_clear_link: "bg-muted-foreground",
+  insufficient: "bg-border",
+} as const;
+
+/** The values' own span with a tenth of it on each side, so dots sit inside. */
+function paddedDomain(values: number[]): [number, number] {
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const pad = (max - min) * 0.1 || Math.abs(max) * 0.05 || 1;
+  return [min - pad, max + pad];
+}
+
+/** The one sentence a relationship reads as, from the server's figures. */
+function useRelationshipSentence() {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const format = useSignalFormat();
+  return (rel: TopicRelationship): { text: string; meta: string | null } => {
+    const x = format.label(rel.x);
+    const y = format.label(rel.y);
+    if (rel.status === "insufficient") {
+      return {
+        text: t("topics.relationships.insufficient", {
+          x,
+          y,
+          count: rel.pairedDays,
+          required: rel.requiredDays,
+        }),
+        meta: null,
+      };
+    }
+    if (rel.status === "no_clear_link") {
+      return {
+        text: t("topics.relationships.noClearLink", {
+          x,
+          y,
+          count: rel.pairedDays,
+        }),
+        meta: null,
+      };
+    }
+    if (rel.kind === "split" && rel.split) {
+      const higher = rel.split.difference > 0;
+      return {
+        text: t(
+          higher
+            ? "topics.relationships.splitHigher"
+            : "topics.relationships.splitLower",
+          {
+            x,
+            y,
+            threshold:
+              rel.x === "SLEEP_DURATION" && rel.split.threshold % 60 === 0
+                ? t("common.durationClockHours", {
+                    time: fmt.number(rel.split.threshold / 60, 0),
+                  })
+                : format.value(rel.x, rel.split.threshold),
+            amount: format.amount(rel.y, rel.split.difference),
+          },
+        ),
+        meta: t("topics.relationships.splitDays", {
+          below: rel.split.belowDays,
+          other: rel.split.otherDays,
+        }),
+      };
+    }
+    const higher = (rel.r ?? 0) > 0;
+    const key = rel.lagDays === 1 ? "NextDay" : "SameDay";
+    return {
+      text: t(
+        `topics.relationships.correlation${key}${higher ? "Higher" : "Lower"}`,
+        { x, y, r: fmt.number(rel.r ?? 0, 2) },
+      ),
+      meta: t("topics.relationships.pairedDays", { count: rel.pairedDays }),
+    };
+  };
+}
+
+/**
+ * How the topic's signals move together: one statement per pair, each with
+ * the number of days it rests on, and a scatter for the first pair that holds
+ * a pattern. Fourteen paired days before anything is said; never a cause.
+ */
+export function TopicRelationshipsCard({
+  relationships,
+}: {
+  relationships: TopicRelationship[];
+}) {
+  const { t } = useTranslations();
+  const format = useSignalFormat();
+  const axis = useSignalAxis();
+  const sentence = useRelationshipSentence();
+  if (relationships.length === 0) return null;
+  // A scatter only reads for a correlation: a split's x is two groups.
+  const featured = relationships.find(
+    (r) =>
+      r.kind === "correlation" && r.status === "linked" && r.points.length > 0,
+  );
+  const scatter = featured
+    ? featured.points.map((p) => ({
+        x: axis.toAxis(featured.x, p.x),
+        y: axis.toAxis(featured.y, p.y),
+      }))
+    : [];
+
+  return (
+    <Card data-slot="topic-relationships">
+      <CardHeader>
+        <TileHeader
+          icon={Link2}
+          titleAs="h2"
+          title={t("topics.relationships.title")}
+        />
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        {featured ? (
+          <figure className="flex flex-col gap-1">
+            <div aria-hidden="true">
+              <ScatterCorrelationChart
+                data={scatter}
+                fill="var(--chart-1)"
+                xAxis={{
+                  dataKey: "x",
+                  name: format.label(featured.x),
+                  domain: paddedDomain(scatter.map((p) => p.x)),
+                  tickFormatter: (v) => axis.tick(featured.x, v),
+                }}
+                yAxis={{
+                  dataKey: "y",
+                  name: format.label(featured.y),
+                  domain: paddedDomain(scatter.map((p) => p.y)),
+                  tickFormatter: (v) => axis.tick(featured.y, v),
+                }}
+                height={176}
+              />
+            </div>
+            <figcaption className="text-muted-foreground text-xs">
+              {t("topics.relationships.scatterCaption", {
+                x: format.label(featured.x),
+                y: format.label(featured.y),
+              })}
+            </figcaption>
+          </figure>
+        ) : null}
+        <ul className="flex flex-col gap-3">
+          {relationships.map((rel) => {
+            const { text, meta } = sentence(rel);
+            return (
+              <li
+                key={rel.id}
+                className="flex items-start gap-2"
+                data-slot="topic-relationship"
+                data-relationship={rel.id}
+                data-status={rel.status}
+              >
+                <span
+                  aria-hidden="true"
+                  className={`mt-1.5 size-2 shrink-0 rounded-full ${STATUS_DOT[rel.status]}`}
+                />
+                <div className="min-w-0">
+                  <p className="text-sm">{text}</p>
+                  {meta ? (
+                    <p className="text-muted-foreground text-xs">{meta}</p>
+                  ) : null}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+        <p className="text-muted-foreground flex items-start gap-2 text-xs">
+          <Info className="mt-px size-3.5 shrink-0" aria-hidden="true" />
+          <span>{t("topics.relationships.footnote")}</span>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

src/components/topics/topic-side-by-side-card.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { Layers } from "lucide-react";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { TopicDetail } from "@/lib/topics/build";
+import { daysBetweenDateKeys, shiftDateKey } from "@/lib/tz/format";
+
+import { useSignalAxis, useSignalFormat } from "./use-signal-format";
+
+// Recharts loads through the one shared chart chunk, never in this route's own.
+const TopicSideBySideChart = dynamic(
+  () =>
+    import("@/components/charts/chart-runtime").then((mod) => ({
+      default: mod.TopicSideBySideChart,
+    })),
+  { ssr: false, loading: () => <Skeleton className="h-72 w-full" /> },
+);
+
+const SERIES_COLORS = ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)"];
+
+/**
+ * The topic's signals on one time axis for the chosen window, each against
+ * its usual range. Sleep draws in hours on the axis and reads as hours and
+ * minutes in the tooltip; every other type in the person's display unit.
+ */
+export function TopicSideBySideCard({ detail }: { detail: TopicDetail }) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const format = useSignalFormat();
+  const { toAxis, fromAxis, tick } = useSignalAxis();
+  if (detail.series.length === 0) return null;
+
+  const days = daysBetweenDateKeys(detail.from, detail.to) + 1;
+
+  const series = detail.series.map((s, i) => ({
+    key: s.key,
+    label: format.label(s.key),
+    color: SERIES_COLORS[i % SERIES_COLORS.length],
+    points: s.points.map((p) => ({
+      x: daysBetweenDateKeys(detail.from, p.day),
+      y: toAxis(s.key, p.value),
+    })),
+    band: s.usual
+      ? { low: toAxis(s.key, s.usual.low), high: toAxis(s.key, s.usual.high) }
+      : null,
+  }));
+  const names = series.map((s) => s.label).join(", ");
+
+  return (
+    <Card data-slot="topic-side-by-side">
+      <CardHeader>
+        <TileHeader
+          icon={Layers}
+          titleAs="h2"
+          title={t("topics.chart.title")}
+        />
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <p className="text-muted-foreground text-xs">
+          {t("topics.chart.legend")}
+        </p>
+        <div
+          role="img"
+          aria-label={t("topics.chart.label", { signals: names })}
+        >
+          <TopicSideBySideChart
+            series={series}
+            days={days}
+            formatDay={(x) =>
+              fmt.dateShortSmartCalendar(shiftDateKey(detail.from, x))
+            }
+            formatValue={(key, value) =>
+              format.value(key, fromAxis(key, value))
+            }
+            formatTick={tick}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/topics/topic-side-by-side-chart.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ReferenceArea,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import { RichChartTooltip } from "@/components/charts/chart-tooltip";
+
+export interface SideBySideSeries {
+  key: string;
+  label: string;
+  /** A `var(--chart-N)` expression. */
+  color: string;
+  /** Day index from the window's first day, and the value in display units. */
+  points: Array<{ x: number; y: number }>;
+  /** The usual range in display units, shaded behind the line. */
+  band: { low: number; high: number } | null;
+}
+
+const AXIS_TICK = { fontSize: 11, fill: "var(--muted-foreground)" };
+const ROW_HEIGHT = 88;
+const AXIS_HEIGHT = 24;
+
+/**
+ * Up to three signals stacked on one time axis, each with its usual range
+ * shaded, so a reader sees two lines move together before reading that they
+ * do. Each row keeps its own scale; the axis, the grid and the band follow the
+ * metric charts. Values arrive in display units, already converted.
+ */
+export function TopicSideBySideChart({
+  series,
+  days,
+  formatDay,
+  formatValue,
+  formatTick,
+}: {
+  series: SideBySideSeries[];
+  /** Days in the window; the axis runs from 0 to `days - 1`. */
+  days: number;
+  formatDay: (x: number) => string;
+  /** A value with its unit, for the tooltip. */
+  formatValue: (key: string, value: number) => string;
+  /** A bare axis number. */
+  formatTick: (key: string, value: number) => string;
+}) {
+  const ticks = [0, Math.round((days - 1) / 2), days - 1];
+  return (
+    <div className="flex flex-col gap-2">
+      {series.map((s, index) => {
+        const last = index === series.length - 1;
+        return (
+          <div key={s.key} data-slot="topic-chart-row" data-signal={s.key}>
+            <p className="text-foreground flex items-center gap-2 text-xs font-medium">
+              <span
+                aria-hidden="true"
+                className="inline-block h-0.5 w-3 rounded-full"
+                style={{ backgroundColor: s.color }}
+              />
+              {s.label}
+            </p>
+            <div style={{ height: ROW_HEIGHT + (last ? AXIS_HEIGHT : 0) }}>
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart
+                  data={s.points}
+                  margin={{ top: 6, right: 8, bottom: 0, left: 0 }}
+                  syncId="topic-side-by-side"
+                >
+                  <CartesianGrid
+                    strokeDasharray="3 3"
+                    stroke="var(--border)"
+                    opacity={0.5}
+                    vertical={false}
+                  />
+                  <XAxis
+                    type="number"
+                    dataKey="x"
+                    domain={[0, Math.max(1, days - 1)]}
+                    ticks={ticks}
+                    hide={!last}
+                    height={last ? AXIS_HEIGHT : 0}
+                    tick={AXIS_TICK}
+                    tickLine={false}
+                    axisLine={false}
+                    tickFormatter={(value) => formatDay(Number(value))}
+                  />
+                  <YAxis
+                    domain={["auto", "auto"]}
+                    width={44}
+                    tick={AXIS_TICK}
+                    tickLine={false}
+                    axisLine={false}
+                    tickCount={3}
+                    tickFormatter={(value) =>
+                      typeof value === "number" ? formatTick(s.key, value) : ""
+                    }
+                  />
+                  {s.band ? (
+                    <ReferenceArea
+                      y1={s.band.low}
+                      y2={s.band.high}
+                      fill="var(--success)"
+                      fillOpacity={0.12}
+                      strokeOpacity={0}
+                      ifOverflow="extendDomain"
+                    />
+                  ) : null}
+                  <Tooltip
+                    cursor={{ stroke: "var(--border)" }}
+                    content={({ active, payload }) => {
+                      const point = payload?.[0]?.payload as
+                        { x: number; y: number } | undefined;
+                      if (!active || !point) return null;
+                      return (
+                        <RichChartTooltip
+                          active
+                          label={formatDay(point.x)}
+                          rows={[
+                            {
+                              name: s.label,
+                              value: formatValue(s.key, point.y),
+                              color: s.color,
+                            },
+                          ]}
+                        />
+                      );
+                    }}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="y"
+                    name={s.label}
+                    stroke={s.color}
+                    strokeWidth={2}
+                    dot={s.points.length <= 31 ? { r: 2 } : false}
+                    isAnimationActive={false}
+                    connectNulls
+                  />
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/topics/topic-summary.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { TopicHeadline, TopicSummary } from "@/lib/topics/build";
+import { cn } from "@/lib/utils";
+
+import { INSTRUMENT_LABEL } from "./topic-meta";
+import { useSignalFormat } from "./use-signal-format";
+
+/**
+ * The topic's one sentence, worded from the server's code. The rule that
+ * picked the code lives in `src/lib/topics/build.ts`; this only says it.
+ */
+export function useSummarySentence(summary: TopicSummary): string {
+  const { t } = useTranslations();
+  const signals = useSignalFormat();
+  switch (summary.code) {
+    case "outside":
+      return t(
+        summary.direction === "below"
+          ? "topics.summary.outsideBelow"
+          : "topics.summary.outsideAbove",
+        { signal: summary.signal ? signals.label(summary.signal) : "" },
+      );
+    case "labs":
+      return t("topics.summary.labs", {
+        count: summary.count ?? 0,
+        total: summary.total ?? 0,
+      });
+    case "cycleDay":
+      return t("topics.summary.cycleDay", { day: summary.count ?? 0 });
+    case "steady":
+      return summary.count === summary.total
+        ? t("topics.summary.steadyAll")
+        : t("topics.summary.steadySome", {
+            count: summary.count ?? 0,
+            total: summary.total ?? 0,
+          });
+    case "learning":
+      return t("topics.summary.learning");
+    default:
+      return t("topics.summary.empty");
+  }
+}
+
+export function TopicSummaryText({
+  summary,
+  className,
+}: {
+  summary: TopicSummary;
+  className?: string;
+}) {
+  const sentence = useSummarySentence(summary);
+  return (
+    <p
+      data-slot="topic-summary"
+      data-code={summary.code}
+      className={cn("text-foreground", className)}
+    >
+      {sentence}
+    </p>
+  );
+}
+
+/** The headline as a value and a unit, for whichever kind the server sent. */
+export function useHeadline(
+  headline: TopicHeadline | null,
+): { value: string; unit: string } | null {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const signals = useSignalFormat();
+  if (!headline) return null;
+  switch (headline.kind) {
+    case "signal":
+      return {
+        value: signals.number(headline.key, headline.value),
+        unit: signals.unit(headline.key),
+      };
+    case "labs":
+      return {
+        value: t("topics.headline.labsValue", {
+          count: headline.inRange,
+          total: headline.total,
+        }),
+        unit: t("topics.headline.labsUnit"),
+      };
+    case "cycleDay":
+      return {
+        value: t("topics.headline.cycleDay", { day: headline.dayOfCycle }),
+        unit: "",
+      };
+    case "screener":
+      return {
+        value: `${INSTRUMENT_LABEL[headline.instrument] ?? headline.instrument} ${fmt.number(headline.score, 0)}`,
+        unit: "",
+      };
+  }
+}

src/components/topics/topic-tile.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import Link from "next/link";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { ScorePill } from "@/components/ui/score-pill";
+import { TileHeader } from "@/components/insights/tile-header";
+import { useTranslations } from "@/lib/i18n/context";
+import type { TopicOverviewEntry } from "@/lib/topics/build";
+
+import { TOPIC_ICONS, topicHref, topicTitleKey } from "./topic-meta";
+import { TopicSummaryText, useHeadline } from "./topic-summary";
+
+// The sparkline loads through the shared chart runtime, so the overview's own
+// chunk carries no recharts; the tile owns the fixed band it draws in.
+const DeltaSparkline = dynamic(
+  () =>
+    import("@/components/charts/chart-runtime").then((mod) => ({
+      default: mod.DeltaSparkline,
+    })),
+  { ssr: false, loading: () => null },
+);
+
+const TONE_PILL = {
+  steady: "success",
+  watch: "warning",
+  learning: "neutral",
+} as const;
+
+/**
+ * One topic on the overview: its name (the link), the headline value, the
+ * rule-based sentence, the last 30 days as a sparkline, and how many of the
+ * topic's signals hold a value. The whole card is the target, through the
+ * title link stretched over it, so the link's name is the visible title.
+ */
+export function TopicTile({ entry }: { entry: TopicOverviewEntry }) {
+  const { t } = useTranslations();
+  const headline = useHeadline(entry.headline);
+  const title = t(topicTitleKey(entry.key));
+  const points = entry.sparkline.map((v, i) => ({ i, v }));
+
+  return (
+    <Card
+      data-slot="topic-tile"
+      data-topic={entry.key}
+      data-tone={entry.tone}
+      className="hover:bg-accent/40 relative gap-2 transition-colors md:gap-3"
+    >
+      <CardHeader>
+        <TileHeader
+          icon={TOPIC_ICONS[entry.key]}
+          titleAs="h2"
+          title={
+            <Link
+              href={topicHref(entry.key)}
+              data-slot="topic-tile-link"
+              className="focus-visible:ring-ring/50 rounded-sm after:absolute after:inset-0 after:rounded-xl focus-visible:ring-2 focus-visible:outline-none"
+            >
+              {title}
+            </Link>
+          }
+        />
+      </CardHeader>
+      <CardContent className="flex min-w-0 flex-1 flex-col gap-2">
+        {headline ? (
+          <p className="text-foreground flex items-baseline gap-1.5">
+            <span className="text-2xl font-semibold tabular-nums">
+              {headline.value}
+            </span>
+            {headline.unit ? (
+              <span className="text-muted-foreground text-sm">
+                {headline.unit}
+              </span>
+            ) : null}
+          </p>
+        ) : null}
+        <TopicSummaryText summary={entry.summary} className="text-sm" />
+        {points.length >= 2 ? (
+          <div className="h-10" aria-hidden="true">
+            <DeltaSparkline data={points} strokeVar="var(--chart-1)" />
+          </div>
+        ) : null}
+        <div className="mt-auto flex flex-wrap items-center justify-between gap-2">
+          <ScorePill tone={TONE_PILL[entry.tone]}>
+            {t(`topics.tone.${entry.tone}`)}
+          </ScorePill>
+          {entry.recorded > 0 ? (
+            <span className="text-muted-foreground text-xs">
+              {t("topics.recorded", {
+                count: entry.recorded,
+                total: entry.total,
+              })}
+            </span>
+          ) : null}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/topics/topic-today-card.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronRight, Sun } from "lucide-react";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { InlineAction } from "@/components/ui/inline-action";
+import { ScorePill } from "@/components/ui/score-pill";
+import { TileHeader } from "@/components/insights/tile-header";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import type { TopicDetail, TopicSignal } from "@/lib/topics/build";
+
+import { TopicSummaryText } from "./topic-summary";
+import { useSignalFormat } from "./use-signal-format";
+
+const STATE_TONE = {
+  within: "success",
+  above: "warning",
+  below: "warning",
+  learning: "neutral",
+} as const;
+
+function SignalReadout({
+  signal,
+  todayKey,
+}: {
+  signal: TopicSignal;
+  todayKey: string;
+}) {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const format = useSignalFormat();
+  if (!signal.latest) return null;
+  const label = format.label(signal.key);
+  const unit = format.unit(signal.key);
+  const usual = signal.usual;
+  return (
+    <div
+      className="flex min-w-0 flex-col gap-1"
+      data-slot="topic-signal"
+      data-signal={signal.key}
+      data-state={signal.state}
+    >
+      <dt className="text-muted-foreground text-xs">{label}</dt>
+      <dd className="text-foreground flex items-baseline gap-1">
+        <span className="text-xl font-semibold tabular-nums">
+          {format.number(signal.key, signal.latest.value)}
+        </span>
+        {unit ? (
+          <span className="text-muted-foreground text-xs">{unit}</span>
+        ) : null}
+      </dd>
+      <dd className="text-muted-foreground text-xs">
+        {usual
+          ? t("topics.today.usual", {
+              low: format.number(signal.key, usual.low),
+              high: format.number(signal.key, usual.high),
+            })
+          : t("topics.today.learning")}
+      </dd>
+      {signal.latest.day !== todayKey ? (
+        <dd className="text-muted-foreground text-xs">
+          {t("topics.today.asOf", {
+            date: fmt.dateShortSmartCalendar(signal.latest.day),
+          })}
+        </dd>
+      ) : null}
+      <dd className="flex flex-wrap items-center gap-2">
+        {signal.state !== "none" ? (
+          <ScorePill tone={STATE_TONE[signal.state]}>
+            {t(`topics.state.${signal.state}`)}
+          </ScorePill>
+        ) : null}
+        {signal.href ? (
+          <InlineAction asChild tone="primary" size="xs">
+            <Link href={signal.href}>
+              {t("topics.today.details")}
+              <span className="sr-only">: {label}</span>
+              <ChevronRight className="size-3" aria-hidden="true" />
+            </Link>
+          </InlineAction>
+        ) : null}
+      </dd>
+    </div>
+  );
+}
+
+/**
+ * The topic today: its one sentence, then each recorded signal with its
+ * latest value, its usual range and a way into its own page.
+ */
+export function TopicTodayCard({ detail }: { detail: TopicDetail }) {
+  const { t } = useTranslations();
+  const recorded = detail.signals.filter((s) => s.latest !== null);
+  return (
+    <Card data-slot="topic-today">
+      <CardHeader>
+        <TileHeader icon={Sun} titleAs="h2" title={t("topics.today.title")} />
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <TopicSummaryText
+          summary={detail.summary}
+          className="text-base font-medium"
+        />
+        {recorded.length > 0 ? (
+          <dl className="grid grid-cols-2 gap-x-3 gap-y-4 md:grid-cols-4">
+            {recorded.map((signal) => (
+              <SignalReadout
+                key={signal.key}
+                signal={signal}
+                todayKey={detail.to}
+              />
+            ))}
+          </dl>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

src/components/topics/topic-trends-card.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { TrendingUp } from "lucide-react";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { TileHeader } from "@/components/insights/tile-header";
+import { useTranslations } from "@/lib/i18n/context";
+import type { TopicTrend } from "@/lib/topics/stats";
+
+import { useSignalFormat } from "./use-signal-format";
+
+const DeltaSparkline = dynamic(
+  () =>
+    import("@/components/charts/chart-runtime").then((mod) => ({
+      default: mod.DeltaSparkline,
+    })),
+  { ssr: false, loading: () => null },
+);
+
+/**
+ * Each recorded signal over the trailing 90 days: the change the fitted line
+ * amounts to, beside its weekly means. Below two weeks of days a row says how
+ * many it has rather than drawing a slope through a handful of points.
+ */
+export function TopicTrendsCard({ trends }: { trends: TopicTrend[] }) {
+  const { t } = useTranslations();
+  const format = useSignalFormat();
+  if (trends.length === 0) return null;
+
+  return (
+    <Card data-slot="topic-trends">
+      <CardHeader>
+        <TileHeader
+          icon={TrendingUp}
+          titleAs="h2"
+          title={t("topics.trends.title")}
+        />
+      </CardHeader>
+      <CardContent>
+        <ul className="divide-border flex flex-col divide-y">
+          {trends.map((trend) => {
+            const points = trend.weekly.map((p, i) => ({ i, v: p.value }));
+            return (
+              <li
+                key={trend.key}
+                className="flex items-center gap-3 py-2.5 first:pt-0 last:pb-0"
+                data-slot="topic-trend"
+                data-signal={trend.key}
+                data-status={trend.status}
+              >
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium">
+                    {format.label(trend.key)}
+                  </p>
+                  <p className="text-muted-foreground text-xs">
+                    {trend.status === "ok"
+                      ? t("topics.trends.window")
+                      : t("topics.trends.insufficient", { count: trend.days })}
+                  </p>
+                </div>
+                {trend.status === "ok" && points.length >= 2 ? (
+                  <div className="h-8 w-20 shrink-0" aria-hidden="true">
+                    <DeltaSparkline data={points} strokeVar="var(--chart-2)" />
+                  </div>
+                ) : null}
+                {trend.status === "ok" && trend.change !== null ? (
+                  <span className="shrink-0 text-sm font-semibold tabular-nums">
+                    {format.delta(trend.key, trend.change)}
+                  </span>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}

src/components/topics/topics-overview.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import Link from "next/link";
+import { Layers } from "lucide-react";
+
+import { EmptyState } from "@/components/ui/empty-state";
+import { InlineAction } from "@/components/ui/inline-action";
+import { PageHeader } from "@/components/ui/page-header";
+import { QueryErrorCard } from "@/components/ui/query-error-card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
+import { useTranslations } from "@/lib/i18n/context";
+import type { TopicKey } from "@/lib/topics/registry";
+
+import { PreviewBadge } from "./preview-badge";
+import { PreviewNote } from "./preview-note";
+import { topicTitleKey } from "./topic-meta";
+import { TopicTile } from "./topic-tile";
+import { useTopicOverview } from "./use-topics";
+
+function useTopicList() {
+  const { t } = useTranslations();
+  return (keys: readonly TopicKey[]) =>
+    keys.map((key) => t(topicTitleKey(key))).join(", ");
+}
+
+/**
+ * `/topics`: one tile per topic the record holds data for. Topics with
+ * nothing recorded yet and topics whose module is off are named once each,
+ * at the end, with where to change that; neither gets an empty tile.
+ */
+export function TopicsOverview() {
+  const { t } = useTranslations();
+  const list = useTopicList();
+  const { inSharedRecord } = useRecordCapabilities();
+  const query = useTopicOverview(true);
+  const data = query.data;
+
+  return (
+    <div className="space-y-6" data-slot="topics-overview">
+      <PageHeader
+        title={t("topics.overview.title")}
+        titleAccessory={<PreviewBadge label={t("nav.previewBadge")} />}
+        description={t("topics.overview.description")}
+      />
+
+      {query.isError ? (
+        <QueryErrorCard
+          error={query.error}
+          title={t("topics.loadError")}
+          onRetry={() => void query.refetch()}
+        />
+      ) : !data ? (
+        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+          {Array.from({ length: 4 }, (_, i) => (
+            <Skeleton key={i} className="h-56 rounded-xl" />
+          ))}
+        </div>
+      ) : data.topics.length === 0 ? (
+        <EmptyState
+          icon={<Layers className="size-6" aria-hidden="true" />}
+          title={t("topics.overview.emptyTitle")}
+          description={t("topics.overview.emptyDescription")}
+        />
+      ) : (
+        <div
+          className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4"
+          data-slot="topics-grid"
+        >
+          {data.topics.map((entry) => (
+            <TopicTile key={entry.key} entry={entry} />
+          ))}
+        </div>
+      )}
+
+      {data && data.empty.length > 0 ? (
+        <p
+          className="text-muted-foreground text-xs"
+          data-slot="topics-empty-list"
+        >
+          {t("topics.overview.notRecorded", { topics: list(data.empty) })}
+        </p>
+      ) : null}
+      {data && data.hiddenByModule.length > 0 ? (
+        <p
+          className="text-muted-foreground text-xs"
+          data-slot="topics-hidden-list"
+        >
+          {t("topics.overview.hiddenByModule", {
+            topics: list(data.hiddenByModule),
+          })}{" "}
+          {inSharedRecord ? null : (
+            <InlineAction asChild tone="muted" size="xs">
+              <Link href="/settings/modules">
+                {t("topics.overview.modulesLink")}
+              </Link>
+            </InlineAction>
+          )}
+        </p>
+      ) : null}
+      <PreviewNote />
+    </div>
+  );
+}

src/components/topics/topics-preview-gate.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { useRouter } from "next/navigation";
+
+import { PageAuthGate } from "@/components/ui/page-auth-gate";
+import { useAuth } from "@/hooks/use-auth";
+
+/**
+ * The Topics area exists only for a person who switched the preview on.
+ *
+ * Until the account payload answers, the page shows the shell's loading
+ * state; signed out, it goes to sign-in like every page; with the preview off
+ * (an old bookmark, a link from someone else) it leaves for Insights, where
+ * the person's pages are. The routes refuse on their own (404
+ * `topics.preview_off`), so this is the friendly end, not the guard.
+ */
+export function TopicsPreviewGate({ children }: { children: ReactNode }) {
+  const { user, isLoading, isAuthenticated } = useAuth();
+  const router = useRouter();
+  const enabled = user?.previewFeatures?.topics === true;
+
+  useEffect(() => {
+    if (isLoading) return;
+    if (!isAuthenticated) router.replace("/auth/login");
+    else if (!enabled) router.replace("/insights");
+  }, [isLoading, isAuthenticated, enabled, router]);
+
+  if (isLoading || !isAuthenticated || !enabled) return <PageAuthGate />;
+  return <>{children}</>;
+}

src/components/topics/use-signal-format.ts

@@ -0,0 +1,146 @@
+"use client";
+
+/**
+ * How a topic signal reads on screen: its name, a value in the person's own
+ * units, and a signed change. Measurement types go through the same unit
+ * display every metric page uses (`useUnitDisplay`), so a topic never shows a
+ * number its metric page would write differently; sleep reads as hours and
+ * minutes, the mood score as its 1–5 value.
+ */
+import { useMemo } from "react";
+
+import { useUnitDisplay } from "@/hooks/use-unit-display";
+import { formatDurationMinutes } from "@/lib/i18n/duration";
+import { useFormatters, useTranslations } from "@/lib/i18n/context";
+import { MEASUREMENT_TYPE_LABEL_KEYS } from "@/lib/measurements/type-label-keys";
+import { rawDisplayFractionDigits } from "@/lib/measurements/display-transform";
+import { vitalDisplayDecimals } from "@/lib/measurements/vital-precision";
+import { MOOD_SIGNAL } from "@/lib/topics/registry";
+
+/**
+ * Whole numbers for counts (steps, minutes) and for the vitals every device
+ * reads whole (pulse, blood pressure, HRV, SpO2); one decimal for weight and
+ * temperature; a converted unit at its transform's precision. The same
+ * answer the Today overview and the server-side texts give.
+ */
+const WHOLE_VITALS = new Set([
+  "PULSE",
+  "RESTING_HEART_RATE",
+  "HEART_RATE_VARIABILITY",
+  "HRV_RMSSD",
+  "BLOOD_PRESSURE_SYS",
+  "BLOOD_PRESSURE_DIA",
+  "OXYGEN_SATURATION",
+  "RESPIRATORY_RATE",
+  "WALKING_HEART_RATE_AVERAGE",
+]);
+
+function signalDigits(key: string, transformDecimals: number): number {
+  if (rawDisplayFractionDigits(key) === 0) return 0;
+  if (WHOLE_VITALS.has(key))
+    return vitalDisplayDecimals(key, transformDecimals);
+  return transformDecimals;
+}
+
+export interface SignalFormat {
+  label: (key: string) => string;
+  /** The value with its unit, as one string. */
+  value: (key: string, raw: number) => string;
+  /** The number alone, in display units. */
+  number: (key: string, raw: number) => string;
+  unit: (key: string) => string;
+  /** A signed change with its unit ("+1.2 kg", "−4 ms"). */
+  delta: (key: string, raw: number) => string;
+  /** The size of a change with its unit, unsigned ("1.2 kg"). */
+  amount: (key: string, raw: number) => string;
+}
+
+export function useSignalFormat(): SignalFormat {
+  const { t } = useTranslations();
+  const fmt = useFormatters();
+  const units = useUnitDisplay();
+
+  return useMemo(() => {
+    const label = (key: string) => {
+      if (key === MOOD_SIGNAL) return t("topics.signals.mood");
+      const labelKey =
+        MEASUREMENT_TYPE_LABEL_KEYS[
+          key as keyof typeof MEASUREMENT_TYPE_LABEL_KEYS
+        ];
+      return labelKey ? t(labelKey) : key;
+    };
+    const number = (key: string, raw: number) => {
+      if (key === MOOD_SIGNAL) return fmt.number(raw, 1);
+      if (key === "SLEEP_DURATION") return formatDurationMinutes(raw, t);
+      return fmt.number(
+        units.toDisplay(key, raw),
+        signalDigits(key, units.decimalsFor(key)),
+      );
+    };
+    const unit = (key: string) => {
+      if (key === MOOD_SIGNAL) return t("topics.units.moodScale");
+      if (key === "SLEEP_DURATION") return "";
+      return units.unitFor(key);
+    };
+    const value = (key: string, raw: number) => {
+      const u = unit(key);
+      return u ? `${number(key, raw)} ${u}` : number(key, raw);
+    };
+    const amount = (key: string, raw: number) => {
+      const magnitude = Math.abs(raw);
+      if (key === "SLEEP_DURATION") return formatDurationMinutes(magnitude, t);
+      const shown =
+        key === MOOD_SIGNAL
+          ? fmt.number(magnitude, 1)
+          : fmt.number(
+              Math.abs(units.toDisplayDelta(key, magnitude)),
+              signalDigits(key, units.decimalsFor(key)),
+            );
+      const u = unit(key);
+      return u ? `${shown} ${u}` : shown;
+    };
+    const delta = (key: string, raw: number) => {
+      const sign = raw > 0 ? "+" : raw < 0 ? "−" : "±";
+      return `${sign}${amount(key, raw)}`;
+    };
+    return { label, value, number, unit, delta, amount };
+  }, [t, fmt, units]);
+}
+
+export interface SignalAxis {
+  /** A stored value in the unit a chart axis draws (sleep in hours). */
+  toAxis: (key: string, raw: number) => number;
+  /** Back from the axis unit to the stored value. */
+  fromAxis: (key: string, value: number) => number;
+  /** A bare axis tick. */
+  tick: (key: string, value: number) => string;
+}
+
+/** How a signal draws on a chart axis, in the person's own units. */
+export function useSignalAxis(): SignalAxis {
+  const fmt = useFormatters();
+  const units = useUnitDisplay();
+  return useMemo(() => {
+    const plain = (key: string) =>
+      key === MOOD_SIGNAL || key === "SLEEP_DURATION";
+    return {
+      toAxis: (key, raw) =>
+        key === "SLEEP_DURATION"
+          ? raw / 60
+          : key === MOOD_SIGNAL
+            ? raw
+            : units.toDisplay(key, raw),
+      fromAxis: (key, value) =>
+        key === "SLEEP_DURATION"
+          ? value * 60
+          : key === MOOD_SIGNAL
+            ? value
+            : units.fromDisplay(key, value),
+      tick: (key, value) =>
+        fmt.number(
+          value,
+          plain(key) ? 1 : signalDigits(key, units.decimalsFor(key)),
+        ),
+    };
+  }, [fmt, units]);
+}

src/components/topics/use-topics.ts

@@ -0,0 +1,37 @@
+"use client";
+
+/**
+ * The two topic reads. Each answer is the server's, rendered as given; the
+ * failed read hands its `ApiError` through untouched so the surface's
+ * read-failure primitive decides what to offer.
+ */
+import { useQuery } from "@tanstack/react-query";
+
+import { apiGet } from "@/lib/api/api-fetch";
+import { queryKeys } from "@/lib/query-keys";
+import type { TopicDetail, TopicOverview } from "@/lib/topics/build";
+import type { TopicKey, TopicRange } from "@/lib/topics/registry";
+
+export function useTopicOverview(enabled: boolean) {
+  return useQuery({
+    queryKey: queryKeys.topicsOverview(),
+    queryFn: () => apiGet<TopicOverview>("/api/topics"),
+    enabled,
+  });
+}
+
+export function useTopicDetail(
+  topic: TopicKey,
+  range: TopicRange,
+  enabled: boolean,
+) {
+  return useQuery({
+    queryKey: queryKeys.topicDetail(topic, range),
+    queryFn: () =>
+      apiGet<TopicDetail>(
+        `/api/topics/${encodeURIComponent(topic)}?range=${encodeURIComponent(range)}`,
+      ),
+    enabled,
+    placeholderData: (previous) => previous,
+  });
+}

src/hooks/use-preview-features.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { useAuth } from "@/hooks/use-auth";
+import type { PreviewFeatures } from "@/lib/settings/preview-features";
+
+/**
+ * The person's own preview opt-ins, off the cached account payload, or null
+ * while it has not answered. Every reader treats null as "off": a preview
+ * appears only once the server has said yes, never on a guess.
+ */
+export function usePreviewFeatures(): PreviewFeatures | null {
+  const { user } = useAuth();
+  return user?.previewFeatures ?? null;
+}

src/lib/navigation/shared-record.ts

@@ -51,6 +51,8 @@ const WHOLE_RECORD_ROUTE_FAMILIES = [
   "/achievements",
   // v1.42 — the timeline lays every section side by side.
   "/timeline",
+  // So does a topic page (preview).
+  "/topics",
 ] as const;
 
 interface RouteFamily {

src/lib/query-keys/index.ts

@@ -49,6 +49,7 @@ import { vaccinationKeys } from "./vaccinations";
 import { workoutKeys } from "./workouts";
 import { activityKeys } from "./activity";
 import { provenanceKeys } from "./provenance";
+import { topicKeys } from "./topics";
 
 export const queryKeys = {
   ...authKeys,
@@ -64,6 +65,7 @@ export const queryKeys = {
   ...workoutKeys,
   ...activityKeys,
   ...provenanceKeys,
+  ...topicKeys,
   ...settingsKeys,
   ...cycleKeys,
   ...measurementReminderKeys,
@@ -165,6 +167,7 @@ export const measurementDependentKeys = [
   // write to this one evicts both roots.
   queryKeys.dayRoot(),
   queryKeys.timelineRoot(),
+  queryKeys.topicsRoot(),
 ];
 
 /**
@@ -199,6 +202,7 @@ export const moodDependentKeys = [
   // write to this one evicts both roots.
   queryKeys.dayRoot(),
   queryKeys.timelineRoot(),
+  queryKeys.topicsRoot(),
 ];
 
 /**
@@ -254,6 +258,7 @@ export const medicationDependentKeys = [
   // write to this one evicts both roots.
   queryKeys.dayRoot(),
   queryKeys.timelineRoot(),
+  queryKeys.topicsRoot(),
   // v1.43 — a taken supplement dose adds to the day's micronutrients
   // (`source = SUPPLEMENT`), so a dose write evicts the nutrient reads.
   queryKeys.nutrientsRoot(),
@@ -274,6 +279,7 @@ export const cycleDependentKeys = [
   // write to this one evicts both roots.
   queryKeys.dayRoot(),
   queryKeys.timelineRoot(),
+  queryKeys.topicsRoot(),
 ];
 
 /**
@@ -297,6 +303,7 @@ export const illnessDependentKeys = [
   // write to this one evicts both roots.
   queryKeys.dayRoot(),
   queryKeys.timelineRoot(),
+  queryKeys.topicsRoot(),
 ];
 
 /**
@@ -330,6 +337,7 @@ export const encounterDependentKeys = [
   // write to this one evicts both roots.
   queryKeys.dayRoot(),
   queryKeys.timelineRoot(),
+  queryKeys.topicsRoot(),
 ];
 
 /**
@@ -357,6 +365,7 @@ export const vaccinationDependentKeys = [
   // write to this one evicts both roots.
   queryKeys.dayRoot(),
   queryKeys.timelineRoot(),
+  queryKeys.topicsRoot(),
 ];
 
 /**

src/lib/query-keys/settings.ts

@@ -44,6 +44,9 @@ export const settingsKeys = {
    */
   moduleListLayout: () => ["settings", "module-list-layout"] as const,
 
+  /** The per-user preview-feature opt-ins behind `/api/settings/preview-features`. */
+  previewFeatures: () => ["settings", "preview-features"] as const,
+
   /**
    * v1.35.0 — which pillars count toward the Health Score, behind
    * `GET/PATCH /api/auth/me/health-score-config`. Its own cell rather than

src/lib/query-keys/topics.ts

@@ -0,0 +1,11 @@
+/**
+ * Query keys — the topic pages (preview).
+ * Part of the centralized factory; aggregated in `./index.ts`.
+ */
+export const topicKeys = {
+  /** Every topic read; a write to any record table the topics read evicts it. */
+  topicsRoot: () => ["topics"] as const,
+  topicsOverview: () => ["topics", "overview"] as const,
+  topicDetail: (topic: string, range: string) =>
+    ["topics", "detail", topic, range] as const,
+};

src/lib/record-settings/classification.ts

@@ -98,6 +98,7 @@ export const SETTINGS_DESTINATION_INVENTORY = {
   export: PERSONAL,
   advanced: PERSONAL,
   privacy: PERSONAL,
+  preview: PERSONAL,
   about: PERSONAL,
 } as const satisfies Record<
   SettingsSectionSlug,

src/lib/settings/section-slugs.ts

@@ -114,10 +114,10 @@ export const SETTINGS_SECTION_SLUGS = [
   // pieces into one coherent privacy pane. Sits next to `advanced` (the
   // destructive-action home) and before `about`.
   "privacy",
-  // v1.44 — "Preview features" (per-user opt-ins, Settings > System) is not
-  // listed until the first preview it switches, the topic pages, ships: a
-  // switch that changes nothing is a promise the page cannot keep. The stored
-  // flag, `/api/settings/preview-features` and its backup round-trip stay.
+  // "Preview features": per-user opt-in to things finished enough to
+  // try and not yet the default (the Topics area first). Sits in the System
+  // group before About.
+  "preview",
   "about",
 ] as const;