feat(ui): External-Agent-API + Besitzübertragung UI (UI-Backlog Module 15+16/16)

Modul 15 External-Agent (ai_assistant-Plugin, Manifest settings_page):
- SettingsExternalAgents.tsx: Agentenliste mit curl-Snippets (run/status/stream),
  Copy-Buttons, Bearer-Token-Hinweis, Rate-Limit-Doku, Token-Link
- api/externalAgent.ts (useAiAgents, buildCurlSnippets, curlCommand)
- Manifest: settings_pages +external-agents (order 61, permission ai:read)
- Komponenten-Map regeneriert (43)

Modul 16 Ownership-Transfer (Core):
- SettingsOwnership.tsx: Admin-Gate, From/To-User-Selects, 10 Entity-Type-Chips,
  ConfirmDialog, Ergebnis-Tabelle
- api/ownership.ts (useTransferOwnership, OWNERSHIP_ENTITY_TYPES)
- Route /settings/ownership + Nav-Eintrag

i18n de/en +28 Keys. Vitest 12/12, tsc 0, Build OK, ruff OK, Manifest-Import OK

app/plugins/builtins/ai_assistant/plugin.py

@@ -59,6 +59,7 @@ class AIAssistantPlugin(BasePlugin):
         ],
         settings_pages=[
             FrontendSettingsPage(path='ai', label_key='settings.ai', label='AI Settings', component='@/pages/AISettings', icon='Bot', order=60),
+            FrontendSettingsPage(path='external-agents', label_key='settings.externalAgents', label='External Agents API', component='@/pages/SettingsExternalAgents', icon='Bot', order=61, permission='ai:read'),
         ],
         author="LeoCRM Team",
         min_app_version="1.0.0",

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

@@ -0,0 +1,102 @@
+/**
+ * External Agents settings page tests — integration guide UI
+ * (UI-Backlog module 15/16).
+ *
+ * Covers: page render, agent cards with curl snippets, copy buttons,
+ * empty state, auth hint with token link.
+ */
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { SettingsExternalAgentsPage } from '@/pages/SettingsExternalAgents';
+
+type AgentLike = {
+  id: string;
+  name: string;
+  description: string;
+  is_active: boolean;
+};
+
+const makeAgent = (overrides: Partial<AgentLike> = {}): AgentLike => ({
+  id: '11111111-1111-1111-1111-111111111111',
+  name: 'Helpdesk Agent',
+  description: 'Answers support questions',
+  is_active: true,
+  ...overrides,
+});
+
+let mockAgents: AgentLike[] = [];
+let mockLoading = false;
+
+vi.mock('@/api/externalAgent', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/externalAgent')>();
+  return {
+    ...actual,
+    useAiAgents: () => ({ data: mockAgents, isLoading: mockLoading, isError: false }),
+  };
+});
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <SettingsExternalAgentsPage />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockAgents = [];
+  mockLoading = false;
+});
+
+describe('SettingsExternalAgentsPage', () => {
+  it('renders the page with auth hint and token link', () => {
+    renderPage();
+    expect(screen.getByTestId('settings-external-agents-page')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /API-Tokens verwalten|Manage API tokens/i })).toBeInTheDocument();
+  });
+
+  it('renders empty state when no agents exist', () => {
+    renderPage();
+    expect(screen.getByText(/Keine KI-Agenten|No AI agents/i)).toBeInTheDocument();
+  });
+
+  it('renders agent cards with three curl snippets each', () => {
+    mockAgents = [makeAgent()];
+    renderPage();
+    expect(screen.getByTestId('external-agent-card-11111111-1111-1111-1111-111111111111')).toBeInTheDocument();
+    expect(screen.getByTestId('curl-snippet-11111111-1111-1111-1111-111111111111-runAgent')).toBeInTheDocument();
+    expect(screen.getByTestId('curl-snippet-11111111-1111-1111-1111-111111111111-getStatus')).toBeInTheDocument();
+    expect(screen.getByTestId('curl-snippet-11111111-1111-1111-1111-111111111111-streamAgent (SSE)')).toBeInTheDocument();
+  });
+
+  it('curl snippets contain endpoint URLs and bearer placeholder', () => {
+    mockAgents = [makeAgent()];
+    renderPage();
+    const runSnippet = screen.getByTestId('curl-snippet-11111111-1111-1111-1111-111111111111-runAgent');
+    expect(runSnippet.textContent).toContain('/api/v1/external/agent/11111111-1111-1111-1111-111111111111/run');
+    expect(runSnippet.textContent).toContain('Bearer <API_TOKEN>');
+    const statusSnippet = screen.getByTestId('curl-snippet-11111111-1111-1111-1111-111111111111-getStatus');
+    expect(statusSnippet.textContent).toContain('/status');
+  });
+
+  it('renders copy buttons per snippet', () => {
+    mockAgents = [makeAgent()];
+    renderPage();
+    expect(screen.getByTestId('curl-copy-11111111-1111-1111-1111-111111111111-runAgent')).toBeInTheDocument();
+    expect(screen.getByTestId('curl-copy-11111111-1111-1111-1111-111111111111-getStatus')).toBeInTheDocument();
+  });
+
+  it('renders multiple agents', () => {
+    mockAgents = [
+      makeAgent(),
+      makeAgent({ id: '22222222-2222-2222-2222-222222222222', name: 'Second Agent', is_active: false }),
+    ];
+    renderPage();
+    expect(screen.getByTestId('external-agent-card-11111111-1111-1111-1111-111111111111')).toBeInTheDocument();
+    expect(screen.getByTestId('external-agent-card-22222222-2222-2222-2222-222222222222')).toBeInTheDocument();
+    expect(screen.getByText('Second Agent')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,146 @@
+/**
+ * Ownership transfer settings page tests — admin bulk ownership transfer
+ * (UI-Backlog module 16/16).
+ *
+ * Covers: admin gate, user selects, entity type toggles, submit gating,
+ * transfer flow with result display.
+ */
+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 { SettingsOwnershipPage } from '@/pages/SettingsOwnership';
+
+const transferMut = vi.fn().mockResolvedValue({
+  message: 'Ownership transfer completed',
+  results: { contacts: 5, workflows: 0 },
+});
+
+const makeUser = (id: string, name: string, email: string) => ({
+  id,
+  email,
+  name,
+  first_name: null,
+  last_name: null,
+  avatar_url: null,
+  role: 'admin',
+  role_id: null,
+  is_active: true,
+  tenant_id: 't-1',
+});
+
+let mockIsAdmin = true;
+let mockUsers: unknown[] = [];
+let mockLoading = false;
+
+vi.mock('@/api/ownership', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/api/ownership')>();
+  return {
+    ...actual,
+    useTransferOwnership: () => ({ mutate: transferMut, mutateAsync: transferMut, isPending: false }),
+  };
+});
+
+vi.mock('@/api/users', () => ({
+  useUsers: () => ({ data: { items: mockUsers, total: mockUsers.length }, isLoading: mockLoading }),
+}));
+
+vi.mock('@/store/authStore', () => ({
+  useAuthStore: (selector: (state: { user: { is_system_admin: boolean } | null }) => unknown) =>
+    selector({ user: { is_system_admin: mockIsAdmin } }),
+}));
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <SettingsOwnershipPage />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockIsAdmin = true;
+  mockLoading = false;
+  mockUsers = [
+    makeUser('11111111-1111-1111-1111-111111111111', 'Alte Mitarbeiterin', 'old@example.de'),
+    makeUser('22222222-2222-2222-2222-222222222222', 'Nachfolger', 'new@example.de'),
+  ];
+  transferMut.mockResolvedValue({
+    message: 'Ownership transfer completed',
+    results: { contacts: 5, workflows: 0 },
+  });
+});
+
+describe('SettingsOwnershipPage', () => {
+  it('renders admin-only notice for non-admin users', () => {
+    mockIsAdmin = false;
+    renderPage();
+    expect(screen.getByTestId('ownership-admin-only')).toBeInTheDocument();
+    expect(screen.queryByTestId('ownership-form')).not.toBeInTheDocument();
+  });
+
+  it('renders the form with two user selects and 10 entity type buttons', () => {
+    renderPage();
+    expect(screen.getByTestId('ownership-form')).toBeInTheDocument();
+    expect(screen.getByTestId('ownership-from')).toBeInTheDocument();
+    expect(screen.getByTestId('ownership-to')).toBeInTheDocument();
+    expect(screen.getByTestId('ownership-type-contacts')).toBeInTheDocument();
+    expect(screen.getByTestId('ownership-type-notifications')).toBeInTheDocument();
+  });
+
+  it('submit is disabled without both users selected', () => {
+    renderPage();
+    const btn = screen.getByTestId('ownership-submit-btn') as HTMLButtonElement;
+    expect(btn.disabled).toBe(true);
+  });
+
+  it('submit is disabled when from and to are the same user', () => {
+    renderPage();
+    const from = screen.getByTestId('ownership-from') as HTMLSelectElement;
+    fireEvent.change(from, { target: { value: '11111111-1111-1111-1111-111111111111' } });
+    const to = screen.getByTestId('ownership-to') as HTMLSelectElement;
+    fireEvent.change(to, { target: { value: '11111111-1111-1111-1111-111111111111' } });
+    const btn = screen.getByTestId('ownership-submit-btn') as HTMLButtonElement;
+    expect(btn.disabled).toBe(true);
+  });
+
+  it('toggles entity types on click', () => {
+    renderPage();
+    const chip = screen.getByTestId('ownership-type-contacts');
+    expect(chip.getAttribute('aria-pressed')).toBe('false');
+    fireEvent.click(chip);
+    expect(chip.getAttribute('aria-pressed')).toBe('true');
+    fireEvent.click(chip);
+    expect(chip.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('transfers ownership after confirmation and shows the result', async () => {
+    renderPage();
+    const from = screen.getByTestId('ownership-from') as HTMLSelectElement;
+    fireEvent.change(from, { target: { value: '11111111-1111-1111-1111-111111111111' } });
+    const to = screen.getByTestId('ownership-to') as HTMLSelectElement;
+    fireEvent.change(to, { target: { value: '22222222-2222-2222-2222-222222222222' } });
+    fireEvent.click(screen.getByTestId('ownership-type-contacts'));
+
+    const btn = screen.getByTestId('ownership-submit-btn') as HTMLButtonElement;
+    expect(btn.disabled).toBe(false);
+    fireEvent.click(btn);
+
+    const confirmBtn = await screen.findByRole('button', { name: 'Bestätigen' });
+    fireEvent.click(confirmBtn);
+
+    await waitFor(() => {
+      expect(transferMut).toHaveBeenCalledTimes(1);
+    });
+    expect(transferMut).toHaveBeenCalledWith({
+      from_user_id: '11111111-1111-1111-1111-111111111111',
+      to_user_id: '22222222-2222-2222-2222-222222222222',
+      entity_types: ['contacts'],
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('ownership-result')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/api/externalAgent.ts

@@ -0,0 +1,74 @@
+/**
+ * External Agent API integration client (UI-Backlog module 15/16).
+ *
+ * Backend: /api/v1/external/agent (ai_assistant plugin, external_api.py).
+ * - POST /{agent_id}/run    → run agent, return full response (Bearer auth)
+ * - GET  /{agent_id}/status → agent config + run stats (Bearer auth)
+ * - POST /{agent_id}/stream → SSE stream response (Bearer auth)
+ *
+ * These endpoints are Bearer-token-only (no session cookies) — they are
+ * meant for EXTERNAL systems, not the SPA itself. The UI is therefore an
+ * integration page: it lists the tenant's AI agents (via the existing
+ * /ai/agents endpoint) and renders copy-paste curl snippets per agent.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { fetchAgents, type AIAgent } from '@/api/ai';
+
+/** TanStack wrapper around the existing fetchAgents (session auth). */
+export function useAiAgents() {
+  return useQuery({
+    queryKey: ['ai-agents'],
+    queryFn: () => fetchAgents(),
+  });
+}
+
+export interface CurlSnippet {
+  method: 'POST' | 'GET';
+  endpoint: string;
+  body?: string;
+  description: string;
+}
+
+/** Base URL of this deployment (works for prod and local dev). */
+export function externalBaseUrl(): string {
+  return `${window.location.origin}/api/v1/external/agent`;
+}
+
+/** Build the copy-paste curl examples for one agent. */
+export function buildCurlSnippets(agentId: string): CurlSnippet[] {
+  const base = externalBaseUrl();
+  return [
+    {
+      method: 'POST',
+      endpoint: `${base}/${agentId}/run`,
+      body: JSON.stringify({ message: 'Hello, summarize my open tasks' }),
+      description: 'runAgent',
+    },
+    {
+      method: 'GET',
+      endpoint: `${base}/${agentId}/status`,
+      description: 'getStatus',
+    },
+    {
+      method: 'POST',
+      endpoint: `${base}/${agentId}/stream`,
+      body: JSON.stringify({ message: 'Hello, stream me an answer' }),
+      description: 'streamAgent (SSE)',
+    },
+  ];
+}
+
+/** Render a single-line curl command for a snippet. */
+export function curlCommand(snippet: CurlSnippet): string {
+  const parts: string[] = [];
+  parts.push(`curl -X ${snippet.method} '${snippet.endpoint}'`);
+  parts.push(`-H 'Authorization: Bearer <API_TOKEN>'`);
+  if (snippet.body) {
+    parts.push(`-H 'Content-Type: application/json'`);
+    parts.push(`-d '${snippet.body}'`);
+  }
+  return parts.join(' ');
+}
+
+export type { AIAgent };

frontend/src/api/ownership.ts

@@ -0,0 +1,46 @@
+/**
+ * Ownership transfer API client (UI-Backlog module 16/16).
+ *
+ * Backend: /api/v1/ownership (app/routes/owner_transfer.py, require_admin).
+ * - POST /transfer → bulk-transfer records from one user to another
+ *
+ * Entity types: contacts, addresses, attachments, bank_accounts,
+ * workflows, sequences, saved_filters, saved_views, webhooks,
+ * notifications (mirrored from owner_transfer_service.ENTITY_TABLES).
+ */
+
+import { useMutation } from '@tanstack/react-query';
+import { apiPost } from '@/api/client';
+
+export const OWNERSHIP_ENTITY_TYPES = [
+  'contacts',
+  'addresses',
+  'attachments',
+  'bank_accounts',
+  'workflows',
+  'sequences',
+  'saved_filters',
+  'saved_views',
+  'webhooks',
+  'notifications',
+] as const;
+
+export type OwnershipEntityType = (typeof OWNERSHIP_ENTITY_TYPES)[number];
+
+export interface OwnershipTransferPayload {
+  from_user_id: string;
+  to_user_id: string;
+  entity_types?: string[] | null;
+}
+
+export interface OwnershipTransferResult {
+  message: string;
+  results: Record<string, number>;
+}
+
+export function useTransferOwnership() {
+  return useMutation({
+    mutationFn: (data: OwnershipTransferPayload) =>
+      apiPost<OwnershipTransferResult>('/ownership/transfer', data),
+  });
+}

frontend/src/generated/pluginComponents.generated.ts

@@ -51,6 +51,7 @@ export const PLUGIN_COMPONENT_MAP: Record<string, LazyComponentFactory> = {
   '@/pages/Marketplace': () => import('@/pages/Marketplace').then(normalizeModule),
   '@/pages/ProactiveAISettings': () => import('@/pages/ProactiveAISettings').then((m) => ({ default: m.ProactiveAISettings })),
   '@/pages/Reports': () => import('@/pages/Reports').then((m) => ({ default: m.ReportsPage })),
+  '@/pages/SettingsExternalAgents': () => import('@/pages/SettingsExternalAgents').then((m) => ({ default: m.SettingsExternalAgentsPage })),
   '@/pages/SettingsGroups': () => import('@/pages/SettingsGroups').then((m) => ({ default: m.SettingsGroupsPage })),
   '@/pages/SettingsNotifications': () => import('@/pages/SettingsNotifications').then((m) => ({ default: m.SettingsNotificationsPage })),
   '@/pages/SettingsRoles': () => import('@/pages/SettingsRoles').then((m) => ({ default: m.SettingsRolesPage })),

frontend/src/i18n/locales/de.json

@@ -403,7 +403,35 @@
     "guestStatus_active": "Aktiv",
     "guestStatus_invited": "Eingeladen",
     "guestStatus_disabled": "Widerrufen",
-    "guestStatus_unknown": "Unbekannt"
+    "guestStatus_unknown": "Unbekannt",
+    "externalAgents": "Externe Agenten-API",
+    "externalAgentsHint": "Integrationsschnittstelle für externe Systeme (n8n, Skripte, Apps): KI-Agenten per Bearer-Token ausführen, Status abrufen oder Antworten streamen.",
+    "externalAgentsAuthHint": "Authentifizierung ausschließlich per Bearer-API-Token (keine Session-Cookies). Rate-Limit: 10 Anfragen/Minute pro Token.",
+    "externalAgentsTokenLink": "API-Tokens verwalten →",
+    "noExternalAgents": "Keine KI-Agenten vorhanden",
+    "ownership": "Besitzübertragung",
+    "ownershipHint": "Überträgt alle Datensätze eines Benutzers auf einen anderen — z.B. wenn ein Mitarbeiter das Unternehmen verlässt. Admin-only, wird im Audit-Log protokolliert.",
+    "ownershipAdminOnly": "Nur Administratoren können Besitz übertragen.",
+    "ownershipFrom": "Bisheriger Besitzer",
+    "ownershipTo": "Neuer Besitzer",
+    "ownershipEntityTypes": "Datentypen",
+    "ownershipAllHint": "keine Auswahl = alle Typen",
+    "ownershipSelectedTypes": "{{count}} Typen ausgewählt",
+    "ownershipAllTypes": "alle Typen",
+    "ownershipTransfer": "Übertragen",
+    "ownershipConfirm": "Besitz wirklich übertragen",
+    "ownershipTransferred": "Besitzübertragung abgeschlossen",
+    "ownershipResult": "Ergebnis",
+    "ownershipType_contacts": "Kontakte",
+    "ownershipType_addresses": "Adressen",
+    "ownershipType_attachments": "Dateianhänge",
+    "ownershipType_bank_accounts": "Bankkonten",
+    "ownershipType_workflows": "Workflows",
+    "ownershipType_sequences": "Nummernkreise",
+    "ownershipType_saved_filters": "Gespeicherte Filter",
+    "ownershipType_saved_views": "Gespeicherte Ansichten",
+    "ownershipType_webhooks": "Webhooks",
+    "ownershipType_notifications": "Benachrichtigungen"
   },
   "auditLog": {
     "title": "Audit-Log",

frontend/src/i18n/locales/en.json

@@ -403,7 +403,35 @@
     "guestStatus_active": "Active",
     "guestStatus_invited": "Invited",
     "guestStatus_disabled": "Revoked",
-    "guestStatus_unknown": "Unknown"
+    "guestStatus_unknown": "Unknown",
+    "externalAgents": "External Agents API",
+    "externalAgentsHint": "Integration interface for external systems (n8n, scripts, apps): run AI agents via Bearer token, fetch status, or stream responses.",
+    "externalAgentsAuthHint": "Authentication via Bearer API token only (no session cookies). Rate limit: 10 requests/minute per token.",
+    "externalAgentsTokenLink": "Manage API tokens →",
+    "noExternalAgents": "No AI agents configured",
+    "ownership": "Ownership Transfer",
+    "ownershipHint": "Transfers all records from one user to another — e.g. when an employee leaves the company. Admin-only, recorded in the audit log.",
+    "ownershipAdminOnly": "Only administrators can transfer ownership.",
+    "ownershipFrom": "Current owner",
+    "ownershipTo": "New owner",
+    "ownershipEntityTypes": "Entity types",
+    "ownershipAllHint": "no selection = all types",
+    "ownershipSelectedTypes": "{{count}} types selected",
+    "ownershipAllTypes": "all types",
+    "ownershipTransfer": "Transfer",
+    "ownershipConfirm": "Really transfer ownership",
+    "ownershipTransferred": "Ownership transfer completed",
+    "ownershipResult": "Result",
+    "ownershipType_contacts": "Contacts",
+    "ownershipType_addresses": "Addresses",
+    "ownershipType_attachments": "Attachments",
+    "ownershipType_bank_accounts": "Bank accounts",
+    "ownershipType_workflows": "Workflows",
+    "ownershipType_sequences": "Sequences",
+    "ownershipType_saved_filters": "Saved filters",
+    "ownershipType_saved_views": "Saved views",
+    "ownershipType_webhooks": "Webhooks",
+    "ownershipType_notifications": "Notifications"
   },
   "auditLog": {
     "title": "Audit Log",

frontend/src/pages/Settings.tsx

@@ -53,6 +53,7 @@ export function SettingsPage() {
     { to: '/settings/permission-templates', label: 'Berechtigungs-Vorlagen', icon: '\ud83d\udd11' },
     { to: '/settings/policies', label: 'ABAC-Richtlinien', icon: '\ud83d\udee1\ufe0f' },
     { to: '/settings/guests', label: 'Gäste', icon: '\ud83d\udc64' },
+    { to: '/settings/ownership', label: 'Besitzübertragung', icon: '\ud83d\udce4' },
   ];
 
   const existingPaths = new Set(hardcodedNavItems.map(item => item.to));

frontend/src/pages/SettingsExternalAgents.tsx

@@ -0,0 +1,150 @@
+/**
+ * External Agents API settings page — integration guide for external
+ * systems (UI-Backlog module 15/16).
+ *
+ * Backend: /api/v1/external/agent (ai_assistant plugin, external_api.py).
+ * - POST /{agent_id}/run    → run agent (Bearer auth, 10 req/min)
+ * - GET  /{agent_id}/status → agent status + run stats
+ * - POST /{agent_id}/stream → SSE stream
+ *
+ * These endpoints are Bearer-token-only (no session cookies) — meant for
+ * external systems (n8n, scripts, other apps). This page lists the
+ * tenant's AI agents and renders copy-paste curl snippets per agent.
+ */
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { Bot, Copy, Check, Inbox } from 'lucide-react';
+import {
+  useAiAgents,
+  buildCurlSnippets,
+  curlCommand,
+  type AIAgent,
+} from '@/api/externalAgent';
+import { Card } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Skeleton } from '@/components/ui/Skeleton';
+
+function CopyButton({ text, testId }: { text: string; testId: string }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // clipboard API unavailable — user can select manually
+    }
+  };
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={copy}
+      aria-label="copy"
+      data-testid={testId}
+    >
+      {copied ? (
+        <Check className="w-4 h-4 text-success-600" aria-hidden="true" />
+      ) : (
+        <Copy className="w-4 h-4" aria-hidden="true" />
+      )}
+    </Button>
+  );
+}
+
+function AgentCard({ agent }: { agent: AIAgent }) {
+  const { t } = useTranslation();
+  const snippets = buildCurlSnippets(agent.id);
+
+  return (
+    <Card className="p-4" data-testid={`external-agent-card-${agent.id}`}>
+      <div className="flex items-center gap-2 mb-3">
+        <Bot className="w-4 h-4 text-primary-600 flex-shrink-0" aria-hidden="true" />
+        <span className="text-sm font-medium text-secondary-900 dark:text-secondary-100">
+          {agent.name}
+        </span>
+        <Badge variant={agent.is_active ? 'success' : 'secondary'} dot>
+          {agent.is_active ? t('common.active') : t('common.inactive')}
+        </Badge>
+      </div>
+      {agent.description && (
+        <p className="text-xs text-secondary-500 dark:text-secondary-400 mb-3">
+          {agent.description}
+        </p>
+      )}
+      <div className="space-y-2">
+        {snippets.map((snippet) => (
+          <div
+            key={snippet.description}
+            className="bg-secondary-50 dark:bg-secondary-900/50 rounded-lg p-3"
+            data-testid={`curl-snippet-${agent.id}-${snippet.description}`}
+          >
+            <div className="flex items-center justify-between gap-2 mb-1">
+              <span className="text-xs font-medium text-secondary-600 dark:text-secondary-300">
+                {snippet.description}
+              </span>
+              <CopyButton
+                text={curlCommand(snippet)}
+                testId={`curl-copy-${agent.id}-${snippet.description}`}
+              />
+            </div>
+            <pre className="text-xs text-secondary-700 dark:text-secondary-200 overflow-x-auto whitespace-pre-wrap break-all">
+              {curlCommand(snippet)}
+            </pre>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
+
+export function SettingsExternalAgentsPage() {
+  const { t } = useTranslation();
+  const { data: agents, isLoading } = useAiAgents();
+
+  const items = agents ?? [];
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto" data-testid="settings-external-agents-page">
+      <div className="flex items-center justify-between mb-2">
+        <h1 className="text-2xl font-bold text-secondary-900">
+          {t('settings.externalAgents')}
+        </h1>
+      </div>
+      <p className="text-sm text-secondary-500 mb-4">{t('settings.externalAgentsHint')}</p>
+      <div className="mb-6 rounded-lg bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800 p-4">
+        <p className="text-xs text-primary-800 dark:text-primary-200">
+          {t('settings.externalAgentsAuthHint')}{' '}
+          <Link
+            to="/settings/api-tokens"
+            className="font-medium underline underline-offset-2"
+          >
+            {t('settings.externalAgentsTokenLink')}
+          </Link>
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div data-testid="external-agents-skeleton" className="space-y-3">
+          <Skeleton className="h-28" />
+          <Skeleton className="h-28" />
+        </div>
+      ) : items.length === 0 ? (
+        <EmptyState
+          icon={<Inbox className="w-8 h-8 text-secondary-400" aria-hidden="true" />}
+          title={t('settings.noExternalAgents')}
+        />
+      ) : (
+        <div className="space-y-4">
+          {items.map((agent) => (
+            <AgentCard key={agent.id} agent={agent} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/SettingsOwnership.tsx

@@ -0,0 +1,208 @@
+/**
+ * Ownership transfer settings page — admin bulk ownership transfer
+ * (UI-Backlog module 16/16).
+ *
+ * Backend: POST /api/v1/ownership/transfer (require_admin).
+ * Transfers all records (owner_id) from one user to another, optionally
+ * scoped to selected entity types (10 known types). Use case: employee
+ * leaves the company — their records move to the successor.
+ */
+
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Lock } from 'lucide-react';
+import { asError } from '@/utils/errorTypes';
+import {
+  useTransferOwnership,
+  OWNERSHIP_ENTITY_TYPES,
+  type OwnershipTransferResult,
+} from '@/api/ownership';
+import { useUsers, type UserResponse } from '@/api/users';
+import { useAuthStore } from '@/store/authStore';
+import { useToast } from '@/components/ui/Toast';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { Select } from '@/components/ui/Select';
+import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
+import { Skeleton } from '@/components/ui/Skeleton';
+
+export function SettingsOwnershipPage() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const user = useAuthStore((state) => state.user);
+  const isAdmin = user?.is_system_admin === true;
+
+  const { data: usersData, isLoading } = useUsers(1, 100);
+  const transferMutation = useTransferOwnership();
+
+  const [fromId, setFromId] = useState('');
+  const [toId, setToId] = useState('');
+  const [selectedTypes, setSelectedTypes] = useState<Set<string>>(new Set());
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [result, setResult] = useState<OwnershipTransferResult | null>(null);
+
+  const users: UserResponse[] = usersData?.items ?? [];
+
+  const userOptions = useMemo(
+    () => users.map((u) => ({ value: u.id, label: `${u.name} (${u.email})` })),
+    [users],
+  );
+
+  const fromUser = users.find((u) => u.id === fromId);
+  const toUser = users.find((u) => u.id === toId);
+
+  if (!isAdmin) {
+    return (
+      <div className="flex items-center justify-center min-h-[50vh]" role="alert">
+        <div className="text-center">
+          <Lock className="w-10 h-10 mx-auto text-secondary-400" aria-hidden="true" />
+          <p className="mt-3 text-sm text-secondary-600" data-testid="ownership-admin-only">
+            {t('settings.ownershipAdminOnly')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const toggleType = (entityType: string) => {
+    setSelectedTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(entityType)) {
+        next.delete(entityType);
+      } else {
+        next.add(entityType);
+      }
+      return next;
+    });
+  };
+
+  const handleTransfer = async () => {
+    try {
+      const payload = {
+        from_user_id: fromId,
+        to_user_id: toId,
+        entity_types: selectedTypes.size > 0 ? Array.from(selectedTypes) : null,
+      };
+      const res = await transferMutation.mutateAsync(payload);
+      setResult(res);
+      toast.success(t('settings.ownershipTransferred'));
+      setConfirmOpen(false);
+    } catch (err: unknown) {
+      const errObj = asError(err);
+      toast.error(errObj.message || t('common.error'));
+      setConfirmOpen(false);
+    }
+  };
+
+  const canSubmit = fromId && toId && fromId !== toId;
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto" data-testid="settings-ownership-page">
+      <div className="flex items-center justify-between mb-2">
+        <h1 className="text-2xl font-bold text-secondary-900">{t('settings.ownership')}</h1>
+      </div>
+      <p className="text-sm text-secondary-500 mb-6">{t('settings.ownershipHint')}</p>
+
+      {isLoading ? (
+        <div data-testid="ownership-skeleton" className="space-y-3">
+          <Skeleton className="h-20" />
+          <Skeleton className="h-20" />
+        </div>
+      ) : (
+        <Card className="p-5">
+          <div className="space-y-5" data-testid="ownership-form">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Select
+                label={t('settings.ownershipFrom')}
+                options={[{ value: '', label: '—' }, ...userOptions]}
+                value={fromId}
+                onChange={(e) => setFromId(e.target.value)}
+                data-testid="ownership-from"
+              />
+              <Select
+                label={t('settings.ownershipTo')}
+                options={[{ value: '', label: '—' }, ...userOptions]}
+                value={toId}
+                onChange={(e) => setToId(e.target.value)}
+                data-testid="ownership-to"
+              />
+            </div>
+
+            <div>
+              <p className="text-sm font-medium text-secondary-900 mb-2">
+                {t('settings.ownershipEntityTypes')}{' '}
+                <span className="text-secondary-500 font-normal">
+                  ({t('settings.ownershipAllHint')})
+                </span>
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {OWNERSHIP_ENTITY_TYPES.map((et) => (
+                  <button
+                    key={et}
+                    type="button"
+                    onClick={() => toggleType(et)}
+                    className={
+                      selectedTypes.has(et)
+                        ? 'px-3 py-1.5 rounded-full text-sm font-medium bg-primary-100 text-primary-700 border border-primary-300'
+                        : 'px-3 py-1.5 rounded-full text-sm font-medium bg-secondary-100 text-secondary-700 border border-secondary-200 hover:bg-secondary-200'
+                    }
+                    aria-pressed={selectedTypes.has(et)}
+                    data-testid={`ownership-type-${et}`}
+                  >
+                    {t(`settings.ownershipType_${et}`, et)}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end">
+              <Button
+                onClick={() => setConfirmOpen(true)}
+                disabled={!canSubmit || transferMutation.isPending}
+                data-testid="ownership-submit-btn"
+              >
+                {t('settings.ownershipTransfer')}
+              </Button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {result && (
+        <Card className="p-5 mt-6" data-testid="ownership-result">
+          <h2 className="text-lg font-semibold text-secondary-900 mb-3">
+            {t('settings.ownershipResult')}
+          </h2>
+          <div className="space-y-2">
+            {Object.entries(result.results).map(([entityType, count]) => (
+              <div key={entityType} className="flex items-center justify-between text-sm">
+                <span className="text-secondary-700">
+                  {t(`settings.ownershipType_${entityType}`, entityType)}
+                </span>
+                <Badge variant={count > 0 ? 'success' : 'secondary'}>{count}</Badge>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      <ConfirmDialog
+        open={confirmOpen}
+        title={t('settings.ownershipTransfer')}
+        message={
+          fromUser && toUser
+            ? `${t('settings.ownershipConfirm')}: ${fromUser.name} → ${toUser.name}? (${
+                selectedTypes.size > 0
+                  ? t('settings.ownershipSelectedTypes', { count: selectedTypes.size })
+                  : t('settings.ownershipAllTypes')
+              })`
+            : ''
+        }
+        variant="danger"
+        onConfirm={handleTransfer}
+        onCancel={() => setConfirmOpen(false)}
+      />
+    </div>
+  );
+}

frontend/src/routes/index.tsx

@@ -51,6 +51,7 @@ const TenantsPage = React.lazy(() => import('@/pages/Tenants').then(m => ({ defa
 const PermissionTemplatesPage = React.lazy(() => import('@/pages/PermissionTemplates').then(m => ({ default: m.PermissionTemplatesPage })));
 const SettingsPoliciesPage = React.lazy(() => import('@/pages/SettingsPolicies').then(m => ({ default: m.SettingsPoliciesPage })));
 const SettingsGuestsPage = React.lazy(() => import('@/pages/SettingsGuests').then(m => ({ default: m.SettingsGuestsPage })));
+const SettingsOwnershipPage = React.lazy(() => import('@/pages/SettingsOwnership').then(m => ({ default: m.SettingsOwnershipPage })));
 const SettingsWebhooksPage = React.lazy(() => import('@/pages/SettingsWebhooks').then(m => ({ default: m.SettingsWebhooksPage })));
 const SettingsBackupPage = React.lazy(() => import('@/pages/SettingsBackup').then(m => ({ default: m.SettingsBackupPage })));
 const WorkspaceManagerPage = React.lazy(() => import('@/pages/SettingsWorkspaces').then(m => ({ default: m.WorkspaceManagerPage })));
@@ -218,6 +219,7 @@ const router = createBrowserRouter([
           { path: 'permission-templates', element: withSuspense(<PermissionTemplatesPage />) },
           { path: 'policies', element: withSuspense(<SettingsPoliciesPage />) },
           { path: 'guests', element: withSuspense(<SettingsGuestsPage />) },
+          { path: 'ownership', element: withSuspense(<SettingsOwnershipPage />) },
           { path: 'rechte', element: <PermissionRoute permission="settings:read">{withSuspense(<SettingsRechtePage />)}</PermissionRoute> },
           // Phase Q2: plugin settings sub-pages render with bare sub-segments
           { path: '*', element: <ErrorBoundary>{<PluginRouteRenderer variant="settings" />}</ErrorBoundary> },