diff --git a/medcat-trainer/webapp/api/api/metrics.py b/medcat-trainer/webapp/api/api/metrics.py
index b421e8381..5c989635a 100644
--- a/medcat-trainer/webapp/api/api/metrics.py
+++ b/medcat-trainer/webapp/api/api/metrics.py
@@ -173,31 +173,63 @@ def concept_summary(self, extra_cui_filter=None):
 
     def enrich_medcat_metrics(self, examples):
         """
-        Add the user prop to the medcat output metrics. Can potentially add more later for each of the categories
+        Add the user prop to the medcat output metrics. Can potentially add more later for each of the categories.
+
+        get_stats examples use snake_case keys (document_id). Older payloads used
+        spaced keys ("document id"). Accept both so FP/FN/TP dialogs can be enriched.
         """
-        for tp in [i for e_i in examples['tp'].values() for i in e_i]:
-            try:
-                ann = AnnotatedEntity.objects.get(project_id=tp['project id'], document_id=tp['document id'],
-                                                  start_ind=tp['start'], end_ind=tp['end'])
-                tp['user'] = ann.user.username
-            except:
-                tp['user'] = None
-        for fp in (i for e_i in examples['fp'].values() for i in e_i):
-            try:
-                ann = AnnotatedEntity.objects.get(project_id=fp['project id'], document_id=fp['document id'],
-                                                  start_ind=fp['start'], end_ind=fp['end'])
-                fp['user'] = ann.user.username
-            except:
-                fp['user'] = None
-        for fn in (i for e_i in examples['fn'].values() for i in e_i):
-            try:
-                ann = AnnotatedEntity.objects.get(project_id=fn['project id'], document_id=fn['document id'],
-                                                  start_ind=fn['start'], end_ind=fn['end'])
-                fn['user'] = ann.user.username
-            except:
-                fn['user'] = None
+        if not isinstance(examples, dict):
+            return examples
+        for kind in ('tp', 'fp', 'fn'):
+            grouped = examples.get(kind) or {}
+            if not isinstance(grouped, dict):
+                continue
+            for example_list in grouped.values():
+                if not isinstance(example_list, list):
+                    continue
+                for example in example_list:
+                    if isinstance(example, dict):
+                        self._attach_example_user(example)
         return examples
 
+    @staticmethod
+    def _example_value(example, *keys):
+        for key in keys:
+            if key in example and example[key] is not None:
+                return example[key]
+        return None
+
+    @classmethod
+    def _normalize_example_keys(cls, example):
+        """Expose both legacy spaced keys and current snake_case keys on one example."""
+        aliases = (
+            ('project id', 'project_id'),
+            ('project name', 'project_name'),
+            ('document id', 'document_id'),
+            ('document name', 'document_name'),
+            ('source value', 'source_value'),
+        )
+        for legacy, modern in aliases:
+            if legacy not in example and modern in example:
+                example[legacy] = example[modern]
+            elif modern not in example and legacy in example:
+                example[modern] = example[legacy]
+        if 'acc' not in example and example.get('confidence') is not None:
+            example['acc'] = example['confidence']
+        return example
+
+    def _attach_example_user(self, example):
+        self._normalize_example_keys(example)
+        project_id = self._example_value(example, 'project id', 'project_id')
+        document_id = self._example_value(example, 'document id', 'document_id')
+        try:
+            ann = AnnotatedEntity.objects.get(project_id=project_id, document_id=document_id,
+                                              start_ind=example.get('start'), end_ind=example.get('end'))
+            example['user'] = ann.user.username if getattr(ann, 'user', None) else None
+        except Exception:
+            example['user'] = None
+        return example
+
     def user_stats(self, by_user: bool = True):
         """
         Summary of user annotation work done
diff --git a/medcat-trainer/webapp/api/api/tests/test_metrics.py b/medcat-trainer/webapp/api/api/tests/test_metrics.py
index f938d529e..8bc5681c2 100644
--- a/medcat-trainer/webapp/api/api/tests/test_metrics.py
+++ b/medcat-trainer/webapp/api/api/tests/test_metrics.py
@@ -5,6 +5,8 @@
 are exercised by passing cat=None.
 """
 
+from unittest.mock import MagicMock, patch
+
 import pandas as pd
 from django.test import TestCase
 
@@ -154,6 +156,80 @@ def test_rename_meta_value_when_specified(self):
         self.assertEqual(pm.annotations[0]['Existence'], 'Yes')
 
 
+class EnrichMedcatMetricsTests(TestCase):
+    def _examples(self):
+        return {
+            'tp': {},
+            'fp': {
+                'C001': [{
+                    'project_id': 4,
+                    'document_id': 9,
+                    'project_name': 'Ward round',
+                    'document_name': 'Note 9',
+                    'source_value': 'asthma',
+                    'text': 'history of asthma today',
+                    'start': 11,
+                    'end': 17,
+                    'cui': 'C001',
+                    'acc': 0.5,
+                }]
+            },
+            'fn': {
+                'C002': [{
+                    'project id': 4,
+                    'document id': 9,
+                    'source value': 'diabetes',
+                    'text': 'diabetes mellitus',
+                    'start': 0,
+                    'end': 8,
+                    'cui': 'C002',
+                    'acc': 1,
+                }]
+            },
+        }
+
+    @patch('api.metrics.AnnotatedEntity.objects.get')
+    def test_snake_case_examples_are_normalized_and_assigned_a_user(self, mock_get):
+        ann = MagicMock()
+        ann.user.username = 'alice'
+        mock_get.return_value = ann
+        pm = ProjectMetrics(_build_export(), cat=None)
+
+        examples = pm.enrich_medcat_metrics(self._examples())
+        fp = examples['fp']['C001'][0]
+
+        self.assertEqual(fp['user'], 'alice')
+        self.assertEqual(fp['project id'], 4)
+        self.assertEqual(fp['document id'], 9)
+        self.assertEqual(fp['document name'], 'Note 9')
+        self.assertEqual(fp['source value'], 'asthma')
+        mock_get.assert_any_call(project_id=4, document_id=9, start_ind=11, end_ind=17)
+
+    @patch('api.metrics.AnnotatedEntity.objects.get')
+    def test_legacy_spaced_keys_still_resolve_the_annotation(self, mock_get):
+        ann = MagicMock()
+        ann.user.username = 'bob'
+        mock_get.return_value = ann
+        pm = ProjectMetrics(_build_export(), cat=None)
+
+        examples = pm.enrich_medcat_metrics(self._examples())
+        fn = examples['fn']['C002'][0]
+
+        self.assertEqual(fn['user'], 'bob')
+        self.assertEqual(fn['project_id'], 4)
+        self.assertEqual(fn['document_id'], 9)
+        self.assertEqual(fn['source_value'], 'diabetes')
+        mock_get.assert_any_call(project_id=4, document_id=9, start_ind=0, end_ind=8)
+
+    @patch('api.metrics.AnnotatedEntity.objects.get', side_effect=LookupError('missing'))
+    def test_missing_annotation_still_normalizes_keys(self, _mock_get):
+        pm = ProjectMetrics(_build_export(), cat=None)
+        examples = pm.enrich_medcat_metrics(self._examples())
+        fp = examples['fp']['C001'][0]
+        self.assertIsNone(fp['user'])
+        self.assertEqual(fp['source value'], 'asthma')
+
+
 class EmptyExportTests(TestCase):
     def test_handles_empty_documents_without_error(self):
         export = {'projects': [{'id': 1, 'name': 'empty', 'documents': [],
diff --git a/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue b/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
index a053e626a..965f2394e 100644
--- a/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
+++ b/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
@@ -1,17 +1,18 @@
 <template>
   <tr class="result-container">
-    <td class="doc-name">{{result['document name']}}</td>
-    <td class="cui">{{result.cui}}</td>
-    <td class="source-value">{{result['source value']}}</td>
-    <td class="accu">{{Number(result.acc).toFixed(3)}}</td>
+    <td class="doc-name">{{ documentName }}</td>
+    <td class="cui">{{ result && result.cui }}</td>
+    <td class="source-value">{{ sourceValue }}</td>
+    <td class="accu">{{ accuracy }}</td>
     <td class="text">
-      <v-runtime-template :template="text"></v-runtime-template>
+      <v-runtime-template v-if="text" :template="text"></v-runtime-template>
     </td>
   </tr>
 </template>
 
 <script>
 import VRuntimeTemplate from 'vue3-runtime-template'
+import { contextMentionIndex, escapeTemplateText, exampleField, resolvedExampleEnd } from '@/components/metrics/exampleFields'
 
 export default {
   name: 'AnnoResult.vue',
@@ -25,34 +26,74 @@ export default {
     docText: String
   },
   computed: {
+    documentName () {
+      return exampleField(this.result, 'document name', 'document_name') || ''
+    },
+    sourceValue () {
+      return exampleField(this.result, 'source value', 'source_value') || ''
+    },
+    projectId () {
+      return exampleField(this.result, 'project id', 'project_id')
+    },
+    documentId () {
+      return exampleField(this.result, 'document id', 'document_id')
+    },
+    accuracy () {
+      const acc = this.result ? (this.result.acc ?? this.result.confidence) : undefined
+      const numeric = Number(acc)
+      return Number.isFinite(numeric) ? numeric.toFixed(3) : ''
+    },
     text () {
-      if (!this.result || !this.result.text || !this.result['source value']) {
-        return ''
-      }
-      // default to tp
+      const srcVal = this.sourceValue
+      if (!this.result || !srcVal) return ''
+
       let highlightClass = 'highlight-task-0'
       if (this.type === 'fp' || this.type === 'fn') {
         highlightClass = 'highlight-task-1'
       }
-      
-      const srcVal = this.result['source value']
-      let outText = `<span>${this.docText.slice(this.result['start'] - 60, this.result['start'])}`
-      outText += `<span class="${highlightClass}" @click="openAnno">${srcVal}</span>`
-      outText += `${this.docText.slice(this.result['end'], this.result['end'] + 60)}</span>`
-      return outText
+      const highlight = `<span class="${highlightClass}" @click="openAnno">${escapeTemplateText(srcVal)}</span>`
+      const snippet = this.snippetAround(srcVal)
+      return `<span>${snippet.before}${highlight}${snippet.after}</span>`
     }
   },
   methods: {
+    snippetAround (srcVal) {
+      const start = Number(this.result.start)
+      const end = Number(this.result.end)
+      const fullText = typeof this.docText === 'string' ? this.docText : ''
+      const resolvedEnd = resolvedExampleEnd(fullText, start, end, srcVal)
+      if (resolvedEnd != null) {
+        return {
+          before: escapeTemplateText(fullText.slice(Math.max(0, start - 60), start)),
+          after: escapeTemplateText(fullText.slice(resolvedEnd, resolvedEnd + 60))
+        }
+      }
+
+      const context = typeof this.result.text === 'string' ? this.result.text : ''
+      const idx = contextMentionIndex(context, start, srcVal)
+      if (idx === -1) {
+        return { before: escapeTemplateText(context), after: '' }
+      }
+      return {
+        before: escapeTemplateText(context.slice(0, idx)),
+        after: escapeTemplateText(context.slice(idx + srcVal.length))
+      }
+    },
     openAnno () {
+      if (this.projectId == null || this.documentId == null) return
+      const start = Number(this.result.start)
+      const end = Number(this.result.end)
+      const fullText = typeof this.docText === 'string' ? this.docText : ''
+      const resolvedEnd = resolvedExampleEnd(fullText, start, end, this.sourceValue)
       const routeData = this.$router.resolve(
         {
-          path: `/train-annotations/${this.result['project id']}/${this.result['document id']}`,
+          path: `/train-annotations/${this.projectId}/${this.documentId}`,
           query: {
-            annoStart: this.result['start'],
-            annoEnd: this.result['end']
+            annoStart: this.result.start,
+            annoEnd: resolvedEnd == null ? this.result.end : resolvedEnd
           }
       })
-      window.open(routeData.href, '_blank');
+      window.open(routeData.href, '_blank')
     }
   }
 }
diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
index 65b2900af..7c70c9a82 100644
--- a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
@@ -124,25 +124,26 @@
         </div>
       </template>
       <template #item.tps="{ item }">
-        <button class="btn btn-outline-success res-btn" :disabled="item.tps === 0"
-                @click="openExamples('tp_examples', item)">
-          {{ item.tps }}
+        <button type="button" class="btn res-btn tp-count" :disabled="countValue(item, 'tps') === 0"
+                @click.stop="openExamples('tp_examples', item)">
+          {{ countValue(item, 'tps') }}
         </button>
       </template>
       <template #item.fns="{ item }">
-        <button class="btn btn-outline-warning res-btn" :disabled="item.fns === 0"
-                @click="openExamples('fn_examples', item)">
-          {{ item.fns }}
+        <button type="button" class="btn res-btn fn-count" :disabled="countValue(item, 'fns') === 0"
+                @click.stop="openExamples('fn_examples', item)">
+          {{ countValue(item, 'fns') }}
         </button>
       </template>
       <template #item.fps="{ item }">
-        <button class="btn btn-outline-danger res-btn" :disabled="item.fps === 0"
-                @click="openExamples('fp_examples', item)">
-          {{ item.fps }}
+        <button type="button" class="btn res-btn fp-count" :disabled="countValue(item, 'fps') === 0"
+                @click.stop="openExamples('fp_examples', item)">
+          {{ countValue(item, 'fps') }}
         </button>
       </template>
     </v-data-table>
 
+    <teleport to="body">
     <modal v-if="showModal" :closable="true" @modal:close="clearModalData" class="examples-modal">
       <template #header>
         <h3>{{ modalData.title }}</h3>
@@ -186,12 +187,14 @@
         </div>
       </template>
     </modal>
+    </teleport>
   </div>
 </template>
 
 <script>
 import AnnoResult from '@/components/anns/AnnoResult.vue'
 import Modal from '@/components/common/Modal.vue'
+import { documentTextForExample } from '@/components/metrics/exampleFields'
 
 export default {
   name: 'ConceptSummary',
@@ -270,20 +273,54 @@ export default {
           return '0.0'
       }
     },
+    countValue (item, field) {
+      const row = this.exampleRow(item)
+      const value = Number(row && row[field])
+      return Number.isFinite(value) ? value : 0
+    },
+    exampleRow (item) {
+      // v-data-table may pass its internal wrapper ({ type, raw }) rather than the source row.
+      if (item && item.type === 'item' && item.raw) return item.raw
+      return item
+    },
+    exampleList (row, exampleType) {
+      const direct = row && row[exampleType]
+      if (Array.isArray(direct)) return direct
+      if (direct && typeof direct === 'object') return [direct]
+
+      const items = Array.isArray(this.items) ? this.items : []
+      // Identity lookup fails when the table hands back a copy of the row.
+      const idx = row ? items.indexOf(row) : -1
+      if (idx !== -1 && Array.isArray(items[idx][exampleType])) return items[idx][exampleType]
+
+      const match = items.find(candidate =>
+        candidate && row && candidate.cui === row.cui &&
+        (row.concept_name == null || candidate.concept_name === row.concept_name)
+      )
+      const matched = match && match[exampleType]
+      if (Array.isArray(matched)) return matched
+      if (matched && typeof matched === 'object') return [matched]
+      return []
+    },
     openExamples(exampleType, item) {
+      const row = this.exampleRow(item) || {}
+      const label = row.concept_name || 'Concept'
+      const cui = row.cui || ''
       if (exampleType === 'tp_examples') {
-        this.modalData.title = `${item.concept_name} (${item.cui}) - True Positive Model Predictions`
+        this.modalData.title = `${label} (${cui}) - True Positive Model Predictions`
         this.modalData.type = 'tp'
       } else if (exampleType === 'fp_examples') {
-        this.modalData.title = `${item.concept_name} (${item.cui}) - False Positive Model Predictions`
+        this.modalData.title = `${label} (${cui}) - False Positive Model Predictions`
         this.modalData.type = 'fp'
       } else {
-        this.modalData.title = `${item.concept_name} (${item.cui}) - False Negative Model Predictions`
+        this.modalData.title = `${label} (${cui}) - False Negative Model Predictions`
         this.modalData.type = 'fn'
       }
-      const idx = this.items.indexOf(item)
-      this.modalData.results = this.items[idx][exampleType]
-      this.showModal = true
+      this.modalData.results = this.exampleList(row, exampleType)
+      // Open after this click finishes so the new dialog mask cannot receive it and close immediately.
+      this.$nextTick(() => {
+        this.showModal = true
+      })
     },
     clearModalData() {
       this.modalData = {
@@ -294,8 +331,7 @@ export default {
       this.showModal = false
     },
     textFromAnno(anno) {
-      const docId = anno['document id']
-      return this.docs2text[docId]
+      return documentTextForExample(this.docs2text, anno)
     }
   }
 }
@@ -314,10 +350,52 @@ export default {
   height: 25px;
   padding: 3px 10px !important;
   border: 0 !important;
+  background-color: transparent;
+}
+
+button.res-btn.tp-count {
+  opacity: 0.3;
+  /* color: var(--success); */
+}
+
+button.res-btn.fn-count {
+  opacity: 0.3;
+  /* color: var(--warning); */
+}
+
+button.res-btn.fp-count {
+  opacity: 0.3;
+  /* color: var(--danger); */
+}
+
+button.res-btn.tp-count:not(:disabled) {
+  opacity: 1;
+  color: var(--success);
+}
+
+button.res-btn.fn-count:not(:disabled) {
+  opacity: 1;
+  color: var(--warning);
+}
+
+button.res-btn.fp-count:not(:disabled) {
+  opacity: 1;
+  color: var(--danger);
+}
+
+button.res-btn.tp-count:not(:disabled):hover {
+  color: var(--bs-white);
+  background-color: var(--success);
+}
+
+button.res-btn.fn-count:not(:disabled):hover {
+  color: var(--bs-white);
+  background-color: var(--warning);
 }
 
-.res-btn:hover {
-  color: white !important;
+button.res-btn.fp-count:not(:disabled):hover {
+  color: var(--bs-white);
+  background-color: var(--danger);
 }
 
 .v-card {
diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js b/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js
new file mode 100644
index 000000000..016f86661
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js
@@ -0,0 +1,65 @@
+// MedCAT stats examples have used two key styles:
+// legacy trainer payloads ("document id") and current get_stats payloads (document_id).
+export function exampleField (example, ...keys) {
+  if (!example || typeof example !== 'object') return undefined
+  for (const key of keys) {
+    const value = example[key]
+    if (value !== undefined && value !== null && value !== '') return value
+  }
+  return undefined
+}
+
+// Clinical text is compiled as a Vue template. Escape markup and mustache
+// delimiters so a note cannot break the dialog render.
+export function escapeTemplateText (value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/\{/g, '&#123;')
+    .replace(/\}/g, '&#125;')
+}
+
+export function documentTextForExample (docs2text, example) {
+  if (!docs2text || !example) return ''
+  const docId = exampleField(example, 'document id', 'document_id')
+  if (docId == null) return ''
+  if (docs2text[docId] != null) return docs2text[docId]
+  const asString = String(docId)
+  if (docs2text[asString] != null) return docs2text[asString]
+  const asNumber = Number(docId)
+  if (!Number.isNaN(asNumber) && docs2text[asNumber] != null) return docs2text[asNumber]
+  return ''
+}
+
+function sameMention (slice, sourceValue) {
+  return slice === sourceValue || slice.toLowerCase() === sourceValue.toLowerCase()
+}
+
+// Stats examples often store end equal to start. The mention still begins at
+// start, so a trailing slice from end repeats it beside the clickable span.
+export function resolvedExampleEnd (fullText, start, end, sourceValue) {
+  if (typeof fullText !== 'string' || !sourceValue) return null
+  if (!Number.isFinite(start) || !Number.isFinite(end) || start < 0 || start > fullText.length) return null
+  if (end >= start && end <= fullText.length && sameMention(fullText.slice(start, end), sourceValue)) return end
+  const byLength = start + sourceValue.length
+  if (byLength <= fullText.length && sameMention(fullText.slice(start, byLength), sourceValue)) return byLength
+  return null
+}
+
+// MedCAT context windows are doc[max(0, start - 60): end + 60], so the
+// annotated mention is at min(start, 60), not the first copy in that window.
+export function contextMentionIndex (context, start, sourceValue) {
+  if (typeof context !== 'string' || !sourceValue) return -1
+  const at = (index) => index >= 0 &&
+    index + sourceValue.length <= context.length &&
+    sameMention(context.slice(index, index + sourceValue.length), sourceValue)
+  if (Number.isFinite(start) && at(Math.min(Math.max(start, 0), 60))) {
+    return Math.min(Math.max(start, 0), 60)
+  }
+  const exact = context.indexOf(sourceValue)
+  if (exact !== -1) return exact
+  return context.toLowerCase().indexOf(sourceValue.toLowerCase())
+}
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts
new file mode 100644
index 000000000..95a34a5cc
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts
@@ -0,0 +1,148 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AnnoResult from '@/components/anns/AnnoResult.vue'
+
+const runtimeStub = {
+  props: ['template'],
+  template: '<div class="runtime-template">{{ template }}</div>'
+}
+
+describe('AnnoResult.vue', () => {
+  const docText = 'before <tag> {{asthma}} after more text'
+  const start = docText.indexOf('asthma')
+  const snakeCaseResult = {
+    cui: '195967001',
+    project_id: 3,
+    document_id: 8,
+    project_name: 'Clinic',
+    document_name: 'Letter',
+    source_value: 'asthma',
+    text: 'context asthma context',
+    start,
+    end: start + 'asthma'.length,
+    acc: 0.5
+  }
+
+  const mountResult = (props: Record<string, unknown> = {}) => {
+    const resolve = vi.fn(() => ({ href: '/train-annotations/3/8' }))
+    const wrapper = mount(AnnoResult, {
+      props: {
+        type: 'fn',
+        docText,
+        result: snakeCaseResult,
+        ...props
+      },
+      global: {
+        stubs: { 'v-runtime-template': runtimeStub },
+        mocks: { $router: { resolve } }
+      }
+    })
+    return { wrapper, resolve }
+  }
+
+  it('shows snake_case example fields and escapes text compiled into the template', () => {
+    const { wrapper } = mountResult()
+    expect(wrapper.find('.doc-name').text()).toBe('Letter')
+    expect(wrapper.find('.source-value').text()).toBe('asthma')
+    expect(wrapper.find('.accu').text()).toBe('0.500')
+
+    const template = wrapper.find('.runtime-template').text()
+    expect(template).toContain('highlight-task-1')
+    expect(template).toContain('@click="openAnno"')
+    expect(template).toContain('&lt;tag&gt;')
+    expect(template).toContain('&#123;&#123;')
+    expect(template).toContain('>asthma</span>')
+    expect(template).toContain('&#125;&#125;')
+    expect(template).not.toContain('<tag>')
+    expect(template).not.toContain('{{')
+  })
+
+  it('still renders legacy spaced keys', () => {
+    const { wrapper } = mountResult({
+      type: 'tp',
+      docText: 'alpha asthma omega',
+      result: {
+        cui: 'C001',
+        'project id': 1,
+        'document id': 2,
+        'document name': 'Legacy note',
+        'source value': 'asthma',
+        text: 'alpha asthma omega',
+        start: 6,
+        end: 12,
+        acc: 1
+      }
+    })
+    expect(wrapper.find('.doc-name').text()).toBe('Legacy note')
+    expect(wrapper.find('.runtime-template').text()).toContain('highlight-task-0')
+  })
+
+  it('uses the stored context when the full document text is missing', () => {
+    const { wrapper } = mountResult({
+      docText: undefined,
+      result: {
+        ...snakeCaseResult,
+        text: 'seen <asthma> {{today}}'
+      }
+    })
+    const template = wrapper.find('.runtime-template').text()
+    expect(template).toContain('highlight-task-1')
+    expect(template).toContain('seen &lt;')
+    expect(template).toContain('>asthma</span>')
+    expect(template).toContain('&gt; &#123;&#123;today&#125;&#125;')
+    expect(template).not.toContain('<asthma>')
+  })
+
+  it('does not repeat the mention when the example end equals its start', () => {
+    const doc = 'Patient is a 70-year-old female with prior history of lung cancer, status post upper lobectomy.'
+    const start = doc.indexOf('lung cancer')
+    const { wrapper } = mountResult({
+      docText: doc,
+      result: {
+        ...snakeCaseResult,
+        source_value: 'lung cancer',
+        text: doc.slice(Math.max(0, start - 60), start + 60),
+        start,
+        end: start
+      }
+    })
+    const template = wrapper.find('.runtime-template').text()
+    const marker = '>lung cancer</span>'
+    const at = template.indexOf(marker)
+    expect(at).toBeGreaterThan(-1)
+    expect(template.slice(at + marker.length)).toContain(', status post upper lobectomy.')
+    expect(template.slice(at + marker.length)).not.toContain('lung cancer')
+    expect(template.slice(0, at)).not.toContain('lung cancer')
+  })
+
+  it('highlights the centred mention when the context window repeats it', () => {
+    const left = `prior asthma ${'x'.repeat(47)}`
+    const context = `${left}asthma later`
+    const { wrapper } = mountResult({
+      docText: undefined,
+      result: {
+        ...snakeCaseResult,
+        text: context,
+        start: 80,
+        end: 80
+      }
+    })
+    const template = wrapper.find('.runtime-template').text()
+    const marker = '>asthma</span>'
+    const at = template.indexOf(marker)
+    expect(template.slice(0, at)).toContain('prior asthma ')
+    expect(template.slice(at + marker.length)).toBe(' later</span>')
+  })
+
+  it('opens the annotation from snake_case project and document ids', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null)
+    const { wrapper, resolve } = mountResult()
+    wrapper.vm.openAnno()
+    expect(resolve).toHaveBeenCalledWith({
+      path: '/train-annotations/3/8',
+      query: { annoStart: start, annoEnd: start + 'asthma'.length }
+    })
+    expect(open).toHaveBeenCalledWith('/train-annotations/3/8', '_blank')
+    open.mockRestore()
+  })
+})
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
new file mode 100644
index 000000000..60ac45f5a
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import ConceptSummary from '@/components/metrics/ConceptSummary.vue'
+import conceptSummarySource from '@/components/metrics/ConceptSummary.vue?raw'
+import metricsSource from '@/views/Metrics.vue?raw'
+
+const fnExample = {
+  cui: '195967001',
+  project_id: 7,
+  document_id: '10',
+  document_name: 'Clinic letter',
+  source_value: 'asthma',
+  text: 'has asthma today',
+  start: 4,
+  end: 10,
+  acc: 0.91
+}
+
+const sourceRow = {
+  concept_name: 'Asthma',
+  cui: '195967001',
+  concept_count: 3,
+  variations: 1,
+  value: ['asthma'],
+  count_variations_ratio: 3,
+  cui_f1: 0.5,
+  cui_prec: 0.5,
+  cui_rec: 0.5,
+  tps: 1,
+  fns: 1,
+  fps: 2,
+  tp_examples: [],
+  fn_examples: [fnExample],
+  fp_examples: [fnExample, { ...fnExample, source_value: 'wheeze' }]
+}
+
+const tableStub = {
+  props: ['items'],
+  template: `
+    <div>
+      <div v-for="(item, index) in items" :key="index">
+        <slot name="item.tps" :item="item" />
+        <slot name="item.fns" :item="item" />
+        <slot name="item.fps" :item="item" />
+      </div>
+    </div>
+  `
+}
+
+const mountSummary = (items = [sourceRow]) =>
+  mount(ConceptSummary, {
+    props: {
+      items,
+      docs2text: { 10: 'xxhas asthma today and <script> {{x}}' }
+    },
+    global: {
+      stubs: {
+        'font-awesome-icon': true,
+        'v-row': { template: '<div><slot /></div>' },
+        'v-card': { template: '<div><slot /></div>' },
+        'v-card-title': { template: '<div><slot /></div>' },
+        'v-card-text': { template: '<div><slot /></div>' },
+        'v-tooltip': true,
+        'v-progress-linear': { template: '<div><slot /></div>' },
+        'v-runtime-template': {
+          props: ['template'],
+          template: '<span class="runtime-template">{{ template }}</span>'
+        },
+        'v-data-table': tableStub
+      }
+    },
+    attachTo: document.body
+  })
+
+describe('metrics ConceptSummary.vue', () => {
+  it('paints non-zero TP, FN, and FP counts green, grey, and red', () => {
+    const wrapper = mountSummary()
+    const zero = mountSummary([{ ...sourceRow, tps: 0, fns: 0, fps: 0 }])
+
+    expect(wrapper.get('button.tp-count').attributes('disabled')).toBeUndefined()
+    expect(wrapper.get('button.fn-count').attributes('disabled')).toBeUndefined()
+    expect(wrapper.get('button.fp-count').attributes('disabled')).toBeUndefined()
+    expect(zero.get('button.tp-count').attributes('disabled')).toBeDefined()
+    expect(zero.get('button.fn-count').attributes('disabled')).toBeDefined()
+    expect(zero.get('button.fp-count').attributes('disabled')).toBeDefined()
+
+    // jsdom does not apply Vue SFC CSS, so lock the declarations the browser uses.
+    expect(metricsSource).toContain('--success: #{map-get($theme-colors, "success")}')
+    expect(metricsSource).toContain('--warning: #{map-get($theme-colors, "warning")}')
+    expect(metricsSource).toContain('--danger: #{map-get($theme-colors, "danger")}')
+    expect(conceptSummarySource).toMatch(/button\.res-btn\.tp-count:not\(:disabled\)\s*\{[^}]*color:\s*var\(--success\)/)
+    expect(conceptSummarySource).toMatch(/button\.res-btn\.fn-count:not\(:disabled\)\s*\{[^}]*color:\s*var\(--warning\)/)
+    expect(conceptSummarySource).toMatch(/button\.res-btn\.fp-count:not\(:disabled\)\s*\{[^}]*color:\s*var\(--danger\)/)
+
+    wrapper.unmount()
+    zero.unmount()
+  })
+
+  it('opens the example dialog when an FN count is clicked', async () => {
+    const wrapper = mountSummary()
+    await wrapper.find('button.fn-count').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.vm.showModal).toBe(true)
+    expect(document.body.textContent).toContain('False Negative Model Predictions')
+    expect(document.body.textContent).toContain('Clinic letter')
+    expect(document.body.textContent).toContain('asthma')
+    wrapper.unmount()
+  })
+
+  it('opens FP examples when the table row is not the same object as the source row', async () => {
+    const wrapper = mountSummary()
+    const copy = {
+      concept_name: sourceRow.concept_name,
+      cui: sourceRow.cui,
+      tps: sourceRow.tps,
+      fns: sourceRow.fns,
+      fps: sourceRow.fps
+    }
+
+    wrapper.vm.openExamples('fp_examples', copy)
+    await flushPromises()
+
+    expect(wrapper.vm.showModal).toBe(true)
+    expect(wrapper.vm.modalData.type).toBe('fp')
+    expect(wrapper.vm.modalData.results).toHaveLength(2)
+    expect(document.body.textContent).toContain('False Positive Model Predictions')
+    wrapper.unmount()
+  })
+
+  it('reads examples from a v-data-table internal item wrapper', async () => {
+    const wrapper = mountSummary()
+    wrapper.vm.openExamples('fn_examples', { type: 'item', raw: sourceRow, columns: {} })
+    await flushPromises()
+
+    expect(wrapper.vm.showModal).toBe(true)
+    expect(wrapper.vm.modalData.results).toEqual(sourceRow.fn_examples)
+    wrapper.unmount()
+  })
+
+  it('does not throw when the clicked row has no stored examples', async () => {
+    const wrapper = mountSummary([{ ...sourceRow, fp_examples: [], fps: 0 }])
+    wrapper.vm.openExamples('fp_examples', { cui: 'missing', concept_name: 'Missing', fps: 1 })
+    await flushPromises()
+
+    expect(wrapper.vm.showModal).toBe(true)
+    expect(wrapper.vm.modalData.results).toEqual([])
+    wrapper.unmount()
+  })
+})
diff --git a/medcat-trainer/webapp/frontend/src/views/Metrics.vue b/medcat-trainer/webapp/frontend/src/views/Metrics.vue
index adbc12708..6b22cf432 100644
--- a/medcat-trainer/webapp/frontend/src/views/Metrics.vue
+++ b/medcat-trainer/webapp/frontend/src/views/Metrics.vue
@@ -759,9 +759,9 @@ $metrics-header-height: 50px;
   height: 25px;
   padding: 3px 10px !important;
   border: 0 !important;
-  &:hover {
-    color: white !important;
-  }
+  --success: #{map-get($theme-colors, "success")};
+  --warning: #{map-get($theme-colors, "warning")};
+  --danger: #{map-get($theme-colors, "danger")};
 }
 .v-input--density-default {
   --v-input-control-height: 30px !important;