Adopt shared WebUI structural primitives

webui/src/features/riskCompliance/RiskCompliancePage.tsx

@@ -32,6 +32,7 @@ import { FormGrid, ActionToolbar, ToolbarSpacer,
   SegmentedControl,
   SelectionList,
   SelectionListItem,
+  StatePanel,
   StatusBadge,
   ToggleSwitch,
   hasScope,
@@ -494,9 +495,7 @@ function SourcesPane({
             </div>
           ))}
           {!imported.length && (
-            <div className="risk-empty">
-              No source snapshot has been imported.
-            </div>
+            <StatePanel size="compact" description="No source snapshot has been imported." />
           )}
         </div>
       </div>
@@ -665,26 +664,15 @@ function ScreenPane({
           {run && <StatusBadge status={run.outcome} />}
         </header>
         {!run && (
-          <div className="risk-empty">
-            Run a screening to inspect the result.
-          </div>
+          <StatePanel size="compact" description="Run a screening to inspect the result." />
         )}
         {run && (
           <div className="risk-result-body">
-            <div className="risk-metrics">
-              <span>
-                <strong>{run.candidate_count}</strong>
-                candidates
-              </span>
-              <span>
-                <strong>{run.matcher_version}</strong>
-                matcher
-              </span>
-              <span>
-                <strong>{run.list_snapshot.source_version}</strong>
-                list
-              </span>
-            </div>
+            <MetricGrid columns={3} density="compact" spacing="none" minimum="compact">
+              <MetricCard density="compact" surface="flat" label="Candidates" value={run.candidate_count} />
+              <MetricCard density="compact" surface="flat" label="Matcher" value={run.matcher_version} />
+              <MetricCard density="compact" surface="flat" label="List" value={run.list_snapshot.source_version} />
+            </MetricGrid>
             {run.candidates.map((item) => (
               <div className="risk-candidate-summary" key={item.id}>
                 <span className="risk-score">{item.score}</span>
@@ -826,9 +814,7 @@ function ReviewPane({
             </SelectionList>
           )}
           {!queue.length && (
-            <div className="risk-empty">
-              No candidates currently need review.
-            </div>
+            <StatePanel size="compact" description="No candidates currently need review." />
           )}
         </div>
       </aside>
@@ -851,9 +837,7 @@ function ReviewPane({
           </div>
         </header>
         {!detail && (
-          <div className="risk-empty">
-            Select a candidate from the queue.
-          </div>
+          <StatePanel size="compact" description="Select a candidate from the queue." />
         )}
         {detail && (
           <div className="risk-evidence-body">
@@ -1318,7 +1302,7 @@ function AssurancePane({
               </SelectionList>
             )}
             {!visibleNodes.length && (
-              <div className="risk-empty">No assurance objects match.</div>
+              <StatePanel size="compact" description="No assurance objects match." />
             )}
           </div>
         </aside>
@@ -1340,7 +1324,7 @@ function AssurancePane({
             </div>
           </header>
           {!selected && (
-            <div className="risk-empty">Select an assurance object.</div>
+            <StatePanel size="compact" description="Select an assurance object." />
           )}
           {selected && (
             <div className="risk-assurance-detail-body">
@@ -1380,7 +1364,7 @@ function AssurancePane({
                   />
                 ))}
                 {!graph?.edges.length && (
-                  <div className="risk-empty">No relationships are recorded.</div>
+                  <StatePanel size="inline" description="No relationships are recorded." />
                 )}
               </div>
               {graph?.truncated && (