@tekkare/romulus 0.1.254 → 0.1.256

package/layer/app/components/oip-patients/VaccineFiche.vue

@@ -0,0 +1,766 @@
+<!--
+  Vue de ressource `VaccinePatient` : la fiche d'un cas decrit apres une
+  vaccination, telle qu'OIP Case Atlas la montre (sa page /vaccines/[id], et
+  le tiroir d'un projet dans n'importe quelle app du portail).
+
+  Meme forme que la fiche patient (cf. PatientFiche) : onglets Resume et
+  Publications, chapitres a gauche, une carte par section. Les sections
+  suivent les questions d'un lecteur de pharmacovigilance : quel vaccin, ce
+  qui s'est passe et quand, ce qu'en concluent les auteurs, ce qui s'est passe
+  a la dose suivante, sur quel terrain. Chaque jugement vient avec la phrase
+  de l'article qui le porte.
+
+  `id` : le `record_id` (« 41827021:p1 ») ou l'`_id`. L'onglet et le document
+  remontent comme pour la fiche patient (`update:tab`, `record`).
+-->
+<template>
+  <div class="oip-patients">
+    <RmPageHeader
+      :have-return="!!backTo"
+      :back-to="backTo"
+      :eyebrow="fr ? 'Cas après vaccination' : 'Vaccine cases'"
+      :tabs="profile ? headerTabs : []"
+      :tabs-label="fr ? 'Sections de la fiche' : 'Record sections'"
+      @tab="setTab"
+    >
+      <template #title>
+        <span class="record_title">{{ profile ? profile.event_term || (fr ? "Événement non nommé" : "Event not named") : "" }}</span>
+        <slot name="title-link" />
+      </template>
+      <!-- Ranger la fiche dans le projet actif, par le bouton que l'app prete (cf. useOipResourceHooks). -->
+      <template v-if="hooks.projectButton && profile?._id" #actions>
+        <component :is="hooks.projectButton" :resource-id="profile._id" type="VaccinePatient" :label="profile.event_term" />
+      </template>
+      <div v-if="profile" class="oip_list gap-8">
+        <p class="record_subline">{{ subline }}</p>
+        <div v-if="headerTags.length" class="oip_row gap-8 wrap">
+          <RmTag v-for="tag in headerTags" :key="tag.label" :variant="tag.variant">{{ tag.label }}</RmTag>
+        </div>
+      </div>
+    </RmPageHeader>
+
+    <RmLoadingState v-if="loading" :lines="6" />
+
+    <RmErrorState
+      v-else-if="error"
+      icon="CloudWarning"
+      :title="fr ? 'Fiche indisponible' : 'Record unavailable'"
+      :text="fr ? 'L\'index des cas après vaccination n\'a pas répondu.' : 'The vaccine case index did not answer.'"
+      :action-label="fr ? 'Réessayer' : 'Retry'"
+      @action="reload()"
+    />
+
+    <RmEmptyState
+      v-else-if="!profile"
+      icon="Prohibit"
+      :title="fr ? 'Fiche introuvable' : 'Record not found'"
+      :text="fr ? `Aucune fiche ne porte l'identifiant ${id}.` : `No record has the id ${id}.`"
+    />
+
+    <div v-else-if="activeTab === 'publications'" class="oip_list gap-24 record_content">
+      <OipPatientsPublications
+        v-if="profile.pmid"
+        :lang="lang"
+        :title="fr ? 'Article source' : 'Source paper'"
+        :query="{ terms: { PubMed_ID: [String(profile.pmid)] } }"
+      />
+      <RmEmptyState v-else icon="Prohibit" :title="fr ? 'Aucun PMID sur cette fiche' : 'No PMID on this record'" />
+    </div>
+
+    <div v-else class="oip_row gap-16 record_layout">
+      <RmChaptersNav :chapters="chapters" />
+
+      <div class="oip_list gap-16 record_content">
+        <RmCallout v-if="flagNotes.length" tone="warning" icon="Warning" :text="flagNotes.join('. ')" />
+
+        <RmSectionCard v-if="summary" id="in-short">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="FileText" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "En bref" : "In short" }}</h2>
+            </div>
+          </template>
+          <p class="record_text">{{ summary }}</p>
+        </RmSectionCard>
+
+        <RmSectionCard id="vaccine">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="Syringe" :size="18" />
+              <h2 class="record_section_title">{{ exposures.length > 1 ? (fr ? "Vaccins reçus" : "Vaccines received") : fr ? "Vaccin reçu" : "Vaccine received" }}</h2>
+            </div>
+          </template>
+          <div class="oip_list gap-16">
+            <dl class="record_facts">
+              <div v-for="fact in vaccineFacts" :key="fact.title" class="oip_row v-start gap-8">
+                <RmIcon :name="fact.icon" :size="16" class="record_fact_icon" />
+                <div>
+                  <dt class="record_fact_label">{{ fact.title }}</dt>
+                  <dd class="record_fact_value">{{ fact.value }}</dd>
+                </div>
+              </div>
+            </dl>
+            <div v-for="(e, i) in exposures" :key="i" class="record_quote_block">
+              <p class="record_subtitle">
+                {{ e.product_label || (fr ? "Vaccin non nommé" : "Unnamed vaccine") }}
+                <span v-if="exposureDetails(e)" class="record_muted"> · {{ exposureDetails(e) }}</span>
+              </p>
+              <blockquote v-if="e.evidence" class="record_quote">{{ e.evidence }}</blockquote>
+            </div>
+          </div>
+        </RmSectionCard>
+
+        <RmSectionCard id="event">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="Heartbeat" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Ce qui s'est passé" : "What happened" }}</h2>
+            </div>
+          </template>
+          <div class="oip_list gap-16">
+            <dl class="record_facts">
+              <div v-for="fact in eventFacts" :key="fact.title" class="oip_row v-start gap-8">
+                <RmIcon :name="fact.icon" :size="16" class="record_fact_icon" />
+                <div>
+                  <dt class="record_fact_label">{{ fact.title }}</dt>
+                  <dd class="record_fact_value">{{ fact.value }}</dd>
+                </div>
+              </div>
+            </dl>
+            <blockquote v-if="event.evidence" class="record_quote">{{ event.evidence }}</blockquote>
+          </div>
+        </RmSectionCard>
+
+        <RmSectionCard id="causality">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="Scales" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Avis des auteurs et dose suivante" : "Authors' view and next dose" }}</h2>
+            </div>
+          </template>
+          <!-- Une ligne par question : le libelle a gauche, la reponse en
+               pastille, puis la phrase de l'article qui la porte. -->
+          <dl class="record_verdicts">
+            <div class="record_verdict">
+              <dt class="record_verdict_label">{{ fr ? "Lien avec le vaccin, selon les auteurs" : "Link to the vaccine, per the authors" }}</dt>
+              <dd class="record_verdict_value">
+                <div class="oip_row v-center gap-8 wrap">
+                  <RmTag :variant="causalityVariant">{{ vaccineLabelOf(CAUSALITY_LABELS, profile.causality_assessment || "not_assessed", lang) }}</RmTag>
+                  <span v-if="causality.scale" class="record_muted">{{ fr ? "Échelle" : "Scale" }} {{ causality.scale }}</span>
+                </div>
+                <blockquote v-if="causality.evidence" class="record_quote">{{ causality.evidence }}</blockquote>
+                <p v-else class="record_muted">{{ fr ? "L'article ne se prononce pas." : "The paper does not say." }}</p>
+              </dd>
+            </div>
+            <div class="record_verdict">
+              <dt class="record_verdict_label">{{ fr ? "Dose suivante" : "Next dose" }}</dt>
+              <dd class="record_verdict_value">
+                <div class="oip_row v-center gap-8 wrap">
+                  <RmTag :variant="rechallengeVariant">{{ vaccineLabelOf(RECHALLENGE_LABELS, profile.rechallenge || "unknown", lang) }}</RmTag>
+                </div>
+                <blockquote v-if="causality.rechallenge_text" class="record_quote">{{ causality.rechallenge_text }}</blockquote>
+                <p v-else class="record_muted">{{ fr ? "L'article ne parle pas des doses suivantes." : "The paper says nothing about further doses." }}</p>
+              </dd>
+            </div>
+            <div v-if="ruledOut.length" class="record_verdict">
+              <dt class="record_verdict_label">{{ fr ? "Autres causes écartées" : "Other causes ruled out" }}</dt>
+              <dd class="record_verdict_value">
+                <ul class="record_list">
+                  <li v-for="(item, i) in ruledOut" :key="i">
+                    <span class="record_text record_strong">{{ item.name }}</span>
+                    <blockquote v-if="item.evidence" class="record_quote">{{ item.evidence }}</blockquote>
+                  </li>
+                </ul>
+              </dd>
+            </div>
+          </dl>
+        </RmSectionCard>
+
+        <RmSectionCard id="person">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="User" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "La personne" : "The person" }}</h2>
+            </div>
+          </template>
+          <dl class="record_facts">
+            <div v-for="fact in personFacts" :key="fact.title" class="oip_row v-start gap-8">
+              <RmIcon :name="fact.icon" :size="16" class="record_fact_icon" />
+              <div>
+                <dt class="record_fact_label">{{ fact.title }}</dt>
+                <dd class="record_fact_value">{{ fact.value }}</dd>
+              </div>
+            </div>
+          </dl>
+        </RmSectionCard>
+
+        <RmSectionCard v-if="presentSigns.length || absentSigns.length" id="signs">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="FirstAidKit" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Signes et symptômes" : "Signs and symptoms" }}</h2>
+              <RmTag v-if="presentSigns.length" variant="gray">{{ presentSigns.length }}</RmTag>
+            </div>
+          </template>
+          <div class="oip_list gap-16">
+            <div v-if="presentSigns.length" class="oip_row gap-8 wrap">
+              <RmTag v-for="sign in presentSigns" :key="sign" variant="gray">{{ sign }}</RmTag>
+            </div>
+            <template v-if="absentSigns.length">
+              <p class="record_subtitle">{{ fr ? "Explicitement absents" : "Specifically absent" }}</p>
+              <div class="oip_row gap-8 wrap">
+                <RmTag v-for="sign in absentSigns" :key="sign" variant="transparent">{{ sign }}</RmTag>
+              </div>
+            </template>
+          </div>
+        </RmSectionCard>
+
+        <RmSectionCard v-if="biomarkers.length" id="tests">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="TestTube" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Résultats d'examens" : "Test results" }}</h2>
+            </div>
+          </template>
+          <ul class="record_list">
+            <li v-for="(b, i) in biomarkers" :key="i" class="oip_row v-center gap-8 wrap">
+              <span class="record_text record_strong">{{ b.name }}</span>
+              <span v-if="b.value" class="record_mono">{{ b.value }}<template v-if="b.unit"> {{ b.unit }}</template></span>
+              <RmTag v-if="b.direction === 'high' || b.direction === 'low'" :variant="b.direction === 'high' ? 'orange' : 'blue'">
+                {{ b.direction === "high" ? (fr ? "élevé" : "high") : fr ? "bas" : "low" }}
+              </RmTag>
+              <span v-if="b.reference_range && b.reference_range !== 'null'" class="record_muted">
+                ({{ fr ? "normale" : "reference" }} {{ b.reference_range }})
+              </span>
+              <span v-if="b.specimen" class="record_muted">· {{ b.specimen }}</span>
+            </li>
+          </ul>
+        </RmSectionCard>
+
+        <RmSectionCard v-if="timeline.length" id="timeline">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="ListBullets" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Chronologie" : "What happened, in order" }}</h2>
+            </div>
+          </template>
+          <ol class="record_timeline">
+            <li v-for="(step, i) in timeline" :key="i" class="record_timeline_step">
+              <span class="record_timeline_dot" />
+              <span class="record_mono record_timeline_when">{{ step.when }}</span>
+              <span class="record_text">{{ step.event }}</span>
+            </li>
+          </ol>
+        </RmSectionCard>
+
+        <RmSectionCard id="source">
+          <template #header>
+            <div class="oip_row v-center gap-8">
+              <RmIcon name="BookOpen" :size="18" />
+              <h2 class="record_section_title">{{ fr ? "Source" : "Where this came from" }}</h2>
+            </div>
+          </template>
+          <div class="oip_list gap-8">
+            <p class="record_paper_title">{{ profile.title || (fr ? "Titre non disponible" : "Title not available") }}</p>
+            <p class="record_muted">
+              {{ profile.journal }}<template v-if="profile.year"> · {{ profile.year }}</template> · PMID {{ profile.pmid }}
+            </p>
+            <a v-if="pubmedUrl" class="record_link" :href="pubmedUrl" target="_blank" rel="noopener">
+              {{ fr ? "Lire sur PubMed" : "Read on PubMed" }}
+              <RmIcon name="ArrowSquareOut" :size="12" />
+            </a>
+
+            <div v-if="samePaper.length" class="oip_list gap-8 record_siblings">
+              <p class="record_subtitle">{{ fr ? "Autres personnes du même article" : "Other people in the same paper" }}</p>
+              <div class="oip_row gap-16 wrap">
+                <!-- Dans une page, le lien navigue ; dans le tiroir d'un projet, il empile la fiche (cf. useOipResourceNav). -->
+                <a
+                  v-for="sibling in samePaper"
+                  :key="sibling.record_id"
+                  :href="nav.href('VaccinePatient', sibling.record_id)"
+                  class="record_link"
+                  @click="openSibling($event, sibling.record_id)"
+                >
+                  {{ siblingLabel(sibling) }}
+                </a>
+              </div>
+            </div>
+          </div>
+        </RmSectionCard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SEX_LABELS, patientLabel, patientLabelOf } from "../../oip-patients/labels";
+import {
+  CAUSALITY_LABELS,
+  EVENT_CATEGORY_LABELS,
+  EVENT_OUTCOME_LABELS,
+  ONSET_BAND_LABELS,
+  PATHOGEN_LABELS,
+  PLATFORM_LABELS,
+  PRODUCT_LABELS,
+  RECHALLENGE_LABELS,
+  SERIOUSNESS_LABELS,
+  SERIOUS_KEYS,
+  VACCINE_FLAG_LABELS,
+  vaccineLabelOf,
+} from "../../oip-patients/vaccineLabels";
+import { OIP_PATIENT_INDEXES } from "../../oip-patients/indexes";
+import { VACCINE_KIND } from "../../oip-patients/kinds";
+import { useCaseRecord } from "../../oip-patients/useCaseRecord";
+import { useOipResourceHooks } from "../../composables/useOipResourceHooks";
+import { useOipResourceNav } from "../../composables/useOipResourceNav";
+
+type RmTagVariant = "gray" | "blue" | "green" | "orange" | "amber" | "rose" | "purple";
+type Fact = { icon: string; title: string; value: string };
+
+const props = withDefaults(
+  defineProps<{
+    /** `record_id` du cas, ou son `_id` (le resourceId d'un projet). */
+    id: string;
+    type?: string;
+    /** Onglet ouvert : « summary » (defaut) ou « publications ». */
+    tab?: string;
+    /** Retour de la page vers sa liste. Absent (tiroir) : pas de fleche. */
+    backTo?: string;
+    highlight?: string[];
+    lang?: "fr" | "en";
+  }>(),
+  { type: "VaccinePatient", tab: "", backTo: "", highlight: () => [], lang: "fr" },
+);
+
+const emit = defineEmits<{
+  "update:tab": [tab: string];
+  record: [profile: Record<string, any> | null];
+}>();
+
+const lang = computed(() => props.lang);
+const fr = computed(() => lang.value === "fr");
+const hooks = useOipResourceHooks();
+const nav = useOipResourceNav();
+
+/** L'onglet ouvert : celui de la page, sinon le dernier choisi. */
+const activeTab = ref(props.tab === "publications" ? "publications" : "summary");
+watch(
+  () => props.tab,
+  (tab) => (activeTab.value = tab === "publications" ? "publications" : "summary"),
+);
+function setTab(key: string) {
+  activeTab.value = key === "publications" ? "publications" : "summary";
+  emit("update:tab", activeTab.value);
+}
+const headerTabs = computed(() =>
+  [
+    { key: "summary", label: fr.value ? "Résumé" : "Summary" },
+    { key: "publications", label: "Publications" },
+  ].map((tab) => ({ ...tab, active: tab.key === activeTab.value })),
+);
+
+const recordId = computed(() => props.id);
+const { profile, samePaper, loading, error, reload } = useCaseRecord(
+  OIP_PATIENT_INDEXES.VACCINE_PATIENTS,
+  recordId,
+  VACCINE_KIND.source!,
+);
+watch(profile, (value) => emit("record", value));
+
+/** Ctrl/Cmd-clic garde le vrai lien, pour un nouvel onglet. */
+function openSibling(event: MouseEvent, recordId: string) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+  event.preventDefault();
+  nav.open("VaccinePatient", recordId);
+}
+
+const t = (frText: string, enText: string) => (fr.value ? frText : enText);
+const record = computed(() => profile.value?.record ?? {});
+const block = computed(() => record.value.vaccine ?? {});
+const exposures = computed<any[]>(() => block.value.exposures ?? []);
+const event = computed(() => block.value.event ?? {});
+const causality = computed(() => block.value.causality ?? {});
+const host = computed(() => block.value.host ?? {});
+const summary = computed(() => record.value.summary || profile.value?.summary || "");
+const pubmedUrl = computed(() => (profile.value?.pmid ? `https://pubmed.ncbi.nlm.nih.gov/${profile.value.pmid}/` : undefined));
+
+/** Qui, et quand : « 25-year-old · homme · Suède · 2026 », comme sur la carte. */
+const subline = computed(() => {
+  const p = profile.value;
+  if (!p) return "";
+  const who = record.value.age_report?.text || patientLabel(p.label);
+  const parts = [who.replace(/^\p{Ll}/u, (c: string) => c.toUpperCase())];
+  if (p.sex && p.sex !== "unknown") parts.push(patientLabelOf(SEX_LABELS, p.sex, lang.value).toLowerCase());
+  if (p.country) parts.push(p.country);
+  if (p.year) parts.push(String(p.year));
+  return parts.join(" · ");
+});
+
+const headerTags = computed(() => {
+  const p = profile.value;
+  if (!p) return [];
+  const tags: { label: string; variant: RmTagVariant }[] = [];
+  const vaccine = p.vaccine_product_label || vaccineLabelOf(PRODUCT_LABELS, p.vaccine_product, lang.value);
+  if (vaccine) tags.push({ label: p.dose_number ? `${vaccine} · dose ${p.dose_number}` : vaccine, variant: "blue" });
+  if (p.vaccine_platform) tags.push({ label: vaccineLabelOf(PLATFORM_LABELS, p.vaccine_platform, lang.value), variant: "gray" });
+  const seriousness: string[] = p.seriousness ?? [];
+  if (seriousness.includes("death") || p.event_outcome === "fatal") tags.push({ label: t("Décès", "Died"), variant: "rose" });
+  else if (seriousness.some((s) => SERIOUS_KEYS.includes(s))) tags.push({ label: t("Grave", "Serious"), variant: "orange" });
+  if (p.event_outcome && !["unknown", "fatal"].includes(p.event_outcome)) {
+    tags.push({ label: vaccineLabelOf(EVENT_OUTCOME_LABELS, p.event_outcome, lang.value), variant: p.event_outcome === "recovered" ? "green" : "gray" });
+  }
+  if (p.event_category && p.event_category !== "adverse_event") {
+    tags.push({ label: vaccineLabelOf(EVENT_CATEGORY_LABELS, p.event_category, lang.value), variant: "purple" });
+  }
+  if (p.evidence_basis === "secondary") tags.push({ label: t("Cas déjà publié", "Re-report"), variant: "amber" });
+  return tags;
+});
+
+const flagNotes = computed<string[]>(() =>
+  (profile.value?.vaccine_flags ?? []).map((flag: string) => vaccineLabelOf(VACCINE_FLAG_LABELS, flag, lang.value)),
+);
+
+/** Ajoute un fait, sauf ce que l'article n'a pas dit. */
+function collect(fill: (add: (icon: string, title: string, value?: string | number | null) => void) => void): Fact[] {
+  const rows: Fact[] = [];
+  fill((icon, title, value) => {
+    if (value !== null && value !== undefined && value !== "") rows.push({ icon, title, value: String(value) });
+  });
+  return rows;
+}
+
+const vaccineFacts = computed(() =>
+  collect((add) => {
+    const p = profile.value!;
+    add("ShieldCheck", t("Protège contre", "Protects against"), vaccineLabelOf(PATHOGEN_LABELS, p.vaccine_pathogen, lang.value));
+    add("Package", t("Produit", "Product"), vaccineLabelOf(PRODUCT_LABELS, p.vaccine_product, lang.value));
+    add("Flask", t("Type de vaccin", "Vaccine type"), vaccineLabelOf(PLATFORM_LABELS, p.vaccine_platform, lang.value));
+    add("NumberCircleOne", t("Dose", "Dose"), p.dose_number);
+    add("Barcode", t("Code ATC", "ATC code"), p.vaccine_atc);
+  }),
+);
+
+function exposureDetails(e: any): string {
+  return [
+    e.manufacturer,
+    e.dose_number ? `dose ${e.dose_number}` : "",
+    e.route,
+    e.lot ? `lot ${e.lot}` : "",
+    e.co_administered?.length ? `${t("avec", "given with")} ${e.co_administered.join(", ")}` : "",
+  ]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+const eventFacts = computed(() =>
+  collect((add) => {
+    const p = profile.value!;
+    const band = p.time_to_onset_band && p.time_to_onset_band !== "unknown" ? vaccineLabelOf(ONSET_BAND_LABELS, p.time_to_onset_band, lang.value) : "";
+    add("Tag", t("Type de cas", "Kind of report"), vaccineLabelOf(EVENT_CATEGORY_LABELS, p.event_category, lang.value));
+    add("Timer", t("Délai après la dose", "Delay after the dose"), [event.value.time_to_onset_text, band ? `(${band.toLowerCase()})` : ""].filter(Boolean).join(" ") || t("Non précisé", "Not stated"));
+    add("Warning", t("Gravité", "Seriousness"), (p.seriousness ?? []).map((s: string) => vaccineLabelOf(SERIOUSNESS_LABELS, s, lang.value)).join(", "));
+    add("Pulse", t("Évolution", "Outcome"), vaccineLabelOf(EVENT_OUTCOME_LABELS, p.event_outcome || "unknown", lang.value));
+    add("MagnifyingGlass", t("Diagnostic", "How it was diagnosed"), event.value.diagnostic_certainty);
+    add("Pill", t("Traitements", "Treated with"), (event.value.treatment ?? []).join(", "));
+  }),
+);
+
+/** Plus le lien est affirme, plus la pastille est chaude ; « non discute » reste neutre. */
+const causalityVariant = computed<RmTagVariant>(() => {
+  const v = profile.value?.causality_assessment;
+  if (v === "certain" || v === "probable") return "orange";
+  if (v === "possible") return "amber";
+  if (v === "unlikely") return "green";
+  return "gray";
+});
+
+/** Une recidive a la dose suivante est le signal fort ; une dose bien toleree rassure. */
+const rechallengeVariant = computed<RmTagVariant>(() => {
+  const v = profile.value?.rechallenge;
+  if (v === "re_vaccinated_recurrence") return "rose";
+  if (v === "advised_against") return "orange";
+  if (v === "re_vaccinated_no_event") return "green";
+  return "gray";
+});
+
+const ruledOut = computed<{ name: string; evidence?: string }[]>(() => {
+  const fromRecord = (record.value.ruled_out ?? []).map((r: any) => ({ name: r.disease, evidence: r.evidence })).filter((r: any) => r.name);
+  const named = new Set(fromRecord.map((r: any) => r.name.toLowerCase()));
+  const fromBlock = (causality.value.alternatives_excluded ?? [])
+    .filter((name: string) => !named.has(name.toLowerCase()))
+    .map((name: string) => ({ name }));
+  return [...fromRecord, ...fromBlock];
+});
+
+const personFacts = computed(() =>
+  collect((add) => {
+    const p = profile.value!;
+    const h = host.value;
+    add(p.sex === "female" ? "GenderFemale" : "GenderMale", t("Sexe", "Sex"), p.sex && p.sex !== "unknown" ? patientLabelOf(SEX_LABELS, p.sex, lang.value) : null);
+    add("Clock", t("Âge à la description", "Age when reported"), record.value.age_report?.text);
+    add("GlobeHemisphereWest", t("Pays", "Country"), p.country);
+    add("User", t("Origine", "Background"), record.value.ethnicity);
+    if (h.immunosuppressed_at_vaccination != null) {
+      add("ShieldWarning", t("Immunité lors de la vaccination", "Immune system at vaccination"), h.immunosuppressed_at_vaccination ? t("Affaiblie", "Weakened") : t("Non affaiblie", "Not weakened"));
+    }
+    if (h.pregnant) add("Baby", t("Grossesse", "Pregnancy"), h.pregnancy_weeks ? t(`Oui, ${h.pregnancy_weeks} semaines`, `Yes, ${h.pregnancy_weeks} weeks`) : t("Oui", "Yes"));
+    add("Virus", t("Infection antérieure", "Earlier infection"), h.prior_infection);
+    add("ClipboardText", t("Antécédents", "Relevant history"), h.relevant_history);
+    add("Users", t("Antécédents familiaux", "Family history"), record.value.family_history);
+  }),
+);
+
+const presentSigns = computed<string[]>(() =>
+  (record.value.phenotypes ?? []).filter((s: any) => s.present !== false).map((s: any) => s.label || s.hpo_id).filter(Boolean),
+);
+const absentSigns = computed<string[]>(() =>
+  (record.value.phenotypes ?? []).filter((s: any) => s.present === false).map((s: any) => s.label || s.hpo_id).filter(Boolean),
+);
+const biomarkers = computed<any[]>(() => (record.value.biomarkers ?? []).filter((b: any) => b.name));
+
+/** Le pipeline vaccin range le delai dans `offset_text` (« 2 weeks before collapse ») plutot qu'en age. */
+const timeline = computed(() =>
+  (record.value.timeline ?? [])
+    .filter((step: any) => step.event)
+    .map((step: any) => ({ when: step.offset_text || step.age?.text || "?", event: step.event })),
+);
+
+function siblingLabel(sibling: Record<string, any>) {
+  const label = patientLabel(sibling.label) || sibling.record_id;
+  return sibling.event_term ? `${label} (${sibling.event_term})` : label;
+}
+
+/** Seules les sections rendues : un chapitre qui ne mene nulle part est un lien mort. */
+const chapters = computed(() => {
+  const list: { label: string; value: string }[] = [];
+  if (summary.value) list.push({ label: t("En bref", "In short"), value: "in-short" });
+  list.push({ label: t("Vaccin", "Vaccine"), value: "vaccine" });
+  list.push({ label: t("Ce qui s'est passé", "What happened"), value: "event" });
+  list.push({ label: t("Avis des auteurs", "Authors' view"), value: "causality" });
+  list.push({ label: t("La personne", "The person"), value: "person" });
+  if (presentSigns.value.length || absentSigns.value.length) list.push({ label: t("Signes", "Signs"), value: "signs" });
+  if (biomarkers.value.length) list.push({ label: t("Examens", "Tests"), value: "tests" });
+  if (timeline.value.length) list.push({ label: t("Chronologie", "Timeline"), value: "timeline" });
+  list.push({ label: "Source", value: "source" });
+  return list;
+});
+
+</script>
+
+<style scoped>
+.record_layout {
+  align-items: flex-start;
+  width: 100%;
+}
+
+/* Sans min-width, l'item flex ne descend pas sous son enfant le plus large. */
+.record_content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.record_subline {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.record_title {
+  display: block;
+}
+
+.record_section_title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.record_text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--text-primary);
+}
+
+.record_strong {
+  font-weight: 600;
+}
+
+.record_muted {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-muted);
+}
+
+.record_subtitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.record_facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px 24px;
+  margin: 0;
+}
+
+.record_fact_icon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--text-muted);
+}
+
+.record_fact_label {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.record_fact_value {
+  margin: 2px 0 0;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.record_quote_block {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* La phrase de l'article, telle quelle : un filet la distingue de ce que la fiche en tire. */
+.record_quote {
+  margin: 0;
+  padding: 2px 0 2px 12px;
+  border-left: 3px solid var(--border-default);
+  font-size: 13px;
+  font-style: italic;
+  line-height: 1.5;
+  color: var(--text-secondary);
+}
+
+.record_verdicts {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.record_verdict {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr);
+  gap: 16px;
+  padding: 14px 0;
+}
+
+.record_verdict:first-child {
+  padding-top: 0;
+}
+
+.record_verdict:last-child {
+  padding-bottom: 0;
+}
+
+.record_verdict + .record_verdict {
+  border-top: 1px solid var(--border-default);
+}
+
+.record_verdict_label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.record_verdict_value {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+}
+
+@media (max-width: 640px) {
+  .record_verdict {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+}
+
+.record_list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.record_list .record_quote {
+  margin-top: 4px;
+}
+
+.record_mono {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 13px;
+}
+
+/* Un rail relie les points : l'ordre se lit comme une suite, pas comme une liste. */
+.record_timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.record_timeline_step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding-bottom: 12px;
+}
+
+.record_timeline_step:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 14px;
+  bottom: 0;
+  width: 1px;
+  background: var(--border-default);
+}
+
+.record_timeline_dot {
+  flex-shrink: 0;
+  width: 9px;
+  height: 9px;
+  margin-top: 5px;
+  border-radius: 50%;
+  background: var(--primary);
+}
+
+.record_timeline_when {
+  flex-shrink: 0;
+  min-width: 150px;
+}
+
+.record_paper_title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.record_link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  font-size: 13px;
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.record_siblings {
+  margin-top: 8px;
+}
+</style>