Polish workbench result states

frontend/src/components/detection/DetectionLab.tsx

@@ -95,9 +95,24 @@ export function DetectionLab({
           Refresh models
         </button>
       </div>
-      {loadingDetectionModels ? <p>Loading detection models...</p> : null}
-      {detectionModelError ? <p className="error">{detectionModelError}</p> : null}
-      {detectionModels.length === 0 && !loadingDetectionModels ? <p>No detection models reported by backend</p> : null}
+      {loadingDetectionModels ? (
+        <div className="result-state result-state-loading">
+          <strong>Loading detection models.</strong>
+          <p>Checking backend model registry availability.</p>
+        </div>
+      ) : null}
+      {detectionModelError ? (
+        <div className="result-state result-state-error">
+          <strong>Detection model registry unavailable.</strong>
+          <p>{detectionModelError}</p>
+        </div>
+      ) : null}
+      {detectionModels.length === 0 && !loadingDetectionModels ? (
+        <div className="result-state result-state-empty">
+          <strong>No detection models reported by backend.</strong>
+          <p>Refresh models after the backend is reachable.</p>
+        </div>
+      ) : null}
       <ul className="model-list">
         {detectionModels.map((model) => (
           <li className={model.configured ? 'model-card model-card-ready' : 'model-card'} key={model.model_id}>
@@ -164,7 +179,12 @@ export function DetectionLab({
           Run detection
         </button>
       </div>
-      {detectionRunError ? <p className="error">{detectionRunError}</p> : null}
+      {detectionRunError ? (
+        <div className="result-state result-state-error">
+          <strong>Detection run failed.</strong>
+          <p>{detectionRunError}</p>
+        </div>
+      ) : null}
       {detectionRunResult ? (
         <div className="result-summary-card">
           <p>Status: {detectionRunResult.status}</p>
@@ -218,8 +238,16 @@ export function DetectionLab({
         <button className="primary-action" type="button" onClick={onLoadResults} disabled={!selectedDetectionRunId || loadingDetectionResults}>
           Load detections
         </button>
-        {loadingDetectionResults ? <p>Loading detection results...</p> : null}
-        <p>Detections loaded: {detectionItems.length}</p>
+        {loadingDetectionResults ? (
+          <div className="result-state result-state-loading">
+            <strong>Loading detection results.</strong>
+            <p>Retrieving persisted detections for the selected run.</p>
+          </div>
+        ) : null}
+        <div className="result-state result-state-ready">
+          <strong>Detections loaded: {detectionItems.length}</strong>
+          <p>{selectedDetectionRunId ? 'Loaded from persisted detection records.' : 'Select a detection run before loading results.'}</p>
+        </div>
         {detectionItems.length > 0 ? (
           <div className="table-scroll">
             <table>
@@ -261,7 +289,12 @@ export function DetectionLab({
         <button className="primary-action" type="button" onClick={onRunQa} disabled={runningDetectionQa || !selectedDetectionRunId || !detectionReferenceDatasetId}>
           Compare detections to reference
         </button>
-        {detectionQaError ? <p className="error">{detectionQaError}</p> : null}
+        {detectionQaError ? (
+          <div className="result-state result-state-error">
+            <strong>Detection QA failed.</strong>
+            <p>{detectionQaError}</p>
+          </div>
+        ) : null}
         {detectionQaResult ? (
           <div className="result-summary-card">
             <p>Status: {detectionQaResult.status}</p>