Investor UX: full EN localization, story ribbon, signal grouping, provenance drawer

- /state?lang=en localizes deterministic signal details and L3 decision
reasons (same finite catalogs: interactions detail_en, EN templates in
l1_safety/l2a_trends/l3_router); UI refetches on language toggle
- LOINC->label map localizes metric names client-side
- story ribbon (dismissible) narrates the caught warfarin+aspirin
interaction; headline alert + L1/L2a signal groups
- provenance drawer: click a source doc chip -> exact extracted span
highlighted in the source document (GET /document/{id} + span in /state)
- trust strip (no cloud LLM / deterministic rules / FHIR / local-first)
and footer links (GitHub, traces.solutions, TRACE arXiv)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

livemedcard/api.py

@@ -266,14 +266,26 @@ def signals():
         return _state.card.current_signals()
 
 
+@app.get("/document/{doc_id}")
+def document(doc_id: str):
+    """Free-text іпостась документа (вузол графа) — для span-провенансу в UI."""
+    with _state.lock:
+        node = _state.card.graph.g.nodes.get(f"Document/{doc_id}")
+        if node is None or "text" not in node:
+            raise HTTPException(status_code=404, detail=f"Документ {doc_id} не знайдено")
+        return {"id": doc_id, "text": node["text"]}
+
+
 @app.get("/state")
-def state():
-    """Агрегований знімок картки для інтерфейсу."""
+def state(lang: str = "uk"):
+    """Агрегований знімок картки для інтерфейсу (`lang=uk|en` — мова текстів сигналів)."""
+    lang = "en" if lang == "en" else "uk"
     with _state.lock:
         card = _state.card
-        sigs = card.current_signals()
+        sigs = card.current_signals(lang)
         # Рішення L3 над поточним станом (сигнали детерміновані → впевненість 1.0).
-        decision = l3_router.route(sigs, 1.0, "стан картки")
+        doc_kind = "card state" if lang == "en" else "стан картки"
+        decision = l3_router.route(sigs, 1.0, doc_kind, lang)
         sex = card.patient.gender
 
         series = []
@@ -287,7 +299,8 @@ def state():
                 "low": ref.low if ref else None,
                 "high": ref.high if ref else None,
                 "points": [
-                    {"ts": p.ts.date().isoformat(), "value": p.value, "source": p.source_doc_id}
+                    {"ts": p.ts.date().isoformat(), "value": p.value,
+                     "source": p.source_doc_id, "span": p.source_span}
                     for p in pts
                 ],
             })

livemedcard/data/interactions.json

@@ -1,13 +1,17 @@
 {
-  "_note": "Демо-підмножина взаємодій. У проді — відкрита БД RxNorm/NLM. Коди RxNorm. Поле detail — лише механізм; назви препаратів додає L1 з фактичних ресурсів.",
+  "_note": "Демо-підмножина взаємодій. У проді — відкрита БД RxNorm/NLM. Коди RxNorm. Поля detail/detail_en — лише механізм (UA/EN); назви препаратів додає L1 з фактичних ресурсів.",
   "pairs": [
     {"a": "11289", "b": "1191", "severity": "major",
-     "detail": "сумація антитромботичного ефекту, підвищений ризик кровотечі"},
+     "detail": "сумація антитромботичного ефекту, підвищений ризик кровотечі",
+     "detail_en": "additive antithrombotic effect, increased bleeding risk"},
     {"a": "11289", "b": "703", "severity": "major",
-     "detail": "аміодарон інгібує метаболізм варфарину, ризик кровотечі"},
+     "detail": "аміодарон інгібує метаболізм варфарину, ризик кровотечі",
+     "detail_en": "amiodarone inhibits warfarin metabolism, bleeding risk"},
     {"a": "11289", "b": "5640", "severity": "major",
-     "detail": "підвищений ризик шлунково-кишкової кровотечі"},
+     "detail": "підвищений ризик шлунково-кишкової кровотечі",
+     "detail_en": "increased risk of gastrointestinal bleeding"},
     {"a": "5640", "b": "29046", "severity": "moderate",
-     "detail": "зниження антигіпертензивного ефекту та ризик для нирок"}
+     "detail": "зниження антигіпертензивного ефекту та ризик для нирок",
+     "detail_en": "reduced antihypertensive effect and risk to the kidneys"}
   ]
 }

livemedcard/data/reference_ranges.json

@@ -1,21 +1,21 @@
 {
-  "_note": "Референсні межі показників. Коди LOINC. default — загальні межі; by_sex — уточнення за статтю.",
+  "_note": "Референсні межі показників. Коди LOINC. keyword/keyword_en — назва UA/EN. default — загальні межі; by_sex — уточнення за статтю.",
   "ranges": {
     "2160-0": {
-      "keyword": "Креатинін", "unit": "µmol/L",
+      "keyword": "Креатинін", "keyword_en": "Creatinine", "unit": "µmol/L",
       "default": {"low": 44, "high": 106},
       "by_sex": {"female": {"low": 44, "high": 90}, "male": {"low": 62, "high": 106}}
     },
-    "4548-4": {"keyword": "HbA1c", "unit": "%", "default": {"low": 4.0, "high": 6.0}},
-    "2823-3": {"keyword": "Калій", "unit": "mmol/L", "default": {"low": 3.5, "high": 5.1}},
-    "8480-6": {"keyword": "Систолічний тиск", "unit": "mmHg", "default": {"low": 90, "high": 140}},
-    "2345-7": {"keyword": "Глюкоза", "unit": "mmol/L", "default": {"low": 3.9, "high": 6.1}},
+    "4548-4": {"keyword": "HbA1c", "keyword_en": "HbA1c", "unit": "%", "default": {"low": 4.0, "high": 6.0}},
+    "2823-3": {"keyword": "Калій", "keyword_en": "Potassium", "unit": "mmol/L", "default": {"low": 3.5, "high": 5.1}},
+    "8480-6": {"keyword": "Систолічний тиск", "keyword_en": "Systolic BP", "unit": "mmHg", "default": {"low": 90, "high": 140}},
+    "2345-7": {"keyword": "Глюкоза", "keyword_en": "Glucose", "unit": "mmol/L", "default": {"low": 3.9, "high": 6.1}},
     "718-7": {
-      "keyword": "Гемоглобін", "unit": "g/L",
+      "keyword": "Гемоглобін", "keyword_en": "Hemoglobin", "unit": "g/L",
       "default": {"low": 120, "high": 160},
       "by_sex": {"female": {"low": 120, "high": 150}, "male": {"low": 130, "high": 170}}
     },
-    "1742-6": {"keyword": "АЛТ", "unit": "U/L", "default": {"low": 0, "high": 41}},
-    "2093-3": {"keyword": "Холестерин загальний", "unit": "mmol/L", "default": {"low": 0, "high": 5.2}}
+    "1742-6": {"keyword": "АЛТ", "keyword_en": "ALT", "unit": "U/L", "default": {"low": 0, "high": 41}},
+    "2093-3": {"keyword": "Холестерин загальний", "keyword_en": "Total cholesterol", "unit": "mmol/L", "default": {"low": 0, "high": 5.2}}
   }
 }

livemedcard/layers/l1_safety.py

@@ -21,18 +21,20 @@ def _pair_map() -> dict[frozenset[str], Interaction]:
     return {entry.pair(): entry for entry in load_interactions()}
 
 
-def _display_name(m: MedicationRequest) -> str:
-    """Назва препарату для тексту сигналу: text CodeableConcept → display coding → RxNorm-код."""
+def _display_name(m: MedicationRequest, lang: str = "uk") -> str:
+    """Назва препарату для тексту сигналу.
+
+    uk: text CodeableConcept (мова документа) → display coding → RxNorm-код.
+    en: display coding (у vocab він англомовний) → text → RxNorm-код.
+    """
     cc = m.medicationCodeableConcept
-    if cc.text:
-        return cc.text
-    for c in cc.coding:
-        if c.display:
-            return c.display
-    return rxnorm_of(m) or m.id
+    display = next((c.display for c in cc.coding if c.display), None)
+    if lang == "en":
+        return display or cc.text or rxnorm_of(m) or m.id
+    return cc.text or display or rxnorm_of(m) or m.id
 
 
-def check_interactions(meds: list[MedicationRequest]) -> list[Signal]:
+def check_interactions(meds: list[MedicationRequest], lang: str = "uk") -> list[Signal]:
     """Перевірка кожної неупорядкованої пари ліків на відому взаємодію (RxNorm)."""
     pair_map = _pair_map()
     signals: list[Signal] = []
@@ -43,13 +45,14 @@ def check_interactions(meds: list[MedicationRequest]) -> list[Signal]:
         entry = pair_map.get(frozenset((rx1, rx2)))
         if entry is None:
             continue
-        name1, name2 = _display_name(m1), _display_name(m2)
+        name1, name2 = _display_name(m1, lang), _display_name(m2, lang)
+        mechanism = entry.detail_en if lang == "en" and entry.detail_en else entry.detail
         signals.append(
             Signal(
                 layer="L1",
                 kind="interaction",
                 severity=entry.severity,
-                detail=f"{name1} + {name2}: {entry.detail}",
+                detail=f"{name1} + {name2}: {mechanism}",
                 subjects=[f"MedicationRequest/{m1.id}", f"MedicationRequest/{m2.id}"],
                 confidence=1.0,
             )
@@ -57,7 +60,7 @@ def check_interactions(meds: list[MedicationRequest]) -> list[Signal]:
     return signals
 
 
-def check_dose_limits(meds: list[MedicationRequest]) -> list[Signal]:
+def check_dose_limits(meds: list[MedicationRequest], lang: str = "uk") -> list[Signal]:
     """Перевірка кожних ліків на перевищення максимальної добової дози (RxNorm)."""
     limits = load_dose_limits()
     signals: list[Signal] = []
@@ -69,16 +72,24 @@ def check_dose_limits(meds: list[MedicationRequest]) -> list[Signal]:
             continue
         limit = limits[rx]
         if m.dose_mg_per_day > limit.max_daily:
+            if lang == "en":
+                detail = (
+                    f"{_display_name(m, 'en')}: daily dose {m.dose_mg_per_day:g} "
+                    f"{limit.unit} exceeds the daily limit of "
+                    f"{limit.max_daily:g} {limit.unit}"
+                )
+            else:
+                detail = (
+                    f"{limit.name}: добова доза {m.dose_mg_per_day:g} "
+                    f"{limit.unit} — перевищено добову межу "
+                    f"{limit.max_daily:g} {limit.unit}"
+                )
             signals.append(
                 Signal(
                     layer="L1",
                     kind="dose_limit",
                     severity="major",
-                    detail=(
-                        f"{limit.name}: добова доза {m.dose_mg_per_day:g} "
-                        f"{limit.unit} — перевищено добову межу "
-                        f"{limit.max_daily:g} {limit.unit}"
-                    ),
+                    detail=detail,
                     subjects=[f"MedicationRequest/{m.id}"],
                     confidence=1.0,
                 )
@@ -86,6 +97,6 @@ def check_dose_limits(meds: list[MedicationRequest]) -> list[Signal]:
     return signals
 
 
-def run(meds: list[MedicationRequest]) -> list[Signal]:
+def run(meds: list[MedicationRequest], lang: str = "uk") -> list[Signal]:
     """Повний прогін L1: взаємодії + межі доз, у стабільному порядку."""
-    return check_interactions(meds) + check_dose_limits(meds)
+    return check_interactions(meds, lang) + check_dose_limits(meds, lang)

livemedcard/layers/l2a_trends.py

@@ -17,7 +17,16 @@ def _fmt(v: float) -> str:
     return f"{v:g}"
 
 
-def detect_trends(store: FactStore) -> list[Signal]:
+def _keyword_for(loinc: str, fallback: str, lang: str) -> str:
+    """Назва показника мовою відповіді: keyword_en з довідника меж, інакше — з факту."""
+    if lang == "en":
+        ref = range_for(loinc, None)
+        if ref is not None and ref.keyword_en:
+            return ref.keyword_en
+    return fallback
+
+
+def detect_trends(store: FactStore, lang: str = "uk") -> list[Signal]:
     """Стійкий монотонний тренд (>=3 вимірювань, всі зростають або всі спадають)."""
     signals: list[Signal] = []
     for loinc in store.loincs():
@@ -31,13 +40,22 @@ def detect_trends(store: FactStore) -> list[Signal]:
         falling = all(a >= b for a, b in zip(values, values[1:])) and values[-1] < values[0]
         if not (rising or falling):
             continue
-        direction = "зростає" if rising else "знижується"
         first, last = series[0], series[-1]
-        detail = (
-            f"{first.keyword} {direction} {len(series)} вимірювань поспіль: "
-            f"{_fmt(first.value)}→{_fmt(last.value)} "
-            f"({first.ts.date().isoformat()}..{last.ts.date().isoformat()})"
-        )
+        keyword = _keyword_for(loinc, first.keyword, lang)
+        if lang == "en":
+            direction = "rising" if rising else "falling"
+            detail = (
+                f"{keyword} {direction} {len(series)} measurements in a row: "
+                f"{_fmt(first.value)}→{_fmt(last.value)} "
+                f"({first.ts.date().isoformat()}..{last.ts.date().isoformat()})"
+            )
+        else:
+            direction = "зростає" if rising else "знижується"
+            detail = (
+                f"{keyword} {direction} {len(series)} вимірювань поспіль: "
+                f"{_fmt(first.value)}→{_fmt(last.value)} "
+                f"({first.ts.date().isoformat()}..{last.ts.date().isoformat()})"
+            )
         signals.append(
             Signal(
                 layer="L2a",
@@ -51,7 +69,9 @@ def detect_trends(store: FactStore) -> list[Signal]:
     return signals
 
 
-def detect_range_breaches(store: FactStore, sex: Optional[str] = None) -> list[Signal]:
+def detect_range_breaches(
+    store: FactStore, sex: Optional[str] = None, lang: str = "uk"
+) -> list[Signal]:
     """Останнє значення показника поза референсною межею (з урахуванням статі)."""
     signals: list[Signal] = []
     for loinc in store.loincs():
@@ -65,14 +85,15 @@ def detect_range_breaches(store: FactStore, sex: Optional[str] = None) -> list[S
         # останній доданий), щоб L2a і Q&A узгоджено бачили те саме значення.
         latest = series[-1]
         if latest.value < ref.low:
-            direction = "нижче норми"
+            direction = "below range" if lang == "en" else "нижче норми"
         elif latest.value > ref.high:
-            direction = "вище норми"
+            direction = "above range" if lang == "en" else "вище норми"
         else:
             continue
         unit = latest.unit or ref.unit or ""
+        keyword = (ref.keyword_en if lang == "en" and ref.keyword_en else ref.keyword)
         detail = (
-            f"{ref.keyword} {_fmt(latest.value)} {unit} {direction} "
+            f"{keyword} {_fmt(latest.value)} {unit} {direction} "
             f"({_fmt(ref.low)}–{_fmt(ref.high)})"
         )
         signals.append(
@@ -88,6 +109,6 @@ def detect_range_breaches(store: FactStore, sex: Optional[str] = None) -> list[S
     return signals
 
 
-def run(store: FactStore, sex: Optional[str] = None) -> list[Signal]:
+def run(store: FactStore, sex: Optional[str] = None, lang: str = "uk") -> list[Signal]:
     """Усі сигнали L2a: тренди + порушення референсних меж."""
-    return detect_trends(store) + detect_range_breaches(store, sex)
+    return detect_trends(store, lang) + detect_range_breaches(store, sex, lang)

livemedcard/layers/l3_router.py

@@ -19,7 +19,12 @@ from ..dto import Decision, Severity, Signal, severity_rank
 __all__ = ["route", "LOW_CONFIDENCE"]
 
 
-def route(signals: list[Signal], extraction_confidence: float, doc_kind: str) -> Decision:
+def route(
+    signals: list[Signal],
+    extraction_confidence: float,
+    doc_kind: str,
+    lang: str = "uk",
+) -> Decision:
     """Приймає рішення про маршрут документа: "auto" чи "L4_human"."""
     top: Optional[Signal] = max(
         signals, key=lambda s: severity_rank(s.severity), default=None
@@ -30,22 +35,31 @@ def route(signals: list[Signal], extraction_confidence: float, doc_kind: str) ->
     low_confidence = extraction_confidence < LOW_CONFIDENCE
     escalate = high_risk or low_confidence
 
+    en = lang == "en"
     reasons: list[str] = []
     if high_risk and top is not None:
         reasons.append(
+            f"Deterministic “{top.severity}” signal ({top.kind}) — "
+            f"human decision required regardless of extraction confidence"
+            if en else
             f"Детермінований сигнал рівня «{top.severity}» ({top.kind}) — "
             f"рішення за людиною незалежно від впевненості витягу"
         )
     if low_confidence:
         reasons.append(
+            f"Low extraction confidence ({extraction_confidence:.2f}) — "
+            f"human review required"
+            if en else
             f"Низька впевненість витягу ({extraction_confidence:.2f}) — "
             f"потрібна перевірка людиною"
         )
     if not escalate:
         reasons.append(
+            "No high-risk signals, extraction confident — automatic processing"
+            if en else
             "Немає сигналів високого ризику, витяг впевнений — автоматична обробка"
         )
-    reasons.append(f"Тип документа: {doc_kind}")
+    reasons.append(f"Document type: {doc_kind}" if en else f"Тип документа: {doc_kind}")
 
     return Decision(
         route_to="L4_human" if escalate else "auto",

livemedcard/pipeline.py

@@ -98,10 +98,10 @@ class LiveMedCard:
             self._docref_ids.add(dref.id)
 
     # ── L1 + L2a на поточному стані сховищ ────────────────────────────────────
-    def current_signals(self) -> list[Signal]:
-        """Детерміновані сигнали над усім накопиченим станом."""
-        return l1_safety.run(self._medications) + l2a_trends.run(
-            self.factstore, self.patient.gender
+    def current_signals(self, lang: str = "uk") -> list[Signal]:
+        """Детерміновані сигнали над усім накопиченим станом (тексти — UA/EN)."""
+        return l1_safety.run(self._medications, lang) + l2a_trends.run(
+            self.factstore, self.patient.gender, lang
         )
 
     def ingest(self, doc: Document) -> TraceReport:

livemedcard/refmodels.py

@@ -25,6 +25,7 @@ class Interaction(FrozenModel):
     b: str  # RxNorm
     severity: Severity
     detail: str
+    detail_en: str = ""  # англомовний механізм (для /state?lang=en)
 
     def pair(self) -> frozenset[str]:
         return frozenset((self.a, self.b))
@@ -46,6 +47,7 @@ class RangeSpec(FrozenModel):
     """Референсні межі показника з опціональними варіантами за статтю."""
 
     keyword: str
+    keyword_en: str = ""  # англомовна назва показника (для /state?lang=en)
     unit: str
     default: Bounds
     by_sex: dict[str, Bounds] = {}
@@ -53,7 +55,7 @@ class RangeSpec(FrozenModel):
     def resolve(self, sex: Optional[str]) -> "RefRange":
         bounds = self.by_sex.get(sex or "", self.default)
         return RefRange(
-            keyword=self.keyword, unit=self.unit,
+            keyword=self.keyword, keyword_en=self.keyword_en, unit=self.unit,
             low=bounds.low, high=bounds.high,
             sex=sex if (sex and sex in self.by_sex) else None,
         )
@@ -63,6 +65,7 @@ class RefRange(FrozenModel):
     """Розвʼязані межі для конкретного пацієнта (стать враховано)."""
 
     keyword: str
+    keyword_en: str = ""
     unit: str
     low: float
     high: float

livemedcard/static/index.html

@@ -113,6 +113,23 @@
   button.ghost{background:transparent}
   button:disabled{opacity:.55;cursor:default;transform:none}
 
+  /* ── story ribbon (investor orientation; shown only with an interaction alert) */
+  .story{display:none;align-items:flex-start;gap:12px;margin:0 0 4px;padding:13px 16px;
+    background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--major);
+    border-radius:13px;box-shadow:var(--shadow);animation:rise .5s .1s both}
+  .story.show{display:flex}
+  .story .txt{font-size:13.5px;line-height:1.55}
+  .story b{color:var(--major)}
+  .story .x{flex:0 0 auto;margin-left:auto;background:none;border:none;color:var(--faint);
+    font-size:17px;line-height:1;padding:2px 6px;cursor:pointer}
+  .story .x:hover{color:var(--ink);transform:none}
+
+  /* ── trust strip + footer links ─────────────────────── */
+  .trust{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
+  .trust span{font:600 11px/1 var(--mono);color:var(--muted);border:1px solid var(--line);
+    border-radius:999px;padding:6px 12px;background:var(--panel)}
+  .flinks{margin-top:10px;font-family:var(--mono);font-size:11.5px}
+
   /* ── layout ─────────────────────────────────────────── */
   .grid{display:grid;grid-template-columns:1fr;gap:18px}
   @media(min-width:900px){.grid{grid-template-columns:1.18fr .82fr}}
@@ -145,6 +162,9 @@
   .status{font-size:11.5px;font-weight:700}
   .status.ok{color:var(--ok)} .status.high{color:var(--major)} .status.low{color:var(--moderate)}
   .metric .src{color:var(--faint);font-size:11px;margin-top:7px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+  .srcchip{font:600 10.5px/1 var(--mono);color:var(--muted);background:transparent;
+    border:1px solid var(--line);border-radius:999px;padding:3px 9px;cursor:pointer;transition:.14s}
+  .srcchip:hover{color:var(--accent);border-color:var(--accent);transform:none}
   .lang{font:700 10px/1 var(--mono);padding:2px 5px;border-radius:5px;border:1px solid var(--line)}
   .lang.ua{color:var(--accent)} .lang.en{color:#5e9dff}
   .spark{margin-top:9px}
@@ -163,8 +183,20 @@
     font-size:12px;font-weight:700;color:#fff}
   .decision .t{font:600 12.5px/1 var(--mono);color:var(--muted);margin-left:auto}
   .reasons{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:12.5px;flex-basis:100%}
-  .sig{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--line)}
-  .sig:first-of-type{border-top:none;padding-top:2px}
+  .sig{display:flex;gap:11px;padding:12px 0}
+  .sig + .sig{border-top:1px solid var(--line)}
+  .siggroup{font:600 10px/1 var(--mono);color:var(--faint);text-transform:uppercase;
+    letter-spacing:.08em;margin:12px 0 3px;padding-top:10px;border-top:1px solid var(--line)}
+  .sig.headline{border:1px solid color-mix(in srgb,var(--major) 45%,var(--line));
+    border-left:4px solid var(--major);border-radius:12px;padding:13px 14px;margin-bottom:6px;
+    background:color-mix(in srgb,var(--major) 8%,transparent);
+    animation:rise .45s .5s both, alertland 1.4s 1s 1}
+  .sig.headline + .sig{border-top:none}
+  .sig.headline .d{font-size:14.5px;font-weight:600}
+  @keyframes alertland{
+    0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--major) 45%,transparent)}
+    60%{box-shadow:0 0 0 13px transparent}
+    100%{box-shadow:0 0 0 0 transparent}}
   .sig .dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;margin-top:4px;position:relative}
   .sig.hot .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
     border:2px solid currentColor;opacity:.5;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@@ -214,8 +246,31 @@
     text-align:center;font-size:13px;color:var(--muted)}
   .dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
 
-  footer{color:var(--faint);font-size:12px;margin-top:30px;text-align:center;line-height:1.6}
+  footer{color:var(--faint);font-size:12px;margin-top:14px;text-align:center;line-height:1.6}
   footer b{color:var(--muted)}
+
+  /* ── provenance drawer (click a value → the exact sentence in its source) */
+  .drawer-back{position:fixed;inset:0;background:rgba(4,9,13,.5);opacity:0;pointer-events:none;
+    transition:.25s;z-index:60}
+  .drawer-back.show{opacity:1;pointer-events:auto}
+  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);background:var(--panel);
+    border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(0,0,0,.35);z-index:61;
+    transform:translateX(103%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
+    display:flex;flex-direction:column}
+  .drawer.show{transform:none}
+  .drawer .head{display:flex;align-items:center;gap:10px;padding:15px 18px;
+    border-bottom:1px solid var(--line)}
+  .drawer .head h3{margin:0;font:600 13.5px/1.3 var(--mono);color:var(--ink);word-break:break-all}
+  .drawer .close{margin-left:auto;flex:0 0 auto;background:none;border:1px solid var(--line);
+    border-radius:9px;width:32px;height:32px;color:var(--muted);font-size:15px;line-height:1;
+    cursor:pointer;display:grid;place-items:center}
+  .drawer .close:hover{color:var(--ink);border-color:var(--accent);transform:none}
+  .drawer .cap{padding:10px 18px 0;color:var(--faint);font-size:11.5px}
+  .drawer .body{padding:14px 18px 20px;overflow:auto;white-space:pre-wrap;
+    font-size:13.5px;line-height:1.75;color:var(--muted)}
+  .drawer .body mark{background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--ink);
+    border-radius:4px;padding:1px 3px;font-weight:650;
+    box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
   .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
     background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:11px;font-weight:600;font-size:13.5px;
     box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transition:.28s;pointer-events:none;z-index:50}
@@ -288,6 +343,11 @@
     </div>
   </div>
 
+  <div class="story" id="story" role="note">
+    <span class="txt" id="story-text"></span>
+    <button class="x" id="story-x" aria-label="Dismiss">×</button>
+  </div>
+
   <div class="grid" style="margin-top:18px">
     <section class="panel d1">
       <h2><span id="h-series">Metrics timeline</span> <span class="tag" id="bi-tag" style="display:none">bilingual · UA + EN</span></h2>
@@ -317,9 +377,19 @@
     <div class="chips" id="chips"></div>
   </section>
 
+  <div class="trust" id="trust"></div>
   <footer id="site-footer">Prototype for <b>Digital Future Hackathon</b> · Aging &amp; Longevity track.<br>
     The system structures facts and shows trends — <b>it does not diagnose or prescribe treatment</b>.</footer>
 </div>
+<div class="drawer-back" id="drawer-back"></div>
+<aside class="drawer" id="drawer" role="dialog" aria-modal="true" aria-labelledby="drawer-title">
+  <div class="head">
+    <h3 id="drawer-title"></h3>
+    <button class="close" id="drawer-close" aria-label="Close">×</button>
+  </div>
+  <div class="cap" id="drawer-cap"></div>
+  <div class="body" id="drawer-body"></div>
+</aside>
 <div class="toast" id="toast"></div>
 
 <script>
@@ -333,6 +403,19 @@ const LANG_KEY='lmc_lang';
 let LANG = localStorage.getItem(LANG_KEY) || 'en';
 let lastState = null;
 
+/* Назви показників за LOINC (таймлайн локалізується на клієнті; /state віддає loinc) */
+const LOINC_LABEL = {
+  '2160-0':{en:'Creatinine',ua:'Креатинін'},
+  '2823-3':{en:'Potassium',ua:'Калій'},
+  '4548-4':{en:'HbA1c',ua:'Глікований гемоглобін'},
+  '2345-7':{en:'Glucose',ua:'Глюкоза'},
+  '718-7':{en:'Hemoglobin',ua:'Гемоглобін'},
+  '2951-2':{en:'Sodium',ua:'Натрій'},
+  '8480-6':{en:'Systolic BP',ua:'Систолічний тиск'},
+  '1742-6':{en:'ALT',ua:'АЛТ'},
+  '2093-3':{en:'Total cholesterol',ua:'Холестерин загальний'},
+};
+
 const I18N = {
   en: {
     htmlLang:'en', title:'LiveMedCard — Living Medical Card',
@@ -369,6 +452,12 @@ const I18N = {
     errorPrefix:'Error: ', selected:name=>`Selected: ${name}`,
     chips:['What about kidneys over the last year?','What was potassium?',
       'What medications and any interactions?','What about HbA1c?'],
+    story:(docs,pair)=>`One timeline from ${docs} documents in two languages. The card flagged a dangerous combination — <b>${pair}</b> — deterministically, by safety rules, not by AI guess. See the red alert in the Safety panel.`,
+    groupL1:'L1 · deterministic rules', groupL2a:'L2a · trends & reference ranges',
+    trust:['No cloud LLM','Deterministic safety rules (L1)','FHIR export','Local-first by design'],
+    drawerTitle:id=>`Source · ${id}`,
+    drawerCap:'The extracted fact is highlighted in the source document.',
+    srcTitle:'Show source document',
   },
   ua: {
     htmlLang:'uk', title:'LiveMedCard — жива медична картка',
@@ -405,6 +494,12 @@ const I18N = {
     errorPrefix:'Помилка: ', selected:name=>`Вибрано: ${name}`,
     chips:['Що з нирками за останній рік?','Який був калій?',
       'Які ліки приймає і чи є взаємодії?','Що з HbA1c?'],
+    story:(docs,pair)=>`Один таймлайн із ${docs} документів двома мовами. Картка помітила небезпечну комбінацію — <b>${pair}</b> — детерміновано, правилами безпеки, а не «на думку» ШІ. Дивіться червоний сигнал у панелі безпеки.`,
+    groupL1:'L1 · детерміновані правила', groupL2a:'L2a · тренди й референсні межі',
+    trust:['Без хмарної LLM','Детерміновані правила безпеки (L1)','Експорт FHIR','Local-first за дизайном'],
+    drawerTitle:id=>`Джерело · ${id}`,
+    drawerCap:'Витягнутий факт підсвічено в д��кументі-джерелі.',
+    srcTitle:'Показати документ-джерело',
   },
 };
 
@@ -443,7 +538,11 @@ function applyLang(lang){
   $('#qa-tag').textContent = t.qaTag;
   $('#q').placeholder = t.qPlaceholder;
   $('#ask').textContent = t.ask;
-  $('#site-footer').innerHTML = `${t.footer1}<br>${t.footer2}`;
+  $('#trust').innerHTML = t.trust.map(x=>`<span>${x}</span>`).join('');
+  $('#site-footer').innerHTML = `${t.footer1}<br>${t.footer2}
+    <div class="flinks"><a href="https://github.com/SZabolotnii/Digital_Future_Hackathon" target="_blank" rel="noopener">GitHub</a> ·
+    <a href="https://traces.solutions" target="_blank" rel="noopener">traces.solutions</a> ·
+    <a href="https://arxiv.org/abs/2605.03838" target="_blank" rel="noopener">TRACE (arXiv)</a></div>`;
   buildChips();
   if(lastState) render(lastState);
 }
@@ -460,7 +559,7 @@ function applyLang(lang){
 
 $('#langsw').addEventListener('click', e=>{
   const btn=e.target.closest('button[data-lang]'); if(!btn) return;
-  if(btn.dataset.lang!==LANG) applyLang(btn.dataset.lang);
+  if(btn.dataset.lang!==LANG){applyLang(btn.dataset.lang);refresh();}
 });
 
 function toast(msg){const t=$('#toast');t.textContent=msg;t.classList.add('show');
@@ -545,23 +644,39 @@ function render(st){
     <div class="stat bi"><div class="n">${bilingual?'UA+EN':(langs.has('en')?'EN':'UA')}</div><div class="l">${t.statLangs}</div></div>
   ` : '';
 
+  // story ribbon — investor orientation, only when a drug interaction was caught
+  const inter=st.signals.filter(x=>x.kind==='interaction');
+  const storyEl=$('#story');
+  if(inter.length && !localStorage.getItem('lmc_story_off')){
+    const pair=inter[0].detail.split(':')[0];
+    $('#story-text').innerHTML=t.story(docs, pair);
+    storyEl.classList.add('show');
+  }else{storyEl.classList.remove('show');}
+
   // series
   const sEl=$('#series');
   if(!st.series.length){sEl.innerHTML=`<div class="empty">${t.seriesEmpty}</div>`;}
   else{sEl.innerHTML=st.series.map((s,idx)=>{
     const last=s.points.at(-1);const [txt,cls]=statusOf(s);const [ttxt,tcls]=trendOf(s);
+    const name=(LOINC_LABEL[s.loinc]||{})[LANG]||s.keyword;
     const ref=(s.low!=null&&s.high!=null)?`${t.range} ${s.low}–${s.high} ${s.unit||''}`:'';
     const srcs=[...new Set(s.points.map(p=>p.source).filter(Boolean))];
     const langBadges=[...new Set(srcs.map(langOf))].map(l=>`<span class="lang ${l}">${l.toUpperCase()}</span>`).join('');
+    const chips=srcs.map(src=>{
+      // span останньої точки з цього документа — якір для drawer-підсвітки
+      const pt=[...s.points].reverse().find(p=>p.source===src);
+      const span=pt&&pt.span?`${pt.span[0]}-${pt.span[1]}`:'';
+      return `<button class="srcchip" data-doc="${src}" data-span="${span}" title="${t.srcTitle}">${src}</button>`;
+    }).join('');
     return `<div class="metric" style="animation-delay:${(idx*.05).toFixed(2)}s">
       <div class="row">
-        <span class="name">${s.keyword}</span>
+        <span class="name">${name}</span>
         <span class="big"><span class="val">${last.value}</span><span class="unit">${s.unit||''}</span>
           ${ttxt?`<span class="trend ${tcls}">${ttxt}</span>`:''}</span>
       </div>
       <div class="meta"><span class="ref">${ref}</span><span class="status ${cls}">${txt}</span></div>
       ${sparkline(s.points,s.low,s.high)}
-      <div class="src">${langBadges}<span>${t.meas(s.points.length)} · ${srcs.join(', ')||'—'}</span></div>
+      <div class="src">${langBadges}<span>${t.meas(s.points.length)}</span>${chips}</div>
     </div>`;}).join('');}
 
   // decision
@@ -572,16 +687,25 @@ function render(st){
     <span class="t">${d.route_to}</span>
     <ul class="reasons">${d.reasons.map(r=>`<li>${r}</li>`).join('')}</ul>`;
 
-  // signals — interaction/critical get a pulsing dot
+  // signals — headline: спіймана взаємодія; далі групи за шаром TRACE (L1 / L2a)
   const sig=$('#signals');
   if(!st.signals.length){sig.innerHTML=`<div class="empty">${t.signalsEmpty}</div>`;}
-  else{sig.innerHTML=st.signals.map(x=>{
-    const hot=(x.kind==='interaction'||x.severity==='critical'||x.severity==='major');
-    const color=SEV[x.severity]||'var(--info)';
-    return `<div class="sig ${hot?'hot':''}">
-      <span class="dot" style="background:${color};color:${color}"></span>
-      <span><span class="k">${x.layer} · ${x.kind} · ${t.sevLabel[x.severity]||x.severity}</span>
-      <span class="d">${x.detail}</span></span></div>`;}).join('');}
+  else{
+    const row=(x,headline)=>{
+      const hot=(x.kind==='interaction'||x.severity==='critical'||x.severity==='major');
+      const color=SEV[x.severity]||'var(--info)';
+      return `<div class="sig ${hot?'hot':''} ${headline?'headline':''}">
+        <span class="dot" style="background:${color};color:${color}"></span>
+        <span><span class="k">${x.layer} · ${x.kind} · ${t.sevLabel[x.severity]||x.severity}</span>
+        <span class="d">${x.detail}</span></span></div>`;
+    };
+    const rest=st.signals.filter(x=>x.kind!=='interaction');
+    const l1=rest.filter(x=>x.layer==='L1'), l2a=rest.filter(x=>x.layer==='L2a');
+    sig.innerHTML =
+      inter.map(x=>row(x,true)).join('') +
+      (l1.length?`<div class="siggroup">${t.groupL1}</div>`+l1.map(x=>row(x)).join(''):'') +
+      (l2a.length?`<div class="siggroup">${t.groupL2a}</div>`+l2a.map(x=>row(x)).join(''):'');
+  }
 
   // meds — flag those named in an interaction
   const interText=st.signals.filter(x=>x.kind==='interaction').map(x=>x.detail.toLowerCase()).join(' ');
@@ -592,7 +716,39 @@ function render(st){
   }).join(''):`<div class="empty">${t.medsEmpty}</div>`;
 }
 
-async function refresh(){try{render(await api('/state'));}catch(e){toast(I18N[LANG].errorPrefix+e.message);}}
+async function refresh(){
+  // lang → бекенд локалізує тексти сигналів/причин (той самий детермінований каталог)
+  try{render(await api('/state?lang='+(LANG==='ua'?'uk':'en')));}
+  catch(e){toast(I18N[LANG].errorPrefix+e.message);}
+}
+
+/* ── provenance drawer: клік по документу-джерелу → речення з фактом ── */
+function escHtml(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+async function openDoc(docId, span){
+  const t=I18N[LANG];
+  try{
+    const d=await api('/document/'+encodeURIComponent(docId));
+    $('#drawer-title').textContent=t.drawerTitle(docId);
+    $('#drawer-cap').textContent=span?t.drawerCap:'';
+    const body=$('#drawer-body');
+    body.innerHTML=span
+      ? escHtml(d.text.slice(0,span[0]))+'<mark>'+escHtml(d.text.slice(span[0],span[1]))+'</mark>'+escHtml(d.text.slice(span[1]))
+      : escHtml(d.text);
+    $('#drawer').classList.add('show');$('#drawer-back').classList.add('show');
+    const mk=body.querySelector('mark');
+    if(mk)setTimeout(()=>mk.scrollIntoView({block:'center',behavior:'smooth'}),180);
+  }catch(e){toast(t.errorPrefix+e.message);}
+}
+function closeDoc(){$('#drawer').classList.remove('show');$('#drawer-back').classList.remove('show');}
+$('#drawer-close').onclick=closeDoc;
+$('#drawer-back').onclick=closeDoc;
+addEventListener('keydown',e=>{if(e.key==='Escape')closeDoc();});
+$('#series').addEventListener('click',e=>{
+  const chip=e.target.closest('.srcchip'); if(!chip)return;
+  const span=chip.dataset.span?chip.dataset.span.split('-').map(Number):null;
+  openDoc(chip.dataset.doc, span);
+});
+$('#story-x').onclick=()=>{localStorage.setItem('lmc_story_off','1');$('#story').classList.remove('show');};
 
 async function ask(q){
   q=(q||$('#q').value).trim(); if(!q)return;