Polish QA handoff context

frontend/src/App.tsx

@@ -162,7 +162,10 @@ function App(): JSX.Element {
     () => availableVectorDatasets.filter((item) => item.dataset_role === 'reference'),
     [availableVectorDatasets],
   )
-  const candidateDatasets = availableVectorDatasets
+  const candidateDatasets = useMemo(
+    () => availableVectorDatasets.filter((item) => item.dataset_role !== 'reference'),
+    [availableVectorDatasets],
+  )
   const rasterDatasets = useMemo(() => datasets.filter((item) => item.dataset_type === 'raster'), [datasets])
   const {
     providers,
@@ -651,6 +654,8 @@ function App(): JSX.Element {
                 selectedProjectId={selectedProjectId}
                 qualityChecks={qualityChecks}
                 qualityChecksError={qualityChecksError}
+                candidateDatasets={candidateDatasets}
+                referenceDatasets={referenceDatasets}
                 onRefresh={() => loadQualityChecks()}
               />
             </div>

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'}>

frontend/src/styles/app.css

@@ -1217,6 +1217,13 @@ button.entity-card {
   margin: 0.75rem 0;
 }
 
+.quality-handoff-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: 0.65rem;
+  margin: 0 0 0.75rem;
+}
+
 .quality-summary-grid > div {
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -1224,7 +1231,16 @@ button.entity-card {
   background: #ffffff;
 }
 
+.quality-handoff-grid > div {
+  min-width: 0;
+  border: 1px solid rgba(15, 118, 110, 0.18);
+  border-radius: 8px;
+  padding: 0.72rem;
+  background: #f8fbf9;
+}
+
 .quality-summary-grid span,
+.quality-handoff-grid span,
 .quality-score-row span,
 .latest-export-card span,
 .metric-list span {
@@ -1243,6 +1259,26 @@ button.entity-card {
   line-height: 1.2;
 }
 
+.quality-handoff-grid strong {
+  display: block;
+  margin-top: 0.26rem;
+  color: var(--ink);
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+.quality-dataset-name,
+.quality-check-dataset-link {
+  overflow-wrap: anywhere;
+}
+
+.quality-dataset-name {
+  margin: 0.35rem 0 0;
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.35;
+}
+
 .quality-score-row {
   display: grid;
   grid-template-columns: 6rem 5rem minmax(0, 1fr);