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/AlertStateChip.tsx

@@ -0,0 +1,27 @@
+import { Badge } from '@cameleer/design-system';
+import type { AlertDto } from '../api/queries/alerts';
+
+type State = NonNullable<AlertDto['state']>;
+
+const LABELS: Record<State, string> = {
+  PENDING: 'Pending',
+  FIRING: 'Firing',
+  ACKNOWLEDGED: 'Acknowledged',
+  RESOLVED: 'Resolved',
+};
+
+const COLORS: Record<State, 'auto' | 'success' | 'warning' | 'error'> = {
+  PENDING: 'warning',
+  FIRING: 'error',
+  ACKNOWLEDGED: 'warning',
+  RESOLVED: 'success',
+};
+
+export function AlertStateChip({ state, silenced }: { state: State; silenced?: boolean }) {
+  return (
+    <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
+      <Badge label={LABELS[state]} color={COLORS[state]} variant="filled" />
+      {silenced && <Badge label="Silenced" color="auto" variant="outlined" />}
+    </span>
+  );
+}