feat(frontend): sprint 4 — dark mode + matrix overhaul + tactic selection + done read-only + UI polish

US-17: fix duplicate "Create engagement" button, icon conventions (Save/RotateCcw/Grid2x2), UsersAdminPage form baseline alignment
US-18: done status fully read-only + Reopen button (done → review_required) for all roles
US-19: invalidate engagement queries on simulation PATCH/transition for auto-status propagation
US-20: MitreMatrixModal rewritten — CSS grid 12-column layout, no horizontal scroll, attack.mitre.org compact look
US-21: tactic header clickable in matrix, tactic chips (MitreTacticTag) in field, single atomic PATCH with technique_ids + tactic_ids
US-22: MitreTechniquesField chips-only area + inline search input + matrix icon button; chips show ID-only (name in title=)
US-23: useTheme hook — 3-state light/dark/system, CSS variables, Tailwind darkMode class, localStorage persistence

92/92 tests passing, typecheck and lint clean.

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

frontend/tests/MitreTechniqueTag.test.tsx

@@ -1,18 +1,22 @@
 import { describe, expect, it, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MitreTechniqueTag } from '@/components/MitreTechniqueTag';
+import { MitreTechniqueTag, MitreTacticTag } from '@/components/MitreTechniqueTag';
 import { renderWithProviders } from './utils';
+import type { MitreTacticRef } from '@/api/types';
 
 const TECHNIQUE = { id: 'T1059', name: 'Command and Scripting Interpreter', tactics: ['execution'] };
+const TACTIC: MitreTacticRef = { id: 'TA0007', name: 'Discovery' };
 
 describe('MitreTechniqueTag', () => {
-  it('renders id and name', () => {
+  it('renders id and name in title attribute (AC-22.2)', () => {
     renderWithProviders(
       <MitreTechniqueTag technique={TECHNIQUE} onRemove={vi.fn()} />,
     );
     expect(screen.getByText('T1059')).toBeInTheDocument();
-    expect(screen.getByText(/Command and Scripting Interpreter/)).toBeInTheDocument();
+    // Name is in title= only, not as visible text
+    expect(screen.getByTitle(/Command and Scripting Interpreter/)).toBeInTheDocument();
+    expect(screen.queryByText(/Command and Scripting Interpreter/)).toBeNull();
   });
 
   it('shows remove button when not disabled', () => {
@@ -39,3 +43,37 @@ describe('MitreTechniqueTag', () => {
     expect(screen.queryByRole('button', { name: /Remove/i })).toBeNull();
   });
 });
+
+describe('MitreTacticTag', () => {
+  it('renders tactic id with title containing name', () => {
+    renderWithProviders(
+      <MitreTacticTag tactic={TACTIC} onRemove={vi.fn()} />,
+    );
+    expect(screen.getByText('TA0007')).toBeInTheDocument();
+    expect(screen.getByTitle(/Discovery/)).toBeInTheDocument();
+  });
+
+  it('shows remove button when not disabled', () => {
+    renderWithProviders(
+      <MitreTacticTag tactic={TACTIC} onRemove={vi.fn()} />,
+    );
+    expect(screen.getByRole('button', { name: /Remove TA0007/i })).toBeInTheDocument();
+  });
+
+  it('clicking × calls onRemove', async () => {
+    const onRemove = vi.fn();
+    const user = userEvent.setup();
+    renderWithProviders(
+      <MitreTacticTag tactic={TACTIC} onRemove={onRemove} />,
+    );
+    await user.click(screen.getByRole('button', { name: /Remove TA0007/i }));
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
+
+  it('hides remove button when disabled', () => {
+    renderWithProviders(
+      <MitreTacticTag tactic={TACTIC} onRemove={vi.fn()} disabled />,
+    );
+    expect(screen.queryByRole('button', { name: /Remove/i })).toBeNull();
+  });
+});