feat(api-tokens): UI fuer Bearer-Tokens — Modul 3/16 des UI-Backlogs

Backend existierte vollstaendig (POST create mit Einmal-Plaintext-Anzeige,
GET list ohne Hashes, DELETE revoke; mcp:read/mcp:write via mcp_server-
Plugin registriert), Frontend hatte 0% Abdeckung.

- api/apiTokens.ts: TanStack-Hooks (useApiTokens, create mit
  ApiTokenCreated-Response inkl. Einmal-Token, revoke)
- pages/ApiTokens.tsx: Token-Karten (Name, Scope-Badges, Ablauf, zuletzt
  genutzt, Abgelaufen-Badge), Create-Dialog (Name, Scopes als
  Komma-Liste, optionale Gueltigkeit in Tagen), EINMALIGE
  Plaintext-Anzeige mit Copy-Button und Warnung, Revoke mit Confirm —
  Aktionen hinter mcp:write gegated
- Platzierung: Settings-Subpage /settings/api-tokens (statisch, Core-Route)
  + Settings-Nav-Item (true-core-settings-Muster)
- i18n apiTokens.* de/en

Verifikation: Vitest 8/8 (Rendering, Scopes, Ablauf-Badge,
Permission-Gating, Create-Flow mit Reveal-Dialog, Revoke) · tsc exit 0 ·
production build exit 0.

frontend/src/__tests__/pages/ApiTokens.test.tsx

@@ -0,0 +1,157 @@
+/**
+ * ApiTokens page tests — Bearer token management (module 3/16).
+ *
+ * Covers: rendering, token cards with scopes/expiry, create flow with
+ * ONE-TIME plaintext reveal, copy button, revoke with confirmation,
+ * permission gating (mcp:write), empty and error states.
+ */
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ApiTokensPage } from '@/pages/ApiTokens';
+import type { ApiTokenInfo } from '@/api/apiTokens';
+
+const createMut = vi.fn().mockImplementation((_payload, opts) => {
+  opts?.onSuccess?.({
+    id: 'tk-new', token: 'secret-plaintext-token', name: 'CI', scopes: [],
+    expires_at: null, last_used_at: null, created_at: '2026-09-13T09:00:00Z',
+  });
+  return Promise.resolve({});
+});
+const revokeMut = vi.fn().mockResolvedValue({});
+
+const makeToken = (overrides: Partial<ApiTokenInfo> = {}): ApiTokenInfo => ({
+  id: 'tk-1',
+  name: 'CI Integration',
+  scopes: ['contacts:read', 'mail:read'],
+  expires_at: null,
+  last_used_at: null,
+  created_at: '2026-09-01T10:00:00Z',
+  ...overrides,
+});
+
+let mockItems: ApiTokenInfo[] = [];
+let mockCanWrite = true;
+let mockError = false;
+
+vi.mock('@/api/apiTokens', () => ({
+  useApiTokens: () => ({
+    data: { items: mockItems, total: mockItems.length },
+    isLoading: false,
+    isError: mockError,
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+  useCreateApiToken: () => ({
+    mutate: createMut,
+    isPending: false,
+  }),
+  useRevokeApiToken: () => ({
+    mutate: revokeMut,
+    isPending: false,
+  }),
+}));
+
+vi.mock('@/hooks/usePermission', () => ({
+  usePermission: () => ({
+    hasPermission: (perm: string) => mockCanWrite || perm !== 'mcp:write',
+  }),
+}));
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <ApiTokensPage />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockItems = [];
+  mockCanWrite = true;
+  mockError = false;
+});
+
+describe('ApiTokensPage', () => {
+  it('renders the page with title', () => {
+    renderPage();
+    expect(screen.getByTestId('api-tokens-page')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no tokens exist', () => {
+    renderPage();
+    expect(screen.getByTestId('api-tokens-empty')).toBeInTheDocument();
+  });
+
+  it('shows error state on load failure', () => {
+    mockError = true;
+    renderPage();
+    expect(screen.getByTestId('api-tokens-error')).toBeInTheDocument();
+  });
+
+  it('renders token cards with scopes', () => {
+    mockItems = [makeToken()];
+    renderPage();
+    expect(screen.getByTestId('api-token-card-tk-1')).toBeInTheDocument();
+    expect(screen.getByText('CI Integration')).toBeInTheDocument();
+    expect(screen.getByText('contacts:read')).toBeInTheDocument();
+    expect(screen.getByText('mail:read')).toBeInTheDocument();
+  });
+
+  it('shows expired badge for expired tokens', () => {
+    mockItems = [makeToken({ expires_at: '2020-01-01T00:00:00Z' })];
+    renderPage();
+    expect(screen.getByTestId(`api-token-expired-tk-1`)).toBeInTheDocument();
+  });
+
+  it('hides create + revoke without mcp:write permission', () => {
+    mockItems = [makeToken()];
+    mockCanWrite = false;
+    const { container } = renderPage();
+    expect(screen.queryByTestId('api-token-create-open')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('api-token-revoke-tk-1')).not.toBeInTheDocument();
+    expect(container).toBeTruthy();
+  });
+
+  it('creates a token and reveals the plaintext ONCE with copy button', async () => {
+    renderPage();
+    fireEvent.click(screen.getByTestId('api-token-create-open'));
+    expect(screen.getByTestId('api-token-create-submit')).toBeInTheDocument();
+
+    const nameInput = screen.getByLabelText(/name/i, { selector: 'input' }) as HTMLInputElement;
+    fireEvent.change(nameInput, { target: { value: 'CI' } });
+    fireEvent.change(screen.getByLabelText(/scopes/i, { selector: 'input' }), {
+      target: { value: 'contacts:read, mail:read' },
+    });
+
+    fireEvent.click(screen.getByTestId('api-token-create-submit'));
+
+    await waitFor(() => {
+      expect(createMut).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'CI',
+          scopes: ['contacts:read', 'mail:read'],
+        }),
+        expect.anything(),
+      );
+    });
+
+    // ONE-TIME reveal dialog shows the plaintext token
+    expect(await screen.findByTestId('api-token-plaintext')).toHaveTextContent(
+      'secret-plaintext-token',
+    );
+    expect(screen.getByTestId('api-token-copy')).toBeInTheDocument();
+  });
+
+  it('revokes a token after confirmation', async () => {
+    mockItems = [makeToken()];
+    window.confirm = vi.fn(() => true);
+    renderPage();
+    fireEvent.click(screen.getByTestId('api-token-revoke-tk-1'));
+    await waitFor(() => {
+      expect(revokeMut).toHaveBeenCalledWith('tk-1');
+    });
+  });
+});