Close full operational audit findings

frontend/src/components/segmentation/SegmentationLab.tsx

@@ -48,6 +48,15 @@ interface SegmentationLabProps {
   onRunQa: () => void
 }
 
+function segmentationRunLabel(run: SegmentationRunRead): string {
+  const timestamp = run.finished_at ?? run.created_at
+  const dateLabel = timestamp
+    ? new Intl.DateTimeFormat('nl-BE', { dateStyle: 'short', timeStyle: 'short' }).format(new Date(timestamp))
+    : 'datum onbekend'
+  const status = run.status === 'completed' ? 'afgerond' : run.status
+  return `${run.model_name || 'Segmentatie'} · ${status} · ${dateLabel}`
+}
+
 export function SegmentationLab({
   segmentationModels,
   loadingSegmentationModels,
@@ -95,50 +104,50 @@ export function SegmentationLab({
   const segmentationRunReady =
     Boolean(selectedProjectId) && segmentationHasDataset && segmentationModelUiRunnable
   const segmentationRunBlockedReason = !selectedProjectId
-    ? 'Select or create a project first'
+    ? 'Kies eerst een werkruimte'
     : !segmentationHasDataset
-      ? 'Select a raster dataset'
+      ? 'Kies een rasterbestand'
       : selectedSegmentationModelId === 'fixture-segmenter'
-        ? 'Fixture segmenter is explicit test/demo-only'
+        ? 'Het fixturemodel is alleen bedoeld voor expliciete tests en demo’s'
         : !selectedSegmentationModelConfigured
-          ? selectedSegmentationModelLimitation ?? 'Selected segmentation model is not configured'
+          ? selectedSegmentationModelLimitation ?? 'Het gekozen segmentatiemodel is niet geconfigureerd'
           : null
 
   return (
     <section className="workspace-panel ai-lab-shell segmentation-lab-shell">
       <div className="panel-title-row">
         <div>
-          <p className="eyebrow">Polygon segmentation</p>
-          <h2>Segmentation Lab</h2>
+          <p className="eyebrow">Vlakken herkennen in beeld</p>
+          <h2>Segmentatie</h2>
         </div>
         <button className="secondary-action" type="button" onClick={onLoadModels} disabled={loadingSegmentationModels}>
-          Refresh models
+          Status vernieuwen
         </button>
       </div>
 
-      <details className="ai-lab-model-surface" aria-label="Segmentation model capabilities">
+      <details className="ai-lab-model-surface" aria-label="Technische informatie over segmentatiemodellen">
         <summary>
-          <span>Model registry</span>
-          <strong>{segmentationModels.length} models</strong>
+          <span>Technische modelinformatie</span>
+          <strong>{segmentationModels.length} modellen</strong>
         </summary>
         <div className="ai-lab-disclosure-body">
         <div className="ai-lab-state-stack">
           {loadingSegmentationModels ? (
             <div className="result-state result-state-loading">
-              <strong>Loading segmentation models.</strong>
-              <p>Checking backend model registry availability.</p>
+              <strong>Segmentatiemodellen worden gecontroleerd.</strong>
+              <p>GeoIntel leest de modelregistratie van de backend.</p>
             </div>
           ) : null}
           {segmentationModelError ? (
             <div className="result-state result-state-error">
-              <strong>Segmentation model registry unavailable.</strong>
+              <strong>De modelregistratie voor segmentatie is niet bereikbaar.</strong>
               <p>{segmentationModelError}</p>
             </div>
           ) : null}
           {segmentationModels.length === 0 && !loadingSegmentationModels ? (
             <div className="result-state result-state-empty">
-              <strong>No segmentation models reported by backend.</strong>
-              <p>Refresh models after the backend is reachable.</p>
+              <strong>De backend meldt geen segmentatiemodellen.</strong>
+              <p>Vernieuw de status zodra de backend opnieuw bereikbaar is.</p>
             </div>
           ) : null}
         </div>
@@ -146,14 +155,17 @@ export function SegmentationLab({
           {segmentationModels.map((model) => (
             <li className={model.configured ? 'model-card model-card-ready' : 'model-card'} key={model.model_id}>
               <strong>{model.display_name}</strong>
-              <span className={model.configured ? 'status-badge status-badge-ready' : 'status-badge'}>{model.status}</span>
-              <div className="entity-meta">
-                <span>{model.model_id}</span>
-                <span>{model.framework}</span>
-                <span>{model.task_type}</span>
-              </div>
-              <p className="muted">classes: {model.supported_classes.join(', ')}</p>
+              <span className={model.configured ? 'status-badge status-badge-ready' : 'status-badge'}>{model.configured ? 'gereed' : 'niet geconfigureerd'}</span>
+              <p className="muted">Ondersteunde klassen: {model.supported_classes.join(', ') || 'niet opgegeven'}</p>
               <p className="muted">{model.limitation_message}</p>
+              <details className="technical-inline-details">
+                <summary>Technische identificatie</summary>
+                <div className="entity-meta">
+                  <span>Model-ID: {model.model_id}</span>
+                  <span>Framework: {model.framework}</span>
+                  <span>Taaktype: {model.task_type}</span>
+                </div>
+              </details>
             </li>
           ))}
         </ul>
@@ -161,55 +173,55 @@ export function SegmentationLab({
       </details>
 
       <div className="lab-block">
-        <div className="ai-lab-run-surface" aria-label="Segmentation run controls">
-          <h3>Run segmentation</h3>
+        <div className="ai-lab-run-surface" aria-label="Segmentatie starten">
+          <h3>Nieuwe segmentatie</h3>
           <div
             className={segmentationRunReady ? 'lab-readiness-panel lab-readiness-panel-ready' : 'lab-readiness-panel'}
-            aria-label="Segmentation run readiness"
+            aria-label="Startklaar voor segmentatie"
           >
             <div className="ai-lab-section-header">
               <div>
-                <h3>Run readiness</h3>
-                <p>Checks the selected raster and segmenter state before submitting a segmentation job.</p>
+                <h3>Wat is nog nodig?</h3>
+                <p>GeoIntel controleert het raster en model voordat de verwerking start.</p>
               </div>
               <span className={segmentationRunReady ? 'status-badge status-badge-ready' : 'status-badge'}>
-                {segmentationRunReady ? 'Ready to submit' : 'Blocked'}
+                {segmentationRunReady ? 'Klaar om te starten' : 'Nog niet startklaar'}
               </span>
             </div>
             <div className="lab-readiness-grid">
               <div className={segmentationHasDataset ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
-                <span>Raster dataset</span>
-                <strong>{segmentationHasDataset ? 'Selected' : 'Select a raster dataset'}</strong>
+                <span>Rasterbestand</span>
+                <strong>{segmentationHasDataset ? 'Geselecteerd' : 'Kies een rasterbestand'}</strong>
               </div>
               <div className={selectedSegmentationModelConfigured ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
-                <span>Model availability</span>
+                <span>Analysemodel</span>
                 <strong>
                   {selectedSegmentationModelConfigured
-                    ? 'Selected model is configured'
-                    : selectedSegmentationModelLimitation ?? 'Select a configured segmentation model'}
+                    ? 'Het gekozen model is beschikbaar'
+                    : selectedSegmentationModelLimitation ?? 'Kies een geconfigureerd segmentatiemodel'}
                 </strong>
               </div>
               <div className={segmentationHasTileManifest ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
-                <span>Tile manifest</span>
-                <strong>{segmentationHasTileManifest ? 'Provided for provenance' : 'Optional for the fixture segmenter'}</strong>
+                <span>Beeldtegels</span>
+                <strong>{segmentationHasTileManifest ? 'Technisch manifest gekoppeld' : 'Niet vereist voor het fixturemodel'}</strong>
               </div>
             </div>
           </div>
           <div className={segmentationRunReady ? 'lab-action-guardrail lab-action-guardrail-ready' : 'lab-action-guardrail'}>
-            <span>Run action</span>
-            <strong>{segmentationRunReady ? 'Ready to submit a segmentation job' : segmentationRunBlockedReason}</strong>
+            <span>Analyse</span>
+            <strong>{segmentationRunReady ? 'Klaar om segmentatie te starten' : segmentationRunBlockedReason}</strong>
           </div>
           {rasterDatasets.length === 0 ? (
             <div className="result-state result-state-empty">
-              <strong>No raster datasets available for segmentation.</strong>
-              <p>Upload or select a raster dataset in Data before running segmentation.</p>
+              <strong>Geen rasterbestand beschikbaar voor segmentatie.</strong>
+              <p>Voeg eerst een rasterbestand toe onder Bronnen.</p>
             </div>
           ) : null}
           <div className="lab-form-grid">
             <label>
-              Raster dataset
+              Rasterbestand
               <select value={selectedSegmentationDatasetId} onChange={(event) => onSelectDataset(event.target.value)}>
-                <option value="">Select raster dataset</option>
+                <option value="">Kies een rasterbestand</option>
                 {rasterDatasets.map((dataset) => (
                   <option key={dataset.id} value={dataset.id}>
                     {dataset.name}
@@ -218,7 +230,7 @@ export function SegmentationLab({
               </select>
             </label>
             <label>
-              Model
+              Analysemodel
               <select value={selectedSegmentationModelId} onChange={(event) => onSelectModel(event.target.value)}>
                 {segmentationModels.map((model) => (
                   <option key={model.model_id} value={model.model_id}>
@@ -228,7 +240,7 @@ export function SegmentationLab({
               </select>
             </label>
             <label>
-              Min confidence
+              Minimale zekerheid
               <input
                 type="number"
                 min="0"
@@ -239,22 +251,25 @@ export function SegmentationLab({
               />
             </label>
           </div>
+          <details className="technical-inline-details">
+            <summary>Technische beeldtegelinstelling</summary>
           <label>
-            Tile manifest
+            Beeldtegelmanifest
             <input
               type="text"
-              placeholder="Raster tile manifest path"
+              placeholder="Pad naar het beeldtegelmanifest"
               value={segmentationTileManifestPath}
               onChange={(event) => onSetTileManifestPath(event.target.value)}
             />
           </label>
+          </details>
           <button
             className="primary-action"
             type="button"
             onClick={onRunSegmentation}
             disabled={runningSegmentation || !segmentationRunReady}
           >
-            Run segmentation
+            Segmentatie starten
           </button>
         </div>
       </div>
@@ -262,61 +277,66 @@ export function SegmentationLab({
       <div className="ai-lab-state-stack">
         {!selectedSegmentationModelConfigured ? (
           <div className="result-state result-state-empty">
-            <strong>Segmentation model is not ready.</strong>
-            <p>{selectedSegmentationModelLimitation ?? 'Select a configured segmentation model'}</p>
+            <strong>Het segmentatiemodel is nog niet gereed.</strong>
+            <p>{selectedSegmentationModelLimitation ?? 'Kies een geconfigureerd segmentatiemodel.'}</p>
           </div>
         ) : null}
         {segmentationRunError ? (
           <div className="result-state result-state-error">
-            <strong>Segmentation run failed.</strong>
+            <strong>De segmentatie is mislukt.</strong>
             <p>{segmentationRunError}</p>
           </div>
         ) : null}
         {segmentationRunResult ? (
           <div className="result-summary-card">
-            <p>Status: {segmentationRunResult.status}</p>
-            <p>Message: {segmentationRunResult.message}</p>
-            <p>Analysis run: {segmentationRunResult.analysis_run_id}</p>
-            <p>Job: {segmentationRunResult.job_id}</p>
-            <p>Segmentations: {segmentationRunResult.segmentation_count}</p>
+            <p>Status: {segmentationRunResult.status === 'completed' ? 'afgerond' : segmentationRunResult.status}</p>
+            <p>{segmentationRunResult.message}</p>
+            <p>Herkende vlakken: {segmentationRunResult.segmentation_count}</p>
             {segmentationRunResult.error_code ? <p className="error">Code: {segmentationRunResult.error_code}</p> : null}
+            <details className="technical-inline-details">
+              <summary>Technische verwerking</summary>
+              <div className="entity-meta">
+                <span>Analyserun-ID: {segmentationRunResult.analysis_run_id}</span>
+                <span>Taak-ID: {segmentationRunResult.job_id}</span>
+              </div>
+            </details>
           </div>
         ) : null}
       </div>
 
-      <div className="ai-lab-results-surface" aria-label="Segmentation results">
+      <div className="ai-lab-results-surface" aria-label="Segmentatieresultaten">
         <div className="panel-title-row">
           <div>
-            <h3>Segmentation results</h3>
-            <p className="muted">Load persisted segmentation polygons and filter by class or confidence.</p>
+            <h3>Herkende vlakken</h3>
+            <p className="muted">Bekijk bewaarde resultaten en filter op klasse of zekerheid.</p>
           </div>
           <button className="secondary-action" type="button" onClick={onLoadRuns} disabled={!selectedProjectId}>
-            Refresh runs
+            Analyses vernieuwen
           </button>
         </div>
         <div className="lab-form-grid">
           <label>
-            Run
+            Analyse
             <select value={selectedSegmentationRunId} onChange={(event) => onSelectRun(event.target.value)}>
-              <option value="">Select segmentation run</option>
+              <option value="">Kies een bewaarde analyse</option>
               {segmentationRuns.map((run) => (
                 <option key={run.id} value={run.id}>
-                  {run.model_name || 'segmentation'} - {run.status} - {run.id}
+                  {segmentationRunLabel(run)}
                 </option>
               ))}
             </select>
           </label>
           <label>
-            Class
+            Klasse
             <input
               type="text"
-              placeholder="Class filter"
+              placeholder="Filter op klasse"
               value={segmentationClassFilter}
               onChange={(event) => onSetClassFilter(event.target.value)}
             />
           </label>
           <label>
-            Min confidence
+            Minimale zekerheid
             <input
               type="number"
               min="0"
@@ -328,18 +348,18 @@ export function SegmentationLab({
           </label>
         </div>
         <button className="primary-action" type="button" onClick={onLoadResults} disabled={!selectedSegmentationRunId || loadingSegmentationResults}>
-          Load segmentations
+          Resultaten laden
         </button>
         {loadingSegmentationResults ? (
           <div className="result-state result-state-loading">
-            <strong>Loading segmentation results.</strong>
-            <p>Retrieving persisted segmentation polygons for the selected run.</p>
+            <strong>Segmentatieresultaten worden geladen.</strong>
+            <p>GeoIntel leest de bewaarde polygonen van deze analyse.</p>
           </div>
         ) : null}
         <div className="ai-lab-state-stack">
           <div className="result-state result-state-ready">
-            <strong>Segmentations loaded: {segmentationItems.length}</strong>
-            <p>{selectedSegmentationRunId ? 'Loaded from persisted segmentation records.' : 'Select a segmentation run before loading results.'}</p>
+            <strong>{segmentationItems.length} vlakken geladen</strong>
+            <p>{selectedSegmentationRunId ? 'Deze resultaten zijn bewaard in de database.' : 'Kies eerst een bewaarde analyse.'}</p>
           </div>
         </div>
         {segmentationItems.length > 0 ? (
@@ -347,23 +367,21 @@ export function SegmentationLab({
             <table>
               <thead>
                 <tr>
-                  <th>Class</th>
-                  <th>Confidence</th>
-                  <th>Area m2</th>
+                  <th>Klasse</th>
+                  <th>Zekerheid</th>
+                  <th>Oppervlakte m²</th>
                   <th>Model</th>
-                  <th>Tile</th>
-                  <th>Mask path</th>
+                  <th>Brontegel</th>
                 </tr>
               </thead>
               <tbody>
                 {segmentationItems.map((segmentation) => (
                   <tr key={segmentation.id}>
                     <td>{segmentation.class_name}</td>
-                    <td>{segmentation.confidence?.toFixed(2) ?? 'n/a'}</td>
-                    <td>{segmentation.area_m2?.toFixed(2) ?? 'n/a'}</td>
+                    <td>{segmentation.confidence?.toFixed(2) ?? 'n.v.t.'}</td>
+                    <td>{segmentation.area_m2?.toFixed(2) ?? 'n.v.t.'}</td>
                     <td>{segmentation.model_name}</td>
-                    <td>{segmentation.source_tile_path || (segmentation.tile_index ?? 'n/a')}</td>
-                    <td>{segmentation.mask_path || 'n/a'}</td>
+                    <td>{segmentation.tile_index ?? 'n.v.t.'}</td>
                   </tr>
                 ))}
               </tbody>
@@ -372,12 +390,12 @@ export function SegmentationLab({
         ) : null}
       </div>
 
-      <div className="ai-lab-qa-surface" aria-label="Segmentation QA controls and results">
-        <h3>Segmentation QA</h3>
+      <div className="ai-lab-qa-surface" aria-label="Kwaliteitscontrole voor segmentatie">
+        <h3>Kwaliteitscontrole segmentatie</h3>
         <label>
-          Reference dataset
+          Referentielaag
           <select value={segmentationReferenceDatasetId} onChange={(event) => onSelectReferenceDataset(event.target.value)}>
-            <option value="">Select reference dataset</option>
+            <option value="">Kies een referentielaag</option>
             {referenceDatasets.map((dataset) => (
               <option key={dataset.id} value={dataset.id}>
                 {dataset.name}
@@ -386,24 +404,27 @@ export function SegmentationLab({
           </select>
         </label>
         <button className="primary-action" type="button" onClick={onRunQa} disabled={runningSegmentationQa || !selectedSegmentationRunId || !segmentationReferenceDatasetId}>
-          Compare segmentations to reference
+          Vergelijk met referentielaag
         </button>
         {segmentationQaError ? (
           <div className="result-state result-state-error">
-            <strong>Segmentation QA failed.</strong>
+            <strong>De kwaliteitscontrole is mislukt.</strong>
             <p>{segmentationQaError}</p>
           </div>
         ) : null}
         {segmentationQaResult ? (
           <div className="result-summary-card">
-            <p>Status: {segmentationQaResult.status}</p>
-            <p>Quality check: {segmentationQaResult.quality_check_id}</p>
-            <p>Precision: {segmentationQaResult.precision?.toFixed(3) ?? 'n/a'}</p>
-            <p>Recall: {segmentationQaResult.recall?.toFixed(3) ?? 'n/a'}</p>
-            <p>F1: {segmentationQaResult.f1_score?.toFixed(3) ?? 'n/a'}</p>
-            <p>Mean IoU: {segmentationQaResult.mean_iou?.toFixed(3) ?? 'n/a'}</p>
-            <p>False positives: {segmentationQaResult.false_positives}</p>
-            <p>False negatives: {segmentationQaResult.false_negatives}</p>
+            <p>Status: {segmentationQaResult.status === 'completed' ? 'afgerond' : segmentationQaResult.status}</p>
+            <p>Precisie: {segmentationQaResult.precision?.toFixed(3) ?? 'n.v.t.'}</p>
+            <p>Herkenningsgraad: {segmentationQaResult.recall?.toFixed(3) ?? 'n.v.t.'}</p>
+            <p>F1: {segmentationQaResult.f1_score?.toFixed(3) ?? 'n.v.t.'}</p>
+            <p>Gemiddelde overlap: {segmentationQaResult.mean_iou?.toFixed(3) ?? 'n.v.t.'}</p>
+            <p>Onterecht gevonden: {segmentationQaResult.false_positives}</p>
+            <p>Gemist: {segmentationQaResult.false_negatives}</p>
+            <details className="technical-inline-details">
+              <summary>Technische referentie</summary>
+              <span>Kwaliteitscontrole-ID: {segmentationQaResult.quality_check_id}</span>
+            </details>
           </div>
         ) : null}
       </div>