feat(ui): Gäste-Verwaltung UI — SettingsGuests (UI-Backlog Modul 14/16)

- api/guests.ts: useGuests, useInviteGuest, useRevokeGuest (/api/v1/guests)
- SettingsGuests.tsx: Admin-Gate (Outbox-Muster), Gästeliste mit Status-Badges
  (invited/active/disabled), Invite-Modal (RHF+zod), Revoke-ConfirmDialog
- Route /settings/guests + Nav-Eintrag in Settings.tsx
- i18n de/en: 14 Keys
- Vitest 8/8, tsc clean, Build OK

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

@@ -0,0 +1,154 @@
+/**
+ * Guests settings page tests — admin guest management UI
+ * (UI-Backlog module 14/16).
+ *
+ * Covers: admin gate, guest list rendering with status badges,
+ * invite dialog flow, revoke flow, empty state.
+ */
+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 { SettingsGuestsPage } from '@/pages/SettingsGuests';
+
+type GuestLike = {
+  id: string;
+  email: string;
+  name: string;
+  status: string;
+  role: string;
+  created_at: string | null;
+};
+
+const inviteMut = vi.fn().mockResolvedValue({});
+const revokeMut = vi.fn().mockResolvedValue({});
+
+const makeGuest = (overrides: Partial<GuestLike> = {}): GuestLike => ({
+  id: '11111111-1111-1111-1111-111111111111',
+  email: 'gast@example.de',
+  name: 'Test Gast',
+  status: 'active',
+  role: 'guest',
+  created_at: '2026-09-01T10:00:00Z',
+  ...overrides,
+});
+
+let mockGuests: GuestLike[] = [];
+let mockIsAdmin = true;
+let mockLoading = false;
+
+vi.mock('@/api/guests', () => ({
+  useGuests: () => ({ data: mockGuests, isLoading: mockLoading, isError: false }),
+  useInviteGuest: () => ({ mutate: inviteMut, mutateAsync: inviteMut, isPending: false }),
+  useRevokeGuest: () => ({ mutate: revokeMut, mutateAsync: revokeMut, isPending: false }),
+}));
+
+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>
+      <SettingsGuestsPage />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockGuests = [];
+  mockIsAdmin = true;
+  mockLoading = false;
+});
+
+describe('SettingsGuestsPage', () => {
+  it('renders admin-only notice for non-admin users', () => {
+    mockIsAdmin = false;
+    renderPage();
+    expect(screen.getByTestId('guests-admin-only')).toBeInTheDocument();
+    expect(screen.queryByTestId('invite-guest-btn')).not.toBeInTheDocument();
+  });
+
+  it('renders empty state when no guests exist', () => {
+    renderPage();
+    expect(screen.getByTestId('settings-guests-page')).toBeInTheDocument();
+    expect(screen.getByTestId('invite-guest-btn')).toBeInTheDocument();
+    // EmptyState text is rendered via i18n (noGuests)
+    expect(screen.getByText(/Noch keine Gäste|No guests/i)).toBeInTheDocument();
+  });
+
+  it('renders guest cards with status badges', () => {
+    mockGuests = [
+      makeGuest({ status: 'active' }),
+      makeGuest({ id: '22222222-2222-2222-2222-222222222222', email: 'pending@example.de', name: 'Pending Gast', status: 'invited' }),
+      makeGuest({ id: '33333333-3333-3333-3333-333333333333', email: 'gone@example.de', name: 'Gone Gast', status: 'disabled' }),
+    ];
+    renderPage();
+    expect(screen.getByTestId('guest-card-11111111-1111-1111-1111-111111111111')).toBeInTheDocument();
+    expect(screen.getByTestId('guest-card-22222222-2222-2222-2222-222222222222')).toBeInTheDocument();
+    expect(screen.getByTestId('guest-card-33333333-3333-3333-3333-333333333333')).toBeInTheDocument();
+    expect(screen.getByText('gast@example.de')).toBeInTheDocument();
+    expect(screen.getByText('pending@example.de')).toBeInTheDocument();
+    expect(screen.getByText('gone@example.de')).toBeInTheDocument();
+  });
+
+  it('hides revoke button for disabled guests only', () => {
+    mockGuests = [
+      makeGuest({ status: 'disabled' }),
+    ];
+    renderPage();
+    expect(screen.queryByTestId('revoke-guest-11111111-1111-1111-1111-111111111111')).not.toBeInTheDocument();
+  });
+
+  it('shows revoke button for active guests', () => {
+    mockGuests = [makeGuest({ status: 'active' })];
+    renderPage();
+    expect(screen.getByTestId('revoke-guest-11111111-1111-1111-1111-111111111111')).toBeInTheDocument();
+  });
+
+  it('opens invite dialog, fills form and submits', async () => {
+    renderPage();
+    fireEvent.click(screen.getByTestId('invite-guest-btn'));
+    const form = await screen.findByTestId('invite-guest-form');
+    expect(form).toBeInTheDocument();
+
+    fireEvent.change(screen.getByTestId('guest-name'), { target: { value: 'Neuer Gast' } });
+    fireEvent.change(screen.getByTestId('guest-email'), { target: { value: 'neu@example.de' } });
+    fireEvent.click(screen.getByTestId('send-guest-invite-btn'));
+
+    await waitFor(() => {
+      expect(inviteMut).toHaveBeenCalledWith({ name: 'Neuer Gast', email: 'neu@example.de' });
+    });
+  });
+
+  it('revokes a guest after confirmation', async () => {
+    mockGuests = [makeGuest({ status: 'active' })];
+    renderPage();
+    fireEvent.click(screen.getByTestId('revoke-guest-11111111-1111-1111-1111-111111111111'));
+
+    // ConfirmDialog confirm button (default label, de locale) — must not
+    // match the card's revoke button ('Widerrufen'), so exact match.
+    const confirmBtn = await screen.findByRole('button', { name: 'Bestätigen' });
+    fireEvent.click(confirmBtn);
+
+    await waitFor(() => {
+      expect(revokeMut).toHaveBeenCalledWith('11111111-1111-1111-1111-111111111111');
+    });
+  });
+
+  it('blocks invite submission with invalid email (zod)', async () => {
+    renderPage();
+    fireEvent.click(screen.getByTestId('invite-guest-btn'));
+    await screen.findByTestId('invite-guest-form');
+
+    fireEvent.change(screen.getByTestId('guest-name'), { target: { value: 'Neuer Gast' } });
+    fireEvent.change(screen.getByTestId('guest-email'), { target: { value: 'not-an-email' } });
+    fireEvent.click(screen.getByTestId('send-guest-invite-btn'));
+
+    await waitFor(() => {
+      expect(inviteMut).not.toHaveBeenCalled();
+    });
+  });
+});

frontend/src/api/guests.ts

@@ -0,0 +1,65 @@
+/**
+ * Guests API client — admin guest management (UI-Backlog module 14/16).
+ *
+ * Backend: /api/v1/guests (app/routes/guests.py, require_admin).
+ * - GET    /           → list guests (role=guest memberships for tenant)
+ * - POST   /invite     → invite guest (name + email; 409 if already active)
+ * - DELETE /{id}       → revoke guest (status=disabled + session invalidation)
+ *
+ * Guests are regular users with role='guest' in user_tenants; they log in
+ * via the normal login flow (password via reset flow).
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiGet, apiPost, apiDelete } from '@/api/client';
+
+export interface Guest {
+  id: string;
+  email: string;
+  name: string;
+  status: 'invited' | 'active' | 'disabled' | string;
+  role: string;
+  created_at: string | null;
+}
+
+export interface GuestInviteResponse {
+  email: string;
+  name: string;
+  status: string;
+  role: string;
+  message: string;
+}
+
+export interface GuestInvitePayload {
+  email: string;
+  name: string;
+}
+
+export function useGuests(enabled = true) {
+  return useQuery({
+    queryKey: ['guests'],
+    queryFn: () => apiGet<Guest[]>('/guests'),
+    enabled,
+  });
+}
+
+export function useInviteGuest() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: GuestInvitePayload) =>
+      apiPost<GuestInviteResponse>('/guests/invite', data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['guests'] });
+    },
+  });
+}
+
+export function useRevokeGuest() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (guestId: string) => apiDelete<{ message: string }>(`/guests/${guestId}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['guests'] });
+    },
+  });
+}

frontend/src/i18n/locales/de.json

@@ -389,7 +389,21 @@
     "resetTheme": "Zurücksetzen",
     "saveTheme": "Theme speichern",
     "mcp": "MCP",
-    "documents": "Dokumente"
+    "documents": "Dokumente",
+    "guests": "Gäste",
+    "inviteGuest": "Gast einladen",
+    "guestsHint": "Gäste sind reguläre Benutzer mit eingeschränkter Rolle. Sie melden sich über den normalen Login an (Passwort über die Passwort-zurücksetzen-Funktion).",
+    "guestsAdminOnly": "Nur Administratoren können Gäste verwalten.",
+    "guestInvited": "Gast eingeladen",
+    "guestRevoked": "Gast widerrufen — alle Sitzungen ungültig",
+    "revokeGuest": "Widerrufen",
+    "revokeGuestConfirm": "Gastzugang widerrufen",
+    "noGuests": "Noch keine Gäste eingeladen",
+    "guestPasswordHint": "Der Gast erhält ein zufälliges Passwort und legt sein eigenes Passwort über die Passwort-zurücksetzen-Funktion fest.",
+    "guestStatus_active": "Aktiv",
+    "guestStatus_invited": "Eingeladen",
+    "guestStatus_disabled": "Widerrufen",
+    "guestStatus_unknown": "Unbekannt"
   },
   "auditLog": {
     "title": "Audit-Log",

frontend/src/i18n/locales/en.json

@@ -389,7 +389,21 @@
     "resetTheme": "Reset",
     "saveTheme": "Save theme",
     "mcp": "MCP",
-    "documents": "Documents"
+    "documents": "Documents",
+    "guests": "Guests",
+    "inviteGuest": "Invite guest",
+    "guestsHint": "Guests are regular users with a restricted role. They sign in via the normal login flow (password via the reset flow).",
+    "guestsAdminOnly": "Only administrators can manage guests.",
+    "guestInvited": "Guest invited",
+    "guestRevoked": "Guest revoked — all sessions invalidated",
+    "revokeGuest": "Revoke",
+    "revokeGuestConfirm": "Revoke guest access",
+    "noGuests": "No guests invited yet",
+    "guestPasswordHint": "The guest gets a random password and sets their own password via the reset flow.",
+    "guestStatus_active": "Active",
+    "guestStatus_invited": "Invited",
+    "guestStatus_disabled": "Revoked",
+    "guestStatus_unknown": "Unknown"
   },
   "auditLog": {
     "title": "Audit Log",

frontend/src/pages/Settings.tsx

@@ -52,6 +52,7 @@ export function SettingsPage() {
     { to: '/settings/tenants', label: 'Mandanten', icon: '\ud83c\udfe2' },
     { 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' },
   ];
 
   const existingPaths = new Set(hardcodedNavItems.map(item => item.to));

frontend/src/pages/SettingsGuests.tsx

@@ -0,0 +1,221 @@
+/**
+ * Guests settings page — admin guest management (UI-Backlog module 14/16).
+ *
+ * Backend: /api/v1/guests (require_admin).
+ * - List guests (role=guest memberships), invite new guests, revoke access.
+ * Guests are regular users with role='guest' who log in via the normal
+ * login flow (password via the standard reset flow).
+ */
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Lock } from 'lucide-react';
+import { asError } from '@/utils/errorTypes';
+import {
+  useGuests,
+  useInviteGuest,
+  useRevokeGuest,
+  type Guest,
+} from '@/api/guests';
+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 { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { Avatar } from '@/components/ui/Avatar';
+
+const STATUS_VARIANT: Record<string, 'success' | 'warning' | 'danger' | 'secondary'> = {
+  active: 'success',
+  invited: 'warning',
+  disabled: 'danger',
+};
+
+const inviteSchema = z.object({
+  name: z.string().min(1, 'required'),
+  email: z.string().min(1, 'required').email('invalidEmail'),
+});
+
+type InviteFormData = z.infer<typeof inviteSchema>;
+
+function statusLabel(status: string): string {
+  const key = STATUS_VARIANT[status] !== undefined ? status : 'unknown';
+  return key;
+}
+
+export function SettingsGuestsPage() {
+  const { t } = useTranslation();
+  const toast = useToast();
+  const user = useAuthStore((state) => state.user);
+  const isAdmin = user?.is_system_admin === true;
+
+  const { data: guests, isLoading } = useGuests(isAdmin);
+  const inviteMutation = useInviteGuest();
+  const revokeMutation = useRevokeGuest();
+
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [confirmRevoke, setConfirmRevoke] = useState<Guest | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<InviteFormData>({
+    resolver: zodResolver(inviteSchema),
+    defaultValues: { name: '', email: '' },
+  });
+
+  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="guests-admin-only">
+            {t('settings.guestsAdminOnly')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const items = guests ?? [];
+
+  const onSubmit = async (data: InviteFormData) => {
+    try {
+      await inviteMutation.mutateAsync({
+        name: data.name.trim(),
+        email: data.email.trim(),
+      });
+      toast.success(t('settings.guestInvited'));
+      reset({ name: '', email: '' });
+      setInviteOpen(false);
+    } catch (err: unknown) {
+      const errObj = asError(err);
+      toast.error(errObj.message || t('common.error'));
+    }
+  };
+
+  const handleRevoke = async () => {
+    if (!confirmRevoke) return;
+    try {
+      await revokeMutation.mutateAsync(confirmRevoke.id);
+      toast.success(t('settings.guestRevoked'));
+      setConfirmRevoke(null);
+    } catch (err: unknown) {
+      const errObj = asError(err);
+      toast.error(errObj.message || t('common.error'));
+    }
+  };
+
+  const errorMsg = (key: string | undefined) => {
+    if (!key) return undefined;
+    if (key === 'required') return t('validation.required');
+    if (key === 'invalidEmail') return t('validation.email');
+    return key;
+  };
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto" data-testid="settings-guests-page">
+      <div className="flex items-center justify-between mb-2">
+        <h1 className="text-2xl font-bold text-secondary-900">{t('settings.guests')}</h1>
+        <Button
+          onClick={() => { reset({ name: '', email: '' }); setInviteOpen(true); }}
+          data-testid="invite-guest-btn"
+        >
+          {t('settings.inviteGuest')}
+        </Button>
+      </div>
+      <p className="text-sm text-secondary-500 mb-6">{t('settings.guestsHint')}</p>
+
+      {isLoading ? (
+        <div data-testid="guests-skeleton" className="space-y-3">
+          <Skeleton className="h-16" />
+          <Skeleton className="h-16" />
+          <Skeleton className="h-16" />
+        </div>
+      ) : items.length === 0 ? (
+        <EmptyState
+          title={t('settings.noGuests')}
+          action={<Button onClick={() => setInviteOpen(true)}>{t('settings.inviteGuest')}</Button>}
+        />
+      ) : (
+        <div className="space-y-3">
+          {items.map((guest) => (
+            <Card key={guest.id} data-testid={`guest-card-${guest.id}`}>
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  <Avatar name={guest.name || guest.email} size="sm" />
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-secondary-900 truncate">{guest.name}</p>
+                    <p className="text-sm text-secondary-500 truncate">{guest.email}</p>
+                  </div>
+                  <Badge variant={STATUS_VARIANT[guest.status] ?? 'secondary'} dot>
+                    {t(`settings.guestStatus_${statusLabel(guest.status)}`)}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2">
+                  {guest.status !== 'disabled' && (
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      onClick={() => setConfirmRevoke(guest)}
+                      data-testid={`revoke-guest-${guest.id}`}
+                      aria-label={t('settings.revokeGuest')}
+                    >
+                      {t('settings.revokeGuest')}
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <Modal open={inviteOpen} onClose={() => setInviteOpen(false)} title={t('settings.inviteGuest')}>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4" data-testid="invite-guest-form">
+          <Input
+            label={t('settings.name')}
+            type="text"
+            {...register('name')}
+            error={errorMsg(errors.name?.message)}
+            placeholder={t('settings.name')}
+            data-testid="guest-name"
+          />
+          <Input
+            label={t('settings.inviteEmail')}
+            type="email"
+            {...register('email')}
+            error={errorMsg(errors.email?.message)}
+            placeholder="gast@firma.de"
+            data-testid="guest-email"
+          />
+          <p className="text-xs text-secondary-500">{t('settings.guestPasswordHint')}</p>
+          <div className="flex justify-end gap-3">
+            <Button variant="secondary" onClick={() => setInviteOpen(false)}>{t('common.cancel')}</Button>
+            <Button type="submit" isLoading={isSubmitting} data-testid="send-guest-invite-btn">
+              {t('settings.inviteGuest')}
+            </Button>
+          </div>
+        </form>
+      </Modal>
+
+      <ConfirmDialog
+        open={!!confirmRevoke}
+        title={t('settings.revokeGuest')}
+        message={`${t('settings.revokeGuestConfirm')}: ${confirmRevoke?.name || confirmRevoke?.email}?`}
+        variant="danger"
+        onConfirm={handleRevoke}
+        onCancel={() => setConfirmRevoke(null)}
+      />
+    </div>
+  );
+}

frontend/src/routes/index.tsx

@@ -50,6 +50,7 @@ const ApiTokensPage = React.lazy(() => import('@/pages/ApiTokens').then(m => ({
 const TenantsPage = React.lazy(() => import('@/pages/Tenants').then(m => ({ default: m.TenantsPage })));
 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 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 })));
@@ -216,6 +217,7 @@ const router = createBrowserRouter([
           { path: 'tenants', element: withSuspense(<TenantsPage />) },
           { path: 'permission-templates', element: withSuspense(<PermissionTemplatesPage />) },
           { path: 'policies', element: withSuspense(<SettingsPoliciesPage />) },
+          { path: 'guests', element: withSuspense(<SettingsGuestsPage />) },
           { 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> },