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.test.tsx

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@cameleer/design-system';
+import { SeverityBadge } from './SeverityBadge';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('SeverityBadge', () => {
+  it.each([
+    ['CRITICAL', /critical/i],
+    ['WARNING', /warning/i],
+    ['INFO', /info/i],
+  ] as const)('renders %s', (severity, pattern) => {
+    renderWithTheme(<SeverityBadge severity={severity} />);
+    expect(screen.getByText(pattern)).toBeInTheDocument();
+  });
+});