Polish workbench result states

frontend/src/components/segmentation/SegmentationLab.tsx

@@ -95,9 +95,24 @@ export function SegmentationLab({
           Refresh models
         </button>
       </div>
-      {loadingSegmentationModels ? <p>Loading segmentation models...</p> : null}
-      {segmentationModelError ? <p className="error">{segmentationModelError}</p> : null}
-      {segmentationModels.length === 0 && !loadingSegmentationModels ? <p>No segmentation models reported by backend</p> : null}
+      {loadingSegmentationModels ? (
+        <div className="result-state result-state-loading">
+          <strong>Loading segmentation models.</strong>
+          <p>Checking backend model registry availability.</p>
+        </div>
+      ) : null}
+      {segmentationModelError ? (
+        <div className="result-state result-state-error">
+          <strong>Segmentation model registry unavailable.</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>
+        </div>
+      ) : null}
       <ul className="model-list">
         {segmentationModels.map((model) => (
           <li className={model.configured ? 'model-card model-card-ready' : 'model-card'} key={model.model_id}>
@@ -159,9 +174,17 @@ export function SegmentationLab({
         </button>
       </div>
       {!selectedSegmentationModelConfigured ? (
-        <p>{selectedSegmentationModelLimitation ?? 'Select a configured segmentation model'}</p>
+        <div className="result-state result-state-empty">
+          <strong>Segmentation model is not ready.</strong>
+          <p>{selectedSegmentationModelLimitation ?? 'Select a configured segmentation model'}</p>
+        </div>
+      ) : null}
+      {segmentationRunError ? (
+        <div className="result-state result-state-error">
+          <strong>Segmentation run failed.</strong>
+          <p>{segmentationRunError}</p>
+        </div>
       ) : null}
-      {segmentationRunError ? <p className="error">{segmentationRunError}</p> : null}
       {segmentationRunResult ? (
         <div className="result-summary-card">
           <p>Status: {segmentationRunResult.status}</p>
@@ -215,8 +238,16 @@ export function SegmentationLab({
         <button className="primary-action" type="button" onClick={onLoadResults} disabled={!selectedSegmentationRunId || loadingSegmentationResults}>
           Load segmentations
         </button>
-        {loadingSegmentationResults ? <p>Loading segmentation results...</p> : null}
-        <p>Segmentations loaded: {segmentationItems.length}</p>
+        {loadingSegmentationResults ? (
+          <div className="result-state result-state-loading">
+            <strong>Loading segmentation results.</strong>
+            <p>Retrieving persisted segmentation polygons for the selected run.</p>
+          </div>
+        ) : null}
+        <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>
+        </div>
         {segmentationItems.length > 0 ? (
           <div className="table-scroll">
             <table>
@@ -262,7 +293,12 @@ export function SegmentationLab({
         <button className="primary-action" type="button" onClick={onRunQa} disabled={runningSegmentationQa || !selectedSegmentationRunId || !segmentationReferenceDatasetId}>
           Compare segmentations to reference
         </button>
-        {segmentationQaError ? <p className="error">{segmentationQaError}</p> : null}
+        {segmentationQaError ? (
+          <div className="result-state result-state-error">
+            <strong>Segmentation QA failed.</strong>
+            <p>{segmentationQaError}</p>
+          </div>
+        ) : null}
         {segmentationQaResult ? (
           <div className="result-summary-card">
             <p>Status: {segmentationQaResult.status}</p>