feat: compose stable product surfaces

webui/tests/layout-primitives.test.tsx

@@ -19,6 +19,7 @@ import MetricGrid from "../src/components/MetricGrid";
 import PageActionBar from "../src/components/PageActionBar";
 import SelectionList, { SelectionListItem, SelectionListItemContent } from "../src/components/SelectionList";
 import StatePanel from "../src/components/StatePanel";
+import ProductAvailabilityState from "../src/components/ProductAvailabilityState";
 import WorkspaceLayout from "../src/components/WorkspaceLayout";
 import WorkspaceFrame from "../src/components/WorkspaceFrame";
 import WorkspaceActionBar from "../src/components/WorkspaceActionBar";
@@ -183,6 +184,27 @@ assert(workspaceMarkup.includes("selection-list-navigation"), "resource navigati
 assert(workspaceMarkup.includes("selection-list-item-content"), "selection-list copy owns title and description typography");
 assert(workspaceMarkup.includes("state-panel-size-fill"), "whole-surface states share sizing and action anatomy");
 
+const availabilityMarkup = renderToStaticMarkup(
+  <PlatformLanguageProvider>
+    <ProductAvailabilityState
+      state="degraded"
+      explanation={{
+        reason: "provider_degraded",
+        title: "Messages are delayed",
+        description: "Saved messages remain available, but new provider results may be delayed.",
+        resolution: "Retry later or contact the integration operator.",
+        responsibleRole: "Integration operator"
+      }}
+      technical={{ moduleId: "mail", providerId: "smtp-primary", correlationId: "event-1" }}
+      actions={<button type="button">Retry</button>}
+    />
+  </PlatformLanguageProvider>
+);
+assert(availabilityMarkup.includes("product-availability-degraded"), "product availability uses one semantic state primitive");
+assert(availabilityMarkup.includes("Retry later or contact the integration operator."), "availability states include an actionable recovery path");
+assert(availabilityMarkup.includes("<details"), "technical provenance remains available on demand");
+assert(availabilityMarkup.includes("smtp-primary"), "technical details preserve exact provider provenance");
+
 const frameMarkup = renderToStaticMarkup(
   <PlatformLanguageProvider><WorkspaceFrame as="main" height="viewport" label="Planning workspace" surface="panel"><span>Body</span></WorkspaceFrame></PlatformLanguageProvider>
 );