Adopt shared WebUI layout primitives

webui/src/features/ops/OpsPage.tsx

@@ -1,3 +1,5 @@
+import { DescriptionList } from "@govoplan/core-webui";
+import { MetricGrid } from "@govoplan/core-webui";
 import { useEffect, useState } from "react";
 import { PauseCircle, PlayCircle, RefreshCw } from "lucide-react";
 import { ContentGrid,
@@ -146,7 +148,7 @@ export default function OpsPage({ settings, auth }: {settings: ApiSettings;auth:
       )}
 
       <LoadingFrame loading={loading} label="i18n:govoplan-ops.loading_operations_status.6890fe6e">
-        <div className="metric-grid">
+        <MetricGrid>
           <MetricCard label="i18n:govoplan-ops.profile.ff4fc027" value={status?.summary.active_profile ?? "-"} tone="info" detail={status?.summary.database_url ?? "i18n:govoplan-ops.no_database_url.51a2db0c"} />
           <MetricCard label="i18n:govoplan-ops.readiness.1db9d6fb" value={ready ? "ready" : "not ready"} tone={ready ? "good" : "danger"} detail={status?.readiness.blockers.length ? `${status.readiness.blockers.length} blocker(s)` : "i18n:govoplan-ops.no_readiness_blockers.0df259bd"} />
           <MetricCard label="i18n:govoplan-ops.modules.04e9462c" value={status?.summary.module_count ?? 0} tone="neutral" detail="i18n:govoplan-ops.enabled_in_the_runtime_registry.d2c6142d" />
@@ -165,7 +167,7 @@ export default function OpsPage({ settings, auth }: {settings: ApiSettings;auth:
           <MetricCard label="Recovery" value={status?.summary.recovery_required_count ?? 0} tone={status?.summary.recovery_required_count ? "danger" : "good"} detail="Operations requiring recovery attention" />
           <MetricCard label="Provider bindings" value={status?.governance.summary.configured_external_provider_count ?? 0} tone={status?.governance.summary.provider_attention_count ? "warning" : "good"} detail={`${status?.governance.summary.provider_attention_count ?? 0} requiring attention`} />
           <MetricCard label="i18n:govoplan-ops.infrastructure_capabilities" value={status?.summary.infrastructure_capability_count ?? 0} tone={status?.infrastructure.available ? "good" : "neutral"} detail={i18nMessage("i18n:govoplan-ops.pending_post_install_tasks", { value0: status?.summary.pending_post_install_task_count ?? 0 })} />
-        </div>
+        </MetricGrid>
 
         <ContentGrid columns={2} collapseAt="workspace" className="">
           <Card title="i18n:govoplan-ops.health_checks.201c869f">
@@ -196,12 +198,12 @@ export default function OpsPage({ settings, auth }: {settings: ApiSettings;auth:
 
           <Card title="i18n:govoplan-ops.infrastructure_capabilities">
             <InfrastructureCapabilityTable items={status?.infrastructure.capabilities ?? []} />
-            {(status?.infrastructure.post_install_tasks.length ?? 0) > 0 && <dl className="detail-list">
+            {(status?.infrastructure.post_install_tasks.length ?? 0) > 0 && <DescriptionList variant="inline">
               {status?.infrastructure.post_install_tasks.map((task) => <div key={task.resume_key}>
                 <dt><StatusBadge status="warning" label={task.state} /></dt>
                 <dd><strong>{task.summary}</strong><span className="muted"> · {task.owner_module} · {task.required_inputs.join(", ")}</span></dd>
               </div>)}
-            </dl>}
+            </DescriptionList>}
           </Card>
 
           <Card title="i18n:govoplan-ops.sizing_assumptions.6ade9a90">
@@ -476,14 +478,14 @@ function GovernanceTable({ modules }: { modules: OpsGovernanceModule[] }) {
 function CheckList({ checks }: {checks: OpsCheck[];}) {
   if (!checks.length) return <p className="muted">i18n:govoplan-ops.no_health_checks_reported.03c067c4</p>;
   return (
-    <dl className="detail-list">
+    <DescriptionList variant="inline">
       {checks.map((check) =>
       <div key={check.id}>
           <dt><StatusBadge status={stateTone(check.state)} label={check.state} /></dt>
           <dd><strong>{check.label}</strong><span className="muted"> · {check.detail}</span></dd>
         </div>
       )}
-    </dl>);
+    </DescriptionList>);
 
 }