feat(ui/alerts): AlertStateChip + SeverityBadge components

State colors follow the convention from @cameleer/design-system (CRITICAL->error,
WARNING->warning, INFO->auto). Silenced pill stacks next to state for the spec
section 8 audit-trail surface.

ui/src/components/SeverityBadge.tsx

@@ -0,0 +1,20 @@
+import { Badge } from '@cameleer/design-system';
+import type { AlertDto } from '../api/queries/alerts';
+
+type Severity = NonNullable<AlertDto['severity']>;
+
+const LABELS: Record<Severity, string> = {
+  CRITICAL: 'Critical',
+  WARNING: 'Warning',
+  INFO: 'Info',
+};
+
+const COLORS: Record<Severity, 'auto' | 'warning' | 'error'> = {
+  CRITICAL: 'error',
+  WARNING: 'warning',
+  INFO: 'auto',
+};
+
+export function SeverityBadge({ severity }: { severity: Severity }) {
+  return <Badge label={LABELS[severity]} color={COLORS[severity]} variant="filled" />;
+}