Polish QA handoff context

frontend/src/components/quality/QualityResultsPanel.tsx

@@ -1,9 +1,12 @@
-import type { QualityCheckRead } from '../../types'
+import { useMemo } from 'react'
+import type { DatasetCreateResponse, QualityCheckRead } from '../../types'
 
 interface QualityResultsPanelProps {
   selectedProjectId: string | null
   qualityChecks: QualityCheckRead[]
   qualityChecksError: string | null
+  candidateDatasets: DatasetCreateResponse[]
+  referenceDatasets: DatasetCreateResponse[]
   onRefresh: () => void
 }
 
@@ -11,10 +14,21 @@ export function QualityResultsPanel({
   selectedProjectId,
   qualityChecks,
   qualityChecksError,
+  candidateDatasets,
+  referenceDatasets,
   onRefresh,
 }: QualityResultsPanelProps): JSX.Element {
   const completedChecks = qualityChecks.filter((check) => check.status === 'ok' || check.status === 'completed').length
   const latestCheck = qualityChecks[0] ?? null
+  const datasetNameById = useMemo(() => {
+    const lookup = new Map<string, string>()
+    for (const dataset of [...candidateDatasets, ...referenceDatasets]) {
+      lookup.set(dataset.id, dataset.name)
+    }
+    return lookup
+  }, [candidateDatasets, referenceDatasets])
+  const latestCandidateName = latestCheck?.candidate_dataset_id ? datasetNameById.get(latestCheck.candidate_dataset_id) : null
+  const latestReferenceName = latestCheck?.reference_dataset_id ? datasetNameById.get(latestCheck.reference_dataset_id) : null
 
   return (
     <section className="quality-results-panel" data-testid="quality-results-panel">
@@ -39,6 +53,25 @@ export function QualityResultsPanel({
           <strong>{latestCheck?.status ?? 'waiting'}</strong>
         </div>
       </div>
+      <div className="quality-handoff-grid" aria-label="QA/QC dataset handoff context">
+        <div>
+          <span>Candidate layers</span>
+          <strong>{candidateDatasets.length}</strong>
+          <p className="quality-dataset-name">{candidateDatasets[0]?.name ?? 'No candidate layer selected yet'}</p>
+        </div>
+        <div>
+          <span>Reference layers</span>
+          <strong>{referenceDatasets.length}</strong>
+          <p className="quality-dataset-name">{referenceDatasets[0]?.name ?? 'No reference layer available yet'}</p>
+        </div>
+        <div>
+          <span>Latest comparison</span>
+          <strong>{latestCheck?.status ?? 'waiting'}</strong>
+          <p className="quality-dataset-name">
+            Candidate {latestCandidateName ?? latestCheck?.candidate_dataset_id ?? 'n/a'} / Reference {latestReferenceName ?? latestCheck?.reference_dataset_id ?? 'n/a'}
+          </p>
+        </div>
+      </div>
       <div className="button-row">
         <button
           type="button"
@@ -64,8 +97,12 @@ export function QualityResultsPanel({
               <div>
                 <strong>{check.check_type}</strong>
                 <div className="entity-meta">
-                  <span>candidate: {check.candidate_dataset_id ?? 'n/a'}</span>
-                  <span>reference: {check.reference_dataset_id}</span>
+                  <span className="quality-check-dataset-link">
+                    candidate: {check.candidate_dataset_id ? datasetNameById.get(check.candidate_dataset_id) ?? check.candidate_dataset_id : 'n/a'}
+                  </span>
+                  <span className="quality-check-dataset-link">
+                    reference: {datasetNameById.get(check.reference_dataset_id) ?? check.reference_dataset_id}
+                  </span>
                 </div>
               </div>
               <span className={check.status === 'ok' || check.status === 'completed' ? 'status-badge status-badge-ready' : 'status-badge'}>