feat(frontend): sprint 2 — simulations UI + MITRE picker

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/tests/SimulationStatusBadge.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { SimulationStatusBadge } from '@/components/SimulationStatusBadge';
+import type { SimulationStatus } from '@/api/types';
+
+const CASES: { status: SimulationStatus; label: string }[] = [
+  { status: 'pending', label: 'Pending' },
+  { status: 'in_progress', label: 'In progress' },
+  { status: 'review_required', label: 'Review required' },
+  { status: 'done', label: 'Done' },
+];
+
+describe('SimulationStatusBadge', () => {
+  it.each(CASES)('renders $status with correct label and data attr', ({ status, label }) => {
+    render(<SimulationStatusBadge status={status} />);
+    const badge = screen.getByTestId('simulation-status-badge');
+    expect(badge).toHaveAttribute('data-status', status);
+    expect(badge.textContent).toBe(label);
+  });
+
+  it('applies fog surface for pending', () => {
+    render(<SimulationStatusBadge status="pending" />);
+    const badge = screen.getByTestId('simulation-status-badge');
+    expect(badge.className).toContain('bg-fog');
+  });
+
+  it('applies primary-soft surface for in_progress', () => {
+    render(<SimulationStatusBadge status="in_progress" />);
+    const badge = screen.getByTestId('simulation-status-badge');
+    expect(badge.className).toContain('bg-primary-soft');
+  });
+
+  it('applies bloom-coral surface for review_required', () => {
+    render(<SimulationStatusBadge status="review_required" />);
+    const badge = screen.getByTestId('simulation-status-badge');
+    expect(badge.className).toContain('bg-bloom-coral');
+  });
+
+  it('applies storm-deep surface for done', () => {
+    render(<SimulationStatusBadge status="done" />);
+    const badge = screen.getByTestId('simulation-status-badge');
+    expect(badge.className).toContain('bg-storm-deep');
+  });
+});