Polish QA metric evidence cards

frontend/src/components/quality/QualityResultsPanel.tsx

@@ -1,5 +1,14 @@
 import { useMemo } from 'react'
-import type { DatasetCreateResponse, QualityCheckRead } from '../../types'
+import type { DatasetCreateResponse, MetricRead, QualityCheckRead } from '../../types'
+
+const CORE_METRIC_ORDER = [
+  'precision',
+  'recall',
+  'f1',
+  'mean_iou',
+  'false_positive_count',
+  'false_negative_count',
+]
 
 interface QualityResultsPanelProps {
   selectedProjectId: string | null
@@ -10,6 +19,29 @@ interface QualityResultsPanelProps {
   onRefresh: () => void
 }
 
+function qualityMetricLabel(metricKey: string): string {
+  const labels: Record<string, string> = {
+    precision: 'Precision',
+    recall: 'Recall',
+    f1: 'F1',
+    mean_iou: 'Mean IoU',
+    false_positive_count: 'False positives',
+    false_negative_count: 'False negatives',
+  }
+  return labels[metricKey] ?? metricKey.replaceAll('_', ' ')
+}
+
+function qualityMetricValue(metric: MetricRead | undefined): string {
+  if (!metric || metric.metric_value === null || metric.metric_value === undefined) {
+    return 'n/a'
+  }
+  const value = Number(metric.metric_value)
+  if (!Number.isFinite(value)) {
+    return String(metric.metric_value)
+  }
+  return Number.isInteger(value) ? String(value) : value.toFixed(3)
+}
+
 export function QualityResultsPanel({
   selectedProjectId,
   qualityChecks,
@@ -123,11 +155,27 @@ export function QualityResultsPanel({
                 <strong>{check.id}</strong>
               </div>
             </div>
+            <div className="quality-metric-section">
+              <span>Metric evidence</span>
+              <div className="quality-metric-grid">
+                {CORE_METRIC_ORDER.map((metricKey) => {
+                  const metric = check.metrics.find((item) => item.metric_key === metricKey)
+                  const isCriticalCount = metricKey === 'false_positive_count' || metricKey === 'false_negative_count'
+                  return (
+                    <div className={isCriticalCount ? 'quality-metric-card quality-metric-card-critical' : 'quality-metric-card'} key={metricKey}>
+                      <span>{qualityMetricLabel(metricKey)}</span>
+                      <strong>{qualityMetricValue(metric)}</strong>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+            <span className="metric-list-label">Raw metrics</span>
             <ul className="metric-list">
               {check.metrics.map((metric) => (
                 <li key={metric.id}>
-                  <span>{metric.metric_key}</span>
-                  <strong>{metric.metric_value ?? 'n/a'}</strong>
+                  <span>{qualityMetricLabel(metric.metric_key)}</span>
+                  <strong>{qualityMetricValue(metric)}</strong>
                 </li>
               ))}
             </ul>